/* signature.css — the Signature homepage and /journeys [operator 2026-10-11].
   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, no fixed heights that clip — the opening GROWS with its
   content, it is never cut to the viewport. */
: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;
}
*, *::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 two 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 { padding: 8px 0; }
.site-nav a:hover, .series-link:hover, .end a:hover, .work-room:hover, .continue-cue:hover {
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }

/* ---- 1. the opening: the Signature, whole ---- */
.opening { display: flex; flex-direction: column; min-height: calc(100svh - var(--header)); }
.opening-stage { flex: 1 0 auto; position: relative; display: flex; align-items: center; justify-content: center;
                 padding: 8px var(--side) 12px; }
/* the photograph scales with the viewport's width AND height, so the opening
   fits the first screen — but as a min(), never a fixed height: a short or
   zoomed viewport gets a smaller photograph and the page simply grows */
.hero-work { width: min(64vw, calc(100svh - 226px), 830px); min-width: min(240px, 100%); }
.photo { display: block; width: 100%; }
.photo img { width: 100%; }
.hero-work figcaption { padding-top: 14px; display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.work-title { font: italic 400 21px/1.1 var(--serif); color: var(--ink); }
.work-room { font-size: 11px; color: var(--ink-soft); padding: 6px 0; }
/* titles only [operator 2026-10-11]: with no byline or aside beside it, the cue
   sits on the photograph's own center line, so the first screen stays symmetric */
.opening-bottom { min-height: 70px; padding: 0 var(--side); display: flex; align-items: center; justify-content: center;
                  gap: 20px; font-size: 11px; color: var(--muted); }
.continue-cue { color: var(--ink); padding: 10px 0; font-size: 12px; white-space: nowrap; }
.continue-cue span { margin-left: 18px; font-size: 18px; vertical-align: -2px; }

/* ---- 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; }

/* ---- 2. more from Forms: an asymmetric pair at their own ratios ---- */
.related-works { display: grid; grid-template-columns: .72fr 1fr; gap: 9vw; align-items: start; }
.work-1 { width: 100%; max-width: 420px; }
.work-2 { width: 100%; max-width: 560px; justify-self: end; margin-top: 150px; }
.related-works figcaption { display: flex; justify-content: space-between; align-items: baseline; padding-top: 13px;
                            color: var(--muted); font-size: 10px; }
.chapter-end { margin: 85px 0 0; display: flex; align-items: flex-end; justify-content: flex-end; gap: 30px; }

/* ---- 3. collections: the other room, and the complete index ---- */
.collections { padding-top: 160px; }
.collection-pair { display: grid; grid-template-columns: 1.1fr .82fr; gap: 9vw; align-items: end; }
.collection, .journey-link { display: block; }
.collection img, .journey-link img { width: 100%; }
.card { display: block; }
.collection .card-cap, .journey-link .card-cap { padding-top: 22px; display: flex; align-items: flex-start;
                                                   justify-content: space-between; gap: 24px; }
.collection-text { display: block; }
.collection-name { display: block; font: 400 32px/1 var(--serif); margin: 0 0 12px; }
.collection-line { display: block; font-size: 11px; line-height: 1.6; color: var(--ink-soft); max-width: 300px; }
.arrow { font-size: 14px; padding-top: 6px; }
.collection:hover .collection-name, .journey-link:hover .collection-name { text-decoration: underline;
  text-underline-offset: 6px; text-decoration-thickness: 1px; }
.index-all .context { margin-bottom: 18px; }
.index-grid { border-top: 1px solid var(--line); }
.episode-card { display: grid; grid-template-columns: 1fr auto; gap: 4px 20px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.episode-card .ep-title { font: 400 26px/1.1 var(--serif); }
.episode-card .ep-scent { font-size: 10px; color: var(--muted); align-self: center; }
.episode-card .ep-line { grid-column: 1 / -1; font-size: 11px; color: var(--ink-soft); }
.episode-card:hover .ep-title { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }

/* ---- the featured journey ---- */
.journey { padding-top: 150px; }
.journey-link { width: 83%; margin: 0 auto; }
.journey-go { font-size: 11px; white-space: nowrap; padding-top: 6px; }
.journey-go span { margin-left: 12px; }

/* ---- 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 { color: var(--ink-soft); }

/* ---- /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; }

/* ---- the viewer: the selected edit, large ---- */
html.viewing, html.viewing body { overflow: hidden; }
.viewer { border: 0; padding: 0 4vw; margin: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none;
          background: var(--paper); color: var(--ink); }
.viewer::backdrop { background: var(--paper); }
.viewer[open] { display: flex; flex-direction: column; }
.viewer-top { flex: none; min-height: 64px; display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--ink-soft); }
.viewer-close { padding: 12px 0 12px 20px; font-size: 12px; color: var(--ink); min-height: 44px; }
.viewer-image { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 20px; align-items: center; }
.viewer-image img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.viewer-image button { font-size: 24px; min-height: 44px; min-width: 44px; color: var(--ink); }
.viewer-image button[aria-disabled="true"] { color: #b8bab5; cursor: default; }
.viewer-bottom { flex: none; min-height: 96px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.viewer-caption { display: flex; align-items: baseline; gap: 22px; }
.viewer-title { font: italic 400 25px/1.1 var(--serif); }
.viewer-count { font-size: 10px; color: var(--muted); }
.viewer-continue { font-size: 12px; padding: 10px 0; }
.viewer-continue span { margin-left: 12px; }

@media (max-width: 1000px) {
  .chapter { padding-left: 6vw; padding-right: 6vw; }
  .related-works, .collection-pair { gap: 7vw; }
  .work-2 { margin-top: 90px; }
}
@media (max-width: 650px) {
  :root { --side: 24px; --header: 78px; }
  .name { font-size: 29px; }
  .site-nav { gap: 22px; font-size: 11px; }
  .hero-work { width: min(100%, calc(100svh - 214px)); }
  .opening-bottom { font-size: 10px; }
  .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; }
  .related-works { display: flex; flex-direction: column; gap: 55px; align-items: flex-start; }
  .work-1 { width: 72%; }
  .work-2 { width: 90%; margin: 0; align-self: flex-end; }
  .chapter-end { margin-top: 46px; align-items: flex-end; }
  .collections { padding-top: 110px; }
  .collection-pair { display: flex; flex-direction: column; gap: 66px; align-items: stretch; }
  .collection-name { font-size: 29px; }
  .journey { padding-top: 110px; }
  .journey-link { width: 100%; }
  .journey-link .card-cap { flex-wrap: wrap; }
  .end { padding: 80px 24px 32px; }
  .end .name { flex: 1 0 100%; }
  .journey-row { grid-template-columns: 1fr; gap: 16px; }
  .viewer { padding: 0 16px; }
  .viewer-image { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 4px; }
  .viewer-caption { display: block; }
  .viewer-count { display: block; margin-top: 8px; }
}
/* 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 below, 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; padding: 0 24px; }
  .opening-bottom { min-height: 0; padding-top: 6px; justify-content: flex-start; }
}
/* 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 { width: min(64vw, calc(100svh - 150px)); min-width: 0; }
  .opening-stage { padding-top: 0; padding-bottom: 8px; }
  .hero-work figcaption { padding-top: 8px; }
  .opening-bottom { min-height: 44px; }
}