/* Canonical entry for public pages and the case skeleton. Load page composition after this. */
/* Shared by Work, About, Services and case pages. Specs: design-system.md. */
:root {
  color-scheme: light;
  --bg: #FAFAF7; --surface: #F2F1ED; --border: #E0DED8;
  --text-primary: #1C1B18; --text-secondary: #57544D; --text-soft: #807F7C;
  --sage: #D8E3DD; --frost: #DAD9E6;
  --primary: #0F6B5E; --primary-hover: #0A5A4E; --primary-subtle: #E8F4F2; --primary-soft: #AFCCC6;
  --depth: #1E3D7B; --depth-soft: #E8EDF4;
  --indigo: #3D3B8E; --indigo-soft: #ECEAF6;
  --deep-green: #1E5E3D; --quiet: #4A6B8A; --signal: #D4941C; --signal-tint: #F4DFA8;
  --signal-on-dark: var(--signal-tint);
  --signal-ink: #805500;
  --on-dark: #F7F5EE; --on-dark-soft: #D7D4CC;

  --page-max: 1440px; --content-wide: 1200px; --content-std: 960px; --content-text: 680px;
  --content-max: var(--content-std); /* Work compatibility alias. */
  --gutter: 48px; --gutter-phone: 24px;

  --s-4: 4px; --s-8: 8px; --s-12: 12px; --s-16: 16px; --s-20: 20px;
  --s-24: 24px; --s-32: 32px; --s-48: 48px; --s-64: 64px;
  --s-80: 80px; --s-96: 96px;
  --section-pad-y: var(--s-96);

  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px;

  --f-display: 'Red Hat Display', sans-serif;
  --f-personal: 'DM Serif Display', serif;
  --f-body: 'Figtree', sans-serif;
  --f-quote: 'IBM Plex Serif', serif;
  --f-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* Shared text roles use the palette and font tokens above directly. */
  --heading-narrative-weight: 400;
  --card-title-weight: 700;
  --card-title-size: 20px; --card-title-compact-size: 15px;
  /* 15px desktop is an author-requested trial, pending visual approval. */
  --card-description-size: 15px; --card-description-leading: 1.55;
  --card-description-phone-size: 16px; --card-description-phone-leading: 1.5;

  --action-size: 17px; --action-icon-size: 16px; --action-min-height: 44px;
  --body-size: 17px; --body-large-size: 18px; --label-size: 13px;
  --shadow-subtle: 0 1px 2px rgba(0,0,0,.04);
  --shadow-medium: 0 12px 28px -12px rgba(61,59,142,.45);
  --shadow-heavy: 0 40px 80px -30px rgba(0,0,0,.5);
  --shadow-media: 0 24px 48px -24px rgba(0,0,0,.2);
  --caption-line-height: 1.6;

  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Shared reset and page foundation. Page compositions live in styles/pages/. */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { overflow-x: clip; }
body {
  background: var(--bg); color: var(--text-primary);
  font-family: var(--f-body); font-size: 16px; line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

@media (max-width: 1024px) { :root { --gutter: 32px; } }
@media (max-width: 767px) { :root { --gutter: var(--gutter-phone); } }

/* Width and spacing only; composition and surface belong to the section. */
.section-frame { max-width: var(--frame-width, var(--content-wide)); margin: 0 auto; padding: var(--section-pad-y) var(--gutter); }
.section-frame--standard { --frame-width: var(--content-std); }
.section-frame--full { --frame-width: var(--page-max); }

/* Case semantics. These rules do not impose case composition on Work/Expertise/CV. */
.eyebrow {
  font-family: var(--f-body); font-size: var(--label-size); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary);
}
.eyebrow.on-dark { color: var(--signal-on-dark); }
.eyebrow.on-frost { color: var(--indigo); }
.h-section, h2.h-band {
  font-family: var(--f-personal); font-weight: var(--heading-narrative-weight);
  font-size: clamp(32px, 3.4vw, 48px); line-height: 1.15;
  letter-spacing: -0.01em; color: var(--text-primary);
}
.h-sub {
  font-family: var(--f-display); font-weight: 700;
  font-size: 28px; line-height: 1.2; letter-spacing: -0.015em; color: var(--text-primary);
}
.top-bar {
  position: absolute; top: 0; left: 0; right: 0;
  padding: var(--s-32) var(--gutter);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--f-display); font-weight: 900;
  font-size: 14px; letter-spacing: 0.02em; text-transform: uppercase; z-index: 20;
}
.top-bar a { color: var(--on-dark); opacity: .85; transition: opacity .2s var(--ease); }
.top-bar a:hover { opacity: 1; }
.top-bar .crumb { display: flex; align-items: center; gap: var(--s-12); }
.top-bar .crumb .sep { opacity: .4; }
.top-bar .name-link { color: var(--on-dark); }
@media (max-width: 640px) { :root { --section-pad-y: var(--s-64); } }

/* An author's editorial conclusion, distinct from an artifact explanation. */
.editorial-statement {
  font-family: var(--f-personal);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--text-primary);
  text-wrap: balance;
}

/* FigureCaption explains an artifact. Page CSS owns its width and placement. */
.figure-caption {
  --caption-accent: var(--primary);
  margin-top: var(--s-16);
  font: 400 var(--body-size)/var(--caption-line-height) var(--f-body);
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-primary);
}
.figure-caption > :where(p) { font: inherit; color: inherit; }
.figure-caption > :where(p + p) { margin-top: var(--s-16); }
.figure-caption b, .figure-caption strong { font-weight: 600; }
.figure-caption__label {
  display: block;
  font: 600 var(--label-size)/1.5 var(--f-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--caption-accent, var(--primary));
}
.figure-caption__source {
  display: block;
  margin-top: var(--s-8);
  font: 400 var(--label-size)/1.5 var(--f-body);
  color: var(--text-secondary);
}
.figure-caption__source a { text-decoration: underline; text-underline-offset: 3px; }
.figure-caption--labelled {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  align-items: start;
  column-gap: var(--s-32);
  row-gap: var(--s-8);
}
.figure-caption--labelled > .figure-caption__source { grid-column: -2 / -1; margin-top: 0; }
.figure-caption--above { margin-top: 0; margin-bottom: var(--s-16); }
.figure-caption--inverse { color: var(--on-dark); }
.figure-caption--inverse .figure-caption__label { color: var(--on-dark); }
.figure-caption--inverse .figure-caption__source { color: var(--on-dark-soft); }
@media (max-width: 640px) {
  .figure-caption--labelled { grid-template-columns: minmax(0, 1fr); gap: var(--s-12); }
}

/* CaseCover: shared identity; title measure, artwork and grids belong to the page. */
.case-cover {
  --cover-title-size: clamp(44px, 5vw, 72px);
  --cover-title-leading: 1.05;
  --cover-title-tracking: -.025em;
  --cover-bg: var(--depth);
  --cover-ink: var(--on-dark);
  --cover-muted: var(--on-dark-soft);
  --cover-accent: var(--signal-on-dark);
  background: var(--cover-bg); color: var(--cover-ink);
  position: relative; overflow: hidden;
}
.case-cover--light {
  --cover-bg: var(--frost); --cover-ink: var(--text-primary);
  --cover-muted: var(--text-primary); --cover-accent: var(--indigo);
}
.case-cover--editorial { --cover-muted: var(--on-dark); }
.case-cover .top-meta {
  font: 600 var(--label-size)/1.6 var(--f-body); letter-spacing: .1em;
  text-transform: uppercase; color: var(--cover-accent);
}
.case-cover h1, .case-cover .case-cover__title {
  font-family: var(--f-display); font-weight: 900;
  font-size: var(--cover-title-size, clamp(44px, 5vw, 72px));
  line-height: var(--cover-title-leading, 1.05);
  letter-spacing: var(--cover-title-tracking, -.025em);
  margin-top: var(--s-24); color: var(--cover-ink);
}
.case-cover .lede { font: 400 var(--body-large-size)/1.65 var(--f-body); color: var(--cover-muted); }
.case-cover .rule { width: var(--s-64); height: 2px; background: var(--signal); margin: var(--s-48) 0 var(--s-20); }
.case-cover .bottom-meta { font: 500 14px/1.6 var(--f-body); letter-spacing: .02em; color: var(--on-dark-soft); }
.case-cover--light .bottom-meta { color: var(--text-secondary); }
.case-cover .bottom-meta strong { color: var(--cover-ink); font-weight: 700; }
.case-cover .bottom-meta .bm-item { display: inline; }
.case-cover .bottom-meta .dot {
  display: inline-block; width: 3px; height: 3px; font-size: 0;
  border-radius: 50%; background: currentColor; vertical-align: middle;
  margin: 0 var(--s-12); opacity: .6;
}
@media (max-width: 640px) {
  .case-cover .rule { width: var(--s-48); margin: var(--s-32) 0 var(--s-16); }
  .case-cover .bottom-meta { display: flex; flex-direction: column; gap: var(--s-8); }
  .case-cover .bottom-meta .dot { display: none; }
  .case-cover .bottom-meta .bm-item { display: block; }
}
/* Let a wrapping breadcrumb determine its own height on a phone. */
@media (max-width: 640px) {
  .case-cover > .top-bar { position: relative; padding: var(--s-24) var(--gutter) 0; gap: var(--s-16); }
  .case-cover > .top-bar .crumb { text-align: right; }
  .case-cover:has(> .top-bar) > .inner { padding-top: var(--s-32); }
}

.case-cover--image .hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }

/* The shared header owns its height; cover copy follows with a consistent gap. */
.case-cover:has(> .site-header--case) > .inner { padding-top: var(--s-32); }

/* PageEnd: choose the next action by page purpose. */
.page-end { --end-bg: var(--depth); --end-ink: var(--on-dark); --end-accent: var(--signal-on-dark); }
.page-end--light { --end-arrow: var(--primary); --end-bg: var(--surface); --end-ink: var(--text-primary); --end-accent: var(--primary); }
.page-end--related { background: var(--end-bg); color: var(--end-ink); }
.page-end--related > a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label ." "title arrow";
  column-gap: var(--s-32); row-gap: var(--s-16); align-items: center;
  max-width: var(--content-wide); margin: 0 auto;
  padding: var(--section-pad-y) var(--gutter); color: inherit;
}
.page-end--related .page-end__label { grid-area: label; }
.page-end--related .page-end__title { grid-area: title; }
.page-end--related .page-end__arrow { grid-area: arrow; }
.case-contact { background: var(--bg); color: var(--text-primary); }
.case-contact__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-24); max-width: var(--content-wide); margin: auto; padding: var(--s-32) var(--gutter); font: 400 17px/1.7 var(--f-body); }
.case-contact nav { display: flex; flex-wrap: wrap; gap: var(--s-24); }
.case-contact a { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: .2em; }
.case-contact .case-contact__name { font-weight: 600; text-decoration: none; }
.case-contact a:hover { color: var(--primary); }
.case-contact a:focus-visible { outline: 2px solid var(--primary); outline-offset: 5px; }
@media (max-width: 760px) { .case-contact__inner { flex-direction: column; align-items: flex-start; gap: var(--s-12); } }
.page-end__label { font: 600 var(--label-size)/1.6 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--end-accent); }
.page-end__title { font: 900 clamp(28px, 3.4vw, 48px)/1.1 var(--f-display); letter-spacing: -.02em; color: var(--end-ink); text-wrap: balance; }
.page-end__arrow { width: 32px; height: 32px; flex: none; color: var(--end-arrow, var(--signal)); fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease); }
.page-end--related > a:hover .page-end__arrow { transform: translateX(8px); }
.page-end a:focus-visible { outline: 2px solid currentColor; outline-offset: -6px; }
.page-end--inline { --end-arrow: var(--primary); --end-ink: var(--text-primary); --end-accent: var(--primary); border-top: 1px solid var(--border); padding-top: var(--s-32); }
.page-end--inline > a { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--s-24); min-height: 44px; }
.page-end--inline .page-end__title { font-size: clamp(24px, 3vw, 34px); font-weight: 800; }
.page-end--inline .page-end__arrow { width: 16px; height: 16px; }
.page-end--inline > a:hover .page-end__title { color: var(--depth); }
.page-end--contact { background: var(--primary); color: var(--on-dark); padding: var(--section-pad-y) var(--gutter); text-align: center; }
.page-end--contact h2 { font: 400 48px/1.1 var(--f-personal); letter-spacing: -.02em; }
.page-end--contact .subtitle { font: 400 var(--body-large-size)/1.6 var(--f-body); color: var(--on-dark); margin: var(--s-16) auto 0; max-width: 520px; }
.page-end--contact .cta-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s-24); margin-top: var(--s-32); }
.page-end--contact .cta-links a { font: 600 17px/1.6 var(--f-body); color: var(--on-dark); padding: var(--s-12) var(--s-24); min-height: 44px; border-radius: var(--r-sm); transition: background .15s var(--ease); }
.page-end--contact .primary-cta { background: var(--primary-hover); }
.page-end--contact .primary-cta:hover { background: var(--depth); }
.page-end--contact .secondary-cta { text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 640px) {
  .page-end--related > a { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-16); padding-block: var(--s-64); }
  .page-end__arrow { width: 24px; height: 24px; }
  .page-end--contact { padding-block: var(--s-64); }
  .page-end--contact h2 { font-size: 40px; }
  .page-end--contact .cta-links { flex-direction: column; gap: var(--s-12); }
  .page-end--contact .cta-links a { max-width: 100%; overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) { .page-end__arrow { transition: none; } }
.page-end--inline > a:focus-visible { outline-offset: 4px; }

/* SiteAction: extracted from the author's approved AI Team action treatment.
   .case-link remains a compatibility class. Use .site-action on new pages.
   Use <a href> for a destination, <button type="button"> for a local action. */
.site-action, .case-link {
  display: inline-flex; align-items: center; justify-content: flex-start;
  gap: var(--s-8); min-height: var(--action-min-height);
  color: var(--primary); font: 400 var(--action-size)/1.4 var(--f-body);
}
.site-action-label, .case-link-label {
  min-width: 0; text-decoration: underline; text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.site-action:hover .site-action-label, .site-action:focus-visible .site-action-label,
.case-link:hover .case-link-label, .case-link:focus-visible .case-link-label,
a:hover > .case-link .case-link-label, a:focus-visible > .case-link .case-link-label {
  text-decoration-thickness: 2px;
}
.site-action-icon, .navigation-icon {
  display: block; flex: 0 0 var(--action-icon-size);
  width: var(--action-icon-size); height: var(--action-icon-size);
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease;
}
/* Proposed inverse variant for actions on saturated surfaces. */
.site-action--inverse { color: var(--on-dark); }
.site-action { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; }
.site-action:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: var(--r-sm); }
summary.site-action { list-style: none; }
summary.site-action::-webkit-details-marker { display: none; }
details[open] > summary.site-action .site-action-icon { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .site-action-icon { transition: none; } }

.text-link { color: var(--primary); font-weight: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.text-link:hover { color: var(--primary-hover); }
.text-link:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }
.text-link--inverse { color: var(--on-dark); }
.text-link--inverse:hover { color: var(--signal-on-dark); }

/* Quote: the typeface identifies the speaker, never the page it appears on. */
.quote { --quote-font: var(--f-quote); --quote-style: italic; --quote-size: 22px; --quote-leading: 1.55; }
.quote--author { --quote-font: var(--f-personal); --quote-size: clamp(22px, 2.4vw, 30px); --quote-leading: 1.4; }
.quote--document { --quote-font: var(--f-body); --quote-style: normal; --quote-size: 20px; --quote-leading: 1.6; }
.quote > .quote__text {
  font: 400 var(--quote-style) var(--quote-size)/var(--quote-leading) var(--quote-font);
  letter-spacing: normal; color: var(--text-primary);
  border-left: 2px solid var(--quiet); padding-left: var(--s-24);
}
.quote > .quote__source {
  display: block; margin-top: var(--s-16);
  font: 600 normal var(--label-size)/1.6 var(--f-body);
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary);
}
@media (max-width: 640px) { .quote > .quote__text { padding-left: var(--s-20); } }

/* SiteNav: shared reading paths on portfolio pages and case covers.
   Identity keeps its natural one-line width; extreme text scaling may reflow it. */
.site-header { --site-identity-size: 20px; max-width: var(--page-max); margin: 0 auto; padding: var(--s-24) var(--gutter); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-24); }
/* Top-level navigation keeps the same gutters across page compositions. */
body > .site-header { padding-inline: var(--s-48); }
.site-identity { display: inline-flex; align-items: center; min-height: var(--action-min-height); font: 700 var(--site-identity-size)/1.25 var(--f-display); text-transform: uppercase; letter-spacing: .01em; flex-shrink: 0; max-width: 100%; overflow-wrap: anywhere; }
.site-nav { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-32); }
.site-nav a { display: inline-flex; align-items: center; min-height: var(--action-min-height); font: 500 var(--action-size)/1.25 var(--f-body); color: var(--text-primary); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--primary); }
.site-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 2px; }
.site-header a:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: var(--r-sm); }
.skip-link { position: absolute; top: var(--s-8); left: var(--gutter); z-index: 100; padding: var(--s-12) var(--s-20); background: var(--bg); color: var(--primary); transform: translateY(-200%); }
.skip-link:focus { transform: none; outline: 2px solid var(--primary); }
@media (max-width: 1024px) {
  body > .site-header { padding-inline: var(--s-32); }
}
@media (max-width: 767px) {
  .site-header { --site-identity-size: 18px; flex-wrap: wrap; gap: var(--s-8); padding-block: var(--s-20); }
  body > .site-header { padding-inline: var(--gutter-phone); }
  .site-nav { gap: var(--s-24); }
}

/* Case variant C: normal flow, transparent over the existing cover surface. */
.site-header--case { position: relative; z-index: 20; color: var(--cover-ink); }
.site-header--case .site-identity { color: inherit; }
.site-header--case .site-nav a { color: var(--cover-ink); }
.site-header--case .site-nav a:hover,
.site-header--case .site-nav a[aria-current] { text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 2px; }
.site-header--case a:focus-visible { outline-color: var(--cover-ink); }
.case-cover--light .site-header--case .site-nav a:hover,
.case-cover--light .site-header--case .site-nav a[aria-current] { color: var(--primary); }
.case-cover--light .site-header--case a:focus-visible { outline-color: var(--primary); }

/* Contextual recommendations compose Quote with optional avatar selection. */
.recommendation { min-width: 0; }
.recommendation [hidden] { display: none; }
.recommendation__controls { display: flex; align-items: center; gap: var(--s-12); margin-bottom: var(--s-24); padding: var(--s-4); }
.recommendation__person { display: block; flex: 0 0 auto; padding: var(--s-4); border: 2px solid transparent; border-radius: 50%; background: transparent; color: var(--primary); cursor: pointer; }
.recommendation__person img, .recommendation__fallback-avatar { display: block; width: 48px; height: 48px; object-fit: cover; border-radius: 50%; }
.recommendation__person[aria-pressed="true"] { border-color: var(--primary); }
.recommendation__person:hover { background: var(--bg); }
.recommendation__person:focus-visible, .recommendation__full summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }
.recommendation__hint { font: 400 var(--label-size)/1.5 var(--f-body); color: var(--text-primary); }
.recommendation .quote > .quote__source { font: 400 normal 14px/1.6 var(--f-body); text-transform: none; letter-spacing: normal; color: var(--text-primary); padding-left: var(--s-24); }
.recommendation__name { font-weight: 600; }
.recommendation .quote__source span { display: block; }
.recommendation__full { margin-top: var(--s-8); padding-left: var(--s-24); }
.recommendation__full summary { width: fit-content; padding-block: var(--s-12); min-height: 44px; color: var(--primary); cursor: pointer; font: 500 14px/1.5 var(--f-body); text-decoration: underline; text-underline-offset: .2em; }
.recommendation__full summary:hover { color: var(--primary-hover); }
.recommendation__full blockquote p { font: 400 16px/1.6 var(--f-body); }
.recommendation__full .text-link { display: inline-block; padding-block: var(--s-12); min-height: 44px; font-size: 14px; }
.recommendation__panel + .recommendation__panel { margin-top: var(--s-32); }
.recommendation--interactive .recommendation__panel { margin-top: 0; }
.recommendation--interactive .recommendation__fallback-avatar { display: none; }
.recommendation__fallback-avatar { margin-bottom: var(--s-12); }
.recommendation__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 640px) {
  .recommendation .quote > .quote__source, .recommendation__full { padding-left: var(--s-20); }
}

/* ProjectCard typography. Composition and image treatment belong to the page. */
/* The text area stays transparent; only the preview image has a surface. */
.project-card > h3 {
  font-family: var(--f-body); font-weight: var(--card-title-weight);
  font-size: var(--card-title-size); color: var(--text-primary);
  letter-spacing: -0.01em;
}
.project-card.compact > h3 { font-size: var(--card-title-compact-size); }
.project-card > p {
  font: 400 var(--card-description-size)/var(--card-description-leading) var(--f-body);
  color: var(--text-primary);
}
@media (max-width: 767px) {
  .project-card > h3, .project-card.compact > h3 { font-size: var(--card-title-size); }
  .project-card > p {
    font-size: var(--card-description-phone-size);
    line-height: var(--card-description-phone-leading);
  }
}

/* CasePaywall: shared reading gate. See case-paywall.md for the contract. */
.case-paywall { position: relative; }
.case-paywall[data-state="locked"] { display: grid; grid-template-columns: minmax(0, 1fr); isolation: isolate; }
.case-paywall[data-state="locked"] .case-paywall__content {
  grid-area: 1 / 1;
  min-width: 0;
  height: 1000px;
  overflow: hidden;
  overflow: clip;
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(#000 65%, transparent 100%);
  mask-image: linear-gradient(#000 65%, transparent 100%);
}
/* The real continuation provides texture and depth. It is inert until opened. */
.case-paywall[data-state="locked"] .case-paywall__content > * { filter: blur(5px); opacity: .55; }
.case-paywall__gate {
  grid-area: 1 / 1;
  min-width: 0;
  align-self: start;
  justify-self: center;
  z-index: 2;
  width: min(608px, calc(100% - 2 * var(--gutter)));
  margin-top: 144px;
  margin-bottom: var(--s-96);
}
.case-paywall__gate[hidden] { display: none; }
.case-paywall__glass {
  position: relative;
  padding: var(--s-48);
  border-radius: var(--r-xl);
  background: linear-gradient(145deg, rgba(255,255,255,.74), rgba(250,250,247,.52));
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 1px 0 0 rgba(255,255,255,.65),
    inset -1px -1px 0 rgba(255,255,255,.45),
    0 24px 64px rgba(28,27,24,.09),
    0 2px 8px rgba(28,27,24,.04);
  color: var(--text-primary);
}
.case-paywall__kicker {
  margin: 0 0 var(--s-16);
  font: 600 13px/1.5 var(--f-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--primary);
}
.case-paywall__gate h2 {
  font: 400 clamp(30px, 3.2vw, 40px)/1.15 var(--f-personal);
  letter-spacing: -.02em;
  margin: 0 0 var(--s-16);
}
.case-paywall__description {
  font: 400 17px/1.6 var(--f-body);
  color: var(--text-secondary);
  margin: 0;
  max-width: 43ch;
}
.case-paywall__form { margin-top: var(--s-32); }
.case-paywall__form label {
  display: block;
  font: 600 14px/1.5 var(--f-body);
  margin-bottom: var(--s-8);
}
.case-paywall__fields { display: flex; gap: var(--s-8); }
.case-paywall__gate input {
  min-width: 0;
  flex: 1;
  height: 52px;
  padding: 0 var(--s-16);
  border: 1px solid #7b8780;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.9);
  color: var(--text-primary);
  font: 400 17px var(--f-body);
}
.case-paywall__gate input::placeholder { color: var(--text-secondary); opacity: 1; }
.case-paywall__gate button {
  min-height: 52px;
  padding: 0 var(--s-24);
  border: 0;
  border-radius: var(--r-sm);
  background: var(--primary);
  color: #fff;
  font: 600 16px var(--f-body);
  white-space: nowrap;
  cursor: pointer;
}
.case-paywall__gate button:hover { background: var(--primary-hover); }
.case-paywall__gate :focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; }
.case-paywall__gate input[aria-invalid="true"] { border-color: #943729; }
.case-paywall__error {
  min-height: 24px;
  margin: var(--s-8) 0 0;
  color: #943729;
  font: 400 14px/1.5 var(--f-body);
}
/* Next-case navigation and the footer remain available below the preview. */
.case-paywall__content:focus { outline: none; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .case-paywall__glass { background: var(--bg); }
}
@media (max-width: 640px) {
  .case-paywall[data-state="locked"] .case-paywall__content { height: 960px; }
  .case-paywall__gate { margin-top: 128px; }
  .case-paywall__glass { padding: var(--s-32) var(--s-24); }
  .case-paywall__fields { flex-direction: column; gap: var(--s-12); }
  .case-paywall__gate input { flex: auto; width: 100%; }
  .case-paywall__gate button { width: 100%; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .case-paywall__glass { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media print {
  .case-paywall[data-state="locked"] .case-paywall__content { display: none; }
  .case-paywall__gate { margin-top: var(--s-32); }
  .case-paywall__glass { background: #fff; box-shadow: none; }
}

.case-locked .progress-bar { display: none; }
.case-paywall__gate button:disabled { cursor: default; }