/* ============================================================
   Selene · second line · one reading typeface (live since 27 Sep 2026)
   Loaded last on every page. Helvetica carries the headline
   and the second line; the second line drops to reading size and
   cream, so it reads as a sentence, not as a grey display line.
   Cormorant Garamond is no longer used for running text here.
   ============================================================ */
:root { --d-second: clamp(1.15rem, 1rem + 0.45vw, 1.5rem); } /* 30 Sep 2026: about two pixels larger, Selen found the second lines hard to read */

/* homepage: the sub-line under every chapter headline */
.story-sub { font-family: var(--sc-font-text); font-weight: 400; font-size: var(--d-second); line-height: 1.5; letter-spacing: 0.005em; color: color-mix(in oklab, var(--sc-ink) 90%, transparent); max-width: 58ch; margin-top: var(--sc-4); }
/* chapter 2: the seven pile lines, one at a time; the last one stays red */
.pile__line { font-family: var(--sc-font-text); font-weight: 400; font-size: var(--d-second); line-height: 1.5; letter-spacing: 0.005em; color: color-mix(in oklab, var(--sc-ink) 90%, transparent); }
.pile__line--red { color: var(--sc-accent); font-weight: 400; } /* Selen: red alone carries the line, bold made it muddy (30 Sep 2026) */
.pile__stack { height: calc(var(--d-second) * 3.2); margin-top: var(--sc-4); }

/* inner pages: the line under each hero headline, and the promise line on each service pillar */
.tagline:not(.hero-second):not(.hero-body) { font-family: var(--sc-font-text); font-weight: 400; font-size: var(--d-second); line-height: 1.5; letter-spacing: 0.005em; color: color-mix(in oklab, var(--sc-ink) 90%, transparent); }
.pillar__promise, .spanel .pillar__promise { font-family: var(--sc-font-text); font-weight: 400; font-size: var(--sc-t-lg); line-height: 1.35; letter-spacing: -0.005em; }

/* footer: the tagline in Helvetica, one step under a chapter headline */
.foot__slogan { font-family: var(--sc-font-text); font-weight: 400; font-size: clamp(1.3rem, 0.95rem + 1vw, 2rem); line-height: 1.15; letter-spacing: -0.015em; color: color-mix(in oklab, var(--sc-ink) 82%, transparent); }

/* inner pages (30 Sep 2026, Selen): the page name above the title, about two points larger; it read as small print */
.eyebrow { font-size: calc(var(--sc-t-xs) + 3px); } /* every label above a title is the same size, the founder's too (Selen, 5 Oct 2026) */
/* inner pages: the line under the title reads like the homepage's second lines, same size and ink */
.m-hero__copy .lede:not(.hero-second):not(.hero-body) { font-size: var(--d-second); line-height: 1.5; color: color-mix(in oklab, var(--sc-ink) 90%, transparent); }

/* ---------- inner page openings: one type system for About, Services and Contact (Selen, 1 Oct 2026) ----------
   The headline, the second layer and the body text are the same size and colour on every page. The copy keeps its
   place low in each opening (a shared high starting line was tried and taken back). */
body .hero-title { font-family: var(--sc-font-text); font-weight: 400; letter-spacing: -0.02em; line-height: 1.06; font-size: clamp(2rem, 1rem + 2.4vw, 3.4rem); color: var(--sc-ink); margin: 0; text-wrap: balance; }
body .hero-second { font-family: var(--sc-font-text); font-weight: 400; font-size: clamp(1.15rem, 0.95rem + 0.6vw, 1.5rem); line-height: 1.4; letter-spacing: -0.005em; color: var(--sc-ink); margin: var(--sc-4) 0 0; max-width: 50ch; }
body .hero-body { font-family: var(--sc-font-text); font-weight: 400; font-size: clamp(1rem, 0.94rem + 0.22vw, 1.12rem); line-height: 1.6; color: var(--sc-ink-soft); margin: var(--sc-5) 0 0; max-width: 52ch; }
@media (max-width: 700px) { body .hero-title { font-size: 2rem; } body .hero-second { font-size: 1.15rem; } body .hero-body { font-size: 1rem; } }
/* the section that rises over the empty lower part of an inner page opening: a solid sheet above the painted ground */
.is-lapping { position: relative; z-index: 2; background: linear-gradient(to bottom, transparent 0px, color-mix(in oklab, var(--sc-canvas, #0B0A09) 2.8%, transparent) calc(clamp(6rem, 18vh, 11rem) * 0.1), color-mix(in oklab, var(--sc-canvas, #0B0A09) 10.4%, transparent) calc(clamp(6rem, 18vh, 11rem) * 0.2), color-mix(in oklab, var(--sc-canvas, #0B0A09) 21.6%, transparent) calc(clamp(6rem, 18vh, 11rem) * 0.3), color-mix(in oklab, var(--sc-canvas, #0B0A09) 35.2%, transparent) calc(clamp(6rem, 18vh, 11rem) * 0.4), color-mix(in oklab, var(--sc-canvas, #0B0A09) 50.0%, transparent) calc(clamp(6rem, 18vh, 11rem) * 0.5), color-mix(in oklab, var(--sc-canvas, #0B0A09) 64.8%, transparent) calc(clamp(6rem, 18vh, 11rem) * 0.6), color-mix(in oklab, var(--sc-canvas, #0B0A09) 78.4%, transparent) calc(clamp(6rem, 18vh, 11rem) * 0.7), color-mix(in oklab, var(--sc-canvas, #0B0A09) 89.6%, transparent) calc(clamp(6rem, 18vh, 11rem) * 0.8), color-mix(in oklab, var(--sc-canvas, #0B0A09) 97.2%, transparent) calc(clamp(6rem, 18vh, 11rem) * 0.9), var(--sc-canvas, #0B0A09) calc(clamp(6rem, 18vh, 11rem) * 1.0)); } /* it melts out of the painted ground instead of cutting across it (Selen, 1 Oct 2026) */
/* the same matte fade on every opening: the Contact moon softens and dims as the page moves on */
[data-soften] .moonwrap { filter: blur(calc(var(--soft, 0) * 5px)) brightness(calc(1 - var(--soft, 0) * 0.4)); }
@media (prefers-reduced-motion: reduce) { [data-soften] .moonwrap { filter: none; } }
/* the Services opening melts into the six areas below it */
body .svc-over::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(6rem, 22vh, 13rem); z-index: -1; pointer-events: none; background: linear-gradient(to bottom, transparent 0.0%, color-mix(in oklab, var(--sc-canvas, #0B0A09) 2.8%, transparent) 10.0%, color-mix(in oklab, var(--sc-canvas, #0B0A09) 10.4%, transparent) 20.0%, color-mix(in oklab, var(--sc-canvas, #0B0A09) 21.6%, transparent) 30.0%, color-mix(in oklab, var(--sc-canvas, #0B0A09) 35.2%, transparent) 40.0%, color-mix(in oklab, var(--sc-canvas, #0B0A09) 50.0%, transparent) 50.0%, color-mix(in oklab, var(--sc-canvas, #0B0A09) 64.8%, transparent) 60.0%, color-mix(in oklab, var(--sc-canvas, #0B0A09) 78.4%, transparent) 70.0%, color-mix(in oklab, var(--sc-canvas, #0B0A09) 89.6%, transparent) 80.0%, color-mix(in oklab, var(--sc-canvas, #0B0A09) 97.2%, transparent) 90.0%, var(--sc-canvas, #0B0A09) 100.0%); }
/* the About and Contact openings melt into the page at their lower edge, like Services: no hard line where the painted ground ends */
.m-hero [data-sc-stage]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(6rem, 22vh, 13rem); z-index: 2; pointer-events: none; background: linear-gradient(to bottom, transparent 0.0%, color-mix(in oklab, var(--sc-canvas, #0B0A09) 2.8%, transparent) 10.0%, color-mix(in oklab, var(--sc-canvas, #0B0A09) 10.4%, transparent) 20.0%, color-mix(in oklab, var(--sc-canvas, #0B0A09) 21.6%, transparent) 30.0%, color-mix(in oklab, var(--sc-canvas, #0B0A09) 35.2%, transparent) 40.0%, color-mix(in oklab, var(--sc-canvas, #0B0A09) 50.0%, transparent) 50.0%, color-mix(in oklab, var(--sc-canvas, #0B0A09) 64.8%, transparent) 60.0%, color-mix(in oklab, var(--sc-canvas, #0B0A09) 78.4%, transparent) 70.0%, color-mix(in oklab, var(--sc-canvas, #0B0A09) 89.6%, transparent) 80.0%, color-mix(in oklab, var(--sc-canvas, #0B0A09) 97.2%, transparent) 90.0%, var(--sc-canvas, #0B0A09) 100.0%); }

/* the page scrollbar (Selen, 5 Oct 2026): a thin brand-red thumb on the page's own dark ground, instead of a pale
   system bar beside a black page. Safari cannot colour its scrollbar without forcing it to stay on screen for everyone,
   so there the dark scheme gives it a dark native bar instead. */
:root { color-scheme: dark; }
@supports (scrollbar-color: auto) {
  html { scrollbar-color: #E10600 #0B0A09; scrollbar-width: thin; }
}