/* ==========================================================================
   "Have We Made Digital Products Too Boring?" — article-only styles.
   Scoped to .bo / .bo-page; no other page loads this file.

   Direction: a design journal with marginalia. The left margin carries
   section numbers, captions, annotations and references; the reading column
   carries the essay. Same type pairing as the emotional design article
   (Montserrat for display, Newsreader for reading) and only the site's colours.
   Section grounds change with the subject: paper, night (cars), concrete
   (Ando), the site's own brights (Sottsass), linen (Morris), white (quiet).
   ========================================================================== */

.bo-page {
  --bo-paper: #f7f6f1;
  --bo-ink: #0b0b0c;
  --bo-butter: #ffda70;
  --bo-amber: #fdb73b;
  --bo-sky: #5dcbf7;
  --bo-concrete: #dcd8cf;
  --bo-linen: #eee7da;
  --bo-white: #ffffff;
  --bo-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --bo-display: "Montserrat", var(--font);
  --bo-out: cubic-bezier(0.16, 1, 0.3, 1);
  background: var(--bo-paper);
}

.bo { color: var(--bo-ink); font-family: var(--font); }
.bo-wrap { width: min(var(--maxw), 100% - 2 * var(--gutter)); margin-inline: auto; }
.bo :focus-visible { outline: 2.5px solid currentColor; outline-offset: 3px; border-radius: 6px; }
.bo cite { font-style: italic; }
.bo-text a, .bo-note a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.bo-text a:hover, .bo-note a:hover { text-decoration-thickness: 2px; }

/* ---------- grid: margin column (1–3) + reading column (4–10) ---------- */
.bo-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.4vw, 40px); align-items: start; }
.bo-num { grid-column: 1 / 4; padding-top: 0.6em; font-family: var(--bo-display); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.bo-num::after { content: ""; display: block; width: 32px; height: 1.5px; margin-top: 10px; background: currentColor; }
.bo-h2 {
  grid-column: 4 / 12;
  font-family: var(--bo-display);
  font-weight: 800;
  font-size: clamp(2rem, 4.2vw, 4rem);
  line-height: 1;
  letter-spacing: -0.05em;
  text-wrap: balance;
}
.bo-h3 { font-family: var(--bo-display); font-weight: 800; font-size: clamp(1.25rem, 2vw, 1.7rem); line-height: 1.12; letter-spacing: -0.035em; text-wrap: balance; }
.bo-text { grid-column: 4 / 11; max-width: 40rem; }
.bo-h2 + .bo-text, .bo-note + .bo-text { margin-top: 0; }
.bo-h2 ~ .bo-text { margin-top: clamp(28px, 3vw, 48px); }
.bo-text p {
  font-family: var(--bo-serif);
  font-size: clamp(1.2rem, 1.4vw, 1.38rem);
  line-height: 1.6;
  letter-spacing: -0.003em;
  font-variation-settings: "opsz" 18;
}
.bo-text p + p { margin-top: 1.05em; }
.bo-note { grid-column: 1 / 4; padding-top: 0.35em; font-family: var(--bo-serif); font-style: italic; font-size: 1rem; line-height: 1.4; opacity: 0.75; }
.bo-cap { font-family: var(--bo-serif); font-style: italic; font-size: 1rem; line-height: 1.45; opacity: 0.75; }
.bo-credit { font-family: var(--font); font-style: normal; font-size: 0.82rem; opacity: 0.72; }

/* emphasis that comes from the copy itself: a paragraph set a size up, never repeated */
.bo-text .bo-turn { font-size: clamp(1.45rem, 2vw, 1.85rem); line-height: 1.3; font-style: italic; font-variation-settings: "opsz" 40; }
.bo-text .bo-open { font-size: clamp(1.9rem, 3.2vw, 3rem); line-height: 1.1; letter-spacing: -0.015em; font-variation-settings: "opsz" 72; margin-bottom: 0.4em; }
.bo-text .bo-wonder { margin-top: 1.6em; font-size: clamp(1.45rem, 2vw, 1.85rem); line-height: 1.3; font-variation-settings: "opsz" 40; }

.bo-sec { position: relative; padding: clamp(110px, 12vw, 190px) 0; }
.bo-sec > * + * { margin-top: clamp(56px, 7vw, 110px); }

/* ---------- header ---------- */
.bo-head { padding: clamp(150px, 15vw, 210px) 0 0; overflow: hidden; }
.bo-meta { display: flex; flex-wrap: wrap; gap: 8px 26px; font-weight: 600; font-size: 1rem; }
.bo-meta span { opacity: 0.7; }
.bo-back { opacity: 0.85; text-underline-offset: 4px; }
.bo-back:hover { opacity: 1; text-decoration: underline; }
.bo-title {
  margin-top: clamp(28px, 4vw, 56px);
  font-family: var(--bo-display);
  font-weight: 800;
  font-size: clamp(2.9rem, 9vw, 9.4rem);
  line-height: 0.9;
  letter-spacing: -0.06em;
}
.bo-title span { display: block; }
.bo-sub {
  max-width: 30ch;
  margin: clamp(28px, 3.4vw, 48px) 0 0 33.333%;
  font-family: var(--bo-serif);
  font-style: italic;
  font-size: clamp(1.4rem, 2.2vw, 2.1rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 48;
}

/* the wall: eleven interchangeable cards and one made by hand */
.bo-wall { margin-top: clamp(64px, 8vw, 120px); padding-bottom: clamp(90px, 10vw, 150px); }
.bo-wall-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 20px);
  width: 108%;
  margin-left: -4%;
  grid-auto-flow: dense;
}
.bo-wall .bo-card--made { grid-column: 4; grid-row: 2; }
.bo-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  align-content: start;
  gap: 9%;
  aspect-ratio: 4 / 3;
  padding: 9% 10%;
  border-radius: 14px;
  background: var(--bo-white);
  box-shadow: 0 1px 2px rgba(11, 11, 12, 0.06), 0 10px 24px -14px rgba(11, 11, 12, 0.18);
}
.bo-card i { width: 18%; aspect-ratio: 1; border-radius: 50%; background: #e7e5df; }
.bo-card b { display: block; height: 7px; border-radius: 4px; background: #e9e7e1; }
.bo-card b + b { width: 62%; }
.bo-card em { align-self: end; width: 38%; height: 18%; border-radius: 999px; background: #d9d7d0; }
.bo-card--made { place-items: center; background: var(--bo-butter); box-shadow: 0 18px 40px -20px rgba(160, 110, 10, 0.55); }
.bo-amp { font-family: var(--bo-serif); font-style: italic; font-weight: 400; font-size: clamp(4rem, 9vw, 9rem); line-height: 1; font-variation-settings: "opsz" 72; translate: 0 4%; }

/* ---------- 01 sameness ---------- */
.bo-same-row { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 24px); }
.bo-same-label { margin-top: 12px; font-family: var(--bo-serif); font-style: italic; font-size: 1.05rem; }
.bo-guides { display: none; }
/* the same two horizons drawn through every frame: four subjects, one composition */
.bo-same-item .bo-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right, rgba(11, 11, 12, 0.3) 50%, transparent 0) 0 31% / 10px 1px repeat-x,
    linear-gradient(to right, rgba(11, 11, 12, 0.3) 50%, transparent 0) 0 62% / 10px 1px repeat-x;
}
.bo-same .bo-cap { margin-top: 20px; max-width: 46ch; }

.bo-frame { position: relative; overflow: hidden; border-radius: 18px; aspect-ratio: 4 / 5; background: #e8e5dd; }
.bo-frame img { width: 100%; height: 100%; object-fit: cover; }
.bo-frame--43 { aspect-ratio: 4 / 3; }
.bo-frame--45 { aspect-ratio: 4 / 5; }

/* placeholders: say exactly what belongs here */
.bo-ph {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: end;
  gap: 6px;
  padding: 8%;
  background:
    radial-gradient(90% 70% at 30% 20%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 70%),
    linear-gradient(160deg, #ece9e2 0%, #ddd9cf 100%);
  color: var(--bo-ink);
  font-family: var(--bo-serif);
  font-style: italic;
  font-size: clamp(0.95rem, 1.1vw, 1.08rem);
  line-height: 1.35;
}
.bo-ph span { font-family: var(--font); font-style: normal; font-weight: 600; font-size: 0.75rem; letter-spacing: 0.02em; opacity: 0.55; }
.bo-ph--wide { position: relative; aspect-ratio: 16 / 10; border-radius: 22px; padding: 4%; }
.bo-ph--dark { background: radial-gradient(80% 60% at 30% 30%, #2c2c2f, #141416 70%); color: var(--bo-paper); }
.bo-ph--concrete { background: radial-gradient(40% 70% at 50% 35%, #f3efe6 0%, rgba(243, 239, 230, 0) 60%), linear-gradient(180deg, #9a958c 0%, #6e6a62 100%); color: var(--bo-white); }
.bo-ph--loud { background: linear-gradient(160deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.15)); }
.bo-ph--linen { background: repeating-linear-gradient(90deg, rgba(120, 100, 70, 0.05) 0 2px, transparent 2px 5px), repeating-linear-gradient(0deg, rgba(120, 100, 70, 0.05) 0 2px, transparent 2px 5px), #e6dccb; }

/* invented wordmarks, one typeface */
.bo-frame--marks { display: grid; align-content: center; justify-items: center; gap: 13%; background: #ece8df; }
.bo-frame--marks span { font-family: var(--bo-display); font-weight: 500; font-size: clamp(0.62rem, 0.95vw, 0.95rem); letter-spacing: 0.34em; white-space: nowrap; }

/* a generic app, drawn */
.bo-frame--app { display: grid; grid-template-columns: 26% 1fr; gap: 6%; padding: 9% 8%; background: #ecebe6; }
.app-side { display: grid; align-content: start; gap: 10px; padding-top: 4px; }
.app-side i { height: 7px; border-radius: 4px; background: #d6d4cd; }
.app-side i:first-child { width: 70%; height: 14px; background: #c9c7bf; margin-bottom: 8px; }
.app-main { display: grid; align-content: start; gap: 10%; }
.app-main b { width: 55%; height: 12px; border-radius: 6px; background: #cfcdc5; }
.app-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.app-cards u { aspect-ratio: 1 / 0.85; border-radius: 10px; background: var(--bo-white); box-shadow: 0 6px 14px -10px rgba(11, 11, 12, 0.3); }

/* ---------- 02 Braun, annotated ---------- */
.bo-sec--02 { background: linear-gradient(180deg, var(--bo-paper) 0%, #f1efe8 100%); }
.bo-annot .bo-wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.4vw, 40px); align-items: end; }
.bo-annot-frame { position: relative; grid-column: 1 / 10; }
.bo-annot-legend { grid-column: 10 / 13; padding-bottom: 6px; }
.bo-annot-legend ol { display: grid; gap: 12px; padding: 0; margin: 0; list-style: none; counter-reset: pin; }
.bo-annot-legend li { display: flex; gap: 12px; align-items: baseline; font-family: var(--bo-serif); font-size: 1.08rem; line-height: 1.3; transition: opacity 0.3s; }
.bo-annot-legend li::before { counter-increment: pin; content: counter(pin); flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--bo-ink); color: var(--bo-white); font: 700 0.72rem/1 var(--font); }
.bo-annot-legend .bo-credit { margin-top: 22px; }
.bo-annot.is-pointing li { opacity: 0.35; }
.bo-annot.is-pointing li.is-on { opacity: 1; }
.bo-pin {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--bo-ink);
  color: var(--bo-white);
  font: 700 0.78rem/1 var(--font);
  box-shadow: 0 0 0 6px rgba(11, 11, 12, 0.12);
  cursor: default;
}

/* pull quotes: the only three, set large in the reading face */
.bo-quote { margin: 0; }
.bo-quote p {
  font-family: var(--bo-serif);
  font-style: italic;
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.025em;
  font-variation-settings: "opsz" 72;
  text-wrap: balance;
}
.bo-quote span { display: block; margin-top: 0.22em; }
.bo-quote--1 p { max-width: 19ch; margin-left: 8.333%; font-size: clamp(2.3rem, 5.2vw, 5.4rem); }
.bo-quote--2 p { max-width: 15ch; margin-left: 33.333%; font-size: clamp(2.3rem, 5.2vw, 5.4rem); }
.bo-quote--3 p { max-width: 20ch; font-size: clamp(2.6rem, 6.4vw, 6.8rem); }

/* ---------- 03 cars, at night ---------- */
.bo-sec--03 { background: var(--bo-ink); color: var(--bo-paper); }
.bo-sec--03 .bo-text a, .bo-sec--03 .bo-note a { text-decoration-color: var(--bo-amber); }
.bo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 2vw, 32px); }
.bo-pair .bo-cap { margin-top: 12px; }

.bo-temp { padding: clamp(22px, 3vw, 44px); border-radius: 30px; background: #161618; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.bo-temp-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.bo-temp-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 3vw, 48px); margin-top: clamp(20px, 3vw, 36px); }
.tc-label { margin-bottom: 12px; font-weight: 600; font-size: 0.95rem; opacity: 0.6; }
.tc-stage { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 22px; background: radial-gradient(70% 70% at 50% 40%, #2a2a2d 0%, #1b1b1d 100%); }
.tc-note { min-height: 1.5em; margin-top: 12px; font-family: var(--bo-serif); font-style: italic; font-size: 1.05rem; opacity: 0.85; }
.tc-read { position: absolute; right: 6%; bottom: 6%; font-family: var(--bo-display); font-weight: 700; font-size: clamp(1.2rem, 2vw, 1.7rem); color: var(--bo-amber); font-variant-numeric: tabular-nums; }

.dial { position: relative; width: min(56%, 230px); aspect-ratio: 1; border-radius: 50%; touch-action: none; cursor: grab; }
.dial:active { cursor: grabbing; }
.dial-ticks {
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  background: repeating-conic-gradient(from -135deg, rgba(255, 255, 255, 0.5) 0 1deg, transparent 1deg 13.5deg);
  -webkit-mask: radial-gradient(closest-side, transparent 88%, #000 89% 100%), conic-gradient(from -135deg, #000 0 271deg, transparent 271deg);
  -webkit-mask-composite: source-in;
  mask: radial-gradient(closest-side, transparent 88%, #000 89% 100%) intersect, conic-gradient(from -135deg, #000 0 271deg, transparent 271deg);
}
.dial-knob {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.04) 0 52%, transparent 53%),
    repeating-conic-gradient(rgba(255, 255, 255, 0.05) 0 2deg, rgba(0, 0, 0, 0.05) 2deg 4deg),
    radial-gradient(circle at 35% 30%, #4a4a4f 0%, #252528 70%);
  box-shadow: 0 18px 30px -12px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transform: rotate(var(--a, 0deg));
  transition: transform 0.12s ease-out;
}
.dial-knob i { position: absolute; left: 50%; top: 8%; width: 4px; height: 18%; margin-left: -2px; border-radius: 2px; background: var(--bo-amber); }

.scr { position: relative; width: 86%; aspect-ratio: 16 / 10; border-radius: 14px; background: #0f0f11; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); overflow: hidden; }
.scr-home { position: absolute; inset: 7%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6%; }
.scr-home button { border: 0; border-radius: 10px; background: #232327; color: rgba(255, 255, 255, 0.82); font: 600 clamp(0.62rem, 0.9vw, 0.85rem) var(--font); cursor: pointer; }
.scr-home button:hover { background: #2c2c31; }
.scr-climate { position: absolute; inset: 7%; display: grid; align-content: start; gap: 6px; }
.scr-climate[hidden], .scr-home[hidden] { display: none; }
.scr-back { justify-self: start; padding: 4px 10px; border: 0; border-radius: 999px; background: #232327; color: rgba(255, 255, 255, 0.8); font: 600 0.75rem var(--font); cursor: pointer; }
.scr-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; border-radius: 8px; background: #1b1b1e; font-size: clamp(0.66rem, 0.9vw, 0.85rem); color: rgba(255, 255, 255, 0.75); }
.scr-temp > span:last-child { display: inline-flex; align-items: center; gap: 8px; }
.scr-temp button { width: 26px; height: 26px; border: 0; border-radius: 6px; background: #2c2c31; color: var(--bo-white); font: 600 1rem/1 var(--font); cursor: pointer; }
.scr-temp output { min-width: 3.4em; text-align: center; color: var(--bo-amber); font-weight: 700; font-variant-numeric: tabular-nums; }
.scr-toast { position: absolute; left: 7%; bottom: 6%; font-size: 0.75rem; color: rgba(255, 255, 255, 0.6); }

/* ---------- 04 Ando → Sottsass → back to screens ---------- */
.bo-sec--04 { padding: 0; }
.bo-sec--04 > * + * { margin-top: 0; }
.bo-ando { padding: clamp(110px, 12vw, 190px) 0 clamp(120px, 14vw, 220px); background: linear-gradient(180deg, #e7e4dd 0%, var(--bo-concrete) 100%); }
.bo-ando > .bo-wrap + .bo-wrap { margin-top: clamp(64px, 8vw, 120px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.4vw, 40px); align-items: end; }
.bo-ando-fig { grid-column: 6 / 13; grid-row: 1; }
.bo-ando-fig .bo-frame { border-radius: 4px; }
.bo-ando-fig .bo-cap { margin-top: 12px; }
.bo-ando-text { grid-column: 1 / 6; grid-row: 1; padding-bottom: 3em; }

.bo-memphis { padding: clamp(110px, 12vw, 190px) 0 clamp(120px, 14vw, 200px); background: var(--bo-paper); }
.bo-memphis > .bo-wrap + .bo-wrap { margin-top: clamp(56px, 7vw, 110px); }
.bo-memphis-set { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 2vw, 32px); align-items: start; }
.bo-mp { padding: clamp(10px, 1.2vw, 18px); border-radius: 4px; transition: rotate 0.8s var(--bo-out); }
.bo-mp .bo-frame { border-radius: 2px; }
.bo-mp .bo-cap { margin-top: 10px; opacity: 0.85; }
.bo-mp--a { grid-column: 1 / 5; background: var(--bo-butter); rotate: -2deg; }
.bo-mp--a .bo-frame { aspect-ratio: 3 / 4; }
.bo-mp--b { grid-column: 5 / 9; margin-top: clamp(90px, 12vw, 180px); background: var(--bo-sky); rotate: 2.5deg; }
.bo-mp--b .bo-frame { aspect-ratio: 1 / 1; }
.bo-mp--c { grid-column: 9 / 13; margin-top: clamp(24px, 3vw, 48px); background: var(--bo-amber); rotate: -1.2deg; }
.bo-mp--c .bo-frame { aspect-ratio: 4 / 3; }

.bo-turnback { padding: clamp(120px, 14vw, 220px) 0; background: var(--bo-ink); color: var(--bo-paper); }
.bo-turnback .bo-text p.bo-big { font-size: clamp(1.9rem, 3.4vw, 3.3rem); line-height: 1.12; letter-spacing: -0.015em; font-variation-settings: "opsz" 72; }
.bo-turnback .bo-text p.bo-big + p { margin-top: 1.4em; }
.bo-turnback .bo-text p + p.bo-big { margin-top: 1.2em; }
.bo-turnback .bo-text { grid-column: 3 / 11; max-width: 46rem; }

/* ---------- 05 the same task, built two ways ---------- */
.bo-sys { padding: clamp(20px, 3vw, 40px); border-radius: 30px; background: var(--bo-white); box-shadow: 0 0 0 1px rgba(11, 11, 12, 0.07); }
.bo-sys-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.bo-sys-head .bo-h3 { max-width: 30ch; }
.bo-sys-switch { display: inline-flex; flex-wrap: wrap; padding: 4px; border-radius: 999px; background: #ece9e1; }
.bo-sys-switch button { padding: 9px 15px; border: 0; border-radius: 999px; background: none; color: var(--bo-ink); font: 600 0.9rem var(--font); cursor: pointer; }
.bo-sys-switch button[aria-pressed="true"] { background: var(--bo-white); box-shadow: 0 1px 3px rgba(11, 11, 12, 0.14); }
.bo-sys-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 3vw, 48px); margin-top: clamp(20px, 3vw, 36px); align-items: start; }
.bo-sys-pair[data-show="a"],
.bo-sys-pair[data-show="b"] { grid-template-columns: minmax(0, 520px); justify-content: center; }
.bo-sys-pair[data-show="a"] .sys--b,
.bo-sys-pair[data-show="b"] .sys--a { display: none; }
.bo-sys > .bo-cap { margin-top: clamp(18px, 2.4vw, 28px); }
.sys-label { margin-bottom: 10px; font-weight: 600; font-size: 0.95rem; opacity: 0.6; }

/* A: competent, generic components */
.sys-a { display: grid; gap: 14px; padding: 22px; border-radius: 12px; background: #fafafa; box-shadow: 0 0 0 1px #e4e4e7; font-family: "Inter Tight", Arial, sans-serif; }
.sa-title { font-weight: 600; font-size: 1.05rem; }
.sa-field { display: grid; gap: 6px; font-size: 0.82rem; font-weight: 500; color: #52525b; }
.sa-field select { height: 40px; padding: 0 10px; border: 1px solid #d4d4d8; border-radius: 8px; background: var(--bo-white); color: #18181b; font: 400 0.95rem var(--font); }
.sa-toggle { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: #3f3f46; }
.sa-toggle input { width: 18px; height: 18px; accent-color: #4f46e5; }
.sa-save { justify-self: start; padding: 10px 18px; border: 0; border-radius: 8px; background: #4f46e5; color: var(--bo-white); font: 600 0.92rem var(--font); cursor: pointer; }
.sa-toast { min-height: 1.3em; font-size: 0.82rem; color: #71717a; }

/* B: the same parts, arranged around the task */
.sys-b { display: grid; gap: 16px; padding: clamp(20px, 2.4vw, 30px); border-radius: 22px; background: var(--bo-paper); }
.sb-title { font-family: var(--bo-display); font-weight: 800; font-size: clamp(1.6rem, 2.4vw, 2.1rem); letter-spacing: -0.045em; line-height: 1; }
.sb-sentence { font-family: var(--bo-serif); font-size: clamp(1.25rem, 1.7vw, 1.5rem); line-height: 1.5; }
.sb-step { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 999px; background: var(--bo-white); box-shadow: 0 0 0 1px rgba(11, 11, 12, 0.1); vertical-align: 0.05em; }
.sb-step button { width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; color: var(--bo-ink); font: 600 1.1rem/1 var(--font); cursor: pointer; }
.sb-step button:hover { background: #ece9e1; }
.sb-days { min-width: 1.6em; text-align: center; font-family: var(--bo-display); font-weight: 800; font-size: 1.1rem; }
.sb-when { padding: 0 0.15em; border: 0; border-bottom: 2px dotted currentColor; background: none; color: inherit; font: inherit; cursor: pointer; }
.sb-week { display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; padding: 0; margin: 0; list-style: none; }
.sb-week li { display: grid; justify-items: center; gap: 6px; font-size: 0.68rem; font-weight: 600; opacity: 0.7; }
.sb-week li::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: rgba(11, 11, 12, 0.1); transition: background 0.3s, transform 0.3s var(--bo-out); }
.sb-week li.is-water { opacity: 1; }
.sb-week li.is-water::after { background: var(--bo-sky); transform: scale(1.25); }
.sb-week li.is-today { opacity: 1; }
.sb-next { font-family: var(--bo-serif); font-style: italic; font-size: 1.1rem; }
.sb-save { justify-self: start; padding: 13px 22px; border: 0; border-radius: 999px; background: var(--bo-ink); color: var(--bo-white); font: 600 1rem var(--font); cursor: pointer; transition: background 0.3s; }
.sys-b.is-set .sb-save { background: #2f9e5c; }
.sb-done { min-height: 1.4em; font-size: 0.95rem; }
.sys-notes { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; counter-reset: n; }
.sys-notes li { display: flex; gap: 10px; font-family: var(--bo-serif); font-style: italic; font-size: 1rem; opacity: 0.8; }
.sys-notes li::before { counter-increment: n; content: counter(n); flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--bo-ink); color: var(--bo-white); font: 700 0.7rem/1 var(--font); font-style: normal; }

/* ---------- 06 making things (linen) ---------- */
.bo-sec--06 { background: var(--bo-linen); }
.bo-specimen { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.4vw, 40px); align-items: end; }
.bo-specimen .bo-frame { grid-column: 2 / 9; border-radius: 2px; box-shadow: 0 0 0 clamp(10px, 1.6vw, 22px) #f8f4ec, 0 30px 60px -30px rgba(70, 50, 20, 0.45); }
.bo-label { grid-column: 10 / 13; display: grid; gap: 6px; padding-top: 14px; border-top: 1.5px solid var(--bo-ink); font-family: var(--bo-serif); font-size: 1rem; line-height: 1.4; }
.bo-label strong { font-family: var(--bo-display); font-weight: 800; font-size: 1.1rem; letter-spacing: -0.03em; }

.bo-iter-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 24px); }
.it .bo-cap { margin-top: 10px; }
.it-stage { position: relative; display: grid; place-items: center; align-content: center; gap: 10px; aspect-ratio: 4 / 3; padding: 10%; border-radius: 16px; background: var(--bo-white); box-shadow: 0 0 0 1px rgba(11, 11, 12, 0.06); }
.it--1 .it-btn { padding: 4px 12px; border: 1px solid #8a8a8a; border-radius: 2px; background: #efefef; color: #111; font: 400 0.85rem Arial, sans-serif; cursor: pointer; }
.it--2 .it-btn,
.it--3 .it-btn { padding: 11px 20px; border: 0; border-radius: 999px; background: var(--bo-ink); color: var(--bo-white); font: 600 0.92rem var(--font); cursor: pointer; }
.it--2 .it-btn { transition: background 1.6s ease; }
.it--3 .it-btn { transition: background 0.2s ease; }
.it--3 .it-stage { place-items: end start; }
.it--3 .it-btn { font-size: 0.78rem; padding: 8px 14px; }
.it--2.is-on .it-btn,
.it--3.is-on .it-btn,
.it--4.is-on .it-btn { background: #2f9e5c; }
.it-title { font-family: var(--bo-display); font-weight: 800; font-size: clamp(0.9rem, 1.2vw, 1.1rem); letter-spacing: -0.03em; }
.it--4 .it-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border: 0; border-radius: 999px; background: var(--bo-ink); color: var(--bo-white); font: 600 0.92rem var(--font); cursor: pointer; transition: background 0.2s ease; }
.it-icon { position: relative; width: 12px; height: 14px; border: 2px solid currentColor; border-bottom: 0; border-radius: 2px 2px 0 0; }
.it-icon::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: -3px; height: 6px; background: linear-gradient(135deg, transparent 45%, currentColor 45% 55%, transparent 55%) left / 50% 100% no-repeat, linear-gradient(45deg, transparent 45%, currentColor 45% 55%, transparent 55%) right / 50% 100% no-repeat; }
.it-hint { font-size: 0.8rem; opacity: 0; translate: 0 4px; transition: opacity 0.25s ease, translate 0.35s var(--bo-out); }
.it--4.is-on .it-hint { opacity: 0.7; translate: 0 0; }
.bo-iter > .bo-cap { margin-top: 18px; }

/* ---------- 07 AI ---------- */
.bo-ai { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.4vw, 40px); align-items: end; }
.bo-ai-set { grid-column: 1 / 10; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 20px); }
.ai { --acc: #6d5df5; display: grid; grid-template-columns: 20% 1fr; gap: 5%; aspect-ratio: 16 / 10; padding: 5%; border-radius: 10px; background: var(--bo-white); box-shadow: 0 1px 2px rgba(11, 11, 12, 0.05), 0 12px 24px -16px rgba(11, 11, 12, 0.22); overflow: hidden; }
.ai-side { display: grid; align-content: start; gap: 9px; padding: 8% 0; border-radius: 6px; background: #f4f4f7; }
.ai-side s { display: block; height: 5px; margin: 0 16%; border-radius: 3px; background: #dcdce4; }
.ai-side s:first-child { height: 8px; margin-bottom: 6px; background: var(--acc); opacity: 0.85; width: 40%; }
.ai-main { display: grid; grid-template-rows: auto auto 1fr; gap: 9%; min-width: 0; }
.ai-top { display: flex; align-items: center; justify-content: space-between; }
.ai-top b { width: 38%; height: 7px; border-radius: 4px; background: #d6d6de; }
.ai-top em { width: 20%; height: 12px; border-radius: 999px; background: var(--acc); }
.ai-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7%; }
.ai-stats u { display: grid; gap: 5px; padding: 12% 12%; border-radius: 6px; background: #fafafc; box-shadow: inset 0 0 0 1px #ececf1; }
.ai-stats u b { width: 50%; height: 4px; border-radius: 2px; background: #dedee6; }
.ai-stats u q { width: 72%; height: 8px; border-radius: 3px; background: #2a2a33; opacity: 0.75; }
.ai-stats u q::before, .ai-stats u q::after { content: none; }
.ai-chart { position: relative; border-radius: 6px; background: #fafafc; box-shadow: inset 0 0 0 1px #ececf1; overflow: hidden; }
.ai-chart::before { content: ""; position: absolute; inset: 22% 0 0; background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 30%, transparent), transparent); clip-path: polygon(0 70%, 14% 52%, 28% 60%, 44% 30%, 60% 42%, 76% 18%, 90% 26%, 100% 10%, 100% 100%, 0 100%); }
.ai:nth-child(2) { --acc: #5b6cf9; }
.ai:nth-child(3) { --acc: #7a5af0; }
.ai:nth-child(4) { --acc: #6366f1; }
.ai:nth-child(5) { --acc: #8b5cf6; }
.ai:nth-child(6) { --acc: #4f6ef7; }
.bo-ai-notes { grid-column: 10 / 13; display: grid; gap: 10px; padding: 0; margin: 0; list-style: none; counter-reset: n; }
.bo-ai-notes li { display: flex; gap: 10px; font-family: var(--bo-serif); font-size: 1.05rem; }
.bo-ai-notes li::before { counter-increment: n; content: counter(n); flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--bo-ink); color: var(--bo-white); font: 700 0.7rem/1 var(--font); }
.bo-ai > .bo-cap { grid-column: 1 / 10; margin-top: 16px; }

.alt {
  position: relative;
  display: grid;
  align-content: space-between;
  gap: 18px;
  aspect-ratio: 16 / 8;
  padding: clamp(24px, 4vw, 56px);
  border-radius: 26px;
  background: var(--bo-butter);
  overflow: hidden;
}
.alt-day { font-weight: 600; font-size: clamp(0.9rem, 1.2vw, 1.1rem); }
.alt-big { font-family: var(--bo-display); font-weight: 800; font-size: clamp(4rem, 12vw, 11rem); line-height: 0.82; letter-spacing: -0.07em; }
.alt-big span { font-family: var(--bo-serif); font-style: italic; font-weight: 400; font-size: 0.32em; letter-spacing: -0.01em; }
.alt-ovens { position: relative; height: 40px; border-radius: 8px; background: rgba(11, 11, 12, 0.08); }
.alt-ovens span { position: absolute; top: 0; bottom: 0; left: calc(var(--s) * 100%); width: calc(var(--w) * 100%); display: flex; align-items: center; padding: 0 12px; border-radius: 8px; background: var(--bo-ink); color: var(--bo-butter); font-weight: 600; font-size: clamp(0.7rem, 1vw, 0.9rem); white-space: nowrap; overflow: hidden; }
.alt-ovens span:nth-child(2) { background: #2b2b2d; }
.alt-ovens span:nth-child(3) { background: #4a4a4d; }
.alt-foot { font-family: var(--bo-serif); font-style: italic; font-size: clamp(1rem, 1.4vw, 1.25rem); }
.bo-alt .bo-cap { margin-top: 14px; max-width: 60ch; }

/* ---------- 08 quiet ---------- */
.bo-sec--08 { background: var(--bo-white); }
.bo-quiet { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2.4vw, 40px); align-items: center; }
.appt { grid-column: 4 / 8; display: grid; gap: 18px; padding: clamp(22px, 2.6vw, 34px); border-radius: 24px; background: var(--bo-paper); }
.appt-ok { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 0.95rem; color: #23794a; }
.appt-ok span { position: relative; width: 20px; height: 20px; border-radius: 50%; background: #2f9e5c; }
.appt-ok span::after { content: ""; position: absolute; left: 6px; top: 4px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.appt-when { font-family: var(--bo-display); font-weight: 800; font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.05; letter-spacing: -0.045em; }
.appt-where { font-size: 1rem; line-height: 1.45; opacity: 0.8; }
.appt-bring { padding: 12px 14px; border-radius: 12px; background: var(--bo-white); font-size: 0.95rem; line-height: 1.45; }
.appt-bring strong { display: block; font-weight: 700; }
.appt-next { font-family: var(--bo-serif); font-style: italic; font-size: 1.05rem; }
.appt-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.appt-actions span { padding: 10px 16px; border-radius: 999px; background: var(--bo-ink); color: var(--bo-white); font-weight: 600; font-size: 0.9rem; }
.appt-actions span + span { background: none; color: var(--bo-ink); box-shadow: inset 0 0 0 1.5px rgba(11, 11, 12, 0.25); }
.bo-quiet-notes { grid-column: 9 / 13; display: grid; gap: 12px; padding: 0; margin: 0; list-style: none; counter-reset: n; }
.bo-quiet-notes li { display: flex; gap: 10px; font-family: var(--bo-serif); font-size: 1.05rem; line-height: 1.35; }
.bo-quiet-notes li::before { counter-increment: n; content: counter(n); flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--bo-ink); color: var(--bo-white); font: 700 0.7rem/1 var(--font); }
.bo-quiet > .bo-cap { grid-column: 4 / 12; margin-top: 16px; }

/* ---------- 09 closing ---------- */
.bo-sec--09 { padding-bottom: clamp(150px, 16vw, 250px); }
.bo-end .bo-card--end { grid-column: 1 / 3; width: 100%; }
.bo-end .bo-amp { font-size: clamp(3rem, 6vw, 6rem); }
.bo-text .bo-last { font-size: clamp(1.9rem, 3.4vw, 3.3rem); line-height: 1.1; letter-spacing: -0.015em; font-style: italic; font-variation-settings: "opsz" 72; margin: 0.7em 0; }
.bo-signoff { grid-column: 4 / 11; max-width: 40rem; padding-top: 26px; border-top: 1.5px solid var(--bo-ink); }
.bo-signoff > p:first-child { font-family: var(--bo-serif); font-style: italic; font-size: clamp(1.25rem, 1.6vw, 1.5rem); line-height: 1.45; }
.bo-reply { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 22px; font-weight: 600; }
.bo-reply a { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- motion ---------- */
.js .bo-title span { opacity: 0; translate: 0 0.3em; animation: bo-rise 1.15s var(--bo-out) forwards; }
.js .bo-title span:nth-child(2) { animation-delay: 0.08s; }
.js .bo-title span:nth-child(3) { animation-delay: 0.16s; }
.js .bo-meta, .js .bo-sub { opacity: 0; animation: bo-fade 1s ease 0.5s forwards; }
/* the one orchestrated moment: the wall assembles, the made card arrives last */
.js .bo-wall .bo-card { opacity: 0; translate: 0 14px; animation: bo-rise 0.9s var(--bo-out) forwards; animation-delay: calc(0.55s + var(--i, 0) * 0.035s); }
.js .bo-wall .bo-card--made { animation-delay: 1.15s; animation-duration: 1.2s; }
@keyframes bo-rise { to { opacity: 1; translate: 0 0; } }
@keyframes bo-fade { to { opacity: 1; } }

.js .bo-reveal { opacity: 0; transition: opacity 1.1s ease; }
.bo-reveal.is-in { opacity: 1; }
.js .bo-mp { rotate: 0deg; }
.js .bo-mp--a.is-in { rotate: -2deg; }
.js .bo-mp--b.is-in { rotate: 2.5deg; }
.js .bo-mp--c.is-in { rotate: -1.2deg; }

@media (prefers-reduced-motion: reduce) {
  .js .bo-title span, .js .bo-meta, .js .bo-sub, .js .bo-wall .bo-card { animation: none; opacity: 1; translate: none; }
  .js .bo-reveal { opacity: 1; transition: none; }
  .bo-mp, .dial-knob, .sb-week li::after, .it-btn, .it-hint, .sb-save { transition: none !important; }
  .js .bo-mp--a { rotate: -2deg; } .js .bo-mp--b { rotate: 2.5deg; } .js .bo-mp--c { rotate: -1.2deg; }
}

/* ---------- tablet ---------- */
@media (max-width: 999px) {
  .bo-num, .bo-note { grid-column: 1 / -1; }
  .bo-num { padding-top: 0; margin-bottom: 18px; }
  .bo-note { margin-bottom: 18px; }
  .bo-h2 { grid-column: 1 / -1; }
  .bo-text, .bo-turnback .bo-text, .bo-signoff { grid-column: 1 / -1; }
  .bo-sub { margin-left: 0; }
  .bo-wall-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); width: 112%; margin-left: -6%; }
  .bo-wall-grid .bo-card:nth-child(n + 9):not(.bo-card--made) { display: none; }
  .bo-wall .bo-card--made { grid-column: 3; }
  .bo-annot-frame { grid-column: 1 / -1; }
  .bo-annot-legend { grid-column: 1 / -1; margin-top: 20px; }
  .bo-annot-legend ol { grid-template-columns: 1fr 1fr; }
  .bo-quote--1 p, .bo-quote--2 p { margin-left: 0; }
  .bo-ando-fig { grid-column: 1 / -1; grid-row: auto; }
  .bo-ando-text { grid-column: 1 / -1; grid-row: auto; padding: 40px 0 0; }
  .bo-specimen .bo-frame { grid-column: 1 / 11; }
  .bo-label { grid-column: 1 / -1; margin-top: 36px; }
  .bo-ai-set, .bo-ai > .bo-cap { grid-column: 1 / -1; }
  .bo-ai-notes { grid-column: 1 / -1; margin-top: 20px; }
  .appt { grid-column: 1 / 8; }
  .bo-quiet-notes { grid-column: 8 / 13; }
  .bo-quiet > .bo-cap { grid-column: 1 / -1; }
  .bo-end .bo-card--end { grid-column: 1 / 5; margin-bottom: 36px; }
}

/* ---------- phone ---------- */
@media (max-width: 700px) {
  .bo-title { font-size: 13.4vw; line-height: 0.93; text-wrap: balance; }
  .bo-title span { display: inline; }
  .bo-wall-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 118%; margin-left: -9%; }
  .bo-wall-grid .bo-card:nth-child(n + 6):not(.bo-card--made) { display: none; }
  .bo-wall .bo-card--made { grid-column: 2; grid-row: 2; }
  .bo-same-row { grid-template-columns: 1fr 1fr; row-gap: 24px; }
  .bo-pair, .bo-temp-pair, .bo-sys-pair { grid-template-columns: 1fr; }
  .bo-sys-pair[data-show="both"] .sys + .sys { margin-top: 28px; }
  .bo-memphis-set { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .bo-mp--a { grid-column: 1 / -1; width: 82%; }
  .bo-mp--b { grid-column: 1; margin-top: 0; }
  .bo-mp--c { grid-column: 2; margin-top: 40px; }
  .bo-specimen .bo-frame { grid-column: 1 / -1; }
  .bo-iter-row { grid-template-columns: 1fr 1fr; row-gap: 24px; }
  .bo-ai-set { grid-template-columns: 1fr 1fr; }
  .bo-ai-set .ai:nth-child(n + 5) { display: none; }
  .ai-side s { margin: 0 12%; }
  .alt { aspect-ratio: auto; min-height: 340px; }
  .appt, .bo-quiet-notes { grid-column: 1 / -1; }
  .bo-quiet-notes { margin-top: 24px; }
  .bo-end .bo-card--end { grid-column: 1 / 7; }
  .bo-quote--3 p { font-size: 11vw; }
}

/* real photographs */
.bo-annot-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 22px; background: #eceae4; }
.bo-cap .bo-credit { display: block; margin-top: 4px; }
.bo-credit a { text-decoration: underline; text-underline-offset: 2px; }
.bo-mp .bo-credit { opacity: 0.75; }

/* ==========================================================================
   Editorial pass: pictures sit on the page, not in cards.
   ========================================================================== */

/* ---- 01 contact sheet: one grade, hairline gutters, one horizon ---- */
.bo-sheet-row { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
.bo-pl-img { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: #e6e1d6; }
.bo-pl-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.5) sepia(0.2) contrast(0.92) brightness(1.04); }
.bo-pl-cap { margin-top: 12px; font-family: var(--bo-serif); font-style: italic; font-size: 1.08rem; }
.bo-pl-cap span { margin-right: 8px; font-family: var(--bo-display); font-style: normal; font-weight: 700; font-size: 0.72rem; opacity: 0.55; }
.bo-pl-marks { display: grid; align-content: center; justify-items: center; gap: 12%; background: #ece5d8; }
.bo-pl-marks span { font-family: var(--bo-display); font-weight: 500; font-size: clamp(0.6rem, 0.95vw, 0.92rem); letter-spacing: 0.34em; white-space: nowrap; color: #2b2925; }
.bo-pl-app { display: grid; grid-template-columns: 30% 1fr; background: #e9e5dc; font-family: "Inter Tight", Arial, sans-serif; color: #5b5750; }
.pa-side { display: grid; align-content: start; gap: 9px; padding: 14% 10%; background: #e2ddd2; font-size: clamp(0.5rem, 0.7vw, 0.72rem); }
.pa-side b { margin-bottom: 8px; font-weight: 700; color: #3a3732; }
.pa-side i { font-style: normal; }
.pa-side i.on { padding: 3px 6px; margin: 0 -6px; border-radius: 5px; background: #f3f0e9; color: #2c2a26; }
.pa-main { display: grid; align-content: start; gap: 10%; padding: 14% 9%; }
.pa-top { display: flex; align-items: center; justify-content: space-between; }
.pa-top b { font-size: clamp(0.62rem, 0.95vw, 0.95rem); color: #2c2a26; }
.pa-top em { padding: 3px 9px; border-radius: 999px; background: #8d8679; color: #f5f2ec; font-style: normal; font-size: clamp(0.5rem, 0.7vw, 0.7rem); font-weight: 600; }
.pa-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.pa-cards u { display: grid; gap: 5px; aspect-ratio: 1 / 0.9; padding: 9px; border-radius: 9px; background: #f5f3ee; text-decoration: none; box-shadow: 0 6px 12px -10px rgba(40, 30, 10, 0.5); }
.pa-cards b { font-size: clamp(0.48rem, 0.66vw, 0.68rem); color: #3a3732; }
.pa-cards i { display: block; height: 4px; border-radius: 2px; background: #e2ddd2; }
.pa-cards i + i { width: 60%; }
.bo-horizon { position: absolute; left: -2%; right: -2%; top: calc((100% - 2.4rem) * 0.42); height: 1px; background: var(--bo-amber); pointer-events: none; }
.bo-horizon::after { content: "eye level"; position: absolute; right: 0; top: -1.5em; font-family: var(--bo-serif); font-style: italic; font-size: 0.9rem; color: #b26b00; }
.bo-sheet > .bo-cap { margin-top: 22px; max-width: 58ch; }

/* ---- 02 Braun: printed on the page, annotated like a catalogue plate ---- */
.bo-annot .bo-wrap { display: block; }
.bo-annot-frame { position: relative; }
.bo-annot-img { border-radius: 0; background: none; mix-blend-mode: multiply; -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 62%, transparent 100%); }
.bo-pin {
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--bo-ink);
  box-shadow: 0 0 0 4px rgba(247, 246, 241, 0.85), 0 0 0 5px rgba(11, 11, 12, 0.5);
  font-size: 0;
}
.bo-pin > span:not(.bo-pin-label) { display: none; }
.bo-pin-label {
  position: absolute;
  left: 22px;
  top: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  transform: translateY(-50%);
  font: italic 400 1.02rem/1 var(--bo-serif);
  color: var(--bo-ink);
  pointer-events: none;
}
.bo-pin-label::before { content: ""; width: 34px; height: 1px; background: var(--bo-ink); opacity: 0.6; }
.bo-pin-label b { font: 700 0.7rem/1 var(--bo-display); opacity: 0.55; }
.bo-pin.is-left .bo-pin-label { left: auto; right: 22px; flex-direction: row-reverse; }
.bo-annot-legend { display: none; margin-top: 18px; }
.bo-annot-credit { margin-top: 14px; }

/* ---- 04 Ando: the section takes the colour of the concrete ---- */
.bo-ando {
  color: var(--bo-paper);
  background:
    radial-gradient(40% 50% at 50% 62%, rgba(255, 248, 232, 0.07) 0%, rgba(255, 248, 232, 0) 70%),
    linear-gradient(180deg, #3a3936 0%, #2a2927 100%);
}
.bo-ando .bo-text a { text-decoration-color: rgba(247, 246, 241, 0.5); }
.bo-ando > .bo-wrap + .bo-wrap { display: block; margin-top: clamp(80px, 10vw, 150px); }
.bo-ando-fig { max-width: 760px; margin: 0 auto; }
.bo-ando-fig .bo-frame { aspect-ratio: 4 / 5; border-radius: 0; background: #1d1c1a; box-shadow: 0 80px 120px -60px rgba(0, 0, 0, 0.75); }
.bo-ando-fig .bo-cap { margin-top: 16px; text-align: center; opacity: 0.7; }
.bo-ando-text { max-width: 40rem; margin: clamp(80px, 10vw, 150px) 0 0 33.333%; padding: 0; }

/* ---- 06 proof sheet: one button, four passes, an editor's amber marks ---- */
.bo-proof {
  padding: clamp(20px, 3vw, 40px) clamp(18px, 3vw, 44px) clamp(24px, 3.4vw, 48px);
  background: radial-gradient(circle, rgba(11, 11, 12, 0.14) 1px, transparent 1.4px) 0 0 / 18px 18px, #fbf8f1;
  box-shadow: 0 1px 1px rgba(60, 40, 10, 0.06), 0 40px 70px -50px rgba(70, 50, 20, 0.55);
  rotate: -0.4deg;
}
.bo-proof-head { display: flex; gap: 24px; padding-bottom: 12px; border-bottom: 1px solid rgba(11, 11, 12, 0.25); font: 600 0.78rem var(--font); letter-spacing: 0.02em; opacity: 0.65; }
.bo-proof-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 18px; }
.bo-proof .it { padding: 0 clamp(12px, 1.8vw, 26px); border-left: 1px dashed rgba(11, 11, 12, 0.2); }
.bo-proof .it:first-child { padding-left: 0; border-left: 0; }
.bo-proof .it:last-child { padding-right: 0; }
.it-n { font-family: var(--bo-serif); font-style: italic; font-size: 1.5rem; opacity: 0.45; }
.bo-proof .it-stage { position: relative; aspect-ratio: 4 / 3; margin-top: 6px; padding: 8%; border-radius: 0; background: none; box-shadow: none; }
.it-mark { margin-top: 10px; font-family: var(--bo-serif); font-style: italic; font-size: 1.05rem; line-height: 1.3; color: #a35f00; }
.it-mark s { margin-left: 6px; text-decoration-thickness: 1.5px; }
.it-mark--ok::before { content: "✓ "; font-style: normal; }
.it-ring { position: absolute; left: 50%; top: 50%; width: 128px; height: 62px; translate: -50% -50%; border: 1.5px solid #c98a12; border-radius: 52% 46% 55% 47% / 58% 50% 47% 52%; rotate: -6deg; pointer-events: none; }
.it--2 .it-ring { width: 140px; rotate: 4deg; }
.it-air { position: absolute; inset: 14% 8% 14% 46%; border: 1.5px dashed #c98a12; border-radius: 4px; pointer-events: none; }
.bo-proof > .bo-cap { margin-top: 16px; }

@media (max-width: 999px) {
  .bo-annot-legend { display: block; }
  .bo-pin-label { display: none; }
  .bo-pin > span:not(.bo-pin-label) { display: block; font: 700 0.62rem/12px var(--font); color: var(--bo-white); text-align: center; }
  .bo-pin { width: 22px; height: 22px; margin: -11px 0 0 -11px; font-size: 0.62rem; }
  .bo-ando-text { margin-left: 0; }
}
@media (max-width: 700px) {
  .bo-sheet-row { grid-template-columns: 1fr 1fr; row-gap: 22px; }
  .bo-horizon { display: none; }
  .bo-proof { rotate: 0deg; }
  .bo-proof-row { grid-template-columns: 1fr 1fr; row-gap: 26px; }
  .bo-proof .it:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .bo-proof { rotate: 0deg; } }

.bo-pin-label em { display: inline-flex; gap: 8px; align-items: baseline; padding: 6px 10px 7px; background: rgba(247, 246, 241, 0.94); font-style: italic; box-shadow: 0 6px 18px -10px rgba(11, 11, 12, 0.35); }
.bo-proof .it { display: flex; flex-direction: column; }
.bo-proof .it-mark { margin-top: auto; padding-top: 10px; }

/* ---- 02 Braun T3: a portrait object, so the plate is narrower and centred ---- */
.bo-annot--t3 .bo-annot-frame { max-width: 520px; margin: 0 auto; }
.bo-annot--t3 .bo-annot-img { aspect-ratio: 790 / 1080; -webkit-mask-image: radial-gradient(ellipse 62% 60% at 50% 48%, #000 60%, transparent 100%); mask-image: radial-gradient(ellipse 62% 60% at 50% 48%, #000 60%, transparent 100%); }
.bo-annot--t3 .bo-annot-credit { max-width: 520px; margin: 14px auto 0; }
/* credits on dark grounds keep their own, lighter treatment */
.bo-ando .bo-credit { opacity: 0.6; }
.bo-cap .bo-credit { opacity: 0.85; }