/* ============================================================
   MR JULIAN ASHWORTH — Consultant Cardiothoracic Surgeon
   Palette from the operating theatre: scrub green is the optical
   complement of blood — it rests the surgeon's eye. Oxblood is
   spent only where the incision motifs live.
   ============================================================ */

:root {
  --porcelain: #F1F2EE;
  --porcelain-deep: #E7E9E3;
  --ink: #171E1A;
  --theatre: #0E1913;
  --theatre-deep: #070D0A;
  --bone: #EDEBE4;
  --sage: #8FA096;
  --oxblood: #6E222C;
  --oxblood-bright: #8C2B37;
  --brass: #A9895A;
  --brass-bright: #C9AC79;

  --display: 'Marcellus', serif;
  --body: 'Hanken Grotesk', sans-serif;
  --mono: 'Fragment Mono', monospace;

  --gutter: clamp(24px, 5vw, 88px);
  --nav-h: 72px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
html:has(body[data-flat="off"]) { scroll-behavior: auto; }

body {
  font-family: var(--body);
  font-weight: 300;
  background: var(--porcelain);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--oxblood); color: var(--bone); }

img { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

:focus-visible { outline: 2px solid var(--oxblood-bright); outline-offset: 4px; }

.mono {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  font-weight: 400;
}

.eyebrow { color: var(--oxblood-bright); margin-bottom: 28px; }
.section--dark .eyebrow { color: var(--brass); }

/* reveal primitives (JS adds .is-in) */
[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
[data-reveal].is-in { opacity: 1; transform: none; }
body[data-flat="on"] [data-reveal] { opacity: 1; transform: none; transition: none; }

/* ===== NAV ===== */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
  z-index: 40;
  color: var(--ink);
  transition: color 0.5s ease;
}
.nav::after {
  content: '';
  position: absolute;
  left: var(--gutter); right: var(--gutter); bottom: 0;
  height: 1px;
  background: currentColor;
  opacity: 0.14;
}
.nav--on-dark { color: var(--bone); }
.nav__mark { font-family: var(--display); font-size: 17px; letter-spacing: 0.42em; }
.nav__links { display: flex; gap: clamp(18px, 3vw, 44px); }
.nav__links a {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.72;
  transition: opacity 0.3s ease;
  position: relative;
}
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -6px;
  width: 100%; height: 1px;
  background: var(--oxblood-bright);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav--on-dark .nav__links a::after { background: var(--brass); }
.nav__links a:hover { opacity: 1; }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__gmc { opacity: 0.5; }

/* ===== HERO — THE INCISION ===== */
.hero { position: relative; }
.hero__stage {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.hero__under {
  position: absolute;
  inset: 0;
  background: var(--theatre);
  color: var(--bone);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 var(--gutter);
}
.under__eyebrow { color: var(--brass); margin-bottom: 34px; }
.under__word {
  font-family: var(--display);
  font-size: clamp(64px, 13vw, 190px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0.12em;
}
.under__note {
  margin-top: 40px;
  max-width: 560px;
  font-size: clamp(15px, 1.3vw, 18px);
  color: var(--sage);
}
.under__note em { color: var(--bone); font-style: italic; }

.hero__panel {
  position: absolute;
  inset: 0;
  background: var(--porcelain);
  will-change: transform;
}
.hero__panel--left  { clip-path: inset(0 50% 0 0); }
.hero__panel--right { clip-path: inset(0 0 0 50%); }

.hero__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 var(--gutter);
}
.hero__inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('images/engraving.jpg') center 40% / auto 82% no-repeat;
  opacity: 0.08;
  mix-blend-mode: multiply;
  pointer-events: none;
  -webkit-mask: radial-gradient(ellipse 42% 48% at center 46%, #000 35%, transparent 72%);
  mask: radial-gradient(ellipse 42% 48% at center 46%, #000 35%, transparent 72%);
}
.hero__inner > * { position: relative; }
.hero__eyebrow { color: rgba(23, 30, 26, 0.5); margin-bottom: clamp(28px, 5vh, 56px); }
.hero__pre {
  font-family: var(--display);
  font-size: clamp(16px, 2vw, 26px);
  letter-spacing: 0.56em;
  text-indent: 0.56em;
  margin-bottom: 10px;
  color: var(--oxblood);
}
.hero__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(64px, 12.5vw, 210px);
  line-height: 0.95;
  letter-spacing: 0.06em;
  text-indent: 0.06em;
}
.hero__sub {
  margin-top: clamp(20px, 4vh, 40px);
  font-size: clamp(14px, 1.2vw, 17px);
  font-weight: 400;
  letter-spacing: 0.04em;
}
.hero__aff { margin-top: 14px; color: var(--sage); }

.hero__seam {
  position: absolute;
  left: 50%; top: 0;
  width: 1px; height: 100%;
  background: var(--oxblood-bright);
  transform: translateX(-0.5px) scaleY(0);
  transform-origin: top center;
  z-index: 5;
}

.hero__hint {
  position: absolute;
  bottom: 34px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  opacity: 0.55;
  z-index: 6;
}
.hint__line {
  width: 1px; height: 44px;
  background: var(--oxblood-bright);
  animation: hintPulse 2.4s ease-in-out infinite;
  transform-origin: top;
}
@keyframes hintPulse {
  0%, 100% { transform: scaleY(0.35); opacity: 0.4; }
  50% { transform: scaleY(1); opacity: 1; }
}
body[data-flat="on"] .hint__line { animation: none; }

/* ===== shared section shells ===== */
.section--dark { background: var(--theatre); color: var(--bone); }

/* ===== ABOUT ===== */
.about { padding: clamp(110px, 16vh, 180px) var(--gutter); }
.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(48px, 7vw, 120px);
  max-width: 1360px;
  margin: 0 auto;
  align-items: start;
}
.about__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(38px, 4.6vw, 74px);
  line-height: 1.08;
  margin-bottom: 40px;
}
.about__lede {
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 400;
  line-height: 1.65;
  margin-bottom: 26px;
}
.about__body { color: var(--sage); max-width: 56ch; margin-bottom: 54px; font-size: clamp(15px, 1.2vw, 17px); }
.about__creds { list-style: none; border-top: 1px solid rgba(237, 235, 228, 0.16); }
.about__creds li {
  display: flex;
  align-items: baseline;
  gap: 26px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(237, 235, 228, 0.16);
  font-size: 15px;
  font-weight: 400;
}
.about__creds .mono { color: var(--brass); }
.about__portrait { position: relative; }
.about__portrait img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 1px solid rgba(169, 137, 90, 0.35);
  padding: 10px;
}
.about__portrait figcaption { margin-top: 16px; color: var(--sage); opacity: 0.8; }

/* ===== THE RECORD ===== */
.record { background: var(--porcelain); position: relative; }
.record__stage {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
  padding: var(--nav-h) var(--gutter) 60px;
  max-width: 1440px;
  margin: 0 auto;
}
.record__head { position: absolute; top: calc(var(--nav-h) + 46px); left: var(--gutter); }
.record__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(30px, 3vw, 48px);
  line-height: 1.1;
  margin-top: 24px;
}

.record__year {
  font-family: var(--display);
  font-size: clamp(110px, 15vw, 260px);
  line-height: 1;
  color: var(--ink);
  display: flex;
  align-self: center;
  justify-self: start;
  margin-top: clamp(40px, 9vh, 110px);
}
.reel {
  display: block;
  height: 1em;
  overflow: hidden;
}
.reel__strip { display: block; transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1); }
.reel__strip span { display: block; height: 1em; }

.record__list { list-style: none; align-self: center; max-width: 560px; }
.record__entry {
  padding: 13px 0 13px 30px;
  border-left: 1px solid rgba(23, 30, 26, 0.15);
  opacity: 0.26;
  transition: opacity 0.45s ease, border-color 0.45s ease;
}
.record__entry.is-active { opacity: 1; border-left-color: var(--oxblood-bright); }
.record__entry .entry__year { color: var(--oxblood-bright); display: none; }
.record__entry h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(17px, 1.55vw, 22px);
  line-height: 1.25;
}
.record__entry p {
  color: rgba(23, 30, 26, 0.62);
  font-size: 14px;
  line-height: 1.5;
  max-width: 46ch;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  transition: max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease, margin-top 0.5s ease;
}
.record__entry.is-active p { max-height: 70px; opacity: 1; margin-top: 6px; }
body[data-flat="on"] .record__entry p { max-height: none; opacity: 1; margin-top: 6px; }

.record__ruler {
  position: absolute;
  left: var(--gutter); right: var(--gutter); bottom: 46px;
  height: 1px;
  background: rgba(23, 30, 26, 0.18);
}
.ruler__fill {
  position: absolute;
  left: 0; top: -1px;
  height: 3px; width: 100%;
  background: var(--oxblood-bright);
  transform: scaleX(0);
  transform-origin: left;
}

/* ===== IMAGING — SCAN PLANE ===== */
.imaging { padding: clamp(110px, 16vh, 180px) var(--gutter) clamp(140px, 20vh, 220px); position: relative; }
.imaging__head { max-width: 1360px; margin: 0 auto clamp(90px, 14vh, 160px); }
.imaging__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 80px);
  line-height: 1.05;
}
.imaging__lede { margin-top: 26px; max-width: 52ch; color: var(--sage); font-size: clamp(15px, 1.25vw, 17px); }

.plate {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(36px, 5vw, 90px);
  align-items: end;
  max-width: 1360px;
  margin: 0 auto clamp(120px, 18vh, 220px);
}
.plate--flip { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
.plate--flip .plate__media { order: 2; }
.plate--flip .plate__cap { order: 1; text-align: right; }
.plate--flip .plate__cap p { margin-left: auto; }

.plate__media { position: relative; overflow: hidden; }
.plate__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.plate--flip .plate__media img { aspect-ratio: 1 / 1; }
.plate__xray {
  filter: grayscale(1) invert(0.92) contrast(1.15) brightness(0.82) sepia(0.35) hue-rotate(110deg) saturate(2.2);
  opacity: 0.85;
}
.plate__photo {
  position: absolute;
  inset: 0;
  will-change: clip-path;
}

.plate__cap { padding-bottom: 6px; }
.plate__code { color: var(--brass); display: block; margin-bottom: 18px; }
.plate__cap h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(24px, 2.4vw, 38px);
  line-height: 1.15;
  margin-bottom: 14px;
}
.plate__cap p { color: var(--sage); font-size: 15px; max-width: 38ch; margin-bottom: 22px; }
.plate__meta { color: rgba(237, 235, 228, 0.45); display: block; font-size: 10px; }

.plane {
  position: fixed;
  left: 0; right: 0;
  top: 50%;
  z-index: 30;
  height: 0;
  border-top: 1px solid rgba(140, 43, 55, 0.85);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.plane.is-on { opacity: 1; }
.plane__label {
  position: absolute;
  right: var(--gutter);
  top: -22px;
  color: var(--oxblood-bright);
  font-size: 10px;
}
.plane::before {
  content: '';
  position: absolute;
  left: var(--gutter);
  top: -4px;
  width: 7px; height: 7px;
  border: 1px solid rgba(140, 43, 55, 0.85);
  transform: rotate(45deg);
}

/* ===== THE PRACTICE ===== */
.practice { background: var(--porcelain); padding: clamp(110px, 16vh, 180px) var(--gutter); }
.practice__head { max-width: 1360px; margin: 0 auto clamp(70px, 10vh, 120px); }
.practice__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 80px);
  line-height: 1.08;
}
.practice__lede { margin-top: 26px; max-width: 54ch; color: rgba(23, 30, 26, 0.65); font-size: clamp(15px, 1.25vw, 17px); }

.practice__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(48px, 6vw, 110px);
  max-width: 1360px;
  margin: 0 auto;
  align-items: start;
}
.practice__list { list-style: none; border-top: 1px solid rgba(23, 30, 26, 0.18); }
.op {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: baseline;
  padding: clamp(26px, 3.4vh, 38px) 8px;
  border-bottom: 1px solid rgba(23, 30, 26, 0.18);
  cursor: default;
  transition: background 0.35s ease, padding-left 0.35s ease;
}
.op:hover, .op:focus-visible, .op.is-active { background: rgba(23, 30, 26, 0.035); padding-left: 18px; }
.op__no { color: var(--oxblood-bright); }
.op__body h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(20px, 2vw, 30px);
  line-height: 1.2;
}
.op__detail {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease;
}
.op:hover .op__detail, .op:focus-visible .op__detail, .op.is-active .op__detail { max-height: 140px; opacity: 1; }
body[data-flat="on"] .op__detail { max-height: none; opacity: 1; }
.op__detail p { color: rgba(23, 30, 26, 0.6); font-size: 14px; max-width: 52ch; margin-top: 10px; }
.op__meta { display: block; color: rgba(23, 30, 26, 0.45); font-size: 10px; margin-top: 12px; }

.practice__pane {
  position: sticky;
  top: calc(var(--nav-h) + 40px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid rgba(23, 30, 26, 0.2);
  padding: 10px;
}
.pane__img {
  position: absolute;
  inset: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.pane__img--active { opacity: 1; }
.pane__label {
  position: absolute;
  left: 22px; bottom: 20px;
  color: var(--bone);
  z-index: 2;
  text-shadow: 0 1px 8px rgba(7, 13, 10, 0.8);
}

/* ===== THE LOG ===== */
.log { padding: clamp(110px, 15vh, 170px) var(--gutter); text-align: center; }
.log .eyebrow { margin-bottom: clamp(56px, 8vh, 90px); }
.log__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 60px);
  max-width: 1280px;
  margin: 0 auto clamp(56px, 8vh, 90px);
}
.stat__num {
  display: block;
  font-family: var(--display);
  font-size: clamp(44px, 5.4vw, 92px);
  line-height: 1;
  color: var(--bone);
  font-variant-numeric: tabular-nums;
  margin-bottom: 18px;
}
.stat__label { color: var(--sage); }
.log__note { color: rgba(237, 235, 228, 0.35); }

/* ===== A WORD ===== */
.word {
  background: var(--porcelain);
  padding: clamp(110px, 16vh, 190px) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(48px, 7vw, 120px);
  align-items: center;
  max-width: 1360px;
  margin: 0 auto;
}
.word__hands img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.word__hands figcaption { margin-top: 14px; color: rgba(23, 30, 26, 0.45); }
.word__quote p {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 54px);
  line-height: 1.25;
}
.word__quote cite { display: block; margin-top: 34px; font-style: normal; color: var(--oxblood-bright); }

/* ===== FINALE — THE LAMPS ===== */
.finale { position: relative; background: var(--theatre-deep); }
.finale__stage {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lamp {
  position: absolute;
  width: 42vmin; height: 42vmin;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 172, 121, 0.32) 0%, rgba(201, 172, 121, 0.08) 42%, transparent 70%);
  filter: blur(6px);
  mix-blend-mode: screen;
  will-change: transform, opacity;
  pointer-events: none;
}
.lamp--1 { top: -6%;  left: 4%; }
.lamp--2 { top: 12%;  right: -4%; }
.lamp--3 { bottom: -10%; left: 18%; }
.lamp--4 { bottom: 4%;  right: 14%; }
.lamp--5 { top: 40%; left: 42%; opacity: 0.5; }

.finale__content {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 0 var(--gutter);
}
.finale__eyebrow { color: var(--sage); margin-bottom: 44px; }

.plaque {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: clamp(36px, 5vh, 56px) clamp(44px, 6vw, 96px);
  border: 1px solid rgba(169, 137, 90, 0.55);
  box-shadow: inset 0 0 0 5px var(--theatre-deep), inset 0 0 0 6px rgba(169, 137, 90, 0.3);
  background: linear-gradient(160deg, rgba(169, 137, 90, 0.12), rgba(169, 137, 90, 0.02) 55%, rgba(169, 137, 90, 0.1));
  position: relative;
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease;
}
.plaque::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 55%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(201, 172, 121, 0.18), transparent);
  transform: skewX(-18deg);
  transition: left 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.plaque:hover { transform: translateY(-3px); }
.plaque:hover::after { left: 130%; }
.plaque__name {
  font-family: var(--display);
  font-size: clamp(24px, 3vw, 44px);
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  color: var(--brass-bright);
}
.plaque__title { font-family: var(--mono); font-size: 10px; letter-spacing: 0.3em; color: var(--sage); }
.plaque__rule { width: 64px; height: 1px; background: rgba(169, 137, 90, 0.5); margin: 14px 0; }
.plaque__cta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.34em;
  color: var(--bone);
}

.finale__contact { margin-top: 46px; font-style: normal; color: rgba(237, 235, 228, 0.45); line-height: 2.1; }

.footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 26px var(--gutter) 30px;
  border-top: 1px solid rgba(237, 235, 228, 0.1);
  color: rgba(237, 235, 228, 0.35);
}

/* ============================================================
   STATIC PATH — body[data-flat="on"] strips the scroll machinery.
   JS resolves ?flat, prefers-reduced-motion, AND viewports <961px
   to this attribute, so these rules serve all three.
   ============================================================ */
body[data-flat="on"] .hero__stage {
  height: auto;
  min-height: 100svh;
  overflow: visible;
  display: flex;
  flex-direction: column;
}
body[data-flat="on"] .hero__panel { position: relative; clip-path: none; transform: none !important; }
body[data-flat="on"] .hero__panel--right { display: none; }
body[data-flat="on"] .hero__inner { position: relative; min-height: 100svh; }
body[data-flat="on"] .hero__under {
  position: relative;
  inset: auto;
  order: 2;
  padding: 130px var(--gutter);
}
body[data-flat="on"] .hero__seam,
body[data-flat="on"] .hero__hint { display: none; }

body[data-flat="on"] .record__stage { min-height: 0; padding-top: 140px; padding-bottom: 90px; align-items: start; }
body[data-flat="on"] .record__head { position: static; margin-bottom: 48px; }
body[data-flat="on"] .record__year,
body[data-flat="on"] .record__ruler { display: none; }
body[data-flat="on"] .record__entry { opacity: 1; }
body[data-flat="on"] .record__entry .entry__year { display: inline-block; margin-bottom: 6px; }

body[data-flat="on"] .plane { display: none; }
body[data-flat="on"] .plate__xray { display: none; }
body[data-flat="on"] .plate__photo { position: relative; clip-path: none !important; }

body[data-flat="on"] .finale__stage { height: auto; padding: 150px 0; }
body[data-flat="on"] .lamp { display: none; }
body[data-flat="on"] .finale__stage::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 90vmin; height: 90vmin;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 172, 121, 0.2) 0%, transparent 65%);
}
body[data-flat="on"] .finale__content { opacity: 1 !important; transform: none !important; }

/* ============================================================
   RESPONSIVE — layout-only changes below 960px (the machinery
   is already stripped by data-flat, which JS sets at this width).
   ============================================================ */
@media (max-width: 960px) {
  .nav__links { display: none; }

  .about__grid, .practice__grid, .word { grid-template-columns: 1fr; }
  .about__portrait { max-width: 440px; }

  .record__stage { grid-template-columns: 1fr; }

  .plate, .plate--flip { grid-template-columns: 1fr; }
  .plate--flip .plate__media, .plate--flip .plate__cap { order: 0; }
  .plate--flip .plate__cap { text-align: left; }
  .plate--flip .plate__cap p { margin-left: 0; }

  .practice__pane { display: none; }
  .op { grid-template-columns: 1fr; gap: 8px; }
  .op__detail { max-height: none; opacity: 1; }

  .log__grid { grid-template-columns: repeat(2, 1fr); }

  .finale__stage { padding: 130px 0; }
  .footer { flex-direction: column; gap: 8px; }
}

/* dev: ?at=<y> jump — snap all transitions for first-paint capture */
body.is-jump *, body.is-jump *::before, body.is-jump *::after { transition: none !important; animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .hint__line { animation: none; }
}