/* TAHAI Browser R2 — fluid desktop layout, October 2026.
   Loaded after the complete R1 styles on every page. The original royal
   palette, logos, source screenshots, content and interactions are retained. */
/* Screen-only corrections leave the site's existing print cascade intact. */
@media screen {
:root {
  --page-gutter: clamp(16px, 2vw, 72px);
  --shell: calc(100% - var(--page-gutter) - var(--page-gutter));
  --wide-gap: clamp(20px, 1.2vw, 48px);
}

/* A page follows the viewport; only individual passages use reading measures. */
main { width: 100%; max-width: none; }
.section-shell,
.nav-shell,
.final-cta.section-shell {
  width: var(--shell);
  max-width: none;
  margin-inline: auto;
}
.hero-copy,
.hero-visual,
.hero-stage { max-width: none; }
.hero-stage .logo-aura { inset-inline: 0; width: 100%; }
.stage-light { inset-inline: 0; }
.hero-copy,
.hero-stage,
.mode-panel > *,
.pretty-copy > *,
.policy-content > *,
.policy-panel > *,
.policy-grid > *,
.operational-model-grid > * { min-width: 0; }
.policy-panel h2,
.policy-panel h3,
.policy-panel p,
.policy-panel .notice { overflow-wrap: anywhere; }
.lightbox { width: var(--shell); max-width: none; }
.lightbox img { object-fit: contain; }

@media (max-width: 1080px) {
  :root { --page-gutter: clamp(16px, 2.5vw, 24px); }
  .primary-nav { left: var(--page-gutter); right: var(--page-gutter); }
}
@media (max-width: 640px) {
  :root { --page-gutter: 16px; }
}

/* Increase content scale together with the usable width, rather than leaving
   a 1480px composition floating in the middle of a large display. */
@media (min-width: 1600px) {
  html {
    font-size: clamp(16px, calc(10px + .416667vw), 26px);
    scroll-padding-top: calc(8rem + 32px);
  }
  body { font-size: 1rem; }
  .section-shell,
  .resource-anchor,
  .screenshot-showcase { scroll-margin-top: calc(8rem + 32px); }
  .nav-shell { min-height: 5.6rem; gap: 1.5rem; }
  .brand { gap: .8rem; }
  .brand img { width: 3.4rem; height: 3.4rem; }
  .brand-copy strong { font-size: 1.05rem; }
  .primary-nav { gap: .35rem; }
  .primary-nav > a:not(.nav-cta),
  .command-key { padding-inline: .7rem; min-height: 2.7rem; }
  .nav-cta { min-height: 2.8rem; padding-inline: 1.05rem; }
  .status-ribbon { min-height: 2.3rem; padding-inline: var(--page-gutter); }
  .button { min-height: 3.1rem; padding-inline: 1.45rem; }

  .hero {
    min-height: 0;
    grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
    align-items: center;
    gap: clamp(48px, 3vw, 116px);
    padding-block: clamp(56px, 4vh, 96px);
  }
  .hero h1 {
    max-width: 100%;
    font-size: clamp(6rem, 6.1vw, 10rem);
    margin-bottom: 1.65rem;
  }
  .hero-kicker { font-size: .78rem; margin-bottom: 1.6rem; }
  .hero-lede { max-width: 56ch; font-size: 1.15rem; margin-bottom: 1.7rem; }
  .hero-actions { gap: .8rem; }
  .hero-proof { font-size: .78rem; gap: .65rem 1rem; margin-top: 1.4rem; }
  .hero-stage { padding-block: 0; }
  .stage-brand { min-height: 0; gap: 1.1rem; padding: 0 .5rem 1.1rem; }
  .hero-stage .hero-logo { width: clamp(140px, 8vw, 280px); height: auto; }
  .stage-brand-copy .section-label { font-size: .7rem; }
  .stage-brand-copy strong { font-size: clamp(2rem, 2vw, 3.2rem); }
  .hero-stage .native-badge { padding: .8rem 1rem; min-width: 6.2rem; }
  .native-badge span { font-size: .66rem; }
  .native-badge strong { font-size: 1.03rem; }
  .native-badge small { font-size: .6rem; }
  .hero-product-frame .product-frame-top { min-height: 2.45rem; padding: .55rem .8rem; font-size: .7rem; }
  .hero-product-frame .window-dots i { width: .4rem; height: .4rem; }
  .hero-product-frame .product-frame-footer { min-height: 3rem; }
  .hero-product-frame .product-frame-footer span { font-size: .69rem; padding: .65rem .8rem; }
  .hero-product-frame .product-frame-footer strong { font-size: .8rem; }
  .hero-preview-expand { font-size: .74rem; right: .8rem; bottom: .8rem; padding: .45rem .65rem; }
  .stage-caption { padding-block: .8rem; }
  .stage-caption p { max-width: 58ch; font-size: .73rem; }
  .motion-toggle { min-height: 2.5rem; font-size: .74rem; padding: .6rem .8rem; }
  .stage-mode-label { font-size: .7rem; }
  .stage-mode-links nav { gap: .5rem; }
  .stage-mode-links .mode-chip { min-height: 2.5rem; padding: .5rem .8rem; font-size: .74rem; }

  .start-paths > a { min-height: 7rem; padding: 1.7rem 1.5rem; gap: 1.15rem; }
  .start-paths strong { font-size: 1.15rem; }
  .start-paths small { font-size: .85rem; }
  .start-path-index { font-size: .75rem; }
  .flagship-statement { padding-block: clamp(64px, 4vw, 140px); }
  .everyone-section,
  .mission,
  .modes,
  .native,
  .principles,
  .creator-section,
  .development-section,
  .faq-section { padding-block: clamp(80px, 4.5vw, 172px); }
  .statement-grid,
  .section-heading,
  .screenshot-heading { gap: clamp(48px, 3.5vw, 134px); }
  .statement-grid h2,
  .section-heading h2,
  .screenshot-heading h2,
  .release-copy h2 { max-width: 100%; font-size: clamp(3.8rem, 4vw, 6.4rem); }
  .section-heading > p,
  .screenshot-heading > p,
  .statement-grid p { max-width: 64ch; font-size: 1.08rem; }
  .section-heading > p,
  .screenshot-heading > p { justify-self: end; }
  .everyone-grid,
  .mission-feature-grid,
  .native-grid,
  .creator-section > .creator-grid,
  .development-grid { gap: var(--wide-gap); }
  .everyone-card,
  .mission-feature { padding: clamp(32px, 1.65vw, 64px); }
  .everyone-card h3,
  .mission-feature h3 { font-size: 1.6rem; }
  .everyone-card p,
  .mission-feature p { max-width: 60ch; font-size: 1rem; }
  .everyone-index { font-size: .74rem; }
  .everyone-link { font-size: .85rem; padding-top: 1.4rem; }
  .screenshot-showcase { padding-top: clamp(84px, 4.5vw, 172px); }
  .showcase-tabs { gap: .7rem; }
  .showcase-tab { min-height: 3.25rem; font-size: 1rem; padding: .75rem 1rem; }
  .screenshot-grid.is-enhanced .screenshot-card { grid-template-columns: minmax(0, 1.55fr) minmax(0, .95fr); }
  .screenshot-grid.is-enhanced .screenshot-copy { padding: clamp(36px, 2.5vw, 96px); }
  .screenshot-grid.is-enhanced .screenshot-copy h3 { max-width: 22ch; font-size: clamp(2.7rem, 3.15vw, 4.8rem); }
  .screenshot-grid.is-enhanced .screenshot-copy p { max-width: 50ch; font-size: 1.08rem; }
  .screenshot-copy > span { font-size: .78rem; }
  .screenshot-zoom { font-size: .76rem; min-height: 2.3rem; }

  .mode-workbench { grid-template-columns: clamp(260px, 12vw, 460px) minmax(0, 1fr); }
  .mode-tabs { padding: .95rem; }
  .mode-tab { min-height: 5.5rem; padding: .95rem; }
  .mode-panel { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(36px, 2.5vw, 96px); padding: clamp(42px, 2.8vw, 108px); }
  .mode-panel h3 { max-width: 22ch; font-size: clamp(2.8rem, 3vw, 4.6rem); }
  .mode-panel-copy > p:not(.mode-eyebrow) { max-width: 60ch; font-size: 1.05rem; }
  .mode-blueprint { min-height: clamp(390px, 20vw, 820px); }
  .mode-status { font-size: .75rem; }
  .mode-preview-note { font-size: .86rem; }
  .mode-system span { font-size: .8rem; padding-block: 1rem; }

  .pretty-face { min-height: 0; }
  .pretty-copy {
    width: 100%;
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 1.3rem clamp(48px, 4vw, 154px);
    padding: clamp(48px, 3vw, 116px);
    text-align: left;
  }
  .pretty-copy > .section-label { grid-column: 1; grid-row: 1; }
  .pretty-copy h2 { grid-column: 1; grid-row: 2 / 4; max-width: 100%; font-size: clamp(3.2rem, 3.65vw, 5.6rem); margin: 0; }
  .pretty-copy .skin-manifesto { grid-column: 2; grid-row: 2; max-width: 60ch; margin: 0; align-self: end; }
  .pretty-copy .skin-manifesto p { font-size: 1.25rem; }
  .pretty-copy .manifesto-caption { grid-column: 2; grid-row: 3; max-width: 60ch; margin: 0; font-size: 1.08rem; }
  .pretty-orbit { width: 60%; }
  .native-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .native-card { min-height: 16rem; padding: clamp(34px, 1.8vw, 70px); }
  .native-card-large { min-height: 0; padding: clamp(40px, 2.5vw, 96px); }
  .native-card h3 { max-width: 27ch; font-size: 1.85rem; }
  .native-card-large h3 { max-width: 22ch; font-size: 2.7rem; }
  .native-card p { max-width: 62ch; font-size: 1rem; }
  .native-card-icon { width: 3.4rem; height: 3.4rem; }
  .native-card-large .native-card-icon { width: 4.7rem; height: 4.7rem; }
  .principle-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(40px, 3vw, 116px); }
  .principle { grid-template-columns: 2.5rem minmax(0, 1fr); gap: .9rem 1.25rem; padding-block: 2rem; }
  .principle > span { grid-row: 1 / 3; }
  .principle h3,
  .principle p { grid-column: 2; }
  .principle p { max-width: 66ch; }
  .creator-panel,
  .development-card { padding: clamp(40px, 2.5vw, 96px); }
  .creator-panel h3,
  .development-card h3 { font-size: clamp(2.3rem, 2.5vw, 3.8rem); }
  .creator-panel p,
  .development-card p { font-size: 1.04rem; }
  .creator-philosophy { gap: 2rem; }
  .creator-philosophy img { width: clamp(170px, 10vw, 384px); }
  .skin-journey { padding: 1.8rem 2rem; }
  .skin-journey ol { justify-content: space-between; gap: 1rem 2rem; }
  .release-panel { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); padding: clamp(50px, 3.3vw, 128px); gap: clamp(50px, 4vw, 154px); }
  .release-copy > p:not(.section-label) { max-width: 68ch; font-size: 1.08rem; }
  .release-states { gap: .9rem; }
  .release-states article { padding: 1.4rem 1.6rem; }
  .faq-section h2 { max-width: 100%; font-size: clamp(3rem, 3.3vw, 5rem); }
  .faq-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(40px, 3vw, 116px); align-items: start; }
  .faq-list summary { padding-block: 1.4rem; }
  .faq-list details p { max-width: 72ch; }
  .final-cta { padding: 2rem; gap: 2rem; }
  .final-cta img { width: clamp(125px, 6.5vw, 250px); }
  .final-cta h2 { max-width: 100%; font-size: clamp(2.8rem, 3vw, 4.8rem); }
  .site-footer { padding-block: 2.3rem 3rem; }
  .footer-brand img { width: 3.4rem; height: 3.4rem; }

  /* Resource and policy pages use the same full-width shell and real grids. */
  .policy-hero { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: clamp(48px, 4vw, 154px); padding-block: clamp(64px, 4vw, 154px); }
  .policy-hero h1 { max-width: 100%; font-size: clamp(4.8rem, 5.4vw, 8.5rem); }
  .policy-hero p { max-width: 68ch; font-size: 1.15rem; }
  .policy-hero-logo { width: clamp(290px, 17vw, 650px); max-width: 90%; justify-self: center; }
  .policy-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wide-gap); align-items: start; }
  .policy-content > .policy-panel,
  .resource-content > .resource-featured { margin: 0; }
  .policy-panel { padding: clamp(36px, 2.1vw, 82px); }
  .policy-panel h2 { font-size: clamp(2.4rem, 2.5vw, 3.7rem); }
  .policy-panel > p { max-width: 70ch; font-size: 1rem; }
  .policy-grid { gap: var(--wide-gap); }
  .policy-card { padding: 1.45rem; }
  .policy-card p { max-width: 60ch; }
  .policy-content:not(.resource-content) > .policy-panel:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 1rem clamp(40px, 3vw, 116px); }
  .policy-content:not(.resource-content) > .policy-panel:last-child > .section-label { grid-column: 1; grid-row: 1; }
  .policy-content:not(.resource-content) > .policy-panel:last-child > h2 { grid-column: 1; grid-row: 2 / 4; }
  .policy-content:not(.resource-content) > .policy-panel:last-child > p:not(.section-label) { grid-column: 2; grid-row: 1 / 3; }
  .policy-content:not(.resource-content) > .policy-panel:last-child > .notice { grid-column: 2; grid-row: 3; }
  .resource-jumps { grid-column: 1 / -1; margin-bottom: .6rem; gap: .75rem; }
  .resource-jump { flex: 1; padding: .9rem 1.1rem; font-size: 1rem; }
  .resource-page-downloads #official-download { grid-column: 1; grid-row: 2; }
  .resource-page-downloads #native-source { grid-column: 2; grid-row: 2 / 4; }
  .resource-page-downloads #release-information { grid-column: 1; grid-row: 3; }
  .resource-page-skins #creator-kit { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(40px, 3vw, 116px); }
  .resource-page-skins #creator-kit > :not(.resource-steps) { grid-column: 1; align-self: start; }
  .resource-page-skins #creator-kit > .feature-status { justify-self: start; }
  .resource-page-skins #creator-kit > .resource-steps { grid-column: 2; grid-row: 1 / 6; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; align-self: stretch; }
  .skin-thesis { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem clamp(40px, 3vw, 116px); }
  .skin-thesis > .section-label { grid-column: 1; }
  .skin-thesis > .skin-manifesto { grid-column: 1; margin: 0; max-width: 66ch; }
  .skin-thesis > p:not(.section-label) { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .resource-page-skins #operational-model { grid-column: 1 / -1; }
  .operational-model-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wide-gap); }
  .operational-model-grid .permission-card { grid-column: span 2; }
  .creator-path { max-width: 72ch; }
  .lightbox { padding-top: 3.4rem; }
  .lightbox-close { width: 2.6rem; height: 2.6rem; font-size: 1.6rem; top: .4rem; right: .6rem; }
  .lightbox img { max-height: calc(94dvh - 12rem); }
  .lightbox p { font-size: .92rem; padding: 1rem 1.5rem; }
  .lightbox-controls { padding: .7rem 1.2rem 1rem; }
  .lightbox-nav { font-size: .9rem; min-height: 2.8rem; }
}

@media (min-width: 2400px) {
  .everyone-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .operational-model-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .operational-model-grid .permission-card { grid-column: auto; }
  .policy-content:not(.resource-content) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .policy-content:not(.resource-content) > .policy-panel:last-child { grid-column: auto; display: block; }
}
}