:root{--paper:#f4eeea;--sand:#e4d9d2;--ink:#191919;--muted:#716b66;--line:#19191930}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.45 'Helvetica Neue',Helvetica,Arial,sans-serif}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid currentColor;outline-offset:6px}
img{display:block;width:100%}
p,h1,h2,h3{margin:0}

header{height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 3.2%;background:var(--paper);position:sticky;top:0;z-index:5;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;width:135px}
.brand .logo-word{width:105px;height:36px;object-fit:contain}
.brand .logo-flower{width:25px;height:28px;object-fit:contain}
nav{display:flex;gap:34px;font-size:13px;margin-left:auto}
nav a:hover{text-decoration:underline;text-underline-offset:5px}

.hero-top,.section-line{font-size:11px;letter-spacing:.04em}
.hero{height:calc(100svh - 78px);min-height:580px;max-height:1050px;position:relative;color:var(--paper);padding:28px 3.2%;display:flex;flex-direction:column;justify-content:space-between;isolation:isolate}
.hero:after{content:'';position:absolute;inset:0;background:linear-gradient(#0005,transparent 60%,#0008);z-index:-1}
.hero-photo{position:absolute;inset:0;height:100%;width:100%;object-fit:cover;object-position:center 53%;z-index:-2}
.hero-top{display:flex;justify-content:flex-start;align-items:center}
.hero h1{position:absolute;right:4%;bottom:5%;width:43%;opacity:1;margin:0}
.hero h1 img{filter:brightness(0) invert(93%);height:auto;max-height:230px;object-fit:contain}
.hero-bottom{position:absolute;bottom:5%;left:3.2%}
.circle-link{width:66px;height:66px;border:1px solid #ffffff80;border-radius:50%;display:grid;place-items:center;font-size:35px;color:var(--paper)}
.circle-link:hover{background:var(--paper);color:var(--ink)}

.section{padding:34px 6% 100px}
.section-line{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding:18px 0 65px}

h2{font-size:clamp(54px,7.6vw,120px);line-height:.91;font-weight:500;letter-spacing:-.065em}
.intro{display:grid;grid-template-columns:1.15fr 1fr;gap:12%;align-items:center;margin-bottom:65px}
.intro p{font-size:clamp(18px,2vw,27px);line-height:1.35;letter-spacing:-.025em}
.intro p+p{font-size:16px;margin-top:26px;max-width:430px}
.muted{color:var(--muted)}
.band-wide{aspect-ratio:2.05;object-fit:cover;filter:grayscale(1)}
.credits{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:30px}
.credits h3{font-size:18px;font-weight:500;letter-spacing:-.03em}
.credits p{font-size:12px;color:var(--muted);margin-top:7px}

#contact h2{margin-bottom:48px}
.contact-links{list-style:none;margin:0;padding:0}
.contact-links li{border-top:1px solid var(--line)}
.contact-links li:last-child{border-bottom:1px solid var(--line)}
.contact-links a{display:flex;align-items:center;justify-content:space-between;padding:24px 4px;font-size:clamp(18px,2vw,24px);letter-spacing:-.02em;transition:opacity .2s ease, transform .2s ease}
.contact-links a:hover{opacity:.6;transform:translateX(6px)}
.contact-links .arrow{opacity:0;transform:translateX(-6px);transition:opacity .2s ease, transform .2s ease}
.contact-links a:hover .arrow{opacity:1;transform:translateX(0)}

footer{padding:35px 3.2%;display:flex;align-items:center;justify-content:space-between}
footer .brand{font-size:24px}
footer .to-top{font-size:13px;color:var(--muted)}
footer .to-top:hover{color:var(--ink)}

@media(max-width:750px){
  header{height:66px;padding:0 5%}
  .brand{width:112px;gap:7px}
  .brand .logo-word{width:85px}
  .brand .logo-flower{width:21px}
  nav{gap:16px;font-size:11px}
  .hero{height:80svh;min-height:520px;padding:22px 5%}
  .hero h1{width:58%;right:6%;bottom:6%}
  .hero-bottom{left:6%;bottom:6%}
  .circle-link{width:46px;height:46px;font-size:26px}
  .hero-photo{object-position:47% center}
  .section{padding:25px 6% 65px}
  .section-line{font-size:9px;padding-bottom:38px}
  .intro{grid-template-columns:1fr;gap:35px;margin-bottom:35px}
  .intro h2{font-size:65px}
  .band-wide{aspect-ratio:1.3}
  .credits{gap:15px}
  .credits h3{font-size:14px}
  .credits p{font-size:10px}
  .contact-links a{padding:18px 2px;font-size:19px}
  footer{gap:15px;font-size:9px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}