/* longform.css: the long form pages (attention, research/netineti), after holon.css.
   layers: tokens.css > holon.css > this file (objects shared by both pages) > pages/*.css > utilities.css.
   everything here was byte for byte the same in both pages' own css. holon.css already holds
   .wide .it .small .mid .part .crumb .techs and the fold; this holds the rest. */
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--serif) !important; font-size: 19px; line-height: 1.75; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, li, summary { font-family: var(--serif); color: inherit; }
p { margin: 0 0 1.6rem; text-wrap: pretty; }
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); transition: text-decoration-color 0.25s var(--ease), opacity 150ms var(--ease); }

/* the column that hangs off the left gutter; .hang is the same hang with no width limit */
.col { max-width: 29rem; margin-left: var(--gutter); padding-right: 28px; }
.hang { margin-left: var(--gutter); padding-right: 28px; }
.big { font-size: clamp(30px, 5.4vw, 44px); line-height: 1.28; font-weight: 400; letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
.big + .big { margin-top: 0.9rem; }
.soft { color: var(--quiet); }
.kick { font-style: italic; color: var(--quiet); margin: 2.4rem 0 0.6rem; }

/* the line that joins every part to the whole: drawn once, from the left, as it arrives
   (as on the home page). it no longer breathes: a 6 s loop on every hairline was a slow
   oscillation on every screen */
.line { height: 1px; width: 100vw; background: currentColor; opacity: 0.4; margin: 16vh 0; transform-origin: left center; transition: transform 1.6s var(--ease); }
.js .line:not(.on) { transform: scaleX(0); }

/* the claims, read down */
.ladder { list-style: none; margin: 2.4rem 0 0; padding: 0; max-width: 36rem; counter-reset: rung; }
.ladder li { counter-increment: rung; display: grid; grid-template-columns: 2.2rem 1fr; gap: 0 1.2rem; padding: 1.6rem 0; border-top: 1px solid rgba(25,25,24,0.14); }
.ladder li::before { content: counter(rung); color: var(--quiet); font-size: 15px; padding-top: 0.35rem; }
.ladder.claims li { font-size: clamp(23px, 2.4vw, 26px); line-height: 1.4; padding: 1.2rem 0; }
.ladder.claims li::before { padding-top: 0.3rem; }

footer { margin: 16vh 0 0; padding-bottom: 10vh; }

@media (max-width: 760px) {
  :root { --gutter: 28px; }
  .techs li { grid-template-columns: 1fr; }
  .line { margin: 11vh 0; }
}
/* reduced motion: nothing travels. state still arrives, through a short cross-fade.
   the link/summary opacity fade itself is shared (holon.css); what's left here is
   specific to the hairline, fold and smooth scroll */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .line, .js .line:not(.on) { transform: none; transition: none; }
  details.layer .chev { transition: none; }
  details.layer { transition: none; }
  details.layer:has(> summary:active) { transform: none; }
  .js details.fold > .in { transition: opacity 0.2s var(--ease); }
}