/* ============================================================================
   Gemela Media UI kit
   ----------------------------------------------------------------------------
   The single source of truth for shared styling across every public page:
   the homepage, /about/, the linkedin-for-* audience pages and the blog.

   THE CONTRACT
   1. This file is served from /shared/gemela.css and cached across the site.
      It is linked, never inlined, and never copied into a page.
   2. A page owns only the CSS for sections that page actually renders. That
      belongs in that page's own <style> block, after this file.
   3. Anything used by two or more pages belongs HERE, defined once. If you find
      yourself pasting a rule into a second page, move it into this file instead.
   4. Never redefine a kit selector in a page block. Add a modifier class.

   Why this exists: the homepage and /about/ were forked from a common ancestor
   and drifted. Fourteen shared selectors ended up with different declarations,
   most visibly .btn, which rendered as a 12px-radius rectangle on the homepage
   and a 30px pill everywhere else. /about/ was also being read at build time as
   the de-facto stylesheet for the blog and audience pages, so its drift shipped
   to eleven more pages. One file removes the whole class of bug.
   ========================================================================= */

/* --- 1. tokens ----------------------------------------------------------- */
:root{
  --paper:#0c0e0c;--paper-2:#151815;--ink:#f0efe6;--ink-soft:#d3d3ca;--muted:#a6a8a0;
  --line:#252a25;--line-strong:#39403a;--panel:#101310;--panel-2:#1a1e1a;--panel-line:#2f352f;
  --accent:#39c9b4;--accent-2:#63e4d1;--accent-ink:#04130f;--li:#4aa3ff;
  --danger:#e0685a;
  --disp:'Bricolage Grotesque',sans-serif;--body:'Public Sans',system-ui,sans-serif;--mono:'Spline Sans Mono',ui-monospace,monospace;
}

/* --- 2. base ------------------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0;}
[hidden]{display:none !important;} /* display:flex on .btn/.applygate otherwise beats the hidden attribute */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{background:
  radial-gradient(120% 80% at 50% -12%,rgba(57,201,180,.13),transparent 56%),
  radial-gradient(90% 60% at 100% 6%,rgba(57,201,180,.06),transparent 55%),
  linear-gradient(168deg,#12161300,#0a0c0a 55%,#080a08),var(--paper);
  color:var(--ink);font-family:var(--body);font-weight:400;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;position:relative;}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.16;transform:translateZ(0);will-change:transform;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:220px 220px;}
::selection{background:var(--accent);color:var(--accent-ink);}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}

/* --- 3. layout ----------------------------------------------------------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,5vw,56px);position:relative;z-index:1;}
section{padding:clamp(64px,10vh,120px) 0;border-top:1px solid var(--line);position:relative;}

/* --- 4. typography ------------------------------------------------------- */
.disp{font-family:var(--disp);font-weight:800;letter-spacing:-.02em;line-height:.98;}
.lab{font-family:var(--mono);font-size:0.8rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);}
.accent{color:var(--accent);}
.eyebrow{font-family:var(--mono);font-size:0.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:18px;display:inline-block;}
.h2{font-family:var(--disp);font-weight:800;font-size:clamp(2rem,5vw,3.4rem);letter-spacing:-.025em;line-height:1.02;}
.sub{font-size:clamp(1.02rem,1.7vw,1.22rem);font-weight:400;color:var(--ink-soft);line-height:1.55;max-width:60ch;margin-top:20px;}
/* .sub.lines breaks a subhead into its own stacked lines rather than a paragraph */
.sub.lines span{display:block;}
.sub.lines span+span{margin-top:6px;}
.sub.lines .q{margin-top:14px;color:var(--muted);font-size:.92em;}
@media(max-width:600px){.sub.lines span+span{margin-top:8px;}}
.chills .accent{font-style:italic;}

/* --- 5. buttons ---------------------------------------------------------- *
 * ONE definition. This is the selector that had drifted: 12px radius on the
 * homepage, 30px pill on every other page. The homepage value is canonical.  */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--body);font-weight:600;font-size:0.95rem;padding:14px 26px;border-radius:12px;transition:transform .2s,box-shadow .2s,background .2s,border-color .2s;line-height:1;}
.btn.p{background:var(--accent);color:var(--accent-ink);box-shadow:0 6px 20px rgba(57,201,180,.18);}
.btn.p:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(57,201,180,.28);}
.btn.g{border:1px solid var(--line-strong);color:var(--ink);}
.btn.g:hover{border-color:var(--accent);color:var(--accent);}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

/* --- 6. reveal on scroll ------------------------------------------------- */
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);}
.rv.in{opacity:1;transform:none;}
.rv.d1{transition-delay:.08s;}.rv.d2{transition-delay:.16s;}.rv.d3{transition-delay:.24s;}

/* --- 7. nav -------------------------------------------------------------- */
nav{position:sticky;top:0;z-index:50;background:rgba(12,14,12,.92);border-bottom:1px solid var(--line);}
nav .in{max-width:1180px;margin:0 auto;padding:15px clamp(20px,5vw,56px);display:flex;align-items:center;justify-content:space-between;gap:20px;}
.wm{font-family:var(--disp);font-weight:800;font-size:1.05rem;letter-spacing:-.01em;position:relative;}
.wm .tw{position:absolute;left:2px;top:2px;color:transparent;-webkit-text-stroke:.8px var(--accent-2);opacity:.5;}
.navlinks{display:flex;gap:26px;align-items:center;}
.navlinks a{font-size:0.9rem;color:var(--ink-soft);transition:color .2s;}
.navlinks a:hover{color:var(--ink);}
.navmenu a.on{color:var(--accent);} /* current page, set by the generators */
/* The text links live in .navmenu. On desktop that wrapper is layout-transparent,
   so the row is the flex line it was before the wrapper existed. Below 820px the
   wrapper becomes a drop panel and .navtoggle appears. Apply never moves: it is
   the primary action and stays a visible button at every width. */
.navmenu{display:contents;}
.navtoggle{display:none;align-items:center;justify-content:center;flex:none;width:38px;height:38px;padding:0;border:1px solid var(--line-strong);border-radius:10px;background:transparent;color:var(--ink-soft);cursor:pointer;transition:color .2s,border-color .2s;}
.navtoggle:hover{color:var(--accent);border-color:var(--accent);}
.navtoggle i{display:block;position:relative;width:16px;height:1.5px;background:currentColor;transition:background .2s;}
.navtoggle i::before,.navtoggle i::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:currentColor;transition:transform .2s;}
.navtoggle i::before{top:-5px;}
.navtoggle i::after{top:5px;}
.navtoggle[aria-expanded="true"] i{background:transparent;}
.navtoggle[aria-expanded="true"] i::before{transform:translateY(5px) rotate(45deg);}
.navtoggle[aria-expanded="true"] i::after{transform:translateY(-5px) rotate(-45deg);}
.navtoggle:focus-visible,.navlinks a:focus-visible,nav .wm:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:8px;}
@media(max-width:1040px){.navlinks{gap:18px;}}
@media(max-width:820px){
  .navlinks{gap:12px;}
  .navtoggle{display:inline-flex;}
  /* absolutely positioned against the sticky <nav>, so it layers inside the nav's
     z-index:50 stacking context and nothing on the page can clip or cover it */
  .navmenu{position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;align-items:stretch;gap:0;padding:4px clamp(20px,5vw,56px) 10px;background:rgba(10,12,10,.98);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);box-shadow:0 20px 44px rgba(0,0,0,.5);}
  .navmenu.open{display:flex;animation:navdrop .16s cubic-bezier(.16,1,.3,1);}
  .navmenu a{padding:14px 2px;font-size:0.98rem;border-top:1px solid var(--line);}
  .navmenu a:first-child{border-top:0;}
}
@media(pointer:coarse){.navtoggle{width:44px;height:44px;}nav .wm{min-height:44px;display:inline-flex;align-items:center;}}
@keyframes navdrop{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}

/* --- 8. hero ------------------------------------------------------------- *
 * Default is the statement hero used by /about/, the audience pages and the
 * blog (13 of 14 pages). The homepage runs a longer headline and overrides
 * .hero h1 in its own block.                                                */
.hero{padding:clamp(60px,11vh,120px) 0 clamp(56px,9vh,104px);border-top:none;text-align:center;}
.hero h1{font-family:var(--disp);font-weight:800;font-size:clamp(2.6rem,7vw,5.4rem);letter-spacing:-.03em;line-height:.98;max-width:16ch;margin:22px auto 0;}
.hero h1 .hl{color:var(--accent);}
.hero .sub{margin:26px auto 0;text-align:center;font-size:clamp(1.05rem,1.9vw,1.32rem);}
.hero .cta{margin-top:34px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.h1min{font-family:var(--disp);font-weight:800;font-size:clamp(1.45rem,3vw,2rem);letter-spacing:-.02em;line-height:1.06;}

/* --- 9. faq / disclosure ------------------------------------------------- */
.faq{max-width:820px;margin:40px auto 0;}
details{border-bottom:1px solid var(--line);}
summary{list-style:none;cursor:pointer;padding:22px 0;display:flex;align-items:center;gap:16px;font-family:var(--disp);font-weight:700;font-size:1.12rem;letter-spacing:-.01em;}
summary::-webkit-details-marker{display:none;}
summary .qx{margin-left:auto;color:var(--accent);font-weight:700;font-size:1.4rem;transition:transform .3s;flex-shrink:0;}
details[open] summary .qx{transform:rotate(45deg);}
.faq p{font-size:0.98rem;font-weight:400;color:var(--ink-soft);line-height:1.6;padding:0 0 22px;max-width:70ch;}

/* --- 10. closing cta ----------------------------------------------------- */
.final{text-align:center;}
.final h2{font-family:var(--disp);font-weight:800;font-size:clamp(2.2rem,6vw,4.4rem);letter-spacing:-.025em;line-height:1;max-width:18ch;margin:0 auto;}
.final h2 .hl{color:var(--accent);}
.final .cta{margin-top:32px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

/* --- 11. footer ---------------------------------------------------------- */
footer{border-top:1px solid var(--line);padding:40px 0;}
footer .fnav{max-width:1180px;margin:0 auto 30px;padding:0 clamp(20px,5vw,56px) 30px;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:26px 44px;border-bottom:1px solid var(--line);}
footer .fh{font-family:var(--mono);font-size:0.72rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:12px;}
footer .fcol a{display:block;font-size:0.92rem;color:var(--ink-soft);padding:5px 0;transition:color .2s;}
footer .fcol a:hover{color:var(--accent);}
footer .in{max-width:1180px;margin:0 auto;padding:0 clamp(20px,5vw,56px);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;}
footer .c{font-family:var(--mono);font-size:0.8rem;color:var(--muted);letter-spacing:.04em;}

/* --- 12. reduced motion -------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;}
  .navmenu.open{animation:none;}
  .navtoggle i,.navtoggle i::before,.navtoggle i::after{transition:none;}
}