/* freeze.css — the few things Dash's component CSS used to provide. */
script[data-dcc-store] { display: none; }
input[type="range"].dcc-slider { width: 100%; }
/* The floating pills give their sliders a fixed track width in style.css,
   but the plain-class selectors there lose to the attribute selector above;
   restate them at matching specificity so the track stays inside the pill. */
input[type="range"].sim-float-slider-input  { width: 190px; }
input[type="range"].tol-float-slider-input  { width: 190px; }
input[type="range"].task-n-float-slider-input { width: 200px; }

/* ---- hero: authors, affiliations, footnotes (redesign) ---- */
.hero-tagline sup,
.hero-affiliations sup,
.hero-notes sup {
    font-size: 0.6em;
    line-height: 0;
    vertical-align: super;
    margin-left: 1px;
}
.hero-affiliations {
    max-width: 780px;
    margin: 0.9rem auto 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}
.hero-affiliations span {
    display: block;
}
.hero-notes {
    margin: 0.5rem auto 0;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}
.hero-notes span + span {
    margin-left: 1.4em;
}

/* Logos flow below the author block instead of being pinned to the
   hero's bottom edge, so they can never overlap the affiliation lines. */
.hero {
    flex-direction: column;
    justify-content: center;
    padding-bottom: 32px;
}
.hero-logos {
    position: static;
    transform: none;
    display: block;
    margin: 2.2rem auto 0;
    max-width: min(560px, 60%);
}

/* ---- hero: web/laptop reading scale, top-aligned (redesign) ---- */
.hero {
    min-height: 0;
    justify-content: flex-start;
    padding-top: 110px;
    padding-bottom: 40px;
}
.hero-eyebrow {
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    margin-bottom: 0.8rem;
}
.hero h1 {
    font-size: clamp(2.2rem, 4.2vw, 3.5rem);
    max-width: 820px;
    margin: 0 auto 1rem;
    line-height: 1.22;
}
.hero-tagline {
    font-size: 1.2rem;
}
.hero-affiliations {
    font-size: 0.98rem;
    margin-top: 0.6rem;
}
.hero-notes {
    font-size: 0.88rem;
    margin-top: 0.35rem;
}
.hero-logos {
    margin-top: 1.6rem;
    max-width: min(520px, 60%);
}

/* ---- hero: link buttons (Nerfies-style dark pills) ---- */
.hero-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 1.1rem;
}
.hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 1.05rem;
    border-radius: 999px;
    background: #363636;
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    line-height: 1;
    transition: background 150ms ease;
}
.hero-btn:hover { background: var(--color-accent); color: #fff; }
.hero-btn svg { width: 1em; height: 1em; }

/* eyebrow keyword line hidden in the redesign */
.hero-eyebrow { display: none; }

/* ---- hero demo: over-estimation case mirrored from §07 ---- */
.hero-demo {
    width: 100%;
    max-width: 1100px;
    margin: 2.4rem auto 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: left;
}
.hero-demo__panel {
    border: 1px solid var(--color-border, #d8d4ce);
    border-radius: 6px;
    background: var(--color-bg);
    padding: 1rem 1.2rem;
}
.hero-demo__top {
    display: grid;
    grid-template-columns: 1fr 120px 1fr;
    align-items: center;
    gap: 0.5rem;
}
.hero-demo__col { min-width: 0; }
.hero-demo__label {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1.1rem;
    line-height: 1.25;
    color: var(--color-text);
}
.hero-demo__sub {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin: 0.2rem 0 0.4rem;
}
.hero-demo__graph {
    width: 100%;
    height: 320px;
}
.hero-demo__link {
    height: 2px;
    background: var(--color-accent);
    margin-top: 2.4rem;
}
.hero-demo__knob {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    max-width: 640px;
    margin: 0 auto;
    width: 100%;
}
.hero-demo__knob-label {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1.05rem;
}
.hero-demo__slider {
    flex: 1 1 200px;
    max-width: 260px;
    accent-color: var(--color-accent);
}
.hero-demo__readout {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    min-width: 3.2em;
    text-align: right;
    color: var(--color-text-muted);
}
.hero-demo__panel-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1rem;
    text-align: center;
    margin-bottom: 0.3rem;
}
.hero-demo__wide { width: 100%; }
@media (max-width: 720px) {
    .hero-demo__top { grid-template-columns: 1fr; }
    .hero-demo__link { display: none; }
    .hero-demo__graph { height: 260px; }
}

/* ======================================================================
   HERO v2 — two-column product hero (ported from dev/hero_layout_test.html)
   ====================================================================== */
.site-stars { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

.hero {
    display: block;
    padding: 0;
    min-height: 0;
    background:
      radial-gradient(60% 70% at 85% 30%, rgba(200, 220, 240, .55), transparent 70%),
      radial-gradient(50% 60% at 10% 80%, rgba(240, 214, 208, .40), transparent 70%);
}
.hero-grid {
    max-width: 1280px; margin: 0 auto; padding: 110px 40px 40px; min-height: 100vh;
    display: grid; grid-template-columns: minmax(340px, 6fr) minmax(420px, 6fr); gap: 48px; align-items: center;
    text-align: left;
}
/* left column */
.hero-intro { position: relative; }
.hero-intro::before {                    /* frosted halo: dims + blurs sparkles under the prose */
    content: ""; position: absolute; inset: -36px -44px; z-index: -1; border-radius: 40px;
    background: rgba(250, 249, 247, .62); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
    -webkit-mask-image: radial-gradient(ellipse 70% 62% at 50% 50%, #000 55%, transparent 100%);
            mask-image: radial-gradient(ellipse 70% 62% at 50% 50%, #000 55%, transparent 100%);
}
.hero .hero-eyebrow { display: none; font-family: var(--font-body); font-size: 1rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: #444; margin: 0 0 1rem; }
.hero .hero-grid h1 { font-size: clamp(2.4rem, 4.2vw, 3.8rem); line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 1.4rem; max-width: none; }
.hero-lede { font-size: 1.2rem; line-height: 1.5; color: #555; max-width: 40ch; margin: 0 0 1.8rem; }
.hero .hero-links { justify-content: flex-start; margin: 0; gap: .7rem; }
.hero .hero-btn { background: var(--color-accent); }
.hero .hero-btn:hover { background: #1f4560; }
.hero .hero-btn + .hero-btn { background: #fff; color: var(--color-text); border: 1px solid var(--color-border); }
.hero .hero-btn + .hero-btn:hover { background: var(--color-accent-light); color: var(--color-text); }
.hero .hero-tagline { font-size: 1rem; margin: 2rem 0 .3rem; max-width: none; }
.hero .hero-affiliations { font-size: .85rem; margin: 0; max-width: none; }
.hero .hero-notes { margin: .4rem 0 0; }
.hero .hero-logos { margin: 1.4rem 0 0; max-width: 360px; }

/* right column: device card + detached knob */
.hero-demo-col { display: flex; flex-direction: column; }
.hero-device {
    border: 1px solid rgba(255,255,255,.7); border-radius: 14px; background: rgba(255,255,255,.22);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 30px 60px -30px rgba(40,60,90,.35), 0 6px 18px -8px rgba(40,60,90,.2); padding: 18px 20px 16px;
}
.hero-stage { position: relative; border-radius: 10px; outline: none; }
.hero-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.hero-tile { min-width: 0; }
.hero-tile__label { font-family: var(--font-body); font-weight: 600; font-size: 1.15rem; line-height: 1.25; color: var(--color-text); }
.hero-tile__sub { font-size: .85rem; color: var(--color-text-muted); margin: .1rem 0 .4rem; }
.hero-tile__graph { width: 100%; height: 232px; }
/* video-style hover controls */
.hero-overlay {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 18px;
    background: rgba(250,249,247,.55); backdrop-filter: blur(1.5px); border-radius: 10px;
    opacity: 0; transition: opacity 180ms ease; pointer-events: none;
}
.hero-stage:hover .hero-overlay, .hero-stage:has(:focus-visible) .hero-overlay, .hero-stage.show .hero-overlay { opacity: 1; pointer-events: auto; }
/* while paused the controls stay visible (so a first-time visitor knows to press play);
   right after pressing play the overlay hides until the pointer leaves the tiles */
.hero-stage:not(.playing) .hero-overlay { opacity: 1; pointer-events: auto; }
.hero-stage.quiet .hero-overlay { opacity: 0 !important; pointer-events: none !important; }
.hero-ctl {
    width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
    background: rgba(26,26,26,.88); color: #fff; box-shadow: 0 8px 20px -8px rgba(0,0,0,.5);
    transition: transform 120ms ease, background 120ms ease; padding: 0;
}
.hero-ctl:hover { transform: scale(1.06); background: var(--color-accent); }
.hero-ctl svg { width: 26px; height: 26px; fill: currentColor; }
.hero-ctl--reset { width: 46px; height: 46px; background: rgba(255,255,255,.95); color: var(--color-text); border: 1px solid var(--color-border); }
.hero-ctl--reset:hover { background: #fff; color: var(--color-accent); }
.hero-ctl--reset svg { width: 22px; height: 22px; }
.hero-stage .ic-pause { display: none; }
.hero-stage.playing .ic-pause { display: block; }
.hero-stage.playing .ic-play { display: none; }

/* knob row: three-part Fibonacci slider + stem meter */
.hero-knob { margin: 26px 0 0; padding: 56px 22px 6px; }
.hero-knob__row { display: flex; align-items: center; gap: 12px; }
.seg { --h: 26px; --gap: 6px; --min: 26px; position: relative; flex: 1 1 auto; height: var(--h); display: flex; align-items: center; }
.seg .seg-l, .seg .seg-r { height: var(--h); border-radius: 999px; }
.seg .seg-l { width: calc(var(--min) + var(--p) * (100% - var(--min) - var(--h) - 2 * var(--gap))); background: linear-gradient(90deg, #9cbcd3, #2d5a7b); transition: width 140ms ease; }
.seg .seg-r { flex: 1 1 auto; background: #dedcd8; position: relative; overflow: hidden; }
.seg .seg-thumb { flex: 0 0 auto; width: var(--h); height: var(--h); margin: 0 var(--gap); border-radius: 50%; background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.04); position: relative; z-index: 1; pointer-events: none; }
.seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 3; }
.seg .seg-ticks { position: absolute; inset: 0; pointer-events: none; transition: opacity 180ms ease; }
.seg:hover .seg-ticks { opacity: 0; }
.seg .seg-ticks i { position: absolute; top: 50%; width: 1.5px; height: 10px; margin-left: -0.75px; transform: translateY(-50%); border-radius: 1px; background: rgba(0,0,0,.22);
    left: calc(var(--min) + var(--gap) + var(--h) / 2 + var(--i) * (100% - var(--min) - var(--h) - 2 * var(--gap))); }
.seg .seg-ticks i.on { background: rgba(255,255,255,.75); }
.seg .seg-bubble { position: absolute; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
    left: calc(var(--min) + var(--gap) + var(--h) / 2 + var(--p) * (100% - var(--min) - var(--h) - 2 * var(--gap))); transition: left 140ms ease;
    bottom: calc(100% + 10px); padding: 5px 14px; border-radius: 999px; background: var(--color-accent); color: #fff;
    font-family: var(--font-body); font-weight: 600; font-size: 1.05rem; font-variant-numeric: tabular-nums; line-height: 1.2; }
.seg .seg-bubble::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--color-accent); }
/* slide-to-unlock shimmer while σ < σ* */
.seg .seg-r::after { content: ""; position: absolute; inset: 0; opacity: 0;
    background: linear-gradient(100deg, transparent 25%, rgba(255,255,255,.9) 50%, transparent 75%); background-size: 220% 100%; background-repeat: no-repeat; }
.seg.nudge .seg-r::after { opacity: 1; animation: seg-shine 2.2s ease-in-out infinite; }
@keyframes seg-shine { 0% { background-position: 120% 0; } 60%, 100% { background-position: -120% 0; } }
/* idle thumb (σ = 0): pulse ring + nudge on the same clock */
.seg .seg-thumb::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(45,90,123,.55); opacity: 0; pointer-events: none; }
.seg.idle .seg-thumb::after { animation: seg-ring 2.2s ease-out infinite; }
.seg.idle .seg-thumb { animation: seg-nudge 2.2s ease-in-out infinite; }
@keyframes seg-ring { 0% { transform: scale(1); opacity: .7; } 55%, 100% { transform: scale(2.1); opacity: 0; } }
@keyframes seg-nudge { 0%, 100% { transform: translateX(0); } 12% { transform: translateX(7px); } 28% { transform: translateX(0); } }
.seg:hover.idle .seg-thumb, .seg:hover.idle .seg-thumb::after { animation: none; }
.hero-meter { position: relative; flex: 0 0 auto; margin-left: 14px; }
.hero-meter__label { position: absolute; left: 50%; bottom: calc(100% + 7px); transform: translateX(-50%); white-space: nowrap;
    font-family: var(--font-body); font-size: .95rem; font-weight: 500; color: var(--color-text); }
.hero-meter__label .sigma { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 1.25em; line-height: 1; margin-left: .1em; color: var(--color-accent-warm); }
.hero-meter__wave { display: block; width: 84px; height: 26px; border-radius: 6px; background: rgba(0,0,0,.035); }

/* performance plot + raster, in a row under the hero */
.hero-below { max-width: 1280px; margin: 0 auto; padding: 0 40px 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hero-below .hero-demo__panel { background: rgba(255,255,255,.6); }

@media (prefers-reduced-motion: reduce) {
    .seg.nudge .seg-r::after, .seg.idle .seg-thumb, .seg.idle .seg-thumb::after { animation: none; }
}
@media (max-width: 900px), (pointer: coarse) {
    .hero-intro::before { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); background: rgba(250, 249, 247, .78); }
}
@media (max-width: 900px) {
    .hero-grid { grid-template-columns: 1fr; gap: 32px; padding: 90px 20px 24px; min-height: 0; }
    .hero-tiles { grid-template-columns: 1fr; }
    .hero-tile__graph { height: 240px; }
    .hero-below { grid-template-columns: 1fr; padding: 0 20px 32px; }
    .hero-knob { margin-top: 40px; padding: 50px 6px 6px; }
}

/* ---- hero: compact Performance ring + Raster bead pipe under the knob ---- */
.hero-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; padding: 0; }
.hero-card {
    border: 1px solid rgba(255,255,255,.7); border-radius: 14px; background: rgba(255,255,255,.22);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 18px 40px -28px rgba(40,60,90,.35), 0 4px 12px -8px rgba(40,60,90,.18); padding: 14px 16px 12px;
}
.hero-card__title { font-family: var(--font-body); font-weight: 600; font-size: 1.15rem; line-height: 1.25; text-align: left; margin-bottom: 10px; color: var(--color-text); }
.hero-ring, .hero-pipe { display: block; width: 100%; height: 156px; }
.hero-card__legend { display: flex; justify-content: center; gap: 18px; margin-top: 8px; font-size: .85rem; color: var(--color-text-muted); }
.hero-card__legend b { color: var(--color-text); font-weight: 600; margin-left: .3em; font-variant-numeric: tabular-nums; }
.hero-card__legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: .45em; vertical-align: -1px; }
.dot--sim { background: #e39c90; }
.dot--gt { background: var(--color-accent-warm); }
.dot--common { background: var(--color-accent); }
.dot--rare { background: var(--color-accent-warm); }
.hero-below { display: none; }
@media (max-width: 900px) { .hero-cards { grid-template-columns: 1fr; padding: 0 6px; } }

/* ---- page wash on a fixed layer (under the sparkles) so it never ends at a
   section border; the hero block itself carries no background any more ---- */
.hero { background: none; }
body::before {
    content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
    background:
      radial-gradient(60% 70% at 85% 30%, rgba(200, 220, 240, .55), transparent 70%),
      radial-gradient(50% 60% at 10% 80%, rgba(240, 214, 208, .40), transparent 70%);
}
.hero .hero-logos { display: none; }

/* ---- Authors section under the hero ("meet the team" style) ---- */
.team { position: relative; max-width: 1100px; margin: 0 auto; padding: 72px 40px 96px; text-align: center; }
.team__rule { display: block; width: 56px; height: 3px; background: #cfcac1; margin: 0 auto 26px; }
.team__title { font-family: var(--font-body); font-weight: 600; font-size: 1.05rem; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 64px; color: var(--color-text); }
.team__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.member { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--color-text); position: relative; }
.member::before {                         /* feathered halo: dims + blurs sparkles under the text */
    content: ""; position: absolute; inset: -20px -24px; z-index: -1; border-radius: 40px;
    background: rgba(250, 249, 247, .6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    -webkit-mask-image: radial-gradient(ellipse 62% 60% at 50% 50%, #000 50%, transparent 100%);
            mask-image: radial-gradient(ellipse 62% 60% at 50% 50%, #000 50%, transparent 100%);
}
.member__photo { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; background: #eee; box-shadow: 0 0 0 1px rgba(0,0,0,.06); margin-bottom: 26px; }
.member__name { font-family: var(--font-body); font-weight: 600; font-size: 1.25rem; letter-spacing: .08em; text-transform: uppercase; }
.member:hover .member__name { color: var(--color-accent); }
.member__arrow { display: inline-block; width: .9em; height: .39em; margin-left: .35em; vertical-align: baseline; transform: translateY(1px); transition: transform 160ms ease; }
.member:hover .member__arrow { transform: translate(4px, 1px); }
.member__role { font-size: .9rem; letter-spacing: .1em; text-transform: uppercase; color: #444; margin-top: 8px; }
.member__bio { font-size: .92rem; line-height: 1.55; color: var(--color-text-muted); margin-top: 16px; max-width: 30ch; }
@media (max-width: 900px), (pointer: coarse) {
    .member::before { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); background: rgba(250, 249, 247, .78); }
}
@media (max-width: 760px) { .team__grid { grid-template-columns: 1fr; gap: 48px; } .team { padding: 56px 20px 72px; } }

/* ---- landing page: link to the details page ---- */
.read-more { text-align: center; padding: 0 20px 96px; }
.read-more__btn {
    display: inline-flex; align-items: center; gap: .6rem; padding: .85rem 1.6rem; border-radius: 999px;
    background: var(--color-accent); color: #fff; font-family: var(--font-body); font-size: 1.05rem; font-weight: 500;
    text-decoration: none; box-shadow: 0 12px 28px -14px rgba(45,90,123,.6); transition: background 150ms ease, transform 150ms ease;
}
.read-more__btn:hover { background: #1f4560; transform: translateY(-1px); }
.read-more__btn svg { width: 1.1em; height: 1.1em; transition: transform 160ms ease; }
.read-more__btn:hover svg { transform: translateX(3px); }

/* ---- affiliation logo strip (landing page) ---- */
.partners { max-width: 1280px; margin: 0 auto; padding: 96px 40px 96px; }
.partners .team__rule { margin-bottom: 84px; }
.partners__row { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; align-items: center; gap: 40px; flex-wrap: wrap; }
.partners__row li { display: flex; align-items: center; justify-content: center; }
.partners__row img { display: block; height: auto; opacity: .92; transform: scale(.78); transform-origin: center; transition: opacity 250ms ease; }   /* smaller, same centres */
.partners__row img:hover { opacity: 1; }
@media (max-width: 900px) { .partners { padding: 56px 20px 64px; } .partners .team__rule { margin-bottom: 48px; } .partners__row { justify-content: center; gap: 28px 40px; } .partners__row img { transform: scale(.7); } }

/* ---- scroll cue: bouncing chevron at the hero's bottom centre; fades once past the hero ---- */
.hero { position: relative; }
.scroll-cue { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 44px; height: 44px; display: grid; place-items: center;
    color: var(--color-text-muted); text-decoration: none; border-radius: 50%; transition: opacity 300ms ease, color 150ms ease; }
.scroll-cue svg { width: 22px; height: 22px; animation: cue-bounce 2.2s ease-in-out infinite; }
.scroll-cue:hover { color: var(--color-accent); }
.scroll-cue.is-hidden { opacity: 0; pointer-events: none; }
@keyframes cue-bounce { 0%, 100% { transform: translateY(0); opacity: .7; } 15% { transform: translateY(7px); opacity: 1; } 35% { transform: translateY(0); opacity: .7; } }
@media (prefers-reduced-motion: reduce) { .scroll-cue svg { animation: none; } }
html { scroll-behavior: smooth; }

/* ---- hero buttons: "Read more" is the primary; PDF / arXiv / Code are secondary ---- */
.hero .hero-btn { background: #fff; color: var(--color-text); border: 1px solid var(--color-border); }
.hero .hero-btn:hover { background: var(--color-accent-light); color: var(--color-text); }
.hero .hero-btn.hero-btn--primary { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.hero .hero-btn.hero-btn--primary:hover { background: #1f4560; color: #fff; }

/* ---- "next" cards (landing page): same glass card as the Rare-event rate / Raster cards ---- */
.next { max-width: 1100px; margin: 0 auto; padding: 8px 40px 40px; }
.next__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ncard {
    position: relative; display: block; min-height: 190px; padding: 18px 20px 20px; text-decoration: none; color: var(--color-text);
    border: 1px solid rgba(255,255,255,.7); border-radius: 14px; background: rgba(255,255,255,.22);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 18px 40px -28px rgba(40,60,90,.35), 0 4px 12px -8px rgba(40,60,90,.18);
    transition: transform 160ms ease, background 160ms ease;
}
.ncard:hover { transform: translateY(-2px); background: rgba(255,255,255,.34); }
.ncard__title { display: block; font-family: var(--font-body); font-weight: 600; font-size: 1.5rem; line-height: 1.25; }
.ncard__desc { display: block; font-size: .92rem; line-height: 1.5; color: var(--color-text-muted); margin-top: 8px; max-width: 36ch; }
.ncard__cta { position: absolute; left: 20px; bottom: 18px; font-size: .85rem; font-weight: 500; color: var(--color-text-muted); }
.ncard__btn { position: absolute; right: 16px; bottom: 14px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
    background: var(--color-accent); color: #fff; transition: background 150ms ease; }
.ncard__btn svg { width: 18px; height: 18px; transition: transform 160ms ease; }
.ncard:hover .ncard__btn { background: #1f4560; }
.ncard:hover .ncard__btn svg { transform: translateX(3px); }
.ncard[href="#"] .ncard__btn { background: #9aa8b2; }
/* blue variant: the accent, translucent like its neighbour */
.ncard--blue { background: rgba(45,90,123,.9); border-color: rgba(255,255,255,.35); color: #fff; }
.ncard--blue:hover { background: rgba(45,90,123,.97); }
.ncard--blue .ncard__desc, .ncard--blue .ncard__cta { color: rgba(255,255,255,.75); }
.ncard--blue .ncard__btn, .ncard--blue[href="#"] .ncard__btn { background: #fff; color: var(--color-accent); }
.ncard--blue:hover .ncard__btn { background: var(--color-accent-light); }
@media (max-width: 760px) { .next__grid { grid-template-columns: 1fr; } .next { padding: 8px 20px 32px; } }

/* ======================================================================
   NAV v2 — Overview · Full results ▾ · Live simulator ▾ (centred, hover menus)
   ====================================================================== */
nav.container { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
/* pin each part to its column, so the hamburger stays at the right when the
   centre nav is hidden on phones (otherwise it slides into the empty middle) */
nav.container .nav-logo { grid-column: 1; }
nav.container .nav { grid-column: 2; }
nav.container .nav-toggle { grid-column: 3; justify-self: end; }
.nav { display: none; align-items: center; gap: 6px; justify-self: center; }
@media (min-width: 769px) { .nav { display: flex; } }
.nav__group { position: relative; }
.nav__item { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 8px; font-family: var(--font-body); font-size: .92rem; font-weight: 500; color: var(--color-text);
    background: none; border: 0; cursor: pointer; text-decoration: none; line-height: 1.2; transition: background 140ms ease, color 140ms ease; }
.nav__item:hover, .nav__group:hover .nav__item, .nav__group:focus-within .nav__item { background: rgba(0,0,0,.05); }
.nav__item.is-active { color: var(--color-accent); }
.nav__item svg { width: 14px; height: 14px; transition: transform 160ms ease; }
.nav__group:hover .nav__item svg, .nav__group:focus-within .nav__item svg { transform: rotate(180deg); }
.nav-menu { position: absolute; top: calc(100% + 6px); left: 50%; min-width: 320px; padding: 8px; border-radius: 14px;
    background: rgba(250,249,247,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.7); box-shadow: 0 24px 48px -24px rgba(40,60,90,.35), 0 6px 18px -8px rgba(40,60,90,.2);
    opacity: 0; transform: translate(-50%, -6px); pointer-events: none; transition: opacity 160ms ease, transform 160ms ease; z-index: 1001; }
.nav-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }   /* hover bridge */
.nav__group:hover .nav-menu, .nav__group:focus-within .nav-menu { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.nav-menu ul { list-style: none; margin: 0; padding: 0; }
.nav-menu a { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 9px; text-decoration: none; color: var(--color-text); transition: background 120ms ease; }
.nav-menu a:hover { background: rgba(45,90,123,.08); }
.nav-menu__num { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--color-accent-light); color: var(--color-accent);
    font-family: var(--font-mono); font-size: .72rem; font-weight: 600; }
.nav-menu__label { display: block; font-size: .92rem; font-weight: 500; line-height: 1.2; }
.nav-menu__sub { display: block; font-size: .78rem; color: var(--color-text-muted); margin-top: 2px; }
.nav-menu--sim { min-width: 300px; }
@media (prefers-reduced-motion: reduce) { .nav-menu, .nav__item svg { transition: none; } }

/* ---- "next" row (landing page): icon badge with a soft halo + institution-style label ---- */
.next { max-width: 1200px; margin: 0 auto; padding: 24px 40px 48px; text-align: center; }
.next .team__rule { margin-bottom: 56px; }
.feat { display: grid; grid-template-columns: repeat(2, minmax(0, 320px)); justify-content: center; gap: 48px; }
.feat__item { display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; color: var(--color-text); padding: 12px 8px; border-radius: 16px; transition: transform 160ms ease; }
.feat__item:hover { transform: translateY(-3px); }
.feat__icon { position: relative; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--color-text);
    box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 8px 22px -12px rgba(40,60,90,.35); margin-bottom: 28px; }
.feat__icon::before { content: ""; position: absolute; inset: -14px; border-radius: 50%; z-index: -1; filter: blur(14px); opacity: .28; transition: opacity 200ms ease, transform 200ms ease; }
.feat__item:hover .feat__icon::before { opacity: .5; transform: scale(1.08); }
.feat__icon--blue::before { background: radial-gradient(circle at 30% 30%, #9cbcd3, #2d5a7b 70%, transparent 72%); }
.feat__icon--warm::before { background: radial-gradient(circle at 30% 30%, #f0b8ad, #c44536 70%, transparent 72%); }
.feat__icon svg { width: 28px; height: 28px; }
.feat__title { font-family: var(--font-body); font-weight: 400; font-size: .9rem; letter-spacing: .1em; text-transform: uppercase; color: #444; line-height: 1.3; }
@media (max-width: 760px) { .feat { grid-template-columns: 1fr; gap: 40px; } .next { padding: 24px 20px 40px; } }

/* ---- footer: citation + links (placeholder content) ---- */
.site-footer { padding: 40px 0 48px; border-top: 1px solid var(--color-border); text-align: center; }
.site-footer p { margin: 0; font-size: .9rem; color: var(--color-text-muted); line-height: 1.6; }
.site-footer__cite em { color: var(--color-text); font-style: italic; }
.site-footer__citebtn { margin-left: .6em; padding: .15em .7em; border-radius: 999px; border: 1px solid var(--color-border); background: #fff; color: var(--color-text);
    font: inherit; font-size: .8rem; cursor: pointer; transition: background 140ms ease; }
.site-footer__citebtn:hover { background: var(--color-accent-light); }
.site-footer__bibtex { display: inline-block; text-align: left; margin: 14px auto 0; padding: 12px 16px; border-radius: 10px; background: rgba(0,0,0,.04);
    font-family: var(--font-mono); font-size: .78rem; line-height: 1.5; color: var(--color-text); max-width: 100%; overflow-x: auto; }
.site-footer__links { margin-top: 12px !important; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .7em; }
.site-footer__links a { color: var(--color-text); text-decoration: none; border-bottom: 1px solid rgba(45,90,123,.35); }
.site-footer__links a:hover { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.site-footer__note { color: var(--color-text-muted); }

/* ---- figure placeholders on the results page (link into the live simulator) ---- */
.placeholder-figure .ph-link {
    margin-top: 0.6rem;
    font-family: var(--font-body, 'Source Sans 3', sans-serif);
    font-size: 0.9rem;
    color: #cfd8e3;
    text-decoration: none;
    border-bottom: 1px solid rgba(207, 216, 227, 0.4);
    transition: color 0.15s, border-color 0.15s;
}
.placeholder-figure .ph-link:hover { color: #fff; border-color: #fff; }

/* ---- floating pills on narrow screens: never wider than the viewport ----
   The expanded σ / chunk-size / tolerance pills are 480–600 px wide and
   centred with translate(-50%), so on a phone both ends were clipped and
   the slider could not be dragged over its full range. Let the pill fit
   the viewport, let the slider track shrink, and drop the text readout. */
@media (max-width: 640px) {
    .sim-float-controls, .tol-float-controls, .task-n-float-controls {
        max-width: calc(100vw - 20px);
        width: calc(100vw - 20px);
        gap: 10px;
        padding-left: 12px;
        padding-right: 16px;
        bottom: 16px;
    }
    .sim-float-controls:not(.is-expanded), .tol-float-controls:not(.is-expanded), .task-n-float-controls:not(.is-expanded) {
        width: auto;
    }
    input[type="range"].sim-float-slider-input,
    input[type="range"].tol-float-slider-input,
    input[type="range"].task-n-float-slider-input {
        flex: 1 1 100px;
        width: auto;
        min-width: 90px;
    }
    .task-n-float-readout { display: none; }
    .sim-float-readout, .tol-float-readout { min-width: 0; }
}

/* ---- §01 background: four-panel comic as a 2x2 grid of separate images ---- */
.manga { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.manga__panel { margin: 0; }
.manga__panel img { display: block; width: 100%; height: auto; border-radius: 6px; }
@media (max-width: 560px) { .manga { grid-template-columns: 1fr; } }

/* ==== §01 Background: Motivation bento + three-patterns band (from dev/details_layout_test.html) ==== */
.bg-section{max-width:1200px;margin:0 auto;padding:72px 40px 40px}
.bg-section{padding-top:72px}
.section-label{display:block;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:10px}
/* ---- Sequence-style bento: left text zone spans two rows, four cards on the right ---- */
.bg-bento{position:relative;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:auto auto;gap:24px;padding:24px 0}
/* dashed grid lines along the gutters: absolutely-positioned grid items are placed
   relative to their grid area, so the lines follow the real column/row boundaries */
.bg-bento__line{position:absolute;pointer-events:none;z-index:0}
.bg-bento__line--v{grid-row:1 / span 2;top:-24px;bottom:-24px;left:-12px;border-left:1px dashed rgba(0,0,0,.22)}
.bg-bento__line--v1{grid-column:2}
.bg-bento__line--v2{grid-column:3}
.bg-bento__line--h{grid-column:2 / span 2;grid-row:2;left:-12px;right:-40px;top:-12px;border-top:1px dashed rgba(0,0,0,.22)}
.bg-card,.bg-bento__text{position:relative;z-index:1}
.bg-bento__text{grid-column:1;grid-row:1 / span 2;display:flex;flex-direction:column;justify-content:center;padding:24px 40px 24px 32px}
.bg-bento__text h2{font-family:var(--font-display);font-weight:400;font-size:2.6rem;line-height:1.05;margin:0 0 6px}
.bg-bento__text .sub{color:var(--muted);font-size:1.05rem;margin:0 0 26px}
.bg-bento__text p{margin:0 0 14px;font-size:1.02rem;color:#333}
.bg-bento__text .key{color:var(--warm);font-weight:600}

.bg-card{position:relative;background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.03),0 12px 30px -22px rgba(40,60,90,.35);display:flex;flex-direction:column}
.bg-card__art{position:relative;aspect-ratio:16/9;background:#f4f2ee;overflow:visible}
.bg-card__art img{border-radius:13px 13px 0 0}
.bg-card__art img{display:block;width:100%;height:100%;object-fit:cover}
.bg-card__art img[hidden]{display:none}
/* soft hand-off from picture to text: a progressive blur band, then a white fade
   over the lower part of the image, so the card body seems to emerge from the picture */
.bg-card__art{aspect-ratio:16/10}
.bg-card__art::before{content:"";position:absolute;left:0;right:0;bottom:0;height:30%;pointer-events:none;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 70%,#000 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 70%,#000 100%)}
.bg-card__art::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.45) 55%,#fff 100%)}
.bg-card__art--ph::before,.bg-card__art--ph::after{display:none}
.bg-card__body{padding:26px 22px 22px;margin-top:-6px}
/* placeholder variant: dashed stage with a letter, used until the final panels are dropped in */
.bg-card__art--ph{display:grid;place-items:center;background:
  repeating-linear-gradient(45deg,transparent 0 14px,rgba(0,0,0,.035) 14px 15px),#f4f2ee;border-bottom:1px dashed var(--border)}
.bg-card__art--ph span{font-family:var(--font-display);font-size:3rem;color:#b8b3aa}
.bg-card__badge{position:absolute;left:20px;bottom:-18px;width:36px;height:36px;border-radius:50%;background:#fff;border:1px solid var(--border);
  display:grid;place-items:center;color:var(--accent);box-shadow:0 4px 12px -6px rgba(0,0,0,.3);z-index:1}
.bg-card__badge svg{width:16px;height:16px}
.bg-card__body{padding:32px 22px 22px}
.bg-card__body h3{margin:0 0 8px;font-family:var(--font-body);font-weight:600;font-size:1.12rem}
.bg-card__body p{margin:0;color:#444;font-size:.95rem;line-height:1.55}
.bg-card__body .step{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:4px;display:block}

@media (max-width:900px){
  .bg-bento{grid-template-columns:1fr 1fr}
  .bg-bento__text{grid-column:1 / span 2;grid-row:1;padding:12px 8px 20px}
  .bg-bento__line{display:none}
}
@media (max-width:560px){.bg-bento{grid-template-columns:1fr}.bg-bento__text{grid-column:1}}

/* ---- second band (reference: "Investors"): label column + three estimation columns ---- */
.bg-band{position:relative;margin-top:56px;padding:0}
.bg-strip{height:44px;overflow:hidden;font:11px/16px ui-monospace,Menlo,monospace;letter-spacing:.42em;color:rgba(0,0,0,.16);white-space:nowrap;user-select:none;
  mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
.bg-strip .r{color:var(--warm);opacity:.55}
.bg-band__grid{display:grid;grid-template-columns:1.05fr 1fr 1fr 1fr;border-top:1px dashed rgba(0,0,0,.22);border-bottom:1px dashed rgba(0,0,0,.22)}
.bg-band__label{padding:56px 32px 56px 32px;display:flex;flex-direction:column;justify-content:center}
.bg-band__label h2{font-family:var(--font-display);font-weight:400;font-size:2.2rem;line-height:1.05;margin:0 0 8px}
.bg-band__label p{margin:0;color:var(--muted);font-size:1rem;max-width:22ch}
.bg-pat{padding:40px 28px 44px;border-left:1px dashed rgba(0,0,0,.22);display:flex;flex-direction:column}
.bg-pat__figs{display:grid;gap:10px;margin-bottom:22px}
.bg-pat__figs img{display:block;width:100%;height:auto;border-radius:8px;border:1px solid var(--border)}
.bg-pat h3{margin:0 0 6px;font-family:var(--font-body);font-weight:600;font-size:1.12rem}
.bg-pat p{margin:0;color:#444;font-size:.95rem;line-height:1.5}
.bg-pat--good h3{color:var(--accent)}
.bg-pat__tag{display:inline-block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
@media (max-width:900px){.bg-band__grid{grid-template-columns:1fr 1fr}.bg-band__label{grid-column:1 / span 2;padding:32px 8px 8px}.bg-pat:nth-child(2){border-left:0}}
@media (max-width:560px){.bg-band__grid{grid-template-columns:1fr}.bg-band__label{grid-column:1}.bg-pat{border-left:0;border-top:1px dashed rgba(0,0,0,.22)}}




/* ==== §02 Research question: centred headline + lede, then the clickable roadmap (reference: Sequence hero) ==== */
.rq2 .rq2__inner{max-width:1200px;margin:0 auto;padding:0 40px;text-align:center}
.rq2 .section-label{display:block;text-align:center;margin-bottom:22px}
.rq2 .rq2__title{font-family:var(--font-display);font-weight:400;font-size:clamp(2rem,3.6vw,3.1rem);line-height:1.12;max-width:26ch;margin:0 auto 20px;text-align:center}
.rq2 .rq2__lede{font-size:1.15rem;line-height:1.55;color:var(--color-text-muted,#6b6b6b);max-width:none;white-space:nowrap;margin:0 auto 44px;text-align:center}
@media (max-width:640px){.rq2 .rq2__lede{white-space:normal}}
.rq2 .rq2__key{color:var(--color-accent)}
.rq2 .rq2__key--warm{color:#c44536}
.rq2 .rq2__roadmap{margin:0 auto;width:min(78%,900px)}
.rq2 .rq2__roadmap img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--color-border);background:#fff;padding:10px;box-sizing:border-box;
  box-shadow:0 4px 16px rgba(0,0,0,.05),0 1px 3px rgba(0,0,0,.03);cursor:zoom-in;transition:transform 160ms ease,box-shadow 160ms ease}
.rq2 .rq2__roadmap img:hover{transform:translateY(-2px);box-shadow:0 14px 34px -18px rgba(40,60,90,.45),0 1px 3px rgba(0,0,0,.03)}
@media (max-width:640px){.rq2 .rq2__roadmap{width:100%}}

/* ==== §03 Task design: left-aligned title + bold lede, grey body copy left, figure right (reference: Sequence "Why") ==== */
.td2 .td2__inner{max-width:1200px;margin:0 auto;padding:0 40px}
.td2 .td2__title{font-family:var(--font-display);font-weight:400;font-size:2.6rem;line-height:1.05;margin:0 0 12px}
.td2 .td2__lede{font-size:1.15rem;line-height:1.45;color:var(--color-text);max-width:none;margin:0 0 22px;font-weight:500}
.td2 .td2__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;padding:28px 0}
.td2 .td2__row + .td2__row{border-top:1px dashed rgba(0,0,0,.18)}
.td2 .td2__row--flip .td2__fig{justify-self:start}
.td2 .td2__text h3{font-family:var(--font-body);font-weight:600;font-size:1.12rem;margin:0 0 10px;color:var(--color-text)}
.td2 .td2__text p{margin:0 0 14px;font-size:.98rem;line-height:1.55;color:#555;max-width:52ch}
.td2 .td2__note{color:#9a958e;font-size:.9rem}
.td2 .td2__fig{margin:0;justify-self:start;width:100%;max-width:520px}
.td2 .td2__fig img{display:block;width:100%;height:auto;border-radius:12px;background:#fff;border:1px solid var(--color-border);padding:14px;box-sizing:border-box;
  box-shadow:0 4px 16px rgba(0,0,0,.05),0 1px 3px rgba(0,0,0,.03);cursor:zoom-in;transition:transform 160ms ease,box-shadow 160ms ease}
.td2 .td2__fig img:hover{transform:translateY(-2px);box-shadow:0 14px 34px -18px rgba(40,60,90,.45),0 1px 3px rgba(0,0,0,.03)}
.td2 .td2__fig figcaption{margin-top:10px;font-size:.85rem;color:#8a857e;text-align:center}
@media (max-width:900px){.td2 .td2__row{grid-template-columns:1fr;gap:24px}.td2 .td2__fig{justify-self:center}.td2 .td2__row--flip .td2__fig{order:2;justify-self:center}}

section.td2{padding-top:72px;padding-bottom:72px}

/* §03 row C: segmented pill (reference: Review / Solve / Prevent) switching one chart card */
.td2 .td2__tabbed{justify-self:start;width:100%;max-width:520px;display:flex;flex-direction:column;align-items:center;gap:14px}
.td2__tabs{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:rgba(0,0,0,.05);border:1px solid rgba(0,0,0,.06)}
.td2__tab{appearance:none;border:0;background:transparent;border-radius:999px;padding:7px 16px;font:500 .9rem/1.2 var(--font-body);color:#6b6b6b;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:background 160ms ease,color 160ms ease,box-shadow 160ms ease}
.td2__tab:hover{color:var(--color-text)}
.td2__tab.is-active{background:#fff;color:var(--color-text);box-shadow:0 1px 2px rgba(0,0,0,.08),0 6px 16px -10px rgba(40,60,90,.4)}
.td2__dot{width:9px;height:9px;border-radius:50%;background:#c9c4bb;transition:background 160ms ease}
.td2__tab.is-active .td2__dot{background:var(--color-accent);box-shadow:0 0 0 3px rgba(45,90,123,.15)}
.td2__tabsub{font-size:.75rem;color:#9a958e;font-weight:400}
.td2__tab.is-active .td2__tabsub{color:#c44536}
.td2 .td2__fig--tabbed{max-width:none;width:100%}
.td2 .td2__panels{position:relative;background:#fff;border:1px solid var(--color-border);border-radius:12px;padding:14px;box-shadow:0 4px 16px rgba(0,0,0,.05),0 1px 3px rgba(0,0,0,.03)}
.td2 .td2__panels img{display:none;width:100%;height:auto;cursor:zoom-in;border:0;padding:0;box-shadow:none;border-radius:6px}
.td2 .td2__panels img.is-active{display:block;animation:td2fade 220ms ease}
@keyframes td2fade{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@media (max-width:900px){.td2 .td2__tabbed{justify-self:center}}

/* ==== §04 Input generation: text above, figure below; E/F behind a Level 1 / Level 2 pill ==== */
.ig2 .ig2__inner{max-width:1200px;margin:0 auto;padding:0 40px}
.ig2 .ig2__title{font-family:var(--font-display);font-weight:400;font-size:2.6rem;line-height:1.05;margin:0 0 12px}
.ig2 .ig2__lede{font-size:1.15rem;line-height:1.45;color:var(--color-text);margin:0 0 22px;font-weight:500}
.ig2 .ig2__part{padding:28px 0}
.ig2 .ig2__part + .ig2__part{border-top:1px dashed rgba(0,0,0,.18)}
.ig2 .ig2__text h3{font-family:var(--font-body);font-weight:600;font-size:1.12rem;margin:0 0 10px;color:var(--color-text)}
.ig2 .ig2__text p{margin:0 0 12px;font-size:.98rem;line-height:1.55;color:#555;max-width:none}
.ig2 .ig2__fig{margin:14px auto 0;width:100%;max-width:960px}
.ig2 .ig2__fig > img{display:block;width:100%;height:auto;border-radius:12px;background:#fff;border:1px solid var(--color-border);padding:14px;box-sizing:border-box;
  box-shadow:0 4px 16px rgba(0,0,0,.05),0 1px 3px rgba(0,0,0,.03);cursor:zoom-in;transition:transform 160ms ease,box-shadow 160ms ease}
.ig2 .ig2__fig > img:hover{transform:translateY(-2px);box-shadow:0 14px 34px -18px rgba(40,60,90,.45),0 1px 3px rgba(0,0,0,.03)}
.ig2 .ig2__tabbed{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:14px}
.ig2 .ig2__tabbed .ig2__fig{margin-top:0}
.ig2 .td2__panels{background:#fff;border:1px solid var(--color-border);border-radius:12px;padding:14px;box-shadow:0 4px 16px rgba(0,0,0,.05),0 1px 3px rgba(0,0,0,.03)}
.ig2 .td2__panels img{display:none;width:100%;height:auto;cursor:zoom-in;border-radius:6px}
.ig2 .td2__panels img.is-active{display:block;animation:td2fade 220ms ease}

/* §05 attractor-network block: collapsible, closed by default; two figure cards need a taller reveal cap */
.bcpnn-attractor-block.is-expanded > .viz-block-collapse{max-height:2200px}

/* ==== §05 BCPNN + §06 Learning: keep the layout, match the type scale of the redesigned sections ==== */
#bcpnn, #training, #results { padding-top: 72px; padding-bottom: 72px; }
#bcpnn > .container, #training > .container, #results > .container { max-width: 1200px; }
#bcpnn h2, #training h2, #results h2 { font-size: 2.6rem; line-height: 1.05; margin-bottom: 12px; }
#bcpnn > .container > p, #training > .container > p, #results > .container > p { font-size: 1.15rem; line-height: 1.45; font-style: normal; font-weight: 500; color: var(--color-text); margin-bottom: 22px; }
#bcpnn .viz-block-title, #training .viz-block-title, #results .viz-block-title { font-family: var(--font-body); font-weight: 600; font-size: 1.12rem; line-height: 1.3; }
#bcpnn .rq-typed, #training .rq-typed, #results .rq-typed { font-size: .98rem; font-weight: 400; line-height: 1.55; color: #555; }
#bcpnn .rq-typed .rq-key, #training .rq-typed .rq-key, #results .rq-typed .rq-key { font-size: inherit; }
#bcpnn .info-row__text, #bcpnn .info-row p, #training p, #training li { font-size: .98rem; line-height: 1.55; color: #555; }

/* §05 collapsible blocks: one- or two-sentence summary that stays visible while collapsed */
.viz-block--collapsible > .viz-block-summary{margin:6px 0 0;font-size:.98rem;line-height:1.55;color:#555;max-width:none}
.viz-block--collapsible.is-expanded > .viz-block-summary{color:#8a857e}
/* §05 minicolumn block: figures at half size, text takes the rest of the row */
.bcpnn-minicolumn-block .info-row__media{flex:0 0 25%;max-width:25%}
.bcpnn-minicolumn-block .info-row__media img{width:100%;height:auto;display:block}
.bcpnn-minicolumn-block .info-row__text{flex:1 1 0}

/* §05/§06 step-caption header pills: keep light text on the dark pill (the body-copy override above must not apply) */
#bcpnn .info-step-caption__header .rq-typed, #training .info-step-caption__header .rq-typed{color:#f6f1e6;font-weight:700;font-size:1.05rem;line-height:1.3}
/* equations block: give MathJax output some air */
.bcpnn-equations mjx-container[display="true"]{margin:.6em 0 1em}

/* ==== §07 Simulation: explanation paragraph + hand-off card to the simulator page ==== */
.sm2 .sm2__inner{max-width:1200px;margin:0 auto;padding:0 40px}
section.sm2{padding-top:72px;padding-bottom:72px}
.sm2 .sm2__title{font-family:var(--font-display);font-weight:400;font-size:2.6rem;line-height:1.05;margin:0 0 12px}
.sm2 .sm2__lede{font-size:1.15rem;line-height:1.5;color:var(--color-text);margin:0 0 28px;font-weight:500}
.sm2 .sm2__lede strong{font-weight:600;color:var(--color-accent)}
.sm2 .sm2__cta{display:flex;align-items:center;justify-content:space-between;gap:32px;background:#fff;border:1px solid var(--color-border);border-radius:16px;padding:26px 30px;
  box-shadow:0 4px 16px rgba(0,0,0,.05),0 1px 3px rgba(0,0,0,.03)}
.sm2 .sm2__cta-text h3{font-family:var(--font-body);font-weight:600;font-size:1.12rem;margin:0 0 6px}
.sm2 .sm2__cta-text p{margin:0;font-size:.98rem;line-height:1.55;color:#555;max-width:64ch}
.sm2 .sm2__btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:12px;padding:12px 22px 12px 14px;border-radius:999px;background:var(--color-accent);color:#fff;text-decoration:none;font-weight:600;font-size:.98rem;
  box-shadow:0 8px 20px -10px rgba(45,90,123,.6);transition:transform 160ms ease,box-shadow 160ms ease,background 160ms ease}
.sm2 .sm2__btn:hover{transform:translateY(-2px);background:#264d69;box-shadow:0 14px 28px -12px rgba(45,90,123,.7)}
.sm2 .sm2__btn-icon{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center}
.sm2 .sm2__btn-icon svg{width:14px;height:14px}
@media (max-width:720px){.sm2 .sm2__cta{flex-direction:column;align-items:flex-start}}

/* simulator page: back link at the top, return card at the bottom */
.back-link{display:inline-flex;align-items:center;gap:6px;margin-bottom:18px;font-size:.9rem;font-weight:500;color:var(--color-text-muted,#6b6b6b);text-decoration:none;transition:color 140ms ease}
.back-link svg{width:16px;height:16px}
.back-link:hover{color:var(--color-accent)}
section.sm2--return{padding-top:24px;padding-bottom:72px}

/* inline hand-off cards inside §03 / §04 of the results page */
.sm2--inline{margin-top:28px}
.sm2--inline .sm2__cta{padding:22px 26px}

/* §08 results: wheel badges and the pipe of tabs follow the same scale */
#results .wheel-item-badge{font-size:.9rem;line-height:1.2}
#results p, #results li{font-size:.98rem;line-height:1.55;color:#555}
#results > .container > p{color:var(--color-text)}

/* §08 results: plots about 20% smaller to sit with the smaller type */
#results .results-fig-frame{max-width:460px;margin:0 auto}
#results .markov-wheel{height:470px}

/* §08 parameter-sweep control: four options (τ_p, g_β, g_bayesian, g_I) */
.seg-control--4{max-width:600px}
.seg-control--4 .seg-control-thumb{width:calc((100% - 8px) / 4)}
.seg-control--4.is-tau_p      .seg-control-thumb{transform:translateX(0%)}
.seg-control--4.is-gbeta      .seg-control-thumb{transform:translateX(100%)}
.seg-control--4.is-g_bayesian .seg-control-thumb{transform:translateX(200%)}
.seg-control--4.is-g_I        .seg-control-thumb{transform:translateX(300%)}

#results .results-block2-desc__text{margin:0 0 18px;font-size:.98rem;line-height:1.55;color:#555;max-width:none}
#results .results-block2-desc__text sub{font-size:.75em}

/* §08 heat-map sweep: narrower and centred so the six cells read closer to square */
#results .results-block2-fig{width:min(100%,880px);align-self:center}

/* Alternating section shade: a translucent tint instead of a solid grey, so the fixed
   red/blue colour wash behind the page stays visible through the "grey" sections. */
section.alt-bg { background: rgba(0, 0, 0, 0.035); }

/* ==== §08 Biological counterparts (rebuilt from the paper's Discussion) ==== */
.bio2 .bio2__inner{max-width:1200px;margin:0 auto;padding:0 40px}
section.bio2{padding-top:72px;padding-bottom:72px}
.bio2 .bio2__title{font-family:var(--font-display);font-weight:400;font-size:2.6rem;line-height:1.05;margin:0 0 12px}
.bio2 .bio2__lede{font-size:1.15rem;line-height:1.5;color:var(--color-text);margin:0 0 10px;font-weight:500}
.bio2 .bio2__part{padding:32px 0}
.bio2 .bio2__part + .bio2__part{border-top:1px dashed rgba(0,0,0,.18)}
.bio2 .bio2__head{margin-bottom:22px}
.bio2 h3{font-family:var(--font-display);font-weight:400;font-size:1.7rem;line-height:1.15;margin:0 0 6px;color:var(--color-text)}
.bio2 .bio2__head p{margin:0;font-size:1rem;line-height:1.55;color:#555;max-width:none}
.bio2 h4{font-family:var(--font-body);font-weight:600;font-size:1.08rem;margin:0 0 8px;color:var(--color-text)}
.bio2 p{font-size:.95rem;line-height:1.55;color:#555;margin:0 0 12px}
.bio2 .cite{color:var(--color-accent);text-decoration:none;font-size:.82em;vertical-align:baseline}
.bio2 .cite:hover{text-decoration:underline}
.bio2 sub{font-size:.75em}
.bio2 .bio2__cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.bio2 .bio2__card{position:relative;background:#fff;border:1px solid var(--color-border);border-radius:14px;padding:22px 22px 12px;box-shadow:0 1px 2px rgba(0,0,0,.03),0 12px 30px -22px rgba(40,60,90,.35)}
.bio2 .bio2__card p:last-child{margin-bottom:0}
.bio2 .bio2__kicker{display:block;font-size:.72rem;letter-spacing:.16em;color:#9a958e;margin-bottom:6px}
.bio2 .bio2__modhead{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.bio2 .bio2__modhead h4{margin:0}
.bio2 .bio2__touch{font-size:.82rem;color:#8a857e;margin:0 0 10px}
.bio2 .bio2__badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.06em;color:#fff;line-height:1.2}
.bio2 .bio2__badge--da{background:#2d5a7b}.bio2 .bio2__badge--ach{background:#c44536}.bio2 .bio2__badge--ne{background:#7a6c5d}
.bio2 .bio2__card--da{border-top:3px solid #2d5a7b}.bio2 .bio2__card--ach{border-top:3px solid #c44536}.bio2 .bio2__card--ne{border-top:3px solid #7a6c5d}
.bio2 .bio2__duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:stretch;margin-top:22px}
.bio2 .bio2__svgcard{margin:0;background:#fff;border:1px solid var(--color-border);border-radius:14px;padding:16px 16px 12px;box-shadow:0 4px 16px rgba(0,0,0,.05),0 1px 3px rgba(0,0,0,.03)}
.bio2 .bio2__svgcard svg{display:block;width:100%;height:auto;font-family:var(--font-body)}
.bio2 .bio2__svgcard figcaption,.bio2 .bio2__fig figcaption{margin-top:10px;font-size:.85rem;line-height:1.45;color:#8a857e;text-align:center}
.bio2 .bio2__caption{display:block;font-size:.85rem;color:#8a857e;margin:22px 0 8px}
.bio2 .bio2__matrixwrap .bio2__caption{margin-top:0}
.bio2 .bio2__matrix{background:#fff;border:1px solid var(--color-border);border-radius:14px;overflow:hidden;font-size:.9rem}
.bio2 .bio2__mrow{display:grid;grid-template-columns:1fr 1.3fr 1.3fr 1.3fr}
.bio2 .bio2__mrow > div{padding:12px 14px;border-top:1px solid rgba(0,0,0,.06);color:#555;line-height:1.4}
.bio2 .bio2__mrow > div:first-child{font-weight:600;color:var(--color-text);background:rgba(0,0,0,.025)}
.bio2 .bio2__mrow--head > div{border-top:0;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:#8a857e;font-weight:600;background:rgba(0,0,0,.025)}
.bio2 .bio2__tablewrap{overflow-x:auto;background:#fff;border:1px solid var(--color-border);border-radius:14px}
.bio2 .bio2__table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:720px}
.bio2 .bio2__table th{text-align:left;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:#8a857e;font-weight:600;padding:12px 14px;background:rgba(0,0,0,.025)}
.bio2 .bio2__table td{padding:11px 14px;border-top:1px solid rgba(0,0,0,.06);color:#555;vertical-align:top;line-height:1.4}
.bio2 .bio2__param{font-weight:600;color:var(--color-text);white-space:nowrap}
.bio2 .bio2__row{display:grid;grid-template-columns:1fr;gap:36px;align-items:start}
.bio2 .bio2__fig{margin:0;width:100%;max-width:420px;justify-self:end}
.bio2 .bio2__fig img{display:block;width:100%;height:auto;border-radius:12px;background:#fff;border:1px solid var(--color-border);padding:12px;box-sizing:border-box;box-shadow:0 4px 16px rgba(0,0,0,.05),0 1px 3px rgba(0,0,0,.03);cursor:zoom-in;transition:transform 160ms ease,box-shadow 160ms ease}
.bio2 .bio2__fig img:hover{transform:translateY(-2px);box-shadow:0 14px 34px -18px rgba(40,60,90,.45),0 1px 3px rgba(0,0,0,.03)}
.bio2 .bio2__fig--wide{max-width:1000px;margin:20px auto 0;justify-self:center}
.bio2 .bio2__fig--wide img{background:#fff}
.bio2 .bio2__duo--axis{grid-template-columns:minmax(0,1.25fr) minmax(0,.95fr);align-items:center;margin-top:30px}
@media (max-width:960px){.bio2 .bio2__cards{grid-template-columns:1fr}.bio2 .bio2__duo,.bio2 .bio2__row{grid-template-columns:1fr}.bio2 .bio2__fig{justify-self:center}}

.bio2 .bio2__svgwrap .bio2__caption{margin-top:0}
.bio2 .bio2__svgwrap .bio2__svgcard{height:calc(100% - 30px);display:flex;align-items:center;justify-content:center;box-sizing:border-box}

/* §01 motivation bullet list */
.bg-bento__list{margin:6px 0 0;padding-left:1.1em;font-size:1.02rem;color:#333;line-height:1.55}
.bg-bento__list li{margin:0 0 10px}
/* §10 references: collapsed by default */
.refs-toggle{display:inline-flex;align-items:center;gap:8px;margin:4px 0 6px;padding:8px 16px;border-radius:999px;border:1px solid var(--color-border);background:#fff;font:500 .92rem var(--font-body);color:var(--color-text);cursor:pointer;transition:background 140ms ease}
.refs-toggle:hover{background:rgba(0,0,0,.04)}
.refs-toggle svg{width:14px;height:14px;transition:transform 160ms ease}
.refs-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.refs-body{margin-top:14px}

section.rq2{padding-top:120px}

/* ---- text veil: soften the constellation sparkles behind text that sits directly on the page wash ----
   A feathered backdrop-blur pseudo-element under each prose block (cards already cover the canvas). */
.bg-bento__text, .bg-band__label, .bg-pat, .rq2 .rq2__title, .rq2 .rq2__lede,
.td2 .td2__lede, .td2 .td2__text, .ig2 .ig2__lede, .ig2 .ig2__text, .sm2 .sm2__lede,
.bio2 .bio2__lede, .bio2 .bio2__head, .bio2 .bio2__text,
#bcpnn > .container > p, #training > .container > p, #results > .container > p,
.bcpnn-intro-prose, .viz-block-summary, .info-row__text, .results-block2-desc__text, .bcpnn-equations {
  position: relative; isolation: isolate;
}
.bg-bento__text::before, .bg-band__label::before, .bg-pat::before, .rq2 .rq2__title::before, .rq2 .rq2__lede::before,
.td2 .td2__lede::before, .td2 .td2__text::before, .ig2 .ig2__lede::before, .ig2 .ig2__text::before, .sm2 .sm2__lede::before,
.bio2 .bio2__lede::before, .bio2 .bio2__head::before, .bio2 .bio2__text::before,
#bcpnn > .container > p::before, #training > .container > p::before, #results > .container > p::before,
.bcpnn-intro-prose::before, .viz-block-summary::before, .info-row__text::before, .results-block2-desc__text::before, .bcpnn-equations::before {
  content: ""; position: absolute; inset: -14px -20px; z-index: -1; pointer-events: none; border-radius: 22px;
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 80%);
          mask-image: radial-gradient(ellipse at center, #000 40%, transparent 80%);
}
@media (prefers-reduced-motion: reduce), (max-width: 640px) {
  .bg-bento__text::before, .td2 .td2__text::before, .ig2 .ig2__text::before, .bio2 .bio2__text::before { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* §06 GT-vs-learned comparison on phones: the 20-column matrix forced its grid column wider than the screen */
@media (max-width: 880px) {
  .gt-learned-grid > * { min-width: 0; max-width: 100%; }
  .gt-learned-grid .task-matrix-card, .gt-learned-grid .task-graph-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---- phone pass for the rebuilt sections ---- */
@media (max-width: 640px) {
  .bg-section, .rq2 .rq2__inner, .td2 .td2__inner, .ig2 .ig2__inner, .sm2 .sm2__inner, .bio2 .bio2__inner { padding-left: 20px; padding-right: 20px; }
  /* grid children default to min-width:auto and take their content width; let them shrink and scroll instead */
  .bio2 .bio2__duo > *, .bio2 .bio2__cards > *, .bio2 .bio2__row > * { min-width: 0; }
  .bio2 .bio2__matrixwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .bio2 .bio2__matrix { min-width: 520px; }
  .bio2 .bio2__svgcard { padding: 10px 6px 8px; }
  /* segmented pills: keep each option on one line, drop the sub-label, allow the row to scroll */
  .td2__tabs { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .td2__tab { white-space: nowrap; padding: 6px 12px; gap: 6px; flex: 0 0 auto; }
  .td2__tabsub { display: none; }
  .bg-bento__text { padding-left: 8px; padding-right: 8px; }
}

/* display equations scroll sideways on narrow screens instead of spilling off the page */
.bcpnn-equations mjx-container[display="true"]{display:block;max-width:100%;overflow-x:auto;overflow-y:hidden;padding:2px 0}

/* phone: GT-vs-learned comparison reads column by column (label, its two cards, next label, its two cards) */
@media (max-width: 880px) {
  .gt-learned-grid > :nth-child(1) { order: 1; }
  .gt-learned-grid > :nth-child(3) { order: 2; }
  .gt-learned-grid > :nth-child(5) { order: 3; }
  .gt-learned-grid > :nth-child(2) { order: 4; margin-top: 18px; }
  .gt-learned-grid > :nth-child(4) { order: 5; }
  .gt-learned-grid > :nth-child(6) { order: 6; }
}
/* phone: the 3x2 sweep grid keeps a readable width and scrolls sideways inside its card */
@media (max-width: 760px) {
  #results .results-block2-fig { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #results #results-block2-fig2 { min-width: 720px; }
  #results .results-block2-fig::after { content: "scroll sideways →"; display: block; font-size: .78rem; color: #9a958e; text-align: right; padding: 4px 8px 0; }
}

/* phone: the parameter pill keeps all four options readable */
@media (max-width: 640px) {
  #results .seg-control { max-width: 100%; }
  #results .seg-control-option { font-size: .82rem; padding-left: 4px; padding-right: 4px; white-space: nowrap; }
}

/* ---- global scale: 95 % type scale on desktop. Everything sized in rem/em follows;
   pixel-capped figure cards and canvases keep their size. Phones stay at 100 %. ---- */
@media (min-width: 769px) { html { font-size: 95%; } }

/* ---- short desktop viewports (laptops, VMs, small windows): compact the hero so the
   noise knob stays above the fold instead of being cut off ---- */
@media (min-width: 769px) and (max-height: 840px) {
  .hero-grid { padding-top: 84px; padding-bottom: 26px; }
  .hero .hero-grid h1 { font-size: clamp(2.2rem, 3.6vw, 3.2rem); margin-bottom: 1rem; }
  .hero-lede { margin-bottom: 1.3rem; }
  .hero-cards { margin-top: 12px; }
  .hero-ring, .hero-pipe { height: 120px; }
  .hero-knob { margin-top: 14px; padding-top: 34px; }
  .scroll-cue { bottom: 10px; }
}
@media (min-width: 769px) and (max-height: 720px) {
  .hero-grid { padding-top: 76px; }
  .hero-ring, .hero-pipe { height: 100px; }
  .hero-knob { padding-top: 28px; }
}

/* floating pills: touch-friendly toggles, and never two pills stacked at the same spot */
.sim-float-toggle, .tol-float-toggle, .task-n-float-toggle { touch-action: manipulation; -webkit-tap-highlight-color: transparent; min-width: 44px; min-height: 44px; }
.sim-float-controls, .tol-float-controls, .task-n-float-controls { touch-action: manipulation; }
body:has(.sim-float-controls.visible) .task-n-float-controls,
body:has(.sim-float-controls.visible) .tol-float-controls { opacity: 0; pointer-events: none; }

/* ---- language switcher (placeholder) ---- */
nav.container .nav-right { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 6px; }
.nav-lang { display: block; }
.nav-lang__btn { gap: 6px; }
.nav-lang__globe { width: 16px !important; height: 16px !important; transform: none !important; }
.nav-lang__code { font-size: .8rem; font-weight: 600; letter-spacing: .04em; min-width: 1.6em; text-align: center; }
.nav-menu--right { left: auto; right: 0; transform: translate(0, -6px); min-width: 200px; }
.nav__group:hover .nav-menu--right, .nav__group:focus-within .nav-menu--right { transform: translate(0, 0); }
.nav-menu--lang a { justify-content: space-between; }
.nav-lang__check { color: var(--color-accent); font-weight: 700; opacity: 0; }
.nav-menu--lang a.is-active .nav-lang__check { opacity: 1; }
.nav-mobile__lang { margin-top: 28px; padding-top: 22px; border-top: 1px dashed rgba(0,0,0,.18); width: min(320px, 80vw); text-align: center; }
.nav-mobile__lang-title { display: block; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 12px; }
.nav-mobile__lang-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.nav-mobile__lang-row button { appearance: none; border: 1px solid var(--color-border); background: #fff; border-radius: 999px; padding: 8px 14px; font: 500 .92rem var(--font-body); color: var(--color-text); cursor: pointer; }
.nav-mobile__lang-row button.is-active { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }

/* mobile menu: scrollable and top-aligned so the language row is reachable on short screens */
.nav-mobile { justify-content: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 84px 20px 40px; box-sizing: border-box; height: 100dvh; }
.nav-mobile a { font-size: 1.45rem; margin: .45rem 0; }
.nav-mobile__lang { margin-top: 20px; padding-top: 18px; }

/* ---- language: CJK fallbacks behind the Latin fonts; only active when the page is switched ---- */
html[data-lang="zh-Hans"] body, html[data-lang="zh-Hans"] .nav, html[data-lang="zh-Hans"] .nav-mobile { font-family: 'Source Sans 3', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif; }
html[data-lang="zh-Hant"] body, html[data-lang="zh-Hant"] .nav, html[data-lang="zh-Hant"] .nav-mobile { font-family: 'Source Sans 3', 'PingFang TC', 'Hiragino Sans CNS', 'Microsoft JhengHei', 'Noto Sans TC', sans-serif; }
html[data-lang="ja"] body, html[data-lang="ja"] .nav, html[data-lang="ja"] .nav-mobile { font-family: 'Source Sans 3', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', 'Noto Sans JP', sans-serif; }
html[data-lang="zh-Hans"] h1, html[data-lang="zh-Hans"] h2, html[data-lang="zh-Hans"] h3.bio2__h3, html[data-lang="zh-Hans"] .bg-bento__text h2, html[data-lang="zh-Hans"] .nav-logo { font-family: 'Instrument Serif', 'Songti SC', 'STSong', 'Noto Serif SC', Georgia, serif; }
html[data-lang="zh-Hant"] h1, html[data-lang="zh-Hant"] h2, html[data-lang="zh-Hant"] .bg-bento__text h2, html[data-lang="zh-Hant"] .nav-logo { font-family: 'Instrument Serif', 'Songti TC', 'PMingLiU', 'Noto Serif TC', Georgia, serif; }
html[data-lang="ja"] h1, html[data-lang="ja"] h2, html[data-lang="ja"] .bg-bento__text h2, html[data-lang="ja"] .nav-logo { font-family: 'Instrument Serif', 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', Georgia, serif; }
html:not([data-lang="en"]) h1 { letter-spacing: 0; }
/* ---- mobile menu: smaller type so the whole list fits a phone ---- */
.nav-mobile a { font-size: 1.15rem; margin: .3rem 0; line-height: 1.35; }
.nav-mobile { padding-top: 72px; }
.nav-mobile__lang { margin-top: 16px; padding-top: 14px; }
.nav-mobile__lang-title { font-size: .66rem; margin-bottom: 8px; }
.nav-mobile__lang-row button { padding: 6px 12px; font-size: .85rem; }

.nav-mobile a { margin: .18rem 0; }
.nav-mobile { padding-top: 64px; padding-bottom: 28px; }

/* ---- language switcher on phones: globe sits left of the hamburger, both right-aligned; tap to open ---- */
.nav-lang.is-open .nav-menu--right { opacity: 1; transform: translate(0, 0); pointer-events: auto; }
@media (max-width: 768px) {
  nav.container .nav-right { gap: 10px; }
  .nav-lang__btn { padding: 8px 6px; }
  .nav-lang__btn > svg:last-child { display: none; }      /* no chevron on phones */
  .nav-lang__globe { width: 20px !important; height: 20px !important; }
  .nav-lang__code { font-size: .74rem; }
  .nav-menu--right { min-width: 180px; }
  .nav-toggle { padding: 5px 0 5px 5px; }
}