/* Outfit for headings and navigation, Outfit for reading; the studio's own cream, navy and gold. Made by scripts/make_site.py. */
:root { --paper: #FFFFFF; --paper-2: #EEF3F4; --ink: #1E1E1E; --muted: #6B6B6B; --navy: #1E1E1E; --blue: #035772; --gold: #D6105B; --line: #E8E8E8;
  --head: "Outfit", "Helvetica Neue", Arial, sans-serif; --body: "Outfit", "Helvetica Neue", Arial, sans-serif; }
* { box-sizing: border-box; }
/* The scrollbar is always there, so a short page and a long one line up the same and nothing slides
   sideways between them. This is overflow rather than scrollbar-gutter on purpose: a reserved gutter sits
   inside the page, so a band drawn across the full width (Mah Jongg for All's white header and tan footer
   on cream) stops short of it and leaves a strip of page colour down the side. An always-present scrollbar
   takes its room out of the viewport instead, and the bands still reach both edges. */
html { -webkit-text-size-adjust: 100%; overflow-y: scroll; }
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, .drop.dopen .dmenu { display: block; }
  .dmenu a:not(.btn) { padding: 0.5rem 1.05rem; }
  .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, .drop.dopen .dmenu { display: block; }
  .drop.dopen > .dtog svg { transform: rotate(180deg); }
  .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(150px, 210px) 1fr; }
.tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.9rem; aspect-ratio: 1; width: 100%; max-width: 210px; 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(0.95rem, 1.6vw, 1.15rem); letter-spacing: 0.04em; text-decoration: underline; text-underline-offset: 4px; }
.tile-icon { width: clamp(48px, 8vw, 66px); 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; }
/* the portrait beside a teaser is a smaller circle */
.teaser .two { grid-template-columns: 210px 1fr; }
.teaser .round { max-width: 200px; }
/* the line about Robin reads at the same size as the copy on every other page */
.teaser p { font-size: 1.06rem; }
/* on a phone the portrait sits above the words, not beside them: a column of text next to a circle is a
   hard read at that width. The base stylesheet already stacks these, so this only undoes the rule above. */
@media (max-width: 720px) {
  .teaser .two { grid-template-columns: 1fr; }
  .teaser .round { max-width: 150px; }
}
.split.pic.right .two { grid-template-columns: 1fr minmax(180px, 280px); }
.spic { width: 100%; height: auto; border-radius: 14px; }
/* the photograph runs the full height of the words beside it. A block using "align": "center" carries a
   mark rather than a photograph, so it keeps its own shape. */
.split.pic:not(.mid) .two { align-items: stretch; }
.split.pic:not(.mid) .zoom { display: block; height: 100%; }
.split.pic:not(.mid) .spic { height: 100%; min-height: 170px; 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; }
/* the mark sits in the middle of its column rather than against the edge of it. The button needs a width
   of its own: auto around an image set to 100% resolves to nothing at all. */
.split.pic.mid .zoom { width: min(240px, 100%); margin-inline: auto; }
.split.pic.mid .spic { width: 100%; max-width: 240px; height: auto; margin-inline: auto; }
@media (max-width: 860px) {
  .split .two, .split.pic .two, .split.pic.right .two { grid-template-columns: 1fr; }
  .tile { max-width: 210px; border-width: 8px; }
  .tile-icon { width: 56px; }
  /* the words come first and the photograph follows them, running the full width of the screen: a picture
     half the width of the text beside nothing leaves an empty column down one side */
  .split.pic:not(.mid) .two { display: flex; flex-direction: column; }
  .split.pic:not(.mid) .two > :first-child { order: 2; }
  .split.pic:not(.mid) .zoom { width: 100%; }
  .split.pic:not(.mid) .spic { width: 100%; max-width: none; height: auto; max-height: 62vh; border-radius: 14px; }
  .split.pic.right .two > :first-child { order: 0; }
  .split.pic.mid .spic { max-width: 280px; }
}

/* 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; }
.menu-mark { display: none; }
.scrim { display: none; }
/* 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; }
@media (max-width: 859px) {
  /* 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 {
    /* only as tall as its entries. The base stylesheet spreads a narrow nav with space-between, which in a
       full height column pushed the entries a screen apart, so that is undone here. */
    position: fixed; top: 0; left: 0; bottom: auto; z-index: 60;
    width: min(60vw, 210px); max-width: 210px; max-height: 100svh;
    display: flex; flex-direction: column; align-items: flex-start;
    justify-content: flex-start; gap: 0.55rem; padding: 3.66rem 1.1rem 1.25rem; overflow-y: auto;
    border-bottom-right-radius: 14px;
    background: rgba(255, 255, 255, 0.9); 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; }
  /* what sits under a menu entry is simply set in from it */
  .top.folds .dmenu { text-align: left; padding: 0 0 0 1.05rem; border-left: 0; }
  .top.folds .dmenu a:not(.btn) { color: var(--ink); }
  .top.folds .dmenu li:first-child a:not(.btn) { padding-top: 0; }
  .top.folds .dmenu li:last-child a:not(.btn) { padding-bottom: 0; }
  /* the mark, on the middle of the close button beside it and no wider than half the drawer */
  .top.folds .menu-mark { position: absolute; top: 0.46rem; left: 1.1rem; display: block; height: 34px; }
  .top.folds .menu-mark img { height: 100%; width: auto; max-width: min(56vw, 138px); object-fit: contain; object-position: left center; }
  /* the control that opened the drawer shows through it, so it stands down while the drawer is out */
  .top.folds.open .burger { visibility: hidden; }
  .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; }
}

/* the way back to the top of a long page, out of the way at the corner until it is wanted */
.totop { position: fixed; right: clamp(0.9rem, 2.5vw, 1.6rem); bottom: clamp(0.9rem, 2.5vw, 1.6rem); z-index: 40;
  display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0;
  border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: var(--ink);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16); cursor: pointer; }
.totop[hidden] { display: none; }
.totop svg { width: 19px; height: 19px; }
.totop:hover { background: var(--gold); border-color: var(--gold); color: #fff; }
.totop:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* 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); }

/* 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.25rem; 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; }
/* A separator is only a separator between two things on one line. In the narrow footer the small print
   shares a row with the two places, so the copyright always takes its own line and the bullet in front of
   it is a stray mark. The breakpoint matches the one that rearranges the footer, not the viewport: what
   makes the line wrap is the narrow middle column, not the width of the screen. */
@media (max-width: 760px) {
  .foot .fine .copy { display: block; }
  /* the separator before the copyright is marked, not selected by position: the copyright span is itself
     the last span, so :last-of-type never matches the separator */
  .foot .fine .sep.end { display: none; }
}
.foot-fine { grid-column: 1 / -1; }
/* the small print stands away from the contact details and the icons above it */
@media (min-width: 761px) { .foot-fine { margin-top: 0.9rem; } }
/* 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: 2.1rem 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; }
}

/* 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; }

/* 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); }
/* the page you are on stays marked in the studio's own accent, not in ink, whether it stands in the
   menu itself or under one of its entries */
.nav a[aria-current="page"], .drop.here > a:not(.btn) { border-bottom-color: var(--gold); }
.dmenu a:not(.btn) { font-weight: 400; }
/* one button everywhere: ink filled, white, upper case, and the studio's pink on hover. The outlined
   variant is the same button, so a page never shows two kinds of them. */
.btn, .btn.ghost { background: var(--ink); border-color: var(--ink); color: #fff; border-radius: 10px; font-weight: 600; font-size: 0.86rem; letter-spacing: 0.06em; text-transform: uppercase; }
.btn:hover, .btn.ghost:hover { background: var(--gold); border-color: var(--gold); color: #fff; }
.btn.small { border-radius: 8px; font-size: 0.8rem; }

/* 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, .cal .wrap { 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; }
/* The caret belongs to its word without touching it. What is seen between the last letter and the chevron is
   the tracking that trails the letter (1.1px) plus the room the icon keeps inside its own box (3.5px) plus
   this margin. Measured at 13.76px Outfit: 7px (a 0.15rem gap of its own as well) sat loose; 3.6px (margin
   -1px, one word-space on paper) read as touching the T of ABOUT and the Y of GALLERY (Sarah, 2026-09-20);
   5.6px is where it sits now. */
@media (min-width: 860px) {
  .drop { gap: 0; }
  .drop > .dtog { margin-left: 1px; }
}

/* the name as type on the left, the menu on the right */
.top.split .bar { max-width: var(--wide, 1180px); padding-top: 1.2rem; padding-bottom: 1.2rem; flex-wrap: nowrap; }
/* One line of text. The bar gives the menu and Log In their full width first, and the name takes what is left:
   when that is less than its line, it breaks at the one space between its parts, the only place it can. */
.lockup { display: block; text-decoration: none; color: var(--ink); font-family: var(--head); font-weight: 300; font-size: 1.28rem; line-height: 1.12; letter-spacing: -0.01em; }
.lockup span { white-space: nowrap; }
@media (min-width: 860px) {
  .top.split .nav { margin-left: auto; gap: 0.2rem 1.9rem; }
  .top.split .login { margin-left: 1.9rem; }
}
/* just wide enough for the menu to stand in the bar: everything draws in so Log In stays on the screen, and the
   name keeps its one line beside a five-word menu (KCSA's Orchestra, 2026-10-18) */
@media (min-width: 860px) and (max-width: 1100px) {
  .top.split .nav { gap: 0.2rem 1.05rem; font-size: 0.98rem; }
  .top.split .login { margin-left: 1.05rem; }
  .lockup { font-size: 1.08rem; }
}
@media (min-width: 860px) and (max-width: 939px) {
  .top.split .nav { gap: 0.2rem 0.6rem; font-size: 0.9rem; }
  .top.split .login { margin-left: 0.6rem; }
  .lockup { font-size: 1rem; }
}
@media (max-width: 859px) {
  .lockup { font-size: 1rem; text-align: center; }
  /* in the drawer the arrow sits as close to its word as it does in the bar (about 5px, Sarah 2026-10-18); its
     button keeps the same tap area, the room moved from its left side to its right */
  .top.split .drop { gap: 0; }
  .top.split .drop > .dtog { margin-left: 1px; padding: 0.35rem 0.7rem 0.35rem 0; }
  /* an open submenu starts clear of the line under its word, as far below it as its own items sit apart */
  .top.split .drop > .dmenu { padding-top: 0.7rem; }
  /* the short name at the top of the drawer, where a site with a logo file shows its mark */
  .top.folds .menu-mark.text { line-height: 34px; font-family: var(--head); font-weight: 600; font-size: 1.3rem; letter-spacing: 0.06em; color: var(--ink); text-decoration: none; }
}

/* a photograph across the page with a white card over its lower edge */
.hcard-pic img { width: 100%; height: clamp(300px, 60vh, 640px); object-fit: cover; object-position: center 30%; }
/* A stage photograph is about 3:2 to 16:9, so the frame follows the width at 16:10 and stops short of the screen's
   own height, leaving room for the card under it. On a wide screen that height made a strip that cut heads off
   (Sarah, 2026-09-26), so the frame is never wider than 2.4:1, even if the card then starts lower. Each picture's
   "position" says which part of it to keep: its performers' heads first, then the floor. */
.hcard-pic img { height: clamp(280px, max(41.667vw, min(62.5vw, calc(100svh - 190px))), 1100px); }
.hcard-pic.slides { position: relative; overflow: hidden; }
.hcard-pic.slides img:not(:first-child) { position: absolute; inset: 0; }
.hcard-pic.slides img { opacity: 0; transition: opacity 1.4s ease; }
.hcard-pic.slides img.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hcard-pic.slides img { transition: none; } }
/* back, pause or play, and on: small, at the picture's lower right, clear of the card */
.slide-ctl { position: absolute; right: clamp(0.8rem, 2.5vw, 1.75rem); bottom: 0.9rem; z-index: 2; display: flex; gap: 0.4rem; }
.slide-ctl button { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.86); color: var(--ink); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); cursor: pointer; }
.slide-ctl button:hover { background: #fff; }
.slide-ctl button:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; background: #fff; }
.slide-ctl svg { width: 17px; height: 17px; }
/* on a narrow screen the card runs the full width over the picture's foot, so the buttons sit just above it */
@media (max-width: 700px) { .slide-ctl { bottom: calc(14vw + 0.6rem); } }
.hcard .wrap { max-width: var(--wide, 1180px); }
.hcard-box { position: relative; margin-top: clamp(-10rem, -14vw, -3rem); width: min(500px, 100%); background: var(--paper); padding: clamp(1.4rem, 3vw, 2.6rem) clamp(1.4rem, 3.4vw, 2.8rem); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08); }
.hcard-box h1 { font-size: clamp(1.9rem, 2.6vw + 1rem, 3rem); line-height: 1.14; margin: 0 0 1.5rem; }
.hcard-box .lead { margin: -0.4rem 0 0; font-size: 1.05rem; color: var(--ink); }
.hcard-box .lead + .latest { margin-top: 1.4rem; }
.latest { margin: 0; font-family: var(--head); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.7; }
.latest span { display: block; color: var(--gold); margin-bottom: 0.45rem; }
.latest a { color: var(--ink); text-decoration: none; }
.latest a:hover { color: var(--blue); }

/* one line of the organization's own words across a band of its colour */
.band { background: var(--blue); color: #fff; }
.band .wrap { max-width: var(--wide, 1180px); padding-top: clamp(2.6rem, 6vw, 4.5rem); padding-bottom: clamp(2.6rem, 6vw, 4.5rem); text-align: center; }
.band p { margin: 0 auto; max-width: 860px; font-family: var(--head); font-weight: 300; font-size: clamp(1.4rem, 1.6vw + 0.9rem, 2.2rem); line-height: 1.3; }
/* The measure is set in the line's own type, so the sentence breaks the same way at every size: KCSA's runs about
   48em on one line, so 25.5em holds it as two even lines wherever the band is that wide, and balance evens out any
   narrower break, so no word is left alone on the last line (Sarah, 2026-09-26: "Keys." on a line of its own). */
.band p { max-width: 25.5em; text-wrap: balance; }

/* photographs that are doors, each named over its top edge */
.tiles .wrap { max-width: var(--wide, 1180px); padding-top: clamp(2.6rem, 6vw, 4.5rem); padding-bottom: clamp(2.6rem, 6vw, 4.5rem); }
.tgrid { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 1rem; }
.tiles h1, .tiles h2 { margin: 0 0 clamp(1.4rem, 3vw, 2.2rem); }
.ptile { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; color: #fff; text-decoration: none; }
.ptile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.ptile::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0) 45%); }
.ptile span { position: absolute; top: 1.1rem; left: 1.3rem; right: 1.3rem; z-index: 2; font-family: var(--head); font-weight: 300; font-size: clamp(1.4rem, 1.4vw + 0.8rem, 2rem); line-height: 1.1; }
/* two to a row are twice as wide, so they lie on their side rather than stand a screen tall */
.tgrid[style*="--n: 2"] .ptile { aspect-ratio: 4 / 3; }
.ptile:hover img, .ptile:focus-visible img { transform: scale(1.04); }
.ptile:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
@media (max-width: 720px) {
  .tgrid { grid-template-columns: 1fr; }
  .ptile { aspect-ratio: 16 / 10; }
}
@media (prefers-reduced-motion: reduce) { .ptile img { transition: none; } }

/* short statements side by side, a rule between them */
.pillars .wrap { max-width: var(--wide, 1180px); padding-top: clamp(2.6rem, 6vw, 4.5rem); padding-bottom: clamp(2.6rem, 6vw, 4.5rem); }
.pgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2rem 0; }
.pgrid > div { padding: 0 clamp(1.2rem, 4vw, 3.5rem); }
.pgrid > div + div { border-left: 1px solid currentColor; border-left-color: color-mix(in srgb, currentColor 30%, transparent); }
.pgrid p { margin: 0; font-family: var(--head); font-weight: 300; font-size: clamp(1.1rem, 0.7vw + 0.9rem, 1.4rem); line-height: 1.45; }
.pgrid .plabel { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 0.9rem; }
@media (max-width: 620px) { .pgrid > div { padding: 0; } .pgrid > div + div { border-left: 0; } }

/* the collage: columns of one height, each picture filling its share of its column */
.gallery.collage .shots.laid { columns: auto; display: flex; gap: 16px; align-items: flex-start; }
.gallery.collage .ccol { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.gallery.collage .ccol figure { flex: 1 1 0; min-height: 0; margin: 0; display: flex; }
.gallery.collage .ccol .zoom { display: block; width: 100%; height: 100%; }
.gallery.collage .ccol img { width: 100%; height: 100%; object-fit: cover; }

/* A photograph between the heading and the details (KCSA, Sarah 2026-09-26). The column is as tall as the form: the
   heading sits level with its top, the details level with its foot, and the photograph fills what is between. */
@media (min-width: 721px) {
  .contact .two:has(> .intro.pictured) { align-items: stretch; }
  .contact .intro.pictured { display: flex; flex-direction: column; }
  .contact .intro.pictured h1 { margin-bottom: 0; }
  .contact .intro.pictured .cpic { position: relative; flex: 1 1 auto; min-height: 200px; margin: 1.2rem 0 1.5rem; }
  .contact .intro.pictured .cpic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .contact .intro.pictured .details { margin-bottom: 0; }
}
/* stacked on a narrow screen: the photograph at its own shape, a little shorter than square */
@media (max-width: 720px) {
  .contact .intro.pictured .cpic { margin: 1rem 0 1.4rem; }
  .contact .intro.pictured .cpic img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
}

/* a section's own ground: pale, or a deep band of the organization's colour */
.tone-tint { background: var(--paper-2); }
.tone-dark { background: color-mix(in srgb, var(--blue) 55%, #000); color: #fff; }
.tone-dark h1, .tone-dark h2, .tone-dark h3, .tone-dark a:not(.btn) { color: #fff; }
.tone-dark .btn, .tone-dark .btn.ghost { color: #fff; }
.tone-tint > .wrap, .tone-dark > .wrap { padding-top: clamp(2.6rem, 6vw, 4.5rem); padding-bottom: clamp(2.6rem, 6vw, 4.5rem); }

/* arts: light, large headings; the menu in plain words; links in small spaced capitals */
:root { --wide: 1180px; }
body { font-size: 1.05rem; }
h1, h2, h3 { font-weight: 300; letter-spacing: -0.015em; }
h1, .hero h1 { font-size: clamp(2rem, 2.4vw + 1rem, 3rem); }
h2 { font-size: clamp(1.7rem, 1.7vw + 0.9rem, 2.5rem); }
h3 { font-weight: 400; }
.nav { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 1.1rem; }
.nav a:not(.btn) { color: var(--ink); }
.dmenu { font-size: 1rem; }
/* a link that asks for a step reads as words with an arrow, not as a filled button */
.btn, .btn.ghost { background: none; border: 0; border-radius: 0; padding: 0.35rem 0; color: var(--ink); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
/* a drawn arrow, not a type character: the chevron in the font read as ">" (Sarah, 2026-09-26). It takes the
   colour of its words, and moves a step along when they are pointed at. */
.btn::after, .latest a::after { content: ""; display: inline-block; width: 1.35em; height: 0.75em; margin-left: 0.6em; vertical-align: -0.02em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 14' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 7h23M18 1l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 14' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 7h23M18 1l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain; transition: transform 0.15s ease; }
.btn:hover::after, .latest a:hover::after { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .btn::after, .latest a::after { transition: none; } }
.btn:hover, .btn.ghost:hover { background: none; color: var(--blue); }
/* Log In stays a button: it is the way into the portal, not a step on the page */
.top .login.btn { border: 1px solid var(--ink); border-radius: 999px; padding: 0.5rem 1.15rem; font-size: 0.74rem; letter-spacing: 0.12em; }
.top .login.btn::after { content: none; }
.top .login.btn:hover { background: var(--ink); color: #fff; }
.text .btn, .split .btn, .videos .btn { margin-top: 0.4rem; }
/* section headings a step heavier than the light titles, so they hold beside a photograph */
h2 { font-weight: 400; }
/* recordings and pictures run as wide as the page, their headings on its left edge */
.videos .wrap { max-width: var(--wide); }
.videos h1, .videos h2, .gallery h1, .gallery h2 { text-align: left; }
.videos + .gallery .wrap { padding-top: 0; }
/* the footer row starts and ends on the same lines as the page above it */
.foot-cols { max-width: var(--wide); }
/* the opening card stands on the band that follows it, not on white */
.hcard:has(+ .band) { background: var(--blue); }
/* the same room under the band's sentence as between the card and it (Sarah, 2026-10-18) */
.hcard + .band .wrap { padding-top: clamp(1.6rem, 4vw, 3rem); padding-bottom: clamp(1.6rem, 4vw, 3rem); }
/* the pictures run as wide as the sections around them */
.gallery .wrap { max-width: var(--wide); }
/* a single recording stands in the middle, at a size worth watching */
.vlist:has(> li:only-child) { grid-template-columns: minmax(0, 760px); justify-content: center; }
/* a photograph beside words takes half the width of the page and keeps its own shape */
@media (min-width: 861px) {
  .split.pic:not(.mid) .two, .split.pic.right:not(.mid) .two { max-width: var(--wide); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(2rem, 5vw, 4.5rem); align-items: center; padding-top: clamp(2rem, 4.5vw, 3.5rem); padding-bottom: clamp(2rem, 4.5vw, 3.5rem); }
  /* The photograph is at least 4:3 and at least as tall as the words beside it, so its top and bottom never
     fall inside the text (Sarah, 2026-09-26). The ::before holds the 4:3; the row stretches it further when the
     words run longer, and the picture fills whatever box that makes. Short words sit in the middle beside it. */
  .split.pic:not(.mid) .two, .split.pic.right:not(.mid) .two { align-items: stretch; }
  .split.pic:not(.mid) .two > div { align-self: center; }
  .split.pic:not(.mid) .zoom { position: relative; display: block; height: auto; }
  .split.pic:not(.mid) .zoom::before { content: ""; display: block; padding-top: 75%; }
  .split.pic:not(.mid) .spic { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; max-height: none; object-fit: cover; border-radius: 0; }
}
@media (max-width: 860px) {
  .split.pic:not(.mid) .spic { aspect-ratio: 4 / 3; height: auto; max-height: none; object-fit: cover; }
}
/* a recording with no heading over it has the same room above it as below: its list drops the margin it would
   keep under a heading */
.videos .wrap > .vlist:first-child { margin-top: 0; }
/* sections that are only a heading and a link sit close together */
.text.side + .text.side .wrap { padding-top: 0; }
/* a contact line long enough to wrap keeps its icon beside its words, as "narrow-centered" does */
@media (max-width: 859px) {
  .contact .details li > span:last-child { max-width: 15.5rem; text-wrap: balance; }
}