:root{
  --bg:#faf7f0;
  --fg:#15110b;
  --fg-muted:#6e6353;
  --line:rgba(21,17,11,0.14);
  --accent:#b9782f;
  --accent-ink:#7c4f1c;
  --maxw:1180px;
}

/* Dark band: re-scopes the same custom properties used everywhere else,
   so any component (eyebrow, buttons, spec rows, cards, ...) re-themes
   automatically just by sitting inside a .band-ink section — no
   per-component dark variant needed. */
.band-ink{
  --bg:#0d0b08;
  --fg:#f6f0e3;
  --fg-muted:#a89a82;
  --line:rgba(246,240,227,0.14);
  --accent:#e3a35c;
  --accent-ink:#eec585;
  background:var(--bg);
  color:var(--fg);
}

*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:"Fraunces", Georgia, "Times New Roman", serif;
  font-weight:600;
  line-height:1.08;
  text-wrap:balance;
  margin:0;
  letter-spacing:-0.01em;
}
p{margin:0;}
a{color:inherit;}
img{max-width:100%;display:block;}
.mono{font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:24px;}
.eyebrow{
  font-family:"IBM Plex Mono", monospace;
  font-size:12.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--accent-ink);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.eyebrow::before{
  content:"";
  width:16px;height:1px;background:var(--accent);
  display:inline-block;
}
section{padding-block:88px;}
@media (max-width:640px){ section{padding-block:56px;} }

/* ---- nav ---- */
/* Fixed overlay rather than in-flow: at rest the opening screen is the
   product image alone; the bar fades in once the visitor scrolls, and
   with JS unavailable it simply stays visible (progressive enhancement).
   Always uses the light (paper) palette regardless of the section
   scrolled beneath it, for one consistent, legible nav treatment. */
header.site-nav{
  position:fixed;
  top:env(safe-area-inset-top,0px);
  left:0;right:0;
  z-index:40;
  --bg:#faf7f0; --fg:#15110b; --fg-muted:#6e6353;
  --line:rgba(21,17,11,0.14); --accent:#b9782f; --accent-ink:#7c4f1c;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.js header.site-nav{
  opacity:0;transform:translateY(-8px);pointer-events:none;
  transition:opacity .35s ease, transform .35s ease;
}
.js header.site-nav.nav-visible{opacity:1;transform:translateY(0);pointer-events:auto;}
@media (prefers-reduced-motion:reduce){
  .js header.site-nav{transition:opacity .01s linear;}
}
.nav-row{
  display:flex;align-items:center;justify-content:space-between;
  padding-block:16px;
}
.brand{
  font-family:"Fraunces",serif;font-weight:600;font-size:19px;
  display:flex;align-items:center;gap:9px;letter-spacing:-0.01em;
}
.brand .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);}
nav.links{display:flex;gap:28px;align-items:center;}
nav.links a{
  font-size:14.5px;color:var(--fg-muted);text-decoration:none;
  transition:color .15s ease;
}
nav.links a:hover{color:var(--fg);}
nav.links a.cta-link{color:var(--accent-ink);font-weight:500;}
nav.links a.cta-link:hover{color:var(--accent);}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 22px;border-radius:999px;
  font-size:14.5px;font-weight:500;text-decoration:none;cursor:pointer;
  border:1px solid transparent;
  transition:transform .15s ease, background .15s ease, border-color .15s ease, opacity .15s ease;
}
.btn:active{transform:scale(0.97);}
.btn-primary{background:var(--accent);color:#1a1408;}
.btn-primary:hover{opacity:.88;}
.btn-ghost{border-color:var(--line);color:var(--fg);background:transparent;}
.btn-ghost:hover{border-color:var(--accent);}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.menu-toggle{
  display:none;background:transparent;border:none;
  width:38px;height:38px;align-items:center;justify-content:center;color:var(--fg);cursor:pointer;
}
.menu-toggle:hover{color:var(--accent-ink);}
@media (max-width:820px){
  nav.links{display:none;}
  .menu-toggle{display:inline-flex;}
}
#mobile-menu{
  display:flex;flex-direction:column;gap:2px;
  border-top:1px solid var(--line);
  padding-block:10px;
}
#mobile-menu[hidden]{display:none!important;}
#mobile-menu a{
  padding:12px 4px;color:var(--fg);text-decoration:none;font-size:15px;
  border-bottom:1px solid var(--line);
}

/* ---- hero ---- */
/* Always the ink palette, regardless of theme: it's built around the
   product's own black-backdrop studio photography. */
.hero{
  position:relative;
  padding-block:0;
  border-bottom:1px solid var(--line);
}

/* Pin sequence (JS-enhanced): the tall spacer holds a sticky viewport-
   height stage. At rest the image sits centered. As the visitor scrolls
   through the spacer's extra height, the image moves aside to clear
   room for the headline — sideways, staying vertically centered with
   the text on desktop; straight up, to sit above the text, on mobile —
   while the headline fades/slides into view; once that settles the
   spacer runs out and the whole panel scrolls away normally — so
   continuing to scroll is what carries the image on up the page. */
.hero-pin-wrap{ position:relative; height:calc(100svh + 80vh); }
.hero-pin-inner{ position:sticky; top:0; height:100svh; overflow:hidden; }
.hero-pin-inner > .wrap{ position:absolute; inset:0; height:100%; pointer-events:none; }

.hero-pin-image{
  position:absolute; top:50%; left:50%;
  width:min(56%, 620px);
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.hero-pin-image::before{
  content:"";position:absolute;inset:-14%;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--accent) 22%, transparent), transparent 72%);
  z-index:-1;
}
.hero-pin-image img{width:100%;height:auto;display:block;object-fit:contain;}

.hero-pin-text{
  position:absolute;left:0;top:50%;
  max-width:min(46%, 480px);
  pointer-events:auto;
  transform:translateY(-50%);
}
.hero-pin-text h1{
  font-size:clamp(30px, 3.6vw, 50px);
  font-weight:700;
  max-width:15ch;
  margin-top:14px;
}
.hero-sub{
  margin-top:16px;max-width:42ch;font-size:16px;color:var(--fg-muted);
}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px;}

.scroll-cue{
  position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 26px);
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  color:var(--fg-muted);text-decoration:none;pointer-events:auto;
  opacity:0;transition:opacity .6s ease;
}
.scroll-cue.cue-visible{opacity:1;}
@media (prefers-reduced-motion:reduce){
  .scroll-cue{transition:opacity .01s linear;}
}
.scroll-cue span{
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
}
.scroll-cue svg{color:var(--accent);}
@media (prefers-reduced-motion:no-preference){
  .scroll-cue svg{animation:bob 1.8s ease-in-out infinite;}
}
@keyframes bob{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(6px);}
}

/* No-JS / reduced-motion fallback: a plain stacked layout, everything
   visible at rest, no pin/scroll dependency. */
.hero-pin-wrap{ height:auto; }
.hero-pin-inner{ position:static; height:auto; overflow:visible; padding-block:0 64px; }
.hero-pin-inner > .wrap{ position:static; height:auto; pointer-events:auto; }
.hero-pin-image{ position:static; transform:none; width:min(70%,520px); margin:0 auto; }
.hero-pin-text{ position:static; transform:none; max-width:60ch; margin:28px auto 0; }
.scroll-cue{ display:none; }

.js .hero-pin-wrap{ height:calc(100svh + 80vh); }
.js .hero-pin-inner{ position:sticky; height:100svh; overflow:hidden; padding-block:0; }
.js .hero-pin-inner > .wrap{ position:absolute; inset:0; pointer-events:none; }
.js .hero-pin-image{
  position:absolute; top:50%; left:50%; width:min(56%,620px); margin:0;
  transform:translate(-50%,-50%) translateX(calc(var(--t,0) * 10vw)) scale(calc(1 - var(--t,0) * 0.08));
}
.js .hero-pin-text{
  position:absolute; left:0; top:50%; max-width:min(46%,480px); margin:0;
  opacity:var(--t,0);
  transform:translateY(-50%) translateX(calc((1 - var(--t,0)) * -32px));
}
.js .scroll-cue{ display:flex; }
@media (prefers-reduced-motion:reduce){
  .js .hero-pin-wrap{ height:auto; }
  .js .hero-pin-inner{ position:static; height:auto; overflow:visible; padding-block:0 64px; }
  .js .hero-pin-inner > .wrap{ position:static; height:auto; pointer-events:auto; }
  .js .hero-pin-image{ position:static; transform:none; width:min(70%,520px); margin:0 auto; }
  .js .hero-pin-text{ position:static; transform:none; opacity:1; max-width:60ch; margin:28px auto 0; }
  .js .scroll-cue{ display:none; }
}

@media (max-width:820px){
  .hero-pin-wrap{ height:auto; }
  .js .hero-pin-wrap{ height:calc(100svh + 90vh); }
  .hero-pin-image{ width:74%; }
  .js .hero-pin-image{
    top:50%; width:64%;
    transform:translate(-50%,-50%) translateY(calc(var(--t,0) * -20vh)) scale(calc(1 - var(--t,0) * 0.14));
  }
  .hero-pin-text{ max-width:100%; }
  .js .hero-pin-text{
    left:0; right:0; top:auto; bottom:6%; max-width:100%; padding-inline:24px;
    transform:translateY(calc((1 - var(--t,0)) * 24px));
  }
}

/* ---- context strip ---- */
.context .wrap{
  padding-block:8px;
  display:grid;grid-template-columns:1.1fr 1.4fr;gap:48px;align-items:start;
}
.context h2{font-size:clamp(26px,2.6vw,32px);max-width:14ch;}
.context p{color:var(--fg-muted);font-size:19px;line-height:1.6;max-width:56ch;}
.context p + p{margin-top:14px;}
@media (max-width:760px){ .context .wrap{grid-template-columns:1fr;gap:18px;} }

/* Scroll-linked reading reveal: each word brightens as the passage
   scrolls through view, tracking scroll position directly (no easing),
   so a single frame is always a valid, readable state. JS-only — the
   no-JS paragraph above renders as plain, fully legible text. */
.js #scroll-text .word{
  color:color-mix(in srgb, var(--fg-muted) 45%, var(--bg) 55%);
}
@media (prefers-reduced-motion:reduce){
  .js #scroll-text .word{color:var(--fg-muted);}
}

/* ---- section heads ---- */
.section-head{max-width:640px;margin-bottom:44px;}
.section-head h2{font-size:clamp(26px,3.4vw,38px);margin-top:12px;}
.section-head p{color:var(--fg-muted);margin-top:14px;font-size:16px;}

/* ---- listen (video placeholders) ---- */
.listen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
.listen-card{margin:0;}
.video-ph{
  aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  border:1px solid var(--line);color:var(--accent);
  background:radial-gradient(closest-side, color-mix(in srgb, var(--accent) 10%, transparent), transparent 90%);
}
.video-ph span{
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-muted);
}
.listen-card figcaption{padding-top:18px;}
.listen-card h3{font-size:19px;}
.listen-card p{color:var(--fg-muted);font-size:14.5px;margin-top:8px;}
@media (max-width:900px){ .listen-grid{grid-template-columns:1fr;gap:32px;} }

/* ---- features ---- */
.feature-layout{
  display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;
}
/* ---- product carousel ---- */
.carousel{
  position:relative;
}
.carousel-track{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;
}
.carousel-track::-webkit-scrollbar{display:none;}
.carousel-slide{
  flex:0 0 100%;aspect-ratio:1/1;scroll-snap-align:center;
  display:flex;align-items:center;justify-content:center;position:relative;
  margin:0;
}
.carousel-slide img{width:82%;height:82%;object-fit:contain;}
.carousel-slide figcaption{
  position:absolute;left:0;top:16px;
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.08em;
  color:var(--fg-muted);text-transform:uppercase;
}
.carousel-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:36px;height:36px;border-radius:50%;
  background:transparent;color:var(--fg);border:none;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.carousel-btn:hover{background:var(--line);color:var(--accent-ink);}
.carousel-btn.prev{left:0;}
.carousel-btn.next{right:0;}
.carousel-dots{
  position:absolute;left:0;right:0;bottom:14px;
  display:flex;justify-content:center;gap:7px;
}
.carousel-dots button{
  width:6px;height:6px;border-radius:50%;background:var(--line);
  border:none;padding:0;cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.carousel-dots button.active{background:var(--accent);transform:scale(1.35);}
@media (max-width:840px){ .carousel-slide img{width:76%;height:76%;} }

.feature-list{display:flex;flex-direction:column;gap:28px;}
.feature-item{display:flex;gap:16px;}
.feature-icon{
  flex:none;width:22px;height:22px;color:var(--accent-ink);
}
.feature-item h3{font-size:18px;font-weight:600;}
.feature-item p{color:var(--fg-muted);font-size:15px;margin-top:6px;}
@media (max-width:840px){ .feature-layout{grid-template-columns:1fr;gap:32px;} }

/* ---- how it works ---- */
.steps{
  display:grid;grid-template-columns:repeat(3,1fr);gap:40px;
}
.step{
  display:flex;flex-direction:column;
}
.step-media{aspect-ratio:4/3;overflow:hidden;}
.step-media img{width:100%;height:100%;object-fit:cover;}
.step-body{padding-top:20px;}
.step-num{
  font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--accent-ink);
  letter-spacing:0.08em;
}
.step h3{font-size:18px;margin-top:8px;}
.step p{color:var(--fg-muted);font-size:14.5px;margin-top:8px;}
@media (max-width:900px){ .steps{grid-template-columns:1fr;gap:32px;} }

/* ---- specs ---- */
.specs-layout{
  display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;
}
.spec-row{
  display:flex;justify-content:space-between;gap:16px;
  padding-block:14px;border-bottom:1px solid var(--line);
  font-size:14.5px;
}
.spec-row:first-child{padding-top:0;}
.spec-row:last-child{border-bottom:none;}
.spec-row dt{color:var(--fg-muted);}
.spec-row dd{margin:0;font-family:"IBM Plex Mono",monospace;text-align:right;font-size:13.5px;font-variant-numeric:tabular-nums;}
@media (max-width:840px){ .specs-layout{grid-template-columns:1fr;gap:32px;} }
.specs-media{
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
}
.specs-media img{width:100%;height:100%;object-fit:contain;}

.travel-lead{color:var(--fg-muted);font-size:16px;max-width:46ch;margin-bottom:28px;}

/* ---- gallery strip ---- */
.gallery-strip{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:16px;}
.gallery-strip a{overflow:hidden;display:block;aspect-ratio:4/5;}
.gallery-strip img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.gallery-strip a:hover img{transform:scale(1.04);}
@media (max-width:760px){ .gallery-strip{grid-template-columns:1fr 1fr;} .gallery-strip a:first-child{grid-column:1/-1;aspect-ratio:16/9;} }

/* ---- craft / values ---- */
.values-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:32px;
  border-top:1px solid var(--line);padding-top:28px;
}
.value-num{
  font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--accent-ink);letter-spacing:.08em;
}
.value h3{font-size:18px;margin-top:10px;}
.value p{color:var(--fg-muted);font-size:14.5px;margin-top:8px;}
@media (max-width:900px){ .values-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .values-grid{grid-template-columns:1fr;} }

/* ---- accessories ---- */
.acc-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
}
.acc-card{
  padding:26px 24px 26px 0;display:flex;flex-direction:column;gap:12px;
  border-bottom:1px solid var(--line);
}
.acc-icon{width:22px;height:22px;color:var(--accent-ink);}
.acc-card h3{font-size:16.5px;font-weight:600;}
.acc-card p{color:var(--fg-muted);font-size:14px;flex:1;}
.acc-tag{
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:0.06em;
  color:var(--fg-muted);text-transform:uppercase;
}
@media (max-width:900px){
  .acc-grid{grid-template-columns:1fr 1fr;}
  .acc-card{padding-right:16px;}
}
@media (max-width:560px){ .acc-grid{grid-template-columns:1fr;} }

/* ---- testimonials ---- */
.testi-note{
  display:block;font-size:12.5px;color:var(--fg-muted);margin-bottom:28px;
}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;}
.testi-card{display:flex;flex-direction:column;gap:20px;}
.testi-tag{
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--accent-ink);
}
.testi-quote{font-family:"Fraunces",serif;font-size:18px;font-style:italic;line-height:1.45;}
.testi-who{margin-top:auto;}
.testi-who span{display:block;}
.testi-name{font-size:14px;font-weight:600;}
.testi-role{font-size:12.5px;color:var(--fg-muted);}
@media (max-width:900px){ .testi-grid{grid-template-columns:1fr;gap:32px;} }

/* ---- faq ---- */
.faq-list{border-top:1px solid var(--line);}
details.faq-item{border-bottom:1px solid var(--line);padding-block:18px;}
details.faq-item summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;
  align-items:center;font-size:16.5px;font-weight:500;
}
details.faq-item summary::-webkit-details-marker{display:none;}
.faq-plus{
  flex:none;width:22px;height:22px;position:relative;color:var(--accent-ink);
}
.faq-plus::before,.faq-plus::after{
  content:"";position:absolute;background:currentColor;
}
.faq-plus::before{left:0;top:50%;width:100%;height:1.5px;transform:translateY(-50%);}
.faq-plus::after{top:0;left:50%;width:1.5px;height:100%;transform:translateX(-50%);transition:transform .2s ease;}
details.faq-item[open] .faq-plus::after{transform:translateX(-50%) rotate(90deg);}
.faq-a{color:var(--fg-muted);font-size:15px;margin-top:14px;max-width:64ch;}

/* ---- get it / pricing ---- */
.price-card{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding-top:32px;border-top:1px solid var(--line);
}
.price-card-amount{display:flex;align-items:baseline;gap:10px;}
.price-card-amount b{font-family:"Fraunces",serif;font-size:40px;font-weight:600;}
.price-card-amount span{color:var(--fg-muted);font-size:14.5px;}
.price-card-note{color:var(--fg-muted);font-size:14px;margin-top:6px;}
@media (max-width:600px){
  .price-card{flex-direction:column;align-items:flex-start;}
  .price-card .btn{width:100%;}
}

/* ---- contact ---- */
.contact-layout{display:grid;grid-template-columns:0.9fr 1.1fr;gap:56px;}
.contact-info h2{font-size:clamp(26px,3.2vw,36px);}
.contact-info p{color:var(--fg-muted);margin-top:14px;font-size:15.5px;max-width:40ch;}
.contact-detail{margin-top:32px;display:flex;flex-direction:column;gap:16px;}
.contact-detail a{text-decoration:none;font-size:15px;display:flex;gap:10px;align-items:center;}
.contact-detail a:hover{color:var(--accent-ink);}
.contact-form{display:flex;flex-direction:column;gap:22px;}
.form-row{display:flex;flex-direction:column;gap:7px;}
.form-row label{font-size:13px;color:var(--fg-muted);}
.form-row input,.form-row select,.form-row textarea{
  background:transparent;border:none;border-bottom:1px solid var(--line);border-radius:0;
  padding:9px 2px;color:var(--fg);font-family:inherit;font-size:14.5px;
  width:100%;
}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{
  outline:none;border-color:var(--accent);
}
.form-row textarea{resize:vertical;min-height:90px;}
.form-two{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
@media (max-width:560px){ .form-two{grid-template-columns:1fr;} }
.form-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:6px;}
.form-note{font-size:12.5px;color:var(--fg-muted);}
#form-success{
  display:flex;gap:12px;align-items:flex-start;
}
#form-success[hidden]{display:none!important;}
#form-success svg{flex:none;color:var(--accent-ink);margin-top:2px;}
@media (max-width:900px){ .contact-layout{grid-template-columns:1fr;} }

/* ---- footer ---- */
footer{padding-block:56px 40px;}
.imprint{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:32px;
  padding-bottom:40px;margin-bottom:32px;border-bottom:1px solid var(--line);
}
.imprint h4{
  font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--fg-muted);margin-bottom:12px;
}
.imprint p{font-size:13.5px;color:var(--fg-muted);line-height:1.7;}
.imprint p b{color:var(--fg);font-weight:600;}
@media (max-width:760px){ .imprint{grid-template-columns:1fr;gap:24px;} }
.foot-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;}
.foot-row .brand{font-size:16px;}
.foot-legal{font-size:12.5px;color:var(--fg-muted);}