body{min-height:100vh}
.squiggle{display:block;margin:10px auto 0;width:120px;height:30px}
.deck-hint{margin-top:34px;text-align:center;font-family:"Caveat",cursive;font-size:21px;
    color:var(--paper);opacity:.6;transform:rotate(-1.5deg)}
.polaroid-dots{display:flex;justify-content:center;gap:7px;margin-top:10px}
.pdot{width:7px;height:7px;border-radius:50%;background:rgba(13,10,22,0.22);
    transition:background .2s ease, transform .2s ease;cursor:pointer;border:none;padding:0;
    position:relative}
/* invisible enlarged tap target (44px-friendly) */
  .pdot::after{content:"";position:absolute;inset:-9px}
.pdot:hover{background:rgba(13,10,22,0.5)}
.pdot.active{background:var(--pink);transform:scale(1.25)}
/* hide nav arrows on touch devices to avoid double-up with swipe */
  @media (hover:none){
    .polaroid-nav{display:none}
  }
.links{display:flex;flex-direction:column;gap:18px}
.link{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:18px;
    padding:18px 22px;border-radius:24px;border:3px solid var(--ink);
    background:var(--cream);color:var(--ink);text-decoration:none;
    box-shadow:0 7px 0 var(--ink);touch-action:manipulation;-webkit-tap-highlight-color:transparent;
    position:relative;overflow:hidden;
    backdrop-filter:blur(28px) saturate(200%);-webkit-backdrop-filter:blur(28px) saturate(200%);
    rotate:var(--tilt);
    translate:calc(var(--mx) + var(--px)) calc(var(--my) + var(--py) + var(--ry));
    transition:box-shadow .15s ease,
               --px .15s ease, --py .15s ease,
               --mx var(--mdur,.5s) cubic-bezier(.22,.8,.3,1),
               --my var(--mdur,.5s) cubic-bezier(.22,.8,.3,1),
               opacity .7s cubic-bezier(.22,.7,.3,1) var(--rd,0s),
               --ry .8s cubic-bezier(.22,.7,.3,1) var(--rd,0s)}
.link:hover{--px:2px;--py:3px;box-shadow:0 4px 0 var(--ink), 0 0 30px 4px rgba(255,255,255,0.13)}
.link:active{--px:0px;--py:7px;box-shadow:0 0 0 var(--ink)}
/* While the pointer is on a pill it tracks fast; on leave it springs back slow. */
  .link.is-magnet{--mdur:.12s;will-change:translate}
.link .arrow{translate:calc(var(--mx) * 1.65) calc(var(--my) * 1.65);transition:transform .25s ease}
@media (prefers-reduced-motion:reduce){.link{transition:box-shadow .15s ease}}
/* Specular highlight — diagonal shine line at top of every glass button */
  .link::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    background:linear-gradient(180deg,rgba(255,255,255,0.22) 0%,rgba(255,255,255,0.05) 35%,rgba(255,255,255,0) 60%,rgba(0,0,0,0.10) 100%);
    mix-blend-mode:overlay;z-index:0}
.link > *{position:relative;z-index:1}
.link-1{background:linear-gradient(180deg,rgba(255,90,160,0.60) 0%,rgba(220,40,110,0.50) 100%);color:#fff;border-color:rgba(255,255,255,0.22);
    box-shadow:0 7px 0 var(--ink), 0 0 18px rgba(255,59,138,0.18), inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -1px 0 rgba(0,0,0,0.20)}
.link-1:hover{box-shadow:0 4px 0 var(--ink), 0 0 40px 8px rgba(255,59,138,0.60), inset 0 1px 0 rgba(255,255,255,0.40), inset 0 -1px 0 rgba(0,0,0,0.20)}
.link-ph{background:linear-gradient(180deg,rgba(40,30,15,0.55) 0%,rgba(0,0,0,0.45) 100%);color:#fff;--tilt:.8deg;
    border:2px solid rgba(255,144,0,0.85);
    box-shadow:0 0 18px rgba(255,144,0,0.15), inset 0 1px 0 rgba(255,180,80,0.25), inset 0 -1px 0 rgba(0,0,0,0.30)}
.link-ph:hover{box-shadow:0 0 40px 8px rgba(255,144,0,0.60), inset 0 1px 0 rgba(255,180,80,0.30)}
.link-ph:active{--px:0px;--py:3px}
.link-2{background:linear-gradient(180deg,rgba(90,120,255,0.60) 0%,rgba(40,70,220,0.50) 100%);color:#fff;--tilt:.5deg;border-color:rgba(255,255,255,0.22);
    box-shadow:0 7px 0 var(--ink), 0 0 18px rgba(61,92,255,0.18), inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -1px 0 rgba(0,0,0,0.20)}
.link-2:hover{box-shadow:0 4px 0 var(--ink), 0 0 40px 8px rgba(61,92,255,0.60), inset 0 1px 0 rgba(255,255,255,0.40), inset 0 -1px 0 rgba(0,0,0,0.20)}
.link-3{background:linear-gradient(180deg,rgba(255,110,40,0.60) 0%,rgba(210,55,0,0.50) 100%);color:#fff;--tilt:-.5deg;border-color:rgba(255,255,255,0.22);
    box-shadow:0 7px 0 var(--ink), 0 0 18px rgba(255,69,0,0.18), inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -1px 0 rgba(0,0,0,0.20)}
.link-3:hover{box-shadow:0 4px 0 var(--ink), 0 0 40px 8px rgba(255,69,0,0.65), inset 0 1px 0 rgba(255,255,255,0.40), inset 0 -1px 0 rgba(0,0,0,0.20)}
.link-ig{background:linear-gradient(135deg,rgba(255,170,80,0.58) 0%,rgba(240,80,60,0.55) 35%,rgba(220,40,100,0.55) 70%,rgba(180,30,150,0.55) 100%);color:#fff;--tilt:.6deg;border-color:rgba(255,255,255,0.22);
    box-shadow:0 7px 0 var(--ink), 0 0 18px rgba(220,39,67,0.20), inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -1px 0 rgba(0,0,0,0.20)}
.link-ig:hover{box-shadow:0 4px 0 var(--ink), 0 0 40px 8px rgba(220,39,67,0.60), inset 0 1px 0 rgba(255,255,255,0.40), inset 0 -1px 0 rgba(0,0,0,0.20)}
.link.link-ig .icon{background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%)}
.link .icon img,.link .icon svg{display:block}
.link.link-ph .icon{background:#000;border:2px solid #ff9000;padding:0}
.link.link-ph .arrow{border:2px solid #ff9000;color:#ff9000}
.ph-wordmark{display:inline-flex;align-items:center;font-family:Arial,Helvetica,sans-serif;
    font-weight:900;font-size:10px;color:#fff;letter-spacing:-0.3px;line-height:1}
.ph-wordmark b{background:#ff9000;color:#000;padding:1px 3px;border-radius:2px;margin-left:1px;font-weight:900}
.link .icon{width:56px;height:56px;border-radius:18px;background:#fff;
    display:flex;align-items:center;justify-content:center;
    font-family:"Caprasimo",serif;font-size:26px;color:var(--ink);
    border:3px solid var(--ink)}
.link .label{font-family:"Caprasimo",serif;font-size:30px;line-height:1;letter-spacing:-0.01em}
.link .meta{font-family:"Space Grotesk","SG Fallback";font-size:12px;font-weight:500;opacity:.85;margin-top:4px}
.link-3 .meta{opacity:.7}
.link .arrow{width:44px;height:44px;border-radius:50%;background:#fff;color:var(--ink);
    border:3px solid var(--ink);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;
    transition:transform .25s ease}
.link:hover .arrow{transform:rotate(-25deg)}
/* Mini badge — sticker on OnlyFans button */
  .excl-wrap{position:relative;transform:rotate(-1deg)}
/* Running light strictly ON the border contour (masked ring, no center bleed) */
  .excl-wrap::after{content:"";position:absolute;inset:-1px;border-radius:27px;
    padding:2.5px;pointer-events:none;z-index:4;
    background:conic-gradient(from var(--beam,0deg),
      rgba(61,92,255,0) 0deg,
      rgba(61,92,255,0) 64deg,
      rgba(61,92,255,0.35) 82deg,
      #3d5cff 90deg,
      #9db4ff 94deg,
      #3d5cff 98deg,
      rgba(61,92,255,0.35) 106deg,
      rgba(61,92,255,0) 124deg,
      rgba(61,92,255,0) 360deg);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
    animation:beamSpin 3s linear infinite}
@keyframes beamSpin{to{--beam:360deg}}
@media(prefers-reduced-motion:reduce){
    .excl-wrap::after{animation:none;
      background:linear-gradient(rgba(61,92,255,0.4),rgba(61,92,255,0.4))}
  }
.excl-tag{position:absolute;top:-12px;right:14px;z-index:3;
    font-family:"Boldonse",sans-serif;font-size:9px;font-weight:700;
    letter-spacing:.16em;text-transform:uppercase;
    background:var(--yellow);color:var(--ink);
    padding:5px 10px;border-radius:4px;border:1.5px solid var(--ink);
    box-shadow:0 2px 0 var(--ink), 0 6px 14px rgba(0,0,0,0.4);
    pointer-events:none;overflow:hidden}
.excl-tag::before{content:"";position:absolute;top:0;left:-60%;
    width:50%;height:100%;
    background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.9) 50%, transparent 100%);
    transform:skewX(-22deg);
    animation:exclShine 5s ease-in-out infinite}
@keyframes exclShine{
    0%, 70%{ left:-60% }
    100%{ left:160% }
  }
/* Note card — glassmorphism */
  .note{margin-top:28px;background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.18);border-radius:22px;
    padding:24px 28px;transform:rotate(0.4deg);
    position:relative;color:var(--paper);
    backdrop-filter:blur(22px) saturate(160%);
    -webkit-backdrop-filter:blur(22px) saturate(160%);
    box-shadow:0 12px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.12)}
.note::before{content:"✦";position:absolute;top:-18px;left:24px;
    background:var(--green);color:var(--ink);width:36px;height:36px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;font-size:18px;border:3px solid var(--ink)}
.note h3{margin:0;font-family:"Caprasimo",serif;font-size:24px;color:var(--paper)}
.note p{margin:6px 0 0;font-family:"Caveat",cursive;font-size:22px;line-height:1.4;color:var(--paper);opacity:0.9}
.note b{font-family:"Space Grotesk","SG Fallback";font-weight:600;text-decoration:underline;text-decoration-style:wavy;text-decoration-color:var(--pink);color:var(--paper)}
/* hover only on devices with a real pointer — prevents sticky highlight on touch */
  @media(hover:hover){
    .nav-link:hover{opacity:0.95}
  }
/* ── Custom cursor (fine pointers only) ── */
  @media (pointer:fine){
    body{cursor:url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26"%3E%3Cpath d="M5 2L5 21L10.2 16L13.6 23.6L16.8 22.2L13.4 14.8L20 14Z" fill="%23fff6e9" stroke="%230d0a16" stroke-width="1.8" stroke-linejoin="round"/%3E%3C/svg%3E') 5 2, auto}
  }
#spark-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:9999;pointer-events:none}
.cm-input:focus-visible,.cm-textarea:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.tile:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
.about-foot{text-align:center;font-family:"Boldonse",sans-serif;font-size:11px;letter-spacing:.22em;
    text-transform:uppercase;color:var(--paper);opacity:0.55;margin-top:8px}
/* ── Offscreen work the browser can postpone ─────────────────────────────
   The inactive sections and the blocks below the fold are laid out and
   painted on first load even though nobody can see them. content-visibility
   lets the browser skip that until they scroll into view (or the section is
   switched on); contain-intrinsic-size keeps a placeholder height so the
   scrollbar does not jump when it does. ─────────────────────────────────── */
  html.spa .page:not(.active){content-visibility:hidden}
  .contact-cta,.site-foot{content-visibility:auto;contain-intrinsic-size:auto 200px}
  .faq details{content-visibility:auto;contain-intrinsic-size:auto 64px}

/* ── Subscription value block (Content page) ── */
.perks{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
.perk{padding:26px 24px 24px;border-radius:20px;position:relative;
    background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.14);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.10), 0 8px 30px rgba(0,0,0,0.28)}
.perk-mark{font-family:"Caprasimo",serif;font-size:15px;line-height:1;color:var(--yellow);
    display:block;margin-bottom:14px;letter-spacing:.02em}
.perk h3{margin:0 0 8px;font-family:"Caprasimo",serif;font-size:21px;line-height:1.15;
    letter-spacing:-0.01em;color:var(--paper)}
.perk p{margin:0;font-family:"Space Grotesk",system-ui,sans-serif;font-size:14px;line-height:1.65;
    color:var(--paper);opacity:0.82}
.perks-close{margin:22px auto 0;max-width:620px;text-align:center;
    font-family:"Caveat",cursive;font-size:26px;line-height:1.35;color:var(--paper);opacity:0.85}
@media(max-width:820px){
  .perks{grid-template-columns:1fr;gap:12px}
  .perk{padding:22px 20px 20px}
  .perks-close{font-size:22px;margin-top:18px}
}

/* ── Site footer (all pages) ── */
  .site-foot{margin-top:56px;padding-top:18px;text-align:center;position:relative;z-index:1}
.site-foot::before{content:"";display:block;width:140px;height:1px;margin:0 auto 14px;
    background:linear-gradient(90deg,transparent,rgba(255,210,61,0.4),transparent)}
.site-foot p{margin:0;font-family:"Boldonse",sans-serif;font-size:9px;letter-spacing:.2em;
    text-transform:uppercase;color:var(--paper);opacity:0.45;line-height:1.6}
.site-foot .sep{color:var(--yellow);opacity:0.8;margin:0 5px}
@media(max-width:820px){
    .site-foot{margin-top:40px}
    .site-foot p{font-size:8px;letter-spacing:.16em}
  }
/* Touch target: the pill reads ~22px tall, so pad the hit area out to 44px
     without changing how it looks. */
  @media(hover:none){
    .nav-link::after{content:"";position:absolute;left:0;right:0;top:50%;
      height:44px;transform:translateY(-50%)}
  }
/* ── Last drop badge — freshness proof. To update: edit the date in the markup below. ── */
  .lastdrop{display:flex;justify-content:center;margin:-14px auto 30px}
.lastdrop span{display:inline-flex;align-items:center;gap:10px;
    font-family:"Boldonse",sans-serif;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--paper);padding:9px 16px 9px 14px;border-radius:999px;
    background:rgba(61,216,122,0.10);border:1px solid rgba(61,216,122,0.34)}
.lastdrop b{font-weight:400;color:var(--green);letter-spacing:.14em}
.lastdrop i{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none;
    box-shadow:0 0 0 0 rgba(61,216,122,0.6);animation:dropPulse 2.4s ease-out infinite}
@keyframes dropPulse{0%{box-shadow:0 0 0 0 rgba(61,216,122,0.55)}70%{box-shadow:0 0 0 9px rgba(61,216,122,0)}100%{box-shadow:0 0 0 0 rgba(61,216,122,0)}}
@media (prefers-reduced-motion: reduce){.lastdrop i{animation:none}}
@media(max-width:640px){.lastdrop span{font-size:9.5px;letter-spacing:.16em;padding:8px 14px 8px 12px}}
/* ── Channels · horizontal rows ── */
  .channels{display:flex;flex-direction:column;gap:14px;margin-top:8px}
.chrow{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:22px;
    padding:22px 26px;border-radius:20px;text-decoration:none;color:var(--paper);
    background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.14);
    backdrop-filter:blur(20px) saturate(170%);-webkit-backdrop-filter:blur(20px) saturate(170%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.10), 0 8px 30px rgba(0,0,0,0.28);
    transition:transform .2s ease, border-color .25s ease, box-shadow .25s ease}
.chrow:hover{transform:translateX(4px)}
.chrow.gold{border-color:rgba(61,92,255,0.45);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.14), 0 8px 30px rgba(0,0,0,0.4), 0 0 30px rgba(61,92,255,0.16)}
.chrow-num{font-family:"Boldonse",sans-serif;font-weight:700;font-size:16px;line-height:1;
    letter-spacing:0.02em;color:var(--ink);
    width:52px;height:52px;border-radius:15px;flex-shrink:0;overflow:hidden;
    display:flex;align-items:center;justify-content:center;
    background:var(--yellow);border:2.5px solid var(--ink);
    box-shadow:0 4px 0 var(--ink), 0 8px 16px rgba(0,0,0,0.3);
    transform:rotate(-6deg);justify-self:center;
    transition:transform .2s ease}
.chrow-num img{width:100%;height:100%;object-fit:cover;display:block}
.chrow-num .ph-wordmark{font-size:11px}
.chrow-num.logo-of{background:#000;transform:rotate(-6deg)}
.chrow-num.logo-of img{width:100%;height:100%;object-fit:cover;margin:0}
.chrow-num.logo-ph{background:#000;transform:rotate(5deg)}
.chrow-num.logo-ig{transform:rotate(-4deg);
    background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%)}
.chrow:hover .chrow-num{transform:rotate(0deg) scale(1.05)}
.chrow-nm{font-family:"Caprasimo",serif;font-size:28px;line-height:1;
    display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.chrow-ds{font-family:"Space Grotesk","SG Fallback";font-size:13px;opacity:0.7;margin-top:8px;line-height:1.5}
.chrow-cta{font-family:"Boldonse",sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
    padding:12px 18px;border-radius:999px;border:1px solid rgba(255,255,255,0.25);white-space:nowrap;
    display:flex;align-items:center;gap:8px;
    transition:background .2s ease, color .2s ease, border-color .2s ease}
.chrow-cta span{transition:transform .2s ease}
.chrow:hover .chrow-cta span{transform:translateX(4px)}
.chrow:hover .chrow-cta{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.chrow.gold .chrow-cta{background:linear-gradient(180deg,#9db4ff,#3d5cff 60%,#3d5cff);color:#fff;border-color:transparent}
.chrow .channel-tag{display:inline-block;font-family:"Boldonse",sans-serif;font-size:8.5px;letter-spacing:.18em;
    text-transform:uppercase;padding:5px 11px;border-radius:999px}
.chrow .channel-tag.tease{background:var(--pink);color:#fff;border:1px solid var(--ink)}
.chrow .channel-tag.free{background:linear-gradient(90deg,#000 0 60%,#ff9000 60% 100%);color:#fff;border:1px solid var(--ink)}
.chrow .channel-tag.premium{background:linear-gradient(180deg,#9db4ff,#3d5cff 60%,#3d5cff);color:#fff;border:1px solid var(--ink)}
@media(max-width:820px){
    .chrow{grid-template-columns:46px 1fr;gap:16px;padding:18px 18px}
    .chrow-num{font-size:36px}
    .chrow-nm{font-size:22px;gap:10px}
    .chrow-cta{grid-column:2;justify-self:start;margin-top:6px}
  }
/* ── Gallery teaser ── */
  .gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}
.tile{aspect-ratio:3/4;border-radius:18px;overflow:hidden;position:relative;
    border:1px solid rgba(255,255,255,0.12);background:#1a1a1a;
    display:flex;align-items:flex-end;padding:14px;
    box-shadow:0 8px 28px rgba(0,0,0,0.4);
    transform-style:preserve-3d;will-change:transform;
    transition:transform .5s cubic-bezier(.22,.8,.3,1), box-shadow .25s ease, border-color .25s ease}
.tile.tilting{transition:transform .08s linear, box-shadow .25s ease, border-color .25s ease}
.tile::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
    background:radial-gradient(circle 220px at var(--mx,50%) var(--my,50%),
      rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.04) 35%, transparent 70%);
    opacity:0;transition:opacity .3s ease;border-radius:inherit;mix-blend-mode:overlay}
.tile.tilting::before{opacity:1}
.tile::after{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,0.85));pointer-events:none}
.tile > *{position:relative;z-index:1}
.tile-real img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
    filter:saturate(1.05) contrast(1.02)}
.tile-stripe{background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.035) 0 14px, rgba(255,255,255,0.075) 14px 28px)}
.tile-stripe.pink{background:
    repeating-linear-gradient(45deg, rgba(255,59,138,0.06) 0 14px, rgba(255,59,138,0.14) 14px 28px), #160a14}
.tile-stripe.gold{background:
    repeating-linear-gradient(45deg, rgba(255,210,61,0.06) 0 14px, rgba(255,210,61,0.14) 14px 28px), #14110a}
.tile-tag{font-family:"Boldonse",sans-serif;font-size:10px;letter-spacing:.18em;
    text-transform:uppercase;padding:6px 11px;border-radius:999px;
    background:rgba(0,0,0,0.5);border:1px solid rgba(255,255,255,0.2);color:var(--paper);
    backdrop-filter:blur(8px)}
.tile-lock{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;
    background:rgba(0,0,0,0.55);border:1px solid rgba(255,210,61,0.5);color:var(--yellow);
    display:flex;align-items:center;justify-content:center;font-size:13px;backdrop-filter:blur(8px);z-index:2}
.tile-num{position:absolute;top:14px;left:16px;font-family:"Caprasimo",serif;
    font-size:13px;color:var(--paper);opacity:0.55;z-index:2;letter-spacing:.08em}
.story{display:grid;grid-template-columns:280px 1fr;gap:40px;align-items:start;
    margin:56px auto 0;max-width:1000px}
.story-portrait{position:relative;border-radius:24px;overflow:hidden;
    border:1px solid rgba(255,255,255,0.14);box-shadow:0 14px 40px rgba(0,0,0,0.45)}
.story-portrait img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.story-portrait::after{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,0.7));pointer-events:none}
.story-portrait .badge{position:absolute;bottom:14px;left:16px;right:16px;
    font-family:"Boldonse",sans-serif;font-size:10px;letter-spacing:.22em;
    text-transform:uppercase;color:var(--paper);opacity:0.9;z-index:1}
.story-text p{font-family:"Space Grotesk","SG Fallback";font-size:16px;line-height:1.7;
    color:var(--paper);opacity:0.85;margin:0 0 16px}
.story-text p:first-child::first-letter{font-family:"Caprasimo",serif;font-size:64px;
    float:left;line-height:0.95;padding:6px 12px 0 0;
    background:linear-gradient(180deg,#fff6e9,#ffd23d 70%,#d4af37);
    -webkit-background-clip:text;background-clip:text;color:transparent}
.story-text p strong{color:var(--paper);opacity:1;
    text-decoration:underline;text-decoration-style:wavy;
    text-decoration-color:var(--pink);text-underline-offset:4px;font-weight:600}
.faq{margin:52px auto 0;max-width:780px;display:flex;flex-direction:column;gap:10px}
.faq details{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.12);
    border-radius:16px;overflow:hidden;backdrop-filter:blur(18px) saturate(160%);
    transition:background .25s ease, border-color .25s ease}
.faq details[open]{background:rgba(255,255,255,0.06);border-color:rgba(255,210,61,0.3)}
.faq summary{list-style:none;cursor:pointer;padding:18px 22px;
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    font-family:"Caprasimo",serif;font-size:18px;color:var(--paper);
    -webkit-tap-highlight-color:transparent}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:"Caprasimo",serif;font-size:22px;
    width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.15);flex-shrink:0;
    display:flex;align-items:center;justify-content:center;line-height:1;color:var(--paper);
    transition:transform .25s ease, background .25s ease, color .25s ease}
.faq details[open] summary::after{content:"−";background:var(--yellow);color:var(--ink);
    border-color:var(--yellow)}
.faq-body{padding:0 22px 20px;font-family:"Space Grotesk","SG Fallback";font-size:15px;
    line-height:1.6;color:var(--paper);opacity:0.82}
.signature{text-align:center;margin:56px auto 0;font-family:"Caveat",cursive;
    font-size:42px;color:var(--paper);transform:rotate(-2deg);line-height:1}
.signature span{background:linear-gradient(180deg,#fff6e9,#ffd23d 60%,#d4af37);
    -webkit-background-clip:text;background-clip:text;color:transparent}
.signature::after{content:"";display:block;width:140px;height:2px;margin:10px auto 0;
    background:linear-gradient(90deg,transparent,var(--yellow),transparent);transform:rotate(2deg)}
@media(max-width:820px){
    .gallery{grid-template-columns:repeat(2,1fr);gap:10px}
    .story{grid-template-columns:1fr;gap:20px;margin-top:36px}
    .story-portrait{max-width:260px;margin:0 auto}
    .faq{margin-top:36px}
    .faq summary{font-size:16px;padding:14px 18px}
    .signature{font-size:32px;margin-top:40px}
  }
/* ── Lightbox ── */
  .tile{cursor:pointer;transition:transform .2s ease, box-shadow .2s ease}
.tile:hover{transform:translateY(-3px);box-shadow:0 14px 38px rgba(0,0,0,0.55), 0 0 24px rgba(255,210,61,0.12)}
.lb{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;
    background:rgba(6,4,10,0.78);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
    padding:24px;opacity:0;transition:opacity .25s ease}
.lb.open{display:flex;opacity:1}
.lb-stage{position:relative;width:min(420px,90vw);max-height:90vh;display:flex;flex-direction:column;gap:14px;
    animation:lbPop .35s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes lbPop{from{transform:translateY(16px) scale(.96);opacity:0} to{transform:none;opacity:1}}
.lb-img-wrap{position:relative;border-radius:22px;overflow:hidden;
    border:1px solid rgba(255,255,255,0.12);background:#0a0a0a;
    box-shadow:0 24px 64px rgba(0,0,0,0.6), 0 0 30px rgba(255,210,61,0.10)}
.lb-img-wrap img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.lb-img-wrap::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,0.7));}
.lb-meta{position:absolute;left:18px;right:18px;bottom:16px;z-index:1;
    display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
.lb-meta .num{font-family:"Caprasimo",serif;font-size:14px;color:var(--paper);opacity:0.6;letter-spacing:.06em}
.lb-meta .ttl{font-family:"Caprasimo",serif;font-size:24px;color:var(--paper);line-height:1;letter-spacing:-0.01em}
.lb-meta .tag{font-family:"Boldonse",sans-serif;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
    padding:6px 11px;border-radius:999px;background:rgba(0,0,0,0.5);border:1px solid rgba(255,255,255,0.22);
    color:var(--paper);backdrop-filter:blur(8px);white-space:nowrap}
.lb-cta{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lb-cta.lb-cta-solo{grid-template-columns:1fr}
.lb-btn{display:flex;align-items:center;justify-content:center;gap:8px;
    padding:14px 16px;border-radius:16px;text-decoration:none;
    font-family:"Boldonse",sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    border:1px solid rgba(255,255,255,0.18);
    transition:transform .2s ease, box-shadow .2s ease;
    backdrop-filter:blur(12px) saturate(160%);text-align:center;line-height:1.55}
.lb-btn:hover{transform:translateY(-2px)}
.lb-btn.ph{background:linear-gradient(180deg,rgba(40,30,15,0.6),rgba(0,0,0,0.55));
    color:#fff;border-color:rgba(255,144,0,0.7);
    box-shadow:0 0 18px rgba(255,144,0,0.18), inset 0 1px 0 rgba(255,180,80,0.25)}
.lb-btn.ph:hover{box-shadow:0 0 32px rgba(255,144,0,0.5), inset 0 1px 0 rgba(255,180,80,0.3)}
.lb-btn.of{background:linear-gradient(180deg,rgba(255,210,61,0.95),rgba(212,175,55,0.95));
    color:var(--ink);border-color:rgba(255,255,255,0.25);
    box-shadow:0 8px 22px rgba(255,210,61,0.32), inset 0 1px 0 rgba(255,255,255,0.45)}
.lb-btn.of:hover{box-shadow:0 12px 32px rgba(255,210,61,0.5), inset 0 1px 0 rgba(255,255,255,0.55)}
.lb-close{position:absolute;top:-44px;right:-2px;width:36px;height:36px;border-radius:50%;
    background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.18);
    color:var(--paper);font-size:18px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;line-height:1;
    backdrop-filter:blur(10px);transition:background .2s ease, transform .2s ease}
.lb-close:hover{background:var(--pink);border-color:var(--pink);transform:rotate(90deg)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;
    background:rgba(0,0,0,0.55);border:1px solid rgba(255,255,255,0.18);color:var(--paper);
    font-family:"Caprasimo",serif;font-size:22px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;line-height:1;
    backdrop-filter:blur(10px);transition:background .2s ease, border-color .2s ease, transform .2s ease;z-index:2}
.lb-nav:hover{background:rgba(255,210,61,0.18);border-color:var(--yellow);color:var(--yellow)}
.lb-prev{left:-66px}
.lb-next{right:-66px}
.lb-counter{position:absolute;top:-44px;left:0;
    font-family:"Boldonse",sans-serif;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
    color:var(--paper);opacity:0.65}
@media(max-width:820px){
    .lb{padding:14px}
    .lb-stage{width:min(360px,92vw)}
    .lb-prev{left:auto;right:50px;top:auto;bottom:-58px;transform:none}
    .lb-next{right:6px;top:auto;bottom:-58px;transform:none}
    .lb-close{top:-40px}
    .lb-counter{top:-38px}
    .lb-meta .ttl{font-size:20px}
    .lb-btn{font-size:10px;padding:12px 10px;letter-spacing:.08em;line-height:1.5}
  }
body.lb-open{overflow:hidden}
/* ── Contact CTA ── */
/* The two-column arrangement below is a home-page one: it mirrors the .grid
   tracks (340px + 48px gap) so the button lands under the social pills and
   level with the note card beside them. The other pages have neither, so
   there the block is simply centred in normal flow. */
.contact-cta{margin-top:36px;text-align:center}
.p-home .contact-cta{display:grid;grid-template-columns:340px 1fr;column-gap:48px;row-gap:0;
    margin-top:-159px;margin-bottom:159px}
.p-home .contact-cta > *{grid-column:2;justify-self:center}
@media(max-width:820px){
    .p-home .contact-cta{grid-template-columns:1fr;gap:0;margin-top:28px;margin-bottom:0}
    .p-home .contact-cta > *{grid-column:1}
  }
.contact-eyebrow{font-family:"Boldonse",sans-serif;font-size:11px;letter-spacing:.28em;
    text-transform:uppercase;color:var(--paper);opacity:0.55;margin-bottom:10px;
    display:flex;align-items:center;justify-content:center;gap:14px;width:100%}
.contact-eyebrow::before, .contact-eyebrow::after{content:"";flex:1;max-width:80px;height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,210,61,0.5),transparent)}
.contact-btn{display:inline-grid;grid-template-columns:auto auto auto;align-items:center;gap:13px;
    padding:13px 17px 13px 14px;border-radius:16px;
    background:linear-gradient(180deg,rgba(255,210,61,0.18),rgba(255,210,61,0.06));
    border:1.5px solid rgba(255,210,61,0.45);
    color:var(--paper);text-decoration:none;
    backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
    box-shadow:0 8px 28px rgba(0,0,0,0.35), 0 0 30px rgba(255,210,61,0.08), inset 0 1px 0 rgba(255,255,255,0.12);
    transition:transform .2s ease, box-shadow .25s ease, border-color .25s ease}
.contact-btn:hover{transform:translateY(-3px);border-color:rgba(255,210,61,0.7);
    box-shadow:0 14px 38px rgba(0,0,0,0.45), 0 0 50px rgba(255,210,61,0.20), inset 0 1px 0 rgba(255,255,255,0.18)}
.contact-btn:active{transform:translateY(-1px)}
.contact-icon{padding:6px 11px;background:var(--pink);color:#fff;
    font-family:"Caveat",cursive;font-size:22px;font-weight:700;line-height:1;
    border:2px solid var(--ink);border-radius:12px;
    box-shadow:0 4px 0 var(--ink), 0 8px 16px rgba(0,0,0,0.3);
    transform:rotate(-8deg);display:inline-flex;align-items:center;justify-content:center;
    white-space:nowrap}
.contact-btn:hover .contact-icon{transform:rotate(-12deg) translateY(-1px);
    box-shadow:0 5px 0 var(--ink), 0 10px 20px rgba(0,0,0,0.4)}
.contact-text{text-align:left}
.contact-label{font-family:"Caprasimo",serif;font-size:21px;line-height:1;letter-spacing:-0.01em;color:var(--paper)}
.contact-meta{font-family:"Space Grotesk","SG Fallback";font-size:10px;font-weight:500;
    letter-spacing:.12em;text-transform:uppercase;color:var(--paper);opacity:0.6;margin-top:4px}
.contact-arrow{font-family:"Caprasimo",serif;font-size:21px;color:var(--yellow);margin-left:4px;
    transition:transform .25s ease}
.contact-btn:hover .contact-arrow{transform:translateX(4px)}
/* ── Contact modal ── */
  .cm{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;
    background:rgba(6,4,10,0.78);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
    padding:24px;opacity:0;transition:opacity .25s ease}
.cm.open{display:flex;opacity:1}
body.cm-open{overflow:hidden}
.cm-card{position:relative;width:min(640px,94vw);
    background:linear-gradient(180deg,rgba(28,22,38,0.96),rgba(14,10,22,0.96));
    border:1px solid rgba(255,255,255,0.14);border-radius:24px;
    box-shadow:0 30px 80px rgba(0,0,0,0.6), 0 0 40px rgba(255,210,61,0.06), inset 0 1px 0 rgba(255,255,255,0.10);
    animation:cmPop .4s cubic-bezier(.2,.9,.3,1.2) both}
.cm-scroll{max-height:92vh;overflow:auto;border-radius:24px;padding:38px 40px 34px}
@keyframes cmPop{from{transform:translateY(18px) scale(.96);opacity:0} to{transform:none;opacity:1}}
.cm-sticker{position:absolute;top:-16px;left:28px;z-index:3;
    background:var(--pink);color:#fff;font-family:"Caveat",cursive;font-size:24px;font-weight:700;line-height:1;
    padding:7px 14px;border:2px solid var(--ink);border-radius:13px;transform:rotate(-7deg);
    box-shadow:0 4px 0 var(--ink), 0 8px 16px rgba(0,0,0,0.3)}
.cm-close{position:absolute;top:16px;right:16px;z-index:3;width:36px;height:36px;border-radius:50%;
    background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.18);color:var(--paper);
    font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;
    transition:background .2s ease, transform .2s ease}
.cm-close:hover{background:var(--pink);border-color:var(--pink);transform:rotate(90deg)}
.cm-title{font-family:"Caprasimo",serif;font-size:30px;line-height:1.05;color:var(--paper);margin:6px 0 4px;letter-spacing:-0.01em}
.cm-sub{font-family:"Caveat",cursive;font-size:21px;color:var(--paper);opacity:0.7;margin-bottom:22px}
.cm-field{margin-bottom:16px}
.cm-label{display:block;font-family:"Boldonse",sans-serif;font-size:10px;letter-spacing:.2em;
    text-transform:uppercase;color:var(--paper);opacity:0.65;margin-bottom:8px}
.cm-input, .cm-textarea{width:100%;font-family:"Space Grotesk","SG Fallback";font-size:15px;color:var(--paper);
    background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.16);border-radius:14px;
    padding:14px 16px;outline:none;transition:border-color .2s ease, background .2s ease;-webkit-appearance:none}
.cm-input::placeholder, .cm-textarea::placeholder{color:rgba(244,238,224,0.4)}
.cm-input:focus, .cm-textarea:focus{border-color:var(--yellow);background:rgba(255,255,255,0.08)}
.cm-textarea{resize:vertical;min-height:170px;line-height:1.5}
.cm-submit{width:100%;margin-top:6px;font-family:"Caprasimo",serif;font-size:20px;letter-spacing:-0.01em;
    color:var(--ink);background:linear-gradient(180deg,#fff6e9,#ffd23d 60%,#d4af37);
    border:2px solid var(--ink);border-radius:16px;padding:15px;cursor:pointer;
    box-shadow:0 5px 0 var(--ink);transition:transform .15s ease, box-shadow .15s ease;
    display:flex;align-items:center;justify-content:center;gap:10px}
.cm-submit:hover{transform:translateY(2px);box-shadow:0 3px 0 var(--ink)}
.cm-submit:active{transform:translateY(5px);box-shadow:0 0 0 var(--ink)}
.cm-submit:disabled{opacity:0.6;cursor:wait;transform:none;box-shadow:0 5px 0 var(--ink)}
.cm-note{margin-top:14px;text-align:center;font-family:"Space Grotesk","SG Fallback";font-size:11px;
    letter-spacing:.06em;color:var(--paper);opacity:0.5}
.cm-status{margin-top:14px;text-align:center;font-family:"Caveat",cursive;font-size:20px;min-height:24px;
    transition:opacity .2s ease}
.cm-status.ok{color:var(--green)}
.cm-status.err{color:var(--pink)}
.cm-success{text-align:center;padding:20px 0 8px}
.cm-success .big{font-family:"Caprasimo",serif;font-size:28px;color:var(--green);margin-bottom:8px}
.cm-success .small{font-family:"Caveat",cursive;font-size:22px;color:var(--paper);opacity:0.8}
.cm-success .check{font-size:54px;line-height:1;margin-bottom:6px}
/* ── Touch devices: neutralize sticky :hover after taps ── */
  @media(hover:none){
    .link:hover{transform:none}
    .link-ph:hover{transform:rotate(0.8deg)}
    .link-2:hover{transform:rotate(0.5deg)}
    .link-3:hover{transform:rotate(-0.5deg)}
    .link-ig:hover{transform:rotate(0.6deg)}
    .link:hover .arrow{transform:none}
    .tile:hover{transform:none}
    .chrow:hover{transform:none}
    .chrow:hover .chrow-num{transform:rotate(-6deg)}
    .chrow:hover .chrow-num.logo-ph{transform:rotate(5deg)}
    .chrow:hover .chrow-num.logo-ig{transform:rotate(-4deg)}
    .chrow:not(.gold):hover .chrow-cta{background:transparent;color:var(--paper);border-color:rgba(255,255,255,0.25)}
    .chrow:hover .chrow-cta span{transform:none}
    .contact-btn:hover{transform:none}
    .contact-btn:hover .contact-icon{transform:rotate(-8deg)}
    .contact-btn:hover .contact-arrow{transform:none}
  }
/* ── Mobile blur budget ──────────────────────────────────────────────────
     backdrop-filter is the single most expensive thing a phone GPU does here:
     every blurred element captures and re-blurs what is behind it, and the
     cost climbs with the radius and the area. Full-screen overlays get a
     token blur plus a more opaque backdrop (visually the same — the page
     behind is already hidden), mid-size panels get a small radius, and the
     little chips drop the effect entirely in favour of a denser background.
     ─────────────────────────────────────────────────────────────────────── */
  @media (max-width:900px){
    .tape,.note,.faq details,.ig-card{backdrop-filter:blur(8px) saturate(150%);
      -webkit-backdrop-filter:blur(8px) saturate(150%)}
    .link{backdrop-filter:blur(10px) saturate(150%);-webkit-backdrop-filter:blur(10px) saturate(150%)}
    .lb,.cm{backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);background:rgba(6,4,10,0.92)}
    .lb-btn{backdrop-filter:none;-webkit-backdrop-filter:none}
    .pcard::before,.tile-tag,.tile-lock,.lb-meta .tag,.lb-close,.lb-nav{
      backdrop-filter:none;-webkit-backdrop-filter:none}
    .tile-tag,.lb-meta .tag{background:rgba(0,0,0,0.66)}
    .tile-lock{background:rgba(0,0,0,0.7)}
  }