/* =============================================================================
   Ev3u — phone layout
   =============================================================================
   The desktop site is a fixed 1512px stage that is scaled down as one image.
   That keeps every Figma measurement exact, but on a phone it would shrink the
   20px body copy to about 5px. Below 600px the stage therefore stops using the
   desktop composition and this file reflows the same sections, in the same
   order, with the same colours, fonts and shapes.

   The reflow is authored at 390px — the phone-L design — and then scaled by
   --scale (app.js sets it to viewport width / 390). That is what keeps the
   proportions identical on smaller phones: a 320px screen shows the whole
   composition 18% smaller instead of the same paddings and type around
   narrower content, which is what made it feel squashed.

   Tablets are above the breakpoint on purpose: from 601px up the desktop
   version is used.

   Everything here is additive: the desktop rules are untouched, so the two
   layouts cannot drift apart.
   ========================================================================== */

@media (max-width: 600px) {
  :root {
    --page: 20px;
    /* Fallback until app.js measures the bar. */
    --header-h: 72px;
  }

  /* ---------------------------------------------------------------- frame */
  /* The stage keeps the desktop's absolute positioning and centred transform,
     but at the phone-L width and scaled to the screen. Everything inside is
     therefore measured in the 390px design and every object — type, pictures,
     buttons, motifs, gaps — shrinks with the screen instead of staying large
     and squeezing the content. */
  .stage-wrap {
    position: relative;
    /* Orange behind the stage: a phone wider than 390px shows the page colour
       in the margins instead of the black page background. */
    background: var(--surface-page);
  }
  .stage {
    width: 390px;
    min-height: calc(100vh / var(--scale));
    transform-origin: top center;
    transform: translateX(-50%) scale(var(--scale));
    /* Rotated motifs can poke a pixel or two past the edge; clip only
       horizontally so nothing is cut off vertically. */
    overflow-x: clip;
    /* The header bar is fixed and unscaled, so its measured height is turned
       into design pixels here; the 40px of air is converted the same way. */
    padding-top: calc((var(--header-h) + 40px) / var(--scale));
  }

  /* --------------------------------------------------------------- header */
  /* One bar: logo on the left, burger on the right. The six labels live in a
     panel that drops down under the bar, so the header stays compact instead
     of eating a third of the screen. The compact "scrolled" variant is
     desktop-only (see initHeaderScroll). */
  .site-header {
    position: fixed;
    left: 0;
    top: 0;
    transform: none;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    pointer-events: auto;
  }
  .site-header__bg {
    position: absolute;
    inset: 0;
    height: auto;
    z-index: 1;
    background: var(--surface-page);
    box-shadow: 0 8px 22px rgba(60, 31, 0, .16);
  }
  /* An open menu dims the page behind it. The overlay is fixed, so it covers
     the whole viewport even though the header is only one bar tall, and it lets
     clicks through: a tap anywhere on it closes the menu through the normal
     outside-click handler. */
  .site-header.menu-open::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: rgba(43, 22, 0, .45);
    animation: menuDim .22s ease both;
  }
  @keyframes menuDim {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  /* The bar is a positioned element, so the logo and burger need their own
     stacking level to stay above the background. */
  .site-header__logo {
    position: relative;
    z-index: 3;
    /* The desktop rule parks the logo at left:660px. A relative element would
       keep that as an offset, so the layout offsets are cleared. */
    left: auto;
    top: auto;
    width: 98px;
    height: 52px;
  }
  /* The burger only exists on a phone; desktop hides it. */
  .site-header__burger {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    margin-right: -6px;
  }
  .site-header__burger span {
    display: block;
    width: 26px;
    height: 3px;
    border-radius: 2px;
    background: #000;
    transition: transform .25s ease, opacity .2s ease;
  }
  .site-header.menu-open .site-header__burger span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
  .site-header.menu-open .site-header__burger span:nth-child(2) { opacity: 0; }
  .site-header.menu-open .site-header__burger span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

  /* The navigation drops out of the bar; on desktop it is part of it. */
  .site-header__menu {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 2;
    display: none;
    flex-direction: column;
    align-items: stretch;
    width: auto;
    height: auto;
    gap: 0;
    padding: 4px 18px 14px;
    background: var(--surface-page);
    box-shadow: 0 18px 28px rgba(60, 31, 0, .18);
  }
  .site-header.menu-open .site-header__menu { display: flex; }
  /* The desktop header writes a designed width on every label. */
  .menu-btn {
    width: auto !important;
    height: auto;
    min-height: 46px;
    justify-content: flex-start;
    padding: 11px 4px;
    font-size: 15px;
    line-height: 1.5;
    border-top: 1px solid rgba(60, 31, 0, .14);
    text-align: left;
  }
  .menu-btn__inner { max-width: 100%; }
  .site-header.is-scrolled .site-header__logo { left: auto; top: auto; width: 98px; height: 52px; }
  .site-header.is-scrolled .site-header__menu { top: 100%; width: auto; }
  .site-header.is-scrolled .site-header__bg {
    height: auto;
    background: var(--surface-page);
    box-shadow: 0 8px 22px rgba(60, 31, 0, .16);
  }

  /* -------------------------------------------------------------- doodles */
  /* The desktop composition is drawn on a 1512px canvas. Scaling that whole
     canvas down made every motif tiny, so on a phone the motifs are placed
     individually instead: a few of them, along the outer edges, large enough
     to read and clear of the text. The rest are hidden — a phone does not have
     room for the full set. */
  .doodles {
    inset: 0;
    width: auto;
    height: 100%;
    z-index: 0;
  }
  .hero .doodles > *,
  .about .doodles > *,
  .suggestion-cta .doodles > * { display: none !important; }

  /* Hero: a faded note and faded heart in the top corners, a big faded heart on
     the left of the portrait and a solid one on its right, a large note under
     the button on the left and a faded heart on the right, plus a small moved
     note and the black heart in the two bottom corners. Every motif keeps at
     least 12px of air from the left and right page borders, so nothing is ever
     cropped by the screen edge. */
  .hero .doodles > :nth-child(1) {
    display: block !important;
    left: 17px !important; top: auto !important; bottom: 28px !important; width: 54px !important; height: 58px !important;
    --tilt: 4deg !important;
  }
  .hero .doodles > :nth-child(2) {
    display: block !important;
    left: auto !important; right: 17px !important; top: -2px !important; width: 58px !important; height: 54px !important;
    --tilt: -5deg !important;
  }
  /* The faded top-right heart is deleted: the solid heart beside the portrait
     now sits in that corner, and the two overlapped. */
  .hero .doodles > :nth-child(2) { display: none !important; }
  /* The heart beside the portrait: bigger, and faded like the background
     instances of the design. */
  .hero .doodles > :nth-child(3) {
    display: block !important;
    left: 21px !important; top: 56px !important; width: 136px !important; height: 122px !important;
    filter: blur(3.5px) !important;
    opacity: .28 !important;
    --tilt: 3deg !important;
  }
  /* The faded instance is shown as a solid motif here, under the button. */
  .hero .doodles > :nth-child(4) {
    display: block !important;
    left: auto !important; right: 17px !important; top: auto !important; bottom: 96px !important; width: 96px !important; height: 88px !important;
    filter: blur(3.5px) !important;
    opacity: .28 !important;
    --tilt: -4deg !important;
  }
  .hero .doodles > :nth-child(5) {
    display: block !important;
    left: 17px !important; top: -14px !important; width: 56px !important; height: 64px !important;
    --tilt: 6deg !important;
  }
  .hero .doodles > :nth-child(6) {
    display: block !important;
    left: 17px !important; top: auto !important; bottom: 168px !important; width: 86px !important; height: 100px !important;
    --tilt: -3deg !important;
  }
  /* A solid heart beside the portrait, level with the top of the round frame —
     the only place where the circle has curved away from the page edge enough
     to leave room for a motif that touches neither. */
  .hero .doodles > :nth-child(7) {
    display: block !important;
    left: auto !important; right: 28px !important; top: -20px !important; bottom: auto !important; width: 74px !important; height: 68px !important;
    --tilt: 5deg !important;
  }
  /* The bottom-right heart: the largest of the faded instances, and the only
     one that reaches the bottom corner of the section. */
  /* The bottom-right heart of the hero: the largest of the faded instances.
     It sits beside the subscriber count, below the solid heart. */
  .hero .doodles > :nth-child(8) {
    display: block !important;
    left: auto !important; right: 17px !important; top: 228px !important; bottom: auto !important; width: 104px !important; height: 78px !important;
    filter: blur(3.5px) !important;
    opacity: .3 !important;
    --tilt: -6deg !important;
  }
  /* About: one heart over the top-right of the note — bigger than before and
     faded, so it reads as a background motif. */
  .about .doodles > :nth-child(1) {
    display: block !important;
    left: auto !important; right: 17px !important; top: -52px !important; width: 108px !important; height: 88px !important;
    filter: blur(3.5px) !important;
    opacity: .3 !important;
    --tilt: -3deg !important;
  }
  .about .doodles > :nth-child(2) { display: none !important; }
  /* Suggestion CTA: one heart and one note flanking the heading, and a heart, a
     note and the black heart along the bottom. Nothing sits above the heading
     any more, so the section starts right below the About block. */
  .suggestion-cta .doodles > :nth-child(1) {
    display: block !important;
    left: 17px !important; top: 122px !important; width: 60px !important; height: 56px !important;
    --tilt: 4deg !important;
  }
  .suggestion-cta .doodles > :nth-child(2) {
    display: block !important;
    left: 146px !important; top: auto !important; bottom: -18px !important; width: 92px !important; height: 104px !important;
    --tilt: -4deg !important;
  }
  .suggestion-cta .doodles > :nth-child(3) {
    display: block !important;
    left: auto !important; right: 17px !important; top: 130px !important; width: 54px !important; height: 62px !important;
    --tilt: 6deg !important;
  }
  /* The two motifs that used to sit above the heading are deleted. */
  .suggestion-cta .doodles > :nth-child(4),
  .suggestion-cta .doodles > :nth-child(6) { display: none !important; }
  .suggestion-cta .doodles > :nth-child(5) {
    display: block !important;
    left: 17px !important; top: auto !important; bottom: 14px !important; width: 82px !important; height: 70px !important;
    --tilt: 3deg !important;
  }
  .suggestion-cta .doodles > :nth-child(8) {
    display: block !important;
    left: auto !important; right: 17px !important; top: auto !important; bottom: 14px !important; width: 88px !important; height: 68px !important;
    --tilt: 5deg !important;
  }
  /* Suggestion box: the two notes sit beside the heading's first line, a little
     further in from the screen edges than before. */
  .suggestionbox .doodles > :nth-child(1) {
    left: 17px !important; top: 10px !important; width: 54px !important; height: 60px !important;
    --tilt: 3deg !important;
  }
  .suggestionbox .doodles > :nth-child(2) {
    left: auto !important; right: 17px !important; top: 10px !important; width: 54px !important; height: 60px !important;
    --tilt: -3deg !important;
  }

  /* Content must paint above the doodle layer (the motifs are positioned, the
     reflowed content is not) and above the paper cards. `left/top:auto`
     discards the desktop absolute coordinates, so making these relative only
     changes the paint order, never the position. */
  .hero__pfp, .hero__count, .hero__count-label, .hero__cta,
  .about__title, .about__collections,
  .suggestion-cta__title, .suggestion-cta__btn,
  .suggestionbox__title, .suggestions-title, .suggestions-list {
    position: relative;
    left: auto;
    top: auto;
    z-index: 2;
  }

  /* ------------------------------------------------------------ up button */
  /* 1.5x its old 54px, and lifted clear of the pill messages at the bottom of
     the screen. A message starts 46px up and grows upwards: one line ends
     84px up, the longest translated error ends about 119px up, so the arrow
     bottom sits above that and never covers a message. The size follows the
     stage scale (it is a graphic, not text), while the 128px lift stays fixed
     so it keeps clearing the pill on the smallest phones. */
  .up-btn {
    right: calc(16px * var(--scale));
    /* 150px clears the tallest message measured on a 320px screen (three
       wrapped lines ending 120px up) with 30px to spare, and still clears a
       four-line message. */
    bottom: 150px;
    width: calc(81px * var(--scale));
    height: calc(81px * var(--scale));
  }

  /* ------------------------------------------------------------------ home */
  /* The home sections stack in flow, with a clear band of orange between them
     so they read as separate blocks instead of one long column. */
  .home { height: auto; }

  .hero {
    position: relative;
    left: 0;
    top: 0;
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 20px 80px;
  }
  .hero__pfp {
    position: static;
    width: 208px;
    height: 208px;
    margin: 0 auto;
  }
  .hero__count {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    margin-top: 20px;
    font-size: 92px;
    line-height: 1;
  }
  .hero__count-label {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    margin-top: 4px;
    font-size: 24px;
  }
  .hero__cta {
    position: static;
    left: auto;
    top: auto;
    margin-top: 24px;
  }

  /* Latest covers: the artwork IS the screen. The panel spans the full width
     (the 16px side padding is dropped so it can reach both edges) and a full
     screen height, the picture fills it (object-fit:cover from the desktop
     rule) and the black frame is removed. */
  .latest-block {
    position: relative;
    left: 0;
    top: 0;
    width: auto;
    height: auto;
    /* The bottom padding is the gap to the next block; the copy sits below the
       panel by the same amount plus its own inset. */
    padding: 0 0 90px;
  }
  .latest-block__inner {
    position: relative;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    /* The panel is one screen tall in *visible* pixels, so the viewport unit
       is divided by the stage scale: inside the scaled stage 100svh would come
       out shorter than the screen. */
    height: calc(100vh / var(--scale)) !important;
    /* The small-viewport unit keeps the panel a real screenful once the phone
       browser collapses its toolbars; browsers without it keep 100vh. */
    height: calc(100svh / var(--scale)) !important;
    margin: 0;
    aspect-ratio: auto;
    border-width: 0;
  }
  /* Inset from every edge of the panel, with the title / subtitle / link order
     of the desktop layout kept intact. */
  .latest-block__text {
    left: 26px !important;
    right: 26px;
    top: auto !important;
    /* The block keeps 90px of bottom padding for the gap to the next section,
       so the inset is measured from the panel, not from the block. */
    bottom: 124px;
    max-width: none;
  }
  .latest-block__title { font-size: 30px; line-height: 1.1; }
  /* The phone zoom (1.18x at the end of the pass, ×1.34 for a letterboxed 4:3
     thumbnail) is composed and written by initPhoneLatestZoom, so no transform
     rule is declared here: a CSS default would only fight it. */
  .latest-block__inner img {
    transform-origin: center center;
    will-change: transform;
    backface-visibility: hidden;
  }
  .latest-block__sub {
    margin-top: 12px;
    font-size: 12px;
    line-height: 1.55;
    letter-spacing: 1.4px;
    white-space: normal;
    max-width: none;
  }
  .latest-block.is-fullscreen .latest-block__sub {
    margin-top: 8px;
    max-width: none;
    -webkit-line-clamp: 3;
  }
  .latest-block__cta,
  .latest-block.is-fullscreen .latest-block__cta {
    margin-top: 14px;
    font-size: 14px;
  }

  .about {
    position: relative;
    left: 0;
    top: 0;
    width: auto;
    height: auto;
    /* The band before the suggestion CTA is split across the two sections, so
       the two halves always add up to the same gap. */
    padding: 4px 20px 42px;
  }
  /* As on desktop, the heading is tilted and its lower edge laps over the top
     of the white note. */
  .about__title {
    position: relative;
    left: auto;
    top: auto;
    margin: 0 0 -6px;
    font-size: 36px;
    transform: rotate(-4deg);
    transform-origin: left center;
    z-index: 4;
  }
  /* The paper note stacks in the flow; the white card keeps its hand-written
     tilt and the dark card stays square behind it. */
  .about__note {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    margin-top: -12px;
    padding: 34px 24px 36px;
  }
  .about__card {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /* The desktop note is tilted 4.46deg inside a straight dark card. The phone
       note is narrower, so the same angle throws the corners further out; 3.2deg
       keeps the dark frame visible on all four sides without spilling. */
    transform: rotate(3.2deg);
  }
  .about__card-back {
    left: 4px;
    top: -3px;
    width: 100%;
    height: 100%;
  }
  /* rel+rel z-index: the white card is positioned and would paint over a
     plain static paragraph. */
  .about__card-text {
    position: relative;
    z-index: 3;
    left: auto;
    top: auto;
    width: auto;
    display: block;
    max-height: none;
    transform: none;
    font-size: 16px;
    line-height: 1.45;
    text-align: left;
    -webkit-line-clamp: unset;
    overflow: visible;
  }
  .about__collections {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    margin-top: 48px;
  }
  .about__collections-title { font-size: 28px; }
  .about__buttons { margin-top: 22px; gap: 14px; }
  /* The category names must stay readable in full, so the labels wrap onto a
     second line instead of being cut off with an ellipsis. */
  .about__buttons .btn {
    width: 100%;
    height: auto;
    min-height: 56px;
    padding: 12px 18px;
    gap: 10px;
    font-size: 15px;
  }
  .about__buttons .btn .btn__label {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    transform: none !important;
    text-align: center;
    line-height: 1.3;
  }

  .suggestion-cta {
    position: relative;
    left: 0;
    top: 0;
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    /* Half of the old band above the heading, and a deep bottom edge so the
       enlarged note under the button clears the footer. */
    padding: 20px 20px 120px;
  }
  .suggestion-cta__title {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    width: auto;
    max-width: 330px;
    font-size: 32px;
    line-height: 1.12;
  }
  .suggestion-cta__btn {
    position: static;
    left: auto;
    top: auto;
    transform: none;
  }

  /* --------------------------------------------------------------- footer */
  /* Column order follows the markup: logo, language toggle, navigation,
     socials, copyright — with a clear band of black between each. */
  .site-footer {
    position: relative;
    margin-top: 48px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 42px 24px 34px;
  }
  .site-footer__logo {
    position: static;
    align-self: flex-start;
    width: 118px;
    height: 66px;
    /* Room around the logo before the language toggle starts. */
    margin: 0 0 44px;
    object-position: left center;
  }
  /* The language toggle sits directly under the logo: EN — globe — UK. */
  .site-footer__langs {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    align-self: flex-start;
    gap: 14px;
    margin: 0 0 32px;
  }
  .footer-lang {
    position: static;
    font-size: 16px;
    letter-spacing: 2px;
    line-height: 1.2;
    text-decoration: none;
  }
  .footer-lang--active { text-decoration: underline; text-underline-offset: 4px; }
  .footer-globe { position: static; width: 22px; height: 22px; }

  /* Two left-aligned columns. "coming soon" stays inside the second column so
     it always sits directly under "Original songs". */
  .site-footer__nav {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 36px;
    width: 100%;
    margin-bottom: 30px;
  }
  .footer-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
  }
  .site-footer__nav a,
  .site-footer__nav button,
  .site-footer__nav span {
    position: static;
    white-space: normal;
    text-align: left;
  }
  .footer-link {
    font-size: 14px;
    letter-spacing: 1.5px;
    line-height: 1.45;
  }
  .footer-soon {
    font-size: 12px;
    letter-spacing: 1.2px;
    line-height: 1.4;
    margin-top: -6px;
  }
  /* Equal visual weight: the YouTube mark is a solid rounded square, so it
     needs a slightly smaller box than the thin TikTok and Discord glyphs. The
     row is centred with the wide gaps of the desktop footer. */
  .site-footer__socials {
    position: static;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 44px;
    width: auto;
    height: auto;
    margin-bottom: 30px;
  }
  .site-footer__socials a { position: static; display: grid; place-items: center; width: auto; height: auto; }
  /* The desktop marks are fixed-size absolute boxes; on a phone each anchor
     shrinks to its own picture so the gaps are the only spacing. */
  .site-footer__socials .s-yt,
  .site-footer__socials .s-tt,
  .site-footer__socials .s-dc { position: static; width: auto; height: auto; }
  .site-footer__socials .s-yt img { width: 30px; height: 30px; }
  .site-footer__socials .s-tt img { width: 26px; height: 30px; }
  .site-footer__socials .s-dc img { width: 34px; height: 26px; }
  /* Full width, so `text-align:center` actually centres the three lines. */
  .site-footer__copyright {
    position: static;
    left: auto;
    top: auto;
    align-self: stretch;
    width: 100%;
    font-size: 12px;
    line-height: 1.6;
    text-align: center;
  }

  /* ---------------------------------------------------------- discography */
  .discography { padding: 0 20px; }
  .discography .search-bar {
    width: 100%;
    height: 56px;
    padding: 0 12px;
    border-radius: 18px;
  }
  .search-bar__category { height: 56px; max-width: 46%; gap: 8px; }
  .search-bar__category-label { font-size: 15px; }
  .search-bar__input {
    height: 56px;
    margin-left: 12px;
    font-size: 15px;
  }
  .search-bar__icon { width: 26px; height: 26px; margin-left: 10px; }
  .discography__grid { margin-top: 26px; padding-bottom: 46px; }

  .grid-2 {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .cover-card {
    width: 100%;
    height: auto;
    aspect-ratio: 546 / 348;
  }
  .cover-card__info { left: 18px; bottom: 16px; right: 14px; }
  .cover-card__info-title { font-size: 22px; }
  .cover-card__info-sub { margin-top: 8px; font-size: 11px; }

  /* ------------------------------------------------------- content pages */
  .page { padding: 0 26px 60px; }
  /* The gallery intro is a short note, not a headline: smaller, and a little
     further in from the edges than the cards. */
  .page__title {
    font-size: 17px;
    line-height: 1.5;
    padding-top: 0 !important;
    margin-top: 4px !important;
  }
  .page__title--display { font-size: 30px; }
  .page__grid { margin-top: 22px; }

  .card {
    width: auto;
    min-height: 0;
    padding: 22px 18px 22px;
    border-radius: 20px;
  }
  .card__title { font-size: 22px; }
  .card__date { font-size: 14px; padding-top: 2px; }
  .card__media {
    margin-top: 16px;
    height: auto;
    aspect-ratio: 546 / 285;
  }
  /* News pictures share one frame, so every post lines up: a single picture
     and each half of a two-picture post are the same box, and the artwork
     fills it (cover) instead of being letterboxed inside it. */
  #news-grid .card__media {
    aspect-ratio: 546 / 285;
    background: #111;
  }
  /* The desktop frame is kept on a phone too: a 7px black stroke on every
     picture and a gap between the two halves of a pair. The card background
     shows through the gap, so it reads as a frame break rather than as a
     black bar. */
  #news-grid .card__media:not(.card__media--split),
  #news-grid .card__media--split .slot { border-width: 7px; }
  /* The pair's own box must not paint the black bed, or the gap between the two
     pictures turns into a black bar. The id-prefixed selector matches the
     specificity of the `#news-grid .card__media` rule above, so the card
     background shows through the gap exactly as it does on desktop. */
  #news-grid .card__media--split {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    background: transparent;
  }
  .card__media--split .slot {
    height: 100%;
    aspect-ratio: auto;
  }
  .card__media--split .slot img { width: 100%; height: 100%; object-fit: cover; }
  .card__media-cta { left: 18px; bottom: 16px; font-size: 15px; }
  .card__body { margin-top: 14px; font-size: 14px; }

  /* The card has no spare band under the action row on a phone. */
  .gallery-card { padding-bottom: 22px; }
  .gallery-card__media {
    margin-top: 16px;
    height: auto;
    aspect-ratio: 4 / 3;
    /* The desktop rule paints a black bed so the shade has something to sit
       on; on a phone that bed flashes as a dark block while the picture is
       still loading. */
    background: transparent;
  }
  /* The mark travels out of the picture on a phone: it sits in the actions row
     beside the like button, where a finger can reach it. */
  .gallery-card__zoom { display: none !important; }
  .gallery-card__zoom-btn {
    display: grid;
    place-items: center;
    width: 40px;
    height: 34px;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
  }
  .gallery-card__zoom-btn svg { width: 34px; height: 34px; }
  /* Zoom and like sit together at the right end of the card's action row. */
  .gallery-card__actions { gap: 16px; align-items: center; }

  /* A phone has no hover, so the hints that appear on hover on desktop are
     shown permanently instead (no dark gradients, just a readable shadow). */
  .gallery-card__zoom,
  .cover-card__info,
  .card__media-cta {
    opacity: 1 !important;
    transform: none !important;
  }
  .cover-card__info-title,
  .cover-card__info-sub,
  .card__media-cta {
    text-shadow: 0 1px 10px rgba(0, 0, 0, .8);
  }

  /* Touch screens have no hover state at all, so the desktop hover effects are
     switched off and each card simply keeps its "hovered" look. */
  .cover-card::after { opacity: 1; }
  .gallery-card__media img,
  .cover-card img { transform: none !important; }
  /* One shade per news post, never two. A two-picture post shows the upper
     (top-down) shade, because that is the one its "next" / "coming soon"
     labels are written on. A single picture shows the lower (bottom-up) shade,
     because that is where its "check this out" line sits — and that one is
     lighter, so the artwork is not darkened twice over. */
  #news-grid .card__media--split .slot::before { opacity: 0 !important; }
  #news-grid .card__media:not(.card__media--split)::after { display: none !important; }
  #news-grid .card__media:not(.card__media--split)::before {
    opacity: 1 !important;
    background: linear-gradient(to top,
      rgba(0, 0, 0, .72) 0%,
      rgba(0, 0, 0, .34) 42%,
      rgba(0, 0, 0, 0) 78%);
  }
  /* The gallery card draws no shade on a phone: its fullscreen button lives in
     the action row, so there is nothing over the artwork to back. */
  .gallery-card__media::before { display: none !important; }
  .like-btn:hover,
  .footer-link:hover,
  .menu-btn:hover { text-decoration: none; }

  .gallery__discord { margin-top: 16px; }
  .gallery__discord img { width: 58px; height: 44px; }

  /* ---------------------------------------------------------- suggestion */
  .suggestionbox { padding: 0 20px 64px; }
  .suggestionbox__title {
    /* Narrow enough that the two centred lines never run under the corner
       motifs. */
    max-width: 262px;
    font-size: 34px;
    /* Two lines, with a little more air between them. */
    line-height: 1.2;
  }
  .form-card {
    margin-top: 22px;
    padding: 24px 18px 22px;
    border-radius: 20px;
  }
  .form-card input,
  .form-card textarea {
    font-size: 15px;
    border-radius: 14px;
  }
  .form-card input { height: 48px; margin-bottom: 14px; padding: 0 14px; }
  .form-card textarea { height: 96px; min-height: 96px; padding: 14px; }
  .form-card__note {
    margin-top: 16px;
    margin-bottom: 54px;
    padding-right: 0;
    font-size: 15px;
    line-height: 1.4;
  }
  .form-card__submit { right: 16px; bottom: 14px; width: 56px; height: 40px; }
  .form-card__submit svg { width: 56px; height: 40px; }

  .suggestions-title { margin-top: 44px; font-size: 30px; line-height: 1.2; }
  .suggestions-list { margin-top: 24px; gap: 14px; }
  .suggestion { padding: 20px 18px; border-radius: 20px; }
  .suggestion__date { font-size: 12px; }
  .suggestion__author { font-size: 12px; }
  .suggestion__meta { gap: 4px 12px; }
  .suggestion__title { margin-top: 10px; font-size: 22px; }
  .suggestion__comment { margin-top: 10px; font-size: 14px; line-height: 1.4; }
  .suggestion__actions {
    position: static;
    margin-top: 16px;
    justify-content: flex-end;
  }
  .like-btn svg { width: 28px; height: 25px; }
  .like-btn__count { font-size: 18px; }

  /* ------------------------------------------------------ original songs */
  .original { padding: 0 20px 104px; }
  /* Same size as the gallery note above the pictures. */
  .original__title { margin-top: 42px; font-size: 17px; line-height: 1.5; }
  .original__btn { margin-top: 28px; }
  .original__note { margin-top: 52px; font-size: 15px; line-height: 1.6; }

  /* ------------------------------------------------------ popups / misc */
  .cat-popup {
    width: 300px;
    max-width: calc(100vw - 16px);
    padding: 26px 16px 14px;
  }
  .cat-popup__option { padding: 11px 0; font-size: 16px; }

  .lightbox { padding: 14px 10px 82px; }
  .lightbox__bar { bottom: 12px; gap: 2px; padding: 5px 6px; }
  .lightbox__btn { min-width: 38px; height: 34px; padding: 0 10px; font-size: 20px; }
  .lightbox__btn--reset { min-width: 0; padding: 0 12px; font-size: 12px; letter-spacing: 1px; }
  .lightbox__value { min-width: 54px; font-size: 13px; letter-spacing: 1px; }

  .toast {
    left: 12px;
    right: 12px;
    /* 30px more clearance under the pill than before, so it reads as a
       floating message instead of sitting on the screen edge. */
    bottom: 46px;
    transform: none;
    padding: 12px 16px;
    font-size: 14px;
    text-align: center;
  }

  /* ------------------------------------------------------- support panel */
  /* Not the full-bleed overlay the console uses: a centred card with a small
     margin, so the panel keeps air around it on a phone. */
  .support-overlay { align-items: center; padding: 18px; }
  .support { padding: 30px 20px 26px; border-radius: 20px; }
  .support__title { font-size: 22px; margin-bottom: 20px; padding-right: 46px; }
  .support__row + .support__row { margin-top: 18px; }
  .support__label { font-size: 14px; line-height: 1.4; margin-bottom: 9px; }
  .support__field { padding: 10px 10px 10px 12px; gap: 10px; border-radius: 12px; }
  .support__address { flex-basis: 100%; font-size: 12px; letter-spacing: .2px; }
  .support__copy { width: 100%; padding: 12px 18px; font-size: 14px; }
  .support__close { right: 12px; top: 10px; width: 40px; height: 40px; }
  .support__close span { width: 22px; height: 3px; }

  /* ---------------------------------------------------- owner console */
  /* The console is a full-bleed sheet on a phone; the support card above is
     not, so this stretching rule must not reach it. */
  #admin-overlay { padding: 0; align-items: stretch; }
  .admin {
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    padding: 22px 16px 40px;
  }
  .admin h2 { font-size: 24px; }
  .admin h3 { font-size: 18px; }
  .admin .row { flex-direction: column; gap: 0; }
  .admin table { font-size: 12px; }
  .admin th, .admin td { padding: 6px 5px; }
  .admin__head { gap: 12px; }
  .admin__grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .admin__card img { height: 110px; }
}