/* Northern Night. Load after the shared layout and component styles. */
body.northern-night {
  --night: #101f2d;
  --night-raised: #172b3b;
  --night-panel: #1d3344;
  --night-cream: #f4eddb;
  --night-muted: #c5cdd1;
  --night-gold: #d8bd84;
  --night-gold-hover: #e7cea0;
  --night-line: #425263;
  --ink: var(--night-cream);
  --blue: var(--night-raised);
  --paper: var(--night);
  --muted: var(--night-muted);
  --line: var(--night-line);
  --accent: var(--night-gold);
  --oat-soft: var(--night-panel);
  --oat-panel: var(--night-raised);
  background: var(--night);
  color: var(--night-cream);
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
}

.northern-night ::selection {
  background: var(--night-gold);
  color: var(--night);
}

.northern-night h1,
.northern-night h2,
.northern-night h3 {
  font-family: var(--serif);
  color: var(--night-cream);
}

.northern-night .eyebrow { color: var(--night-gold); }
.northern-night a { text-decoration-thickness: 1px; }
.northern-night .text-link { color: var(--night-gold); }
.northern-night .text-link:hover { opacity: 1; color: var(--night-cream); }
.northern-night :focus-visible { outline-color: var(--night-gold); }
.northern-night .skip { background: var(--night-gold); color: var(--night); }

/* A quiet masthead and a warm, consistent booking action. */
.northern-night .header {
  background: var(--night);
  border-bottom: 1px solid var(--night-line);
}

.northern-night .header .brand,
.northern-night .footer .brand {
  font-family: var(--sans);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--night-cream);
}

.northern-night .brand span {
  color: var(--night-muted);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .075em;
  text-transform: none;
}

.northern-night .header .desktop-nav { color: var(--night-cream); }
.northern-night .header nav a[aria-current] { text-decoration-color: var(--night-gold); }
.northern-night .header nav a:not(.button):hover { color: var(--night-gold); }
.northern-night .mobile-nav { color: var(--night-cream); }
.northern-night .mobile-nav nav {
  color: var(--night-cream);
  background: var(--night-raised);
  border: 1px solid var(--night-line);
  box-shadow: 0 18px 40px #0005;
}

.northern-night :is(.button, .button.light, .planning-booking .button, .guide-stay-note .button, .cottage-comparison-table .button) {
  background: var(--night-gold);
  border-color: var(--night-gold);
  color: var(--night);
  border-radius: 0;
  font-weight: 600;
  justify-content: center;
  text-align: center;
  text-decoration: none;
}

.northern-night :is(.button, .button.light, .planning-booking .button, .guide-stay-note .button, .cottage-comparison-table .button):hover {
  background: var(--night-gold-hover);
  border-color: var(--night-gold-hover);
  color: var(--night);
  text-decoration: none;
}

.northern-night .button span { color: inherit; }
.northern-night .button::before,
.northern-night .button::after { content: none; }

/* Raised surfaces give articles, cottage choices and practical advice a rhythm. */
.northern-night .image-link,
.northern-night .intro-gallery a { background: var(--night-panel); }
.northern-night .booking-panel,
.northern-night .travel-side,
.northern-night .travel-note,
.northern-night .guide-answer,
.northern-night .walk-summary,
.northern-night .activity-recommendation {
  background: var(--night-panel);
  color: var(--night-cream);
  border-color: var(--night-line);
}

.northern-night .guide-answer,
.northern-night .travel-note { border-left-color: var(--night-gold); }
.northern-night .guide-answer > p:last-child { color: var(--night-cream); }
.northern-night .guide-answer .eyebrow { color: var(--night-gold); }
.northern-night .booking-panel .small-copy,
.northern-night .travel-side p,
.northern-night .activity-recommendation p:not(.eyebrow) { color: var(--night-muted); }
.northern-night .host-advice { background: var(--night-raised); }
.northern-night .host-advice .eyebrow { color: var(--night-gold); }

.northern-night .planning-booking,
.northern-night .guide-stay-note,
.northern-night .travel-band,
.northern-night .island {
  background: var(--night-raised);
  color: var(--night-cream);
}

.northern-night .planning-booking,
.northern-night .guide-stay-note { border: 1px solid var(--night-line); }
.northern-night .planning-booking p,
.northern-night .guide-stay-note p,
.northern-night .travel-band p:not(.eyebrow) { color: var(--night-muted); }
.northern-night .island .eyebrow,
.northern-night .island h2 em { color: var(--night-gold); }
.northern-night .island-layout figcaption { color: var(--night-muted); }
.northern-night .travel-nav a[aria-current] { border-color: var(--night-gold); }
.northern-night .breadcrumb { color: var(--night-muted); }
.northern-night .breadcrumb:hover { color: var(--night-gold); }

.northern-night .faq summary { color: var(--night-cream); }
.northern-night .faq summary::after { color: var(--night-gold); }
.northern-night .faq details > div { color: var(--night-muted); }
.northern-night .faq details a { color: var(--night-cream); }
.northern-night .property-photo img,
.northern-night .cottage-gallery-grid img { background: var(--night-panel); }

.northern-night .cottage-grid article {
  background: var(--night-raised);
  border: 1px solid var(--night-line);
  min-width: 0;
  padding-bottom: 28px;
}

.northern-night .cottage-grid article > :not(.image-link) {
  margin-left: 28px;
  margin-right: 28px;
}

.northern-night .cottage-grid .cottages-actions { margin-top: auto; }
.northern-night .cottage-grid .meta { color: var(--night-gold); }
.northern-night .card-top > span { color: var(--night-muted); }
.northern-night .cottage-grid article > p:not(.meta) { color: var(--night-muted); }

/* Keep long guides and comparison tables legible at every reading depth. */
.northern-night .guide-article p,
.northern-night .guide-article li { color: var(--night-muted); }
.northern-night .guide-article strong,
.northern-night .guide-article p a:not(.button),
.northern-night .guide-article li a:not(.button) { color: var(--night-cream); }
.northern-night .guide-article .guide-answer > p:last-child { color: var(--night-cream); }
.northern-night .guide-sidebar nav a:hover { color: var(--night-gold); }
.northern-night .guide-comparison article { border-top-color: var(--night-gold); }
.northern-night .guide-days li { border-left-color: var(--night-line); }

.northern-night .route-table th,
.northern-night .walk-table thead,
.northern-night .cottage-comparison-table thead th {
  background: var(--night-panel);
  color: var(--night-cream);
}

.northern-night .route-table td,
.northern-night .walk-table tbody td,
.northern-night .cottage-comparison-table td {
  background: var(--night-raised);
  color: var(--night-muted);
}

.northern-night .cottage-comparison-table tbody th,
.northern-night .walk-table tbody th {
  background: var(--night-panel);
  color: var(--night-cream);
}

.northern-night .cottage-comparison-table td strong,
.northern-night .comparison-mobile-label { color: var(--night-cream); }
.northern-night .route-table span { color: var(--night-muted); }
.northern-night .table-scroll-hint { color: var(--night-muted); }
.northern-night .walk-table-scroll,
.northern-night .route-table-wrap { scrollbar-color: var(--night-gold) var(--night-raised); }

/* Bird season cells remain distinct from their inactive months. */
.northern-night .bird-calendar-scroll { scrollbar-color: var(--night-gold) var(--night-raised); }
.northern-night .bird-calendar caption,
.northern-night .bird-calendar thead th {
  background: var(--night-panel);
  color: var(--night-cream);
}
.northern-night .bird-calendar th:first-child {
  background: var(--night-raised);
  color: var(--night-cream);
}
.northern-night .bird-calendar td { background: var(--night); color: #9caeb9; }
.northern-night .bird-calendar .bird-month-active { background: #334638; color: #f0dbab; }
.northern-night .bird-card img { background: #f4eddb; }
.northern-night .bird-notes { border-left-color: var(--night-gold); }

/* Route selectors and archaeology tools share the surrounding night palette. */
.northern-night .walk-route-card,
.northern-night .arch-workspace {
  background: var(--night-raised);
  color: var(--night-cream);
  border-color: var(--night-line);
}
.northern-night .walk-detail-body .walk-map-note,
.northern-night .arch-results-count,
.northern-night .local-place,
.northern-night .arch-map-message {
  background: var(--night-panel);
  color: var(--night-muted);
}
.northern-night .walk-detail-body .walk-map-note { border-left-color: #71a9d0; }
.northern-night .arch-detail-article section:target,
.northern-night .arch-references li:target {
  background: var(--night-panel);
  outline-color: var(--night-panel);
}
.northern-night .arch-search input {
  background: var(--night-panel);
  color: var(--night-cream);
  border-color: var(--night-line);
}
.northern-night .arch-search input::placeholder { color: var(--night-muted); opacity: 1; }
.northern-night .arch-filters input,
.northern-night .island-map-layers input { accent-color: var(--night-gold); }
.northern-night .arch-reset,
.northern-night .arch-map-reset,
.northern-night .arch-map-key button,
.northern-night .overview-map-tools button,
.northern-night .walk-route-tools button,
.northern-night .walk-route-choices button {
  background: var(--night-panel);
  color: var(--night-cream);
  border-color: #708293;
}
.northern-night .arch-reset:hover,
.northern-night .arch-map-reset:hover,
.northern-night .arch-map-key button:hover,
.northern-night .overview-map-tools button:hover,
.northern-night .walk-route-tools button:hover,
.northern-night .walk-route-choices button:hover {
  background: #2b4559;
  color: var(--night-cream);
}
.northern-night .walk-route-choices button[aria-pressed=true] {
  background: var(--night-gold);
  border-color: var(--night-gold);
  color: var(--night);
}
.northern-night .walk-route-directions li::marker { color: #85b8dc; }
.northern-night .walk-route-start { background: #1b5883; color: white; }
.northern-night .arch-map-placeholder,
.northern-night .overview-map-fallback,
.northern-night .walk-route-fallback { color: #1b3c45; }

/* Map tiles and their floating controls keep their familiar light treatment. */
.northern-night .osm-map-embed,
.northern-night .walk-route-map,
.northern-night .orkney-overview-map,
.northern-night .leaflet-container {
  --ink: #1b3c45;
  --paper: #fffefb;
  --muted: #53666a;
  --line: #c8d5d3;
  --night-cream: #1b3c45;
  --night-muted: #53666a;
  color: #1b3c45;
  color-scheme: light;
  background: #e8f0f0;
}
.northern-night .leaflet-popup-content-wrapper,
.northern-night .leaflet-popup-tip,
.northern-night .leaflet-tooltip { background: #fffefb; color: #1b3c45; }
.northern-night .leaflet-popup-content,
.northern-night .leaflet-popup-content h3,
.northern-night .leaflet-popup-content p,
.northern-night .leaflet-popup-content strong,
.northern-night .site-map-popup,
.northern-night .site-map-popup .site-map-location-note,
.northern-night .arch-popup h3,
.northern-night .arch-popup p,
.northern-night .overview-popup { color: #1b3c45; }
.northern-night .leaflet-popup-content a,
.northern-night .leaflet-control-attribution a { color: #164e70; }
.northern-night .leaflet-container .leaflet-control-attribution { background: #fffffff2; color: #1b3c45; }
.northern-night .leaflet-control-zoom a { background: #fffefb; color: #1b3c45; }
.northern-night .leaflet-control-zoom a:hover { background: #e9f0ee; color: #1b3c45; }
.northern-night .leaflet-container a.leaflet-popup-close-button { color: #53666a; }
.northern-night .leaflet-tooltip.place-map-label,
.northern-night .overview-map-label { background: #fffefb; color: #1b3c45; }
.northern-night .overview-map-label.rousay { color: #813d28; }
.northern-night .leaflet-container :focus-visible { outline-color: #91482e; }

@media (max-width: 700px) {
  .northern-night .header .brand,
  .northern-night .footer .brand { font-size: 21px; letter-spacing: .12em; }
  .northern-night .header .brand span { font-size: 9px; letter-spacing: .035em; }
  .northern-night .cottage-grid article { padding-bottom: 23px; }
  .northern-night .cottage-grid article > :not(.image-link) { margin-left: 22px; margin-right: 22px; }
}

@media (max-width: 360px) {
  .northern-night .header .brand { font-size: 18px; letter-spacing: .08em; }
}