:root {
  --bg: #f4f6f8;
  --ink: #142033;
  --muted: #5c6b7a;
  --card: #fff;
  --line: #e4eaf0;
  --sea: #0f3d5e;
  --gold: #c8963e;
  --sans: "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); line-height: 1.5; overflow-x: hidden; }
a { color: var(--sea); }
img { max-width: 100%; display: block; }
.skip { position: absolute; left: -999px; }
.top { display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem; background: var(--sea); color: #fff; position: sticky; top: 0; z-index: 5; }
.logo { display: inline-flex; align-items: center; gap: .45rem; color: #fff; text-decoration: none; font-weight: 800; }
.logo img { width: 34px; height: 34px; border-radius: 9px; }
.tag { border: 1px solid var(--gold); color: var(--gold); border-radius: 999px; font-size: .72rem; padding: .05rem .4rem; }
.menu-check { position: absolute; opacity: 0; pointer-events: none; }
.menu-btn { margin-left: auto; background: rgba(255,255,255,.12); color: #fff; border-radius: 10px; padding: .4rem .7rem; font-weight: 700; cursor: pointer; }
.top nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #0c304c; padding: .5rem; flex-direction: column; }
.menu-check:checked ~ nav { display: flex; }
.top nav a { color: #fff; text-decoration: none; padding: .7rem .8rem; border-radius: 10px; }
.ribbon { margin: 0; background: #123a56; color: #d7e6f2; text-align: center; font-size: .85rem; padding: .4rem .8rem; }
main { width: min(1120px, calc(100% - 1.2rem)); margin: 0 auto; padding: 1rem 0 2.5rem; }
h1 { font-size: clamp(1.7rem, 4vw, 2.6rem); line-height: 1.15; margin: 0 0 .6rem; }
h2 { font-size: 1.35rem; margin: 0 0 .4rem; }
.hero, section { margin: 1.1rem 0; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.btn, button { font: inherit; font-weight: 750; color: #fff; text-decoration: none; border: 0; border-radius: 12px; padding: .7rem 1rem; background: linear-gradient(180deg, #e2b65a, var(--gold)); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 10px 18px rgba(200,150,62,.35); cursor: pointer; }
.btn.ghost { background: #fff; color: var(--sea); box-shadow: inset 0 0 0 1px #d5dee6, 0 8px 16px rgba(15,61,94,.08); }
.finder { display: grid; gap: .55rem; background: #fff; border-radius: 16px; padding: .8rem; box-shadow: 0 12px 28px rgba(15,61,94,.08); }
.finder label { display: grid; gap: .2rem; font-size: .78rem; color: var(--muted); }
.finder input, .finder select { font: inherit; padding: .55rem .65rem; border-radius: 10px; border: 1px solid var(--line); }
.chips { display: flex; gap: .4rem; overflow: auto; }
.chips a { background: #fff; border-radius: 999px; padding: .3rem .65rem; text-decoration: none; box-shadow: 0 4px 10px rgba(15,61,94,.06); white-space: nowrap; }
.cards, .zones { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.card, .zone { background: #fff; border-radius: 16px; box-shadow: 0 10px 24px rgba(15,61,94,.1); color: inherit; text-decoration: none; transition: transform .2s ease; }
.card:hover, .zone:hover { transform: translateY(-4px); }
.card a { display: grid; gap: .15rem; padding: .65rem; color: inherit; text-decoration: none; }
.mark { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; background: #102033; }
.mark img { width: 40px; height: 40px; }
.chip { font-size: .68rem; color: var(--sea); }
.card strong { font-size: .92rem; }
.card p, .zone p { margin: 0; color: var(--muted); font-size: .75rem; }
.card time { font-size: .68rem; color: var(--muted); }
.card em { font-style: normal; font-weight: 750; font-size: .75rem; color: var(--sea); }
.zone { display: block; padding: .8rem; }
.zone h3 { margin: 0 0 .2rem; font-size: .95rem; }
.notes { display: grid; gap: .5rem; }
.notes article { background: #fff; border-radius: 14px; padding: .8rem; box-shadow: 0 8px 18px rgba(15,61,94,.07); }
.notes h3 { margin: 0 0 .25rem; }
.ask details { background: #fff; border-radius: 12px; padding: .4rem .7rem; margin: .35rem 0; }
.sheet { background: #fff; border-radius: 16px; padding: 1rem; box-shadow: 0 10px 24px rgba(15,61,94,.08); }
.foot { background: #0f3d5e; color: #d5e4ef; padding: 1.2rem 1rem 1.6rem; }
.foot a { color: #fff; }
.foot .legal { font-size: .82rem; }
.reveal { opacity: 0; transform: translateY(16px); transition: .55s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (min-width: 900px) {
  .menu-btn { display: none; }
  .top nav { display: flex; position: static; flex-direction: row; background: transparent; margin-left: auto; padding: 0; gap: .2rem; }
  .top nav a { padding: .4rem .6rem; font-size: .86rem; }
  .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
  .zones, .notes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .finder { grid-template-columns: 1fr 1fr 1fr 1.3fr auto; align-items: end; }
  .card a { padding: .9rem; }
  .mark { width: 72px; height: 72px; }
  .mark img { width: 56px; height: 56px; }
  .card strong { font-size: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}