/* porschas — built on the Charlie style reference, re-keyed to the logo violet */
@font-face{font-family:"Anton";src:url(/assets/fonts/anton.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Hanken";src:url(/assets/fonts/hanken-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Hanken";src:url(/assets/fonts/hanken-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Cormorant SC";src:url(/assets/fonts/cormorant-sc.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  --void:#000000;
  --bone:#ffffff;
  --ash:#838383;
  --violet:#cb6ce6;           /* sampled from the porschas logo */
  --display:"Anton","Impact","Arial Narrow Bold",sans-serif;
  --body:"Hanken","Helvetica Neue",Arial,sans-serif;
  --credit:"Cormorant SC","Cormorant Garamond",Georgia,serif;
  --fs-body:clamp(19px,1.05vw + 13px,20px);
  --fs-sub:clamp(28px,2.6vw,40px);
  --fs-display:clamp(92px,17vw,260px);
  --fs-display-xl:clamp(112px,24vw,380px);
  --gap-section:59px;
  --gap-el:15px;
  --pad:clamp(16px,2.2vw,30px);
  --pill:100px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--void);color:var(--bone);font:400 var(--fs-body)/1.32 var(--body);
  font-feature-settings:"calt","liga","ss01","ss02";overflow-x:hidden;
  padding-bottom:env(safe-area-inset-bottom,0px)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--bone);outline-offset:3px}
.on-violet :focus-visible{outline-color:var(--void)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--pad);top:-60px;z-index:50;background:var(--bone);color:var(--void);padding:7px 20px;border-radius:var(--pill);text-decoration:none}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 10px)}

/* ---------- header ---------- */
.site-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--gap-el);
  padding:calc(env(safe-area-inset-top,0px) + 22px) var(--pad) 22px}
.brand img{height:30px;width:auto}
.nav{display:flex;gap:var(--gap-el);flex-wrap:wrap;justify-content:center}
.head-end{justify-self:end}
.pill{display:inline-flex;align-items:center;gap:0;border:1px solid var(--bone);border-radius:var(--pill);
  padding:7px 20px;font-size:19px;line-height:1.25;text-decoration:none;background:transparent;cursor:pointer;white-space:nowrap}
.pill:hover{background:var(--bone);color:var(--void)}
.pill[aria-current="page"],.pill.is-on{background:var(--bone);color:var(--void)}
.pill.solid{background:var(--bone);color:var(--void)}
.pill.solid:hover{background:var(--violet);border-color:var(--violet)}
.pill[disabled]{opacity:.45;cursor:not-allowed}
.on-violet .pill{border-color:var(--void);color:var(--void)}
.on-violet .pill:hover{background:var(--void);color:var(--violet)}
@media (max-width:760px){
  .site-head{grid-template-columns:1fr auto;row-gap:18px}
  .nav{grid-column:1/-1;grid-row:2;justify-content:flex-start}
  .brand img{height:24px}
  .pill{font-size:17px;padding:7px 16px}
}

/* ---------- display type ---------- */
.display{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:var(--fs-display);
  line-height:.8;letter-spacing:-.02em;margin:0;white-space:nowrap}
.display-xl{font-size:var(--fs-display-xl);letter-spacing:-.03em;line-height:.78}
.bleed{margin-left:-.04em}
.credit{font-family:var(--credit);font-size:18px;letter-spacing:.05em;line-height:1.3;margin:0}
.caption{font-weight:700;text-transform:uppercase;line-height:1.25;font-size:19px;margin:0}
.muted{color:var(--ash);font-size:16px}
.sub{font-size:var(--fs-sub);font-weight:700;line-height:1.08;margin:0}
.prose{max-width:34ch;font-size:var(--fs-sub);line-height:1.12;margin:0}
.prose-sm{max-width:62ch}
.prose-sm p{margin:0 0 1em}

/* ---------- violet slab ---------- */
.slab{background:var(--violet);color:var(--void);overflow:hidden;position:relative}
.hero{min-height:calc(100svh - 150px);display:flex;flex-direction:column;justify-content:flex-end;
  padding:50px 0 var(--pad)}
.hero .display{padding-left:0}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;padding:30px var(--pad) 0;flex-wrap:wrap}
.star{position:absolute;right:var(--pad);top:var(--pad);width:clamp(70px,11vw,170px);height:auto;color:var(--void)}
@media (prefers-reduced-motion:no-preference){
  .star{animation:spin 2.4s cubic-bezier(.2,.7,.1,1) both}
  @keyframes spin{from{transform:rotate(-270deg) scale(.4);opacity:0}to{transform:none;opacity:1}}
}

/* ---------- sections ---------- */
.section{padding:var(--gap-section) var(--pad)}
.intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px;align-items:end}
@media (max-width:760px){.intro{grid-template-columns:1fr}}

/* ---------- doors (home) ---------- */
.doors{border-top:1px solid var(--bone)}
.door{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;text-decoration:none;
  border-bottom:1px solid var(--bone);padding:24px var(--pad) 14px;overflow:hidden}
.door .display{font-size:var(--fs-display-xl);transition:transform .5s cubic-bezier(.2,.7,.1,1)}
.door .caption{text-align:right;max-width:18ch;padding-bottom:1vw}
.door:hover,.door:focus-visible{background:var(--violet);color:var(--void)}
.door:hover .display{transform:translateX(2vw)}
@media (max-width:760px){.door{flex-direction:column;align-items:flex-start}.door .caption{text-align:left}}
.drift-img{position:fixed;left:0;top:0;width:clamp(180px,20vw,300px);aspect-ratio:1;object-fit:cover;
  pointer-events:none;z-index:40;opacity:0;transition:opacity .2s}
.drift-img.show{opacity:1}

/* ---------- image wall ---------- */
.wall{display:grid;grid-template-columns:repeat(4,1fr)}
.wall img{width:100%;aspect-ratio:1;object-fit:cover}
@media (max-width:760px){.wall{grid-template-columns:repeat(2,1fr)}}

/* ---------- studio drift field ---------- */
.field{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap-el);row-gap:clamp(30px,6vw,110px);
  padding:var(--gap-section) var(--pad) calc(var(--gap-section)*2)}
.piece{grid-column:var(--c) / span var(--s);margin:0;align-self:start;transform:translate3d(0,var(--y,0),0);will-change:transform}
.piece button{all:unset;display:block;cursor:zoom-in;width:100%}
.piece button:focus-visible{outline:2px solid var(--bone);outline-offset:4px}
.piece img{width:100%;aspect-ratio:1;object-fit:cover;background:#111}
.piece figcaption{margin-top:7px}
@media (max-width:760px){
  .field{grid-template-columns:repeat(6,1fr)}
  .piece{grid-column:var(--cm) / span var(--sm)}
}

/* ---------- lightbox / dialogs ---------- */
dialog{border:0;padding:0;background:var(--void);color:var(--bone);max-width:none;max-height:none}
dialog::backdrop{background:rgba(0,0,0,.92)}
.lightbox{width:100vw;height:100svh;display:none;place-items:center}
.lightbox[open]{display:grid}
.lightbox img{max-width:min(92vw,92svh);max-height:86svh;object-fit:contain}
.lb-bar{position:fixed;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 18px);display:flex;justify-content:center;gap:var(--gap-el)}
.lb-close{position:fixed;top:calc(env(safe-area-inset-top,0px) + 18px);right:var(--pad)}

/* ---------- forms ---------- */
.form{display:grid;gap:20px;max-width:720px}
.field-row{display:grid;gap:7px}
.form label{font-weight:700}
.form input,.form textarea{font:inherit;color:var(--bone);background:transparent;border:0;border-bottom:1px solid var(--bone);
  padding:10px 0;border-radius:0}
.form textarea{min-height:140px;resize:vertical}
.form input:focus-visible,.form textarea:focus-visible{outline:none;border-bottom-width:3px}
.form [aria-invalid="true"]{border-bottom-color:var(--violet)}
.err{color:var(--violet);font-size:16px;min-height:1em}
.hp{position:absolute;left:-9999px}
.status{min-height:1.4em}

/* ---------- shop ---------- */
.filters{display:flex;gap:var(--gap-el);flex-wrap:wrap;padding:0 var(--pad) 30px}
.grid{display:grid;grid-template-columns:repeat(3,1fr)}
@media (max-width:1000px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:340px){.grid{grid-template-columns:1fr}}
@media (max-width:560px){.product .meta{flex-direction:column;gap:2px;font-size:17px}}
.product{all:unset;cursor:pointer;display:block;position:relative;width:100%;box-sizing:border-box}
.product .art{aspect-ratio:4/5;display:grid;place-items:center;overflow:hidden}
.product .art svg{width:72%;height:auto;transition:transform .5s cubic-bezier(.2,.7,.1,1)}
.product:hover .art svg,.product:focus-visible .art svg{transform:rotate(-6deg) scale(1.05)}
.product:focus-visible{outline:2px solid var(--bone);outline-offset:-6px}
.product .meta{display:flex;justify-content:space-between;gap:12px;padding:14px var(--pad) 30px}
.product .meta span:last-child{white-space:nowrap}
.bg-bone{background:var(--bone);color:var(--void)}
.bg-void{background:var(--void);color:var(--bone)}
.bg-violet{background:var(--violet);color:var(--void)}
.bg-ash{background:#1a1a1a;color:var(--bone)}

.pdialog{width:min(1100px,100vw);max-height:100svh;overflow:auto}
.pdialog[open]{display:grid;grid-template-columns:1fr 1fr}
@media (max-width:760px){.pdialog[open]{grid-template-columns:1fr}}
.pdialog .art{aspect-ratio:1;display:grid;place-items:center}
.pdialog .art svg{width:70%}
.pbody{padding:30px var(--pad);display:flex;flex-direction:column;gap:20px}
.pbody .sub{font-size:clamp(28px,3vw,40px)}
.sizes{display:flex;gap:10px;flex-wrap:wrap;border:0;margin:0;padding:0}
.sizes legend{font-weight:700;margin-bottom:10px}
.sizes input{position:absolute;opacity:0}
.sizes input:checked + span{background:var(--bone);color:var(--void)}
.sizes input:focus-visible + span{outline:2px solid var(--bone);outline-offset:3px}
.qty{display:flex;align-items:center;gap:12px}
.qty output{min-width:2ch;text-align:center}
.x{position:absolute;top:14px;right:14px}

.bag{margin:0 0 0 auto;width:min(480px,100vw);height:100svh;padding:calc(env(safe-area-inset-top,0px) + 30px) var(--pad) calc(env(safe-area-inset-bottom,0px) + 30px);flex-direction:column;gap:20px;border-left:1px solid var(--bone)}
.bag[open]{display:flex}
.bag ul{list-style:none;margin:0;padding:0;overflow:auto;flex:1}
.bag li{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid #333}
.bag li .mini{width:64px;height:64px;display:grid;place-items:center}
.bag li .mini svg{width:80%}
.linkbtn{background:none;border:0;padding:0;text-decoration:underline;cursor:pointer;color:var(--ash);font-size:16px}
.total{display:flex;justify-content:space-between;font-weight:700}

/* ---------- notes / cookie ---------- */
.notice{position:fixed;left:var(--pad);right:var(--pad);bottom:calc(env(safe-area-inset-bottom,0px) + 16px);z-index:60;
  display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:var(--bone);color:var(--void);padding:14px 20px;max-width:720px}
.notice .pill{border-color:var(--void)}
.notice .pill:hover{background:var(--void);color:var(--bone)}
.notice p{margin:0;font-size:16px}
.notice[hidden]{display:none}

/* ---------- footer ---------- */
.site-foot{padding:var(--gap-section) var(--pad) calc(env(safe-area-inset-bottom,0px) + 30px);display:grid;gap:30px}
.site-foot .logo{width:min(900px,100%);height:auto}
.foot-links{display:flex;gap:var(--gap-el);flex-wrap:wrap;align-items:center;justify-content:space-between}
.foot-links nav{display:flex;gap:var(--gap-el);flex-wrap:wrap}

/* ---------- legal / simple pages ---------- */
.legal{padding:var(--gap-section) var(--pad)}
.legal h2{font-size:var(--fs-sub);line-height:1.08;margin:2em 0 .5em}
.legal p,.legal li{max-width:66ch}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important;animation:none!important}
  .piece{transform:none!important}
}

/* ---------- age gate ---------- */
.age-gate{position:fixed;inset:0;z-index:100;display:none;flex-direction:column;justify-content:flex-end;
  padding:calc(env(safe-area-inset-top,0px) + 30px) 0 calc(env(safe-area-inset-bottom,0px) + 30px);overflow:hidden}
html.gate .age-gate{display:flex}
html.gate body{overflow:hidden}
html.gate body > :not(.age-gate){visibility:hidden}
.gate-body{padding:30px var(--pad) 0;display:grid;gap:15px;max-width:720px}
.gate-body p{margin:0}
.gate-actions{display:flex;gap:15px;flex-wrap:wrap;margin-top:10px}
.age-gate .gate-yes{background:var(--void);color:var(--violet)}
.age-gate .gate-yes:hover{background:transparent;color:var(--void)}
main:focus{outline:none}

/* ---------- locked (blurred) pieces ---------- */
.req-link{position:relative;display:block;cursor:pointer;text-decoration:none;color:var(--bone)}
.req-link:focus-visible{outline:2px solid var(--bone);outline-offset:4px}
.piece.locked img{aspect-ratio:2/3}
.req{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid var(--bone);border-radius:var(--pill);
  padding:7px 20px;font-size:19px;white-space:nowrap;background:rgba(0,0,0,.35);opacity:0;transition:opacity .2s}
.req-link:hover .req,.req-link:focus-visible .req{opacity:1;background:var(--bone);color:var(--void)}
@media (hover:none){.req{opacity:1}}
#contact{scroll-margin-top:90px}
.piece.locked.soft img{aspect-ratio:1}