/* Layout: phone = one column read like liner notes; PC = wide hero split into intro + waveform, works as a card grid, services and profile side by side */
/* Brand colors: blue #23287B and yellow #FFEA73. Pure white page, square corners everywhere, single light theme on purpose */
:root {
  color-scheme: light;
  --brand: #23287B;
  --sun: #FFEA73;
  --bg: #ffffff;
  --surface: #ffffff;
  --ink: #1c2063;
  --muted: #565b8c;
  --accent: #23287B;
  --mark: #FFEA73;
  --line: #d9dbe6;
  --hero-bg: #23287B;
  --hero-ink: #ffffff;
  --hero-muted: #c9cbec;
  --font-display: "M PLUS 1", "Hiragino Sans", "Noto Sans JP", sans-serif;
  --font-body: "Zen Kaku Gothic New", "Hiragino Sans", "Noto Sans JP", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 1rem; line-height: 1.85; }
p { margin: 0; }
a { color: var(--ink); text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:focus-visible, .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.wrap { max-width: 72rem; margin: 0 auto; padding-inline: 20px; padding-block: 1.25rem 3rem; display: flex; flex-direction: column; gap: 3.5rem; }

/* Hero */
.hero { display: grid; gap: 1.75rem; background: var(--hero-bg); color: var(--hero-ink); padding: clamp(1.5rem, 5vw, 3.5rem); overflow: hidden; }
.hero-main { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.hero-side { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.domain { font-family: var(--font-mono); font-size: .8rem; color: var(--hero-muted); letter-spacing: .06em; }
.role { font-family: var(--font-mono); font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sun); margin: 0; }
h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 10vw, 5.5rem); line-height: 1.05; margin: 0; }
.lead { font-size: 1.05rem; color: var(--hero-muted); max-width: 34em; }
.lead p { white-space: pre-line; }
.lead p + p { margin-top: .8em; }
.links { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .25rem; }
.btn { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem 1.1rem; border: 1px solid var(--hero-muted); background: transparent; color: var(--hero-ink); text-decoration: none; font-size: .92rem; }
.btn:hover { border-color: var(--sun); }
.btn.primary { background: var(--sun); color: var(--brand); border-color: var(--sun); font-weight: 700; }
.hero a:focus-visible { outline-color: var(--sun); }

.wave { --wave-h: 48px; display: flex; align-items: center; gap: 3px; height: var(--wave-h); max-width: 100%; overflow: hidden; }
.wave i { flex: 0 0 4px; height: calc(var(--h) * var(--wave-h)); background: var(--hero-ink); opacity: .45; }
.wave i.on { background: var(--sun); opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .wave i { animation: pulse 2.4s ease-in-out infinite; animation-delay: calc(var(--d) * 60ms); transform-origin: center; } }
@keyframes pulse { 50% { transform: scaleY(.6); } }

.featured { display: flex; flex-direction: column; gap: .15rem; border-top: 1px solid rgba(255, 255, 255, .22); padding-top: 1rem; }
.featured .eyebrow { color: var(--sun); }
.featured-title { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: var(--hero-ink); text-decoration: none; }
a.featured-title:hover { text-decoration: underline; text-decoration-color: var(--sun); }
.featured-meta { font-family: var(--font-mono); font-size: .8rem; color: var(--hero-muted); }

/* Sections */
section { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
h2 { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; margin: 0; background: linear-gradient(transparent 62%, var(--mark) 62%); padding-inline: .1em; }
.eyebrow { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* Works: list on phones */
.tracks { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--accent); }
.tracks li { display: grid; grid-template-columns: 2rem 1fr auto; gap: .2rem 1rem; align-items: baseline; padding-block: .9rem; border-bottom: 1px solid var(--line); }
.no { font-family: var(--font-mono); color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.title { min-width: 0; display: flex; flex-direction: column; }
.title b { font-family: var(--font-display); font-weight: 500; font-size: 1.08rem; }
.title a { text-decoration: none; }
.title a:hover b { text-decoration: underline; text-decoration-color: var(--accent); }
.title span { color: var(--muted); font-size: .88rem; }
.meta { grid-column: 2; font-family: var(--font-mono); font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.meta em { font-style: normal; color: var(--ink); }
.listen { grid-column: 3; grid-row: 1; font-size: .85rem; font-weight: 700; }

/* Services and profile */
.split { display: grid; gap: 3.5rem; }
.services { display: grid; gap: 1rem; padding: 0; margin: 0; list-style: none; }
.services li { display: flex; flex-direction: column; gap: .2rem; border-top: 1px solid var(--line); padding-top: .9rem; }
.services b { font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; }
.services span { color: var(--muted); font-size: .92rem; }
dl { display: grid; grid-template-columns: 1fr; margin: 0; }
dt { color: var(--muted); font-size: .85rem; border-top: 1px solid var(--line); padding-top: .9rem; }
dd { margin: 0 0 .9rem; min-width: 0; }

/* Contact */
.contact { background: var(--surface); border: 1px solid var(--line); padding: clamp(1.5rem, 4vw, 2.5rem); display: grid; gap: 1.25rem; }
.contact > div { display: flex; flex-direction: column; gap: .8rem; align-items: flex-start; }
.contact-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.contact-links li { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: baseline; }
.contact-links span { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); min-width: 6rem; }
.contact-links a { overflow-wrap: anywhere; }

footer { border-top: 1px solid var(--line); padding-top: 1.2rem; font-size: .85rem; color: var(--muted); display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }

/* Tablet and up */
@media (min-width: 720px) {
  .wrap { padding-inline: 32px; padding-block: 2rem 4rem; gap: 4.5rem; }
  .tracks { border-top: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; }
  .tracks li { grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; gap: .6rem 1rem; align-items: start; padding: 1.25rem; border: 1px solid var(--line); border-top: 3px solid var(--accent); background: var(--surface); transition: border-color .15s, transform .15s; }
  .tracks li:hover { border-color: var(--accent); transform: translateY(-2px); }
  .tracks .no { grid-column: 1; grid-row: 1; color: var(--accent); font-weight: 500; }
  .tracks .title { grid-column: 1 / -1; grid-row: 2; }
  .tracks .title b { font-size: 1.2rem; }
  .tracks .meta { grid-column: 1; grid-row: 3; }
  .tracks .listen { grid-column: 2; grid-row: 3; }
  .services { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1.25rem; }
  dl { grid-template-columns: 8rem 1fr; }
  dt, dd { border-top: 1px solid var(--line); padding-block: .8rem; margin: 0; }
  .contact { grid-template-columns: 1fr 1fr; align-items: center; }
}
@media (prefers-reduced-motion: reduce) { .tracks li { transition: none; } .tracks li:hover { transform: none; } }

/* PC */
@media (min-width: 1000px) {
  .hero { grid-template-columns: 1.15fr 1fr; align-items: center; gap: 3rem; min-height: 26rem; }
  .hero-side { align-self: stretch; justify-content: flex-end; }
  .wave { --wave-h: 160px; gap: 5px; }
  .wave i { flex-basis: 6px; }
  .split { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .services { grid-template-columns: 1fr; gap: 0; }
  .services li { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 1rem; padding-block: .9rem; }
}