/* militarymovers.org — visual system.
   Rebuilt 2026-08-25 after the honest note: "this looks so bland."
   It was. The first pass stripped out noise and never put character back.

   THE IDEA: the poetry is serif, the proof is mono.
   Instrument Serif carries the human lines — the ones meant to land in the chest.
   IBM Plex Mono carries every receipt, source URL, and label — the document voice.
   Archivo does the work in between. That split is Commandment 4 made visible:
   tender strength, never soft weakness.

   THE COLOR: brass on midnight.
   Not Army green, not Navy blue, not Air Force blue — pick any one of those and
   you have told four branches this room is not theirs. Brass is on every
   insignia in every service. It is the one metal nobody is excluded by.
*/

/* ---------------------------------------------------------------- tokens */
:root{
  /* ground */
  --night:#0B0F16;          /* full-bleed feature bands */
  --night-2:#141C27;        /* raised surface on night */
  --night-3:#1E2836;        /* hairline on night */
  --paper:#FAF8F4;          /* warm, not clinical */
  --card:#FFFFFF;

  /* ink */
  --ink:#0F151D;
  --slate:#5C6875;
  --slate-soft:#8A94A0;
  --hair:#E2DCD2;
  --hair-soft:#EDE9E2;

  /* metal */
  --brass:#B4913C;
  --brass-lit:#D8B863;      /* on night */
  --brass-soft:#F5EEDC;
  --brass-hair:rgba(180,145,60,.34);

  --accent:#1B4A73;
  --accent-soft:var(--brass-soft);
  --accent-ink:var(--paper);
  --go:#2C6F52;
  --hold:#8A5A17;
  --hold-soft:#F7EEDA;
  --stop:#9B382C;

  --on-night:#F2EFE9;
  --on-night-soft:#9AA5B2;

  --shadow:0 1px 2px rgba(15,21,29,.05), 0 18px 44px -30px rgba(15,21,29,.45);
  --shadow-lift:0 2px 4px rgba(15,21,29,.06), 0 28px 60px -32px rgba(15,21,29,.5);

  --measure:44ch;
  --gutter:28px;
  --shell:960px;
}

@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#0E141C; --card:#161E29; --ink:#EDEFF2; --slate:#98A3B0; --slate-soft:#788493;
  --hair:#28323F; --hair-soft:#1D2631;
  --brass:#D8B863; --brass-soft:#241D0E; --brass-hair:rgba(216,184,99,.28);
  --accent:#8CBBE3; --go:#7CCBA0; --hold:#DCA855; --hold-soft:#2A2115; --stop:#FF8A80;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 18px 44px -30px rgba(0,0,0,.9);
  --shadow-lift:0 2px 4px rgba(0,0,0,.5), 0 28px 60px -32px rgba(0,0,0,.95);
}}
:root[data-theme="dark"]{
  --paper:#0E141C; --card:#161E29; --ink:#EDEFF2; --slate:#98A3B0; --slate-soft:#788493;
  --hair:#28323F; --hair-soft:#1D2631;
  --brass:#D8B863; --brass-soft:#241D0E; --brass-hair:rgba(216,184,99,.28);
  --accent:#8CBBE3; --go:#7CCBA0; --hold:#DCA855; --hold-soft:#2A2115; --stop:#FF8A80;
}

/* ---------------------------------------------------------------- reset */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:Archivo,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17.5px;line-height:1.55;-webkit-font-smoothing:antialiased;
  /* clip, not hidden: full-bleed bands can overhang without killing sticky */
  overflow-x:clip;
}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--brass);color:var(--night);
  padding:10px 16px;border-radius:3px;font-weight:700}

/* ------------------------------------------------------------ full bleed
   Paints edge to edge with no change to the page markup.

   The first attempt used an absolutely positioned ::before at z-index:-1.
   It worked on the hero and rendered grey on every other band, because the
   scroll-reveal animation turns each <section> into its own stacking context —
   and a negative z-index child cannot escape one. Screenshotting the build
   caught it; the browser was right and the theory was wrong.

   box-shadow spread plus a horizontal clip has no such failure mode: the
   background belongs to the element itself, so there is no stacking to lose. */
.hero,
section.night{
  background-color:var(--night);
  box-shadow:0 0 0 100vmax var(--night);
  clip-path:inset(0 -100vmax);
}
/* No gradient or grain on the bands. Both only paint inside the element box
   while the box-shadow spread paints the overhang flat, which leaves a visible
   vertical seam at the content edge. The depth comes from the brass hairline
   and the type, not from a wash nobody consciously sees. */

/* ---------------------------------------------------------------- chrome */
.topbar{position:sticky;top:0;z-index:20;background:var(--night);
  border-bottom:1px solid var(--night-3)}
.topbar-in{max-width:var(--shell);margin:0 auto;padding:16px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.brand{font-weight:700;font-size:16px;letter-spacing:-.015em;color:var(--on-night);text-decoration:none}
.brand span{color:var(--brass-lit)}
nav{display:flex;gap:24px;flex-wrap:wrap}
nav a{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--on-night-soft);text-decoration:none;padding:3px 0;
  border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
nav a:hover{color:var(--on-night)}
nav a[aria-current="page"]{color:var(--brass-lit);border-bottom-color:var(--brass-lit)}

main{max-width:var(--shell);margin:0 auto;padding:0 var(--gutter)}

/* ---------------------------------------------------------------- hero */
.hero{position:relative;padding:104px 0 96px;display:flex;flex-direction:column;gap:24px;color:var(--on-night)}
.kicker{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--brass-lit);margin:0;
  display:flex;align-items:center;gap:14px}
.kicker::after{content:"";flex:0 0 64px;height:1px;background:var(--brass-hair)}
h1{
  font-family:"Instrument Serif",Georgia,"Times New Roman",serif;font-weight:400;
  font-size:clamp(46px,8.4vw,92px);line-height:.98;letter-spacing:-.022em;
  margin:0;text-wrap:balance;max-width:15ch;color:var(--on-night)
}
.turn{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-style:italic;
  font-size:clamp(24px,4vw,38px);line-height:1.18;letter-spacing:-.01em;
  color:var(--brass-lit);margin:0;max-width:24ch}
.sub{font-size:18.5px;line-height:1.6;color:var(--on-night-soft);margin:0;max-width:46ch}
.hero .btn{align-self:flex-start}

/* ---------------------------------------------------------------- sections */
section{position:relative;padding:76px 0;border-top:1px solid var(--hair);scroll-margin-top:78px}
section.night{color:var(--on-night);border-top:1px solid var(--brass-hair);padding:88px 0}
/* A light section that follows a night band already has an edge — the band's
   own boundary. A second hairline five pixels under it reads as a mistake. */
section.night + section:not(.night){border-top:0}
section.night h2,section.night .line{color:var(--on-night)}
section.night p{color:var(--on-night-soft)}
section.night p b,section.night p strong{color:var(--on-night)}
section.night .eyebrow{color:var(--brass-lit)}

.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--brass);margin:0 0 22px;
  display:flex;align-items:center;gap:12px}
.eyebrow::after{content:"";flex:0 0 40px;height:1px;background:var(--brass-hair)}

h2{font-family:"Instrument Serif",Georgia,serif;font-weight:400;
  font-size:clamp(30px,5vw,48px);line-height:1.04;letter-spacing:-.018em;
  margin:0 0 22px;text-wrap:balance;max-width:19ch;color:var(--ink)}
h3{font-family:Archivo,sans-serif}

p{margin:0 0 15px;max-width:var(--measure);font-size:17.5px;color:var(--slate);text-wrap:pretty}
p:last-child{margin-bottom:0}
p b,p strong{color:var(--ink);font-weight:600}
.tight{max-width:37ch}

/* the emotional lines — serif, so they read as spoken, not as UI */
.line{font-family:"Instrument Serif",Georgia,serif;font-weight:400;
  font-size:clamp(26px,4.4vw,40px);line-height:1.14;letter-spacing:-.014em;
  color:var(--ink);margin:0 0 6px;max-width:24ch;text-wrap:balance}
.line:last-child{margin-bottom:0}
.lines{margin:0 0 32px}


/* the turn line: the one that is supposed to land */
.line.key{color:var(--brass)}
section.night .line.key{color:var(--brass-lit)}

/* tokens the app surface still leans on */

/* ---------------------------------------------------------------- numbers */
.big{display:block;font-family:Archivo,sans-serif;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--brass);
  font-size:clamp(60px,13vw,116px);line-height:.88;letter-spacing:-.05em;margin:0 0 10px}
section.night .big{color:var(--brass-lit)}
.big-cap{font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--slate);margin:0 0 34px;max-width:none}
section.night .big-cap{color:var(--on-night-soft)}
.figure{font-weight:700;font-variant-numeric:tabular-nums;color:var(--brass);white-space:nowrap}

.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:1px;
  background:var(--hair);border:1px solid var(--hair);border-radius:4px;overflow:hidden;margin:10px 0 0}
.fact{background:var(--card);padding:22px 22px}
.fact b{display:block;font-size:30px;font-weight:700;line-height:1.02;letter-spacing:-.028em;
  font-variant-numeric:tabular-nums;margin-bottom:7px;color:var(--brass)}
.fact > span{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--slate);line-height:1.5;display:block}
.fact b span{font:inherit;letter-spacing:inherit;text-transform:none;color:inherit;display:inline}
section.night .facts{background:var(--night-3);border-color:var(--night-3)}
section.night .fact{background:var(--night-2)}
section.night .fact > span{color:var(--on-night-soft)}

.three{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:36px;margin-top:6px}
.three h3{font-weight:700;font-size:17px;margin:0 0 8px;letter-spacing:-.012em;color:var(--ink)}
section.night .three h3{color:var(--brass-lit)}
.three p{font-size:16px;max-width:none;margin:0}

/* ---------------------------------------------------------------- cta */
.cta{background:var(--card);border:1px solid var(--hair);border-radius:6px;
  padding:34px;box-shadow:var(--shadow);max-width:450px;margin-top:10px;
  position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--brass),var(--brass-hair))}
.cta h3{font-family:"Instrument Serif",Georgia,serif;font-weight:400;
  font-size:26px;margin:0 0 6px;letter-spacing:-.012em;color:var(--ink)}
.cta > p{font-size:16px;margin:0;color:var(--slate)}
section.night .cta{background:var(--night-2);border-color:var(--night-3)}
section.night .cta h3{color:var(--on-night)}
section.night .cta > p,section.night .fineprint{color:var(--on-night-soft)}

.form-row{display:flex;flex-direction:column;gap:8px;margin-top:20px}
label{font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--slate)}
input{font-family:inherit;font-size:16.5px;padding:13px 14px;border:1px solid var(--hair);
  border-radius:4px;background:var(--paper);color:var(--ink);width:100%;
  transition:border-color .15s,box-shadow .15s}
input:focus{outline:0;border-color:var(--brass);box-shadow:0 0 0 3px var(--brass-hair)}
section.night input{background:var(--night);border-color:var(--night-3);color:var(--on-night)}

.btn{display:inline-block;font-family:inherit;font-weight:600;font-size:16.5px;
  padding:15px 30px;border:0;border-radius:4px;background:var(--brass);color:var(--night);
  cursor:pointer;text-decoration:none;margin-top:22px;
  transition:transform .16s cubic-bezier(.2,.7,.3,1),box-shadow .16s,background .16s}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift);background:var(--brass-lit)}
.btn:active{transform:translateY(0)}
/* One button colour on every surface. A black button on the recruiting page
   and a brass one on the hero is two brands arguing. */
.hero .btn,section.night .btn{background:var(--brass);color:var(--night)}
section.night .btn:hover{background:var(--brass-lit)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--ink);margin-top:10px}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
section.night .btn-ghost{background:transparent;color:var(--brass-lit);border-color:var(--brass-hair)}
section.night .btn-ghost:hover{background:var(--brass);color:var(--night);border-color:var(--brass)}

.fineprint{font-size:13.5px;color:var(--slate);margin:16px 0 0;line-height:1.6;max-width:none}

/* ---------------------------------------------------------------- asides */
.note{border-left:2px solid var(--brass);padding-left:20px;margin:34px 0 0;max-width:var(--measure)}
.note p{font-size:16.5px;margin:0}
section.night .note{border-left-color:var(--brass-lit)}
.stale{background:var(--hold-soft);border-left:2px solid var(--hold);padding:15px 19px;
  border-radius:0 4px 4px 0;margin:26px 0 0;max-width:var(--measure)}
.stale p{font-size:15.5px;margin:0;color:var(--ink)}

/* ---------------------------------------------------------------- footer */
footer{background:var(--night);color:var(--on-night-soft);margin-top:0;padding:44px 0 66px;
  border-top:1px solid var(--night-3)}
.foot-in{max-width:var(--shell);margin:0 auto;padding:0 var(--gutter);
  display:flex;justify-content:space-between;gap:38px;flex-wrap:wrap;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;line-height:1.9}
.firm{max-width:42ch;color:var(--on-night)}

/* ------------------------------------------------- cost table (Census ACS) */
.cost-picks{display:flex;gap:16px;flex-wrap:wrap;margin:0 0 22px}
.cost-pick{flex:1 1 210px;min-width:0}
.cost-pick label{display:block;margin-bottom:7px}
.cost-pick select{font-family:inherit;font-size:16px;padding:12px 13px;width:100%;
  border:1px solid var(--hair);border-radius:4px;background:var(--paper);color:var(--ink);appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--brass) 50%),linear-gradient(135deg,var(--brass) 50%,transparent 50%);
  background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
section.night .cost-pick select{background-color:var(--night);border-color:var(--night-3);color:var(--on-night)}
table.cost{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;margin:0}
table.cost th,table.cost td{text-align:right;padding:15px 10px;border-bottom:1px solid var(--hair-soft);font-size:16.5px}
table.cost thead th{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--slate);font-weight:600;border-bottom:1px solid var(--brass-hair);padding-bottom:10px}
table.cost tbody th{text-align:left;font-weight:400;color:var(--slate);font-size:15.5px}
table.cost td{font-weight:600;color:var(--ink)}
table.cost td.d{color:var(--brass);font-weight:700;white-space:nowrap;font-size:17px}
table.cost tr:last-child th,table.cost tr:last-child td{border-bottom:0}
.costwrap{overflow-x:auto}
section.night table.cost td{color:var(--on-night)}
section.night table.cost tbody th,section.night table.cost thead th{color:var(--on-night-soft)}
section.night table.cost th,section.night table.cost td{border-bottom-color:var(--night-3)}
section.night table.cost td.d{color:var(--brass-lit)}

/* ---------------------------------------------------------------- motion
   Decorative only, so there is no fallback: a browser without scroll-driven
   animations gets the finished state, which is the correct one.

   Animate the CONTENTS of a section, never the section itself. Putting opacity
   on a full-bleed dark band makes it translucent over cream paper while it is
   mid-reveal — which renders as grey. That bug shipped once and a screenshot
   caught it at opacity 0.44. */
@media (prefers-reduced-motion:no-preference){
  @supports ((animation-timeline:view()) and (animation-range:entry)){
    @keyframes rise{from{opacity:0;transform:translateY(14px)}}
    main > section > *,
    .hero > *{
      animation:rise 1s linear backwards;
      animation-timeline:view();
      animation-range:entry 4% entry 62%;
    }
  }
}

/* ---------------------------------------------------------------- small */
@media (max-width:640px){
  :root{--gutter:20px}
  .hero{padding:68px 0 60px;gap:20px}
  section{padding:56px 0}
  section.night{padding:64px 0}
  .cta{padding:26px}
  .kicker::after,.eyebrow::after{display:none}
  /* auto-fit gives two columns and leaves a fourth grey cell showing through
     the grid's own background. Three facts, one column, no phantom tile. */
  .facts{grid-template-columns:1fr}
  table.cost th,table.cost td{padding:12px 6px;font-size:15px}
}

/* ---------------------------------------------------------------- the rail
   Wide screens get the shape of a spec sheet: the mono label steps out into
   the margin and the serif keeps a readable column beside it. Data blocks —
   the fact strip, the three-up, the cost table — break across both and become
   the punctuation. Nothing here changes the HTML; it is the same document
   read at a wider desk. */
@media (min-width:1000px){
  main > section:has(> .eyebrow){
    display:grid;
    grid-template-columns:132px minmax(0,1fr);
    column-gap:40px;
    align-items:start;
  }
  main > section:has(> .eyebrow) > *{grid-column:2}
  main > section:has(> .eyebrow) > .eyebrow{
    grid-column:1;grid-row:1;
    display:block;margin:0;line-height:1.7;padding-top:10px;
  }
  main > section:has(> .eyebrow) > .eyebrow::after{content:none}
  main > section:has(> .eyebrow) > .facts,
  main > section:has(> .eyebrow) > .three,
  main > section:has(> .eyebrow) > .costwrap{grid-column:1/-1}
  h2{max-width:21ch}
}

/* ------------------------------------------------------------- receipts
   The source line and the empty state used to live only in app.css, which
   only plan.html loads. The Census table on separating.html therefore printed
   its receipt at body size with a default blue link — the one element on the
   page that is supposed to look like a document footnote, shouting. Every
   page that can render a receipt now carries the style for it. */
.src{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.06em;
  color:var(--slate);margin:16px 0 0;line-height:1.7;word-break:break-word;max-width:none}
.src a{color:var(--slate);text-decoration:underline;text-underline-offset:2px}
.src a:hover{color:var(--brass)}
section.night .src,section.night .src a{color:var(--on-night-soft)}
.empty{font-size:15.5px;color:var(--slate);margin:0}