@font-face{
    font-family:"Carbon";
    src:url("/assets/carbon.woff2") format("woff2");
    font-weight:400;
    font-style:normal;
    font-display:swap;
  }
  :root{
    color-scheme: light dark;   /* let the browser's own UI (scrollbars, form controls) follow the OS too */
    --ink:#141414;
    --muted:#8f8f8f;
    --accent:#262626;
    --accent-hover:#3d3d3d;
    --on-accent:#ffffff;        /* text/icon colour on top of an accent-filled button or chip */
    --field:#efefef;
    --field-ink:#9a9a9a;
    --paper:#ffffff;
    --line:#e4e4e4;             /* hairline borders: card edges, dividers, dashed placeholders */
    --surface:#f2f2f2;          /* secondary fill: image placeholders, embed boxes */
    --hairline:rgba(20,20,20,.08); /* 1px outline on photos/cover art, visible on either background */
    --mono:"Carbon", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    box-sizing:border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* dark mode: follows the OS/browser setting automatically, no toggle needed.
     Every colour on the site is one of the tokens above, so overriding them here is the whole theme. */
  @media (prefers-color-scheme: dark){
    :root{
      --ink:#ededed;
      --muted:#9a9a9a;
      --accent:#e4e4e4;
      --accent-hover:#c9c9c9;
      --on-accent:#141414;
      --field:#1c1c1c;
      --field-ink:#8a8a8a;
      --paper:#141414;
      --line:#2c2c2c;
      --surface:#1e1e1e;
      --hairline:rgba(255,255,255,.14);
    }
  }
  *,*::before,*::after{box-sizing:inherit}
  html,body{height:100%}
  html{scroll-padding-top: env(safe-area-inset-top, 0px)}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:var(--mono);
    font-size:13px;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  main{min-height:100%;display:flex;flex-direction:column}
  a{color:inherit;text-decoration:none}
  :focus-visible{outline:2px solid var(--accent);outline-offset:3px}
  img{max-width:100%}

  /* ---------- shared page chrome ---------- */
  .sheet{
    flex:1;
    display:flex;
    flex-direction:column;
    padding:26px 30px 22px;
  }
  .topbar{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:start;
    gap:16px;
    margin-bottom:8px;
  }
  .back{font-size:11px;color:var(--ink);letter-spacing:.02em}
  .back:hover{color:var(--accent-hover)}
  .page-title{font-size:13px;text-align:center;font-weight:400;margin:0}
  .sheet-body{flex:1;display:flex;flex-direction:column;justify-content:center;padding:40px 0}
  .footer{
    text-align:center;
    font-size:10px;
    color:var(--muted);
    letter-spacing:.02em;
    padding-top:32px;
  }

  /* ---------- home ---------- */
  .split{
    flex:1;
    display:grid;
    grid-template-columns:53fr 47fr;
  }
  .panel{
    display:flex;
    flex-direction:column;
    padding:26px 30px 30px;
  }
  .panel-head{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:20px;
  }
  .wordmark{font-size:13px;letter-spacing:.01em;font-weight:400;margin:0}
  .tagline{font-size:11px;color:var(--muted);letter-spacing:.01em}
  .nav{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:56px;
    padding-top:84px;
  }
  .btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:202px;
    height:42px;
    background:var(--accent);
    color:var(--on-accent);
    font-size:11px;
    letter-spacing:.06em;
    border-radius:3px;
    transition:background .15s ease;
  }
  .btn:hover{background:var(--accent-hover)}
  .socials{
    display:flex;
    justify-content:center;
    gap:40px;
    padding-top:72px;
  }
  .social{
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--accent);
    color:var(--on-accent);
    border-radius:3px;
    transition:background .15s ease;
  }
  .social:hover{background:var(--accent-hover)}
  .social svg{width:16px;height:16px;fill:currentColor}
  .portrait{
    background-color:#c9c9c9;
    background-image:url("/assets/portrait.jpg");
    background-image:image-set(url("/assets/portrait.webp") type("image/webp"),url("/assets/portrait.jpg") type("image/jpeg"));
    background-size:cover;
    background-position:center 62%;
    background-repeat:no-repeat;
  }

  /* ---------- eng credits ---------- */
  .credits-grid{
    display:grid;
    grid-template-columns:repeat(3,214px);
    justify-content:center;
    column-gap:122px;
    align-items:start;
  }
  .credits-col h2{
    margin:0 0 26px;
    height:34px;
    display:flex;
    align-items:center;
    padding:0 10px;
    border-radius:3px;
    color:#fff;
    font-size:12px;
    font-weight:700;
    letter-spacing:.04em;
  }
  .g-af{background:linear-gradient(90deg,#3d8fc4,#7cc04a)}
  .g-go{background:linear-gradient(90deg,#e8622a,#f0c54a)}
  .g-pz{background:linear-gradient(90deg,#8b3fd4,#4a5fd4)}
  .credits-col ul{list-style:none;margin:0;padding:0}
  .credits-col li{font-size:12px;line-height:28px;letter-spacing:.01em;white-space:nowrap}
  .credits-cta{text-align:center;padding-top:48px;font-size:11px;color:var(--muted)}
  .credits-cta a{color:var(--ink);border-bottom:1px solid var(--line)}
  .credits-cta a:hover{color:var(--accent-hover);border-color:var(--accent-hover)}

  /* ---------- shop ---------- */
  .shop-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,498px));
    justify-content:center;
    gap:42px;
    align-items:start;
  }
  .product{
    display:flex;
    flex-direction:column;
    border:1px solid var(--line);
    border-radius:6px;
    overflow:hidden;
    transition:border-color .15s ease;
  }
  .product:hover{border-color:var(--accent)}
  .product picture{display:block}
  .product-art{
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:1/1;
    object-fit:cover;
    background:var(--surface);
  }
  .product-name{
    font-size:13px;
    padding:18px 18px 0;
  }
  .product-desc{
    font-size:11px;
    line-height:1.7;
    color:var(--muted);
    padding:8px 18px 20px;
  }

  /* ---------- production ---------- */
  .playlists{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:32px;
  }
  .playlist{width:100%;max-width:950px}

  /* embed slot placeholder */
  .embed{
    border:1px dashed var(--line);
    border-radius:6px;
    background:var(--surface);
    color:var(--muted);
    font-size:11px;
    line-height:1.9;
    padding:28px 22px;
    text-align:center;
  }
  .embed strong{display:block;color:var(--ink);font-weight:500;margin-bottom:6px}
  .embed--tall{min-height:360px;display:flex;flex-direction:column;align-items:center;justify-content:center}
  .embed code{background:var(--field);border-radius:2px;padding:1px 5px;font-size:10px}

  /* ---------- contact ---------- */
  .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;
  }
  .hp{position:absolute;left:-9999px;opacity:0;pointer-events:none}
  .form{
    width:100%;
    max-width:535px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .form-row .sr-only{grid-column:auto}
  .field{
    width:100%;
    background:var(--field);
    border:0;
    border-radius:3px;
    font-family:var(--mono);
    font-size:11px;
    color:var(--ink);
    padding:0 14px;
    height:53px;
  }
  textarea.field{height:143px;padding:18px 14px;resize:vertical;line-height:1.7}
  .field::placeholder{color:var(--field-ink)}
  .field:focus{outline:2px solid var(--accent);outline-offset:0}
  .send{
    height:48px;
    background:var(--field);
    border:0;
    border-radius:3px;
    font-family:var(--mono);
    font-size:11px;
    color:var(--field-ink);
    letter-spacing:.06em;
    cursor:pointer;
    transition:background .15s ease,color .15s ease;
  }
  .send:hover{background:var(--accent);color:var(--on-accent)}

  .thanks-note{margin:0;text-align:center;font-size:11px;color:var(--muted)}

  /* ---------- tablet ---------- */
  @media (max-width:1199px){
    .credits-grid{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:40px;padding:0 10px}
    .credits-col li{font-size:11px;line-height:24px;white-space:normal}
    .shop-grid{gap:28px}
  }

  /* ---------- phone ---------- */
  @media (max-width:809px){
    .split{display:flex;flex-direction:column;flex:1}
    .portrait{order:-1;width:100%;aspect-ratio:1/0.95;background-position:center 48%}
    .panel{padding:22px 24px 30px;flex:1}
    .panel-head{flex-direction:column;align-items:flex-start;gap:2px}
    .nav{gap:26px;padding:38px 0 0}
    .btn{width:100%;max-width:260px}
    .socials{gap:14px;justify-content:space-between;flex-wrap:nowrap;width:100%;max-width:330px;margin:0 auto;padding-top:44px}
    .sheet{padding:20px 20px 20px}
    .credits-grid{grid-template-columns:1fr;row-gap:34px;justify-content:stretch}
    .shop-grid{grid-template-columns:1fr}
    .sheet-body{padding:26px 0}
  }

  /* ---------- transitions ---------- */
  /* crossfade between pages (Chrome, Edge, Safari 18.2+; others just navigate).
     Opacity only, so it carries no movement: it stays on under reduced motion, which is
     about movement (sliding, zooming, parallax), not a page quietly changing over. */
  @view-transition{navigation:auto}
  ::view-transition-old(root),
  ::view-transition-new(root){animation-duration:.35s;animation-timing-function:ease}

  @media (prefers-reduced-motion: no-preference){
    /* fade back in after the layout crosses a breakpoint */
    body{transition:opacity .2s ease}
    html.bp-swap body{opacity:0;transition:none}
  }

  @media (prefers-reduced-motion:reduce){
    *{transition:none !important;animation:none !important}
    /* the line above does not reach the view-transition pseudo-elements (a universal
       selector matches elements, not them), so the page crossfade above survives here */
    ::view-transition-old(root),
    ::view-transition-new(root){animation-duration:.25s}
  }