@font-face{font-family:Noto Lao;src:url('assets/NotoSansLao.ttf') format('truetype');font-display:swap}
:root{color-scheme:dark;--ink:#f3eadb;--mute:#bdb4a7;--warm:#d9bd94;--bg:#131211;--line:#ffffff24}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 system-ui,Noto Lao,sans-serif}
:lang(lo){font-family:Noto Lao,system-ui,sans-serif}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button{color:inherit;font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--warm);outline-offset:5px}
img{display:block;width:100%}
.bar{height:76px;padding:0 clamp(20px,6vw,100px);display:flex;align-items:center;justify-content:space-between;gap:24px;background:#131211}
.mark{font:25px/1 Georgia,serif;letter-spacing:.22em;white-space:nowrap}
.mark span{display:inline-block;width:.26em}
nav,.languages{display:flex;align-items:center;gap:24px}
nav a{color:var(--mute);font-size:.9rem}
.languages{gap:5px}
.languages button{min-width:43px;min-height:44px;border:0;border-bottom:1px solid transparent;background:none;font-size:.85rem;color:var(--mute)}
.languages button[aria-pressed=true]{border-color:var(--warm);color:var(--ink)}
.hero{position:relative;isolation:isolate;display:grid;align-items:center;min-height:clamp(570px,calc(100svh - 76px),900px);background:#151310;overflow:hidden}
.hero-image{position:absolute;z-index:-2;inset:0 0 0 auto;width:80%;height:100%;object-fit:cover;object-position:57% center;animation:arrive 1.2s ease-out both}
.hero:after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,#141210 0%,#141210 18%,#141210db 31%,transparent 61%),linear-gradient(0deg,#14121080,transparent 25%)}
.hero-copy{padding:50px 0 55px;margin-left:clamp(23px,8vw,150px);animation:rise .7s .1s both}
.eyebrow{color:var(--warm);font-size:.75rem;letter-spacing:.16em;margin:0 0 18px}
h1,h2{margin:0;font-family:Georgia,Noto Lao,serif;font-weight:400;letter-spacing:-.035em}
h1{font-size:clamp(76px,11vw,169px);line-height:.82}
h1 span{color:var(--warm)}
h2{font-size:clamp(42px,6.2vw,88px);line-height:1.04}
h2 :lang(lo){font-size:.71em;letter-spacing:0;line-height:1.35}
.tag{font-size:clamp(16px,2vw,23px);margin:28px 0 23px}
.outline{display:inline-flex;gap:13px;align-items:center;padding:10px 19px;min-height:46px;border:1px solid #d9bd9477;transition:background .2s,color .2s}
.outline:hover{background:var(--warm);color:#151310}
.edition{position:absolute;bottom:26px;right:6vw;font:11px system-ui;letter-spacing:.2em;color:var(--ink)}
.wrap{width:min(1220px,88%);margin:auto;padding:clamp(56px,9vw,126px) 0}
.intro{margin-bottom:clamp(25px,5vw,57px)}
.intro p:last-child{max-width:47ch;color:var(--mute);margin-bottom:0}
.details{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:start}
figure{margin:0}
figure img{height:clamp(230px,34vw,455px);object-fit:cover}
figcaption{display:flex;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);color:var(--mute)}
figcaption span:first-child{color:var(--warm)}
.player{aspect-ratio:16/9;background:#090909}
.player button,.player iframe{width:100%;height:100%;border:0}
.player button{position:relative;padding:0;background:black;overflow:hidden;display:grid;place-items:center}
.player img{position:absolute;height:100%;object-fit:cover;opacity:.75;transition:transform .45s,opacity .3s}
.player button:hover img{transform:scale(1.025);opacity:.9}
.player button span{z-index:1;display:grid;place-items:center;width:74px;height:74px;border:1px solid var(--ink);border-radius:50%;background:#111a}
.external{display:inline-block;padding:14px 0;color:var(--warm)}
.box img{object-fit:contain;background:#191714}
footer.wrap{display:flex;justify-content:space-between;align-items:center;gap:22px;padding:36px 0}
footer p{font-size:.85rem;color:var(--mute)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes arrive{from{opacity:.6;transform:scale(1.045)}to{opacity:1;transform:none}}
.reveal.is-seen{animation:rise .55s both}
@media(max-width:670px){
.bar{height:62px;gap:10px}.mark{font-size:21px}nav{gap:10px}nav a{font-size:.78rem}
.hero{min-height:0;padding-top:clamp(220px,65vw,385px);align-items:end}
.hero-image{inset:0;width:100%;height:clamp(255px,79vw,470px);object-position:53% 50%}
.hero:after{background:linear-gradient(0deg,#141210 0%,#141210 42%,transparent 72%)}
.hero-copy{margin:0;padding:12px 6vw 53px}.hero h1{font-size:clamp(64px,17vw,102px)}
.tag{margin:19px 0 16px}.edition{bottom:14px}
.details{grid-template-columns:1fr}
figure img{height:auto;aspect-ratio:4/3}
footer.wrap{align-items:flex-start;flex-direction:column;gap:0}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* Product story */
:root{--bg:#10100f;--ink:#f3ede1;--warm:#cfb88f;--mute:#c2b9ac}
.bar{background:var(--bg);border-bottom:1px solid var(--line)}
.hero-image{width:76%;object-position:42% center}
.hero:after{background:linear-gradient(90deg,#121110 0%,#121110 21%,#121110d9 34%,#12111022 57%,transparent 72%),linear-gradient(0deg,#12111075,transparent 24%)}
.hero h1,.intro h2,.lifestyle h2,.instrument h2{font-family:Georgia,"Times New Roman",serif}
.hero h1{font-size:clamp(77px,9.4vw,142px);line-height:.88}
.hero-kicker{letter-spacing:.2em}
.hero-kicker>span[aria-hidden]{margin:0 .75em;color:var(--mute)}
.editorial-intro{max-width:760px}
.details{gap:clamp(24px,5vw,75px)}
.details figure:nth-child(2){margin-top:clamp(18px,8vw,108px)}
.details img{height:clamp(250px,36vw,480px)}
figcaption{padding:20px 0 23px;align-items:baseline}
figcaption .index{font-size:.73rem;letter-spacing:.12em;color:var(--warm)}
figcaption strong{color:var(--ink);font-weight:500;font-size:clamp(17px,2vw,23px)}
figcaption p{margin:7px 0 0;max-width:48ch;font-size:.93rem}
.instrument{background:#191816;border-block:1px solid var(--line)}
.instrument-inner{display:grid;grid-template-columns:.85fr 1fr;align-items:center;gap:clamp(25px,9vw,135px)}
.instrument-visual{background:radial-gradient(ellipse,#34302a,#1a1917 70%);min-height:460px;display:grid;place-items:center;padding:30px}
.instrument-visual img{max-width:165px;filter:drop-shadow(14px 20px 19px #0009)}
.instrument h2{font-size:clamp(43px,5.5vw,80px)}
.instrument dl{margin:30px 0 0}
.instrument dl div{border-top:1px solid var(--line);padding:13px 0}
.instrument dt{color:var(--ink);font-size:.98rem}
.instrument dd{margin:3px 0 0;color:var(--mute);font-size:.91rem}
.profile{max-height:430px;object-fit:cover;object-position:center 55%}
.lifestyle{background:#1d1a17}
.lifestyle h2{font-size:clamp(40px,5vw,72px)}
@media(max-width:670px){
nav a:nth-child(2){display:none}
.hero-image{width:100%;object-position:38% center}
.hero:after{background:linear-gradient(0deg,#121110 0%,#121110 41%,transparent 75%)}
.hero h1{font-size:clamp(62px,16vw,99px)}
.details figure:nth-child(2){margin-top:0}
.details img{height:auto}
.instrument-inner{grid-template-columns:1fr}
.instrument-visual{min-height:325px}
.instrument-visual img{max-width:115px}
.profile{max-height:240px}
}
.view-controls{display:flex;gap:clamp(12px,4vw,48px);border-bottom:1px solid var(--line);margin:32px 0 26px}
.view-controls button{background:none;border:0;border-bottom:2px solid transparent;min-height:48px;padding:4px 3px;color:var(--mute)}
.view-controls button:hover,.view-controls button[aria-pressed=true]{color:var(--ink)}
.view-controls button[aria-pressed=true]{border-color:var(--warm)}
.view-index{font-size:.7em;color:var(--warm);margin-right:.55em}
.instrument-visual img{width:auto;height:clamp(250px,31vw,380px);max-width:100%;object-fit:contain}
.view-copy h3{margin:0 0 12px;font-size:clamp(24px,3vw,42px);line-height:1.25;font-weight:500}
.view-copy p{max-width:44ch;color:var(--mute);margin:0}
.view-dimensions{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;border-top:1px solid var(--line);padding-top:13px;margin:26px 0 0;color:var(--mute);font-size:.85rem}
.view-dimensions strong{font-weight:500;color:var(--ink)}
@media(max-width:670px){.instrument-visual img{height:255px}.view-controls{margin-top:20px}}
.sound-section{background:#191816;border-block:1px solid var(--line)}
.sound-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.sound-inner h2{font:400 clamp(36px,6vw,77px)/1.05 Georgia,"Times New Roman",serif}
.sound-inner p:not(.eyebrow){color:var(--mute);margin:12px 0 0}
.sound-control button{background:transparent;color:var(--ink)}
.sound-control button:hover{background:var(--warm);color:#151310}
.sound-control p:empty{display:none}
.lid-quote{margin:22px 0 0;border-inline-start:1px solid var(--warm);padding-inline-start:20px}
.lid-quote blockquote{margin:0;color:var(--ink);font-size:clamp(16px,1.6vw,21px);line-height:1.85}
.lid-quote figcaption{display:block;border:0;padding:12px 0 0;font-size:.92rem}
.box-options{background:#1d1a17}
.box-variant{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:clamp(20px,5vw,68px)}
.box-variant img{aspect-ratio:4/3;object-fit:contain;background:#151412}
.box-variant .lid-quote{margin:0}
@media(max-width:670px){.box-variant{grid-template-columns:1fr}}

.specifications{background:#191714;border-block:1px solid var(--line)}
.specifications h2{font-size:clamp(36px,5.4vw,70px)}
.spec-note{color:var(--mute);max-width:66ch;margin:20px 0 clamp(28px,5vw,60px)}
.spec-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5vw,62px)}
.spec-group h3{color:var(--warm);font-size:1.1rem;font-weight:600;margin:0 0 12px}
.spec-group dl{margin:0}
.spec-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.3fr);gap:16px;padding:12px 0;border-top:1px solid var(--line)}
.spec-row dt{font-weight:600}
.spec-row dd{color:var(--mute);margin:0}
@media(max-width:860px){.spec-grid{grid-template-columns:1fr}}
@media(max-width:390px){nav a[href="#film"]{display:none}}

.story-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 28px 0 18px;
}

.story-nav button {
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--mute);
}

.story-nav button[aria-pressed="true"] {
  border-color: var(--warm);
  color: var(--ink);
}

.story-nav small {
  margin-inline-end: .55em;
  color: var(--warm);
  font-variant-numeric: tabular-nums;
}

.story-slides {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-color: var(--warm) #1d1a17;
}

.story-slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
}

.story-slide img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  background: #151412;
}

.story-slide figcaption {
  display: block;
  padding: 18px 0;
}

.story-slide h3 {
  margin: 0 0 5px;
  color: var(--ink);
  font-size: 1.25rem;
}

.story-slide p {
  margin: 0;
}

@media (max-width: 560px) {
  .story-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.preorder-cta {
  margin-inline-start: 8px;
  margin-block-start: 8px;
}

.preorder {
  border-block: 1px solid var(--line);
  background: #191714;
}

.preorder-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 7vw, 90px);
}

.preorder-layout p:not(.eyebrow) {
  color: var(--mute);
}

.preorder-summary dl {
  margin: 0 0 20px;
}

.preorder-summary button:disabled {
  cursor: default;
  background: transparent;
  color: var(--mute);
  border-color: var(--line);
}

@media (max-width: 720px) {
  .preorder-layout {
    grid-template-columns: 1fr;
  }
}

.preorder-steps {
  padding-inline-start: 1.4em;
  color: var(--mute);
  margin-block: 0 20px;
}

.preorder-steps li + li {
  margin-block-start: 8px;
}

.preorder-form {
  display: grid;
  gap: 14px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.preorder-form p {
  margin: 0;
}

.preorder-form label {
  display: grid;
  gap: 5px;
}

.preorder-form input {
  width: 100%;
  min-height: 46px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
}

.preorder-total, .preorder-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.preorder-total {
  justify-content: space-between;
  border-block: 1px solid var(--line);
  padding-block: 12px;
}

.preorder-total output {
  color: var(--warm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.preorder-actions button {
  background: transparent;
}

.preorder-actions button:hover:not(:disabled) {
  background: var(--warm);
}

.preorder-form-hint {
  font-size: .9rem;
}

.preorder-form input::file-selector-button {
  margin-inline-end: 10px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.preorder-summary .preorder-prices {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 24px clamp(36px, 5vw, 56px);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

.preorder-price-option dt {
  margin-bottom: 4px;
  color: var(--mute);
}

.preorder-price-option dd {
  margin: 0;
}

.preorder-price-option strong {
  display: flex;
  align-items: baseline;
  gap: .22em;
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.035em;
  white-space: nowrap;
}

.preorder-price-option strong,
.preorder-price-option .price-currency,
.preorder-total output,
.preorder-summary span[lang="en"] {
  font-family: system-ui, sans-serif;
  font-variant-numeric: lining-nums tabular-nums;
}

.preorder-price-option .price-currency {
  font-size: .4em;
  letter-spacing: .02em;
}

#preorder-price {
  color: var(--warm);
}

.preorder-total output {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
}

.preorder-price-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.preorder-savings {
  padding: 3px 8px;
  border: 1px solid var(--warm);
  border-radius: 999px;
  color: var(--warm);
  font-size: .75rem;
  font-weight: 600;
  white-space: nowrap;
}

.preorder-qr {
  margin-block: 0 20px;
}

.preorder-qr summary {
  cursor: pointer;
}

.preorder-qr summary::-webkit-details-marker {
  display: none;
}

.preorder-qr-icon::before {
  content: '+';
}

.preorder-qr[open] .preorder-qr-icon::before {
  content: '−';
}

.preorder-qr-panel {
  max-width: 32ch;
  padding: 12px 0 0;
}

.preorder-qr-panel p {
  margin: 0;
}

.preorder-qr-panel a {
  display: block;
  margin-top: 12px;
  color: var(--warm);
}

.preorder-qr-panel img {
  width: 100%;
  height: auto;
  margin-bottom: 6px;
}

.footer-follow h2,
.footer-follow h2 span {
  font-family: inherit;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: normal;
}

.footer-follow ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  font-size: .85rem;
}

.footer-follow a {
  color: var(--warm);
}

.footer-follow a:hover {
  text-decoration: underline;
}

.footer-follow small {
  color: var(--mute);
  margin-inline-start: 4px;
}

#receipt-form {
  display: grid;
  justify-items: start;
  gap: .65rem;
  margin: 1.25rem 0;
}
#receipt-form input { max-width: 100%; }
#receipt-message:empty { display: none; }

#tracking-timeline {
  margin: 1.5rem 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(218, 191, 146, .28);
}
#tracking-timeline h3 { margin: 0 0 1rem; }
#timeline-steps {
  --marker-size: 2.15rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
#timeline-steps li {
  position: relative;
  display: grid;
  grid-template-columns: var(--marker-size) minmax(0, 1fr);
  align-items: start;
  gap: .7rem;
  padding-bottom: .65rem;
  color: var(--mute);
}
#timeline-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  inset: calc(var(--marker-size) + .2rem) auto .2rem calc(var(--marker-size) / 2);
  border-left: 1px solid var(--line);
}
#timeline-steps .timeline-marker svg {
  display: block;
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#timeline-steps .recorded .timeline-marker,
#timeline-steps .recorded::after { border-color: var(--warm); color: var(--warm); }
#timeline-steps [aria-current] .timeline-marker {
  background: var(--warm);
  border-color: var(--warm);
  color: var(--bg);
}
.timeline-step-content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .2rem .65rem;
  padding: .25rem .6rem .4rem;
  border: 1px solid transparent;
}
#timeline-steps [aria-current] .timeline-step-content {
  border-color: var(--warm);
  border-radius: .4rem;
  background: #d9bd9412;
  color: var(--ink);
}
.timeline-current {
  border: 1px solid var(--warm);
  border-radius: 1rem;
  padding: 0 .45rem;
  color: var(--warm);
  font-size: .75rem;
}
.timeline-note { flex-basis: 100%; font-size: .85rem; }

.bar .tracking-nav {
  border: 1px solid var(--line);
  padding: .3rem .65rem;
  white-space: nowrap;
}
.tracking-section {
  padding: clamp(48px, 8vw, 104px) 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: 1rem;
}

#tracking-lookup {
  display: grid;
  gap: .5rem;
  max-width: 30rem;
  margin: 1rem 0;
}
#tracking-lookup button { justify-self: start; margin-top: .35rem; }
@media (max-width: 700px) {
  .bar { height: auto; min-height: 62px; flex-wrap: wrap; padding-block: .65rem; }
  .bar nav { order: 1; display: flex; flex-wrap: wrap; width: 100%; align-items: center; }
}

#booking-confirmation {
  padding: 1rem;
  border: 1px solid var(--line);
}
#booking-confirmation p { margin-bottom: .75rem; }
button.is-copied::before { content: "✓"; margin-inline-end: .4em; }
button.is-copied { border-color: #93bd9d; color: #b9dfbf; }

.reservation-dialog {
  width: min(42rem, calc(100% - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: clamp(1rem, 4vw, 2rem);
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: .6rem;
}
.reservation-dialog::backdrop { background: rgb(10 8 6 / 80%); }
.reservation-dialog header, .dialog-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem;
}
.reservation-dialog header { justify-content: space-between; }
.reservation-dialog h2 { font-size: clamp(1.35rem, 4vw, 2rem); margin: 0; }
.booking-action {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}
.action-icon { width: 1.15rem; height: 1.15rem; flex: none; }
#open-booking:not(:disabled) {
  background: var(--warm);
  border-color: var(--warm);
  color: var(--bg);
}
#open-booking:not(:disabled):hover { background: var(--ink); }

.booking-progress {
  --marker-size: 2.15rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  color: var(--mute);
}
.booking-progress li {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: .55rem;
  padding-inline: .2rem;
  text-align: center;
  font-size: .85rem;
}
.booking-progress li:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-block-start: calc(var(--marker-size) / 2);
  inset-inline-start: calc(50% + var(--marker-size) / 2 + .25rem);
  width: calc(100% - var(--marker-size) - .5rem);
  border-top: 1px solid var(--line);
}
.step-marker {
  width: var(--marker-size);
  height: var(--marker-size);
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  font: 600 .85rem system-ui, sans-serif;
}
.step-marker svg { display: none; width: 1rem; height: 1rem; }
.booking-progress [aria-current] { color: var(--ink); font-weight: 700; }
.booking-progress [aria-current] .step-marker {
  background: var(--warm);
  border-color: var(--warm);
  color: var(--bg);
}
.booking-progress .is-complete .step-marker,
.booking-progress .is-complete::after { border-color: var(--warm); color: var(--warm); }
.booking-progress .is-complete .step-marker span { display: none; }
.booking-progress .is-complete .step-marker svg { display: block; }
.booking-fields { display: grid; gap: .85rem; }
.booking-test-note { padding: .75rem; border: 1px solid var(--line); }
#booking-confirmation { margin-top: 1rem; }
#booking-confirmation .outline { margin-bottom: .35rem; }

.reservation-dialog .outline:has(> .action-icon) {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}
.reservation-dialog button.is-copied > .action-icon { display: none; }
.reservation-dialog button.is-copied::before { margin-inline-end: 0; }