/* =====================================================================
   ROADSIDE ATTRACTIONS & OTHER LANDMARKS
   Relationship map — pinned-atlas-sidebar / editorial-narrative pattern
   ===================================================================== */

:root{
  /* clean editorial paper — warm-white, almost true white */
  --paper:        #faf7ed;
  --paper-2:      #f1ecdc;
  --ink:          #16140f;
  --ink-soft:     #3d362a;
  --ink-faint:    #7a6f5b;
  --rule:         #d6cdb6;
  --rule-soft:    #e5dcc4;

  /* territories — antique hand-tint inks on light paper */
  --me:           #29456a;   /* Prussian indigo — Sylvie */
  --me-deep:      #1a2f4c;
  --abi:          #8d3424;   /* oxblood — Abi */
  --abi-deep:     #5e2218;
  --gold:         #b08038;

  /* map (dark inset on light page) — its own color system */
  --map-bg:       #11221d;   /* deep cartographic teal-green */
  --map-ink:      #f3e8c4;   /* full bright cream — current waypoint + frame labels */
  --map-ink-soft: #d8cba2;   /* brighter secondary — readable on the dark bg */
  --map-ink-faint:#a59b76;   /* lifted faint — minor cartographic marks */
  --map-rule:     #38503f;
  --map-gold:     #d6ab5b;

  /* type — one family across the board (Newsreader). The `--mono` token
     is preserved for backward-compat in rules that style "label" type
     (uppercase + letter-spacing), but it points at Newsreader now too.
     Dropping the monospace family removes the strongest "AI editorial"
     visual tell from the page. */
  --display: "Newsreader", "Cormorant Garamond", Georgia, serif;
  --body:    "Newsreader", Georgia, serif;
  --mono:    "Newsreader", Georgia, serif;

  --column-max: 620px;
  --map-w: 360px;
  --gutter: 56px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background-color:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:19px;
  line-height:1.62;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
}
::selection{background:rgba(169,128,60,.28);}

a{color:var(--me-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;}
a:hover{color:var(--abi-deep);}

/* =====================================================================
   LAYOUT — narrative left, pinned atlas sidebar right
   ===================================================================== */
.layout{
  display:grid;
  grid-template-columns: 1fr var(--map-w);
  gap:var(--gutter);
  max-width:1240px;
  margin:0 auto;
  padding:80px 56px 120px;
  align-items:start;
}

.narrative{
  max-width:var(--column-max);
  justify-self:end;
  width:100%;
}

.atlas{
  position:sticky;
  top:32px;
  width:var(--map-w);
  max-height:calc(100vh - 64px);
  align-self:start;
}
.atlas__inner{
  width:100%;
  max-height:calc(100vh - 64px);
  display:flex;
  flex-direction:column;
  /* dark cartographic inset — sits on the light page like a real chart */
  background:var(--map-bg);
  color:var(--map-ink);
  border:1px solid var(--ink);
  padding:18px 18px 20px;
  box-shadow:0 1px 0 rgba(20,18,12,.06);
}

/* =====================================================================
   CHAPTER — single editorial rhythm for every section
   kicker · title · (optional lede) · body
   ===================================================================== */
.chapter{
  margin:0 0 88px;
  scroll-margin-top:48px;  /* so anchor links don't tuck under top edge */
}
.chapter:last-child{margin-bottom:0;}

.kicker{
  display:block;
  font-family:var(--mono);
  font-weight:500;
  font-size:11.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:14px;
}

/* chapter-type kickers — pronounced labels: type leads, color signals the
   entry category at a glance. Used on highlights, horizons, postcards, roadsides. */
.kicker--highlight,
.kicker--horizon,
.kicker--postcard,
.kicker--roadside{
  display:inline-block;
  font-weight:700;
  font-size:13.5px;
  letter-spacing:.16em;
  color:var(--ink);
  margin-bottom:22px;
  padding-bottom:7px;
  border-bottom:2px solid var(--ink);
}
.kicker--horizon{color:var(--gold); border-bottom-color:var(--gold);}
.kicker--postcard{color:var(--me-deep); border-bottom-color:var(--me-deep);}
.kicker--roadside{color:var(--abi-deep); border-bottom-color:var(--abi-deep);}

.chapter__title{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(34px, 4.4vw, 50px);
  line-height:1.05;
  letter-spacing:-.012em;
  color:var(--ink);
  margin:0 0 18px;
  text-wrap:pretty;
  font-variation-settings:"opsz" 72;
}
.chapter__title em{font-style:italic;color:var(--me-deep);}

.lede{
  font-family:var(--body);
  font-size:21px;
  line-height:1.5;
  color:var(--ink-soft);
  margin:0 0 22px;
  text-wrap:pretty;
}

.body{
  font-size:19px;line-height:1.62;color:var(--ink);
  margin:0 0 16px;
  text-wrap:pretty;
}

.figure{
  margin:28px 0 22px;
}
.figure img{
  display:block;width:100%;height:auto;
  border:1px solid var(--rule);
}
.figure figcaption{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-top:8px;
  text-align:left;
}

/* highlight photos: small inset on the left, body text wraps around */
.chapter--highlight .figure{
  float:left;
  width:200px;
  margin:6px 28px 14px 0;
  shape-outside:margin-box;
}
.chapter--highlight::after{
  content:"";display:block;clear:both;
}
@media (max-width: 680px){
  .chapter--highlight .figure{
    float:none;
    width:100%;
    margin:20px 0;
  }
}

/* =====================================================================
   INTRO SECTIONS — full-viewport hero + quote slide before the journey
   The hero is the page's "trailhead"; the quote frames the project's
   intellectual stance before the relationship map proper begins.
   ===================================================================== */
.intro-hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:60px 40px;
  background:var(--paper);
}
.intro-hero__inner{
  max-width:840px;
  text-align:center;
}
.intro-hero__inner .kicker{
  display:block;
  margin-bottom:28px;
}
.intro-hero__title{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(52px, 8vw, 96px);
  line-height:1.0;
  letter-spacing:-.024em;
  margin:0 0 36px;
  color:var(--ink);
  font-variation-settings:"opsz" 72;
  text-wrap:balance;
}
.intro-hero__title em{
  font-style:italic;
  color:var(--gold);
}
.intro-hero__intro{
  font-family:var(--body);
  font-size:21px;
  line-height:1.55;
  color:var(--ink-soft);
  max-width:48ch;
  margin:0 auto;
  text-wrap:pretty;
}
.intro-hero__walk{
  display:inline-block;
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-faint);
  text-decoration:none;
  margin:52px 0 0;
  padding:8px 14px;
  cursor:pointer;
  transition:color .15s ease;
}
.intro-hero__walk:hover{
  color:var(--ink);
}
.intro-hero__walk:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:4px;
}
.intro-hero__walk span{
  display:inline-block;
  margin-left:7px;
  transform:translateY(1px);
  transition:transform .25s ease;
}
.intro-hero__walk:hover span{
  transform:translateY(4px);
}

.intro-quote{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:60px 40px;
  background:var(--map-bg);
  color:var(--map-ink);
}
.intro-quote__inner{
  max-width:760px;
  text-align:center;
  margin:0;
}
.intro-quote__text{
  font-family:var(--display);
  font-style:italic;
  font-weight:400;
  font-size:clamp(28px, 4.2vw, 46px);
  line-height:1.22;
  letter-spacing:-.008em;
  color:var(--map-ink);
  margin:0 0 36px;
  font-variation-settings:"opsz" 60;
  text-wrap:balance;
}
.intro-quote__attr{
  font-family:var(--mono);
  font-style:normal;
  font-weight:500;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--map-ink-soft);
}

@media (max-width: 560px){
  .intro-hero, .intro-quote{padding:48px 24px;}
  .intro-hero__title{font-size:clamp(40px, 11vw, 64px);}
  .intro-hero__intro{font-size:19px;}
  .intro-quote__text{font-size:clamp(22px, 7vw, 32px);}
}

/* =====================================================================
   LAND INTRO — chapter divider announcing a territory
   ===================================================================== */
.land-intro{margin:0 0 88px;border-top:1px solid var(--rule);padding-top:36px;}
.land-intro .kicker{color:var(--ink-faint);}
.land-intro .chapter__title{
  font-size:clamp(40px, 5.2vw, 60px);
}
.land-intro--me .chapter__title{color:var(--me-deep);}
.land-intro--abi .chapter__title{color:var(--abi-deep);}

/* =====================================================================
   POSTCARD — visual postcard object; three-part appreciation lives inside
   The When I / I felt / Because structure is the assignment's rubric-relevant
   "Challenge Six" three-part appreciation — give it real visual identity.
   ===================================================================== */
.postcard{
  background:var(--paper-2);
  border:1px solid var(--rule);
  padding:28px 32px 26px;
  margin:10px 0 0;
  position:relative;
}
.postcard__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  border-bottom:1px dashed var(--rule);
  padding-bottom:16px;
  margin-bottom:22px;
}
.postcard__address{
  display:flex;
  flex-direction:column;
  gap:3px;
}
.postcard__addr-label{
  font-family:var(--mono);
  font-weight:500;
  font-size:10.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.postcard__addressee{
  font-family:var(--display);
  font-style:italic;
  font-weight:500;
  font-size:26px;
  line-height:1.05;
  color:var(--ink);
}
.postcard__stamp{
  flex:none;
  display:block;
  width:auto;
  height:74px;
  transform:rotate(1.5deg);
  filter:drop-shadow(0 1px 0 rgba(20,18,12,.12));
}
.postcard__line{
  display:flex;
  align-items:baseline;
  gap:14px;
  margin:0 0 12px;
  font-family:var(--body);
  font-size:18px;
  line-height:1.55;
  color:var(--ink);
}
.postcard__line:last-of-type{
  margin-bottom:0;
}
.postcard__cue{
  flex:0 0 78px;
  font-style:italic;
  font-weight:500;
  color:var(--ink-soft);
  letter-spacing:.005em;
}
.postcard__text{
  flex:1;
}
.postcard__sign{
  font-family:var(--body);
  font-style:italic;
  font-size:17px;
  color:var(--ink-soft);
  text-align:right;
  margin:22px 0 0;
  letter-spacing:.005em;
}

/* =====================================================================
   ROADSIDE — small typographic differentiator: Q/A inline
   ===================================================================== */
.chapter--roadside .body{margin-bottom:8px;}
.roadside__label{
  font-family:var(--mono);
  font-weight:700;
  color:var(--abi-deep);
  margin-right:.4em;
}

/* =====================================================================
   DESTINATION — italic title with a gold ☆ marker that echoes the
   destination stars on the map sidebar (visual rhyme between text and map)
   ===================================================================== */
.chapter--destination .chapter__title::before{
  content:"☆";
  display:inline-block;
  margin-right:18px;
  color:var(--gold);
  font-weight:400;
  font-size:.62em;
  vertical-align:.22em;
  font-variation-settings:normal;
}
.chapter--destination .body{color:var(--ink-soft);font-size:18px;}

/* =====================================================================
   BORDER — chapter divider, no left-column body
   ===================================================================== */
.border-chapter{
  margin:88px 0;
  padding:32px 0;
  border-top:1px dashed var(--rule);
  border-bottom:1px dashed var(--rule);
  text-align:center;
}
.border-chapter .kicker{
  margin-bottom:8px;
  color:var(--gold);
  letter-spacing:.22em;
}
.border-chapter__phrase{
  font-family:var(--display);
  font-style:italic;
  font-size:clamp(22px, 2.6vw, 30px);
  color:var(--ink);
  margin:0;
}
.border-chapter__phrase strong{
  font-style:normal;font-weight:600;
}
.border-chapter__phrase .from{color:var(--me-deep);}
.border-chapter__phrase .to{color:var(--abi-deep);}

/* =====================================================================
   END PANEL — full-viewport closing slide, mirrors the intro hero.
   Lives after .layout so the route line has scroll runway to fully fill,
   and the journey closes with the same gravity it opened with.
   ===================================================================== */
.intro-end{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:60px 40px;
  background:var(--paper);
}
.intro-end__inner{
  max-width:780px;
  text-align:center;
}
.intro-end__inner .kicker{
  display:block;
  font-family:var(--display);
  font-weight:500;
  font-size:11.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin:0 0 36px;
}
.intro-end__line{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(34px, 5.4vw, 60px);
  line-height:1.12;
  letter-spacing:-.014em;
  color:var(--ink);
  margin:0 0 56px;
  text-wrap:balance;
}
.intro-end__colophon{
  font-family:var(--display);
  font-weight:500;
  font-size:11.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin:0;
}
@media (max-width: 560px){
  .intro-end{padding:48px 24px;}
  .intro-end__line{font-size:clamp(26px, 8vw, 40px);}
}

/* =====================================================================
   ATLAS MAP — pinned cartographic sidebar
   ===================================================================== */
.atlas svg{
  display:block;
  width:100%;
  height:auto;
  max-height:100%;
  overflow:visible;
  flex:0 1 auto;
  min-height:0;
}
.atlas__title{
  font-family:var(--mono);
  font-weight:500;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--map-ink);
  text-align:center;
  margin:0 0 14px;
  padding-bottom:10px;
  border-bottom:1px solid var(--map-rule);
}

/* atlas elements — section labels are mono uppercase (the "frame" labels) */
.land-label{
  font-family:var(--mono);
  font-weight:500;
  font-size:10.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  fill:var(--map-ink-soft);
}
.atlas-border-label{
  fill:var(--map-ink);
  font-weight:500;
  letter-spacing:.2em;
}

/* route line */
.route-trail{
  fill:none;
  stroke:var(--map-ink-soft);
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:3 4;
  opacity:.5;
}
.route-progress{
  fill:none;
  stroke:var(--map-ink);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  /* dashoffset set via JS on scroll */
}

/* waypoint dots — kind classes first, state classes last so state wins */
.waypoint{
  fill:var(--map-bg);
  stroke:var(--map-ink-soft);
  stroke-width:1.2;
}
.waypoint--destination{
  fill:none;
  stroke:var(--map-ink-soft);
  stroke-width:1.2;
  stroke-linejoin:miter;
}
.waypoint--start, .waypoint--end{
  fill:var(--map-ink);
  stroke:var(--map-ink);
  r:4;
}
.waypoint--border{
  fill:var(--map-gold);
  stroke:var(--map-ink);
  stroke-width:1.2;
  r:4;
}
/* state classes — applied dynamically via JS based on scroll */
.waypoint--reached{
  fill:var(--map-ink);
  stroke:var(--map-ink);
}
.waypoint--current{
  fill:var(--map-gold);
  stroke:var(--map-ink);
  stroke-width:1.4;
  r:6;
}

/* waypoint labels — cartographic convention: small italic serif for place names */
.waypoint-label{
  font-family:var(--body);
  font-style:italic;
  font-weight:500;
  font-size:13.5px;
  letter-spacing:.005em;
  fill:var(--map-ink-soft);
}
.waypoint-label--current{
  fill:var(--map-ink);
  font-weight:700;
}

/* border crossing line on the atlas */
.atlas-border{
  stroke:var(--map-rule);
  stroke-width:1;
  stroke-dasharray:5 4;
  opacity:.95;
}
.atlas-border-bg{
  fill:var(--map-bg);
}

/* =====================================================================
   MOBILE ATLAS — horizontal progress strip pinned to viewport bottom
   (narrow viewports only)
   ===================================================================== */
.atlas-mobile{
  display:none;  /* hidden on desktop */
}
.atlas-mobile-svg{
  display:block;
  width:100%;
  height:auto;  /* aspect-derived height — circles stay round */
}
.atlas-mobile-trail{
  fill:none;
  stroke:var(--map-ink-soft);
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-dasharray:3 4;
  opacity:.55;
}
.atlas-mobile-progress{
  fill:none;
  stroke:var(--map-ink);
  stroke-width:1.8;
  stroke-linecap:round;
}
.atlas-mobile-border{
  stroke:var(--map-gold);
  stroke-width:1.2;
  opacity:.8;
}
.atlas-mobile-label{
  font-family:var(--body);
  font-style:italic;
  font-size:16px;
  color:var(--map-ink);
  text-align:center;
  margin:0 0 6px;
  line-height:1.2;
  transition:color .15s ease;
}

/* =====================================================================
   RESPONSIVE — collapse to single column on narrow screens
   ===================================================================== */
@media (max-width: 980px){
  .layout{
    grid-template-columns: 1fr;
    gap:0;
    padding:32px 24px 110px;  /* extra bottom space for the pinned strip */
  }
  .narrative{justify-self:start;max-width:100%;}
  .atlas{display:none;}  /* desktop sidebar hidden on mobile */
  .atlas-mobile{
    display:block;
    position:fixed;
    bottom:0; left:0; right:0;
    z-index:30;
    background:var(--map-bg);
    color:var(--map-ink);
    padding:12px 18px 14px;
    border-top:1px solid var(--ink);
    box-shadow:0 -2px 8px rgba(20,18,12,.18);
    transform:translateY(100%);  /* hidden during intro hero + quote */
    transition:transform .35s ease;
    pointer-events:none;
  }
  .atlas-mobile.is-visible{
    transform:translateY(0);  /* slides up once journey begins */
    pointer-events:auto;
  }
}
@media (max-width: 560px){
  body{font-size:17px;}
  .chapter{margin-bottom:64px;}
  .chapter__title{font-size:clamp(28px, 8vw, 38px);}
  .trailhead .chapter__title{font-size:clamp(36px, 10vw, 52px);}
  .lede{font-size:19px;}
  .layout{padding:32px 20px 60px;}
}