/*
 * components.css — block-level rules for the classes Render.lean and the
 * careers form emit. Loads after site.css (the Tailwind build) and uses its
 * palette variables: no colour here is anything but ink, paper, white, navy,
 * accent, their hairline, or ink/white at an alpha. The CSP forbids inline
 * styles, and the CSS-contract gate fails on any emitted class that no rule
 * here or in site.css covers.
 */

/* ── Section variants (PageBlocks.SectionVariant) ─────────────────────── */
.section--muted { background: #fff; }

/* A dark band is a complete theme: every foreground inside turns light. */
.section--dark { background: var(--navy); color: #fff; }
.section--dark :is(h2, h3, strong, .section-heading, .news-title) { color: #fff; }
.section--dark :is(p, li, .section-subheading, .prose-katayama, .news-summary, .news-meta) { color: var(--on-navy-soft); }
.section--dark a:not(.button) { color: #fff; text-decoration: underline; }
.section--dark .news-item { border-color: var(--on-navy-line); }
.section--dark :is(.button-primary, .button-primary:hover) { background: #fff; color: var(--navy); border-color: #fff; }

/* ── Company profile table ────────────────────────────────────────────── */
.table-full { width: 100%; max-width: 60rem; border-collapse: collapse; }
.profile-row { border-bottom: 1px solid var(--hairline); }
.profile-th { padding: 1rem 1.5rem 1rem 0; text-align: left; vertical-align: top; width: 30%; color: var(--ink-soft); font-weight: 400; }
.profile-td { padding: 1rem 0; }
/* Phones: each value under its label. */
@media (max-width: 639px) {
  .profile-th, .profile-td { display: block; width: auto; }
  .profile-th { padding: 1rem 0 0.25rem; }
  .profile-td { padding: 0 0 1rem; }
}

/* ── Contact ──────────────────────────────────────────────────────────── */
.contact-email a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.2em; }

/* ── Letter (philosophy page) ─────────────────────────────────────────── */
.letter-preamble { color: var(--ink-soft); margin-bottom: 2rem; }
.letter-emphasis { font-weight: 600; margin-top: 2rem; }
.letter-signature { text-align: right; margin-top: 3rem; }

/* ── Divisions ────────────────────────────────────────────────────────── */
.jump-list ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.division-detail { max-width: 60rem; border-top: 1px solid var(--hairline); margin-top: 3rem; padding-top: 3rem; }
.division-detail > .section-heading { margin-bottom: 1.5rem; }
.focus-list { max-width: 44rem; }
/* Focus areas and contact purposes: the term in weight, the rest quieter. */
:is(.focus-row, .contact-row) dt { font-weight: 600; }
:is(.focus-row, .contact-row) dd { color: var(--ink-soft); }

/* ── News ─────────────────────────────────────────────────────────────── */
.news-title a { color: inherit; text-decoration: none; text-underline-offset: 0.2em; }
.news-title a:is(:hover, :focus-visible) { text-decoration: underline; }
.byline { margin-top: 2.5rem; color: var(--ink-soft); }
.back-link { margin-top: 3rem; }
.news-none { color: var(--ink-soft); }

/* site-init.js removes this node; without JS it must still not render. */
.dev-render-marker { display: none; }

/* ── Careers form (the verbatimHtml bodies) ───────────────────────────── */
/* One column on the hero's edge: intro, questions, form and submit. */
.careers { max-width: 40rem; }
.careers .prose-katayama { max-width: none; }
.careers form { margin-top: 3rem; }
.careers-intro { font-size: 1.25rem; color: var(--ink-soft); }
.careers-h2 { font-size: 1.75rem; font-weight: 600; color: var(--ink); margin-top: 3rem; margin-bottom: 1rem; }
.text-muted { color: var(--ink-soft); }
.form-section { margin-bottom: 2.5rem; }
.form-section--rel { margin-bottom: 2.5rem; position: relative; }
.form-section--last { margin-bottom: 2rem; }
.form-question { font-size: 1.25rem; font-weight: 600; color: var(--ink); margin-bottom: 1rem; }
.form-field { margin-bottom: 1.5rem; }
.form-label { display: block; font-weight: 600; margin-bottom: 0.5rem; }
.form-input,
.form-textarea { width: 100%; padding: 0.75rem; background: #fff; border: 1px solid var(--control-border); border-radius: 2px; font-size: 1rem; }
.form-textarea { resize: vertical; }
.q-note { margin-bottom: 0.75rem; font-size: 0.95rem; color: var(--ink-soft); }
.q-note--roomy { margin-bottom: 1rem; font-size: 0.95rem; color: var(--ink-soft); }
.problem-box { display: flex; flex-direction: column; gap: 0.75rem; background: #fff; padding: 1.25rem; border: 1px solid var(--hairline); border-left: 3px solid var(--ink); margin: 1.5rem 0; }
.problem-title { font-weight: 600; }
/* The variables alone are set in a serif; the sentence around them stays in
   the page's gothic. */
.problem-box var { font-family: "Times New Roman", Georgia, serif; }
.fig { margin: 1.5rem 0; }
.fig-img { max-width: 100%; border: 1px solid var(--hairline); }
.fig-cap { font-size: 0.85rem; color: var(--ink-soft); margin-top: 0.5rem; }
/* Honeypot: visually hidden but present in DOM; any value = bot. */
.visually-hidden-trap { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

/* ── Footer (Render.siteChrome slots) ─────────────────────────────────── */
.footer-mark { flex-basis: 100%; }
.footer-mark-stage { position: relative; width: 112px; height: 112px; border-radius: 50%; cursor: crosshair; }
.footer-mark-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.footer-nav { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; font-size: 0.9375rem; }
.footer-nav a { color: #fff; text-decoration: none; text-underline-offset: 0.3em; }
.footer-nav a:hover { color: #fff; text-decoration: underline; }

/* ── Hero backgrounds (per page; 1x devices get the 1280px variant) ───── */
.hero-img-apollonian { background-image: url("/assets/images/hero-apollonian.jpg"); background-image: image-set(url("/assets/images/derived/hero-apollonian-1280.jpg") 1x, url("/assets/images/hero-apollonian.jpg") 2x); }
.hero-img-hyperbolic { background-image: url("/assets/images/hero-hyperbolic.jpg"); background-image: image-set(url("/assets/images/derived/hero-hyperbolic-1280.jpg") 1x, url("/assets/images/hero-hyperbolic.jpg") 2x); }
.hero-img-proof-tree { background-image: url("/assets/images/hero-proof-tree.jpg"); background-image: image-set(url("/assets/images/derived/hero-proof-tree-1280.jpg") 1x, url("/assets/images/hero-proof-tree.jpg") 2x); }
.hero-img-hopf { background-image: url("/assets/images/hero-hopf.jpg"); background-image: image-set(url("/assets/images/derived/hero-hopf-1280.jpg") 1x, url("/assets/images/hero-hopf.jpg") 2x); }
.hero-img-caustics { background-image: url("/assets/images/hero-caustics.jpg"); background-image: image-set(url("/assets/images/derived/hero-caustics-1280.jpg") 1x, url("/assets/images/hero-caustics.jpg") 2x); }
.hero-img-miura { background-image: url("/assets/images/hero-miura.jpg"); background-image: image-set(url("/assets/images/derived/hero-miura-1280.jpg") 1x, url("/assets/images/hero-miura.jpg") 2x); }
.hero-img-modular { background-image: url("/assets/images/hero-modular.jpg"); background-image: image-set(url("/assets/images/derived/hero-modular-1280.jpg") 1x, url("/assets/images/hero-modular.jpg") 2x); }

/* ── Spacing utilities (single-declaration former inline styles) ──────── */
.mb-075 { margin-bottom: 0.75rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-15 { margin-bottom: 1.5rem; }