/* Pomalo – Croatian Fast Track. Adriatic ocean blues (deep navy-teal to flag blue) on pale sky paper, a touch of
   flag red, a sun-yellow accent. Folk ornaments (pleter, rosette, waves, checker), a low sun and a faded lighthouse
   are inline SVG at the end. No external fonts, images or network. */
:root {
  --paper: #F3F7FD;     /* page background */
  --sky: #E3ECF9;       /* soft panels, footer */
  --sky-2: #D3E1F5;     /* hover, tags, card back */
  --blue: #1C3F94;      /* flag-inspired primary: header, primary buttons (white on it 9.6:1) */
  --blue-2: #2A52B0;    /* header hover / mobile nav items (white on it 7.2:1) */
  --mid: #4A6FC4;       /* link underlines, accents (4.8:1 on white) */
  --navy: #10213F;      /* text: 14.9:1 on paper */
  --ink: #10213F;
  --ink-2: #3A4F75;     /* muted text: 7.6:1 on paper, 6.2:1 on sky-2 */
  --red: #C8102E;       /* flag red, sparing accents (5.9:1 on white) */
  --sun: #FFC83D;       /* sun accent: focus halo, logo letter, hero sun, caution edge */
  --deep: #0A2447;      /* deep ocean: top of the header gradient, logo tile (white 15.4:1, sun 11.3:1) */
  --teal: #0E3F6E;      /* navy-teal mid stop (white 11.0:1) */
  --ocean: linear-gradient(180deg, var(--deep) 0%, var(--teal) 48%, var(--blue) 100%);
  --card: #FFFFFF;
  --card-2: #FAFCFF;
  --line: #B9CBEA;      /* decorative card borders */
  --ok: #1E6B34;        /* 6.6:1 on white */
  --ok-bg: #E3F4E6;
  --no: #A32A12;        /* 6.5:1 on white */
  --no-bg: #FCE6DF;
  --radius: 14px;
  --shadow: 0 2px 0 rgba(16, 33, 63, .07), 0 6px 18px rgba(28, 63, 148, .07);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 17px/1.55 var(--font); overflow-x: hidden;
}
img, svg { max-width: 100%; }
a { color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--mid); }
a:hover { text-decoration-color: var(--red); }
h1, h2, h3 { line-height: 1.2; margin: .2em 0 .5em; }
h1 { font-size: clamp(1.6rem, 4.5vw, 2.4rem); letter-spacing: -.01em; }
h2 { font-size: 1.25rem; }
p { margin: .5em 0 .9em; }
code { background: var(--sky); padding: 0 .3em; border-radius: 4px; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px; }
.muted { color: var(--ink-2); }
.small { font-size: .9rem; }
.center { text-align: center; }
.lead { font-size: 1.1rem; max-width: 62ch; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Focus: always visible, high contrast */
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 6px var(--sun); border-radius: 6px; }
main:focus, h1:focus { outline: none; box-shadow: none; }
h1:focus-visible { outline: 3px dashed var(--ink-2); outline-offset: 4px; box-shadow: none; }

.skip { position: absolute; left: 12px; top: -60px; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 8px; z-index: 10; }
.skip:focus { top: 12px; }

/* Header */
.site-header { background: var(--ocean); background-color: var(--blue); color: #fff; position: sticky; top: 0; z-index: 5; }
.site-header::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='64' viewBox='0 0 240 64'%3E%3Cpath d='M0 40c20-8 40-8 60 0s40 8 60 0 40-8 60 0 40 8 60 0V64H0Z' fill='%235FA8D3' fill-opacity='.10'/%3E%3Cpath d='M0 50c20-7 40-7 60 0s40 7 60 0 40-7 60 0 40 7 60 0V64H0Z' fill='%239FD0EA' fill-opacity='.08'/%3E%3Cg fill='none' stroke='%23fff' stroke-linecap='round'%3E%3Cpath d='M0 40c20-8 40-8 60 0s40 8 60 0 40-8 60 0 40 8 60 0' stroke-opacity='.16' stroke-width='1.2'/%3E%3Cpath d='M0 50c20-7 40-7 60 0s40 7 60 0 40-7 60 0 40 7 60 0' stroke-opacity='.10' stroke-width='1'/%3E%3Cpath d='M14 22h10M150 14h7M96 28h6M206 26h9' stroke-opacity='.14' stroke-width='1.2'/%3E%3C/g%3E%3Cg fill='%23fff' fill-opacity='.30'%3E%3Ccircle cx='40' cy='12' r='.9'/%3E%3Ccircle cx='118' cy='20' r='.8'/%3E%3Ccircle cx='186' cy='8' r='.9'/%3E%3Ccircle cx='226' cy='34' r='.7'/%3E%3C/g%3E%3C/svg%3E") left bottom / 240px 64px repeat-x; }
@media (prefers-reduced-motion: no-preference) { .site-header::before { animation: drift 60s linear infinite; } }
@keyframes drift { to { background-position: 240px 100%; } }
.header-in { position: relative; }
.header-in { display: flex; align-items: center; gap: 12px; min-height: 64px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; margin-right: auto; padding: 6px 0; }
.logo { width: 40px; height: 40px; border-radius: 10px; background: var(--deep); color: var(--sun); display: grid; place-items: center; font-weight: 800; font-size: 1.4rem; line-height: 1; box-shadow: 0 0 0 2px rgba(255,255,255,.6); flex: none; }
.brand-t { display: flex; flex-direction: column; line-height: 1.1; }
.brand-t b { font-size: 1.3rem; }
.brand-t small { font-size: .8rem; font-weight: 600; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px; }
.site-nav a { display: block; padding: 8px 10px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: .95rem; color: #fff; }
.site-nav a:hover { background: var(--blue-2); }
.site-nav a[aria-current="page"] { background: #fff; color: var(--blue); box-shadow: inset 0 -3px 0 var(--red); }
.menu-btn { display: none; }

@media (max-width: 860px) {
  .menu-btn { display: inline-block; font: inherit; font-weight: 700; background: #fff; color: var(--blue); border: 2px solid #fff; border-radius: 10px; padding: 7px 14px; cursor: pointer; }
  .site-nav { display: none; width: 100%; padding-bottom: 10px; }
  .site-nav.open { display: block; }
  .site-nav ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .site-nav a { background: var(--blue-2); text-align: center; padding: 10px 4px; }
}

main { padding-top: 24px; padding-bottom: 40px; min-height: 60vh; }

/* Buttons */
.btn, .opt {
  font: inherit; font-weight: 650; color: var(--ink); background: var(--card);
  border: 2px solid var(--ink); border-radius: 12px; padding: 10px 16px; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 46px; text-align: center; line-height: 1.25; max-width: 100%;
}
.btn:hover, .opt:hover:not(:disabled) { background: var(--sky-2); }
.btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn.primary:hover { background: var(--navy); border-color: var(--navy); }
.btn.danger { border-color: var(--no); color: var(--no); }
.btn.danger:hover { background: var(--no-bg); }
.btn.again { border-color: var(--no); color: var(--no); }
.cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 18px; }
.listen { display: none; font: inherit; font-size: .85rem; font-weight: 600; color: var(--ink); background: var(--sky); border: 1.5px solid var(--ink-2); border-radius: 999px; padding: 3px 10px; cursor: pointer; align-items: center; gap: 4px; vertical-align: middle; }
.has-voice .listen { display: inline-flex; }
.voice-msg { display: none; }
.has-voice .voice-msg { display: inline; }
.has-voice .no-voice-msg { display: none; }

/* Hero & panels */
.hero { background: var(--card); border: 2px solid var(--line); border-radius: var(--radius); padding: 22px 24px 8px; box-shadow: var(--shadow); }
.kicker { font-weight: 700; margin: 0; color: var(--ink-2); }
.panel { background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin: 18px 0; box-shadow: var(--shadow); }
.panel.notes { background: var(--sky); }
.panel.notes li { margin-bottom: .5em; }
.panel.sos { border: 2px solid var(--no); }
.panel.compact { background: var(--sky); }
.crumbs { font-size: .95rem; margin-bottom: 6px; color: var(--ink-2); }
.dayno { display: inline-block; background: var(--blue); color: #fff; border-radius: 8px; padding: 0 .35em; font-size: .7em; vertical-align: middle; }
.hr-title { display: block; font-size: .55em; font-weight: 600; color: var(--ink-2); margin-top: 6px; }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
.stat { background: var(--sky); border-radius: var(--radius); padding: 14px; text-align: center; border: 2px solid var(--blue); overflow: hidden; }
.stat b { color: var(--blue); }
.stat b { display: block; font-size: 1.8rem; line-height: 1.1; }
.stat small { font-size: .9rem; font-weight: 600; }
.stat span { font-weight: 600; font-size: .9rem; }
@media (max-width: 560px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.bar { height: 12px; background: var(--sky); border: 1.5px solid var(--ink-2); border-radius: 999px; overflow: hidden; margin: 4px 0 14px; }
.bar span { display: block; height: 100%; background: var(--blue); }

/* Phrases */
.phrases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 700px) { .phrases { grid-template-columns: minmax(0, 1fr); } }
.phrase { border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--card-2); overflow-wrap: anywhere; }
.phrase-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.phrase .hr { font-weight: 750; font-size: 1.12rem; }
.fem { margin-top: 2px; font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tag { display: inline-block; background: var(--sky-2); border: 1px solid var(--ink-2); border-radius: 6px; padding: 0 6px; font-size: .78rem; font-weight: 700; }
.pron { color: var(--ink-2); font-style: italic; font-size: .95rem; }
.en { margin-top: 2px; }
.pnote { font-size: .88rem; color: var(--ink-2); margin-top: 4px; border-left: 3px solid var(--mid); padding-left: 8px; }
.from { display: inline-block; margin-top: 6px; font-size: .88rem; font-weight: 600; }

/* Path */
.path { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.path-item a { display: flex; flex-direction: column; gap: 2px; height: 100%; text-decoration: none; background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.path-item a:hover { border-color: var(--blue); }
.path-item.is-done a { background: var(--sky); border-color: var(--ink-2); }
.day { font-weight: 800; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.pt { font-weight: 750; font-size: 1.08rem; }
.phr { font-style: italic; color: var(--ink-2); }
.meta { font-size: .85rem; margin-top: 4px; }
.badge { background: var(--ink); color: var(--paper); border-radius: 6px; padding: 0 6px; font-weight: 700; }
.pager { display: flex; justify-content: space-between; gap: 10px; margin-top: 20px; }

/* Situations */
.sit-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.sit { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-decoration: none; background: var(--sky); border: 2px solid var(--line); border-radius: var(--radius); padding: 14px; height: 100%; }
.sit:hover { border-color: var(--ink); background: var(--sky-2); }
.sit-icon { font-size: 1.7rem; line-height: 1; }
.sit-t { font-weight: 750; }
.sit-hr { font-size: .9rem; color: var(--ink-2); font-style: italic; }
@media (max-width: 400px) { .sit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Toolbar & form controls */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.toolbar label { font-weight: 700; }
select, input[type="text"], input[type="search"] {
  font: inherit; color: var(--ink); background: var(--card); border: 2px solid var(--ink-2); border-radius: 10px; padding: 9px 12px; min-height: 46px; max-width: 100%;
}
select { min-width: 0; }
@media (max-width: 560px) { .toolbar select { width: 100%; } .toolbar label { width: 100%; margin-bottom: -4px; } }

/* Flashcards */
.boxes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin: 6px 0 12px; }
.lbox { background: var(--card); border: 1.5px solid var(--line); border-radius: 10px; text-align: center; padding: 6px 2px; }
.lbox b { display: block; font-size: 1.2rem; }
.lbox span { font-size: .78rem; font-weight: 600; }
.lbox.new { background: var(--sky); }
.flash-wrap { perspective: 1200px; max-width: 620px; margin: 0 auto; }
.flash { position: relative; width: 100%; min-height: 240px; border: 0; padding: 0; background: none; cursor: pointer; font: inherit; color: var(--ink); transform-style: preserve-3d; transition: transform .45s ease; border-radius: 18px; display: block; }
.flash.flipped { transform: rotateY(180deg); }
.face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; border-radius: 18px; border: 3px solid var(--ink); backface-visibility: hidden; -webkit-backface-visibility: hidden; text-align: center; overflow-wrap: anywhere; }
.front { background: var(--card); }
.back { background: var(--sky-2); border-color: var(--blue); transform: rotateY(180deg); }
.face .big { font-size: clamp(1.35rem, 5vw, 2rem); font-weight: 750; line-height: 1.25; }
.hint { font-size: .85rem; color: var(--ink-2); }
.flash-actions { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px; margin: 16px 0 6px; }
.flash-actions .btn { min-width: 140px; }
@media (prefers-reduced-motion: reduce) { .flash { transition: none; } }

/* Quiz */
.q-prompt { font-weight: 700; margin-bottom: 4px; }
.q-big { font-size: clamp(1.3rem, 4.5vw, 1.8rem); font-weight: 750; margin: 6px 0 14px; overflow-wrap: anywhere; }
.opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 560px) { .opts { grid-template-columns: minmax(0, 1fr); } }
.opt { width: 100%; justify-content: flex-start; text-align: left; font-weight: 600; }
.opt:disabled { cursor: default; opacity: 1; }
.opt.correct { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.opt.correct::before { content: "✓ "; }
.opt.wrong { background: var(--no-bg); border-color: var(--no); color: var(--no); }
.opt.wrong::before { content: "✗ "; }
.typeform { display: flex; gap: 10px; flex-wrap: wrap; }
.typeform input { flex: 1 1 220px; font-size: 1.1rem; }
.feedback { margin: 14px 0; padding: 12px 14px; border-radius: 12px; border: 2px solid; overflow-wrap: anywhere; }
.feedback.ok { background: var(--ok-bg); border-color: var(--ok); }
.feedback.no { background: var(--no-bg); border-color: var(--no); }
.result h2 { font-size: 1.6rem; }

/* Tables */
.table-wrap { overflow-x: auto; max-width: 100%; }
table { border-collapse: collapse; width: 100%; margin: 8px 0 12px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th, .grammar th { background: var(--sky); }
.alpha th[scope="row"] { font-size: 1.15rem; white-space: nowrap; }
.key td:nth-child(odd) { font-weight: 750; font-style: italic; white-space: nowrap; }
@media (max-width: 560px) {
  .key, .key tbody, .key tr { display: block; }
  .key tr { display: grid; grid-template-columns: auto 1fr; }
  th, td { padding: 7px 6px; }
}
.tricky { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tricky div { background: var(--card-2); border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.tricky dt { font-weight: 800; font-size: 1.2rem; }
.tricky dd { margin: 4px 0 0; }
.tricky .ex { font-style: italic; color: var(--ink-2); }
@media (max-width: 700px) { .tricky { grid-template-columns: minmax(0, 1fr); } }

/* Search */
.search input { width: 100%; font-size: 1.15rem; padding: 12px 14px; border-width: 3px; border-color: var(--ink); }

/* Footer */
.site-footer { border-top: 3px solid var(--blue); background: var(--sky); padding: 18px 0 26px; font-size: .95rem; }

/* Bonus topics: wine & culture */
.topic-tiles { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.topic-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; height: 100%; text-decoration: none; background: var(--sky); border: 2px solid var(--line); border-radius: var(--radius); padding: 14px; }
.topic-tile:hover { border-color: var(--ink); background: var(--sky-2); }
.hr-sub { font-size: .85em; font-weight: 600; font-style: italic; color: var(--ink-2); }
.panel.caution { background: var(--sky); border: 2px solid var(--ink); border-left: 10px solid var(--sun); }
.panel.caution p { margin: 0; }
.toc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 6px 0 4px; }
.toc-l { font-weight: 700; }
.chip { font: inherit; font-size: .9rem; font-weight: 650; color: var(--ink); background: var(--card); border: 1.5px solid var(--ink-2); border-radius: 999px; padding: 6px 12px; min-height: 38px; cursor: pointer; text-align: left; max-width: 100%; }
.chip:hover { background: var(--sky-2); }
.topic-sec { scroll-margin-top: 90px; }
.topic-sec:focus:not(:focus-visible) { box-shadow: var(--shadow); }
.fact-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.fact { border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--card-2); overflow-wrap: anywhere; }
.fact h3, .item h3 { font-size: 1.1rem; margin: 0 0 2px; }
.fact p { margin: .3em 0 0; }
.fact-sub { margin: 0 0 .4em; font-size: .95rem; color: var(--ink-2); }
.fact-hr { font-weight: 700; color: var(--ink); }
.item { border-top: 1.5px solid var(--line); padding-top: 14px; margin-top: 14px; overflow-wrap: anywhere; }
.item:first-of-type { border-top: 0; padding-top: 0; }
.item .phrases { margin-top: 8px; }
.dialogue { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.line { display: flex; flex-direction: column; gap: 2px; border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 14px; max-width: 46rem; overflow-wrap: anywhere; }
.line.a { background: var(--card-2); }
.line.b { background: var(--sky); margin-left: clamp(0px, 6vw, 4rem); }
.line .who { font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.line .hr { font-weight: 750; font-size: 1.08rem; }

/* ---------- Croatian folk ornament (decorative only; all inline SVG data URIs, no network) ----------
   pleter = two-strand interlace with dots, šahovnica-style red/white checker strip, folk rosette (sun),
   Adriatic waves, olive branch, a small rosette as divider centre. Neutral heritage motifs only. */
.site-header::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Crect width='8' height='8' fill='%23fff'/%3E%3Crect width='4' height='4' fill='%23C8102E'/%3E%3Crect x='4' y='4' width='4' height='4' fill='%23C8102E'/%3E%3C/svg%3E") 0 12px / 6px 6px repeat-x, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Cpath d='M0 9C6 9 6 3 12 3' fill='none' stroke='%239DB8EA' stroke-width='2'/%3E%3Cpath d='M0 3C6 3 6 9 12 9' fill='none' stroke='%2310213F' stroke-width='4.4'/%3E%3Cpath d='M0 3C6 3 6 9 12 9' fill='none' stroke='%239DB8EA' stroke-width='2'/%3E%3Cpath d='M12 9C18 9 18 3 24 3' fill='none' stroke='%239DB8EA' stroke-width='2'/%3E%3Cpath d='M12 3C18 3 18 9 24 9' fill='none' stroke='%2310213F' stroke-width='4.4'/%3E%3Cpath d='M12 3C18 3 18 9 24 9' fill='none' stroke='%239DB8EA' stroke-width='2'/%3E%3Ccircle cx='12' cy='6' r='1.1' fill='%23FFC83D'/%3E%3Ccircle cx='0' cy='6' r='1.1' fill='%23FFC83D'/%3E%3Ccircle cx='24' cy='6' r='1.1' fill='%23FFC83D'/%3E%3C/svg%3E") 0 0 / 24px 12px repeat-x var(--navy); }
.site-header + main { padding-top: 42px; }

.hero { position: relative; overflow: hidden; border-left: 2px solid var(--line); padding-left: 34px; padding-bottom: 26px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='10' viewBox='0 0 32 10'%3E%3Cpath d='M0 6C4 1 8 1 12 5S20 9 24 5S28 1 32 6' fill='none' stroke='%23BCD0F0' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") 0 100% / 32px 10px repeat-x,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Crect width='8' height='8' fill='%23fff'/%3E%3Crect width='4' height='4' fill='%23C8102E'/%3E%3Crect x='4' y='4' width='4' height='4' fill='%23C8102E'/%3E%3C/svg%3E") 0 0 / 10px 10px repeat-y, var(--card); }
/* Sea scene: a sun low on the horizon and a faded lighthouse with a soft beam (opacity baked into the SVG). */
.hero::before { content: ""; position: absolute; right: 6px; bottom: 4px; width: 290px; height: 314px; max-height: 100%; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-20 0 240 260'%3E%3CclipPath id='sky'%3E%3Crect x='-20' y='0' width='240' height='213'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23sky)'%3E%3Cg opacity='0.55' fill='%23FFC83D'%3E%3Ccircle cx='18' cy='212' r='15'/%3E%3Cellipse cx='18' cy='182.0' rx='6.0' ry='10.5' transform='rotate(0 18 212)'/%3E%3Cellipse cx='18' cy='182.0' rx='6.0' ry='10.5' transform='rotate(45 18 212)'/%3E%3Cellipse cx='18' cy='182.0' rx='6.0' ry='10.5' transform='rotate(90 18 212)'/%3E%3Cellipse cx='18' cy='182.0' rx='6.0' ry='10.5' transform='rotate(135 18 212)'/%3E%3Cellipse cx='18' cy='182.0' rx='6.0' ry='10.5' transform='rotate(180 18 212)'/%3E%3Cellipse cx='18' cy='182.0' rx='6.0' ry='10.5' transform='rotate(225 18 212)'/%3E%3Cellipse cx='18' cy='182.0' rx='6.0' ry='10.5' transform='rotate(270 18 212)'/%3E%3Cellipse cx='18' cy='182.0' rx='6.0' ry='10.5' transform='rotate(315 18 212)'/%3E%3Ccircle cx='18' cy='212' r='22.5' fill='none' stroke='%23FFC83D' stroke-width='1.6'/%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='bm' x1='1' y1='0' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%23FFC83D' stop-opacity='0.088'/%3E%3Cstop offset='1' stop-color='%23FFC83D' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M100 60L0 22V98Z' fill='url(%23bm)'/%3E%3Cg opacity='0.16'%3E%3Cg fill='none' stroke='%231C3F94' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M100 26V33'/%3E%3Cpath d='M84 50L100 34L116 50Z' fill='%231C3F94'/%3E%3Crect x='89' y='50' width='22' height='17' rx='1.5'/%3E%3Cpath d='M96 50V67M104 50V67'/%3E%3Cpath d='M80 67H120M80 73H120M82 67V73M90 67V73M100 67V73M110 67V73M118 67V73'/%3E%3Cpath d='M87 73L77 204H123L113 73Z'/%3E%3C/g%3E%3Ccircle cx='100' cy='25' r='2.4' fill='%231C3F94'/%3E%3Crect x='93' y='54' width='14' height='9' fill='%23FFC83D' opacity='.9'/%3E%3CclipPath id='tw'%3E%3Cpath d='M87 73L77 204H123L113 73Z'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23tw)' fill='%23C8102E' opacity='.75'%3E%3Crect x='60' y='92' width='80' height='20'/%3E%3Crect x='60' y='132' width='80' height='20'/%3E%3Crect x='60' y='172' width='80' height='20'/%3E%3C/g%3E%3Cpath d='M95 204V190a5 5 0 0 1 10 0V204Z' fill='%231C3F94'/%3E%3Crect x='97' y='100' width='6' height='8' rx='3' fill='%231C3F94'/%3E%3Crect x='97' y='150' width='6' height='8' rx='3' fill='%231C3F94'/%3E%3Cpath d='M50 216C58 204 70 203 78 204H124C134 202 146 205 156 216Z' fill='%231C3F94' opacity='.85'/%3E%3Cpath d='M40 222C50 212 62 214 70 216L84 214L76 222Z' fill='%231C3F94' opacity='.6'/%3E%3Cg fill='none' stroke='%231C3F94' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M8 230c8-6 14-6 22 0s14 6 22 0 14-6 22 0 14 6 22 0 14-6 22 0 14 6 22 0 14-6 22 0 14 6 22 0 14-6 22 0'/%3E%3Cpath d='M30 244c8-6 14-6 22 0s14 6 22 0 14-6 22 0 14 6 22 0 14-6 22 0 14 6 22 0 14-6 22 0' opacity='.6'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") right bottom / contain no-repeat; }
.hero > * { position: relative; }
@media (min-width: 861px) { .hero > p, .hero > h1 { max-width: calc(100% - 250px); } }
@media (max-width: 860px) {
  .hero { padding-bottom: 118px; }
  .hero::before { width: 124px; height: 134px; right: 8px; bottom: 4px; }
  .hero .kicker { margin-bottom: 12px; }
}

.orn-divider { position: relative; height: 28px; margin: 22px 0 6px; }
.orn-divider::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Cpath d='M0 9C6 9 6 3 12 3' fill='none' stroke='%239BB3E0' stroke-width='1.8'/%3E%3Cpath d='M0 3C6 3 6 9 12 9' fill='none' stroke='%23F3F7FD' stroke-width='4.2'/%3E%3Cpath d='M0 3C6 3 6 9 12 9' fill='none' stroke='%239BB3E0' stroke-width='1.8'/%3E%3Cpath d='M12 9C18 9 18 3 24 3' fill='none' stroke='%239BB3E0' stroke-width='1.8'/%3E%3Cpath d='M12 3C18 3 18 9 24 9' fill='none' stroke='%23F3F7FD' stroke-width='4.2'/%3E%3Cpath d='M12 3C18 3 18 9 24 9' fill='none' stroke='%239BB3E0' stroke-width='1.8'/%3E%3Ccircle cx='12' cy='6' r='1.1' fill='%23C8102E'/%3E%3Ccircle cx='0' cy='6' r='1.1' fill='%23C8102E'/%3E%3Ccircle cx='24' cy='6' r='1.1' fill='%23C8102E'/%3E%3C/svg%3E") left center / 24px 12px repeat-x;
  -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 44%, transparent 46%, transparent 54%, #000 56%, #000 88%, transparent);
  mask: linear-gradient(90deg, transparent, #000 12%, #000 44%, transparent 46%, transparent 54%, #000 56%, #000 88%, transparent); }
.orn-divider::after { content: ""; position: absolute; left: 50%; top: 0; width: 28px; height: 28px; margin-left: -14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' opacity='1'%3E%3Cg fill='none' stroke='%234A6FC4' stroke-width='2.4'%3E%3Ccircle cx='50' cy='50' r='40'/%3E%3Ccircle cx='50' cy='50' r='12'/%3E%3Cg%3E%3Cellipse cx='50' cy='27' rx='7' ry='15' transform='rotate(0 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='7' ry='15' transform='rotate(45 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='7' ry='15' transform='rotate(90 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='7' ry='15' transform='rotate(135 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='7' ry='15' transform='rotate(180 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='7' ry='15' transform='rotate(225 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='7' ry='15' transform='rotate(270 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='7' ry='15' transform='rotate(315 50 50)'/%3E%3C/g%3E%3C/g%3E%3Cg stroke='%234A6FC4' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M50 12V18' transform='rotate(22.5 50 50)'/%3E%3Cpath d='M50 12V18' transform='rotate(67.5 50 50)'/%3E%3Cpath d='M50 12V18' transform='rotate(112.5 50 50)'/%3E%3Cpath d='M50 12V18' transform='rotate(157.5 50 50)'/%3E%3Cpath d='M50 12V18' transform='rotate(202.5 50 50)'/%3E%3Cpath d='M50 12V18' transform='rotate(247.5 50 50)'/%3E%3Cpath d='M50 12V18' transform='rotate(292.5 50 50)'/%3E%3Cpath d='M50 12V18' transform='rotate(337.5 50 50)'/%3E%3C/g%3E%3Cg fill='%23C8102E'%3E%3Ccircle cx='50' cy='5' r='2.4' transform='rotate(0 50 50)'/%3E%3Ccircle cx='50' cy='5' r='2.4' transform='rotate(22 50 50)'/%3E%3Ccircle cx='50' cy='5' r='2.4' transform='rotate(44 50 50)'/%3E%3Ccircle cx='50' cy='5' r='2.4' transform='rotate(66 50 50)'/%3E%3Ccircle cx='50' cy='5' r='2.4' transform='rotate(88 50 50)'/%3E%3Ccircle cx='50' cy='5' r='2.4' transform='rotate(110 50 50)'/%3E%3Ccircle cx='50' cy='5' r='2.4' transform='rotate(132 50 50)'/%3E%3Ccircle cx='50' cy='5' r='2.4' transform='rotate(154 50 50)'/%3E%3Ccircle cx='50' cy='5' r='2.4' transform='rotate(176 50 50)'/%3E%3Ccircle cx='50' cy='5' r='2.4' transform='rotate(198 50 50)'/%3E%3Ccircle cx='50' cy='5' r='2.4' transform='rotate(220 50 50)'/%3E%3Ccircle cx='50' cy='5' r='2.4' transform='rotate(242 50 50)'/%3E%3Ccircle cx='50' cy='5' r='2.4' transform='rotate(264 50 50)'/%3E%3Ccircle cx='50' cy='5' r='2.4' transform='rotate(286 50 50)'/%3E%3Ccircle cx='50' cy='5' r='2.4' transform='rotate(308 50 50)'/%3E%3Ccircle cx='50' cy='5' r='2.4' transform='rotate(330 50 50)'/%3E%3Ccircle cx='50' cy='5' r='2.4' transform='rotate(352 50 50)'/%3E%3Ccircle cx='50' cy='50' r='5'/%3E%3C/g%3E%3C/svg%3E") center / 28px 28px no-repeat; }

.panel { position: relative; }
.panel::before { content: ""; position: absolute; top: 6px; right: 6px; width: 34px; height: 34px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23C5D5F0' stroke-width='1.6'%3E%3Cpath d='M40 4A36 36 0 0 0 4 40'/%3E%3Cpath d='M40 14A26 26 0 0 0 14 40'/%3E%3C/g%3E%3Cg fill='%23C5D5F0'%3E%3Ccircle cx='31' cy='31' r='2.2'/%3E%3Ccircle cx='22' cy='35' r='1.4'/%3E%3Ccircle cx='35' cy='22' r='1.4'/%3E%3Ccircle cx='27' cy='22' r='1.4'/%3E%3Ccircle cx='22' cy='27' r='1.4'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }
.panel.caution::before, .panel.sos::before { display: none; }
.panel > * { position: relative; }

.front { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' opacity='1'%3E%3Cg fill='none' stroke='%23E3EBF8' stroke-width='2.4'%3E%3Ccircle cx='50' cy='50' r='40'/%3E%3Ccircle cx='50' cy='50' r='12'/%3E%3Cg%3E%3Cellipse cx='50' cy='27' rx='7' ry='15' transform='rotate(0 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='7' ry='15' transform='rotate(45 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='7' ry='15' transform='rotate(90 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='7' ry='15' transform='rotate(135 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='7' ry='15' transform='rotate(180 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='7' ry='15' transform='rotate(225 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='7' ry='15' transform='rotate(270 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='7' ry='15' transform='rotate(315 50 50)'/%3E%3C/g%3E%3C/g%3E%3Cg stroke='%23E3EBF8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M50 12V18' transform='rotate(22.5 50 50)'/%3E%3Cpath d='M50 12V18' transform='rotate(67.5 50 50)'/%3E%3Cpath d='M50 12V18' transform='rotate(112.5 50 50)'/%3E%3Cpath d='M50 12V18' transform='rotate(157.5 50 50)'/%3E%3Cpath d='M50 12V18' transform='rotate(202.5 50 50)'/%3E%3Cpath d='M50 12V18' transform='rotate(247.5 50 50)'/%3E%3Cpath d='M50 12V18' transform='rotate(292.5 50 50)'/%3E%3Cpath d='M50 12V18' transform='rotate(337.5 50 50)'/%3E%3C/g%3E%3Cg fill='%23EAF0FA'%3E%3Ccircle cx='50' cy='5' r='2.4' transform='rotate(0 50 50)'/%3E%3Ccircle cx='50' cy='5' r='2.4' transform='rotate(22 50 50)'/%3E%3Ccircle cx='50' cy='5' r='2.4' transform='rotate(44 50 50)'/%3E%3Ccircle cx='50' cy='5' r='2.4' transform='rotate(66 50 50)'/%3E%3Ccircle cx='50' cy='5' r='2.4' transform='rotate(88 50 50)'/%3E%3Ccircle cx='50' cy='5' r='2.4' transform='rotate(110 50 50)'/%3E%3Ccircle cx='50' cy='5' r='2.4' transform='rotate(132 50 50)'/%3E%3Ccircle cx='50' cy='5' r='2.4' transform='rotate(154 50 50)'/%3E%3Ccircle cx='50' cy='5' r='2.4' transform='rotate(176 50 50)'/%3E%3Ccircle cx='50' cy='5' r='2.4' transform='rotate(198 50 50)'/%3E%3Ccircle cx='50' cy='5' r='2.4' transform='rotate(220 50 50)'/%3E%3Ccircle cx='50' cy='5' r='2.4' transform='rotate(242 50 50)'/%3E%3Ccircle cx='50' cy='5' r='2.4' transform='rotate(264 50 50)'/%3E%3Ccircle cx='50' cy='5' r='2.4' transform='rotate(286 50 50)'/%3E%3Ccircle cx='50' cy='5' r='2.4' transform='rotate(308 50 50)'/%3E%3Ccircle cx='50' cy='5' r='2.4' transform='rotate(330 50 50)'/%3E%3Ccircle cx='50' cy='5' r='2.4' transform='rotate(352 50 50)'/%3E%3Ccircle cx='50' cy='50' r='5'/%3E%3C/g%3E%3C/svg%3E") right 14px bottom 14px / 70px 70px no-repeat, var(--card); }
.back { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='10' viewBox='0 0 32 10'%3E%3Cpath d='M0 6C4 1 8 1 12 5S20 9 24 5S28 1 32 6' fill='none' stroke='%23BCD0F0' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") 0 calc(100% - 10px) / 32px 10px repeat-x, var(--sky-2); }

.stat { box-shadow: inset 0 4px 0 var(--blue); padding-top: 16px; }

.site-footer { position: relative; border-top: 0; padding-top: 34px; padding-bottom: 112px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='30 20 140 205'%3E%3Cdefs%3E%3ClinearGradient id='bm' x1='1' y1='0' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%23FFC83D' stop-opacity='0.154'/%3E%3Cstop offset='1' stop-color='%23FFC83D' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M100 60L0 22V98Z' fill='url(%23bm)'/%3E%3Cg opacity='0.28'%3E%3Cg fill='none' stroke='%231C3F94' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M100 26V33'/%3E%3Cpath d='M84 50L100 34L116 50Z' fill='%231C3F94'/%3E%3Crect x='89' y='50' width='22' height='17' rx='1.5'/%3E%3Cpath d='M96 50V67M104 50V67'/%3E%3Cpath d='M80 67H120M80 73H120M82 67V73M90 67V73M100 67V73M110 67V73M118 67V73'/%3E%3Cpath d='M87 73L77 204H123L113 73Z'/%3E%3C/g%3E%3Ccircle cx='100' cy='25' r='2.4' fill='%231C3F94'/%3E%3Crect x='93' y='54' width='14' height='9' fill='%23FFC83D' opacity='.9'/%3E%3CclipPath id='tw'%3E%3Cpath d='M87 73L77 204H123L113 73Z'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23tw)' fill='%23C8102E' opacity='.75'%3E%3Crect x='60' y='92' width='80' height='20'/%3E%3Crect x='60' y='132' width='80' height='20'/%3E%3Crect x='60' y='172' width='80' height='20'/%3E%3C/g%3E%3Cpath d='M95 204V190a5 5 0 0 1 10 0V204Z' fill='%231C3F94'/%3E%3Crect x='97' y='100' width='6' height='8' rx='3' fill='%231C3F94'/%3E%3Crect x='97' y='150' width='6' height='8' rx='3' fill='%231C3F94'/%3E%3Cpath d='M50 216C58 204 70 203 78 204H124C134 202 146 205 156 216Z' fill='%231C3F94' opacity='.85'/%3E%3Cpath d='M40 222C50 212 62 214 70 216L84 214L76 222Z' fill='%231C3F94' opacity='.6'/%3E%3C/g%3E%3C/svg%3E") right max(20px, calc(50% - 500px)) bottom 34px / 66px 96px no-repeat, var(--sky); }
@media (min-width: 861px) { .site-footer { padding-bottom: 96px; } .site-footer .wrap { padding-right: 110px; } }
.site-footer::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 36px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40' viewBox='0 0 120 40'%3E%3Cpath d='M0 14c10-5 20-5 30 0s20 5 30 0 20-5 30 0 20 5 30 0' fill='none' stroke='%23fff' stroke-opacity='.28' stroke-width='1.4'/%3E%3Cpath d='M0 26c10-5 20-5 30 0s20 5 30 0 20-5 30 0 20 5 30 0' fill='none' stroke='%239FD0EA' stroke-opacity='.25' stroke-width='1.2'/%3E%3Cg fill='%23fff' fill-opacity='.4'%3E%3Ccircle cx='18' cy='7' r='.8'/%3E%3Ccircle cx='76' cy='33' r='.8'/%3E%3Ccircle cx='100' cy='6' r='.7'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 120px 36px repeat-x, var(--ocean); background-color: var(--blue); }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Cpath d='M0 9C6 9 6 3 12 3' fill='none' stroke='%237F9ED8' stroke-width='1.8'/%3E%3Cpath d='M0 3C6 3 6 9 12 9' fill='none' stroke='%23E3ECF9' stroke-width='4.2'/%3E%3Cpath d='M0 3C6 3 6 9 12 9' fill='none' stroke='%237F9ED8' stroke-width='1.8'/%3E%3Cpath d='M12 9C18 9 18 3 24 3' fill='none' stroke='%237F9ED8' stroke-width='1.8'/%3E%3Cpath d='M12 3C18 3 18 9 24 9' fill='none' stroke='%23E3ECF9' stroke-width='4.2'/%3E%3Cpath d='M12 3C18 3 18 9 24 9' fill='none' stroke='%237F9ED8' stroke-width='1.8'/%3E%3Ccircle cx='12' cy='6' r='1.1' fill='%23C8102E'/%3E%3Ccircle cx='0' cy='6' r='1.1' fill='%23C8102E'/%3E%3Ccircle cx='24' cy='6' r='1.1' fill='%23C8102E'/%3E%3C/svg%3E") 0 1px / 24px 12px repeat-x, var(--sky); border-top: 2px solid var(--blue); }

/* Olive branch on action buttons (decorative only: a CSS mask on ::before, so it is never part of the accessible name).
   One SVG in --olive-branch; the tint comes from --olive-ink per variant: olive #4F6B22 on light buttons (6.1:1 on white,
   4.6:1 on hover sky), pale olive #D5E8A6 on solid blue (7.3:1 on #1C3F94, 12:1 on hover navy). Quiz answers (.opt), chips, nav, Listen
   and the flashcard face are left clean. */
:root { --olive-branch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cdefs%3E%3Cpath id='l' d='M0 0C1.7-1.3 1.7-4.2 0-6C-1.7-4.2-1.7-1.3 0 0Z'/%3E%3C/defs%3E%3Cpath d='M2 18C7 13.5 11 9.5 16.5 3.5' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round'/%3E%3Cuse href='%23l' transform='translate(5.2 15.1) rotate(-8)'/%3E%3Cuse href='%23l' transform='translate(7.2 13.2) rotate(95)'/%3E%3Cuse href='%23l' transform='translate(9.6 10.7) rotate(-4)'/%3E%3Cuse href='%23l' transform='translate(12.6 7.6) rotate(-2) scale(.9)'/%3E%3Cuse href='%23l' transform='translate(16.3 3.7) rotate(45) scale(.8)'/%3E%3Cpath d='M11.5 9.2L14 11.8' fill='none' stroke='%23000' stroke-width='.9'/%3E%3Cellipse cx='15' cy='13.3' rx='1.6' ry='2.1' transform='rotate(-35 15 13.3)'/%3E%3C/svg%3E"); }
@supports ((mask-image: none) or (-webkit-mask-image: none)) {
  /* The ::before box is the branch plus a 5px right padding (the gap), pulled 5px into the button padding. It has a huge flex-shrink, so when a label
     would not fit on one line with it (long labels on a 390px phone) the branch scales down or folds away before the
     label ever wraps; button sizes and line breaks stay as they were. */
  .btn, .menu-btn { gap: 0; }
  .btn::before, .menu-btn::before { content: ""; flex: 0 100000 auto; width: 23px; min-width: 0; height: 18px; padding-right: 5px; margin-left: -5px; pointer-events: none;
    background-color: var(--olive-ink, #4F6B22); -webkit-mask: var(--olive-branch) content-box center / contain no-repeat; mask: var(--olive-branch) content-box center / contain no-repeat; }
  .btn.primary { --olive-ink: #D5E8A6; }
  @media (max-width: 860px) { .menu-btn { display: inline-flex; align-items: center; } }
}
@media (forced-colors: active) { .btn::before, .menu-btn::before { display: none; } }

/* Not-found page: a tiny lighthouse to find the way home */
.lost-lh { width: 96px; height: 125px; margin: 18px 0 6px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 260'%3E%3Cdefs%3E%3ClinearGradient id='bm' x1='1' y1='0' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%23FFC83D' stop-opacity='0.193'/%3E%3Cstop offset='1' stop-color='%23FFC83D' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M100 60L0 22V98Z' fill='url(%23bm)'/%3E%3Cg opacity='0.35'%3E%3Cg fill='none' stroke='%231C3F94' stroke-width='2.2' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M100 26V33'/%3E%3Cpath d='M84 50L100 34L116 50Z' fill='%231C3F94'/%3E%3Crect x='89' y='50' width='22' height='17' rx='1.5'/%3E%3Cpath d='M96 50V67M104 50V67'/%3E%3Cpath d='M80 67H120M80 73H120M82 67V73M90 67V73M100 67V73M110 67V73M118 67V73'/%3E%3Cpath d='M87 73L77 204H123L113 73Z'/%3E%3C/g%3E%3Ccircle cx='100' cy='25' r='2.4' fill='%231C3F94'/%3E%3Crect x='93' y='54' width='14' height='9' fill='%23FFC83D' opacity='.9'/%3E%3CclipPath id='tw'%3E%3Cpath d='M87 73L77 204H123L113 73Z'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23tw)' fill='%23C8102E' opacity='.75'%3E%3Crect x='60' y='92' width='80' height='20'/%3E%3Crect x='60' y='132' width='80' height='20'/%3E%3Crect x='60' y='172' width='80' height='20'/%3E%3C/g%3E%3Cpath d='M95 204V190a5 5 0 0 1 10 0V204Z' fill='%231C3F94'/%3E%3Crect x='97' y='100' width='6' height='8' rx='3' fill='%231C3F94'/%3E%3Crect x='97' y='150' width='6' height='8' rx='3' fill='%231C3F94'/%3E%3Cpath d='M50 216C58 204 70 203 78 204H124C134 202 146 205 156 216Z' fill='%231C3F94' opacity='.85'/%3E%3Cpath d='M40 222C50 212 62 214 70 216L84 214L76 222Z' fill='%231C3F94' opacity='.6'/%3E%3Cg fill='none' stroke='%231C3F94' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M8 230c8-6 14-6 22 0s14 6 22 0 14-6 22 0 14 6 22 0 14-6 22 0 14 6 22 0 14-6 22 0 14 6 22 0 14-6 22 0'/%3E%3Cpath d='M30 244c8-6 14-6 22 0s14 6 22 0 14-6 22 0 14 6 22 0 14-6 22 0 14 6 22 0 14-6 22 0' opacity='.6'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }
@media (max-width: 400px) { .panel::before { width: 26px; height: 26px; } }
@media print {
  .site-header::before, .site-header::after, .hero::before, .site-footer::after, .panel::before, .orn-divider, .lost-lh, .btn::before, .menu-btn::before { display: none; }
  .site-header { background: #fff; color: #000; } .site-footer { background: none; padding-bottom: 20px; }
}