/* ==========================================================================
   THE TRAIL MAP: layout only. Brand colors, type, the page header,
   and pills come from core/atlas.css. Like the Wheel page, everything is
   left-aligned, reading text stops at about 44rem, and Squarespace's own
   margins frame the page on wider screens.

   How the page is put together:
     - The trail is a vertical line with numbered markers. Every stop and
       place sits on it, so the reader can always tell where they are.
     - Three places sit on the line: the Trailhead, the Lodge, and the
       Bulletin Board. Each is a colored sign over a light board, set by
       one --place color (see "Places"). The Field Guide sits between the
       last two: something the reader receives, not a place, so it looks
       like a booklet with a dashed edge.
     - Stops open and close (details/summary). A marker fills in while its
       stop is open. Rest stops have round markers.
     - Every kind of content has a word label and an icon, so color is
       never the only signal.
   ========================================================================== */

:root {
    --park: var(--green-color);        /* the park's own green: the Trailhead */
    --park-tint: var(--green-tint-1);
    /* The reader's trail. Green until a trail is picked; then trail.js
       sets all four from the picked color (core/atlas.css tokens). */
    --trail: var(--green-color);       /* the trail line and its stops */
    --trail-text: var(--green-text);   /* the trail's color, as readable text */
    --trail-tint: var(--green-tint-1);
    --trail-on: #fff;                  /* text on the trail's color */
    --lodge: #0F7393;                  /* the Lodge: 4.5:1 or better on white */
    --lodge-tint: #E1F1F7;
    --board: #4A3422;                  /* the Bulletin Board: wood brown */
    --board-tint: #F5EEE6;
    --note: #7A5C22;                   /* rest stop questions and notes */
    --note-tint: #F6EFE1;
    --rule: var(--border-color);
    --display: 'ADLaM Display', 'Varela Round', sans-serif;
    --read: 44rem;                     /* longest line of reading text */
}


/* ==========================================================================
   Page frame and header
   ========================================================================== */

.trail-page {
    padding-bottom: 3rem;
    font-size: 1.05rem;
    line-height: 1.55;
}

/* Even line breaks: no single word left alone on a last line, and
   headings that wrap in balanced lines. */
.trail-page p,
.trail-page li,
.page-header p,
.odesc,
.sum-line,
dd {
    text-wrap: pretty;
}

.trail-page h2,
.trail-page h3,
.place-title,
.room-title {
    text-wrap: balance;
}

.lede,
.pace {
    max-width: var(--read);
}

.todo {
    max-width: var(--read);
}

/* core/atlas.css sets .page-header p in the quieter secondary color; the
   lede and the "what you'll do" list are the page's opening words, so
   they read in the main color. */
.page-header .lede {
    color: var(--text-primary);
    font-size: 1.05rem;
    margin: 0 0 0.75rem;
}

.todo {
    margin: 0 0 0.75rem;
}

.page-header .todo p {
    color: var(--text-primary);
    font-weight: 700;
    margin: 0;
}

/* The map's key on the Trailhead's board: the five places as a route
   strip, each icon in its place's color, the name on its own line and
   a few words below. */
.route {
    list-style: none;
    margin: 0.3rem 0 0.6rem;
    padding: 0.8rem;
    background: var(--bg-primary);
    border-radius: 10px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.8rem;
}

.route li {
    display: flex;
}

/* Each place in the key is a button that takes you there. */
.route-btn {
    flex: 1;
    display: grid;
    gap: 0.35rem;
    align-content: start;
    min-height: 44px;
    padding: 0.4rem;
    border: 2px solid transparent;
    border-radius: 8px;
    background: transparent;
    font: inherit;
    font-size: 0.92rem;
    line-height: 1.35;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
}

.route-btn:hover {
    background: var(--park-tint);
}

.route-btn:focus-visible {
    outline: 3px solid var(--lodge);
    outline-offset: 2px;
}

/* The place you're at shows on the map only; here, screen readers hear
   "current location" from aria-current. */

.route-name {
    display: block;
}

.route-text {
    display: block;
    color: var(--text-secondary);
}

.route-icon {
    width: 2.4rem;
    height: 2.4rem;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--route, var(--trail));
    color: #fff;
}

.route-icon svg {
    width: 1.4rem;
    height: 1.4rem;
}

.route-trailhead { --route: var(--park); }
.route-lodge    { --route: var(--lodge); }

/* The trail's own icon takes the reader's trail color once one is picked. */
.route-trail .route-icon {
    color: var(--trail-on);
}
.route-bulletin { --route: var(--board); }
.route-guide    { --route: var(--note); }

/* The Field Guide is received, not a place: a dashed outline. */
.route-guide .route-icon {
    background: var(--note-tint);
    color: var(--note);
    border: 2px dashed var(--note);
}

.page-header .todo p:not(.sub) {
    color: var(--text-primary);
    font-weight: 400;
    margin: 0.35rem 0 0;
    max-width: var(--read);
}

.page-header .pace p {
    margin: 0 0 0.5rem;
}

.pace .pill-btn {
    padding: 0.4rem 0.95rem;
    font-size: 0.95rem;
}

.test-note {
    font-size: 0.85rem;
    color: var(--text-secondary);
    border: 1px dashed var(--border-strong);
    border-radius: 10px;
    padding: 0.5rem 0.8rem;
    margin: 0 0 1rem;
    max-width: var(--read);
}

/* A small trail drawing beside the title: stops, a rest stop, a lodge pin.
   It wraps under the title on narrow screens. */
.page-header h1 {
    flex-wrap: wrap;
    column-gap: 1rem;
    row-gap: 0.25rem;
}

.mini-trail {
    width: 8.5rem;
    height: auto;
    flex: none;
}


/* ==========================================================================
   The trail line and its markers
   ========================================================================== */

.line {
    list-style: none;
    margin: 0;
    padding: 0;
}

.stop {
    position: relative;
    padding-left: 3.4rem;
    display: flow-root;           /* keeps the line unbroken past inner margins */
}

/* The trail itself: a solid green line down the left. */
.stop::before {
    content: "";
    position: absolute;
    left: 1.1rem;
    top: 0;
    bottom: 0;
    width: 5px;
    background: var(--trail);
}

/* Numbered markers: outlined at rest, filled while open. */
.marker {
    position: absolute;
    z-index: 1;
    left: 0.35rem;
    top: 0.5rem;
    width: 2rem;
    height: 2.5rem;
    display: grid;
    place-items: center;
    border: 4px solid var(--trail);
    border-radius: 5px;
    background: var(--bg-primary);
    color: var(--trail-text);
    font-weight: 700;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
}

.stop.is-open > .marker {
    background: var(--trail);
    color: var(--trail-on);
}

/* Rest and Reflect: the same colors, a round marker. */
.stop.rest > .marker {
    border-radius: 50%;
    width: 2.3rem;
    height: 2.3rem;
    left: 0.2rem;
    top: 0.6rem;
}


/* ==========================================================================
   A stop: the title alone while closed, everything else inside
   ========================================================================== */

details {
    border-bottom: 1px solid var(--rule);
}

summary {
    list-style: none;
    cursor: pointer;
    display: block;
    padding: 0.75rem 0;
}

/* The title, then Open / Close right after its last word, so the link
   never sits alone on a line of its own. */
.sum {
    display: block;
}

.sum h3 {
    display: inline;
}

.sum .toggle {
    margin-left: 0.75rem;
}

summary::-webkit-details-marker {
    display: none;
}

summary h3 {
    font-family: var(--display);
    font-weight: 500;
    font-size: 1.3rem;
    line-height: 1.25;
    margin: 0;
}

/* A short line under a part's title, so a closed part still says what's
   inside. */
.sum-line {
    display: block;
    font-size: 0.92rem;
    color: var(--text-secondary);
    margin-top: 0.15rem;
}

/* Open / Close: linked text right after the title. */
.toggle {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--lodge);
    white-space: nowrap;
    text-decoration: underline;
    text-underline-offset: 3px;
}

summary:hover .toggle {
    text-decoration-thickness: 2px;
}

details[open] .open-label,
details:not([open]) .close-label {
    display: none;
}

.body {
    min-width: 0;
    padding-bottom: 1.1rem;
}

.body p {
    margin: 0 0 0.8rem;
    max-width: var(--read);
}

a {
    color: var(--lodge);
    font-weight: 700;
    text-underline-offset: 2px;
}

a:focus-visible,
summary:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--lodge);
    outline-offset: 2px;
}


/* ==========================================================================
   Pickers: the trail picker on the Trailhead's board, and the exhibit
   picker in the Lodge. Each sits on a white panel.
   ========================================================================== */

.pick-body {
    background: var(--bg-primary);
    border-radius: 10px;
    padding: 0.9rem 1rem 1rem;
    margin: 0.9rem 0 0.3rem;
}

.board-h {
    font-family: var(--display);
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 1.2;
    margin: 0.9rem 0 0.3rem;
}

.pick-body .board-h {
    margin-top: 0;
}

.step-hint {
    color: var(--text-secondary);
    margin: 0 0 0.7rem;
    max-width: var(--read);
}

.options {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.15rem;
}

.opt {
    font: inherit;
    color: var(--text-primary);
    text-align: left;
    width: 100%;
    cursor: pointer;
    background: none;
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 0.6rem 0.7rem;
    display: grid;
    grid-template-columns: 1.1rem 1fr;
    gap: 0.9rem;
    align-items: start;
}

.opt:hover {
    background: var(--bg-secondary);
}

.opt[aria-pressed="true"] {
    background: var(--trail-tint);
    border-color: var(--trail);
}

.blaze {
    width: 1.1rem;
    height: 1.6rem;
    border-radius: 3px;
    margin-top: 0.15rem;
}

.oname {
    display: block;
    font-weight: 700;
    font-size: 1.05rem;
}

.tcolor {
    font-weight: 400;
    color: var(--text-secondary);
}

.odesc {
    font-size: 0.92rem;
    line-height: 1.4;
    color: var(--text-secondary);
}

/* The exhibit picker: the same rows, each with its topic icon, three
   across on wider screens. */
.exhibits {
    background: var(--bg-primary);
    border-radius: 10px;
    padding: 0.4rem;
}

.exhibits .opt {
    grid-template-columns: 1.4rem 1fr;
    gap: 0.7rem;
}

.exhibits .opt[aria-pressed="true"] {
    background: var(--lodge-tint);
    border-color: var(--lodge);
}

/* Each exhibit's topic icon, sized to sit beside its name. */
.opt-icon {
    display: grid;
    place-items: center;
    color: var(--lodge);
    margin-top: 0.1rem;
}

.opt-icon svg {
    width: 1.4rem;
    height: 1.4rem;
}

@media (min-width: 700px) {
    .exhibits {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* "Your trail": a tag on the picked row, with a check. */
.your-tag {
    display: none;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.6rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--trail-text);
    vertical-align: 0.1rem;
}

.your-tag svg {
    width: 0.95rem;
    height: 0.95rem;
}

.opt[aria-pressed="true"] .your-tag {
    display: inline-flex;
}

/* The "still being built" note. */
.not-built {
    margin: 0 0 0.6rem;
}

#trailBox,
#exhibitOpen,
.place,
.is-guide {
    scroll-margin-top: 1rem;
}


/* ==========================================================================
   Places: the Trailhead, the Lodge, and the Bulletin Board. Each is a
   colored sign over a light board. One --place color sets each one.
   ========================================================================== */

.place.is-trailhead { --place: var(--park);    --place-tint: var(--park-tint); }
.place.is-lodge     { --place: var(--lodge);   --place-tint: var(--lodge-tint); }
.place.is-board     { --place: var(--board);   --place-tint: var(--board-tint); }

/* Past the trail, the line takes the color of the place you're in:
   the trail's own color runs only from the Trailhead to the Lodge. */
.place::before { background: var(--place); }
.stop.is-guide::before { background: var(--note); }

.place > .marker {
    border-color: var(--place);
    background: var(--place);
    color: #fff;
    top: 0.9rem;
}

.place > .marker svg {
    width: 1.2rem;
    height: 1.2rem;
}

.place-sign {
    margin-top: 0.6rem;
    border-radius: 12px 12px 0 0;
    background: var(--place);
    color: #fff;
    display: grid;
    grid-template-columns: 1fr auto;
}

.place-sign .text {
    padding: 0.9rem 1.1rem;
    min-width: 0;
}

.place-sign p {
    margin: 0;
}

.place-eyebrow {
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.9;
}

.place-title {
    font-family: var(--display);
    font-size: clamp(2rem, 7vw, 2.6rem);
    line-height: 1.05;
    margin: 0.15rem 0 0.2rem !important;
}

.place-line {
    font-weight: 700;
    margin-top: 0.4rem !important;
}

.place-icon {
    width: 3rem;
    height: 3rem;
    margin: 0 1.1rem;
    align-self: center;
    color: #fff;
}

.place-board {
    border: 2px solid var(--place);
    border-top: none;
    border-radius: 0 0 12px 12px;
    background: var(--place-tint);
    padding: 0.9rem 1.1rem 0.8rem;
    margin-bottom: 0.6rem;
}

.place-board > p,
.place-board > h2 {
    max-width: var(--read);
}

.place-board h2 {
    font-family: var(--display);
    font-weight: 500;
    font-size: 1.4rem;
    margin: 0 0 0.4rem;
}

/* The Trailhead: the line starts below its marker. */
.place.is-trailhead {
    padding-bottom: 0.4rem;
}

.place.is-trailhead::before {
    top: 3rem;
    background: var(--park);
}

/* The Bulletin Board ends the trail: the line arrives from above and
   stops at its marker. */
.place.is-board::before {
    bottom: auto;
    height: 1.4rem;
}


/* ==========================================================================
   The open exhibit: a room in the Lodge, with its own sign, a one-line
   promise, then its parts on a white panel
   ========================================================================== */

.exhibit-open {
    margin-top: 1.2rem;
}

.room-sign {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.2rem 0.9rem;
    background: var(--lodge);
    color: #fff;
    border-radius: 12px 12px 0 0;
    padding: 0.8rem 1rem;
}

.room-sign p {
    margin: 0;
}

.room-title {
    font-family: var(--display);
    font-size: clamp(1.7rem, 6vw, 2.1rem);
    line-height: 1.1;
}

.room-sign .place-icon {
    margin: 0;
    width: 2.6rem;
    height: 2.6rem;
}

.room-body {
    border: 2px solid var(--lodge);
    border-top: none;
    border-radius: 0 0 12px 12px;
    background: var(--bg-primary);
    padding: 0.8rem 1rem 0.2rem;
}

.room-body > p {
    max-width: var(--read);
}

.promise {
    font-weight: 700;
    font-size: 1.05rem;
}

/* An exhibit's parts already sit on white, so the panel needs no edge. */
.room-body .rooms {
    padding: 0;
}

/* ==========================================================================
   The park map: a picture of the trail, above its key (the route strip).
   Wide on computers, tall on phones. Colors come from the same tokens as
   the page, so the trail turns your trail's color.
   ========================================================================== */

.park-map {
    --map-trailhead: var(--park);
    --map-lodge: var(--lodge);
    --map-bulletin: var(--board);
    margin: 0.4rem 0 0.2rem;
}

.park-map svg {
    display: block;
    width: 100%;
    height: auto;
    background: #F3F8EE;
    border: 1px solid var(--green-tint-2);
    border-radius: 10px;
}

.park-map .map-tall { display: none; }

.map-name {
    font: 700 14px 'Varela Round', sans-serif;
    fill: var(--text-primary);
    stroke: #F3F8EE;
    stroke-width: 4px;
    paint-order: stroke;
}

.map-num { font: 700 14px 'Varela Round', sans-serif; }
.map-here { font: 700 13px 'Varela Round', sans-serif; fill: #fff; }
.map-n { font: 700 13px 'Varela Round', sans-serif; fill: var(--text-secondary); }
.map-lake { fill: #CFE7F0; stroke: #8FC1D4; stroke-width: 1.5px; }
.map-lake-name { font: italic 13px 'Varela Round', sans-serif; fill: #3D6F82; }
.map-north { fill: #fff; stroke: var(--text-secondary); stroke-width: 1.5px; }

@media (max-width: 560px) {
    .park-map .map-wide { display: none; }
    .park-map .map-tall { display: block; max-width: 26rem; margin: 0 auto; }
}

/* ==========================================================================
   The Field Guide: something received, not a place. A booklet with a
   dashed edge: a cover, then its parts on a white panel.
   ========================================================================== */

/* It comes after the Bulletin Board, off the trail line: no line, no
   marker, just the booklet you take with you. */
.stop.is-guide.off-trail::before {
    display: none;
}

.is-guide > .marker {
    border-style: dashed;
    border-color: var(--note);
    color: var(--note);
    top: 0.9rem;
}

.is-guide > .marker svg {
    width: 1.2rem;
    height: 1.2rem;
}

.guide-card {
    margin: 0.6rem 0;
    border: 2px dashed var(--note);
    border-radius: 12px;
    background: var(--note-tint);
}

.guide-cover {
    display: grid;
    grid-template-columns: 1fr auto;
    padding: 0.9rem 1.1rem 0.4rem;
    color: var(--note);
}

.guide-cover p {
    margin: 0;
}

.guide-cover .place-title {
    color: var(--text-primary);
}

.guide-cover .place-icon {
    color: var(--note);
}

.guide-for {
    color: var(--text-primary);
    font-weight: 700;
    margin-top: 0.6rem !important;
}

.guide-ex-icon {
    width: 1.1rem;
    height: 1.1rem;
    margin-right: 0.45rem;
    vertical-align: -0.2rem;
    color: var(--lodge);
}

.guide-for + .guide-for {
    margin-top: 0.15rem !important;
}

.guide-for .blaze {
    display: inline-block;
    width: 0.75rem;
    height: 1.1rem;
    margin: 0 0.45rem 0 0;
    vertical-align: -0.2rem;
}

.guide-cover .place-line {
    color: var(--text-primary);
    font-weight: 400;
}

.guide-use {
    color: var(--text-primary);
    max-width: var(--read);
    margin-top: 0.5rem !important;
}

.guide-cover .print-row {
    margin: 0.7rem 0 0.5rem;
}

.guide-cover .print-row .reach {
    color: var(--text-secondary);
}

.guide-body {
    padding: 0.4rem 1.1rem 0.6rem;
}

.guide-body > p {
    max-width: var(--read);
}

.print-row {
    margin: 0.6rem 0 0.4rem;
}

.print-row .reach {
    display: block;
    margin-top: 0.35rem;
}

/* "Learn other ways to help": all six, the reader's own marked in words. */
.ways-list {
    list-style: none;
    margin: 0.2rem 0 0.8rem;
    padding: 0;
    display: grid;
    gap: 0.5rem;
    max-width: var(--read);
}

.ways-list li {
    display: grid;
    grid-template-columns: 1.1rem 1fr;
    gap: 0.8rem;
    align-items: start;
    padding: 0.3rem 0.5rem;
    border-radius: 8px;
}

.ways-list li.mine {
    background: var(--trail-tint);
}

.ways-list .odesc {
    display: block;
}

.yours {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--trail-text);
}


/* ==========================================================================
   Parts on a white panel: an exhibit's parts, the Field Guide's, and the
   Bulletin Board's. No numbers; their titles tell them apart.
   ========================================================================== */

.rooms {
    list-style: none;
    margin: 0.2rem 0 0.8rem;
    padding: 0 1rem;
    background: var(--bg-primary);
    border-radius: 10px;
}

.stop.room {
    padding-left: 0;
}

.stop.room::before {
    display: none;
}

.rooms > .stop:last-child details {
    border-bottom: none;
}


/* ==========================================================================
   Content inside a stop
   ========================================================================== */

/* The kind label at the top of a stop (Trail sign, Rest stop, ...), and
   the smaller tag on an activity inside it (Hidden find, Stretch, Quote). */
.exhibit {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    padding: 0.2rem 0.7rem 0.2rem 0.45rem;
}

.exhibit svg {
    width: 1.1rem;
    height: 1.1rem;
}

.exhibit.tag {
    font-size: 0.72rem;
    margin: 0 0 0.5rem;
}

.sub {
    font-weight: 700;
    margin: 1rem 0 0.25rem !important;
}

.cite {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* The saved copy beside a source: smaller and quieter than the source. */
.archived {
    font-size: 0.85em;
    white-space: nowrap;
}

a.ext svg {
    width: 0.95rem;
    height: 0.95rem;
    vertical-align: -0.1rem;
    margin-left: 0.2rem;
}

ul.plain {
    margin: 0 0 0.8rem;
    padding-left: 1.2rem;
    max-width: var(--read);
}

ul.plain li {
    margin-bottom: 0.45rem;
}

/* Action words and other short definitions: the word, then what it means. */
.actions,
.defs {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    gap: 0.5rem 0.9rem;
    margin: 0 0 0.8rem;
    max-width: var(--read);
}

.actions dt,
.defs dt {
    font-weight: 700;
    color: var(--trail-text);
}

.actions dd,
.defs dd {
    margin: 0;
}

.actions .eg {
    display: block;
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.quote {
    margin: 0.4rem 0 1rem;
    padding: 0.2rem 0 0.2rem 1rem;
    border-left: 4px solid var(--trail);
    max-width: var(--read);
}

.quote blockquote {
    margin: 0 0 0.3rem;
    font-family: var(--display);
    font-size: 1.2rem;
    line-height: 1.35;
}

.quote figcaption {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* Explore and Say labels, each with a round badge. */
.lab {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 700;
    margin: 1rem 0 0.35rem !important;
}

.badge {
    flex: none;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--bg-secondary);
    border: 2px solid var(--text-primary);
}

.badge svg {
    width: 1.15rem;
    height: 1.15rem;
}

/* Directions: a checkbox, then a sentence that starts with a bold verb. */
.check {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    padding: 0.25rem 0;
    max-width: var(--read);
}

.check input {
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.3rem;
    accent-color: var(--lodge);
}

.reach {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--text-secondary);
}

.rdesc {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.say {
    margin: 0 0 0.8rem;
    padding-left: 1.2rem;
}

.say li {
    margin-bottom: 0.4rem;
}

.say q {
    font-style: italic;
}

/* Rest and Reflect: questions in a shaded box, then a notes box. */
.reflect {
    background: var(--note-tint);
    border-radius: 10px;
    padding: 0.7rem 1rem;
    margin: 0.6rem 0 0.8rem;
    max-width: var(--read);
}

.reflect ul {
    margin: 0;
    padding-left: 1.2rem;
}

.reflect .sub {
    color: var(--note);
    margin-top: 0 !important;
}

.notes {
    margin: 0.4rem 0 0.6rem;
    max-width: var(--read);
}

.notes .sub {
    display: block;
}

.note {
    width: 100%;
    font: inherit;
    font-size: 1rem;
    color: var(--text-primary);
    background: #fff;
    padding: 0.6rem 0.7rem;
    border: 1px solid color-mix(in srgb, var(--note) 45%, white);
    border-radius: 10px;
    resize: vertical;
}

.note:focus-visible {
    outline-color: var(--note);
}

.note-help {
    font-size: 0.88rem;
    color: var(--text-secondary);
    margin: 0.35rem 0 0.2rem !important;
}

/* Hidden find: guess first, then reveal. */
.find {
    border: 2px dashed var(--border-strong);
    border-radius: 12px;
    padding: 0.8rem 1rem;
    margin: 0.6rem 0 0.9rem;
    max-width: var(--read);
}

.find-prompt {
    font-weight: 700;
}

.find-reveal {
    margin-top: 0.7rem;
}

/* Stretch: a short activity, with a version that needs no movement. */
.stretch {
    border-left: 4px solid var(--text-primary);
    padding: 0.2rem 0 0.2rem 1rem;
    margin: 0.6rem 0 0.9rem;
    max-width: var(--read);
}

.stretch ol {
    margin: 0 0 0.5rem;
    padding-left: 1.3rem;
}

.stretch-note {
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0.3rem 0 0.4rem;
}

.pills .pill-btn,
.find .pill-btn,
.next-btn {
    padding: 0.4rem 0.95rem;
    font-size: 0.95rem;
}

/* "Next stop" / "Next" at the end of each stop and part. */
.ahead {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    color: var(--text-secondary);
    border-top: 1px dashed var(--border-strong);
    padding-top: 0.7rem;
    margin-top: 1rem !important;
}

.ahead svg {
    flex: none;
    width: 1.2rem;
    height: 1.2rem;
    margin-top: 0.2rem;
    color: var(--text-primary);
}

.ahead b {
    color: var(--text-primary);
}


/* ==========================================================================
   The Trailhead's key: the two kinds of stop (the places are in the route
   strip at the top)
   ========================================================================== */

.legend {
    list-style: none;
    margin: 0.3rem 0 0.8rem;
    padding: 0.8rem;
    background: var(--bg-primary);
    border-radius: 10px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem 1.2rem;
}

.legend li {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
}

/* Each label on its own line, with its words below. */
.legend b {
    display: block;
}

.mark {
    flex: none;
    width: 2.2rem;
    height: 2.2rem;
    margin-top: 0.1rem;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 0.75rem;
}

.mark svg {
    width: 2rem;
    height: 2rem;
}

.mark-stop,
.mark-rest {
    border: 3px solid var(--park);
    color: var(--park);
}

.mark-stop {
    width: 1.5rem;
    height: 1.8rem;
    border-radius: 5px;
    margin: 0.2rem 0.35rem 0;
}

.mark-rest {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    margin: 0.2rem 0.22rem 0;
}


.open-all {
    margin: 0.6rem 0 0.2rem;
}

.story {
    padding-top: 0.4rem;
}

/* Small "read more" and "save your spot" openers. */
.mini {
    border: none;
    margin-top: 0.3rem;
}

.mini > summary {
    display: inline-flex;
    padding: 0.2rem 0;
    font-weight: 700;
    color: var(--lodge);
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* ==========================================================================
   The Bulletin Board: a recap, work close to home, and three signs
   ========================================================================== */

.recap {
    background: var(--bg-primary);
    border: 1px solid var(--rule);
    border-radius: 12px;
    padding: 0.8rem 1rem;
    margin: 0.6rem 0 0.9rem;
}

.recap p {
    margin: 0;
    max-width: var(--read);
}

.recap-title {
    font-weight: 700;
    margin-bottom: 0.2rem !important;
}

.ways {
    list-style: none;
    margin: 0 0 0.8rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
}

/* Each choice is a sign: "Back to..." in brown, "Onward" in green. */
.way {
    font: inherit;
    text-align: left;
    width: 100%;
    height: 100%;
    cursor: pointer;
    color: var(--text-primary);
    background: var(--bg-primary);
    border: 2px solid var(--board);
    border-radius: 12px;
    padding: 0.7rem 0.9rem 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.way:hover {
    background: var(--board-tint);
}

.way b {
    font-size: 1.05rem;
}

.way > span:last-child {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.way svg {
    width: 1.6rem;
    height: 1.6rem;
    margin-bottom: 0.2rem;
    color: var(--board);
}

.dir {
    align-self: flex-start;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    background: var(--board);
    border-radius: 4px;
    padding: 0.15rem 0.5rem;
    margin-bottom: 0.3rem;
}

.way.on {
    border-color: var(--trail);
}

.way.on:hover {
    background: var(--trail-tint);
}

.way.on .dir {
    background: var(--trail);
    color: var(--trail-on);
}

.way.on svg {
    color: var(--trail-text);
}

.keep {
    background: var(--bg-primary);
    border-radius: 12px;
    padding: 0.9rem 1rem;
    margin-top: 0.4rem;
}

.keep p {
    max-width: var(--read);
}

.keep p:first-child {
    margin-top: 0;
}

/* Save your spot: a link to copy, for coming back later. */
.save {
    margin-top: 0.4rem;
}

.keep .save {
    border-top: 1px dashed var(--border-strong);
    padding-top: 0.6rem;
    margin: 0.6rem 0;
}

.save-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.save-link {
    flex: 1 1 14rem;
    min-width: 0;
    font: inherit;
    font-size: 0.85rem;
    color: var(--text-secondary);
    background: var(--bg-primary);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    padding: 0.35rem 0.6rem;
}

/* A button that reads as a link ("Clear my notes"). */
.linkish {
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--lodge);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.footnote {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rule);
    font-size: 0.85rem;
    color: var(--text-secondary);
    max-width: var(--read);
}


/* ==========================================================================
   Phones: give the boxes room and stack the signs
   ========================================================================== */

@media (max-width: 560px) {
    /* Every stop and place uses the same line position, so the trail runs
       straight from top to bottom with no jogs. */
    .stop {
        padding-left: 2.7rem;
    }

    .stop::before {
        left: 0.8rem;
    }

    .marker {
        left: 0.05rem;
        width: 1.9rem;
    }

    .stop.rest > .marker {
        left: -0.05rem;
        width: 2.1rem;
        height: 2.1rem;
    }

    .place-board {
        padding: 0.8rem 0.65rem 0.6rem;
    }

    .place-icon {
        display: none;
    }

    .place-sign,
    .guide-cover {
        grid-template-columns: 1fr;
    }

    .pick-body,
    .guide-cover,
    .guide-body {
        padding-left: 0.7rem;
        padding-right: 0.7rem;
    }

    .rooms {
        padding: 0 0.7rem;
    }

    .legend,
    .ways,
    .route {
        grid-template-columns: 1fr;
    }

    .route {
        gap: 0.45rem;
    }

    .route-btn {
        grid-template-columns: 2.4rem 1fr;
        align-items: center;
        gap: 0.7rem;
    }

    .room-sign {
        grid-template-columns: 1fr;
        padding: 0.7rem 0.7rem;
    }

    .room-body {
        padding: 0.7rem 0.7rem 0.2rem;
    }

    .actions,
    .defs {
        grid-template-columns: 1fr;
        gap: 0.1rem;
    }

    .actions dd,
    .defs dd {
        margin-bottom: 0.5rem;
    }

    .reflect ul {
        padding-left: 1rem;
    }

    .ahead {
        display: block;
    }

    .ahead svg {
        display: none;
    }
}


/* ==========================================================================
   October 17 redesign: more breathing room, one continuous path, cards
   ==========================================================================
   Reader feedback asked for less reading up front, clearer sections, and
   more space. Everything stays on one trail line: places are colored
   markers on it, stops are cards beside it, and the line changes color
   at each place. Leaving the Lodge, the line turns into a dotted path
   out to the Bulletin Board.
   ========================================================================== */

.trail-page {
    font-size: 1.0625rem;
    line-height: 1.6;
}

/* The header: one line on the journey, a button to the trail picker, and
   the promise that the trail is open to everyone. */
.page-header .intro {
    color: var(--text-primary);
    font-size: 1.1rem;
    line-height: 1.55;
    margin: 0 0 1.1rem;
}

.pace {
    margin-top: 1.4rem;
}

.pace[hidden] {
    display: none;
}

/* Places: a colored marker on the line and a plain heading beside it. No
   colored banners or tinted boards, so the path reads as one trail. */
.place-sign {
    margin-top: 0.35rem;
    background: none;
    color: var(--text-primary);
    border-radius: 0;
    display: block;
}

.place-sign .text {
    padding: 0 0 0.4rem;
}

.place-eyebrow {
    text-transform: none;
    letter-spacing: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--place);
    opacity: 1;
}

.place-title {
    font-size: clamp(1.8rem, 6vw, 2.2rem);
}

.place-sign .place-sub {
    color: var(--text-secondary);
}

.place-sign .place-icon {
    display: none;
}

.place-board {
    border: none;
    background: none;
    border-radius: 0;
    padding: 0.4rem 0 0;
    margin-bottom: 2.2rem;
}

.place > .marker {
    top: 0.25rem;
    width: 2.6rem;
    height: 2.6rem;
    left: 0.05rem;
    border-radius: 9px;
}

.place > .marker svg {
    width: 1.4rem;
    height: 1.4rem;
}

/* The top of the trail: the trail's own marker and name. */
.place.is-trail {
    --place: var(--trail);
    padding-bottom: 1.2rem;
}

.place.is-trail > .marker {
    color: var(--trail-on);
}

/* Stops and parts: cards beside the line, with room between them. */
.stop.trail,
.stop.room {
    padding-bottom: 1rem;
}

.stop.trail > details,
.stop.room > details {
    border: 2px solid var(--rule);
    border-radius: 14px;
    background: var(--bg-primary);
}

.stop.trail.is-open > details,
.stop.room.is-open > details {
    border-color: var(--trail);
}

.stop.room.is-open > details {
    border-color: var(--lodge);
}

.stop.trail > details > summary,
.stop.room > details > summary {
    min-height: 64px;
    box-sizing: border-box;
    padding: 1rem 1.1rem;
}

.stop.trail.is-open > details > summary {
    background: var(--trail-tint);
    border-radius: 12px 12px 0 0;
}

.stop.trail .body,
.stop.room .body {
    padding: 0.4rem 1.1rem 1.3rem;
}

.stop.trail > .marker {
    top: 0.9rem;
}

.stop.trail.rest > .marker {
    top: 1rem;
}

.rooms > .stop:last-child details {
    border-bottom: 2px solid var(--rule);
}

.rooms > .stop.is-open:last-child details {
    border-color: var(--lodge);
}

.body p,
.reflect,
.find,
.stretch {
    margin-bottom: 1.1rem;
}

.pick-body {
    background: none;
    padding: 0;
    margin-top: 2rem;
}

/* The exhibit picker: a card for each topic, with a check once visited. */
.exhibits {
    background: none;
    padding: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.exhibits .opt {
    height: 100%;
    grid-template-columns: 1fr;
    gap: 0.35rem;
    padding: 0.9rem;
    border: 2px solid #B9DCE8;
    border-radius: 14px;
    background: var(--bg-primary);
}

.exhibits .opt[aria-pressed="true"] {
    border: 3px solid var(--lodge);
    background: var(--lodge-tint);
}

.exhibits .oname {
    color: var(--lodge);
    hyphens: auto;
    overflow-wrap: break-word;
}

@media (max-width: 400px) {
    .exhibits .oname {
        font-size: 0.98rem;
    }
}

.exhibits .opt-icon {
    justify-items: start;
}

.visited {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.4rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: #0A5068;
}

.visited svg {
    width: 1.15rem;
    height: 1.15rem;
    padding: 0.15rem;
    border-radius: 50%;
    background: var(--lodge);
    color: #fff;
}

@media (min-width: 700px) {
    .exhibits {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* The open exhibit: a card on the same line. */
.exhibit-open {
    margin-top: 2rem;
}

/* The Lodge door: pick the topics for the Field Guide, then head out. */
.door {
    margin: 2rem 0 0;
    padding: 1.3rem 1.2rem;
    border: 2px dashed var(--note);
    border-radius: 14px;
    background: var(--note-tint);
}

.door-q {
    font-size: 1.2rem;
    font-weight: 700;
    color: #5C4418;
    margin: 0 0 0.9rem;
}

.door-list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.door-pick {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 48px;
    padding: 0 0.9rem;
    border-radius: 10px;
    background: var(--bg-primary);
    font-size: 1.05rem;
    cursor: pointer;
}

.door-pick input {
    width: 1.35rem;
    height: 1.35rem;
    accent-color: var(--note);
}

.door-pick svg {
    width: 1.3rem;
    height: 1.3rem;
    color: var(--lodge);
}

.door-go {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    align-items: center;
    margin: 0;
}

.door-btn {
    min-height: 52px;
    padding: 0 1.4rem;
    border: none;
    border-radius: 12px;
    background: var(--board);
    color: #fff;
    font: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
}

/* The Lodge ends with one button out the door; the topic choice waits at
   the Bulletin Board. */
.place.is-lodge .door-go {
    margin-top: 2rem;
}

.place.is-lodge .board-h {
    margin-top: 0.4rem;
}

.place.is-board .door {
    margin: 1.4rem 0 0.4rem;
}

/* Out the Lodge door: the trail turns into a short dotted path to the
   Bulletin Board, which stands outside. */
.place.is-lodge .place-board {
    margin-bottom: 0;
}

.place.is-board {
    padding-top: 4.5rem;
}

.place.is-board::before {
    top: 0;
    height: 4.6rem;
    width: 0;
    background: none;
    border-left: 5px dotted var(--board);
}

.place.is-board > .marker {
    top: 4.6rem;
}

/* The Field Guide: the trail's pages, then each topic's, each under a
   heading with its own mark. */
.guide-topic + .guide-topic {
    margin-top: 1.6rem;
    padding-top: 1.4rem;
    border-top: 2px dotted #C9B48A;
}

.guide-h {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 1.35rem;
    margin: 0.6rem 0 0.9rem;
}

.guide-h-blaze {
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 7px;
}

.guide-h-icon {
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: var(--lodge);
    color: #fff;
}

.guide-h-icon svg {
    width: 1.35rem;
    height: 1.35rem;
}

.guide-topic .rooms {
    padding: 0;
}

/* "by Climate Color": a small tag under the title, linking home. */
.page-header .by {
    margin: -0.2rem 0 1rem;
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.page-header .by a {
    color: var(--text-secondary);
    font-weight: 700;
    text-decoration: none;
}

.page-header .by a:hover {
    text-decoration: underline;
}

/* "Preview": a small tag beside "by Climate Color," linking to the
   feedback line in the footer. */
.page-header .by .preview-tag {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.1rem 0.6rem;
    border: 1.5px solid var(--park);
    border-radius: 999px;
    color: var(--park);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    vertical-align: 0.05rem;
}

.site-foot .feedback {
    margin: 0 0 1rem;
    max-width: var(--read);
    font-weight: 700;
    color: var(--text-primary);
}

/* The trail's heading: its name, then its way of helping as a small tag. */
/* The Bulletin Board: a one-line recap, the topic choice, the closing
   words and Save for later, then one link to try another trail. */
.recap-line {
    margin: 0 0 0.4rem;
    max-width: var(--read);
}

.place.is-board .keep {
    margin-top: 1.6rem;
    padding: 0;
    background: none;
}

.place.is-board .keep .save {
    margin-top: 1.2rem;
    padding: 1rem 1.1rem;
    border: 2px solid var(--rule);
    border-radius: 14px;
    background: var(--bg-primary);
}

.try-other {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.6rem;
    margin: 1.6rem 0 0.4rem;
    color: var(--text-secondary);
    max-width: var(--read);
}

.try-btn {
    min-height: 44px;
    font-size: 1.05rem;
    margin-right: 0.3rem;
}

/* The line under the title reads as a subheader. */
.page-header .lede {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--park);
    margin: 0 0 0.6rem;
}

/* "This trail is open to everyone," at the top of the Trailhead. */
.place-board > .open-all {
    margin: 0 0 1.1rem;
    max-width: var(--read);
}

/* "Want to finish later?" and its panel: share, email, or copy a link
   back to this spot, and what is (and isn't) saved. */
.pace-q {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 0.9rem;
}

#saveTop {
    margin-top: 0.8rem;
    padding: 1rem 1.1rem;
    border: 2px solid var(--rule);
    border-radius: 14px;
    background: var(--bg-primary);
    max-width: var(--read);
}

#saveTop .save {
    margin: 0;
}

.save .sub {
    margin-top: 0;
}

.save-btn {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 1.1rem;
    border: 2px solid var(--lodge);
    border-radius: 999px;
    background: var(--bg-primary);
    color: var(--lodge);
    font: inherit;
    font-size: 0.98rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.save-btn:hover {
    background: var(--lodge-tint);
}

.save .save-link {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 0.7rem;
}

.save-privacy {
    margin: 0.7rem 0 0 !important;
    font-size: 0.92rem;
    color: var(--text-secondary);
}

.save-privacy b {
    color: var(--text-primary);
}

/* Inside the Lodge, the line turns dotted: exploring, but not the park's
   own path. */
.place.is-lodge::before {
    width: 0;
    background: none;
    border-left: 5px dotted var(--lodge);
}

/* "Try it now": a small paper card, like a page of the Field Guide. */
.stretch {
    border: 2px dashed var(--note);
    border-left-width: 2px;
    border-radius: 12px;
    background: var(--note-tint);
    padding: 1rem 1.1rem;
}

.stretch .sub {
    color: #5C4418;
}

@media (max-width: 560px) {
    .place > .marker {
        left: -0.3rem;
    }

    .place-board,
    .pick-body,
    .rooms {
        padding-left: 0;
        padding-right: 0;
    }

    .exhibits .opt {
        padding: 0.8rem;
    }

    .stop.trail > details > summary,
    .stop.room > details > summary {
        padding: 0.9rem 0.9rem;
    }

    .stop.trail .body,
    .stop.room .body {
        padding-left: 0.9rem;
        padding-right: 0.9rem;
    }

    .door {
        padding: 1.1rem 0.9rem;
    }
}

/* ==========================================================================
   Print: the whole trail, opened, without the buttons
   ========================================================================== */

/* The trail picker: one list, a colored blaze beside each way of
   helping, on a white panel framed like the park map. */
#trailOpts {
    background: var(--bg-primary);
    border: 0.75rem solid #F3F8EE;
    border-radius: 16px;
    box-shadow: 0 0 0 1px var(--green-tint-2);
    padding: 0.4rem;
    margin: 1px;
}

/* The Lodge: a building of its own, framed like the park map and the
   Field Guide. */
.lodge-card {
    margin: 0.6rem 0;
    border: 2px solid #B9DCE8;
    border-radius: 12px;
    background: #EEF7FA;
    padding: 0.2rem 1.1rem 1.2rem;
}

.lodge-card .place-sign {
    display: grid;
    grid-template-columns: 1fr auto;
    margin-top: 0;
    background: none;
    color: var(--text-primary);
}

.lodge-card .place-sign .text {
    padding: 0.7rem 0 0.2rem;
}

.lodge-card .place-sign .place-icon {
    display: block;
    color: var(--lodge);
    margin-right: 0;
}

.place.is-lodge .lodge-card .place-board {
    padding: 0;
    margin: 0;
}

/* The floor plan: the exhibit cards are its rooms, with shared walls. A
   doorway in from the trail at the top, and one out to the Bulletin
   Board at the bottom. */
.floor {
    margin-top: 0.4rem;
}

.floor-door {
    margin: 0 !important;
    font-size: 0.82rem;
    font-weight: 700;
    color: #0A5068;
}

.floor-in {
    padding: 0 0 0.3rem 1.4rem;
}

.floor-out {
    padding: 0.3rem 1.4rem 0 0;
    text-align: right;
    color: var(--board);
}

.floor .exhibits {
    position: relative;
    gap: 3px;
    padding: 0;
    border: 5px solid var(--lodge);
    border-radius: 8px;
    background: #9CCBDB;
}

/* The doorways: gaps in the outer wall, lined up under each door sign. */
.floor .exhibits::before,
.floor .exhibits::after {
    content: "";
    position: absolute;
    width: 4.5rem;
    height: 5px;
    background: #EEF7FA;
    z-index: 1;
}

.floor .exhibits::before {
    top: -5px;
    left: 1rem;
}

.floor .exhibits::after {
    bottom: -5px;
    right: 1rem;
}

.floor .exhibits li {
    display: flex;
    background: var(--bg-primary);
}

.floor .exhibits .opt {
    position: relative;
    border: none;
    border-radius: 0;
    background: var(--bg-primary);
    padding: 0.9rem 0.8rem 1rem;
}

.floor .exhibits .opt:hover {
    background: #F5FAFC;
}

/* A room you've been in: a soft fill, with its check. */
.floor .exhibits .opt.is-visited {
    background: var(--lodge-tint);
}

/* The room you're in: the Lodge's own color, marked like the park map. */
.floor .exhibits .opt[aria-pressed="true"] {
    border: none;
    background: var(--lodge);
    color: #fff;
}

.floor .exhibits .opt[aria-pressed="true"] .oname,
.floor .exhibits .opt[aria-pressed="true"] .odesc,
.floor .exhibits .opt[aria-pressed="true"] .opt-icon,
.floor .exhibits .opt[aria-pressed="true"] .visited {
    color: #fff;
}

.floor .exhibits .opt[aria-pressed="true"] .visited svg {
    background: #fff;
    color: var(--lodge);
}

.here {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: var(--text-primary);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
}

/* On a phone the building is two rooms wide; the ninth room runs the
   full width at the end. */
@media (max-width: 699px) {
    .floor .exhibits li:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .lodge-card {
        padding: 0.1rem 0.7rem 0.9rem;
    }

    .lodge-card .place-sign .place-icon {
        width: 2.2rem;
        height: 2.2rem;
        margin-left: 0.6rem;
    }

    .floor .exhibits .opt {
        padding: 0.75rem 0.6rem 0.85rem;
    }

    .floor .exhibits .oname {
        font-size: 0.88rem;
        hyphens: auto;
        overflow-wrap: break-word;
    }

    .floor .exhibits .odesc {
        font-size: 0.82rem;
    }

    .here {
        top: 0.6rem;
        right: 0.6rem;
    }
}

/* "Back to the Lodge," under each Print button in the Field Guide. */
.back-row {
    margin: 0 0 0.5rem;
    color: var(--text-secondary);
}

.back-row .reach {
    display: block;
    margin-top: 0.1rem;
}

@media print {
    .test-note,
    .toggle,
    .pills,
    .find-btn,
    .ways,
    .next-btn,
    .mini,
    .save,
    .linkish {
        display: none !important;
    }

    .find-reveal,
    .keep {
        display: block !important;
    }

    .note {
        min-height: 6rem;
        border: 1px solid #999;
    }

    /* "Print your Field Guide" prints the guide alone. */
    .print-guide .page-header,
    .print-guide .test-note,
    .print-guide #start,
    .print-guide #trailStops,
    .print-guide #lodge,
    .print-guide #bulletin,
    .print-guide .footnote,
    .print-guide .print-row,
    .print-guide .back-row,
    .print-guide .note-help {
        display: none !important;
    }

    .print-guide .is-guide {
        padding-left: 0;
    }

    .print-guide .is-guide::before,
    .print-guide .is-guide > .marker {
        display: none;
    }
}

/* ==========================================================================
   Its own site: the Climate Color bar, page width, and footer. The shared
   base stylesheet was written for pages framed inside Squarespace, which
   supplied the margins and hid the scroll bar; a page of its own needs
   both back.
   ========================================================================== */

html,
body {
    scrollbar-width: auto;
    -ms-overflow-style: auto;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: block;
    width: 12px;
}

html::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 6px;
}

.site-bar,
.page-header,
.trail-page,
.site-foot {
    max-width: 62rem;
    margin-inline: auto;
    padding-inline: 1.25rem;
}

.site-bar {
    display: flex;
    align-items: center;
    padding-block: 0.5rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--rule);
}

.site-home {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 44px;
    font-family: var(--display);
    font-size: 1.1rem;
    color: var(--text-primary);
    text-decoration: none;
}

.site-home:hover {
    color: var(--lodge);
}

.site-home img {
    width: 28px;
    height: 28px;
}

.site-foot {
    padding-block: 1.25rem 2rem;
    border-top: 1px solid var(--rule);
    font-size: 0.92rem;
    color: var(--text-secondary);
}

.site-foot ul {
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
}

.site-foot a {
    color: var(--lodge);
}

.site-foot p {
    margin: 0;
}

@media (max-width: 560px) {
    .site-bar,
    .page-header,
    .trail-page,
    .site-foot {
        padding-inline: 1rem;
    }
}

@media print {
    .site-bar,
    .site-foot {
        display: none;
    }
}