/* ============================================================
   v3.css, "elim" independent site (elim.work-inspired)
   Editorial, white, generous whitespace, image-led.
   Does NOT touch styles.css / index.html / work.html.
   ============================================================ */

:root {
  --ink: #191919;
  --cap: #A0A0A0;
  --bg: #FFFFFF;
  --line: #E4E4E4;

  --edge: clamp(20px, 4vw, 56px);   /* page side padding */
  --content-left: 25%;              /* logo / body text alignment (col 4 of 12) */
  --head-h: 90px;

  --f-ui: "Inter", system-ui, sans-serif;
  --f-cap: "Spectral", Georgia, serif;
}

* { box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-ui);
  font-weight: 400;
  line-height: 1.5;
  padding-top: var(--head-h);
}

img, video { max-width: 100%; height: auto; display: block; }

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

/* ---------- fixed header (three zones) ---------- */
.v3head {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--head-h);
  display: grid;
  grid-template-columns: var(--content-left) 1fr;
  align-items: center;
  padding: 0 var(--edge);
  background: var(--bg);
  z-index: 60;
}
/* while the full-screen opener is under it, the header lets the footage through */
.v3head.is-over {
  background: transparent;
  color: #fff;
}
.v3head.is-over a { color: #fff; }
.v3head__label {
  grid-column: 1;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
#projLabel { cursor: pointer; }
.v3head__main {
  grid-column: 2;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}
.v3head__identity {
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-width: 0;
}
.v3head__logo {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .2px;
  line-height: 1;
  white-space: nowrap;
}
.v3head__role {
  color: var(--cap);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .04em;
  white-space: nowrap;
}
.v3head.is-over .v3head__role { color: rgba(255, 255, 255, .72); }
.v3head__nav {
  display: flex;
  gap: 22px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2px;
}
.v3head__nav a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.v3head__nav a.is-active {
  opacity: 1;
  font-weight: 700;
  text-decoration-thickness: 2px;
}

/* headliner focus: pointing at any one item in the bar pulls it forward and
   pushes everything else back, out of focus. The blur sits on the siblings
   rather than the hovered item, so the bar reads as one row with a single
   thing in focus instead of a row of separate hover states. */
.v3head__label,
.v3head__logo,
.v3head__role,
.v3head__nav a {
  transition: filter .3s ease, opacity .3s ease;
}
.v3head:hover .v3head__label,
.v3head:hover .v3head__logo,
.v3head:hover .v3head__role,
.v3head:hover .v3head__nav a {
  filter: blur(1.2px);
  opacity: .4;
}
.v3head .v3head__label:hover,
.v3head .v3head__logo:hover,
.v3head .v3head__identity:hover .v3head__role,
.v3head .v3head__nav a:hover {
  filter: none;
  opacity: 1;
}
/* a touch screen has no hover, so nothing should ever be left blurred there */
@media (hover: none) {
  .v3head:hover .v3head__label,
  .v3head:hover .v3head__logo,
  .v3head:hover .v3head__role,
  .v3head:hover .v3head__nav a { filter: none; opacity: 1; }
}

/* ============================================================
   HOME (v3.html)
   ============================================================ */

/* ---- feed: 12-col grid, hand-placed staggered items ---- */
.feed {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(16px, 2.4vw, 34px);
  row-gap: clamp(48px, 6vw, 88px);
  align-items: start;
  padding: 24px var(--edge) 40px;
}

/* text index of every project, a floating panel pinned just under the header,
   toggled by the "projects" label. Fixed so it appears wherever you've scrolled. */
.idx {
  position: fixed;
  top: var(--head-h);
  left: 0;
  z-index: 55;
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 18px var(--edge) 26px;
  background: var(--bg);
  font-size: 13px;
  font-weight: 500;
}
.idx.is-open { display: flex; }
.idx a {
  width: fit-content;
  transition: opacity .2s;
}
.idx a:hover { opacity: .5; }

.feed__item {
  display: block;
  transition: filter .42s ease, opacity .42s ease;
}
.feed__media {
  overflow: hidden;
  background: #f3f3f3;
}
.feed:not(.is-filtered) .feed__item:not(.feed__item--portrait) .feed__media {
  aspect-ratio: 16 / 9;
  max-height: calc(100svh - var(--head-h));
}
.feed__media img,
.feed__media video { width: 100%; height: 100%; display: block; object-fit: cover; }
.feed__cap {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .2px;
  line-height: 1.5;
}
.feed__cap-title { display: block; }
.feed__position {
  display: none;
  margin-bottom: 12px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.feed__cap-cat {
  display: block;
  color: var(--cap);
  font-size: clamp(9px, .8vw, 11px);
  text-transform: uppercase;
  white-space: nowrap;
}
.feed__cap-role {
  display: block;
  max-width: none;
  margin-top: 2px;
  color: var(--cap);
  font-size: clamp(9px, .8vw, 11px);
  font-weight: 400;
  white-space: nowrap;
}
/* one-line description, only used by the lead entry */
.feed__cap-note {
  display: block;
  max-width: none;
  color: var(--cap);
  font-size: clamp(10px, 1vw, 13px);
  white-space: nowrap;
}
.feed__cap-year { display: block; color: var(--cap); }

/* THRESHLD carries a second reading, the store built from the same idea. The label
   sits above the portrait clip and lines up with its right edge, so it names the
   other half of the project without covering any footage. */
.feed__tag {
  margin: 0 0 8px;
  color: var(--cap);
  font-size: clamp(9px, .8vw, 11px);
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1.4;
  text-align: right;
  text-transform: uppercase;
}

/* deterministic placement: every project owns a separate row, alternating across
   the grid without ever becoming a side-by-side pair. */
/* n=0: the lead entry opens full-viewport and full-bleed, with the fixed
   headliner floating over the footage as in the previous composition. */
.feed__item[data-n="0"] {
  grid-column: 1 / -1;
  grid-row: 1;
  position: relative;
  margin: calc((var(--head-h) + 24px) * -1) calc(var(--edge) * -1) 0;
  height: 100svh;
}
.feed:not(.is-filtered) .feed__item[data-n="0"] .feed__media {
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
}
.feed__item[data-n="0"] .feed__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* soft top scrim keeps the overlaid headliner legible */
.feed__item[data-n="0"] .feed__media::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(var(--head-h) + 50px);
  background: linear-gradient(to bottom, rgba(0, 0, 0, .42), rgba(0, 0, 0, 0));
  pointer-events: none;
}
/* the caption sits on the footage, so it needs a scrim to stay readable */
.feed__item[data-n="0"] .feed__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
  pointer-events: none;
}
.feed__item[data-n="0"] .feed__cap {
  position: absolute;
  left: var(--edge);
  bottom: clamp(30px, 5vh, 58px);
  z-index: 2;
  margin: 0;
  color: #fff;
}
.feed__item[data-n="0"] .feed__cap-title {
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 10px;
}
.feed__item[data-n="0"] .feed__cap-cat,
.feed__item[data-n="0"] .feed__cap-note,
.feed__item[data-n="0"] .feed__cap-role,
.feed__item[data-n="0"] .feed__cap-year { color: rgba(255, 255, 255, .8); }

/* there is nothing visible below a full-screen opener, say so */
.feed__scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(24px, 4vh, 40px);
  z-index: 2;
  width: 1px;
  height: 46px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, .85));
  animation: scrollcue 2.2s ease-in-out infinite;
}
@keyframes scrollcue {
  0%, 100% { transform: scaleY(.45); transform-origin: top; opacity: .45; }
  50%      { transform: scaleY(1);   transform-origin: top; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .feed__scroll { animation: none; }
}

.feed__item[data-n="1"]  { grid-column: 4 / 13; grid-row: 2;  margin-top: 130px; }
.feed__item[data-n="2"]  { grid-column: 1 / 8;  grid-row: 3;  margin-top: 70px; }
.feed__item[data-n="3"]  { grid-column: 8 / 13; grid-row: 4;  margin-top: 90px; }
.feed__item[data-n="4"]  { grid-column: 1 / 8;  grid-row: 5;  margin-top: 80px; }
.feed__item[data-n="6"]  { grid-column: 1 / 7;  grid-row: 6;  margin-top: 90px; }
.feed__item[data-n="10"] { grid-column: 7 / 13; grid-row: 6;  margin-top: 90px; }
.feed__item[data-n="8"]  { grid-column: 9 / 12; grid-row: 7;  margin-top: 80px; }
/* Orienteering gets a full-width row so the landscape image reads at portfolio scale. */
.feed__item[data-n="7"]  {
  grid-column: 1 / -1;
  grid-row: 8;
  position: relative;
  margin-top: 90px;
}
.feed:not(.is-filtered) .feed__item[data-n="7"] .feed__media {
  height: calc(100svh - var(--head-h) - 24px);
  max-height: none;
  aspect-ratio: auto;
}
.feed:not(.is-filtered) .feed__item[data-n="7"] .feed__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 44%;
  background: linear-gradient(to top, rgba(0, 0, 0, .52), rgba(0, 0, 0, 0));
  pointer-events: none;
}
.feed:not(.is-filtered) .feed__item[data-n="7"] .feed__cap {
  position: absolute;
  left: clamp(20px, 3vw, 44px);
  bottom: clamp(24px, 4vh, 42px);
  z-index: 2;
  margin: 0;
  color: #fff;
}
.feed:not(.is-filtered) .feed__item[data-n="7"] .feed__cap-title {
  margin-bottom: 8px;
  font-size: clamp(22px, 2.8vw, 38px);
  font-weight: 700;
  line-height: 1.05;
}
.feed:not(.is-filtered) .feed__item[data-n="7"] .feed__cap-cat,
.feed:not(.is-filtered) .feed__item[data-n="7"] .feed__cap-role,
.feed:not(.is-filtered) .feed__item[data-n="7"] .feed__cap-year {
  color: rgba(255, 255, 255, .82);
}
/* Portrait clips stay vertical regardless of their position in the edited sequence. */
.feed__item--portrait .feed__media { aspect-ratio: 9 / 16; }
.feed__item--portrait .feed__media video { width: 100%; height: 100%; object-fit: cover; }
.feed__item[data-n="5"]  { grid-column: 2 / 5;  grid-row: 9;  margin-top: 80px; }
.feed__item[data-n="9"]  { grid-column: 9 / 13; grid-row: 10; margin-top: 90px; }
.feed__item[data-n="11"] { grid-column: 4 / 11; grid-row: 11; margin-top: 110px; }

@media (min-width: 821px) {
  /* The portrait clip anchors the left edge and fills the complete viewing area
     below the fixed headliner, while preserving its native 9:16 proportion. */
  .feed:not(.is-filtered) .feed__item--threshld-primary {
    justify-self: start;
    width: min(calc((100svh - var(--head-h) - 24px) * .495), 100%);
  }
  .feed:not(.is-filtered) .feed__item--threshld-primary .feed__media {
    width: 100%;
    height: calc((100svh - var(--head-h) - 24px) * .88);
    aspect-ratio: 9 / 16;
  }
}

/* presentation focus: only the current wheel stop stays crisp. */
.feed.is-slide-mode:not(.is-filtered) .feed__item {
  filter: blur(7px);
  opacity: .18;
}
.feed.is-slide-mode:not(.is-filtered) .feed__item.is-slide-active {
  filter: none;
  opacity: 1;
}

/* arch/tech filter: s-p.studio-style index, show ONLY the active group as a
   uniform grid of equal image cards, with the name + category overlaid on each
   image. The staggered placement is dropped while filtered. */
.feed.is-filtered {
  display: flex;
  flex-wrap: nowrap;                       /* one single row */
  justify-content: center;                 /* horizontally centered */
  align-items: center;                     /* vertically centered */
  gap: clamp(12px, 1.4vw, 22px);
  min-height: calc(100vh - var(--head-h)); /* fill the viewport below the header */
  padding: 24px var(--edge);
}
.feed.is-filtered .feed__item { display: none; }
.feed.is-filtered .idx { display: none; }
.feed.is-filtered .feed__item.is-match {
  display: block;
  flex: 1 1 0;
  min-width: 0;
  max-width: 280px;
  margin: 0;
}
.feed.is-filtered .feed__media {
  aspect-ratio: 4 / 3;
}
/* Tech follows the Arch index: one row of equal landscape cards. */
.feed.is-filtered[data-group="tech"] .feed__item[data-n="3"]  { display: none; }
/* one THRESHLD card is enough in the index, the flagship-store card stays on
   the home collage, where both still read as separate pieces of the project */
.feed.is-filtered[data-group="tech"] .feed__item[data-n="10"] { display: none; }
.feed.is-filtered .feed__media img,
.feed.is-filtered .feed__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.feed.is-filtered .feed__cap {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 500;
}
/* the one-line description belongs to the collage, not the tight filtered row */
.feed.is-filtered .feed__cap-note { display: none; }
/* Tech index stays image-led: the project name is the only caption. */
.feed.is-filtered[data-group="tech"] .feed__position,
.feed.is-filtered[data-group="tech"] .feed__cap-cat,
.feed.is-filtered[data-group="tech"] .feed__cap-note,
.feed.is-filtered[data-group="tech"] .feed__cap-role,
.feed.is-filtered[data-group="tech"] .feed__cap-year { display: none; }
/* the opener's full-screen treatment is home-only, here it is just another card */
.feed.is-filtered .feed__item[data-n="0"] { height: auto; margin: 0; }
.feed.is-filtered .feed__item[data-n="0"] .feed__media { height: auto; }
/* the header/caption scrims belong to the full-screen opener, not to a small card */
.feed.is-filtered .feed__item[data-n="0"] .feed__media::before,
.feed.is-filtered .feed__item[data-n="0"] .feed__media::after { display: none; }
.feed.is-filtered .feed__item[data-n="0"] .feed__cap { position: static; color: inherit; }
.feed.is-filtered .feed__item[data-n="0"] .feed__cap-title {
  font-size: inherit;
  font-weight: 500;
  line-height: inherit;   /* the tight display line-height is opener-only */
  margin-bottom: 0;
}
.feed.is-filtered .feed__item[data-n="0"] .feed__cap-cat,
.feed.is-filtered .feed__item[data-n="0"] .feed__cap-year { color: var(--cap); }
.feed.is-filtered .feed__scroll { display: none; }
.feed__portfolio-download { display: none; }
.feed.is-filtered[data-group="arch"] {
  flex-wrap: wrap;
  align-content: center;
}
.feed.is-filtered[data-group="arch"] .feed__portfolio-download {
  display: block;
  flex: 0 0 100%;
  margin-top: 8px;
  text-align: center;
  font-size: 13px;
  line-height: 1.45;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* while filtered, the index is the whole page, hide the about + footer below
   it (and their divider lines) */
.feed.is-filtered ~ .about3,
.feed.is-filtered ~ .foot3 { display: none; }

/* ---------- about section ---------- */
.about3 {
  padding: 120px var(--edge) 40px;
  border-top: 1px solid var(--line);
  margin-top: 80px;
}
.about3__lead {
  margin: 0 0 8px var(--content-left);
  max-width: 62%;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -1px;
}
.about3__notes {
  margin-left: var(--content-left);
  max-width: 44em;
}
.about3__notes p {
  font-size: 15px;
  font-weight: 400;
  color: #444;
  margin: 0 0 14px;
}
.about3__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin: 64px 0 0 var(--content-left);
}
.about3__col .label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  margin: 0 0 12px;
  color: var(--cap);
}
.about3__col ul { list-style: none; margin: 0; padding: 0; }
.about3__col li {
  font-size: 13px;
  line-height: 1.5;
  padding: 7px 0;
  border-top: 1px solid var(--line);
}

/* ---------- footer ---------- */
.foot3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 40px var(--edge);
  border-top: 1px solid var(--line);
  margin-top: 80px;
  font-size: 12px;
  color: var(--cap);
}
.foot3 .social { display: flex; gap: 16px; list-style: none; margin: 0; padding: 0; }
.foot3 .social a { color: var(--ink); opacity: .8; transition: opacity .25s; }
.foot3 .social a:hover { opacity: 1; }
.foot3 .social svg { width: 20px; height: 20px; }

/* ============================================================
   CASE PAGE (v3-work.html)
   ============================================================ */

.case3__hero {
  position: relative;
  width: 100%;
  height: 100svh;
  margin-top: calc(var(--head-h) * -1);
  overflow: hidden;
  background: #f3f3f3;
}
.case3__hero img,
.case3__hero video { width: 100%; height: 100%; object-fit: cover; }
.case3__hero::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: calc(var(--head-h) + 50px);
  background: linear-gradient(to bottom, rgba(0, 0, 0, .38), rgba(0, 0, 0, 0));
  pointer-events: none;
}

/* show the whole frame instead of cropping to the band (VORO's UI capture) */
.case3__hero--contain {
  height: 100svh;
  display: flex;
  justify-content: center;
}
.case3__hero--contain img,
.case3__hero--contain video {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  object-fit: contain;
}

/* arriving from the index: the hero settles out of the zoom the card started */
@keyframes heroSettle {
  from { transform: scale(1.06); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.case3__hero img,
.case3__hero video,
.case3__vhero video { animation: heroSettle .55s cubic-bezier(.2,.7,.2,1) both; }

/* ---- index → case: the clicked media flies into the hero band ---- */
.zoomclone {
  position: fixed;
  z-index: 90;
  margin: 0;
  object-fit: cover;
  max-width: none;
  pointer-events: none;
  transform-origin: 0 0;      /* FLIP inverts from the top-left corner */
  will-change: transform;
  backface-visibility: hidden;
}
/* portrait clips land flush right at natural aspect, never crop them on the way */
.zoomclone--portrait { object-fit: contain; }
body.is-leaving .feed,
body.is-leaving .about3,
body.is-leaving .foot3 { opacity: 0; transition: opacity .3s ease; }

@media (prefers-reduced-motion: reduce) {
  .case3__hero img,
  .case3__hero video,
  .case3__vhero video { animation: none; }
}

/* Project heading spans the text block; info and intro form the row below. */
.case3__meta {
  display: grid;
  grid-template-columns: minmax(190px, var(--content-left)) minmax(0, 1fr);
  column-gap: clamp(32px, 6vw, 96px);
  row-gap: clamp(32px, 5vw, 64px);
  padding: clamp(34px, 5vw, 68px) var(--edge) 0;
}
.case3__meta-left { grid-column: 1; }
.case3__meta-main {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.case3__meta-copy { grid-column: 2; }
.case3__cat { font-size: 12px; font-weight: 500; }
.case3__role { font-size: 11px; color: var(--cap); margin-top: 4px; max-width: 16em; }
/* award reads as a credit, not a caption, keep it in ink */
.case3__award { font-size: 11px; font-weight: 500; color: var(--ink); margin-top: 6px; max-width: 16em; }
.case3__title {
  margin: 0;
  font-size: clamp(30px, 4.6vw, 50px);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -.5px;
}
.case3__where { font-size: 12px; text-align: right; white-space: nowrap; }
.case3__where span { display: block; }
.case3__where .yr { color: var(--cap); }
.case3__info {
  display: grid;
  gap: 14px;
  margin: 18px 0 0;
  max-width: 18em;
}
.case3__info-row { margin: 0; }
.case3__info dt {
  margin: 0;
  color: var(--cap);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .12em;
  line-height: 1.2;
  text-transform: uppercase;
}
.case3__info dd {
  margin: 3px 0 0;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
}

/* Intro is the right-hand column beside project info. */
.case3__intro {
  margin: 0;
  max-width: 38em;
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -1px;
}
.case3__body {
  margin: 40px 0 0 var(--content-left);
  max-width: 45em;
}
.case3__body p {
  font-size: 15px;
  line-height: 1.65;
  margin: 0 0 18px;
  color: #333;
}

/* image essay, media sits at 0.75× of its slot, centred (not full bleed) */
.case3__essay { padding: 96px var(--edge) 40px; }
.case3__figure { margin: 0 0 clamp(40px, 7vw, 110px); }
.case3__figure img,
.case3__figure video { display: block; width: 75%; margin-inline: auto; }
.case3__figure figcaption { width: 75%; margin-inline: auto; }
.case3__figure figcaption,
.case3__cap {
  margin-top: 12px;
  font-family: var(--f-ui);
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: -.6px;
  color: var(--cap);
}

/* wide = full bleed; otherwise a staggered two-up pairing */
.case3__figure--wide { width: 100%; }

/* portrait (vertical) tech videos: keep natural aspect, sit to the right */
.case3__figure--portrait video {
  width: min(42%, 400px);
  margin: 0 0 0 auto;
}
.case3__figure--portrait figcaption {
  width: min(42%, 400px);
  margin: 12px 0 0 auto;
  text-align: right;
}
.case3__hero--portrait { display: flex; justify-content: flex-end; }
.case3__hero--portrait img,
.case3__hero--portrait video { width: auto; height: 100%; object-fit: contain; }

/* Portrait covers use the same hero → heading → two-column text sequence. */
.case3__vhero {
  height: min(calc(100vh - var(--head-h) - 24px), 780px);
  display: flex;
  justify-content: center;
  background: #f3f3f3;
  overflow: hidden;
}
.case3__vhero figure { height: 100%; margin: 0; }
.case3__vhero video {
  height: 100%;
  width: auto;
  object-fit: contain;
}

/* portrait video with still photos stacked on its left */
.case3__duo {
  display: grid;
  grid-template-columns: 1fr min(34vw, 400px);
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
  margin: 0 0 clamp(40px, 7vw, 110px);
}
.case3__duo .case3__figure { margin: 0; }
.case3__duo .case3__figure img,
.case3__duo .case3__figure figcaption { width: 100%; }
.case3__duo-left { display: grid; gap: clamp(24px, 3vw, 44px); align-content: center; }
/* both sides portrait, equal columns instead of "stills left, narrow video right" */
.case3__duo--even { grid-template-columns: 1fr 1fr; align-items: start; }
.case3__duo .case3__figure--portrait video,
.case3__duo .case3__figure--portrait figcaption { width: 100%; margin-left: 0; }
.case3__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 44px);
  align-items: start;
  margin: 0 0 clamp(40px, 7vw, 110px);
}
.case3__pair .case3__figure { margin: 0; }
.case3__pair .case3__figure:nth-child(2) { margin-top: 64px; }  /* right sits lower */

/* DreamStudio's video-frame stills read as one continuous sequence: equal
   16:9 cells, aligned baselines and a tighter editorial gutter. */
.case3[data-project="05"] .case3__pair {
  gap: clamp(10px, 1.4vw, 20px);
  margin-bottom: clamp(12px, 1.6vw, 24px);
}
.case3[data-project="05"] .case3__pair .case3__figure:nth-child(2) { margin-top: 0; }
.case3[data-project="05"] .case3__pair .case3__figure img,
.case3[data-project="05"] .case3__pair .case3__figure video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* archive bespoke layout */
.case3__arch-intro {
  margin: 40px 0 0 var(--content-left);
  max-width: 45em;
  font-size: 15px;
  line-height: 1.65;
  color: #333;
}
.case3__arch-mockups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 44px);
  margin: 40px 0 0;
}

/* fade-in on scroll */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* prev / next footer */
.case3__nav {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 80px var(--edge);
  border-top: 1px solid var(--line);
  margin-top: 40px;
}
.case3__nav a { max-width: 45%; }
.case3__nav .dir { display: block; font-size: 11px; color: var(--cap); margin-bottom: 8px; letter-spacing: .4px; }
.case3__nav .nm { font-size: clamp(20px, 3vw, 32px); font-weight: 300; letter-spacing: -.5px; transition: opacity .25s; }
.case3__nav a:hover .nm { opacity: .55; }
.case3__nav .next { margin-left: auto; text-align: right; }

/* ============================================================
   SOURCE / README, a technical appendix below the image essay.
   Aligned to the case body's --content-left column and set in the
   same Inter UI type as the rest of the page, so it reads as native.
   ============================================================ */
.case3__repo {
  padding: 40px var(--edge);
  border-top: 1px solid var(--line);
  margin-top: 40px;
}
.case3__repo[hidden] { display: none; }

.case3__repo-head {
  margin-left: var(--content-left);
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.case3__repo-label {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--cap);
}
.case3__repo-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-ui);
  font-size: 13px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 8px 13px;
  transition: border-color .25s, color .25s;
}
.case3__repo-link:hover { border-color: var(--ink); }
.case3__repo-link svg { display: block; flex: none; }

/* rendered README, one readable column, aligned with the case intro/body */
.case3__readme.md {
  margin-left: var(--content-left);
  max-width: 46em;
  color: #333;
  font-family: var(--f-ui);
  font-size: 15px;
  line-height: 1.65;
}
.md > *:first-child { margin-top: 0; }
.md h1, .md h2, .md h3, .md h4, .md h5, .md h6 {
  color: var(--ink);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.4px;
  margin: 1.9em 0 .7em;
}
.md h1 { font-size: clamp(22px, 2.4vw, 28px); font-weight: 300; letter-spacing: -1px; }
.md h2 { font-size: 20px; padding-bottom: .35em; border-bottom: 1px solid var(--line); }
.md h3 { font-size: 16px; }
.md h4, .md h5, .md h6 { font-size: 14px; letter-spacing: 0; }
.md p { margin: .8em 0; }
.md ul, .md ol { margin: .8em 0; padding-left: 1.4em; }
.md li { margin: .28em 0; }
.md li::marker { color: var(--cap); }
.md a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--cap); }
.md a:hover { text-decoration-color: var(--ink); }
.md strong { font-weight: 600; }
.md em { font-family: var(--f-cap); font-style: italic; }
.md img { max-width: 100%; height: auto; display: block; margin: 1.2em 0; border: 1px solid var(--line); border-radius: 2px; }
.md hr { border: 0; border-top: 1px solid var(--line); margin: 2.2em 0; }
.md blockquote { margin: 1.2em 0; padding: .2em 0 .2em 1.1em; border-left: 2px solid var(--line); color: #666; }
.md code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .86em;
  background: #F4F4F4;
  padding: .12em .4em;
  border-radius: 3px;
}
.md pre.md-code {
  margin: 1.2em 0;
  padding: 15px 17px;
  background: #F7F7F7;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow-x: auto;
}
.md pre.md-code code { background: none; padding: 0; font-size: 12.5px; line-height: 1.6; white-space: pre; }
.md .md-table-wrap { overflow-x: auto; margin: 1.2em 0; }
.md table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.md th, .md td { border: 1px solid var(--line); padding: 8px 11px; text-align: left; vertical-align: top; }
.md th { font-weight: 600; background: #FAFAFA; }

@media (max-width: 720px) {
  .case3__repo-head, .case3__readme.md { margin-left: 0; }
}

/* ============================================================
   ABOUT overlay, V2-style (mono text + vertical skills marquee)
   ============================================================ */
.aboutview {
  position: fixed;
  top: var(--head-h);
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  background: var(--bg);
  overflow-y: auto;
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  color: var(--ink);
  /* same reveal as index.html's About: the panel wipes down from the top */
  clip-path: inset(0 0 100% 0);
  transition: clip-path .7s cubic-bezier(.66, 0, .18, 1);
  pointer-events: none;
}
.aboutview.is-open { clip-path: inset(0 0 0 0); pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .aboutview { transition: none; } }
.aboutview__inner {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 48px;
  padding: clamp(28px, 6vh, 72px) var(--edge);
}
/* text column starts where the feed's content does (col 4 of 12 = the logo's edge) */
.aboutview__main { flex: 1 1 auto; min-width: 0; max-width: 760px; margin-left: var(--content-left); }
.aboutview__eyebrow {
  margin: 0 0 18px;
  color: var(--cap);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.aboutview__body { font-size: 13px; line-height: 1.7; margin: 0 0 14px; }
.aboutview__download {
  position: fixed;
  left: calc(var(--edge) + 48px);
  top: calc(var(--head-h) + clamp(28px, 6vh, 72px));
  z-index: 2;
  width: calc(var(--content-left) - 72px);
  font-size: 13px;
  line-height: 1.45;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.aboutview__cols { display: flex; flex-direction: column; gap: 26px; margin-top: 44px; }
.aboutview__cols h3 {
  font-size: 11px; font-weight: 400; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cap); margin: 0 0 8px;
}
.aboutview__cols ul { list-style: none; margin: 0; padding: 0; }
.aboutview__cols li { font-size: 13px; line-height: 1.45; padding: 3px 0; }
/* contact icons, pinned to the left gutter and fixed, so they stay put while
   the about text scrolls. Visibility is tied to the panel's open state (the
   fixed element would otherwise ignore the panel's clip-path reveal). */
.aboutview__social {
  position: fixed;
  left: var(--edge);
  top: calc(var(--head-h) + clamp(28px, 6vh, 72px));
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
}
.aboutview.is-open .aboutview__social { opacity: 1; pointer-events: auto; }
.aboutview__social a { color: var(--ink); opacity: .8; transition: opacity .25s; }
.aboutview__social a:hover { opacity: 1; }
.aboutview__social svg { width: 20px; height: 20px; display: block; }

/* narrow screens: the left gutter disappears, so return icons to the flow */
@media (max-width: 720px) {
  .aboutview__download {
    position: static;
    width: auto;
    order: 1;
  }
  .aboutview__main { order: 2; }
  .skills-marquee { order: 3; }
  .aboutview__social {
    position: static; opacity: 1; pointer-events: auto;
    flex-direction: row; gap: 16px; margin: 40px 0 0;
  }
}

/* skills marquee, vertical scroll, right-aligned; two duplicate groups loop */
.skills-marquee {
  flex: 0 0 auto;
  margin-left: auto;              /* pinned to the right edge, not to the text column */
  width: clamp(150px, 16vw, 220px);
  height: calc(100vh - var(--head-h) - clamp(56px, 12vh, 144px));
  position: sticky;
  top: clamp(28px, 6vh, 72px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent);
}
.skills-marquee__track {
  display: flex;
  flex-direction: column;
  animation: skills-scroll 34s linear infinite;
}
.skills-marquee__group { display: flex; flex-direction: column; align-items: flex-end; }
.skills-marquee__cat {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); text-align: right; padding: 16px 0 4px;
}
.skills-marquee__item {
  white-space: nowrap; text-align: right; font-size: 13px; color: var(--cap); padding: 5px 0;
}
@keyframes skills-scroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@media (prefers-reduced-motion: reduce) { .skills-marquee__track { animation: none; } }

/* ============================================================
   RWD  (<=820px): single column, stacked
   ============================================================ */
@media (max-width: 820px) {
  :root { --head-h: 68px; --content-left: 0%; }

  .v3head { grid-template-columns: 1fr; padding: 0 var(--edge); }
  .v3head__label { display: none; }
  .v3head__main { gap: 12px; }
  .v3head__logo { font-size: 20px; }
  .v3head__role { display: none; }
  .v3head__nav { gap: 12px; font-size: 10px; }

  .feed__item[data-n="0"] .feed__position { display: block; color: rgba(255, 255, 255, .8); }

  .feed {
    display: block;
    padding: 16px var(--edge) 20px;
  }
  .feed__item,
  .feed__item[data-n] {
    grid-column: auto !important;
    grid-row: auto !important;
    margin: 0 0 48px !important;
    width: 100%;
  }
  /* THRESHLD keeps the requested 1:1.5 width relationship when the pair
     collapses to a vertical stack on narrow screens. */
  .feed:not(.is-filtered) .feed__item--threshld-primary {
    width: 66.667% !important;
  }
  /* the opener remains full-viewport and full-bleed on mobile */
  .feed:not(.is-filtered) .feed__item[data-n="0"] {
    margin: calc((var(--head-h) + 16px) * -1) calc(var(--edge) * -1) 48px !important;
    width: auto;
    height: 100svh;
  }
  /* filtered index on small screens: wrap to 2-up instead of one cramped row */
  .feed.is-filtered { flex-wrap: wrap; min-height: 0; align-items: stretch; }
  .feed.is-filtered .feed__item.is-match { flex: 1 1 42%; max-width: none; }

  /* about overlay stacks the marquee below the text */
  .aboutview__inner { flex-direction: column; gap: 28px; }
  .skills-marquee {
    width: 100%;
    height: clamp(160px, 26vh, 220px);
    position: static;
  }
  .skills-marquee__group { align-items: flex-start; }
  .skills-marquee__cat, .skills-marquee__item { text-align: left; }

  .about3 { padding: 72px var(--edge) 30px; }
  .about3__lead, .about3__notes, .about3__grid { margin-left: 0; max-width: 100%; }
  .about3__grid { grid-template-columns: 1fr; gap: 28px; }

  .foot3 { flex-direction: column; align-items: flex-start; gap: 16px; }

  .case3__hero { height: 100svh; }
  .case3__meta { grid-template-columns: 1fr; }
  .case3__meta-left, .case3__meta-main, .case3__meta-copy { grid-column: 1; }
  .case3__meta-main { flex-direction: column; align-items: flex-start; gap: 6px; }
  .case3__title { font-size: 32px; }
  .case3__where { text-align: left; }
  .case3__intro, .case3__body, .case3__arch-intro { margin-left: 0; max-width: 100%; }
  .case3__info { max-width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case3__essay { padding: 56px var(--edge) 20px; }
  .case3__figure--portrait video,
  .case3__figure--portrait figcaption { width: min(70vw, 400px); }
  .case3__duo { grid-template-columns: 1fr; }
  .case3__duo .case3__figure--portrait video,
  .case3__duo .case3__figure--portrait figcaption { width: min(70vw, 400px); margin-left: auto; }
  .case3__vhero { height: 64svh; }
  .case3__vhero video { height: 100%; width: auto; }
  .case3__pair, .case3__arch-mockups { grid-template-columns: 1fr; }
  .case3__pair .case3__figure:nth-child(2) { margin-top: 0; }
  .case3__nav { flex-direction: column; gap: 32px; }
  .case3__nav a, .case3__nav .next { max-width: 100%; text-align: left; margin-left: 0; }
}

@media (max-width: 360px) {
  .v3head__main { gap: 6px; }
  .v3head__logo { font-size: 16px; }
  .v3head__nav { gap: 6px; font-size: 8px; }
}