/* The showroom (/showroom). Loaded on that page only, after styles.css.
   Three parts: the stories (a pinned drawing, captions scrolling over it), the desk (three knobs),
   and the sample site inside the browser frame: five outfits, each its own design under .site.sk-*.
   Everything that moves uses transform and opacity only. */

@font-face{font-family:"Fraunces";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/fraunces-700.woff2) format("woff2")}
@font-face{font-family:"Archivo Black";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/archivo-black-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ibm-plex-mono-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ibm-plex-mono-500.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/nunito-400.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/nunito-700.woff2) format("woff2")}

:root{--mono:"IBM Plex Mono",Consolas,monospace;--desk:#1B1917;--desk-2:#2A2622;--cream:#F2EEE8;--cream-2:#B8B0A4;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ------------------------------------------------------------ page chrome */
.sr-intro{padding-block:clamp(36px,3rem + 2vw,72px) 8px}
.sr-intro .lead{font-size:1.2rem;color:var(--ink-2);max-width:58ch}
.sr-skip{margin:0}
.sr-noscript{background:var(--tint);border:1px solid #EBD38F;padding:12px 14px;max-width:62ch}
.sr-after{padding-block:clamp(56px,4rem + 3vw,112px)}
.sr-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px)}
.sr-cols h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem)}
.sr-cols p{color:var(--ink-2)}
.sr-steps{margin:0 0 1em;padding-left:1.4em;display:grid;gap:10px}
.sr-steps li::marker{font-family:var(--display);font-weight:800;color:var(--accent)}
@media (max-width:820px){.sr-cols{grid-template-columns:1fr}}

/* ------------------------------------------------------------ the stories */
.story{padding-top:clamp(28px,3vw,56px)}
.story-head h2{font-size:clamp(1.6rem,1.2rem + 1.8vw,2.4rem);font-weight:800;letter-spacing:-.025em;margin-bottom:.2em}
.story-head p{color:var(--ink-2);margin:0 0 14px}
.track{position:relative;height:calc(100vh * 5.5);height:calc(100svh * 5.5)}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;place-items:center}
.stage svg{width:min(100%,1100px);height:100%;display:block;overflow:visible}
@media (max-width:700px){.stage svg{width:122%;max-width:none}}
.stage-house{background:#1F4E9A;transition:background-color .5s}
.stage-car{background:#2B2E33}
.stage.lit{background:#CFE6F3}
.capt{position:absolute;left:0;right:0;top:calc(var(--at) * 100%);padding:0 20px;pointer-events:none;z-index:2}
.capt-in{max-width:var(--max);margin:0 auto}
.capt b{display:block;font:800 clamp(1.7rem,1.2rem + 2.4vw,3rem)/1.02 var(--display);letter-spacing:-.03em;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.35);max-width:14ch}
.capt p{margin:.35em 0 0;max-width:36ch;color:#fff;font-size:clamp(1rem,.95rem + .4vw,1.2rem);line-height:1.4;text-shadow:0 1px 10px rgba(0,0,0,.45);background:rgba(20,33,61,.55);padding:8px 12px;border-left:4px solid #F4B942;display:inline-block}
.story[data-story=house] .capt:last-child b,.story[data-story=car] .capt:last-child b{color:#F4B942}
@media (max-width:760px){.capt b{max-width:none}.capt p{max-width:none}}
/* the house */
.house .bp-bg,.house .bp-grid{transition:none}
.house .lines .ln{stroke-dasharray:1;stroke-dashoffset:1}
.house .fills > g{opacity:0}
.house .f-walls{transform-origin:400px 392px;transform:scaleY(0)}
.house .f-slab{transform-origin:400px 406px;transform:scaleY(0)}
.house .f-roof{transform:translateY(-90px)}
.house .f-sign{transform-origin:712px 400px;transform:rotate(-14deg) translateY(30px)}
.house .glow{opacity:0}
.house .smoke circle{opacity:0}
.house.done .smoke circle{animation:puff 2.6s ease-out infinite}
.house.done .smoke circle:nth-child(2){animation-delay:.9s}
.house.done .smoke circle:nth-child(3){animation-delay:1.8s}
@keyframes puff{0%{opacity:0;transform:translateY(0) scale(.8)}20%{opacity:.9}100%{opacity:0;transform:translateY(-40px) scale(1.4)}}
/* the car */
.car .part{transform-box:fill-box;transform-origin:center}
.car .wheel{transform-origin:0 0}
.car.done .wheel{animation:roll 1.2s linear infinite}
@keyframes roll{to{transform:rotate(360deg)}}
.car .keys{opacity:0;transform:translateY(-12px);color:#F4B942}
.car .puff circle{opacity:0}
.car.done .puff circle{animation:puff 1.6s ease-out infinite}
.car.done .puff circle:nth-child(2){animation-delay:.7s}
/* the website that arrives at the end of each story */
.endcard{position:absolute;left:50%;bottom:0;width:min(92%,820px);transform:translate(-50%,105%);--ex:-50%;background:#fff;border:2px solid #0B0B0B;border-bottom:0;box-shadow:0 -20px 60px rgba(0,0,0,.35);overflow:hidden;max-height:46%}
.endcard-bar{display:flex;align-items:center;gap:12px;padding:7px 12px;background:#E6E2DA;border-bottom:1.5px solid #B9B2A6}
.dots{display:inline-flex;gap:6px}
.dots i{width:10px;height:10px;border-radius:50%;background:#B9B2A6}
.url{flex:1;background:#fff;border:1px solid #C9C2B6;padding:4px 12px;font:400 .82rem/1.2 var(--mono);color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* reduced motion or no JS: the drawings sit finished and the captions read as a list */
.story.flat .track{height:auto}
.story.flat .stage{position:relative;height:auto;aspect-ratio:16/9;max-height:70vh}
.story.flat .capt{position:static;padding:14px 20px 0}
.story.flat .capt b{color:var(--ink);text-shadow:none}
.story.flat .capt p{color:var(--ink-2);background:var(--tint);text-shadow:none}
.story.flat .capt:last-child b{color:var(--accent)}
.story.flat .endcard{display:none}
@media (min-width:1000px){.endcard{left:auto;right:4%;width:min(58%,760px);--ex:0%}}
.story.flat .house .fills > g,.story.flat .house .glow{opacity:1}
.story.flat .house .f-walls,.story.flat .house .f-slab,.story.flat .house .f-roof,.story.flat .house .f-sign{transform:none}
.story.flat .house .bp-bg,.story.flat .house .bp-grid{opacity:0}
.story.flat .house .lines{opacity:0}
.story.flat .car .part{transform:none;opacity:1}
.story.flat .car .keys{opacity:1;transform:none}
.story.flat .stage-house{background:#CFE6F3}
@media (prefers-reduced-motion:reduce){.house.done .smoke circle,.car.done .wheel,.car.done .puff circle{animation:none}}

/* ------------------------------------------------------------ the desk */
.desk-sec{background:var(--desk);color:var(--cream);padding-top:clamp(40px,5vw,72px);border-top:3px solid #F4B942}
.desk-head h2{color:#fff;font-size:clamp(2rem,1.4rem + 2.6vw,3.3rem);font-weight:800;letter-spacing:-.03em;margin-bottom:.35em}
.desk-head p{color:var(--cream);font-size:1.15rem;max-width:56ch}
.desk-head p.fine{color:var(--cream-2);font-size:.95rem}
.stage2{padding:12px 20px 0;max-width:calc(var(--max) + 40px);margin:0 auto}
.browser{position:relative;border:2px solid #0B0B0B;background:#fff;box-shadow:10px 10px 0 #0B0B0B;overflow:hidden}
.browser-bar{display:flex;align-items:center;gap:14px;padding:8px 12px;background:#E6E2DA;border-bottom:1.5px solid #B9B2A6}
.desk{position:sticky;bottom:0;z-index:6;background:var(--desk);border-top:2px solid var(--desk-2);box-shadow:0 -20px 40px -20px rgba(0,0,0,.6)}
.desk-inner{position:relative;max-width:calc(var(--max) + 40px);margin:0 auto;padding:10px 20px 14px}
.desk-toggle{display:none}
.desk-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,380px);gap:14px 32px;align-items:start}
.dials{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 6px;max-width:460px}
.dial{position:relative;display:grid;justify-items:center;gap:2px;text-align:center}
.knob{width:84px;height:84px;cursor:grab;touch-action:none;border-radius:50%;outline-offset:4px}
.knob:active{cursor:grabbing}
.knob:focus-visible{outline:3px solid #F4B942}
.knob svg{width:100%;height:100%;overflow:visible}
.ticks line{stroke:#6E675D;stroke-width:1.8;stroke-linecap:round}
.cap{fill:#F2EEE8;stroke:#CFC7BA;stroke-width:1.5;filter:drop-shadow(0 3px 2px rgba(0,0,0,.45))}
.ptr{transform:rotate(var(--a,-135deg));transform-origin:50% 50%}
.ptr rect{fill:#14213D}
.dial.live .ptr rect,.knob:hover .ptr rect{fill:#D4961E}
.dial.live .cap{stroke:#F4B942}
.dial-name{font:600 .9rem/1.2 var(--display);color:#fff}
.dial-name output{display:block;font:500 .78rem/1.2 var(--mono);color:#F4B942;min-height:1.1em;letter-spacing:.03em}
.dial-ends{display:flex;justify-content:space-between;gap:10px;width:100%;max-width:112px;font:400 .62rem/1.2 var(--mono);color:#8F877A;letter-spacing:.02em}
.dial-help{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);width:210px;margin:0;padding:8px 10px;background:#fff;color:var(--ink);font-size:.82rem;line-height:1.35;text-align:left;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);opacity:0;pointer-events:none;transition:opacity .12s;z-index:3}
.dial:hover .dial-help,.dial:focus-within .dial-help{opacity:1}
.desk-side{display:grid;gap:8px}
.readout{margin:0;font:400 .9rem/1.45 var(--mono);color:var(--cream)}
.readout b{color:#F4B942;font-weight:500}
.desk-btns{display:flex;flex-wrap:wrap;gap:8px}
.dbtn{min-height:36px;padding:6px 12px;border:1.5px solid var(--cream-2);border-radius:var(--radius);background:transparent;color:#fff;font:600 .88rem/1.2 var(--body);cursor:pointer}
.dbtn:hover{background:var(--desk-2);border-color:#fff}
.dbtn:focus-visible{outline:3px solid #F4B942;outline-offset:2px}
#btn-build{min-height:36px;padding:6px 14px;font-size:.92rem;box-shadow:4px 4px 0 #000;border-color:#000}
#share-msg{margin:0;color:var(--cream-2);font-size:.85rem;min-height:1.2em}
@media (max-width:1000px){.desk-body{grid-template-columns:1fr}.dial-help{display:none}}
@media (max-width:820px){
  .desk-toggle{display:inline-flex;align-items:center;min-height:40px;padding:6px 14px;margin:0 0 6px;border:2px solid #F4B942;background:#F4B942;color:var(--ink);font:600 .92rem/1.2 var(--body);border-radius:var(--radius);cursor:pointer}
  .desk-toggle .dt-closed{display:none}
  .desk.closed .desk-toggle .dt-open{display:none}
  .desk.closed .desk-toggle .dt-closed{display:inline}
  .desk.closed .desk-body{display:none}
  .dials{max-width:none}
  .knob{width:66px;height:66px}
  .dial-ends{max-width:100px;font-size:.6rem}
  .desk-inner{padding-bottom:10px}
}

/* ------------------------------------------------------------ the sample site: shared bones */
.site{position:relative;overflow:hidden;min-height:420px;line-height:1.5;font-size:17px}
.site *{box-sizing:border-box}
.site p{margin:0 0 .7em;max-width:62ch}
.site h1,.site h2,.site h3{margin:0 0 .4em;line-height:1.08;text-wrap:balance}
.site a{color:inherit;text-decoration:none}
.site .wx{max-width:1040px;margin:0 auto;padding-inline:clamp(16px,3vw,36px)}
.site .pic{position:relative;display:grid;place-items:center;text-align:center;padding:12px;min-height:200px;font-size:.9em}
.site .pic b{display:block}
.site .btn-s{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;font-weight:700;text-decoration:none;cursor:pointer}
.site .btn-s.ghost{background:transparent}
.site .mini-hide{display:none}
.site.mini .s-rest{display:none}
.site.mini{min-height:0;font-size:13px;pointer-events:none}
.site.mini .pic{min-height:90px}
/* ---- Suit: a private practice. Cream paper, a serif, hairlines, small capitals, two columns, one quiet button. */
.site.sk-suit{--bg:#F6F1E7;--ink:#22201C;--mute:#6B6257;--acc:#3E5C50;--ln:#D9CFBD;background:var(--bg);color:var(--ink);font-family:"Source Sans 3",Arial,sans-serif;font-size:16.5px}
.site.sk-suit h1,.site.sk-suit h2,.site.sk-suit h3,.site.sk-suit .mast,.site.sk-suit .price{font-family:"Fraunces",Georgia,serif;font-weight:700}
.site.sk-suit .mast{text-align:center;padding:26px 0 14px;border-bottom:1px solid var(--ln);font-size:1.5em;letter-spacing:-.01em}
.site.sk-suit .mast small{display:block;font:600 .62rem/1.4 "Source Sans 3",Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-top:4px}
.site.sk-suit .smenu{display:flex;justify-content:center;gap:28px;padding:10px 0;border-bottom:1px solid var(--ln);font-size:.78em;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.site.sk-suit .shero{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:40px 0 30px}
.site.sk-suit h1{font-size:2.1em;letter-spacing:-.015em;max-width:18ch}
.site.sk-suit .shero .slead{color:var(--mute);font-size:1.05em}
.site.sk-suit .btn-s{border:1.5px solid var(--acc);color:var(--acc);background:transparent;font-weight:600;border-radius:2px;font-size:.95em}
.site.sk-suit .pic{background:#EDE6D8;border:1px solid var(--ln);color:var(--mute);min-height:240px;font-family:"Fraunces",Georgia,serif;font-style:italic}
.site.sk-suit .cols{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding:10px 0 34px;border-top:1px solid var(--ln)}
.site.sk-suit .cols h2{font-size:.72em;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);font-family:"Source Sans 3",Arial,sans-serif;font-weight:600;margin:22px 0 12px}
.site.sk-suit .fees{margin:0;padding:0;list-style:none}
.site.sk-suit .fees li{display:flex;justify-content:space-between;gap:14px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--ln);font-size:.98em}
.site.sk-suit .fees li span:first-child{flex:1}
.site.sk-suit .fees li i{display:block;font-style:normal;font-size:.82em;color:var(--mute)}
.site.sk-suit .fees .price{font-variant-numeric:tabular-nums;color:var(--ink)}
.site.sk-suit .snote{font-family:"Fraunces",Georgia,serif;font-size:1.12em;line-height:1.5;max-width:40ch}
.site.sk-suit .sig{font-size:.88em;color:var(--mute);margin:0}
.site.sk-suit .strip{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding:22px 0 30px;border-top:1px solid var(--ln);font-size:.9em;color:var(--mute)}
.site.sk-suit .strip h3{font:600 .7em/1.4 "Source Sans 3",Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;margin-bottom:8px;color:var(--ink)}
.site.sk-suit .strip dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:3px 12px}
.site.sk-suit .strip dd{margin:0}
.site.sk-suit .foot{text-align:center;padding:14px 0 20px;border-top:1px solid var(--ln);font-size:.78em;letter-spacing:.08em;color:var(--mute)}
@media (max-width:700px){.site.sk-suit .shero,.site.sk-suit .cols,.site.sk-suit .strip{grid-template-columns:1fr;gap:18px}.site.sk-suit .smenu{gap:16px;flex-wrap:wrap}}
/* ---- Smart: clean, modern, tidy. White, slate, one blue, Archivo, a grid of rows. */
.site.sk-smart{--bg:#fff;--ink:#1D2733;--mute:#5B6878;--acc:#2457C5;--soft:#EEF3FB;--ln:#DCE3EC;background:var(--bg);color:var(--ink);font-family:"Source Sans 3",Arial,sans-serif}
.site.sk-smart h1,.site.sk-smart h2,.site.sk-smart h3,.site.sk-smart .slogo{font-family:"Archivo",Arial,sans-serif;font-weight:600;letter-spacing:-.02em}
.site.sk-smart .snav{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 0;border-bottom:1px solid var(--ln)}
.site.sk-smart .slogo{font-size:1.2em}
.site.sk-smart .links{display:flex;gap:20px;font-weight:600;color:var(--mute);font-size:.95em}
.site.sk-smart .btn-s{background:var(--acc);color:#fff;border-radius:6px;font-size:.95em}
.site.sk-smart .btn-s.ghost{background:transparent;color:var(--acc);border:1.5px solid var(--acc)}
.site.sk-smart .shero{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;padding:44px 0 36px}
.site.sk-smart h1{font-size:2.5em;max-width:16ch;font-weight:700}
.site.sk-smart .slead{color:var(--mute);font-size:1.1em}
.site.sk-smart .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.site.sk-smart .pic{background:var(--soft);border-radius:10px;color:var(--mute);min-height:250px}
.site.sk-smart .trust{display:flex;flex-wrap:wrap;gap:8px 22px;padding:12px 0 26px;font-size:.92em;color:var(--mute);border-bottom:1px solid var(--ln)}
.site.sk-smart .trust span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--acc);margin-right:8px;vertical-align:middle}
.site.sk-smart h2{font-size:1.5em;margin:30px 0 12px}
.site.sk-smart .rows{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;margin:0;padding:0;list-style:none}
.site.sk-smart .rows li{display:grid;grid-template-columns:1fr auto;grid-template-areas:"n p" "d p";gap:0 16px;align-items:center;padding:12px 0;border-top:1px solid var(--ln)}
.site.sk-smart .rows b{grid-area:n;font-weight:600}
.site.sk-smart .rows i{grid-area:d;font-style:normal;color:var(--mute);font-size:.9em}
.site.sk-smart .rows .price{grid-area:p;font-family:"Archivo",Arial,sans-serif;font-weight:600;font-variant-numeric:tabular-nums;color:var(--acc)}
.site.sk-smart .stwo{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:30px 0;align-items:start}
.site.sk-smart .stwo .pic{min-height:200px}
.site.sk-smart .snote{font-size:1.05em}
.site.sk-smart .sig{font-weight:600;margin:0}
.site.sk-smart .info{display:grid;grid-template-columns:1fr 1fr;gap:30px;padding:24px 0;border-top:1px solid var(--ln);font-size:.95em}
.site.sk-smart .info h3{font-size:.95em;margin-bottom:8px}
.site.sk-smart .info dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 14px}.site.sk-smart .info dd{margin:0}.site.sk-smart .info dt{color:var(--mute)}
.site.sk-smart .band{background:var(--acc);color:#fff;border-radius:10px;padding:26px 30px;display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between;margin:10px 0 24px}
.site.sk-smart .band h2{margin:0;color:#fff}
.site.sk-smart .band .btn-s{background:#fff;color:var(--acc)}
.site.sk-smart .foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;padding:16px 0;border-top:1px solid var(--ln);font-size:.85em;color:var(--mute)}
@media (max-width:700px){.site.sk-smart .shero,.site.sk-smart .rows,.site.sk-smart .stwo,.site.sk-smart .info{grid-template-columns:1fr;gap:18px}.site.sk-smart .links{display:none}}
/* ---- Friendly: warm and round. Peach, orange, Nunito, big rounded photo cards, chunky pill buttons. */
.site.sk-friendly{--bg:#FFF1E2;--ink:#3A2518;--mute:#7A5A47;--acc:#B84E15;--card:#FFFAF4;--ln:#F2D9C0;background:var(--bg);color:var(--ink);font-family:"Nunito",Arial,sans-serif;font-size:17.5px}
.site.sk-friendly h1,.site.sk-friendly h2,.site.sk-friendly h3,.site.sk-friendly .slogo{font-family:"Nunito",Arial,sans-serif;font-weight:700}
.site.sk-friendly .snav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0}
.site.sk-friendly .slogo{font-size:1.35em;color:var(--acc)}
.site.sk-friendly .btn-s{background:var(--acc);color:#fff;border-radius:999px;padding:12px 22px;font-weight:700}
.site.sk-friendly .btn-s.ghost{background:transparent;color:var(--acc);border:2px solid var(--acc)}
.site.sk-friendly .shero{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;padding:20px 0 30px}
.site.sk-friendly h1{font-size:2.5em;line-height:1.08;max-width:14ch}
.site.sk-friendly .slead{font-size:1.08em;color:var(--mute)}
.site.sk-friendly .ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.site.sk-friendly .pic{background:var(--card);border:2px dashed var(--ln);border-radius:28px;color:var(--mute);min-height:260px;transform:rotate(-2deg)}
.site.sk-friendly .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0;padding:0;list-style:none}
.site.sk-friendly .cards li{background:var(--card);border-radius:18px;padding:16px;display:grid;gap:4px;border:1px solid var(--ln)}
.site.sk-friendly .cards li::before{content:"";height:70px;border-radius:12px;background:#FFE4CB;margin-bottom:6px}
.site.sk-friendly .cards b{font-size:1.02em}
.site.sk-friendly .cards i{font-style:normal;font-size:.88em;color:var(--mute)}
.site.sk-friendly .cards .price{font-weight:700;color:var(--acc);font-size:1.15em}
.site.sk-friendly h2{font-size:1.6em;margin:26px 0 12px}
.site.sk-friendly .owner{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;padding:28px 0}
.site.sk-friendly .owner .face{width:84px;height:84px;border-radius:50%;background:#F5C9A3;border:3px solid #fff;display:grid;place-items:center;font-size:.75em;color:var(--ink);text-align:center}
.site.sk-friendly .snote{font-size:1.08em}.site.sk-friendly .sig{font-weight:700;margin:0;color:var(--acc)}
.site.sk-friendly .info{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:4px 0 26px}
.site.sk-friendly .info > div{background:var(--card);border-radius:18px;padding:18px;border:1px solid var(--ln)}
.site.sk-friendly .info h3{font-size:1.05em;margin-bottom:8px}
.site.sk-friendly .info dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 14px}.site.sk-friendly .info dd{margin:0}.site.sk-friendly .info dt{color:var(--mute)}
.site.sk-friendly .band{background:var(--acc);color:#fff;border-radius:24px;padding:26px 30px;display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between;margin:0 0 24px}
.site.sk-friendly .band h2{margin:0;color:#fff}
.site.sk-friendly .band .btn-s{background:#fff;color:var(--acc)}
.site.sk-friendly .foot{text-align:center;padding:12px 0 20px;font-size:.88em;color:var(--mute)}
@media (max-width:700px){.site.sk-friendly .shero,.site.sk-friendly .info{grid-template-columns:1fr}.site.sk-friendly .cards{grid-template-columns:1fr 1fr}.site.sk-friendly .pic{min-height:180px}}
/* ---- Loud: the sale is on. Red, yellow, black lines, Archivo Black, giant prices, a call bar. */
.site.sk-loud{--bg:#fff;--ink:#0B0B0B;--mute:#3A3A3A;--acc:#D7261A;--pop:#FFD60A;background:var(--bg);color:var(--ink);font-family:"Archivo",Arial,sans-serif}
.site.sk-loud h1,.site.sk-loud h2,.site.sk-loud .slogo,.site.sk-loud .big{font-family:"Archivo Black",Arial,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:-.01em}
.site.sk-loud .callbar{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;justify-content:center;padding:10px 16px;background:var(--ink);color:#fff;font-weight:700}
.site.sk-loud .callbar .btn-s{background:var(--pop);color:var(--ink);border:3px solid var(--pop);min-height:40px;padding:6px 16px;text-transform:uppercase}
.site.sk-loud .snav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:4px solid var(--ink)}
.site.sk-loud .slogo{font-size:1.2em}
.site.sk-loud .btn-s{background:var(--acc);color:#fff;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);text-transform:uppercase;font-weight:800;font-size:1.02em}
.site.sk-loud .btn-s.ghost{background:#fff;color:var(--ink)}
.site.sk-loud .shero{display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center;padding:28px 0 22px}
.site.sk-loud .sticker{display:inline-block;transform:rotate(-4deg);background:var(--pop);border:3px solid var(--ink);padding:7px 12px;font-weight:800;margin:0 0 14px;box-shadow:4px 4px 0 var(--ink)}
.site.sk-loud h1{font-size:3.1em;line-height:.98;max-width:12ch}
.site.sk-loud .slead{font-weight:600;font-size:1.08em}
.site.sk-loud .ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px}
.site.sk-loud .pic{border:4px solid var(--ink);background:repeating-linear-gradient(135deg,transparent 0 10px,rgba(0,0,0,.06) 10px 11px),#fff;box-shadow:8px 8px 0 var(--acc);min-height:230px;color:var(--mute)}
.site.sk-loud h2{font-size:1.8em;margin:26px 0 10px}
.site.sk-loud .offers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0;padding:0;list-style:none}
.site.sk-loud .offers li{border:4px solid var(--ink);padding:16px;background:#fff;box-shadow:6px 6px 0 var(--ink);display:grid;gap:4px;align-content:start}
.site.sk-loud .offers b{font-size:1.05em;text-transform:uppercase}
.site.sk-loud .offers i{font-style:normal;color:var(--mute);font-size:.9em}
.site.sk-loud .offers .price{font-family:"Archivo Black",Arial,sans-serif;font-size:2.1em;line-height:1;background:var(--pop);display:inline-block;justify-self:start;padding:4px 10px;margin-top:6px;border:3px solid var(--ink)}
.site.sk-loud .owner{display:grid;grid-template-columns:1fr 1fr;gap:30px;padding:30px 0;align-items:center}
.site.sk-loud .snote{font-size:1.1em;font-weight:600}.site.sk-loud .sig{font-family:"Archivo Black",Arial,sans-serif;margin:0;text-transform:uppercase}
.site.sk-loud .info{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:4px 0 24px;border-top:4px solid var(--ink)}
.site.sk-loud .info h3{font-weight:800;text-transform:uppercase;font-size:.9em;letter-spacing:.04em;margin:18px 0 8px}
.site.sk-loud .info dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 14px}.site.sk-loud .info dd{margin:0;font-weight:600}
.site.sk-loud .band{background:var(--acc);color:#fff;padding:26px 28px;display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between;margin:0 0 24px;border:4px solid var(--ink);box-shadow:8px 8px 0 var(--ink)}
.site.sk-loud .band h2{margin:0;color:#fff;font-size:1.7em}
.site.sk-loud .band .btn-s{background:var(--pop);color:var(--ink)}
.site.sk-loud .foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;padding:16px 0;border-top:4px solid var(--ink);font-size:.85em;font-weight:600}
@media (max-width:700px){.site.sk-loud .shero,.site.sk-loud .owner,.site.sk-loud .info{grid-template-columns:1fr}.site.sk-loud .offers{grid-template-columns:1fr 1fr;gap:12px}.site.sk-loud h1{font-size:2.3em}}
/* ---- Trainers: the hip one. Off-black, acid lime, hot pink, giant tilted type, a marquee, grain. */
.site.sk-trainers{--bg:#0C0C0C;--ink:#F3F3F0;--mute:#A4A49C;--acc:#C8FF00;--pink:#FF3D8A;--ln:#2A2A2A;background:var(--bg);color:var(--ink);font-family:"Archivo",Arial,sans-serif}
.site.sk-trainers::after{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:.12;pointer-events:none;mix-blend-mode:screen}
.site.sk-trainers h1,.site.sk-trainers .slogo,.site.sk-trainers .big,.site.sk-trainers .marq{font-family:"Archivo Black",Arial,sans-serif;font-weight:400}
.site.sk-trainers .snav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0}
.site.sk-trainers .slogo{font-size:1.3em;text-transform:lowercase;letter-spacing:-.04em}
.site.sk-trainers .links{display:flex;gap:18px;font-family:var(--mono);font-size:.85em;color:var(--mute)}
.site.sk-trainers .btn-s{background:var(--acc);color:#0C0C0C;border-radius:999px;font-weight:800;text-transform:lowercase;padding:10px 20px}
.site.sk-trainers .btn-s.ghost{background:transparent;color:var(--ink);border:2px solid var(--ink)}
.site.sk-trainers .shero{padding:34px 0 20px;position:relative}
.site.sk-trainers h1{font-size:clamp(3.2em,9vw,6.4em);line-height:.86;letter-spacing:-.045em;text-transform:uppercase;transform:rotate(-2.5deg);transform-origin:left bottom;max-width:9ch;margin:0 0 .25em}
.site.sk-trainers h1 em{font-style:normal;color:var(--acc)}
.site.sk-trainers .sticker{position:absolute;right:4%;top:18px;transform:rotate(9deg);background:var(--pink);color:#0C0C0C;padding:10px 14px;font-weight:800;border-radius:4px;max-width:200px;text-align:center;line-height:1.15}
.site.sk-trainers .slead{font-family:var(--mono);color:var(--mute);max-width:44ch;font-size:.95em}
.site.sk-trainers .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
.site.sk-trainers .marq{overflow:hidden;white-space:nowrap;border-top:2px solid var(--acc);border-bottom:2px solid var(--acc);padding:10px 0;margin:26px 0;color:var(--acc);text-transform:uppercase;font-size:1.1em;letter-spacing:.02em}
.site.sk-trainers .marq span{display:inline-block;padding-right:40px}
.site.sk-trainers.mv-some .marq span,.site.sk-trainers.mv-lots .marq span{animation:marq 18s linear infinite}
@keyframes marq{to{transform:translateX(-50%)}}
.site.sk-trainers .tiles{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;margin:0 0 10px}
.site.sk-trainers .pic{background:#1A1A1A;border:1px solid var(--ln);min-height:220px;color:var(--mute);font-family:var(--mono);font-size:.85em}
.site.sk-trainers .tiles .pic:last-child{transform:rotate(2deg) translateY(16px)}
.site.sk-trainers .biglist{margin:30px 0 0;padding:0;list-style:none;counter-reset:n}
.site.sk-trainers .biglist li{display:grid;grid-template-columns:3em 1fr auto;gap:0 14px;align-items:baseline;padding:14px 0;border-top:1px solid var(--ln);counter-increment:n}
.site.sk-trainers .biglist li::before{content:counter(n,decimal-leading-zero);font-family:var(--mono);color:var(--mute);font-size:.85em}
.site.sk-trainers .biglist b{font-family:"Archivo Black",Arial,sans-serif;font-weight:400;font-size:1.35em;text-transform:uppercase;letter-spacing:-.02em}
.site.sk-trainers .biglist i{display:block;font-style:normal;color:var(--mute);font-family:var(--mono);font-size:.82em}
.site.sk-trainers .biglist .price{font-family:"Archivo Black",Arial,sans-serif;color:var(--acc);font-size:1.5em}
.site.sk-trainers .owner{padding:34px 0 20px;display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:end}
.site.sk-trainers .snote{font-size:1.25em;line-height:1.35;font-weight:600;max-width:30ch}
.site.sk-trainers .sig{font-family:var(--mono);color:var(--acc);margin:0}
.site.sk-trainers .info{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:20px 0;border-top:1px solid var(--ln);font-family:var(--mono);font-size:.88em;color:var(--mute)}
.site.sk-trainers .info h3{color:var(--ink);font-family:"Archivo Black",Arial,sans-serif;font-weight:400;text-transform:uppercase;font-size:.95em;margin-bottom:8px}
.site.sk-trainers .info dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 14px}.site.sk-trainers .info dd{margin:0;color:var(--ink)}
.site.sk-trainers .band{border:2px solid var(--acc);padding:26px;display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between;margin:10px 0 24px;transform:rotate(-1deg)}
.site.sk-trainers .band .big{font-size:1.8em;text-transform:uppercase;letter-spacing:-.03em;margin:0}
.site.sk-trainers .foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;padding:16px 0;font-family:var(--mono);font-size:.8em;color:var(--mute)}
@media (max-width:700px){.site.sk-trainers .tiles,.site.sk-trainers .owner,.site.sk-trainers .info{grid-template-columns:1fr}.site.sk-trainers .sticker{position:static;display:inline-block;margin-bottom:14px}.site.sk-trainers .links{display:none}}
/* motion, shared by every outfit */
.site.mv-some .btn-s,.site.mv-lots .btn-s{transition:transform .18s ease}
.site.mv-some .btn-s:hover,.site.mv-lots .btn-s:hover{transform:translateY(-3px)}
.site.mv-some .rv,.site.mv-lots .rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.site.mv-some .rv.in,.site.mv-lots .rv.in{opacity:1;transform:none}
.site.mv-lots .rv{transition-delay:calc(var(--n,0) * 80ms)}
.site.mv-lots .pic{transition:transform .5s ease}
.site.mv-lots .pic:hover{transform:rotate(0deg) scale(1.02)}
.site.mv-lots.sk-trainers h1{transition:letter-spacing .4s}
.site.mv-lots.sk-trainers h1:hover{letter-spacing:0}
.site-shards{position:absolute;inset:0;z-index:4;pointer-events:none}
.shard{position:absolute;inset:0;clip-path:var(--clip);transform-origin:var(--ox) var(--oy);will-change:transform,opacity}
.site-shards .shard > *{position:absolute;left:0;top:0;width:100%}
.browser.breaking .site{visibility:hidden}

/* ------------------------------------------------------------ the ideas wall */
.ideas{padding-block:clamp(48px,4rem + 2vw,96px) 0;position:relative}
.ideas h2{font-size:clamp(2rem,1.4rem + 2.6vw,3.3rem);font-weight:800;letter-spacing:-.03em;margin-bottom:.3em}
.ideas-lead{font-size:1.15rem;color:var(--ink-2);max-width:60ch}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 22px}
.chip{min-height:38px;padding:6px 14px;border:2px solid var(--ink);border-radius:999px;background:var(--surface);color:var(--ink);font:600 .92rem/1.2 var(--body);cursor:pointer}
.chip.on{background:var(--ink);color:#fff}
.chip:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.idea-grid{list-style:none;margin:0;padding:0 0 40px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.idea{background:var(--surface);border:2px solid var(--ink);padding:18px 18px 16px;display:grid;gap:8px;align-content:start;position:relative}
.idea[hidden]{display:none}
.idea h3{font-size:1.15rem;margin:0;letter-spacing:-.01em}
.idea p{margin:0;color:var(--ink-2);font-size:.98rem}
.idea-for{display:flex;justify-content:space-between;gap:10px;font-size:.84rem;color:var(--ink-2);border-top:1px solid var(--line);padding-top:10px;margin-top:4px}
.idea-for span:last-child{font-family:var(--display);font-weight:600;color:var(--ink);white-space:nowrap}
.idea-add{justify-self:start;min-height:36px;padding:6px 12px;border:2px solid var(--ink);border-radius:var(--radius);background:transparent;color:var(--ink);font:600 .88rem/1.2 var(--body);cursor:pointer}
.idea-add .ia-on{display:none}
.idea-add[aria-pressed=true]{background:var(--pop);box-shadow:3px 3px 0 var(--ink)}
.idea-add[aria-pressed=true] .ia-off{display:none}
.idea-add[aria-pressed=true] .ia-on{display:inline}
.idea.listed{box-shadow:6px 6px 0 var(--pop),6px 6px 0 2px var(--ink)}
.list-bar{position:sticky;bottom:0;z-index:5;background:var(--ink);color:#fff;border-top:3px solid var(--pop)}
.list-in{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding-block:12px}
.list-in p{margin:0;flex:1;min-width:200px;font-weight:600}
.list-in .dbtn{border-color:#D5DBE6}
.list-in .btn-pop{box-shadow:4px 4px 0 var(--accent)}
@media (max-width:900px){.idea-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.idea-grid{grid-template-columns:1fr}}