/* About: the dressing room.
   One lit mirror holds the profile. Passes for the projects. A printed setlist for the history.
   Readability first: no rotating parts, no decoration that carries no information. */
:root{
  --bg:#150e09;--paper:#f3e5c6;--muted:#b9a27d;--amber:#ffb24f;--gold:#dab77c;--line:#bf986c44;
  --glass:#f5ecda;--ink:#1d140c;--ink-soft:#3d2f20;--ink-mute:#84704f;
  --serif:"Cormorant Garamond",Georgia,serif;--sans:"Inter","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;min-height:100vh;color:var(--paper);font:14px/1.8 var(--sans);-webkit-font-smoothing:antialiased;
  background:radial-gradient(ellipse 70% 34% at 50% 0,#7a461d38,transparent 70%),var(--bg)}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.14;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%2373674f' filter='url(%23n)' opacity='.2' d='M0 0h160v160H0z'/%3E%3C/svg%3E")}
a{color:inherit;text-underline-offset:5px}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
a,button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
[hidden]{display:none!important}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ol,ul,figure{margin:0}ol,ul{padding:0;list-style:none}
.skip{position:absolute;left:16px;top:8px;z-index:60;background:var(--paper);color:var(--bg);padding:12px}
.skip:not(:focus){width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* header (same as the other pages) */
.site-header{max-width:1240px;margin:auto;padding:23px 26px 20px;min-height:91px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line)}
.wordmark img{width:176px}
.site-header nav{display:flex;align-items:center;flex-wrap:wrap;gap:25px;font-size:11px;letter-spacing:.04em}
.site-header nav a{position:relative;padding:10px 0;text-decoration:none;color:#d5c6a8}
.site-header nav a:hover{color:#fff3cf}
.site-header nav a[aria-current]::after{position:absolute;content:"";bottom:2px;left:0;right:0;height:1px;background:var(--gold)}
.site-header nav span{font-size:9px;opacity:.6}

main{max-width:1240px;margin:auto;padding:0 26px}
.page-note{display:flex;justify-content:space-between;padding:36px 0 22px;font-size:10px;letter-spacing:.12em;color:#bbab8c}

.section-title{display:flex;align-items:center;gap:20px;font:500 40px/1 var(--serif);letter-spacing:-.01em}
.section-title::after{content:"";flex:1;height:1px;background:var(--line)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 24px;font-size:12px;font-weight:500;letter-spacing:.1em;text-decoration:none;white-space:nowrap;
  color:var(--ink);border:1px solid #1d140c59;transition:background .25s,color .25s,border-color .25s,box-shadow .25s}
.btn:hover{border-color:var(--ink)}
.btn-solid{background:var(--ink);color:var(--glass);border-color:var(--ink)}
.btn-solid:hover{background:#3a2a1a}
.btn-amber{color:#1a0f08;border:0;border-radius:8px;background:linear-gradient(#ffc977,#ffa83e);box-shadow:0 0 0 1px #ffd59a inset,0 10px 30px #ffb24f33;padding:17px 30px;font-size:13px;letter-spacing:.06em}
.btn-amber:hover{box-shadow:0 0 0 1px #ffe2b5 inset,0 12px 40px #ffb24f55}

/* ---------- 1. the mirror ---------- */
.mirror{--pad:46px;position:relative;padding:var(--pad) var(--pad) 30px;border-radius:6px;
  background:linear-gradient(170deg,#261a12,#17100b 40%,#120b07);
  box-shadow:0 0 0 1px #3d2c1e inset,0 0 0 1px #000,0 40px 80px #000a,0 0 150px #ffb24f1f}
.bulbs{position:absolute;pointer-events:none;filter:drop-shadow(0 0 5px #ffcb7d) drop-shadow(0 0 16px #ffb24f8c);
  --bulb:radial-gradient(circle,#fffdf6 0 5px,#ffe7b3 6px 8px,#ffc15f 9px,#4a3624 10px 11.5px,transparent 12.5px);
  animation:lights-on 1.5s ease-out both}
.bulbs-top{left:var(--pad);right:var(--pad);top:10px;height:26px;background:var(--bulb) 0 50%/72px 26px;background-repeat:space no-repeat}
.bulbs-left,.bulbs-right{top:var(--pad);bottom:30px;width:26px;background:var(--bulb) 50% 0/26px 72px;background-repeat:no-repeat space}
.bulbs-left{left:10px}.bulbs-right{right:10px}
@keyframes lights-on{0%,28%{opacity:.12}36%{opacity:.9}42%{opacity:.3}52%,100%{opacity:1}}

/* isolation + its own layer: Safari blends the photo into the mirror right away, even while the bulbs light up */
.glass{isolation:isolate;transform:translateZ(0);display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);min-height:600px;border-radius:2px;overflow:hidden;color:var(--ink);
  background:radial-gradient(ellipse 90% 80% at 38% 40%,#f9f1e1,#efe3cb);
  box-shadow:0 0 0 1px #c9a56a,inset 0 0 90px #b9844033}
.portrait{position:relative;min-height:420px}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%;mix-blend-mode:multiply;filter:grayscale(1) contrast(1.04);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 82%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 82%,transparent)}
.profile{display:flex;flex-direction:column;justify-content:center;padding:60px 68px 56px 16px}
.profile h1{font:500 clamp(40px,4.9vw,76px)/1 var(--serif);letter-spacing:-.02em;white-space:nowrap}
.sp-break{display:none}
.roles{margin-top:22px;padding-bottom:20px;border-bottom:1px solid #1d140c2e;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute)}
.language-switch{display:flex;gap:10px;align-items:center;margin-top:20px;font-size:12px;color:var(--ink-mute)}
.language-switch button{padding:3px 0;color:var(--ink-mute);border-bottom:1px solid transparent}
.language-switch button[aria-pressed=true]{color:var(--ink);font-weight:600;border-color:var(--ink)}
.biography{margin-top:22px;max-width:560px}
.biography p{font-size:15px;line-height:2.05;color:var(--ink-soft)}
.biography[lang=en] p{line-height:1.85}
.biography p+p{margin-top:14px}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* ---------- 2. passes ---------- */
.passes{padding-top:110px}
.pass-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;padding-top:86px}
.pass{position:relative;display:flex;flex-direction:column;border-radius:10px;color:var(--ink);background:#f3ecdd;box-shadow:0 26px 46px #0009}
.pass::before{content:"";position:absolute;left:50%;bottom:calc(100% - 4px);width:26px;height:70px;margin-left:-13px;
  background:linear-gradient(to top,color-mix(in srgb,var(--band) 78%,#000) 45%,transparent)}
.pass::after{content:"";position:absolute;left:50%;top:-9px;width:36px;height:17px;margin-left:-18px;border-radius:3px;z-index:1;
  background:linear-gradient(#e2dbcd,#a39c8d 60%,#7d766a);box-shadow:0 2px 4px #0007}
.band{display:flex;align-items:center;justify-content:center;height:68px;border-radius:10px 10px 0 0;background:var(--band)}
.band img{height:26px;width:auto;max-width:62%;object-fit:contain;filter:brightness(0) invert(1)}
.band-muudo img{height:34px}
.photo{display:block;aspect-ratio:3/2;overflow:hidden;background:#e4dccb}
.photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.03)}
.photo-solo img{object-position:42% 40%}
.pass-body{display:flex;flex-direction:column;flex:1;padding:22px 24px 8px}
.kind{font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute)}
.pass h3{margin-top:6px;font:700 23px/1.15 var(--sans);letter-spacing:.01em}
.pass p{margin:12px 0 22px;font-size:14px;line-height:1.95;color:var(--ink-soft)}
.pass-link{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding:15px 0 14px;border-top:1px solid #1d140c26;font-size:12px;font-weight:600;letter-spacing:.06em;text-decoration:none}
.pass-link span{transition:transform .25s}
.pass-link:hover span{transform:translate(3px,-3px)}

/* ---------- 3. setlist ---------- */
.history{padding-top:120px}
.setlist{position:relative;max-width:880px;margin:0 auto;padding:64px 72px 46px;color:#171310;background:#f6f1e7;box-shadow:0 30px 60px #000a}
.tape{position:absolute;top:-19px;left:50%;width:190px;height:40px;margin-left:-95px;transform:rotate(-2deg);
  filter:drop-shadow(0 1px 1px #0000004d);opacity:.9;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='40'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .18' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .14 0 0 0 .5 -.12'/%3E%3C/filter%3E%3Crect width='190' height='40' filter='url(%23f)'/%3E%3C/svg%3E"),
    linear-gradient(180deg,#ffffff38,transparent 18%,transparent 80%,#6b521f26),
    linear-gradient(90deg,#d9c594,#e6d5a8 30%,#dcc999 62%,#e3d1a2);
  clip-path:polygon(0 4%,1.2% 12%,.3% 21%,1.6% 30%,.5% 40%,1.8% 49%,.4% 58%,1.5% 68%,.2% 77%,1.4% 87%,.6% 96%,2% 100%,98.4% 100%,99.6% 91%,98.5% 82%,99.8% 72%,98.6% 63%,99.7% 53%,98.3% 44%,99.5% 34%,98.7% 25%,100% 15%,98.8% 7%,99.4% 0,1% 0)}
.setlist h2{padding-bottom:20px;border-bottom:1px solid #1713104d;font:500 54px/1 var(--serif);letter-spacing:-.01em}
.setlist ol{counter-reset:s}
.setlist li{display:grid;grid-template-columns:210px 1fr;align-items:baseline;padding:19px 0;border-bottom:1px solid #1713101f;counter-increment:s}
.setlist time{font:500 27px/1.2 var(--serif);letter-spacing:.01em;font-variant-numeric:lining-nums;white-space:nowrap;color:#2a2016}
.setlist p{font-size:14px;font-weight:400;line-height:1.8;letter-spacing:.03em;color:#3d3226}

/* ---------- 4. contact ---------- */
.contact{padding-top:110px}
.contact-row{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:34px 0 0}
.contact-row p{font-size:15px;line-height:1.9;color:#e2d3b4}

.next-page{display:flex;justify-content:flex-end;gap:40px;margin-top:100px;padding:34px 0 60px;border-top:1px solid var(--line)}
.next-page a{font:400 44px/1 var(--serif);text-decoration:none;color:var(--paper)}
.next-page a span{font-size:24px;color:var(--amber);vertical-align:8px}
.next-page a:hover{color:#fff3cf}

.page-footer{max-width:1188px;margin:0 auto;padding:21px 0 28px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:9px;color:#bda987}
.page-footer a{text-decoration:none}

@media(max-width:1000px){
  .site-header nav{gap:18px}.page-footer{margin:0 26px}
  .mirror{--pad:38px}
  .profile{padding:44px 40px 44px 8px}
  .biography p{font-size:14px}
  .pass-row{gap:18px}
  .pass-body{padding:18px 18px 6px}
  .pass p{font-size:13px}
  .setlist{padding:56px 44px 38px}
  .setlist li{grid-template-columns:180px 1fr}
}

/* phone */
@media(max-width:760px){
  .site-header{margin:0 17px;padding:18px 0 13px;gap:17px;flex-wrap:wrap;min-height:0}
  .wordmark img{width:145px}
  .site-header nav{width:100%;justify-content:space-between;gap:9px;font-size:10px;letter-spacing:0}
  .site-header nav a{padding:7px 0}.site-header nav span{font-size:8px}
  main{padding:0 17px}
  .page-note{padding:24px 0 14px;font-size:8px;letter-spacing:.08em}
  .section-title{font-size:32px;gap:14px}

  .mirror{--pad:28px;padding-bottom:22px}
  .bulbs{--bulb:radial-gradient(circle,#fffdf6 0 3.5px,#ffe7b3 4.5px 6px,#ffc15f 7px,#4a3624 7.5px 8.5px,transparent 9.5px)}
  .bulbs-top{top:5px;height:18px;background-size:46px 18px}
  .bulbs-left,.bulbs-right{bottom:22px;width:18px;background-size:18px 46px}
  .bulbs-left{left:5px}.bulbs-right{right:5px}
  .glass{grid-template-columns:1fr;min-height:0}
  .portrait{min-height:0;height:94vw}
  .profile{padding:6px 22px 30px}
  .profile h1{font-size:8.4vw;text-align:center}
  .roles{margin-top:16px;padding-bottom:16px;font-size:10px;letter-spacing:.08em}
  .sp-break{display:inline}
  .biography p{font-size:14px;line-height:2}
  .actions{margin-top:24px}
  .actions .btn{flex:1 1 100%}

  .passes{padding-top:76px}
  .pass-row{grid-template-columns:1fr;gap:22px;padding-top:26px}
  .pass::before,.pass::after{display:none}
  .pass-body{padding:20px 22px 6px}

  .history{padding-top:84px}
  .setlist{padding:50px 22px 26px}
  .setlist h2{font-size:44px}
  .setlist li{grid-template-columns:1fr;padding:16px 0}
  .setlist time{font-size:24px}
  .setlist p{font-size:13px;margin-top:2px}

  .contact{padding-top:76px}
  .contact-row{flex-direction:column;align-items:stretch;gap:20px;padding-top:24px}
  .contact-row p{font-size:14px}

  .next-page{justify-content:space-between;margin-top:70px;padding:26px 0 40px}
  .next-page a{font-size:36px}
  .page-footer{margin:0 17px;padding:19px 0 23px;gap:10px;font-size:8px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* History: Flood Std from Adobe Fonts (kit phy1som, linked in about.html) */
.setlist h2{font-family:"flood-std","Flood Std",var(--serif);font-weight:400;font-size:52px;letter-spacing:.01em;line-height:1}
.setlist time{font-family:"flood-std","Flood Std",var(--serif);font-weight:400;font-size:23px;letter-spacing:.03em}
.setlist li{grid-template-columns:230px 1fr}
@media(max-width:760px){
  .setlist h2{font-size:44px}
  .setlist time{font-size:21px}
  .setlist li{grid-template-columns:1fr}
}

/* Contact: antique gold, brushed metal, engraved letters */
.btn-amber{position:relative;overflow:hidden;border-radius:8px;padding:18px 34px;font-size:13px;font-weight:600;letter-spacing:.08em;color:#2b1d0c;
  text-shadow:0 1px 0 #f6e3b099;
  background:
    repeating-linear-gradient(90deg,#ffffff0d 0 1px,transparent 1px 3px,#0000000a 3px 4px),
    linear-gradient(180deg,#ecd59c 0%,#d2b06a 18%,#a8813f 48%,#8d6a31 56%,#b8924f 78%,#e0c587 100%);
  border:1px solid #5b4220;
  box-shadow:inset 0 1px 0 #fff4cf,inset 0 -1px 0 #4a3418,inset 0 0 0 2px #c9a75e55,0 8px 22px #00000066,0 0 28px #c9a35a1f;
  transition:filter .25s,box-shadow .25s,transform .25s}
.btn-amber::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,#fff6d84d 48%,transparent 60%);transform:translateX(-120%);transition:transform .7s ease}
.btn-amber:hover{filter:brightness(1.06);box-shadow:inset 0 1px 0 #fff4cf,inset 0 -1px 0 #4a3418,inset 0 0 0 2px #c9a75e77,0 10px 26px #00000077,0 0 34px #c9a35a33;transform:translateY(-1px)}
.btn-amber:hover::after{transform:translateX(120%)}