/* Jameson Gilmore portfolio. Same token system as the Dirtbag site: colors, type scale and spacing
   scale live up here, and everything below uses them. */

@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 400 900; font-stretch: 62% 125%; font-display: swap;
  src: url("fonts/archivo-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Courier Prime"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/courier-prime-latin.woff2") format("woff2");
}

:root {
  --bg: #ffffff;
  --bg-2: #f3f4f5;
  --fg: #0e1012;
  --muted: #5f656d;
  --line: rgba(14, 16, 18, 0.16);
  --accent: #0b7a68;       /* teal, dark enough to read as text on white (5:1) */
  --accent-ink: #ffffff;
  --draft: #c2410c;
  --display: "Archivo", "Arial Narrow", sans-serif;
  --body: "Archivo", system-ui, sans-serif;
  --type: "Courier Prime", "Courier New", monospace;
  --gutter: clamp(16px, 5vw, 56px);
  --max: 1440px;

  --t-label: 0.75rem;
  --t-small: 0.875rem;
  --t-body: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
  --t-lead: clamp(1.25rem, 1.05rem + 0.85vw, 1.75rem);
  --t-h3: clamp(1.5rem, 1.2rem + 1.1vw, 2.25rem);
  --t-h2: clamp(2.75rem, 1.65rem + 4.7vw, 6rem);
  --t-h1: clamp(3.25rem, 1.9rem + 5.8vw, 8rem);
  --t-display: clamp(4.25rem, 2rem + 11vw, 11rem);
  --wdth: "wdth" 62;
  --track-caps: 0.2em;
  --measure: 62ch;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: clamp(32px, 2rem + 1.5vw, 48px);
  --s-7: clamp(48px, 2.5rem + 3vw, 80px);
  --s-8: clamp(56px, 2.5rem + 6vw, 128px);
  --header-h: 64px;
}

* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg); min-height: 100vh;
  font: 400 var(--t-body)/1.6 var(--body); font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
  display: flex; flex-direction: column;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 3px; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--accent); color: var(--accent-ink); padding: 8px 12px; }
.skip:focus { left: 8px; }

h1, h2, .show-title { margin: 0; font-family: var(--display); font-weight: 800; font-variation-settings: var(--wdth); line-height: 0.9; letter-spacing: -0.01em; text-transform: uppercase; text-wrap: balance; }
h2 { font-size: var(--t-h2); }
.eyebrow { margin: 0 0 var(--s-4); font: 400 var(--t-label)/1.4 var(--type); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--muted); }

/* Placeholder copy gets a DRAFT tag so it can't pass for final. */
.draft {
  display: inline-block; padding: 2px 6px; border-radius: 3px; background: var(--draft); color: #fff;
  font: 400 0.625rem/1.4 var(--type); letter-spacing: 0.1em; vertical-align: middle; text-transform: uppercase;
}

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 20; height: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: env(safe-area-inset-top, 0px) var(--gutter) 0;
  background: var(--bg); border-bottom: 1px solid transparent; transition: border-color 0.3s;
}
.site-header, .site-header.is-scrolled { border-bottom-color: transparent; }
.brand { text-decoration: none; font: 700 var(--t-small)/1 var(--body); letter-spacing: var(--track-caps); text-transform: uppercase; min-height: 44px; display: flex; align-items: center; transition: opacity 0.3s; }
.home .brand, .home .site-header.is-scrolled .brand { display: none; } /* the signature is the name on the home page */
.site-nav { display: flex; gap: clamp(14px, 3vw, 32px); margin-left: auto; }
.site-nav a {
  position: relative; text-decoration: none; color: var(--muted); font: 400 var(--t-label)/1 var(--body);
  letter-spacing: var(--track-caps); text-transform: uppercase; padding: 8px 0; transition: color 0.2s;
}
.site-nav a::after { content: ""; position: absolute; inset: -10px -6px; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--fg); }
.site-nav a[aria-current="page"] { box-shadow: 0 2px 0 var(--accent); }

main { flex: 1; width: 100%; }
.page { max-width: var(--max); margin: 0 auto; padding: calc(var(--header-h) + var(--s-7)) var(--gutter) var(--s-8); }
.pagehead { font-size: var(--t-h1); margin-bottom: var(--s-6); }

/* ---------- Home: opening screen ----------
   A full-screen photo behind the name. The photo is zoomed to fill the screen and positioned so the rider
   stays near the middle: the image is placed with the rider at 50% across and 58% down, then sized so no
   edge shows. If you swap the photo, change the two translate percentages (where the subject sits in it). */
.hero {
  position: relative; isolation: isolate; overflow: hidden; width: 100%; min-height: 100svh; text-align: center;
  padding: calc(var(--header-h) + var(--s-7)) var(--gutter) calc(var(--s-8) + 40px);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: var(--s-7);
}
.hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-bg img {
  position: absolute; left: 50%; top: 58%; width: max(118vw, 110svh); max-width: none; height: auto;
  transform: translate(-57.5%, -70%);
}
.hero h1 { font-size: var(--t-display); line-height: 0.86; }
.hero h1 span { display: block; }
/* A handwritten signature in place of the typed name. */
.hero h1.sig { line-height: 0; }
.hero h1.sig img { width: min(86vw, 860px); height: auto; margin: 0 auto; }
.hero .eyebrow { margin-bottom: var(--s-5); color: var(--fg); }
.hero .doors { margin: 0; width: 100%; max-width: 900px; }
@media (min-width: 720px) { .hero .doors { grid-template-columns: repeat(2, 1fr); max-width: 600px; } }
.hero .door { text-align: center; }
@media (max-width: 719px) { .hero .doors { gap: var(--s-2); } }

/* Scroll indicator: a line with a moving dot. Click it to glide to the work. Hover grows the line. */
.scroll-cue {
  position: absolute; left: 50%; bottom: 16px; margin-left: -32px; width: 64px; min-height: 64px; justify-content: flex-end;
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; color: var(--fg);
}
.scroll-line { position: relative; width: 1px; height: 34px; background: var(--fg); transform-origin: top; transition: transform 0.3s ease, background-color 0.2s; }
.scroll-line::after {
  content: ""; position: absolute; left: -3px; top: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  animation: cue 1.8s ease-in-out infinite;
}
.scroll-cue:hover .scroll-line, .scroll-cue:focus-visible .scroll-line { transform: scaleY(1.35); background: var(--accent); }
@keyframes cue { 0% { transform: translateY(0); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(28px); opacity: 0; } }

/* The doors: framed like a camera viewfinder, one per kind of work. */
.doors { display: grid; gap: var(--s-5); margin-top: var(--s-7); max-width: 560px; }
/* Interactive text: no boxes. A thin line draws in under the words on hover, and the text takes the accent colour. */
.door, .btn, .filters button, .row-copy { background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 2px no-repeat; transition: background-size 0.3s ease, color 0.2s; }
.door:hover, .door:focus-visible, .btn:hover, .btn:focus-visible, .filters button:hover, .filters button:focus-visible, .row-copy:hover, .row-copy:focus-visible { background-size: 100% 2px; color: var(--accent); }
.door {
  position: relative; display: inline-flex; align-items: center; justify-self: center; min-height: 44px; padding: 10px 2px;
  text-decoration: none; text-transform: uppercase; font: 500 var(--t-small)/1.2 var(--body); letter-spacing: var(--track-caps);
}
.door::after { content: ""; position: absolute; inset: -6px -10px; }

/* Contact: compact rows, label then value, the same in every group. */
.contact .pagehead { margin-bottom: var(--s-5); }
.contact-lead { font-size: var(--t-lead); max-width: 44ch; color: var(--muted); margin: 0 0 var(--s-7); }
.contact-group { max-width: 720px; margin: 0 0 var(--s-7); }
.contact-group .eyebrow { font-weight: 400; margin-bottom: var(--s-3); }
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.rows li { display: flex; align-items: center; gap: var(--s-4); border-bottom: 1px solid var(--line); }
.row { flex: 1; min-width: 0; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--s-4); align-items: baseline; min-height: 52px; padding: 14px 0; text-decoration: none; }
.row-label { font: 400 var(--t-label)/1.4 var(--type); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--muted); }
.row-value { font-weight: 600; overflow-wrap: anywhere; transition: color 0.2s; }
.row:hover .row-value, .row:focus-visible .row-value { color: var(--accent); }
.row-copy { font: 400 var(--t-label)/1 var(--type); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--muted); border: 0; padding: 8px 2px; min-height: 32px; min-width: 64px; cursor: pointer; position: relative; -webkit-appearance: none; appearance: none; }
.row-copy::after { content: ""; position: absolute; inset: -6px; }
@media (max-width: 480px) { .row { grid-template-columns: 88px minmax(0, 1fr); gap: var(--s-3); } .row-value { font-size: 0.9375rem; } }

/* Photos are always shown whole: never cropped. A hairline keeps pale photos from dissolving into the white page. */
.hero-img img { outline: 1px solid var(--line); }
.hero-img figcaption, .about figcaption { color: var(--muted); font: 400 var(--t-small)/1.5 var(--type); margin-top: var(--s-3); }

/* ---------- Work grid ---------- */
.work, .cta { max-width: var(--max); margin: 0 auto; padding: var(--s-8) var(--gutter); }
.work h2 { margin-bottom: var(--s-6); }
/* The work grid is packed tight: columns of whole, uncropped images with a hairline gap between them. */
.grid { --gap: 6px; columns: 2; column-gap: var(--gap); }
@media (min-width: 720px) { .grid { columns: 3; } }
@media (min-width: 1200px) { .grid { columns: 4; } }
.tile { text-decoration: none; display: block; break-inside: avoid; margin: 0 0 var(--gap); }
.tile figure { margin: 0; }
.tile img { width: 100%; height: auto; }
.tile img { transition: opacity 0.2s; }
.tile:hover img, .tile:focus-visible img { opacity: 0.8; }
.tile[hidden] { display: none; }
.ph { aspect-ratio: 4 / 5; background: var(--bg-2); display: grid; place-items: center; color: var(--muted); font: 400 var(--t-small)/1 var(--type); border: 1px dashed var(--line); }
.more { margin-top: var(--s-7); }

/* Buttons: clear background, framed by the same viewfinder corners as the doors. The corners grow on hover. */
.btn {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 10px 2px; text-decoration: none; cursor: pointer;
  color: var(--fg); text-transform: uppercase; font: 500 var(--t-small)/1.2 var(--body); letter-spacing: var(--track-caps);
  border: 0; border-radius: 0; -webkit-appearance: none; appearance: none;
}
.btn-solid { color: var(--fg); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-4); margin: var(--s-6) 0; }

.filters { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-bottom: var(--s-7); }
.filters[hidden] { display: none; }
.filters button {
  font: 500 var(--t-label)/1.2 var(--body); letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--muted); border: 0; border-radius: 0; padding: 10px 2px; min-height: 44px; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.filters button[aria-pressed="true"] { color: var(--fg); background-size: 100% 2px; }

/* ---------- Contact band ---------- */
.cta { background: var(--bg-2); max-width: none; padding-left: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))); padding-right: var(--gutter); display: grid; gap: var(--s-5); justify-items: start; }
.cta .eyebrow, .cta h2 { margin-bottom: 0; }
.cta-line { font-size: var(--t-lead); max-width: 28ch; color: var(--muted); }

/* ---------- Project, About, Contact ---------- */
.project .pagehead { font-size: var(--t-h2); }
.hero-img { margin: 0 0 var(--s-6); }
.hero-img img { width: auto; max-width: 100%; max-height: 90vh; }
.note { max-width: var(--measure); font-size: var(--t-lead); margin-bottom: var(--s-6); }
.note a { color: var(--accent); }
.pager { display: flex; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.pager a { text-decoration: none; color: var(--muted); }
.pager a:hover { color: var(--accent); }
.about { display: grid; gap: var(--s-6); }
.about figure { margin: 0; max-width: 480px; }
@media (min-width: 800px) { .about { grid-template-columns: minmax(0, 420px) 1fr; gap: var(--s-7); } }
.prose { max-width: 38em; font-size: var(--t-lead); }
.prose p { margin-bottom: 1em; }
.prose a { color: var(--accent); }
.links { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }

/* ---------- Legal pages ---------- */
.legal .pagehead { font-size: var(--t-h2); }
.legal-banner { max-width: var(--measure); padding: var(--s-4) var(--s-5); border: 1px dashed var(--draft); font: 400 var(--t-small)/1.6 var(--type); margin-bottom: var(--s-4); }
.legal-date { font: 400 var(--t-label)/1.4 var(--type); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--muted); margin-bottom: var(--s-7); }
.legal .prose { font-size: var(--t-body); }
.legal .prose h2 { font-size: var(--t-h3); line-height: 1; margin: var(--s-7) 0 var(--s-3); }
.legal .prose h2:first-child { margin-top: 0; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: var(--s-7) var(--gutter) calc(var(--s-5) + env(safe-area-inset-bottom, 0px)); display: grid; gap: var(--s-5); max-width: var(--max); width: 100%; margin: 0 auto; }
.foot-name { font: 800 var(--t-h3)/1 var(--display); font-variation-settings: var(--wdth); text-transform: uppercase; }
.foot-nav { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); }
.foot-nav a { color: var(--muted); text-decoration: none; font: 400 var(--t-label)/1 var(--body); letter-spacing: var(--track-caps); text-transform: uppercase; padding: 10px 0; }
.foot-nav a:hover, .foot-legal a:hover { color: var(--accent); }
.foot-legal { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.foot-legal a { color: var(--muted); text-decoration: none; font: 400 var(--t-small)/1 var(--body); padding: 10px 0; }
.foot-small { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); color: var(--muted); font: 400 var(--t-small)/1.4 var(--type); }
.foot-small a { color: var(--muted); }

/* ---------- Project details and the magazine's pages ---------- */
.back { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: var(--s-4); color: var(--muted); text-decoration: none; font: 400 var(--t-label)/1 var(--body); letter-spacing: var(--track-caps); text-transform: uppercase; }
.back:hover { color: var(--accent); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s-5); margin: 0 0 var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.facts dt { font: 400 var(--t-label)/1.4 var(--type); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--muted); margin-bottom: var(--s-1); }
.facts dd { margin: 0; }
.credit { color: var(--muted); font: 400 var(--t-small)/1.5 var(--type); margin-top: var(--s-6); }
.pages-intro { font: 400 var(--t-label)/1.4 var(--type); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--muted); margin-bottom: var(--s-5); }
.pages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-5) var(--s-4); align-items: start; }
@media (min-width: 640px) { .pages { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .pages { grid-template-columns: repeat(5, 1fr); } }
.pages-rest { margin-top: var(--s-5); }
.js .pages-rest:not(.open) { display: none; }
.page-link { display: block; text-decoration: none; }
.page-link img { width: 100%; height: auto; outline: 1px solid transparent; outline-offset: 3px; transition: outline-color 0.2s; }
.page-link:hover img, .page-link:focus-visible img { outline-color: var(--accent); }
.pn { display: block; margin-top: var(--s-2); font: 400 var(--t-label)/1 var(--type); letter-spacing: 0.1em; color: var(--muted); }

/* The page reader: one whole page at a time, arrows or swipe to turn. */
.reader { border: 0; padding: 0; margin: 0; width: 100%; max-width: 100vw; height: 100dvh; max-height: 100dvh; background: transparent; color: var(--fg); }
.reader::backdrop { background: #ffffff; }
.reader-inner { height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: env(safe-area-inset-top, 0px) var(--gutter) env(safe-area-inset-bottom, 0px); }
.reader-bar, .reader-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 64px; }
.reader-count { font: 400 var(--t-label)/1 var(--type); letter-spacing: var(--track-caps); color: var(--muted); }
.reader-stage { display: grid; place-items: center; min-height: 0; margin: 0; }
.reader-stage img { width: auto; max-width: 100%; height: auto; max-height: calc(100dvh - 128px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
.reader button { font: 400 var(--t-label)/1 var(--body); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--fg); background: none; border: 1px solid var(--line); min-height: 44px; min-width: 44px; padding: 0 18px; cursor: pointer; }
.reader button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.reader button:disabled { opacity: 0.3; cursor: default; }

/* ---------- Motion: transform and opacity only, off for reduced motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  .hero-text { animation: rise 0.9s ease both; }
  .hero .doors { animation: rise 0.9s ease 0.25s both; }
  @keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
  .js .tile { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
  .js .tile.in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-line::after { animation: none; opacity: 1; top: 14px; }
}

/* Kept for screen readers and search, but not shown. */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Project pages shown as screen recordings (a website) ---------- */
.media-group { margin: 0 0 var(--s-7); }
.media-row { display: flex; gap: var(--s-5); align-items: flex-start; }
.media-fig { margin: 0; min-width: 0; }
.media-fig video { display: block; width: 100%; height: auto; background: var(--bg-2); border: 1px solid var(--line); }
.media-fig figcaption { color: var(--muted); font: 400 var(--t-small)/1.5 var(--type); margin-top: var(--s-3); }
.media-stack { flex-direction: column; }
.media-stack .media-fig { flex: none !important; width: 100%; }
@media (max-width: 719px) { .media-row { flex-direction: column; } .media-row .media-fig { flex: none !important; width: 100%; } .media-row .media-fig:has(video[height="1688"]), .media-row .media-fig:has(img[height="1688"]) { max-width: 320px; } }
.look-row { display: flex; flex-wrap: wrap; gap: var(--s-5) var(--s-7); align-items: flex-start; }
.swatch { display: grid; gap: var(--s-2); min-width: 96px; }
.chip { display: block; width: 96px; height: 64px; border: 1px solid var(--line); }
.swatch-name, .spec-name { font-weight: 600; }
.swatch-hex, .spec-use { color: var(--muted); font: 400 var(--t-small)/1.4 var(--type); text-transform: uppercase; }
.specimen { display: grid; gap: var(--s-2); }
.spec-name { font-size: var(--t-h3); line-height: 1; }

/* The home page is a single screen: the photo, the signature and the doors, and nothing below. */
.home main { display: block; }
.home .hero { height: 100svh; min-height: 0; padding-bottom: calc(var(--s-7) + env(safe-area-inset-bottom, 0px)); }

.media-fig img { display: block; width: 100%; height: auto; border: 1px solid var(--line); }

/* Home has no header bar: the photo fills the whole screen and the three links float over it. */
.home .site-header { background: transparent; border-bottom-color: transparent; }
.home .site-nav a { color: var(--fg); }

/* Close-up clips: two by two on a computer, one per row on a phone. */
.media-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); }
@media (max-width: 719px) { .media-grid { grid-template-columns: 1fr; } }

/* Contact: form beside the details, sharper Helvetica type for the words. */
.contact-lead, .contact .row-value, .contact-form input, .contact-form select, .contact-form textarea { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.contact-lead { color: var(--fg); font-weight: 500; letter-spacing: -0.01em; }
.contact-cols { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 960px) { .contact-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--s-8); } .contact-side { grid-column: 1; grid-row: 1; } .contact-form { grid-column: 2; grid-row: 1; } }
.contact-side .contact-group:last-child { margin-bottom: 0; }
.contact-form { display: grid; gap: var(--s-5); }
.contact-form .eyebrow { margin: 0; }
.field-row { display: grid; gap: var(--s-5); }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: var(--s-2); }
.field > span { font: 400 var(--t-label)/1.4 var(--type); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--muted); }
.contact-form input, .contact-form select, .contact-form textarea {
  font-size: 1rem; color: var(--fg); background: var(--bg); border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  padding: 10px 0; width: 100%; -webkit-appearance: none; appearance: none; transition: border-color 0.2s;
}
.contact-form textarea { resize: vertical; border: 1px solid var(--line); padding: 10px 12px; }
.contact-form select { background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 12px) 55%, calc(100% - 7px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 24px; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: none; border-color: var(--accent); }
.form-actions { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; margin: 0; }
.form-note { font: 400 var(--t-small)/1.4 var(--type); color: var(--accent); }

/* Copy icon next to the email: two squares; turns into a tick once copied. */
.row-copy { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0; background: none; color: var(--muted); }
.row-copy:hover, .row-copy:focus-visible { color: var(--accent); background: none; }
.row-copy .ico-done { display: none; }
.row-copy.done { color: var(--accent); }
.row-copy.done .ico-copy { display: none; }
.row-copy.done .ico-done { display: block; }

/* ---------- Home: light bleeding in from the film edges ----------
   A warm glow at the edges of the frame that slowly breathes, over the photo. Opacity only, still for
   visitors who prefer reduced motion, and nothing in this layer can be clicked. */
.film { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.film > * { position: absolute; pointer-events: none; }
.film-vignette { inset: 0; background: radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, 0.18) 100%); }
.film-leak { inset: -10%; background:
  radial-gradient(ellipse 50% 65% at 0% 15%, rgba(255, 150, 70, 0.9), rgba(255, 180, 110, 0.3) 45%, transparent 75%),
  radial-gradient(ellipse 45% 60% at 100% 90%, rgba(250, 130, 70, 0.8), rgba(255, 170, 110, 0.25) 45%, transparent 75%);
  mix-blend-mode: multiply; opacity: 0.18; }
.film-dust { inset: 0; width: 100%; height: 100%; }
/* A light wash of fine noise: soft, so the photo stays clear. */
.film-noise { inset: 0; width: 100%; height: 100%; opacity: 0.04; mix-blend-mode: soft-light; }
.hero h1, .hero .doors { position: relative; z-index: 3; }
@media (prefers-reduced-motion: no-preference) {
  .film-leak { animation: leak 6s ease-in-out infinite; }
  /* Projector flicker on the photo itself and a slight frame jitter, both gentle. */
  .home .hero-bg img { animation: flicker 3s steps(1) infinite; }
  @keyframes flicker { 0%, 100% { opacity: 1; } 12% { opacity: 0.94; } 13% { opacity: 1; } 47% { opacity: 0.95; } 48% { opacity: 1; } 49% { opacity: 0.92; } 50% { opacity: 1; } 81% { opacity: 0.95; } 82% { opacity: 1; } }

  @keyframes leak { 0%, 100% { opacity: 0.12; } 30% { opacity: 0.2; } 55% { opacity: 0.1; } 75% { opacity: 0.22; } }
}

/* Work page: a titled sub-section (UCSC) under the main grid. Looping animations sit in the grid like photos. */
.work-group { margin-top: var(--s-7); }
.work-group:first-child { margin-top: 0; }
.work-section[hidden] { display: none; }
.work-group[hidden] { display: none; }
.work-group-title { font-size: var(--t-h3); line-height: 1; margin: 0 0 var(--s-5); }
.tile video, .hero-img video { display: block; width: 100%; height: auto; }
.hero-img video { width: auto; max-width: 100%; max-height: 90vh; }

/* Previous / next between projects: just arrows, no line above. */
.pager { border-top: 0; padding-top: 0; margin-top: var(--s-6); }
.pager a { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; font: 400 1.5rem/1 var(--body); color: var(--muted); }
/* "All work" works like the home page links: plain text, a line draws in underneath on hover. */
.door.back { justify-self: start; margin-bottom: var(--s-5); color: var(--fg); font: 500 var(--t-label)/1.2 var(--body); letter-spacing: var(--track-caps); }
.door.back:hover, .door.back:focus-visible { color: var(--accent); }

.pager a { color: var(--fg); transition: color 0.2s, transform 0.2s; }
.pager a:hover, .pager a:focus-visible { color: var(--accent); }
.pager a:first-child:hover { transform: translateX(-3px); }
.pager a:last-child:hover { transform: translateX(3px); }

/* Photo viewer: click a photo in the grid and it opens large over the dimmed page, like a lightbox. */
.lightbox { border: 0; padding: 0; margin: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; background: transparent; overflow: hidden; }
.lightbox::backdrop { background: rgba(8, 9, 11, 0.88); }
.lightbox-stage { position: absolute; inset: 0; display: grid; place-items: center; padding: 40px 64px 64px; }
.lightbox-stage img { width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - 104px); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4); }
.lightbox.loading .lightbox-stage img { opacity: 0.4; }
.lightbox-count { position: absolute; left: 0; right: 0; bottom: 22px; text-align: center; color: rgba(255, 255, 255, 0.8); font: 400 var(--t-small)/1 var(--body); letter-spacing: 0.15em; }
.lightbox button { position: absolute; display: grid; place-items: center; width: 52px; height: 52px; border: 0; padding: 0; background: none; color: #fff; cursor: pointer; opacity: 0.8; transition: opacity 0.2s, transform 0.2s; }
.lightbox button:hover, .lightbox button:focus-visible { opacity: 1; }
.lightbox .lb-prev { left: 8px; top: 50%; margin-top: -26px; }
.lightbox .lb-next { right: 8px; top: 50%; margin-top: -26px; }
.lightbox .lb-close { right: 8px; top: 8px; }
.lightbox .lb-prev:hover { transform: translateX(-3px); } .lightbox .lb-next:hover { transform: translateX(3px); }
@media (max-width: 600px) { .lightbox-stage { padding: 56px 12px 64px; } .lightbox .lb-prev, .lightbox .lb-next { top: auto; bottom: 6px; margin-top: 0; } }

/* The name in the corner reads as a link home: it turns teal and a line draws in underneath on hover. */
.brand { position: relative; transition: color 0.2s, opacity 0.3s; }
.brand::after { content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; }
.brand:hover, .brand:focus-visible { color: var(--accent); }
.brand:hover::after, .brand:focus-visible::after { transform: scaleX(1); }

/* Design sections hold only a few projects each, so they line up left to right in a regular grid
   (the photo-style columns spread two tiles far apart on wide screens). Same tile widths as Photography. */
[data-section="design"] .grid { columns: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-items: start; }
[data-section="design"] .tile { margin: 0; }
@media (min-width: 720px) { [data-section="design"] .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { [data-section="design"] .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Photography: even rows. Every photo in a row is the same height and the row fills the width exactly,
   with each photo shown whole at its own shape (widths follow each photo's proportions). */
[data-section="photography"] .grid { columns: auto; display: flex; flex-wrap: wrap; gap: var(--gap); --row: 170px; }
[data-section="photography"] .grid::after { content: ""; flex: 999 1 0; }
[data-section="photography"] .tile { margin: 0; flex: calc(var(--r) * 100) 1 calc(var(--r) * var(--row)); min-width: 0; }
[data-section="photography"] .tile img { width: 100%; height: auto; }
@media (min-width: 720px) { [data-section="photography"] .grid { --row: 260px; } }
@media (min-width: 1200px) { [data-section="photography"] .grid { --row: 320px; } }

/* ---------- Design tab: numbered showcase ----------
   Large rounded previews that square off on hover, alternating sides on wide screens. */
.design-intro { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: var(--t-lead); max-width: 34ch; margin: 0 0 var(--s-7); }
.showcase { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-8); }
.show { display: grid; gap: var(--s-5); align-items: center; }
@media (min-width: 860px) {
  .show { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--s-7); }
  .show.flip .show-media { order: 2; }
}
.show-media { display: block; overflow: hidden; border-radius: 22px; background: var(--bg-2); transition: border-radius 0.35s ease; }
.show-media img, .show-media video { display: block; width: 100%; height: auto; max-height: 78vh; object-fit: contain; transition: transform 0.6s ease; }
.show:hover .show-media, .show-media:focus-visible { border-radius: 0; }
.show:hover .show-media img, .show:hover .show-media video { transform: scale(1.015); }
.show-meta { display: flex; align-items: baseline; gap: var(--s-3); margin: 0 0 var(--s-3); font: 400 var(--t-label)/1.4 var(--type); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--muted); }
.show-num { color: var(--accent); }
.show-title { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.5rem); line-height: 0.95; margin: 0 0 var(--s-4); }
.show-title a { text-decoration: none; transition: color 0.2s; }
.show:hover .show-title a, .show-title a:focus-visible { color: var(--accent); }
.show-note { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; max-width: 40ch; color: var(--muted); margin: 0 0 var(--s-4); }
.show-link { justify-self: start; }

/* The preview hugs its image (no grey frame around tall pictures like the magazine cover). */
.show-media { background: none; width: fit-content; max-width: 100%; justify-self: start; }
.show.flip .show-media { justify-self: end; }
.show-media img, .show-media video { width: auto; max-width: 100%; max-height: 78vh; object-fit: initial; }
@media (max-width: 859px) { .show-media, .show.flip .show-media { justify-self: start; } }

/* Photos: rounded corners that square off on hover, like the Design previews. */
[data-section="photography"] .tile figure { overflow: hidden; border-radius: 14px; transition: border-radius 0.35s ease; }
[data-section="photography"] .tile:hover figure, [data-section="photography"] .tile:focus-visible figure { border-radius: 0; }
[data-section="photography"] .tile:hover img, [data-section="photography"] .tile:focus-visible img { opacity: 1; }

/* Design tab: a break with the section name before each group of projects. */
.show-group + .show-group { margin-top: var(--s-8); }
.show-break { font: 400 var(--t-label)/1.4 var(--type); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--muted); margin: 0 0 var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--line, #d9d9d9); }

/* Group page (Motion design): each piece whole, with its title and a line under it. */
.group-grid { display: grid; gap: var(--s-7) var(--s-6); margin-top: var(--s-7); }
@media (min-width: 860px) { .group-grid { grid-template-columns: 1fr 1fr; } }
.group-item { margin: 0; }
.group-media { margin: 0 0 var(--s-4); }
.group-media img, .group-media video { display: block; width: 100%; max-height: none; height: auto; border-radius: 22px; }
.group-item .show-title { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); margin-bottom: var(--s-3); }