/* ============================================================
   AULT ACADEMY — design tokens
   ============================================================ */
:root{
  --forest-900:#112A20; --forest-800:#14352A; --forest-700:#1B4332;
  --forest-600:#2D6A4F; --forest-500:#3C8264;
  --sage:#B7D0BF; --mist:#E9F0E9;
  --cream:#FBF6EC; --sand:#F6E2BA; --honey:#E0A33E; --amber:#B47A24;
  --ink:#23201C; --muted:#6B6459; --line:rgba(17,42,32,.12);
  --radius:14px; --radius-lg:22px;
  --shadow-sm:0 1px 2px rgba(17,42,32,.06),0 4px 12px -4px rgba(17,42,32,.10);
  --shadow:0 1px 2px rgba(17,42,32,.06),0 12px 32px -12px rgba(17,42,32,.22);
  --shadow-lift:0 2px 6px rgba(17,42,32,.08),0 24px 48px -16px rgba(17,42,32,.30);
  --ease:260ms cubic-bezier(.2,.7,.3,1);
  --wrap:1160px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:84px}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font:400 1.0625rem/1.65 'Inter',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:'Fraunces',Georgia,serif; font-weight:600; letter-spacing:-.02em; line-height:1.12; margin:0 0 .5em; text-wrap:balance}
h1{font-size:clamp(2.4rem,1.4rem + 4vw,4rem)}
h2{font-size:clamp(1.9rem,1.3rem + 2.4vw,2.9rem)}
h3{font-size:clamp(1.2rem,1.05rem + .6vw,1.45rem)}
p{margin:0 0 1.1em; text-wrap:pretty}
a{color:var(--forest-600); text-underline-offset:3px; text-decoration-thickness:1.5px}
a:hover{color:var(--amber)}
img{max-width:100%; display:block}
.wrap{width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto}
.eyebrow{
  font:600 .78rem/1 'Inter',sans-serif; letter-spacing:.14em; text-transform:uppercase;
  color:var(--amber); margin:0 0 1rem; display:block;
}
.lede{font-size:1.2rem; color:var(--muted)}
:focus-visible{outline:3px solid var(--honey); outline-offset:3px; border-radius:6px}
.skip{position:absolute; left:-9999px; top:0; background:var(--forest-700); color:var(--cream); padding:.9rem 1.4rem; z-index:200; border-radius:0 0 10px 0}
.skip:focus{left:0}

/* ---------------- Header ---------------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(17,42,32,.94); backdrop-filter:blur(12px) saturate(1.4);
  border-bottom:1px solid rgba(251,246,236,.10);
}
.bar{display:flex; align-items:center; gap:1.5rem; min-height:76px}
.brand{display:flex; align-items:center; gap:.8rem; text-decoration:none; margin-right:auto}
.crest{
  width:44px; height:44px; flex:none; border-radius:12px;
  background:linear-gradient(150deg,var(--honey),var(--amber));
  display:grid; place-items:center; color:var(--forest-900);
  font:700 1.35rem/1 'Fraunces',serif; box-shadow:var(--shadow-sm);
}
.brand-text{display:flex; flex-direction:column; line-height:1.1}
.brand-name{font:600 1.35rem/1 'Fraunces',serif; color:var(--cream); letter-spacing:-.02em}
.brand-sub{font:500 .72rem/1 'Inter',sans-serif; letter-spacing:.16em; text-transform:uppercase; color:var(--honey); margin-top:.35rem}
.nav{display:flex; gap:.35rem; align-items:center}
.nav a{
  color:rgba(251,246,236,.86); text-decoration:none; padding:.55rem .8rem; border-radius:8px;
  font:600 .93rem/1 'Inter',sans-serif; transition:color var(--ease),background var(--ease);
}
.nav a:hover{color:var(--cream); background:rgba(224,163,62,.16)}
.nav .cta{background:var(--honey); color:var(--forest-900)}
.nav .cta:hover{background:var(--sand); color:var(--forest-900)}
.menu-btn{display:none; background:none; border:1px solid rgba(251,246,236,.25); color:var(--cream); border-radius:10px; padding:.55rem .8rem; font:600 .9rem 'Inter',sans-serif; cursor:pointer}

/* ---------------- Hero ---------------- */
.hero{
  position:relative; color:var(--cream); overflow:hidden;
  background:
    radial-gradient(120% 90% at 82% 12%, rgba(224,163,62,.20), transparent 58%),
    linear-gradient(158deg,var(--forest-700) 0%,var(--forest-800) 48%,var(--forest-900) 100%);
}
.hero::after{
  content:""; position:absolute; inset:auto 0 -1px 0; height:90px;
  background:linear-gradient(180deg,transparent,var(--cream)); pointer-events:none;
}
.hero-inner{
  padding:clamp(3.5rem,2rem + 7vw,6.5rem) 0 clamp(4.5rem,3rem + 7vw,7rem); position:relative; z-index:1;
  display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(2rem,1rem + 4vw,4.5rem); align-items:center;
}
.glance{
  background:rgba(251,246,236,.07); border:1px solid rgba(251,246,236,.16);
  border-radius:var(--radius-lg); padding:1.75rem; backdrop-filter:blur(6px);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.5);
}
.glance h2{
  font:600 .78rem/1 'Inter',sans-serif; letter-spacing:.14em; text-transform:uppercase;
  color:var(--honey); margin:0 0 1.35rem;
}
.glance dl{margin:0; display:grid; gap:1.1rem}
.glance dt{font-size:.8rem; color:rgba(251,246,236,.6); margin-bottom:.2rem; font-weight:500}
.glance dd{margin:0; font:600 1.05rem/1.35 'Inter',sans-serif; color:var(--cream)}
.glance dd a{color:var(--sand)}
.glance .rule{height:1px; background:rgba(251,246,236,.14)}
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr}
  .glance{margin-top:.5rem}
}
.hero h1{color:var(--cream); max-width:16ch}
.hero h1 em{font-style:normal; color:var(--honey)}
.hero p{max-width:56ch; color:rgba(251,246,236,.82); font-size:1.2rem}
.hero-actions{display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2rem}
.btn{
  display:inline-flex; align-items:center; gap:.5rem; border:0; cursor:pointer;
  padding:.95rem 1.6rem; border-radius:999px; text-decoration:none;
  font:600 1rem/1 'Inter',sans-serif; transition:transform var(--ease),box-shadow var(--ease),background var(--ease);
}
.btn-primary{background:var(--honey); color:var(--forest-900)}
.btn-primary:hover{background:var(--sand); color:var(--forest-900); transform:translateY(-2px); box-shadow:var(--shadow)}
.btn-ghost{background:rgba(251,246,236,.10); color:var(--cream); box-shadow:inset 0 0 0 1px rgba(251,246,236,.28)}
.btn-ghost:hover{background:rgba(251,246,236,.18); color:var(--cream); transform:translateY(-2px)}
.badge{
  display:inline-flex; align-items:center; gap:.5rem; margin-bottom:1.4rem;
  background:rgba(224,163,62,.16); color:var(--sand); border:1px solid rgba(224,163,62,.32);
  padding:.4rem .9rem; border-radius:999px; font:600 .8rem/1 'Inter',sans-serif; letter-spacing:.04em;
}
.badge .dot{width:7px; height:7px; border-radius:50%; background:var(--honey)}

/* ---------------- Quick links ---------------- */
.quick{margin-top:-3.5rem; position:relative; z-index:5; padding-bottom:clamp(3rem,2rem + 3vw,4.5rem)}
.quick-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:1rem}
.qcard{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem 1.2rem;
  text-decoration:none; color:var(--ink); box-shadow:var(--shadow-sm);
  transition:transform var(--ease),box-shadow var(--ease),border-color var(--ease);
  display:flex; flex-direction:column; gap:.7rem;
}
.qcard:hover{transform:translateY(-4px); box-shadow:var(--shadow-lift); border-color:rgba(224,163,62,.5); color:var(--ink)}
.qcard .ico{width:38px; height:38px; border-radius:10px; background:var(--mist); display:grid; place-items:center; color:var(--forest-600)}
.qcard .ico svg{width:20px; height:20px; stroke-width:1.8}
.qcard b{font:600 1rem/1.3 'Inter',sans-serif; display:block}
.qcard span{font-size:.85rem; color:var(--muted); line-height:1.45}

/* ---------------- Sections ---------------- */
section{padding:clamp(3.5rem,2.5rem + 4vw,6rem) 0}
.section-head{max-width:60ch; margin-bottom:clamp(2rem,1.5rem + 2vw,3rem)}
.band-dark{background:linear-gradient(180deg,var(--forest-800),var(--forest-900)); color:var(--cream)}
.band-dark h2,.band-dark h3{color:var(--cream)}
.band-dark p{color:rgba(251,246,236,.78)}
.band-dark .eyebrow{color:var(--honey)}
.band-mist{background:var(--mist)}

/* Mission */
.mission-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,1rem + 4vw,4rem); align-items:start}
.pillars{display:grid; gap:.75rem}
.pillar{
  display:flex; gap:.9rem; align-items:flex-start;
  background:rgba(251,246,236,.06); border:1px solid rgba(251,246,236,.12);
  border-radius:var(--radius); padding:1.1rem 1.2rem;
}
.pillar .n{
  flex:none; width:30px; height:30px; border-radius:9px; background:rgba(224,163,62,.2); color:var(--honey);
  display:grid; place-items:center; font:600 .85rem/1 'Inter',sans-serif;
}
.pillar b{display:block; font:600 1rem/1.3 'Inter',sans-serif; color:var(--cream); margin-bottom:.15rem}
.pillar span{font-size:.92rem; color:rgba(251,246,236,.72); line-height:1.5}

/* Principal */
.principal{display:grid; grid-template-columns:auto 1fr; gap:clamp(1.5rem,1rem + 3vw,3rem); align-items:start}
.avatar{
  width:150px; height:150px; border-radius:50%; flex:none;
  object-fit:cover; object-position:center top; background:var(--mist);
  box-shadow:var(--shadow); border:3px solid rgba(224,163,62,.45);
}
blockquote{
  margin:0 0 1.4rem; padding-left:1.4rem; border-left:3px solid var(--honey);
  font-family:'Fraunces',Georgia,serif; font-size:clamp(1.25rem,1.1rem + .8vw,1.6rem);
  line-height:1.4; letter-spacing:-.015em;
}
.sig{font:600 1rem/1.4 'Inter',sans-serif}
.sig span{display:block; font-weight:400; font-size:.92rem; color:var(--muted)}
.band-dark .sig span{color:rgba(251,246,236,.7)}

/* Staff */
.staff-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1rem}
.staff{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.25rem;
  box-shadow:var(--shadow-sm); transition:transform var(--ease),box-shadow var(--ease);
  display:flex; gap:1rem; align-items:center;
}
.staff:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.staff-photo{
  width:76px; height:76px; flex:none; border-radius:50%; object-fit:cover; object-position:center top;
  background:var(--mist); border:2px solid rgba(224,163,62,.4); box-shadow:var(--shadow-sm);
}
.staff .dept{font:600 .68rem/1 'Inter',sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--amber); display:block; margin-bottom:.4rem}
.staff .who{font:600 1.05rem/1.25 'Inter',sans-serif; margin-bottom:.15rem}
.staff .role{font-size:.86rem; color:var(--muted); line-height:1.4}
.photo-note{font-size:.85rem; color:var(--muted); margin-top:1.5rem}

/* Title I / cards */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.25rem}
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:1.75rem;
  box-shadow:var(--shadow-sm);
}
.card h3{margin-bottom:.5rem}
.card p:last-child{margin-bottom:0}
.doclist{list-style:none; margin:0; padding:0; display:grid; gap:.4rem}
.doclist a{
  display:flex; align-items:center; gap:.6rem; padding:.7rem .9rem; border-radius:10px;
  background:var(--mist); text-decoration:none; color:var(--forest-700); font:500 .93rem 'Inter',sans-serif;
  transition:background var(--ease),transform var(--ease);
}
.doclist a:hover{background:var(--sand); color:var(--forest-900); transform:translateX(3px)}
.doc-group{background:var(--mist); border-radius:10px; padding:.7rem .9rem; display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .75rem}
.doc-label{font:500 .93rem/1.3 'Inter',sans-serif; color:var(--forest-700)}
.doc-label em{font-style:normal; color:var(--muted); font-weight:400}
.langs{display:flex; gap:.4rem; margin-left:auto}
.langs a{
  font:600 .8rem/1 'Inter',sans-serif; text-decoration:none; color:var(--forest-700);
  background:#fff; border:1px solid var(--line); border-radius:999px; padding:.35rem .7rem;
  transition:background var(--ease),color var(--ease),border-color var(--ease);
}
.langs a:hover{background:var(--honey); border-color:var(--honey); color:var(--forest-900)}
.doclist svg{width:16px; height:16px; flex:none; stroke-width:2}

/* Partners */
.partner-row{display:flex; flex-wrap:wrap; gap:.75rem; margin-bottom:2rem}
.partner{
  background:rgba(251,246,236,.08); border:1px solid rgba(251,246,236,.18);
  padding:.7rem 1.2rem; border-radius:999px; font:500 .95rem 'Inter',sans-serif; color:var(--cream);
}

/* Contact */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,1rem + 3vw,3rem)}
.info{display:grid; gap:1.1rem; margin:0; padding:0}
.info div{display:flex; gap:.9rem; align-items:flex-start}
.info .ico{
  width:40px; height:40px; border-radius:11px; flex:none; background:var(--mist);
  display:grid; place-items:center; color:var(--forest-600);
}
.info .ico svg{width:19px; height:19px; stroke-width:1.8}
.info dt{font:600 .78rem/1 'Inter',sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:.35rem}
.info dd{margin:0; font-size:1.02rem; font-weight:500}
.map{
  border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line);
  box-shadow:var(--shadow-sm); min-height:320px; background:var(--mist);
}
.map iframe{width:100%; height:100%; min-height:320px; border:0; display:block}

/* Footer */
.site-footer{background:var(--forest-900); color:rgba(251,246,236,.72); padding:3.5rem 0 2rem; font-size:.94rem}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem; margin-bottom:2.5rem}
.site-footer h4{font:600 .8rem/1 'Inter',sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--honey); margin:0 0 1rem}
.site-footer ul{list-style:none; margin:0; padding:0; display:grid; gap:.55rem}
.site-footer a{color:rgba(251,246,236,.72); text-decoration:none}
.site-footer a:hover{color:var(--honey)}
.foot-bottom{border-top:1px solid rgba(251,246,236,.12); padding-top:1.6rem; display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; font-size:.87rem; color:rgba(251,246,236,.55)}

/* ---------------- Responsive ---------------- */
@media (max-width:900px){
  .mission-grid,.contact-grid,.principal{grid-template-columns:1fr}
  .principal{justify-items:start}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .menu-btn{display:block}
  .nav{
    display:none; position:absolute; top:76px; left:0; right:0;
    background:var(--forest-900); flex-direction:column; align-items:stretch;
    padding:1rem; gap:.25rem; border-bottom:1px solid rgba(251,246,236,.12);
  }
  .nav.open{display:flex}
  .nav a{padding:.85rem 1rem}
  .quick{margin-top:-2rem}
  .foot-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important; transition-duration:.01ms!important}
}
/* Reveal on scroll */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none}}

/* ---------------- Inner page additions ---------------- */
.page-hero{
  background:linear-gradient(158deg,var(--forest-700) 0%,var(--forest-800) 55%,var(--forest-900) 100%);
  color:var(--cream); padding:clamp(2.75rem,2rem + 4vw,4.5rem) 0 clamp(3rem,2rem + 4vw,4.75rem);
}
.page-hero h1{color:var(--cream); max-width:20ch; font-size:clamp(2rem,1.4rem + 2.6vw,3.1rem)}
.page-hero p{color:rgba(251,246,236,.82); max-width:62ch; font-size:1.15rem; margin-bottom:0}
.crumb{font:600 .78rem/1 'Inter',sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--honey); margin:0 0 1rem; display:block}
.crumb a{color:var(--honey); text-decoration:none}
.crumb a:hover{color:var(--sand)}
.prose{max-width:68ch}
.prose h2{margin-top:2.5rem}
.prose h3{margin-top:2rem; font-size:1.2rem}
.prose ul{padding-left:1.15rem; margin:0 0 1.2rem}
.prose li{margin-bottom:.55rem}
.pullquote{
  background:var(--mist); border-left:4px solid var(--honey); border-radius:0 var(--radius) var(--radius) 0;
  padding:1.4rem 1.6rem; margin:2rem 0; font-family:'Fraunces',Georgia,serif;
  font-size:1.2rem; line-height:1.45; letter-spacing:-.01em;
}
.seal-row{
  display:flex; align-items:center; gap:1.3rem; flex-wrap:wrap;
  background:var(--mist); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.3rem 1.5rem; margin:2rem 0 0;
}
.seal-row .seal{width:110px; height:110px; flex:none; object-fit:contain}
.seal-row b{display:block; font:600 1.02rem/1.3 'Inter',sans-serif; margin-bottom:.25rem}
.seal-row span{display:block; font-size:.9rem; color:var(--muted); line-height:1.5; max-width:44ch}
.foot-seal{width:78px; height:78px; margin-top:1.1rem; opacity:.9}
@media (max-width:520px){ .seal-row{gap:1rem; padding:1.1rem} .seal-row .seal{width:82px; height:82px} }

.two-col{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,1rem + 3vw,3rem); align-items:start}
@media (max-width:820px){ .two-col{grid-template-columns:1fr} }
.nl-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:.85rem}
.nl{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1rem 1.1rem;
  text-decoration:none; color:var(--ink); box-shadow:var(--shadow-sm);
  transition:transform var(--ease),box-shadow var(--ease),border-color var(--ease);
  display:block;
}
.nl:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:rgba(224,163,62,.5); color:var(--ink)}
.nl b{display:block; font:600 .98rem/1.3 'Inter',sans-serif}
.nl span{font-size:.82rem; color:var(--muted)}
.yr-head{font:600 .78rem/1 'Inter',sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); margin:2.25rem 0 .9rem}
.yr-head:first-of-type{margin-top:0}
.pending{
  display:inline-flex; align-items:center; gap:.4rem; font:500 .75rem/1 'Inter',sans-serif;
  background:var(--sand); color:var(--forest-900); padding:.28rem .6rem; border-radius:999px; margin-left:.5rem;
}

/* ---------------- Bell schedule table ---------------- */
.schedule{width:100%; border-collapse:collapse; margin:1.25rem 0 0; font-size:.98rem}
.schedule th{
  text-align:left; font:600 .72rem/1 'Inter',sans-serif; letter-spacing:.12em;
  text-transform:uppercase; color:var(--amber); padding:0 0 .7rem; border-bottom:1px solid var(--line);
}
.schedule td{padding:.75rem 0; border-bottom:1px solid var(--line); vertical-align:baseline}
.schedule tr:last-child td{border-bottom:0}
.schedule .blk{font-weight:600}
.schedule .tm{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--forest-700); font-weight:500}
.schedule .lunch td{color:var(--muted); font-size:.9rem}
.schedule .lunch .blk{font-weight:500; padding-left:1rem}

/* ---------------- Student expectations ---------------- */
.way-list{display:grid; gap:.85rem; counter-reset:way}
.way{
  display:grid; grid-template-columns:auto 15rem 1fr; gap:1.25rem; align-items:start;
  background:rgba(251,246,236,.055); border:1px solid rgba(251,246,236,.14);
  border-radius:var(--radius); padding:1.15rem 1.35rem;
}
.way .paw{
  width:42px; height:42px; flex:none; border-radius:12px;
  background:linear-gradient(150deg,var(--honey),var(--amber));
  display:grid; place-items:center; color:var(--forest-900);
}
.way .paw svg{width:23px; height:23px}
.way h3{
  margin:0; align-self:center;
  font:600 .95rem/1.25 'Inter',sans-serif; letter-spacing:.11em; text-transform:uppercase; color:var(--honey);
}
.way ul{list-style:none; margin:0; padding:0; display:grid; gap:.4rem}
.way li{
  position:relative; padding-left:1.1rem; font-size:.97rem; line-height:1.5;
  color:rgba(251,246,236,.82);
}
.way li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:5px; height:5px; border-radius:50%; background:var(--honey); opacity:.85;
}
@media (max-width:860px){
  .way{grid-template-columns:auto 1fr; gap:.85rem 1rem}
  .way h3{align-self:start; padding-top:.5rem}
  .way ul{grid-column:1 / -1}
}

.creed{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.6rem 1.4rem;
  margin-top:2.25rem; padding-top:2rem; border-top:1px solid rgba(251,246,236,.14);
  font:600 .95rem/1 'Inter',sans-serif; letter-spacing:.16em; text-transform:uppercase; color:var(--honey);
  text-align:center;
}
.creed .sep{color:rgba(251,246,236,.3)}

.principle-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); gap:1rem}
.principle{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:1.3rem 1.4rem; box-shadow:var(--shadow-sm);
}
.principle .ico{
  width:40px; height:40px; border-radius:11px; background:var(--mist);
  display:grid; place-items:center; color:var(--forest-600); margin-bottom:.9rem;
}
.principle .ico svg{width:20px; height:20px; stroke-width:1.8}
.principle b{
  display:block; font:600 .8rem/1 'Inter',sans-serif; letter-spacing:.11em;
  text-transform:uppercase; color:var(--forest-700); margin-bottom:.5rem;
}
.principle span{display:block; font-size:.95rem; line-height:1.55; color:var(--muted)}

.when{
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.3rem;
  background:var(--mist); border:1px solid var(--line); border-left:4px solid var(--honey);
  border-radius:0 var(--radius) var(--radius) 0; padding:1.25rem 1.5rem; margin:0 0 2rem;
}
.when .ico{
  width:44px; height:44px; flex:none; border-radius:12px; background:#fff;
  display:grid; place-items:center; color:var(--forest-600); box-shadow:var(--shadow-sm);
}
.when .ico svg{width:22px; height:22px; stroke-width:1.8}
.when b{display:block; font:600 1.05rem/1.35 'Inter',sans-serif; margin-bottom:.2rem}
.when span{display:block; font-size:.93rem; color:var(--muted); line-height:1.5; max-width:52ch}

.dress-items{display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:.85rem; margin-top:1.5rem}
.dress-item{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:1.15rem 1.1rem; text-align:center; box-shadow:var(--shadow-sm);
}
.dress-item .ico{
  width:46px; height:46px; margin:0 auto .8rem; border-radius:50%; background:var(--mist);
  display:grid; place-items:center; color:var(--forest-600);
}
.dress-item .ico svg{width:24px; height:24px; stroke-width:1.7}
.dress-item b{display:block; font:600 .95rem/1.3 'Inter',sans-serif; margin-bottom:.3rem}
.dress-item span{display:block; font-size:.85rem; color:var(--muted); line-height:1.45}
.dress-item .req{
  display:inline-block; margin-top:.5rem; font:600 .68rem/1 'Inter',sans-serif; letter-spacing:.1em;
  text-transform:uppercase; padding:.3rem .6rem; border-radius:999px;
  background:var(--sand); color:var(--forest-900);
}
.dress-item .opt{
  display:inline-block; margin-top:.5rem; font:600 .68rem/1 'Inter',sans-serif; letter-spacing:.1em;
  text-transform:uppercase; padding:.3rem .6rem; border-radius:999px;
  background:var(--mist); color:var(--muted);
}

.poster-dl{
  display:flex; flex-wrap:wrap; align-items:center; gap:1.25rem;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:1.1rem 1.35rem; box-shadow:var(--shadow-sm); margin-top:1.75rem;
}
.poster-thumb{display:block; flex:none; line-height:0; border-radius:8px; transition:transform var(--ease)}
.poster-thumb:hover{transform:translateY(-2px)}
.poster-dl img{
  width:104px; height:auto; border-radius:8px; border:1px solid var(--line); background:var(--mist);
}
.poster-dl div{flex:1 1 16rem}
.poster-dl b{display:block; font:600 1rem/1.3 'Inter',sans-serif; margin-bottom:.2rem}
.poster-dl span{display:block; font-size:.88rem; color:var(--muted); line-height:1.5}
.band-dark .poster-dl{background:rgba(251,246,236,.06); border-color:rgba(251,246,236,.16); box-shadow:none}
.band-dark .poster-dl b{color:var(--cream)}
.band-dark .poster-dl span{color:rgba(251,246,236,.7)}
.band-dark .poster-dl img{border-color:rgba(251,246,236,.2); background:rgba(251,246,236,.08)}

.motto{
  text-align:center; margin-top:2.5rem;
  font:600 .88rem/1.6 'Inter',sans-serif; letter-spacing:.18em; text-transform:uppercase; color:var(--amber);
}