/* ============================================================
   ELLIOTT TEELING — Portfolio Atlas
   atlas-pages.css · THE STANDALONE PAGES, IN THE ATLAS'S HAND

   about / projects / skills / cv / contact and the six project
   write-ups were built for the previous design. Rather than
   rebuild that markup, this sheet re-themes it: those pages are
   entirely token-driven, so remapping the tokens and restating a
   dozen components carries the whole thing over to parchment.

   Load LAST, after styles.css and pages.css.

   The idiom, matching index.html and panels.css:
     · parchment ground, brown-black ink, wax-seal crimson
     · IM Fell English for anything that is a heading
     · Courier Prime for prose and for every label/meta line
     · square-ish edges, hairline rules, no soft drop shadows
   ============================================================ */

:root {
  /* ── atlas palette (mirrors css/style.css) ───────────────── */
  /* Fixed light ink. --parchment flips to the night ground under
     [data-theme="dark"]; --paper never does, for text that sits on a
     ground which is dark in both themes (.pj-hero, .pj-outputs, …). */
  --paper:            #f4efe0;
  --parchment:        #f4efe0;
  --parchment-2:      #ece4cf;
  --parchment-3:      #e3d9c0;
  --ink:              #2c1810;
  --ink-soft:         #5a4632;
  --ink-faint:        #8a7457;
  --seal:             #8b1a1a;
  --seal-dark:        #6f1414;
  --gold:             #d4a843;

  --cat-coastal:        #2a6f8f;
  --cat-remote-sensing: #2d6a4f;
  --cat-gis:            #1d3557;
  --cat-fieldwork:      #b07d2b;

  --font-display: 'IM Fell English', Georgia, 'Times New Roman', serif;
  --font-atlas-mono: 'Courier Prime', 'Courier New', monospace;

  /* ── remap the old pages' semantic tokens ────────────────── */
  --bg:            var(--parchment);
  --bg-alt:        var(--parchment-2);
  --bg-subtle:     var(--parchment-2);
  --surface:       rgba(244, 239, 224, 0.72);
  --surface-2:     rgba(236, 228, 207, 0.6);

  --accent:        var(--seal);
  --accent-mid:    var(--ink-faint);
  /* Gold is a fill, not an ink. #d4a843 set as label text lands at 1.6–1.9:1
     on parchment; this bronze reads as the same accent and clears 4.5 on
     every paper tone here, including the tinted panels (5.2:1) — not just on
     the lightest parchment, which is what a shallower bronze would pass on. */
  --gold-ink:      #6d5214;
  /* the same accent for dark grounds, where the bronze goes muddy */
  --gold-pale:     #e8c76a;
  --accent-2:      var(--gold-ink);
  --accent-subtle: rgba(139, 26, 26, 0.07);
  --accent-border: rgba(139, 26, 26, 0.32);

  --text:          var(--ink);
  --text-muted:    var(--ink-soft);
  /* --ink-faint is a hairline colour: as text it sits at 3.5–3.9:1, under the
     4.5 these small caps need. Faint text takes the soft ink instead (7.8:1). */
  --text-faint:    var(--ink-soft);
  --border:        rgba(44, 24, 16, 0.2);
  --border-strong: rgba(44, 24, 16, 0.34);

  --forest:        var(--seal);
  --forest-deep:   var(--ink);
  --forest-darker: var(--ink);
  --sage:          var(--ink-faint);
  --sage-light:    var(--ink-faint);
  --sand:          var(--parchment-2);
  --sand-deep:     var(--parchment-3);
  --bone:          var(--parchment);
  --charcoal:      var(--ink);
  --terracotta:    var(--seal);
  --terracotta-d:  var(--seal-dark);
  --terracotta-l:  var(--gold-ink);
  --line-ink:      var(--ink-soft);

  --font-serif: var(--font-display);
  --font-sans:  var(--font-atlas-mono);
  --font-mono:  var(--font-atlas-mono);
}

/* ── night edition ──────────────────────────────────────────
   The same chart read by lamplight: the paper goes to deep ink-brown,
   the ink becomes the parchment, and gold does the work red does by
   day (seal red is too dark to carry text on this ground — lightened
   to #d0605a it clears 4.9:1). Every token the older stylesheets
   reach for under [data-theme="dark"] is given a night value here;
   leaving any on a daylight value is what previously produced
   parchment-on-parchment headings at 1.0:1. Ratios are against
   --night unless noted. */
[data-theme="dark"] {
  --night:   #16110d;   /* page      — paper on this is 16.3:1 */
  --night-2: #1e1712;   /* raised    */
  --night-3: #261d16;   /* cards     — paper 14.4:1 */
  --night-4: #100c09;   /* recessed  */

  /* This sheet is written in --ink / --parchment / --seal, so those are what
     flip: one redefinition re-themes every rule that speaks that vocabulary,
     rather than 80 hand edits. --paper stays fixed for the handful of places
     that need light text on a ground that is dark in BOTH themes. */
  --parchment:   var(--night);
  --parchment-2: var(--night-2);
  --ink:         var(--paper);
  --ink-soft:    #cbbfa8;
  --ink-faint:   #a2947c;
  --seal:        #d86b64;
  /* by day the "dark" seal deepens a heading; at night it must lighten
     instead, or those headings sit at 3.7:1 on the night ground */
  --seal-dark:   #e07a72;

  --bg: var(--night);               --bg-alt: var(--night-2);
  --bg-subtle: var(--night-2);      --surface: rgba(38, 29, 22, 0.82);
  --surface-2: rgba(30, 23, 18, 0.72);
  --text: var(--paper);             --text-muted: #cbbfa8;   /* 10.3:1 */
  --text-faint: #a2947c;            --charcoal: var(--paper);      /* 6.3:1 */
  --border: rgba(244, 239, 224, 0.16);
  --border-strong: rgba(244, 239, 224, 0.30);
  --accent: #d86b64;                --accent-mid: #a2947c;   /* 5.5:1 */
  --accent-2: var(--gold-pale);     --accent-subtle: rgba(208, 96, 90, 0.13);
  --accent-border: rgba(208, 96, 90, 0.42);
  --forest: #4a1a1a;                --forest-deep: #3a1414;
  --forest-darker: var(--night-4);  --forest-dark: #2a1010;
  --sage: #cbbfa8;                  --sage-light: #cbbfa8;
  --bone: var(--paper);             --line-ink: rgba(244, 239, 224, 0.28);
  --terracotta: #d0605a;            --terracotta-d: #b84a44;
  --terracotta-l: var(--gold-pale);
  /* the bronze is an ink for paper only; at night the pale gold reads */
  --gold-ink: var(--gold-pale);
}

/* ── the paper itself ─────────────────────────────────────── */
body {
  background-color: var(--parchment);
  /* the same grain the panels use: two soft stains plus a faint weave */
  background-image:
    radial-gradient(circle at 14% 18%, rgba(139, 26, 26, 0.035) 0, transparent 44%),
    radial-gradient(circle at 86% 74%, rgba(44, 24, 16, 0.045) 0, transparent 48%),
    repeating-linear-gradient(0deg, rgba(44, 24, 16, 0.016) 0, rgba(44, 24, 16, 0.016) 1px, transparent 1px, transparent 3px),
    repeating-linear-gradient(90deg, rgba(44, 24, 16, 0.013) 0, rgba(44, 24, 16, 0.013) 1px, transparent 1px, transparent 4px);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-atlas-mono);
}
/* Same grain inverted: the stains lift rather than darken, so the night
   ground keeps the paper texture instead of going flat black. */
[data-theme="dark"] body {
  background-color: var(--night);
  background-image:
    radial-gradient(circle at 14% 18%, rgba(208, 96, 90, 0.07) 0, transparent 44%),
    radial-gradient(circle at 86% 74%, rgba(232, 199, 106, 0.05) 0, transparent 48%),
    repeating-linear-gradient(0deg, rgba(244, 239, 224, 0.022) 0, rgba(244, 239, 224, 0.022) 1px, transparent 1px, transparent 3px),
    repeating-linear-gradient(90deg, rgba(244, 239, 224, 0.018) 0, rgba(244, 239, 224, 0.018) 1px, transparent 1px, transparent 4px);
  color: var(--paper);
}
[data-theme="dark"] .ex-hero,
[data-theme="dark"] .ex-home-hero {
  background: linear-gradient(180deg, rgba(22, 17, 13, 0.92), rgba(30, 23, 18, 0.97));
}

/* The hero's drifting linework is the right idea for an atlas — it is the
   same contour motif the chart is drawn from — but it arrives in the old
   green palette. Retint the ground to parchment, calm the contours, and
   drop the settlement/tree symbol layer, which is the busiest part of it
   and the most obviously off-palette. */
.ex-hero, .ex-home-hero {
  background: linear-gradient(180deg, rgba(244, 239, 224, 0.9), rgba(236, 228, 207, 0.96));
}
.ex-hero::before, .ex-home-hero__contours {
  opacity: 0.2 !important;
  filter: sepia(0.55) saturate(0.45) brightness(0.94);
}
.ex-hero::after, .ex-home-hero__map { display: none !important; }

/* The chart has no night edition, so the injected toggle would now be an
   inert control. Hidden rather than deleted: main.js still owns it, and
   removing it there would fork behaviour away from the other branches. */
/* day/night switch, drawn as a small brass instrument on the bar */
.theme-toggle {
  width: 34px;
  height: 34px;
  margin-left: 0.6rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--accent);
  cursor: pointer;
  transition: color 0.18s, border-color 0.18s, background 0.18s;
}
.theme-toggle:hover { color: var(--text); border-color: var(--accent); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-toggle svg { width: 17px; height: 17px; display: block; }
/* show the moon by day (what it switches to) and the sun at night */
.theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }

/* ── type ─────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.ex-h, .ex-hero__title, .ex-pcard__title, .cv-entry-role,
.info-card-label, .skill-category-header, .footer-tagline {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0;
}
h1, .ex-hero__title { color: var(--ink); line-height: 1.1; }
h2, .ex-h { color: var(--seal-dark); }

p, li, dd, dt, blockquote, .ex-lead, .ex-hero__sub {
  font-family: var(--font-atlas-mono);
  color: var(--ink);
}
.ex-lead, .ex-hero__sub { color: var(--ink-soft); line-height: 1.62; }

/* every small caps / meta line in the old design becomes a survey annotation */
.ex-hero__meta .m, .ex-pcard__idx, .cv-entry-date, .ex-watermark,
.ex-eyebrow, .kicker, .ex-pcard__tags, .footer-bottom {
  font-family: var(--font-atlas-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

a { color: var(--seal); text-underline-offset: 3px; }
a:hover { color: var(--seal-dark); }

/* ── navigation: a chart's title block ───────────────────── */
.nav {
  background: rgba(244, 239, 224, 0.94);
  border-bottom: 1px solid rgba(139, 26, 26, 0.3);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: none;
}
.nav .name, .nav-logo .name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--ink);
  letter-spacing: 0;
}
.nav-links a {
  font-family: var(--font-atlas-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--seal); }
.nav-links .btn-nav {
  background: var(--seal);
  border: 1px solid var(--seal-dark);
  border-radius: 2px;
  color: var(--parchment);
}
.nav-links .btn-nav:hover { background: var(--seal-dark); color: var(--parchment); }
.nav-toggle span { background: var(--ink); }
.ex-progress span { background: var(--seal); }

/* ── surfaces: cards read as pinned slips of paper ───────── */
.info-card, .project-card, .ex-pcard, .skill-category, .cv-entry,
.ex-cell, .ex-tile, .panel-card, .contact-card {
  background: rgba(244, 239, 224, 0.66);
  border: 1px solid rgba(44, 24, 16, 0.22);
  border-radius: 3px;
  box-shadow: none;
}
.info-card:hover, .project-card:hover, .ex-pcard:hover, .ex-tile:hover {
  border-color: rgba(139, 26, 26, 0.45);
  box-shadow: 0 2px 0 0 rgba(44, 24, 16, 0.08);
  transform: none;
}
.ex-pcard__media { border-bottom: 1px solid rgba(44, 24, 16, 0.18); }
.ex-pcard__go { color: var(--seal); font-family: var(--font-atlas-mono); }

/* ── tags: the legend keys, restated ─────────────────────── */
.tag, .module-tag, .ex-pcard__tags span, .skill-tags-grid span {
  background: rgba(244, 239, 224, 0.8);
  border: 1px solid rgba(44, 24, 16, 0.26);
  border-radius: 2px;
  color: var(--ink-soft);
  font-family: var(--font-atlas-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: none;
}
.tag:hover, .module-tag:hover { border-color: var(--seal); color: var(--seal); }

/* category inks, matching the atlas legend */
.tag[data-cat="coastal"],        .cat-coastal        { border-color: var(--cat-coastal); color: var(--cat-coastal); }
.tag[data-cat="remote-sensing"], .cat-remote-sensing { border-color: var(--cat-remote-sensing); color: var(--cat-remote-sensing); }
.tag[data-cat="gis"],            .cat-gis            { border-color: var(--cat-gis); color: var(--cat-gis); }
.tag[data-cat="fieldwork"],      .cat-fieldwork      { border-color: var(--cat-fieldwork); color: var(--cat-fieldwork); }

/* ── buttons ─────────────────────────────────────────────── */
.btn, .btn-outline, .btn-white, .btn-ghost {
  font-family: var(--font-atlas-mono);
  font-size: 0.74rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  border-radius: 2px;
  box-shadow: none;
}
.btn-primary, .btn-white {
  background: var(--seal);
  border: 1px solid var(--seal-dark);
  color: var(--parchment);
}
.btn-primary:hover, .btn-white:hover { background: var(--seal-dark); color: var(--parchment); }
.btn-outline, .btn-ghost {
  background: transparent;
  border: 1px solid rgba(139, 26, 26, 0.5);
  color: var(--seal);
}
.btn-outline:hover, .btn-ghost:hover {
  background: rgba(139, 26, 26, 0.07);
  color: var(--seal-dark);
}

/* ── CV entries: a dated survey log ──────────────────────── */
.cv-entry { border-left: 2px solid rgba(139, 26, 26, 0.35); border-radius: 0; }
.cv-entry-role { font-size: 1.05rem; color: var(--ink); }
.cv-entry-org { font-family: var(--font-atlas-mono); color: var(--ink-soft); }
.cv-entry-date {
  font-family: var(--font-atlas-mono);
  font-size: 0.68rem;
  color: var(--seal);
}
.cv-entry-desc { font-family: var(--font-atlas-mono); color: var(--ink); }

/* ── skills ──────────────────────────────────────────────── */
.skill-category-header { color: var(--seal-dark); }
.skill-cat-icon, .fw-icon { color: var(--seal); }

/* A handful of inline card icons carry the previous palette as hard-coded
   SVG stroke attributes. A CSS stroke beats a presentation attribute, so the
   whole set moves onto the chart's ink and gold without hand-editing them. */
svg [stroke="#2D4A3E"] { stroke: var(--seal); }
svg [stroke="#7C9885"],
svg [stroke="#C4703A"] { stroke: var(--gold); }

/* ── section rules: hairlines, like a chart's neatline ───── */
.section, .ex-section { border-top: 1px solid rgba(44, 24, 16, 0.14); }
.section:first-of-type, .ex-section:first-of-type { border-top: 0; }
hr { border: 0; border-top: 1px solid rgba(44, 24, 16, 0.2); }

/* the oversized ghost numerals become faint chart annotations */
.ex-watermark { color: rgba(44, 24, 16, 0.06); font-family: var(--font-display); }

/* ── stat figures ────────────────────────────────────────── */
.ex-stat__n, .stat-n { font-family: var(--font-display); color: var(--seal); }
.ex-stat__l, .stat-l {
  font-family: var(--font-atlas-mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ── figures ─────────────────────────────────────────────── */
figure img, .pj-fig img, .ex-pcard__media img {
  border: 1px solid rgba(44, 24, 16, 0.24);
  border-radius: 2px;
}
figcaption, .pj-fig__cap {
  font-family: var(--font-atlas-mono);
  font-size: 0.72rem;
  color: var(--ink-faint);
}

/* ── night: surfaces built from rgba() literals ──────────────
   Literal colours cannot follow a token flip, so the three paper
   surfaces (bar, cards, tags) plus a few inversions are restated
   here. Without this the bar stays cream and its links go 1.1:1. */
[data-theme="dark"] .nav {
  background: rgba(22, 17, 13, 0.94);
  border-bottom-color: rgba(208, 96, 90, 0.4);
}
[data-theme="dark"] :is(.info-card, .project-card, .ex-pcard, .skill-category,
  .cv-entry, .ex-cell, .ex-tile, .panel-card, .contact-card) {
  background: rgba(38, 29, 22, 0.66);
  border-color: rgba(244, 239, 224, 0.18);
}
[data-theme="dark"] :is(.tag, .module-tag, .ex-pcard__tags span, .skill-tags-grid span) {
  background: rgba(38, 29, 22, 0.8);
  border-color: rgba(244, 239, 224, 0.24);
  color: var(--text-muted);
}
/* the Contact pill: its dark-mode rule sets a deep ink for a light chip */
[data-theme="dark"] .nav-links a.btn-nav,
[data-theme="dark"] .nav-links a.btn-nav:hover { color: var(--paper); }
/* the step disc is pale gold at night, so its numeral has to go dark */
[data-theme="dark"] .pj-step__num { color: var(--night) !important; }
/* prev/next and the low-risk chip land just under 4.5 on the accent */
[data-theme="dark"] :is(.pj-nav-link, .pj-nav-link.prev, .pj-nav-link.next) { color: var(--paper); }
[data-theme="dark"] .pj-risk.r-low { color: var(--gold-pale); }
/* the active filter chip takes the same deep-ink treatment as the pill */
[data-theme="dark"] .filter-btn.active,
[data-theme="dark"] .dr-filter.active { color: var(--paper); }
/* Leaflet paints its own attribution strip; it stays daylight otherwise */
[data-theme="dark"] .leaflet-control-attribution {
  background: rgba(22, 17, 13, 0.86) !important;
  color: var(--text-muted) !important;
}
[data-theme="dark"] .leaflet-control-attribution a { color: var(--gold-pale) !important; }

/* ── contrast repairs ────────────────────────────────────────
   These carried colours chosen for a dark ground, hard-coded rather than
   tokenised, so re-theming to parchment left them near-invisible. Measured
   ratios below are against the parchment they now sit on. */

/* project cards: description was rgba(245,242,235,.8) — 1.0:1 on paper */
/* Project cards sit on a map screenshot behind a dark scrim
   (.ex-pcard__media::after in pages.css), so this text is light in BOTH
   themes — it is over the scrim, never over the page. Tokenising it to
   ink was wrong: that put dark text on a dark scrim above a pale map,
   which is what made these titles unreadable. The scrim is also deepened,
   since the imagery ranges from dark satellite to near-white OS mapping
   and the caption has to clear all of it. */
.ex-pcard__media::after {
  background: linear-gradient(180deg,
    rgba(12, 20, 16, 0.28) 0%,
    rgba(12, 20, 16, 0.62) 45%,
    rgba(12, 20, 16, 0.95) 100%) !important;
}
.ex-pcard__title { color: var(--paper); }
.ex-pcard__desc { color: rgba(244, 239, 224, 0.9); }
.ex-pcard__idx { color: var(--gold-pale); }
.ex-pcard__tags .tag {
  color: var(--paper);
  background: rgba(244, 239, 224, 0.14);
  border-color: rgba(244, 239, 224, 0.32);
}
.ex-pcard__go { color: var(--paper); }

/* footer wordmark was var(--bone): light on a now-light footer, 1.1:1 */
.footer-logo, .footer-logo .name { color: var(--text); }

/* the arrow chip inverts on hover, so its glyph has to invert with it */
.ex-pcard:hover .ex-pcard__go { color: var(--parchment); border-color: var(--gold-ink); background: var(--gold-ink); }

/* The project pages keep three deliberately dark grounds: .pj-hero and
   .pj-outputs on ink, .pj-reflect on seal. The bronze above is an ink for
   paper and goes muddy on those, so dark ground gets its own pair — a pale
   gold for the small caps (10.3:1 on ink, 5.7:1 on seal) and near-solid
   parchment for prose. Everything nested has to be named: these blocks sit
   inside a light page, so descendants otherwise inherit the paper palette. */
.pj-hero, .pj-outputs, .pj-reflect { color: var(--paper); }

:is(.pj-hero, .pj-outputs, .pj-reflect) :is(p, li, dd, figcaption, blockquote, .num, .pj-lede) {
  color: rgba(244, 239, 224, 0.92);
}
:is(.pj-hero, .pj-outputs, .pj-reflect)
  :is(.pj-kicker, .lab, dt, .pj-hero__index, .pj-step__stage, .ex-eyebrow, .kicker),
.pj-meta-card__head span {
  color: var(--gold-pale);
}
:is(.pj-hero, .pj-outputs, .pj-reflect) .tag {
  color: var(--paper);
  border-color: rgba(244, 239, 224, 0.45);
  background: rgba(244, 239, 224, 0.08);
}
/* its own near-black chip, so it needs the dark-ground ink too */
.pj-fig__tag { color: var(--gold-pale); }

/* step numerals sit on the bronze disc: parchment clears 5.4:1 there */
.pj-step__num { color: var(--paper) !important; }

/* risk chips kept the previous palette's oranges on pale grounds (3.9–4.3) */
.pj-risk.r-moderate { color: var(--gold-ink); }
.pj-risk.r-notable, .pj-risk.r-high { color: var(--accent); }

/* ── footer: the chart's imprint line ────────────────────── */
.footer {
  background: var(--parchment-2);
  border-top: 1px solid rgba(139, 26, 26, 0.3);
  color: var(--ink-soft);
}
.footer a { color: var(--ink-soft); }
.footer a:hover { color: var(--seal); }
.footer-tagline { color: var(--ink); }
.footer-bottom, .footer-bottom span { color: var(--ink-soft); font-size: 0.68rem; }
.footer-nav a {
  font-family: var(--font-atlas-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.7rem;
}

/* IM Fell English runs small and light; hold the floor on phones so the
   prose does not get thin, matching the caption floor on the chart. */
@media (max-width: 767px) {
  body { font-size: 15px; }
  .ex-hero__title, h1 { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .nav-links a { font-size: 0.78rem; }
}

@media (prefers-reduced-motion: reduce) {
  .fade-up, .ex-reveal { animation: none !important; opacity: 1 !important; transform: none !important; }
}