/* fractalsplatform.com. Version 1 round 3 (2026-09-29 night): the round 2 walk, with the Fractals blend as the accent.
   The page is one walk through one building. Facade, stair, the mark, the table, the price, the compass, the city.
   Every photo bleeds to a page edge and shares its shape with its words. Photos stay plain black and white.
   Restraint: the page is vellum and photographs first. The blend (Ink Violet into Plum into Spiced Amber) is the one
   large colour area, the price band; elsewhere it appears only where an accent already was: numerals, thin lines,
   the mark stroke, the compass line, buttons, one faint dusk at the close.
   Light is the default; dark follows the visitor's system until they pick, then data-theme on <html>.
   Every colour is a custom property on :root, so a later version swaps the palette in one place.
   Palette: Vellum #F8F6F2, Obsidian #1F1D1C, Ink Violet #3E2A72, Plum #7B2F72, Spiced Amber #D27A2E, Bone #DED9D1. */

:root {
  --vellum: #F8F6F2;
  --obsidian: #1F1D1C;
  --violet: #3E2A72;
  --plum: #7B2F72;
  --amber: #D27A2E;
  --bone: #DED9D1;

  /* the three stops of the blend; dark mode lifts them so they read on obsidian */
  --g1: var(--violet);
  --g2: var(--plum);
  --g3: var(--amber);
  --g4-text: #A0561B;
  --blend: linear-gradient(170deg, var(--violet) 0%, var(--plum) 55%, #B0572F 100%);
  --blend-h: linear-gradient(90deg, var(--g1) 0%, var(--g2) 50%, var(--g3) 100%);

  --bg: var(--vellum);
  --ink: var(--obsidian);
  --ink-2: #4A4540;
  --ink-3: #736D66;
  --line: var(--bone);
  --line-2: #CDC6BC;
  --label: var(--violet);
  --num: var(--plum);
  --accent: var(--plum);
  --mark: var(--violet);
  --field: #A8A197;

  /* one tone grade for every photo: the black and white warmed toward the vellum */
  --ph: var(--bone);
  --photo-filter: grayscale(1) contrast(.96) brightness(.98);
  --dusk: linear-gradient(to bottom, transparent 10%, rgba(123, 47, 114, .05) 30%, rgba(210, 122, 46, .07) 46%, transparent 60%);
  --fade-from: var(--vellum);

  --panel: var(--blend);
  --panel-ink: #FFFFFF;
  --panel-ink-2: rgba(255, 255, 255, .88);
  --panel-line: rgba(255, 255, 255, .3);
  --panel-accent: #FFFFFF;

  --action: linear-gradient(100deg, var(--violet) 0%, var(--plum) 100%);
  --action-ink: var(--vellum);

  --serif: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  /* the type scale: one step between each, nothing shouts; 15px is the floor */
  --fs-h1: clamp(38px, 4.5vw, 60px);
  --fs-pain: clamp(20px, 1.75vw, 24px);
  --fs-stmt: clamp(22px, 1.95vw, 28px);
  --fs-read: clamp(17px, 1.3vw, 19px);
  --fs-note: 15px;
  --fs-label: 15px;
  --fs-num: 15px;

  /* the page edges */
  --edge: 20px;
  --wrap-left: max(var(--edge), calc((100vw - 1280px) / 2 + var(--edge)));
  --lift: 48px;
  --inset: 28px;
  --step: 0px;

  color-scheme: light;
}

/* One light version only (her ruling of 2026-09-29, 21:10 PDT). The dark theme and the toggle are retired. */


/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }

h1, h2, h3 { text-wrap: balance; font-weight: 400; }
p, li, figcaption { text-wrap: pretty; }

.nw { white-space: nowrap; }

.wrap {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-left: var(--edge);
  padding-right: var(--edge);
}

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
[hidden] { display: none !important; }

/* small labels: section names, group names, footer nav. Sentence case, never shouting. */
.lab {
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.4;
  color: var(--label);
}

.num {
  display: block;
  font-family: var(--serif);
  font-size: var(--fs-num);
  letter-spacing: .06em;
  line-height: 1.4;
  color: var(--num);
}

.sec-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 28px;
}
.sec-head .num { display: inline-block; }
.sec-head .lab::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 24px; height: 1px;
  margin: 0 14px 3px 0;
  background: var(--blend-h);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 28px;
  background: var(--action);
  color: var(--action-ink);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.2;
  border: 0;
  border-radius: 0;
}
.btn:hover { filter: brightness(1.12); }
.btn:disabled { opacity: .6; cursor: default; }

.link {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--label);
  padding: 4px 0;
  background: var(--blend-h) no-repeat left bottom / 100% 1px;
  line-height: 1.3;
}

/* ---------- header ---------- */

/* the header carries the blend quietly: a slim band at the very top, and its rule drawn in the blend */
.top { position: sticky; top: 0; z-index: 20; background: var(--bg); }
.top::after {
  content: "";
  position: absolute;
  left: var(--edge); right: var(--edge); bottom: 0;
  height: 1px;
  background: var(--blend-h);
}
.top .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand .mark { width: 28px; height: 28px; color: var(--mark); display: block; }
.brand .word {
  font-family: var(--serif);
  font-size: 21px;
  letter-spacing: .02em;
  color: var(--ink);
  line-height: 1;
  padding-top: 2px;
}
.top-act { display: flex; align-items: center; gap: 28px; }
.top-link, .theme-toggle {
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--label);
  padding: 8px 0;
  border-bottom: 1px solid transparent;
  line-height: 1.2;
}
.top-link:hover { border-bottom-color: var(--label); }
.theme-toggle { display: none !important; }

/* ---------- photos: one series, one grade, always to a page edge ---------- */

.ph {
  position: relative;
  background: var(--ph);
  overflow: hidden;
  width: 100%;
  height: 300px;
}
.ph img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
  filter: var(--photo-filter);
}
[data-photo="facade-daylight"] img { object-position: 50% 55%; }
[data-photo="interior-stair"] img { object-position: 50% 62%; }
[data-photo="interior-table"] img { object-position: 50% 62%; }
[data-photo="drafting-compass"] img { object-position: 50% 78%; }
[data-photo="city-la"] img { object-position: 50% 100%; }

/* ---------- a panel rides up over its photo, so each section is one piece ---------- */

.panel { position: relative; z-index: 1; background: var(--bg); }
.lift-l { margin-top: calc(-1 * var(--lift)); margin-right: var(--inset); padding: 28px var(--edge) 0; }
.lift-r { margin-top: calc(-1 * var(--lift)); margin-left: var(--inset); padding: 28px var(--edge) 0 var(--edge); }

/* the reading type */
.stmt {
  font-family: var(--serif);
  font-size: var(--fs-stmt);
  line-height: 1.3;
  letter-spacing: -.004em;
  color: var(--ink);
}
.rows { margin-top: 26px; }
.rows li {
  font-family: var(--serif);
  font-size: var(--fs-read);
  line-height: 1.5;
  color: var(--ink);
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.rows li:last-child { padding-bottom: 0; }
.note {
  display: block;
  margin-top: 8px;
  font-family: var(--sans);
  font-size: var(--fs-note);
  line-height: 1.6;
  color: var(--ink-3);
}

/* ---------- hero: outside the building ---------- */

.s-hero { position: relative; overflow: hidden; padding-bottom: 64px; }
.hero-ph { height: 300px; }
[data-photo="facade-daylight"] { height: 300px; }
.hero-panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100vw;
  height: 1px;
  background: var(--blend-h);
}
h1 {
  font-family: var(--serif);
  font-size: var(--fs-h1);
  line-height: 1.08;
  letter-spacing: -.016em;
  color: var(--ink);
  max-width: 13em;
}
.pain {
  margin-top: 18px;
  font-family: var(--serif);
  font-size: var(--fs-pain);
  line-height: 1.35;
  color: var(--ink);
  max-width: 24em;
}
.turn {
  margin-top: 28px;
  font-family: var(--serif);
  font-size: var(--fs-read);
  line-height: 1.55;
  font-weight: 300;
  color: var(--ink-2);
  max-width: 30em;
}
.relief {
  font-family: var(--serif);
  font-size: var(--fs-read);
  line-height: 1.55;
  color: var(--ink);
  margin-top: 6px;
}
.hero-act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 28px;
}

/* ---------- 01, the stair: the four moments on one card laid over it ---------- */

.s-stairs { position: relative; overflow: hidden; padding-bottom: 72px; }
.stair-ph { height: 320px; }
.moments li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 8px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.moments li:first-child { border-top: 0; padding-top: 4px; }
.moments li:last-child { padding-bottom: 0; }
.mn {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--num);
}
.moments li:nth-child(1) .mn { color: var(--g1); }
.moments li:nth-child(2) .mn, .moments li:nth-child(3) .mn { color: var(--g2); }
.moments li:nth-child(4) .mn { color: var(--g4-text); }
.moments p {
  font-family: var(--serif);
  font-size: var(--fs-read);
  line-height: 1.5;
  color: var(--ink);
}

/* ---------- 02, the mark: the connection, drawn as the mark itself ---------- */

.s-mark { padding: 72px 0; }
.mark-grid { display: flex; flex-direction: column; gap: 24px; }
.mark-fig { margin: 0 calc(-1 * var(--edge)); padding: 34px 0; }
.mark-box { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 440px; margin: 0 auto; }
.mark-big { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mk-ring, .mk-arc, .mk-core { fill: none; stroke: url(#mk-blend); }
.g1 { stop-color: var(--g1); }
.g2 { stop-color: var(--g2); }
.g3 { stop-color: var(--g3); }
.mk-ring { stroke-width: 1.4; }
.mk-arc { stroke-width: 1; }
.mk-core { stroke-width: 1; }
.mk-centre { fill: var(--g2); }
.mk-pt-1 { fill: var(--g1); }
.mk-pt-2 { fill: var(--g2); }
.mk-pt-3 { fill: var(--g3); }
.mk {
  position: absolute;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.25;
  color: var(--ink);
  white-space: nowrap;
}
.mk-n { left: 50%; top: 6%; transform: translate(-50%, calc(-100% - 12px)); }
.mk-s { left: 50%; top: 94%; transform: translate(-50%, 12px); }
.mk-e, .mk-w { top: 50%; font-size: 15px; }
.mk-e { left: 94%; transform: translate(7px, -50%); }
.mk-w { left: 6%; transform: translate(calc(-100% - 7px), -50%); }
.mark-fig .mark-box { width: calc(100% - 226px); }

/* ---------- 03, the table: the words laid on it like a card ---------- */

.s-table { position: relative; overflow: hidden; padding-bottom: 72px; }
.table-ph { height: 260px; }
.table-card::before, .stair-card::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 100vw;
  height: 1px;
  background: var(--blend-h);
}

/* ---------- 04, the launch offer, the one band in the blend ---------- */

.s-offer {
  background: var(--panel);
  background-color: var(--violet);
  color: var(--panel-ink);
  padding: 64px 0 72px;
}
.s-offer .num { color: var(--panel-accent); }
.s-offer .lab { color: var(--panel-ink-2); }
.s-offer .sec-head .lab::before { background: var(--panel-accent); opacity: .7; }
.s-offer .btn { background: var(--vellum); color: var(--violet); }
.offer-grid { display: grid; grid-template-columns: 1fr; gap: 48px; }
.s-offer h2 {
  font-family: var(--serif);
  font-size: var(--fs-stmt);
  line-height: 1.25;
  color: var(--panel-ink);
}
.figs { display: grid; grid-template-columns: 1fr 1fr; margin-top: 32px; }
.fig {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 0 0;
  border-top: 1px solid var(--panel-line);
}
.fig + .fig { padding-left: 24px; border-left: 1px solid var(--panel-line); }
.fig-n {
  font-family: var(--serif);
  font-size: clamp(38px, 3.9vw, 54px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--panel-ink);
}
.fig-l {
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: .01em;
  color: var(--panel-ink-2);
}
.offer-act { margin-top: 40px; }

.get-lab { margin-bottom: 4px; }
.rows-panel { margin-top: 14px; }
.rows-panel li { color: var(--panel-ink); border-top-color: var(--panel-line); }
.rows-panel li:last-child { padding-bottom: 18px; border-bottom: 1px solid var(--panel-line); }

/* ---------- 05, the compass: its line becomes the line the editions stand on ---------- */

.s-eds { position: relative; overflow: hidden; padding-bottom: 72px; }
.eds-ph { height: 340px; }
.eds-arc { display: none; }
/* the platform in one short paragraph, then the four editions as one family */
.eds-intro {
  max-width: 34em;
  font-family: var(--serif);
  font-size: var(--fs-read);
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 28px;
}
.eds-intro + .eds-intro { margin-top: -14px; }
.re-date { margin-top: 8px; }
.re-terms { margin-top: 8px; }
/* the quiet line under every primary Sign up button */
.btn-note { margin-top: 12px; font-family: var(--sans); font-size: 15px; line-height: 1.5; color: var(--ink-3); }
.hero-act + .btn-note { margin-top: 14px; }
.s-offer .btn-note { color: var(--panel-ink-2); }
.eds { display: grid; grid-template-columns: 1fr; }
.eds > li {
  padding: 18px 0 20px;
  border-top: 1px solid var(--line);
}
.eds > li:last-child { border-bottom: 1px solid var(--line); }
.eds h3 {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -.004em;
  color: var(--ink);
}
.eds h3::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 7px; height: 7px;
  margin: 0 12px 4px 0;
  border-radius: 50%;
  background: var(--g2);
}
.eds > li:nth-child(1) h3::before { background: var(--g1); }
.eds > li:nth-child(4) h3::before { background: var(--g3); }
.eds > li p {
  margin-top: 6px;
  padding-left: 19px;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-2);
}
.eds-close {
  margin-top: 22px;
  font-family: var(--sans);
  font-size: var(--fs-note);
  line-height: 1.6;
  color: var(--ink-3);
}

/* ---------- the close: the city is the ground the walk ends on ---------- */

.s-close { position: relative; display: flex; flex-direction: column-reverse; }
.close-ph { height: 300px; }
.close-ph::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, var(--fade-from) 0%, transparent 42%), var(--dusk);
  pointer-events: none;
}
.close-in { margin-bottom: -40px; padding: 56px var(--edge) 32px; background: transparent; text-align: left; }
.close-line {
  font-family: var(--serif);
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.12;
  letter-spacing: -.012em;
  color: var(--ink);
}
.close-act { margin-top: 28px; }
.close-over { position: relative; z-index: 1; order: 2; padding: 0 var(--edge) 28px; }
.s-close .close-form { order: 1; }
.close-form { margin: 0 var(--inset) -48px 0; padding: 40px var(--edge) 36px; background: var(--bg); }

/* sign up, the form */
.re-grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; }
.s-close h2, .s-page h1, .s-page h2 {
  font-family: var(--serif);
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.12;
  letter-spacing: -.012em;
  color: var(--ink);
}
.s-close h2 { font-size: var(--fs-stmt); line-height: 1.25; max-width: 14em; }
.re-note {
  margin-top: 14px;
  font-family: var(--serif);
  font-size: var(--fs-read);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 420px;
}
form { display: grid; gap: 22px; max-width: 560px; }
.field { display: grid; gap: 6px; }
.field label {
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--label);
}
.field input, .field select, .field textarea {
  width: 100%;
  font: 400 17px/1.4 var(--sans);
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--field);
  border-radius: 0;
  padding: 4px 0 10px;
  min-height: 44px;
  appearance: none;
}
.field select {
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 14px) 55%, calc(100% - 8px) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 32px;
}
.field select option { color: var(--obsidian); background: var(--vellum); }
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom: 1px solid var(--accent); box-shadow: 0 1px 0 var(--accent); }
.trap { display: none; }
form .btn { margin-top: 6px; }
.form-note {
  margin-top: 24px;
  font-family: var(--serif);
  font-size: var(--fs-read);
  line-height: 1.45;
  color: var(--ink);
  border-left: 1px solid var(--accent);
  padding-left: 16px;
  max-width: 560px;
}

/* the simple pages: contact, privacy, thank you */
.s-page { position: relative; }
.s.s-page { padding: 64px 0 88px; min-height: calc(100svh - 68px - 240px); }
.prose { max-width: 620px; margin-top: 24px; display: grid; gap: 14px; }
.prose p {
  font-family: var(--serif);
  font-size: var(--fs-read);
  line-height: 1.55;
  color: var(--ink);
}
.prose a { border-bottom: 1px solid var(--accent); }
.back { display: inline-block; margin-top: 40px; }
.s-page .re-grid { gap: 36px; }
.s-page .re-note { font-size: var(--fs-read); }

/* footer */
.foot { position: relative; z-index: 2; background: var(--bg); padding: 56px 0 48px; }
.foot .wrap { display: grid; grid-template-columns: 1fr; gap: 28px; }
.foot-brand { display: flex; align-items: center; gap: 14px; }
.foot-brand .mark { width: 24px; height: 24px; color: var(--mark); flex: 0 0 24px; }
.foot p { font-size: 15px; line-height: 1.6; color: var(--ink-3); }
.foot-nav { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; }
.foot-nav a { border-bottom: 1px solid transparent; padding-bottom: 2px; }
.foot-nav a:hover { border-bottom-color: var(--label); }
.foot-year { color: var(--ink-3); }

/* ---------- widths ---------- */

@media (min-width: 768px) {
  :root { --edge: 40px; --lift: 64px; --inset: 72px; --step: 28px; }
  .ph, .hero-ph, [data-photo="facade-daylight"] { height: 420px; }
  .stair-ph, .eds-ph { height: 460px; }
  .table-ph { height: 400px; }
  .close-ph { height: 420px; }
  .lift-l, .lift-r { padding-top: 40px; }
  .mark-fig { margin: 0; padding: 40px 130px; }
  .mark-fig .mark-box { width: 100%; }
  .mk-e, .mk-w { font-size: 17px; }
  .mk-e { transform: translate(12px, -50%); }
  .mk-w { transform: translate(calc(-100% - 12px), -50%); }
  .offer-grid { grid-template-columns: 5fr 7fr; gap: 56px; align-items: stretch; }
  .offer-main { display: flex; flex-direction: column; }
  .offer-act { margin-top: auto; padding-top: 40px; }
  .figs { grid-template-columns: 1fr; }
  .fig { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 24px; padding: 26px 0 22px; }
  .fig + .fig { padding-left: 0; border-left: 0; }
  .fig:last-child { border-bottom: 1px solid var(--panel-line); }
  .s-offer { padding: 88px 0 96px; }
  .eds > li { grid-template-columns: 150px 1fr; }
  .re-grid { grid-template-columns: 5fr 7fr; gap: 48px; }
  .foot .wrap { grid-template-columns: 1fr auto; align-items: center; }
}

/* the composition: from here every photo and its words share one shape */
@media (min-width: 960px) {
  /* hero: the facade runs off the right edge, full height; the words are laid across its edge */
  .s-hero { display: flex; align-items: center; min-height: 680px; padding: 96px 0; }
  .hero-ph, [data-photo="facade-daylight"] { position: absolute; top: 0; bottom: 0; right: 0; width: 46vw; height: auto; }
  .hero-panel {
    margin: 0 0 0 var(--wrap-left);
    width: calc(54vw + 128px - var(--wrap-left));
    padding: 56px 64px 60px 0;
  }
  .hero-panel h1 { font-size: clamp(52px, 5.2vw, 70px); max-width: none; }
  .hero-panel::before { left: calc(-1 * var(--wrap-left)); }
  .hero-panel::after {
    content: "";
    position: absolute;
    bottom: 0; left: calc(-1 * var(--wrap-left));
    width: 100vw;
    height: 1px;
    background: var(--blend-h);
  }

  /* 01: the stair runs off the left edge, full height; the four moments sit on one card laid over its edge */
  .s-stairs { display: flex; align-items: center; min-height: 760px; padding: 104px 0; margin-top: 120px; }
  .stair-ph { position: absolute; top: 0; bottom: 0; left: 0; width: 44vw; height: auto; }
  .stair-card {
    margin: 0 var(--wrap-left) 0 calc(44vw - 128px);
    padding: 48px 56px 44px;
    flex: 1;
    max-width: 720px;
  }
  .moments li { grid-template-columns: 56px 1fr; padding: 20px 0; }

  /* 02: the mark, large, on the right of the walk */
  .s-mark { padding: 120px 0; }
  .mark-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; }
  .mark-fig { padding: 44px 140px; }

  /* 03: the table runs edge to edge; the card sits on its lower part */
  .s-table { padding: 0; }
  .table-ph { height: 760px; }
  [data-photo="interior-table"] img { object-position: 50% 40%; }
  .table-card {
    position: absolute;
    right: var(--wrap-left);
    bottom: 72px;
    width: min(660px, 54vw);
    margin: 0;
    padding: 52px 60px 52px;
  }
  .table-card .rows li { font-size: 20px; line-height: 1.6; padding: 20px 0; }
  .table-card .stmt { font-size: 30px; line-height: 1.28; }
  .table-card .note { font-size: 15px; }

  .s-offer { padding: 104px 0 112px; }
  .offer-grid { gap: 96px; }

  /* the close: the city is the ground; the fade comes down from the page into the sky */
  .s-close { display: block; min-height: 640px; padding: 128px 0 0; }
  .close-ph { position: absolute; inset: 0; height: auto; }
  .close-ph img { object-position: 50% 62%; }
  .close-ph::before { background: linear-gradient(to bottom, var(--fade-from) 0%, var(--fade-from) 14%, transparent 50%, transparent 82%, var(--fade-from) 100%), var(--dusk); }
  .close-in { margin: 0 0 0 var(--wrap-left); padding: 0; background: transparent; max-width: 720px; }
  .close-form {
    margin: 0 0 0 var(--wrap-left);
    padding: 48px 56px 48px;
    background: var(--bg);
    max-width: 920px;
    width: calc(100vw - 2 * var(--wrap-left));
  }
  .s-close-form { padding: 96px 0 200px; }
  .close-over { margin: 0 0 0 var(--wrap-left); padding: 0 0 32px; }
  .foot { padding: 64px 0 56px; }
}

/* the compass composition needs the width to keep its drawn line true */
@media (min-width: 1120px) {
  /* 05: the compass runs off the left edge, full height; its drawn line becomes the editions' ground line */
  .s-eds { height: 880px; padding: 0; }
  .eds-ph { position: absolute; top: 0; left: 0; width: 460px; height: 880px; }
  [data-photo="drafting-compass"] img { object-position: 50% 50%; }
  .eds-arc { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
  .eds-arc path { fill: none; stroke-width: 1.4; }
  .eds-panel {
    position: absolute;
    top: 0; bottom: 0;
    left: 540px; right: var(--wrap-left);
    margin: 0;
    padding: 104px 0 calc(880px * .17801 + 28px);
    background: transparent;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  .eds { grid-template-columns: 1fr 1fr; column-gap: 48px; }
  .eds > li:nth-last-child(2) { border-bottom: 1px solid var(--line); }
  .eds-close { position: absolute; left: 0; top: calc(100% - 880px * .17801 + 22px); margin: 0; }

}

@media (min-width: 1024px) {
  .s.s-page { padding: 96px 0 120px; }
}

@media (min-width: 1280px) {
  :root { --edge: 48px; }
}

@media (prefers-reduced-motion: no-preference) {
  .theme-toggle, .top-link, .foot-nav a { transition: border-color .2s ease; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- round 7: one grid for every photo and card (desktop) ----------
   Two shared vertical lines: the card line (the facade, the stair card and the table card start on it) and the
   crossing line 128px to its right (the hero panel and the stair end on it). Each box crosses its photo by the same 128px,
   and each photo runs 80 to 88px past its box top and bottom, so the box visibly crosses into the photo
   and its blend rules run on across it. */
@media (min-width: 960px) {
  :root {
    --photo-l: min(460px, 44vw);
    --card-w: min(660px, 54vw);
    --card-line: calc(100vw - var(--wrap-left) - var(--card-w));
    --cross: 128px;
  }

  /* hero: the facade starts on the card line and is exactly as tall as the panel */
  .s-hero { display: block; min-height: 0; padding: 88px 0; }
  .hero-ph, [data-photo="facade-daylight"] { top: 0; bottom: 0; left: var(--card-line); right: 0; width: auto; }
  .hero-panel { width: calc(var(--card-line) + var(--cross) - var(--wrap-left)); padding: 64px 64px 68px 0; }

  /* 01: the mirror of the hero: the stair card starts on the card line, the stair ends where the hero panel ends,
     and the stair is exactly as tall as its card; the card is the table card's size */
  .s-stairs { display: block; min-height: 0; margin-top: 96px; padding: 80px 0; }
  .stair-ph { top: 0; bottom: 0; width: calc(var(--card-line) + var(--cross)); }
  .stair-card {
    margin: 0 0 0 var(--card-line);
    width: var(--card-w);
    max-width: none;
    padding: 52px 60px 52px;
  }
  .stair-card::after {
    content: "";
    position: absolute;
    bottom: 0; right: 0;
    width: 100vw;
    height: 1px;
    background: var(--blend-h);
  }

  /* 03: the table card starts on the card line */
  .table-card { width: var(--card-w); right: var(--wrap-left); }
}

/* ---------- round 8: one line system ----------
   One line: 1px, the blend, full viewport width, exactly one at every section boundary.
   Space is equal above and below each line; photos bleed to the line they touch.
   Cards carry no rules of their own; the page's only full width lines are the boundaries. */
.top::after { left: 0; right: 0; }
.hero-panel::before, .hero-panel::after, .stair-card::before, .stair-card::after, .table-card::before { display: none !important; }
.s-stairs, .s-mark, .s-table, .s-offer, .s-eds, .s-close, .foot {
  border-top: 1px solid transparent;
  border-image: var(--blend-h) 1;
}
[id] { scroll-margin-top: 68px; }
.s-hero { padding-bottom: 72px; }
.s-stairs { padding-bottom: 72px; }
.s-mark { padding: 72px 0; }
.s-table { padding-bottom: 72px; }
.s-offer { padding: 72px 0; }
.s-eds { padding-bottom: 72px; }
.foot { padding: 48px 0; }
.foot-lines p + p { margin-top: 2px; }
.btn-note { font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.btn-note span { display: block; }
.s-offer .btn-note { color: var(--panel-ink-2); }

@media (min-width: 960px) {
  /* the seam: the facade starts where the stair ends, so the two photos meet at one point on the line */
  :root { --seam: calc(var(--card-line) + var(--cross)); }
  .s-hero { padding: 88px 0; }
  .hero-ph, [data-photo="facade-daylight"] { top: 0; bottom: 0; left: var(--seam); }
  .hero-panel { width: calc(var(--seam) + var(--cross) - var(--wrap-left)); }
  .s-stairs { margin-top: 0; padding: 88px 0; }
  .stair-ph { top: 0; bottom: 0; width: var(--seam); }
  .s-mark { padding: 104px 0; }
  .s-table { padding: 0; }
  .s-offer { padding: 104px 0; }
  .s-eds { padding: 0; }
  .foot { padding: 56px 0; }
}

/* ---------- round 9: the crossing, designed in ----------
   The rule: every photo is a whole rectangle that bleeds to a page edge and runs boundary to boundary.
   Every card is a whole rectangle too: square corners, a 1px grey keyline on all four sides, vellum inside.
   The card is laid ON the photo, never cut out of it. It crosses the photo's edge by one module (128px)
   and sits one module (88px) inside the section's top and bottom lines. Card edges sit on the grid:
   the wrap (48 at 1280), the card line (572), the seam (700) and the seam plus 128 (828).
   Lines: every section boundary is one thin grey line; the header keeps the blend; the price band
   and the compass line keep the blend. */
:root { --rule: #CDC6BC; --row: 88px; }

.s-stairs, .s-mark, .s-table, .s-eds, .s-close, .foot { border-top: 1px solid var(--rule); border-image: none; }
/* the price band is its own boundary: no second line on either of its edges */
.s-offer, .s-offer + .s-eds { border-top: 0; border-image: none; }

/* editions: one even pair of lines each */
.eds > li p { font-size: 16px; text-wrap: balance; }

/* below the composition width: every card sits flush under its photo, full width, no slivers */
@media (max-width: 959.98px) {
  .lift-l, .lift-r { margin: 0; padding-top: 36px; }
  .close-form { margin: 0; }
  .s-close-form .close-over { padding-top: 56px; }
}

/* the price band: both columns keep one row rhythm, so their lines line up */
@media (min-width: 768px) {
  .s-offer h2, .s-offer .get-lab { height: 60px; margin: 0; }
  .s-offer .get-lab { line-height: calc(var(--fs-stmt) * 1.25); }
  .figs, .rows-panel { margin-top: 24px; }
  .fig { min-height: calc(var(--row) + 1px); padding: 0; flex-wrap: wrap; align-content: center; }
  .rows-panel li { padding: calc((var(--row) - 1.5em) / 2) 0; }
  .rows-panel li:last-child { padding-bottom: calc((var(--row) - 1.5em) / 2); }
}
@media (min-width: 1024px) {
  .s-offer h2, .s-offer .get-lab { height: calc(var(--fs-stmt) * 1.25); }
  .figs, .rows-panel { margin-top: 32px; }
}

@media (min-width: 960px) {
  :root { --inset-y: 88px; --pad: 60px; }

  /* every card: a whole rectangle with its own keyline */
  .hero-panel, .stair-card, .table-card, .close-form { border: 1px solid var(--rule); }

  /* hero: the card runs from the wrap to the seam plus 128; its words sit one pad inside */
  .s-hero { padding: var(--inset-y) 0; }
  .hero-panel { padding: 60px var(--pad) 64px; }

  /* 01: the stair card runs from the card line to the wrap */
  .s-stairs { padding: var(--inset-y) 0; }
  .stair-card { padding: 52px var(--pad); }

  /* 03: the table runs edge to edge and boundary to boundary; the card floats one module inside it */
  .s-table { padding: var(--inset-y) 0; }
  .s-table .table-ph { position: absolute; inset: 0; height: auto; }
  .table-card { position: relative; right: auto; bottom: auto; margin: 0 0 0 var(--card-line); width: var(--card-w); padding: 52px var(--pad); }

  /* sign up: the skyline is a band at the foot; the form card crosses into it by one module */
  .s-close-form { --city-h: 560px; padding: 96px 0 calc(var(--city-h) - var(--cross)); }
  .s-close-form .close-ph { inset: auto 0 0 0; height: var(--city-h); }
  .s-close-form .close-ph img { object-position: 50% 58%; }
  .s-close-form .close-ph::before { background: linear-gradient(to bottom, var(--fade-from) 0%, transparent 34%, transparent 86%, var(--fade-from) 100%), var(--dusk); }
  .s-close-form .close-form { width: calc(var(--seam) + var(--cross) - var(--wrap-left)); max-width: none; padding: 48px var(--pad); position: relative; z-index: 2; }
}

/* 05: one line under the editions, the compass line; the closing note sits with them; even space above and below */
@media (min-width: 1120px) {
  .eds > li:last-child, .eds > li:nth-last-child(2) { border-bottom: 0; }
  .eds { column-gap: 40px; }
  .eds > li { padding: 27px 0 29px; }
  .eds-panel { padding: calc(880px * .17801) 0 calc(880px * .17801 + 22px); }
  .eds-close { position: static; margin-top: 18px; }
}

/* ---------- round 11: the last pass ----------
   Header navigation, the hero label, the price notes, the smaller second line under Sign up,
   the pinned skyline and the one line footer. Everything of round 9 A above stays as it is. */

/* header navigation: quiet, the header Sign up's own type; hidden on a phone, no script */
.top-nav { display: none; }
.top-link { white-space: nowrap; }
@media (min-width: 768px) {
  .top-act { gap: 14px; }
  .top-nav { display: flex; align-items: center; gap: 14px; }
}
@media (min-width: 1024px) {
  .top-act, .top-nav { gap: 28px; }
}

/* hero: who we speak to, as a section label above the headline */
.hero-lab { margin-bottom: 22px; }
.hero-lab .lab { text-wrap: balance; }

/* the second line under every Sign up, one step smaller */
.btn-note span + span { font-size: 15px; }

/* price band: the lock and the referral as small notes under the numbers; the Sign up lifts */
.fig-notes { margin-top: 20px; display: grid; gap: 6px; }
.fig-notes p { font-family: var(--sans); font-size: 15px; line-height: 1.5; color: var(--panel-ink-2); }
@media (min-width: 768px) {
  .offer-act { margin-top: 0; padding-top: 32px; }
}
/* from 1024 the band squares: a 96px row, the notes on one line each, and the Sign up with its two
   quiet lines beside it, pushed down so its foot meets the foot of the list */
@media (min-width: 1024px) {
  .s-offer { --row: 96px; }
  .offer-grid { grid-template-columns: 11fr 12fr; gap: 80px; }
  .fig-notes { margin-top: 12px; gap: 4px; }
  .fig-notes p { line-height: 1.4; text-wrap: wrap; }
  .offer-act { margin-top: auto; padding-top: 16px; display: flex; align-items: center; gap: 20px; }
  .offer-act .btn-note { margin-top: 0; }
}

/* the close: the skyline crop is pinned. The photo box has a fixed height at each width band, and the
   picture inside it a fixed height and top, so its scale and place never follow the words. */
.close-ph img { inset: auto 0 auto 0; top: var(--city-top, 0px); width: 100%; height: var(--city-img, 300px); object-position: 50% 0; }
@media (min-width: 768px) and (max-width: 959.98px) {
  .close-ph { --city-top: -130px; --city-img: 640px; }
}
@media (min-width: 960px) {
  .s-close:not(.s-close-form) { height: 640px; min-height: 0; }
  .close-ph { --city-top: -120px; --city-img: 960px; }
  .s-close-form .close-ph { --city-top: -250px; --city-img: 960px; }
  .close-ph img, .s-close-form .close-ph img { object-position: 50% 0; }
}

/* footer: one line from 960 up, the mark beside "Fractals", Privacy and Contact right after the copyright */
.foot-brand { align-items: flex-start; }
.foot-brand .mark { margin-top: 1px; }
@media (min-width: 768px) {
  .foot .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 12px 32px; }
  .foot-brand { align-items: center; }
  .foot-brand .mark { margin-top: 0; }
  .foot-lines { display: flex; flex-wrap: wrap; gap: 0 32px; }
  .foot-lines p + p { margin-top: 0; }
}

/* round 12, her drawing of 2026-09-29 (R-2026-09-29-2333-landing-2.2 follow up): the brand line stays left with the mark;
   Privacy, Contact and then the copyright sit together on the right. The offer footnote carries the partner link. */
.note-link { color: var(--label); border-bottom: 1px solid currentColor; padding-bottom: 1px; }
@media (min-width: 768px) {
  .foot-brand, .foot-lines { display: contents; }
  .foot-brand .mark { order: 1; margin-right: -18px; }
  .foot-lines p:first-child { order: 2; }
  .foot-nav { order: 3; margin-left: auto; }
  .foot-lines p:last-child { order: 4; }
}