/* Continuous opening: project mosaic, mission, TOGETHER, then the practice reveal. */
/* Desktop dimensions follow the 1680px composition, including on wider screens. */
.home-shell { max-width: 1680px; margin-inline: auto; padding-inline: var(--gutter); }
.hero-copy p { max-width: 34ch; font-size: clamp(16px,calc(1.4 * var(--layout-unit)),23px); line-height: 1.3; }
.hero-copy .primary-button { margin-top: min(calc(2.08 * var(--layout-unit)),30px); font-size: min(calc(1.25 * var(--layout-unit)),20px); padding: min(calc(1.02 * var(--layout-unit)),17px) min(calc(2.02 * var(--layout-unit)),34px); }
.hero-image-credit { position: absolute; right: 12px; bottom: 10px; z-index: 4; padding: 6px 8px; background: var(--paper); color: var(--muted); font-size: 10px; line-height: 1.3; }
.hero-image-credit:hover { text-decoration: underline; text-underline-offset: 3px; }
.chapter-line { display: flex; align-items: center; justify-content: space-between; gap: 24px; font-size: 12px; line-height: 1.5; }
.chapter-line .section-kicker { font-size: 12px; }
.chapter-line>span { color: var(--muted); }
.chapter-line>a { display: inline-flex; gap: 20px; align-items: center; font-size: 14px; }
.project-status { display: block; width: fit-content; margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--rule); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; line-height: 1.3; }
.project-caption { bottom: calc(1.4 * var(--layout-unit)); }
.architecture { top: calc(2.6 * var(--layout-unit)); height: calc(10 * var(--layout-unit)); }
.iridescent { top: calc(1.5 * var(--layout-unit)); right: calc(1.1 * var(--layout-unit)); width: calc(6.7 * var(--layout-unit)); height: calc(7 * var(--layout-unit)); }
.aegillis .project-caption { bottom: calc(1 * var(--layout-unit)); }
.aegillis .project-description { max-width: 95%; }
.aegillis .project-status { margin-top: 4px; padding-top: 5px; }
.approach h2 { margin-top: calc(5.2 * var(--layout-unit)); }
/* One rhythm between the chapters from 04 to 08: the same gap before each kicker. */
:root { --chapter-gap: clamp(80px,calc(9 * var(--layout-unit)),150px); }
.aediris-preview { padding-block: var(--chapter-gap); }
.preview-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 7%; align-items: center; margin-top: 38px; }
.preview-copy h2 { font-size: clamp(37px,calc(4.4 * var(--layout-unit)),65px); line-height: 1.04; letter-spacing: -.045em; font-weight: 400; }
.preview-copy h2 em { font-family: 'Bodoni Moda',Georgia,serif; font-weight: 400; }
.preview-copy>p { font-size: 17px; line-height: 1.6; color: var(--muted); margin-top: 24px; max-width: 390px; }
.preview-copy .editorial-link { margin-top: 30px; }
/* No filled card: like 01 and 02, the board sits on the page between open rules,
   the top one and a right one stopping short of it. */
.preview-board { position: relative; padding: 20px calc(2 * var(--layout-unit)) 0 0; border-top: 1px solid var(--rule); }
.preview-board::after { content: ""; position: absolute; right: 0; top: calc(.6 * var(--layout-unit)); bottom: 0; width: 1px; background: var(--rule); }
/* The chapters zigzag: 04 text then photo, 05 references then text, 06 title then person.
   The source order keeps the text first for reading and on small screens. */
@media(min-width:761px) {
  .preview-layout { grid-template-columns: 1.15fr .85fr; }
  .preview-board { order: -1; }
}
.preview-board-top { display: flex; gap: 16px; justify-content: space-between; font-size: 12px; line-height: 1.4; padding-bottom: 17px; border-bottom: 1px solid #b5aa99; }
.preview-board-top>span:first-child { color: var(--muted); }
.preview-references { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-top: 18px; }
.preview-references figure { margin: 0; min-width: 0; }
.preview-references figure:nth-child(2) { padding-top: 25px; }
.preview-references figure:nth-child(3) { padding-top: 50px; }
.reference-frame { position: relative; display: block; height: 205px; overflow: hidden; }
/* The oversized image trims the scan borders without editing the source files. */
.reference-frame img { position: absolute; left: -4%; top: -4%; width: 108%; height: 108%; display: block; object-fit: cover; }
.reference-frame::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right,transparent calc(100% - 1px),#fdfcf788 0),linear-gradient(to bottom,transparent calc(100% - 1px),#fdfcf788 0); background-size: 25% 20%; pointer-events: none; }
.preview-references figure:nth-child(1) .reference-frame { clip-path: polygon(0 0,75% 0,75% 20%,100% 20%,100% 100%,25% 100%,25% 80%,0 80%); }
.preview-references figure:nth-child(2) .reference-frame { clip-path: polygon(25% 0,100% 0,100% 80%,75% 80%,75% 100%,0 100%,0 20%,25% 20%); }
.preview-references figure:nth-child(3) .reference-frame { clip-path: polygon(0 20%,25% 20%,25% 0,100% 0,100% 100%,0 100%); }
.preview-references figure:nth-child(3) img { object-position: 42% center; }
.preview-references figcaption { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; font-size: 14px; }
.preview-references figcaption span { font-size: 11px; color: var(--accent); }
.preview-board-note { margin-top: 22px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.preview-board-note a:is(:hover,:focus-visible) { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* The references assemble cell by cell on the grid of their frame (added by the script). */
.reference-covers, .reference-rules { position: absolute; inset: 0; pointer-events: none; }
.reference-covers { z-index: 1; display: grid; grid-template-columns: repeat(4,1fr); grid-template-rows: repeat(5,1fr); }
.reference-covers span { background: var(--paper); transform-origin: center bottom; }
.reference-rules { z-index: 2; border: 1px solid #a2937e70; border-width: 1px 0 0 1px; background-image: linear-gradient(to right,transparent calc(100% - 1px),#a2937e70 0),linear-gradient(to bottom,transparent calc(100% - 1px),#a2937e70 0); background-size: 25% 20%; }
.reference-frame::after { z-index: 3; }
.mission-content { padding-top: clamp(100px,calc(11.35 * var(--layout-unit)),190px); position: relative; }
.mission-copy h2 { font-size: clamp(43px,calc(4.6 * var(--layout-unit)),70px); }
.mission-copy>p:not(.eyebrow) { max-width: 550px; font-size: 19px; line-height: 1.5; }
.mission .text-link { width: fit-content; font-size: 15px; margin-top: 25px; }
.mission-mosaic { opacity: 1; }
.mission { --monument-height: min(62vh,calc(44 * var(--layout-unit))); }
.mission-principles summary>span:nth-child(2) { font-size: 12px; }
.together { display: flex; align-items: center; height: var(--monument-height); overflow: hidden; margin-top: 40px; }
.together>span { display: flex; justify-content: center; align-items: center; flex: 0 0 100%; height: 100%; font-size: inherit; line-height: .72; transform: none; }
.together-type { font-family: Archivo,Arial,sans-serif; font-stretch: 62%; font-variation-settings: 'wdth' 62,'wght' 900; font-weight: 900; font-size: calc(29 * var(--layout-unit)); letter-spacing: -.05em; line-height: .72; transform: scaleY(1.65); }
/* 06: the artistic line on the paper; the brown block below and to the right, its
   left side descending in three steps. A small staircase sits on its upper right
   corner and a mosaic comes away from its left side. Every cell follows one rule:
   the further from the block, the lighter. */
.origin-section { --cell: calc(3.4 * var(--layout-unit)); container-type: inline-size; overflow-x: clip; }
.origin-line { margin: 0; font-size: calc(6.6 * var(--layout-unit)); line-height: 1.02; letter-spacing: -.045em; font-weight: 400; }
.origin-line em { font-family: 'Bodoni Moda',Georgia,serif; font-weight: 400; }
.origin-line-art { margin-top: calc(3 * var(--layout-unit)); white-space: nowrap; }
/* The English lines are longer: a slightly smaller size keeps each on one line, as in French. */
@media(min-width:761px) { html[lang="en"] .origin-line { font-size: calc(6.05 * var(--layout-unit)); } }
/* The block runs to the edge of the screen; its padding keeps the text on the page grid. */
.origin-block { --bleed: calc(var(--gutter) + max(0px, (100cqw - 1680px) / 2)); position: relative; isolation: isolate; margin: calc(1.6 * var(--layout-unit)) calc(-1 * var(--bleed)) 0 calc(34% - 2 * var(--cell)); padding: var(--cell) var(--bleed) calc(3 * var(--layout-unit)) calc(3 * var(--cell)); color: var(--paper); }
.origin-block::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--brown); clip-path: polygon(calc(2 * var(--cell)) 0,100% 0,100% 100%,0 100%,0 min(calc(6 * var(--cell)),100%),var(--cell) min(calc(6 * var(--cell)),100%),var(--cell) calc(3 * var(--cell)),calc(2 * var(--cell)) calc(3 * var(--cell))); }
.origin-line-clip { overflow: hidden; }
.origin-block .origin-copy { max-width: 30em; margin-top: calc(3.4 * var(--layout-unit)); }
.origin-line-clip, .origin-block .origin-copy { position: relative; z-index: 2; }
.origin-block .origin-copy h3 { color: var(--paper); }
.origin-block .origin-copy p { color: #e0cdbc; }
.origin-steps { position: absolute; right: 0; bottom: 100%; display: grid; grid-template-columns: repeat(4,var(--cell)); grid-template-rows: repeat(3,var(--cell)); pointer-events: none; }
/* The browns of the mosaic of 02, each cell edged with a paper line like the fragments
   of the portrait; an empty cell, barely traced in clay, ends each row. */
.origin-steps .piece, .origin-edge .piece { background: var(--c); box-shadow: inset -1px -1px 0 #fdfcf7b8; }
.origin-steps .frame, .origin-edge .frame { background: none; box-shadow: inset 0 0 0 1px rgba(160,120,89,.35); }
/* An Academy by Lamplight, tinted into the brown and fading toward the text: it covers the
   right of the block up to the edge of the screen, whatever the width. */
.origin-painting { position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; width: 66%; margin: 0; pointer-events: none; }
.origin-painting-art { position: absolute; inset: 0; background: url("assets/art/wright-academy-lamplight-1600.webp") 100% 35% / cover no-repeat; mix-blend-mode: luminosity; opacity: .62; -webkit-mask-image: linear-gradient(to right,transparent 0,#000 55%); mask-image: linear-gradient(to right,transparent 0,#000 55%); }
.origin-credit { position: absolute; right: var(--bleed); bottom: 12px; font-size: 11px; letter-spacing: .02em; color: #cdb6a2; pointer-events: auto; }
.origin-credit:is(:hover,:focus-visible) { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }
@media(max-width:1050px) { .origin-painting-art { background-image: url("assets/art/wright-academy-lamplight-960.webp"); } }
.origin-edge span { position: absolute; left: calc(var(--x) * var(--cell)); top: calc(var(--y) * var(--cell)); width: var(--cell); height: var(--cell); }
.origin-copy h3 { font-size: 25px; line-height: 1.2; font-weight: 400; letter-spacing: -.025em; margin: 0 0 18px; }
.origin-copy p { font-size: 17px; line-height: 1.65; color: var(--muted); max-width: 560px; }
.origin-copy .editorial-link { margin-top: 24px; }
/* 07: each note speaks through the sentence it puts forward, in the art voice. The
   opening guillemet is drawn with cells of the mosaic; the quotes sit on a diagonal. */
.journal-quotes { --cell: calc(3.4 * var(--layout-unit)); padding-block: var(--chapter-gap); }
.journal-quotes>.chapter-line { border-top: 1px solid var(--rule); padding-top: 23px; }
.quotes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 8%; align-items: start; margin-top: calc(2.6 * var(--layout-unit)); }
.quote { display: block; padding-top: calc(1.2 * var(--layout-unit)); border-top: 1px solid var(--rule); }
.quote:nth-child(2) { margin-top: calc(9 * var(--layout-unit)); }
.quote-meta { display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.quote-meta span { margin: 0 .35em; }
.pq { display: grid; grid-template-columns: repeat(6,calc(var(--cell) * .42)); grid-template-rows: repeat(5,calc(var(--cell) * .42)); width: max-content; margin: calc(2 * var(--layout-unit)) 0 calc(1.4 * var(--layout-unit)); }
.pq span { background: var(--c); box-shadow: inset -1px -1px 0 #fdfcf7b8; }
.quote blockquote { margin: 0; font-family: 'Bodoni Moda',Georgia,serif; font-style: italic; font-weight: 400; font-size: clamp(28px,calc(3.3 * var(--layout-unit)),54px); line-height: 1.12; letter-spacing: -.02em; }
/* French closes the quote; the mosaic guillemet opens it in both languages. */
html[lang="fr"] .quote blockquote::after { content: "\00a0\00bb"; }
.quote-source { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: calc(2 * var(--layout-unit)); padding-top: calc(.9 * var(--layout-unit)); border-top: 1px solid #aaa79e; font-size: 14px; color: var(--muted); }
.quote-title { color: var(--ink); }
.quote-source .arrow { margin-left: auto; color: var(--ink); }
.quote:is(:hover,:focus-visible) .quote-title { color: var(--accent); }
/* The threshold into the Journal: one row of cells of the homepage grid along the top edge of
   section 08, from the left edge of the screen, brown there and sand at its end, a cell before
   the mosaic of 08. site.js lays the cells; without it, a plain gradient stands in. The whole
   threshold is the link; on hover the cells lighten in a wave. */
.journal-quotes { position: relative; z-index: 1; }
.journal-threshold { display: block; margin: calc(5 * var(--layout-unit)) 0 calc(-1 * var(--chapter-gap)); }
.journal-threshold-words { display: grid; grid-template-columns: auto 1fr auto auto; align-items: baseline; gap: 12px 28px; padding-block: 18px; border-top: 1px solid var(--rule); }
.journal-threshold-title { font-size: clamp(24px,calc(2.4 * var(--layout-unit)),38px); line-height: 1; letter-spacing: -.04em; }
.journal-threshold-title em { font-family: 'Bodoni Moda',Georgia,serif; font-weight: 400; }
.journal-threshold-count { justify-self: end; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.journal-threshold-open { display: flex; gap: 14px; font-size: 16px; }
.journal-threshold-band { --signature: min(calc(34 * var(--layout-unit)),500px); position: relative; display: block; width: calc(100vw - var(--signature) - var(--cell)); height: var(--cell); margin-left: calc(50% - 50vw); background: linear-gradient(to right,var(--brown),#d2b08e); }
.journal-threshold-cells { position: absolute; inset: 0; display: flex; justify-content: flex-end; overflow: hidden; background: var(--brown); }
.journal-threshold-cells > span { flex: none; width: var(--cell); height: var(--cell); box-shadow: inset -1px -1px 0 #fdfcf718; transition: filter .4s calc(var(--i, 0) * 12ms); }
.journal-threshold:is(:hover,:focus-visible) .journal-threshold-cells > span { filter: brightness(1.18); }
.journal-threshold:is(:hover,:focus-visible) :is(.journal-threshold-open,.journal-threshold-title) { color: var(--accent); }
.invitation-section { position: relative; isolation: isolate; background: var(--brown); color: var(--paper); padding-block: 45px 65px; overflow: hidden; }
.invitation-section>.home-shell { position: relative; }
.invitation-signature { position: absolute; right: 0; top: 0; width: min(calc(34 * var(--layout-unit)),500px); height: auto; pointer-events: none; }
.signature-lines path { vector-effect: non-scaling-stroke; stroke-width: 1; }
.signature-cells path { transform-box: fill-box; transform-origin: right top; }
.signature-invitation { opacity: .25; transition: opacity .4s; }
.invitation-section:has(.invitation-contact a:is(:hover,:focus-visible)) .signature-invitation { opacity: .9; }
.invitation-heading { position: relative; margin-top: 50px; }
.invitation-heading h2 { max-width: 85%; font-weight: 400; font-size: clamp(45px,calc(6.5 * var(--layout-unit)),96px); line-height: 1; letter-spacing: -.045em; }
.invitation-heading h2 em { font-family: 'Bodoni Moda',Georgia,serif; font-weight: 400; }
.invitation-intro { max-width: 31em; font-size: 18px; line-height: 1.5; color: #e0cdbc; margin-top: 25px; }
.invitation-contact { margin-top: 35px; }
.invitation-contact .editorial-link { font-size: clamp(17px,calc(2 * var(--layout-unit)),26px); overflow-wrap: anywhere; max-width: 100%; }
.invitation-contact>p { font-size: 13px; line-height: 1.6; color: #e0cdbc; margin-top: 18px; }
.home-footer { display: block; max-width: none; border: 0; padding: 30px 0 0; background: var(--paper); color: var(--brown); letter-spacing: normal; }
.home-footer-top { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding-bottom: 27px; border-bottom: 1px solid var(--rule); }
.home-footer-top>p { font-size: clamp(19px,calc(2 * var(--layout-unit)),29px); line-height: 1.2; letter-spacing: -.035em; }
.home-footer-top>p em { font-family: 'Bodoni Moda',Georgia,serif; font-weight: 400; }
.home-footer-top nav { gap: 30px; font-size: 12px; padding: 0; flex-wrap: wrap; }
/* This graphic follows the screen width; the footer links retain their measure. */
.home-wordmark { margin-inline: max(var(--gutter),3.55vw); padding-top: 25px; overflow: hidden; container-type: inline-size; line-height: .85; }
.home-wordmark>span { display: block; width: 100%; font-family: Impact,Haettenschweiler,'Arial Narrow',sans-serif; font-weight: 900; font-size: 27cqw; letter-spacing: -.037em; text-align: center; }
.home-footer-base { display: flex; justify-content: space-between; gap: 25px; border-top: 1px solid var(--rule); font-size: 12px; padding-block: 18px; margin-top: 20px; }
.home-footer-base nav { padding: 0; gap: 22px; font-size: inherit; flex-wrap: wrap; }
@media(max-width:1050px) and (min-width:761px) {
  .projects { min-height: 245px; }
  .project-name { font-size: 28px; }
  .project-description { font-size: 13px; }
  .project-status { font-size: 10px; }
  .architecture { width: 95px; height: 100px; }
  .iridescent { width: 55px; height: 57px; top: 17px; }
  .preview-layout { gap: 4%; }
  .preview-references { gap: 8px; }
  .reference-frame { height: 160px; }
}
@media(max-width:760px) {
  .hero { height: 440px; }
  .hero-art { width: calc(440px * 14 / 11); right: min(-12px,calc(100vw - 460px)); opacity: 1; }
  .hero-art::after { background: linear-gradient(90deg,var(--paper) 0%,rgba(253,252,247,.95) 35%,rgba(253,252,247,.6) 62%,rgba(253,252,247,.08) 84%,transparent 100%); }
  .hero-copy p { max-width: 245px; font-size: 16px; }
  .hero-copy .primary-button { margin-top: 25px; font-size: 13px; padding: 13px 17px; }
  .approach { padding-block: 18px; gap: 12px 20px; }
  .approach h2 { margin-top: 0; font-size: 30px; }
  .approach>.eyebrow { font-size: 11px; }
  .approach-links [data-dialog], .approach-links [data-dialog]:last-child { min-height: 44px; padding-block: 10px; }
  .project-description { font-size: 15px; line-height: 1.4; }
  .project-status { font-size: 11px; margin-top: 8px; }
  .project-card .card-number { top: 16px; left: 20px; font-size: 11px; }
  .project-card .card-arrow { top: 12px; right: 18px; font-size: 25px; }
  .home .aediris { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); align-items: end; gap: 16px; min-height: 230px; padding: 48px 20px 24px; }
  .aediris .project-caption { position: static; grid-column: 1; grid-row: 1; gap: 7px; }
  .aediris .project-name { font-size: 34px; }
  .aediris .architecture { position: relative; grid-column: 2; grid-row: 1; justify-self: end; top: auto; right: auto; width: 100%; max-width: 200px; height: clamp(155px,40vw,225px); }
  .home .aegillis { display: grid; grid-template-columns: minmax(0,1fr) 76px; align-items: center; gap: 16px; min-height: 155px; padding: 38px 20px 20px; }
  .aegillis .project-caption { position: static; grid-column: 1; grid-row: 1; gap: 6px; }
  .aegillis .project-description { max-width: none; font-size: 14px; }
  .aegillis .project-status { margin-top: 4px; font-size: 10px; }
  .aegillis .iridescent { position: relative; grid-column: 2; grid-row: 1; top: auto; right: auto; width: 76px; height: 80px; }
  .community-card { min-height: 82px; padding: 14px 20px; gap: 5px; }
  .community-card>span:nth-child(2) { font-size: 13px; }
  .community-card>span:first-child { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: clamp(18px,calc(5.2 * var(--layout-unit)),22px); }
  .community-card>span:first-child .arrow { flex-shrink: 0; margin-left: 0; }
  .chapter-line .section-kicker { font-size: 11px; letter-spacing: .1em; }
  .chapter-line>span { display: none; }
  .chapter-line>a { gap: 10px; font-size: 12px; }
  :root { --chapter-gap: 56px; }
  .aediris-preview { padding-block: var(--chapter-gap); }
  .preview-layout { grid-template-columns: 1fr; gap: 30px; margin-top: 26px; }
  .preview-copy h2 { font-size: clamp(35px,calc(7.5 * var(--layout-unit)),54px); }
  .preview-copy>p { font-size: 16px; margin-top: 20px; }
  .preview-copy .editorial-link { margin-top: 22px; }
  .preview-board { padding: 15px 0 0; }
  .preview-board::after { display: none; }
  .preview-references { gap: 10px; }
  .reference-frame { height: clamp(130px,calc(28 * var(--layout-unit)),200px); }
  .preview-references figcaption { font-size: 12px; }
  .preview-board-top { flex-direction: column; gap: 8px; }
  .mission-content { padding-top: 60px; gap: 24px; }
  .mission-copy>p:not(.eyebrow) { font-size: 17px; }
  .mission-copy .eyebrow { font-size: 11px; }
  .together { height: calc(32 * var(--layout-unit)); margin-top: 20px; }
  .together-type { font-size: calc(29 * var(--layout-unit)); transform: scaleY(1.35); }
  .origin-section { --cell: 18px; }
  .origin-line { font-size: clamp(34px,calc(9 * var(--layout-unit)),56px); letter-spacing: -.04em; }
  .origin-line-art { margin-top: 24px; white-space: normal; }
  .origin-block { margin: calc(3 * var(--cell) + 20px) calc(-1 * var(--gutter)) 0; padding: 26px var(--gutter) 40px; }
  .origin-block::before { clip-path: none; }
  .origin-block .origin-copy { margin-top: 26px; }
  .origin-copy p { font-size: 16px; }
  .origin-edge { display: none; }
  /* On phones the painting closes the block, rising from the brown under the text. */
  .origin-painting { position: relative; width: auto; height: 230px; margin: 26px calc(-1 * var(--gutter)) -40px; }
  .origin-painting-art { -webkit-mask-image: linear-gradient(to bottom,transparent 0,#000 55%); mask-image: linear-gradient(to bottom,transparent 0,#000 55%); }
  .origin-credit { left: var(--gutter); right: var(--gutter); line-height: 1.4; }
  .quotes { grid-template-columns: 1fr; margin-top: 22px; }

  .quote:nth-child(2) { margin-top: 40px; }
  .journal-threshold { margin-top: 48px; }
  .journal-threshold-words { grid-template-columns: 1fr; gap: 10px; }
  .journal-threshold-title { margin-top: 6px; font-size: clamp(30px,8.5vw,38px); }
  .journal-threshold-count { justify-self: start; }
  .journal-threshold-open { margin-top: 8px; }
  .journal-threshold { --cell: 24px; }
  .journal-threshold-band { --signature: calc(43 * var(--layout-unit)); }
  .pq { grid-template-columns: repeat(6,14px); grid-template-rows: repeat(5,14px); margin: 20px 0 16px; }
  .invitation-section { padding-block: 35px 40px; }
  .invitation-signature { width: calc(43 * var(--layout-unit)); }
  .invitation-heading { margin-top: calc(22 * var(--layout-unit)); }
  .invitation-heading h2 { font-size: clamp(40px,calc(8.8 * var(--layout-unit)),65px); max-width: 100%; }
  .invitation-intro { font-size: 17px; }
  .invitation-contact .editorial-link { gap: 10px; font-size: 17px; }
  .home-footer-top { align-items: start; flex-direction: column; gap: 20px; }
  .home-footer-top nav { width: 100%; gap: 15px; font-size: 12px; justify-content: space-between; }
  .home-footer-base { flex-direction: column; align-items: start; gap: 15px; }
  .home-footer-base nav { width: auto; gap: 12px 20px; justify-content: start; }
}
@media(max-width:420px) {
  .hero { height: 400px; }
  .hero-copy { padding-top: 40px; }
  .hero-art { width: calc(400px * 14 / 11); }
}
@media(max-width:360px) {
  .home .aediris { gap: 12px; padding-inline: 16px; }
  .aediris .project-name { font-size: 31px; }
  .aediris .project-description { font-size: 14px; }
  .preview-references { gap: 6px; }
}

/* On mobile, the cards are windows in one brown field, from 02 through 03. */
@media(max-width:760px) {
  .home .projects {
    grid-template-columns: minmax(0,1fr);
    width: calc(100% + 2 * var(--gutter));
    margin-inline: calc(-1 * var(--gutter));
    background: var(--brown);
    overflow: hidden;
  }
  .home .projects-intro { min-height: 200px; padding: 22px var(--gutter) 28px; background: transparent; }
  .home .projects-intro h2 { margin-top: 26px; }
  .home .project-mosaic { z-index: -1; }
  .home .aediris { margin-inline: var(--gutter); }
  .home .project-stack { margin: 8px var(--gutter) 0; grid-template-rows: auto auto; padding: 0; gap: 8px; }
}

/* The original six-by-five image matrix, with the current research-stage copy. */
.practice-section { padding-block: clamp(32px,calc(4 * var(--layout-unit)),64px) 0; }
.practice-section .chapter-line { position: relative; z-index: 1; }
.practice-layout { display: grid; grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr); gap: 6%; align-items: start; margin-top: 36px; }
.practice-copy { padding-top: 8px; }
.practice-copy h2 { font-size: clamp(38px,calc(4.3 * var(--layout-unit)),64px); line-height: 1.04; letter-spacing: -.045em; font-weight: 400; }
.practice-copy h2 em { font-family: 'Bodoni Moda',Georgia,serif; font-weight: 400; }
.practice-intro { max-width: 32em; margin-top: 22px; font-size: 17px; line-height: 1.55; color: var(--muted); }
.practice-steps { list-style: none; margin: 28px 0 0; padding: 0; }
.practice-steps li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; border-top: 1px solid var(--rule); padding: 18px 0; }
.practice-steps li:last-child { padding-bottom: 0; }
.step-index { font-size: 11px; line-height: 1.5; padding-top: 4px; color: var(--muted); }
.practice-steps h3 { font-size: 26px; letter-spacing: -.035em; line-height: 1.1; font-weight: 400; margin: 0 0 9px; }
.practice-steps p { font-size: 15px; line-height: 1.5; color: var(--muted); }
.practice-visual { position: relative; margin: 0; min-width: 0; width: 100%; }
.practice-image { position: relative; width: 100%; aspect-ratio: 6 / 5; overflow: hidden; background: var(--paper); }
.practice-image>img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; object-position: 50% 53%; clip-path: polygon(0 0,83.333333% 0,83.333333% 20%,100% 20%,100% 80%,83.333333% 80%,83.333333% 100%,0 100%); }
.practice-grid { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.practice-grid path { vector-effect: non-scaling-stroke; stroke-width: 1; }
.practice-grid-field { stroke: #fff9ec; stroke-opacity: .22; }
.practice-grid-edge { stroke: #fff9ec; stroke-opacity: .62; }
.practice-grid-open { stroke: var(--rule); }
.practice-visual figcaption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 18px; margin-top: 13px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.practice-visual figcaption>span { text-transform: uppercase; letter-spacing: .07em; }
.practice-visual figcaption>a { text-decoration: underline; text-underline-offset: 3px; }
.release-covers, .release-rules { position: absolute; inset: 0; pointer-events: none; }
.release-covers { display: grid; grid-template-columns: repeat(6,1fr); grid-template-rows: repeat(5,1fr); z-index: 2; }
.release-covers span { background: var(--paper); transform-origin: center bottom; }
.release-rules { z-index: 3; background-image: linear-gradient(to right,transparent calc(100% - 1px),#a2937e70 0),linear-gradient(to bottom,transparent calc(100% - 1px),#a2937e70 0); background-size: calc(100% / 6) 20%; }
@media(min-width:1050px) and (min-height:740px) {
  .practice-visual { max-width: calc(65vh * 6 / 5); justify-self: end; }
}
@media(max-width:1049px) and (min-width:761px) {
  .practice-layout { grid-template-columns: 1fr 1.1fr; gap: 4%; }
  .practice-copy h2 { font-size: 39px; }
}
@media(max-width:760px) {
  .practice-section { padding-block: 28px 0; }
  .practice-layout { display: flex; flex-direction: column; gap: 20px; margin-top: 22px; }
  .practice-copy { display: contents; }
  .practice-copy h2 { order: 0; font-size: clamp(35px,calc(7.5 * var(--layout-unit)),54px); }
  .practice-intro { order: 1; margin: 0; font-size: 16px; }
  .practice-visual { order: 2; }
  .practice-steps { order: 3; margin: 0; width: 100%; }
  .practice-steps li { padding-block: 14px; }
  .practice-steps h3 { font-size: 24px; }
}