/* Petnjica.me — digital atlas. Mobile-first; desktop rules at the end. */

:root {
  --bg: #090a0a;
  --surface: #151716;
  --surface-2: #1b1e1b;
  --ink: #eeede7;
  --muted: #787c77;
  --line: #30342f;
  --lime: #c8ff36;
  --lime-ink: #4b6414;
  --display: "Space Grotesk", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --gutter: clamp(1.1rem, 3.2vw, 3.5rem);
}

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

html { background: var(--bg); color: var(--ink); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--bg); font-family: var(--display); line-height: 1.35; -webkit-font-smoothing: antialiased; }

.site-grid {
  position: fixed; inset: 0; pointer-events: none; opacity: .38;
  background-image:
    linear-gradient(90deg, transparent calc(100% - 1px), var(--line) 100%),
    linear-gradient(0deg, transparent calc(100% - 1px), var(--line) 100%);
  background-size: 25% 100%, 100% 25%;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
}

.shell { position: relative; max-width: 1440px; margin: auto; padding: 0 var(--gutter); }

/* Small mono labels share one voice */
.label, .sub, .weather-title, .footer nav a, .footer-credits, .topbar {
  font: 500 .66rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase;
}
.slash { color: var(--line); margin: 0 .4rem; }

/* --- Topbar: P/ME is defined here, once ---------------------------------- */
.topbar {
  min-height: 3.2rem; border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: var(--muted);
}
.topbar p { margin: 0; display: flex; align-items: baseline; gap: .8rem; }
.site-mark { color: var(--ink); font: 600 1rem/1 var(--display); letter-spacing: -.04em; text-decoration: none; }
.site-mark span { color: var(--lime); padding: 0 .1em; }
.site-domain { color: var(--ink); }
.topbar-status { color: var(--lime); }

/* --- Hero: name + coordinates, then the globe ----------------------------- */
.hero { border-bottom: 1px solid var(--line); }
.hero-copy { padding: 1.1rem 0 1.2rem; }
.hero h1 {
  font-size: clamp(3.6rem, 18.5vw, 7rem); line-height: .88; letter-spacing: -.03em;
  margin: 0 0 .6rem -.03em; font-weight: 600; max-width: 9ch;
}
.hero-meta { display: flex; justify-content: space-between; align-items: end; gap: 1.5rem; font: 500 .7rem/1.45 var(--mono); letter-spacing: .1em; }
.hero-meta p { margin: 0; color: var(--muted); }
.hero-meta strong { color: var(--ink); font-weight: 500; }
.hero-meta p:first-child span { color: var(--line); margin: 0 .35rem; }
.coordinates { text-align: right; color: var(--lime) !important; white-space: nowrap; }
.globe-figure { margin: 0; padding: 1rem 0 .8rem; border-top: 1px solid var(--line); display: flex; justify-content: center; background: radial-gradient(circle at 50% 50%, #151a14 0%, transparent 58%); }
.globe { width: 100%; max-width: 24rem; height: auto; overflow: visible; }

/* --- Atlas: Europe | Montenegro, then Petnjica full width ---------------- */
.atlas { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.atlas-block { padding: 1rem; background: var(--surface); display: flex; flex-direction: column; gap: .7rem; }
.atlas-block.europe { border-right: 1px solid var(--line); }
.atlas-block.petnjica { grid-column: 1 / -1; border-top: 1px solid var(--line); background: var(--lime); color: var(--bg); padding: 1.1rem 1rem 1rem; }
.atlas-map { display: flex; align-items: center; justify-content: center; height: 7.5rem; }
.atlas-block.petnjica .atlas-map { height: auto; }
.atlas-block h2 { font-size: 1.25rem; line-height: 1; margin: 0; letter-spacing: -.03em; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.atlas-block h2 small { font: 400 .62rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--lime-ink); white-space: nowrap; }
.atlas-block.petnjica h2 { font-size: 1.5rem; }

/* Map layers (geometry is generated by scripts/build-maps.mjs) */
.stage-map { width: 100%; height: 100%; overflow: visible; }
.sphere { fill: #0f120f; stroke: var(--line); stroke-width: 1; }
.graticule { fill: none; stroke: #4b514a; stroke-width: .7; opacity: .75; }
.land { fill: #252b24; stroke: #737c70; stroke-width: 1; stroke-linejoin: round; }
.globe .land { stroke-width: 1.1; }
.stage-map .land { stroke-width: .8; }
.focus { fill: var(--lime); stroke: none; }
.point { fill: var(--lime); }
.point-ring { fill: none; stroke: var(--lime); stroke-width: 1; opacity: .7; transform-box: fill-box; transform-origin: center; animation: pulse 2.8s ease-out infinite; }
.globe-label { fill: var(--lime); font: 500 9px var(--mono); letter-spacing: .08em; }
.municipality { fill: #addf2a; stroke: var(--bg); stroke-width: 1.2; stroke-linejoin: round; }
.neighbour { fill: none; stroke: #6b8a1a; stroke-width: .6; }
.border { fill: none; stroke: #3f5a0c; stroke-width: 1; stroke-dasharray: 3 2; }
.map-label { fill: var(--lime-ink); font: 500 7px var(--mono); letter-spacing: .06em; text-transform: uppercase; paint-order: stroke; stroke: var(--lime); stroke-width: 2.5px; stroke-linejoin: round; }
.map-label.focus-label { fill: var(--bg); }
.petnjica .point { fill: var(--bg); }
.petnjica .point-ring { stroke: var(--bg); }

/* --- Weather: one compact live block ------------------------------------- */
.weather {
  display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1rem;
  padding: 1rem; margin-top: 1rem; background: var(--surface); border: 1px solid var(--line);
}
.weather-title { grid-column: 1 / -1; margin: 0; color: var(--muted); display: flex; align-items: center; gap: .7rem; }
.weather-title::before { content: ""; width: 2rem; height: 1px; background: var(--lime); }
.now, .clock { display: flex; flex-direction: column; min-width: 0; }
.weather strong { font-size: clamp(2rem, 9vw, 3.2rem); line-height: 1; letter-spacing: -.04em; font-weight: 500; }
.now strong { color: var(--lime); }
.condition { font-size: .5em; letter-spacing: 0; color: var(--ink); vertical-align: .18em; }
.sub { color: var(--muted); margin-top: .35rem; }
.forecast {
  grid-column: 1 / -1; list-style: none; margin: 0; padding: .8rem 0 0; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem;
}
.forecast li { display: flex; flex-direction: column; gap: .2rem; }
.forecast .day { font: 500 .62rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.forecast .range { font: 500 .95rem var(--mono); letter-spacing: -.02em; }
.forecast .range span { color: var(--muted); }

/* --- Footer --------------------------------------------------------------- */
.footer { display: grid; grid-template-columns: 1fr; align-items: center; gap: .9rem 1rem; padding: 1.4rem 0 1.3rem; }
.footer-signature { font-size: 1.05rem; letter-spacing: -.03em; margin: 0; display: flex; align-items: baseline; gap: .8rem; }
.footer-signature .site-domain { font: 500 .66rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.footer nav { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .7rem 1.1rem; }
.footer nav a { color: var(--muted); text-decoration: none; transition: color .2s ease; }
.footer nav a span { color: var(--lime); margin-left: .2rem; }
.footer nav a:hover, .footer nav a:focus-visible { color: var(--ink); }
.footer-credits { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .56rem; letter-spacing: .06em; opacity: .75; }

@keyframes pulse { 0% { opacity: .9; transform: scale(.7); } 70%, 100% { opacity: 0; transform: scale(2.1); } }

/* --- Desktop -------------------------------------------------------------- */
@media (min-width: 701px) {
  .topbar { min-height: 3.6rem; }
  .tz-name { display: inline; }
  .hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(22rem, .95fr); min-height: clamp(22rem, 46vh, 32rem); }
  .hero-copy { padding: clamp(1.6rem, 3vw, 2.6rem) 0 1.8rem; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid var(--line); }
  .hero h1 { font-size: clamp(4rem, 10.6vw, 10.5rem); margin-bottom: 0; }
  .hero-meta { margin-right: clamp(1rem, 4vw, 4rem); font-size: .72rem; }
  .globe-figure { border-top: 0; padding: 1.2rem clamp(1rem, 4vw, 4rem) 1rem; align-items: center; }
  .globe { max-width: none; }
  .atlas { grid-template-columns: 1fr 1fr 2fr; }
  .atlas-block { padding: 1.2rem 1.4rem; gap: 1rem; }
  .atlas-block.montenegro { border-right: 1px solid var(--line); }
  .atlas-block.petnjica { grid-column: auto; border-top: 0; padding: 1.2rem 1.4rem; }
  .atlas-map { height: 11rem; }
  .atlas-block.petnjica .atlas-map { height: 11rem; }
  .atlas-block h2 { font-size: clamp(1.3rem, 2vw, 2rem); margin-top: auto; }
  .atlas-block.petnjica h2 { font-size: clamp(1.5rem, 2.2vw, 2.2rem); }
  .weather { grid-template-columns: 1.2fr 1.2fr 2fr; align-items: end; padding: 1.2rem 1.5rem; margin-top: 1.5rem; }
  .weather strong { font-size: clamp(2.6rem, 4vw, 3.8rem); }
  .forecast { grid-column: auto; border-top: 0; border-left: 1px solid var(--line); padding: 0 0 .2rem 1.5rem; }
  .footer { grid-template-columns: 1fr auto; padding: 1.4rem 0 1.2rem; }
  .footer nav { grid-column: auto; justify-content: flex-end; gap: 1rem 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .point-ring { animation: none; }
  .footer nav a { transition: none; }
}