/* Shared visual contract. Optical glass parameters remain in glass/appearance.js. */
:root {
  --font-family: "Helvetica Neue", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-display: 48px;
  --font-h1: 40px;
  --font-h2: 30px;
  --font-h3: 22px;
  --font-h4: 18px;
  --font-body: 16px;
  --font-small: 13px;
  --font-micro: 12px;
  --weight-regular: 400;
  --weight-medium: 450;
  --leading-display: 1.2;
  --leading-heading: 1.35;
  --leading-body: 1.8;
  --leading-small: 1.65;
  --tracking-heading: .015em;
  --tracking-body: .01em;
  --tracking-small: .025em;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --paragraph-gap: var(--space-24);
  --section-space: var(--space-96);
  --content-max: 1360px;
  --page-padding: var(--space-48);
  --gutter: max(var(--page-padding), calc((100% - var(--content-max)) / 2));
  --media-gap: var(--space-24);
  --color-background: #e9edf0;
  --color-heading: #313b44;
  --color-body: #3d4a55;
  --color-muted: #5e6a76;
  --color-link: #354653;
  --color-focus: #445b77;
  --color-accent: #326b9a;
  --color-surface: #f1f4f6;
  --color-on-media: #f7faf7;
  --color-on-media-muted: #d7e2db;
  --color-on-media-divider: #b8c9bf;
  --color-focus-on-media: #e6eee3;
  --color-selection: #c7d6e4;
  --color-selection-ink: #263a50;
  --color-overlay: rgb(233 237 240 / .97);
  --color-backdrop: rgb(209 219 227 / .8);
  --color-photo-placeholder: #d9e1e6;
  --color-video-placeholder: #c2cfc8;
  --color-line: rgb(69 85 102 / .18);
  --color-media-line: rgb(70 90 108 / .09);
  --color-card-blue: #cdd7df;
  --color-card-green: #d3d9d5;
  --color-card-violet: #cbd1dc;
  --color-on-card: #465562;
  --color-rail: #7d8f9f;
  --color-rail-track: rgb(168 182 195 / .267);
  --paper: var(--color-background);
  --ink: var(--color-heading);
  --muted: var(--color-muted);
  --line: var(--color-line);
  --border-width: 1px;
  --border-subtle: var(--border-width) solid var(--line);
  --border-media: var(--border-width) solid var(--color-media-line);
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --media-radius: var(--radius-lg);
  --control-size: 44px;
  --link-arrow-size: 16px;
  --link-gap: var(--space-12);
  --duration-feedback: 250ms;
  --ease-feedback: cubic-bezier(.2, .8, .2, 1);
  --shadow-card: 0 18px 40px rgb(46 66 84 / .08);
  --shadow-photo: 0 20px 32px -24px rgb(48 65 80 / .32), 0 4px 10px rgb(54 70 83 / .06);
  --shadow-photo-hover: 0 28px 40px -22px rgb(48 65 80 / .35), 0 7px 16px rgb(54 70 83 / .09);
  --shadow-header-on-media: 0 1px 9px rgb(8 23 15 / .25);
  --shadow-link-on-media: 0 1px 12px rgb(8 23 15 / .6);
  /* Authored exceptions: keep identity and kinetic typography recognisable. */
  --hero-name-size: clamp(27px, 2.3vw, 33px);
  --hero-name-size-en: clamp(25px, 2.1vw, 30px);
  --contact-title-size: var(--font-display);
  --contact-email-size: clamp(22px, 2.4vw, 32px);
  --keyword-small-size: 15px;
  --keyword-medium-size: 25px;
  --keyword-color-small: #5d6d7a;
  --keyword-color-medium: #506676;
  --keyword-color-large: #293e4c;
  --keyword-color-active: #152c3e;
  --keyword-color-caption: #49647a;
}
@media (max-width: 1024px) {
  :root { --page-padding: var(--space-32); --section-space: var(--space-64); }
}
@media (max-width: 760px) {
  :root {
    --font-display: 44px; --font-h1: 36px; --font-h2: 28px; --font-h3: 20px; --font-h4: 16px;
    --font-body: 15px; --font-small: 12px; --font-micro: 11px;
    --page-padding: var(--space-24); --media-gap: var(--space-12); --media-radius: var(--radius-md);
    --section-space: var(--space-48); --paragraph-gap: var(--space-16);
    --hero-name-size: 26px; --hero-name-size-en: 24px;
    --contact-email-size: clamp(18px, 5.3vw, 28px);
    --keyword-small-size: 13px; --keyword-medium-size: 17px;
  }
}
@media (max-width: 360px) { :root { --page-padding: var(--space-16); } }
/* Small primitives for future detail pages; components opt in explicitly. */
.content-container { width: min(100%, var(--content-max)); margin-inline: auto; }
.section-heading { margin: 0; color: var(--color-heading); font: var(--weight-regular) var(--font-h2)/var(--leading-heading) var(--font-family); letter-spacing: var(--tracking-heading); }
.text-body { color: var(--color-body); font-size: var(--font-body); line-height: var(--leading-body); letter-spacing: var(--tracking-body); }
.text-small { color: var(--color-muted); font-size: var(--font-small); line-height: var(--leading-small); }
.prose { max-width: 68ch; }
.prose p { margin: 0; }
.prose p + p { margin-top: var(--paragraph-gap); }