/* Harbor Friends. A light, photo-forward visitor guide: white ground, the two blues of
   the state flag as structure, seal gold only for the lighthouse lamp. One light theme
   by choice. Ported from design/mockups/index.html (Home B, sans headings); MudBlazor
   supplies the drawer, dialogs, snackbars and the signed-in forms. */
/* The two typefaces, served from this site (wwwroot/fonts, fetched once by scripts/fonts.py
   under the SIL Open Font License beside them). Both files are variable fonts, latin subset:
   Figtree covers weights 300 to 900 in one file, Bricolage Grotesque is the 700 instance.
   swap shows the fallback face at once and swaps when the file arrives. */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/bricolage-grotesque-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url("/fonts/figtree-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --night: #002D5D;   /* Night Sky Blue: headings, buttons, footer */
  --water: #52C9E8;   /* Water Blue: accents only, never text on white */
  --white: #FFFFFF;
  --gold: #F2CE00;    /* Seal Gold: the lamp, nothing else */
  --pine: #006847;    /* status only */
  --ink: #0A2540;
  --muted: #4A6178;
  --mist: #F4F9FC;
  --foam: #E2F5FB;
  --line: #D3E2EC;
  --danger: #A4262C;
  --display: "Bricolage Grotesque", "Trebuchet MS", Arial, sans-serif;
  --body: "Figtree", "Segoe UI", system-ui, Arial, sans-serif;
  --lamp: var(--gold);
  --win: var(--night);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--white); color: var(--ink); font: 400 16px/1.55 var(--body); }
img { display: block; max-width: 100%; }

/* ---------- shared site pieces ---------- */
.site { font-family: var(--body); color: var(--ink); background: var(--white); min-height: 100vh; display: flex; flex-direction: column; }
.site > main { flex: 1 0 auto; }
/* MudBlazor resets every link to no underline, and Night Sky Blue on ink text is all but the
   same color, so a link in running copy would be invisible. Links are underlined unless they
   are a control of their own shape (a button, a tile, a nav item), which opt out below. */
.site a { color: var(--night); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.site a:hover { text-decoration-thickness: 2px; }
.site a.btn, .site a.lockup, .site a.tile, .site a.card, .site a.cam, .site .mini a, .site .nav a, .site a.skip { text-decoration: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.site h1, .site h2, .site h3, .site h4, .site p { margin: 0; }
.site h1, .site h2, .site h3 { text-wrap: balance; }
.site a:focus-visible, .site button:focus-visible, .site input:focus-visible, .site textarea:focus-visible,
.site summary:focus-visible, .site [tabindex]:focus-visible {
  outline: 3px solid var(--night); outline-offset: 2px; box-shadow: 0 0 0 6px var(--water);
}
.mud-button-root:focus-visible, .mud-icon-button:focus-visible { outline: 3px solid var(--night); outline-offset: 2px; }
/* FocusOnNavigate moves focus to the h1 for screen readers; it is not a control. */
.site h1:focus { outline: none; box-shadow: none; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--white); padding: 8px 12px; border-radius: 6px; font-weight: 600; }
.skip:focus { left: 8px; }

.wrap { max-width: 1120px; margin: 0 auto; padding-inline: 24px; width: 100%; }
.hdr { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding-block: 16px; }
.lockup { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--night); --win: var(--white); }
.lockup svg { width: 40px; height: 40px; flex: none; }
.lockup .nm { display: block; font: 700 22px/1 var(--display); letter-spacing: -.01em; }
.lockup .pl { display: block; font: 600 10.5px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 5px; }
.nav { display: flex; gap: 18px; flex-wrap: wrap; margin-left: auto; align-items: center; }
.nav a { font: 500 15px var(--body); text-decoration: none; color: var(--ink); }
.site .nav a { color: var(--ink); }
.site .nav a.btn { color: var(--white); }
.nav a:not(.btn):hover, .nav a.active:not(.btn) { color: var(--night); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--water); text-decoration-thickness: 2px; }
.btn { display: inline-flex; align-items: center; gap: 8px; font: 600 15px var(--body); padding: 11px 18px; border-radius: 6px; border: 1.5px solid var(--night); background: var(--night); color: var(--white); text-decoration: none; cursor: pointer; }
.site a.btn { color: var(--white); }
.btn.ghost, .site a.btn.ghost { background: transparent; color: var(--night); }
.btn.sm { padding: 8px 14px; font-size: 14px; }
.btn.center { justify-content: center; }
.btn[disabled] { opacity: .6; cursor: default; }
.btn.menu { display: none; margin-left: auto; }
.eyebrow { display: flex; align-items: center; gap: 8px; font: 600 12px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.eyebrow svg { width: 14px; height: 14px; color: var(--night); }
.h1 { font: 700 clamp(34px, 5vw, 56px)/1.06 var(--display); letter-spacing: -.03em; color: var(--night); }
.h2 { font: 700 clamp(26px, 3.2vw, 34px)/1.15 var(--display); letter-spacing: -.02em; color: var(--night); }
.lede { font-size: 18px; color: var(--muted); max-width: 52ch; }
.note { font-size: 14px; color: var(--muted); }
.sec { padding-block: 56px; }
.sec-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.sec-head a { font-weight: 600; font-size: 15px; }
.tint { background: var(--mist); }

/* conditions bar */
.cond { background: var(--night); color: var(--white); font-size: 13px; }
.cond .wrap { display: flex; gap: 6px 22px; flex-wrap: wrap; padding-block: 8px; align-items: center; min-height: 36px; }
.cond b { color: var(--water); font-weight: 600; }
/* Each item is its own link to the weather page. It keeps the bar's colors and
   underlines only under the pointer. The focus ring is white because the bar is dark. */
.site .cond a { color: var(--white); text-decoration: none; }
.site .cond a:hover { text-decoration: underline; text-underline-offset: 3px; }
.site .cond a:focus-visible { outline-color: var(--white); box-shadow: none; }

/* home: panorama hero with the webcam tile over its lower-left */
.heroB { padding-block: 32px 0; display: flex; flex-direction: column; gap: 28px; }
.heroB .top { display: grid; grid-template-columns: 7fr 4fr; gap: 32px; align-items: end; }
.heroB .pano { position: relative; }
.heroB .pano > img { width: 100%; height: auto; aspect-ratio: 2000/869; object-fit: cover; border-radius: 10px; background: var(--foam); }
.cam { position: relative; display: block; aspect-ratio: 16/9; max-width: 100%; border-radius: 8px; overflow: hidden; background: var(--night); color: var(--white); text-decoration: none; }
.site a.cam { color: var(--white); }
.cam > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
.cam::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,45,93,0) 55%, rgba(0,45,93,.72)); }
.cam .live { position: absolute; top: 14px; left: 14px; z-index: 1; display: flex; align-items: center; gap: 7px; background: var(--white); color: var(--night); font: 700 11px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; padding: 7px 10px; border-radius: 999px; }
.cam .play { position: absolute; inset: 0; margin: auto; z-index: 1; width: 72px; height: 72px; border-radius: 50%; background: rgba(255,255,255,.92); display: grid; place-items: center; }
.cam .play::before { content: ""; border-left: 22px solid var(--night); border-block: 14px solid transparent; margin-left: 6px; }
.cam .cap { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1; display: flex; justify-content: space-between; gap: 12px; align-items: end; flex-wrap: wrap; font-size: 14px; }
.cam .cap b { display: block; font: 700 22px/1.1 var(--display); }
.cam:hover .play { background: var(--white); transform: scale(1.05); }
.heroB .cam { position: absolute; right: 24px; bottom: -40px; width: min(380px, 44%); border: 4px solid var(--white); box-shadow: 0 14px 30px -14px rgba(0,45,93,.6); }
.heroB .cam .play { width: 52px; height: 52px; }
.heroB .cam .play::before { border-left-width: 16px; border-block-width: 10px; margin-left: 4px; }
.heroB .cam .cap b { font-size: 17px; }
.player { position: relative; aspect-ratio: 16/9; border-radius: 10px; overflow: hidden; background: var(--night); }
.player iframe, .player video, .player img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }

/* guide tiles and the compact list */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; min-height: 150px; padding: 16px; border-radius: 8px; text-decoration: none; background: var(--mist); color: var(--night); border: 1px solid var(--line); min-width: 0; }
.tile b { font: 700 18px/1.15 var(--display); }
.tile span { font-size: 13px; color: var(--muted); }
.tile.ph { min-height: 210px; border: 0; color: var(--white); background: var(--night); overflow: hidden; }
.tile.ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile.ph::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,45,93,0) 35%, rgba(0,45,93,.85)); }
.tile.ph b, .tile.ph span { position: relative; z-index: 2; color: var(--white); }
.tile.wide { grid-column: span 2; }
.tile:hover b { text-decoration: underline; text-decoration-color: var(--water); text-underline-offset: 4px; }
.mini { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 32px; }
.mini li { border-top: 1px solid var(--line); padding-block: 13px; min-width: 0; }
.mini a { font: 700 17px var(--display); text-decoration: none; }
.mini a::after { content: " \203A"; color: var(--muted); }
.mini a:hover { text-decoration: underline; text-decoration-color: var(--water); text-underline-offset: 4px; }

/* around the harbor */
.around ul { margin: 16px 0 0; padding-left: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 40px; color: var(--muted); max-width: 900px; }
.around ul b { color: var(--night); }

/* guide index: grouped list */
.grp { display: grid; grid-template-columns: 220px 1fr; gap: 16px 32px; padding-block: 22px; border-top: 1px solid var(--line); scroll-margin-top: 16px; }
.grp h2 { font: 700 20px/1.2 var(--display); color: var(--night); display: flex; gap: 10px; align-items: baseline; }
.grp h2 svg { width: 13px; height: 13px; flex: none; color: var(--water); }
.grp ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 32px; min-width: 0; }
.grp li a { font-weight: 600; }
.grp li span { display: block; font-size: 14px; color: var(--muted); }

/* cards */
.feat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 40px; }
.card { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--ink); min-width: 0; }
.site a.card { color: var(--ink); }
.card img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px; background: var(--foam); }
.card h3 { font: 700 21px/1.2 var(--display); color: var(--night); }
.card p { font-size: 15px; color: var(--muted); }
.card:hover h3 { text-decoration: underline; text-decoration-color: var(--water); text-underline-offset: 4px; }

/* festivals */
.fest { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 40px; }
.fest li { display: grid; grid-template-columns: 124px 1fr; gap: 16px; padding-block: 16px; border-top: 1px solid var(--line); align-items: center; }
.fest .dt { font: 700 13px/1.25 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--night); font-variant-numeric: tabular-nums; }
.fest b { display: block; color: var(--night); font-size: 17px; }
.fest span span { font-size: 14px; color: var(--muted); }

/* newsletter */
.news { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; background: var(--foam); border-radius: 10px; padding: 40px; }
.news .copy { display: flex; flex-direction: column; gap: 12px; }
.form { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fld { display: flex; flex-direction: column; gap: 5px; font: 600 13px var(--body); color: var(--night); }
.fld input, .fld textarea, .fld select { font: 400 16px var(--body); padding: 11px 12px; border: 1.5px solid var(--line); border-radius: 6px; background: var(--white); color: var(--ink); width: 100%; }
.or { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--muted); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.gsi { display: flex; justify-content: center; min-height: 44px; }
.fine { font-size: 13px; color: var(--muted); }
.fine.center { text-align: center; }
.msg { font-size: 14px; color: var(--pine); font-weight: 600; }
.err { font-size: 14px; color: var(--danger); font-weight: 600; }

/* footer */
.ftr { background: var(--night); color: var(--white); padding-block: 40px; margin-top: 56px; }
.ftr .wrap { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.site .ftr a { color: var(--white); text-decoration: none; display: block; font-size: 14px; padding-block: 3px; opacity: .85; }
.site .ftr a:hover { opacity: 1; text-decoration: underline; }
.ftr .lbl { font: 700 12px var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--water); margin-bottom: 8px; }
.ftr p { font-size: 14px; opacity: .85; max-width: 38ch; margin-top: 12px; }
.site .ftr a.lockup { display: flex; color: var(--white); --win: var(--night); opacity: 1; padding: 0; text-decoration: none; }
.ftr .lockup .pl { color: var(--water); }
.ftr .made-by { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; margin-top: 8px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.18); }
.site .ftr a.xeot { display: inline-block; padding: 0; opacity: 1; margin-bottom: 8px; }
.ftr a.xeot img { display: block; width: 96px; height: auto; }
.ftr .made-by p { margin-top: 0; max-width: none; }
.site .ftr p a { display: inline; padding: 0; font-size: inherit; opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.site .ftr a:focus-visible { outline-color: var(--white); }

/* guide page */
.crumb { font-size: 13px; color: var(--muted); padding-block: 8px 0; }
.crumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 6px; }
.crumb li + li::before { content: "/"; margin-right: 6px; }
.site .crumb a { color: var(--muted); }
.art-head { display: flex; flex-direction: column; gap: 16px; padding-block: 24px 28px; max-width: 760px; }
.art-head.wide { max-width: none; }  /* a long title that reads better across the whole column */
.meta { font-size: 13px; color: var(--muted); }
.art-img { width: 100%; height: auto; aspect-ratio: 1600/492; object-fit: cover; border-radius: 10px; background: var(--foam); }
.art { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; padding-block: 36px; }
.art.one { grid-template-columns: minmax(0, 1fr); }
.prose { min-width: 0; max-width: 68ch; font-size: 17px; line-height: 1.65; }
.site .prose > * + * { margin-top: 18px; }
.site .prose h2 { font: 700 27px/1.2 var(--display); letter-spacing: -.015em; color: var(--night); margin-top: 32px; scroll-margin-top: 16px; }
.site .prose h3 { font: 700 20px/1.25 var(--display); color: var(--night); margin-top: 26px; scroll-margin-top: 16px; }
.site .prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 22px; margin-bottom: 0; }
.prose li + li { margin-top: 6px; }
.site .prose li > p + p, .site .prose li > ul, .site .prose li > ol { margin-top: 6px; }
.site .prose a { font-weight: 500; overflow-wrap: anywhere; }
.prose blockquote { margin-inline: 0; background: var(--foam); border-radius: 8px; padding: 18px 20px; font-size: 16px; }
.site .prose blockquote > * + * { margin-top: 10px; }
.prose blockquote strong, .callout b { color: var(--night); }
.prose hr { border: 0; border-top: 1px solid var(--line); }
.prose code { font-size: .92em; background: var(--mist); padding: 1px 5px; border-radius: 4px; }
.tblw { overflow-x: auto; }
.prose table { border-collapse: collapse; width: 100%; font-size: 15px; font-variant-numeric: tabular-nums; line-height: 1.45; }
.prose th { font: 700 11px var(--body); letter-spacing: .1em; text-transform: uppercase; text-align: left; color: var(--muted); padding: 8px 12px 8px 0; border-bottom: 2px solid var(--night); vertical-align: bottom; }
.prose td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose td:first-child { font-weight: 700; color: var(--night); }
/* a key and value table: the first column is the row header, set like a first cell, not like a column heading */
.prose th[scope="row"] { font: 700 15px/1.45 var(--body); letter-spacing: 0; text-transform: none; color: var(--night); padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.callout { background: var(--foam); border-radius: 8px; padding: 18px 20px; font-size: 16px; }
.rail { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.box { border: 1px solid var(--line); border-radius: 8px; padding: 20px; }
.box.foam { background: var(--foam); border-color: var(--foam); }
.site .box .lbl { font: 700 12px var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.box dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 14px; }
.box dt { color: var(--muted); }
.box dd { margin: 0; font-weight: 600; color: var(--night); }
.box .big { font: 700 34px/1 var(--display); color: var(--night); font-variant-numeric: tabular-nums; }
.site .box .sub { font-size: 14px; color: var(--muted); margin-top: 6px; }
.src { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.src a { font-weight: 700; display: block; }
.src span { color: var(--muted); }
.src b { display: block; }
/* A plate inside an article: the image, then its caption. */
.site .prose figure { margin: 28px 0; }
.site .prose figure img { display: block; width: 100%; height: auto; border-radius: 8px; background: var(--foam); }
.site .prose figcaption { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--muted); }
/* A photograph in a guide's text. A portrait one is held narrower than the column, and a
   paragraph of several sits in a row. */
.site .prose figure.tall { max-width: 420px; }
.site .prose .figs { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 16px; margin: 28px 0; }
.site .prose .figs figure { margin: 0; max-width: none; }

/* directory: the index's groups of tiles, a list's chips and cards, an entry's page.
   Ported from design/mockups/directory.html. */
.dir-group { margin-top: 28px; }
.site .dir-group h2 { font: 700 26px/1.2 var(--display); color: var(--night); display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.dir-group h2 small { font: 400 14px/1 var(--body); color: var(--muted); }
.tile .n { position: absolute; top: 12px; right: 14px; font: 700 13px/1 var(--display); color: var(--night); background: var(--foam); border-radius: 999px; padding: 6px 9px; }
.tile.ph .n { z-index: 2; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 6px; }
.chip { font: 400 14px var(--body); padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); color: var(--night); cursor: pointer; }
.chip:hover { border-color: var(--night); }
.chip[aria-pressed="true"] { background: var(--night); color: var(--white); border-color: var(--night); }
/* The heading over a run of cards is set like a note: "17 entries, in alphabetical order", "Closed". */
.site .count { font: 400 14px/1.5 var(--body); color: var(--muted); margin: 8px 0 18px; }
.site .count.closed { margin-top: 32px; font-weight: 700; color: var(--night); }
.entries { display: flex; flex-direction: column; gap: 14px; }
.entry { border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 24px; scroll-margin-top: 80px; }
.site .entry h3 { grid-column: 1; font: 700 20px/1.2 var(--display); color: var(--night); }
.site .entry h3 a { text-decoration: none; }
.site .entry h3 a:hover { text-decoration: underline; text-decoration-color: var(--water); text-underline-offset: 4px; }
.entry .what { grid-column: 1; color: var(--muted); font-size: 15px; }
.entry .where { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px 20px; margin-top: 10px; font-size: 15px; }
.entry .where div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.entry .where small { font-size: 12px; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.entry .where a { overflow-wrap: anywhere; }
.entry .meta { grid-column: 1 / -1; display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 13px; color: var(--muted); }
.entry .meta .ok { color: var(--pine); font-weight: 600; }
/* the card's right-hand column: a sponsor's logo and the word "Sponsor" (sponsorship is the one paid thing) above the map link */
.entry .side { grid-column: 2; grid-row: 1 / span 2; align-self: start; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
/* on the entry's page the card has no name row, so the side column would sit beside nothing: it becomes a row of its own (#109) */
.entry .side.lone { grid-column: 1 / -1; grid-row: auto; flex-direction: row; justify-content: flex-end; }
.entry .logo { display: block; width: 96px; height: 96px; border-radius: 8px; }
.sponsor { font: 600 11px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.site a.maplink { font-size: 14px; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; white-space: nowrap; }
.site a.maplink:hover { border-color: var(--night); }
/* an entry's page: the heading beside a sponsor's logo at 192 and the label under it */
.dir-head { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 24px; }
.dir-head > div { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dir-head .side { flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.dir-head .logo { display: block; width: 192px; height: 192px; border-radius: 12px; }
.admin-logo { display: block; width: 96px; height: 96px; border: 1px solid var(--line); border-radius: 8px; }
.season { display: inline-block; background: var(--foam); color: var(--night); border-radius: 999px; padding: 2px 10px; font-size: 13px; font-weight: 600; }
.season.closed { background: #F3E6E7; color: var(--danger); }
.labels { display: flex; gap: 8px; flex-wrap: wrap; }
/* The list page's door to the map: a link drawn as a small map with the list's pins on it,
   from the mockup. A sketch, not a second map; the area map is the one MapLibre instance. */
.site a.mapthumb { display: block; height: 150px; border-radius: 8px; background: linear-gradient(135deg, #E8F1F7, #CFE3EF); border: 1px solid var(--line); position: relative; overflow: hidden; text-decoration: none; color: var(--muted); }
.site a.mapthumb:hover { border-color: var(--night); color: var(--night); }
.mapthumb .pin { position: absolute; width: 22px; height: 22px; margin: -22px 0 0 -11px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3)); }
.mapthumb .pin .swatch { width: 22px; height: 22px; display: block; }
.mapthumb .cap { position: absolute; left: 12px; right: 12px; bottom: 10px; font-size: 13px; }
.site .box .plain { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
/* photographs on an entry's page (haluska/harbor-friends#70): a strip of figures per kind, the
   "Menu" section a restaurant or coffee shop always has, drawn as a dashed box while it has no
   approved menu photo, and the upload form for signed-in visitors */
.photos { margin-top: 28px; }
.site .photos .h2 { margin-bottom: 12px; }
.photos .strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.photos figure { margin: 0; }
.photos figure img { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line); background: var(--mist); }
.site .photos figcaption { font-size: 13px; color: var(--muted); margin-top: 6px; }
.site .photos figcaption .cap { display: block; color: var(--night); font-size: 14px; }
.photos .menu-empty { border: 2px dashed var(--line); border-radius: 10px; padding: 20px; color: var(--muted); font-size: 15px; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.site .photos .form { max-width: 520px; margin-top: 12px; }
.photos .kind-hint { font-weight: 400; }
.admin-nav .pill { display: inline-block; margin-left: 6px; background: var(--foam); color: var(--night); border-radius: 999px; padding: 1px 8px; font-size: 12px; font-weight: 700; }
.admin-photo { display: block; width: 160px; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; }
.photo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.photo-list li { border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; }
.site .box .about p { font-size: 14px; }
.site .box .about p + p { margin-top: 8px; }

/* webcam page */
.camp { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; padding-block: 24px 8px; }

/* local area map page */
.mapp { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; padding-block: 24px 8px; align-items: start; }
.map-frame { min-width: 0; }
.map { width: 100%; height: min(72vh, 640px); min-height: 380px; border-radius: 10px; background: var(--foam); overflow: hidden; }
.map-off { margin-top: 10px; font-size: 14px; color: var(--muted); }
.legend { display: flex; flex-direction: column; gap: 18px; }
.legend fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.site .legend .lbl { padding: 0; margin-bottom: 4px; }
.legend label { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.legend input { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--night); }
.legend .swatch { flex: none; }
.site .map-note { max-width: 760px; margin-top: 8px; }
/* "Make the map bigger": the map runs the full width of the window and nearly its full
   height, and the legend moves under it. The width is main's (cqw), not the viewport's:
   100vw counts the scrollbar, and the map would run under it. The button is the last
   thing in the legend. Under the wide map the legend is a row, and the button is drawn
   at the right end of its first line, ahead of the Areas group, so it sits just under
   the map; in the page's order it still comes last. On a phone the row wraps to one
   group a line, which would leave the buttons above Areas, so there they keep the
   page's order (the 820px block below). */
.legend-size { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.legend-size .btn { width: 100%; justify-content: center; }
.mapp.wide .legend-size { order: 1; padding-top: 0; border-top: 0; align-self: flex-start; margin-left: auto; }
.mapp.wide .legend fieldset:last-of-type { order: 2; }
.mapp.wide { grid-template-columns: minmax(0, 1fr); }
.mapp.wide .map-frame { margin-inline: calc(50% - 50cqw); }
.mapp.wide .map { height: calc(100vh - 24px); min-height: 420px; border-radius: 0; }
.mapp.wide .legend { flex-direction: row; flex-wrap: wrap; gap: 18px 48px; }
.site > main:has(.mapp.wide) { container-type: inline-size; overflow-x: clip; }
.site .prose .map-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 32px; font-size: 15px; }
/* MapLibre's popup sits outside the type scale; give it the site's. */
.map-pop { display: flex; flex-direction: column; gap: 10px; font: 400 14px/1.4 var(--body); color: var(--ink); }
.map-pop > div + div { border-top: 1px solid var(--line); padding-top: 10px; }
.map-pop b { display: block; color: var(--night); }
.map-pop span { display: block; color: var(--muted); }
.map-pop a { display: inline-block; margin-top: 4px; font-weight: 600; }

/* National Weather Service advisories, watches and warnings: on the home page strip, in
   the conditions bar (.wx-alert) and on the weather band (.alert-pill). The name says what it is; the color only
   ranks it. A warning (Severe or Extreme, .grave) is filled, anything lesser is ruled. */
.wx-alert { font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--danger); border-left: 3px solid var(--danger); padding-left: 8px; margin-top: 6px; }
.wx-alert span { font-weight: 400; color: var(--ink); }
.wx-alert.grave { background: var(--danger); color: var(--white); border-left: 0; border-radius: 4px; padding: 4px 8px; }
.wx-alert.grave span, .site .wx-alert.grave a { color: var(--white); }
.cond .wx-alert { color: var(--white); border: 1px solid var(--white); border-radius: 999px; padding: 1px 10px; margin-top: 0; }
.cond .wx-alert.grave { background: var(--danger); border-color: var(--danger); }
/* The Meteocons drawings beside a reading, an advisory or a fact (Glyph.razor): the sky
   for a forecast, the hazard for an advisory. Each img carries its own width and height,
   so the sizes live in the markup; these rules only seat them in the text (the img rule
   above would otherwise make each one a block of its own). */
.glyph { display: inline-block; flex: none; }
/* A temperature (Shared/Temp.razor): the chosen unit large, the other small beside it. The small
   one scales with the number but never under 11px, so it reads in the bar and the body as well
   as beside a 48px display figure. */
.temp { white-space: nowrap; }
.temp small { font-size: max(11px, .45em); font-weight: 600; color: var(--muted); margin-left: .35em; letter-spacing: 0; }
.cond .temp small { color: rgba(255, 255, 255, .72); }
/* The units picker (Shared/UnitsPicker.razor): "Temperatures" and four buttons in one pill, the chosen one pressed. */
.units { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; font-size: 14px; }
.units-l { color: var(--muted); font-weight: 600; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--white); }
.seg button { font: 600 13px/1 var(--body); padding: 8px 14px; border: 0; background: transparent; color: var(--night); cursor: pointer; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: var(--night); color: var(--white); }
.seg button:focus-visible { outline: 2px solid var(--night); outline-offset: -3px; }
.wx-alert .glyph { vertical-align: -3px; margin-right: 5px; }
.lbl .glyph { vertical-align: -3px; margin-right: 6px; }
.state { display: flex; align-items: center; gap: 10px; padding: 20px; border-radius: 8px; background: var(--mist); color: var(--muted); font-size: 15px; }

/* ---- weather page (#119) ----
   The weather palette, bold where the rest of the site is muted, from
   design/mockups/almanac/index.html: the night sky the conditions band is drawn on, one
   temperature scale (Services/WeatherColors.cs names the same stops), and the colors for
   rain, snow, fog, the sun, the wind streaks and the lake. The almanac page shares them. */
:root {
  --sky-1: #081A38; --sky-2: #0B3A6B; --sky-3: #0E5C8F;
  --t-cold: #2B2F8F; --t-freeze: #1D5FB3; --t-cool: #1FA3C9; --t-mild: #3EC1B4; --t-fair: #5BC46A;
  --t-warm: #A9D24A; --t-hot: #F2C21B; --t-heat: #F08A1E; --t-fire: #D8362B;
  --rain: #2F7FE0; --rain-2: #8FC1F7; --snow: #B9A6F0; --fog: #9AA9B8; --sun: #FFC43D; --wind: #8EDBFF; --water-deep: #1273B5;
}
/* The conditions band (Shared/ConditionsBand.razor): the home strip and the weather page's
   full band share it. The canvas under the text is drawn by js/weather-fx.js. */
.band { position: relative; color: var(--white); background: linear-gradient(120deg, var(--sky-1), var(--sky-2) 55%, var(--sky-3)); overflow: hidden; }
.band canvas.windfx, .al-band canvas.windfx { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .75; pointer-events: none; }
.band .wrap { position: relative; }
.site .band a { color: var(--white); }
.site .band a:focus-visible { outline-color: var(--white); box-shadow: none; }
.band .temp small { color: rgba(255, 255, 255, .75); }
.band .glyph { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .25)); }
.band .h1 { color: var(--white); font-size: clamp(26px, 3.2vw, 34px); }
.band-head { padding-top: 22px; display: flex; flex-direction: column; gap: 6px; }
.band-when { font: 600 13px/1.4 var(--body); letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.band-state { padding: 24px 0 28px; font-size: 15px; opacity: .9; }
.site .band a.band-link { color: var(--wind); text-decoration: underline; text-underline-offset: 3px; }
/* the home strip: three readings in a row and the side column */
.wx-strip { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 12px 24px; align-items: center; padding: 12px 0; }
.site .wx-strip a.pt { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
.wx-strip .pt > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wx-strip .t { font: 700 30px/1 var(--display); font-variant-numeric: tabular-nums; }
.wx-strip .t .temp small { font: 500 14px/1 var(--body); margin-left: 4px; }
.wx-strip .nm { font-size: 13px; opacity: .8; }
.wx-strip .sky { font-size: 14px; }
.wx-strip .side { font-size: 13px; opacity: .95; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; text-align: right; }
.wx-strip .side b { font-weight: 600; }
.wx-strip .side > span > span + span::before { content: "\00B7"; margin: 0 6px; opacity: .7; }
.alert-pill { display: inline-flex; align-items: center; gap: 6px; background: #F2C21B; color: #3A2A00; font-weight: 700; font-size: 13px; border-radius: 999px; padding: 4px 10px; text-decoration: none; }
.site .band a.alert-pill { color: #3A2A00; text-decoration: none; }
.site .band a.alert-pill:hover { text-decoration: underline; }
.alert-pill span { font-weight: 400; }
.alert-pill.grave { background: var(--danger); color: var(--white); }
.site .band a.alert-pill.grave { color: var(--white); }
/* the weather page's big band: a card a point */
.wx-now { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 24px 0 20px; }
.wx-now .pt { position: relative; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px; padding: 18px 20px; display: grid; grid-template-columns: 88px 1fr; grid-template-rows: minmax(34px, auto); gap: 6px 14px; align-items: center; backdrop-filter: blur(2px); min-width: 0; }
.wx-now .pt > .glyph { grid-row: 1 / span 2; }
.site .wx-now .pt .nm { font: 600 14px/1.2 var(--body); opacity: .85; letter-spacing: .04em; text-transform: uppercase; color: var(--white); align-self: end; }
.site .wx-now .pt .t { font: 700 56px/1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; align-self: start; }
.wx-now .pt .t .temp small { font: 500 18px/1 var(--body); margin-left: 6px; }
.site .wx-now .pt .sky { grid-column: 1 / -1; font-size: 16px; }
.wx-now .pt .sky .temp small { font-size: 12px; }
.wx-now .pt .facts { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; font-size: 13px; opacity: .92; margin-top: 6px; }
.wx-now .pt .facts span b { font-weight: 600; }
.wx-now .pt .facts .temp small { font-size: 11px; }
/* each card chooses the point the chart, the week and the tiles follow (#128): a button laid
   over the whole card, its "Showing" tag in the top corner (the card's first row is held to
   34px so the tag clears the name), the chosen card's border brighter and thicker */
.wx-now .pt .pick { position: absolute; inset: 0; border: 0; border-radius: 14px; padding: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.wx-now .pt:has(.pick):hover { border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .11); }
.site .band .wx-now .pick:focus-visible { outline: 3px solid var(--white); outline-offset: 2px; box-shadow: none; }
.wx-now .pt.on, .wx-now .pt.on:hover { border-color: rgba(255, 255, 255, .85); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .85); }
.wx-now .pick .tag { position: absolute; top: 10px; right: 12px; background: var(--white); color: var(--night); font: 700 11px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; }
.windrose { display: inline-flex; align-items: center; gap: 6px; }
.windrose svg { width: 16px; height: 16px; flex: none; fill: var(--wind); }
.band-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding-bottom: 18px; font-size: 13px; opacity: .9; }
/* the units picker, top right of the band */
.band .band-units { position: absolute; right: 24px; top: 14px; z-index: 1; margin: 0; }
.band .units-l { color: rgba(255, 255, 255, .8); }
.band .seg { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); }
.band .seg button { color: var(--white); }
.band .seg button + button { border-left-color: rgba(255, 255, 255, .3); }
.band .seg button.on { background: var(--white); color: var(--night); }
.band .seg button:focus-visible { outline-color: var(--white); }
/* the sections under the band */
.wx-sec { padding-block: 28px 0; }
.wx-sec:last-of-type { padding-bottom: 8px; }
.site .wx-sec h2.h2 { font-size: clamp(22px, 2.6vw, 26px); margin-bottom: 10px; }
.wx-sec .chips { margin: 0 0 10px; }
/* the hourly chart (Shared/HourlyChart.razor): the SVG, the hover cells over it, the tooltip */
.chart-wrap { position: relative; margin-top: 4px; }
.chart-wrap svg.hc { width: 100%; height: auto; display: block; }
.hc .grid line { stroke: var(--line); }
.hc .precip .rain { fill: var(--rain); opacity: .45; }
.hc .precip .snow { fill: var(--snow); opacity: .55; }
.hc text { font: 400 12px var(--body); fill: var(--muted); }
.hc .cross line { stroke: var(--night); stroke-dasharray: 4 4; }
.hc .cross circle { fill: var(--white); stroke: var(--night); stroke-width: 3; }
.chart-wrap .hit { position: absolute; display: flex; cursor: crosshair; touch-action: pan-y; }
.chart-wrap .hit > div { flex: 1; min-width: 0; }
.chart-wrap .hit:focus-visible { outline: 2px solid var(--night); outline-offset: 2px; box-shadow: none; }
.wx-tip { position: absolute; top: 8px; transform: translateX(-50%); background: var(--night); color: var(--white); font-size: 13px; line-height: 1.4; padding: 8px 10px; border-radius: 8px; pointer-events: none; white-space: nowrap; display: flex; flex-direction: column; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.wx-tip.left { transform: none; }
.wx-tip.right { transform: translateX(-100%); }
.wx-tip b { color: var(--sun); font-size: 15px; }
.wx-tip .temp small { color: rgba(255, 255, 255, .75); }
.hc-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-top: 6px; }
.hc-legend i { display: inline-block; width: 14px; height: 4px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.hc-legend i.rain { background: var(--rain); }
.hc-legend i.snow { background: var(--snow); }
/* the week (Shared/WeekCards.razor): a card a day, the range bar on the temperature scale */
/* As many columns as there are cards (--days is set by WeekCards), so an evening's eight never leave one alone on a second row (#129). */
.week { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(var(--days, 7), 1fr); gap: 10px; }
.week .day { background: linear-gradient(180deg, #C9DDEC, #E6EFF6); border: 1px solid #AFC9DE; border-radius: 12px; padding: 12px 10px; text-align: center; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.week .day > b { font: 700 14px/1.2 var(--display); color: var(--night); }
.week .day .glyph { margin: 2px auto; }
.week .day .sky { font-size: 13px; color: var(--ink); min-height: 3.9em; line-height: 1.3; }
.week .day .range { position: relative; display: block; width: calc(100% - 12px); height: 8px; border-radius: 4px; background: var(--line); margin: 8px 6px 6px; }
.week .day .range i { position: absolute; top: 0; bottom: 0; border-radius: 4px; min-width: 8px; }
.week .day .hl { display: flex; justify-content: space-between; width: 100%; font-size: 13px; padding: 0 2px; font-variant-numeric: tabular-nums; }
.week .day .hl .lo { color: var(--muted); }
.week .day .hl .hi { font: 700 15px/1 var(--display); color: var(--night); }
.week .day .hl .temp small { font-size: 10px; margin-left: 2px; }
.week .day.today { border-color: var(--night); box-shadow: inset 0 0 0 1px var(--night); }
.site .wx-sec .note { margin-top: 8px; }
.week-words { margin: 14px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 14px; line-height: 1.5; max-width: 760px; }
.week-words dt { font-weight: 600; color: var(--night); }
.week-words dd { margin: 0; color: var(--ink); }
/* measured, not forecast (Shared/MeasuredTiles.razor) */
.wx-tiles { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.wx-tile { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; gap: 10px; align-items: center; min-width: 0; }
.wx-tile .glyph { flex: none; }
.wx-tile small { display: block; font-size: 12px; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.wx-tile b { font: 700 22px/1.1 var(--display); color: var(--night); font-variant-numeric: tabular-nums; }
.wx-tile b em { font: 500 13px/1 var(--body); font-style: normal; color: var(--muted); margin-left: 4px; }
.wx-tile b .temp small { font-size: 12px; }
.wx-tile b.words { font: 600 15px/1.3 var(--body); }
.wx-tile .trend { display: block; color: var(--pine); font-size: 12px; font-weight: 600; }
.wx-tile .trend.down { color: var(--danger); }
@media (max-width: 860px) {
  .wx-strip, .wx-now { grid-template-columns: 1fr; }
  .wx-strip .side { align-items: flex-start; text-align: left; }
  .band .band-units { position: static; padding: 12px 16px 0; }
  .hc text { font-size: 18px; }
  .week { grid-template-columns: repeat(4, 1fr); }
  .week-words { grid-template-columns: 1fr; gap: 2px 0; }
  .week-words dd { margin-bottom: 8px; }
}
@media (max-width: 460px) { .week { grid-template-columns: repeat(2, 1fr); } .week .day:last-child:nth-child(odd) { grid-column: span 2; } }
@media (prefers-reduced-motion: reduce) { .band canvas.windfx, .al-band canvas.windfx { display: none; } }
/* ---- end weather page (#119) ---- */

/* short text pages and small forms */
.page { padding-block: 24px 8px; }
.narrow { max-width: 760px; }
.panel { border: 1px solid var(--line); border-radius: 10px; padding: 28px; max-width: 460px; display: flex; flex-direction: column; gap: 14px; }
.panel details summary { cursor: pointer; font-weight: 600; color: var(--night); font-size: 14px; }
.panel details[open] summary { margin-bottom: 12px; }
.empty { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 40px 16px; color: var(--muted); }

/* admin */
.admin-nav { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; font-weight: 600; font-size: 15px; }
.preview { border: 1px solid var(--line); border-radius: 8px; width: 100%; min-height: 480px; background: var(--white); }

/* the menu under 820px */
.drawer-backdrop { position: fixed; inset: 0; z-index: 1300; background: rgba(10,37,64,.45); }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1301; width: min(320px, 86vw); background: var(--white); padding: 16px 20px 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; box-shadow: -12px 0 32px -18px rgba(0,45,93,.5); }
.drawer > .btn { align-self: flex-end; }
.drawer nav { display: flex; flex-direction: column; }
.drawer nav a { font: 600 17px var(--body); color: var(--night); text-decoration: none; padding: 13px 4px; border-top: 1px solid var(--line); }
.drawer nav a:hover { text-decoration: underline; text-decoration-color: var(--water); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.drawer a:focus-visible, .drawer button:focus-visible { outline: 3px solid var(--night); outline-offset: 2px; box-shadow: 0 0 0 6px var(--water); }
@media (prefers-reduced-motion: no-preference) {
  .drawer { animation: drawer-in .18s ease-out; }
  .drawer-backdrop { animation: fade-in .18s ease-out; }
}
@keyframes drawer-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* A route with no prerendered file of its own: see the script in index.html. The page
   behind is hidden, so the loading screen is a pseudo-element and its logo a background
   image (logo.svg): 72px of logo, 20px of air, then the words, the pair centered. */
html.app-route #app { visibility: hidden; }
html.app-route body::before { content: "Loading Harbor Friends"; position: fixed; inset: 0; display: grid; place-items: center; padding-top: 92px; color: var(--night); font: 600 16px var(--body); background: url("../logo.svg") center calc(50% - 20px) / 72px 72px no-repeat; }

/* The same screen where index.html itself is what shows: the dev server, the phone app. */
.app-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; min-height: 100vh; color: var(--night); font: 600 16px var(--body); }
.app-loading-logo { width: 72px; height: 72px; }

#blazor-error-ui { background: #FFF8C4; color: var(--ink); bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); display: none; left: 0; padding: 0.6rem 3.5rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 2000; font: 400 15px/1.4 var(--body); }
#blazor-error-ui a { color: var(--night); font-weight: 600; text-decoration: underline; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.5rem; top: 0.3rem; border: 0; background: transparent; color: var(--ink); font: 700 18px/1 var(--body); padding: 8px 10px; border-radius: 4px; }
#blazor-error-ui .dismiss:focus-visible { outline: 3px solid var(--night); outline-offset: 1px; }

@media (max-width: 820px) {
  .news, .art, .camp, .mapp, .heroB .top, .grp { grid-template-columns: 1fr; }
  .site .prose .map-list { grid-template-columns: 1fr; }
  .map { height: 62vh; }
  .mapp.wide .legend { flex-direction: column; flex-wrap: nowrap; }
  .mapp.wide .legend-size { order: 3; align-self: stretch; margin-left: 0; padding-top: 16px; border-top: 1px solid var(--line); }
  .grp ul, .fest, .around ul { grid-template-columns: 1fr; }
  .feat { grid-template-columns: 1fr; }
  .entry { grid-template-columns: minmax(0, 1fr); }
  .entry .side { grid-column: 1; grid-row: auto; flex-direction: row; align-items: center; justify-content: space-between; }
  .dir-head .logo { width: 96px; height: 96px; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .ftr .wrap { grid-template-columns: 1fr 1fr; }
  .heroB .cam { position: relative; right: auto; bottom: auto; width: 100%; margin-top: 12px; border: 0; }
  .nav { display: none; }
  .btn.menu { display: inline-flex; }
  .mini { grid-template-columns: 1fr 1fr; }
  .news { padding: 24px; }
  .wrap { padding-inline: 16px; }
  .sec { padding-block: 40px; }
}
@media (max-width: 460px) {
  .tiles { grid-template-columns: 1fr; }
  .tile.wide { grid-column: auto; }
  .mini { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: no-preference) { .cam .play { transition: transform .15s; } }
/* MudBlazor animates ripples, dialogs and snackbars whatever the visitor asked for. */
@media (prefers-reduced-motion: reduce) {
  .mud-ripple::after { display: none !important; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---- almanac (#79) ---- */
/* The palette tokens are declared once, in the weather page block (#119). */
/* The date band: the night sky, white type, the sun and moon row at the right. */
.al-band { position: relative; color: var(--white); background: linear-gradient(120deg, var(--sky-1), var(--sky-2) 55%, var(--sky-3)); overflow: hidden; padding: 26px 0 22px; }
.al-band-in { position: relative; display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; }
.site .al-band p { margin: 0; }
.al-kicker { font: 600 13px/1.2 var(--body); letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.al-band h1 { color: var(--white); margin: 6px 0 0; font: 700 40px/1.1 var(--display); letter-spacing: -.01em; }
.site .al-band .al-line { opacity: .85; margin-top: 6px; max-width: 64ch; }
.al-band .temp small { color: rgba(255, 255, 255, .72); }
.al-sun { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; font-size: 14px; color: #DCEAF4; }
.al-sun b { color: var(--white); font-weight: 600; }
.al-sun .glyph { vertical-align: middle; margin-right: 4px; }
/* The point tabs. */
.al-tabs { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 18px 0 6px; }
.al-tab { font: 600 14px/1.2 var(--body); padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); color: var(--night); cursor: pointer; }
.al-tab.on { background: var(--night); color: var(--white); border-color: var(--night); }
.al-tab:focus-visible { outline: 2px solid var(--night); outline-offset: 2px; }
.al-tabs .al-note { margin-left: auto; font-size: 13px; color: var(--muted); }
.al-sec { padding: 28px 0 0; }
.al-sec h2 { font: 700 26px/1.2 var(--display); color: var(--night); margin: 0 0 14px; }
.site .al-foot { font-size: 13px; color: var(--muted); margin: 8px 0 0; }
.site .al-attrib { margin-top: 28px; }
.al-dim { color: var(--muted); }
/* Today against the record: the thermometer, 0 to 90 F, with the normal band shaded. */
.al-thermo { background: var(--mist); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; }
.al-scale { position: relative; height: 14px; border-radius: 7px; margin: 44px 0 52px; background: linear-gradient(90deg, var(--t-cold), var(--t-freeze) 20%, var(--t-cool) 32%, var(--t-mild) 42%, var(--t-fair) 52%, var(--t-warm) 62%, var(--t-hot) 74%, var(--t-heat) 86%, var(--t-fire)); }
.al-mk { position: absolute; top: -6px; width: 4px; height: 26px; background: var(--night); border-radius: 2px; transform: translateX(-50%); }
.al-mk.today { background: var(--white); border: 2px solid var(--night); width: 10px; height: 10px; top: 2px; border-radius: 50%; }
.al-lbl { position: absolute; top: -28px; transform: translateX(-50%); font-size: 12px; color: var(--muted); white-space: nowrap; }
.al-lbl b { color: var(--ink); font-weight: 600; }
.al-lbl.below { top: 20px; }
.al-lbl.below.far { top: 36px; }
.al-lbl .temp small { display: none; }
.al-normal { position: absolute; top: -3px; height: 20px; border-radius: 10px; background: rgba(0, 45, 93, .18); border: 1px solid rgba(0, 45, 93, .35); }
.al-scale-foot { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--muted); }
.al-scale-foot span:nth-child(2) { text-align: center; }
/* Now, in full: the tiles. */
.al-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.al-tile { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; gap: 10px; align-items: center; min-width: 0; }
.al-tile > div { min-width: 0; }
.al-tile small { display: block; font-size: 12px; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.al-tile b { font: 700 22px/1.1 var(--display); color: var(--night); }
.al-tile b.al-words { font-size: 16px; }
.al-tile b em { font: 500 13px/1 var(--body); font-style: normal; color: var(--muted); margin-left: 4px; }
.al-trend { display: block; color: var(--pine); font-size: 12px; font-weight: 600; }
.al-trend.down { color: var(--danger); }
.al-trend .temp small { display: none; }
/* The history chart. The SVG scales with its box; the colors are the tokens above. */
.al-hist-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.al-hist-head h2 { margin: 0; }
.al-chart svg { width: 100%; height: auto; display: block; }
.al-chart text { fill: var(--muted); font: 12px var(--body); }
.al-grid line { stroke: var(--line); }
.al-normal-shade { fill: rgba(0, 45, 93, .10); }
.al-rain rect { fill: var(--rain); opacity: .55; }
.al-rain rect.snow { fill: var(--snow-2); }
.al-cross { stroke: var(--night); stroke-dasharray: 4 4; }
.al-tip rect { fill: var(--night); }
.al-tip text { fill: var(--white); font-size: 13px; }
.al-tip text.b { font-weight: 700; fill: var(--sun); }
.al-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-top: 6px; }
.al-legend i { display: inline-block; width: 14px; height: 4px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.al-key-temp { background: linear-gradient(90deg, var(--t-freeze), var(--t-fair), var(--t-heat)); }
.al-key-normal { background: rgba(0, 45, 93, .18); }
.al-key-rain { background: var(--rain); }
/* This date in past years, and the rail beside it. */
.al-two { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 36px; }
.al-rail { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.al-box { background: var(--mist); border: 1px solid var(--line); border-radius: 12px; padding: 16px; font-size: 14px; }
.al-box h3 { font: 700 16px/1.2 var(--display); color: var(--night); margin: 0 0 8px; }
.site .al-box p { margin: 0 0 6px; }
.al-box table { width: 100%; border-collapse: collapse; font-size: 13px; }
.al-box td { padding: 4px 0; border-bottom: 1px solid var(--line); }
.al-box td:last-child { text-align: right; font-weight: 600; }
.al-recs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.al-rec { border-radius: 10px; padding: 10px 12px; color: var(--white); }
.al-rec small { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.al-rec b { font: 700 24px/1.1 var(--display); }
.al-rec span { font-size: 12px; opacity: .9; display: block; }
.al-rec .temp small { color: rgba(255, 255, 255, .8); }
.al-rec.hi { background: linear-gradient(135deg, var(--t-heat), var(--t-fire)); }
.al-rec.lo { background: linear-gradient(135deg, var(--t-freeze), var(--t-cold)); }
.al-rec.wet { background: linear-gradient(135deg, var(--rain), var(--water-deep)); }
.al-rec.snow { background: linear-gradient(135deg, var(--snow), var(--snow-2)); }
.al-past table { width: 100%; border-collapse: collapse; font-size: 14px; }
.al-past th, .al-past td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.al-past th { font-weight: 600; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.al-past td.n { font: 600 15px/1.2 var(--display); }
.al-past td.n .temp small { display: none; }
/* The seasons: six cards with a bar each. */
.al-seasons { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.al-season { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: var(--white); }
.al-season h3 { font: 700 15px/1.2 var(--display); color: var(--night); display: flex; align-items: center; gap: 8px; margin: 0; }
.site .al-season p { font-size: 13px; color: var(--muted); margin: 6px 0 0; }
.al-season .n { font: 700 26px/1.1 var(--display); color: var(--night); display: block; margin-top: 6px; }
.al-bar { height: 8px; border-radius: 4px; background: var(--line); margin-top: 8px; position: relative; overflow: hidden; }
.al-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
@media (max-width: 860px) {
  .al-two { grid-template-columns: 1fr; }
  .al-band h1 { font-size: 32px; }
  .al-tabs .al-note { margin-left: 0; flex-basis: 100%; }
  .al-scale { margin-inline: 30px; }
}