/* ==========================================================================
   sections — hero, statement, work tunnel, materials, practice, contact
   ========================================================================== */

/* ── hero: the drawing gives way to the building ───────────────────────── */

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

/* What was drawn: the paper, the grid, the dimensions and the name. Static —
   it never repaints. */
.hero__plate {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--paper);
}

/* What was built: sits ON TOP, clipped to a circle at the pointer.
   clip-path rather than a mask on the plate — clipping is composited, whereas
   animating a full-viewport radial mask repaints that layer every frame. The
   hard edge is also truer to the idea: this is a detail callout, not a
   flashlight. --lr starts at 0, so nothing shows until the pointer moves. */
.hero__built {
  position: absolute;
  inset: 0;
  z-index: 2;

  --lx: 50%;
  --ly: 46%;
  --lr: 0px;

  clip-path: circle(var(--lr) at var(--lx) var(--ly));
  will-change: clip-path;
}

.hero__built video {
  width: 100%; height: 100%;
  filter: saturate(0.86) contrast(1.05);
}

.hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--line-faint) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-faint) 1px, transparent 1px),
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px, 320px 320px, 320px 320px;
  opacity: 0.85;
}

.hero__draft {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  color: var(--clay-dim);
}

.hero__dim {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: var(--clay);
}

.hero__type {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: grid;
  align-content: center;
  gap: clamp(0.6rem, 1.6vh, 1.1rem);
  padding: clamp(6rem, 14vh, 9rem) var(--gut) clamp(7rem, 16vh, 10rem);
  max-width: 1600px;
  margin-inline: auto;
}

.hero__title {
  font-family: var(--f-display);
  font-size: var(--t-hero);
  font-weight: 500;
  font-variation-settings: "wdth" 78, "opsz" 96;
  line-height: 0.82;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.hero__deva {
  font-family: var(--f-deva);
  font-size: clamp(1.1rem, 2.4vw, 2.2rem);
  color: var(--clay);
  line-height: 1;
  margin-top: 0.2em;
}

.hero__sub {
  max-width: 40ch;
  margin-top: clamp(0.8rem, 2.4vh, 1.6rem);
  font-size: var(--t-lead);
  line-height: 1.45;
  color: var(--ink-2);
}

/* the lens ring — drawn over both layers, so the hole reads as an instrument */
.hero__lens {
  position: absolute;
  top: 0; left: 0;
  z-index: 3;
  /* Diameter must equal 2 × the open clip radius in scenes.js, so the ring
     lands on the edge of the reveal rather than floating inside it. */
  width: 380px; height: 380px;
  margin: -190px 0 0 -190px;
  border: 1px solid var(--clay);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.hero__lens::after {
  content: "";
  position: absolute;
  inset: -13px;
  border: 1px dashed var(--clay-dim);
  border-radius: 50%;
}

.hero__foot {
  position: absolute;
  left: var(--gut); right: var(--gut); bottom: clamp(1.2rem, 3.5vh, 2.2rem);
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  pointer-events: none;
}

.hero__foot a { pointer-events: auto; }

.hero__hint,
.scrollcue {
  font-family: var(--f-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.hero__hint { transition: opacity 0.8s var(--ease); }
.hero__hint.is-done { opacity: 0; }

.scrollcue { display: inline-flex; align-items: center; gap: 0.8em; white-space: nowrap; }

.scrollcue i {
  display: block;
  width: clamp(40px, 6vw, 84px);
  height: 1px;
  background: var(--ink-4);
  position: relative;
  overflow: hidden;
}

.scrollcue i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--clay);
  transform-origin: left;
  animation: cue 2.6s var(--ease) infinite;
}

@keyframes cue {
  0%        { transform: scaleX(0); transform-origin: left; }
  45%       { transform: scaleX(1); transform-origin: left; }
  55%       { transform: scaleX(1); transform-origin: right; }
  100%      { transform: scaleX(0); transform-origin: right; }
}

/* ── statement ─────────────────────────────────────────────────────────── */

.statement {
  padding: var(--stack) var(--gut);
  max-width: 1600px;
  margin-inline: auto;
  display: grid;
  gap: clamp(2rem, 6vh, 4rem);
}

.statement__lead {
  max-width: 26ch;
  font-family: var(--f-display);
  font-size: clamp(1.7rem, 4.4vw, 4.2rem);
  font-weight: 400;
  font-variation-settings: "wdth" 88;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.statement__lead .wd { display: inline-block; opacity: 0.15; will-change: opacity; }

.statement__aside {
  justify-self: end;
  max-width: 34ch;
  display: grid;
  gap: 0.8rem;
  padding-top: clamp(1rem, 3vh, 2rem);
  border-top: 1px solid var(--line);
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--ink-2);
}

.statement__sig {
  font-family: var(--f-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ── work: the tunnel ──────────────────────────────────────────────────── */

.work { position: relative; }

.work__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding: 0 var(--gut) clamp(1.5rem, 4vh, 3rem);
}

.work__head .sectionmark { flex: 1 1 320px; }

.work__note {
  font-family: var(--f-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.work__pin {
  position: relative;
  height: 100svh;
  overflow: hidden;
  perspective: var(--persp);
  perspective-origin: 50% 46%;
  background: var(--paper-2);
}

.tunnel { position: absolute; inset: 0; transform-style: preserve-3d; }

.plate {
  position: absolute;
  top: 46%; left: 50%;
  width: clamp(230px, 29vw, 440px);
  will-change: transform, opacity;
}

.plate__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--paper-3);
  box-shadow: 0 30px 70px -40px rgba(20, 19, 15, 0.55);
}

.plate__frame video { width: 100%; height: 100%; }

.plate__meta {
  display: grid;
  gap: 0.2rem;
  padding-top: 0.9rem;
}

.plate__no {
  font-family: var(--f-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.18em;
  color: var(--clay);
}

.plate__meta h3 {
  font-family: var(--f-display);
  font-size: var(--t-h3);
  font-weight: 500;
  font-variation-settings: "wdth" 90;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.plate__meta p {
  font-family: var(--f-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.work__counter {
  position: absolute;
  right: var(--gut); bottom: clamp(1.2rem, 3.5vh, 2.2rem);
  display: flex;
  align-items: baseline;
  gap: 0.4em;
  font-family: var(--f-mono);
  letter-spacing: 0.1em;
}

.work__counter b {
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  font-weight: 400;
  color: var(--clay);
  font-variant-numeric: tabular-nums;
}

.work__counter i { font-style: normal; font-size: var(--t-meta); color: var(--ink-3); }

/* ── materials ─────────────────────────────────────────────────────────── */

.materials {
  padding: var(--stack) var(--gut);
  max-width: 1600px;
  margin-inline: auto;
  display: grid;
  gap: clamp(1.5rem, 4vh, 2.5rem);
}

.materials__title {
  font-family: var(--f-display);
  font-size: var(--t-h2);
  font-weight: 500;
  font-variation-settings: "wdth" 85;
  line-height: 0.95;
  letter-spacing: -0.035em;
  max-width: 18ch;
}

.mats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1.2rem, 3vw, 3rem);
  margin-top: clamp(1rem, 3vh, 2rem);
}

.mat { display: grid; gap: 1rem; }

.mat__frame {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--paper-3);
}

.mat__frame video {
  width: 100%; height: 100%;
  transform: scale(1.04);
  transition: transform 1.4s var(--ease);
}

.mat:hover .mat__frame video { transform: scale(1); }

.mat figcaption { display: grid; gap: 0.45rem; }

.mat__no {
  font-family: var(--f-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clay);
}

.mat h3 {
  font-family: var(--f-display);
  font-size: var(--t-h3);
  font-weight: 500;
  font-variation-settings: "wdth" 90;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.mat p { max-width: 34ch; color: var(--ink-2); line-height: 1.55; }

/* ── practice ──────────────────────────────────────────────────────────── */

.practice {
  padding: var(--stack) var(--gut);
  max-width: 1600px;
  margin-inline: auto;
  display: grid;
  gap: clamp(1.5rem, 4vh, 3rem);
}

.practice__grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(0, 1.7fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

@media (max-width: 860px) { .practice__grid { grid-template-columns: 1fr; } }

.figures { display: grid; gap: 0; margin: 0; }

.figures > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(0.7rem, 2vh, 1.1rem) 0;
  border-bottom: 1px solid var(--line);
}

.figures dt {
  font-family: var(--f-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.figures dd { margin: 0; }

.figures b {
  font-family: var(--f-display);
  font-size: clamp(1.8rem, 3.4vw, 3rem);
  font-weight: 500;
  font-variation-settings: "wdth" 82;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.practice__body { display: grid; gap: 1.2rem; }

.practice__body p { max-width: 62ch; font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); }

.practice__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin-top: 0.6rem;
}

.practice__list li {
  padding: 0.45em 1em;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-family: var(--f-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ── contact ───────────────────────────────────────────────────────────── */

.contact {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--on-dark);
  padding: var(--stack) var(--gut) clamp(1.5rem, 4vh, 2.5rem);
}

.contact__media { position: absolute; inset: -8%; z-index: 0; will-change: transform; }

.contact__media video {
  width: 100%; height: 100%;
  filter: saturate(0.5) brightness(0.55) contrast(1.1);
}

.contact__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--ink) 0%, rgba(20, 19, 15, 0.7) 40%, rgba(20, 19, 15, 0.86) 100%);
}

.contact__body {
  position: relative;
  z-index: 1;
  max-width: 1600px;
  margin-inline: auto;
  display: grid;
  gap: clamp(1.2rem, 3.5vh, 2.4rem);
}

.contact__title {
  font-family: var(--f-display);
  font-size: var(--t-h2);
  font-weight: 500;
  font-variation-settings: "wdth" 80;
  line-height: 0.9;
  letter-spacing: -0.04em;
}

.contact__rows { display: grid; margin-top: clamp(1rem, 3vh, 2rem); }

.row {
  display: grid;
  grid-template-columns: minmax(90px, 12%) 1fr auto;
  align-items: baseline;
  gap: 1.5rem;
  padding: clamp(0.9rem, 2.4vh, 1.4rem) 0;
  border-top: 1px solid rgba(244, 241, 234, 0.18);
  transition: color 0.4s var(--ease);
}

/* Label and value slide on hover; the row's own box does not. Padding would
   animate layout, and translating the whole row would carry the trailing
   arrow past the section's overflow clip. */
.row__k,
.row__v { transition: transform 0.5s var(--ease); }

a.row:hover .row__k,
a.row:hover .row__v { transform: translateX(0.8rem); }

.row:last-child { border-bottom: 1px solid rgba(244, 241, 234, 0.18); }

.row__k {
  font-family: var(--f-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-dark-2);
}

.row__v {
  font-family: var(--f-display);
  font-size: clamp(1.1rem, 2.2vw, 2rem);
  font-weight: 400;
  font-variation-settings: "wdth" 90;
  letter-spacing: -0.02em;
}

.row__a { color: var(--clay); font-size: 1.2rem; transition: transform 0.5s var(--ease); }

a.row:hover .row__a { transform: translate(4px, -4px); }

.footer {
  position: relative;
  z-index: 1;
  max-width: 1600px;
  margin: clamp(3rem, 9vh, 6rem) auto 0;
  padding-top: clamp(1.2rem, 3vh, 2rem);
  border-top: 1px solid rgba(244, 241, 234, 0.18);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.08em;
  color: var(--on-dark-2);
}

.footer span[lang="hi"] { font-family: var(--f-deva); color: var(--clay); }

/* ── narrow viewports ──────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .statement__aside { justify-self: start; }
  .work__pin { height: auto; padding: 2rem 0; overflow: visible; perspective: none; }
  .tunnel { position: static; display: grid; gap: 2.5rem; padding: 0 var(--gut); }
  .plate { position: static; width: 100%; transform: none !important; opacity: 1 !important; }
  .work__counter { display: none; }
  .row { grid-template-columns: 1fr auto; }
  .row__k { grid-column: 1 / -1; }
}