/* Artemis War Room.
   ============================================================================
   One page in two schemes. Special Situations sits on warm ivory with navy
   type, the Originations treatment; Operations sits on deep navy with ivory
   type, the Operations treatment. Switching tab switches the ground, the same
   split the home page draws down its middle. Type scale, nav, buttons and
   footer are copied from those two pages, not redesigned.

   Generated pages live beside this file; their source is scripts/war-room/. */

:root{
  --ink:#040912;
  --paper:#f4f2ed;
  --silver:#9dafcc;
  --radius:18px;
  --fs-micro:11.5px;
  --fs-xs:12.5px;
  --fs-sm:13.5px;
  --fs-base:15px;
  --fs-lede:16.5px;
  --serif:'Cormorant',Georgia,serif;
  --serif-caps:'Cormorant SC',Georgia,serif;
  --sans:'Inter Tight',system-ui,sans-serif;
}

/* ---- the two schemes ---------------------------------------------------- */
[data-scheme="ivory"]{
  --ground:var(--paper);
  --heading:var(--ink);
  --body:#34405e;
  --muted:#6d7688;
  --accent:#34405e;
  --hair:rgba(4,9,18,.16);
  --hair-strong:rgba(4,9,18,.26);
  --card:rgba(255,255,255,.55);
  --card-hover:rgba(255,255,255,.9);
  --btn-bg:var(--ink);
  --btn-fg:var(--paper);
  --btn-hover:#101a2e;
  --nav-bg:rgba(244,242,237,.97);
  --nav-scrolled:rgba(244,242,237,.34);
  --glow-a:rgba(157,175,204,.30);
  --glow-b:rgba(157,175,204,.20);
  --glow-c:rgba(52,64,94,.07);
  --focus:var(--ink);
}
[data-scheme="navy"]{
  --ground:var(--ink);
  --heading:var(--silver);
  --body:#a8b0c2;
  --muted:#7b8496;
  --accent:var(--silver);
  --hair:rgba(157,175,204,.18);
  --hair-strong:rgba(157,175,204,.4);
  --card:rgba(244,242,237,.04);
  --card-hover:rgba(244,242,237,.08);
  --btn-bg:var(--silver);
  --btn-fg:var(--ink);
  --btn-hover:#b3c2da;
  --nav-bg:rgba(244,242,237,.07);
  --nav-scrolled:rgba(4,9,18,.85);
  --glow-a:rgba(52,64,94,.6);
  --glow-b:rgba(52,64,94,.36);
  --glow-c:rgba(157,175,204,.13);
  --focus:var(--silver);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--body);-webkit-font-smoothing:antialiased;min-height:100vh;
     background:
       radial-gradient(80% 75vh at 50% -5%,var(--glow-a),transparent 65%),
       radial-gradient(65% 60vh at 92% 15%,var(--glow-b),transparent 62%),
       radial-gradient(65% 60vh at 2% 38%,var(--glow-b),transparent 62%),
       radial-gradient(55% 48vh at 96% 70%,var(--glow-c),transparent 60%),
       var(--ground);
     transition:background-color .35s ease,color .35s ease}
p{line-height:1.7}
img{display:block;max-width:100%}
a:focus-visible,button:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--heading);color:var(--ground);
      padding:14px 22px;border-radius:0 0 12px 0;font-size:var(--fs-sm)}
.skip:focus{left:0}

.wrap{max-width:min(1000px,100vw - 72px);margin:0 auto;padding:0 28px}
.wrap.wide{max-width:min(1560px,100vw - 72px)} /* the Special Situations page's --measure-wide */
.wrap.read{max-width:min(760px,100vw - 72px)}

/* the wordmark comes in two colours; each scheme shows its own */
.mark-on-navy{display:none}
[data-scheme="navy"] .mark-on-navy{display:block}
[data-scheme="navy"] .mark-on-ivory{display:none}

/* ---- nav: the pill both service pages use ------------------------------ */
nav{position:fixed;inset:20px 20px auto;z-index:10;display:flex;align-items:center;justify-content:space-between;
    padding:15px 28px;border-radius:999px;background:var(--nav-bg);backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);border:1px solid var(--hair);transition:background .3s,border-color .3s}
nav.scrolled{background:var(--nav-scrolled)}
nav .brand{display:inline-flex;align-items:center;min-height:44px}
nav .brand img{width:126px;height:auto}
nav ul{display:flex;gap:26px;list-style:none;font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.14em}
nav a{color:var(--accent);text-decoration:none;opacity:.9;display:inline-flex;align-items:center;min-height:44px}
nav a:hover{opacity:1;color:var(--heading)}
nav a[aria-current="page"]{opacity:1;color:var(--heading)}
nav .back{width:20px;justify-content:center;font-size:15px;line-height:1;opacity:.75}
nav .btn{min-height:44px;padding:8px 20px;font-size:13px;color:var(--on-fill);opacity:1}
nav .btn:hover{color:var(--on-fill)}
nav ul{margin-left:auto}

/* ---- buttons: the cleaner portal's -----------------------------------
   Copied from apps/artemis/public/portal/design-system/components.css and
   tokens.css, as site/book.html does: a filled capsule with a sheen and a
   lift, a lift on hover where there is a mouse, pressed in on tap. Silver on
   navy, navy on ivory, the portal's two themes. */
[data-scheme="navy"]{
  --fill:#9dafcc;--on-fill:#040912;
  --sheen:linear-gradient(180deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.03) 55%,rgba(0,0,0,.06) 100%);
  --sheen-outline:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.015) 60%,rgba(0,0,0,.04));
  --lift-outline:inset 0 1px 0 rgba(255,255,255,.08),0 1px 2px rgba(4,9,18,.18),0 3px 8px -5px rgba(4,9,18,.25);
  --lift-outline-hover:inset 0 1px 0 rgba(255,255,255,.12),0 2px 4px rgba(4,9,18,.20),0 6px 14px -6px rgba(4,9,18,.32);
  --wash:rgba(157,175,204,.10);
}
[data-scheme="ivory"]{
  --fill:#040912;--on-fill:#f4f2ed;
  --sheen:linear-gradient(180deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.03) 55%,rgba(0,0,0,.06) 100%);
  --sheen-outline:linear-gradient(180deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,.25) 60%,rgba(4,9,18,.025) 100%);
  --lift-outline:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(4,9,18,.07),0 3px 8px -5px rgba(4,9,18,.16);
  --lift-outline-hover:inset 0 1px 0 rgba(255,255,255,.9),0 2px 4px rgba(4,9,18,.08),0 6px 14px -6px rgba(4,9,18,.22);
  --wash:rgba(4,9,18,.05);
}
.btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;min-width:44px;
     padding:10px 24px;border:1px solid var(--fill);border-radius:999px;background-color:var(--fill);background-image:var(--sheen);
     color:var(--on-fill);font:600 14px/1.35 var(--sans);text-align:center;text-decoration:none;white-space:nowrap;cursor:pointer;
     box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 2px rgba(4,9,18,.20),0 4px 10px -4px rgba(4,9,18,.32);
     transition:background-color .15s ease,color .15s ease,box-shadow .2s ease,transform .2s ease}
.btn.ghost{border-color:var(--hair-strong);background-color:transparent;background-image:var(--sheen-outline);
     color:var(--heading);box-shadow:var(--lift-outline)}
@media(hover:hover){
  .btn:hover:not(:disabled){filter:brightness(1.06);transform:translateY(-1px);
     box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 2px 4px rgba(4,9,18,.18),0 8px 18px -6px rgba(4,9,18,.36)}
  .btn.ghost:hover:not(:disabled){background-color:var(--wash);box-shadow:var(--lift-outline-hover)}
}
.btn:active:not(:disabled){box-shadow:inset 0 2px 4px rgba(4,9,18,.24);transform:translateY(0)}
.btn:disabled{opacity:.6;cursor:progress;transform:none}
@media(prefers-reduced-motion:reduce){.btn{transition:none;transform:none}}

/* The arrow the "Read" line on a card carries. */
.arrow::after{content:"";width:18px;height:12px;flex:none;background:currentColor;
     -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M1 8h21M15.5 2l6.5 6-6.5 6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
     mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M1 8h21M15.5 2l6.5 6-6.5 6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}

/* ---- type -------------------------------------------------------------- */
.display{font-family:var(--serif);font-weight:500;line-height:1.15;color:var(--heading)}
h1.display{font-size:clamp(34px,4.2vw,56px);text-transform:uppercase;letter-spacing:.09em}
.eyebrow{font-family:var(--serif-caps);font-size:var(--fs-base);letter-spacing:.3em;text-transform:uppercase;
         font-weight:600;color:var(--accent)}
.meta{font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ---- index: hero and tabs ---------------------------------------------- */
.hero{padding:168px 0 36px;text-align:center}
.hero .eyebrow{margin-bottom:18px}
.hero p{margin:18px auto 0;max-width:56ch;font-size:var(--fs-lede)}

.tabs{display:flex;justify-content:center;margin-top:40px}
.tabs [role="tablist"]{display:inline-flex;gap:4px;padding:4px;border-radius:999px;border:1px solid var(--hair-strong)}
.tab{font-family:var(--sans);font-size:var(--fs-xs);font-weight:500;letter-spacing:.12em;text-transform:uppercase;
     min-height:44px;padding:0 26px;border-radius:999px;border:0;background:transparent;color:var(--accent);
     cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;transition:background .25s,color .25s}
.tab:hover{color:var(--heading)}
.tab[aria-selected="true"]{background:var(--btn-bg);color:var(--btn-fg)}

.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0}
.chip{font-family:var(--sans);font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;
      min-height:36px;padding:0 16px;border-radius:999px;border:1px solid var(--hair);background:transparent;
      color:var(--accent);cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.chip:hover{border-color:var(--hair-strong);color:var(--heading)}
.chip[aria-pressed="true"]{border-color:var(--heading);color:var(--heading);background:var(--card)}

.panel{padding:28px 0 96px}
.panel[hidden]{display:none}

/* ---- post cards: the whole card is the link ---------------------------- */
/* Cards in four columns (owner, 2026-10-23), three, two, then one on a
   phone. The whole card is the link (rule.card.whole-card-opens) and the
   Read line sits on the bottom edge so a row of cards lines up. */
.posts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;list-style:none}
.posts li[hidden]{display:none}
.card{display:flex;flex-direction:column;height:100%;padding:24px 22px 22px;border-radius:var(--radius);
      border:1px solid var(--hair);background:var(--card);text-decoration:none;color:inherit;
      transition:border-color .2s,background .2s}
.card:hover{border-color:var(--hair-strong);background:var(--card-hover)}
.card .meta{display:flex;flex-direction:column;gap:4px}
.card h2{font-family:var(--serif);font-weight:500;font-size:22px;line-height:1.22;color:var(--heading);margin-top:14px;text-wrap:balance}
.card p{margin-top:10px;font-size:var(--fs-sm);line-height:1.6}
.card .more{margin-top:auto;padding-top:18px;font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;
            color:var(--accent);display:inline-flex;align-items:center;gap:10px;transition:gap .2s}
.card:hover .more{gap:16px}
@media (max-width:1180px){.posts{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:880px){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.posts{grid-template-columns:minmax(0,1fr)}}
.empty{text-align:center;color:var(--muted);font-size:var(--fs-sm);padding:24px 0}

/* ---- a post ------------------------------------------------------------ */
.post-head{margin-bottom:8px}
.crumb{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:var(--fs-micro);letter-spacing:.14em;
       text-transform:uppercase;color:var(--accent);text-decoration:none}
.crumb:hover{color:var(--heading)}
.post-head .meta{margin-top:18px;display:flex;flex-wrap:wrap;gap:6px 14px}
.post-head h1{font-family:var(--serif);font-weight:500;font-size:clamp(32px,4vw,50px);line-height:1.12;
              color:var(--heading);margin-top:14px;text-wrap:balance}
.post-head .lede{margin-top:18px;font-size:var(--fs-lede);line-height:1.65}

.example{margin-top:26px;padding:14px 18px;border-radius:12px;border:1px solid var(--hair);
         font-size:var(--fs-sm);color:var(--muted)}
.facts{margin-top:18px;border-top:1px solid var(--hair)}
.facts div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--hair)}
.facts dt{font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-top:2px}
.facts dd{font-size:var(--fs-sm);color:var(--heading)}

/* ---- the article -------------------------------------------------------
   A reading column and, on a wide screen, a side column that stays in view:
   the facts of a case, or the sections of an article, then the next step.
   On a phone the side column comes first and the next step comes last. */
.post-wrap{max-width:min(1320px,100vw - 72px)}
/* The header and the article share the left column, so they are one width;
   the side column starts level with the top of the post. */
.post-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:88px;align-items:start;padding-top:160px}
.post-aside{position:sticky;top:120px}
.cta-end{display:none}
/* A case study's facts: one strip under the title, then the made-up note. */
.facts-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;margin-top:28px;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.facts-strip div{padding:14px 20px 14px 0}
.facts-strip dt{font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.facts-strip dd{margin-top:4px;font-size:var(--fs-sm);line-height:1.45;color:var(--heading)}
.post-head .example{display:inline-block;margin-top:14px;padding:8px 14px;font-size:var(--fs-micro)}
.facts-strip[data-n="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.facts-strip,.facts-strip[data-n]{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cta-end.always{display:block;margin-top:48px}
.prose{font-size:17.5px;line-height:1.75}
.intro p:first-child{font-size:19px;line-height:1.65;color:var(--heading)}
.intro p + p{margin-top:16px}
.sec{margin-top:48px;padding-top:32px;border-top:1px solid var(--hair)}
.intro + .sec,.prose > .sec:first-child{margin-top:40px}
.prose > .sec:first-child{border-top:0;padding-top:0}
.sec h2{display:flex;align-items:baseline;gap:14px;font-family:var(--serif);font-weight:500;font-size:clamp(25px,2.4vw,31px);line-height:1.2;color:var(--heading)}
.sec h2 .n{flex:none;font-family:var(--sans);font-size:var(--fs-micro);font-weight:500;letter-spacing:.2em;color:var(--muted);transform:translateY(-3px)}
.sec p{margin-top:16px}
.sec ul{margin-top:16px;padding:0;list-style:none}
.sec li{position:relative;padding-left:22px;margin-top:10px}
.sec li::before{content:"";position:absolute;left:2px;top:.8em;width:8px;height:1px;background:var(--accent)}
.prose strong{color:var(--heading);font-weight:500}
/* A list of titled problems becomes small cards. */
.points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:20px}
.point{padding:18px 20px;border:1px solid var(--hair);border-radius:14px;background:var(--card)}
.point h3{font:500 15.5px/1.35 var(--sans);color:var(--heading)}
.point p{margin-top:6px;font-size:14.5px;line-height:1.6}
/* What to take from it: a ticked box. */
.sec.take{border-top:0;padding:28px 30px;border-radius:var(--radius);background:var(--card);border:1px solid var(--hair-strong)}
.sec.take h2{font-size:24px}
.sec.take li{padding-left:30px}
.sec.take li::before{content:"\2713";width:auto;height:auto;background:none;top:0;left:0;color:var(--heading);font-size:14px}
/* The three ways in under a case: one line and one button each. */
.cta.ways{text-align:left;padding:8px 24px}
.cta.ways .way{padding:20px 0}
.cta.ways .way + .way{border-top:1px solid var(--hair)}
.cta.ways .way h2{font-size:21px}
.cta.ways .way p{margin:6px 0 0;max-width:none}
.cta.ways .way .btn{margin-top:14px}
.cta-end .cta.ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px;padding:8px 24px}
.cta-end .cta.ways .way + .way{border-top:0}
.cta-end .cta.ways .way{display:flex;flex-direction:column;align-items:flex-start}
.cta-end .cta.ways .way .btn{margin-top:auto}
.cta-end .cta.ways .way p{margin-bottom:16px}
@media (max-width:760px){
  .cta-end .cta.ways{grid-template-columns:minmax(0,1fr)}
  .cta-end .cta.ways .way + .way{border-top:1px solid var(--hair)}
  .cta.ways .way .btn{width:100%}
}
.aside-cta .cta.ways{padding:4px 22px}
.aside-cta .cta.ways .way .btn{width:100%}
/* The side column. */
.aside-in .example{margin:0 0 4px}
.aside-in .facts{margin-top:14px}
.aside-in .facts div{grid-template-columns:minmax(0,1fr);gap:4px;padding:12px 0}
.toc-h{font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.toc ol{list-style:none;margin-top:10px;border-left:1px solid var(--hair)}
.toc a{display:block;padding:7px 0 7px 16px;margin-left:-1px;border-left:1px solid transparent;color:var(--body);text-decoration:none;font-size:14.5px;line-height:1.4;transition:color .2s,border-color .2s}
.toc a{transition:color .25s,border-color .25s,background-color .25s,padding-left .25s,font-weight .25s}
.toc a:hover{color:var(--heading);border-left-color:var(--hair-strong)}
/* The section being read: a heavy bar, bold dark text, a soft wash and a nudge in. */
.toc a.on{color:var(--heading);font-weight:600;border-left:3px solid var(--heading);margin-left:-2px;
          padding-left:22px;background:var(--card);border-radius:0 8px 8px 0}
.aside-cta .cta{margin-top:24px;padding:22px;text-align:left}
.aside-cta .cta h2{font-size:22px}
.aside-cta .cta p{margin:8px 0 0;max-width:none}
.aside-cta .cta .acts{flex-direction:column;align-items:stretch;justify-content:flex-start;margin-top:16px}
@media (max-width:1000px){
  .post-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .post-aside{display:none}
  .cta-end{display:block}
  .prose{max-width:none}
}
@media (max-width:560px){
  .post-wrap{max-width:none}
  .points{grid-template-columns:minmax(0,1fr)}
  .sec.take{padding:22px 18px}
  .intro p:first-child{font-size:17.5px}
}
.cta{margin:32px 0 0;padding:32px;border-radius:var(--radius);border:1px solid var(--hair);background:var(--card);text-align:center}
.cta h2{font-family:var(--serif);font-weight:500;font-size:clamp(23px,2.4vw,28px);color:var(--heading)}
.cta p{margin:10px auto 0;max-width:52ch;font-size:var(--fs-sm)}
.cta .acts{margin-top:22px;display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

.related{padding:64px 0 56px}


/* ---- footer ------------------------------------------------------------ */
footer{padding:0 0 48px}
.foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
      padding-top:24px;border-top:1px solid var(--hair);font-size:var(--fs-sm);color:var(--muted)}
.foot a{color:var(--body);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.foot a:hover{color:var(--heading)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body,.card,.tab,.chip,.btn{transition:none}
}

/* ---- phone ------------------------------------------------------------- */
@media (max-width:880px){
  nav{inset:12px 12px auto;padding:10px 16px;flex-wrap:wrap}
  .hero{padding-top:156px}
  .post-grid{padding-top:150px}
  nav ul{order:3;flex-basis:100%;justify-content:center;margin:6px 0 0;padding-top:6px;border-top:1px solid var(--hair)}
  nav ul a{min-height:36px;font-size:10px}
  nav .btn{padding:8px 16px}
  nav ul{gap:18px}
  nav .btn{padding:9px 14px;font-size:10.5px;letter-spacing:.04em}
}
@media (max-width:560px){
  .wrap,.wrap.wide,.wrap.read{max-width:none;padding:0 16px}
  nav .brand img{width:104px}
  nav ul{gap:14px;letter-spacing:.08em}
  .hero{padding:150px 0 20px}
  .tabs [role="tablist"]{display:flex;width:100%}
  .tab{flex:1 1 0;justify-content:center;padding:0 10px;font-size:11px;letter-spacing:.08em}
  .post-grid{padding-top:148px}
  .facts div{grid-template-columns:minmax(0,1fr);gap:4px}
  .cta{padding:24px 18px}
  .cta .btn{white-space:normal;text-align:center}
}

/* ---- War Room updates: the sign-up box ---------------------------------
   An email box and one button. Sign Up opens the confirm dialog below. */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
[data-scheme="ivory"]{--control-bg:#fdfcfa;--control-focus-bg:#fff;--surface:#f4f2ed;--row-hover:rgba(4,9,18,.04)}
[data-scheme="navy"]{--control-bg:rgba(244,242,237,.04);--control-focus-bg:rgba(244,242,237,.07);--surface:#0b1220;--row-hover:rgba(244,242,237,.05)}
.signup{padding:8px 0 72px}
/* Two boxes side by side, one under the other on a phone. */
.foot-boxes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.signup > .wrap > .fine{margin-top:16px;text-align:center;font-size:var(--fs-micro);color:var(--muted)}
.signup > .wrap > .fine a{color:inherit}
@media (max-width:880px){.foot-boxes{grid-template-columns:minmax(0,1fr)}}
.field-label{display:block;margin:18px 0 8px;font:500 14px/1.4 var(--sans);color:var(--heading)}
.field-label .opt{margin-left:6px;font-weight:400;color:var(--muted);white-space:nowrap}
.field-label .sub{display:block;margin-top:2px;font-weight:400;color:var(--muted)}
.signup-box{padding:20px 22px;border-radius:14px;border:1px solid var(--hair);background:var(--card);text-align:left}
.signup-box h2{font-family:var(--serif);font-weight:500;font-size:21px;line-height:1.2;color:var(--heading)}
.signup-row{display:flex;gap:8px;margin-top:12px}
.signup-msg{margin-top:12px;font-size:var(--fs-sm);color:var(--heading)}
.signup-msg:empty{display:none}
.signup-box .fine{margin-top:14px;font-size:var(--fs-micro);color:var(--muted)}
.signup-box .fine a{color:inherit}

/* Fields: the public field size (rule.form.field-size). */
.control{flex:1 1 auto;min-width:0;width:100%;font-family:var(--sans);font-size:16px;color:var(--heading);
         background:var(--control-bg);border:1px solid var(--hair-strong);border-radius:12px;
         padding:13px 15px;min-height:48px;transition:border-color .2s,background .2s}
.control::placeholder{color:var(--muted)}
.control:focus{border-color:var(--heading);background:var(--control-focus-bg);outline:none;box-shadow:0 0 0 3px rgba(157,175,204,.35)}
.signup-row .btn{flex:none}
.signup-lede{flex:1 1 auto;align-self:center;margin:0;font-size:15px;line-height:1.5;color:var(--body)}
textarea.control{resize:vertical;min-height:96px;line-height:1.5}
dialog.confirm p.field-label{margin:18px 0 0}
.signup-row .control,.signup-row .btn{min-height:44px}
.signup-row .control{padding:10px 14px;font-size:15px}

/* ---- the confirm dialog (rule.confirm.native-dialog) -------------------- */
dialog.confirm{margin:auto;width:min(520px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:24px;
               border:1px solid var(--hair-strong);border-radius:16px;background:var(--surface);color:var(--body);
               box-shadow:0 24px 60px -12px rgba(4,9,18,.5)}
dialog.confirm:focus{outline:none}
dialog.confirm::backdrop{background:rgba(4,9,18,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
dialog.confirm h2{font-family:var(--serif);font-weight:500;font-size:27px;line-height:1.2;color:var(--heading)}
dialog.confirm h2 + p{margin-top:8px;font-size:15px}
/* The Mandate form's choice rows: the whole row is the target, 48px tall. */
.choices{display:grid;gap:2px;margin-top:16px}
.choice{display:flex;align-items:center;gap:13px;cursor:pointer;padding:12px 14px;min-height:48px;border-radius:10px;
        font-size:16px;line-height:1.5;color:var(--heading);transition:background .18s}
.choice:hover{background:var(--row-hover)}
.choice input{appearance:none;-webkit-appearance:none;flex:none;width:20px;height:20px;margin:0;border:1px solid var(--hair-strong);
              border-radius:5px;background:var(--control-bg);cursor:pointer}
.choice input:checked{background-color:var(--fill);border-color:var(--fill);background-repeat:no-repeat;background-position:center;background-size:11px}
[data-scheme="ivory"] .choice input:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11'%3E%3Cpath d='M1 5.5 5 9.5 13 1.5' fill='none' stroke='%23f4f2ed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
[data-scheme="navy"] .choice input:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11'%3E%3Cpath d='M1 5.5 5 9.5 13 1.5' fill='none' stroke='%23040912' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.choice input[type="radio"]{border-radius:50%}
.choice input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.cf-host{display:flex;justify-content:center;margin-top:12px}
.cf-host:empty{display:none}
.confirm-msg{margin-top:12px;font-size:var(--fs-sm);color:var(--heading)}
.confirm-msg:empty{display:none}
.confirm-acts{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
.confirm-done p{margin-top:8px;font-size:15px}
@media (max-width:540px){
  dialog.confirm{padding:20px}
  .confirm-acts .btn{flex:1 1 0}
}

/* ---- phone: one bar, one row of filters ---------------------------------
   The links wrapped two words to a line under the bar. On a phone the bar
   keeps the wordmark and the back arrow; the two service pages are one tap
   away through the arrow. The filters become a single row
   you swipe sideways instead of three rows of pills (rule.mobile.recompose). */
@media (max-width:560px){
  nav{flex-wrap:nowrap}
  nav ul{order:0;flex-basis:auto;margin:0 10px 0 auto;padding:0;border:0}
  nav ul li:not(:first-child){display:none}
  .hero{padding-top:124px}
  .post-grid{padding-top:124px}
  .chips{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;margin:0 -16px;padding:2px 16px 6px;
         scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:none}
  .cta .acts{flex-direction:column;align-items:stretch}
  .cta .acts .btn{width:100%}
  .signup-box{padding:18px 16px}
  .signup-row{flex-direction:column}
  .signup-row .btn{width:100%}
}
@media (max-width:360px){.tab{white-space:nowrap;font-size:10px;letter-spacing:.04em;padding:0 6px}}

@media (max-width:360px){.tab{white-space:nowrap;font-size:10px;letter-spacing:.04em;padding:0 6px}}

/* ---- movement ----------------------------------------------------------
   The header arrives once, in reading order, the way the home page does.
   Cards rise in one after another (war-room.js sets the delay), and lift a
   little under a pointer, the portal's lift. All of it is off for anyone
   who has asked for less motion. */
@keyframes wr-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.hero .wrap > *,.post-head > *{animation:wr-arrive .6s cubic-bezier(.2,.7,.3,1) backwards}
.hero .wrap > :nth-child(2),.post-head > :nth-child(2){animation-delay:.08s}
.hero .wrap > :nth-child(3),.post-head > :nth-child(3){animation-delay:.16s}
.hero .wrap > :nth-child(4),.post-head > :nth-child(4){animation-delay:.24s}
.post-head > :nth-child(n+5){animation-delay:.3s}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .55s ease var(--d,0ms),transform .6s cubic-bezier(.2,.7,.3,1) var(--d,0ms)}
.reveal.in{opacity:1;transform:none}
.card{transition:border-color .2s,background .2s,transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s}
@media (hover:hover) and (pointer:fine){
  .card:hover{transform:translateY(-3px);box-shadow:0 14px 30px -18px rgba(4,9,18,.45)}
}
.card:active{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){
  .hero .wrap > *,.post-head > *{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
  .card,.card:hover{transform:none;transition:none}
}

/* ---- the revolving rail under a post -----------------------------------
   The five latest posts from the same side, then the same five again, so
   the rail can loop without a jump (war-room.js drifts it slowly and steps
   back a set when it passes the end). It stops under a pointer, a finger or
   the keyboard, swipes on a phone and stays still for reduced motion. The copies are inert, so a keyboard and a screen reader meet each
   post once. */
.rail-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.rail-head .eyebrow{margin:0;text-align:left}
.rail-arrows{display:flex;gap:8px}
.rail-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--hair-strong);background:transparent;
          color:var(--heading);font-size:16px;cursor:pointer;transition:background .2s,border-color .2s}
.rail-btn:hover{background:var(--card);border-color:var(--heading)}
.rail{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
      padding:6px 0 18px;scroll-padding-left:calc((100vw - min(1560px, 100vw - 72px)) / 2 + 28px);
      -webkit-mask:linear-gradient(90deg,transparent 0,#000 36px,#000 calc(100% - 36px),transparent 100%);
      mask:linear-gradient(90deg,transparent 0,#000 36px,#000 calc(100% - 36px),transparent 100%)}
.rail::-webkit-scrollbar{display:none}
.rail-track{display:flex;gap:16px;list-style:none;width:max-content;
            padding:0 calc((100vw - min(1560px, 100vw - 72px)) / 2 + 28px)}
.rail-track li{flex:0 0 300px}
.rail-track .card:hover{transform:translateY(-3px)}
@media (max-width:560px){
  .rail-track{padding:0 16px}
  .rail{scroll-padding-left:16px}
  .rail-track li{flex-basis:78vw}
  .rail-arrows{display:none}
}