/* SIGNALS v2 — shared homepage chrome for the static content pages in public/.
   These pages are served as raw HTML and can't read the React app's styles, so the
   homepage masthead / buttons / dark-inversion CTA / footer live here as reusable
   sg-* classes, mirroring components/Landing.tsx. Link this file; do not restyle
   these classes per page.

   Design tokens (colors, type, spacing) now live in brand-tokens.css — the single
   source of truth shared with the App Router (app/layout.tsx links it directly).
   Imported here so static pages that link brand.css still get the tokens. */
@import url('/brand-tokens.css');

/* layout helper */
.sg-wrap{max-width:var(--maxw);margin:0 auto;padding:0 30px}

/* button system (homepage) */
.sg-btn{font-family:var(--sans);font-weight:600;font-size:14.5px;letter-spacing:.01em;padding:13px 24px;text-decoration:none;display:inline-block;border:1px solid transparent;border-radius:var(--r-sm);cursor:pointer;transition:transform .14s ease,box-shadow .14s ease,background .14s,color .14s,border-color .14s}
.sg-btn-primary{background:var(--ink);color:var(--paper);box-shadow:var(--sh-btn)}
.sg-btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 14px -2px rgba(22,25,29,.28)}
.sg-btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.sg-btn-ghost:hover{border-color:var(--ink);background:rgba(22,25,29,.03)}

/* masthead (homepage) */
.sg-mast{border-bottom:1px solid var(--line);background:rgba(246,244,239,.86);backdrop-filter:saturate(140%) blur(8px);-webkit-backdrop-filter:saturate(140%) blur(8px);position:sticky;top:0;z-index:60;padding:17px 0}
/* Masthead/footer inner reuse the page's own content container (e.g. .page-wrap)
   for max-width + horizontal padding so the lockup lines up with the article's
   left edge. Vertical padding lives on .sg-mast / .sg-foot (full-width bars). */
.sg-mast-in{display:flex;justify-content:space-between;align-items:center}
.sg-lockup{display:flex;align-items:center;gap:11px;text-decoration:none}
.sg-lockup svg{display:block}
.sg-lockup .sg-wm{font-family:var(--sans);font-weight:600;letter-spacing:.2em;font-size:15px;color:var(--ink)}
.sg-nav{display:flex;align-items:center;gap:26px}
.sg-nav ul{list-style:none;display:flex;gap:26px;align-items:center;font-family:var(--sans);font-size:13.5px;margin:0;padding:0}
.sg-nav ul a{color:var(--ink-2);text-decoration:none}
.sg-nav ul a:hover{color:var(--ink)}
.sg-mast-cta{font-size:13px;padding:9px 16px}
.sg-login{font-family:var(--sans);font-size:13.5px;color:var(--ink-2);text-decoration:none;background:none;border:none;cursor:pointer;padding:0}
.sg-login:hover{color:var(--ink)}

/* mobile hamburger menu — hidden on desktop, shown ≤680px (see media query) */
.sg-menu{display:none;position:relative}
.sg-menu>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--card);-webkit-tap-highlight-color:transparent}
.sg-menu>summary::-webkit-details-marker{display:none}
.sg-menu>summary::marker{content:""}
.sg-burger,.sg-burger::before,.sg-burger::after{display:block;width:18px;height:2px;background:var(--ink);border-radius:1px}
.sg-burger{position:relative}
.sg-burger::before,.sg-burger::after{content:"";position:absolute;left:0}
.sg-burger::before{top:-6px}
.sg-burger::after{top:6px}
.sg-menu[open]>summary{border-color:var(--ink)}
.sg-drawer{position:absolute;top:calc(100% + 11px);right:0;min-width:232px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-hover);padding:9px;display:flex;flex-direction:column;gap:1px;z-index:70}
.sg-drawer a,.sg-drawer button{font-family:var(--sans);font-size:15px;color:var(--ink-2);text-decoration:none;padding:12px 12px;border-radius:var(--r-sm);background:none;border:none;cursor:pointer;text-align:left;width:100%;display:block;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.sg-drawer a:hover,.sg-drawer button:hover{background:var(--paper-2);color:var(--ink)}
.sg-drawer .sg-drawer-cta,.sg-drawer .sg-drawer-cta:link,.sg-drawer .sg-drawer-cta:visited,.sg-drawer .sg-drawer-cta:hover,.sg-drawer .sg-drawer-cta:focus,.sg-drawer .sg-drawer-cta:active{margin-top:7px;text-align:center;background:var(--ink);color:var(--paper);font-weight:600;letter-spacing:.01em}

/* eyebrows (homepage) */
.sg-ek{font-family:var(--sans);font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--amber);font-weight:600;margin-bottom:22px;display:inline-block}
.sg-eyebrow{font-family:var(--sans);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-bottom:18px;display:flex;align-items:center;gap:13px}
.sg-eyebrow::before{content:"";width:30px;height:2px;background:var(--amber)}

/* dark inversion CTA (homepage — the single dark moment) */
.sg-invert{position:relative;overflow:hidden;border-radius:var(--r);background:radial-gradient(120% 140% at 85% 0%, #1d3540 0%, #15181c 52%);color:var(--paper);padding:54px 44px;box-shadow:0 20px 50px -20px rgba(22,25,29,.5);margin:64px 0 80px}
.sg-rings-dark{position:absolute;top:-60px;right:-40px;width:320px;height:320px;opacity:.12;pointer-events:none}
.sg-invert-ek{font-family:var(--sans);font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:#d9a24e;font-weight:600;margin-bottom:16px;position:relative}
.sg-invert h2,.sg-invert h3{font-family:var(--serif);font-size:clamp(23px,3vw,30px);font-weight:400;line-height:1.14;max-width:22ch;margin:0 0 14px;color:var(--paper);position:relative}
.sg-invert p{font-family:var(--serif);color:#c2cad1;max-width:560px;margin:0 0 24px;font-size:16.5px;line-height:1.6;position:relative}
.sg-ibtn{position:relative;display:inline-block;font-family:var(--sans);font-weight:600;font-size:14.5px;background:var(--paper);color:var(--ink);padding:13px 24px;border-radius:var(--r-sm);text-decoration:none;transition:transform .14s}
.sg-ibtn:hover{transform:translateY(-1px)}
.sg-invert-fine{font-family:var(--sans)!important;font-size:12px!important;color:#8c98a4!important;margin:0!important;position:relative}
.sg-invert-lab{font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#7c8893;margin-top:24px;position:relative}

/* footer lockup (homepage) */
.sg-foot{background:var(--paper);border-top:1px solid var(--line);padding:42px 0 60px}
.sg-foot-in{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-family:var(--sans);font-size:13px;color:var(--ink-3)}
.sg-foot-in .sg-wm{font-family:var(--sans);font-weight:600;letter-spacing:.2em;font-size:14px;color:var(--ink)}
.sg-foot-in span{color:var(--ink-3)}
.sg-foot-in a{color:var(--ink-2)}
.sg-dv{width:1px;height:15px;background:var(--line-2)}

:focus-visible{outline:2px solid var(--steel);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.sg-btn,.sg-ibtn{transition:none}}
@media(max-width:680px){
  /* swap the inline nav for a hamburger drawer (markup: details.sg-menu) */
  .sg-nav{display:none}
  .sg-menu{display:block}
  .sg-invert{padding:40px 26px}
}