/* The theme's web font (Neue Haas Grotesk Display 65 Medium), for visitors who don't have Neue Haas
     installed. Path is relative to the theme's live-on-earth-globe/ folder. */
  @font-face {
    font-family: sg; font-display: swap;
    src: url("../t/sg.woff2") format("woff2"), url("../t/sg.woff") format("woff");
  }
  /* Colours taken from the MLD007 gatefold */
  :root {
    --green: #4E833F;      /* panels */
    --blue: #468FAA;       /* map frame */
    --cream: #F3F0B4;      /* type */
    --yellow: #F7E600;     /* routes + recording cities */
    --aqua: #A8D5CF;       /* water */
    /* Menu bar and track block: at most 1200px wide, centred (the globe still fills the screen). */
    --edge: max(16px, calc((100vw - 1200px) / 2));
    /* Neue Haas Grotesk when installed; otherwise Helvetica Neue, its direct descendant. */
    --font: "Neue Haas Grotesk Text Pro", "Neue Haas Grotesk Text", "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk Display", "Neue Haas Grotesk", "NHaas Grotesk TX Pro", "NHaasGroteskTXPro-55Rg", "Neue Haas Unica Pro", "Neue Haas Unica", sg, "Helvetica Neue", Helvetica, sans-serif;
  }
  html, body { margin: 0; height: 100%; overflow: hidden; background: #1E8C3C; }
  /* The back cover artwork from the gatefold (green field with a teal glow). */
  .bg {
    position: fixed; inset: 0;
    background: #2F8E45;
  }
  /* 100% of the visible viewport, not 100vh: iPhone Safari's 100vh is the height with its toolbars hidden,
     which stretched the map layers out of line with the panels. */
  canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
  #overlay { pointer-events: none; }
  #globe { cursor: grab; touch-action: none; }
  #globe.over-city { cursor: pointer; }
  #globe.dragging { cursor: grabbing; }

  /* Print feel: weight 400 with a hairline stroke and a whisper of ink spread. */
  .print { -webkit-text-stroke: .45px currentColor; text-shadow: 0 0 .6px currentColor; }
  /* Safari renders text-stroke heavier than Chrome: a lighter touch there (this test only matches Safari). */
  @supports (font: -apple-system-body) {
    .print { -webkit-text-stroke: .2px currentColor; text-shadow: none; }
  }

  /* Shared panel look: solid green with the gatefold's faint blue curves. */
  .site-bar, .sides {
    box-shadow: 0 0 0 0.75px #000;   /* very fine black outline */
    background:
      repeating-radial-gradient(ellipse 140% 160% at 50% -60%, transparent 0 34px, rgba(70, 143, 170, .55) 34px 35.5px),
      var(--green);
  }

  /* Site menu: a rounded bar across the top with the Mildlife logo on the left. */
  .site-bar {
    position: fixed; top: 16px; left: var(--edge); right: var(--edge); z-index: 2;
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    padding: 12px 22px; border-radius: 15px;
    font: 400 11px var(--font); letter-spacing: .02em; text-transform: uppercase;
  }
  .site-logo {
    display: block; flex: none; width: 150px; aspect-ratio: 626 / 138;
    /* The logo's lead-in/out lines sit at 52/138 of its height; shift down so they're centred. */
    transform: translateY(12.3%);
    background: var(--cream);
    -webkit-mask: url("../img/mildlife-logo-8ec7c3.png") center / contain no-repeat;
            mask: url("../img/mildlife-logo-8ec7c3.png") center / contain no-repeat;
  }
  .site-logo:hover { background: var(--yellow); }
  .site-menu { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 26px; margin: 0; padding: 0; list-style: none; }
  .site-menu a { color: var(--aqua); text-decoration: none; }
  .site-menu a:hover, .site-menu a:focus-visible { color: var(--yellow); outline: none; }

  /* Track listing: one solid block with a column per side (A–D), like the inside gatefold. */
  .sides {
    position: fixed; left: var(--edge); right: var(--edge); bottom: 16px;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 30px;
    padding: 12px 22px 14px; border-radius: 15px;
    color: var(--aqua); font: 400 11px var(--font); letter-spacing: .02em; text-transform: uppercase;
  }
  .side-letter { display: block; width: 34px; height: 38px; margin-bottom: 10px; overflow: visible; }
  .side-letter text {
    font: 500 38px var(--font); fill: none; stroke: var(--yellow); stroke-width: 2.4;
    stroke-dasharray: 0 4.6; stroke-linecap: round; stroke-linejoin: round;
  }
  .track {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    padding: 7px 0; cursor: pointer;   /* equal space above and below, between the dotted rules */
  }
  .track:hover, .track:focus-visible { color: var(--cream); outline: none; }
  .track .place { text-align: right; white-space: nowrap; }
  .tracks { display: contents; }
  .scroll-track {
    display: none; position: absolute; right: 12px; width: 6px; pointer-events: none;
    background: radial-gradient(circle, rgba(243, 240, 180, .45) 1.1px, transparent 1.5px) center top / 6px 5.5px repeat-y;
  }
  .scroll-dot { position: absolute; left: -1px; top: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); }
  .list-fade {
    display: none; position: fixed; height: 34px; pointer-events: none; transition: opacity .25s;
    background: linear-gradient(to bottom, rgba(78, 131, 63, 0), var(--green) 85%);
  }
  .list-fade.hidden { opacity: 0; }
  .player { order: 1; }    /* desktop grid: songs, then the player, then the release line */
  .release { order: 2; }
  /* Bonus songs: a line under the four columns, on the same grid. */
  .bonus { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 30px; margin-top: 8px; }
  /* Same top padding as a track row, so the label sits on the first line of "15. THE MAGNIFICENT…". */
  .bonus-head { display: flex; align-items: flex-start; gap: 4px; color: var(--cream); padding-top: 9px; }
  .bonus-head .side-letter { margin: -13px 0 0; flex: none; }
  .track.playing { color: var(--yellow); }

  /* Player bar along the bottom of the track block. */
  /* Player: a yellow box inside the green block, styled like it (curves, fine outline, rounded). */
  .player {
    grid-column: 1 / -1; display: flex; align-items: center; gap: 14px;
    margin-top: 14px; padding: 10px 16px 10px 10px; border-radius: 11px;
    color: #000; box-shadow: 0 0 0 0.75px #000;
    background:
      repeating-radial-gradient(ellipse 140% 160% at 50% -60%, transparent 0 34px, rgba(78, 131, 63, .28) 34px 35.5px),
      var(--yellow);
  }
  .player-buttons { display: flex; align-items: center; gap: 8px; flex: none; }
  .pbtn {
    appearance: none; -webkit-appearance: none; margin: 0; padding: 0; border: 0; font: inherit;
    width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
    background: transparent; color: var(--cream); box-shadow: inset 0 0 0 1.4px currentColor;
  }
  .pbtn svg { width: 12px; height: 12px; fill: currentColor; display: block; }
  .pbtn { color: #000; }
  .pbtn:hover { color: var(--green); }
  .pbtn.play { width: 38px; height: 38px; background: #000; color: var(--yellow); box-shadow: none; }
  .pbtn.play svg { width: 14px; height: 14px; }
  .pbtn.play:hover { background: var(--green); color: var(--yellow); }
  .pbtn:focus-visible { outline: 1.5px solid #000; outline-offset: 3px; }
  .pbtn .i-pause { display: none; }
  .player.is-playing .pbtn .i-play { display: none; }
  .player.is-playing .pbtn .i-pause { display: block; }
  .now { flex: 0 1 auto; min-width: 0; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34%; }
  .time { flex: none; font-variant-numeric: tabular-nums; color: #000; min-width: 34px; }
  .time.total { text-align: right; }
  /* Progress: a dotted line that fills in yellow. */
  .progress { position: relative; flex: 1 1 auto; height: 18px; cursor: pointer; touch-action: none; }
  .progress::before, .progress .fill {
    content: ""; position: absolute; left: 0; top: 50%; height: 4px; transform: translateY(-50%);
    background: radial-gradient(circle, currentColor 1.3px, transparent 1.7px) left center / 5.5px 4px repeat-x;
  }
  .progress::before { right: 0; color: rgba(0, 0, 0, .3); }
  .progress .fill { width: 0; color: #000; }
  .progress .knob {
    position: absolute; top: 50%; left: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px;
    border-radius: 50%; background: #000;
  }
  /* Release line under the player, with a buy link. */
  .release {
    grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px 20px;
    flex-wrap: wrap; margin-top: 16px; padding: 18px 0 6px; color: var(--cream);
    background: radial-gradient(circle, var(--yellow) 1.1px, transparent 1.5px) left top / 5.5px 3px repeat-x;
  }
  .release-end { display: flex; align-items: center; gap: 14px; margin-left: auto; }
  /* Flicks through the recording cities in English and Chinese, as on the homepage. */
  .city-flick { width: 11em; text-align: right; white-space: nowrap; color: var(--cream); }
  /* Native-script names in their own fonts (Neue Haas has no CJK). */
  .city-flick:lang(zh) { font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif; -webkit-text-stroke: 0; }
  .city-flick:lang(ko) { font-family: "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif; -webkit-text-stroke: 0; }
  .buy {
    display: inline-block; padding: 7px 14px; border-radius: 999px; text-decoration: none;
    background: var(--yellow); color: #000;
  }
  .buy:hover, .buy:focus-visible { background: #000; color: var(--yellow); outline: none; }
  .progress:focus-visible { outline: 1.5px solid #000; outline-offset: 2px; border-radius: 4px; }
  @media (max-width: 760px) {
    .site-bar { top: 10px; left: 10px; right: 10px; border-radius: 12px; padding: 10px 16px; flex-wrap: wrap; row-gap: 10px; justify-content: center; }
    .site-logo { width: 112px; }
    .site-menu { flex: 1 1 100%; justify-content: space-between; gap: 6px 12px; }
    .player { flex-wrap: wrap; gap: 10px 12px; }
    .now { max-width: none; flex: 1 1 0; }
    .progress { order: 5; flex-basis: calc(100% - 100px); }
    .time.total { order: 6; }
    .time.current { order: 4; }
    .side-letter { width: 28px; height: 32px; }
    /* Phones: songs fold into one scrolling column sized to show three songs; player and buy line pinned below. */
    .sides {
      top: auto; left: 10px; right: 10px; bottom: 10px; border-radius: 12px;
      display: flex; flex-direction: column; padding: 4px 14px 12px;
    }
    .tracks {
      display: block; flex: none; height: 172px;   /* side letter + three 39px songs */
      overflow-y: auto; overscroll-behavior: contain;
      scrollbar-width: none; padding-right: 18px;   /* gutter for the dotted scroll track */
    }
    .side { padding-top: 8px; }
    .bonus { display: block; margin-top: 4px; }
    .bonus-head { padding: 12px 0 2px; }
    .release { flex: none; margin-top: 10px; padding: 10px 0 0; }
    .release-text { display: none; }
    .player { flex: none; margin-top: 10px; }
    .tracks::-webkit-scrollbar { display: none; }
    /* Scroll hints: a dotted track with a yellow position dot, and a fade over the bottom of the list. */
    .scroll-track { display: block; }
    .list-fade { display: block; }
  }
  .loading {
    position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
    font: 400 11px var(--font); letter-spacing: .06em; color: var(--cream);
  }