/* Ana sayfa — chapter styles. Shared rules live in shared/site.css */

.pin { position: relative; }
.ch-link {
  display: inline-flex; white-space: nowrap; align-items: center; gap: .5em; text-decoration: none;
  font-size: clamp(1rem, 1.4vw, 1.2rem); font-variation-settings: "wght" 650, "wdth" 112;
  padding: .55em 1em; border-radius: 999px;
  background: color-mix(in srgb, currentColor 12%, transparent);
  transition: background .3s var(--ease);
}
.ch-link:hover { background: color-mix(in srgb, currentColor 22%, transparent); }
.ch-link svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--ease); }
.ch-link:hover svg { transform: translateX(4px); }
.motion .pin > .ch-link { position: absolute; left: 50%; bottom: clamp(20px, 4svh, 40px); translate: -50% 0; z-index: 2; }
.still .ch-link { margin-top: 32px; }

/* 1 · Hero */
.h-type { font-size: var(--t-display); line-height: .95; letter-spacing: -.025em; font-variation-settings: "wght" 820, "wdth" 100; }
.h-line { display: block; white-space: nowrap; }
.h-type .c { --w: 820; opacity: calc(var(--fi, 1) * var(--fo, 1)); }   /* intro and scroll each own one factor */
.h-sub {
  margin-top: clamp(20px, 3.6svh, 40px); max-width: 40ch; margin-inline: auto;
  font-size: var(--t-lead); line-height: 1.45; text-wrap: balance;
  font-variation-settings: "wght" 440, "wdth" 100; color: color-mix(in srgb, var(--paper) 80%, var(--ink));
}
.h-actions { margin-top: clamp(18px, 3svh, 32px); }

/* 2 · Sentence */
.say {
  max-width: 22ch; font-size: var(--t-h2); line-height: 1.08; letter-spacing: -.025em;
  font-variation-settings: "wght" 700, "wdth" 92; text-wrap: balance;
}
.say em { font-style: normal; color: var(--cobalt); font-variation-settings: "wght" 860, "wdth" 92; }

/* 3 · Who: horizontal track */
.motion .hz, .motion .plates, .motion .rail { will-change: transform; }
.hz { display: flex; align-items: center; gap: 7vw; width: max-content; text-align: center; }
.motion .hz { justify-self: start; }
.hz-item { display: grid; justify-items: center; gap: clamp(12px, 2.4svh, 28px); }
.hz-word { font-size: var(--t-display); line-height: .95; letter-spacing: -.03em; white-space: nowrap; font-variation-settings: "wght" 800, "wdth" 100; }
.hz-word .c { --w: 300; --s: 70; }
.hz-last { color: var(--red); }
/* on the cobalt band the red reads 2.3 : 1; mixed towards the band's own text colour it clears the 3 : 1 large text
   needs in every palette */
[data-theme="cobalt"] .hz-last { color: color-mix(in srgb, var(--red) 40%, var(--paper)); }
.hz-cap { max-width: 36ch; font-size: var(--t-lead); line-height: 1.35; font-variation-settings: "wght" 480, "wdth" 104; color: color-mix(in srgb, var(--paper) 86%, var(--cobalt)); text-wrap: balance; }
.still .hz { flex-direction: column; width: 100%; gap: 56px; }
.still .hz-word { white-space: normal; }

/* 4 · What: draggable rail */
.what { align-content: center; gap: clamp(22px, 4svh, 44px); padding-inline: 0; }
.what-h { padding-inline: var(--gut); font-size: var(--t-h2); line-height: 1.05; letter-spacing: -.025em; font-variation-settings: "wght" 800, "wdth" 100; text-wrap: balance; }
.rail-wrap { width: 100%; overflow: clip; touch-action: pan-y; cursor: grab; outline-offset: -6px; }
.rail-wrap.dragging { cursor: grabbing; }
.rail { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(12px, 1.6vw, 24px); width: max-content; text-align: left;  }
.motion .rail { padding-inline: calc(50vw - var(--pw-plate) / 2); }
.rail-wrap { --pw-plate: min(78vw, 600px); }
.plate {
  flex: none; width: var(--pw-plate); min-height: min(52svh, 440px);
  display: grid; align-content: space-between; gap: 24px;
  padding: clamp(22px, 3vw, 40px); border-radius: 16px; user-select: none;
}
.pl-t {
  font-size: var(--t-h3); line-height: 1; letter-spacing: -.015em;
  font-variation-settings: "wght" 780, "wdth" 108;
}
.pl-d { max-width: 32ch; font-size: var(--t-lead); line-height: 1.4; font-variation-settings: "wght" 460, "wdth" 100; }
.rail-ui { display: flex; align-items: center; justify-content: center; gap: 16px; }
.rail-btn {
  appearance: none; border: 0; cursor: pointer; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; color: var(--ink); background: color-mix(in srgb, var(--ink) 12%, transparent);
  transition: background .3s var(--ease);
}
.rail-btn:hover { background: color-mix(in srgb, var(--ink) 22%, transparent); }
.rail-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.rail-bar { position: relative; width: min(40vw, 220px); height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 18%, transparent); overflow: hidden; }
.rail-bar i { position: absolute; inset: 0 auto 0 0; width: calc(100% / 9); border-radius: 4px; background: var(--ink); }
.still .rail { flex-wrap: wrap; justify-content: center; width: 100%; padding-inline: var(--gut); }
.still .rail-ui { display: none; }
.still .rail-wrap { cursor: auto; }

/* 5 · Zoom */
.zoom-word { position: relative; font-size: var(--t-display); line-height: 1; letter-spacing: -.03em; white-space: nowrap; font-variation-settings: "wght" 900, "wdth" 110; color: var(--paper); }
.zoom-word .c { --w: 900; --s: 110; }
.zoom-word .o { color: var(--red); }
.zoom-fill { display: none; }
.motion .zoom-fill { display: block; position: absolute; inset: 0; background: var(--paper); clip-path: circle(0px at 50% 50%); }
.still .zoom { min-height: 60svh; }

/* 6 · How: drawn path */
.how .pin { align-content: start; padding-top: clamp(84px, 14svh, 150px); }
.how-h { max-width: 24ch; margin-inline: auto; font-size: var(--t-h3); line-height: 1.15; letter-spacing: -.01em; font-variation-settings: "wght" 560, "wdth" 100; text-wrap: balance; }
.steps { list-style: none; padding: 0; }
.motion .steps { display: grid; margin-top: clamp(16px, 4svh, 48px); }
.motion .step { grid-area: 1 / 1; }
.step { display: grid; justify-items: center; gap: 10px; }
.st-n { font-size: clamp(1rem, 1.4vw, 1.2rem); font-variation-settings: "wght" 800, "wdth" 125; color: var(--cobalt); }
.st-t { font-size: var(--t-h2); line-height: 1; letter-spacing: -.03em; white-space: nowrap; font-variation-settings: "wght" 850, "wdth" 100; }
.st-t .c { --w: 850; }
.st-d { max-width: 40ch; font-size: var(--t-lead); line-height: 1.4; font-variation-settings: "wght" 460, "wdth" 100; text-wrap: balance; }
.path { display: none; }
.motion .path { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.path path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.path-bg { stroke: color-mix(in srgb, var(--ink) 12%, transparent); stroke-width: 3; }
.path-fg { stroke: var(--cobalt); stroke-width: 7; }
.path-tip { fill: var(--cobalt); }
.path-text { fill: none; stroke: none; }
.path text { fill: currentColor; font-variation-settings: "wght" 650, "wdth" 108; letter-spacing: .01em; }
.still .steps { display: grid; gap: 56px; margin-top: 56px; }
.still .st-t { white-space: normal; }

/* 7 · Why: stacking plates */
.motion .why > .pin { padding: 0; }
.plates { list-style: none; padding: 0; width: 100%; }
.motion .plates { position: relative; height: 100svh; }
.sp { position: relative; display: grid; place-content: center; justify-items: center; gap: clamp(14px, 3svh, 30px); padding: 96px var(--gut); text-align: center; }
.motion .sp { position: absolute; inset: 0; transform-origin: 50% 0; }
.sp::after { content: ""; position: absolute; inset: 0; background: var(--ink); opacity: var(--dim, 0); pointer-events: none; }
.sp-t { max-width: 14ch; font-size: var(--t-display); line-height: .98; letter-spacing: -.03em; text-wrap: balance; font-variation-settings: "wght" 850, "wdth" 100; }
.sp-t .c { --w: 850; }
.sp-d { max-width: 36ch; font-size: var(--t-lead); line-height: 1.35; font-variation-settings: "wght" 480, "wdth" 100; text-wrap: balance; }
.still .sp { min-height: 70svh; }
.still .sp-t { white-space: normal; }
.motion .why .ch-link { color: var(--paper); background: var(--ink); }
.motion .why .ch-link:hover { background: color-mix(in srgb, var(--ink) 80%, var(--paper)); }

/* 8 · Prices: odometer */
.price-list { list-style: none; padding: 0; display: grid; gap: 48px; }
.price { display: grid; gap: 10px; justify-items: center; }
.p-label { font-size: var(--t-h3); font-variation-settings: "wght" 500, "wdth" 110; }
.p-num { font-size: var(--t-h2); line-height: .95; letter-spacing: -.03em; color: var(--red); font-variation-settings: "wght" 850, "wdth" 100; text-wrap: balance; }
.p-extra { margin-top: clamp(20px, 4svh, 40px); max-width: 40ch; margin-inline: auto; font-size: clamp(1rem, 1.5vw, 1.3rem); line-height: 1.4; font-variation-settings: "wght" 460, "wdth" 104; color: color-mix(in srgb, var(--paper) 80%, var(--ink)); text-wrap: balance; }
.stage { display: grid; justify-items: center; gap: clamp(8px, 2svh, 20px); width: 100%; }
.stack { display: grid; width: 100%; }
.stack > * { grid-area: 1 / 1; }
.mk, .mk > span { display: block; white-space: nowrap; }
.mk { clip-path: inset(-20% -50vw 0 -50vw); padding-bottom: .08em; }
.st-label { font-size: var(--t-h3); font-variation-settings: "wght" 500, "wdth" 112; line-height: 1.15; }
.st-note { font-size: var(--t-lead); font-variation-settings: "wght" 500, "wdth" 112; color: color-mix(in srgb, var(--paper) 80%, var(--ink)); }
.odo { display: inline-flex; color: var(--red); font-size: var(--t-figure); line-height: 1; letter-spacing: -.02em; font-variation-settings: "wght" 850, "wdth" 100; }
.col { display: inline-block; height: 1em; overflow: clip; }
.strip { display: block; }
.strip > span { display: block; height: 1em; text-align: center; }
.sep { display: inline-block; }

/* 9 · Close */
.close { align-content: center; gap: clamp(18px, 3.4svh, 36px); padding-inline: 0; }
.close .marquee { width: 100%; overflow: clip; white-space: nowrap; text-align: left; line-height: .9; }
.close .track { display: flex; width: max-content; font-size: var(--t-display); font-variation-settings: "wght" 160, "wdth" 54; color: color-mix(in srgb, var(--ink) 82%, var(--red)); }
.close .track > span { flex: none; padding-right: .3em; }
.still .close .track { white-space: normal; width: auto; display: block; text-align: center; font-size: var(--t-h3); padding-inline: var(--gut); }
.close-h { font-size: var(--t-display); line-height: .95; letter-spacing: -.03em; white-space: nowrap; font-variation-settings: "wght" 500, "wdth" 100; }
.close-p { font-size: var(--t-lead); font-variation-settings: "wght" 520, "wdth" 104; }
.close-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 28px; }
.mail { font-size: clamp(1.05rem, 1.6vw, 1.35rem); font-variation-settings: "wght" 650, "wdth" 108; text-underline-offset: .25em; text-decoration-thickness: 2px; }

@media (max-width: 640px) {
  .motion .pin > .ch-link { bottom: 18px; }
  .rail-wrap { --pw-plate: 82vw; }
}
@media (prefers-contrast: more) { .h-sub, .hz-cap, .p-extra, .st-note { color: inherit; } }