/* clinchr homepage — photographic editorial on paper (spec revision 2).
   Loaded after teaser.css and page.css; reads their tokens. Every colour
   is a var. The blog and privacy pages never load this file. */

/* Restated here as well as in teaser.css: GitHub Pages caches files for ten
   minutes, so right after a deploy a visitor can get this page with a stale
   teaser.css that still locks scrolling. */
html, body { height: auto; overflow: visible; overscroll-behavior: auto; }
/* anchors and focused elements scroll to rest below the fixed nav */
html { scroll-padding-top: var(--nav-h); }

:root {
  --font-display: 'Quicksand', 'Avenir Next', 'Segoe UI', sans-serif;
  /* segment tints for the figures on paper: --cluster, --cluster mixed 55%
     into the paper, --ink-soft mixed 70% into the paper. Literal hex because
     the canvas reads them with getComputedStyle and cannot resolve color-mix(). */
  --tint-1: #4a6cae;
  --tint-2: #98a9ca;
  --tint-3: #abaca0;
  /* the one dark band: a warm near-black under --ink, with its own text and
     tint set. --night-mute is 9:1 on --night. */
  --night: #26221f;
  --night-ink: #f3efe6;
  --night-mute: #c9c3b6;
  --night-tint-1: #8fa6d6;
  --night-tint-2: #6f7f9e;
  --night-tint-3: #8c877b;
  /* the dark band's rules, guides and land: quiet against --night */
  --night-soft: #6a635a;
  --night-land: #6f665a;
  --nav-h: 5.3rem;   /* the nav's real height: padding plus the pill */
  --hairline: color-mix(in srgb, var(--ink-soft) 30%, transparent);
  --hairline-dashed: color-mix(in srgb, var(--ink-soft) 45%, transparent);
  --radius-card: 16px;
  --measure: 34em;
}

body { font-family: var(--font-display); }
/* the wordmark is brand: it keeps Quicksand */
.page-brand span { font-family: 'Quicksand', 'Avenir Next', 'Segoe UI', sans-serif; }

/* --- skip link: visible only while focused ----------------------------- */

.skip-link {
  position: fixed; top: 0.6rem; left: 0.6rem;
  padding: 0.6rem 1rem;
  background: var(--ground);
  border: 1px solid var(--ink-soft);
  border-radius: 999px;
  font-size: 0.8rem; font-weight: 500; letter-spacing: 0.04em; text-transform: lowercase;
  color: var(--ink); text-decoration: none;
  z-index: 60;
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; }

/* --- pills ---------------------------------------------------------------- */

.pill {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.95rem 1.9rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font: 500 0.95rem/1 var(--font-display);
  letter-spacing: 0.04em; text-transform: lowercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.15s ease;
}
.pill:active { transform: translateY(1px); }
.pill--paper { background: var(--ground); color: var(--ink); }
.pill--paper:hover, .pill--paper:focus-visible { background: var(--accent); color: var(--ground); }
.pill--ink { background: var(--ink); color: var(--ground); }
.pill--ink:hover, .pill--ink:focus-visible { background: var(--accent); color: var(--ground); }
/* the hero's second pill: outlined in paper, over the photograph */
.pill--ghost { background: transparent; color: var(--night-ink); border-color: color-mix(in srgb, var(--night-ink) 60%, transparent); }
.pill--ghost:hover, .pill--ghost:focus-visible { background: var(--night-ink); color: var(--night); border-color: var(--night-ink); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }

/* --- nav: transparent over the hero, a paper bar after it ---------------- */

.page-nav--home {
  position: fixed; top: 0; left: 0; right: 0;
  min-height: var(--nav-h);
  background: transparent;
  border-bottom: 1px solid transparent;
  z-index: 30;
  transition: background 0.35s ease, border-color 0.35s ease;
}
.page-nav--home .page-brand, .page-nav--home .page-signin { color: var(--night-ink); transition: color 0.35s ease; }
.page-nav--home .page-brand img { filter: brightness(0) invert(1); transition: filter 0.35s ease; }
/* small text links get a 24px-plus hit area without changing the nav height */
.page-nav--home .page-signin { padding: 0.55rem 0; font-family: var(--font-display); font-weight: 500; letter-spacing: 0.04em; font-size: 0.85rem; }
.page-nav--home .page-signin:hover, .page-nav--home .page-signin:focus-visible { border-color: currentColor; }
.page-nav--home .demo-btn {
  color: var(--night-ink);
  border-color: color-mix(in srgb, var(--night-ink) 70%, transparent);
  font-family: var(--font-display); font-weight: 500; font-size: 0.85rem;
  letter-spacing: 0.04em; margin-right: 0;
  padding: 0.6rem 1.3rem;
  transition: color 0.35s ease, border-color 0.35s ease, background 0.25s ease;
}
.page-nav--home .demo-btn:hover, .page-nav--home .demo-btn:focus-visible { background: color-mix(in srgb, var(--night-ink) 14%, transparent); }
.page-nav--home.scrolled {
  background: color-mix(in srgb, var(--ground) 92%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-bottom-color: var(--hairline);
}
.page-nav--home.scrolled .page-brand { color: var(--ink); }
.page-nav--home.scrolled .page-brand img { filter: none; }
.page-nav--home.scrolled .page-signin { color: var(--ink-mute); }
.page-nav--home.scrolled .page-signin:hover, .page-nav--home.scrolled .page-signin:focus-visible { color: var(--ink); }
.page-nav--home.scrolled .demo-btn { color: var(--ink); border-color: var(--ink-soft); }
.page-nav--home.scrolled .demo-btn:hover, .page-nav--home.scrolled .demo-btn:focus-visible { border-color: var(--cluster); background: color-mix(in srgb, var(--cluster) 10%, transparent); }

/* --- hero: a photograph, a headline, the persona network -------------------- */

.hero {
  position: relative;
  min-height: 92dvh;
  display: flex; align-items: flex-end;
  overflow: hidden;
  background: var(--night);
  color: var(--night-ink);
}
.hero-photo { position: absolute; inset: 0; margin: 0; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(38, 34, 31, 0.55) 0%, rgba(38, 34, 31, 0) 26%),
    linear-gradient(12deg, rgba(38, 34, 31, 0.9) 0%, rgba(38, 34, 31, 0.55) 34%, rgba(38, 34, 31, 0) 66%);
}
.hero-notes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-copy {
  position: relative; z-index: 2;
  width: 100%; max-width: 68rem;
  margin: 0 auto;
  padding: 9rem 1.5rem 5rem;
  padding-left: max(1.5rem, env(safe-area-inset-left));
  padding-right: max(1.5rem, env(safe-area-inset-right));
}
.hero h1 {
  font-size: clamp(2.4rem, 5.6vw, 5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.02;
  text-transform: none;
  max-width: 12em;
  margin: 0 0 1.2rem;
}
.hero .lede {
  max-width: 30em;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  font-weight: 400;
  line-height: 1.55;
  color: color-mix(in srgb, var(--night-ink) 90%, transparent);
  opacity: 1;
  margin: 0 0 1.8rem;
}

/* the network over the crowd: nodes on people, edges between them, a few
   labels. Drawn once on load; the delays cascade from --i on each element. */
.hero-notes .node { fill: var(--night-ink); stroke: var(--night); stroke-width: 3; }
.hero-notes .edge { fill: none; stroke: var(--night-ink); stroke-width: 1.6; stroke-opacity: 0.75; }
.hero-notes .leader { fill: none; stroke: var(--night-ink); stroke-width: 1.4; stroke-opacity: 0.9; }
.hero-notes .tag rect { fill: rgba(38, 34, 31, 0.78); }
.hero-notes .tag text { fill: var(--night-ink); font: 500 26px var(--font-display); letter-spacing: 0.02em; }
html.js .hero-notes .node {
  transform-box: fill-box; transform-origin: center;
  opacity: 0;
  animation: note-node 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--i) * 70ms + 400ms);
}
html.js .hero-notes .edge {
  stroke-dasharray: 1400; stroke-dashoffset: 1400;
  animation: note-draw 1.1s ease-out forwards;
  animation-delay: calc(var(--i) * 60ms + 1300ms);
}
html.js .hero-notes .tag {
  opacity: 0;
  animation: note-fade 0.6s ease-out forwards;
  animation-delay: calc(var(--i) * 260ms + 2500ms);
}
@keyframes note-node { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: scale(1); } }
@keyframes note-draw { to { stroke-dashoffset: 0; } }
@keyframes note-fade { to { opacity: 1; } }

/* --- content column ---------------------------------------------------------- */

.home {
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  padding-left: max(1.5rem, env(safe-area-inset-left));
  padding-right: max(1.5rem, env(safe-area-inset-right));
}
.home-section { padding: 6rem 0 0; }
.home h2, .applications h2 {
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
  text-transform: none;
  color: var(--ink);
  max-width: 15em;
  margin: 0 0 1.4rem;
  padding: 0; border: 0;
}
.eyebrow {
  display: block;
  font-size: 0.74rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: lowercase;
  color: var(--ink-mute);
  margin-bottom: 1rem;
}
.prose { max-width: var(--measure); }
.prose p {
  font-size: 1.05rem; line-height: 1.6;
  color: color-mix(in srgb, var(--ink) 92%, transparent);
  margin: 0 0 1.05rem;
}
.prose p:last-child { margin-bottom: 0; }
.chapters-intro { max-width: var(--measure); font-size: 1.1rem; line-height: 1.55; margin: 0; }

/* --- the model: text beside its figure ---------------------------------------- */

.split { display: grid; grid-template-columns: 1fr 1.1fr; gap: 3rem 4rem; align-items: center; }

/* --- the globe band ------------------------------------------------------------ */

/* --- the opening walk-through: globe, society and forecast stacked, then the band ------ */

/* .story wraps the walk-through and the dark band; the dots canvas is sticky
   over the whole of it, so the dots carry on from the forecast into the figures */
.story { position: relative; }
.flow { position: relative; margin-top: 1rem; }
.flow-dots {
  position: sticky; top: 0; display: block; width: 100%; height: 100vh; margin-bottom: -100vh;
  pointer-events: none; z-index: 3;
}
html:not(.js) .flow-dots { display: none; }
.flow-panel {
  position: relative; min-height: 78vh; box-sizing: border-box;
  display: flex; align-items: center;
  padding: 0 max(1.5rem, 5vw);
}
.flow-copy { position: relative; z-index: 2; width: min(26rem, 38vw); }
.flow-copy h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.08; text-transform: none; color: var(--ink); margin: 0 0 1.2rem; padding: 0; border: 0; }
.flow-copy .eyebrow { font-size: 1.05rem; letter-spacing: 0.12em; font-weight: 600; margin-bottom: 1rem; }
.flow-copy p { font-size: 1.1rem; line-height: 1.55; margin: 0 0 1rem; }
.flow-copy p:last-child { margin-bottom: 0; }
.flow-link { color: var(--cluster); font-weight: 500; text-decoration: none; white-space: nowrap; }
.flow-link:hover, .flow-link:focus-visible { text-decoration: underline; text-underline-offset: 0.2em; }
/* the globe is drawn larger than its panel, so part of it runs off the edge */
.flow-panel--globe { overflow: hidden; }
.flow-globe { position: absolute; left: -9%; top: 3%; width: 150%; height: 190%; z-index: 1; }
.flow-globe .lockup { display: none; }
@media (max-width: 760px) {
  .flow-panel { align-items: flex-start; padding-top: 3rem; }
  .flow-copy { width: auto; }
  /* the copy runs the full width at the top of these panels and the rings and
     the plot are drawn on the dots canvas below it, so each panel reserves the
     room they need under however much copy it has; legs.js places them in it */
  .flow-panel--society, .flow-panel--forecast { padding-bottom: min(70vw, 60vh); }
  .flow-globe { left: -40%; top: 35%; width: 180%; height: 180%; }
}

/* --- the applications: one dark band ---------------------------------------------- */

.applications {
  background: var(--night);
  color: var(--night-ink);
  padding: 5.5rem 0 3.5rem;
}
.applications h2 { color: var(--night-ink); }
.applications .chapters-intro { color: var(--night-mute); }
.chapter { margin-top: 6rem; }
/* marketing opens with its network drawn across a band */
.chapter-band {
  position: relative;
  margin: 0;
  height: clamp(320px, 52vh, 620px);
  overflow: hidden;
  background: var(--night);
}
.chapter-band::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(38, 34, 31, 0.75) 0%, rgba(38, 34, 31, 0) 42%);
}
/* the band is a figure for the canvas's sake only: no frame, no padding */
.chapter-band.population { padding: 0; border: 0; }
.chapter-band canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; aspect-ratio: auto; }
.chapter-title {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  max-width: 68rem; margin: 0 auto;
  padding: 0 1.5rem 2.4rem;
  padding-left: max(1.5rem, env(safe-area-inset-left));
  padding-right: max(1.5rem, env(safe-area-inset-right));
}
.chapter-title h3 {
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-transform: none;
  color: var(--night-ink);
  margin: 0.7rem 0 0;
}
.chapter-row { display: grid; grid-template-columns: 1fr 1.1fr; gap: 2.5rem 4rem; align-items: start; padding-top: 3rem; }
.chapter-row--single { grid-template-columns: minmax(0, 42rem); }
.applications .prose p { color: color-mix(in srgb, var(--night-ink) 92%, transparent); }
.applications .legend, .applications .readout-label { color: var(--night-mute); }
/* figures on the band are drawn on the band: no card, a quiet dashed frame */
.applications figure.population { border-color: color-mix(in srgb, var(--night-mute) 35%, transparent); }
.applications figure.population figcaption { color: var(--night-mute); }
.applications .scene-copy p { color: var(--night-ink); }



/* --- figure frames: dashed on paper, a paper card on the dark band ---------------- */

figure.population {
  margin: 0;
  padding: 1.4rem 0;
  border-top: 1px dashed var(--hairline-dashed);
  border-bottom: 1px dashed var(--hairline-dashed);
}
figure.population.card {
  background: var(--ground);
  border: 0;
  border-radius: var(--radius-card);
  padding: 1.2rem 1.2rem 1.1rem;
  box-shadow: 0 24px 60px rgba(20, 16, 12, 0.38);
}
/* aspect-ratio reserves the height before the module sizes the canvas */
figure.population canvas { display: block; width: 100%; aspect-ratio: 4 / 3; }
html:not(.js) figure.population canvas, figure.population canvas[hidden] { display: none; }
.figure-row {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  margin-top: 0.8rem;
}
.readout-label { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.14em; text-transform: lowercase; color: var(--ink-mute); }
.legend {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 0.9rem;
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.08em; text-transform: lowercase;
  color: var(--ink-mute);
}
.legend i {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--tint);
  margin-right: 0.35rem; vertical-align: -1px;
}
figure.population figcaption { margin-top: 0.9rem; font-size: 0.8rem; line-height: 1.5; color: var(--ink-mute); }
.chapter-text .legend { margin-top: 1.4rem; }

/* --- scenes: one block of copy beside a figure that plays on its own clock -------- */

.scene-section { padding-top: 2rem; }
.home--wide { max-width: 86rem; }
.scene { padding-top: 4rem; }
.scene-stage {
  display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.6fr); gap: 2rem 4rem; align-items: center;
}
.scene-figure { grid-column: 2; grid-row: 1; }
.scene-figure figure.population { width: 100%; }
/* the whole figure stays in view while it plays */
.scene-figure figure.population canvas { width: 100%; max-width: calc((100vh - var(--nav-h) - 13rem) * 4 / 3); margin: 0 auto; }
.scene-text { grid-column: 1; grid-row: 1; }
.scene-copy h2 { margin-bottom: 1rem; }
.scene-copy p { font-size: 1.1rem; line-height: 1.55; color: color-mix(in srgb, var(--ink) 92%, transparent); max-width: 24em; margin: 0 0 1rem; }
.scene-copy p:last-child { margin-bottom: 0; }

/* --- chapters: the title opens the chapter above its copy, beside the figure ----- */

.chapter .scene { padding-top: 0; }
.chapter .scene-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.chapter-head { margin-bottom: 1.8rem; }
.chapter-head h3 {
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-transform: none;
  color: var(--night-ink);
  margin: 0;
}

/* --- close ---------------------------------------------------------------------- */

.close { display: grid; grid-template-columns: 1.3fr 1fr; gap: 3rem 4rem; align-items: start; padding: 6rem 0 2rem; }
.close .pill { margin-top: 1.6rem; }
.close-aside { padding-top: 1.4rem; border-top: 1px solid var(--hairline); }
.close-aside a {
  font-size: 1.05rem; font-weight: 500; line-height: 1.45;
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.close-aside a:hover, .close-aside a:focus-visible { color: var(--cluster); border-color: var(--cluster); }

/* --- motion toggle, footer --------------------------------------------------------- */

.motion-toggle {
  position: fixed; right: 1.8rem; bottom: 1.3rem;
  min-height: 44px;
  padding: 0.6rem 0.2rem;
  font-family: inherit; font-size: 0.74rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: lowercase;
  color: var(--ink-mute);
  background: none; border: 0;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  z-index: 35;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.motion-toggle:hover, .motion-toggle:focus-visible { color: var(--ink); border-bottom-color: var(--ink-soft); }
/* over the hero, until the nav records the scroll, the control takes the hero's ink */
body:has(.page-nav--home:not(.scrolled)) .motion-toggle { color: var(--night-mute); }
body:has(.page-nav--home:not(.scrolled)) .motion-toggle:hover,
body:has(.page-nav--home:not(.scrolled)) .motion-toggle:focus-visible { color: var(--night-ink); border-bottom-color: var(--night-soft); }
.motion-toggle[hidden], html:not(.js) .motion-toggle { display: none; }

/* Extra bottom padding keeps the last footer item clear of the fixed motion
   toggle; wrapping keeps the items whole on a phone. */
.page-footer { color: var(--ink-mute); flex-wrap: wrap; text-align: center; padding-bottom: 4.5rem; font-family: var(--font-display); letter-spacing: 0.06em; }
.page-footer > * { white-space: nowrap; }
.page-footer a, .page-footer button { padding: 0.45rem 0; font-family: inherit; }

/* --- entrance: site.js adds .active when a .reveal enters the viewport ------------- */

html.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.6s ease, transform 0.6s ease; }
html.js .reveal.active { opacity: 1; transform: none; }

/* --- breakpoints ------------------------------------------------------------------- */

@media (max-width: 860px) {
  .hero-notes { display: none; }
  .hero-copy { padding-top: 7rem; padding-bottom: 3.2rem; }
  .split, .chapter-row, .close { grid-template-columns: 1fr; gap: 2rem; }
  .home-section { padding-top: 4rem; }
  .chapter { margin-top: 3rem; }
  .chapter-row { padding-top: 2rem; }
  .applications { padding-top: 4rem; }
  .close { padding-top: 4rem; }
}
/* mid-width windows keep the side-by-side scene, with the columns rebalanced */
@media (max-width: 1100px) {
  .scene-stage { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 1.5rem 2.5rem; }
  .scene-copy p { font-size: 1rem; }
  .scene-copy h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
}

/* only a phone stacks the scene: figure above, copy beneath */
@media (max-width: 639px) {
  .scene { padding-top: 3rem; }
  .scene-stage { grid-template-columns: 1fr; gap: 1.5rem; }
  .scene-figure { grid-column: 1; grid-row: 1; }
  .scene-text { grid-column: 1; grid-row: 2; }
  /* the title opens a chapter, so a chapter's copy goes above its figure */
  .chapter .scene-figure { grid-row: 2; }
  .chapter .scene-text { grid-row: 1; }
}
@media (max-width: 640px) {
  .motion-toggle { right: 1.2rem; bottom: 1rem; }
  /* the nav can't hold the wordmark, two links and the pill on a phone; the
     blog link waits in the footer */
  .page-nav--home .page-signin[href="blog/"] { display: none; }
  .hero h1 { font-size: 2.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  html.js .hero-notes .node, html.js .hero-notes .edge, html.js .hero-notes .tag { animation: none; opacity: 1; stroke-dashoffset: 0; }
  .page-nav--home, .pill { transition: none; }
}