/* ============================================================================
   Sightform. Page styles. The engine (scrollcraft.css / .js) is untouched:
   this file only re-themes its tokens and styles this page's own markup.
   Brand: Manrope, navy #14213D, amber #FCA311 as the only accent, brand grays.
   ========================================================================== */

@font-face {
  font-family: "Manrope";
  src: url("assets/fonts/Manrope-Variable.ttf") format("truetype");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --navy:  #14213D;
  --amber: #FCA311;
  --slate: #4C5C68;
  --gray-3: #C5C3C6;
  --field-line: #76828C;        /* 3.6:1 on white, for form edges */

  /* Six roles, one accent. Light canvas, so the shadows are tinted navy and
     much lighter than the dark defaults. */
  --sc-canvas:     #DCDCDD;
  --sc-surface:    #FFFFFF;
  --sc-ink:        var(--navy);
  --sc-ink-soft:   var(--slate);
  --sc-accent:     var(--amber);
  --sc-accent-ink: var(--navy);

  --sc-font-display: "Manrope", system-ui, sans-serif;
  --sc-font-text:    "Manrope", system-ui, sans-serif;

  --sc-shadow-color: 218 42% 20%;
  --sc-e1: 0 1px 2px hsl(var(--sc-shadow-color) / 0.10),
           0 2px 6px -1px hsl(var(--sc-shadow-color) / 0.08);
  --sc-e2: 0 2px 4px hsl(var(--sc-shadow-color) / 0.07),
           0 10px 22px -6px hsl(var(--sc-shadow-color) / 0.17);
  --sc-e3: 0 4px 8px hsl(var(--sc-shadow-color) / 0.08),
           0 18px 40px -10px hsl(var(--sc-shadow-color) / 0.20);
  --sc-edge: inset 0 1px 0 rgb(255 255 255 / 0.95);

  --rail-w: 7.5rem;             /* room kept clear for the day rail on wide screens */
}

html { scroll-padding-top: 0; }
body { font-weight: 400; color: var(--navy); }
:root { caret-color: var(--navy); }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.sc-display { font-weight: 600; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 1rem; top: -4rem; z-index: 100;
  padding: .7rem 1rem; background: var(--navy); color: #fff; border-radius: var(--sc-r-md);
  transition: top 140ms var(--sc-ease-out);
}
.skip:focus { top: 1rem; }

/* ------------------------------------------------------------- the mark -- */
.mark {
  position: fixed; z-index: var(--sc-z-chrome);
  top: 12px; left: max(12px, calc(var(--sc-gutter) - 20px));
}
.mark a { display: block; border-radius: var(--sc-r-md); }
.mark img { width: 56px; height: 56px; }

/* ------------------------------------------------------------- day rail --
   One working day, 8 AM to 5 PM, nine hours. Grey bars are the repeatable
   work, navy bars are the work that needs the owner. Scroll is the playhead,
   and the stops are real links. */
.day {
  --now: 0;
  position: fixed; z-index: var(--sc-z-chrome);
  right: 14px; top: 50%; translate: 0 -50%;
  width: 6.6rem; height: min(70svh, 35rem);
  padding: .35rem .6rem .35rem .35rem;
  background: var(--sc-canvas);
  border: 1px solid var(--sc-hairline);
  border-radius: var(--sc-r-lg);
  box-shadow: var(--sc-e1);
}
.day__stops { z-index: 2; list-style: none; margin: 0; padding: 0; position: absolute; inset: .35rem auto .35rem .35rem; width: 2.5rem; }
.day__stops li { position: absolute; left: 0; right: 0; top: calc(var(--i) * 100% / 9); }
.day__stops a {
  position: relative; display: block; padding: .5rem 0 .5rem .35rem; text-decoration: none;
  font-size: .75rem; line-height: 1; color: var(--sc-ink-soft); white-space: nowrap;
}
.day__stops b { font-weight: 600; letter-spacing: .01em; }
.day__stops span {
  position: absolute; right: calc(100% + .9rem); top: 50%; translate: .4rem -50%;
  padding: .5rem .7rem; border-radius: 8px; white-space: nowrap;
  background: var(--navy); color: #fff; font-weight: 500;
  opacity: 0; pointer-events: none;
  transition: opacity 140ms var(--sc-ease-out), translate 140ms var(--sc-ease-out);
}
.day__stops a:focus-visible span { opacity: 1; translate: 0 -50%; }
@media (hover: hover) and (pointer: fine) {
  .day__stops a:hover span { opacity: 1; translate: 0 -50%; }
  .day__stops a:hover b { color: var(--navy); }
}
.day__grid {
  pointer-events: none;
  position: absolute; inset: .35rem .6rem .35rem 2.85rem;
  display: grid; grid-template-rows: repeat(9, 1fr);
}
.slot {
  --open: 0;
  display: flex; flex-direction: column; gap: 5px; padding: 8px 0 0 6px;
  border-top: 1px solid var(--sc-hairline);
  background: color-mix(in oklab, var(--amber) calc(var(--open) * 14%), transparent);
  border-radius: 4px;
}
.bar { display: block; height: 8px; width: calc(var(--w) * 1%); border-radius: 4px; transform-origin: 0 50%; }
.bar.t {
  --a: 0; --gone: 0;
  background: color-mix(in oklab, var(--amber) calc(var(--a) * (1 - var(--gone)) * 100%), var(--gray-3));
  opacity: calc(1 - var(--gone));
  scale: calc(1 - var(--gone) * .35) 1;
}
.bar.h { background: var(--navy); }
.bar.b { background: var(--amber); opacity: 0; scale: .2 1; transition: opacity 320ms var(--sc-ease-out), scale 420ms var(--sc-ease-out); }
.day.is-booked .bar.b { opacity: 1; scale: 1 1; }
.day__now {
  position: absolute; left: .35rem; right: .6rem; height: 2px; margin-top: -1px;
  top: calc(.35rem + (100% - .7rem) * var(--now));
  background: var(--amber); border-radius: 2px;
}
.day__now::before {
  content: ""; position: absolute; left: -2px; top: 50%; width: 10px; height: 10px; margin-top: -5px;
  border-radius: 50%; background: var(--amber); border: 2px solid #fff;
  box-shadow: 0 1px 3px hsl(var(--sc-shadow-color) / .3);
}

/* ------------------------------------------------------------------ nav -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1rem 1.7rem; border: 0; cursor: pointer;
  background: var(--amber); color: var(--navy);
  font: 600 1rem/1.1 var(--sc-font-text); letter-spacing: -.005em; text-decoration: none; white-space: nowrap;
  border-radius: var(--sc-r-md);
  box-shadow: var(--sc-e1), var(--sc-edge);
  transition: transform 140ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out), box-shadow 140ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: #FFB13A; box-shadow: var(--sc-e2), var(--sc-edge); transform: translateY(-1px); }
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* ============================================================== 1 · PILE == */
.hero { position: relative; }
.hero__stage { position: relative; height: 100svh; min-height: 40rem; overflow: clip; }

.plane { position: absolute; inset: 0; pointer-events: none; will-change: transform; }
.plane--far  { z-index: 1; filter: blur(2.2px); opacity: .72; }
.plane--mid  { z-index: 2; }
.plane--air  { z-index: 3; }
.plane--near { z-index: 6; filter: blur(3.4px); }
.plane--far .note { scale: .84; }
.plane--near .note { scale: 1.5; }
.tangle { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--navy); opacity: .13; }

.note {
  position: absolute; left: var(--x); top: var(--y); rotate: var(--r, 0deg);
  display: flex; align-items: center; gap: .8rem;
  padding: .85rem 1.15rem .85rem .9rem;
  background: #fff; color: var(--navy);
  border-radius: var(--sc-r-md);
  box-shadow: var(--sc-e2), var(--sc-edge);
  font-size: .97rem; font-weight: 600; line-height: 1.25; letter-spacing: -.005em;
  white-space: nowrap;
}
.note__box {
  position: relative; flex: none; width: 1.15rem; height: 1.15rem;
  border: 2px solid var(--slate); border-radius: 5px;
}

/* The mess arrives rather than just being there. translate/opacity only. */
.hero .note { animation: noteIn 760ms var(--sc-ease-out) both; }
.hero .plane .note:nth-child(2n) { animation-delay: 120ms; }
.hero .plane .note:nth-child(3n) { animation-delay: 260ms; }
.hero .plane .note:nth-child(5n) { animation-delay: 380ms; }
@keyframes noteIn { from { translate: 0 18px; opacity: 0; } to { translate: 0 0; opacity: 1; } }

.ping { position: absolute; left: var(--x); top: var(--y); width: 14px; height: 14px; border-radius: 50%; background: var(--amber); border: 2px solid #fff; box-shadow: 0 1px 3px hsl(var(--sc-shadow-color) / .25); }
.ping::after {
  content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid var(--amber);
  animation: ping 2.9s var(--sc-ease-out) infinite; animation-delay: var(--d);
}
@keyframes ping { 0% { scale: .45; opacity: .85; } 70%, 100% { scale: 1.5; opacity: 0; } }

/* A quiet patch under the headline, as a sibling so the notes stay in the
   frame everywhere else. It lifts the ground only where the type sits. */
.hero__quiet {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: radial-gradient(58rem 36rem at 24% 52%,
    color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 72%, transparent) 52%,
    transparent 100%);
}
.hero__copy {
  position: absolute; z-index: 5;
  left: var(--sc-gutter); top: 50%; translate: 0 -50%;
  max-width: 44rem; padding-right: 1rem;
}
.hero__h {
  font-size: clamp(2.6rem, 1.1rem + 5.3vw, 6rem);
  line-height: .98; letter-spacing: -.045em; color: var(--navy);
}
.ln { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.ln > span { display: inline-block; animation: lineIn 900ms var(--sc-ease-out) both; animation-delay: calc(.12s + var(--i) * .11s); }
@keyframes lineIn { from { translate: 0 105%; } to { translate: 0 0; } }
.hero__p {
  margin: 1.6rem 0 0; max-width: 30rem; text-wrap: pretty;
  font-size: var(--sc-t-lg); line-height: 1.45; letter-spacing: -.01em; color: var(--slate);
  animation: fadeIn 800ms var(--sc-ease-out) .45s both;
}
.hero .btn { margin-top: 2rem; animation: fadeIn 800ms var(--sc-ease-out) .6s both; }
@keyframes fadeIn { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }

.hero__floor {
  position: absolute; z-index: 7; left: 0; right: 0; bottom: 0; height: 24svh; pointer-events: none;
  background: linear-gradient(to top, var(--sc-canvas), transparent);
}

/* ============================================================ 2 · QUESTION == */
.hush {
  min-height: 100svh; display: grid; align-content: center;
  padding-block: var(--sc-section);
  padding-left: clamp(var(--sc-gutter), 15vw, 15rem);
  padding-right: var(--sc-gutter);
}
.hush .sc-display { font-size: var(--sc-t-3xl); line-height: 1.02; letter-spacing: -.04em; max-width: 12.5em; }
.hush__dot { display: block; width: 18px; height: 18px; margin-top: 2.6rem; border-radius: 50%; background: var(--amber); }

/* ============================================================ 3 · CLEARING == */
.cl__copy {
  position: absolute; z-index: 4; left: var(--sc-gutter); top: 50%; translate: 0 -50%;
  width: min(34vw, 31rem); display: grid;
}
.cl__line {
  grid-area: 1 / 1; margin: 0;
  font-size: clamp(2.1rem, 1.1rem + 3.5vw, 4.4rem); font-weight: 600;
  line-height: 1.02; letter-spacing: -.04em; text-wrap: balance; color: var(--navy);
}
.cl__board { position: absolute; z-index: 3; top: 0; bottom: 0; left: max(38vw, 26rem); right: calc(var(--rail-w) + 1rem); }
.cl__notes { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.cl__label {
  position: absolute; left: 0; top: 0; opacity: 0; white-space: nowrap;
  font-size: .75rem; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: var(--slate);
}
.cl .note {
  --nw: 17.5rem; --a: 0; --done: 0;
  left: 0; top: 0; width: var(--nw); white-space: normal; will-change: translate, rotate, scale, opacity;
}
.cl .note[data-k="r"] { overflow: visible; }
.cl .note[data-k="r"]::before {
  content: ""; position: absolute; left: -.6rem; top: 50%; width: .95rem; height: .95rem; margin-top: -.475rem;
  border-radius: 50%; background: var(--amber); border: 2px solid #fff;
  box-shadow: 0 2px 4px hsl(var(--sc-shadow-color) / .22);
  scale: calc(var(--a) * (1 - var(--done)));
}
.cl .note[data-k="r"] .note__box {
  border-color: color-mix(in oklab, var(--navy) calc(var(--done) * 100%), var(--slate));
  background: color-mix(in oklab, var(--navy) calc(var(--done) * 100%), transparent);
}
.note__box svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: var(--done, 0); }
.cl .note[data-k="r"] .note__t {
  opacity: calc(1 - var(--done) * .5);
  text-decoration: line-through; text-decoration-thickness: 2px;
  text-decoration-color: color-mix(in oklab, currentColor calc(var(--done) * 100%), transparent);
}
.cl .note[data-k="h"] .note__box { border-color: var(--navy); border-radius: 50%; }

/* ============================================================ 4 · HOW I WORK == */
.how__stage { display: flex; align-items: center; background: var(--sc-canvas); }
.how__rail {
  align-items: flex-start; gap: clamp(2.5rem, 6vw, 6rem);
  padding-inline: var(--sc-gutter) 24vw;
}
.how__lead { flex: none; width: min(30vw, 27rem); align-self: center; }
.how__lead .sc-display { font-size: var(--sc-t-2xl); line-height: 1.03; letter-spacing: -.035em; }
.how__lead p { margin: 1.4rem 0 0; font-size: var(--sc-t-lg); line-height: 1.45; letter-spacing: -.01em; color: var(--slate); max-width: 24rem; text-wrap: pretty; }
.how__item { flex: none; width: min(34vw, 31rem); }
.how__item:nth-of-type(even) { margin-top: 9svh; }
.how__item figure { margin: 0 0 1.6rem; }
.how__item img { width: 100%; height: auto; }
.how__item h3 { margin: 0; font-size: var(--sc-t-xl); font-weight: 600; letter-spacing: -.03em; line-height: 1.08; }
.how__item p { margin: .7rem 0 0; color: var(--slate); max-width: 30rem; text-wrap: pretty; }
@media (prefers-reduced-motion: no-preference) {
  .how__item:nth-of-type(n+2) { opacity: clamp(.55, calc(.55 + (var(--sc-p, 0) - var(--d, 0)) * 5), 1); }
  .how__item:nth-of-type(2) { --d: .1; }
  .how__item:nth-of-type(3) { --d: .3; }
  .how__item:nth-of-type(4) { --d: .5; }
}

/* ============================================================ 5 · CONVERSATION == */
.talk { min-height: 100svh; padding-top: var(--sc-section); }
.talk__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center;
  gap: clamp(2rem, 5vw, 6rem);
  max-width: 88rem; margin-inline: auto;
  padding-left: var(--sc-gutter); padding-right: calc(var(--rail-w) + 1.5rem);
}
.talk__text .sc-display { font-size: clamp(2.4rem, 1.5rem + 3.1vw, 4.2rem); line-height: 1.04; letter-spacing: -.04em; max-width: 10em; }
.talk__lede { margin: 1.4rem 0 0; font-size: var(--sc-t-lg); line-height: 1.45; letter-spacing: -.01em; color: var(--slate); max-width: 28rem; }
.talk__art { margin: 0; }
.talk__art img { width: 100%; height: auto; -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%); mask-image: linear-gradient(to bottom, #000 80%, transparent 100%); }

.form { margin-top: 2.4rem; display: grid; gap: 1.3rem; max-width: 34rem; }
.form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.form legend { padding: 0; margin-bottom: .7rem; font-size: .9rem; font-weight: 600; color: var(--navy); }
.form legend span, .field label span { font-weight: 400; color: var(--slate); }
.form__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.form__chips legend { width: 100%; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: .55rem 1rem; border-radius: var(--sc-r-md);
  border: 1px solid var(--field-line); background: #fff; color: var(--navy);
  font-size: .94rem; font-weight: 500; line-height: 1.2;
  transition: background-color 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out), border-color 140ms var(--sc-ease-out);
}
.chip input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.chip input:focus-visible + span { outline: 2px solid var(--navy); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .chip input:not(:checked):hover + span { border-color: var(--navy); } }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field label { display: block; margin-bottom: .45rem; font-size: .9rem; font-weight: 600; color: var(--navy); }
.field input, .field textarea {
  width: 100%; padding: .85rem 1rem; border: 1px solid var(--field-line); border-radius: var(--sc-r-md);
  background: #fff; color: var(--navy); font-size: 1rem; resize: vertical;
  transition: border-color 140ms var(--sc-ease-out), box-shadow 140ms var(--sc-ease-out);
}
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; border-color: var(--navy); }
.field [aria-invalid="true"] { border-color: #A32A2A; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__act { display: flex; align-items: center; gap: 1.1rem 1.4rem; flex-wrap: wrap; }
.form__status { margin: 0; flex: 1 1 14rem; font-size: .92rem; line-height: 1.4; color: var(--slate); text-wrap: pretty; }

.foot {
  max-width: 88rem; margin: clamp(4rem, 9vw, 8rem) auto 0;
  padding: 2.2rem var(--sc-gutter) 3rem; padding-right: calc(var(--rail-w) + 1.5rem);
  border-top: 1px solid var(--sc-hairline);
  display: grid; grid-template-columns: auto 1fr auto; gap: 1rem 3rem; align-items: center;
}
.foot__logo { width: 280px; height: auto; }
.foot p { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--slate); }
.foot__what { grid-column: 2; }
.foot__who { text-align: right; }
.foot__fine { grid-column: 1 / -1; font-size: .82rem !important; }
.foot a { color: var(--navy); display: inline-block; padding: .7rem .15rem; }

/* ------------------------------------------------------------ reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .hero .note, .ln > span, .hero__p, .hero .btn { animation: none; }
  .ping::after { animation: none; opacity: .35; scale: 1.2; }
  .how__item { opacity: 1 !important; }
  /* The clearing becomes a plain statement of the same story: four lines and
     the work that is left. No pinned travel. */
  .clearing { height: auto !important; }
  .cl { position: relative; height: auto; overflow: visible; padding: var(--sc-section) var(--sc-gutter) var(--sc-section); padding-right: calc(var(--rail-w) + 1.5rem); }
  .cl__copy { position: static; translate: none; width: auto; display: block; }
  .cl__line { display: block; opacity: 1 !important; transform: none !important; margin-bottom: .5rem; }
  .cl__line .sc-split__i { opacity: 1 !important; transform: none !important; }
  .cl__board { position: static; margin-top: 2rem; }
  .cl__label { display: none; }
  .cl__notes { position: static; display: grid; gap: .7rem; max-width: 22rem; }
  .cl .note { position: static; width: auto; }
  .cl .note[data-k="r"] { display: none; }
  .day__now { transition: none; }
}

/* ------------------------------------------------------------------ phones -- */
@media (max-width: 860px) and (max-height: 720px) {
  .hero__stage { --cs: 26rem; }
  .hero__p { font-size: .95rem; margin-top: .9rem; }
  .hero .btn { margin-top: 1.1rem; padding: .85rem 1.4rem; }
  .cl__board { top: 21svh; bottom: calc(3rem + 16px); }
  .cl__line { font-size: 1.75rem; }
  .cl .note { font-size: .74rem; padding: .4rem .55rem .4rem .5rem; gap: .4rem; }
}
@media (max-width: 860px) {
  :root { --rail-w: 0rem; }
  .mark { top: 8px; left: 10px; }

  /* The rail turns on its side and sits at the foot of the screen. */
  .day {
    top: auto; bottom: max(10px, env(safe-area-inset-bottom)); left: 12px; right: 12px; translate: none;
    width: auto; height: 3rem; padding: 0; border-radius: var(--sc-r-md);
  }
  .day__stops { inset: 0; width: auto; }
  .day__stops li { top: 0; bottom: 0; left: calc(var(--i) * 100% / 9); right: auto; width: calc(100% / 9); }
  .day__stops a { height: 100%; padding: 0; }
  .day__stops b, .day__stops span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .day__grid { inset: 6px 8px; grid-template-rows: none; grid-template-columns: repeat(9, 1fr); }
  .slot { flex-direction: row; align-items: flex-end; justify-content: center; gap: 3px; padding: 0; border-top: 0; border-left: 1px solid var(--sc-hairline); border-radius: 0; }
  .bar { width: 6px; height: calc(var(--w) * .26px); transform-origin: 50% 100%; }
  .bar.t { scale: 1 calc(1 - var(--gone) * .35); }
  .bar.b { scale: 1 .2; }
  .day.is-booked .bar.b { scale: 1 1; }
  .day__now { top: 4px; bottom: 4px; left: calc(.5rem + (100% - 1rem) * var(--now)); right: auto; width: 2px; height: auto; margin: 0; }
  .day__now::before { left: 50%; top: -3px; margin: 0 0 0 -5px; }

  /* Hero, recomposed: type on top, the pile underneath. */
  .hero__stage { min-height: 38rem; }
  .hero__copy { top: calc(56px + 3.2rem); translate: none; right: var(--sc-gutter); padding-right: 0; }
  .hero__h { font-size: clamp(2.3rem, 1.2rem + 5.2vw, 3.2rem); }
  .hero__p { margin-top: 1.1rem; font-size: 1.02rem; }
  .hero .btn { margin-top: 1.4rem; }
  .hero__quiet { background: linear-gradient(to bottom,
      color-mix(in oklab, var(--sc-canvas) 96%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 84%, transparent) 40%,
      transparent 66%); }
  .hero__stage { --cs: 24.5rem; }
  .note { left: var(--mx, var(--x)); top: calc(var(--cs) + (100% - var(--cs)) * var(--t, 0)); font-size: .82rem; padding: .65rem .95rem .65rem .7rem; gap: .6rem; }
  .note.dt { display: none; }
  .note__box { width: 1rem; height: 1rem; }
  .ping { left: var(--mx, var(--x)); top: calc(var(--cs) + (100% - var(--cs)) * var(--t, 0)); }
  .plane--near .note { scale: 1.35; }

  .hush { padding-left: var(--sc-gutter); }

  /* Clearing: one short line up top, the two lists below. */
  .cl__copy { top: calc(56px + 1.6rem); translate: none; width: auto; right: var(--sc-gutter); }
  .cl__line { font-size: clamp(1.9rem, 1.1rem + 4.6vw, 2.6rem); }
  .cl__board { left: var(--sc-gutter); right: var(--sc-gutter); top: 28svh; bottom: calc(3rem + 22px); }
  .cl .note { --nw: calc((100vw - var(--sc-gutter) * 2 - .8rem) / 2); font-size: .8rem; line-height: 1.2; padding: .55rem .7rem .55rem .6rem; gap: .5rem; }
  .cl .note[data-k="r"]::before { left: -.45rem; width: .8rem; height: .8rem; margin-top: -.4rem; }
  .cl .note .note__box { width: .95rem; height: .95rem; }

  .how__lead { width: 78vw; }
  .how__item { width: 78vw; }
  .how__item:nth-of-type(even) { margin-top: 5svh; }
  .how__rail { padding-right: 16vw; }

  .talk__grid { grid-template-columns: 1fr; padding-right: var(--sc-gutter); gap: 1.5rem; }
  .talk__art { order: -1; width: 86%; margin-inline: auto; }
  .talk__text .sc-display { max-width: none; }
  .form__row { grid-template-columns: 1fr; }
  .foot { grid-template-columns: 1fr; padding-right: var(--sc-gutter); padding-bottom: calc(3rem + 3.5rem); gap: .8rem; }
  .foot__what, .foot__fine { grid-column: 1; }
  .foot__who { text-align: left; }
}

/* ---- WordPress fallback pages and 404 (theme only) ---- */
.plain { max-width: 44rem; margin: 0 auto; padding: 5rem var(--sc-gutter) 6rem; }
.plain__mark { display: inline-block; margin-bottom: 2rem; }
.plain h1 { font-size: var(--sc-t-2xl); font-weight: 600; letter-spacing: -.035em; line-height: 1.05; margin: 0 0 1.2rem; }
.plain__body { color: var(--slate); }
.plain a { color: var(--navy); }