/* ============================================================
   PORTFOLIO — Jared Rodriguez
   Generated from the study by wp-starter/build-css.py — edit
   portfolio-structure/styles.css and re-run, never edit this file.
   Palette + type matched to the Webflow build (portfolio-b):
     paper #E8DEDB · ink #111010 · teal #42706E · navy #16252E
     Gabarito 900 display · Inconsolata labels · 4px teal rules
   Motion is deliberately minimal — this page is about section
   balance and density, not effects.
   ============================================================ */

@font-face {
  font-family: "Gabarito";
  src: url("/wp-content/custom/fonts/gabarito-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gabarito";
  src: url("/wp-content/custom/fonts/gabarito-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gabarito";
  src: url("/wp-content/custom/fonts/gabarito-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gabarito";
  src: url("/wp-content/custom/fonts/gabarito-900.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inconsolata";
  src: url("/wp-content/custom/fonts/inconsolata-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inconsolata";
  src: url("/wp-content/custom/fonts/inconsolata-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/wp-content/custom/fonts/fraunces-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #e8dedb;
  --paper-dim: #ded2ce;
  --ink: #111010;
  --ink-2: #222222;
  --ink-soft: rgba(17, 16, 16, 0.6);
  --navy: #16252e;
  --accent: #42706e;          /* teal — on paper */
  --accent-lift: #7fb8b4;     /* lighter teal — on navy */
  --line: rgba(17, 16, 16, 0.2);
  --line-light: rgba(232, 222, 219, 0.22);
  --font-display: "Gabarito", Arial, sans-serif;
  --font-body: "Gabarito", Arial, sans-serif;
  --font-mono: "Inconsolata", Verdana, monospace;
  --pad: clamp(1.25rem, 4vw, 4rem);
  --rule: 4px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
::selection { background: var(--accent); color: var(--paper); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
code {
  font-family: var(--font-mono); font-size: 0.95em;
  background: rgba(66, 112, 110, 0.14); padding: 0.1em 0.35em;
}

/* ---------------- Header ---------------- */
.site-head {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.8rem var(--pad);
  background: rgba(232, 222, 219, 0.93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-head__logo { display: block; line-height: 0; }
.site-head__logo img { width: 40px; height: auto; }
.site-head__nav { display: flex; gap: clamp(0.7rem, 2vw, 1.9rem); flex-wrap: wrap; }
.site-head__nav a {
  font-family: var(--font-mono); font-size: 0.85rem;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-2);
  display: inline-flex; gap: 0.45em;
  padding-bottom: 0.3em;
  position: relative;
}
.site-head__nav a i { font-style: normal; color: var(--accent); }
/* 4px teal underline — lifted straight from the Webflow nav */
.site-head__nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: var(--rule); background: var(--accent);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-head__nav a:hover::after { transform: scaleX(1); transform-origin: left; }
@media (max-width: 880px) {
  /* labels only — the number wrapper must be exempted or it goes too */
  .site-head__nav a .label { display: none; }
  .site-head__nav a .num { display: inline-flex; }
}

/* ---------------- Sections ---------------- */
/* Sections bleed to both viewport edges and pad themselves back in.

   In this study `.sec` already fills the viewport, so `50% - 50vw` is zero and
   both lines are no-ops. Inside a capped container — Blocksy's, at whatever you
   set Maximum Site Width to — the same two lines break the background out to the
   edges while keeping the content on the container's own left edge. Percentages
   resolve against the container, `vw` against the viewport; the difference between
   them is exactly the gap to cover. Needs `overflow-x: clip` on body, above,
   because `50vw` counts the scrollbar and `50%` does not. */
.sec {
  padding-block: clamp(3.5rem, 9vw, 7rem);
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50% + var(--pad));
}
.sec--dark { background: var(--navy); color: var(--paper); }
.sec-head {
  display: flex; align-items: baseline; gap: 1rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.7rem; margin-bottom: 1.5rem;
}
.sec--dark .sec-head, .sec-head--light { border-color: var(--line-light); }
.sec-head__num,
.sec-head__label {
  font-family: var(--font-mono); font-size: 1rem;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.sec-head__num { color: var(--accent); }
.sec--dark .sec-head__num { color: var(--accent-lift); }
.sec-head__count {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 0.85rem;
  color: var(--ink-soft);
}
.sec--dark .sec-head__count { color: rgba(232, 222, 219, 0.5); }
.lede {
  font-size: clamp(1.2rem, 2.2vw, 1.75rem);
  line-height: 1.25; font-weight: 500;
  max-width: 46ch;
}
.sub-head {
  font-family: var(--font-mono); font-size: 0.95rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-2);
  border-top: var(--rule) solid var(--accent);
  padding-top: 0.8rem; margin-top: clamp(3rem, 7vw, 5rem);
}

/* ---------------- Direction cards ---------------- */
.dcard {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding: clamp(2rem, 5vw, 3.5rem) 0;
  border-bottom: 1px solid var(--line-light);
  align-items: start;
}
.dcard:last-child { border-bottom: none; }
.dcard__idx {
  font-family: var(--font-mono); font-size: 0.9rem;
  letter-spacing: 0.08em; color: var(--accent-lift);
}
.dcard__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 4.2vw, 3.6rem);
  line-height: 0.85; text-transform: uppercase;
  margin: 0.6rem 0 0.9rem;
  color: var(--paper);
}
.dcard__role {
  font-family: var(--font-mono); font-size: 0.85rem;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--accent-lift); margin-bottom: 1rem;
}
.dcard__desc { color: rgba(232, 222, 219, 0.75); max-width: 42ch; }
/* Project-card credits, rendered by [jr_projects] on the paper sections.
   Its dark-section twin is .dcard__credits below — same idea, different ground. */
.wcard__credits {
  font-family: var(--font-mono); font-size: 0.8rem; line-height: 1.6;
  color: var(--ink-soft);
  margin-top: 0.6rem; padding-top: 0.55rem;
  border-top: 1px solid var(--line);
  max-width: 42ch;
}
.dcard__credits {
  font-family: var(--font-mono); font-size: 0.85rem; line-height: 1.65;
  color: rgba(232, 222, 219, 0.55);
  margin-top: 1rem; padding-top: 0.8rem;
  border-top: 1px solid var(--line-light);
  max-width: 42ch;
}
.strip { display: grid; gap: 0.75rem; }
.strip--3 { grid-template-columns: repeat(3, 1fr); }
.strip--micro { grid-template-columns: repeat(6, 1fr); gap: 0.4rem; margin-top: 0.75rem; }
.strip--4 { grid-template-columns: repeat(4, 1fr); }
.strip--5 { grid-template-columns: repeat(5, 1fr); }
.strip__sub {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; opacity: 0.6; margin: 1.6rem 0 0.6rem;
}
.strip--micro img { border: 1px solid var(--line-light); }
.strip figure { display: flex; flex-direction: column; gap: 0.4rem; }
.strip figure img { border: 1px solid var(--line-light); width: 100%; }
.strip figcaption,
.strip__cap {
  font-family: var(--font-mono); font-size: 0.76rem;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: rgba(232, 222, 219, 0.5);
}
.strip__cap { text-transform: none; letter-spacing: 0; margin-top: 0.6rem; }
@media (max-width: 820px) {
  .dcard { grid-template-columns: 1fr; }
  .strip--micro { grid-template-columns: repeat(3, 1fr); }
  .strip--4 { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------- Series cards (light context) ---------------- */
.scard {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding: clamp(2rem, 5vw, 3.5rem) 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.scard:last-child { border-bottom: none; }
.scard__idx {
  font-family: var(--font-mono); font-size: 0.9rem;
  letter-spacing: 0.08em; color: var(--accent);
}
.scard__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 4.2vw, 3.6rem);
  line-height: 0.85; text-transform: uppercase;
  margin: 0.6rem 0 0.9rem;
}
.scard__role {
  font-family: var(--font-mono); font-size: 0.85rem;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--accent); margin-bottom: 1rem;
}
.scard__desc { color: var(--ink-2); max-width: 44ch; }
.scard__credits {
  font-family: var(--font-mono); font-size: 0.85rem; line-height: 1.65;
  color: var(--ink-soft);
  margin-top: 1rem; padding-top: 0.8rem;
  border-top: 1px solid var(--line);
  max-width: 44ch;
}

.book-cover { border: 1px solid var(--line); background: var(--paper-dim); }
.book-cover img { width: 100%; }
.book-cover figcaption,
.pod-grid figcaption {
  font-family: var(--font-mono); font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
  padding: 0.5em 0.7em;
}
.book-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem; margin-top: 0.75rem;
}
.book-grid img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: contain;
  background: #fff;
  border: 1px solid var(--line);
  padding: 0.35rem;
}
.pod-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(0.8rem, 2vw, 1.5rem); }
.pod-grid figure { border: 1px solid var(--line); background: var(--paper-dim); }
.pod-grid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
@media (max-width: 820px) {
  .scard { grid-template-columns: 1fr; }
  .book-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 520px) {
  .book-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------------- Design & build grid ---------------- */
.grid-work {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 3vw, 2.2rem); margin-top: 2rem;
}
.wcard__shot {
  border: 1px solid var(--line);
  aspect-ratio: 16 / 10;
  position: relative; overflow: hidden;
  background: var(--paper-dim);
}
.wcard__url {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  font-family: var(--font-mono); font-size: 0.72rem;
  color: var(--ink-2);
  background: var(--paper-dim);
  border-bottom: 1px solid var(--line);
  padding: 0.3em 0.6em;
}
.wcard__shot img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top;
  padding-top: 1.5em;
}
.wcard__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  text-transform: uppercase; line-height: 1.05;
  margin-top: 0.9rem;
}
.wcard__meta {
  font-family: var(--font-mono); font-size: 0.82rem;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--ink-soft); margin-top: 0.3rem;
}
/* newsroom work at larger scale */
.grid-work--major { grid-template-columns: repeat(2, 1fr); }
/* demoted row — client work kept, but visibly secondary to the newsroom material */
.grid-work--minor { grid-template-columns: repeat(4, 1fr); margin-top: 1.5rem; }
.grid-work--minor .wcard__title { font-size: clamp(0.9rem, 1.2vw, 1.05rem); }
.grid-work--minor .wcard__meta { font-size: 0.76rem; }
@media (max-width: 880px) {
  .grid-work { grid-template-columns: repeat(2, 1fr); }
  .grid-work--major { grid-template-columns: repeat(2, 1fr); }
  .grid-work--minor { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .grid-work { grid-template-columns: 1fr; }
  .grid-work--major { grid-template-columns: 1fr; }
  .grid-work--minor { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------- Selected illustration ---------------- */
.selected {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.8rem, 2vw, 1.5rem); margin-top: 2rem;
}
.sel { border: 1px solid var(--line); background: var(--paper-dim); }
.sel--wide { grid-column: span 2; }
.sel img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.sel figcaption {
  padding: 0.6rem 0.75rem;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 0.15rem;
}
.sel figcaption b { font-size: 0.9rem; font-weight: 600; }
.sel figcaption span {
  font-family: var(--font-mono); font-size: 0.76rem;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-soft);
}
@media (max-width: 880px) { .selected { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) {
  .selected { grid-template-columns: 1fr; }
  .sel--wide { grid-column: span 1; }
}

/* ---------------- Filter chips ---------------- */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0 2rem; }
.chip {
  font-family: var(--font-mono); font-size: 0.85rem;
  text-transform: uppercase; letter-spacing: 0.07em;
  background: transparent; color: var(--ink);
  border: 1px solid var(--line);
  padding: 0.45em 0.85em; cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.chip b { font-weight: 400; color: var(--ink-soft); margin-left: 0.4em; }
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip:hover b { color: var(--accent); }
.chip.is-on { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.chip.is-on b { color: rgba(232, 222, 219, 0.72); }

/* ---------------- Dense archive ---------------- */
.archive { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.6rem; }
.arc {
  border: 1px solid var(--line);
  background: var(--paper-dim);
  position: relative; overflow: hidden;
}
.arc img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.arc figcaption {
  position: absolute; inset: auto 0 0 0;
  font-family: var(--font-mono); font-size: 0.7rem; line-height: 1.3;
  background: var(--navy); color: var(--paper);
  border-top: var(--rule) solid var(--accent);
  padding: 0.35em 0.5em;
  transform: translateY(101%);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.arc:hover figcaption { transform: translateY(0); }
.arc.is-hidden { display: none; }
.arc-count {
  font-family: var(--font-mono); font-size: 0.85rem;
  color: var(--ink-soft); margin-top: 1rem;
}
@media (max-width: 1100px) { .archive { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 760px)  { .archive { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 460px)  { .archive { grid-template-columns: repeat(3, 1fr); } }

/* ---------------- Contact ---------------- */
.contact__big {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.8rem, 10vw, 8rem);
  line-height: 0.75; text-transform: uppercase;
  margin: 2rem 0 1.2rem;
}
.contact__email {
  font-family: var(--font-mono);
  font-size: clamp(0.9rem, 2vw, 1.15rem);
  color: var(--accent-lift);
  border-top: var(--rule) solid var(--accent-lift);
  padding-top: 0.9rem;
  display: inline-block;
}

/* ---------------- Lightbox ----------------
   Native <dialog>: the browser gives us focus trapping, Escape-to-close
   and an inert background for free. */
.lb {
  border: 0; padding: 0;
  max-width: 100vw; max-height: 100vh;
  width: 100%; height: 100%;
  background: transparent;
  color: var(--paper);
  overflow: hidden;
}
.lb::backdrop { background: rgba(17, 16, 16, 0.94); }
.lb__fig {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1rem;
  padding: clamp(2.5rem, 6vw, 4rem) clamp(3rem, 8vw, 6rem);
}
.lb__img {
  max-width: 100%; max-height: calc(100% - 4rem);
  object-fit: contain;
  background: var(--navy);
}
.lb__cap {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.4rem 1rem;
  text-align: center;
}
.lb__cap b {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  text-transform: uppercase; letter-spacing: -0.005em;
}
.lb__cap span,
.lb__cap a {
  font-family: var(--font-mono); font-size: 0.82rem;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: rgba(243, 238, 228, 0.6);
}
.lb__cap a { color: var(--accent-lift); text-decoration: underline; text-underline-offset: 3px; }
.lb__cap a[hidden] { display: none; }
.lb__btn {
  position: absolute; z-index: 2;
  background: transparent; border: 1px solid var(--line-light);
  color: var(--paper);
  font-family: var(--font-mono); font-size: 1.1rem; line-height: 1;
  width: 2.6rem; height: 2.6rem;
  display: grid; place-items: center;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.lb__btn:hover { background: var(--accent); border-color: var(--accent); }
.lb__close { top: 1rem; right: 1rem; }
.lb__prev  { left: 1rem;  top: 50%; transform: translateY(-50%); }
.lb__next  { right: 1rem; top: 50%; transform: translateY(-50%); }
.lb__count {
  position: absolute; top: 1rem; left: 1rem; z-index: 2;
  font-family: var(--font-mono); font-size: 0.78rem;
  color: rgba(243, 238, 228, 0.55);
}
/* thumbnails become obviously clickable */
.arc a, .sel a, .book-grid a, .pod-grid a { display: block; cursor: zoom-in; }
@media (max-width: 620px) {
  .lb__fig { padding: 3.5rem 0.75rem 5rem; }
  .lb__prev { left: 0.5rem; top: auto; bottom: 1rem; transform: none; }
  .lb__next { right: 0.5rem; top: auto; bottom: 1rem; transform: none; }
}

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

/* ============================================================
   NUMBERING MARK + HERO A          (see BUILD.md §13)
   ============================================================ */
:root{
  --num-font:"Fraunces",serif;
  --mark-size:2.9em; --num-size:1.7em; --num-nudge:0em; --num-opsz:14;
  --solid-hole:66%; --notch-angle:135deg;
}

.num{display:inline-flex;align-items:center;justify-content:center;flex:none}
.mark{position:relative;width:var(--mark-size);height:var(--mark-size);
  display:inline-flex;align-items:center;justify-content:center}
.mark .mk{position:absolute;inset:0;width:100%;height:100%;fill:var(--ink);
  transform-origin:50% 50%;
  transition:transform .55s cubic-bezier(.22,1,.36,1), fill .25s ease}
.mark b{position:relative;font-family:var(--num-font);font-weight:700;
  font-size:var(--num-size);line-height:1;
  font-variation-settings:"opsz" var(--num-opsz);
  transform:translateY(var(--num-nudge));transition:color .25s ease}

/* filled variant — section heads */
.mark--solid::after{content:"";position:absolute;left:50%;top:50%;
  width:var(--solid-hole);height:var(--solid-hole);transform:translate(-50%,-50%);
  background:var(--ink);border-radius:50%}
.mark--solid b{z-index:2;color:var(--paper)}

.sec--dark .mark .mk{fill:var(--paper)}
.sec--dark .mark b{color:var(--paper)}
.sec--dark .mark--solid::after{background:var(--paper)}
.sec--dark .mark--solid b{color:var(--navy)}

.sec-head .num{font-size:.9rem;margin-right:.2rem}

/* ---- constellation nav ---- */
.site-head__nav{align-items:center;gap:.55rem}
.site-head__nav a{align-items:center;gap:0;padding-bottom:0}
.site-head__nav a::after{display:none}
.site-head__nav .num{font-size:.42rem;transition:font-size .4s cubic-bezier(.22,1,.36,1)}
.site-head__nav .mark b{color:var(--ink-2)}
.site-head__nav .label{max-width:0;opacity:0;overflow:hidden;white-space:nowrap;
  transition:max-width .5s cubic-bezier(.22,1,.36,1), opacity .3s ease,
             margin-left .5s cubic-bezier(.22,1,.36,1)}
body.past .site-head__nav{gap:1.4rem}
body.past .site-head__nav .num{font-size:.58rem}
body.past .site-head__nav .label{max-width:11rem;opacity:1;margin-left:.5rem}

/* Hover, gated to devices that actually hover.

   A touch device has no pointer-leave, so a tapped link keeps :hover until you
   tap something else — the mark stays rotated and teal for the rest of the
   session. `(hover: hover)` is the fix: phones never match it, so they never
   enter the state they can't leave.

   clockwise: the notch sweeps up over the top, 360 − 135 = 225° */
@media (hover: hover) and (pointer: fine) {
  .site-head__nav a:hover .mk,
  .tracks a:hover .mk{transform:rotate(calc(360deg - var(--notch-angle)));fill:var(--accent)}
  .site-head__nav a:hover .mark b,
  .tracks a:hover .mark b,
  .site-head__nav a:hover .label,
  .tracks a:hover .lbl{color:var(--accent)}
}

/* Current section — the spare state the two devices always had room for.
   Hover rotates and tints the ring; current fills it. Distinct on purpose, so
   that on a desktop the two can be on at once and still read as two things. */
.site-head__nav .mark::after{content:"";position:absolute;left:50%;top:50%;
  width:var(--solid-hole);height:var(--solid-hole);transform:translate(-50%,-50%);
  background:var(--accent);border-radius:50%;opacity:0;
  transition:opacity .3s ease}
.site-head__nav .mark b{z-index:2}
.site-head__nav a.is-current .mark::after{opacity:1}
.site-head__nav a.is-current .mark b{color:var(--paper)}
.site-head__nav a.is-current .mk{fill:var(--accent)}
.site-head__nav a.is-current .label{color:var(--accent)}

/* ---- hero A ---- */
.hero{padding:0 var(--pad) clamp(2rem,5vw,3rem)}
.hero__frame{min-height:calc(100svh - 11rem);display:grid;
  grid-template-columns:1.4fr 1fr;grid-template-rows:1fr auto auto;
  column-gap:clamp(2rem,6vw,5rem);row-gap:clamp(1.5rem,4vw,2.5rem);
  padding-top:clamp(3rem,12vh,7rem)}
.hero__lower{grid-column:1;grid-row:2;align-self:start;margin-top:0}
.hero__kicker{font-family:var(--font-mono);font-size:.85rem;text-transform:uppercase;
  letter-spacing:.08em;color:var(--ink-2);
  border-top:1px solid var(--line);padding-top:.6rem;margin-bottom:.7rem}
.hero__title{font-family:var(--font-display);font-weight:900;
  font-size:clamp(2.6rem,11.5vw,9.5rem);line-height:.74;text-transform:uppercase;  margin-block-end:0;}
.hero__title span{display:block}
/*.tracks{grid-column:2;grid-row:2;align-self:stretch;display:flex;flex-direction:column}*/
/*.tracks a{display:flex;align-items:center;gap:.8rem;padding:.6rem 0;
  border-bottom:1px solid var(--line)}*/
.tracks {
  grid-column: 2;
  grid-row: 2;
  align-self: stretch;

  display: flex;
  flex-direction: column;
}
.tracks a {
  flex: 1;
  display: flex;
  align-items: center;
  gap:.8rem;

  border-bottom:1px solid var(--line)
}
.tracks a:first-child{border-top:1px solid var(--line)}
.tracks .num{font-size:.55rem}
.tracks .lbl{font-family:var(--font-mono);font-size:.85rem;text-transform:uppercase;
  letter-spacing:.09em;transition:color .25s ease}
.hero__foot{grid-column:1/-1;grid-row:3;display:flex;justify-content:space-between;
  gap:1rem;border-top:var(--rule) solid var(--accent);padding-top:.9rem;
  font-family:var(--font-mono);font-size:.8rem;text-transform:uppercase;
  letter-spacing:.08em;color:var(--ink-2)}

@media (prefers-reduced-motion:reduce){
  .mark .mk{transition:fill .25s ease}
  .site-head__nav .num,.site-head__nav .label{transition:none}
}
@media (max-width:880px){
  .site-head__nav .label{display:none}
  body.past .site-head__nav{gap:.55rem}
}
@media (max-width:820px){
  .hero__frame{grid-template-columns:1fr;grid-template-rows:auto auto auto;
    min-height:0;row-gap:2.5rem;padding-top:2rem}
  .hero__lower{grid-column:1;grid-row:1}
  .tracks{grid-column:1;grid-row:2}
  .hero__foot{grid-column:1;grid-row:3}
}