/* DashSystem · dashsystem.co
   One stylesheet for every page (/, /en/, /mentions-legales, /en/legal, /404).
   Shared parts: tokens, base, buttons, masthead, back cover (footer), document pages.
   Home parts: hero + crate, sleeves and discs, catalogue, label, projet, recrutement, contact. */

/* ---------- fonts (self-hosted, variable, latin + latin-ext) ----------
   Mona Sans: the label's voice (all site text). Geist, Inter, Archivo: only inside the
   sleeves, because they are the type of Sphely, Goat IPTV Player / Lyrmake and Flawgy. */
@font-face {
  font-family: "DS Mona";
  src: url("/assets/fonts/mona-sans-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-stretch: 75% 100%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DS Mona";
  src: url("/assets/fonts/mona-sans-latin-ext.woff2") format("woff2");
  font-weight: 400 900;
  font-stretch: 75% 100%;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DS Geist";
  src: url("/assets/fonts/geist-latin.woff2") format("woff2");
  font-weight: 500 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DS Geist";
  src: url("/assets/fonts/geist-latin-ext.woff2") format("woff2");
  font-weight: 500 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DS Inter";
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  font-weight: 600 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DS Inter";
  src: url("/assets/fonts/inter-latin-ext.woff2") format("woff2");
  font-weight: 600 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DS Archivo";
  src: url("/assets/fonts/archivo-latin.woff2") format("woff2");
  font-weight: 600 900;
  font-stretch: 100% 125%;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DS Archivo";
  src: url("/assets/fonts/archivo-latin-ext.woff2") format("woff2");
  font-weight: 600 900;
  font-stretch: 100% 125%;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* palette */
  --board: #c3c7cb;
  --board-2: #b4b8bd;
  --board-3: #a9aeb3;
  --ink: #121314;
  --ink-2: #2b2e31;
  --ink-3: #3e4246;
  --rule: rgba(18, 19, 20, .32);
  --on-ink: #c3c7cb;
  --on-ink-2: #9ea3a8;

  --label: "DS Mona", "Helvetica Neue", Arial, sans-serif;
  --geist: "DS Geist", "DS Mona", Arial, sans-serif;
  --inter: "DS Inter", "DS Mona", Arial, sans-serif;
  --archivo: "DS Archivo", "DS Mona", Arial, sans-serif;

  /* spacing scale */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;
  --s10: 128px;

  --t-xs: .8125rem;
  --t-sm: .9375rem;
  --t-md: 1.0625rem;
  --t-lg: 1.3125rem;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --mh: 64px;
  --gutter: clamp(16px, 4vw, 48px);
  --phoneShadow: rgba(10, 6, 4, .38);

  --grain: url("/assets/img/label/grain.webp");
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--mh) + var(--s4));
  scrollbar-color: var(--ink) var(--board-2);
  background: var(--board);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background-color: var(--board);
  background-image: var(--grain);
  color: var(--ink);
  font-family: var(--label);
  font-size: var(--t-md);
  font-weight: 420;
  line-height: 1.55;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  caret-color: var(--ink);
}

::selection { background: var(--ink); color: var(--board); }
.label-panel ::selection { background: var(--board); color: var(--ink); }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--board-2); }
::-webkit-scrollbar-thumb { background: var(--ink); border: 3px solid var(--board-2); }

[hidden] { display: none !important; }
.nw { white-space: nowrap; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.label-panel :focus-visible { outline-color: var(--board); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.i {
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wrap {
  width: 100%;
  max-width: 1360px;
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}

.skip {
  position: absolute;
  left: var(--s4);
  top: -100px;
  z-index: 100;
  padding: var(--s3) var(--s4);
  background-color: #121314;
  color: #c3c7cb;
  font-weight: 650;
  text-decoration: none;
}
.skip:focus { top: var(--s3); }

main:focus,
.release:focus { outline: none; }

/* tabular figures for references */
.ref,
.release-rule,
.disco-head,
.crate-hint,
.genre,
.notes dt,
.coupon-head,
.choice legend,
.field label,
.credits-title,
.who-role,
.fine,
.ph-cap b,
figcaption {
  font-variant-numeric: tabular-nums;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  min-height: 52px;
  padding: 0 var(--s5);
  border: 2px solid var(--ink);
  border-radius: 0;
  background-color: transparent;
  color: var(--ink);
  font: 700 var(--t-sm)/1 var(--label);
  font-stretch: 82%;
  letter-spacing: .045em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .25s var(--ease-out), color .25s var(--ease-out);
}
.btn .i { transition: transform .35s var(--ease-out); }
.btn:hover .i { transform: translateX(3px); }
.btn:hover .i--down { transform: translateY(3px); }
.btn--ink { background-color: #121314; color: #c3c7cb; }
.btn--ink:hover { background-color: #303336; border-color: #303336; }
.btn--line:hover { background-color: #121314; color: #c3c7cb; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline-offset: 4px; }

/* ---------- masthead ---------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--board);
  background-image: var(--grain);
  border-bottom: 1px solid var(--ink);
}
.masthead-row {
  display: flex;
  align-items: center;
  gap: var(--s6);
  min-height: var(--mh);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  text-decoration: none;
  margin-right: auto;
}
.brand-mark { width: 38px; height: 23px; color: var(--ink); }
.brand-name {
  font-weight: 800;
  font-stretch: 78%;
  font-size: 1.25rem;
  letter-spacing: -.005em;
}
.nav { display: flex; align-items: center; gap: var(--s6); }
.nav-list { display: flex; gap: var(--s5); }
.nav-list a,
.lang a {
  position: relative;
  display: inline-block;
  font-size: var(--t-xs);
  font-weight: 650;
  font-stretch: 85%;
  letter-spacing: .045em;
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--s2) 0;
}
.nav-list a::after,
.lang a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 2px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .35s var(--ease-out);
}
.nav-list a:hover::after,
.lang a[aria-current]::after,
.lang a:hover::after { transform: scaleX(1); }
.lang {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding-left: var(--s5);
  border-left: 1px solid var(--ink);
  color: var(--ink-3);
  font-size: var(--t-xs);
}
.lang a[aria-current] { color: var(--ink); }
.lang a:not([aria-current]) { color: var(--ink-3); }
.lang a:not([aria-current]):hover { color: var(--ink); }
.nav-toggle {
  display: none;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  padding: 0 var(--s3);
  border: 1.5px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font: 700 var(--t-xs)/1 var(--label);
  font-stretch: 85%;
  letter-spacing: .045em;
  text-transform: uppercase;
  cursor: pointer;
}

/* ---------- hero ---------- */

.hero {
  display: flex;
  align-items: center;
  min-height: calc(100svh - var(--mh) - 44px);
  padding-block: var(--s7) var(--s7);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 5.4fr) minmax(0, 6.6fr);
  gap: var(--s7);
  align-items: center;
}
.hero h1 {
  font-size: clamp(2.75rem, .9rem + 5vw, 5.5rem);
  font-weight: 820;
  font-stretch: 75%;
  line-height: .9;
  letter-spacing: -.012em;
  text-wrap: balance;
  max-width: 11ch;
}
.hero-lead {
  margin-top: var(--s6);
  max-width: 34rem;
  font-size: var(--t-lg);
  line-height: 1.42;
  color: var(--ink-2);
  text-wrap: pretty;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s6);
}

/* ---------- the crate ---------- */

.crate {
  --S: min(30vw, calc((100svh - var(--mh) - 210px) / 1.46), 440px);
  justify-self: end;
  width: calc(var(--S) * 1.62);
}
.crate-hint {
  font-size: var(--t-sm);
  font-weight: 560;
  font-stretch: 92%;
  color: var(--ink-2);
  margin-bottom: var(--s4);
  text-wrap: pretty;
}
.crate-stack {
  position: relative;
  width: 100%;
  height: calc(var(--S) * 1.46);
}
.crate .sleeve {
  --tx: 0%;
  --ty: 0%;
  --rot: 0deg;
  --lift: 0%;
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--S);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transform-origin: 0 100%;
  transform: translate(var(--tx), calc(var(--ty) + var(--lift))) rotate(var(--rot));
}
.crate .sleeve[data-pos="0"] { z-index: 4; }
.crate .sleeve[data-pos="1"] { z-index: 3; --tx: 3.5%; --ty: -12%; --rot: -1.4deg; }
.crate .sleeve[data-pos="2"] { z-index: 2; --tx: 7%; --ty: -24%; --rot: -2.8deg; }
.crate .sleeve[data-pos="3"] { z-index: 1; --tx: 10.5%; --ty: -36%; --rot: -4.2deg; }
.crate .sleeve:not([data-pos="0"]):hover { --lift: -3%; }
.crate .sleeve:focus-visible { outline: none; }
.crate .sleeve:focus-visible .cover { outline: 3px solid var(--ink); outline-offset: 5px; }
.crate .sleeve:not([data-pos="0"]) .disc-track { transform: none; }

.crate-notes {
  margin-top: var(--s5);
  padding-top: var(--s3);
  border-top: 1px solid var(--ink);
  min-height: calc(3 * 1.45em + var(--s3));
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--ink-2);
}
.crate-notes strong { color: var(--ink); font-weight: 750; }
.crate-notes .ref {
  font-weight: 700;
  font-stretch: 85%;
  letter-spacing: .045em;
  color: var(--ink);
  margin-right: var(--s1);
}
.crate-notes p { text-wrap: pretty; }
.crate-notes a { color: var(--ink); font-weight: 600; white-space: nowrap; }

/* ---------- sleeve, cover, disc ---------- */

.sleeve {
  --dir: 1;
  --pull: 62%;
  position: relative;
  display: block;
  aspect-ratio: 1;
}
.release { --dir: 1; }
.release--flip { --dir: -1; }
.release .sleeve { --dir: inherit; }

.cover {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  overflow: hidden;
  container-type: inline-size;
  border-radius: 3px;
  background: #111;
  box-shadow:
    0 1px 2px rgba(18, 19, 20, .3),
    0 22px 40px -14px rgba(18, 19, 20, .5);
}
.cover::after {
  /* printed card edge */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .22);
  pointer-events: none;
}
.cover > span { display: block; }

.band {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 4;
  display: flex !important;
  align-items: center;
  gap: 2.4cqi;
  height: 8.6cqi;
  padding: 0 3.2cqi;
  background-color: #121314;
  color: #c3c7cb;
  font: 700 3.3cqi/1 var(--label);
  font-stretch: 80%;
  letter-spacing: .045em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.band-name {
  flex: 1;
  min-width: 0;
  font-weight: 560;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.band-mark { width: 7.2cqi; height: 4.4cqi; color: var(--board); }
.band-soon {
  padding: .8cqi 1.4cqi;
  border: 1.5px solid currentColor;
  font-size: 2.7cqi;
}
.art {
  position: absolute;
  inset: 8.6cqi 0 0 0;
  overflow: hidden;
}
.art > * { position: absolute; display: block; }

/* the exact iPhone 16 Pro frame */
.iphone { position: relative; display: block; aspect-ratio: 437 / 903; flex-shrink: 0; }
.iphone::before { content: ""; position: absolute; inset: 0 .7%; border-radius: 17.6% / 8.4%; box-shadow: 0 34px 70px var(--phoneShadow), 0 10px 24px var(--phoneShadow); }
.iphone .scr { position: absolute; display: block; left: 3.9%; top: 1.55%; width: 92.2%; height: 96.9%; border-radius: 15.3% / 7.05%; overflow: hidden; background: #000; }
.iphone .scr img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.iphone .bezel { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.art .iphone { position: absolute; }
.art .iphone::before { box-shadow: 0 3cqi 6cqi var(--phoneShadow), 0 1cqi 2cqi var(--phoneShadow); }

/* DS-001 Sphely */
.cover--sphely .art { background: linear-gradient(135deg, #ffd23f 0%, #ff8a1f 52%, #ff3b30 100%); }
.sp-title {
  left: 5.6cqi;
  top: 4.4cqi;
  font: 800 14.5cqi/.86 var(--geist);
  letter-spacing: -.055em;
  color: #0b0b0c;
}
.sp-tag {
  left: 6cqi;
  top: 21.5cqi;
  font: 650 4.1cqi/1.16 var(--geist);
  letter-spacing: -.015em;
  color: #0b0b0c;
}
.sp-list {
  left: 6cqi;
  bottom: 5.4cqi;
  font: 560 3.6cqi/1.32 var(--geist);
  letter-spacing: -.01em;
  color: rgba(11, 11, 12, .82);
}
.sp-phone { width: 37cqi; right: 7.5cqi; top: 5.5cqi; }

/* DS-002 Goat IPTV Player */
.cover--goat .art { background: #0b0a08; }
.gt-field { inset: 0 0 auto 0; height: 58cqi; background: linear-gradient(180deg, #fbca49 0%, #e3a41a 100%); }
.gt-title {
  left: 6cqi;
  top: 4.2cqi;
  font: 800 16cqi/.9 var(--inter);
  letter-spacing: -.05em;
  color: #0b0a08;
}
.gt-title span { display: block; margin-top: 1.2cqi; font-size: 8.2cqi; letter-spacing: -.035em; }
.gt-tv {
  left: 9cqi;
  right: 9cqi;
  top: 35cqi;
  padding: .9cqi;
  border-radius: 1.3cqi;
  background: #000;
  box-shadow: 0 2.4cqi 5cqi rgba(0, 0, 0, .55), 0 0 0 .25cqi #2a2620;
}
.gt-tv img { width: 100%; aspect-ratio: 16 / 9; border-radius: .5cqi; }
.gt-line {
  left: 9cqi;
  bottom: 3.6cqi;
  font: 650 3.4cqi/1 var(--inter);
  letter-spacing: -.01em;
  color: #fbca49;
}

/* DS-003 Lyrmake */
.cover--lyrmake .art { background: #2a0b3d; }
.ly-render { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 72%; }
.ly-sticker {
  right: 3.6cqi;
  bottom: 3.2cqi;
  width: 25cqi;
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(135deg, #7b45f5 0%, #a52ad6 55%, #dc1f72 100%);
  color: #fff;
  transform: rotate(-12deg);
  box-shadow: 0 .8cqi 2.2cqi rgba(0, 0, 0, .4), inset 0 0 0 .5cqi rgba(255, 255, 255, .16);
}
.ly-name { display: block; font: 700 5.6cqi/1 var(--inter); letter-spacing: -.035em; }
.ly-tag { display: block; max-width: 19cqi; margin-top: 1.2cqi; font: 600 2.9cqi/1.15 var(--inter); }

/* DS-004 Flawgy */
.cover--flawgy .art { background: radial-gradient(130% 90% at 15% 0%, #3b0a18 0%, #15040a 62%); }
.fl-title {
  left: 5.6cqi;
  top: 5cqi;
  font: 900 9.2cqi/.98 var(--archivo);
  font-stretch: 125%;
  letter-spacing: -.01em;
  color: #fff1de;
}
.fl-heart { left: 7cqi; top: 36cqi; width: 30cqi; height: auto; transform: rotate(-8deg); }
.fl-line {
  left: 6cqi;
  bottom: 5.2cqi;
  font: 600 3.4cqi/1.25 var(--archivo);
  color: rgba(255, 241, 222, .82);
}
.fl-phone { width: 29cqi; right: 7cqi; top: 26.5cqi; transform: rotate(4deg); --phoneShadow: rgba(0, 0, 0, .6); }
.fl-soon {
  left: 30cqi;
  top: 31cqi;
  width: 15cqi;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid !important;
  place-items: center;
  background: #ffc83a;
  color: #15040a;
  font: 850 3cqi/1 var(--archivo);
  font-stretch: 112%;
  transform: rotate(10deg);
  box-shadow: 0 .8cqi 2cqi rgba(0, 0, 0, .45);
}

/* the disc */
.disc-track {
  position: absolute;
  top: 3%;
  left: 3%;
  width: 94%;
  height: 94%;
  z-index: 1;
  display: block;
  transform: translateX(calc(var(--pull) * var(--dir)));
}
.disc-track::before {
  /* soft cast shadow on the board, does not turn */
  content: "";
  position: absolute;
  inset: 3% -2% -5% 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(18, 19, 20, .42) 82%, rgba(18, 19, 20, 0) 100%);
}
.disc {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 50%;
}
.disc-spin {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 50%;
  background: url("/assets/img/label/disc.webp") center / 100% 100% no-repeat;
}
.disc--test .disc-spin { background-image: url("/assets/img/label/disc-test.webp"); }
.disc-sheen {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 50%;
  background: url("/assets/img/label/disc-sheen.webp") center / 100% 100% no-repeat;
  pointer-events: none;
}
.d-label {
  position: absolute;
  left: 32%;
  top: 32%;
  width: 36%;
  height: 36%;
  display: block;
  border-radius: 50%;
  overflow: hidden;
  container-type: inline-size;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 7.2%, #000 8.4%);
  mask: radial-gradient(circle closest-side, transparent 0 7.2%, #000 8.4%);
}
.d-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.d-ring text {
  font: 700 12.5px var(--label);
  font-stretch: 80%;
  letter-spacing: .045em;
  fill: currentColor;
}
.d-icon {
  position: absolute;
  left: 36%;
  top: 15%;
  width: 28%;
  height: 28%;
  border-radius: 23%;
  box-shadow: 0 .6cqi 1.6cqi rgba(0, 0, 0, .25);
}
.d-name {
  position: absolute;
  left: 0;
  right: 0;
  top: 60%;
  display: block;
  text-align: center;
  font-size: 9cqi;
  line-height: 1;
}
.d-label--sphely { background: linear-gradient(135deg, #ffd23f, #ff8a1f 52%, #ff3b30); color: #0b0b0c; }
.d-label--sphely .d-name { font-family: var(--geist); font-weight: 800; letter-spacing: -.04em; }
.d-label--goat { background: linear-gradient(180deg, #fbca49, #e3a41a); color: #0b0a08; }
.d-label--goat .d-name { font-family: var(--inter); font-weight: 800; letter-spacing: -.04em; }
.d-label--lyrmake { background: linear-gradient(135deg, #7b45f5, #a52ad6 55%, #dc1f72); color: #fff; }
.d-label--lyrmake .d-name { font-family: var(--inter); font-weight: 700; letter-spacing: -.03em; }
.d-label--test { background: #ebe8e1; color: #121314; }
.d-test {
  position: absolute;
  left: 0;
  right: 0;
  top: 22%;
  display: block;
  text-align: center;
  font: 800 9cqi/.95 var(--label);
  font-stretch: 78%;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.d-label--test .d-name { font-family: var(--label); font-weight: 700; font-stretch: 85%; font-size: 8cqi; letter-spacing: .045em; font-variant-numeric: tabular-nums; }

/* disc states when motion is allowed */
html.motion .disc-track {
  transform: translateX(0);
  transition: transform 1.25s var(--ease-out);
}
html.motion .is-out > .disc-track {
  transform: translateX(calc(var(--pull) * var(--dir)));
}
html.motion .release .sleeve.is-out:hover > .disc-track,
html.motion .crate .sleeve[data-pos="0"].is-out:hover > .disc-track {
  transform: translateX(calc((var(--pull) + 5%) * var(--dir)));
  transition-duration: .7s;
}
html.motion .crate .sleeve:not([data-pos="0"]) > .disc-track,
html.motion .crate .sleeve:not(.is-out) > .disc-track {
  transform: translateX(0);
  transition-duration: .4s;
}
html.motion .crate .sleeve:not(.is-out) .disc-spin { transition-duration: .4s; }
html.motion .disc-spin {
  will-change: transform;
  rotate: 0deg;
  transition: rotate 1.25s var(--ease-out);
  animation: disc-turn 16s linear infinite;
  animation-play-state: paused;
}
html.motion .is-out .disc-spin { rotate: calc(150deg * var(--dir)); }
html.motion .is-out.is-seen .disc-spin { animation-play-state: running; }
html.motion .crate .sleeve { transition: transform .62s var(--ease-out); }
html.motion .crate .sleeve.is-lifted { transition: transform .34s var(--ease-in-out); }
html.motion .cover { transition: box-shadow .4s var(--ease-out), transform 1.25s var(--ease-out); }
html.motion .is-out > .cover {
  transform: translateX(calc(-1.2% * var(--dir))) rotate(calc(-.5deg * var(--dir)));
  box-shadow:
    0 1px 2px rgba(18, 19, 20, .3),
    0 28px 46px -14px rgba(18, 19, 20, .58);
}
html.motion .crate .sleeve:not([data-pos="0"]) > .cover,
html.motion .crate .sleeve:not(.is-out) > .cover { transform: none; transition-duration: .4s; }

@keyframes disc-turn {
  to { transform: rotate(360deg); }
}

/* ---------- section heads ---------- */

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s5) var(--s7);
  align-items: end;
  padding-top: var(--s5);
  border-top: 2px solid var(--ink);
  margin-bottom: var(--s7);
}
.section-head h2,
.projet h2,
.recrutement h2,
.contact h2 {
  font-size: clamp(2.5rem, 1.5rem + 3.2vw, 4.75rem);
  font-weight: 820;
  font-stretch: 75%;
  line-height: .92;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.section-head p {
  max-width: 36rem;
  font-size: var(--t-lg);
  line-height: 1.42;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* ---------- catalogue ---------- */

.catalogue { padding-top: var(--s2); padding-bottom: var(--s10); }

.disco-head,
.disco a {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1.25fr) minmax(0, 1.9fr) minmax(0, 1.8fr) 9.5rem;
  gap: var(--s4);
  align-items: baseline;
}
.disco-head {
  padding: 0 var(--s3) var(--s2);
  border-bottom: 1px solid var(--ink);
  font-size: var(--t-xs);
  font-weight: 650;
  font-stretch: 85%;
  letter-spacing: .045em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.disco-head span:last-child { text-align: right; }
.disco a {
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--ink);
  text-decoration: none;
  padding-inline: var(--s3);
  transition: background-color .25s var(--ease-out), color .25s var(--ease-out);
}
.disco a:hover {
  background-color: #121314;
  color: #c3c7cb;
}
.disco a:hover .d-genre,
.disco a:hover .d-formats,
.disco a:hover .d-status { color: var(--board); }
.d-ref {
  font-weight: 700;
  font-stretch: 85%;
  letter-spacing: .045em;
  font-variant-numeric: tabular-nums;
}
.d-title { font-size: 1.5rem; font-weight: 800; font-stretch: 75%; line-height: 1.1; }
.d-genre,
.d-formats { font-size: var(--t-sm); color: var(--ink-2); }
.d-status {
  font-size: var(--t-xs);
  font-weight: 650;
  font-stretch: 85%;
  letter-spacing: .045em;
  text-transform: uppercase;
  text-align: right;
  color: var(--ink);
}

/* ---------- release spread ---------- */

.release { padding-top: var(--s10); }
.release-rule {
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  padding-top: var(--s3);
  border-top: 2px solid var(--ink);
  font-size: var(--t-xs);
  font-weight: 700;
  font-stretch: 85%;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.release-body {
  --S2: min(34vw, 470px);
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s7);
  align-items: start;
  margin-top: var(--s7);
}
.release-sleeve { position: sticky; top: calc(var(--mh) + var(--s7)); }
.release-sleeve .sleeve { width: var(--S2); }
.release--flip .release-body { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.release--flip .release-sleeve { order: 2; display: flex; justify-content: flex-end; }

.liner h3 {
  font-size: clamp(2.75rem, 1.7rem + 3vw, 4.5rem);
  font-weight: 820;
  font-stretch: 75%;
  line-height: .92;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.genre {
  margin-top: var(--s3);
  font-size: var(--t-lg);
  font-weight: 560;
  font-stretch: 88%;
  line-height: 1.25;
  color: var(--ink-2);
}
.tagline {
  margin-top: var(--s5);
  font-size: 1.375rem;
  font-weight: 560;
  font-stretch: 88%;
  line-height: 1.25;
}
.tagline--small { margin-top: var(--s5); font-size: var(--t-md); color: var(--ink-2); }
.desc {
  margin-top: var(--s3);
  max-width: 34rem;
  color: var(--ink-2);
  text-wrap: pretty;
}
.tagline + .desc { margin-top: var(--s3); }
.genre + .desc { margin-top: var(--s5); }
.mention {
  margin-top: var(--s5);
  padding: var(--s3) var(--s4);
  border: 1.5px solid var(--ink);
  font-size: var(--t-sm);
  line-height: 1.45;
  color: var(--ink);
}
.mention strong {
  display: block;
  margin-bottom: var(--s1);
  font-size: var(--t-xs);
  font-weight: 700;
  font-stretch: 85%;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.notes { margin-top: var(--s6); border-top: 1px solid var(--ink); }
.note {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s2);
  padding: var(--s3) 0 var(--s4);
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-sm);
}
.notes dt {
  font-size: var(--t-xs);
  font-weight: 700;
  font-stretch: 85%;
  letter-spacing: .045em;
  text-transform: uppercase;
  line-height: 1.5;
}
.notes dt span {
  margin-left: var(--s2);
  font-weight: 450;
  font-stretch: 100%;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
}
.tracks li {
  display: grid;
  grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
  gap: var(--s4);
  padding: var(--s1) 0;
}
.tracks li + li { border-top: 1px dotted var(--rule); }
.tracks b { font-weight: 700; }
.tracks li > span { color: var(--ink-2); text-wrap: pretty; }
.note dd { text-wrap: pretty; }
.release-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s4);
  margin-top: var(--s6);
}
/* official store badges (Apple SVG, Google Play PNG trimmed of its transparent margin):
   never redrawn, recoloured or cropped; one shared height; Apple's clear space (1/4 of the
   height) is kept by the gap around them */
.badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4);
}
.badge {
  display: block;
  flex: none;
  border-radius: 8px;
  line-height: 0;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.badge img { width: auto; height: 48px; }
.badge:hover { transform: translateY(-2px); box-shadow: 0 8px 16px -8px rgba(18, 19, 20, .55); }
.badge:active { transform: translateY(0); box-shadow: none; }
.badge:focus-visible { outline-offset: 4px; }
.site-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  font-weight: 650;
  min-height: 44px;
}
.site-link .i { width: 16px; height: 16px; }
.site-note { font-size: var(--t-sm); color: var(--ink-3); }

/* inserts */
.insert { margin-top: var(--s9); }
.insert figcaption {
  margin-top: var(--s5);
  padding-top: var(--s3);
  border-top: 1px solid var(--rule);
  font-size: var(--t-sm);
  color: var(--ink-2);
}
.phones {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s7) var(--s6);
}
.phones li { display: flex; flex-direction: column; align-items: center; gap: var(--s5); }
.phones .iphone { width: 100%; max-width: 226px; }
.ph-cap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-size: var(--t-sm);
  color: var(--ink-2);
  line-height: 1.35;
  text-wrap: pretty;
}
.ph-cap b {
  font-size: var(--t-xs);
  font-weight: 700;
  font-stretch: 85%;
  letter-spacing: .045em;
  text-transform: uppercase;
  color: var(--ink);
}
.gatefold {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
  gap: var(--s4);
  align-items: start;
}
.gatefold .tv--main { grid-row: span 2; }
.tv {
  display: block;
  padding: 6px;
  border-radius: 7px;
  background: #050505;
  box-shadow: 0 14px 30px -10px rgba(18, 19, 20, .45), 0 0 0 1px #2c2c2c inset;
}
.tv img { width: 100%; aspect-ratio: 16 / 9; border-radius: 3px; }

.planche {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s5) var(--s4);
}
.planche li { display: flex; flex-direction: column; gap: var(--s2); }
.planche img {
  width: 100%;
  aspect-ratio: 1;
  max-width: 576px;
  box-shadow: 0 10px 22px -10px rgba(18, 19, 20, .5), 0 0 0 1px rgba(0, 0, 0, .25);
}
.planche span {
  font-size: var(--t-xs);
  font-weight: 650;
  font-stretch: 85%;
  letter-spacing: .045em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-wrap: pretty;
}

.proof {
  display: grid;
  grid-template-columns: 236px minmax(0, 782px);
  gap: var(--s8);
  align-items: center;
  justify-content: start;
}
.proof .iphone { width: 236px; --phoneShadow: rgba(18, 19, 20, .4); }
.proof-sheet {
  width: 100%;
  border-radius: 3px;
  box-shadow: 0 18px 40px -16px rgba(18, 19, 20, .55), 0 0 0 1px rgba(0, 0, 0, .3);
}

/* ---------- the label ---------- */

.label-panel {
  background-color: #121314;
  color: #c3c7cb;
  padding-block: var(--s10) var(--s9);
}
.section-head--ink { border-top-color: var(--on-ink); }
.section-head--ink p { color: var(--on-ink-2); }
.label-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s7);
  align-items: start;
}
.who-name {
  font-size: clamp(3rem, 1.4rem + 5vw, 6rem);
  font-weight: 820;
  font-stretch: 75%;
  line-height: .88;
  letter-spacing: -.012em;
  color: var(--on-ink);
}
.who-role {
  margin-top: var(--s4);
  font-size: var(--t-xs);
  font-weight: 700;
  font-stretch: 85%;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.who-text {
  margin-top: var(--s6);
  max-width: 30rem;
  color: var(--on-ink-2);
  text-wrap: pretty;
}
.credits-title {
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--on-ink);
  font-size: var(--t-xs);
  font-weight: 700;
  font-stretch: 85%;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.credits-title span { margin-left: var(--s2); font-weight: 450; letter-spacing: .02em; text-transform: none; font-size: var(--t-sm); color: var(--on-ink-2); }
.credit-list > div {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  padding: var(--s3) 0;
  border-bottom: 1px solid rgba(195, 199, 203, .22);
}
.credit-list dt {
  display: flex;
  flex: 1;
  align-items: baseline;
  gap: var(--s3);
  font-size: var(--t-lg);
  font-weight: 560;
  font-stretch: 88%;
  text-wrap: balance;
}
.credit-list dt::after {
  content: "";
  flex: 1;
  min-width: var(--s5);
  border-bottom: 2px dotted rgba(195, 199, 203, .45);
  transform: translateY(-.28em);
}
.credit-list dd {
  font-size: var(--t-xs);
  font-weight: 750;
  font-stretch: 85%;
  letter-spacing: .045em;
  text-transform: uppercase;
}

/* ---------- projet ---------- */

.projet { padding-block: var(--s10) var(--s9); }
.projet-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: var(--s8);
  align-items: center;
}
.blank-sleeve svg { width: 100%; max-width: 600px; height: auto; overflow: visible; }
.bs-disc > circle:first-child { fill: var(--ink); }
.bs-groove { fill: none; stroke: rgba(195, 199, 203, .16); stroke-width: 1; }
.bs-groove--gap { stroke: rgba(195, 199, 203, .3); stroke-width: 2.4; }
.bs-label { fill: var(--board); }
.bs-ringtext { font: 700 12px var(--label); font-stretch: 82%; letter-spacing: .045em; fill: var(--ink); }
.bs-t1 { font: 800 15px var(--label); font-stretch: 76%; fill: var(--ink); }
.bs-t2 { font: 600 11px var(--label); font-stretch: 90%; letter-spacing: .03em; fill: var(--ink-2); }
.bs-spindle { fill: var(--board); }
.bs-sleeve { fill: #cdd0d3; stroke: var(--ink); stroke-width: 2.5; }
.bs-seam { fill: none; stroke: rgba(18, 19, 20, .28); stroke-width: 1; stroke-dasharray: 3 3; }
.bs-thumb { fill: var(--ink); stroke: var(--ink); stroke-width: 2.5; }
.bs-hole { fill: var(--board-3); stroke: var(--ink); stroke-width: 2.5; }
/* the die-cut hole looks into the empty sleeve: the front panel's cut edge shades the top of it
   (shared with the 404 sleeve) */
.bs-hole-depth { fill: rgba(18, 19, 20, .26); }
.bs-print { font: 650 12px var(--label); font-stretch: 85%; letter-spacing: .045em; text-transform: uppercase; fill: var(--ink); }
/* the label band every sleeve carries (here and on the 404 sleeve), and the matrix number
   etched in the dead wax of the disc, between the last groove (r 93) and the label (r 61),
   as on a white-label pressing; it is written in capitals in the markup */
.bs-band { fill: var(--ink); }
.bs-band-t { font: 560 11px var(--label); font-stretch: 80%; letter-spacing: .045em; text-transform: uppercase; font-variant-numeric: tabular-nums; fill: var(--board); }
.bs-band-ref { font-weight: 700; }
.bs-band-mark { color: var(--board); }
.bs-etch { font: 500 12px var(--label); font-stretch: 78%; letter-spacing: .05em; font-variant-numeric: tabular-nums; fill: rgba(195, 199, 203, .76); }
.projet-copy h2 { max-width: 12ch; }
.projet-lead {
  margin-top: var(--s5);
  max-width: 34rem;
  font-size: var(--t-lg);
  line-height: 1.42;
  color: var(--ink-2);
  text-wrap: pretty;
}
.services { margin-top: var(--s6); border-top: 1px solid var(--ink); }
.services > div {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: var(--s4);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--rule);
}
.services dt { font-weight: 700; font-stretch: 88%; font-size: var(--t-md); }
.services dd { color: var(--ink-2); font-size: var(--t-sm); padding-top: 1px; }
.projet-note { margin-top: var(--s5); font-size: var(--t-sm); color: var(--ink-2); }
.projet-copy .btn { margin-top: var(--s6); }

/* ---------- recrutement ---------- */

.recrutement { padding-block: var(--s9) var(--s10); }
.recrutement-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s5) var(--s7);
  padding-top: var(--s5);
  border-top: 2px solid var(--ink);
  align-items: start;
}
.recrutement-lead {
  font-size: clamp(1.375rem, 1.1rem + .9vw, 1.875rem);
  line-height: 1.34;
  font-weight: 520;
  font-stretch: 92%;
  max-width: 34rem;
  text-wrap: pretty;
}
.recrutement-copy > p + p { margin-top: var(--s4); max-width: 34rem; color: var(--ink-2); }
.recrutement-copy .btn { margin-top: var(--s6); }

/* ---------- contact ---------- */

.contact { padding-block: var(--s9) var(--s10); background: var(--board-2); background-image: var(--grain); border-top: 1px solid var(--ink); }
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s7);
  align-items: start;
}
.contact-copy > p {
  margin-top: var(--s5);
  max-width: 28rem;
  font-size: var(--t-lg);
  line-height: 1.42;
  color: var(--ink-2);
}
.contact-copy .direct {
  margin-top: var(--s6);
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  font-size: var(--t-lg);
  color: var(--ink);
}
.direct span {
  font-size: var(--t-xs);
  font-weight: 700;
  font-stretch: 85%;
  letter-spacing: .045em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.direct a { font-weight: 650; overflow-wrap: anywhere; }

.coupon {
  position: relative;
  padding: var(--s6) var(--s6) var(--s5);
  border: 2px dashed var(--ink);
}
.coupon-cut {
  position: absolute;
  top: -13px;
  left: var(--s6);
  width: 24px;
  height: 24px;
  padding: 0 3px;
  box-sizing: content-box;
  background: var(--board-2);
  color: var(--ink);
}
.coupon-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s2) var(--s4);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--ink);
  font-size: var(--t-xs);
  font-weight: 700;
  font-stretch: 85%;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.coupon-head span:last-child { font-weight: 500; letter-spacing: .03em; text-transform: none; font-size: var(--t-sm); }
.choice { margin: var(--s5) 0 0; padding: 0; border: 0; min-width: 0; }
.choice legend,
.field label {
  padding: 0;
  margin-bottom: var(--s3);
  font-size: var(--t-xs);
  font-weight: 700;
  font-stretch: 85%;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s2);
}
.choice-grid--apps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tick {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 48px;
  padding: var(--s2) var(--s3);
  border: 1.5px solid var(--ink);
  font-size: var(--t-sm);
  font-weight: 560;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out);
}
.tick input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.tick .box {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: none;
  border: 1.5px solid currentColor;
}
.tick .box .i { width: 14px; height: 14px; stroke-width: 2.6; opacity: 0; }
.tick:hover { background: rgba(18, 19, 20, .07); }
.tick:has(input:checked) { background-color: #121314; color: #c3c7cb; }
.tick:has(input:checked) .box { background: var(--board); border-color: var(--board); color: var(--ink); }
.tick:has(input:checked) .box .i { opacity: 1; }
.tick:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }

.field { margin-top: var(--s5); }
.field label { display: block; }
.field input,
.field textarea {
  display: block;
  width: 100%;
  border: 0;
  border-bottom: 2px solid var(--ink);
  border-radius: 0;
  background-color: transparent;
  color: var(--ink);
  font: 450 1.125rem/1.75rem var(--label);
  padding: var(--s2) 0;
  outline: none;
  transition: background-color .2s var(--ease-out);
}
.field textarea {
  padding: 0;
  resize: vertical;
  min-height: calc(1.75rem * 6);
  background-image: repeating-linear-gradient(to bottom, transparent 0 calc(1.75rem - 1px), rgba(18, 19, 20, .3) calc(1.75rem - 1px) 1.75rem);
  background-attachment: local;
}
.field input:hover,
.field textarea:hover { background-color: rgba(18, 19, 20, .04); }
.field input:focus-visible,
.field textarea:focus-visible {
  background-color: rgba(18, 19, 20, .06);
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}
.field textarea[aria-invalid="true"] { border-bottom-style: dashed; border-bottom-width: 3px; }
.field-error {
  display: flex;
  gap: var(--s2);
  margin-top: var(--s2);
  font-size: var(--t-sm);
  font-weight: 650;
}
.field-error::before { content: ""; width: 4px; flex: none; background: var(--ink); }
.subject {
  margin-top: var(--s5);
  font-size: var(--t-sm);
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.subject output { color: var(--ink); font-weight: 650; }
.coupon-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s5);
}
.coupon-status { min-height: 1.5em; margin-top: var(--s3); font-size: var(--t-sm); font-weight: 600; }
.coupon-status:empty { min-height: 0; margin-top: 0; }
.coupon-status:not(:empty) {
  display: flex;
  gap: var(--s2);
}
.coupon-status:not(:empty)::before { content: ""; width: 4px; flex: none; background: var(--ink); }

/* the app picker only shows for "a question about an app"; without JS every field stays visible
   and the form falls back to a plain mailto: post */
.js .choice--apps:not(.is-on) { display: none; }
html:not(.js) .subject,
html:not(.js) #copy-address { display: none; }

/* ---------- back cover ---------- */

.backcover { padding-block: var(--s8) calc(var(--s6) + env(safe-area-inset-bottom)); border-top: 2px solid var(--ink); }
.bc-top {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) auto;
  gap: var(--s6);
  align-items: end;
  padding-bottom: var(--s6);
  border-bottom: 1px solid var(--ink);
}
.bc-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s4);
  text-decoration: none;
  justify-self: start;
}
.bc-mark { width: 84px; height: 51px; color: var(--ink); }
.bc-brand span {
  font-size: clamp(2rem, 1.2rem + 2.4vw, 3.25rem);
  font-weight: 820;
  font-stretch: 75%;
  line-height: 1;
}
.bc-list li {
  display: flex;
  gap: var(--s3);
  padding: var(--s1) 0;
  font-size: var(--t-sm);
}
.bc-list .ref { font-weight: 700; font-stretch: 85%; letter-spacing: .045em; font-size: var(--t-xs); padding-top: 2px; }
.bc-list a { font-weight: 600; }
.bc-up {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 44px;
  font-size: var(--t-xs);
  font-weight: 700;
  font-stretch: 85%;
  letter-spacing: .045em;
  text-transform: uppercase;
  text-decoration: none;
}
.bc-up:hover { text-decoration: underline; }
.fine {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  padding-top: var(--s4);
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--ink-2);
}
.fine a { color: var(--ink); }

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
  .nav-list { gap: var(--s4); }
  .nav { gap: var(--s5); }
}

@media (max-width: 960px) {
  .js .nav-toggle { display: inline-flex; }
  /* the open menu covers the whole screen under the masthead rule: nothing of the page shows
     beneath it, it scrolls on its own when the screen is short, and site.js locks the page
     (html.menu-open) and makes it inert while it is open */
  .js .nav {
    position: fixed;
    inset: calc(var(--mh) + 1px) 0 0 0;
    height: calc(100vh - var(--mh) - 1px);
    height: calc(100dvh - var(--mh) - 1px);
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s3) max(var(--gutter), env(safe-area-inset-right)) calc(var(--s7) + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: var(--board);
    background-image: var(--grain);
  }
  .js .nav.is-open { display: flex; }
  html.menu-open { overflow: hidden; }
  .js .nav-list { flex-direction: column; gap: 0; }
  .js .nav-list a {
    display: block;
    padding: var(--s3) 0;
    border-bottom: 1px solid var(--rule);
    font-size: 1.75rem;
    font-weight: 800;
    font-stretch: 75%;
    letter-spacing: 0;
    text-transform: none;
  }
  .js .nav-list a::after { display: none; }
  .js .lang { padding: var(--s4) 0 0; border-left: 0; }
  .js .lang a { font-size: var(--t-sm); }
  html:not(.js) .masthead-row { flex-wrap: wrap; padding-block: var(--s2); }
  html:not(.js) .nav { flex-wrap: wrap; gap: var(--s3); }
  html:not(.js) .nav-list { flex-wrap: wrap; gap: var(--s3); }

  .hero { min-height: 0; padding-block: var(--s6) var(--s8); }
  .hero-grid { grid-template-columns: 1fr; gap: var(--s7); }
  .hero h1 { max-width: 13ch; }
  .crate { --S: min(58vw, 340px); justify-self: stretch; width: 100%; }
  .section-head { grid-template-columns: 1fr; }
  .release-body,
  .release--flip .release-body { grid-template-columns: 1fr; gap: var(--s7); }
  .release-body { --S2: min(62vw, 440px); }
  .release--flip .release-sleeve { order: 0; }
  .release-sleeve { position: static; }
  .label-grid,
  .projet-grid,
  .recrutement-grid,
  .contact-grid { grid-template-columns: 1fr; }
  .phones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gatefold { grid-template-columns: 1fr 1fr; }
  .gatefold .tv--main { grid-row: auto; grid-column: 1 / -1; }
  .planche { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .proof { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: var(--s6); }
  .proof .iphone { width: 100%; }
  .bc-top { grid-template-columns: 1fr; align-items: start; }
}

@media (max-width: 640px) {
  :root { --mh: 60px; --s10: 96px; --s9: 72px; }
  body { font-size: 1rem; }
  .brand-name { font-size: 1.125rem; }
  .hero { padding-block: var(--s5) var(--s7); }
  .hero-lead { margin-top: var(--s4); font-size: 1.0625rem; line-height: 1.45; }
  .hero-grid { gap: var(--s6); }
  .actions { margin-top: var(--s5); }
  .actions { gap: var(--s2); }
  .actions .btn { flex: 1 1 auto; gap: var(--s2); padding: 0 var(--s3); min-height: 48px; font-size: .875rem; letter-spacing: .03em; }
  .actions .btn .i { width: 16px; height: 16px; }
  .crate { --S: min(60vw, 280px); }
  .sleeve { --pull: 42%; }
  .disco-head { display: none; }
  .disco li:first-child a { border-top: 1px solid var(--ink); }
  .disco a {
    grid-template-columns: 4.75rem minmax(0, 1fr);
    gap: var(--s1) var(--s3);
  }
  .disco .d-genre,
  .disco .d-formats,
  .disco .d-status { grid-column: 2; text-align: left; }
  .release-body { --S2: min(62vw, 300px); }
  .note { grid-template-columns: 1fr; gap: var(--s1); }
  .tracks li { grid-template-columns: 1fr; gap: 0; padding: var(--s1) 0; }
  .insert { margin-top: var(--s8); }
  .strip {
    /* room above and below so the phones' shadows are not clipped by the scroller */
    margin: calc(-1 * var(--s7)) calc(-1 * var(--gutter)) calc(-1 * var(--s5));
    padding: var(--s7) var(--gutter) calc(var(--s5) + var(--s3));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: thin;
  }
  .phones { display: flex; gap: var(--s4); width: max-content; }
  .phones li { width: min(46vw, 200px); scroll-snap-align: start; }
  .planche { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4) var(--s3); }
  .planche span { font-size: .6875rem; letter-spacing: .03em; }
  /* narrow contact sheet: the template family on one line, its name on the next */
  .planche .sep { display: block; height: 0; overflow: hidden; }
  .gatefold { gap: var(--s2); }
  .gatefold .tv { padding: 4px; }
  .proof { grid-template-columns: 1fr; justify-items: center; }
  .proof .iphone { width: min(60vw, 220px); }
  .services > div { grid-template-columns: 1fr; gap: 0; }
  .credit-list dt { font-size: 1.0625rem; }
  .coupon { padding: var(--s5) var(--s4) var(--s4); }
  .coupon-cut { left: var(--s4); }
  .choice-grid,
  .choice-grid--apps { grid-template-columns: 1fr; }
  .coupon-actions .btn { flex: 1 1 100%; gap: var(--s2); padding: 0 var(--s3); font-size: .875rem; letter-spacing: .03em; }
  .coupon-actions .btn .i { width: 16px; height: 16px; }
  .bc-mark { width: 64px; height: 39px; }
}

@media (max-width: 360px) {
  .masthead-row { gap: var(--s4); }
  .brand { gap: var(--s2); }
  .brand-mark { width: 34px; height: 21px; }
  .brand-name { font-size: 1.05rem; }
  .nav-toggle { padding: 0 var(--s2); }
  .crate { --S: min(62vw, 230px); }
}

/* ---------- system surfaces ---------- */

@media (forced-colors: active) {
  .btn,
  .tick,
  .coupon,
  .mention { border-color: CanvasText; }
  .tick:has(input:checked) { outline: 3px solid Highlight; }
  .crate .sleeve:focus-visible .cover { outline-color: Highlight; }
}

@media print {
  html, body { background: #fff; }
  body { background-image: none; color: #000; }
  .masthead { position: static; }
  .nav, .nav-toggle, .skip, .crate-hint, .crate-notes, .coupon, .bc-up { display: none !important; }
  .label-panel { background: #fff; color: #000; }
  .label-panel .who-name, .label-panel .who-text, .section-head--ink p { color: #000; }
  .release, .insert { break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
  .badges a::after, .disco a::after { content: none; }
}

/* ---------- page-specific blocks ----------
   Other pages append their own block below, each under its own header comment
   (page: legal, page: 404), reusing the tokens above; shared blocks stay untouched. */

/* ---------- EN ----------
   page: en/index.html. The English headline is two sentences, one per pair of lines
   (the h1 carries a <br> between them), like the French one. "An independent" is wider
   than the French 11ch measure, so the English home widens it; the French page is untouched. */
html[lang="en"] .hero h1 { max-width: 14ch; }