/* ============================================================
   OUTER BANDS — landing / styles.css
   Same design system as the full site (Brand Board V.04).
   When the full site launches, this file is superseded by the
   full styles.css — tokens are identical, nothing re-decided.
   ============================================================ */

:root{
  --paper:#F3EEE1; --chart:#EDE5D0; --nearwhite:#FAF8F2;
  --ink:#171410; --overcast:#7E7867; --yellow:#E9A820; --red:#BF1722; --shoal:#C4D8DA;
  --dash:rgba(23,20,16,.4); --faint:rgba(23,20,16,.14);
  --font-stencil:'Big Shoulders Stencil Display','Big Shoulders Display','Arial Narrow',sans-serif;
  --font-disp:'Big Shoulders Display','Arial Narrow',sans-serif;
  --font-body:'Newsreader',Georgia,serif;
  --font-mono:'IBM Plex Mono','Courier New',monospace;
}

*{margin:0;padding:0;box-sizing:border-box;}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{transition:none!important;animation:none!important;}}

body{background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;}
a{color:inherit;}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
.wrap{max-width:1160px;margin:0 auto;padding:0 32px;}
.meta{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;}
.dim{color:var(--overcast);}
.rule-dash{border:none;border-top:1px dashed var(--dash);}

/* strip */
.strip{padding:14px 0;border-bottom:1px dashed var(--dash);}
.strip .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;}

/* hero */
.hero{position:relative;padding:110px 0 84px;overflow:hidden;}
.contour-tr{position:absolute;top:0;right:0;width:min(560px,55vw);height:auto;pointer-events:none;}
.masthead{
  position:relative;font-family:var(--font-stencil);font-weight:900;
  font-size:clamp(56px,12.5vw,176px);line-height:.88;text-transform:uppercase;
}
.hero-words{margin-top:22px;}
.hero-pitch{margin-top:52px;max-width:640px;}
.hero-pitch h2{
  font-family:var(--font-disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(32px,4.6vw,54px);line-height:.94;margin-bottom:16px;
}
.hero-pitch .pitch-body{font-size:19px;line-height:1.6;max-width:560px;margin-bottom:26px;}

/* signup */
.signup{display:flex;max-width:440px;}
.signup input{
  flex:1;font-family:var(--font-mono);font-size:13px;letter-spacing:.04em;
  padding:13px 14px;border:1px solid var(--ink);background:transparent;
  color:var(--ink);min-width:0;border-radius:0;
}
.signup input::placeholder{color:var(--overcast);}
.signup input:focus-visible{outline:2px solid var(--yellow);outline-offset:-1px;}
.signup button{
  font-family:var(--font-disp);font-weight:800;text-transform:uppercase;
  font-size:18px;letter-spacing:.04em;padding:0 26px;
  border:1px solid var(--ink);border-left:none;
  background:var(--yellow);color:var(--ink);cursor:pointer;border-radius:0;
}
.signup button:hover{filter:brightness(.95);}
.signup-note{margin-top:14px;}
.signup-confirm{
  display:none;margin-top:16px;font-family:var(--font-mono);
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;
}
.signup-confirm.show{display:block;}

section{padding:64px 0;}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:30px;flex-wrap:wrap;}
.sec-title{font-family:var(--font-disp);font-weight:800;font-size:clamp(24px,3vw,36px);text-transform:uppercase;line-height:1;}

/* sample issue */
.email{max-width:620px;border:1px solid var(--faint);}
.email-head{padding:26px 28px 20px;border-bottom:1px dashed var(--dash);}
.email-mast{font-family:var(--font-stencil);font-weight:900;font-size:38px;line-height:.9;text-transform:uppercase;}
.email-meta{display:flex;justify-content:space-between;gap:10px;margin-top:12px;flex-wrap:wrap;}
.email-body{padding:22px 28px 28px;}
.email-item{padding:16px 0;border-bottom:1px dashed var(--dash);}
.email-item:last-child{border-bottom:none;}
.email-item h4{
  font-family:var(--font-disp);font-weight:800;text-transform:uppercase;
  font-size:22px;line-height:1;margin-bottom:6px;
}
.email-item p{font-size:15.5px;max-width:520px;}

/* manifesto */
.manifesto{max-width:66ch;}
.manifesto p{font-size:18.5px;line-height:1.65;margin-bottom:1.3em;}
.manifesto .sig{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);}
.manifesto .sig a{text-decoration:none;border-bottom:2px solid var(--yellow);padding-bottom:1px;}

/* dry rows */
.what-rows{max-width:640px;}
.what-row{
  display:grid;grid-template-columns:130px 1fr;gap:24px;
  padding:18px 0;border-bottom:1px dashed var(--dash);align-items:baseline;
}
.what-row:last-child{border-bottom:none;}
.what-row .k{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--overcast);}
.what-row .v{font-size:17px;}
@media(max-width:640px){.what-row{grid-template-columns:1fr;gap:4px;}}

/* closer */
.closer{padding:80px 0;}
.closer .inner{max-width:640px;margin:0 auto;text-align:center;}
.closer h2{
  font-family:var(--font-disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(34px,5vw,52px);line-height:.95;margin-bottom:20px;
}
.closer .signup{margin:0 auto;}

/* footer */
.site-footer{position:relative;overflow:hidden;border-top:1px dashed var(--dash);padding:44px 0 56px;}
.contour-bl{position:absolute;bottom:0;left:0;width:min(420px,45vw);height:auto;pointer-events:none;opacity:.9;}
.site-footer .wrap{position:relative;display:flex;justify-content:space-between;align-items:flex-start;gap:28px;flex-wrap:wrap;}
.f-brand{display:flex;flex-direction:column;gap:10px;}
.wordmark{font-family:var(--font-stencil);font-weight:900;font-size:30px;line-height:1;text-transform:uppercase;text-decoration:none;letter-spacing:.01em;}
.f-nav{display:flex;flex-direction:column;gap:8px;}
.f-nav a,.f-nav span{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;}
.f-nav a:hover{text-decoration:underline;text-underline-offset:3px;}

/* ============================================================
   EXPLORATORY — operational layer (Brass Hands study)
   ============================================================ */
.strip-grid{align-items:baseline;}
.countdown-line{margin:-6px 0 22px;}
#ops-countdown{color:var(--ink);}


/* OB monogram — top strip */
.ob-mono{
  font-family:var(--font-stencil);font-weight:900;font-size:19px;
  line-height:1;text-transform:uppercase;letter-spacing:.02em;
}