/* ==========================================================================
   "Start where you are" pages (prototype/start/*.html)
   --------------------------------------------------------------------------
   Four short, warm pages. Each one: a charcoal title card that names the
   visitor's worry, what's true, one check to do this week, one verbatim line
   from Stuart, and where to go next.
   Built only on site.css tokens. story.css is NOT loaded here, so the few
   patterns borrowed from it (split, doors, start list) are restated below.
   ========================================================================== */

/* ---------- Layout ------------------------------------------------------ */
.s-section { padding-block: clamp(56px, 8vh, 104px); }
.s-section--tight { padding-block: clamp(40px, 6vh, 80px); }
.s-split { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 104px); align-items: start; }
@media (max-width: 900px) { .s-split { grid-template-columns: 1fr; } }

/* Text-free transition bands between discrete themes (never interpolate text) */
.s-band { height: clamp(72px, 12vh, 140px); }
.s-band--charcoal-paper { background: linear-gradient(var(--charcoal), #3b3935 45%, var(--paper)); }
.s-band--paper-charcoal { background: linear-gradient(var(--paper), #3b3935 55%, var(--charcoal)); }

/* ---------- Hero: the title card ---------------------------------------- */
.s-hero {
  position: relative; isolation: isolate; overflow: clip;
  min-height: min(76svh, 760px);
  display: grid; align-items: center;
  padding: clamp(112px, 16vh, 160px) 0 clamp(56px, 9vh, 96px);
}
.s-hero::before { /* the same breath of warm light and violet as the story hero */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(50vmax 40vmax at 78% 44%, rgba(200,184,154,.09), transparent 60%),
    radial-gradient(70vmax 50vmax at 12% 115%, rgba(91,63,140,.18), transparent 60%);
}
.s-hero__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(28px, 5vw, 96px); align-items: center; }
.s-hero__eyebrow { display: flex; align-items: center; gap: .9rem; margin-bottom: clamp(1.6rem, 3vh, 2.4rem); }
.s-hero__eyebrow .port { --size: 22px; }
.s-hero__eyebrow .rule { width: 40px; background: var(--brass); opacity: .6; }
.s-hero__eyebrow a { text-decoration: none; }
.s-hero__eyebrow a:hover { color: var(--fg); }
.s-hero h1 { font-size: clamp(2.7rem, 1.4rem + 5vw, 6.6rem); line-height: .96; letter-spacing: -.032em; font-weight: 300; }
.s-hero h1 .line { display: block; }
.s-hero h1 .accent-line { font-style: italic; color: var(--accent); font-weight: 280; }
.s-hero__reassure {
  margin-top: clamp(1.6rem, 3vh, 2.4rem);
  font-family: var(--serif); font-optical-sizing: auto; font-weight: 340;
  font-size: var(--step-2); line-height: 1.3; letter-spacing: -.01em;
  max-width: 30rem; text-wrap: pretty;
}
.s-hero__meta { margin-top: clamp(2rem, 4vh, 3rem); display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; list-style: none; padding: 0; }
.s-hero__meta li { display: inline-flex; align-items: center; gap: .55rem; }
.s-hero__meta li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--brass); opacity: .7; }

/* The large view port on the right. Its stripe levels when the visitor marks the check done. */
.s-port { position: relative; justify-self: center; width: min(28vw, 380px); aspect-ratio: 1; color: var(--brass); }
.s-port__ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(200,184,154,.42); }
.s-port__inner { position: absolute; inset: 16%; border-radius: 50%; border: 1px solid rgba(200,184,154,.16); background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.035), transparent 70%); }
.s-port__ticks { position: absolute; inset: 0; }
.s-port__ticks i { position: absolute; left: 50%; top: 0; width: 1px; height: 10px; margin-left: -.5px; background: rgba(200,184,154,.5); transform-origin: 50% calc(min(28vw, 380px) / 2); transform: rotate(calc(var(--k) * 45deg)); }
.s-port__inner { overflow: hidden; }
.s-port__inner img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.6) contrast(1.04) brightness(.88); transition: filter 900ms var(--ease-out); }
.s-port.is-aligned .s-port__inner img { filter: none; }
/* Alignment notches on the ring (never across the photo). They level when the check is done. */
.s-port__notches { position: absolute; inset: 0; transform: rotate(var(--angle, -28deg)); transition: transform var(--slow) var(--ease-out); }
.s-port__notches::before, .s-port__notches::after { content: ""; position: absolute; top: 50%; width: 9%; height: 2px; margin-top: -1px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 12px rgba(182,156,240,.35); }
.s-port__notches::before { left: -5%; }
.s-port__notches::after { right: -5%; }
.s-port.is-aligned .s-port__notches { --angle: 0deg; }
.s-port__caption { position: absolute; left: 50%; bottom: -3rem; transform: translateX(-50%); white-space: nowrap; }
.s-port__caption [data-done] { display: none; }
.s-port.is-aligned .s-port__caption [data-done] { display: inline; }
.s-port.is-aligned .s-port__caption [data-todo] { display: none; }
@media (max-width: 900px) {
  .s-hero__grid { grid-template-columns: 1fr; }
  .s-port { display: none; }
  .s-hero { min-height: 0; }
}

/* Opening motion: opt-in only. Content is fully visible without it. */
@media (prefers-reduced-motion: no-preference) {
  .js .s-hero .rise { opacity: 0; transform: translateY(22px); transition: opacity 1100ms var(--ease-out), transform 1100ms var(--ease-out); transition-delay: calc(150ms + var(--i, 0) * 120ms); }
  .js .s-hero.is-open .rise { opacity: 1; transform: none; }
  .js .s-port__ring, .js .s-port__ticks, .js .s-port__inner { opacity: 0; transform: scale(.94); transition: opacity 1200ms ease 300ms, transform 1600ms var(--ease-out) 300ms; }
  .js .s-port__notches { opacity: 0; --angle: -58deg; transition: transform 1300ms var(--ease-out) 900ms, opacity 500ms ease 800ms; }
  .js .s-hero.is-open .s-port__ring, .js .s-hero.is-open .s-port__ticks, .js .s-hero.is-open .s-port__inner { opacity: 1; transform: none; }
  .js .s-hero.is-open .s-port__notches { opacity: 1; --angle: -28deg; }
  .js .s-hero.is-open .s-port.is-aligned .s-port__notches { --angle: 0deg; transition-delay: 0ms; }
}

/* ---------- What's true -------------------------------------------------- */
.s-true h2 { margin-bottom: 1.4rem; }
.s-true .body-l + .body-l { margin-top: 1.1em; }
.s-true q { font-style: italic; }

/* ---------- One check this week ----------------------------------------- */
/* Mirrors the story page's checks: a card with a port whose stripe levels when done. */
.one-check {
  position: relative;
  background: #fff; color: var(--ink);
  border: 1px solid var(--hair); border-radius: 22px;
  padding: clamp(24px, 3.2vw, 40px);
  box-shadow: 0 24px 60px rgba(60,40,20,.08);
  transition: border-color var(--med) ease, box-shadow var(--med) ease;
}
.one-check.is-done { border-color: color-mix(in oklab, var(--violet) 40%, transparent); box-shadow: 0 24px 70px rgba(91,63,140,.14); }
.one-check__head { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; }
.one-check__head .port { --size: 48px; color: var(--brass-deep); margin-top: .15rem; }
.one-check__head .port__stripe { background: var(--violet); }
.one-check__title { font-family: var(--serif); font-optical-sizing: auto; font-weight: 400; font-size: clamp(1.55rem, 1.2rem + 1vw, 2.1rem); line-height: 1.08; letter-spacing: -.01em; margin-top: .45rem; text-wrap: balance; }
.one-check__steps { margin: 1.5rem 0 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: .85rem; }
.one-check__steps li { counter-increment: step; display: grid; grid-template-columns: 1.8rem 1fr; gap: .6rem; line-height: 1.55; }
.one-check__steps li::before { content: counter(step); font-family: var(--mono); font-size: .78rem; color: var(--brass-deep); padding-top: .2rem; letter-spacing: .04em; }
.one-check__why { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--hair); font-size: .95rem; color: var(--muted); }
.one-check__actions { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; align-items: center; }
.one-check__actions .btn { --accent: var(--violet); --accent-ink: #fff; }
.one-check__status { font-size: .88rem; color: var(--muted); min-height: 1.4em; }
.one-check__time { font-size: .8rem; color: var(--muted); letter-spacing: .02em; }

/* ---------- In Stuart's words ------------------------------------------- */
.s-words { text-align: left; }
.s-words__rule { display: flex; align-items: center; gap: 1rem; margin-bottom: clamp(1.6rem, 4vh, 2.6rem); }
.s-words__rule .rule { flex: 1; }
.s-words .quote { max-width: 19em; }
.s-words .quote--s { max-width: 26em; }

/* ---------- Next step: doors (restated from the story page) ------------- */
.doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.door {
  display: grid; gap: 1rem; align-content: space-between; min-height: 220px; padding: 26px;
  border-radius: 22px; text-decoration: none; background: #fff; color: var(--ink);
  border: 1px solid var(--hair);
  transition: transform var(--med) var(--ease-out), box-shadow var(--med) var(--ease-out);
}
.door:hover { transform: translateY(-4px); box-shadow: 0 24px 60px rgba(60,40,20,.12); }
.door:hover .port, .door:focus-visible .port { --angle: 0deg; }
.door:focus-visible { border-radius: 22px; }
.door h3 { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; line-height: 1.08; }
.door p { color: var(--muted); font-size: .92rem; margin-top: .5rem; }
.door .eyebrow { font-size: .66rem; }
.door .port { --size: 36px; color: var(--brass-deep); }
.door .port__stripe { background: var(--violet); }
.door--dark { background: var(--charcoal); color: var(--bone); border-color: var(--charcoal); }
.door--dark p, .door--dark .eyebrow { color: rgba(240,237,232,.7); }
.door--dark .port { color: var(--brass); }
.door--dark .port__stripe { background: var(--violet-light); }
.door--dark:focus-visible { outline-color: var(--violet); }
@media (max-width: 1000px) { .doors { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .doors { grid-template-columns: 1fr; } .door { min-height: 0; } }
@media (prefers-reduced-motion: reduce) { .door:hover { transform: none; } }

/* ---------- Other paths (the home page's "Start where you are" row, on paper) */
.paths__head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .6rem 1rem; margin-bottom: 1.2rem; }
.paths { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.paths a {
  display: flex; flex-direction: column; justify-content: space-between; gap: 1.4rem;
  min-height: 118px; height: 100%; padding: 18px 18px 16px; border-radius: 16px;
  text-decoration: none; border: 1px solid var(--hair); background: rgba(255,255,255,.45);
  transition: border-color var(--fast) ease, background var(--fast) ease, transform var(--med) var(--ease-out);
}
.paths a:hover { border-color: rgba(20,20,20,.32); background: rgba(255,255,255,.85); transform: translateY(-3px); }
.paths a:hover .port, .paths a:focus-visible .port { --angle: 0deg; }
.paths a:focus-visible { border-radius: 16px; }
.paths .port { --size: 26px; color: var(--brass-deep); }
.paths .port__stripe { background: var(--violet); }
.paths__row { display: flex; align-items: center; justify-content: space-between; }
.paths__row .arrow { opacity: .5; transition: transform var(--fast) var(--ease-out), opacity var(--fast); }
.paths a:hover .arrow { opacity: 1; transform: translateX(3px); }
.paths .t { font-size: .98rem; line-height: 1.3; font-weight: 500; }
.paths .t small { display: block; color: var(--muted); font-size: .8rem; font-weight: 400; margin-top: .25rem; }
@media (max-width: 900px) { .paths { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .paths { grid-template-columns: 1fr; } .paths a { min-height: 0; flex-direction: row-reverse; align-items: center; justify-content: space-between; } .paths__row .port { display: none; } }
@media (prefers-reduced-motion: reduce) { .paths a:hover { transform: none; } }

/* ---------- Print: just the check, as a card ---------------------------- */
@media print {
  .s-hero, .s-band, .s-words, .s-next, .site-footer, .s-true { display: none !important; }
  .one-check { box-shadow: none; border: 1px solid #999; }
  .one-check__actions { display: none; }
}

/* ---------- Small screens ------------------------------------------------ */
.s-hero__eyebrow .eyebrow { white-space: nowrap; }
@media (max-width: 520px) {
  .s-hero__eyebrow { flex-wrap: wrap; gap: .6rem .8rem; }
  .s-hero__eyebrow .rule { display: none; }
  .s-hero__eyebrow .eyebrow + .rule + .eyebrow { opacity: .75; }
  .s-hero__meta { flex-direction: column; gap: .5rem; }
  .one-check__head { gap: 14px; }
  .one-check__head .port { --size: 40px; }
}

/* QA round 2: the photo fills the port; phones get the circle too; motion opt-in */
.s-port__inner { inset: 7%; border: 0; }
@media (max-width: 900px) {
  .s-port { display: block; order: -1; justify-self: start; width: min(52vw, 220px); margin-bottom: 1.8rem; }
  .s-port__ticks i { transform-origin: 50% calc(min(52vw, 220px) / 2); }
  .s-port__caption { display: none; }
}
@media (prefers-reduced-motion: reduce) { .s-port__notches, .s-port__inner img, .port__stripe { transition: none !important; } }

/* Mobile QA: the "Start where you are" back link was 18px tall; door labels were 10.6px */
.s-hero__eyebrow a.eyebrow { display: inline-flex; align-items: center; min-height: 32px; }
.door .eyebrow { font-size: .72rem; }