/* Homepage banner artwork contains copy at its edges. Preserve its full 1920 × 935 frame. */
.hero-slides {
  height: auto;
  min-height: 0;
  aspect-ratio: 1920 / 935;
}

.hero-slide img {
  object-fit: contain;
  object-position: center;
}

/* Mobile-only layout corrections. Keep desktop styles untouched. */
@media (max-width: 800px) {
  :root {
    --mobile-gutter: clamp(.75rem, 4vw, 1.25rem);
    --mobile-gap: clamp(1rem, 4vw, 1.75rem);
  }

  html { overflow-x: hidden; }
  html { overflow-x: clip; scroll-padding-top: 8rem; }
  body { min-width: 0; overflow-x: hidden; overflow-x: clip; }

  main, section, article, aside, header, footer, form,
  .contact-grid, .contact-column, .detail-info-panel, .benefits-copy {
    min-width: 0;
  }

  img, video, svg { max-width: 100%; }
  input, select, textarea { max-width: 100%; font-size: max(16px, 1rem) !important; }

  .site-header { position: sticky; top: 0; z-index: 40; }
  .header-brand { height: 76px; padding: 0 1rem; }
  .brand img { width: min(58vw, 190px); }
  .header-nav { height: 52px; padding: 0 .75rem; }
  .social-links { display: flex; gap: .5rem; }
  .social-links a { width: 17px; height: 17px; }
  /* Keep the accessible button and existing JS toggle; only the visual control changes on mobile. */
  .menu-toggle {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    inline-size: 44px;
    block-size: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    color: #fff;
    font-size: 0;
    line-height: 0;
  }
  .menu-toggle-bar {
    display: block;
    inline-size: 24px;
    block-size: 2px;
    flex: 0 0 2px;
    background: currentColor;
    transition: transform .2s ease, opacity .2s ease;
  }
  .menu-toggle-label {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .site-nav { top: 52px; display: none; }
  .site-nav.is-open { display: flex; }
  .site-nav a { min-height: 44px; font-size: .85rem; }

  .floating-contact { right: max(.35rem, env(safe-area-inset-right)); gap: 8px; }
  /* Align only the independent back-to-top control with the contact toolbar edge. */
  .floating-back-to-top { right: max(.35rem, env(safe-area-inset-right)); }
  .floating-contact a, .floating-contact button { width: 44px; height: 44px; }

  .site-footer { padding: 2.75rem var(--mobile-gutter) calc(2.75rem + env(safe-area-inset-bottom)); }
  .footer-content { gap: 2rem; }
  .footer-social { min-height: 10rem; }
  .footer-video-card { max-width: none; }

  /* Home */
  .hero-slides { height: auto; min-height: 0; aspect-ratio: 1920 / 935; }
  .hero-rail { left: .5rem; font-size: 3rem; }
  .hero-controls { right: .75rem; bottom: .75rem; }
  .event-section { min-height: 0; }
  .event-art { height: clamp(220px, 62vw, 420px); min-height: 0; }
  .event-art img { width: 100%; max-width: 100%; height: 100%; object-fit: cover; object-position: center; }
  .event-info { min-height: 0; padding: clamp(2rem, 8vw, 4rem) var(--mobile-gutter) 3rem; align-items: stretch; text-align: center; }
  .event-info h2 { margin-bottom: 2rem; font-size: clamp(2rem, 10vw, 3rem); }
  .event-meta { width: 100%; text-align: left; }
  .event-meta p { flex-wrap: wrap; gap: .25rem .55rem; font-size: clamp(.95rem, 4.8vw, 1.3rem); overflow-wrap: anywhere; }
  .countdown-label { margin-top: 2.3rem; }
  .event-countdown { gap: .65rem; }
  .event-countdown div { width: clamp(4rem, 22vw, 5.5rem); height: clamp(6.5rem, 35vw, 9rem); font-size: clamp(3.25rem, 16vw, 5.4rem); }
  .event-reserve { width: min(78vw, 18rem); margin-top: 2rem; }
  .catalogue-banner img { min-height: 230px; }
  .catalogue-banner a { left: 1rem; right: auto; bottom: 1rem; padding: .75rem 1rem; }
  .exhibition-list { padding: 1.25rem .75rem; }
  .section-title { margin-bottom: 1.5rem; }
  .section-title h2 { font-size: clamp(2.25rem, 11vw, 3.4rem); }
  .exhibition-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; gap: .65rem; }
  .exhibition-tab, .exhibition-tab.is-active { width: 100%; height: 210px; min-width: 0; flex: none; grid-column: auto; }
  .exhibition-tab.is-active { grid-column: span 2; }
  .exhibition-tab span { padding: .65rem; }
  .video-section { min-height: 0; }
  .video-art { min-height: 0; }
  .video-copy { padding: 2.5rem 1.25rem 3rem; }
  .video-copy h2 { font-size: clamp(2rem, 9vw, 3rem); }
  .contact-section { padding: 3rem var(--mobile-gutter); gap: 2rem; }
  .contact-grid { grid-template-columns: 1fr; }

  /* About */
  .about-hero h1 { top: 7%; left: 6%; max-width: 80%; font-size: clamp(2rem, 10vw, 3rem); }
  .about-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem .75rem; min-height: 0; padding: 1.5rem 1rem; text-align: center; }
  .about-stats b { font-size: 1.55rem; }
  .about-stats small { font-size: .75rem; }
  .about-intro { padding: 2.75rem var(--mobile-gutter); font-size: 1rem; }
  .factory { padding: 8rem var(--mobile-gutter) 3rem; }
  .process-grid { gap: .8rem; }
  .process-card { border-radius: 12px; }
  .process-card span { font-size: 1rem; }
  .hall, .team { padding: 3rem var(--mobile-gutter); }
  .hall h2, .team h2 { margin-bottom: 1.5rem; font-size: clamp(2rem, 10vw, 3rem); }
  .hall-grid { gap: .75rem; }
  .hall-main { height: auto; min-height: 0; mask-image: none; -webkit-mask-image: none; }
  .hall-side { gap: .65rem; }
  .team { padding-bottom: 4rem; }
  .team-grid { gap: .65rem; }

  /* Catalog */
  .catalog-hero { grid-template-columns: 1fr; gap: 1.5rem; padding: 2rem var(--mobile-gutter) 2.5rem; }
  .catalog-hero-copy { padding-top: 0; }
  .catalog-hero h1 { font-size: clamp(1.8rem, 8vw, 2.7rem); }
  .catalog-hero-subtitle { margin: .8rem 0 1.5rem; font-size: 1rem; }
  .catalog-download-row { flex-wrap: wrap; gap: .8rem 1rem; margin-bottom: 2rem; }
  .catalog-download { margin-bottom: 0; padding: .7rem .85rem; font-size: 1rem; }
  .catalog-download-row .catalog-download-icon { width: 2rem; }
  .catalog-feature-note { grid-template-columns: 90px minmax(0, 1fr); gap: .8rem; }
  .catalog-feature-note p { min-width: 0; font-size: .9rem; overflow-wrap: anywhere; }
  .catalog-list { padding: 1rem var(--mobile-gutter) 2.5rem; }
  .catalog-list-heading { padding-bottom: .75rem; margin-bottom: 1.5rem; }
  .catalog-list-heading h2 { font-size: clamp(1.8rem, 8vw, 2.6rem); }
  .catalog-grid { gap: 1.5rem .65rem; }
  .catalog-card img { border-radius: 8px; }
  .catalog-card h3 { margin-top: .6rem; font-size: .95rem; overflow-wrap: anywhere; }
  .catalog-card p { font-size: .8rem; overflow-wrap: anywhere; }
  .catalog-arrows button { width: 44px; height: 44px; }

  /* Contact */
  .contact-hero { min-height: 0; padding: 2.25rem var(--mobile-gutter) 3rem; background-position: 58% top; }
  .contact-hero__intro h1 { font-size: clamp(1.7rem, 8vw, 2.5rem); }
  .contact-hero__intro p { font-size: 1rem; }
  .contact-panel { margin-top: 8rem; padding: 1.5rem .85rem 2rem; }
  .contact-panel__lead { margin-bottom: 2rem; font-size: 1.25rem; }
  .contact-panel .contact-grid { gap: 1.75rem; }
  .contact-panel .contact-form input, .contact-panel .contact-form select { height: 2.9rem; }
  .contact-panel .contact-form textarea { height: 9rem; }
  /* The WeChat hint wraps on narrow screens; keep the complete message visible without scrolling. */
  .contact-form textarea.wechat-field,
  .contact-panel .contact-form textarea.wechat-field { height: 6.5rem; min-height: 6.5rem; }
  .contact-panel .contact-submit { width: 100%; margin-top: 1.25rem; }
  .contact-panel .contact-requirement .wechat-field-group { margin-top: 1.5rem; }

  /* On phones, keep the submit button below both form columns without changing desktop layout. */
  .contact-grid > .contact-column:first-child,
  .contact-grid > .contact-requirement,
  .contact-panel .contact-grid > .contact-column:first-child,
  .contact-panel .contact-grid > .contact-column.contact-requirement { display: contents; }
  .contact-grid > .contact-column:first-child > h3 { order: 1; }
  .contact-grid > .contact-column:first-child > .contact-fields { order: 2; }
  .contact-grid > .contact-requirement > h3 { order: 3; }
  .contact-grid > .contact-requirement > textarea[name="requirement"] { order: 4; }
  .contact-grid > .contact-requirement > .wechat-field-group { order: 5; }
  .contact-grid > .contact-column:first-child > .contact-submit { order: 6; }
  .partner-map img { min-height: 220px; object-fit: cover; }

  /* Expo boards: keep the desktop composition as one scaled mobile canvas. */
  .event-scale-canvas,
  .detail-scale-stage { display: contents; }

  .event-section.event-scale-stage,
  .detail-scale-stage {
    display: block;
    width: 100%;
    min-height: 0;
    overflow: clip;
  }

  .event-section.event-scale-stage {
    height: auto;
    background: none;
  }

  .event-scale-canvas {
    display: grid;
    grid-template-columns: 1094.4px 825.6px;
    width: 1920px;
    height: 1000px;
    min-height: 0;
    background: url("../../开发打包/切图/01-首页/04-展会背景.jpg") center / 100% 100% no-repeat;
    line-height: 1.2;
    transform: scale(var(--proportional-scale, .2));
    transform-origin: top left;
  }

  .event-scale-canvas .event-art { height: 100%; min-height: 0; }
  .event-scale-canvas .event-art img { width: 175.44%; max-width: none; height: 100%; object-fit: fill; }
  .event-scale-canvas .event-info { min-height: 0; padding: 40px 82px 40px 115px; align-items: flex-start; justify-content: center; text-align: initial; }
  .event-scale-canvas .event-info h2 { margin-bottom: 102px; font-size: 84px; }
  .event-scale-canvas .event-meta { gap: 25px; }
  .event-scale-canvas .event-meta p { flex-direction: row; align-items: baseline; gap: .55em; font-size: 37.5px; }
  .event-scale-canvas .countdown-label { align-self: center; margin: 80px 0 40px; font-size: 33.5px; }
  .event-scale-canvas .event-countdown { align-self: center; gap: 36px; }
  .event-scale-canvas .event-countdown div { width: 151px; height: 253px; font-size: 139px; }
  /* Keep the reserve label in its designed text area. Percentage padding was
     based on the wider info column, leaving too little room and shrinking the
     label before it was proportionally scaled for the phone viewport. */
  .event-scale-canvas .event-reserve { width: 335px; margin: 65px auto 0; padding: 0 86px 0 37px; font-size: 42px; }

  .detail-hero { padding: 0; }
  .detail-scale-stage { height: auto; }
  .detail-board.detail-scale-canvas {
    display: block;
    width: 1370px;
    margin: 0;
    padding: 0;
    border: 32px solid #fff;
    border-radius: 20px;
    background: transparent;
    box-shadow: 0 7px 22px rgba(0, 0, 0, .14);
    transform: scale(var(--proportional-scale, .2));
    transform-origin: top left;
  }

  .detail-board.detail-scale-canvas .detail-board-top { min-height: 670px; height: 670px; border-radius: 13px; }
  .detail-board.detail-scale-canvas .detail-brand-logo { width: 290px; }
  .detail-board.detail-scale-canvas .detail-brand-title { left: 4%; bottom: 8%; font-size: 53px; }
  .detail-board.detail-scale-canvas .detail-hero-copy { top: 4%; right: 3%; width: 238px; height: 92%; padding: 22px; }
  .detail-board.detail-scale-canvas .detail-hero-copy .detail-logo { width: 180px; margin-bottom: 16px; }
  .detail-board.detail-scale-canvas .detail-hero-copy h1 { font-size: 29px; margin-bottom: 14px; }
  .detail-board.detail-scale-canvas .detail-hero-copy p { font-size: 23px; line-height: 1.12; }
  .detail-board.detail-scale-canvas .detail-panel-social { gap: 14px; }
  .detail-board.detail-scale-canvas .detail-panel-social img { width: 32px; height: 32px; }
  .detail-board.detail-scale-canvas .detail-info-row { grid-template-columns: minmax(0, 2.7fr) minmax(220px, .8fr); gap: 16px; margin-top: 16px; padding: 16px 0 0; }
  .detail-board.detail-scale-canvas .detail-info-panel { grid-template-columns: 1.05fr 1.65fr; min-height: 300px; gap: 16px; padding: 13px; }
  .detail-board.detail-scale-canvas .detail-countdown img { width: 220px; }
  .detail-board.detail-scale-canvas .countdown-copy .countdown-label,
  .detail-board.detail-scale-canvas .countdown-copy .countdown-unit { font-size: 23px; }
  .detail-board.detail-scale-canvas .countdown-copy strong { font-size: 80px; }
  .detail-board.detail-scale-canvas .detail-facts p { column-gap: 11px; margin: 14px 0; font-size: 34px; line-height: 1.12; }
  .detail-board.detail-scale-canvas .detail-facts p::before { flex-basis: 28px; width: 28px; height: 28px; }
  .detail-board.detail-scale-canvas .detail-reserve { min-height: 300px; padding: 18px 20px 16px; border-radius: 18px; }
  .detail-board.detail-scale-canvas .detail-reserve h2 { margin-top: 10px; font-size: 48px; }
  .detail-board.detail-scale-canvas .detail-reserve small { max-width: 250px; margin-top: 24px; font-size: 28px; line-height: 1.12; }
.detail-board.detail-scale-canvas .detail-reserve button { width: min(100%, 300px); max-width: 100%; height: 82px; padding: 0 51px; font-size: 32px; }

  /* Detail */
  .detail-hero { padding: .5rem 0 1rem; }
  .detail-board { width: 100%; border-width: .5rem; border-radius: 12px; }
  .detail-board-top { min-height: clamp(340px, 100vw, 520px); border-radius: 8px; }
  .detail-board-top .detail-brand-logo { width: 32%; }
  .detail-board-top .detail-brand-title { max-width: 48%; font-size: clamp(.95rem, 4vw, 1.2rem); overflow-wrap: anywhere; }
  .detail-hero-copy { right: 2%; top: 3%; width: 45%; height: 94%; padding: .45rem; }
  .detail-hero-copy .detail-logo { width: min(90px, 24vw); margin-bottom: .35rem; }
  .detail-hero-copy h1 { font-size: clamp(.82rem, 3.8vw, .95rem); margin-bottom: .5rem; }
  .detail-hero-copy p { font-size: clamp(.64rem, 2.8vw, .72rem); line-height: 1.12; overflow-wrap: anywhere; }
  .detail-panel-social { gap: 7px; }
  .detail-panel-social img { width: 20px; height: 20px; }
  .detail-info-row { grid-template-columns: 1fr; gap: .75rem; padding-top: .65rem; }
  .detail-info-panel { grid-template-columns: 1fr; min-height: 0; gap: .75rem; padding: 1rem .75rem; }
  .detail-countdown img { width: min(46vw, 150px); }
  .detail-facts p { font-size: .85rem; overflow-wrap: anywhere; }
  .detail-reserve { min-height: 185px; }
  .detail-reserve h2 { font-size: 1.65rem; }
  .detail-reserve small { margin-top: 1rem; font-size: .95rem; }
  .detail-reserve button { width: min(100%, 240px); height: 62px; font-size: 1.5rem; }
  .showcase { padding: 2rem .75rem; }
  .detail-section-heading h2 { font-size: clamp(1.8rem, 9vw, 2.8rem); }
  .detail-arrows button { width: 44px; height: 44px; }
  .showcase-grid { grid-template-columns: 1fr; gap: .8rem; }
  .showcase-grid > article:not(.showcase-card-featured) { padding: 9px 9px 0; }
  .showcase-card-featured { padding: 9px; }
  .benefits { grid-template-columns: 1fr; width: 100%; }
  .benefits-copy { padding: 2.5rem var(--mobile-gutter) 2rem; }
  .benefits-copy h2, .benefits-copy > p { white-space: normal; text-align: center; }
  .benefits-copy h2 { font-size: clamp(1.9rem, 9vw, 3rem); }
  .benefits-copy > p { font-size: 1.1rem; }
  .catalog-download-detail { flex-direction: column; align-items: center; gap: 1.5rem; margin-top: 1rem; }
  .catalog-download-detail > div.pdf-download-block { transform: none; }
  .catalog-download-detail .pdf-icon-stack { transform: none; }
  .catalog-download-detail > div span { white-space: normal; font-size: 1.15rem; overflow-wrap: anywhere; }
  .catalog-download-detail > a { width: min(100%, 400px); }

  /* The process graphic is a full-width visual on phones. Remove the
     desktop-side gutters so its text remains readable at narrow widths. */
  .detail-page .detail-process-image { padding: 1rem 0; }
  .detail-page .detail-process-image img { width: 100%; max-width: none; }
}

/* Mobile footer: follow the narrow-screen reference as one readable column. */
@media (max-width: 800px) {
  .site-footer {
    padding: 2rem var(--mobile-gutter) calc(3rem + env(safe-area-inset-bottom));
  }

  .site-footer .footer-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(.75rem, 4vw, 1.5rem);
    row-gap: 1.5rem;
    align-items: start;
    width: 100%;
    margin: 0;
  }

  /* 穿透两个 section，让内部元素直接参与 Grid 布局 */
  .site-footer .footer-links,
  .site-footer .footer-social {
    display: contents;
  }

  /* ===== 第 1 行：标题 ===== */
  .site-footer .footer-links h2 {
    grid-column: 1;
    grid-row: 1;
  }

  .site-footer .footer-social h2 {
    grid-column: 2;
    grid-row: 1;
  }

  /* ===== 第 2 行：内容 ===== */
  .site-footer .footer-links nav {
    grid-column: 1;
    grid-row: 2;
  }

  .site-footer .footer-social-icons {
    grid-column: 2;
    grid-row: 2;
  }

  /* ===== 第 3 行：底部 ===== */
  .site-footer .footer-tresun-lockup {
    grid-column: 1;
    grid-row: 3;
    align-self: start;
  }

  .site-footer .footer-main-website {
    grid-column: 2;
    grid-row: 3;
    align-self: start;
  }

  /* ===== 第 4 行：视频卡片（全宽） ===== */
  .site-footer .footer-video-card {
    grid-column: 1 / -1;
    grid-row: 4;
    align-self: flex-start;
    width: min(100%, 24rem);
    margin-top: 1rem;
  }

  .catalog-page .site-footer .footer-video-card {
    justify-self: start;
  }

  /* ===== 样式 ===== */
  .site-footer .footer-links h2,
  .site-footer .footer-social h2 {
    font-size: clamp(1rem, 4.5vw, 1.55rem);
    line-height: 1.1;
  }

  .site-footer .footer-links nav {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    width: 100%;
    margin-top: .25rem;
  }

  .site-footer .footer-links nav a {
    font-size: clamp(1rem, 4vw, 1.25rem);
    line-height: 1.2;
  }

  .site-footer .footer-tresun-logo {
    width: min(11rem, 52vw);
  }

  .site-footer .footer-social-icons {
    display: flex;
    gap: 1rem;
    margin-top: 1.25rem;
  }

  .site-footer .footer-social-icons a {
    width: 1.5rem;
    height: 1.5rem;
  }

  .site-footer .footer-main-website img {
    width: min(7.5rem, 34vw);
  }
}

@media (max-width: 480px) {
  .social-links { display: flex; }
  .brand img { width: min(68vw, 185px); }
  .hero-slides { height: auto; min-height: 0; aspect-ratio: 1920 / 935; }
  .hero-rail { display: none; }
  .event-art { height: 68vw; min-height: 200px; }
  .event-info { padding-inline: .85rem; }
  .event-meta p { align-items: flex-start; flex-direction: column; gap: .1rem; }
  .event-countdown div { width: 4rem; height: 6.5rem; font-size: 3.25rem; }
  .exhibition-tabs { grid-template-columns: 1fr; }
  .exhibition-tab.is-active { grid-column: auto; }
  .exhibition-tab, .exhibition-tab.is-active { aspect-ratio: 1040 / 907; height: auto; }
  .about-hero h1 { font-size: 2rem; }
  .process-grid, .team-grid { grid-template-columns: 1fr; }
  .factory { padding-top: 6rem; }
  .hall-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-hero { padding-top: 1.5rem; }
  .catalog-download-row { align-items: center; }
  .catalog-download-row .catalog-download-icon { margin-left: .25rem; }
  .contact-panel { margin-top: 5.5rem; }
  .contact-panel__lead { font-size: 1.1rem; }
  .detail-board-top { min-height: 340px; }
  .detail-board-top .detail-brand-title { font-size: .95rem; }
  .detail-hero-copy { width: 47%; }
  .detail-hero-copy .detail-logo { width: 68px; }
  .detail-hero-copy h1 { font-size: .82rem; }
  .detail-hero-copy p { font-size: .64rem; }
  .detail-panel-social img { width: 17px; height: 17px; }
  .detail-facts p { grid-template-columns: 20px 82px minmax(0, 1fr); font-size: .75rem; }
  .detail-facts p::before { width: 19px; height: 19px; }
  .benefits-image { height: 270px; }
  .catalog-download-detail > div img { width: 70px; }
}

/* The showcase remains a single, readable card column throughout phone-sized viewports. */
@media (max-width: 960px) {
  .exhibition-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    height: auto;
    gap: .55rem;
    /* Reordering the selected card must not make the browser choose the
       first source-order card as a vertical scroll anchor. */
    overflow-anchor: none;
  }
  .exhibition-tab,
  .exhibition-tab.is-active {
    width: 100%;
    height: auto;
    min-width: 0;
    flex: none;
    aspect-ratio: 165 / 907;
  }
  .exhibition-tab.is-active {
    grid-column: 1 / -1;
    aspect-ratio: 1040 / 907;
    order: -1;
  }
  .exhibition-tab:not(.is-active) { order: 0; }
  .exhibition-tab:not(.is-active) .gallery-copy b {
    font-size: clamp(1.15rem, 6.5vw, 3.8rem);
  }
  .exhibition-tab:not(.is-active) .gallery-copy small {
    font-size: clamp(.72rem, 2.4vw, 1.6rem);
  }
  .showcase-grid { grid-template-columns: minmax(0, 1fr); }
  .showcase-grid article:last-child { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .team-grid img, .hall-side img, .floating-wechat-qr { transition: none !important; }
}

@media (min-width: 801px) {
  .event-scale-canvas,
  .detail-scale-stage { display: contents; }
}

/* Keep one continuous background image: on larger screens the transparent
 * board grows with that artwork instead of cropping a fixed-size window. */
@media (min-width: 801px) {
  .detail-page .detail-hero {
    padding: 5vw 5vw 7vw;
  }

  .detail-page .detail-board {
    width: min(90%, 2048px);
    max-width: 100%;
  }

  .detail-page .detail-board-top {
    min-height: min(40vw, 1024px);
    height: auto;
    aspect-ratio: auto;
    background-image: none;
  }

  /* The reserve graphic is a two-state sprite. Keep the first state in view
   * at every board width so its arrow is never cut off or overlapped. */
  .detail-page .detail-reserve button {
    height: auto;
    aspect-ratio: 335 / 92;
    padding: 0 20% 0 17%;
    font-size: clamp(1.2rem, 2vw, 2rem);
    background-position: center 13.333%;
  }

  .detail-page .detail-reserve button::before {
    top: -2px;
  }
}