/* =============================================================
   Vortex Arts — site.css
   Catalogue raisonné: hairline rules carry the structure, nothing
   is rounded, photographs are plates with captions.
   Every colour comes from a token in colors_and_type.css.
   ============================================================= */

/* ── Layout primitives ─────────────────────────────────────── */

.vtx-site { min-height: 100vh; background: var(--bg); overflow-x: clip; }

.wrap {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.wrap-text { max-width: var(--container-text); }

.sec { padding-block: var(--section-y); position: relative; }
.sec-tight { padding-block: clamp(48px, 6vw, 88px); }
.sec-dark { background: var(--bg-dark); color: var(--fg-on-dark); }
.sec-dark h1, .sec-dark h2, .sec-dark h3, .sec-dark h4 { color: var(--fg-on-dark); }
.sec-dark p { color: var(--fg-on-dark-mut); }
.sec-dark .label { color: var(--fg-on-dark-fnt); }
.sec-raised { background: var(--bg-raised); }

hr.rule, .rule-line { border: 0; height: 1px; background: var(--rule); margin: 0; }
.sec-dark .rule-line { background: var(--rule-light); }

/* Section masthead: a label, a rule, and a title. Used on every section. */
.masthead { display: grid; gap: var(--s5); margin-bottom: var(--s8); }
.masthead-top {
  display: flex; align-items: baseline; gap: var(--s4);
  padding-bottom: var(--s3); border-bottom: 1px solid var(--rule);
}
.sec-dark .masthead-top { border-bottom-color: var(--rule-light); }
.masthead-top .label { flex: 1; }
.masthead h2 { max-width: 18ch; }
.masthead-split {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--s8); align-items: end;
}

/* ── Motion primitives ─────────────────────────────────────── */

/* Word-by-word mask reveal for display headings. */
.mask { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.06em; }
.mask > i {
  display: inline-block; font-style: inherit;
  transform: translateY(115%);
  transition: transform 1.05s var(--ease-mask);
  transition-delay: var(--d, 0ms);
}
.is-in .mask > i { transform: translateY(0); }

/* Generic rise-in for body copy, rows, tiles. */
.rise {
  opacity: 0; transform: translateY(22px);
  transition: opacity .85s var(--ease-out), transform .85s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.is-in .rise, .rise.is-in { opacity: 1; transform: none; }

/* A rule that draws itself left-to-right. */
.draw { transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease-mask); transition-delay: var(--d, 0ms); }
.is-in .draw { transform: scaleX(1); }

/* Plate: a photograph uncovered by a wipe, with the image settling out of a slight zoom. */
.plate { position: relative; overflow: hidden; background: var(--vtx-sand); }
.plate > img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); transition: transform var(--dur-plate) var(--ease-out); }
.plate::after {
  content: ""; position: absolute; inset: 0; background: var(--vtx-page);
  transform-origin: bottom; transition: transform 1s var(--ease-mask); transition-delay: var(--d, 0ms);
}
.is-in .plate > img { transform: scale(1); }
.is-in .plate::after { transform: scaleY(0); }
.sec-dark .plate::after, .plate-on-dark::after { background: var(--bg-dark); }

.plate-cap {
  display: flex; gap: var(--s3); align-items: baseline;
  margin-top: var(--s3); padding-top: var(--s3);
  border-top: 1px solid var(--rule);
  font-size: var(--fs-micro); color: var(--fg-subtle);
}
.sec-dark .plate-cap { border-top-color: var(--rule-light); color: var(--fg-on-dark-fnt); }

/* Page transition */
.page-in  { opacity: 1; transition: opacity .34s var(--ease-soft); }
.page-out { opacity: 0; transition: opacity .2s var(--ease-soft); }

/* ── Buttons — sharp, hairline, no pills ───────────────────── */

.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s3);
  font-family: var(--font-body); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  padding: 17px 30px; border: 1px solid var(--vtx-ink); border-radius: 0;
  background: transparent; color: var(--vtx-ink); cursor: pointer;
  transition: color .45s var(--ease-out), border-color .45s var(--ease-out);
}
/* The fill sweeps up from the bottom edge rather than cross-fading. */
.btn::before {
  content: ""; position: absolute; inset: 0; background: var(--vtx-ink);
  transform: scaleY(0); transform-origin: bottom; z-index: 0;
  transition: transform .45s var(--ease-mask);
}
.btn > * { position: relative; z-index: 1; }
.btn:hover::before { transform: scaleY(1); }
.btn:hover { color: var(--vtx-cream); }

.btn-solid { background: var(--vtx-ink); color: var(--vtx-cream); border-color: var(--vtx-ink); }
.btn-solid::before { background: var(--vtx-copper); }
.btn-solid:hover { color: var(--vtx-white); border-color: var(--vtx-copper); }

.btn-light { border-color: var(--rule-light-str); color: var(--fg-on-dark); }
.btn-light::before { background: var(--vtx-cream); }
.btn-light:hover { color: var(--vtx-ink); border-color: var(--vtx-cream); }

.btn-sm { padding: 12px 20px; }

.ripple {
  position: absolute; border-radius: 999px; transform: translate(-50%, -50%) scale(0);
  width: 320px; height: 320px; background: rgba(255,255,255,0.14);
  animation: ripple .7s var(--ease-out) forwards; pointer-events: none; z-index: 1;
}
@keyframes ripple { to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }

/* Text link with a rule that grows from the left. */
.tlink {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--vtx-ink);
  padding-bottom: 6px; position: relative; cursor: pointer;
  background: none; border: 0; font-family: var(--font-body);
}
.tlink::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease-mask);
}
.tlink:hover::after { transform: scaleX(1); }
.tlink .arw { transition: transform .4s var(--ease-out); }
.tlink:hover .arw { transform: translateX(5px); }
.sec-dark .tlink { color: var(--fg-on-dark); }

/* ── Navigation — frosted bone over ink. No metal fill. ────── */

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  /* Two static colours toggled by .nav--rest rather than a calc(var(--np)) alpha
     driven from the scroll handler: same result, no per-frame style writes, and
     the transition is a plain colour interpolation. */
  background-color: rgba(241, 238, 232, 0);
  border-bottom: 1px solid rgba(37, 34, 27, 0);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  transition: background-color .45s var(--ease-out), border-color .45s var(--ease-out);
}
/* Past the hero (and on every inner page) the bar becomes the page's own paper. */
.nav--rest {
  background-color: rgba(241, 238, 232, 0.92);
  border-bottom-color: rgba(37, 34, 27, 0.14);
}
.nav-in {
  max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter);
  height: clamp(64px, 6vw, 84px);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s5);
  transition: height .4s var(--ease-out);
}
.nav--scrolled .nav-in { height: 64px; }

.nav-brand { cursor: pointer; display: flex; align-items: baseline; gap: 9px; line-height: 1; }
.nav-brand-word {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(19px, 1.7vw, 24px); letter-spacing: 0.005em; white-space: nowrap;
}
.nav-brand-est {
  font-size: 9.5px; letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--vtx-copper); font-weight: 500;
}

.nav-links { display: flex; gap: clamp(18px, 2.2vw, 38px); align-items: center; }
.nav-links a {
  position: relative; cursor: pointer; padding: 4px 0;
  font-size: var(--fs-label); font-weight: 500;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  transition: opacity .3s var(--ease-out);
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--vtx-copper); transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease-mask);
}
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav-links a.active { color: var(--vtx-copper); }

.nav-right { display: flex; align-items: center; gap: var(--s5); }

.lang { display: flex; align-items: center; gap: 7px; font-size: var(--fs-label); letter-spacing: var(--ls-wide); }
.lang button {
  background: none; border: 0; padding: 2px 1px; cursor: pointer;
  font-family: var(--font-body); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: var(--ls-wide); color: inherit; opacity: .45;
  transition: opacity .3s;
}
.lang button.active { opacity: 1; color: var(--vtx-copper); }
.lang button:hover { opacity: .85; }
.lang .sep { opacity: .3; }

/* Over the hero the bar is transparent, so everything in it inverts to light. */
/* Its own dark masthead wash. Left fully transparent, the bar simply showed the
   brass photograph behind it and read as a gold band. Set as background-image so
   it does not fight the background-color transition on .nav / .nav--rest. */
.nav--over {
  color: var(--fg-on-dark);
  background-image: linear-gradient(to bottom,
    rgba(18, 16, 12, 0.86) 0%, rgba(18, 16, 12, 0.68) 55%, rgba(18, 16, 12, 0.30) 100%);
}
.nav--rest { background-image: none; }
.nav--over .nav-brand-word { color: var(--fg-on-dark); }
.nav--over .nav-brand-est { color: rgba(239,236,229,0.62); }
.nav--over .nav-links a { color: rgba(239,236,229,0.82); }
.nav--over .nav-links a.active { color: var(--fg-on-dark); }
.nav--over .nav-links a::after { background: var(--fg-on-dark); }
.nav--over .btn { border-color: var(--rule-light-str); color: var(--fg-on-dark); }
.nav--over .btn::before { background: var(--vtx-cream); }
.nav--over .btn:hover { color: var(--vtx-ink); border-color: var(--vtx-cream); }
.nav--over .lang button.active { color: var(--fg-on-dark); }
.nav--rest { color: var(--vtx-ink); }

.burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; background: none; border: 0; cursor: pointer; padding: 0;
}
.burger span {
  display: block; height: 1px; width: 22px; background: currentColor;
  transition: transform .4s var(--ease-out), opacity .3s;
}
.burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Full-height drawer, staggered entries. */
.drawer {
  position: fixed; inset: 0; z-index: 55;
  background: var(--vtx-obsidian); color: var(--fg-on-dark);
  display: flex; flex-direction: column; justify-content: center;
  padding: 96px var(--gutter) var(--s8);
  animation: drawerIn .5s var(--ease-mask);
}
@keyframes drawerIn { from { opacity: 0; transform: translateY(-10px); } }
.drawer-links { display: flex; flex-direction: column; }
.drawer-links a {
  display: flex; align-items: baseline; gap: var(--s4);
  font-family: var(--font-display); font-size: clamp(30px, 8vw, 46px);
  padding: var(--s4) 0; border-bottom: 1px solid var(--rule-light);
  cursor: pointer; opacity: 0; animation: drawerItem .6s var(--ease-out) forwards;
}
.drawer-links a .num { font-size: 11px; }
.drawer-links a.active { color: var(--vtx-copper-lt); }
@keyframes drawerItem { to { opacity: 1; } }
.drawer-foot { margin-top: var(--s8); display: flex; align-items: center; justify-content: space-between; gap: var(--s5); flex-wrap: wrap; }

/* ── Hero — full bleed, headline set over the plate ────────── */

.hero {
  position: relative; min-height: 100svh; display: flex; flex-direction: column;
  justify-content: flex-end; background: var(--vtx-obsidian); overflow: hidden;
  /* Content is bottom-aligned, so this only bites when the headline is tall --
     which is exactly when it would otherwise slide under the fixed nav. */
  padding-top: clamp(88px, 7.5vw, 122px);
}
.hero-media { position: absolute; inset: 0; }
.hero-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 42%;
  transform: scale(1.1); opacity: 0;
  transition: transform 2.6s var(--ease-out), opacity 1.4s ease;
}
.hero.ready .hero-media img { transform: scale(1); opacity: 1; }
/* Two scrims: a vertical one for the headline, a soft top one for the nav. */
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(20,18,14,0.92) 0%, rgba(20,18,14,0.58) 34%, rgba(20,18,14,0.20) 62%, rgba(20,18,14,0.70) 100%);
}
.hero-body { position: relative; z-index: 2; padding-bottom: clamp(36px, 5vw, 68px); }
.hero-eb {
  display: flex; align-items: center; gap: var(--s3);
  color: rgba(239,236,229,0.72); margin-bottom: var(--s5);
}
.hero-eb::before { content: ""; width: 40px; height: 1px; background: var(--vtx-copper-lt); }
.hero-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--fs-mega); line-height: var(--lh-mega); letter-spacing: var(--ls-mega);
  color: var(--fg-on-dark); max-width: 15ch; margin: 0;
}
.hero-lede {
  color: rgba(239,236,229,0.74); max-width: 46ch; margin-top: var(--s5);
  font-size: var(--fs-lead); line-height: 1.62; font-weight: 300;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s6); }

/* Hairline fact bar welded to the bottom of the hero. */
.hero-meta {
  position: relative; z-index: 2;
  border-top: 1px solid var(--rule-light);
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: clamp(24px, 5vw, 76px); padding: var(--s5) 0; align-items: center;
}
.hero-meta-item { display: grid; gap: 5px; }
.hero-meta-item .k { color: rgba(239,236,229,0.42); }
.hero-meta-item .v { font-family: var(--font-display); font-size: 17px; color: var(--fg-on-dark); }
.hero-scroll {
  display: flex; align-items: center; gap: var(--s3);
  color: rgba(239,236,229,0.5); font-size: var(--fs-label);
  letter-spacing: var(--ls-label); text-transform: uppercase;
}
.hero-scroll i { display: block; width: 1px; height: 30px; background: rgba(239,236,229,0.35); position: relative; overflow: hidden; }
.hero-scroll i::after {
  content: ""; position: absolute; inset: 0; background: var(--vtx-copper-lt);
  animation: scrollCue 2.1s var(--ease-soft) infinite;
}
@keyframes scrollCue { 0% { transform: translateY(-100%); } 60%,100% { transform: translateY(100%); } }

/* ── Figures — one baseline band, numeral beside its label ─── */
/* Replaced four bordered cells that stood 242px tall to hold one numeral. */

.figs { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--vtx-sand); }
.figs-row {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
  gap: clamp(22px, 3.4vw, 54px); padding-block: clamp(26px, 3vw, 40px);
}
.fig { display: flex; align-items: baseline; gap: var(--s4); }
.fig-n {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(38px, 4.2vw, 60px); line-height: 1; letter-spacing: -0.022em;
  color: var(--vtx-ink); font-variant-numeric: lining-nums tabular-nums;
}
.fig-l { font-size: var(--fs-small); color: var(--fg-subtle); line-height: 1.35; white-space: nowrap; }
.fig-sep { width: 5px; height: 5px; background: var(--vtx-copper); transform: rotate(45deg); align-self: center; flex: none; }

/* ── Marquee — hairline band, serif italic ─────────────────── */

.mq { overflow: hidden; border-bottom: 1px solid var(--rule); padding: clamp(16px, 2vw, 26px) 0; }
.mq-track { display: flex; width: max-content; animation: mq 46s linear infinite; }
.mq-item {
  display: inline-flex; align-items: center; gap: clamp(20px, 3vw, 44px);
  padding-right: clamp(20px, 3vw, 44px);
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: clamp(20px, 2.4vw, 34px); color: var(--vtx-ink-mute); white-space: nowrap;
}
.mq-item::after { content: ""; width: 5px; height: 5px; background: var(--vtx-copper); transform: rotate(45deg); flex: none; }
@keyframes mq { to { transform: translateX(-50%); } }
.mq:hover .mq-track { animation-play-state: paused; }

/* ── Manifesto — asymmetric editorial spread ───────────────── */

.manifesto-grid {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.8fr);
  gap: clamp(40px, 6vw, 110px); align-items: stretch;
}
/* Two-row grid so the plate absorbs the leftover height and the caption stays
   pinned beneath it. Two stacked plates ran 460px past the end of the copy. */
.manifesto-figure { margin: 0; display: grid; grid-template-rows: 1fr auto; min-height: 460px; }
.manifesto-plate { height: 100%; }
.manifesto-statement {
  font-family: var(--font-display); font-size: var(--fs-h2);
  line-height: 1.24; letter-spacing: var(--ls-tight); color: var(--vtx-ink);
  max-width: 24ch; margin-bottom: var(--s6);
}
.notes { display: grid; }
.note {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s5);
  padding: var(--s6) 0; border-top: 1px solid var(--rule);
}
.note:last-child { border-bottom: 1px solid var(--rule); }
.note h4 { margin-bottom: var(--s3); font-size: var(--fs-h4); }
.note p { font-size: var(--fs-small); }

/* ── Seminar index — numbered rows, one shared preview plate ─ */

.sem { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.85fr); gap: clamp(36px, 5vw, 80px); align-items: start; }
.sem-rows { border-top: 1px solid var(--rule); }
.sem-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--s5);
  align-items: baseline; width: 100%; text-align: left;
  padding: clamp(26px, 3vw, 40px) 0; border-bottom: 1px solid var(--rule);
  background: none; border-left: 0; border-right: 0; border-top: 0;
  cursor: pointer; font-family: inherit; color: inherit;
}
.sem-row-body { display: grid; gap: var(--s3); }
.sem-row-title {
  font-family: var(--font-display); font-size: clamp(24px, 2.9vw, 44px);
  line-height: 1.1; letter-spacing: var(--ls-tight); color: var(--vtx-ink);
  transition: transform .6s var(--ease-out), color .4s var(--ease-out);
}
.sem-row-meta { font-size: var(--fs-micro); color: var(--fg-subtle); letter-spacing: 0.02em; }
.sem-row-desc {
  font-size: var(--fs-small); color: var(--fg-muted); max-width: 52ch;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .6s var(--ease-mask), opacity .45s var(--ease-out), margin-top .6s var(--ease-mask);
}
.sem-row .arw { opacity: 0; transform: translateX(-8px); transition: opacity .4s, transform .5s var(--ease-out); color: var(--vtx-copper); }
.sem-row:hover .sem-row-title, .sem-row.on .sem-row-title { transform: translateX(14px); color: var(--vtx-copper); }
.sem-row:hover .sem-row-desc, .sem-row.on .sem-row-desc { max-height: 90px; opacity: 1; margin-top: 2px; }
.sem-row:hover .arw, .sem-row.on .arw { opacity: 1; transform: none; }

.sem-preview { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--vtx-sand); }
.sem-preview img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.07);
  transition: opacity .75s var(--ease-out), transform 1.3s var(--ease-out);
}
.sem-preview img.on { opacity: 1; transform: scale(1); }
.sem-row-plate { display: none; }

/* ── Ledger — term left, definition right, ruled horizontally ─── */

.ledger { border-top: 1px solid var(--rule-light); }
.ledger-row {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(18px, 3.4vw, 64px); align-items: baseline;
  padding-block: clamp(20px, 2.4vw, 32px); border-bottom: 1px solid var(--rule-light);
}
.ledger-k { display: flex; align-items: center; gap: var(--s3); }
.ledger-k .ico { color: var(--vtx-copper-lt); flex: none; }
.ledger-k .num { flex: none; }
.ledger-k h4 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(17px, 1.5vw, 22px); letter-spacing: var(--ls-tight);
  color: var(--fg-on-dark);
}
.ledger-v { font-size: var(--fs-small); line-height: 1.7; margin: 0; }

/* ── Maker — one large plate, editorial column ─────────────── */

.maker { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(36px, 5vw, 90px); align-items: center; }
.maker-plate { aspect-ratio: 4 / 5; }
.maker-name {
  font-family: var(--font-display); font-size: var(--fs-h2);
  line-height: 1.1; margin: var(--s5) 0 var(--s3);
}
.maker-role { color: var(--fg-subtle); font-size: var(--fs-micro); letter-spacing: var(--ls-wide); text-transform: uppercase; }
.maker-bio { margin-top: var(--s6); font-size: var(--fs-lead); line-height: 1.7; font-weight: 300; }
.maker-sig { margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--rule); display: flex; gap: var(--s7); flex-wrap: wrap; }
.maker-fact { display: grid; gap: 4px; }
.maker-fact .v { font-family: var(--font-display); font-size: 21px; }

/* ── Quotes — large serif, on ink ──────────────────────────── */

.quotes { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(32px, 4vw, 72px); }
.quote { display: grid; gap: var(--s5); align-content: start; padding-top: var(--s6); border-top: 1px solid var(--rule-light); }
.quote-mark { font-family: var(--font-display); font-size: 46px; line-height: 0.6; color: var(--vtx-copper-lt); }
.quote-q {
  font-family: var(--font-display); font-size: clamp(19px, 1.9vw, 27px);
  line-height: 1.44; color: var(--fg-on-dark); font-style: italic;
}
.quote-att { display: flex; align-items: baseline; gap: var(--s3); font-size: var(--fs-micro); }
.quote-att .n { color: var(--fg-on-dark); letter-spacing: 0.02em; }
.quote-att .r { color: var(--fg-on-dark-fnt); }

/* ── Closing call ──────────────────────────────────────────── */

.cta { background: var(--vtx-obsidian); color: var(--fg-on-dark); padding-block: clamp(80px, 11vw, 165px); text-align: center; }
.cta h2 {
  font-family: var(--font-display); font-size: var(--fs-display);
  line-height: 1.06; letter-spacing: var(--ls-mega);
  max-width: 17ch; margin: var(--s5) auto 0; color: var(--fg-on-dark);
}
.cta-actions { display: flex; gap: var(--s4); justify-content: center; flex-wrap: wrap; margin-top: var(--s8); }

/* ── Footer ────────────────────────────────────────────────── */

.foot { background: var(--vtx-obsidian); color: var(--fg-on-dark); border-top: 1px solid var(--rule-light); }
.foot-grid {
  display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: var(--s7); padding-block: clamp(56px, 7vw, 96px);
}
.foot-brand { font-family: var(--font-display); font-size: clamp(28px, 3.2vw, 44px); cursor: pointer; line-height: 1; }
.foot-tag { margin-top: var(--s4); color: var(--fg-on-dark-mut); font-size: var(--fs-small); max-width: 34ch; }
.foot h5 {
  font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--fg-on-dark-fnt); margin: 0 0 var(--s5);
}
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s3); }
.foot li, .foot li a { font-size: var(--fs-small); color: var(--fg-on-dark-mut); cursor: pointer; }
.foot li a { transition: color .3s; display: inline-flex; align-items: center; gap: 7px; }
.foot li a:hover { color: var(--vtx-copper-lt); }
.foot-sub { display: flex; border-bottom: 1px solid var(--rule-light-str); margin-top: var(--s5); max-width: 320px; }
.foot-sub input {
  flex: 1; background: none; border: 0; outline: none; padding: 10px 0;
  color: var(--fg-on-dark); font-family: inherit; font-size: var(--fs-small); font-weight: 300;
}
.foot-sub input::placeholder { color: var(--fg-on-dark-fnt); }
.foot-sub button {
  background: none; border: 0; cursor: pointer; color: var(--vtx-copper-lt);
  font-family: var(--font-body); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: var(--ls-label); text-transform: uppercase; padding: 0 0 0 var(--s4);
}
.foot-msg { font-size: var(--fs-micro); color: var(--vtx-copper-lt); margin-top: var(--s3); }
.foot-msg.err { color: #D08A6A; }
.foot-bottom {
  display: flex; justify-content: space-between; gap: var(--s5); flex-wrap: wrap;
  padding-block: var(--s5); border-top: 1px solid var(--rule-light);
  font-size: var(--fs-micro); color: var(--fg-on-dark-fnt);
}

/* ── Page heads ────────────────────────────────────────────── */

.phead { padding-top: clamp(100px, 8.2vw, 128px); padding-bottom: clamp(40px, 5vw, 72px); }
.phead-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 90px); align-items: end; }
.phead h1 { font-size: var(--fs-display); line-height: 1.02; letter-spacing: var(--ls-mega); max-width: 15ch; }
.phead .lede { max-width: 46ch; }
.phead-rule { height: 1px; background: var(--rule); margin-top: clamp(36px, 5vw, 64px); }

/* ── Seminars — tab index and spec sheets ──────────────────── */

.tabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--rule); }
.tab {
  position: relative; background: none; border: 0; cursor: pointer;
  font-family: var(--font-body); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--fg-subtle);
  padding: var(--s5) clamp(14px, 2vw, 28px); display: inline-flex; align-items: center; gap: var(--s3);
  transition: color .35s var(--ease-out);
}
.tab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--vtx-copper); transform: scaleX(0); transition: transform .5s var(--ease-mask);
}
.tab:first-child { padding-left: 0; }
.tab:hover { color: var(--vtx-ink); }
.tab.active { color: var(--vtx-ink); }
.tab.active::after { transform: scaleX(1); }
.tab .ico { color: currentColor; opacity: .7; }

.sheet { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 90px); padding-top: clamp(40px, 5vw, 72px); }
.sheet-lede { font-size: var(--fs-lead); line-height: 1.7; font-weight: 300; color: var(--fg-muted); }
.sheet-tags { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s6); }
.sheet-tag {
  font-size: var(--fs-label); letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--fg-subtle); border: 1px solid var(--rule); padding: 7px 12px;
  transition: border-color .35s, color .35s;
}
.sheet-tag:hover { border-color: var(--vtx-copper); color: var(--vtx-copper); }

/* A seminar reads as a data sheet, not a pricing card. */
.card { border-top: 2px solid var(--vtx-ink); padding-top: var(--s5); }
.card + .card { margin-top: var(--s8); }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); }
.card-title { font-family: var(--font-display); font-size: var(--fs-h3); }
.card-eb { font-size: var(--fs-micro); color: var(--fg-subtle); margin-top: var(--s2); }
.card-price { font-family: var(--font-display); font-size: clamp(28px, 3vw, 42px); line-height: 1; color: var(--vtx-ink); white-space: nowrap; }
.card-price.on-request { font-size: var(--fs-small); font-style: italic; color: var(--fg-subtle); font-family: var(--font-display); }
.card-note { font-size: var(--fs-label); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--fg-subtle); margin-top: 6px; text-align: right; }
.card-desc { font-size: var(--fs-small); color: var(--fg-muted); margin-top: var(--s5); max-width: 60ch; }
.card-spec { display: grid; margin-top: var(--s6); }
.card-spec div { display: flex; justify-content: space-between; gap: var(--s4); padding: 11px 0; border-top: 1px solid var(--rule); font-size: var(--fs-small); }
.card-spec .k { color: var(--fg-subtle); }
.card-spec .v { color: var(--vtx-ink); text-align: right; }
.card-cta { margin-top: var(--s6); }

/* ── Accordion ─────────────────────────────────────────────── */

.acc { border-top: 1px solid var(--rule); }
.acc-item { border-bottom: 1px solid var(--rule); }
.acc-btn {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s5);
  background: none; border: 0; cursor: pointer; text-align: left;
  padding: var(--s5) 0; font-family: var(--font-display); font-size: var(--fs-h4);
  color: var(--vtx-ink); transition: color .3s;
}
.acc-btn:hover { color: var(--vtx-copper); }
.acc-caret { position: relative; width: 13px; height: 13px; flex: none; margin-top: 7px; }
.acc-caret::before, .acc-caret::after {
  content: ""; position: absolute; background: currentColor; transition: transform .45s var(--ease-mask);
}
.acc-caret::before { left: 0; top: 6px; width: 13px; height: 1px; }
.acc-caret::after { left: 6px; top: 0; width: 1px; height: 13px; }
.acc-item.open .acc-caret::after { transform: scaleY(0); }
.acc-item.open .acc-btn { color: var(--vtx-copper); }
.acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease-mask); }
.acc-item.open .acc-body { grid-template-rows: 1fr; }
.acc-body > div { overflow: hidden; }
.acc-body p { font-size: var(--fs-small); max-width: 78ch; padding-bottom: var(--s5); }

/* ── Slideshow — one per seminar, under its sheet ───────────── */
/* The sets mix portrait and landscape, so the frame contains rather than
   crops: filling a fixed box would cut the pieces in half. */

.slideshow { margin-top: var(--s3); }
.slideshow-stage {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--vtx-bone); border: 1px solid var(--rule);
}
.slideshow-stage img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; opacity: 0;
  transition: opacity .8s var(--ease-out);
}
.slideshow-stage img.on { opacity: 1; }

.slideshow-bar {
  display: flex; align-items: center; gap: clamp(16px, 3vw, 40px);
  margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--rule);
}
.slideshow-bar .num { flex: none; }
.slideshow-bar .num .sep { color: var(--vtx-ink-faint); }
.slideshow-track { flex: 1; height: 1px; background: var(--rule); position: relative; }
.slideshow-track i {
  position: absolute; inset: 0; background: var(--vtx-copper);
  transform-origin: left; transition: transform .6s var(--ease-mask);
}
.slideshow-nav { display: flex; flex: none; }
.slideshow-nav button {
  width: 42px; height: 42px; border: 1px solid var(--rule); background: none;
  color: var(--vtx-ink); font-size: 19px; line-height: 1; cursor: pointer;
  transition: background .3s var(--ease-out), border-color .3s var(--ease-out);
}
.slideshow-nav button + button { margin-left: -1px; }
.slideshow-nav button:hover { background: var(--vtx-sand); border-color: var(--rule-strong); }

@media (max-width: 620px) {
  .slideshow-stage { aspect-ratio: 4 / 3; }
  .slideshow-bar { gap: var(--s4); }
}

/* ── Gallery — plate grid, museum captions ─────────────────── */

.plates { columns: 3; column-gap: var(--s5); }
.plates > figure { break-inside: avoid; margin: 0 0 var(--s5); cursor: zoom-in; }
.plates .plate { aspect-ratio: auto; }
.plates .plate > img { transition: transform 1.1s var(--ease-out); }
.plates figure:hover .plate > img { transform: scale(1.045); }
.plates figcaption {
  display: flex; align-items: baseline; gap: var(--s3);
  margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--rule);
  font-size: var(--fs-micro); color: var(--fg-subtle);
  transition: color .35s, border-color .35s;
}
.plates figure:hover figcaption { color: var(--vtx-ink); border-top-color: var(--rule-strong); }

.lightbox {
  position: fixed; inset: 0; z-index: 90; background: rgba(20,18,14,0.96);
  display: flex; align-items: center; justify-content: center; padding: clamp(20px, 5vw, 72px);
  animation: fade .35s ease; cursor: zoom-out;
}
@keyframes fade { from { opacity: 0; } }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: default; animation: lbIn .5s var(--ease-out); }
@keyframes lbIn { from { opacity: 0; transform: scale(.97); } }
.lb-btn {
  position: absolute; background: none; border: 1px solid var(--rule-light-str);
  color: var(--fg-on-dark); width: 46px; height: 46px; cursor: pointer;
  font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: background .3s, border-color .3s;
}
.lb-btn:hover { background: rgba(239,236,229,0.12); border-color: var(--vtx-cream); }
.lb-close { top: clamp(16px, 3vw, 32px); right: clamp(16px, 3vw, 32px); }
.lb-prev { left: clamp(12px, 2.4vw, 30px); top: 50%; transform: translateY(-50%); }
.lb-next { right: clamp(12px, 2.4vw, 30px); top: 50%; transform: translateY(-50%); }
.lb-count {
  position: absolute; bottom: clamp(16px, 3vw, 32px); left: 50%; transform: translateX(-50%);
  color: var(--fg-on-dark-mut); font-size: var(--fs-micro); letter-spacing: var(--ls-wide);
}

/* ── About ─────────────────────────────────────────────────── */

.about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 100px); align-items: start; }
.about-body p { font-size: var(--fs-lead); line-height: 1.75; font-weight: 300; }
.about-body p:first-child { font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.4; color: var(--vtx-ink); }
.about-plate { aspect-ratio: 3 / 4; position: sticky; top: 110px; }

.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--rule); }
.principle {
  padding: clamp(30px, 4vw, 56px) var(--s6) clamp(30px, 4vw, 56px) 0;
  border-right: 1px solid var(--rule); display: grid; gap: var(--s4); align-content: start;
}
.principle:last-child { border-right: 0; }
.principle h3 { font-size: clamp(24px, 2.6vw, 38px); }
.principle p { font-size: var(--fs-small); }

/* ── Contact ───────────────────────────────────────────────── */

.contact-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 100px); align-items: start; }

.form { display: grid; gap: var(--s6); }
.field { display: grid; gap: var(--s3); }
.field label {
  font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--fg-subtle);
}
.field input, .field textarea {
  width: 100%; background: none; border: 0; border-bottom: 1px solid var(--rule-strong);
  padding: 10px 0; font-family: var(--font-body); font-size: var(--fs-body); font-weight: 300;
  color: var(--vtx-ink); outline: none; resize: vertical;
  transition: border-color .35s var(--ease-out);
}
.field input:focus, .field textarea:focus { border-bottom-color: var(--vtx-copper); }
.field input::placeholder, .field textarea::placeholder { color: var(--vtx-ink-faint); }
.form-msg { font-size: var(--fs-small); color: var(--vtx-copper); margin-top: var(--s3); }
.form-msg.err { color: #9C3B1F; }

.info-block { padding: var(--s6) 0; border-top: 1px solid var(--rule); }
.info-block:last-child { border-bottom: 1px solid var(--rule); }
.info-block h4 {
  font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--fg-subtle); margin: 0 0 var(--s4); font-weight: 500;
}
.info-list { display: grid; gap: var(--s3); }
.info-list a, .info-list span { font-size: var(--fs-small); color: var(--fg-muted); display: inline-flex; align-items: center; gap: var(--s3); }
.info-list a { transition: color .3s; }
.info-list a:hover { color: var(--vtx-copper); }
.info-big { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--vtx-ink); line-height: 1.3; }
.transit-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.transit-list li { font-size: var(--fs-micro); color: var(--fg-muted); line-height: 1.6; }
.transit-list li.head { color: var(--vtx-ink); letter-spacing: var(--ls-wide); text-transform: uppercase; font-size: var(--fs-label); margin-top: var(--s3); }
.transit-list li.head:first-child { margin-top: 0; }

.map { margin-top: clamp(40px, 5vw, 72px); border: 1px solid var(--rule); filter: grayscale(1) contrast(0.92); transition: filter .6s var(--ease-out); }
.map:hover { filter: grayscale(0.35) contrast(1); }
.map iframe { display: block; width: 100%; height: clamp(280px, 40vw, 440px); border: 0; }

/* ── Booking modal ─────────────────────────────────────────── */

.modal-back {
  position: fixed; inset: 0; z-index: 80; background: rgba(20,18,14,0.72);
  backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center;
  padding: var(--gutter); animation: fade .3s ease;
}
.modal {
  background: var(--vtx-cream); color: var(--vtx-ink); max-width: 480px; width: 100%;
  padding: clamp(30px, 4vw, 52px); position: relative; animation: modalIn .45s var(--ease-mask);
  border-top: 2px solid var(--vtx-copper);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(16px); } }
.modal h3 { font-size: var(--fs-h2); margin: var(--s4) 0 var(--s4); }
.modal p { font-size: var(--fs-small); }
.modal-close {
  position: absolute; top: 16px; right: 16px; width: 34px; height: 34px;
  background: none; border: 1px solid var(--rule); cursor: pointer; color: var(--vtx-ink);
  font-size: 17px; line-height: 1; transition: background .3s, border-color .3s;
}
.modal-close:hover { background: var(--vtx-sand); border-color: var(--rule-strong); }
.modal .info-list { margin-top: var(--s6); }

/* Short laptop screens: the hero is sized off viewport width, so on a 680px-tall
   display the fact bar fell below the fold. Tighten the vertical rhythm there. */
@media (min-width: 861px) and (max-height: 780px) {
  .hero { padding-top: clamp(74px, 11.5vh, 94px); }
  .hero-title { font-size: clamp(32px, 4.8vw, 70px); }
  .hero-eb { margin-bottom: var(--s4); }
  .hero-lede { margin-top: var(--s4); font-size: 16px; }
  .hero-actions { margin-top: var(--s5); }
  .hero-body { padding-bottom: clamp(24px, 3vw, 40px); }
}

/* ── Responsive ────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .manifesto-grid, .maker, .sheet, .about-grid, .contact-grid { grid-template-columns: 1fr; }
  .manifesto-figure { min-height: 0; }
  .manifesto-plate { height: auto; aspect-ratio: 4 / 3; }
  .about-plate { position: static; }
  .masthead-split { grid-template-columns: 1fr; gap: var(--s5); }
  .phead-grid { grid-template-columns: 1fr; align-items: start; }
  .plates { columns: 2; }
  .sem { grid-template-columns: 1fr; }
  .sem-preview { display: none; }
  .sem-row { grid-template-columns: auto 1fr auto; }
  .sem-row-desc { max-height: none; opacity: 1; margin-top: 2px; }
  .maker-plate { max-width: 460px; }
}

@media (max-width: 860px) {
  .nav-links, .nav-right .btn, .nav-right .lang { display: none; }
  .burger { display: flex; }
  .principles { grid-template-columns: repeat(2, 1fr); }
  .principle { border-right: 0; border-bottom: 1px solid var(--rule); }
  .principle:nth-child(odd) { border-right: 1px solid var(--rule); }
  .quotes { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-meta { grid-template-columns: repeat(2, 1fr); }
  .hero-scroll { display: none; }
}

@media (max-width: 620px) {
  .plates { columns: 1; }
  .principles, .foot-grid { grid-template-columns: 1fr; }
  .principle { border-right: 0 !important; border-bottom: 1px solid var(--rule); padding-right: 0; }
  .principle:last-child { border-bottom: 0; }
  .ledger-row { grid-template-columns: 1fr; gap: var(--s3); }
  .hero-meta { gap: var(--s4); }
  .card-head { flex-direction: column; align-items: flex-start; gap: var(--s3); }
  .card-note { text-align: left; }
  .note { grid-template-columns: 1fr; gap: var(--s3); }
  .sem-row { grid-template-columns: auto 1fr; }
  .sem-row .arw { display: none; }
  /* Without the shared preview plate, each row carries its own. */
  .sem-row-plate { display: block; grid-column: 1 / -1; aspect-ratio: 16 / 10; margin-top: var(--s4); }
}

/* ── Reduced motion ────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  /* Anything that hides itself pending an animation must be shown outright. */
  .mask > i { transform: none !important; }
  .rise { opacity: 1 !important; transform: none !important; }
  .draw { transform: scaleX(1) !important; }
  .plate::after { transform: scaleY(0) !important; }
  .plate > img { transform: none !important; }
  .hero-media img { opacity: 1 !important; transform: none !important; }
  .sem-row-desc { max-height: none !important; opacity: 1 !important; }
  .mq-track { animation: none !important; }
}