/* SIDE QUEST — site styles, v2 "the cabinet" */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Karla:wght@400;500;700&family=Courier+Prime:wght@400;700&family=Oswald:wght@500;600;700&family=Playfair+Display:ital,wght@1,700&display=swap');

/* ---------- tokens: light (default) ---------- */
:root{
  color-scheme: light;
  --paper:#F8F2E6;          /* cream */
  --paper-dim:#EFE6D3;
  --card:#FFFDF8;
  --ink:#182530;            /* ink */
  --ink-soft:#36434E;
  --sheet-soft:#36434E;   /* secondary text sitting directly on a folder */
  --line:#D9C9A8;
  --coral:#E15A2C;
  --teal:#2CA79B;
  --gold:#EAAC44;
  --blue:#4C8FD6;
  --sign:#C8102E;
  --accent:var(--coral);
  --fold-base:#F8F2E6;      /* what folder colours are mixed into */
  --fold-mix:36%;
  --strong-mix:62%;       /* active header tab */
  --nav-mix:52%;          /* next/previous folder links */
  --shadow:24,37,48;
  --radius:14px;
  --wrap:1080px;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
}
/* ---------- tokens: dark ---------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --paper:#0F171E; --paper-dim:#16212A; --card:#1C2A35;
    --ink:#F3ECDD; --ink-soft:#AEB8BF; --sheet-soft:#EDE5D6; --line:#2F404D;
    --coral:#F0703F; --teal:#3CC2B4; --gold:#F0B95A;
    --fold-base:#1A2630; --fold-mix:46%; --strong-mix:46%; --nav-mix:46%; --shadow:0,0,0;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --paper:#0F171E; --paper-dim:#16212A; --card:#1C2A35;
  --ink:#F3ECDD; --ink-soft:#AEB8BF; --sheet-soft:#EDE5D6; --line:#2F404D;
  --coral:#F0703F; --teal:#3CC2B4; --gold:#F0B95A;
  --fold-base:#1A2630; --fold-mix:46%; --strong-mix:46%; --nav-mix:46%; --shadow:0,0,0;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Karla',system-ui,sans-serif; font-size:17px; line-height:1.6;
  transition:background-color .3s ease, color .3s ease;
}
h1,h2,h3{font-family:'Archivo Black',sans-serif;font-weight:400;letter-spacing:.2px;}
a{color:var(--coral);}
img{max-width:100%;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;}
[hidden]{display:none!important;}
.skip{position:absolute;left:-999px;top:8px;z-index:99;background:var(--ink);color:var(--paper);
  padding:8px 14px;border-radius:8px;font-family:'Oswald';text-decoration:none;}
.skip:focus{left:12px;}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px;}

/* cross-page folder morph (browsers that support it) */
@view-transition{navigation:auto;}
::view-transition-group(*){animation-duration:.42s;animation-timing-function:cubic-bezier(.2,.8,.2,1);}

/* ---------- per-section colours ---------- */
body.t-classic     { --accent:#E15A2C; }
body.t-mono-line   { --accent:#5B6B79; }
body.t-deep-sea    { --accent:#2C6E9E; }
body.t-glitch-rave { --accent:#E8337F; }
body.t-flat-minimal{ --accent:#5F8578; }
body.t-grunge      { --accent:#A6501E; }
body.t-shop        { --accent:#D9892B; }
body.t-home        { --accent:var(--coral); }
:root[data-theme="dark"] body.t-mono-line{--accent:#9AA8B4;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) body.t-mono-line{--accent:#9AA8B4;}}

/* ---------- header ---------- */
.site-head{background:var(--paper);position:sticky;top:0;z-index:40;
  border-bottom:2px solid var(--ink);transition:background-color .3s ease;}
.bar{display:flex;align-items:flex-end;gap:16px;padding:12px 0 0;}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);padding-bottom:12px;}
.brand img{width:44px;height:44px;}
.brand span{font-family:'Archivo Black';font-size:15px;line-height:1.15;}
.tabs-wrap{margin-left:auto;min-width:0;}
.tabs{display:flex;gap:4px;align-items:flex-end;overflow-x:auto;scrollbar-width:none;}
.tabs::-webkit-scrollbar{display:none;}
.tabs a{
  --f:color-mix(in oklab, var(--c) var(--fold-mix), var(--fold-base));
  flex:none;font-family:'Oswald',sans-serif;font-weight:600;font-size:13px;letter-spacing:1.1px;
  text-transform:uppercase;text-decoration:none;color:var(--ink);
  background:var(--f);border:2px solid var(--ink);border-bottom:none;border-radius:10px 10px 0 0;
  padding:7px 12px 6px;margin-bottom:-2px;transform:translateY(5px);
  transition:transform .22s cubic-bezier(.2,.8,.2,1), filter .22s ease;
}
.tabs a:hover{transform:translateY(1px);filter:saturate(1.3);}
.tabs a.on{transform:translateY(0);padding-bottom:9px;background:color-mix(in oklab, var(--c) var(--strong-mix), var(--fold-base));}
.shop-pin{
  display:none;align-items:center;min-height:44px;padding:0 16px;margin:0 0 8px auto;align-self:center;
  font-family:'Oswald',sans-serif;font-weight:600;font-size:13px;letter-spacing:1.2px;text-transform:uppercase;
  color:#182530;text-decoration:none;border:2px solid var(--ink);border-radius:999px;
  background:#EAAC44;box-shadow:3px 3px 0 var(--ink);
}
.theme-toggle::before{content:"";position:absolute;inset:-8px -4px;}   /* bigger tap area */
.theme-toggle{
  flex:none;align-self:center;margin:0 0 10px 6px;position:relative;width:58px;height:30px;border-radius:999px;
  border:2px solid var(--ink);background:var(--paper-dim);cursor:pointer;padding:0;color:var(--ink);
}
.theme-toggle svg{position:absolute;top:50%;width:14px;height:14px;transform:translateY(-50%);opacity:.85;}
.theme-toggle .i-sun{left:7px;} .theme-toggle .i-moon{right:7px;}
.theme-toggle .knob{position:absolute;top:2px;left:2px;width:22px;height:22px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 0 2px var(--ink);transition:transform .3s cubic-bezier(.2,.8,.2,1),background .3s;}
:root[data-theme="dark"] .theme-toggle .knob{transform:translateX(28px);background:var(--blue);}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .theme-toggle .knob{transform:translateX(28px);background:var(--blue);}}
@media (max-width:860px){
  .bar{flex-wrap:wrap;gap:0 10px;}
  .brand{padding-bottom:8px;}
  .theme-toggle{margin:0 0 8px 8px;}
  .tabs-wrap{order:3;margin-left:-24px;margin-right:-24px;width:calc(100% + 48px);}
  .tabs{padding:0 24px;}
  .tabs-wrap.more .tabs{-webkit-mask-image:linear-gradient(to right,#000 78%,transparent);mask-image:linear-gradient(to right,#000 78%,transparent);}
  .tabs a{font-size:13px;padding:0 13px;min-height:44px;display:flex;align-items:center;letter-spacing:.9px;transform:translateY(3px);}
  .tabs a.on{padding-bottom:0;}
  .tabs a.t-shop{display:none;}
  .shop-pin{display:flex;}
}

/* ---------- buttons, eyebrows ---------- */
.eyebrow{
  display:inline-block;font-family:'Courier Prime';font-weight:700;font-size:12px;
  letter-spacing:1.5px;text-transform:uppercase;color:var(--accent);
  background:var(--card);border:2px solid var(--ink);border-radius:999px;padding:5px 14px;
}
.btn{
  display:inline-block;margin-top:18px;background:var(--ink);color:var(--paper);
  font-family:'Oswald';font-weight:600;letter-spacing:1.5px;text-transform:uppercase;
  font-size:14px;text-decoration:none;padding:13px 26px;border-radius:10px;border:none;cursor:pointer;
  box-shadow:4px 4px 0 var(--accent);transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translate(1px,1px);box-shadow:3px 3px 0 var(--accent);}
.btn:disabled{opacity:.6;cursor:default;}

/* ---------- home hero ---------- */
.hero{display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:center;padding:52px 0 30px;}
.hero h1{font-size:clamp(34px,5.4vw,56px);line-height:1.02;margin:16px 0 14px;}
.hero h1 em{font-style:normal;color:var(--coral);}
.hero p{font-size:18.5px;color:var(--ink-soft);margin:0;max-width:560px;}
.hero-badge{width:100%;max-width:300px;display:block;margin:0 auto;transform:rotate(6deg);
  filter:drop-shadow(6px 8px 0 rgba(var(--shadow),.18));transition:transform .5s cubic-bezier(.2,.8,.2,1);}
.hero-badge:hover{transform:rotate(-4deg) scale(1.04);}
.pick{display:flex;align-items:center;gap:12px;margin:0 0 6px;font-family:'Courier Prime';font-weight:700;
  font-size:12.5px;letter-spacing:1.6px;text-transform:uppercase;color:var(--ink-soft);}
.pick::after{content:"";flex:1;border-top:2px dashed var(--line);}
@media (max-width:760px){
  .hero{grid-template-columns:1fr;padding:34px 0 20px;gap:10px;}
  .hero-badge{max-width:120px;margin:0;order:-1;}
}

/* =========================================================
   THE CABINET: stacked folders
   ========================================================= */
.cabinet,.page{--tab-h:58px;--strip:42px;--sheet-min:124px;}
.cabinet{
  padding:calc(var(--tab-h) + 14px) 0 40px;}
.folder{
  --f:color-mix(in oklab, var(--c) var(--fold-mix), var(--fold-base));
  position:relative;
  margin-top:calc(var(--strip) + var(--tab-h) - var(--sheet-min));
  filter:drop-shadow(0 -5px 9px rgba(var(--shadow),.16));
  transition:transform .38s cubic-bezier(.2,.8,.2,1), filter .3s ease;
}
.folder:first-child{margin-top:0;}

/* the tab */
.folder .tab{
  position:absolute;left:var(--x);bottom:100%;margin:0;
  height:var(--tab-h);min-width:min(260px,44%);
  background:var(--grain),var(--f);border-radius:18px 18px 0 0;
}
.folder .tab::before,.folder .tab::after{   /* flared corners where the tab meets the sheet */
  content:"";position:absolute;bottom:0;width:18px;height:18px;pointer-events:none;
}
.folder .tab::before{left:-18px;background:radial-gradient(circle at 0 0, transparent 17.5px, var(--f) 18px);}
.folder .tab::after{right:-18px;background:radial-gradient(circle at 100% 0, transparent 17.5px, var(--f) 18px);}
.folder .tab button,.folder .tab a{
  all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:12px;
  width:100%;height:100%;padding:0 26px;color:var(--ink);
  font-family:'Archivo Black',sans-serif;font-size:clamp(17px,2.3vw,24px);letter-spacing:.3px;text-transform:uppercase;
  border-radius:18px 18px 0 0;
}
.folder .tab button:focus-visible,.folder .tab a:focus-visible{outline:3px solid var(--ink);outline-offset:-6px;}
.tab-n{font-family:'Courier Prime',monospace;font-weight:700;font-size:12px;letter-spacing:1px;}

/* the sheet (folder body) */
.sheet{
  position:relative;min-height:var(--sheet-min);
  background:var(--grain),var(--f);border-radius:4px 18px 0 0;
}
.folder.first-left .sheet{border-top-left-radius:0;}
.strip{
  height:var(--strip);display:flex;align-items:center;gap:12px;padding:0 14px 0 24px;cursor:pointer;color:var(--ink);
}
.strip .what{flex:1;min-width:0;font-weight:700;font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.status-pill{display:inline-flex;align-items:center;gap:7px;flex:none;
  font-family:'Courier Prime',monospace;font-weight:700;font-size:12px;letter-spacing:1.2px;text-transform:uppercase;
  padding:3px 10px;border:1.5px solid var(--ink);border-radius:999px;background:color-mix(in oklab, var(--card) 55%, transparent);}
.strip .dot{width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:0 0 0 1.5px var(--ink);}
.chev{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--ink);color:var(--paper);transition:transform .35s cubic-bezier(.2,.8,.2,1);}
.folder.open .chev{transform:rotate(180deg);}
@media (hover:hover){ .folder:not(.open):hover .chev{transform:translateY(2px);} }

/* first load: folders deal into the drawer one after another, then Side Quests peeks up */
.cabinet.deal .folder{animation:deal .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 75ms);}
.cabinet.deal .folder:first-child{animation:deal .55s cubic-bezier(.2,.8,.2,1) both, peek 1s cubic-bezier(.3,.7,.2,1) 1.05s;}
@keyframes deal{from{transform:translateY(48px);opacity:0;}to{transform:none;opacity:1;}}
@keyframes peek{0%,100%{transform:none;}40%{transform:translateY(-20px);}}

/* hover = pull the folder up out of the drawer */
@media (hover:hover){
  .folder:not(.open):hover{transform:translateY(-14px);filter:drop-shadow(0 -8px 14px rgba(var(--shadow),.24)) saturate(1.22);}
}
.folder:not(.open):focus-within{transform:translateY(-14px);}

/* open/close: body grows from nothing */
.body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.2,.8,.2,1);}
.body-in{overflow:hidden;visibility:hidden;transition:visibility 0s linear .5s;min-height:0;}
.folder.open .body{grid-template-rows:1fr;}
.folder.open .body-in{visibility:visible;transition-delay:0s;}
.folder.open{filter:drop-shadow(0 -8px 16px rgba(var(--shadow),.22));}

/* the paper inside the open folder */
.doc{
  position:relative;margin:4px 22px calc(var(--tab-h) + 40px);padding:30px 32px 30px;
  background:var(--card);border-radius:6px;color:var(--ink);
  box-shadow:0 1px 0 rgba(var(--shadow),.06), 0 10px 30px -14px rgba(var(--shadow),.35);
  transform:rotate(-.35deg) translateY(10px);opacity:0;
  transition:transform .55s cubic-bezier(.2,.8,.2,1) .08s, opacity .35s ease .08s;
}
.folder.open .doc{transform:rotate(-.35deg) translateY(0);opacity:1;}
.folder:last-child .doc{margin-bottom:30px;}
.doc .kicker{font-family:'Courier Prime',monospace;font-weight:700;font-size:12px;letter-spacing:1.6px;color:var(--ink-soft);}
.doc h3{font-size:clamp(24px,3.4vw,34px);line-height:1.08;margin:8px 0 10px;max-width:80%;}
.doc p{color:var(--ink-soft);margin:0 0 12px;max-width:620px;}
.doc .sticker{position:absolute;top:18px;right:22px;width:92px;height:92px;transform:rotate(9deg);
  filter:drop-shadow(3px 4px 0 rgba(var(--shadow),.18));}
.doc .status{margin:18px 0 4px;padding:16px 18px;border:2px dashed var(--c);border-radius:10px;max-width:620px;}
.doc .status b{display:block;font-family:'Archivo Black';font-weight:400;font-size:18px;margin-bottom:2px;}
.doc .status span{color:var(--ink-soft);font-size:15px;}
.doc .ach{margin-bottom:8px;}
.doc .open-link{
  display:inline-flex;align-items:center;gap:10px;margin-top:16px;
  font-family:'Oswald';font-weight:600;font-size:14px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--paper);background:var(--ink);text-decoration:none;padding:12px 20px;border-radius:10px;
  box-shadow:4px 4px 0 var(--c);transition:transform .15s, box-shadow .15s;
}
.doc .open-link:hover{transform:translate(1px,1px);box-shadow:3px 3px 0 var(--c);}
.doc .open-link .arr{transition:transform .2s;}
.doc .open-link:hover .arr{transform:translateX(4px);}
.doc ul.mini{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:8px;max-width:640px;}
.doc ul.mini a{display:flex;gap:14px;align-items:baseline;text-decoration:none;color:var(--ink);
  padding:10px 14px;border-radius:9px;background:var(--paper-dim);transition:background .2s, transform .2s;}
.doc ul.mini a:hover{transform:translateX(4px);background:color-mix(in oklab, var(--c) 22%, var(--paper-dim));}
.doc ul.mini .k{font-family:'Courier Prime';font-weight:700;font-size:12px;letter-spacing:1px;color:var(--ink-soft);flex:none;width:28px;}
.doc ul.mini .t{font-weight:700;}
.doc .prices{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:16px 0 4px;}
.doc .prices figure{margin:0;background:var(--paper-dim);border-radius:10px;padding:12px;text-align:center;}
.doc .prices img{height:74px;width:100%;object-fit:contain;border-radius:6px;}
.doc .prices figcaption{font-size:13px;color:var(--ink-soft);line-height:1.3;margin-top:6px;}
.doc .prices figcaption b{display:block;font-family:'Archivo Black';font-weight:400;color:var(--ink);font-size:16px;}

@media (max-width:760px){
  .cabinet,.page{--tab-h:50px;--strip:38px;--sheet-min:110px;}
  .folder .tab{left:var(--xm);min-width:52%;}
  .folder .tab button,.folder .tab a{padding:0 18px;font-size:16px;}
  .strip{padding:0 8px 0 16px;gap:8px;}
  .strip .what{font-size:14px;}
  .status-pill{display:none;}
  .chev{width:28px;height:28px;}
  .doc{margin:2px 10px calc(var(--tab-h) + 34px);padding:24px 18px 22px;}
  .doc h3{max-width:none;padding-right:62px;}
  .doc .sticker{width:58px;height:58px;top:14px;right:12px;}
  .doc .prices{grid-template-columns:repeat(2,1fr);}
}

/* =========================================================
   SECTION PAGES: one open folder
   ========================================================= */
.page{padding-top:calc(58px + 34px);padding-bottom:50px;}
.page .folder{margin-top:0;}
.page .folder .tab{--x:0px;}
.page .folder .tab::before{display:none;}
.page .folder .tab a{cursor:default;}
.page .sheet > .phead,.page .sheet > .back{--ink-soft:var(--sheet-soft);}
.page .sheet{border-radius:0 18px 18px 18px;padding:34px 34px 44px;min-height:0;}
.back{position:absolute;top:-52px;right:6px;padding:12px 4px;font-family:'Courier Prime';font-weight:700;font-size:12.5px;
  letter-spacing:1.3px;text-transform:uppercase;color:var(--ink-soft);text-decoration:none;}
.back:hover{color:var(--ink);}
.phead{padding:0 0 26px;}
.phead h1{font-size:clamp(34px,5vw,52px);line-height:1.06;margin:18px 0 10px;}
.phead p{font-size:19px;color:var(--ink-soft);max-width:620px;margin:0;}
.phead::after{content:"";display:block;width:74px;height:6px;border-radius:3px;background:var(--accent);margin-top:22px;}
.page-doc{background:var(--card);border-radius:8px;padding:30px;box-shadow:0 10px 30px -16px rgba(var(--shadow),.35);}
@media (max-width:760px){
  .page{padding-top:calc(50px + 30px);}
  .page .sheet{padding:24px 16px 30px;border-top-right-radius:14px;}
  .back{top:-46px;font-size:12px;}
  .page-doc{padding:22px 18px;}
}

/* ---------- next / previous folder ---------- */
.folder-nav{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:34px;}
.folder-nav a{
  --nf:color-mix(in oklab, var(--c) var(--nav-mix), var(--fold-base));
  display:flex;flex-direction:column;gap:2px;min-height:64px;justify-content:center;padding:12px 20px;
  border-radius:14px 14px 6px 6px;background:var(--grain),var(--nf);color:var(--ink);text-decoration:none;
  box-shadow:0 -4px 12px -6px rgba(var(--shadow),.35);transition:transform .25s cubic-bezier(.2,.8,.2,1);
}
.folder-nav a:hover{transform:translateY(-5px);}
.folder-nav .fn-next{text-align:right;}
.fn-k{font-family:'Courier Prime',monospace;font-weight:700;font-size:12px;letter-spacing:1.3px;text-transform:uppercase;}
.fn-t{font-family:'Archivo Black',sans-serif;font-size:18px;}
@media (max-width:520px){.folder-nav{grid-template-columns:1fr;} .folder-nav .fn-next{text-align:left;}}

/* ---------- prjct.sidequest. lettering (matches the white sticker) ---------- */
.lettering{display:block;max-width:340px;}
.lettering img{width:100%;height:auto;display:block;}
.lettering .lt-d{display:none;}
:root[data-theme="dark"] .lettering .lt-l{display:none;}
:root[data-theme="dark"] .lettering .lt-d{display:block;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .lettering .lt-l{display:none;}
  :root:not([data-theme="light"]) .lettering .lt-d{display:block;}
}
.cap-lettering .lettering{max-width:380px;margin:4px 0 6px;}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
/* the embroidery design is drawn for a light ground, so its box stays light in both themes */
.swatch,.prices figure.swatch{background:#F1E9D8 !important;}
.swatch figcaption{color:#36434E !important;}
.swatch figcaption b{color:#182530 !important;}
.shot .pin-shot{width:100%;display:block;}
.item .no-zoom img,.item:hover .no-zoom img{transform:none;}

/* ---------- empty state ---------- */
.empty{
  border:2px dashed var(--accent);border-radius:var(--radius);background:var(--card);
  padding:44px 28px;text-align:center;margin:10px 0 0;
}
.empty h2{font-size:26px;margin:0 0 8px;}
.empty p{color:var(--ink-soft);margin:0 auto;max-width:460px;font-size:15.5px;}
.ach{
  display:inline-block;font-family:'Courier Prime',monospace;font-weight:700;
  font-size:12px;letter-spacing:2px;color:var(--accent);
  border:2px solid var(--accent);border-radius:999px;padding:5px 15px;margin-bottom:16px;
}

/* ---------- tutorial cards (Learn) ---------- */
.beats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:6px 0 4px;}
@media (max-width:860px){.beats{grid-template-columns:1fr;}}
.beat{
  background:var(--card);border:2px solid var(--ink);border-radius:var(--radius);
  padding:22px;box-shadow:5px 5px 0 var(--accent);text-decoration:none;color:var(--ink);display:block;
  transition:transform .15s ease, box-shadow .15s ease;
}
.beat:hover{transform:translate(1px,1px);box-shadow:4px 4px 0 var(--accent);}
.beat .n{font-family:'Courier Prime';font-weight:700;font-size:12px;letter-spacing:1.4px;color:var(--accent);}
.beat h3{font-size:19px;margin:8px 0 8px;}
.beat p{font-size:14.5px;color:var(--ink-soft);margin:0;}

/* ---------- shop ---------- */
.sec-h{font-size:22px;margin:40px 0 4px;}
.sec-p{color:var(--ink-soft);margin:0 0 18px;font-size:15.5px;max-width:640px;}
.capsule{
  background:var(--card);border:3px solid var(--ink);border-radius:var(--radius);
  padding:28px;box-shadow:6px 6px 0 var(--accent);margin:4px 0 10px;max-width:760px;
}
.cap-tag{font-family:'Courier Prime',monospace;font-weight:700;font-size:12px;letter-spacing:2px;color:var(--accent);margin-bottom:8px;}
.capsule h2{font-size:30px;margin:0 0 12px;}
.capsule p{color:var(--ink-soft);margin:0 0 12px;}
.cap-note{font-family:'Courier Prime',monospace;font-size:13px;letter-spacing:1px;
  border-top:2px dashed var(--line);padding-top:12px;margin-top:16px;color:var(--ink);}
.cap-pin-note{font-size:14px;color:var(--ink-soft);font-style:italic;margin:14px 0 0;max-width:640px;}
.cap-shots{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin:22px 0 6px;}
.shot{margin:0;background:var(--paper-dim);border-radius:10px;padding:14px;text-align:center;grid-column:span 2;}
.shot.half{grid-column:span 3;}
.shot img{width:100%;display:block;margin:0 auto;}
.shot figcaption{font-family:'Courier Prime',monospace;font-size:12px;letter-spacing:.6px;color:var(--ink-soft);margin-top:9px;}
@media (max-width:700px){
  .cap-shots{grid-template-columns:repeat(2,1fr);}
  .shot.half{grid-column:span 2;} .shot{grid-column:span 1;}
}

.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:4px 0 10px;}
.shop-grid.four{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){.shop-grid.four{grid-template-columns:repeat(2,1fr);}}
@media (max-width:760px){.shop-grid{grid-template-columns:1fr;}}
@media (max-width:420px){.shop-grid.four{gap:12px;} .item.small{padding:12px;} .item.small h3{font-size:15px;} .item.small p{font-size:13px;}}
.item{
  display:flex;flex-direction:column;
  background:var(--card);border:2px solid var(--ink);border-radius:var(--radius);
  padding:20px;box-shadow:5px 5px 0 var(--ink);
}
.item-img{background:var(--paper-dim);border-radius:10px;height:150px;display:grid;place-items:center;margin-bottom:14px;padding:12px;}
.item-img img{max-height:126px;width:auto;max-width:100%;object-fit:contain;transition:transform .35s cubic-bezier(.2,.8,.2,1);}
.item:hover .item-img img{transform:rotate(-4deg) scale(1.05);}
.item-badge{
  align-self:flex-start;font-family:'Courier Prime';font-weight:700;font-size:12px;
  letter-spacing:1.4px;color:var(--teal);border:1.5px solid var(--teal);
  border-radius:999px;padding:3px 10px;margin-bottom:10px;
}
.item-badge.save{color:var(--coral);border-color:var(--coral);}
.item h3{font-size:18px;margin:0 0 6px;}
.item p{font-size:14.5px;color:var(--ink-soft);margin:0 0 14px;flex:1;}
.item .price{font-family:'Archivo Black';font-size:24px;margin-bottom:12px;}
.item .price s{font-family:'Karla';font-size:15px;color:var(--ink-soft);margin-left:6px;}
.item .btn{width:100%;text-align:center;box-shadow:none;margin-top:0;font-size:13px;}
.item .btn:hover{background:var(--coral);color:#fff;transform:none;}
.item.small{padding:16px;box-shadow:4px 4px 0 var(--accent);}
.item.small .item-img{height:120px;}
.item.small .item-img img{max-height:96px;}
.item.small .price{font-size:20px;margin-bottom:10px;}

.ship{max-width:760px;display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:26px 0 0;
  border:2px solid var(--ink);border-radius:var(--radius);overflow:hidden;background:var(--card);}
.ship div{padding:14px 16px;border-right:2px dashed var(--line);font-size:14px;color:var(--ink-soft);}
.ship div:last-child{border-right:none;}
.ship b{display:block;font-family:'Courier Prime';font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink);margin-bottom:2px;}
@media (max-width:700px){.ship{grid-template-columns:1fr;} .ship div{border-right:none;border-bottom:2px dashed var(--line);} .ship div:last-child{border-bottom:none;}}
.shop-note{
  max-width:760px;background:var(--paper-dim);border-left:4px solid var(--teal);
  padding:14px 18px;border-radius:0 8px 8px 0;font-size:14.5px;margin:16px 0 10px;
}
.shop-error{
  max-width:760px;background:color-mix(in oklab, var(--coral) 16%, var(--card));border-left:4px solid var(--coral);
  padding:12px 18px;border-radius:0 8px 8px 0;font-size:14px;margin:0 0 10px;
}

/* emblem wall */
.lineup{display:grid;grid-template-columns:repeat(8,1fr);gap:12px;margin:8px 0 10px;}
@media (max-width:900px){.lineup{grid-template-columns:repeat(4,1fr);}}
@media (max-width:480px){.lineup{grid-template-columns:repeat(2,1fr);}}
.pin{position:relative;text-align:center;display:block;text-decoration:none;
  border-radius:12px;padding:8px 6px 6px;transition:transform .25s ease, background .25s ease;}
.pin img{width:100%;display:block;transition:filter .35s ease, opacity .35s ease, transform .35s ease;}
.pin span{display:block;font-family:'Courier Prime',monospace;font-size:12px;letter-spacing:.6px;color:var(--ink-soft);margin-top:6px;}
.pin:not(.locked) span{color:var(--ink);font-weight:700;}
.pin.locked img{filter:grayscale(1) contrast(.55) brightness(1.12);opacity:.42;}
.pin.locked span{color:var(--ink-soft);}
:root[data-theme="dark"] .pin.locked img{filter:grayscale(1) brightness(.9);opacity:.5;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .pin.locked img{filter:grayscale(1) brightness(.9);opacity:.5;}}
.lockbar{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-family:'Courier Prime',monospace;font-weight:700;font-size:12px;letter-spacing:1.4px;
  color:var(--ink);background:color-mix(in oklab, var(--paper) 88%, transparent);border:1.5px solid var(--ink);
  border-radius:999px;padding:3px 9px;pointer-events:none;transition:opacity .25s ease;}
a.pin.locked:hover{background:color-mix(in oklab, var(--card) 60%, transparent);transform:translateY(-3px);}
a.pin.locked:hover img{filter:none;opacity:.95;transform:scale(1.04) rotate(-2deg);}
a.pin.locked:hover .lockbar{opacity:0;}
a.pin.locked:hover span{opacity:1;color:var(--accent);}
.pin:not(.locked):hover img{transform:scale(1.05) rotate(2deg);}

/* pin finish cycler */
.cycler{position:relative;width:100%;aspect-ratio:900/540;border-radius:8px;outline:none;cursor:pointer;}
.cycler .cy{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .45s ease;}
.cycler .cy1{opacity:1;}
.cycler:hover .cy1,.cycler:focus-visible .cy1{animation:cyA 4.5s infinite;}
.cycler:hover .cy2,.cycler:focus-visible .cy2{animation:cyB 4.5s infinite;}
.cycler:hover .cy3,.cycler:focus-visible .cy3{animation:cyC 4.5s infinite;}
@keyframes cyA{0%,26%{opacity:1}33%,93%{opacity:0}100%{opacity:1}}
@keyframes cyB{0%,26%{opacity:0}33%,59%{opacity:1}66%,100%{opacity:0}}
@keyframes cyC{0%,59%{opacity:0}66%,93%{opacity:1}100%{opacity:0}}
.cycler::after{content:"3 finishes";position:absolute;right:8px;bottom:6px;font-family:'Courier Prime',monospace;
  font-size:12px;letter-spacing:1px;color:var(--ink-soft);transition:opacity .3s ease;pointer-events:none;}
.cycler:hover::after,.cycler:focus-visible::after{opacity:0;}

/* ---------- footer ---------- */
footer{border-top:2px dashed var(--line);padding:44px 0 40px;text-align:center;margin-top:20px;}
footer > .wrap > img{width:64px;height:64px;margin-bottom:12px;}
footer .tag{font-family:'Archivo Black';font-size:18px;color:var(--accent);margin:6px 0 4px;}
footer .small{font-family:'Courier Prime';font-size:12px;color:var(--ink-soft);}
footer .links{margin:10px 0 0;display:flex;gap:0 6px;justify-content:center;flex-wrap:wrap;}
footer .links a{padding:12px 8px;font-family:'Oswald';font-size:13px;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-soft);text-decoration:none;}
footer .links a:hover{color:var(--accent);}
footer .socials{margin:4px 0 10px;display:flex;gap:0 8px;justify-content:center;flex-wrap:wrap;}
footer .socials a{font-family:'Oswald',sans-serif;font-size:12px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--ink-soft);text-decoration:none;border-bottom:1.5px solid transparent;padding:12px 6px;transition:color .2s,border-color .2s;}
footer .socials a:hover{color:var(--accent);border-color:var(--accent);}

.signup{
  width:100%;max-width:720px;margin:0 auto 34px;background:var(--card);border:2px solid var(--ink);
  border-radius:var(--radius);padding:26px 28px;box-shadow:5px 5px 0 var(--accent);text-align:left;
}
.signup-inner{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;}
.signup-copy{flex:1;min-width:220px;}
.signup-tag{font-family:'Courier Prime',monospace;font-weight:700;font-size:12px;letter-spacing:1.6px;color:var(--accent);margin-bottom:6px;}
.signup-copy p{margin:0;font-size:14.5px;color:var(--ink-soft);max-width:380px;}
.signup-form{display:flex;gap:8px;flex:1;min-width:260px;}
.signup-form input{flex:1;min-width:0;padding:11px 14px;border:2px solid var(--ink);border-radius:9px;
  font-family:'Karla',sans-serif;font-size:14.5px;background:var(--paper-dim);color:var(--ink);}
.signup-form input::placeholder{color:var(--ink-soft);opacity:1;}
.signup-form button{background:var(--ink);color:var(--paper);border:none;border-radius:9px;
  font-family:'Oswald',sans-serif;font-weight:600;letter-spacing:.6px;font-size:13.5px;
  padding:11px 18px;cursor:pointer;white-space:nowrap;box-shadow:3px 3px 0 var(--accent);}
.signup-form button:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--accent);}
.signup-form button:disabled{opacity:.6;cursor:default;}
.signup-msg{margin-top:14px;font-size:14px;text-align:center;}
.signup-msg.ok{color:var(--teal);font-weight:600;}
.signup-msg.err{color:var(--coral);}
@media (max-width:600px){.signup-inner{flex-direction:column;align-items:stretch;}.signup-form{flex-direction:column;}}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:0s!important;animation:none!important;scroll-behavior:auto!important;}
  .cycler .cy1{opacity:1;}
  @view-transition{navigation:none;}
}
.shot.half img{max-height:210px;width:auto;max-width:100%;object-fit:contain;}

/* =========================================================
   FOLDER PEEKS: something lives inside every folder.
   Hover (or scroll it into view on a phone) and it peeks out.
   Click and it pops all the way out, then the folder opens.
   ========================================================= */
.folder{--ps:1;--pw:240px;--ph:108px;}
.k-shop{--pw:150px;}
.peek{
  position:absolute;z-index:-1;top:0;pointer-events:none;
  width:calc(var(--pw) * var(--ps));height:calc(var(--ph) * var(--ps));
  transform:translateY(14px);
  /* going back in: smooth, no bounce, so nothing dips below the folder */
  transition:transform .38s cubic-bezier(.4,0,.2,1);
  /* cut off any shadow that would hang below the object's own bottom edge */
  clip-path:inset(-400px -80px 0 -80px);
}
.pk-right .peek{right:27%;} .pk-left .peek{left:30%;}   /* the open middle of the strip above, clear of its text and arrow */
.pk{position:relative;width:var(--pw);height:var(--ph);transform:scale(var(--ps));transform-origin:top left;}
.folder:not(.open):is(:hover,:focus-within,.peeking) .peek{transform:translateY(calc(var(--ph) * var(--ps) * -.56));transition:transform .55s cubic-bezier(.2,1.45,.35,1);}
.folder.revealing .peek{transform:translateY(calc(var(--ph) * var(--ps) * -1.06)) !important;transition-duration:.42s;}
@media (max-width:760px){ .folder{--ps:.62;} .pk-right .peek{right:12%;} .pk-left .peek{left:4%;} }

/* holographic sheen across a tab on hover */
.tab .sheen{position:absolute;inset:0;border-radius:18px 18px 0 0;overflow:hidden;pointer-events:none;z-index:1;}
.tab .sheen::before{content:"";position:absolute;inset:-10% -80%;
  background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.6) 48%,rgba(160,230,255,.35) 52%,transparent 60%);
  transform:translateX(-60%);opacity:0;}
.folder:not(.open):is(:hover,:focus-within) .tab .sheen::before{animation:sheen .9s ease-out both;}
@keyframes sheen{0%{transform:translateX(-60%);opacity:1;}100%{transform:translateX(60%);opacity:1;}}
.folder .tab button{position:relative;z-index:2;}

/* fx layer inside each sheet (flash, cursor light) */
.sheet .fx{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;opacity:0;}

/* ---- 01 Side Quests: a map with a detour ---- */
.map-paper{fill:#F4EEDD;stroke:#D9C9A8;stroke-width:2;}
.map-fold{stroke:rgba(24,37,48,.13);stroke-width:1.5;}
.map-road{stroke:#182530;stroke-width:3;fill:none;stroke-dasharray:11 7;}
.map-detour{stroke:#E15A2C;stroke-width:3.5;fill:none;stroke-dasharray:3 6;stroke-linecap:round;}
.map-sign text{font:400 6.5px 'Archivo Black',sans-serif;fill:#fff;letter-spacing:.2px;}
.map-sign{transform-box:fill-box;transform-origin:center;}
.map-dot{position:absolute;left:0;top:0;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;background:#182530;
  box-shadow:0 0 0 3px #F4EEDD;offset-path:path('M54 84C70 30 110 18 140 40S176 80 196 84');offset-distance:0%;offset-rotate:0deg;}
.map-stamp{position:absolute;left:50%;top:52%;font-family:'Archivo Black',sans-serif;font-size:24px;letter-spacing:1px;color:#E15A2C;
  border:3px solid #E15A2C;border-radius:6px;padding:0 10px;background:rgba(244,238,221,.85);
  transform:translate(-50%,-50%) rotate(-12deg) scale(2.4);opacity:0;}
.k-side-quests:not(.open):is(:hover,:focus-within,.peeking) .map-road{animation:march 1.1s linear infinite;}
.k-side-quests:not(.open):is(:hover,:focus-within,.peeking) .map-detour{animation:march .9s linear infinite reverse;}
.k-side-quests:not(.open):is(:hover,:focus-within,.peeking) .map-dot{animation:detour 2.2s cubic-bezier(.5,0,.5,1) infinite;}
@keyframes march{to{stroke-dashoffset:-36;}}
@keyframes detour{0%{offset-distance:0%;}70%,100%{offset-distance:100%;}}
.k-side-quests.revealing .map-stamp{animation:stamp .4s cubic-bezier(.3,1.6,.5,1) .18s forwards;}
.k-side-quests.revealing .map-sign{animation:signpop .5s cubic-bezier(.3,1.6,.5,1) forwards;}
@keyframes stamp{to{transform:translate(-50%,-50%) rotate(-12deg) scale(1);opacity:1;}}
@keyframes signpop{50%{transform:scale(1.9) rotate(-12deg);}100%{transform:scale(1.5) rotate(-8deg);}}

/* ---- 02 Comic: a strip slides out panel by panel ---- */
.pk-comic{display:flex;gap:6px;align-items:flex-end;padding:0 4px;}
.cp{position:relative;flex:1;height:100px;overflow:hidden;background:#FFFDF8;border:2.5px solid #182530;border-radius:3px;
  box-shadow:3px 3px 0 #182530;transform:translateY(46px);transition:transform .5s cubic-bezier(.2,1.5,.4,1);}
.cp2{transition-delay:.07s;} .cp3{transition-delay:.14s;}
.k-comic:not(.open):is(:hover,:focus-within,.peeking) .cp1{transform:translateY(0) rotate(-2deg);}
.k-comic:not(.open):is(:hover,:focus-within,.peeking) .cp2{transform:translateY(-6px) rotate(1deg);}
.k-comic:not(.open):is(:hover,:focus-within,.peeking) .cp3{transform:translateY(2px) rotate(-1deg);}
.cp-dots{position:absolute;inset:0;background:radial-gradient(#5B6B79 1.3px,transparent 1.8px) 0 0/7px 7px;opacity:.55;}
.cp-guy{position:absolute;left:50%;bottom:-4px;width:30px;height:36px;margin-left:-15px;border-radius:12px 12px 0 0;background:#182530;}
.cp-guy::before{content:"";position:absolute;left:50%;top:-20px;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:#182530;}
.cp-bub{position:absolute;left:8px;right:8px;top:14px;height:34px;display:grid;place-items:center;font-style:normal;
  font-family:'Archivo Black',sans-serif;font-size:18px;line-height:1;color:#182530;background:#fff;border:2px solid #182530;border-radius:50%;}
.cp-bub::after{content:"";position:absolute;left:30%;bottom:-9px;border:5px solid transparent;border-top:8px solid #182530;}
.cp-burst{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;display:grid;place-items:center;font-style:normal;
  font-family:'Archivo Black',sans-serif;font-size:19px;color:#182530;background:#EAAC44;
  clip-path:polygon(50% 0,61% 30%,95% 20%,72% 47%,100% 70%,64% 68%,58% 100%,44% 72%,10% 88%,30% 58%,0 34%,36% 34%);}
.k-comic.revealing .cp{animation:panelhit .5s cubic-bezier(.3,1.6,.5,1) both;}
.k-comic.revealing .cp2{animation-delay:.08s;} .k-comic.revealing .cp3{animation-delay:.16s;}
.k-comic.revealing .cp-burst{animation:burst .55s cubic-bezier(.3,1.6,.5,1) .22s both;}
.k-comic.revealing .cp-bub{animation:bub .4s cubic-bezier(.3,1.6,.5,1) .12s both;}
@keyframes panelhit{0%{transform:translateY(0);}40%{transform:translateY(-10px) rotate(2deg);}100%{transform:translateY(0) rotate(0);}}
@keyframes burst{0%{transform:scale(1) rotate(0);}60%{transform:scale(1.7) rotate(18deg);}100%{transform:scale(1.4) rotate(10deg);}}
@keyframes bub{50%{transform:scale(1.25);}100%{transform:scale(1.1);}}

/* ---- 03 Thought: a magazine page that turns ---- */
.pk-mag{perspective:800px;}
.pg-under,.pg-turn{position:absolute;top:0;bottom:0;left:30px;right:30px;border-radius:2px;}
.pg-under{background:#2C6E9E;color:#F8F2E6;display:grid;place-items:center;padding:10px 14px;text-align:center;
  font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:700;font-size:17px;line-height:1.15;}
.pg-turn{transform-style:preserve-3d;transform-origin:left center;transition:transform .7s cubic-bezier(.6,.05,.3,1);}
.pg{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:2px;
  background:#FBF6EA;box-shadow:0 2px 10px rgba(24,37,48,.25);padding:9px 12px;display:flex;flex-direction:column;}
.pg-back{transform:rotateY(180deg);background:#EFE6D3;}
.pg-back::before,.pg-cols i{content:"";display:block;flex:1;background:repeating-linear-gradient(to bottom,rgba(24,37,48,.32) 0 2px,transparent 2px 7px);}
.pg-k{font-family:'Courier Prime',monospace;font-weight:700;font-size:8px;letter-spacing:1.4px;color:#2C6E9E;}
.pg-h{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:700;font-size:30px;line-height:1;color:#182530;margin:3px 0 6px;}
.pg-cols{display:flex;gap:8px;flex:1;}
.k-thought:not(.open):is(:hover,:focus-within,.peeking) .pg-turn{transform:rotateY(-14deg) rotateZ(-2deg);}
.k-thought.revealing .pg-turn{transform:rotateY(-178deg) !important;}

/* ---- 04 Photos: polaroids fan out and develop, click = flash ---- */
.pk-pola{display:block;}
.pol{position:absolute;left:50%;bottom:0;width:78px;height:94px;margin-left:-39px;background:#FFFDF8;padding:6px 6px 20px;
  box-shadow:0 3px 10px rgba(24,37,48,.3);transition:transform .55s cubic-bezier(.2,1.4,.4,1);}
.pol i{display:block;width:100%;height:100%;filter:brightness(.25) saturate(0);transition:filter 1.4s ease .15s;}
.p1 i{background:radial-gradient(circle at 70% 35%,#EAAC44 0 9px,transparent 10px),linear-gradient(#E15A2C,#E8337F);}
.p2 i{background:radial-gradient(circle at 30% 70%,#2CA79B 0 14px,transparent 15px),linear-gradient(#4C8FD6,#BFD9F2);}
.p3 i{background:linear-gradient(160deg,#E8337F 0 40%,#182530 40% 46%,#EAAC44 46%);}
.p1{transform:rotate(-4deg);} .p3{transform:rotate(5deg);}
.k-photos:not(.open):is(:hover,:focus-within,.peeking) .p1{transform:translateX(-64px) rotate(-12deg);}
.k-photos:not(.open):is(:hover,:focus-within,.peeking) .p2{transform:translateY(-6px) rotate(-1deg);}
.k-photos:not(.open):is(:hover,:focus-within,.peeking) .p3{transform:translateX(64px) rotate(11deg);}
.k-photos:not(.open):is(:hover,:focus-within,.peeking) .pol i{filter:none;}
.k-photos.revealing .fx{background:#fff;animation:flash .55s ease-out both;}
.k-photos.revealing .pol i{filter:none;transition:filter .25s ease 0s;}
@keyframes flash{0%{opacity:0;}12%{opacity:.95;}100%{opacity:0;}}

/* ---- 05 Spotlight: cursor light + flowers, click = petals ---- */
.k-spotlight .fx{background:radial-gradient(170px circle at var(--mx,70%) var(--my,30%),rgba(255,248,220,.55),transparent 70%);mix-blend-mode:soft-light;transition:opacity .3s;}
.k-spotlight:not(.open):is(:hover,.peeking) .fx{opacity:1;}
.pk-flow{display:block;}
.fl{position:absolute;bottom:0;width:4px;height:var(--h);background:#3F6B5A;border-radius:2px;transform:translateY(60px);
  transition:transform .6s cubic-bezier(.2,1.4,.4,1);}
.fl i{position:absolute;left:50%;top:-14px;width:34px;height:34px;margin-left:-17px;border-radius:50%;
  background:radial-gradient(circle,#EAAC44 0 5px,transparent 5.5px),
    radial-gradient(circle at 50% 16%,var(--pc) 0 8px,transparent 8.5px),radial-gradient(circle at 84% 42%,var(--pc) 0 8px,transparent 8.5px),
    radial-gradient(circle at 70% 84%,var(--pc) 0 8px,transparent 8.5px),radial-gradient(circle at 30% 84%,var(--pc) 0 8px,transparent 8.5px),
    radial-gradient(circle at 16% 42%,var(--pc) 0 8px,transparent 8.5px);}
.f1{left:84px;--h:70px;--pc:#E15A2C;transform-origin:bottom;} .f2{left:118px;--h:92px;--pc:#E8337F;transition-delay:.06s;} .f3{left:152px;--h:62px;--pc:#F4EEDD;transition-delay:.12s;}
.k-spotlight:not(.open):is(:hover,:focus-within,.peeking) .f1{transform:translateY(0) rotate(-14deg);}
.k-spotlight:not(.open):is(:hover,:focus-within,.peeking) .f2{transform:translateY(0);}
.k-spotlight:not(.open):is(:hover,:focus-within,.peeking) .f3{transform:translateY(0) rotate(15deg);}
.pt{position:absolute;left:120px;top:20px;width:9px;height:14px;border-radius:50% 50% 50% 0;background:#E8337F;opacity:0;}
.t2{background:#E15A2C;--dx:-70px;--dy:-30px;} .t1{--dx:-40px;--dy:-60px;} .t3{background:#EAAC44;--dx:10px;--dy:-75px;}
.t4{--dx:60px;--dy:-50px;} .t5{background:#F4EEDD;--dx:85px;--dy:-10px;} .t6{background:#E15A2C;--dx:-90px;--dy:5px;}
.k-spotlight.revealing .pt{animation:petal .75s cubic-bezier(.2,.8,.3,1) .1s both;}
@keyframes petal{0%{opacity:1;transform:translate(0,0) rotate(0);}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(260deg);}}
.k-spotlight.revealing .fx{opacity:1;background:radial-gradient(240px circle at 50% 0%,rgba(255,248,220,.75),transparent 70%);}

/* ---- 06 Learn: index cards in a wave, click = riffle ---- */
.ic{position:absolute;bottom:0;width:40px;height:60px;border-radius:3px;display:grid;place-items:end center;padding-bottom:6px;
  font-family:'Courier Prime',monospace;font-weight:700;font-size:13px;color:#182530;
  background:linear-gradient(#A6501E 0 9px,transparent 9px),
    repeating-linear-gradient(to right,rgba(76,143,214,.18) 0 1px,transparent 1px 8px),
    repeating-linear-gradient(to bottom,rgba(76,143,214,.18) 0 1px,transparent 1px 8px),#F4EEDD;
  box-shadow:0 2px 6px rgba(24,37,48,.3);transform:translateY(30px);transition:transform .5s cubic-bezier(.2,1.5,.4,1);}
.c1{left:24px;} .c2{left:66px;transition-delay:.05s;} .c3{left:108px;transition-delay:.1s;} .c4{left:150px;transition-delay:.15s;} .c5{left:192px;transition-delay:.2s;}
.k-learn:not(.open):is(:hover,:focus-within,.peeking) .c1{transform:translateY(-4px) rotate(-6deg);}
.k-learn:not(.open):is(:hover,:focus-within,.peeking) .c2{transform:translateY(-16px) rotate(-2deg);}
.k-learn:not(.open):is(:hover,:focus-within,.peeking) .c3{transform:translateY(-24px);}
.k-learn:not(.open):is(:hover,:focus-within,.peeking) .c4{transform:translateY(-14px) rotate(3deg);}
.k-learn:not(.open):is(:hover,:focus-within,.peeking) .c5{transform:translateY(-6px) rotate(7deg);}
.k-learn.revealing .ic{animation:riffle .45s cubic-bezier(.3,1.5,.5,1) both;}
.k-learn.revealing .c2{animation-delay:.06s;} .k-learn.revealing .c3{animation-delay:.12s;} .k-learn.revealing .c4{animation-delay:.18s;} .k-learn.revealing .c5{animation-delay:.24s;}
@keyframes riffle{0%{transform:translateY(-14px);}50%{transform:translateY(-40px) rotate(-8deg);}100%{transform:translateY(-18px) rotate(0);}}

/* ---- 07 Creative Arts Dept.: the embroidery peeks, then pops ---- */
.patch-in{position:absolute;inset:0;border-radius:14px;background:#F1E9D8;box-shadow:0 4px 14px rgba(24,37,48,.3);transform-origin:center bottom;}
.patch-in img{position:absolute;left:50%;top:50%;width:118px;height:auto;transform:translate(-50%,-50%);}
.stitch{position:absolute;inset:0;width:100%;height:100%;}
.stitch rect{fill:none;stroke:#D9892B;stroke-width:2.2;stroke-dasharray:6 5;}
.k-shop:not(.open):is(:hover,:focus-within,.peeking) .patch-in{animation:bob 1.8s ease-in-out infinite;}
.k-shop:not(.open):is(:hover,:focus-within,.peeking) .stitch rect{animation:march 1.4s linear infinite;}
@keyframes bob{0%,100%{transform:rotate(-3deg);}50%{transform:translateY(-4px) rotate(3deg);}}
.k-shop.revealing .patch-in{animation:patchpop .62s cubic-bezier(.3,1.5,.5,1) both;}
.k-shop.revealing .stitch rect{animation:march .5s linear infinite;stroke:#EAAC44;stroke-width:3;}
@keyframes patchpop{0%{transform:rotate(-3deg);}55%{transform:scale(1.32) rotate(4deg);box-shadow:0 0 0 6px rgba(234,172,68,.45),0 10px 30px rgba(24,37,48,.4);}
  100%{transform:scale(1.22) rotate(0);box-shadow:0 0 0 3px rgba(234,172,68,.6),0 10px 26px rgba(24,37,48,.35);}}
/* phones: the Creative Arts tab is too wide to peek behind, so the patch lands on the folder's front instead */
@media (max-width:760px){
  .k-shop .peek{z-index:4;right:5%;opacity:0;transform:translateY(calc(var(--strip) + 30px));
    transition:transform .55s cubic-bezier(.2,1.45,.35,1),opacity .25s ease;}
  .k-shop:not(.open):is(:hover,:focus-within,.peeking) .peek,.k-shop.revealing .peek{opacity:1;transform:translateY(calc(var(--strip) + 6px)) !important;}
}