:root { color-scheme: light; --paper:#dfd5ea; --surface:#ece5f3; --ink:#302738; --muted:#62546c; --line:#c3b2cf; --accent:#663c80; --dark:#30233c; --radius:1.75rem; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:2rem; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial,Helvetica,sans-serif; font-size:1rem; line-height:1.6; }
a { color:inherit; text-underline-offset:.25em; }
a:focus-visible { outline:3px solid var(--accent); outline-offset:6px; }
.skip { position:absolute; top:-100px; left:1rem; background:var(--paper); padding:1rem; z-index:2; }
.skip:focus { top:1rem; }
.wrap { width:min(1160px, calc(100% - 6rem)); margin-inline:auto; }
header { display:flex; justify-content:space-between; align-items:center; gap:2rem; padding-block:1.8rem; border-bottom:1px solid var(--line); }
.brand { font-size:1.3rem; font-weight:800; text-decoration:none; letter-spacing:-.06em; display:flex; align-items:center; gap:.6rem; white-space:nowrap; }
.brand span { color:var(--accent); font-family:Georgia,serif; font-size:2rem; line-height:1; }
nav { display:flex; flex-wrap:wrap; gap:.5rem .4rem; }
nav a { font-size:.9rem; text-decoration:none; padding:.5rem .9rem; border-radius:999px; }
nav a:hover { color:var(--accent); background:var(--surface); text-decoration:underline; }
.eyebrow { font: .875rem/1.5 'Courier New',monospace; letter-spacing:.1em; text-transform:uppercase; }
.hero { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(0,1fr); align-items:center; gap:3rem; padding-block:4.5rem; }
.hero-copy { min-width:0; }
.hero-portrait { width:100%; max-width:380px; justify-self:end; padding:.6rem; background:var(--surface); border-radius:50%; box-shadow:0 16px 40px #30233c1a; }
.hero-portrait img { display:block; width:100%; height:auto; border-radius:50%; }
.hero .eyebrow { color:var(--accent); margin:0 0 1.8rem; }
h1 { font-size:clamp(3rem,5.7vw,5.2rem); line-height:1.08; letter-spacing:-.055em; font-weight:700; margin:0; }
h1 em { font-family:Georgia,'Times New Roman',serif; font-weight:400; color:var(--accent); }
.intro { display:flex; flex-direction:column; align-items:start; gap:1.25rem; margin-top:2rem; }
.intro p { max-width:32rem; color:var(--muted); font-size:1.125rem; margin:0; }
.contact-link { white-space:nowrap; font-weight:600; }
section { padding-block:3.5rem; border-top:1px solid var(--line); }
.section-top { display:flex; align-items:baseline; gap:1.4rem; margin-bottom:2rem; }
.number { font: .875rem 'Courier New',monospace; color:var(--accent); }
h2 { font-size:clamp(1.8rem,3.6vw,2.75rem); letter-spacing:-.045em; line-height:1.15; margin:0; }
.software { display:grid; grid-template-columns:1.55fr 1fr; gap:1.3rem; }
.coming { background:var(--dark); color:var(--paper); padding:2.7rem; min-height:310px; display:flex; flex-direction:column; justify-content:space-between; border-radius:var(--radius); }
.coming .eyebrow { margin:0 0 2.5rem; color:#d7be83; }
.coming h3 { margin:0; font-size:clamp(2rem,3.5vw,3rem); line-height:1.12; letter-spacing:-.045em; max-width:20rem; }
.coming p:last-child { color:#d5c9df; max-width:29rem; margin:1.25rem 0 0; }
.utility { background:var(--surface); padding:2.5rem; border:1px solid var(--line); border-radius:var(--radius); display:flex; flex-direction:column; align-items:start; }
.utility .eyebrow { color:var(--muted); margin:0 0 2.5rem; }
.utility h3 { font-size:1.6rem; line-height:1.25; letter-spacing:-.035em; margin:0; }
.utility p { color:var(--muted); margin:.8rem 0 2rem; }
.utility a { margin-top:auto; font-weight:600; }
.section-note { color:var(--muted); margin:-.7rem 0 2rem; }
.featured-band { background:var(--surface); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,300px); align-items:center; gap:2.5rem; padding:2.5rem; margin-bottom:1.5rem; border:1px solid var(--line); border-radius:var(--radius); text-decoration:none; }
.featured-band-details { display:flex; flex-direction:column; align-items:flex-start; gap:1.5rem; min-width:0; }
.featured-band h3 { width:100%; max-width:676px; margin:0; }
.band-description { margin:0; color:var(--muted); font-size:1.125rem; }
.featured-band img { display:block; width:100%; height:auto; border-radius:.75rem; }
.band-photo { position:relative; width:100%; max-width:300px; overflow:hidden; border-radius:1.5rem; }
.band-photo img { border-radius:inherit; }
.band-photo::after { content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 12px 8px var(--surface); pointer-events:none; }
.featured-band span { color:var(--accent); font-weight:600; text-decoration:underline; text-underline-offset:.25em; }
.featured-band:hover { border-color:var(--accent); }
.bands { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.75rem 2rem; list-style:none; padding:1rem 0; margin:0 0 1.8rem; }
.bands li { min-width:0; }
.bands h3 { margin:0; color:var(--ink); font-size:1.5rem; font-weight:600; line-height:1.3; letter-spacing:-.025em; }
.bands p { margin:.4rem 0 0; color:var(--muted); font-size:1rem; }
.music-contact { font-size:.95rem; color:var(--muted); }
.rc-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.3rem; }
.project-link { background:var(--surface); display:block; padding:1.6rem 1.8rem; border:1px solid var(--line); text-decoration:none; transition:background .15s,border-color .15s; border-radius:var(--radius); }
.project-link:hover { background:#e4d8ee; border-color:var(--accent); }
.project-link strong { display:block; font-size:1.25rem; letter-spacing:-.02em; }
.project-link span { display:block; color:var(--muted); margin-top:.4rem; }
.project-link:hover strong { text-decoration:underline; text-underline-offset:.25em; }
footer { border-top:1px solid var(--line); padding-block:2rem; margin-top:1rem; }
.footer-top { display:flex; justify-content:space-between; align-items:center; gap:1.5rem; margin-bottom:1.5rem; }
.footer-top p { margin:0; font-weight:600; }
.remark { color:var(--muted); font-size:.8125rem; max-width:45rem; margin:0; }
.uuid-converter .converter-heading { padding:2.5rem 0 2rem; }
.uuid-converter .converter-heading .eyebrow { color:var(--accent); margin:0 0 .75rem; }
.uuid-converter h1 { font-size:clamp(2rem,4vw,3.25rem); line-height:1.15; letter-spacing:-.04em; }
.uuid-converter .converter-heading > p:last-child { color:var(--muted); margin:1rem 0 0; max-width:44rem; }
.uuid-converter .converter-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem; margin:0 0 2.5rem; }
.uuid-converter .converter-panel { min-width:0; padding:2rem; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.uuid-converter .converter-panel h2 { font-size:1.75rem; margin:0 0 1.5rem; }
.uuid-converter label { display:block; font-weight:600; margin-bottom:.5rem; }
.uuid-converter input { display:block; width:100%; min-width:0; min-height:70px; border:2px solid var(--accent); border-radius:.875rem; padding:1.125rem 1.25rem; background:#fff; color:#000; caret-color:#000; font:600 1.25rem/1.5 'Courier New',monospace; }
.uuid-converter input::placeholder { color:#000; opacity:1; }
.uuid-converter .validation { color:var(--muted); font-size:.875rem; min-height:1.5em; margin:.6rem 0 1.25rem; }
.uuid-converter button { cursor:pointer; min-height:44px; max-width:100%; padding:.65rem 1rem; border:1px solid var(--accent); border-radius:999px; background:transparent; color:var(--accent); font:600 1rem/1.4 Arial,Helvetica,sans-serif; }
.uuid-converter button:hover { background:var(--paper); }
.uuid-converter button.convert-button { width:100%; background:var(--accent); color:var(--surface); }
.uuid-converter button.convert-button:hover { background:var(--dark); }
.uuid-converter .converter-actions { display:flex; flex-wrap:wrap; gap:.65rem; margin-top:1rem; }
.uuid-converter :is(input,button):focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
@media (max-width:1200px) {
  .uuid-converter .converter-grid { grid-template-columns:1fr; }
}
@media (max-width:760px) {
  .wrap { width:calc(100% - 2.5rem); }
  header { align-items:start; gap:1rem; }
  nav { justify-content:flex-end; gap:.3rem; max-width:15rem; }
  nav a { font-size:.875rem; }
  .hero { grid-template-columns:1fr; gap:2.5rem; padding-block:3rem; }
  .hero-portrait { justify-self:start; }
  .software { grid-template-columns:1fr; }
  .coming,.utility { padding:2rem; }
  .featured-band { grid-template-columns:1fr; gap:1.5rem; padding:1.5rem; }
  .bands { grid-template-columns:1fr; }
  section { padding-block:2.5rem; }
  .uuid-converter .converter-panel { padding:1.5rem; }
}
@media (max-width:430px) {
  header { flex-direction:column; }
  nav { max-width:none; justify-content:flex-start; }
  .rc-grid { grid-template-columns:1fr; }
  .footer-top { flex-direction:column; align-items:start; gap:.5rem; }
  .coming,.utility { padding:1.5rem; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .project-link { transition:none; } }