/* signature.css — the Signature homepage and /journeys [operator 2026-10-11;
   the first screen rebuilt 2026-10-18 — "the timid thing is not the size, it
   is the margin"]. One photograph on paper, then the work. From the handoff's
   visual contract (~/dev/research/ideas/outputs/signature-handoff/signature.css),
   on the site's own tokens and its two voices: Cormorant Garamond for the name,
   headings and photograph titles (italic), Geist Mono for utility labels.
   No copy over a photograph, no card boxes, no rounded corners, no shadows, no
   gradients, no motion. The hero is never clipped: on a wide screen it is as
   tall as the screen beside the masthead; on a narrow one it is as wide as the
   page under the masthead — a min(), never a fixed height. */
:root {
  --paper: #fbfbfa; --ink: #202220; --muted: #686b67; --ink-soft: #575a56; --line: #dcddd8;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --side: 4.5vw; --header: 88px;
  --strip: 56px;          /* the title row under each frame; a frame + its row = 92svh */
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 24px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--paper); color: var(--ink);
       font: 12px/1.6 var(--mono); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
figure { margin: 0; }
h1, h2, h3, p { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
           clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -200px; background: var(--paper); padding: 10px 14px; z-index: 10; }
.skip:focus { top: 12px; }

/* ---- the masthead: the name, and three quiet ways in ---- */
.masthead { min-height: var(--header); display: flex; align-items: center; justify-content: space-between;
            gap: 24px; padding: 0 var(--side); }
.name { font: 400 32px/1 var(--serif); letter-spacing: -0.02em; }
.site-nav { display: flex; gap: 34px; }
.site-nav a, .more-nav a, .lens-nav a, .prints { padding: 8px 0; }
.site-nav a:hover, .series-link:hover, .end a:hover {
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }

/* ---- 1. the hero: ONE full-bleed carousel under the masthead ----
   [operator 2026-10-18, v4 — "the portrait style photos are fucked up in homepage
   crops"]. The stage is the screen less the masthead, edge to edge. It carries two
   sets of photographs and shows the one that FITS the screen: on a landscape
   screen afloat. then the wide frames, on a portrait screen afloat. then the
   portraits — an aspect-ratio media query, so the other set is display:none and
   its tiers are never fetched. Each slide is cover-fit on its focal point (the
   generator's BLEED table, as object-position on the img); the title is INSIDE
   the link, one small word in the chosen corner, in the frame's ink, and fades
   WITH its photograph (the slide carries the opacity transition). The stage holds
   each photograph 8s and crossfades ~900ms (signature-carousel.js); hovering
   pauses; thin edge arrows in the masthead's type skip; reduced motion: no
   transition and no auto-advance. Sections are width 100 percent, never the
   viewport unit (a classic scrollbar made that overflow). */
:root { --margin: 54px; --box: min(92svh, 1100px); --fade: 900ms; }
.opening { position: relative; }
.carousel { position: relative; width: 100%; height: calc(100svh - var(--header)); overflow: hidden; background: var(--paper); }
.frame { display: block; color: var(--ink); }
.slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity var(--fade) ease; pointer-events: none; }
.slide.is-active { opacity: 1; z-index: 1; pointer-events: auto; }
.slide .photo { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.slide .photo picture, .slide .photo img { display: block; width: 100%; height: 100%; }
.slide .photo img { object-fit: cover; }
.slide .photo:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }
.slide .work-title { position: absolute; z-index: 1; font: italic 400 21px/1.1 var(--serif); pointer-events: none; }
.slide[data-ink="dark"] .work-title { color: #111; }
.slide[data-ink="paper"] .work-title { color: var(--paper); }
.slide[data-corner="lower-left"] .work-title { left: var(--side); bottom: 28px; }
.slide[data-corner="lower-right"] .work-title { right: var(--side); bottom: 28px; }
.slide[data-corner="upper-left"] .work-title { left: var(--side); top: 24px; }
.slide[data-corner="upper-right"] .work-title { right: var(--side); top: 24px; }
/* the fallback the brief allows when no corner clears 4.5:1 at every size: a 1px hairline under the word, never a band */
/* a 1px RULE under the whole word (never a link's underline, which skips the descenders) */
.slide[data-hairline] .work-title { text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid currentColor; }
/* which set shows: the frames that fit the screen */
@media (aspect-ratio >= 1) { .slide[data-set="tall"] { display: none; } }
@media (aspect-ratio < 1) { .slide[data-set="wide"] { display: none; } }
/* the edge arrows: thin, in the masthead's type, in the showing frame's ink */
.edge { position: absolute; top: 50%; z-index: 2; width: 48px; height: 72px; margin-top: -36px; display: flex; align-items: center; justify-content: center;
        font: 400 34px/1 var(--serif); color: var(--ink); opacity: 0.85; }
.edge-prev { left: 2px; }
.edge-next { right: 2px; }
.carousel[data-ink="paper"] .edge { color: var(--paper); }
.edge:hover { opacity: 1; }
.edge[hidden] { display: none; }
.edge:focus-visible { outline: 2px solid currentColor; outline-offset: -6px; }
@media (prefers-reduced-motion: reduce) { .slide { transition: none; } }
/* afloat. on a PORTRAIT phone: its photograph is a 2:3 window (min of the stage and 150vw) at
   the top of the stage, on its own focal point, so the square's disc still reads as a disc;
   the paper under it is the stage's [operator 2026-10-18]. A landscape phone (≤650 wide but
   wider than tall) shows the wide set on the full stage, the desktop focal point */
@media (max-width: 650px) and (aspect-ratio < 1) {
  .slide.hero-work .photo { height: min(100%, 150vw); }
  .slide.hero-work img[style*="--focus-phone"] { object-position: var(--focus-phone) !important; }
}

/* ---- 2. the ways in [operator 2026-10-18, v5]: the two collections as TALL 4:5
   cards side by side, then "Journeys →" over a shelf of three small 3:2 cards (root
   journeys only). Shape and scale are the section label: no heading, no rule ---- */
/* the air above each section header is ONE rhythm unit, the same under the carousel and
   between the sections: the headers do the separating [operator 2026-10-18: "why so much
   white space between collections and journeys"] */
.ways { padding: 112px var(--side) 0; }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.cards.shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards a { display: block; }
/* each card a fixed box, cover-fit on its focal point (the generator's HOME_CARDS), so
   the titles of a row share one baseline: the collections 4:5, the shelf 3:2 */
.cards picture { display: block; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; }
.cards.tall picture { aspect-ratio: 4 / 5; }
.cards img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cards .ep-title, .section-link .ep-title { display: block; padding: 14px 0 6px; font: italic 400 21px/1.1 var(--serif); }
.cards .ep-title span, .section-link .ep-title span { font-style: normal; font-size: 18px; margin-left: 8px; }
.section-link { display: inline-block; margin-bottom: 18px; }
.section-link .ep-title { padding-top: 0; }
.cards .ep-date, .cards .ep-line { display: block; font: 400 11px/1.5 var(--mono); color: var(--muted); }
.cards a:hover .ep-title, .section-link:hover .ep-title { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.work-title { font: italic 400 21px/1.1 var(--serif); color: inherit; }

/* ---- chapters ---- */
.chapter { max-width: 1600px; margin: 0 auto; padding: 120px 8vw 0; }
.chapter[tabindex]:focus { outline: none; }
.chapter-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 72px; }
.context { font: 400 11px/1.5 var(--mono); color: var(--muted); margin: 0 0 14px; }
.chapter h2, .chapter h1 { font: 400 clamp(36px, 4vw, 62px)/1.05 var(--serif); letter-spacing: -0.01em; }
.series-link { font-size: 11px; padding: 6px 0; white-space: nowrap; }
.series-link span { margin-left: 14px; }

/* ---- the foot ---- */
.end { padding: 140px var(--side) 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 24px 40px; }
.end .name { margin-right: auto; }
.more-nav, .lens-nav, .viewnav { display: flex; gap: 28px; font-size: 11px; }
.lens-nav a, .viewnav a, .prints { color: var(--ink-soft); }
.prints { font-size: 11px; }

/* ---- /journeys ---- */
.journey-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.journey-row { display: grid; grid-template-columns: 240px 1fr; gap: 32px; padding: 28px 0; border-bottom: 1px solid var(--line); align-items: start; }
.journey-row img { width: 100%; }
.journey-text { display: flex; flex-direction: column; gap: 6px; }
.journey-title { font: 400 32px/1.05 var(--serif); }
.journey-place, .journey-n { font-size: 10px; color: var(--muted); letter-spacing: 0.04em; }
.journey-line { font-size: 12px; color: var(--ink-soft); max-width: 40em; }
.journey-row:hover .journey-title { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }

/* ---- /about: the statement is the page's one large text ---- */
.about-page { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 8vw; align-items: start; padding-top: 72px; }
.about-page.no-photo { grid-template-columns: minmax(0, 1fr); }
.about-text { max-width: 760px; }
.chapter.about-page h1 { font: 400 11px/1.5 var(--mono); letter-spacing: 0; color: var(--muted); margin: 0 0 28px; }
.statement { font: 400 clamp(30px, 3.2vw, 46px)/1.2 var(--serif); letter-spacing: -0.005em; margin: 0 0 72px; }
.about-facts { margin: 0; border-top: 1px solid var(--line); }
.about-facts > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.about-facts dt { font-size: 11px; color: var(--muted); padding-top: 1px; }
.about-facts dd { margin: 0; font-size: 12px; }
.about-rooms { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.about-rooms li { display: flex; flex-wrap: wrap; gap: 2px 16px; align-items: baseline; }
.about-note { display: block; font-size: 11px; color: var(--ink-soft); }
.about-rooms .about-note { display: inline; }
.about-facts a, .about-eyes a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
                                text-decoration-color: var(--line); padding: 4px 0; }
.about-facts a:hover, .about-eyes a:hover { text-decoration-color: currentColor; }
.about-eyes { margin-top: 40px; font-size: 11px; color: var(--ink-soft); }
.about-work { width: 100%; margin-top: 8px; }
.about-work figcaption { padding-top: 13px; }

@media (max-width: 1000px) {
  .chapter { padding-left: 6vw; padding-right: 6vw; }
}
@media (max-width: 650px) {
  :root { --side: 24px; --header: 78px; }
  .name { font-size: 29px; }
  .site-nav { gap: 22px; font-size: 11px; }
  :root { --margin: 0px; --box: 92svh; }
  .slide[data-corner="lower-left"] .work-title, .slide[data-corner="upper-left"] .work-title { left: 24px; }
  .slide[data-corner="lower-right"] .work-title, .slide[data-corner="upper-right"] .work-title { right: 24px; }
  .slide[data-corner="lower-left"] .work-title, .slide[data-corner="lower-right"] .work-title { bottom: 20px; }
  .edge { width: 40px; height: 64px; margin-top: -32px; font-size: 30px; }
  .ways { padding: 72px 24px 0; }
  .cards, .cards.shelf { grid-template-columns: 1fr; gap: 32px; }
  .chapter { padding: 80px 24px 0; }
  .chapter-head { display: block; margin-bottom: 44px; }
  .chapter h2, .chapter h1 { font-size: 43px; }
  .chapter-head > .series-link { display: inline-block; margin-top: 20px; }
  .end { padding: 80px 24px 32px; }
  .end .name { flex: 1 0 100%; }
  .journey-row { grid-template-columns: 1fr; gap: 16px; }
  /* the phone: statement, then the photograph it describes, then the facts */
  .about-page { display: flex; flex-direction: column; gap: 0; padding-top: 40px; }
  .about-text { display: contents; }
  .about-page h1 { order: 0; }
  .statement { order: 1; font-size: 31px; margin-bottom: 48px; }
  .about-work { order: 2; }
  .about-facts { order: 3; }
  .about-eyes { order: 4; }
  .about-facts > div { grid-template-columns: 1fr; gap: 6px; }
  .about-rooms .about-note { display: block; flex-basis: 100%; }   /* every room note under its name, never ragged [visitor review] */
  .about-work { width: 64%; margin: 0 0 56px; }
}
/* the phone, upright: the photograph directly under the header, its title row,
   then the cue — no centering in a full-height stage, which left ~300px of paper
   above and below it at 390x844 [operator 2026-10-11]. Not on a short screen
   (<= 520px tall): there the stage keeps its height budget, or the cue
   falls off the first screen (560x375, webkit sweep, 2026-10-11) */
@media (max-width: 650px) and (min-height: 521px) {
  .opening { min-height: 0; }
  .opening-stage { flex: none; align-items: flex-start; }
}
/* the narrowest phones (320-380): three nav words beside the name, on ONE line
   [About joined the nav 2026-10-11; at 320 the name wrapped to two lines] */
@media (max-width: 380px) {
  .masthead { gap: 14px; }
  .name { font-size: 24px; white-space: nowrap; }
  .site-nav { gap: 13px; font-size: 10.5px; }
}
/* a SHORT screen (a phone on its side): the cue must still be on the first screen */
@media (max-height: 520px) and (orientation: landscape) {
  :root { --header: 56px; }
  .name { font-size: 24px; }
  .hero-work { min-width: 0; }
}