/* BrightPath City: shared styles v2. Midnight navy + gold foil + warm sunset glow, jewel accents. Palette: docs/SITE_PALETTE_2026-10-20.md */
:root {
  --abyss: #040C1A; --night: #071327; --panel: #0D2144; --panel2: #15335F; --emerald: #1FA37A; --leaf: #8BD450; --gold: #E3B04B; --gold-light: #FFE29A; --sunshine: #FFD166; --cream: #FBF4E3;
  --harbor-blue: #5BB8E8; --aqua: #2EC4B6; --navy: #14355E; --lavender: #A78BFA; --coral: #FF7A6B; --rose: #F26CA7;
  --serif: Georgia, 'Times New Roman', serif; --sans: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --radius: 20px; --shadow: 0 22px 50px rgba(0, 0, 0, .45);
  --foil: linear-gradient(100deg, #B9801F 0%, #FFE29A 28%, #E3B04B 50%, #FFF1C2 72%, #C98F2A 100%);
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--cream); font: 1.0625rem/1.7 var(--sans); -webkit-font-smoothing: antialiased; min-height: 100vh;
  background: radial-gradient(1200px 700px at 85% -10%, rgba(var(--coral-rgb), .22), transparent 60%), radial-gradient(900px 600px at -10% 20%, rgba(var(--aqua-rgb), .16), transparent 60%),
              radial-gradient(1000px 700px at 50% 110%, rgba(var(--gold-rgb), .18), transparent 60%), linear-gradient(180deg, var(--night), var(--abyss) 70%); background-attachment: fixed; }
body::before { content: ''; position: fixed; inset: 0; background-image: var(--grain); opacity: .06; pointer-events: none; z-index: 0; mix-blend-mode: soft-light; }
body > * { position: relative; z-index: 1; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--sunshine-t); text-underline-offset: .2em; }
a:hover { color: var(--aqua-t); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--sunshine); outline-offset: 4px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--serif); line-height: 1.1; margin: 0 0 .5em; color: var(--cream); }
h1 { font-size: clamp(2.5rem, 6.4vw, 5rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.9rem, 3.8vw, 3rem); }
h2.foil, .foil { background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--gold); color: var(--on-accent); padding: .7rem 1rem; font-weight: 700; z-index: 99; }
.skip:focus { left: 1rem; }
.shell { width: min(1180px, calc(100% - 2.5rem)); margin-inline: auto; }
.eyebrow { text-transform: uppercase; letter-spacing: .18em; font-size: .78rem; font-weight: 800; color: var(--aqua-t); margin-bottom: .8rem; }
.lead { font-size: clamp(1.15rem, 2.2vw, 1.5rem); color: var(--cream); opacity: .94; max-width: 42rem; }
.bi { display: block; margin: 0 0 .7em; } .bi .o { display: block; font-family: var(--serif); color: var(--gold-light); font-size: 1.15em; } .bi .e { display: block; opacity: .8; font-size: .92em; font-style: italic; }

/* header */
.site-header { position: sticky; top: 0; z-index: 30; background: linear-gradient(180deg, rgba(var(--abyss-rgb), .94), rgba(var(--night-rgb), .86)); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(var(--gold-rgb), .5); }
.brand { font-family: var(--serif); font-size: 1.7rem; font-weight: bold; text-decoration: none; letter-spacing: .01em; background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.tagline { display: block; color: var(--cream); opacity: .8; font: .66rem/1.3 var(--sans); letter-spacing: .1em; max-width: 30rem; text-transform: uppercase; }

/* buttons */
.btn, .button { display: inline-block; background: var(--foil); color: var(--on-accent); font-weight: 800; text-decoration: none; padding: .95rem 1.7rem; border-radius: 999px; border: 0; box-shadow: 0 8px 24px rgba(var(--gold-rgb), .35); transition: transform .15s ease, box-shadow .15s ease; }
.btn:hover, .button:hover { color: var(--on-accent); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(var(--sun-rgb), .5); }
.btn.ghost, .button.ghost, .button.secondary { background: rgba(var(--cream-rgb), .06); color: var(--cream); border: 1.5px solid rgba(var(--cream-rgb), .55); box-shadow: none; }
.btn.ghost:hover, .button.ghost:hover, .button.secondary:hover { background: rgba(var(--cream-rgb), .16); color: var(--cream); }
.cta-row { display: flex; flex-wrap: wrap; gap: .8rem 1rem; margin-top: 1.6rem; }

/* hero */
.hero-full { position: relative; min-height: min(92vh, 800px); display: grid; align-items: end; overflow: hidden; isolation: isolate; }
.hero-full > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; z-index: -2; }
.hero-full::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(var(--abyss-rgb), .93) 0%, rgba(var(--abyss-rgb), .72) 38%, rgba(var(--abyss-rgb), .08) 78%), linear-gradient(0deg, var(--night) 0%, transparent 30%); }
.hero-inner { padding: clamp(5rem, 14vh, 9rem) 0 clamp(3rem, 8vh, 5rem); max-width: 46rem; }
.hero-inner h1 .gold { display: block; background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.hero-inner .sub { font-family: var(--serif); font-size: clamp(1.25rem, 2.5vw, 1.8rem); color: var(--gold-light); margin-bottom: .8rem; }
.hero-inner .bi { margin-top: 1.2rem; }

/* ribbon */
.ribbon { background: linear-gradient(90deg, #0F2A57, #15335F 50%, #0F2A57); border-block: 2px solid transparent; border-image: var(--foil) 1; overflow: hidden; padding: 1.1rem 0; box-shadow: 0 0 40px rgba(var(--gold-rgb), .15) inset; }
.ribbon-track { display: flex; gap: 3.4rem; width: max-content; animation: slide 46s linear infinite; font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.3rem); white-space: nowrap; }
.ribbon-track span { color: var(--gold-light); } .ribbon-track span:nth-child(4n+2) { color: var(--aqua-t); } .ribbon-track span:nth-child(4n+3) { color: var(--coral-t); } .ribbon-track span:nth-child(4n) { color: var(--rose-t); }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ribbon-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; gap: .6rem 2rem; } .ribbon-track [aria-hidden="true"] { display: none; } html { scroll-behavior: auto; } .btn:hover, .button:hover { transform: none; } }

/* sections */
.section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; position: relative; }
.section.band { background: linear-gradient(180deg, rgba(var(--panel2-rgb), .55), rgba(var(--night-rgb), .2)); border-block: 1px solid rgba(var(--gold-rgb), .25); }
.section-head { max-width: 48rem; margin-bottom: 2.4rem; }
.divider { height: 14px; margin: 0 auto 1.6rem; width: 220px; background: radial-gradient(circle at center, var(--gold) 0 4px, transparent 5px) center/14px 14px no-repeat, linear-gradient(90deg, transparent, var(--gold) 40%, var(--gold) 60%, transparent) center/100% 2px no-repeat; }
.glass { background: linear-gradient(160deg, rgba(var(--panel2-rgb), .78), rgba(var(--panel-rgb), .72)); border: 1px solid rgba(var(--gold-rgb), .45); border-radius: var(--radius); box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .08); backdrop-filter: blur(6px); }
.pillars { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.pillar { padding: 1.9rem; } .pillar svg { width: 58px; height: 58px; margin-bottom: 1rem; } .pillar h3 { background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; font-size: 1.6rem; }

/* say it your way */
.say { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.say .tile { padding: 1.6rem 1.5rem; position: relative; overflow: hidden; }
.say .tile::before { content: ''; position: absolute; inset: 0; background: radial-gradient(260px 160px at 100% 0%, rgba(var(--coral-rgb), .22), transparent 70%); pointer-events: none; }
.say .tile:nth-child(3n+2)::before { background: radial-gradient(260px 160px at 100% 0%, rgba(var(--aqua-rgb), .24), transparent 70%); } .say .tile:nth-child(3n)::before { background: radial-gradient(260px 160px at 100% 0%, rgba(var(--lav-rgb), .26), transparent 70%); }
.say .lang { text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; font-weight: 800; color: var(--aqua-t); }
.say .orig { font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw, 2.1rem); color: var(--gold-light); line-height: 1.25; margin: .4rem 0 .5rem; }
.say .eng { opacity: .88; font-style: italic; margin: 0; }

/* the walk */
ol.walk { list-style: none; counter-reset: stop; margin: 2rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); }
ol.walk li { position: relative; background: linear-gradient(160deg, rgba(var(--panel2-rgb), .8), rgba(var(--panel-rgb), .75)); border: 1px solid rgba(var(--blue-rgb), .35); border-radius: var(--radius); padding: 3.3rem 1.2rem 1.3rem; box-shadow: var(--shadow); }
ol.walk li::before { counter-increment: stop; content: counter(stop); position: absolute; top: .9rem; left: 1.2rem; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--foil); color: var(--on-accent); font-weight: 800; display: grid; place-items: center; }
ol.walk li:nth-child(even)::before { background: linear-gradient(135deg, var(--aqua), #8CF0E4); } ol.walk li:nth-child(3n)::before { background: linear-gradient(135deg, var(--coral), #FFB4A8); } ol.walk li:nth-child(5n)::before { background: linear-gradient(135deg, var(--lavender), #D2C4FF); }
ol.walk h3 { font-size: 1.15rem; margin-bottom: .3rem; } ol.walk p { margin: 0; font-size: .95rem; opacity: .92; } ol.walk a { color: inherit; text-decoration: none; }

/* framed pictures and mosaics */
.frame { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1.5px solid rgba(var(--gold-rgb), .65); outline: 1px solid rgba(var(--gold-rgb), .25); outline-offset: 6px; background: var(--abyss); }
.frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .frame:hover img { transform: scale(1.03); }
.frame figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.8rem 1.2rem 1rem; background: linear-gradient(0deg, rgba(var(--abyss-rgb), .94), transparent); font-weight: 600; }
.mosaic { display: grid; gap: 1.2rem; grid-template-columns: repeat(12, 1fr); }
.mosaic .big { grid-column: span 8; min-height: 380px; } .mosaic .small { grid-column: span 4; min-height: 220px; } .mosaic .mid { grid-column: span 6; min-height: 240px; } .mosaic .third { grid-column: span 4; min-height: 210px; }
@media (max-width: 760px) { .mosaic .big, .mosaic .small, .mosaic .mid, .mosaic .third { grid-column: span 12; min-height: 220px; } }
.split { display: grid; gap: 2.2rem; grid-template-columns: 1.1fr 1fr; align-items: center; } .split.flip { grid-template-columns: 1fr 1.1fr; }
@media (max-width: 860px) { .split, .split.flip { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .frame:hover img { transform: none; } }
.facts { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-top: 1.8rem; }
.fact { border-left: 4px solid var(--gold); padding: .3rem 0 .3rem 1rem; } .fact strong { display: block; font-family: var(--serif); font-size: 2.3rem; color: var(--sunshine-t); line-height: 1.1; }
.fact:nth-child(2) { border-color: var(--aqua); } .fact:nth-child(3) { border-color: var(--coral); } .fact:nth-child(4) { border-color: var(--lavender); }

/* people */
.three, .cards { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card { background: linear-gradient(160deg, rgba(var(--panel2-rgb), .8), rgba(var(--panel-rgb), .75)); border: 1px solid rgba(var(--gold-rgb), .4); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); }
.card h3 { background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; margin-bottom: .2rem; }
.card .role { color: var(--aqua-t); font-weight: 700; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: .6rem; }
.avatar { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font: 700 1.6rem var(--serif); color: var(--on-accent); background: var(--foil); margin-bottom: .8rem; }
.cards .card:nth-child(2) .avatar { background: linear-gradient(135deg, var(--aqua), #8CF0E4); } .cards .card:nth-child(3) .avatar { background: linear-gradient(135deg, var(--coral), #FFB4A8); } .cards .card:nth-child(4) .avatar { background: linear-gradient(135deg, var(--lavender), #D2C4FF); }
.bam-feature { display: grid; gap: 2rem; grid-template-columns: 1fr 1fr; align-items: center; background: linear-gradient(135deg, rgba(var(--panel2-rgb), .9), rgba(var(--panel2-rgb), .6)); border: 1.5px solid rgba(var(--gold-rgb), .6); border-radius: 28px; overflow: hidden; box-shadow: var(--shadow); }
.bam-feature img { width: 100%; height: 100%; object-fit: cover; min-height: 340px; } .bam-feature .text { padding: 2rem 2rem 2rem 0; }
@media (max-width: 800px) { .bam-feature { grid-template-columns: 1fr; } .bam-feature .text { padding: 0 1.5rem 2rem; } }
.callout, .statement { background: linear-gradient(135deg, rgba(var(--panel2-rgb), .85), rgba(var(--panel-rgb), .8)); border: 1px solid rgba(var(--blue-rgb), .5); border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow); }
.statement { text-align: center; } .statement p { font-family: var(--serif); font-size: clamp(1.3rem, 2.6vw, 1.9rem); margin: 0 auto 1rem; max-width: 42rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; list-style: none; margin: 1rem 0 0; }
.chips li { border: 1px solid var(--aqua); background: rgba(var(--aqua-rgb), .1); color: var(--cream); padding: .3rem .9rem; border-radius: 999px; font-size: .92rem; }
.feature-image { border-radius: var(--radius); box-shadow: var(--shadow); margin: 1.5rem 0; border: 1.5px solid rgba(var(--gold-rgb), .5); }
.hero { display: grid; gap: 2rem; grid-template-columns: 1.1fr 1fr; align-items: center; padding: 3rem 0; } @media (max-width: 800px) { .hero { grid-template-columns: 1fr; } }
main.shell { padding-block: 2.5rem 4rem; }
.page-hero { padding: clamp(3rem, 7vw, 5rem) 0 2rem; } .page-hero h1 { max-width: 16em; }

/* footer */
.site-footer { border-top: 2px solid transparent; border-image: var(--foil) 1; background: linear-gradient(180deg, var(--panel), var(--abyss)); padding: 3rem 0; margin-top: 3rem; }
.site-footer p { margin: 0 0 .5rem; } .site-footer .motto { font-family: var(--serif); font-size: 1.4rem; background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }

.portraits { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.portrait { margin: 0; border-radius: var(--radius); overflow: hidden; border: 1.5px solid rgba(var(--gold-rgb), .55); background: linear-gradient(180deg, #1B3A66, #0D2144); box-shadow: var(--shadow); }
.portrait img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: center top; }
.portrait figcaption { padding: .7rem 1rem; font-family: var(--serif); color: var(--gold-light); text-align: center; }

.listen { margin-top: .9rem; display: inline-flex; gap: .5rem; align-items: center; background: rgba(var(--cream-rgb), .08); color: var(--gold-light); border: 1.5px solid var(--gold); border-radius: 999px; padding: .5rem 1.1rem; font: 700 .9rem var(--sans); cursor: pointer; transition: background .15s ease; }
.listen:hover, .listen[aria-pressed="true"] { background: var(--gold); color: var(--on-accent); }
.listen-note { display: block; font-size: .8rem; opacity: .8; margin-top: .4rem; }

.say .tile { padding: 0 0 1.4rem; } .say .tile > *:not(.pic) { margin-inline: 1.4rem; }
.say .pic { aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; margin-bottom: 1rem; } .say .pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .say .tile:hover .pic img { transform: scale(1.05); }

/* ---- round 2: friends menu, level doors, support, texture and motion ---- */

/* level pages */
.level { --accent: var(--aqua); }
.level.l-friend { --accent: var(--leaf); } .level.l-neighbor { --accent: var(--harbor-blue); } .level.l-builder { --accent: var(--lavender); } .level.l-founder { --accent: var(--sunshine); } .level.l-join { --accent: var(--coral); } .level.l-support { --accent: var(--rose); }
.level-band { position: relative; overflow: hidden; isolation: isolate; border-bottom: 1px solid rgba(var(--gold-rgb), .4); }
.level-band::before { content: ''; position: absolute; inset: -20%; z-index: -2; background: radial-gradient(600px 380px at 85% 20%, color-mix(in srgb, var(--accent) 38%, transparent), transparent 70%), radial-gradient(500px 340px at 5% 90%, rgba(var(--gold-rgb), .22), transparent 70%); animation: drift 22s ease-in-out infinite alternate; }
.level-band::after { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .5; background: repeating-linear-gradient(115deg, rgba(var(--cream-rgb), .035) 0 2px, transparent 2px 14px), linear-gradient(0deg, var(--night), transparent 40%); }
@keyframes drift { from { transform: translate3d(-2%, -1%, 0) scale(1); } to { transform: translate3d(3%, 2%, 0) scale(1.06); } }
.level h1 { font-size: clamp(3rem, 8.5vw, 6.4rem); letter-spacing: -.02em; max-width: 12em; }
.level .eyebrow { color: var(--accent); font-size: .85rem; }
.level-grid { display: grid; gap: 2.5rem; grid-template-columns: 1.25fr 1fr; align-items: center; padding: clamp(3rem, 7vw, 5rem) 0; }
@media (max-width: 860px) { .level-grid { grid-template-columns: 1fr; } }
.door-card { text-align: center; padding: 1.6rem 1.4rem 1.8rem; border: 2px solid var(--accent); border-radius: var(--radius); background: linear-gradient(170deg, rgba(var(--panel2-rgb), .85), rgba(var(--night-rgb), .9)); box-shadow: var(--shadow), 0 0 50px color-mix(in srgb, var(--accent) 28%, transparent); }
.door-card svg { width: min(220px, 60%); height: auto; margin: 0 auto .6rem; display: block; }
.door-state { display: inline-block; font: 800 .8rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--on-accent); background: var(--accent); border-radius: 999px; padding: .35rem 1rem; }
.door-note { margin: .8rem 0 0; opacity: .92; }
.door-glow { transform-origin: 50% 80%; animation: glow 4s ease-in-out infinite alternate; }
@keyframes glow { from { opacity: .55; } to { opacity: 1; } }
.where { border: 2px dashed var(--accent); border-radius: var(--radius); padding: 1.6rem 1.8rem; background: rgba(var(--panel-rgb), .7); }
.where h2 { font-size: 1.6rem; color: var(--accent); }
.where dl { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.4rem; margin: 0; }
.where dt { font-weight: 800; color: var(--gold-light); } .where dd { margin: 0; }
@media (max-width: 560px) { .where dl { grid-template-columns: 1fr; gap: .1rem; } .where dd { margin-bottom: .7rem; } }
.where .tbd { font-style: italic; opacity: .9; }
.checks { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .7rem; }
.checks li { padding-left: 2rem; position: relative; }
.checks li::before { content: ''; position: absolute; left: 0; top: .5em; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); }
.stepper { display: flex; flex-wrap: wrap; gap: .8rem 1rem; justify-content: space-between; margin-top: 2rem; }
.ladder { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); counter-reset: rung; }
.ladder li { counter-increment: rung; padding: 1.5rem; position: relative; }
.ladder li::before { content: counter(rung); position: absolute; top: -.9rem; left: 1.2rem; width: 2rem; height: 2rem; border-radius: 50%; background: var(--foil); color: var(--on-accent); font: 800 1rem/2rem var(--sans); text-align: center; }
.ladder .price, .tier .price { font: 800 1.9rem var(--serif); color: var(--gold-light); margin: .2rem 0 .4rem; } .price small { font: 600 .85rem var(--sans); opacity: .85; }
.ladder .door-state { font-size: .7rem; margin-bottom: .6rem; }
.ladder li:nth-child(1) { --accent: var(--aqua); } .ladder li:nth-child(2) { --accent: var(--leaf); } .ladder li:nth-child(3) { --accent: var(--harbor-blue); } .ladder li:nth-child(4) { --accent: var(--lavender); } .ladder li:nth-child(5) { --accent: var(--sunshine); }
.glance { width: 100%; border-collapse: collapse; margin-top: 1.5rem; }
.glance caption { text-align: left; font: 700 1.2rem var(--serif); color: var(--gold-light); padding-bottom: .6rem; }
.glance th, .glance td { text-align: left; padding: .8rem 1rem; border-bottom: 1px solid rgba(var(--gold-rgb), .35); vertical-align: top; }
.glance thead th { color: var(--gold-light); border-bottom: 2px solid var(--gold); }
.table-wrap { overflow-x: auto; }

/* support */
.tier { padding: 1.7rem; display: flex; flex-direction: column; border-top: 4px solid var(--accent); }
.tier p { flex: 1; }
.tier:nth-child(1) { --accent: var(--harbor-blue); } .tier:nth-child(2) { --accent: var(--lavender); } .tier:nth-child(3) { --accent: var(--sunshine); } .tier:nth-child(4) { --accent: var(--rose); }
.soon { display: block; margin-top: .6rem; font-size: .85rem; font-style: italic; opacity: .9; }
.tag { display: inline-block; align-self: flex-start; border: 1px solid var(--coral); color: var(--coral-t); border-radius: 999px; padding: .2rem .8rem; font: 700 .78rem var(--sans); margin-bottom: .8rem; }
a.btn[aria-disabled="true"] { cursor: not-allowed; }
.goes { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); list-style: none; padding: 0; margin: 1.5rem 0 0; }
.goes li { padding: 1.3rem; border-left: 4px solid var(--aqua); background: rgba(var(--panel-rgb), .7); border-radius: 0 var(--radius) var(--radius) 0; }
.goes li:nth-child(2n) { border-color: var(--coral); } .goes li:nth-child(3n) { border-color: var(--leaf); }

/* motion: gentle rise on arrival, off for reduced-motion */
.rise { animation: rise .8s ease both; } .rise.d2 { animation-delay: .12s; } .rise.d3 { animation-delay: .24s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.shine { background-size: 220% 100%; animation: shine 9s linear infinite; }
@keyframes shine { to { background-position: -220% 0; } }
@media (prefers-reduced-motion: reduce) { .rise, .shine, .level-band::before, .door-glow { animation: none; } html { scroll-behavior: auto; } .btn:hover { transform: none; } }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- round 3: follow-and-support strip, menu link, support extras ---- */
.support-strip { margin-top: 3rem; border-block: 1px solid rgba(var(--gold-rgb), .45); background: linear-gradient(90deg, rgba(var(--panel-rgb), .85), rgba(var(--panel2-rgb), .6) 50%, rgba(var(--panel-rgb), .85)); }
.strip-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .9rem 2rem; padding: 1.1rem 0; }
.strip-line { margin: 0; font: 1.15rem/1.4 var(--serif); color: var(--gold-light); max-width: 34rem; }
.strip-es { flex-basis: 100%; margin: 0; }
.strip-es .bi { margin: 0; display: inline-block; vertical-align: middle; } .strip-es .listen { margin: 0 0 0 1rem; vertical-align: middle; }
.strip-links { display: flex; flex-wrap: wrap; gap: .6rem; }
.btn.sm { padding: .55rem 1.1rem; font-size: .92rem; box-shadow: none; }
.site-footer { margin-top: 0; }
.support-strip { margin-top: 0; }
.why { max-width: 46rem; }
.help-list { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.help-list li { padding: 1.1rem 1.3rem; border-radius: var(--radius); border: 1px solid rgba(var(--aqua-rgb), .55); background: rgba(var(--aqua-rgb), .08); font-weight: 600; }
.help-list li span { display: block; font-weight: 400; opacity: .9; margin-top: .2rem; }
.journey { margin-top: 1.6rem; padding: 1.6rem; }
.journey-track { display: flex; align-items: center; gap: .8rem; margin: 1rem 0; }
.journey-track .stop { flex: 0 0 auto; font: 700 .9rem var(--sans); padding: .4rem .9rem; border-radius: 999px; border: 1.5px solid var(--aqua); }
.journey-track .stop:last-child { border-color: var(--gold); color: var(--gold-light); }
.journey-track .path { flex: 1; height: 0; border-top: 3px dotted var(--sunshine); }
@media (max-width: 560px) { .journey-track { flex-direction: column; align-items: stretch; text-align: center; } .journey-track .path { height: 1.4rem; border-top: 0; border-left: 3px dotted var(--sunshine); width: 0; margin-inline: auto; flex: 0 0 auto; } }
.next-song { margin-top: 1rem; font-weight: 600; }
.monthly { display: inline-block; margin: 0 0 1.2rem; padding: .45rem 1.1rem; border-radius: 999px; border: 1.5px solid var(--leaf); color: var(--leaf-t); font-weight: 700; }

/* ======== round 4: visual overhaul ======== */
:root { --s1: .5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2.5rem; --s5: 4rem; --s6: 6.5rem; --ink: #0B2545; --teal-ink: #0A6B63; --link-ink: #0B4F8A; }
:focus-visible { outline: 3px solid var(--sunshine); outline-offset: 3px; box-shadow: 0 0 0 6px rgba(var(--night-rgb), .85); border-radius: 6px; }
h1 { font-size: clamp(2.8rem, 7.4vw, 5.8rem); line-height: 1.02; letter-spacing: -.02em; }
h2 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height: 1.06; letter-spacing: -.01em; }
h3 { font-size: 1.45rem; }
main p, main li { max-width: 68ch; }
main .statement p, main .strip-line, main .bi, main .card-body p { max-width: none; }
.section { padding: clamp(4rem, 9vw, 7rem) 0; }
.section-head { margin-bottom: var(--s4); }
.eyebrow { font-size: .82rem; letter-spacing: .2em; }

/* header: one clean row on desktop */
.site-header { box-shadow: 0 10px 30px rgba(0, 0, 0, .35); padding-bottom: var(--sub-h, 0px); }
.header-row { display: flex; align-items: center; gap: 1rem; flex-wrap: nowrap; padding: .6rem 0; width: min(1320px, calc(100% - 2rem)); }
.brand-block { flex: 0 0 auto; }
.brand { display: inline-block; font-size: 1.55rem; line-height: 1.1; white-space: nowrap; }
.tagline { max-width: 15.5rem; font-size: .56rem; letter-spacing: .1em; line-height: 1.3; }
.menu-button { display: none; margin-left: auto; background: transparent; color: var(--gold); border: 2px solid var(--gold); border-radius: 999px; padding: .5rem 1.1rem; font: 700 .95rem var(--sans); cursor: pointer; }
#site-nav { flex: 1 1 auto; min-width: 0; }
.nav-main { display: flex; flex-wrap: nowrap; align-items: center; gap: .1rem; list-style: none; margin: 0; padding: 0; }
.nav-main > li { flex: 0 0 auto; }
.nav-main a, .sub-toggle { display: block; white-space: nowrap; color: var(--cream); text-decoration: none; padding: .42rem .58rem; border-radius: 999px; font: 600 .875rem var(--sans); background: transparent; border: 0; cursor: pointer; }
.nav-main a:hover, .sub-toggle:hover, .sub-toggle[aria-expanded="true"] { background: rgba(var(--aqua-rgb), .22); color: var(--cream); }
.nav-main a[aria-current="page"], .sub-toggle.is-current { background: var(--foil); color: var(--on-accent); }
.sub-toggle::after { content: ' \25BE'; }
.nav-support { margin-left: auto; padding-left: .8rem; }
.nav-main a.menu-support { background: var(--foil); color: var(--on-accent); font-weight: 800; padding: .55rem 1.1rem; box-shadow: 0 6px 18px rgba(var(--gold-rgb), .35); }
.nav-main a.menu-support:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(var(--sun-rgb), .5); color: var(--on-accent); }
.submenu { list-style: none; margin: 0; padding: 0; }
.js .submenu { display: none; }
.js .has-sub[data-open="true"] > .submenu { display: flex; }
.submenu a { font-weight: 600; }
@media (min-width: 1200px) {
  .submenu { position: absolute; left: 0; right: 0; bottom: 0; flex-wrap: wrap; gap: .3rem; padding: .55rem max(1rem, calc((100% - 1320px) / 2)); background: var(--panel); border-top: 1px solid rgba(var(--gold-rgb), .6); }
  .submenu a { padding: .4rem 1rem; }
}
@media (max-width: 1199px) {
  .menu-button { display: inline-block; }
  .header-row { flex-wrap: wrap; }
  #site-nav { display: none; flex-basis: 100%; }
  #site-nav[data-open="true"] { display: block; }
  .nav-main { flex-direction: column; align-items: stretch; padding: .5rem 0 1rem; gap: .15rem; }
  .nav-main a, .sub-toggle { padding: .7rem .9rem; width: 100%; text-align: left; font-size: 1rem; border-radius: 12px; }
  .submenu { flex-direction: column; padding: 0 0 .4rem 1rem; }
  .nav-support { margin: .6rem 0 0; padding: 0; }
  .nav-main a.menu-support { text-align: center; }
}

/* light and dark panels */
.panel-light { background: linear-gradient(180deg, #FBF4E3, #E7F3EE); color: #0A1A2E; border-block: 1px solid rgba(var(--gold-rgb), .7); }
.panel-light h2, .panel-light h3 { color: var(--ink); }
.panel-light h2.foil, .panel-light .foil { background: none; -webkit-text-fill-color: var(--ink); color: var(--ink); }
.panel-light .eyebrow { color: var(--teal-ink); }
.panel-light p, .panel-light .lead { color: #0A1A2E; opacity: 1; }
.panel-light a:not(.btn):not(.card-more) { color: var(--link-ink); }
.panel-light .btn.ghost { color: var(--ink); border-color: var(--ink); background: transparent; }
.panel-light .btn.ghost:hover { background: rgba(11, 37, 69, .09); color: var(--ink); }
.panel-light .chips li { color: var(--ink); border-color: var(--teal-ink); background: rgba(10, 107, 99, .08); }
.panel-light :focus-visible { outline-color: var(--ink); box-shadow: 0 0 0 6px rgba(var(--cream-rgb), .95); }
.frame figcaption { color: var(--cream); }

/* image-led cards, shared hover lift and gold edge glow */
.cards-img { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card-img { position: relative; overflow: hidden; border-radius: var(--radius); background: linear-gradient(170deg, #15335F, #0D2144); border: 1px solid rgba(var(--gold-rgb), .5); box-shadow: var(--shadow); color: var(--cream); }
.card-pic { aspect-ratio: 16 / 10; overflow: hidden; }
.card-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.card-body { padding: 1.4rem 1.6rem 1.7rem; }
.card-body h3, .panel-light .card-img h3 { margin: 0 0 .4rem; font-size: 1.9rem; color: var(--cream); }
.card-body p, .panel-light .card-img p { margin: 0 0 1rem; color: var(--cream); }
.card-more { color: var(--gold-light); font-weight: 800; text-decoration: none; }
.card-more::after { content: ''; position: absolute; inset: 0; }
.card-img:hover .card-pic img { transform: scale(1.06); }
.card-img, .pillar, .tier, .say .tile, .portrait, .ladder li { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.card-img:hover, .card-img:focus-within, .pillar:hover, .tier:hover, .say .tile:hover, .portrait:hover, .ladder li:hover { transform: translateY(-8px); border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 38px rgba(var(--gold-rgb), .38), var(--shadow); }

/* stats */
.stats-band { background: linear-gradient(180deg, #0D2144, #14355E 50%, #0D2144); border-block: 1px solid rgba(var(--gold-rgb), .5); padding: clamp(3rem, 7vw, 5rem) 0; }
.stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.stats li { max-width: none; text-align: center; padding: 1.2rem 1rem; border-left: 1px solid rgba(var(--gold-rgb), .75); }
.stats li:first-child { border-left: 0; }
.stats .num { display: block; font: 700 clamp(3rem, 6.5vw, 5.5rem)/1 var(--serif); font-variant-numeric: tabular-nums; background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.stats .lbl { display: block; margin: .7rem auto 0; max-width: 16rem; font-weight: 700; letter-spacing: .03em; }
@media (max-width: 860px) { .stats { grid-template-columns: 1fr 1fr; } .stats li:nth-child(odd) { border-left: 0; } .stats li:nth-child(n+3) { border-top: 1px solid rgba(var(--gold-rgb), .75); } }

/* hero: tall, image-backed, drifting light */
.hero-xl { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(620px, 90vh, 920px); display: grid; align-items: end; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; z-index: -3; transform-origin: 70% 40%; animation: kenburns 40s ease-in-out infinite alternate; }
.hero-xl::after { content: ''; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(var(--night-rgb), .95) 0%, rgba(var(--night-rgb), .84) 42%, rgba(var(--night-rgb), .38) 78%, rgba(var(--night-rgb), .18) 100%), linear-gradient(0deg, var(--night) 0%, transparent 26%); }
.hero-light { position: absolute; inset: -10%; z-index: -1; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(420px 300px at 72% 24%, rgba(255, 226, 154, .32), transparent 70%), radial-gradient(520px 360px at 30% 85%, rgba(var(--aqua-rgb), .2), transparent 70%); animation: driftlight 26s ease-in-out infinite alternate; }
.hero-xl .hero-inner { position: relative; padding: clamp(5rem, 11vh, 8rem) 0 clamp(3rem, 7vh, 5rem); max-width: 48rem; }
.hero-xl h1 { font-size: clamp(3rem, 7.2vw, 6rem); line-height: 1; margin-bottom: .3em; }
.hero-xl h1 .gold { display: block; background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.hero-xl .sub { font: clamp(1.25rem, 2.6vw, 1.9rem)/1.3 var(--serif); color: var(--gold-light); }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.09) translate3d(-1.5%, 1%, 0); } }
@keyframes driftlight { from { transform: translate3d(-3%, -2%, 0); } to { transform: translate3d(4%, 3%, 0); } }

/* page image bands (Harbor, Music, Support) */
.hero-band, .level-band.has-img { position: relative; isolation: isolate; overflow: hidden; }
.hero-band { min-height: clamp(380px, 56vh, 560px); display: grid; align-items: end; border-bottom: 1px solid rgba(var(--gold-rgb), .5); }
.band-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3; animation: kenburns 50s ease-in-out infinite alternate; }
.hero-band::after, .level-band.has-img::after { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 1; background: linear-gradient(90deg, rgba(var(--night-rgb), .94), rgba(var(--night-rgb), .8) 55%, rgba(var(--night-rgb), .45)), linear-gradient(0deg, var(--night), transparent 35%); }
.hero-band .page-hero { padding-block: clamp(4rem, 10vw, 6.5rem) 2.5rem; position: relative; z-index: 1; }
.l-support .level-grid { grid-template-columns: 1fr; }

/* full-bleed quote band */
.quote-band { position: relative; isolation: isolate; overflow: hidden; text-align: center; padding: clamp(5rem, 14vw, 10rem) 0; border-block: 1px solid rgba(var(--gold-rgb), .5); }
.quote-band .band-img { animation-duration: 60s; }
.quote-band::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(900px 500px at 50% 50%, rgba(var(--night-rgb), .9), rgba(var(--night-rgb), .78)); }
.quote-band blockquote { margin: 0 auto; max-width: 54rem; }
.quote-band blockquote p { max-width: none; margin: 0 auto 1.2rem; font: clamp(1.8rem, 4.6vw, 3.3rem)/1.18 var(--serif); color: var(--cream); }
.quote-band .bi { margin: 1.4rem auto .4rem; }
.quote-band .cta-row { justify-content: center; }

/* friends lineup */
.lineup { display: flex; gap: 1.1rem; overflow-x: auto; padding: 1.5rem 1rem 2.5rem; scroll-snap-type: x proximity; }
.lineup .portrait { flex: 1 0 150px; scroll-snap-align: start; }
.lineup .portrait:nth-child(even) { margin-top: 1.6rem; }
.lineup .portrait img { aspect-ratio: 3 / 4; }
.lineup .portrait figcaption { color: var(--gold-light); }

/* language strip */
.lang-strip { background: linear-gradient(180deg, #0D2144, #14355E); border-block: 1px solid rgba(var(--gold-rgb), .5); }
.banners { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.banner { text-align: center; padding: 2rem 1.5rem; border-radius: var(--radius); border: 1px solid rgba(var(--gold-rgb), .55); background: linear-gradient(160deg, rgba(var(--panel2-rgb), .8), rgba(var(--panel-rgb), .75)); }
.banner .lang { text-transform: uppercase; letter-spacing: .16em; font: 800 .78rem var(--sans); color: var(--aqua-t); margin: 0 0 .6rem; }
.banner .orig { font: clamp(1.7rem, 3vw, 2.3rem)/1.25 var(--serif); color: var(--gold-light); margin: 0 0 .5rem; max-width: none; }
.banner .eng { font-style: italic; margin: 0; opacity: .92; max-width: none; }
.banners.cycling { display: block; position: relative; }
.banners.cycling .banner { display: none; padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem; }
.banners.cycling .banner.is-on { display: block; animation: fadein .9s ease both; }
.banners.cycling .banner .orig { font-size: clamp(2.2rem, 6vw, 4.2rem); }
.banner-ctrl { display: flex; gap: .7rem; justify-content: center; margin-top: 1.2rem; }
.banner-ctrl button { background: transparent; color: var(--cream); border: 1.5px solid var(--gold); border-radius: 999px; padding: .5rem 1.2rem; font: 700 .9rem var(--sans); cursor: pointer; }
.banner-ctrl button:hover { background: rgba(var(--gold-rgb), .2); }
@keyframes fadein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .hero-img, .band-img, .hero-light, .banners.cycling .banner.is-on { animation: none; }
  .card-img, .pillar, .tier, .say .tile, .portrait, .ladder li, .card-pic img { transition: none; }
  .card-img:hover, .card-img:focus-within, .pillar:hover, .tier:hover, .say .tile:hover, .portrait:hover, .ladder li:hover { transform: none; }
  .card-img:hover .card-pic img { transform: none; }
  .nav-main a.menu-support:hover { transform: none; }
}

/* ======== round 5: language cards, depth, freebies, phone ======== */
:root { --sapphire: #3E7BD6; --amethyst: #A78BFA; }
.tagline .tl-short { display: none; }

/* page accents, so each page has its own colour mood */
body { --accent-page: var(--aqua); }
.pg-harbor { --accent-page: var(--harbor-blue); } .pg-people { --accent-page: var(--lavender); } .pg-kindness { --accent-page: var(--rose); }
.pg-community { --accent-page: var(--leaf); } .pg-about { --accent-page: var(--sunshine); } .pg-music { --accent-page: var(--rose); }
.pg-support { --accent-page: var(--rose); } .pg-freebies { --accent-page: var(--leaf); } .pg-city { --accent-page: var(--aqua); }
.eyebrow { color: var(--accent-page); }
.panel-light .eyebrow { color: var(--teal-ink); }

/* depth: faint stars and layered glows */
body::after { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(1.2px 1.2px at 24px 38px, rgba(255, 226, 154, .8), transparent), radial-gradient(1px 1px at 130px 92px, rgba(255, 255, 255, .6), transparent), radial-gradient(1.5px 1.5px at 210px 170px, rgba(var(--blue-rgb), .7), transparent), radial-gradient(1px 1px at 80px 150px, rgba(var(--lav-rgb), .6), transparent);
  background-size: 260px 210px; }
.section:not(.band):not(.panel-light):not(.lang-strip) { background: radial-gradient(900px 420px at 8% 0%, color-mix(in srgb, var(--accent-page) 11%, transparent), transparent 65%), radial-gradient(800px 420px at 100% 100%, rgba(var(--lav-rgb), .09), transparent 65%); }
.panel-light { background-image: radial-gradient(circle at 1px 1px, rgba(11, 37, 69, .07) 1px, transparent 1.6px), linear-gradient(180deg, #FBF4E3, #E7F3EE); background-size: 24px 24px, auto; }
.section.band, .panel-light, .lang-strip { position: relative; }
.section.band::before, .panel-light::before, .lang-strip::before { content: ''; position: absolute; top: -7px; left: 50%; width: 12px; height: 12px; transform: translateX(-50%) rotate(45deg); background: var(--gold); border: 3px solid var(--night); z-index: 2; }
.mosaic.xl .big { min-height: 520px; } .mosaic.xl .small { min-height: 520px; } .mosaic.xl .mid { min-height: 360px; } .mosaic.xl .third { min-height: 300px; }
@media (max-width: 760px) { .mosaic.xl .big, .mosaic.xl .small, .mosaic.xl .mid, .mosaic.xl .third { min-height: 260px; } }
.wash-card { border-radius: var(--radius); padding: clamp(2rem, 5vw, 3.5rem); border: 1px solid rgba(var(--gold-rgb), .5); box-shadow: var(--shadow);
  background: radial-gradient(520px 320px at 100% 0%, rgba(62, 123, 214, .45), transparent 70%), radial-gradient(480px 300px at 0% 100%, rgba(var(--lav-rgb), .35), transparent 70%), linear-gradient(160deg, #10294f, #0a1a35); }
.wash-card h3 { font-size: clamp(1.8rem, 4vw, 2.8rem); }

/* language cards: typography first */
.langs { display: grid; gap: 1.3rem; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.lang-card { --wash: var(--emerald); --wash2: var(--sapphire); position: relative; overflow: hidden; isolation: isolate; padding: 1.7rem 1.6rem 1.6rem; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--wash) 70%, #fff 0%); color: var(--cream); box-shadow: var(--shadow);
  background: radial-gradient(420px 260px at 100% 0%, color-mix(in srgb, var(--wash) 60%, transparent), transparent 72%), radial-gradient(380px 240px at 0% 100%, color-mix(in srgb, var(--wash2) 38%, transparent), transparent 72%), linear-gradient(160deg, #10294f, #0a1a35);
  transition: transform .3s ease, box-shadow .3s ease; }
.lang-card::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .13) 50%, transparent 62%); background-size: 260% 100%; background-position: 130% 0; animation: sheen 9s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 1.1s); }
@keyframes sheen { 0%, 55% { background-position: 130% 0; } 100% { background-position: -130% 0; } }
.lang-card:hover, .lang-card:focus-within { transform: translateY(-7px); box-shadow: 0 0 0 1px var(--wash), 0 0 34px color-mix(in srgb, var(--wash) 55%, transparent), var(--shadow); }
.lang-card .chip { display: inline-block; font: 800 .72rem var(--sans); letter-spacing: .14em; text-transform: uppercase; padding: .28rem .85rem; border-radius: 999px; border: 1.5px solid var(--cream); background: rgba(var(--cream-rgb), .12); color: var(--cream); }
.lang-card .greet { margin: 1rem 0 .5rem; font: 700 clamp(1.9rem, 3.2vw, 2.6rem)/1.2 var(--serif); color: var(--cream); max-width: none; }
.lang-card .eng { margin: 0; font-style: italic; opacity: .95; max-width: none; }
.lang-card .listen { color: var(--cream); border-color: var(--cream); }
.lang-card .listen:hover, .lang-card .listen[aria-pressed="true"] { background: var(--cream); color: var(--on-accent); }
.lang-card.gold { --wash: #FFD166; color: #0B2545; background: linear-gradient(160deg, #FFF3C9, #F3F8EC); border-color: var(--gold); }
.lang-card.gold .chip { border-color: #0B2545; color: #0B2545; background: rgba(11, 37, 69, .07); }
.lang-card.gold .greet { color: #0B2545; } .lang-card.gold .listen { color: #0B2545; border-color: #0B2545; background: transparent; } .lang-card.gold .listen:hover { background: #0B2545; color: var(--cream); }
.lang-card.gold:focus-within { outline: 3px solid #0B2545; }
.w-emerald { --wash: var(--emerald); --wash2: var(--aqua); } .w-sapphire { --wash: var(--sapphire); --wash2: var(--harbor-blue); } .w-amethyst { --wash: var(--amethyst); --wash2: var(--rose); }
.w-rose { --wash: var(--rose); --wash2: var(--amethyst); } .w-teal { --wash: var(--aqua); --wash2: var(--sapphire); } .w-leaf { --wash: var(--leaf); --wash2: var(--emerald); }

/* phone */
@media (max-width: 600px) {
  .tagline .tl-long { display: none; } .tagline .tl-short { display: inline; } .tagline { white-space: nowrap; max-width: none; font-size: .58rem; letter-spacing: .08em; }
  .hero-xl h1 { font-size: 3.4rem; } .hero-xl .sub { font-size: 1.4rem; } .hero-xl .bi { font-size: 1.12rem; }
  .hero-xl .cta-row, .quote-band .cta-row, .strip-links { flex-direction: column; align-items: stretch; } .hero-xl .cta-row .btn, .quote-band .cta-row .btn, .strip-links .btn { text-align: center; }
  .cta-row .btn { text-align: center; }
  .stats .num { font-size: 3.2rem; } .stats li { padding: 1rem .5rem; } .stats .lbl { font-size: .95rem; }
  .strip-es .listen { margin: .6rem 0 0; display: inline-flex; } .strip-es .bi { display: block; }
  h1 { font-size: clamp(2.5rem, 12vw, 3.4rem); } h2 { font-size: clamp(1.9rem, 9vw, 2.6rem); }
  .lang-card .greet { font-size: 2rem; }
}

/* freebies */
.freebie-head { padding-block: clamp(2.5rem, 6vw, 4rem) 1.5rem; }
.freebie-head .credit-note, .freebie-head .share-note, .freebie-head .note { max-width: 46rem; }
.credit-note { font-weight: 700; color: var(--leaf-t); }
.share-note { opacity: .95; }
.free-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.card-pic.wash { display: grid; place-items: center; padding: 1rem; text-align: center; font: 700 clamp(1.5rem, 3vw, 2.1rem)/1.2 var(--serif); color: var(--cream); background: radial-gradient(300px 200px at 100% 0%, color-mix(in srgb, var(--wash, var(--rose)) 60%, transparent), transparent 70%), linear-gradient(160deg, #10294f, #0a1a35); }
.sheets { padding-bottom: 3rem; }
.sheet { background: #FBF4E3; color: #0B2545; border-radius: 18px; padding: 1.4rem; margin: 0 auto 2rem; max-width: 860px; box-shadow: var(--shadow); border: 1px solid rgba(var(--gold-rgb), .7); }
.sheet h2, .sheet h3, .sheet p { color: #0B2545; }
.sheet h2 { font-size: 1.5rem; margin-bottom: .6em; }
.sheet .credit { font-size: .78rem; letter-spacing: .04em; margin: 1rem 0 0; opacity: .85; text-align: center; }
.sheet .listen { color: #0B2545; border-color: #0B2545; background: transparent; margin-top: .5rem; } .sheet .listen:hover { background: #0B2545; color: #FBF4E3; }
.cards-grid-6 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.wcard { --c: var(--emerald); position: relative; min-height: 220px; display: flex; flex-direction: column; justify-content: center; text-align: center; padding: 1.3rem 1rem; border: 2px solid var(--c); border-radius: 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 22%, #FBF4E3), #FBF4E3 70%); break-inside: avoid; }
.wcard .small-head { font: 800 .7rem var(--sans); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 .5rem; color: #0B2545; }
.wcard .big { font: 700 clamp(1.5rem, 3vw, 2rem)/1.2 var(--serif); margin: .3rem 0; color: #0B2545; max-width: none; }
.wcard .en { font-style: italic; margin: 0 0 .4rem; max-width: none; color: #0B2545; }
.wcard .chip2 { display: inline-block; align-self: center; font: 800 .68rem var(--sans); letter-spacing: .12em; text-transform: uppercase; background: var(--c); color: #06231F; border-radius: 999px; padding: .2rem .8rem; }
.wcard.blank { border-style: dashed; color: #0B2545; }
.kcards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kcard { border: 2px solid #E3B04B; border-radius: 12px; padding: .9rem 1rem; background: linear-gradient(135deg, #FFF3C9, #E7F3EE); text-align: center; min-height: 128px; display: flex; flex-direction: column; justify-content: center; break-inside: avoid; }
.kcard .k1 { font: 700 1.25rem/1.2 var(--serif); margin: 0; color: #0B2545; max-width: none; } .kcard .k2 { margin: .3rem 0 0; font-style: italic; color: #0B2545; max-width: none; } .kcard .k3 { font-size: .68rem; margin: .5rem 0 0; letter-spacing: .06em; color: #0B2545; opacity: .8; max-width: none; }
.days { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.days li { max-width: none; display: grid; grid-template-columns: 2.4rem 1fr; gap: 1rem; align-items: start; padding: .9rem 1rem; border: 2px solid var(--aqua); border-radius: 14px; background: #fff; break-inside: avoid; }
.days .box { width: 2rem; height: 2rem; border: 3px solid #0B2545; border-radius: 6px; background: #fff; }
.days h3 { margin: 0 0 .15rem; font-size: 1.15rem; } .days p { margin: 0; max-width: none; }
.hellos { width: 100%; border-collapse: collapse; }
.hellos th, .hellos td { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid rgba(11, 37, 69, .25); vertical-align: middle; color: #0B2545; }
.hellos thead th { border-bottom: 2px solid #0B2545; } .hellos .word { font: 700 1.5rem var(--serif); }
.signs { display: grid; gap: 2rem; justify-items: center; }
.sign { container-type: inline-size; position: relative; overflow: hidden; background: linear-gradient(160deg, #FFF3C9, #E7F3EE 55%, #D3EEF2); border: 3px solid #E3B04B; border-radius: 6px; color: #0B2545; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3cqw; padding: 8cqw 6cqw; }
.sign h2 { font-size: 15cqw; line-height: 1.02; margin: 0; color: #0B2545; } .sign .l2 { font: 700 9cqw/1.1 var(--serif); margin: 0; color: #0A6B63; max-width: none; } .sign .l3 { font: 700 7cqw/1.1 var(--serif); margin: 0; max-width: none; }
.sign .es { font-size: 4.6cqw; font-style: italic; margin: 0; max-width: none; } .sign .name { font: 800 3.4cqw var(--sans); letter-spacing: .2em; text-transform: uppercase; margin: 0; max-width: none; }
.sign svg { width: 22cqw; height: 22cqw; }
.sz-s { width: min(100%, 240px); aspect-ratio: 4 / 6; } .sz-m { width: min(100%, 300px); aspect-ratio: 5 / 7; } .sz-l { width: min(100%, 400px); aspect-ratio: 8.5 / 11; } .sz-p { width: min(100%, 520px); aspect-ratio: 11 / 17; }
.size-label { font-weight: 700; margin: 0 0 .4rem; text-align: center; color: var(--cream); max-width: none; }
.bookmarks { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.bookmark { width: 160px; height: 480px; border: 3px solid #E3B04B; border-radius: 14px; overflow: hidden; background: linear-gradient(180deg, #14355E, #0D2144); color: #FBF4E3; text-align: center; display: flex; flex-direction: column; break-inside: avoid; }
.bookmark img { width: 100%; height: 250px; object-fit: cover; object-position: center; } .bookmark .bm { padding: .9rem .6rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; justify-content: center; }
.bookmark h3 { margin: 0; font-size: 1.8rem; color: #FFE29A; } .bookmark p { margin: 0; max-width: none; color: #FBF4E3; } .bookmark .tag { font: 800 .7rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #2EC4B6; } .bookmark .cr { font-size: .65rem; opacity: .9; }
.coloring { background: #fff; border-radius: 10px; padding: 1rem; border: 3px solid #0B2545; text-align: center; }
.coloring img { width: 100%; height: auto; filter: url(#lines); background: #fff; margin: 0 auto; max-width: 780px; }
.coloring h2 { font-size: 1.4rem; margin-bottom: .6rem; }
.phones { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: center; }
.phone-wall { width: min(100%, 300px); }
.wall { position: relative; aspect-ratio: 9 / 19.5; overflow: hidden; border-radius: 28px; border: 3px solid var(--gold); isolation: isolate; box-shadow: var(--shadow); background: #0D2144; display: flex; flex-direction: column; justify-content: flex-end; text-align: center; padding: 1.6rem 1.2rem 2.4rem; container-type: inline-size; }
.wall img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.wall::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(var(--night-rgb), .92) 0%, rgba(var(--night-rgb), .6) 38%, rgba(var(--night-rgb), .05) 70%); }
.wall .motto { font: 700 9cqw/1.15 var(--serif); color: #FBF4E3; margin: 0 0 .6rem; max-width: none; } .wall .es { font: italic 5cqw/1.3 var(--serif); color: #FFE29A; margin: 0 0 .8rem; max-width: none; } .wall .cr { font: 800 3.4cqw var(--sans); letter-spacing: .18em; text-transform: uppercase; color: #2EC4B6; margin: 0; max-width: none; }
.wall:fullscreen { width: 100vw; height: 100vh; aspect-ratio: auto; border-radius: 0; border: 0; }
.print-hint { opacity: .95; }

@media print {
  @page { margin: 10mm; }
  body { background: #fff !important; color: #0B2545; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body::before, body::after, .skip, .site-header, .support-strip, .site-footer, .freebie-head, .no-print, .listen, .listen-note, .size-label.screen-only { display: none !important; }
  .sheets { padding: 0; } .shell { width: 100%; }
  .sheet { box-shadow: none; border: 0; border-radius: 0; padding: 0; margin: 0; max-width: none; background: #fff; break-after: page; }
  .sheet:last-child { break-after: auto; }
  .sheet .credit { color: #0B2545; }
  .cards-grid-6 { gap: 6mm; } .wcard { min-height: 68mm; padding: 4mm; }
  .kcards { gap: 4mm; } .kcard { min-height: 49mm; }
  .bookmarks { gap: 6mm; } .bookmark { width: 50mm; height: 150mm; }
  .bookmark img { height: 78mm; }
  @page sign-s { size: 4in 6in; margin: 0; } @page sign-m { size: 5in 7in; margin: 0; } @page sign-l { size: 8.5in 11in; margin: 0; } @page sign-p { size: 11in 17in; margin: 0; }
  .signs { display: block; } .signs .size-wrap { break-after: page; }
  .sign { border-radius: 0; border-width: 4px; margin: 0; }
  .sz-s { width: 4in; height: 6in; } .sz-m { width: 5in; height: 7in; } .sz-s, .sz-m { margin: 12mm auto 0; } .sz-l { page: sign-l; width: 8.5in; height: 11in; } .sz-p { page: sign-p; width: 11in; height: 17in; }
  .coloring { border: 0; padding: 0; }
  .phones { display: block; } .phone-wall { break-after: page; width: 100mm; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) { .lang-card::after { animation: none; } .lang-card { transition: none; } .lang-card:hover, .lang-card:focus-within { transform: none; } }
.strip-free { flex-basis: 100%; margin: 0; font-size: .95rem; } .strip-free a { color: var(--sunshine-t); }

@media (max-width: 640px) {
  .glance thead, .hellos thead { position: absolute; left: -9999px; }
  .glance, .glance tbody, .glance tr, .glance td, .glance th, .hellos, .hellos tbody, .hellos tr, .hellos td, .hellos th { display: block; width: 100%; }
  .glance caption { display: block; }
  .glance tr, .hellos tr { padding: .7rem 0; border-bottom: 1px solid rgba(var(--gold-rgb), .5); }
  .glance th, .glance td, .hellos th, .hellos td { border: 0; padding: .15rem 0; }
  .glance td::before, .hellos td::before { content: attr(data-label) ": "; font-weight: 800; color: var(--gold-light); }
  .hellos td::before { color: #0B2545; }
}

.lang-card .greet, .wcard .big, .card-pic.wash span, .kcard .k1 { text-wrap: balance; }
[lang="ko"] { word-break: keep-all; }
.sheet .credit, .sheets > .credit { margin-inline: auto; max-width: 52rem; }
.card-pic.wash { font-size: clamp(1.3rem, 2.3vw, 1.75rem); }
.signs { grid-template-columns: minmax(0, 1fr); }
.signs .size-wrap { width: 100%; display: flex; flex-direction: column; align-items: center; }

.sign { display: block; padding: 0; gap: 0; }
.sign-in { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3cqw; padding: 8cqw 6cqw; }
.sheets > .credit { text-align: center; }

/* ======== round 4: card studio ======== */
.studio { display: grid; gap: 2rem; grid-template-columns: minmax(280px, 460px) 1fr; align-items: start; padding-bottom: 3rem; }
.studio-preview { position: sticky; top: 90px; }
.studio-preview canvas { width: 100%; height: auto; display: block; border-radius: 14px; box-shadow: var(--shadow); border: 1px solid rgba(var(--gold-rgb), .6); background: var(--field); }
.studio-controls fieldset { margin: 0 0 1.2rem; padding: 1.2rem 1.4rem 1.4rem; border: 1px solid rgba(var(--gold-rgb), .5); border-radius: var(--radius); background: rgba(var(--panel-rgb), .7); min-width: 0; }
.studio-controls legend { font: 700 1.25rem var(--serif); color: var(--gold-light); padding: 0 .5rem; }
.studio label { display: block; font-weight: 700; margin: .8rem 0 .3rem; }
.studio .check { display: flex; gap: .6rem; align-items: center; font-weight: 600; margin: .5rem 0; }
.studio .check input { width: 1.3rem; height: 1.3rem; accent-color: var(--gold); }
.studio input[type="text"], .studio textarea, .studio select { width: 100%; padding: .75rem .9rem; font: 1rem var(--sans); color: var(--cream); background: var(--field); border: 2px solid rgba(var(--gold-rgb), .7); border-radius: 10px; }
.studio textarea { resize: vertical; min-height: 7rem; }
.studio .two { display: grid; gap: .8rem; grid-template-columns: 1fr 1fr; }
.studio .count { font-size: .9rem; opacity: .9; margin: .3rem 0 0; }
.fam-h { font: 700 1.05rem var(--sans); letter-spacing: .06em; margin: 1rem 0 .4rem; color: var(--aqua-t); }
.fam-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: .6rem; }
.pick { background: rgba(var(--cream-rgb), .05); border: 2px solid rgba(var(--gold-rgb), .45); border-radius: 12px; padding: .4rem; color: var(--cream); cursor: pointer; text-align: center; font: inherit; }
.pick canvas { width: 100%; height: auto; border-radius: 8px; display: block; }
.pick span { display: block; font-size: .78rem; line-height: 1.25; margin-top: .35rem; }
.pick:hover { border-color: var(--gold); }
.pick[aria-pressed="true"] { border-color: var(--sunshine); box-shadow: 0 0 0 3px rgba(var(--sun-rgb), .45); background: rgba(var(--sun-rgb), .12); }
.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .6rem; }
.btn-row .btn { cursor: pointer; font: 800 1rem var(--sans); }
.btn-row a.btn.ghost, .btn-row button.btn.ghost { color: var(--cream); }
@media (max-width: 980px) { .studio { grid-template-columns: 1fr; } .studio-preview { position: static; max-width: 420px; margin-inline: auto; } }
@media (max-width: 600px) { .btn-row .btn { width: 100%; text-align: center; } .studio .two { grid-template-columns: 1fr; } }
.teaser { display: grid; gap: 1.2rem; grid-template-columns: repeat(4, 1fr); }
.teaser canvas { width: 100%; height: auto; display: block; border-radius: 12px; border: 1px solid rgba(var(--gold-rgb), .6); box-shadow: var(--shadow); transition: transform .3s ease; }
.teaser a:hover canvas, .teaser a:focus-visible canvas { transform: translateY(-6px) rotate(-.6deg); }
@media (max-width: 900px) { .teaser { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { .teaser canvas { transition: none; } .teaser a:hover canvas { transform: none; } }
#print-sheet { display: none; }
@media print {
  body.printing-cards > *:not(main) { display: none !important; }
  body.printing-cards main > *:not(#print-sheet) { display: none !important; }
  body.printing-cards #print-sheet { display: grid; grid-template-columns: 1fr 1fr; gap: 10mm; width: 100%; padding: 6mm 0; }
  #print-sheet .cut { position: relative; break-inside: avoid; }
  #print-sheet .cut img { width: 100%; height: auto; display: block; }
  #print-sheet .cut::after { content: ''; position: absolute; inset: -6mm; pointer-events: none; background: linear-gradient(#000, #000) 0 6mm / 4mm .25mm no-repeat, linear-gradient(#000, #000) 6mm 0 / .25mm 4mm no-repeat, linear-gradient(#000, #000) 100% 6mm / 4mm .25mm no-repeat, linear-gradient(#000, #000) calc(100% - 6mm) 0 / .25mm 4mm no-repeat, linear-gradient(#000, #000) 0 calc(100% - 6mm) / 4mm .25mm no-repeat, linear-gradient(#000, #000) 6mm 100% / .25mm 4mm no-repeat, linear-gradient(#000, #000) 100% calc(100% - 6mm) / 4mm .25mm no-repeat, linear-gradient(#000, #000) calc(100% - 6mm) 100% / .25mm 4mm no-repeat; }
}

/* ======== round 4b: printables (A4 and US Letter, black-and-white safe) ======== */
.print-bar { display: flex; flex-wrap: wrap; gap: .8rem 1.3rem; align-items: center; margin-top: 1.2rem; }
.print-bar label { font-weight: 700; display: inline-flex; gap: .5rem; align-items: center; }
.print-bar select { padding: .55rem .8rem; font: 1rem var(--sans); color: var(--cream); background: var(--field); border: 2px solid rgba(var(--gold-rgb), .7); border-radius: 10px; }
.print-bar input[type="checkbox"] { width: 1.25rem; height: 1.25rem; accent-color: var(--gold); }
.print-bar .btn { cursor: pointer; font: 800 1rem var(--sans); }
.sheet.land { max-width: 1100px; }
.sheet .cards8 { display: grid; grid-template-columns: 1fr 1fr; gap: 4mm; grid-auto-rows: minmax(58mm, auto); }
.pcard { border: 2px dashed #0B2545; border-radius: 4mm; padding: 4mm; display: flex; flex-direction: column; justify-content: space-between; background: #fff; color: #0B2545; break-inside: avoid; }
.pcard p { max-width: none; margin: 0; color: #0B2545; }
.pcard .t { font: 800 .72rem var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.pcard .m { font: 700 1.1rem/1.25 var(--serif); }
.pcard .wr { border-bottom: 1.5px solid #0B2545; height: 6.5mm; margin-top: 1mm; }
.pcard .s { font-size: .75rem; }
.pcard.back { align-items: center; text-align: center; justify-content: center; gap: 3mm; border-style: solid; }
.pcard.back .big { font: 700 1.5rem var(--serif); }
.jar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3mm; }
.slip { border: 1.5px dashed #0B2545; padding: 3mm; min-height: 33mm; display: flex; flex-direction: column; justify-content: space-between; background: #fff; break-inside: avoid; }
.slip p { margin: 0; max-width: none; color: #0B2545; } .slip .p { font: 700 1rem/1.2 var(--serif); } .slip .l { border-bottom: 1.5px solid #0B2545; height: 6mm; } .slip .s { font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }
.jar-label { border: 3px solid #0B2545; border-radius: 3mm; text-align: center; padding: 4mm; margin-bottom: 4mm; background: #fff; } .jar-label h2 { margin: 0; font-size: 1.8rem; color: #0B2545; }
.bingo-head, .bingo-grid { display: grid; grid-template-columns: repeat(5, 1fr); }
.bingo-head span { text-align: center; font: 800 2rem var(--serif); border: 3px solid #0B2545; background: #fff; color: #0B2545; padding: 2mm 0; }
.bingo-grid .c { border: 2px solid #0B2545; min-height: 29mm; display: flex; align-items: center; justify-content: center; text-align: center; padding: 2mm; font: 600 .86rem/1.2 var(--sans); background: #fff; color: #0B2545; }
.bingo-grid .c.free { font: 800 1.1rem var(--serif); background: #fff; border-width: 4px; }
.coupons { display: grid; grid-template-columns: 1fr 1fr; gap: 4mm; grid-auto-rows: minmax(52mm, auto); }
.coupon { border: 3px double #0B2545; border-radius: 3mm; padding: 4mm; text-align: center; background: #fff; color: #0B2545; display: flex; flex-direction: column; justify-content: center; gap: 2mm; break-inside: avoid; }
.coupon p { margin: 0; max-width: none; color: #0B2545; } .coupon .gf { font: 800 .72rem var(--sans); letter-spacing: .16em; text-transform: uppercase; } .coupon .what { font: 700 1.4rem/1.15 var(--serif); } .coupon .wr { border-bottom: 1.5px solid #0B2545; height: 7mm; } .coupon .s { font-size: .7rem; }
.journal { display: grid; gap: 3mm; }
.jday { border: 2px solid #0B2545; border-radius: 3mm; padding: 3mm 4mm; display: grid; grid-template-columns: 24mm 1fr; gap: 4mm; background: #fff; break-inside: avoid; }
.jday h3 { margin: 0; font-size: 1rem; color: #0B2545; } .jday p { margin: 0; max-width: none; color: #0B2545; font-size: .85rem; } .jday .wr { border-bottom: 1.2px solid #0B2545; height: 5.5mm; }
.zine { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr 1fr; border: 1px solid #0B2545; position: relative; }
.zpanel { border: 1.5px dashed #0B2545; aspect-ratio: 1 / 1.3; padding: 5mm; display: flex; flex-direction: column; justify-content: center; text-align: center; gap: 3mm; background: #fff; color: #0B2545; overflow: hidden; }
.zpanel.rot { transform: rotate(180deg); } .zpanel p { margin: 0; max-width: none; color: #0B2545; } .zpanel .n { font: 800 .75rem var(--sans); letter-spacing: .14em; text-transform: uppercase; } .zpanel .w { font: 700 1.15rem/1.25 var(--serif); } .zpanel .big { font: 700 1.6rem/1.15 var(--serif); }
.zine-cut { position: absolute; left: 25%; right: 25%; top: calc(50% - 1px); border-top: 4px solid #fff; z-index: 2; } .zine-cut span { position: absolute; left: 50%; top: -1.3em; transform: translateX(-50%); background: #fff; padding: 0 .4em; font: 700 .7rem var(--sans); color: #0B2545; }
.zine-note { font-size: .85rem; max-width: 60rem; }
.cert { border: 3px solid #0B2545; padding: 6mm; background: #fff; color: #0B2545; } .cert-in { border: 1.5px solid #0B2545; padding: 12mm 10mm; text-align: center; display: flex; flex-direction: column; gap: 5mm; align-items: center; min-height: 150mm; justify-content: center; }
.cert h2 { font-size: 2.4rem; color: #0B2545; margin: 0; } .cert p { margin: 0; max-width: none; color: #0B2545; } .cert .small { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; } .cert .name { border-bottom: 2px solid #0B2545; width: 70%; height: 10mm; } .cert .row { display: flex; gap: 12mm; width: 80%; justify-content: space-between; } .cert .row span { flex: 1; border-top: 1.5px solid #0B2545; padding-top: 1mm; font-size: .8rem; }
.cert.alt { border-style: double; border-width: 6px; border-radius: 6mm; } .cert.alt .cert-in { border-style: dashed; border-radius: 4mm; }
.cert svg { width: 28mm; height: 28mm; }
.det-box { border: 2px solid #0B2545; border-radius: 3mm; padding: 4mm; background: #fff; color: #0B2545; margin-bottom: 4mm; break-inside: avoid; } .det-box h3 { margin: 0 0 2mm; color: #0B2545; } .det-box p, .det-box li { color: #0B2545; max-width: none; }
.clues { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.5mm; } .clues li { display: grid; grid-template-columns: 8mm 1fr; gap: 3mm; align-items: center; font-size: 1.05rem; } .clues .tb { width: 7mm; height: 7mm; border: 2px solid #0B2545; border-radius: 1.5mm; background: #fff; }
.draw-area { height: 55mm; border: 2px dashed #0B2545; border-radius: 3mm; }
.nnote { border: 2px solid #0B2545; border-radius: 3mm; padding: 5mm; background: #fff; color: #0B2545; display: flex; flex-direction: column; gap: 2.5mm; break-inside: avoid; } .nnote p { margin: 0; max-width: none; color: #0B2545; } .nnote .big { font: 700 1.5rem/1.15 var(--serif); } .nnote .wr { border-bottom: 1.5px solid #0B2545; height: 6.5mm; } .nnote .s { font-size: .75rem; }
.notes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5mm; }
body.large-print .sheet p, body.large-print .sheet li, body.large-print .sheet td, body.large-print .bingo-grid .c, body.large-print .clues li { font-size: 1.3em; }
body.large-print .pcard .m, body.large-print .slip .p, body.large-print .coupon .what { font-size: 1.45em; }
body.bw-print .sheet, body.bw-print .sheet * { background: #fff !important; color: #000 !important; border-color: #000 !important; text-shadow: none !important; box-shadow: none !important; }
@media print {
  .sheet.land { page: land; max-width: none; }
  .sheet .cards8, .coupons, .jar, .journal { break-inside: auto; }
  .sheet .cards8 { grid-auto-rows: 58mm; } .coupons { grid-auto-rows: 52mm; }
  .bingo-grid .c { min-height: 30mm; }
  .cert-in { min-height: 140mm; }
  .zine { margin-top: 5mm; }
  .zine-cut { border-top-color: #fff; }
  .print-bar, .print-hint { display: none !important; }
  .sheet h2 { font-size: 1.2rem; }
}
@page land { size: landscape; margin: 8mm; }
@media print { body.paper-a4 .sz-l { width: 210mm; height: 297mm; } }
.sheet.poster-sign { background: transparent; border: 0; padding: 0; box-shadow: none; }
.sheet .cards8 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .jar { grid-template-columns: repeat(3, minmax(0, 1fr)); } .coupons, .notes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bingo-head, .bingo-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sheet * { min-width: 0; overflow-wrap: anywhere; }
.bingo-grid .c { font-size: clamp(.58rem, 2.3vw, .86rem); padding: 1mm; }
.bingo-head span { font-size: clamp(1.2rem, 5vw, 2rem); }
@media (max-width: 600px) { .sheet { padding: .8rem; } .pcard .m { font-size: .95rem; } .zine { grid-template-columns: repeat(4, minmax(0, 1fr)); } .zpanel { padding: 1.5mm; } .zpanel .w { font-size: .55rem; } .zpanel .big { font-size: .8rem; } .zpanel .n { font-size: .45rem; letter-spacing: 0; } }
@media print {
  .sheets > .credit { display: none; }
  .cert-in { min-height: 105mm; padding: 8mm; gap: 3mm; } .cert h2 { font-size: 2rem; } .cert svg { width: 20mm; height: 20mm; }
  .kcard { min-height: 45mm; } .kcards { gap: 3mm; }
  .zpanel { aspect-ratio: 1 / 1.08; padding: 3mm; gap: 2mm; } .zpanel .w { font-size: 1rem; }
  .sheet .cards8 { grid-auto-rows: 54mm; } .coupons { grid-auto-rows: 50mm; }
  .wcard { min-height: 66mm; }
}
@media print {
  .sheet.land { break-after: auto; } .sheet.land + .sheet.land { break-before: page; }
  .bookmarks { gap: 5mm; } .bookmark { width: 40mm; height: 140mm; } .bookmark img { height: 70mm; } .bookmark h3 { font-size: 1.1rem; } .bookmark p { font-size: .7rem; }
  .journal { gap: 2mm; } .jday { padding: 2mm 3mm; } .jday .wr { height: 4.5mm; }
  .slip { min-height: 27mm; } .jar-label { margin-bottom: 3mm; padding: 3mm; }
  .draw-area { height: 38mm; } .det-box { margin-bottom: 3mm; padding: 3mm; }
}
@media print { body[data-orient="land"] .sheet.land { page: auto; } }
@page { margin: 10mm; }

/* ======== kindness call-out ======== */
.ways { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); counter-reset: way; }
.way { counter-increment: way; position: relative; padding: 2rem 1.6rem 1.6rem; border-radius: var(--radius); border: 1px solid rgba(var(--gold-rgb), .5); background: linear-gradient(160deg, rgba(var(--panel2-rgb), .8), rgba(var(--panel-rgb), .75)); box-shadow: var(--shadow); }
.way::before { content: counter(way); position: absolute; top: -1rem; left: 1.4rem; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--foil); color: var(--on-accent); font: 800 1.1rem/2.2rem var(--sans); text-align: center; }
.way h3 { font-size: 1.5rem; } .way .btn { margin-top: .6rem; }
.rules { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: .8rem; }
.rules li { padding: 1rem 1.2rem 1rem 3rem; position: relative; border-radius: 14px; background: rgba(var(--aqua-rgb), .09); border: 1px solid rgba(var(--aqua-rgb), .45); }
.rules li::before { content: ''; position: absolute; left: 1.1rem; top: 1.2rem; width: .9rem; height: .9rem; border-radius: 50%; background: var(--aqua); }
.panel-light .rules li { background: rgba(10, 107, 99, .07); border-color: rgba(10, 107, 99, .5); }
.wall-empty, .wall-list { margin-top: 1.5rem; }
.wall-empty { padding: 2.4rem 1.6rem; text-align: center; border: 2px dashed rgba(var(--gold-rgb), .7); border-radius: var(--radius); background: rgba(var(--panel-rgb), .6); }
.wall-empty h3 { font-size: 2rem; }
.wall-list { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.wall-card { padding: 1.5rem; border-radius: var(--radius); border: 1px solid rgba(var(--gold-rgb), .5); background: linear-gradient(160deg, rgba(var(--panel2-rgb), .85), rgba(var(--panel-rgb), .8)); box-shadow: var(--shadow); }
.wall-text { font: 1.2rem/1.45 var(--serif); margin: 0 0 .8rem; max-width: none; } .wall-by { margin: 0; color: var(--aqua-t); font-weight: 700; max-width: none; }
.challenge { padding: 2rem; border-radius: var(--radius); border: 2px solid var(--leaf); background: rgba(var(--leaf-rgb), .08); }
.challenge .theme { font: 700 1.6rem var(--serif); color: var(--gold-light); margin: 0 0 .5rem; max-width: none; }

/* ======== technology ======== */
.pg-technology { --accent-page: var(--harbor-blue); }
.tier-legend { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.tier-legend li { display: flex; gap: .9rem; align-items: flex-start; padding: 1.1rem 1.2rem; border-radius: 14px; border: 1px solid rgba(var(--gold-rgb), .45); background: rgba(var(--panel-rgb), .7); max-width: none; }
.tchip { display: inline-block; font: 800 .8rem/1 var(--sans); letter-spacing: .04em; padding: .4rem .65rem; border-radius: 999px; color: #06231F; white-space: nowrap; }
.t-F0 { background: var(--emerald); } .t-F1 { background: var(--harbor-blue); } .t-F2 { background: var(--lavender); } .t-F3 { background: var(--rose); }
.count { font-size: .9rem; opacity: .9; }
.honest { border: 2px solid var(--rose); border-radius: var(--radius); padding: 1.4rem 1.6rem; background: rgba(var(--panel-rgb), .75); }
.honest h2 { font-size: 1.7rem; margin-bottom: .4em; }
.questions { counter-reset: q; list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: .8rem; }
.questions li { counter-increment: q; padding: 1rem 1.2rem 1rem 3.4rem; position: relative; border-radius: 14px; background: rgba(10, 107, 99, .07); border: 1px solid rgba(10, 107, 99, .45); max-width: none; }
.questions li::before { content: counter(q); position: absolute; left: 1rem; top: .9rem; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: #0B2545; color: #FBF4E3; font: 800 .95rem/1.8rem var(--sans); text-align: center; }
.tech-tools { display: grid; gap: 1rem 1.5rem; grid-template-columns: 1fr 1fr; align-items: start; margin-bottom: 1.2rem; }
.tech-tools label { font-weight: 700; display: block; margin-bottom: .3rem; }
.tech-tools input[type="search"], .tech-tools select { width: 100%; padding: .75rem .9rem; font: 1rem var(--sans); color: var(--cream); background: var(--field); border: 2px solid rgba(var(--gold-rgb), .7); border-radius: 10px; }
.tech-tools .checks { display: grid; gap: .3rem; } .tech-tools .check { display: flex; gap: .6rem; align-items: center; font-weight: 600; } .tech-tools .check input { width: 1.2rem; height: 1.2rem; accent-color: var(--gold); }
@media (max-width: 760px) { .tech-tools { grid-template-columns: 1fr; } }
.tech { border-top: 1px solid rgba(var(--gold-rgb), .35); }
.tech:last-child { border-bottom: 1px solid rgba(var(--gold-rgb), .35); }
.tech summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 4.2rem minmax(0, 1fr) auto; gap: .2rem 1rem; padding: 1.1rem .4rem; align-items: start; }
.tech summary::-webkit-details-marker { display: none; }
.tech summary:hover { background: rgba(var(--blue-rgb), .08); }
.tech .tid { font: 700 .9rem var(--sans); opacity: .85; padding-top: .35rem; }
.tech .tn { font: 700 1.3rem/1.2 var(--serif); }
.tech .tchip { grid-column: 3; grid-row: 1; }
.tech .ts { grid-column: 2 / 4; opacity: .92; max-width: 70ch; }
.tech[open] summary { background: rgba(var(--blue-rgb), .1); }
.tbody { padding: .5rem .6rem 1.6rem 5.2rem; }
.tbody h4 { margin: 1.3rem 0 .3rem; font: 800 .85rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--aqua-t); }
.tbody p { max-width: 70ch; }
.tfacts { display: grid; gap: .5rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin: 0 0 .5rem; padding: .9rem 0; border-block: 1px solid rgba(var(--cream-rgb), .2); }
.tfacts dt { font: 700 .78rem var(--sans); letter-spacing: .1em; text-transform: uppercase; opacity: .8; } .tfacts dd { margin: 0; }
.tnote { padding: .8rem 1rem; border-left: 4px solid var(--leaf); background: rgba(var(--leaf-rgb), .08); border-radius: 0 10px 10px 0; } .tnote-by { opacity: .85; font-size: .9rem; }
@media (max-width: 700px) { .tech summary { grid-template-columns: 1fr; } .tech .tchip, .tech .ts { grid-column: 1; grid-row: auto; justify-self: start; } .tbody { padding-left: .6rem; } .tech .tn { font-size: 1.2rem; } }
@media print { .tech { break-inside: avoid; } .tech > summary { display: block; } .tech:not([open]) > .tbody { display: block; } .tech-tools { display: none; } }
.tech summary > * { min-width: 0; }
@media (max-width: 700px) { .tech .tchip { white-space: normal; line-height: 1.25; border-radius: 12px; } }
.tech { scroll-margin-top: 90px; }

.tierbar { display: flex; height: 2.4rem; border-radius: 999px; overflow: hidden; border: 1px solid rgba(var(--gold-rgb), .6); margin: 0 0 1.4rem; }
.tierbar span { display: flex; align-items: center; justify-content: center; font: 800 .82rem var(--sans); color: #06231F; min-width: .8rem; white-space: nowrap; }
.tactions { display: flex; flex-wrap: wrap; gap: .6rem; }
.pg-technology .tech-tools { position: relative; padding: 1.2rem 1.4rem; border: 1px solid rgba(var(--gold-rgb), .45); border-radius: var(--radius); background: rgba(var(--panel-rgb), .6); }

/* ======== technology v2: humane, alive, readable ======== */
.hero-art { width: 100%; height: auto; display: block; }
.hero-art .ln { fill: none; stroke: var(--cream); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hero-art .ln.thin { stroke-width: 1.3; opacity: .7; }
.hero-art .dot { fill: var(--sunshine); stroke: none; }
.hero-art .fillsoft { fill: rgba(var(--cream-rgb), .14); }
.doors { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.door-btn { all: unset; box-sizing: border-box; cursor: pointer; display: block; width: 100%; border: 1px solid rgba(var(--gold-rgb), .55); border-radius: var(--radius); overflow: hidden; background: var(--panel); }
.door-btn:hover { border-color: var(--sunshine); transform: translateY(-2px); }
.door-btn:focus-visible { outline: 3px solid var(--sunshine); outline-offset: 3px; }
.door-text { display: block; padding: .9rem 1rem 1.1rem; }
.door-name { display: block; font: 700 1.2rem/1.2 var(--serif); margin-bottom: .3rem; }
.door-blurb { display: block; font-size: .95rem; opacity: .9; }
.door-count { display: block; margin-top: .5rem; font-weight: 800; font-size: .85rem; color: var(--aqua-t); }
.cat-banner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(var(--gold-rgb), .55); margin-bottom: 1.2rem; background: var(--panel); }
.cat-banner[hidden] { display: none; }
.cat-banner-text { padding: 1.2rem 1.4rem; align-self: center; } .cat-banner-text h3 { margin-bottom: .3rem; }
@media (max-width: 700px) { .cat-banner { grid-template-columns: 1fr; } }
.climb { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; align-items: end; counter-reset: rung; }
.rung { border: 1px solid rgba(var(--gold-rgb), .5); border-radius: var(--radius); padding: 1rem 1.1rem; background: var(--panel); position: relative; }
.rung-F3 { min-height: 14rem; } .rung-F2 { min-height: 17rem; } .rung-F1 { min-height: 20rem; } .rung-F0 { min-height: 23rem; }
.rung-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .3rem; } .rung-head h3 { margin: 0; }
.rung-line { font-size: .95rem; opacity: .92; margin-bottom: .4rem; }
.rung:not(:last-child)::after { content: "\2192"; position: absolute; right: -.95rem; top: .7rem; color: var(--gold-light); font-size: 1.4rem; z-index: 2; }
.rung-list summary { cursor: pointer; font-weight: 700; color: var(--sunshine-t); padding: .3rem 0; }
.chips { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; max-height: 22rem; overflow: auto; }
.lchip { display: inline-block; padding: .35rem .6rem; border-radius: 999px; border: 1px solid rgba(var(--cream-rgb), .6); font-size: .85rem; line-height: 1.25; text-decoration: none; color: var(--cream); }
.lchip:hover, .lchip:focus-visible { background: rgba(var(--sun-rgb), .2); }
.lchip.is-pending { border-style: dotted; border-width: 2px; }
.lid { font-weight: 800; opacity: .8; }
@media (max-width: 900px) { .climb { grid-template-columns: 1fr; } .rung { min-height: 0 !important; } .rung:not(:last-child)::after { content: "\2193"; right: 1rem; top: auto; bottom: -1.2rem; } .chips { max-height: 18rem; } }
.verify { margin-top: 1.6rem; } .verify-h { margin-bottom: .6rem; }
.verifybar { display: flex; min-height: 2.4rem; border-radius: 999px; overflow: hidden; border: 1px solid rgba(var(--gold-rgb), .6); }
.verifybar span { display: flex; align-items: center; justify-content: center; font: 800 .82rem var(--sans); color: #06231F; min-width: 1.6rem; white-space: nowrap; padding: 0 .5rem; }
.v-ck { background: var(--emerald); } .v-pd { background: var(--lavender); } .v-un { background: var(--cream); }
.verify-note { margin-top: .9rem; max-width: 62ch; }
.readbar { display: grid; grid-template-columns: auto 1fr; gap: .6rem 1.4rem; align-items: center; padding: 1rem 1.4rem; border: 1px solid rgba(var(--gold-rgb), .55); border-radius: var(--radius); background: rgba(var(--panel-rgb), .7); }
.readbar-title { font-size: 1.4rem; margin: 0; } .readbar-note { margin: 0; font-size: .85rem; opacity: .85; }
.readbar-btns { display: flex; gap: .7rem; flex-wrap: wrap; justify-self: end; }
.readbar-help { grid-column: 1 / -1; margin: 0; font-size: .95rem; opacity: .92; }
.btn[aria-pressed="true"] { background: var(--foil); color: var(--on-accent); }
@media (max-width: 700px) { .readbar { grid-template-columns: 1fr; } .readbar-btns { justify-self: start; } }
html.mode-big { font-size: 125%; }
.tech .tp, .tech .th { grid-column: 2 / 4; } .tech .tp { display: none; }
.th { display: flex; flex-wrap: wrap; gap: .35rem; }
.htag { display: inline-block; font: 700 .75rem/1 var(--sans); padding: .3rem .55rem; border-radius: 999px; border: 1px solid rgba(var(--cream-rgb), .7); color: var(--cream); }
.tplain, .twhy, .thelps { margin-bottom: .6rem; }
.tsource { margin-top: 1rem; padding: .9rem 1.1rem; border-radius: 14px; border: 1px solid rgba(var(--gold-rgb), .5); background: rgba(var(--panel-rgb), .5); }
.tsource h4 { margin-top: 0; } .tstat { margin-bottom: .4rem; }
.sbadge { display: inline-block; font-weight: 800; font-size: .85rem; padding: .3rem .7rem; border-radius: 999px; color: #06231F; background: var(--emerald); }
.st-pending .sbadge { background: var(--lavender); } .st-unchecked .sbadge { background: var(--cream); }
.tpend, .tchk { font-size: .92rem; opacity: .92; margin-bottom: .3rem; }
.tech[data-status="pending"] > summary .tid::after { content: " \00b7 pending"; font-size: .7rem; }
body.mode-plain .tech .ts, body.mode-plain .tech .tdetail { display: none; }
body.mode-plain .tech .tp { display: block; font-size: 1.05rem; }
body.mode-plain .tech .tplain { display: none; }
.citygrid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.citycard { padding: 1.1rem 1.2rem; border: 1px solid rgba(var(--gold-rgb), .5); border-radius: var(--radius); background: var(--panel); }
.cicon { width: 72px; height: 66px; margin-bottom: .4rem; }
.cicon .ln { fill: none; stroke: var(--sunshine); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .cicon .ln.thin { stroke-width: 1.6; opacity: .75; }
.cicon .dot { fill: var(--aqua); } .cicon .fillsoft { fill: rgba(var(--blue-rgb), .22); }
.draws { font-size: .92rem; margin-bottom: 0; } .mini { opacity: .8; font-size: .85em; }
#factsheet { display: none; }
@media print {
  body.printing-one { background: #fff !important; color: #000 !important; }
  body.printing-one::before { display: none !important; }
  body.printing-one > *:not(#factsheet) { display: none !important; }
  body.printing-one #factsheet { display: block !important; color: #000; background: #fff; font: 10.5pt/1.45 Arial, Helvetica, sans-serif; }
  #factsheet .fs-brand { font: 700 9pt Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; border-bottom: 2px solid #000; padding-bottom: 3pt; margin: 0 0 8pt; }
  #factsheet h1 { font: 700 20pt/1.15 Georgia, serif; color: #000; background: none; -webkit-text-fill-color: #000; margin: 0 0 4pt; }
  #factsheet .fs-meta { border: 1.5pt solid #000; padding: 5pt 7pt; margin: 0 0 8pt; font-weight: 700; }
  #factsheet h2 { font: 700 11pt Arial, sans-serif; color: #000; background: none; -webkit-text-fill-color: #000; margin: 9pt 0 2pt; border-bottom: .75pt solid #000; }
  #factsheet p { margin: 0 0 4pt; color: #000; }
  #factsheet .fs-foot { margin-top: 12pt; border-top: 1.5pt solid #000; padding-top: 5pt; font-size: 8.5pt; }
  #factsheet * { break-inside: avoid; }
}

.chips li { padding: 0; border: 0; background: none; border-radius: 0; max-width: none; box-shadow: none; }
.chips li::before, .chips li::after { content: none; }

/* ======== round 6: harbor, friends, songs, log, pet park, countries ======== */
.stop-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2rem; align-items: center; }
.stop:nth-of-type(even) .stop-media { order: 2; }
.stop-media { margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(var(--gold-rgb), .55); background: var(--panel); }
.stop-media img { width: 100%; height: auto; display: block; }
.stop-motif .stop-soon { margin: 0; padding: .7rem 1rem; font-size: .9rem; opacity: .9; }
.stop-tag { font: 700 1.25rem/1.3 var(--serif); color: var(--gold-light); margin-bottom: .5rem; }
.stop-note { font-size: .92rem; opacity: .85; }
@media (max-width: 800px) { .stop-grid { grid-template-columns: 1fr; } .stop:nth-of-type(even) .stop-media { order: 0; } }
.access-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.access-grid li { padding: 1.1rem 1.2rem; border: 1px solid rgba(var(--gold-rgb), .5); border-radius: var(--radius); background: var(--panel); }
.access-grid .cicon .ln { fill: none; stroke: var(--sunshine); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .access-grid .cicon .ln.thin { stroke-width: 1.6; opacity: .75; } .access-grid .cicon .dot { fill: var(--aqua); } .access-grid .cicon .fillsoft { fill: rgba(var(--blue-rgb), .22); }
.access-grid .cicon { width: 72px; height: 66px; }
.char-tag { font: 700 1.5rem/1.3 var(--serif); color: var(--gold-light); }
.char-plain { padding-block: 3rem; background: linear-gradient(160deg, var(--panel2), var(--panel)); }
.avatar.big { width: 6rem; height: 6rem; font-size: 3rem; display: grid; place-items: center; margin-bottom: 1rem; }
.char-body .split { align-items: start; }
.facts { margin: 0; padding-left: 1.2rem; display: grid; gap: .6rem; }
.episode, .picture-soon { padding: .9rem 1.1rem; border: 1px solid rgba(var(--gold-rgb), .5); border-radius: 14px; background: rgba(var(--panel-rgb), .5); }
.friend-links a { color: var(--sunshine-t); }
.meet-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.meet-card { display: block; text-decoration: none; color: var(--cream); border: 1px solid rgba(var(--gold-rgb), .55); border-radius: var(--radius); overflow: hidden; background: var(--panel); height: 100%; }
.meet-card:hover, .meet-card:focus-visible { border-color: var(--sunshine); }
.meet-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.meet-initial { display: grid; place-items: center; aspect-ratio: 4 / 3; font: 700 4rem var(--serif); background: linear-gradient(160deg, var(--panel2), var(--panel)); color: var(--gold-light); }
.meet-name { display: block; padding: .8rem 1rem 0; font: 700 1.2rem var(--serif); } .meet-line { display: block; padding: .2rem 1rem 1rem; opacity: .9; font-size: .95rem; }
.songs { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.song-card { padding: 1.1rem 1.2rem; border: 1px solid rgba(var(--gold-rgb), .5); border-radius: var(--radius); background: var(--panel); position: relative; max-width: none; }
.song-no { position: absolute; top: .8rem; right: 1rem; margin: 0; font: 700 .9rem var(--sans); opacity: .6; }
.song-card h3 { padding-right: 2rem; } .song-mood, .song-lang { font-size: .95rem; margin-bottom: .4rem; }
.soon-chip { display: inline-block; padding: .35rem .8rem; border-radius: 999px; border: 1.5px dashed var(--aqua); color: var(--aqua-t); font-weight: 800; font-size: .8rem; }
.song-note { margin-top: 1.2rem; font-size: .92rem; opacity: .85; }
.log-wrap { max-width: 46rem; } .log-intro { opacity: .9; }
.log-entry { padding: 1.4rem 0; border-top: 1px solid rgba(var(--gold-rgb), .4); } .log-entry h2 { font-size: 1.8rem; }
.earlier summary { cursor: pointer; font-weight: 700; color: var(--sunshine-t); padding: .5rem 0; }
.design-only { padding: 1.3rem 1.6rem; border: 2px dashed var(--aqua); border-radius: var(--radius); background: rgba(var(--panel-rgb), .6); max-width: 52rem; margin-inline: auto; text-align: center; }
.plans { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.plan { padding: 1.2rem 1.3rem; border: 1px solid rgba(var(--gold-rgb), .55); border-radius: var(--radius); background: var(--panel); max-width: none; }
.plan .price { font: 800 2rem var(--serif); color: var(--gold-light); margin-bottom: .3rem; } .plan .per { font: 600 .95rem var(--sans); opacity: .85; }
.plan-state, .plan-flag { font-weight: 800; font-size: .82rem; color: var(--aqua-t); margin-bottom: .4rem; }
.plan-list { margin: 0 0 .8rem; padding-left: 1.1rem; display: grid; gap: .3rem; font-size: .95rem; }
.countries { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.country { max-width: none; padding: 0; border: 0; background: none; }
.stops-li, .song-card::before, .plan::before, .country::before { content: none; }
.stop-media img { max-height: 480px; object-fit: cover; }

/* ======== round 7 step 1: spacing scale, soon buttons, pillar motifs ======== */
:root { --sp-1: .5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2.5rem; --sp-5: 4rem; --sp-6: 6rem; }
.pillar { overflow: hidden; }
.pillar .pillar-motif { display: block; width: calc(100% + 3.8rem); max-width: none; margin: -1.9rem -1.9rem 1.2rem; height: 64px; }
.pillar-motif .ln { fill: none; stroke: var(--cream); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .pillar-motif .ln.thin { stroke-width: 1.3; opacity: .7; } .pillar-motif .dot { fill: var(--sunshine); }
a.btn[data-soon], a.btn[aria-disabled="true"] { background: transparent; color: var(--cream); border: 2px dashed rgba(var(--cream-rgb), .55); box-shadow: none; cursor: not-allowed; font-weight: 700; }
a.btn[data-soon]:hover, a.btn[aria-disabled="true"]:hover { transform: none; filter: none; color: var(--cream); }
.soon { display: inline-block; margin-top: .4rem; font-size: .8rem; font-weight: 800; color: var(--aqua-t); letter-spacing: .04em; }

/* ======== round 7 step 2: Start here ======== */
.nav-start > a { border: 1.5px solid var(--gold); border-radius: 999px; padding: .35rem .8rem; }
.rotor { margin: 1.4rem 0 0; max-width: 46rem; }
.rotor-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.rotor-item { display: grid; gap: .2rem; padding: .9rem 1.1rem; border: 1px solid rgba(var(--gold-rgb), .5); border-radius: 16px; background: rgba(var(--night-rgb), .55); max-width: none; }
.rotor-chip { font: 800 .72rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--aqua-t); }
.rotor-greet { font: 700 1.6rem/1.25 var(--serif); color: var(--gold-light); }
.rotor-eng { font-size: .92rem; opacity: .9; font-style: italic; }
.rotor.is-rotating .rotor-list { display: block; }
.rotor.is-rotating .rotor-item { min-height: 9.5rem; animation: rotorIn .8s ease both; }
.rotor.is-rotating .rotor-greet { font-size: clamp(2rem, 5vw, 3.2rem); }
@keyframes rotorIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.rotor-ctrl { margin-top: .8rem; display: flex; gap: .6rem; }
.doorways { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.doorway { max-width: none; padding: 0; border: 1px solid rgba(var(--gold-rgb), .6); border-radius: var(--radius); overflow: hidden; background: var(--panel); display: flex; flex-direction: column; box-shadow: var(--shadow); transition: transform .3s ease, border-color .3s ease; }
.doorway:hover, .doorway:focus-within { transform: translateY(-6px); border-color: var(--sunshine); }
.doorway figure { margin: 0; } .doorway img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.doorway-body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.doorway-body h3 { font-size: 1.6rem; margin: 0; } .doorway-body p { margin: 0 0 .4rem; }
.doorway-links { margin-top: auto; display: flex; gap: .5rem; flex-wrap: wrap; }
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); counter-reset: how; }
.how-steps li { counter-increment: how; position: relative; max-width: none; padding: 2.4rem 1.4rem 1.4rem; border-radius: var(--radius); border: 1px solid rgba(var(--gold-rgb), .5); background: rgba(var(--panel-rgb), .65); }
.how-steps li::before { content: counter(how); position: absolute; top: -1rem; left: 1.2rem; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--foil); color: var(--on-accent); font: 800 1.1rem/2.2rem var(--sans); text-align: center; }
.how-steps h3 { margin-bottom: .4rem; }
@media (prefers-reduced-motion: reduce) { .rotor.is-rotating .rotor-item { animation: none; } .doorway { transition: none; } }
.rotor-item[hidden] { display: none; } .rotor-item .listen { justify-self: start; }

/* ======== round 7 step 3: welcome line, Read it your way, FAQ, contact ======== */
.utility-bar { background: rgba(var(--abyss-rgb), .92); border-bottom: 1px solid rgba(var(--gold-rgb), .3); font-size: .85rem; position: relative; }
.utility-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.2rem; }
.welcome-line { margin: 0; opacity: .92; } .welcome-line a { color: var(--sunshine-t); }
.ryw-btn { all: unset; cursor: pointer; display: inline-flex; gap: .45rem; align-items: center; padding: .2rem .7rem; border: 1px solid rgba(var(--cream-rgb), .6); border-radius: 999px; font-weight: 700; font-size: .82rem; color: var(--cream); white-space: nowrap; }
.ryw-btn:hover { border-color: var(--sunshine); } .ryw-btn:focus-visible { outline: 3px solid var(--sunshine); outline-offset: 3px; }
.ryw-btn span { font-family: var(--serif); color: var(--sunshine-t); }
.ryw-panel { position: absolute; right: 0; left: 0; top: 100%; z-index: 40; background: #050f1f; border-bottom: 2px solid var(--gold); box-shadow: 0 18px 40px rgba(0, 0, 0, .5); }
.ryw-panel[hidden] { display: none; }
.ryw-inner { display: flex; flex-wrap: wrap; gap: .7rem 1rem; align-items: center; padding-block: .9rem; }
.ryw-title { margin: 0; font: 700 1.05rem var(--serif); color: var(--gold-light); }
.ryw-switch { all: unset; cursor: pointer; padding: .45rem 1rem; border: 2px solid rgba(var(--cream-rgb), .6); border-radius: 999px; font-weight: 700; color: var(--cream); }
.ryw-switch[aria-checked="true"] { background: var(--foil); color: var(--on-accent); border-color: var(--gold); }
.ryw-switch[aria-checked="true"]::before { content: "\2713\00a0"; }
.ryw-switch:focus-visible { outline: 3px solid var(--sunshine); outline-offset: 3px; }
.ryw-note { margin: 0; font-size: .8rem; opacity: .8; }
@media (max-width: 560px) { .welcome-line { font-size: .78rem; } .ryw-btn { font-size: .75rem; } }
html.pref-reduce-motion *, html.pref-reduce-motion *::before, html.pref-reduce-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.pref-contrast { --cream: #FFFFFF; --panel: #04101F; --panel2: #0A1B36; --gold: #FFD166; }
html.pref-contrast body { background: #020812; }
html.pref-contrast body::before { display: none; }
html.pref-contrast p, html.pref-contrast li, html.pref-contrast .lead, html.pref-contrast .eyebrow, html.pref-contrast .e, html.pref-contrast figcaption, html.pref-contrast .count, html.pref-contrast small { opacity: 1 !important; color: #fff; }
html.pref-contrast a { color: #FFE29A; text-decoration: underline; }
html.pref-contrast .btn.ghost, html.pref-contrast .ryw-btn, html.pref-contrast .listen { border: 2px solid #fff; color: #fff; background: #000; }
html.pref-contrast .hero-band::after, html.pref-contrast .level-band.has-img::after { background: rgba(0, 0, 0, .86); }
html.pref-contrast .glass, html.pref-contrast .pillar, html.pref-contrast .tier, html.pref-contrast .card, html.pref-contrast .plan { background: #000; border: 2px solid #fff; }
html.pref-contrast .panel-light, html.pref-contrast .panel-light * { color: #000; }
html.pref-contrast :focus-visible { outline: 4px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 7px #000; }
.faq { border-top: 1px solid rgba(var(--gold-rgb), .4); max-width: 52rem; } .faq:last-of-type { border-bottom: 1px solid rgba(var(--gold-rgb), .4); }
.faq summary { cursor: pointer; font: 700 1.25rem/1.35 var(--serif); padding: 1.1rem .2rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; color: var(--sunshine-t); font-size: 1.6rem; line-height: 1; }
.faq[open] summary::after { content: "\2212"; } .faq-a { padding: 0 .2rem 1.2rem; max-width: 46rem; }
.faq-more { margin-top: 1.6rem; }
.prose { max-width: 48rem; } .prose h2 { font-size: 1.7rem; margin-top: 2rem; } .prose ul { display: grid; gap: .5rem; padding-left: 1.2rem; } .prose .callout { margin-top: 2.2rem; }
.contact-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.contact-card { max-width: none; padding: 1.2rem 1.3rem; border: 1px solid rgba(var(--gold-rgb), .5); border-radius: var(--radius); background: var(--panel); }
.search-wrap { max-width: 48rem; } .search-wrap label { display: block; font-weight: 700; margin-bottom: .4rem; }
.search-row { display: flex; gap: .7rem; } .search-row input { flex: 1; min-width: 0; padding: .85rem 1rem; font: 1.05rem var(--sans); color: var(--cream); background: var(--field); border: 2px solid rgba(var(--gold-rgb), .7); border-radius: 12px; }
.results { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .3rem; } .result { max-width: none; padding: .8rem .2rem; border-bottom: 1px solid rgba(var(--gold-rgb), .3); } .result a { font: 700 1.15rem var(--serif); } .result p { margin: .2rem 0 0; font-size: .95rem; opacity: .9; } .result-where { font-size: .85rem; opacity: .8; }
.utility-bar { position: static; }

/* ======== round 7 step 4: polish (rhythm, buttons, footer, motion) ======== */
.section { padding: clamp(3.2rem, 7vw, 5.5rem) 0; }
.section-head { margin-bottom: var(--sp-4); }
.section-head .lead { margin-bottom: 0; }
.tier { --px: 1.7rem; --py: 1.7rem; } .plan { --px: 1.3rem; --py: 1.2rem; }
.card-motif { display: block; width: calc(100% + 2 * var(--px)); max-width: none; margin: calc(-1 * var(--py)) calc(-1 * var(--px)) 1rem; height: 56px; }
.card-motif .ln { fill: none; stroke: var(--cream); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .card-motif .ln.thin { stroke-width: 1.3; opacity: .7; } .card-motif .dot { fill: var(--sunshine); }
.tier, .plan { overflow: hidden; }
.btn { transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease; }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn.ghost:hover { border-color: var(--sunshine); }
.btn.sm { padding: .6rem 1.1rem; }
a:not(.btn):not(.brand):not(.skip) { text-decoration-thickness: 1px; transition: color .2s ease, text-decoration-color .2s ease; }
a:not(.btn):hover { text-decoration-thickness: 2px; }
.pillar, .tier, .plan, .song-card, .access-grid li, .citygrid li, .contact-card, .meet-card, .door-btn, .doorway { transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.song-card:hover, .contact-card:hover, .access-grid li:hover, .citygrid li:hover, .plan:hover { transform: translateY(-4px); border-color: var(--sunshine); box-shadow: 0 16px 36px rgba(0, 0, 0, .35); }
.meet-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0, 0, 0, .35); }
:focus-visible { outline: 3px solid var(--sunshine); outline-offset: 3px; border-radius: 6px; }
.panel-light :focus-visible { outline-color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .btn, .song-card, .contact-card, .access-grid li, .citygrid li, .plan, .meet-card { transition: none; } .song-card:hover, .contact-card:hover, .access-grid li:hover, .citygrid li:hover, .plan:hover, .meet-card:hover { transform: none; } }
/* footer in groups */
.site-footer { padding: 3.5rem 0 2rem; }
.footer-grid { display: grid; gap: 2rem 2.5rem; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); align-items: start; }
.footer-brand p { max-width: 30rem; }
.footer-h { font: 800 .78rem var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--aqua-t); margin: 0 0 .8rem; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; } .footer-col li { max-width: none; padding: 0; margin: 0; }
.footer-col a { font-weight: 600; }
.footer-base { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid rgba(var(--gold-rgb), .25); }
@media (max-width: 1000px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 420px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; } }
/* rhythm: a quiet jewel band between plain sections */
.section.panel-light .faq summary, .section.panel-light .faq-a { color: var(--ink); }
.panel-light .faq { border-color: rgba(11, 37, 69, .35); } .panel-light .faq summary::after { color: var(--ink); }
.panel-light .callout { background: #fff; border: 1px solid rgba(11, 37, 69, .25); }
.panel-light .callout p, .panel-light .callout h2, .panel-light .callout h3 { color: var(--ink); -webkit-text-fill-color: var(--ink); }
.panel-light .log-entry { border-color: rgba(11, 37, 69, .25); } .panel-light .log-entry h2 { color: var(--ink); -webkit-text-fill-color: var(--ink); background: none; }

/* ======== round 7 step 5: print cleanup for every ordinary page (printables keep their own rules) ======== */
@media print {
  body:not([class*="pg-freebie"]):not(.pg-passout):not(.pg-sendcard):not(.pg-callout):not(.pg-thankyou) { background: #fff !important; color: #000 !important; font-size: 11pt; line-height: 1.45; }
  body:not([class*="pg-freebie"]):not(.pg-passout):not(.pg-sendcard):not(.pg-callout):not(.pg-thankyou)::before { display: none !important; }
  body:not([class*="pg-freebie"]):not(.pg-passout):not(.pg-sendcard):not(.pg-callout):not(.pg-thankyou) :is(.site-header, .support-strip, .utility-bar, .ryw-panel, .skip, .listen, .listen-note, .menu-button, .cta-row, .rotor-ctrl, .hero-light, .ribbon, .banner-ctrl, .tech-tools, .readbar-wrap, .doorway-links, .btn, .search-row) { display: none !important; }
  body:not([class*="pg-freebie"]):not(.pg-passout):not(.pg-sendcard):not(.pg-callout):not(.pg-thankyou) :is(.band-img, .hero-img, .pillar-motif, .card-motif, .hero-art) { display: none !important; }
  body:not([class*="pg-freebie"]):not(.pg-passout):not(.pg-sendcard):not(.pg-callout):not(.pg-thankyou) :is(.hero-band, .hero-xl, .section, .band, .panel-light, .level-band, .site-footer, .glass, .callout, .plan, .tier, .pillar, .song-card, .doorway, .rotor-item, .how-steps li) { background: none !important; color: #000 !important; box-shadow: none !important; border-color: #666 !important; min-height: 0 !important; padding-block: 8pt !important; }
  body:not([class*="pg-freebie"]):not(.pg-passout):not(.pg-sendcard):not(.pg-callout):not(.pg-thankyou) :is(h1, h2, h3, h4, p, li, a, span, summary, .foil, .lead, .eyebrow, .motto, .e, .o) { color: #000 !important; -webkit-text-fill-color: #000 !important; background: none !important; text-shadow: none !important; opacity: 1 !important; }
  body:not([class*="pg-freebie"]):not(.pg-passout):not(.pg-sendcard):not(.pg-callout):not(.pg-thankyou) a[href^="http"]:not(.btn)::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
  body:not([class*="pg-freebie"]):not(.pg-passout):not(.pg-sendcard):not(.pg-callout):not(.pg-thankyou) :is(.shell) { width: 100% !important; }
  body:not([class*="pg-freebie"]):not(.pg-passout):not(.pg-sendcard):not(.pg-callout):not(.pg-thankyou) :is(img, figure, .glass, .pillar, .plan, .song-card, .faq, .log-entry) { break-inside: avoid; }
  body:not([class*="pg-freebie"]):not(.pg-passout):not(.pg-sendcard):not(.pg-callout):not(.pg-thankyou) img { max-width: 70% !important; max-height: 90mm !important; height: auto !important; }
  body:not([class*="pg-freebie"]):not(.pg-passout):not(.pg-sendcard):not(.pg-callout):not(.pg-thankyou) .faq .faq-a { display: block !important; }
  body:not([class*="pg-freebie"]):not(.pg-passout):not(.pg-sendcard):not(.pg-callout):not(.pg-thankyou) .footer-grid { display: block !important; }
  body:not([class*="pg-freebie"]):not(.pg-passout):not(.pg-sendcard):not(.pg-callout):not(.pg-technology) .footer-col { display: none !important; }
}
@media print {
  body:not([class*="pg-freebie"]):not(.pg-passout):not(.pg-sendcard):not(.pg-callout):not(.pg-thankyou) :is(.hero-band, .level-band, .hero-xl)::before, body:not([class*="pg-freebie"]):not(.pg-passout):not(.pg-sendcard):not(.pg-callout):not(.pg-thankyou) :is(.hero-band, .level-band, .hero-xl)::after { display: none !important; }
  body:not([class*="pg-freebie"]):not(.pg-passout):not(.pg-sendcard):not(.pg-callout):not(.pg-thankyou) :is(.stop-media, .frame, figure, .tbody) { background: none !important; border-color: #999 !important; }
}

/* ======== round 8 step 1: Make it yours ======== */
.utility-btns { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
.ryw-btn { cursor: pointer; }
.ryw-panel { max-height: min(78vh, 46rem); overflow: auto; }
.ryw-inner { display: block; padding-block: 1rem 1.4rem; }
.ryw-head { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; margin-bottom: 1rem; }
.ryw-head .ryw-note { flex: 1 1 14rem; }
.ryw-grid { display: grid; gap: 1.1rem 1.6rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ryw-grid fieldset { border: 1px solid rgba(var(--gold-rgb), .35); border-radius: 14px; padding: .6rem .9rem .9rem; margin: 0; min-width: 0; }
.ryw-grid legend { font: 800 .8rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--aqua-t); padding: 0 .4rem; }
.ryw-segrow { display: flex; flex-wrap: wrap; gap: .4rem; }
.ryw-opt { position: relative; cursor: pointer; }
.ryw-opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ryw-opt span:not(.sr-only) { display: inline-block; padding: .4rem .8rem; border: 2px solid rgba(var(--cream-rgb), .55); border-radius: 999px; font-weight: 700; font-size: .85rem; }
.ryw-opt input:checked + span { background: var(--foil); color: var(--on-accent); border-color: var(--gold); }
.ryw-opt input:checked + span::before { content: "\2713\00a0"; }
.ryw-opt input:focus-visible + span, .ryw-sw input:focus-visible + span { outline: 3px solid var(--sunshine); outline-offset: 3px; }
.ryw-switches { display: grid; gap: .45rem; }
.ryw-sw { display: flex; gap: .6rem; align-items: center; cursor: pointer; font-size: .92rem; }
.ryw-sw input { width: 1.25rem; height: 1.25rem; accent-color: var(--gold); flex: none; }
.ryw-lang { display: grid; gap: .4rem; align-content: start; } .ryw-lang label { font-weight: 700; }
.ryw-lang select { padding: .55rem .7rem; font: 1rem var(--sans); color: var(--cream); background: var(--field); border: 2px solid rgba(var(--gold-rgb), .7); border-radius: 10px; max-width: 18rem; }
.ryw-close { margin-left: auto; }
html[data-text="2"] { font-size: 112.5%; } html[data-text="3"] { font-size: 125%; } html[data-text="4"] { font-size: 150%; }
html[data-lines="1"] :is(p, li, dd, summary, .lead, figcaption, label) { line-height: 1.9; } html[data-lines="2"] :is(p, li, dd, summary, .lead, figcaption, label) { line-height: 2.25; }
html[data-letters="1"] body { letter-spacing: .06em; word-spacing: .14em; }
html[data-font="sans"] body * { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important; }
html[data-font="serif"] body * { font-family: Georgia, "Times New Roman", serif !important; }
html[data-font="easy"] body * { font-family: Verdana, Tahoma, "Trebuchet MS", "DejaVu Sans", sans-serif !important; }
html.pref-links a:not(.btn):not(.skip) { text-decoration: underline !important; text-decoration-thickness: 2px !important; background: rgba(var(--sun-rgb), .2); outline: 1px solid rgba(var(--sun-rgb), .6); outline-offset: 1px; border-radius: 3px; }
html.pref-targets :is(a:not(.skip), button, summary, select, input, label) { min-height: 48px; }
html.pref-targets :is(.nav-main a, .submenu a, .sub-toggle, .footer-col a, .chips a, .lchip, .btn, .listen, .ryw-btn) { display: inline-flex; align-items: center; padding-block: .6rem; min-width: 48px; }
html.pref-targets .footer-col ul { gap: .2rem; }
html.pref-quiet :is(.listen, .listen-note, .listen-btn, .listen-bar, .rotor-ctrl, .banner-ctrl) { display: none !important; }
html.pref-calm { --gold: #D8C38A; --gold-light: #F1E6C4; --sunshine: #E9D9A6; --aqua: #8FCFC6; --rose: #D9A3BE; --lavender: #B8A9E0; --emerald: #4FA58A; --coral: #E3A59C; --harbor-blue: #8EC3E0; --leaf: #B4D78B; }
html.pref-calm :is(.hero-light, .ribbon, .divider, .pillar-motif, .card-motif, .hero-art, body::before) { display: none !important; }
html.pref-calm .band-img, html.pref-calm .hero-img { opacity: .4; }
html.pref-calm .foil { background: none !important; -webkit-text-fill-color: var(--gold-light) !important; color: var(--gold-light) !important; }
html.pref-calm .btn { box-shadow: none; }
.ruler-shade { position: fixed; left: 0; right: 0; background: rgba(0, 0, 0, .58); pointer-events: none; z-index: 70; }
.ruler-top { top: 0; } .ruler-bottom { bottom: 0; }
html:not(.pref-ruler) .ruler-shade { display: none; }
@media print { .ruler-shade { display: none !important; } }
/* colour-blind safe: patterns and icons never rely on colour alone */
.tchip .tsym, .sbadge .tsym { font-weight: 900; margin-right: .3em; }
html.pref-cb .t-F0 { background-image: none; } html.pref-cb .t-F1 { background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, .28) 0 3px, transparent 3px 8px); }
html.pref-cb .t-F2 { background-image: radial-gradient(rgba(0, 0, 0, .35) 1.4px, transparent 1.6px); background-size: 7px 7px; } html.pref-cb .t-F3 { background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, .3) 0 2px, transparent 2px 6px), repeating-linear-gradient(90deg, rgba(0, 0, 0, .3) 0 2px, transparent 2px 6px); }
html.pref-cb .v-ck { background-image: none; } html.pref-cb .v-pd { background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, .28) 0 3px, transparent 3px 8px); } html.pref-cb .v-un { background-image: radial-gradient(rgba(0, 0, 0, .35) 1.4px, transparent 1.6px); background-size: 7px 7px; }
html.pref-cb .btn:not(.ghost) { border: 3px double #06231F; } html.pref-cb .btn.ghost { border-style: dashed; border-width: 2px; }
html.pref-cb a[target="_blank"]:not(.sr-only)::after { content: " \2197"; }
html.pref-cb .sbadge::before { content: none; }
html.pref-cb .htag, html.pref-cb .chip, html.pref-cb .lchip { border-width: 2px; }

/* PALETTES:START (generated by tools/build_palettes.py from data/palettes.json; do not edit by hand) */
:root { --night: #071327; --night-rgb: 7, 19, 39; --abyss: #040C1A; --abyss-rgb: 4, 12, 26; --panel: #0D2144; --panel-rgb: 13, 33, 68; --panel2: #15335F; --panel2-rgb: 21, 51, 95; --navy: #14355E; --cream: #FBF4E3; --cream-rgb: 251, 244, 227; --gold: #E3B04B; --gold-rgb: 227, 176, 75; --gold-light: #FFE29A; --sunshine: #FFD166; --sun-rgb: 255, 209, 102; --harbor-blue: #5BB8E8; --blue-rgb: 91, 184, 232; --aqua: #2EC4B6; --aqua-rgb: 46, 196, 182; --lavender: #A78BFA; --lav-rgb: 167, 139, 250; --coral: #FF7A6B; --coral-rgb: 255, 122, 107; --rose: #F26CA7; --emerald: #1FA37A; --leaf: #8BD450; --leaf-rgb: 139, 212, 80; --field: #0B1B38; --on-accent: #071327; --aqua-t: #2EC4B6; --sunshine-t: #FFD166; --rose-t: #F26CA7; --lavender-t: #A78BFA; --coral-t: #FF7A6B; --harbor-blue-t: #5BB8E8; --emerald-t: #1FA37A; --leaf-t: #8BD450; }
html[data-look="light"] { --night: #F5FAF8; --night-rgb: 245, 250, 248; --abyss: #E2EEE9; --abyss-rgb: 226, 238, 233; --panel: #FFFFFF; --panel-rgb: 255, 255, 255; --panel2: #EAF4F0; --panel2-rgb: 234, 244, 240; --navy: #D3E6E0; --cream: #0A1A2E; --cream-rgb: 10, 26, 46; --gold: #0A6B63; --gold-rgb: 10, 107, 99; --gold-light: #0A5A54; --sunshine: #FFD166; --sun-rgb: 255, 209, 102; --harbor-blue: #5BB8E8; --blue-rgb: 91, 184, 232; --aqua: #2EC4B6; --aqua-rgb: 46, 196, 182; --lavender: #A78BFA; --lav-rgb: 167, 139, 250; --coral: #FF7A6B; --coral-rgb: 255, 122, 107; --rose: #F26CA7; --emerald: #1FA37A; --leaf: #8BD450; --leaf-rgb: 139, 212, 80; --field: #FFFFFF; --on-accent: #071327; --aqua-t: #0A6F68; --sunshine-t: #0B4F8A; --rose-t: #A8235F; --lavender-t: #5B3FB5; --coral-t: #B3261E; --harbor-blue-t: #0B5C8F; --emerald-t: #0B6B4C; --leaf-t: #3F6F1F; }
html[data-look="light"] :is(.site-header, .utility-bar, .support-strip, .site-footer, .hero-band, .hero-xl, .level-band, .start-hero, .ryw-panel, .listen-bar, .journey-bar, .ribbon) { --night: #071327; --night-rgb: 7, 19, 39; --abyss: #040C1A; --abyss-rgb: 4, 12, 26; --panel: #0D2144; --panel-rgb: 13, 33, 68; --panel2: #15335F; --panel2-rgb: 21, 51, 95; --navy: #14355E; --cream: #FBF4E3; --cream-rgb: 251, 244, 227; --gold: #E3B04B; --gold-rgb: 227, 176, 75; --gold-light: #FFE29A; --sunshine: #FFD166; --sun-rgb: 255, 209, 102; --harbor-blue: #5BB8E8; --blue-rgb: 91, 184, 232; --aqua: #2EC4B6; --aqua-rgb: 46, 196, 182; --lavender: #A78BFA; --lav-rgb: 167, 139, 250; --coral: #FF7A6B; --coral-rgb: 255, 122, 107; --rose: #F26CA7; --emerald: #1FA37A; --leaf: #8BD450; --leaf-rgb: 139, 212, 80; --field: #0B1B38; --on-accent: #071327; --aqua-t: #2EC4B6; --sunshine-t: #FFD166; --rose-t: #F26CA7; --lavender-t: #A78BFA; --coral-t: #FF7A6B; --harbor-blue-t: #5BB8E8; --emerald-t: #1FA37A; --leaf-t: #8BD450; }
html[data-cb="rg"] { --emerald: #56B4E9; --harbor-blue: #F0E442; --blue-rgb: 240, 228, 66; --lavender: #F5A83A; --lav-rgb: 245, 168, 58; --rose: #CC79A7; --aqua: #7FD0F5; --aqua-rgb: 127, 208, 245; --coral: #FF9E5E; --coral-rgb: 255, 158, 94; --leaf: #F0E442; --leaf-rgb: 240, 228, 66; --emerald-t: #56B4E9; --harbor-blue-t: #F0E442; --lavender-t: #F5A83A; --rose-t: #CC79A7; --aqua-t: #7FD0F5; --coral-t: #FF9E5E; --leaf-t: #F0E442; }
html[data-cb="tri"] { --emerald: #F26D6D; --harbor-blue: #4FD1C5; --blue-rgb: 79, 209, 197; --lavender: #FFE08A; --lav-rgb: 255, 224, 138; --rose: #F2F2F2; --aqua: #4FD1C5; --aqua-rgb: 79, 209, 197; --coral: #F26D6D; --coral-rgb: 242, 109, 109; --leaf: #FFE08A; --leaf-rgb: 255, 224, 138; --emerald-t: #F26D6D; --harbor-blue-t: #4FD1C5; --lavender-t: #FFE08A; --rose-t: #F2F2F2; --aqua-t: #4FD1C5; --coral-t: #F26D6D; --leaf-t: #FFE08A; }
html[data-look="light"][data-cb="rg"] { --aqua-t: #0B5C8F; --rose-t: #8E2F6D; --lavender-t: #5B3FB5; --harbor-blue-t: #2F5F00; --emerald-t: #0B5C8F; --leaf-t: #3F6F1F; --coral-t: #B3261E; }
html[data-look="light"][data-cb="tri"] { --aqua-t: #0A6F68; --rose-t: #8E2F6D; --lavender-t: #5B3FB5; --harbor-blue-t: #0A6F68; --emerald-t: #B3261E; --leaf-t: #3F6F1F; --coral-t: #B3261E; }
html[data-look="gentle1"] { --night: #0E181A; --night-rgb: 14, 24, 26; --abyss: #0A1213; --abyss-rgb: 10, 18, 19; --panel: #16231F; --panel-rgb: 22, 35, 31; --panel2: #1F2E29; --panel2-rgb: 31, 46, 41; --navy: #1B2A26; --cream: #F0EADB; --cream-rgb: 240, 234, 219; --gold: #D9B65F; --gold-rgb: 217, 182, 95; --gold-light: #F0DFA8; --sunshine: #E8CC84; --sun-rgb: 232, 204, 132; --harbor-blue: #7FC8A9; --blue-rgb: 127, 200, 169; --aqua: #6CC4A4; --aqua-rgb: 108, 196, 164; --lavender: #D9A8C4; --lav-rgb: 217, 168, 196; --coral: #E8A08E; --coral-rgb: 232, 160, 142; --rose: #E69AB8; --emerald: #3FAA84; --leaf: #A9CF7C; --leaf-rgb: 169, 207, 124; --field: #101A18; --on-accent: #101614; --aqua-t: #6CC4A4; --sunshine-t: #E8CC84; --rose-t: #E69AB8; --lavender-t: #D9A8C4; --coral-t: #E8A08E; --harbor-blue-t: #7FC8A9; --emerald-t: #3FAA84; --leaf-t: #A9CF7C; }
html[data-look="gentle2"] { --night: #121716; --night-rgb: 18, 23, 22; --abyss: #0D1110; --abyss-rgb: 13, 17, 16; --panel: #1A231F; --panel-rgb: 26, 35, 31; --panel2: #232E29; --panel2-rgb: 35, 46, 41; --navy: #202B26; --cream: #EBE4D2; --cream-rgb: 235, 228, 210; --gold: #D2B15F; --gold-rgb: 210, 177, 95; --gold-light: #E9D9A3; --sunshine: #E0C77F; --sun-rgb: 224, 199, 127; --harbor-blue: #86C4A3; --blue-rgb: 134, 196, 163; --aqua: #72BE9E; --aqua-rgb: 114, 190, 158; --lavender: #D2A6BC; --lav-rgb: 210, 166, 188; --coral: #E09E8C; --coral-rgb: 224, 158, 140; --rose: #DE9AB2; --emerald: #3FA37F; --leaf: #A5C979; --leaf-rgb: 165, 201, 121; --field: #0F1413; --on-accent: #0F1312; --aqua-t: #72BE9E; --sunshine-t: #E0C77F; --rose-t: #DE9AB2; --lavender-t: #D2A6BC; --coral-t: #E09E8C; --harbor-blue-t: #86C4A3; --emerald-t: #3FA37F; --leaf-t: #A5C979; }
html[data-look="gentle3"] { --night: #151817; --night-rgb: 21, 24, 23; --abyss: #0F1211; --abyss-rgb: 15, 18, 17; --panel: #1D2420; --panel-rgb: 29, 36, 32; --panel2: #27302B; --panel2-rgb: 39, 48, 43; --navy: #232C28; --cream: #E6DECB; --cream-rgb: 230, 222, 203; --gold: #CDAE62; --gold-rgb: 205, 174, 98; --gold-light: #E3D4A0; --sunshine: #DAC47F; --sun-rgb: 218, 196, 127; --harbor-blue: #8BBFA0; --blue-rgb: 139, 191, 160; --aqua: #78B99C; --aqua-rgb: 120, 185, 156; --lavender: #CBA5B9; --lav-rgb: 203, 165, 185; --coral: #D99C8C; --coral-rgb: 217, 156, 140; --rose: #D698AE; --emerald: #43A07E; --leaf: #A0C479; --leaf-rgb: 160, 196, 121; --field: #101311; --on-accent: #0F1211; --aqua-t: #78B99C; --sunshine-t: #DAC47F; --rose-t: #D698AE; --lavender-t: #CBA5B9; --coral-t: #D99C8C; --harbor-blue-t: #8BBFA0; --emerald-t: #43A07E; --leaf-t: #A0C479; }
/* PALETTES:END */
.ryw-why { display: block; margin: 0 0 .5rem; font-size: .78rem; font-style: italic; opacity: .82; font-weight: 400; }
.ryw-sw small.ryw-why { margin: .1rem 0 0; }
.ryw-sw span { display: block; }
/* light look: page, text and surfaces follow the palette variables; chrome stays dark (see palettes) */
html[data-look="light"] body { background: linear-gradient(180deg, #F5FAF8, #E2EEE9); background-attachment: scroll; }
html[data-look="light"] body::before { display: none; }
html[data-look="light"] :is(.foil, h2.foil):not(:is(.hero-band, .hero-xl, .level-band, .site-header, .support-strip, .site-footer, .utility-bar, .ryw-panel) *) { background: none; -webkit-text-fill-color: var(--gold-light); color: var(--gold-light); }
html[data-look="light"] .section.band { background: linear-gradient(180deg, rgba(10, 107, 99, .09), rgba(10, 107, 99, .03)); }
html[data-look^="gentle"] body { background-image: linear-gradient(180deg, var(--night), var(--abyss) 70%); }
html[data-look^="gentle"] body::before { display: none; }
html[data-look^="gentle"] .hero-band::after, html[data-look^="gentle"] .level-band.has-img::after { background: linear-gradient(90deg, rgba(var(--night-rgb), .94), rgba(var(--night-rgb), .8) 55%, rgba(var(--night-rgb), .5)); }
html[data-look^="gentle"] :is(.foil, h2.foil) { background: none; -webkit-text-fill-color: var(--gold-light); color: var(--gold-light); }
html[data-look^="gentle"] .btn:not(.ghost) { background: var(--gold); color: var(--on-accent); }
html[data-look^="gentle"] img { filter: saturate(.82) brightness(.94); }
.ryw-sw { display: grid; grid-template-columns: 1.4rem 1fr; gap: .6rem; align-items: start; }
.ryw-sw input { width: 1.3rem; height: 1.3rem; margin: .15rem 0 0; }
.ryw-switches { grid-column: span 2; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: .8rem 1.4rem; }
.ryw-switches legend { grid-column: 1 / -1; }
@media (max-width: 700px) { .ryw-switches { grid-column: auto; } }

/* ======== accessibility log ======== */
.alog-head { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.alog-updated { margin: 0; font-weight: 700; }
.alog-summary { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.astat { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .8rem; border-radius: 999px; font-weight: 800; font-size: .85rem; color: var(--on-accent); max-width: none; }
.astat .tsym { font-weight: 900; }
.s-done { background: var(--emerald); } .s-in-progress { background: var(--harbor-blue); } .s-planned { background: var(--lavender); } .s-known-gap { background: var(--sunshine); }
html.pref-cb .s-in-progress { background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, .28) 0 3px, transparent 3px 8px); } html.pref-cb .s-planned { background-image: radial-gradient(rgba(0, 0, 0, .35) 1.4px, transparent 1.6px); background-size: 7px 7px; } html.pref-cb .s-known-gap { background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, .3) 0 2px, transparent 2px 6px); }
.alog-list { display: grid; gap: 1rem; }
.alog { padding: 1.1rem 1.3rem; border: 1px solid rgba(var(--gold-rgb), .5); border-radius: var(--radius); background: var(--panel); max-width: none; }
.alog[hidden] { display: none; }
.alog-top { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin-bottom: .4rem; font-size: .85rem; }
.alog h3 { font-size: 1.2rem; line-height: 1.35; margin: .2rem 0 .6rem; }
.alog p { margin: 0 0 .5rem; } .alog-tags { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; } .alog-tags li { max-width: none; }
.alog-area { font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: .75rem; }
@media print { .alog-filters { display: none !important; } .alog[hidden] { display: none !important; } }
.v-un, .st-unchecked .sbadge { background: #E6EEF0; color: #071327; }
html.pref-contrast :is(.astat, .tchip, .sbadge, .v-ck, .v-pd, .v-un, .door-state, .btn:not(.ghost)) { color: #000 !important; -webkit-text-fill-color: #000 !important; }
html.pref-contrast .alog-summary li { color: #000; }
a { overflow-wrap: anywhere; }
html[data-text="3"] .site-header, html[data-text="4"] .site-header { position: relative; }
@media (max-width: 560px) { html[data-text="2"] .site-header { position: relative; } }
.utility-inner { flex-wrap: wrap; } .utility-btns { max-width: 100%; } .ryw-btn { white-space: normal; text-align: left; }
.tier-legend li > span:last-child, .tier-legend strong { min-width: 0; overflow-wrap: anywhere; } .tier-legend li { min-width: 0; }
h1, h2, h3, h4 { overflow-wrap: anywhere; }
.verifybar, .tierbar { flex-wrap: wrap; height: auto; border-radius: 18px; } .verifybar span, .tierbar span { white-space: normal; min-width: 2rem; text-align: center; padding-block: .3rem; }
.climb > li { min-width: 0; } .climb { min-width: 0; }
.tech, .tech summary, .tbody, #tech-list { min-width: 0; max-width: 100%; }
.tech .tn, .tech .ts, .tech .tp, .tech .tid, .tech .tchip, .tbody p, .questions li { overflow-wrap: anywhere; }
.verifybar span { flex: 1 1 auto; }
@media print {
  .alog, .astat, .htag, .alog-summary li, .tchip, .sbadge, .faq, .rung, .citycard, .access-grid li, .contact-card, .song-card, .plan, .doorway { background: none !important; color: #000 !important; -webkit-text-fill-color: #000 !important; border: 1px solid #555 !important; box-shadow: none !important; }
  .alog { break-inside: avoid; margin-bottom: 8pt; }
}

/* ======== listen ======== */
.listen-bar { background: #050f1f; border-bottom: 2px solid var(--gold); } .listen-bar[hidden] { display: none; }
.listen-row { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; padding-block: .7rem; }
.listen-status { margin: 0; flex: 1 1 14rem; font-size: .9rem; opacity: .92; }
.listen-speed-label { font-weight: 700; } .listen-speed { padding: .45rem .6rem; font: 1rem var(--sans); color: var(--cream); background: var(--field); border: 2px solid rgba(var(--gold-rgb), .7); border-radius: 10px; }
::highlight(tts) { background-color: rgba(255, 209, 102, .55); color: #000; }
.tts-now { outline: 3px solid var(--sunshine); outline-offset: 3px; background: rgba(255, 209, 102, .18); }
@media print { .listen-bar, .listen-btn { display: none !important; } }

/* ======== plain language and summaries ======== */
.summary3 { margin-top: -1rem; margin-bottom: 1.5rem; padding: 1rem 1.4rem; border: 1px solid rgba(var(--gold-rgb), .55); border-left: 6px solid var(--aqua); border-radius: 14px; background: rgba(var(--panel-rgb), .7); max-width: 56rem; }
.summary-h { margin: 0 0 .3rem; font: 800 .8rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--aqua-t); }
.summary3 ul { margin: 0 0 .6rem; padding-left: 1.2rem; display: grid; gap: .25rem; } .summary3 li { max-width: none; }
.is-plain { font-size: 1.06em; }
@media print { .summary3 { background: none !important; color: #000 !important; border-color: #555 !important; } .plain-toggle { display: none !important; } }

/* ======== language picker ======== */
.ryw-opt small.native { font-size: .72em; opacity: .85; font-weight: 600; }
.ryw-lang { grid-column: span 2; } @media (max-width: 700px) { .ryw-lang { grid-column: auto; } }
.i18n-on { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.15; }
.i18n-on .i18n-en { font-size: .62rem; font-weight: 500; opacity: .75; letter-spacing: 0; text-transform: none; }
.nav-main .i18n-on { align-items: flex-start; } .menu-button.i18n-on { flex-direction: row; gap: .4rem; }
.doorway-body h3.i18n-on { display: block; } .doorway-body h3 .i18n-en { display: block; font: 500 .85rem var(--sans); font-style: italic; opacity: .8; }
.i18n-en-inline { opacity: .8; font-size: .9em; } .i18n-notice { margin: 0; padding: .3rem 0 .5rem; font-size: .78rem; opacity: .85; width: min(1180px, calc(100% - 2.5rem)); margin-inline: auto; }
.nav-main a.i18n-on, .nav-main .sub-toggle.i18n-on, .menu-support.i18n-on { display: inline-flex !important; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; }
.i18n-on .i18n-t { display: block; } .i18n-on .i18n-en { display: block; }
.menu-button.i18n-on { flex-direction: row !important; }

/* ======== go at your pace ======== */
.journey-bar { background: linear-gradient(90deg, rgba(var(--panel2-rgb), .95), rgba(var(--panel-rgb), .95)); border-bottom: 2px solid var(--aqua); }
.journey-inner { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; align-items: center; padding-block: .7rem; }
.journey-text { margin: 0; } .journey-progress { width: min(14rem, 100%); height: .9rem; accent-color: var(--aqua); }
.journey-btns { display: flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; }
.journey-end, .journey-note { flex: 1 1 100%; margin: 0; font-size: .88rem; opacity: .9; }
.paths { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.path-card { max-width: none; padding: 1.3rem 1.4rem; border: 1px solid rgba(var(--gold-rgb), .55); border-radius: var(--radius); background: var(--panel); display: flex; flex-direction: column; gap: .5rem; }
.path-time { font: 800 .78rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--aqua-t); margin: 0; }
.path-card h3 { margin: 0; } .path-card p { margin: 0; } .path-card .btn { align-self: flex-start; margin-top: auto; }
.path-steps { font-size: .88rem; opacity: .9; }
@media print { .journey-bar { display: none !important; } }

/* ======== where am I ======== */
.skip-menu { position: static; }
.skip { z-index: 100; }
.breadcrumb { background: rgba(var(--abyss-rgb), .55); border-bottom: 1px solid rgba(var(--gold-rgb), .25); font-size: .85rem; }
.breadcrumb ol { list-style: none; margin: 0; padding: .45rem 0; display: flex; flex-wrap: wrap; gap: .2rem .6rem; }
.breadcrumb li { max-width: none; padding: 0; margin: 0; display: inline-flex; gap: .6rem; align-items: center; }
.breadcrumb li:not(:last-child)::after { content: "\203A"; opacity: .7; }
.breadcrumb [aria-current="page"] { font-weight: 700; text-decoration: none; }
.kbd-table { border-collapse: collapse; width: 100%; max-width: 40rem; } .kbd-table th, .kbd-table td { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid rgba(var(--gold-rgb), .35); }
kbd { display: inline-block; min-width: 2rem; text-align: center; padding: .15rem .5rem; border: 2px solid currentColor; border-radius: 6px; font: 700 1rem var(--sans); }
@media print { .breadcrumb { display: none; } }
.ask-us { padding-block: 1.4rem; } .ask-us-line { margin: 0; font-size: .95rem; }
@media print { .ask-us { display: none !important; } }
.expect { margin: .8rem auto 0; padding: .5rem .9rem; font-size: .88rem; border-left: 4px solid var(--aqua); background: rgba(var(--panel-rgb), .45); border-radius: 0 10px 10px 0; max-width: 62rem; } .expect strong { margin-right: .3rem; }
@media print { .expect { display: none; } }

/* ROUND9:START */
/* Tall pictures are shown whole on the right of the band; the dark wash keeps the words readable. */
.hero-band.hero-portrait .band-img { object-fit: contain; object-position: right center; width: 100%; max-width: 100%; animation: none; }
.hero-band.hero-portrait { background: var(--night); }
@media (max-width: 700px) { .hero-band.hero-portrait .band-img { opacity: .5; } }
.tagline .tl-long { font-size: max(.72rem, 10px); }
.tagline .tl-short { font-size: max(.72rem, 10px); }
.wcard .chip2 { color: #031A17; font-size: .72rem; }
.wcard[style*="3E7BD6"] .chip2 { background: #2A5CAB; color: #fff; }
@media (max-width: 700px), (pointer: coarse) {
  .footer-col a, .site-footer .legal a { display: inline-flex; align-items: center; min-height: 44px; }
  .ryw-btn { min-height: 44px; }
  .chips a, .lchip, a.card-more, .brand { min-height: 44px; display: inline-flex; align-items: center; }
  main h3 > a, main th > a, main .meet-card .btn { display: inline-flex; align-items: center; min-height: 44px; }
  main li > a:only-child, main .tier a, main .friend-links a { display: inline-flex; align-items: center; min-height: 44px; }
}
.feature-image { height: auto; object-fit: cover; }
.meet-card, .meet-card * { overflow-wrap: anywhere; }
/* Light look: the always-dark bars and the panel must set their own text colour, because text inside them inherits from the page. */
html[data-look="light"] :is(.ryw-panel, .listen-bar, .journey-bar, .utility-bar, .support-strip) { color: var(--cream); }
/* Larger text or wider letter spacing: collapse the menu button earlier so the menu never runs off the screen. */
@media (min-width: 1200px) and (max-width: 1799px) {
  html[data-text="2"] .menu-button, html[data-text="3"] .menu-button, html[data-text="4"] .menu-button, html[data-letters="2"] .menu-button, html[data-letters="3"] .menu-button { display: inline-block; }
  html[data-text="2"] .header-row, html[data-text="3"] .header-row, html[data-text="4"] .header-row, html[data-letters="2"] .header-row, html[data-letters="3"] .header-row { flex-wrap: wrap; }
  html[data-text="2"] #site-nav, html[data-text="3"] #site-nav, html[data-text="4"] #site-nav, html[data-letters="2"] #site-nav, html[data-letters="3"] #site-nav { display: none; flex-basis: 100%; }
  html[data-text="2"] #site-nav[data-open="true"], html[data-text="3"] #site-nav[data-open="true"], html[data-text="4"] #site-nav[data-open="true"], html[data-letters="2"] #site-nav[data-open="true"], html[data-letters="3"] #site-nav[data-open="true"] { display: block; }
  html[data-text="2"] .nav-main, html[data-text="3"] .nav-main, html[data-text="4"] .nav-main, html[data-letters="2"] .nav-main, html[data-letters="3"] .nav-main { flex-direction: column; align-items: stretch; padding: .5rem 0 1rem; gap: .15rem; }
  html[data-text="2"] .nav-main a, html[data-text="3"] .nav-main a, html[data-text="4"] .nav-main a, html[data-letters="2"] .nav-main a, html[data-letters="3"] .nav-main a, html[data-text="2"] .sub-toggle, html[data-text="3"] .sub-toggle, html[data-text="4"] .sub-toggle, html[data-letters="2"] .sub-toggle, html[data-letters="3"] .sub-toggle { padding: .7rem .9rem; width: 100%; text-align: left; font-size: 1rem; border-radius: 12px; }
  html[data-text="2"] .submenu, html[data-text="3"] .submenu, html[data-text="4"] .submenu, html[data-letters="2"] .submenu, html[data-letters="3"] .submenu { position: static; flex-direction: column; padding: 0 0 .4rem 1rem; background: none; border: 0; }
  html[data-text="2"] .nav-support, html[data-text="3"] .nav-support, html[data-text="4"] .nav-support, html[data-letters="2"] .nav-support, html[data-letters="3"] .nav-support { margin: .6rem 0 0; padding: 0; }
  html[data-text="2"] .nav-main a.menu-support, html[data-text="3"] .nav-main a.menu-support, html[data-text="4"] .nav-main a.menu-support, html[data-letters="2"] .nav-main a.menu-support, html[data-letters="3"] .nav-main a.menu-support { text-align: center; }
}

/* Round 10: calm flowing water behind the Home hero text. CSS only. It stops for reduced motion, Reduce motion, Quiet mode,
   Calm mode, high contrast and print, and the Pause button is remembered. */
.hero-xl, .start-hero { background: linear-gradient(160deg, #06152B, #0A2238 55%, #0B2B3A); }
.hero-water { position: absolute; inset: 0; z-index: -3; overflow: hidden; pointer-events: none; opacity: .62; }
@media (min-width: 1001px) { .hero-water { opacity: .95; } }
@media (max-width: 1000px) { .hero-xl::after, .start-hero::after { background: linear-gradient(0deg, rgba(var(--night-rgb), .84), rgba(var(--night-rgb), .8)); } }
.hero-xl .eyebrow, .start-hero .eyebrow { color: color-mix(in srgb, var(--aqua-t) 65%, #fff); }
.hero-water i { position: absolute; left: 0; width: 200%; height: 60%; will-change: transform; animation: waterflow 70s linear infinite alternate; }
.hero-water i:nth-child(1) { top: -8%; background:
  radial-gradient(ellipse 34% 46% at 12% 50%, rgba(var(--blue-rgb), .85), transparent 70%), radial-gradient(ellipse 30% 40% at 38% 40%, rgba(242, 108, 167, .7), transparent 70%),
  radial-gradient(ellipse 34% 44% at 64% 55%, rgba(var(--aqua-rgb), .8), transparent 70%), radial-gradient(ellipse 28% 40% at 90% 45%, rgba(var(--blue-rgb), .8), transparent 70%); }
.hero-water i:nth-child(2) { top: 24%; animation-duration: 95s; animation-direction: alternate-reverse; background:
  radial-gradient(ellipse 30% 42% at 8% 50%, rgba(var(--aqua-rgb), .8), transparent 70%), radial-gradient(ellipse 32% 44% at 34% 55%, rgba(var(--blue-rgb), .8), transparent 70%),
  radial-gradient(ellipse 28% 38% at 60% 45%, rgba(242, 108, 167, .7), transparent 70%), radial-gradient(ellipse 32% 44% at 88% 52%, rgba(var(--aqua-rgb), .8), transparent 70%); }
.hero-water i:nth-child(3) { top: 52%; height: 56%; animation-duration: 120s; background:
  repeating-radial-gradient(ellipse 60% 120% at 25% 100%, transparent 0 34px, rgba(var(--gold-rgb), .38) 35px 36px),
  repeating-radial-gradient(ellipse 70% 130% at 75% 110%, transparent 0 46px, rgba(var(--gold-rgb), .3) 47px 48px); }
@keyframes waterflow { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 2%, 0); } }
.water-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: 1.2rem; }
.water-pause { cursor: pointer; display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .4rem 1.1rem; border-radius: 999px; border: 1.5px solid rgba(var(--cream-rgb), .75); background: rgba(var(--night-rgb), .6); color: var(--cream); font: 700 .9rem var(--sans); }
.water-pause:hover { border-color: var(--sunshine); } .water-pause:focus-visible { outline: 3px solid var(--sunshine); outline-offset: 3px; }
.water-pause .wp-ico { font-size: .8rem; }
.water-note { margin: 0; font-size: .85rem; max-width: none; opacity: .9; }
@media (prefers-reduced-motion: reduce) { .hero-water i { animation: none; } }
html.pref-reduce-motion .hero-water i, html.pref-calm .hero-water i, html.pref-water-paused .hero-water i { animation: none; }
html.pref-calm .hero-water { opacity: .35; }
html.pref-contrast .hero-water { display: none; }
@media print { .hero-water, .water-bar { display: none !important; } }
/* ROUND9:END */

/* ROUND11:START */
.vid-privacy { font-size: .95rem; opacity: .92; max-width: 40rem; }
.vid-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.vid-card { display: flex; flex-direction: column; border: 1px solid rgba(var(--gold-rgb), .55); border-radius: var(--radius); overflow: hidden; background: var(--panel); min-width: 0; }
.vid-art { position: relative; aspect-ratio: 16 / 9; display: flex; justify-content: space-between; align-items: flex-end; padding: .8rem 1rem; overflow: hidden; color: #fff; isolation: isolate; }
.vid-art::before { content: ''; position: absolute; inset: 0; z-index: -2; background: var(--va); }
.vid-art::after { content: ''; position: absolute; inset: 0; z-index: -1; background:
  repeating-radial-gradient(ellipse 70% 120% at 20% 120%, transparent 0 30px, rgba(var(--gold-rgb), .4) 31px 32px), linear-gradient(0deg, rgba(6, 18, 36, .72), transparent 60%); }
.va-1 { --va: linear-gradient(135deg, #1B5FA8, #14808B); } .va-2 { --va: linear-gradient(135deg, #5B3FB0, #1B5FA8); }
.va-3 { --va: linear-gradient(135deg, #B03C78, #5B3FB0); } .va-4 { --va: linear-gradient(135deg, #14808B, #2E7D32); } .va-5 { --va: linear-gradient(135deg, #1B5FA8, #B03C78); }
.va-no, .va-date { font: 800 .78rem var(--sans); letter-spacing: .14em; text-transform: uppercase; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.vid-body { padding: 1.1rem 1.25rem 1.3rem; display: grid; gap: .5rem; align-content: start; }
.vid-body h3 { margin: 0; font-size: 1.3rem; } .vid-body p { margin: 0; max-width: none; }
.vid-access { font-size: .9rem; } .vid-lang { font-size: .95rem; } .vid-story { font-size: .98rem; }
.vid-slot { margin-top: .4rem; }
.vid-slot iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 8px; background: #000; }
.vid-play { cursor: pointer; display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; padding: .5rem 1.3rem; border-radius: 999px; border: 0; background: var(--foil); color: var(--on-accent); font: 800 1rem var(--sans); }
.vid-play:focus-visible { outline: 3px solid var(--sunshine); outline-offset: 3px; }
.vid-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.vid-note { margin: 0; padding-block: .6rem; text-align: left; font-size: .98rem; }
.vid-note a { font-weight: 700; display: inline-flex; align-items: center; min-height: 44px; }
html.pref-calm .vid-art::after { background: linear-gradient(0deg, rgba(6, 18, 36, .72), transparent 60%); }
@media print { .vid-art { display: none !important; } }
/* ROUND11:END */

/* ROUND12:START */
/* Welcome band: calm and generous, in the light-panel colours that already work in every look. No motion. */
.welcome-band { padding-block: clamp(2rem, 5vw, 3.5rem); }
.welcome-h { font: 800 .85rem var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--teal-ink); margin: 0 0 1rem; text-align: center; }
.welcome-card { margin: 0 auto; max-width: 52rem; padding: clamp(1.4rem, 4vw, 2.4rem); border: 2px solid #0A6B63; border-radius: 18px; text-align: center; color: #0A1A2E;
  background: radial-gradient(60% 90% at 0% 0%, rgba(91, 184, 232, .28), transparent 70%), radial-gradient(60% 90% at 100% 0%, rgba(242, 108, 167, .2), transparent 70%),
    radial-gradient(70% 90% at 50% 120%, rgba(31, 163, 122, .26), transparent 70%), #FFFFFF; box-shadow: 0 10px 28px rgba(11, 37, 69, .14); }
.welcome-card .piano { color: #0A6B63; display: flex; justify-content: center; margin-bottom: 1.1rem; }
.welcome-card .piano svg { max-width: 100%; height: auto; }
.welcome-card blockquote { margin: 0; }
.welcome-card blockquote p { margin: 0 auto; max-width: 42rem; font: clamp(1.35rem, 2.7vw, 1.95rem)/1.5 var(--serif); color: #0A1A2E; opacity: 1; }
.welcome-card figcaption { margin-top: 1.2rem; font: 700 1.05rem var(--sans); color: #0A5A54; }
.welcome-link { margin: 1rem 0 0; }
.welcome-link a { min-height: 44px; display: inline-flex; align-items: center; font-size: 1.05rem; }
html.pref-contrast .welcome-card { background: #fff; border-color: #000; box-shadow: none; }
html.pref-contrast .welcome-card .piano, html.pref-contrast .welcome-card figcaption { color: #000; }
@media print { .welcome-card { box-shadow: none !important; background: #fff !important; border: 1px solid #000 !important; } .welcome-card .piano { display: none; } }

/* Bam, beside the name in the header. Decorative: the whole brand area is one link named BrightPath City. */
.brand { display: inline-flex; align-items: center; gap: .55rem; }
.brand .bam { display: inline-flex; flex: 0 0 auto; width: 46px; height: 46px; -webkit-text-fill-color: initial; }
.brand .bam img { display: block; width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 1.5px solid #E3B04B; background: #16402F; }
.brand-block { position: relative; }
.bam-says { position: absolute; left: 0; top: calc(100% + 2px); z-index: 60; padding: .3rem .7rem; border-radius: 999px; background: #FFFFFF; color: #0A1A2E; border: 1.5px solid #E3B04B;
  font: 700 .85rem var(--sans); letter-spacing: 0; white-space: nowrap; pointer-events: none; opacity: 0; transform: translateY(-4px); transition: opacity .15s ease, transform .15s ease; }
.brand-block:hover .bam-says, .brand-block:focus-within .bam-says { opacity: 1; transform: none; }
@keyframes bamtilt { 0%, 100% { transform: rotate(0); } 35% { transform: rotate(-8deg); } 65% { transform: rotate(5deg); } }
@media (prefers-reduced-motion: no-preference) {
  html:not(.pref-reduce-motion):not(.pref-calm) .brand:hover .bam img, html:not(.pref-reduce-motion):not(.pref-calm) .brand:focus-visible .bam img { animation: bamtilt .7s ease-in-out 1; }
}
html.pref-reduce-motion .bam-says, html.pref-calm .bam-says { transition: none; }
@media (max-width: 380px) { .brand .bam, .brand .bam img { width: 30px; height: 30px; } }
@media (max-width: 560px) { .brand-block { min-width: 0; } html[data-text="3"] .brand, html[data-text="4"] .brand, html[data-letters="1"] .brand { white-space: normal; font-size: 1.25rem; }
  html[data-text="3"] .brand .bam, html[data-text="4"] .brand .bam, html[data-text="3"] .brand .bam svg, html[data-text="4"] .brand .bam svg { width: 28px; height: 28px; } }
@media print { .bam-says { display: none !important; } }
.bam-here { margin: 0; padding-block: .8rem; }
/* ROUND12:END */

/* BAM-ICON */
.brand .bam img { display:block; width:46px; height:46px; border-radius:50%; object-fit:cover; border:1.5px solid #E3B04B; background:#16402F; }
@media (max-width: 380px) { .brand .bam img { width:30px; height:30px; } }
html[data-text="3"] .brand .bam img, html[data-text="4"] .brand .bam img { width:28px; height:28px; }