@import url('./studio-fonts.css');

/* Secondary pages share the studio's paper, ink and editorial typography. */
:root {
  color-scheme: light;
  --bg: #f5f4ef;
  --text: #20211e;
  --paper: #20211e;
  --muted: #62645d;
  --soft: #62645d;
  --dim: #777970;
  --accent: #b94e2b;
  --accent-strong: #983e21;
  --accent-deep: #983e21;
  --line: #dcdcd4;
  --line-strong: #c6c7bc;
  --panel: #eeeee7;
  --panel-strong: #e5e6dd;
  --green: #3c6650;
  --blue: #355d74;
  --red: #a54c3b;
  --journal-bg: var(--bg);
  --journal-text: var(--text);
  --journal-muted: var(--muted);
  --journal-accent: var(--accent);
  --journal-accent-strong: var(--accent-strong);
  --journal-line: var(--line);
  --journal-line-strong: var(--line-strong);
  --journal-panel: var(--panel);
  --cb-bg: var(--bg);
  --cb-text: var(--text);
  --cb-muted: var(--muted);
  --cb-soft: var(--soft);
  --cb-dim: var(--dim);
  --cb-line: var(--line);
  --cb-line-strong: var(--line-strong);
  --cb-panel: var(--panel);
  --cb-panel-strong: var(--panel-strong);
  --cb-gold: var(--accent);
  --cb-gold-strong: var(--accent-strong);
  --cb-cyan: var(--blue);
  --cb-green: var(--green);
  --cb-rose: var(--red);
  --cb-blue: var(--blue);
  --fl-bg: var(--bg);
  --fl-text: var(--text);
  --fl-muted: var(--muted);
  --fl-soft: var(--soft);
  --fl-dim: var(--dim);
  --fl-line: var(--line);
  --fl-line-strong: var(--line-strong);
  --fl-panel: var(--panel);
  --fl-gold: var(--accent);
  --fl-gold-strong: var(--accent-strong);
  --fl-cyan: var(--blue);
  --fl-green: var(--green);
  --lf-bg: var(--bg);
  --lf-text: var(--text);
  --lf-muted: var(--muted);
  --lf-soft: var(--soft);
  --lf-line: var(--line);
  --lf-line-strong: var(--line-strong);
  --lf-panel: var(--panel);
  --lf-gold: var(--accent);
  --lf-gold-strong: var(--accent-strong);
  --lf-green: var(--green);
  --lf-blue: var(--blue);
}

html { background: var(--bg); scroll-padding-top: 32px; }
body.studio-subpage {
  margin: 0;
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
body.studio-subpage::before, body.studio-subpage::after,
.studio-subpage .elev-atmosphere, .studio-subpage .elev-progress { display: none !important; }
.studio-subpage .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
.studio-subpage ::selection { color: var(--text); background: #dfc8b8; }
.studio-subpage :focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.studio-subpage :is(.wrap, .journal-page, .cb-wrap, .fl-wrap, .hv2-wrap) {
  width: min(1120px, calc(100% - 96px)) !important;
  margin: 0 auto !important;
  padding: 34px 0 70px !important;
}
.studio-subpage nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 90px !important;
  padding: 0 0 25px !important;
  border-bottom: 1px solid var(--line);
}
.studio-subpage nav a {
  color: var(--text) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0 !important;
  text-transform: none;
  text-decoration: none;
  transition: color .18s ease;
}
.studio-subpage nav :is(.logo, .hv2-logo) {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.06em !important;
  line-height: 1;
}
.studio-subpage :is(.nav-links, .hv2-links) { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; }
.studio-subpage nav a:hover { color: var(--accent) !important; }
.studio-subpage nav .studio-language {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 11px;
  padding-left: 22px;
  border-left: 1px solid var(--line);
}
.studio-subpage a { color: var(--accent) !important; text-underline-offset: 4px; }
.studio-subpage a:hover { color: var(--accent-strong) !important; }
.studio-subpage :is(p, li, .lead, .journal-dek, .cb-lead, .hv2-lead, .value, .legal, footer) { color: var(--muted) !important; }
.studio-subpage strong { color: var(--text); }
.studio-subpage :is(h1, h2, h3) { color: var(--text) !important; text-transform: none !important; }
.studio-subpage h1 {
  font-family: 'Instrument Serif', Georgia, serif !important;
  font-weight: 400 !important;
  font-size: clamp(3.5rem, 6.8vw, 6.1rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -.035em !important;
  max-width: 970px;
  margin: 0 0 30px;
  text-wrap: balance;
}
.studio-subpage h2 {
  font-family: 'Instrument Serif', Georgia, serif !important;
  font-weight: 400 !important;
  letter-spacing: -.02em !important;
  line-height: 1.15 !important;
}
.studio-subpage h3 { font-family: 'DM Sans', sans-serif !important; font-weight: 600; }
.studio-subpage :is(.page-eyebrow, .hv2-eyebrow, .cs-case-kicker, .cs-col-label, .hv2-section-kicker, .label) {
  color: var(--accent) !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 400;
  letter-spacing: .09em !important;
  line-height: 1.6;
  text-transform: uppercase !important;
}
.studio-subpage :is(.page-eyebrow, .hv2-eyebrow)::before { background: var(--accent); width: 20px; }
.studio-subpage :is(.lead, .journal-dek, .hv2-lead) { font-size: 17px !important; line-height: 1.85 !important; max-width: 690px !important; }
.studio-subpage :is(.cs-hero, .journal-hero, .journal-post-hero, .cb-hero, .fl-hero, .lf-hero) { margin-bottom: 72px; }
.studio-subpage :is(.journal-post-meta, .journal-date, .doc-updated) {
  color: var(--muted) !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 400;
  letter-spacing: 0 !important;
  text-transform: none;
}
.studio-subpage .tags { gap: 9px 16px; }
.studio-subpage :is(.tag, .hv2-pill) {
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--muted) !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 10px;
  font-weight: 400;
  min-height: 0;
  padding: 0;
  text-transform: uppercase;
}
.studio-subpage .tags .tag + .tag::before { content: '/'; color: #a6a89c; margin-right: 16px; }

/* Work and journal indexes read as a continuous editorial list. */
.studio-subpage .cs-cases { gap: 0; }
.studio-subpage .cs-case {
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 40px;
  padding: 46px 0;
  border: 0 !important;
  border-top: 1px solid var(--line) !important;
  border-radius: 0;
  background: none !important;
  box-shadow: none;
  transform: none;
}
.studio-subpage .cs-case-index { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--accent); opacity: 1; padding-top: 4px; }
.studio-subpage .cs-case h2 { font-size: 42px !important; margin-bottom: 18px; }
.studio-subpage .cs-case-kicker { margin-bottom: 15px; }
.studio-subpage .cs-case-cols { padding-top: 26px; border-color: var(--line); }
.studio-subpage .cs-build li { padding-left: 17px; }
.studio-subpage .cs-build li::before { border: 0; width: 4px; height: 4px; background: var(--accent); transform: none; }
.studio-subpage .cs-kpis { gap: 8px 18px; }
.studio-subpage .cs-kpis span { color: var(--muted) !important; background: none; border: 0; border-radius: 0; padding: 4px 0; }
.studio-subpage .journal-list { gap: 0; }
.studio-subpage .journal-card {
  grid-template-columns: 124px minmax(0, 1fr) 210px;
  align-items: start;
  gap: 32px;
  padding: 38px 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: none;
  text-decoration: none;
}
.studio-subpage :is(.journal-card, .cs-case)::before,
.studio-subpage :is(.journal-card, .cs-case)::after { display: none; }
.studio-subpage .journal-date { padding-top: 6px; }
.studio-subpage .journal-body h2 { font-size: 32px !important; line-height: 1.16 !important; margin-bottom: 16px; }
.studio-subpage .journal-body p { font-size: 14px; line-height: 1.8; }
.studio-subpage .journal-read { font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 400; margin-top: 22px; }
.studio-subpage .journal-thumb { background: #e5e6dd; border: 0; border-radius: 0; align-self: start; margin-top: 6px; }
.studio-subpage .journal-thumb::before { display: none; }
.studio-subpage .journal-thumb img { padding: 0; }
.studio-subpage .journal-empty-thumb { color: var(--accent); font-family: 'IBM Plex Mono', monospace; font-weight: 400; font-size: 10px; }
.studio-subpage .cs-closing {
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 64px 0 20px;
  background: none;
  text-align: left;
}
.studio-subpage .cs-closing h2 { font-size: clamp(2.1rem, 4vw, 3.3rem) !important; }
.studio-subpage .cs-closing p { margin: 18px 0 26px; }
.studio-subpage .cs-closing-actions { justify-content: flex-start; }
.studio-subpage .cs-cta {
  display: inline-flex;
  align-items: center;
  gap: 30px;
  min-height: 48px;
  border: 1px solid var(--text);
  border-radius: 0;
  padding: 13px 22px;
  background: var(--text);
  color: var(--bg) !important;
  font: 500 13px 'DM Sans', sans-serif;
  text-transform: none;
  letter-spacing: 0 !important;
  transition: background .18s ease, border-color .18s ease;
}
.studio-subpage .cs-cta::after { content: '↗'; position: static; background: none; transform: none; font-size: 18px; }
.studio-subpage .cs-cta:hover { background: var(--accent); border-color: var(--accent); color: var(--bg) !important; }
.studio-subpage .cs-cta:hover::after { transform: none; }
.studio-subpage .cs-journal-link { font: 500 13px 'DM Sans', sans-serif; text-transform: none; }
.studio-subpage :is(.legal, footer, .hv2-footer) { border-color: var(--line); font-family: 'DM Sans', sans-serif; font-size: 12px; text-transform: none; letter-spacing: 0 !important; }

/* Reading surfaces retain all research content and illustrations. */
.studio-subpage :is(.journal-content, .cb-content) { width: 100%; max-width: 760px; margin-inline: auto; overflow-wrap: break-word; }
.studio-subpage :is(.journal-content, .cb-content) h2 {
  display: block;
  font-size: 38px !important;
  font-weight: 400;
  border: 0;
  padding-top: 0;
  margin-top: 58px !important;
  text-transform: none;
}
.studio-subpage :is(.journal-content, .cb-content) h2::before { display: none; }
.studio-subpage :is(.journal-content, .cb-content) :is(p, li) { font-size: 16px; line-height: 1.9; }
.studio-subpage :is(.journal-post-hero, .cb-hero, .lf-hero, .fl-hero) { max-width: 100%; }
.studio-subpage .fl-hero { grid-template-columns: minmax(0, 1fr); }
.studio-subpage .fl-hero-panel { width: 100%; max-width: 760px; margin-inline: auto; }
.studio-subpage :is(.journal-post-hero, .cb-hero, .lf-hero, .fl-hero) h1 { font-size: clamp(3.2rem, 6.2vw, 5.5rem) !important; }
.studio-subpage :is(.journal-figure, .cb-figure, .fl-hero-image, .lf-product-frame, .cb-hero-card) {
  background: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.studio-subpage :is(.journal-figure, .cb-figure, .fl-hero-image, .lf-product-frame, .cb-hero-card) img { border-radius: 0; border: 1px solid var(--line); }
.studio-subpage .journal-content > .journal-figure { width: 100%; margin-left: 0; transform: none; }
.studio-subpage :is(figcaption, .lf-product-caption) { color: var(--muted) !important; font-size: 12px; }
.studio-subpage :is(.fl-hero-image, .lf-product-frame)::before { display: none; }
.studio-subpage :is(.fl-hero-badge, .lf-live-pill) { border: 0; border-radius: 0; padding: 0; color: var(--green); }
.studio-subpage :is(.journal-link-card, .journal-post-return, .cb-panel, .cb-map, .cb-node, .cb-stat, .cb-callout,
  .lf-kpi, .lf-live-card, .lf-step, .lf-stack, .lf-card, .lf-boundary,
  .fl-hero-panel, .fl-stack-row, .fl-kpi, .fl-note, .fl-source-card, .fl-protocol-visual, .fl-frame-row,
  .fl-flow-step, .fl-use, .fl-chart, .fl-resource, .fl-boundary,
  .hv2-hero-panel, .hv2-map-node, .hv2-mini-stat, .hv2-card, .hv2-note, .hv2-visual,
  .hv2-flow-step, .hv2-stack-row, .hv2-command, .hv2-backend, .hv2-use, .hv2-test,
  .hv2-roadmap-row, .hv2-redaction > div) {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}
.studio-subpage :is(.cb-panel, .hv2-card, .hv2-hero-panel)::before { display: none; }
.studio-subpage :is(.hv2-map-node, .hv2-mini-stat, .hv2-panel-top, .hv2-use, .hv2-test,
  .hv2-backend-list, .hv2-roadmap-row, .hv2-redaction, .hv2-flow-step, .hv2-stack-row,
  .hv2-command, .fl-chart, .fl-frame-row, .fl-source-card, .fl-resource) :is(span, em) { color: var(--muted); }
.studio-subpage :is(.cb-track, .fl-chart-track) { background: #dedfd5; border-radius: 0; }
.studio-subpage :is(.cb-fill, .fl-chart-track i) { background: var(--accent); border-radius: 0; }
.studio-subpage :is(table, .cb-table, .fl-tool-table, .hv2-table) { border-radius: 0; background: none; border-color: var(--line); }
.studio-subpage :is(th, td) { border-color: var(--line); }
.studio-subpage th { background: var(--panel) !important; font-family: 'IBM Plex Mono', monospace !important; font-weight: 500; color: var(--accent); }
.studio-subpage td { color: var(--muted); }
.studio-subpage :is(.journal-code, .cb-code, .hv2-codebox) { background: #232620; border: 0; border-radius: 0; box-shadow: none; color: #e7e8df; }
.studio-subpage :is(code, pre) { font-family: 'IBM Plex Mono', monospace !important; }
.studio-subpage :is(.journal-code, .cb-code, .hv2-codebox) pre { color: #e7e8df; }
.studio-subpage .hljs { background: transparent; color: #e7e8df; }
.studio-subpage .hv2-codebox .comment { color: #a5ae9d; }
.studio-subpage .hv2-codebox .key { color: #e3a686; }
.studio-subpage .hv2-codebox .val { color: #b6d1ad; }
.studio-subpage .hv2-hero { min-height: 0; grid-template-columns: minmax(0, 1fr); gap: 55px; align-items: start; }
.studio-subpage .hv2-hero h1 { font-size: clamp(3.2rem, 6.2vw, 5.5rem) !important; }
.studio-subpage .hv2-hero-panel { width: 100%; max-width: 760px; margin-inline: auto; min-height: 0; padding: 22px; }
.studio-subpage .hv2-section { padding: 64px 0; }
.studio-subpage .hv2-section h2 { font-size: clamp(2.3rem, 4.2vw, 3.8rem) !important; }
.studio-subpage .hv2-section-header { gap: 40px; }
.studio-subpage .hv2-section-header p { color: var(--muted) !important; }
.studio-subpage .hv2-label { color: var(--accent); }
.studio-subpage .hv2-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Legal documents get a measured reading column beneath the shared masthead. */
.studio-subpage .doc-page:not(.journal-page) > :not(nav):not(footer) { max-width: 760px; margin-left: auto; margin-right: auto; }
.studio-subpage .doc-page:not(.journal-page) > h1 { font-size: clamp(3.4rem, 6vw, 5.6rem) !important; }
.studio-subpage .doc-page:not(.journal-page) h2 {
  color: var(--text) !important;
  font: 400 30px / 1.2 'Instrument Serif', Georgia, serif !important;
  text-transform: none;
  letter-spacing: -.01em !important;
  margin-top: 46px !important;
}
.studio-subpage .doc-page:not(.journal-page) h2::before { color: var(--accent); font: 11px 'IBM Plex Mono', monospace; }
.studio-subpage .doc-page .panel.meta { border: 0 !important; border-top: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important; border-radius: 0; background: none !important; box-shadow: none; padding: 28px 0 !important; }
.studio-subpage .doc-updated { margin-bottom: 28px; }

@media (max-width: 980px) {
  .studio-subpage .journal-card { grid-template-columns: 105px minmax(0, 1fr); }
  .studio-subpage .journal-thumb { grid-column: 2; width: min(100%, 300px); }
  .studio-subpage .hv2-hero { grid-template-columns: 1fr; }
  .studio-subpage .hv2-hero-panel { max-width: 580px; }
  .studio-subpage :is(.cb-grid, .fl-split, .fl-use-grid, .lf-card-grid) { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .studio-subpage :is(.wrap, .journal-page, .cb-wrap, .fl-wrap, .hv2-wrap) { width: calc(100% - 40px) !important; padding-top: 25px !important; }
  .studio-subpage nav { align-items: flex-start; flex-wrap: wrap; gap: 24px; margin-bottom: 55px !important; }
  .studio-subpage :is(.nav-links, .hv2-links) { justify-content: flex-start; gap: 13px 20px; }
  .studio-subpage nav a { font-size: 12px; }
  .studio-subpage nav .studio-language { padding-left: 16px; }
  .studio-subpage h1 { font-size: clamp(2.85rem, 9.5vw, 4.2rem) !important; }
  .studio-subpage :is(.lead, .journal-dek, .hv2-lead) { font-size: 15px !important; }
  .studio-subpage :is(.cs-case, .journal-card) { grid-template-columns: 1fr; gap: 18px; padding: 30px 0; }
  .studio-subpage .cs-case h2 { font-size: 34px !important; }
  .studio-subpage .cs-case-cols { grid-template-columns: 1fr; gap: 22px; }
  .studio-subpage .journal-body h2 { font-size: 29px !important; }
  .studio-subpage .journal-thumb { grid-column: 1; width: min(100%, 420px); }
  .studio-subpage .cs-closing-actions { align-items: flex-start; }
  .studio-subpage :is(.journal-content, .cb-content) h2 { font-size: 31px !important; }
  .studio-subpage :is(.journal-content, .cb-content) :is(p, li) { font-size: 15px; }
  .studio-subpage :is(.hv2-section-header, .hv2-grid-2, .hv2-grid-3, .hv2-backends, .hv2-command-grid) { grid-template-columns: 1fr; }
  .studio-subpage :is(.journal-post-hero, .cb-hero, .lf-hero, .fl-hero, .hv2-hero) h1 { font-size: clamp(2.75rem, 9.5vw, 4.2rem) !important; }
  .studio-subpage .hv2-section { padding: 44px 0; }
  .studio-subpage :is(.journal-content table, .cb-table, .fl-tool-table, .hv2-table) { display: block; max-width: 100%; overflow-x: auto; }
  .studio-subpage :is(.cb-content, .journal-content, .hv2-section) { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .studio-subpage *, .studio-subpage *::before, .studio-subpage *::after { animation: none !important; transition: none !important; }
}