/* ===========================================================================
   Urban Hike — shared stylesheet
   ---------------------------------------------------------------------------
   Layout, type and components for every walk. It carries NO colour values of
   its own: everything reads from the custom properties each page defines in
   its own <style> block, so a new walk is a new palette rather than a new
   stylesheet. The properties a page must define are listed in palette.css.
   =========================================================================== */
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--cream);
    color:var(--ink);
    font-family:var(--font-body);
    line-height:1.6;
    overflow-x:hidden;
  }
  img{max-width:100%; display:block;}
  h1,h2,h3{font-family:var(--font-title); letter-spacing:0; text-transform:uppercase; line-height:1.1;}
  a{color:inherit;}
  .script{font-family:var(--font-title); font-weight:400;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 32px;}

  /* ---------- TOP BAR ---------- */
  .topbar{
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 32px;
    max-width:1180px; margin:0 auto;
    position:relative; z-index:10;
  }
  .brand{display:flex; align-items:center; gap:12px;}
  .brand img{width:52px; height:52px; border-radius:50%; object-fit:cover;}
  .brand-text{font-family:var(--font-title); font-size:0.95rem; letter-spacing:0;}
  .brand-text span{display:block; font-family:var(--font-body); font-size:0.6rem; letter-spacing:3px; color:var(--orange); font-weight:700;}
  nav{display:flex; gap:28px; font-size:0.8rem; letter-spacing:1px; text-transform:uppercase; font-weight:700;}
  nav a{text-decoration:none; border-bottom:2px solid transparent; padding-bottom:3px; transition:border-color .2s;}
  nav a:hover{border-color:var(--orange);}
  @media (max-width:720px){ nav{display:none;} }

  /* version switcher (V1 <-> V2) */
  .version-link{
    border:2px solid var(--orange); border-radius:999px;
    padding:7px 16px; color:var(--orange);
    text-decoration:none; font-weight:700; letter-spacing:1px;
    transition:background .2s, color .2s;
  }
  .version-link:hover{ background:var(--orange); color:var(--cream); border-color:var(--orange); }
  /* keep the switcher visible on mobile even though the old nav hid itself */
  @media (max-width:720px){ nav:has(.version-link){ display:flex; } }

  /* ---------- STICKY TOP BAR ---------- */
  /* full-width sticky shell so the background spans the viewport, while the
     inner .topbar keeps its centred 1180px measure */
  .topbar-wrap{
    position:sticky; top:0; z-index:50;
    background:var(--cream);
    border-bottom:1px solid transparent;
    transition:border-color .25s ease, box-shadow .25s ease;
  }
  /* hairline + shadow only once you've scrolled, so it's clean at the top */
  .topbar-wrap.is-stuck{
    border-bottom-color:rgba(33,31,26,.12);
    box-shadow:0 2px 14px rgba(33,31,26,.07);
  }
  .topbar{transition:padding .25s ease;}
  .brand img{transition:width .25s ease, height .25s ease;}
  .topbar-wrap.is-stuck .topbar{padding-top:10px; padding-bottom:10px;}
  .topbar-wrap.is-stuck .brand img{width:40px; height:40px;}

  /* logo doubles as a back-to-top link (header only — the footer reuses .brand) */
  .brand-link{text-decoration:none; border-radius:8px; transition:opacity .2s ease;}
  .brand-link:hover{opacity:.82;}
  .brand-link:focus-visible{outline:3px solid var(--orange); outline-offset:4px;}
  /* Quiet "↑ Top" cue sitting to the LEFT of the logo, unfurling only once the
     bar is stuck. It collapses to zero width rather than just fading, and the
     negative margin cancels the flex gap while collapsed — otherwise the logo
     would sit indented from the page's 32px margin at the top of the page. */
  .brand-top-hint{
    font-family:var(--font-body);
    font-size:0.58rem; letter-spacing:2px; text-transform:uppercase;
    color:var(--orange); white-space:nowrap;
    display:flex; align-items:center; gap:5px;
    /* min-width:0 is required: flex items default to min-width:auto, which
       stops max-width:0 collapsing them below their content width */
    max-width:0; min-width:0; opacity:0; overflow:hidden; margin-right:-12px;
    transition:max-width .3s ease, opacity .25s ease, margin-right .3s ease;
  }
  .topbar-wrap.is-stuck .brand-top-hint{max-width:70px; opacity:.7; margin-right:0;}
  .brand-link:hover .brand-top-hint{opacity:1;}
  /* no room for it beside the buttons on small screens */
  /* On phones there is no room for the word, but the arrow alone still reads
     as "back to top" — so show just the glyph rather than hiding the cue. */
  @media (max-width:720px){
    .brand-top-hint{gap:0;}
    .brand-top-hint .tth-word{display:none;}
    .topbar-wrap.is-stuck .brand-top-hint{max-width:16px; margin-right:-5px;}
    /* claw back a little width so nothing collides with the buttons */
    .topbar{padding-left:20px; padding-right:20px;}
  }

  .topbar-actions{display:flex; align-items:center; gap:16px;}
  .book-btn{
    display:inline-flex; flex-direction:column; align-items:center; gap:1px;
    background:var(--orange); color:var(--cream);
    line-height:1.15;
    padding:8px 18px; border-radius:6px; text-decoration:none;
    box-shadow:3px 3px 0 var(--green);
    transition:transform .15s ease, box-shadow .15s ease;
    white-space:nowrap;
  }
  .book-btn__main{
    font-family:var(--font-body); font-weight:700;
    letter-spacing:1px; text-transform:uppercase; font-size:0.72rem;
  }
  /* Airbnb's own typeface (Cereal) is proprietary and can't be served from a
     CDN, so this is Montserrat — the nearest free geometric sans. */
  .book-btn__via{
    font-family:var(--font-body);
    font-weight:600; font-size:0.6rem; letter-spacing:.2px;
    text-transform:none;
    /* Airbnb red sits on white, not on the orange button — the two warm reds
       are almost the same value and would blend into each other */
    color:var(--airbnb);
    background:#fff;
    padding:2px 9px; border-radius:999px;
    margin-top:3px;
  }
  .book-btn:hover{transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--green);}
  /* stop the sticky bar covering a section when you jump to its anchor */
  section[id], .cta-strip{scroll-margin-top:92px;}
  @media (max-width:520px){
    /* Phone header keeps the wordmark, but shrunk and locked to one line —
       left at full size it wrapped to two lines and squeezed out the arrow. */
    .brand-text{font-size:0.74rem; white-space:nowrap;}
    .brand-text span{font-size:0.46rem; letter-spacing:1.4px; white-space:nowrap;}
    .brand-top-hint{font-size:0.9rem; letter-spacing:0;}
    .topbar-wrap.is-stuck .brand-top-hint{max-width:26px; margin-right:0;}
    .book-btn{padding:7px 14px;}
    .book-btn__main{font-size:0.66rem;}
    .book-btn__via{font-size:0.53rem;}
    .topbar-actions{gap:10px;}
  }
  /* Laptop and up: a more substantial bar. The compact (stuck) state grows
     too, but the gap between them stays under the 56px hysteresis band in the
     sticky script, so the bar still can't oscillate near the top. */
  @media (min-width:1000px){
    .topbar{padding:26px 32px;}
    .brand img{width:64px; height:64px;}
    .brand-text{font-size:1.12rem;}
    .brand-text span{font-size:0.66rem; letter-spacing:3.4px;}
    .topbar-wrap.is-stuck .topbar{padding-top:14px; padding-bottom:14px;}
    .topbar-wrap.is-stuck .brand img{width:48px; height:48px;}
    .brand-top-hint{font-size:0.64rem;}
    .book-btn{padding:11px 22px;}
    .book-btn__main{font-size:0.8rem;}
    .book-btn__via{font-size:0.65rem;}
    .version-link{padding:9px 18px; font-size:0.85rem;}
    /* taller bar needs a deeper anchor offset */
    section[id], .cta-strip{scroll-margin-top:120px;}
  }

  @media (prefers-reduced-motion:reduce){
    .topbar-wrap, .topbar, .brand img, .book-btn{transition:none;}
  }

  /* ---------- HERO ---------- */
  .hero{
    display:grid; grid-template-columns: 1fr 1.15fr;
    align-items:stretch;
    min-height:82vh;
    position:relative;
    overflow:hidden;
  }
  .hero-copy{
    display:flex; flex-direction:column; justify-content:center;
    padding:40px 90px 64px 32px;
    position:relative;
    z-index:2;
  }
  .geo-shapes{
    position:absolute; inset:0; z-index:1; pointer-events:none;
    overflow:hidden;
  }
  .geo-shapes span{
    position:absolute; display:block;
  }
  .tri{clip-path: polygon(50% 0%, 0% 100%, 100% 100%);}
  .sq{border-radius:4px;}
  .geo-shapes .t1{ width:120px; height:104px; background:var(--orange); opacity:0.9; right:-10px; top:8%; transform:rotate(8deg); }
  .geo-shapes .t2{ width:70px; height:62px; background:var(--gold); opacity:0.85; right:120px; top:2%; transform:rotate(-18deg); }
  .geo-shapes .t3{ width:150px; height:130px; border:3px solid var(--green); opacity:0.8; right:-40px; top:40%; transform:rotate(-12deg); clip-path:polygon(50% 0%, 0% 100%, 100% 100%); background:transparent; }
  .geo-shapes .t4{ width:90px; height:90px; background:var(--green); opacity:0.92; right:60px; top:58%; transform:rotate(24deg); border-radius:6px; }
  .geo-shapes .t5{ width:60px; height:60px; background:var(--cream); border:3px solid var(--orange); opacity:0.95; right:-6px; bottom:6%; transform:rotate(45deg); border-radius:4px; }
  .geo-shapes .t6{ width:100px; height:88px; background:var(--orange); opacity:0.7; right:150px; bottom:2%; transform:rotate(200deg); clip-path:polygon(50% 0%, 0% 100%, 100% 100%); }
  @media (max-width:900px){ .geo-shapes{display:none;} .hero-copy{padding:36px 24px;} }
  .hero-copy .brushline{
    width:70px; height:6px; background:var(--orange); margin:18px 0 22px; border-radius:3px;
  }
  /* The hook is decorative, so it is a div, not a heading — the page's real
     <h1> is the title below it. That means the h1,h2,h3 rule no longer reaches
     it and its type has to be restated here. */
  .hero-hook{
    font-family:var(--font-title);
    text-transform:uppercase; letter-spacing:0; line-height:1.1;
    /* Alfa Slab One runs much wider than Anton, so the display size is eased down */
    font-size:clamp(1.9rem, 4.2vw, 3.1rem);
  }
  .hero-hook .l1{color:var(--orange);}
  .hero-hook .l2{color:var(--green);}
  .hero-hook .l3{color:var(--gold);}
  .hero-copy p{
    /* readability pass: a measured line length, bigger type and more leading.
       Courier Prime is a typewriter face, so prose needs more air than a sans. */
    max-width:46ch;          /* ~46 characters per line */
    margin-top:20px;
    font-size:1.02rem;
    line-height:1.78;
    color:#33302a;
  }

  /* The hard facts get pulled out of the prose into trail-marker style cards.
     They carry the visual weight, which lets the copy itself go quieter. */
  .hero-stats{
    display:flex; flex-wrap:wrap; gap:12px;
    margin:24px 0 6px;
  }
  .stat{
    display:flex; flex-direction:column; justify-content:center;
    border:2px solid; border-radius:8px;
    padding:9px 14px;
    background:rgba(255,255,255,.42);
    color:var(--ink);
  }
  /* hollow cards, but each outlined in its headline colour, in the same order
     as WALK IT. / FEEL IT. / REMEMBER IT. above */
  .hero-stats .stat:nth-child(1){border-color:var(--orange); box-shadow:3px 3px 0 var(--orange);}
  .hero-stats .stat:nth-child(2){border-color:var(--green);  box-shadow:3px 3px 0 var(--green);}
  .hero-stats .stat:nth-child(3){border-color:var(--gold);   box-shadow:3px 3px 0 var(--gold);}
  .hero-stats .stat:nth-child(1) b{color:var(--orange);}
  .hero-stats .stat:nth-child(2) b{color:var(--green);}
  /* the gold itself is too light to read as text on a pale card (1.9:1), so the
     numeral uses a darkened amber while the outline stays true gold */
  .hero-stats .stat:nth-child(3) b{color:var(--gold-ink);}
  .stat b{
    font-family:var(--font-title); font-weight:400;
    font-size:1.3rem; line-height:1; letter-spacing:0;
  }
  .stat i{
    font-style:normal; font-family:var(--font-body);
    font-size:0.58rem; letter-spacing:2px; text-transform:uppercase;
    opacity:.72; margin-top:5px; white-space:nowrap;
  }
  .stat .plus{padding:0 3px; opacity:.55;}

  /* prose is smaller now and split by role, so no two blocks look alike */
  .hero-text{margin-top:20px;}
  .hero-text p{margin-top:13px; font-size:0.92rem; line-height:1.72; max-width:50ch;}
  .hero-text p:first-child{margin-top:0;}
  /* the challenge line now sits above the headline as an eyebrow, in the same
     mono-caps idiom as the section kickers elsewhere on the page */
  /* scoped under .hero-copy so it outranks the generic `.hero-copy p` rule */
  /* This is the page's actual title; the coloured lines above it are the hook. */
  .hero-copy .hero-kicker{
    font-family:var(--font-title);
    font-size:clamp(1.25rem, 2.3vw, 1.85rem);
    font-weight:400; line-height:1.15;
    letter-spacing:0; text-transform:uppercase;
    color:var(--ink);
    max-width:22ch;
    text-wrap:balance;
    margin:14px 0 18px;
  }
  @media (max-width:900px){
    .hero-copy .hero-kicker{margin:10px 0 14px;}
  }
  /* practical footnote, deliberately quiet */
  .hero-text .fine{
    font-size:0.8rem; opacity:.68; line-height:1.6;
    padding-left:12px; border-left:2px solid rgba(33,31,26,.22);
  }
  @media (max-width:900px){
    .hero-stats{gap:10px; margin-top:20px;}
    .stat{padding:8px 12px;}
    .stat b{font-size:1.15rem;}
  }
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    background:var(--orange); color:var(--cream);
    font-family:var(--font-body); font-weight:700; letter-spacing:1px; text-transform:uppercase;
    font-size:0.82rem;
    padding:15px 26px; border-radius:6px; text-decoration:none;
    width:fit-content; margin-top:30px;
    box-shadow:4px 4px 0 var(--green);
    transition:transform .15s ease;
  }
  .btn:hover{transform:translate(-2px,-2px);}
  .hero-photo{
    position:relative;
    background-image:url('images/thumbs/col2-sm.jpg');
    /* portrait collage (1024x1536): show it whole, never cropped */
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
    margin-left:-40px;
  }
  @media (max-width:900px){
    .hero{grid-template-columns:1fr; min-height:auto;}
    /* full width on phones: box matches the image ratio exactly, so nothing is cut */
    .hero-photo{
      height:auto;
      aspect-ratio:1024 / 1536;
      background-size:cover;
      margin-left:0;
    }
    .hero-copy{padding:36px 24px;}
  }

  /* ---------- SECTION: INTRO / FEATURES ---------- */
  .section{padding:88px 0;}
  .section-pad-sm{padding:60px 0;}
  .kicker{color:var(--orange); font-size:0.8rem; letter-spacing:3px; font-weight:700; margin-bottom:6px;}
  .intro-grid{
    display:grid; grid-template-columns: 1fr 1.2fr; gap:64px; align-items:start;
  }
  .intro-grid h2{font-size:clamp(1.9rem,4vw,2.6rem);}
  .intro-grid h2 em{font-style:italic; color:var(--orange); display:block;}
  .intro-grid .brushline{width:60px; height:5px; background:var(--green); border-radius:3px; margin:16px 0 22px;}
  /* Each paragraph becomes its own card. No rules anywhere — the separation
     comes from the cards themselves, which also stops the section reading as
     one continuous block of text. */
  .intro-text{
    display:grid;
    grid-template-columns:1fr;   /* frames need the full measure to fit text */
    gap:18px;
    align-items:start;
    padding:6px 4px;
  }
  /* Section 2 as stickers: rectangular vinyl with a die-cut white ring, each
     slapped on at a slightly different angle and lifted off the page. */
  .intro-text{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;            /* room for the die-cut ring + the tilt */
    align-items:start;
    padding:6px 4px;     /* stops rotated corners clipping */
  }
  .intro-text p{
    margin:0;
    font-size:0.85rem; line-height:1.68; color:#3a362e;
    max-width:none;
    background:#fdfaf5;
    border-radius:5px;
    padding:16px 18px;
    box-shadow:
      0 0 0 7px #fdfaf5,                    /* die-cut white margin */
      0 1px 0 1px rgba(33,31,26,.10),       /* crisp printed edge */
      0 10px 18px -6px rgba(33,31,26,.30);  /* lifted off the wall */
    transition:transform .22s ease, box-shadow .22s ease;
  }
  .intro-text p:nth-of-type(1){transform:rotate(-1.5deg);}
  .intro-text p:nth-of-type(2){transform:rotate(1.2deg);}
  .intro-text p:nth-of-type(3){transform:rotate(-0.7deg);}
  .intro-text p:nth-of-type(4){transform:rotate(0.9deg);}
  /* straighten and peel up slightly on hover */
  .intro-text p:hover{
    transform:rotate(0deg) translateY(-3px);
    box-shadow:
      0 0 0 7px #fdfaf5,
      0 1px 0 1px rgba(33,31,26,.10),
      0 18px 28px -8px rgba(33,31,26,.36);
  }
  /* three body stickers in a 2-up grid leaves a hole, so the third fills the row */
  .intro-text p:nth-of-type(3){grid-column:1 / -1;}
  /* the closing line is the payoff — the one printed in colour */
  .intro-text .intro-punch{
    grid-column:1 / -1;
    font-family:var(--font-title);
    font-size:1.02rem; line-height:1.38; text-transform:uppercase;
    color:var(--cream);
    background:var(--green);
    padding:18px 20px;
    text-wrap:balance;
  }
  @media (prefers-reduced-motion:reduce){
    .intro-text p{transition:none;}
  }
  @media (max-width:900px){
    .intro-text{grid-template-columns:1fr;}
    .intro-text .intro-punch{font-size:0.95rem;}
  }

  .features{display:grid; grid-template-columns:1fr 1fr; gap:28px 40px;}
  .feature{display:flex; gap:16px;}
  .feature .icon{
    flex:none; width:46px; height:46px; border-radius:50%;
    border:2px solid var(--orange); display:flex; align-items:center; justify-content:center;
  }
  .feature:nth-child(even) .icon{border-color:var(--green);}
  .feature .icon svg{width:22px; height:22px; stroke:var(--ink); fill:none;}
  .feature h3{font-family:var(--font-body); font-size:0.82rem; letter-spacing:1px; text-transform:uppercase; font-weight:700; margin-bottom:6px;}
  .feature p{font-size:0.82rem; color:#4a453a;}
  @media (max-width:900px){
    .intro-grid{grid-template-columns:1fr;}
    .features{grid-template-columns:1fr;}
  }

  /* ---------- SECTION: LAYERS (dark) ---------- */
  .layers{
    background:var(--green); color:var(--cream);
    display:grid; grid-template-columns: 1fr 1fr;
  }
  .layers-photo{
    background-image:url('images/hero-painted.jpg');
    background-size:cover; background-position:60% center;
    min-height:420px;
  }
  .layers-copy{padding:70px 56px;}
  .layers-copy h2{color:var(--cream); font-size:clamp(1.8rem,4vw,2.4rem); margin-bottom:18px;}
  /* same accent as the intro heading: "real hike" picked out in orange */
  .layers-copy h2 em{font-style:italic; color:var(--orange);}
  .layers-copy .brushline{width:60px; height:5px; background:var(--orange); border-radius:3px; margin:16px 0 20px;}
  .layers-copy p{font-size:0.9rem; opacity:0.88; max-width:460px; margin-bottom:22px;}
  .layers-list{list-style:none;}
  .layers-list li{
    display:flex; gap:12px; align-items:flex-start;
    font-size:0.88rem; padding:9px 0; border-top:1px solid rgba(242,233,216,0.15);
  }
  .layers-list li:last-child{border-bottom:1px solid rgba(242,233,216,0.15);}
  /* leaf-branch bullet (images/leaf-branch-svgrepo-com.svg), inlined as a mask so
     it can take the orange — the source SVG is hard-coded black, which would
     disappear against this section's dark green */
  .layers-list .arrow{
    flex:none;
    width:18px; height:18px;
    margin-top:3px;                 /* optical align with the first line of text */
    background-color:var(--orange);
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M21,2C15.637,2,11.6,3.517,9.008,6.507c-3.241,3.736-3.171,8.56-3.05,10.121L2.293,20.293a1,1,0,0,0,1.414,1.414l3.724-3.724c2.045-.1,9.949-.739,11.5-4.612A65.031,65.031,0,0,0,21.98,3.2,1,1,0,0,0,21,2ZM17.071,12.629c-.694,1.735-4.262,2.73-7.432,3.146l3.067-3.067,0,0,4-4a1,1,0,1,0-1.414-1.414L13,9.586V9a1,1,0,0,0-2,0v2.586l-3.04,3.04A11.489,11.489,0,0,1,10.53,7.8c2-2.3,5.1-3.563,9.215-3.773A63.686,63.686,0,0,1,17.071,12.629Z'/%3E%3C/svg%3E");
            mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M21,2C15.637,2,11.6,3.517,9.008,6.507c-3.241,3.736-3.171,8.56-3.05,10.121L2.293,20.293a1,1,0,0,0,1.414,1.414l3.724-3.724c2.045-.1,9.949-.739,11.5-4.612A65.031,65.031,0,0,0,21.98,3.2,1,1,0,0,0,21,2ZM17.071,12.629c-.694,1.735-4.262,2.73-7.432,3.146l3.067-3.067,0,0,4-4a1,1,0,1,0-1.414-1.414L13,9.586V9a1,1,0,0,0-2,0v2.586l-3.04,3.04A11.489,11.489,0,0,1,10.53,7.8c2-2.3,5.1-3.563,9.215-3.773A63.686,63.686,0,0,1,17.071,12.629Z'/%3E%3C/svg%3E");
    -webkit-mask-repeat:no-repeat;   mask-repeat:no-repeat;
    -webkit-mask-position:center;    mask-position:center;
    -webkit-mask-size:contain;       mask-size:contain;
  }
  @media (max-width:900px){
    .layers{grid-template-columns:1fr;}
    .layers-copy{padding:48px 24px;}
  }

  /* ---------- SECTION: ROUTE ---------- */
  .route-head{text-align:left; margin-bottom:52px;}
  .route-head h2{font-size:clamp(2rem,4.5vw,2.8rem); color:var(--green);}
  .route-head h2 em{font-style:italic; color:var(--orange); display:block;}
  .route-head .brushline{width:60px; height:5px; background:var(--orange); border-radius:3px; margin:16px 0;}

  .route{position:relative; max-width:820px; margin:0 auto;}
  /* The dotted line lives on a wrapper holding only the stops, so it always
     ends with the last one. Hung off .route it ran the full container height
     and shot past the star at the bottom — 53px past it on a phone. */
  /* padding carries the dotted line on past the last stop and down to the
     star, and gives the final stop room instead of butting against stop 05 */
  .route-stops{position:relative; padding-bottom:64px;}
  .route-stops::before{
    content:''; position:absolute; left:75px; top:12px; bottom:0; width:6px;
    background-image: radial-gradient(circle, var(--ink) 40%, transparent 42%);
    background-size: 6px 12px;
    background-repeat: repeat-y;
    background-position: top center;
    opacity:0.5;
  }
  @media (max-width:640px){ .route-stops::before{left:53px;} }
  .stop{
    display:flex; gap:28px; align-items:flex-start; position:relative;
    padding-bottom:76px;
  }
  .stop:last-of-type{padding-bottom:0;}
  .stop-thumb{
    flex:none; width:156px; height:156px; border-radius:50%; overflow:hidden;
    border:4px solid var(--cream); outline:3px solid var(--orange);
    position:relative; z-index:2;
  }
  .stop-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
  /* three-colour cycle, matching the hook and the hero cards */
  .route-stops .stop:nth-child(3n+1) .stop-thumb{outline-color:var(--orange);}
  .route-stops .stop:nth-child(3n+2) .stop-thumb{outline-color:var(--green);}
  .route-stops .stop:nth-child(3n+3) .stop-thumb{outline-color:var(--gold);}
  @media (max-width:640px){ .stop-thumb{width:112px; height:112px;} }

  .stop-thumb-spacer{ flex:none; width:156px; }
  @media (max-width:640px){ .stop-thumb-spacer{ width:112px; } }

  .graf-scatter{ position:absolute; top:0; right:-4px; bottom:0; width:196px; pointer-events:none; }
  .graf-photo{
    position:absolute; border-radius:50%; overflow:hidden;
    border:4px solid var(--cream); box-shadow:0 3px 8px rgba(0,0,0,0.22); pointer-events:auto;
  }
  .graf-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
  .graf-photo.g2{ width:150px; height:150px; right:70px; top:-30px; transform:rotate(8deg); outline:3px solid var(--green); z-index:1; }
  .graf-photo.g3{ width:138px; height:138px; right:0px; bottom:-28px; transform:rotate(-10deg); outline:3px solid var(--gold); z-index:1; }
  /* the scattered photos take their stop's colour, so each stop reads as one set */
  .route-stops .stop:nth-child(3n+1) .graf-photo{outline-color:var(--orange);}
  .route-stops .stop:nth-child(3n+2) .graf-photo{outline-color:var(--green);}
  .route-stops .stop:nth-child(3n+3) .graf-photo{outline-color:var(--gold);}
  .stop-scatter-alt .graf-photo.g2{ right:0px; top:-34px; transform:rotate(-9deg); }
  .stop-scatter-alt .graf-photo.g3{ right:78px; bottom:-16px; transform:rotate(11deg); }

  /* click a scattered photo to swap it into the big circle for that stop.
     Only filter/outline are animated here — transform carries each photo's
     hand-set rotation, so touching it would make them jump. */
  .graf-photo{ cursor:pointer; transition:filter .18s ease, outline-offset .18s ease; }
  .graf-photo:hover{ filter:brightness(1.06) saturate(1.05); outline-offset:3px; }
  .graf-photo:focus-visible{ outline-offset:4px; filter:brightness(1.06); }
  .graf-photo.just-swapped{ animation:swapflash .5s ease; }
  @keyframes swapflash{ from{ filter:brightness(1.4); } to{ filter:brightness(1); } }
  @media (prefers-reduced-motion:reduce){
    .graf-photo{ transition:none; }
    .graf-photo.just-swapped{ animation:none; }
  }
  .stop-graf .stop-body{ position:relative; }
  @media (min-width:641px){ .stop-graf .stop-body{ padding-right:215px; } }
  @media (max-width:640px){
    .graf-scatter{ position:static; display:flex; gap:10px; margin-top:16px; width:auto; }
    .graf-photo{ position:static; transform:none !important; }
    .graf-photo.g2{ width:100px; height:100px; }
    .graf-photo.g3{ width:94px; height:94px; }
  }
  .stop-body{padding-top:8px;}
  /* This is the stop's title — a real <h3>, in the title face like every other
     heading. It used to be a <div> beside a separate <h3>; that <h3> was
     removed, which left `.stop-body h3` styling nothing at all. */
  .stop-body .num{
    display:block;
    font-family:var(--font-title); font-weight:400;
    font-size:1.35rem; line-height:1.2; letter-spacing:0;
    text-transform:uppercase;
    color:var(--orange); margin-bottom:10px;
  }
  .route-stops .stop:nth-child(3n+1) .stop-body .num{color:var(--orange);}
  .route-stops .stop:nth-child(3n+2) .stop-body .num{color:var(--green);}
  /* gold is too light for small text, so the label uses a darkened amber while
     the photo ring above stays true gold */
  .route-stops .stop:nth-child(3n+3) .stop-body .num{color:var(--gold-ink);}
  .stop-body p{font-size:0.86rem; color:#4a453a; max-width:480px;}

  .final-stop{
    display:flex; align-items:flex-start; gap:24px; position:relative; z-index:2; margin-top:6px;
  }
  .final-badge{
    flex:none; width:70px; height:70px; border-radius:50%; background:var(--gold);
    display:flex; align-items:center; justify-content:center; color:var(--ink);
    font-size:1.6rem;
    /* centre the badge on the dotted line: line centre (78px) - badge radius (35px) */
    margin-left:43px;
  }
  @media (max-width:640px){
    /* mobile line centre is 56px */
    .final-badge{ margin-left:21px; }
  }
  .final-stop h3{font-family:var(--font-title); text-transform:uppercase; color:var(--gold-ink); font-size:1.3rem; margin-bottom:4px;}
  .final-stop p{font-size:0.86rem; color:#4a453a;}

  /* ---------- SECTION: FAQ ---------- */
  .faq-section{background:var(--cream-2);}
  .faq-head{display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; margin-bottom:36px;}
  .faq-head h2{font-size:clamp(1.9rem,4vw,2.6rem); color:var(--green);}
  .faq-head .script{font-size:1.5rem; color:var(--orange);}
  .faq-list{display:flex; flex-direction:column; gap:14px;}
  details{
    background:var(--green); color:var(--cream);
    border-radius:10px; padding:18px 22px; cursor:pointer;
  }
  /* same orange / green / gold cycle as the hook, cards and itinerary */
  details:nth-of-type(3n+1){background:var(--orange); color:#fff;}
  details:nth-of-type(3n+2){background:var(--green);  color:var(--cream);}
  details:nth-of-type(3n+3){background:var(--gold);   color:var(--ink);}
  summary{
    list-style:none; display:flex; justify-content:space-between; align-items:center;
    font-family:var(--font-body); font-weight:700; text-transform:uppercase; font-size:0.85rem; letter-spacing:0.5px;
  }
  summary::-webkit-details-marker{display:none;}
  summary::after{content:'+'; font-size:1.3rem; font-family:var(--font-body); flex:none; margin-left:16px; transition:transform .32s cubic-bezier(.4,0,.2,1);}
  details[open] summary::after{transform:rotate(45deg);}

  /* --- smoothed FAQ open/close (paired with the accordion script at the end) --- */
  summary{user-select:none;}
  /* flow-root keeps the paragraph's top margin inside the wrapper, so the height
     the script measures matches what actually gets shown */
  .faq-content{display:flow-root;}
  /* swing the + back as soon as a close starts, not when it finishes */
  details.is-closing summary::after{transform:rotate(0deg);}
  @media (prefers-reduced-motion:reduce){ summary::after{transition:none;} }
  details p{font-size:0.85rem; margin-top:12px; opacity:0.92; max-width:640px;}

  /* ---------- CTA / FOOTER ---------- */
  .cta-strip{
    background:var(--orange); color:var(--cream); text-align:center; padding:64px 24px;
  }
  .cta-strip h2{font-size:clamp(1.8rem,5vw,2.6rem); margin-bottom:14px;}
  .cta-strip p{max-width:480px; margin:0 auto 26px; font-size:0.9rem; opacity:0.95;}
  .cta-strip .btn{background:var(--green); box-shadow:4px 4px 0 var(--green-2); margin:0 auto;}

  footer{
    background:var(--ink); color:var(--cream); padding:40px 32px; text-align:center; font-size:0.78rem; opacity:0.8;
  }
  footer a{text-decoration:underline;}

  /* ---------- ROUTE MAP ---------- */
  .map-section{padding:72px 0 8px;}
  .map-head{margin-bottom:26px;}
  .map-head h2{font-size:clamp(1.9rem,4vw,2.6rem); color:var(--green);}
  .map-head h2 em{font-style:italic; color:var(--orange); display:block;}
  .map-head .brushline{width:60px; height:5px; background:var(--orange); border-radius:3px; margin:16px 0 0;}
  #route-map{
    height:clamp(340px, 52vh, 560px);
    aspect-ratio:auto;
    /* near-square on a laptop: the route runs roughly north-south, so a wide
       box left big empty margins either side of it */
    max-width:560px; margin:0 auto;
    border-radius:10px;
    border:3px solid var(--ink);
    box-shadow:6px 6px 0 var(--green);
    background:var(--cream-2);
    z-index:0;                 /* keep Leaflet panes under the sticky header */
  }
  /* Aged-parchment treatment. Real map tiles never look hand-drawn, but sepia
     + desaturation + a burnt vignette gets them a long way towards old-atlas.
     The filter sits on the tile pane only, so pins and popups stay full colour. */
  #route-map{position:relative;}
  #route-map .leaflet-tile-pane{
    filter:var(--map-filter);      /* each walk sets its own tint */
  }
  #route-map::after{
    content:''; position:absolute; inset:0; pointer-events:none;
    z-index:400;                     /* above tiles (200), below markers (600) */
    background:var(--map-vignette);
    mix-blend-mode:multiply;
    border-radius:7px;
  }
  .map-note{
    max-width:560px; margin:12px auto 0; text-align:center; font-size:0.72rem; letter-spacing:1px;
    text-transform:uppercase; color:var(--ink); opacity:.55;
  }
  /* numbered pins, reusing the itinerary's colours */
  .pin{
    display:flex; align-items:center; justify-content:center;
    width:30px; height:30px; border-radius:50%;
    background:var(--green); color:var(--cream);
    font-family:var(--font-body); font-weight:700; font-size:0.76rem;
    border:3px solid var(--cream);
    box-shadow:0 2px 6px rgba(33,31,26,.45);
  }
  .pin-start{background:var(--orange);}
  .pin-end{background:var(--gold); color:var(--ink);}
  /* popups in the site's deep green on white */
  .leaflet-popup-content-wrapper{
    background:#fff; color:var(--green);
    border:2px solid var(--green); border-radius:8px;
    box-shadow:4px 4px 0 rgba(28,58,44,.28);
  }
  .leaflet-popup-content{margin:12px 14px; font-family:var(--font-body);}
  .leaflet-popup-content b{
    display:block; font-family:var(--font-title); font-weight:400;
    text-transform:uppercase; font-size:0.92rem; letter-spacing:0;
    color:var(--green); margin-bottom:5px;
  }
  .leaflet-popup-content span{font-size:0.78rem; line-height:1.55; color:#3a362e;}
  .leaflet-popup-tip{background:#fff; border:2px solid var(--green); box-shadow:none;}
  .leaflet-container a.leaflet-popup-close-button{color:var(--green);}
  .leaflet-control-attribution{font-size:0.62rem; background:rgba(255,255,255,.82);}

/* ---------- "MORE WALKS" MENU ---------------------------------------------
   One entry per walk. Adding a third is a new <li> in each page's header —
   nothing here needs to change. */
.walks{position:relative;}
.walks-btn{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-body); font-weight:700;
  font-size:0.72rem; letter-spacing:1px; text-transform:uppercase;
  color:var(--green); background:transparent;
  border:2px solid var(--green); border-radius:999px;
  padding:9px 15px; cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.walks-btn:hover, .walks-btn[aria-expanded="true"]{background:var(--green); color:var(--cream);}
.walks-btn .chev{transition:transform .22s ease;}
.walks-btn[aria-expanded="true"] .chev{transform:rotate(180deg);}
.walks-menu{
  position:absolute; top:calc(100% + 10px); right:0; z-index:60;
  min-width:230px; list-style:none; margin:0; padding:6px;
  background:var(--cream); border:2px solid var(--green); border-radius:10px;
  box-shadow:5px 5px 0 rgba(19,32,44,.20);
}
.walks-menu[hidden]{display:none;}
.walks-menu a{
  display:block; padding:9px 12px; border-radius:6px; text-decoration:none;
  font-family:var(--font-body); font-size:0.8rem; color:var(--ink);
}
.walks-menu a small{
  display:block; font-size:0.62rem; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--orange); margin-top:2px;
}
.walks-menu a:hover, .walks-menu a:focus-visible{background:var(--cream-2);}
.walks-menu a[aria-current="page"]{background:var(--green); color:var(--cream);}
.walks-menu a[aria-current="page"] small{color:var(--cream); opacity:.75;}
@media (max-width:720px){
  .walks-btn{padding:8px 12px; font-size:0.66rem;}
  .walks-menu{min-width:200px;}
}