/* OBJECTS, the house publication. Shared by every case in objects/cases/<name>/index.html.
   A quiet gallery of objects on paper: Archivo at normal width, ink on paper, museum captions in stone,
   orange only on the star. Template: hero object, facts, story, making, photographs, next, contact. */
:root {
  --paper: #f2f0eb; --tag: #fbfaf7; --ink: #151412; --stone: #8a857c; --caption: #6f6a62; --orange: #fd3d04;
  --line: rgba(21,20,18,.14); --ground: #e4e2dc;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --serif: "Instrument Serif", "Times New Roman", serif;
  --gutter: clamp(16px, 4vw, 56px); --ease: cubic-bezier(.65, 0, .2, 1);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-stretch: 100%; font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
figure { margin: 0; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.link:hover { text-decoration-color: var(--stone); }

/* ---------- The shared frame: header ---------- */
.yz-bar { position: fixed; z-index: 50; top: 0; left: 0; right: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; padding: max(18px, env(safe-area-inset-top)) var(--gutter) 16px; background: var(--paper); font: 400 14px/1.2 var(--sans); }
.yz-bar a { text-decoration: none; }
.yz-bar a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.yz-bar__back { justify-self: start; }
.yz-bar__mark { justify-self: center; font-weight: 600; letter-spacing: .06em; }
.yz-bar__contact { justify-self: end; }

/* ---------- The shared frame: footer ---------- */
.yz-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; margin-top: clamp(64px, 8vw, 110px); padding: 28px var(--gutter) max(28px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); font: 400 14px/1.2 var(--sans); }
.yz-foot__sig { justify-self: start; font-family: var(--serif); font-size: 20px; }
.yz-foot__place { justify-self: end; color: var(--caption); }
.yz-orbit { justify-self: center; display: flex; gap: 2px; }
.yz-orbit a { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; }
.yz-orbit a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--c); }
.yz-orbit a[aria-current]::before { background: var(--c); }

/* ---------- Head: caption, title, one serif line ---------- */
.c-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px 56px; align-items: end; padding: clamp(120px, 14vw, 170px) var(--gutter) clamp(28px, 4vw, 48px); }
.c-kicker { margin: 0; font-size: 14px; color: var(--caption); }
.c-head h1 { margin: 12px 0 0; font-size: clamp(48px, 7.4vw, 116px); font-weight: 500; line-height: .98; letter-spacing: -.035em; }
.c-lede { margin: 0; max-width: 32ch; font-family: var(--serif); font-size: clamp(22px, 2vw, 28px); line-height: 1.3; }

/* ---------- Hero: the object on a neutral ground ---------- */
.c-hero { margin: 0 var(--gutter); background: var(--ground); overflow: hidden; }
.c-hero img { width: 100%; aspect-ratio: var(--ar, 16 / 9); max-height: 82svh; object-fit: cover; object-position: var(--pos, 50% 50%); }
.c-cap { margin: 10px var(--gutter) 0; font-size: 14px; color: var(--caption); }

/* ---------- Facts table and story, side by side ---------- */
.c-intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px clamp(32px, 6vw, 96px); align-items: start; padding: clamp(64px, 8vw, 110px) var(--gutter) 0; }
.facts { margin: 0; border-bottom: 1px solid var(--line); }
.facts > div { display: grid; grid-template-columns: minmax(7.5em, 2fr) minmax(0, 3fr); gap: 16px; padding: 11px 0; border-top: 1px solid var(--line); }
.facts dt { font-size: 15px; color: var(--caption); }
.facts dd { margin: 0; font-size: 15px; font-weight: 500; }
.facts a { text-decoration: none; }
.facts a:hover { text-decoration: underline; text-underline-offset: 4px; }
.story { display: grid; gap: 22px; max-width: 62ch; }
.story p { margin: 0; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.6; }
.story h2 { margin: 0 0 -14px; font-size: 14px; font-weight: 400; color: var(--caption); }

/* ---------- A section of the publication ---------- */
.c-sec { padding: clamp(80px, 10vw, 140px) var(--gutter) 0; }
.c-h { margin: 0; font-size: clamp(30px, 3.6vw, 52px); font-weight: 500; line-height: 1.05; letter-spacing: -.025em; }
.c-note { margin: 14px 0 0; max-width: 52ch; color: #3a3833; }
.c-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(32px, 6vw, 96px); align-items: start; }
.c-quote { margin: 0; max-width: 22ch; font-family: var(--serif); font-size: clamp(32px, 4vw, 60px); font-weight: 400; line-height: 1.08; letter-spacing: -.01em; }

/* ---------- Photographs: a calm grid with captions ---------- */
.photos { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) clamp(14px, 2vw, 28px); align-items: start; padding: clamp(80px, 10vw, 140px) var(--gutter) 0; }
.photos figure { grid-column: var(--c, auto / span 6); }
.photos img, .grid img { width: 100%; background: var(--ground); }
.photos figcaption, .grid figcaption { margin-top: 10px; font-size: 14px; color: var(--caption); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) clamp(14px, 2vw, 28px); align-items: start; margin-top: clamp(28px, 4vw, 48px); }
.grid img { aspect-ratio: var(--ar, 4 / 5); object-fit: cover; object-position: var(--pos, 50% 50%); }

/* ---------- Making: the real steps, in order ---------- */
.steps { display: flex; gap: 16px; margin-top: clamp(28px, 4vw, 44px); padding: 0 var(--gutter) 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scroll-padding: 0 var(--gutter); }
.steps figure { flex: 0 0 clamp(220px, 24vw, 340px); scroll-snap-align: start; }
.steps img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--ground); }
.steps figcaption { display: flex; gap: 10px; align-items: baseline; margin-top: 10px; font-size: 15px; }
.steps i { font-style: normal; font-size: 14px; color: var(--caption); font-variant-numeric: tabular-nums; }
.c-sec--bleed { padding-left: 0; padding-right: 0; }
.c-sec--bleed > .c-h { padding: 0 var(--gutter); }

/* ---------- One strong number per case ---------- */
.big { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin-top: clamp(48px, 6vw, 80px); }
.big b { font-size: clamp(72px, 10vw, 160px); font-weight: 500; letter-spacing: -.045em; line-height: .9; font-variant-numeric: tabular-nums; }
.big span { max-width: 22ch; color: var(--caption); }

/* ---------- Next case ---------- */
.next { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 56px; align-items: center; margin: clamp(90px, 11vw, 150px) var(--gutter) 0; padding-top: 24px; border-top: 1px solid var(--line); text-decoration: none; }
.next small { display: block; font-size: 14px; color: var(--caption); }
.next b { display: block; margin-top: 8px; font-size: clamp(34px, 4.4vw, 64px); font-weight: 500; line-height: 1.02; letter-spacing: -.03em; }
.next .go { display: inline-block; margin-top: 18px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.next img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--ground); transition: opacity .4s; }
.next:hover img { opacity: .9; }

/* ---------- Contact: paper, ink, the star in orange ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px clamp(32px, 6vw, 96px); align-items: start; margin: clamp(90px, 11vw, 150px) var(--gutter) 0; padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--ink); }
.contact__star { display: block; width: 30px; height: 35px; fill: var(--orange); margin-bottom: 22px; }
.contact h2 { margin: 0; font-size: clamp(34px, 4.4vw, 64px); font-weight: 500; line-height: 1.02; letter-spacing: -.03em; }
.contact p { margin: 18px 0 0; max-width: 40ch; font-size: clamp(17px, 1.3vw, 19px); }
.contact .facts { margin-top: 6px; }
.contact .facts dd { font-size: 17px; }
.contact .facts a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; overflow-wrap: anywhere; }
.contact .facts a:hover { text-decoration-color: var(--stone); }

@media (max-width: 900px) {
  .c-head, .c-intro, .c-split, .contact, .next { grid-template-columns: 1fr; }
  .c-head { padding-top: 104px; }
  .c-hero img { aspect-ratio: 4 / 5; }
  .photos, .grid { grid-template-columns: 1fr 1fr; }
  .photos figure, .grid figure { grid-column: span 1 !important; }
  .photos figure.wide, .grid figure.wide { grid-column: 1 / -1 !important; }
  .next img { order: -1; }
}
@media (max-width: 420px) { .yz-foot { gap: 8px; } .yz-foot__sig { font-size: 18px; } }
@media (max-width: 420px) { .yz-bar { font-size: 13px; gap: 10px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }