/* Luscofusco Quartet: shared styles for the homepage and the news pages */
:root{
  --bg:#1D2238;          /* dusk blue */
  --bg-alt:#2A3152;      /* slightly lighter dusk, alternating sections */
  --ink:#F3EDE4;         /* ivory text */
  --ink-soft:#B8B7C9;    /* secondary text */
  --peach:#E8B89A;       /* main accent */
  --purple:#5B3F8F;      /* small details, contact panel */
  --rule:rgba(243,237,228,0.2);
  --font:'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter:64px;
  --ease:cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme:dark;
}
@media (max-width:900px){ :root{ --gutter:20px; } }

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:18px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
a:hover{color:var(--peach);}
img{max-width:100%;}
:focus-visible{outline:2px solid var(--peach); outline-offset:3px;}
.label{font-size:13px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft);}
h2{margin:0; font-weight:500; font-size:80px; line-height:0.95; letter-spacing:-0.03em;}
h2 span{display:block;}
@media (max-width:900px){ h2{font-size:56px;} h2 span{display:inline;} }
.fade-y{
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
.more{display:flex; align-items:center; gap:10px; min-height:44px; text-decoration:none; white-space:nowrap; color:var(--ink);}

/* ---------- Top bar: pinned menu with a twilight blur once you scroll ---------- */
.topbar{position:fixed; left:0; right:0; top:0; height:calc(76px + env(safe-area-inset-top,0px)); z-index:50; pointer-events:none;}
.topbar-blur{
  position:absolute; left:0; right:0; top:0; height:calc(130px + env(safe-area-inset-top,0px)); opacity:0;
  -webkit-backdrop-filter:blur(30px) saturate(170%) brightness(0.72); backdrop-filter:blur(30px) saturate(170%) brightness(0.72);
  -webkit-mask-image:linear-gradient(180deg, #000 55%, transparent 100%); mask-image:linear-gradient(180deg, #000 55%, transparent 100%);
  transition:opacity 500ms ease;
}
.topbar-line{
  position:absolute; left:0; right:0; bottom:0; height:1px; opacity:0;
  background:linear-gradient(90deg, rgba(232,184,154,0) 0%, rgba(232,184,154,0.55) 18%, rgba(232,184,154,0.55) 82%, rgba(232,184,154,0) 100%);
  transition:opacity 500ms ease;
}
.is-scrolled .topbar-blur, .is-scrolled .topbar-line{opacity:1;}
.topbar-row{position:absolute; left:0; right:0; bottom:0; height:76px;}
.wordmark{
  position:absolute; left:var(--gutter); top:0; height:100%; display:flex; align-items:center;
  font-size:19px; font-weight:500; letter-spacing:-0.01em; text-decoration:none; white-space:nowrap; pointer-events:auto;
  text-shadow:0 0 14px rgba(12,14,30,0.55), 0 1px 2px rgba(12,14,30,0.45);
  transition:opacity 450ms ease, transform 500ms var(--ease);
}
.wordmark span{margin-left:6px; color:var(--peach);}
.nav{
  position:absolute; left:var(--gutter); top:0; height:100%; display:flex; align-items:center; pointer-events:auto;
  transition:transform 600ms var(--ease);
}
.nav-links{display:flex; gap:36px; list-style:none; margin:0; padding:0; white-space:nowrap;
  font-size:14px; font-weight:500; letter-spacing:0.12em; text-transform:uppercase;}
.nav-links a{text-decoration:none;}
.nav-links a[aria-current]{color:var(--peach);}
.is-scrolled .nav-links, .page .nav-links{text-shadow:0 0 14px rgba(12,14,30,0.55), 0 1px 2px rgba(12,14,30,0.45);}
/* Homepage: links on the left at first; after the first screen they glide right and the name fades in */
.home .wordmark{opacity:0; transform:translateY(-8px); pointer-events:none;}
.home.is-scrolled .wordmark{opacity:1; transform:none; pointer-events:auto;}
.home.is-scrolled .nav{transform:translateX(var(--nav-shift, 0px));}
/* News pages: name on the left, links on the right */
.page .nav{left:auto; right:var(--gutter);}
.round-btn{
  width:44px; height:44px; padding:0; border-radius:50%; color:var(--ink); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.nav-toggle, .menu{display:none;}
@media (max-width:900px){
  .topbar{height:calc(60px + env(safe-area-inset-top,0px));}
  .topbar-blur{height:calc(100px + env(safe-area-inset-top,0px));}
  .topbar-row{height:60px;}
  .wordmark{font-size:17px; text-shadow:0 0 12px rgba(12,14,30,0.55), 0 1px 2px rgba(12,14,30,0.45);}
  .wordmark span{margin-left:5px;}
  .nav{display:none;}
  .nav-toggle{
    display:flex; position:absolute; right:8px; top:8px; pointer-events:auto;
    border:1px solid rgba(243,237,228,0.28); background:rgba(29,34,56,0.45);
    -webkit-backdrop-filter:blur(14px) saturate(160%); backdrop-filter:blur(14px) saturate(160%);
    transition:background 400ms ease, border-color 400ms ease;
  }
  .is-scrolled .nav-toggle{background:rgba(29,34,56,0); border-color:rgba(243,237,228,0);}
  /* Full-screen phone menu over a blurred purple-to-blue fade */
  .menu{
    display:flex; flex-direction:column; gap:8px; position:fixed; inset:0; z-index:60;
    padding:calc(88px + env(safe-area-inset-top,0px)) var(--gutter) 40px;
    background:linear-gradient(180deg, rgba(91,63,143,0.62) 0%, rgba(47,42,90,0.72) 38%, rgba(29,34,56,0.86) 75%, rgba(29,34,56,0.94) 100%);
    -webkit-backdrop-filter:blur(30px) saturate(160%) brightness(0.7); backdrop-filter:blur(30px) saturate(160%) brightness(0.7);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity 450ms ease, visibility 0s linear 460ms;
  }
  .menu.is-open{opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s;}
  .menu-close{position:absolute; right:8px; top:calc(8px + env(safe-area-inset-top,0px)); border:1px solid rgba(243,237,228,0.28); background:rgba(243,237,228,0.10);}
  .menu ul{list-style:none; margin:0; padding:0; border-top:2px solid var(--purple);}
  .menu li a{display:flex; align-items:center; min-height:56px; border-bottom:1px solid var(--rule);
    font-size:34px; font-weight:500; letter-spacing:-0.02em; text-decoration:none;}
  .menu li, .menu-email{opacity:0; transform:translateY(14px); transition:opacity 400ms ease, transform 500ms var(--ease);}
  .menu-email{transform:none;}
  .menu.is-open li, .menu.is-open .menu-email{opacity:1; transform:none;}
  .menu.is-open li:nth-child(1){transition-delay:80ms;}
  .menu.is-open li:nth-child(2){transition-delay:140ms;}
  .menu.is-open li:nth-child(3){transition-delay:200ms;}
  .menu.is-open li:nth-child(4){transition-delay:260ms;}
  .menu.is-open .menu-email{transition-delay:360ms;}
  .menu-email{margin-top:24px; font-size:16px; font-weight:500; color:var(--peach); text-decoration:none;}
  body.menu-open{overflow:hidden;}
}

/* ---------- Hero: photo on the right, title on the left ---------- */
.hero{position:relative; height:min(100svh, 900px); min-height:640px; overflow:hidden; background:var(--bg);}
.hero-photo{
  position:absolute; right:0; top:0; bottom:0; width:53%; margin:0; z-index:1;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, rgba(0,0,0,.6) 90px, #000 200px);
          mask-image:linear-gradient(90deg, transparent 0, rgba(0,0,0,.6) 90px, #000 200px);
}
.hero-photo > div{
  width:100%; height:100%;
  -webkit-mask-image:linear-gradient(180deg, #000 82%, transparent 100%);
          mask-image:linear-gradient(180deg, #000 82%, transparent 100%);
}
.hero-photo img{display:block; width:100%; height:100%; object-fit:cover; object-position:50% 45%;}
.hero-text{
  position:absolute; z-index:3; left:var(--gutter); top:50%; transform:translateY(-45%);
  display:flex; flex-direction:column; gap:40px;
}
.hero-title{
  margin:0; font-weight:500; line-height:0.9; letter-spacing:-0.035em; white-space:nowrap;
  font-size:min(10.4vw, 16.5svh, 150px);
}
.hero-title span{display:block;}
.hero-title .q{color:var(--peach);}
.hero-sub{
  margin:0; width:min(440px, 38vw); padding-top:22px; border-top:2px solid var(--purple);
  font-size:15px; font-weight:500; line-height:1.7; letter-spacing:0.16em; text-transform:uppercase;
}
.hero-sub span{display:block;}
@media (max-width:900px){
  .hero{height:auto; min-height:0; padding-bottom:56px;}
  .hero-photo{position:relative; width:100%; height:min(144vw, 72svh);
    -webkit-mask-image:linear-gradient(180deg, #000 68%, transparent 100%);
            mask-image:linear-gradient(180deg, #000 68%, transparent 100%);}
  .hero-photo > div{-webkit-mask-image:none; mask-image:none;}
  .hero-photo img{object-position:50% 40%;}
  .hero-text{position:relative; left:auto; top:auto; transform:none; margin:-92px var(--gutter) 0; gap:26px;}
  .hero-title{font-size:min(18.5vw, 110px); line-height:0.92;}
  .hero-sub{width:auto; padding-top:18px; font-size:13px;}
}

/* ---------- The Quartet ---------- */
.about{background:linear-gradient(180deg, var(--bg) 0px, var(--bg-alt) 64px, var(--bg-alt) calc(100% - 64px), var(--bg) 100%); padding:136px 0 128px;}
.two-col{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:64px; align-items:baseline; padding:0 var(--gutter);}
.about-lede{margin:0; font-size:28px; line-height:1.45;}
/* Full bio: folds open under the first paragraph */
.bio{display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows 1100ms cubic-bezier(0.33, 1, 0.68, 1), opacity 900ms ease 150ms;}
.bio.is-open{grid-template-rows:1fr; opacity:1;}
.bio > div{overflow:hidden;}
.bio p{margin:0; padding-top:18px; font-size:20px; line-height:1.6;}
.bio p:first-child{padding-top:28px;}
.bio-toggle{
  margin-top:28px; display:flex; align-items:center; gap:16px; min-height:44px; padding:0; border:0;
  background:transparent; color:var(--ink); font-family:var(--font); font-size:13px; font-weight:500;
  letter-spacing:0.14em; text-transform:uppercase; cursor:pointer;
}
.bio-toggle:hover{color:var(--peach);}
.bio-icon{width:46px; height:46px; flex-shrink:0; border-radius:50%; border:1.5px solid var(--peach); color:var(--peach);
  display:flex; align-items:center; justify-content:center;}
.bio-icon .v{transform-origin:9px 9px; transition:transform 450ms cubic-bezier(0.33, 1, 0.68, 1);}
.bio-toggle[aria-expanded="true"] .bio-icon .v{transform:scaleY(0);}
.about-photo{margin:88px 0; height:640px; overflow:hidden;}
.about-photo img{display:block; width:100%; height:100%; object-fit:cover; object-position:50% 10%;}
.members{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; padding:0 var(--gutter);}
.member{display:flex; flex-direction:column; gap:14px; border-top:2px solid var(--purple); padding-top:14px; transition:opacity 450ms ease;}
.member-card{display:flex; flex-direction:column; gap:14px; padding:0; border:0; background:transparent; color:inherit; font:inherit; text-align:left; cursor:pointer;}
.member-foot{display:flex; align-items:baseline; justify-content:space-between; gap:12px;}
/* Until the bios are switched on (site.js), portraits are plain pictures */
.members:not(.bios-on) .bio-tag{display:none !important;}
.members:not(.bios-on) .member-card{pointer-events:none; cursor:default;}
.bio-tag{display:flex; align-items:center; gap:6px; font-size:11px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--peach); white-space:nowrap;}
/* Portraits: same 3:4 crop, calmer colours and a soft blue vignette so the busy backgrounds recede */
.member-photo{display:block; position:relative; margin:0; aspect-ratio:3/4; overflow:hidden; background:var(--bg);}
.member-photo img{display:block; width:100%; height:100%; object-fit:cover; object-position:50% 30%; filter:saturate(0.75) brightness(0.95);
  transition:transform 900ms var(--ease), filter 600ms ease;}
.member-photo::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 85% 75% at 50% 38%, transparent 42%, rgba(42,49,82,0.85) 100%),
    linear-gradient(0deg, rgba(42,49,82,0.7) 0%, transparent 35%);
  transition:opacity 600ms ease;
}
.member-name{font-size:22px; font-weight:500; transition:color 400ms ease;}
/* Hover: the portrait wakes up to its natural colours */
@media (hover:hover){
  .member-card:hover img{filter:none; transform:scale(1.04);}
  .member-card:hover .member-photo::after{opacity:0.35;}
  .member-card:hover .member-name{color:var(--peach);}
}
.member-card:focus-visible img{filter:none; transform:scale(1.04);}
.member-card:focus-visible .member-photo::after{opacity:0.35;}
.member-card:focus-visible .member-name{color:var(--peach);}

/* Member bio: a drawer from the right on computers, a panel under the tapped row on phones */
.bio-drawer{position:fixed; inset:0; z-index:70; visibility:hidden; pointer-events:none; transition:visibility 0s linear 650ms;}
.bio-drawer.is-open{visibility:visible; pointer-events:auto; transition-delay:0s;}
.bio-backdrop{position:absolute; inset:0; background:rgba(15,18,34,0.5); opacity:0; transition:opacity 500ms ease;}
.bio-drawer.is-open .bio-backdrop{opacity:1;}
.bio-drawer aside{
  position:absolute; right:0; top:0; bottom:0; width:min(500px, 100vw); overflow-y:auto; display:flex; flex-direction:column;
  background:linear-gradient(160deg, rgba(91,63,143,0.55) 0%, rgba(42,49,82,0.96) 45%, rgba(29,34,56,0.98) 100%), var(--bg);
  border-left:1px solid rgba(243,237,228,0.14); box-shadow:-24px 0 70px rgba(8,10,22,0.55);
  transform:translateX(calc(100% + 20px)); transition:transform 650ms var(--ease);
}
.bio-drawer.is-open aside{transform:none;}
.bio-close{
  position:absolute; right:20px; top:20px; z-index:3; border:1px solid rgba(243,237,228,0.28); background:rgba(29,34,56,0.45);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.member-bio{flex-grow:1; display:flex; flex-direction:column;}
.member-bio-photo{flex-shrink:0; height:300px; margin:0; overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg, #000 72%, transparent 100%); mask-image:linear-gradient(180deg, #000 72%, transparent 100%);}
.member-bio-photo img{display:block; width:100%; height:100%; object-fit:cover; object-position:50% 22%;}
.member-bio-body{flex-grow:1; display:flex; flex-direction:column; gap:14px; margin:0 44px; padding:22px 0 32px; border-top:2px solid var(--peach);}
.member-bio-body .role{font-size:12px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--peach);}
.member-bio-body h3{margin:-4px 0 0; font-size:40px; font-weight:500; line-height:1.02; letter-spacing:-0.03em;}
.member-bio-text{flex-grow:1; margin-top:6px; font-size:17px; line-height:1.7;}
.member-bio-text p{margin:0 0 1em;}
.member-bio-nav{display:flex; justify-content:space-between; gap:16px; padding-top:14px; border-top:1px solid rgba(243,237,228,0.18);}
.member-bio-nav button{display:flex; align-items:center; gap:8px; min-height:44px; padding:0; border:0; background:transparent; color:var(--ink);
  font:inherit; font-size:12px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; cursor:pointer;}
.member-bio-nav button:hover{color:var(--peach);}
.bio-inline{display:none;}
body.no-scroll{overflow:hidden;}
@media (max-width:900px){
  .about{padding:80px 0; background:linear-gradient(180deg, var(--bg) 0px, var(--bg-alt) 40px, var(--bg-alt) calc(100% - 40px), var(--bg) 100%);}
  .two-col{grid-template-columns:1fr; gap:16px;}
  .about-lede{font-size:19px;}
  .bio p{font-size:17px;}
  .bio p:first-child{padding-top:20px;}
  .bio-toggle{margin-top:20px;}
  .bio-icon{width:44px; height:44px;}
  .about-photo{margin:40px 0; height:260px;}
  .members{grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 14px;}
  .member{gap:10px; padding-top:12px;}
  .member-card{gap:10px;}
  .member-foot{display:contents;}
  .member .label{order:3; margin-top:-6px; font-size:12px; letter-spacing:0.12em;}
  .member-name{order:2; font-size:17px;}
  .bio-tag{order:4; margin-top:-2px; font-size:10px;}
  .members.has-bio .member:not(.is-active){opacity:0.4;}
  /* Phone bio: opens under the row of the tapped portrait, with a small arrow pointing up at it */
  .bio-drawer{display:none;}
  .bio-inline{grid-column:1 / -1; display:grid; grid-template-rows:0fr; opacity:0; margin-top:-24px;
    transition:grid-template-rows 700ms var(--ease), opacity 450ms ease, margin-top 700ms var(--ease);}
  .bio-inline.is-open{grid-template-rows:1fr; opacity:1; margin-top:0;}
  .bio-inline > div{overflow:hidden; padding-top:10px;}
  .bio-inline .member-bio{position:relative; padding:20px 18px 14px; border-top:2px solid var(--peach);
    background:linear-gradient(160deg, rgba(91,63,143,0.55) 0%, rgba(42,49,82,0.96) 45%, rgba(29,34,56,0.98) 100%);}
  .bio-inline .member-bio::before{content:""; position:absolute; top:-11px; left:calc(var(--mark, 25%) - 9px);
    border-left:9px solid transparent; border-right:9px solid transparent; border-bottom:9px solid var(--peach);
    transition:left 450ms var(--ease);}
  .bio-inline .member-bio-photo{display:none;}
  .bio-inline .bio-close{right:6px; top:6px;}
  .member-bio-body{margin:0; padding:0; border-top:0; gap:10px;}
  .member-bio-body .role{font-size:11px;}
  .member-bio-body h3{font-size:28px; padding-right:48px;}
  .member-bio-text{margin-top:4px; font-size:16px; line-height:1.65;}
  .member-bio-nav button{font-size:11px;}
}

/* ---------- News ---------- */
.news{padding:128px 0;}
.news-list{display:flex; flex-direction:column; border-bottom:1px solid var(--rule);}
.news-item{display:grid; grid-template-columns:160px minmax(0,1fr) auto; gap:32px; align-items:baseline; padding:28px 0; border-top:1px solid var(--rule);}
.news-item:first-child{border-top:2px solid var(--purple);}
.news-item > .label{color:var(--peach);}
.news-item h3{margin:0; font-size:24px; font-weight:500; line-height:1.3;}
.news-item p{margin:8px 0 0; font-size:17px; line-height:1.55; color:var(--ink-soft);}
@media (max-width:900px){
  .news{padding:80px 0;}
  .news-item{grid-template-columns:1fr; gap:8px; padding:20px 0;}
  .news-item > .label{font-size:12px;}
  .news-item h3{font-size:21px;}
  .news-item p{margin:0; font-size:16px;}
}

/* ---------- Listen & watch ---------- */
.media{background:linear-gradient(180deg, var(--bg) 0px, var(--bg-alt) 64px, var(--bg-alt) 100%); padding:128px var(--gutter);}
.media-grid{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:24px; margin-top:56px;}
.media-photo{margin:0; overflow:hidden; height:501px;}
.media-photo img{display:block; width:100%; height:100%; object-fit:cover;}
.media-photo.hall img{object-position:50% 72%;}
.soon{height:422px; background:rgba(243,237,228,0.05); border:1px solid var(--rule);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:20px; text-align:center;}
.soon .label{letter-spacing:0.12em;}
.play{width:84px; height:84px; border-radius:50%; background:var(--purple); color:var(--ink); display:flex; align-items:center; justify-content:center;}
.wave{display:flex; align-items:center; gap:5px; height:44px;}
.wave i{width:4px; border-radius:2px; background:rgba(243,237,228,0.35);}
@media (max-width:900px){
  .media{padding:80px var(--gutter); background:linear-gradient(180deg, var(--bg) 0px, var(--bg-alt) 40px, var(--bg-alt) 100%);}
  .media-grid{grid-template-columns:1fr; margin-top:24px;}
  .soon{height:200px; gap:12px;}
  .soon.video{order:1;} .soon.audio{order:2;}
  .media-photo.wall{order:3; height:auto; aspect-ratio:3/2;}
  .media-photo.hall{order:4; height:440px;
    -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 12%, #000 84%, transparent 100%);
            mask-image:linear-gradient(180deg, transparent 0%, #000 12%, #000 84%, transparent 100%);}
  .media-photo.hall img{object-position:50% 70%;}
  .play{width:64px; height:64px;}
  .wave{gap:4px; height:31px;}
  .wave i{width:3px; transform:scaleY(0.72);}
}

/* ---------- Contact: purple panel + form ---------- */
.contact{display:grid; grid-template-columns:560px minmax(0,1fr);}
.contact-panel{background:var(--purple); padding:120px var(--gutter) 96px; display:flex; flex-direction:column; gap:40px;}
.contact-panel h2{font-size:88px; letter-spacing:-0.035em;}
.contact-panel .label{color:rgba(243,237,228,0.75); font-size:12px;}
.stack{display:flex; flex-direction:column; gap:16px;}
.email{font-size:24px; font-weight:500; line-height:1.3; text-underline-offset:6px; text-decoration-thickness:1px; overflow-wrap:anywhere;}
.email:hover{color:var(--ink); text-decoration-thickness:2px;}
.socials{display:flex; gap:16px;}
.social{width:64px; height:64px; border-radius:50%; background:var(--ink); color:var(--purple);
  display:flex; align-items:center; justify-content:center; text-decoration:none; transition:transform .15s;}
.social:hover{color:var(--purple); transform:translateY(-2px);}
.form{padding:120px 112px 96px; display:flex; flex-direction:column; gap:44px; margin:0;}
.form-row{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px;}
.field{display:flex; flex-direction:column; gap:6px;}
.field .label{font-size:12px;}
.field input, .field textarea{
  width:100%; background:transparent; border:0; border-bottom:2px solid rgba(243,237,228,0.25);
  color:var(--ink); font-family:var(--font); font-size:22px; padding:0; height:52px; border-radius:0;
}
.field textarea{height:220px; padding-top:12px; line-height:1.5; resize:vertical;}
.field input::placeholder, .field textarea::placeholder{color:rgba(184,183,201,0.65);}
.field input:focus, .field textarea:focus{outline:none; border-bottom-color:var(--peach);}
.form-foot{display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;}
.form-status{margin:0; font-size:15px; color:var(--peach);}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:14px; height:60px; padding:0 36px; margin-left:auto;
  border:0; border-radius:999px; background:var(--peach); color:var(--bg);
  font-family:var(--font); font-size:15px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; cursor:pointer;
}
.btn:hover{filter:brightness(1.06); color:var(--bg);}
@media (max-width:1100px){ .contact{grid-template-columns:420px minmax(0,1fr);} .form{padding:120px 56px 96px;} .contact-panel h2{font-size:72px;} }
@media (max-width:900px){
  .contact{grid-template-columns:1fr;}
  .contact-panel{padding:64px var(--gutter) 48px; gap:28px;}
  .contact-panel h2{font-size:56px;}
  .email{font-size:20px;}
  .socials{gap:14px;}
  .social{width:56px; height:56px;}
  .form{padding:48px var(--gutter) 56px; gap:32px;}
  .form-row{grid-template-columns:1fr; gap:32px;}
  .field input{height:48px; font-size:18px;}
  .field textarea{height:150px; font-size:18px;}
  .btn{width:100%; height:56px; font-size:14px;}
}

footer{
  display:flex; justify-content:space-between; gap:12px;
  padding:28px var(--gutter) calc(36px + env(safe-area-inset-bottom,0px));
  border-top:2px solid var(--purple);
}
@media (max-width:900px){ footer{margin:0 var(--gutter); padding:20px 0 calc(32px + env(safe-area-inset-bottom,0px)); font-size:12px;} }

/* ---------- News article pages ---------- */
.article-main{padding:170px var(--gutter) 128px; display:flex; flex-direction:column; gap:48px;}
.back{align-self:flex-start; display:flex; align-items:center; gap:10px; min-height:44px; text-decoration:none; color:var(--ink);}
.article-grid{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:64px; align-items:start;}
.article-date{padding-top:14px; border-top:2px solid var(--purple);}
.article-date .label{color:var(--peach);}
.article{max-width:760px; display:flex; flex-direction:column; gap:36px;}
.article h1{margin:0; font-weight:500; font-size:64px; line-height:1; letter-spacing:-0.03em;}
.article .sub{margin:16px 0 0; font-size:26px; line-height:1.35; color:var(--ink-soft);}
.article figure{margin:0; display:flex; flex-direction:column; gap:12px;}
.article figure img{display:block; width:100%; height:470px; object-fit:cover;}
.article figcaption{font-size:14px; line-height:1.5; color:var(--ink-soft);}
.article-body{display:flex; flex-direction:column; gap:24px; font-size:21px; line-height:1.65;}
.article-body p{margin:0;}
.more-news{background:var(--bg-alt); padding:112px 0;}
.more-news h2{font-size:56px;}
@media (max-width:900px){
  .article-main{padding:84px var(--gutter) 72px; gap:24px;}
  .back{font-size:12px;}
  .article-grid{grid-template-columns:1fr; gap:24px;}
  .article-date{padding-top:12px;}
  .article-date .label{font-size:12px;}
  .article{gap:24px;}
  .article h1{font-size:40px;}
  .article .sub{margin-top:12px; font-size:20px;}
  .article figure{gap:10px;}
  .article figure img{height:auto; aspect-ratio:35/24;}
  .article figcaption{font-size:13px;}
  .article-body{gap:20px; font-size:17px;}
  .more-news{padding:64px 0;}
  .more-news h2{font-size:40px;}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .social, .bio, .bio-icon .v, .menu, .menu li, .menu-email, .nav, .wordmark, .topbar-blur, .topbar-line,
  .member, .member-photo img, .bio-drawer, .bio-drawer aside, .bio-backdrop, .bio-inline{transition:none;}
}