/* Hallmark · macrostructure: Reveal door (Visit) · Typographic index (Kits) · Banded store (Stores and store pages)
   genre: playful, owner-directed retro luxury · theme: custom "Four Strands / Night" (tokens from site.css, none redefined here except the numeral size) · tone: playful
   nav: N9 selvedge · footer: Ft6 job ticket (shared chrome) · enrichment: Tier B hand-drawn SVG map plus CSS slats, no library
   motion: every transform is scroll-linked through --p or a one-shot entrance, each with a prefers-reduced-motion (and no-script) fallback
   pre-emit critique (drafter self-score, not reviewed): P4 H4 E4 S4 R4 V4 */

:root{ --text-numeral:clamp(9rem,2rem + 34vw,32rem); }

/* ---------- shared ---------- */
.info-hero-copy{padding:var(--space-xl) 0}
.info-hero-copy .lede{max-width:46ch}
.info-note{font:500 12px/1.5 var(--font-mono);color:var(--text-3);max-width:60ch;margin:var(--space-md) 0 0}
.page .btn{max-width:100%}
.ticket dd{min-width:0;overflow-wrap:anywhere}
.select:disabled{opacity:.55;cursor:not-allowed}
.select{appearance:auto}
.select:hover:not(:disabled){border-color:var(--text-3)}
@media (max-width:400px){
  .page .btn{padding-inline:var(--space-sm);font-size:var(--text-sm)}
  .ticket dl{gap:var(--space-2xs) var(--space-sm)}
}

/* =====================================================================
   VISIT: "The Door"
   ===================================================================== */
.visit{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,4vw,72px);align-items:start;padding-top:var(--space-md)}
.visit__copy{position:sticky;top:calc(var(--frame) + var(--space-lg));padding:var(--space-xl) 0}
.visit__copy .display{font-size:var(--text-2xl);line-height:1}
.visit__copy .placeholder{vertical-align:middle;white-space:normal}
.door-run{height:230svh;position:relative}
.door{position:sticky;top:calc(var(--frame) + var(--space-sm));height:min(78svh,720px);margin:0;background:var(--ground-3);border:2px solid var(--line)}
.door__map{position:absolute;inset:0;width:100%;height:100%;display:block}
.m-ground{fill:var(--ground-3)}
.m-road{fill:none;stroke:var(--line);stroke-width:34;stroke-linecap:round}
.m-lot{fill:var(--ground-2);stroke:var(--text-2);stroke-width:3;stroke-linejoin:round}
.m-unit{fill:var(--ground-3);stroke:var(--text-3);stroke-width:2}
.m-unit--ours{fill:var(--ground-3);stroke:var(--text);stroke-width:4}
.m-route{fill:none;stroke:var(--mag);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - clamp(0,(var(--p) - .5)/.2,1))}
.m-dot{fill:var(--mag)}
.m-label{font:600 15px/1 var(--font-mono);letter-spacing:.14em;fill:var(--text-2)}
.m-label--small{font-size:11px;letter-spacing:.04em;fill:var(--text)}
.m-note{font:500 11px/1 var(--font-mono);letter-spacing:.04em;fill:var(--text-3)}

.door__slats{position:absolute;inset:0;display:grid;grid-template-rows:repeat(14,minmax(0,1fr));pointer-events:none}
.slat{--q:clamp(0,(var(--p) - .3 - var(--i)*.018)/.16,1);position:relative;background:var(--ground-2);box-shadow:inset 0 2px 0 var(--line),inset 0 -3px 0 var(--ground-3);transform-origin:top center;transform:translate(0,calc(var(--q)*var(--i)*-84%)) scaleY(calc(1 - var(--q)*.84))}
.slat:last-child::after{content:"";position:absolute;left:50%;bottom:34%;width:22%;height:24%;transform:translateX(-50%);border-radius:var(--radius-pill);background:var(--text-3)}
.door__stencil{position:absolute;left:var(--space-lg);right:var(--space-md);top:62%;z-index:2;pointer-events:none;opacity:clamp(0,(.56 - var(--p))*12,1);display:grid;gap:var(--space-2xs);justify-items:start}
.door__stencil b{font:900 var(--text-3xl)/.85 var(--font-display);font-stretch:62%;letter-spacing:.02em;color:var(--text-2)}
.door__stencil .placeholder{background:var(--ground-2)}

.visit-ticket{padding:var(--space-4xl) 0 var(--space-xl);border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(24px,4vw,72px);align-items:start}
.visit-ticket .h2{position:sticky;top:calc(var(--frame) + var(--space-lg));font-size:var(--text-xl)}
.visit-rows{margin:0;display:grid}
.visit-rows > div{display:grid;grid-template-columns:minmax(0,9rem) minmax(0,1fr);gap:var(--space-md);padding:var(--space-md) 0;border-top:1px solid var(--line)}
.visit-rows > div:last-child{border-bottom:1px solid var(--line)}
.visit-rows dt{font:600 12px/1.6 var(--font-mono);letter-spacing:.16em;color:var(--text-3)}
.visit-rows dd{margin:0;font:650 var(--text-md)/1.4 var(--font-body);overflow-wrap:anywhere}
.visit-rows a{text-underline-offset:4px;text-decoration-color:var(--line);transition:text-decoration-color var(--dur-fast)}
.visit-rows a:hover{text-decoration-color:var(--text)}
.visit-rows a:active{color:var(--text-2)}
.visit-extra{margin:var(--space-lg) 0 0;display:grid;gap:var(--space-sm);justify-items:start}
.visit-extra p{margin:0;max-width:52ch;color:var(--text-2)}
@media (max-width:900px){
  .visit{grid-template-columns:minmax(0,1fr)}
  .visit__copy{position:relative;top:auto;padding-bottom:0}
  .door-run{height:190svh}
  .door{height:min(62svh,560px)}
  .visit-ticket{grid-template-columns:minmax(0,1fr)}
  .visit-ticket .h2{position:relative;top:auto}
}
@media (max-width:480px){.visit-rows > div{grid-template-columns:minmax(0,1fr);gap:var(--space-3xs)}}

/* =====================================================================
   KITS: the numeral and the index
   ===================================================================== */
.kits-hero{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,4vw,72px);align-items:start;padding-top:var(--space-md)}
.kits-copy{position:sticky;top:calc(var(--frame) + var(--space-lg));padding:var(--space-xl) 0}
.kits-copy .display{font-size:var(--text-2xl);line-height:1}
.kits-run{--a:.34;--w:.31;height:200svh;position:relative;order:-1}
.jersey{position:sticky;top:calc(var(--frame) + var(--space-sm));height:min(72svh,720px);margin:0;display:grid;grid-template-rows:minmax(0,1fr) auto;align-items:center}
.jersey__window{height:.9em;overflow:clip;font-size:var(--text-numeral);line-height:.9;min-width:0}
.jersey__stack{--t:clamp(0,(var(--p) - var(--a))/var(--w),1);--k:calc(var(--t)*11);display:block;font-family:var(--font-display);font-weight:900;font-stretch:62%;letter-spacing:-.02em;transform:translate(0,calc(var(--k)*-.9em));transition:transform var(--dur-fast) var(--ease-press)}
@supports (width:round(down,5px,2px)){.jersey__stack{--k:round(down,calc(var(--t)*11),1)}}
.jersey__stack span{display:block;height:.9em;color:transparent;-webkit-text-stroke:3px var(--c,var(--mag))}
.jersey__stack span:nth-child(4n+2){--c:var(--blu)}.jersey__stack span:nth-child(4n+3){--c:var(--grn)}.jersey__stack span:nth-child(4n+4){--c:var(--yel)}
.jersey__cap{margin:0;display:flex;flex-wrap:wrap;gap:var(--space-2xs) var(--space-md);font:600 12px/1.4 var(--font-mono);letter-spacing:.16em;color:var(--text-2);padding-top:var(--space-md);border-top:1px solid var(--line)}
@media (max-width:900px){
  .kits-hero{grid-template-columns:minmax(0,1fr)}
  .kits-copy{position:relative;top:auto;padding-bottom:0}
  .kits-run{--a:.39;--w:.21;height:160svh;order:0}
  .jersey{height:min(60svh,520px)}
  .jersey__stack span{-webkit-text-stroke-width:2px}
}

.index{padding:var(--space-3xl) 0 var(--space-xl);border-top:1px solid var(--line)}
.index > .h2{max-width:14ch}
.kit{--c:var(--mag);border-top:1px solid var(--line);background:linear-gradient(var(--c),var(--c)) 0 100%/calc(var(--p)*100%) 3px no-repeat}
.kit:nth-of-type(4n+2){--c:var(--blu)}.kit:nth-of-type(4n+3){--c:var(--grn)}.kit:nth-of-type(4n+4){--c:var(--yel)}
.kit summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"no tag sign" "title title title";align-items:center;gap:var(--space-2xs) var(--space-md);padding:var(--space-lg) 0 var(--space-md);transition:color var(--dur-fast),transform var(--dur-fast) var(--ease-press)}
.kit summary::-webkit-details-marker{display:none}
.kit summary:hover .kit__title{color:var(--c)}
.kit summary:active{transform:translateY(1px)}
.kit summary:focus-visible{outline-offset:-3px}
.kit__no{grid-area:no;font:600 12px/1 var(--font-mono);letter-spacing:.16em;color:var(--c)}
.kit__tag{grid-area:tag;font:600 12px/1 var(--font-mono);letter-spacing:.12em;color:var(--text-3)}
.kit__title{grid-area:title;margin:0;font-family:var(--font-display);font-weight:850;font-stretch:62%;font-size:var(--text-lg);line-height:1;letter-spacing:-.01em;white-space:nowrap;transform:translate(calc((var(--p) - .5)*-3vw),0);transition:color var(--dur-fast)}
.kit__sign{grid-area:sign;position:relative;width:28px;height:28px;border:2px solid var(--text-3);border-radius:50%;transition:transform var(--dur-base) var(--ease-out),border-color var(--dur-fast)}
.kit__sign::before,.kit__sign::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:var(--text)}
.kit__sign::after{transform:rotate(90deg)}
.kit summary:hover .kit__sign{border-color:var(--c)}
.kit[open] .kit__sign{transform:rotate(45deg)}
.kit__body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:start;padding:var(--space-xs) 0 var(--space-xl)}
.kit__body p{margin:0 0 var(--space-sm);max-width:52ch;color:var(--text-2)}
.kit__price{font:600 12px/1.4 var(--font-mono);letter-spacing:.12em;color:var(--text-3)}
.kit__body .btns{margin-top:var(--space-md)}
.kit__box{margin:0;border:2px solid var(--line);border-top:var(--space-sm) solid var(--c);border-radius:var(--radius-md);overflow:clip;display:grid;place-items:center;padding:var(--space-md)}
.kit__box--light{background:var(--text)}
.kit__box--dark{background:var(--ground-3)}
.kit__box img{width:100%;max-width:280px;height:auto}
.kit[open] .kit__box{animation:box-in var(--dur-slow) var(--ease-out) both}
.kit[open] .kit__box img{animation:art-in var(--dur-slow) var(--ease-out) .12s both}
@keyframes box-in{from{border-top-color:transparent;opacity:0}to{opacity:1}}
@keyframes art-in{from{opacity:0;transform:translate(0,-28px)}to{opacity:1;transform:none}}
@media (min-width:768px){.kit__title{font-size:var(--text-2xl)}}
@media (max-width:767px){.kit__body{grid-template-columns:minmax(0,1fr)}}

.kits-patch .lede{max-width:44ch}
.kits-close{padding:var(--space-3xl) 0 var(--space-xl);border-top:1px solid var(--line);display:grid;gap:var(--space-md);justify-items:start}
.kits-close p{margin:0}

/* =====================================================================
   STORES: the explainer and the demo tiles
   ===================================================================== */
.stores-hero{padding:var(--space-3xl) 0 var(--space-xl);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(24px,4vw,72px);align-items:end}
.stores-hero .display{font-size:var(--text-display)}
.stores-hero .lede{margin:0 0 var(--space-xs)}
.stores-how{margin:0;padding:var(--space-xl) 0;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,4fr);gap:var(--space-lg) clamp(24px,4vw,72px);list-style:none}
.stores-how li{display:grid;gap:var(--space-2xs);align-content:start}
.stores-how li:nth-child(1){grid-column:1}
.stores-how li:nth-child(2){grid-column:2/4}
.stores-how li:nth-child(3){grid-column:1/3}
.stores-how li:nth-child(4){grid-column:3}
.stores-how b{font:850 var(--text-lg)/1.1 var(--font-display);font-stretch:100%}
.stores-how span{color:var(--text-2);max-width:46ch}
.demos{padding:var(--space-2xl) 0 var(--space-3xl);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,1.6vw,24px)}
.demos > .eyebrow{grid-column:1/-1;grid-row:1;margin:0}
.demo{--store-band:var(--mag);position:relative;display:grid;align-content:start;gap:var(--space-sm);background:var(--ground-2);border:2px solid var(--line);border-radius:var(--chamfer-c) var(--chamfer) var(--chamfer) var(--chamfer);overflow:clip;padding:0 0 var(--space-lg)}
.demo__band{height:var(--space-xl);background:var(--store-band);transform-origin:left center;transform:scaleX(calc(.2 + clamp(0,var(--p)*2.2,.8)))}
.demo__chip{margin:0 var(--space-lg)}
.demo__name{margin:0 var(--space-lg);font:850 var(--text-xl)/1 var(--font-display);font-stretch:100%;overflow-wrap:anywhere;min-width:0}
.demo p{margin:0 var(--space-lg);color:var(--text-2);max-width:44ch}
.demo__img{margin:0 var(--space-lg);border-radius:var(--radius-md);overflow:clip;background:var(--ground-3)}
.demo__img img{width:100%;height:100%;object-fit:cover}
.demo .btns{margin:0 var(--space-lg)}
.demo--lead{grid-column:1/8;grid-row:2/4}
.demo--lead .demo__img{aspect-ratio:4/3}
.demo--lead .demo__name{font-size:var(--text-2xl)}
.demo--house{grid-column:8/13;grid-row:2;margin-top:var(--space-xl)}
.demo--house .demo__img{aspect-ratio:16/9}
.demo--small{grid-column:8/13;grid-row:3}
.demo--small .demo__img{display:none}
.demo--small .demo__name{font-size:var(--text-lg)}
.stores-close{padding:var(--space-3xl) 0 var(--space-xl);border-top:1px solid var(--line);display:grid;gap:var(--space-md);justify-items:start}
.stores-close p{margin:0}
@media (max-width:900px){
  .stores-hero{grid-template-columns:minmax(0,1fr);align-items:start}
  .stores-how{grid-template-columns:minmax(0,1fr)}
  .stores-how li:nth-child(n){grid-column:1}
  .demos{grid-template-columns:minmax(0,1fr)}
  .demos > .eyebrow{grid-row:auto}
  .demo--lead,.demo--house,.demo--small{grid-column:1;grid-row:auto;margin-top:0}
}

/* =====================================================================
   STORE PAGES (generated by tools/build-stores.py)
   --store-band replaces the accent inside the store; the four strands stay in the frame only
   ===================================================================== */
.store{--store-band:var(--blu)}
.store-crumb{margin:0;padding:var(--space-md) 0 var(--space-sm);font:600 12px/1.4 var(--font-mono);letter-spacing:.1em}
.store-crumb a{color:var(--text-2);text-underline-offset:4px;text-decoration-color:var(--line)}
.store-crumb a:hover{color:var(--text);text-decoration-color:var(--text)}
.store-band{background:var(--store-band);color:var(--accent-ink);border-radius:var(--chamfer-c) var(--chamfer) var(--chamfer) var(--chamfer);padding:clamp(24px,4vw,64px);display:grid;gap:var(--space-md);justify-items:start;animation:tape var(--dur-slow) var(--ease-press) both}
.store-band .display{font-size:var(--text-3xl);line-height:.95;color:var(--accent-ink)}
.store-band .chip{background:var(--ground);border-color:var(--ground);color:var(--text)}
@keyframes tape{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.store-lede{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:var(--space-lg);align-items:end;padding:var(--space-md) 0}
.store-lede .lede{margin:0}
.store .btn--primary{background:var(--store-band);border-color:var(--store-band);color:var(--accent-ink)}
.store .btn--primary:hover{background:color-mix(in oklch,var(--store-band) 82%,var(--text));border-color:color-mix(in oklch,var(--store-band) 82%,var(--text))}
.store .btn:not(.btn--primary){border-color:var(--text)}

.items{padding:var(--space-xl) 0 var(--space-2xl);border-top:1px solid var(--line)}
.items > .h2{max-width:16ch}
.items__grid{display:grid;grid-template-columns:var(--tpl);gap:clamp(12px,1.6vw,24px);align-items:start}
.item{display:grid;gap:var(--space-xs);align-content:start;min-width:0}
.item:nth-child(even){transform:translate(0,calc((.5 - var(--p))*48px))}
.item__img{margin:0;border-radius:var(--radius-md);overflow:clip;background:var(--ground-2)}
.item__img img{width:100%;aspect-ratio:1;object-fit:cover}
.item:first-child .item__img img{aspect-ratio:4/5}
.item__meta{display:flex;justify-content:space-between;gap:var(--space-xs);font:600 12px/1.3 var(--font-mono);letter-spacing:.06em;color:var(--text-3)}
.item__name{margin:0;font:800 var(--text-md)/1.15 var(--font-display);font-stretch:100%;overflow-wrap:anywhere;min-width:0}
.item__form{display:grid;gap:var(--space-2xs)}
.item__form .field{margin:0}
.item__pers{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--space-xs)}
.item__form .btn{width:100%}
.item__form .btn:disabled{opacity:.55;cursor:not-allowed}
.item__form .help{margin:0}
.item__form .input::placeholder{color:var(--text-3)}
@media (max-width:900px){.items__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.item:nth-child(even){transform:none}}
@media (max-width:540px){.items__grid{grid-template-columns:minmax(0,1fr)}}

.roster{padding:var(--space-2xl) 0;border-top:1px solid var(--line)}
.roster table{width:100%;border-collapse:collapse;font:500 var(--text-sm)/1.4 var(--font-body)}
.roster th,.roster td{text-align:left;padding:var(--space-sm) var(--space-xs);border-bottom:1px solid var(--line)}
.roster thead th{font:600 12px/1.3 var(--font-mono);letter-spacing:.12em;color:var(--text-3)}
.roster tbody th{font-weight:650}
.roster tbody tr{opacity:calc(min(1,var(--p)*3 + var(--r)*-.1 + .3));transform:translate(0,calc(max(0,(.5 - var(--p)))*40px))}
.tag{display:inline-flex;align-items:center;height:32px;padding:0 var(--space-sm);border-radius:var(--radius-pill);border:2px solid var(--store-band);font:600 12px/1 var(--font-mono);letter-spacing:.08em;white-space:nowrap;color:var(--text);transition:background-color var(--dur-base),color var(--dur-base)}
.tag[data-has]{background:var(--store-band);color:var(--accent-ink)}
@media (max-width:640px){
  .roster thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .roster tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:var(--space-3xs) var(--space-xs);padding:var(--space-sm) 0;border-bottom:1px solid var(--line)}
  .roster th,.roster td{border:0;padding:0;min-width:0}
  .roster tbody th{grid-column:1/-1;font-size:var(--text-base)}
  .roster td::before{content:attr(data-label);display:block;font:600 10px/1.4 var(--font-mono);letter-spacing:.12em;color:var(--text-3)}
}

.reorder{margin:var(--space-xl) 0;border:2px solid var(--store-band);border-radius:var(--chamfer-c) var(--chamfer) var(--chamfer) var(--chamfer);padding:clamp(24px,3.4vw,48px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-md);align-items:center}
.reorder h2{margin:0 0 var(--space-2xs)}
.reorder p{margin:0;color:var(--text-2);max-width:46ch}
.store-share{margin:0 0 var(--space-xl)}
.store-run{margin:var(--space-lg) 0 0;font:500 12px/1.5 var(--font-mono);color:var(--text-3)}
@media (max-width:640px){.reorder{grid-template-columns:minmax(0,1fr)}.store-lede{grid-template-columns:minmax(0,1fr)}}

/* ---------- reduced motion, and no-script: the door is open, the numeral rests on 1, everything sits still ---------- */
@media (prefers-reduced-motion:reduce),(scripting:none){
  .slat{--q:1}
  .m-route{stroke-dashoffset:0}
  .door__stencil{opacity:0}
  .jersey__stack{--k:11}
}
@media (prefers-reduced-motion:reduce){
  .door-run,.kits-run{height:auto}
  .door,.jersey{position:relative;top:auto}
  .visit__copy,.kits-copy,.visit-ticket .h2{position:relative;top:auto}
  .jersey__stack{transition:none}
  .kit{background-size:100% 3px}
  .kit__title,.item:nth-child(even),.roster tbody tr,.demo__band{transform:none}
  .roster tbody tr{opacity:1}
  .kit[open] .kit__box,.kit[open] .kit__box img,.store-band{animation:none}
  .kit__sign{transition:none}
}