/* Unified light theme - user decision 2026-11-07.
   The light palette and chrome of the home apply to every active page: paper background, light header and footer,
   ink text, lavender and sage as the only meaning colours. Loaded right after design-system.css; the selectors carry
   `html` so they outrank the dark chrome declared for body.comparison-site in later sheets. Diagram interiors,
   original media and the type roles are untouched. */
html body.comparison-site.readable-layout {
  --paper:#f9faf7; --ink:#1e2a24; --muted:#5d6b62; --line:#d7dfd6;
  --lavender-ink:#78608e; --sage-ink:#486c58;
  --type-ink:var(--ink); --type-muted:var(--muted); --type-accent:var(--lavender-ink);
  --nav-surface:var(--paper); --nav-ink:var(--ink); --nav-muted:var(--muted); --nav-line:var(--line);
  /* Shared vocabulary of the home - user decision 2026-11-08 (level 1): one tint band, one white card with 10px
     corners, one quiet hairline under text links, and the hero's six capability colours declared for inner pages
     (not applied anywhere yet; keep them in step with home-inkling.js). */
  --tint:#eef2ec; --surface:#fff; --card-radius:10px; --hairline:#1e2a2440;
  --journey-tint:var(--tint);
  --cap-problem-solving:#a37cf1; --cap-operational:#86d2ae; --cap-optimization:#74b6fc;
  --cap-ai:#e7c23c; --cap-inference:#f98a9b; --cap-memory:#273c94;
  /* Page titles use the home's h1 scale (34–52px). Section titles already share --type-section with the home. */
  --type-display:clamp(34px,3.8vw,52px);
  background:var(--paper); color:var(--ink);
}
/* Header */
html body.comparison-site.readable-layout :is(.site-header,.site-header.menu-open) {
  background:#f9faf7f5; color:var(--ink); border-bottom:1px solid var(--line); backdrop-filter:blur(16px);
}
html body.comparison-site.readable-layout .site-header .brand img { filter:grayscale(1) brightness(0); }
html body.comparison-site.readable-layout .site-header :is(.primary-nav a,.nav-disclosure-toggle) { color:var(--ink); }
html body.comparison-site.readable-layout .site-header .header-contact { color:var(--ink); border-color:#7d8c80; }
html body.comparison-site.readable-layout .site-header .header-contact:hover { color:var(--lavender-ink); }
html body.comparison-site.readable-layout .site-header .primary-nav :is(.journey-menu,.product-menu,.company-menu) {
  background:var(--paper); color:var(--ink); border-color:var(--line); box-shadow:0 20px 42px #2635290b;
}
html body.comparison-site.readable-layout .site-header .primary-nav :is(.journey-menu a,.product-menu a,.company-menu a) { color:var(--ink); border-color:var(--line); }
html body.comparison-site.readable-layout .site-header.menu-open .primary-nav>a { border-top-color:var(--line); }
/* Footer */
html body.comparison-site.readable-layout .site-footer { background:var(--paper); color:var(--ink); border-top:1px solid var(--line); }
html body.comparison-site.readable-layout .site-footer .brand img { filter:grayscale(1) brightness(0); }
html body.comparison-site.readable-layout :is(.site-footer-identity p,.site-footer-bottom>span) { color:var(--muted); }
html body.comparison-site.readable-layout :is(.site-footer-bottom,.site-footer .site-footer-context) { border-top-color:var(--line); }
/* Dark page surfaces become paper; their inverse palette is withdrawn */
html body.comparison-site.readable-layout :is(.company-hero,.mission-values,.comparison-studio,.product-studio-video,.detail-footer,.direction-footer,.learn-footer) {
  --type-ink:var(--ink); --type-muted:var(--muted); --type-accent:var(--lavender-ink);
  background:var(--paper); color:var(--ink);
}
html body.comparison-site.readable-layout .product-rail-buttons button:hover:enabled { background:var(--ink); color:var(--paper); }
/* ===== Home vocabulary on inner pages - user decision 2026-11-08 (level 1) =====
   Inner pages stay left-aligned reading pages; their layouts, original media and diagram interiors are untouched.
   Only the shared parts change: title scale, tint bands, text links, the one primary action, card frames and rail
   controls. Components are addressed through #main so these rules outrank the page sheets loaded after this file. */
/* Titles that bypass the display token */
html body.comparison-site.readable-layout #main :is(.insights-hero h1,[data-type].job-title,.article h1) { font-size:var(--type-display); }
/* Tint bands */
html body.comparison-site.readable-layout #main :is(.detail-related,.detail-section--tint,.catalog-section--tint) { background:var(--tint); }
/* Text links: ink, a quiet hairline that darkens on hover, the arrow at text size beside the words */
html body.comparison-site.readable-layout #main :is(.text-link,.insights-action,.journey-contact-source) {
  gap:10px; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--hairline); padding-block:2px; min-height:44px;
  transition:border-color .2s;
}
html body.comparison-site.readable-layout #main :is(.text-link,.insights-action,.journey-contact-source):hover { border-color:var(--ink); text-decoration:none; }
html body.comparison-site.readable-layout #main :is(.text-link,.insights-action,.journey-contact-source,.product-card-link,.company-card-action,.journey-choice-action,.company-record-link) span[aria-hidden] {
  font-size:1.05em; line-height:1; color:inherit;
}
/* The one primary action of a page, an inquiry, is the home's ink pill */
html body.comparison-site.readable-layout #main :is(
  :is(.type-hero-copy,.detail-hero-copy)>.text-link[href*="contact.html"],
  :is(.detail-related,.category-contact,.journey-contact-next,.library-contact,.company-contact) .text-link[href*="contact.html"],
  .contact-actions>.text-link) {
  gap:8px; padding:11px 20px; border:0; border-radius:999px; background:var(--ink); color:var(--paper); transition:background .2s;
}
html body.comparison-site.readable-layout #main :is(
  :is(.type-hero-copy,.detail-hero-copy)>.text-link[href*="contact.html"],
  :is(.detail-related,.category-contact,.journey-contact-next,.library-contact,.company-contact) .text-link[href*="contact.html"],
  .contact-actions>.text-link):hover { background:#42604c; }
/* The copy-email button beside the pill reads as a text link */
html body.comparison-site.readable-layout #main .contact-copy {
  padding:2px 0; border:0; border-bottom:1px solid var(--hairline); border-radius:0; background:none; color:var(--ink);
  font:inherit; font-size:var(--type-action); min-height:44px; cursor:pointer; transition:border-color .2s;
}
html body.comparison-site.readable-layout #main .contact-copy:hover { border-color:var(--ink); }
/* Cards: the home's white card with a hairline and 10px corners; media rounded on the corners it touches */
html body.comparison-site.readable-layout #main :is(.insights-rail-card,.product-card,.journey-product-choice) { border-radius:var(--card-radius); border-color:var(--line); background:var(--surface); }
html body.comparison-site.readable-layout #main :is(.insight-card-thumbnail,.product-card-media) { border-radius:calc(var(--card-radius) - 1px) calc(var(--card-radius) - 1px) 0 0; border-color:var(--line); background:var(--tint); }
html body.comparison-site.readable-layout #main .journey-product-choice img { border-radius:calc(var(--card-radius) - 1px) calc(var(--card-radius) - 1px) 0 0; }
html body.comparison-site.readable-layout #main .journey-product-choice--studio img { border-radius:calc(var(--card-radius) - 1px) 0 0 calc(var(--card-radius) - 1px); }
html body.comparison-site.readable-layout #main :is(.application-card-image,.company-card-media,.news-story-image,.member-portrait,.member-portrait img) { border-radius:var(--card-radius); background:var(--tint); }
html body.comparison-site.readable-layout #main :is(.application-card:hover .application-card-image,.journey-product-choice:hover,.product-card:hover) { border-color:#1e2a2466; }
/* Rail controls: round, hairline, ink on hover, like the home's stack controls; 44px targets kept */
html body.comparison-site.readable-layout #main :is(.insights-rail-buttons,.product-rail-buttons,.category-rail-controls) button {
  width:44px; height:44px; padding:0; border:1px solid var(--line); border-radius:50%; background:var(--surface); color:var(--ink);
}
html body.comparison-site.readable-layout #main :is(.insights-rail-buttons,.product-rail-buttons,.category-rail-controls) button:hover:enabled { background:var(--ink); color:var(--paper); border-color:var(--ink); }
@media(max-width:760px) {
  html body.comparison-site.readable-layout { --type-display:clamp(30px,8vw,38px); }
  html body.comparison-site.readable-layout #main .journey-product-choice--studio img { border-radius:calc(var(--card-radius) - 1px) calc(var(--card-radius) - 1px) 0 0; }
}
@media(prefers-reduced-motion:reduce) {
  html body.comparison-site.readable-layout #main :is(.text-link,.insights-action,.journey-contact-source,.contact-copy) { transition:none; }
}
@media(max-width:900px) {
  html body.comparison-site.readable-layout .site-header.menu-open { background:var(--paper); }
}
@media print { html body.comparison-site.readable-layout { background:var(--surface); } }

/* Language switch (EN / KR) in the header. The current language is ink; the other is muted. */
.site-header .lang-switch { display:inline-flex; align-items:center; font:400 13px/1 var(--font-sans); letter-spacing:.04em; }
.site-header .lang-switch a { display:inline-flex; align-items:center; justify-content:center; min-width:36px; min-height:44px; color:var(--muted); text-decoration:none; border:0; }
.site-header .lang-switch a + a::before { content:"/"; margin-right:8px; color:var(--line); }
.site-header .lang-switch a[aria-current] { color:var(--ink); font-weight:600; }
.site-header .lang-switch a:hover { color:var(--lavender-ink); }

@media (max-width:640px) {
  .site-header .lang-switch a { min-width:30px; }
  .site-header .lang-switch a + a::before { margin-right:5px; }
}
/* On the narrowest phones the header keeps one row: Contact stays reachable from the footer. */
@media (max-width:359px) {
  .site-header .header-contact { display:none !important; }
  .site-header .lang-switch { margin-left:auto; }
}