:root{
    --night: #1B2842;
    --dusk: #F3C9D8;
    --paper: #FBF7F4;
    --sakura: #E9789F;
    --sakura-soft: #F4B9CD;
    --sky: #7FC2E8;
    --ink: #2A3547;
    --ink-soft: #5C6470;
    --line: rgba(42,53,71,0.12);
  }

  *{ margin:0; padding:0; box-sizing:border-box; }

  html{ scroll-behavior:smooth; }

  body{
    background:var(--paper);
    color:var(--ink);
    font-family:"Zen Kaku Gothic New", sans-serif;
    line-height:1.9;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  a{ color:inherit; text-decoration:none; }

  :focus-visible{
    outline:2px solid var(--sakura);
    outline-offset:3px;
  }

  .eyebrow{
    font-size:0.72rem;
    letter-spacing:0.22em;
    text-transform:uppercase;
    font-weight:500;
    color:var(--ink-soft);
  }

  h1, h2, .display{
    font-family:"Shippori Mincho", serif;
    font-weight:600;
    letter-spacing:0.02em;
  }

  /* ---------- noise overlay (signature, site-wide) ---------- */
  .noise-layer{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:40;
    opacity:0.05;
    mix-blend-mode:overlay;
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    min-height:100vh;
    min-height:100svh;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    overflow:hidden;
    color:#fff;
  }

  .hero-bg{
    position:absolute;
    inset:0;
    background-image:url('assets/hero-bg.webp');
    background-size:cover;
    background-position:center 30%;
    filter:saturate(1.05);
    transform:scale(1.02);
  }

  .hero-gradient{
    position:absolute;
    inset:0;
    background:linear-gradient(
      180deg,
      rgba(27,40,66,0.55) 0%,
      rgba(27,40,66,0.18) 30%,
      rgba(27,40,66,0.38) 55%,
      rgba(27,40,66,0.78) 82%,
      rgba(27,40,66,0.88) 100%
    );
  }

  .hero-content{
    position:relative;
    z-index:5;
    padding:6vh 6vw 9vh;
    max-width:920px;
  }

  .hero-content .eyebrow{ color:rgba(255,255,255,0.85); margin-bottom:1.6rem; }

  .hero-title{
    font-size:clamp(2.4rem, 6.4vw, 4.6rem);
    line-height:1.25;
    text-shadow:0 2px 24px rgba(0,0,0,0.25);
  }

  .hero-copy{
    margin-top:2rem;
    font-family:"Zen Kaku Gothic New", sans-serif;
    font-weight:400;
    font-size:clamp(0.95rem, 1.6vw, 1.15rem);
    line-height:2.1;
    max-width:34em;
    color:rgba(255,255,255,0.94);
    text-shadow:0 1px 12px rgba(0,0,0,0.2);
  }

  .scroll-cue{
    position:absolute;
    bottom:3vh;
    left:6vw;
    z-index:5;
    font-size:0.7rem;
    letter-spacing:0.2em;
    color:rgba(255,255,255,0.8);
    display:flex;
    align-items:center;
    gap:0.6rem;
  }
  .scroll-cue::after{
    content:"";
    width:1px;
    height:34px;
    background:rgba(255,255,255,0.6);
    animation:scrollline 2.4s ease-in-out infinite;
  }
  @keyframes scrollline{
    0%{ transform:scaleY(0); transform-origin:top; opacity:0.4; }
    50%{ transform:scaleY(1); transform-origin:top; opacity:1; }
    100%{ transform:scaleY(0); transform-origin:bottom; opacity:0.4; }
  }

  /* drifting petals — hero only */
  .petal{
    position:absolute;
    z-index:4;
    top:-5%;
    opacity:0.85;
    pointer-events:none;
    will-change:transform;
  }
  .petal svg{ width:100%; height:100%; display:block; }

  @keyframes drift{
    0%{ transform:translate(0,0) rotate(0deg); }
    100%{ transform:translate(var(--dx), 115vh) rotate(var(--rot)); }
  }

  @media (prefers-reduced-motion: reduce){
    .petal{ animation:none !important; opacity:0.4; }
    .scroll-cue::after{ animation:none; }
    html{ scroll-behavior:auto; }
  }

  /* ---------- SECTION SHARED ---------- */
  section{
    padding:min(14vh, 7rem) 6vw;
  }
  .section-inner{ max-width:1080px; margin:0 auto; }

  .section-head{
    display:flex;
    align-items:baseline;
    gap:1.4rem;
    margin-bottom:3.4rem;
    border-bottom:1px solid var(--line);
    padding-bottom:1.2rem;
  }
  .section-head h2{
    font-size:clamp(1.5rem, 3vw, 2.1rem);
    color:var(--ink);
  }
  .section-head .eyebrow{ white-space:nowrap; }

  /* ---------- ALBUM (artwork, blurb, player, tracklist) ---------- */
  .featured-grid{
    display:grid;
    grid-template-columns:minmax(240px, 340px) 1fr;
    gap:clamp(2.2rem, 5vw, 4.5rem);
    align-items:center;
  }
  .featured-art{
    position:relative;
    border-radius:6px;
    overflow:hidden;
    aspect-ratio:768/1359; /* ジャケット画像の実寸比 — トリミングせず全体を見せる */
    box-shadow:0 30px 60px -20px rgba(42,53,71,0.35);
  }
  .featured-art img{
    width:100%; height:100%; object-fit:cover; display:block;
  }
  .featured-tag{
    position:absolute;
    top:1rem; left:1rem;
    background:rgba(27,40,66,0.55);
    color:#fff;
    font-size:0.68rem;
    letter-spacing:0.16em;
    padding:0.4rem 0.8rem;
    border-radius:999px;
    backdrop-filter:blur(4px);
  }

  .featured-text .work-title{
    font-size:clamp(1.6rem, 3.2vw, 2.3rem);
    color:var(--ink);
    margin-bottom:1.6rem;
  }
  .featured-text p{
    color:var(--ink-soft);
    font-size:1rem;
    max-width:32em;
  }
  .featured-text p + p{ margin-top:1.1rem; }

  .cta{
    display:inline-flex;
    align-items:center;
    gap:0.6rem;
    margin-top:2.4rem;
    padding:0.9rem 1.8rem;
    background:var(--sakura);
    color:#fff;
    border-radius:999px;
    font-size:0.9rem;
    letter-spacing:0.05em;
    font-weight:500;
    transition:transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    box-shadow:0 14px 30px -10px rgba(233,120,159,0.55);
  }
  .cta:hover{
    background:#DE6690;
    transform:translateY(-2px);
    box-shadow:0 18px 34px -8px rgba(233,120,159,0.6);
  }
  .cta svg{ width:16px; height:16px; }

  /* ---------- ABOUT ---------- */
  .about{
    background:linear-gradient(180deg, var(--paper) 0%, #FDF2F5 100%);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }
  .about-grid{
    display:grid;
    grid-template-columns:1.1fr 1.4fr;
    gap:clamp(2rem, 6vw, 5rem);
  }
  .about-quote{
    font-family:"Shippori Mincho", serif;
    font-size:clamp(1.3rem, 2.4vw, 1.7rem);
    color:var(--ink);
    line-height:1.9;
    border-left:2px solid var(--sakura-soft);
    padding-left:1.4rem;
  }
  .about-body p{ color:var(--ink-soft); }
  .about-body p + p{ margin-top:1.1rem; }
  .about-stack{
    display:flex;
    gap:0.6rem;
    margin-top:1.8rem;
    flex-wrap:wrap;
  }
  .chip{
    font-size:0.75rem;
    letter-spacing:0.05em;
    color:var(--ink);
    border:1px solid var(--line);
    padding:0.35rem 0.9rem;
    border-radius:999px;
    background:rgba(255,255,255,0.6);
  }

  /* --- audio player --- */
  .player{
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    gap:1.4rem;
    background:var(--night);
    border-radius:8px;
    padding:1.5rem;
    margin-bottom:2.6rem;
    box-shadow:0 18px 40px -28px rgba(27,40,66,0.5);
  }
  /* grain — the "noise" half of the concept, strongest where the music plays */
  .player::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    opacity:0.16;
    mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .player-art, .player-main{ position:relative; z-index:1; }
  .player-art{
    width:112px;
    height:112px;
    flex-shrink:0;
    border-radius:4px;
    overflow:hidden;
    background:rgba(255,255,255,0.08);
  }
  .player-art img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
  }
  .player-main{ flex:1; min-width:0; }
  .player-eyebrow{
    font-size:0.62rem;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--sakura-soft);
    margin-bottom:0.25rem;
  }
  .player-title{
    font-family:"Shippori Mincho", serif;
    font-size:1.15rem;
    font-weight:600;
    color:#fff;
    line-height:1.4;
    margin-bottom:0.9rem;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .seek{
    -webkit-appearance:none;
    appearance:none;
    display:block;
    width:100%;
    height:4px;
    border-radius:999px;
    cursor:pointer;
    background:linear-gradient(to right,
      var(--sakura) 0%, var(--sakura) var(--pct,0%),
      rgba(255,255,255,0.18) var(--pct,0%), rgba(255,255,255,0.18) 100%);
  }
  .seek:disabled{ cursor:default; }
  .seek:disabled::-webkit-slider-thumb{ opacity:0; }
  .seek:disabled::-moz-range-thumb{ opacity:0; }
  .seek::-webkit-slider-thumb{
    -webkit-appearance:none;
    appearance:none;
    width:13px; height:13px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 0 0 3px rgba(233,120,159,0.45);
  }
  .seek::-moz-range-thumb{
    width:13px; height:13px;
    border:0; border-radius:50%;
    background:#fff;
    box-shadow:0 0 0 3px rgba(233,120,159,0.45);
  }
  .player-time{
    display:flex;
    justify-content:space-between;
    margin-top:0.45rem;
    font-size:0.7rem;
    letter-spacing:0.04em;
    color:rgba(255,255,255,0.5);
    font-variant-numeric:tabular-nums;
  }
  .player-controls{
    display:flex;
    align-items:center;
    gap:0.7rem;
    margin-top:0.9rem;
  }
  .pbtn{
    background:none;
    border:0;
    padding:0;
    cursor:pointer;
    display:grid;
    place-items:center;
    width:34px; height:34px;
    border-radius:50%;
    color:rgba(255,255,255,0.7);
    transition:color 0.2s ease, background 0.2s ease, transform 0.2s ease;
  }
  .pbtn:hover{ color:#fff; background:rgba(255,255,255,0.1); }
  .pbtn svg{ width:15px; height:15px; fill:currentColor; }
  .pbtn-main{
    width:46px; height:46px;
    background:var(--sakura);
    color:#fff;
    box-shadow:0 6px 14px -8px rgba(233,120,159,0.5);
  }
  .pbtn-main:hover{ background:#DE6690; color:#fff; transform:scale(1.05); }
  .pbtn-main svg{ width:17px; height:17px; }

  /* --- track rows --- */
  /* liner-note style ruled list, not cards */
  .track-list{
    border-top:1px solid var(--line);
  }
  .track{
    display:flex;
    align-items:center;
    gap:1.2rem;
    width:100%;
    padding:1.05rem 0.6rem;
    font:inherit;
    text-align:left;
    background:none;
    border:0;
    border-bottom:1px solid var(--line);
    cursor:pointer;
    transition:background 0.25s ease, padding-left 0.25s ease;
  }
  .track:hover{
    background:rgba(233,120,159,0.05);
    padding-left:1rem;
  }
  .track[aria-current="true"] .track-no,
  .track[aria-current="true"] .track-title{ color:var(--sakura); }
  .track-no{
    font-family:"Shippori Mincho", serif;
    font-size:0.9rem;
    color:var(--ink-soft);
    letter-spacing:0.1em;
    flex-shrink:0;
    transition:color 0.25s ease;
  }
  .track-title{
    font-family:"Shippori Mincho", serif;
    font-size:1.05rem;
    font-weight:600;
    color:var(--ink);
    line-height:1.5;
    flex:1;
    min-width:0;
  }
  .track-dur{
    flex-shrink:0;
    font-size:0.78rem;
    color:var(--ink-soft);
    font-variant-numeric:tabular-nums;
  }
  .track-play{
    flex-shrink:0;
    width:34px; height:34px;
    border-radius:50%;
    border:1px solid var(--line);
    color:var(--sakura);
    display:grid;
    place-items:center;
    transition:background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  }
  .track:hover .track-play,
  .track[aria-current="true"] .track-play{
    background:var(--sakura);
    border-color:var(--sakura);
    color:#fff;
  }
  .track-play svg{ width:13px; height:13px; fill:currentColor; }
  .track-play .icon-pause{ display:none; }
  .track[aria-current="true"][data-playing="true"] .track-play .icon-play{ display:none; }
  .track[aria-current="true"][data-playing="true"] .track-play .icon-pause{ display:block; }

  .tracks-note{
    margin-top:1.6rem;
    font-size:0.8rem;
    color:var(--ink-soft);
  }
  .tracks-note a{ color:var(--sakura); border-bottom:1px solid rgba(233,120,159,0.4); }

  /* album section: description and listening area share one heading */
  .album{ background:var(--paper); }
  .album-listen{
    margin-top:clamp(3rem, 7vw, 5rem);
    padding-top:clamp(2.4rem, 5vw, 3.4rem);
    border-top:1px solid var(--line);
  }
  .album-listen .eyebrow{ display:block; margin-bottom:1.6rem; }

  @media (max-width:560px){
    .player{
      flex-direction:column;
      align-items:stretch;
      gap:1.1rem;
      padding:1.2rem;
    }
    .player-art{ width:100%; height:auto; aspect-ratio:1/1; }
    .player-title{ white-space:normal; }
    .player-controls{ justify-content:center; }
    .track{ gap:0.9rem; padding:0.95rem 1rem; }
    .track-title{ font-size:0.98rem; }
  }

  /* ---------- NOTE (works teaser) ---------- */
  .note{
    text-align:center;
  }
  .note p{
    color:var(--ink-soft);
    font-size:0.95rem;
    max-width:30em;
    margin:0 auto;
  }
  .note .eyebrow{ display:block; margin-bottom:1rem; }

  /* ---------- FOOTER / LINKS ---------- */
  footer{
    background:var(--night);
    color:#EDEFF3;
    padding:min(12vh,6.5rem) 6vw 3rem;
  }
  .footer-inner{
    max-width:1080px;
    margin:0 auto;
  }
  .footer-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    flex-wrap:wrap;
    gap:2rem;
    border-bottom:1px solid rgba(255,255,255,0.14);
    padding-bottom:2.6rem;
  }
  .footer-title{
    font-size:clamp(1.5rem, 3vw, 2rem);
    color:#fff;
  }
  .footer-title span{ color:var(--sakura-soft); }

  .link-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(120px, 1fr));
    gap:1rem;
    margin-top:2.6rem;
  }
  .link-card{
    padding:1.3rem 1.2rem;
    border:1px solid rgba(255,255,255,0.16);
    border-radius:10px;
    transition:border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;
  }
  .link-card:hover{
    border-color:var(--sakura-soft);
    background:rgba(255,255,255,0.05);
    transform:translateY(-3px);
  }
  .link-card .name{
    font-size:0.95rem;
    font-weight:500;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .link-card .platform{
    display:block;
    margin-top:0.4rem;
    font-size:0.72rem;
    letter-spacing:0.1em;
    color:rgba(255,255,255,0.55);
  }

  .footer-bottom{
    margin-top:3rem;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:1rem;
    font-size:0.75rem;
    color:rgba(255,255,255,0.45);
    letter-spacing:0.03em;
  }

  @media (max-width:820px){
    .featured-grid, .about-grid{ grid-template-columns:1fr; }
    .link-grid{ grid-template-columns:repeat(2, 1fr); }
    .footer-top{ align-items:flex-start; }
  }

  @media (max-width:480px){
    section{ padding:9vh 6.5vw; }
    .link-grid{ grid-template-columns:1fr 1fr; gap:0.8rem; }
  }

  /* scroll reveal */
  .reveal{
    opacity:0;
    transform:translateY(18px);
    transition:opacity 0.9s ease, transform 0.9s ease;
  }
  .reveal.in{
    opacity:1;
    transform:translateY(0);
  }

  .hero-author{ display:block; margin-top:.6rem; font-family:"Zen Kaku Gothic New",sans-serif; font-size:.38em; font-weight:400; letter-spacing:.09em; }
  .hero-works{ display:inline-flex; align-items:center; gap:1.3rem; min-height:48px; margin-top:1.8rem; padding:.55rem 1.2rem; border:1px solid rgba(255,255,255,.65); border-radius:999px; font-size:.85rem; }
  .hero-works:hover{ background:rgba(255,255,255,.15); }
  .works{ background:var(--paper); }
  .works-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.5rem; }
  .work-card{ min-width:0; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:8px; overflow:hidden; box-shadow:0 12px 30px -22px rgba(27,40,66,.35); }
  .work-card-art{ aspect-ratio:1; display:flex; align-items:center; justify-content:center; background:#F1ECE9; border-bottom:1px solid var(--line); }
  .work-card-art img{ display:block; width:100%; height:100%; object-fit:contain; }
  .work-card-body{ display:flex; flex-direction:column; flex:1; padding:1.1rem; }
  .work-card-kind{ color:var(--ink-soft); font-size:.68rem; letter-spacing:.06em; margin-bottom:.65rem; }
  .work-card h3{ font-family:"Shippori Mincho",serif; font-size:1.02rem; line-height:1.65; min-height:3.3em; overflow-wrap:anywhere; }
  .work-card-description{ font-size:.82rem; color:var(--ink-soft); line-height:1.9; margin-top:.85rem; margin-bottom:1.3rem; }
  .work-card-link{ display:flex; align-items:center; justify-content:space-between; min-height:46px; gap:.5rem; margin-top:auto; padding:.6rem .85rem; border:1px solid var(--sakura-soft); border-radius:999px; color:var(--ink); font-size:.79rem; transition:background .2s; }
  .work-card-link:hover{ background:#FDF2F5; }
  @media(max-width:1000px){ .works-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem; } }
  @media(max-width:540px){ .works-grid{ grid-template-columns:1fr; gap:1.8rem; } .work-card h3{ min-height:0; font-size:1.2rem; } .work-card-body{ padding:1.25rem; } .work-card-description{ font-size:.9rem; } .work-card-link{ font-size:.86rem; } .hero-title{ font-size:clamp(2rem,9vw,3rem); } }
  @media(max-width:540px){ .player{ padding:1rem; gap:.8rem; } .player-art{ width:72px; height:72px; } .player-title{ font-size:1rem; } }
  @media(max-width:480px){ .link-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .link-card{ min-width:0; padding:1rem .75rem; } .link-card .platform{ overflow-wrap:anywhere; } }
  .work-card-art{ position:relative; flex:none; overflow:hidden; } .work-card-art img{ position:absolute; inset:0; }

/* Three-screen preview. Content is always visible; no reveal gate. */
.reveal{opacity:1;transform:none}
html{scroll-padding-top:110px}
body{overflow-x:visible}
section{padding:4.5rem 6vw}
.site-header{background:rgba(251,247,244,.97);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.site-header-inner{max-width:1200px;margin:auto;min-height:82px;padding:1rem 3vw;display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.brand{font-family:"Shippori Mincho",serif;font-size:1.6rem;white-space:nowrap;line-height:1.4}.brand span{color:var(--sakura)}.brand small{display:block;font-family:"Zen Kaku Gothic New",sans-serif;font-size:.6rem;letter-spacing:.12em}
.site-header nav{display:flex;gap:1.5rem;font-size:.82rem}.site-header nav a{min-height:44px;display:flex;align-items:center;border-bottom:2px solid transparent}.site-header nav a[aria-current]{border-color:var(--sakura)}
.skip-link{position:fixed;top:0;left:1rem;z-index:100;background:var(--night);color:#fff;padding:.8rem;transform:translateY(-120%)}.skip-link:focus{transform:none}
.home-hero{position:relative;background:var(--night) url('/assets/hero-bg.webp') center 30%/cover;color:#fff;min-height:470px;display:flex;align-items:center;overflow:hidden}
.home-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(27,40,66,.85),rgba(27,40,66,.4))}
.home-hero-copy{position:relative;width:100%;z-index:1}.home-hero .eyebrow{color:#fff}.home-hero h1{font-size:clamp(2.4rem,5.2vw,4.5rem);line-height:1.3;margin-top:1rem}.home-hero h1 small{display:block;font-family:"Zen Kaku Gothic New",sans-serif;font-size:.31em;font-weight:400;letter-spacing:.1em;margin-top:.6rem}
.home-tagline{margin-top:2rem;font-size:1rem;line-height:2}.home-hero .hero-works{margin-top:1.6rem}
.heading-row{display:flex;align-items:end;justify-content:space-between;gap:1.5rem;margin-bottom:2rem}.heading-row h2,.author-section h2,.art-section h2{font-size:clamp(1.5rem,3vw,2rem);line-height:1.6}.heading-row .eyebrow{margin-bottom:.5rem}
.text-link{font-size:.82rem;display:inline-block;min-height:44px;padding:.65rem 0;border-bottom:1px solid var(--sakura-soft)}.solid-link{display:inline-flex;align-items:center;justify-content:space-between;gap:2rem;min-height:48px;padding:.75rem 1.4rem;border-radius:999px;background:var(--sakura);color:#fff;font-size:.87rem}.solid-link:hover{background:#de6690}.quiet-link{display:flex;justify-content:space-between;gap:1rem;align-items:center;min-height:46px;margin-top:auto;padding:.6rem 0;border-top:1px solid var(--line);font-size:.82rem}
.spotlight{display:grid;grid-template-columns:minmax(200px,340px) 1fr;align-items:center;gap:3.5rem;max-width:880px;margin:auto}.spotlight-art{position:relative;aspect-ratio:1;display:block;background:#f1ece9;border-radius:6px;overflow:hidden}.spotlight-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.spotlight h2{font-size:clamp(1.5rem,3vw,2rem);margin:.8rem 0 1.1rem}.spotlight p:not(.eyebrow):not(.catalogue-kind){color:var(--ink-soft);font-size:.95rem}.spotlight .solid-link{margin-top:1.7rem}
.home-recent{border-top:1px solid var(--line)}.author-section{background:#fdf2f5;border-top:1px solid var(--line);scroll-margin-top:120px}.author-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:3.5rem;align-items:center}.author-layout>p{color:var(--ink-soft);max-width:36em}
.catalogue-section h1{font-size:clamp(1.8rem,4vw,2.6rem)}.page-intro{color:var(--ink-soft);font-size:.9rem;margin-top:.7rem}
.catalogue-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem}
.catalogue-card{min-width:0;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:8px;background:white;overflow:hidden;box-shadow:0 12px 25px -22px rgba(27,40,66,.35)}
.catalogue-art{display:block;position:relative;aspect-ratio:1;flex:none;background:#f1ece9;border-bottom:1px solid var(--line)}.catalogue-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.catalogue-body{padding:1.1rem;display:flex;flex-direction:column;flex:1}.catalogue-kind{font-size:.67rem;color:var(--ink-soft);letter-spacing:.06em;margin-bottom:.6rem}.catalogue-body h2{font-size:1rem;line-height:1.65;min-height:3.3em;overflow-wrap:anywhere}.catalogue-summary{color:var(--ink-soft);font-size:.82rem;line-height:1.9;margin:.9rem 0 1.2rem}
.filters{display:flex;flex-wrap:wrap;gap:.7rem;margin:2rem 0 1rem}.filters a{min-height:44px;padding:.45rem 1.1rem;display:flex;align-items:center;border:1px solid var(--line);border-radius:999px;font-size:.83rem;background:white}.filters a[aria-current]{background:var(--night);color:white;border-color:var(--night)}.filters a:hover:not([aria-current]){border-color:var(--sakura)}
.result-count{font-size:.75rem;color:var(--ink-soft);margin:1.3rem 0}.pagination{display:flex;justify-content:center;flex-wrap:wrap;gap:.5rem;margin-top:2.5rem}.pagination a,.pagination span{display:grid;place-items:center;min-width:44px;min-height:44px;border:1px solid var(--line);padding:.4rem .7rem;border-radius:5px;font-size:.8rem}.pagination [aria-current]{background:var(--night);color:white}
.breadcrumb{display:flex;flex-wrap:wrap;gap:.6rem;padding:1.8rem 0 0;font-size:.74rem;color:var(--ink-soft)}.breadcrumb a{text-decoration:underline;text-decoration-color:var(--sakura-soft)}
.detail-opening{padding-top:2.5rem}.detail-layout{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}.detail-art{min-width:0}.detail-art-image{display:block;position:relative;aspect-ratio:1;background:#f1ece9;border:1px solid var(--line);border-radius:8px;overflow:hidden}.detail-art-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.detail-art figcaption{text-align:center;margin-top:.5rem}.detail-copy{min-width:0}.detail-copy h1{font-size:clamp(1.7rem,3.3vw,2.6rem);line-height:1.6;overflow-wrap:anywhere;margin:.8rem 0 1.5rem}.detail-copy .eyebrow{margin-bottom:1rem}.detail-description p{color:var(--ink-soft);font-size:.95rem;line-height:2}.detail-description p+p{margin-top:1rem}.detail-copy .solid-link{margin-top:1.8rem}.detail-jump{display:block;width:max-content;margin-top:1rem}
.detail-section{border-top:1px solid var(--line)}.section-note{font-size:.84rem;color:var(--ink-soft);margin:.7rem 0 2rem}.listening-area{max-width:820px}.art-section{background:#f6f0ee}.art-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem 1.5rem}.track-art{min-width:0}.track-art>a{display:block;position:relative;aspect-ratio:1;background:#ece5e3;border-radius:6px;overflow:hidden}.track-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.track-art figcaption{font-size:.84rem;line-height:1.8;margin-top:.8rem}.track-art figcaption span{color:var(--ink-soft);font-size:.7rem;margin-right:.4rem}
.other-works{border-top:1px solid var(--line)}.related-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.site-footer{padding:3rem 6vw;background:var(--night);color:#fff}.site-footer .eyebrow{color:var(--sakura-soft)}.social-links{display:flex;gap:1.5rem;flex-wrap:wrap;margin-top:1rem}.social-links a{display:flex;align-items:center;min-height:44px;font-size:.83rem}.copyright{font-size:.65rem;color:rgba(255,255,255,.65);margin-top:1.5rem;overflow-wrap:anywhere}
a:hover{color:inherit}.catalogue-art:hover,.spotlight-art:hover{filter:brightness(1.035)}.text-link:hover,.quiet-link:hover{color:#c54e7b}
@media(max-width:1100px){.breadcrumb{margin:0 6vw}.site-header-inner{padding-left:6vw;padding-right:6vw}}
@media(max-width:1000px){.catalogue-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.detail-layout{gap:2rem}.spotlight{gap:2.5rem}}
@media(max-width:820px){.detail-layout{grid-template-columns:1fr}.detail-art{max-width:540px;margin:auto;width:100%}.detail-copy{max-width:640px}.author-layout{grid-template-columns:1fr;gap:1.5rem}.spotlight{grid-template-columns:1fr 1.1fr;gap:1.8rem}.art-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){html{scroll-padding-top:140px}section{padding:3rem 6vw}.site-header-inner{align-items:flex-start;flex-direction:column;gap:.5rem;padding:.75rem 6vw .2rem}.brand{font-size:1.35rem}.brand small{display:inline;font-size:.55rem}.site-header nav{width:100%;justify-content:space-between;gap:.7rem;font-size:.74rem}.home-hero{min-height:410px;background-position:56% center}.home-hero h1{font-size:2.25rem}.home-hero h1 small{font-size:.34em}.home-tagline{font-size:.88rem}.home-hero-shade{background:linear-gradient(90deg,rgba(27,40,66,.77),rgba(27,40,66,.36))}.spotlight{grid-template-columns:1fr;gap:1.5rem}.spotlight-art{max-width:340px;width:100%;margin:auto}.heading-row{align-items:flex-start;flex-direction:column;gap:.5rem}.catalogue-grid{grid-template-columns:1fr;gap:1.6rem}.catalogue-body{padding:1.2rem}.catalogue-body h2{font-size:1.15rem;min-height:0}.catalogue-summary{font-size:.88rem}.quiet-link{font-size:.85rem}.detail-copy h1{font-size:1.7rem}.detail-description p{font-size:.9rem}.breadcrumb{font-size:.68rem;gap:.4rem;padding-top:1.3rem}.detail-opening{padding-top:1.5rem}.art-grid{grid-template-columns:1fr}.player{padding:1rem;gap:.7rem}.player-art{width:64px;height:64px}.player-title{font-size:.95rem}.track{gap:.75rem}.track-title{font-size:.95rem}.social-links{gap:1.2rem}.author-section h2{font-size:1.5rem}.author-layout>p{font-size:.9rem}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* Individual songs and progressive artwork viewer. */
.track-art h3{font-family:"Shippori Mincho",serif;font-size:.95rem;line-height:1.8;margin:.2rem 0 .7rem;overflow-wrap:anywhere}
.song-link{display:flex;align-items:center;justify-content:space-between;min-height:46px;padding:.55rem .9rem;border:1px solid var(--sakura-soft);border-radius:999px;font-size:.82rem;background:white}
.song-link span{color:var(--ink);font-size:1rem;margin:0}
.album-service-link{display:block;width:max-content;max-width:100%;margin-top:.7rem}
.track-art>a{aspect-ratio:3/4}
.art-viewer{width:min(94vw,1100px);max-width:94vw;max-height:94vh;margin:auto;padding:1rem;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink)}
.art-viewer::backdrop{background:rgba(12,19,32,.88)}
.viewer-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.8rem}
.viewer-toolbar p{font-size:.8rem;line-height:1.6;overflow-wrap:anywhere}
.viewer-close{flex:none;min-height:44px;padding:.45rem .9rem;border:1px solid var(--line);border-radius:999px;background:var(--night);color:#fff;font:inherit;font-size:.8rem;cursor:pointer}
.viewer-image{display:block;width:auto;height:auto;max-width:100%;max-height:calc(90vh - 6rem);object-fit:contain;margin:auto}
@media(max-width:540px){.art-viewer{padding:.75rem}.viewer-toolbar{gap:.6rem}.viewer-toolbar p{font-size:.73rem}.track-art h3{font-size:1rem}}

/* A quiet cue on individual listening links; resting styles stay unchanged. */
.song-link,.detail-copy>a.solid-link[target="_blank"]{transition:background-color .18s ease,border-color .18s ease,color .18s ease}
.song-link span{transition:color .18s ease}
@media(hover:hover) and (pointer:fine){
 .song-link:hover{background-color:#FDF2F5;border-color:#E9789F;color:#A93D65}
 .song-link:hover span{color:#A93D65}
 .detail-copy>a.solid-link[target="_blank"]:hover{background-color:#DE6690;color:#fff}
}
.song-link:focus-visible{background-color:#FDF2F5;border-color:#E9789F;color:#A93D65;outline:2px solid #C54E7B;outline-offset:3px}
.song-link:focus-visible span{color:#A93D65}
.detail-copy>a.solid-link[target="_blank"]:focus-visible{background-color:#DE6690;color:#fff;outline:2px solid #C54E7B;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.song-link,.song-link span,.detail-copy>a.solid-link[target="_blank"]{transition:none}}

@media(hover:none),(pointer:coarse){.detail-copy>a.solid-link[target="_blank"]:hover{background-color:var(--sakura);color:#fff}}

.suno-guidance{margin-top:1rem;padding-left:.85rem;border-left:2px solid var(--sakura-soft);color:var(--ink-soft);font-size:.78rem;line-height:1.9;max-width:34em}
.suno-guidance p+p{margin-top:.3rem}
@media(max-width:540px){.suno-guidance{font-size:.78rem;line-height:1.9}}