/* ==========================================================================
   Vera Labs LLC — veralabsllc.com
   Design system: "Field Manual" — quiet editorial, cream page on sage-grey
   surround, display serif, no bright accent colour. Typography does the work.

   No build step, no dependencies, no webfonts: all type is on-device, which
   is the same rule the Battle Tactics app follows.
   ========================================================================== */

:root{
  --cream:#F4F0E0;
  --surround:#CBCAB6;
  --sage:#DDDCC4;
  --ink:#22231C;
  --soft:#6E6F5F;
  --hair:#DAD7C3;
  --white:#FFFDF7;

  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Helvetica Neue",system-ui,sans-serif;

  --page:940px;
  --gut:44px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

body{
  background:var(--surround);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  padding:18px;
}

/* The page is a cream card floating on the sage surround. */
.page{
  background:var(--cream);
  border-radius:26px;
  overflow:hidden;
  box-shadow:0 2px 30px rgba(40,40,25,.12);
  max-width:1400px;
  margin:0 auto;
  /* Short pages (support, privacy) should still fill the window so the footer
     does not float in the middle of the surround. */
  min-height:calc(100vh - 36px);
  display:flex;
  flex-direction:column;
}
.page > footer{margin-top:auto}

.wrap{max-width:var(--page);margin:0 auto;padding:0 var(--gut)}

/* ---------- shared type ---------- */
.kick{
  font-family:var(--sans);font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--soft);font-weight:500;
}
.kick.c{text-align:center}

h1{
  font-family:var(--serif);font-size:clamp(28px,5.4vw,60px);font-weight:400;line-height:1.16;
  letter-spacing:-.01em;max-width:19ch;margin:22px auto 0;
}
h1 i{
  font-style:italic;background:var(--sage);padding:.04em .18em;border-radius:3px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
h2{
  font-family:var(--serif);font-size:clamp(26px,4.2vw,44px);font-weight:400;line-height:1.22;
  letter-spacing:-.01em;margin-top:18px;max-width:22ch;
}
h2.c{margin-left:auto;margin-right:auto}
h2 i{font-style:italic}
h3{font-family:var(--serif);font-size:clamp(22px,3vw,32px);font-weight:400;letter-spacing:-.01em}

.lede{
  font-family:var(--serif);font-size:clamp(16px,2vw,17.5px);color:var(--soft);
  max-width:50ch;margin:26px auto 0;line-height:1.8;
}
.body{
  font-family:var(--serif);font-size:16.5px;color:var(--soft);line-height:1.9;
  max-width:52ch;margin-top:20px;
}
.body.c{margin-left:auto;margin-right:auto}
.body strong{color:var(--ink);font-weight:600}
.body a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;
        text-decoration-thickness:1px;text-decoration-color:#B9B8A2}
.body a:hover{text-decoration-color:var(--ink)}

.center{text-align:center}
hr{border:0;border-top:1px solid var(--hair);margin:0}

/* ---------- buttons ---------- */
.cta{
  display:inline-block;background:var(--white);color:var(--ink);font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;padding:15px 30px;border-radius:100px;
  text-decoration:none;box-shadow:0 3px 14px rgba(40,40,25,.14);margin-top:34px;
  transition:transform .2s,box-shadow .2s;
}
.cta:hover{transform:translateY(-2px);box-shadow:0 7px 22px rgba(40,40,25,.18)}
.cta:focus-visible,a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.cta.ink{background:var(--ink);color:var(--cream);box-shadow:0 3px 14px rgba(40,40,25,.22)}

/* ---------- nav ---------- */
nav{padding:26px 0 0}
.navin{max-width:var(--page);margin:0 auto;padding:0 var(--gut);display:flex;align-items:center}
.brand{
  font-family:var(--serif);font-size:19px;letter-spacing:.02em;line-height:1.15;text-align:center;
  flex:none;margin:0 auto;order:2;text-decoration:none;color:inherit;
}
.brand small{
  display:block;font-family:var(--sans);font-size:9px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--soft);margin-top:4px;
}
.nl{display:flex;gap:26px;flex:1;order:1}
.nr{display:flex;gap:26px;flex:1;order:3;justify-content:flex-end}
.nl a,.nr a{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);
  text-decoration:none;transition:color .2s;white-space:nowrap;
}
.nl a:hover,.nr a:hover,.nl a[aria-current],.nr a[aria-current]{color:var(--ink)}

/* ---------- sections ---------- */
section{padding:104px 0}
section.tight{padding:76px 0}

/* ---------- work ledger ---------- */
.ledger{margin-top:52px;border-top:1px solid var(--hair)}
.item{
  display:grid;grid-template-columns:58px 1fr 1.4fr auto;gap:26px;align-items:center;
  padding:26px 0;border-bottom:1px solid var(--hair);text-decoration:none;color:inherit;
  transition:opacity .2s;
}
.item:hover{opacity:.72}
.item:hover .nm{text-decoration:underline;text-underline-offset:3px}
.item .ic{width:46px;height:46px;border-radius:11px;overflow:hidden;display:block;
          box-shadow:0 1px 6px rgba(40,40,25,.14)}
.item .ic img{width:100%;height:100%;object-fit:cover;display:block}
.item .nm{display:block;font-family:var(--serif);font-size:21px;line-height:1.2}
.item .kd{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
          color:var(--soft);margin-top:6px}
.item .ds{font-family:var(--serif);font-size:15px;color:var(--soft);line-height:1.75}
.item .st{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--soft);
          white-space:nowrap}

/* ---------- numbered rules list ---------- */
.rules{margin-top:52px;border-top:1px solid var(--hair)}
.rule{
  display:grid;grid-template-columns:56px 1fr 1.3fr;gap:26px;align-items:baseline;
  padding:26px 0;border-bottom:1px solid var(--hair);
}
.rule .n{font-family:var(--serif);font-size:20px;font-style:italic;color:#B5B49E}
.rule h4{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600}
.rule p{font-family:var(--serif);font-size:15.5px;color:var(--soft);line-height:1.8}

/* ---------- image plate ---------- */
.plate{background:var(--white);border-radius:22px;overflow:hidden;
       box-shadow:0 6px 30px rgba(40,40,25,.12);margin-top:48px}
.plate img{width:100%;display:block}
.plate .txt{padding:38px var(--gut) 44px;text-align:center}
.plate .st{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--soft);margin-top:14px}

/* ---------- filmstrip ---------- */
.strip{display:flex;gap:16px;align-items:flex-end;justify-content:center;padding:0 24px;
       margin-top:14px;overflow:hidden}
.strip figure{border-radius:16px;overflow:hidden;flex:1;min-width:0;
              box-shadow:0 8px 26px rgba(40,40,25,.16)}
.strip img{width:100%;height:100%;object-fit:cover;display:block}
.s1{height:190px} .s2{height:250px} .s3{height:310px} .s4{height:240px} .s5{height:180px}

/* ---------- commanders ---------- */
.cos{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:46px}
.co{text-align:center}
.co .fr{background:var(--white);border-radius:14px;overflow:hidden;
        box-shadow:0 4px 16px rgba(40,40,25,.1);height:190px;display:flex;
        align-items:flex-end;justify-content:center}
.co img{width:100%;height:100%;object-fit:contain;object-position:bottom;display:block}
.co .name{font-family:var(--serif);font-size:19px;margin-top:14px}
.co .role{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--soft);margin-top:5px}

/* ---------- legal / long-form prose ---------- */
.doc{max-width:62ch;margin:0 auto}
.doc h1{margin-left:0;margin-right:0;text-align:left;max-width:none}
.doc .meta{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--soft);margin-top:18px}
.doc h2{font-family:var(--serif);font-size:24px;margin-top:46px;max-width:none}
.doc h3{font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-family:var(--sans);
        font-weight:600;margin-top:34px}
.doc p{font-family:var(--serif);font-size:16.5px;color:var(--soft);line-height:1.9;margin-top:16px}
.doc p strong{color:var(--ink);font-weight:600}
.doc ul{margin-top:16px;padding-left:0;list-style:none}
.doc li{font-family:var(--serif);font-size:16.5px;color:var(--soft);line-height:1.9;
        padding-left:22px;position:relative;margin-top:8px}
.doc li::before{content:"—";position:absolute;left:0;color:#B5B49E}
.doc a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;
       text-decoration-thickness:1px;text-decoration-color:#B9B8A2}
.doc a:hover{text-decoration-color:var(--ink)}

/* ---------- support routes ---------- */
.routes{margin-top:44px;border-top:1px solid var(--hair);list-style:none;padding:0}
.routes li{border-bottom:1px solid var(--hair)}
.routes a{display:grid;grid-template-columns:46px 1fr auto;gap:22px;align-items:center;
          padding:24px 0;text-decoration:none;color:inherit;transition:opacity .2s}
.routes a:hover{opacity:.72}
.routes .ic{width:38px;height:38px;border-radius:9px;overflow:hidden;
            box-shadow:0 1px 6px rgba(40,40,25,.14)}
.routes .ic img{width:100%;height:100%;object-fit:cover;display:block}
.routes .t{display:block;font-family:var(--serif);font-size:19px}
.routes .d{display:block;font-size:13.5px;color:var(--soft);margin-top:4px;font-family:var(--sans)}
.routes .go{font-family:var(--serif);font-style:italic;font-size:14.5px;color:var(--soft);white-space:nowrap}

/* ---------- footer ---------- */
footer{background:var(--ink);color:var(--cream);padding:56px 0 62px}
.fin{max-width:var(--page);margin:0 auto;padding:0 var(--gut);display:flex;gap:32px;
     flex-wrap:wrap;align-items:flex-start}
.fin .legal{font-size:13px;color:rgba(244,240,224,.62);line-height:1.9}
.fin .legal b{display:block;font-family:var(--serif);font-size:18px;font-weight:400;
              color:var(--cream);margin-bottom:6px}
.fin .legal a{color:rgba(244,240,224,.62);text-decoration:underline;text-underline-offset:3px}
.fin .legal a:hover{color:var(--cream)}
.flinks{margin-left:auto;display:flex;gap:28px;flex-wrap:wrap}
.flinks a{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
          color:rgba(244,240,224,.68);text-decoration:none}
.flinks a:hover{color:var(--cream)}

/* ---------- responsive ---------- */
@media(max-width:880px){
  :root{--gut:22px}
  body{padding:10px}
  .page{min-height:calc(100vh - 20px)}
  .page{border-radius:18px}
  section{padding:64px 0}
  section.tight{padding:48px 0}
  .nl,.nr{display:none}
  .brand{margin:0 auto}

  .item{grid-template-columns:44px 1fr;gap:16px;align-items:start}
  .item .ds,.item .st{grid-column:2}
  .item .st{margin-top:8px}

  .rule{grid-template-columns:36px 1fr;gap:16px}
  .rule p{grid-column:2}

  .routes a{grid-template-columns:38px 1fr;gap:16px}
  .routes .go{grid-column:2;margin-top:6px}

  .strip{gap:9px}
  .s1,.s5{display:none}
  .s2,.s3,.s4{height:180px}

  .cos{grid-template-columns:1fr 1fr}
  .plate .txt{padding:28px 22px 32px}
}