/* On phones, use the semantic copy and keep the original book artwork. */
@media (max-width:700px), (max-width:950px) and (max-height:500px) {
  :root {
    --reader-header-height:70px!important;
    --mobile-control-height:52px;
    --mobile-control-bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  }

  html { scroll-padding-top:86px; }
  body {
    padding-top:70px;
    padding-bottom:calc(88px + env(safe-area-inset-bottom, 0px));
  }

  .site-header.reference-header-mode,
  body:has(.hero-shell:not(.is-detail))>.site-header {
    width:100%;
    height:70px;
    aspect-ratio:auto;
    box-shadow:0 2px 16px #0000000d;
  }
  .reference-header-mode .header-inner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    width:calc(100% - 32px);
    height:70px;
    margin:0 auto;
  }
  .reference-header-mode .reference-header-art,
  .reference-header-mode .reference-header-nav,
  .reference-header-mode .header-inner>.reference-hotspot {
    display:none;
  }
  .reference-header-mode .header-inner>.brand {
    display:inline-flex;
    gap:2px;
    letter-spacing:-1.2px;
  }
  .reference-header-mode .brand-forma { font-size:37px; }
  .reference-header-mode .brand-line { font-size:17px; }
  .reference-header-mode .header-inner>.menu-toggle {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    flex:none;
    gap:7px;
    width:48px;
    height:48px;
    padding:12px;
    border-radius:6px;
    background:#fff;
  }
  .reference-header-mode .menu-toggle span {
    display:block;
    width:24px;
    height:2px;
    background:var(--ink);
  }
  .reference-header-mode #navigation {
    display:none;
    position:absolute;
    top:70px;
    left:-16px;
    right:-16px;
    max-height:calc(100dvh - 158px - env(safe-area-inset-bottom, 0px));
    margin:0;
    padding:12px 20px 20px;
    overflow:auto;
    flex-direction:column;
    align-items:stretch;
    gap:6px;
    background:#fff;
    border-top:1px solid var(--line);
    box-shadow:0 12px 20px #00000016;
    font-size:17px;
  }
  .reference-header-mode #navigation.is-open { display:flex; }
  .reference-header-mode #navigation>a {
    min-height:48px;
    padding:13px 8px;
  }
  .reference-header-mode #navigation>.nav-purchase {
    align-self:stretch;
    min-width:0;
    margin-top:4px;
    font-size:17px;
    text-align:center;
  }

  .hero-shell,
  .hero-shell.is-detail {
    min-height:0;
    padding-top:0;
    background:#fff;
  }
  .hero-shell .hero-layout,
  .hero-shell:not(.is-detail) .hero-layout {
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    width:min(calc(100% - 40px), 580px);
    min-height:0;
    margin:0 auto;
    padding:28px 0 36px;
  }
  .hero-shell:not(.is-detail) .hero-front-copy { display:contents; }
  .hero-front-copy>.reference-front { display:none; }
  .hero-front-copy>.reference-semantic-copy {
    position:static!important;
    display:contents;
    width:auto;
    height:auto;
    margin:0!important;
    padding:0!important;
    overflow:visible;
    clip:auto;
    clip-path:none;
    white-space:normal;
    pointer-events:auto;
  }
  .hero-front-copy .reference-semantic-copy h1 {
    order:-2;
    width:100%;
    margin:0 0 24px;
    font-size:clamp(30px, 8.1vw, 42px);
    line-height:1.12;
    letter-spacing:-1.3px;
  }
  .hero-front-copy .reference-semantic-copy p {
    order:0;
    width:100%;
    max-width:none;
    margin:0 0 18px;
    font-size:17px;
    line-height:1.65;
    letter-spacing:normal;
  }
  .hero-front-copy .reference-semantic-copy .motto {
    margin:8px 0 22px;
    padding-left:14px;
    border-left:4px solid #f01414;
    color:#f01414;
    font-family:Arial, Helvetica, sans-serif;
    font-size:clamp(22px, 5.7vw, 28px);
    font-weight:700;
    line-height:1.28;
    letter-spacing:-.5px;
  }
  .hero-front-copy .reference-semantic-copy .credential {
    margin:0;
    font-size:14px;
    line-height:1.6;
  }

  .hero-shell .book-stage,
  .hero-shell:not(.is-detail) .book-stage {
    display:block;
    position:relative;
    order:-1;
    align-self:center;
    left:auto;
    top:auto;
    width:min(100%, 380px);
    height:auto;
    margin:0 auto 24px;
    padding:0;
    aspect-ratio:670 / 794;
  }
  .hero-shell .book-turner {
    height:auto;
    aspect-ratio:670 / 794;
  }
  .hero-shell .book-back { padding:12px 28px 24px; gap:8px; }
  .hero-shell .back-book-object {
    width:auto;
    height:calc(100% - 40px);
    max-width:100%;
    padding-bottom:8px;
    aspect-ratio:2424 / 3445;
  }
  .hero-shell .back-book-object img { height:100%; object-fit:contain; }
  .hero-shell .cover-enlarge {
    flex:none;
    min-height:32px;
    font-size:13px;
    line-height:1.4;
  }
  .hero-shell .hero-copy.hero-detail-copy {
    order:0;
    width:100%;
    max-height:none;
    margin:0;
    padding:0;
    overflow:visible;
  }
  .hero-detail-copy h2 {
    font-size:clamp(30px, 8vw, 40px);
    line-height:1.15;
    letter-spacing:-1px;
  }
  .hero-detail-copy .back-link { min-height:44px; margin-bottom:14px; }
  .hero-detail-copy .reader-questions p { font-size:18px; line-height:1.5; }
  .hero-detail-copy>.detail-description,
  .hero-detail-copy>.detail-credential { font-size:16px; line-height:1.65; }

  #read-more-control {
    display:flex;
    align-items:center;
    justify-content:center;
    left:16px;
    right:16px;
    top:auto;
    bottom:var(--mobile-control-bottom);
    width:calc(100% - 32px);
    height:var(--mobile-control-height);
    min-height:48px;
    margin:0;
    padding:12px 18px;
    border:0;
    border-radius:8px;
    background:linear-gradient(120deg, #920606, #850000);
    color:#fff;
    box-shadow:0 5px 20px #5500002b;
    font-size:18px;
    font-weight:700;
    line-height:1.25;
    text-align:center;
  }
  #read-more-control>img { display:none; }
  #read-more-control>.reference-semantic-copy {
    position:static!important;
    display:block;
    width:auto;
    height:auto;
    margin:0!important;
    padding:0!important;
    overflow:visible;
    clip:auto;
    clip-path:none;
    white-space:normal;
    pointer-events:auto;
  }
}