/* Curated visual styles are independent of the layout experiments in
   design-concepts.css. Default keeps the existing Averia Serif Libre type;
   its only style-specific treatment is the shared editorial accent palette. */

body:not([data-site-style]),
body[data-site-style="neue-york"],
body[data-site-style="neue-montreal"],
body[data-site-style="neue-montreal-regular"],
body[data-site-style="neue-montreal-book"],
body[data-site-style="itc-garamond"],
body[data-site-style="geist"],
body[data-site-style="agrandir"] {
  --neon-spotify: #ff008a;
  --neon-apple-music: #fa233b;
  --neon-bluetooth: #3298ff;
  --neon-wifi: #ffb800;
}

body[data-site-style="object-neon"] {
  /* Headline, body, and nav faces are applied by type-controls.js so the live
     family and weight controls accurately reflect the selected style. Labels
     are not one of those editable groups, so their face is set here. */
  --label-font: "Sprout Pack Face 0677", Arial, sans-serif;
  --neon-spotify: #00f5a0;
  --neon-apple-music: #ff2d6f;
  --neon-bluetooth: #c81dff;
  --neon-wifi: #ff9700;
}

body[data-site-style="object-neon"] .device-status,
body[data-site-style="object-neon"] .type-picker-title,
body[data-site-style="object-neon"] .type-picker-target legend {
  font-weight: 400;
}

.neon-word {
  color: inherit;
}

body:not([data-site-style]) .neon-spotify,
body[data-site-style="object-neon"] .neon-spotify,
body[data-site-style="neue-york"] .neon-spotify,
body[data-site-style="neue-montreal"] .neon-spotify,
body[data-site-style="neue-montreal-regular"] .neon-spotify,
body[data-site-style="neue-montreal-book"] .neon-spotify,
body[data-site-style="itc-garamond"] .neon-spotify,
body[data-site-style="geist"] .neon-spotify,
body[data-site-style="agrandir"] .neon-spotify {
  color: var(--neon-spotify);
}

body:not([data-site-style]) .neon-apple-music,
body[data-site-style="object-neon"] .neon-apple-music,
body[data-site-style="neue-york"] .neon-apple-music,
body[data-site-style="neue-montreal"] .neon-apple-music,
body[data-site-style="neue-montreal-regular"] .neon-apple-music,
body[data-site-style="neue-montreal-book"] .neon-apple-music,
body[data-site-style="itc-garamond"] .neon-apple-music,
body[data-site-style="geist"] .neon-apple-music,
body[data-site-style="agrandir"] .neon-apple-music {
  color: var(--neon-apple-music);
}

body:not([data-site-style]) .neon-bluetooth,
body[data-site-style="object-neon"] .neon-bluetooth,
body[data-site-style="neue-york"] .neon-bluetooth,
body[data-site-style="neue-montreal"] .neon-bluetooth,
body[data-site-style="neue-montreal-regular"] .neon-bluetooth,
body[data-site-style="neue-montreal-book"] .neon-bluetooth,
body[data-site-style="itc-garamond"] .neon-bluetooth,
body[data-site-style="geist"] .neon-bluetooth,
body[data-site-style="agrandir"] .neon-bluetooth {
  color: var(--neon-bluetooth);
}

body:not([data-site-style]) .neon-wifi,
body[data-site-style="object-neon"] .neon-wifi,
body[data-site-style="neue-york"] .neon-wifi,
body[data-site-style="neue-montreal"] .neon-wifi,
body[data-site-style="neue-montreal-regular"] .neon-wifi,
body[data-site-style="neue-montreal-book"] .neon-wifi,
body[data-site-style="itc-garamond"] .neon-wifi,
body[data-site-style="geist"] .neon-wifi,
body[data-site-style="agrandir"] .neon-wifi {
  color: var(--neon-wifi);
}

/* Neue Montreal and Geist styles share the feature-list intro. The prose remains the
   source/default and this list is revealed only when a matching style and its
   independent studio toggle are active. */
.intro-feature-list,
.intro-feature-footnote {
  display: none;
}

body:is([data-site-style="neue-montreal"], [data-site-style="neue-montreal-regular"], [data-site-style="neue-montreal-book"], [data-site-style="geist"])[data-feature-list-intro]
  .story-copy-after {
  display: flex;
  flex-direction: column;
}

body:is([data-site-style="neue-montreal"], [data-site-style="neue-montreal-regular"], [data-site-style="neue-montreal-book"], [data-site-style="geist"])[data-feature-list-intro]
  .story-copy-after .intro-prose {
  display: none;
}

/* In the standard hero, the feature list belongs visually to the iPod rather
   than to the following editorial copy, so it uses the compact object-to-label
   gap instead of .story-copy-after's normal 64px section rhythm. */
body:not([data-site-concept="board-reveal"]):is([data-site-style="neue-montreal"], [data-site-style="neue-montreal-regular"], [data-site-style="neue-montreal-book"], [data-site-style="geist"])[data-feature-list-intro]
  .story-copy-after {
  margin-top: calc(
    var(--component-feature-intro-gap) + var(--model-intro-extra-gap)
  );
}

/* The full-size hardware carrier stays 621px tall while the Mini case is only
   545.7494px tall. Pull the list through that reserved empty space so its
   visible gap is still 24px from the Mini itself, not 24px from the carrier. */
body:not([data-site-concept="board-reveal"]):not([data-multiple-ipods]):is([data-site-style="neue-montreal"], [data-site-style="neue-montreal-regular"], [data-site-style="neue-montreal-book"], [data-site-style="geist"])[data-feature-list-intro]
  .story-sticky:has(.ipod[data-model="mini"])
  .story-copy-after {
  margin-top: calc(
    var(--component-feature-intro-gap) - var(--device-height) + (545.7494px * var(--device-scale))
  );
}

body:is([data-site-style="neue-montreal"], [data-site-style="neue-montreal-regular"], [data-site-style="neue-montreal-book"], [data-site-style="geist"])[data-feature-list-intro]
  .intro-feature-list {
  display: grid;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 0;
  gap: 0.08em;
  overflow: visible;
  list-style: none;
  font-family: var(--hero-list-font);
  font-size: var(--hero-list-size);
  font-style: var(--hero-list-style);
  font-weight: var(--hero-list-weight);
  font-synthesis: none;
  line-height: 111%;
  letter-spacing: var(--hero-list-letter-spacing);
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body:is([data-site-style="neue-montreal"], [data-site-style="neue-montreal-regular"], [data-site-style="neue-montreal-book"], [data-site-style="geist"])[data-feature-list-intro]
  .intro-feature-footnote {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: auto auto 0;
  padding-top: 24px;
  color: rgba(0, 0, 0, 0.58);
  font-family: var(--body-font);
  font-size: 14px;
  font-weight: var(--body-weight);
  line-height: 1.4;
  text-align: left;
}

body.dark-mode:is([data-site-style="neue-montreal"], [data-site-style="neue-montreal-regular"], [data-site-style="neue-montreal-book"], [data-site-style="geist"])[data-feature-list-intro]
  .intro-feature-footnote {
  color: rgba(255, 255, 255, 0.58);
}

/* The list is display copy, so the following paragraph should use the same
   compact rhythm as adjacent paragraphs rather than the hero's 64px section
   break. Keep the larger break for the original two-paragraph intro. */
body:is([data-site-style="neue-montreal"], [data-site-style="neue-montreal-regular"], [data-site-style="neue-montreal-book"], [data-site-style="geist"])[data-feature-list-intro]
  .story-sticky {
  padding-bottom: 24px;
}

/* Once the board and iPod share a row, restore the full section break beneath
   both columns. The stacked layout keeps the tighter list-to-copy rhythm. */
@media (min-width: 840px) {
  body[data-site-concept="board-reveal"]:is([data-site-style="neue-montreal"], [data-site-style="neue-montreal-regular"], [data-site-style="neue-montreal-book"], [data-site-style="geist"])[data-feature-list-intro]
    .story-sticky {
    padding-bottom: 64px;
  }

  body[data-site-concept="board-reveal"]:is([data-site-style="neue-montreal"], [data-site-style="neue-montreal-regular"], [data-site-style="neue-montreal-book"], [data-site-style="geist"])[data-feature-list-intro]
    .story-copy-after {
    align-self: stretch;
    justify-content: center;
    margin-top: 0;
  }

  /* The footnote remains pinned to the bottom of the hardware column, but is
     taken out of flex flow so the six feature rows centre on the iPod itself. */
  body[data-site-concept="board-reveal"]:is([data-site-style="neue-montreal"], [data-site-style="neue-montreal-regular"], [data-site-style="neue-montreal-book"], [data-site-style="geist"])[data-feature-list-intro]
    .intro-feature-list {
    margin-block: 0;
  }

  body[data-site-concept="board-reveal"]:is([data-site-style="neue-montreal"], [data-site-style="neue-montreal-regular"], [data-site-style="neue-montreal-book"], [data-site-style="geist"])[data-feature-list-intro]
    .intro-feature-footnote {
    position: absolute;
    inset-inline: var(--model-intro-extra-gap) 0;
    bottom: 0;
    width: auto;
    margin: 0;
  }
}

body[data-site-concept="board-reveal"]
  .intro-feature-list {
  margin-inline: 0;
}

.intro-feature-list li {
  position: relative;
  box-sizing: border-box;
  width: fit-content;
  overflow: visible;
  white-space: nowrap;
  filter: none;
  text-shadow: none;
}

.intro-feature-bluetooth { color: #10a8f5; }
.intro-feature-wifi { color: #ff9700; }
.intro-feature-dac { color: #00bd52; }
.intro-feature-storage { color: #ff1117; }
.intro-feature-usb { color: #f00091; }
.intro-feature-apps { color: #9e00f5; }

.intro-storage-compact {
  display: none;
}

@media (max-width: 640px) {
  body:is([data-site-style="neue-montreal"], [data-site-style="neue-montreal-regular"], [data-site-style="neue-montreal-book"], [data-site-style="geist"])[data-feature-list-intro]
    .intro-feature-list {
    width: 100%;
  }

  .intro-feature-list li {
    white-space: normal;
  }

  .intro-storage-full {
    display: none;
  }

  .intro-storage-compact {
    display: inline;
  }
}

/* Below the two-column breakpoint the board-reveal study uses the same
   stacked hardware composition as the original layout. Give the feature list
   an explicit 24px viewport gutter and restore the compact object-to-copy gap
   that the desktop board column otherwise overrides. */
@media (max-width: 839px) {
  body:is([data-site-style="neue-montreal"], [data-site-style="neue-montreal-regular"], [data-site-style="neue-montreal-book"], [data-site-style="geist"])[data-feature-list-intro]
    .story-copy-after {
    margin-top: calc(
      var(--component-feature-intro-gap) + var(--model-intro-extra-gap)
    );
    padding-inline: 0;
  }

  body:is([data-site-style="neue-montreal"], [data-site-style="neue-montreal-regular"], [data-site-style="neue-montreal-book"], [data-site-style="geist"])[data-feature-list-intro]
    :is(.intro-feature-list, .intro-feature-footnote) {
    width: calc(100% - 2 * var(--section-gutter));
    max-width: 480px;
    margin-inline: auto;
  }

  /* Mini keeps the full-height hardware carrier so switching models never
     shifts layout. Pull that reserved space out of the visible gap. */
  body:not([data-multiple-ipods]):is([data-site-style="neue-montreal"], [data-site-style="neue-montreal-regular"], [data-site-style="neue-montreal-book"], [data-site-style="geist"])[data-feature-list-intro]
    .story-sticky:has(.ipod-stage > .ipod[data-model="mini"])
    .story-copy-after {
    margin-top: calc(
      24px - var(--device-height) + (545.7494px * var(--device-scale))
    );
  }
}

/* Grey gel removes the nav and uses a restrained Garamond/Pangram pairing.
   Typography remains editable after these defaults are applied. */
body[data-site-theme="grey-gel"] {
  --nav-height: 0px;
  --nav-shell-height: 0px;
  --nav-gap: 60px;
  --grey-gel-display-font:
    "Sprout Pack Face 0721",
    "PP Pangram Sans",
    Arial,
    sans-serif;
}

body[data-site-theme="grey-gel"] .site-nav-slot {
  display: none;
}

/* Gel nav is an explicit presentation choice and wins over the Grey gel
   theme's default of removing the standard navigation. Restore the shell
   metrics as well as the slot so the floating-nav calculations stay valid. */
body[data-site-theme="grey-gel"][data-gel-nav] {
  --nav-height: 78px;
  --nav-shell-height: calc(var(--nav-height) + env(safe-area-inset-top));
}

body[data-site-theme="grey-gel"][data-gel-nav] .site-nav-slot {
  display: block;
}

body[data-site-theme="grey-gel"] .hardware-pair {
  margin-top: 60px;
}

body[data-site-theme="grey-gel"][data-feature-list-intro]
  .story-copy-after {
  display: flex;
  flex-direction: column;
}

body[data-site-theme="grey-gel"][data-feature-list-intro]
  .story-copy-after .intro-prose {
  display: none;
}

body[data-site-theme="grey-gel"][data-feature-list-intro]
  .intro-feature-list {
  display: grid;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 0;
  gap: 0.08em;
  overflow: visible;
  list-style: none;
  font-family: var(--grey-gel-display-font);
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  font-synthesis: none;
  line-height: 111%;
  letter-spacing: normal;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body[data-site-theme="grey-gel"][data-feature-list-intro]
  .intro-feature-footnote {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: auto auto 0;
  padding-top: 24px;
  color: rgb(0 0 0 / 0.58);
  font-family: var(--body-font);
  font-size: 14px;
  font-weight: var(--body-weight);
  line-height: 1.4;
  text-align: left;
}

body.dark-mode[data-site-theme="grey-gel"][data-feature-list-intro]
  .intro-feature-footnote {
  color: rgb(255 255 255 / 0.58);
}

body[data-site-theme="grey-gel"]
  .story-copy-after .intro-feature-list li {
  filter: none;
  text-shadow: none;
}

body[data-site-theme="grey-gel"] .sprout-btn.is-gel:not(.gel-feature),
body[data-site-theme="grey-gel"] .sprout-btn.is-gel:not(.gel-feature):hover,
body[data-site-theme="grey-gel"] .sprout-btn.is-gel:not(.gel-feature):active {
  --gel-fill: #d2d2d2 !important;
  --gel-foreground: rgb(0 0 0 / 0.5) !important;
  isolation: isolate;
  overflow: visible;
  border-radius: 200px;
  background: rgb(255 255 255 / 0.01);
  box-shadow: 0 20px 20px color-mix(
    in srgb,
    var(--gel-fill) 30%,
    transparent
  );
  backdrop-filter: blur(28.55px);
  -webkit-backdrop-filter: blur(28.55px);
  color: var(--gel-foreground);
  font-family: var(--grey-gel-display-font);
  font-style: normal;
  font-weight: 700;
}

body[data-site-theme="grey-gel"] .sprout-btn.is-gel:not(.gel-feature)::before,
body[data-site-theme="grey-gel"] .sprout-btn.is-gel:not(.gel-feature)::after,
body[data-site-theme="grey-gel"] .sprout-btn.is-gel:not(.gel-feature):hover::before,
body[data-site-theme="grey-gel"] .sprout-btn.is-gel:not(.gel-feature):hover::after,
body[data-site-theme="grey-gel"] .sprout-btn.is-gel:not(.gel-feature):active::before,
body[data-site-theme="grey-gel"] .sprout-btn.is-gel:not(.gel-feature):active::after {
  content: "";
}

body[data-site-theme="grey-gel"] .sprout-btn.is-gel:not(.gel-feature)::before {
  z-index: 0;
  inset: 2px;
  background:
    linear-gradient(
      180deg,
      #666 1.44%,
      #666 17.79%,
      #fff 100%
    ),
    var(--gel-fill);
  background-blend-mode: overlay, normal;
  filter: blur(2.5px);
  opacity: 1;
}

body[data-site-theme="grey-gel"] .sprout-btn.is-gel:not(.gel-feature)::after {
  z-index: 1;
  top: 6.25px;
  right: 11px;
  bottom: 27.75px;
  left: 11px;
  height: auto;
  background: linear-gradient(
    180deg,
    #fff 0%,
    rgb(255 255 255 / 0) 100%
  );
}

body[data-site-theme="grey-gel"]
  .sprout-btn.is-gel:not(.gel-feature) > span,
body[data-site-theme="grey-gel"]
  .sprout-btn.is-gel:not(.gel-feature):hover > span,
body[data-site-theme="grey-gel"]
  .sprout-btn.is-gel:not(.gel-feature):active > span {
  z-index: 2;
  color: rgb(0 0 0 / 0.5);
}

body[data-site-theme="grey-gel"] .sprout-btn.is-gel:not(.gel-feature):hover {
  --gel-fill: #5171ff !important;
  --gel-foreground: #fff !important;
  box-shadow: 0 20px 20px rgb(81 113 255 / 0.3);
  color: #fff;
  transform: translateY(-1px);
}

body[data-site-theme="grey-gel"] .sprout-btn.is-gel:not(.gel-feature):active {
  --gel-fill: #5171ff !important;
  --gel-foreground: #fff !important;
  box-shadow: 0 20px 20px rgb(81 113 255 / 0.3);
  color: #fff;
  transform: translateY(1px) scale(0.96);
}

body[data-site-theme="grey-gel"]
  .sprout-btn.is-gel:not(.gel-feature):hover > span,
body[data-site-theme="grey-gel"]
  .sprout-btn.is-gel:not(.gel-feature):active > span {
  color: #fff;
}

/* ------------------------------------------------------------------ */
/* Neue Montreal Book intro                                            */
/* ------------------------------------------------------------------ */

/* Every other style opens with the three-line display headline and lets the
   feature list replace the prose below the hardware. Here the prose takes the
   hero slot outright -- same position, same CTA under it -- and the headline
   is not shown at all. The feature list is left exactly as it is, so the page
   still reads prose -> CTA -> hardware -> features. */
.hero-intro-prose {
  display: none;
}

body[data-site-style="neue-montreal-book"] {
  /* One editable size for the intro rather than a nudge to --p1-size: the
     body step is shared with every .story-lede further down the page, and
     those paragraphs are still 28px copy. */
  --intro-prose-size: 48px;
  /* 48px wants a longer line than the 760px measure that carries the 28px
     copy, and the hardware looks undersized against the wider column, so the
     iPod moves with it. Both are existing single knobs -- --ipod-width drives
     every other device dimension through --device-scale. */
  --section-width: 960px;
  /* --copy-width is declared on :root as `var(--section-width)`, and custom
     property substitution resolves where the property is declared, not where
     it is used -- the inherited value is already 760px by the time this rule
     is read. Both have to move. */
  --copy-width: 960px;
}

body[data-site-style="neue-montreal-book"] .story-sticky {
  --ipod-width: min(480px, calc(100vw - 32px));
}

body[data-site-style="neue-montreal-book"] .story-copy-hero h1 {
  display: none;
}

body[data-site-style="neue-montreal-book"] .story-copy-hero .hero-intro-prose {
  display: block;
  /* Ranged left against the copy column's own edge. .story-lede is a 480px
     block centred by `margin: 0.75em auto 0`, which at this size reads as a
     centred column of three-word lines. */
  max-width: none;
  margin-inline: 0;
  text-align: left;
  /* The site has exactly one responsive type rule: hero-responsive.mjs eases
     --hero-responsive-scale from 1 at 700px down to 0.64 at 320px. It skips
     headlines with no client rects, so hiding the h1 leaves that value as the
     plain viewport curve -- and borrowing it puts the intro on the same ramp
     as the CTA underneath instead of adding a second breakpoint ladder. */
  font-size: calc(var(--intro-prose-size) * var(--hero-responsive-scale, 1));
  /* Tighter than the 1.3 body step: at this size it is display type. */
  line-height: 1.12;
}

body[data-site-style="neue-montreal-book"]
  .story-copy-hero .hero-intro-prose:first-of-type {
  margin-top: 0;
}

/* The CTA follows the copy to the left edge. It was centred to sit on the
   headline's axis, and this style has no headline. */
body[data-site-style="neue-montreal-book"] .story-copy-hero .row {
  justify-content: flex-start;
}