/* brand.css: the approved "paper + dawn" system (Nov 2026). shared by every funnel page.
   fonts are loaded per page with a <link> (Cormorant Garamond 500/600, Newsreader, Caveat 500).
   contrast: every text token >= 4.5:1 on paper AND on the dawn glow (ink 11:1, soft 6.4:1, muted 4.7:1, gold 5:1). */
:root{
  --paper:#f3efe6;--paper-hi:#fffdf7;--ink:#211f1c;--soft:#4a453d;--muted:#5f584d;
  --gold:#6b5120;--gold-l:#c7a25a;--gold-on-ink:#e6cf9c;
  --line:rgba(33,31,28,.14);--rule:rgba(33,31,28,.14);
  --display:'Cormorant Garamond','Times New Roman',serif;
  --body:'Newsreader',Georgia,serif;
  --hand:'Caveat',cursive;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:var(--body);font-size:20px;line-height:1.5;letter-spacing:-.008em;background:var(--paper) url("paper.jpg") 0 0/600px repeat;-webkit-font-smoothing:antialiased;font-variant-numeric:lining-nums;overflow-x:hidden;overflow-x:clip}

/* atmosphere: soft fajr glow at the top, faint film grain over everything */
.dawn{position:absolute;inset:0 0 auto 0;height:980px;background:radial-gradient(110% 70% at 50% -10%,rgba(240,196,150,.55) 0%,rgba(244,214,178,.35) 35%,rgba(243,239,230,0) 72%),linear-gradient(180deg,rgba(214,186,160,.35),rgba(243,239,230,0) 70%);pointer-events:none;z-index:0}
.grain{position:fixed;inset:0;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");z-index:3}
.dusk{background:radial-gradient(90% 80% at 50% 110%,rgba(240,196,150,.5),rgba(243,239,230,0) 70%)}

/* type */
h1,h2,h3{font-family:var(--display);font-weight:500;margin:0;text-wrap:balance;color:var(--ink)}
h1{font-size:clamp(46px,8.4vw,88px);line-height:.94;letter-spacing:-.035em}
h2{font-size:clamp(34px,5.6vw,54px);line-height:1;letter-spacing:-.03em}
h3{letter-spacing:-.025em}
em{font-style:italic;color:var(--gold)}

/* handwritten gold annotation (his "annotated thoughts") */
.hand{font-family:var(--hand);font-weight:500;color:var(--gold);font-size:28px;line-height:1;letter-spacing:0;transform:rotate(-2deg);display:inline-block;transform-origin:left center}

/* hand-drawn gold underline on the key phrase: <span class="mark">phrase<svg viewBox="0 0 300 20" preserveAspectRatio="none"><path d="M2 14 C 80 4, 200 22, 298 8"/></svg></span>
   draws itself when the span (or its section) gets .on / .in, or on load in a hero */
.mark{position:relative}
.mark svg{position:absolute;left:-2%;bottom:-.16em;width:104%;height:.42em;overflow:visible;pointer-events:none}
.mark path{fill:none;stroke:var(--gold-l);stroke-width:3;stroke-linecap:round;stroke-dasharray:400;stroke-dashoffset:400;transition:stroke-dashoffset 1.2s ease .2s}
.mark.on path,.on .mark path,.in .mark path{stroke-dashoffset:0}
.mark.draw path{animation:draw 1.3s ease .5s forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* pinned paper notes: real DMs, word for word */
.notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:18px 16px;margin-top:22px}
.notes .note{margin:0;background:var(--paper-hi);padding:20px 18px 16px;font-size:19px;line-height:1.4;color:var(--ink);box-shadow:0 10px 24px -16px rgba(0,0,0,.4);position:relative;border:0;border-radius:2px}
.notes .note:nth-child(odd){transform:rotate(-1.2deg)}.notes .note:nth-child(even){transform:rotate(1deg)}
.notes .note::before{content:"";position:absolute;top:-8px;left:22px;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#d8b46d,#8a6a2c);box-shadow:0 2px 3px rgba(0,0,0,.3)}

/* taped polaroid of an organic photo */
.polaroid{position:relative;background:#fbf9f4;padding:12px 12px 46px;box-shadow:0 22px 40px -22px rgba(0,0,0,.45);transform:rotate(2.5deg);margin:0}
.polaroid img{display:block;width:100%;object-fit:cover;filter:saturate(.9) contrast(.97) sepia(.08)}
.polaroid .cap,.polaroid figcaption{position:absolute;left:0;right:0;bottom:8px;text-align:center;font-family:var(--hand);font-size:24px;line-height:1.1;color:var(--soft);padding:0 10px}
.tape{position:absolute;top:-12px;left:50%;width:90px;height:24px;transform:translateX(-50%) rotate(-3deg);background:rgba(231,214,170,.78);z-index:2}

/* dark ink pill with gold price */
.buy{display:inline-flex;align-items:center;gap:10px;padding:16px 26px;border-radius:999px;background:var(--ink);color:var(--paper);text-decoration:none;font-family:var(--body);font-size:18px;line-height:1.2;letter-spacing:-.01em;border:0;cursor:pointer;box-shadow:0 14px 30px -14px rgba(33,31,28,.55);transition:transform .2s}
.buy:hover{transform:translateY(-1px)}
.buy .p{color:var(--gold-on-ink)}

/* sticky buy bar (floating pill) */
.sticky{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:30;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 9px 9px 20px;border-radius:999px;background:rgba(251,249,244,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--line);box-shadow:0 12px 30px -14px rgba(0,0,0,.35);transform:translateY(150%);transition:transform .35s;font-size:17px;color:var(--ink);max-width:640px;margin:0 auto}
.sticky.on{transform:none}
.sticky .buy{margin:0;padding:10px 18px;font-size:16px}

/* fade-in sections */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .8s ease,transform .8s ease}
.reveal.on{opacity:1;transform:none}

a:focus-visible,summary:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.mark path{transition:none;animation:none;stroke-dashoffset:0}html{scroll-behavior:auto}}
@media (max-width:600px){.polaroid{padding-bottom:54px}.polaroid .cap,.polaroid figcaption{font-size:20px;white-space:nowrap;bottom:14px}}