/* ════════════════════════════════════════════════════════════════════
   v3 "The Commission" applied to the v2 inner pages. Loaded after
   styles.css: v2 named its tokens for a dark room (--black is the field,
   --white is the light), so flipping the tokens moves every page onto
   paper without touching its layout. The rest swaps pills for underlines
   and quiets the masthead to match the homepage. See design/principles.md.
   ════════════════════════════════════════════════════════════════════ */
:root {
    --black:  #F3EFE7;               /* the field: paper */
    --ink:    #E8E1D5;               /* raised surfaces */
    --ink-2:  #E2DACB;               /* media placeholders */
    --white:  #17120E;               /* the type: espresso ink */
    --sage:   #56633F;               /* deepened to read on paper */
    --dim:    rgba(23,18,14,0.74);
    --faint:  rgba(23,18,14,0.6);
    --line:   rgba(23,18,14,0.14);
    --line-2: rgba(23,18,14,0.26);
    --vignette: transparent;
}
body { font-weight: 400; }
body::before, body::after { display: none; }        /* no projector grain or vignette on paper */
::selection { background: var(--white); color: var(--black); }

/* masthead: the homepage's, sentence case, no pill */
.nav, .nav.scrolled { background: var(--black); backdrop-filter: none; -webkit-backdrop-filter: none; }
.wordmark { font-size: 15px; letter-spacing: 0.01em; text-transform: none; }
.wordmark span { margin-left: 14px; font: 400 10.5px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
@media (max-width: 640px) { .wordmark span { display: none; } }
.nav-links a:not(.btn) { font-size: 14px; font-weight: 400; letter-spacing: 0.01em; text-transform: none; color: var(--white); border-bottom: 1px solid transparent; padding-bottom: 3px; }
.nav-links a:not(.btn):hover, .nav-links a[aria-current="page"] { border-color: var(--white); }
.menu-btn { font-family: var(--sans); font-size: 14px; letter-spacing: 0.01em; text-transform: none; font-weight: 500; }

/* links and buttons: underlines, never pills */
.link, .btn { font-size: 14px; font-weight: 500; letter-spacing: 0.01em; text-transform: none; }
.btn, .nav-links .btn { border: 0; border-bottom: 1px solid currentColor; border-radius: 0; padding: 0 0 4px; background: none; }
.btn:hover { border-color: var(--sage); color: var(--sage); }
.btn.solid { background: none; color: var(--white); border-color: var(--white); }
.btn.solid:hover { background: none; color: var(--sage); border-color: var(--sage); }
@media (max-width: 640px) { .hero-foot .actions .btn { flex: 0 0 auto; } }
.pill { border: 0; border-bottom: 1px solid transparent; border-radius: 0; padding: 0.7rem 0.2rem; margin-right: 1rem; }
.pill[aria-pressed="true"] { background: none; color: var(--white); border-color: var(--white); }

/* viewfinder corner marks were for a projected frame; on paper they read as clutter */
.frame.marks::after { display: none; }

/* the lightbox stays a dark room: photographs are judged on black */
.lightbox { background: rgba(20,15,11,0.97); color: #F2EEE6; }
.lb-btn, .lb-cap, .lightbox .slate { color: #F2EEE6; }

/* form on paper */
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2317120E' stroke-opacity='.6'/%3E%3C/svg%3E"); }
.field select option { background: #F3EFE7; color: #17120E; }
.field [aria-invalid="true"] { border-bottom-color: #A2462C; }
.form-status.err { color: #8A3B22; }

/* inquiry form additions */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .opt { color: var(--faint); margin-left: 0.5em; }
.form-ref { font-family: var(--serif); font-weight: 300; font-size: clamp(1.2rem, 1.7vw, 1.5rem); line-height: 1.3; padding-bottom: var(--s1); border-bottom: 1px solid var(--line); }
.form-note { grid-column: 1 / -1; }
.field textarea::placeholder { color: var(--faint); }
.nav-links { align-items: baseline; }
.nav-links .btn { line-height: inherit; }
.contact { padding-bottom: var(--s3); }
/* reserve the grid's room until the cards render, so nothing below it jumps */
.work-grid:empty { min-height: 160svh; }
#cs-plates:empty { min-height: 100svh; }
#galleries:empty { min-height: 300svh; }

/* ── v3 refinements after the art-director review ───────────────── */
/* quiet film player: poster + a mono "Play film" until chosen */
.frame { position: relative; }
.frame .play { position: absolute; left: var(--s1); bottom: var(--s1); z-index: 2; display: inline-flex; align-items: center; gap: .6em; padding: .55rem .8rem; min-height: 40px; background: var(--black); color: var(--white); font: 400 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; transition: background .3s var(--ease), color .3s var(--ease); }
.frame .play::before { content: ''; border-left: 7px solid currentColor; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }
.frame .play:hover { background: var(--white); color: var(--black); }

/* case-study plates: a five-beat rhythm instead of a stack of pairs */
.plates { align-items: start; }
.plate-item.r-full { grid-column: 1 / -1; }
.plate-item.r-full .frame { aspect-ratio: 16 / 9; }
.plate-item.r-7 { grid-column: span 7; }
.plate-item.r-7 .frame { aspect-ratio: 5 / 4; }
.plate-item.r-5 { grid-column: span 5; }
.plate-item.r-5 .frame { aspect-ratio: 4 / 5; }
.plate-item.r-drop { margin-top: var(--s3); }
.plate-item figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s1); margin-top: .8rem; }
.plate-item figcaption .cap { font-family: var(--sans); font-size: .92rem; color: var(--dim); text-transform: none; letter-spacing: 0; }
.plate-item figcaption .slate { white-space: nowrap; }
@media (max-width: 760px) {
    .plate-item.r-7, .plate-item.r-5, .plate-item.r-full { grid-column: 1 / -1; }
    .plate-item.r-drop { margin-top: 0; }
    .plate-item.r-5 { width: 78%; }
    .plate-item.r-5.r-drop { margin-left: auto; }
    .plate-item .frame { aspect-ratio: 4 / 5 !important; }
    .plate-item.r-full { margin-inline: calc(-1 * var(--gutter)); }
    .plate-item.r-full .frame { aspect-ratio: 4 / 3 !important; }
    .plate-item.r-full figcaption { padding-inline: var(--gutter); }
}

/* work index: 7/5 then 5/7 so no row leaves a hole */
.card, .card:nth-child(n) { grid-column: span 6; }
.card:nth-child(4n+1), .card:nth-child(4n+4) { grid-column: span 7; }
.card:nth-child(4n+2), .card:nth-child(4n+3) { grid-column: span 5; }
.card .frame, .card:nth-child(n) .frame { aspect-ratio: 4 / 3; }
.card:nth-child(4n+2) .frame, .card:nth-child(4n+3) .frame { aspect-ratio: 4 / 5; }
.card:last-child:nth-child(4n+1) { grid-column: 1 / -1; }
.card:last-child:nth-child(4n+1) .frame { aspect-ratio: 21 / 9; }
@media (max-width: 760px) {
    .card, .card:nth-child(n) { grid-column: 1 / -1; }
    .card:nth-child(n) .frame { aspect-ratio: 4 / 5; }
    .card:nth-child(3n+2), .card:nth-child(3n+3) { grid-column: span 6; }
    .card:nth-child(3n+2) .frame, .card:nth-child(3n+3) .frame { aspect-ratio: 3 / 4; }
    .card:nth-child(3n+2) .cap .t, .card:nth-child(3n+3) .cap .t { font-size: 1.15rem; }
    .card:nth-child(3n+2) .cap .slate:nth-child(2), .card:nth-child(3n+3) .cap .slate:nth-child(2) { display: none; }
    .card:nth-child(3n+2) .cap, .card:nth-child(3n+3) .cap { grid-template-columns: 1fr; }
    .card:last-child:nth-child(4n+1) { grid-column: span 6; }
    .card:last-child:nth-child(4n+1) .frame { aspect-ratio: 3 / 4; }
}

/* the inquiry band before the footer: room to breathe, homepage scale */
.cs-invite { margin-top: var(--s4); margin-bottom: var(--s4); padding-top: var(--s1); }
.cs-invite .h2 { font-size: clamp(2.6rem, 5.4vw, 5.6rem); line-height: .98; letter-spacing: -0.03em; }

/* studio: the chapters as one typeset run, the founder portrait at full width on phones */
.chapters-text { grid-column: 4 / 12; }
.chapters-text .slate { margin: 0 .5em 0 .9em; vertical-align: .25em; }
.chapters-text .slate:first-child { margin-left: 0; }
@media (max-width: 860px) { .chapters-text { grid-column: 1 / -1; } }
@media (max-width: 760px) {
    .studio-hero { display: block; margin-inline: calc(-1 * var(--gutter)); }
    .studio-hero .frame { width: 100%; }
    .studio-hero .frame + .frame { width: 62%; margin: -24% var(--gutter) 0 auto; border: 6px solid var(--black); border-right: 0; border-bottom: 0; }
}
/* long titles break at the phrase, not the word */
.display, .h2 { text-wrap: balance; }
/* photography on phones: two columns, so a chapter reads as a sheet, not a scroll */
@media (max-width: 640px) { .photo-grid { columns: 2; column-gap: 8px; } .photo-grid button { margin-bottom: 8px; } }

/* ── one family, set hard (2026-11-01): see home.css ─────────────── */
.display, .h2, .menu ol a, .reel .meta .num, .reel .caption .h3, .card .cap .t, .facts dd { font-weight: 500; }
.display { line-height: .92; letter-spacing: -0.045em; }
.h2, .cs-invite .h2 { letter-spacing: -0.04em; line-height: .96; }
.card .cap .t, .reel .caption .h3, .facts dd { letter-spacing: -0.025em; }
.display em, .h2 em { font-style: normal; }
.serif-read, .form-ref, .ledger .t, .invite .contact-lines a.big, .contact-side a.big { font-weight: 400; letter-spacing: -0.012em; }
body { font-weight: 400; }

/* no captions on the page: pictures carry it, alt text describes it (2026-11-01) */
.lb-cap { display: none; }

/* ── case study opening (2026-11-01): the cover is the screen, the title sits on it ── */
.cs-cover { position: relative; }
.cs-cover .frame { height: clamp(520px, calc(100svh - 120px), 1100px); }
.cs-cover .frame::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; display: block;
    background: linear-gradient(to top, rgba(20,15,11,.82) 0%, rgba(20,15,11,.35) 34%, rgba(20,15,11,0) 60%); }
.cs-over { position: absolute; left: 0; right: 0; bottom: var(--s2); z-index: 2; color: #F2EEE6; pointer-events: none; }
.cs-over a { pointer-events: auto; }
.cs-over .cs-client { color: rgba(242,238,230,.82); margin: 0 0 var(--s1); }
.cs-over .cs-title { margin-top: 0; }
.cs-over .display { color: #F2EEE6; text-shadow: 0 2px 30px rgba(0,0,0,.25); }
.cs-over .display em { color: #A9B58B; }
.cs-hero .spec { margin-top: var(--s2); }
@media (max-width: 760px) {
    .cs-cover .frame { height: clamp(440px, 74svh, 680px); }
    .cs-over .display { font-size: clamp(2.6rem, 11vw, 3.6rem); }
}
/* studio: frame the founder by the face, not the centre of the file */
.studio-hero .frame img { object-position: 50% 22%; }

/* ── one type scale (2026-11-01): display for page titles, statement for every heading below it ── */
:root { --t-display: clamp(64px, 11.2vw, 210px); --t-statement: clamp(28px, 3.4vw, 54px); }
.page-title .display.xl { font-size: var(--t-display); line-height: .86; letter-spacing: -0.05em; }
.h2, .cs-invite .h2 { font-size: var(--t-statement); line-height: 1.04; letter-spacing: -0.03em; }
.cs-invite { margin-top: var(--s3); margin-bottom: var(--s3); align-items: baseline; }
.cs-invite .h2 { grid-column: 1 / 10; }
.cs-invite .btn { grid-column: 10 / 13; justify-self: end; }
@media (max-width: 760px) { .page-title .display.xl { font-size: clamp(56px, 16vw, 96px); } }
@media (max-width: 760px) { .cs-invite .h2, .cs-invite .btn { grid-column: 1 / -1; justify-self: start; } }

/* ── no rules (2026-11-01): space separates, lines don't. Form fields keep their underline. ── */
.page-head { margin-top: var(--nav-h); }
.nav.scrolled, .menu ol, .menu ol a, .hero-foot, .sec-head, .ledger, .ledger a, .tenet, .format, .foot, .cs-invite, .spec, .spec dl > div, .next, .card .cap, .chapters li, .wd-head, .st-index-h, .st-row { border-top: 0 !important; border-bottom: 0 !important; }
.frame.marks::before { display: none !important; }
.frame.marks:not(.cs-cover .frame)::after { display: none !important; }
.spec dl > div { padding: calc(var(--s1) / 2) 0; }
.st-row { padding: calc(var(--s1) * .75) 0; }
.rec { display: none !important; }

/* regression fixes (2026-11-01): cover scrim back on case pages; air under the nav where a page opens on type */
.cs-cover .frame::after { display: block !important; }
.page-head:not(:has(.frame)) .page-title { padding-top: var(--s3); }

/* ── one family, everywhere (2026-11-01): the system mono only existed on Apple devices and read as label clutter.
   Small type is Neue Montreal Regular, sentence case, no tracking. ── */
:root { --mono: var(--sans); }
.slate, .label, .menu-btn, .format li, .lb-cap { font-family: var(--sans) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; }
.frame .play { text-transform: none !important; letter-spacing: 0 !important; font-family: var(--sans) !important; font-size: 13px !important; }

/* photography chapters (11/01): ordered rows instead of masonry columns, so neighbours are chosen,
   not shuffled. Each row shares one height; widths follow each picture's own ratio. */
.photo-grid { columns: auto !important; display: flex; flex-wrap: wrap; gap: 14px; }
.photo-grid button { flex: var(--r) 1 calc(var(--r) * 300px); margin: 0 !important; width: auto !important; aspect-ratio: var(--r); }
.photo-grid button img { width: 100%; height: 100%; object-fit: cover; }
.photo-grid::after { content: ''; flex: 999 1 0; }
@media (max-width: 640px) { .photo-grid { gap: 8px; } .photo-grid button { flex-basis: calc(var(--r) * 170px); } }
/* chapter titles start on the grid edge like everything else on the page */
[data-page="photography"] .sec-head .h2 { grid-column: 1 / -1; }
[data-page="photography"] .sec-head { margin-bottom: var(--s1); }

/* photography v3 (11/01): one uniform grid. Four columns, every tile 4:5, one gutter; the
   lightbox shows each frame whole. */
.photo-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.photo-grid::after { display: none !important; }
.photo-grid button { flex: none !important; aspect-ratio: 4 / 5 !important; width: 100% !important; overflow: hidden; }
.photo-grid button img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
@media (max-width: 1024px) { .photo-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 640px) { .photo-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; } }
/* tiles follow the chapter: landscape chapters 3:2, portrait chapters 4:5; focus kept near the upper third */
.photo-grid.is-land button { aspect-ratio: 3 / 2 !important; }
.photo-grid.is-land { grid-template-columns: repeat(4, minmax(0,1fr)); }
.photo-grid.is-port button img { object-position: 50% 30%; }
.photo-grid.is-land button img { object-position: 50% 45%; }
@media (max-width: 640px) { .photo-grid.is-land { grid-template-columns: repeat(2, minmax(0,1fr)); } }
/* mobile tap targets (11/01): every control at least 44px tall */
.panos { display: grid; gap: var(--s1); }
@media (max-width: 760px) {
  .wordmark, .mark { display: inline-flex; align-items: center; min-height: 44px; }
  .cat-nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .st-cta, .contact-side a, .contact-lines a, .contact a[href^="mailto"], .contact a[href*="instagram"] { display: inline-flex; align-items: center; min-height: 44px; }
  .wf-radio input { width: 22px; height: 22px; font-size: 16px; }
}