/* ==========================================================================
   Our Story page (Visit.dc.html) — loads after site.css and motion.css.
   Hidden "before" states are scoped to html.has-gsap or set by story.js,
   so the page reads in full without JavaScript.
   ========================================================================== */

body[data-page='visit'] .site-header { color: var(--ink); }
body[data-page='visit'].menu-open .site-header { color: var(--paper); }

/* ---------- Hero ---------- */
.story-hero {
  position: relative;
  min-height: calc(100svh - var(--demo-h));
  display: flex;
  align-items: flex-end;
  padding: calc(var(--header-h) + 30px) 0 clamp(30px, 4vw, 52px);
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
  isolation: isolate;
}
.story-hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  right: -14vw;
  bottom: -38vw;
  width: 70vw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(204, 136, 0, .2), transparent 66%);
}
.story-collage { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.collage-item { position: absolute; margin: 0; will-change: transform; }
.collage-inner {
  overflow: hidden;
  background: var(--paper-deep);
  translate: calc(var(--mx, 0) * var(--d) * -26px) calc(var(--my, 0) * var(--d) * -20px);
  transition: translate .9s var(--ease-out);
  animation: collage-in 1.3s var(--ease-io) both;
  animation-delay: calc(.3s + var(--d) * .28s);
}
.collage-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: collage-img 1.9s var(--ease-out) both;
  animation-delay: calc(.3s + var(--d) * .28s);
}
@keyframes collage-in { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
@keyframes collage-img { from { transform: scale(1.35); } to { transform: scale(1); } }
html.is-loading:not(.is-loaded) .collage-inner,
html.is-loading:not(.is-loaded) .collage-inner img { animation-play-state: paused; }
.collage-item figcaption { margin-top: 9px; font: 500 9px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.c1 { left: 4%; top: 15%; width: 16vw; }
.c1 .collage-inner { aspect-ratio: 4 / 3; }
.c2 { left: 27%; top: 27%; width: 11vw; }
.c2 .collage-inner { aspect-ratio: 3 / 2; }
.c3 { left: 46%; top: 11%; width: 19vw; }
.c3 .collage-inner { aspect-ratio: 4 / 3; }
.c4 { right: 4.5%; top: 13%; width: 13vw; }
.c4 .collage-inner { aspect-ratio: 3 / 4; }
.c5 { right: 21%; top: 46%; width: 9.5vw; }
.c5 .collage-inner { aspect-ratio: 1; border-radius: 50%; }

.story-hero-inner { position: relative; z-index: 2; }
.story-hero .eyebrow { color: var(--accent); margin-bottom: clamp(18px, 2vw, 28px); }
.story-hero-title { font-size: clamp(70px, 11.4vw, 200px); line-height: .86; letter-spacing: -.06em; text-wrap: initial; }
.story-hero-title .line { display: block; overflow: hidden; padding: .04em .06em .3em 0; margin-bottom: -.32em; }
.story-hero-title .line-indent { padding-left: 1.15em; }
.story-hero-title em { color: var(--accent); }
.story-hero [data-intro] { display: inline-block; opacity: 0; transform: translateY(110%); animation: intro-up .9s var(--ease) forwards; animation-delay: var(--intro-delay, .1s); }
.story-hero [data-intro].is-split { opacity: 1; transform: none; animation: none; }
.story-hero [data-intro-fade] { opacity: 0; animation: fade-in 1s var(--ease) forwards; animation-delay: var(--intro-delay, .45s); }
.story-hero-foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 30px;
  margin-top: clamp(22px, 2.6vw, 36px);
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.story-hero-foot p { max-width: 420px; color: var(--ink-soft); }
.story-scroll { display: inline-flex; align-items: center; gap: 14px; font: 500 10px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.story-scroll-dot { position: relative; width: 44px; height: 44px; border: 1px solid var(--ink); border-radius: 50%; transition: background .3s, border-color .3s; }
.story-scroll-dot::after { content: ''; position: absolute; left: 50%; top: 12px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--accent); animation: dot-drop 1.8s var(--ease-io) infinite; }
.story-scroll:hover .story-scroll-dot { background: var(--brand); border-color: var(--brand); }
@keyframes dot-drop { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 80%, 100% { transform: translateY(16px); opacity: 0; } }

/* ---------- Intro statement ---------- */
.story-intro { background: var(--paper); }
.story-intro-grid { display: grid; grid-template-columns: minmax(150px, .28fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 90px); align-items: start; }
.story-intro-label { padding-top: 16px; border-top: 1px solid var(--ink); font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.story-intro-label span { color: var(--accent); }
.story-intro-line { font-size: clamp(44px, 5.6vw, 96px); line-height: 1.04; }
.story-intro .inline-photo { width: clamp(96px, 10vw, 170px); border-radius: 999px; vertical-align: -.14em; }
.story-intro-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-top: clamp(36px, 4vw, 60px); padding-top: 22px; border-top: 1px solid var(--line); }
.story-intro-foot p { max-width: 520px; color: var(--ink-soft); }

/* ---------- Reel ---------- */
.story-reel { position: relative; height: 250svh; background: var(--paper); }
.story-reel-sticky { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; overflow: hidden; }
.story-reel-frame { position: absolute; inset: 0; overflow: hidden; background: var(--night); will-change: clip-path; }
.story-reel-frame video { width: 100%; height: 100%; object-fit: cover; }
.story-reel-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(33, 21, 14, .3), rgba(33, 21, 14, .6)); }
.story-reel-kicker { position: absolute; z-index: 3; top: calc(var(--demo-h) + var(--header-h) + 8px); left: 50%; translate: -50% 0; font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.story-reel-caption { position: relative; z-index: 2; color: var(--paper); text-align: center; font-size: clamp(64px, 10vw, 180px); }
.story-reel-caption em { color: var(--brand); }
.story-reel-note { position: absolute; z-index: 2; left: 50%; bottom: clamp(24px, 4vw, 44px); translate: -50% 0; font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(246, 240, 228, .82); white-space: nowrap; }
html:not(.has-gsap) .story-reel { height: auto; }
html:not(.has-gsap) .story-reel-sticky { position: relative; }
html:not(.has-gsap) .story-reel-kicker { color: var(--paper); }

/* ---------- Chapters (stacking cards) ---------- */
.story-chapters { background: var(--paper-deep); }
.chapter-stack { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(22px, 3vw, 40px); }
.chapter-card { position: sticky; top: calc(var(--demo-h) + 24px + var(--i) * 20px); }
.chapter-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  height: min(76svh, 680px);
  overflow: hidden;
  transform-origin: 50% 0;
  box-shadow: 0 -18px 50px rgba(33, 21, 14, .14);
  will-change: transform;
}
.chapter-copy { display: flex; flex-direction: column; padding: clamp(26px, 3.6vw, 56px); }
.chapter-index { font: 500 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; opacity: .78; }
.chapter-year { margin-top: auto; font: 300 clamp(96px, 12.6vw, 220px)/.8 var(--display); letter-spacing: -.07em; }
.chapter-copy h3 { margin-top: clamp(18px, 2vw, 28px); font: 400 clamp(32px, 3.3vw, 56px)/1.02 var(--display); letter-spacing: -.035em; }
.chapter-copy h3 + p { margin-top: 14px; max-width: 440px; font-size: 15px; opacity: .8; }
.chapter-media { position: relative; margin: 0; overflow: hidden; }
.chapter-media img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; }
.chapter-night .chapter-inner { background: var(--night); color: var(--paper); }
.chapter-night .chapter-year { color: var(--brand); }
.chapter-accent .chapter-inner { background: var(--accent); color: #fff; }
.chapter-accent .chapter-year { color: #ffe1a8; }
.chapter-mist .chapter-inner { background: var(--surface-tint); color: var(--ink); }
.chapter-mist .chapter-year { color: var(--accent); }
.chapter-brand .chapter-inner { background: var(--brand); color: var(--ink); }
.chapter-brand .chapter-year { color: var(--night); font-style: italic; }

/* ---------- Numbers ---------- */
.story-numbers { padding: clamp(70px, 9vw, 130px) 0; background: var(--night); color: var(--paper); }
.numbers-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(30px, 5vw, 80px); }
.number-item { padding: 22px 0 clamp(36px, 4vw, 64px); border-top: 1px solid var(--line-light); }
.number-big { display: flex; align-items: baseline; gap: 10px; font: 300 clamp(88px, 12vw, 210px)/1 var(--display); letter-spacing: -.06em; font-variant-numeric: tabular-nums lining-nums; }
.number-big small { font: 500 13px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--brand); }
.number-item:nth-child(2) .number-big, .number-item:nth-child(3) .number-big { color: var(--brand); }
.number-label { margin-top: 16px; font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(246, 240, 228, .6); }
.odo { display: inline-flex; }
.odo-col { display: inline-block; height: 1em; overflow: hidden; }
.odo-strip { display: flex; flex-direction: column; transition: transform 2.2s var(--ease-out); transition-delay: calc(var(--oi) * 110ms); }
.odo-strip span { display: block; height: 1em; line-height: 1; }

/* ---------- Habits ---------- */
.story-values { background: var(--paper); }
.value-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: start; }
.value-tile {
  --pad: clamp(14px, 1.4vw, 20px);
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--pad) var(--pad) clamp(24px, 2.4vw, 34px);
  overflow: hidden;
  transition: transform .6s var(--ease-out);
}
.value-tile:nth-child(even) { margin-top: clamp(0px, 4vw, 64px); }
.value-tile:hover { transform: translateY(-10px) rotate(-1.2deg); }
.value-media { position: relative; margin: 0 0 clamp(26px, 2.6vw, 36px); aspect-ratio: 4 / 5; overflow: hidden; background: rgba(0, 0, 0, .12); }
.value-media img { position: absolute; left: 0; top: -6%; width: 100%; height: 112%; object-fit: cover; transition: scale 1.1s var(--ease-out); }
.value-tile:hover .value-media img { scale: 1.07; }
.value-num {
  position: absolute;
  z-index: 2;
  left: calc(var(--pad) + 14px);
  top: calc(var(--pad) + 14px);
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: inherit;
  font: 500 12px var(--mono);
  transition: transform .9s var(--ease-out);
}
.value-tile:hover .value-num { transform: rotate(360deg) scale(1.08); }
.value-tile h3, .value-tile p { padding-inline: clamp(6px, .8vw, 12px); }
.value-tile h3 { font: 400 clamp(32px, 2.8vw, 48px)/1 var(--display); letter-spacing: -.04em; }
.value-tile p { margin-top: 12px; max-width: 320px; font-size: 14px; opacity: .82; }
.tile-accent { background: var(--accent); color: #fff; }
.tile-night { background: var(--night); color: var(--paper); }
.tile-brand { background: var(--brand); color: var(--ink); }
.tile-mist { background: var(--surface-tint); color: var(--ink); }

/* ---------- Team (expanding portraits) ---------- */
.story-team { background: var(--night); color: var(--paper); }
.story-team .section-head { border-color: var(--line-light); }
.story-team .eyebrow { color: var(--brand); }
.story-team .section-copy { color: rgba(246, 240, 228, .66); }
.story-team .section-title em { color: var(--brand); }
.team-accordion { display: flex; gap: 12px; height: clamp(460px, 66svh, 700px); }
.team-panel { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; cursor: pointer; background: #2b1c12; transition: flex 1s var(--ease-out); }
.team-panel.is-open { flex: 2.6 1 0; }
.team-panel:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; }
.team-panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.85) brightness(.55); transform: scale(1.08); transition: filter .8s, transform 1.2s var(--ease-out); }
.team-panel.is-open img { filter: none; transform: scale(1); }
.team-panel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(33, 21, 14, .85)); pointer-events: none; }
.team-panel-label { position: absolute; z-index: 2; left: 18px; bottom: 22px; writing-mode: vertical-rl; transform: rotate(180deg); font: italic 300 clamp(36px, 3.4vw, 58px)/1 var(--display); letter-spacing: -.03em; color: var(--paper); transition: opacity .4s; }
.team-panel.is-open .team-panel-label { opacity: 0; }
.team-panel-body { position: absolute; z-index: 2; left: clamp(20px, 2.4vw, 34px); right: 20px; bottom: clamp(20px, 2.4vw, 30px); opacity: 0; transform: translateY(24px); transition: opacity .5s .15s, transform .8s var(--ease-out) .15s; }
.team-panel.is-open .team-panel-body { opacity: 1; transform: none; }
.team-role { font: 500 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--brand); }
.team-panel-body h3 { margin: 8px 0 10px; font: 400 clamp(48px, 5vw, 88px)/.95 var(--display); letter-spacing: -.045em; }
.team-panel-body p:last-child { max-width: 360px; color: rgba(246, 240, 228, .8); font-size: 14px; }

/* ---------- Find us ---------- */
.story-find { background: var(--paper); }
.story-find-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 100px); align-items: center; }
.story-find-copy .eyebrow { margin-bottom: 20px; color: var(--accent); }
.story-status { margin: 26px 0 18px; color: var(--ink); background: var(--paper-deep); border-color: var(--line); backdrop-filter: none; }
.story-hours { display: grid; margin: 26px 0 30px; border-top: 1px solid var(--ink); }
.story-hours div { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; transition: background .3s, padding .3s; }
.story-hours dt { font-weight: 700; }
.story-hours dd { margin: 0; color: var(--ink-soft); }
.story-hours div.is-today { padding-inline: 12px; background: var(--brand); border-color: var(--brand); }
.story-hours div.is-today dd { color: var(--ink); }
.story-hours div.is-today dt::after { content: ' · today'; font: 500 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.story-map { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border: 2px solid var(--ink); }
.story-map img { width: 100%; height: 100%; object-fit: cover; }
.story-map figcaption { position: absolute; z-index: 3; left: 14px; bottom: 14px; padding: 8px 12px; background: var(--night); color: var(--paper); font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }

/* ---------- Closing banner ---------- */
.visit-side .visit-copy { margin: 0; padding: 24px clamp(120px, 11vw, 160px) 0 0; border-top: 1px solid rgba(255, 255, 255, .5); }
.story-find .section-title { font-size: clamp(52px, 6.2vw, 104px); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1050px) {
  .value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .value-tile:nth-child(even) { margin-top: 0; }
  .story-find-grid { grid-template-columns: 1fr; }
}

@media (max-width: 899px) {
  .story-hero { flex-direction: column; align-items: stretch; justify-content: flex-end; }
  .story-collage { position: relative; inset: auto; height: 84vw; max-height: 560px; margin-bottom: 18px; }
  .c1 { left: 0; top: 2%; width: 50vw; }
  .c2 { display: none; }
  .c3 { left: auto; right: 0; top: 14%; width: 42vw; }
  .c4 { right: auto; left: 20vw; top: 46%; width: 30vw; }
  .c5 { right: 6vw; top: 60%; width: 24vw; }
  .collage-item figcaption { display: none; }
  .story-intro-grid { grid-template-columns: 1fr; gap: 22px; }
  .story-intro-foot { flex-direction: column; align-items: flex-start; gap: 18px; }
  .chapter-card { position: relative; top: auto; }
  .chapter-inner { grid-template-columns: 1fr; height: auto; box-shadow: none; }
  .chapter-media { order: -1; height: 62vw; max-height: 420px; }
  .chapter-year { margin-top: 18px; }
  .team-accordion { flex-direction: column; height: auto; }
  .team-panel, .team-panel.is-open { flex: none; height: 96vw; max-height: 560px; }
  .team-panel img { filter: none; transform: none; }
  .team-panel-label { display: none; }
  .team-panel-body { opacity: 1; transform: none; }
}

@media (min-width: 721px) and (max-width: 899px) {
  .c1 { width: 42vw; }
  .c4 { left: 30vw; top: 52%; width: 25vw; }
}

@media (max-width: 720px) {
  .story-hero-title { font-size: clamp(46px, 14vw, 92px); }
  .story-hero-title .line-indent { padding-left: .45em; }
  .c4 { top: 50%; left: 16vw; }
  .story-hero-foot { flex-direction: column; align-items: flex-start; gap: 18px; }
  .story-reel { height: 200svh; }
  .story-reel-caption { font-size: clamp(52px, 16vw, 84px); }
  .numbers-grid { grid-template-columns: 1fr; }
  .number-big { font-size: clamp(76px, 24vw, 120px); }
  .value-grid { grid-template-columns: 1fr; }
  .value-media { aspect-ratio: 4 / 3; }
}

@media (prefers-reduced-motion: reduce) {
  .collage-inner, .collage-inner img, .story-scroll-dot::after { animation: none; }
  .collage-inner { translate: none; }
  .story-reel { height: auto; }
  .story-reel-sticky { position: relative; }
}