/* Only in Africa — hand-written design system.
   Cool bushveld sky over warm earth. Fraunces / Newsreader / Space Mono. */

/* ── Fonts (self-hosted) ── */
@font-face{font-family:'Fraunces';src:url(../fonts/fraunces-var.woff2) format('woff2');font-weight:340 640;font-style:normal;font-display:swap;}
@font-face{font-family:'Newsreader';src:url(../fonts/newsreader-var.woff2) format('woff2');font-weight:380 600;font-style:normal;font-display:swap;}
@font-face{font-family:'Newsreader';src:url(../fonts/newsreader-italic-var.woff2) format('woff2');font-weight:380 520;font-style:italic;font-display:swap;}
@font-face{font-family:'Space Mono';src:url(../fonts/spacemono-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Space Mono';src:url(../fonts/spacemono-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap;}

/* ── Tokens ── */
:root{
  --ink:#241F1B; --ink-deep:#1A1512;
  --canvas:#E7DECC; --canvas-2:#DED2BB; --paper:#F1EADB;
  --ochre:#A2472A; --ochre-dk:#8A3B22;
  --dusk:#3E5560; --dusk-dk:#2E434D;
  --veld:#5C6A4A;
  --brass:#B0863B;
  --line:rgba(36,31,27,.16);
  --measure:1160px;   /* body text spans the full content width, matching the gallery */
  --fs-body:clamp(1.02rem,.96rem + .35vw,1.18rem);
  --gap:clamp(1.5rem,1rem + 3vw,3rem);
}

/* ── Reset-ish ── */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--canvas);color:var(--ink);
  font-family:'Newsreader',Georgia,serif;font-size:var(--fs-body);line-height:1.65;
  font-optical-sizing:auto;text-rendering:optimizeLegibility;}
img{max-width:100%;height:auto;display:block;}
a{color:var(--dusk-dk);text-underline-offset:.15em;text-decoration-thickness:.06em;}
a:hover{color:var(--ochre);}
h1,h2,h3,h4{font-family:'Fraunces',Georgia,serif;font-weight:560;line-height:1.08;
  font-variation-settings:'SOFT' 30,'WONK' 1;letter-spacing:-.01em;margin:0 0 .5em;}
h1{font-size:clamp(2.3rem,1.6rem + 3.4vw,4.4rem);}
h2{font-size:clamp(1.7rem,1.3rem + 1.8vw,2.6rem);}
h3{font-size:clamp(1.3rem,1.1rem + 1vw,1.7rem);}
p{margin:0 0 1em;}

/* ── Signature: coordinate stamp + transect rule ── */
.stamp{font-family:'Space Mono',ui-monospace,monospace;font-size:.72rem;font-weight:400;
  letter-spacing:.09em;text-transform:uppercase;color:var(--dusk);}
.transect{height:9px;border:0;margin:0;padding:0;opacity:.85;
  background-image:
    repeating-linear-gradient(90deg,var(--brass) 0 1px,transparent 1px 13px),
    linear-gradient(var(--brass),var(--brass));
  background-size:100% 7px,100% 1px;
  background-position:left top,left top;
  background-repeat:repeat-x,no-repeat;}

/* ── Layout ── */
.wrap{width:min(100% - 2.4rem,1160px);margin-inline:auto;}
.reading{width:min(100% - 2.4rem,var(--measure));margin-inline:auto;}
.section{padding-block:var(--gap);}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1.2rem;}
.section-head h2{margin:0;}
/* Header with an inline transect rule filling the row (hero→map transition + section rule). */
.section-head--rule{align-items:center;margin-bottom:1.3rem;}
.section-head--rule h2{white-space:nowrap;}
.section-head--rule .transect{flex:1;min-width:2rem;}
.section-head--rule .stamp{white-space:nowrap;}
.section--tight{padding-bottom:1.3rem;}
.empty-note{color:var(--veld);margin:.4rem 0 0;}
.eyebrow{font-family:'Space Mono',monospace;text-transform:uppercase;letter-spacing:.16em;
  font-size:.72rem;color:var(--veld);}

/* ── Top bar ── */
.topbar{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--canvas) 88%,transparent);
  backdrop-filter:saturate(1.2) blur(6px);border-bottom:1px solid var(--line);}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;padding-block:.7rem;}
.wordmark{font-family:'Fraunces',serif;font-weight:600;font-size:1.18rem;letter-spacing:.02em;
  text-transform:uppercase;color:var(--ink);text-decoration:none;font-variation-settings:'SOFT' 40,'WONK' 1;}
.nav{display:flex;gap:1.4rem;align-items:center;}
.nav a{font-family:'Space Mono',monospace;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink);text-decoration:none;}
.nav a:hover{color:var(--ochre);}

/* ── Hero ── */
.hero{position:relative;min-height:clamp(460px,78vh,760px);display:flex;align-items:flex-end;
  overflow:hidden;background:var(--ink-deep);}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--hero-focus,50% 45%);}
.hero__scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(26,21,18,.15) 0%,rgba(26,21,18,0) 30%,rgba(26,21,18,.72) 100%),
             linear-gradient(90deg,rgba(26,21,18,.55) 0%,rgba(26,21,18,0) 55%);}
/* top padding clears the ~45px sticky header so the headline is never cut off */
.hero__inner{position:relative;padding:clamp(4rem,9vh,6rem) 0 clamp(2rem,5vw,3.5rem);color:var(--paper);}
.hero__inner .wrap{max-width:1160px;}
.hero .stamp{color:var(--brass);margin-bottom:.9rem;display:block;}
.hero h1{color:var(--paper);max-width:15ch;margin-bottom:.4rem;}
.hero__tag{font-size:clamp(1.05rem,1rem + .5vw,1.35rem);color:rgba(241,234,219,.9);max-width:34ch;margin-bottom:1.4rem;}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:.6em;cursor:pointer;
  font-family:'Space Mono',monospace;font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;
  background:var(--ochre);color:#F7F1E4;padding:.9em 1.5em;border:1px solid transparent;border-radius:2px;
  text-decoration:none;transition:background .15s ease,transform .15s ease;}
.btn:hover{background:var(--ochre-dk);color:#F7F1E4;transform:translateY(-1px);}
.btn--ghost{background:transparent;border-color:var(--brass);color:var(--ink);}
.btn--ghost:hover{background:var(--brass);color:var(--ink-deep);}

/* ── Map (contained in .wrap, per PLAN §1.5) ── */
.map-frame{position:relative;}
#map{height:420px;border:1px solid var(--dusk);background:var(--canvas-2);}
@media (max-width:640px){#map{height:320px;}}

/* ── Front page: hero (2/3) + southern-Africa map teaser (1/3), side by side ── */
.hero-row{display:grid;grid-template-columns:2fr 1fr;min-height:clamp(320px,50vh,500px);}
.hero-row .hero{min-height:0;}
.hero-map{position:relative;background:var(--canvas-2);border-left:1px solid var(--dusk);overflow:hidden;}
.hero-map #map{position:absolute;inset:0;height:auto;border:0;}
.hero-map__cta{position:absolute;right:.7rem;bottom:.7rem;z-index:1001;background:var(--dusk);color:var(--paper);
  padding:.35em .7em;text-decoration:none;}
.hero-map__cta:hover{background:var(--dusk-dk);color:var(--paper);}
@media (max-width:820px){
  .hero-row{grid-template-columns:1fr;}
  .hero-map{height:260px;border-left:0;border-top:1px solid var(--dusk);}
}
.leaflet-container{background:var(--canvas-2);font-family:'Space Mono',monospace;}
/* De-default the tiles: settle them into the canvas palette. */
.leaflet-tile-pane{filter:sepia(.22) saturate(.8);}
/* Ochre marker dots with a canvas ring. */
.oia-pin span{display:block;width:13px;height:13px;border-radius:50%;
  background:var(--ochre);border:3px solid var(--canvas);box-shadow:0 0 0 1px var(--dusk);}
/* Popups in the token palette. */
.leaflet-popup-content-wrapper{background:var(--canvas);color:var(--ink);
  border:1px solid var(--brass);border-radius:2px;box-shadow:0 8px 26px rgba(26,21,18,.28);}
.leaflet-popup-tip{background:var(--canvas);border-right:1px solid var(--brass);border-bottom:1px solid var(--brass);}
.leaflet-popup-content{font-family:'Newsreader',serif;margin:.7rem .95rem;line-height:1.4;}
.leaflet-popup-content b{font-family:'Fraunces',serif;font-weight:560;font-size:1.05rem;}
.leaflet-popup-content .pop-stamp{display:block;font-family:'Space Mono',monospace;font-size:.66rem;
  text-transform:uppercase;letter-spacing:.06em;color:var(--veld);margin:.2rem 0;}
.leaflet-popup-content a{font-family:'Space Mono',monospace;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.05em;}
.leaflet-container a.leaflet-popup-close-button{color:var(--ink);}

/* ── Field-notes list ── */
.notes{display:flex;flex-direction:column;gap:0;}
.note{display:grid;grid-template-columns:180px 1fr;gap:1.4rem;padding-block:1.6rem;border-top:1px solid var(--line);}
.note:last-child{border-bottom:1px solid var(--line);}
.note__thumb{aspect-ratio:4/3;object-fit:cover;width:100%;border-radius:2px;background:var(--canvas-2);}
.note__meta{margin:.1rem 0 .5rem;}
.note h3{margin:.1rem 0 .4rem;}
.note h3 a{color:var(--ink);text-decoration:none;}
.note h3 a:hover{color:var(--ochre);}
.note__dek{color:#4a4038;margin:0;}

/* ── Day-card grid (trip landing): 1-col phone / 2-col ≥560 / 3-col ≥900 ── */
.notes--grid{display:grid;grid-template-columns:1fr;gap:1.4rem;}
.notes--grid .note{display:block;padding-block:0;border:0;}
.notes--grid .note:last-child{border:0;}
.notes--grid .note__thumb{aspect-ratio:3/2;margin-bottom:.7rem;}
@media (min-width:560px){.notes--grid{grid-template-columns:repeat(2,1fr);}}
@media (min-width:900px){.notes--grid{grid-template-columns:repeat(3,1fr);}}

/* ── Single post ── */
/* Hero shows the WHOLE image (contain) — never cropped or distorted. The leftover
   space is filled with a blurred, zoomed copy of the same image (::before) instead of
   dark bars, so it still reads as a banner at any aspect ratio. Pages set --hero-bg. */
.post-hero{position:relative;min-height:clamp(300px,48vh,520px);display:flex;align-items:flex-end;background:var(--ink-deep);overflow:hidden;isolation:isolate;}
.post-hero::before{content:"";position:absolute;inset:0;z-index:0;background:var(--hero-bg,none) center/cover no-repeat;filter:blur(26px) brightness(.72);transform:scale(1.15);}
.post-hero__img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:contain;}
.post-hero__scrim{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(26,21,18,.05),rgba(26,21,18,.55));}
.post-hero__inner{position:relative;z-index:3;color:var(--paper);padding-block:2rem clamp(1.6rem,4vw,2.6rem);}
.post-hero__inner h1{color:var(--paper);max-width:20ch;}
.post-hero .stamp{color:var(--brass);display:block;margin-bottom:.8rem;}
.post-body{padding-block:var(--gap);}
.post-body p:first-of-type::first-letter{font-family:'Fraunces',serif;font-weight:600;
  float:left;font-size:3.4em;line-height:.78;padding:.05em .12em 0 0;color:var(--ochre);}
.post-body h2,.post-body h3{margin-top:1.6em;}
.post-body blockquote{margin:1.6em 0;padding-left:1.2em;border-left:3px solid var(--brass);
  font-style:italic;color:var(--dusk-dk);}
.post-body img{margin:1.4em 0;border-radius:2px;}
.post-body figure{margin:1.6em 0;}
.post-body video{display:block;max-width:100%;height:auto;margin:1.4em auto;background:#000;border-radius:2px;}
.post-body figcaption{font-family:'Space Mono',monospace;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--veld);margin-top:.5em;}

/* ── Gallery (public) ── */
/* Gallery breaks out of the narrow reading column to the wider content width and
   fits as many images per row as fit — so galleries aren't cramped to 3 columns. */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.7rem;margin:1.8em 0;
  width:min(100vw - 2.4rem,1160px);position:relative;left:50%;transform:translateX(-50%);}
@media (max-width:640px){.gallery{grid-template-columns:repeat(2,1fr);gap:.5rem;}}
.gallery__item{display:block;border:1px solid var(--brass);border-radius:2px;overflow:hidden;background:var(--canvas-2);}
.gallery__item img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .25s ease;}
.gallery__item:hover img,.gallery__item:focus-visible img{transform:scale(1.05);}

/* ── Lightbox ── */
.lightbox{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;
  background:rgba(26,21,18,.95);}
.lightbox.open{display:flex;}
.lightbox:not(.no-fade).open{animation:lbfade .2s ease;}
@keyframes lbfade{from{opacity:0}to{opacity:1}}
.lb-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:.8rem;max-width:92vw;}
.lb-img{max-width:92vw;max-height:88vh;width:auto;height:auto;object-fit:contain;}
.lb-cap{color:var(--canvas);text-align:center;max-width:60ch;}
.lb-close,.lb-prev,.lb-next{position:absolute;background:transparent;border:0;color:var(--canvas);
  font-size:2.2rem;line-height:1;cursor:pointer;padding:.3em .55em;opacity:.85;}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{opacity:1;color:var(--brass);}
.lb-close{top:.6rem;right:1rem;}
.lb-prev{left:.3rem;top:50%;transform:translateY(-50%);}
.lb-next{right:.3rem;top:50%;transform:translateY(-50%);}

/* ── Gallery manager (admin) ── */
.gallery-admin{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem;margin:.4rem 0 .4rem;}
.gimg{border:1px solid var(--line);border-radius:2px;padding:.5rem;background:var(--canvas);}
.gimg img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px;margin-bottom:.4rem;}
.gimg input[type=text]{width:100%;font-size:.85rem;padding:.4em .5em;}
.gimg-actions{display:flex;align-items:center;gap:.4rem;margin-top:.45rem;font-size:.72rem;}
.gimg-actions button{cursor:pointer;border:1px solid var(--line);background:var(--paper);border-radius:2px;
  padding:.05em .55em;font-size:.9rem;line-height:1.3;}
.gimg-actions label{margin-left:auto;color:var(--ochre-dk);}

/* ── Sighting card ── */
.sighting{display:flex;gap:1rem;align-items:center;margin:1.8em 0;padding:1rem 1.2rem;
  background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--veld);border-radius:2px;}
.sighting img{width:76px;height:76px;object-fit:cover;border-radius:2px;flex:none;}
.sighting__name{font-family:'Fraunces',serif;font-size:1.15rem;font-weight:560;}
.sighting__sci{font-style:italic;color:#5a5048;font-size:.95rem;}

/* ── Footer ── */
.site-foot{background:var(--dusk-dk);color:#d7dee2;margin-top:0;}
.site-foot .wrap{padding-block:2rem;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;}
.site-foot a{color:#eaddc5;}
.site-foot .stamp{color:#9fb0b8;}

/* ── Front-page Blog timeline (interactive transect) ── */
/* The tooltip lives OUTSIDE .timeline (which is overflow-clipped for scrolling) so it
   never gets cut off; its x is set by timeline.js from the hovered tick. */
.timeline-wrap{position:relative;flex:1 1 auto;min-width:0;}
.timeline{display:flex;align-items:flex-start;gap:7px;overflow-x:auto;
  border-top:1px solid var(--line);scrollbar-width:none;}
.timeline::-webkit-scrollbar{height:0;}
.timeline__tick{flex:0 0 auto;width:2px;height:12px;margin-top:-1px;
  background:var(--brass);opacity:.6;transition:height .15s,opacity .15s,background .15s;}
.timeline__tick:hover,.timeline__tick:focus-visible{opacity:1;height:22px;background:var(--ochre);outline:none;}
.timeline-tip{position:absolute;top:100%;transform:translateX(-50%);margin-top:8px;
  white-space:nowrap;background:var(--dusk);color:var(--paper);font-family:'Space Mono',monospace;
  font-size:.66rem;letter-spacing:.04em;padding:.35em .6em;z-index:20;pointer-events:none;}
.timeline-tip[hidden]{display:none;}

/* ── Wildlife landing hero (rotating slides) ── */
.wl-hero .wl-slide{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity 1.2s ease;}
.wl-hero .wl-slide.is-active{opacity:1;}
.wl-hero .wl-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

/* ── Post locator map (whole map links to /map) ── */
.post-map{position:relative;border:1px solid var(--dusk);margin-top:1rem;}
#post-map{height:240px;background:var(--canvas-2);}
.post-map__link{position:absolute;inset:0;z-index:1000;display:block;}
.post-map__cta{position:absolute;right:.6rem;bottom:.6rem;z-index:1001;background:var(--dusk);
  color:var(--paper);padding:.3em .7em;pointer-events:none;}

/* ── Wildlife place species list ── */
.wl-place-species{list-style:none;padding:0;margin:.6rem 0 0;column-width:16rem;column-gap:2rem;}
.wl-place-species li{margin:.25rem 0;break-inside:avoid;}
.wl-place-species em{font-size:.85em;}

/* ── Wildlife quick-facts panel ── */
.wl-facts{margin:1.4rem 0;border-top:1px solid var(--line);}
.wl-facts>div{display:flex;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--line);}
.wl-facts dt{flex:0 0 34%;margin:0;}
.wl-facts dd{margin:0;}

/* ── Forms / admin ── */
.field{margin-bottom:1.1rem;}
.field label{display:block;font-family:'Space Mono',monospace;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.08em;color:var(--dusk-dk);margin-bottom:.35rem;}
.field input[type=text],.field input[type=email],.field input[type=password],.field input[type=url],
.field input[type=number],.field textarea,.field select{width:100%;padding:.7em .8em;font:inherit;
  background:var(--paper);border:1px solid var(--line);border-radius:2px;color:var(--ink);}
.field textarea{min-height:16rem;line-height:1.6;font-family:ui-monospace,'Space Mono',monospace;font-size:.92rem;}
.field--row{display:flex;gap:1rem;flex-wrap:wrap;}
.field--row>*{flex:1 1 12rem;}
.admin-wrap{width:min(100% - 2.4rem,880px);margin:2rem auto;}
.card{background:var(--paper);border:1px solid var(--line);border-radius:3px;padding:1.5rem;margin-bottom:1.5rem;}
.flash{padding:.8rem 1rem;border-radius:2px;margin-bottom:1rem;font-size:.95rem;}
.flash.success{background:#e6ead9;border:1px solid var(--veld);}
.flash.error{background:#f3ddd4;border:1px solid var(--ochre);}
.muted{color:#6a6058;}
.row-actions{display:flex;gap:.8rem;align-items:center;}
table.list{width:100%;border-collapse:collapse;}
table.list th,table.list td{text-align:left;padding:.6rem .5rem;border-bottom:1px solid var(--line);}
table.list th{font-family:'Space Mono',monospace;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--dusk-dk);}
.pill{font-family:'Space Mono',monospace;font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;
  padding:.2em .6em;border-radius:99px;border:1px solid var(--line);}
.pill--published{background:#e6ead9;color:#3c4a2f;}
.pill--draft{background:var(--canvas-2);color:#6a6058;}
.map-search{position:relative;}
.map-search-results{position:absolute;top:100%;left:0;right:0;z-index:1200;margin:0;padding:0;list-style:none;
  background:var(--paper);border:1px solid var(--line);border-top:0;border-radius:0 0 2px 2px;
  box-shadow:0 6px 14px rgba(26,21,18,.14);}
.map-search-results li{padding:.55em .8em;font-family:'Space Mono',monospace;font-size:.72rem;cursor:pointer;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.map-search-results li+li{border-top:1px solid var(--line);}
.map-search-results li:hover{background:var(--canvas-2);}

/* ── Accessibility ── */
:focus-visible{outline:3px solid var(--brass);outline-offset:2px;border-radius:1px;}
.skip{position:absolute;left:-999px;}
.skip:focus{left:1rem;top:1rem;position:fixed;z-index:100;background:var(--paper);padding:.6rem 1rem;}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;}
}

/* ── Responsive ── */
@media (max-width:640px){
  .nav{gap:.9rem;}
  .note{grid-template-columns:1fr;gap:.7rem;}
  .note__thumb{aspect-ratio:16/9;}
  .hero__scrim{background:linear-gradient(180deg,rgba(26,21,18,.2),rgba(26,21,18,.75));}
}