/* STEF KEYCAPS — the site-wide stylesheet, loaded by every public page (the admin panel has its own).
   It is the old stylesheets joined end to end, in their original load order, so a later part deliberately overrides an earlier
   one: keep the ORDER. Search for a part's heading line to jump to it.

   CONTENTS (top to bottom)
     from style.css ........ the original layout: sections, hero, kits, details, group buy, footer, reveal animation, header base
     from header-fix.css ... the fixed header pill's geometry
     from retro.css ........ palette (:root), retro skin: header, buttons, window chrome, ticker, hero, home + product sections,
                             footer, back-to-top button, whole-page select lock, checkout skin, responsive
     from retro2.css ....... 70s type, ORDER STATUS button, window-chrome squares, ticker loop, barcode, colour, inner pages,
                             order status / order received pages
     from retro3.css ....... the SK Vintage / SK Subheading fonts and type recipes, buttons, nav halo, curves, home, GMK, about
     from retro4.css ....... polish + performance pass (type roles, die-cut logo, footer, small fixes)
     from assets/sk-gate.css  the closing doors between the site and the GMK PACKAGE pages
     from assets/sk-site.css  site-wide finishing: text, hero tag, titles, header, footer, page width, then dated V43–V59 fixes
   2026-10-30 cleanup: removed rules for things no longer on any page (.desk, .parcel, .novelty rows, .designer, .brand,
   .footer-brand, footer .legal, .success-head, the old "keycaps & more" ::after text) and the header's old ::before / ::after
   blur layers, which later rules hid on every page. Nothing on screen changed. */

/* ============================== from style.css ============================== */
/* Google Fonts (DM Mono, Space Grotesk, Anton) load from a <link> in each page's <head>, not an @import: an @import here made the fonts wait for this file first. */

:root{--max:1240px}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);font-family:"Space Grotesk",system-ui,sans-serif;overflow-x:hidden}
body:before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,transparent 49.95%,rgba(51,39,31,.025) 50%,transparent 50.05%);
  z-index:-1;
}
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:20; opacity:.065;
  background-image:url("/assets/img/grain.png");background-size:64px 64px;
}
a{color:inherit;text-decoration:none}
.section{max-width:var(--max);margin:auto;padding-left:32px;padding-right:32px}
.nav{justify-content:space-between;font-size:11px;letter-spacing:.08em}

.hero{min-height:100vh;position:relative;display:grid;grid-template-columns:.85fr 1.15fr;align-items:center;gap:40px}
.hero-copy{padding-bottom:60px}
.eyebrow,.hero-foot,.details-label,.detail span,.checkout-note,.footer,.nav{font-family:"DM Mono",monospace}
.eyebrow{margin:0 0 24px}

h1{
  margin:0;
  font-size:clamp(78px,11vw,170px);
  line-height:.77;
  letter-spacing:-.075em;
  font-weight:700;
}
h1 em,h2 em{font-style:normal;color:var(--red)}
.hero-line{font-size:20px;line-height:1.35;margin:38px 0}
.hero-actions{display:flex;align-items:center;gap:26px}
.button{display:inline-flex;align-items:center;justify-content:space-between;min-width:205px;padding:15px 17px;font-family:"DM Mono",monospace;font-size:11px;letter-spacing:.07em}

.button-red:hover{transform:translateY(-3px);box-shadow:7px 7px 0 rgba(51,39,31,.18)}
.text-link{font-family:"DM Mono",monospace;font-size:10px}
.hero-art{position:relative}

/* Hero inspection bar: viewport-width aligned with the header, but part of the hero flow. */
.hero-foot{
  position:absolute !important;
  z-index:5;
  left:50%;
  right:auto;
  bottom:20px;
  width:min(1180px,calc(100% - 28px));
  transform:translateX(-50%);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:clamp(24px,5vw,70px);
  font-size:9px;
  letter-spacing:.08em;
  border-top:1px solid var(--line);
  padding-top:12px;
  pointer-events:none;
}
.hero-foot span{white-space:nowrap}
.hero-foot span:last-child{pointer-events:auto;cursor:pointer}

.manifest{display:grid;grid-template-columns:.55fr 1fr;gap:80px;padding-top:150px;padding-bottom:120px}
.section-heading>span{font:10px "DM Mono",monospace}
.section-heading h2,.novelty-intro h2,.group-buy h2{margin:22px 0 0}
.manifest-copy{padding-top:35px;max-width:620px}
.large-copy{font-size:clamp(25px,3vw,42px);line-height:1.1;margin:0 0 35px}
.small-copy{font:13px/1.7 "DM Mono",monospace;max-width:460px;opacity:.75}

.kits{display:grid;gap:28px;padding-bottom:160px}
.kit-card{background:#e5dfd1;border:1px solid var(--line);padding:18px}
.kit-offset{margin-top:120px}

.kit-image{overflow:hidden;margin-top:18px}
.kit-image img{display:block;width:100%;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.kit-card:hover img{transform:scale(1.025)}
.kit-bottom{display:grid;grid-template-columns:.6fr 1fr;gap:20px;border-top:1px solid var(--line);margin-top:18px;padding-top:16px}
.kit-bottom h3{margin:0}
.kit-bottom p{font:11px/1.6 "DM Mono",monospace;margin:0}

.details{background:var(--ink);color:var(--paper);max-width:none;padding-top:90px;padding-bottom:90px;display:grid;grid-template-columns:.35fr 1fr;gap:70px}
.details-label{font-size:10px;letter-spacing:.1em}

.details-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(238,233,220,.25)}
.detail{padding:24px 0;border-bottom:1px solid rgba(238,233,220,.25);display:flex;flex-direction:column;gap:9px}
.detail:nth-child(odd){padding-right:25px}
.detail:nth-child(even){padding-left:25px;border-left:1px solid rgba(238,233,220,.25)}
.detail span{font-size:8px;letter-spacing:.12em;opacity:.55}
.detail strong{font-size:14px;font-weight:500;letter-spacing:.02em}

.novelty-intro>span{font:10px "DM Mono",monospace}

.group-buy{max-width:none;padding-top:90px;padding-bottom:120px}

.group-buy-main{max-width:var(--max);margin:auto;padding:90px 32px 0;display:grid;grid-template-columns:1fr .8fr;gap:100px}
.buy-panel{align-self:end}
.buy-row{display:flex;justify-content:space-between;font:9px "DM Mono",monospace}
.buy-row strong{font-weight:500}
.button.full{width:100%;margin-top:28px}
.checkout-note{line-height:1.6;margin-top:12px}

.footer{max-width:none;padding:25px 32px;display:flex;justify-content:space-between;border-top:1px solid var(--line);font-size:8px;letter-spacing:.08em}
.footer div{display:flex;gap:24px}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.is-visible{opacity:1;transform:none}
.reveal-delay{transition-delay:.16s}
@keyframes float{0%,100%{transform:rotate(-1.5deg) translateY(0)}50%{transform:rotate(-1.5deg) translateY(-9px)}}

@media(max-width:800px){

  .section{padding-left:18px;padding-right:18px}
  .hero{display:block;min-height:auto}
  .hero-copy{padding-bottom:50px}.hero-line{font-size:17px}
  h1{font-size:clamp(68px,19vw,120px)}
  .hero-art{width:calc(100% + 5px);margin-left:-2px}

  /* On phones the inspection prompt disappears; the bar remains in the hero flow. */
  .hero-foot{
    position:absolute !important;
    left:50%;
    right:auto;
    bottom:14px;
    width:calc(100% - 36px);
    transform:translateX(-50%);
    margin:0;
    padding-top:10px;
    gap:10px;
    flex-wrap:wrap;
    justify-content:space-between;
  }
  .hero-foot span:last-child{display:none}
  .manifest,.details{display:block}
  .manifest{padding-top:100px;padding-bottom:80px}.manifest-copy{padding-top:55px}
  .kits{gap:30px;padding-bottom:100px}.kit-offset{margin-top:0}
  .kit-bottom{grid-template-columns:1fr}
  .details{padding-left:18px;padding-right:18px}.details-grid{margin-top:50px}


  .group-buy-main{display:block;padding:65px 18px 0}.buy-panel{margin-top:65px}
  .footer{padding:22px 18px;display:block}.footer div{justify-content:space-between}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none!important;transition:none!important}
}

.footer{position:relative;flex-wrap:wrap;gap:18px}

/* v4 — final header + inline designer lockup */
.nav{display:grid;grid-template-columns:140px 1fr 140px;align-items:center;padding:8px 10px 8px 14px;border:1px solid rgba(51,39,31,.13);mix-blend-mode:normal}

.stef-header-mark{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  width:100%;
  height:100%;
}
.stef-header-mark img{
  display:block;
  width:68px;
  height:36px;
  object-fit:contain;
  object-position:left center;
}

.nav-links{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(14px,2.5vw,32px);
}
.nav-links a{font:8px "DM Mono",monospace;opacity:.72;transition:opacity .25s ease,color .25s ease}
.nav-links a:hover{opacity:1;color:var(--red)}

.nav-cta{justify-self:end;display:flex;align-items:center;justify-content:space-between;gap:14px;background:rgba(51,39,31,.92);color:var(--paper);font:8px "DM Mono",monospace;transition:transform .25s ease,background .25s ease}
.nav-cta:hover{
  transform:translateY(-2px);
  background:var(--red);
}

@media(max-width:800px){
  .nav{grid-template-columns:72px 1fr 94px;padding:7px 8px 7px 11px}
  .stef-header-mark img{width:58px;height:31px}
  .nav-links{gap:0}
  .nav-links a{display:none}
  .nav-links a:first-child{display:block}

}

.gb-progress{margin:24px 0 14px;overflow:hidden}.gb-progress span{display:block;height:100%;width:0%;transition:width .7s ease}

/* Final polish: centered designer credit + even group-buy info rows */

.buy-row{min-height:50px;box-sizing:border-box;align-items:center;padding:0;}
.buy-row span,.buy-row strong{display:flex;align-items:center;min-height:50px;}

/* Final alignment fixes */
.details-grid{align-items:stretch}
.details-grid > *{min-height:100%;box-sizing:border-box}

/* GMK PACKAGE release-hold polish */
.kits{grid-template-columns:repeat(3,minmax(0,1fr));}
@media(max-width:980px){.kits{grid-template-columns:1fr 1fr}.kit-offset{margin-top:0}.kits .kit-card:nth-child(3){grid-column:1 / -1;max-width:calc(50% - 14px);width:100%;justify-self:center;}}
@media(max-width:800px){.kits{grid-template-columns:1fr}.kits .kit-card:nth-child(3){grid-column:auto;max-width:none;justify-self:stretch}}

/* Release hold: disabled purchase controls remain visually present but cannot be used. */
.co-btn.is-disabled{background:#aaa49b!important;border-color:#aaa49b!important;color:#eee9dc!important;cursor:not-allowed!important;opacity:.78;filter:grayscale(1);pointer-events:none}

.group-buy-action{margin-top:18px;min-height:52px;display:flex;align-items:center;justify-content:center;}
.group-buy-action.is-closed{font:8px "DM Mono",monospace;letter-spacing:.12em;text-transform:uppercase;opacity:.65;border:1px solid var(--line);background:rgba(58,42,29,.035);}
.group-buy-action .button{width:100%;box-sizing:border-box;}
/* FINAL HEADER POSITIONING */

body { --gmk-header-height: 86px; }

/* FINAL PINNED HEADER — intentionally fixed to the viewport on every page */

.nav{top:14px!important;left:50%!important;right:auto!important;bottom:auto!important;transform:translateX(-50%)!important;visibility:visible!important;opacity:1!important}
@media (max-width: 800px) {
  .nav{top:9px!important;left:50%!important;right:auto!important;bottom:auto!important;transform:translateX(-50%)!important}
}

/* UNIVERSAL HEADER DIFFUSION — applies to every .nav header on every page */
.nav {
  isolation: isolate !important;
}
.nav > * { position: relative; z-index: 1 !important; }

/* ============================================================
   HEADER GLASS / VIEWPORT DIFFUSION v4
   The diffusion is a separate, full-viewport layer behind the
   fixed header. It is intentionally NOT a pseudo-element of .nav.
   Strongest at the top of the viewport, then softly disappears.
   ============================================================ */
body::after{
  content:"" !important;
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  width:100vw !important;
  height:170px !important;
  pointer-events:none !important;
  z-index:999 !important;
  background:linear-gradient(
    to bottom,
    rgba(245,241,231,.58) 0%,
    rgba(245,241,231,.46) 18%,
    rgba(245,241,231,.31) 38%,
    rgba(245,241,231,.17) 58%,
    rgba(245,241,231,.065) 78%,
    rgba(245,241,231,0) 100%
  ) !important;
  -webkit-backdrop-filter:blur(38px) saturate(108%) !important;
  backdrop-filter:blur(38px) saturate(108%) !important;
  -webkit-mask-image:linear-gradient(
    to bottom,
    #000 0%,
    #000 18%,
    rgba(0,0,0,.92) 38%,
    rgba(0,0,0,.62) 58%,
    rgba(0,0,0,.24) 80%,
    transparent 100%
  ) !important;
  mask-image:linear-gradient(
    to bottom,
    #000 0%,
    #000 18%,
    rgba(0,0,0,.92) 38%,
    rgba(0,0,0,.62) 58%,
    rgba(0,0,0,.24) 80%,
    transparent 100%
  ) !important;
}

/* Keep the actual header visually above the diffusion, with a restrained
   frosted surface so the page imagery cannot read through sharply. */
.nav{z-index:2147483647!important}

@media(max-width:800px){
  body::after{
    height:145px !important;
    background:linear-gradient(
      to bottom,
      rgba(245,241,231,.62) 0%,
      rgba(245,241,231,.48) 20%,
      rgba(245,241,231,.30) 42%,
      rgba(245,241,231,.13) 64%,
      rgba(245,241,231,.04) 82%,
      rgba(245,241,231,0) 100%
    ) !important;
    -webkit-backdrop-filter:blur(34px) saturate(108%) !important;
    backdrop-filter:blur(34px) saturate(108%) !important;
  }

}

/* ============================================================
   HEADER GLASS BALANCE v5
   Keep the full-viewport diffusion underneath, but make the
   actual rounded header much less frosted so imagery/color can
   pass through naturally. The header remains crisp; the blur
   belongs to the viewport layer behind it.
   ============================================================ */
.nav{
  background:rgba(245,241,231,.70) !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  box-shadow:
    0 10px 30px rgba(51,39,31,.045),
    inset 0 1px 0 rgba(255,255,255,.58) !important;
}

@media(max-width:800px){
  .nav{
    background:rgba(245,241,231,.73) !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
  }
}

/* RELEASE STATUS UNAVAILABLE — neutral state when the API request fails. */

.group-buy-action.is-unavailable{font:8px "DM Mono",monospace;letter-spacing:.12em;text-transform:uppercase;opacity:.65;border:1px solid var(--line);background:rgba(58,42,29,.035);}

/* ============================================================
   HEADER NAV TRUE CENTERING v7
   The navigation is centered against the full rounded header
   itself, never against the space between the left mark and CTA.
   ============================================================ */
.nav{
  position:fixed !important;
}
.nav .nav-links{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:max-content !important;
  margin:0 !important;
  z-index:3 !important;
}

@media(max-width:800px){
  .nav .nav-links{
    left:50% !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;
  }
}

/* ============================================================
   HEADER PILL STANDARD — shared exact geometry and typography
   across every GMK PACKAGE page.
   ============================================================ */

.nav-links a,
.nav-cta{
  font-family:"DM Mono",monospace !important;
  font-size:8px !important;
  line-height:1 !important;
  letter-spacing:.10em !important;
}

/* FINAL HEADER OVERRIDE */
.nav{
  width:min(1180px,calc(100% - 28px)) !important;
  height:58px !important;
  border-radius:999px !important;
  overflow:hidden !important;
}

.nav-links{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%,-50%) !important;
  width:max-content !important;
  margin:0 !important;
}

.nav-links a{
  font-family:"DM Mono",monospace !important;
  font-size:8px !important;
  line-height:1 !important;
  letter-spacing:.10em !important;
}

.nav-cta{
  min-width:106px !important;
  padding:10px 12px !important;
  border-radius:999px !important;
  font-family:"DM Mono",monospace !important;
  font-size:8px !important;
  line-height:1 !important;
  letter-spacing:.10em !important;
}

.nav-cta span{
  font-size:8px !important;
  line-height:1 !important;
}

@media(max-width:800px){
  .nav{
    width:calc(100% - 18px) !important;
    height:58px !important;
    border-radius:999px !important;
  }

  .nav-cta{
    min-width:88px !important;
    padding:9px 10px !important;
  }
}

header.nav .nav-links{bottom:auto!important}

header.nav .nav-cta span{line-height:1!important}

/* ============================== from header-fix.css ============================== */
header.nav{position:fixed!important;left:50%!important;right:auto!important;width:min(1180px,calc(100% - 28px))!important;height:58px!important;min-height:58px!important;transform:translateX(-50%)!important;border-radius:9999px!important;overflow:hidden!important}

header.nav .nav-links{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  right:auto !important;
  transform:translate(-50%,-50%) !important;
  display:flex !important;
  width:max-content !important;
  margin:0 !important;
}

header.nav .nav-links a{
  font-family:"DM Mono",monospace !important;
  font-size:8px !important;
  line-height:1 !important;
  letter-spacing:.10em !important;
}

header.nav .nav-cta{font-family:"DM Mono",monospace!important;letter-spacing:.10em!important}

header.nav .nav-cta span{
  font-size:8px !important;
}

@media(max-width:800px){
  header.nav{
    width:calc(100% - 18px) !important;
  }

}

/* ============================== from retro.css ============================== */
/* STEF KEYCAPS — RETRO / MODERN theme
   A vintage Macintosh running the newest OS: System-7 window chrome, hard offset shadows and pinstripe
   title bars, on modern spacing, type and motion. Loaded LAST on every page; it re-skins style.css
   without touching any behaviour. Palette is lifted from the 5¢ stamp. */
/* (the Google Fonts @import that was here moved to a <link> in each page's <head>, so it no longer blocks behind this file) */

:root{--paper:#efe6d2;--paper-2:#e6dabf;--card:#f7f0df;--ink:#3b2c22;--brown:#6b4f3a;--brown-light:#a48d76;--desk:#4a3a2d;--red:#b23a34;--blue:#2c5a8c;--mustard:#d9a441;--line:rgba(59,44,34,.3)}

/* ---------- base ---------- */
html{scroll-padding-top:104px!important}
body{
  background-color:var(--paper);
  background-image:url(/assets/img/grain-soft.png),radial-gradient(rgba(59,44,34,.11) 1px,transparent 1.3px);
  background-size:64px 64px,14px 14px;
  color:var(--ink);
}
.grain{display:none!important}

.section-heading h2,.novelty-intro h2,.group-buy h2,.hero h1,.pd-hero h1{
  font-family:var(--display)!important;font-weight:400!important;text-transform:uppercase;letter-spacing:.005em!important}

.large-copy{letter-spacing:-.02em!important}

/* ---------- header: a menu-bar pill with a hard shadow ---------- */
/* (the frosted top fade on body::after is back: style.css draws it, retro4.css tints it) */
header.nav{
  background:var(--card)!important;border:2px solid var(--ink)!important;
  box-shadow:4px 4px 0 var(--ink)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  top:14px!important;
}
header.nav:before,header.nav:after{display:none!important}
header.nav .nav-links a{opacity:1!important;position:relative;transition:color .2s ease}
header.nav .nav-links a:hover,header.nav .nav-links a.is-current{color:var(--red)}
header.nav .nav-links a.is-current:after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--red)}
header.nav .stef-header-mark{position:absolute!important;left:20px!important;right:auto!important;top:50%!important;
  transform:translateY(-50%)!important;width:auto!important;height:auto!important;pointer-events:none!important}
header.nav .nav-cta{
  position:absolute!important;right:14px!important;top:50%!important;
  width:120px!important;min-width:120px!important;height:30px!important;padding:0 12px!important;margin:0!important;
  box-sizing:border-box!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:8px;
  background:var(--red)!important;color:var(--card)!important;border:2px solid var(--ink)!important;border-radius:999px!important;
  font-size:7px!important;line-height:1!important;white-space:nowrap;box-shadow:none;
  transform:translateY(-50%)!important;transition:transform .2s ease,box-shadow .2s ease,background .2s ease!important}
header.nav .nav-cta span{margin:0!important}
header.nav .nav-cta:hover,header.nav .nav-cta:focus-visible{
  transform:translateY(calc(-50% - 2px))!important;box-shadow:3px 3px 0 var(--ink)!important;background:var(--ink)!important}
header.nav,header.nav *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
@media(max-width:700px){header.nav .nav-links{display:none!important}header.nav .nav-cta{right:10px!important}}

/* ---------- buttons & links ---------- */
.button{border:2px solid var(--ink)!important;border-radius:8px;box-shadow:4px 4px 0 var(--ink);font-weight:500;
  transition:transform .15s ease,box-shadow .15s ease,background .2s ease,color .2s ease!important}
.button:hover{transform:translate(-2px,-2px)!important;box-shadow:6px 6px 0 var(--ink)!important}
.button:active{transform:translate(3px,3px)!important;box-shadow:1px 1px 0 var(--ink)!important}
.button-red{color:var(--card);border-color:var(--ink)}
.button-card{background:var(--card);color:var(--ink)}
.button-card:hover{background:var(--card)}
.text-link{border-bottom:2px solid var(--ink);padding-bottom:4px;transition:color .25s ease,border-color .25s ease}
.text-link:hover,.text-link:focus-visible{color:var(--red);border-color:var(--red)}

/* ---------- Mac window chrome ---------- */
.win{background:var(--card);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--ink);overflow:hidden;position:relative}
.win-bar{position:relative;display:flex;align-items:center;justify-content:center;border-bottom:2px solid var(--ink);background-image:repeating-linear-gradient(180deg,transparent 0 4px,rgba(59,44,34,.85) 4px 5px);font:9px/1 "DM Mono",monospace;letter-spacing:.12em;text-transform:uppercase}

.win-body{padding:18px}
.airmail{height:12px;border-block:2px solid var(--ink);
  background:repeating-linear-gradient(-45deg,var(--red) 0 14px,var(--card) 14px 28px,var(--blue) 28px 42px,var(--card) 42px 56px)}
.ticker{overflow:hidden;border-block:2px solid var(--ink);background:var(--ink);color:var(--card);
  font:500 11px/1 "DM Mono",monospace;letter-spacing:.22em;padding:14px 0;white-space:nowrap}

.ticker span:nth-child(even){color:var(--mustard)}
@keyframes tick{to{transform:translateX(-50%)}}
.cut{display:flex;align-items:center;gap:14px;max-width:var(--max);margin:0 auto;padding:0 32px;
  font:9px/1 "DM Mono",monospace;letter-spacing:.2em;color:var(--brown)}
.cut:before,.cut:after{content:"";flex:1;border-top:2px dashed var(--brown-light)}

/* the pulse is a ring that scales and fades (compositor only); animating box-shadow repainted the pill every frame, forever */

@keyframes dotpulse{0%{transform:scale(1);opacity:1}100%{transform:scale(3);opacity:0}}

/* ---------- hero (home + product) ---------- */
.hero{padding-top:150px;padding-bottom:110px}
.hero-line{font-size:clamp(18px,1.6vw,22px);max-width:430px}
.hero .hero-foot{display:grid!important;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:12px;
  border-top:2px solid var(--ink);font-family:"DM Mono",monospace}
.hero .hero-foot>span:nth-child(1){justify-self:start}
.hero .hero-foot>span:nth-child(2){justify-self:center;text-align:center}
.hero .hero-foot>span:nth-child(3){justify-self:end}

@keyframes sway{0%,100%{transform:rotate(-6deg) translateY(0)}50%{transform:rotate(-4.6deg) translateY(-9px)}}
.postmark{position:absolute;right:-30px;bottom:-34px;width:210px;color:rgba(239,230,210,.42);transform:rotate(-14deg);pointer-events:none}
.sticker{position:absolute;z-index:2;left:20px;top:20px;padding:11px 15px;color:var(--card);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transform:rotate(-4deg);text-align:center}
.sticker b{display:block;font:400 22px/1 var(--display);letter-spacing:.06em}
.sticker small{font:8px/1.4 "DM Mono",monospace;letter-spacing:.14em}

/* ---------- studio / pillars / archive (home) ---------- */
.manifest{border-top:0!important}
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;padding-bottom:96px}
.pillar .win-body{display:flex;flex-direction:column;gap:14px;padding:22px 22px 26px}
.pillar h3{font:400 clamp(30px,3vw,40px)/.95 var(--display);text-transform:uppercase;margin:0}
.pillar p{font:12px/1.7 "DM Mono",monospace;margin:0;opacity:.8}
.pillar .pill-n{font:9px/1 "DM Mono",monospace;color:var(--red)}
.archive-head{display:grid;grid-template-columns:.55fr 1fr;gap:80px;align-items:end;margin-bottom:56px}
.archive-head p{font:13px/1.7 "DM Mono",monospace;max-width:460px;opacity:.8;margin:0}
.archive{padding-top:130px;padding-bottom:150px}
.archive-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:28px;align-items:stretch}
.feature{display:flex;flex-direction:column}
.feature .media{position:relative;display:block;overflow:hidden;background:var(--paper-2);border-bottom:2px solid var(--ink)}
.feature .media img{display:block;width:100%;height:auto;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.feature:hover .media img{transform:scale(1.03)}
.feature .media .tag{position:absolute;left:14px;top:14px;background:var(--red);color:var(--card);font:9px/1 "DM Mono",monospace;
  letter-spacing:.1em;padding:8px 11px;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.feature .body{display:grid;grid-template-columns:1fr auto;gap:8px 24px;padding:20px 20px 22px}
.feature h3{font:400 clamp(34px,3.6vw,50px)/.92 var(--display);text-transform:uppercase;margin:0}
.feature p{grid-column:1;font:12px/1.7 "DM Mono",monospace;margin:0;opacity:.8;max-width:46ch}
.feature .price{grid-column:2;grid-row:1/3;text-align:right;font:9px/1 "DM Mono",monospace;letter-spacing:.1em}
.feature .price strong{display:block;font:400 34px/1 var(--display);margin-top:8px}
.feature .acts{grid-column:1/-1;display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:12px}
.feature--next{background:transparent;border-style:dashed;box-shadow:none}
.feature--next .media{display:grid;place-items:center;flex:1;min-height:260px;color:rgba(59,44,34,.5);border-bottom-style:dashed;
  background:repeating-linear-gradient(135deg,rgba(59,44,34,.06) 0 2px,transparent 2px 9px)}
.feature--next .media svg{width:min(46%,160px);height:auto}

/* ---------- product page ---------- */
.pd-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding-top:150px;padding-bottom:110px;position:relative}
.pd-hero .hero-copy{padding-bottom:0}
.pd-kicker{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 26px}
.pd-kicker .tag{font:9px/1 "DM Mono",monospace;background:var(--ink);color:var(--card);padding:9px 12px}
.gb-progress{height:16px!important;border:2px solid var(--ink);background:repeating-linear-gradient(90deg,rgba(59,44,34,.08) 0 6px,transparent 6px 12px)!important}
.gb-progress span{background:var(--red)!important}

.kit-card.win{padding:0!important;background:var(--card)!important;border:2px solid var(--ink)!important}
.kit-card.win .kit-image{margin:0;border-bottom:2px solid var(--ink);background:var(--paper-2)}
.kit-card.win .kit-bottom{margin:0;border-top:0;padding:16px 18px 20px}
.kit-bottom h3{font-size:34px!important;letter-spacing:.01em!important;text-transform:uppercase}
.kit-bottom p{opacity:.8!important}
.kits{padding-top:10px}
.details{border-block:2px solid var(--ink);background-image:radial-gradient(rgba(239,230,210,.07) 1px,transparent 1.3px);background-size:14px 14px}
#details .details-grid>.detail:nth-child(odd){padding-left:25px}
#details .gmk-logo{display:inline-block;vertical-align:-.05em;height:.8em;width:auto;aspect-ratio:234/74;color:inherit}
.details-label p{font-size:34px;line-height:1;margin:14px 0 0}
.group-buy{background:var(--paper-2);border-top:2px solid var(--ink)}
.buy-panel{background:var(--card);border:2px solid var(--ink)!important;border-radius:12px;box-shadow:6px 6px 0 var(--ink);padding:6px 22px 22px}
.buy-row{border-bottom:1px dashed var(--line)!important}
.checkout-note{opacity:.7!important;font-size:9px!important}

/* ---------- footer ---------- */
footer.footer{max-width:none;background:var(--paper-2);border-top:2px solid var(--ink)!important;padding:34px 32px 30px;
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px;font-size:9px}


/* ---------- mobile back-to-top ---------- */
.mobile-top-button{display:none}
@media(max-width:700px){
  .mobile-top-button{position:fixed;right:14px;bottom:14px;z-index:2147483646;display:inline-flex;align-items:center;justify-content:center;
    height:32px;padding:0 14px;background:var(--card);color:var(--ink);border:2px solid var(--ink);border-radius:999px;box-shadow:3px 3px 0 var(--ink);
    font:7px/1 "DM Mono",monospace;letter-spacing:.1em;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;
    transform:translateY(4px);transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s}
  .mobile-top-button.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .22s ease,transform .22s ease,visibility 0s}
}

/* ---------- whole-page lock: no selecting, dragging or long-press menus (form fields excepted) ---------- */
html,body,body *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
img,svg,a{-webkit-user-drag:none}
html{overscroll-behavior-y:none}
body input,body textarea,body select,body [contenteditable="true"]{-webkit-user-select:text!important;user-select:text!important;-webkit-touch-callout:default!important}

/* ---------- checkout: same retro skin, same functionality ---------- */
body.checkout-page .checkout-head{position:relative}
body.checkout-page .checkout-head:before{content:"";display:block;height:12px;margin-bottom:26px;border-block:2px solid var(--ink);
  background:repeating-linear-gradient(-45deg,var(--red) 0 14px,var(--card) 14px 28px,var(--blue) 28px 42px,var(--card) 42px 56px)}

body.checkout-page .page-back{transition:color .2s ease}
body.checkout-page .page-back:hover{color:var(--red)}
body.checkout-page .release-banner{background:var(--card)!important;border:2px solid var(--ink)!important;border-radius:10px!important;box-shadow:4px 4px 0 var(--ink)}
body.checkout-page .checkout-card{background:var(--card)!important;border:2px solid var(--ink)!important;border-radius:12px!important;box-shadow:6px 6px 0 var(--ink)!important}
body.checkout-page .checkout-card>h2,body.checkout-page .order-card-title{font-family:var(--display)!important;font-weight:400!important;text-transform:uppercase;letter-spacing:.03em!important}
body.checkout-page .kit-option{border-color:var(--ink)!important}
body.checkout-page .qty button{border:2px solid var(--ink)!important;background:var(--card);color:var(--ink);transition:background .15s ease}
body.checkout-page .qty button:hover{background:var(--card)}
body.checkout-page input[type=text],body.checkout-page input[type=email],body.checkout-page input[type=tel],body.checkout-page input[type=number],body.checkout-page select{
  border:2px solid var(--ink)!important;border-radius:8px!important;background:#fffaf0!important}
body.checkout-page .pwin-modal{background:var(--card)!important;border:2px solid var(--ink)!important;border-radius:14px!important;box-shadow:8px 8px 0 var(--ink)!important}
body.checkout-page .pay-submit{background:var(--red)!important;color:var(--card)!important;border:2px solid var(--ink)!important;border-radius:8px!important;box-shadow:4px 4px 0 var(--ink);
  transition:transform .15s ease,box-shadow .15s ease}
body.checkout-page .pay-submit:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .pd-hero{grid-template-columns:1fr;gap:56px}
  .archive-grid{grid-template-columns:1fr}
  .pillars{grid-template-columns:1fr}
  .feature--next .media{min-height:210px}
}
@media(max-width:800px){
  .hero{padding-top:118px;padding-bottom:110px}
  .postmark{width:150px;right:-24px;bottom:-26px}
  .pd-hero{padding-top:118px;padding-bottom:80px}
  .archive-head{display:block;margin-bottom:40px}.archive-head p{margin-top:30px}
  .archive{padding-top:90px;padding-bottom:100px}
  .pillars{padding-bottom:72px}
  .feature .body{grid-template-columns:1fr}
  .feature .price{grid-column:1;grid-row:auto;text-align:left;order:-1;display:flex;align-items:baseline;gap:10px}
  .feature .price strong{margin-top:0}
  .feature .acts .button{width:100%}
  .cut{padding:0 18px}
  .buy-panel{padding:4px 18px 20px}
  footer.footer{display:block;padding:26px 18px}

}

/* ============================== from retro2.css ============================== */
/* STEF KEYCAPS — RETRO 2: groovy 70s type, real window chrome, arcade nav button, poppy colour.
   Loaded after retro.css on every page. Fonts (all Google Fonts, real webfonts, no images):
   Shrikhand = fat 70s italic display · Bagel Fat One = bubbly headings/labels · Yellowtail = swash script with tails. */
/* (the Google Fonts import that was here is gone: retro3.css replaces all three families with the SK fonts, and it blocked first paint) */

:root{--orange:#e8813a;--pink:#f0a3c2;--teal:#1f9d8e;--burnt:#b5482b}

/* ---------- type ---------- */
.hero h1,.pd-hero h1,.head h1,.checkout-head h1,.success-head h1,.status-page h1,body.checkout-page .checkout-head h1{
  font-family:var(--heading)!important;font-weight:400!important;text-transform:none!important;letter-spacing:-.01em!important;line-height:.98!important;
  text-shadow:3px 3px 0 var(--mustard),6px 6px 0 var(--ink)}
.hero h1,.pd-hero h1{font-size:clamp(70px,11vw,168px)!important}
.hero h1 em,.pd-hero h1 em,.head h1 em,.checkout-head h1 em,.success-head h1 em{color:var(--red);font-style:italic}
.section-heading h2,.novelty-intro h2,.group-buy h2{font-family:var(--heading)!important;text-transform:none!important;letter-spacing:-.01em!important;
  line-height:1!important;font-size:clamp(46px,7vw,104px)!important;text-shadow:2px 2px 0 var(--mustard),4px 4px 0 var(--ink)}
.section-heading h2 em,.novelty-intro h2 em,.group-buy h2 em{color:var(--orange);font-style:italic}
.section-heading h2:after{content:"";display:block;width:min(260px,60%);margin-top:22px;border-radius:0 0 0 0;-webkit-mask:linear-gradient(90deg,#000 0 70%,transparent);mask:linear-gradient(90deg,#000 0 70%,transparent)}
.pillar h3,.feature h3,.kit-bottom h3,.details-label p,.novelty b,.parcel .label strong,.buy-panel strong{font-family:var(--bubble)!important;font-weight:400!important;letter-spacing:.01em}

.script{line-height:1;transform:rotate(-4deg);margin-bottom:6px}
.hero-line,.large-copy{font-family:"Space Grotesk",system-ui,sans-serif}
.hero-line{position:relative}

/* ---------- arcade order-status button (same language as .button-red) ---------- */
header.nav a.nav-cta{
  width:auto!important;min-width:132px!important;height:36px!important;padding:0 16px!important;gap:8px;
  background:var(--red)!important;color:var(--card)!important;border:2px solid var(--ink)!important;border-radius:8px!important;
  font:500 9px/1 "DM Mono",monospace!important;letter-spacing:.1em!important;text-transform:uppercase;
  box-shadow:4px 4px 0 var(--ink)!important;right:16px!important;
  transform:translateY(-50%)!important;transition:transform .15s ease,box-shadow .15s ease,background .2s ease!important}
header.nav a.nav-cta:hover,header.nav a.nav-cta:focus-visible{
  transform:translate(-2px,calc(-50% - 2px))!important;box-shadow:6px 6px 0 var(--ink)!important;background:var(--red)!important}
header.nav a.nav-cta:active{transform:translate(3px,calc(-50% + 3px))!important;box-shadow:1px 1px 0 var(--ink)!important}

@media(max-width:700px){header.nav a.nav-cta{min-width:0!important;padding:0 12px!important;height:32px!important}}

/* ---------- window chrome: red / yellow / green squares, chips all the same height ---------- */
.win-bar{height:38px!important;background-color:var(--card)}
.win-bar:before{content:""!important;position:absolute;left:10px!important;top:50%;width:72px!important;height:20px!important;margin-top:-10px!important;
  border:0!important;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 20'%3E%3Cg stroke='%233b2c22' stroke-width='2'%3E%3Crect x='1' y='1' width='18' height='18' fill='%23e5483d'/%3E%3Crect x='27' y='1' width='18' height='18' fill='%23f2b632'/%3E%3Crect x='53' y='1' width='18' height='18' fill='%2360b45a'/%3E%3C/g%3E%3Cg stroke='%233b2c22' stroke-width='2' stroke-linecap='square' fill='none'%3E%3Cpath d='M6 6l8 8M14 6l-8 8'/%3E%3Cpath d='M32 10h8'/%3E%3Cpath d='M58 10h8M62 6v8'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/100% 100%!important}
.win-bar b,.win-bar i{box-sizing:border-box;display:inline-flex!important;align-items:center;justify-content:center;height:20px!important;min-width:20px;
  border:2px solid var(--ink)!important;background:var(--card)!important;padding:0 9px!important;font:500 9px/1 "DM Mono",monospace!important;letter-spacing:.1em}
.win-bar i{right:10px!important;top:50%!important;transform:translateY(-50%)!important;position:absolute}
@media(max-width:560px){.win-bar:before{width:54px!important;background-size:100% 100%!important}.win-bar b{max-width:calc(100% - 150px);overflow:hidden;white-space:nowrap}}
.win{border-radius:10px}

/* ---------- infinite ticker (also under reduced-motion, which is what froze it on some devices) ---------- */
.ticker>div{display:flex!important;width:max-content;animation:tick 30s linear infinite!important;will-change:transform}
.ticker span{margin-right:0!important;padding-right:42px;flex:none}
@media(prefers-reduced-motion:reduce){.ticker>div{animation:tick 60s linear infinite!important}}

/* ---------- crisp barcode (vector bars, no background, no pixelation at any zoom) ---------- */
.parcel .barcode,.kb-label .barcode{height:38px;width:126px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 20' preserveAspectRatio='none' shape-rendering='crispEdges'%3E%3Cpath fill='%233b2c22' d='M0 0h2v20H0zM3 0h1v20H3zM5 0h3v20H5zM9 0h1v20H9zM11 0h2v20h-2zM15 0h1v20h-1zM17 0h3v20h-3zM21 0h1v20h-1zM23 0h2v20h-2zM26 0h3v20h-3zM31 0h1v20h-1zM33 0h2v20h-2zM36 0h1v20h-1zM38 0h3v20h-3zM43 0h2v20h-2zM46 0h1v20h-1zM48 0h3v20h-3zM52 0h1v20h-1zM54 0h2v20h-2zM58 0h2v20h-2z'/%3E%3C/svg%3E") no-repeat center/100% 100%!important}

/* ---------- poppy colour ---------- */
.ticker span:nth-child(3n+1){color:var(--pink)}
.sticker{background:var(--orange)}
.button-red{background:var(--red)}
.nowopen{position:relative;overflow:hidden;border-block:2px solid var(--ink);padding:clamp(80px,10vw,150px) 24px;text-align:center;
  background:radial-gradient(circle at 50% 135%,var(--red) 0 150px,var(--orange) 150px 210px,var(--mustard) 210px 270px,var(--pink) 270px 330px,var(--teal) 330px 390px,var(--paper) 390px)}
.nowopen-stripes{display:none}
.nowopen-inner{position:relative;max-width:640px;margin:0 auto;padding:36px 30px 40px;background:var(--card);border:2px solid var(--ink);border-radius:14px;box-shadow:8px 8px 0 var(--ink);transform:rotate(-1.2deg)}
.nowopen-inner h2{font:400 clamp(44px,7vw,84px)/1 var(--heading);text-shadow:3px 3px 0 var(--mustard),6px 6px 0 var(--ink);margin:0 0 14px}
.nowopen-inner p{font:13px/1.7 "DM Mono",monospace;margin:0 0 24px;opacity:.85}
.nowopen .hero-actions{gap:16px;flex-wrap:wrap}

/* ---------- product page: parcel extras ---------- */

.route{padding-top:110px;padding-bottom:120px}

/* ---------- inner pages (about / legal / shipping / checkout / status / success) ---------- */
.head{border-bottom:0!important;position:relative;padding-bottom:44px!important}
.head:after{content:"";position:absolute;left:0;right:0;bottom:0;border-block:2px solid var(--ink)}

.head h1{margin-top:18px!important}
.portrait{border:2px solid var(--ink)!important;box-shadow:8px 8px 0 var(--ink)!important;border-radius:12px!important;background:var(--card)}
.nametag{position:absolute;right:0;top:-6px;width:136px;padding:8px 0 12px;background:var(--red);color:var(--card);text-align:center;border:2px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);transform:rotate(5deg);font:9px/1.3 "DM Mono",monospace;letter-spacing:.14em}
.nametag b{display:block;font:400 10px/1 var(--bubble);letter-spacing:.14em;margin-top:2px}
.nametag i{display:block;margin:8px 8px 0;background:var(--card);color:var(--ink);font:400 30px/1 var(--swash);font-style:normal;letter-spacing:0}
@media(max-width:600px){.nametag{width:104px;top:-30px}}
main h2{font-family:var(--bubble)!important;font-weight:400!important}
.status-page .card{background:var(--card)!important;border:2px solid var(--ink)!important;border-radius:12px!important;box-shadow:6px 6px 0 var(--ink)}
.status-page{background-color:var(--paper)!important;color:var(--ink)}
.status-page .wrap{padding-top:130px!important}
.status-page header.nav{padding-bottom:0!important;border-bottom:2px solid var(--ink)!important}
.status-page h1{font-size:clamp(54px,9vw,92px)!important;margin-bottom:22px!important}
.status-page main{margin-top:20px!important}
.status-page main .eyebrow{color:var(--red)}
.status-page input{border:2px solid var(--ink)!important;border-radius:8px!important;background:#fffaf0!important}
.status-page button[type=submit],.status-page #lookupButton{background:var(--red)!important;color:var(--card)!important;border:2px solid var(--ink)!important;border-radius:8px!important;
  box-shadow:4px 4px 0 var(--ink);font-family:"DM Mono",monospace;transition:transform .15s ease,box-shadow .15s ease}
.status-page button[type=submit]:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.status-page .order-option{border:2px solid var(--ink)!important;border-radius:8px;background:#fffaf0!important;box-shadow:3px 3px 0 var(--ink)}
.status-page .order-option:hover{background:#fffaf0!important}
.status-page .status,.status-page .option-status{border:2px solid var(--ink)!important;background:var(--mustard)}

/* ============================== from retro3.css ============================== */
/* STEF KEYCAPS — RETRO 3: the real fonts + exact type recipes, pill buttons, halo nav, outlined curves.
   Loaded LAST on every page (after retro2.css). Fonts: Finest Vintage = headings, Traced Groove = subheadings.
   Type recipes were measured from the reference screenshots and are in em, so they scale with any size:
     FINEST VINTAGE  fill · outline .076em (stroke .152em, painted behind the fill) · diagonal extrude .161em · soft shadow .03/.05em blur .07em
     TRACED GROOVE   fill · outline .04em · straight-down extrude .113em · rim .03em · rim drop .042em                          */

@font-face{font-family:"SK Vintage";src:url("/assets/fonts/SKRetroHeadings.woff2?v=48638af6bf") format("woff2");font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0020-0022,U+0025-007E,U+00A0-024F,U+2013-2026}   /* # and $ left out on purpose: the personal-use build swaps them for a logo */
@font-face{font-family:"SK Subheading";src:url("/assets/fonts/SKRetroSubheadings.woff2?v=3ed79f1fa5") format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  --f-head:"SK Vintage","Shrikhand",Georgia,serif;
  --f-sub:"SK Subheading","SK Vintage","Space Grotesk",Impact,sans-serif;
  --heading:var(--f-head);--bubble:var(--f-sub);--display:var(--f-sub);--swash:var(--f-head);
  --fxv-fill:#f4da7a;--fxv-alt:#f2915b;
  --fxg-fill:#fda86d;--fxg-light:#f7f0df;--fxg-rim:#3b2c22;
  --kraft:#c99a62;--kraft-light:#e4c99b;--gold:#f4da7a;
}

/* ================= TYPE ================= */
/* Finest Vintage — headings (outline in ink, extruded down-right) */
html body .hero h1,html body .pd-hero h1,html body .head h1,html body .checkout-head h1,html body .success-head h1,html body .status-page h1,html body.checkout-page .checkout-head h1,html body .section-heading h2,html body .novelty-intro h2,html body .group-buy h2,html body .nowopen-inner h2,html body .closer h2,html body .fact b,html body .fxv{font-family:var(--f-head)!important;font-weight:400!important;font-synthesis:none;text-transform:none!important;letter-spacing:0!important;color:var(--fxv-fill)!important;-webkit-text-stroke:.152em #3b2c22;paint-order:stroke fill;filter:none!important;text-shadow:.0202em .0202em 0 #3b2c22,.0404em .0404em 0 #3b2c22,.0606em .0606em 0 #3b2c22,.0808em .0808em 0 #3b2c22,.101em .101em 0 #3b2c22,.1212em .1212em 0 #3b2c22,.1414em .1414em 0 #3b2c22,.1616em .1616em 0 #3b2c22,.1916em .2116em .07em rgba(40,25,15,.32)!important;line-height:1.16!important}
html body .hero h1 em,html body .pd-hero h1 em,html body .head h1 em,html body .checkout-head h1 em,html body .success-head h1 em,html body .section-heading h2 em,
html body .novelty-intro h2 em,html body .group-buy h2 em,html body .nowopen-inner h2 em,html body .closer h2 em,html body .fxv em{color:var(--fxv-alt)!important;font-style:normal}
html body .hero h1,html body .pd-hero h1{font-size:clamp(66px,9.2vw,132px)!important;padding:.05em 0 .16em}
html body .head h1,html body.checkout-page .checkout-head h1,html body .success-head h1{font-size:clamp(58px,9vw,108px)!important;padding:.05em 0 .16em}
html body .status-page h1{font-size:clamp(54px,8vw,88px)!important;padding:.05em 0 .16em}
html body .section-heading h2,html body .group-buy h2,html body .closer h2{margin-top:16px!important;padding-bottom:.14em}
html body .novelty-intro h2{padding-bottom:.14em}
html body .nowopen-inner h2{margin:0 0 18px!important;padding-bottom:.12em}

html body .fact b{display:block;font-size:clamp(50px,5.4vw,72px)!important}
/* on dark sections the outline goes brick-red so the extrude still reads */
html body .details .fxv,html body .details-label h2{
  font-family:var(--f-head)!important;font-weight:400!important;font-synthesis:none;text-transform:none!important;letter-spacing:0!important;color:var(--fxv-fill)!important;
  -webkit-text-stroke:.152em #c8463d;paint-order:stroke fill;line-height:1.14!important;margin:18px 0 0;
  font-size:clamp(40px,4.4vw,64px)!important;padding-bottom:.14em;
  filter:none!important;text-shadow:.0202em .0202em 0 #c8463d,.0404em .0404em 0 #c8463d,.0606em .0606em 0 #c8463d,.0808em .0808em 0 #c8463d,.101em .101em 0 #c8463d,.1212em .1212em 0 #c8463d,.1414em .1414em 0 #c8463d,.1616em .1616em 0 #c8463d,.1916em .2116em .07em rgba(0,0,0,.4)!important}
.script{display:block;font-family:var(--f-head)!important;color:#c8463d!important;-webkit-text-stroke:.16em var(--card);paint-order:stroke fill;font-size:clamp(40px,5.4vw,68px)!important;
  filter:drop-shadow(.03em .04em 0 #3b2c22);text-shadow:none!important}

/* Traced Groove — subheadings (cream outline, extruded down, ink rim) */
html body .pillar h3,html body .feature h3,html body .kit-bottom h3,html body .step h3,html body .kp h3,html body .novelty b,html body .parcel .label strong,html body main .card h2,html body .feature .price strong,html body .faq summary,html body .slip h3,html body .fxg{paint-order:stroke fill;line-height:1.2!important}
html body .pillar h3,html body .step h3,html body .kp h3{font-size:clamp(32px,3.2vw,44px)!important;margin:0 0 4px}
html body .feature h3{font-size:clamp(34px,3.6vw,50px)!important}
html body .kit-bottom h3{font-size:clamp(32px,3vw,40px)!important}
html body main .card h2{font-size:clamp(28px,2.6vw,34px)!important;margin:0 0 10px}
html body .feature .price strong{font-size:38px!important;margin-top:8px}
/* small labels: Traced Groove plain, no effect (too small for the layers) */
.eyebrow,.section-heading>span,.novelty-intro>span,.pd-kicker .tag,.pill-n,.details-label>span,.head>div:first-child,.checkout-head>div:first-child{font-synthesis:none}

.buy-panel strong,.buy-row strong{font-family:"DM Mono",monospace!important}
.sticker b,.nametag b{font-family:var(--f-sub)!important;font-weight:400!important}
.nametag i{font-family:var(--f-head)!important}

/* ================= BUTTONS: thin, pill, pressable ================= */
:root{--btn-h:36px}
html body .button,html body a.button,html body button.button{height:var(--btn-h)!important;min-height:0!important;min-width:184px;padding:0 18px 0 22px!important;gap:14px;border:1.5px solid #3b2c22!important;box-shadow:3px 3px 0 #3b2c22!important;transition:transform .15s ease,box-shadow .15s ease,background .2s ease,color .2s ease!important}
html body .button:hover{transform:translate(-1px,-1px)!important;box-shadow:4px 4px 0 #3b2c22!important}
html body .button:active{transform:translate(2px,2px)!important;box-shadow:0 0 0 #3b2c22,inset 0 2px 4px rgba(59,44,34,.35)!important}
html body .button.full{width:100%;min-width:0}
html body .button.button-red{background:var(--red)}
html body .button.button-card:hover{background:var(--card)}
/* header button: the About-page thinness, everywhere */
html body header.nav a.nav-cta{position:absolute!important;left:auto!important;top:0!important;bottom:0!important;margin:auto 0!important;width:auto!important;min-width:0!important;max-width:none!important;height:28px!important;min-height:28px!important;max-height:28px!important;padding:0 14px!important;flex:none!important;display:inline-flex!important;align-items:center;justify-content:center;gap:8px;overflow:visible!important;background:var(--red)!important;color:var(--card)!important;border:1.5px solid #3b2c22!important;border-radius:999px!important;font:500 8px/1 "DM Mono",monospace!important;letter-spacing:.1em!important;text-transform:uppercase;box-shadow:2px 2px 0 #3b2c22!important;transform:none!important;transition:transform .15s ease,box-shadow .15s ease,background .2s ease!important}
html body header.nav a.nav-cta span{margin:0!important;font-size:8px!important}
html body header.nav a.nav-cta:hover,html body header.nav a.nav-cta:focus-visible{transform:translate(-1px,-1px)!important;box-shadow:3px 3px 0 #3b2c22!important;background:var(--red)!important}
html body header.nav a.nav-cta:active{transform:translate(2px,2px)!important;box-shadow:0 0 0 #3b2c22,inset 0 2px 4px rgba(0,0,0,.3)!important}
@media(max-width:700px){html body header.nav a.nav-cta{padding:0 12px!important}}
/* the header used to clip its own button's shadow (overflow:hidden) — that was the "odd" hover */
html body header.nav{overflow:visible!important}
/* other buttons */
html body .status-page button[type=submit],html body .status-page #lookupButton{height:42px!important;border:1.5px solid #3b2c22!important;font-size:10px!important;box-shadow:3px 3px 0 #3b2c22!important;transition:transform .15s ease,box-shadow .15s ease,background .2s ease!important}
html body .status-page button[type=submit]:hover{transform:translate(-1px,-1px)!important;box-shadow:4px 4px 0 #3b2c22!important}
html body .status-page button[type=submit]:active{transform:translate(2px,2px)!important;box-shadow:0 0 0 #3b2c22,inset 0 2px 4px rgba(59,44,34,.35)!important}
html body .status-page .session-actions button{border:1.5px solid #3b2c22!important;color:#3b2c22!important;padding:8px 16px!important;box-shadow:2px 2px 0 #3b2c22;transition:transform .15s ease,box-shadow .15s ease}
html body .status-page .session-actions button:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 #3b2c22}
html body .status-page .session-actions button:active{transform:translate(2px,2px);box-shadow:0 0 0 #3b2c22,inset 0 2px 4px rgba(59,44,34,.3)}
html body .co-btn,html body .pay-submit{border:1.5px solid #3b2c22!important;padding-top:12px!important;padding-bottom:12px!important;box-shadow:3px 3px 0 #3b2c22;transition:transform .15s ease,box-shadow .15s ease,background .2s ease!important}
html body .co-btn:not(:disabled):hover,html body .pay-submit:not(:disabled):hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 #3b2c22}
html body .co-btn:not(:disabled):active,html body .pay-submit:not(:disabled):active{transform:translate(2px,2px);box-shadow:0 0 0 #3b2c22,inset 0 2px 4px rgba(0,0,0,.35)}
html body .mobile-top-button{border-width:1.5px!important}

/* ================= NAV: halo on the selected page ================= */
html body header.nav .nav-links a{isolation:isolate;padding:5px 0;transition:color .2s ease}
html body header.nav .nav-links a:after{display:none!important}
html body header.nav .nav-links a:before{content:"";position:absolute;inset:-4px -9px;border-radius:999px;z-index:-1;opacity:0;transform:scale(.86);
  transition:opacity .25s ease,transform .25s ease,box-shadow .25s ease;background:var(--gold)}
html body header.nav .nav-links a:hover:before{opacity:.5;transform:none}
html body header.nav .nav-links a.is-current{color:#3b2c22}
html body header.nav .nav-links a.is-current:before{opacity:1;transform:none;
  box-shadow:0 0 0 1.5px #3b2c22,0 0 0 3.5px #f0a3c2,0 0 0 5px #3b2c22,0 0 12px 5px rgba(242,145,91,.4)}
html body header.nav .nav-links a.is-current:hover{color:#3b2c22}

/* ================= WINDOW CHROME ================= */
/* 2026-10-21 (owner): no decorative close box on windows: an X only appears where it really closes something (pop-ups, drawers) */
html body .win-bar:before{display:none!important;content:none!important}
@media(max-width:560px){html body .win-bar b{max-width:calc(100% - 130px)}}

/* ================= CURVES: every band gets an ink outline ================= */
html body .nowopen{background:radial-gradient(circle at 50% 135%,var(--red) 0 149px,#3b2c22 149px 151px,var(--orange) 151px 209px,#3b2c22 209px 211px,var(--mustard) 211px 269px,#3b2c22 269px 271px,var(--pink) 271px 329px,#3b2c22 329px 331px,var(--teal) 331px 389px,#3b2c22 389px 391px,var(--paper) 391px)}
.head:after,.section-heading h2:after{height:22px!important;
  background:linear-gradient(var(--red) 0 4px,#3b2c22 4px 6px,var(--orange) 6px 10px,#3b2c22 10px 12px,var(--mustard) 12px 16px,#3b2c22 16px 18px,var(--pink) 18px)!important}
html body .section-heading h2:after{border-block:2px solid #3b2c22;border-inline-start:2px solid #3b2c22}
.nowopen-inner .g-kicker,html body .g-kicker{display:inline-block;margin:0 0 6px;font-size:26px;font-family:var(--f-sub);color:var(--fxg-fill);-webkit-text-stroke:.08em var(--fxg-light);paint-order:stroke fill;
  filter:drop-shadow(0 .00365em 0 var(--fxg-light)) drop-shadow(0 .0146em 0 var(--fxg-light)) drop-shadow(0 .0584em 0 var(--fxg-light)) drop-shadow(.03em 0 0 var(--fxg-rim)) drop-shadow(-.03em 0 0 var(--fxg-rim)) drop-shadow(0 .03em 0 var(--fxg-rim)) drop-shadow(0 -.03em 0 var(--fxg-rim)) drop-shadow(0 .042em 0 var(--fxg-rim))}

/* sunburst rays behind the heroes (the Finest Vintage banner look) */
.hero,.pd-hero{isolation:isolate}
.hero:before,.pd-hero:before{content:"";position:absolute;left:50%;top:0;width:100vw;height:100%;transform:translateX(-50%);z-index:-1;pointer-events:none;
  background:repeating-conic-gradient(from 0deg at 72% 46%,rgba(232,129,58,.12) 0 7deg,transparent 7deg 14deg);
  -webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}

/* ================= AIRMAIL STRIPE + TICKER: one joined band ================= */
.airmail+.ticker{border-top:0}
.ticker>div{animation-duration:46s!important}

/* ================= HOME: new sections ================= */
.facts-wrap{padding-bottom:96px}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:2px solid #3b2c22;border-radius:18px;background:var(--card);box-shadow:6px 6px 0 #3b2c22}
.fact{padding:30px 16px 24px;text-align:center;border-right:2px dashed var(--brown-light)}
.fact:last-child{border-right:0}
.fact span{display:block;font:9px/1.6 "DM Mono",monospace;letter-spacing:.14em;text-transform:uppercase;margin-top:4px}
.how{padding-top:0;padding-bottom:96px}
.steps{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;position:relative}
.steps:before{content:"";position:absolute;left:27px;right:6%;top:26px;border-top:3px dashed #3b2c22;z-index:0}
.step{position:relative;z-index:1;padding-top:76px}
.step .node{position:absolute;top:0;left:0;width:54px;height:54px;border-radius:50%;background:var(--card);border:2px solid #3b2c22;box-shadow:4px 4px 0 #3b2c22;
  display:grid;place-items:center;font:400 30px/1 var(--f-head);color:#3b2c22;padding-bottom:3px}
.step.is-now .node{background:var(--gold)}
.step small{display:block;font:9px/1 "DM Mono",monospace;letter-spacing:.14em;color:var(--red);margin-bottom:8px}
.step p{font:12px/1.7 "DM Mono",monospace;margin:0;opacity:.85;max-width:30ch}
.kitprev{padding-bottom:96px}
.kp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:60px}
.kp{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:28px 24px 26px;background:var(--card);border:2px solid #3b2c22;border-radius:18px;
  box-shadow:6px 6px 0 #3b2c22;transition:transform .2s ease,box-shadow .2s ease}
.kp:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 #3b2c22}
.kp p{font:12px/1.7 "DM Mono",monospace;margin:0;opacity:.85}
.kp .kp-price{font:500 22px/1 "DM Mono",monospace;margin-top:auto}
.kp .kp-price small{font-size:9px;letter-spacing:.14em;margin-right:8px;opacity:.7}
.kp .button{margin-top:6px}
.keycap{position:relative;width:92px;height:92px;border:2px solid #3b2c22;border-radius:20px;background:var(--red);box-shadow:5px 5px 0 #3b2c22;display:grid;place-items:center;transform:rotate(-5deg);margin:0 0 10px}
.keycap:before{content:"";position:absolute;inset:9px;border-radius:13px;background:var(--card);border:2px solid #3b2c22}
.keycap span{position:relative;font:400 44px/1 var(--f-head);color:#3b2c22;padding-bottom:5px}
.keycap--b{background:var(--blue)}
.keycap--wide{width:176px;height:88px;margin-bottom:14px;background:var(--mustard);border-radius:18px}
.keycap--wide:before{border-radius:11px}
.faq{max-width:900px;margin:0 auto;padding:0 32px 150px}
.faq details{border:2px solid #3b2c22;border-radius:16px;background:var(--card);box-shadow:4px 4px 0 #3b2c22;margin:0 0 18px;transition:box-shadow .15s ease,transform .15s ease}
.faq details[open]{box-shadow:6px 6px 0 #3b2c22;background:#fffaf0}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px;font-size:28px!important}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";flex:none;box-sizing:border-box;width:30px;height:30px;aspect-ratio:1;border:2px solid #3b2c22;border-radius:50%;display:grid;place-items:center;
  font:500 16px/1 "DM Mono",monospace;color:#3b2c22;background:var(--gold);-webkit-text-stroke:0;filter:none;padding-bottom:2px}
.faq details[open] summary:after{content:"−"}
.faq p{margin:0;padding:0 22px 22px;font:13px/1.75 "DM Mono",monospace;opacity:.85;max-width:66ch}
.closer{position:relative;overflow:hidden;border-block:2px solid #3b2c22;padding:clamp(80px,10vw,140px) 24px;text-align:center;
  background:repeating-conic-gradient(from 0deg at 50% 118%,var(--orange) 0 5.5deg,#3b2c22 5.5deg 6deg,var(--mustard) 6deg 11.5deg,#3b2c22 11.5deg 12deg)}
.closer-inner{position:relative;max-width:640px;margin:0 auto;padding:40px 30px 44px;background:var(--card);border:2px solid #3b2c22;border-radius:18px;box-shadow:8px 8px 0 #3b2c22;transform:rotate(1deg)}
.closer-inner h2{margin:0 0 14px!important}
.closer-inner p{font:13px/1.7 "DM Mono",monospace;margin:0 0 26px;opacity:.85}
.closer .hero-actions{justify-content:center;gap:16px;flex-wrap:wrap}

/* ================= GMK PACKAGE page ================= */
.slip-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;padding-top:40px;padding-bottom:150px}
.slip{position:relative;background:#fffaf0;border:2px solid #3b2c22;box-shadow:8px 8px 0 #3b2c22;padding:36px 30px 26px;transform:rotate(-1deg)}
.slip:before{content:"";position:absolute;top:-15px;left:50%;width:130px;height:30px;transform:translateX(-50%) rotate(-3deg)}
.slip-head{display:flex;justify-content:space-between;gap:12px;font:9px/1 "DM Mono",monospace;letter-spacing:.16em;border-bottom:2px dashed #3b2c22;padding-bottom:14px}
.slip-list{list-style:none;margin:0;padding:0}
.slip-list li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:16px 0;border-bottom:1px dashed var(--line)}
.slip-list .n{font:9px/1 "DM Mono",monospace;opacity:.6}
.slip-list h3{margin:0;font-size:30px!important}
.slip-list small{display:block;font:10px/1.5 "DM Mono",monospace;opacity:.75;margin-top:2px}
.slip-list em{font:500 16px/1 "DM Mono",monospace;font-style:normal;border-bottom:2px dotted #3b2c22;padding-bottom:3px}
.slip-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-top:22px;font:9px/1.7 "DM Mono",monospace;letter-spacing:.12em}
.slip-foot .barcode{height:38px;width:126px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 20' preserveAspectRatio='none' shape-rendering='crispEdges'%3E%3Cpath fill='%233b2c22' d='M0 0h2v20H0zM3 0h1v20H3zM5 0h3v20H5zM9 0h1v20H9zM11 0h2v20h-2zM15 0h1v20h-1zM17 0h3v20h-3zM21 0h1v20h-1zM23 0h2v20h-2zM26 0h3v20h-3zM31 0h1v20h-1zM33 0h2v20h-2zM36 0h1v20h-1zM38 0h3v20h-3zM43 0h2v20h-2zM46 0h1v20h-1zM48 0h3v20h-3zM52 0h1v20h-1zM54 0h2v20h-2zM58 0h2v20h-2z'/%3E%3C/svg%3E") no-repeat center/100% 100%}
.slip-stamp{position:absolute;right:22px;top:118px;border:3px double var(--red);border-radius:10px;color:var(--red);font:400 28px/1 var(--f-sub);transform:rotate(-12deg);opacity:.8;pointer-events:none}
.note{position:relative;padding:30px 28px 34px;background-color:var(--kraft-light);border:2px solid #3b2c22;border-radius:6px;box-shadow:6px 6px 0 #3b2c22;transform:rotate(1.6deg);
  background-image:repeating-linear-gradient(0deg,transparent 0 33px,rgba(59,44,34,.2) 33px 34px)}
.note small{display:block;font:9px/1 "DM Mono",monospace;letter-spacing:.16em}
.note .hand{font:400 clamp(34px,4vw,48px)/1.12 var(--f-head);color:#3b2c22}
.note .hand em{font-style:normal;color:var(--red)}
.note p{font:12px/1.9 "DM Mono",monospace;margin:14px 0 0}
body.collection-page .group-buy{position:relative;background:var(--kraft-light)}
body.collection-page .group-buy:before{content:"";position:absolute;left:0;right:0;top:0;height:14px;border-block:2px solid #3b2c22;
  background:repeating-linear-gradient(-45deg,var(--red) 0 14px,var(--card) 14px 28px,var(--blue) 28px 42px,var(--card) 42px 56px)}
body.collection-page .buy-panel{background:#fffaf0}
@media(min-width:801px){body.collection-page .details{grid-template-columns:.5fr 1fr}}

/* ================= ABOUT: the boxes get the window look ================= */
main .grid{counter-reset:c;gap:32px}
html body main .grid .card{position:relative;counter-increment:c;padding:0!important;overflow:hidden;background:var(--card)!important;border:2px solid #3b2c22!important;border-radius:12px;box-shadow:6px 6px 0 #3b2c22;opacity:1}
html body main .grid .card:before{content:"";display:block;height:34px;border-bottom:2px solid #3b2c22;
  background:repeating-linear-gradient(180deg,transparent 0 4px,rgba(59,44,34,.85) 4px 5px),var(--card)}
html body main .grid .card:after{content:"N° 0" counter(c);position:absolute;top:7px;left:50%;transform:translateX(-50%);padding:0 12px;height:20px;display:inline-flex;align-items:center;
  border:2px solid #3b2c22;background:var(--card);font:500 9px/1 "DM Mono",monospace;letter-spacing:.12em}
html body main .grid .card h2{padding:20px 24px 0;margin:0 0 10px}
html body main .grid .card p{padding:0 24px 26px;margin:0}
main .grid .card a{text-decoration:underline}
@media(max-width:700px){html body main .grid .card h2{padding:18px 18px 0}html body main .grid .card p{padding:0 18px 22px}}

/* ================= RESPONSIVE ================= */
@media(max-width:980px){
  .kp-grid{grid-template-columns:1fr}
  .slip-wrap{grid-template-columns:1fr;gap:64px}
  .steps{grid-template-columns:1fr 1fr;row-gap:44px}
  .steps:before{display:none}
}
@media(max-width:800px){
  .facts{grid-template-columns:1fr 1fr}.fact:nth-child(2){border-right:0}.fact:nth-child(-n+2){border-bottom:2px dashed var(--brown-light)}
  .faq{padding:0 18px 100px}.faq summary{font-size:22px!important}
  .slip-stamp{top:96px;font-size:22px}
}
@media(max-width:560px){
  .steps{grid-template-columns:1fr;position:relative}
  .steps:before{display:block;left:26px;right:auto;top:20px;bottom:20px;border-top:0;border-left:3px dashed #3b2c22}
  .step{padding:0 0 0 76px;min-height:56px}.step .node{top:0}
  .how,.kitprev{padding-bottom:72px}
  html body .button,html body a.button{min-width:0}
}

/* ============================== from retro4.css ============================== */
/* STEF KEYCAPS — RETRO 4: polish + performance pass. Loaded LAST on every page (after retro3.css).
   Finest Vintage only on page titles (Stef Keycaps, GMK Package, each page's h1); every other heading uses Traced Groove.
   Small labels are DM Mono. Numbers are Space Grotesk. Buttons are boxy-rounded, except the header CTA and the closer's two (pills).

   SPEED: every outlined/extruded heading used to be a chain of 6-14 CSS drop-shadow() filters. Each one is an off-screen
   GPU pass, stacked on dozens of headings, which is what made the whole site (FAQ, doors, scrolling) sluggish, and the
   doubling offsets left stair-step "zigzags" on diagonals. It is now plain text-shadow: a ring of tiny offsets for a round
   outline (no miter spikes) swept along the extrude direction (a continuous, gap-free extrude). No filter, no clipping
   to the font's line box (that clipping is what cut the tail of the F). Recipes are in em, so they scale with any size. */

:root{--sh-n:.095em .045em 0 #3b2c22,.0855em .0744em 0 #3b2c22,.0605em .0926em 0 #3b2c22,.0295em .0926em 0 #3b2c22,.0045em .0744em 0 #3b2c22,-.005em .045em 0 #3b2c22,.0045em .0156em 0 #3b2c22,.0295em -.0026em 0 #3b2c22,.0605em -.0026em 0 #3b2c22,.0855em .0156em 0 #3b2c22,.05em 0 0 #3b2c22,.0405em .0294em 0 #3b2c22,.0155em .0476em 0 #3b2c22,-.0155em .0476em 0 #3b2c22,-.0405em .0294em 0 #3b2c22,-.05em 0 0 #3b2c22,-.0405em -.0294em 0 #3b2c22,-.0155em -.0476em 0 #3b2c22,.0155em -.0476em 0 #3b2c22,.0405em -.0294em 0 #3b2c22;--sh-s:.08em 0 0 var(--card),.0647em .047em 0 var(--card),.0247em .0761em 0 var(--card),-.0247em .0761em 0 var(--card),-.0647em .047em 0 var(--card),-.08em 0 0 var(--card),-.0647em -.047em 0 var(--card),-.0247em -.0761em 0 var(--card),.0247em -.0761em 0 var(--card),.0647em -.047em 0 var(--card),.11em .04em 0 #3b2c22,.0947em .087em 0 #3b2c22,.0547em .1161em 0 #3b2c22,.0053em .1161em 0 #3b2c22,-.0347em .087em 0 #3b2c22,-.05em .04em 0 #3b2c22,-.0347em -.007em 0 #3b2c22,.0053em -.0361em 0 #3b2c22,.0547em -.0361em 0 #3b2c22,.0947em -.007em 0 #3b2c22}

:root{
  /* finer sampling: the outline is the stadium (round-capped bar) swept along the extrude, sampled every ~.01em, so diagonals are smooth, not stair-stepped */
  --sh-v:-.0537em .0537em 0 #3b2c22,.0537em -.0537em 0 #3b2c22,-.0475em .0599em 0 #3b2c22,.0599em -.0475em 0 #3b2c22,-.0414em .0661em 0 #3b2c22,.0661em -.0414em 0 #3b2c22,-.0352em .0723em 0 #3b2c22,.0723em -.0352em 0 #3b2c22,-.029em .0785em 0 #3b2c22,.0785em -.029em 0 #3b2c22,-.0228em .0847em 0 #3b2c22,.0847em -.0228em 0 #3b2c22,-.0166em .0909em 0 #3b2c22,.0909em -.0166em 0 #3b2c22,-.0104em .0971em 0 #3b2c22,.0971em -.0104em 0 #3b2c22,-.0042em .1033em 0 #3b2c22,.1033em -.0042em 0 #3b2c22,.002em .1095em 0 #3b2c22,.1095em .002em 0 #3b2c22,.0082em .1157em 0 #3b2c22,.1157em .0082em 0 #3b2c22,.0144em .1219em 0 #3b2c22,.1219em .0144em 0 #3b2c22,.0206em .128em 0 #3b2c22,.128em .0206em 0 #3b2c22,.0268em .1342em 0 #3b2c22,.1342em .0268em 0 #3b2c22,.033em .1404em 0 #3b2c22,.1404em .033em 0 #3b2c22,.0391em .1466em 0 #3b2c22,.1466em .0391em 0 #3b2c22,.0453em .1528em 0 #3b2c22,.1528em .0453em 0 #3b2c22,.0515em .159em 0 #3b2c22,.159em .0515em 0 #3b2c22,.0577em .1652em 0 #3b2c22,.1652em .0577em 0 #3b2c22,.0639em .1714em 0 #3b2c22,.1714em .0639em 0 #3b2c22,.0701em .1776em 0 #3b2c22,.1776em .0701em 0 #3b2c22,.0763em .1838em 0 #3b2c22,.1838em .0763em 0 #3b2c22,.0825em .19em 0 #3b2c22,.19em .0825em 0 #3b2c22,.0887em .1962em 0 #3b2c22,.1962em .0887em 0 #3b2c22,.0949em .2024em 0 #3b2c22,.2024em .0949em 0 #3b2c22,.1011em .2085em 0 #3b2c22,.2085em .1011em 0 #3b2c22,.1073em .2147em 0 #3b2c22,.2147em .1073em 0 #3b2c22,0 0 0 #3b2c22,.0124em .0124em 0 #3b2c22,.0248em .0248em 0 #3b2c22,.0372em .0372em 0 #3b2c22,.0495em .0495em 0 #3b2c22,.0619em .0619em 0 #3b2c22,.0743em .0743em 0 #3b2c22,.0867em .0867em 0 #3b2c22,.0991em .0991em 0 #3b2c22,.1115em .1115em 0 #3b2c22,.1238em .1238em 0 #3b2c22,.1362em .1362em 0 #3b2c22,.1486em .1486em 0 #3b2c22,.161em .161em 0 #3b2c22,-.0658em .038em 0 #3b2c22,-.0734em .0197em 0 #3b2c22,-.076em 0 0 #3b2c22,-.0734em -.0197em 0 #3b2c22,-.0658em -.038em 0 #3b2c22,-.0537em -.0537em 0 #3b2c22,-.038em -.0658em 0 #3b2c22,-.0197em -.0734em 0 #3b2c22,0 -.076em 0 #3b2c22,.0197em -.0734em 0 #3b2c22,.038em -.0658em 0 #3b2c22,.2268em .123em 0 #3b2c22,.2344em .1413em 0 #3b2c22,.237em .161em 0 #3b2c22,.2344em .1807em 0 #3b2c22,.2268em .199em 0 #3b2c22,.2147em .2147em 0 #3b2c22,.199em .2268em 0 #3b2c22,.1807em .2344em 0 #3b2c22,.161em .237em 0 #3b2c22,.1413em .2344em 0 #3b2c22,.123em .2268em 0 #3b2c22,.19em .21em .09em rgba(40,25,15,.3);
  --sh-vr:-.0537em .0537em 0 #c8463d,.0537em -.0537em 0 #c8463d,-.0475em .0599em 0 #c8463d,.0599em -.0475em 0 #c8463d,-.0414em .0661em 0 #c8463d,.0661em -.0414em 0 #c8463d,-.0352em .0723em 0 #c8463d,.0723em -.0352em 0 #c8463d,-.029em .0785em 0 #c8463d,.0785em -.029em 0 #c8463d,-.0228em .0847em 0 #c8463d,.0847em -.0228em 0 #c8463d,-.0166em .0909em 0 #c8463d,.0909em -.0166em 0 #c8463d,-.0104em .0971em 0 #c8463d,.0971em -.0104em 0 #c8463d,-.0042em .1033em 0 #c8463d,.1033em -.0042em 0 #c8463d,.002em .1095em 0 #c8463d,.1095em .002em 0 #c8463d,.0082em .1157em 0 #c8463d,.1157em .0082em 0 #c8463d,.0144em .1219em 0 #c8463d,.1219em .0144em 0 #c8463d,.0206em .128em 0 #c8463d,.128em .0206em 0 #c8463d,.0268em .1342em 0 #c8463d,.1342em .0268em 0 #c8463d,.033em .1404em 0 #c8463d,.1404em .033em 0 #c8463d,.0391em .1466em 0 #c8463d,.1466em .0391em 0 #c8463d,.0453em .1528em 0 #c8463d,.1528em .0453em 0 #c8463d,.0515em .159em 0 #c8463d,.159em .0515em 0 #c8463d,.0577em .1652em 0 #c8463d,.1652em .0577em 0 #c8463d,.0639em .1714em 0 #c8463d,.1714em .0639em 0 #c8463d,.0701em .1776em 0 #c8463d,.1776em .0701em 0 #c8463d,.0763em .1838em 0 #c8463d,.1838em .0763em 0 #c8463d,.0825em .19em 0 #c8463d,.19em .0825em 0 #c8463d,.0887em .1962em 0 #c8463d,.1962em .0887em 0 #c8463d,.0949em .2024em 0 #c8463d,.2024em .0949em 0 #c8463d,.1011em .2085em 0 #c8463d,.2085em .1011em 0 #c8463d,.1073em .2147em 0 #c8463d,.2147em .1073em 0 #c8463d,0 0 0 #c8463d,.0124em .0124em 0 #c8463d,.0248em .0248em 0 #c8463d,.0372em .0372em 0 #c8463d,.0495em .0495em 0 #c8463d,.0619em .0619em 0 #c8463d,.0743em .0743em 0 #c8463d,.0867em .0867em 0 #c8463d,.0991em .0991em 0 #c8463d,.1115em .1115em 0 #c8463d,.1238em .1238em 0 #c8463d,.1362em .1362em 0 #c8463d,.1486em .1486em 0 #c8463d,.161em .161em 0 #c8463d,-.0658em .038em 0 #c8463d,-.0734em .0197em 0 #c8463d,-.076em 0 0 #c8463d,-.0734em -.0197em 0 #c8463d,-.0658em -.038em 0 #c8463d,-.0537em -.0537em 0 #c8463d,-.038em -.0658em 0 #c8463d,-.0197em -.0734em 0 #c8463d,0 -.076em 0 #c8463d,.0197em -.0734em 0 #c8463d,.038em -.0658em 0 #c8463d,.2268em .123em 0 #c8463d,.2344em .1413em 0 #c8463d,.237em .161em 0 #c8463d,.2344em .1807em 0 #c8463d,.2268em .199em 0 #c8463d,.2147em .2147em 0 #c8463d,.199em .2268em 0 #c8463d,.1807em .2344em 0 #c8463d,.161em .237em 0 #c8463d,.1413em .2344em 0 #c8463d,.123em .2268em 0 #c8463d,.19em .21em .09em rgba(0,0,0,.4);
  --sh-g:-.04em 0 0 var(--fxg-light),.04em 0 0 var(--fxg-light),-.04em .0226em 0 var(--fxg-light),.04em .0226em 0 var(--fxg-light),-.04em .0452em 0 var(--fxg-light),.04em .0452em 0 var(--fxg-light),-.04em .0678em 0 var(--fxg-light),.04em .0678em 0 var(--fxg-light),-.04em .0904em 0 var(--fxg-light),.04em .0904em 0 var(--fxg-light),-.04em .113em 0 var(--fxg-light),.04em .113em 0 var(--fxg-light),0 0 0 var(--fxg-light),0 .0226em 0 var(--fxg-light),0 .0452em 0 var(--fxg-light),0 .0678em 0 var(--fxg-light),0 .0904em 0 var(--fxg-light),0 .113em 0 var(--fxg-light),-.0346em -.02em 0 var(--fxg-light),-.02em -.0346em 0 var(--fxg-light),0 -.04em 0 var(--fxg-light),.02em -.0346em 0 var(--fxg-light),.0346em -.02em 0 var(--fxg-light),.0346em .133em 0 var(--fxg-light),.02em .1476em 0 var(--fxg-light),0 .153em 0 var(--fxg-light),-.02em .1476em 0 var(--fxg-light),-.0346em .133em 0 var(--fxg-light),-.07em 0 0 var(--fxg-rim),.07em 0 0 var(--fxg-rim),-.07em .0258em 0 var(--fxg-rim),.07em .0258em 0 var(--fxg-rim),-.07em .0517em 0 var(--fxg-rim),.07em .0517em 0 var(--fxg-rim),-.07em .0775em 0 var(--fxg-rim),.07em .0775em 0 var(--fxg-rim),-.07em .1033em 0 var(--fxg-rim),.07em .1033em 0 var(--fxg-rim),-.07em .1292em 0 var(--fxg-rim),.07em .1292em 0 var(--fxg-rim),-.07em .155em 0 var(--fxg-rim),.07em .155em 0 var(--fxg-rim),0 0 0 var(--fxg-rim),0 .0258em 0 var(--fxg-rim),0 .0517em 0 var(--fxg-rim),0 .0775em 0 var(--fxg-rim),0 .1033em 0 var(--fxg-rim),0 .1292em 0 var(--fxg-rim),0 .155em 0 var(--fxg-rim),-.0606em -.035em 0 var(--fxg-rim),-.035em -.0606em 0 var(--fxg-rim),0 -.07em 0 var(--fxg-rim),.035em -.0606em 0 var(--fxg-rim),.0606em -.035em 0 var(--fxg-rim),.0606em .19em 0 var(--fxg-rim),.035em .2156em 0 var(--fxg-rim),0 .225em 0 var(--fxg-rim),-.035em .2156em 0 var(--fxg-rim),-.0606em .19em 0 var(--fxg-rim);
}

/* ============ PAGE TITLES: Finest Vintage ============ */
html body .hero h1,html body .pd-hero h1,html body .head h1,html body .checkout-head h1,html body .success-head h1,html body .status-page h1,html body .legal-head h1,html body .fxv{
  font-family:var(--f-head)!important;font-weight:400!important;font-synthesis:none;text-transform:none!important;letter-spacing:0!important;
  color:var(--fxv-fill)!important;-webkit-text-stroke:0!important;filter:none!important;text-shadow:var(--sh-v)!important;overflow:visible!important}
html body .details .fxv{text-shadow:var(--sh-vr)!important}
html body .legal-head h1{font-size:clamp(58px,9vw,108px)!important;line-height:1.16!important;padding:.05em 0 .16em}
html body .legal-head h1 em{color:var(--fxv-alt)!important;font-style:normal}
/* the second line (KEYCAPS) sits on top of the first line's outline: normal paint order, no negative layers */
html body .hero h1,html body .pd-hero h1{padding-bottom:.26em!important}

/* ============ SECTION HEADINGS + SUBHEADINGS: Traced Groove ============ */
html body .section-heading h2,html body .novelty-intro h2,html body .group-buy h2,html body .nowopen-inner h2,html body .closer h2,html body .details-label h2,
html body .pillar h3,html body .feature h3,html body .kit-bottom h3,html body .step h3,html body .kp h3,html body .novelty b,html body .parcel .label strong,
html body main .card h2,html body .feature .price strong,html body .faq summary,html body .slip h3,html body .fxg,html body .g-kicker{
  font-family:var(--f-sub)!important;font-weight:400!important;font-synthesis:none;text-transform:uppercase!important;letter-spacing:.01em!important;
  color:var(--fxg-fill)!important;-webkit-text-stroke:0!important;filter:none!important;text-shadow:var(--sh-g)!important}
html body .section-heading h2,html body .novelty-intro h2,html body .group-buy h2,html body .nowopen-inner h2,html body .closer h2,html body .details-label h2{line-height:1.02!important}
html body .section-heading h2 em,html body .novelty-intro h2 em,html body .group-buy h2 em,html body .nowopen-inner h2 em,html body .closer h2 em,html body .details-label h2 em{color:var(--gold)!important;font-style:normal}
html body .section-heading h2,html body .group-buy h2,html body .closer h2{font-size:clamp(40px,5.4vw,82px)!important}
html body .novelty-intro h2{font-size:clamp(38px,4.6vw,68px)!important}
html body .nowopen-inner h2{font-size:clamp(44px,6.6vw,90px)!important}
html body .details-label h2{font-size:clamp(36px,3.8vw,56px)!important}
html body .faq summary:after{text-shadow:none!important}
/* "Ready when / you are": the second line sits tighter under the first */
html body .closer h2{line-height:.9!important;margin-bottom:22px!important}
/* the script accent */
html body .script{-webkit-text-stroke:0!important;filter:none!important;text-shadow:var(--sh-s)!important}

/* ============ SMALL LABELS: DM Mono everywhere (B3 — THE MANIFEST, breadcrumbs, eyebrows) ============ */
.eyebrow,.section-heading>span,.novelty-intro>span,.details-label>span,.pd-kicker .tag,.pill-n,
.head>div:first-child,.checkout-head>div:first-child,.legal-head>div:first-child,.success-head .eyebrow{
  font-family:"DM Mono",ui-monospace,monospace!important;font-weight:500!important;font-size:11px!important;letter-spacing:.14em!important;text-transform:uppercase}
.details-label>span{color:#e9c766!important}

/* ============ NUMBERS: Space Grotesk (clean lining figures) ============ */

html body .fact b{color:var(--fxv-fill)!important;-webkit-text-stroke:0!important;filter:none!important;text-shadow:var(--sh-n)!important;line-height:1!important;padding-bottom:.08em}
html body .step .node{font-size:24px!important;padding-bottom:0!important}
html body .keycap span{font-size:36px!important;padding-bottom:0!important}
html body .slip-list .n{font-size:11px!important}

/* ============ BUTTONS: boxy-rounded; pills only for the header CTA and the closer's two ============ */
html body .button,html body a.button,html body button.button,html body .status-page button[type=submit],html body .status-page #lookupButton,
html body .status-page .session-actions button,html body .co-btn,html body .pay-submit{border-radius:9px!important}
html body .closer .button{border-radius:999px!important}

/* ============ FAQ: the +/− is a push button, like ORDER STATUS ============ */
.faq details{box-sizing:border-box}
.faq summary:after{box-shadow:2px 2px 0 #3b2c22;transform:translate(-1px,-1px);transition:transform .15s ease,box-shadow .15s ease}
.faq summary:hover:after{transform:translate(-2px,-2px);box-shadow:3px 3px 0 #3b2c22}
.faq summary:active:after,.faq details[open] summary:after{transform:translate(1px,1px);box-shadow:0 0 0 #3b2c22,inset 0 2px 4px rgba(59,44,34,.35)}

/* ============ RAINBOW BARS: no fade-out mask; clean ink end cap ============ */
.head:after,html body .section-heading h2:after{-webkit-mask:none!important;mask:none!important;-webkit-mask-image:none!important;mask-image:none!important}
html body .section-heading h2:after{box-sizing:border-box;border:2px solid #3b2c22!important;border-radius:0 11px 11px 0!important}

/* ============ PACKING SLIP ============ */
html body .slip-list h3{font-family:"Space Grotesk",system-ui,sans-serif!important;font-weight:700!important;font-size:clamp(19px,1.9vw,23px)!important;letter-spacing:.09em!important;
  text-transform:uppercase!important;color:#3b2c22!important;-webkit-text-stroke:0!important;filter:none!important;text-shadow:none!important;line-height:1.1!important}
/* the tape: torn zigzag ends like a real strip of tape */
.slip:before{border:0!important;box-shadow:none!important;
  background:linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,0) 45%,rgba(0,0,0,.07)),rgba(232,129,58,.82)!important;
  clip-path:polygon(0 0,5% 12.5%,0 25%,5% 37.5%,0 50%,5% 62.5%,0 75%,5% 87.5%,0 100%,100% 100%,95% 87.5%,100% 75%,95% 62.5%,100% 50%,95% 37.5%,100% 25%,95% 12.5%,100% 0)}
/* stamp texts sit in the true vertical centre of their boxes (trims the font's extra space above caps and below the baseline) */
.slip-stamp{display:block;line-height:1!important;padding:10px 16px!important;text-box:trim-both cap alphabetic}
.sticker b,.parcel .label strong{text-box:trim-both cap alphabetic}
/* the note: "Handle with care" centred between the label above and the text below */
.note small{margin-bottom:0!important}
.note .hand{margin:22px 0!important}
.note .hand+p{margin-top:0!important}

/* ============ TICKERS: a touch slower, same speed on every page ============ */
html body .ticker>div{animation-duration:60s!important}

/* ============ LOGOS: die-cut sticker (header + footer). The outline is an SVG filter (#sk-diecut, added by sk-ui.js):
   it grows the logo's own silhouette by ~3.5px, rounds it off, fills it white and adds the site's hard shadow.
   The logo file itself is never touched. ============ */
html body header.nav .stef-header-mark img,html body footer.footer .footer-brand img{filter:url(#sk-diecut)!important;overflow:visible}

/* ============ NAV: one liquid pill that flows to the page you pick ============ */
html body header.nav .nav-links{isolation:isolate}
html body header.nav .nav-links a{position:relative;z-index:1}
html body header.nav .nav-links a:before{display:none!important}
.sk-navblob{position:absolute;left:0;top:50%;height:26px;margin-top:-13px;border-radius:999px;background:var(--gold);border:1.5px solid #3b2c22;box-shadow:2px 2px 0 #3b2c22;
  z-index:0;pointer-events:none;opacity:0;transform-origin:center;transition:opacity .2s ease;will-change:transform,width}
.sk-navblob.is-on{opacity:1}

/* ============ ABOUT ============ */
html body main .grid .card h2{font-size:clamp(34px,3.4vw,44px)!important}
html body main .grid .card p{font-size:.92rem!important}
.nametag i{font-size:24px!important;margin-top:12px!important;padding:9px 0 5px!important}
@media(max-width:600px){.nametag i{font-size:20px!important}}

/* ============ TOP SHADOW: the original frosted fade under the header (neutral grey, same curve as the bottom one) ============
   style.css draws it (fixed, 170px, blur + eased mask) on body::after; retro.css had switched it off, this is the tint the
   old pages carry inline, now on every page. */
html body::after{background:linear-gradient(to bottom,
  rgba(128,128,128,.140) 0%,rgba(128,128,128,.140) 6.2%,rgba(128,128,128,.138) 12.5%,rgba(128,128,128,.133) 18.8%,rgba(128,128,128,.126) 25%,
  rgba(128,128,128,.115) 31.2%,rgba(128,128,128,.101) 37.5%,rgba(128,128,128,.086) 43.8%,rgba(128,128,128,.070) 50%,rgba(128,128,128,.054) 56.2%,
  rgba(128,128,128,.039) 62.5%,rgba(128,128,128,.025) 68.8%,rgba(128,128,128,.014) 75%,rgba(128,128,128,.007) 81.2%,rgba(128,128,128,.002) 87.5%,
  rgba(128,128,128,0) 93.8%,rgba(128,128,128,0) 100%)!important}

/* ============ BOTTOM SHADOW: the original blur band, identical on every page and screen size (element added by sk-ui.js). It appears and leaves exactly like BACK TO TOP below (same time, same curve, same slide) ============ */
@media all{
  html body .mobile-bottom-blur{--sk-bb-mask:linear-gradient(to top,
      rgba(0,0,0,1) 0%,rgba(0,0,0,1) 3.12%,rgba(0,0,0,.997) 6.25%,rgba(0,0,0,.991) 9.38%,rgba(0,0,0,.98) 12.5%,rgba(0,0,0,.963) 15.62%,rgba(0,0,0,.939) 18.75%,
      rgba(0,0,0,.909) 21.88%,rgba(0,0,0,.872) 25%,rgba(0,0,0,.829) 28.12%,rgba(0,0,0,.781) 31.25%,rgba(0,0,0,.727) 34.38%,rgba(0,0,0,.669) 37.5%,
      rgba(0,0,0,.609) 40.62%,rgba(0,0,0,.546) 43.75%,rgba(0,0,0,.482) 46.88%,rgba(0,0,0,.419) 50%,rgba(0,0,0,.357) 53.12%,rgba(0,0,0,.298) 56.25%,
      rgba(0,0,0,.242) 59.38%,rgba(0,0,0,.191) 62.5%,rgba(0,0,0,.146) 65.62%,rgba(0,0,0,.106) 68.75%,rgba(0,0,0,.073) 71.88%,rgba(0,0,0,.047) 75%,
      rgba(0,0,0,.027) 78.12%,rgba(0,0,0,.013) 81.25%,rgba(0,0,0,.005) 84.38%,rgba(0,0,0,.001) 87.5%,rgba(0,0,0,0) 90.62%,rgba(0,0,0,0) 100%);
    position:fixed!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;width:100%!important;height:140px!important;
    z-index:68!important;pointer-events:none!important;background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
    -webkit-mask-image:none!important;mask-image:none!important;opacity:1!important;visibility:hidden!important;transition:visibility 0s linear .35s!important}
  html body .mobile-bottom-blur>i{position:absolute!important;inset:0!important;display:block!important;pointer-events:none!important;opacity:0!important;transform:translateY(14px)!important;transition:opacity .35s ease,transform .35s ease!important}
  html body .mobile-bottom-blur>i:nth-child(1){-webkit-backdrop-filter:blur(4px)!important;backdrop-filter:blur(4px)!important;
    -webkit-mask-image:var(--sk-bb-mask)!important;mask-image:var(--sk-bb-mask)!important}
  html body .mobile-bottom-blur>i:nth-child(2){background:linear-gradient(to top,
      rgba(128,128,128,.100) 0%,rgba(128,128,128,.100) 6.2%,rgba(128,128,128,.098) 12.5%,rgba(128,128,128,.095) 18.8%,rgba(128,128,128,.090) 25%,
      rgba(128,128,128,.082) 31.2%,rgba(128,128,128,.072) 37.5%,rgba(128,128,128,.062) 43.8%,rgba(128,128,128,.050) 50%,rgba(128,128,128,.038) 56.2%,
      rgba(128,128,128,.028) 62.5%,rgba(128,128,128,.018) 68.8%,rgba(128,128,128,.010) 75%,rgba(128,128,128,.005) 81.2%,rgba(128,128,128,.002) 87.5%,
      rgba(128,128,128,0) 93.8%,rgba(128,128,128,0) 100%)!important}
  html body .mobile-bottom-blur.is-visible{visibility:visible!important;transition:visibility 0s!important}
  html body .mobile-bottom-blur.is-visible>i{opacity:1!important;transform:none!important;transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1)!important}
}

/* ============ BACK TO TOP (every page, every screen size): the same arcade push button as every other button ============ */
html body a.mobile-top-button.mobile-top-button{display:none}
@media all{
  html body a.mobile-top-button.mobile-top-button{position:fixed!important;right:16px!important;bottom:16px!important;z-index:2147483646!important;
    display:inline-flex!important;align-items:center!important;justify-content:center!important;width:auto!important;min-width:0!important;height:34px!important;
    padding:0 16px!important;box-sizing:border-box!important;background:var(--card)!important;color:var(--ink)!important;border:1.5px solid #3b2c22!important;border-radius:9px!important;
    font:500 9px/1 "DM Mono",monospace!important;letter-spacing:.1em!important;text-transform:uppercase!important;text-decoration:none!important;white-space:nowrap!important;
    box-shadow:3px 3px 0 #3b2c22!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
    opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:translateY(14px)!important;
    transition:opacity .35s ease,transform .35s ease,box-shadow .15s ease,visibility 0s linear .35s!important}
  html body a.mobile-top-button.mobile-top-button.is-visible{opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:none!important;
    transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1),box-shadow .15s ease,visibility 0s!important}
  html body a.mobile-top-button.mobile-top-button.is-visible:hover,html body a.mobile-top-button.mobile-top-button.is-visible:focus{transform:none!important;box-shadow:3px 3px 0 #3b2c22!important;outline:none!important}
  html body a.mobile-top-button.mobile-top-button.is-visible:active{transform:translate(2px,2px)!important;box-shadow:0 0 0 #3b2c22,inset 0 2px 4px rgba(59,44,34,.35)!important;transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .1s ease,box-shadow .1s ease,visibility 0s!important}
}

@media (prefers-reduced-motion:reduce){html body a.mobile-top-button.mobile-top-button,html body a.mobile-top-button.mobile-top-button.is-visible,html body .mobile-bottom-blur>i,html body .mobile-bottom-blur.is-visible>i{transform:none!important;transition:none!important}}

/* headings that got the real outline filter (sk-ui.js) drop the text-shadow fallback */
html body .sk-fx-on.sk-fx-on.sk-fx-on{text-shadow:none!important}
html body .sk-fxs{display:inline}
/* the spans sk-ui.js wraps around each heading line take everything from the heading, so a broad span rule (".x span") can never
   restyle a heading's text again (that is what shrank B4 "Shipment Details." into the label's small monospace) */
html body .sk-fx-on>.sk-fxs{font:inherit!important;letter-spacing:inherit!important;text-transform:inherit!important;color:inherit!important}

@media(prefers-reduced-motion:reduce){.faq summary:after{transition:none!important}}

/* ============================== from assets/sk-gate.css ============================== */
/* STEF KEYCAPS — page gate (retro edition)
   Two cream paper doors with the site's dot grid and ink outline, meeting on an airmail stripe, with a postage stamp
   pressed on the join. Needs sk-gate.js, which builds the markup and toggles the html classes below.

   The stamp shows on EVERY arrival, never hidden. Two modes only:
     sk-intro  always                  stamp lands .3s, doors open at .55s               (1.1s)
     sk-cont   + on top of sk-intro,   stamp already showing, doors open at .12s         (.62s)
     sk-leaving  a same-site link, or window.SKGate.back()  doors close in .34s, stamp lands, go at 420ms
   One timeline per mode. --sk-d = when the doors start to open, --sk-t = how long they travel.
   Keep sk-gate.js (HOLD) in step with these numbers: clear time = --sk-d + --sk-t + a small margin.
   Everything that moves is transform/opacity on its own layer; the only paint work is static (no filters, no noise). */

.sk-gate{position:fixed;inset:0;z-index:2147483647;display:none;overflow:hidden;pointer-events:none;
  --sk-ink:#3b2c22;--sk-paper:#efe6d2;--sk-card:#f7f0df;--sk-red:#b23a34;--sk-blue:#2c5a8c;
  --sk-w:clamp(188px,16vw,232px);
  --sk-d:.55s;--sk-t:.55s;
  --sk-ease:cubic-bezier(.2,.7,.2,1);--sk-io:cubic-bezier(.7,0,.2,1)}
html.sk-on .sk-gate{display:block}
html.sk-leaving .sk-gate{pointer-events:auto}
html.sk-intro .sk-gate{--sk-d:.55s;--sk-t:.55s}
html.sk-cont .sk-gate{--sk-d:.12s;--sk-t:.5s}

/* The site pins its header at z-index 2147483647 (!important), the same as the gate, and the header
   comes later in the page, so it used to win. While the gate is up the header sits one step lower. */
html.sk-on header.nav,html.sk-on .nav{z-index:2147483646!important}
/* 2026-10-28 (owner): nothing on screen disappears when the doors start. The phone menu sits one step under the header
   (sk-menu.js sets it to header - 1 = 2147483646), so once the header stepped down for the doors the menu covered it and the
   header vanished. While the gate is up the menu steps down too, and the doors simply close over header and menu alike. */
html.sk-on .skm,html.sk-shut .skm{z-index:2147483645!important}

/* doors: the site's paper and dot grid, a hard ink edge on the meeting side (the site's hard shadow) */
.sk-leaf{position:absolute;top:0;bottom:0;width:50%;background-color:var(--sk-paper);
  background-image:url(/assets/img/grain-soft.png),radial-gradient(rgba(59,44,34,.11) 1px,transparent 1.3px);background-size:64px 64px,14px 14px;will-change:transform}   /* the page's own paper: grain over the dot grid */
.sk-leaf--l{left:0}
.sk-leaf--r{right:0}
.sk-leaf:before,.sk-leaf:after{display:none}

/* door detail: a barber-pole strip down each edge of the seam, the GMK header's own airmail stripe turned upright (gx-app.css
   header.nav--app:after): 12px wide (+2px ink each side = 16px, the thickness of the .airmail bar under the ticker), -45deg, 14px bands of #b8382e / #fbf8f1 / #2c5a8c / #fbf8f1
   like that bar. Tiled in 79.2px squares (56 x sqrt 2) so it repeats seamlessly; the strips stay still. The right strip is offset by 16px (its 12px + the 4px of ink between the two strips)
   so the diagonals carry straight on across the seam. */
.sk-frame{position:absolute;top:0;bottom:0;box-sizing:content-box;width:12px;border:0;
  background:repeating-linear-gradient(-45deg,#b8382e 0 14px,#fbf8f1 14px 28px,#2c5a8c 28px 42px,#fbf8f1 42px 56px) 0 0/79.196px 79.196px}
.sk-leaf--r .sk-frame{background-position:-16px 0}
.sk-frame:before,.sk-frame:after{display:none}
.sk-leaf--l .sk-frame{right:0;border-left:2px solid var(--sk-ink);border-right:2px solid var(--sk-ink)}
.sk-leaf--r .sk-frame{left:0;border-right:2px solid var(--sk-ink);border-left:2px solid var(--sk-ink)}
.sk-t{position:absolute;font:500 9px/1 "DM Mono",ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sk-ink);white-space:nowrap}
.sk-tl{top:34px;left:34px}.sk-bl{bottom:34px;left:34px}
.sk-tr{top:34px;right:34px}.sk-br{bottom:34px;right:34px}
.sk-bl:before{content:"";display:inline-block;width:6px;height:6px;background:var(--sk-red);
  transform:rotate(45deg);margin-right:9px;vertical-align:1px}
@media (max-width:700px){
  .sk-gate{--sk-w:clamp(150px,44vw,176px)}
  .sk-tl,.sk-tr{top:24px}.sk-bl,.sk-br{bottom:24px}.sk-tl,.sk-bl{left:20px}.sk-tr,.sk-br{right:20px}
  .sk-t{font-size:8px}}

/* stamp + label: one column, one width. The stamp is a portrait rectangle like a real one. */
.sk-mark{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.sk-wrap{display:flex;flex-direction:column;align-items:stretch;gap:36px;width:var(--sk-w);opacity:0;will-change:transform,opacity}
.sk-stamp{position:relative;aspect-ratio:320/464;transform:rotate(-6deg)}
.sk-stamp>svg{position:absolute;inset:0;width:100%;height:100%;display:block;
  filter:drop-shadow(4px 5px 0 rgba(59,44,34,.38))}
.sk-cap{display:flex;align-items:center;justify-content:center;gap:9px;height:32px;padding:0 16px;
  background:var(--sk-card);border:2px solid var(--sk-ink);box-shadow:3px 3px 0 var(--sk-ink);
  font:500 9px/1 "DM Mono",ui-monospace,monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--sk-ink);white-space:nowrap}
.sk-cap:empty{display:none}
.sk-cap:before{content:"";width:6px;height:6px;background:var(--sk-red);transform:rotate(45deg);flex:none}

/* ---------- keyframes ---------- */
@keyframes skOpenL{to{transform:translate3d(-101%,0,0)}}
@keyframes skOpenR{to{transform:translate3d(101%,0,0)}}
@keyframes skShutL{from{transform:translate3d(-101%,0,0)}to{transform:none}}
@keyframes skShutR{from{transform:translate3d(101%,0,0)}to{transform:none}}
@keyframes skLand{from{opacity:0;transform:translateY(14px) scale(1.05)}to{opacity:1;transform:none}}
@keyframes skLift{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-8px) scale(.985)}}

/* ---------- arriving (every mode): the doors ---------- */
html.sk-arrive .sk-leaf--l{animation:skOpenL var(--sk-t) var(--sk-io) var(--sk-d) forwards}
html.sk-arrive .sk-leaf--r{animation:skOpenR var(--sk-t) var(--sk-io) var(--sk-d) forwards}

/* ---------- first page of a visit: the stamp lands, then lifts as the doors open ---------- */
html.sk-intro .sk-wrap{animation:skLand .3s var(--sk-ease) both,skLift .28s var(--sk-ease) var(--sk-d) forwards}

/* ---------- from another page: the stamp is already there, lifted as the doors open ---------- */
html.sk-cont .sk-wrap{opacity:1;animation:skLift .26s var(--sk-ease) var(--sk-d) forwards}

/* ---------- leaving ---------- */
html.sk-leaving .sk-leaf--l{animation:skShutL .34s var(--sk-io) forwards}
html.sk-leaving .sk-leaf--r{animation:skShutR .34s var(--sk-io) forwards}
html.sk-leaving .sk-wrap{animation:skLand .3s var(--sk-ease) .06s both}

/* ---------- frozen shut (set on pagehide, so a page restored by back/forward starts with the doors closed) ---------- */
html.sk-shut .sk-gate{display:block}
html.sk-shut .sk-wrap{opacity:1}
html.sk-shut header.nav,html.sk-shut .nav{z-index:2147483646!important}

@media (prefers-reduced-motion:reduce),print{.sk-gate{display:none!important}}

/* ============================== from assets/sk-site.css ============================== */
/* STEF KEYCAPS — site layer. Loaded LAST on every page (after retro4.css and any page CSS).
   One type system for the whole site:
     Finest Vintage (SK Vintage)  page titles + section titles
     Traced Groove (SK Groove)    subheadings, card titles, little labels with character
     Epilogue                     everything you read: paragraphs, links, buttons, prices, big numbers
     DM Mono                      technical labels: eyebrows, nav, codes, steps, win-bars
   Both text faces draw the zero with a diagonal slash (Epilogue via its "zero" feature), so numbers read the same everywhere. */

@font-face{font-family:"Epilogue";src:url("/assets/fonts/Epilogue-var.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:swap}

:root{--f-text:"Epilogue",ui-sans-serif,system-ui,sans-serif;--f-tech:"DM Mono",ui-monospace,monospace}

/* ================= TEXT ================= */
html body{font-family:var(--f-text);font-feature-settings:"zero" 1,"kern" 1}
html body p:not(.eyebrow),html body .hero-line,html body .large-copy,html body .small-copy,
html body input,html body textarea,html body select{font-family:var(--f-text)!important;font-feature-settings:"zero" 1,"kern" 1}
html body p strong,html body p b{font-weight:650}

/* reading sizes (the old monospace paragraphs were 11–13px; a proportional face needs a little more) */
html body .hero-line{font-size:clamp(17px,1.45vw,20px)!important;line-height:1.5!important;font-weight:400!important;letter-spacing:-.005em!important;max-width:420px;margin:30px 0 0!important}
html body .large-copy{font-weight:500!important;font-size:clamp(24px,2.55vw,36px)!important;line-height:1.2!important;letter-spacing:-.018em!important}
html body .small-copy,html body .archive-head p,html body .faq p,html body .nowopen-inner p,html body .closer p{
  font-size:15.5px!important;line-height:1.65!important;font-weight:400!important}
html body .pillar p,html body .step p,html body .kp p,html body .feature p,html body .kit-bottom p,html body .novelty p{
  font-size:14.5px!important;line-height:1.6!important;font-weight:400!important}
html body .faq p{max-width:62ch}
html body .nowopen-inner p,html body .closer p{max-width:44ch;margin-left:auto!important;margin-right:auto!important}
html body .checkout-note{font-size:12.5px!important;line-height:1.6!important}

/* no justified text anywhere: it left rivers of space in the narrow columns */
html body p,html body .legal,html body .legal p,html body main .grid .card p,html body .about-top p{text-align:left!important;text-justify:auto!important;word-spacing:normal!important}
html body .nowopen-inner p,html body .closer p{text-align:center!important}

/* footer fine print */
html body footer.footer .legal p{font-size:11.5px!important;line-height:1.6!important;letter-spacing:0!important;opacity:.78}
html body footer.footer .legal p b{font-family:var(--f-tech);font-weight:500;letter-spacing:.08em}
html body footer.footer .legal a{font-family:var(--f-tech);font-size:9.5px;letter-spacing:.08em}

/* links and buttons */
html body .text-link{font-family:var(--f-text)!important;font-weight:650!important;font-size:10.5px!important;letter-spacing:.12em!important;text-transform:uppercase}
html body .button,html body a.button,html body button.button{font:650 10.5px/1 var(--f-text)!important;letter-spacing:.11em!important}

/* big numbers: Epilogue heavy, same outline + extrude as before, slashed zero */
html body .fact b,html body .step .node,html body .keycap span,html body .slip-list .n,html body .novelty span{font-family:var(--f-text)!important;font-weight:800!important;font-variant-numeric:normal!important;font-feature-settings:"zero" 1!important;letter-spacing:-.02em!important}
html body .slip-list .n,html body .novelty span{font-weight:600!important}

/* ================= HERO: "keycaps & more" ================= */
/* It is a real element now (.script.hero-tag), so it gets exactly the same sticker effect as "now open":
   red fill, cream die-cut outline, hard ink shadow. Equal space above (to the paragraph) and below (to the buttons). */
html body .script.hero-tag{display:block;width:max-content;max-width:100%;font-size:clamp(36px,3.5vw,48px)!important;line-height:1!important;
  margin:38px 0 0 -2px;padding:.06em .1em .12em 0;transform:rotate(-3deg);transform-origin:left center}
html body .hero-copy .hero-tag+.hero-actions{margin-top:26px!important}
@media(max-width:700px){html body .script.hero-tag{font-size:38px!important;margin-top:32px}}

/* ================= PAGE TITLES ================= */
/* the script capitals reach far above the line box: keep the breadcrumb clear of them */
html body .head>div:first-child,html body .checkout-head>div:first-child,html body .success-head>div:first-child,html body .legal-head>div:first-child{
  position:relative;z-index:2;margin-bottom:.4em!important}
html body .head h1,html body.checkout-page .checkout-head h1,html body .status-page h1{margin-top:.4em!important}
/* breadcrumbs, eyebrows and small labels: the technical face */
html body .head>div:first-child,html body .checkout-head>div:first-child,html body .success-head>div:first-child,
html body .eyebrow,html body .section-heading>span,html body .novelty-intro>span,html body .pd-kicker .tag,html body .pill-n{
  font-family:var(--f-tech)!important;font-weight:500!important;letter-spacing:.14em!important}

/* ================= SUBHEADINGS ================= */
/* FAQ questions were too small for the layered Groove effect: a size where it reads cleanly */
html body .faq summary{font-size:clamp(24px,2.3vw,30px)!important;letter-spacing:.02em!important;line-height:1.25!important}
/* Subheadings (Traced Groove): every one that wraps to two lines uses the same line spacing as "Ready when / you are." (.9) */
html body :is(.section-heading h2,.novelty-intro h2,.group-buy h2,.nowopen-inner h2,.closer h2,.details-label h2,.pillar h3,.feature h3,.kit-bottom h3,.step h3,.kp h3,.slip h3,main .card h2,.fxg,.faq summary,.bl-feat h2,.gx-head h2,.gx-acc-label h3,.ab-win h3.fxg):not(#_sk){line-height:.9!important}

/* ================= HEADER ================= */
/* the logo is a link again (home) */
html body header.nav .stef-header-mark{pointer-events:auto!important;cursor:pointer}   /* the header logo links home (on the home page: to the top) */
/* the page you are on: the CTA reads as pressed when it IS the current page (Order Status) */
html body header.nav a.nav-cta.is-current,html body header.nav a.nav-cta.is-current:hover,html body header.nav a.nav-cta.is-current:active,html body header.nav a.nav-cta.is-current:focus-visible{background:var(--red)!important;filter:grayscale(1) brightness(.62) contrast(.95);transform:none!important;box-shadow:2px 2px 0 #3b2c22,inset 0 3px 8px rgba(0,0,0,.55),inset 0 0 6px rgba(0,0,0,.35)!important;
  pointer-events:none!important;user-select:none!important;-webkit-user-select:none!important;-webkit-touch-callout:none;cursor:default}
/* ORDER STATUS (every header): popped out at rest; a mouse over it sinks it part of the way, pressing sinks it all the way, letting go pops it back.
   (The old rules lifted it outward on hover. The page's own link does nothing, see .is-current above.) */
html body header.nav a.nav-cta.nav-cta.nav-cta{transition:translate .1s ease,box-shadow .1s ease,background .2s ease!important}
@media (hover:hover){html body header.nav a.nav-cta.nav-cta.nav-cta:not(.is-current):hover,html body header.nav a.nav-cta.nav-cta.nav-cta:not(.is-current):focus-visible{transform:none!important;translate:.67px .67px;box-shadow:1.33px 1.33px 0 #3b2c22!important}}
html body header.nav a.nav-cta.nav-cta.nav-cta:not(.is-current):active{transform:none!important;translate:2px 2px;box-shadow:0 0 0 #3b2c22,inset 0 2px 4px rgba(0,0,0,.3)!important}
/* the GMK pages' header button rests on the same 2px shadow as everywhere else, so it sinks the same way: a third of the way under
   the mouse, all the way when pressed. The face moves exactly as far as the shadow shrinks, so it never looks like it shifts. */
html body header.nav.nav--app a.nav-cta.nav-cta.nav-cta{box-shadow:2px 2px 0 #3b2c22!important;translate:0 0}
@media (hover:hover){html body header.nav.nav--app a.nav-cta.nav-cta.nav-cta:not(.is-current):hover,html body header.nav.nav--app a.nav-cta.nav-cta.nav-cta:not(.is-current):focus-visible{transform:none!important;translate:.67px .67px;box-shadow:1.33px 1.33px 0 #3b2c22!important}}
html body header.nav.nav--app a.nav-cta.nav-cta.nav-cta:not(.is-current):active{transform:none!important;translate:2px 2px;box-shadow:0 0 0 #3b2c22,inset 0 2px 4px rgba(0,0,0,.3)!important}

/* "Every Collection" (home): the intro paragraph sits over the second card, on the same two columns as the cards below it (it used to float in a grid of its own) */
@media (min-width:981px){html body .archive-head{grid-template-columns:1.3fr 1fr;gap:28px}html body .archive-head p{max-width:none}}

/* "Who We Are" (home): the copy starts on the same line as the "Every Collection" paragraph and the second card (the same two columns), all of it flush on that line */
@media (min-width:981px){html body #studio.manifest{grid-template-columns:1.3fr 1fr;gap:28px}html body #studio.manifest .manifest-copy{max-width:none}}

/* ================= BATCH: blur, button type, home hero tweaks ================= */
/* no blur band behind BACK TO TOP, on any page (the button and what it does are untouched) */
html body .mobile-bottom-blur{display:none!important}

/* every button wears the ORDER STATUS button's face: DM Mono, and its weight (500; the GMK pages' header button is a 400, so their buttons are too). Size, spacing and colour stay as they were. */
html body :is(button,input[type="submit"],input[type="button"],input[type="reset"],[role="button"],a.button,.button,.btn,.pay-submit,.co-btn,a.mobile-top-button,.ov-btn):not(#_):not(#_){font-family:"DM Mono",ui-monospace,monospace!important;font-weight:500!important}
html body.gx :is(button,input[type="submit"],input[type="button"],input[type="reset"],[role="button"],a.button,.button,.btn,.pay-submit,.co-btn,a.mobile-top-button,.ov-btn):not(#_):not(#_){font-weight:400!important}

/* home hero: the WHO WE ARE link's text sits on the same line as the button's text (its underline padding had lifted it) */
html body .hero-copy .hero-actions .text-link{padding-top:6px}
/* archive card: "JOIN THE GROUP BUY" has a 2px underline + 4px padding under the text, so the text sat 3px above the button's centre line; the same 6px on top puts the text on it (same fix as the hero) */
html body .feature .acts .text-link{padding-top:6px}
/* home, "Now open" card: nothing under the paragraph any more; and a little more air above the CUT HERE line */
html body .nowopen-inner p:last-child{margin-bottom:0}
/* home, "Now open" card: the "now open" script sits a little higher and has more air above GMK PACKAGE (scales with its font size) */
html body .nowopen-inner .script{position:relative;top:-.12em;margin-bottom:calc(.28em + 7px)!important}
html body .cut{margin-top:clamp(36px,5vw,64px)}
/* inner pages: one-line, smaller cursive titles; page width = home content width */
html body :is(main .head,.checkout-head,.success-head,.wrap) h1:not(#_sk){font-size:clamp(1.7rem,5vw,3.4rem)!important;line-height:1.05!important;white-space:nowrap}
html body :is(main .head,.checkout-head,.success-head,.wrap) h1 br{display:none}
html body :is(main .head,.success-head,.wrap) h1 em{margin-left:.22em}   /* (not CHECKOUT., which is one word) */
@media(min-width:701px){
html body:not(.status-page) main:has(>.head){max-width:1240px!important;padding-left:32px!important;padding-right:32px!important}
html body.status-page .wrap{width:min(1176px,calc(100% - 64px))!important}
}

/* ================= SMALL CONSISTENCY FIXES ================= */

::selection{background:rgba(244,218,122,.75);color:#3b2c22}

/* buttons and text links never break inside; the row wraps instead */
html body .button,html body a.button,html body .text-link{white-space:nowrap}
html body .hero-actions{flex-wrap:wrap;row-gap:16px}

/* small note under the policy cards (was 8px monospace at half opacity) */
html body .page-note{margin:34px 0 0!important;font-size:13.5px!important;line-height:1.6!important;opacity:.75}
html body .page-note a{text-decoration:underline;text-underline-offset:3px}
html body .page-note--tight{margin-top:8px!important}

/* 701–800px: the links were hidden one by one but the moving pill stayed, as an empty dot. Below 800 the whole row goes,
   exactly like on phones (logo + button only). */
@media(max-width:800px){html body header.nav .nav-links{display:none!important}}

/* ================= HEADER + FOOTER: optical balance =================
   The logo sticker and the CTA sit the same visible distance (20px) in from the pill's rounded ends: the logo's die-cut stock
   reaches 5px past its image box, the CTA's hard shadow 2px past its box. The logo is lifted 1px so the sticker body (not its
   shadow) is what is centred. The footer lines up with the header: its logo sits exactly under the header logo, and its right
   column ends where the header button ends. */
html body header.nav .stef-header-mark{left:25px!important;transform:translateY(calc(-50% - 1px))!important}
html body header.nav a.nav-cta{right:22px!important}
html body footer.footer{padding-left:calc(max(14px,(100% - 1180px) / 2) + 27px)!important;padding-right:calc(max(14px,(100% - 1180px) / 2) + 24px)!important}

@media(max-width:800px){html body footer.footer{padding-left:calc(9px + 2px + 25px)!important;padding-right:calc(9px + 2px + 22px)!important}
  }
@media(max-width:700px){
  html body header.nav .stef-header-mark{left:21px!important}
  html body header.nav a.nav-cta{right:18px!important}
  html body footer.footer{padding-left:calc(9px + 2px + 21px)!important;padding-right:calc(9px + 2px + 18px)!important}}

/* every page's breadcrumb line sits the same distance under the header: 150px, 120px on phones */
html body.status-page .wrap{padding-top:130px!important}
@media(max-width:700px){html body.status-page .wrap{padding-top:100px!important}}
html body.checkout-page .checkout-wrap{padding-top:150px!important}
@media(max-width:700px){html body.checkout-page .checkout-wrap{padding-top:120px!important}}
/* the note's "Handle with care." is the script accent too: same face as "keycaps & more", same die-cut (sk-ui.js) */
html body .note p.hand{font-family:var(--f-head)!important;font-weight:400!important;letter-spacing:0!important;font-size:clamp(40px,4.6vw,58px)!important;line-height:1.08!important;
  color:#3b2c22!important;-webkit-text-stroke:0!important;text-shadow:var(--sh-s)!important;margin:26px 0 18px!important;padding:.06em .1em .1em 0}
html body .note p.hand em{color:#c8463d!important;font-style:normal}
/* always the light palette: no dark flash while a page swaps */
:root{color-scheme:light}
/* keep the old page on screen until the new one is ready, then swap at once (no fade, so nothing is held up afterwards) */
@view-transition{navigation:auto}
::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
/* home hero ticker: its text is about twice as long as the GMK PACKAGE one, so a longer loop keeps both at the same speed */
html body:not(.gx) .ticker>div{animation-duration:127s!important}

/* ================= FOOTER (every page) =================
   A postal ledger: an airmail edge, the sticker and the name, three short columns (pages, help, write to us), the fine print where a
   page needs it, and one line at the foot. Its content sits on the page's own column (the order-status width). Built fresh under
   .skf, so none of the old footer rules (.footer-brand, .footer-right, .legal…) reach it; footer.footer stays for the scripts. */
html body footer.footer.skf{display:block!important;position:relative;margin:0!important;padding:0!important;border:0!important;border-top:2px solid #3b2c22!important;
  background:var(--paper-2,#e9dfc8)!important;color:#3b2c22;text-align:left;font-family:var(--f-text);font-size:14px;letter-spacing:0;text-transform:none;box-shadow:none!important;overflow:hidden;max-width:none}
html body footer.footer.skf:before{content:"";position:absolute;left:0;right:0;top:0;height:7px;border-bottom:2px solid #3b2c22;
  background:repeating-linear-gradient(-45deg,#b23a34 0 8px,#f7f0df 8px 16px,#2c5a8c 16px 24px,#f7f0df 24px 32px)}
html body.gx footer.footer.skf{background:var(--gx-kraft-lt,#e4c99b)!important}
html body.gx footer.footer.skf:before{background:repeating-linear-gradient(-45deg,#b8382e 0 8px,#fbf8f1 8px 16px,#2c5a8c 16px 24px,#fbf8f1 24px 32px)}
.skf *{box-sizing:border-box}
/* (every layout rule below is written as html body footer.skf … so it outranks style.css's old ".footer div{display:flex;gap:24px}") */
html body footer.skf div{display:block;gap:0;justify-content:normal}
html body footer.skf .skf-in{width:min(1176px,calc(100% - 64px));margin:0 auto;padding:62px 0 30px}
/* the brand takes the left half; PAGES and HELP / CONTACT share the right half, starting exactly where the fine print's second
   column ("GMK and the GMK logo…") starts below: that column begins 20px right of the middle (columns:2, column-gap:40px) */
/* three containers: the brand (left half, untouched); PAGES starting where the fine print's 2nd paragraph starts (untouched);
   HELP / CONTACT starting exactly halfway across that 2nd paragraph. With the 40px gaps: 2nd paragraph = (100% - 40px)/2 wide,
   so PAGES is half of it minus a gap and HELP / CONTACT is the other half */
html body footer.skf .skf-top{display:grid;grid-template-columns:calc(50% - 20px) calc((100% - 40px)/4 - 40px) minmax(0,1fr);gap:36px 40px;align-items:start}
/* the brand: the sticker, then the name and its one short line to the right of it, centred on it, the same way the GMK PACKAGE
   name sits beside the sticker in the GMK pages' header: it starts 19px past the sticker's visible (die-cut) edge, which reaches
   5px past the logo itself */
html body footer.skf .skf-brand{display:flex;flex-direction:row;align-items:center;gap:24px;min-width:0;padding-right:12px}
html body .skf-logo{flex:none;display:block;width:52px;height:52px;margin:0 0 0 5px;line-height:0}
html body .skf-logo img{display:block;width:52px!important;height:52px!important;object-fit:contain;object-position:left center;filter:url(#sk-diecut-52)!important;overflow:visible;max-width:none}
html body footer.skf .skf-brand>div{display:flex;flex-direction:column;gap:9px}
.skf-brand strong{display:block;margin:0;font:400 23px/1 var(--f-sub,"SK Subheading",Impact,sans-serif)!important;letter-spacing:.03em!important;text-transform:uppercase;color:#3b2c22}
.skf-brand p{margin:0!important;max-width:34ch;font:400 14px/1.5 var(--f-text)!important;color:rgba(59,44,34,.78)}
html body footer.skf .skf-col{display:flex;flex-direction:column;align-items:flex-start;gap:11px;min-width:0}
.skf-col b{display:block;margin:4px 0 6px;font:500 9px/1 var(--f-tech);letter-spacing:.18em;text-transform:uppercase;color:#b23a34}
html body.gx .skf-col b{color:#b8382e}
html body .skf a{color:#3b2c22;text-decoration:none!important;transition:color .16s ease}
.skf-col a{font:500 14px/1.3 var(--f-text);letter-spacing:-.005em;overflow-wrap:anywhere}
.skf-col a[aria-current="page"]{color:#b23a34}
.skf-col a[aria-current="page"]:before{content:"";display:inline-block;width:6px;height:6px;margin:0 8px 1px 0;background:#b23a34;transform:rotate(45deg)}
.skf-col a.ext:after{content:"";display:inline-block;width:.62em;height:.62em;margin-left:.4em;vertical-align:.02em;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 12L12 4M6 4h6v6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 12L12 4M6 4h6v6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.skf-col small{display:block;margin-top:-6px;font:400 12px/1.4 var(--f-text);color:rgba(59,44,34,.62)}
/* help / contact: the email address and the phone number, each with the same little arrow (the phone number calls it), the note,
   then the deposits/returns/rights page */
html body footer.skf .skf-col.skf-contact{gap:11px}   /* 2026-10-20: same spacing as PAGES, line for line */
/* 2026-10-20: phone, email, a dashed rule, then the two page links: five rows, each level with A to E in PAGES. The rule takes
   exactly one link line's height (the links' own type size x 1.3), with the dashes across its middle. */
html body footer.skf .skf-contact .skf-sep{display:block;align-self:stretch;position:relative;height:1.3em;font:500 14px/1.3 var(--f-text);flex:none}
html body footer.skf .skf-contact .skf-sep:after{content:"";position:absolute;left:0;right:0;top:50%;border-top:1.5px dashed rgba(59,44,34,.45);transform:translateY(-50%)}
@media(min-width:801px) and (max-width:1080px){html body footer.skf .skf-contact .skf-sep{font-size:13px}}
html body .skf .skf-line{display:flex;flex-direction:row;align-items:baseline;gap:12px;min-width:0}
/* whenever it sits beside PAGES (every width but the narrowest phones): the column is exactly as tall as PAGES (its first and last
   lines level with PAGES' first and last), the lines spread evenly down it. (contain:size keeps it from making the row any
   taller: the row's height comes from PAGES) */
/* 2026-10-20: no longer spread down the column: each line sits exactly where the matching PAGES line does (same 11px gap) */
@media(min-width:375px){html body footer.skf .skf-col.skf-contact{align-self:flex-start;contain:none;justify-content:flex-start;gap:11px}}
html body .skf .skf-line span{font:500 14px/1.3 var(--f-text);letter-spacing:-.005em;overflow-wrap:anywhere}
html body .skf .skf-line span:after{content:"";display:inline-block;width:.62em;height:.62em;margin-left:.45em;vertical-align:.02em;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 12L12 4M6 4h6v6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 12L12 4M6 4h6v6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:translate .16s ease}
@media (hover:hover){html body .skf .skf-line:hover span:after{translate:2px -2px}}

/* wide screens: under the logo and name, a small airmail ticket fills the brand's half down to the level of PAGES' last line.
   On the regular pages it points to the current release; on the GMK pages, back to the studio's home. (Phones: not shown, the
   brand has its own row there and nothing looks empty.) */
html body .skf .skf-now{display:none}
@media(min-width:801px){
  html body footer.skf .skf-brand{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:24px;row-gap:0;align-items:center;align-self:stretch;contain:size}
  html body .skf .skf-now{grid-column:1/-1;align-self:end;justify-self:start;position:relative;display:flex;flex-direction:column;gap:7px;margin-left:5px;padding:12px 46px 12px 26px;
    background:#f7f0df;border:1.5px solid #3b2c22;border-radius:10px;box-shadow:3px 3px 0 #3b2c22;overflow:hidden}
  html body.gx .skf .skf-now{background:#fbf8f1}
  /* the footer's own airmail edge (footer.skf:before: 7px of stripe, 2px ink rule, 8px bands) turned on its side: the same band,
     rule and colours, the stripe rotated with it */
  html body .skf .skf-now:before{content:"";position:absolute;left:0;top:0;bottom:0;width:7px;border-right:1.5px solid #3b2c22;   /* same weight as the ticket's own outline */
    background:repeating-linear-gradient(45deg,#b23a34 0 8px,#f7f0df 8px 16px,#2c5a8c 16px 24px,#f7f0df 24px 32px)}
  html body.gx .skf .skf-now:before{background:repeating-linear-gradient(45deg,#b8382e 0 8px,#fbf8f1 8px 16px,#2c5a8c 16px 24px,#fbf8f1 24px 32px)}
  html body .skf .skf-now:after{content:"";position:absolute;right:17px;top:50%;width:11px;height:11px;margin-top:-5.5px;background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 12L12 4M6 4h6v6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 12L12 4M6 4h6v6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
  html body .skf .skf-now small{display:block;margin:0;font:500 8.5px/1 var(--f-tech);letter-spacing:.18em;text-transform:uppercase;color:#b23a34}
  html body.gx .skf .skf-now small{color:#b8382e}
  html body .skf .skf-now span{font:600 14px/1.2 var(--f-text);letter-spacing:-.005em}
}
@media (hover:hover){html body .skf a:hover{color:#b23a34}}
/* Links turn red the way they do under a mouse on touch screens too (the shell drops every :hover style there, so :hover alone does nothing on a tablet or phone):
   footer links, the BACK link, and every link inside running text (pages, pop-ups, the order pages' "need a hand" note) also react to :active / :focus-visible. */
html body .skf a:not(.skf-now):is(:active,:focus-visible){color:#b23a34}
html body .page-back:is(:active,:focus-visible){color:#a52d25!important}
html body :is(p,li,.legal) a:not([class*="button"]):not([class*="btn"]):not(.nav-cta):not(.skf-now):not(.skf-line):not(.text-link):not(#_sk):is(:active,:focus-visible){color:#a52d25!important;text-decoration-color:currentColor}
html body .skf a:active{color:#b23a34}
/* the current-release ticket is a button, not a text link: its words keep their ink colour on hover and press */
html body footer.skf a.skf-now,html body footer.skf a.skf-now:hover,html body footer.skf a.skf-now:active,html body footer.skf a.skf-now:focus-visible{color:#3b2c22!important}
/* a full-width band that ends the page (the closers on Home and About) loses its bottom rule: the footer's own top rule is the
   only line there, so the two never stack into one thick border */
html body main>.closer:last-child{border-bottom:0!important}
html body .skf a:focus-visible{outline:2px solid #3b2c22;outline-offset:3px;border-radius:3px}
html body footer.skf .skf-fine{margin-top:40px;padding-top:24px;border-top:1.5px dashed rgba(59,44,34,.45);columns:2;column-gap:40px}
.skf-fine p{margin:0 0 12px!important;break-inside:avoid;font:400 11.5px/1.65 var(--f-text)!important;color:rgba(59,44,34,.74);text-align:left!important}
.skf-fine p b{font:500 9.5px/1 var(--f-tech);letter-spacing:.12em;color:#3b2c22}
.skf-fine a{font:500 9.5px/1 var(--f-tech);letter-spacing:.1em;text-decoration:underline!important;text-underline-offset:3px;white-space:nowrap}
html body footer.skf .skf-bar{display:flex;align-items:center;justify-content:space-between;gap:14px 24px;flex-wrap:wrap;margin-top:40px;padding-top:20px;border-top:2px solid #3b2c22;
  font:500 9px/1.4 var(--f-tech);letter-spacing:.14em;text-transform:uppercase}
.skf-bar span{color:rgba(59,44,34,.72)}
.skf-bar a{font:500 9px/1.4 var(--f-tech)!important;letter-spacing:.14em!important;white-space:nowrap}
.skf-stamp{display:inline-flex;align-items:center;gap:10px}
.skf-stamp i{display:inline-block;width:24px;height:16px;border:1.5px solid #3b2c22;border-radius:2px;background:repeating-linear-gradient(-45deg,#b23a34 0 3px,#f7f0df 3px 6px,#2c5a8c 6px 9px,#f7f0df 9px 12px)}
/* narrower desktops: the same halves until the phone breakpoint, slightly smaller type */
@media(min-width:801px) and (max-width:1080px){
  .skf-col a,html body .skf .skf-line span{font-size:13px}
  .skf-brand strong{font-size:20px!important}.skf-brand p{font-size:13px!important}
}
/* phones (the same breakpoint as the phone menu and the music player): the brand on its own row, PAGES and HELP / CONTACT side by
   side under it, the fine print in one column, the foot line stacked */
@media(max-width:800px){
  html body footer.skf .skf-in{padding:52px 0 96px}            /* room under the last line for the music player and BACK TO TOP */
  /* PAGES on the left half, HELP / CONTACT starting exactly at the middle of the content width. If the middle is too far right for
     its text to stay on one line, the column's start moves left instead (its width never drops below its widest line), so it stays
     flush with the right edge, where the fine print below ends. (contain:size is lifted here so its content can be measured.) */
  html body footer.skf .skf-top{grid-template-columns:minmax(0,1fr) minmax(max-content,1fr);gap:32px 0}
  html body footer.skf .skf-col.skf-contact{contain:none}
  /* the brand row spans both columns; its own text width must not take part in sizing them (width:0 + min-width:100% = it just fills the row) */
  html body footer.skf .skf-brand{width:0;min-width:100%}
  html body footer.skf .skf-brand{grid-column:1/-1}
  html body footer.skf .skf-fine{columns:1;margin-top:34px}
  html body footer.skf .skf-bar{flex-direction:column;align-items:flex-start;gap:12px;margin-top:34px}
  html body .skf-logo,html body .skf-logo img{width:46px!important;height:46px!important}
  html body footer.skf .skf-brand{gap:20px}
  .skf-brand strong{font-size:21px!important}
}
/* GMK PACKAGE footer: the line under the name ("Collection N° 001, designed by Stefan Samos.") stays on one line; the type steps down
   as the brand's column narrows so it still fits beside the sticker */
html body.gx footer.skf .skf-brand p{max-width:none;white-space:nowrap}
@media(min-width:801px) and (max-width:1080px){html body.gx footer.skf .skf-brand p{font-size:12px!important}}
@media(min-width:481px) and (max-width:800px){html body.gx footer.skf .skf-brand p{font-size:13px!important}}
@media(min-width:375px) and (max-width:480px){html body.gx footer.skf .skf-brand p{font-size:11px!important}}
@media(max-width:374px){html body.gx footer.skf .skf-brand p{white-space:normal;max-width:34ch}}
@media(max-width:700px){html body footer.skf .skf-in{width:calc(100% - 48px)}}
@media(max-width:319px){html body footer.skf .skf-top{grid-template-columns:1fr}}

/* ================= PAGE WIDTH: every inner page uses the order-status column, phones included ================= */
@media(max-width:700px){
  html body:not(.status-page) main:has(>.head){padding-left:24px!important;padding-right:24px!important}
  html body.status-page .wrap{width:calc(100% - 48px)!important}
}

/* ================= V43 (2026-10-13) · ONE OUTLINE, ONE FIELD HEIGHT, ONE BUTTON HEIGHT, EVERYWHERE =================
   Every outlined button and every field: a 2px outline (only the width changes; colour, style and corners stay, and a
   button with no outline still has none). Every text field / dropdown: 44px tall, the checkout fields' height. Every
   text button: 36px tall, the checkout CONTINUE button's height. Square icon buttons (+ / −, ✕, arrows) and the header
   keep their own size. The checkout's own address fields keep their fit-to-panel sizing (gmk-package/checkout, V8).
   The :not(#_) pairs only raise priority over older page rules. Remove this block to undo. */
html body :is(input:not([type=checkbox],[type=radio],[type=range],[type=hidden],[type=submit],[type=button],[type=reset],[type=file],[type=color],[type=image]),select,textarea):not(#_):not(#_){border-width:2px!important}
html body :is(input:not([type=checkbox],[type=radio],[type=range],[type=hidden],[type=submit],[type=button],[type=reset],[type=file],[type=color],[type=image]),select):not(.qty input):not(.shipping-field>input):not(#_):not(#_){height:44px!important;min-height:44px!important;box-sizing:border-box!important}
html body :is(button,[role=button],input[type=submit],input[type=button],input[type=reset],.button,.btn,.pay-submit,.co-btn,.nav-cta,.mobile-top-button):not(#_):not(#_){border-width:2px!important}
html body :is(.button,.btn,.pay-submit,.co-btn,.checkout-round-nav button,input[type=submit],input[type=button],.status-page button[type=submit],.status-page .session-actions button,#lookupButton):not(#_):not(#_){height:36px!important;min-height:0!important;padding-top:0!important;padding-bottom:0!important;box-sizing:border-box!important}

/* ================= V44 (2026-10-13) · TEXT CENTRING (with sk-ui.js V36, which centres every label on its capitals) =================
   Footer: STEF KEYCAPS / GMK PACKAGE and its tagline sit closer together (9px -> 4px); the pair is centred on the logo as one
   block by sk-ui.js. Header (GMK pages): the hand-tuned offsets on the app title (3.75px up everywhere, 2px down on phones) are
   removed, because the title is now centred by measurement and the old offsets would push it off again. Remove this block to undo. */
html body footer.skf .skf-brand>div:not(#_){gap:4px!important}

/* ================= V45 (2026-10-13) · EVERY BUTTON LAYS OUT ITS TEXT THE SAME WAY =================
   Before, buttons placed their words differently: some had more padding on top than at the bottom, some a taller line height,
   some didn't centre their content vertically at all. So the same nudge (sk-ui.js) landed at different heights. Now every
   button, button-link and pill has: its words on a line exactly 1em tall, no top / bottom padding (the height comes from the
   button's own fixed height), and its content centred vertically. With every button built the same way, sk-ui.js centres
   all of them identically. Side padding, widths and icons are untouched. Remove this block to undo. */
html body :is(.button,.btn,.pay-submit,.co-btn,.nav-cta,.mobile-top-button,.checkout-round-nav button,.status-page button[type=submit],.status-page .session-actions button,#lookupButton,.gx-acc-add):not(#_):not(#_){line-height:1!important;padding-top:0!important;padding-bottom:0!important;align-items:center!important}
html body :is(.button,.btn,.pay-submit,.co-btn,.nav-cta,.mobile-top-button,.checkout-round-nav button,.status-page button[type=submit],.status-page .session-actions button,#lookupButton,.gx-acc-add):not(#_):not(#_) :is(sk-t,.sk-dy){line-height:1!important}

/* ================= V46 (2026-10-13) · NO TEXT AUTOSIZING INSIDE BUTTONS =================
   On phones and tablets shown zoomed out (e.g. a Galaxy Z Fold at 50%, or any very wide layout on a touch device), Chrome
   quietly enlarges text to keep it readable, without telling the page. Inside a fixed-height button that pushes the words
   off centre (sk-ui.js centres them for the size the page asked for, the browser draws them bigger). Buttons, button links,
   the header and the footer cards keep the exact type size they were designed with; running text is not affected.
   Remove this block to undo. */
html body :is(button,[role=button],.button,.btn,.pay-submit,.co-btn,.nav-cta,.mobile-top-button,header.nav,footer.skf .skf-now,footer.skf .skf-brand,sk-t,.sk-dy):not(#_){-webkit-text-size-adjust:100%!important;text-size-adjust:100%!important}
html body :is(button,[role=button],.button,.btn,.pay-submit,.co-btn,.nav-cta,.mobile-top-button,header.nav,footer.skf .skf-now,footer.skf .skf-brand) *:not(#_){-webkit-text-size-adjust:100%!important;text-size-adjust:100%!important}

/* ================= V47 (2026-10-13) · NAVIGATION PILLS: THE SAME 2PX OUTLINE AS EVERY BUTTON =================
   The pill that sits behind the current page in the header (every page and screen size, GMK pages included) and the one in
   the phone menu had a 1.5px outline; they now match the 2px outline of every button and field (V43). Remove to undo. */
html body :is(.sk-navblob,.skm__pill):not(#_):not(#_){border-width:2px!important}

/* ================= V48 (2026-10-13) · THE LAST 1.5PX BUTTON OUTLINES -> 2PX =================
   The phone menu's HOME back button (GMK pages) and the footer's CURRENT RELEASE / THE STUDIO card, with the stripe rule inside
   the card that is drawn to match its outline. (The music player's play / pause button is set in sk-player.js.) Remove to undo. */
html body :is(.skm__foot a.back,footer.skf .skf-now):not(#_):not(#_){border-width:2px!important}
html body footer.skf .skf-now:not(#_):not(#_):before{border-right-width:2px!important}

/* ================= V49 (2026-10-13) · FOOTER CARD ON PHONES AND TABLETS: LOGO EDGE TO THE RIGHT EDGE =================
   On touch screens the CURRENT RELEASE / THE STUDIO card starts exactly at the logo sticker's left edge and runs to the right
   end of the footer's brand area (it used to start 5px in and stop where its text ended). Desktop is unchanged. Remove to undo. */
/* V49 REMOVED (2026-10-27, owner): the card is always the compact desktop ticket (as wide as its text), on every screen and
   device, touch or not. */
html body footer.skf .skf-now:not(#_):not(#_){justify-self:start!important;width:max-content!important;max-width:100%!important}
html body header.nav.nav--app .app-id:not(#_){top:50%!important;transform:translateY(-50%)!important}
/* ================= V51 (2026-10-13) · GMK HEADER: GMK PACKAGE / N° 001 · GROUP BUY ON THE LOGO'S CENTRE LINE =================
   The line above (V44) centred the name on the whole header box, but that box includes the ink rule at its foot, so the
   name sat about 4px below the logo and the middle of the cream band. It now uses the same centre line as the logo and the
   links (gx-app.css: 50% - 3.75px), at every width. Remove this block to undo. */
html body header.nav.nav--app .app-id:not(#_):not(#_){top:calc(50% - 3.75px)!important;transform:translateY(-50%)!important}

/* ================= V52 (2026-10-13) · GREYED-OUT BUTTONS, PHONE FOOTER LAST LINE =================
   1. Greyed-out buttons look exactly like the checkout's not-ready-yet CONTINUE: the same red button, colour taken out
      (grayscale) and faded to 45%, normal shadow, a "not allowed" cursor. ORDER STATUS on its own page (it used to look
      darkened and pushed in) can be tapped but does nothing (sk-ui.js V45). The order-status page's LOOK UP / order buttons
      while they're busy get the same look. */
html body header.nav a.nav-cta.is-current:not(#_):not(#_),html body header.nav a.nav-cta.is-current:hover:not(#_):not(#_),
html body header.nav a.nav-cta.is-current:active:not(#_):not(#_),html body header.nav a.nav-cta.is-current:focus-visible:not(#_):not(#_){
  background:var(--red,#b8382e)!important;filter:grayscale(1)!important;opacity:.45!important;box-shadow:2px 2px 0 #3b2c22!important;
  transform:none!important;translate:none!important;pointer-events:auto!important;cursor:not-allowed!important}
html body.status-page :is(#lookupButton,.order-option):disabled:not(#_){opacity:.45!important;filter:grayscale(1)!important;cursor:not-allowed!important;transform:none!important;translate:none!important}
/* 2. Phones: the footer's last line is one row, © 2026 STEFAN SAMOS · SPECIAL DELIVERY on the left and the back link on the far
      right (left out by sk-ui.js V45 when both don't fit). The empty space under it is gone: the line sits in the middle of the
      strip under the rule, 20px above and below. */
@media(max-width:800px){
  html body footer.skf .skf-in:not(#_){padding-bottom:20px!important}
  html body footer.skf .skf-bar:not(#_){flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:space-between!important;white-space:nowrap}
  html body footer.skf .skf-bar:not(#_)>a{margin-left:auto}
}
/* ================= V53 (2026-10-14) · PHONE FOOTER: HOME CARD BESIDE THE LOGO =================
   Phones only. The STEF KEYCAPS HOME / THE STUDIO card moves up to the right of the logo and name, at the right edge, when the row
   has room for it (sk-ui.js V46 checks); when it doesn't, it isn't shown on phones. Desktop unchanged. */
@media(max-width:800px){
  /* V55: a plain row (logo, name, card pushed to the right edge) instead of the grid, which squeezed the card */
  html body footer.skf .skf-brand.v53-side:not(#_):not(#_){contain:none!important;display:flex!important;flex-direction:row!important;align-items:center!important;gap:16px!important}
  html body footer.skf .skf-brand.v53-side:not(#_):not(#_)>div{flex:none!important}
  html body footer.skf .skf-brand.v53-side:not(#_):not(#_) .skf-now{flex:none!important;margin-left:auto!important}
  /* V56: the card's own look (its desktop rules only exist above 801px, so on phones it showed as bare text): the same ticket,
     airmail edge, arrow and type as on desktop */
  html body footer.skf .skf-brand.v53-side .skf-now{position:relative;flex-direction:column;gap:7px;padding:12px 40px 12px 24px;
    background:#f7f0df;border:2px solid #3b2c22;border-radius:10px;box-shadow:3px 3px 0 #3b2c22;overflow:hidden;color:#3b2c22}
  html body.gx footer.skf .skf-brand.v53-side .skf-now{background:#fbf8f1}
  html body footer.skf .skf-brand.v53-side .skf-now:before{content:"";position:absolute;left:0;top:0;bottom:0;width:7px;border-right:2px solid #3b2c22;
    background:repeating-linear-gradient(45deg,#b23a34 0 8px,#f7f0df 8px 16px,#2c5a8c 16px 24px,#f7f0df 24px 32px)}
  html body footer.skf .skf-brand.v53-side .skf-now:after{content:"";position:absolute;right:15px;top:50%;width:11px;height:11px;margin-top:-5.5px;background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 12L12 4M6 4h6v6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 12L12 4M6 4h6v6' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
  html body footer.skf .skf-brand.v53-side .skf-now small{display:block;margin:0;font:500 8.5px/1 var(--f-tech);letter-spacing:.18em;text-transform:uppercase;color:#b23a34}
  html body footer.skf .skf-brand.v53-side .skf-now span{font:600 14px/1.2 var(--f-text);letter-spacing:-.005em}
  /* V54: phones hide this card by default (the older rule above), so beside-the-logo has to switch it back on */
  html body footer.skf .skf-brand.v53-side:not(#_) .skf-now{display:flex!important;grid-column:3;grid-row:1;align-self:center;justify-self:end;margin:0!important;padding:12px 40px 12px 24px;white-space:nowrap}
  html body footer.skf .skf-brand.v53-none:not(#_) .skf-now{display:none!important}
}

/* ================= V50 (2026-10-13) · ORDER STATUS ON GMK PAGES, PHONES: TEXT A HAIR HIGHER =================
   Only the ORDER STATUS button in the header of the GMK pages (collection, accessories, checkout), only on phones (800px and
   narrower). Its words move up half a pixel; the arrow, the button and every other button are untouched. Remove to undo. */
@media (max-width:800px){
  html body header.nav.nav--app a.nav-cta:not(#_):not(#_) > sk-t{translate:0 -.5px}
}

/* ================= FULL-WIDTH RAINBOW BAR UNDER PAGE TITLES (.head) =================
   The four-colour bar under every inner page title (About, Shipping, Blog, Legal, Order status, Accessories...) runs from the left
   edge of the viewport to the right edge instead of stopping at the page column. The bars with a rounded ink end (under section
   headings) are a different element (h2:after) and are not touched. Remove to undo. */
html body .head:after{left:50%!important;right:auto!important;width:100vw!important;max-width:none!important;transform:translateX(-50%)!important;box-sizing:border-box}
/* 2026-10-22 (owner): every radio dot on the site is the brand red (custom ones like Order Status .ship-dot use #b8382e too) */
input[type="radio"]{accent-color:#b8382e}
/* ================= V57 (2026-10-28, owner) · PHONE FOOTER: DESKTOP SPACING, NO CURRENT RELEASE CARD =================
   Phones and tablets (800px and narrower), every page: the gap between the logo sticker and STEF KEYCAPS / its tagline is the
   desktop's 24px (it was 16-20px) and is never squeezed. The CURRENT RELEASE / THE STUDIO card still shows beside the name
   whenever it fits with that spacing (sk-ui.js V46 measures with 24px); when it doesn't, the card is left out.
   Desktop unchanged. Remove this block to undo. */
@media(max-width:800px){
  html body footer.skf .skf-brand:not(#_):not(#_):not(#_){gap:24px!important}
  /* 2026-10-28: the 46px phone logo gets its own size-matched rounded corners (sk-ui.js diecut()) */
  html body .skf-logo img:not(#_){filter:url(#sk-diecut-46)!important}
}

/* ================= V58 (2026-10-30, owner) · PHONE HERO BAR: ONE LEFT, ONE RIGHT =================
   Phones and tablets (800px and narrower): the third label (SCROLL ↓) is hidden, which used to leave "A — STEF KEYCAPS" on the
   left and "KEYCAPS / KEYBOARD GOODS" stranded in the middle. Now the two remaining labels sit one at each end: first left,
   second right. Desktop unchanged. Remove this block to undo. */
@media(max-width:800px){
  html body .hero .hero-foot:not(#_):not(#_){grid-template-columns:auto auto!important;justify-content:space-between!important}
  html body .hero .hero-foot:not(#_):not(#_)>span:nth-child(1){justify-self:start!important;text-align:left!important}
  html body .hero .hero-foot:not(#_):not(#_)>span:nth-child(2){justify-self:end!important;text-align:right!important}
  html body .hero .hero-foot:not(#_):not(#_)>span:nth-child(3){display:none!important}
}

/* ================= V59 (2026-10-30, owner) · TEXT LINKS (.text-link): HOVER + CLICK ANIMATION, EVERY PAGE =================
   ACCESSORIES next to JOIN THE GROUP BUY, WHO WE ARE, MORE ABOUT STEF KEYCAPS, ORDER STATUS, and every other .text-link.
   Hover: the red underline wipes in from the left over the dark one, the label turns red and lifts 1px.
   Click: the label presses down 1px and shrinks a touch, then springs back with a small bounce. A link written inside a sentence
   (.text-link--inline) only turns red with its own underline, because a line of running text can't be moved.
   Remove this block to undo. */
html body a.text-link:not(.text-link--inline):not(#_):not(#_){position:relative;display:inline-block;
  transition:color .25s ease,translate .26s cubic-bezier(.3,1.7,.5,1),scale .26s cubic-bezier(.3,1.7,.5,1)!important}
html body a.text-link:not(.text-link--inline):not(#_):not(#_)::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--red,#b8382e);
  transform:scaleX(0);transform-origin:left center;transition:transform .3s cubic-bezier(.2,.8,.2,1);pointer-events:none}
html body a.text-link:not(#_):not(#_):is(:hover,:active,:focus-visible){border-color:var(--ink,#3b2c22)!important;color:var(--red,#b8382e)!important}
html body a.text-link:not(.text-link--inline):not(#_):not(#_):is(:focus-visible,:active)::after{transform:scaleX(1)}
@media (hover:hover){
  html body a.text-link:not(.text-link--inline):not(#_):not(#_):hover{translate:0 -1px}
  html body a.text-link:not(.text-link--inline):not(#_):not(#_):hover::after{transform:scaleX(1)}
}
html body a.text-link:not(.text-link--inline):not(#_):not(#_):active{translate:0 1px;scale:.96;color:#a52d25!important;
  transition:color .1s ease,translate .08s ease,scale .08s ease!important}
/* a link inside a sentence keeps its own underline and simply turns red */
html body a.text-link.text-link--inline:not(#_):not(#_):is(:hover,:active,:focus-visible){border-color:var(--red,#b8382e)!important}
@media (prefers-reduced-motion:reduce){
  html body a.text-link:not(#_):not(#_),html body a.text-link:not(#_):not(#_)::after{transition:none!important}
  html body a.text-link:not(#_):not(#_):is(:hover,:active){translate:none!important;scale:none!important}
}