/* ===========================================================================
   Central Coast GIS map files

   Design brief: a reference publication, not a SaaS landing page.
   Reference points are the USGS 7.5-minute quadrangle sheet and a well set
   print atlas: paper ground, ink text, hairline rules, a single muted water
   blue, and numbers set in tabular monospace so columns align.

   Deliberately avoided: Inter and system-ui as display faces, indigo and
   violet accents, rounded cards with soft shadows, gradient headings,
   centred hero blocks, emoji.
   ========================================================================= */

:root {
  --paper:      #f6f3ec;
  --paper-sunk: #efebe1;
  --paper-card: #fbf9f5;
  --ink:        #17191b;
  --ink-soft:   #55524b;
  --ink-faint:  #85806f;
  --rule:       #ddd6c6;
  --rule-hard:  #c3baa5;
  --water:      #2b6584;
  --water-deep: #1c4459;
  --water-pale: #cfe0e9;
  --flag:       #8a4b2a;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           Georgia, "Times New Roman", serif;
  --mono:  ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo,
           Consolas, monospace;

  --measure: 34rem;
  --page: 68rem;
}


:root[data-theme="dark"] {
  --paper:      #14161a;
  --paper-sunk: #101216;
  --paper-card: #1a1d22;
  --ink:        #ece7dc;
  --ink-soft:   #a8a294;
  --ink-faint:  #7d7768;
  --rule:       #2c3038;
  --rule-hard:  #414651;
  --water:      #7db4d4;
  --water-deep: #a9cfe4;
  --water-pale: #24343f;
  --flag:       #c9825c;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.58;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

/* --- structure ---------------------------------------------------------- */

.wrap {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 1.75rem;
}

.masthead {
  border-bottom: 1px solid var(--rule-hard);
  background: var(--paper);
}

.masthead .wrap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: 1.15rem;
  padding-bottom: 1.15rem;
  flex-wrap: wrap;
}

.wordmark {
  font-size: 1.05rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.wordmark span { color: var(--water); }

.navlinks {
  display: flex;
  gap: 1.5rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.navlinks a {
  color: var(--ink-soft);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}

.navlinks a:hover,
.navlinks a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--water);
}

main { padding: 3rem 0 5rem; }

footer {
  border-top: 1px solid var(--rule);
  padding: 2rem 0 3rem;
  color: var(--ink-faint);
  font-size: 0.86rem;
}

footer .wrap { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
footer a { color: var(--ink-soft); }

/* --- type --------------------------------------------------------------- */

h1, h2, h3 { font-weight: 600; line-height: 1.18; margin: 0 0 0.5rem; }
h1 { font-size: clamp(2rem, 4.2vw, 2.9rem); letter-spacing: -0.012em; }
h2 { font-size: 1.42rem; margin-top: 2.75rem; }
h3 { font-size: 1.08rem; margin-top: 1.75rem; }

p { margin: 0 0 1.05rem; max-width: var(--measure); }

a { color: var(--water); text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
a:hover { color: var(--water-deep); }

.lede {
  font-size: 1.16rem;
  color: var(--ink-soft);
  max-width: var(--measure);
}

/* Cartographic micro-label. Used above sections and beside data. */
.label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: block;
  margin-bottom: 0.5rem;
}

.rule { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }

.breadcrumb {
  font-family: var(--mono);
  font-size: 0.73rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 1.1rem;
}
.breadcrumb a { color: var(--ink-faint); text-decoration: none; }
.breadcrumb a:hover { color: var(--water); }
.breadcrumb .sep { padding: 0 0.45rem; color: var(--rule-hard); }

/* --- the map plate ------------------------------------------------------ */

.plate {
  background: var(--paper-card);
  border: 1px solid var(--rule);
  padding: 1.5rem;
}

.plate svg { display: block; width: 100%; height: auto; }
.plate svg .shore { fill: var(--water-pale); stroke: var(--water-deep); stroke-width: 1.1; }
.plate svg .isle  { fill: var(--paper-card); stroke: var(--water-deep); stroke-width: 0.8; }
.plate svg .bound { fill: none; stroke: var(--flag); stroke-width: 1.3; }
.plate svg .bound-fill { fill: var(--flag); fill-opacity: 0.07; stroke: none; }

.plate-note {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  margin-top: 0.9rem;
  text-align: right;
}

/* --- record layout ------------------------------------------------------ */

.record {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}

@media (max-width: 46rem) {
  .record { grid-template-columns: 1fr; gap: 2rem; }
}

/* Data table. Monospace numerals so the column reads as a column. */
.facts { width: 100%; border-collapse: collapse; margin: 0.25rem 0 1.5rem; }

.facts th,
.facts td {
  text-align: left;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: baseline;
}

.facts th {
  font-family: var(--mono);
  font-size: 0.71rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 400;
  width: 42%;
  padding-right: 1rem;
}

.facts td {
  font-family: var(--mono);
  font-size: 0.87rem;
  font-variant-numeric: tabular-nums;
}

.facts tr:last-child th,
.facts tr:last-child td { border-bottom: 0; }

/* --- purchase block ----------------------------------------------------- */

.buy {
  border: 1px solid var(--rule-hard);
  background: var(--paper-card);
  padding: 1.4rem 1.5rem;
  margin: 1.75rem 0;
}

.buy .price {
  font-family: var(--mono);
  font-size: 1.55rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.buy .price .cur { font-size: 0.95rem; color: var(--ink-faint); padding-right: 0.15rem; }

.btn {
  display: inline-block;
  background: var(--water-deep);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 0.78rem 1.6rem;
  text-decoration: none;
  border: 1px solid var(--water-deep);
  margin-top: 0.9rem;
}

.btn:hover { background: transparent; color: var(--water-deep); }

:root[data-theme="dark"] .btn,
[data-theme="dark"] .btn { color: #12141a; }


.manifest {
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
}

.manifest li { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dotted var(--rule); padding: 0.2rem 0; }
.manifest .fmt { color: var(--ink); }

/* --- listings ----------------------------------------------------------- */

.filterbar {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin: 1.5rem 0 0.5rem;
  flex-wrap: wrap;
}

.filterbar input {
  flex: 1 1 18rem;
  font-family: var(--mono);
  font-size: 0.86rem;
  padding: 0.6rem 0.75rem;
  background: var(--paper-card);
  border: 1px solid var(--rule-hard);
  color: var(--ink);
}

.filterbar input:focus { outline: 2px solid var(--water); outline-offset: -1px; }

.count {
  font-family: var(--mono);
  font-size: 0.73rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.index-table { width: 100%; border-collapse: collapse; margin-top: 1rem; }

.index-table th {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 400;
  text-align: left;
  padding: 0.4rem 0.75rem 0.4rem 0;
  border-bottom: 1px solid var(--rule-hard);
}

.index-table td {
  padding: 0.42rem 0.75rem 0.42rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.95rem;
}

.index-table td.num {
  font-family: var(--mono);
  font-size: 0.83rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--ink-soft);
  white-space: nowrap;
}

.index-table tr:hover td { background: var(--paper-sunk); }
.index-table a { text-decoration: none; }
.index-table a:hover { text-decoration: underline; }

/* --- region grid -------------------------------------------------------- */

.regions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 1.25rem;
}

.regions a {
  background: var(--paper);
  padding: 1rem 1.1rem;
  text-decoration: none;
  color: var(--ink);
  display: block;
}

.regions a:hover { background: var(--paper-sunk); }
.regions .rname { display: block; font-size: 1.02rem; }

.regions .rmeta {
  display: block;
  font-family: var(--mono);
  font-size: 0.71rem;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
  margin-top: 0.2rem;
}

/* --- misc --------------------------------------------------------------- */

.tags { margin: 0.9rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; }

.tags li a {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  padding: 0.22rem 0.55rem;
  border: 1px solid var(--rule-hard);
  color: var(--ink-soft);
  text-decoration: none;
}

.tags li a:hover { border-color: var(--water); color: var(--water); }

.prose { max-width: var(--measure); }
.prose p { color: var(--ink-soft); }

.source-note {
  font-size: 0.84rem;
  color: var(--ink-faint);
  max-width: var(--measure);
  border-left: 2px solid var(--rule-hard);
  padding-left: 1rem;
  margin-top: 2rem;
}

.empty { color: var(--ink-faint); font-style: italic; }

/* --- map explorer ------------------------------------------------------- */

.mapframe {
  height: calc(100vh - 21rem);
  min-height: 30rem;
  border: 1px solid var(--rule-hard);
  background: var(--paper-sunk);
}

.maplibregl-popup-content {
  background: var(--paper-card);
  color: var(--ink);
  font-family: var(--serif);
  border: 1px solid var(--rule-hard);
  border-radius: 0;
  box-shadow: none;
  padding: 0.85rem 1rem 0.9rem;
  min-width: 11rem;
}

.maplibregl-popup-tip { display: none; }

.maplibregl-popup-close-button {
  color: var(--ink-faint);
  font-size: 1.05rem;
  right: 4px;
  top: 2px;
}

.pop-kicker {
  display: block;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.25rem;
}

.pop-name { display: block; font-size: 1.02rem; line-height: 1.25; }

.pop-meta {
  display: block;
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--ink-soft);
  margin: 0.2rem 0 0.55rem;
}

.pop-link {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--water);
}

/* Full-bleed map: spans the viewport while living inside .wrap */
body { overflow-x: clip; }

.mapfull {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  border-left: 0;
  border-right: 0;
}

/* Quiet pre-launch state for the buy button. Overrides the dark-mode
   .btn colour rules, so each selector is restated at their specificity. */
.btn-soon,
.btn-soon:hover,
:root[data-theme="dark"] .btn-soon,
:root[data-theme="dark"] .btn-soon:hover {
  background: transparent;
  color: var(--ink-faint);
  border-color: var(--rule-hard);
  cursor: default;
}