/* ============================================================
   Sections
   ============================================================ */

/* ── Hero ─────────────────────────────────────────────────── */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  padding-top: 8rem;
  padding-bottom: var(--space-6);
  overflow: hidden;
  isolation: isolate;
}

.hero__inner { flex: 1; display: flex; flex-direction: column; justify-content: center; }

.hero__grid {
  display: grid;
  gap: var(--space-5);
  align-items: center;
}

.hero__copy { min-width: 0; }

/* ── Portrait ─────────────────────────────────────────────── */

/* A cut-out composited straight onto the ledger field — no frame, no card.
   The rules run behind him, which is what makes it read as editorial rather
   than as a profile picture. */
.hero__portrait {
  position: relative;
  justify-self: center;
  width: min(260px, 68vw);
  margin: 0;
  /* From the real trimmed source (705x949). Reserves the box so the image
     landing cannot shift the layout: CLS stays at zero. */
  aspect-ratio: 705 / 949;
}

.hero__portrait img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
}

/* The plinth: a hairline baseline and a brass wash he stands on, so the
   cut-out is anchored to the page instead of floating in it. */
.hero__portrait-plinth {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 118%;
  height: 62%;
  border-bottom: 1px solid var(--accent);
  background:
    radial-gradient(60% 100% at 50% 100%, var(--accent-tint) 0%, transparent 72%);
  -webkit-mask-image: linear-gradient(to top, #000 55%, transparent);
  mask-image: linear-gradient(to top, #000 55%, transparent);
}

@media (min-width: 640px) {
  .hero__portrait { width: min(360px, 42vw); }
}

@media (min-width: 1024px) {
  .hero__grid {
    /* Copy leads; the portrait is the counterweight, never the headline. */
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
    gap: var(--space-7);
    align-items: end;
  }

  /* Capped at 420px: the trimmed source is 705px wide, so this still renders
     at ~1.7x density. Any larger and the upscale becomes visible. */
  .hero__portrait {
    width: min(420px, 100%);
    justify-self: end;
  }
}

/* Ledger field — ruled paper, drawn entirely in CSS. No image, no canvas,
   no WebGL. Decorative and cheap. */
.hero__field {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.hero__rules {
  position: absolute;
  inset: -10% 0;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--border) 0,
    var(--border) 1px,
    transparent 1px,
    transparent 5rem
  );
  opacity: 0.5;
  /* Fades out toward the edges so it reads as texture, not a table. */
  -webkit-mask-image: radial-gradient(120% 80% at 50% 45%, #000 20%, transparent 78%);
  mask-image: radial-gradient(120% 80% at 50% 45%, #000 20%, transparent 78%);
  transform: translateY(var(--field-y, 0));
  will-change: transform;
}

.hero__columns {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to right,
    var(--border) 0,
    var(--border) 1px,
    transparent 1px,
    transparent 12.5%
  );
  opacity: 0.35;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 60%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 60%, transparent);
}

/* A single brass bloom, low and to the right. The only "glow" in the project. */
.hero__glow {
  position: absolute;
  right: -10%;
  bottom: -20%;
  width: min(70vw, 44rem);
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--accent-tint) 0%, transparent 65%);
  opacity: 0.9;
}

.hero__eyebrow { margin-bottom: var(--space-5); }

.hero__title {
  font-size: var(--text-display);
  line-height: 0.98;
  margin-bottom: var(--space-5);
}

/* Each line is its own overflow-clipped box, so the line beneath slides up
   from behind a hard edge. Per-line, never per-character: per-char on a serif
   at 6rem janks and shreds the accessibility tree. */
.hero__line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
  margin-bottom: -0.04em;
}

.hero__line-inner {
  display: block;
}

/* Driven by CSS rather than a JS-toggled class, deliberately.
   Fill mode is `backwards`, not `forwards`: the resting state carries no
   transform, so the headline is readable whenever the animation is absent or
   finished. It reads as hidden only while actually mid-flight. Hiding text and
   relying on a script to bring it back is how a hero silently goes blank. */
.hero__line-inner {
  animation: line-rise 900ms var(--ease) backwards;
}

.hero__line:nth-child(2) .hero__line-inner {
  animation-delay: 110ms;
}

@keyframes line-rise {
  from { transform: translateY(110%); }
  to   { transform: translateY(0); }
}

.hero__em {
  font-style: italic;
  color: var(--accent-strong);
}

/* Tighter than the 68ch body measure. At 22px the default runs ~996px — four
   fifths of the container, which reads as a wall rather than a statement. A
   ~54ch line lets the hero breathe and keeps the eye on the headline. */
.hero__lead {
  max-width: 54ch;
  margin-bottom: var(--space-6);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.hero__availability {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: var(--space-5);
  font-size: var(--text-micro);
  letter-spacing: 0.06em;
  color: var(--text-subtle);
}

.hero__pulse {
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

.hero__pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 2.6s var(--ease) infinite;
}

@keyframes pulse {
  0%   { transform: scale(1);   opacity: 0.7; }
  70%  { transform: scale(3.5); opacity: 0; }
  100% { transform: scale(3.5); opacity: 0; }
}

/* Credibility strip */
.hero__facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin-top: var(--space-7);
  border-top: 1px solid var(--border);
}

.hero__fact {
  padding: var(--space-4) var(--space-3) var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}

.hero__fact:nth-child(odd) { border-right: 1px solid var(--border); padding-right: var(--space-4); }
.hero__fact:nth-child(even) { padding-left: var(--space-4); }

.hero__fact-value {
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: 0.25rem;
}

.hero__fact-label {
  font-size: var(--text-micro);
  color: var(--text-subtle);
  line-height: 1.4;
}

.hero__scroll {
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-subtle);
  transition: color var(--dur-micro) var(--ease);
}

.hero__scroll:hover { color: var(--accent-strong); }

.hero__scroll-label {
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.hero__scroll-line {
  width: 1px;
  height: 3rem;
  background: linear-gradient(to bottom, var(--border-strong), transparent);
  position: relative;
  overflow: hidden;
}

.hero__scroll-line::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 40%;
  background: var(--accent);
  animation: scroll-hint 2.4s var(--ease) infinite;
}

@keyframes scroll-hint {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(300%); }
}

@media (min-width: 640px) {
  .hero__facts { grid-template-columns: repeat(4, 1fr); }

  .hero__fact,
  .hero__fact:nth-child(odd),
  .hero__fact:nth-child(even) {
    border-right: 1px solid var(--border);
    border-bottom: 0;
    padding: var(--space-4) var(--space-4) var(--space-3);
  }

  .hero__fact:first-child { padding-left: 0; }
  .hero__fact:last-child  { border-right: 0; }
}

@media (min-width: 900px) {
  .hero { padding-top: 9rem; padding-bottom: var(--space-8); }
  .hero__scroll { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__line-inner,
  .hero__pulse::after,
  .hero__scroll-line::after { animation: none; }
}