:root {
  color-scheme: dark;
  --soot: #101214;
  --bench: #1b1d1e;
  --chalk: #f0e8d8;
  --brass: #c8a45b;
  --teal: #437d78;
  --persimmon: #d46b4e;
  --aubergine: #67445d;
  --cork: #b99469;
  --clay: #b47b60;
  --line: rgb(240 232 216 / 20%);
  --wide: min(1240px, calc(100vw - 3rem));
  --display: Iowan Old Style, Palatino Linotype, Book Antiqua, Georgia, serif;
  --body: Avenir Next, Avenir, Inter, system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--soot); }
body { margin: 0; background: radial-gradient(circle at 50% -20%, rgb(200 164 91 / 16%), transparent 34rem), var(--soot); color: var(--chalk); font-family: var(--body); line-height: 1.62; }
img { display: block; width: 100%; max-width: 100%; background: #242224; }
a { color: var(--brass); text-underline-offset: .22em; }
a:hover { color: var(--persimmon); }
h1, h2 { font-family: var(--display); font-weight: 500; letter-spacing: -.045em; line-height: .97; text-wrap: balance; }
h1 { margin: 0; font-size: clamp(4.2rem, 12vw, 11.5rem); }
h2 { margin: 0 0 1.2rem; font-size: clamp(3rem, 7vw, 6.8rem); }
p { margin-block: 0 1rem; }
.skip { position: fixed; z-index: 100; top: 1rem; left: 1rem; padding: .75rem 1rem; background: var(--chalk); color: var(--soot); transform: translateY(-180%); }
.skip:focus { transform: none; }
.maker-line { display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); font-size: .76rem; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow, .phase { color: var(--brass); font-size: .72rem; font-weight: 900; letter-spacing: .22em; text-transform: uppercase; }
.lead { max-width: 48rem; font-size: clamp(1.1rem, 2.1vw, 1.5rem); }

.ceiling { position: relative; min-height: 120svh; width: var(--wide); margin-inline: auto; padding: 1.5rem 0 8rem; display: grid; grid-template-columns: 1fr .82fr; gap: clamp(2rem, 7vw, 7rem); align-items: center; }
.ceiling::before { content: ""; position: absolute; left: 58%; top: 0; height: 32%; width: 2px; background: linear-gradient(var(--brass), var(--cork)); }
.ceiling .maker-line { grid-column: 1 / -1; align-self: start; }
.ceiling-copy { align-self: center; padding-top: 5rem; }
.ceiling-copy h1 { font-size: clamp(5rem, 12vw, 11rem); }
.ceiling-copy .lead { margin-top: 2rem; }
.ceiling-weight { margin: 10rem 0 0; position: relative; }
.ceiling-weight::before { content: ""; position: absolute; z-index: 2; left: 50%; top: -10rem; width: 2px; height: 10rem; background: var(--cork); }
.ceiling-weight img { aspect-ratio: .76; object-fit: cover; border-radius: 48% 48% 2.5rem 2.5rem; box-shadow: 0 2rem 8rem rgb(0 0 0 / 45%); }
figcaption { margin-top: .7rem; color: rgb(240 232 216 / 62%); font-size: .78rem; }
.org-thread { grid-column: 1 / -1; max-width: 52rem; justify-self: end; color: rgb(240 232 216 / 62%); font-size: .86rem; text-align: right; }

.cord-spine { position: relative; width: var(--wide); margin-inline: auto; padding-bottom: 5rem; }
.cord-spine::before { content: ""; position: absolute; z-index: 0; left: 50%; top: 0; bottom: 0; width: 2px; background: repeating-linear-gradient(to bottom, var(--cork) 0 18px, transparent 18px 26px); opacity: .75; }
.drop { position: relative; z-index: 1; min-height: 100svh; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 8vw, 8rem); align-items: center; padding-block: clamp(6rem, 13vw, 12rem); }
.drop::before { content: ""; position: absolute; left: calc(50% - .55rem); top: 10%; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--brass); box-shadow: 0 0 0 .5rem var(--soot), 0 0 0 .58rem var(--brass); }
.drop-copy { max-width: 36rem; }
.drop-copy > p:not(.phase) { font-size: 1.1rem; }
.drop-adjust .drop-copy, .drop-carry .drop-copy { order: 2; }
.phase-anchor { margin: 0; position: relative; }
.phase-anchor::before { content: ""; position: absolute; right: -4rem; top: 18%; width: 4rem; height: 2px; background: var(--brass); }
.drop-adjust .phase-anchor::before, .drop-carry .phase-anchor::before { left: auto; right: -4rem; }
.phase-anchor img { aspect-ratio: .78; object-fit: cover; border-radius: 48% 48% 2rem 2rem; }
.reach-anchor::before { right: auto; left: -4rem; }
.drop-copy blockquote { margin: 2rem 0 0; padding-left: 1.5rem; border-left: .45rem solid var(--persimmon); color: var(--brass); font-family: var(--display); font-size: clamp(1.6rem, 3.2vw, 2.8rem); line-height: 1.08; }

.pendant-set { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(.7rem, 2vw, 1.5rem); margin-top: 2rem; }
.pendant-set figure { margin: 0; position: relative; padding-top: 3.2rem; }
.pendant-set figure::before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 3.2rem; background: var(--cork); }
.pendant-set figure:nth-child(2), .pendant-set figure:nth-child(4) { transform: translateY(3.5rem); }
.pendant-set img { aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 1px solid rgb(200 164 91 / 42%); }
.pendant-adjust img { border-radius: 35% 55% 32% 58%; }
.pendant-reach img { border-radius: 58% 32% 55% 35%; }
.pendant-carry img { border-radius: 1.8rem .45rem 1.8rem .45rem; }

footer { width: var(--wide); margin-inline: auto; padding: 3rem 0 5rem; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 2rem; color: rgb(240 232 216 / 62%); }
footer p { max-width: 48rem; }
footer div { display: grid; gap: .6rem; text-align: right; }

/* Privacy disassembly bench */
.policy { background: #151617; }
.bench-head { width: var(--wide); margin-inline: auto; padding: 1.5rem 0 6rem; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: end; }
.bench-head .maker-line { grid-column: 1 / -1; }
.bench-head h1 { font-size: clamp(4rem, 8.5vw, 8rem); }
.bench-head > img { aspect-ratio: 1.72; object-fit: cover; border-radius: .5rem 4rem .5rem 4rem; }

.hardware-tray { width: min(1380px, calc(100vw - 2rem)); margin: 0 auto 5rem; padding: clamp(1.3rem, 3vw, 2.8rem); background: #222223; border: 2px solid var(--cork); border-radius: 1rem; box-shadow: inset 0 0 0 .5rem #191a1b; }
.hardware-tray > p { color: var(--brass); font-size: .72rem; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; }
.hardware-tray ol { margin: 0; padding: 0; list-style-position: inside; display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem 1.8rem; }
.hardware-tray li { padding: .55rem .7rem; background: #2c2c2d; border-radius: .4rem; color: var(--cork); font-variant-numeric: tabular-nums; }
.hardware-tray a { color: var(--chalk); font-weight: 650; }

.disassembly { width: min(1380px, calc(100vw - 2rem)); margin-inline: auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
.bench-label { grid-column: 1 / -1; margin: 6rem 0 0; padding: .8rem 0; border-top: 3px solid var(--brass); color: var(--brass); font-size: .72rem; font-weight: 900; letter-spacing: .22em; text-transform: uppercase; }
.policy-section { grid-column: span 4; padding: clamp(1.25rem, 3vw, 2.6rem); background: var(--bench); border-radius: .45rem; box-shadow: inset 0 0 0 1px var(--line); scroll-margin-top: 1.5rem; }
.policy-section.cork-note { grid-column: span 6; background: color-mix(in srgb, var(--cork) 16%, var(--bench)); border-radius: .45rem 3rem .45rem 3rem; }
.policy-section.rail-wide { grid-column: 1 / -1; border-top: .75rem solid var(--brass); }
.policy-section h2 { font-size: clamp(2.2rem, 4vw, 4rem); }
.policy-section p { max-width: 69ch; }
.topic { display: inline-block; margin-bottom: 1rem; color: var(--persimmon); font-size: .72rem; font-weight: 900; letter-spacing: .18em; }
.policy-section > img { margin-top: 1.5rem; aspect-ratio: 1; object-fit: cover; border-radius: 2.2rem .35rem 2.2rem .35rem; }
.sample-row { display: grid; gap: .75rem; margin-top: 1.5rem; }
.sample-row.three { grid-template-columns: repeat(3, 1fr); }
.sample-row.two { grid-template-columns: repeat(2, 1fr); }
.sample-row img { aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.split-rail { display: grid; grid-template-columns: 1.45fr 1fr .58fr; gap: clamp(1rem, 4vw, 4rem); align-items: center; }
.split-rail > img { margin: 0; }
.split-rail > img:first-child { aspect-ratio: 1.7; border-radius: .5rem 3rem .5rem 3rem; }
.cleared-bench { grid-column: 1 / -1; margin: 7rem 0 2rem; }
.cleared-bench img { aspect-ratio: 1.72; object-fit: cover; border-radius: 4rem .5rem 4rem .5rem; }
code { color: var(--brass); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.reveal-ready .drop-copy, .reveal-ready .phase-anchor, .reveal-ready .pendant-set figure, .reveal-ready .policy-section { opacity: 0; transform: translateY(1.4rem); transition: opacity .7s ease, transform .7s ease; }
.reveal-ready .is-visible { opacity: 1; transform: none; }

@media (max-width: 880px) {
  :root { --wide: min(100% - 2rem, 740px); }
  .ceiling, .drop, .bench-head { grid-template-columns: 1fr; }
  .ceiling { min-height: auto; }
  .ceiling::before { left: 50%; height: 22%; }
  .ceiling-weight { margin-top: 2rem; }
  .org-thread { text-align: left; justify-self: start; }
  .cord-spine::before { left: 1rem; }
  .drop { padding-left: 3rem; min-height: auto; }
  .drop::before { left: calc(1rem - .55rem); }
  .drop-copy, .drop-adjust .drop-copy, .drop-carry .drop-copy { order: initial; }
  .phase-anchor::before, .reach-anchor::before { left: -2rem; right: auto; width: 2rem; }
  .pendant-set { grid-template-columns: repeat(2, 1fr); }
  .hardware-tray ol { grid-template-columns: repeat(2, 1fr); }
  .policy-section { grid-column: span 6; }
  .split-rail { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .maker-line, footer { display: grid; }
  footer div { text-align: left; }
  .pendant-set { grid-template-columns: 1fr 1fr; }
  .hardware-tray ol { grid-template-columns: 1fr; }
  .policy-section, .policy-section.cork-note, .policy-section.rail-wide { grid-column: 1 / -1; }
  .sample-row.three { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .reveal-ready .drop-copy, .reveal-ready .phase-anchor, .reveal-ready .pendant-set figure, .reveal-ready .policy-section { opacity: 1; transform: none; }
}