/* v71: single source of truth for the public shell and cover rhythm.
   Loaded last to stop legacy responsive layers from shrinking the interface. */

.reading-progress,
.desktop-nav a::after,
.section-nav a::before,
.section-nav a::after,
.hero .eyebrow::before {
  display: none !important;
  content: none !important;
}

.site-header,
.section-nav {
  border-color: rgb(224 203 164 / 16%);
}

.desktop-nav a.active,
.section-nav a.active {
  box-shadow: none !important;
  text-decoration: none !important;
}

/* Desktop: one 1180px editorial grid, readable at normal viewing distance. */
@media (min-width: 981px) {
  .header-inner {
    width: min(calc(100% - 64px), 1180px);
    min-height: 76px;
    padding-block: 8px;
    grid-template-columns: 190px minmax(0, 1fr) 138px;
    gap: 28px;
  }

  .brand {
    gap: 11px;
  }

  .brand-mark {
    width: 26px;
    height: 34px;
  }

  .brand strong {
    font-size: 17px;
    line-height: 1.25;
    letter-spacing: 0.04em;
  }

  .brand small {
    margin-top: 3px;
    font-size: 10.5px;
    line-height: 1.25;
    letter-spacing: 0.09em;
  }

  .desktop-nav {
    justify-content: center;
    gap: clamp(18px, 1.6vw, 26px);
    font-size: 14px;
    font-weight: 650;
    letter-spacing: 0.025em;
  }

  .desktop-nav a {
    display: inline-flex;
    min-height: 38px;
    padding: 8px 4px;
    align-items: center;
    color: rgb(241 236 225 / 72%);
  }

  .desktop-nav a:hover,
  .desktop-nav a:focus-visible {
    color: #f5f0e7;
    text-decoration: none;
  }

  .desktop-nav a.active {
    color: #e5b95f;
  }

  .language-switch {
    gap: 8px;
  }

  .language-switch-label {
    font-size: 11.5px;
  }

  .language-menu summary {
    min-width: 68px;
    height: 38px;
    padding-inline: 11px;
    font-size: 13px;
  }

  .site-bgm-bar {
    padding: 6px 0 10px;
  }

  .site-bgm-capsule {
    width: min(calc(100% - 64px), 720px);
    min-height: 50px;
    padding: 7px 14px 6px;
    border: 1px solid rgb(229 185 95 / 23%);
    border-radius: 10px;
  }

  .site-bgm-main {
    gap: 9px;
  }

  .site-bgm-picker {
    width: clamp(190px, 18vw, 230px);
  }

  .site-bgm-picker select {
    height: 32px;
    font-size: 13px;
  }

  .site-bgm-note {
    font-size: 10px;
  }

  .hero-inner {
    width: min(calc(100% - 64px), 1180px);
    min-height: min(720px, calc(100vh - var(--sticky-header-height, 130px)));
    padding: clamp(52px, 5vw, 76px) 0 clamp(58px, 5.5vw, 84px);
    grid-template-columns: minmax(0, 0.86fr) minmax(520px, 1.14fr);
    column-gap: clamp(56px, 6vw, 92px);
  }

  .hero-copy {
    max-width: 500px;
  }

  .hero h1 {
    max-width: 9.8ch;
    margin-top: 24px;
    font-size: clamp(48px, 4.25vw, 61px);
    line-height: 1.17;
    letter-spacing: var(--track-h);
    text-wrap: balance;
  }

  .hero-deck {
    max-width: 34em;
    margin-top: 28px;
    font-size: 16px;
    line-height: 1.88;
  }

  .hero-tags {
    margin-top: 24px;
  }

  .hero .primary-link {
    margin-top: 30px;
  }

  .hero-note {
    margin-top: 24px;
  }

  .hero-visual {
    align-self: center;
  }

  .angel-frame {
    max-width: 620px;
    margin-left: auto;
  }
}

/* Tablet: preserve the two-column header without microscopic type. */
@media (min-width: 721px) and (max-width: 980px) {
  .header-inner {
    width: calc(100% - 40px);
    min-height: 68px;
    grid-template-columns: minmax(160px, auto) minmax(0, 1fr) auto;
    gap: 16px;
  }

  .brand strong { font-size: 15px; }
  .brand small { font-size: 9.5px; }

  .desktop-nav {
    gap: 10px;
    font-size: 12.5px;
  }

  .desktop-nav a {
    min-height: 36px;
    padding: 7px 2px;
  }

  .language-switch-label { display: none; }
  .language-menu summary { min-width: 60px; font-size: 12px; }
}

/* Mobile: compact, not tiny. The rail behaves like chapter tabs, not fine print. */
@media (max-width: 720px) {
  .prototype-notice {
    min-height: 24px;
    padding: 5px 18px;
    font-size: 10.5px;
    line-height: 1.35;
  }

  .header-inner {
    width: calc(100% - 40px);
    min-height: 58px;
    padding-block: 7px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
  }

  .brand {
    gap: 9px;
  }

  .brand-mark {
    width: 22px;
    height: 29px;
  }

  .brand strong {
    font-size: 15px;
    line-height: 1.2;
    letter-spacing: 0.035em;
  }

  .brand small {
    display: block;
    margin-top: 2px;
    font-size: 9px;
    line-height: 1.2;
    letter-spacing: 0.07em;
  }

  .language-switch {
    gap: 7px;
  }

  .language-switch-label {
    display: inline;
    font-size: 10.5px;
    line-height: 1.2;
    letter-spacing: 0.02em;
  }

  .language-menu summary {
    min-width: 58px;
    height: 36px;
    padding-inline: 9px;
    font-size: 12.5px;
  }

  .site-bgm-bar {
    padding: 5px 0 7px;
  }

  .site-bgm-inner {
    width: calc(100% - 32px);
  }

  .site-bgm-capsule {
    min-height: 50px;
    padding: 5px 8px 4px;
    border: 1px solid rgb(229 185 95 / 22%);
    border-radius: 9px;
  }

  .site-bgm-main {
    min-height: 31px;
    gap: 2px;
  }

  .site-bgm-transport button,
  .site-bgm-modes button {
    min-width: 27px;
    height: 27px;
  }

  .site-bgm-transport .sound-toggle {
    width: 32px;
    min-width: 32px;
    height: 32px;
  }

  .site-bgm-picker {
    min-width: 82px;
    margin-inline: 3px;
  }

  .site-bgm-picker select {
    height: 29px;
    padding-inline: 8px 18px;
    font-size: 12px;
  }

  .site-bgm-meta {
    position: static;
    height: auto;
    min-height: 12px;
    margin: 1px 0 0;
    padding: 0 4px 0 72px;
  }

  .site-bgm-note {
    display: block;
    max-width: none;
    overflow: hidden;
    font-size: 9px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .site-bgm-volume {
    width: 42px;
  }

  .section-nav {
    min-height: 50px;
    padding: 7px 20px 8px;
    gap: 8px;
    border-top: 1px solid rgb(241 236 225 / 7%);
    border-bottom: 1px solid rgb(241 236 225 / 13%);
    background: rgb(15 13 11 / 97%);
    scrollbar-width: none;
  }

  .section-nav::-webkit-scrollbar { display: none; }

  .section-nav a {
    display: inline-flex;
    min-height: 34px;
    padding: 7px 10px !important;
    border: 1px solid rgb(241 236 225 / 18%) !important;
    border-radius: 3px;
    align-items: center;
    color: rgb(241 236 225 / 78%);
    background: transparent !important;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }

  .section-nav a.active {
    border-color: #e1b04a !important;
    color: #17120b;
    background: #e1b04a !important;
    font-weight: 750;
  }

  .hero-inner {
    width: calc(100% - 40px);
    padding: 32px 0 48px;
    gap: 0;
  }

  .hero-copy .eyebrow {
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: 0.12em;
  }

  .hero h1 {
    max-width: 9.5ch;
    margin-top: 18px;
    font-size: clamp(35px, 10.2vw, 43px);
    line-height: 1.18;
    letter-spacing: var(--track-h);
    text-wrap: balance;
  }

  .hero-deck {
    margin-top: 24px;
    font-size: 16px;
    line-height: 1.82;
  }

  .hero-tags {
    margin-top: 21px;
    font-size: 12px;
  }

  .hero .primary-link {
    min-height: 52px;
    margin-top: 27px;
    font-size: 14px;
  }

  .hero-visual {
    margin-top: 34px;
  }

  .hero-note {
    margin-top: 22px;
    font-size: 11.5px;
    line-height: 1.7;
  }
}

@media (max-width: 360px) {
  .header-inner { width: calc(100% - 32px); }
  .language-switch-label { display: none; }
  .site-bgm-inner { width: calc(100% - 20px); }
  .site-bgm-label { display: none; }
  .site-bgm-meta { padding-left: 66px; }
  .site-bgm-note { font-size: 8.5px; }
  .section-nav { padding-inline: 16px; }
  .section-nav a { font-size: 12.5px; }
}