/* Custodiet Christi — visual redesign layer (November 2026)
   Loaded after style.css and viewer.css. The second iteration's page heroes and gilded artwork (art.js)
   and the constellation star chart (custodiet.js) are styled in sections 6b and 11b. */

/* ---------- 1. Tokens ---------- */
:root,[data-theme="light"]{
 --night:oklch(19% .043 258);
 --night-2:oklch(24.5% .052 256);
 --night-3:oklch(31% .056 255);
 --night-ink:oklch(96% .016 88);
 --night-muted:oklch(83% .024 88);
 --night-line:oklch(80% .1 85 / .3);
 --leaf:oklch(80% .1 85);
 --stage:oklch(13% .03 258);
 --shadow-sm:0 1px 2px oklch(22% .05 255 / .07),0 3px 12px oklch(22% .05 255 / .05);
 --shadow-md:0 2px 4px oklch(22% .05 255 / .08),0 14px 34px oklch(22% .05 255 / .1);
 --shadow-lg:0 4px 8px oklch(22% .05 255 / .1),0 28px 64px oklch(22% .05 255 / .18);
 --ease-out:cubic-bezier(.16,1,.3,1);
 --t:180ms var(--ease-out);
 --header-h:84px;
 --band:max(var(--gutter),calc(50vw - 660px + var(--gutter)));
 --moon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.6 14.3A8.6 8.6 0 0 1 9.7 3.4a8.6 8.6 0 1 0 10.9 10.9Z'/%3E%3C/svg%3E");
 --sun:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4.6'/%3E%3Cpath stroke='%23000' stroke-width='2' stroke-linecap='round' d='M12 2.2v2.6M12 19.2v2.6M2.2 12h2.6M19.2 12h2.6M5.1 5.1l1.8 1.8M17.1 17.1l1.8 1.8M5.1 18.9l1.8-1.8M17.1 6.9l1.8-1.8'/%3E%3C/svg%3E");
 --star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'%3E%3Cpath d='M0-10C1.1-2.6 2.6-1.1 10 0 2.6 1.1 1.1 2.6 0 10-1.1 2.6-2.6 1.1-10 0-2.6-1.1-1.1-2.6 0-10Z'/%3E%3C/svg%3E");
}
[data-theme="dark"]{
 --shadow-sm:0 1px 2px oklch(8% .03 258 / .4),0 3px 12px oklch(8% .03 258 / .3);
 --shadow-md:0 2px 4px oklch(8% .03 258 / .45),0 14px 34px oklch(8% .03 258 / .4);
 --shadow-lg:0 4px 8px oklch(8% .03 258 / .5),0 28px 64px oklch(8% .03 258 / .5);
}

/* Night scope: surfaces that sit in the seal's night sky reuse the site tokens with night values,
   so buttons, links, hairlines and focus rings inside them adapt on their own. */
.site-header,.hero,.band,.site-footer,.slide-viewer,.contact-forum,.path,.cc-tri-head,.cc-star-wrap,.isle-band{
 --ink:var(--night-ink);--muted:var(--night-muted);--bg:var(--night);--surface:var(--night-2);--soft:var(--night-3);
 --line:var(--night-line);--accent:var(--leaf);--inverse:var(--night);--gold:var(--leaf);
 color:var(--ink);
}

/* ---------- 2. Global ---------- */
html{scroll-padding-top:calc(var(--header-h) + var(--space-6))}
main{overflow-x:clip}
::selection{background:var(--leaf);color:var(--night)}
a{transition:color var(--t),text-decoration-color var(--t)}
h1,h2{text-wrap:balance}
main [role="status"]{color:var(--muted);font-size:var(--text-sm);letter-spacing:.08em}

/* ---------- 3. Header ---------- */
.site-header{max-width:none;min-height:var(--header-h);padding:var(--space-3) var(--band);background:var(--night);border-bottom:1px solid var(--night-line);position:relative;z-index:40}
.brand-mark{box-shadow:0 0 0 1px var(--night-line),0 0 0 6px oklch(80% .1 85 / .08)}
.brand>span{font-weight:500;font-size:clamp(1.4rem,1.15rem + .9vw,1.9rem);letter-spacing:-.01em}
.brand small{color:var(--leaf);letter-spacing:.24em;margin-top:var(--space-1)}
.site-header nav a{position:relative;color:oklch(96% .016 88 / .84)}
.site-header nav a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:1px;background:var(--leaf);transform:scaleX(0);transform-origin:left;transition:transform 260ms var(--ease-out)}
.site-header nav a:hover{color:var(--night-ink)}
.site-header nav a:hover::after,.site-header nav a[aria-current="page"]::after{transform:scaleX(1)}
.site-header nav a[aria-current="page"]{color:var(--leaf);text-decoration:none}
.theme-toggle{border-color:var(--night-line);padding:var(--space-2) var(--space-4);letter-spacing:.04em;transition:background var(--t),color var(--t),border-color var(--t)}
.theme-toggle:hover{background:var(--leaf);color:var(--night);border-color:var(--leaf)}
.theme-toggle:active{transform:translateY(1px)}
@media(min-width:1001px){.site-header{position:sticky;top:0}}
.skip{z-index:60;background:var(--leaf);color:var(--night)}
.skip:focus-visible{outline-color:var(--night-ink)}

/* ---------- 4. Buttons ---------- */
.primary{letter-spacing:.01em;transition:background var(--t),color var(--t),border-color var(--t),transform var(--t),box-shadow var(--t)}
.primary:hover{opacity:1;transform:translateY(-2px);box-shadow:var(--shadow-md)}
.primary:active{transform:translateY(0);box-shadow:none}
.primary .arrow,.primary[href^="#/"]>span[aria-hidden],.path-link .arrow{display:inline-block;transition:translate var(--t)}
.primary:hover .arrow,.primary[href^="#/"]:hover>span[aria-hidden]{translate:4px 0}
.secondary{border-color:oklch(from var(--ink) l c h / .32);transition:background var(--t),color var(--t),border-color var(--t),transform var(--t)}
.secondary:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.secondary:active{transform:translateY(1px)}
.viewer-toolbar button:disabled:hover{background:transparent;color:inherit;border-color:oklch(from var(--ink) l c h / .32)}

/* ---------- 5. Page furniture ---------- */
.eyebrow{letter-spacing:.2em}
.hero .eyebrow::before,.band .eyebrow::before,.section-heading .eyebrow::before,.viewer-heading .eyebrow::before,.reading header .eyebrow::before,.reserved .eyebrow::before{content:"";display:inline-block;width:.85em;height:.85em;margin-right:.75em;vertical-align:-.08em;background:currentColor;-webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat}
.page-title{letter-spacing:-.03em;line-height:1.04}
.breadcrumb{font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;margin-bottom:var(--space-10)}
.breadcrumb>span:not(:last-child){color:var(--gold)}
.breadcrumb a{text-decoration:none}
.breadcrumb a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold)}

/* ---------- 6. Home ---------- */
.hero{position:relative;isolation:isolate;clip-path:inset(0 -100vmax);grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);gap:clamp(var(--space-8),5vw,var(--space-20));padding-block:clamp(var(--space-10),6vh,var(--space-16)) clamp(var(--space-16),10vh,var(--space-24));min-height:min(860px,calc(100vh - var(--header-h)))}
.hero::before,.band::before{content:"";position:absolute;z-index:-2;inset:0 calc(50% - 50vw);background:radial-gradient(70% 80% at 74% 34%,var(--night-2),transparent 70%),var(--night);border-bottom:2px dotted oklch(80% .1 85 / .5)}
.hero::after,.band::after{content:"";position:absolute;z-index:-1;inset:0 calc(50% - 50vw);background:url(./assets/night-sky.svg) 50% 0/1200px 800px;opacity:.5;-webkit-mask:linear-gradient(#000 45%,transparent 96%),linear-gradient(100deg,rgb(0 0 0 / .22) 30%,#000 62%);-webkit-mask-composite:source-in;mask:linear-gradient(#000 45%,transparent 96%),linear-gradient(100deg,rgb(0 0 0 / .22) 30%,#000 62%);mask-composite:intersect;pointer-events:none}
.hero h1{max-width:11.5em;line-height:1.02;letter-spacing:-.032em;margin-block:var(--space-5) var(--space-6)}
.hero .intro{max-width:44ch}
.hero .primary{margin-top:var(--space-10);min-height:60px;padding-inline:var(--space-8)}
.hero .primary:hover{background:var(--night-ink);border-color:var(--night-ink)}
.hero-meta{margin-top:var(--space-10);gap:0;letter-spacing:.16em;text-transform:uppercase}
.hero-meta span+span{margin-left:var(--space-5);padding-left:var(--space-5);border-left:1px solid var(--night-line)}
/* The home hero's art is the same round-topped arch as the section panels (.arch, section 6b), sized for the hero.
   Without it (.hero has no .has-art) the text takes the full width. */
.hero .arch{align-self:center;width:min(100%,500px)}
.hero:not(.has-art){grid-template-columns:minmax(0,1fr)}

.section-heading{margin-block:clamp(var(--space-16),8vw,var(--space-24)) var(--space-10);align-items:end}
.section-heading h2{font-size:var(--text-2xl)}
.paths{grid-template-columns:1fr;gap:var(--space-8);padding-bottom:clamp(var(--space-16),9vw,var(--space-32))}
/* Both curriculum cards sit on the night ground: text in one column, the section art in its arch in the other, alternating sides. */
.path,.path.ready{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto 1fr auto;column-gap:clamp(var(--space-8),7vw,var(--space-24));padding:clamp(var(--space-8),5vw,var(--space-16));background:var(--night);border-color:var(--night);color:var(--ink);box-shadow:var(--shadow-md);transition:transform var(--t),box-shadow var(--t),border-color var(--t)}
.path::before{content:"";position:absolute;z-index:-1;inset:0;background:url(./assets/night-sky.svg) 20% 30%/1200px 800px;opacity:.34;pointer-events:none}
.path>*{grid-column:1}
.path>.arch{grid-column:2;grid-row:1/-1;align-self:center;width:clamp(220px,25vw,340px)}
.path:nth-child(even){grid-template-columns:auto minmax(0,1fr)}
.path:nth-child(even)>*{grid-column:2}
.path:nth-child(even)>.arch{grid-column:1}
.path.ready .eyebrow{color:var(--gold)}
.path.ready .path-desc{color:var(--muted)}
.path-desc{font-size:var(--text-lg);line-height:1.5}
.path-link{align-self:end}
[data-theme="dark"] .path,[data-theme="dark"] .contact-forum{border-color:var(--night-line)}
.path h3{font-size:clamp(3rem,2rem + 3.6vw,5.5rem);line-height:.98;letter-spacing:-.035em;margin-block:var(--space-6) var(--space-6)}
.path-link{border-top-color:color-mix(in oklab,currentColor 30%,transparent);letter-spacing:.02em}
.path-link::after{content:"";position:absolute;inset:0}
.path:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:oklch(from var(--gold) l c h / .7)}
.path:hover .arrow{translate:6px 0}
@supports selector(:has(a)){
 .path:has(.path-link:focus-visible){outline:3px solid var(--accent);outline-offset:4px}
 .path .path-link:focus-visible{outline:none}
}

/* ---------- 6b. Page heroes and gilded artwork ---------- */
/* A full-bleed band of the night sky under the header: breadcrumb, eyebrow, display title and lede on the left,
   the section art (arch) or the page emblem (roundel) on the right. Markup comes from band() in art.js. */
.band{position:relative;isolation:isolate;clip-path:inset(0 -100vmax);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-10) clamp(var(--space-8),6vw,var(--space-24));align-items:center;padding-block:var(--space-6) clamp(var(--space-12),6vw,var(--space-20));margin-bottom:clamp(var(--space-10),5vw,var(--space-16))}
.band-text{align-self:stretch;display:flex;flex-direction:column;min-width:0}
.band .breadcrumb{margin-bottom:var(--space-8)}
.band-text>.eyebrow{margin-top:auto}
.band-text>:last-child{margin-bottom:auto}
.band .page-title{font-size:clamp(2.75rem,1.5rem + 3.5vw,4.75rem);line-height:1;letter-spacing:-.035em;max-width:16ch;margin-block:var(--space-5) var(--space-6)}
.band .page-lede{font-size:var(--text-lg);line-height:1.5;max-width:44ch}
.band .cc-note{color:var(--muted)}
.arch,.roundel{position:relative;margin:0;justify-self:end}
.arch{width:clamp(230px,27vw,372px);padding:14px 14px 0}
.roundel{width:clamp(210px,25vw,348px);padding:14px}
.arch img,.roundel img{width:100%;object-fit:cover;background:var(--night);box-shadow:0 0 0 1px oklch(80% .1 85 / .7),var(--shadow-lg);outline:2px dotted oklch(80% .1 85 / .6);outline-offset:11px}
.arch img{aspect-ratio:3/4;border-radius:999px 999px 0 0}
.roundel img{aspect-ratio:1;border-radius:50%}
.arch::before,.roundel::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:200%;aspect-ratio:1;translate:-50% -50%;background:url(./assets/rays.svg) center/contain no-repeat;opacity:.55;pointer-events:none}
.arch::before{top:32%}
.emblem-thumb{width:64px;height:64px;border-radius:50%;background:var(--night);box-shadow:0 0 0 1px oklch(from var(--gold) l c h / .85),0 0 0 5px oklch(from var(--gold) l c h / .12)}

/* ---------- 7. OCIA catalogue ---------- */
.catalog{grid-template-columns:240px minmax(0,1fr);gap:clamp(var(--space-8),5vw,var(--space-16))}
.catalog-aside h2{font-size:var(--text-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.filter{border-radius:var(--radius-sm);transition:background var(--t),color var(--t)}
.filter span{min-width:2.25em;padding:2px var(--space-2);border-radius:999px;background:oklch(from var(--ink) l c h / .07);font-size:var(--text-xs);font-variant-numeric:tabular-nums;text-align:center}
.filter.active,.writings-filters .filter.active{background:var(--night);color:var(--night-ink)}
.filter.active span,.writings-filters .filter.active span{background:var(--leaf);color:var(--night);font-weight:700}
[data-theme="dark"] .filter.active,[data-theme="dark"] .writings-filters .filter.active{background:var(--leaf);color:var(--night)}
[data-theme="dark"] .filter.active span,[data-theme="dark"] .writings-filters .filter.active span{background:var(--night);color:var(--leaf)}
input[type="search"]{min-height:56px;transition:border-color var(--t),box-shadow var(--t)}
input[type="search"]:hover{border-color:oklch(from var(--ink) l c h / .4)}
input[type="search"]:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-color:var(--gold)}
.result-count{letter-spacing:.12em;text-transform:uppercase}
.class-row{position:relative;grid-template-columns:84px 64px minmax(0,1fr) 44px;gap:var(--space-5);align-items:center;padding:var(--space-6) var(--space-4) var(--space-6) 0;transition:background var(--t),padding var(--t)}
.class-row::after,.writing-row::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform 420ms var(--ease-out)}
.class-row:hover::after,.class-row:focus-visible::after,.writing-row:hover::after,.writing-row:focus-visible::after{transform:scaleX(1)}
.class-row:hover,.writing-row:hover{background:oklch(from var(--gold) l c h / .07)}
.class-number{font-family:var(--font-display);font-size:clamp(2rem,1.6rem + 1.2vw,2.75rem);line-height:1;letter-spacing:-.02em;color:var(--gold);padding:0 0 0 var(--space-3)}
.class-row:not(:has(.status-ready)) .class-number{color:oklch(from var(--muted) l c h / .8)}
.class-row h3{font-family:var(--font-display);font-size:clamp(1.5rem,1.3rem + .7vw,1.9rem);line-height:1.15;letter-spacing:-.015em}
.class-row .meta{letter-spacing:.04em}
.status-ready::before{content:"";display:inline-block;width:6px;height:6px;margin-right:.6em;border-radius:50%;background:var(--gold);vertical-align:.12em}
.class-row .arrow,.writing-row .arrow,.cc-kid .arrow{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;color:var(--ink);transition:background var(--t),color var(--t),border-color var(--t),rotate 320ms var(--ease-out),translate var(--t)}
.class-row:hover .arrow{background:var(--ink);color:var(--bg);border-color:var(--ink);rotate:45deg}
.writing-row:hover .arrow,.cc-kid:hover .arrow{background:var(--ink);color:var(--bg);border-color:var(--ink);translate:3px 0}
.empty{border:1px solid var(--line);background:var(--surface)}

/* ---------- 8. Class page ---------- */
.band+.detail-layout{padding-top:0}
/* classes 2 and 3: a 4:3 gilded panel under the facts, with the same quiet gold edge as the roundels (.emblem-thumb) */
.detail-art{aspect-ratio:4/3;margin-top:var(--space-8);background:var(--night);box-shadow:0 0 0 1px oklch(from var(--gold) l c h / .85),0 0 0 5px oklch(from var(--gold) l c h / .12)}
.detail-facts dl{margin:0}
.detail-facts dl>div{padding-block:var(--space-4);border-top:1px solid var(--line)}
.detail-facts dl>div:last-child{border-bottom:1px solid var(--line)}
.detail-facts dt{color:var(--gold);font-weight:700;letter-spacing:.16em}
.detail-facts dd{margin:0}
.material{position:relative;padding:clamp(var(--space-6),3vw,var(--space-10));box-shadow:var(--shadow-sm)}
.material::before{content:"";position:absolute;left:-1px;top:-1px;width:72px;height:2px;background:var(--gold)}
.material h3{font-family:var(--font-display);font-size:var(--text-xl);line-height:1.15;letter-spacing:-.015em}
.prev-next{gap:0;border-bottom:1px solid var(--line)}
.prev-next>div+div{border-left:1px solid var(--line)}
.prev-next a{padding:var(--space-8) var(--space-5);transition:background var(--t)}
.prev-next a:hover{background:oklch(from var(--gold) l c h / .07)}
.prev-next small{letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.prev-next a>span{font-family:var(--font-display);font-size:var(--text-xl);line-height:1.15;letter-spacing:-.015em}
.prev-next a:hover span{text-decoration:none}

/* ---------- 9. Slide viewer ---------- */
.viewer-heading h1{font-size:var(--text-2xl);max-width:24ch}
.slide-viewer{padding:clamp(var(--space-4),2vw,var(--space-8));background:var(--night);border-color:var(--night-line);box-shadow:var(--shadow-lg)}
.slide-stage{background:var(--stage);box-shadow:0 0 0 1px oklch(80% .1 85 / .22)}
/* Several slide exports end in a one-pixel pale column on the right; on the dark stage it reads as a stray line.
   Trim two source pixels (0.13% of the width) and, when expanded, let the image box hug the slide so the trim still lands on its edge. */
#slide-image{clip-path:inset(0 .13% 0 0)}
.is-expanded #slide-image{width:auto;max-width:100%}
#slide-number{background:var(--night-2);border-color:var(--night-line);color:var(--night-ink)}
#slide-loading{background:var(--night-2);color:var(--night-ink)}
.viewer-position{color:var(--leaf);letter-spacing:.16em;text-transform:uppercase;font-size:var(--text-xs)}
.thumbnail-strip button{background:var(--night-2);color:var(--night-ink);transition:border-color var(--t),background var(--t)}
.thumbnail-strip button:hover{background:var(--night-3)}
.thumbnail-strip button[aria-current="true"]{border-color:var(--leaf)}
.slide-viewer summary{letter-spacing:.04em;transition:color var(--t)}
.slide-viewer summary:hover{color:var(--leaf)}
.slide-viewer.is-expanded{background:var(--night)}

/* ---------- 10. Poetry & Stories ---------- */
.writings-head{display:block;padding-bottom:var(--space-6)}
.year-group{grid-template-columns:minmax(120px,220px) minmax(0,1fr)}
.year{font-size:clamp(2.5rem,1.8rem + 2.4vw,4.25rem);line-height:1;letter-spacing:-.03em;padding-top:var(--space-6)}
.writing-row{position:relative;grid-template-columns:minmax(0,1fr) 44px;padding:var(--space-5) var(--space-4) var(--space-5) var(--space-3);transition:background var(--t)}
.writing-row h3{font-size:clamp(1.5rem,1.3rem + .6vw,1.8rem);line-height:1.15;letter-spacing:-.015em}
/* a row whose piece has an emblem (art.js, 'w-' + slug) starts with it, as the class rows do */
.writing-row.has-art{grid-template-columns:64px minmax(0,1fr) 44px}
.writing-row.has-art .emblem-thumb{grid-column:1;grid-row:1/span 2;align-self:center}
.writing-row.has-art h3,.writing-row.has-art .meta{grid-column:2}
.writing-row.has-art .arrow{grid-column:3}
/* Beside an emblem the kind, date and reading time stop fitting on one line below about 744px. From there down the reading
   time always takes the second line, so every row wraps the same way instead of some rows wrapping and others not. */
@media (max-width:743px){
 .writing-row.has-art .meta{row-gap:2px}
 .writing-row.has-art .meta>span:last-child{flex-basis:100%}
}
.reading{position:relative;max-width:780px;margin-bottom:var(--space-12);padding:clamp(var(--space-8),6vw,var(--space-20)) clamp(var(--space-6),6vw,var(--space-20));background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-md)}
.reading header{text-align:center;padding-bottom:0;margin-bottom:var(--space-12);border-bottom:0}
/* the piece's emblem: an ornament above the eyebrow, not a hero */
.reading-emblem{width:132px;margin:0 auto var(--space-8)}
.reading-emblem img{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:50%;background:var(--night);box-shadow:0 0 0 1px oklch(from var(--gold) l c h / .85),0 0 0 5px oklch(from var(--gold) l c h / .12)}
.reading header::after{content:"";display:block;width:140px;height:1px;margin:var(--space-8) auto 0;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.reading .page-title{margin-inline:auto}
.reading .content-note{margin-inline:auto;text-align:left}
.reading-poem .reading-body{width:fit-content;max-width:100%;margin-inline:auto}
.ornament{display:flex;align-items:center;justify-content:center;gap:var(--space-5);text-align:center}
.ornament::before,.ornament::after{flex:0 0 auto}
.ornament::before{content:"";width:64px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.ornament::after{letter-spacing:0;padding-right:calc(64px + var(--space-5));background:linear-gradient(270deg,transparent,var(--gold)) right center/64px 1px no-repeat}
.provenance{text-align:center}

/* ---------- 11. Trinity & Sanity ---------- */
.cc-layout{grid-template-columns:290px minmax(0,1fr);gap:clamp(var(--space-8),5vw,var(--space-16))}
.cc-side{padding:var(--space-2) var(--space-4) var(--space-4);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.cc-map-toggle summary{letter-spacing:.2em}
.cc-map a{border-radius:var(--radius-sm);transition:background var(--t),color var(--t)}
.cc-map a[aria-current="page"]{background:var(--night);color:var(--night-ink);box-shadow:none;text-decoration:none}
[data-theme="dark"] .cc-map a[aria-current="page"]{background:var(--leaf);color:var(--night)}
.cc-map a.cc-map-root[aria-current="page"]{color:var(--night-ink)!important}
[data-theme="dark"] .cc-map a.cc-map-root[aria-current="page"]{color:var(--night)!important}
.cc-map-root{letter-spacing:.01em}
.cc-body>.cc-h:not(:first-child){padding-top:var(--space-10);border-top:1px solid var(--line)}
.cc-h{letter-spacing:-.02em}
.cc-quote{border-left:1px solid var(--gold);padding:var(--space-2) 0 var(--space-2) var(--space-8);font-size:clamp(1.3rem,1.15rem + .6vw,1.65rem);line-height:1.4;letter-spacing:-.005em}
.cc-figure a{display:block}
.cc-figure img,.cc-figs img{box-shadow:var(--shadow-sm);cursor:zoom-in;transition:box-shadow var(--t),transform var(--t)}
.cc-figure a:hover img{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
/* the plate: a midnight image on a midnight matte with a gold hairline, in both appearances */
.cc-plate{max-width:900px;margin-bottom:var(--space-6);padding:clamp(var(--space-3),2.4vw,var(--space-8));background:var(--night);box-shadow:inset 0 0 0 1px var(--night-line),var(--shadow-md)}
.cc-plate img{border:0;background:none;box-shadow:none}
.cc-plate a:hover img{box-shadow:none;transform:none}
.cc-plate a:focus-visible{outline:2px solid var(--leaf);outline-offset:3px}
.cc-ext{position:relative;max-width:620px;padding:var(--space-6) var(--space-8);background:var(--surface);box-shadow:var(--shadow-sm);transition:transform var(--t),box-shadow var(--t),border-color var(--t)}
.cc-ext:hover{background:var(--surface);transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:oklch(from var(--gold) l c h / .7)}
.cc-ext strong{font-family:var(--font-display);font-weight:500;font-size:var(--text-xl);line-height:1.2;letter-spacing:-.015em}
.cc-excerpt{box-shadow:var(--shadow-sm);transition:box-shadow var(--t)}
.cc-excerpt[open],.cc-excerpt:hover{box-shadow:var(--shadow-md)}
.cc-kids .eyebrow{font-family:var(--font-body);font-weight:700;line-height:1.6;letter-spacing:.2em}
.cc-kid-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--space-5)}
.cc-kid{min-height:150px;padding:var(--space-6) var(--space-6) var(--space-16);box-shadow:var(--shadow-sm);transition:transform var(--t),box-shadow var(--t),border-color var(--t)}
.cc-kid:hover{background:var(--surface);transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:oklch(from var(--gold) l c h / .7)}
.cc-kid strong{font-size:clamp(1.5rem,1.3rem + .5vw,1.75rem);line-height:1.15;letter-spacing:-.015em}
.cc-kid .arrow{top:auto;right:var(--space-5);bottom:var(--space-5)}
.cc-kid .emblem-thumb{width:60px;height:60px;margin-bottom:var(--space-4)}
.cc-tri{box-shadow:var(--shadow-sm)}
.cc-tri-head{background:var(--night)}
[data-theme="dark"] .cc-tri-head{background:var(--night)}
.cc-covers img{transition:transform var(--t)}

/* ---------- 11b. Character star chart ---------- */
/* A night-sky panel that bleeds to the card edges; drawn by ccStar() and laid out by ccStarFit() in custodiet.js. */
.cc-sheet{--sc-magenta:oklch(74% .17 345);--sc-green:oklch(80% .14 155);--sc-blue:oklch(76% .12 252);--sc-orange:oklch(73% .18 42);--sc-axis:var(--leaf)}
.hue-magenta{--h:var(--sc-magenta)}.hue-green{--h:var(--sc-green)}.hue-blue{--h:var(--sc-blue)}.hue-orange{--h:var(--sc-orange)}.hue-axis{--h:var(--sc-axis)}
.cc-star-wrap{margin-inline:calc(clamp(var(--space-6),3vw,var(--space-10)) * -1);border:0;border-block:1px solid var(--night-line);background:var(--night)}
/* The chart is drawn 900px wide at full size. In a narrower card it starts fitted to the width; ccStarZoom() in custodiet.js
   shows the button (.cc-star-tools) and switches to the full-size scrolling view (.zoomed) and back. */
.cc-star-svg{display:block;width:100%;height:auto;font-family:var(--font-body)}
.cc-star-wrap.zoomed .cc-star-svg{min-width:900px}
@media(min-width:1360px){.cc-star-wrap.zoomed .cc-star-svg{min-width:0}}
.cc-star-wrap.can-zoom:not(.zoomed){cursor:zoom-in}
.cc-star-tools{display:flex;justify-content:flex-end;margin-bottom:var(--space-3)}
.cc-star-tools[hidden]{display:none}
.cc-star-zoom{min-height:44px;padding:var(--space-2) var(--space-5);border:1px solid var(--ink);background:transparent;color:var(--ink);font-size:var(--text-sm);font-weight:500;letter-spacing:.04em;transition:background var(--t),color var(--t)}
.cc-star-zoom:hover{background:var(--ink);color:var(--bg)}
.cc-star-svg .sky{fill:var(--night)}
.cc-star-svg stop{stop-color:var(--h)}
.cc-star-svg .dust{fill:var(--night-ink)}
.cc-star-svg .ring,.cc-star-svg .axis,.cc-star-svg .diag,.cc-star-svg .core-ring{fill:none;stroke:var(--leaf)}
.cc-star-svg .ring{stroke-opacity:.26;stroke-dasharray:.1 6;stroke-linecap:round;stroke-width:1.2}
.cc-star-svg .axis{stroke-opacity:.28;stroke-width:.8}
.cc-star-svg .diag{stroke-opacity:.24;stroke-width:.8;stroke-dasharray:2 7}
.cc-star-svg .core-ring{stroke-opacity:.7;stroke-width:.8}
.cc-star-svg .link{stroke:var(--leaf);stroke-opacity:.3;stroke-width:.8}
.cc-star-svg .link.arm{stroke-opacity:.8;stroke-width:1}
.cc-star-svg .spark{fill:var(--leaf)}
.cc-star-svg .spark.dim{opacity:.55}
.cc-star-svg .spark.tint,.cc-star-svg .dot{fill:var(--h)}
.cc-star-svg .lab{fill:var(--night-ink);font-size:14px;font-weight:500;paint-order:stroke;stroke:var(--night);stroke-width:3.5px;stroke-linejoin:round}
.cc-star-svg .lab.b{font-variant-caps:small-caps;font-weight:700;font-size:15px;letter-spacing:.05em}
.cc-star-svg .lab.hub{fill:var(--leaf);font-size:17.5px;letter-spacing:.14em}
.cc-star-svg .lab.core{fill:var(--leaf);font-family:var(--font-display);font-weight:500;font-size:30px;letter-spacing:.06em}
.cc-star-legend{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-8);margin:0 0 var(--space-6);padding:0;list-style:none;font-size:var(--text-xs);font-weight:700;letter-spacing:.18em}
.cc-star-legend li::before{content:"";display:inline-block;width:.9em;height:.9em;margin-right:.7em;vertical-align:-.08em;background:oklch(from var(--h) calc(l - .22) c h);-webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat}
[data-theme="dark"] .cc-star-legend li::before{background:var(--h)}

/* ---------- 12. Contact ---------- */
.contact-card{position:relative;padding:clamp(var(--space-6),3vw,var(--space-12));box-shadow:var(--shadow-md)}
.contact-forum{isolation:isolate;overflow:hidden;background:var(--night);border-color:var(--night)}
.contact-forum::before{content:"";position:absolute;z-index:-1;right:-40%;bottom:-48%;width:120%;aspect-ratio:1;background:url(./assets/rays.svg) center/contain no-repeat;opacity:.4;pointer-events:none}
.contact-forum .hint a,.contact-forum p a:not(.primary){color:var(--leaf)}
.contact-form input,.contact-form textarea{transition:border-color var(--t),box-shadow var(--t)}
.contact-form input:hover,.contact-form textarea:hover{border-color:oklch(from var(--ink) l c h / .4)}
.contact-form input:focus-visible,.contact-form textarea:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-color:var(--gold)}

/* ---------- 13. Other pages ---------- */
.reserved .number{color:var(--gold)}
.credits{padding-top:0}
.credits h2{letter-spacing:-.02em}

/* ---------- 14. Footer ---------- */
.site-footer{position:relative;isolation:isolate;overflow:clip;max-width:none;grid-template-columns:1.3fr 1fr auto;padding:clamp(var(--space-12),6vw,var(--space-20)) var(--band) var(--space-12);background:var(--night);border-top:2px dotted oklch(80% .1 85 / .5);color:var(--night-muted)}
.site-footer::before{content:"";position:absolute;z-index:-1;inset:0;background:url(./assets/night-sky.svg) 30% 40%/1200px 800px;opacity:.32;-webkit-mask:linear-gradient(90deg,#000,transparent 85%);mask:linear-gradient(90deg,#000,transparent 85%);pointer-events:none}
.site-footer>div:first-child::before{content:"";display:block;width:76px;height:76px;margin-bottom:var(--space-5);border-radius:50%;background:url(./assets/logo-seal-192.webp) center/contain no-repeat;box-shadow:0 0 0 1px var(--night-line),0 0 0 7px oklch(80% .1 85 / .08)}
.footer-name{font-family:var(--font-display);font-size:var(--text-xl);letter-spacing:-.01em}
#footer-tagline{color:var(--leaf);letter-spacing:.2em;text-transform:uppercase}
.footer-links a{color:oklch(96% .016 88 / .86)}
.footer-links a:hover{color:var(--leaf);text-decoration:none}
.footer-note{letter-spacing:.06em}

/* ---------- 15. Motion ---------- */
@keyframes cc-fade{from{opacity:0}}
@keyframes cc-rise{from{opacity:0;translate:0 14px}}
@keyframes cc-unveil{from{opacity:0;clip-path:inset(100% 0 0 0 round 999px 999px 0 0)}to{opacity:1;clip-path:inset(0 round 999px 999px 0 0)}}
@keyframes cc-rays-in{from{opacity:0;scale:.86}}
@keyframes cc-bloom{from{opacity:0;scale:.9}}
@keyframes cc-sway{from{rotate:-3.5deg}to{rotate:3.5deg}}
@keyframes cc-twinkle{from{opacity:.36}to{opacity:.6}}
@media(prefers-reduced-motion:no-preference){
 main>*{animation:cc-fade 360ms var(--ease-out) backwards}
 .hero>div>*{animation:cc-rise 700ms var(--ease-out) backwards}
 .hero>div>:nth-child(1){animation-delay:60ms}
 .hero>div>:nth-child(2){animation-delay:140ms}
 .hero>div>:nth-child(3){animation-delay:260ms}
 .hero>div>:nth-child(4){animation-delay:340ms}
 .hero>div>:nth-child(5){animation-delay:420ms}
 .hero .arch img{animation:cc-unveil 1100ms 120ms var(--ease-out) backwards}
 .hero .arch::before,.band .arch::before,.band .roundel::before{animation:cc-rays-in 1600ms 250ms var(--ease-out) backwards,cc-sway 18s 1850ms ease-in-out infinite alternate}
 .hero::after,.band::after{animation:cc-twinkle 7s ease-in-out infinite alternate}
 .band-text>*{animation:cc-rise 700ms var(--ease-out) backwards}
 .band-text>:nth-child(2){animation-delay:60ms}
 .band-text>:nth-child(3){animation-delay:140ms}
 .band-text>:nth-child(n+4){animation-delay:240ms}
 .band .arch img{animation:cc-unveil 1100ms 120ms var(--ease-out) backwards}
 .band .roundel img{animation:cc-bloom 900ms 120ms var(--ease-out) backwards}
 @supports (animation-timeline:view()){
  .class-row,.writing-row,.year,.path,.material,.cc-kid,.cc-ext,.cc-figure,.cc-tri,.cc-excerpt,.contact-card,.section-heading,.prev-next{animation:cc-fade linear both;animation-timeline:view();animation-range:entry 0px entry 110px}
 }
}

/* ---------- 16. Responsive ---------- */
@media(min-width:1001px){
 .catalog-aside,.cc-side{top:calc(var(--header-h) + var(--space-6))}
 .cc-side{max-height:calc(100vh - var(--header-h) - var(--space-12))}
 .year{top:calc(var(--header-h) + var(--space-2))}
}
@media(max-width:1000px){
 :root{--header-h:0px}
 .site-header nav{border-top-color:var(--night-line)}
 .hero{min-height:0}
 .catalog{grid-template-columns:190px minmax(0,1fr)}
}
@media(min-width:901px){
 .cc-side{margin-bottom:var(--space-20)}
}
@media(max-width:900px){
 .hero-meta{flex-direction:column;align-items:flex-start;gap:var(--space-2)}
 .hero-meta span+span{margin-left:0;padding-left:0;border-left:0}
 .cc-layout{grid-template-columns:1fr}
 .cc-side{padding:0 var(--space-4)}
}
@media(max-width:680px){
 .site-header{padding:var(--space-3) var(--space-5)}
 .brand small{letter-spacing:.12em}
 .site-header nav{justify-content:center;gap:0 var(--space-3);flex-wrap:wrap;padding-top:var(--space-1)}
 .site-header nav a{min-width:44px;text-align:center}
 .cc-plate{padding:0}
 .site-header nav a::after{bottom:8px}
 .theme-toggle{padding:var(--space-2)}
 .breadcrumb{margin-bottom:var(--space-6);font-size:var(--text-sm);letter-spacing:0;text-transform:none}
 .hero{grid-template-columns:1fr;padding-block:var(--space-10) var(--space-16);gap:var(--space-12)}
 .hero h1{font-size:clamp(2.6rem,1rem + 8vw,3.4rem)}
 .hero .primary{width:100%;margin-top:var(--space-8)}
 .hero-meta{margin-top:var(--space-8)}
 .hero .arch{justify-self:center;width:min(100%,340px);padding:12px 12px 0}
 .section-heading{margin-top:var(--space-16)}
 .path,.path:nth-child(even){grid-template-columns:1fr;grid-template-rows:none}
 .path>*,.path:nth-child(even)>*{grid-column:1}
 .path>.arch,.path:nth-child(even)>.arch{grid-column:1;grid-row:auto;order:-1;justify-self:center;width:min(78%,260px);margin-bottom:var(--space-8)}
 .path h3{font-size:clamp(2.75rem,1.6rem + 6vw,3.5rem)}
 .path-desc{font-size:var(--text-base)}
 .band{grid-template-columns:1fr;padding-block:0 var(--space-12);margin-bottom:var(--space-8)}
 .band .breadcrumb{margin-bottom:var(--space-5)}
 .band .page-title{font-size:clamp(2.5rem,1rem + 7.4vw,3.4rem)}
 .band .arch{justify-self:center;width:min(74%,260px)}
 .band .roundel{justify-self:center;width:min(62%,220px)}
 .catalog{grid-template-columns:1fr}
 .filter span{min-width:0;padding:1px 6px}
 .writings-filters .filter{gap:var(--space-2);padding-inline:var(--space-3)}
 .class-row{grid-template-columns:56px minmax(0,1fr) 36px;gap:0 var(--space-4);padding-right:0}
 .class-row .emblem-thumb{grid-column:1;grid-row:1/3;width:56px;height:56px}
 .class-number{grid-column:2;grid-row:1;font-size:1.125rem;padding-left:0}
 .class-row>div{grid-column:2;grid-row:2}
 .class-row>.arrow{grid-column:3;grid-row:1/3}
 .class-row h3{font-size:1.375rem}
 .class-row .arrow,.writing-row .arrow{width:36px;height:36px}
 .detail-art{max-width:340px}
 .detail-facts dl{gap:0 var(--space-4)}
 .prev-next a{padding:var(--space-6) var(--space-3)}
 .prev-next>div:first-child a{padding-left:0}
 .prev-next>.next a{padding-right:0}
 .prev-next a>span{font-size:var(--text-lg)}
 .prev-next small{letter-spacing:.06em}
 .year-group{grid-template-columns:1fr}
 .year{font-size:2.5rem}
 .writing-row{grid-template-columns:minmax(0,1fr) 36px;padding-inline:0}
 .writing-row.has-art{grid-template-columns:56px minmax(0,1fr) 36px;gap:var(--space-2) var(--space-4)}
 .writing-row.has-art .emblem-thumb{width:56px;height:56px}
 .reading-emblem{width:104px;margin-bottom:var(--space-6)}
 .reading{padding:var(--space-8) var(--gutter);margin-inline:calc(var(--gutter) * -1);border-inline:0}
 .cc-quote{padding-left:var(--space-5)}
 .cc-kid{min-height:0}
 .site-footer{grid-template-columns:1fr 1fr;padding:var(--space-12) var(--space-5) var(--space-10)}
}

/* ---------- 16b. Phone header ---------- */
/* 680px and narrower: one row. Seal and wordmark on the left; on the right the appearance toggle as an icon button and a
   Menu button that discloses the navigation as a panel laid over the page, so the header keeps its height and nothing
   below it moves. app.js adds .nav-js and collapses the links; without the script they stay open as a second row. */
.nav-toggle{display:none}
@media(max-width:680px){
 .site-header{min-height:60px;gap:var(--space-2);padding:var(--space-2) var(--space-4)}
 .brand{gap:var(--space-3);min-width:0;min-height:44px}
 .brand-mark{width:40px;height:40px}
 .brand>span{font-size:clamp(1.0625rem,.35rem + 3.6vw,1.5rem)}
 .brand small{font-size:clamp(.5625rem,.3rem + 1.35vw,.75rem);letter-spacing:.12em;margin-top:2px}
 .theme-toggle{order:2;flex:none;display:grid;place-items:center;width:44px;height:44px;max-width:none;padding:0}
 .theme-toggle::before{content:"";width:20px;height:20px;background:currentColor;-webkit-mask:var(--moon) center/contain no-repeat;mask:var(--moon) center/contain no-repeat}
 [data-theme="dark"] .theme-toggle::before{-webkit-mask-image:var(--sun);mask-image:var(--sun)}
 .theme-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .nav-js .site-header{flex-wrap:nowrap}
 .nav-js .nav-toggle{order:3;flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 var(--space-3);border:1px solid var(--night-line);background:transparent;color:inherit;font-size:var(--text-xs);font-weight:500;letter-spacing:.08em;transition:background var(--t),color var(--t),border-color var(--t)}
 .nav-js .nav-toggle[aria-expanded="true"]{background:var(--leaf);color:var(--night);border-color:var(--leaf)}
 .nav-js .site-header nav{position:absolute;top:100%;left:0;right:0;order:0;flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;gap:0;padding:var(--space-1) var(--space-4) var(--space-3);background:var(--night);border-top:1px solid var(--night-line);border-bottom:1px solid var(--night-line);box-shadow:var(--shadow-lg)}
 .nav-js .nav-toggle[aria-expanded="false"]+nav{display:none}
 .nav-js .site-header nav a{display:flex;align-items:center;min-height:48px;padding:0 var(--space-2);font-size:var(--text-base);text-align:left}
 .nav-js .site-header nav a+a{border-top:1px solid var(--night-line)}
 .nav-js .site-header nav a::after{display:none}
 .nav-js .site-header nav a[aria-current="page"]::before{content:"";flex:none;width:.7em;height:.7em;margin-right:.7em;background:currentColor;-webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat}
 .nav-js .site-header nav .nav-external span[aria-hidden]{margin-left:.4em}
}
@media(max-width:680px) and (prefers-reduced-motion:no-preference){
 .nav-js .site-header nav{animation:cc-fade 160ms var(--ease-out) backwards}
}

/* ---------- 17. Print ---------- */
/* Paper mode: browsers drop backgrounds when printing, so the night surfaces switch to dark ink on white. */
@media print{
 :root,[data-theme="light"],[data-theme="dark"]{--night:#fff;--night-2:#fff;--night-3:#f3f1ec;--night-ink:#14213a;--night-muted:#3d4657;--night-line:#b9b3a4;--leaf:#6d5417;--stage:#fff}
 *,*::before,*::after{animation:none!important;transition:none!important}
 .site-header{position:static}
 .site-header nav,.theme-toggle,.skip{display:none}
 .nav-toggle{display:none!important}
 .hero::before,.hero::after,.band::before,.band::after,.arch::before,.roundel::before,.site-footer::before,.path::before,.contact-forum::before{display:none}
 .band{border-bottom:1px solid var(--night-line)}
 .band .arch,.path>.arch{width:170px}
 .band .roundel{width:150px}
 .cc-star-wrap{overflow:visible}
 .cc-star-wrap.zoomed .cc-star-svg{min-width:0}
 .cc-star-tools{display:none}
 .reading-emblem{display:none}
 .cc-plate{padding:0;box-shadow:none}
 .footer-links a{color:inherit}
 .path,.material,.reading,.cc-side,.contact-card,.cc-kid,.cc-ext,.slide-viewer{box-shadow:none}
}

/* ---------- 15. The Star Isle: entry band and route shell ---------- */
/* Markup comes from islandBand() in island-entry.js. Text on the night ground, the map bleeding in from the right. */
.isle-band{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,11fr) minmax(0,13fr);min-height:clamp(400px,34vw,500px);margin-bottom:clamp(var(--space-16),9vw,var(--space-32));background:var(--night);border:1px solid var(--night);box-shadow:var(--shadow-md);transition:transform var(--t),box-shadow var(--t),border-color var(--t)}
.isle-band picture{position:absolute;z-index:-2;inset:0 0 0 30%}
.isle-band img{width:100%;height:100%;object-fit:cover;object-position:50% 46%;transition:scale 900ms var(--ease-out)}
.isle-band::before{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,var(--night) 31%,oklch(from var(--night) l c h / .9) 40%,oklch(from var(--night) l c h / .35) 54%,transparent 66%);pointer-events:none}
.isle-band-text{grid-column:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-width:0;padding:clamp(var(--space-8),5vw,var(--space-16))}
.isle-band .eyebrow{color:var(--gold)}
.isle-band .eyebrow::before{content:"";display:inline-block;width:.85em;height:.85em;margin-right:.75em;vertical-align:-.08em;background:currentColor;-webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat}
.isle-band h2{font-size:clamp(3rem,2rem + 3.6vw,5.5rem);line-height:.98;letter-spacing:-.035em;margin-block:var(--space-6)}
.isle-lede{font-size:var(--text-lg);line-height:1.5;color:var(--muted);max-width:34ch}
.isle-band .primary{margin-top:var(--space-8);min-height:56px;padding-inline:var(--space-8)}
.isle-band .primary::after{content:"";position:absolute;inset:0}
.isle-band:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:oklch(from var(--gold) l c h / .7)}
.isle-band:hover img{scale:1.035}
.isle-band:hover .arrow{translate:6px 0}
[data-theme="dark"] .isle-band{border-color:var(--night-line)}
/* On the home page the band follows the two curriculum cards at the same spacing as between them. */
.wrap>section+.isle-band{margin-top:calc(var(--space-8) - clamp(var(--space-16),9vw,var(--space-32)))}
/* In-page version inside Trinity & Sanity pages */
.isle-band.compact{min-height:300px;margin-block:var(--space-8);grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.isle-band.compact .isle-band-text{padding:var(--space-8)}
.isle-band.compact h2{font-size:clamp(2.25rem,1.6rem + 1.8vw,3.25rem);margin-block:var(--space-4)}
.isle-band.compact .isle-lede{font-size:var(--text-base)}
.isle-band.compact .primary{margin-top:var(--space-6);min-height:48px;padding-inline:var(--space-6)}
@media (max-width:680px){
 .isle-band,.isle-band.compact{grid-template-columns:1fr;min-height:0}
 .isle-band picture{position:relative;inset:auto;z-index:0;display:block;aspect-ratio:1}
 .isle-band::before{display:none}
 .isle-band-text,.isle-band.compact .isle-band-text{padding:var(--space-6) var(--space-6) var(--space-8)}
 .isle-band .primary{width:100%}
}
/* The map route fills the viewport under the header; the footer is not shown there. */
.island-open .site-footer{display:none}
.island-open main{overflow:visible}
/* The viewer sizes itself from the measured header, so the root sets no height of its own. */
.island-root{background:#070e2a;color:var(--night-ink)}
.island-wait{display:grid;place-items:center;min-height:min(520px,70dvh);margin:0;font-size:var(--text-sm);letter-spacing:.2em;text-transform:uppercase;color:var(--night-muted)}
@media (prefers-reduced-motion:reduce){.isle-band,.isle-band img{transition:none}.isle-band:hover{transform:none}.isle-band:hover img{scale:1}}
@media print{.isle-band{display:none}}