/* SLTR AUDIO brand house, Revision 4 (owner's review). Palette: ink #111113, cream #e6d8b8, amber #ff5a1f.
   The chain, top to bottom: SLTR AUDIO (the bench) -> HADES (the flagship) -> SYNE, PLUTON, AMPHORA.
   Each product is one full-bleed section: its teaser frame stands as the object, melting into a blurred copy of its
   own light that fills the width. Landscape screens put the object to one side and huge type on the other;
   portrait screens and phones let the object fill the screen with the type over its foot. */
@font-face {
  font-family: "Barlow Condensed";
  src: url("fonts/BarlowCondensed-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
:root {
  --ink: #111113;
  --amber: #ff5a1f;
  --cream: #e6d8b8;
  --cream-2: color-mix(in srgb, var(--cream) 72%, var(--ink));
  --rule: color-mix(in srgb, var(--cream) 16%, transparent);
  --bg: var(--ink);
  --fg: var(--cream);
  --display: "Barlow Condensed", "Arial Narrow", sans-serif-condensed, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --edge: clamp(1.25rem, 5vw, 11rem);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--fg); font: 400 1rem/1.5 var(--body); -webkit-text-size-adjust: 100%; overflow-x: hidden; }
a { color: inherit; text-underline-offset: 0.18em; }
:focus-visible { outline: 3px solid var(--fg); outline-offset: 3px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 9;
  padding: 0.75rem 1rem; background: var(--cream); color: var(--ink);
  font: 700 1rem/1 var(--display); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
}
.skip:focus { top: 1rem; }
.kicker, .chain-k, .foot-h {
  margin: 0; color: var(--amber);
  font: 700 clamp(0.875rem, 0.5rem + 0.5vw, 1.6rem)/1 var(--display); letter-spacing: 0.22em; text-transform: uppercase;
}
.wm { display: block; width: 100%; height: auto; }
.wm-ink { fill: var(--cream); }
.wm-dash { fill: var(--amber); }

/* the only chrome: one quiet link to the sign-up, top right */
.top { position: absolute; top: 0; right: 0; z-index: 4; padding: clamp(1rem, 3vh, 2rem) var(--edge); }
.top-cta {
  display: inline-block; padding: 0.4rem 0; border-bottom: 1px solid var(--amber); text-decoration: none;
  font: 700 clamp(0.95rem, 0.7rem + 0.35vw, 1.3rem)/1 var(--display); letter-spacing: 0.16em; text-transform: uppercase;
}

/* 1 · SLTR AUDIO: the bench, full-bleed, the wordmark at full size in the text-safe lower left */
.brand { position: relative; height: 100vh; height: 100svh; min-height: 34rem; overflow: hidden; background: #1b1916; }
.brand-pic, .brand-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.brand-img { object-fit: cover; object-position: 50% 50%; }
.brand-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(17, 15, 13, 0.9) 0%, rgba(17, 15, 13, 0.62) 30%, rgba(17, 15, 13, 0) 62%),
    linear-gradient(to right, rgba(17, 15, 13, 0.55) 0%, rgba(17, 15, 13, 0) 55%);
}
.brand-entry { position: absolute; left: var(--edge); right: var(--edge); bottom: clamp(2rem, 9vh, 7rem); z-index: 2; }
.brand-mark { margin: 0 0 clamp(1rem, 2.4vh, 2rem); width: min(100%, max(18rem, min(46vw, 100vh))); line-height: 0; }
.brand-line { margin: 0 0 clamp(1.5rem, 4vh, 3rem); max-width: 36ch; font: 400 clamp(1.05rem, 0.75rem + 0.7vw, 2.25rem)/1.4 var(--body); }
.chain { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem 1.5rem; }
.chain ol { display: flex; flex-wrap: wrap; gap: 0.5rem 0; margin: 0; padding: 0; list-style: none; }
.chain li + li::before { content: "/"; padding: 0 0.9em; color: var(--cream-2); }
.chain a {
  text-decoration: none;
  font: 700 clamp(1.05rem, 0.7rem + 0.7vw, 2rem)/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase;
}
.chain a:hover { color: var(--amber); }

/* 2-5 · the products */
.product { position: relative; height: 100vh; height: 100svh; min-height: 36rem; overflow: hidden; isolation: isolate; background: var(--ink); }
/* the ambient plate: the same frame blurred and carried outward from its own edges (tools/rev4_images.swift), 4:1, at
   the section's height and centred under the object, so the sharp frame fades into a blurred copy of itself at the
   same scale; it falls to ink well before its ends */
.ambient { position: absolute; top: 0; height: 100%; left: var(--x); aspect-ratio: 4 / 1; transform: translateX(-50%); z-index: -2; background: center / 100% 100% no-repeat; }
.ambient::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(17, 17, 19, 0) 78%, var(--ink) 100%); }
/* one grain over machine and ground alike */
.product::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("img/grain.png") 0 0 / 160px 160px repeat; opacity: 0.07; mix-blend-mode: overlay; }
.p-hades .ambient { background-image: url("img/hades-hardware-ambient.jpg"); }
.p-syne .ambient { background-image: url("img/syne-hardware-ambient.jpg"); }
.p-pluton .ambient { background-image: url("img/pluton-hardware-ambient.jpg"); }
.p-amphora .ambient { background-image: url("img/amphora-hardware-ambient.jpg"); }
.p-hades { --x: 62%; }
.p-syne { --x: 66%; }
.p-pluton { --x: 34%; }
.p-amphora { --x: 66%; }
/* the object: the whole portrait frame, full height, feathered into the ambient on all four sides */
.obj { position: absolute; top: 0; bottom: 0; left: var(--x); height: 100%; aspect-ratio: 1520 / 2688; transform: translateX(-50%); z-index: -1;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28%, #000 72%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 18%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 28%, #000 72%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 18%, #000 86%, transparent 100%);
  mask-composite: intersect; }
.obj img { display: block; width: 100%; height: 100%; object-fit: cover; }
.shade { display: none; }
/* the type: on the open side, allowed to run a little onto the feathered edge of the object */
.copy { position: absolute; top: 0; bottom: 0; left: var(--edge); right: calc(100% - var(--x) + 17vh);
  display: flex; flex-direction: column; justify-content: center; padding: 10vh 0 6vh; container-type: inline-size; }
.p-pluton .copy { left: calc(var(--x) + 17vh); right: var(--edge); align-items: flex-end; text-align: right; }
.copy > * { align-self: flex-start; }
.p-pluton .copy > * { align-self: flex-end; }
.name {
  margin: 0.15em 0 0.2em; line-height: 0.84; white-space: nowrap;
  font: 700 clamp(4.25rem, min(calc(var(--fit) * 1cqi), 40vh), 30rem)/0.84 var(--display); letter-spacing: 0.02em; text-transform: uppercase;
}
.p-syne { --fit: 40; }
.p-pluton { --fit: 27; }
.p-amphora { --fit: 23; }
.p-hades .name { line-height: 0; margin: 0.6rem 0 clamp(1rem, 3vh, 2.5rem); }
.lockup { display: block; width: min(88cqi, 30vh * 2.96); height: auto; }
.line { margin: 0 0 clamp(1rem, 2.6vh, 2rem); max-width: 30ch; font: 400 clamp(1.05rem, 0.75rem + 0.7vw, 2.25rem)/1.4 var(--body); }
.state {
  display: inline-block; margin: 0; padding-top: 0.6rem; border-top: 1px solid color-mix(in srgb, var(--cream) 55%, transparent);
  font: 700 clamp(0.95rem, 0.65rem + 0.45vw, 1.7rem)/1 var(--display); letter-spacing: 0.16em; text-transform: uppercase;
}

/* portrait screens and phones: the object fills the screen, the type sits over its foot */
@media (max-aspect-ratio: 1/1), (max-width: 760px) {
  .product { height: auto; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; }
  .ambient { display: none; }
  .obj { left: 0; right: 0; width: 100%; transform: none; aspect-ratio: auto;
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); }
  .obj img { object-position: 50% 42%; }
  .shade { display: block; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(to top, var(--ink) 0%, rgba(17, 17, 19, 0.82) 24%, rgba(17, 17, 19, 0) 56%); }
  .copy > *, .p-pluton .copy > * { align-self: flex-start; }
  .copy, .p-pluton .copy { position: relative; left: auto; right: auto; align-items: flex-start; text-align: left; padding: 40vh var(--edge) clamp(2.5rem, 8vh, 5rem); }
  .name { font-size: clamp(3.5rem, calc(var(--fit) * 1cqi), 16rem); }
  .lockup { width: min(100cqi, 30rem); }
}

/* the footer: the sign-up as the last scene, then the index, in the same warm grade as the frames above */
.foot {
  position: relative; padding: clamp(4.5rem, 11vw, 11rem) var(--edge) clamp(1.5rem, 3vw, 2.5rem);
  background:
    radial-gradient(90% 55% at 50% 36%, rgba(255, 90, 31, 0.09) 0%, rgba(255, 90, 31, 0) 70%),
    linear-gradient(to bottom, var(--ink) 0%, #16110d 34%, var(--ink) 82%);
}
.foot-sign .kicker { margin-bottom: clamp(1rem, 2vw, 1.75rem); }
.signup { display: grid; gap: 0.75rem; grid-template-columns: minmax(0, 1fr); }
.signup > * { min-width: 0; }
.signup-line { margin: 0 0 clamp(1rem, 3vw, 2rem); font: 700 clamp(2.75rem, 1rem + 6.6vw, 9.5rem)/0.92 var(--display); letter-spacing: 0.02em; text-transform: uppercase; }
.signup label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.row { display: flex; gap: 0.5rem; max-width: 40rem; }
.row input {
  flex: 1 1 auto; min-width: 0; min-height: 3.25rem; padding: 0.6rem 0.9rem;
  border: 2px solid var(--fg); border-radius: 0; background: transparent; color: var(--fg);
  font: 400 1.0625rem/1.2 var(--body);
}
.row input[aria-invalid="true"] { border-width: 3px; }
.row button {
  flex: 0 0 auto; min-height: 3.25rem; padding: 0.6rem 1.4rem;
  border: 2px solid var(--amber); border-radius: 0; background: var(--amber); color: var(--ink);
  font: 700 1.125rem/1 var(--display); letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer;
}
.row button:hover { background: var(--fg); border-color: var(--fg); }
.row button:disabled { opacity: 0.7; cursor: progress; }
.consent { margin: 0; color: var(--cream-2); font-size: clamp(1rem, 0.8rem + 0.3vw, 1.4rem); }
.status { margin: 0; min-height: 1.5em; font-size: 1rem; font-weight: 600; }
.status:empty { min-height: 0; }
.status[data-kind="error"]::before { content: "Error: "; }
.status[data-kind="ok"]::before { content: "\2713\00a0"; }
@media (min-width: 1000px) {
  .signup { grid-template-columns: minmax(0, 1.25fr) minmax(20rem, 40rem); grid-template-rows: 1fr auto auto auto; column-gap: clamp(3rem, 7vw, 10rem); }
  .signup-line { grid-row: 1 / 5; grid-column: 1; margin: 0; align-self: end; }
  .row { grid-row: 2; grid-column: 2; }
  .consent { grid-row: 3; grid-column: 2; }
  .status { grid-row: 4; grid-column: 2; }
}
.foot-grid {
  display: grid; gap: 2.5rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  margin-top: clamp(4rem, 9vw, 9rem); padding-top: clamp(2rem, 3vw, 3rem); border-top: 1px solid var(--rule);
}
@media (min-width: 1000px) { .foot-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.foot-mark { margin: 0 0 1rem; width: clamp(9rem, 12vw, 15rem); line-height: 0; }
.foot-text { margin: 0 0 0.5rem; max-width: 30ch; color: var(--cream-2); font-size: clamp(1rem, 0.8rem + 0.3vw, 1.4rem); }
.foot-h { margin-bottom: 1.1rem; }
.foot-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.7rem; }
.foot-list a { font: 700 clamp(1.05rem, 0.85rem + 0.3vw, 1.35rem)/1.1 var(--display); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; }
.foot-list a:hover { color: var(--amber); }
.foot-col .foot-list li:has(a[href^="mailto"]) a { text-transform: none; letter-spacing: 0.04em; }
.foot-role { margin-left: 0.5rem; color: var(--cream-2); font-size: clamp(0.9375rem, 0.75rem + 0.25vw, 1.25rem); }
.foot-base {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem;
  margin-top: clamp(3rem, 6vw, 6rem); padding-top: 1.25rem; border-top: 1px solid var(--rule); color: var(--cream-2); font-size: clamp(0.9375rem, 0.75rem + 0.25vw, 1.25rem);
}
.foot-base .stamp { width: 1rem; height: auto; fill: var(--cream); }
.foot-top { margin-left: auto; padding: 0.35rem 0; }

/* privacy page (unchanged from Revision 3) */
.doc { max-width: 40rem; margin: 0 auto; padding: clamp(2rem, 8vh, 5rem) 1.25rem 2.5rem; display: flex; flex-direction: column; gap: 1rem; }
.doc h1, .doc h2 { margin: 0.5rem 0 0; font-family: var(--display); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.1; }
.doc h1 { font-size: 2rem; }
.doc h2 { font-size: 1.25rem; }
.doc p, .doc ul { margin: 0; }
.doc .back img { width: 10rem; height: auto; display: block; }
.foot.doc-foot { max-width: 40rem; margin: 0 auto; padding: 1.5rem 1.25rem 1.75rem; background: none; }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; font-size: 1rem; }
.foot-row .stamp { width: 1.1rem; height: auto; }
.foot-row a { display: inline-block; padding: 0.35rem 0; }

/* motion: the object settles as its scene arrives, where the browser supports scroll-driven animation */
@media (prefers-reduced-motion: no-preference) {
  .row button, .chain a, .foot-list a { transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
  @supports (animation-timeline: view()) {
    .obj img { animation: settle linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
    @keyframes settle { from { opacity: 0.35; transform: scale(1.05); } to { opacity: 1; transform: none; } }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}