/* ============================================================
   Studio 76 — Atelier shell layer  ·  "Back of house, lamplit"
   Shared skin for the six tool pages (bz/ti/sy/im prefixes) +
   the house footer & night-vitrine showcase bands.
   Design law: cream drafting paper under one warm bench lamp,
   espresso night beyond. One bold device per page (the vitrine).
   Gold is rationed: CTA, rims, crop-marks. Grain is static.
   ============================================================ */

:root {
  --s76-mono: "SF Mono", ui-monospace, "Cascadia Mono", Menlo, monospace;
  --s76-hairline: rgba(27,19,13,.14);
  --s76-ease: cubic-bezier(.2,.7,.2,1);
}

/* free same-origin page morphs between benches */
@view-transition { navigation: auto; }

/* ---- atmosphere: bench-lamp wash + film grain ------------- */
body { position: relative; }
body::before {
  content:""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(90rem 46rem at 12% -12%, rgba(232,201,122,.14), transparent 62%),
    radial-gradient(70rem 40rem at 108% 118%, rgba(27,19,13,.06), transparent 60%);
}
body::after {
  content:""; position: fixed; inset: -40px; pointer-events: none; z-index: 90;
  background: url('assets/grain.png'); opacity: .05; mix-blend-mode: multiply;
}
#root { position: relative; z-index: 1; }

/* ---- masthead: hairline + mono micro-links ---------------- */
.bz-head, .ti-head, .sy-head, .im-head {
  border-bottom: 1px solid var(--s76-hairline);
  margin-bottom: clamp(26px,4vw,44px);
  padding-bottom: 18px;
}
.bz-headlinks a, .ti-headlinks a, .sy-head a:not([class*="logo"]), .im-head a:not([class*="logo"]) {
  font-family: var(--s76-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  border-bottom: none; padding-bottom: 0;
  color: var(--ink-soft); transition: color .25s;
}
.bz-headlinks a:hover, .ti-headlinks a:hover, .sy-head a:hover, .im-head a:hover { color: var(--accent); }

/* ---- the drafting sheet (dropzones) ----------------------- */
.bz-drop, .ti-drop, .sy-drop {
  border: 1px solid var(--s76-hairline);
  border-radius: 4px;              /* a sheet, not a pill */
  background:
    /* gold crop-mark corners */
    linear-gradient(var(--gold), var(--gold)) 14px 14px / 18px 1.5px,
    linear-gradient(var(--gold), var(--gold)) 14px 14px / 1.5px 18px,
    linear-gradient(var(--gold), var(--gold)) calc(100% - 14px) 14px / 18px 1.5px,
    linear-gradient(var(--gold), var(--gold)) calc(100% - 14px) 14px / 1.5px 18px,
    linear-gradient(var(--gold), var(--gold)) 14px calc(100% - 14px) / 18px 1.5px,
    linear-gradient(var(--gold), var(--gold)) 14px calc(100% - 14px) / 1.5px 18px,
    linear-gradient(var(--gold), var(--gold)) calc(100% - 14px) calc(100% - 14px) / 18px 1.5px,
    linear-gradient(var(--gold), var(--gold)) calc(100% - 14px) calc(100% - 14px) / 1.5px 18px,
    /* barely-there drafting grid */
    repeating-linear-gradient(0deg, rgba(27,19,13,.028) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(27,19,13,.028) 0 1px, transparent 1px 28px),
    var(--paper-card);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat;
  transition: box-shadow .25s ease-out, background-color .25s, transform .25s ease-out;
}
.bz-drop:hover, .bz-drop.over, .ti-drop:hover, .ti-drop.over, .sy-drop:hover, .sy-drop.over {
  border-color: var(--s76-hairline);
  background-color: #FDFBF5;
  transform: none;
  box-shadow: 0 22px 60px -30px rgba(201,154,63,.55), 0 4px 18px -8px rgba(27,19,13,.12);
}
.bz-drop-s, .ti-drop-s, .sy-drop-s {
  font-family: var(--s76-mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--on-paper-soft);
}

/* entry tabs: quiet sheets, gold spine on the active one */
.bz-entry-tab { border-radius: 4px; border: 1px solid var(--s76-hairline); }
.bz-entry-tab.on { border-color: rgba(27,19,13,.35); box-shadow: inset 3px 0 0 var(--gold); }

/* retire the ambient sheen; the clipper promo becomes a quiet ruled note */
.bz-clip-hero { background: var(--paper-card); border: 1px solid var(--s76-hairline); box-shadow: none; border-radius: 4px; }
.bz-clip-hero::before { animation: none; content: none; }
.bz-clip-hero:hover { transform: none; border-color: rgba(201,154,63,.5); box-shadow: 0 18px 44px -30px rgba(201,154,63,.45); }

/* tiles read as vitrine prints */
.bz-tile-frame, .ti-card img, .sy-grid img { border-radius: 4px; }

/* ---- entrance: one orchestrated moment, reading order ----- */
@media (prefers-reduced-motion: no-preference) {
  .bz-hero, .ti-hero, .sy-hero, .im-hero,
  .bz-entry, .bz-drop, .ti-drop, .sy-drop, .im-stage,
  .bz-paste, .bz-clip-hero {
    animation: s76in .6s var(--s76-ease) backwards;
  }
  .bz-entry, .ti-drop, .sy-drop, .im-stage { animation-delay: .1s; }
  .bz-drop, .bz-paste { animation-delay: .18s; }
  .bz-clip-hero { animation-delay: .28s; }
  @keyframes s76in { from { opacity: 0; transform: translateY(16px); } }
}

/* ============================================================
   The night vitrine — full-bleed espresso showcase band
   ============================================================ */
.s76-band {
  position: relative; z-index: 1;
  background: radial-gradient(120% 130% at 20% -20%, #2A1D13, #15100b 70%);
  color: var(--on-ink); padding: clamp(52px,7vw,96px) var(--gutter);
  overflow: hidden;
}
.s76-band::after { content:""; position:absolute; inset:0; pointer-events:none; background:url('assets/grain.png'); opacity:.07; }
.s76-band-in { max-width: 1180px; margin: 0 auto; position: relative; z-index: 1; }
.s76-band-k {
  font-family: var(--s76-mono); font-size: 11px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--gold-light); margin: 0 0 14px;
}
.s76-band-h {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(26px,3.4vw,42px); line-height: 1.06; letter-spacing: -.015em;
  margin: 0 0 8px; color: var(--on-ink); max-width: 22ch;
}
.s76-band-h i { font-style: italic; color: var(--gold-light); }
.s76-band-p { color: var(--on-ink-soft); font-size: 15px; line-height: 1.6; margin: 0 0 34px; max-width: 58ch; }

.s76-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px,1fr); gap: clamp(14px,1.8vw,24px); overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 6px; scrollbar-width: none; }
.s76-strip::-webkit-scrollbar { display: none; }
.s76-print { scroll-snap-align: start; min-width: 0; }
.s76-print figure { margin: 0; position: relative; border: 1px solid rgba(232,201,122,.2); background: #0b0805; border-radius: 4px; overflow: hidden; box-shadow: 0 30px 60px -38px rgba(0,0,0,.9); }
.s76-print figure::after { content:""; position:absolute; inset:0; box-shadow: inset 0 0 0 1px rgba(232,201,122,.08), inset 0 -60px 80px -50px rgba(0,0,0,.55); pointer-events:none; }
.s76-print img { display:block; width: 100%; aspect-ratio: 4/5; object-fit: cover; filter: brightness(.94); transition: filter .4s cubic-bezier(.22,1,.36,1), transform .4s cubic-bezier(.22,1,.36,1); }
.s76-print:hover img { filter: brightness(1.02); transform: scale(1.02); }
.s76-print figcaption {
  font-family: var(--s76-mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--on-ink-soft); margin-top: 10px;
  display: flex; justify-content: space-between; gap: 10px;
}
.s76-print figcaption b { color: var(--gold-light); font-weight: 500; }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .s76-print { animation: s76rise both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    .s76-print:nth-child(2) { animation-range: entry 6% entry 61%; }
    .s76-print:nth-child(3) { animation-range: entry 12% entry 67%; }
    .s76-print:nth-child(4) { animation-range: entry 18% entry 73%; }
    @keyframes s76rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  }
}

/* duo variant: one vitrine image beside copy */
.s76-band-duo { display: grid; grid-template-columns: minmax(280px,5fr) 7fr; gap: clamp(28px,5vw,72px); align-items: center; }
.s76-band-duo .s76-print figure { box-shadow: 0 44px 90px -50px rgba(0,0,0,.9); }
.s76-band-duo .s76-print img { aspect-ratio: 3/4; }
.s76-band-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.s76-band-chips a {
  font-family: var(--s76-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-light); text-decoration: none; padding: 10px 16px;
  border: 1px solid rgba(232,201,122,.3); border-radius: 999px; transition: .25s;
}
.s76-band-chips a:hover { background: rgba(232,201,122,.12); border-color: var(--gold-light); }
@media (max-width: 760px) { .s76-band-duo { grid-template-columns: 1fr; } }

/* ============================================================
   The house footer — every page ends at the maison, not in cream
   ============================================================ */
.s76-foot {
  position: relative; z-index: 1; background: #15100b; color: var(--on-ink);
  padding: clamp(56px,7vw,92px) var(--gutter) 40px; overflow: hidden;
}
.s76-foot::before { content:""; position:absolute; inset:0; background:url('assets/grain.png'); opacity:.07; pointer-events:none; }
.s76-foot::after {
  content:"STUDIO 76"; position:absolute; left:50%; bottom:-.14em; transform:translateX(-50%);
  font-family: var(--font-serif); font-weight: 500; font-size: clamp(90px,17vw,230px);
  letter-spacing: .04em; white-space: nowrap; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(232,201,122,.12); pointer-events: none;
}
.s76-foot-in { max-width: 1180px; margin: 0 auto; position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; gap: clamp(32px,5vw,72px); justify-content: space-between; }
.s76-foot-brand { max-width: 300px; }
.s76-foot-logo { font-family: var(--font-serif); font-size: 24px; letter-spacing: .12em; text-transform: uppercase; color: var(--on-ink); text-decoration: none; }
.s76-foot-logo span { color: var(--gold-light); font-style: italic; font-weight: 700; }
.s76-foot-tag { color: var(--on-ink-soft); font-size: 14px; line-height: 1.6; margin: 12px 0 0; font-family: var(--font-serif); font-style: italic; }
.s76-foot-cols { display: flex; gap: clamp(36px,5vw,72px); flex-wrap: wrap; }
.s76-foot-col h4 {
  font-family: var(--s76-mono); font-size: 10.5px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--gold-light); margin: 0 0 14px; font-weight: 500;
}
.s76-foot-col a { display: block; color: var(--on-ink-soft); text-decoration: none; font-size: 14.5px; line-height: 2; transition: color .25s; }
.s76-foot-col a:hover { color: var(--on-ink); }
.s76-foot-line {
  max-width: 1180px; margin: clamp(40px,6vw,64px) auto 0; position: relative; z-index: 1;
  border-top: 1px solid rgba(232,201,122,.14); padding-top: 18px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-family: var(--s76-mono); font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--on-ink-soft);
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .s76-foot::after { animation: s76ghost both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
    @keyframes s76ghost { from { opacity: 0; } to { opacity: 1; } }
  }
}

@media (max-width: 640px) {
  .s76-strip { grid-auto-columns: 72%; }
  .s76-foot-in { flex-direction: column; }
}