/* FOCaF R4: fluid screen layouts. All existing print rules remain in force. */
@media screen {
  :root {
    --fc-wide-gutter: clamp(16px, 2vw, 72px);
    --fc-wide-gap: clamp(18px, 1.3vw, 48px);
    --fc-wide-body: clamp(16px, calc(12px + .4vw), 28px);
    --fc-wide-small: clamp(13px, calc(10px + .3vw), 22px);
    --fc-wide-control: clamp(14px, calc(11px + .3vw), 23px);
    --fc-wide-card-pad: clamp(22px, 1.6vw, 60px);
    --fc-step-size: clamp(26px, 1vw, 38px);
  }

  body, body[data-fc-edition] {
    --max: none;
    font-size: var(--fc-wide-body);
  }

  /* The page shell fills the screen; only its gutters are bounded. */
  .wrap, [data-fc-edition] .wrap,
  .nav, [data-fc-edition] .nav,
  .safety-strip .wrap, [data-fc-edition] .safety-strip .wrap,
  .ft-page .ft-shell {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin-inline: auto;
    padding-inline: var(--fc-wide-gutter);
  }

  .wrap .wrap, [data-fc-edition] .wrap .wrap { padding-inline: 0; }

  .nav, [data-fc-edition] .nav {
    min-height: clamp(78px, calc(44px + 2.5vw), 140px);
    gap: clamp(16px, 1.6vw, 48px);
  }
  .brand, [data-fc-edition] .brand {
    font-size: clamp(14px, calc(11px + .3vw), 24px);
    gap: clamp(10px, .8vw, 26px);
  }
  .brand span, [data-fc-edition] .brand span { max-width: 12em; }
  .brand-logo, [data-fc-edition] .brand-logo {
    width: clamp(80px, 5vw, 160px);
    height: auto;
    aspect-ratio: 80 / 54;
  }
  .menu, [data-fc-edition] .menu { gap: clamp(4px, .45vw, 17px); }
  .menu a, [data-fc-edition] .menu a {
    font-size: var(--fc-wide-control);
    letter-spacing: 0;
    padding: 12px clamp(8px, .6vw, 23px);
    min-height: 44px;
  }
  .burger, [data-fc-edition] .burger { font-size: 14px; min-height: 44px; }
  .safety-strip .wrap, [data-fc-edition] .safety-strip .wrap {
    gap: clamp(16px, 1.3vw, 44px);
    padding-block: clamp(14px, .9vw, 30px);
  }
  .safety-strip strong, [data-fc-edition] .safety-strip strong {
    font-size: var(--fc-wide-small);
    flex: 0 1 13em;
    white-space: normal;
  }
  .safety-strip span, [data-fc-edition] .safety-strip span {
    font-size: var(--fc-wide-small);
    min-width: 0;
  }
  .safety-strip .btn, [data-fc-edition] .safety-strip .btn {
    font-size: var(--fc-wide-small);
    min-height: 44px;
  }

  .hero-inner, [data-fc-edition] .hero-inner {
    min-height: 0;
    padding: clamp(38px, 3vw, 100px) var(--fc-wide-gutter);
  }
  .hero .h1, [data-fc-edition] .hero .h1 {
    font-size: clamp(38px, calc(22px + 2.5vw), 120px);
    max-width: 28ch;
    overflow-wrap: break-word;
    text-wrap: balance;
  }
  .hero .lede, [data-fc-edition] .hero .lede {
    font-size: clamp(17px, calc(13px + .45vw), 31px);
    max-width: 82ch;
    line-height: 1.75;
  }
  .hero .kicker, [data-fc-edition] .hero .kicker {
    max-width: none;
    font-size: var(--fc-wide-small);
  }
  .band, [data-fc-edition] .band,
  .band > .wrap, [data-fc-edition] .band > .wrap { transform: none; }
  .band > .wrap, [data-fc-edition] .band > .wrap {
    padding: clamp(18px, 1.15vw, 40px) var(--fc-wide-gutter);
    gap: clamp(10px, .7vw, 25px);
  }

  /* The media and copy are sibling grid items, never floating overlays. */
  [data-fc-edition][data-fc-home] .hero {
    display: grid;
    grid-template-columns: var(--fc-wide-gutter) minmax(0, .95fr) var(--fc-wide-gap) minmax(0, 1.05fr) var(--fc-wide-gutter);
    align-items: center;
    padding-top: clamp(36px, 2.4vw, 84px);
    row-gap: clamp(30px, 2.4vw, 84px);
  }
  [data-fc-edition][data-fc-home] .hero-inner {
    grid-column: 2;
    grid-row: 1;
    order: initial;
    width: 100%;
    min-height: 0;
    padding: 0;
    margin: 0;
  }
  [data-fc-edition][data-fc-home] .hero-inner > .h1 {
    max-width: none;
    font-size: clamp(46px, calc(20px + 3.2vw), 148px);
    margin-bottom: clamp(24px, 1.5vw, 52px);
  }
  [data-fc-edition][data-fc-home] .hero-inner > .lede {
    max-width: 60ch;
    font-size: clamp(17px, calc(13px + .5vw), 33px);
  }
  [data-fc-edition][data-fc-home] .hero-inner > .kicker {
    max-width: none;
    font-size: clamp(11px, calc(8px + .3vw), 20px);
    margin-bottom: clamp(20px, 1.25vw, 44px);
  }
  [data-fc-edition][data-fc-home] .fc-media {
    position: relative;
    inset: auto;
    grid-column: 4;
    grid-row: 1;
    order: initial;
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 1280 / 900;
    margin: 0;
    min-width: 0;
  }
  [data-fc-edition][data-fc-home] .fc-media img,
  [data-fc-edition][data-fc-home] .fc-media video { object-fit: contain; }
  [data-fc-edition][data-fc-home] .band {
    grid-column: 1 / -1;
    grid-row: 2;
    order: initial;
    width: 100%;
    margin: 0;
  }
  .fc-film-caption {
    left: clamp(14px, 1vw, 36px);
    bottom: clamp(14px, 1vw, 36px);
    max-width: 43%;
  }
  .fc-film-caption strong { font-size: clamp(10px, .55vw, 19px); }
  .fc-film-caption span { font-size: clamp(11px, .65vw, 21px); }
  .fc-motion-controls {
    right: clamp(12px, .9vw, 32px);
    bottom: clamp(12px, .9vw, 32px);
    max-width: 54%;
    gap: clamp(6px, .4vw, 14px);
  }
  .fc-motion-button {
    font-size: var(--fc-wide-small);
    padding: clamp(10px, .65vw, 22px);
    min-height: 44px;
  }

  .section, [data-fc-edition] .section { padding-block: clamp(38px, 3.2vw, 108px); }
  .section.tight, [data-fc-edition] .section.tight { padding-block: 16px clamp(30px, 2vw, 72px); }
  .grid, .choice-grid, .disclaimer-grid, .download-grid, .footer-grid,
  [data-fc-edition] .choice-grid, [data-fc-edition] .disclaimer-grid { gap: var(--fc-wide-gap); }
  .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .choice-grid > .card, .disclaimer-grid > .card, .download-grid > .card,
  .mini-steps > .card, .checklist-grid > .card { grid-column: auto; }
  .card, [data-fc-edition] .card,
  [data-fc-edition] .disclaimer, [data-fc-edition] .download-card {
    min-width: 0;
    padding: var(--fc-wide-card-pad);
  }
  .card.step, [data-fc-edition] .card.step {
    padding-inline-start: calc(var(--fc-wide-card-pad) + var(--fc-step-size) + 14px);
  }
  .card.step::before {
    left: var(--fc-wide-card-pad);
    top: var(--fc-wide-card-pad);
    width: var(--fc-step-size);
    height: var(--fc-step-size);
    font-size: var(--fc-wide-small);
  }
  .h2, [data-fc-edition] .h2 {
    font-size: clamp(26px, calc(20px + .8vw), 52px);
    line-height: 1.25;
  }
  .h3, [data-fc-edition] .h3 {
    font-size: clamp(20px, calc(15px + .55vw), 36px);
    line-height: 1.35;
  }
  .p, .ul, .question-list,
  [data-fc-edition] .p, [data-fc-edition] .ul, [data-fc-edition] .question-list,
  [data-fc-edition] .disclaimer .p {
    font-size: var(--fc-wide-body);
    line-height: 1.75;
    overflow-wrap: break-word;
  }
  .section > .wrap > .p, .card.full > .p { max-width: 90ch; }
  .choice .h2, .choice .p,
  [data-fc-edition] .choice .h2, [data-fc-edition] .choice .p { max-width: none; }
  .kicker, .eyebrow, [data-fc-edition] .kicker, [data-fc-edition] .eyebrow {
    font-size: var(--fc-wide-small);
  }
  .btn, [data-fc-edition] .btn, [data-fc-edition] .band .btn {
    font-size: var(--fc-wide-control);
    min-height: 44px;
    padding: clamp(12px, .8vw, 25px) clamp(16px, 1vw, 34px);
    overflow-wrap: anywhere;
  }
  .chip, [data-fc-edition] .chip,
  .download-meta, .caption, .sitemap-note,
  .footer .legal, [data-fc-edition] .footer .legal,
  .footer .links span, [data-fc-edition] .footer .links span {
    font-size: var(--fc-wide-small);
  }
  .tag, [data-fc-edition] .tag { font-size: clamp(11px, calc(8px + .25vw), 18px); }
  .footer .links a, [data-fc-edition] .footer .links a,
  .footer .h3, [data-fc-edition] .footer .h3 { font-size: var(--fc-wide-control); }
  .resource-search input, input[type="search"],
  [data-fc-edition] .resource-search input, [data-fc-edition] input[type="search"] {
    font-size: var(--fc-wide-body);
    min-height: 48px;
  }
  .game-shell > .p, .choice-text { font-size: var(--fc-wide-body); }
  .choice-btn, .choice-button, .sequence-slot { font-size: var(--fc-wide-control); }
  .fc-builder {
    box-sizing: border-box;
    width: calc(100% - var(--fc-wide-gutter) - var(--fc-wide-gutter));
    max-width: none;
    margin-inline: var(--fc-wide-gutter);
    padding: var(--fc-wide-card-pad);
    gap: var(--fc-wide-gap);
  }
  .fc-builder h2 { font-size: clamp(20px, calc(15px + .55vw), 36px); }
  .fc-builder p { max-width: 80ch; font-size: var(--fc-wide-body); }
  .fc-builder-links { font-size: var(--fc-wide-control); }

  /* Browser tools use the same full-width shell and readable controls. */
  .ft-page .ft-intro { padding-block: clamp(38px, 3vw, 100px) 28px; }
  .ft-page .ft-intro h1 {
    max-width: none;
    font-size: clamp(38px, calc(22px + 2.5vw), 120px);
  }
  .ft-page .ft-lead {
    max-width: 82ch;
    font-size: clamp(17px, calc(13px + .45vw), 31px);
  }
  .ft-page .ft-workspace-head { max-width: none; }
  .ft-page .ft-workspace-head h1 { font-size: clamp(34px, calc(22px + 1.8vw), 92px); }
  .ft-page .ft-workspace-head p:last-child { max-width: 85ch; font-size: var(--fc-wide-body); }
  .ft-page .ft-session p { max-width: 60ch; font-size: var(--fc-wide-small); }
  .ft-page .ft-search-wrap { max-width: none; flex: 1 1 35%; }
  .ft-page .ft-category-filters { flex: 1 1 50%; justify-content: flex-end; }
  .ft-page .ft-tool-grid, .ft-page .ft-template-grid,
  .ft-page .ft-workbench { gap: var(--fc-wide-gap); }
  .ft-page .ft-tool-card, .ft-page .ft-template-button,
  .ft-page .ft-form-panel, .ft-page .ft-result-document { padding: var(--fc-wide-card-pad); }
  .ft-page .ft-tool-card h3 { font-size: clamp(22px, calc(17px + .55vw), 38px); }
  .ft-page .ft-section-heading h2,
  .ft-page .ft-result-document > h2 { font-size: clamp(26px, calc(20px + .7vw), 48px); }
  .ft-page .ft-panel-title,
  .ft-page .ft-result-section h3, .ft-page .ft-output h3 { font-size: clamp(20px, calc(15px + .45vw), 33px); }
  .ft-page .ft-template-title { font-size: var(--fc-wide-body); }
  .ft-page .ft-template-desc,
  .ft-page .ft-tool-card > p:not(.ft-eyebrow),
  .ft-page .ft-result-summary,
  .ft-page .ft-result-section p, .ft-page .ft-result-section li,
  .ft-page .ft-result-empty,
  .ft-page .ft-about p, .ft-page .ft-about li { font-size: var(--fc-wide-body); }
  .ft-page .ft-button,
  .ft-page .ft-session-actions .ft-button,
  .ft-page .ft-category-filters .ft-button,
  .ft-page .ft-output-actions .ft-button,
  .ft-page .ft-repeat-row > .ft-button,
  .ft-page .ft-form-actions .ft-button:not(.ft-button-primary),
  .ft-page .ft-quick-actions .ft-button,
  .ft-page .ft-card-link {
    font-size: var(--fc-wide-control);
    min-height: 44px;
    overflow-wrap: anywhere;
  }
  .ft-page .ft-panel-help, .ft-page .ft-help,
  .ft-page .ft-template-more, .ft-page .ft-overview,
  .ft-page .ft-result-notices p, .ft-page .ft-related,
  .ft-page .ft-send-check, .ft-page .ft-send-check ul,
  .ft-page .ft-character-count, .ft-page .ft-count,
  .ft-page .ft-metric-label, .ft-page .ft-metric small,
  .ft-page .ft-repeat-row > legend,
  .ft-page .ft-tool-card .ft-eyebrow, .ft-page .ft-eyebrow {
    font-size: var(--fc-wide-small);
  }
  .ft-page .ft-field label, .ft-page .ft-output-label,
  .ft-page .ft-search-wrap label, .ft-page .ft-repeat > legend { font-size: var(--fc-wide-control); }
  .ft-page .ft-field input:not([type=checkbox]),
  .ft-page .ft-field select, .ft-page .ft-field textarea,
  .ft-page .ft-output input, .ft-page .ft-output textarea,
  .ft-page #ft-search {
    font-size: var(--fc-wide-body);
    min-height: 48px;
    padding: clamp(11px, .7vw, 24px);
  }
  .ft-page .ft-field-grid { gap: clamp(18px, 1vw, 38px); }
  .ft-page .ft-metrics { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9em), 1fr)); }
  .ft-page .ft-metric strong { font-size: clamp(28px, calc(20px + 1vw), 55px); }
  .ft-page .ft-table { font-size: var(--fc-wide-small); }
  .ft-page .ft-table th { font-size: var(--fc-wide-small); }
  .ft-page .ft-about details { max-width: none; }
  .ft-page .ft-about p, .ft-page .ft-about li { max-width: 90ch; }
  .ft-promo .status-links a { font-size: var(--fc-wide-control); }
}

@media screen and (min-width: 1500px) {
  .choice-grid, [data-fc-edition] .choice-grid,
  .download-grid,
  .ft-page .ft-tool-grid, .ft-page .ft-template-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media screen and (max-width: 1100px) {
  [data-fc-edition][data-fc-home] .hero {
    grid-template-columns: var(--fc-wide-gutter) minmax(0, 1fr) var(--fc-wide-gutter);
    row-gap: 28px;
  }
  [data-fc-edition][data-fc-home] .hero-inner { grid-column: 2; grid-row: 1; }
  [data-fc-edition][data-fc-home] .hero-inner > .h1 { font-size: clamp(42px, 6vw, 68px); }
  [data-fc-edition][data-fc-home] .hero-inner > .lede { max-width: 75ch; }
  [data-fc-edition][data-fc-home] .band { grid-row: 2; }
  [data-fc-edition][data-fc-home] .fc-media {
    grid-column: 2;
    grid-row: 3;
    margin-bottom: 28px;
  }
  .nav, [data-fc-edition] .nav { flex-wrap: wrap; }
  .menu, [data-fc-edition] .menu { margin-left: auto; }
  .safety-strip .wrap, [data-fc-edition] .safety-strip .wrap {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .safety-strip strong, [data-fc-edition] .safety-strip strong { flex-basis: 100%; }
  .safety-strip span, [data-fc-edition] .safety-strip span { flex: 1 1 360px; }
}

@media screen and (max-width: 860px) {
  .nav, [data-fc-edition] .nav { flex-wrap: nowrap; }
  .menu.open, [data-fc-edition] .menu.open {
    right: var(--fc-wide-gutter);
    top: calc(100% + 4px);
    width: min(360px, calc(100vw - var(--fc-wide-gutter) - var(--fc-wide-gutter)));
  }
  body[data-fc-nojs] .nav { flex-wrap: wrap; }
  body[data-fc-nojs] .menu { width: 100%; margin-inline: 0; }
  body[data-fc-nojs] .menu a { font-size: 14px; }
  .ft-page .ft-directory-toolbar { align-items: stretch; }
  .ft-page .ft-search-wrap { flex-basis: 100%; }
  .ft-page .ft-category-filters { justify-content: flex-start; }
}

@media screen and (max-width: 620px) {
  :root { --fc-wide-card-pad: 22px; }
  .brand, [data-fc-edition] .brand { font-size: 13px; }
  .brand span, [data-fc-edition] .brand span { max-width: 145px; }
  [data-fc-edition] .brand-logo { width: 67px; }
  [data-fc-edition][data-fc-home] .fc-media { aspect-ratio: 1 / 1; }
  .fc-film-caption strong { font-size: 10px; }
  .fc-film-caption span { font-size: 11px; }
  .fc-motion-button { font-size: 12px; padding: 10px 8px; }
  .fc-film-caption { max-width: 39%; }
  .fc-motion-controls { max-width: 57%; }
  .safety-strip .wrap, [data-fc-edition] .safety-strip .wrap { gap: 12px; }
  .band > .wrap, [data-fc-edition] .band > .wrap { align-items: stretch; }
  .fc-builder { padding: 22px; }
  .ft-page .ft-form-panel, .ft-page .ft-result-document { padding: 20px; }
  .ft-page .ft-template-button { padding: 16px; }
}

@media screen and (max-width: 370px) {
  :root { --fc-wide-card-pad: 18px; }
  .nav, [data-fc-edition] .nav { gap: 8px; }
  .brand, [data-fc-edition] .brand { min-width: 0; gap: 8px; font-size: 12px; }
  .brand span, [data-fc-edition] .brand span { max-width: 112px; font-size: 12px; }
  .brand-logo, [data-fc-edition] .brand-logo { width: 56px; }
  .burger, [data-fc-edition] .burger { flex-shrink: 0; }
  .ft-page .ft-form-panel, .ft-page .ft-result-document { padding: 16px; }
  [data-fc-edition][data-fc-home] .hero-inner > .h1 { font-size: 40px; }
  .fc-film-caption { left: 10px; bottom: 65px; max-width: none; }
  .fc-motion-controls { left: 10px; right: 10px; max-width: none; justify-content: flex-end; }
}