/* Phone refinements are isolated here so the desktop composition stays intact. */
@media (max-width: 720px) {
  html { scroll-padding-top: 20px; }
  .header { height: 74px; gap: 10px; }
  .header .identity { gap: 10px; flex-shrink: 0; }
  .header .identity-name { font-size: 11px; }
  .header nav, .about-page .header nav { gap: clamp(10px, 3.5vw, 18px); min-width: 0; }
  .header .nav-link { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; font-size: 11px; }
  .header .nav-link.active, .about-page .header nav a[href="/"] { display: none; }
  .header .nav-link > span { margin-left: 4px; }
  .header .nav-link.work-nav > span { margin-left: 0; }

  .hero { padding-bottom: 58px; }
  .hero-copy { padding-top: 27px; }
  .hero .eyebrow { font-size: 9px; letter-spacing: 1.1px; gap: 10px; }
  .hero h1 { font-size: clamp(39px, 10.8vw, 65px); margin-block: 21px 20px; }
  .hero .intro { font-size: 14px; line-height: 1.65; margin-bottom: 21px; }
  .hero .desktop-break { display: none; }
  .hero .margin-note { font-size: 9px; width: 95px; }
  .character-home { height: clamp(300px, 91vw, 450px); margin-top: 12px; }
  .character-home .character-stage { inset: 0 -4% 0; }
  .character-home .scene-coordinate { top: 0; font-size: 8px; }
  .character-home .channel-controls { bottom: 4px; }
  .hero-footer { height: 58px; gap: 12px; }
  .hero-footer .interaction-hint { max-width: 130px; font-size: 9px; }

  .journey { padding-top: 44px; --mobile-scene-height: clamp(160px, 23svh, 205px); }
  .journey-heading { gap: 12px; }
  .journey-heading .eyebrow { font-size: 10px; letter-spacing: 1px; }
  .chapter-count { font-size: 8px; letter-spacing: .7px; }
  .journey-intro { margin: 25px 0 30px; }
  .journey-intro h2 { font-size: clamp(36px, 10.2vw, 54px); }
  .journey-intro > p { font-size: 14px; line-height: 1.75; margin-top: 21px; }
  .journey-visual { height: var(--mobile-scene-height); margin-bottom: 24px; }
  .visual-topline { top: 11px; font-size: 9px; letter-spacing: .6px; }
  .visual-year { top: 40px; font-size: 39px; }
  .visual-year.is-range { font-size: 29px; }
  .visual-caption { bottom: 17px; gap: 5px; right: 45%; }
  .visual-caption strong { font-size: clamp(17px, 4.8vw, 21px); }
  .visual-caption > span:first-child { font-size: 10px; line-height: 1.45; }
  .journey-character-dock { inset: 13px 0 -30px 39%; }
  .journey-character-dock .channel-controls { bottom: 36px; right: 10px; }
  .scroll-story { padding: 0 0 48px 40px; scroll-margin-top: calc(var(--mobile-scene-height) + 18px); }
  .scroll-story:last-child { padding-bottom: 30px; }
  .story-step { left: -40px; width: 27px; height: 27px; font-size: 11px; }
  .journey-stories:before { left: 13px; }
  .story-date { min-height: 41px; margin-bottom: 18px; font-size: 12px; }
  .story-masthead { gap: 13px; margin-bottom: 23px; }
  /* Reserve each logo's height before lazy loading to keep scroll targets stable. */
  .company-logo { height: 66px; max-height: 66px; max-width: min(100%, 195px); }
  .company-logo.on-dark { height: 86px; max-height: 86px; }
  .company-logo.square-mark { width: 78px; height: 78px; max-height: 78px; }
  .company-logo.company-crest { height: 109px; max-height: 109px; max-width: 80px; }
  .story-role { font-size: 12px; }
  .story-overline { font-size: 10px; letter-spacing: .8px; }
  .story-body h3 { font-size: clamp(25px, 7vw, 34px); line-height: 1.2; margin: 16px 0 20px; }
  .story-body > p { font-size: 14px; line-height: 1.8; margin-bottom: 15px; }
  .story-moments { margin-top: 23px; }
  .story-moment { padding: 15px 0; gap: 5px; }
  .story-moment h4 { font-size: 15px; }
  .story-moment p { font-size: 14px; line-height: 1.7; }
  .story-cover { width: min(100%, 160px); }
  .story-crossover { padding: 12px; gap: 6px; margin-bottom: 21px; }
  .crossover-label { font-size: 10px; }
  .crossover-link { font-size: 13px; }
  .story-sources { margin-top: 17px; }

  .building-now { padding-top: 27px; }
  .building-heading { gap: 12px; }
  .building-heading .eyebrow { font-size: 10px; }
  .building-status { font-size: 9px; }
  .building-grid { gap: 27px; margin-block: 25px; }
  .building-product { font-size: 15px; margin-bottom: 16px; }
  .building-copy h2 { font-size: clamp(34px, 9.5vw, 51px); margin-bottom: 23px; }
  .building-copy p { font-size: 14px; line-height: 1.8; margin-bottom: 15px; }
  .building-visual { padding: 14px 18px 20px; }
  .building-visual-top { font-size: 8px; min-height: 44px; }
  .wasabe-eyes { width: min(100%, 280px); }
  .wasabe-hint { margin: -4px 0 18px; font-size: 9px; }
  .building-visual-bottom > span:first-child { font-size: 23px; }
  .building-visual-bottom > span:last-child { font-size: 8px; }
  .building-related { padding-block: 20px; gap: 9px; }
  .building-related p { font-size: 14px; }

  .album-feature { margin-top: 34px; padding-block: 32px; gap: 27px; }
  .album-experience { width: min(100%, 345px); }
  .album-feature .eyebrow { font-size: 10px; letter-spacing: .8px; }
  .album-feature h3 { font-size: clamp(35px, 9.5vw, 48px); margin-block: 21px; }
  .album-feature p { font-size: 14px; line-height: 1.75; }
  .album-meta { font-size: 10px; letter-spacing: .7px; margin-block: 19px; }
  .catalogue-note { font-size: 12px; margin-top: 16px; }
  body .album-pause[data-metal="circle"] { width: 44px; height: 44px; min-width: 44px; }

  .journey-end { font-size: 10px; gap: 14px; margin-top: 25px; }
  .journey-end a { display: inline-flex; align-items: center; min-height: 44px; }
  .site-footer { gap: 14px; padding-block: 22px max(24px, env(safe-area-inset-bottom)); }
  .site-footer a { display: inline-flex; align-items: center; min-height: 44px; line-height: 1.5; }

  .music-room { height: 100dvh; max-height: 100dvh; }
  .music-room-bar { padding: max(8px, env(safe-area-inset-top)) 6% 8px; }
  .music-room-bar button { min-height: 44px; }
  .music-visual, .music-visual .character-area { height: clamp(165px, 25svh, 225px); }
  .music-release { padding-top: 12px; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  .music-release h2 { font-size: clamp(29px, 8.5vw, 37px); }
  .music-release > p { font-size: 14px; }
  .release-selector select { font-size: 16px; min-height: 44px; }
  .release-links { gap: 10px 20px; }
  .release-links a, #music-retry { min-height: 44px; }

  .about-page .profile-intro { padding: 34px 0 76px; }
  .profile-intro-copy { gap: 26px; }
  .about-page .profile-intro h1 { font-size: clamp(65px, 17vw, 90px); margin-top: 22px; }
  .about-page .profile .profile-lede { font-size: clamp(21px, 5.7vw, 27px); line-height: 1.45; margin-bottom: 22px; }
  .about-page .profile p, .profile-intro-summary > p:not(.profile-lede) { font-size: 14px; line-height: 1.8; }
  .about-page .profile-links { gap: 4px 19px; margin-top: 17px; }
  .about-page .profile-links a { display: inline-flex; align-items: center; min-height: 44px; }
  .story-scroll { bottom: 16px; font-size: 8px; }
  .about-page .profile-section { padding: 43px 0; gap: 24px; }
  .about-page .profile-label h2 { font-size: clamp(29px, 7.8vw, 39px); margin-top: 15px; }
  .about-page .profile-copy h3 { font-size: 19px; line-height: 1.4; }
  .about-page .profile-copy article + article { margin-top: 27px; padding-top: 27px; }
  .about-page .project-facts dt { font-size: 17px; }
  .about-page .project-facts dd { font-size: 14px; line-height: 1.75; }
  .about-page .text-link { display: inline-flex; align-items: center; min-height: 44px; }
  .about-page .profile-closing { min-height: 138svh; padding: 48px 0 20svh; }
  .profile-closing h2 { font-size: clamp(55px, 14vw, 78px); margin-block: 20px; }
  .about-page .profile-closing-copy > p { font-size: 15px; margin-bottom: 24px; }
  .about-page .primary-button { min-height: 49px; }
  .story-iris { width: 92%; margin: 30px auto 0; top: 14svh; }
  .profile-updated { margin-top: 22px; }
  .story-motion { right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); }
}

/* Small phones keep controls readable without squeezing the content column. */
@media (max-width: 360px) {
  .header .identity-name { display: none; }
  .header nav, .about-page .header nav { gap: 18px; }
  .hero .margin-note { display: none; }
  .hero .eyebrow { font-size: 8px; letter-spacing: .9px; }
  .hero h1 { font-size: 38px; }
  .journey-heading .line { width: 15px; }
  .journey-heading .eyebrow { font-size: 9px; gap: 8px; }
  .chapter-count { font-size: 7px; }
  .scroll-story { padding-left: 34px; }
  .story-step { left: -34px; }
  .story-body h3 { font-size: 25px; }
  .visual-year.is-range { font-size: 24px; }
  .visual-caption strong { font-size: 17px; }
  .album-stage-top [data-metal-text] { transform: scale(.9); transform-origin: left center; }
}

/* Rotated phones retain the side-by-side composition at an appropriate scale. */
@media (max-width: 950px) and (max-height: 500px) and (pointer: coarse) {
  .header .nav-link { display: inline-flex; align-items: center; min-height: 44px; }
  .release-selector select { font-size: 16px; min-height: 44px; }
  .hero { min-height: 0; padding-bottom: 60px; }
  .hero-copy { padding-block: 28px; }
  .hero h1 { font-size: clamp(36px, 5.7vw, 49px); margin-block: 18px; }
  .hero .intro { font-size: 14px; line-height: 1.6; }
  .hero .eyebrow { font-size: 8px; }
  .hero .margin-note { margin-top: 18px; font-size: 9px; }
  .character-home, .character-home > .character-area { min-height: 0; height: 340px; }
  .character-home .channel-controls { bottom: 0; }
  .hero-footer { height: 56px; }
  .about-page .profile-intro { padding-block: 40px 80px; }
  .about-page .profile-intro h1 { font-size: 70px; }
  .about-page .profile .profile-lede { font-size: 22px; }
  .about-page .profile-closing { padding-top: 40px; }
  .profile-closing h2 { font-size: 60px; }
  .story-iris { top: 12svh; width: 90%; margin-left: 0; }
}

@media (min-width: 721px) and (max-width: 950px) and (max-height: 500px) and (pointer: coarse) {
  .company-logo { height: 95px; }
  .company-logo.on-dark { height: 112px; }
  .company-logo.square-mark { height: 108px; }
  .company-logo.company-crest { height: 145px; }
}

/* The narrowest phones: the chapter caption has no room for a badge beside the title, so it sits by the year. */
@media (max-width: 340px) {
  .visual-caption .visual-badge { position: absolute; left: 96px; bottom: calc(100% + 16px); }
}

/* Listening room on phones: a taller stage for the character, and only the pause control beside it,
   as in the journey dock (the room's title already names the channel). */
@media (max-width: 720px) {
  .music-visual, .music-visual .character-area { height: clamp(210px, 32svh, 280px); }
  .music-visual .channel-readout { display: none; }
  .music-visual .channel-controls { left: auto; right: 14px; bottom: 14px; transform: none; min-width: 0; padding: 0; gap: 0; background: transparent; border-color: transparent; }
}

/* The metal wordmark measures itself on screen: a scale transform makes it draw twice, offset. It fits unscaled. */
@media (max-width: 720px), (max-width: 1000px) and (pointer: coarse) {
  .album-stage-top [data-metal-text] { transform: none; }
}

/* Touch screens wider than a phone (tablets, rotated phones): touch-sized targets and a centred header row. */
@media (min-width: 721px) and (pointer: coarse) {
  .header nav { align-items: center; }
  .header .nav-link { display: inline-flex; align-items: center; min-height: 44px; }
  .hero-footer > a { display: inline-flex; align-items: center; min-height: 44px; }
  .story-sources summary { min-height: 44px; display: flex; align-items: center; }
  .archive-links a { min-height: 44px; display: inline-flex; align-items: center; }
  body .album-pause[data-metal="circle"] { width: 44px; height: 44px; min-width: 44px; }
  .site-footer a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Rotated phones: the listening room fills the screen, character left, release column scrolling. */
@media (max-width: 950px) and (max-height: 500px) and (pointer: coarse) {
  .music-room { width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; display: flex; flex-direction: column; overflow: hidden; }
  .music-room:not([open]) { display: none; }
  .music-room-bar { flex: none; padding: max(4px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) 4px max(24px, env(safe-area-inset-left)); }
  .music-room-bar button { min-height: 44px; }
  .music-room-grid { display: grid; flex: 1 1 auto; min-height: 0; grid-template-columns: 42% 1fr; }
  .music-visual, .music-visual .character-area { height: 100%; min-height: 0; }
  .music-visual .character-stage { inset: 0 -4% 8px; }
  .music-visual .channel-readout { display: none; }
  .music-visual .channel-controls { left: auto; right: 14px; bottom: 14px; transform: none; min-width: 0; padding: 0; gap: 0; background: transparent; border-color: transparent; }
  .music-release { overflow-y: auto; overscroll-behavior: contain; justify-content: flex-start; padding: 16px max(24px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) 16px; }
  .release-art { margin: 12px 0 14px; }
  .release-art img { width: 88px; height: 88px; }
  .music-release h2 { font-size: 38px; }
}

/* Small touch tablets upright: the listening room's character keeps inside its column. */
@media (min-width: 721px) and (max-width: 800px) and (orientation: portrait) and (pointer: coarse) {
  .music-visual .character-stage { inset: 0 -4% 12px; }
  .music-release { padding-top: 16px; padding-bottom: 16px; }
  .release-art img { width: 96px; height: 96px; }
}

/* ---- Phone pass: zoom, type, journey dock, section seams ---- */
@media (max-width: 720px) {
  /* The zoom stage covers exactly the window (the resting stage bleeds 4% each side). */
  .character-home .character-stage.is-zooming { inset: 0; }
  /* The hero footer fades with the zoom instead of vanishing under the zoom's paper fade. */
  .hero-guide.is-zooming .hero-footer { z-index: 6; }
  /* Readable small type and touch-sized links. */
  .hero-footer > a { font-size: 10px; min-height: 44px; padding-block: 9px; }
  .hero-footer .interaction-hint { font-size: 11px; }
  .character-home .scene-coordinate { font-size: 9px; }
  .hero .eyebrow { font-size: 10px; }
  .header .nav-link { font-size: 12px; min-width: 44px; justify-content: center; }
  .visual-topline { font-size: 11px; letter-spacing: .5px; }
  .chapter-count { font-size: 10px; }
  .visual-caption > span:first-child, .story-overline, .crossover-label { font-size: 11px; }
  .service-channels, .service-toolkit a > span { font-size: 12px; }
  .service-stat > span, .building-visual-top, .building-visual-bottom > span:last-child, .album-stage-bottom, .album-stage-bottom strong { font-size: 10px; }
  .services-signature > span, .services-intro > .eyebrow, .service-toolkit > span, .wasabe-hint, .building-status, .portrait-heading > span { font-size: 11px; }
  /* Landing on #building clears the journey's sticky strip entirely. */
  #building { scroll-margin-top: 0; }
  /* The docked character fades in, and its screen glow feathers into the top of the strip instead of a hard edge. */
  #journey-character-dock > .character-area { animation: journey-dock-in .45s ease-out both; }
  .journey-character-dock .character-stage {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 75%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 75%, transparent 100%);
  }
  /* One rule at each section seam, not two or three stacked. */
  .services-feature { border-top: 0; border-bottom: 0; }
  .album-feature { border-top: 0; }
  /* Listening room: the bar is solid so scrolled text never ghosts behind its label. */
  .music-room-bar { background: #10121d; }
  /* About page: source links flow with their sentence and get a finger-sized hit area; the pause pill is an icon. */
  .about-page .profile-source a { display: inline; margin: 0; padding-block: 11px; }
  .story-motion { width: 44px; padding: 0; justify-content: center; }
  .story-motion-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@keyframes journey-dock-in { from { opacity: 0; } }
/* Keeps the pill clear of the fold at load (--pill-lift is set by main.js); rotated phones keep their own layout. */
@media (max-width: 720px) and (min-height: 501px) {
  .character-home .channel-controls { bottom: calc(4px + var(--pill-lift, 0px)); }
}
@media (max-width: 360px) {
  .chapter-count { font-size: 9px; }
  .journey-heading .eyebrow { font-size: 10px; }
  .is-carousel .portrait-progress { display: none; }
}
@media (min-width: 721px) and (max-width: 950px) and (max-height: 500px) and (pointer: coarse) {
  .journey-character-dock .character-stage {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 75%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 75%, transparent 100%);
  }
}
/* A hidden button stays hidden: the metal buttons' display rule otherwise overrides [hidden] ("Try again"). */
body .btn[hidden] { display: none; }
/* Rotated phones: the character's stage never runs taller than the screen, so its pill stays in view at the pin. */
@media (max-width: 950px) and (max-height: 500px) and (pointer: coarse) {
  .character-home, .character-home > .character-area { height: min(340px, calc(100svh - 14px)); }
}