/*
 * THE PUBLIC SITE'S OWN STYLES (13 October 2026), moved out of the <style> in
 * builder/layouts/default.twig so a browser keeps them between pages instead
 * of downloading them again inside every page. The layout links this file with
 * the site's version on the address, so a release is never served stale.
 *
 * Only fixed rules live here. What depends on the visitor stays in the layout:
 * the inspector rule for non-superusers and each page's {% block styles %},
 * which come after this file and so still win over it.
 */
:root {
	--green:      #1b2a12;   /* page ground */
	--green-soft: #22331a;   /* raised panels */
	--ink:        #0a0a0a;   /* nav bar */
	--cream:      #f5e2b4;   /* display text */
	--cream-dim:  #e8dcc0;   /* body text */
	--gold:       #e3c48a;   /* eyebrows, buttons, rules */
	--gold-deep:  #c28d41;   /* borders */
	--red:        #a8231f;   /* the "for Adults" accent */
	--paper:      #d7cba8;   /* aged sheet-music band */
	--rule:       rgba(227,196,138,.28);
	--display: 'Cormorant Garamond', Garamond, 'Times New Roman', serif;
	--body:    'Lora', Georgia, serif;
}
* { box-sizing: border-box; }
/* LARGER TYPE FOR READERS OVER 55 (Proposal 13, Chuck, 27 September 2026):
   the root is 18px, not the browser's 16px, and every rem size grows with it. */
html { font-size: 112.5%; }
body {
	margin: 0; background: var(--green); color: var(--cream-dim);
	font: 400 1rem/1.65 var(--body);
	-webkit-font-smoothing: antialiased;
}
.wrap { max-width: 68rem; margin: 0 auto; padding: 0 1.5rem; }

/* ---- masthead: aged sheet music, seal, title ---- */
.masthead {
	background: var(--paper) url('/assets/img/header-sheetmusic.webp') center/auto 100% repeat-x;
	border-bottom: 1px solid rgba(0,0,0,.15);
	/* The scrim below is deliberately wider than its container; without
	   this it hangs 2rem past the right edge and gives the whole site a
	   horizontal scrollbar on a phone. */
	overflow: hidden;
}
/* A cream scrim behind the title: the notation reads as texture at the
   edges but stops competing with the type in the middle. */
.masthead .wrap {
	display: flex; align-items: center; justify-content: center;
	gap: 1rem; padding: .85rem 1.5rem; text-align: center; position: relative;
}
.masthead .wrap::before {
	content: ''; position: absolute; inset: 0 -2rem;
	background: radial-gradient(ellipse 60% 120% at 50% 50%,
		rgba(240,231,206,.94) 0%, rgba(240,231,206,.86) 45%, rgba(240,231,206,0) 78%);
	pointer-events: none;
}
.masthead .wrap > * { position: relative; }
.masthead img { width: 58px; height: 58px; flex: none; }
/* THE CAMP'S NAME IS NOT THIS PAGE'S HEADING.
   It was an <h1>, and so is the heading of every page under it, so a
   screen reader announced two first-level headings on every page and the
   real one was second. The camp's name is the same on all of them, which
   is the definition of not being the heading. It is a <p> now, and it is
   in the site link's own label, so nothing is lost to anybody. */
.masthead .site-name {
	font-family: var(--display); font-weight: 600; color: var(--green);
	font-size: clamp(1.5rem, 4vw, 2.4rem); margin: 0; line-height: 1.1;
	letter-spacing: -0.01em;
}
.masthead .for-adults {
	font-family: var(--display); font-style: italic; color: var(--red);
	font-size: 1.05rem; margin: .1rem 0 0;
}

/* ---- nav ---- */
nav.site { background: var(--ink); }
nav.site .wrap { display: flex; align-items: center; gap: 1.6rem; padding: .8rem 1.5rem; }
nav.site a { color: var(--cream-dim); text-decoration: none; font-size: .95rem; }
nav.site a:hover, nav.site a[aria-current] { color: var(--gold); }
nav.site .navlinks {
	display: flex; align-items: center; gap: 1.6rem;
	flex: 1 1 auto; min-width: 0;
}
nav.site .spacer { margin-left: auto; }
nav.site .navcta { flex: none; }

/* ---- the two menus (to-do 225 and 229) ----
   A button and a panel. WITH NO SCRIPT the panel's links show in the
   row with the others, and the row may go to a second line: every
   link is still there. The panel is hidden only under .js-nav, which
   the script adds, for the same reason the phone menu is. */
nav.site .navmenu { position: relative; display: flex; align-items: center; gap: 1.6rem; }
nav.site:not(.js-nav) .navlinks { flex-wrap: wrap; row-gap: .5rem; }
nav.site .navmenu-button {
	display: inline-flex; align-items: center; gap: .4rem;
	font: inherit; font-size: .95rem; color: var(--cream-dim);
	background: none; border: 0; padding: 0; cursor: pointer;
}
nav.site .navmenu-button:hover,
nav.site .navmenu-button[aria-current],
nav.site.js-nav .navmenu.is-open .navmenu-button { color: var(--gold); }
nav.site .navmenu-button:focus-visible,
nav.site .navmenu-panel a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
nav.site .navmenu-button .caret {
	width: 0; height: 0;
	border-left: .3rem solid transparent; border-right: .3rem solid transparent;
	border-top: .36rem solid currentColor;
	transition: transform .18s ease;
}
nav.site:not(.js-nav) .navmenu-button { cursor: default; }
nav.site:not(.js-nav) .navmenu-button .caret { display: none; }
nav.site.js-nav .navmenu.is-open .navmenu-button .caret { transform: rotate(180deg); }
nav.site .navmenu-panel { display: flex; align-items: center; gap: 1.6rem; }
nav.site.js-nav .navmenu-panel {
	display: none;
	position: absolute; top: calc(100% + .8rem); left: -1.1rem; z-index: 50;
	flex-direction: column; align-items: stretch; gap: 0;
	min-width: 13rem; padding: .4rem 0;
	background: var(--ink); border: 1px solid rgba(232,220,192,.22); border-radius: 4px;
	box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
nav.site.js-nav .navmenu.is-open .navmenu-panel { display: flex; }
nav.site.js-nav .navmenu-panel a { padding: .55rem 1.1rem; white-space: nowrap; }
nav.site.js-nav .navmenu-panel a:hover { background: rgba(232,220,192,.08); }

/* BETWEEN A PHONE AND A LAPTOP the row is tight. Measured on
   28 September 2026: at 860 to 900 pixels "Support Us" and "Sign in"
   went to two lines, and the row was 7 pixels too wide. So a link of
   the bar stays on one line, and under 64rem the links are closer. */
nav.site .navlinks > a,
nav.site .navmenu-button { white-space: nowrap; }
@media (max-width: 64rem) {
	nav.site .wrap,
	nav.site .navlinks,
	nav.site .navmenu { gap: 1.1rem; }
}

/* The button that replaces the menu on a small screen. Hidden here, and
   shown by the media query below. */
.navtoggle {
	display: none; align-items: center; gap: .55rem;
	font: inherit; font-size: .9rem; color: var(--cream-dim);
	background: none; border: 1px solid rgba(232,220,192,.3);
	border-radius: 3px; padding: .5rem .8rem; cursor: pointer;
}
.navtoggle:hover { color: var(--gold); border-color: var(--gold); }
.navtoggle .bars {
	position: relative; display: block; width: 1.1rem; height: 2px;
	background: currentColor; border-radius: 2px;
}
.navtoggle .bars::before, .navtoggle .bars::after {
	content: ''; position: absolute; left: 0; width: 100%; height: 2px;
	background: currentColor; border-radius: 2px;
	transition: transform .18s ease, opacity .18s ease;
}
.navtoggle .bars::before { top: -6px; }
.navtoggle .bars::after  { top: 6px; }
/* The three bars become a cross while the menu is open. */
.navtoggle[aria-expanded="true"] .bars { background: transparent; }
.navtoggle[aria-expanded="true"] .bars::before { transform: translateY(6px) rotate(45deg); }
.navtoggle[aria-expanded="true"] .bars::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 52rem) {
	/* PHONE:start */
	nav.site .wrap { flex-wrap: wrap; gap: 1rem; }
	.navtoggle { display: inline-flex; order: 1; }
	nav.site .navcta { order: 2; margin-left: auto; }
	nav.site .navlinks {
		order: 3; flex-basis: 100%;
		flex-direction: column; align-items: stretch; gap: 0;
	}
	nav.site .navlinks a {
		padding: .7rem .2rem; font-size: 1rem;
		border-top: 1px solid rgba(232,220,192,.12);
	}
	nav.site .spacer { display: none; }
	nav.site .navlinks > a { white-space: normal; }

	/* The two groups inside the Menu panel: the name as a small
	   heading, the links below it and set in. NOT folded a second
	   time: one Menu button is enough on a phone. */
	nav.site .navmenu {
		display: block; position: static;
		border-top: 1px solid rgba(232,220,192,.12);
	}
	nav.site .navmenu-button {
		width: 100%; padding: .8rem .2rem .15rem; cursor: default;
		font-size: .86rem; letter-spacing: .08em; text-transform: uppercase;
		color: rgba(232,220,192,.62);
	}
	nav.site .navmenu-button .caret { display: none; }
	nav.site .navmenu-panel,
	nav.site.js-nav .navmenu-panel {
		display: flex; position: static;
		flex-direction: column; align-items: stretch; gap: 0;
		min-width: 0; padding: 0 0 .3rem 1rem;
		background: none; border: 0; border-radius: 0; box-shadow: none;
	}
	nav.site .navmenu-panel a,
	nav.site.js-nav .navmenu-panel a { padding: .6rem .2rem; border-top: 0; white-space: normal; }

	/* Collapsed only once the script has taken charge. Without it the
	   links stay visible and the page still works. */
	nav.site.js-nav .navlinks { display: none; }
	nav.site.js-nav .navlinks.is-open { display: flex; }
	/* PHONE:end */
}

/* FOLDED BY MEASURE, NOT BY WIDTH (review, 28 September 2026). A signed-in
   camper has nine items in the bar, and below about 1180 pixels their
   last links ran under the Registration button. A fixed width cannot
   know how many links there are or how long staff made their words. So
   the script measures the row, and when the links do not fit it adds
   is-folded, which is the phone layout above, rule for rule.
   tests/public_nav_menus_test.php holds the two copies the same: change
   one, change the other. */
/* FOLDED:start */
nav.site.is-folded .wrap { flex-wrap: wrap; gap: 1rem; }
nav.site.is-folded .navtoggle { display: inline-flex; order: 1; }
nav.site.is-folded .navcta { order: 2; margin-left: auto; }
nav.site.is-folded .navlinks {
	order: 3; flex-basis: 100%;
	flex-direction: column; align-items: stretch; gap: 0;
}
nav.site.is-folded .navlinks a {
	padding: .7rem .2rem; font-size: 1rem;
	border-top: 1px solid rgba(232,220,192,.12);
}
nav.site.is-folded .spacer { display: none; }
nav.site.is-folded .navlinks > a { white-space: normal; }

/* The two groups inside the Menu panel: the name as a small
   heading, the links below it and set in. NOT folded a second
   time: one Menu button is enough on a phone. */
nav.site.is-folded .navmenu {
	display: block; position: static;
	border-top: 1px solid rgba(232,220,192,.12);
}
nav.site.is-folded .navmenu-button {
	width: 100%; padding: .8rem .2rem .15rem; cursor: default;
	font-size: .86rem; letter-spacing: .08em; text-transform: uppercase;
	color: rgba(232,220,192,.62);
}
nav.site.is-folded .navmenu-button .caret { display: none; }
nav.site.is-folded .navmenu-panel,
nav.site.is-folded.js-nav .navmenu-panel {
	display: flex; position: static;
	flex-direction: column; align-items: stretch; gap: 0;
	min-width: 0; padding: 0 0 .3rem 1rem;
	background: none; border: 0; border-radius: 0; box-shadow: none;
}
nav.site.is-folded .navmenu-panel a,
nav.site.is-folded.js-nav .navmenu-panel a { padding: .6rem .2rem; border-top: 0; white-space: normal; }

/* Collapsed only once the script has taken charge. Without it the
   links stay visible and the page still works. */
nav.site.is-folded.js-nav .navlinks { display: none; }
nav.site.is-folded.js-nav .navlinks.is-open { display: flex; }
/* FOLDED:end */

@media (prefers-reduced-motion: reduce) {
	.navtoggle .bars::before, .navtoggle .bars::after { transition: none; }
	nav.site .navmenu-button .caret { transition: none; }
}

.btn {
	display: inline-block; font-family: var(--body); font-size: .86rem;
	letter-spacing: .13em; text-transform: uppercase; text-decoration: none;
	padding: .6rem 1.15rem; border: 1px solid var(--gold); color: var(--gold);
	background: transparent; border-radius: 2px; cursor: pointer;
}
.btn:hover { background: var(--gold); color: var(--green); }
.btn.solid { background: var(--gold); color: var(--green); }
.btn.solid:hover { background: var(--cream); }

/* ---- typography ---- */
main { padding: 3rem 0 4.5rem; }
body.is-bare main { padding: 1.5rem 0 2rem; }
h1, h2, h3 { font-family: var(--display); color: var(--cream); font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.08; margin: 0 0 .4em; }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.15; margin: 2.5rem 0 .6rem; }
h3 { font-size: 1.15rem; margin: 1.5rem 0 .4rem; }
a { color: var(--gold); }
.eyebrow {
	font-size: .82rem; letter-spacing: .18em; text-transform: uppercase;
	color: var(--gold); margin: 0 0 .9rem;
}
.lede { font-size: 1.1rem; max-width: 42rem; color: var(--cream-dim); }
.scholarship-contact { font-size: 1rem; max-width: 42rem; color: var(--cream-dim); margin: .8rem 0; }
.muted { color: rgba(232,220,192,.66); }
.small { font-size: .9rem; }
hr.rule { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }

/* WHICH INSTRUMENTS ARE FULL — partials/instruments-full.twig.
   Defined in the layout rather than on a page, because the same block
   appears on the home page and inside the registration form, and a rule
   that lives on one of those is a rule the other cannot see. */
.inst-full {
	max-width: 42rem; margin: 2.2rem 0; padding: 1.1rem 1.3rem;
	border: 1px solid var(--gold-deep); border-left-width: 4px; border-radius: 4px;
	background: var(--green-soft); color: var(--cream-dim);
}
.inst-full-h {
	font-size: 1.05rem; margin: 0 0 .7rem; color: var(--gold);
	letter-spacing: normal; text-transform: none;
}
.inst-full-line { margin: 0 0 .55rem; line-height: 1.5; }
.inst-full-names { color: var(--cream); }
/* The closing reassurance is the quiet half: it is there so a camper
   whose instrument is NOT listed stops reading and goes on. */
.inst-full-note { margin: .8rem 0 0; font-size: .92rem; color: rgba(232,220,192,.66); }

/* Icons inherit colour and sit on the text baseline; sized in em so they
   scale with whatever type they sit beside. */
/* Sized for a glyph now, not an SVG box. flex:none keeps it from being
   squeezed in the flex rows it sits in. */
.ico { font-size: 1.05em; line-height: 1; vertical-align: -.08em; flex: none; }
.contact-line { display: flex; gap: .55rem; align-items: start; }
.contact-line .ico { color: var(--gold); margin-top: .15rem; }

.panel {
	background: var(--green-soft); border: 1px solid var(--rule);
	border-radius: 3px; padding: 1.4rem 1.5rem; margin: 0 0 1.25rem;
}
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1.25rem; }

/* ---- footer ---- */
footer.site { border-top: 1px solid var(--rule); margin-top: 4rem; }
footer.site .wrap { padding: 2.5rem 1.5rem 3rem; }
.sponsors { text-align: center; margin: 0 0 2.5rem; }
.sponsors h2 { font-size: 1.2rem; margin: 0 0 1.2rem; }
.sponsor-logos {
	display: flex; flex-wrap: wrap; justify-content: center;
	align-items: center; gap: 0 2rem;
}
/* The space between rows is on the logos, not the row gap: a row
   break is a line of its own, and a gap would come twice around it. */
.sponsor-logos a { display: block; margin: .7rem 0; }
/* About 20% bigger (to-do 154): 65px tall at full width, from 54, and
   smaller on a narrow screen so a phone still gets two to a row. */
.sponsor-logos img {
	height: clamp(44px, 11vw, 65px); width: auto; max-width: clamp(130px, 30vw, 204px); object-fit: contain;
	background: #fff; padding: .4rem .6rem; border-radius: 2px;
	opacity: .92; transition: opacity .15s;
}
.sponsor-logos a:hover img { opacity: 1; }
/* A row break the balancing script puts between logos (to-do 154). */
.sponsor-logos .sponsor-break { flex-basis: 100%; height: 0; }
.footer-cols {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 2rem; font-size: .92rem;
}
.footer-cols a { display: block; margin: .2rem 0; }
/* Keep the marker outside the link's underline. */
.footer-cols a.with-ico { display: inline-flex; align-items: baseline; gap: .5rem; }
.footer-cols a .ico { color: var(--gold); }

/* ─── The sandbox ribbon ───────────────────────────────────────────────
   Neon, not red: the camp red already means "staff admin", and a second
   red band would read as more of the same rather than as a different
   kind of warning. It sits ABOVE everything, on every page including the
   public ones, and only on the sandbox address — see Site::isSandbox. */
.tjc-sandbox-ribbon {
	position: sticky; top: 0; z-index: 1000;
	height: var(--tjc-ribbon-h, 1.9rem);
	display: flex; align-items: center; justify-content: center;
	margin: 0; padding: .45rem 1rem;
	background: #d8ff00; color: #1b2a12;
	font: 600 .86rem/1.3 -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
	letter-spacing: .07em; text-transform: uppercase; text-align: center;
	border-bottom: 2px solid #1b2a12;
}
@media print { .tjc-sandbox-ribbon { display: none; } }

/* ─── Not open to the public yet ──────────────────────────────────────
   While the landing page is in front of the site (to-do 128), staff and
   anyone holding the preview link still see the real pages. This says so,
   so nobody takes a preview for the open site. Gold, not neon: the sandbox
   ribbon means "this is not the camp's site", and this means "this IS the
   camp's site, and the public cannot see it yet". */
.tjc-gate-band {
	position: sticky; top: 0; z-index: 999;
	margin: 0; padding: .4rem 1rem;
	background: var(--gold, #e3c48a); color: #1b2a12;
	font: 600 .82rem/1.3 -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
	letter-spacing: .05em; text-align: center;
}
@media print { .tjc-gate-band { display: none; } }
/* The Google Analytics question (30 September 2026): a bar at the foot of the
   window, over the page, until it is answered. */
.tjc-consent {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem 1.4rem;
	padding: .9rem 1.2rem; background: var(--ink); color: var(--cream-dim);
	border-top: 1px solid var(--gold-deep); font-size: .95rem;
}
.tjc-consent[hidden] { display: none; }
.tjc-consent p { margin: 0; max-width: 46rem; }
.tjc-consent a { color: var(--gold); }
.tjc-consent-buttons { display: flex; gap: .6rem; }
@media print { .tjc-consent { display: none !important; } }