/* Tiller Tattoos - ink & pixels */
@font-face{font-family:"Erica One";src:url("../fonts/ericaone.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Big Shoulders";src:url("../fonts/bigshoulders-bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Silkscreen";src:url("../fonts/silkscreen.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Signature";src:url("../fonts/signature.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Work Sans";src:url("../fonts/worksans.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Work Sans";src:url("../fonts/worksans-bold.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  --ink:#09070a; --ink-2:#130d12; --ink-3:#1d141b; --blood:#3a0b12;
  --bone:#f3eadb; --bone-dim:#c9bfb0; --mute:#9d9097;
  --pink:#ff2e88; --pink-deep:#c3125f; --cyan:#33e4ff; --gold:#f7c948; --purple:#8b5cf6;
  --line:rgba(243,234,219,.14);
  --radius:6px;
  --wrap:1200px;
  --display:"Erica One","Arial Black",Impact,sans-serif;
  --cond:"Big Shoulders","Arial Narrow",Impact,sans-serif;
  --pixel:"Silkscreen","Courier New",monospace;
  --script:"Signature","Brush Script MT",cursive;
  --body:"Work Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ink);color:var(--bone);font-family:var(--body);font-size:1.0625rem;line-height:1.65;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--pink)}
h1,h2,h3{margin:0 0 .5em;line-height:1.02;font-weight:400}
h2{font-family:var(--display);font-size:clamp(2.2rem,5.4vw,4.2rem);letter-spacing:.01em}
h3{font-family:var(--cond);font-weight:700;font-size:1.65rem;letter-spacing:.03em;text-transform:uppercase}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:var(--ink);padding:.6em 1em;z-index:999;font-weight:700}
.skip:focus{left:1rem;top:1rem}
.wrap{width:min(var(--wrap),100% - 2rem);margin-inline:auto}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* grain + glow background */
body::before{content:"";position:fixed;inset:-50%;z-index:-1;pointer-events:none;
  background:
   radial-gradient(40% 35% at 15% 20%,rgba(255,46,136,.16),transparent 70%),
   radial-gradient(35% 30% at 85% 30%,rgba(51,228,255,.10),transparent 70%),
   radial-gradient(45% 40% at 50% 90%,rgba(139,92,246,.12),transparent 70%);
  animation:drift 28s ease-in-out infinite alternate}
body::after{content:"";position:fixed;inset:0;z-index:1000;pointer-events:none;opacity:.09;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes drift{to{transform:translate(6%,-4%) rotate(8deg)}}

/* kicker / labels */
.kicker{font-family:var(--pixel);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;gap:.6em;margin-bottom:1rem}
.kicker::before{content:"";width:10px;height:10px;background:var(--pink);box-shadow:12px 0 0 var(--cyan),24px 0 0 var(--gold);margin-right:24px;animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:.25}}
.lede{font-size:1.2rem;color:var(--bone-dim);max-width:60ch}

/* buttons */
.btn{--c:var(--pink);display:inline-flex;align-items:center;gap:.6em;font-family:var(--pixel);font-size:.95rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  color:var(--ink);background:var(--c);padding:1em 1.5em;border:0;cursor:pointer;position:relative;
  box-shadow:0 0 0 3px var(--ink),0 0 0 5px var(--c),6px 6px 0 5px var(--ink),6px 6px 0 7px var(--c);
  transition:transform .15s,box-shadow .15s}
.btn:hover{color:var(--ink);transform:translate(3px,3px);box-shadow:0 0 0 3px var(--ink),0 0 0 5px var(--c),3px 3px 0 5px var(--ink),3px 3px 0 7px var(--c)}
.btn:active{transform:translate(6px,6px);box-shadow:0 0 0 3px var(--ink),0 0 0 5px var(--c)}
.btn--ghost{--c:var(--cyan)}
.btn--gold{--c:var(--gold)}
.btn svg{width:1.1em;height:1.1em}
.btns{display:flex;flex-wrap:wrap;gap:1.6rem 1.8rem;margin-top:2rem}

/* header */
.top{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line)}
.top::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(9,7,10,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:74px}
.logo{display:flex;align-items:baseline;gap:.4rem;text-decoration:none;color:var(--bone)}
.logo b{font-family:var(--display);font-weight:400;font-size:1.9rem;letter-spacing:.02em;text-shadow:1px 1px 0 var(--pink),2px 2px 0 var(--cyan)}
.logo span{font-family:var(--pixel);font-size:.7rem;color:var(--gold);letter-spacing:.2em}
.logo:hover{color:var(--bone)}
.nav{display:flex;align-items:center;gap:1.6rem}
.nav a{font-family:var(--cond);font-weight:700;font-size:1.2rem;letter-spacing:.08em;text-transform:uppercase;color:var(--bone);text-decoration:none;position:relative;padding:.3em 0}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--pink);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{color:var(--pink)}
.nav .btn{font-size:.8rem;padding:.8em 1.1em;margin-left:.6rem;color:var(--ink)}
.nav .btn::after{display:none}
.burger{display:none;background:none;border:2px solid var(--bone);color:var(--bone);width:48px;height:44px;cursor:pointer;padding:0}
.burger i{display:block;width:22px;height:3px;background:currentColor;margin:4px auto;transition:transform .25s,opacity .25s}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:920px){
  .burger{display:block}
  .nav{position:fixed;inset:74px 0 0 0;z-index:60;background:var(--ink);flex-direction:column;align-items:flex-start;padding:2rem 1.5rem;gap:.4rem;
    transform:translateX(100%);transition:transform .3s;visibility:hidden;overflow-y:auto}
  .nav.open{transform:none;visibility:visible}
  .nav a{font-size:2.2rem;font-family:var(--display);font-weight:400;letter-spacing:.02em;text-transform:none}
  .nav .btn{margin:1.5rem 0 0 .4rem;font-size:1rem;font-family:var(--pixel)}
}

/* hero */
.hero{position:relative;padding:clamp(2.5rem,6vw,5.5rem) 0 clamp(3rem,7vw,6rem);overflow:hidden;isolation:isolate}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,4vw,4rem);align-items:center}
.hero .wrap>*{min-width:0}
.title{font-family:var(--display);font-size:clamp(3.4rem,15.5vw,9.6rem);line-height:.82;margin:0 0 .15em;letter-spacing:-.01em;position:relative;color:var(--bone)}
.title .t-word{display:block;white-space:nowrap;position:relative;text-shadow:.04em .04em 0 var(--pink),.08em .08em 0 var(--cyan)}
.title .t-word::before,.title .t-word::after{content:attr(data-text);position:absolute;inset:0;pointer-events:none;opacity:0}
.title.glitch .t-word::before{opacity:.85;color:var(--cyan);text-shadow:none;clip-path:inset(15% 0 55% 0);transform:translate(-.04em,0);animation:gl1 .35s steps(2) 1}
.title.glitch .t-word::after{opacity:.85;color:var(--pink);text-shadow:none;clip-path:inset(60% 0 10% 0);transform:translate(.05em,0);animation:gl2 .35s steps(2) 1}
@keyframes gl1{50%{clip-path:inset(40% 0 30% 0);transform:translate(.03em,0)}}
@keyframes gl2{50%{clip-path:inset(20% 0 65% 0);transform:translate(-.04em,0)}}
.title .t-sub{display:block;font-family:var(--script);font-size:.36em;color:var(--gold);line-height:1;margin:.12em 0 0 .1em;transform:rotate(-4deg);text-shadow:none}
.title .ch{display:inline-block;opacity:0;transform:translateY(.4em) scale(1.4) rotate(-8deg);filter:blur(6px);animation:stamp .55s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes stamp{to{opacity:1;transform:none;filter:none}}
.hero-art{position:relative;justify-self:center;width:min(100%,520px)}
.polaroid{position:relative;background:var(--bone);padding:14px 14px 56px;transform:rotate(3deg);box-shadow:0 30px 60px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.4);animation:float 7s ease-in-out infinite}
.polaroid img{width:100%;aspect-ratio:1/1;object-fit:cover;filter:contrast(1.05) saturate(1.1)}
.polaroid figcaption{position:absolute;left:0;right:0;bottom:12px;text-align:center;font-family:var(--script);font-size:1.9rem;color:var(--ink)}
.tape{position:absolute;width:120px;height:34px;background:rgba(247,201,72,.75);top:-14px;left:50%;transform:translateX(-50%) rotate(-6deg);mix-blend-mode:normal;box-shadow:0 2px 4px rgba(0,0,0,.25)}
.tape::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 6px,rgba(0,0,0,.05) 6px 7px)}
@keyframes float{50%{transform:rotate(1.5deg) translateY(-10px)}}
.sticker{position:absolute;z-index:2;filter:drop-shadow(3px 4px 0 rgba(0,0,0,.6))}
.sticker--heart{width:92px;left:-36px;bottom:40px;animation:bob 3s ease-in-out infinite}
.sticker--star{width:76px;right:-22px;top:18%;animation:spin 14s linear infinite}
.sticker--badge{width:128px;right:-30px;bottom:-26px;animation:bob 4s ease-in-out infinite reverse}
@keyframes bob{50%{transform:translateY(-12px) rotate(-6deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
.hero p.lede{margin-top:1rem}
.hero-meta{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;margin-top:1.8rem;font-family:var(--pixel);font-size:.75rem;letter-spacing:.1em;color:var(--mute);text-transform:uppercase}
.hero-meta span::before{content:"\25B6\00A0";color:var(--pink)}
.doodles{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.55}
.doodles svg{position:absolute;stroke:var(--bone);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.draw path,.draw circle,.draw polyline,.draw line{stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);animation:line 2.6s ease forwards}
@keyframes line{to{stroke-dashoffset:0}}
@media (max-width:1060px) and (min-width:861px){.title{font-size:clamp(3.4rem,13.5vw,9.6rem)}}
@media (max-width:860px){
  .title{font-size:clamp(3.4rem,25vw,9.6rem)}
  .doodles{opacity:.18}
  .hero .wrap{grid-template-columns:1fr}
  .hero-art{width:min(86%,420px);margin-top:1rem}
  .sticker--heart{width:70px;left:-18px}
  .sticker--badge{width:100px;right:-12px}
  .sticker--star{right:-8px;width:60px}
}

/* ticker */
.ticker{background:var(--pink);color:var(--ink);transform:rotate(-2deg);margin:0 -2vw;padding:.9rem 0;overflow:hidden;position:relative;z-index:3;border-block:4px solid var(--ink);box-shadow:0 10px 0 var(--cyan)}
.ticker__row{display:flex;width:max-content;animation:tick 32s linear infinite}
.ticker__row span{font-family:var(--display);font-size:clamp(1.4rem,3vw,2.2rem);white-space:nowrap;padding-right:2.2rem;display:flex;align-items:center;gap:2.2rem}
.ticker__row span::after{content:"\2605";font-size:.8em;color:var(--ink)}
.ticker:hover .ticker__row{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}
.ticker--cyan{background:var(--cyan);box-shadow:0 10px 0 var(--pink);transform:rotate(1.5deg)}

/* sections */
.sec{padding:clamp(4rem,9vw,7.5rem) 0;position:relative}
.sec--dark{background:linear-gradient(180deg,transparent,var(--ink-2) 12%,var(--ink-2) 88%,transparent)}
.sec--blood{background:radial-gradient(80% 70% at 50% 0%,var(--blood),transparent 70%)}
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:1rem 2rem;margin-bottom:2.5rem}
.sec-head h2{margin:0}
.sec-head p{max-width:48ch;color:var(--bone-dim);margin:0}
.outline{color:transparent;-webkit-text-stroke:2px var(--bone)}
.pink{color:var(--pink)}.cyan{color:var(--cyan)}.gold{color:var(--gold)}

/* flash cards */
.flash-rail{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(220px,26vw,300px);gap:1.4rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:1rem .25rem 2rem;scrollbar-color:var(--pink) var(--ink-3)}
.flash-rail>*{scroll-snap-align:start}
.flash-rail{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
.rail-hint{font-family:var(--pixel);font-size:.75rem;letter-spacing:.12em;color:var(--cyan);text-transform:uppercase;margin:-.5rem 0 0;animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{50%{transform:translateX(8px)}}
.flash-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.6rem}
.flash-grid>*{min-width:0}
.card{position:relative;display:block;text-decoration:none;color:var(--bone);background:var(--ink-3);border:2px solid var(--line);border-radius:var(--radius);overflow:hidden;
  transform-style:preserve-3d;transition:transform .2s ease,border-color .2s,box-shadow .2s;--rx:0deg;--ry:0deg;--mx:50%;--my:50%;transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry))}
.card:hover{border-color:var(--pink);box-shadow:0 18px 40px rgba(255,46,136,.22);color:var(--bone)}
.card__img{position:relative;aspect-ratio:3/4;overflow:hidden;background:#221a1f}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .card__img img{transform:scale(1.05)}
.card__img::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s;mix-blend-mode:color-dodge;
  background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.45),transparent 40%),linear-gradient(115deg,transparent 30%,rgba(51,228,255,.35) 45%,rgba(255,46,136,.35) 55%,transparent 70%)}
.card:hover .card__img::after{opacity:1}
.card__body{padding:.9rem 1rem 1rem;display:flex;justify-content:space-between;align-items:baseline;gap:.5rem}
.card__body h3{font-size:1.35rem;margin:0}
.card__price{font-family:var(--pixel);font-size:.72rem;color:var(--gold);white-space:nowrap}
.card__tag{position:absolute;top:10px;left:10px;z-index:2;font-family:var(--pixel);font-size:.65rem;letter-spacing:.08em;background:var(--ink);color:var(--cyan);padding:.35em .6em;border:1px solid var(--cyan)}
.card__tag--creature{color:var(--gold);border-color:var(--gold)}.card__tag--retro{color:var(--pink);border-color:var(--pink)}
.filters{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:2rem}
.filters button{font-family:var(--pixel);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;background:transparent;color:var(--bone);border:2px solid var(--line);padding:.7em 1em;cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--pink);color:var(--ink);border-color:var(--pink)}
.filters button:hover{border-color:var(--pink)}

/* styles */
.styles{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.styles>*{min-width:0}
.style{background:var(--ink-3);border:2px solid var(--line);padding:1.6rem 1.4rem 1.8rem;position:relative;overflow:hidden;transition:transform .25s,border-color .25s}
.style:hover{transform:translateY(-6px);border-color:var(--cyan)}
.style svg{width:58px;height:58px;margin-bottom:1rem}
.style p{color:var(--bone-dim);margin:0;font-size:1rem}
.style:nth-child(2):hover{border-color:var(--pink)}.style:nth-child(3):hover{border-color:var(--gold)}.style:nth-child(4):hover{border-color:var(--purple)}
@media (max-width:1000px){.styles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.styles{grid-template-columns:1fr}}

/* about split */
.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.split>*{min-width:0}
.split--rev{grid-template-columns:1.1fr .9fr}
.frame{position:relative;max-width:460px}
.frame img{width:100%;border:3px solid var(--bone);transform:rotate(-2deg);box-shadow:14px 14px 0 var(--pink)}
.frame::before{content:"";position:absolute;inset:-18px 18px 18px -18px;border:2px dashed var(--cyan);z-index:-1;transform:rotate(-2deg)}
.sig{font-family:var(--script);font-size:2.6rem;color:var(--gold);transform:rotate(-4deg);display:inline-block;margin-top:.4rem}
@media (max-width:860px){.split,.split--rev{grid-template-columns:1fr}.frame{margin:0 auto 1rem;width:min(88%,420px)}}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;counter-reset:lvl}
.steps>*{min-width:0}
.step{border:2px solid var(--line);padding:1.5rem;background:rgba(19,13,18,.7);position:relative}
.step::before{counter-increment:lvl;content:"LVL 0" counter(lvl);font-family:var(--pixel);font-size:.8rem;color:var(--cyan);display:block;margin-bottom:.8rem}
.step .bar{height:10px;background:var(--ink);border:2px solid var(--bone);margin-bottom:1.2rem;position:relative;overflow:hidden}
.step .bar i{position:absolute;inset:0;background:repeating-linear-gradient(90deg,var(--pink) 0 10px,transparent 10px 13px);transform:scaleX(0);transform-origin:left;transition:transform 1.4s steps(12)}
.step.in .bar i{transform:scaleX(var(--p,.25))}
.step p{color:var(--bone-dim);font-size:1rem;margin:0}
@media (max-width:1000px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

/* cities */
.cities{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem;padding:0;list-style:none}
.cities li{font-family:var(--cond);font-weight:700;letter-spacing:.06em;text-transform:uppercase;border:2px solid var(--line);padding:.35em .8em;font-size:1.05rem;transition:all .2s}
.cities li:hover{border-color:var(--gold);color:var(--gold);transform:rotate(-2deg)}
.cities li.hl{border-color:var(--pink);color:var(--pink)}
.where{border:2px solid var(--bone);padding:clamp(1.5rem,4vw,3rem);position:relative;background:var(--ink-2);box-shadow:10px 10px 0 var(--gold)}
.where dl{display:grid;grid-template-columns:auto 1fr;gap:.6rem 1.2rem;margin:0 0 1.2rem}
.where dt{font-family:var(--pixel);font-size:.75rem;color:var(--gold);letter-spacing:.1em;padding-top:.3em}
.where dd{margin:0}

/* faq */
.faq-group{margin-bottom:2.8rem}
.faq-group>h2{font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:1rem}
details.qa{border-bottom:2px solid var(--line)}
details.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1.15rem 0;font-family:var(--cond);font-weight:700;font-size:clamp(1.25rem,2.4vw,1.55rem);letter-spacing:.02em}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary::after{content:"+";font-family:var(--pixel);font-size:1.4rem;color:var(--pink);transition:transform .25s;flex:none}
details.qa[open] summary::after{transform:rotate(45deg);color:var(--cyan)}
details.qa summary:hover{color:var(--pink)}
details.qa .a{padding:0 0 1.3rem;color:var(--bone-dim);max-width:75ch}
details.qa[open] .a{animation:fadein .35s ease}
@keyframes fadein{from{opacity:0;transform:translateY(-6px)}}
.faq-toc{display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 3rem;padding:0;list-style:none}
.faq-toc a{display:inline-block;font-family:var(--pixel);font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--bone);text-decoration:none;border:2px solid var(--line);padding:.6em .9em}
.faq-toc a:hover{border-color:var(--cyan);color:var(--cyan)}

/* page hero (inner) */
.phero{padding:clamp(3rem,7vw,6rem) 0 clamp(2rem,4vw,3rem);position:relative;overflow:hidden;isolation:isolate}
.phero h1{font-family:var(--display);font-size:clamp(3rem,9vw,7rem);line-height:.9;text-shadow:.04em .04em 0 var(--pink),.08em .08em 0 var(--cyan);margin-bottom:.3em}
.phero .wrap{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center}
.phero .wrap>*{min-width:0}
.phero-img{width:clamp(160px,22vw,280px);transform:rotate(4deg);border:3px solid var(--bone);box-shadow:10px 10px 0 var(--pink)}
@media (max-width:700px){.phero .wrap{grid-template-columns:1fr}.phero-img{width:180px}}
.crumbs{font-family:var(--pixel);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:1.5rem}
.crumbs a{color:var(--mute)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5em}
.crumbs li+li::before{content:"/\00A0";color:var(--pink)}

/* prose */
.prose{max-width:75ch}
.prose h2{font-size:clamp(1.8rem,4vw,2.6rem);margin-top:2.2rem}
.prose h3{margin-top:1.6rem}
.prose ul{padding-left:1.2em}
.prose li{margin-bottom:.5em}
.prose li::marker{color:var(--pink)}
.care{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.care>*{min-width:0}
.care section{border:2px solid var(--line);padding:1.6rem;background:var(--ink-2)}
.care h2{font-size:1.9rem}
.care ul{padding-left:1.1em;margin:0}
.care li{margin-bottom:.6em;color:var(--bone-dim)}
.care li::marker{content:"\2665\00A0";color:var(--pink)}
@media (max-width:900px){.care{grid-template-columns:1fr}}
.note{border-left:4px solid var(--gold);padding:1rem 1.2rem;background:rgba(247,201,72,.07);color:var(--bone-dim);margin:2rem 0}

/* big cta */
.bigcta{text-align:center;padding:clamp(5rem,10vw,9rem) 0;position:relative;overflow:hidden;isolation:isolate}
.bigcta h2{font-size:clamp(3rem,10vw,8rem);line-height:.88;text-shadow:.04em .04em 0 var(--pink),.08em .08em 0 var(--cyan)}
.bigcta .kicker{justify-content:center}
.bigcta .btns{justify-content:center}
.insert{font-family:var(--pixel);color:var(--gold);letter-spacing:.2em;animation:blink 1s steps(2) infinite;display:block;margin-bottom:1rem}

/* footer */
.foot{border-top:1px solid var(--line);padding:4rem 0 2rem;background:var(--ink);position:relative}
.foot::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px;background:repeating-linear-gradient(90deg,var(--pink) 0 12px,var(--cyan) 12px 24px,var(--gold) 24px 36px,transparent 36px 48px)}
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem}
.foot__grid>*{min-width:0}
.foot h2{font-family:var(--pixel);font-size:.8rem;letter-spacing:.14em;color:var(--gold);text-transform:uppercase;margin-bottom:1rem}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin-bottom:.5rem}
.foot a{color:var(--bone)}
.foot a:hover{color:var(--pink)}
.foot .logo b{font-size:2.4rem}
.foot small{color:var(--mute);font-size:.88rem}
.foot__bottom{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;font-size:.88rem;color:var(--mute)}
.foot__bottom a{color:var(--mute)}
.social{display:flex;gap:.8rem;margin-top:1rem}
.social a{width:44px;height:44px;display:grid;place-items:center;border:2px solid var(--line);color:var(--bone)}
.social a:hover{border-color:var(--pink)}
.social svg{width:20px;height:20px;fill:currentColor}
@media (max-width:860px){.foot__grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot__grid{grid-template-columns:1fr}}

/* reveal */
.rv{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
.rv-wipe{clip-path:inset(0 100% 0 0);transition:clip-path 1s cubic-bezier(.7,0,.2,1)}
.rv-wipe.in{clip-path:inset(0 0 0 0)}
.no-js .rv{opacity:1;transform:none}.no-js .rv-wipe{clip-path:none}

/* lightbox */
.lb{position:fixed;inset:0;z-index:200;background:rgba(9,7,10,.97);display:none;padding:4.25rem 4.5rem 1.25rem}
.lb.open{display:grid;grid-template-rows:minmax(0,1fr) auto;justify-items:center;align-items:center}
.lb figure{display:contents}
.lb img{min-height:0;max-height:100%;max-width:min(900px,100%);width:auto;height:auto;border:3px solid var(--bone)}
.lb figcaption{margin-top:.9rem;padding-bottom:14px;text-align:center;font-family:var(--cond);font-weight:700;font-size:1.6rem;line-height:1.1;letter-spacing:.04em}
.lb figcaption small{display:block;font-family:var(--pixel);font-size:.75rem;color:var(--gold);letter-spacing:.08em;margin:.35rem 0 .9rem}
.lb figcaption .btn{font-size:.8rem;padding:.85em 1.3em}
.lb button.x,.lb button.nv{position:absolute;background:var(--ink);color:var(--bone);border:2px solid var(--bone);width:48px;height:48px;font-family:var(--pixel);font-size:1.2rem;cursor:pointer;z-index:2}
.lb button.x{top:1rem;right:1rem}
.lb button.nv{top:50%;transform:translateY(-50%)}
.lb .prev{left:1rem}.lb .next{right:1rem}
.lb button:hover{border-color:var(--pink);color:var(--pink)}
@media (max-width:640px){
  .lb{padding:4.5rem 1rem 1rem}
  .lb button.nv{top:1rem;transform:none}
  .lb .prev{left:1rem}.lb .next{left:4.5rem;right:auto}
  .lb figcaption{font-size:1.35rem}
}

/* cursor ink trail */
#ink{position:fixed;inset:0;pointer-events:none;z-index:999}
.burst{position:fixed;pointer-events:none;z-index:1001;width:12px;height:12px;image-rendering:pixelated}

/* 404 */
.lost{font-family:var(--display);font-size:clamp(7rem,26vw,18rem);line-height:.8;color:transparent;-webkit-text-stroke:3px var(--pink);display:block;animation:flick 3s infinite}
@keyframes flick{0%,19%,21%,60%,62%,100%{opacity:1}20%,61%{opacity:.3}}
.links-list{columns:2;padding-left:1.1em}
@media (max-width:520px){.links-list{columns:1}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .title .ch{opacity:1;transform:none;filter:none}
  .ticker__row{animation:none}
  .rv{opacity:1;transform:none}.rv-wipe{clip-path:none}
}
