/* Ne yapıyoruz — chapter styles. Shared rules live in ../shared/site.css */
/* Fitted type: page.js sizes these so the widest line fits at the widest axis values the motion can reach */
.fit .ln { display: block; }
.fitted .ln { width: max-content; max-width: none; margin-inline: auto; white-space: nowrap; }

/* 1 · Hero */
.hero-type {
  font-size: var(--t-display); line-height: .92; letter-spacing: -.02em;
  font-variation-settings: "wght" 820, "wdth" 100; text-wrap: balance;
}
.hero-type .ln { padding-bottom: .05em; }
.hero-type .ln.masked { clip-path: inset(-40% -50vw 0 -50vw); }
.hero-type .c {
  --w: 820;
  font-variation-settings:
    "wght" clamp(100, calc(var(--w) - var(--wq, 0)), 900),
    "wdth" clamp(50, calc(var(--s, 100) + var(--pw, 0) - var(--sq, 0)), 120);
}
.hero-sub {
  margin-top: clamp(20px, 4svh, 44px);
  max-width: 34ch; font-size: var(--t-lead); line-height: 1.45;
  font-variation-settings: "wght" 460, "wdth" 100;
  color: color-mix(in srgb, var(--ink) 86%, var(--red)); text-wrap: balance;
}
.cue {
  position: absolute; left: 50%; bottom: 28px; translate: -50% 0;
  display: grid; justify-items: center; gap: 10px;
  font-size: .8rem; font-variation-settings: "wght" 600, "wdth" 120;
  color: color-mix(in srgb, var(--ink) 82%, var(--red));
}
.cue i { width: 2px; height: 36px; background: currentColor; transform-origin: top; animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* 2 · Rail */
.rail-ch {
  --plw: min(56vw, 760px); --plh: min(46svh, 420px); --plg: clamp(14px, 2vw, 32px);
  padding-inline: 0; align-content: center; gap: clamp(20px, 4svh, 44px);
}
.rail-h {
  padding-inline: var(--gut);
  font-size: var(--t-h2); line-height: 1.04; letter-spacing: -.025em;
  font-variation-settings: "wght" 800, "wdth" 112; text-wrap: balance;
}
.rail-view { width: 100%; text-align: left; }
.rail-track { list-style: none; margin: 0; padding: 0; position: relative; }
.plate {
  display: grid; align-content: center; justify-items: center; gap: clamp(14px, 3svh, 30px);
  padding: clamp(20px, 3.6vw, 56px); text-align: center;
  border-radius: clamp(18px, 2.4vw, 36px);
}
.pl-t {
  font-size: var(--t-h2); line-height: .98; letter-spacing: -.02em;
  font-variation-settings: "wght" clamp(100, var(--w, 800), 900), "wdth" clamp(50, var(--s, 100), 130);
  font-variation-settings: "wght" round(clamp(100, var(--w, 800), 900), 10), "wdth" round(clamp(50, var(--s, 100), 130), 2);
}
.pl-d {
  max-width: 34ch; font-size: var(--t-lead); line-height: 1.45;
  font-variation-settings: "wght" 500, "wdth" 104; text-wrap: balance;
}
.pl-d b { font-weight: inherit; font-variation-settings: "wght" 800, "wdth" 104; }

.motion .rail-view { overflow: clip; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.motion .rail-view:focus-visible { outline-offset: -6px; }
.motion .rail-ch.dragging .rail-view { cursor: grabbing; }
.motion .rail-track { display: flex; gap: var(--plg); width: max-content; will-change: transform; }
.motion .plate { flex: none; width: var(--plw); height: var(--plh); }

.rail-ui { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 2vw, 24px); padding-inline: var(--gut); }
.rail-btn {
  appearance: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation;
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--paper); color: var(--ink); transition: background .3s var(--ease);
}
.rail-btn:hover { background: var(--red); }
.rb-in { display: grid; place-items: center; pointer-events: none; }
.rail-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.rail-pos { display: flex; align-items: center; gap: 7px; }
.rail-pos i { display: block; width: 8px; height: 8px; border-radius: 4px; background: currentColor; opacity: .35; }
.rail-pos i:first-child { width: 34px; opacity: 1; }
.rail-hint {
  padding-inline: var(--gut); font-size: clamp(.9rem, 1.1vw, 1rem);
  font-variation-settings: "wght" 480, "wdth" 108; color: color-mix(in srgb, var(--paper) 74%, var(--ink));
}
.still .rail-ui, .still .rail-hint { display: none; }
.still .rail-track { display: grid; gap: 16px; padding-inline: var(--gut); }
.still .plate { padding-block: clamp(40px, 8vw, 88px); }

/* 3 · Template page */
.sab .pin { gap: clamp(14px, 2.6svh, 28px); }
.sab-h { font-size: var(--t-h2); line-height: 1; letter-spacing: -.03em; font-variation-settings: "wght" 860, "wdth" 100; }
.sab-h .c { --w: 860; }
.sab-price { font-size: var(--t-h3); line-height: 1.1; text-wrap: balance; color: var(--cobalt); font-variation-settings: "wght" 780, "wdth" 104; }
.sab-list { list-style: none; padding: 0; display: grid; gap: 28px; margin-top: clamp(16px, 5svh, 56px); }
.sab-list > li {
  max-width: 18ch; margin-inline: auto;
  font-size: var(--t-h3); line-height: 1.15; letter-spacing: -.015em;
  font-variation-settings: "wght" 640, "wdth" 96; text-wrap: balance;
}
.motion .sab-list > li { grid-area: 1 / 1; align-self: center; }

/* Prices: the figure at --t-figure, the words around it at the paragraph's --t-h3 */
.fig { font-size: var(--t-figure); white-space: nowrap; }

/* 4 · Custom page */
.oz { align-content: start; gap: clamp(20px, 4svh, 40px); padding-block: 0 22svh; }
.oz-head { min-height: 80svh; display: grid; align-content: center; justify-items: center; gap: clamp(14px, 2.6svh, 28px); }
.oz-h { font-size: var(--t-h2); line-height: 1; letter-spacing: -.03em; font-variation-settings: "wght" 860, "wdth" 100; }
.oz-h .c { --w: 860; }
.oz-price { font-size: var(--t-h3); line-height: 1.1; text-wrap: balance; font-variation-settings: "wght" 800, "wdth" 104; }
.oz-sub { font-size: var(--t-lead); font-variation-settings: "wght" 520, "wdth" 104; }
.oz-q { font-size: var(--t-h3); line-height: 1.1; font-variation-settings: "wght" 720, "wdth" 110; }
.oz-list { list-style: none; padding: 0; display: grid; gap: clamp(40px, 8svh, 96px); padding-block: 4svh 0; width: 100%; }
.oz-i {
  font-size: var(--t-h2); line-height: 1; letter-spacing: -.02em;
  font-variation-settings: "wght" clamp(100, var(--w, 800), 900), "wdth" clamp(50, var(--s, 100), 125);
  font-variation-settings: "wght" round(clamp(100, var(--w, 800), 900), 10), "wdth" round(clamp(50, var(--s, 100), 125), 2);
}

/* 5 · Extras */
.ex .pin { gap: clamp(22px, 4.4svh, 48px); }
.ex-h {
  max-width: 17ch; font-size: var(--t-h2); line-height: 1.04; letter-spacing: -.025em;
  font-variation-settings: "wght" 800, "wdth" 104; text-wrap: balance;
}
.ex-list {
  position: relative; list-style: none; padding: 0; width: 100%; max-width: 24em;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .14em .5em;
  font-size: var(--t-h3); line-height: 1.2; letter-spacing: -.01em;
}
.ex-i { white-space: nowrap; font-variation-settings: "wght" 820, "wdth" 100; }
.ex-i.hot { color: var(--red); }
.ex-in { display: inline-block; }
.ex-sort { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ex-btn {
  appearance: none; border: 0; cursor: pointer; touch-action: manipulation;
  min-height: 44px; padding: 0 18px; border-radius: 999px; color: inherit;
  font: inherit; font-size: 1rem; font-variation-settings: "wght" 650, "wdth" 108;
  background: color-mix(in srgb, currentColor 12%, transparent); transition: background .3s var(--ease), color .3s var(--ease);
}
.ex-btn:hover { background: color-mix(in srgb, currentColor 22%, transparent); }
.ex-btn[aria-pressed="true"] { background: var(--red); color: var(--ink); }
.ex-notes { display: grid; gap: 10px; max-width: 46ch; margin-inline: auto; }
.ex-notes p {
  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) 82%, var(--ink));
}

/* 6 · Templates */
.tp, .cl { align-content: center; gap: clamp(28px, 5svh, 56px); }
.tp-h, .cl-h {
  max-width: 15ch; font-size: var(--t-h2); line-height: 1.04; letter-spacing: -.025em;
  font-variation-settings: "wght" 820, "wdth" 100; text-wrap: balance;
}
.tp-h .c, .cl-h .c { --w: 820; }

.still .cue i { animation: none; }
@media (max-width: 640px) {
  .cue { display: none; }
  .rail-ch { --plw: 82vw; --plh: min(52svh, 440px); }
  .ex-i { white-space: normal; }
  .rail-btn { width: 48px; height: 48px; }
}
@media (prefers-contrast: more) { .hero-sub, .rail-hint, .ex-notes p { color: inherit; } }