/* Elevated Productions — site stylesheet (rebuilt Oct 22 2026 from Garrett's answers: dark, clean, normal case) */
:root {
  --paper: #111112;
  --paper-2: #17171a;
  --ink: #ebe9e4;
  --ink-2: #a9a7a1;
  --ink-3: #6f6e69;
  --rule: #2a2a2e;
  --frame: #1d1d21;
  --red: #e84e2b;          /* the logo's red-orange; used only on the mark and link hovers */
  --max: 1280px;
  --gutter: clamp(16px, 4vw, 48px);
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: dark; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font); font-size: 16px; line-height: 1.55; font-weight: 400;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, video, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
p a, li a, .text a { text-decoration: underline; text-decoration-color: var(--ink-3); text-underline-offset: 3px; }
p a:hover, li a:hover, .text a:hover { text-decoration-color: var(--red); }
h1, h2, h3 { font-weight: 500; letter-spacing: -0.015em; line-height: 1.1; margin: 0; }
h1 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
h2 { font-size: clamp(1.4rem, 2.4vw, 2rem); }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.text { max-width: 62ch; }
.text p { font-size: 1.05rem; color: var(--ink); }
.small { font-size: .85rem; color: var(--ink-2); }
.label { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.sec { padding: clamp(40px, 7vw, 96px) 0; }
.sec + .sec { border-top: 1px solid var(--rule); }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: clamp(20px, 3vw, 36px); }
.sec-head a { font-size: .9rem; color: var(--ink-2); border-bottom: 1px solid var(--rule); }
.sec-head a:hover { color: var(--ink); border-color: var(--ink); }

/* Header */
.top { position: sticky; top: 0; z-index: 20; background: rgba(17,17,18,.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; }
.logo { display: flex; align-items: center; gap: 12px; font-weight: 500; letter-spacing: -0.01em; }
.logo img { width: 34px; height: 34px; }
.logo small { display: block; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 400; margin-top: 2px; }
.nav { display: flex; gap: 28px; }
.nav a { font-size: .95rem; color: var(--ink-2); padding: 6px 0; }
.nav a:hover, .nav a[aria-current] { color: var(--ink); }
.menu { display: none; background: none; border: 1px solid var(--rule); color: var(--ink); padding: 7px 12px; border-radius: 4px; font: inherit; font-size: .9rem; }
@media (max-width: 820px) {
  .nav { display: none; position: absolute; top: 64px; left: 0; right: 0; background: var(--paper); border-bottom: 1px solid var(--rule); flex-direction: column; gap: 0; padding: 8px var(--gutter) 16px; }
  .nav a { padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 1.05rem; }
  .nav.open { display: flex; }
  .menu { display: block; }
}

/* Photo frames. A real <img> or <video> replaces the inner div; the figcaption stays. */
figure { margin: 0; }
.frame { background: var(--frame); border: 1px solid var(--rule); width: 100%; aspect-ratio: 3 / 2; overflow: hidden; position: relative; }
.frame.wide { aspect-ratio: 16 / 9; }
.frame.tall { aspect-ratio: 4 / 5; }
.frame.sq { aspect-ratio: 1; }
.frame img, .frame video { width: 100%; height: 100%; object-fit: cover; }
.frame .todo { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-3); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; text-align: center; padding: 12px; }
figcaption { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: .82rem; color: var(--ink-2); }
figcaption span:last-child { color: var(--ink-3); white-space: nowrap; }

/* Hero: full-bleed, letterboxed, headline over the picture */
.hero { padding: 0; }
.cine { position: relative; margin: 0; background: #000; }
.cine .frame { aspect-ratio: 21 / 9; border: 0; width: 100%; }
@media (max-width: 700px) { .cine .frame { aspect-ratio: 4 / 5; } }
.cine .over { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(20px, 4vw, 56px) var(--gutter); background: linear-gradient(180deg, rgba(17,17,18,0) 0%, rgba(17,17,18,.85) 100%); }
.cine .over h1 { font-size: clamp(2.4rem, 6vw, 5rem); font-weight: 500; letter-spacing: -0.025em; margin: 0 0 6px; }
.cine .over .small { margin: 0; color: var(--ink-2); }
.intro { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(20px, 4vw, 64px); align-items: start; padding-top: clamp(28px, 4vw, 56px); }
.intro .lead { font-size: clamp(1.15rem, 1.9vw, 1.6rem); line-height: 1.4; margin: 0; max-width: 34em; color: var(--ink); }
.reach { display: grid; gap: 4px; font-size: .95rem; color: var(--ink-2); }
.reach a { color: var(--ink); overflow-wrap: anywhere; }
.reach .tel { font-size: 1.5rem; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 4px; }
@media (max-width: 760px) { .intro { grid-template-columns: minmax(0, 1fr); } }

/* Work grid: 12 columns, mixed spans, like a tear sheet */
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(14px, 2vw, 28px); }
.grid > * { grid-column: span 4; min-width: 0; }
.grid .w6 { grid-column: span 6; }
.grid .w8 { grid-column: span 8; }
.grid .w12 { grid-column: span 12; }
@media (max-width: 900px) { .grid > *, .grid .w8 { grid-column: span 6; } .grid .w12 { grid-column: span 12; } }
@media (max-width: 560px) { .grid > *, .grid .w6, .grid .w8 { grid-column: span 12; } }
.filters { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 24px; font-size: .9rem; }
.filters a { color: var(--ink-3); padding: 4px 0; border-bottom: 1px solid transparent; cursor: pointer; }
.filters a.on, .filters a:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* Service list */
.services { border-top: 1px solid var(--rule); }
.service { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 2fr); gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.service h3 { font-weight: 500; }
.service p { margin: 0; color: var(--ink-2); font-size: .98rem; }
.service .price { text-align: right; font-size: .9rem; color: var(--ink-2); white-space: nowrap; }
.service .price small { display: block; color: var(--ink-3); font-size: .75rem; }
@media (max-width: 700px) { .service { grid-template-columns: 1fr; gap: 6px; } .service .price { text-align: left; } }

/* Service pages */
.svc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); padding: clamp(32px, 5vw, 72px) 0; border-bottom: 1px solid var(--rule); align-items: start; }
.svc:last-of-type { border-bottom: 0; }
.svc ul { padding-left: 18px; margin: 0 0 1em; color: var(--ink-2); }
.svc li { margin-bottom: 4px; }
@media (max-width: 760px) { .svc { grid-template-columns: 1fr; } }

/* Quote */
/* Reviews as a list, in the same three columns as the services list: who, then what they said */
.says { border-top: 1px solid var(--rule); }
.say { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 2fr); gap: 24px; margin: 0; padding: 22px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.say cite { font-style: normal; font-size: .95rem; color: var(--ink-2); }
.say p { grid-column: span 2; margin: 0; font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.4; }
@media (max-width: 700px) { .say { grid-template-columns: minmax(0, 1fr); gap: 8px; } .say p { grid-column: auto; } .say cite { order: 2; } }
.quote { max-width: 46ch; margin: 0; }
.grid .quote p { font-size: 1.05rem; }
.quote p { font-size: clamp(1.25rem, 2.2vw, 1.7rem); line-height: 1.35; font-weight: 400; letter-spacing: -0.01em; }
.quote cite { font-style: normal; font-size: .9rem; color: var(--ink-2); }

/* About split */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
@media (max-width: 760px) { .split { grid-template-columns: 1fr; } }

/* Projects (journal) */
.post { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 24px; padding: 28px 0; border-top: 1px solid var(--rule); }
.post time { color: var(--ink-3); font-size: .85rem; padding-top: 4px; }
.post h3 { margin-bottom: 8px; }
.post .frame { margin-top: 14px; max-width: 720px; }
@media (max-width: 620px) { .post { grid-template-columns: 1fr; gap: 6px; } }

/* Prints */
.print .buy { display: inline-block; margin-top: 8px; font-size: .85rem; color: var(--ink-2); border-bottom: 1px solid var(--rule); }
.print .buy:hover { color: var(--ink); border-color: var(--ink); }

/* Buttons (two on the whole site) */
.btn { display: inline-block; padding: 12px 18px; border: 1px solid var(--ink); border-radius: 3px; color: var(--ink); font-size: .95rem; }
.btn:hover { background: var(--ink); color: var(--paper); }

/* Forms */
.form { display: grid; gap: 14px; max-width: 560px; }
.form label { display: grid; gap: 6px; font-size: .85rem; color: var(--ink-2); }
.form input, .form select, .form textarea { font: inherit; color: var(--ink); background: var(--paper-2); border: 1px solid var(--rule); border-radius: 3px; padding: 11px 12px; width: 100%; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 1px solid var(--ink); border-color: var(--ink); }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .form .row { grid-template-columns: 1fr; } }
.contact-cols { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); }
@media (max-width: 760px) { .contact-cols { grid-template-columns: 1fr; } }
.contact-cols dl { margin: 0; }
.contact-cols dt { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-top: 18px; }
.contact-cols dd { margin: 2px 0 0; font-size: 1.05rem; }

/* Footer */
.foot { border-top: 1px solid var(--rule); padding: 36px 0 28px; font-size: .88rem; color: var(--ink-2); }
.foot .wrap { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.foot a { display: block; padding: 2px 0; overflow-wrap: anywhere; }
.foot a:hover { color: var(--ink); }
.foot .copy { grid-column: 1 / -1; color: var(--ink-3); font-size: .8rem; padding-top: 18px; border-top: 1px solid var(--rule); margin-top: 8px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
@media (max-width: 820px) { .foot .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .foot .wrap > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 520px) { .foot .wrap { grid-template-columns: minmax(0, 1fr); } }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* ---- Real photos (Nov 10 2026). Pictures keep their own shape; nothing here animates. ---- */
.frame.nat, .strip .frame, .rows .frame, .stack .frame { aspect-ratio: var(--ar); }
a.zoom { display: block; width: 100%; height: 100%; cursor: zoom-in; }

/* Strips: a few pictures side by side at one height, each as wide as its own shape needs */
.strips { display: grid; gap: clamp(14px, 2vw, 28px); }
.strip { display: flex; gap: clamp(14px, 2vw, 28px); align-items: flex-start; }
.strip figure { flex: var(--ar) 1 0; min-width: 0; }
@media (max-width: 700px) {
  .strip { flex-direction: column; }
  .strip figure { flex: none; width: 100%; }
}

/* Rows: a long list of pictures laid out like a contact sheet, equal height along each row */
.rows { --rh: 240px; display: flex; flex-wrap: wrap; gap: 28px 14px; }
.rows.big { --rh: 300px; }
.rows figure { flex: var(--ar) 1 calc(var(--ar) * var(--rh)); min-width: 0; }
.rows::after { content: ""; flex: 1000 1 0; }
.rows figure[hidden] { display: none; }
@media (max-width: 560px) { .rows { --rh: 200px; } .rows.big { --rh: 220px; } }

.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.group { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--rule); padding-top: 14px; margin: clamp(36px, 5vw, 64px) 0 18px; font-size: 1.1rem; }
.group span:last-child { font-size: .82rem; color: var(--ink-3); letter-spacing: 0; }
@media (min-width: 761px) { .narrow { max-width: 300px; } }

/* Panoramas run edge to edge. On a phone they keep their height and slide sideways. */
.sec.bleed { padding-top: 0; padding-bottom: clamp(24px, 4vw, 48px); border-top: 0; }
.pano { margin: 0; }
.pano .frame { aspect-ratio: var(--ar); border-left: 0; border-right: 0; }
.pano figcaption { padding: 0 var(--gutter); max-width: var(--max); margin: 8px auto 0; }
.pano figcaption a { border-bottom: 1px solid var(--rule); color: var(--ink-2); }
.stack .pano figcaption { padding: 0; }
.pano figcaption a:hover { color: var(--ink); border-color: var(--ink); }
@media (max-width: 700px) {
  .pano .frame { aspect-ratio: auto; height: 62vh; overflow-x: auto; overflow-y: hidden; }
  .pano .frame a.zoom { width: max-content; }
  .pano .frame img { width: auto; height: 100%; max-width: none; }
  .stack .pano .frame { height: 44vh; }
}

/* Viewer: one photo on black, a caption, three words to click */
.lb { position: fixed; inset: 0; z-index: 50; background: rgba(8,8,9,.97); display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.lb[hidden] { display: none; }
.lb .stage { position: relative; min-height: 0; cursor: pointer; }
.lb .stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.lb .bar { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 24px; padding: 12px var(--gutter) 16px; font-size: .85rem; color: var(--ink-2); }
.lb .bar > div { display: flex; gap: 20px; align-items: baseline; }
.lb .n { color: var(--ink-3); }
.lb .ord { border-bottom: 1px solid var(--rule); }
.lb .ord:hover { color: var(--ink); border-color: var(--ink); }
.lb button { background: none; border: 0; color: var(--ink-2); font: inherit; cursor: pointer; padding: 6px 0; }
.lb button:hover { color: var(--ink); }

/* ---- Films and jobs (Nov 10 2026). A film is a still picture with a "Play film" label; pressing it opens the player. ---- */
a.play { display: block; position: relative; width: 100%; height: 100%; cursor: pointer; }
a.play span { position: absolute; left: 0; bottom: 0; display: flex; align-items: center; gap: 9px; background: var(--paper); color: var(--ink); font-size: .8rem; line-height: 1; padding: 9px 13px 9px 11px; border-top: 1px solid var(--rule); border-right: 1px solid var(--rule); }
a.play span::before { content: ""; border-left: 8px solid var(--red); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
a.play:hover span, a.play:focus-visible span { background: var(--ink); color: var(--paper); }
.film.feature a.play span { font-size: .95rem; padding: 12px 18px 12px 14px; }

/* Work is sorted by kind (.cat), then by job (.proj): the job's name and a line on the left, its films and photos on the right */
.cat { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: clamp(48px, 7vw, 96px) 0 6px; scroll-margin-top: 84px; }
.cat span:last-child { font-size: .82rem; font-weight: 400; letter-spacing: 0; color: var(--ink-3); white-space: nowrap; }
.catline { color: var(--ink-2); margin: 0 0 22px; max-width: 62ch; }
.filters + .cat { margin-top: clamp(28px, 4vw, 48px); }
.proj { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(18px, 3vw, 48px); padding: 24px 0 36px; border-top: 1px solid var(--rule); align-items: start; }
.proj .what h3 { font-size: 1.15rem; margin-bottom: 8px; }
.proj .what p { color: var(--ink-2); font-size: .95rem; margin: 0 0 .7em; max-width: 44ch; }
.proj .more { font-size: .85rem; }
@media (min-width: 901px) { .proj .what { position: sticky; top: 88px; } }
@media (max-width: 900px) { .proj { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-bottom: 28px; } }
/* On the home page the words sit above the pictures, which then run the full width */
.proj.wide { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.proj.wide .what { position: static; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; }
.proj.wide .what h3 { margin: 0; }
.proj.wide .what p { margin: 0; max-width: none; }
.proj.wide .what .more { margin-left: auto; }
/* The pictures of a job: each row fills the width at one height (the rows are worked out in make_pages.py) */
.shots { min-width: 0; }
.fit { display: flex; flex-wrap: wrap; gap: var(--fg, 22px 14px); }
.fit + .fit { margin-top: var(--fr, 22px); }
.fit figure { flex: var(--ar) 1 calc(var(--ar) * var(--rh)); min-width: 0; }
@media (max-width: 700px) {
  /* on a phone the rows are let go: wide pictures run full width, upright ones pair up */
  .shots { display: flex; flex-wrap: wrap; gap: var(--fg, 22px 14px); }
  .fit { display: contents; }
  .fit figure { flex: 1 1 100%; }
  .fit figure.v { flex: 1 1 40%; max-width: 60%; }
}

/* A film inside a text column */
.post .film { margin-top: 14px; max-width: 720px; }
.post .film.tall, .svc .film.tall { max-width: 300px; }
.svc.solo { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 761px) { .svc.solo .text { margin-left: calc((100% - clamp(24px, 4vw, 64px)) * 5 / 12 + clamp(24px, 4vw, 64px)); } }

/* The viewer, playing a film */
.lb.film .stage { cursor: default; display: grid; place-items: center; }
.lb .stage iframe { border: 0; background: #000; display: block; }
.lb [hidden] { display: none; }
.shots.under { margin-top: var(--fr, 24px); }

/* Closing band on the home page: one line, the phone, a button. */
.call { border-top: 1px solid var(--rule); padding: clamp(36px, 6vw, 72px) 0; }
.call h2 { margin: 0 0 .4em; }
.call p { display: flex; flex-wrap: wrap; gap: 4px 28px; margin: 0 0 1.2em; font-size: 1.1rem; }
.call p a { overflow-wrap: anywhere; }

/* Home services: six pictures in three columns (the same columns as the films row), with the name, a line and the
   price under each. The picture in a tile is a photo (.pic) or a film that plays (.film); both are drawn 3 by 2. */
.services.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(30px, 4vw, 52px) var(--tg, 14px); border-top: 0; }
.services.tiles .service { display: block; padding: 0; border-bottom: 0; }
.services.tiles .service > :not(.pic):not(.film) { padding-right: 24px; }
.services.tiles .service h3 { margin: 16px 0 6px; }
.services.tiles .service p { margin: 0 0 10px; }
.services.tiles .service .price { text-align: left; white-space: normal; }
.services.tiles .service .price small { display: inline; margin-left: 8px; }
.services.tiles .film .frame.nat { aspect-ratio: 3 / 2; }
.services.tiles figcaption { display: none; }
.service .pic { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--frame); }
.service .pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.also { margin: clamp(30px, 4vw, 52px) 0 0; padding-top: 22px; border-top: 1px solid var(--rule); color: var(--ink-2); }
.also a { color: var(--ink); border-bottom: 1px solid var(--rule); }
@media (max-width: 999px) { .services.tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .services.tiles { grid-template-columns: minmax(0, 1fr); } .services.tiles .service > :not(.pic):not(.film) { padding-right: 0; } }
/* Phone: pictures and films keep the full width of the screen (Patrick, Nov 10: he tried them two to a row and liked
   the full width better). Only the panorama that closes the home page is held lower. */
@media (max-width: 700px) { .sec.bleed .pano .frame { height: 40vh; } }
/* Reviews beside a photo. */
.revs { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.revs .says { border-top: 0; }
.revs .say { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 2px 0 2px 22px; margin: 0 0 30px; border-bottom: 0; border-left: 3px solid var(--red); }
.revs .say:last-child { margin-bottom: 0; }
.revs .say p { grid-column: auto; } .revs .say cite { order: 2; }
@media (max-width: 900px) { .revs { grid-template-columns: minmax(0, 1fr); } .revs figure { max-width: 520px; } }

/* ===== Theme: Cinema. Full-screen picture, soft near-black, photos edge to edge. Garrett, Nov 10 2026: "cinematic, soft but kind of lean, dark colors".
   Type: one family, Archivo, at its normal width throughout (the narrow heading width went on Nov 10, see below).
   Patrick found the thin type with small spaced-out capital labels "Claude looking" and the pages empty, so headings are real
   headings, captions and lists are a readable size, and nothing is centered. No tracked capitals anywhere in this theme. ===== */
:root { --paper:#0b0b0d; --paper-2:#131316; --ink:#f1efea; --ink-2:#b3b1ab; --ink-3:#7c7a75; --rule:#26262b; --frame:#17171a; --font:"Archivo","Helvetica Neue",Arial,sans-serif; --max:1600px; }
body { font-size: 17px; }
/* Patrick, Nov 10 (late night): the narrow, heavy, all-capital headings felt "overpowering", "like a gym and gym slogan".
   Headings are now normal width, medium weight, sentence case and a modest size. Do not bring back condensed bold capitals. */
h1, h2, h3 { font-stretch: 100%; font-weight: 500; letter-spacing: -0.015em; line-height: 1.12; }
h1 { font-size: clamp(2rem, 3.8vw, 3.2rem); }
/* Patrick, Nov 10 (late night): "everything is black and white", the menu bar "looks blurry", the logo "small and blurry".
   The bar is now solid (it was a see-through fade over the photo), the logo is a sharp mark at a real size, and the
   logo's red-orange (--red for fills, --red-t for small text on the dark page) runs through the theme. */
:root { --red: #e84e2b; --red-t: #ff6a45; --bar: 84px; }
.top { z-index: 20; position: sticky; top: 0; background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 3px solid var(--red); }
.top .wrap { height: var(--bar); }
.logo { gap: 14px; font-size: 1.32rem; font-weight: 600; line-height: 1.1; letter-spacing: -0.005em; }
.logo img { width: 46px; height: 46px; }
.logo small { font-size: .84rem; letter-spacing: 0; text-transform: none; color: var(--ink-2); font-weight: 500; margin-top: 4px; }
.nav { gap: 34px; }
.nav a { color: var(--ink); font-size: 1.05rem; font-weight: 500; padding: 8px 0; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--red-t); } .nav a[aria-current] { border-bottom-color: var(--red); }
.menu { border-color: var(--ink-3); border-radius: 0; font-weight: 600; font-size: 1rem; padding: 9px 14px; }
@media (max-width: 820px) { :root { --bar: 70px; } .logo { font-size: 1.1rem; gap: 10px; } .logo img { width: 38px; height: 38px; } .logo small { font-size: .74rem; margin-top: 3px; }
  .nav { top: var(--bar); background: var(--paper); border-bottom: 3px solid var(--red); } .nav a, .nav a[aria-current] { border-bottom: 1px solid var(--rule); } .nav a[aria-current] { color: var(--red-t); } }
.cine .frame { aspect-ratio: auto; height: calc(100vh - var(--bar)); min-height: 440px; }
@media (max-width: 700px) { .cine .frame { height: 62vh; min-height: 340px; max-height: 540px; } .cine .over { padding-bottom: 22px; } }
.cine .over h1 .dot { color: var(--red); }
.reach .tel { color: var(--red-t); }
.sec-head a, .proj .more a, .text p a { border-bottom: 2px solid var(--red); } .sec-head a:hover, .proj .more a:hover, .text p a:hover { color: var(--red-t); }
.call { background: var(--red); color: #0b0b0d; border-top: 0; }
.call h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); }
.call p { font-size: clamp(1.1rem, 1.5vw, 1.3rem); font-weight: 500; } .call p a { border-bottom: 2px solid #0b0b0d; }
.call .btn, .call .btn:hover { background: #0b0b0d; color: var(--ink); border-color: #0b0b0d; }
.foot { border-top: 0; }
.tint { background: var(--paper-2); } .revs .say cite { color: var(--red-t); }
/* Patrick, Nov 10 (late night): the home page "feels thrown together". It had picked up a different layout in every
   section. Now it keeps to two: three equal columns (films, services) and two equal halves (reviews, about). */
.services.tiles { --tg: 3px; } .also { font-size: 1.05rem; } .also a { border-bottom: 2px solid var(--red); } .also a:hover { color: var(--red-t); }
@media (min-width: 901px) { .revs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } }
.cine .over { inset: 0; display: grid; place-content: end start; text-align: left; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.72) 100%); padding: 0 var(--gutter) clamp(28px, 6vh, 64px); }
.cine .over h1 { font-size: clamp(2.3rem, 4.6vw, 4rem); line-height: 1.05; margin: 0; }
.cine .over .small { color: var(--ink); font-size: 1rem; margin-top: 10px; }
.cine .todo { align-content: end; padding-bottom: 36px; }
.intro { padding-top: clamp(28px, 4vw, 60px); }
.intro .lead { font-size: clamp(1.3rem, 2.3vw, 2.1rem); line-height: 1.28; letter-spacing: -0.01em; }
.reach { font-size: 1rem; gap: 6px; } .reach .tel { font-size: clamp(1.4rem, 2vw, 1.8rem); font-weight: 500; letter-spacing: -0.01em; line-height: 1.1; margin-bottom: 8px; }
.sec { padding: clamp(36px, 5vw, 80px) 0; } .sec + .sec { border-top: 0; }
.sec-head { align-items: flex-end; margin-bottom: clamp(16px, 2vw, 28px); }
.sec-head h2 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); }
.sec-head a { font-size: 1rem; color: var(--ink); white-space: nowrap; }
.frame { border: 0; } .grid { gap: 3px; }
figcaption { font-size: .88rem; color: var(--ink-2); margin: 8px 2px 12px; }
figcaption span:last-child { display: none; }
.print figcaption span:last-child, .pano figcaption span:last-child { display: inline; }
.strips, .strip { gap: 3px; } .rows { gap: 22px 3px; } .stack { gap: 22px; }
.shots { --fg: 14px 3px; --fr: 14px; } .proj { border-top-color: var(--rule); }
a.play span { font-size: .9rem; }
.cat { font-size: clamp(1.5rem, 2.5vw, 2rem); } .cat span:last-child { font-size: .95rem; color: var(--ink-2); }
.catline { font-size: 1.1rem; }
.proj .what h3 { font-size: 1.3rem; } .proj .what p { font-size: 1.05rem; } .proj .more { font-size: 1rem; }
.pano .frame { border: 0; } .group { border-top: 0; font-size: clamp(1.3rem, 2vw, 1.6rem); } .group span:last-child { font-weight: 400; font-size: .95rem; color: var(--ink-2); }
.services { border-top: 1px solid var(--rule); } .service { padding: 26px 0; } .service h3 { font-size: 1.25rem; }
.service p { font-size: 1.05rem; } .service .price { font-size: 1.05rem; color: var(--red-t); font-weight: 600; } .service .price small { font-size: .85rem; color: var(--ink-2); }
.say { padding: 26px 0; } .say cite { font-size: 1rem; color: var(--ink); font-weight: 500; } .say p { font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.35; color: var(--ink); }
@media (max-width: 900px) { .service, .say { grid-template-columns: minmax(0, 1fr); gap: 8px; } .service .price { text-align: left; } .say p { grid-column: auto; } .say cite { order: 2; } }
.quote { margin: 0; text-align: left; } .quote p { font-size: clamp(1.3rem, 2.2vw, 1.8rem); font-weight: 400; }
.text p { font-size: 1.12rem; line-height: 1.6; } .text h2 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); margin-bottom: .5em; }
.text h1 { margin-bottom: .3em; }
.svc .text h2 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
@media (min-width: 761px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } }
.btn { background: var(--red); color: #0b0b0d; border-color: var(--red); border-radius: 0; padding: 15px 28px; font-weight: 600; } .btn:hover { background: var(--ink); border-color: var(--ink); color: #0b0b0d; }
.form input, .form select, .form textarea { background: var(--paper-2); border-radius: 0; }
.foot { font-size: .95rem; }
main > .sec:first-child { padding-top: clamp(32px, 4vw, 56px); }
/* ---- Type sizes (Nov 10 2026). Patrick: "text size feels all over the place". There were 24 different sizes on
   the six pages. Now eight steps, and this block is the only place this theme sets a size. To change one, change
   the step; to add text, give it one of the steps. Do not write a new size anywhere else.
   fine 14px: captions and fine print.   ui 16px: menu, buttons, links, names, footer.   body 18px: sentences.
   sub 22px: small headings, the phone number, reviews.   lead: the intro paragraph and headings inside a page.
   h2: section headings.   h1: page titles.   hero: the line over the opening picture. */
:root { --t-fine: .875rem; --t-ui: 1rem; --t-body: 1.125rem; --t-sub: 1.375rem; --t-lead: clamp(1.375rem, 2.2vw, 1.75rem);
  --t-h2: clamp(1.625rem, 2.8vw, 2.25rem); --t-h1: clamp(2rem, 4vw, 3rem); --t-hero: clamp(2.5rem, 4.6vw, 4rem); }
figcaption, .small, .label, .foot .copy, .logo small, .service .price small, .form label, .contact-cols dt, .cat span:last-child,
  .group span:last-child, .post time, .frame .todo { font-size: var(--t-fine); }
body, .nav a, .menu, .sec-head a, .reach, .say cite, .quote cite, .btn, a.play span, .film.feature a.play span, .foot, .filters,
  .proj .more, .print .buy, .lb .bar, .cine .over .small, .text p.small, .form input, .form select, .form textarea { font-size: var(--t-ui); }
.text p, .text li, .service p, .service .price, .also, .catline, .proj .what p, .contact-cols dd, .call p, .grid .quote p { font-size: var(--t-body); }
h3, .service h3, .proj .what h3, .reach .tel, .logo { font-size: var(--t-sub); }
.say p { font-size: var(--t-body); } @media (min-width: 821px) { .say p { font-size: var(--t-sub); } }
.intro .lead, .quote p, .svc .text h2 { font-size: var(--t-lead); }
h2, .sec-head h2, .text h2, .call h2, .cat, .group { font-size: var(--t-h2); }
h1 { font-size: var(--t-h1); }
.cine .over h1 { font-size: var(--t-hero); }
@media (max-width: 820px) { .logo { font-size: var(--t-body); } .nav a { font-size: var(--t-body); } }
/* "Order this print" was the smallest link on the page; it is the thing to press, so it reads like the other links. */
.print .buy, .lb .ord { color: var(--ink); font-weight: 500; border-bottom: 2px solid var(--red); padding-bottom: 1px; }
.print .buy { margin-top: 10px; } .lb .ord { white-space: nowrap; } .print .buy:hover, .lb .ord:hover { color: var(--red-t); border-color: var(--red); }