/* ==========================================================================
   OPEN DAILY IN NYC — design library v1
   RECOVERED 2026-09-08 from Figma FAFxjBWc8ncoIumKlywh0R page 38:2 ("Webstie").
   The original scratch working copy was destroyed; Figma held the tokens,
   the type ramp and every string, so this file is a faithful reconstruction,
   not a byte-identical restore. Token values below are read back from the
   Figma variable collection "Open Daily · tokens".

   Reference: dontboardme.com (type scale, flat colour blocks, pill buttons,
   oversized condensed uppercase display, small uppercase UI labels).
   Fonts: Bayon (display — the exact face dontboardme uses, free on Google
   Fonts) + Space Grotesk (UI/body — closest free stand-in for Neue Montreal).
   ========================================================================== */

/* ---------- 1. TOKENS ---------- */
:root{
  /* surfaces */
  /* 2026-10-04 brand v0.4: the flat parts take the tile colours (glaze cream,
     station navy); the rendered tiles in assets/brand/ carry the New York look. */
  --paper:      #F5ECDD;
  --paper-2:    #F9F2E6;
  --ink:        #0A213F;   /* station navy: lines, headlines, footer */
  --ink-soft:   #3E4B5E;
  --ink-faint:  #7D8797;

  /* accents — NYC storefront palette */
  --red:        #E0361F;
  --red-dark:   #B32916;
  --yellow:     #F7C61A;
  --green:      #1E6B49;
  --blue:       #255C86;
  --brick:      #B4543A;
  --navy:       #0A213F;   /* from the logo plaque */
  --terra:      #A3502B;   /* tile terracotta */
  --faience:    #2F6B57;   /* tile faience green */

  /* pastel block fills (section backgrounds) */
  --fill-cream: #F5ECDD;
  --fill-blue:  #D6E2D8;   /* faience tint */
  --fill-green: #D6E2D8;   /* faience tint */
  --fill-peach: #EFE3CF;   /* glaze cream */
  --fill-butter:#F0E2C2;
  --fill-night: #0A213F;

  /* provenance chips */
  --tag-game:   #2E7D51;
  --tag-proto:  #C08A17;
  --tag-city:   #2E6D9E;

  /* type */
  --display: "Bayon", "Haettenschweiler", "Arial Narrow", Impact, sans-serif;
  --ui: "Space Grotesk", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "Space Mono", "SF Mono", ui-monospace, Menlo, monospace;

  --fs-h0: clamp(3.25rem, 13.2vw, 12.5rem);
  --fs-h1: clamp(2.75rem, 9.4vw, 8.5rem);
  --fs-h2: clamp(2.25rem, 6.6vw, 6rem);
  --fs-h3: clamp(1.75rem, 3.8vw, 3.5rem);
  --fs-h4: clamp(1.375rem, 2.3vw, 2rem);
  --fs-lead: clamp(1.0625rem, 1.5vw, 1.4375rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-label: 0.8125rem;

  --lh-display: .80;       /* dbm uses 78–80% — the signature move */
  --lh-display-s: .88;
  --ls-display: -.02em;
  --ls-label: .08em;

  /* space */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem; --s7:3rem; --s8:4rem; --s9:6rem; --s10:8rem;

  --gutter: 2rem;
  --maxw: 85rem;
  --radius-pill: 9.375rem;
  --ease: cubic-bezier(.24,1,.36,1);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--ui);font-size:var(--fs-body);line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4,p,figure,ul{margin:0}
ul{padding:0;list-style:none}
::selection{background:var(--red);color:var(--paper)}

/* ---------- 3. LAYOUT ---------- */
.od-wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.od-block{padding-block:var(--s9)}
.od-block--tight{padding-block:var(--s7)}
.od-block--cream{background:var(--fill-cream)}
.od-block--blue{background:var(--fill-blue)}
.od-block--green{background:var(--fill-green)}
.od-block--peach{background:var(--fill-peach)}
.od-block--butter{background:var(--fill-butter)}
.od-block--night{background:var(--fill-night);color:var(--paper)}
.od-block--red{background:var(--red);color:var(--paper)}
.od-block--terra{background:var(--terra);color:var(--paper)}
.od-grid{display:grid;gap:var(--s6)}
.od-grid--2{grid-template-columns:repeat(2,1fr)}
.od-grid--3{grid-template-columns:repeat(3,1fr)}
.od-grid--split{grid-template-columns:1.25fr 1fr;align-items:center;gap:var(--s8)}
.od-rule{height:2px;background:currentColor;opacity:.16;border:0;margin:0}

/* ---------- 4. TYPE ---------- */
.od-h0,.od-h1,.od-h2,.od-h3,.od-h4{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  letter-spacing:var(--ls-display);line-height:var(--lh-display);
}
.od-h0{font-size:var(--fs-h0)}
.od-h1{font-size:var(--fs-h1)}
.od-h2{font-size:var(--fs-h2)}
.od-h3{font-size:var(--fs-h3);line-height:var(--lh-display-s)}
.od-h4{font-size:var(--fs-h4);line-height:var(--lh-display-s)}
.od-red{color:var(--red)} .od-blue{color:var(--blue)}
.od-green{color:var(--green)} .od-ink{color:var(--ink)}
.od-paper{color:var(--paper)} .od-yellow{color:var(--yellow)}

.od-label{font-family:var(--ui);font-weight:500;font-size:var(--fs-label);
  text-transform:uppercase;letter-spacing:var(--ls-label);line-height:1}
.od-lead{font-size:var(--fs-lead);line-height:1.45;max-width:36ch}
.od-body{font-size:var(--fs-body);line-height:1.6;max-width:60ch;color:var(--ink-soft)}
.od-block--night .od-body,.od-block--red .od-body,.od-block--terra .od-body{color:rgba(243,243,233,.86)}
.od-meta{font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-faint)}
.od-measure{max-width:52ch}

/* ---------- 5. BUTTON (pill + dot animation, from dbm) ---------- */
.od-btn{
  --btn-bg:var(--red); --btn-fg:var(--paper); --btn-active:var(--red-dark);
  display:inline-flex;align-items:center;gap:.375rem;
  background:var(--btn-bg);color:var(--btn-fg);
  border:0;border-radius:var(--radius-pill);cursor:pointer;
  padding:.9375rem 1.625rem .875rem;text-decoration:none;
  font-family:var(--ui);font-weight:500;font-size:.875rem;
  text-transform:uppercase;letter-spacing:.04em;line-height:1;
  transition:background .2s ease-in, transform .2s var(--ease);
}
.od-btn__dot{width:0;height:.5rem;border-radius:50%;background:currentColor;
  transition:width .22s ease-in;flex:0 0 auto}
.od-btn__dot--r{width:.5rem}
.od-btn:hover{transform:scale(.97)}
.od-btn:hover .od-btn__dot{width:.5rem}
.od-btn:hover .od-btn__dot--r{width:0}
.od-btn:active{background:var(--btn-active)}
.od-btn--ink{--btn-bg:var(--ink);--btn-active:#000}
.od-btn--blue{--btn-bg:var(--blue);--btn-active:#17415f}
.od-btn--ghost{--btn-bg:transparent;--btn-fg:currentColor;
  box-shadow:inset 0 0 0 1.5px currentColor}
.od-btn--ghost:active{background:rgba(0,0,0,.06)}
.od-link{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  font-weight:500;font-size:.9375rem;border-bottom:1.5px solid currentColor;
  padding-bottom:2px;line-height:1.2}
.od-link:hover{opacity:.7}

/* ---------- 6. PROVENANCE TAG ---------- */
.od-tag{display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--mono);font-size:.625rem;letter-spacing:.09em;
  text-transform:uppercase;line-height:1;
  padding:.4375rem .625rem;border-radius:2px;
  background:rgba(23,18,15,.06);color:var(--ink-soft)}
.od-tag i{width:.5rem;height:.5rem;border-radius:50%;flex:0 0 auto}
.od-tag--game i{background:var(--tag-game)}
.od-tag--proto i{background:var(--tag-proto)}
.od-tag--city i{background:var(--tag-city)}
.od-tag--on-image{position:absolute;left:.75rem;bottom:.75rem;
  background:rgba(12,10,9,.72);color:#EDE7DC;backdrop-filter:blur(4px)}

/* ---------- 7. FIGURE ---------- */
.od-figure{position:relative;margin:0}
.od-figure img{width:100%;height:auto}
.od-figure--frame img{border:2px solid var(--ink)}
.od-figure--crop img{aspect-ratio:16/9;object-fit:cover;object-position:center 45%}
.od-figcaption{margin-top:.625rem;display:flex;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;align-items:center}

/* ---------- 8. HEADER ---------- */
.od-header{position:sticky;top:0;z-index:500;background:var(--paper);
  border-bottom:2px solid var(--ink)}
.od-header__inner{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s5);height:6rem}
.od-logo{display:block;text-decoration:none;flex:0 0 auto}
.od-logo img{height:3.75rem;width:auto}
.od-nav{display:flex;gap:var(--s5)}
.od-nav a{font-family:var(--ui);font-weight:500;font-size:.8125rem;
  text-transform:uppercase;letter-spacing:.08em;text-decoration:none;color:var(--ink-soft)}
.od-nav a:hover{color:var(--red)}
.od-nav a[aria-current]{color:var(--red)}

/* ---------- 9. MARQUEE ---------- */
.od-marquee{overflow:hidden;border-block:2px solid currentColor;
  padding-block:.75rem;white-space:nowrap}
.od-marquee__track{display:inline-flex;gap:2.5rem;animation:od-scroll 34s linear infinite}
.od-marquee span{font-family:var(--display);text-transform:uppercase;
  font-size:clamp(1.5rem,3.4vw,3rem);line-height:1;letter-spacing:var(--ls-display)}
@keyframes od-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.od-marquee__track{animation:none}}

/* ---------- 10. NUMBERED STEPS ---------- */
.od-steps{display:grid;gap:0}
.od-step{display:grid;grid-template-columns:9rem 1fr;gap:var(--s6);
  padding-block:var(--s6);border-top:2px solid rgba(23,18,15,.14);align-items:start}
.od-step:last-child{border-bottom:2px solid rgba(23,18,15,.14)}
.od-step__n{font-family:var(--display);font-size:clamp(3.5rem,7vw,6rem);
  line-height:.8;color:var(--red)}
.od-step__body h3{margin-bottom:.5rem}

/* ---------- 11. LIST (yes / no) ---------- */
.od-list li{display:grid;grid-template-columns:1.5rem 1fr;gap:.75rem;
  padding-block:.6875rem;border-top:1.5px solid rgba(23,18,15,.13);
  font-size:1rem;line-height:1.45}
.od-list li:first-child{border-top:0}
.od-list li::before{font-family:var(--display);font-size:1.375rem;line-height:1.1}
.od-list--yes li::before{content:"+";color:var(--green)}
.od-list--no li::before{content:"–";color:var(--ink-faint)}

/* ---------- 12. PANEL / CARD ---------- */
.od-panel{background:var(--paper-2);border:2px solid var(--ink);padding:var(--s6)}
.od-panel--muted{border-color:rgba(23,18,15,.28);background:transparent}
.od-panel--dashed{border:2px dashed rgba(23,18,15,.3);background:transparent}
.od-panel__head{display:flex;justify-content:space-between;align-items:baseline;
  gap:1rem;margin-bottom:var(--s5)}

/* ---------- 13. FORM ---------- */
.od-field{display:grid;gap:.375rem;margin-bottom:var(--s4)}
.od-field label{font-family:var(--ui);font-weight:500;font-size:var(--fs-label);
  text-transform:uppercase;letter-spacing:var(--ls-label);color:var(--ink-soft)}
.od-field input,.od-field textarea{font:inherit;font-size:1rem;padding:.75rem .875rem;
  border:2px solid var(--ink);border-radius:0;background:var(--paper-2);color:var(--ink)}
.od-field input:focus,.od-field textarea:focus{outline:3px solid var(--yellow);outline-offset:1px}
.od-check{display:flex;gap:.625rem;align-items:flex-start;font-size:.9375rem;
  color:var(--ink-soft);margin-bottom:var(--s4)}

/* ---------- 15. FOOTER ---------- */
.od-footer{background:var(--ink);color:var(--paper);padding-block:var(--s7)}
.od-footer a{text-decoration:none;border-bottom:1.5px solid rgba(243,243,233,.4)}
.od-footer__row{display:flex;justify-content:space-between;gap:var(--s5);
  flex-wrap:wrap;align-items:flex-end}

/* ---------- 16. UTILITIES ---------- */
.od-stack>*+*{margin-top:var(--s4)}
.od-center{text-align:center}
.od-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- 17. RESPONSIVE ---------- */
@media (max-width:900px){
  :root{--gutter:1.25rem}
  .od-block{padding-block:var(--s7)}
  .od-grid--2,.od-grid--3,.od-grid--split{grid-template-columns:1fr;gap:var(--s5)}
  .od-header__inner{height:4rem;gap:.75rem}
  .od-logo img{height:2.5rem}
  .od-nav{gap:.9375rem;flex:0 0 auto}
  .od-nav a{font-size:.625rem;letter-spacing:.05em;white-space:nowrap}
  .od-nav a[data-optional]{display:none}
  .od-header .od-btn{display:none}
  .od-step{grid-template-columns:1fr;gap:.5rem;padding-block:var(--s5)}
  .od-step__n{font-size:3.25rem}
  .od-footer__row{flex-direction:column;align-items:flex-start;gap:1rem}
}

/* ---------- 18. STOREFRONT CARD (showcase grid · 2026-09-13) ----------
   Square art, zoomed in around the storefront so the card stays focused and
   the seams of the surrounding block stay out of frame. Per card, set:
     --fx / --fy : the storefront's position in the source image (0–100%)
     --zoom      : how far to punch in (1 = the whole square)
   The crop removes the preview's printed disclaimer, so every card must carry
   its own provenance tag instead. */
.od-shopgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5)}
.od-shopcard{display:flex;flex-direction:column;background:var(--paper-2);
  border:2px solid var(--ink);min-width:0}
.od-shopcard__art{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;
  background:#1d1a17;border-bottom:2px solid var(--ink);cursor:pointer}
/* centre the storefront (--fx/--fy) in the card, then punch in by --zoom */
.od-shopcard__art img,.od-shopcard__art video{--z:var(--zoom,1.5);position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;transform-origin:50% 50%;
  transform:translate(calc((50% - var(--fx,50%)) * var(--z)),calc((50% - var(--fy,50%)) * var(--z))) scale(var(--z));
  transition:transform .5s var(--ease)}
.od-shopcard__art:hover img,.od-shopcard__art:hover video{--z:calc(var(--zoom,1.5) + .08)}
.od-shopcard__art video{opacity:0;transition:opacity .25s ease, transform .5s var(--ease)}
.od-shopcard__art.is-playing video{opacity:1}
.od-shopcard__body{display:flex;flex-direction:column;gap:.75rem;padding:1rem 1rem 1.125rem;flex:1}
.od-shopcard__id{display:flex;gap:.75rem;align-items:center;min-width:0;min-height:3.5rem}
.od-shopcard__logo{flex:0 0 auto;width:2.5rem;height:2.5rem;display:grid;place-items:center;
  border:1.5px dashed rgba(23,18,15,.35);color:var(--ink-faint);
  font-family:var(--display);font-size:1.0625rem;line-height:1;letter-spacing:.02em}
.od-shopcard__id h3{font-size:1.375rem;line-height:.92;margin:0 0 .25rem}
.od-shopcard__hook{font-size:.9375rem;line-height:1.45;color:var(--ink);margin:0}
.od-shopcard__story{font-size:.875rem;line-height:1.5;color:var(--ink-soft)}
.od-shopcard__story summary{cursor:pointer;font-family:var(--ui);font-weight:500;font-size:.75rem;
  text-transform:uppercase;letter-spacing:var(--ls-label);color:var(--red);list-style:none}
.od-shopcard__story summary::-webkit-details-marker{display:none}
.od-shopcard__story summary::after{content:" +"}
.od-shopcard__story[open] summary::after{content:" –"}
.od-shopcard__story p{margin:.5rem 0 0}
.od-shopcard__src{font-family:var(--mono);font-size:.625rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-faint)}
.od-shopcard__contact{margin-top:auto;padding-top:.75rem;border-top:1.5px solid rgba(23,18,15,.13);
  font-size:.8125rem;line-height:1.5;color:var(--ink-soft)}
.od-shopcard__links{display:flex;flex-wrap:wrap;gap:.25rem .875rem;margin-top:.25rem}
.od-shopcard__links a{font-weight:500;color:var(--ink);text-decoration:none;
  border-bottom:1.5px solid currentColor}
.od-shopcard__links a:hover{color:var(--red)}
.od-shopcard--open{border-style:dashed;border-color:rgba(23,18,15,.35);background:transparent}
.od-shopcard--open .od-shopcard__art{background:repeating-linear-gradient(135deg,
  rgba(23,18,15,.05) 0 10px, transparent 10px 20px);border-bottom:1.5px dashed rgba(23,18,15,.3);
  display:grid;place-items:center;cursor:default}
.od-draftbar{background:var(--yellow);color:var(--ink);border-bottom:2px solid var(--ink);
  padding:.625rem 0;font-family:var(--ui);font-weight:500;font-size:.8125rem;line-height:1.35}
@media (max-width:1099px){.od-shopgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:699px){.od-shopgrid{grid-template-columns:1fr}}

/* clickable "your shop could be next" card: the whole card is the link */
a.od-shopcard--cta{color:inherit;text-decoration:none;cursor:pointer;
  transition:border-color .2s ease, background-color .2s ease, transform .2s var(--ease)}
a.od-shopcard--cta .od-shopcard__art{cursor:pointer}
.od-shopcard__go{font-weight:500;font-size:.875rem;color:var(--ink);border-bottom:1.5px solid currentColor;
  display:inline-flex;gap:.375rem;transition:gap .2s var(--ease), color .2s ease}
a.od-shopcard--cta:hover,a.od-shopcard--cta:focus-visible{border-style:solid;border-color:var(--red);
  background:var(--paper-2);transform:translateY(-3px)}
a.od-shopcard--cta:hover .od-shopcard__go,a.od-shopcard--cta:focus-visible .od-shopcard__go{color:var(--red);gap:.75rem}
a.od-shopcard--cta:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}

/* ---------- 19. TILE KIT (brand v0.4 · 2026-10-04) ----------
   Rendered tile pieces from assets/brand/. Tiles are decoration only: nothing you
   press is tiled. Pressables are enamel or brass plates (.od-plate), raised, and they
   move when pressed. Words always stay live text on top of the rendered frames. */
.od-wall{background:#E8D8BF url(assets/brand/wall.webp) 0 0/222px auto repeat}
.od-band{height:30px;background:url(assets/brand/band.webp) 0 50%/auto 30px repeat-x;border-block:2px solid var(--ink)}
.od-frieze{height:84px;background:var(--ink) url(assets/brand/boldfrieze.webp) 0 50%/auto 84px repeat-x}
.od-tablet{display:inline-block;border:22px solid transparent;
  border-image:url(assets/brand/tablet.webp) 95 fill / 22px / 0 round;
  padding:.125rem .375rem 0;font-family:var(--display);font-size:1.375rem;letter-spacing:.07em;
  line-height:1.15;color:var(--navy);text-transform:uppercase}
.od-chip{display:inline-block;background:rgba(245,236,221,.94);padding:.5rem .875rem}
.od-plate{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;height:3.25rem;padding:0 .875rem;
  border-style:solid;border-color:transparent;border-width:0 26px;border-image:url(assets/brand/btn-red.webp) 0 60 fill / 0 26px / 0 stretch;
  background:none;color:#F8EFDF;font-family:var(--ui);font-weight:700;font-size:.875rem;letter-spacing:.09em;
  text-transform:uppercase;text-decoration:none;white-space:nowrap;line-height:1;text-shadow:0 1px 0 rgba(0,0,0,.25);cursor:pointer;
  filter:drop-shadow(0 3px 0 rgba(10,33,63,.45)) drop-shadow(0 6px 6px rgba(20,12,4,.22));
  transition:transform .12s var(--ease),filter .12s var(--ease)}
.od-plate:hover,.od-plate:focus-visible{transform:translateY(-2px);filter:brightness(1.07) drop-shadow(0 5px 0 rgba(10,33,63,.45)) drop-shadow(0 10px 10px rgba(20,12,4,.22))}
.od-plate:active{transform:translateY(3px);filter:brightness(.84) drop-shadow(0 0 0 rgba(10,33,63,.45)) drop-shadow(0 1px 1px rgba(20,12,4,.3))}
.od-plate:focus-visible{outline:3px solid var(--yellow);outline-offset:4px}
.od-plate:disabled{opacity:.6;cursor:default;transform:none}
.od-plate--navy{border-image-source:url(assets/brand/btn-navy.webp)}
.od-plate--brass{border-width:0 15px;border-image:url(assets/brand/btn-brass.webp) 0 34 fill / 0 15px / 0 stretch;
  padding:0 1.25rem;color:#3B2A0E;text-shadow:0 1px 0 rgba(255,236,190,.7)}
.od-plate--sm{height:2.625rem;border-width:0 21px;border-image-width:0 21px;font-size:.75rem}
.od-door{display:block;width:100%;height:auto}
.od-label.od-red{color:var(--terra)}
@media (max-width:900px){.od-header .od-plate{display:none}.od-frieze{height:64px;background-size:auto 64px}}

/* Hero slideshow: square, full-bleed images behind the logo card. */
.hb__slides,.hb__slide{position:absolute;inset:0}
.hb__slide{opacity:0;transition:opacity 1.2s ease}
.hb__slide.is-on{opacity:1}
.hb__slide img{width:100%;height:100%;object-fit:cover;object-position:55% 50%}
.hb__slide.is-drifting img{animation:hb-drift 9s linear forwards}
.hb__slide.is-drifting:nth-child(even) img{animation-name:hb-drift-reverse}
@keyframes hb-drift{from{transform:scale(1)}to{transform:scale(1.06) translateX(-1.5%)}}
@keyframes hb-drift-reverse{from{transform:scale(1)}to{transform:scale(1.06) translateX(1.5%)}}
@media (prefers-reduced-motion:reduce){
  .hb__slide{transition:none}
  .hb__slide.is-on{opacity:0}
  .hb__slide:first-child{opacity:1}
  .hb__slide.is-drifting:nth-child(n) img{animation:none;transform:none}
}