/* CurtainCall, assets/pages.css
   The shared stylesheet of the seven pages that are not the homepage: the case-study index, the three case studies
   (Cloaked, Jancroon, Sulver's Journey) and the three legal pages (privacy, terms, cookies). Added 2026-10-11, when Eric
   decided these pages should stop reading as the previous design system (Inter 700 gradient headings, dot eyebrows,
   icon chips, gradient arrow buttons, an uppercase "BACK TO SITE" bar) and speak the homepage's language instead.
   Link order on every page: assets/tokens.css, assets/comic.css, this file, then assets/credits.css (the footer, the
   homepage's end credits, shared with it); each page keeps only its own layout in an inline <style> after them. Like home.css, nothing here writes a raw colour, font size, weight, line height or letter
   spacing: every one is a token, and a value with no token is a reason to add a role to tokens.css, not to write it here.
   Motion is transform and opacity only, hover lives inside the hover query so a tap never sticks, and focus is the one
   global ring. */

/* ---------- Fonts, self-hosted (SIL OFL, licences in assets/fonts/). Instrument Serif for the page titles and section
   headings, Inter 400..700 for everything else; Dekko comes with assets/comic.css. font-weight is literal on purpose:
   @font-face descriptors cannot take var(), and round 6 lost both weights by trying (fixed 2026-10-04). ---------- */
@font-face { font-family: "Instrument Serif"; src: url(/assets/fonts/instrument-serif-regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url(/assets/fonts/inter-latin.woff2) format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Base, as on the homepage ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* No grey flash over the designed press states on a phone tap, and no fake bold of the one-weight serif. */
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; font-synthesis-weight: none; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  font-family: var(--font-body); font-size: var(--text-md); line-height: var(--leading-loose);
  background: var(--surface-page); color: var(--text-primary);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--accent); color: var(--text-on-accent); }
/* Line icons draw the site's 1.8px stroke at any size (2026-10-12, review B8.4): at 16px and 14px a 24-unit icon's 1.8
   thinned to 1.2 and 1.05px. The logo mark keeps its own. */
:is(.nav-back svg, .r-link svg) path { vector-effect: non-scaling-stroke; }
:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); }
/* The ring follows each control's own corners, so the comic button stays square (until 2026-10-12 this rule gave
   everything a 4px radius on focus, review B8.1). Text links paint no box, so their ring alone takes the small corner. */
:is(.logo, .nav-back, .crumb a, .prose a):focus-visible { border-radius: var(--radius-s); }
/* Anything a link jumps to (the skip link's #main among them) stops below the sticky header, not under it. */
[id] { scroll-margin-top: var(--nav-h); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip-link { position: fixed; top: var(--space-2); left: var(--space-2); z-index: var(--z-skip); padding: var(--space-3) var(--space-4); background: var(--accent); color: var(--text-on-accent); font-weight: var(--weight-bold); text-decoration: none; border-radius: var(--radius-pill); transform: translateY(-200%); transition: transform var(--duration-fast) var(--ease-out); }
.skip-link:focus-visible { transform: none; }

/* Texture and light: the homepage's grain over everything, and two soft brand glows fixed behind the page. The glows
   sit at z-index -1, under every line of text, so they light the page without ever tinting a word. */
#grain { position: fixed; inset: 0; z-index: var(--z-grain); pointer-events: none; opacity: .028; width: 100%; height: 100%; }
.bg-glow, .bg-glow-2 { position: fixed; z-index: -1; pointer-events: none; filter: blur(80px); }
.bg-glow { top: -300px; right: -260px; width: 680px; height: 680px; background: radial-gradient(circle, var(--accent-soft), transparent 70%); }
.bg-glow-2 { bottom: -220px; left: -220px; width: 560px; height: 560px; background: radial-gradient(circle, var(--purple-veil), transparent 70%); }

/* ---------- Two widths and no third: the homepage's container for the header, the index and its grid, and one column
   for reading (712px of text, the width the articles always had), with paragraphs inside it capped at 66ch, the
   homepage's longest measure. ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.column { width: 100%; max-width: calc(712px + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Header: the homepage's, with a back link where the homepage has its section links ----------
   Logo on the left, then the back link and the comic "Book a demo" on the right, at the homepage's height and container.
   It lies flat on the page at the top and takes a plate once the page scrolls under it, as the homepage's nav does: the
   inline script in each page's head sets html.js and toggles .is-scrolled. Without the script the plate is always on, so
   text never runs under a bare header. The plate's edge is a soft shadow, not a hairline. It is darker than the
   homepage's (.78 against .58) because the back link has to stay legible over comic art scrolling beneath it. */
.nav { position: sticky; top: 0; z-index: var(--z-nav); height: var(--nav-h); display: flex; align-items: center;
  background: var(--scrim-medium); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); box-shadow: var(--shadow-nav);
  transition: background-color var(--duration-base) ease, box-shadow var(--duration-base) ease; }
html.js .nav:not(.is-scrolled) { background: var(--scrim-none); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.nav-inner { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.nav-ctas { display: flex; align-items: center; gap: var(--space-5); }

.logo { display: inline-flex; align-items: center; min-height: var(--tap-min); gap: .5556em; font-size: var(--text-lg); font-weight: var(--weight-bold); text-decoration: none; line-height: var(--leading-none); }
.logo-icon { width: 1.5556em; height: 1.5556em; flex: none; stroke: var(--accent); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--duration-base) var(--ease-out); }
.logo-text { background: var(--accent-gradient-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; white-space: nowrap; }

/* The back link reads at 76% white, not the homepage nav's 48%: over art that 48% measured 4.0:1 (audit V06). */
.nav-back { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap-min); color: var(--text-body); font-size: var(--text-sm); font-weight: var(--weight-medium); line-height: var(--leading-none); text-decoration: none; white-space: nowrap; transition: color var(--duration-fast) ease, transform var(--duration-fast) var(--ease-out); }
.nav-back svg { width: 16px; height: 16px; flex: none; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--duration-base) var(--ease-out); }
.nav-back::after { content: ""; position: absolute; left: 24px; right: 0; bottom: 10px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease-out); }

/* ---------- Type ---------- */
.eyebrow { display: block; font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: var(--leading-normal); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--accent); }
/* Display type: the serif for every page title and section heading, at its one weight; Inter carries everything else. */
h1, h2, blockquote { font-family: var(--font-display); font-weight: var(--weight-display); letter-spacing: var(--tracking-display); }
h1 { font-size: var(--display-serif-m); line-height: var(--leading-tight); text-wrap: balance; }
h2 { font-size: var(--display-serif-s); line-height: var(--leading-snug); text-wrap: balance; }
h3 { font-size: var(--text-lg); font-weight: var(--weight-semibold); line-height: var(--leading-snug); color: var(--text-primary); text-wrap: balance; }
/* Numbered sections (the legal pages): the number in Inter, cyan and bold, as the homepage sets its step numbers,
   because the serif's 1 is a bare stem that reads as an l ("11." looked like "ll."). */
.sec-num { font-family: var(--font-body); font-size: var(--text-lg); font-weight: var(--weight-bold); letter-spacing: var(--tracking-normal); color: var(--accent); }
.lede { font-size: var(--text-lg); line-height: var(--leading-normal); color: var(--text-body); max-width: 52ch; text-wrap: pretty; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; }
.chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill); border: 1px solid var(--border-accent); background: var(--accent-veil); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-primary); white-space: nowrap; }

/* ---------- Reading: the articles and the legal pages ----------
   One flow rule spaces everything; headings, figures and quotes take more room above them than paragraphs do. */
/* :where() keeps these at one class of specificity, so the heading rules below them win by order and weight alone. */
.prose > * + * { margin-top: var(--space-4); }
.prose > :where(figure, blockquote, table, .note) { margin-top: var(--space-6); }
.prose > :where(figure, blockquote, table, .note) + * { margin-top: var(--space-6); }
.prose > h2 { margin-top: var(--space-7); }
.prose > h3 { margin-top: var(--space-6); }
.prose > :where(h2, h3) + * { margin-top: var(--space-4); }
.prose > h2 + h3 { margin-top: var(--space-5); }
.page-head + .prose { margin-top: var(--space-7); }
.prose p, .prose li { max-width: 66ch; color: var(--text-body); text-wrap: pretty; }
.prose ul { padding-left: 1.25em; }
.prose li + li { margin-top: var(--space-2); }
.prose li::marker { color: var(--accent); }
.prose strong { color: var(--text-primary); font-weight: var(--weight-semibold); }
.prose em { color: var(--text-primary); }
.prose code { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-primary); background: var(--accent-veil); border: 1px solid var(--border-subtle); border-radius: var(--radius-s); padding: 0 var(--space-1); }
/* Links in running text are underlined as well as cyan: cyan against 76% white is a hue change with almost no
   difference in lightness, which is not enough on its own to mark a link. */
.prose a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--accent-glow); text-underline-offset: 3px; transition: color var(--duration-fast) ease, text-decoration-color var(--duration-fast) ease; }

/* Facts tables: hairline rows on the page itself, label and value on one baseline, no box around them. */
.prose table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); line-height: var(--leading-normal); }
.prose th, .prose td { text-align: left; vertical-align: baseline; padding: var(--space-3) 0; border-bottom: 1px solid var(--border-subtle); }
.prose tr:first-child > * { border-top: 1px solid var(--border-subtle); }
.prose th { width: 32%; padding-right: var(--space-5); font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-secondary); }
.prose td { color: var(--text-body); text-wrap: pretty; }
.prose td + td, .prose th + th { padding-left: var(--space-5); } /* th + th: a column-header row (Privacy's purposes table) starts where its cells do */

/* The summary at the top of each legal page. */
.note { padding: var(--space-5); border-radius: var(--radius-m); border: 1px solid var(--border-accent); background: var(--accent-veil); color: var(--text-body); max-width: none; }

/* ---------- The page head (eyebrow, title, lede) ---------- */
.page-head { padding-top: var(--space-7); }
.page-head h1 { margin-top: var(--space-4); }
.page-head .lede { margin-top: var(--space-5); }
.page-head .chips { margin-top: var(--space-5); }
.crumb { margin-bottom: var(--space-5); font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--text-secondary); }
.crumb a { padding-block: calc((var(--tap-min) - 1.2em) / 2); color: var(--text-secondary); text-decoration: none; transition: color var(--duration-fast) ease; } /* inline, so the padding widens the tap target to 44 px without moving the line */
.crumb .sep { margin: 0 var(--space-2); color: var(--text-decorative); }
.eff { margin-top: var(--space-4); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-secondary); }
.eff span { white-space: nowrap; }   /* a date never breaks across two lines */

/* ---------- Case-study figures ---------- */
.render video, .r-frame { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-m); border: 1px solid var(--border-subtle); background: var(--surface-sunken); box-shadow: var(--shadow-glow); }
.render video { object-fit: cover; }
figcaption, .lbl { display: block; margin-top: var(--space-3); font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--text-secondary); text-wrap: balance; }
.lbl { font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
/* Source and result side by side, each pane cut to the source panel's own shape where the page sets one. */
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.compare > div { display: flex; flex-direction: column; }
.compare .pane { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-m); border: 1px solid var(--border-subtle); background: var(--surface-sunken); overflow: hidden; }
.compare img { width: 100%; height: 100%; object-fit: contain; }
.solo img { width: 100%; height: auto; border-radius: var(--radius-m); border: 1px solid var(--border-subtle); background: var(--surface-sunken); }
/* Reveal: the source art above, the generated clip below it, joined by a short labelled arrow. */
.reveal { display: flex; flex-direction: column; align-items: stretch; }
.r-art { display: flex; flex-direction: column; align-items: center; }
.r-art img { width: auto; max-width: min(58%, 340px); border-radius: var(--radius-m); border: 1px solid var(--border-subtle); background: var(--surface-sunken); box-shadow: var(--shadow-card); }
.r-link { display: flex; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-4) 0 var(--space-3); color: var(--accent); font-size: var(--text-2xs); font-weight: var(--weight-bold); line-height: var(--leading-none); letter-spacing: var(--tracking-wider); text-transform: uppercase; }
.r-link::before, .r-link::after { content: ""; height: 1px; flex: 1; max-width: 60px; background: linear-gradient(90deg, var(--accent-veil), var(--accent-glow)); }
.r-link::after { background: linear-gradient(90deg, var(--accent-glow), var(--accent-veil)); }
.r-link svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.r-frame { position: relative; overflow: hidden; }
.r-frame video { width: 100%; height: 100%; object-fit: cover; }

/* Quotes: a customer's words, or our own pull line, set in the serif like a title card, with the credit in Inter.
   No box and no coloured bar down one side. */
blockquote { font-size: var(--display-serif-s); line-height: var(--leading-snug); color: var(--text-primary); text-wrap: balance; }
blockquote cite { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); font-family: var(--font-body); font-size: var(--text-sm); font-style: normal; line-height: var(--leading-normal); letter-spacing: var(--tracking-normal); color: var(--text-secondary); }
blockquote cite::before { content: ""; width: 24px; height: 1px; flex: none; background: var(--accent); }

/* ---------- The closing call to action: a question in the serif, one sentence under it, the comic button. Space sets it
   apart, not a box. ---------- */
.page-cta { margin-top: var(--space-8); }
.page-cta h2 { font-size: var(--display-serif-m); line-height: var(--leading-tight); max-width: 18ch; }
.page-cta p { margin-top: var(--space-4); max-width: 52ch; font-size: var(--text-lg); line-height: var(--leading-normal); color: var(--text-secondary); text-wrap: pretty; }
.page-cta .btn-comic { margin-top: var(--space-6); }

/* ---------- Footer: the homepage's end credits, <footer class="credits">, styled by assets/credits.css (2026-10-11).
   The one thing this file adds is the gap above them: on the homepage the end card's bottom padding opens it, here the
   page ends on its call to action, so the credits keep the old footer's --space-8 above their rule. ---------- */
.credits { margin-top: var(--space-8); }

/* ---------- States: hover warms and lifts (pointer only, so a tap never sticks), focus is the global ring and nothing
   else, pressed scales down; a link inside a line of text cannot scale, so it dims instead. ---------- */
@media (hover: hover) and (pointer: fine) {
  .logo:hover .logo-icon { transform: rotate(-8deg); }
  .nav-back:hover { color: var(--accent-bright); }   /* every link warms toward cyan, to the one hover colour (2026-10-12, review B8.6) */
  .nav-back:hover::after { transform: scaleX(1); }
  .nav-back:hover svg { transform: translateX(-3px); }
  .crumb a:hover { color: var(--accent-bright); }
  .prose a:hover { color: var(--accent-bright); text-decoration-color: currentColor; }
}
.logo:active, .nav-back:active { transform: scale(var(--state-pressed-scale)); }
.prose a:active, .crumb a:active { opacity: var(--state-pressed-opacity); }

/* ---------- Narrow screens ---------- */
@media (max-width: 640px) {
  .page-head { padding-top: var(--space-6); }
  .compare { grid-template-columns: 1fr; gap: var(--space-5); }
  .prose th { width: 38%; padding-right: var(--space-3); }
  .prose td + td, .prose th + th { padding-left: var(--space-3); }
}
/* A phone cannot hold the logo, the back link and the comic button in one row (about 470px, where a 390px phone has 354
   inside its gutters), so
   the header keeps the way out and lets the button go, as the homepage's nav does under 1024px; every article and the
   index still end on the same button. .nav .nav-demo outranks comic.css's .btn-comic display whatever the load order. */
@media (max-width: 560px) {
  .nav .nav-demo { display: none; }
  /* The legal pages' two dates: one line needs about 405px, so on a phone it broke after the separator and left the dot
     hanging at the end of the first line. Here each date takes its own line and the dot goes. */
  .eff span { display: block; }
  .eff .eff-sep { display: none; }
}

/* ---------- Reduced motion: nothing slides, shakes or lifts over time; state changes land at once. The looping clips
   are stopped by the inline script, which also gives them controls. ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
/* Reduced transparency: the header plate turns solid rather than frosted. */
@media (prefers-reduced-transparency: reduce) {
  .nav, html.js .nav.is-scrolled { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--surface-glass-solid); }
  html.js .nav:not(.is-scrolled) { background: var(--scrim-none); }
}