:root {
    --bg:#e8ebea; --surface:#dde2e0; --surface-2:#d3d9d7; --card:#f3f5f4;
    --ink:#121718; --body:#323b3a; --muted:#5b6563; --faint:#8a9492;
    --accent:#2b4d63; --accent-ink:#ffffff; --accent-soft:rgba(43,77,99,.12);
    --groove:rgba(18,23,24,.045); --glow:rgba(143,182,207,.35);
    --shadow:0 1px 2px rgba(18,23,24,.06), 0 12px 32px -12px rgba(18,23,24,.22);
    --ease:cubic-bezier(.22,.8,.24,1);
    --serif:'Instrument Serif', 'Iowan Old Style', Georgia, serif;
    --sans:'Schibsted Grotesk', ui-sans-serif, system-ui, sans-serif;
    color-scheme:light;
  }
  [data-theme="dark"] {
    --bg:#0f1314; --surface:#181e1f; --surface-2:#212829; --card:#151a1b;
    --ink:#e7ebe9; --body:#c3cac8; --muted:#939d9a; --faint:#6a7472;
    --accent:#8fb6cf; --accent-ink:#0f1314; --accent-soft:rgba(143,182,207,.14);
    --groove:rgba(231,235,233,.05); --glow:rgba(70,110,135,.35);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 40px -14px rgba(0,0,0,.7);
    color-scheme:dark;
  }

  * { box-sizing:border-box; }
  html { -webkit-text-size-adjust:100%; }
  html, body { margin:0; padding:0; background:var(--bg); color:var(--ink); }
  body {
    font-family:var(--sans); font-size:16px; line-height:1.55;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
    transition:background-color .5s var(--ease), color .5s var(--ease);
  }
  body::before {
    content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
    background:
      repeating-radial-gradient(circle at 100% 0%, transparent 0 15px, var(--groove) 15px 16px),
      radial-gradient(60vmax 50vmax at 100% 0%, var(--glow), transparent 70%);
    -webkit-mask-image:radial-gradient(circle at 100% 0%, #000, transparent 70vmax);
            mask-image:radial-gradient(circle at 100% 0%, #000, transparent 70vmax);
  }
  a { color:var(--accent); text-decoration:none; transition:color .25s; }
  a:hover { color:var(--ink); }
  img { display:block; max-width:100%; }
  button, input { font:inherit; color:inherit; }
  ::selection { background:var(--accent); color:var(--accent-ink); }

  [data-action] { cursor:pointer; }
  :focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }

  .wrap { max-width:1200px; margin:0 auto; padding:0 clamp(20px,5vw,64px); }
  .serif { font-family:var(--serif); font-weight:400; }
  .muted { color:var(--muted); }

  /* Header */
  .site-head {
    position:sticky; top:0; z-index:20;
    background:color-mix(in oklab, var(--bg) 80%, transparent);
    -webkit-backdrop-filter:blur(16px) saturate(1.2); backdrop-filter:blur(16px) saturate(1.2);
    view-transition-name:site-head;
    transition:background-color .5s var(--ease);
  }
  .site-head .wrap { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:18px; padding-bottom:18px; }
  .brand { display:flex; align-items:center; gap:12px; color:var(--ink); }
  .brand:hover { color:var(--ink); }
  .brand-mark { display:flex; }
  .brand-mark i { width:15px; height:15px; border-radius:50%; background:var(--ink); transition:background-color .5s; }
  .brand-mark i + i { background:var(--accent); margin-left:-6px; opacity:.9; }
  .brand-name { font-family:var(--serif); font-size:27px; line-height:1; letter-spacing:-.01em; }
  .nav { display:flex; align-items:center; gap:clamp(14px,2.4vw,30px); font-size:15px; }
  .nav a, .nav [data-action] { color:var(--body); }
  .nav a:hover, .nav [data-action]:hover { color:var(--ink); }
  .icon-btn {
    width:42px; height:42px; flex:none; border:0; border-radius:50%;
    background:var(--surface); color:var(--ink); cursor:pointer;
    display:grid; place-items:center;
    transition:background-color .5s var(--ease), transform .25s var(--ease);
  }
  .icon-btn:hover { transform:scale(1.06); }
  .theme-glyph {
    width:16px; height:16px; border-radius:50%; border:1.5px solid currentColor;
    background:linear-gradient(90deg, currentColor 50%, transparent 50%);
    transition:transform .7s var(--ease);
  }
  [data-theme="dark"] .theme-glyph { transform:rotate(180deg); }
  .brand-logo { width:34px; height:34px; flex:none; border-radius:50%; }

  /* Hamburger (mobile only) */
  .menu-btn { display:none; }
  .menu-glyph { position:relative; display:block; width:16px; height:2px; border-radius:2px; background:currentColor; transition:background-color .2s; }
  .menu-glyph::before, .menu-glyph::after {
    content:""; position:absolute; left:0; width:16px; height:2px; border-radius:2px; background:currentColor;
    transition:transform .35s var(--ease);
  }
  .menu-glyph::before { top:-5px; }
  .menu-glyph::after  { top:5px; }
  .menu-btn[aria-expanded="true"] .menu-glyph { background:transparent; }
  .menu-btn[aria-expanded="true"] .menu-glyph::before { transform:translateY(5px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] .menu-glyph::after  { transform:translateY(-5px) rotate(-45deg); }

  .mobile-menu { display:none; }

  @media (max-width:560px) {
    .nav .hide-sm { display:none; }
    .brand-name { font-size:23px; }
    .brand-logo { width:30px; height:30px; }
    .menu-btn { display:grid; }
    .mobile-menu {
      display:grid; grid-template-rows:0fr; overflow:hidden;
      transition:grid-template-rows .4s var(--ease);
    }
    .mobile-menu.open { grid-template-rows:1fr; }
    .mobile-menu > div { min-height:0; }
    .mobile-menu a {
      display:block; padding:15px 0; font-size:17px; color:var(--body);
      border-top:1px solid var(--surface-2);
    }
    .mobile-menu a:hover, .mobile-menu a:focus-visible { color:var(--ink); }
    .mobile-menu .wrap { padding-bottom:12px; }
  }

  /* Buttons */
  .btn {
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    min-height:48px; padding:0 24px; border:0; border-radius:999px; cursor:pointer;
    background:var(--accent); color:var(--accent-ink); font-size:15px; font-weight:500;
    transition:transform .25s var(--ease), background-color .3s, opacity .3s;
  }
  .btn:hover { transform:translateY(-1px); color:var(--accent-ink); }
  .btn:active { transform:translateY(0) scale(.98); }
  .btn.dark { background:var(--ink); color:var(--bg); }
  .btn.dark:hover { color:var(--bg); }
  .btn.ghost { background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--surface-2); }
  .btn.ghost:hover { color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--ink); }
  .btn-row { display:flex; flex-wrap:wrap; gap:10px; }
  .btn:disabled { opacity:.55; cursor:default; transform:none; }
  .chip {
    display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:0 14px;
    border:0; border-radius:999px; background:var(--surface); color:var(--ink);
    font-size:14px; cursor:pointer; transition:background-color .25s, color .25s;
  }
  .chip:hover { background:var(--surface-2); color:var(--ink); }
  .back { margin-bottom:clamp(28px,5vh,48px); }

  /* Home */
  .hero {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
    gap:clamp(28px,4vw,72px); align-items:end;
    padding:clamp(48px,10vh,120px) 0 clamp(56px,10vh,110px);
  }
  .hero h1 {
    margin:0; font-family:var(--serif); font-weight:400;
    font-size:clamp(52px,9vw,124px); line-height:.92; letter-spacing:-.03em;
  }
  .hero h1 em { display:block; color:var(--accent); padding-left:.5em; transition:color .5s; }
  .hero p { margin:0; max-width:36ch; font-size:clamp(16px,1.35vw,18px); line-height:1.7; color:var(--body); text-wrap:pretty; }
  .hero .count { margin-top:18px; font-size:14px; color:var(--muted); }

  .grid {
    display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,232px),1fr));
    gap:clamp(44px,6vw,72px) clamp(20px,3vw,40px);
  }
  .card { display:flex; flex-direction:column; gap:16px; }
  .cover {
    position:relative; aspect-ratio:1; overflow:hidden; border-radius:12px;
    background:var(--surface);
    transition:transform .6s var(--ease), box-shadow .6s var(--ease), background-color .5s;
  }
  .cover img { width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease), opacity .6s var(--ease); }
  .card:hover .cover { transform:translateY(-6px); box-shadow:var(--shadow); }
  .card:hover .cover img { transform:scale(1.035); }
  .card-title { font-family:var(--serif); font-size:23px; line-height:1.12; letter-spacing:-.005em; text-wrap:pretty; }
  .card-artist { margin-top:4px; font-size:15px; color:var(--muted); }
  img.fade { opacity:0; }
  img.fade.ok { opacity:1; }
  .rise { animation:rise .9s var(--ease) both; animation-delay:calc(var(--i, 0) * 70ms + 120ms); }
  @keyframes rise { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:none; } }

  /* Album */
  .album {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
    gap:clamp(36px,6vw,88px); align-items:start;
  }
  .album-art { position:sticky; top:100px; }
  @media (max-width:760px) { .album-art { position:static; } }
  .album-art .main {
    width:100%; aspect-ratio:1; object-fit:cover; border-radius:16px; background:var(--surface);
    box-shadow:var(--shadow); transition:opacity .25s var(--ease);
    view-transition-name:cover;
  }
  .thumbs { display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
  .thumb {
    width:64px; height:64px; padding:0; border:0; border-radius:10px; overflow:hidden; cursor:pointer;
    background:var(--surface); opacity:.55; outline:2px solid transparent; outline-offset:2px;
    transition:opacity .3s, outline-color .3s;
  }
  .thumb img { width:100%; height:100%; object-fit:cover; }
  .thumb:hover { opacity:.85; }
  .thumb[aria-pressed="true"] { opacity:1; outline-color:var(--accent); }
  .album h1 { margin:0; font-family:var(--serif); font-weight:400; font-size:clamp(40px,5vw,64px); line-height:.98; letter-spacing:-.02em; text-wrap:balance; }
  .album .by { margin:12px 0 0; font-size:clamp(17px,1.6vw,20px); color:var(--muted); }
  .meta {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:18px 24px;
    margin:clamp(28px,4vh,40px) 0; padding:20px 22px; border-radius:16px; background:var(--surface);
    transition:background-color .5s;
  }
  .meta dt { font-size:13px; color:var(--muted); }
  .meta dd { margin:2px 0 0; font-size:15px; }
  .notes { margin:0 0 clamp(28px,4vh,40px); max-width:48ch; font-size:17px; line-height:1.75; color:var(--body); text-wrap:pretty; }
  .tracks { list-style:none; margin:0; padding:0; }
  .tracks li {
    display:grid; grid-template-columns:32px minmax(0,1fr) auto; align-items:baseline; gap:12px;
    padding:10px 12px; margin:0 -12px; border-radius:10px; transition:background-color .2s;
  }
  .tracks li:hover { background:var(--surface); }
  .tracks .n, .tracks .len { font-size:13px; color:var(--faint); font-variant-numeric:tabular-nums; }
  .tracks .t { font-size:16px; }
  .buy {
    display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px 24px;
    margin-top:clamp(32px,5vh,48px); padding:22px 22px 22px 26px; border-radius:20px; background:var(--card);
    box-shadow:var(--shadow); transition:background-color .5s;
  }
  .buy .price { font-family:var(--serif); font-size:clamp(36px,4vw,46px); line-height:1; }
  .buy .how { margin-top:6px; font-size:14px; color:var(--muted); }

  /* Checkout */
  .narrow { max-width:720px; }
  .page-title { margin:0; font-family:var(--serif); font-weight:400; font-size:clamp(40px,5vw,60px); line-height:1; letter-spacing:-.02em; }
  .page-title em { color:var(--accent); }
  .lede { margin:14px 0 0; max-width:42ch; font-size:17px; line-height:1.65; color:var(--body); text-wrap:pretty; }
  .summary {
    display:flex; align-items:center; gap:18px; margin-top:clamp(32px,5vh,48px);
    padding:14px 22px 14px 14px; border-radius:18px; background:var(--surface); transition:background-color .5s;
  }
  .summary img { width:68px; height:68px; flex:none; border-radius:10px; object-fit:cover; view-transition-name:cover; }
  .summary .grow { flex:1; min-width:0; }
  .summary .title { font-family:var(--serif); font-size:21px; line-height:1.15; }
  .summary .price { font-size:17px; font-weight:500; font-variant-numeric:tabular-nums; }
  .step { margin-top:clamp(44px,7vh,64px); }
  .step-head { display:flex; align-items:center; gap:14px; margin:0 0 22px; font-size:19px; font-weight:500; }
  .step-num {
    width:32px; height:32px; flex:none; border-radius:50%; display:grid; place-items:center;
    background:var(--ink); color:var(--bg); font-size:14px; transition:background-color .5s, color .5s;
  }
  .pay { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:clamp(22px,4vw,40px); align-items:center; }
  .qr { background:#fff; padding:14px; border-radius:18px; box-shadow:var(--shadow); max-width:260px; }
  .qr img { width:100%; aspect-ratio:1; object-fit:contain; }
  .amount { margin:0; font-size:16px; color:var(--muted); }
  .amount strong { display:block; margin-top:2px; font-family:var(--serif); font-weight:400; font-size:42px; line-height:1; color:var(--ink); }
  .upi { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:20px; }
  .upi code { font-family:ui-monospace, 'SF Mono', Menlo, monospace; font-size:14px; padding:8px 12px; border-radius:10px; background:var(--surface); word-break:break-all; }
  .hint { margin:18px 0 0; max-width:34ch; font-size:15px; line-height:1.6; color:var(--muted); text-wrap:pretty; }
  .field { display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
  .field label { font-size:14px; color:var(--muted); }
  .field input {
    width:100%; min-height:52px; padding:0 16px; border:0; border-radius:14px; outline:none;
    background:var(--surface); color:var(--ink); font-size:16px;
    box-shadow:inset 0 0 0 1.5px transparent;
    transition:box-shadow .2s, background-color .3s;
  }
  .field input::placeholder { color:var(--faint); }
  .field input:focus { background:var(--card); box-shadow:inset 0 0 0 1.5px var(--accent); }
  .fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); column-gap:16px; }
  .submit-row { display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin-top:16px; }

  /* Done */
  .done { padding-top:clamp(40px,10vh,110px); }
  .tick {
    width:64px; height:64px; border-radius:50%; display:grid; place-items:center; margin-bottom:28px;
    background:var(--accent); color:var(--accent-ink); animation:pop .7s var(--ease) both;
  }
  .tick svg path { stroke-dasharray:30; stroke-dashoffset:30; animation:draw .5s .35s var(--ease) forwards; }
  @keyframes pop { from { transform:scale(.4); opacity:0; } to { transform:none; opacity:1; } }
  @keyframes draw { to { stroke-dashoffset:0; } }
  .ref { display:inline-flex; margin-top:24px; padding:8px 14px; border-radius:999px; background:var(--surface); font-size:14px; font-variant-numeric:tabular-nums; }

  /* Orders */
  .orders { display:grid; gap:12px; margin-top:clamp(28px,5vh,44px); }
  .order {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); gap:12px 24px; align-items:center;
    padding:18px 20px; border-radius:16px; background:var(--surface); transition:background-color .5s;
  }
  .order .title { font-family:var(--serif); font-size:20px; line-height:1.15; }
  .order .small { font-size:13px; color:var(--muted); }
  .status { display:inline-flex; align-items:center; gap:8px; font-size:14px; }
  .status::before { content:""; width:8px; height:8px; border-radius:50%; background:#c48a2c; }
  .status.sent::before { background:#3f9a6b; }
  .order-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
  .ledger-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }

  /* Catalogue header */
  .cat-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 24px; margin-bottom:clamp(28px,4vw,44px); }
  .cat-head h2 { margin:0; font-family:var(--serif); font-weight:400; font-size:clamp(30px,3vw,38px); line-height:1; letter-spacing:-.01em; }
  .plus { width:20px; height:20px; border-radius:50%; display:grid; place-items:center; background:var(--ink); color:var(--bg); font-size:15px; line-height:1; transition:transform .4s var(--ease); }
  .chip:hover .plus { transform:rotate(90deg); }

  /* FAQ */
  .faq { margin-top:clamp(32px,5vh,52px); display:flex; flex-direction:column; gap:8px; }
  .faq-item { border-radius:16px; background:var(--surface); transition:background-color .4s; }
  .faq-item.open { background:var(--card); box-shadow:var(--shadow); }
  .faq-q {
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px;
    padding:20px 22px; border:0; background:transparent; cursor:pointer; text-align:left;
    font-size:17px; font-weight:500; color:var(--ink);
  }
  .faq-icon { position:relative; width:14px; height:14px; flex:none; }
  .faq-icon::before, .faq-icon::after { content:""; position:absolute; left:0; top:6px; width:14px; height:2px; border-radius:1px; background:currentColor; transition:transform .45s var(--ease); }
  .faq-icon::after { transform:rotate(90deg); }
  .faq-item.open .faq-icon::after { transform:rotate(0deg); }
  .faq-a { display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease); }
  .faq-item.open .faq-a { grid-template-rows:1fr; }
  .faq-a > div { overflow:hidden; min-height:0; }
  .faq-a .inner { padding:0 22px 22px; max-width:62ch; font-size:16px; line-height:1.7; color:var(--body); opacity:0; transform:translateY(-6px); transition:opacity .35s, transform .5s var(--ease); }
  .faq-item.open .faq-a .inner { opacity:1; transform:none; transition-delay:.08s; }
  .faq-a p { margin:0 0 12px; text-wrap:pretty; }
  .faq-a p:last-child { margin-bottom:0; }
  .faq-a ul { margin:0 0 12px; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:8px; }
  .faq-a li { padding:6px 12px; border-radius:999px; background:var(--surface); font-size:14px; color:var(--ink); }
  .faq-contact { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 24px; margin-top:clamp(36px,6vh,56px); padding:24px 26px; border-radius:20px; background:var(--surface); }

  /* Footer */
  .site-foot { margin-top:clamp(96px,16vh,170px); padding-bottom:40px; }
  .site-foot .wrap { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:14px 28px; font-size:15px; color:var(--muted); }
  .site-foot nav { display:flex; flex-wrap:wrap; gap:22px; }
  .site-foot a, .site-foot [data-action] { color:var(--body); }
  .site-foot a:hover, .site-foot [data-action]:hover { color:var(--ink); }

  /* Page transitions */
  ::view-transition-old(root) { animation:vt-out .28s var(--ease) both; }
  ::view-transition-new(root) { animation:vt-in .5s var(--ease) both; }
  ::view-transition-group(cover) { animation-duration:.6s; animation-timing-function:var(--ease); }
  ::view-transition-old(cover), ::view-transition-new(cover) { height:100%; object-fit:cover; overflow:clip; }
  @keyframes vt-out { to { opacity:0; transform:translateY(-8px); } }
  @keyframes vt-in { from { opacity:0; transform:translateY(14px); } }
  html.theme-vt * { view-transition-name:none !important; }
  /* Theme reveal. The circle is defined in CSS (not via element.animate) so the
     browser registers it before the transition starts — otherwise a slower
     device finishes the transition early and the rest of the page snaps. */
  html.theme-vt::view-transition-old(root) { animation:none; mix-blend-mode:normal; z-index:1; }
  html.theme-vt::view-transition-new(root) {
    mix-blend-mode:normal; z-index:2;
    animation:theme-reveal 700ms cubic-bezier(.4,0,.2,1) both;
  }
  @keyframes theme-reveal {
    from { clip-path:circle(0px at var(--reveal-x,100%) var(--reveal-y,0px)); }
    to   { clip-path:circle(var(--reveal-r,150vmax) at var(--reveal-x,100%) var(--reveal-y,0px)); }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition:none !important; animation:none !important; }
    img.fade { opacity:1; }
  }