/* ============================================================
   Tudor Morari — brand skin  (v2, after Tudor's readability notes)
   Palette sampled from Tudor's profile picture, type and feel
   matched to checkout.html, which is the look he pointed at.

   v1 put long-form text straight on a pale gradient, which is what
   he meant by "difficult to read". v2 splits it: the vivid sky is
   the HERO only, everything below sits on solid paper, so body copy
   is always dark-on-solid. Type is now Fraunces / Inter Tight /
   JetBrains Mono, same stack as checkout.

   Loaded LAST on every page so it overrides each page's inline
   <style>. Scoped to body.sky so the checkout/blog pages (which
   already run this palette, and use --ink as TEXT rather than as a
   surface) are not inverted by accident.
   ============================================================ */

:root{
  --g-lime:#C8FF00;   --g-lime-deep:#A8D600;
  --g-sky:#1F7CFF;    --g-sky-mid:#4FA0FF;  --g-sky-soft:#88C8FF;
  --g-pink:#E874B0;
  --g-amber:#FFB400;
  --cloud:#FFFFFF;
  --paper-tint:#F4F8FC;
  --deep-ink:#0A0A0F;
}

/* ---------- token remap ---------- */
body.sky{
  --serif:'Fraunces', Georgia, serif;
  --disp:'Fraunces', Georgia, serif;      /* headline font on these pages */
  --body:'Inter Tight', system-ui, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, monospace;

  --void:var(--paper-tint);   /* page background: solid, not a gradient */
  --ink:var(--cloud);         /* card surface (bg-only use here)        */
  --panel:#FFFFFF;
  --panel-2:#EDF4FB;
  --film:var(--deep-ink);     /* primary text: near-black for contrast  */
  --film-dim:#33414F;         /* secondary text, still AA on white      */
  --slate:#53616F;
  /* Bright lime is a SURFACE colour, not a text colour: #C8FF00 on white
     is about 1.5:1. But ~10 classes (.tag .k .num .day .hot .em .rec)
     paint TEXT with --ember. So --ember is the deep lime used for text
     (5.2:1 on white) and the buttons get the bright lime explicitly. */
  --ember:#4F7500;
  --ember-deep:#3D5B00;
  --aqua:var(--g-sky);
  --gold:var(--g-amber);
  --line:rgba(10,10,15,.14);
  --line-strong:rgba(10,10,15,.30);

  background:var(--paper-tint);
  color:var(--deep-ink);
  font-family:var(--body);
}

/* Fraunces is a variable optical-size face; without this it renders
   at its display grade and looks spindly at body sizes. */
body.sky h1,body.sky h2,body.sky h3,body.sky .h-sec{
  font-family:var(--serif);
  font-variation-settings:'opsz' 96,'SOFT' 0,'WONK' 1;
  font-weight:800;letter-spacing:-.02em;line-height:1.02;
}

/* ---------- hero: the vivid sky lives here and only here ---------- */
body.sky .hero{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 90'%3E%3Cpath fill='%23ffffff' d='M40,60 Q20,60 20,40 Q20,20 45,25 Q50,5 75,15 Q90,5 105,18 Q130,8 140,30 Q165,30 165,50 Q180,55 175,70 Q165,80 145,75 L55,75 Q35,80 30,70 Q15,70 40,60 Z'/%3E%3C/svg%3E")
      no-repeat 92% 16% / 260px auto,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 90'%3E%3Cpath fill='%23ffffff' fill-opacity='0.72' d='M40,60 Q20,60 20,40 Q20,20 45,25 Q50,5 75,15 Q90,5 105,18 Q130,8 140,30 Q165,30 165,50 Q180,55 175,70 Q165,80 145,75 L55,75 Q35,80 30,70 Q15,70 40,60 Z'/%3E%3C/svg%3E")
      no-repeat -3% 62% / 200px auto,
    linear-gradient(180deg,#1F7CFF 0%, #3D93FF 38%, #6FB6FF 72%, #A7D6FB 100%);
  padding-bottom:clamp(64px,8vw,120px);
}

body.sky .hero h1,
body.sky .hero h2{ color:#fff;text-shadow:0 2px 18px rgba(10,26,54,.28) }
body.sky .hero .lead,
body.sky .hero p{ color:rgba(255,255,255,.94) }
body.sky .hero h1 .em{ color:var(--g-lime);font-style:italic }
/* .aq is the second accent and resolves to the sky blue, which is
   invisible now that the hero IS sky blue. White inside the hero only;
   outside it still sits on white, where the blue is correct. */
body.sky .hero .aq{ color:#fff }
body.sky .hero .eyebrow{ color:var(--g-lime) }
body.sky .hero .eyebrow::before{ background:var(--g-lime) }
body.sky .hero b,body.sky .hero strong{ color:#fff }
body.sky .hero hr,body.sky .hero .rule{ border-color:rgba(255,255,255,.35) }

/* The white hero copy must NOT bleed into the white cards that sit
   inside the hero (signup form on /lives, film card on /), or their
   text goes white-on-white and disappears. */
body.sky .hero :is(.formcard,.filmcard,.card,.pack,.vmedia,.founder-img)
  :is(h1,h2,h3,h4,p,b,strong,span,label,li,div){
  color:var(--deep-ink);
  text-shadow:none;
}
body.sky .hero :is(.formcard,.filmcard,.card,.pack) :is(.lead,.sub,.note,small){
  color:var(--film-dim);
}
/* ...except the card's own dark title bar, which is white on ink. */
body.sky .hero .formcard>.bar,
body.sky .hero .formcard>.bar *{ color:#fff }

/* Accent text directly on the blue sky takes the BRIGHT lime. The deep
   lime below is tuned for white paper and goes muddy on blue. The card
   rule above is more specific, so accents inside hero cards stay ink. */
/* Tudor spotted it: the K in 330K and the M in 200M+ were the deep lime while
   every other accent on the sky was the bright one. One green now. */
body.sky .hero :is(.hl,.em,.k,.num,.day,.hot,.tag,.rec,.u){ color:var(--g-lime) }
/* Outside the hero the surface is white, where bright lime is ~1.5:1 and the deep
   lime reads as a third colour. So on paper the unit takes the sky blue, which is
   already the accent for .em and .k there. Two treatments, one per surface. */
body.sky .pstat .n .u{ color:var(--g-sky) }

/* Auras would fight the gradient now. */
body.sky .hero-aura{ display:none }

/* ---------- buttons: lime on black, same as checkout ---------- */
body.sky .btn-primary,
body.sky .lf-btn,
body.sky .nav-cta:hover,
body.sky .pack .dl:hover,
body.sky .days b:first-child,
body.sky .days b:last-child{ color:#0A0A0F }

body.sky .btn-primary,body.sky .lf-btn{
  background:var(--g-lime);border-color:var(--g-lime);
  font-family:var(--mono);font-weight:700;
  box-shadow:0 4px 0 var(--g-lime-deep),0 10px 26px rgba(10,10,15,.18);
}
body.sky .btn-primary:hover,body.sky .lf-btn:hover{
  background:#D9FF3D;border-color:#D9FF3D;color:#0A0A0F;
  transform:translateY(-2px);
  box-shadow:0 6px 0 var(--g-lime-deep),0 14px 32px rgba(10,10,15,.22);
}
/* Ghost button lives on the vivid sky in the hero, so it is white there
   and ink everywhere else. */
body.sky .btn-ghost{ color:var(--deep-ink);border-color:var(--line-strong) }
body.sky .btn-ghost:hover{ background:rgba(10,10,15,.06);border-color:var(--deep-ink) }
body.sky .hero .btn-ghost{ color:#fff;border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.10) }
body.sky .hero .btn-ghost:hover{ background:rgba(255,255,255,.20);border-color:#fff }
body.sky .nav-cta:hover{ background:var(--g-lime);border-color:var(--g-lime) }

/* ---------- surfaces: solid white, hard edge, real depth ---------- */
body.sky .filmcard,body.sky .pack,body.sky .card,
body.sky .vmedia,body.sky .founder-img,body.sky .formcard{
  background:#fff;
  border:1px solid rgba(10,10,15,.10);
  border-radius:16px;
  box-shadow:0 1px 2px rgba(10,26,54,.06),0 18px 44px -18px rgba(10,26,54,.28);
}

/* ---------- nav ---------- */
body.sky header:not(.scrolled) .nav-links a{ color:rgba(255,255,255,.92) }
body.sky header:not(.scrolled) .nav-links a:hover{ color:#fff }
body.sky header:not(.scrolled) .brand{ color:#fff }
body.sky header:not(.scrolled) .nav-cta{ color:#fff!important;border-color:rgba(255,255,255,.65) }
body.sky header.scrolled{
  background:rgba(255,255,255,.92);
  border-bottom:1px solid rgba(10,10,15,.10);
}
body.sky header.scrolled .nav-links a{ color:#33414F }
body.sky header.scrolled .nav-links a:hover{ color:var(--deep-ink) }
body.sky header.scrolled .brand{ color:var(--deep-ink) }
@media(max-width:860px){
  body.sky .nav-links{ background:rgba(255,255,255,.97);backdrop-filter:blur(10px) }
  body.sky .nav-links a,
  body.sky header:not(.scrolled) .nav-links a{ color:#33414F }
  body.sky .hero{ background-size:180px auto,140px auto,auto }
}

/* ---------- text hardcoded light for a dark background ----------
   Found by scanning every sky page for color:#hex with luminance>150,
   not by eyeballing. Each sat on a surface that is white now. */
body.sky .formcard>.bar,
body.sky .formcard .bar{ background:var(--deep-ink);color:#fff }
body.sky .stars button{ color:#C2CDDA }
body.sky .sub{ color:#33414F }
body.sky .lf-in::placeholder{ color:#67747F }

/* Overlays that were dark-on-dark. */
body.sky .filmcard .caption,
body.sky .founder-img .tc{
  background:rgba(255,255,255,.92);color:var(--deep-ink);
  backdrop-filter:blur(8px);
}
/* Video chrome stays dark: it sits on real video frames. */
body.sky .vmedia .plat,body.sky .vmedia .play{
  background:rgba(10,10,15,.66);color:#fff;
}

/* ---------- accents outside the hero ---------- */
body.sky .eyebrow{ color:var(--g-sky) }
body.sky .eyebrow::before{ background:var(--g-sky) }
body.sky .brand .dot{
  background:var(--g-lime);
  box-shadow:0 0 0 4px rgba(200,255,0,.25);
}
body.sky .sprockets span{ border-color:rgba(10,10,15,.20) }
body.sky ::selection{ background:var(--g-lime);color:var(--deep-ink) }
body.sky .h-sec .em,body.sky h2 .em{ color:var(--g-sky);font-style:italic }

/* ---------- checkout / blog: unchanged, they were the reference ---------- */

/* ---------- shared: the circular mark ---------- */
.tm-mark{
  width:34px;height:34px;border-radius:50%;flex:0 0 auto;object-fit:cover;
  box-shadow:0 0 0 2px rgba(255,255,255,.9),0 3px 12px rgba(10,26,54,.28);
}

@media(prefers-reduced-motion:reduce){
  body.sky .btn-primary:hover,body.sky .lf-btn:hover{ transform:none }
}

/* Offer block: two columns on desktop, stacked on phones. */
@media(max-width:860px){
  .offer-grid{ grid-template-columns:1fr!important }
}