/* Layout redesign (2026-09-25): styles for the art page type package.

   Island Night (2026-09-26): the scenery drawn by docs/assets/art/island-core.js (home hero) and
   island-sides.js (the gutters beside the column on wide screens), fetched by
   docs/javascripts/layout-art.js. The light scheme shows dusk (19:00), the dark scheme night
   (19:23); every colour below is a token, so the scheme toggle changes the hour instantly and the
   drawing never needs rebuilding. The gutters are a pale print of the same view in the light scheme
   (paler still on pages without the hero) and a night view in the dark one.
   Motion: on the home page only, the hero fades in and one signal crosses the network, once, all
   over within about 3 seconds; then a still frame. On desktop the hero is the bold one (taller, the
   words in a column, a frigatebird in the sky: layout-home.css and island-core.js), and in the same
   pass the bird glides a few pixels into place. Otherwise only opacity animates. Reduced motion
   shows the still frame at once, and a hidden tab holds the pass until it is seen. The gutters
   never move. */

/* --- The hours ------------------------------------------------------------ */
.isl {
  /* DUSK, the hero in the light scheme: the brightest afterglow sits low and right of the words, and
     white text keeps at least 4.5:1 against the sky behind every line at every width (checked
     against the rendered drawing, without the text shadow). */
  --isl-sky0: #0b2946; --isl-sky1: #0f4570; --isl-sky2: #245d86; --isl-sky3: #6f94b0; --isl-hz: #b9c4cc;
  --isl-g1: #ffdca6; --isl-g2: #f3a77a; --isl-g3: #a67fa3;
  --isl-sea0: #5f7f99; --isl-sea1: #24506f; --isl-sea2: #0d2f4d; --isl-haze: #d4dbe2;
  --isl-isl: #4d6e8d; --isl-far: #173350; --isl-near: #0a1f35;
  --isl-rip: #b8cde0; --isl-rip-a: 0.2; --isl-hzline: rgba(255, 236, 214, 0.35);
  --isl-moon: #fff4d6; --isl-earth: rgba(186, 204, 228, 0.14); --isl-planet: #fffaf0; --isl-star: #ffffff;
  --isl-net: rgba(205, 224, 248, 0.34); --isl-node: rgba(219, 232, 250, 0.72); --isl-pulse: #ffd89c;
  --isl-rim: #ffcf9c; --isl-bird: #0b2138;
}

[data-md-color-scheme="slate"] .isl:where(:not([data-sky])), .isl[data-sky="night"] {
  /* NIGHT, the hero in the dark scheme: the afterglow nearly gone, many more stars out. */
  --isl-sky0: #030a17; --isl-sky1: #071830; --isl-sky2: #0c2440; --isl-sky3: #142f4c; --isl-hz: #203853;
  --isl-g1: #ffb574; --isl-g2: #b85e50; --isl-g3: #3e376f;
  --isl-sea0: #1b3653; --isl-sea1: #0a1c32; --isl-sea2: #030b16; --isl-haze: #3a5372;
  --isl-isl: #122841; --isl-far: #0b1a2e; --isl-near: #040b16;
  --isl-rip: #4e79a3; --isl-rip-a: 0.28; --isl-hzline: rgba(255, 200, 150, 0.22);
  --isl-moon: #fff2d0; --isl-earth: rgba(160, 182, 222, 0.18); --isl-planet: #fff8ea;
  --isl-net: rgba(195, 216, 243, 0.5); --isl-node: rgba(219, 232, 250, 0.88); --isl-pulse: #ffd08a;
  --isl-rim: #ffb27a; --isl-bird: #020812;
}

/* The gutters in the dark scheme: the same night, a little quieter than the hero. */
[data-md-color-scheme="slate"] .isl-side {
  --isl-sky0: #050c19; --isl-sky1: #081629; --isl-sky2: #0c213b; --isl-sky3: #152f4d; --isl-hz: #223e5c;
  --isl-sea0: #142c46; --isl-sea1: #0b1a2d; --isl-sea2: #08121f; --isl-haze: #2f4764;
  --isl-isl: #10233a; --isl-far: #0b1829; --isl-near: #060d18; --isl-rip-a: 0.2;
}

/* The gutters in the light scheme: a pale print of the view, no stars, so a white page stays light. */
[data-md-color-scheme="default"] .isl-side {
  --isl-sky0: #e8eef5; --isl-sky1: #edf2f7; --isl-sky2: #f1f4f8; --isl-sky3: #f4f3f2; --isl-hz: #efe9e3;
  --isl-sea0: #e2e9f0; --isl-sea1: #e8eef3; --isl-sea2: #f6f8fa; --isl-haze: #f6f1ec;
  --isl-isl: #d3dde7; --isl-far: #cbd6e1; --isl-near: #bfcbd8;
  --isl-rip: #b6c6d6; --isl-rip-a: 0.3; --isl-hzline: rgba(110, 135, 160, 0.3);
}

/* Paler still on pages without the hero, where the gutters sit beside reading text. */
[data-md-color-scheme="default"] .isl-sides.isl-inner .isl-side {
  --isl-sky0: #f0f4f8; --isl-sky1: #f2f5f9; --isl-sky2: #f4f7f9; --isl-sky3: #f7f6f5; --isl-hz: #f3efeb;
  --isl-sea0: #ecf0f4; --isl-sea1: #eff3f6; --isl-sea2: #f8f9fb; --isl-haze: #f8f5f2;
  --isl-isl: #e4e9ef; --isl-far: #e1e7ee; --isl-near: #dae2ea;
  --isl-rip-a: 0.2; --isl-hzline: rgba(110, 135, 160, 0.2);
}

/* Night's layers (its stars, Milky Way and Moon) show in a picture whose clock says Night, and in the dark
   scheme's gutters, which have no clock; Dusk's show otherwise. */
.isl .isl-n { display: none; }
[data-md-color-scheme="slate"] .isl:where(:not([data-sky])) .isl-n, .isl[data-sky="night"] .isl-n { display: inline; }
[data-md-color-scheme="slate"] .isl:where(:not([data-sky])) .isl-d, .isl[data-sky="night"] .isl-d { display: none; }
/* Night is dark (owner, 2026-09-29: "night should be dark"; "typically night shortly after sunset there is
   no glow at all"): from 21:00 there is no afterglow over the sunset point, no reflection of it, no glitter
   on the water and no rim of light on the crests, in every picture, the homepage hero and the dark
   scheme's gutters; the stars, the Milky Way, the Moon and the lights remain. (Until then these faded
   only after midnight, marked data-late, which is retired.)
   After the rule above, which shows Night's layers, since the glow carries both classes. */
.isl[data-sky="night"] :is(.isl-nglow, .isl-aglow, .s-rim),
[data-md-color-scheme="slate"] .isl:where(:not([data-sky])) :is(.isl-nglow, .isl-aglow, .s-rim) { display: none; }
/* Dusk is nearly dark, with a subtle glow on the horizon that tells it from Night (owner, 2026-09-29: "dusk
   should be approaching dark with a subtle glow on the horizon that makes it clearly distinguishable from
   night"): the glow Sunset shows over the sunset point is drawn at Dusk at half strength and pressed down
   toward the horizon, its reflection with it. Sunset's own glow is unchanged. */
.isl[data-sky="dusk"] .isl-dglow { opacity: 0.5; transform: scaleY(0.55); transform-box: fill-box; transform-origin: center; }

/* THE FIVE TIMES OF DAY (owner, 2026-09-28; SPEC section 12): every picture, the homepage hero
   included, shows Dawn, Day, Sunset, Dusk or Night by the visitor's clock (its data-sky, A.pickSky in
   island-core.js), in both schemes; the scheme toggle changes only the page. Each version is one set of tokens shared by every piece: the sky's gradient, the sea, the
   land's three depths, the clouds, and the materials pieces draw with. Dawn keeps the lights on; by Day
   they are off, the warm halos and pools go (--isl-g1 clear) and windows show as glass. */
.isl .isl-a, .isl .isl-y, .isl .isl-s { display: none; }
/* SUNSET (owner, 2026-09-28: five versions): each picture's Dusk drawing a few minutes before sunset, the
   Sun just above the horizon wherever the view truly shows it (sunDisc), the sky brighter and warmer, the
   first stars not yet out; Venus and the Moon stay, the lights are coming on. Reddish throughout (owner,
   2026-09-29: "sunset consistently reddish", Dawn "consistently purplish", Night, Day and Dusk blue; then,
   from a mock-up beside Dawn, "yes to the redder sunset"): wine overhead, crimson through the middle,
   red-orange at the horizon, so it is never taken for Dawn's violet and pink. */
.isl[data-sky="sunset"] .isl-s { display: inline; }
.isl[data-sky="sunset"] .isl-dstars { display: none; }
.isl[data-sky="sunset"] {
  --isl-sky0: #2e2150; --isl-sky1: #6a2c4e; --isl-sky2: #b8434a; --isl-sky3: #ec6a3c; --isl-hz: #ff9152;
  --isl-g1: #ffc27e; --isl-g2: #f0603e; --isl-g3: #a8395a;
  --isl-sea0: #c86a55; --isl-sea1: #4a3f6e; --isl-sea2: #22284f; --isl-haze: #f0a07c;
  --isl-isl: #4d3558; --isl-far: #24466b; --isl-near: #14304f;
}
/* DUSK (owner, 2026-09-29: "dusk should be a little darker across"): from 19:00 the Sun is already well
   below the horizon in Antigua and the last glow fades by about 19:30, so Dusk is nearly night: a deep
   navy sky, a low glow in the west, the land darker. The frigatebird darkens with it, so it still reads
   against the sky. */
.isl[data-sky="dusk"] {
  /* nearer dark again (owner, 2026-09-29, above): the horizon a dim blue, the glow deeper and redder */
  --isl-sky0: #05172b; --isl-sky1: #092845; --isl-sky2: #10365a; --isl-sky3: #22486b; --isl-hz: #3d5c7a;
  --isl-g1: #e6ab7c; --isl-g2: #b0634f; --isl-g3: #413a68; --isl-rim: #c99774;
  --isl-sea0: #274660; --isl-sea1: #12314b; --isl-sea2: #061b31; --isl-haze: #3f5a76;
  --isl-isl: #15293f; --isl-far: #0c2138; --isl-near: #05131f; --isl-bird: #020912;
}
/* DUSK's materials (art audit, 2026-10-01): the outdoor materials Dusk had shared with Sunset kept a
   near-daylight value under Dusk's nearly dark sky. Each is set 50% of the way from its Sunset value
   to its Night value; the floodlit cathedral (--isl-vcath) and every light keep theirs, and the
   interiors already have Dusk values of their own. */
.isl[data-sky="dusk"] {
  /* the campus */
  --isl-vwall: #5d6b7d; --isl-vshade: #3a3b3c; --isl-vband: #5b4348; --isl-vroof: #6e313d;
  --isl-vroof2: #592834; --isl-vdark: #26364c; --isl-vrail: rgba(218, 226, 236, 0.43);
  /* the harbour, the bay and the town */
  --isl-vbay: #366b82; --isl-vship: #9ca8b8; --isl-vship2: #808d9e; --isl-vtown: #586678; --isl-vsand: #aba28d;
  /* sails and spinnakers */
  --isl-vsail: #bbc4d0; --isl-vsail2: #8b98a8; --isl-vspin: #9284a6; --isl-vspin2: #b6a279;
  /* lit faces, walls and risers */
  --isl-vlit: #3a526e; --isl-vwallc: #4c4d4e; --isl-vriser: #282e3a;
  /* brass and wood (the telescope) */
  --isl-vbrass: #c5a664; --isl-vbrass2: #987434; --isl-vbrass3: #56401b; --isl-vwoodc: #46382a;
  --isl-vwoodf: #3a2e22;
  /* Betty's Hope's cane and track */
  --isl-vcane: #2e4842; --isl-vtrack: #4e5758;
  /* stone */
  --isl-vstone: #6f6d68; --isl-vstrata: #54524e;
  /* the lecture screen */
  --isl-mscr: #d9e0e8;
}
.isl[data-sky="dawn"] .isl-a,
.isl[data-sky="day"] .isl-y { display: inline; }
.isl:is([data-sky="dawn"], [data-sky="day"]) .isl-d { display: none; }
.isl .st-cloud { stop-color: var(--isl-cloud, #ffffff); }
.isl .st-cloud-s { stop-color: var(--isl-cloud-s, #c9d6e0); }
/* DAWN: the Sun three degrees below the horizon behind a west-facing view, so the western sky shows
   the pink band above the Earth's blue-gray shadow; the land still dim, the lamps still lit. Purplish
   throughout (owner, 2026-09-29): violet overhead through lavender to pink at the horizon. */
.isl[data-sky="dawn"] {
  --isl-sky0: #37417a; --isl-sky1: #685f9e; --isl-sky2: #a58cbf; --isl-sky3: #d9a8c6; --isl-hz: #a898c0;
  --isl-g1: #ffd6d4; --isl-g2: #dfa0c4; --isl-g3: #9a86c4;
  --isl-sea0: #b9a2c8; --isl-sea1: #5c6a9e; --isl-sea2: #2e4070; --isl-haze: #dcc4e2;
  --isl-isl: #8a86ae; --isl-far: #434e78; --isl-near: #2a3456;
  --isl-rip: #e2dff0; --isl-rip-a: 0.28; --isl-hzline: rgba(246, 226, 240, 0.4);
  --isl-rim: #f0c4dc; --isl-bird: #1f2442;
  --isl-cloud: #f6cfe2; --isl-cloud-s: #8c88b8; --isl-gild: #f6b6cc;
  --isl-vbay: #7b88b8; --isl-vsand: #dccbd6; --isl-vwall: #d8d6ea; --isl-vrail: rgba(236, 232, 246, 0.55);
}
/* DAY: mid-morning, the Sun high behind a west-facing view: a blue sky paling to haze at the horizon,
   trade-wind cumulus, a turquoise harbour, green hills. */
.isl[data-sky="day"] {
  --isl-sky0: #3b7db6; --isl-sky1: #5c9bcb; --isl-sky2: #8fbcdc; --isl-sky3: #bad6e8; --isl-hz: #dde8ee;
  --isl-veg-d: #2d4a2f; --isl-veg-l: #86a35c; --isl-veg-t: #9a8660; --isl-vhouse: #f4f2ec; --isl-vroofg: #8a969c;
  --isl-vtree: #4b773a; --isl-vtree2: #6b8f3d; --isl-vtree3: #37602f; --isl-vtree-l: #9cbb5a; --isl-vtree-d: #1d3620; --isl-vshadow: #1d3620;
  --isl-vrock: #a47a5b; --isl-vrock-s: #6c4f3e; --isl-vshallow: #b6ece0; --isl-vroad: #dccfae;
  --isl-vdry: #b59c6b; --isl-vrockshore: #d6bd93; --isl-vriser: #9b927f; --isl-vroof: #b04a3c;
  --isl-g1: rgba(255, 255, 255, 0); --isl-g2: rgba(255, 255, 255, 0); --isl-g3: rgba(255, 255, 255, 0);
  --isl-sea0: #6fa3b8; --isl-sea1: #2f7ca1; --isl-sea2: #1e5f86; --isl-haze: #e6eff3;
  --isl-isl: #9fb5b8; --isl-far: #6a8a68; --isl-near: #45663d;
  --isl-rip: #eef7fa; --isl-rip-a: 0.35; --isl-hzline: rgba(255, 255, 255, 0.45);
  --isl-rim: #f3efdf; --isl-bird: #2a3a44; --isl-pulse: #33495a;
  --isl-cloud: #ffffff; --isl-cloud-s: #c3d0dc;
  --isl-vbay: #45bcc0; --isl-vsand: #f1e4c2; --isl-vsand-a: 0.9; --isl-vsurf: #ffffff; --isl-vsurf-a: 0.85;
  --isl-vwall: #f5f7f9; --isl-vrail: rgba(52, 62, 72, 0.6);
  --isl-vstone: #cdbfa3; --isl-vstrata: #a99c80; --isl-vtown: #d9d2c3; --isl-vdark: #3a4d5c;
  /* the campus in sunlight (the owner's photographs of AUA): cream walls, a terracotta ground floor,
     red roofs, a pale drive; the harbour town's cream houses share the wall color */
  --isl-vwallc: #efe5cf; --isl-vshade: #d3c4a6; --isl-vband: #b86a50; --isl-vroof2: #8f3a31; --isl-vdrive: #cdbf9e;
}
.isl[data-sky="day"] :is(.s-vlight, .s-vglow, .isl-vglow, .isl-vlamps, .isl-vnav-r, .isl-vnav-g, .isl-vnav-w) { display: none; }
/* Day details a piece draws only for daylight (houses where the night shows lights), and its vegetated
   land (`isl-land`) mottled with scrub, finer and fainter on the far hills. */
.isl .isl-ydet { display: none; }
.isl[data-sky="day"] .isl-ydet { display: inline; }
.isl[data-sky="day"] .isl-land.f-far { fill: var(--isl-vegf, url(#islvvegf)) var(--isl-far); }
.isl[data-sky="day"] .isl-land.f-near { fill: var(--isl-vegn, url(#islvvegn)) var(--isl-near); }
/* The homepage hero's skies (DRAFT, 2026-09-28): each version's sky deepened where the words sit, so
   white text keeps at least 4.5:1 behind every line (measured on the rendered drawing, without the
   text shadow); the network and its signal kept light on a daylight sky. */
/* The phone and tablet hero (not bold) sets its words on the horizon itself, so there each light
   version's horizon, haze and first of the sea are deepened. */
.isl.isl-hero:not(.isl-bold)[data-sky="day"] {
  --isl-sea0: #2f6f93; --isl-haze: #7fa9c4; --isl-sky3: #7fb0d4; --isl-hz: #9cc0d8;
}
.isl.isl-hero:not(.isl-bold)[data-sky="dawn"] {
  --isl-sea0: #6b6a98; --isl-haze: #9c86ae; --isl-sky3: #a886ac; --isl-hz: #827ca8;
}
.isl.isl-hero:not(.isl-bold)[data-sky="sunset"] {
  --isl-sea0: #5e4760; --isl-haze: #8f5a5e; --isl-sky3: #a8524a; --isl-hz: #a4553f;
}
.isl .isl-shade2 { display: none; }
.isl.isl-hero:is([data-sky="dawn"], [data-sky="day"], [data-sky="sunset"]) .isl-shade2 { display: inline; }
.isl.isl-hero[data-sky="day"] {
  --isl-sky0: #1d5a91; --isl-sky1: #2a68a0; --isl-sky2: #6aa3cf; --isl-sky3: #a9cde6; --isl-hz: #d9e8f0;
}
.isl.isl-hero[data-sky="dawn"] {
  --isl-sky0: #2b3166; --isl-sky1: #4b4988; --isl-sky2: #8f7cb2; --isl-sky3: #d4a4c2;
}
.isl.isl-hero[data-sky="sunset"] {
  --isl-sky0: #2a1d48; --isl-sky1: #56264a;
}
/* The homepage campus at Dawn and at Sunset (art-audit pass 4, 2026-10-01): the two had painted its walls
   and roofs in one shared set (the walls read --isl-vwallc, so Dawn's --isl-vwall never reached them),
   though the light on the front is opposite. The hero looks west, into the sunset, so the campus's front
   faces east, toward the viewer: at Dawn it faces the brightening eastern sky, so walls and roofs are
   lighter and cooler, lit by that sky; at Sunset the Sun is behind it, so the front is backlit, in a
   deeper and warmer shade. Dusk has its own set above. */
.isl.isl-hero[data-sky="dawn"] {
  --isl-vwallc: #9a95a8; --isl-vshade: #7a758e; --isl-vband: #93707d; --isl-vroof: #984a5d;
  --isl-vroof2: #7f3d51; --isl-vdark: #3d4a6c;
}
.isl.isl-hero[data-sky="sunset"] {
  --isl-vwallc: #5e5350; --isl-vshade: #483e3d; --isl-vband: #6c4847; --isl-vroof: #7c3241;
  --isl-vroof2: #652a37; --isl-vdark: #2e3a50;
}
.isl .isl-veg-bf { fill: var(--isl-far); }
.isl .isl-veg-bn { fill: var(--isl-near); }
.isl .isl-veg-d { fill: var(--isl-veg-d, #2c4a2c); }
.isl .isl-veg-l { fill: var(--isl-veg-l, #7a9a52); }
.isl .isl-veg-t { fill: var(--isl-veg-t, #8f7f5a); }
.isl .isl-vhouse { fill: var(--isl-vhouse, #f2f0ea); }
.isl .isl-vroofg { fill: var(--isl-vroofg, #7d8a90); }
.isl[data-sky="day"] [fill*="lamp)"] { display: none; }
/* Dawn's first light on the hilltops (isl-adet). */
.isl .isl-adet { display: none; }
.isl[data-sky="dawn"] .isl-adet { display: inline; }
.isl .st-gild { stop-color: var(--isl-gild, #ffbe8c); }
.isl .isl-vgildline { stroke: var(--isl-gild, #ffbe8c); stroke-opacity: 0.85; fill: none; stroke-linecap: round; }
.isl .isl-vsunpath { stroke: #ffe6ad; fill: none; stroke-linecap: round; }
.isl .isl-vsunpath2 { stroke: #ffbd72; fill: none; stroke-linecap: round; }
/* Day's features: trees, rock, shallows, the road (isl-ydet in each piece). */
.isl .isl-vtree { fill: var(--isl-vtree, #4d7a3a); }
.isl .isl-vtree2 { fill: var(--isl-vtree2, #6a8f3e); }
.isl .isl-vtree3 { fill: var(--isl-vtree3, #3a6231); }
.isl .isl-vtree-l { fill: var(--isl-vtree-l, #a3c160); fill-opacity: 0.75; }
.isl .isl-vtree-d { fill: var(--isl-vtree-d, #213b20); fill-opacity: 0.45; }
.isl .isl-vrock { fill: var(--isl-vrock, #a67b5c); }
.isl .isl-vrockline { stroke: var(--isl-vrock-s, #6f5241); fill: none; stroke-linecap: round; }
.isl .isl-vshallow { stroke: var(--isl-vshallow, #a6e0d6); stroke-opacity: 0.75; fill: none; stroke-linejoin: round; }
.isl .isl-vroad { stroke: var(--isl-vroad, #d9ccab); fill: none; stroke-linecap: round; }
.isl .isl-vdry { fill: var(--isl-vdry, #b59c6b); fill-opacity: 0.55; }
.isl .isl-vrockshore { stroke: var(--isl-vrockshore, #d4b98f); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.isl .isl-vfort { stroke: var(--isl-vstone); fill: none; stroke-linecap: round; }
/* Shapes that are dark land at Dawn, Dusk and Night and show their daylight colors by Day. */
.isl .isl-broof, .isl .isl-broofr, .isl .isl-palm, .isl .isl-bdock { fill: var(--isl-near); }
.isl .isl-bhouse, .isl .isl-bstone { fill: var(--isl-far); }
.isl[data-sky="day"] .isl-bhouse { fill: var(--isl-vhouse); }
.isl[data-sky="day"] .isl-bstone { fill: var(--isl-vstone); }
.isl[data-sky="day"] .isl-broof { fill: var(--isl-vroofg); }
.isl[data-sky="day"] .isl-broofr { fill: var(--isl-vroof); }
.isl[data-sky="day"] .isl-bdock { fill: var(--isl-vdock, #dad3c2); }
.isl .isl-vpool { fill: var(--isl-vpool, #54c9d1); }
/* The Court House's town: the same dark shapes at Dawn, Sunset, Dusk and Night; pastel walls under red or
   gray roofs by Day. */
.isl .isl-tw0, .isl .isl-tw1, .isl .isl-tw2, .isl .isl-troof, .isl .isl-troofg { fill: var(--isl-far); }
.isl[data-sky="day"] .isl-tw0 { fill: #f2eee4; }
.isl[data-sky="day"] .isl-tw1 { fill: #ecdca8; }
.isl[data-sky="day"] .isl-tw2 { fill: #bfdad8; }
.isl[data-sky="day"] .isl-troof { fill: var(--isl-vroof); }
.isl[data-sky="day"] .isl-troofg { fill: var(--isl-vroofg); }
.isl .isl-vsandband { fill: var(--isl-vsand); fill-opacity: var(--isl-vsand-a, 0.7); }
.isl .isl-vshallow2 { stroke: var(--isl-vshallow2, #cdf4ec); stroke-opacity: 0.8; fill: none; stroke-linejoin: round; }
.isl .isl-vgrass { fill: var(--isl-vgrass, #1f6f78); fill-opacity: 0.35; }
.isl .isl-vterrace { fill: var(--isl-vterrace, #d68c5e); }
.isl[data-sky="day"] .isl-palm { fill: var(--isl-vtree3); }
/* Palm trunks: part of the silhouette at night, brown by Day under the green fronds (owner, 2026-09-28). */
.isl[data-sky="day"] .isl-ptrunk { fill: #7c5f42; }
/* The Old Court House's iron railings: black iron by Day, not the land's green (owner, 2026-09-28). */
.isl[data-sky="day"] .isl-vrailing { stroke: #23282c; }
/* The Old Court House's street: an opaque road under the track, so the base sea no longer shows through it (art-audit
   pass 4, 2026-10-01: by Day the street had read as harbour water). By Day the stone's darker course; in the lit
   versions the near ground's own tone, darker at night, since the stone's course made the street as light as the
   Court House's walls at Dusk and Night. */
.isl .isl-vstreet { fill: var(--isl-near); }
.isl[data-sky="day"] .isl-vstreet { fill: var(--isl-vstrata); }
/* Shrubs (the telescope's hill, the harbour town's trees): night silhouettes, leaf green by Day. */
.isl[data-sky="day"] .isl-shrub { fill: var(--isl-vtree3); }
.isl[data-sky="day"] .isl-shrubl { fill: var(--isl-vtree-l); fill-opacity: 0.8; }
/* Iron (the fort's cannon, lamp posts) is drawn in the land's color at night; by Day it is dark iron. */
.isl[data-sky="day"] :is(.isl-vcannon, .isl-vpost) { fill: #2c3338; }

/* --- Paint ------------------------------------------------------------------ */
.isl .st-sky0 { stop-color: var(--isl-sky0); }
.isl .st-sky1 { stop-color: var(--isl-sky1); }
.isl .st-sky2 { stop-color: var(--isl-sky2); }
.isl .st-sky3 { stop-color: var(--isl-sky3); }
.isl .st-hz { stop-color: var(--isl-hz); }
.isl .st-g1 { stop-color: var(--isl-g1); }
.isl .st-g2 { stop-color: var(--isl-g2); }
.isl .st-g3 { stop-color: var(--isl-g3); }
.isl .st-sea0 { stop-color: var(--isl-sea0); }
.isl .st-sea1 { stop-color: var(--isl-sea1); }
.isl .st-sea2 { stop-color: var(--isl-sea2); }
.isl .st-haze { stop-color: var(--isl-haze); }
.isl .st-moon { stop-color: var(--isl-moon); }
.isl .st-planet { stop-color: var(--isl-planet); }
.isl .f-isl { fill: var(--isl-isl); }
.isl .f-far { fill: var(--isl-far); }
.isl .f-near { fill: var(--isl-near); }
.isl .f-moon { fill: var(--isl-moon); }
/* the Moon's seas and its limb (island-core.js, moon()): a quiet grey, never a hard edge */
.isl .f-maria { fill: #8f8c80; fill-opacity: 0.42; }
.isl .st-mlimb { stop-color: #8a826c; }
.isl .f-earth { fill: var(--isl-earth); }
.isl .f-planet { fill: var(--isl-planet); }
.isl .f-pulse { fill: var(--isl-pulse); }
.isl .f-bird { fill: var(--isl-bird); }
.isl .s-star { stroke: var(--isl-star); stroke-linecap: round; fill: none; }
.isl .s-rip { stroke: var(--isl-rip); stroke-opacity: var(--isl-rip-a); fill: none; }
.isl .s-hz { stroke: var(--isl-hzline); fill: none; }
.isl .s-net { stroke: var(--isl-net); fill: none; }
.isl .s-node { stroke: var(--isl-node); fill: none; }
.isl .s-rim { stroke: var(--isl-rim); fill: none; stroke-linecap: round; }

/* --- The hero ----------------------------------------------------------------
   The drawing sits under the words inside the card (isolation keeps it above the card's own
   gradient, which stays as the fallback without JavaScript). Nothing in the card moves or resizes. */
.md-typeset .home-hero.isl-host {
  position: relative;
  isolation: isolate;
}

.isl-hero {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.isl .isl-o {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
}

/* A soft shadow under the words keeps them clear of the brighter sky near the horizon. */
.md-typeset .isl-host .home-hero__tagline,
.md-typeset .isl-host .home-hero__sub {
  text-shadow: 0 1px 2px rgba(2, 18, 34, 0.55), 0 0 12px rgba(2, 18, 34, 0.35);
}

.md-typeset .isl-host .home-hero__wordmark {
  filter: drop-shadow(0 1px 2px rgba(2, 18, 34, 0.45));
}

/* --- The gutters ----------------------------------------------------------------
   Fixed behind the page, in the gutters only: each strip fades out at the column's edge, at the
   outer edge when the gutter is wider than the strip, and downward below the horizon. */
.isl-sides {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: none;
  pointer-events: none;
}

.isl-sides.isl-on {
  display: block;
}

.isl-side {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--isl-g, 0px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--isl-y0, 60vh) + 140px), transparent calc(var(--isl-y0, 60vh) + 420px));
  mask-image: linear-gradient(to bottom, #000 calc(var(--isl-y0, 60vh) + 140px), transparent calc(var(--isl-y0, 60vh) + 420px));
}

.isl-side.l { left: 0; }
.isl-side.r { right: 0; }

.isl-strip {
  position: absolute;
  top: 0;
  bottom: 0;
}

.isl-side.l .isl-strip {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
}

.isl-side.r .isl-strip {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 34px);
  mask-image: linear-gradient(to right, transparent, #000 34px);
}

.isl-side.l .isl-strip.isl-cut {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 90px, #000 calc(100% - 34px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 90px, #000 calc(100% - 34px), transparent);
}

.isl-side.r .isl-strip.isl-cut {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 34px, #000 calc(100% - 90px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 34px, #000 calc(100% - 90px), transparent);
}

[data-md-color-scheme="slate"] .isl-sides.isl-inner .isl-side .isl-art {
  opacity: 0.85;
}

/* --- Motion: one pass on the home page ------------------------------------------ */
.isl-hero.isl-run {
  animation: isl-in 0.5s ease-out both;
}

/* The frigatebird (the bold desktop hero only) glides a few pixels into place on the east wind and
   stops, its wings held still: frigatebirds soar. It lands before the campus's last windows light,
   so the still frame that follows is the bird's resting place. */
.isl-hero .isl-bird {
  transform-origin: 50% 50%;
}

.isl-hero.isl-run .isl-bird {
  animation: isl-glide 2.6s cubic-bezier(0.25, 0.6, 0.3, 1) 0.1s 1 both;
}

@keyframes isl-in {
  from { opacity: 0; }
}

@keyframes isl-glide {
  from { transform: translate(-14px, 4px) rotate(-3deg); }
}

/* The frigatebird goes to roost after dark (art-audit pass 4, 2026-10-01; by version): frigatebirds settle
   for the night soon after sunset and do not fly in the dark, and Dusk begins at 19:00, well after
   Antigua's sunset, so it soars at Dawn, Day and Sunset only. Its place (birdPlace()) and the clouds'
   clearance round it are unchanged; at Dusk and Night the pass ends on the campus's last windows
   (isl-vlast), as it already did. */
.isl-hero:is([data-sky="dusk"], [data-sky="night"]) .isl-bird,
[data-md-color-scheme="slate"] .isl-hero:where(:not([data-sky])) .isl-bird {
  display: none;
}


.isl.isl-paused,
.isl.isl-paused * {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  .isl,
  .isl * {
    animation: none !important;
  }
}

@media print {
  .isl-hero,
  .isl-sides {
    display: none !important;
  }
}

/* --- Vignettes (art round, 2026-09-27) ----------------------------------------------
   Small scenes from the same view in owner-approved empty spaces (data/art_slots.yaml, placed by
   scripts/layout_art.py, drawn by docs/assets/art/island-vignettes.js). The figure is the object
   layout_width.py sets beside the section's last block; it exists only where that track does
   (from 68.75em), and the card inside it stays in view while the text beside it scrolls. */
.md-typeset figure.isl-vignette {
  display: none;
  margin: 0;
}
@media screen and (min-width: 68.75em) {
  .md-typeset figure.isl-vignette {
    display: block;
    width: 100%;
  }
}
/* A short window sets every leaf as one column (layout-width.css); a picture under the text would
   then be a block to scroll past, so it is not shown there. */
@media screen and (min-width: 68.75em) and (max-height: 44em) {
  .md-typeset figure.isl-vignette {
    display: none;
  }
}
/* The library (the Learn landing's head, 2026-09-29, from AUA's photographs): the study hall's
   materials in each version. Dusk is the photograph's hour, the room dim and warm where the lamps
   reach it; Night darker still; Day the cream walls, pale tiles and cherry wood in full light, the
   ceiling panels lit and the lamps off; Dawn cool and pinkish, Sunset warm. The shades' lit glow is
   the same green in every version the lamps are on. */
.isl {
  --isl-lwall0: #4f5159; --isl-lwall1: #7a756b; --isl-lside: #141a26; --isl-lceil: #474a52; --isl-lgrid: #383b42;
  --isl-lpanel: #52565e; --isl-lfloor: #5c554b; --isl-lgrout: #4b453d; --isl-lframe: #a3a7ae; --isl-lbase: #45413b;
  --isl-lwood: #7a3a24; --isl-lwood2: #4f2416; --isl-lchair: #7d8185; --isl-lchair2: #5c6064;
  --isl-lred: #a8453a; --isl-lred2: #8e8f94; --isl-lalu: #b7bcc2; --isl-lsign: #2d5f9e;
  --isl-lshade: #1e5a3a; --isl-lglow0: #3aa866; --isl-lglow1: #c4f7d0; --isl-lbronze: #4a3b2c;
  --isl-lbk1: #7d3b35; --isl-lbk2: #34506e; --isl-lbk3: #8a7440; --isl-lcase: #4a3526; --isl-lcase2: #3a291d;
  --isl-lpage: #e8e0cc; --isl-llap: #b9bcc1; --isl-lbottle: #b3302b;
}
[data-md-color-scheme="slate"] .isl:where(:not([data-sky])), .isl[data-sky="night"] {
  --isl-lwall0: #23252b; --isl-lwall1: #4d4a45; --isl-lside: #05070b; --isl-lceil: #1f2126; --isl-lgrid: #17191d;
  --isl-lpanel: #25272c; --isl-lfloor: #3a352f; --isl-lgrout: #2c2823; --isl-lframe: #5a5e66; --isl-lbase: #2a2724;
  --isl-lwood: #5a2618; --isl-lwood2: #34150c; --isl-lchair: #45484c; --isl-lchair2: #303235;
  --isl-lred: #6e2a24; --isl-lred2: #4a4b50; --isl-lalu: #6c7178; --isl-lsign: #1f3f6a;
  --isl-lshade: #143d27; --isl-lbronze: #2e251c;
  --isl-lbk1: #4d2522; --isl-lbk2: #1f3044; --isl-lbk3: #54482a; --isl-lcase: #2c2017; --isl-lcase2: #1f160f;
  --isl-lpage: #a79f8c; --isl-llap: #6e7176; --isl-lbottle: #7a211d; --isl-lbottle2: #24426a;
}
.isl[data-sky="day"] {
  --isl-lwall0: #e3ddd0; --isl-lwall1: #f1ece2; --isl-lside: #6a5f4c; --isl-lceil: #f0efea; --isl-lgrid: #d6d3cb;
  --isl-lpanel: #fdfdf9; --isl-lfloor: #d7cdbb; --isl-lgrout: #c2b6a0; --isl-lframe: #fafafa; --isl-lbase: #b8ab96;
  --isl-lwood: #9b4a2c; --isl-lwood2: #6a2e1a; --isl-lchair: #b3b7b9; --isl-lchair2: #8e9396;
  --isl-lred: #cf5a43; --isl-lred2: #a9adb3; --isl-lalu: #d5d9de; --isl-lsign: #2f67ad;
  --isl-lshade: #1f6b44; --isl-lbronze: #6b5842;
  --isl-lbk1: #9c4b40; --isl-lbk2: #3f6b92; --isl-lbk3: #b3964f; --isl-lcase: #7a5a3e; --isl-lcase2: #5e4430;
  --isl-lpage: #fbf6ea; --isl-llap: #d7dadf; --isl-lbottle: #d1392f;
}
.isl[data-sky="dawn"] {
  --isl-lwall0: #8d8b9e; --isl-lwall1: #c3b8b8; --isl-lside: #2a2a40; --isl-lceil: #8f8ea0; --isl-lgrid: #7a7a8c;
  --isl-lpanel: #979aab; --isl-lfloor: #a69a95; --isl-lgrout: #928680; --isl-lframe: #dcdbe6; --isl-lbase: #7d7474;
  --isl-lwood: #7c3d2d; --isl-lwood2: #542719; --isl-lchair: #9a9ca8; --isl-lchair2: #7c7e8a;
  --isl-lred: #b0524a; --isl-lred2: #9d9ea8; --isl-lalu: #c5c8d2; --isl-lsign: #37609a;
  --isl-lshade: #1f5e3e; --isl-lbronze: #574636;
  --isl-lbk1: #8a4540; --isl-lbk2: #3d5a7a; --isl-lbk3: #9a8350; --isl-lcase: #5e4535; --isl-lcase2: #4a3629;
  --isl-lpage: #efe4dc; --isl-llap: #c4c5cf; --isl-lbottle: #bf3a33;
}
.isl[data-sky="sunset"] {
  --isl-lwall0: #a88f7c; --isl-lwall1: #dcc3a4; --isl-lside: #3a2616; --isl-lceil: #a38e7e; --isl-lgrid: #8c7868;
  --isl-lpanel: #ab9584; --isl-lfloor: #b89f86; --isl-lgrout: #a08a72; --isl-lframe: #efe0cc; --isl-lbase: #8c7560;
  --isl-lwood: #86402a; --isl-lwood2: #5a2717; --isl-lchair: #a7a29e; --isl-lchair2: #87827d;
  --isl-lred: #bf5540; --isl-lred2: #a39c96; --isl-lalu: #d3cabf; --isl-lsign: #3a5f94;
  --isl-lshade: #1f5f3c; --isl-lbronze: #5e4a37;
  --isl-lbk1: #904a3c; --isl-lbk2: #43607c; --isl-lbk3: #a88a4c; --isl-lcase: #684a33; --isl-lcase2: #523a28;
  --isl-lpage: #f5e6cf; --isl-llap: #cfc7bf; --isl-lbottle: #c83f2e;
}
.isl .st-lwall0 { stop-color: var(--isl-lwall0); }
.isl .st-lwall1 { stop-color: var(--isl-lwall1); }
.isl .st-lglow0 { stop-color: var(--isl-lglow0); stop-opacity: 0.9; }
.isl .st-lglow1 { stop-color: var(--isl-lglow1); stop-opacity: 0.95; }
.isl .isl-lsidew { fill: var(--isl-lside); fill-opacity: 0.18; }
.isl[data-sky="day"] .isl-lsidew { fill-opacity: 0.1; }
.isl .isl-lceil { fill: var(--isl-lceil); }
.isl .isl-lgrid { stroke: var(--isl-lgrid); fill: none; }
.isl .isl-lpanel { fill: var(--isl-lpanel); }
.isl .isl-lfloor { fill: var(--isl-lfloor); }
.isl .isl-lgrout { stroke: var(--isl-lgrout); fill: none; }
.isl .isl-lbase { stroke: var(--isl-lbase); fill: none; }
.isl .isl-lframe { stroke: var(--isl-lframe); fill: none; stroke-linejoin: round; }
.isl .isl-lsill { fill: var(--isl-lframe); }
.isl .isl-lsun { fill: #fffcf2; fill-opacity: 0.4; }
.isl .isl-lcase { fill: var(--isl-lcase); }
.isl .isl-lcase2 { stroke: var(--isl-lcase2); fill: none; stroke-linecap: round; }
.isl .isl-lbk1 { fill: var(--isl-lbk1); }
.isl .isl-lbk2 { fill: var(--isl-lbk2); }
.isl .isl-lbk3 { fill: var(--isl-lbk3); }
.isl .isl-lwood { fill: var(--isl-lwood); }
.isl .isl-lwood2 { fill: var(--isl-lwood2); }
.isl .isl-lchair { fill: var(--isl-lchair); }
.isl .isl-lchairdot { fill: var(--isl-lchair2); }
.isl .isl-lchairleg { stroke: var(--isl-lchair2); fill: none; stroke-linecap: round; }
.isl .isl-lred { fill: var(--isl-lred); }
.isl .isl-lred2 { fill: var(--isl-lred2); }
.isl .isl-lalu { fill: var(--isl-lalu); }
.isl .isl-lsign { fill: var(--isl-lsign); }
.isl .isl-lshade { fill: var(--isl-lshade); }
.isl .isl-lbronze { fill: var(--isl-lbronze); }
.isl .isl-lrim { stroke: var(--isl-lglow1); fill: none; stroke-linecap: round; }
.isl .isl-lpage { fill: var(--isl-lpage); }
.isl .isl-llap { fill: var(--isl-llap); }
.isl .isl-lbottle { fill: var(--isl-lbottle); }
.isl .isl-lredsh { fill: var(--isl-lside); fill-opacity: 0.12; }
.isl .isl-lshadehi { stroke: #ffffff; stroke-opacity: 0.22; fill: none; stroke-linecap: round; }
/* The library's things on the tables (owner, 2026-09-29): each group shows only in the versions its
   data-q names (a Dawn, y Day, s Sunset, d Dusk), so the hall is in use by Day, has a few early arrivals
   at Dawn, winds down at Sunset, is in use again at Dusk by a few students under the lit lamps, as in the
   owner's photograph of it at that hour (art-audit pass 4, 2026-10-01; it had kept only its own stacked
   books), and is empty at Night. */
.isl .isl-lq { display: none; }
.isl[data-sky="dawn"] .isl-lq[data-q*="a"],
.isl[data-sky="day"] .isl-lq[data-q*="y"],
.isl[data-sky="sunset"] .isl-lq[data-q*="s"],
.isl[data-sky="dusk"] .isl-lq[data-q*="d"] { display: inline; }
/* Night, n (2026-10-01): what is drawn may change between versions with a reason (DESIGN.md 19); a group
   shown at Night carries n, as in the dark scheme with no clock. */
.isl[data-sky="night"] .isl-lq[data-q*="n"], [data-md-color-scheme="slate"] .isl:where(:not([data-sky])) .isl-lq[data-q*="n"] { display: inline; }
.isl {
  --isl-lscreen: #9fc2e4; --isl-lbezel: #2a2d33; --isl-lmug: #e6e2da; --isl-lbottle2: #3d6fa8;
  --isl-lbag1: #2d3b57; --isl-lbag2: #3a3b40; --isl-lbag3: #7a3330;
}
.isl[data-sky="day"] {
  --isl-lscreen: #dcebf7; --isl-lmug: #f6f3ee; --isl-lbottle2: #3f7cc0;
  --isl-lbag1: #34466a; --isl-lbag2: #45464c; --isl-lbag3: #93403b;
}
.isl[data-sky="dawn"] { --isl-lscreen: #b9cdf0; --isl-lbag1: #334062; --isl-lbag2: #44434e; --isl-lbag3: #86403f; }
.isl[data-sky="sunset"] { --isl-lscreen: #c3d6ee; --isl-lbag1: #33405f; --isl-lbag2: #45423f; --isl-lbag3: #8b3c34; }
/* the mug takes the night's light as the paper beside it does (it had kept its evening white and read as lit) */
[data-md-color-scheme="slate"] .isl:where(:not([data-sky])), .isl[data-sky="night"] { --isl-lmug: #a7a399; }
.isl .isl-ltext { stroke: #6f6a60; stroke-opacity: 0.35; fill: none; }
.isl .isl-lpageedge { fill: var(--isl-lpage); fill-opacity: 0.85; }
.isl .isl-llogo { fill: #ffffff; fill-opacity: 0.35; }
.isl .isl-lbezel { fill: var(--isl-lbezel); }
.isl .isl-lscreen { fill: var(--isl-lscreen); }
.isl .isl-lmug { fill: var(--isl-lmug); }
.isl .isl-lmugh { stroke: var(--isl-lmug); fill: none; }
.isl .isl-lbottle2 { fill: var(--isl-lbottle2); }
.isl .isl-lbag1 { fill: var(--isl-lbag1); }
.isl .isl-lbag2 { fill: var(--isl-lbag2); }
.isl .isl-lbag3 { fill: var(--isl-lbag3); }
.isl .isl-lbagp { fill: #ffffff; fill-opacity: 0.1; }
.isl .isl-lbagh { stroke: var(--isl-lbag2); fill: none; stroke-linecap: round; }
.isl :is(.isl-lbag1s, .isl-lbag2s, .isl-lbag3s) { fill: none; stroke-linecap: round; }
.isl .isl-lbag1s { stroke: var(--isl-lbag1); }
.isl .isl-lbag2s { stroke: var(--isl-lbag2); }
.isl .isl-lbag3s { stroke: var(--isl-lbag3); }
.isl .isl-ledge { stroke: #ffe2c4; stroke-opacity: 0.28; fill: none; }
.isl .isl-llap2 { fill: var(--isl-lchair2); }
.isl .isl-lgutter { stroke: var(--isl-lchair2); stroke-opacity: 0.6; fill: none; }
/* The library, art-audit pass 4 (2026-10-01). The furniture's shadows on the floor (isl-ldrop, one softened
   group, so where two meet they do not darken twice): deepest where only the lamps light the hall, faint in
   daylight. The dimming of its right side at Dusk and Night, away from the lamps (st-lfall). And at Dusk its
   carrels and window frames a step toward Night, on the library alone (isl-lhall): at the photograph's hour
   no lamp reaches them, and the default values, which the other interiors share at Dusk, kept them near
   daylight, louder than the lamp-lit tables. */
.isl .isl-ldrop { fill: var(--isl-lside); opacity: 0.45; }
.isl[data-sky="day"] .isl-ldrop { opacity: 0.25; }
.isl:is([data-sky="dawn"], [data-sky="sunset"]) .isl-ldrop { opacity: 0.32; }
.isl .st-lfall { stop-color: var(--isl-lside); }
.isl[data-sky="dusk"] .isl-lhall { --isl-lred: #8a3730; --isl-lred2: #6c6d72; --isl-lalu: #8f949a; --isl-lframe: #7e828a;
  --isl-lscreen: #d6e8fa; }
/* Its evening things at Dusk (the same pass), from the owner's photograph of the hall at that hour: the
   laptops' screens lit, bright in the dim hall (--isl-lscreen, just above); clear water bottles; headphones;
   a charger's white cable. */
.isl .isl-lclear { fill: #dbe6ee; fill-opacity: 0.75; }
.isl .isl-lphones { stroke: var(--isl-lbezel); fill: none; stroke-linecap: round; }
.isl .isl-lcord { stroke: #e2ded6; stroke-opacity: 0.75; fill: none; stroke-linecap: round; }
/* The tool wall (the Tool Directory's head, 2026-09-29): the room shares the library's wall, wood,
   aluminium and frame tokens, so the two interiors take the same light in each version; its own are
   the pegboard, the painted outlines on it, and the cast iron. The hammer hangs in its outline at Dawn,
   Dusk and Night and lies on the bench by Day and at Sunset (isl-lq groups, above: art-audit pass 4,
   2026-10-01, the working day; its isl-tqn rule, Night only, is retired). */
.isl {
  --isl-tboard: #6d6a59; --isl-tsil: #33312a; --isl-tpeg: #4d4a3e; --isl-tiron: #3a3e45; --isl-tbulb: #fff4d6;
}
[data-md-color-scheme="slate"] .isl:where(:not([data-sky])), .isl[data-sky="night"] {
  --isl-tboard: #3a392f; --isl-tsil: #1b1a16; --isl-tpeg: #2b2a23; --isl-tiron: #1d2024;
}
.isl[data-sky="day"] { --isl-tboard: #d8d1b2; --isl-tsil: #4a4638; --isl-tpeg: #aea68a; --isl-tiron: #4b535c; }
.isl[data-sky="dawn"] { --isl-tboard: #aca5a2; --isl-tsil: #47414d; --isl-tpeg: #8a8387; --isl-tiron: #4a4e5c; }
.isl[data-sky="sunset"] { --isl-tboard: #bfa684; --isl-tsil: #4a392b; --isl-tpeg: #9a8264; --isl-tiron: #474341; }
.isl .isl-tboard { fill: var(--isl-tboard); }
.isl .isl-tpeg { fill: var(--isl-tpeg); fill-opacity: 0.7; }
.isl .isl-tsil { fill: var(--isl-tsil); stroke: var(--isl-tsil); fill-opacity: 0.85; stroke-opacity: 0.85; }
.isl .isl-thook { stroke: var(--isl-tiron); fill: none; }
.isl .isl-tiron { fill: var(--isl-tiron); }
.isl .isl-tjaw { stroke: var(--isl-lalu); stroke-opacity: 0.6; fill: none; }
.isl .isl-tteeth { stroke: var(--isl-tiron); stroke-opacity: 0.55; fill: none; }
.isl .isl-tflute { stroke: #000000; stroke-opacity: 0.18; fill: none; }
.isl .isl-tunder { fill: var(--isl-lside); fill-opacity: 0.55; }
.isl .isl-tgrain { stroke: #000000; stroke-opacity: 0.12; fill: none; }
.isl .isl-tshave { stroke: var(--isl-lbk3); stroke-opacity: 0.8; fill: none; stroke-linecap: round; }
.isl .isl-tshade { fill: var(--isl-lshade); }
.isl .isl-thandle { stroke: var(--isl-lwood2); fill: none; }
.isl .isl-thandle2 { stroke: var(--isl-tiron); fill: none; }
.isl .isl-tlid { stroke: #000000; stroke-opacity: 0.25; fill: none; }
.isl .isl-tcord { stroke: var(--isl-tsil); fill: none; }
.isl .isl-tdrop { fill: var(--isl-lside); fill-opacity: 0.22; }
/* The prompting desk (Learning to Prompt's head, 2026-09-29): the room shares the library's and the
   tool wall's tokens; the ribbon of light, the bubbles and the orb take the page's hue (the kind line
   in the light scheme, the kind color in the dark), the one accent, and keep their own light by Day. */
.isl .isl-tarm { stroke: var(--isl-tiron); fill: none; stroke-linecap: round; }
.isl .isl-pword { stroke: #fff8e6; stroke-opacity: 0.85; fill: none; stroke-linecap: round; }
.isl .isl-pbubble { fill: #fffdf6; fill-opacity: 0.9; stroke: var(--k-line, var(--isl-rim)); stroke-opacity: 0.55; stroke-width: 1.2; }
.isl .isl-pline { stroke: var(--k-line, var(--isl-rim)); stroke-opacity: 0.55; fill: none; stroke-linecap: round; }
.isl .isl-pdot { stroke: var(--k-line, var(--isl-rim)); fill: none; stroke-linecap: round; }
.isl .isl-pring { stroke: var(--k-line, var(--isl-rim)); stroke-opacity: 0.5; fill: none; }
.isl .isl-pspark { stroke: #ffffff; stroke-opacity: 0.8; fill: none; stroke-linecap: round; }
.isl .isl-pruled { stroke: #6f93c2; stroke-opacity: 0.35; fill: none; }
.isl .isl-phand { stroke: #2b3550; stroke-opacity: 0.7; fill: none; stroke-linecap: round; }
.isl .isl-pcoil { stroke: var(--isl-lalu); fill: none; stroke-linecap: round; }
/* the brightest flecks riding inside the ribbon, white so they show on its cream (art-audit pass 4, 2026-10-01) */
.isl .isl-pfleck { stroke: #ffffff; fill: none; stroke-linecap: round; }
/* The bell tower (the Announcements page's head, 2026-09-29): the town and roofs are the Court House's
   (dark shapes at Dawn, Sunset, Dusk and Night, pastel walls under red roofs by Day); the tower's stone
   and the bell's bronze are the shared stone and brass; its own are the rings of sound, the birds, the
   notice board's cork and its pinned notes. */
.isl { --isl-bcork: #7a5c3e; }
[data-md-color-scheme="slate"] .isl:where(:not([data-sky])), .isl[data-sky="night"] { --isl-bcork: #3a2c1f; }
.isl[data-sky="day"] { --isl-bcork: #b88a5a; }
.isl[data-sky="dawn"] { --isl-bcork: #8c6a5a; }
.isl[data-sky="sunset"] { --isl-bcork: #9a6a44; }
.isl .isl-vsill { stroke: var(--isl-vstone); fill: none; }
.isl .isl-vbeam { stroke: var(--isl-tiron); fill: none; stroke-linecap: round; }
.isl .isl-vvane { fill: var(--isl-tiron); }
.isl .isl-bsound { stroke: #fff4d6; fill: none; stroke-linecap: round; }
.isl[data-sky="day"] .isl-bsound { stroke: #ffffff; }
.isl .isl-bbird { stroke: var(--isl-bird); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.isl .isl-bcork { fill: var(--isl-bcork); }
.isl .isl-bnote { fill: var(--isl-lpage); }
.isl .isl-bink { stroke: #3a3f4a; stroke-opacity: 0.45; fill: none; }
.isl .isl-bpin { stroke: var(--isl-lbottle); fill: none; stroke-linecap: round; }
/* The news pages (round 7, wave 2, 2026-09-29): the interiors share the library's tokens; their own are
   the hospital's curtain and blanket, the skeleton's bone, the lecture theatre's seats and lit screen.
   Each picture's one accent is in the page's hue (the kind line in the light scheme, the kind color in
   the dark): the calendar's ring, the monitor's trace, the slide on the screen, the network's output. */
.isl {
  --isl-hcurt: #577270; --isl-hblank: #6e87a1; --isl-bone: #b8b09c; --isl-mseat: #2e3245; --isl-mscr: #e9edf2;
}
[data-md-color-scheme="slate"] .isl:where(:not([data-sky])), .isl[data-sky="night"] {
  --isl-hcurt: #2e3d3c; --isl-hblank: #34465a; --isl-mseat: #151823;
  --isl-bone: #787365;   /* a little dimmer since the hall closed at Night (owner, 2026-10-01): no lamp lights it now */
  --isl-mscr: #4a4f57;   /* the hall closed at Night (owner, 2026-10-01): the projector off, the bare screen a pale cloth in the dark */
}
.isl[data-sky="day"] { --isl-hcurt: #a9d0cb; --isl-hblank: #b9d3ec; --isl-bone: #efe8d6; --isl-mseat: #4f5b86; --isl-mscr: #fbfcfd; }
.isl[data-sky="dawn"] { --isl-hcurt: #8e99a6; --isl-hblank: #a3adc9; --isl-bone: #d6cdcc; --isl-mseat: #464a66; }
.isl[data-sky="sunset"] { --isl-hcurt: #a39a85; --isl-hblank: #b5a9b4; --isl-bone: #e3d0b3; --isl-mseat: #4f4456; }
.isl :is(.isl-cring, .isl-hecg, .isl-mheart, .isl-mheart2) { stroke: var(--k-line, var(--isl-rim)); fill: none; stroke-linecap: round; stroke-linejoin: round; }
[data-md-color-scheme="slate"] .isl :is(.isl-cring, .isl-hecg, .isl-mheart, .isl-mheart2) { stroke: var(--k, var(--isl-rim)); }
.isl .isl-mheart { fill: var(--k-line, var(--isl-rim)); fill-opacity: 0.18; }
[data-md-color-scheme="slate"] .isl .isl-mheart { fill: var(--k, var(--isl-rim)); }
.isl .isl-cband { fill: var(--isl-lbk2); }
.isl .isl-cgrid { stroke: #6b6f78; stroke-opacity: 0.45; fill: none; }
.isl .isl-cmark { stroke: #3a3f4a; stroke-opacity: 0.7; fill: none; stroke-linecap: round; }
.isl .isl-chand { stroke: #2b2f38; fill: none; stroke-linecap: round; }
.isl .isl-cshade { fill: var(--isl-lbronze); }
/* This Week's calendar (art-audit pass 4, 2026-10-01): its page darkens toward its left edge, away from the
   sconce and the window (st-cpage, the left stop: most at Night, where the flat page was the loudest area,
   least by Day); the sconce's shade is cream fabric with a bronze trim, apart from its brass stem. */
.isl .st-cpage { stop-color: var(--isl-lside); stop-opacity: 0.2; }
.isl .st-cpage0 { stop-color: var(--isl-lside); stop-opacity: 0; }
.isl[data-sky="day"] .st-cpage { stop-opacity: 0.08; }
[data-md-color-scheme="slate"] .isl:where(:not([data-sky])) .st-cpage, .isl[data-sky="night"] .st-cpage { stop-opacity: 0.3; }
.isl .isl-cfab { fill: var(--isl-lpage); fill-opacity: 0.9; stroke: var(--isl-lbronze); stroke-opacity: 0.6; stroke-linejoin: round; }
/* the pen's string: the ink's grey, a lighter grey at Night, where the dark one vanished on the calendar's
   shadow and left the pen hanging from nothing */
.isl .isl-cstring { stroke: #3a3f4a; stroke-opacity: 0.5; fill: none; }
[data-md-color-scheme="slate"] .isl:where(:not([data-sky])) .isl-cstring, .isl[data-sky="night"] .isl-cstring { stroke: #7d828b; stroke-opacity: 0.6; }
.isl .isl-hslat { fill: var(--isl-lframe); fill-opacity: 0.92; }
.isl .isl-hcord { stroke: #8d939c; fill: none; }
.isl .isl-hrail { stroke: var(--isl-lalu); fill: none; }
.isl .isl-hcurtain { fill: var(--isl-hcurt); }
.isl .isl-hfold { stroke: #000000; stroke-opacity: 0.16; fill: none; stroke-linecap: round; }
.isl .isl-hframe { stroke: var(--isl-lalu); fill: none; stroke-linecap: round; }
.isl .isl-hmat { fill: var(--isl-lpage); }
.isl .isl-hblanket { fill: var(--isl-hblank); }
.isl .isl-hbag { fill: #e8f2f7; fill-opacity: 0.55; stroke: var(--isl-lalu); stroke-width: 0.8; }
.isl .isl-hfluid { fill: #f3ecc4; fill-opacity: 0.8; }
.isl .isl-hscreen { fill: #0c1822; }
.isl .isl-hread { fill: #5fd3a8; fill-opacity: 0.85; }
.isl .isl-hread2 { stroke: #6fb8e0; fill: none; }
.isl .isl-mscreen { fill: var(--isl-mscr); }
.isl .isl-mnote { stroke: #7f8794; stroke-opacity: 0.6; fill: none; stroke-linecap: round; }
.isl .isl-mstand { stroke: var(--isl-tiron); fill: none; stroke-linecap: round; }
.isl .isl-mbone { stroke: var(--isl-bone); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.isl .isl-mbonef { fill: var(--isl-bone); }
/* the skeleton's shadow on the wall just behind it, so its bones read against a wall of nearly their colour */
.isl .isl-mbshadow { stroke: var(--isl-lside); stroke-opacity: 0.22; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.isl .isl-mhole { stroke: #3a3730; fill: none; stroke-linecap: round; }
.isl .isl-mseat { fill: var(--isl-mseat); }
.isl .isl-mseat2 { fill: var(--isl-mseat); filter: brightness(0.82); }
/* The Lecture Hall (first audit, 2026-10-01): the screen's falloff (weaker in the lit hall by Day), the
   projector's cool beam (not by Day), and the screen's light on the seat backs' top edges at Dusk. At Night
   the hall is closed and the projector off (owner, 2026-10-01): the beam, the falloff and the rims are
   Dawn-to-Dusk groups, and the bare screen is the screen's own Night colour (--isl-mscr, above). */
.isl[data-sky="day"] .isl-mscrv { opacity: 0.45; }
.isl[data-sky="day"] .isl-mbeam { display: none; }
.isl .isl-mrim { stroke: #cfdbea; fill: none; stroke-linecap: round; display: none; }
.isl[data-sky="dusk"] .isl-mrim { display: inline; }
/* The hall's people and its chalkboard (art-audit wave 1, 2026-10-01): one set of colours, dimmed with the
   hall's light by version as its seats are; the lamp's warm light on the lecturer (isl-mlit, Dawn to Dusk). */
.isl[data-sky="dawn"] .isl-mroom { filter: brightness(0.82); }
.isl[data-sky="sunset"] .isl-mroom { filter: brightness(0.86); }
.isl[data-sky="dusk"] .isl-mroom { filter: brightness(0.6); }
[data-md-color-scheme="slate"] .isl:where(:not([data-sky])) .isl-mroom, .isl[data-sky="night"] .isl-mroom { filter: brightness(0.4); }
.isl .isl-mlit { stroke: #ffcf8a; stroke-opacity: 0.75; fill: none; stroke-linecap: round; }
.isl .isl-mboard { fill: #34463f; }
.isl .isl-mchalk { stroke: #e9ede6; stroke-opacity: 0.75; fill: #e9ede6; fill-opacity: 0; stroke-linecap: round; stroke-linejoin: round; }
.isl .isl-mchalkf { fill: #f1f2ec; }
.isl .isl-mclockf { fill: var(--isl-lpage); }
.isl .isl-dtruss { stroke: var(--isl-lalu); fill: none; stroke-linecap: round; }
.isl .isl-ddish { fill: var(--isl-lframe); }
.isl .isl-ddish2 { stroke: var(--isl-lalu); fill: none; }
.isl .isl-nnode { fill: var(--isl-node); }
/* The dish's beam in the network's pale colour, brightest at the feed (art-audit pass 4, 2026-10-01): the
   page's hue stays on the output node alone. */
.isl .st-node { stop-color: var(--isl-node); }
[data-md-color-scheme="slate"] .isl :is(.isl-pbubble, .isl-pline, .isl-pdot, .isl-pring) { stroke: var(--k, var(--isl-rim)); }
[data-md-color-scheme="slate"] .isl .isl-pbubble { fill: #e9ecf5; fill-opacity: 0.82; }
.isl .isl-tbulb { fill: var(--isl-tbulb); }
/* Round 7, wave 3 (2026-09-30). The committee room shares the library's tokens; its own are the project
   board and its notes, the name cards' fold, the glasses and jug, the easel's legs, the agenda's heading
   and boxes (neutral ink, so only the ticks carry the page's hue: they are the calendar ring's class), and
   a chair a step darker at Dawn and Sunset, when the library's chair nearly matched this room's wall. The
   way in shares the stone, the lamps and the library's sign blue; its own are the concrete ramp, the
   square's paving (solid, so the sea's ripples and glitter stop at the wall), the door's frame (darker than
   the handrails, so the lit doorway never reads as barred), the handrails (brushed metal, darker by Day so
   they read against sunlit stone) and the white symbol of access, dimmed at Night as a lit sign is. */
.isl {
  --isl-kboard: #d8d9d6; --isl-knote: #cdb462; --isl-apave: #3f4c55; --isl-aframe: #4a5058;
}
[data-md-color-scheme="slate"] .isl:where(:not([data-sky])), .isl[data-sky="night"] {
  --isl-kboard: #7d8084; --isl-knote: #6f6236; --isl-apave: #1b2229; --isl-aframe: #2a2f36;
}
.isl[data-sky="day"] { --isl-kboard: #f7f8f6; --isl-knote: #f3d86c; --isl-apave: #b9b2a3; --isl-aframe: #4b535c; }
.isl[data-sky="dawn"] { --isl-kboard: #d6d4de; --isl-knote: #cdb77e; --isl-apave: #6e6c85; --isl-aframe: #4d4b60; --isl-kchair: #7d7f8e; }
.isl[data-sky="sunset"] { --isl-kboard: #eadfd3; --isl-knote: #ddb566; --isl-apave: #7d6c70; --isl-aframe: #4f4747; --isl-kchair: #8a837d; }
.isl .isl-kboard { fill: var(--isl-kboard); }
.isl .isl-knote { fill: var(--isl-knote); }
.isl .isl-kchair { fill: var(--isl-kchair, var(--isl-lchair)); }
.isl .isl-kring { stroke: var(--isl-lwood2); stroke-opacity: 0.45; fill: none; }
.isl .isl-apave { fill: var(--isl-apave); }
.isl .isl-aframe { stroke: var(--isl-aframe); fill: none; stroke-linecap: round; }
.isl .isl-kchairs { fill: var(--isl-lchair2); }
.isl .isl-krug { fill: var(--isl-lbk1); fill-opacity: 0.2; }
.isl .isl-krugb { stroke: var(--isl-lbk3); stroke-opacity: 0.35; fill: none; }
.isl .isl-kcard { fill: var(--isl-lpage); }
.isl .isl-kcardtop { stroke: #000000; stroke-opacity: 0.2; fill: none; }
.isl .isl-kglass { fill: #dbe8f0; fill-opacity: 0.45; stroke: var(--isl-lalu); stroke-opacity: 0.6; stroke-width: 0.6; }
.isl .isl-kglassh { stroke: var(--isl-lalu); stroke-opacity: 0.7; fill: none; stroke-linecap: round; }
.isl .isl-kleg { stroke: var(--isl-lwood2); fill: none; stroke-linecap: round; }
.isl .isl-khead { stroke: #3a3f4a; stroke-opacity: 0.75; fill: none; stroke-linecap: round; }
.isl .isl-kbox { stroke: #3a3f4a; stroke-opacity: 0.6; fill: none; }
.isl .isl-kpad { fill: #000000; fill-opacity: 0.12; }
.isl .isl-kwains { fill: var(--isl-lside); fill-opacity: 0.1; }
.isl .isl-kpanel { stroke: var(--isl-lbase); stroke-opacity: 0.6; fill: none; }
.isl { --isl-aramp: #7e8690; }
[data-md-color-scheme="slate"] .isl:where(:not([data-sky])), .isl[data-sky="night"] { --isl-aramp: #2c323b; }
.isl[data-sky="day"] { --isl-aramp: #c3c8cd; }
.isl[data-sky="dawn"] { --isl-aramp: #8f8fa6; }
.isl[data-sky="sunset"] { --isl-aramp: #a0949a; }
.isl .isl-aramp { fill: var(--isl-aramp); }
.isl .isl-arail { stroke: var(--isl-lalu); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.isl[data-sky="day"] .isl-arail { stroke: #7d858e; }
.isl .isl-asym { stroke: #f4f6f9; fill: none; stroke-linecap: round; }
.isl .isl-asymf { fill: #f4f6f9; }
[data-md-color-scheme="slate"] .isl:where(:not([data-sky])) .isl-asym, .isl[data-sky="night"] .isl-asym { stroke: #c9d1db; }
[data-md-color-scheme="slate"] .isl:where(:not([data-sky])) .isl-asymf, .isl[data-sky="night"] .isl-asymf { fill: #c9d1db; }
/* The caption (owner, 2026-09-29): one quiet line under the picture saying what it shows, then the
   time of day it is drawn at, linked (layout_art.py writes the words, island-vignettes.js adds the
   time). The picture gives up the caption's height, so the figure keeps its size: the top stays level
   with the title and nothing below moves. Left-aligned on the picture's edge; shown only once the
   picture is drawn, so without JavaScript nothing captions an empty space. */
.md-typeset figure.isl-vignette > figcaption.isl-cap {
  max-width: none;
  margin: 0.35rem 0 0;
  font-size: 0.68rem;
  line-height: 1.45;
  font-style: normal;
  text-align: left;
  color: var(--md-default-fg-color--light);
}
.md-typeset figure.isl-vignette:not(:has(> .isl-vig)) > figcaption.isl-cap {
  display: none;
}
/* The leaf's side is already sticky beside taller text (layout-width.css), so the card only clips. */
.isl-vig {
  position: relative;
  overflow: hidden;
  border-radius: 0.6rem;
  box-shadow: inset 0 0 0 1px var(--nav-line, rgba(16, 48, 77, 0.14));
}
/* The accent: the page's kind hue (--k from [data-kind]); the paler line in the light scheme reads
   as a lamp against dusk, the text-strength hue in the dark scheme reads as one against night. */
.isl .st-k { stop-color: var(--k-line, var(--isl-rim)); }
.isl .isl-vlamp { fill: var(--k-line, var(--isl-pulse)); }
[data-md-color-scheme="slate"] .isl .st-k { stop-color: var(--k, var(--isl-rim)); }
[data-md-color-scheme="slate"] .isl .isl-vlamp { fill: var(--k, var(--isl-pulse)); }
/* By Day a lantern is unlit glass, as every window is (its halo and pool are already hidden). */
.isl[data-sky="day"] .isl-vlamp { fill: var(--isl-vdark); }
/* An unlit lamp by Day is three materials, not one dark shape (owner, 2026-10-01): an iron post, a bronze cap
   and a frosted glass globe shaded on its underside. */
.isl[data-sky="day"] .isl-lpost { fill: #2f3940; }
.isl[data-sky="day"] .isl-lcap { fill: #6e5638; }
.isl .isl-lglass { fill: #eef3f2; }
.isl .isl-lglass2 { fill: #aebdc2; fill-opacity: 0.75; }
/* Every lantern by Day: its lit pane turns iron and frames two panes of glass (panes() in the art). */
.isl[data-sky="day"] .isl-ltframe { fill: #2f3940; }
.isl .isl-ltbar { stroke: #1c252d; stroke-opacity: 0.8; fill: none; }
/* The Bell Tower (art-audit wave 1, 2026-10-01): its birds roost at Night; the bell's rope; the tower's door. */
.isl .isl-bdove { fill: #a4adb8; }   /* the doves roosting on the belfry sill at Night, pale against the dark */
.isl .isl-brope { stroke: #a68d63; fill: none; stroke-linecap: round; }
/* The square's reader and bench, one set of colours dimmed with the light by version (the lantern's
   warm light on them is isl-mlit, Dawn to Night). */
.isl .isl-bbench { fill: #8a6a4a; }
.isl[data-sky="dawn"] .isl-bfig { filter: brightness(0.8); }
.isl[data-sky="sunset"] .isl-bfig { filter: brightness(0.72); }
.isl[data-sky="dusk"] .isl-bfig { filter: brightness(0.5); }
[data-md-color-scheme="slate"] .isl:where(:not([data-sky])) .isl-bfig, .isl[data-sky="night"] .isl-bfig { filter: brightness(0.35); }
.isl[data-sky="night"] .isl-brope { stroke: #5a4c37; }
.isl .isl-tdoor { fill: #4a3a2a; }
.isl[data-sky="night"] .isl-tdoor, [data-md-color-scheme="slate"] .isl:where(:not([data-sky])) .isl-tdoor { fill: #1f1912; }
.isl[data-sky="day"] .isl-ltlit { display: none; }
/* The campus's materials (from the owner's photographs of AUA): cream walls, a terracotta ground
   floor, red roofs and white verandas, as dusk shows them (light scheme) and as night does (dark). */
.isl {
  --isl-vwall: #8b97a6; --isl-vshade: #55524d; --isl-vband: #7b5a5a; --isl-vroof: #8e3d47;
  --isl-vroof2: #74323d; --isl-vdark: #34475d; --isl-vdrive: #17324c; --isl-vrail: rgba(236, 239, 243, 0.55);
}
[data-md-color-scheme="slate"] .isl:where(:not([data-sky])), .isl[data-sky="night"] {
  --isl-vwall: #2f3f54; --isl-vshade: #20242b; --isl-vband: #3b2c36; --isl-vroof: #4e2533;
  --isl-vroof2: #3e1d2a; --isl-vdark: #17243a; --isl-vdrive: #0d1b2d; --isl-vrail: rgba(200, 212, 228, 0.3);
}
.isl .isl-vwall { fill: var(--isl-vwall); }
.isl .isl-vshade { fill: var(--isl-vshade); }
.isl .isl-vband { fill: var(--isl-vband); }
.isl .isl-vroof { fill: var(--isl-vroof); }
.isl .isl-vroof2 { fill: var(--isl-vroof2); }
.isl .isl-vdark { fill: var(--isl-vdark); }
.isl .isl-vrail { stroke: var(--isl-vrail); fill: none; }
.isl .isl-vdrive { stroke: var(--isl-vdrive); }
.isl .isl-vclock { fill: var(--isl-moon); fill-opacity: 0.78; }
/* The campus clock's hands and quarter marks (2026-09-30): dark on the pale face in every version. */
.isl .isl-vhand { stroke: #262a33; fill: none; stroke-linecap: round; }
.isl .isl-vmark { stroke: #262a33; stroke-opacity: 0.5; fill: none; stroke-linecap: round; }
.isl .isl-vpin { fill: #262a33; }
/* Its face stands out from the tower (owner, 2026-09-30: by Day "the clock fades into the clocktower"): a dark
   bezel in every version, and by Day a white face on the cream stone. */
.isl .isl-vbezel { stroke: #3a3f48; stroke-opacity: 0.85; fill: none; }
.isl[data-sky="day"] .isl-vclock { fill: #ffffff; fill-opacity: 1; }
/* Harbour lights and masts (Shirley Heights). */
.isl .s-vlight { stroke: var(--isl-pulse); stroke-linecap: round; fill: none; }
.isl .isl-vmast { stroke: var(--isl-vrail); fill: none; stroke-opacity: 0.6; }
.isl .isl-vhull { fill: var(--isl-vwall); }
.isl .isl-vshore { stroke: var(--isl-rip); stroke-opacity: 0.45; fill: none; }
/* English Harbour's water: faintly teal at dusk, deep blue at night. */
.isl { --isl-vbay: #4f8fa3; }
[data-md-color-scheme="slate"] .isl:where(:not([data-sky])), .isl[data-sky="night"] { --isl-vbay: #1d4760; }
.isl .st-vbay { stop-color: var(--isl-vbay); }
/* A yacht motoring in or out of the harbour (art-audit pass 4, 2026-10-01): its sail furled on the boom in the
   sails' shaded tone, a shade under the white of a sail that is up, so at Sunset it does not glow on the
   backlit hull. */
.isl .isl-vfurl { fill: var(--isl-vsail2); }
/* St John's: the cruise ships, the town's walls and the floodlit cathedral. */
.isl { --isl-vship: #c9d2dd; --isl-vship2: #a9b5c3; --isl-vcath: #cdbfa6; --isl-vtown: #7b8796; }
[data-md-color-scheme="slate"] .isl:where(:not([data-sky])), .isl[data-sky="night"] { --isl-vship: #6f7f93; --isl-vship2: #56657a; --isl-vcath: #8a7f6c; --isl-vtown: #34445a; }
.isl .isl-vship { fill: var(--isl-vship); }
.isl .isl-vship2 { fill: var(--isl-vship2); }
.isl .isl-vcath { fill: var(--isl-vcath); }
.isl .isl-vcathwin { fill: var(--isl-pulse); fill-opacity: 0.8; }
.isl .isl-vtown { fill: var(--isl-vtown); }
.isl .isl-vhullband { fill: var(--isl-near); fill-opacity: 0.75; }
.isl[data-sky="day"] .isl-vhullband { fill: #1d2c3d; }   /* (by Day --isl-near is the land's green: a ship's boot-top and funnel cap are dark navy; art-audit wave 2) */
.isl .isl-vdeck { stroke: var(--isl-near); stroke-opacity: 0.35; fill: none; }
.isl .isl-vcannon { fill: var(--isl-near); }
/* (art-audit pass 4, 2026-10-01) The shade the liners' hulls deepen into toward the waterline and the floodlit
   cathedral's stone into toward its cupolas: cool by Day, as isl-vpshade's is; the cathedral's darkening is put
   out by Day, when the Sun lights the stone evenly. The visitors at the fort's parapet, in their own colours,
   dimmed as the light goes (they are there by Day, at Sunset and at Dusk). */
.isl .st-sjshade { stop-color: var(--isl-near); }
.isl[data-sky="day"] .st-sjshade { stop-color: #2a3d4f; }
.isl[data-sky="day"] .st-sjcath { stop-opacity: 0; }
.isl[data-sky="sunset"] .isl-sjfig { filter: brightness(0.72); }
.isl[data-sky="dusk"] .isl-sjfig { filter: brightness(0.5); }
/* The shaded side of stonework (the telescope's wall, the bell tower's shaft). */
.isl .isl-vpshade { fill: var(--isl-near); fill-opacity: 0.3; }
/* By Day the near land's colour is green, so a shadow on stone took an olive cast; under a blue sky a
   shadow is lit by the sky and goes cool. Every other version's --isl-near is already a cool blue. */
.isl[data-sky="day"] .isl-vpshade { fill: #2a3d4f; }
/* The Moon's path on the water (moonWater() in the art): cool white glitter, at Dusk and Night only. */
.isl .isl-vmoonpath { stroke: #e6edf5; fill: none; stroke-linecap: round; }
.isl[data-sky="sunset"] .isl-vmoonw { display: none; }
/* Sailing Week's sails and spinnakers (one in the page's hue), and the steps' stone treads. */
.isl { --isl-vsail: #e9edf2; --isl-vspin: #b9a6c9; }
[data-md-color-scheme="slate"] .isl:where(:not([data-sky])), .isl[data-sky="night"] { --isl-vsail: #8d9bad; --isl-vspin: #6c6282; }
.isl .isl-vsail { fill: var(--isl-vsail); }
.isl .isl-vspin { fill: var(--isl-vspin); }
.isl { --isl-vspin2: #e6cf9c; }
[data-md-color-scheme="slate"] .isl:where(:not([data-sky])), .isl[data-sky="night"] { --isl-vspin2: #857656; }
.isl .isl-vspin2 { fill: var(--isl-vspin2); }
.isl .isl-vspin-k { fill: var(--k-line, var(--isl-rim)); }
[data-md-color-scheme="slate"] .isl .isl-vspin-k { fill: var(--k, var(--isl-rim)); }
.isl .isl-vstep { fill: var(--isl-vstone); }
/* The finish (2026-09-28): the water's ripples and columns of light, lit and shaded planes of the
   land, the sails' shading and seams, navigation lights, the steps' risers and walls, lanterns, and
   the print grain on the sky and, fainter, on the water (never on the land: the owner, 2026-09-28,
   "on the land it reads as visual noise"). */
.isl { --isl-vlit: #56708c; --isl-vshadow: #0c2034; --isl-vsail2: #b9c4d2; --isl-vwallc: #6d6a63; --isl-vriser: #3b4250; }
[data-md-color-scheme="slate"] .isl:where(:not([data-sky])), .isl[data-sky="night"] { --isl-vlit: #1d3450; --isl-vshadow: #03080f; --isl-vsail2: #5d6b7f; --isl-vwallc: #2b3038; --isl-vriser: #161b24; }
.isl .s-vrip { stroke: var(--isl-rip); fill: none; }
.isl .s-vglow { stroke: var(--isl-pulse); fill: none; }
.isl .s-vsailglint { stroke: var(--isl-vsail); fill: none; }
.isl .isl-vlit { fill: var(--isl-vlit); fill-opacity: 0.35; }
.isl .isl-vshadow { fill: var(--isl-vshadow); fill-opacity: 0.35; }
.isl .st-vsail { stop-color: var(--isl-vsail); }
.isl .st-vsail2 { stop-color: var(--isl-vsail2); }
.isl .isl-vsheer { stroke: var(--isl-vsail); stroke-opacity: 0.6; fill: none; }
.isl .isl-vseam { stroke: var(--isl-near); stroke-opacity: 0.25; fill: none; }
.isl .isl-vnav-r { fill: #ff6b5e; }
.isl .isl-vnav-g { fill: #6fe0a2; }
/* The second light (art audit, 2026-10-01): lights on boats, anchor, masthead and riding lights (LED on a
   modern yacht or ship), are a cool white beside the tungsten ashore; their halos (islvcool), columns on
   the water and reflections with them. By Day they are off, as the lights ashore are. */
.isl { --isl-vcool: #e4eeff; }
.isl .isl-vnav-w { fill: var(--isl-vcool); }
.isl .s-vcool { stroke: var(--isl-vcool); stroke-linecap: round; fill: none; }
.isl .s-vcoolglow { stroke: var(--isl-vcool); fill: none; }
.isl .st-vcool { stop-color: var(--isl-vcool); }
.isl .st-vred { stop-color: #ff6b5e; }   /* a red sidelight's halo (Sailing Week, Curtain Bluff) */
.isl[data-sky="day"] [fill*="vred"] { display: none; }
.isl .st-vgreen { stop-color: #6fe0a2; }   /* a green sidelight's halo (Sailing Week heading home) */
.isl[data-sky="day"] [fill*="vgreen"] { display: none; }
.isl .f-vcool { fill: var(--isl-vcool); }
.isl[data-sky="day"] .f-vcool { fill: var(--isl-pulse); }
.isl[data-sky="day"] :is(.s-vcool, .s-vcoolglow, [fill*="vcool"]) { display: none; }
.isl .isl-vriser { fill: var(--isl-vriser); }
.isl .isl-vwall { fill: var(--isl-vwallc); }
/* the campus flags: their own colours by Day, veiled toward night as the walls darken (owner, 2026-10-01) */
.isl .isl-vflagveil { fill: #0d1a2b; opacity: 0.55; }
.isl[data-sky="day"] .isl-vflagveil { opacity: 0; }
.isl[data-sky="dawn"] .isl-vflagveil { opacity: 0.35; }
.isl[data-sky="sunset"] .isl-vflagveil { opacity: 0.25; }
[data-md-color-scheme="slate"] .isl:where(:not([data-sky])) .isl-vflagveil, .isl[data-sky="night"] .isl-vflagveil { opacity: 0.7; }
.isl .isl-vinscr { letter-spacing: 0; font-weight: 400; }
.isl .isl-vpost { fill: var(--isl-near); }
/* the lamp steps' iron handrail, as dark as the lanterns' posts (the owner, 2026-10-02) */
.isl .isl-vhandrail { stroke: var(--isl-near); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.isl[data-sky="day"] .isl-vhandrail { stroke: #2c3338; }
.isl-vig .isl-vgrain { opacity: 0.22; }
.isl-vig[data-sky="night"] .isl-vgrain { opacity: 0.6; }
.isl-vig .isl-vgrain--sea { opacity: 0.1; }
.isl-vig[data-sky="night"] .isl-vgrain--sea { opacity: 0.2; }
.isl-vig[data-sky="day"] .isl-vgrain--sea { display: none; }
.isl .isl-vstep-edge { stroke: var(--isl-vstone); fill: none; stroke-linecap: round; }
.isl .isl-vstep-rise { stroke: var(--isl-vriser); fill: none; }
.isl .isl-vcourse { stroke: var(--isl-vriser); stroke-opacity: 0.45; fill: none; }
/* The telescope's brass; the mill's timber, lattice and the cane. */
.isl { --isl-vbrass: #e2c27a; --isl-vbrass2: #b58a3c; --isl-vbrass3: #6e5222; --isl-vwoodc: #5a4634; --isl-vwoodf: #4a3a2c; --isl-vcane: #3e5f58; }
[data-md-color-scheme="slate"] .isl:where(:not([data-sky])), .isl[data-sky="night"] { --isl-vbrass: #a88a4e; --isl-vbrass2: #7a5f2c; --isl-vbrass3: #3d2e14; --isl-vwoodc: #33291f; --isl-vwoodf: #2a2119; --isl-vcane: #1d302d; }
.isl .st-vbrass { stop-color: var(--isl-vbrass); }
.isl .st-vbrass2 { stop-color: var(--isl-vbrass2); }
.isl .st-vbrass3 { stop-color: var(--isl-vbrass3); }
.isl .isl-vbrass2 { fill: var(--isl-vbrass2); stroke: var(--isl-vbrass2); }
.isl .isl-vtripod { stroke: var(--isl-vwoodc); fill: none; stroke-linecap: round; }
.isl .isl-vtripod-f { fill: var(--isl-vbrass3); }
.isl .isl-vlens { fill: var(--isl-moon); fill-opacity: 0.8; }
.isl .isl-vwood { stroke: var(--isl-vwoodc); fill: none; stroke-linecap: round; }
.isl .isl-vwood-f { fill: var(--isl-vwoodf); }
.isl .isl-vlattice { fill: var(--isl-vsail); fill-opacity: 0.18; stroke: var(--isl-vwoodc); }
.isl .isl-vcane { stroke: var(--isl-vcane); fill: none; stroke-linecap: round; }
.isl { --isl-vtrack: #6f7a78; }
[data-md-color-scheme="slate"] .isl:where(:not([data-sky])), .isl[data-sky="night"] { --isl-vtrack: #2c3437; }
.isl .isl-vtrack { fill: var(--isl-vtrack); fill-opacity: 0.55; }
.isl .isl-vbush { fill: var(--isl-vshadow); }
.isl .isl-vrailing { stroke: var(--isl-near); fill: none; }
/* The mill's sails turn a quarter in the one pass, then rest; still under reduced motion. */
.isl .isl-vsails { transform-box: view-box; }
.isl-vig.isl-vrun .isl-vsails { animation: isl-vturn 3.4s cubic-bezier(.2, .6, .3, 1) 0.4s both; }
@keyframes isl-vturn { from { transform: rotate(-90deg); } to { transform: rotate(0deg); } }
/* Stone: the pale limestone and its darker courses, shared by every building's facade gradient
   (islvfacade), its quoins and its mullions (the Pillars of Hercules that first used it was retired,
   2026-09-29). */
.isl { --isl-vstone: #a39a86; --isl-vstrata: #7f7765; }
[data-md-color-scheme="slate"] .isl:where(:not([data-sky])), .isl[data-sky="night"] { --isl-vstone: #3b4049; --isl-vstrata: #2a2e36; }
.isl .isl-vstone { fill: var(--isl-vstone); }
.isl .isl-vmul { stroke: var(--isl-vriser); stroke-opacity: 0.55; fill: none; }
.isl .st-vstone { stop-color: var(--isl-vstone); }
.isl .st-vstrata { stop-color: var(--isl-vstrata); }
.isl .isl-vpennant { fill: var(--k-line, var(--isl-rim)); }
[data-md-color-scheme="slate"] .isl .isl-vpennant { fill: var(--k, var(--isl-rim)); }
/* Galleon Beach's sand and the surf at the point: pale, catching the last light. */
.isl { --isl-vsand: #d9cdb4; --isl-vsand-a: 0.7; --isl-vsurf: #eef3f7; --isl-vsurf-a: 0.55; }
[data-md-color-scheme="slate"] .isl:where(:not([data-sky])), .isl[data-sky="night"] { --isl-vsand: #7d7666; --isl-vsand-a: 0.6; --isl-vsurf-a: 0.25; }
.isl .isl-vsand { stroke: var(--isl-vsand); stroke-opacity: var(--isl-vsand-a); fill: none; stroke-linecap: round; }
.isl .isl-vsurf { stroke: var(--isl-vsurf); stroke-opacity: var(--isl-vsurf-a); fill: none; stroke-linecap: round; }
/* A landing's head with a vignette beside it (layout_art.py, section: _head): the title, lede, search
   and jump links on the left, the picture on the right, from 68.75em; below that an ordinary block.
   Both start at the top, so every page's picture sits level with its title (owner, 2026-09-29: "can we
   have all images align at their top? ... align the top of the image with the title"); centred, each
   picture sat at a height set by its page's text. */
@media screen and (min-width: 68.75em) and (min-height: 44.0625em) {
  .md-typeset .isl-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 2.4rem;
    align-items: start;
  }
  .md-typeset .isl-head__text > :last-child { margin-bottom: 0; }
  .md-typeset figure.isl-vignette--head { align-self: start; }
  /* News & Events shares the home page's tighter top (body[data-door], layout-home.css); with a picture
     in its head it takes the other landings' top, Material's own spacing, so every section page's title
     and picture sit at the same height (owner, 2026-09-29). The home page keeps its own. */
  body[data-door]:has(.isl-head) .md-main__inner { margin-top: 1.5rem; }
  body[data-door]:has(.isl-head) .md-content__inner { padding-top: 0.6rem; }
  /* A head under a visible breadcrumb (a deeper page: the guides index): the breadcrumb is the page's
     topmost line, so the picture's top is level with it rather than with the title below it (owner,
     2026-09-29: "align the image with the breadcrumb on pages where those are the topmost element").
     Its line sits 1.86rem above the title at every width the art shows (41 px at 1920 and 1680, 37 px
     at 1440, 1280 and 1120, measured). A picture fitted to its text (Courses and Resources, 2026-09-29)
     rises with it and grows by the same height (island-vignettes.js), so its foot stays on the text's. */
  body:not([data-page-type="door"]):not([data-crumbs="none"]) .md-content:has(> .md-path) .isl-head > figure.isl-vignette--head {
    margin-top: -1.86rem;
  }
  /* A reading page's head beside a picture (Courses and Resources): its lede keeps the reading measure. */
  .md-typeset .w-page .isl-head__text > :is(p, ul, ol) { max-width: var(--w-measure, 31rem); }
  /* A picture that fits its text: the row is the text's height, the picture fills it. The text keeps
     its own height rather than stretching with the row, because it is what the picture measures: a
     caption that wraps late (a web font arriving) could otherwise grow the row and be measured as
     text, and the page below would stay moved. */
  .md-typeset .isl-head:has(> figure[data-fit="text"]) { align-items: stretch; }
  .md-typeset figure.isl-vignette[data-fit="text"] { align-self: stretch; }
  .md-typeset .isl-head:has(> figure[data-fit="text"]) > .isl-head__text,
  .md-typeset .isl-stack > .isl-stack__text { align-self: start; }
  /* Stacked sections beside a picture (the About page): the sections in one column at the reading
     measure, the picture in the other, as tall as the sections. A stack that starts at the title
     (section: [_title, ...]) has the title at its top, so the picture's top is level with it. */
  .md-typeset .isl-stack {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 2.4rem;
    align-items: stretch;
  }
  .md-typeset .isl-stack__text > :first-child { margin-top: 0; }
  .md-typeset .isl-stack__text > :last-child { margin-bottom: 0; }
  .md-typeset .isl-stack__text > :is(p, ul, ol) { max-width: var(--w-measure, 31rem); }
  .md-typeset figure.isl-vignette--stack { align-self: stretch; }
}
/* One pass: the card fades in, then the lit room's windows and the door light in turn. Opacity
   only; nothing under reduced motion (the script never starts the pass then). */
.isl-vig.isl-vrun { animation: isl-vfade 0.7s ease-out both; }
/* The campus in the homepage hero lights up during the hero's own one pass. */
.isl-hero.isl-run .isl-vwin { animation: isl-vlight 0.9s ease-out both; animation-delay: calc(1.1s + var(--i, 0) * 0.2s); }
.isl-hero.isl-run .isl-vglow,
.isl-hero.isl-run .isl-vlamps { animation: isl-vlight 1.2s ease-out 1.4s both; }
.isl-vig.isl-vrun .isl-vwin { animation: isl-vlight 0.9s ease-out both; animation-delay: calc(0.8s + var(--i, 0) * var(--isl-vstep, 0.22s)); }
.isl-vig.isl-vrun .isl-vglow,
.isl-vig.isl-vrun .isl-vlamps,
.isl-vig.isl-vrun .isl-vspill { animation: isl-vlight 1.2s ease-out 1.2s both; }
/* A window waiting its turn is dark glass, then warms to its light (owner, 2026-09-29: before they lit the
   windows were "yellowish ... in contrast to the actual unlit windows", and "the church looks like it has
   no windows or doors"): faded up from nearly nothing, a lit window let the wall show through it. A filled
   window now keeps its full opacity and changes color from the version's unlit glass (--isl-vdark, as the
   windows that never light) to its light; halos, pools, spill and points of light still fade in. Placed
   before the Day rule below, which takes precedence and leaves daylight windows still. */
.isl-hero.isl-run .isl-vwin:is(.f-pulse, .isl-vcathwin),
.isl-vig.isl-vrun .isl-vwin:is(.f-pulse, .isl-vcathwin) { animation-name: isl-vlit; }
/* A mark that appears in its turn, not a light (the committee room's ticks, 2026-09-30): hidden until then,
   not faint, so the agenda is not seen done before it is ticked off. By Day it is simply there, as below. */
.isl-vig.isl-vrun .isl-vwin.isl-vtick { animation-name: isl-vtick; }
/* By Day no light comes on (owner, 2026-09-29: the windows "pop in" by day, "which doesn't quite make
   sense"): the windows are daylight glass, the lamps unlit, so the lights' part of the pass is left out and
   they are simply there. The card's fade and Betty's Hope's sails still move. */
.isl-hero.isl-run[data-sky="day"] :is(.isl-vwin, .isl-vglow, .isl-vlamps),
.isl-vig.isl-vrun[data-sky="day"] :is(.isl-vwin, .isl-vglow, .isl-vlamps, .isl-vspill) { animation: none; }
@keyframes isl-vfade { from { opacity: 0; } to { opacity: 1; } }
@keyframes isl-vlight { from { opacity: 0.12; } to { opacity: 1; } }
@keyframes isl-vlit { from { fill: var(--isl-vdark, #34475d); } }
@keyframes isl-vtick { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .isl-vig.isl-vrun,
  .isl-vig.isl-vrun * { animation: none !important; }
}

/* Star colour (dense starfield, 2026-09-27): the brighter stars tinted by colour index, faintly, as
   the eye sees them; the halo on the brightest takes the plain star colour. */
.isl { --isl-star-b: #d7e4ff; --isl-star-y: #fff0cf; --isl-star-o: #ffd2a8; }
.isl .st-star { stop-color: var(--isl-star); }
.isl .s-star-b { stroke: var(--isl-star-b); }
.isl .s-star-y { stroke: var(--isl-star-y); }
.isl .s-star-o { stroke: var(--isl-star-o); }

/* The Milky Way (night only; the path from geo/sky_deep.py): a faint cool white, blurred in the drawing. */
.isl { --isl-mw: #d3ddf3; }
.isl .s-mw { stroke: var(--isl-mw); fill: none; }
.isl .st-mw { stop-color: var(--isl-mw); }