/* DDR Contracting · Direction B · The Drawing Set
   Type: Jost only (200 uppercase lettering for display, 300 body, 400 labels, 500 tiny UI)
   plus DM Mono 300 for sheet numbers and drawing notes. All from shared/fonts. */
@font-face { font-family: "Jost"; src: url("../fonts/jost-latin-200-normal.woff2") format("woff2"); font-weight: 200; font-display: swap; }
@font-face { font-family: "Jost"; src: url("../fonts/jost-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Jost"; src: url("../fonts/jost-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Jost"; src: url("../fonts/jost-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "DM Mono"; src: url("../fonts/dm-mono-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-display: swap; }

:root {
  --paper: #F3EFE7;
  --sheet: #F9F6EF;
  --ink: #1C1E1D;
  --ink-soft: #595D59;
  --rule: #CFC9BD;
  --red: #C5620F;          /* DDR logo orange as the redline */
  --red-ink: #9A4A09;      /* same hue for small text on paper */
  --red-deep: #A9510B;     /* dock Call ground; paper text on it 4.7:1 */
  --red-lite: #E0782A;     /* same hue on graphite and dark photos */
  --graphite: #1C1E1D;
  --on-dark: #F3EFE7;
  --on-dark-soft: #B4B6B0;

  --sans: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, Menlo, monospace;

  /* five type sizes */
  --t-d: clamp(2.25rem, 1.05rem + 4.6vw, 5rem);        /* display: the big moments (A-200, A-900) */
  --t-s: clamp(1.625rem, 1.05rem + 2.1vw, 2.875rem);   /* section headings */
  --t-t: clamp(1.25rem, 1.08rem + 0.6vw, 1.625rem);    /* titles */
  --t-b: 1.0625rem;                                    /* body */
  --t-l: 0.75rem;                                      /* labels, links, sheet notes */

  --gutter: clamp(16px, 4vw, 56px);
  --sec: clamp(44px, 5vw, 64px);
  --maxw: 1360px;
  --tb-h: 56px;
  --dock-h: 0px;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}
@media (min-width: 960px) { :root { --tb-h: 72px; } }
@media (max-width: 959px) { :root { --dock-h: 60px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--tb-h); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-weight: 300; font-size: var(--t-b); line-height: 1.7;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.3em; text-decoration-thickness: 1px; }
h1, h2, h3 { font-weight: inherit; }
::selection { background: var(--red); color: var(--sheet); }
:focus-visible { outline: 1px solid var(--red); outline-offset: 4px; }
button { font: inherit; color: inherit; }
.mono { font-family: var(--mono); font-weight: 300; font-size: var(--t-l); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.tnum { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--ink); color: var(--sheet); padding: 10px 14px; }
.skip:focus { top: 8px; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.sec { padding-top: var(--sec); padding-bottom: var(--sec); }

/* ---------- type roles ---------- */
.display {
  margin: 0; font-family: var(--sans); font-weight: 200; font-size: var(--t-d);
  text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.04; text-wrap: balance;
}
.display--sec { font-size: var(--t-s); letter-spacing: 0.1em; line-height: 1.1; }
.kicker, .label {
  margin: 0 0 20px; font-weight: 400; font-size: var(--t-l); line-height: 1.5;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-soft);
}
.kicker .mono { color: var(--red-ink); letter-spacing: 0.06em; margin-right: 1.2em; }
.body { margin: 24px 0 0; max-width: 60ch; color: var(--ink-soft); text-wrap: pretty; }
.only-coarse { display: none; }
@media (pointer: coarse) { .only-coarse { display: revert; } }
.only-narrow { display: none; }
@media (max-width: 599px) { .only-wide { display: none; } .only-narrow { display: inline; } }

/* ---------- title block (fixed, transparent over the hero) ---------- */
.tb {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--tb-h);
  display: flex; align-items: center; gap: 20px; padding: 0 var(--gutter);
  background: transparent; border-bottom: 1px solid transparent;
  transition: background-color 240ms var(--ease), border-color 240ms var(--ease);
}
.tb::before {
  content: ""; position: absolute; inset: 0 0 -40px; z-index: -1; pointer-events: none;
  background: linear-gradient(rgba(249, 246, 239, 0.9), rgba(249, 246, 239, 0.6) 55%, rgba(249, 246, 239, 0));
  transition: opacity 240ms var(--ease);
}
.tb.is-solid { background: var(--paper); border-bottom-color: var(--rule); }
.tb.is-solid::before { opacity: 0; }
/* once the room is finished the milky fade goes; a faint 72px veil keeps the logo and number legible over dark millwork */
.cover-done .tb:not(.is-solid)::before { inset: 0 0 -16px; background: linear-gradient(rgba(249, 246, 239, 0.55), rgba(249, 246, 239, 0)); }
.tb__logo { flex: none; display: block; }
.tb__logo img { height: 36px; width: auto; }
.tb__sheet { margin: 0; flex: 1 1 auto; min-width: 0; font-weight: 400; font-size: var(--t-l); letter-spacing: 0.24em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb__sheet .mono { color: var(--red-ink); letter-spacing: 0.06em; margin-right: 0.6em; }
.tb__nav { position: relative; }
.tb__nav ul { list-style: none; margin: 0; padding: 0; }
.tb__menu { min-height: 44px; min-width: 44px; padding: 0 2px; background: none; border: 0; cursor: pointer; font-weight: 400; font-size: var(--t-l); letter-spacing: 0.22em; text-transform: uppercase; }
.tb__nav #sheet-list { position: absolute; right: calc(-1 * var(--gutter)); top: calc(100% + 6px); min-width: 220px; background: var(--paper); border: 1px solid var(--rule); display: none; }
.tb__nav.is-open #sheet-list { display: block; }
.tb__nav #sheet-list a { display: block; padding: 15px 20px; text-decoration: none; font-weight: 400; font-size: var(--t-l); letter-spacing: 0.22em; text-transform: uppercase; border-top: 1px solid var(--rule); }
.tb__nav #sheet-list li:first-child a { border-top: 0; }
.tb__tel { display: none; }
@media (min-width: 960px) {
  .tb { gap: 36px; }
  .tb__logo img { height: 42px; }
  .tb__sheet { flex: 0 1 auto; }
  .tb__menu { display: none; }
  .tb__nav { margin-left: auto; }
  .tb__nav #sheet-list { position: static; display: flex; gap: 28px; border: 0; background: none; min-width: 0; transition: opacity 300ms var(--ease), visibility 300ms; }
  .js .tb:not(.is-solid) #sheet-list { opacity: 0; visibility: hidden; }
  .tb__nav #sheet-list a { padding: 12px 0; border: 0; position: relative; }
  .tb__nav #sheet-list a::after { content: ""; position: absolute; left: 0; right: 0.22em; bottom: 6px; height: 1px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 220ms var(--ease); }
  .tb__nav #sheet-list a:hover::after, .tb__nav #sheet-list a[aria-current="true"]::after { transform: scaleX(1); }
  .tb__tel { display: block; font-weight: 400; font-size: var(--t-l); letter-spacing: 0.14em; text-decoration: none; font-variant-numeric: tabular-nums; padding: 12px 0; }
  .tb__tel:hover { color: var(--red-ink); }
}

/* ---------- redlines (shared) ---------- */
.redline { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; z-index: 3; }
.rl { fill: none; stroke: var(--red); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.rl--thin { stroke-width: 1; }
.rl--dash { stroke-dasharray: 12 5 2 5; stroke-width: 1; }
.rl-t path { fill: none; }
.rl-dot { fill: var(--red); }
/* notes: no halo; size is set per plate by JS so they render at about 12px */
.rl-txt, .rl-num { font-family: var(--mono); font-weight: 300; font-size: var(--fs, 12px); letter-spacing: 0.06em; fill: var(--red); }
.rl-num { text-anchor: middle; letter-spacing: 0; dominant-baseline: middle; }
.is-built[data-dark] .rl-txt, .is-built[data-dark] .rl-num, .is-built[data-dark] .rl-dot { fill: var(--red-lite); }
.is-built[data-dark] .rl { stroke: var(--red-lite); }
.rl-m { display: none; }
@media (max-width: 959px) { .rl-d { display: none; } .rl-m { display: inline; } }

/* ---------- A-000 cover: on load the drawing becomes the room ---------- */
.cover { position: relative; height: 100vh; height: 100svh; min-height: 480px; overflow: hidden; background: var(--sheet); }
.plot { position: absolute; inset: 0; }
.plot img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--ox, 50%) var(--oy, 50%); }
.plot__photo, .plot__photo-in { position: absolute; inset: 0; }
/* at rest (reduced motion, no JS): the finished room, the drawing only a trace, no redlines */
.plot__ghost { mix-blend-mode: multiply; opacity: 0.1; }
.plot .redline { opacity: 0; }
/* motion: the room develops out of the drawing from the island (radial ink front driven by b.js) */
.motion .plot__photo { -webkit-mask-image: radial-gradient(circle, #000 0, transparent 0); mask-image: radial-gradient(circle, #000 0, transparent 0); }
.motion .plot__ghost { opacity: calc(0.9 * (1 - var(--b, 0))); }
.motion .plot .redline { opacity: 0.9; transition: opacity 900ms var(--ease); }
.motion .plot.is-done .redline { opacity: 0; }
/* pencil lines: the redlines draw first */
.motion .cover .rl { stroke-dasharray: 1; stroke-dashoffset: 1; animation: rl-draw 1.1s var(--ease) 0.2s forwards; }
.motion .cover .rl--dash { stroke-dasharray: 12 5 2 5; stroke-dashoffset: 0; opacity: 0; animation: rl-fade 0.8s var(--ease) 0.6s forwards; }
.motion .cover .rl-num { opacity: 0; animation: rl-fade 0.5s var(--ease) 0.9s forwards; }
.motion .cover .rl-t .rl { animation-delay: 0.6s; }
@keyframes rl-draw { to { stroke-dashoffset: 0; } }
@keyframes rl-fade { to { opacity: 1; } }

.cover__strip {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background: var(--sheet); border-top: 1px solid var(--rule);
}
.cover__label { margin: 0; font-weight: 400; font-size: var(--t-l); letter-spacing: 0.24em; text-transform: uppercase; white-space: nowrap; }
.cover__call { flex: none; font-weight: 400; font-size: var(--t-l); letter-spacing: 0.22em; text-transform: uppercase; text-decoration: underline; text-decoration-color: var(--red); padding: 12px 0; margin: -12px 0; }
@media (hover: hover) { .cover__call:hover { color: var(--red-ink); } }
@media (max-width: 599px) { .cover__label { letter-spacing: 0.18em; } }

/* critical above: inlined into index.html */
/* ---------- A-001 general notes ---------- */
.notes { padding-top: calc(var(--sec) * 1.5); }
.proof { margin: 0; font-weight: 400; font-size: var(--t-l); line-height: 2; letter-spacing: 0.24em; text-transform: uppercase; }
.notes__list { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 0; counter-reset: n; border-top: 1px solid var(--ink); }
.notes__list li { counter-increment: n; padding: 20px 0 22px 44px; position: relative; border-bottom: 1px solid var(--rule); }
.notes__list li::before { content: counter(n, decimal-leading-zero); position: absolute; left: 0; top: 24px; font-family: var(--mono); font-size: var(--t-l); color: var(--red-ink); }
.notes__list h3 { margin: 0; font-size: var(--t-t); line-height: 1.3; }
.notes__list p { margin: 6px 0 0; color: var(--ink-soft); }
@media (min-width: 720px) { .notes__list { grid-template-columns: repeat(2, 1fr); column-gap: 40px; } }
@media (min-width: 1100px) {
  .notes__list { grid-template-columns: repeat(4, 1fr); column-gap: 0; }
  .notes__list li { border-bottom: 0; border-left: 1px solid var(--rule); padding: 28px 28px 8px; }
  .notes__list li:first-child { border-left: 0; padding-left: 0; }
  .notes__list li::before { position: static; display: block; margin-bottom: 14px; }
}

/* ---------- A-100 sheet index ---------- */
.index__grid { display: grid; gap: 40px; margin-top: 40px; }
.index__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.ix {
  display: grid; grid-template-columns: 3.75rem 1fr 88px; grid-template-areas: "no title thumb" "no desc thumb";
  column-gap: 16px; align-items: start; padding: 18px 0; border-bottom: 1px solid var(--rule);
}
.ix__no { grid-area: no; color: var(--red-ink); padding-top: 0.55em; }
.ix__title { grid-area: title; margin: 0; font-size: var(--t-t); line-height: 1.3; }
.ix__desc { grid-area: desc; margin: 4px 0 0; color: var(--ink-soft); max-width: 46ch; }
.ix__thumb { grid-area: thumb; width: 88px; height: 66px; object-fit: cover; }
.index__preview { display: none; }
@media (min-width: 960px) {
  .index__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(40px, 5vw, 96px); }
  .ix { grid-template-columns: 4.5rem minmax(0, 16rem) 1fr; grid-template-areas: "no title desc"; align-items: baseline; padding: 22px 0; position: relative; }
  .ix__desc { margin: 0; }
  .ix__thumb { display: none; }
  .ix::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 320ms var(--ease); }
  .ix.is-active::after { transform: scaleX(1); }
  .index__preview { display: block; margin: 0; position: sticky; top: calc(var(--tb-h) + 32px); align-self: start; }
  .index__frame { position: relative; aspect-ratio: 4 / 3; background: var(--sheet); overflow: hidden; }
  .pv { position: absolute; inset: 0; opacity: 0; transition: opacity 320ms var(--ease); }
  .pv.is-on { opacity: 1; }
  .pv img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
  .pv .pv__room { opacity: 0; transition: opacity 900ms var(--ease); }
  .pv.is-built .pv__room, .pv--stamp .pv__room { opacity: 1; }
  .pv__stamp { position: absolute; left: 16px; top: 16px; padding: 5px 10px; border: 1px solid var(--red-lite); color: var(--red-lite); text-transform: uppercase; background: rgba(28, 30, 29, 0.35); }
  .index__cap { display: block; margin-top: 14px; color: var(--ink-soft); text-transform: uppercase; }
}

/* ---------- A-200 drawn, then built: full-screen sheets ---------- */
.drawn__intro { padding-bottom: calc(var(--sec) * 0.75); }
.drawn__pin { display: grid; }
.dsheet { position: relative; height: calc(100svh - var(--tb-h)); min-height: 460px; overflow: hidden; background: var(--sheet); }
.dsheet::after { content: ""; position: absolute; inset: 0; background: #0E0F0F; opacity: calc(var(--dim, 0) * 0.35); pointer-events: none; z-index: 8; }
.bloom { position: absolute; inset: 0; overflow: hidden; }
.bloom img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--ox, 50%) var(--oy, 50%); }
.bloom__photo { position: absolute; inset: 0; clip-path: inset(0 0 0 50%); }
.bloom__ghost { mix-blend-mode: multiply; opacity: 0; display: none; }
.bloom::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--red); z-index: 4; }
/* title block: a thin strip over the plate */
.dsheet__tb {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; align-items: stretch;
  background: var(--sheet); border-top: 1px solid var(--ink);
}
.dsheet__tb > * { margin: 0; padding: 12px 16px; display: flex; align-items: center; border-left: 1px solid var(--rule); }
.dsheet__tb > :first-child { border-left: 0; color: var(--red-ink); }
.dsheet__tb h3 { flex: 1 1 auto; font-weight: 400; font-size: var(--t-l); letter-spacing: 0.22em; text-transform: uppercase; line-height: 1.4; }
.dsheet__tb > .mono { text-transform: uppercase; white-space: nowrap; }
@media (max-width: 599px) { .dsheet__tb > * { padding: 12px; } .dsheet__tb h3 { letter-spacing: 0.14em; } }
@media (min-width: 960px) {
  .dsheet__tb { left: auto; border-left: 1px solid var(--ink); }
  .dsheet__tb h3 { padding-right: 40px; }
}

.motion .drawn__track { height: 320vh; }
.motion .drawn__pin { display: block; position: sticky; top: var(--tb-h); height: calc(100svh - var(--tb-h) - var(--dock-h)); overflow: hidden; }
.motion .dsheet { position: absolute; inset: 0; height: auto; min-height: 0; will-change: transform; }
.motion .dsheet[data-plate="1"] { transform: translate3d(0, 100vh, 0); box-shadow: 0 -1px 0 var(--rule), 0 -28px 56px rgba(28, 30, 29, 0.22); }
.motion .bloom::before { display: none; }
.motion .bloom__ghost { display: block; opacity: calc(0.9 * (1 - var(--b, 0))); }
.motion .bloom .redline { opacity: calc(1 - clamp(0, (var(--b, 0) - 0.7) * 3.4, 1)); }
.motion .bloom:not(.is-ready) .redline { opacity: 0; }
.motion .bloom__photo { clip-path: none; -webkit-mask-image: radial-gradient(circle, #000 0, transparent 0); mask-image: radial-gradient(circle, #000 0, transparent 0); }
.motion .drawn .rl { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--d, 0)); }
.motion .drawn .rl--dash { stroke-dasharray: 12 5 2 5; stroke-dashoffset: 0; opacity: var(--d, 0); }
.motion .drawn .rl-txt, .motion .drawn .rl-num, .motion .drawn .rl-dot { opacity: clamp(0, calc((var(--d, 0) - 0.8) * 5), 1); }

/* ---------- A-400 sequence: a dimension string ---------- */
.seq { list-style: none; margin: 48px 0 0; padding: 0; display: grid; }
.seq li { position: relative; padding: 22px 0 22px 44px; border-bottom: 1px solid var(--rule); }
.seq li:first-child { border-top: 1px solid var(--ink); }
.seq__no { color: var(--red-ink); }
.seq h3 { margin: 4px 0 0; font-size: var(--t-t); line-height: 1.3; }
.seq p { margin: 6px 0 0; color: var(--ink-soft); max-width: 36ch; }
.dim { position: absolute; left: 12px; top: 0; bottom: 0; width: 1px; }
.dim i { position: absolute; inset: 0; background: var(--red); transform-origin: top; transform: scaleY(clamp(0, calc(var(--q, 1) * 4 - var(--i)), 1)); }
.dim::before, .dim::after { content: ""; position: absolute; left: -5px; width: 11px; height: 1px; background: var(--red); transform: rotate(-45deg); }
.dim::before { top: 0; }
.dim::after { bottom: 0; opacity: clamp(0, calc((var(--q, 1) * 4 - var(--i)) * 4 - 3), 1); }
.dim b { position: absolute; left: 32px; top: 22px; margin-left: 2.4em; font-weight: 300; color: var(--red-ink); text-transform: uppercase; white-space: nowrap; opacity: clamp(0, calc((var(--q, 1) * 4 - var(--i)) * 2), 1); }
@media (min-width: 900px) {
  .seq { grid-template-columns: repeat(4, 1fr); }
  .seq li { padding: 64px 28px 8px; border: 0; border-left: 1px solid var(--ink); }
  .seq li:first-child { border-top: 0; }
  .seq li:last-child { border-right: 1px solid var(--ink); }
  .dim { left: 0; right: 0; top: 24px; bottom: auto; width: auto; height: 1px; }
  .dim i { transform-origin: left; transform: scaleX(clamp(0, calc(var(--q, 1) * 4 - var(--i)), 1)); }
  .dim::before, .dim::after { top: -5px; width: 1px; height: 11px; left: -1px; transform: rotate(45deg); }
  .dim::after { left: auto; right: -1px; bottom: auto; }
  .dim b { left: 0; right: 0; top: -22px; margin: 0; text-align: center; }
}

/* ---------- A-500 from DDR ---------- */
.note__wrap { max-width: 44rem; text-align: center; }
.note__body { margin: 0; border-top: 1px solid var(--red); padding-top: 28px; }
.note__body p { margin: 0; font-size: var(--t-t); line-height: 1.5; text-wrap: balance; }
.note__sig { margin-top: 20px; font-weight: 400; font-size: var(--t-l); letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-soft); }

/* ---------- A-600 key plan ---------- */
.area__grid { display: grid; gap: 40px; margin-top: 8px; }
.area__lists { display: grid; grid-template-columns: 1fr; gap: 28px; margin-top: 32px; }
.area__lists .label { margin: 0 0 8px; }
.places { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); columns: 2; column-gap: 24px; }
.places li { break-inside: avoid; padding: 8px 0; border-bottom: 1px solid var(--rule); }
.places .base { font-family: var(--mono); font-size: var(--t-l); color: var(--red-ink); margin-left: 0.6em; }
.area__fig { margin: 0; }
.area__fig img { width: 100%; aspect-ratio: 1280 / 724; object-fit: cover; }
.area__fig figcaption { margin-top: 12px; color: var(--ink-soft); text-transform: uppercase; }
@media (min-width: 960px) {
  .area__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(40px, 5vw, 96px); align-items: end; }
}

/* ---------- A-900 close ---------- */
.close { background: var(--graphite); color: var(--on-dark); padding-top: calc(var(--sec) * 1.5); }
.close ::selection { background: var(--red-lite); color: var(--graphite); }
.close :focus-visible { outline-color: var(--red-lite); }
.close .kicker { color: var(--on-dark-soft); }
.close .kicker .mono { color: var(--red-lite); }
.close .body { color: var(--on-dark-soft); font-weight: 400; }
.close__grid { display: grid; gap: 56px; }
.close__tel { display: inline-block; margin-top: 12px; color: var(--red-lite); text-decoration: none; letter-spacing: 0.04em; }
@media (hover: hover) { .close__tel:hover { text-decoration: underline; text-decoration-thickness: 1px; } }
.close__links { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 32px; }
.close__links a { display: inline-block; padding: 12px 0; font-weight: 400; font-size: var(--t-l); letter-spacing: 0.22em; text-transform: uppercase; text-decoration: underline; text-decoration-color: var(--red-lite); }
.close__block { border: 1px solid rgba(180, 182, 176, 0.5); align-self: end; }
.close__block img { width: 132px; height: auto; margin: 24px; }
.close__block dl { margin: 0; border-top: 1px solid rgba(180, 182, 176, 0.5); }
.close__block dl div { display: grid; grid-template-columns: 7.5rem 1fr; border-bottom: 1px solid rgba(180, 182, 176, 0.25); }
.close__block dt, .close__block dd { margin: 0; padding: 10px 16px; }
.close__block dt { font-weight: 400; font-size: var(--t-l); letter-spacing: 0.24em; text-transform: uppercase; color: var(--on-dark-soft); padding-top: 14px; border-right: 1px solid rgba(180, 182, 176, 0.25); }
.close__block dd { font-weight: 400; overflow-wrap: anywhere; }
.close__block dd a { text-decoration-color: var(--red-lite); }
.close__stamp { margin: 0; padding: 12px 16px; color: var(--red-lite); text-transform: uppercase; letter-spacing: 0.2em; }
@media (min-width: 960px) { .close__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: clamp(40px, 6vw, 120px); } }
.foot { display: flex; flex-wrap: wrap; gap: 8px 32px; padding-top: 72px; padding-bottom: calc(36px + env(safe-area-inset-bottom)); font-size: var(--t-l); letter-spacing: 0.04em; color: var(--on-dark-soft); font-weight: 400; }
.foot a { color: var(--on-dark); margin-left: auto; padding: 12px 0; margin-top: -12px; margin-bottom: -12px; }

/* ---------- mobile action dock (appears once the hero is gone, hides over the close) ---------- */
.dock { display: none; }
@media (max-width: 959px) {
  .dock {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: grid; grid-template-columns: repeat(3, 1fr);
    background: var(--graphite); padding-bottom: env(safe-area-inset-bottom);
    transition: transform 280ms var(--ease);
  }
  .dock a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 60px; color: var(--on-dark); text-decoration: none; font-weight: 500; font-size: var(--t-l); letter-spacing: 0.2em; text-transform: uppercase; border-left: 1px solid rgba(180, 182, 176, 0.3); }
  .dock a:first-child { border-left: 0; background: var(--red-deep); }
  .dock svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
  .js .dock { transform: translateY(110%); }
  .js .dock.is-up { transform: none; }
  html:not(.js) body { padding-bottom: 60px; }
}

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