/* =========================================================
   Jordi Parcerisas — Portfolio
   Monochrome editorial · grotesk + monospace (ref.digital-style)
   ========================================================= */

:root {
  --bg: #ffffff;
  --ink: #0c0c0c;
  --muted: #9b9b9b;
  --line: #e7e7e7;
  --sans: "General Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --pad-x: clamp(1rem, 2.4vw, 2rem);
  /* the single gutter between a text column and its media; every section on the
     page runs on the same two equal columns, so text and image square up */
  --gutter: clamp(1.5rem, 3vw, 3.2rem);
  --bleed: clamp(0.4rem, 0.8vw, 0.75rem);
  --maxw: 1720px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 16px; line-height: 1.4; font-weight: 400;
}

a { color: inherit; text-decoration: none; }
img, video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Monospace utility — all the small UI/labels */
.mono {
  font-family: var(--mono);
  font-size: 0.72rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.04em;
}

/* =========================================================
   HEADER
   ========================================================= */
.head {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.4rem var(--pad-x);
  mix-blend-mode: difference; color: #fff;
  transition: transform 0.4s var(--ease);
}
.head--hidden { transform: translateY(-100%); }
.head__logo { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; padding: 0.7rem 0; }
/* the gap and the padding are what make these tappable: the links are 16px of
   text, well under the 44px a thumb needs, so the padding does the work and the
   header's own vertical padding is reduced to keep the bar the same height */
.head__nav { display: flex; gap: 0.4rem; }
.head__nav a { opacity: 0.65; transition: opacity 0.2s var(--ease); padding: 0.7rem 0.6rem; }
.head__nav a:hover, .head__nav a.is-active { opacity: 1; }

/* =========================================================
   FEATURED HERO (video background)
   ========================================================= */
.feature {
  position: relative; width: 100%; height: 100svh; min-height: 560px;
  overflow: hidden; background: #0a0a0a;
}
.feature__bg { position: absolute; inset: 0; }
.feature__video { position: absolute; inset: 0; }
.feature__ph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(120% 90% at 20% 10%, #2a2a2a 0%, transparent 55%),
    radial-gradient(120% 90% at 85% 90%, #232323 0%, transparent 55%),
    #111;
  background-size: 200% 200%, 200% 200%, 100% 100%;
  animation: drift 16s var(--ease) infinite alternate;
}
.feature__ph .mono { color: #6f6f6f; }
.feature__ph code { font-family: var(--mono); text-transform: none; color: #9a9a9a; }
@keyframes drift { from { background-position: 0% 0%, 100% 100%, 0 0; } to { background-position: 100% 50%, 0% 50%, 0 0; } }

/* video present? hide the placeholder behind it (video sits above) */
.feature__video { z-index: 1; }
.feature__scrim {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.05) 35%, rgba(0,0,0,0.55) 100%);
}
.feature__content {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--pad-x); padding-bottom: clamp(2rem, 5vh, 4rem);
  color: #fff;
}
.feature__eyebrow { color: rgba(255,255,255,0.75); margin-bottom: 1.2rem; }
.feature__title {
  font-family: var(--sans); font-weight: 500;
  font-size: clamp(2.6rem, 8vw, 7rem); line-height: 0.98; letter-spacing: -0.03em;
}
.feature__meta {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; margin-top: 1.6rem;
  color: rgba(255,255,255,0.8);
}

/* =========================================================
   INTRO
   ========================================================= */
.intro {
  max-width: var(--maxw); margin-inline: auto;
  padding: clamp(2.8rem, 8vh, 6rem) var(--pad-x) clamp(2.2rem, 6vh, 4.5rem);
}
.intro__text {
  /* Four lines rather than six. The width alone could not do it — 42ch already
     fills the column — so the type comes down a step as well, from 48px to 45px.
     46ch keeps the cap on the container at every width. */
  max-width: 46ch;
  font-size: clamp(1.5rem, 3.6vw, 2.8rem); font-weight: 500;
  line-height: 1.12; letter-spacing: -0.025em;
}
.intro__hi { font-weight: 600; }

/* =========================================================
   WORK
   ========================================================= */
.work { padding-bottom: clamp(3rem, 8vh, 6rem); }
.work__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem var(--pad-x); color: var(--ink);
  border-block: 1px solid var(--line);
}

/* GRID view */
.grid.is-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 2.5vw, 2.6rem) var(--bleed);
  padding: clamp(1.2rem, 2.4vw, 2rem) var(--bleed) 0;
}
.card { display: block; }
.card__media { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: #f0f0ee; }
.card__media img, .card__ph { transition: transform 0.6s var(--ease); }
.card:hover .card__media img { transform: scale(1.04); }

/* Liquid hover distortion — the FRAME stays fixed (clips), only the inner
   image/placeholder distorts. Overscan keeps edges covered while it warps. */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.card__ph {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  background: repeating-linear-gradient(45deg, rgba(0,0,0,0.02) 0 11px, transparent 11px 22px), #ededeb;
  color: var(--muted);
}
.card__ph .mono { text-transform: none; }

.card__meta { display: flex; flex-direction: column; gap: 0.45rem; padding: 0.9rem 0.2rem 0; color: var(--ink); }
.card__client { font-weight: 500; }
.card__desc { color: var(--muted); text-transform: uppercase; line-height: 1.35; max-width: 34ch; }

@media (max-width: 900px) { .grid.is-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid.is-grid { grid-template-columns: 1fr; } }

/* =========================================================
   FOOTER
   ========================================================= */
.foot {
  max-width: var(--maxw); margin-inline: auto;
  padding: clamp(4rem, 10vh, 7rem) var(--pad-x);
  border-top: 1px solid var(--line);
}
.foot__label { display: block; color: var(--muted); }
.foot__email {
  display: inline-block; margin-top: clamp(1rem, 3vh, 2.2rem);
  padding: 0.4rem 0;
  font-size: clamp(1.25rem, 3vw, 2rem); font-weight: 500; letter-spacing: -0.03em;
  transition: opacity 0.2s var(--ease);
}
.foot__email:hover { opacity: 0.55; }
.foot__row {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  margin-top: clamp(2.5rem, 7vh, 4.5rem); color: var(--muted);
}
.foot__links { display: flex; gap: 0.5rem; margin: -0.6rem 0 -0.6rem -0.5rem; }
.foot__links a { transition: color 0.2s var(--ease); padding: 0.6rem 0.5rem; }
.foot__links a:hover { color: var(--ink); }

/* =========================================================
   ABOUT
   ========================================================= */
.about { max-width: var(--maxw); margin-inline: auto; padding: clamp(6rem, 16vh, 11rem) var(--pad-x) 0; }
.about__top {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start; padding-bottom: clamp(3.5rem, 9vh, 7rem);
}
.about__lead { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.18; max-width: 26ch; }
.about__lead .intro__hi { font-weight: 600; }
.about__p { margin-top: 1.4rem; font-size: clamp(1rem, 1.3vw, 1.12rem); color: var(--muted); max-width: 50ch; }
.about__portrait { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: #f0f0ee; }

.about__lists { border-top: 1px solid var(--line); }
.about__block {
  display: grid; grid-template-columns: 220px 1fr; gap: clamp(1rem, 4vw, 3rem);
  padding-block: clamp(1.8rem, 4vh, 2.6rem); border-bottom: 1px solid var(--line);
}
.about__label { color: var(--muted); }
.about__block ul { list-style: none; display: flex; flex-direction: column; gap: 1.1rem; }
.about__block li { display: grid; grid-template-columns: 1fr auto; gap: 0.1rem 1rem; align-items: baseline; }
.about__block li span { font-size: 1.05rem; font-weight: 500; }
.about__block li em { grid-column: 1; font-style: normal; font-size: 0.9rem; color: var(--muted); }
.about__block li i { grid-column: 2; grid-row: 1 / span 2; font-style: normal; font-family: var(--mono); font-size: 0.78rem; color: var(--muted); }
.about__block li em a { color: inherit; transition: color 0.2s var(--ease); }
.about__block li em a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.about__block > p { font-size: 1.05rem; max-width: 46ch; }

/* =========================================================
   PROJECT DETAIL PAGE
   ========================================================= */
.proj { max-width: var(--maxw); margin-inline: auto; }

.proj__head { padding: clamp(4.5rem, 7vh, 6rem) var(--pad-x) clamp(1.6rem, 4vh, 2.6rem); }
.proj__back { color: var(--muted); display: inline-block; margin-bottom: clamp(2rem, 7vh, 4.5rem); transition: color 0.2s var(--ease); }
.proj__back:hover { color: var(--ink); }
.proj__eyebrow { color: var(--muted); display: block; margin-bottom: 1.1rem; }
.proj__title { font-weight: 500; font-size: clamp(2.6rem, 8vw, 6.5rem); line-height: 0.96; letter-spacing: -0.03em; }
.proj__tagline { margin-top: 1.6rem; font-size: clamp(1.2rem, 2.6vw, 2rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1.18; max-width: 24ch; }

.proj__facts {
  display: flex; flex-wrap: wrap; gap: 1.2rem 2.6rem;
  margin-top: clamp(1.8rem, 4vh, 2.6rem); padding-top: 1.4rem;
  border-top: 1px solid var(--line); color: var(--muted);
}
.proj__facts > div { display: flex; flex-direction: column; gap: 0.4rem; }
.proj__facts b { font-family: var(--sans); font-weight: 500; font-size: 0.98rem; color: var(--ink); text-transform: none; letter-spacing: -0.01em; }

/* "Page 1" layout — text beside ONE accompanying image */
.proj__intro {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter);
  padding: clamp(2.5rem, 6vh, 4.5rem) var(--pad-x) clamp(2rem, 5vh, 3.5rem);
  align-items: stretch;
  /* the intro's cover shot still crops to the text height — everything below
     it runs on the shared two-column grid instead */
}
.proj__lead { align-self: center; }
/* an opening image shown whole (not cropped) keeps its own frame instead of
   stretching to the text height */
.proj__intro figure.proj__tech { align-self: center; }
.proj__lead p { font-size: clamp(1.05rem, 1.5vw, 1.28rem); line-height: 1.55; }
.proj__lead p + p { margin-top: 1.2rem; color: var(--muted); }
.proj__lead .proj__pull { font-weight: 500; color: var(--ink); font-size: clamp(1.2rem, 1.7vw, 1.45rem); }

/* generic media figure used across the page */
.proj figure { position: relative; width: 100%; overflow: hidden; background: #f0f0ee; margin: 0; }
.proj figure img { height: auto; object-fit: contain; }
/* placeholder is hidden until the <img> onerror reveals it (inline display:flex) */
.proj figure .card__ph { position: relative; aspect-ratio: 4 / 3; display: none; }

/* "fill" figures (feature beside text / block images) crop to fill — no gaps.
   The image is absolutely positioned so it fills the figure, which stretches to
   the height of the text column → text + image stay perfectly squared. */
.proj figure.proj__fill { height: 100%; min-height: 260px; }
.proj figure.proj__fill img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.proj figure.proj__fill .card__ph { position: absolute; inset: 0; aspect-ratio: auto; }

/* Full-width feature image */
.proj__full { padding: clamp(0.6rem, 2vh, 1.4rem) var(--bleed); }
.proj__full figure { background: #f0f0ee; }

/* Stat band — big numbers (silens-style decks) */
.proj__stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  margin: clamp(1rem, 3vh, 2rem) var(--pad-x) 0; background: var(--line);
  border: 1px solid var(--line);
}
.proj__stats div { background: var(--bg); padding: clamp(1.4rem, 3vw, 2.2rem); display: flex; flex-direction: column; gap: 0.5rem; }
.proj__stats b { font-family: var(--sans); font-weight: 500; font-size: clamp(1.8rem, 4vw, 3rem); letter-spacing: -0.03em; line-height: 1; }
.proj__stats span { color: var(--muted); }
@media (max-width: 760px) { .proj__stats { grid-template-columns: repeat(2, 1fr); } }

/* Secondary text + image block */
.proj__block {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter);
  padding: clamp(2.5rem, 6vh, 4rem) var(--pad-x); align-items: center;
}
.proj__intro + .proj__block, .proj__block + .proj__block { border-top: 1px solid var(--line); }
/* the text fills its column edge to edge, exactly like the image opposite it */
.proj__block-text { align-self: center; }
.proj__block h2 { font-weight: 500; font-size: clamp(1.6rem, 3.4vw, 2.6rem); letter-spacing: -0.025em; margin-bottom: 1rem; }
.proj__block p { font-size: clamp(1.02rem, 1.4vw, 1.18rem); line-height: 1.65; color: var(--muted); }
.proj__block p + p { margin-top: 1.2rem; }
.proj__block--rev .proj__block-text { order: 2; }

/* technical figures (CAD renders, diagrams, FEA) — always shown whole, never
   cropped, sitting on the page's own white field so transparent PNGs blend in.
   The frame is a fixed proportion; the artwork is contained and centred in it. */
.proj figure.proj__tech { background: var(--bg); aspect-ratio: 4 / 3; }
.proj figure.proj__tech img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
}
/* Frame ladder. Pick the step whose depth squares with the text beside it —
   sections whose copy runs short take a shallower frame, and vice versa. */
.proj figure.proj__tech--2x1 { aspect-ratio: 2 / 1; }
.proj figure.proj__tech--16x9 { aspect-ratio: 16 / 9; }
.proj figure.proj__tech--3x2 { aspect-ratio: 3 / 2; }
/* the bare default is already 4/3, but naming it keeps the ladder readable as
   five deliberate steps rather than four plus whatever the default happens to be */
.proj figure.proj__tech--4x3 { aspect-ratio: 4 / 3; }
.proj figure.proj__tech--6x5 { aspect-ratio: 6 / 5; }
/* stacked two-up, so each frame is shallower and the pair squares with the text */
.proj .proj__block-media figure.proj__tech { aspect-ratio: 16 / 9; }
/* media column for the sections carrying two supporting images */
.proj__block-media { display: grid; gap: var(--gutter); align-self: center; }
/* block sub-labels and the problem statement that opens each engineering block */
.proj__block-eyebrow { display: block; color: var(--muted); margin-bottom: 0.7rem; }
.proj__block .proj__block-lead { color: var(--ink); }
.proj__block .proj__block-lead + p { margin-top: 1.4rem; }
.proj__block p strong { color: var(--ink); font-weight: 500; }
/* non-fill block figures (wide logo strips etc.) centre in the row like the text */
.proj__block figure:not(.proj__fill) { align-self: center; }
/* inside blocks the image matches the text height exactly (no forced min-height
   gap on wide screens) so text + image stay perfectly squared */
.proj__block figure.proj__fill { min-height: 0; }
@media (max-width: 760px) { .proj__block { grid-template-columns: 1fr; } .proj__block--rev .proj__block-text { order: 0; } }

/* Dense masonry grid — "the rest of the photos" (ref.digital style) */
.proj__gallery { padding: clamp(0.6rem, 2vh, 1.4rem) var(--bleed) clamp(2.5rem, 7vh, 5rem); columns: 3; column-gap: clamp(0.4rem, 1vw, 0.8rem); }
.proj__gallery figure { break-inside: avoid; margin-bottom: clamp(0.4rem, 1vw, 0.8rem); }
/* Nothing in a masonry column may tower over the rest of it. A very tall shot
   is capped and letterboxed on the figure's own ground (the img already sits on
   object-fit: contain) instead of being stretched to the column width. */
.proj__gallery figure img { max-height: 46rem; }
/* a tall, low-resolution technical drawing: mounted on a plate at close to its
   own pixel size rather than blown up like a photograph */
.proj__gallery figure.gal--plate { background: #f0f0ee; padding: clamp(0.9rem, 2vw, 1.6rem); }
.proj__gallery figure.gal--plate img { max-height: 32rem; }
.proj__section-label { display: block; padding: clamp(2rem, 5vh, 3rem) var(--pad-x) 0; color: var(--muted); }
/* gallery thumbs behave like the work cards on the home page: the frame stays
   put and clips, only the image inside grows */
.proj__gallery figure { cursor: zoom-in; }
.proj__gallery figure img { transition: transform 0.6s var(--ease); }
.proj__gallery figure:hover img,
.proj__gallery figure:focus-visible img { transform: scale(1.04); }
.proj__gallery figure:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* =========================================================
   LIGHTBOX — full-screen gallery viewer
   ========================================================= */
.lb {
  position: fixed; inset: 0; z-index: 200;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: #0b0b0b; color: #fff;
}
.lb[hidden] { display: none; }
.lb__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: clamp(1rem, 2.4vw, 1.5rem) var(--pad-x);
  color: rgba(255, 255, 255, 0.55);
}
.lb__count { font-variant-numeric: tabular-nums; }
.lb button { font-family: var(--mono); color: inherit; background: none; border: 0; cursor: pointer; }
.lb__close {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55); transition: color 0.25s var(--ease);
}
.lb__close:hover, .lb__close:focus-visible { color: #fff; }
/* the stage is a fixed box the image is contained inside, so a tall portrait
   shot can never push the viewer taller than the viewport */
.lb__stage { position: relative; min-height: 0; margin: 0 clamp(3.4rem, 7vw, 6rem); }
.lb__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  /* scale-down, not contain: a small source is shown at its own size rather
     than blown up to fill the stage, which is what made it look mushy */
  object-fit: scale-down;
}
.lb__nav {
  position: fixed; top: 50%; transform: translateY(-50%);
  width: clamp(2.6rem, 5vw, 3.4rem); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.75); background: rgba(255, 255, 255, 0.08);
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.lb__nav:hover, .lb__nav:focus-visible { background: rgba(255, 255, 255, 0.2); color: #fff; }
.lb__nav--prev { left: clamp(0.3rem, 1.5vw, 1.2rem); }
.lb__nav--next { right: clamp(0.3rem, 1.5vw, 1.2rem); }
.lb__cap {
  padding: clamp(1rem, 2.4vw, 1.5rem) var(--pad-x);
  color: rgba(255, 255, 255, 0.62); min-height: 1.2em;
  text-transform: none; letter-spacing: 0; font-size: 0.82rem;
  max-width: 70ch;
}
body.lb-open { overflow: hidden; }
@media (max-width: 620px) {
  .lb__stage { margin: 0 0.5rem 3.4rem; }
  .lb__nav { top: auto; bottom: 4.2rem; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .proj__gallery figure img { transition: none; }
  .proj__gallery figure:hover img { transform: none; }
}

/* Contained feature video — a player inside the page (controls + fullscreen),
   starts on scroll, with margins so it reads as a feature, not the page itself */
.proj__featvid { padding: clamp(0.6rem, 2vh, 1.4rem) var(--pad-x) clamp(2rem, 5vh, 3.5rem); }
.proj__featvid figure { position: relative; background: #0a0a0a; overflow: hidden; line-height: 0; }
.proj__featvid video { width: 100%; height: auto; display: block; }

/* Project-to-project nav */
.proj__nav {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  max-width: var(--maxw); margin-inline: auto;
  padding: clamp(2.5rem, 7vh, 4.5rem) var(--pad-x); border-top: 1px solid var(--line);
}
.proj__nav a { color: var(--muted); transition: color 0.2s var(--ease); }
.proj__nav a:hover { color: var(--ink); }
.proj__nav .proj__next { color: var(--ink); font-family: var(--sans); font-weight: 500; font-size: clamp(1.4rem, 4vw, 2.6rem); letter-spacing: -0.02em; text-transform: none; }

@media (max-width: 1100px) { .proj__gallery { columns: 2; } }
@media (max-width: 760px) {
  .proj__intro { grid-template-columns: 1fr; }
  .proj figure.proj__fill { min-height: 0; aspect-ratio: 4 / 3; }
  .proj__gallery { columns: 1; }
}

/* =========================================================
   FADE-IN (JS-guarded; never hides the video hero)
   ========================================================= */
.anim-ready .intro,
.anim-ready .card,
.anim-ready .about__top,
.anim-ready .about__block,
.anim-ready .proj__intro,
.anim-ready .proj__gallery figure { opacity: 0; transform: translateY(12px); }
.anim-ready .is-in,
.anim-ready .proj__gallery figure.is-in { opacity: 1; transform: none; transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 760px) {
  .about__top { grid-template-columns: 1fr; }
  .about__portrait { aspect-ratio: 4 / 3; max-width: 340px; }
  .about__block { grid-template-columns: 1fr; gap: 0.7rem; }
  .head__nav { gap: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto; }
  .anim-ready .intro, .anim-ready .card, .anim-ready .about__top, .anim-ready .about__block,
  .anim-ready .proj__intro, .anim-ready .proj__gallery figure { opacity: 1; transform: none; }
}

/* a heading that belongs in the document outline but not in the layout —
   About is designed to open straight into the bio, with no visible title */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* The section figures open in the viewer too — the drawings and exploded views
   are the images most worth enlarging. The cursor only appears once the script
   has wired them up, so it never promises something that will not happen. */
.proj figure[role="button"] { cursor: zoom-in; }
.proj figure[role="button"]:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 3px;
}
.proj__gallery figure[role="button"] { cursor: zoom-in; }

/* the intro's one way out — sized down from the display text around it so it
   reads as a link rather than part of the sentence */
.intro__more {
  /* small and set apart: it follows a 48px display sentence, and at anything
     nearer in size or position it reads as part of the sentence rather than
     as somewhere to go */
  margin-left: 0.55rem;
  font-size: 0.32em;
  font-weight: 500;
  letter-spacing: 0;
  vertical-align: middle;
  /* A min-height rather than padding: this link is sized as a fraction of the
     display text around it, so on a phone padding alone still left it at 26px.
     The underline is a box-shadow so it stays on the words, not the box. */
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  color: var(--muted);
  box-shadow: inset 0 -1px 0 currentColor;
  transition: color 0.2s var(--ease);
}
.intro__more:hover { color: var(--ink); }