/* Page compositions: home (hero, statement, ways, materials, teaser), closing choice, posts, plain pages. */

/* ── Hero: the sentence split by a frame; a reel passes through it while the halves hold ── */
.hero { --frame-w: 34vw; --frame-h: min(calc(var(--frame-w) * 4 / 3), calc(100svh - var(--header-h) - 8rem)); --gap: 24px; position: relative; height: 200svh; }
.hero__stage { position: sticky; top: var(--header-h); height: calc(100svh - var(--header-h)); overflow: clip; background: var(--bg); }
.hero__sentence { position: absolute; left: var(--margin); right: var(--margin); top: 50%; transform: translateY(-50%); z-index: 2; display: flex; justify-content: space-between; align-items: center; font-size: var(--step-display); font-weight: 500; line-height: 1; letter-spacing: -0.03em; }
.hero__half { white-space: nowrap; }
.hero__reel { position: absolute; left: 50%; top: 0; bottom: 0; width: var(--frame-w); transform: translateX(-50%); z-index: 1; }
.hero__track { position: absolute; left: 0; right: 0; top: calc(50% - var(--frame-h) / 2); display: grid; gap: var(--gap); transform: translateY(calc(var(--p, 0) * -3 * (var(--frame-h) + var(--gap)))); }
.hero__frame { height: var(--frame-h); overflow: clip; background: var(--bg); }
/* the renders sit on near-white; multiply + a small lift makes that backdrop vanish into the page and keeps each object's own shadow */
.hero__frame img { width: 100%; height: 100%; object-fit: contain; padding: 3%; mix-blend-mode: multiply; filter: brightness(1.08) contrast(1.15); }
.hero__foot { position: absolute; left: var(--margin); bottom: 4.5rem; z-index: 2; width: min(44ch, 36%); } /* clears the fold while the utility bar is still open */
.hero__support { line-height: 1.4; }
.hero__facts { display: flex; flex-wrap: wrap; gap: 0.35rem 1.5rem; margin: 1rem 0 1.25rem; padding: 0; list-style: none; font-size: var(--step-small); color: var(--muted); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
@media (max-width: 56em) {
  /* phones: one screen, no scroll runway (it left a blank screen below the stage); the reel turns on a timer */
  .hero { --frame-w: calc(100vw - 2 * var(--margin)); --frame-h: calc(var(--frame-w) * 2 / 3); height: auto; }
  .hero__stage { position: relative; top: 0; height: auto; display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem var(--margin) 2rem; }
  .hero__sentence { position: static; transform: none; display: block; }
  .hero__half { display: block; }
  .hero__half--b { text-align: right; }
  .hero__reel { position: relative; left: auto; top: auto; bottom: auto; transform: none; width: 100%; height: var(--frame-h); overflow: clip; }
  .hero__track { position: absolute; inset: 0; display: block; transform: none; }
  .hero__frame { position: absolute; inset: 0; height: 100%; opacity: 0; transition: opacity 500ms ease; }
  .hero:not([data-step]) .hero__frame:first-child, .hero[data-step="0"] .hero__frame:nth-child(1), .hero[data-step="1"] .hero__frame:nth-child(2), .hero[data-step="2"] .hero__frame:nth-child(3), .hero[data-step="3"] .hero__frame:nth-child(4) { opacity: 1; }
  .hero__foot { position: static; width: auto; margin-top: 0.25rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .hero__half { overflow: clip; padding-bottom: 0.08em; margin-bottom: -0.08em; }
  .js .hero__half > span { display: block; transform: translateY(105%); animation: hero-line 800ms var(--ease-expo) forwards; animation-delay: calc(100ms + var(--i, 0) * 90ms); }
  .js .hero [data-load] { opacity: 0; transform: translateY(12px); animation: hero-rise 500ms var(--ease-out) forwards; animation-delay: var(--d, 420ms); }
}
@keyframes hero-line { to { transform: none; } }
@keyframes hero-rise { to { opacity: 1; transform: none; } }
/* without scripting or with reduced motion the hero is one screen with the first picture */
html:not(.js) .hero, .hero.is-rest { height: auto; }
html:not(.js) .hero__stage, .hero.is-rest .hero__stage { position: relative; top: 0; min-height: calc(100svh - var(--header-h)); }
html:not(.js) .hero__track, .hero.is-rest .hero__track { transform: none; }

/* ── Statement ── */
.statement { padding: 14vh var(--margin); display: flex; justify-content: center; }
.statement__text { max-width: 64%; text-align: center; text-wrap: balance; font-family: var(--font-display); font-weight: 500; font-size: var(--step-statement); line-height: 1.15; letter-spacing: -0.015em; }
@media (max-width: 56em) {
  .statement { padding: 6rem var(--margin); justify-content: flex-start; }
  .statement__text { max-width: none; text-align: left; line-height: 1.18; }
}

/* ── Four ways to start: heading, Itemise it on the left, the table pushed right ── */
.ways { padding: calc(var(--section) / 2) var(--margin); }
.ways__title { font-size: var(--step-head); line-height: 0.98; letter-spacing: -0.025em; }
.ways__indent { padding-left: 3vw; }
.ways__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; margin-top: 5rem; }
.itemise { grid-column: 1 / 7; }
.ways__table { grid-column: 8 / 13; display: grid; grid-template-columns: 2.5rem 1fr; column-gap: var(--gutter); }
.ways__name { padding-top: 0.4rem; color: var(--muted); }
.ways__row { display: grid; grid-template-columns: 5rem 1fr auto; column-gap: 1rem; align-items: baseline; padding-block: 0.9rem; line-height: 1.4; }
.ways__row:nth-child(4n + 1):not(:first-child) { margin-top: 2.75rem; }
.ways__kind { color: var(--muted); }
.ways__link { justify-self: end; white-space: nowrap; }
.itemise__label { display: block; margin-bottom: 1rem; max-width: 30ch; font-family: var(--font-display); font-weight: 500; font-size: var(--step-lead); line-height: 1.25; letter-spacing: -0.01em; }
.itemise__input { min-height: 9.5rem; resize: vertical; font-family: var(--font-text); line-height: 1.45; }
.itemise__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.75rem; }
.itemise__list { margin-top: 1.25rem; }
.itemise__item { display: grid; grid-template-columns: 6rem 1fr; column-gap: 0.75rem; padding: 0.55rem 0.75rem; line-height: 1.4; }
.itemise__item:nth-child(odd) { background: var(--surface); }
.itemise__qty { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.itemise__send { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.25rem; }
.itemise__note { margin-top: 0.75rem; color: var(--muted); font-size: var(--step-small); }
.itemise__sku { display: inline-block; margin-left: 0.4em; color: var(--muted); font-size: var(--step-small); font-variant-numeric: tabular-nums; }
.itemise__tag { display: inline-block; margin-left: 0.4em; padding: 0.05em 0.45em; border: 1px solid currentColor; border-radius: 999px; color: var(--muted); font-size: var(--step-small); }
.itemise__typed { display: block; color: var(--muted); font-size: var(--step-small); }
@media (max-width: 56em) {
  .ways__indent { padding-left: 0; }
  .ways__grid { display: block; margin-top: 3rem; }
  .ways__table { display: block; margin-top: 3.5rem; }
  .ways__name { display: none; }
  .ways__row { grid-template-columns: 1fr auto; }
  .ways__kind { grid-column: 1 / -1; }
}

/* ── Materials from stock: object in front of type ── */
.materials { overflow: hidden; padding: calc(var(--section) / 2) var(--margin); display: grid; grid-template-columns: 1fr minmax(280px, 38vw); grid-template-areas: "title title" "lines object" "lines facts"; column-gap: var(--gutter); align-items: start; }
.materials__stack { display: contents; }
.materials__title { grid-area: title; }
.materials__lines { grid-area: lines; }
.materials__stack { font-family: var(--font-display); font-weight: 500; font-size: var(--step-poster); line-height: 0.88; letter-spacing: -0.035em; white-space: nowrap; }
.materials__title { font-size: inherit; line-height: inherit; letter-spacing: inherit; font-weight: inherit; }
.materials__line { text-decoration: none; color: var(--muted); }
.materials__object { grid-area: object; width: 100%; max-width: 640px; justify-self: end; margin-top: 2vw; transform: rotate(-4deg); mix-blend-mode: multiply; filter: brightness(1.08) contrast(1.15); }
.materials__facts { grid-area: facts; margin-top: 2rem; max-width: 40ch; font-size: var(--step-lead); line-height: 1.35; }
.materials__facts a { display: inline-block; margin-top: 1.25rem; }
@media (hover: hover) and (pointer: fine) {
  .materials__line:hover { color: var(--ink); }
}
@media (max-width: 56em) {
  .materials { display: block; }
  .materials__object { width: 78vw; margin: 0.5rem 0 0 auto; }
  .materials__facts { margin-left: 0; margin-top: 2rem; max-width: none; font-size: 1.0625rem; }
}

/* ── Fabrication teaser: one row hanging from the axis, picture at the right margin ── */
.teaser { padding: calc(var(--section) / 2) var(--margin); display: grid; grid-template-columns: 30% 1fr minmax(280px, 30vw); column-gap: var(--gutter); align-items: start; }
.teaser__text { grid-column: 2; max-width: 40ch; }
.teaser__title { margin-bottom: 1rem; font-size: var(--step-head); }
.teaser__text p { margin-bottom: 1.25rem; }
.teaser__picture { grid-column: 3; }
.teaser__picture img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 45%; }
@media (max-width: 56em) {
  .teaser { display: block; }
  .teaser__picture { width: 72%; margin: 2rem 0 0 auto; }
}

/* ── Delivered to: the areas and the kinds of project ── */
.delivered { padding: calc(var(--section) / 2) var(--margin); display: grid; grid-template-columns: 30% 1fr; column-gap: var(--gutter); align-items: start; }
.delivered__title { font-size: var(--step-head); }
.delivered__areas { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin: 0.4rem 0 0; padding: 0; list-style: none; font-family: var(--font-display); font-weight: 500; font-size: var(--step-statement); line-height: 1.1; letter-spacing: -0.015em; }
.delivered__kinds { grid-column: 2; margin-top: 2rem; max-width: 46ch; font-size: var(--step-lead); line-height: 1.35; }
@media (max-width: 56em) {
  .delivered { display: block; }
  .delivered__areas { margin-top: 1.25rem; }
}

/* ── Closing choice: the question at both edges of a dark field ── */
.choice { position: relative; min-height: 100svh; padding: 2rem var(--margin) 1.5rem; display: grid; grid-template-rows: auto 1fr auto; background: var(--dark); color: var(--dark-ink); text-align: center; }
.choice__title { display: contents; }
.choice__line { display: block; font-family: var(--font-display); font-weight: 500; font-size: var(--step-poster); line-height: 1; letter-spacing: -0.03em; }
.choice__line--top { grid-row: 1; }
.choice__line--bottom { grid-row: 3; }
.choice__middle { grid-row: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; }
.choice__buttons { display: flex; align-items: center; gap: 2rem; }
.choice__buttons .button { min-width: 12.5rem; min-height: 3.5rem; }
.choice__or { color: var(--dark-muted); }
.choice__after { color: var(--dark-muted); max-width: 44ch; }
@media (max-width: 40em) {
  .choice__buttons { flex-direction: column; gap: 0.75rem; width: 72%; }
  .choice__buttons .button { width: 100%; }
}

/* ── Posts (blog index, archives, search) ── */
.posts { padding: calc(var(--section) / 3) var(--margin) calc(var(--section) / 2); }
.posts__title { margin-bottom: 3rem; }
.posts__list { display: grid; gap: 4rem; }
.post-card { display: grid; grid-template-columns: 5fr 7fr; column-gap: var(--gutter); align-items: start; }
.post-card__picture img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.post-card__title { margin: 0.5rem 0 0.75rem; font-size: var(--step-lead); }
.post-card__title a { text-decoration: none; }
.posts__pagination { margin-top: 3rem; }
.posts__pagination .nav-links { display: flex; gap: 1rem; flex-wrap: wrap; }
@media (hover: hover) and (pointer: fine) { .post-card__title a:hover { text-decoration: underline; text-underline-offset: 0.12em; } }
@media (max-width: 56em) { .post-card { grid-template-columns: 1fr; row-gap: 1rem; } }

/* ── Plain pages (404, search) ── */
.plain { padding: calc(var(--section) / 3) var(--margin) calc(var(--section) / 2); max-width: 70ch; }
.plain .lead { margin-top: 1.25rem; }
.plain__links { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: 1.75rem; }
.plain .search-form { display: flex; gap: 0.75rem; margin-top: 2rem; max-width: 32rem; }
.plain .search-form input[type="search"] { flex: 1; }

/* ── About: statement with the area as a drop cap, facts in the first columns ── */
.about__intro { padding: calc(var(--section) / 3) var(--margin) calc(var(--section) / 2); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.about__title { grid-column: 1 / -1; margin-bottom: 2.5rem; }
.about__facts { grid-column: 1 / 3; display: grid; gap: 0.6rem; align-content: start; color: var(--muted); }
.about__text { grid-column: 3 / -1; font-size: var(--step-statement); line-height: 1.22; letter-spacing: -0.01em; }
.about__text p { max-width: none; }
.about__more { margin-top: 1.25em; font-family: var(--font-text); font-size: var(--step-body); line-height: 1.5; letter-spacing: 0; color: var(--muted); max-width: 60ch; }
.about__portrait { float: left; width: 3.6em; aspect-ratio: 1; margin: 0.18em 0.55em 0.2em 0; }
.about__portrait img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 56em) {
  .about__intro { grid-template-columns: 1fr; }
  .about__title, .about__text, .about__facts { grid-column: auto; }
  .about__title { order: 1; margin-bottom: 1.5rem; }
  .about__text { order: 2; font-size: 1.375rem; line-height: 1.25; }
  .about__facts { order: 3; display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; margin-top: 2rem; }
  .about__portrait { width: 110px; }
}

/* ── Rows hanging from one axis with pictures of unequal size at the right margin ── */
.rows { padding: calc(var(--section) / 2) var(--margin); }
.rows__title { margin-left: 35%; max-width: 18ch; min-height: 36svh; display: flex; align-items: center; }
.rows__list { display: grid; row-gap: 6rem; margin-top: 2rem; }
.rows__row { display: grid; grid-template-columns: 35% 1fr minmax(180px, 24vw); column-gap: var(--gutter); align-items: start; }
.rows__row h3 { grid-column: 2; font-size: var(--step-statement); line-height: 1.1; }
.rows__row p { grid-column: 2; max-width: 34ch; margin-top: 0.6rem; }
.rows__row figure { grid-column: 3; grid-row: 1 / span 2; justify-self: end; margin: 0; }
.rows__row figure.is-wide { width: min(320px, 100%); }
.rows__row figure.is-wide img { aspect-ratio: 3 / 2; object-fit: cover; }
.rows__row figure.is-tall { width: min(240px, 100%); }
.rows__row figure.is-tall img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 60%; }
.rows__row figure.is-square { width: min(180px, 100%); }
.rows__row figure.is-square img { aspect-ratio: 1; object-fit: cover; }
@media (max-width: 56em) {
  .rows__title { margin-left: 0; min-height: 30svh; }
  .rows__list { row-gap: 4rem; }
  .rows__row { grid-template-columns: 1fr; }
  .rows__row h3, .rows__row p { grid-column: 1; }
  .rows__row figure { grid-column: 1; grid-row: auto; margin-top: 1.25rem; }
  .rows__row figure.is-wide { width: 100%; }
  .rows__row figure.is-tall { width: 70%; justify-self: end; }
  .rows__row figure.is-square { width: 55%; justify-self: start; }
}

/* ── Names as one paragraph ── */
.names { padding: calc(var(--section) / 2) var(--margin); }
.names__text { max-width: none; font-family: var(--font-display); font-weight: 500; font-size: var(--step-statement); line-height: 1.15; letter-spacing: -0.015em; color: var(--muted); text-wrap: pretty; }
.names__lead { color: var(--ink); }
.names__count { margin-top: 1.5rem; }
@media (max-width: 56em) { .names__text { line-height: 1.15; } }

/* ── Statement with the table pushed right ── */
.tbl { padding: calc(var(--section) / 2) var(--margin); }
.tbl__title { line-height: 0.98; letter-spacing: -0.025em; }
.tbl__indent { padding-left: 3vw; }
.tbl__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); margin-top: 6rem; align-items: end; }
.tbl__picture { grid-column: 1 / 5; width: 22vw; max-width: 100%; margin: 0; }
.tbl__picture img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 40%; }
.tbl__name { grid-column: 7 / 8; align-self: start; padding-top: 0.4rem; color: var(--muted); }
.tbl__rows { grid-column: 8 / 13; align-self: start; }
.tbl__row { display: grid; grid-template-columns: 9rem 1fr auto; column-gap: 1rem; align-items: baseline; padding-block: 0.9rem; line-height: 1.4; }
.tbl__kind { color: var(--muted); }
.tbl__link { justify-self: end; white-space: nowrap; }
@media (max-width: 56em) {
  .tbl__indent { padding-left: 0; }
  .tbl__grid { display: block; margin-top: 3rem; }
  .tbl__name { display: none; }
  .tbl__row { grid-template-columns: 1fr auto; }
  .tbl__kind { grid-column: 1 / -1; }
  .tbl__picture { width: 60%; margin: 2.5rem 0 0 auto; }
}

/* ── Why one desk: a dark field of problem/answer pairs ── */
.why { padding: calc(var(--section) / 2) var(--margin); background: var(--dark); color: var(--dark-ink); }
.why__title { max-width: 14ch; }
.why__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.5rem var(--gutter); margin-top: 4rem; }
.why__problem { color: var(--dark-muted); max-width: 30ch; }
.why__answer { margin-top: 0.75rem; font-family: var(--font-display); font-weight: 500; font-size: var(--step-lead); line-height: 1.25; letter-spacing: -0.01em; max-width: 34ch; }
@media (max-width: 56em) { .why__grid { grid-template-columns: 1fr; gap: 2.5rem; } }

/* ── Journey: pinned heading, the stages pass ── */
.journey { padding: calc(var(--section) / 2) var(--margin); display: grid; grid-template-columns: 5fr 7fr; column-gap: var(--gutter); align-items: start; }
.journey__title { position: sticky; top: calc(var(--header-h) + 1.5rem); max-width: 12ch; }
.journey__list { display: grid; row-gap: 2.75rem; }
.journey__step h3 { font-size: var(--step-statement); line-height: 1.1; }
.journey__step p { margin-top: 0.5rem; max-width: 40ch; }
@media (max-width: 56em) { .journey { grid-template-columns: 1fr; row-gap: 2rem; } .journey__title { position: static; } }

/* ── Mission, vision, values: three statements ── */
.mvv { padding: calc(var(--section) / 2) var(--margin); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2.5rem; }
.mvv__title { grid-column: 1 / -1; }
.mvv h3 { font-size: var(--step-lead); margin-bottom: 0.6rem; }
@media (max-width: 56em) { .mvv { grid-template-columns: 1fr; } }

/* ── Custom fabrication opening: a pinned three.js stage (plate, cut, rolled, delivered) under a four-stage story ── */
.fab-stack { position: relative; background: var(--dark); color: var(--dark-ink); }
.fab-stack .stage-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100svh; z-index: 0; }
.fab-stack .stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fab-stack .fallback { position: absolute; inset: 0; display: none; }
.fab-stack .fallback.show { display: block; }
.fab-stack .fallback img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.fab-stack .stage-hud { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; transition: opacity 0.5s ease; }
.stage-caps { position: absolute; left: var(--margin); top: calc(var(--header-h) + 2rem); width: min(90vw, 440px); height: 9rem; transition: opacity 0.5s ease; }
.stage-cap { position: absolute; left: 0; top: 0; opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s 0.5s; }
.stage-cap.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.scap-row { display: flex; align-items: baseline; gap: 0.75rem; }
.scap-n { font-size: var(--step-small); color: var(--dark-muted); }
.scap-w { font-family: var(--font-display); font-weight: 500; font-size: var(--step-head); line-height: 1; letter-spacing: -0.02em; }
.scap-d { display: block; margin-top: 0.75rem; max-width: 34ch; color: var(--dark-muted); }
.stage-prog { position: absolute; left: 50%; bottom: clamp(26px, 5vh, 56px); transform: translateX(-50%); display: flex; gap: clamp(22px, 4.5vw, 60px); }
.stage-prog li { display: flex; flex-direction: column-reverse; align-items: center; gap: 9px; opacity: 0.4; font-size: var(--step-small); transition: opacity 0.35s ease; }
.stage-prog li.active, .stage-prog li.done { opacity: 1; }
.sp-dot { position: relative; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--dark-surface); font-size: 0.75rem; }
.stage-prog li.active .sp-dot { background: var(--dark-ink); color: var(--dark); }
.stage-prog li.done .sp-dot { background: #3a3a38; }
.sp-check { position: absolute; opacity: 0; }
.sp-num { display: inline; }
.stage-prog li.done .sp-num { opacity: 0; }
.stage-prog li.done .sp-check { opacity: 1; }
.fab-intro { position: relative; z-index: 2; min-height: 100svh; display: flex; align-items: flex-start; padding: 2rem var(--margin) 0; }
.fab-intro__inner { max-width: 40ch; }
.fab-intro .lead { margin-top: 1.25rem; color: var(--dark-muted); }
.fab__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: 1.5rem; max-width: none; }
.intro-cue { display: block; margin-top: 3rem; width: 1px; height: 3.5rem; background: #3a3a38; }
.cue-fill { display: block; width: 100%; height: 0; background: var(--dark-ink); }
.fab-spacer { position: relative; z-index: 1; height: 400vh; pointer-events: none; }
.fab-landing { position: relative; z-index: 2; min-height: 100svh; display: flex; align-items: center; padding: 0 var(--margin); }
.fab-landing__inner { max-width: 40ch; opacity: 0; transition: opacity 0.8s var(--ease-out); }
.fab-landing__inner.show { opacity: 1; }
.fab-landing p { margin-top: 1.25rem; color: var(--dark-muted); }
@media (max-width: 64em) { .fab-spacer { height: 220vh; } }
@media (max-width: 48em) {
  .fab-spacer { height: 130vh; }
  .stage-caps { width: calc(100% - 2 * var(--margin)); height: auto; }
  .stage-prog { gap: 14px; bottom: 20px; }
  .fab-intro { padding-top: 1.25rem; }
}
/* without scripting or WebGL, or with reduced motion, the stack is one screen: the finished tube and the words */
html:not(.js) .fab-spacer, .fab-stack.is-rest .fab-spacer { height: 0; }
html:not(.js) .fab-landing__inner, .fab-stack.is-rest .fab-landing__inner { opacity: 1; }
html:not(.js) .fab-stack .stage-hud { opacity: 1; }
html:not(.js) .fab-stack .fallback { display: block; }
html:not(.js) .fab-stack .stage { display: none; }

/* ── Held picture, passing captions: the capabilities ── */
.steps { padding: calc(var(--section) / 2) var(--margin); }
.steps__title { max-width: 14ch; margin-bottom: 3rem; }
.steps__body { display: grid; grid-template-columns: 7fr 5fr; column-gap: var(--gutter); }
.steps__media { align-self: start; }
.steps__pictures img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 55%; }
.steps__count { color: var(--muted); }
.steps__item { min-height: 46svh; display: flex; flex-direction: column; justify-content: center; }
.steps__item h3 { font-size: var(--step-statement); line-height: 1.1; }
.steps__item p { margin-top: 0.5rem; max-width: 36ch; }
.js .steps__media { position: sticky; top: calc(var(--header-h) + 1rem); display: flex; flex-direction: column; gap: 0.75rem; }
.js .steps__pictures { position: relative; aspect-ratio: 4 / 5; max-height: calc(100svh - var(--header-h) - 5rem); }
.js .steps__pictures img { position: absolute; inset: 0; height: 100%; opacity: 0; transition: opacity 500ms ease; }
.js .steps__pictures img.is-on { opacity: 1; }
.steps__pictures img + img { margin-top: 1rem; }
.js .steps__pictures img + img { margin-top: 0; }
.js .steps__item { opacity: 0.4; transition: opacity var(--t-ui) ease; }
.js .steps__item.is-active { opacity: 1; }
@media (max-width: 56em) {
  .steps__body { display: block; }
  .js .steps__media { position: static; }
  .js .steps__pictures { aspect-ratio: 3 / 2; max-height: 42svh; }
  .steps__item { min-height: 0; padding-block: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) { .js .steps__item { opacity: 1; transition: none; } }

/* ── From the workshop: the latest post as one row ── */
.from { padding: calc(var(--section) / 2) var(--margin); }
.from__title { margin-bottom: 2.5rem; }

/* ── Contact: one closing row of three things, then the call-back form ── */
.contact { padding: calc(var(--section) / 3) var(--margin) calc(var(--section) / 2); }
.contact__title { font-size: var(--step-poster); line-height: 1; letter-spacing: -0.03em; }
.contact__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; margin-top: 2.5rem; }
.contact__sentence { grid-column: 1 / 6; font-family: var(--font-display); font-weight: 500; font-size: var(--step-lead); line-height: 1.3; letter-spacing: -0.01em; max-width: none; }
.contact__picture { grid-column: 8 / 10; margin: 0; }
.contact__picture img { aspect-ratio: 1; object-fit: cover; width: 100%; max-width: 170px; }
.contact__links { grid-column: 10 / 13; }
.contact__question { font-weight: 500; }
.contact__list { display: grid; gap: 0.6rem; margin-top: 1.25rem; }
.contact__list a { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 0.07em; }
.contact__meta { margin-top: 1.25rem; color: var(--muted); }
.contact__place { margin: calc(var(--section) / 2) 0 0; }
.contact__place img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 60%; }
.contact__strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); margin-top: 3rem; }
.contact__strip img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 45%; }
@media (max-width: 56em) { .contact__strip { grid-template-columns: 1fr 1fr; } .contact__strip figure:last-child { grid-column: 1 / -1; } .contact__strip figure:last-child img { aspect-ratio: 16 / 10; } }
.callback { display: grid; grid-template-columns: 5fr 7fr; column-gap: var(--gutter); margin-top: var(--section); align-items: start; }
.callback__text p { margin-top: 1rem; max-width: 36ch; }
.callback__form { max-width: 36rem; }
@media (max-width: 56em) {
  .contact__row { display: block; }
  .contact__picture { width: 96px; float: left; margin: 2rem 1rem 0 0; }
  .contact__links { padding-top: 2rem; }
  .contact__meta { clear: both; }
  .callback { grid-template-columns: 1fr; row-gap: 2rem; }
}

/* ── Reading: single posts and pages ── */
.reading { padding: calc(var(--section) / 3) var(--margin) calc(var(--section) / 2); }
.reading__head { max-width: 24ch; }
.reading__meta { margin-top: 1rem; color: var(--muted); }
.reading__cover { margin: 3rem 0; }
.reading__cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.prose { max-width: 64ch; }
.prose > * + * { margin-top: 1.1em; }
.prose h2, .prose h3 { margin-top: 1.8em; }
.prose h2 { font-size: var(--step-lead); }
.prose h3 { font-size: var(--step-body); font-family: var(--font-text); font-weight: 600; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 0.35em; }
.prose a { text-decoration: underline; text-underline-offset: 0.18em; }
.prose blockquote { border-left: 0.25rem solid var(--ink); padding-left: 1.2em; font-family: var(--font-display); font-size: var(--step-lead); line-height: 1.3; }
.prose img, .prose figure { margin-block: 2rem; }
.prose figcaption { margin-top: 0.5rem; }
.prose .wp-block-image img { width: 100%; }
.prose .alignwide, .prose .alignfull { max-width: none; }
.reading__nav { display: flex; justify-content: space-between; gap: 2rem; margin-top: 4rem; }
.reading__nav a { text-decoration: underline; text-underline-offset: 0.18em; }