/* ==========================================================================
   Brian Baldueza — portfolio
   Editorial poster system: single indigo ink on warm paper, condensed
   grotesque display, monospace metadata, halftone duotone imagery.
   Hand-coded, no framework.
   ========================================================================== */

/* ---------- Garet — the logotype face, self-hosted and subset ---------- */
@font-face {
  font-family: "Garet";
  src: url("fonts/garet-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Garet";
  src: url("fonts/garet-heavy.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* One ink, one paper — the way a two-colour print job works */
  --indigo:      #454c96;
  --indigo-deep: #2f3468;
  --indigo-pale: #d9dbec;
  --ink:         #1b1b22;
  --ink-2:       #55555f;
  --paper:       #efece5;
  --paper-2:     #f7f5f0;
  --white:       #ffffff;
  --line:        #c8c4b8;

  /* accent inks — each passes contrast as text on paper */
  --clay:  #b3402a;
  --moss:  #40682c;
  --ochre: #8a6410;
  --plum:   #6b3a72;
  --orange: #c4622b;

  /* Type */
  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --garet: "Garet", "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Sized against the column, not the viewport. vw kept growing past the
     point where .wrap caps at 1320px, so on wide screens the type outran a
     frozen column and the sentence broke onto a second line. cqw tracks the
     container instead, so the line fills the column and stays on one line at
     any width. */
  --fs-masthead: clamp(1.55rem, 4.4cqw, 5rem);
  --fs-h1:       clamp(2.1rem, 1.2rem + 3.6vw, 4.1rem);
  --fs-h2:       clamp(1.6rem, 1.15rem + 1.9vw, 2.6rem);
  --fs-h3:       clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --fs-lead:     clamp(1.05rem, 1rem + 0.35vw, 1.24rem);
  --fs-body:     clamp(0.98rem, 0.95rem + 0.16vw, 1.06rem);
  --fs-sm:       0.86rem;
  --fs-xs:       0.72rem;
  --fs-xxs:      0.645rem;

  /* Space */
  --wrap: 1320px;
  --gutter: clamp(1.1rem, 0.4rem + 3vw, 3.25rem);
  --section: clamp(3.75rem, 2rem + 7vw, 7rem);
  --measure: 63ch;

  --radius: 14px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Halftone screen pitch */
  --screen: 4px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-variation-settings: "wdth" 100;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Paper grain — the whole page sits on stock, not on a screen */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  opacity: 0.32;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

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

h1, h2, h3, h4 { margin: 0; line-height: 1; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }
ul, ol { margin: 0 0 1.15em; padding-left: 1.1rem; }
li { margin-bottom: 0.42em; }
li::marker { color: var(--indigo); }
strong { font-weight: 700; }

::selection { background: var(--indigo); color: var(--paper-2); }

:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; }

/* ---------- Type helpers ---------- */
.display {
  font-weight: 800;
  font-variation-settings: "wdth" 78, "wght" 800;
  letter-spacing: -0.022em;
  text-transform: uppercase;
  line-height: 0.9;
}

.mono {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.03em;
}

.eyebrow {
  display: block;
  margin: 0 0 0.9rem;
  font-family: var(--mono);
  font-size: var(--fs-xxs);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--indigo);
}

.star { color: var(--indigo); flex: none; }

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.measure { max-width: var(--measure); }

.rule {
  border: 0;
  border-top: 1.5px solid var(--ink);
  margin: 0;
}

.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -100%;
  z-index: 1000;
  padding: 0.7rem 1.1rem;
  background: var(--indigo);
  color: var(--paper-2);
  font-family: var(--mono);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: top 0.15s;
}
.skip-link:focus { top: 0.5rem; }

/* ---------- Halftone duotone imagery ----------
   Container carries the ink; the photo is knocked back to a screened
   duotone and a dot grid is laid over it. Coarse enough to read as
   printed halftone, fine enough that the subject survives. */
.screen {
  position: relative;
  overflow: hidden;
  background: var(--indigo);
  isolation: isolate;
}
.screen > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.3) brightness(1.12);
  mix-blend-mode: screen;
}
/* the dot screen */
.screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: radial-gradient(circle at center, var(--indigo) 34%, transparent 38%);
  background-size: var(--screen) var(--screen);
  opacity: 0.62;
}
.screen--coarse { --screen: 6px; }
.screen--fine   { --screen: 3px; }

.framed {
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 80;
  background: var(--paper);
  border-bottom: 1.5px solid var(--ink);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: 3.5rem;
}

.wordmark {
  font-family: var(--garet);
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: -0.005em;
  text-transform: none;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}
.wordmark:hover { color: var(--indigo); }

.nav { display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 1.9rem); }
.nav a {
  font-family: var(--mono);
  font-size: var(--fs-xxs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-2);
  padding-block: 0.2rem;
  border-bottom: 1.5px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.nav a:hover { color: var(--indigo); border-bottom-color: var(--indigo); }

@media (max-width: 620px) {
  .nav__ext { display: none; }
  .nav { gap: 1.1rem; }
}

/* ---------- Masthead ---------- */
.masthead { padding-top: clamp(1.5rem, 1rem + 2.2vw, 2.75rem); }

/* the query container the headline sizes itself against */
.masthead .wrap { container-type: inline-size; }

.masthead h1 {
  font-family: var(--garet);
  font-size: var(--fs-masthead);
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.1;
  color: var(--indigo);
  margin-bottom: clamp(0.9rem, 1.8vw, 1.5rem);
}
/* the descriptor half steps back so the greeting still leads without the
   whole line having to shout */
.masthead h1 span { color: var(--ink-2); }

/* ---------- Paste-up board ----------
   The hero itself. Every piece of the opening statement is a physical block
   the visitor can shove around; the type tiles carry the actual content, the
   swatches are just ink. Sized to take most of the fold without eating it. */
.board {
  position: relative;
  height: clamp(340px, 46vh, 560px);
  margin-top: clamp(1rem, 2vw, 1.75rem);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  background: var(--paper-2);
  overflow: hidden;
  touch-action: none;
}


/* faint paste-up grid */
.board::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(69, 76, 150, 0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(69, 76, 150, 0.1) 1px, transparent 1px);
  background-size: 34px 34px;
  pointer-events: none;
}

.board__bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.8rem;
  border-top: 1.5px solid var(--ink);
  background: var(--paper);
  font-family: var(--mono);
  font-size: var(--fs-xxs);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.board__reset {
  flex: none;
  padding: 0.3rem 0.7rem;
  border: 1.5px solid var(--ink);
  border-radius: 100px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.board__reset:hover { background: var(--ink); color: var(--paper-2); }

/* Without JS the pieces are a static scatter, so don't promise interaction */
html:not(.js) .board__bar { display: none; }
html:not(.js) .chip { cursor: default; }

/* ---------- Pieces ----------
   Each one is a fact about Brian rather than a fragment of a sentence, so the
   board reads as a set of cards whatever order they end up in. */
.chip {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.45rem, 0.6vw, 0.85rem) clamp(0.95rem, 1.35vw, 1.8rem);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--paper-2);
  font-family: var(--mono);
  font-size: clamp(0.78rem, 1.02vw, 1.12rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  box-shadow: 2px 2px 0 rgba(27, 27, 34, 0.16);
  transition: box-shadow 0.18s var(--ease);
}
.chip:hover { box-shadow: 4px 4px 0 rgba(27, 27, 34, 0.3); }
.chip.is-dragging {
  cursor: grabbing;
  box-shadow: 9px 10px 0 rgba(27, 27, 34, 0.24);
  z-index: 60;
}
.chip:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; }

.chip--ink  { background: var(--indigo); color: var(--paper-2); border-color: var(--indigo-deep); }
.chip--dark { background: var(--ink); color: var(--paper-2); }

/* One treatment for every card — solid ink, white type, hard edge. Three
   competing treatments (fill / tint / outline) was what made the board read as
   unresolved, so colour is now the only thing that varies. */
.chip {
  --c: var(--indigo);
  background: var(--c);
  color: #fbfaf7;
  border-color: var(--ink);
}

.chip--c-indigo { --c: var(--indigo); }
.chip--c-clay   { --c: var(--clay); }
.chip--c-moss   { --c: var(--moss); }
.chip--c-ochre  { --c: var(--ochre); }
.chip--c-plum   { --c: var(--plum); }
.chip--c-orange { --c: var(--orange); }
.chip--c-ink    { --c: var(--ink); }

/* a stated fact, in the text face rather than the label face */
.chip--fact {
  padding: clamp(0.65rem, 0.9vw, 1.2rem) clamp(1.15rem, 1.6vw, 2.1rem);
  font-family: var(--sans);
  font-weight: 600;
  font-variation-settings: "wdth" 96, "wght" 600;
  font-size: clamp(1.08rem, 1.68vw, 1.95rem);
  letter-spacing: -0.008em;
  text-transform: none;
}

/* the discipline tags read as secondary — outline, not a solid block */
.chip--tag {
  background: var(--paper-2);
  color: var(--c);
  border-color: var(--c);
  font-size: clamp(0.75rem, 1.02vw, 1.14rem);
  letter-spacing: 0.14em;
}

/* interests — icon over a short label */
.chip--icon {
  width: clamp(92px, 8.8vw, 150px);
  height: clamp(92px, 8.8vw, 150px);
  padding: 0;
  border-radius: 50%;
}
/* the glyph should nearly fill the disc — thick padding was making these read
   as empty buttons rather than icons */
.chip--icon svg { width: 68%; height: 68%; color: #fbfaf7; }

/* the one bit of pure printer's furniture worth keeping */
/* Squared off rather than a pill — a capsule crops the symbol's quiet zones
   and makes it unscannable. The padding is the quiet zone. */
.chip--bars {
  width: clamp(132px, 13.5vw, 218px);
  height: clamp(56px, 5vw, 82px);
  padding: clamp(9px, 0.9vw, 14px) clamp(11px, 1.1vw, 17px);
  border-radius: clamp(9px, 0.9vw, 14px);
  background: var(--ink);
}
.chip--bars .barcode {
  width: 100%;
  height: 100%;
  color: var(--paper-2);
}

@media (prefers-reduced-motion: reduce) { .chip { transition: none; } }

/* Mobile overrides live after the base rules so they actually win — .chip sets
   display:flex, and an equal-specificity override has to come later. */
@media (max-width: 899px) {
  .board { height: clamp(540px, 76vh, 720px); }
  .chip--fact { white-space: normal; max-width: 84%; }
  .chip--tag { white-space: normal; max-width: 78%; text-align: left; }
}

/* ---------- Sections ---------- */
.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(2.75rem, 1.5rem + 4vw, 5rem); }
/* Back-to-back sections stack both paddings, so the gap between them came out
   two-thirds larger than the one above the first heading. One gap is enough. */
.section + .section { padding-top: 0; }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding-bottom: 0.85rem;
  border-bottom: 1.5px solid var(--ink);
  margin-bottom: clamp(1.75rem, 1rem + 2.5vw, 3rem);
}
.section-head h2 {
  font-size: var(--fs-h2);
  font-weight: 800;
  font-variation-settings: "wdth" 76, "wght" 800;
  letter-spacing: -0.018em;
  text-transform: uppercase;
  color: var(--indigo);
}
.section-head .count {
  font-family: var(--mono);
  font-size: var(--fs-xxs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* ---------- Work grid ---------- */
.work-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2.25rem, 1rem + 3.5vw, 4rem) clamp(1.25rem, 0.5rem + 2.5vw, 2.5rem);
}
@media (max-width: 800px) { .work-grid { grid-template-columns: 1fr; } }

.work-card { display: block; text-decoration: none; color: inherit; }

.work-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  margin-bottom: 1.1rem;
}
.work-card__media > img { object-position: top center; transition: transform 0.6s var(--ease); }
.work-card:hover .work-card__media > img { transform: scale(1.03); }
/* Ink lifts on hover — the sheet comes into register */
.work-card__media::after { transition: opacity 0.35s; }
.work-card:hover .work-card__media::after { opacity: 0.22; }
.work-card:hover .work-card__media > img { filter: grayscale(0.1) contrast(1.02) brightness(1); mix-blend-mode: normal; }

/* Scrim so the index number survives images with pale tops */
.work-card__media::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5.5rem;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(27, 27, 34, 0.5), transparent);
}

.work-card__index {
  position: absolute;
  top: 0.85rem;
  left: 1rem;
  z-index: 3;
  font-weight: 800;
  font-variation-settings: "wdth" 76, "wght" 800;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--paper-2);
}
.work-card__flag {
  position: absolute;
  bottom: 0.85rem;
  left: 1rem;
  z-index: 3;
  padding: 0.22rem 0.5rem;
  background: var(--paper-2);
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--fs-xxs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.work-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
  margin-bottom: 0.45rem;
  font-family: var(--mono);
  font-size: var(--fs-xxs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--indigo);
}
.work-card__meta .sep { color: var(--line); }
.work-card__meta .yr { color: var(--ink-2); }

.work-card__title {
  font-size: var(--fs-h3);
  font-weight: 700;
  font-variation-settings: "wdth" 84, "wght" 700;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin-bottom: 0.55rem;
  color: var(--ink);
  transition: color 0.15s;
}
.work-card:hover .work-card__title { color: var(--indigo); }

.work-card__outcome {
  font-size: var(--fs-sm);
  line-height: 1.6;
  max-width: 46ch;
  margin: 0;
  color: var(--ink-2);
}

/* ---------- About ----------
   The panel is the whole section; the prose it used to sit beside was saying
   the same things in longer form. */
/* Spec sheet — printed data panel */
.spec {
  /* Fills the column now, and sizes its own contents against itself — a wide
     card with small type would read as stretched rather than scaled. */
  container-type: inline-size;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper-2);
}
.spec__head {
  padding: clamp(0.85rem, 1.15cqw, 1.4rem) clamp(1.1rem, 1.5cqw, 1.9rem) clamp(0.7rem, 0.95cqw, 1.15rem);
  background: var(--indigo);
  color: var(--paper-2);
}
.spec__head h3 {
  font-size: clamp(1.15rem, 1.9cqw, 1.7rem);
  font-weight: 800;
  font-variation-settings: "wdth" 78, "wght" 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin-bottom: 0.15rem;
}
.spec__head p {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(var(--fs-xxs), 0.95cqw, 0.82rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
}
.spec__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
  justify-content: space-between;
  padding: clamp(0.6rem, 0.95cqw, 1.15rem) clamp(1.1rem, 1.5cqw, 1.9rem);
  border-bottom: 1px solid var(--line);
}
.spec__row:last-child { border-bottom: 0; }
.spec__row dt {
  font-family: var(--mono);
  font-size: clamp(var(--fs-xxs), 1cqw, 0.82rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.spec__row dd { margin: 0; font-size: clamp(var(--fs-sm), 1.35cqw, 1.12rem); text-align: right; max-width: 64%; }
@media (max-width: 460px) { .spec__row dd { text-align: left; max-width: 100%; } }

.tags { display: flex; flex-wrap: wrap; gap: 0.3rem; justify-content: flex-end; }
@media (max-width: 460px) { .tags { justify-content: flex-start; } }
.tag {
  padding: clamp(0.12rem, 0.28cqw, 0.3rem) clamp(0.45rem, 0.72cqw, 0.85rem);
  border: 1px solid var(--indigo);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: clamp(var(--fs-xxs), 0.95cqw, 0.82rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--indigo);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.2rem;
  border: 1.5px solid var(--ink);
  border-radius: 100px;
  background: var(--ink);
  color: var(--paper-2);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  line-height: 1;
  text-decoration: none;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.btn:hover { background: var(--indigo); border-color: var(--indigo); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper-2); }

.btn .arr { transition: transform 0.2s var(--ease); }
.btn:hover .arr { transform: translateX(3px); }

/* ==========================================================================
   Case study pages
   ========================================================================== */

.case-hero { padding-top: clamp(1.75rem, 1rem + 3vw, 3rem); }
.case-hero h1 {
  font-size: var(--fs-h1);
  font-weight: 800;
  font-variation-settings: "wdth" 74, "wght" 800;
  letter-spacing: -0.024em;
  text-transform: uppercase;
  line-height: 0.88;
  color: var(--indigo);
  max-width: 16ch;
  margin-bottom: 1.15rem;
}
.case-hero__deck {
  font-size: var(--fs-lead);
  line-height: 1.5;
  max-width: 52ch;
}

.award { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.6rem; }
.award__item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.8rem;
  border: 1.5px solid var(--indigo);
  border-radius: 100px;
  color: var(--indigo);
  font-family: var(--mono);
  font-size: var(--fs-xxs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.award__item svg { flex: none; }
@media (max-width: 620px) {
  .award__item { align-items: flex-start; border-radius: 8px; line-height: 1.55; }
  .award__item svg { margin-top: 0.15em; }
}

/* Fact strip */
.case-facts {
  display: grid;
  /* Explicit column counts rather than auto-fit: the padding reset below has
     to know where a row starts, and auto-fit's count is not knowable in CSS. */
  grid-template-columns: repeat(2, 1fr);
  margin-block: clamp(1.6rem, 3.5vw, 2.5rem);
  border-block: 1.5px solid var(--ink);
}
.case-facts > div {
  min-width: 0;
  /* Equal air on both sides, so a divider is not hard against the text of one
     column while clearing the next by 18px. */
  padding: 0.95rem clamp(0.9rem, 1.3vw, 1.5rem);
  border-right: 1px solid var(--line);
}

/* Stacked: rules run horizontally, so side padding would only indent every
   cell away from the column edge. */
@media (max-width: 699px) {
  .case-facts > div { padding-inline: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .case-facts > div:last-child { border-bottom: 0; }
}

/* Three across. Cells that open a row give back their left padding, cells that
   close one give back their right padding, so every row lines up with the page
   column instead of only the very first one. */
@media (min-width: 700px) {
  .case-facts { grid-template-columns: repeat(3, 1fr); }
  .case-facts > div:nth-child(3n+1) { padding-left: 0; }
  .case-facts > div:nth-child(3n)   { padding-right: 0; border-right: 0; }
}

@media (min-width: 1000px) {
  .case-facts { grid-template-columns: repeat(5, 1fr); }
  .case-facts > div:nth-child(n)     { padding-left: clamp(0.9rem, 1.3vw, 1.5rem);
                                       padding-right: clamp(0.9rem, 1.3vw, 1.5rem);
                                       border-right: 1px solid var(--line); }
  .case-facts > div:nth-child(5n+1)  { padding-left: 0; }
  .case-facts > div:nth-child(5n)    { padding-right: 0; border-right: 0; }
}

.case-facts > div:last-child { border-right: 0; }

.case-facts dt {
  font-family: var(--mono);
  font-size: var(--fs-xxs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--indigo);
  margin-bottom: 0.35rem;
}
.case-facts dd { margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-2); }
.case-facts a { color: var(--indigo); }

.case-body { padding-block: var(--section); }
.case-section + .case-section { margin-top: clamp(2.75rem, 2rem + 4.5vw, 5.5rem); }

.case-section__head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.7rem;
  border-bottom: 1.5px solid var(--ink);
}
.case-section__head h2 {
  font-size: var(--fs-h2);
  font-weight: 800;
  font-variation-settings: "wdth" 78, "wght" 800;
  letter-spacing: -0.018em;
  text-transform: uppercase;
  color: var(--indigo);
}

.section-num {
  flex: none;
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  color: var(--ink-2);
}

.case-section .prose { max-width: var(--measure); }
.case-section .prose h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
  font-variation-settings: "wdth" 88, "wght" 700;
  letter-spacing: -0.012em;
  margin: 1.9rem 0 0.6rem;
}
.case-section .prose h3:first-child { margin-top: 0; }

/* Pull quote */
.pull {
  margin: 2.1rem 0;
  padding: 1.35rem 0 1.35rem 1.5rem;
  border-left: 3px solid var(--indigo);
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -0.012em;
  max-width: 46ch;
}
.pull p { margin: 0; }
.pull strong { color: var(--indigo); }

.note {
  margin-top: 1rem;
  font-family: var(--mono);
  font-size: var(--fs-xxs);
  letter-spacing: 0.05em;
  color: var(--ink-2);
}

/* ---------- Figures ---------- */
.figure { margin: 2.25rem 0 0; }
.figure img { width: 100%; border: 1.5px solid var(--ink); border-radius: var(--radius); background: var(--white); }
.figure figcaption {
  margin-top: 0.8rem;
  font-family: var(--mono);
  font-size: var(--fs-xxs);
  line-height: 1.6;
  letter-spacing: 0.03em;
  color: var(--ink-2);
  max-width: 58ch;
}

.shot-frame {
  max-height: 600px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  background: var(--white);
}
.shot-frame img { border: 0; border-radius: 0; }

/* Before / after */
.ba-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.25rem, 3vw, 2.25rem);
  margin-top: 2rem;
}
@media (max-width: 780px) { .ba-grid { grid-template-columns: 1fr; } }
.ba-grid figure { margin: 0; }

/* A portrait sketch beside a landscape screen. On equal columns the sketch
   rendered ~4x taller (1250px vs 315px), which turned this into a scroll.
   Each column gets an fr equal to its own image's aspect ratio (w/h), which
   is what makes both images resolve to exactly the same height. */
.ba-grid--aspect {
  grid-template-columns: 0.462fr 1.835fr;
  align-items: start;
}
.ba-grid--aspect img { width: 100%; }

@media (max-width: 780px) {
  /* Stacked. Keeping the ratio here would leave the sketch about 64px wide,
     so both go full width — but the sketch would run 736px at that width, so
     it is capped and centred instead. */
  .ba-grid--aspect { grid-template-columns: 1fr; }
  .ba-grid--aspect img { width: auto; max-height: 58vh; margin-inline: auto; }
}
.ba-label {
  display: inline-block;
  margin-bottom: 0.7rem;
  padding: 0.2rem 0.6rem;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: var(--fs-xxs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ba-label--before { border: 1px solid var(--ink-2); color: var(--ink-2); }
.ba-label--after  { background: var(--indigo); color: var(--paper-2); }

/* Video */
.video {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--indigo-deep);
  margin-top: 2rem;
}
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Poster link-out for video that can't be embedded */
.watch-card {
  position: relative;
  display: block;
  margin-top: 2rem;
  aspect-ratio: 16 / 9;
  text-decoration: none;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--indigo);
  isolation: isolate;
}
.watch-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.3) brightness(1.08);
  mix-blend-mode: screen;
  transition: transform 0.6s var(--ease);
}
.watch-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: radial-gradient(circle at center, var(--indigo) 34%, transparent 38%);
  background-size: 5px 5px;
  opacity: 0.6;
  transition: opacity 0.3s;
}
.watch-card:hover img { transform: scale(1.03); }
.watch-card:hover::after { opacity: 0.3; }
.watch-card__play {
  position: absolute;
  z-index: 3;
  inset: 0;
  margin: auto;
  width: 74px; height: 74px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--paper-2);
  border-radius: 50%;
  color: var(--paper-2);
  background: rgba(27, 27, 34, 0.35);
  transition: background 0.25s;
}
.watch-card:hover .watch-card__play { background: var(--ink); }
.watch-card__label {
  position: absolute;
  z-index: 3;
  left: 1.1rem;
  bottom: 1.1rem;
  padding: 0.3rem 0.65rem;
  background: var(--paper-2);
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--fs-xxs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Two-up */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.1rem, 2.5vw, 2rem);
  margin-top: 1.75rem;
}
@media (max-width: 780px) { .split { grid-template-columns: 1fr; } }
.split-card {
  padding: 1.4rem;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  background: var(--paper-2);
}
.split-card h3 {
  font-size: 1rem;
  font-weight: 800;
  font-variation-settings: "wdth" 80, "wght" 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--indigo);
  margin: 0 0 0.65rem;
}
.split-card p { font-size: var(--fs-sm); line-height: 1.62; margin: 0; color: var(--ink-2); }

/* Next project */
/* Full-bleed rule with the column nested inside — the border used to sit on
   the .wrap itself, so it stopped at the 1320px cap and read as cut off on
   wide screens while the header rule above it ran edge to edge. */
.next-project {
  border-top: 1.5px solid var(--ink);
  padding-block: clamp(2.25rem, 4.5vw, 3.5rem);
}
.next-project a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-decoration: none;
}
.next-project h2 {
  font-size: var(--fs-h2);
  font-weight: 800;
  font-variation-settings: "wdth" 76, "wght" 800;
  letter-spacing: -0.018em;
  text-transform: uppercase;
  color: var(--indigo);
  transition: color 0.15s;
}
.next-project a:hover h2 { color: var(--ink); }
.next-project .arr { color: var(--indigo); transition: transform 0.2s var(--ease); }
.next-project a:hover .arr { transform: translateX(6px); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--indigo);
  color: var(--paper-2);
  padding-top: clamp(3rem, 2rem + 5vw, 5.5rem);
  padding-bottom: 2rem;
}
.site-footer h2 {
  font-size: clamp(1.9rem, 1.1rem + 3.1vw, 3.5rem);
  font-weight: 800;
  font-variation-settings: "wdth" 72, "wght" 800;
  letter-spacing: -0.026em;
  text-transform: uppercase;
  line-height: 0.95;
  max-width: 15ch;
  margin-bottom: 1.25rem;
}
.site-footer .eyebrow { color: var(--indigo-pale); }
.site-footer .lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  max-width: 48ch;
  margin-bottom: 2rem;
  color: var(--indigo-pale);
}

.footer-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1.75rem, 4vw, 4.5rem);
  padding-bottom: clamp(2.25rem, 5vw, 4rem);
}
@media (max-width: 820px) {
  .footer-main { grid-template-columns: 1fr; align-items: start; }
}

.footer-copy .lead { margin-bottom: 0; }

.footer-actions {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  width: clamp(250px, 27vw, 340px);
}
@media (max-width: 820px) { .footer-actions { width: 100%; max-width: 340px; } }
/* label left, arrow right — the two buttons read as a matched pair */
.footer-actions .btn {
  justify-content: space-between;
  padding-block: clamp(0.85rem, 1.1vw, 1.1rem);
}
.footer-actions .btn { background: var(--paper-2); color: var(--indigo-deep); border-color: var(--paper-2); }
.footer-actions .btn:hover { background: var(--ink); color: var(--paper-2); border-color: var(--ink); }
.footer-actions .btn--ghost { background: transparent; color: var(--paper-2); border-color: rgba(255,255,255,0.5); }
.footer-actions .btn--ghost:hover { background: var(--paper-2); color: var(--indigo-deep); border-color: var(--paper-2); }

/* Barcode — a real Code 128 symbol encoding brianbaldueza.com */
.barcode {
  flex: none;
  width: clamp(150px, 24vw, 230px);
  height: 11px;
  color: var(--paper-2);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.35);
  font-family: var(--mono);
  font-size: var(--fs-xxs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--indigo-pale);
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 1.1rem; }
.footer-bottom a { color: var(--paper-2); text-decoration: none; border-bottom: 1px solid transparent; }
.footer-bottom a:hover { border-bottom-color: var(--paper-2); }

/* ---------- Reveal ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Print ---------- */
@media print {
  body::after, .site-header, .site-footer, .next-project, .btn { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  h1, h2, .work-card__title { color: #000; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  .screen::after, .watch-card::after { display: none; }
  .screen > img { mix-blend-mode: normal; filter: grayscale(1); }
}