@font-face {
  font-family: 'Edict Text';
  src: url('/fonts/EdictText-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: block;
}
:root {
  --muted: #949494;
  --frame: clamp(18px, 4vmin, 48px);
  --frame-band: 44px;
  --gallery-step: 120%;
  --vertical: calc(var(--frame) + var(--frame-band));
  --rail-width: clamp(24px, 3.667vw, 44px);
  --gallery-gap: calc(2 * var(--frame));
  --card-inset: calc(2 * var(--frame) + var(--rail-width));
  --card-block-inset: calc(2 * var(--frame) + var(--frame-band));
  --preview-ratio: calc(1200 / 630);
  --print-width: min(max(0px, calc(100vw - 2 * var(--card-inset))), calc(max(0px, 100svh - 2 * var(--card-block-inset)) * var(--preview-ratio)));
  --print-height: calc(var(--print-width) / var(--preview-ratio));
  --article-inset: var(--card-inset);
  --article-max: 1120px;
  --reading-max: 52ch;
  --body-leading: 1.45;
  --case-unit: calc(var(--type-body) * var(--body-leading) / 2);
  --case-gutter: calc(2 * var(--case-unit));
  --case-section-space: calc(6 * var(--case-unit));
  --case-intro-space: calc(4 * var(--case-unit));
  --case-columns: repeat(6, minmax(0, 1fr));
  --case-row-gap: var(--case-gutter);
  --project-duration: 420ms;
  --project-ease: cubic-bezier(.25,.8,.25,1);
  --index-gap: .5em;
  --radius: 0px;
  --card-shadow: 0 0 0 1px rgb(0 0 0 / .10), 0 1px 1px var(--muted);
  --ease: cubic-bezier(.22,1,.36,1);
}
/* Shared type roles for the gallery and every project. */
:root {
  --type-ui: clamp(14px, 1.2vw, 18px);
  --type-label: calc(var(--type-ui) * .9);
  --type-masthead: clamp(16px, 1.5vw, 22px);
  --type-body: clamp(18px, 1.7vw, 24px);
  --type-display: clamp(24px, 3vw, 44px);
  --type-title: var(--type-display);
  --type-wordmark: clamp(20px, 10vw, 120px);
}
[hidden] { display: none !important; }
html { -webkit-tap-highlight-color: transparent; }
html, body { overscroll-behavior: none; }
body { font-family: 'Edict Text', Georgia, serif; font-weight: 300; }
.center-text { position: fixed; z-index: 0; pointer-events: none; letter-spacing: .025em; }
.gallery-chrome { position: fixed; z-index: 1; }
.studio-name { text-transform: uppercase; top: var(--frame); height: var(--frame-band); display: grid; place-items: center; left: 0; right: 0; font-size: var(--type-masthead); font-family: 'Edict Display', Georgia, serif; font-weight: 700; pointer-events: none; }
.bottom-links { font-weight: 500; bottom: var(--frame); height: var(--frame-band); left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: clamp(28px,4vw,56px); color: var(--muted); font-size: var(--type-ui); pointer-events: none; }
.stage { position: sticky; top: var(--gallery-top, calc((100svh - var(--print-height)) / 2)); height: 0; width: var(--print-width); margin-inline: auto; z-index: 2; pointer-events: none; }
.project-card { position: absolute; inset: 0; height: var(--print-height); display: block; pointer-events: none; border-radius: var(--radius); outline-offset: 6px; }
.project-card.is-active { pointer-events: auto; }
.card-surface { position: relative; display: block; height: 100%; overflow: hidden; border-radius: var(--radius); background: white; box-shadow: var(--card-shadow); }
.card-surface img { width: 100%; height: 100%; object-fit: cover; display: block; }
.project-card:focus-visible { outline: 1px solid black; }
.scroll-track { position: fixed; inset: 0; height: 100svh; overflow-y: auto; overscroll-behavior: none; scroll-snap-type: y mandatory; scrollbar-width: none; z-index: 2; pointer-events: none; }
.scroll-track::-webkit-scrollbar { display: none; }
/* Leave the fixed navigation bands clickable beneath the card layer. */
.scroll-stop { position: relative; height: var(--gallery-step); pointer-events: none; }
/* Snap to a point within each stop. Oversized snap areas permit free scrolling
   inside them, leaving a card partly displaced instead of returning to rest. */
.scroll-anchor { height: 1px; scroll-snap-align: start; scroll-snap-stop: normal; }
/* The last card ends at its snap point, without extra empty scroll travel. */
.scroll-stop:last-child { height: 100%; }
.scroll-input { row-gap: var(--gallery-gap); position: sticky; top: 0; height: 0; pointer-events: none; }
.scroll-input::before { content: ""; position: absolute; top: var(--vertical); width: 100%; height: calc(100svh - 2 * var(--vertical)); pointer-events: auto; }
.project-index { z-index: 3; font-size: var(--type-ui); right: 0; padding-inline-end: var(--frame); box-sizing: border-box; top: 50svh; transform: translateY(-50%); display: flex; flex-direction: column; max-height: max(calc(2px + var(--index-gap)), calc(var(--gallery-height, var(--print-height)) - 2 * var(--frame))); overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: none; scrollbar-width: none; width: max(44px, calc(var(--rail-width) + var(--frame))); pointer-events: auto; }
.project-index { -webkit-touch-callout: none; user-select: none; }
.project-index a { width: 100%; min-height: calc(var(--index-stroke, 2px) + var(--index-gap)); flex: 0 0 calc(var(--index-stroke, 2px) + var(--index-gap)); display: flex; align-items: center; justify-content: flex-end; position: relative; color: #707070; text-decoration: none; }
.index-mark { width: 12px; height: var(--index-stroke, 2px); background: #d2d2d2; transform-origin: right; transition: transform 30ms ease-out; pointer-events: none; }
.project-index a:focus-visible { outline: 1px solid black; outline-offset: -2px; }
.index-slide-group { display: flex; flex-direction: column; flex: none; }
.project-index .is-project-level { --index-stroke: 4px; }
.project-index .is-project-level .index-mark { transform: scaleX(var(--index-parent-scale, 3)); transition: none; }
.case-study .project-index { max-height: max(calc(4px + var(--index-gap)), calc(100svh - 2 * var(--card-block-inset))); z-index: 4; }
.case-study .index-title { z-index: 5; }

/* Names remain available to assistive technology without crowding the rail. */
.index-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.project-index.is-exploring { z-index: 3; }
.index-title { position: fixed; z-index: 4; right: calc(var(--frame) + var(--rail-width)); top: 50svh; transform: translateY(-50%); padding-right: 12px; font-size: var(--type-label); color: #292724; text-decoration: none; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 120ms ease, visibility 120ms; }
.index-title.is-visible { opacity: 1; visibility: visible; pointer-events: auto; }
.index-title span { display: block; max-width: min(32ch, 65vw); padding: var(--label-padding, .5em); background: rgb(255 255 255 / .98); border: 1px solid rgb(40 36 28 / .13); border-radius: 0; box-shadow: 0 1px 2px rgb(0 0 0 / .08); line-height: 1.25; overflow-wrap: anywhere; }
.case-study { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: white; color: black; overflow-y: auto; overscroll-behavior: none; }
.case-study::backdrop { background: white; }
/* The title row already occupies --vertical; add only the remaining minimum inset. */
.case-study article { width: min(max(0px, calc(100% - 2 * var(--article-inset))), var(--article-max)); margin-inline: auto; padding-top: max(0px, calc(var(--card-block-inset) - var(--vertical))); }
.case-hero { display: block; cursor: pointer; width: 100%; aspect-ratio: var(--preview-ratio); margin: 0 auto; background: white; overflow: hidden; }
.case-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Six shared columns; spacing follows half a line of body text. */
.case-copy, .case-section { display: grid; grid-template-columns: var(--case-columns); column-gap: var(--case-gutter); row-gap: var(--case-row-gap); margin: 0; padding-bottom: var(--case-section-space); align-items: start; font-size: var(--type-body); line-height: var(--body-leading); }
.case-copy { padding-top: var(--case-intro-space); }
.case-copy h1 { grid-column: 1 / -1; max-width: 32ch; margin: 0; font-family: 'Edict Display',Georgia,serif; font-weight: 700; font-size: var(--type-title); letter-spacing: -.025em; line-height: 1.05; text-wrap: balance; overflow-wrap: anywhere; }
.case-details { grid-column: 3 / -1; grid-row: 2; min-width: 0; max-width: var(--reading-max); }
.case-details p { margin: 0; }
.case-details p, .case-prose p, .case-figures figcaption, .case-prompts p { text-wrap: pretty; }
.case-project-link { grid-column: 1 / 3; grid-row: 2; justify-self: start; max-width: 100%; color: inherit; font-size: var(--type-ui); line-height: 1.5; padding-top: .25em; text-underline-offset: .25em; text-decoration-thickness: 1px; overflow-wrap: anywhere; }
.case-project-link:hover { color: var(--muted); }

::view-transition-group(project-preview) { animation-duration: var(--project-duration); animation-timing-function: var(--project-ease); }
::view-transition-old(project-preview), ::view-transition-new(project-preview) { height: 100%; object-fit: cover; }

@media (prefers-reduced-motion: reduce) { .card-surface, .index-mark { transition: none; } ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: 0s !important; } }
@media print { .stage, .scroll-track, .gallery-chrome, .index-title, .case-study { display: none !important; } }

/* A broad, low-contrast reflection; only transform and opacity change on hover. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .card-surface { --sheen-color: 255 255 255; --sheen-peak: .08; --sheen-mid: .035; --sheen-edge: .008; }
  .card-surface[data-sheen="dark"] { --sheen-color: 0 0 0; }
  .card-surface::after {
    content: "";
    position: absolute;
    --reflection-extent: var(--reflection-size, calc(2 * (var(--print-width) + var(--print-height))));
    width: var(--reflection-extent);
    height: var(--reflection-extent);
    left: calc(50% - var(--reflection-extent) / 2);
    top: calc(50% - var(--reflection-extent) / 2);
    pointer-events: none;
    background: linear-gradient(90deg, transparent 36%, rgb(var(--sheen-color) / var(--sheen-edge)) 44%, rgb(var(--sheen-color) / var(--sheen-mid)) 49%, rgb(var(--sheen-color) / var(--sheen-peak)) 51%, transparent 54%);
    transform: translate(var(--sheen-x, 0%), var(--sheen-y, 0%)) rotate(var(--sheen-angle, 0deg));
    opacity: 0;
    transition: opacity 120ms ease, transform 100ms ease-out;
  }
  .project-card.is-active:hover .card-surface::after { opacity: 1; }
}

.studio-name a { color: inherit; text-decoration: none; pointer-events: auto; }
.studio-name a:hover, .studio-name a:focus-visible { color: var(--muted); }

.bottom-links a, .bottom-links button { appearance: none; border: 0; padding: 0; background: none; color: black; font: inherit; text-decoration: none; cursor: pointer; pointer-events: auto; }
.bottom-links a:hover, .bottom-links button:hover, .bottom-links a:focus-visible, .bottom-links button:focus-visible { color: var(--muted); }
.bottom-links .about-toggle[aria-expanded="true"] { color: var(--muted); }
.bottom-links .about-toggle[aria-expanded="true"]:hover, .bottom-links .about-toggle[aria-expanded="true"]:focus-visible { color: black; }
.about-panel { pointer-events: auto; display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 5; background: rgb(255 255 255 / .98); color: black; padding: var(--vertical) var(--frame); box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain; outline: none; }
.about-copy { width: 100%; max-width: min(38ch, max(0px, calc(var(--print-width) - 2 * var(--frame)))); flex-shrink: 0; margin: auto; display: flex; flex-direction: column; justify-content: center; font-size: var(--type-ui); line-height: 1.5; }
.about-copy p { margin: 0 0 1em; text-align: left; text-wrap: balance; }
.is-about-open { overflow-y: hidden; }
.is-about-open .studio-name, .is-about-open .bottom-links, .is-about-open .project-index { z-index: 6; }
.is-about-open .index-title { z-index: 7; }
@media print { .about-panel { pointer-events: auto; display: none !important; } }

/* About colour follows its slower overlay; other navigation stays responsive. */
.studio-name a, .bottom-links a, .bottom-links button { transition: color 160ms ease-out; }
.bottom-links .about-toggle { transition: color 360ms cubic-bezier(.25,.1,.25,1); }
.bottom-links .about-toggle[aria-expanded="true"] { transition-duration: 480ms; }
@media (prefers-reduced-motion: reduce) {
  .studio-name a, .bottom-links a, .bottom-links button { transition: none; }
}


.case-image { display: block; width: 100%; height: auto; margin: 0 auto var(--frame); object-fit: contain; }

.project-index::-webkit-scrollbar { display: none; }
.project-index.is-overflowing {
  --rail-fade: min(24px, var(--frame));
  mask-image: linear-gradient(to bottom, rgb(0 0 0 / var(--rail-top-alpha, 1)), #000 var(--rail-fade), #000 calc(100% - var(--rail-fade)), rgb(0 0 0 / var(--rail-bottom-alpha, 1)));
  -webkit-mask-image: linear-gradient(to bottom, rgb(0 0 0 / var(--rail-top-alpha, 1)), #000 var(--rail-fade), #000 calc(100% - var(--rail-fade)), rgb(0 0 0 / var(--rail-bottom-alpha, 1)));
}

.index-mark { clip-path: polygon(var(--tip-top, 0px) 0, 100% 0, 100% 100%, var(--tip-bottom, 0px) 100%, var(--tip-middle, 0px) 50%); }

.case-breadcrumb { position: relative; z-index: 3; top: auto; left: auto; right: auto; margin: var(--frame) var(--frame) 0; display: flex; justify-content: center; align-items: center; }
.case-breadcrumb > a { display: flex; align-items: center; min-width: 0; max-width: 100%; }
.case-studio { flex-shrink: 0; }
.case-path { display: flex; min-width: 0; white-space: pre; }
.case-current { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: 'Edict Display', Georgia, serif; font-weight: 700; text-transform: none; }

/* Preserve the studio title as one moving element; reveal the appended path. */
.case-path { view-transition-name: case-path; }
::view-transition-group(studio-title), ::view-transition-group(case-path) { animation-duration: var(--project-duration); animation-timing-function: var(--project-ease); }
::view-transition-old(studio-title) { animation: none; opacity: 0; }
::view-transition-new(studio-title) { animation: none; opacity: 1; }
::view-transition-new(case-path) { animation: breadcrumb-open var(--project-duration) var(--project-ease) both; }
::view-transition-old(case-path) { animation: breadcrumb-close var(--project-duration) var(--project-ease) both; }
@keyframes breadcrumb-open {
  from { transform: translateX(var(--breadcrumb-travel, 0px)); clip-path: inset(0 100% 0 0); }
  to { transform: translateX(0); clip-path: inset(0 0 0 0); }
}
@keyframes breadcrumb-close {
  from { transform: translateX(0); clip-path: inset(0 0 0 0); }
  to { transform: translateX(var(--breadcrumb-travel, 0px)); clip-path: inset(0 100% 0 0); }
}
a:focus-visible, button:focus-visible { outline: 1px solid black; outline-offset: 4px; }
a:focus:not(:focus-visible), button:focus:not(:focus-visible) { outline: none; }

.case-study, .about-panel { scrollbar-width: none; }
.case-study::-webkit-scrollbar, .about-panel::-webkit-scrollbar { display: none; }
.reading-progress { position: fixed; top: 0; right: 0; width: 2px; height: 100dvh; background: black; transform: scaleY(0); transform-origin: top; pointer-events: none; z-index: 8; }

.case-copy h1:focus { outline: none; }

/* Project sections repeat the introduction's six-column reading axis. */
.case-section h2 { grid-column: 1 / 3; margin: 0; font-size: 1em; font-weight: 500; line-height: 1.5; text-wrap: balance; }
.case-prose { grid-column: 3 / -1; max-width: var(--reading-max); min-width: 0; overflow-wrap: anywhere; }
.case-prose p { margin: 0 0 .75em; }
.case-prose p:last-child { margin-bottom: 0; }
.case-facts { grid-column: 1 / 3; grid-row: 2; margin: 0; font-size: var(--type-ui); line-height: 1.5; }
.case-facts dt { font-weight: 500; }
.case-facts dd { margin: 0 0 1.5em; }
.case-facts dd:last-child { margin-bottom: 0; }
.case-figures { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1.5em; margin-top: 1.5em; }
.case-figures figure { min-width: 0; margin: 0; }
.case-figures img { display: block; width: 100%; height: auto; }
.case-figures figcaption { max-width: var(--reading-max); margin-top: .75em; font-size: var(--type-ui); line-height: 1.5; }


.case-aside { grid-column: 1 / 3; grid-row: 2; display: flex; flex-direction: column; gap: 1.5em; min-width: 0; }
.case-references { display: flex; flex-wrap: wrap; gap: .75em 1.5em; margin-top: 1.5em; font-size: var(--type-ui); }
.case-references a { color: inherit; text-underline-offset: .25em; text-decoration-thickness: 1px; }
.case-references a:hover { color: var(--muted); }


/* Editorial plates use live text so they remain readable at every size. */
.case-principles { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5em; margin: 1.5em 0 0; padding: 0; list-style: none; counter-reset: principle; }
.case-principles li { counter-increment: principle; border-top: 1px solid currentColor; }
.case-principles a { display: grid; grid-template-columns: 2ch minmax(0, 1fr); column-gap: 1em; align-content: start; padding: .75em 0 1em; color: inherit; text-decoration: none; }
.case-principles a::before { content: counter(principle, decimal-leading-zero); font-size: var(--type-ui); padding-top: .2em; color: var(--muted); }
.principle-name { font-family: 'Edict Display', Georgia, serif; font-weight: 700; font-size: var(--type-body); line-height: 1.15; overflow-wrap: anywhere; }
.principle-subject { grid-column: 2; margin-top: .5em; font-size: var(--type-ui); }
.case-principles a:hover { color: var(--muted); }
.case-prompts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5em; margin-top: 1.5em; }
.case-prompts figure { margin: 0; padding-top: 1em; border-top: 1px solid black; }
.case-prompts figcaption { font-size: var(--type-ui); font-weight: 500; }
.case-prompts blockquote { margin: 1em 0; font-family: 'Edict Display', Georgia, serif; font-weight: 700; font-size: var(--type-display); line-height: 1.15; text-wrap: balance; }
.case-prompts p { font-size: var(--type-ui); margin: 0; }
.case-figures figcaption a { color: inherit; text-decoration: none; }
.case-figures figcaption a:hover { text-decoration: underline; text-underline-offset: .2em; }


.case-principles .principle-bookend { grid-column: 1 / -1; counter-increment: none; }
.case-principles .principle-bookend a::before { content: ''; }

.case-principles .principle-bookend:last-child { border-bottom: 1px solid currentColor; }



.case-title-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.case-copy--untitled .case-details, .case-copy--untitled .case-aside { grid-row: 1; }
.case-section--contents .case-principles { margin-top: 0; }


/* The article alone changes its reading grid on narrow screens. */
@media (max-width: 640px) {
  :root {
    --article-inset: var(--frame);
    --case-columns: minmax(0, 1fr);
    --case-section-space: calc(4 * var(--case-unit));
    --case-intro-space: calc(3 * var(--case-unit));
  }

  .case-copy h1, .case-details, .case-project-link { grid-column: 1; grid-row: auto; }
  .case-project-link { padding-top: 0; }
.case-section { row-gap: var(--case-unit); }
  .case-section h2, .case-prose, .case-facts { grid-column: 1; grid-row: auto; }
  .case-figures { margin-top: 1.5em; }
.case-aside { grid-column: 1; grid-row: auto; }
.case-principles, .case-prompts { grid-template-columns: minmax(0, 1fr); }

.case-copy--untitled .case-details, .case-copy--untitled .case-aside { grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) { :root { --project-duration: 0s; } }

/* Print articles in normal flow; paper size and orientation belong to the reader. */
.project-print { display: none; }
@page { margin: 0; }
@media print {
  html:has(body.printing-project), body.printing-project { display: block; height: auto; min-height: 0; overflow: visible; }
  .printing-project .center-text, .printing-project .print-author { display: none; }
  .project-print {
    display: block;
    width: 100%;
    --type-ui: 9pt;
    --type-body: 11pt;
    --type-display: 20pt;
    --type-title: var(--type-display);
    --case-unit: 7.5pt;
    --print-reading: 135mm;
    color: black;
    font-size: var(--type-body);
    line-height: 15pt;
  }
  .project-print-cover { position: relative; box-sizing: border-box; height: calc(100vh - 1px); display: grid; place-items: center; break-after: page; }
  .project-print-cover h1 { margin: 0; padding: 20mm; font-family: 'Edict Display', Georgia, serif; font-weight: 700; font-size: 36pt; line-height: 1.1; text-align: center; transform: translateY(-.15em); overflow-wrap: anywhere; text-wrap: balance; }
  .project-print-cover p { position: absolute; right: 20mm; bottom: 20mm; margin: 0; font-family: 'Edict Text', Georgia, serif; font-weight: 500; font-size: 12pt; text-transform: uppercase; }
  .project-print article { box-sizing: border-box; width: 100%; max-width: 202mm; margin: 0 auto; padding: 16mm 16mm 0; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .project-print .case-hero { display: block; cursor: pointer; width: 100%; aspect-ratio: auto; margin: 0 0 22.5pt; background: transparent !important; break-inside: avoid; }
  .project-print .case-hero img { width: 100%; height: auto; max-height: 40vh; object-fit: contain !important; }
  .project-print .case-copy, .project-print .case-section { display: block; max-width: var(--print-reading); margin: 0 auto; padding: 0 0 22.5pt; font-size: 11pt; line-height: 15pt; }
  .project-print .case-copy h1 { font-size: 20pt; line-height: 24pt; margin: 0 0 15pt; }
  .project-print .case-aside { display: block; margin: 0 0 15pt; font-size: 9pt; line-height: 12pt; break-inside: avoid; }
  .project-print .case-facts { display: flex; flex-wrap: wrap; gap: 3pt 12pt; font-size: inherit; line-height: inherit; }
  .project-print .case-facts > div { display: flex; gap: 5pt; }
  .project-print .case-facts dd { margin: 0; }
  .project-print .case-project-link { display: inline-block; margin-top: 6pt; padding: 0; font-size: 9pt; line-height: 12pt; }
  .project-print .case-details, .project-print .case-prose { max-width: none; }
  .project-print .case-section h2 { margin: 0 0 7.5pt; font-size: 13pt; line-height: 15pt; font-weight: 500; text-wrap: balance; }
  .project-print .case-prose p { margin: 0 0 7.5pt; }
  .project-print .case-prose p:last-child { margin-bottom: 0; }
  .project-print .case-figures { display: flex; flex-wrap: wrap; gap: 15pt; margin-top: 15pt; }
  .project-print .case-figures figure { flex: 1 1 55mm; min-width: 0; margin: 0; }
  .project-print .case-figures img, .project-print .case-image { width: 100%; height: auto; max-height: 65vh; object-fit: contain; }
  .project-print .case-figures figcaption { max-width: none; margin-top: 5pt; font-size: 9pt; line-height: 12pt; font-weight: 500; }
  .project-print .case-principles { grid-template-columns: repeat(auto-fit, minmax(min(100%, 55mm), 1fr)); gap: 0 15pt; margin: 0; }
  .project-print .case-principles a { padding: 7.5pt 0; column-gap: 7.5pt; }
  .project-print .principle-name { font-size: 11pt; line-height: 13pt; }
  .project-print .principle-subject { margin-top: 3pt; font-size: 9pt; line-height: 12pt; }
  .project-print .case-prompts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 55mm), 1fr)); gap: 15pt; }
  .project-print .case-references { margin-top: 7.5pt; gap: 5pt 12pt; font-size: 9pt; line-height: 12pt; }
  .project-print figure, .project-print .case-principles li { break-inside: avoid; }
  .project-print h1, .project-print h2, .project-print img { break-after: avoid; }
  .project-print p { orphans: 3; widows: 3; }
  .project-print a { color: black; overflow-wrap: anywhere; }
  .project-print article > :last-child { margin-bottom: 0; padding-bottom: 0; }
  .project-print .case-prose > :last-child { margin-bottom: 0; }
  .project-print .case-project-link::after { content: ' | ' attr(href); font-weight: 300; }
}

/* Tracking belongs to uppercase labels, not the mixed-case breadcrumb. */
.studio-label, .case-studio, .project-print-cover p { letter-spacing: .05em; }
.case-current { letter-spacing: .025em; }
/* Real Medium supplies emphasis until an Edict italic face is provided. */
.case-details em, .case-prose em, .case-figures em { font-style: normal; font-weight: 500; }
.case-details strong, .case-prose strong, .case-figures strong { font-family: 'Edict Display', Georgia, serif; font-weight: 700; }

.scroll-track:focus-visible { outline: 1px solid black; outline-offset: -4px; }

/* Outline geometry from export-wordmark.py. The advance preserves the previous
   text scale and its side spaces; the SVG itself has a tight visible boundary. */
.wordmark-art { display: none; }
@media screen {
  .center-text {
    top: 50svh;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: min(var(--type-wordmark), calc(var(--print-width) / 7.677));
    width: 7.24795em;
    height: .713328em;
  }
  .wordmark-art { display: block; width: 100%; height: 100%; }
  .wordmark-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* A decoded destination replaces the identical cover without a crossfade. */
::view-transition-old(project-preview), ::view-transition-new(project-preview) { animation: none; mix-blend-mode: normal; }
::view-transition-old(project-preview) { opacity: 0; }
::view-transition-new(project-preview) { opacity: 1; }

/* Separate article and navigation snapshots from the opaque page background. */
.case-study[open] .case-body { view-transition-name: case-body; }
.bottom-links { view-transition-name: gallery-footer; }
body:has(.case-study[open]) .bottom-links { visibility: hidden; view-transition-name: none; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { opacity: 0; }
::view-transition-new(root) { opacity: 1; }
::view-transition-group(case-body), ::view-transition-group(gallery-footer) { animation-duration: var(--project-duration); }
::view-transition-new(case-body) { animation: case-body-enter 260ms cubic-bezier(.22,1,.36,1) 160ms both; mix-blend-mode: normal; }
::view-transition-old(case-body) { animation: case-body-exit 180ms cubic-bezier(.4,0,1,1) both; mix-blend-mode: normal; }
::view-transition-old(gallery-footer) { animation: detail-fade-out 180ms ease-out both; }
::view-transition-new(gallery-footer) { animation: detail-fade-in 160ms ease-out 100ms both; }
@keyframes case-body-enter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes detail-fade-out { to { opacity: 0; } }
@keyframes detail-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-new(case-body), ::view-transition-old(case-body),
  ::view-transition-new(gallery-footer), ::view-transition-old(gallery-footer) { animation: none; }
}
@media print { .project-print .case-body > :last-child { margin-bottom: 0; padding-bottom: 0; } }

:root.is-project-closing { --project-duration: 300ms; }
@keyframes case-body-exit {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(12px); }
}

/* Keep snapshot ordering explicit in both directions. */
::view-transition-group(root) { z-index: 0; }
::view-transition-group(case-body) { z-index: 1; }
::view-transition-group(gallery-footer) { z-index: 2; }
::view-transition-group(studio-title), ::view-transition-group(case-path) { z-index: 3; }
::view-transition-group(project-preview) { z-index: 4; }
::view-transition-old(studio-title), ::view-transition-new(studio-title),
::view-transition-old(case-path), ::view-transition-new(case-path) { mix-blend-mode: normal; }

/* Mid-article dismissal preserves one viewport snapshot, without flying fragments. */
:root.is-scrolled-closing { --project-duration: 180ms; }
.is-scrolled-closing body * { view-transition-name: none !important; }
.is-scrolled-closing::view-transition-group(root) { animation: none; }
.is-scrolled-closing::view-transition-new(root) { z-index: 1; animation: none; opacity: 1; }
.is-scrolled-closing::view-transition-old(root) { z-index: 2; opacity: 1; animation: detail-fade-out 180ms ease-out both; }

.studio-label { pointer-events: auto; user-select: text; }

/* Only the foremost card at each resting position supplies the pile edge. */
.project-card.is-covered .card-surface { box-shadow: none; }
.selection-snapshot .card-surface::after { display: none; }
@media print { .selection-snapshot { display: none !important; } }

/* A project is its cover followed by a continuous reading flow. */
@media screen {
  .case-breadcrumb { position: relative; top: auto; margin: 0; padding: var(--frame); background: transparent; }
  .case-study { scroll-snap-type: none; scroll-behavior: auto; }
  .case-study article { width: 100%; padding-top: max(0px, calc(var(--card-block-inset) - var(--vertical) - var(--frame))); padding-bottom: var(--case-section-space); }
  .case-hero { width: var(--print-width); border-radius: var(--radius); box-shadow: var(--card-shadow); }
  .case-study {
    --type-ui: clamp(.875rem, calc(.8rem + .25vw), 1.125rem);
    --type-body: clamp(1.125rem, calc(1rem + .5vw), 1.5rem);
    --type-display: clamp(1.5rem, calc(1.1rem + 1.6vw), 2.75rem);
    --case-unit: calc(var(--type-body) * var(--body-leading) / 2);
    --case-gutter: calc(2 * var(--case-unit));
    --case-section-space: calc(4 * var(--case-unit));
    --case-intro-space: calc(3 * var(--case-unit));
    --case-columns: repeat(6, minmax(0, 1fr));
  }
  .case-body {
    width: min(calc(100% - 2 * var(--frame)), 70rem);
    margin-inline: auto;
    container: case-reading / inline-size;
  }
  body:has(.case-study[open]) > .project-index,
  body:has(.case-study[open]) > .index-title { visibility: hidden; }
}
.case-flow { margin-top: var(--case-intro-space); }
.case-entry { margin-bottom: var(--case-section-space); font-size: var(--type-body); line-height: var(--body-leading); }
.case-entry-label { font-size: var(--type-ui); font-weight: 500; margin-bottom: var(--case-unit); }
.case-entry > .case-section { padding-bottom: 0; }
.case-entry .case-section--visual { margin-top: var(--case-gutter); }
.case-entry--question h2 { font: 700 var(--type-display)/1.1 'Edict Display', Georgia, serif; max-width: 24ch; margin: 0; text-wrap: balance; }
.case-entry--work > .case-section { margin-top: calc(2 * var(--case-unit)); }
.case-entry .case-figures { margin: 0; }
.case-entry .case-image-frame { box-shadow: 0 0 0 1px #111; }
.case-entry .case-figures--pair { max-width: var(--reading-max); margin-inline: auto; }
.case-entry .case-principles { margin-bottom: 0; }
@media print {
  .project-print .case-flow { margin-top: 15pt; }
  .project-print .case-entry { margin-bottom: 22.5pt; font-size: 11pt; }
  .project-print .case-entry-label { font-size: 9pt; }
  .project-print .case-entry--question h2 { font-size: 22pt; }
}

/* Preserve chapter semantics while the ideas lead visually. */
.case-group { margin: 0; }
.case-group + .case-group { border-top: 1px solid var(--muted); margin-top: var(--case-intro-space); padding-top: var(--case-intro-space); }
.case-group-title { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.case-group .case-section h3 { grid-column: 1 / 3; margin: 0; font: 700 var(--type-display)/1.1 'Edict Display', Georgia, serif; text-wrap: balance; overflow-wrap: anywhere; }
.case-lead { font: 700 var(--type-display)/1.12 'Edict Display', Georgia, serif; margin: 0 0 var(--case-unit); text-wrap: balance; }
.case-group .case-figures--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; gap: var(--case-gutter); }
.case-people { grid-column: 3 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35em var(--case-gutter); list-style: none; margin: 0; padding: 0; font-size: var(--type-ui); }
.case-people > li { overflow-wrap: anywhere; }
.case-group > .case-entry:last-child { margin-bottom: 0; }
@media screen and (max-width: 640px) {
  .case-group .case-section h3, .case-people { grid-column: 1; }
  .case-group .case-figures--pair { grid-template-columns: minmax(0, 1fr); }
  .case-people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media print {
  .project-print .case-group { margin-bottom: 30pt; }
  .project-print .case-lead { font-size: 16pt; }
  .project-print .case-section h3 { font-size: 16pt; }
  .project-print .case-people { grid-template-columns: repeat(2, minmax(0, 1fr)); font-size: 9pt; }
}

/* Project facts introduce the study directly beneath its cover. */
.case-logistics { border-block: 1px solid var(--muted); padding-block: var(--case-intro-space); margin-bottom: var(--case-section-space); }
.case-logistics > h2 { font: 700 var(--type-display)/1.1 'Edict Display', Georgia, serif; }
.case-logistics-facts { grid-column: 3 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--case-gutter); margin: 0; font-size: var(--type-ui); }
.case-logistics-item { min-width: 0; }
.case-logistics-item dt { font-weight: 500; }
.case-logistics-item dd { margin: .35em 0 0; overflow-wrap: anywhere; }
.case-logistics-item a, .case-prose p a { color: inherit; text-underline-offset: .2em; }
.case-logistics-item a:hover, .case-prose p a:hover { color: var(--muted); }
@media screen and (max-width: 640px) {
  .case-logistics-facts { grid-column: 1; grid-template-columns: minmax(0, 1fr); }
}
@media print {
  .project-print .case-logistics { padding-block: 15pt; margin-bottom: 22.5pt; }
  .project-print .case-logistics-facts { font-size: 9pt; }
}

/* Reading responds to its own measure, independently of the gallery cover. */
@media screen {
  @container case-reading (max-width: 48rem) {
    .case-section, .case-copy { grid-template-columns: minmax(0, 1fr); row-gap: var(--case-unit); }
    .case-group .case-section h3, .case-prose, .case-details, .case-aside,
    .case-people, .case-facts, .case-logistics-facts { grid-column: 1; grid-row: auto; }
    .case-people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .case-group .case-figures--pair { grid-template-columns: minmax(0, 1fr); }
  }
}
.case-image-frame { position: relative; }
.case-image-error { display: none; }
.case-image-frame[data-error] img { visibility: hidden; }
.case-image-frame[data-error] .case-image-error {
  display: grid; position: absolute; inset: 0; place-items: center;
  padding: 1em; background: white; color: var(--muted);
  font-size: var(--type-ui); text-align: center;
}