:root{
  --bg:#eee8dc;
  --paper:#f3eee4;
  --text:#282720;
  --muted:#5f5b51;
  --quiet:#777165;
  --accent:#68796f;
  --line:rgba(40,39,32,.20);
  --display:Optima,"Avenir Next","Helvetica Neue",Calibri,sans-serif;
  --ui:"Avenir Next","Helvetica Neue",Calibri,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--ui);font-weight:400;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
header{height:90px;padding:0 clamp(24px,6vw,96px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:relative;z-index:3;background:rgba(238,232,220,.92);backdrop-filter:blur(10px)}
.brand{display:flex;align-items:center;gap:16px;font-size:13px;font-weight:400;letter-spacing:.19em}.logo-wrap{width:45px;height:45px;display:block;flex:0 0 auto}.brand img{display:block;width:45px;height:45px;object-fit:contain;animation:quarter-turn 16s ease-in-out infinite;transform-origin:50% 50%}.brand small{display:block;color:var(--muted);font-size:9px;font-weight:400;margin-top:6px;letter-spacing:.22em}nav{display:flex;gap:34px;font-size:10.5px;font-weight:400;letter-spacing:.22em}nav a:hover{color:var(--accent)}
@keyframes quarter-turn{0%,18%{transform:rotate(0deg)}25%,43%{transform:rotate(90deg)}50%,68%{transform:rotate(180deg)}75%,93%{transform:rotate(270deg)}100%{transform:rotate(360deg)}}
.hero{min-height:570px;position:relative;display:flex;align-items:center;padding:74px clamp(24px,10vw,150px);overflow:hidden}.hero-visual{position:absolute;inset:0 0 0 45%;background-image:linear-gradient(90deg,var(--bg) 0%,rgba(238,232,220,.82) 11%,rgba(238,232,220,.22) 31%,rgba(238,232,220,.05) 52%),linear-gradient(0deg,rgba(238,232,220,.16),rgba(238,232,220,.16)),url('../images/sunrise.jpg');background-size:cover;background-position:center center;opacity:.82}.hero-copy{position:relative;z-index:1;max-width:650px}.eyebrow{font-size:10px;letter-spacing:.28em;color:var(--accent);margin:0 0 20px;font-weight:500}.hero h1{font-family:var(--display);font-size:clamp(46px,5.5vw,78px);line-height:.94;letter-spacing:.025em;font-weight:400;margin:0}.intro{max-width:440px;color:var(--muted);font-size:16px;font-weight:400;line-height:1.75;margin:34px 0}.ambient{border:0;background:none;color:var(--muted);padding:0;display:flex;gap:11px;align-items:center;letter-spacing:.17em;font-family:var(--ui);font-weight:500;font-size:10px;cursor:pointer}.dot{width:7px;height:7px;border:1px solid var(--accent);border-radius:50%}.ambient.on{color:var(--text)}.ambient.on .dot{background:var(--accent);box-shadow:0 0 0 3px rgba(104,121,111,.11)}
.section{padding:86px clamp(24px,10vw,150px);border-top:1px solid var(--line)}.section-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:34px}.section h2{font-family:var(--display);font-size:clamp(32px,3.6vw,50px);line-height:1;font-weight:400;letter-spacing:.015em;margin:0}.hint{font-size:11px;color:var(--muted);letter-spacing:.11em;font-weight:400}.track{display:grid;grid-template-columns:38px 76px 1fr auto;align-items:center;gap:20px;padding:18px 0;border-top:1px solid var(--line);cursor:pointer;transition:.2s}.track:last-child{border-bottom:1px solid var(--line)}.track:hover{padding-left:6px}.num{font-size:11px;color:var(--quiet);font-variant-numeric:tabular-nums}.art{width:76px;height:52px;background:rgba(243,238,228,.32);border:1px solid rgba(40,39,32,.24);position:relative}.art:before{content:"";position:absolute;left:12px;right:12px;top:50%;height:1px;background:rgba(104,121,111,.5)}.art:after{content:"";position:absolute;width:13px;height:13px;left:50%;top:50%;border:1px solid rgba(104,121,111,.62);transform:translate(-50%,-50%) rotate(45deg)}.track-title{font-family:var(--display);font-size:17px;font-weight:400;letter-spacing:.01em}.meta{font-size:10px;color:var(--muted);letter-spacing:.13em;margin-top:6px}.duration{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}.track.playing .track-title{color:var(--accent)}.track.playing .art{box-shadow:inset 2px 0 var(--accent)}
.about-section{display:block}.about-section>.eyebrow{margin-bottom:32px}.about-copy{max-width:790px;margin:0}.about-copy h2{margin-bottom:26px}.about-copy p{max-width:700px;margin:0;color:var(--muted);font-size:16px;line-height:1.85;text-align:left}.about-copy .about-lede{font-family:var(--display);font-size:clamp(22px,2.45vw,33px);line-height:1.35;color:var(--text);margin-bottom:24px;font-weight:400}.about-placeholder{max-width:650px!important}
footer{padding:64px clamp(24px,10vw,150px);border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:end;color:var(--muted);font-size:12px}.mail{font-family:var(--display);font-size:clamp(23px,2.7vw,38px);font-weight:400;color:var(--text);letter-spacing:.01em}.mail:hover{color:var(--accent)}
@media(max-width:850px){.hero-visual{left:35%;opacity:.48;background-image:linear-gradient(90deg,var(--bg) 0%,rgba(238,232,220,.84) 20%,rgba(238,232,220,.18) 70%),linear-gradient(0deg,rgba(238,232,220,.28),rgba(238,232,220,.28)),url('../images/sunrise.jpg')}}
@media(max-width:700px){header{height:76px}.logo-wrap,.brand img{width:38px;height:38px}.brand span:not(.logo-wrap){display:none}nav{gap:17px;font-size:9px}.hero{min-height:530px;padding-top:62px;padding-bottom:62px}.hero-visual{left:0;opacity:.30;background-image:linear-gradient(90deg,rgba(238,232,220,.90),rgba(238,232,220,.32)),linear-gradient(0deg,rgba(238,232,220,.35),rgba(238,232,220,.35)),url('../images/sunrise.jpg')}.hero h1{font-size:13.5vw;line-height:.96}.intro{font-size:15px;max-width:85%}.section{padding-top:64px;padding-bottom:64px}.track{grid-template-columns:28px 55px 1fr auto;gap:12px}.art{width:55px;height:42px}.section-head .hint{display:none}.about-copy .about-lede{font-size:27px}footer{align-items:start;flex-direction:column;gap:36px}.mail{font-size:7vw}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.brand img{animation:none}.track{transition:none}}
/* v5: real project stills and a cleaner transparent logo treatment */
.art.has-image{background-size:cover;background-position:center;border-color:rgba(40,39,32,.15)}
.art.has-image:before,.art.has-image:after{display:none}
.track.playing .art.has-image{box-shadow:inset 3px 0 var(--accent)}
.brand img{opacity:.92}

/* v6 — quieter sound control, data-driven playlist and compact contacts */
.hero{align-items:flex-start;padding-top:115px}
.hero-copy{margin-top:35px}
.hero h1{font-size:clamp(42px,4.7vw,68px);line-height:1.04;text-transform:none}
.sound-toggle{position:absolute;z-index:2;left:clamp(24px,6vw,96px);top:34px;border:0;background:transparent;color:var(--muted);font:500 10px/1 var(--ui);letter-spacing:.24em;padding:7px 0;display:flex;align-items:center;gap:10px;cursor:pointer}
.sound-dot{width:8px;height:8px;border:1px solid var(--accent);border-radius:50%;display:block}
.sound-toggle.on .sound-dot{background:var(--accent);animation:sound-pulse 2.8s ease-in-out infinite}
@keyframes sound-pulse{0%,100%{opacity:.45;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
.track{width:100%;font-family:inherit;color:inherit;text-align:left;background:none;border:0;border-top:1px solid var(--line)}
.track:last-child{border-bottom:1px solid var(--line)}
.track-copy{display:block}.track-title,.meta{display:block}
footer{padding-top:40px;padding-bottom:40px;align-items:center;gap:30px}
.footer-status{white-space:nowrap}
.footer-status span{padding:0 7px;color:var(--quiet)}
.contact-links{display:flex;align-items:center;justify-content:flex-end;gap:25px;flex-wrap:wrap}
.contact-links a{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted);transition:color .2s}
.contact-links a:hover{color:var(--accent)}
.social-icon{font-size:20px;line-height:1;color:var(--accent);min-width:21px;text-align:center}
.social-icon.in,.social-icon.fb{font-family:Arial,sans-serif;font-weight:700;font-size:15px;border:1px solid var(--accent);width:19px;height:19px;line-height:18px;border-radius:2px;min-width:19px}
.social-icon.fb{border-radius:50%;font-size:16px}
.social-icon.envelope{font-size:17px}
.email-link{font-size:11px!important}
@media(max-width:850px){footer{align-items:flex-start;flex-direction:column}.contact-links{justify-content:flex-start}}
@media(max-width:700px){.hero{padding-top:95px}.sound-toggle{top:22px}.hero-copy{margin-top:28px}.hero h1{font-size:12vw}.contact-links{gap:18px 22px}.contact-links a{font-size:10px}}
@media(prefers-reduced-motion:reduce){.sound-toggle.on .sound-dot{animation:none}}