/* GRAVITISM — phone readability (V210).
 * Loaded last on every page. Applies only to phones (≤700px wide);
 * the desktop and tablet layouts are untouched.
 * Text is about 2–4px larger, controls have larger touch areas, and the
 * previous / next albums sit side by side.
 */
@media (max-width:700px){

  /* ---------- Top menu (all pages) ---------- */
  html body .site-header nav{
    font-size:clamp(11px,3.05vw,13px) !important;
    gap:clamp(9px,3.2vw,15px) !important;
    letter-spacing:.14em !important;
  }
  html body .site-header nav span{font-size:clamp(12px,3.4vw,15px) !important}
  html body .site-header nav a{position:relative}
  html body .site-header nav a::after{content:"";position:absolute;inset:-12px -6px}
  html body .language-switcher .language-code{font-size:12px !important}
  html body .language-switcher .language-globe{height:26px !important;min-width:42px !important}
  html body .internal-wordmark{width:112px !important}

  /* Home page (white): menu and copyright clearly darker. */
  html body.home-page .site-header a{color:#000 !important;font-weight:500 !important}
  html body.home-page .site-header span{color:#000 !important;opacity:.7 !important}
  html body.home-page .language-switcher .language-globe{opacity:1 !important;color:#000 !important;font-weight:500}
  /* The larger home menu sits under the EN box so they never touch. */
  html body.home-page .site-header{top:52px !important}
  html body .copyright-notice{font-size:10.5px !important;color:#555 !important}

  /* ---------- WHO AM I ---------- */
  html body .who-text{font-size:var(--who-fs,14px) !important;line-height:1.75 !important}
  html body .who-text p{margin-bottom:calc(var(--who-fs,14px) * 1.05) !important}
  html body .who-cv-list li{padding-bottom:calc(var(--who-fs,14px) * 1.05) !important}
  html body .who-fs-btn{font-size:13px !important;min-width:38px !important;height:30px !important}
  html body .who-cv-toggle{font-size:11.5px !important;padding:10px 14px 9px !important}
  html body .who-cv-title{font-size:14px !important}

  /* ---------- Gallery and Literature introductions ---------- */
  html body .abstract-intro-box h2{font-size:14px !important}
  html body .abstract-intro-box p{font-size:15.5px !important;line-height:1.7 !important}
  html body .abstract-intro-ok{font-size:13.5px !important;padding:12px 26px !important}
  html body .abstract-intro-check{font-size:13px !important}

  /* ---------- Galleries ---------- */
  html body .abstract-gallery-title{font-size:14px !important}
  html body .gallery-meta,html body .gallery-meta *{font-size:12.5px !important}
  html body .gallery-tool-button,html body .gallery-tool-label,html body .gallery-time-button,
  html body .gallery-tool-field,html body .gallery-tool-field input{font-size:11px !important}
  html body .photo-info-title{font-size:14.5px !important}
  html body .photo-info-line{font-size:11.5px !important;line-height:1.55 !important}

  /* ---------- Literature shelf ---------- */
  html body .book-number{font-size:13px !important}

  /* ---------- Reader ---------- */
  /* The reader header also carries the small GRAVITISM logo on the left, so its menu stays a little smaller. */
  html body.reader-page .site-header nav{font-size:clamp(10px,2.75vw,11.5px) !important;gap:clamp(7px,2.2vw,10px) !important;letter-spacing:.1em !important}
  html body .page-author,html body .printed-page-number{font-size:11px !important}
  html body .reader-first-page{font-size:12px !important}
  html body .rm-label{font-size:13px !important}
  html body .rm-section{font-size:11px !important}
  html body .page-total{font-size:12px !important}
  html body .reader-search-count{font-size:10px !important}

  /* ---------- Contact ---------- */
  html body .contact-intro{font-size:14px !important;line-height:1.75 !important;letter-spacing:.1em !important}
  html body .contact-form label > span{font-size:12.5px !important}
  /* 16px stops iPhone from zooming into the form when a field is tapped. */
  html body .contact-form input,html body .contact-form textarea{font-size:16px !important}
  html body .contact-send{font-size:13px !important}
  html body .contact-status{font-size:14px !important}

  /* ---------- Music page ---------- */
  html body .music-heading p{font-size:14px !important;line-height:1.6 !important}
  html body .music-more{font-size:13px !important}
  html body .music-mode-help,html body .music-mode-help b{font-size:11px !important}
  html body .play-all{font-size:12px !important}
  html body .album-skip{width:44px !important;height:44px !important}
  html body .album-skip svg{width:22px !important;height:auto !important}
  html body .music-player-current strong{font-size:14px !important;letter-spacing:.06em !important}
  html body .music-player-current span{font-size:12px !important}
  html body .music-go-album{font-size:11px !important}
  html body .music-player-cover{width:44px !important;height:44px !important;flex-basis:44px !important}
  html body .music-player-controls{gap:16px !important}
  html body .music-player-controls button{font-size:18px !important;position:relative}
  html body .music-player-controls button:not(.music-player-play)::before{content:"";position:absolute;inset:-12px -10px}
  html body .music-player-play{width:48px !important;height:48px !important;font-size:17px !important}
  html body .music-player-progress span{font-size:11px !important}
  html body .music-filter{font-size:12px !important}
  html body .music-album-badge{font-size:10px !important}
  html body .music-title{font-size:18px !important}
  html body .music-type,html body .music-tribute{font-size:11px !important}
  html body .music-empty,html body .music-empty small{font-size:12px !important}

  /* ---------- Album pages ---------- */
  html body .album-music-back{font-size:11px !important}
  /* Album name on its own line; the subtitle below it (one line, "…" if long). */
  html body.album-page .album-heading-row>div:first-child{flex-direction:column !important;align-items:center !important;gap:6px}
  html body.album-page .album-heading-row h1{font-size:calc(20px * var(--fit)) !important}
  html body.album-page .album-subtitle{font-size:13.5px !important;max-width:100% !important;color:rgba(240,238,234,.62)}
  html body.album-page .album-subtitle::before{content:none !important}
  html body .album-play{height:38px !important;min-width:210px !important;font-size:12px !important}
  html body .album-play-help{font-size:11px !important}
  html body .player-cover{width:44px !important;height:44px !important;flex-basis:44px !important}
  html body .player-current strong{font-size:14px !important;letter-spacing:.06em !important}
  html body .player-current span{font-size:12px !important}
  html body .player-controls{gap:16px !important}
  html body .player-controls button{font-size:18px !important}
  html body .player-play{width:48px !important;height:48px !important;font-size:17px !important}
  html body .player-progress span{font-size:11px !important}
  html body .track-head{font-size:11px !important}
  html body .track-head,html body .track-row{grid-template-columns:30px 28px minmax(0,1fr) 52px 14px !important}
  html body .track-row{min-height:52px !important}
  html body .track-play{font-size:19px !important}
  html body .track-title{font-size:16px !important}
  html body .track-row .num,html body .track-row .time{font-size:12.5px !important}
  html body .album-notes .telegram-line,html body .album-notes .telegram-download{font-size:12.5px !important}
  html body .album-facts span,html body .album-facts strong,html body .album-facts>div{font-size:13px !important}
  html body .album-source-note{font-size:16px !important}

  /* Previous / next album: side by side, larger covers, label underneath. */
  html body .album-neighbors{flex-direction:row !important;justify-content:center !important;align-items:flex-start !important;gap:9vw !important}
  html body .album-neighbor{flex-direction:column !important;gap:9px !important}
  html body .album-neighbor img{order:0 !important;width:min(38vw,170px) !important;height:min(38vw,170px) !important}
  html body .album-neighbor .album-neighbor-label{order:1 !important;font-size:11px !important;letter-spacing:.14em !important}
}

/* Very narrow phones: keep the longer menu translations on one line. */
@media (max-width:360px){
  html body .site-header nav{letter-spacing:.09em !important;gap:8px !important}
}

/* Home page on phones: the logo 20% larger and 20px lower, with the GRAVITISM
   wordmark centred on the screen (the artwork itself sits left of centre). */
@media (max-width:600px) and (min-height:501px) and (orientation:portrait){
  html body .logo-layer{left:calc(-21.76% + 4.76vw) !important;width:143.52% !important;top:calc(27% - 8.46vw + 20px) !important}
}

/* All pages: iPhone must not enlarge text by itself when the phone is turned
   sideways (it did, which broke the layouts and stretched every text block). */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* ---------- Phones held sideways ---------- */
@media (orientation:landscape) and (max-height:520px){
  /* Music page: no large empty band under the menu. */
  html body .music-stage{padding-top:78px !important}
  /* Album pages: title, player and tracks first; then the album details,
     the two covers (smaller, side by side), the full description and the
     previous / next albums. */
  html body.album-page .album-art-grid{order:8 !important;width:min(560px,64vw) !important;margin:26px auto 0 !important}
  html body.album-page .art-labels{order:9 !important;width:min(560px,64vw) !important;margin-left:auto !important;margin-right:auto !important}
  html body.album-page .album-stage{padding-top:22px !important}
  html body.album-page .album-music-back{margin:62px auto 0 !important}
  html body.album-page .album-sticky{margin-top:0 !important}
  html body.album-page .album-heading-row{margin-top:0 !important}
  html body.album-page .album-facts{order:7 !important}
  html body.album-page .album-source-note{order:10 !important;max-height:none !important;overflow:visible !important;margin-top:24px !important}
  html body.album-page .album-neighbors{order:11 !important}
}
/* Album pages on a phone held sideways: the small spectrum beside the title
   stays low, so its particles never rise up to the menu. */
@media (orientation:landscape) and (max-height:520px){
  html body.album-page .album-title-line .music-spectrum canvas{height:34px !important;bottom:-2px !important}
}

/* Phones: the language window about 10% larger, with more room between the
   language names so each one is easy to tap. */
@media (max-width:700px){
  html body .language-switcher.is-open{height:238px}
  html body .language-switcher.is-open .language-panel{width:166px;height:238px}
  html body .language-switcher .language-list{padding:34px 12px 8px 8px}
  html body .language-switcher .language-option{font-size:15.5px !important}
}

/* Library: book texts readable on phones, and a hint under them (phones and
   tablets only) that tapping the cover opens the book. */
.book-details .book-tap-hint{display:none}
@media (max-width:740px), (hover:none) and (pointer:coarse){
  html body.literature-page .book-details .book-tap-hint{display:block;margin-top:10px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#e8b184;opacity:.85}
}
@media (max-width:740px), (max-height:520px) and (orientation:landscape){
  html body.literature-page .book-details{font-size:14px !important;line-height:1.6 !important;gap:8px !important;color:#a19e99 !important;max-width:min(92vw,560px) !important}
  html body.literature-page .book-details span:first-child{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:#c9c5bf}
  html body.literature-page .book-details .book-publication{font-size:13px;color:#a8a49d}
}

/* No double-tap zoom anywhere (taps stay quick and every tap counts). */
html{touch-action:manipulation}

/* Intro windows: A− / A+ (intro-fontsize.js). Larger text sits in a framed
   area that scrolls, between the top of the window and the Enter button. */
.abstract-intro-box{position:relative}
.intro-fs{position:absolute;top:12px;right:14px;z-index:2;display:flex;gap:6px}
.intro-fs-btn{appearance:none;min-width:36px;height:28px;padding:0 7px;border:1px solid rgba(240,238,234,.38);border-radius:6px;background:rgba(10,9,9,.35);color:#f0eeea;font:12px/1 Arial,sans-serif;letter-spacing:.04em;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .25s ease,border-color .25s ease}
.intro-fs-btn:focus-visible{outline:none;border-color:rgba(240,238,234,.8)}
.intro-fs-btn:disabled{opacity:.3;cursor:default}
.intro-scroll{display:contents}
.abstract-intro-box h2{padding-right:88px}
html body .abstract-intro-box.is-large{display:flex !important;flex-direction:column !important;max-height:calc(100svh - 28px) !important;min-height:0 !important;overflow:hidden !important;padding-top:48px !important}
html body .abstract-intro-box.is-large .intro-scroll{display:block;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;border:1px solid rgba(240,238,234,.18);border-radius:10px;padding:14px 16px 18px;margin:0 -6px;background:rgba(255,255,255,.015)}
html body .abstract-intro-box.is-large h2{padding-right:0}
html body .abstract-intro-box.is-large .intro-scroll p{flex:none !important;max-height:none !important;overflow:visible !important;-webkit-mask-image:none !important;mask-image:none !important;padding-bottom:0 !important}
html body .abstract-intro-box.is-large .abstract-intro-actions{flex:0 0 auto !important;margin-top:12px !important}
@media (max-width:700px){
  .intro-fs{top:10px;right:10px}
  .intro-fs-btn{min-width:40px;height:30px;font-size:13px}
  .abstract-intro-box h2{padding-right:96px}
  html body .abstract-intro-box.is-large{padding-top:50px !important}
}