/* Outfit for headings and navigation, Inter for reading; the studio's own cream, navy and gold. Made by scripts/make_site.py. */
:root { --paper: #FFFFFF; --paper-2: #FAF7F8; --ink: #1E1E1E; --muted: #6B6B6B; --navy: #1E1E1E; --blue: #C2126F; --gold: #F21890; --line: #EAE7E8;
  --head: "Outfit", "Helvetica Neue", Arial, sans-serif; --body: "Inter", "Helvetica Neue", Arial, sans-serif; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 1.02rem; line-height: 1.65; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); }
h1, h2, h3 { font-family: var(--head); color: var(--navy); line-height: 1.15; margin: 0 0 0.6rem; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.9rem, 2.4vw + 1rem, 2.75rem); font-weight: 600; }
h2 { font-size: clamp(1.5rem, 1.4vw + 0.9rem, 2.1rem); font-weight: 600; }
h3 { font-size: 1.15rem; font-weight: 600; margin-bottom: 0.35rem; }
.card h2, .card h3 { font-size: 1.15rem; font-weight: 600; margin-bottom: 0.35rem; }
p { margin: 0 0 1rem; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 clamp(1.1rem, 4vw, 2.5rem); }
[hidden] { display: none !important; }

/* header */
.top { border-bottom: 1px solid var(--line); background: #fff; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; padding-top: 1rem; padding-bottom: 1rem; }
.logo img { width: min(300px, 62vw); height: auto; }
.nav { display: flex; align-items: center; gap: 0.2rem 1.4rem; flex-wrap: wrap; font-family: var(--head); font-weight: 500; font-size: 0.92rem; letter-spacing: 0.04em; text-transform: uppercase; }
.nav a:not(.btn) { color: var(--navy); text-decoration: none; padding: 0.3rem 0 0.1rem; border-bottom: 2px solid transparent; }
.nav a:not(.btn):hover { border-bottom-color: var(--gold); }
.nav a[aria-current="page"] { border-bottom-color: var(--navy); }
.login { margin-left: 0.6rem; white-space: nowrap; }

/* buttons */
.btn { display: inline-block; font-family: var(--head); font-weight: 600; font-size: 1rem; letter-spacing: 0.03em; padding: 0.8rem 1.5rem; border-radius: 999px; background: var(--navy); color: #fff; text-decoration: none; border: 2px solid var(--navy); transition: background 0.15s, border-color 0.15s, color 0.15s; }
.btn:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn.ghost { background: transparent; color: var(--navy); }
.btn.ghost:hover { background: var(--navy); color: #fff; }
.btn.small { padding: 0.45rem 1.05rem; font-size: 0.82rem; }
.btn:focus-visible, .nav a:focus-visible, .form input:focus-visible, .form textarea:focus-visible, .details a:focus-visible, .more:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }

/* hero */
.hero .wrap { padding-top: clamp(2.5rem, 7vw, 5.5rem); padding-bottom: clamp(2rem, 5vw, 3.5rem); max-width: 900px; text-align: center; }
.kicker { font-family: var(--head); font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); font-weight: 600; margin-bottom: 1.2rem; }
.kicker::after { content: ""; display: block; width: 48px; height: 3px; background: var(--gold); margin: 0.9rem auto 0; border-radius: 2px; }
.hero h1 { font-size: clamp(2rem, 3.3vw + 0.9rem, 3.3rem); margin-bottom: 1rem; }
.lead { font-size: clamp(1.2rem, 1vw + 0.9rem, 1.55rem); font-style: italic; color: var(--ink); margin-bottom: 1.8rem; }
.hero-pic { max-width: 1080px; margin: 0 auto; padding: 0 clamp(1.1rem, 4vw, 2.5rem); }
.hero-pic img { width: 100%; height: clamp(160px, 26vw, 300px); object-fit: cover; border-radius: 14px; border: 1px solid var(--line); }

/* cards */
.cards .wrap { padding-top: clamp(3rem, 6vw, 4rem); padding-bottom: 3rem; text-align: center; }
.sub { font-style: italic; color: var(--muted); font-size: 1.15rem; margin-bottom: 2rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; text-align: left; margin-bottom: 1.8rem; }
.card { background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--gold); border-radius: 12px; padding: 1.35rem 1.4rem 1.1rem; }
.card p { margin: 0; color: var(--ink); font-size: 1rem; }
.note { color: var(--muted); font-style: italic; margin-bottom: 1.6rem; }
.page-home .cards { background: var(--paper-2); }
.page-home .cards .wrap { padding-bottom: clamp(3rem, 6vw, 4rem); }
.hero-pic { margin-bottom: 0; }

/* teaser and prose */
.two { display: grid; grid-template-columns: 300px 1fr; gap: 2.5rem; align-items: start; padding-top: clamp(3rem, 6vw, 4rem); padding-bottom: 3rem; }
.round { width: 100%; max-width: 320px; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 6px solid #fff; box-shadow: 0 8px 30px rgba(22, 37, 92, 0.12); margin: 0 auto; }
.teaser .two { align-items: center; }
.teaser p { font-size: 1.2rem; }
.more { font-family: var(--head); font-weight: 600; text-decoration: none; color: var(--navy); border-bottom: 2px solid var(--gold); }
.more:hover { color: var(--blue); }
.prose .btn { margin-top: 0.4rem; }

/* classes */
.classes .wrap { padding-top: clamp(2.5rem, 6vw, 4rem); padding-bottom: 3rem; }
.classes h1 { text-align: center; }
.classes .sub { text-align: center; }
.klist { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.2rem; margin-top: 1.5rem; }
.klass { background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--gold); border-radius: 12px; padding: 1.3rem 1.4rem 1.2rem; display: flex; flex-direction: column; }
.klass h2 { font-size: 1.25rem; margin: 0.3rem 0 0.4rem; }
.ktag { display: inline-block; font-family: var(--head); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy); background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; padding: 0.2rem 0.6rem; align-self: flex-start; }
.kmeta { font-family: var(--head); font-size: 0.92rem; color: var(--muted); margin-bottom: 0.6rem; }
.kdesc { font-size: 0.98rem; margin-bottom: 0.6rem; }
.kseats { font-family: var(--head); font-size: 0.85rem; font-weight: 600; margin: 0 0 0.9rem; min-height: 1.2em; }
.kseats .seats { color: var(--navy); }
.kseats .full { color: #9a2b1f; }
.kact { margin-top: auto; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.kact .btn { font-size: 0.9rem; padding: 0.65rem 1.2rem; }
.classes .note { text-align: center; margin-top: 1.6rem; margin-bottom: 0.4rem; }
.classes .signin { text-align: center; font-style: italic; font-size: 1.15rem; color: var(--muted); margin: 0.2rem 0 0; }
.classes .sub + .signin { margin-top: -1rem; }
.classes .signin a { color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--gold); }

/* contact */
.contact .two { grid-template-columns: minmax(240px, 1fr) minmax(280px, 1.4fr); }
.aside p { margin: 0 0 0.35rem; color: var(--muted); }
.aside { margin-top: 0.4rem; font-family: var(--head); font-size: 0.95rem; }
.intro .portrait { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 4px solid #fff; box-shadow: 0 6px 22px rgba(22, 37, 92, 0.14); margin-bottom: 1.1rem; }
.intro .lead { font-size: 1.15rem; margin-bottom: 1.4rem; }
.details { list-style: none; margin: 0 0 1.4rem; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; font-family: var(--head); font-size: 0.97rem; }
.details li { display: flex; align-items: center; gap: 0.75rem; }
.details a { color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--gold); }
.details a:hover { color: var(--blue); }
.ico { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); color: var(--navy); }
.ico svg { width: 18px; height: 18px; }
.chips { list-style: none; margin: 0 0 1.2rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chips li { font-family: var(--head); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--navy); background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; padding: 0.35rem 0.8rem; }
.next { color: var(--muted); font-style: italic; margin: 0; }
.form { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1.6rem; }
.field { margin-bottom: 1rem; }
.field label { display: block; font-family: var(--head); font-weight: 600; font-size: 0.9rem; color: var(--navy); margin-bottom: 0.35rem; }
.opt { font-weight: 500; color: var(--muted); }
.form input, .form textarea { width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 0.7rem 0.8rem; }
.form input:focus, .form textarea:focus { border-color: var(--navy); background: #fff; }
.form textarea { resize: vertical; min-height: 6rem; }
.form input:-webkit-autofill, .form input:-webkit-autofill:hover, .form input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #fff inset; -webkit-text-fill-color: var(--ink); }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.err { color: #9a2b1f; font-family: var(--head); font-size: 0.92rem; }
.done { background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--gold); border-radius: 14px; padding: 1.6rem; }
.done:focus { outline: none; }

/* footer */
.foot { border-top: 1px solid var(--line); background: var(--paper-2); margin-top: 0; padding: 2.5rem 0 2rem; text-align: center; font-size: 0.98rem; }
.foot .quote { font-style: italic; font-size: 1.2rem; color: var(--navy); margin-bottom: 1.2rem; }
.foot .contact { display: flex; justify-content: center; gap: 0.5rem 1.6rem; flex-wrap: wrap; font-family: var(--head); font-size: 0.95rem; margin-bottom: 0.9rem; }
.foot .contact a { color: var(--navy); text-decoration: none; border-bottom: 1px solid var(--gold); }
.foot .lines p { margin: 0; color: var(--muted); }
.fine { margin: 1.4rem 0 0; font-family: var(--head); font-size: 0.8rem; color: var(--muted); }
.fine a { color: var(--navy); text-decoration: none; }
.fine a:hover { color: var(--blue); }

@media (max-width: 720px) {
  /* small screens: the logo top left with Log In beside it top right, then the menu across the line beneath */
  .bar { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "logo login" "nav nav"; align-items: center; gap: 0.7rem 0.75rem; }
  .logo { grid-area: logo; }
  .logo img { width: min(230px, 58vw); }
  .login { grid-area: login; margin-left: 0; }
  .nav { grid-area: nav; width: 100%; justify-content: space-between; gap: 0.2rem 0.5rem; }
}
/* small phones: the menu shrinks a little so all of it, Log In included, stays on one line */
@media (max-width: 480px) {
  .nav { flex-wrap: nowrap; gap: 0.15rem 0.4rem; font-size: 0.82rem; letter-spacing: 0.03em; }
}
@media (max-width: 380px) {
  .nav { gap: 0.15rem 0.3rem; font-size: 0.74rem; letter-spacing: 0.02em; }
}
@media (max-width: 720px) {
  .two { grid-template-columns: 1fr; gap: 1.6rem; }
  .contact .two { grid-template-columns: 1fr; }
  .round { max-width: 220px; }
  .teaser .two { text-align: center; }
  .form { padding: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

/* nav menus */
.nav > a:not(.btn), .drop > a:not(.btn) { white-space: nowrap; }
.drop.here > a:not(.btn) { border-bottom-color: var(--navy); }
.dmenu { margin: 0; padding: 0; list-style: none; text-transform: none; letter-spacing: 0.02em; }
.dmenu li { margin: 0; }
.dmenu a:not(.btn) { display: block; border-bottom: 0; white-space: normal; }
.dmenu a:not(.btn):hover { border-bottom: 0; }

/* Wide: the menus hang under their entry. A site with menus carries more top-level links than a flat one,
   so the bar is packed tighter here too: without it the Log In button wraps under the logo. */
@media (min-width: 860px) {
  .bar { flex-wrap: nowrap; }
  .logo img { width: min(250px, 26vw); }
  .nav { gap: 0.2rem 1.1rem; flex-wrap: nowrap; }
  .drop { position: relative; display: inline-flex; align-items: center; gap: 0.15rem; }
  .drop > .dtog { background: none; border: 0; padding: 0.3rem 0 0.1rem; margin: 0; color: var(--navy); cursor: pointer; line-height: 0; }
  .drop > .dtog svg { width: 14px; height: 14px; }
  /* each menu is as wide as its own longest entry, up to a cap that keeps a long one on two lines */
  /* the box is exactly as wide as its widest line: max-content for a menu whose entries fit on one line,
     min-content for one marked "tight", whose long entry is written with its own break point. Either way
     the space left and right of the words is the padding and nothing else. */
  .dmenu { position: absolute; top: 100%; left: 0; z-index: 30; display: none; width: max-content; min-width: 0; padding: 0.4rem 0; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); }
  .dmenu.tight { width: min-content; }
  .drop:hover .dmenu, .drop:focus-within .dmenu { display: block; }
  .dmenu a:not(.btn) { padding: 0.45rem 0.8rem; }
  .dmenu a:not(.btn):hover { background: var(--paper-2); }
}

/* Narrow: one column, and the menus stay shut until asked for, as they do on a wide screen. The chevron is a
   real button, so a tap focuses it and :focus-within opens the menu: the same mechanism as the wide layout,
   without a line of script. Tapping anywhere else closes it again. */
@media (max-width: 859px) {
  .bar { flex-wrap: wrap; }
  .nav { flex-direction: column; align-items: flex-start; gap: 0; width: 100%; font-size: 0.86rem; }
  .drop { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; width: 100%; }
  .drop > .dtog { display: inline-flex; background: none; border: 0; padding: 0.35rem; margin: 0; color: var(--navy); cursor: pointer; line-height: 0; }
  .drop > .dtog svg { width: 16px; height: 16px; transition: transform 0.15s; }
  .drop:focus-within > .dtog svg { transform: rotate(180deg); }
  .nav > a:not(.btn), .drop > a:not(.btn) { display: block; padding: 0.4rem 0 0.3rem; }
  .dmenu { display: none; flex-basis: 100%; width: 100%; padding: 0 0 0.5rem 1rem; }
  .drop:focus-within .dmenu { display: block; }
  .dmenu a:not(.btn) { padding: 0.35rem 0; font-size: 0.95em; color: var(--muted); }
}

/* text sections */
.text .wrap { max-width: 820px; padding-top: clamp(2.2rem, 5vw, 3.2rem); padding-bottom: 0.6rem; }
.text h1, .text h2 { margin-bottom: 1rem; }
.text .lines { list-style: none; margin: 0 0 1rem; padding: 0; }
.text .lines li { padding: 0.4rem 0; border-bottom: 1px solid var(--line); }
.text .lines li:last-child { border-bottom: 0; }
.text .btn { margin-top: 0.6rem; }
.text.center .wrap { text-align: center; }
.text.center .lines { text-align: left; }
.tsub { font-family: var(--head); font-size: 1.25rem; color: var(--muted); margin: -0.4rem 0 1.2rem; }
/* the calendar: two columns, and the studio's own marks for what is closed and what is a concert */
.text.cols .wrap { max-width: 1000px; }
.text.cols .lines { columns: 300px 2; column-gap: 3rem; }
.text.cols .lines li { break-inside: avoid; border-bottom: 0; padding: 0.3rem 0; font-size: 0.97rem; }
.lines .t-start { font-weight: 700; color: var(--ink); }
.lines .t-concert { color: #0DA5BE; }
.lines .t-closed { color: var(--gold); }
.lines .t-rule { list-style: none; text-align: center; color: var(--muted); }

/* a tile beside a run of copy */
.split .two { grid-template-columns: minmax(200px, 300px) 1fr; }
.tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem; aspect-ratio: 1; width: 100%; max-width: 300px; margin: 0 auto; padding: 1.2rem; text-decoration: none; background: var(--tile-bg, var(--navy)); color: var(--tile-fg, #fff); border: 10px solid #fff; box-shadow: 0 0 0 1px var(--line); transition: transform 0.15s, box-shadow 0.15s; }
.tile:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16); }
.tile-label { font-family: var(--head); font-style: italic; font-weight: 600; font-size: clamp(1.1rem, 2.2vw, 1.5rem); letter-spacing: 0.04em; text-decoration: underline; text-underline-offset: 4px; }
.tile-icon { width: clamp(64px, 12vw, 96px); height: auto; }
.split h1, .split h2 { margin-bottom: 1rem; }
/* a plain picture beside the words, either side */
.split.pic .two { grid-template-columns: minmax(180px, 280px) 1fr; align-items: start; }
.split.pic.mid .two { align-items: center; }
.split.pic.right .two { grid-template-columns: 1fr minmax(180px, 280px); }
.spic { width: 100%; height: auto; border-radius: 14px; }
/* the photographs beside a section share one height so two sections do not sit ragged against each other.
   A block using "align": "center" carries a mark rather than a photograph, so it keeps its own shape. */
.split.pic:not(.mid) .spic { height: clamp(190px, 25vw, 290px); object-fit: cover; }
.split.pic .zoom { width: auto; }
/* a name the studio sets apart without linking it */
.mk { color: var(--blue); font-style: italic; }
.spic.framed { border: 2px solid var(--gold); padding: 6px; background: #fff; border-radius: 4px; }
.smark-box { margin: 0 0 1.2rem; }
.smark-box img { width: min(230px, 70%); height: auto; }
.smark-box p { font-family: var(--head); font-weight: 700; letter-spacing: 0.04em; margin: 0.4rem 0 0; }
.split.pic .lines { margin-top: 0.4rem; }
.lines.num { list-style: decimal; padding-left: 1.3rem; }
.lines.num li { border-bottom: 0; padding: 0.2rem 0; }
@media (max-width: 860px) {
  .split .two, .split.pic .two, .split.pic.right .two { grid-template-columns: 1fr; }
  .split.pic.right .spic { order: -1; }
  .tile { max-width: 210px; border-width: 8px; }
  .tile-icon { width: 56px; }
  .spic { max-width: 280px; }
}

/* one centred row of links, no mark. Written after the menu styles so it wins where they disagree. */
/* The bar is the same box as every section of the page, and the menu spreads across it: the first entry
   sits on the measure's left edge and Log In on its right. That way the page's left and right alignment
   lines are the menu, by construction, rather than by matching a number to it. */
.top.centered .bar { max-width: var(--measure, 820px); padding-top: 1.15rem; padding-bottom: 1.15rem; }
.top.centered .login { margin-left: 0; text-transform: uppercase; }
@media (min-width: 860px) {
  /* the menu box dissolves so every entry, Log In included, is one row of equal gaps. Two nested
     space-betweens put all the slack between the last entry and the button, which read as crowding. */
  .top.centered .nav { display: contents; }
  .top.centered .bar { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
}
@media (max-width: 859px) {
  .top.centered .nav { flex-direction: column; align-items: center; gap: 0; }
  .top.centered .drop { justify-content: center; }
  .top.centered .dmenu { padding-left: 0; text-align: center; }
  .top.centered .login { margin-top: 0.7rem; }
}

/* the menu folds behind one control on a narrow screen */
.burger { display: none; background: none; border: 0; padding: 0.4rem; margin: 0; color: var(--ink); cursor: pointer; line-height: 0; }
.burger svg { width: 28px; height: 28px; }
.menu-x { display: none; }
.scrim { display: none; }
@media (max-width: 859px) {
  /* the page fills the screen, so the footer sits at the bottom on a short page instead of floating */
  body { min-height: 100svh; display: flex; flex-direction: column; }
  body > main { flex: 1 0 auto; }
  .foot { margin-top: auto; }
  /* the contact column reads centred like every other page's opening on a narrow screen */
  .contact .two { text-align: center; }
  .contact .details li { justify-content: center; }
  .contact .intro .portrait { margin-inline: auto; }
  /* control on the left, the way in on the right, and the menu itself slides in from the side rather than
     unfolding downwards and pushing the page away */
  .top.folds .bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; }
  .burger { display: inline-flex; flex: 0 0 auto; }
  .top.folds .login { margin: 0; }
  .top.folds .nav {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 60;
    width: min(66vw, 236px); max-width: 236px;
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 0; padding: 3.2rem 1.1rem 1.4rem; overflow-y: auto;
    background: rgba(255, 255, 255, 0.95); box-shadow: 4px 0 26px rgba(0, 0, 0, 0.18);
    transform: translateX(-100%); visibility: hidden;
    /* visibility is not a thing that can be part way: it flips the moment the panel starts coming in, and
       only after it has finished going out. Giving it a duration instead leaves the panel hidden. */
    transition: transform 0.22s ease, visibility 0s linear 0.22s;
  }
  .top.folds.open .nav { transform: none; visibility: visible; transition: transform 0.22s ease, visibility 0s; }
  .top.folds .nav > a:not(.btn), .top.folds .drop > a:not(.btn) { text-align: left; padding: 0.3rem 0 0.12rem; }
  .top.folds .drop { justify-content: flex-start; }
  .top.folds .dmenu { text-align: left; }
  .menu-x { position: absolute; top: 0.5rem; right: 0.5rem; display: inline-flex; padding: 0.4rem; border: 0; background: none; color: var(--ink); cursor: pointer; line-height: 0; }
  .menu-x svg { width: 20px; height: 20px; }
  .scrim { display: block; position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, 0.45);
    opacity: 0; visibility: hidden; transition: opacity 0.22s, visibility 0s linear 0.22s; }
  body.navopen .scrim { opacity: 1; visibility: visible; transition: opacity 0.22s, visibility 0s; }
  body.navopen { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .top.folds .nav, .scrim { transition: none; }
}

/* a picture opened full size */
.zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.zoom img { display: block; }
.lbox { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 96vh; overflow: visible; }
.lbox::backdrop { background: rgba(0, 0, 0, 0.82); }
.lbox img { max-width: 96vw; max-height: 92vh; width: auto; height: auto; border-radius: 6px; }
.lbox-x { position: absolute; top: -0.4rem; right: -0.4rem; width: 2.2rem; height: 2.2rem; border: 0; border-radius: 50%; background: #fff; color: var(--ink); font-size: 1.4rem; line-height: 1; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); }

/* banner hero: the picture across the full width, the name in a pane over it */
.banner-hero { position: relative; display: grid; }
/* the height tracks the picture's own shape (this crop is 2 wide to 1), so the picture is shown at the scale
   the login art is, not as a magnified slice. Narrow screens keep a floor, or the pane has nowhere to sit. */
.banner-hero .hero-bg { grid-area: 1 / 1; width: 100%; height: clamp(240px, 50vw, 680px); object-fit: cover; }
.hero-pane { grid-area: 1 / 1; place-self: center; text-align: center; background: rgba(255, 255, 255, 0.82); border: 1px solid rgba(255, 255, 255, 0.9); padding: clamp(0.85rem, 1.7vw, 1.4rem) clamp(1.3rem, 4vw, 2.8rem); margin: 0 1rem; max-width: min(640px, 88%); }
.hero-pane h1 { margin: 0; }
.hero-pane .wordmark { width: min(340px, 52vw); height: auto; margin: 0 auto; }
.hero-pane .kicker { margin: 1.05rem 0 0; font-size: clamp(0.74rem, 0.65vw + 0.5rem, 0.92rem); letter-spacing: 0.12em; line-height: 1.45; }
.hero-pane .kicker::after { display: none; }
.hero-pane .lead { margin: 0.6rem 0 0; }
.hero-pane .btn { margin-top: 1rem; }

/* the studio's footer: its places on the outside, the way to reach it down the middle */
.foot { padding-top: 1.2rem; padding-bottom: 1rem; }
/* the footer row sits on the same alignment lines as the menu and the page */
.foot-cols { max-width: var(--measure, 820px); }
.foot-cols { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem 2rem; padding-top: 0; padding-bottom: 0; }
.foot-side { display: flex; align-items: center; gap: 1.2rem; }
.foot-side.end { justify-content: flex-end; }
.foot-cols .social { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--muted); text-decoration: none; font-family: var(--head); font-size: 0.9rem; }
.foot-cols .social:hover { color: var(--ink); }
.foot-cols .social .smark { width: 46px; height: 46px; object-fit: contain; }
.sstack { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; }
.slabel { font-size: 0.82rem; color: var(--muted); }
/* the studio's own channel button. The count on the old site came from YouTube's widget and is not
   reproduced here: a number baked into the page would be wrong the day after it was written. */
.sbtn { display: inline-flex; align-items: center; gap: 0.35rem; background: #c4302b; color: #fff; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; padding: 0.28rem 0.6rem; border-radius: 3px; }
.sbtn svg { width: 16px; height: 16px; color: #fff; }
.foot-cols .social.facebook svg { width: 42px; height: 42px; color: #3b5998; }
/* one rhythm for all three lines: no rule under the two that happen to be links, and no extra gap before
   the address, so they read as one stack rather than a list plus an afterthought */
.foot-cols .contact, .foot-cols .lines { display: block; text-align: center; text-transform: uppercase; letter-spacing: 0.12em; font-family: var(--head); font-size: 0.82rem; line-height: 2.2; margin: 0; }
.foot-cols .contact a { display: block; color: var(--ink); text-decoration: none; border-bottom: 0; }
.foot-cols .contact a:hover { color: var(--blue); }
.foot-cols .lines p { margin: 0; color: var(--ink); }
/* the small print steps back so it does not compete with the contact details above it */
.foot .fine { text-align: center; margin: 0; font-size: 0.85rem; color: #9B9B9B; }
.foot .fine a { color: #9B9B9B; }
.foot .fine a:hover { color: var(--ink); }
.foot .fine .sep { display: inline-block; padding: 0 0.55em; }
.foot-fine { grid-column: 1 / -1; }
/* Narrow: the contact details take the first row on their own, then one row holds the channel on the left,
   the small print in the middle and the other place on the right, rather than three stacked centred blocks. */
@media (max-width: 760px) {
  .foot-cols { grid-template-columns: auto 1fr auto; grid-template-areas: "mid mid mid" "left fine right"; gap: 0.9rem 0.6rem; align-items: center; }
  .foot-mid { grid-area: mid; }
  .foot-side { grid-area: left; justify-content: flex-start; }
  .foot-side.end { grid-area: right; justify-content: flex-end; }
  .foot-fine { grid-area: fine; }
  .foot .fine { font-size: 0.8rem; }
  .foot-cols .social .smark { width: 34px; height: 34px; }
  .foot-cols .social.facebook svg { width: 32px; height: 32px; }
  .slabel { display: none; }
}

/* wide picture */
.banner { margin: clamp(1.6rem, 4vw, 2.6rem) 0; }
.banner figure { margin: 0; }
.banner img { width: 100%; max-height: 420px; object-fit: cover; }
.banner figcaption { font-family: var(--head); font-size: 0.88rem; color: var(--muted); padding-top: 0.6rem; }

/* picture grid */
.gallery .wrap { padding-top: clamp(2.2rem, 5vw, 3.2rem); padding-bottom: 2.4rem; }
.gallery h1, .gallery h2 { text-align: center; }
/* a wall, not a grid: concert posters are portrait and carry text, so each one is shown whole */
.shots { columns: 3; column-gap: 1rem; margin-top: 1.6rem; }
@media (max-width: 720px) { .shots { columns: 2; } }
@media (max-width: 420px) { .shots { columns: 1; } }
.shots figure { break-inside: avoid; margin: 0 0 1rem; background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.shots img { width: 100%; height: auto; }
.shots figcaption { font-family: var(--head); font-size: 0.85rem; color: var(--muted); padding: 0.6rem 0.8rem; }
.gallery.narrow .shots { columns: 2; max-width: 720px; margin-inline: auto; }
/* a strip: the pictures share one height and sit on one line, whatever shape each of them is */
.gallery.row .shots { columns: auto; display: flex; gap: 1rem; align-items: stretch; }
.gallery.row figure { flex: 1 1 0; margin: 0; }
.gallery.row img { width: 100%; height: clamp(150px, 19vw, 260px); object-fit: cover; }
@media (max-width: 720px) { .gallery.row .shots { flex-wrap: wrap; } .gallery.row figure { flex: 1 1 45%; } }

/* recordings, two to a row, each with its title and occasion under it */
.videos .wrap { padding-top: clamp(2.2rem, 5vw, 3.2rem); padding-bottom: 2.4rem; }
.videos h1, .videos h2 { text-align: center; }
/* two recordings to a row: one per row turns sixteen concerts into a very long page */
.vlist { list-style: none; margin: 1.8rem 0 1.6rem; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.2rem 1.6rem; }
@media (max-width: 620px) { .vlist { grid-template-columns: 1fr; } }
.vlist li { text-align: center; }
.vframe { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 10px; overflow: hidden; }
.vframe iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vgone { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; margin: 0; border-radius: 10px; background: var(--paper-2); border: 1px solid var(--line); color: var(--muted); font-family: var(--head); font-size: 0.92rem; padding: 1rem; text-align: center; }
.vlist h3 { margin: 0.7rem 0 0.15rem; font-size: 1.02rem; }
.vlist a { color: var(--blue); text-decoration: none; }
.vlist a:hover { text-decoration: underline; }
.vmeta { font-family: var(--head); font-size: 0.9rem; color: var(--muted); margin: 0; white-space: pre-line; }
.videos .btn { display: block; width: fit-content; margin: 0.6rem auto 0; }

/* quotes */
.quotes .wrap { padding-top: clamp(2.2rem, 5vw, 3.2rem); padding-bottom: 2.4rem; }
.quotes h1, .quotes h2 { text-align: center; margin-bottom: 1.6rem; }
.qgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; }
.qgrid figure { margin: 0; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--gold); border-radius: 12px; padding: 1.3rem 1.4rem 1.1rem; }
.qgrid blockquote { margin: 0 0 0.8rem; }
.qgrid blockquote p:last-child { margin-bottom: 0; }
.qgrid figcaption { font-family: var(--head); font-weight: 600; color: var(--navy); }
.qgrid .role { display: block; font-weight: 500; font-size: 0.9rem; color: var(--muted); }

/* modern: roomier type, quieter chrome, softer edges */
body { font-size: 1.06rem; line-height: 1.7; }
h1, h2, h3 { letter-spacing: -0.022em; font-weight: 600; }
/* one size for a page title wherever it stands, so Program and Gallery match */
h1, .hero h1 { font-size: clamp(1.5rem, 1.3vw + 0.95rem, 2.15rem); }
h2 { font-size: clamp(1.25rem, 0.9vw + 0.82rem, 1.65rem); }
p { margin: 0 0 1.15rem; }

/* the navigation keeps the studio's own upper case: the families read this menu every week, and the point
   of the modern pass is a cleaner face, not a different set of words to find */
.nav { letter-spacing: 0.08em; font-size: 0.86rem; font-weight: 500; }
.nav a:not(.btn):hover { border-bottom-color: var(--gold); }
.dmenu a:not(.btn) { font-weight: 400; }
.btn { border-radius: 10px; letter-spacing: 0; font-weight: 600; }
.btn.small { border-radius: 8px; }

/* the picture carries the page, so give it room and lose the rule under the kicker */
.hero .wrap { padding-top: clamp(2.6rem, 6vw, 4.5rem); padding-bottom: clamp(1.6rem, 3.5vw, 2.6rem); }
.kicker { font-size: 0.74rem; letter-spacing: 0.2em; color: var(--gold); margin-bottom: 0.9rem; }
.kicker::after { display: none; }
.hero-pic img { height: clamp(220px, 36vw, 460px); border-radius: 18px; border: 0; }
.lead { font-style: normal; color: var(--muted); }

/* surfaces: fewer lines, softer corners, a little depth instead of a border */
.card, .qgrid figure { border-radius: 16px; border-top-width: 3px; }
.shots figure { border-radius: 14px; border: 0; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07); }
.shots figure:hover { box-shadow: 0 6px 22px rgba(0, 0, 0, 0.13); }
.banner img { border-radius: 18px; }
.banner { margin-left: auto; margin-right: auto; max-width: 1080px; padding: 0 clamp(1.1rem, 4vw, 2.5rem); }
.text .lines li { border-bottom: 1px solid var(--line); padding: 0.55rem 0; }
/* One rhythm for the whole page. Every section pads its top and bottom by the same amount, so the gap
   between any two of them is the same, and the last thing inside a section drops its own bottom margin so
   it cannot add to that padding. That last part is what made Tuition and The Program sit unevenly. */
/* One measure for the whole site, set inside the width of the menu: nothing on a page runs wider than the
   navigation above it. The menu's own ink measures about 785px at a desktop width, so 780 sits just inside
   it. Every section uses it, so each band of the page also starts and ends at the same place. */
:root { --gap: clamp(1rem, 2.2vw, 1.6rem); --measure: 820px; }
.text .wrap, .split .two, .videos .wrap, .quotes .wrap, .banner,
.gallery .wrap, .contact .two { max-width: var(--measure); }
.videos .vlist { max-width: 100%; }
/* nothing above the pictures when they are the first thing in their section */
.gallery .wrap > .shots:first-child { margin-top: 0; }
.banner { margin: var(--gap) auto; }
.text .wrap { padding-top: var(--gap); padding-bottom: var(--gap); }
.gallery .wrap { padding-top: var(--gap); padding-bottom: var(--gap); }
.split .two { padding-top: var(--gap); padding-bottom: var(--gap); }
.videos .wrap, .quotes .wrap { padding-top: var(--gap); padding-bottom: var(--gap); }
.text .wrap > :last-child,
.split .two > div > :last-child,
.videos .wrap > :last-child,
.quotes .wrap > :last-child { margin-bottom: 0; }
/* the same gap above the heading, under it, and below the pictures */
.gallery h1, .gallery h2 { margin-bottom: 0; }
.gallery .shots { margin-top: var(--gap); }
.vlist li { padding: 1rem 0; }
.vlist a { border-bottom-width: 1px; }
.form { border-radius: 16px; }
/* no rule under the bar or over the footer: one white page from top to bottom */
.top { border-bottom: 0; background: var(--paper); }
.foot { border-top: 0; background: var(--paper); }
.next { font-style: normal; }