/* Gungner waitlist site. Values ported from the approved mockups (SPEC-000-rev-B §6 row 1). */

@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/hanken-grotesk-400.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/hanken-grotesk-500.woff2) format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/hanken-grotesk-700.woff2) format("woff2")}

:root{
  --bg:#F2F3F2;
  --ink:#151A16;
  --body:#1E221E;
  --pill:#0F1A15;
  --line:#DDDFDD;
  --card:#FFFFFF;
  --muted:#6B6F6B;
  /* Input and select borders: the mockup's --line (#DDDFDD) is 1.3:1 on the field;
     WCAG 1.4.11 needs 3:1 for a control's only visible edge (invariant 7). */
  --field-edge:#8A8F8A;

  --gutter:40px;
  /* Hero headline size: scales with the smaller of viewport width and height. */
  --h1-hero:clamp(40px, min(4.4vw, 7.04vh), 80px);
  /* Half the advance width of "Identity" in Hanken Grotesk 700 at -.03em tracking
     (3.216em, measured in Chromium with assets/fonts/hanken-grotesk-700.woff2).
     The nav inset puts the logo's left edge on the middle of that word. */
  --identity-half-em:1.608;
  --nav-inset:calc(var(--h1-hero) * var(--identity-half-em));
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--bg);color:var(--body);
  font-family:"Hanken Grotesk",-apple-system,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.5;
}
img{display:block}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.wrap{padding:0 var(--gutter)}

/* ---------- nav ---------- */
.nav{display:flex;align-items:center;justify-content:space-between;padding:32px var(--nav-inset)}
.logo{display:flex;align-items:center;min-height:44px;text-decoration:none}
.logo img{height:36px;width:auto}
.nav-link{display:inline-flex;align-items:center;min-height:44px;color:#000;text-decoration:none;font-size:15px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.nav-link:hover{opacity:.6}
.nav-link[aria-current="page"]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}

/* ---------- buttons ---------- */
.pill{display:inline-flex;align-items:center;justify-content:center;text-align:center;gap:10px;min-height:44px;background:var(--pill);color:#fff;border:0;border-radius:999px;
      padding:14px 24px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
      font-family:inherit;text-decoration:none}
.pill:hover{opacity:.88}
.pill:disabled{opacity:.6;cursor:progress}

/* ---------- home: exactly one screen ---------- */
.home{height:100svh;display:grid;grid-template-rows:auto 1fr}
.hero{position:relative;display:flex;flex-direction:column;min-height:0}
.band{margin-top:auto;padding-bottom:60px;position:relative;z-index:1;max-width:min(46vw,720px)}
.hero h1{font-size:var(--h1-hero);line-height:1.04;letter-spacing:-.03em;font-weight:700;color:var(--ink);text-wrap:balance}
.sub{font-size:clamp(18px, min(1.25vw, 2vh), 22px);line-height:1.5;color:var(--body);max-width:32em;margin:28px 0 40px}
.sub p + p{margin-top:.7em}
.cta-row{display:flex;align-items:center;gap:32px;flex-wrap:wrap}
.band .pill{padding:20px 34px;font-size:14px}

/* Illustration: bottom-right, flush with the right and bottom edges, sized by the height left.
   The third term keeps its objects (which start 17.70% in from its left edge, see
   assets/hero-illustration.json) at least 24px right of the 46vw copy column. */
.hero-art{position:absolute;right:0;bottom:0;z-index:0;pointer-events:none;
  width:min(62vw, calc((100svh - 150px) * 1.79), calc((54vw - var(--gutter) - 24px) / (1 - .177)))}
.hero-art img{
  width:100%;height:auto;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 14%),linear-gradient(to bottom,transparent 0,#000 12%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 14%),linear-gradient(to bottom,transparent 0,#000 12%);
  mask-composite:intersect;
}

/* ---------- reading pages (about, 404) ---------- */
.reading{max-width:760px;margin:0 auto;padding:clamp(56px,10vh,120px) 24px 120px}
.eyebrow{font-size:17px;font-weight:500;color:var(--muted);margin-bottom:28px}
.reading h1{font-size:clamp(40px,4.4vw,72px);line-height:1.06;letter-spacing:-.03em;font-weight:700;color:var(--ink);text-wrap:balance}
.lead{font-size:clamp(20px,1.6vw,26px);line-height:1.42;color:var(--ink);margin:36px 0 44px}
.lead a{color:var(--ink)}
.body p{font-size:17.5px;line-height:1.6;margin-bottom:26px}
.body a{color:var(--ink)}
.body h2{font-size:22px;letter-spacing:-.01em;color:var(--ink);margin:44px 0 12px}
.body ul{margin:0 0 26px 20px}
.body li{font-size:17.5px;line-height:1.6;margin-bottom:6px}
.rule{border:0;border-top:1px solid var(--line);margin:56px 0 0}
.meta{font-size:14px;color:var(--muted);margin-top:20px}

/* ---------- modals ---------- */
dialog{border:0;border-radius:18px;background:var(--card);padding:0;max-width:540px;width:calc(100% - 40px);
       margin:auto;max-height:calc(100svh - 40px);overflow:auto}
dialog::backdrop{background:rgba(15,26,21,.45)}
.modal-inner{padding:36px}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:8px}
.modal-head h2{font-size:26px;letter-spacing:-.02em;line-height:1.1;color:var(--ink)}
.close{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:-10px -10px 0 0;flex:none;
       background:none;border:0;font-size:24px;line-height:1;cursor:pointer;color:var(--muted);font-family:inherit}
.close:hover{color:var(--ink)}
.modal-blurb{color:var(--muted);font-size:14px;margin-bottom:24px}
.waitlist-form{display:grid;gap:16px}
.waitlist-form label{font-size:13px;font-weight:700;display:block;margin-bottom:6px;color:var(--ink)}
.opt{color:var(--muted);font-weight:400}
.waitlist-form input[type=text],.waitlist-form input[type=email],.waitlist-form select{
  width:100%;background:#FAFAFA;border:1px solid var(--field-edge);border-radius:10px;
  padding:13px 14px;font-size:15px;font-family:inherit;color:var(--ink)
}
.waitlist-form .consent{display:flex;gap:12px;align-items:flex-start;min-height:44px;margin:0;font-size:12.5px;color:var(--muted)}
.consent input{margin-top:3px;width:16px;height:16px;flex:none;accent-color:var(--pill)}
.consent a{color:var(--ink)}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-error{font-size:14px;font-weight:700;color:var(--ink)}
.success{padding:8px 0 4px}
.success h3{font-size:20px;margin-bottom:6px;color:var(--ink)}
.success p{color:var(--muted);font-size:14px}
[hidden]{display:none !important}

/* ---------- stacked layout: tablets and phones ---------- */
@media (max-width:900px){
  :root{--nav-inset:0px}
  .home{display:flex;flex-direction:column}
  .hero{flex:1 1 auto}
  .band{margin-top:0;max-width:none;padding:clamp(8px,3svh,40px) 0 20px}
  .hero h1{font-size:clamp(30px, min(8.5vw, 4.8svh), 40px)}
  .sub{font-size:clamp(16px, min(4.3vw, 2.5svh), 18px);margin:16px 0 24px}
  .cta-row{flex-direction:column;align-items:center;gap:12px}
  .band .pill{align-self:stretch;padding:18px 34px}
  /* The illustration takes the height left under the buttons, full width, cropped toward the right. */
  .hero-art{position:static;flex:1 1 0;min-height:0;width:auto;margin:0 calc(-1 * var(--gutter));container-type:size}
  .hero-art picture{display:block;height:100%}
  .hero-art img{
    width:100%;height:100%;object-fit:cover;object-position:right center;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12%);
    mask-image:linear-gradient(to bottom,transparent 0,#000 12%);
  }
  @container (height < 140px){ .hero-art picture{display:none} }

  dialog{width:calc(100vw - 16px);max-width:none;max-height:calc(100svh - 16px)}
  .modal-inner{padding:0 20px 24px}
  .modal-head{position:sticky;top:0;z-index:1;background:var(--card);padding:20px 0 8px}
  .waitlist-form input[type=text],.waitlist-form input[type=email],.waitlist-form select{font-size:16px}
}

@media (max-width:700px){
  :root{--gutter:20px}
  .nav{padding:24px 0}
  .logo img{height:30px}
  .reading{padding:40px 20px 80px}
}

/* Phones in landscape may scroll. */
@media (max-width:900px) and (orientation:landscape) and (max-height:500px){
  .home{height:auto;min-height:100svh}
  .hero-art{flex:none;height:240px}
}