/* Julian · site styles. Concept: Two Lines. The Contour mark's two lines run down the left of every page:
   the outer line is strategy, the inner line is craft. Every section is a flat colour field that sets the
   lane colours, and the lanes close into the J beside the wordmark in the footer. */

:root {
  --ink: #111111;
  --paper: #F4F4F1;
  --cobalt: #2B45FF;
  --lime: #C6F432;
  --white: #FFFFFF;
  --grey: #E9E8E4;

  /* the lanes: lw = line weight, li = inner line centre, lo = outer line centre, cl = content left edge */
  --lw: 36px;
  --li: 232px;
  --lo: calc(var(--li) + 2 * var(--lw));
  --cl: 384px;
  --gut: 64px;
  --maxw: 1040px;
  --fb: 56px;
  --nav-h: 96px;
  --edge: max(var(--gut), calc((100% - 1320px) / 2 + var(--gut)));

  --display: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --text: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}
@media (max-width: 1099px) {
  :root { --lw: 24px; --li: 120px; --cl: 228px; --gut: 40px; --fb: 48px; }
}
@media (max-width: 759px) {
  :root { --lw: 8px; --li: 40px; --cl: 80px; --gut: 20px; --fb: 32px; --nav-h: 76px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--ink); color: var(--ink); font-family: var(--text); font-size: 18px; line-height: 1.5; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
.f-lime :focus-visible, .f-paper :focus-visible, .f-white :focus-visible { outline-color: var(--cobalt); }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--lime); color: var(--ink); padding: 10px 14px; font-weight: 600; }
.skip:focus { left: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; /* taste-skill-ignore: screen-reader text, not a rule */ overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- fields and lanes ---------- */
.f-ink    { --bg: var(--ink);    --fg: var(--paper); --soft: #BBBBB5; --lo-c: var(--paper); --li-c: var(--lime);   --btn: var(--cobalt); --btn-fg: var(--white); }
.f-cobalt { --bg: var(--cobalt); --fg: var(--white); --soft: #DDE2FF; --lo-c: var(--ink);   --li-c: var(--lime);   --btn: var(--ink);    --btn-fg: var(--white); }
.f-paper  { --bg: var(--paper);  --fg: var(--ink);   --soft: #555555; --lo-c: var(--ink);   --li-c: var(--cobalt); --btn: var(--cobalt); --btn-fg: var(--white); }
.f-lime   { --bg: var(--lime);   --fg: var(--ink);   --soft: #333333; --lo-c: var(--ink);   --li-c: var(--cobalt); --btn: var(--ink);    --btn-fg: var(--paper); }
.f-white  { --bg: var(--white);  --fg: var(--ink);   --soft: #555555; --lo-c: var(--ink);   --li-c: var(--cobalt); --btn: var(--cobalt); --btn-fg: var(--white); }

.field { position: relative; background: var(--bg); color: var(--fg); padding-block: clamp(80px, 10vw, 136px); }
/* every band carries a little film grain; the two lines now live in the home timeline and the footer, where they close into the J */
.field::before { content: ""; position: absolute; inset: 0; z-index: 0; background: url(assets/grain.svg); opacity: 0.06; pointer-events: none; }
.f-paper::before, .f-white::before, .f-lime::before { filter: invert(1); opacity: 0.09; }
.wrap { position: relative; z-index: 1; max-width: 1320px; margin-inline: auto; padding-inline: var(--gut); }
.wrap p { max-width: 70ch; }
.split h2 { font-size: clamp(28px, 3vw, 44px); }

/* the page top: room for the nav */
.top { padding-top: 0; padding-bottom: clamp(80px, 9vw, 128px); }
.top .wrap { padding-top: calc(var(--nav-h) + clamp(64px, 9vw, 128px)); }

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -0.03em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(32px, 6vw, 88px); line-height: 0.98; }
h2 { font-size: clamp(32px, 4.2vw, 60px); line-height: 1.0; }
h3 { font-size: clamp(24px, 2.6vw, 40px); line-height: 1.05; }
p { margin: 0; }
.lead { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; max-width: 660px; }
.small { font-size: 15px; color: var(--soft); }
.tag { font-size: 15px; font-weight: 600; color: var(--soft); }
.stack > * + * { margin-top: var(--gap, 24px); }

/* ---------- buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 22px;
  background: var(--btn); color: var(--btn-fg); font: 600 18px/1 var(--text); text-decoration: none; border: 0; cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
}
.btn:active { transform: scale(0.97); }
.link { font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; transition: text-decoration-color 200ms ease; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: color-mix(in srgb, var(--btn) 86%, var(--fg)); }
  .link:hover { text-decoration-color: var(--li-c); }
}
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }

/* ---------- header ---------- */
.site-head { position: absolute; z-index: 10; inset: 0 0 auto 0; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--edge); color: var(--fg); }
.brand { display: block; line-height: 0; }
.brand svg { height: 36px; width: auto; }
.site-nav { display: flex; align-items: center; gap: 32px; }
.site-nav a:not(.btn) { color: var(--fg); text-decoration: none; font-size: 15px; padding: 8px 0; }
.site-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.menu-btn { display: none; }
@media (max-width: 900px) {
  .brand svg { height: 30px; }
  .menu-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px; background: none; border: 0; color: var(--fg); font: 600 15px var(--text); cursor: pointer; }
  .menu-btn .bars { position: relative; width: 22px; height: 14px; }
  .menu-btn .bars span { position: absolute; left: 0; width: 22px; height: 2px; background: currentColor; transition: transform 200ms var(--ease-out), opacity 150ms ease; }
  .menu-btn .bars span:nth-child(1) { top: 0; } .menu-btn .bars span:nth-child(2) { top: 6px; } .menu-btn .bars span:nth-child(3) { top: 12px; }
  .menu-btn[aria-expanded="true"] .bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] .bars span:nth-child(2) { opacity: 0; }
  .menu-btn[aria-expanded="true"] .bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .site-nav { display: none; position: absolute; top: var(--nav-h); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--paper); padding: 8px var(--gut) var(--gut); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.18); } /* taste-skill-ignore: the open menu is a real overlay */
  .site-nav.is-open { display: flex; }
  .site-nav a:not(.btn) { color: var(--ink) !important; font-size: 20px; padding: 14px 0; }
  .site-nav .btn { margin-top: 16px; justify-content: space-between; background: var(--lime) !important; color: var(--ink) !important; font-size: 20px; min-height: 60px; }
  .site-nav .btn::after { content: "→"; }
}

/* ---------- home hero ---------- */
.hero h1 { max-width: 15ch; }
.hero .lead { margin-top: 28px; }
.hero .row { margin-top: 36px; }
.hero .now { margin-top: clamp(48px, 6vw, 80px); }

/* ---------- chapters (the four launches) ---------- */
.chapter .lead { margin-top: 20px; }
.chapter h2 { margin-top: 14px; max-width: 18ch; }
.facts { display: flex; flex-wrap: wrap; gap: 16px 40px; margin-top: 28px; }
.facts dt { font-size: 15px; font-weight: 600; color: var(--soft); }
.facts dd { margin: 2px 0 0; font-size: 18px; }
@media (max-width: 759px) { .facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; } }
.chapter-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; margin-top: 40px; align-items: start; }
@media (max-width: 1099px) { .chapter-body { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

.switch { display: inline-flex; padding: 4px; gap: 4px; background: color-mix(in srgb, var(--fg) 14%, transparent); }
.switch button { font: 600 15px var(--text); padding: 0 20px; min-height: 46px; border: 0; background: transparent; color: var(--fg); cursor: pointer; transition: background-color 200ms ease, color 200ms ease; }
.switch button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.view { margin-top: 24px; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 24px; font-size: 18px; line-height: 1.45; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 10px; height: 10px; background: var(--li-c); }
.view .small, .view .link { display: inline-block; margin-top: 20px; }
.view .link { margin-top: 16px; }
.js .view[hidden] { display: none; }
.view.is-swapping, .shot.is-swapping { opacity: 0.4; filter: blur(2px); }
.view, .shot { transition: opacity 200ms var(--ease-out), filter 200ms var(--ease-out); }

.shot { margin: 0; }
.shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; background: var(--grey); }
.shot figcaption { margin-top: 10px; font-size: 15px; color: var(--soft); }
.hole { display: grid; place-items: center; aspect-ratio: 16 / 10; background: var(--grey); color: #555555; text-align: center; padding: 24px; font-size: 15px; line-height: 1.45; }
.f-ink .hole { background: #2A2A2A; color: #BBBBB5; }

/* ---------- how I work: an accordion of tinted panels, darkest to lightest ---------- */
.how-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: end; }
.steps { display: flex; height: 460px; margin-top: 56px; }
.step { position: relative; flex: 1 1 0; min-width: 0; background: var(--sbg); color: var(--sfg); transition: flex-grow 450ms var(--ease-in-out); }
.step:nth-child(1) { --sbg: #0F1A66; --sfg: var(--white); }
.step:nth-child(2) { --sbg: #1E33CC; --sfg: var(--white); }
.step:nth-child(3) { --sbg: #8C9BFF; --sfg: var(--ink); }
.step:nth-child(4) { --sbg: #D5DAFF; --sfg: var(--ink); }
.step.is-open { flex-grow: 5; }
.step-head { position: absolute; inset: 0; width: 100%; background: none; border: 0; color: inherit; cursor: pointer; text-align: left; padding: 0; }
.step-head span { position: absolute; left: 22px; bottom: 26px; transform-origin: left bottom; transform: rotate(-90deg) translateY(100%); white-space: nowrap; font: 800 24px var(--display); letter-spacing: -0.02em; }
.step.is-open .step-head { inset: 0 0 auto 0; height: 96px; cursor: default; }
.step.is-open .step-head span { transform: none; left: 28px; top: 28px; bottom: auto; font-size: 40px; }
.step:not(.is-open) .step-body { visibility: hidden; }
.step-body { position: absolute; left: 28px; right: 28px; bottom: 28px; display: grid; gap: 12px; opacity: 0; transition: opacity 250ms var(--ease-out); }
.step.is-open .step-body { opacity: 1; transition-delay: 200ms; }
.step-body p { font-size: 18px; max-width: 46ch; }
.step-body .seen { font-size: 15px; opacity: 0.85; }
@media (max-width: 1099px) {
  .how-head { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .steps { flex-direction: column; height: auto; margin-top: 32px; }
  .step { flex: none; }
  .step-head, .step.is-open .step-head { position: relative; inset: auto; height: auto; min-height: 64px; padding: 18px 20px; }
  .step-head span, .step.is-open .step-head span { position: static; transform: none; font-size: 22px; }
  .step-body { position: static; display: none; opacity: 1; padding: 0 20px 22px; }
  .step.is-open .step-body { display: grid; }
}

/* ---------- the numbers: each one is a marker crossing the lanes ---------- */
.names { margin-top: 24px; font-size: clamp(20px, 2.2vw, 30px); line-height: 1.3; max-width: 900px; }
.names .nm { color: #A9B4FF; transition: color 400ms ease; }
.names .nm.is-lit, .no-js .names .nm { color: var(--white); }
.markers { list-style: none; margin: 56px 0 0; padding: 0; display: grid; gap: clamp(40px, 4.4vw, 64px); }
.markers li { position: relative; display: grid; grid-template-columns: clamp(150px, 15vw, 230px) minmax(0, 1fr); align-items: baseline; gap: 4px 20px; }
@media (max-width: 759px) { .markers li { grid-template-columns: minmax(0, 1fr); } }
.markers li::before {
  content: ""; position: absolute; top: 0.62em; height: 10px;
  left: calc(var(--li) - 1.5 * var(--lw) - var(--cl)); width: calc(5 * var(--lw));
  background: var(--fg);
}
.markers b { font: 800 clamp(30px, 2.8vw, 40px)/1 var(--display); letter-spacing: -0.03em; }
@media (max-width: 759px) { .markers li::before { height: 6px; top: 0.5em; } }

/* ---------- about teaser ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
@media (max-width: 1099px) { .split { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

/* ---------- the "Hi Julian" sentence form ---------- */
.brief .contact-sentence { margin-top: 12px; }
.brief .fill { display: inline-block; width: min(100%, 16ch); font: inherit; letter-spacing: inherit; color: var(--ink); background: var(--white); border: 0; border-radius: 0; padding: 0 0.25em; height: 1.15em; vertical-align: baseline; }
.brief .fill::placeholder { color: #767676; }
.fields { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; margin-top: 40px; }
.fields label { display: grid; gap: 6px; font-size: 15px; font-weight: 600; flex: 1 1 240px; max-width: 320px; }
.fields input { height: 52px; border: 0; border-radius: 0; background: var(--white); color: var(--ink); font: 18px var(--text); padding: 0 14px; }
.fields .btn { flex: 0 0 auto; }
.form-note { margin-top: 20px; font-size: 15px; min-height: 1.5em; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* taste-skill-ignore: hidden spam trap, not a rule */
@media (max-width: 759px) { .brief .fill { width: 100%; display: block; margin-top: 8px; height: 1.6em; font-size: 20px; } .fields label { max-width: none; } }

/* ---------- footer: the lanes close into the J beside the wordmark ---------- */
.site-foot { --bg: var(--ink); --fg: var(--paper); --soft: #BBBBB5; --lo-c: var(--paper); --li-c: var(--lime);
  position: relative; background: var(--bg); color: var(--fg); padding-top: 72px; padding-bottom: calc(var(--fb) + 8.8 * var(--lw) + 64px); }
.site-foot::before, .site-foot::after { content: ""; position: absolute; top: 0; bottom: calc(var(--fb) + 5.5 * var(--lw)); width: var(--lw); }
.site-foot::before { left: calc(var(--li) - var(--lw) / 2); background: var(--li-c); }
.site-foot::after  { left: calc(var(--lo) - var(--lw) / 2); background: var(--lo-c); }
/* the footer text starts right of the two lines, so no line ever runs through a link (fix, Nov 6) */
.site-foot .wrap { max-width: none; padding-left: calc(var(--lo) + var(--lw) / 2 + var(--gut)); padding-right: var(--edge); }
.foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.foot-cols h2 { font: 600 15px var(--text); letter-spacing: 0; }
.foot-cols ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.foot-cols a, .foot-cols li { color: var(--soft); text-decoration: none; font-size: 15px; }
.foot-cols a:hover { color: var(--fg); }
.j-close { position: absolute; left: calc(var(--li) - 4.5 * var(--lw)); bottom: var(--fb); width: calc(7 * var(--lw)); height: calc(5.5 * var(--lw)); overflow: visible; }
.foot-word { position: absolute; left: calc(var(--li) + 3.4 * var(--lw)); bottom: var(--fb); height: calc(8.8 * var(--lw)); width: auto; }
@media (max-width: 1099px) { .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 759px) {
  .site-foot { padding-bottom: calc(var(--fb) + 120px); }
  .foot-word { height: 84px; left: calc(var(--li) + 3.6 * var(--lw)); }
}

/* ---------- inner pages ---------- */
.page-hero h1 { max-width: 16ch; }
.page-hero .lead { margin-top: 24px; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
@media (max-width: 1099px) { .two-col { grid-template-columns: minmax(0, 1fr); gap: 36px; } }
.col-head p { margin-top: 6px; }
.media-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
@media (max-width: 759px) { .media-row { grid-template-columns: minmax(0, 1fr); } }
.big-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 32px; }
.big-nums b { display: block; font: 800 clamp(40px, 4vw, 56px)/1 var(--display); color: var(--li-c); }
@media (max-width: 759px) { .big-nums { grid-template-columns: minmax(0, 1fr); } }
.next { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; }

/* resume */
.cv h2 { font-size: clamp(28px, 2.6vw, 40px); }
.cv ol { list-style: none; margin: 18px 0 0; padding: 0; }
.cv li { padding: 14px 0; }
.cv li b { display: block; font-size: 18px; }
.cv li span { font-size: 18px; color: var(--soft); }

/* about */
.portrait { aspect-ratio: 4 / 5; }
.films { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
.film img, .film .film-loop { aspect-ratio: 1 / 1; height: auto; object-fit: cover; object-position: center; }
.films figcaption { margin-top: 10px; font-size: 15px; }
@media (max-width: 759px) { .films { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
.bg-rows { display: grid; gap: 22px; margin-top: 36px; }
.bg-rows div { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; }
.bg-rows dd { max-width: 64ch; }
@media (max-width: 759px) { .bg-rows div { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
.bg-rows dt { font-weight: 600; } .bg-rows dd { margin: 0; }

/* case galleries */
.gallery { columns: 3 260px; column-gap: 16px; margin-top: 40px; }
.gallery figure { break-inside: avoid; margin: 0 0 16px; }
.gallery img { width: 100%; height: auto; background: #222; }
.gallery figcaption { margin-top: 8px; font-size: 15px; color: var(--soft); }
.film-loop { width: 100%; height: 100%; object-fit: cover; }

/* other work: the wall */
.sorter { display: inline-flex; gap: 8px; margin-top: 32px; }
.sorter button { font: 600 15px var(--text); min-height: 44px; padding: 0 18px; border: 0; background: var(--white); color: var(--ink); cursor: pointer; transition: background-color 200ms ease, color 200ms ease, transform 160ms var(--ease-out); }
.sorter button:active { transform: scale(0.97); }
.sorter button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.wall { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 190px; grid-auto-flow: dense; gap: 8px; margin-top: 40px; max-width: none !important; }
.tile { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; padding: 16px; background: var(--tbg, var(--white)); color: var(--tfg, var(--ink)); overflow: hidden; }
.tile.w2 { grid-column: span 2; } .tile.h2 { grid-row: span 2; } .tile.w3 { grid-column: span 3; }
.tile .kind { font-size: 15px; font-weight: 600; opacity: 0.75; }
.tile b { display: block; font-size: 18px; }
.tile span.sub { font-size: 15px; }
.tile img, .tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.tile.has-img { --tbg: var(--ink); color: var(--white); justify-content: flex-end; }
.tile.has-img::after { content: ""; position: absolute; inset: 40% 0 0 0; background: linear-gradient(to top, rgba(17, 17, 17, 0.85), rgba(17, 17, 17, 0)); } /* taste-skill-ignore: neutral scrim under text on a photo */
.tile.has-img > :not(img) { position: relative; z-index: 1; }
.tile.hole-tile { --tbg: var(--grey); }
.tile.hole-tile .need { font-size: 15px; color: #555555; }
.tile[hidden] { display: none; }
@media (max-width: 1099px) { .wall { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 759px) { .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 160px; } .tile.w3 { grid-column: span 2; } }

/* contact */
.contact-sentence { font: 800 clamp(24px, 2.8vw, 40px)/1.4 var(--display); letter-spacing: -0.02em; margin-top: 28px; }
.contact-sentence .fill { width: min(100%, 11ch); }
.contact-sentence .fill.wide { width: min(100%, 21ch); }

/* utility pages: one centred column */
.narrow .wrap { max-width: 1040px; }
.narrow .prose { max-width: none; }

/* privacy */
.prose { max-width: 760px; }
.prose h2 { font-size: clamp(24px, 2.2vw, 30px); margin-top: 40px; }
.prose p { margin-top: 10px; }


/* ---------- motion ---------- */
/* parts of each section rise in, staggered, once */
.js [data-reveal] > * { opacity: 0; transform: translateY(24px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.js [data-reveal].in > * { opacity: 1; transform: none; }
.js [data-reveal].in > *:nth-child(2) { transition-delay: 70ms; }
.js [data-reveal].in > *:nth-child(3) { transition-delay: 140ms; }
.js [data-reveal].in > *:nth-child(4) { transition-delay: 210ms; }
.js [data-reveal].in > *:nth-child(n+5) { transition-delay: 280ms; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] > * { opacity: 1; transform: none; transition: none; }   /* the reduced page is the finished page: nothing waits for a scroll */
  .step, .step-body, .view, .shot { transition: none; }
}

/* ---------- work: one grid of projects, filtered by discipline pages ---------- */
.tag-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.tag-nav a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; background: #222222; color: var(--paper); font-size: 15px; font-weight: 600; text-decoration: none; transition: background-color 200ms ease, color 200ms ease; }
.tag-nav a span { color: var(--soft); font-weight: 400; }
.tag-nav a[aria-current="page"] { background: var(--lime); color: var(--ink); }
.tag-nav a[aria-current="page"] span { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .tag-nav a:not([aria-current]):hover { background: #333333; } }
.pgrid { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 24px; max-width: none !important; }
.pcard { display: grid; align-content: start; gap: 12px; }
.pcard > a { display: grid; gap: 12px; color: inherit; text-decoration: none; }
.pcard-pic { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #222222; }
.pcard-pic img, .pcard-pic video { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 500ms var(--ease-out); }
.pcard-meta { font-size: 15px; color: var(--soft); }
.pcard-title { font: 800 clamp(22px, 2vw, 28px)/1.1 var(--display); letter-spacing: -0.02em; }
.pcard.text-card > a { min-height: 100%; align-content: end; padding: 24px; background: var(--lime); color: var(--ink); aspect-ratio: 16 / 10; }
.pcard.text-card .pcard-meta { color: #333333; }
@media (hover: hover) and (pointer: fine) {
  .pcard > a:hover .pcard-pic img, .pcard > a:hover .pcard-pic video { transform: scale(1.03); }
  .pcard > a:hover .pcard-title { color: var(--lime); }
  .pcard.text-card > a:hover .pcard-title { color: var(--ink); text-decoration: underline; }
}
@media (min-width: 1100px) {
  .pgrid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .pcard { grid-column: span 2; }
  .pcard.big { grid-column: span 3; }
  .pcard.big .pcard-title { font-size: clamp(28px, 2.6vw, 38px); }
}
@media (min-width: 760px) and (max-width: 1099px) { .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 759px) { .pgrid { grid-template-columns: minmax(0, 1fr); gap: 40px; } }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { font-size: 13px; line-height: 1; } /* taste-skill-ignore: tag labels, not body text */
.chips li, .chips a { display: inline-block; padding: 6px 10px; background: #262626; color: #CFCFC9; text-decoration: none; }
.chips li:has(a) { padding: 0; background: none; }
.page-hero .chips { margin-top: 28px; }
.page-hero .chips a { font-size: 15px; padding: 10px 14px; min-height: 44px; display: inline-flex; align-items: center; color: var(--paper); transition: background-color 200ms ease, color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .page-hero .chips a:hover { background: var(--lime); color: var(--ink); } }
.status { display: inline-block; margin: 20px 0 0; padding: 6px 12px; background: var(--lime); color: var(--ink); font-size: 15px; font-weight: 600; }
.hero-media { padding-top: 0; }
.lead-media { margin: 0; }
.lead-media img, .lead-media video { width: 100%; height: auto; background: #222222; }
.lead-media.is-tall { max-width: 440px; margin-inline: auto; }
.tri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tri figure { margin: 0; max-width: none; }
.tri img, .tri video { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; object-position: center; background: #222222; }
.tri figcaption { margin-top: 10px; font-size: 15px; color: var(--soft); }
@media (max-width: 759px) { .tri { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .tri figure:first-child { grid-column: span 2; } }
.lead-media figcaption, .gallery figcaption { margin-top: 10px; font-size: 15px; color: var(--soft); }
.visit { margin-top: 20px; }
.page-hero .lead { max-width: 60ch; }
.related .pgrid { margin-top: 40px; }
.f-paper .pcard-pic { background: var(--grey); }
.f-paper .chips li { background: var(--grey); color: #444444; }
@media (hover: hover) and (pointer: fine) { .f-paper .pcard > a:hover .pcard-title { color: var(--cobalt); } }
@media (min-width: 1100px) { .related .pcard { grid-column: span 2; } }
.gallery video { width: 100%; height: auto; background: #222222; }
.gallery figure.is-tall { max-width: 360px; }
.hero-split { align-items: start; }
@media (min-width: 1100px) { .hero-split { grid-template-columns: minmax(0, 1fr) 400px; gap: 64px; } .hero-split h1 { max-width: 14ch; } }
.hero-split .lead-media.is-tall { max-width: 400px; margin-inline: auto 0; }
.hero-split .lead-media video { max-height: 78svh; width: auto; margin-inline: auto; }

/* ---------- round corners (Nov 5, 2026): pictures and cards take the large radius, controls the small one ---------- */
:root { --r-lg: 18px; --r-sm: 12px; }
.shot img, .gallery img, .gallery video, .lead-media img, .lead-media video, .tri img, .tri video,
.film img, .film .film-loop, .portrait, .pcard-pic, .pcard.text-card > a { border-radius: var(--r-lg); }
.pcard-pic, .shot { overflow: hidden; }
.btn, .tag-nav a, .chips li, .chips a, .status, .fields input, .brief .fill, .sorter button, .skip { border-radius: var(--r-sm); }
.chips li:has(a) { border-radius: 0; }
@media (max-width: 1099px) { .site-nav .btn { border-radius: var(--r-sm); } }

/* ---------- the two lines, across the site (round 4): the strategy line frames the work, the craft line tracks it ---------- */
[data-frame] { position: relative; display: block; }
.frame-line { position: absolute; inset: -7px; width: calc(100% + 14px); height: calc(100% + 14px); pointer-events: none; overflow: visible; }
.frame-line rect { fill: none; stroke: var(--lo-c); stroke-width: 3; stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1100ms var(--ease-in-out); }
[data-frame].is-drawn .frame-line rect { stroke-dashoffset: 0; }
[data-frame="hover"] .frame-line rect { transition-duration: 600ms; }
@media (hover: hover) and (pointer: fine) {
  a:hover [data-frame="hover"] .frame-line rect { stroke-dashoffset: 0; }
  .pcard > a:hover .pcard-pic img, .pcard > a:hover .pcard-pic video, .launch:hover .launch-img img { transform: none; }
}
a:focus-visible [data-frame="hover"] .frame-line rect { stroke-dashoffset: 0; }
.craft-bar { display: block; height: 6px; margin-top: 22px; border-radius: 3px; background: #2E2E2E; overflow: hidden; }
.craft-bar i { display: block; height: 100%; border-radius: 3px; background: var(--li-c); transform-origin: left center; transform: scaleX(0); }
.is-drawn + .craft-bar i.is-still { transform: scaleX(1); transition: transform 900ms var(--ease-out) 700ms; }
@media (prefers-reduced-motion: reduce) { .frame-line rect { transition: none; stroke-dashoffset: 0; } .craft-bar i { transform: scaleX(1); } }

/* ---------- the resume: dates, the role and what I did, a piece of the work ---------- */
.cv-roles { list-style: none; margin: 56px 0 0; padding: 0; display: grid; gap: 48px; }
.cv-role { display: grid; grid-template-columns: 170px minmax(0, 1fr) 220px; gap: 0 40px; align-items: start; }
.cv-when { margin: 6px 0 0; color: var(--soft); font-size: 16px; }
.cv-info h3, .cv-early-item h3 { font-size: clamp(22px, 2vw, 28px); }
.cv-org { margin: 6px 0 0; color: var(--soft); font-size: 16px; }
.cv .cv-pts { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.cv .cv-pts li { position: relative; padding: 0 0 0 22px; font-size: 17px; line-height: 1.45; max-width: 60ch; }
.cv .cv-pts li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 10px; height: 3px; border-radius: 2px; background: var(--lime); }
.cv-proof { display: grid; gap: 8px; color: var(--paper); text-decoration: none; font-size: 15px; font-weight: 600; }
.cv-proof img, .cv-proof video { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 12px; background: #222222; }
@media (hover: hover) and (pointer: fine) { .cv-proof:hover .cv-proof-t { color: var(--lime); } }
@media (max-width: 899px) { .cv-role { grid-template-columns: minmax(0, 1fr) 180px; gap: 4px 20px; } .cv-when { grid-column: 1 / -1; margin: 0; } }
@media (max-width: 520px) { .cv-role { grid-template-columns: minmax(0, 1fr); } .cv-proof { max-width: 220px; margin-top: 16px; } }
.cv-early-h { margin-top: 88px; font-size: clamp(28px, 3vw, 44px); }
.cv-early { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 48px; }
.cv-early-item { padding: 28px; border-radius: var(--r-lg); background: #1C1C1C; }
.cv-early-item .cv-when { margin: 0 0 8px; }
@media (max-width: 899px) { .cv-early { grid-template-columns: minmax(0, 1fr); gap: 20px; } .cv-early-item { padding: 22px; } }

/* the About avatar stands in for a photo (Julian, Nov 5, 2026): keep its own shape */
.about-drawing img { width: 100%; height: auto; aspect-ratio: 900 / 1115; object-fit: cover; background: #1C1C1C; border-radius: var(--r-lg); }

/* long words wrap on a phone instead of running off the edge */
.form-note, .prose p, .foot-cols a { overflow-wrap: anywhere; }
/* the resume's focus line: the keywords a skim (and an applicant tracking system) looks for, Nov 7 */
.cv-focus { margin-top: 16px; font-size: 15px; font-weight: 600; color: var(--soft); max-width: 70ch; }

/* ---------- handoff pass, Nov 7 ---------- */
/* a tag page with only two projects shows them two-up and large, not two cards and an empty third column */
@media (min-width: 1100px) { .pgrid--pair .pcard { grid-column: span 3; } .pgrid--pair .pcard-title { font-size: clamp(28px, 2.6vw, 38px); } }
/* legal pages read at a comfortable measure */
.prose p, .prose li { max-width: 58ch; }   /* about 75 characters in Geist */
/* tablet: the side-by-side heroes collapse to one column, so the avatar and a tall film are capped instead of filling the width */
@media (max-width: 1099px) {
  .about-drawing { max-width: 340px; }
  .hero-split .lead-media.is-tall { max-width: 300px; margin-inline: 0; }
  .hero-split .lead-media video { max-height: 62svh; }
}
/* tap targets: every link and field is at least 44px tall to a finger, without changing how anything looks (Nov 7) */
.link { display: inline-block; padding-block: 10px; margin-block: -10px; }
.brand { padding-block: 7px; margin-block: -7px; }
.foot-cols ul { gap: 0; }
.foot-cols a { display: inline-block; padding-block: 12px; margin-block: -6px; }
@media (max-width: 759px) { .brief .fill { min-height: 44px; } }

/* a short page-hero (the 404) hands straight on to the next section */
.page-hero.short { padding-bottom: clamp(40px, 5vw, 64px); }
/* one recommendation at a time, word for word from LinkedIn: big type, the speaker small under it (Nov 7) */
.quote { margin: 40px 0 0; max-width: 52ch; }
.quote blockquote { margin: 0; }
.quote p { font: 700 clamp(21px, 2vw, 28px)/1.3 var(--display); letter-spacing: -0.01em; color: var(--fg); max-width: none; }
.quote figcaption { margin-top: 12px; font-size: 15px; color: var(--soft); }
.big-nums + .quote { margin-top: 56px; }
/* a results block with a single number: the number and its sentence side by side, so the row isn't two-thirds empty */
.big-nums:has(> div:only-child) { grid-template-columns: minmax(0, 1fr); }
.big-nums > div:only-child { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 32px; }
.big-nums > div:only-child p { margin: 0; font-size: clamp(20px, 2vw, 28px); line-height: 1.3; max-width: 32ch; }
/* the top of every page is there from the first frame: the title never waits for the reveal (Nov 7) */
.js .top [data-reveal]:has(> h1) > * { opacity: 1; transform: none; transition: none; }
/* two results share the row */
.big-nums:has(> div:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 759px) { .big-nums:has(> div:nth-child(2):last-child) { grid-template-columns: minmax(0, 1fr); } }
/* a social video he directed: the cover holds its 9:16 shape; Instagram's player replaces it only when pressed (Nov 7) */
.reel-split { align-items: center; }
@media (min-width: 1100px) { .reel-split { grid-template-columns: minmax(0, 1fr) 380px; } }
.reel { margin: 0; width: min(380px, 100%); justify-self: center; }
.reel-play { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: var(--r-lg); overflow: hidden; background: #000; cursor: pointer; aspect-ratio: 9 / 16; }
.reel-play img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 500ms var(--ease-out); }
.reel-btn { position: absolute; left: 16px; bottom: 16px; padding: 12px 18px; border-radius: var(--r-sm); background: var(--lime); color: var(--ink); font: 600 16px var(--text); }
@media (hover: hover) and (pointer: fine) { .reel-play:hover img { transform: scale(1.03); } }
.reel iframe { display: block; width: 100%; height: 760px; border: 0; border-radius: var(--r-lg); background: #fff; }
.reel figcaption { margin-top: 10px; font-size: 15px; color: var(--soft); }
/* the resume: one line on why each company matters, under its name (Nov 7) */
.cv-about { margin: 4px 0 0; font-size: 15px; color: var(--soft); max-width: 60ch; }