/* MS Coast Mesh: one small stylesheet, mobile-first, system fonts only.
   Palette sampled from the MCM logo (brand/mcm-logo.png). Motifs: wave (blue + navy line),
   orange radio arcs, dotted mesh-net line. All art is inline SVG/CSS. */
:root{
  --navy:#032d5d;    /* logo outline + MCM letters: text, header */
  --blue:#3190d0;    /* logo wave: accents, markers, borders */
  --link:#256fa2;    /* logo blue darkened for AA text on sand/tint/white */
  --orange:#f37328;  /* logo sun + arcs: buttons/CTAs (navy text) */
  --sand:#fee9cc;    /* logo halo: section backgrounds */
  --tint:#fff7ee;    /* page background (sand mixed with white) */
  --white:#fff;      /* cards */
  --line:#ecd8b9; --muted:#3d5470;
  --todo-bg:#fff3cd; --todo-fg:#6b4e00; --todo-line:#c99a00;
  --r:12px;
  --net:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 16'%3E%3Cpath d='M0 4L12 12L24 4L36 12L48 4' fill='none' stroke='%23032d5d' stroke-width='1.4' stroke-opacity='.5'/%3E%3Cg fill='%23032d5d'%3E%3Ccircle cx='0' cy='4' r='2.6'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3Ccircle cx='24' cy='4' r='2.6'/%3E%3Ccircle cx='36' cy='12' r='2.6'/%3E%3Ccircle cx='48' cy='4' r='2.6'/%3E%3C/g%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--tint);color:var(--navy);
  font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
main{flex:1 0 auto;width:100%}
.wrap{max-width:60rem;margin:0 auto;padding:0 1rem}
a{color:var(--link)} a:hover{color:var(--navy)}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
h1{font-size:1.8rem;line-height:1.2;margin:1.5rem 0 .5rem}
/* radio arcs after inner-page titles */
h1::after{content:"";display:inline-block;width:.9em;height:.9em;margin-left:.3em;vertical-align:-.05em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f37328' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M4 8q3 4 0 8M9 5q6 7 0 14M14 2q9 10 0 20'/%3E%3C/svg%3E") center/contain no-repeat}
.hero h1::after{display:none}
h2{font-size:1.25rem;line-height:1.25;margin:1.9rem 0 .6rem}
h2::after{content:"";display:block;width:56px;height:8px;margin-top:.35rem;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 8'%3E%3Cpath d='M0 4q7-4 14 0t14 0 14 0 14 0' fill='none' stroke='%233190d0' stroke-width='2.6'/%3E%3C/svg%3E") no-repeat}
.step h2::after,.faq h2::after,.placeholder h2::after{display:none}
section{margin-bottom:1rem}
.lead{font-size:1.1rem;color:var(--muted)}
.small{font-size:.875rem;color:var(--muted)}
code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em}
code{background:var(--sand);color:var(--navy);padding:.05em .3em;border-radius:4px}
pre{background:var(--navy);color:#fff;padding:.9rem 1rem;border-radius:var(--r);overflow-x:auto;line-height:1.45;border-left:5px solid var(--blue)}
pre code{background:none;padding:0;color:inherit}
pre .todo{font-family:system-ui,sans-serif}
.net{height:16px;margin:1.6rem auto;max-width:22rem;background:var(--net) 0 0/48px 16px repeat-x;opacity:.8}
.net-wide{max-width:none;margin-top:2.5rem}

/* header */
.site-header{background:var(--navy);color:#fff;border-bottom:4px solid var(--blue)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding-top:.55rem;padding-bottom:.3rem}
.brand{display:flex;align-items:center;gap:.55rem;color:#fff;font-weight:800;font-size:1.15rem;text-decoration:none;white-space:nowrap}
.brand img{display:block;width:44px;height:44px}
.brand:hover{color:#fff}
.nav{display:flex;flex-wrap:wrap;gap:.1rem .3rem;padding-bottom:.55rem}
.nav a{color:#e8f0f8;text-decoration:none;padding:.3rem .6rem;border-radius:999px;font-size:.95rem}
.nav a:hover{background:rgba(255,255,255,.14);color:#fff}
.nav a[aria-current=page]{background:var(--sand);color:var(--navy);font-weight:650}

/* buttons: sunset orange with navy text */
.btn{display:inline-block;background:var(--orange);color:var(--navy);text-decoration:none;font-weight:700;padding:.6rem 1.1rem;border-radius:999px;margin:.2rem .4rem .2rem 0;border:2px solid var(--orange)}
.btn:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.btn-alt{background:var(--white);border-color:var(--navy);color:var(--navy)}
.btn-sm{font-size:.88rem;padding:.35rem .8rem;margin:0}
.site-header .btn:hover,.site-footer .btn:hover{background:var(--sand);border-color:var(--sand);color:var(--navy)}

/* TODO placeholders: visible on purpose */
.todo{display:inline-block;background:var(--todo-bg);color:var(--todo-fg);border:1px dashed var(--todo-line);
  border-radius:5px;padding:0 .35rem;font-size:.85rem;font-weight:600;line-height:1.5}

/* home hero: white like the badge, lighthouse scene, wave, sand town strip */
.hero{background:var(--white);margin-bottom:.5rem}
.hero-grid{display:grid;grid-template-columns:1fr;align-items:end}
.hero-text{padding:1.6rem 0 .5rem;align-self:center}
.hero h1{font-size:2.1rem;margin-top:0}
.hero p{font-size:1.1rem;max-width:40rem}
.scene{display:block;width:100%;max-width:270px;height:auto;justify-self:center;margin-top:.5rem}
@media (min-width:48rem){
  .hero-grid{grid-template-columns:1.2fr .8fr;gap:1.5rem}
  .hero h1{font-size:2.7rem}
  .scene{max-width:340px;margin-top:1.5rem}
}
.wave{display:block;width:100%;height:36px;margin-top:-8px}
@media (min-width:48rem){.wave{height:44px}}
.shore{background:var(--sand);padding:.4rem 0 1.1rem}

/* town strip: towns linked like mesh hops (navy dots, dotted net line) */
.towns{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;row-gap:.45rem;font-weight:650;font-size:.9rem;color:var(--navy)}
.towns li{display:flex;align-items:center;white-space:nowrap}
.towns li::before{content:"";flex:none;width:.6rem;height:.6rem;border-radius:50%;background:var(--navy);margin-right:.35rem}
.towns li:not(:last-child)::after{content:"";width:18px;border-top:2px dotted var(--navy);margin:0 .4rem;opacity:.7}
@media (min-width:64rem){.shore .wrap{max-width:none}.shore .towns{font-size:.8rem}.shore .towns li::before{margin-right:.28rem}.shore .towns li:not(:last-child)::after{width:10px;margin:0 .28rem}}
.towns-mini{font-size:.78rem;font-weight:600;color:#e8f0f8;justify-content:flex-start;margin:0 0 .9rem;row-gap:.3rem}
.towns-mini li::before{width:.4rem;height:.4rem;background:var(--sand);margin-right:.3rem}
.towns-mini li:not(:last-child)::after{width:10px;border-top-color:var(--sand);margin:0 .35rem;opacity:.6}

/* cards / panels */
.cards{display:grid;gap:.9rem;grid-template-columns:1fr}
@media (min-width:40rem){.cards{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--white);border:1px solid var(--line);border-top:4px solid var(--blue);border-radius:var(--r);padding:.9rem 1rem}
.card p{margin:.35rem 0}
.icon{display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;background:var(--sand);font-size:1.5rem}
.panel{background:var(--navy);color:#fff;border-radius:var(--r);padding:1rem 1.1rem;border-bottom:6px solid var(--blue)}
.panel h2{color:#fff;margin-top:.2rem}
.panel h2::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 8'%3E%3Cpath d='M0 4q7-4 14 0t14 0 14 0 14 0' fill='none' stroke='%23fee9cc' stroke-width='2.6'/%3E%3C/svg%3E")}
.panel .btn:hover{background:var(--sand);border-color:var(--sand);color:var(--navy)}
.placeholder{background:var(--sand);border:2px dashed var(--blue);border-radius:var(--r);text-align:center;padding:1rem}

/* steps / tables */
.step h2{display:flex;align-items:center;gap:.5rem}
.num{display:inline-grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--orange);color:var(--navy);font-size:1rem;font-weight:800;flex:none}
.settings-card{background:var(--white);border:2px solid var(--navy);border-radius:var(--r);padding:.25rem 1rem .6rem}
.table-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;background:var(--white);margin:.5rem 0}
th,td{border:1px solid var(--line);padding:.5rem .6rem;text-align:left}
th{background:var(--sand);font-size:.9rem}
.faq h2{border-top:1px solid var(--line);padding-top:1rem}
.faq h2:first-child{border-top:0}

/* map */
.map{aspect-ratio:1/1;max-height:560px;border-radius:var(--r);border:2px solid var(--navy);background:#aad3df}
.map-msg{padding:1rem}
@media (min-width:40rem){.map{aspect-ratio:auto;height:60vh;min-height:360px}}
.legend{display:flex;flex-wrap:wrap;gap:.35rem 1.25rem;margin:.7rem 0;font-size:.9rem;background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:.6rem .9rem}
.dot{display:inline-block;width:.9rem;height:.9rem;border-radius:50%;vertical-align:-.12rem;margin-right:.3rem}
.dot-active{background:var(--blue);border:2px solid #fff;box-shadow:0 0 0 1px var(--navy)}
.dot-inactive{background:#e5e8ec;border:2px solid var(--navy)}
.leaflet-popup-content{font-size:.9rem;line-height:1.4;color:var(--navy)}
.leaflet-popup-content ul{margin:.3rem 0 0;padding-left:1.1rem}

/* footer: navy water under a blue wave with a navy line */
.site-footer{position:relative;margin-top:3.5rem;background:var(--navy);color:#e8f0f8;padding:1.2rem 0 1rem;font-size:.9rem}
.site-footer::before{content:"";position:absolute;left:0;right:0;top:-27px;height:28px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 28' preserveAspectRatio='none'%3E%3Cpath d='M0 10C100 2 200 18 300 10S500 2 600 10 800 18 900 10 1100 2 1200 10V28H0Z' fill='%233190d0'/%3E%3Cpath d='M0 18C100 11 200 25 300 18S500 11 600 18 800 25 900 18 1100 11 1200 18V28H0Z' fill='%23032d5d'/%3E%3C/svg%3E") 0 0/100% 28px no-repeat}
.site-footer a{color:#9fd0f2}
.site-footer .btn{color:var(--navy)}
.site-footer .btn:hover{color:var(--navy)}
@media (max-width:30rem){th,td{padding:.35rem .4rem;font-size:.8rem}.faq ol,.faq ul{padding-left:1.2rem}}