/* Wildlight Ink v3 extras, shared by every page (2026-10-10).
   Phone menu, back to top, Surprise me, saved designs, designs page tools,
   Light it up, t-shirt mockup, product links, custom portraits, media page, Halloween trimmings. */

/* ---------- phone menu ---------- */
.menu-btn{display:none;align-items:center;justify-content:center;width:42px;height:42px;margin-left:10px;border-radius:999px;border:0;cursor:pointer;
  background:rgba(11,20,36,.55);box-shadow:inset 0 0 0 1px rgba(223,229,238,.28);color:var(--etch)}
.menu-btn svg{width:20px;height:20px}
.menu-btn[aria-expanded="true"]{box-shadow:inset 0 0 0 1px var(--cyan),0 0 18px -6px var(--cyan)}
.mnav{position:fixed;left:0;right:0;top:calc(60px + env(safe-area-inset-top,0px));z-index:49;padding:10px 16px 18px;
  background:#050a14;border-bottom:1px solid var(--rule);box-shadow:0 30px 60px -20px rgba(0,0,0,.8);
  display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;max-height:calc(100dvh - 70px);overflow:auto}
.mnav[hidden]{display:none}
.mnav a,.mnav button{display:flex;align-items:center;gap:10px;min-height:46px;padding:0 6px;text-decoration:none;color:var(--etch);font-size:15px;
  border:0;border-bottom:1px solid var(--rule);background:none;text-align:left;cursor:pointer}
.mnav a[aria-current="page"]{color:var(--cyan)}
.mnav .mnav-h{grid-column:1 / -1;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fog);padding:12px 6px 2px;border:0;min-height:0}
@media (max-width:1080px){.menu-btn{display:inline-flex}}
@media (min-width:641px){.mnav{top:calc(68px + env(safe-area-inset-top,0px));grid-template-columns:repeat(3,1fr);padding-inline:var(--gutter)}}

/* ---------- back to top ---------- */
.to-top{position:fixed;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));z-index:40;width:46px;height:46px;border-radius:50%;
  border:0;cursor:pointer;color:var(--etch);background:rgba(11,20,36,.82);box-shadow:inset 0 0 0 1px rgba(223,229,238,.3),0 10px 30px -10px rgba(0,0,0,.8);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:grid;place-items:center;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .3s,transform .3s}
.to-top.on{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{box-shadow:inset 0 0 0 1px var(--cyan),0 0 22px -6px var(--cyan)}
.to-top svg{width:20px;height:20px}
.lb:not([hidden]) ~ .to-top{display:none}

/* ---------- surprise me ---------- */
.btn-surprise{position:relative;overflow:hidden}
.btn-surprise .dice{width:18px;height:18px;transition:transform .5s var(--ease)}
.btn-surprise:hover .dice{transform:rotate(200deg)}
.sp{position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:radial-gradient(60% 60% at 50% 45%,rgba(11,20,36,.86),rgba(3,7,14,.97));
  opacity:0;transition:opacity .25s}
.sp.on{opacity:1}
.sp-card{position:relative;width:min(86vw,720px);display:grid;gap:16px;justify-items:center;text-align:center}
.sp-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:var(--dusk);
  box-shadow:0 0 0 1px rgba(168,188,214,.18),0 40px 90px -30px rgba(0,0,0,.9)}
.sp-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.25) brightness(.7) blur(1px);transition:filter .5s}
.sp.land .sp-frame{animation:spburst .9s var(--ease) both}
.sp.land .sp-frame img{filter:none}
@keyframes spburst{0%{transform:scale(.96);box-shadow:0 0 0 1px rgba(255,255,255,.2)}40%{transform:scale(1.03);box-shadow:0 0 0 2px #fff,0 0 80px 10px var(--pink),0 0 140px 30px var(--cyan)}100%{transform:scale(1);box-shadow:0 0 0 1px rgba(255,255,255,.4),0 0 60px -10px var(--cyan)}}
.sp-k{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--fog)}
.sp-t{font-family:var(--display);font-size:clamp(22px,1rem + 2vw,38px);line-height:1.1;color:var(--etch);min-height:2.2em;margin:0;text-wrap:balance}
.sp.land .sp-t{color:#fff;text-shadow:0 0 22px rgba(78,228,255,.6)}
.sp-x{position:absolute;top:max(14px,env(safe-area-inset-top));right:14px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(223,229,238,.3);background:rgba(11,20,36,.6);color:var(--etch);cursor:pointer;font-size:22px;line-height:1}
.sp-scan{position:absolute;inset:0;background:linear-gradient(180deg,transparent 0 46%,rgba(255,255,255,.08) 50%,transparent 54%);background-size:100% 220%;animation:spscan .5s linear infinite;pointer-events:none}
.sp.land .sp-scan{display:none}
@keyframes spscan{from{background-position:0 0}to{background-position:0 -220%}}

/* ---------- saved hearts ---------- */
.tile{position:relative}
.save{position:absolute;top:8px;right:8px;z-index:3;width:36px;height:36px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;
  color:#fff;background:rgba(5,10,20,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:.0;transition:opacity .2s,transform .2s,background .2s}
.tile:hover .save,.save:focus-visible,.save[aria-pressed="true"]{opacity:1}
@media (hover:none){.save{opacity:.85}}
.save svg{width:18px;height:18px}
.save[aria-pressed="true"]{color:var(--pink);background:rgba(5,10,20,.75);box-shadow:inset 0 0 0 1px var(--pink),0 0 18px -4px var(--pink)}
.save[aria-pressed="true"] svg path{fill:currentColor}
.save.pop{animation:pop .4s var(--ease)}
@keyframes pop{50%{transform:scale(1.25)}}
.lb-save[aria-pressed="true"]{color:var(--pink);box-shadow:inset 0 0 0 1px var(--pink),0 0 22px -6px var(--pink)}
.lb-save[aria-pressed="true"] svg path{fill:currentColor}
.toast{position:fixed;left:50%;bottom:max(20px,env(safe-area-inset-bottom));z-index:95;transform:translate(-50%,20px);opacity:0;pointer-events:none;
  padding:10px 18px;border-radius:999px;background:var(--paper);color:var(--night);font-size:14px;font-weight:500;transition:opacity .25s,transform .25s;box-shadow:0 10px 30px -8px rgba(0,0,0,.7)}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- designs page ---------- */
.crumbs{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--fog);margin-bottom:18px}
.crumbs a{color:var(--mist);text-decoration:none}.crumbs a:hover{color:var(--cyan)}
.dz-head{padding-top:calc(68px + clamp(36px,5vw,72px))}
.dz-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 14px}
.dz-search{position:relative;flex:1 1 260px;max-width:440px}
.dz-search svg{position:absolute;left:14px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:var(--fog);pointer-events:none}
.dz-search input{width:100%;height:44px;padding:0 40px 0 42px;border-radius:999px;border:1px solid rgba(168,188,214,.28);background:rgba(11,20,36,.6);color:var(--etch);font:inherit;font-size:15px}
.dz-search input::placeholder{color:var(--fog)}
.dz-search input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(78,228,255,.15)}
.dz-search kbd{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:11px;color:var(--fog);border:1px solid var(--rule);border-radius:5px;padding:1px 6px}
.dz-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;border:0;background:none;color:var(--mist);cursor:pointer;font-size:18px}
.dz-sort{height:44px;padding:0 14px;border-radius:999px;border:1px solid rgba(168,188,214,.28);background:rgba(11,20,36,.6);color:var(--etch);font:inherit;font-size:14px}
.dz-tools .btn{--bh:44px;padding:0 18px;font-size:14px}
.dz-empty{text-align:center;padding:40px 0;color:var(--mist)}
.dz-empty[hidden]{display:none}
.chip[data-k="saved"] svg{width:14px;height:14px}
.chip[data-k="saved"][aria-pressed="true"]{background:var(--pink);border-color:var(--pink);color:var(--night)}

/* phones: smaller chips that wrap, so every theme is visible at once */
@media (max-width:640px){
  .chips-wrap{position:static;margin-bottom:18px;padding:6px 0;box-shadow:none;clip-path:none;background:none}
  .chips{flex-wrap:wrap;overflow:visible;gap:6px;-webkit-mask-image:none;mask-image:none;padding:0}
  .chip{min-height:32px;padding:0 11px;font-size:12.5px;gap:5px}
  .chip span{font-size:10.5px}
  .dz-tools{gap:8px}
  .dz-search{flex-basis:100%;max-width:none}
  .dz-search input{height:42px;font-size:16px}
  .dz-search kbd{display:none}
  .dz-sort,.dz-tools .btn{--bh:38px;height:38px;font-size:13px;padding:0 13px}
  .more-row .btn{--bh:42px;font-size:14px;padding:0 20px}
  .teaser-actions .btn{--bh:44px;font-size:14px;padding:0 18px}
}

/* ---------- home teaser ---------- */
.teaser-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.teaser-grid .tile:nth-child(n+9){display:none}
.teaser-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:clamp(28px,3.6vw,48px)}
.teaser-actions p{margin:0 0 0 auto;color:var(--fog);font-family:var(--mono);font-size:var(--step--1);letter-spacing:.06em}
@media (max-width:900px){.teaser-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.teaser-actions p{margin-left:0;width:100%}}

/* ---------- Light it up ---------- */
.lit{position:relative}
.lit-stage{position:relative;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:var(--dusk);cursor:crosshair;touch-action:pan-y;
  box-shadow:0 0 0 1px rgba(168,188,214,.14),0 40px 90px -30px rgba(0,0,0,.85);user-select:none;-webkit-user-select:none}
.lit-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.lit-hint{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);padding:8px 16px;border-radius:999px;background:rgba(5,10,20,.7);color:var(--etch);
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;pointer-events:none;transition:opacity .5s;white-space:nowrap;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.lit.touched .lit-hint{opacity:0}
.lit-bar{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin-top:18px}
.lit-meter{flex:1 1 220px;display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--mist)}
.lit-meter i{flex:1;height:4px;border-radius:4px;background:rgba(168,188,214,.16);overflow:hidden;position:relative}
.lit-meter i b{position:absolute;inset:0 auto 0 0;width:0;background:var(--spectrum);transition:width .25s}
.lit-bar .btn{--bh:42px;padding:0 18px;font-size:14px}
.lit-done{position:absolute;inset:auto 0 0 0;padding:60px 22px 18px;background:linear-gradient(180deg,rgba(5,10,20,0),rgba(5,10,20,.9));opacity:0;transform:translateY(10px);transition:opacity .6s,transform .6s;pointer-events:none}
.lit.done .lit-done{opacity:1;transform:none}
.lit-done b{display:block;font-family:var(--display);font-weight:400;font-size:var(--step-1);color:#fff}
.lit-done span{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--mist)}
.lit.done .lit-stage{box-shadow:0 0 0 1px rgba(255,255,255,.3),0 0 60px -12px var(--cyan),0 0 90px -20px var(--pink)}
@media (max-width:640px){.lit-hint{font-size:10.5px;bottom:10px;padding:6px 12px}.lit-bar .btn{--bh:38px;font-size:13px;padding:0 14px}}

/* ---------- products: whole card is a link ---------- */
a.prod{text-decoration:none;color:inherit;border-radius:4px}
a.prod:focus-visible{outline-offset:6px}
.prod .go{margin-top:12px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--etch);display:inline-flex;gap:6px;align-items:center}
.prod .go::after{content:"\2192";transition:transform .3s var(--ease)}
a.prod:hover .go::after{transform:translateX(5px)}
a.prod:hover .stage{box-shadow:0 0 0 1px var(--glow),0 0 40px -12px var(--glow)}
a.prod:hover h3{color:#fff}
/* t-shirt */
.tee{position:relative;width:78%;transform:translateY(-2%);transition:transform .5s var(--ease);filter:drop-shadow(0 26px 24px rgba(0,0,0,.6))}
.tee svg{display:block;width:100%;height:auto}
.tee-art{position:absolute;left:28%;top:23%;width:44%;height:auto;aspect-ratio:1/1;object-fit:cover;mix-blend-mode:lighten;
  -webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);mask-image:radial-gradient(closest-side,#000 62%,transparent 100%)}
.prod:hover .tee{transform:translateY(-6%) rotate(-2deg)}

/* ---------- custom portraits ---------- */
.custom{position:relative;background:radial-gradient(50% 50% at 85% 20%,rgba(255,92,176,.08),transparent 70%),radial-gradient(40% 50% at 10% 80%,rgba(78,228,255,.07),transparent 70%)}
.custom-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start}
.custom-copy .big{font-family:var(--display);font-size:var(--step-2);line-height:1.22;color:var(--etch);margin:18px 0 0;text-wrap:balance}
.steps{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:16px;counter-reset:s}
.steps li{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start;color:var(--mist);counter-increment:s}
.steps li::before{content:counter(s);width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:14px;color:var(--night);background:var(--spectrum)}
.steps b{display:block;color:var(--etch);font-weight:500}
.quote-note{margin-top:22px;font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--fog)}
.cform{display:grid;gap:14px;padding:clamp(18px,2.6vw,32px);border-radius:8px;background:rgba(11,20,36,.72);box-shadow:inset 0 0 0 1px var(--rule),0 40px 80px -40px rgba(0,0,0,.8)}
.cform label{display:grid;gap:6px;font-size:14px;color:var(--mist)}
.cform input,.cform textarea,.cform select{width:100%;padding:12px 14px;border-radius:8px;border:1px solid rgba(168,188,214,.26);background:rgba(5,10,20,.7);color:var(--etch);font:inherit;font-size:16px}
.cform textarea{min-height:120px;resize:vertical}
.cform input:focus,.cform textarea:focus,.cform select:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(78,228,255,.14)}
.cform .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cform .btn[disabled]{opacity:.7;cursor:not-allowed;transform:none}
.cform .fine{margin:0;font-size:13px;color:var(--fog)}
.cform .status{margin:0;font-size:14px;min-height:1.4em}
.cform .status.ok{color:var(--lime)}.cform .status.err{color:#ff8a8a}
.cform .count{justify-self:end;font-family:var(--mono);font-size:11px;color:var(--fog);margin-top:-8px}
.custom-ex{margin-top:clamp(36px,5vw,64px)}
.custom-ex h3{font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--fog);margin:0 0 14px}
.ex-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.4vw,18px)}
.ex-row figure{margin:0;min-width:0}
.ex-row figcaption{font-size:13px;color:var(--mist);margin-top:8px;line-height:1.35}
@media (max-width:900px){.custom-grid{grid-template-columns:minmax(0,1fr)}.ex-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.cform .row2{grid-template-columns:1fr}}

/* ---------- media page ---------- */
.media-head{padding-top:calc(68px + clamp(36px,5vw,72px))}
.media-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.media-grid figure{margin:0;min-width:0}
.media-grid .plate-no{display:block;margin-top:6px}
@media (max-width:900px){.media-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:640px){.media-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.loop-frame .reel-play{display:inline-flex}

/* ---------- Halloween trimmings (only while the season is on) ---------- */
.deco{display:none}
html.season-halloween .deco{display:block;position:absolute;pointer-events:none;z-index:2}
.deco svg{display:block;width:100%;height:auto}
.deco-web{top:0;right:0;width:clamp(56px,7vw,96px);opacity:.42}
.deco-web.l{right:auto;left:0;transform:scaleX(-1)}
.deco-spider{top:0;width:22px;transform-origin:50% 0;animation:dangle 5.5s ease-in-out infinite}
.deco-spider .thread{width:1px;margin:0 auto;background:linear-gradient(rgba(223,229,238,.05),rgba(223,229,238,.45))}
.deco-spider.s2{animation-duration:7s;animation-delay:-2s}
@keyframes dangle{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(4deg) translateY(10px)}}
.deco-pumpkin{width:30px;bottom:-4px;filter:drop-shadow(0 0 10px rgba(255,138,31,.55))}
.deco-pumpkin.sm{width:22px}
.deco-pumpkin svg .face{animation:flicker 3.2s steps(1) infinite}
@keyframes flicker{0%,100%{opacity:1}43%{opacity:.55}45%{opacity:1}78%{opacity:.7}80%{opacity:1}}
.deco-bat{width:26px;color:#05070d;filter:drop-shadow(0 0 6px rgba(166,107,255,.5))}
html.season-halloween .mark-dot{position:relative}
.has-deco{position:relative}
@media (max-width:640px){.deco-web{width:52px;opacity:.35}.deco-spider{width:16px}.deco-pumpkin{width:22px}.deco-pumpkin.sm{width:17px}}
@media (prefers-reduced-motion: reduce){.deco-spider,.deco-pumpkin svg .face,.sp-scan{animation:none!important}}

@media (max-width:1320px) and (min-width:1081px){.nav{gap:18px}}
.lit-hint .h-t{display:none}
@media (hover:none){.lit-hint .h-m{display:none}.lit-hint .h-t{display:inline}}
.chip[data-k="saved"]{--g:linear-gradient(90deg,#ff5cb0,#ffa0d4);--g1:#ff5cb0;--g2:#ffa0d4}
.chip[data-k="saved"][aria-pressed="true"]{background:var(--g) border-box}
.crumbs a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(147,161,183,.5)}
.cform .fine a{text-decoration:underline}