/* One part of a region's guide: /region/{slug}/{part}.
 *
 * Lifted out of `_ours.css` on 9 September 2026. 187 of these pages exist
 * across 48 regions, every one linked from its region page, and every one was
 * still naming a 2023 stylesheet that defined two of the fifteen classes it
 * uses. The reading page itself - the column, the tick, the next part, the
 * contents - was always here.
 *
 * `.rv` is not lifted with it: that rule is `opacity: 0` waiting on a class
 * a scroll script adds, and content that hides until JavaScript says
 * otherwise is a fault waiting to happen. Without it the two blocks that wear
 * the class are visible, which is where they were meant to end up.
 *
 * Hand-written, like `_ours.css` and `_mapview.css`. There is no mock for it
 * and no builder to re-run; if it is redrawn, it is redrawn here.
 *
 * `RegionController@section` names it. Its tokens come from `_shared.css`.
 */

/* ---- one part of a region's guide ----
 *
 * A reading page, so it is built like one: a single narrow column, generous
 * leading, and nothing in the margins competing for the eye. What follows the
 * text is the only furniture - a tick, the next part, and the contents.
 */

/* Peat at 16%. Declared at the top of every 2023 redesign file and nowhere
   in _shared.css, which is how the rule below has been getting it. */
.gd {
  --hairline: rgba(65, 64, 66, .16);
}

.gd { padding: clamp(26px, 4vh, 46px) 0 clamp(50px, 8vh, 90px) }

/* The 760px column. `max-width` was always said here; the centring and
   the edge padding came from the 2023 sheet's bare `.wrap`, and are said here
   now rather than letting a 2023 container loose on a September page. */
.gd .wrap { max-width: 760px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 60px) }

.gd-crumb {
    display: flex;
    gap: 9px;
    font-family: var(--sans);
    font-size: 9.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-55);
}

.gd-crumb a { color: var(--ink-55); text-decoration: none }
.gd-crumb a:hover { color: var(--ink) }

.gd-head { padding: clamp(20px, 3vh, 34px) 0 clamp(18px, 3vh, 30px) }

.gd-step {
    font-family: var(--sans);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--moss);
}

.gd h1 {
    margin-top: 14px;
    font-family: var(--serif);
    font-weight: 500;
    font-size: min(clamp(32px, 5vw, 54px), 28px + (clamp(32px, 5vw, 54px) - 28px) * 0.6);
    line-height: 1.06;
    letter-spacing: -.022em;
    text-wrap: balance;
}

.gd-sub {
    margin-top: 16px;
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(17px, 1.6vw, 21px);
    line-height: 1.5;
    color: var(--ink-75);
}

.gd-time {
    margin-top: 18px;
    font-family: var(--sans);
    font-size: 9.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-55);
}

.gd-shot {
    margin: clamp(10px, 2vh, 22px) 0 clamp(28px, 4vh, 48px);
    aspect-ratio: 16 / 7;
    overflow: hidden;
}

.gd-shot img { width: 100%; height: 100%; object-fit: cover; display: block }

/* ---- the reading itself ---- */

.gd-body {
    font-family: var(--serif);
    font-size: clamp(17px, 1.5vw, 19px);
    line-height: 1.78;
    color: var(--ink);
}

.gd-body p { margin-bottom: 1.25em }
.gd-body p:last-child { margin-bottom: 0 }

.gd-body h2, .gd-body h3 {
    margin: 1.9em 0 .6em;
    font-family: var(--serif);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.015em;
}

.gd-body h2 { font-size: min(clamp(23px, 2.4vw, 30px), 28px + (clamp(23px, 2.4vw, 30px) - 28px) * 0.6) }
.gd-body h3 { font-size: min(clamp(19px, 1.9vw, 23px), 28px + (clamp(19px, 1.9vw, 23px) - 28px) * 0.6) }

.gd-body ul, .gd-body ol { margin: 0 0 1.25em 1.2em }
.gd-body li { margin-bottom: .45em }

.gd-body blockquote {
    margin: 1.8em 0;
    padding-left: 22px;
    border-left: 2px solid var(--moss);
    font-style: italic;
    color: var(--ink-75);
}

/* ---- done, and what is next ---- */

.gd-done {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: clamp(36px, 6vh, 64px);
    padding-top: 26px;
    border-top: 1px solid var(--hairline);
}

.gd-tick {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 11px 18px;
    border: 1px solid var(--ink);
    background: transparent;
    color: var(--ink);
    font-family: var(--sans);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}

.gd-tick:hover { background: var(--ink); color: var(--paper) }

.gd-box {
    width: 15px;
    height: 15px;
    display: grid;
    place-items: center;
    border: 1px solid currentColor;
    font-size: 10px;
}

.gd-tick.on { border-color: var(--moss); color: var(--moss) }
.gd-tick.on:hover { background: var(--moss); color: var(--paper) }

.gd-next {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: right;
    text-decoration: none;
}

.gd-next span {
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink-55);
}

.gd-next strong {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(17px, 1.6vw, 21px);
    color: var(--ink);
}


/* ---- the contents, so you can see what is left ---- */

.gd-course { margin-top: clamp(40px, 6vh, 70px) }

.gd-course h2 {
    font-family: var(--sans);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink-55);
    margin-bottom: 14px;
}

.gd-course ol {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--hairline);
}

.gd-course li { border-bottom: 1px solid var(--hairline) }

.gd-course a {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 13px 2px;
    text-decoration: none;
    color: var(--ink);
}

.gd-n {
    flex: 0 0 32px;
    font-family: var(--sans);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .12em;
    color: var(--ink-55);
}

.gd-t { flex: 1; font-family: var(--serif); font-size: 16.5px }
.gd-m {
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-55);
}

.gd-course li.done .gd-n { color: var(--moss) }
.gd-course li.done .gd-t { color: var(--ink-55) }
.gd-course li.here .gd-t { font-style: italic }
.gd-course li.here { background: rgba(65, 64, 66, .035) }

.gd-back {
    display: inline-block;
    margin-top: 20px;
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-55);
    text-decoration: none;
}

.gd-back:hover { color: var(--ink) }