/* Calm theme for the case pages (2026-10-04), layered over styles.css and case.css.
   Same look as calm.css on the homepage: white and light-gray sections, system type,
   blue arrow links, a plum footer. The previous design is archived in
   ~/portfolio-archive/editorial-design-2026-10-04. */

:root {
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --sans: var(--font);
  --serif: Georgia, "Times New Roman", serif;
  --ink: #1a1a1a;
  --gray: #595959;
  --line: #dcdcdc;
  --tint: #f4f4f4;
  --mint: #e3f2e8;
  --blue: #1a5ea8;
  --blue-dark: #144a85;
  --focus: #cde1f9;
  --plum: #2f1b2b;
  --pad-x: 24px;
  --pad-y: clamp(48px, 6vw, 80px);
}

html, body { background: #fff; }
body { color: var(--ink); font-size: 18px; line-height: 1.6; -webkit-font-smoothing: auto; }

/* ───── header (same as the homepage) ───── */
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.site-head { background: #fff; border-bottom: 3px solid var(--plum); }
.site-head .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; padding-top: 18px; padding-bottom: 18px; }
.site-head a { border-bottom: 0; padding: 0; }
.site-head a:hover { opacity: 1; }
.brand { color: var(--ink); display: flex; flex-direction: column; line-height: 1.25; }
.brand strong { font-size: 18px; }
.brand span { font-size: 14px; color: var(--gray); }
.site-nav { display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: 16px; font-weight: 700; }
.site-nav a { color: var(--blue); }
.site-nav a:hover { text-decoration: underline; text-underline-offset: 3px; }
.case-nav { display: none; }

/* ───── sections: white and light gray, one column up to 1080px ───── */
.panel, .panel--ink, .cs--paper, .ch--cw, .ch--steady, .ch--handit, .ch--ph, .ch--book,
.ch--docs, .ch--guide, .ch--aiha, .ch--talk {
  --bg: #fff; --fg: #1a1a1a; --soft: #333; --muted: #595959; --slot: #f4f4f4;
  --rule: 1px solid #dcdcdc;
}
.panel { padding-left: max(var(--pad-x), calc((100% - 1080px) / 2)); padding-right: max(var(--pad-x), calc((100% - 1080px) / 2)); }
main > .panel { border-top: 1px solid var(--line); }
main > .panel:first-child { border-top: 0; }
main > .panel:nth-of-type(even) { --bg: var(--tint); --slot: #fff; border-top: 0; }

/* ───── links: blue, underlined, arrows for the next step ───── */
main a { color: var(--blue); border-bottom: 1px solid currentColor; padding-bottom: 0; }
main a:hover { color: var(--blue-dark); opacity: 1; border-bottom-width: 2px; }
a:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; background: var(--focus); }
.cta, .fit-links a { font-size: 17px; font-weight: 700; border-bottom-width: 1px; }
.cta::after { content: none; }
.cta::before { content: "→\00a0"; }
.cta--out::after, .fit-links .cta--out::after { content: "\00a0↗"; }
.fit-links a::before { content: "→\00a0"; }

/* ───── type ───── */
.ch-meta { font-family: var(--font); font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted); gap: 4px 16px; }
.ch-meta span, .jump a { display: inline-block; }
.ch-meta span::first-letter, .jump a::first-letter, .cs-title::first-letter, .sub-title::first-letter,
.summary dt::first-letter, .facts dt::first-letter, .label::first-letter { text-transform: uppercase; }

.case-hero { padding-top: clamp(40px, 6vw, 72px); }
.case-title, .case-title--long, .case-title--book {
  font-size: clamp(34px, 4.6vw, 46px); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; max-width: none; margin-top: 6px;
}
.case-lead { font-size: clamp(19px, 1.9vw, 22px); line-height: 1.5; letter-spacing: 0; max-width: 38em; }
.cs-title { font-size: clamp(26px, 3vw, 32px); font-weight: 700; line-height: 1.2; letter-spacing: -.005em; }
.cs-lead, .cs-lead--wide { font-size: clamp(19px, 1.9vw, 21px); line-height: 1.5; letter-spacing: 0; max-width: 38em; }
.sub { margin-top: clamp(40px, 5vw, 64px); }
.sub-title { font-size: 21px; font-weight: 700; line-height: 1.3; letter-spacing: 0; }
.prose p { font-size: 18px; }
.prose-lg { font-size: clamp(18px, 1.7vw, 20px); }
.decisions h3 { font-size: 20px; font-weight: 700; letter-spacing: 0; }
.decisions p, .notes p, .rules li > p { color: var(--ink); }
.notes h4, .rules h4 { font-weight: 700; letter-spacing: 0; }
.rules li::before, .steps li::before { font-size: 30px; font-weight: 700; letter-spacing: 0; color: var(--plum); }
.name-trail { font-size: clamp(26px, 3.4vw, 36px); font-weight: 700; letter-spacing: 0; }
.name-word { font-size: clamp(30px, 3.6vw, 44px); }
.big-line { font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; letter-spacing: 0; }
.stats dt { font-size: clamp(30px, 3.6vw, 42px); font-weight: 700; letter-spacing: 0; }
.headlines s, .headlines strong { font-size: clamp(20px, 2.4vw, 28px); letter-spacing: 0; }
.headlines strong { font-weight: 700; }
.glossary dt { font-size: 24px; color: var(--fg); letter-spacing: 0; }
.parts strong { font-size: 22px; font-weight: 700; letter-spacing: 0; }
.insight { font-size: clamp(20px, 2.4vw, 28px); letter-spacing: 0; }
.pull-quote p { font-size: clamp(19px, 2vw, 24px); letter-spacing: 0; }
.pull-quote { border-left: 4px solid var(--plum); }
.ui-quotes q { letter-spacing: 0; }

/* small parts */
.summary dt, .facts dt { font-size: 15px; font-weight: 700; }
.chips li { background: #fff; color: var(--ink); box-shadow: none; border: 1px solid #b9b9b9; border-radius: 999px; padding: 4px 12px; font-size: 14px; }
.ba-tag { background: #fff; color: var(--ink); border: 1px solid #b9b9b9; }
.btn { background: var(--blue); color: #fff; border: 0; }
main a.btn:hover { background: var(--blue-dark); color: #fff; }
.browser, .shot img { box-shadow: 0 1px 2px rgb(0 0 0 / .06), 0 6px 18px -8px rgb(0 0 0 / .18); }

/* ───── footer: the "next" panel becomes the plum footer ───── */
main > section.panel.case-next {
  --bg: var(--plum); --fg: #fff; --muted: rgb(255 255 255 / .75); --soft: rgb(255 255 255 / .9);
  --rule: 1px solid rgb(255 255 255 / .25);
  border-top: 0; padding-top: clamp(44px, 5vw, 64px); padding-bottom: 36px;
}
.case-next .label { font-size: 15px; font-weight: 600; color: var(--muted); }
.case-next a { color: #fff; }
.case-next a:hover { color: #fff; }
.case-next a:focus-visible { outline-color: #fff; background: rgb(255 255 255 / .15); }
.next-link, .next-link--long { font-size: clamp(28px, 3.4vw, 36px); font-weight: 700; line-height: 1.2; letter-spacing: 0; border-bottom: 0; }
main .next-link:hover { text-decoration: underline; text-underline-offset: 4px; border-bottom: 0; }
.case-next .contact-row { font-size: 16px; margin-top: 8px; padding-top: 18px; border-top: var(--rule); }