/* Distill · Myth & philosophy (domain "classics"). Loads after style.css and bends its language, never breaks it:
   ink over a tondo of fired clay ringed by a thin meander, display type in an OFL serif, an earthen palette and Roman
   numerals as decorative layer echoes. Body text, controls and layout stay the app's own.
   Shared with scripts/diagrams.py (CLASSIC_ACCENTS, TONDO) and scripts/render.py (serif headings); the meander masks are
   generated from the renderer's geometry by work/classics/style/meander.py. Contrast: work/classics/style/contrast.mjs. */

/* Cormorant Garamond (SIL OFL 1.1, fonts/OFL.txt), from google/fonts: Latin subset, weight axis 500–700. */
@font-face{font-family:"Cormorant Garamond";src:url("/fonts/cormorant-garamond.woff2") format("woff2");font-weight:500 700;font-style:normal;font-display:swap}
/* Until it arrives, Georgia scaled to Cormorant's narrower measure, so fitted text does not reflow much on swap. */
@font-face{font-family:"Cormorant fallback";src:local("Georgia");size-adjust:89%;ascent-override:104%;descent-override:32%;line-gap-override:0%}

/* Five earthen families: regular for light surfaces, bright for dark ones and for the tondo. All meet 4.5:1 as text. */
/*palette-light*/:root{--terracotta:#A9472D;--ochre:#87610F;--aegean:#2A5F98;--bronze:#5E6626;--marble:#6B6158}
:root{--b-terracotta:#EE9273;--b-ochre:#E2B75F;--b-aegean:#8DB6E2;--b-bronze:#B9C27E;--b-marble:#CBC2B8;--serif:"Cormorant Garamond","Cormorant fallback",Georgia,"Times New Roman",serif;--spot-mix:64%;/*meander:begin*/--meander-ring:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 4.1L50 0.8A49.2 49.2 0 0 1 54.45 1L54.25 3.19A47 47 0 0 0 51.42 3.02L51.39 4.12A45.9 45.9 0 0 1 55.53 4.43L55.93 1.16A49.2 49.2 0 0 1 60.33 1.9L59.86 4.05A47 47 0 0 0 57.07 3.53L56.91 4.62A45.9 45.9 0 0 1 60.99 5.43L61.77 2.23A49.2 49.2 0 0 1 66.05 3.49L65.33 5.57A47 47 0 0 0 62.62 4.73L62.33 5.78A45.9 45.9 0 0 1 66.28 7.08L67.45 4A49.2 49.2 0 0 1 71.54 5.77L70.58 7.74A47 47 0 0 0 67.99 6.58L67.57 7.59A45.9 45.9 0 0 1 71.33 9.36L72.86 6.44A49.2 49.2 0 0 1 76.71 8.69L75.52 10.53A47 47 0 0 0 73.09 9.06L72.55 10.02A45.9 45.9 0 0 1 76.08 12.22L77.95 9.51A49.2 49.2 0 0 1 81.5 12.21L80.09 13.89A47 47 0 0 0 77.86 12.14L77.2 13.03A45.9 45.9 0 0 1 80.44 15.64L82.62 13.17A49.2 49.2 0 0 1 85.82 16.28L84.22 17.78A47 47 0 0 0 82.22 15.78L81.46 16.58A45.9 45.9 0 0 1 84.36 19.56L86.83 17.38A49.2 49.2 0 0 1 89.63 20.84L87.86 22.14A47 47 0 0 0 86.11 19.91L85.26 20.61A45.9 45.9 0 0 1 87.78 23.92L90.49 22.05A49.2 49.2 0 0 1 92.85 25.83L90.94 26.91A47 47 0 0 0 89.47 24.48L88.55 25.08A45.9 45.9 0 0 1 90.64 28.67L93.56 27.14A49.2 49.2 0 0 1 95.45 31.17L93.42 32.01A47 47 0 0 0 92.26 29.42L91.27 29.91A45.9 45.9 0 0 1 92.92 33.72L96 32.55A49.2 49.2 0 0 1 97.39 36.79L95.27 37.38A47 47 0 0 0 94.43 34.67L93.39 35.03A45.9 45.9 0 0 1 94.57 39.01L97.77 38.23A49.2 49.2 0 0 1 98.64 42.6L96.47 42.93A47 47 0 0 0 95.95 40.14L94.88 40.37A45.9 45.9 0 0 1 95.57 44.47L98.84 44.07A49.2 49.2 0 0 1 99.18 48.51L96.98 48.58A47 47 0 0 0 96.81 45.75L95.71 45.85A45.9 45.9 0 0 1 95.9 50L99.2 50A49.2 49.2 0 0 1 99 54.45L96.81 54.25A47 47 0 0 0 96.98 51.42L95.88 51.39A45.9 45.9 0 0 1 95.57 55.53L98.84 55.93A49.2 49.2 0 0 1 98.1 60.33L95.95 59.86A47 47 0 0 0 96.47 57.07L95.38 56.91A45.9 45.9 0 0 1 94.57 60.99L97.77 61.77A49.2 49.2 0 0 1 96.51 66.05L94.43 65.33A47 47 0 0 0 95.27 62.62L94.22 62.33A45.9 45.9 0 0 1 92.92 66.28L96 67.45A49.2 49.2 0 0 1 94.23 71.54L92.26 70.58A47 47 0 0 0 93.42 67.99L92.41 67.57A45.9 45.9 0 0 1 90.64 71.33L93.56 72.86A49.2 49.2 0 0 1 91.31 76.71L89.47 75.52A47 47 0 0 0 90.94 73.09L89.98 72.55A45.9 45.9 0 0 1 87.78 76.08L90.49 77.95A49.2 49.2 0 0 1 87.79 81.5L86.11 80.09A47 47 0 0 0 87.86 77.86L86.97 77.2A45.9 45.9 0 0 1 84.36 80.44L86.83 82.62A49.2 49.2 0 0 1 83.72 85.82L82.22 84.22A47 47 0 0 0 84.22 82.22L83.42 81.46A45.9 45.9 0 0 1 80.44 84.36L82.62 86.83A49.2 49.2 0 0 1 79.16 89.63L77.86 87.86A47 47 0 0 0 80.09 86.11L79.39 85.26A45.9 45.9 0 0 1 76.08 87.78L77.95 90.49A49.2 49.2 0 0 1 74.17 92.85L73.09 90.94A47 47 0 0 0 75.52 89.47L74.92 88.55A45.9 45.9 0 0 1 71.33 90.64L72.86 93.56A49.2 49.2 0 0 1 68.83 95.45L67.99 93.42A47 47 0 0 0 70.58 92.26L70.09 91.27A45.9 45.9 0 0 1 66.28 92.92L67.45 96A49.2 49.2 0 0 1 63.21 97.39L62.62 95.27A47 47 0 0 0 65.33 94.43L64.97 93.39A45.9 45.9 0 0 1 60.99 94.57L61.77 97.77A49.2 49.2 0 0 1 57.4 98.64L57.07 96.47A47 47 0 0 0 59.86 95.95L59.63 94.88A45.9 45.9 0 0 1 55.53 95.57L55.93 98.84A49.2 49.2 0 0 1 51.49 99.18L51.42 96.98A47 47 0 0 0 54.25 96.81L54.15 95.71A45.9 45.9 0 0 1 50 95.9L50 99.2A49.2 49.2 0 0 1 45.55 99L45.75 96.81A47 47 0 0 0 48.58 96.98L48.61 95.88A45.9 45.9 0 0 1 44.47 95.57L44.07 98.84A49.2 49.2 0 0 1 39.67 98.1L40.14 95.95A47 47 0 0 0 42.93 96.47L43.09 95.38A45.9 45.9 0 0 1 39.01 94.57L38.23 97.77A49.2 49.2 0 0 1 33.95 96.51L34.67 94.43A47 47 0 0 0 37.38 95.27L37.67 94.22A45.9 45.9 0 0 1 33.72 92.92L32.55 96A49.2 49.2 0 0 1 28.46 94.23L29.42 92.26A47 47 0 0 0 32.01 93.42L32.43 92.41A45.9 45.9 0 0 1 28.67 90.64L27.14 93.56A49.2 49.2 0 0 1 23.29 91.31L24.48 89.47A47 47 0 0 0 26.91 90.94L27.45 89.98A45.9 45.9 0 0 1 23.92 87.78L22.05 90.49A49.2 49.2 0 0 1 18.5 87.79L19.91 86.11A47 47 0 0 0 22.14 87.86L22.8 86.97A45.9 45.9 0 0 1 19.56 84.36L17.38 86.83A49.2 49.2 0 0 1 14.18 83.72L15.78 82.22A47 47 0 0 0 17.78 84.22L18.54 83.42A45.9 45.9 0 0 1 15.64 80.44L13.17 82.62A49.2 49.2 0 0 1 10.37 79.16L12.14 77.86A47 47 0 0 0 13.89 80.09L14.74 79.39A45.9 45.9 0 0 1 12.22 76.08L9.51 77.95A49.2 49.2 0 0 1 7.15 74.17L9.06 73.09A47 47 0 0 0 10.53 75.52L11.45 74.92A45.9 45.9 0 0 1 9.36 71.33L6.44 72.86A49.2 49.2 0 0 1 4.55 68.83L6.58 67.99A47 47 0 0 0 7.74 70.58L8.73 70.09A45.9 45.9 0 0 1 7.08 66.28L4 67.45A49.2 49.2 0 0 1 2.61 63.21L4.73 62.62A47 47 0 0 0 5.57 65.33L6.61 64.97A45.9 45.9 0 0 1 5.43 60.99L2.23 61.77A49.2 49.2 0 0 1 1.36 57.4L3.53 57.07A47 47 0 0 0 4.05 59.86L5.12 59.63A45.9 45.9 0 0 1 4.43 55.53L1.16 55.93A49.2 49.2 0 0 1 0.82 51.49L3.02 51.42A47 47 0 0 0 3.19 54.25L4.29 54.15A45.9 45.9 0 0 1 4.1 50L0.8 50A49.2 49.2 0 0 1 1 45.55L3.19 45.75A47 47 0 0 0 3.02 48.58L4.12 48.61A45.9 45.9 0 0 1 4.43 44.47L1.16 44.07A49.2 49.2 0 0 1 1.9 39.67L4.05 40.14A47 47 0 0 0 3.53 42.93L4.62 43.09A45.9 45.9 0 0 1 5.43 39.01L2.23 38.23A49.2 49.2 0 0 1 3.49 33.95L5.57 34.67A47 47 0 0 0 4.73 37.38L5.78 37.67A45.9 45.9 0 0 1 7.08 33.72L4 32.55A49.2 49.2 0 0 1 5.77 28.46L7.74 29.42A47 47 0 0 0 6.58 32.01L7.59 32.43A45.9 45.9 0 0 1 9.36 28.67L6.44 27.14A49.2 49.2 0 0 1 8.69 23.29L10.53 24.48A47 47 0 0 0 9.06 26.91L10.02 27.45A45.9 45.9 0 0 1 12.22 23.92L9.51 22.05A49.2 49.2 0 0 1 12.21 18.5L13.89 19.91A47 47 0 0 0 12.14 22.14L13.03 22.8A45.9 45.9 0 0 1 15.64 19.56L13.17 17.38A49.2 49.2 0 0 1 16.28 14.18L17.78 15.78A47 47 0 0 0 15.78 17.78L16.58 18.54A45.9 45.9 0 0 1 19.56 15.64L17.38 13.17A49.2 49.2 0 0 1 20.84 10.37L22.14 12.14A47 47 0 0 0 19.91 13.89L20.61 14.74A45.9 45.9 0 0 1 23.92 12.22L22.05 9.51A49.2 49.2 0 0 1 25.83 7.15L26.91 9.06A47 47 0 0 0 24.48 10.53L25.08 11.45A45.9 45.9 0 0 1 28.67 9.36L27.14 6.44A49.2 49.2 0 0 1 31.17 4.55L32.01 6.58A47 47 0 0 0 29.42 7.74L29.91 8.73A45.9 45.9 0 0 1 33.72 7.08L32.55 4A49.2 49.2 0 0 1 36.79 2.61L37.38 4.73A47 47 0 0 0 34.67 5.57L35.03 6.61A45.9 45.9 0 0 1 39.01 5.43L38.23 2.23A49.2 49.2 0 0 1 42.6 1.36L42.93 3.53A47 47 0 0 0 40.14 4.05L40.37 5.12A45.9 45.9 0 0 1 44.47 4.43L44.07 1.16A49.2 49.2 0 0 1 48.51 0.82L48.58 3.02A47 47 0 0 0 45.75 3.19L45.85 4.29A45.9 45.9 0 0 1 50 4.1Z' fill='none' stroke='black' stroke-width='0.6' stroke-linejoin='round'/%3E%3C/svg%3E");--meander-fillet:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='49.19' fill='none' stroke='black' stroke-width='0.62'/%3E%3Ccircle cx='50' cy='50' r='45.91' fill='none' stroke='black' stroke-width='0.62'/%3E%3C/svg%3E");--meander-rule:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 3.55'%3E%3Cpath d='M0 3.27H.5V0.28H3.5V2.27H1.5V3.27H4' fill='none' stroke='black' stroke-width='0.55' stroke-linejoin='round'/%3E%3C/svg%3E")/*meander:end*/}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--terracotta:#EE9273;--ochre:#E2B75F;--aegean:#8DB6E2;--bronze:#B9C27E;--marble:#CBC2B8}}
/*palette-dark*/:root[data-theme="dark"]{--terracotta:#EE9273;--ochre:#E2B75F;--aegean:#8DB6E2;--bronze:#B9C27E;--marble:#CBC2B8}

/* Area colours, in catalogue order so neighbours differ: forge, theseus, labours, troy, desire · control, rehearsal, perspective. */
[data-topic="forge"],[data-topic="desire"]{--accent:var(--terracotta);--bright:var(--b-terracotta)}
[data-topic="theseus"],[data-topic="rehearsal"]{--accent:var(--aegean);--bright:var(--b-aegean)}
[data-topic="labours"],[data-topic="perspective"]{--accent:var(--ochre);--bright:var(--b-ochre)}
[data-topic="troy"]{--accent:var(--bronze);--bright:var(--b-bronze)}
[data-topic="control"]{--accent:var(--marble);--bright:var(--b-marble)}
/* The domain's own colour (glyph, filter chip, heading) is terracotta. */
[data-domain="classics"]{--domain-accent:var(--terracotta)}
/* The tondo is fired clay, a little richer than the house blob; the meander is drawn in the accent. */
:is([data-topic="forge"],[data-topic="theseus"],[data-topic="labours"],[data-topic="troy"],[data-topic="desire"],[data-topic="control"],[data-topic="rehearsal"],[data-topic="perspective"]){--spot:color-mix(in srgb,var(--bright) var(--spot-mix),var(--bg));--ring:color-mix(in srgb,var(--accent) 72%,var(--bg))}

/* ===== Display type: titles, headlines and headings in the serif; everything that is read at length stays in the app font. */
[data-domain="classics"] :is(.reel-title,.card-title,.domain-heading h2,.topic-head h3,.feed-now-text strong,#sheetContent>h2:not(#quizPrompt),.quiz-score h2,.transcript-scene h3){font-family:var(--serif);font-weight:600;font-synthesis:none;font-variant-numeric:lining-nums;letter-spacing:-.1px}
/* Cormorant's x-height is low, so each step is set about 15% larger than the sans it replaces; it is also narrower. */
[data-domain="classics"] .reel-title{font-size:24px;line-height:1.1}
[data-domain="classics"] .card-title{font-size:1.78em;line-height:1.08;letter-spacing:-.2px}
[data-domain="classics"] .card-title.display{font-size:1.86em;line-height:1.06;letter-spacing:-.3px}
@container reel (max-height:700px){[data-domain="classics"] .reel-title{font-size:22.5px}}
@container reel (max-height:540px){[data-domain="classics"] .reel-title{font-size:20.5px}}
[data-domain="classics"] .domain-heading h2{font-size:23px;line-height:1.1;font-weight:700}
[data-domain="classics"] .topic-head h3{font-size:20px;line-height:1.15;font-weight:700;margin-top:-1px}
[data-domain="classics"] .feed-now-text strong{font-size:19px;line-height:1.15;font-weight:700}
[data-domain="classics"] #sheetContent>h2:not(#quizPrompt),[data-domain="classics"] .quiz-score h2{font-size:25px;line-height:1.12}
[data-domain="classics"] .transcript-scene h3{font-size:19px;line-height:1.2;font-weight:700}
[data-domain="classics"] .transcript-scene h3 span{font-size:14px;font-variant-numeric:lining-nums tabular-nums}

/* ===== Roman numerals echo the layer (I Foundations, II Applied, III Deeper). The meter is aria-hidden; the word stays. */
/* Set as a small coin, like the area glyph beside it, so the numeral never reads as part of the area's name. */
[data-domain="classics"] .level-meter{align-items:center}
[data-domain="classics"] .level-meter i{display:none}
[data-domain="classics"] .level-meter::after{content:"I";display:grid;place-items:center;min-width:20px;height:19px;padding:0 4px 1px;border-radius:6px;background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-line);font:700 14px/1 var(--serif);font-variant-numeric:lining-nums;letter-spacing:.04em;text-indent:.04em;color:var(--accent)}
[data-domain="classics"] .level-meter:has(i:nth-child(2).on)::after{content:"II"}
[data-domain="classics"] .level-meter:has(i:nth-child(3).on)::after{content:"III"}
[data-domain="classics"] .layer-label .level-meter::after{min-width:17px;height:16px;padding:0 3px 1px;border-radius:5px;font-size:12px}
/* Card numbers, also aria-hidden, become numerals too. */
[data-domain="classics"] .card-index{font-size:0;letter-spacing:0;line-height:1}
[data-domain="classics"] .card-index::before{font:600 calc(16px*var(--fit,1)*2.45)/.9 var(--serif);font-variant-numeric:lining-nums;letter-spacing:.03em;color:var(--accent)}
[data-domain="classics"] .deck-card:nth-child(1) .card-index::before{content:"I"}
[data-domain="classics"] .deck-card:nth-child(2) .card-index::before{content:"II"}
[data-domain="classics"] .deck-card:nth-child(3) .card-index::before{content:"III"}
[data-domain="classics"] .deck-card:nth-child(4) .card-index::before{content:"IV"}
[data-domain="classics"] .deck-card:nth-child(5) .card-index::before{content:"V"}
[data-domain="classics"] .deck-card:nth-child(6) .card-index::before{content:"VI"}
[data-domain="classics"] .deck-card:nth-child(7) .card-index::before{content:"VII"}
[data-domain="classics"] .deck-card:nth-child(8) .card-index::before{content:"VIII"}

/* ===== The tondo: a disc of --spot, a thin meander just outside it, the engraving inside. Fractions of the art box's
   shorter side, as TONDO in scripts/diagrams.py: disc .86, meander ring .912–.99, art .9 of the disc. */
[data-domain="classics"] .art{container-type:size}
[data-domain="classics"] .art .blob{width:calc(min(100cqw,100cqh)*.86);height:auto;max-width:none;aspect-ratio:1;border-radius:50%;background:var(--spot)}
[data-domain="classics"] .art .blob::before{content:"";position:absolute;inset:-8.14%;background:var(--ring);-webkit-mask:var(--meander-ring) center/100% 100% no-repeat;mask:var(--meander-ring) center/100% 100% no-repeat}
/* Below about 150 px the key would blur into a band: two fine fillets instead. */
@container (max-height:150px){[data-domain="classics"] .art .blob::before{-webkit-mask-image:var(--meander-fillet);mask-image:var(--meander-fillet)}}
[data-domain="classics"] .art .illo{width:calc(min(100cqw,100cqh)*.774);height:calc(min(100cqw,100cqh)*.774)}
/* A circle keeps its shape: it breathes by scale only, and the engraving stays still inside it. */
@keyframes tondo{50%{scale:1.015}}
.lesson.is-active[data-domain="classics"] .art .blob,[data-domain="classics"] .lesson.is-active .art .blob{animation-name:tondo}
.lesson.is-active[data-domain="classics"] .picture-art .illo,[data-domain="classics"] .lesson.is-active .picture-art .illo{animation:none}

/* ===== A quiet meander rule under the cover's tondo: a short run of the key, set on the text's edge like an ornament. */
[data-domain="classics"] .kind-cover:has(>.card-art)::after{content:"";order:1;flex:none;width:5.6em;height:.5em;margin:-.1em 0 .15em;background:var(--ring);-webkit-mask:var(--meander-rule) left center/auto 100% round no-repeat;mask:var(--meander-rule) left center/auto 100% round no-repeat}
[data-domain="classics"] .kind-cover:has(>.card-art)>:not(.card-art){order:2}