/* Ours, not the designs'.
 *
 * Classes the site needs that no design file draws. They live here rather
 * than in parts.css because parts.css sits in a CSS layer, and every design
 * sheet opens with an unlayered `* { margin: 0; padding: 0 }` - unlayered
 * beats layered whatever the specificity, so anything with spacing in it was
 * being silently thrown away. This sheet is unlayered and loads last.
 *
 * Everything here is written in the designs' own variables. If a design ever
 * draws one of these properly, the rule should move out of this file.
 */

/* ---- the second action on a listing card ----
 *
 * The heart is a private note to yourself; this is the one with dates
 * attached. Set in the same small caps as the "checked" badge beside it so
 * it reads as a quiet second option rather than a rival to the drawn button.
 */
.dtrip {
    /* Drawn exactly like the button beside it: they are two ways of saying
       yes to the same place, and one of them is not a lesser thing. The
       words carry the difference, not the weight. */
    margin-left: 10px;
}

/* ---- the static pages: about, visit, contact, partnership, offers ---- */

.sp-body { max-width: 62ch; margin-inline: auto }

.sp-block + .sp-block { margin-top: clamp(26px, 4vh, 40px) }

.sp-block h2 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: min(clamp(19px, 2vw, 23px), 28px + (clamp(19px, 2vw, 23px) - 28px) * 0.6);
    letter-spacing: -.01em;
    color: var(--ink);
}

.sp-block p {
    margin-top: 10px;
    font-family: var(--serif);
    font-size: 16px;
    line-height: 1.72;
    color: var(--ink-75);
}

.sp-block a { color: var(--moss); text-underline-offset: 3px }

.sp-links {
    list-style: none;
    margin-top: clamp(26px, 4vh, 40px);
    border-top: 1px solid var(--hairline-soft);
}

.sp-links li { border-bottom: 1px solid var(--hairline-soft) }

.sp-links a {
    display: block;
    padding: 15px 2px;
    font-family: var(--serif);
    font-size: 16.5px;
    color: var(--ink);
    text-decoration: none;
    transition: padding-left .25s var(--ease, ease);
}

.sp-links a:hover { padding-left: 8px; color: var(--moss) }

/* ---- the magazine index reuses the collection page's second call ---- */

.mg-cta2{display:inline-block;margin-top:16px;font-family:var(--sans);font-size:10px;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--hairline);padding:12px 20px;text-decoration:none;transition:all .25s}

/* ---- the region guide: its written parts ----
 *
 * The only place on the page that reads rather than lists, so it is set to a
 * measure and given room. The guide's own words, in the guide's own order.
 */

.rg-read .wrap { max-width: 1400px }

.rg-lede p {
    font-family: var(--serif);
    font-size: clamp(17px, 1.6vw, 20px);
    line-height: 1.75;
    color: var(--ink);
    max-width: 34em;
    margin: 0 auto 20px;
}

.rg-lede p:first-child::first-letter {
    float: left;
    font-size: min(3.4em, 28px + (3.4em - 28px) * 0.6);
    line-height: .82;
    padding: 6px 10px 0 0;
    font-weight: 500;
}

.rg-known {
    max-width: 34em;
    margin: clamp(26px, 4vh, 40px) auto 0;
    padding-top: clamp(20px, 3vh, 28px);
    border-top: 1px solid var(--hairline-soft);
}

.rg-known p {
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(16px, 1.5vw, 18.5px);
    line-height: 1.7;
    color: var(--ink-75);
}

.rg-block { max-width: 34em; margin-inline: auto }
.rg-block + .rg-block { margin-top: clamp(30px, 5vh, 46px) }

.rg-block h3 {
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--moss);
    margin-bottom: 12px;
}

.rg-block p {
    font-family: var(--serif);
    font-size: 16.5px;
    line-height: 1.78;
    color: var(--ink-75);
}

.rg-block p + p { margin-top: 15px }

/* ---- the cover, as the book is actually printed ----
 *
 * Dark ground, the name in white, one portrait photograph, and the line at
 * the foot. Each region takes its own colour from config/covers.php so the
 * set reads as a shelf rather than 28 unrelated pages.
 */

.gcover {
    color: var(--paper);
    text-align: center;
    padding: clamp(30px, 5vh, 46px) clamp(24px, 3vw, 40px);
}

.gcover .gc-kick,
.gcover .gc-foot { color: rgba(251, 249, 246, .72) }
.gcover h1 { color: var(--paper) }
.gcover .gc-gaelic { color: rgba(251, 249, 246, .8) }
.gcover .gc-rule { background: rgba(251, 249, 246, .3) }

.gc-shot {
    display: block;
    width: min(74%, 260px);
    aspect-ratio: 3 / 4;
    margin: clamp(20px, 3vh, 30px) auto;
    overflow: hidden;
}

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

/* ---- the cover, at the size the book is actually printed ----
 *
 * 190 x 148mm, which is 148/190 on its side: a portrait book, not a square
 * card. Everything inside is proportional to the cover rather than to the
 * viewport, so it holds its shape from a phone to a wide screen and reads as
 * the same object every time.
 */

.gcover {
    aspect-ratio: 148 / 190;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    padding: 9% 11% 7%;
    color: var(--paper);
    text-align: center;
    border: 0;
    box-shadow: 0 18px 46px rgba(65, 64, 66, .18);
}

.gcover .gc-rule { display: none }

.gcover .gc-kick {
    font-family: var(--sans);
    font-size: clamp(8px, .62vw, 9.5px);
    font-weight: 500;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: rgba(251, 249, 246, .88);
    margin: 0;
}

.gcover h1 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: min(clamp(23px, 2.5vw, 34px), 28px + (clamp(23px, 2.5vw, 34px) - 28px) * 0.6);
    line-height: 1.06;
    letter-spacing: -.015em;
    color: var(--paper);
    margin: 3.5% 0 0;
    text-wrap: balance;
}

.gc-shot {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1.12;
    margin: 7% 0 auto;
    overflow: hidden;
    background: rgba(65, 64, 66, .12);
}

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

.gcover .gc-foot {
    font-family: var(--sans);
    font-size: clamp(7.5px, .58vw, 9px);
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(251, 249, 246, .82);
    margin: 6% 0 0;
}

.gcover .gc-gaelic { display: none }

/* ---- the guidebook band ----
 *
 * The page is the free half of the book; this is the half that goes in the
 * glovebox. The cover is the same drawn object as the one at the top of the
 * page, just smaller, so the two read as the same book.
 */

.bookwrap {
    display: grid;
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
}

@media (max-width: 760px) {
    .bookwrap { grid-template-columns: 1fr }
    .bookimg { max-width: 220px; margin-inline: auto }
}

.bk-cover { width: 100%; box-shadow: 0 22px 50px rgba(65, 64, 66, .3) }
.bk-cover h2 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: min(clamp(19px, 1.9vw, 25px), 28px + (clamp(19px, 1.9vw, 25px) - 28px) * 0.6);
    line-height: 1.06;
    letter-spacing: -.015em;
    color: var(--paper);
    margin: 3.5% 0 0;
    text-wrap: balance;
}

.bookstand {
    margin-top: 14px;
    max-width: 46ch;
    font-family: var(--serif);
    font-size: 15.5px;
    line-height: 1.7;
}

.bk-quote {
    margin: clamp(18px, 3vh, 26px) 0 0;
    padding-left: 18px;
    border-left: 2px solid rgba(251, 249, 246, .3);
    max-width: 42ch;
}

.bk-quote p {
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(15.5px, 1.5vw, 18px);
    line-height: 1.6;
}

.bk-quote cite {
    display: block;
    margin-top: 8px;
    font-family: var(--sans);
    font-style: normal;
    font-size: 9.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    opacity: .72;
}

.bookmeta {
    margin-top: clamp(16px, 3vh, 24px);
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .7;
}

.bk-acts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    margin-top: clamp(18px, 3vh, 26px);
}

.bk-more {
    font-family: var(--serif);
    font-style: italic;
    font-size: 14.5px;
    text-decoration: underline;
    text-underline-offset: 3px;
    opacity: .82;
}

.bk-more:hover { opacity: 1 }

/* ---- one corner of a region ---- */

.ar-open { padding-bottom: 0 }

.ar-back {
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink-55);
    margin-bottom: 14px;
}

.ar-back a { color: var(--moss); text-decoration: none }
.ar-back a:hover { color: var(--ink) }

.ar-open h1 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: min(clamp(34px, 5vw, 62px), 28px + (clamp(34px, 5vw, 62px) - 28px) * 0.6);
    line-height: 1.02;
    letter-spacing: -.025em;
    color: var(--ink);
    text-wrap: balance;
}

.ar-count {
    margin-top: 16px;
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--moss);
}

.ar-hero {
    margin: clamp(26px, 4vh, 42px) 0 0;
    max-height: 58vh;
    overflow: hidden;
}

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

.ar-siblings {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 1px;
    background: var(--hairline-soft);
}

.ar-sib {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 16px;
    background: var(--ground);
    text-decoration: none;
    transition: background .25s var(--ease, ease), padding-left .25s var(--ease, ease);
}

.ar-sib:hover { background: var(--paper); padding-left: 24px }

.ar-sib b {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 17px;
    color: var(--ink);
}

.ar-sib em {
    font-family: var(--sans);
    font-style: normal;
    font-size: 9.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-55);
    white-space: nowrap;
}

/* ---- the questions ----
 *
 * Twenty-seven of them, so they are grouped and set in two columns: six short
 * lists you can scan rather than one list you have to read. The question is
 * the hit target, not the little cross at the end of it, and the answers are
 * long enough that they stay shut until asked for.
 */

.rfaq-cols {
    columns: 2;
    column-gap: clamp(30px, 5vw, 76px);
    max-width: 1180px;
}

@media (max-width: 860px) { .rfaq-cols { columns: 1 } }

.rfaq-g {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin-bottom: clamp(26px, 4vh, 40px);
}

.rfaq-h {
    font-family: var(--sans);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--moss);
    padding-bottom: 9px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--hairline);
}

.rfaq-i { border-bottom: 1px solid var(--hairline-soft) }

.rfaq-i summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 13px 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--serif);
    font-size: 16px;
    line-height: 1.4;
    color: var(--ink-75);
    transition: color .2s, padding-left .25s var(--ease, ease);
}

.rfaq-i summary::-webkit-details-marker { display: none }
.rfaq-i summary:hover { color: var(--ink); padding-left: 6px }
.rfaq-i[open] summary { color: var(--ink) }

/* The cross, drawn rather than typed, so it can turn into a minus. */
.rfaq-i summary i {
    position: relative;
    flex: 0 0 auto;
    width: 11px;
    height: 11px;
    margin-top: 5px;
}

.rfaq-i summary i::before,
.rfaq-i summary i::after {
    content: "";
    position: absolute;
    inset: 50% 0 auto;
    height: 1px;
    background: var(--moss);
    transition: transform .3s var(--ease, ease);
}

.rfaq-i summary i::after { transform: rotate(90deg) }
.rfaq-i[open] summary i::after { transform: rotate(0deg) }

.rfaq-a {
    padding: 2px 0 20px;
    max-width: 60ch;
}

.rfaq-a p {
    font-family: var(--serif);
    font-size: 15px;
    line-height: 1.78;
    color: var(--ink-75);
}

.rfaq-a p + p { margin-top: 13px }
.rfaq-a a { color: var(--moss); text-underline-offset: 3px }

.rfaq-a ul { margin: 12px 0 0 18px }

.rfaq-a li {
    font-family: var(--serif);
    font-size: 15px;
    line-height: 1.7;
    color: var(--ink-75);
    margin-bottom: 6px;
}

/* The book as it actually is, photographed, when the shop has a picture of
   it. Everywhere else falls back to the drawn cover, which is right for the
   regions whose guide has not been printed. */
.bk-shot {
    margin: 0;
    overflow: hidden;
    box-shadow: 0 22px 50px rgba(65, 64, 66, .34);
}

.bk-shot img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4 / 5 }

/* ---- stories, with their photographs ----
 *
 * A story without a picture is a paragraph, and four paragraphs in a row is
 * where a reader stops. Same grid and same proportions as a place card, so
 * the page has one rhythm rather than two.
 */

.storygrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: clamp(18px, 2.2vw, 30px);
}

.scard { display: block; text-decoration: none; color: inherit }

.scard figure {
    margin: 0;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--hairline-soft);
}

.scard img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .7s var(--ease, ease);
}

.scard:hover img { transform: scale(1.045) }
.scard-none { display: block; width: 100%; height: 100%; background: var(--ground) }

.scard-in { padding: 14px 2px 0 }

.scard .st-k {
    display: block;
    font-family: var(--sans);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--moss);
}

.scard h3 {
    margin-top: 7px;
    font-family: var(--serif);
    font-weight: 500;
    font-size: 18px;
    line-height: 1.28;
    letter-spacing: -.01em;
    color: var(--ink);
    text-wrap: balance;
}

.scard:hover h3 { font-style: italic }

.scard p {
    margin-top: 7px;
    font-family: var(--serif);
    font-size: 14px;
    line-height: 1.62;
    color: var(--ink-55);
}

/* ---- the region opens on a photograph ----------------------------------
 *
 * The island first, its name over it, and the book set down on the corner of
 * the picture like an object left on a table. The contents follow as a rail
 * rather than a list, because nobody arrives wanting a table of contents.
 */

.rgh {
    position: relative;
    min-height: min(84vh, 760px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--forest);
}

.rgh-shot { position: absolute; inset: 0; margin: 0 }

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

/* Enough shade for white type, not so much that the island goes grey. */
.rgh::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(24, 26, 22, .82) 0%,
        rgba(24, 26, 22, .5) 34%,
        rgba(24, 26, 22, .12) 68%,
        rgba(24, 26, 22, .28) 100%);
}

.rgh-in {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: clamp(30px, 6vh, 66px) clamp(20px, 4vw, 60px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: clamp(24px, 5vw, 70px);
}

.rgh-kick {
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: rgba(251, 249, 246, .78);
}

.rgh h1 {
    margin-top: 12px;
    font-family: var(--serif);
    font-weight: 500;
    font-size: min(clamp(44px, 7.4vw, 104px), 28px + (clamp(44px, 7.4vw, 104px) - 28px) * 0.6);
    line-height: .94;
    letter-spacing: -.03em;
    color: var(--paper);
    text-wrap: balance;
}

.rgh-stand {
    margin-top: 16px;
    max-width: 30ch;
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(16px, 1.6vw, 21px);
    line-height: 1.5;
    color: rgba(251, 249, 246, .9);
}

.rgh-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 20px;
    margin-top: clamp(18px, 3vh, 28px);
    padding-top: 15px;
    border-top: 1px solid rgba(251, 249, 246, .22);
    max-width: 40ch;
}

.rgh-facts span {
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(251, 249, 246, .84);
}

.rgh-facts em {
    font-family: var(--serif);
    font-style: italic;
    font-size: 14.5px;
    color: rgba(251, 249, 246, .72);
}

/* The book, sitting on the picture. */
.rgh-book {
    width: clamp(150px, 15vw, 216px);
    transform: rotate(-2.2deg);
    box-shadow: 0 26px 56px rgba(18, 20, 16, .5);
    transition: transform .5s var(--ease, ease);
}

.rgh-book:hover { transform: rotate(0deg) translateY(-6px) }

.rgh-book h2 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: clamp(15px, 1.4vw, 20px);
    line-height: 1.06;
    letter-spacing: -.015em;
    color: var(--paper);
    margin: 3.5% 0 0;
    text-wrap: balance;
}

@media (max-width: 800px) {
    .rgh-in { grid-template-columns: 1fr }
    .rgh-book { display: none }
}

/* ---- the contents, as a rail ---- */

.rgh-rail {
    border-bottom: 1px solid var(--hairline-soft);
    background: var(--ground);
    overflow-x: auto;
}

.rgh-rail .wrap {
    display: flex;
    gap: clamp(20px, 3vw, 46px);
    padding-top: 16px;
    padding-bottom: 16px;
    white-space: nowrap;
}

.rgh-rail a {
    display: flex;
    align-items: baseline;
    gap: 8px;
    text-decoration: none;
    transition: color .2s;
}

.rgh-rail b {
    font-family: var(--sans);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .18em;
    color: var(--moss);
}

.rgh-rail span {
    font-family: var(--serif);
    font-size: 16px;
    color: var(--ink-75);
}

.rgh-rail i {
    font-family: var(--serif);
    font-style: italic;
    font-size: 12.5px;
    color: var(--ink-55);
}

.rgh-rail a:hover span { color: var(--ink); font-style: italic }

/* The foot line wraps on the small cover, which reads as a mistake rather
   than as a book. Smaller and on one line. */
.rgh-book .gc-foot {
    font-size: clamp(5.5px, .42vw, 7px);
    letter-spacing: .18em;
    white-space: nowrap;
}

.rgh-book .gc-kick { font-size: clamp(6px, .46vw, 7.5px) }

/* The rail scrolls on a narrow screen, but a visible bar under it reads as a
   mistake on a wide one. */
.rgh-rail { scrollbar-width: none }
.rgh-rail::-webkit-scrollbar { display: none }

/* ---- the opening, as a spread rather than a column ----
 *
 * Six hundred words in one column is a wall you scroll past. In two it reads
 * like the magazine it came out of, and the eye has somewhere to land halfway
 * down. The words are unchanged; only the shape of them is.
 */

.rg-lede {
    columns: 2;
    column-gap: clamp(30px, 4vw, 68px);
    max-width: 1060px;
    margin-inline: auto;
}

.rg-lede p {
    max-width: none;
    margin: 0 0 16px;
    font-size: clamp(15.5px, 1.2vw, 17px);
    line-height: 1.72;
}

.rg-lede p:first-child { margin-top: 0 }

@media (max-width: 820px) {
    .rg-lede { columns: 1; max-width: 34em }
}

/* What it is known for, set as the line it is. */
.rg-known {
    max-width: 30em;
    margin-top: clamp(30px, 5vh, 48px);
    padding-top: clamp(22px, 3.5vh, 32px);
    text-align: center;
    border-top: 1px solid var(--hairline);
}

.rg-known p {
    font-family: var(--serif);
    font-style: italic;
    font-size: min(clamp(17px, 1.8vw, 22px), 28px + (clamp(17px, 1.8vw, 22px) - 28px) * 0.6);
    line-height: 1.55;
    color: var(--ink);
}

/* ---- before you go, as four short pieces rather than one long one ----
 *
 * Four subjects - the history, the areas, getting about, visiting well - laid
 * side by side so each is a piece you can read on its own, which is how
 * anybody actually uses them.
 */

#before .wrap { max-width: 1240px }

#before .rg-block {
    max-width: none;
    margin-inline: 0;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
}

#before .rg-block + .rg-block { margin-top: 0 }

#before .rg-read-cols,
#before > .wrap > .rg-block:first-of-type { margin-top: 0 }

#before .wrap > .rg-block {
    display: inline-block;
    width: 100%;
}

/* The blocks flow in two columns; each stays whole. */
#before .wrap {
    columns: 2;
    column-gap: clamp(32px, 4.5vw, 72px);
}

#before .wrap > :not(.rg-block) {
    column-span: all;
}

#before .rg-block { margin-bottom: clamp(28px, 4vh, 44px) }

#before .rg-block p { font-size: 15.5px; line-height: 1.74 }

@media (max-width: 860px) {
    #before .wrap { columns: 1 }
}

/* The film sits exactly over its own poster and fades in when it starts, so
   there is never a frame where the header is empty or flickers. */
.rgh-film {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.2s ease;
    pointer-events: none;
}

.rgh-film.on { opacity: 1 }

@media (prefers-reduced-motion: reduce) {
    .rgh-film { display: none }
}

/* ---- the areas, as places rather than boxes ----
 *
 * Somebody choosing between Trotternish and Sleat is choosing between two
 * landscapes, not two words. The name sits on the photograph the way it does
 * on the cover, and the guide's line sits underneath.
 */

.areagrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
    gap: clamp(18px, 2.4vw, 32px);
}

.areagrid .acard {
    display: block;
    text-decoration: none;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
}

.areagrid .acard figure {
    position: relative;
    margin: 0;
    aspect-ratio: 5 / 4;
    overflow: hidden;
    background: var(--hairline-soft);
}

.areagrid .acard img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .7s var(--ease, ease);
}

.areagrid .acard:hover img { transform: scale(1.05) }
.acard-none { display: block; width: 100%; height: 100%; background: var(--ground) }

.areagrid figcaption {
    position: absolute;
    inset: auto 0 0;
    padding: 34px 18px 16px;
    background: linear-gradient(to top, rgba(24, 26, 22, .82), rgba(24, 26, 22, 0));
    color: var(--paper);
}

.areagrid figcaption h3 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: min(clamp(19px, 1.8vw, 24px), 28px + (clamp(19px, 1.8vw, 24px) - 28px) * 0.6);
    line-height: 1.12;
    letter-spacing: -.015em;
    text-wrap: balance;
}

.areagrid figcaption em {
    display: block;
    margin-top: 5px;
    font-family: var(--sans);
    font-style: normal;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    opacity: .82;
}

.areagrid .acard p {
    margin-top: 11px;
    font-family: var(--serif);
    font-size: 14px;
    line-height: 1.62;
    color: var(--ink-55);
}

.areagrid .acard:hover figcaption h3 { font-style: italic }

/* ---- the island, one photograph at a time -------------------------------
 *
 * Big frames, a drag or two buttons, and it snaps so it comes to rest on a
 * picture rather than between two. Every frame is a listing, so the caption
 * carries the name and the heart, and looking turns into planning without
 * anybody having to change screens.
 */

.psh { padding: clamp(34px, 6vh, 64px) 0 }

.psh-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: clamp(16px, 2.4vh, 24px);
}

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

.psh-nav { display: flex; align-items: center; gap: 12px }

.psh-count {
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: .18em;
    color: var(--ink-55);
    font-variant-numeric: tabular-nums;
}

.psh-count i { font-style: normal; margin: 0 4px; opacity: .5 }

.psh-nav button {
    width: 34px;
    height: 34px;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    background: none;
    cursor: pointer;
    font-size: 14px;
    color: var(--ink);
    transition: border-color .2s, color .2s, opacity .2s;
}

.psh-nav button:hover:not(:disabled) { border-color: var(--moss); color: var(--moss) }
.psh-nav button:disabled { opacity: .25; cursor: default }

.psh-rail {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: max(20px, calc((100vw - 1400px) / 2 + 20px));
    padding: 0 max(20px, calc((100vw - 1400px) / 2 + 20px)) 4px;
    scrollbar-width: none;
}

.psh-rail::-webkit-scrollbar { display: none }
.psh-rail:focus-visible { outline: 2px solid var(--moss); outline-offset: 4px }

.psh-f {
    flex: 0 0 auto;
    width: clamp(240px, 30vw, 420px);
    margin: 0;
    scroll-snap-align: start;
}

.psh-shot {
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--hairline-soft);
}

.psh-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .8s var(--ease, ease);
}

.psh-f:hover .psh-shot img { transform: scale(1.04) }
.psh-none { display: block; width: 100%; height: 100%; background: var(--ground) }

.psh-f figcaption {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 2px 0;
}

.psh-k {
    display: block;
    font-family: var(--sans);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--moss);
}

.psh-f h3 {
    margin-top: 6px;
    font-family: var(--serif);
    font-weight: 500;
    font-size: 18px;
    line-height: 1.24;
    letter-spacing: -.01em;
}

.psh-f h3 a { color: var(--ink); text-decoration: none }
.psh-f:hover h3 a { font-style: italic }

.psh-f figcaption p {
    margin-top: 5px;
    font-family: var(--serif);
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--ink-55);
}

.psh-want {
    flex: 0 0 auto;
    margin-top: 2px;
    font-size: 17px !important;
    line-height: 1;
    padding: 4px 6px !important;
    border: 0 !important;
    background: none;
    cursor: pointer;
    color: var(--moss);
}

/* ---- the island, as photographs -----------------------------------------
 *
 * A wall rather than a row: irregular tiles so the eye wanders instead of
 * scanning, the name only when you rest on one, and full size when you click.
 * The listings further down do the work of listing; this does the work of
 * making somebody want to go.
 */

.pmo { padding: clamp(30px, 5vh, 58px) 0 }

.pmo-kick {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 14px;
    margin-bottom: clamp(16px, 2.4vh, 24px);
    font-family: var(--sans);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--moss);
}

.pmo-kick em {
    font-family: var(--serif);
    font-style: italic;
    font-size: 13.5px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink-55);
}

.pmo-wall {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    grid-auto-rows: 150px;
    gap: 10px;
}

.pmo-f {
    position: relative;
    display: block;
    padding: 0;
    border: 0;
    background: var(--hairline-soft);
    overflow: hidden;
    cursor: zoom-in;
}

/* The rhythm: some tall, some wide, most square. */
.pmo-f.is-t { grid-row: span 2 }
.pmo-f.is-w { grid-column: span 2 }

@media (max-width: 620px) {
    .pmo-wall { grid-auto-rows: 118px }
    .pmo-f.is-w { grid-column: span 2 }
}

.pmo-f img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .8s var(--ease, ease), filter .4s;
}

.pmo-none { display: block; width: 100%; height: 100%; background: var(--ground) }

.pmo-f:hover img,
.pmo-f:focus-visible img { transform: scale(1.05) }

.pmo-cap {
    position: absolute;
    inset: auto 0 0;
    padding: 30px 12px 11px;
    text-align: left;
    background: linear-gradient(to top, rgba(24, 26, 22, .86), rgba(24, 26, 22, 0));
    color: var(--paper);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .3s, transform .3s var(--ease, ease);
}

.pmo-f:hover .pmo-cap,
.pmo-f:focus-visible .pmo-cap { opacity: 1; transform: none }

.pmo-cap i {
    display: block;
    font-family: var(--sans);
    font-style: normal;
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    opacity: .8;
}

.pmo-cap b {
    display: block;
    margin-top: 3px;
    font-family: var(--serif);
    font-weight: 500;
    font-size: 15.5px;
    line-height: 1.2;
}

/* Where the lightbox now says what you are looking at. */
.lb-k {
    display: block;
    font-family: var(--sans);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    opacity: .7;
    margin-bottom: 5px;
}

.lb-go {
    display: inline-block;
    margin-left: 14px;
    font-family: var(--sans);
    font-size: 9.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ---- what a bed costs and who it fits ---- */

.dex-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 9px;
}

.dex-meta span {
    font-family: var(--sans);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-55);
}

.dex-meta .dex-price { color: var(--moss) }

.dex-book {
    margin-left: auto;
    font-family: var(--sans);
    font-size: 9.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--moss);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.dex-book:hover { color: var(--ink) }

/* ---- the wall, with some life in it ----
 *
 * Bigger tiles and more air, because a gallery is looked at rather than
 * scanned. Resting on one dims the others: the effect is somebody putting a
 * hand on a photograph in an album, and it makes a still page feel handled.
 */

.pmo-wall { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); grid-auto-rows: 186px; gap: 12px }

@media (max-width: 620px) { .pmo-wall { grid-auto-rows: 132px; gap: 8px } }

/* The wall used to dim every other photograph while you rested on one - the
   idea being a hand laid on a picture in an album. In use it reads as the
   page greying out, and it works against what a photo wall is for, which is
   looking at all of them at once. The tile under the cursor still lifts; the
   rest are left alone. */

@media (prefers-reduced-motion: reduce) {
    .pmo-f img { transition: none }
}

/* And they arrive rather than appear. */
.pmo-f { animation: pmo-in .7s var(--ease, ease) both }
.pmo-f:nth-child(4n+2) { animation-delay: .06s }
.pmo-f:nth-child(4n+3) { animation-delay: .12s }
.pmo-f:nth-child(4n+4) { animation-delay: .18s }

@keyframes pmo-in { from { opacity: 0; transform: translateY(14px) } }

@media (prefers-reduced-motion: reduce) {
    .pmo-f { animation: none }
}

/* Fill the holes a tall tile leaves beside it. Without this the wall reads as
   a grid somebody forgot to finish. */
.pmo-wall { grid-auto-flow: dense }

/* ---- the listing card ----
 *
 * The card is the thing people actually use, so it is built to be chosen
 * from rather than looked at.
 *
 * The photograph carries the two judgements made at a glance - whether we
 * rate it, and where on the ground it is - and keeping it is a heart in the
 * corner, where every person who has ever used the internet already reaches.
 * Underneath, in falling order of what settles an argument: what it is, what
 * it is called, what it is like, and the three facts that decide it. Then one
 * clear act, because a card with two equal buttons has none.
 */

.dex { position: relative; overflow: hidden }
.dex figure { position: relative }
.dex-shot { display: block; width: 100%; height: 100% }

/* Ours. About one listing in six, which is what keeps it worth reading. */
.dex-seal {
    position: absolute;
    left: 0; top: 14px;
    z-index: 2;
    padding: 5px 10px 5px 12px;
    background: var(--moss);
    color: var(--paper);
    font-family: var(--sans);
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
}

/* Where it is. A pill rather than a gradient wash, so it stays legible on a
   bright sky and never dirties the bottom of the picture. */
.dex-where {
    position: absolute;
    left: 12px; bottom: 12px;
    z-index: 2;
    max-width: calc(100% - 60px);
    padding: 6px 11px;
    background: rgba(65, 64, 66, .72);
    backdrop-filter: blur(6px);
    color: #F2EFE9;
    font-family: var(--sans);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* One tap, no words. Grows very slightly when it takes. */
.dex-heart {
    position: absolute;
    right: 12px; top: 12px;
    z-index: 3;
    width: 36px; height: 36px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(252, 251, 248, .92);
    backdrop-filter: blur(6px);
    box-shadow: 0 1px 6px rgba(65, 64, 66, .16);
    color: var(--ink);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    transition: transform .18s var(--ease, ease), background .2s, color .2s;
}

.dex-heart:hover { transform: scale(1.09); background: var(--paper) }
.dex-heart.on { color: var(--moss) }
.dex-heart.on:hover { transform: scale(1.04) }

@media (prefers-reduced-motion: reduce) {
    .dex-heart { transition: none }
    .dex-heart:hover, .dex-heart.on:hover { transform: none }
}

/* ---- the words ---- */

.dex-in { padding: 16px 16px 18px }

.dex-k {
    font-size: 9.5px !important;
    letter-spacing: .18em !important;
}

.dex h3 {
    margin-top: 7px;
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(18px, 1.5vw, 21px);
    line-height: 1.22;
    letter-spacing: -.012em;
}

.dex h3 a { color: var(--ink); text-decoration: none }
.dex:hover h3 a { font-style: italic }

.dex-in > p {
    margin-top: 7px;
    font-family: var(--serif);
    font-size: 15px;
    font-style: normal;
    line-height: 1.58;
    color: var(--ink-75);
    /* Two lines, and the rest is on the listing - which is what a card is for. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- the three facts ----
 *
 * Not decoration. On Skye, knowing somewhere works in the rain settles the
 * morning; a fourth tag would stop being a fact and start being a word cloud.
 */

.dex-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
    padding: 0;
    list-style: none;
}

.dex-tags li {
    padding: 4px 9px;
    border: 1px solid var(--hairline);
    font-family: var(--sans);
    font-size: 10.5px;
    letter-spacing: .03em;
    color: var(--ink-75);
    white-space: nowrap;
}

.dex-meta { margin-top: 12px }

/* ---- the one act ---- */

.dex-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding-top: 0;
}

.dex-plan {
    display: inline-block;
    padding: 10px 16px;
    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;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s, color .2s;
}

.dex-plan:hover { background: var(--ink); color: var(--paper) }

/* Every tile one row tall, so the wall is always a clean rectangle; the
   variety comes from width alone. The component fills each row exactly. */
.pmo-wall { grid-auto-flow: row }
.pmo-f.is-t { grid-row: auto }

/* ---- before you go, as spreads ----
 *
 * Four subjects, each with a photograph and a side of the page, turning side
 * to side down the section. The first paragraph carries the point; the rest
 * sits behind "read on" - present in the page for anybody, and for Google,
 * but not making the section look like homework.
 */

#before .wrap { columns: auto; max-width: 1240px }

.rg-spread {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(24px, 4vw, 60px);
    align-items: start;
    margin-bottom: clamp(38px, 6vh, 68px);
}

.rg-spread.flip > .rg-shot { order: 2 }

@media (max-width: 800px) {
    .rg-spread { grid-template-columns: 1fr }
    .rg-spread.flip > .rg-shot { order: 0 }
}

.rg-shot { margin: 0 }

.rg-shot img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

.rg-shot figcaption {
    margin-top: 8px;
    font-family: var(--sans);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink-55);
}

.rg-words h3 {
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--moss);
    margin-bottom: 12px;
}

.rg-words p {
    font-family: var(--serif);
    font-size: clamp(15.5px, 1.25vw, 17px);
    line-height: 1.76;
    color: var(--ink-75);
}

.rg-words p + p { margin-top: 14px }

.rg-on { margin-top: 14px }

.rg-on summary {
    display: inline-block;
    cursor: pointer;
    list-style: none;
    font-family: var(--sans);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--moss);
    border-bottom: 1px solid var(--hairline);
    padding-bottom: 3px;
    transition: color .2s, border-color .2s;
}

.rg-on summary::-webkit-details-marker { display: none }
.rg-on summary:hover { color: var(--ink); border-color: var(--ink) }
.rg-on[open] summary { margin-bottom: 14px }
.rg-on[open] summary::after { content: " \2014 less" }

/* The tile is a link now, with a small button in the corner for looking at
   the photograph rather than going to the place. */
.pmo-f { display: block; padding: 0; border: 0; background: var(--hairline-soft) }

.pmo-go {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    text-decoration: none;
}

.pmo-big {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: rgba(24, 26, 22, .5);
    color: var(--paper);
    font-size: 13px;
    line-height: 1;
    cursor: zoom-in;
    opacity: 0;
    transition: opacity .25s, background .2s;
}

.pmo-f:hover .pmo-big,
.pmo-big:focus-visible { opacity: 1 }
.pmo-big:hover { background: rgba(24, 26, 22, .78) }

/* ---- the wall, in bands ----
 *
 * Every tile is placed on explicit lines by the component, so the grid only
 * needs to supply the tracks. Square-ish rows keep the shapes honest: a tall
 * tile is genuinely tall, a wide one genuinely wide.
 */

.pmo-wall {
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    grid-auto-rows: clamp(120px, 12vw, 176px);
    gap: 10px;
    grid-auto-flow: row;
}

.pmo-big {
    position: absolute;
    top: 9px;
    right: 9px;
    width: auto;
    height: auto;
    display: inline-block;
    padding: 5px 10px;
    border: 0;
    border-radius: 0;
    background: rgba(24, 26, 22, .55);
    color: var(--paper);
    font-family: var(--sans);
    font-size: 8.5px;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    cursor: zoom-in;
    opacity: 0;
    transition: opacity .25s, background .2s;
}

.pmo-f:hover .pmo-big,
.pmo-big:focus-visible { opacity: 1 }
.pmo-big:hover { background: rgba(24, 26, 22, .8) }

/* ---- a mention that goes somewhere ----
 *
 * Not a blue link in the middle of a paragraph. The word keeps the ink of the
 * text it sits in and takes a hairline underneath, which thickens and turns
 * moss when you point at it - the way a well-set book marks a cross-reference
 * rather than the way a web page shouts about one.
 */

.inlink {
    color: var(--ink);
    text-decoration: none;
    background-image: linear-gradient(var(--hairline), var(--hairline));
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: 0 calc(100% - 1px);
    transition: background-size .25s var(--ease, ease), color .2s;
}

.inlink:hover {
    color: var(--moss);
    background-image: linear-gradient(var(--moss), var(--moss));
    background-size: 100% 2px;
}

/* ---- 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.
 */

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

.gd .wrap { max-width: 760px }

.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);
}

.gd-next:hover strong { font-style: italic }

/* ---- 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-course a:hover .gd-t { font-style: italic }

.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) }

/* ---- plan this, from the page you are reading ----
 *
 * Somebody two thirds of the way down a region page has already decided where
 * they are going, so this is not an advertisement for a trip planner - it is
 * an offer to do the next thing with what they have just read. The sketch
 * beside it shows the shape of the answer rather than a picture of software:
 * nights down the side, the drive between them, and one still to fill in,
 * which is the part that makes somebody want to.
 */

.rpl {
    padding: clamp(52px, 8vh, 96px) 0;
    background: var(--ink);
    color: #F2EFE9;
}

.rpl-in {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: clamp(30px, 5vw, 74px);
    align-items: center;
}

@media (max-width: 900px) { .rpl-in { grid-template-columns: 1fr } }

.rpl-k {
    font-family: var(--sans);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #414042;
}

.rpl-words h2 {
    margin-top: 16px;
    font-family: var(--serif);
    font-weight: 500;
    font-size: min(clamp(30px, 4vw, 50px), 28px + (clamp(30px, 4vw, 50px) - 28px) * 0.6);
    line-height: 1.06;
    letter-spacing: -.022em;
    color: #F7F4EE;
    text-wrap: balance;
}

.rpl-words h2 em { font-style: italic }

.rpl-say {
    margin-top: 18px;
    max-width: 46ch;
    font-family: var(--serif);
    font-size: clamp(16px, 1.4vw, 18px);
    line-height: 1.65;
    color: rgba(242, 239, 233, .78);
}

.rpl-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 34px;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}

.rpl-list li { display: flex; flex-direction: column; gap: 3px }

.rpl-list strong {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 25px;
    color: #F7F4EE;
    font-variant-numeric: tabular-nums;
}

.rpl-list span {
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: .1em;
    color: rgba(242, 239, 233, .6);
}

.rpl-go {
    margin-top: 30px;
    padding: 15px 28px;
    border: 0;
    background: #F2EFE9;
    color: var(--ink);
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s, transform .2s var(--ease, ease);
}

.rpl-go:hover { background: #fff; transform: translateY(-1px) }

.rpl-fine {
    margin-top: 13px;
    font-family: var(--serif);
    font-style: italic;
    font-size: 13.5px;
    color: rgba(242, 239, 233, .55);
}

/* ---- the book, with their trip on it ----
 *
 * The region page is already drawn as a mini guidebook - the cover in the
 * header carries the real one's proportions, 190 x 148mm - so the offer beside
 * it is that book with their name on it rather than a screenshot of software.
 * The contents page shows behind the cover, two chapters written and one
 * still blank, which is the invitation.
 */

.rpl-book {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 340px;
    perspective: 1400px;
}

/* 190 x 148mm, the real book's proportions. */
.rpl-cover {
    position: relative;
    z-index: 2;
    width: min(268px, 62%);
    aspect-ratio: 148 / 190;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 11px;
    padding: 30px 26px;
    background: #414042;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
    transform: rotate(-3.5deg);
    transition: transform .5s var(--ease, ease);
}

.rpl-in:hover .rpl-cover { transform: rotate(-5deg) translateY(-5px) }

.rpl-cimp {
    font-family: var(--sans);
    font-size: 8px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .68);
}

.rpl-ctitle {
    font-family: var(--serif);
    font-weight: 500;
    font-size: min(clamp(23px, 2.4vw, 31px), 28px + (clamp(23px, 2.4vw, 31px) - 28px) * 0.6);
    line-height: 1.08;
    letter-spacing: -.018em;
    color: #FBF9F5;
    text-wrap: balance;
}

.rpl-crule {
    width: 34px;
    height: 1px;
    background: rgba(255, 255, 255, .5);
}

.rpl-cfor {
    font-family: var(--serif);
    font-style: italic;
    font-size: 14px;
    color: rgba(255, 255, 255, .78);
}

/* The contents page, showing from behind the cover. */
.rpl-leaf {
    position: absolute;
    z-index: 1;
    right: 2%;
    top: 12%;
    width: min(238px, 56%);
    padding: 20px 20px 22px;
    background: #F6F3ED;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .32);
    transform: rotate(4deg);
    transition: transform .5s var(--ease, ease);
}

.rpl-in:hover .rpl-leaf { transform: rotate(6deg) translateX(9px) }

.rpl-lk {
    font-family: var(--sans);
    font-size: 8px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--moss);
    padding-bottom: 9px;
    border-bottom: 1px solid rgba(65, 64, 66, .18);
}

.rpl-leaf ol { list-style: none; margin: 0; padding: 0 }

.rpl-leaf li {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 2px 6px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(65, 64, 66, .1);
}

.rpl-leaf li:last-child { border-bottom: 0 }

.rpl-leaf li span {
    grid-row: span 2;
    font-family: var(--sans);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .1em;
    color: rgba(65, 64, 66, .42);
    padding-top: 3px;
}

.rpl-leaf li strong {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 14.5px;
    line-height: 1.25;
    color: #414042;
}

.rpl-leaf li em {
    font-family: var(--serif);
    font-style: italic;
    font-size: 11.5px;
    color: rgba(65, 64, 66, .5);
}

/* The chapter nobody has written yet. */
.rpl-blank strong { color: rgba(65, 64, 66, .38) !important }

.rpl-blank {
    border-top: 1px dashed rgba(65, 64, 66, .22);
    margin-top: 2px;
}

@media (max-width: 900px) {
    .rpl-book { min-height: 300px; margin-top: 12px }
    .rpl-leaf { right: 0 }
}

@media (max-width: 520px) {
    .rpl-leaf { display: none }
    .rpl-cover { width: 210px; transform: rotate(-2.5deg) }
}

@media (prefers-reduced-motion: reduce) {
    .rpl-cover, .rpl-leaf { transition: none }
    .rpl-in:hover .rpl-cover { transform: rotate(-3.5deg) }
    .rpl-in:hover .rpl-leaf { transform: rotate(4deg) }
}

/* ---- how a section opens ----
 *
 * A floating moss dash beside a heading is a mark with nothing behind it. A
 * rule that carries a fact is a magazine opening a section: the count at the
 * left, the line running the width of the column, and the way out at the far
 * end. The heading then has room to be the size it deserves.
 *
 * Only headings that were given a fact take this - a rule with a label on it
 * promises information, and a decorative one is worse than no rule at all.
 */

.sec-head:has(.sh-top) {
    display: block;
    margin-bottom: clamp(24px, 3.4vh, 38px);
}

/* The old floating dash has no place here; the rule does its job. */
.sec-head:has(.sh-top)::before { display: none }

.sh-top {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: clamp(14px, 2vh, 22px);
}

.sh-note {
    flex: 0 0 auto;
    font-family: var(--sans);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--moss);
    white-space: nowrap;
}

/* Printed, not animated.
 *
 * This began as a rule that drew itself out from the count as the section
 * arrived, which was nicer - and which left the line invisible on any browser
 * where the transition did not run, because the whole thing hung on an
 * animation completing. The heading already arrives as a whole on .rv; the
 * rule underneath it is structure, and structure does not get to be
 * conditional on a transition. */
.sh-rule {
    flex: 1;
    height: 1px;
    background: var(--hairline);
}

.sec-head:has(.sh-top) .sh-r {
    margin-left: 0;
    flex: 0 0 auto;
    border-bottom: 0;
    padding-bottom: 0;
    font-size: 10px;
    letter-spacing: .18em;
    color: var(--ink-55);
}

.sec-head:has(.sh-top) .sh-r:hover { color: var(--ink) }

/* With the rule carrying the label, the heading can be the size it should
   have been all along. */
.sec-head:has(.sh-top) h2 {
    font-size: min(clamp(30px, 3.6vw, 52px), 28px + (clamp(30px, 3.6vw, 52px) - 28px) * 0.6);
    line-height: 1.02;
    letter-spacing: -.026em;
    text-wrap: balance;
    max-width: 20ch;
}

/* On the dark bands the same rule has to read against ink. */
.rpl .sh-note, .tl .sh-note { color: #414042 }
.rpl .sh-rule, .tl .sh-rule { background: rgba(242, 239, 233, .26) }
.rpl .sec-head h2, .tl .sec-head h2 { color: #F7F4EE }
.rpl .sh-r, .tl .sh-r { color: rgba(242, 239, 233, .62) }
.rpl .sh-r:hover, .tl .sh-r:hover { color: #F7F4EE }

@media (max-width: 560px) {
    .sh-top { flex-wrap: wrap; gap: 10px }
    .sh-rule { min-width: 40px }
}



/* Four routes across, matching the listing shelves above them. */
.dexgrid.four { grid-template-columns: repeat(4, minmax(0, 1fr)) }
@media (max-width: 1100px) { .dexgrid.four { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 600px) { .dexgrid.four { grid-template-columns: 1fr } }

/* Where a route calls, in its own order - so these are not sorted or styled
   as filters the way a listing tag is. */
.dex-calls li { border-style: dashed }

/* ---- the people who live there ----
 *
 * The printed guide stops every dozen pages and lets somebody who lives on
 * the island talk instead, in a panel headed "Locals tips". This is that
 * panel: a card with the heading printed small at the top, the person, what
 * they said, and where they would send you.
 *
 * It leads on the words rather than the face, which is both the right
 * emphasis and the honest one - we have their quotes on file and not yet
 * their photographs. Until a portrait arrives their own shopfront fills the
 * circle, and failing that their initials, so the card never shows a grey
 * silhouette where a person should be.
 */

.loc { padding: clamp(48px, 7vh, 88px) 0 }

.loc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: clamp(16px, 2vw, 26px);
}

.loc-c {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 22px 22px 20px;
    border: 1px solid var(--hairline);
    background: var(--paper);
    transition: border-color .3s;
}

.loc-c:hover { border-color: var(--ink) }

.loc-k {
    font-family: var(--sans);
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--moss);
}

/* ---- who they are ---- */

.loc-who { display: flex; align-items: center; gap: 14px }

.loc-face {
    flex: 0 0 auto;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: var(--moss);
}

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

.loc-mark {
    font-family: var(--sans);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: .06em;
    color: var(--paper);
}

.loc-name { display: flex; flex-direction: column; gap: 3px; min-width: 0 }

.loc-name strong {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 19px;
    line-height: 1.2;
    color: var(--ink);
}

.loc-name em {
    font-family: var(--serif);
    font-style: italic;
    font-size: 13.5px;
    color: var(--ink-75);
}

.loc-name > span {
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-55);
}

/* ---- what they said ----
 *
 * The quote is the panel. It takes the size that says so, and an open quote
 * mark hung into the margin the way a book sets one.
 */

.loc-q { margin: 0; position: relative; padding-left: 20px }

.loc-q::before {
    content: "\201C";
    position: absolute;
    left: -2px;
    top: -6px;
    font-family: var(--serif);
    font-size: min(38px, 28px + (38px - 28px) * 0.6);
    line-height: 1;
    color: var(--moss);
    opacity: .5;
}

.loc-q p {
    font-family: var(--serif);
    font-size: clamp(15.5px, 1.35vw, 17.5px);
    line-height: 1.56;
    color: var(--ink);
}

/* ---- where they would send you ---- */

.loc-tips {
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid var(--hairline);
}

.loc-tk {
    font-family: var(--sans);
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink-55);
    margin-bottom: 10px;
}

.loc-tips ul { list-style: none; margin: 0; padding: 0 }

.loc-tips li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 3px 9px;
    padding: 5px 0;
}

.loc-tips a {
    font-family: var(--serif);
    font-size: 15.5px;
    color: var(--ink);
    text-decoration: none;
    background-image: linear-gradient(var(--hairline), var(--hairline));
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: 0 calc(100% - 1px);
    transition: background-size .25s, color .2s;
}

.loc-tips a:hover { color: var(--moss); background-size: 100% 2px }

.loc-tips li span {
    font-family: var(--serif);
    font-style: italic;
    font-size: 13px;
    color: var(--ink-55);
}

/* ---- the way out ---- */

.loc-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    align-items: center;
}

.loc-foot:empty { display: none }

.loc-go, .loc-read {
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    text-decoration: none;
}

.loc-go { color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 3px }
.loc-go:hover { color: var(--moss); border-color: var(--moss) }

.loc-read { color: var(--moss) }
.loc-read:hover { color: var(--ink) }

@media (max-width: 520px) {
    .loc-c { padding: 18px }
    .loc-face { width: 50px; height: 50px }
}

/* ---- the questions, as something you can find an answer in ----
 *
 * Twenty-seven questions in two columns of accordions is a wall. The eye does
 * not know whether to read down or across, the group headings get lost
 * between the columns, and somebody who came to find out about parking at the
 * Storr has to read every heading to learn that we answered it.
 *
 * So there is a box to type in and a row of subjects to narrow by, and the
 * questions themselves run down one column at a width you can read. The
 * answers stay in the markup and are collapsed with CSS, so everything is on
 * the page whether or not anybody opens it.
 */

.qa { padding: clamp(48px, 7vh, 88px) 0 }

/* ---- finding ---- */

.qa-bar { margin-bottom: clamp(20px, 3vh, 30px) }

.qa-find {
    display: flex;
    align-items: center;
    gap: 14px;
    border-bottom: 1px solid var(--ink);
    padding-bottom: 10px;
}

.qa-lbl {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.qa-in {
    flex: 1;
    border: 0;
    background: transparent;
    font-family: var(--serif);
    font-size: min(clamp(18px, 1.8vw, 24px), 28px + (clamp(18px, 1.8vw, 24px) - 28px) * 0.6);
    color: var(--ink);
    padding: 4px 0;
}

.qa-in::placeholder { color: var(--ink-55); font-style: italic }
.qa-in:focus { outline: none }
.qa-find:focus-within { border-bottom-width: 2px; padding-bottom: 9px }

.qa-in::-webkit-search-cancel-button { cursor: pointer }

.qa-n {
    flex: 0 0 auto;
    font-family: var(--sans);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-55);
    white-space: nowrap;
}

/* ---- narrowing ---- */

.qa-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.qa-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border: 1px solid var(--hairline);
    background: transparent;
    font-family: var(--sans);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-75);
    cursor: pointer;
    transition: border-color .2s, background .2s, color .2s;
}

.qa-tab span {
    font-size: 9px;
    color: var(--ink-55);
    font-variant-numeric: tabular-nums;
}

.qa-tab:hover { border-color: var(--ink) }
.qa-tab.on { background: var(--ink); border-color: var(--ink); color: var(--paper) }
.qa-tab.on span { color: rgba(251, 249, 246, .65) }

/* ---- the answers ---- */

.qa-list { max-width: 860px }

.qa-g + .qa-g { margin-top: clamp(22px, 3vh, 34px) }

.qa-h {
    font-family: var(--sans);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--moss);
    padding-bottom: 9px;
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 2px;
}

.qa-i { border-bottom: 1px solid var(--hairline) }

.qa-q {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 17px 0;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    color: var(--ink);
}

.qa-q span {
    font-family: var(--serif);
    font-size: clamp(16px, 1.4vw, 18.5px);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -.008em;
}

.qa-q:hover span { color: var(--moss) }

/* A plus that becomes a minus, drawn rather than set in a font so it is the
   same weight as the hairlines around it. */
.qa-q i {
    flex: 0 0 auto;
    position: relative;
    width: 13px;
    height: 13px;
    margin-top: 6px;
}

.qa-q i::before, .qa-q i::after {
    content: "";
    position: absolute;
    background: var(--ink-55);
    transition: transform .3s var(--ease, ease), background .2s;
}

.qa-q i::before { left: 0; right: 0; top: 6px; height: 1px }
.qa-q i::after { top: 0; bottom: 0; left: 6px; width: 1px }

.qa-i.on .qa-q i::after { transform: scaleY(0) }
.qa-q:hover i::before, .qa-q:hover i::after { background: var(--ink) }

/* Collapsed by grid rather than by unmounting, so the words are on the page
   whether or not anybody opens them. */
.qa-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .32s var(--ease, ease);
}

.qa-i.on .qa-wrap { grid-template-rows: 1fr }

.qa-a {
    overflow: hidden;
    font-family: var(--serif);
    font-size: 16px;
    line-height: 1.72;
    color: var(--ink-75);
    max-width: 68ch;
}

.qa-i.on .qa-a { padding-bottom: 20px }

.qa-a p + p { margin-top: .9em }
.qa-a ul, .qa-a ol { margin: .8em 0 .8em 1.15em }
.qa-a li { margin-bottom: .35em }

.qa-none {
    max-width: 60ch;
    margin-bottom: 24px;
    font-family: var(--serif);
    font-style: italic;
    font-size: 17px;
    line-height: 1.6;
    color: var(--ink-75);
}

.qa-none a { color: var(--ink) }

@media (prefers-reduced-motion: reduce) {
    .qa-wrap, .qa-q i::before, .qa-q i::after { transition: none }
}

/* ---- the folklore ----
 *
 * Borrowed wholesale from the folklore pages, because this is the same
 * material: ink ground, bone type, centred like something read aloud rather
 * than set in columns like something filed. Full bleed, so the page changes
 * temperature when you reach it - you have left the listings and gone
 * somewhere older.
 *
 * The hand-drawn stamps do real work as well as decorative. Most of these
 * tales have a weak photograph or none at all, and an ink mark is a far
 * better answer to that than a stock picture of a loch.
 */

.tl {
    position: relative;
    overflow: hidden;
    background: #414042;
    color: #F1ECE2;
    padding: clamp(56px, 9vh, 108px) 0 clamp(48px, 8vh, 92px);
}

/* The night scene sits behind everything, low and wide, so it reads as the
   sky the section stands under rather than as a picture in it. */
.tl-sky {
    position: absolute;
    left: 50%;
    top: 0;
    width: min(1500px, 130%);
    transform: translateX(-50%);
    opacity: .42;
    pointer-events: none;
    user-select: none;
}

.tl-in {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 60px);
}

/* ---- how it opens ---- */

.tl-head { text-align: center }

.tl-kick {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    font-family: var(--sans);
    font-size: 10.5px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: rgba(223, 214, 194, .65);
}

.tl-kick span {
    width: clamp(24px, 5vw, 54px);
    height: 1px;
    background: rgba(223, 214, 194, .4);
}

.tl-head h2 {
    margin-top: 18px;
    font-family: var(--serif);
    font-weight: 500;
    font-size: min(clamp(38px, 6vw, 78px), 28px + (clamp(38px, 6vw, 78px) - 28px) * 0.6);
    line-height: .98;
    letter-spacing: -.03em;
    color: #F7F4EE;
}

.tl-stand {
    max-width: 620px;
    margin: clamp(16px, 2.5vh, 24px) auto 0;
    font-family: var(--serif);
    font-size: clamp(15.5px, 1.4vw, 18px);
    line-height: 1.75;
    color: rgba(241, 236, 226, .72);
}

.tl-meta {
    margin-top: clamp(14px, 2vh, 20px);
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: rgba(223, 214, 194, .5);
}

/* ---- the one to read first ---- */

.tl-lead {
    display: block;
    max-width: 640px;
    margin: clamp(34px, 5vh, 58px) auto 0;
    padding: clamp(26px, 4vh, 40px) clamp(22px, 3vw, 40px) clamp(22px, 3vh, 32px);
    border: 1px solid rgba(223, 214, 194, .28);
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: border-color .3s, background .3s;
}

.tl-lead:hover { border-color: rgba(223, 214, 194, .6); background: rgba(223, 214, 194, .04) }

.tl-stamp {
    display: block;
    width: 58px;
    height: auto;
    margin: 0 auto clamp(16px, 2.5vh, 24px);
    color: #DFD6C2;
    opacity: .85;
}

.tl-lead h3 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: min(clamp(25px, 2.8vw, 38px), 28px + (clamp(25px, 2.8vw, 38px) - 28px) * 0.6);
    line-height: 1.1;
    letter-spacing: -.022em;
    color: #F7F4EE;
    text-wrap: balance;
}

.tl-lead:hover h3 { font-style: italic }

.tl-lead p {
    margin-top: 14px;
    font-family: var(--serif);
    font-size: 15.5px;
    line-height: 1.66;
    color: rgba(241, 236, 226, .7);
}

.tl-go {
    display: inline-flex;
    align-items: baseline;
    gap: 12px;
    margin-top: 22px;
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #DFD6C2;
    border-bottom: 1px solid rgba(223, 214, 194, .45);
    padding-bottom: 5px;
}

.tl-go em {
    font-style: normal;
    font-size: 9px;
    letter-spacing: .16em;
    color: rgba(223, 214, 194, .5);
}

/* ---- and the rest ---- */

.tl-more {
    max-width: 640px;
    margin: clamp(28px, 4vh, 44px) auto 0;
    padding: 0;
    list-style: none;
}

.tl-more li { border-bottom: 1px solid rgba(223, 214, 194, .16) }
.tl-more li:first-child { border-top: 1px solid rgba(223, 214, 194, .16) }

.tl-more a {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 15px 4px;
    text-decoration: none;
    color: inherit;
}

.tl-mark {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    color: rgba(223, 214, 194, .55);
    transition: color .3s, transform .5s var(--ease, ease);
}

.tl-more a:hover .tl-mark { color: #DFD6C2; transform: rotate(-8deg) }

.tl-t {
    flex: 1;
    font-family: var(--serif);
    font-size: clamp(16.5px, 1.5vw, 20px);
    line-height: 1.28;
    color: #F1ECE2;
}

.tl-more a:hover .tl-t { font-style: italic }

.tl-m {
    flex: 0 0 auto;
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(223, 214, 194, .45);
    white-space: nowrap;
}

.tl-all { text-align: center; margin-top: clamp(24px, 3.5vh, 36px) }

.tl-all a {
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(223, 214, 194, .7);
    text-decoration: none;
}

.tl-all a:hover { color: #F7F4EE }

/* ---- who tells them ---- */

.tl-who {
    max-width: 720px;
    margin: clamp(40px, 6vh, 70px) auto 0;
    padding-top: clamp(24px, 3vh, 34px);
    border-top: 1px solid rgba(223, 214, 194, .2);
    text-align: center;
}

.tl-wk {
    font-family: var(--sans);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(223, 214, 194, .55);
    margin-bottom: 18px;
}

.tl-who ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px clamp(20px, 3vw, 40px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.tl-who a { display: flex; align-items: center; gap: 12px; text-decoration: none }

.tl-who img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    filter: grayscale(.35);
    transition: filter .3s, transform .3s var(--ease, ease);
}

.tl-who a:hover img { filter: none; transform: scale(1.05) }

.tl-who span { display: flex; flex-direction: column; gap: 2px; text-align: left }

.tl-who strong {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 15.5px;
    color: #F1ECE2;
}

.tl-who a:hover strong { font-style: italic }

.tl-who em {
    font-style: normal;
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(223, 214, 194, .45);
}

@media (max-width: 620px) {
    .tl-sky { width: 200%; opacity: .3 }
    .tl-head h2 { font-size: min(clamp(34px, 12vw, 46px), 28px + (clamp(34px, 12vw, 46px) - 28px) * 0.6) }
}

@media (prefers-reduced-motion: reduce) {
    .tl-mark, .tl-who img { transition: none }
    .tl-more a:hover .tl-mark, .tl-who a:hover img { transform: none }
}

/* ---- before you go, set as the book's contents page ----
 *
 * Four long passages used to sit here one after another and almost nobody
 * reached the end of them. Each is a page of its own now, so what stands here
 * is the front matter: chapter number, what the chapter answers, and leader
 * dots running out to the reading time where a page number would be.
 *
 * The question under each title is the line that earns its place. A chapter is
 * titled the way a book titles one - "Getting around Skye" - which is right on
 * the chapter and no help in a list somebody is scanning for their own
 * question.
 *
 * Reading one earns a stamp in the same ink hand as the folklore pages, and it
 * lands crooked the way a real one does. It is a small thing and it is the
 * whole difference between a checklist, which is admin, and a passport, which
 * people fill in on purpose.
 */

.cnt {
    --edition: var(--moss);
    margin-top: clamp(22px, 3vh, 34px);
    max-width: 860px;
    /* The book's own edge, in the colour this region would be printed in. */
    border-left: 3px solid var(--edition);
    padding-left: clamp(18px, 3vw, 34px);
}

.cnt-top {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--ink);
}

.cnt-k {
    font-family: var(--sans);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--edition);
}

.cnt-say {
    font-family: var(--serif);
    font-style: italic;
    font-size: 14.5px;
    color: var(--ink-55);
}

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

/* A chapter line, with the stamp sitting in the margin beside it. */
.cnt-ch {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--hairline);
}

.cnt-row {
    flex: 1;
    display: flex;
    align-items: baseline;
    gap: clamp(12px, 2vw, 22px);
    padding: 17px 0;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

.cnt-n {
    flex: 0 0 auto;
    font-family: var(--serif);
    font-size: 13px;
    color: var(--ink-55);
    font-variant-numeric: tabular-nums;
    padding-top: 2px;
}

.cnt-words { display: flex; flex-direction: column; gap: 4px; min-width: 0 }

.cnt-t {
    font-family: var(--serif);
    font-size: clamp(18px, 1.7vw, 23px);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.014em;
    color: var(--ink);
}

.cnt-row:hover .cnt-t { font-style: italic }

/* The question, in the reader's words rather than the book's. */
.cnt-q {
    font-family: var(--serif);
    font-style: italic;
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--ink-55);
}

/* Leader dots, as a contents page sets them. */
.cnt-dots {
    flex: 1 1 40px;
    min-width: 24px;
    align-self: flex-end;
    height: 1px;
    margin-bottom: 6px;
    background-image: radial-gradient(circle, var(--ink-55) .8px, transparent .8px);
    background-size: 6px 1px;
    background-repeat: repeat-x;
    opacity: .6;
}

.cnt-p {
    flex: 0 0 auto;
    font-family: var(--sans);
    font-size: 9.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-55);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ---- the stamp ---- */

.cnt-stamp {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px dashed var(--hairline);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: border-color .25s, background .25s;
}

.cnt-stamp:hover { border-color: var(--edition) }

.cnt-stamp img {
    width: 30px;
    height: 30px;
    opacity: 0;
    transform: scale(.6) rotate(14deg);
    transition: opacity .3s var(--ease, ease), transform .35s cubic-bezier(.34, 1.56, .64, 1);
}

/* Landed: full ink, slightly crooked, and the ring goes solid. */
.cnt-ch.done .cnt-stamp {
    border-style: solid;
    border-color: var(--edition);
    background: color-mix(in srgb, var(--edition) 9%, transparent);
}

.cnt-ch.done .cnt-stamp img {
    opacity: .9;
    transform: scale(1) rotate(-7deg);
}

.cnt-ch.done .cnt-t { color: var(--ink-55) }
.cnt-ch.done .cnt-n { color: var(--edition) }

@media (max-width: 620px) {
    .cnt-dots, .cnt-p { display: none }
    .cnt-stamp { width: 38px; height: 38px }
    .cnt-stamp img { width: 24px; height: 24px }
}

@media (prefers-reduced-motion: reduce) {
    .cnt-stamp, .cnt-stamp img { transition: none }
    .cnt-ch.done .cnt-stamp img { transform: rotate(-7deg) }
}

/* Paging a shelf rather than cutting it short. */
.shelf-more { display: flex; align-items: center; gap: 18px; margin-top: 26px }
.shelf-more button { padding: 12px 22px; 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 }
.shelf-more button:hover { background: var(--ink); color: var(--paper) }
.shelf-more span { font-family: var(--sans); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-55); font-variant-numeric: tabular-nums }

/* The corner button holds a mark now, not the word "Larger" - which never
   fitted the 30px circle it sat in and read as part of the photograph. */
.pmo-big svg { width: 13px; height: 13px; display: block }

/* ---- the "Locals tips" label is gone ----
 *
 * It sat at the top of every card announcing what the card obviously was, and
 * on the three panels with no recommendations it was a promise the card did
 * not keep. The question the person was asked does that work honestly, and
 * only appears where there is an answer under it.
 */

.loc-k { display: none }

/* The person leads, at the size a person should. */
.loc-c { gap: 17px; padding: 24px 24px 22px }

.loc-face { width: 66px; height: 66px }
.loc-name strong { font-size: 20px }

/* The quote is what they said about the island, so it is set as speech and
   given the room to be read rather than skimmed. */
.loc-q { padding-left: 22px }

.loc-q::before { font-size: min(44px, 28px + (44px - 28px) * 0.6); top: -10px }

.loc-q p {
    font-size: clamp(16px, 1.45vw, 18.5px);
    line-height: 1.58;
    font-style: italic;
    color: var(--ink);
}

/* ---- their answer ---- */

.loc-ask {
    font-family: var(--serif);
    font-size: 14px;
    font-style: italic;
    color: var(--ink-55);
    margin-bottom: 11px;
}

.loc-tips li { padding: 6px 0 }

.loc-tips a { font-size: 16.5px }

/* A panel with a good line but nowhere to send you is still worth printing -
   it just does not pretend to be a tip, and it steps back a little. */
.loc-quiet { background: transparent }
.loc-quiet .loc-q p { font-size: 16px }

/* ---- the Skye plate ----
 *
 * A relief print, so it behaves like one: its own cream paper, hung on the
 * ink ground of the section rather than bled into it. The earlier version
 * washed a drawing across the background at 40% and it read as a stain; a
 * print reads as a print only when you can see where the paper stops.
 */

.tl-sky { display: none }

.tl-plate {
    margin: 0 auto clamp(26px, 4vh, 44px);
    max-width: 660px;
    line-height: 0;
    box-shadow: 0 22px 54px rgba(0, 0, 0, .5);
    transform: rotate(-.5deg);
}

.tl-plate img { width: 100%; height: auto; display: block }

@media (max-width: 620px) {
    .tl-plate { max-width: 100%; transform: none }
}

/* ---- a tale, on its own page ----
 *
 * The folklore sheet already draws .fk, .fk-hero, .fk-stand, .fk-listen and
 * the rest. What it has no rules for is the pieces this page adds: the cut
 * plates, and the rail inside the narration player. Everything here is either
 * new or a correction, never a restatement of the design.
 */

/* The plate at the head, and the one inside the telling. A print hangs on the
   page rather than bleeding into it, so both keep their paper and their edge. */
.fk-scene {
    margin: clamp(24px, 4vh, 44px) auto 0;
    max-width: 560px;
    line-height: 0;
    box-shadow: 0 20px 48px rgba(0, 0, 0, .34);
}

.fk-scene img, .fk-inset img { width: 100%; height: auto; display: block }

.fk-inset {
    margin: clamp(30px, 5vh, 52px) 0;
    line-height: 0;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .3);
    /* Wider than the measure, because a plate is a breath in a long read and
       it should feel like one. */
    width: calc(100% + clamp(0px, 6vw, 90px));
    margin-left: calc(clamp(0px, 3vw, 45px) * -1);
    transform: rotate(-.4deg);
}

@media (max-width: 700px) {
    .fk-inset { width: 100%; margin-left: 0; transform: none }
}

/* ---- the rail inside the player ----
 *
 * The design draws .fk-rail as a 16px hit area and stops there; it never says
 * what runs inside it.
 */

.fk-rail {
    position: relative;
    background: transparent;
}

.fk-rail::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 2px;
    transform: translateY(-50%);
    background: var(--hairline, rgba(65, 64, 66, .18));
}

.fk-rail span {
    position: absolute;
    left: 0; top: 50%;
    height: 2px;
    transform: translateY(-50%);
    background: var(--forest, #414042);
    transition: width .2s linear;
}

.fk-rail:focus-visible { outline: 2px solid var(--forest, #414042); outline-offset: 3px }

.fk-lb strong {
    display: block;
    font-family: var(--serif);
    font-weight: 500;
    font-size: 17px;
    color: var(--ink);
}

.fk-play svg { display: block }

/* ---- the way out ---- */

.fk-back {
    display: inline-block;
    font-family: var(--sans);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink-55);
    text-decoration: none;
    border-bottom: 1px solid var(--hairline);
    padding-bottom: 4px;
}

.fk-back:hover { color: var(--ink); border-color: var(--ink) }

/* The stamp that closes a piece: the folklore sheet sizes it, but it is an
   <img> here rather than an inline svg, so it needs its own colour handling. */
.fk-stamp { opacity: .8 }

/* ---- whose tale it is ----
 *
 * A byline under the standfirst and a fuller credit at the foot, which is
 * where a magazine puts one. Written and read by the same person here, so it
 * says both - a narrator credit that names nobody is worth nothing.
 */

.fk-meta a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}

.fk-meta a:hover { color: var(--ink) }

.fk-who {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 60px) clamp(30px, 5vh, 50px);
}

.fk-who-in {
    display: flex;
    align-items: flex-start;
    gap: clamp(16px, 2.4vw, 26px);
    padding: clamp(20px, 3vh, 28px);
    border: 1px solid var(--hairline);
    background: var(--paper);
    text-decoration: none;
    color: var(--ink);
    transition: border-color .3s;
}

.fk-who-in:hover { border-color: var(--ink) }

.fk-who img {
    flex: 0 0 auto;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    object-fit: cover;
    filter: grayscale(.25);
    transition: filter .3s;
}

.fk-who-in:hover img { filter: none }

.fk-who span { display: flex; flex-direction: column; gap: 5px }

.fk-who em {
    font-family: var(--sans);
    font-style: normal;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--moss);
}

.fk-who strong {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 21px;
    letter-spacing: -.012em;
}

.fk-who-in:hover strong { font-style: italic }

.fk-who-line {
    font-family: var(--serif);
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink-75);
}

.fk-who-go {
    margin-top: 4px;
    font-family: var(--sans);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-55);
}

@media (max-width: 520px) {
    .fk-who-in { flex-direction: column }
    .fk-who img { width: 66px; height: 66px }
}

/* ---- the running head ------------------------------------------
 *
 * A printed guide tells you which chapter you are in and how far
 * through the book you have got. This does both, and drops the 01-06
 * numbering that promised a sequence nobody follows.
 *
 * These rules are the only ones for it. A second set lived in the
 * shared stylesheet - 13px links in bordered chips - and the two
 * fought: the chips won the padding, this won the type, and the bar
 * came out cramped with an underline laid over a border. That set is
 * overridden below rather than left to argue.
 * ---------------------------------------------------------------- */

.glance {
    position: sticky;
    top: 64px;
    z-index: 45;
    background: var(--ground);
    border-top: 1px solid var(--hairline-soft);
    border-bottom: 1px solid var(--hairline-soft);
    /* Room. It had ten pixels top and bottom and the chapter names sat
       on the rules. */
    padding: 6px 0;
}

/* How far down the guide. One hairline, and the only thing on a very
   long page that can answer the question. */
.g-through {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--moss);
    transform-origin: left center;
    transition: transform .12s linear;
    pointer-events: none;
}

.glance .g-in {
    display: flex;
    align-items: stretch;
    gap: clamp(16px, 3vw, 40px);
}

.glance ol {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: stretch;
    gap: clamp(16px, 2.2vw, 34px);
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-behavior: smooth;
}

.glance ol::-webkit-scrollbar { display: none }

.glance li { flex: none; display: flex; align-items: stretch }

/* No chip, no border box: a name in the guide's own serif, with the
   count set beside it. The underline marks where you are and nothing
   else is drawn. */
.glance ol a,
.glance a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 0 15px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    white-space: nowrap;
    font-family: var(--serif);
    font-size: clamp(14px, 1.15vw, 16.5px);
    line-height: 1;
    color: var(--ink-55);
    text-decoration: none;
    transition: color .2s, border-color .2s;
}

.glance ol a:hover,
.glance a:hover { color: var(--ink); border-bottom-color: var(--hairline) }

/* How much is in it - which is worth knowing, where "04" was not. */
.glance ol b,
.glance a b {
    font-family: var(--sans);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .1em;
    color: var(--moss);
    font-variant-numeric: tabular-nums;
    position: relative;
    top: -1px;
}

/* Where you are. */
.glance ol a.on,
.glance li.cur a {
    color: var(--ink);
    border-bottom-color: var(--ink);
    background: none;
    font-style: italic;
}

/* The drive between two stops.
 *
 * This used to be `.lnk`, set above the stop before it, which made a row of
 * durations that appeared to belong to the places rather than the roads.
 * Here it sits in the gap it describes, held between two short rules, in
 * the sans so it reads as measurement rather than as another stop. */
.glance .hop {
    align-items: center;
    pointer-events: none;
}

.glance .hop > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--sans);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ink-55);
    opacity: .75;
    font-variant-numeric: tabular-nums;
}

/* The road itself. Drawn, not written. */
.glance .hop i {
    display: block;
    width: clamp(14px, 2vw, 30px);
    height: 1px;
    background: var(--hairline);
}

/* Said aloud but not shown - "12 min" alone is ambiguous to a screen
   reader, and "12 min to the next stop" is not. */
.glance .vh {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* There is more to the right. Say so.
 *
 * The row has always scrolled; nothing ever showed that it did, so the last
 * stop simply looked cut off. The mask fades the right-hand edge only while
 * something is still out there. */
.glance ol {
    scroll-padding-inline: 24px;
    -webkit-mask-image: linear-gradient(to right,
        #000 0, #000 calc(100% - 42px), transparent 100%);
    mask-image: linear-gradient(to right,
        #000 0, #000 calc(100% - 42px), transparent 100%);
}

.glance .g-act {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    /* Never squeezed, never clipped: the row beside it is what gives way. */
    margin-inline-start: auto;
}

.glance .g-act .btn-forest {
    padding: 12px 20px;
    font-size: 9.5px;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .glance { top: 56px }
    .glance .g-act { display: none }
    .glance ol a, .glance a { padding: 14px 0 13px }
}

@media (prefers-reduced-motion: reduce) {
    .g-through { transition: none }
    .glance ol { scroll-behavior: auto }
}

/* ---- the lead tale's crest ----
 *
 * A detail of the tale's own plate, cut to a circle: the head of the cross
 * and the gold behind it. It was a small black stamp that could have belonged
 * to any story on the site, and at that size it read as a smudge.
 */

.tl-crest {
    display: block;
    width: clamp(96px, 11vw, 132px);
    height: clamp(96px, 11vw, 132px);
    margin: 0 auto clamp(16px, 2.5vh, 24px);
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid rgba(223, 214, 194, .28);
    background: #EDE4D0;
}

.tl-crest img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Framed on the cross head and its sunburst, which sit a third of the
       way down the plate. */
    object-position: 50% 30%;
    transform: scale(2.5);
    transition: transform .7s var(--ease, ease);
}

.tl-lead:hover .tl-crest img { transform: scale(2.62) }

/* The row marks carry the gold, so they should not be dimmed to nothing. */
.tl-mark { opacity: .95 }
.tl-more a:hover .tl-mark { opacity: 1 }

@media (prefers-reduced-motion: reduce) {
    .tl-crest img { transition: none }
    .tl-lead:hover .tl-crest img { transform: scale(2.5) }
}

/* ---- the desk ----
 *
 * One scene at a time, at one width, in the guide's own colours.
 *
 * It was a chat log first, which fills up and scrolls, and then a panel that
 * widened when results arrived - which turned out to take concentration away
 * rather than give room: a surface that changes size mid-conversation is a
 * moving target. One width, always, and the layout inside it does the work.
 *
 * The palette is declared once here as the panel's own tokens rather than
 * scattered through the rules, so it stays the ink-and-bone of the folklore
 * pages and can be changed in one place.
 */

.dk {
    --ink: #2B301D;
    --ink-2: #2B301D;
    --bone: #E4DCCA;
    --bone-dim: rgba(228, 220, 202, .58);
    --gold: #C08C3D;
    --moss: #414042;
    --hair: rgba(228, 220, 202, .14);

    position: fixed; top: 0; right: 0; bottom: 0; z-index: 121;
    width: min(720px, 100%);
    background: var(--ink);
    color: var(--bone);
    display: flex; flex-direction: column;
    /* Closed without making the page wider than the screen.
     *
     * This used to sit at translateX(101%) - off the right-hand edge - and a
     * fixed element parked out there still counts in the layout, so on a
     * phone the browser widened the page to 484px to hold it and drew the
     * whole article at that width. Nothing scrolled sideways; everything was
     * just small.
     *
     * So the panel does not move any more. It sits where it opens, at its
     * own width inside the viewport, and the reveal is a mask coming off
     * rather than a slide arriving. clip-path costs nothing in layout, so
     * the page stays the width of the screen. visibility keeps it off the
     * tab order while it is shut.
     *
     * The shadow goes with it: a clip clips its own shadow, and on a panel
     * that covers the right-hand half of a phone there was none of it
     * showing anyway. */
    clip-path: inset(0 0 0 100%);
    visibility: hidden;
    transition: clip-path .7s var(--ease, ease), visibility 0s linear .7s;
}

.dk.on {
    clip-path: inset(0);
    visibility: visible;
    transition: clip-path .7s var(--ease, ease), visibility 0s;
}

.dk-veil {
    position: fixed; inset: 0; z-index: 120;
    background: rgba(8, 8, 6, .66);
    backdrop-filter: blur(5px) saturate(.55);
    opacity: 0; pointer-events: none;
    transition: opacity .7s var(--ease, ease);
}

.dk-veil.on { opacity: 1; pointer-events: auto }

/* ---- the bar: where you go, and the way out ----
 *
 * Back and Start again live in the same place on every scene, so nobody has
 * to look for them. Nothing here is ever a dead end.
 */

/* A direct child of the panel, said out loud. The concierge page has a
   .dk-bar of its own - the input bar at the foot of it - which sets a paper
   background, and on that page both stylesheets load: the panel's top bar
   was being painted cream underneath text coloured for a dark ground, so
   Back and Start again could not be read. */
.dk > .dk-bar {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 18px 26px 0;
    background: transparent;
    border-top: 0;
}

.dk-nav { display: flex; align-items: center; gap: 18px }

.dk-step {
    display: inline-flex; align-items: center; gap: 8px;
    border: 0; background: none; padding: 8px 0; cursor: pointer;
    font-family: var(--sans); font-size: 10.5px; font-weight: 500;
    letter-spacing: .18em; text-transform: uppercase;
    color: rgba(228, 220, 202, .55);
    transition: color .2s;
}

.dk-step:hover { color: var(--bone) }
.dk-step span { font-size: 15px; transition: transform .25s var(--ease, ease) }
.dk-step:hover span { transform: translateX(-3px) }

.dk-shut {
    flex: 0 0 auto;
    width: 46px; height: 46px;
    border: 1px solid rgba(228, 220, 202, .2); border-radius: 50%;
    background: transparent; color: rgba(228, 220, 202, .7);
    cursor: pointer; display: grid; place-items: center;
    transition: border-color .2s, color .2s, transform .3s var(--ease, ease);
}

.dk-shut:hover { border-color: var(--bone); color: var(--bone); transform: rotate(90deg) }

/* ---- the stage ---- */

.dk-stage {
    flex: 1; min-height: 0;
    display: flex; flex-direction: column; justify-content: center;
    padding: clamp(18px, 3.5vh, 40px) clamp(26px, 4vw, 52px);
    overflow-y: auto; scrollbar-width: thin;
}

.dk-scene { width: 100%; max-width: 620px; margin: 0 auto }

/* One scene leaves before the next arrives, and the direction reverses going
   back, so which way you are travelling is felt rather than labelled. */
.dk-in  { animation: dk-in .5s var(--ease, ease) both }
.dk-out { animation: dk-out .22s ease-in both }
.dk-rev { animation: dk-rev .5s var(--ease, ease) both }

@keyframes dk-in  { from { opacity: 0; transform: translateX(24px) } }
@keyframes dk-out { to   { opacity: 0; transform: translateX(-20px) } }
@keyframes dk-rev { from { opacity: 0; transform: translateX(-24px) } }

/* A question is display type, alone on the stage. An answer is prose and has
   to be read. Setting a forty-word reply at 44px was the worst thing about
   the first pass. */
.dk-q {
    margin: 0;
    font-family: var(--serif); font-weight: 500;
    font-size: min(clamp(26px, 3.1vw, 38px), 28px + (clamp(26px, 3.1vw, 38px) - 28px) * 0.6);
    line-height: 1.1; letter-spacing: -.024em;
    /* The panel is dark. --ink is the dark-on-light colour, so the
       heading was being set in near-black on near-black and simply
       did not appear - while the line under it, on --bone, did. */
    color: var(--bone); text-wrap: balance;
}

.dk-p {
    margin: 0 0 13px; max-width: 56ch;
    font-family: var(--serif); font-size: clamp(16px, 1.4vw, 18.5px);
    line-height: 1.62; color: var(--bone);
}

.dk-q + .dk-p { margin-top: 14px; color: var(--bone-dim) }
.dk-p:last-of-type { margin-bottom: 0 }

.dk-wait { display: inline-flex; gap: 6px; align-items: center; margin-top: 22px }
.dk-wait i { width: 8px; height: 8px; background: var(--gold); animation: dk-blink 1.15s infinite }
.dk-wait i:nth-child(2) { animation-delay: .15s }
.dk-wait i:nth-child(3) { animation-delay: .3s }
@keyframes dk-blink { 0%,100% { opacity: .2; transform: scale(.7) } 50% { opacity: 1; transform: scale(1) } }

/* ---- a choice is a photograph ---- */

.dk-opts {
    display: grid; gap: 12px; margin-top: clamp(20px, 3vh, 32px);
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.dk-opt {
    position: relative; aspect-ratio: 4/3; overflow: hidden; padding: 0;
    border: 1px solid var(--hair); background: var(--ink-2);
    cursor: pointer; color: inherit; text-align: left;
    transition: border-color .3s, transform .35s var(--ease, ease);
    animation: dk-rise .55s var(--ease, ease) both;
}

.dk-opt:nth-child(2) { animation-delay: .07s }
.dk-opt:nth-child(3) { animation-delay: .14s }

@keyframes dk-rise { from { opacity: 0; transform: translateY(16px) } }

.dk-opt img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: .6;
    transition: transform .9s var(--ease, ease), opacity .35s;
}

.dk-opt::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(19,18,16,.06) 34%, rgba(19,18,16,.92));
}

.dk-opt b {
    position: absolute; left: 15px; right: 15px; bottom: 13px; z-index: 2;
    font-family: var(--serif); font-weight: 500;
    font-size: clamp(15px, 1.3vw, 18px); line-height: 1.2; color: #F6F1E5;
}

.dk-opt:hover { border-color: rgba(228, 220, 202, .55); transform: translateY(-4px) }
.dk-opt:hover img { transform: scale(1.07); opacity: .82 }

/* Answers that are not places keep to words. */
.dk-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: clamp(20px, 3vh, 32px) }

.dk-tag {
    padding: 12px 18px; border: 1px solid rgba(228, 220, 202, .18);
    background: transparent; color: var(--bone);
    font-family: var(--serif); font-size: clamp(15px, 1.2vw, 16.5px); cursor: pointer;
    transition: border-color .25s, background .25s, color .25s, transform .25s var(--ease, ease);
    animation: dk-rise .48s var(--ease, ease) both;
}

.dk-tag:nth-child(2) { animation-delay: .04s }
.dk-tag:nth-child(3) { animation-delay: .08s }
.dk-tag:nth-child(4) { animation-delay: .12s }
.dk-tag:nth-child(5) { animation-delay: .16s }
.dk-tag:nth-child(6) { animation-delay: .2s }

.dk-tag:hover { border-color: var(--bone); transform: translateY(-2px) }
.dk-tag.on { background: var(--gold); border-color: var(--gold); color: var(--ink) }

.dk-go {
    display: inline-block; margin-top: clamp(18px, 2.6vh, 26px);
    padding: 14px 24px;
    border: 1px solid rgba(192, 140, 61, .55); background: rgba(192, 140, 61, .08);
    color: var(--gold); font-family: var(--sans); font-size: 10.5px; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase; cursor: pointer;
    transition: background .25s, transform .25s var(--ease, ease);
}

.dk-go:hover { background: rgba(192, 140, 61, .16); transform: translateY(-2px) }

/* ---- what it shows you ----
 *
 * One column, because the panel is one width now. A place gets a wide plate
 * and its reason beside it, which reads better than three cramped columns
 * ever did.
 */

.dk-found { display: grid; gap: 12px; margin-top: clamp(20px, 3vh, 30px) }

.dk-card {
    display: grid; grid-template-columns: 132px 1fr; align-items: stretch;
    border: 1px solid var(--hair); background: var(--ink-2);
    overflow: hidden; text-decoration: none; color: inherit;
    transition: border-color .3s;
    animation: dk-rise .55s var(--ease, ease) both;
}

.dk-card:nth-child(2) { animation-delay: .09s }
.dk-card:nth-child(3) { animation-delay: .18s }

.dk-card:hover { border-color: rgba(228, 220, 202, .4) }

.dk-card figure { margin: 0; position: relative; overflow: hidden; min-height: 116px }
.dk-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease, ease) }
.dk-card:hover img { transform: scale(1.06) }

.dk-where {
    position: absolute; left: 8px; bottom: 8px; z-index: 2;
    padding: 4px 8px; background: rgba(19,18,16,.8); backdrop-filter: blur(4px);
    font-family: var(--sans); font-size: 8.5px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--bone);
}

.dk-card-in { padding: 14px 16px; display: flex; flex-direction: column; justify-content: center }
.dk-card h4 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 18px; line-height: 1.2; color: var(--ink) }
.dk-card p { margin: 6px 0 0; font-family: var(--serif); font-size: 14px; line-height: 1.5; color: var(--bone-dim) }

/* Why that one for them, which is the difference between a filtered list and
   a recommendation. */
.dk-why {
    display: block; margin-top: 9px; padding-top: 9px;
    border-top: 1px solid var(--hair);
    font-family: var(--sans); font-size: 10.5px; letter-spacing: .04em; color: var(--gold);
}

/* ---- the printed one, kept quiet ----
 *
 * Never a door. It sits under the opening as a third thing, so it is present
 * without competing with the reason somebody actually opened the panel.
 */

.dk-book {
    display: flex; align-items: center; gap: 16px;
    margin-top: clamp(24px, 4vh, 40px); padding-top: clamp(18px, 3vh, 26px);
    border-top: 1px solid var(--hair);
    text-decoration: none; color: inherit;
}

.dk-book img { width: 46px; height: auto; box-shadow: 0 6px 18px rgba(0,0,0,.5) }
.dk-book span { display: flex; flex-direction: column; gap: 3px }

.dk-book em {
    font-family: var(--sans); font-style: normal; font-size: 9px; font-weight: 600;
    letter-spacing: .2em; text-transform: uppercase; color: var(--moss);
}

.dk-book strong { font-family: var(--serif); font-weight: 500; font-size: 16px; color: var(--bone) }
.dk-book:hover strong { font-style: italic }

/* ---- the foot: type anything, and the way onward ---- */

.dk-foot {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 12px;
    padding: 14px clamp(26px, 4vw, 52px) clamp(18px, 3vh, 24px);
    border-top: 1px solid var(--hair);
}

.dk-box {
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: 10px;
    border: 1px solid var(--hair); background: rgba(228, 220, 202, .04);
    padding: 3px 3px 3px 18px;
    transition: border-color .3s, background .3s;
}

.dk-box:focus-within { border-color: rgba(192, 140, 61, .6); background: rgba(228, 220, 202, .06) }

.dk-box input {
    flex: 1; min-width: 0; border: 0; background: transparent; padding: 13px 0;
    font-family: var(--serif); font-size: 16px; color: var(--bone);
}

.dk-box input::placeholder { color: rgba(228, 220, 202, .34); font-style: italic }
.dk-box input:focus { outline: none }

.dk-send {
    flex: 0 0 auto; width: 42px; height: 42px; border: 0;
    background: var(--gold); color: var(--ink); cursor: pointer;
    display: grid; place-items: center;
    transition: filter .2s, transform .25s var(--ease, ease);
}

.dk-send:hover { filter: brightness(1.1); transform: translateX(2px) }

/* The way onward, which changes with what it has been told. */
.dk-cta {
    flex: 0 0 auto;
    padding: 14px 20px;
    background: rgba(228, 220, 202, .07);
    border: 1px solid var(--hair);
    color: var(--bone); text-decoration: none;
    font-family: var(--sans); font-size: 10px; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase;
    white-space: nowrap;
    transition: background .25s, border-color .25s;
}

.dk-cta:hover { background: rgba(228, 220, 202, .13); border-color: rgba(228, 220, 202, .4) }

/* ---- on a phone it takes the screen, and the way out is unmissable ---- */

@media (max-width: 760px) {
    .dk { width: 100%; height: 100dvh }
    .dk-opts { grid-template-columns: 1fr 1fr; gap: 9px }
    .dk-card { grid-template-columns: 104px 1fr }
    .dk-stage { padding: 16px 20px }
    .dk > .dk-bar { padding: 12px 16px 0 }

    .dk-shut {
        width: 52px; height: 52px;
        background: rgba(228, 220, 202, .09);
        border-color: rgba(228, 220, 202, .32);
        color: var(--bone);
    }

    /* The onward button drops under the box rather than squeezing it. */
    .dk-foot { flex-wrap: wrap; padding: 12px 20px 18px }
    .dk-box { flex: 1 1 100% }
    .dk-cta { flex: 1 1 100%; text-align: center }
}

@media (prefers-reduced-motion: reduce) {
    .dk, .dk-veil, .dk-opt, .dk-opt img, .dk-card img, .dk-send, .dk-shut { transition: none }
    .dk-scene, .dk-opt, .dk-tag, .dk-card { animation: none }
}


/* ------------------------------------------------------------------ the desk
   The book, opened inside the drawer, and the way out to the rest of the
   site. Both exist so that nothing the desk offers requires closing it. */

.dk-book {
    display: flex;
    gap: 14px;
    align-items: center;
    width: 100%;
    padding: 0;
    margin-top: 34px;
    background: none;
    border: 0;
    border-top: 1px solid rgb(0 0 0 / 0.08);
    padding-top: 22px;
    text-align: left;
    cursor: pointer;
}

.dk-tome {
    display: grid;
    grid-template-columns: minmax(0, 118px) minmax(0, 1fr);
    gap: 26px;
    align-items: start;
    margin-top: 6px;
}

.dk-tome-cover { margin: 0 }

.dk-tome-cover img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 2px;
    box-shadow: 0 14px 34px rgb(0 0 0 / 0.22);
}

.dk-tome-said h3 {
    margin: 0 0 4px;
    font-size: 1.34rem;
    line-height: 1.2;
    text-wrap: balance;
}

.dk-tome-sub {
    margin: 0 0 14px;
    font-size: 0.8rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    opacity: 0.55;
}

.dk-tome-blurb {
    margin: 0 0 16px;
    font-size: 0.94rem;
    line-height: 1.62;
}

.dk-tome-said blockquote {
    margin: 0 0 20px;
    padding-left: 15px;
    border-left: 2px solid currentColor;
    opacity: 0.72;
}

.dk-tome-said blockquote p {
    margin: 0 0 5px;
    font-style: italic;
    line-height: 1.5;
}

.dk-tome-said cite {
    font-size: 0.78rem;
    font-style: normal;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.dk-tome-buy {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

.dk-tome-price {
    font-size: 1.16rem;
    font-variant-numeric: tabular-nums;
}

/* background: currentColor painted the button in the same colour as its own
   label, so "Open the full page" arrived as a blank cream rectangle. The
   filled button states its two colours; the outlined one keeps the panel's. */
.dk-buy {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 24px;
    background: #F2ECDD;
    color: #2B301D;
    border: 1px solid #F2ECDD;
    border-radius: 2px;
    font-size: 0.79rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.dk-buy:hover { background: #fff; border-color: #fff }

.dk-buy::after { content: none }

.dk-tome-note {
    margin: 13px 0 0;
    font-size: 0.76rem;
    opacity: 0.5;
}

/* The rest of the site, inside the drawer. */

/* The count sits with the label, not wherever the flow puts it.
   The title on these tiles is absolutely positioned at the foot, so a plain
   sibling ended up at the top left - "432 places" floating over the middle
   of Edinburgh. */
.dk-opt-n {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 11px;
    z-index: 2;
    font-size: 0.72rem;
    font-style: normal;
    letter-spacing: 0.05em;
    color: #F6F1E5;
    opacity: 0.62;
}

/* And the title moves up to make room for it, only on the tiles that have
   one - the six doors carry no count and should not shift. */
.dk-opt:has(.dk-opt-n) b { bottom: 32px }

.dk-shelf {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 4px;
}

.dk-cd {
    display: block;
    padding: 0;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
}

.dk-cd-art {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: rgb(255 255 255 / 0.05);
}

.dk-cd-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.dk-cd:hover .dk-cd-art img { transform: scale(1.04) }

.dk-cd-said { display: block; padding-top: 9px }

.dk-cd-said b {
    display: block;
    font-size: 0.92rem;
    line-height: 1.32;
    font-weight: 500;
}

.dk-cd-said i {
    display: block;
    margin-top: 2px;
    font-size: 0.74rem;
    font-style: normal;
    opacity: 0.58;
}

.dk-item { display: flex; flex-direction: column; gap: 14px }

.dk-item-art { margin: 0; aspect-ratio: 3 / 2; overflow: hidden }

.dk-item-art img { display: block; width: 100%; height: 100%; object-fit: cover }

.dk-item h3 { margin: 0; font-size: 1.42rem; line-height: 1.16 }

.dk-item-n {
    margin: -8px 0 0;
    font-size: 0.78rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    opacity: 0.55;
}

.dk-item-b { margin: 0; font-size: 0.95rem; line-height: 1.62 }

.dk-item-do {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 2px;
}

.dk-buy-alt {
    background: none;
    color: inherit;
    border: 1px solid rgb(255 255 255 / 0.42);
}

.dk-buy-alt:hover { background: rgb(255 255 255 / 0.09); border-color: rgb(255 255 255 / 0.7) }

@media (max-width: 620px) {
    .dk-shelf { grid-template-columns: 1fr }
}

@media (max-width: 620px) {
    .dk-tome {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .dk-tome-cover { max-width: 132px }
}

/* The onward button arrives rather than waits. It only exists once there is
   something for it to carry, so it should look like it just turned up. */

.dk-go-in {
    animation: dk-arrive 0.34s cubic-bezier(0.16, 0.84, 0.44, 1) both;
}

/* Not dk-rise: that name already belongs to the tiles, and a second
   @keyframes block of the same name replaces the first rather than adding
   to it - which had quietly changed how every option tile appears. */
@keyframes dk-arrive {
    from { opacity: 0; transform: translateY(9px) }
    to   { opacity: 1; transform: none }
}

@media (prefers-reduced-motion: reduce) {
    .dk-go-in { animation: none }
}

/* Two accessibility fixes only. The pill treatment that came with them was
   louder than the panel, and the plain lettering reads better against the
   photography. */

.dk > .dk-bar .dk-step { min-height: 44px; padding-inline: 0 }

.dk > .dk-bar .dk-step:focus-visible,
.dk .dk-opt:focus-visible,
.dk .dk-tag:focus-visible,
.dk .dk-cd:focus-visible,
.dk .dk-shut:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* Six doors, two even columns, every label on one line. */

.dk-opts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

/* Square, three across.
   Six tiles two-across at 4/3 stood 675px tall and pushed the question off
   the top of the panel. Squares keep the shape but need the third column to
   fit: three of them across the drawer come out near 190px, so two rows sit
   comfortably under the heading with the book still visible beneath. */
.dk-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px }

.dk-opt { aspect-ratio: 1 / 1 }

.dk-opt b {
    font-size: clamp(13px, 1vw, 15px);
    left: 12px;
    right: 12px;
    bottom: 11px;
    text-wrap: balance;
}

/* Nothing grows on hover. A tile that lifts and a photograph that zooms is
   two movements for one small decision; the border and a touch of light are
   enough to say it can be pressed. */
.dk-opt:hover { transform: none }
.dk-opt:hover img { transform: none; opacity: .78 }

.dk-opt:nth-child(4) { animation-delay: .21s }
.dk-opt:nth-child(5) { animation-delay: .28s }
.dk-opt:nth-child(6) { animation-delay: .35s }

.dk-opt b {
    display: block;
    font-size: 0.98rem;
    line-height: 1.25;
    text-wrap: balance;
}

@media (max-width: 560px) {
    .dk-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px }
    .dk-opt b { font-size: 0.88rem }
}

/* Facts on a result card. The room count is the first thing anybody wants
   and it was in the payload all along, unprinted. */

.dk-facts {
    display: flex;
    gap: 9px;
    margin: 2px 0 5px;
    font-size: 0.76rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.72;
}

.dk-facts b { font-weight: 600 }

.dk-item-p { margin: -4px 0 0; font-size: 0.92rem; opacity: 0.8 }

.dk-item-f { display: flex; flex-wrap: wrap; gap: 7px }

.dk-item-f span {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 5px 11px;
    border: 1px solid rgb(255 255 255 / 0.2);
    border-radius: 999px;
    opacity: 0.78;
}

.dk-found .dk-card {
    width: 100%;
    padding: 0;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
}

.dk-again {
    margin: 0 0 14px;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.45;
}

/* ------------------------------------------------ the calendar, on the desk

   Two wrong answers before this one. Left alone it was the planner page's
   calendar - grey ink meant for paper - sitting on near black, where the
   dates were barely there. Putting it on a cream card fixed the legibility
   and broke the design: a white box in the middle of the drawer.

   The fault was never the dark ground, it was the dimness. So it stays on
   the panel's own background and the type is simply bright: full-strength
   bone for every day you can pick, and dimmed only for the ones you cannot.
   A chosen day is a filled cream disc, which is the one place contrast
   should be absolute. */

.dk .pp-when {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: none;
    padding: 0;
    /* The whole panel. It was held to 430px while sharing the screen with
       two rows of chips; on its own it should fill what it has. */
    max-width: none;
    color: var(--bone);
}

.dk .pw-cal { max-width: none; width: 100% }

/* The arrows were sitting flush against the bar above and getting clipped,
   so there was no visible way to reach another month at all. */
/* Month on the left, arrows on the right, and the mood on its own line.
   They were running together - "September 2026soft light, quiet roads" - with
   the whole row shoved to the right under the question, because the bar was
   still set to justify to the end from when it held nothing but two arrows. */
.dk .pw-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid rgba(228, 220, 202, .16);
}

/* The month, and what that month is like. Only the desk had rules for these,
   so on the homepage they were two inline elements with nothing between them
   and read as "September 2026soft light, quiet roads". The mood earns its
   place here: it is the same line the month cards carry, and it is what
   somebody picking a month is actually choosing between. */
.pw-when {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    min-width: 0;
}

/* No colour named here on purpose. The same calendar is used on the cream
   planner and inside the near-black desk panel, so it takes the colour of
   whatever it has been put on. Naming one made the month invisible on the
   panel. */
.pw-when b {
    font-family: var(--serif);
    font-size: clamp(17px, 1.5vw, 20px);
    font-weight: 500;
    letter-spacing: -.01em;
    color: inherit;
}

.pw-when i {
    font-family: var(--serif);
    font-size: 14px;
    color: inherit;
    opacity: .62;
}

.dk .pw-when { display: flex; flex-direction: column; gap: 4px; min-width: 0 }

.dk .pw-when b {
    font-family: var(--serif);
    font-size: 1.78rem;
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: .01em;
}

/* The mood belongs to the month screen, where it helps somebody choose.
   Repeated over the calendar it is a third heading on a screen that only
   needed one. */
.dk .pw-when i { display: none }

/* "Your dates" repeats the question already asked above it. */
.dk .pw-cal > .pw-top > .pp-h { display: none }

.dk .pw-nav { display: flex; gap: 7px }

.dk .pw-nav button {
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    background: none;
    border: 1px solid rgba(228, 220, 202, .24);
    border-radius: 50%;
    color: var(--bone);
    font-size: 15px;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease;
}

.dk .pw-nav button:hover:not(:disabled) {
    background: rgba(228, 220, 202, .12);
    border-color: rgba(228, 220, 202, .55);
}

.dk .pw-nav button:disabled { opacity: .22; cursor: default }

.dk .pw-months { display: block }
.dk .pw-m { width: 100% }

.dk .pw-mh { margin: 6px 0 18px }

.dk .pw-mh b {
    display: block;
    font-family: var(--serif);
    font-size: 1.42rem;
    font-weight: 400;
    letter-spacing: .01em;
    color: var(--bone);
}

.dk .pw-mh i {
    display: block; margin-top: 3px;
    font-size: .74rem; font-style: normal;
    letter-spacing: .11em; text-transform: uppercase;
    color: rgba(228, 220, 202, .5);
}

.dk .pw-dow,
.dk .pw-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
}

.dk .pw-dow {
    margin-bottom: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(228, 220, 202, .12);
    font-size: .68rem; font-weight: 500;
    letter-spacing: .14em; text-transform: uppercase;
    color: rgba(228, 220, 202, .42);
}

.dk .pw-dow span { text-align: center }

/* Saturday and Sunday, in the panel's own palette. _shared.css quietens
   them with a near-black at a third opacity, which is right on the cream
   planner and invisible here - the header read "M T W T F" over a grid
   seven columns wide. Still quieter than the weekdays, still legible. */
.dk .pw-dow span:nth-child(6),
.dk .pw-dow span:nth-child(7) {
    color: rgba(228, 220, 202, .3);
}

/* The cells draw their highlight with a ::before at inset 4px, and the rule
   that gives them a positioning context lives in the planner-only sheets,
   which a region page never loads. Without it that pseudo-element escaped to
   the panel and painted a forest ellipse the height of the drawer. */
.dk .pw-d {
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex; align-items: center; justify-content: center;
    padding: 0;
    background: none;
    border: 0;
    color: rgba(228, 220, 202, .94);
    font-family: var(--sans);
    font-size: .96rem;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: color .14s ease;
}

.dk .pw-d::before {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: none;
    transition: background .16s ease;
}

.dk .pw-d span { position: relative; z-index: 2 }

.dk .pw-d:hover:not(.off):not(.empty)::before { background: rgba(228, 220, 202, .16) }

.dk .pw-d.off { color: rgba(228, 220, 202, .2); cursor: default; pointer-events: none }
.dk .pw-d.empty { visibility: hidden }

/* The nights between, as a bar behind the discs so the stay reads as one run
   rather than two unrelated clicks. */
.dk .pw-d.in::after,
.dk .pw-d.edge.a::after,
.dk .pw-d.edge.b::after {
    content: "";
    position: absolute;
    top: 6px; bottom: 6px;
    background: rgba(228, 220, 202, .13);
    z-index: 0;
}

.dk .pw-d.in::after { left: 0; right: 0 }
.dk .pw-d.edge.a::after { left: 50%; right: 0 }
.dk .pw-d.edge.b::after { left: 0; right: 50% }
.dk .pw-d.edge.a.b::after { display: none }

/* The one place contrast should be absolute. */
.dk .pw-d.edge::before,
.dk .pw-d.edge:hover::before { background: var(--bone); z-index: 1 }
.dk .pw-d.edge { color: var(--ink); font-weight: 600 }

.dk .pw-hint {
    display: flex; justify-content: space-between; gap: 12px;
    margin: 18px 0 0;
    padding-top: 15px;
    border-top: 1px solid rgba(228, 220, 202, .12);
    font-size: .86rem;
    color: rgba(228, 220, 202, .62);
}

.dk .pw-hint b { color: var(--bone); font-weight: 500 }

/* The rough answers moved to their own screen before this one, so the
   calendar has the panel to itself and does not need them underneath. */
.dk .pw-flex { display: none }

.dk .pw-flex .pp-h {
    margin: 8px 0 3px;
    font-size: .68rem; font-weight: 500;
    letter-spacing: .16em; text-transform: uppercase;
    color: rgba(228, 220, 202, .42);
}

.dk .chiprow { display: flex; flex-wrap: wrap; gap: 7px }
.dk .mo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px }

.dk .pp-when .chip {
    min-height: 38px;
    padding: 0 14px;
    display: inline-flex; align-items: center; justify-content: center;
    background: none;
    border: 1px solid rgba(228, 220, 202, .22);
    border-radius: 999px;
    color: rgba(228, 220, 202, .92);
    font-family: var(--sans);
    font-size: .82rem;
    white-space: nowrap;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}

.dk .pp-when .chip:hover {
    border-color: rgba(228, 220, 202, .55);
    background: rgba(228, 220, 202, .08);
}

.dk .pp-when .chip.on {
    background: var(--bone);
    border-color: var(--bone);
    color: var(--ink);
}

@media (max-width: 620px) {
    .dk .pp-when { max-width: none }
    .dk .mo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) }
    .dk-opts { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}

/* The way to the rest of the regions, kept quiet under the six. */
.dk-more {
    align-self: start;
    margin-top: 18px;
    padding: 10px 0;
    min-height: 44px;
    background: none;
    border: 0;
    border-bottom: 1px solid rgb(255 255 255 / 0.28);
    color: inherit;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.2s ease, opacity 0.2s ease;
}

.dk-more:hover { border-color: rgb(255 255 255 / 0.7) }

/* Two ways out of the join prompt, side by side. */
.dk-ways { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px }

/* ------------------------------------------------ making the guidebook

   The last two steps of the onboarding, and the only ones that make the
   thing theirs rather than ours. */

.dk-likes { display: flex; flex-direction: column; gap: 20px }

.dk-like-h {
    margin: 0 0 8px;
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(228, 220, 202, .42);
}

/* The cover, drawn at the proportions of the printed one. */

.dk-make {
    display: grid;
    grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
    gap: 30px;
    align-items: start;
}

.dk-make-book {
    aspect-ratio: 3 / 4.3;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 7px;
    padding: 22px 20px 26px;
    background: #2B301D;
    box-shadow: 0 18px 44px rgb(0 0 0 / 0.42);
}

.dk-make-imp {
    font-size: .58rem;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: rgb(255 255 255 / 0.62);
}

.dk-make-title {
    font-family: var(--serif);
    font-size: 1.5rem;
    line-height: 1.06;
    color: #F6F1E5;
    text-wrap: balance;
}

.dk-make-rule {
    width: 34px;
    height: 1px;
    background: rgb(255 255 255 / 0.42);
    margin: 3px 0;
}

.dk-make-for {
    font-size: .68rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: rgb(255 255 255 / 0.72);
}

.dk-make-said { display: flex; flex-direction: column; gap: 18px }

.dk-name { display: flex; flex-direction: column; gap: 7px }

.dk-name span {
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(228, 220, 202, .42);
}

.dk-name input {
    width: 100%;
    min-height: 46px;
    padding: 0 15px;
    background: rgb(255 255 255 / 0.05);
    border: 1px solid rgba(228, 220, 202, .22);
    border-radius: 2px;
    color: var(--bone);
    font-family: var(--serif);
    font-size: 1.02rem;
}

.dk-name input::placeholder { color: rgba(228, 220, 202, .34) }
.dk-name input:focus { outline: none; border-color: rgba(228, 220, 202, .6) }

/* What is going in it, said back so nothing has to be taken on trust. */
.dk-make-has {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: .86rem;
    color: rgba(228, 220, 202, .68);
}

.dk-make-has li { padding-left: 15px; position: relative }

.dk-make-has li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .62em;
    width: 5px;
    height: 1px;
    background: currentColor;
    opacity: .6;
}

@media (max-width: 620px) {
    .dk-make { grid-template-columns: 1fr; gap: 22px }
    .dk-make-book { max-width: 170px }
}

/* Where an answer came from, and where to go after it. */

.dk-read {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    align-self: start;
    padding: 0;
    border-bottom: 1px solid rgba(228, 220, 202, .3);
    color: inherit;
    font-size: .82rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    transition: border-color .2s ease;
}

.dk-read::after { content: '\2192' }
.dk-read:hover { border-color: rgba(228, 220, 202, .75) }

.dk-asks { margin-top: 4px }

/* ------------------------------------------------------ a page that is not there

   Somebody here followed a link and expected something. They are the most
   interested reader on the site at that moment, and what they used to get was
   the word "Not Found" on a white page. */

.nf {
    padding: clamp(70px, 12vh, 130px) 0 clamp(30px, 5vh, 54px);
    border-bottom: 1px solid var(--hairline, rgb(0 0 0 / 0.1));
}

.nf-kick {
    margin: 0 0 14px;
    font-family: var(--sans);
    font-size: .72rem;
    letter-spacing: .2em;
    opacity: .45;
}

.nf-h {
    margin: 0 0 16px;
    font-family: var(--serif);
    font-size: min(clamp(2rem, 5vw, 3.1rem), 28px + (clamp(2rem, 5vw, 3.1rem) - 28px) * 0.6);
    font-weight: 400;
    line-height: 1.06;
    text-wrap: balance;
}

.nf-stand {
    margin: 0 0 30px;
    max-width: 46ch;
    font-size: 1.06rem;
    line-height: 1.6;
    opacity: .72;
}

.nf-do { display: flex; flex-wrap: wrap; gap: 22px; align-items: center }

.nf-quiet {
    font-size: .82rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 3px;
    opacity: .7;
    transition: opacity .2s ease;
}

.nf-quiet:hover { opacity: 1 }

.nf-sec { padding-block: clamp(34px, 6vh, 60px) }

.nf-h2 {
    margin: 0 0 20px;
    font-family: var(--sans);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    opacity: .5;
}

.nf-said { margin: -8px 0 24px; max-width: 54ch; line-height: 1.62; opacity: .78 }

.nf-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.nf-grid.nf-three { grid-template-columns: repeat(3, minmax(0, 1fr)) }

.nf-card { display: block; text-decoration: none }

.nf-art {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: rgb(0 0 0 / 0.06);
    margin-bottom: 10px;
}

.nf-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .3s ease;
}

.nf-card:hover .nf-art img { opacity: .82 }

.nf-card b {
    display: block;
    font-family: var(--serif);
    font-size: 1.02rem;
    font-weight: 400;
    line-height: 1.3;
}

.nf-card i {
    display: block;
    margin-top: 3px;
    font-size: .8rem;
    font-style: normal;
    opacity: .58;
}

/* Writing in, from wherever they are standing. */

.wi-open {
    min-height: 46px;
    padding: 0 24px;
    background: none;
    border: 1px solid currentColor;
    border-radius: 2px;
    font-size: .82rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.wi-open:hover { background: var(--forest, #2B301D); border-color: var(--forest, #2B301D); color: #F4EFE4 }

.wi { display: flex; flex-direction: column; gap: 16px; max-width: 560px }

.wi-note { margin: 0; font-size: .84rem; opacity: .6 }

.wi-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px }

.wi-field { display: flex; flex-direction: column; gap: 6px }

.wi-field span {
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .55;
}

.wi-field input,
.wi-field textarea {
    width: 100%;
    padding: 12px 14px;
    background: rgb(0 0 0 / 0.03);
    border: 1px solid var(--hairline, rgb(0 0 0 / 0.18));
    border-radius: 2px;
    font-family: inherit;
    font-size: .96rem;
    color: inherit;
    resize: vertical;
}

.wi-field input:focus,
.wi-field textarea:focus { outline: none; border-color: var(--forest, #2B301D) }

.wi-do { display: flex; gap: 18px; align-items: center; flex-wrap: wrap }

.wi-never {
    background: none;
    border: 0;
    padding: 0;
    font-size: .82rem;
    text-decoration: underline;
    text-underline-offset: 3px;
    opacity: .6;
    cursor: pointer;
}

.wi-wrong { margin: 0; font-size: .88rem; color: #682114 }

.wi-done { margin: 0; font-family: var(--serif); font-size: 1.1rem; font-style: italic }

@media (max-width: 780px) {
    .nf-grid, .nf-grid.nf-three { grid-template-columns: repeat(2, minmax(0, 1fr)) }
    .wi-pair { grid-template-columns: 1fr }
}


/* The first version of these was a name and a line of type. It is now a
   photograph and a name, further down this file. */

/* Picking exact dates is an action, not a seventh length. */

.dk-dates {
    align-self: start;
    margin-top: 20px;
    min-height: 44px;
    padding: 0 20px;
    background: none;
    border: 1px solid rgba(228, 220, 202, .3);
    border-radius: 999px;
    color: inherit;
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
}

.dk-dates:hover { border-color: rgba(228, 220, 202, .7); background: rgb(255 255 255 / 0.06) }

/* ------------------------------------------------------------- every tale

   115 of them, and until now four showed at the foot of the journal and the
   rest could only be reached by already knowing the address. */

.st-open { padding: clamp(56px, 9vh, 96px) 0 clamp(24px, 4vh, 40px) }

.st-open h1 {
    margin: 6px 0 14px;
    font-family: var(--serif);
    font-size: min(clamp(2.1rem, 5vw, 3.2rem), 28px + (clamp(2.1rem, 5vw, 3.2rem) - 28px) * 0.6);
    font-weight: 400;
    line-height: 1.06;
}

.st-filters { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px }

.st-filters .chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 18px;
    background: none;
    border: 1px solid var(--hairline, rgb(0 0 0 / 0.18));
    border-radius: 999px;
    font-family: inherit;
    font-size: .88rem;
    color: inherit;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.st-filters .chip i { font-style: normal; font-size: .74rem; opacity: .55 }
.st-filters .chip:hover { border-color: currentColor }

.st-filters .chip.on {
    background: var(--forest, #2B301D);
    border-color: var(--forest, #2B301D);
    color: #F4EFE4;
}

.st-filters .chip.on i { opacity: .72 }

.st-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 34px);
}

.st-card { display: block; text-decoration: none }

.st-art {
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: rgb(0 0 0 / 0.06);
    margin-bottom: 12px;
}

.st-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.st-card:hover .st-art img { transform: scale(1.03) }

.st-said { display: block }

.st-said b {
    display: block;
    font-family: var(--serif);
    font-size: 1.14rem;
    font-weight: 400;
    line-height: 1.26;
    text-wrap: balance;
}

.st-ex {
    display: block;
    margin-top: 6px;
    font-size: .9rem;
    line-height: 1.55;
    opacity: .68;
}

.st-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 9px }

.st-meta i {
    font-style: normal;
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .5;
}

@media (max-width: 900px) { .st-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 560px) { .st-grid { grid-template-columns: 1fr } }

/* The send arrow, when there is nothing to send.
   A gold arrow in the corner of an empty box, with another gold button above
   it saying "show me places", reads as the same control - so somebody
   finishes choosing, presses the nearest arrow, and nothing happens. */

.dk-send.idle {
    opacity: .32;
    cursor: default;
    background: none;
    border: 1px solid rgba(228, 220, 202, .22);
    color: rgba(228, 220, 202, .6);
}

.dk-send.idle:hover { opacity: .32; background: none }


/* Twelve months, each with a photograph of what it looks like to be here.
   A caption cannot do this and a list of names certainly cannot. */

.dk-months { display: grid; gap: 10px }

.dk-month {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    width: 100%;
    padding: 0;
    background: none;
    border: 0;
    border-left: 2px solid transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
}

.dk-month:hover { background: rgb(255 255 255 / .05) }
.dk-month.on { background: rgb(255 255 255 / .09); border-left-color: var(--bone) }

.dk-month-art {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: rgb(255 255 255 / .05);
}

.dk-month-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .86;
    transition: opacity .3s ease, transform .5s ease;
}

.dk-month:hover .dk-month-art img { opacity: 1; transform: scale(1.04) }

.dk-month-said { display: block; padding: 12px 14px 12px 0 }

.dk-month-said b {
    display: block;
    font-family: var(--serif);
    font-size: 1.08rem;
    font-weight: 400;
}

.dk-month-said i {
    display: block;
    margin-top: 3px;
    font-size: .84rem;
    font-style: normal;
    color: rgba(228, 220, 202, .56);
}

/* Centred content that can be scrolled to.
   The stage centres its scene and scrolls when the scene is tall - and those
   two together clip the top: a flex container centring overflow puts the
   first part of it above the scroll origin, where it cannot be reached. The
   safe keyword centres only while everything fits. */
.dk-stage { justify-content: safe center }

/* Twelve months as a year, not a list.
   Scrolling a column of twelve was how September ended up above the fold on
   a screen whose whole job is to show what each month looks like. Three
   across and four down fits the year in the panel with nothing to scroll. */
.dk-months {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.dk-month {
    display: block;
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-left: 0;
    border: 1px solid rgba(228, 220, 202, .12);
}

.dk-month-art {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
}

.dk-month-art::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgb(19 18 16 / .12) 38%, rgb(19 18 16 / .88));
}

.dk-month-said {
    position: absolute;
    left: 11px;
    right: 11px;
    bottom: 10px;
    z-index: 2;
    padding: 0;
}

.dk-month-said b { font-size: .96rem; line-height: 1.2 }

.dk-month-said i {
    margin-top: 1px;
    font-size: .72rem;
    line-height: 1.3;
    color: rgba(246, 241, 229, .72);
}

.dk-month.on { border-color: var(--bone) }
.dk-month.on .dk-month-art img { opacity: 1 }

@media (max-width: 620px) {
    .dk-months { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}


/* ---------------------------------------------------------- the trip's facts

   A collision, not a design.

   _shared.css carries `.facts` from the listing pages, where it is a
   four-column band of statistics - sleeps, bedrooms, price, distance. The
   trip guidebook's own sheet also styles `.facts`, but only sets a top
   margin and a rule, because it was drawn expecting a plain block with
   stacked label/value rows underneath.

   Nothing resets `display`, so the shared grid survives the page sheet
   loading after it, and When / The route / Who get squeezed into three of
   four columns - "Sun 13 - Thu 17 September 2026" wrapping over four lines
   next to a route wrapping over three. The design intends one row each,
   label left, answer right.

   Scoped to `.opening` so the listing pages keep the band they were drawn
   with. */

.opening .facts {
    display: block;
    grid-template-columns: none;
    border-bottom: 0;
    margin: 26px 0 0;
}

.opening .facts .fact {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    gap: 0 20px;
    padding: 13px 0;
    border: 0;
    border-bottom: 1px solid var(--hairline-soft);
    border-left: 0;
    align-items: baseline;
}

/* The value is a sentence, not a statistic, so it should not be set at the
   25px the listing band uses for a bedroom count. */
.opening .facts .fact b {
    display: block;
    font-family: var(--serif);
    font-weight: 500;
    font-size: 16.5px;
    line-height: 1.45;
    letter-spacing: -.01em;
}

.opening .facts .fact i {
    font-style: normal;
    font-family: var(--sans);
    font-size: 9.5px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink-55);
}

@media (max-width: 640px) {
    .opening .facts .fact { grid-template-columns: minmax(0, 1fr); gap: 3px }
}


/* ------------------------------------------------- the route, drawn as one

   The route was a line of text in a table row. It is the only fact on this
   page with a shape - places, in order, with driving in between - and set as
   "1841 (3) -> The Cairngorms (1)" it read as a database field, with a hotel
   legitimately named 1841 looking like a fault.

   One column, not two. The first attempt reserved a lane on the left for the
   drive times, which is fine until a base has no coordinates - and then the
   lane sits empty down the whole page. Times are common but not guaranteed,
   so they hang off the connector instead of owning a column. */

.op-route {
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
    border-top: 1px solid var(--hairline);
}

.op-route > li { position: relative; padding-left: 26px }

/* The line joining one stop to the next, drawn behind the dots. */
.op-route > li:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 22px;
    bottom: -6px;
    width: 1px;
    background: var(--hairline);
}

.op-leg {
    display: block;
    padding: 9px 0 3px;
    font-family: var(--sans);
    font-size: 9.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-55);
}

.op-stop {
    display: block;
    padding: 12px 0 15px;
    border-bottom: 1px solid var(--hairline-soft);
    position: relative;
}

.op-route > li:last-child .op-stop { border-bottom: 0 }

.op-stop::before {
    content: "";
    position: absolute;
    left: -26px;
    top: 19px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--moss, #AFA065);
}

.op-stop b {
    display: block;
    font-family: var(--serif);
    font-weight: 500;
    font-size: 17.5px;
    letter-spacing: -.01em;
    line-height: 1.3;
}

.op-stop > i {
    display: block;
    margin-top: 2px;
    font-style: normal;
    font-family: var(--serif);
    font-size: 13.5px;
    color: var(--ink-55);
}

.op-flags { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 9px }
.op-flags:empty { display: none }

/* A bed that is not booked, and a base with no location, are the two things
   this page can most usefully say out loud - so they are said on the stop
   rather than left to a checklist further down. */
.op-tbc {
    display: inline-block;
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-75);
    border: 1px solid var(--hairline);
    padding: 4px 9px;
    text-decoration: none;
}

.op-tbc.need {
    border-color: var(--moss, #AFA065);
    color: var(--moss, #AFA065);
}

.op-tbc.need:hover { background: var(--moss, #AFA065); color: var(--ground) }

/* ------------------------------------------------------------- the group */

.op-crew {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 22px;
}

.op-faces { display: flex }

.op-face {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--sans);
    font-size: 11.5px;
    letter-spacing: .04em;
    background: var(--ground);
    color: var(--ink-55);
    border: 1px solid var(--hairline);
    margin-left: -7px;
}

.op-face:first-child { margin-left: 0 }

/* Invited and joined are different states and the room should show which. */
.op-face.in {
    background: var(--forest);
    border-color: var(--forest);
    color: var(--ground);
}

.op-crew-said {
    font-family: var(--serif);
    font-style: italic;
    font-size: 13.5px;
    color: var(--ink-55);
}

/* ---------------------------------------------------------- how far along */

.op-prog {
    display: inline-flex;
    gap: 4px;
    margin-right: 10px;
    vertical-align: 1px;
}

.op-prog i {
    display: block;
    width: 16px;
    height: 3px;
    background: var(--hairline);
}

.op-prog i.on { background: var(--moss, #AFA065) }

@media (max-width: 640px) {
    .op-route > li { grid-template-columns: 68px minmax(0, 1fr); gap: 0 14px }
    .op-leg i { left: 61px }
    .op-stop::before { left: -18px }
}


/* =====================================================================
   THE JOURNAL, REDRAWN

   The page was seven sections all using the same card - photograph on
   top, kicker, title, excerpt, in a three-across grid - which is a blog
   index with subheadings, whatever the content underneath it is.

   Hidden Scotland is a printed magazine that went online, so the journal
   is drawn as the contents pages of an issue: a masthead, a lead spread,
   the magazine itself as an object, and then sections that alternate
   light and dark, wide and narrow, dense and open. Every format gets a
   shape of its own, and the rhythm is what stops it reading as a list.

   Namespaced jx- throughout. Generic names collide: `.facts` on the trip
   page was being laid out by a four-column rule written for the listing
   pages, and nobody could see why.
   ===================================================================== */

.jx { --gap: clamp(18px, 2.2vw, 34px) }

.jx-wrap { max-width: 1400px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 60px) }

/* Full-bleed inside a clipped body. */
.jx-bleed { width: 100vw; margin-left: calc(50% - 50vw) }

/* ---------------------------------------------------------- masthead */

.jx-mast {
    border-top: 2px solid var(--ink);
    padding-block: clamp(30px, 5vh, 54px) clamp(26px, 4vh, 44px);
}

.jx-mast-k {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--ink-55);
}

.jx-mast-k::after { content: ""; flex: 1; height: 1px; background: var(--hairline) }

.jx-mast h1 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: min(clamp(40px, 8.5vw, 116px), 28px + (clamp(40px, 8.5vw, 116px) - 28px) * 0.6);
    line-height: .94;
    letter-spacing: -.03em;
    margin: clamp(16px, 3vh, 28px) 0 0;
    text-wrap: balance;
}

.jx-mast h1 em { font-style: italic; font-weight: 400 }

/* What is in the issue, as a printed contents strip. */
.jx-count {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    margin-top: clamp(26px, 4vh, 44px);
    border-top: 1px solid var(--ink);
}

.jx-count div {
    padding: 16px 18px 14px 0;
    border-right: 1px solid var(--hairline-soft);
}

.jx-count div:last-child { border-right: 0 }

.jx-count b {
    display: block;
    font-family: var(--serif);
    font-weight: 500;
    font-size: min(clamp(22px, 2.4vw, 32px), 28px + (clamp(22px, 2.4vw, 32px) - 28px) * 0.6);
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.jx-count span {
    display: block;
    margin-top: 2px;
    font-family: var(--sans);
    font-size: 9.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink-55);
}

/* ------------------------------------------------------ the lead spread */

.jx-lead {
    display: grid;
    grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 64px);
    align-items: center;
    padding: clamp(30px, 5vh, 60px) 0 clamp(40px, 6vh, 80px);
}

.jx-lead figure { margin: 0; overflow: hidden; background: var(--paper) }

.jx-lead img {
    width: 100%;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    transition: transform 1.4s var(--ease);
}

.jx-lead:hover img { transform: scale(1.03) }

.jx-lead-k {
    font-family: var(--sans);
    font-size: 9.5px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--moss);
    font-weight: 600;
}

.jx-lead h2 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: min(clamp(26px, 3.6vw, 50px), 28px + (clamp(26px, 3.6vw, 50px) - 28px) * 0.6);
    line-height: 1.08;
    letter-spacing: -.022em;
    margin: 14px 0 0;
    text-wrap: balance;
}

.jx-lead p {
    font-family: var(--serif);
    font-size: clamp(15px, 1.3vw, 17.5px);
    line-height: 1.7;
    color: var(--ink-75);
    margin: 16px 0 0;
    max-width: 46ch;
}

.jx-lead-m {
    margin-top: 18px;
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-55);
}

/* ------------------------------------------------- section headings */

.jx-h {
    display: flex;
    align-items: baseline;
    gap: 18px;
    margin-bottom: clamp(18px, 2.6vh, 30px);
    padding-top: 6px;
    border-top: 1px solid var(--ink);
}

.jx-h h2 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: min(clamp(23px, 2.8vw, 38px), 28px + (clamp(23px, 2.8vw, 38px) - 28px) * 0.6);
    letter-spacing: -.02em;
    line-height: 1.1;
    padding-top: 12px;
}

.jx-h h2 em { font-style: italic; font-weight: 400 }

.jx-h a {
    margin-left: auto;
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-55);
    text-decoration: none;
    white-space: nowrap;
    padding-top: 16px;
}

.jx-h a:hover { color: var(--ink) }

.jx-sub {
    font-family: var(--serif);
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--ink-75);
    max-width: 60ch;
    margin: -8px 0 clamp(22px, 3vh, 34px);
}

.jx-sec { padding-block: clamp(40px, 6vh, 80px) }

/* ------------------------------------------------ the magazine, dark */

.jx-mag {
    background: var(--forest);
    color: var(--paper);
    padding: clamp(50px, 8vh, 100px) 0;
}

.jx-mag-in {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 60px);
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: clamp(30px, 5vw, 80px);
    align-items: center;
}

.jx-mag-cover {
    margin: 0;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .42);
    transform: rotate(-1.6deg);
    transition: transform .7s var(--ease);
}

.jx-mag-cover:hover { transform: rotate(0deg) translateY(-5px) }
.jx-mag-cover img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover }

.jx-mag-k {
    font-family: var(--sans);
    font-size: 9.5px;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: rgba(251, 249, 246, .6);
}

.jx-mag h2 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: min(clamp(30px, 4.4vw, 62px), 28px + (clamp(30px, 4.4vw, 62px) - 28px) * 0.6);
    line-height: 1.02;
    letter-spacing: -.025em;
    margin: 14px 0 0;
}

.jx-mag h2 em { font-style: italic; font-weight: 400 }

.jx-mag-stand {
    font-family: var(--serif);
    font-size: 16px;
    line-height: 1.7;
    color: rgba(251, 249, 246, .74);
    margin: 16px 0 0;
    max-width: 46ch;
}

/* The contents, as a printed list with leaders. */
.jx-mag-list { list-style: none; margin: clamp(22px, 3vh, 32px) 0 0; padding: 0 }

.jx-mag-list li { border-top: 1px solid rgba(251, 249, 246, .18) }
.jx-mag-list li:last-child { border-bottom: 1px solid rgba(251, 249, 246, .18) }

.jx-mag-list a {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 12px 0;
    text-decoration: none;
    font-family: var(--serif);
    font-size: 16.5px;
    color: rgba(251, 249, 246, .9);
    transition: color .25s;
}

.jx-mag-list a:hover { color: var(--paper) }
.jx-mag-list a span { flex: 1; border-bottom: 1px dotted rgba(251, 249, 246, .3) }

.jx-mag-list a em {
    font-style: normal;
    font-family: var(--sans);
    font-size: 9.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(251, 249, 246, .55);
    white-space: nowrap;
}

.jx-acts { display: flex; gap: 12px; flex-wrap: wrap; margin-top: clamp(24px, 3.5vh, 34px) }

.jx-btn {
    display: inline-block;
    font-family: var(--sans);
    font-size: 10.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    padding: 15px 26px;
    text-decoration: none;
    background: var(--paper);
    color: var(--ink);
    transition: opacity .3s;
}

.jx-btn:hover { opacity: .86 }

.jx-btn.ghost {
    background: none;
    color: var(--paper);
    border: 1px solid rgba(251, 249, 246, .4);
}

.jx-btn.ghost:hover { border-color: var(--paper); opacity: 1 }

/* ------------------------------------------- long reads, staggered */

.jx-reads {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(22px, 2.6vw, 44px) var(--gap, 28px);
}

/* The stagger is what stops three equal columns reading as a table. */
.jx-reads > *:nth-child(3n + 2) { transform: translateY(clamp(18px, 3vw, 46px)) }

.jx-read { display: block; text-decoration: none; color: inherit }
.jx-read figure { margin: 0 0 14px; overflow: hidden; background: var(--paper) }

.jx-read img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 1.1s var(--ease);
}

.jx-read:hover img { transform: scale(1.045) }

.jx-read i {
    display: block;
    font-style: normal;
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--moss);
    font-weight: 600;
}

.jx-read b {
    display: block;
    margin-top: 7px;
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(17px, 1.6vw, 21px);
    line-height: 1.25;
    letter-spacing: -.012em;
}

.jx-read p {
    margin-top: 7px;
    font-family: var(--serif);
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--ink-75);
}

.jx-meta {
    margin-top: 9px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-family: var(--sans);
    font-size: 9.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-55);
}

.jx-mem { border: 1px solid var(--hairline); padding: 2px 7px }

/* -------------------------------------------------- routes, on a rail */

.jx-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(280px, 30%);
    gap: var(--gap, 28px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 14px;
    scrollbar-width: thin;
}

.jx-rail > * { scroll-snap-align: start }

.jx-route { display: block; text-decoration: none; color: inherit }
.jx-route figure { margin: 0 0 12px; overflow: hidden; background: var(--paper) }

.jx-route img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    transition: transform 1.1s var(--ease);
}

.jx-route:hover img { transform: scale(1.04) }

.jx-route b {
    display: block;
    font-family: var(--serif);
    font-weight: 500;
    font-size: 18.5px;
    line-height: 1.25;
}

.jx-route i {
    display: block;
    margin-top: 4px;
    font-style: normal;
    font-family: var(--serif);
    font-size: 13.5px;
    color: var(--ink-55);
}

/* ------------------------------------ collections, edge to edge mosaic */

.jx-mosaic {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
}

.jx-tile {
    position: relative;
    display: block;
    overflow: hidden;
    text-decoration: none;
    background: var(--forest);
    aspect-ratio: 1;
}

/* Two of the six run tall, so the wall is not a chessboard. */
.jx-tile:nth-child(1), .jx-tile:nth-child(6) { grid-row: span 2; aspect-ratio: auto }

.jx-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .92;
    transition: transform 1.5s var(--ease), opacity .5s;
}

.jx-tile:hover img { transform: scale(1.06); opacity: 1 }

.jx-tile figcaption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 54px 20px 18px;
    background: linear-gradient(to top, rgba(18, 16, 14, .82), rgba(18, 16, 14, 0));
    color: var(--paper);
}

.jx-tile i {
    font-style: normal;
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(251, 249, 246, .74);
}

.jx-tile b {
    display: block;
    margin-top: 4px;
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(17px, 1.5vw, 21px);
    line-height: 1.22;
}

/* ------------------------------------------------- people, in portrait */

.jx-folk {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gap, 28px);
}

.jx-face { display: block; text-decoration: none; color: inherit }
.jx-face figure { margin: 0 0 13px; overflow: hidden; background: var(--paper) }

.jx-face img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    filter: saturate(.94);
    transition: transform 1.2s var(--ease), filter .5s;
}

.jx-face:hover img { transform: scale(1.04); filter: saturate(1) }

.jx-face i {
    display: block;
    font-style: normal;
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--moss);
    font-weight: 600;
}

.jx-face b {
    display: block;
    margin-top: 6px;
    font-family: var(--serif);
    font-weight: 500;
    font-size: 18px;
    line-height: 1.24;
}

/* ------------------------------------------- the weekly, deliberately plain */

.jx-week {
    background: var(--paper);
    padding-block: clamp(44px, 7vh, 84px);
}

.jx-weeklist {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 2;
    column-gap: clamp(30px, 5vw, 70px);
}

.jx-weeklist li { break-inside: avoid; border-top: 1px solid var(--hairline-soft) }
.jx-weeklist li:first-child { border-top: 1px solid var(--ink) }

.jx-weeklist a {
    display: block;
    padding: 13px 0;
    text-decoration: none;
    transition: padding-left .3s var(--ease);
}

.jx-weeklist a:hover { padding-left: 8px }

.jx-weeklist b {
    display: block;
    font-family: var(--serif);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.34;
}

.jx-weeklist span {
    display: block;
    margin-top: 3px;
    font-family: var(--sans);
    font-size: 9.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-55);
}

/* ------------------------------------------------------------ the rail */

.jx-filters {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--ground);
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--hairline);
    padding: 12px 0;
}

.jx-filters-in {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 60px);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.jx-chip {
    font-family: var(--serif);
    font-size: 14.5px;
    padding: 7px 15px;
    border: 1px solid var(--hairline);
    background: none;
    transition: all .25s var(--ease);
}

.jx-chip:hover { border-color: var(--ink) }
.jx-chip.on { background: var(--forest); border-color: var(--forest); color: var(--ground); font-style: italic }

.jx-find {
    margin-left: auto;
    font-family: var(--serif);
    font-size: 14.5px;
    padding: 8px 14px;
    border: 1px solid var(--hairline);
    background: var(--paper);
    min-width: 200px;
}

/* ------------------------------------------------------------ narrower */

@media (max-width: 1080px) {
    .jx-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)) }
    .jx-folk { grid-template-columns: repeat(2, minmax(0, 1fr)) }
    .jx-mag-in { grid-template-columns: minmax(0, 220px) minmax(0, 1fr) }
}

@media (max-width: 820px) {
    .jx-lead { grid-template-columns: minmax(0, 1fr); gap: 20px }
    .jx-reads { grid-template-columns: repeat(2, minmax(0, 1fr)) }
    .jx-reads > *:nth-child(3n + 2) { transform: none }
    .jx-mag-in { grid-template-columns: minmax(0, 1fr) }
    .jx-mag-cover { max-width: 240px }
    .jx-weeklist { columns: 1 }
}

@media (max-width: 560px) {
    .jx-reads { grid-template-columns: minmax(0, 1fr) }
    .jx-mosaic { grid-template-columns: minmax(0, 1fr) }
    .jx-tile:nth-child(1), .jx-tile:nth-child(6) { grid-row: auto; aspect-ratio: 1 }
    .jx-folk { grid-template-columns: minmax(0, 1fr) }
    .jx-count { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}

@media (prefers-reduced-motion: reduce) {
    .jx-lead img, .jx-read img, .jx-route img, .jx-tile img,
    .jx-face img, .jx-mag-cover { transition: none }
}


/* =====================================================================
   THE TRIP ROOM

   Drawn in the concierge's language rather than the magazine's: dark
   ground, bone type, gold where something wants a hand. That panel is
   the most immersive thing on the site, and this is the other place
   somebody stays for half an hour - it should feel like the same
   building.

   Three things make it feel alive rather than like a form. The pulse
   says what the group has done since you last looked, all of it already
   timestamped and none of it previously shown. The screens move rather
   than blink. And the rail names only where you are, because eight
   truncated labels said less than one clear one.

   Namespaced rm-. Generic names collide: `.facts` on this very page was
   being laid out by a four-column rule written for the listing pages.
   ===================================================================== */

.rm {
    /* The concierge's feeling without its black.
     *
     * What makes that panel immersive is not the darkness - it is that
     * one thing is on screen at a time, with room around it and gold
     * where something wants a hand. A full black page for half an hour
     * of planning is a lot to sit in, so the ground is the warm
     * parchment the rest of the site uses and the dark is kept for the
     * things that should read as objects: the guidebook, the rail. */
    --ink: #414042;
    --ink-2: #FFFFFF;
    --ink-3: #F4F1EC;
    --deep: #2B301D;
    --bone: #414042;
    --bone-dim: rgba(65, 64, 66, .62);
    --bone-faint: rgba(65, 64, 66, .42);
    --gold: #C08C3D;
    --moss: #414042;
    --hair: rgba(65, 64, 66, .13);
    --ground: #EDE8E2;

    min-height: 100vh;
    min-height: 100dvh;
    background: var(--ground);
    color: var(--ink);
    display: flex;
    flex-direction: column;
}

/* ------------------------------------------------------------- the bar */

.rm-bar { background: var(--ink-2); border-bottom: 1px solid var(--hair); flex-shrink: 0 }

.rm-bar-in {
    max-width: 1240px;
    margin: 0 auto;
    padding: 11px clamp(18px, 3vw, 40px);
    display: flex;
    align-items: center;
    gap: clamp(14px, 2.4vw, 26px);
}

/* The way back to the magazine. Small, because a trip is somewhere
   somebody meant to be - but it has to exist. */
.rm-out {
    display: block;
    flex-shrink: 0;
    padding-right: clamp(14px, 2.4vw, 26px);
    border-right: 1px solid var(--hair);
    opacity: .78;
    transition: opacity .25s;
}

.rm-out:hover { opacity: 1 }
.rm-out img { display: block; width: 78px; height: auto }

.rm-book { display: flex; align-items: center; gap: 13px; text-decoration: none; color: inherit; min-width: 0; flex-shrink: 0 }

.rm-book-art {
    width: 36px;
    aspect-ratio: 4 / 5;
    flex-shrink: 0;
    background: #2B301D;
    overflow: hidden;
    padding: 5px;
    box-shadow: 0 2px 8px rgba(65, 64, 66, .2);
}

.rm-book-art img { width: 100%; height: 100%; object-fit: cover; display: block }

.rm-book-said b {
    display: block;
    font-family: var(--serif);
    font-weight: 500;
    font-size: 16px;
    letter-spacing: -.012em;
    line-height: 1.2;
    color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.rm-book-said i {
    display: block; margin-top: 2px;
    font-style: normal; font-family: var(--sans);
    font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--bone-faint);
}

/* ------------------------------------------------------------ the pulse */

.rm-pulse {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
}

.rm-live {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--gold);
    flex-shrink: 0;
    animation: rm-breathe 2.6s ease-in-out infinite;
}

@keyframes rm-breathe { 0%, 100% { opacity: .35 } 50% { opacity: 1 } }

.rm-beats { display: flex; gap: 22px; min-width: 0; overflow: hidden }

.rm-beat {
    font-family: var(--serif);
    font-size: 13px;
    color: var(--bone-dim);
    white-space: nowrap;
}

.rm-beat:nth-child(n+2) { display: none }
.rm-beat b { font-weight: 500; color: var(--bone) }
.rm-beat em { font-style: italic; color: var(--bone) }
.rm-beat i { font-style: normal; margin-left: 8px; font-size: 11px; color: var(--bone-faint) }

@media (min-width: 1100px) { .rm-beat:nth-child(2) { display: inline } }

/* ------------------------------------------------------------ the crew */

.rm-crew { display: flex; flex-shrink: 0; margin-left: auto }

.rm-face {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: grid; place-items: center;
    font-family: var(--sans); font-size: 10px;
    background: var(--ink-3);
    color: var(--bone-dim);
    border: 1px solid var(--hair);
    margin-left: -6px;
}

.rm-face:first-child { margin-left: 0 }
.rm-face.in { background: var(--deep); border-color: var(--deep); color: #F4F1EC }
.rm-face.me { box-shadow: 0 0 0 2px var(--ink-2), 0 0 0 3px var(--gold) }
.rm-face.more { background: none; font-size: 9px }

/* ----------------------------------------------------------- the screen */

.rm-body {
    flex: 1;
    min-height: 0;
    padding-bottom: clamp(90px, 12vh, 118px);
    animation: rm-arrive .5s var(--ease, ease) both;
}

/* The screen leaves before the next arrives, so which way you are
   travelling is felt rather than labelled. */
.rm-body.going { animation: rm-leave .2s ease-in both }

@keyframes rm-arrive { from { opacity: 0; transform: translateY(12px) } }
@keyframes rm-leave  { to   { opacity: 0; transform: translateY(-8px) } }

.rm-wrap {
    max-width: 940px;
    margin: 0 auto;
    padding: clamp(34px, 7vh, 74px) clamp(18px, 3vw, 40px) 0;
}

.rm-head { margin-bottom: clamp(26px, 4.5vh, 44px) }

.rm-head h1 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: min(clamp(30px, 4.4vw, 50px), 28px + (clamp(30px, 4.4vw, 50px) - 28px) * 0.6);
    letter-spacing: -.026em;
    line-height: 1.04;
    color: var(--ink);
    text-wrap: balance;
}

.rm-head h1 em { font-style: italic; font-weight: 400 }

.rm-head p {
    margin-top: 14px;
    font-family: var(--serif);
    font-size: clamp(15.5px, 1.4vw, 17.5px);
    line-height: 1.62;
    color: var(--bone-dim);
    max-width: 54ch;
}

.rm-empty {
    border: 1px solid var(--hair);
    background: var(--ink-2);
    box-shadow: 0 2px 20px rgba(65, 64, 66, .04);
    padding: clamp(32px, 5vh, 58px);
    text-align: center;
}

.rm-empty h2 { font-family: var(--serif); font-weight: 500; font-size: 23px; color: var(--ink) }

.rm-empty p {
    margin: 11px auto 24px;
    font-family: var(--serif);
    font-size: 15.5px;
    line-height: 1.68;
    color: var(--bone-dim);
    max-width: 44ch;
}

/* The room draws its own buttons; the site's are the wrong colour here. */
.rm .btn-forest, .rm .btn-quiet {
    display: inline-block;
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    padding: 14px 24px;
    text-decoration: none;
    border: 1px solid var(--deep);
    background: var(--deep);
    color: #F4F1EC;
    cursor: pointer;
    transition: opacity .25s;
}

.rm .btn-forest:hover { opacity: .86 }
.rm .btn-quiet { background: none; color: var(--ink); border-color: var(--hair) }
.rm .btn-quiet:hover { border-color: var(--ink) }

/* --------------------------------------------------------- the rail */

/* The rail stays dark - it is the one piece of chrome that should read
   as an object sitting on top of the page rather than part of it. */
/* --------------------------------------------------------- the rail

   Fourth attempt, and the first that stops decorating. Segments, dots,
   page-lines and a hairline were all answering "how far along am I",
   which is the fourth most useful thing a bar like this can say.
   Somebody halfway through planning wants movement from it: where can I
   go, and what is worth doing next.

   So nothing is drawn - no rules, no ticks, no bars. The type carries
   it. Where you are is large and in the serif; its neighbours stay
   readable; steps further off recede. The eye finds the present without
   a marker, and the steps most likely to be wanted next are the biggest
   targets. Done sits in gold, the one state worth a colour. */

/* ---- the running foot ------------------------------------------

   Eight destinations set at nine pixels, plus a fraction nobody was
   counting, plus a "next" card - three different kinds of thing at
   three different sizes, and no way to tell which of them was the
   one to press.

   Now: the book on the left, which opens the contents and looks like
   what it does. The destinations in the middle, big enough to read
   and to hit. And where you are is the only one set in the serif.
   ------------------------------------------------------------- */

.rm-rail {
    position: sticky;
    bottom: 0;
    z-index: 60;
    background: #2B301D;
    border-top: 1px solid rgba(228, 220, 202, .12);
}

.rm-rail-in {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: clamp(12px, 2.5vw, 32px);
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 clamp(14px, 2.5vw, 30px);
}

/* The book and the name of the page you are on, together on the left,
   with the next step on the right - so the bar reads as two things at
   one size rather than four at three sizes with a label stranded in
   the middle of them. */
.rm-rail-open {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 1;
    min-width: 0;
    background: none;
    border: 0;
    padding: 11px clamp(10px, 1.6vw, 18px);
    margin-left: calc(clamp(10px, 1.6vw, 18px) * -1);
    cursor: pointer;
    text-align: left;
    transition: background .25s var(--ease, ease);
}

.rm-rail-open:hover { background: rgba(228, 220, 202, .06) }
.rm-rail-open:hover .rm-rail-book { box-shadow: 0 6px 18px rgba(0, 0, 0, .55) }
.rm-rail-open:hover .rm-where { color: #F4EEE0 }
.rm-rail-open:focus-visible { outline: 2px solid var(--gold, #C08C3D); outline-offset: -2px }

.rm-rail-book {
    display: block;
    width: 33px;
    height: 44px;
    background: #414042;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
    flex: none;
    transition: box-shadow .25s var(--ease, ease);
}

.rm-rail-book img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .9 }

.rm-rail-k {
    font-family: var(--sans);
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #E4DCCA;
    text-align: left;
    line-height: 1.3;
}

.rm-rail-k i {
    display: block;
    font-style: normal;
    font-size: 8.5px;
    letter-spacing: .12em;
    color: rgba(228, 220, 202, .5);
    margin-top: 2px;
}

/* ---- where you are --------------------------------------------

   Not a control. It says which page you are on and gets out of the
   way, so the bar carries one thing to press on each side and a
   label between them.
   ---------------------------------------------------------------- */

.rm-where {
    flex: none;
    min-width: 0;
    margin: 0;
    text-align: left;
    font-family: var(--serif);
    font-size: 17px;
    letter-spacing: -.012em;
    color: rgba(244, 238, 224, .82);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    align-self: center;
}

/* How much of the book is written. No number, because the number was
   5/8 and nobody was counting - but a line that is a third gold reads
   in the time it takes to glance at it. */
.rm-track {
    position: relative;
    flex: 1;
    min-width: 24px;
    height: 2px;
    background: rgba(228, 220, 202, .13);
    overflow: hidden;
}

.rm-track i {
    position: absolute;
    inset: 0 auto 0 0;
    display: block;
    background: var(--gold, #C08C3D);
    transition: width .6s var(--ease, ease);
}

.rm-rail-open:hover .rm-track { background: rgba(228, 220, 202, .22) }

/* ---- the one thing to do next ----------------------------------

   A solid gold slab with a caption on it read as an advert stuck to
   the bar. Quiet until it is wanted: the name of the next page set
   in the serif, in gold, with the arrow on its own. The rule beneath
   fills as the cursor crosses it, which is the same answer the
   contents give, so the whole room replies the one way.
   ---------------------------------------------------------------- */

.rm-next {
    position: relative;
    flex: none;
    align-self: stretch;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 0 2px;
    margin-left: clamp(14px, 3vw, 34px);
    color: var(--gold, #C08C3D);
    text-decoration: none;
    transition: gap .3s var(--ease, ease);
}

.rm-next b {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 17px;
    line-height: 1;
    letter-spacing: -.014em;
    white-space: nowrap;
}

.rm-next svg { flex: none; transition: transform .3s var(--ease, ease) }

.rm-next::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16px;
    height: 1px;
    background: var(--gold, #C08C3D);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s var(--ease, ease);
}

.rm-next:hover::after { transform: scaleX(1) }
.rm-next:hover svg { transform: translateX(3px) }
.rm-next:focus-visible { outline: 2px solid var(--gold, #C08C3D); outline-offset: 4px }

@media (max-width: 780px) {
    .rm-where { font-size: 15px }
    .rm-next { gap: 9px; margin-left: 14px }
    .rm-next b { font-size: 15px }
}

@media (max-width: 520px) {
    .rm-rail-book { width: 28px; height: 37px }
    .rm-track { display: none }
    .rm-where { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
    .rm-next b { font-size: 14px }
}

/* The ground the contents are set on.

   It was a scrim under a sheet of white paper, so it only had to take
   the edge off the page. There is no paper now - the names are set
   straight onto this - and the room's screens are mostly cream, so it
   has to be the dark itself rather than a hint of it. Anywhere on it
   closes.
   ---------------------------------------------------------------- */

.rm-veil {
    position: fixed;
    inset: 0;
    z-index: 199;
    background: rgba(23, 22, 15, .96);
    backdrop-filter: blur(3px);
    animation: rm-veil-in .35s var(--ease, ease) both;
}

@keyframes rm-veil-in {
    from { opacity: 0 }
    to   { opacity: 1 }
}

/* ---- the contents ----------------------------------------------

   It had been a sheet of white paper with a picture of the book
   printed on the right of it - a second object laid over the page,
   and a second copy of a cover that is already on the bar you
   pressed to get here. There is no card and no picture now: eight
   names on the dark, arriving a line at a time, and everything that
   is not a name closes it.
   ---------------------------------------------------------------- */

.rm-contents {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    padding: clamp(20px, 5vh, 60px) clamp(18px, 5vw, 60px);
    overflow-y: auto;
}

.rm-contents-in {
    position: relative;
    width: min(34rem, 100%);
    animation: rm-toc .5s var(--ease, ease) both;
}

@keyframes rm-toc {
    from { opacity: 0; transform: translateY(14px) }
    to   { opacity: 1; transform: none }
}

.rm-contents-k {
    text-align: center;
    margin: 0 0 clamp(16px, 3vh, 30px);
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: rgba(241, 239, 230, .4);
}

.rm-group + .rm-group { margin-top: clamp(20px, 3.4vh, 34px) }

.rm-group-k {
    text-align: center;
    margin: 0 0 6px;
    font-family: var(--sans);
    font-size: 8.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(241, 239, 230, .32);
}

.rm-entry {
    position: relative;
    display: block;
    text-align: center;
    padding: clamp(13px, 2.4vh, 21px) 4px;
    border-bottom: 1px solid rgba(241, 239, 230, .13);
    text-decoration: none;
    transition: padding-left .3s var(--ease, ease),
                border-color .3s var(--ease, ease);
}

.rm-entry:last-child { border-bottom: 0 }
.rm-entry:hover { border-color: rgba(241, 239, 230, .34) }

/* The rule fills gold from the left as the cursor runs along the row,
   so it answers without anything moving but light. */
.rm-entry::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: var(--gold, #C08C3D);
    transform: scaleX(0);
    transition: transform .45s var(--ease, ease);
}

.rm-entry:hover::after { transform: scaleX(1) }
.rm-entry:focus-visible { outline: 1px solid var(--gold, #C08C3D); outline-offset: 4px }

.rm-entry b {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(19px, 2.6vh, 25px);
    line-height: 1.2;
    letter-spacing: -.014em;
    color: #F4EEE0;
    transition: color .3s var(--ease, ease);
}

.rm-entry:hover b { color: var(--gold, #C08C3D) }
.rm-entry.done b { color: rgba(241, 239, 230, .5) }
.rm-entry.on b { font-style: italic; color: var(--gold, #C08C3D) }

.rm-entry.shut { cursor: default }
.rm-entry.shut b { color: rgba(241, 239, 230, .28) }
.rm-entry.shut:hover { border-color: rgba(241, 239, 230, .13) }
.rm-entry.shut:hover::after { transform: scaleX(0) }

.rm-shut {
    z-index: 201;
    position: absolute; top: 12px; right: 16px;
    font-size: 26px; line-height: 1;
    background: none; border: 0; cursor: pointer;
    color: var(--bone-faint);
}

.rm-shut:hover { color: var(--bone) }

@media (max-width: 760px) {
    .rm-contents-in { grid-template-columns: minmax(0, 1fr) }
    .rm-cover { order: -1; max-width: 200px; margin: 0 auto }
}

@media (prefers-reduced-motion: reduce) {
    .rm-body, .rm-veil, .rm-contents-in, .rm-live { animation: none }
    .rm-nodes::after, .rm-node i, .rm-entry { transition: none }
}

/* =====================================================================
   THE ROOM'S SCREENS

   One job each. The trip used to be eight of these underneath one
   another on a single page, and none of them could be seen properly
   because of all the others.
   ===================================================================== */

/* The first welcome screen's styles lived here. They are gone rather than
   overridden: the markup changed shape entirely - the cover became a real
   cover instead of a stacked column, and the route list became a path - and
   `.wl` was still applying a two-column grid to a container that no longer
   wanted one, so the hero and the path were laid out on top of each other.
   The live rules are in the welcome block scoped under .rm. */

/* ------------------------------------------------------- discover */

.dc-kinds { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--hairline) }

.dc-kind {
    font-family: var(--serif);
    font-size: 14.5px;
    padding: 7px 14px;
    border: 1px solid var(--hairline);
    background: var(--paper);
    cursor: pointer;
    transition: all .2s;
}

.dc-kind:hover { border-color: var(--ink) }
.dc-kind.on { background: var(--forest); border-color: var(--forest); color: var(--paper) }
.dc-kind i { font-style: normal; font-size: 11px; color: var(--ink-55); margin-left: 5px }
.dc-kind.on i { color: rgb(251 249 246 / .66) }

.dc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px }

.dc-card {
    position: relative;
    background: var(--paper);
    border: 1px solid var(--hairline);
    display: flex;
    flex-direction: column;
    transition: border-color .25s;
}

.dc-card:hover { border-color: var(--ink) }
.dc-card.yes { border-color: var(--moss); box-shadow: inset 0 0 0 1px var(--moss) }

.dc-art { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ground) }
.dc-art img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease, ease) }
.dc-card:hover .dc-art img { transform: scale(1.04) }

/* The only unit of distance that means anything before you arrive. */
.dc-from {
    position: absolute;
    top: 9px; left: 9px;
    background: var(--paper);
    font-family: var(--sans);
    font-size: 8.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 5px 9px;
}

.dc-said { padding: 13px 14px 10px; flex: 1 }
.dc-kicker { font-family: var(--sans); font-size: 8.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--moss) }
.dc-said h3 { font-family: var(--serif); font-weight: 500; font-size: 17.5px; line-height: 1.24; margin-top: 4px }
.dc-said h3 a { text-decoration: none }
.dc-said p { margin-top: 5px; font-family: var(--serif); font-size: 13.5px; line-height: 1.5; color: var(--ink-75);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }

.dc-act { display: flex; gap: 6px; padding: 0 14px 14px }

.dc-yes {
    flex: 1;
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 10px;
    border: 1px solid var(--hairline);
    background: none;
    cursor: pointer;
    transition: all .2s;
}

.dc-yes:hover { border-color: var(--ink) }
.dc-yes.on { background: var(--forest); border-color: var(--forest); color: var(--paper) }
.dc-yes i { font-style: normal; margin-left: 6px; opacity: .7 }

.dc-no {
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 10px 11px;
    border: 1px solid var(--hairline);
    background: none;
    color: var(--ink-55);
    cursor: pointer;
}

.dc-no:hover { color: var(--ink); border-color: var(--ink) }
.dc-no.on { background: var(--ink); border-color: var(--ink); color: var(--paper) }

/* ----------------------------------------------------------- days */

.dy-list { display: grid; gap: 2px }

.dy { background: var(--paper); border: 1px solid var(--hairline); padding: 18px 20px }
.dy.moving { border-left: 3px solid var(--moss) }

.dy-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 12px }
.dy-head h2 { font-family: var(--serif); font-weight: 500; font-size: 20px; letter-spacing: -.014em }

.dy-where {
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-55);
}

.dy-empty { font-family: var(--serif); font-style: italic; font-size: 14.5px; color: var(--ink-55) }

.dy-chain { list-style: none; margin: 0; padding: 0 }
.dy-chain > li { position: relative; padding-left: 22px; padding-bottom: 12px }

.dy-chain > li:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 3px; top: 14px; bottom: 0;
    width: 1px;
    background: var(--hairline);
}

.dy-dot { position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--moss) }
.dy-what b { display: block; font-family: var(--serif); font-weight: 500; font-size: 16.5px; line-height: 1.28 }
.dy-what b a { text-decoration: none }
.dy-what i { display: block; margin-top: 2px; font-style: normal; font-family: var(--serif); font-size: 13.5px; color: var(--ink-55) }
.dy-what em { display: block; margin-top: 4px; font-size: 13px; color: var(--ink-75) }

/* Agreed on, not yet placed. This existed all along and was rendered
   only as options inside a dropdown nobody would find. */
.dy-pile { margin-top: clamp(30px, 5vh, 46px) }

.dy-pile > h2 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 14px;
}

.dy-pile > h2 i {
    display: block;
    margin-top: 3px;
    font-style: normal;
    font-family: var(--sans);
    font-size: 9.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-55);
}

.dy-pile-list { display: grid; gap: 8px }

.dy-loose {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    background: var(--paper);
    border: 1px solid var(--hairline);
    padding: 9px;
}

.dy-loose-art { display: block; aspect-ratio: 1; overflow: hidden; background: var(--ground) }
.dy-loose-art img { width: 100%; height: 100%; object-fit: cover }
.dy-loose-said b { display: block; font-family: var(--serif); font-weight: 500; font-size: 16px }
.dy-loose-said i { display: block; font-style: normal; font-family: var(--sans); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-55) }

.dy-put { font-family: var(--serif); font-size: 13.5px; padding: 8px 10px; border: 1px solid var(--hairline); background: var(--ground) }

/* ---------------------------------------------------------- group */

.gp-link {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    background: var(--paper);
    border: 1px solid var(--hairline);
    padding: 16px 18px;
    margin-bottom: 24px;
}

.gp-link-k { font-family: var(--sans); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-55) }
.gp-link code { flex: 1; min-width: 200px; font-size: 13px; color: var(--ink-75); overflow: hidden; text-overflow: ellipsis }

.gp-list { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 1px }
.gp-list li { display: flex; align-items: center; gap: 14px; background: var(--paper); border: 1px solid var(--hairline); padding: 12px 14px }

.gp-face {
    width: 36px; height: 36px;
    border-radius: 50%;
    display: grid; place-items: center;
    font-family: var(--sans); font-size: 12px;
    background: var(--ground); color: var(--ink-55);
    border: 1px solid var(--hairline);
    flex-shrink: 0;
}

.gp-face.in { background: var(--forest); border-color: var(--forest); color: var(--paper) }
.gp-said b { display: block; font-family: var(--serif); font-weight: 500; font-size: 16px }
.gp-said i { display: block; font-style: normal; font-family: var(--sans); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-55) }

.gp-ask label { display: block; font-family: var(--sans); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-55); margin-bottom: 8px }
.gp-ask-row { display: flex; gap: 8px; flex-wrap: wrap }
.gp-ask input { flex: 1; min-width: 200px; font-family: var(--serif); font-size: 15px; padding: 10px 12px; border: 1px solid var(--hairline); background: var(--paper) }

/* ---------------------------------------------------------- stays */

.st-list { display: grid; gap: 0 }

.st-leg {
    font-family: var(--sans);
    font-size: 9.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-55);
    padding: 14px 0 14px 22px;
    position: relative;
}

.st-leg::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 1px; background: var(--hairline) }

.st-card { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 20px; background: var(--paper); border: 1px solid var(--hairline); padding: 14px }
.st-art { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ground) }
.st-art img { width: 100%; height: 100%; object-fit: cover }

.st-n { font-family: var(--sans); font-size: 8.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--moss) }
.st-said h2 { font-family: var(--serif); font-weight: 500; font-size: 21px; line-height: 1.2; margin-top: 4px }
.st-said h2 a { text-decoration: none }
.st-where { font-family: var(--serif); font-size: 14px; color: var(--ink-55); margin-top: 2px }
.st-when { font-family: var(--serif); font-size: 14px; color: var(--ink-75); margin-top: 6px }

.st-flags { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px }

.st-flag {
    font-family: var(--sans); font-size: 9px; letter-spacing: .16em; text-transform: uppercase;
    border: 1px solid var(--hairline); padding: 4px 9px; color: var(--ink-75);
}

.st-flag.done { border-color: var(--moss); color: var(--moss) }
.st-flag.need { border-color: var(--ink); color: var(--ink) }

.st-warn { margin-top: 10px; font-family: var(--serif); font-size: 13.5px; line-height: 1.6; color: var(--ink-75); max-width: 52ch }
.st-more { margin-top: 20px; font-family: var(--serif); font-size: 15px }

/* -------------------------------------------------------- arrival */

.ar-doors { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px }

.ar-door {
    font-family: var(--serif); font-size: 15px; padding: 11px 17px;
    border: 1px solid var(--hairline); background: var(--paper); cursor: pointer;
    transition: all .2s;
}

.ar-door:hover { border-color: var(--ink) }
.ar-door.on { background: var(--forest); border-color: var(--forest); color: var(--paper); font-style: italic }

.ar-own label { display: block; font-family: var(--sans); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-55); margin-bottom: 8px }
.ar-own input { width: 100%; max-width: 460px; font-family: var(--serif); font-size: 15.5px; padding: 11px 13px; border: 1px solid var(--hairline); background: var(--paper) }

.ar-said { margin-top: 24px; font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--ink-75) }

@media (max-width: 820px) {
    .wl { grid-template-columns: minmax(0, 1fr); gap: 26px }
    .wl-book { max-width: 260px; transform: none }
    .st-card { grid-template-columns: minmax(0, 1fr) }
    .dy-loose { grid-template-columns: 52px minmax(0, 1fr) }
    .dy-put { grid-column: 1 / -1 }
}


/* ------------------------------------------------- the journal, simplified

   Subjects lead. 576 articles behind eight subjects is something a
   reader can choose from; the same 576 behind a chip row and one long
   grid is a pile they have to sift. The "Long reads" grid is gone - the
   articles live inside their subject, which is where anybody would look.

   The headings say what each section is. "Gathered together" and
   "Routes we have driven" told a reader nothing about what they would
   find in them. */

.jx-count-one {
    margin-top: clamp(18px, 3vh, 28px);
    font-family: var(--serif);
    font-size: clamp(15.5px, 1.4vw, 18px);
    line-height: 1.6;
    color: var(--ink-75);
    max-width: 46ch;
}

.jx-subjects {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: clamp(10px, 1.4vw, 18px);
}

.jx-subject {
    position: relative;
    display: block;
    aspect-ratio: 5 / 4;
    overflow: hidden;
    text-decoration: none;
    background: var(--forest);
}

.jx-subject img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .82;
    transition: transform 1.4s var(--ease), opacity .4s;
}

.jx-subject:hover img { transform: scale(1.05); opacity: .95 }

.jx-subject > span {
    position: absolute;
    inset: auto 0 0 0;
    padding: 50px 18px 16px;
    background: linear-gradient(to top, rgb(18 16 14 / .82), rgb(18 16 14 / 0));
    color: var(--paper);
}

.jx-subject b {
    display: block;
    font-family: var(--serif);
    font-weight: 500;
    font-size: min(clamp(19px, 1.8vw, 24px), 28px + (clamp(19px, 1.8vw, 24px) - 28px) * 0.6);
    letter-spacing: -.014em;
    line-height: 1.16;
}

.jx-subject i {
    display: block;
    margin-top: 3px;
    font-style: normal;
    font-family: var(--sans);
    font-size: 9.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgb(251 249 246 / .74);
}

/* The mosaic caption loses its kicker: "Collection" above a collection
   name inside a section headed Collections is the same word three
   times. */
.jx-tile figcaption { padding: 46px 18px 15px }

/* One subject, its articles, and nothing else on the page. */
.jx-mast-k a { text-decoration: none; border-bottom: 1px solid var(--hairline) }
.jx-mast-k a:hover { border-color: var(--ink) }

@media (max-width: 560px) {
    .jx-subjects { grid-template-columns: repeat(2, minmax(0, 1fr)) }
    .jx-subject b { font-size: 17px }
}

/* The small subjects, still reachable but not given a photograph the same
   size as a subject with a hundred and fifty articles behind it. */
.jx-also {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--hairline-soft);
    font-family: var(--serif);
    font-size: 15px;
    color: var(--ink-55);
}

.jx-also a { color: var(--ink); text-decoration-color: var(--hairline); text-underline-offset: 3px }
.jx-also a:hover { text-decoration-color: var(--ink) }
.jx-also i { font-style: normal; font-size: 12.5px; color: var(--ink-55) }


/* =====================================================================
   THE ROOM'S SCREENS, IN THE ROOM'S COLOURS

   Everything below is scoped to .rm, so it only applies inside the trip
   and cannot reach the magazine pages that share these class names.

   Less furniture than the first pass. Cards had a border, a background
   and a shadow apiece, which on a dark ground reads as clutter; here a
   hairline and space do the same job quietly.
   ===================================================================== */

/* -------------------------------------------------------- welcome

   An introduction and a way in, not a summary. It used to read the
   route back as a list, which is data - somebody opening their trip for
   the first time needs to know what this is and what to press.

   The cover is the guidebook's own `.bookcover` from the design sheet,
   not an impression of one. Everything here just gives it room. */

.rm .wl {
    max-width: 1000px;
    margin: 0 auto;
    padding: clamp(34px, 6vh, 70px) clamp(18px, 3vw, 40px) clamp(30px, 6vh, 64px);
}

.rm .wl-hero {
    display: grid;
    grid-template-columns: minmax(0, 252px) minmax(0, 1fr);
    gap: clamp(30px, 6vw, 76px);
    align-items: center;
}

.rm .wl-hero .bookcover {
    transform: rotate(-1.4deg);
    transition: transform .7s var(--ease, ease);
}

.rm .wl-hero .bookcover:hover { transform: rotate(0deg) translateY(-5px) }

.rm .wl-k {
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--bone-faint);
}

.rm .wl-said h1 {
    margin-top: 14px;
    font-family: var(--serif);
    font-weight: 500;
    font-size: min(clamp(29px, 4vw, 46px), 28px + (clamp(29px, 4vw, 46px) - 28px) * 0.6);
    letter-spacing: -.026em;
    line-height: 1.05;
    color: var(--ink);
    text-wrap: balance;
    max-width: 16ch;
}

.rm .wl-said h1 em { font-style: italic; font-weight: 400 }

.rm .wl-lede {
    margin-top: 16px;
    font-family: var(--serif);
    font-size: clamp(15px, 1.35vw, 17px);
    line-height: 1.66;
    color: var(--bone-dim);
    max-width: 48ch;
}

.rm .wl-quiet { font-size: 14.5px; color: var(--bone-faint) }

.rm .wl-go {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 26px;
    padding: 16px 26px;
    background: var(--deep);
    color: #F4F1EC;
    text-decoration: none;
    font-family: var(--serif);
    font-size: 17px;
    letter-spacing: -.008em;
    transition: gap .3s var(--ease, ease), opacity .25s;
}

.rm .wl-go:hover { gap: 20px; opacity: .92 }

/* ---- the way through -------------------------------------------

   Not numbered, and not joined up.

   The numbers and the line were drawing a sequence, and this is not
   one - none of it has to be done in order, which the page says twice
   in its own copy. They also hung out into the gutter at a third left
   edge, which is why the column never looked aligned with anything.

   Six names, on the heading's own left edge, with state in the type
   and nothing drawn at all. */

.rm .wl-path {
    list-style: none;
    margin: clamp(30px, 5vh, 52px) 0 0;
    padding: clamp(26px, 4vh, 40px) 0 0;
    border-top: 1px solid var(--hair);
}

.rm .wl-path a {
    display: block;
    padding: 12px 0;
    text-decoration: none;
    color: var(--bone-dim);
    font-family: var(--serif);
    font-weight: 500;
    font-size: min(clamp(20px, 2.2vw, 26px), 28px + (clamp(20px, 2.2vw, 26px) - 28px) * 0.6);
    letter-spacing: -.02em;
    line-height: 1.14;
    transition: color .25s, transform .3s var(--ease, ease);
}

.rm .wl-path a:hover { color: var(--ink); transform: translateX(5px) }

/* Behind you it recedes; where you are is full ink. That is the whole
   of the state, and it is enough. */
.rm .wl-path .done a { color: var(--bone-faint) }
.rm .wl-path .now a { color: var(--ink) }

.rm .wl-note {
    margin-top: 24px;
    font-family: var(--serif);
    font-style: italic;
    font-size: 14.5px;
}

.rm .wl-note a { color: var(--gold) }

@media (max-width: 720px) {
    .rm .wl-hero { grid-template-columns: minmax(0, 1fr); gap: 26px }
    .rm .wl-hero .bookcover { max-width: 200px; margin: 0 auto; transform: none }
    .rm .wl-said h1 { max-width: none }
    .rm .wl-path a { flex-wrap: wrap; gap: 8px 12px }
    .rm .wl-dots { display: none }
}

/* ------------------------------------------------------- shortlist */

.rm .sl-list { display: grid; gap: 1px }

.rm .sl-card {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    background: var(--ink-2);
    border: 0;
    border-bottom: 1px solid var(--hair);
    padding: 12px;
    transition: background .25s;
}

.rm .sl-card:hover { background: var(--ink-3) }
.rm .sl-card.placed { box-shadow: inset 3px 0 0 var(--gold) }
.rm .sl-art { background: var(--ink-3) }
.rm .sl-art img { opacity: 1 }
.rm .sl-kind { color: var(--bone-faint) }
.rm .sl-said h3 { color: var(--ink) }
.rm .sl-said p { color: var(--bone-dim) }
.rm .sl-on { color: var(--gold); border-color: var(--gold) }
.rm .sl-wait { color: var(--bone-faint) }

.rm .sl-yes, .rm .sl-no { border-color: var(--hair); color: var(--bone) }
.rm .sl-yes span, .rm .sl-no span, .rm .sl-yes i, .rm .sl-no i { color: var(--bone-faint) }
.rm .sl-yes:hover, .rm .sl-no:hover { border-color: var(--bone) }
.rm .sl-yes.on { background: var(--gold); border-color: var(--gold); color: #FFFDF8 }
.rm .sl-yes.on span, .rm .sl-yes.on i { color: rgba(255, 253, 248, .72) }
.rm .sl-no.on { background: var(--deep); border-color: var(--deep); color: #F4F1EC }
.rm .sl-no.on span, .rm .sl-no.on i { color: rgba(244, 241, 236, .6) }

.rm .sl-parked > h2 { color: var(--ink); border-color: var(--hair) }
.rm .sl-parked > h2 i { color: var(--bone-faint) }
.rm .sl-parked .sl-card { opacity: .5 }
.rm .sl-parked .sl-card:hover { opacity: 1 }
.rm .sl-foot { color: var(--bone-dim) }

/* -------------------------------------------------------- discover */

.rm .dc-kinds { border-color: var(--hair) }
.rm .dc-kind { background: none; border-color: var(--hair); color: var(--bone) }
.rm .dc-kind:hover { border-color: var(--bone) }
.rm .dc-kind.on { background: var(--deep); border-color: var(--deep); color: #F4F1EC }
.rm .dc-kind i { color: var(--bone-faint) }
.rm .dc-kind.on i { color: rgba(244, 241, 236, .58) }

.rm .dc-card { background: var(--ink-2); border-color: var(--hair) }
.rm .dc-card:hover { border-color: var(--bone-faint) }
.rm .dc-card.yes { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold) }
.rm .dc-art { background: var(--ink-3) }
.rm .dc-art img { opacity: 1 }
.rm .dc-card:hover .dc-art img { opacity: 1 }
.rm .dc-from { background: var(--ink-2); color: var(--ink); border: 0; box-shadow: 0 1px 6px rgba(65, 64, 66, .16) }
.rm .dc-kicker { color: var(--gold) }
.rm .dc-said h3 { color: var(--ink) }
.rm .dc-said p { color: var(--bone-dim) }
.rm .dc-yes { border-color: var(--hair); color: var(--bone) }
.rm .dc-yes:hover { border-color: var(--bone) }
.rm .dc-yes.on { background: var(--gold); border-color: var(--gold); color: #FFFDF8 }
.rm .dc-no { border-color: var(--hair); color: var(--bone-faint) }
.rm .dc-no:hover { color: var(--bone); border-color: var(--bone) }
.rm .dc-no.on { background: var(--deep); border-color: var(--deep); color: #F4F1EC }

/* ------------------------------------------------------------ days */

.rm .dy { background: var(--ink-2); border: 0; border-bottom: 1px solid var(--hair); padding: 20px 18px }
.rm .dy.moving { box-shadow: inset 3px 0 0 var(--gold) }
.rm .dy-head h2 { color: var(--ink) }
.rm .dy-where { color: var(--bone-faint) }
.rm .dy-empty { color: var(--bone-faint) }
.rm .dy-chain > li:not(:last-child)::before { background: var(--hair) }
.rm .dy-dot { background: var(--gold) }
.rm .dy-what b { color: var(--ink) }
.rm .dy-what i { color: var(--bone-dim) }
.rm .dy-what em { color: var(--bone-dim) }
.rm .dy-pile > h2 { color: var(--ink); border-color: var(--hair) }
.rm .dy-pile > h2 i { color: var(--bone-faint) }
.rm .dy-loose { background: var(--ink-2); border-color: var(--hair) }
.rm .dy-loose-art { background: var(--ink-3) }
.rm .dy-loose-said b { color: var(--ink) }
.rm .dy-loose-said i { color: var(--bone-faint) }
.rm .dy-put { background: none; border-color: var(--hair); color: var(--ink) }

/* ----------------------------------------------------------- group */

.rm .gp-link { background: var(--ink-2); border-color: var(--hair) }
.rm .gp-link-k { color: var(--bone-faint) }
.rm .gp-link code { color: var(--bone-dim) }
.rm .gp-list li { background: var(--ink-2); border: 0; border-bottom: 1px solid var(--hair) }
.rm .gp-face { background: var(--ink-3); border-color: var(--hair); color: var(--bone-dim) }
.rm .gp-face.in { background: var(--deep); border-color: var(--deep); color: #F4F1EC }
.rm .gp-said b { color: var(--ink) }
.rm .gp-said i { color: var(--bone-faint) }
.rm .gp-ask label { color: var(--bone-faint) }
.rm .gp-ask input { background: var(--ink-2); border-color: var(--hair); color: var(--bone) }

/* ----------------------------------------------------------- stays */

.rm .st-leg { color: var(--bone-faint) }
.rm .st-leg::before { background: var(--hair) }
.rm .st-card { background: var(--ink-2); border-color: var(--hair) }
.rm .st-art { background: var(--ink-3) }
.rm .st-art img { opacity: 1 }
.rm .st-n { color: var(--gold) }
.rm .st-said h2 { color: var(--ink) }
.rm .st-where, .rm .st-when { color: var(--bone-dim) }
.rm .st-flag { border-color: var(--hair); color: var(--bone-dim) }
.rm .st-flag.done { border-color: var(--moss); color: var(--moss) }
.rm .st-flag.need { border-color: var(--gold); color: var(--gold) }
.rm .st-warn { color: var(--bone-dim) }
.rm .st-more a { color: var(--bone) }

/* --------------------------------------------------------- arrival */

.rm .ar-door { background: none; border-color: var(--hair); color: var(--bone) }
.rm .ar-door:hover { border-color: var(--bone) }
.rm .ar-door.on { background: var(--deep); border-color: var(--deep); color: #F4F1EC }
.rm .ar-own label { color: var(--bone-faint) }
.rm .ar-own input { background: var(--ink-2); border-color: var(--hair); color: var(--bone) }
.rm .ar-said { color: var(--bone-dim) }
.rm .ar-said b { color: var(--ink) }

/* ----------------------------------------------------------- album */

.rm .al-days { border-color: var(--hair) }
.rm .al-day { background: none; border-color: var(--hair); color: var(--bone) }
.rm .al-day:hover { border-color: var(--bone) }
.rm .al-day.on { background: var(--deep); border-color: var(--deep); color: #F4F1EC }
.rm .al-day i { color: var(--bone-faint) }
.rm .al-day.on i { color: rgba(244, 241, 236, .58) }
.rm .al-shot { background: var(--ink-2) }

/* ---------------------------------------------------------- narrow */

@media (max-width: 820px) {
    .rm .wl { grid-template-columns: minmax(0, 1fr); gap: 28px }
    .rm .wl-book { max-width: 230px; transform: none }
    .rm .st-card { grid-template-columns: minmax(0, 1fr) }
}

/* ------------------------------------------------------- the notices

   What the rest of the group is up to, said as it happens - and
   replayed on arrival, so the room is alive the moment somebody lands
   rather than only if they happen to be looking when a vote comes in.

   Restraint is the whole design. Three at most, gone after six seconds,
   never your own actions, never the same beat twice, and sat above the
   rail rather than over the work. The point is a sense that other
   people are here, not a feed demanding attention. */

.tp {
    position: fixed;
    left: clamp(14px, 3vw, 34px);
    bottom: calc(clamp(72px, 11vh, 96px) + 16px);
    z-index: 45;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    pointer-events: none;
    max-width: min(340px, calc(100vw - 28px));
}

.tp-note {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 15px 11px 11px;
    background: #2B301D;
    color: #F4F1EC;
    text-decoration: none;
    box-shadow: 0 14px 40px rgba(65, 64, 66, .3);
    animation: tp-in .45s cubic-bezier(.22, .8, .24, 1) both;
}

@keyframes tp-in {
    from { opacity: 0; transform: translateY(10px) scale(.97) }
}

.tp-note:hover { background: #2B301D }

.tp-face {
    width: 28px; height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(244, 241, 236, .12);
    color: #F4F1EC;
    font-family: var(--sans);
    font-size: 10.5px;
}

.tp-said {
    font-family: var(--serif);
    font-size: 13.5px;
    line-height: 1.4;
    color: rgba(244, 241, 236, .78);
}

.tp-said b { font-weight: 500; color: #F4F1EC }
.tp-said em { font-style: italic; color: #F4F1EC }

.tp-said i {
    display: block;
    font-style: normal;
    font-family: var(--sans);
    font-size: 8.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(244, 241, 236, .42);
    margin-top: 2px;
}

@media (prefers-reduced-motion: reduce) { .tp-note { animation: none } }


/* ------------------------------------------------- the guidebook cover

   Measured off HS Isle of Skye Guide - Cover KRH 17.07.pdf rather than
   guessed at. Four things were wrong.

   The ground was `--forest` (#2B301D), a green. The printed cover is a
   dark olive, #2B301D, sampled from the artwork itself.

   The shape was 3:4.15 - too narrow. The trim on the real book is close
   to 4:5.

   The photograph had a white mount: `background: var(--paper); padding:
   6px`. There is no mount. The picture sits straight on the olive, and
   the frame was the most obviously wrong thing about it.

   And the picture is 4:5 as well, about half the width of the cover,
   with the type centred on the same column.

   Scoped to .rm so the guidebook stylesheet stays untouched - that sheet
   is generated from the design file and should not be hand-edited. */

.rm .bookcover {
    background: #2B301D;
    color: #F1EFE6;
    aspect-ratio: 4 / 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 11% 10% 9%;
    box-shadow: 0 26px 64px rgba(65, 64, 66, .3);
}

/* "THE BEST OF" on the printed book. */
.rm .bookcover .bc-region {
    font-family: var(--sans);
    font-size: clamp(7px, .62vw, 8.5px);
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #F1EFE6;
    max-width: 90%;
}

.rm .bookcover h3 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: min(clamp(19px, 2.05vw, 27px), 28px + (clamp(19px, 2.05vw, 27px) - 28px) * 0.6);
    line-height: 1.08;
    letter-spacing: -.004em;
    margin: 5% 0 7%;
    max-width: 96%;
    color: #FFFDF8;
}

.rm .bookcover h3 em { font-style: italic; font-weight: 400 }

/* No mount. The picture sits on the olive. */
.rm .bookcover figure {
    width: 52%;
    margin: 0;
    padding: 0;
    background: none;
    box-shadow: none;
}

.rm .bookcover figure img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
}

.rm .bookcover .bc-dates {
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(10px, .88vw, 12px);
    color: rgba(241, 239, 230, .82);
    margin-top: 7%;
}

.rm .bookcover .bc-by {
    font-family: var(--sans);
    font-size: clamp(6.5px, .58vw, 8px);
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(241, 239, 230, .74);
    margin-top: 4%;
}


@media (max-width: 640px) {
    .rm-out { display: none }
    .rm .wl-path::before { left: 17px }
    .rm .wl-mark { width: 35px; height: 35px }
    .rm .wl-stamp { width: 28px; height: 28px }
}


/* =====================================================================
   THE REST OF THE ROOM, IN THE WELCOME'S LANGUAGE

   The welcome ended up with almost no furniture: one column, one left
   edge, generous air, and the state carried by the type. The other
   screens were still built the way the first pass built them - every
   row in a bordered box on its own background, which on a warm ground
   reads as a form.

   This is the same treatment applied across: hairlines instead of
   boxes, one shared measure, and space doing the work borders were.
   Scoped to .rm throughout, so none of it reaches the magazine pages
   that share these class names.
   ===================================================================== */

/* One measure, so every screen starts on the same left edge. */
.rm .rm-wrap {
    max-width: 1000px;
    padding: clamp(34px, 6vh, 70px) clamp(18px, 3vw, 40px) clamp(30px, 6vh, 64px);
}

/* _shared.css:1245 is a bare , which catches every header element on the site -
   including a page's own title block. So the itinerary's heading and
   its intro paragraph were pinned to the top of the window at z-index
   100, and the whole day list scrolled underneath them.

   Reset here rather than in the shared sheet, which belongs to every
   other page and is not ours to change. */
.rm .rm-head { position: static; z-index: auto }

.rm .rm-head { margin-bottom: clamp(28px, 5vh, 48px) }

.rm .rm-head h1 {
    font-size: min(clamp(29px, 4vw, 46px), 28px + (clamp(29px, 4vw, 46px) - 28px) * 0.6);
    letter-spacing: -.026em;
    line-height: 1.05;
    max-width: 18ch;
}

.rm .rm-head p { font-size: clamp(15px, 1.35vw, 17px); max-width: 50ch }

/* An empty screen should read like the welcome does: a sentence and a
   way on, not a panel. */
.rm .rm-empty {
    border: 0;
    background: none;
    box-shadow: none;
    padding: clamp(26px, 5vh, 48px) 0;
    text-align: left;
    border-top: 1px solid var(--hair);
}

.rm .rm-empty h2 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: min(clamp(21px, 2.3vw, 27px), 28px + (clamp(21px, 2.3vw, 27px) - 28px) * 0.6);
    letter-spacing: -.02em;
}

.rm .rm-empty p { margin: 12px 0 24px; max-width: 46ch }

/* ---- the shortlist ------------------------------------------------ */

.rm .sl-list { gap: 0 }

.rm .sl-card {
    background: none;
    border: 0;
    border-bottom: 1px solid var(--hair);
    padding: 16px 0;
    grid-template-columns: 84px minmax(0, 1fr) auto;
    gap: 20px;
    transition: transform .3s var(--ease, ease);
}

.rm .sl-card:hover { background: none; transform: translateX(5px) }
.rm .sl-card.placed { box-shadow: none }
.rm .sl-card.placed .sl-said h3::after {
    content: "on a day";
    margin-left: 10px;
    font-family: var(--sans);
    font-size: 8.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold);
    vertical-align: middle;
}

.rm .sl-said h3 { font-size: min(clamp(18px, 1.9vw, 22px), 28px + (clamp(18px, 1.9vw, 22px) - 28px) * 0.6); letter-spacing: -.018em }
.rm .sl-on { display: none }

.rm .sl-yes, .rm .sl-no {
    border: 1px solid var(--hair);
    width: 56px;
    padding: 8px 4px;
}

.rm .sl-parked > h2 { border-color: var(--hair) }

/* ---- discover ----------------------------------------------------- */

.rm .dc-card {
    background: none;
    border: 0;
    border-bottom: 1px solid var(--hair);
}

.rm .dc-card:hover { border-color: var(--hair) }
.rm .dc-card.yes { box-shadow: none; border-color: var(--hair) }
.rm .dc-card.yes .dc-said h3 { color: var(--gold) }
.rm .dc-grid { gap: 0 clamp(20px, 2.6vw, 36px) }
.rm .dc-art { aspect-ratio: 3 / 2 }
.rm .dc-said { padding: 12px 0 8px }
.rm .dc-act { padding: 0 0 16px }
.rm .dc-from { top: 8px; left: 8px; border: 0 }

/* ---- the days ----------------------------------------------------- */

.rm .dy {
    background: none;
    border: 0;
    border-bottom: 1px solid var(--hair);
    padding: 22px 0;
}

.rm .dy.moving { box-shadow: none }
.rm .dy.moving .dy-where { color: var(--gold) }
.rm .dy-head h2 { font-size: min(clamp(19px, 2vw, 23px), 28px + (clamp(19px, 2vw, 23px) - 28px) * 0.6); letter-spacing: -.018em }
.rm .dy-loose { background: none; border: 0; border-bottom: 1px solid var(--hair); padding: 12px 0 }
.rm .dy-pile > h2 { border-color: var(--hair) }
.rm .dy-put { background: none; border-color: var(--hair) }

/* ---- the group ---------------------------------------------------- */

.rm .gp-link {
    background: none;
    border: 0;
    border-bottom: 1px solid var(--hair);
    padding: 0 0 20px;
    margin-bottom: 26px;
}

.rm .gp-list li { background: none; border: 0; border-bottom: 1px solid var(--hair); padding: 14px 0 }
.rm .gp-said b { font-family: var(--serif); font-size: 18px; letter-spacing: -.014em }
.rm .gp-ask input { background: none }

/* ---- the stays ---------------------------------------------------- */

.rm .st-card {
    background: none;
    border: 0;
    border-bottom: 1px solid var(--hair);
    padding: 20px 0;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 24px;
}

.rm .st-said h2 { font-size: min(clamp(19px, 2vw, 24px), 28px + (clamp(19px, 2vw, 24px) - 28px) * 0.6); letter-spacing: -.02em }
.rm .st-leg { padding: 16px 0 16px 20px }
.rm .st-leg::before { left: 5px }

/* ---- the arrival -------------------------------------------------- */

.rm .ar-door { background: none; padding: 12px 18px; font-size: 15.5px }
.rm .ar-own input { background: none }

/* ---- the album ---------------------------------------------------- */

.rm .al-day { background: none }
.rm .al-days { border-color: var(--hair) }

@media (max-width: 700px) {
    .rm .sl-card { grid-template-columns: 68px minmax(0, 1fr); gap: 14px }
    .rm .st-card { grid-template-columns: minmax(0, 1fr) }
}


/* =====================================================================
   THE DECK

   One place at a time. A grid of twenty-four cards is a catalogue and
   nobody reads a catalogue for pleasure; one card gives each place a
   photograph the size it deserves.

   The card is mostly picture, because the picture is what decides this.
   Everything else - the name, why it is being shown, what the others
   already said - sits on a gradient at the foot of it, so nothing
   competes with the photograph for the first half-second.

   Namespaced sw-, not dk-. The first pass used dk- and the concierge
   panel already owns that prefix: its `.dk-card` is a grid, so every
   photograph here became a grid item sized by a column track and came
   out 132px wide inside a 492px card. Scoping to .rm was not enough,
   because the collision was inside .rm too.
   ===================================================================== */

.rm .sw-wrap { max-width: 460px; padding-top: clamp(20px, 3.4vh, 38px) }
.rm .sw-head { margin-bottom: clamp(14px, 2.4vh, 24px) }
.rm .sw-head p { max-width: 46ch }

.rm .sw-stack {
    position: relative;
    /* The shape of a card, because that is what it is. 3:4 was a
       photograph; this is nearer a playing card and the deck reads as a
       deck. */
    aspect-ratio: 5 / 7;
    max-height: min(58vh, 520px);
    margin: 0 auto;
    width: 100%;
    max-width: 380px;
    touch-action: pan-y;
}

.rm .sw-card {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: var(--deep);
    box-shadow: 0 24px 60px rgba(65, 64, 66, .26);
    cursor: grab;
    user-select: none;
}

.rm .sw-card:active { cursor: grabbing }

/* ---- the stack ------------------------------------------------

   Three cards are rendered, each keyed on its place and carrying a
   depth class. When the deck advances, the card that was second keeps
   its own DOM node and only changes class - so it is promoted by a
   transition on the element itself rather than by one element fading
   out while a different one fades in. That handover was the hitch.

   These rules did not exist. The markup was rewritten to the keyed
   stack and the sheet was left describing the version before it, so
   sw-d0, sw-d1, sw-d2 and sw-gone matched nothing at all: no depth,
   no promotion, and - because the thrown card had no transition to
   run - no flight either. It arrived at its destination in the same
   frame it was given one, transitionend never fired, and the deck
   locked up behind a guard waiting for a card that had never moved.
   ------------------------------------------------------------- */

.rm .sw-card {
    transition:
        transform .44s cubic-bezier(.32, .72, .32, 1),
        opacity .38s ease-out,
        box-shadow .44s ease-out;
}

/* The one being decided on. */
.rm .sw-d0 {
    z-index: 3;
    transform: none;
    opacity: 1;
    will-change: transform;
}

/* Behind it, so it is obvious more are coming. Each step back is the
   same move again, which is what makes the promotion read as one
   card moving up rather than three unrelated changes. */
.rm .sw-d1 {
    z-index: 2;
    transform: scale(.955) translateY(13px);
    opacity: .5;
    box-shadow: 0 14px 34px rgba(65, 64, 66, .14);
    pointer-events: none;
}

.rm .sw-d2 {
    z-index: 1;
    transform: scale(.91) translateY(26px);
    opacity: .22;
    box-shadow: 0 8px 22px rgba(65, 64, 66, .1);
    pointer-events: none;
}

/* On its way out: above everything, ignoring the pointer, and fading
   as it goes so it is gone before it would have to be clipped. */
.rm .sw-gone {
    z-index: 4;
    opacity: 0;
    pointer-events: none;
    transition:
        transform .46s cubic-bezier(.3, .68, .3, 1),
        opacity .4s ease-in .06s;
}

.rm .sw-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* Which way it is going, while it is going rather than after. */
.rm .sw-verdict {
    position: absolute;
    top: 26px;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    padding: 9px 15px;
    border: 2px solid currentColor;
    opacity: 0;
    transition: opacity .18s;
    pointer-events: none;
}

.rm .sw-verdict.up { opacity: 1 }
.rm .sw-verdict.yes { left: 22px; color: #AFA065; transform: rotate(-9deg) }
.rm .sw-verdict.no { right: 22px; color: #C08C3D; transform: rotate(9deg) }

/* Everything that is not the photograph. */
.rm .sw-face {
    position: absolute;
    inset: auto 0 0 0;
    padding: 90px 24px 24px;
    background: linear-gradient(to top,
        rgba(20, 18, 16, .93) 0%, rgba(20, 18, 16, .78) 42%, rgba(20, 18, 16, 0) 100%);
    color: #F4F1EC;
    pointer-events: none;
}

.rm .sw-from {
    position: absolute;
    top: -250px;
    left: 24px;
    background: rgba(244, 241, 236, .94);
    color: #414042;
    font-family: var(--sans);
    font-size: 8.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 6px 11px;
}

.rm .sw-kind {
    font-family: var(--sans);
    font-size: 8.5px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(244, 241, 236, .68);
}

.rm .sw-face h2 {
    margin-top: 6px;
    font-family: var(--serif);
    font-weight: 500;
    font-size: min(clamp(24px, 3.4vw, 32px), 28px + (clamp(24px, 3.4vw, 32px) - 28px) * 0.6);
    letter-spacing: -.022em;
    line-height: 1.1;
}

.rm .sw-face p {
    margin-top: 7px;
    font-family: var(--serif);
    font-size: 14.5px;
    line-height: 1.5;
    color: rgba(244, 241, 236, .8);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rm .sw-notes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px }

.rm .sw-why, .rm .sw-said {
    font-family: var(--sans);
    font-size: 8.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 5px 10px;
    border: 1px solid rgba(244, 241, 236, .28);
    color: rgba(244, 241, 236, .82);
}

/* What the others said is the thing that turns a private swipe into a
   conversation, so it is the one note that gets a colour. */
.rm .sw-said { border-color: var(--gold); color: #C08C3D }

/* ---- the three answers ------------------------------------------ */

/* ---- deciding -------------------------------------------------

   Three circles with icons and captions said these were three equal
   choices. They are not: almost everything is a yes or a no, and the
   third is an escape hatch for the two or three somebody genuinely
   cannot call.

   So the type carries it, the way the rail does. Yes is set large
   and warm on the right, where the thumb already is. No is plain and
   quiet on the left. Later is a caption between them, because that
   is what it is. Nothing is drawn.
   ------------------------------------------------------------- */

/* A back link, on its own line above the heading. It used to trail
   the paragraph, where it read as a sentence stopping halfway. */
.rm .sw-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    font-family: var(--sans);
    font-size: 9.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-55);
    text-decoration: none;
    transition: color .25s var(--ease, ease);
}

.rm .sw-back:hover { color: var(--ink) }
.rm .sw-back span { font-size: 12px; transition: transform .25s var(--ease, ease) }
.rm .sw-back:hover span { transform: translateX(-3px) }

.rm .sw-decide {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: clamp(16px, 4vw, 44px);
    max-width: 520px;
    margin: clamp(22px, 3.5vh, 34px) auto 0;
}

.rm .sw-no, .rm .sw-yes {
    background: none;
    border: 0;
    padding: 6px 0;
    cursor: pointer;
    font-family: var(--serif);
    letter-spacing: -.012em;
    line-height: 1;
    transition: color .3s var(--ease, ease), opacity .3s var(--ease, ease);
}

.rm .sw-no {
    justify-self: start;
    font-size: min(clamp(15px, 2vw, 17px), 28px + (clamp(15px, 2vw, 17px) - 28px) * 0.6);
    color: var(--ink-55);
}

.rm .sw-no:hover { color: var(--ink) }

/* The one almost everybody is reaching for, sized like it. */
.rm .sw-yes {
    justify-self: end;
    font-size: min(clamp(26px, 4.6vw, 36px), 28px + (clamp(26px, 4.6vw, 36px) - 28px) * 0.6);
    font-style: italic;
    color: var(--gold, #C08C3D);
}

.rm .sw-yes:hover { color: var(--deep, #2B301D) }

.rm .sw-no:focus-visible, .rm .sw-yes:focus-visible, .rm .sw-skip:focus-visible {
    outline: 1px solid var(--gold, #C08C3D);
    outline-offset: 5px;
}

.rm .sw-no:disabled, .rm .sw-yes:disabled { opacity: .35; cursor: default }
.rm .sw-no:disabled:hover { color: var(--ink-55) }
.rm .sw-yes:disabled:hover { color: var(--gold, #C08C3D) }

.rm .sw-mid { display: grid; justify-items: center; gap: 9px }

.rm .sw-skip {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-family: var(--sans);
    font-size: 9.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-55);
    transition: color .3s var(--ease, ease);
}

.rm .sw-skip:hover { color: var(--ink) }

/* One mark per card, filling as they go. A number says how much is
   left; this says how far in they are, which is the thing that keeps
   anybody going through thirty of them. */
.rm .sw-tally { display: flex; gap: 3px; align-items: center }

.rm .sw-tally i {
    width: 4px;
    height: 4px;
    background: var(--hair, rgba(65, 64, 66, .18));
    transition: background .4s var(--ease, ease);
}

.rm .sw-tally i.done { background: var(--gold, #C08C3D) }

/* Past a dozen the marks stop being countable and start being a bar,
   which is the right thing for them to become. */
.rm .sw-tally:has(i:nth-child(13)) i { width: 3px; height: 3px; gap: 2px }

.rm .sw-count {
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-55);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 520px) {
    .rm .sw-decide { gap: 12px }
    .rm .sw-yes { font-size: 26px }
    .rm .sw-tally i { width: 3px; height: 3px }
}

.rm .sw-left {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 16px;
    margin-top: 15px;
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--bone-faint);
}

.rm .sw-left a { color: var(--bone-dim) }
.rm .sw-left a:hover { color: var(--ink) }

/* ---- the end of the deck ---------------------------------------- */

.rm .sw-end { border-top: 1px solid var(--hair); padding-top: clamp(26px, 5vh, 46px) }

.rm .sw-end h2 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: min(clamp(22px, 2.6vw, 30px), 28px + (clamp(22px, 2.6vw, 30px) - 28px) * 0.6);
    letter-spacing: -.022em;
}

.rm .sw-end p {
    margin: 12px 0 24px;
    font-family: var(--serif);
    font-size: 16px;
    line-height: 1.65;
    color: var(--bone-dim);
    max-width: 44ch;
}

.rm .sw-end-go { display: flex; gap: 10px; flex-wrap: wrap }

@media (max-width: 600px) {
    .rm .sw-stack { max-height: 48vh }
    .rm .sw-face { padding: 70px 18px 18px }
    .rm .sw-acts span { width: 52px; height: 52px }
    .rm .sw-yes span { width: 60px; height: 60px }
}

@media (prefers-reduced-motion: reduce) {
    .rm .sw-card { transition: none !important }
}


/* ------------------------------------------------------- the two views

   The deck and the grid are the same places seen two ways, so the way
   between them is a control in a fixed place on both screens rather
   than a link buried under the cards - switching is one press, and
   switching back is the same press again. */

.rm .vw {
    display: inline-flex;
    margin-top: clamp(16px, 2.6vh, 24px);
    border: 1px solid var(--hair);
}

.rm .vw-one {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 15px;
    text-decoration: none;
    color: var(--bone-faint);
    font-family: var(--sans);
    font-size: 9.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    transition: color .25s, background .25s;
}

.rm .vw-one + .vw-one { border-left: 1px solid var(--hair) }
.rm .vw-one svg { width: 14px; height: 14px; display: block }
.rm .vw-one:hover { color: var(--ink) }

.rm .vw-one.on {
    background: var(--deep);
    color: #F4F1EC;
}

@media (max-width: 520px) {
    .rm .vw-one { padding: 9px 12px; font-size: 9px; letter-spacing: .1em }
}


/* --------------------------------------------------- the way in

   Dropping somebody straight onto a card assumes they arrived knowing
   what they wanted. Most people arrive with "we should find something
   to do" and nothing sharper, so the first screen offers the shapes an
   answer could take - each one counted before it is offered, because an
   option that turns out to be empty is worse than no option. */

.rm .sw-open { max-width: 760px }

/* ---- the way in -----------------------------------------------

   Four photographs and a white box, wrapping three-then-one. The
   white box was "Everything", which is the option almost everybody
   takes - so it read as the one broken tile in a row of good ones.

   It is the way in, so it goes across the top and is set like a
   heading. The sorts run underneath as what they actually are: a
   way of narrowing down if the whole lot feels like too much.
   ------------------------------------------------------------- */

.rm .sw-all {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: clamp(20px, 3vw, 30px) clamp(20px, 3vw, 32px);
    background: var(--deep, #2B301D);
    color: var(--bone, #F4F1EC);
    text-decoration: none;
    transition: background .35s var(--ease, ease);
}

.rm .sw-all:hover { background: var(--ink, #414042) }

.rm .sw-all-said b {
    display: block;
    /* Set here rather than inherited. Something further up the room's
       sheet colours b and the band went dark type on a dark ground. */
    color: #F7F4EE;
    font-family: var(--serif);
    font-weight: 500;
    font-size: min(clamp(21px, 3vw, 27px), 28px + (clamp(21px, 3vw, 27px) - 28px) * 0.6);
    letter-spacing: -.016em;
    line-height: 1.12;
}

.rm .sw-all-said i {
    display: block;
    margin-top: 7px;
    font-style: normal;
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: rgba(247, 244, 238, .62);
}

.rm .sw-all-go {
    flex: none;
    font-size: 22px;
    line-height: 1;
    color: var(--gold, #C08C3D);
    transition: transform .35s var(--ease, ease);
}

.rm .sw-all:hover .sw-all-go { transform: translateX(5px) }

.rm .sw-or {
    margin: clamp(26px, 4vh, 38px) 0 14px;
    font-family: var(--sans);
    font-size: 9.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-55);
}

/* Equal tiles, all the same shape, all carrying a photograph. The
   previous row mixed a bare box in with four images and wrapped
   three-then-one, which is why it looked unfinished. */
.rm .sw-sorts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    gap: 2px;
}

.rm .sw-sort {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--ground);
    text-decoration: none;
}

.rm .sw-sort img, .rm .sw-sort-bare {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: var(--ground);
    transition: transform .5s var(--ease, ease);
}

.rm .sw-sort:hover img { transform: scale(1.045) }

/* A gradient rather than a plate, so the photograph is not cut in
   half by a band - and deep enough that the type holds on a bright
   sky, which the old one did not. */
.rm .sw-sort-said {
    position: absolute;
    inset: auto 0 0 0;
    padding: 40px 15px 14px;
    background: linear-gradient(to top,
        rgba(20, 18, 16, .82) 0%,
        rgba(20, 18, 16, .55) 45%,
        rgba(20, 18, 16, 0) 100%);
}

.rm .sw-sort b {
    display: block;
    font-family: var(--serif);
    font-weight: 500;
    font-size: 16.5px;
    line-height: 1.2;
    color: #F7F4EE;
}

.rm .sw-sort i {
    display: block;
    margin-top: 4px;
    font-style: normal;
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(247, 244, 238, .7);
}

@media (max-width: 560px) {
    .rm .sw-all { padding: 20px }
    .rm .sw-sorts { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
}


/* =====================================================================
   THE SHORTLIST

   The one screen where the whole group is looking at the same thing at
   the same time, so it is built round the people rather than the
   places. Every card says who wants it, who does not, and who has not
   looked - a group stalls on the person who has not answered.

   Nothing reloads. The count moves under the thumb and a place that
   falls below the line slides out to the set-aside pile rather than
   vanishing between renders.
   ===================================================================== */

.rm .sl-list { display: grid; gap: 0 }

.rm .sl-card {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    gap: clamp(16px, 2.2vw, 24px);
    align-items: center;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--hair);
    padding: 16px 0;
    transition: transform .35s var(--ease, ease),
                opacity .35s ease-out,
                max-height .45s var(--ease, ease);
    max-height: 220px;
    overflow: hidden;
}

.rm .sl-card:hover { transform: translateX(5px) }

/* Voted below the line: it leaves rather than jumping to the bottom of
   the list mid-glance. */
.rm .sl-card.leaving {
    opacity: 0;
    transform: translateX(-40px);
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom-color: transparent;
}

.rm .sl-art {
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--ink-3);
}

.rm .sl-art img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 1s var(--ease, ease);
}

.rm .sl-card:hover .sl-art img { transform: scale(1.05) }

.rm .sl-said { min-width: 0 }

.rm .sl-kind {
    font-family: var(--sans);
    font-size: 8.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--bone-faint);
}

.rm .sl-said h3 {
    margin-top: 4px;
    font-family: var(--serif);
    font-weight: 500;
    font-size: min(clamp(18px, 1.9vw, 22px), 28px + (clamp(18px, 1.9vw, 22px) - 28px) * 0.6);
    letter-spacing: -.018em;
    line-height: 1.2;
}

.rm .sl-said h3 a { text-decoration: none; color: var(--ink) }

.rm .sl-said p {
    margin-top: 3px;
    font-family: var(--serif);
    font-size: 14px;
    line-height: 1.5;
    color: var(--bone-dim);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- who ---------------------------------------------------------- */

.rm .sl-who { display: flex; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap }

.rm .sl-face {
    width: 22px; height: 22px;
    border-radius: 50%;
    display: grid; place-items: center;
    font-family: var(--sans);
    font-size: 9px;
    border: 1px solid var(--hair);
}

/* Wanting and not wanting look different, because on this screen that is
   the only thing anybody is actually reading. */
.rm .sl-face.in { background: var(--gold); border-color: var(--gold); color: #FFFDF8 }
.rm .sl-face.out { background: none; color: var(--bone-faint); border-style: dashed }

.rm .sl-tag {
    font-family: var(--sans);
    font-size: 8.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--bone-faint);
    margin-left: 4px;
}

.rm .sl-tag.on { color: var(--gold); border: 1px solid var(--gold); padding: 3px 8px; margin-left: 6px }

/* ---- up and down -------------------------------------------------- */

.rm .sl-vote { display: flex; align-items: center; gap: 4px; flex-shrink: 0 }

.rm .sl-up, .rm .sl-down {
    display: grid;
    justify-items: center;
    gap: 2px;
    width: 52px;
    padding: 9px 4px;
    background: none;
    border: 1px solid transparent;
    cursor: pointer;
    color: var(--bone-faint);
    transition: all .22s var(--ease, ease);
}

.rm .sl-up svg, .rm .sl-down svg { width: 20px; height: 20px; display: block }

.rm .sl-up b, .rm .sl-down b {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    min-height: 1em;
}

.rm .sl-up:hover, .rm .sl-down:hover { color: var(--ink); border-color: var(--hair) }

.rm .sl-up.on { color: var(--gold); border-color: var(--gold) }
.rm .sl-down.on { color: var(--ink); border-color: var(--ink) }

.rm .sl-up:disabled, .rm .sl-down:disabled { opacity: .35; cursor: default }
.rm .sl-up:disabled:hover, .rm .sl-down:disabled:hover { border-color: transparent; color: var(--bone-faint) }

/* Already on a day: settled, and marked as such down the edge. */
.rm .sl-card.placed { box-shadow: inset 3px 0 0 var(--gold) }
.rm .sl-card.placed .sl-art { margin-left: 10px }

/* ---- set aside ---------------------------------------------------- */

.rm .sl-parked { margin-top: clamp(34px, 5vh, 54px) }

.rm .sl-parked > h2 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 21px;
    letter-spacing: -.018em;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--hair);
}

.rm .sl-parked > h2 i {
    display: block;
    margin-top: 3px;
    font-style: normal;
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bone-faint);
}

.rm .sl-parked .sl-card { opacity: .5 }
.rm .sl-parked .sl-card:hover { opacity: 1 }

@media (max-width: 640px) {
    .rm .sl-card { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 14px 0 }
    .rm .sl-vote { grid-column: 1 / -1; justify-content: flex-start }
    .rm .sl-said p { display: none }
}

@media (prefers-reduced-motion: reduce) {
    .rm .sl-card { transition: none }
}


/* =====================================================================
   THE DRAWER

   More about one place without leaving what you were doing. Somebody
   halfway through a deck has two bad options otherwise: decide on a
   photograph and a sentence, or open the listing page and lose their
   place entirely.

   Drawn in the concierge's language - a dark panel arriving from the
   right over a dimmed page - because it is the same gesture, and
   somebody who has used one has learnt the other.
   ===================================================================== */

.dr-veil {
    position: fixed;
    inset: 0;
    z-index: 120;
    background: rgba(20, 18, 16, .58);
    backdrop-filter: blur(3px);
    animation: dr-fade .3s ease-out both;
}

.dr {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    z-index: 121;
    width: min(560px, 100%);
    background: #2B301D;
    color: #E4DCCA;
    overflow-y: auto;
    box-shadow: -50px 0 110px rgba(0, 0, 0, .55);
    animation: dr-slide .42s cubic-bezier(.28, .72, .3, 1) both;
    scrollbar-width: thin;
}

@keyframes dr-fade { from { opacity: 0 } }
@keyframes dr-slide { from { transform: translateX(100%) } }

.dr-shut {
    position: absolute;
    top: 16px; right: 18px;
    z-index: 3;
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(228, 220, 202, .28);
    background: rgba(20, 18, 16, .6);
    color: #E4DCCA;
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
    transition: all .25s var(--ease, ease);
}

.dr-shut:hover { border-color: #E4DCCA; transform: rotate(90deg) }

.dr-in { padding: 0 0 clamp(34px, 6vh, 60px) }

/* The photographs, as a strip you push through rather than a grid - a
   drawer is narrow and a grid of five in it is five stamps. */
.dr-shots {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.dr-shots::-webkit-scrollbar { display: none }

.dr-shots img {
    flex: 0 0 auto;
    width: 88%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    scroll-snap-align: start;
}

.dr-shots img:only-child { width: 100% }

.dr-k {
    margin: clamp(22px, 4vh, 32px) clamp(22px, 4vw, 34px) 0;
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(228, 220, 202, .5);
}

.dr h2 {
    margin: 8px clamp(22px, 4vw, 34px) 0;
    font-family: var(--serif);
    font-weight: 500;
    font-size: min(clamp(26px, 3.4vw, 34px), 28px + (clamp(26px, 3.4vw, 34px) - 28px) * 0.6);
    letter-spacing: -.024em;
    line-height: 1.08;
    color: #F4EEE0;
}

.dr-lead {
    margin: 12px clamp(22px, 4vw, 34px) 0;
    font-family: var(--serif);
    font-style: italic;
    font-size: 16.5px;
    line-height: 1.55;
    color: rgba(228, 220, 202, .78);
}

.dr-p {
    margin: 14px clamp(22px, 4vw, 34px) 0;
    font-family: var(--serif);
    font-size: 15.5px;
    line-height: 1.7;
    color: rgba(228, 220, 202, .84);
}

/* The facts somebody standing in a car park wants. */
.dr-facts {
    margin: clamp(22px, 4vh, 30px) clamp(22px, 4vw, 34px) 0;
    padding-top: 18px;
    border-top: 1px solid rgba(228, 220, 202, .14);
}

.dr-facts > div {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(228, 220, 202, .08);
}

.dr-facts dt {
    font-family: var(--sans);
    font-size: 8.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(228, 220, 202, .45);
    padding-top: 3px;
}

.dr-facts dd {
    margin: 0;
    font-family: var(--serif);
    font-size: 15px;
    color: #E4DCCA;
}

/* What people ask about this one - already written, and never previously
   shown anywhere near a decision. */
.dr-asks { margin: clamp(22px, 4vh, 30px) clamp(22px, 4vw, 34px) 0 }

.dr-asks details { border-bottom: 1px solid rgba(228, 220, 202, .12) }

.dr-asks summary {
    padding: 13px 0;
    cursor: pointer;
    font-family: var(--serif);
    font-size: 15.5px;
    color: #E4DCCA;
    list-style: none;
}

.dr-asks summary::-webkit-details-marker { display: none }
.dr-asks summary::after { content: "+"; float: right; color: rgba(228, 220, 202, .5) }
.dr-asks details[open] summary::after { content: "\2013" }

.dr-asks p {
    padding: 0 0 14px;
    font-family: var(--serif);
    font-size: 14.5px;
    line-height: 1.65;
    color: rgba(228, 220, 202, .74);
}

.dr-go {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: clamp(26px, 5vh, 38px) clamp(22px, 4vw, 34px) 0;
}

.dr-btn {
    display: inline-block;
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    padding: 14px 22px;
    text-decoration: none;
    background: #E4DCCA;
    color: #2B301D;
    transition: opacity .25s;
}

.dr-btn:hover { opacity: .87 }
.dr-btn.quiet { background: none; color: #E4DCCA; border: 1px solid rgba(228, 220, 202, .3) }
.dr-btn.quiet:hover { border-color: #E4DCCA; opacity: 1 }

.dr-wait { display: flex; gap: 6px; padding: 60px clamp(22px, 4vw, 34px) }

.dr-wait i {
    width: 8px; height: 8px;
    background: #C08C3D;
    animation: dr-blink 1.15s infinite;
}

.dr-wait i:nth-child(2) { animation-delay: .15s }
.dr-wait i:nth-child(3) { animation-delay: .3s }

@keyframes dr-blink { 0%, 100% { opacity: .25 } 50% { opacity: 1 } }

/* ---- the way in, on a card -------------------------------------- */

.rm .sw-more {
    display: inline-block;
    margin-top: 12px;
    padding: 7px 13px;
    background: rgba(244, 241, 236, .12);
    border: 1px solid rgba(244, 241, 236, .28);
    color: #F4F1EC;
    font-family: var(--sans);
    font-size: 8.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .25s var(--ease, ease);
}

.rm .sw-more:hover { background: #F4F1EC; border-color: #F4F1EC; color: #414042 }

/* The face takes presses now, so the picture is the only draggable part
   and a tap on the text does not throw the card. */
.rm .sw-face { pointer-events: auto }

/* On the shortlist the name and the picture open it too. */
.rm .sl-said h3 button {
    background: none;
    border: 0;
    padding: 0;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.rm .sl-said h3 button:hover { color: var(--gold) }
.rm .sl-art { border: 0; padding: 0; cursor: pointer }

@media (prefers-reduced-motion: reduce) {
    .dr, .dr-veil { animation: none }
    .dr-wait i { animation: none; opacity: .7 }
}


/* --------------------------------------------------- naming yourself

   Somebody who followed the link and has not said who they are. One
   field, no account, no password - the least that can be asked of the
   fourth person in a group of five who only wants to say whether they
   fancy the reindeer centre.

   Across the top rather than over the page: they can read the trip
   perfectly well without answering, and a modal would say otherwise. */

.rm-hello { background: var(--deep); color: #F4F1EC }

.rm-hello-in {
    max-width: 1240px;
    margin: 0 auto;
    padding: 14px clamp(18px, 3vw, 40px);
    display: flex;
    align-items: center;
    gap: clamp(16px, 3vw, 34px);
    flex-wrap: wrap;
}

.rm-hello p {
    font-family: var(--serif);
    font-size: 15px;
    line-height: 1.5;
    color: rgba(244, 241, 236, .8);
    margin: 0;
    flex: 1;
    min-width: 260px;
}

.rm-hello b { color: #F4F1EC; font-weight: 500 }

.rm-hello form { display: flex; gap: 8px; flex-shrink: 0 }

.rm-hello input {
    font-family: var(--serif);
    font-size: 15px;
    padding: 10px 13px;
    border: 1px solid rgba(244, 241, 236, .3);
    background: none;
    color: #F4F1EC;
    min-width: 170px;
}

.rm-hello input::placeholder { color: rgba(244, 241, 236, .4) }
.rm-hello input:focus { outline: none; border-color: #F4F1EC }

.rm-hello button {
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    padding: 10px 20px;
    background: #F4F1EC;
    color: var(--deep);
    border: 0;
    cursor: pointer;
    transition: opacity .25s;
}

.rm-hello button:hover { opacity: .87 }

/* ------------------------------------------------------- the dates */

.rm .st-when-set {
    display: flex;
    gap: clamp(16px, 3vw, 30px);
    align-items: flex-end;
    flex-wrap: wrap;
    padding-bottom: clamp(20px, 3.4vh, 30px);
    margin-bottom: clamp(6px, 1vh, 12px);
    border-bottom: 1px solid var(--hair);
}

.rm .st-when-set label { display: grid; gap: 6px }

.rm .st-when-set span {
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--bone-faint);
}

.rm .st-when-set input {
    font-family: var(--serif);
    font-size: 16px;
    padding: 10px 13px;
    border: 1px solid var(--hair);
    background: none;
    color: var(--ink);
    min-width: 170px;
}

.rm .st-when-set input:focus { outline: none; border-color: var(--ink) }

/* A refusal, in the same slot as the hint it replaces. Warm rather than
   red: nothing has gone wrong, the trip is just longer than the itinerary
   will lay out. */
.rm .st-when-no {
    flex-basis: 100%;
    font-family: var(--serif);
    font-size: 14px;
    line-height: 1.5;
    color: var(--gold, #C08C3D);
    margin: 4px 0 0;
}

.rm .st-when-why {
    flex-basis: 100%;
    font-family: var(--serif);
    font-style: italic;
    font-size: 14px;
    color: var(--bone-faint);
    margin: 4px 0 0;
}


/* =====================================================================
   WHO IS COMING

   Was a share link and a list of names. Faces, because a page of grey
   initials is a spreadsheet; parties, because a group rarely leaves
   from one place at one time; and the two things the group needs before
   it books anything - a coeliac, somebody who cannot manage stairs -
   which otherwise live in a chat thread nobody re-reads at the till.
   ===================================================================== */

/* The link is the page's whole job, so it is the biggest thing on it. */
.rm .gr-link {
    display: flex;
    align-items: center;
    gap: clamp(16px, 3vw, 30px);
    flex-wrap: wrap;
    background: var(--deep);
    color: #F4F1EC;
    padding: clamp(18px, 3vh, 26px) clamp(20px, 3vw, 28px);
    margin-bottom: clamp(18px, 3vh, 26px);
}

.rm .gr-link > div { flex: 1; min-width: 220px }

.rm .gr-link span {
    display: block;
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(244, 241, 236, .58);
}

.rm .gr-link code {
    display: block;
    margin-top: 5px;
    font-size: 14.5px;
    color: #F4F1EC;
    word-break: break-all;
}

.rm .gr-link button {
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    padding: 13px 24px;
    background: #F4F1EC;
    color: var(--deep);
    border: 0;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity .25s;
}

.rm .gr-link button:hover { opacity: .87 }

/* One line to the group - said once in a chat and unfindable an hour
   later, so it sits where everybody will see it. */
.rm .gr-notice { margin-bottom: clamp(24px, 4vh, 36px) }

.rm .gr-notice input, .rm .gr-notice p {
    width: 100%;
    font-family: var(--serif);
    font-style: italic;
    font-size: 16px;
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid var(--hair);
    background: none;
    color: var(--ink);
}

.rm .gr-notice input:focus { outline: none; border-color: var(--ink) }
.rm .gr-notice input::placeholder { color: var(--bone-faint); font-style: italic }

/* ---- the people ---------------------------------------------------- */

.rm .gr-folk {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: clamp(12px, 2vw, 20px);
    margin-bottom: clamp(34px, 5vh, 54px);
}

.rm .gr-one {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 20px 12px 18px;
    background: none;
    border: 1px solid var(--hair);
    cursor: pointer;
    text-align: center;
    transition: all .25s var(--ease, ease);
}

.rm .gr-one:hover { border-color: var(--ink); transform: translateY(-2px) }
.rm .gr-one.waiting { opacity: .58 }
.rm .gr-one.waiting:hover { opacity: 1 }

.rm .gr-one b {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 16.5px;
    letter-spacing: -.012em;
    margin-top: 8px;
}

.rm .gr-one > i {
    font-style: normal;
    font-family: var(--sans);
    font-size: 8.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bone-faint);
}

/* They have told us something the group needs to know. */
.rm .gr-flag {
    position: absolute;
    top: 12px; right: 12px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--gold);
}

.rm .gr-face {
    width: 62px; height: 62px;
    border-radius: 50%;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: var(--ink-3);
    border: 1px solid var(--hair);
}

.rm .gr-face img { width: 100%; height: 100%; object-fit: cover }

.rm .gr-face i {
    font-style: normal;
    font-family: var(--serif);
    font-size: 22px;
    color: var(--bone-faint);
}

.rm .gr-face.small { width: 30px; height: 30px; margin-left: -6px }
.rm .gr-face.small:first-child { margin-left: 0 }
.rm .gr-face.small i { font-size: 12px }
.rm .gr-face.big { width: 84px; height: 84px; position: relative; cursor: pointer; border: 0; padding: 0 }
.rm .gr-face.huge { width: 96px; height: 96px; margin-bottom: 20px }

.rm .gr-face.big span {
    position: absolute;
    inset: auto 0 0 0;
    padding: 5px 0;
    background: rgba(65, 64, 66, .72);
    color: #F4F1EC;
    font-family: var(--sans);
    font-size: 8px;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity .25s;
}

.rm .gr-face.big:hover span { opacity: 1 }

.rm .gr-ask { cursor: default }
.rm .gr-ask:hover { transform: none; border-color: var(--hair) }

.rm .gr-ask input {
    margin-top: 6px;
    width: 100%;
    font-family: var(--serif);
    font-size: 13.5px;
    padding: 7px 9px;
    border: 1px solid var(--hair);
    background: none;
    text-align: center;
}

/* ---- your own details ---------------------------------------------- */

.rm .gr-you, .rm .gr-parties, .rm .gr-talk { margin-bottom: clamp(34px, 5vh, 54px) }

.rm .gr-you h2, .rm .gr-parties h2, .rm .gr-talk h2 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 21px;
    letter-spacing: -.018em;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--hair);
    margin-bottom: 18px;
}

.rm .gr-parties h2 i, .rm .gr-talk h2 i {
    display: block;
    margin-top: 3px;
    font-style: normal;
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bone-faint);
}

.rm .gr-you-in { display: flex; gap: clamp(20px, 3vw, 32px); align-items: flex-start; flex-wrap: wrap }
.rm .gr-you-said { flex: 1; min-width: 240px; display: grid; gap: 14px }
.rm .gr-you-said label { display: grid; gap: 5px }

.rm .gr-you-said span {
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--bone-faint);
}

.rm .gr-you-said input {
    font-family: var(--serif);
    font-size: 15.5px;
    padding: 10px 12px;
    border: 1px solid var(--hair);
    background: none;
    color: var(--ink);
}

.rm .gr-you-said input:focus { outline: none; border-color: var(--ink) }

/* ---- travelling together ------------------------------------------- */

.rm .gr-party {
    display: grid;
    gap: 6px;
    padding: 16px 0;
    border-bottom: 1px solid var(--hair);
}

.rm .gr-party b { font-family: var(--serif); font-weight: 500; font-size: 18px }

.rm .gr-party > span {
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bone-faint);
}

.rm .gr-party-folk { display: flex; margin-top: 4px }

.rm .gr-drop {
    justify-self: start;
    margin-top: 4px;
    background: none;
    border: 0;
    padding: 0;
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bone-faint);
    cursor: pointer;
}

.rm .gr-drop:hover { color: var(--ink) }

.rm .gr-loose {
    margin-top: 14px;
    font-family: var(--serif);
    font-size: 15px;
    color: var(--bone-dim);
}

.rm .gr-loose button {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--gold);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* =====================================================================
   TALKING

   The pulse showed what people did and never what they said, so the
   conversation happened in WhatsApp - where the decisions were made,
   next to none of the places they were about.
   ===================================================================== */

.tk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px }
.tk-list li { display: flex; gap: 11px; align-items: flex-start }

.tk-face {
    width: 30px; height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: rgba(65, 64, 66, .07);
    border: 1px solid var(--hairline, rgba(65,64,66,.13));
}

.tk-face img { width: 100%; height: 100%; object-fit: cover }
.tk-face i { font-style: normal; font-family: var(--serif); font-size: 12px; opacity: .6 }

.tk-said { min-width: 0 }

.tk-said b {
    display: block;
    font-family: var(--serif);
    font-weight: 500;
    font-size: 14.5px;
}

.tk-said b i {
    font-style: normal;
    font-family: var(--sans);
    font-size: 8.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .5;
    margin-left: 9px;
}

.tk-said p {
    margin-top: 2px;
    font-family: var(--serif);
    font-size: 15px;
    line-height: 1.55;
    opacity: .84;
}

.tk-none {
    font-family: var(--serif);
    font-style: italic;
    font-size: 14.5px;
    opacity: .55;
}

.tk-say { display: flex; gap: 8px; margin-top: 18px }

.tk-say input {
    flex: 1;
    font-family: var(--serif);
    font-size: 15.5px;
    padding: 11px 13px;
    border: 1px solid var(--hairline, rgba(65,64,66,.13));
    background: none;
    color: inherit;
}

.tk-say input:focus { outline: none; border-color: currentColor }

.tk-say button {
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    padding: 11px 20px;
    background: var(--deep, #2B301D);
    color: #F4F1EC;
    border: 0;
    cursor: pointer;
}

.tk-say button:disabled { opacity: .4; cursor: default }

/* Inside the dark drawer the thread has to invert. */
.dr .tk-face { background: rgba(228, 220, 202, .12); border-color: rgba(228, 220, 202, .2) }
.dr .tk-said b { color: #F4EEE0 }
.dr .tk-said p { color: rgba(228, 220, 202, .82) }
.dr .tk-none { color: rgba(228, 220, 202, .55) }
.dr .tk-say input { border-color: rgba(228, 220, 202, .24); color: #E4DCCA }
.dr .tk-say button { background: #E4DCCA; color: #2B301D }

.dr-talk {
    margin: clamp(24px, 4vh, 34px) clamp(22px, 4vw, 34px) 0;
    padding-top: 20px;
    border-top: 1px solid rgba(228, 220, 202, .14);
}

.dr-talk-k {
    font-family: var(--sans);
    font-size: 8.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(228, 220, 202, .45);
    margin-bottom: 14px;
}

.dr-folk .dr-in { padding: clamp(52px, 8vh, 76px) clamp(22px, 4vw, 34px) }
.dr-folk .gr-face.huge { border-color: rgba(228, 220, 202, .2); background: rgba(228, 220, 202, .08) }
.dr-folk .gr-face.huge i { color: rgba(228, 220, 202, .6) }
.dr-folk .dr-k, .dr-folk h2 { margin-left: 0; margin-right: 0 }
.dr-folk .dr-facts { margin-left: 0; margin-right: 0 }

@media (max-width: 560px) {
    .rm .gr-folk { grid-template-columns: repeat(2, minmax(0, 1fr)) }
    .rm .gr-face { width: 52px; height: 52px }
}

/* === the itinerary ===========================================
   It was a vertical chain of dots, five days deep, every day the
   same, in the middle of a page two thirds empty.

   A day is a spread now. Its own plate on the left carries the date
   set large, a photograph from whatever is on it, and the two facts
   that decide the shape of a day. The timeline runs beside it. Days
   stop being sections of one long list and become pages.
   ============================================================ */

.rm .dy-wrap { max-width: 960px }

.dy-state {
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--ink-55);
    margin: 0 0 22px;
}

.dy-state b { color: var(--ink); font-weight: 500 }

/* ---- the rail of days ------------------------------------------

   A five day trip is five thousand pixels and the only way to reach
   Thursday was to scroll past everything before it.

   It was a thin strip pinned under the page header, where it fought
   the bar for the same forty pixels and read as decoration. It sits
   above the days now - the thing you meet on the way in - as tiles
   big enough to be obviously pressable, and it sticks once reached.
   ------------------------------------------------------------- */

.dr-rail {
    position: sticky;
    /* Flush under the room's bar, which is sixty-eight tall. */
    top: 68px;
    z-index: 30;
    margin: 0 0 clamp(24px, 4vh, 38px);
    /* The bleed is what stops the page showing at the edges as it
       scrolls behind. The rail is inside a padded wrap, so it has to
       reach back out to meet them. */
    padding: 16px clamp(18px, 3vw, 40px) 14px;
    margin-inline: calc(clamp(18px, 3vw, 40px) * -1);
    /* The ground behind it, not the colour of paper - anything lighter
       draws a rectangle across the page. */
    background: var(--ground);
    border-bottom: 1px solid var(--hairline-soft);
}

.dr-rail-k {
    margin: 0 0 12px;
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-55);
}

.dr-rail-in {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 2px;
}

.dr-rail-in::-webkit-scrollbar { display: none }

.dr-day {
    flex: none;
    min-width: 86px;
    display: grid;
    justify-items: center;
    gap: 4px;
    padding: 12px 14px 13px;
    background: var(--paper);
    border: 1px solid var(--hairline-soft);
    cursor: pointer;
    transition: border-color .25s var(--ease), background .25s var(--ease);
}

.dr-day:hover { border-color: var(--ink-55) }

/* Where you are: filled, not underlined. A two pixel rule under a
   small date is not a state anybody notices. */
.dr-day.on {
    background: var(--deep, #2B301D);
    border-color: var(--deep, #2B301D);
}

.dr-day-k {
    font-family: var(--sans);
    font-size: 9.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-55);
}

.dr-day-n {
    font-family: var(--serif);
    font-size: 27px;
    line-height: 1;
    color: var(--ink);
    font-variant-numeric: lining-nums tabular-nums;
}

.dr-day-said {
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-55);
}

.dr-day.on .dr-day-k { color: rgba(244, 241, 236, .62) }
.dr-day.on .dr-day-n { color: #F7F4EE }
.dr-day.on .dr-day-said { color: var(--gold, #C08C3D) }

/* A day with nothing on it says so, quietly, rather than looking the
   same as one that is full. */
.dr-day.bare .dr-day-n { color: var(--ink-55) }
.dr-day.bare .dr-day-said { color: rgba(65, 64, 66, .38) }

.dr-day.add { border-style: dashed }
.dr-day.add .dr-day-n { color: var(--moss); font-size: 24px }
.dr-day.add:hover { border-color: var(--forest); border-style: solid }

/* ---- a day as a spread ----------------------------------------- */

.dy-list { display: grid; gap: 0 }

.dy {
    display: grid;
    grid-template-columns: 176px minmax(0, 1fr);
    gap: clamp(20px, 3.5vw, 46px);
    padding: clamp(30px, 5vh, 52px) 0;
    border-top: 1px solid var(--hairline-soft);
    align-items: start;
}

.dy:first-child { border-top: 0 }

/* The plate sticks while its own day scrolls, so the date and the
   driving stay beside whatever is being read. */
/* Clear of both the bar and the rail. It was 72, which is inside the
   rail - so a day's date scrolled up into the strip of dates. */
.dy-plate {
    position: sticky;
    top: 132px;
    z-index: 1;
}

.dy-date { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px }

.dy-date b {
    font-family: var(--serif);
    font-weight: 400;
    font-size: min(clamp(46px, 6vw, 64px), 28px + (clamp(46px, 6vw, 64px) - 28px) * 0.6);
    line-height: .82;
    letter-spacing: -.04em;
    color: var(--ink);
    font-variant-numeric: lining-nums;
}

.dy-date span {
    font-family: var(--sans);
    font-size: 9.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-55);
    line-height: 1.5;
}

.dy-date i { display: block; font-style: normal; color: var(--ink) }

/* Small, square, in the margin - a stamp on the page corner rather
   than a picture competing with the list. */
.dy-plate-shot {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--ground);
    margin-bottom: 14px;
}

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

.dy-where {
    margin: 0 0 8px;
    font-family: var(--serif);
    font-size: 16px;
    line-height: 1.35;
    color: var(--ink);
}

.dy-where em {
    display: block;
    font-style: normal;
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--moss);
    margin-bottom: 3px;
}

.dy-drive {
    margin: 0;
    font-family: var(--sans);
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-55);
}

/* Four hours behind the wheel is a different kind of day, and this is
   the only place anybody would find that out. */
.dy-drive.far { color: #682114 }

.dy-cut {
    margin-top: 18px;
    padding: 0;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--hairline);
    font-family: var(--sans);
    font-size: 8.5px;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--ink-55);
    cursor: pointer;
    transition: color .3s var(--ease), border-color .3s var(--ease);
}
.dy-cut:hover { color: #682114; border-color: #682114 }

/* ---- the timeline ---------------------------------------------- */

.dy-chain { list-style: none; margin: 0; padding: 0; position: relative }

.dy-chain > li { position: relative; padding-left: 26px; padding-bottom: 4px }

/* One continuous line behind the marks rather than a segment per row,
   so it does not break at every gap. */
.dy-chain::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 8px;
    bottom: 14px;
    width: 1px;
    background: var(--hairline-soft);
}

.dy-dot {
    position: absolute;
    left: 0;
    top: 7px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--gold, #C08C3D);
    box-shadow: 0 0 0 4px var(--paper);
}

.dy-dot.base { background: none; border: 1px solid var(--moss); box-shadow: 0 0 0 4px var(--paper) }
.dy-dot.open { background: none; border: 1px dashed var(--hairline); box-shadow: 0 0 0 4px var(--paper) }

/* A journey rather than a destination. */
.dy-dot.going { border-radius: 1px; transform: rotate(45deg); width: 8px; height: 8px }

/* Booked, and therefore not moving. */
.dy-dot.held { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--moss), 0 0 0 7px var(--paper) }

/* Morning, afternoon, evening - because that is how anybody thinks
   about a day, and because an empty afternoon should be visible from
   across the room. */
.dy-part {
    padding-left: 26px;
    padding-top: 18px;
    padding-bottom: 8px;
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.dy-chain > li.dy-part:first-child { padding-top: 4px }

.dy-part-k {
    font-family: var(--sans);
    font-size: 10.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ink-55);
    position: relative;
}

.dy-part-k::after {
    content: "";
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    width: 40px;
    height: 1px;
    background: var(--hairline-soft);
}

.dy-part-add {
    background: none;
    border: 0;
    padding: 0;
    margin-left: 56px;
    font-family: var(--serif);
    font-style: italic;
    font-size: 13px;
    color: var(--ink-55);
    cursor: pointer;
    border-bottom: 1px solid transparent;
}

.dy-part-add:hover { color: var(--forest); border-color: var(--forest) }

/* ---- one thing on the day -------------------------------------- */

.dy-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 132px;
    gap: 22px;
    align-items: start;
    padding-top: 10px;
    padding-bottom: 14px;
    transition: opacity .25s var(--ease);
}

.dy-item[draggable="true"] { cursor: grab }
.dy-item.lifting { opacity: .35 }

/* Where it would land. */
.dy-item.before::before {
    content: "";
    position: absolute;
    left: 26px;
    right: 0;
    top: 2px;
    height: 2px;
    background: var(--gold, #C08C3D);
}

/* The drive, drawn in the gap it describes rather than as a label on
   the entry after it. */
/* The drive is its own row on the timeline, because it is the gap
   between two things rather than a property of either. Inside the
   entry it pushed the mark on the spine up to sit beside the drive
   time instead of beside the place it marks. */
.dy-gap { padding: 2px 0 2px 26px }

.dy-gap i {
    display: inline-block;
    font-style: normal;
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--moss);
    background: var(--ground);
    padding: 3px 12px 3px 0;
    /* Sits over the spine, which is the point: the line is the drive. */
    margin-left: -26px;
    padding-left: 26px;
}

button.dy-what {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.dy-what time {
    display: block;
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: .14em;
    color: var(--moss);
    margin-bottom: 5px;
    font-variant-numeric: tabular-nums;
}

.dy-what b {
    display: block;
    font-family: var(--serif);
    font-weight: 500;
    font-size: 21px;
    line-height: 1.24;
    letter-spacing: -.012em;
}

button.dy-what:hover b { text-decoration: underline; text-underline-offset: 3px }
button.dy-what:focus-visible { outline: 1px solid var(--moss); outline-offset: 4px }

.dy-what i {
    display: block;
    margin-top: 4px;
    font-style: normal;
    font-family: var(--serif);
    font-size: 15.5px;
    line-height: 1.5;
    color: var(--ink-55);
    /* One line. The rest is in the drawer, which is where a paragraph
       belongs - this is a timeline, not an article. */
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dy-what em {
    display: block;
    margin-top: 7px;
    font-style: normal;
    font-family: var(--serif);
    font-size: 15px;
    color: var(--ink-75);
    padding-left: 10px;
    border-left: 2px solid var(--hairline-soft);
}

.dy-from .dy-what b { font-size: 14.5px; color: var(--ink-75); font-weight: 400 }
.dy-from .dy-what i { font-family: var(--sans); font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase }

/* ---- the small marks ------------------------------------------- */

.dy-marks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px }

/* Chips rather than small print. These were set at eight and a half
   pixels of uppercase with a paperclip glyph in front, which on most
   machines is a grey box - so the one that says a booking reference is
   attached was the least visible thing on the row. */
.dy-mark {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-75);
    border: 1px solid var(--hairline);
    padding: 5px 10px;
    white-space: nowrap;
}

.dy-mark.booked { color: var(--moss); border-color: rgba(65, 64, 66, .4) }
.dy-mark.booked::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--moss) }

.dy-mark.clip::before {
    content: "";
    width: 9px;
    height: 11px;
    border: 1px solid currentColor;
    border-top-width: 3px;
    border-radius: 1px;
    opacity: .7;
}

/* Who wanted it. The votes were counted already and shown on one
   screen; this is the thing that turns a private swipe into a group
   deciding something. */
.dy-faces { display: inline-flex; align-items: center; gap: 7px }

.dy-faces i {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--ground);
    border: 1px solid var(--paper);
    margin-right: -7px;
    display: grid;
    place-items: center;
}

.dy-faces i:last-of-type { margin-right: 0 }
.dy-faces img { width: 100%; height: 100%; object-fit: cover }

.dy-faces b {
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: .04em;
    color: var(--ink-55);
}

.dy-faces em {
    font-style: normal;
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-75);
    margin-left: 5px;
}

/* ---- the photograph -------------------------------------------- */

.dy-shot {
    width: 132px;
    height: 94px;
    padding: 0;
    border: 0;
    overflow: hidden;
    background: var(--ground);
    cursor: pointer;
    display: block;
}

.dy-shot img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .5s var(--ease);
}

.dy-shot:hover img { transform: scale(1.05) }

/* ---- moving and removing --------------------------------------- */

/* Always there, and big enough to hit. These are the two things
   somebody does most on this page - change the order, take something
   off - and they were hidden until hover at twenty-two pixels square
   behind a hairline. On a touch screen there is no hover at all, so
   they did not exist. */
.dy-handles {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
}

.dy-grip {
    font-size: 15px;
    color: var(--ink-55);
    letter-spacing: -4px;
    margin-right: 8px;
    cursor: grab;
}

.dy-handles button {
    width: 34px;
    height: 34px;
    background: var(--paper);
    border: 1px solid var(--hairline);
    color: var(--ink-75);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}

.dy-handles button:hover:not(:disabled) { border-color: var(--ink); color: var(--ink); background: var(--ground) }
.dy-handles button:disabled { opacity: .28; cursor: default }

.dy-handles .off { font-size: 19px; margin-left: 6px }
.dy-handles .off:hover { border-color: #682114; color: #682114; background: rgba(104, 33, 20, .06) }

/* ---- then what ------------------------------------------------- */

.dy-next { padding-top: 16px }

.dy-then {
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--forest);
    background: none;
    border: 1px dashed var(--hairline);
    padding: 14px 24px;
    cursor: pointer;
    transition: border-color .25s var(--ease), background .25s var(--ease);
}

.dy-then:hover { border-style: solid; border-color: var(--forest); background: rgba(43, 48, 29, .04) }
.dy-then:focus-visible { outline: 1px solid var(--forest); outline-offset: 3px }

/* ---- a way back ------------------------------------------------ */

.dy-undo {
    position: fixed;
    left: 50%;
    bottom: clamp(94px, 13vh, 126px);
    transform: translateX(-50%);
    z-index: 95;
    display: flex;
    align-items: center;
    gap: 18px;
    background: #2B301D;
    color: #E4DCCA;
    padding: 13px 16px 13px 20px;
    box-shadow: 0 16px 44px rgba(65, 64, 66, .3);
    animation: dy-rise .3s var(--ease) both;
}

@keyframes dy-rise { from { opacity: 0; transform: translate(-50%, 10px) } }

.dy-undo span { font-family: var(--serif); font-size: 14px }
.dy-undo b { font-weight: 500; color: #F4EEE0 }

.dy-undo button {
    background: none;
    border: 1px solid rgba(228, 220, 202, .3);
    color: #E4DCCA;
    font-family: var(--sans);
    font-size: 8.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 8px 13px;
    cursor: pointer;
}

.dy-undo button:hover { border-color: #E4DCCA }

/* ---- agreed on, not yet placed --------------------------------- */

.dy-pile { margin-top: clamp(30px, 5vh, 46px) }

.dy-pile > h2 {
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 400;
    margin: 0 0 14px;
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.dy-pile > h2 i {
    font-style: normal;
    font-family: var(--serif);
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink-55);
}

.dy-pile-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2px }

.dy-loose {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 12px;
    align-items: center;
    background: var(--paper);
    border: 1px solid var(--hairline-soft);
    padding: 8px;
}

.dy-loose-art { display: block; aspect-ratio: 1; overflow: hidden; background: var(--ground) }
.dy-loose-art img { width: 100%; height: 100%; object-fit: cover }
.dy-loose-said b { display: block; font-family: var(--serif); font-weight: 500; font-size: 15px; line-height: 1.25 }

.dy-pile-say {
    margin: 12px 0 0;
    font-family: var(--serif);
    font-style: italic;
    font-size: 13.5px;
    color: var(--ink-55);
}

.dy-pile-say b { font-style: normal; font-weight: 500; color: var(--ink-75) }

@media (max-width: 860px) {
    .dy { grid-template-columns: 1fr; gap: 18px }
    .dy-plate { position: static; display: grid; grid-template-columns: auto 1fr; gap: 0 16px; align-items: center }
    .dy-date { grid-column: 1; margin: 0 }
    .dy-plate-shot { display: none }
    .dy-where, .dy-drive { grid-column: 2 }
    .dy-cut { grid-column: 2; opacity: 1; justify-self: start }
    .dy-item { grid-template-columns: 1fr }
    .dy-shot { width: 100%; height: 140px }
    .dy-handles { opacity: 1 }
}

/* === forwarding a confirmation ================================
   The email already holds the date, the time and the reference.
   Asking somebody to read one screen and type it into another is
   the most tedious thing an itinerary can ask for.
   ============================================================ */

.po {
    margin-top: clamp(30px, 5vh, 46px);
    border: 1px solid var(--hairline-soft);
    background: var(--paper);
    padding: clamp(20px, 3vw, 30px);
}

.po-head { max-width: 52ch }

.po-head h2 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: min(clamp(19px, 2.4vw, 23px), 28px + (clamp(19px, 2.4vw, 23px) - 28px) * 0.6);
    letter-spacing: -.014em;
    line-height: 1.2;
    margin: 0 0 8px;
}

.po-head p { margin: 0; font-family: var(--serif); font-size: 14.5px; line-height: 1.55; color: var(--ink-55) }

/* ------------------------------------------------------- the address

   This is the feature. Somebody who reads nothing else on the page
   should still be able to work out what to do from this one card, so
   it is set like a plate rather than a form field. */

.po-card {
    margin-top: 20px;
    background: var(--ground);
    border: 1px solid var(--hairline-soft);
    padding: clamp(16px, 2.4vw, 22px);
}

.po-card-k {
    display: block;
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-55);
    margin-bottom: 10px;
}

.po-at {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    text-align: left;
    background: var(--paper);
    border: 1px solid var(--hairline);
    padding: 14px 14px 14px 18px;
    cursor: pointer;
    font: inherit;
    transition: border-color .25s var(--ease);
}

.po-at:hover { border-color: var(--moss) }
.po-at:focus-visible { outline: 1px solid var(--forest); outline-offset: 2px }

.po-at-mail {
    font-family: var(--sans);
    font-size: clamp(13px, 1.7vw, 16px);
    letter-spacing: .01em;
    color: var(--ink);
    word-break: break-all;
}

.po-at-do {
    flex: none;
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--paper);
    background: var(--forest);
    padding: 9px 14px;
    white-space: nowrap;
}

/* A real sequence, so it is numbered. Three, because anybody who needs
   a fourth line will not do this at all. */
.po-how {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: grid;
    gap: 9px;
    counter-reset: po;
}

.po-how li {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 10px;
    font-family: var(--serif);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ink-75);
}

.po-how li::before {
    counter-increment: po;
    content: counter(po);
    font-family: var(--sans);
    font-size: 9.5px;
    letter-spacing: .1em;
    color: var(--moss);
    padding-top: 3px;
    font-variant-numeric: tabular-nums;
}

.po-open {
    margin-top: 16px;
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--forest);
    background: none;
    border: 0;
    border-bottom: 1px solid var(--hairline);
    padding: 0 0 4px;
    cursor: pointer;
    transition: border-color .25s var(--ease);
}

.po-open:hover { border-color: var(--forest) }

.po-box { margin-top: 18px }

.po-box textarea {
    width: 100%;
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.55;
    padding: 12px 14px;
    border: 1px solid var(--hairline);
    background: var(--ground);
    color: var(--ink);
    resize: vertical;
}

.po-box textarea:focus { outline: 0; border-color: var(--moss) }

.po-do { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap }

/* The drawer's button on a light page. Same shape, right colours. */
.po .dr-btn { background: var(--forest); color: var(--paper); border: 1px solid var(--forest) }
.po .dr-btn:disabled { opacity: .4; cursor: default }
.po .dr-btn.quiet { background: none; color: var(--forest); border-color: var(--hairline) }
.po .dr-btn.quiet:hover { border-color: var(--forest) }

.po-shut {
    background: none;
    border: 0;
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-55);
    cursor: pointer;
    padding: 0;
}

.po-off, .po-stuck {
    margin: 10px 0 0;
    font-family: var(--serif);
    font-style: italic;
    font-size: 13px;
    color: var(--ink-55);
}

/* --------------------------------------------------------- the tray */

.po-tray { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px }

.po-tray > li { border: 1px solid var(--hairline-soft); background: var(--ground); padding: 14px 16px }

.po-tray > li > header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px }
.po-tray > li > header b { font-family: var(--serif); font-weight: 500; font-size: 14.5px; flex: 1 }
.po-tray > li > header i { font-style: normal; font-family: var(--sans); font-size: 9px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-55) }

.po-tray > li > header button {
    flex: none;
    background: none;
    border: 0;
    font-size: 17px;
    line-height: 1;
    color: var(--ink-55);
    cursor: pointer;
    padding: 0 2px;
}

.po-tray > li > header button:hover { color: var(--ink) }

.po-found {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding-top: 12px;
    border-top: 1px solid var(--hairline-soft);
}

.po-found:first-of-type { border-top: 0; padding-top: 0 }

.po-what { flex: 1 1 16rem }
.po-what b { display: block; font-family: var(--serif); font-weight: 500; font-size: 16px }
.po-what span { display: block; margin-top: 3px; font-family: var(--sans); font-size: 10.5px; letter-spacing: .1em; color: var(--ink-75) }

/* What it understood, so a wrong reading is arguable rather than
   mysterious. */
.po-what em { display: block; margin-top: 5px; font-family: var(--serif); font-style: italic; font-size: 12.5px; color: var(--ink-55) }

.po-agree { display: flex; align-items: center; gap: 8px; flex: none }

.po-agree select {
    font-family: var(--sans);
    font-size: 11px;
    padding: 9px 10px;
    border: 1px solid var(--hairline);
    background: var(--paper);
    color: var(--ink);
}

/* === the panels ===============================================
   Drawn in the concierge's language, because it is the same
   gesture and somebody who has used one has learnt the other.
   ============================================================ */

.pl-doors, .en-tabs {
    display: flex;
    gap: 2px;
    margin: 0 clamp(22px, 4vw, 34px) clamp(20px, 3vh, 26px);
    border-bottom: 1px solid rgba(228, 220, 202, .14);
}

.pl-doors button, .en-tabs button {
    background: none;
    border: 0;
    border-bottom: 1px solid transparent;
    margin-bottom: -1px;
    padding: 10px 12px 11px;
    font-family: var(--sans);
    font-size: 9.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(228, 220, 202, .55);
    cursor: pointer;
    transition: color .25s var(--ease), border-color .25s var(--ease);
}

.pl-doors button:hover, .en-tabs button:hover { color: #E4DCCA }
.pl-doors button.on, .en-tabs button.on { color: #F4EEE0; border-bottom-color: #E4DCCA }

.pl-doors button i, .en-tabs button i {
    display: inline-block;
    margin-left: 5px;
    font-style: normal;
    font-size: 9px;
    color: rgba(228, 220, 202, .5);
}

.pl-none, .pl-from, .en-say {
    margin: 0 clamp(22px, 4vw, 34px) 14px;
    font-family: var(--serif);
    font-size: 14px;
    line-height: 1.55;
    color: rgba(228, 220, 202, .62);
}

.pl-from b { color: #F4EEE0; font-weight: 500 }
.pl-none { font-style: italic }

/* ------------------------------------------------------ picking one */

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

.pl-row {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 14px;
    align-items: center;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    border-top: 1px solid rgba(228, 220, 202, .1);
    padding: 12px clamp(22px, 4vw, 34px);
    cursor: pointer;
    font: inherit;
    transition: background .25s var(--ease);
}

.pl-row:hover { background: rgba(228, 220, 202, .06) }
.pl-row:focus-visible { outline: 1px solid rgba(228, 220, 202, .5); outline-offset: -3px }

.pl-row img, .pl-noshot {
    display: block;
    width: 56px;
    height: 56px;
    object-fit: cover;
    background: rgba(228, 220, 202, .1);
}

.pl-said b { display: block; font-family: var(--serif); font-weight: 500; font-size: 15.5px; color: #F4EEE0; line-height: 1.3 }
.pl-said i { display: block; margin-top: 3px; font-style: normal; font-family: var(--sans); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(228, 220, 202, .5) }

/* ------------------------------------------------- typing one in */

.pl-find {
    display: block;
    width: calc(100% - 2 * clamp(22px, 4vw, 34px));
    margin: 0 clamp(22px, 4vw, 34px) 16px;
    padding: 12px 14px;
    background: rgba(228, 220, 202, .07);
    border: 1px solid rgba(228, 220, 202, .2);
    color: #F4EEE0;
    font-family: var(--sans);
    font-size: 13px;
}

.pl-find:focus { outline: 0; border-color: rgba(228, 220, 202, .55) }
.pl-find::placeholder { color: rgba(228, 220, 202, .38) }

.pl-check {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    margin: 16px clamp(22px, 4vw, 34px) 0;
    font-family: var(--serif);
    font-size: 13px;
    line-height: 1.5;
    color: rgba(228, 220, 202, .62);
    cursor: pointer;
}

.pl-check input { margin-top: 3px; accent-color: #E4DCCA; flex: none }

.pl-form { margin: 0 clamp(22px, 4vw, 34px) }
.pl-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }

.pl-form label, .en-field, .en-two label {
    display: block;
    margin-bottom: 14px;
}

.pl-form label > span, .en-field > span, .en-two label > span {
    display: block;
    margin-bottom: 6px;
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: rgba(228, 220, 202, .5);
}

.pl-form input, .pl-form select, .pl-form textarea,
.en-field input, .en-field select, .en-field textarea,
.en-two input, .en-two select {
    width: 100%;
    padding: 11px 12px;
    background: rgba(228, 220, 202, .07);
    border: 1px solid rgba(228, 220, 202, .2);
    color: #F4EEE0;
    font-family: var(--sans);
    font-size: 13px;
    resize: vertical;
}

.pl-form input:focus, .pl-form select:focus, .pl-form textarea:focus,
.en-field input:focus, .en-field select:focus, .en-field textarea:focus,
.en-two input:focus, .en-two select:focus { outline: 0; border-color: rgba(228, 220, 202, .55) }

.pl-form input::placeholder, .pl-form textarea::placeholder,
.en-field input::placeholder, .en-field textarea::placeholder { color: rgba(228, 220, 202, .35) }

.pl-form select option, .en-field select option, .en-two select option { background: #2B301D; color: #E4DCCA }

.pl-form .dr-btn { margin-top: 4px }

/* ------------------------------------------------------- the entry */

.en-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.en-two, .en-field { margin: 0 clamp(22px, 4vw, 34px) 14px }

.en-field input:disabled, .en-field textarea:disabled,
.en-two input:disabled { opacity: .55; cursor: default }

.en-by {
    margin: 4px clamp(22px, 4vw, 34px) 0;
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(228, 220, 202, .4);
}

.en-off {
    display: block;
    margin: 22px clamp(22px, 4vw, 34px) 0;
    background: none;
    border: 1px solid rgba(104, 33, 20, .45);
    color: #C08C3D;
    font-family: var(--sans);
    font-size: 9.5px;
    letter-spacing: .15em;
    text-transform: uppercase;
    padding: 11px 18px;
    cursor: pointer;
    transition: border-color .25s var(--ease);
}

.en-off:hover { border-color: #C08C3D }

.en-files { margin: 22px clamp(22px, 4vw, 34px) 0; padding-top: 18px; border-top: 1px solid rgba(228, 220, 202, .12) }

.en-files-k {
    margin: 0 0 10px;
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: rgba(228, 220, 202, .5);
}

.en-files .en-say { margin-left: 0; margin-right: 0 }

.en-file { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(228, 220, 202, .1) }
.en-file a { flex: 1; font-family: var(--sans); font-size: 12.5px; color: #E4DCCA; text-decoration: none; border-bottom: 1px solid rgba(228, 220, 202, .3) }
.en-file a:hover { border-color: #E4DCCA }
.en-file button { background: none; border: 0; color: rgba(228, 220, 202, .5); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 3px }
.en-file button:hover { color: #C08C3D }

.en-files .dr-btn { margin-top: 14px }

.en-saving {
    margin: 14px clamp(22px, 4vw, 34px) 0;
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: rgba(228, 220, 202, .45);
}

@media (max-width: 560px) {
    .pl-two, .en-two { grid-template-columns: 1fr }
    .dy-shot { position: static; width: 100%; height: 120px; margin-top: 10px }
    .dy-chain > li:has(.dy-shot) { padding-right: 0 }
    .po-found { align-items: flex-start }
    .po-agree { width: 100% }
    .po-agree select { flex: 1 }
}

/* === the desk, inside the trip ================================
   The concierge on the rest of the site answers questions. In here
   half of what anybody wants is an instruction, so this one acts -
   and says plainly what it did, because an assistant that changes
   an itinerary and mentions it in prose is one nobody trusts twice.
   ============================================================ */

/* The panel is a column: a fixed head, a thread that scrolls, and the
   box pinned to the bottom where a hand already is. */
.dq-in { display: flex; flex-direction: column; height: 100% }

.dq-head { padding: clamp(52px, 7vh, 64px) clamp(22px, 4vw, 34px) 0; flex: none }
.dq-head h2 { margin: 0 0 8px }

.dq-say {
    margin: 0 0 clamp(18px, 3vh, 24px);
    font-family: var(--serif);
    font-size: 13.5px;
    line-height: 1.5;
    color: rgba(228, 220, 202, .55);
}

.dq-thread {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 clamp(22px, 4vw, 34px);
    scrollbar-width: thin;
}

.dq-openers { display: grid; gap: 8px; padding-top: 4px }

.dq-openers button {
    text-align: left;
    background: rgba(228, 220, 202, .06);
    border: 1px solid rgba(228, 220, 202, .14);
    color: #E4DCCA;
    font-family: var(--serif);
    font-size: 14px;
    line-height: 1.4;
    padding: 12px 14px;
    cursor: pointer;
    transition: border-color .25s var(--ease), background .25s var(--ease);
}

.dq-openers button:hover { border-color: rgba(228, 220, 202, .4); background: rgba(228, 220, 202, .1) }

.dq-turn { margin-bottom: 18px }

.dq-turn > p {
    margin: 0;
    font-family: var(--serif);
    font-size: 14.5px;
    line-height: 1.6;
    color: rgba(228, 220, 202, .86);
    white-space: pre-wrap;
}

/* What somebody said sits to the right and quieter, so a glance down
   the thread reads as answers with questions between them. */
.dq-turn.mine > p {
    margin-left: auto;
    max-width: 82%;
    background: rgba(228, 220, 202, .09);
    padding: 10px 13px;
    font-size: 14px;
    color: #F4EEE0;
}

/* Said plainly, under the sentence, in the itinerary's own language. */
.dq-did {
    list-style: none;
    margin: 10px 0 0;
    padding: 10px 0 0;
    border-top: 1px solid rgba(228, 220, 202, .12);
    display: grid;
    gap: 5px;
}

.dq-did li {
    font-family: var(--sans);
    font-size: 10.5px;
    letter-spacing: .05em;
    color: rgba(228, 220, 202, .62);
}

.dq-did b {
    color: var(--gold, #C08C3D);
    font-weight: 400;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: 9px;
    margin-right: 4px;
}

/* Never done on its own. "Clear Tuesday" is four words and could lose
   a ferry booking and its reference. */
.dq-ask {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding: 12px 14px;
    background: rgba(104, 33, 20, .14);
    border: 1px solid rgba(192, 140, 61, .3);
}

.dq-ask span { font-family: var(--serif); font-size: 13.5px; color: rgba(228, 220, 202, .82) }
.dq-ask b { color: #F4EEE0; font-weight: 500 }

.dq-ask button {
    flex: none;
    background: none;
    border: 1px solid rgba(192, 140, 61, .5);
    color: #C08C3D;
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: .15em;
    text-transform: uppercase;
    padding: 9px 14px;
    cursor: pointer;
    transition: border-color .25s var(--ease);
}

.dq-ask button:hover { border-color: #C08C3D }

/* When the desk cannot help. An apology is not an answer, so this is
   a list of the screens that do the same job by hand - none of which
   need the desk to be working. */
.dq-stuck {
    margin-top: 4px;
    padding: 14px 15px;
    background: rgba(228, 220, 202, .05);
    border-left: 2px solid rgba(228, 220, 202, .25);
}

.dq-stuck > p {
    margin: 0;
    font-family: var(--serif);
    font-size: 14px;
    line-height: 1.55;
    color: rgba(228, 220, 202, .8);
}

.dq-stuck ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 9px }

.dq-stuck li {
    display: grid;
    grid-template-columns: 12px 1fr;
    gap: 9px;
    font-family: var(--serif);
    font-size: 13.5px;
    line-height: 1.5;
    color: rgba(228, 220, 202, .62);
}

.dq-stuck li::before { content: "4"; color: rgba(228, 220, 202, .35) }
.dq-stuck li b { color: #F4EEE0; font-weight: 500 }

.dq-stuck-ask {
    margin-top: 14px !important;
    padding-top: 12px;
    border-top: 1px solid rgba(228, 220, 202, .14);
    font-size: 13px !important;
}

.dq-stuck-ask a { color: var(--gold, #C08C3D); text-decoration: none; border-bottom: 1px solid currentColor }

.dq-say-box {
    flex: none;
    display: flex;
    gap: 10px;
    align-items: flex-end;
    padding: 16px clamp(22px, 4vw, 34px) clamp(20px, 3vh, 28px);
    border-top: 1px solid rgba(228, 220, 202, .12);
    background: #2B301D;
}

.dq-say-box textarea {
    flex: 1;
    background: rgba(228, 220, 202, .07);
    border: 1px solid rgba(228, 220, 202, .2);
    color: #F4EEE0;
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.5;
    padding: 11px 13px;
    resize: none;
}

.dq-say-box textarea:focus { outline: 0; border-color: rgba(228, 220, 202, .5) }
.dq-say-box textarea::placeholder { color: rgba(228, 220, 202, .35) }

.dq-say-box button {
    flex: none;
    background: #E4DCCA;
    color: #2B301D;
    border: 0;
    font-family: var(--sans);
    font-size: 9.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 13px 20px;
    cursor: pointer;
}

.dq-say-box button:disabled { opacity: .35; cursor: default }

.dq .dr-wait { padding: 10px 0 20px }

@media (max-width: 560px) {
    .dq-open { right: 12px; bottom: 84px; padding: 11px 15px }
    .po-at { flex-direction: column; align-items: stretch; gap: 12px }
    .po-at-do { text-align: center }
}

/* === how it all joins up ===
   Named .fl once, which was already the design's name for the cards in
   the flow band. CSS could not tell them apart, so this block quietly
   painted those cards white and left their near-white text invisible.
   Renamed: this is the newcomer and the one used in a single place.==================================
   Every screen was well made and none of them said what the others
   were for. One line of real numbers, each a link: where you are,
   what you have done, what it hands on to.
   ============================================================ */

.joinstrip {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 0;
    margin-top: clamp(18px, 3vh, 26px);
    border: 1px solid var(--hairline-soft);
    background: var(--paper);
    max-width: 620px;
}

.joinstrip-step { display: flex; align-items: stretch; flex: 1 1 0; min-width: 0 }

.joinstrip-step a {
    flex: 1;
    display: grid;
    align-content: center;
    gap: 3px;
    padding: 13px 16px;
    text-decoration: none;
    transition: background .25s var(--ease, ease);
}

.joinstrip-step a:hover { background: var(--ground) }

.joinstrip-step b {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 24px;
    line-height: 1;
    color: var(--ink);
    font-variant-numeric: lining-nums tabular-nums;
}

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

/* Where you are standing, said with a rule rather than a tint two
   per cent off the page. */
.joinstrip-step.on { background: var(--ground); box-shadow: inset 0 3px 0 var(--gold, #C08C3D) }
.joinstrip-step.on b { color: var(--ink) }
.joinstrip-step.on span { color: var(--ink-75) }

.joinstrip-arrow {
    display: flex;
    align-items: center;
    padding: 0 6px;
    font-style: normal;
    font-size: 14px;
    color: var(--ink-55);
    flex: none;
    background: var(--paper);
}

/* What goes in the book. It was a wrapping row of links over a
   photograph and then a column down the side; here it is the
   contents page of the thing above it. */
.fp-under { padding: clamp(30px, 5vh, 48px) 0 clamp(34px, 6vh, 60px); max-width: 720px }

.fp-under-k {
    margin: 0 0 16px;
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-55);
}

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

.fp-path a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 15px 0;
    border-bottom: 1px solid var(--hairline-soft);
    text-decoration: none;
    transition: padding-left .25s var(--ease, ease);
}

.fp-path li:first-child a { border-top: 1px solid var(--hairline-soft) }
.fp-path a:hover { padding-left: 8px }

.fp-path b {
    font-family: var(--serif);
    font-weight: 400;
    font-size: min(clamp(19px, 2.2vw, 23px), 28px + (clamp(19px, 2.2vw, 23px) - 28px) * 0.6);
    line-height: 1.2;
    letter-spacing: -.012em;
    color: var(--ink);
}

.fp-path a:hover b { color: var(--moss) }

.fp-path i {
    font-style: normal;
    font-family: var(--sans);
    font-size: 9.5px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--ink-55);
    text-align: right;
    flex: none;
}

.fp-path .done b { color: var(--ink-55) }
.fp-path .done::after { content: none }
.fp-path .now b { font-style: italic; color: var(--gold, #C08C3D) }

/* === the room, as a panel ====================================
   The feed and the concierge, two tabs of one slide-out. Both are
   the same gesture - somebody to talk to - and putting the feed on
   the front page meant it was visible on the one screen people stop
   visiting and invisible on the seven where they actually are.
   ============================================================ */

.dq-open {
    position: fixed;
    right: clamp(16px, 3vw, 28px);
    bottom: clamp(86px, 12vh, 116px);
    z-index: 90;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: min(340px, 70vw);
    background: #2B301D;
    color: #E4DCCA;
    border: 1px solid rgba(228, 220, 202, .2);
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: .02em;
    padding: 13px 18px;
    cursor: pointer;
    box-shadow: 0 14px 40px rgba(65, 64, 66, .3);
    transition: transform .25s var(--ease, ease), box-shadow .25s var(--ease, ease);
}

.dq-open:hover { transform: translateY(-2px); box-shadow: 0 18px 48px rgba(65, 64, 66, .36) }
.dq-open > span:first-child { font-size: 6px; color: var(--gold, #C08C3D); flex: none }

/* What has happened, rather than a label to remember. */
.dq-open-say {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: none;
    letter-spacing: .02em;
    font-size: 12.5px;
    line-height: 1.3;
}

.dq-open.has { border-color: var(--gold, #C08C3D) }

.dq-open i {
    flex: none;
    font-style: normal;
    font-size: 9px;
    letter-spacing: .04em;
    background: var(--gold, #C08C3D);
    color: #2B301D;
    border-radius: 20px;
    padding: 3px 7px;
    min-width: 18px;
    text-align: center;
}

.dq-in { display: flex; flex-direction: column; height: 100% }

.dq-tabs {
    display: flex;
    gap: 2px;
    flex: none;
    padding: clamp(52px, 7vh, 62px) clamp(22px, 4vw, 34px) 0;
    border-bottom: 1px solid rgba(228, 220, 202, .14);
}

.dq-tabs button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 12px 4px 13px;
    margin-right: 22px;
    font-family: var(--sans);
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(228, 220, 202, .5);
    cursor: pointer;
    transition: color .25s var(--ease, ease), border-color .25s var(--ease, ease);
}

.dq-tabs button:hover { color: #E4DCCA }
.dq-tabs button.on { color: #F4EEE0; border-bottom-color: var(--gold, #C08C3D) }

.dq-tabs i {
    font-style: normal;
    font-size: 9px;
    letter-spacing: .04em;
    background: var(--gold, #C08C3D);
    color: #2B301D;
    border-radius: 20px;
    padding: 2px 6px;
}

.dq-ask { display: flex; flex-direction: column; flex: 1; min-height: 0 }

/* ---- the feed, in the panel ------------------------------------

   The same column, on a dark ground and half the width - so the
   photograph strips stack rather than shrinking to stamps. */

.dq .fd-panel {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: clamp(20px, 3vh, 28px) clamp(22px, 4vw, 34px) clamp(24px, 4vh, 34px);
    scrollbar-width: thin;
}

.dq .fd-panel .fd-say {
    border-bottom-color: rgba(228, 220, 202, .16);
    margin-bottom: clamp(22px, 3.5vh, 32px);
}

.dq .fd-panel .fd-say-who button { color: rgba(228, 220, 202, .5) }
.dq .fd-panel .fd-say-who button:hover { color: #E4DCCA }
.dq .fd-panel .fd-say-who button.on { color: #F4EEE0; border-bottom-color: var(--gold, #C08C3D) }

.dq .fd-panel .fd-say textarea { color: #F4EEE0; font-size: 17px }
.dq .fd-panel .fd-say textarea::placeholder { color: rgba(228, 220, 202, .42) }

.dq .fd-panel .fd-say button[type="submit"] {
    background: var(--gold, #C08C3D);
    color: #2B301D;
    padding: 11px 20px;
}

.dq .fd-panel .fd-line { color: rgba(228, 220, 202, .55) }
.dq .fd-panel .fd-line time { color: rgba(228, 220, 202, .3) }
.dq .fd-panel .fd-said { color: #F4EEE0; font-size: 19px; max-width: none }
.dq .fd-panel .fd-beat.answered .fd-said { color: rgba(228, 220, 202, .82); font-size: 16px }
.dq .fd-panel .fd-none { color: rgba(228, 220, 202, .55) }
.dq .fd-panel .fd-beat.fresh { box-shadow: inset 2px 0 0 var(--gold, #C08C3D) }

/* Narrow, so two across rather than four stamps. */
.dq .fd-panel .fd-places.many { grid-template-columns: 1fr 1fr }
.dq .fd-panel .fd-place img, .dq .fd-panel .fd-place-bare { height: 110px }
.dq .fd-panel .fd-places:not(.many) .fd-place img { height: 170px }

/* The poll, on the dark. */
.dq .pl-poll { background: rgba(228, 220, 202, .06); border-color: rgba(228, 220, 202, .16); max-width: none }
.dq .pl-poll-q { color: #F4EEE0 }
.dq .pl-opt { background: rgba(228, 220, 202, .07) }
.dq .pl-opt-in b { color: #F4EEE0 }
.dq .pl-poll-say { color: rgba(228, 220, 202, .55) }
.dq .pl-poll-say b { color: #F4EEE0 }
.dq .pl-opt-who i { background: rgba(20, 18, 14, .5); border-color: rgba(228, 220, 202, .25); color: rgba(228, 220, 202, .7) }
.dq .pl-opt-who em { color: rgba(228, 220, 202, .8) }

.dq .pl-ask-q, .dq .pl-ask-one input { background: rgba(228, 220, 202, .07); border-color: rgba(228, 220, 202, .2); color: #F4EEE0 }
.dq .pl-ask-q { background: none; border-bottom-color: rgba(228, 220, 202, .3) }
.dq .pl-ask-q::placeholder, .dq .pl-ask-one input::placeholder { color: rgba(228, 220, 202, .4) }
.dq .pl-ask-do > button, .dq .pl-ask-many, .dq .pl-ask-not { color: rgba(228, 220, 202, .6) }
.dq .pl-ask-do > button { border-color: rgba(228, 220, 202, .3) }
.dq .pl-ask-send { background: var(--gold, #C08C3D); color: #2B301D }

/* === the edition ============================================
   The front of a trip is the cover of the book being made, and
   nothing else. It fits one screen on every device - a front page
   that scrolls is a page with more than one thing on it, and this
   has one.

   The cover is the real one: sage board, "the best of" over the
   name, the photograph mounted below it, curated by Hidden Scotland
   along the foot. It had been the olive of the PDF, which is a
   different edition and read as a guess.
   ============================================================ */

/* The room is a flex column - bar, body, rail - so the page takes
   what is left instead of subtracting a guess at the chrome. The
   guess was 142px and was wrong the moment .rm-body had padding of
   its own, which is what put the rail below the fold. */
.rm-body:has(> .ed) {
    flex: 1;
    min-height: 0;
    display: flex;
    padding: 0;
}

.ed {
    position: relative;
    width: 100%;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    background: #2B301D;
    display: grid;
    place-items: center;
    padding: clamp(16px, 3vh, 32px) clamp(16px, 3vw, 40px);
}

.ed-ground {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .26;
    filter: saturate(.6);
}

.ed::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(115% 85% at 50% 45%,
        rgba(23, 22, 15, .3) 0%,
        rgba(23, 22, 15, .9) 74%);
}

/* A column that fills, rather than a stack that centres and leaves
   the same dead band under it on every screen. The book takes what is
   left after the few lines below it, and shrinks first when there is
   not enough - so this holds from a phone to a desk without a single
   breakpoint deciding what it looks like. */
.ed-in {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 3.4vh, 40px);
    height: 100%;
    width: 100%;
}

/* ---- the book, and the contents in its place ------------------

   No page turn. Simulating a cover swinging on its spine was a
   trick, and a trick you watch twice - the second time it is just
   something between you and the contents. They cross-fade instead,
   in the same place, at the same size. */

.ed-spread {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    flex: 0 1 auto;
    min-height: 0;
}

.rm .ed-cover {
    /* The book's real trim, read off the InDesign PDF: 419.528 x
       538.583pt, which is 148 x 190mm and a ratio of 0.7789. It had
       been 3:4 and before that 4:5, both of them guesses. The same
       constant is already on .gcover elsewhere in this file.

       Measured against the viewport, because twice now a percentage of
       a flex item inside a grid inside a flex column failed to resolve
       and the cover fell back to filling the page.

       But 70vh was the wrong measure: it ignored the bar, the rail and
       the three lines under the book, so on a laptop the page ran over
       and the countdown was cut off the bottom. What is left is the
       screen less the chrome (133), the page's own padding (64), the
       gap (40) and the lines beneath (about 185) - so the book takes
       the remainder and everything is on the screen at once.

       Never wider than the screen either: at this trim, 88vw of width
       is 113vw of height. And never bigger than a book you could
       hold. */
    aspect-ratio: 148 / 190;
    height: min(113vw, calc(100dvh - 422px), 760px);
    min-height: 190px;
    width: auto;
    position: relative;
    border: 0;
    cursor: pointer;
    background: #414042;
    color: #FFFDF8;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* Set off the cover's own height, because percentage padding
       resolves against the containing block and took 122px a side off a
       285px cover. The title sits a fifth of the way down, as it does on
       the printed one. */
    padding: min(6.5vh, 52px) min(5.5vh, 44px) min(4.6vh, 36px);
    justify-content: flex-start;
    /* Square at the spine, eased at the fore-edge, which is how a
       board is trimmed. */
    border-radius: 1px 3px 3px 1px;
    /* The pages behind the board, stacked away from the spine, then the
       thickness of the board, then the weight of the thing on whatever
       it is standing on. */
    box-shadow:
        2px 1px 0 #EFEADF,
        4px 2px 0 #E4DED0,
        6px 3px 0 #D8D1C0,
        7px 4px 0 rgba(0, 0, 0, .1),
        14px 20px 30px -8px rgba(0, 0, 0, .42),
        30px 44px 70px -10px rgba(0, 0, 0, .4);
    transition: opacity .45s var(--ease, ease),
                transform .45s var(--ease, ease),
                box-shadow .4s var(--ease, ease);
}

/* The spine: a fold of board taking the light on one side of it and
   losing it on the other. One gradient, and the flat rectangle stops
   being a rectangle. */
.rm .ed-cover::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 7%;
    pointer-events: none;
    border-radius: 1px 0 0 1px;
    background: linear-gradient(90deg,
        rgba(255, 255, 255, .1) 0,
        rgba(0, 0, 0, .16) 14%,
        rgba(0, 0, 0, .1) 38%,
        rgba(255, 255, 255, .085) 76%,
        rgba(0, 0, 0, .045) 100%);
}

/* Board rather than paint. The real one is a textured stock and the
   flat fill was the main reason it read as a rectangle rather than
   as a book. */
.rm .ed-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .55;
    background-image:
        /* The sheen a board takes under a light, which is most of what
           tells the eye it is looking at an object. */
        linear-gradient(148deg,
            rgba(255, 255, 255, .1) 0%,
            rgba(255, 255, 255, 0) 42%,
            rgba(0, 0, 0, .07) 100%),
        /* And the weave, at a thread you have to look for. */
        repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, transparent 1px 2px),
        repeating-linear-gradient(90deg, rgba(0,0,0,.026) 0 1px, transparent 1px 2px);
}

.rm .ed-cover:hover {
    transform: translateY(-5px);
    box-shadow:
        2px 1px 0 #EFEADF,
        4px 2px 0 #E4DED0,
        6px 3px 0 #D8D1C0,
        7px 4px 0 rgba(0, 0, 0, .1),
        18px 28px 38px -10px rgba(0, 0, 0, .46),
        38px 58px 88px -12px rgba(0, 0, 0, .46);
}
.rm .ed-cover:focus-visible { outline: 2px solid var(--gold, #C08C3D); outline-offset: 6px }

.ed.open .ed-cover {
    opacity: 0;
    transform: scale(.96);
    pointer-events: none;
}

/* "THE BEST OF" on the printed book. */
.rm .ed-cover .bc-region {
    position: relative;
    flex: none;
    max-width: 100%;
    font-family: var(--sans);
    font-size: clamp(6px, .85vh, 8px);
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #FFFDF8;
    /* One line. Wrapped to four, it took the whole cover and the
       photograph was left with nothing. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rm .ed-cover h3 {
    position: relative;
    font-family: var(--serif);
    font-weight: 600;
    font-size: min(3vh, 26px);
    line-height: 1.1;
    letter-spacing: -.014em;
    margin: 0;
    color: #FFFDF8;
    flex: none;
    text-shadow:
        0 1px 0 rgba(43, 48, 29, .22),
        0 -1px 0 rgba(255, 255, 255, .14);
    /* Two lines at most. A long title used to push the photograph off
       the bottom of its own cover. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* A plate, not a panel. Sized off its own height so it holds the same
   proportion of the cover whatever the cover is doing, and set at the
   4:5 of the printed one - a little under half the board, with the
   title above it and the imprint below. */
.rm .ed-cover figure {
    position: relative;
    flex: none;
    /* Of the board inside the margins, not of the whole cover - so this
       is about half the cover's width, which is where the plate sits on
       the printed one. */
    height: 60%;
    width: auto;
    aspect-ratio: 4 / 5;
    align-self: center;
    /* Floats in whatever board the type is not using, equally above and
       below - so a one-line title and a two-line title both make a
       cover rather than one making a cover and the other a poster. */
    margin: auto 0;
    outline: 1px solid rgba(255, 253, 248, .14);
    outline-offset: 0;
    padding: 0;
    background: none;
    box-shadow:
        0 1px 2px rgba(43, 48, 29, .3),
        0 8px 22px rgba(43, 48, 29, .26);
}

.rm .ed-cover figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rm .ed-cover .bc-foot {
    position: relative;
    flex: none;
    display: grid;
    justify-items: center;
    gap: min(1.2vh, 10px);
    width: 100%;
}

.rm .ed-cover .bc-dates {
    position: relative;
    flex: none;
    font-family: var(--serif);
    font-style: italic;
    font-size: min(1.55vh, 13px);
    color: rgba(255, 253, 248, .9);
}

.rm .ed-cover .bc-by {
    position: relative;
    flex: none;
    font-family: var(--sans);
    font-size: min(1.05vh, 9px);
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(255, 253, 248, .78);
}

/* ---- the contents, on the page ---------------------------------

   It had been a sheet of white paper laid over the photograph, which
   is a second object on a page whose whole argument is that there is
   one. There is no card now: the cover fades, and the contents are
   simply set on the ground it was standing on, in the same serif,
   arriving a line at a time.
   ---------------------------------------------------------------- */

.ed-inside {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: grid;
    align-content: center;
    max-height: calc(100dvh - 260px);
    overflow-y: auto;
    scrollbar-width: none;
    width: min(30rem, 100%);
    margin-inline: auto;
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s var(--ease, ease);
}

.ed-inside::-webkit-scrollbar { display: none }
.ed.open .ed-inside { opacity: 1; pointer-events: auto }

.ed-inside-k {
    margin: 0 0 min(1.8vh, 15px);
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(241, 239, 230, .42);
    text-align: center;
}

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

/* Each line arrives after the one above it, which is what turning to
   a contents page feels like and costs nothing. */
.ed-contents li {
    opacity: 0;
    transform: translateY(9px);
    transition: opacity .45s var(--ease, ease), transform .45s var(--ease, ease);
}

.ed.open .ed-contents li { opacity: 1; transform: none }

.ed.open .ed-contents li:nth-child(1) { transition-delay: .06s }
.ed.open .ed-contents li:nth-child(2) { transition-delay: .11s }
.ed.open .ed-contents li:nth-child(3) { transition-delay: .16s }
.ed.open .ed-contents li:nth-child(4) { transition-delay: .21s }
.ed.open .ed-contents li:nth-child(5) { transition-delay: .26s }
.ed.open .ed-contents li:nth-child(6) { transition-delay: .31s }
.ed.open .ed-contents li:nth-child(7) { transition-delay: .36s }
.ed.open .ed-contents li:nth-child(8) { transition-delay: .41s }

.ed-contents a {
    position: relative;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 16px;
    text-align: center;
    padding: min(2.2vh, 19px) 4px;
    border-bottom: 1px solid rgba(241, 239, 230, .13);
    text-decoration: none;
    transition: padding-left .3s var(--ease, ease),
                border-color .3s var(--ease, ease);
}

.ed-contents li:last-child a { border-bottom: 0 }
.ed-contents a:hover { border-color: rgba(241, 239, 230, .34) }

/* The rule under the line fills gold from the left as you go along it,
   so the row answers the cursor without anything moving but light. */
/* The rule under the line grows out from the middle, which is where
   the words are. */
.ed-contents a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: var(--gold, #C08C3D);
    transform: scaleX(0);
    transition: transform .45s var(--ease, ease);
}

.ed-contents a:hover::after { transform: scaleX(1) }
.ed-contents a:focus-visible { outline: 1px solid var(--gold, #C08C3D); outline-offset: 4px }

.ed-contents b {
    font-family: var(--serif);
    font-weight: 400;
    font-size: min(2.4vh, 21px);
    line-height: 1.2;
    letter-spacing: -.014em;
    color: #F4EEE0;
    transition: color .3s var(--ease, ease);
}

.ed-contents a:hover b { color: var(--gold, #C08C3D) }
.ed-contents .done b { color: rgba(241, 239, 230, .5) }
.ed-contents .now b { font-style: italic }

.ed-contents i {
    font-style: normal;
    font-family: var(--sans);
    font-size: 8.5px;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: rgba(241, 239, 230, .38);
    text-align: right;
    flex: none;
}

/* ---- what is essential ------------------------------------------- */

.ed-said {
    flex: none;
    text-align: center;
    display: grid;
    justify-items: center;
    gap: clamp(8px, 1.6vh, 16px);
}

.ed-count {
    margin: 0;
    font-family: var(--sans);
    font-size: clamp(8px, 1.2vh, 10px);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(241, 239, 230, .55);
}

.ed-count span {
    display: block;
    font-family: var(--serif);
    font-size: min(clamp(30px, 6vh, 54px), 28px + (clamp(30px, 6vh, 54px) - 28px) * 0.6);
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--gold, #C08C3D);
    margin-bottom: 4px;
    font-variant-numeric: lining-nums tabular-nums;
    text-transform: none;
}

.ed-count b {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(18px, 3vh, 24px);
    letter-spacing: -.014em;
    color: #F7F4EE;
    text-transform: none;
}

.ed-faces { display: flex; justify-content: center }

.ed-face {
    width: clamp(26px, 3.6vh, 32px);
    height: clamp(26px, 3.6vh, 32px);
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin-right: -8px;
    font-family: var(--sans);
    font-size: 10px;
    background: rgba(23, 22, 15, .6);
    border: 1px solid rgba(241, 239, 230, .3);
    color: rgba(241, 239, 230, .55);
}

.ed-face.in { background: var(--gold, #C08C3D); border-color: var(--gold, #C08C3D); color: #2B301D }

.ed-crew {
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(13px, 1.9vh, 15px);
    line-height: 1.45;
    color: rgba(241, 239, 230, .7);
    max-width: 38ch;
}

.ed-crew b { color: #F7F4EE; font-weight: 500 }

.ed-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    max-width: 24rem;
    width: 100%;
    padding: 7px 7px 7px 13px;
    background: rgba(241, 239, 230, .1);
    border: 1px solid rgba(241, 239, 230, .26);
    cursor: pointer;
    text-align: left;
}

.ed-link:hover { border-color: rgba(241, 239, 230, .6) }
.ed-link span { font-family: var(--sans); font-size: 11.5px; color: rgba(241, 239, 230, .85); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

.ed-link i {
    flex: none;
    font-style: normal;
    font-family: var(--sans);
    font-size: 8px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #2B301D;
    background: var(--gold, #C08C3D);
    padding: 6px 10px;
}

/* The only instruction on the page. */
.ed-press {
    margin: 0;
    font-family: var(--sans);
    font-size: 8.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(241, 239, 230, .38);
}

@media (prefers-reduced-motion: reduce) {
    .rm .ed-cover, .ed-inside { transition: opacity .2s linear }
    .rm .ed-cover:hover { transform: none }
}

/* Phones hold the book and the countdown and nothing else needs to
   change: the column fills, so the book simply takes less. */
@media (max-width: 520px) {
    .ed { padding: 14px }
    .ed-link { max-width: 100% }
    .rm .ed-cover { height: min(113vw, calc(100dvh - 340px)) }
}

/* Short and wide - a laptop in landscape, a phone on its side - is the
   one case where the book has to give way, because the lines under it
   have a floor and it does not. */
@media (max-height: 620px) {
    .ed { padding: 10px }
    .ed-in { gap: 10px }
    .ed-count span { font-size: clamp(22px, 6vh, 32px) }
    .rm .ed-cover { height: min(113vw, calc(100dvh - 300px)) }
}

/* === the trip feed ===========================================
   The first version was an activity log: an avatar column, a
   hairline under every row, grey boxes and grey buttons, and every
   beat the same weight. That is the shape every piece of software
   uses and it belongs to none of them - least of all a magazine.

   So: no avatar column, because the name is already in the
   sentence. Beats weighted by what they are - somebody speaking is
   the loudest thing on the page, a vote is a quiet line with the
   photograph doing the work, a poll is an event and gets room.
   Days marked, so the column has a rhythm. And the box you write
   in is a line, not a form.
   ============================================================ */

.rm .wl-live {
    max-width: 720px;
    padding-top: clamp(28px, 4.5vh, 46px);
    padding-bottom: clamp(30px, 5vh, 50px);
}

/* ---- writing something -----------------------------------------

   It was a bordered grey box with a bordered grey field and a grey
   button, which is a form. This is a line with a rule under it. */

.fd-say {
    margin-bottom: clamp(30px, 5vh, 46px);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--hairline);
    display: grid;
    gap: 12px;
}

.fd-say-who { display: flex; gap: 20px }

.fd-say-who button {
    background: none;
    border: 0;
    padding: 0 0 5px;
    border-bottom: 2px solid transparent;
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-55);
    cursor: pointer;
    transition: color .25s var(--ease, ease), border-color .25s var(--ease, ease);
}

.fd-say-who button:hover { color: var(--ink) }
.fd-say-who button.on { color: var(--ink); border-bottom-color: var(--gold, #C08C3D) }

.fd-say textarea {
    width: 100%;
    background: none;
    border: 0;
    padding: 0;
    font-family: var(--serif);
    font-size: min(clamp(18px, 2.2vw, 21px), 28px + (clamp(18px, 2.2vw, 21px) - 28px) * 0.6);
    line-height: 1.45;
    color: var(--ink);
    resize: none;
}

.fd-say textarea:focus { outline: 0 }
.fd-say textarea::placeholder { color: var(--ink-55) }

/* A button, not a footnote. This was small grey uppercase over a
   hairline, which disappeared entirely in its disabled state. */
.fd-say button[type="submit"] {
    justify-self: start;
    background: var(--forest);
    color: var(--paper);
    border: 0;
    padding: 13px 24px;
    font-family: var(--sans);
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    cursor: pointer;
    margin-bottom: 14px;
}

.fd-say button[type="submit"]:disabled { opacity: .3; cursor: default }
.fd-say.aloud button[type="submit"] { background: var(--gold, #C08C3D); color: #2B301D }

/* The three things the box can do. One leads and two follow, rather than
   three of equal weight - most of what gets typed here is for the group,
   and the desk is the deliberate choice. */
.fd-do {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 0 0 14px;
}

.fd-go,
.fd-alt {
    border: 0;
    cursor: pointer;
    font-family: var(--sans);
    font-size: 10.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    white-space: nowrap;
}

.fd-go {
    background: var(--forest);
    color: var(--paper);
    padding: 13px 24px;
}

.fd-go:disabled { opacity: .3; cursor: default }

/* Not a second filled button competing with the first. A rule under the
   words is enough to say it is pressable. */
.fd-alt {
    background: transparent;
    color: var(--ink-55);
    padding: 13px 2px;
    border-bottom: 1px solid transparent;
}

.fd-alt:hover:not(:disabled) {
    color: var(--ink);
    border-bottom-color: var(--gold, #C08C3D);
}

.fd-alt:disabled { opacity: .35; cursor: default }

/* In the dark panel the forest button disappears into the ground, so the
   desk's own gold leads instead. */
.fd-panel .fd-go { background: var(--gold, #C08C3D); color: #2B301D }
.fd-panel .fd-alt { color: rgba(251, 249, 246, .62) }
.fd-panel .fd-alt:hover:not(:disabled) { color: var(--paper, #FBF9F6) }

.fd-trouble {
    margin: 0 0 10px;
    font-family: var(--serif);
    font-style: italic;
    font-size: 14px;
    color: #682114;
}

/* ---- what the desk will not do by itself ------------------------

   It proposes a removal rather than making one, so this is where the
   proposal waits. Two plain buttons and the reason, because the whole
   point is that somebody reads it before pressing. */

.fd-asks {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 14px;
}

.fd-ask {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 11px 14px;
    background: color-mix(in srgb, var(--gold, #C08C3D) 12%, transparent);
    border-left: 2px solid var(--gold, #C08C3D);
}

.fd-ask > span {
    flex: 1 1 12em;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.fd-ask b {
    font-family: var(--serif);
    font-size: 16px;
    font-weight: 400;
    color: var(--ink);
}

.fd-ask i {
    font-family: var(--serif);
    font-size: 13.5px;
    color: var(--ink-55);
}

.fd-ask button {
    border: 0;
    cursor: pointer;
    padding: 9px 15px;
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: .15em;
    text-transform: uppercase;
    white-space: nowrap;
}

.fd-ask-go { background: #682114; color: var(--paper) }
.fd-ask-no { background: transparent; color: var(--ink-55); padding-inline: 4px }
.fd-ask-no:hover { color: var(--ink) }

/* In the dark panel the tinted ground disappears, so it carries its own. */
.fd-panel .fd-ask {
    background: rgba(192, 140, 61, .16);
}

.fd-panel .fd-ask b { color: var(--paper, #FBF9F6) }
.fd-panel .fd-ask i,
.fd-panel .fd-ask-no { color: rgba(251, 249, 246, .6) }
.fd-panel .fd-ask-no:hover { color: var(--paper, #FBF9F6) }


/* ---- the column ------------------------------------------------ */

.fd-none {
    font-family: var(--serif);
    font-style: italic;
    font-size: 17px;
    line-height: 1.6;
    color: var(--ink-55);
    max-width: 44ch;
}

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

.fd-beat { padding: 0 0 clamp(26px, 4vh, 38px) }

/* No column of circles. The name is in the sentence, and a face
   beside every row is what made this look like a chat client. */
.fd-face { display: none }

.fd-line {
    margin: 0;
    font-family: var(--sans);
    font-size: 10.5px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--ink-55);
}

.fd-line time {
    margin-left: 10px;
    font-size: 9.5px;
    letter-spacing: .12em;
    color: var(--hairline);
}

/* Somebody actually spoke. The loudest thing on the page, because a
   group talking is the whole reason this exists - and it was set at
   the same weight as "Jack moved a castle". */
.fd-said {
    margin: 10px 0 0;
    font-family: var(--serif);
    font-size: min(clamp(20px, 2.6vw, 25px), 28px + (clamp(20px, 2.6vw, 25px) - 28px) * 0.6);
    line-height: 1.4;
    letter-spacing: -.012em;
    color: var(--ink);
    max-width: 30ch;
    text-wrap: pretty;
}

.fd-beat.said .fd-line { color: var(--ink-75) }

/* The desk speaks in the guide's own voice, so it is set as an
   answer rather than as a remark. */
.fd-beat.answered .fd-said {
    font-size: 17px;
    line-height: 1.6;
    max-width: 46ch;
    color: var(--ink-75);
    padding-left: 16px;
    border-left: 2px solid var(--gold, #C08C3D);
    white-space: pre-wrap;
}

.fd-beat.sending { opacity: .5 }

/* Not seen yet. A gold rule in the margin rather than a highlight -
   a feed should not look like a list of alerts. */
.fd-beat.fresh { box-shadow: inset 2px 0 0 var(--gold, #C08C3D); padding-left: 16px; margin-left: -16px }

/* ---- the pictures ----------------------------------------------

   The point of a feed about a holiday. They were seventy-six pixel
   thumbnails in a bordered card; four of them should be a strip you
   want to look at. */

.fd-places { margin-top: 12px; display: grid; gap: 2px }

.fd-places.many { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) }

.fd-place { display: block; text-decoration: none; position: relative; overflow: hidden }

.fd-place img, .fd-place-bare {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
    background: var(--ground);
    transition: transform .6s var(--ease, ease);
}

.fd-place:hover img { transform: scale(1.04) }

.fd-place > span {
    position: absolute;
    inset: auto 0 0 0;
    padding: 34px 12px 11px;
    background: linear-gradient(to top,
        rgba(20, 18, 14, .85) 0%,
        rgba(20, 18, 14, .45) 55%,
        rgba(20, 18, 14, 0) 100%);
}

.fd-place b {
    display: block;
    font-family: var(--serif);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.2;
    color: #F7F4EE;
}

.fd-place i {
    display: block;
    margin-top: 3px;
    font-style: normal;
    font-family: var(--serif);
    font-size: 13.5px;
    color: rgba(247, 244, 238, .78);
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* On its own it can be taller - one place is worth a proper look. */
.fd-places:not(.many) .fd-place img { height: 220px }

/* === a poll ==================================================
   The bar is the vote rather than a chart beside it, so the shape
   of the answer reads before anybody looks at a number. And the
   line at the foot is the whole reason this beats a chat thread:
   it names who has not answered.
   ============================================================ */

.pl-poll {
    margin-top: 12px;
    border: 1px solid var(--hairline);
    background: var(--paper);
    padding: 18px 18px 14px;
    max-width: 460px;
}

.pl-poll-q {
    margin: 0 0 14px;
    font-family: var(--serif);
    font-weight: 500;
    font-size: 19px;
    line-height: 1.3;
    color: var(--ink);
}

.pl-poll-lot { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px }

.pl-opt {
    position: relative;
    display: block;
    width: 100%;
    text-align: left;
    background: var(--ground);
    border: 1px solid transparent;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .25s var(--ease, ease);
}

.pl-opt:hover:not(:disabled) { border-color: var(--ink-55) }
.pl-opt:disabled { cursor: default }
.pl-opt.mine { border-color: var(--gold, #C08C3D) }

/* The vote itself, filling the option. */
.pl-opt-fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: rgba(192, 140, 61, .22);
    transition: width .5s var(--ease, ease);
}

.pl-opt.mine .pl-opt-fill { background: rgba(192, 140, 61, .4) }

.pl-opt-in {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
}

.pl-opt-in img { width: 40px; height: 32px; object-fit: cover; flex: none }

.pl-opt-in b {
    flex: 1;
    font-family: var(--serif);
    font-weight: 400;
    font-size: 16px;
    color: var(--ink);
}

.pl-opt-who { display: flex; align-items: center; gap: 4px; flex: none }

.pl-opt-who i {
    width: 21px;
    height: 21px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--paper);
    border: 1px solid var(--hairline);
    display: grid;
    place-items: center;
    font-style: normal;
    font-family: var(--sans);
    font-size: 9px;
    color: var(--ink-55);
    margin-right: -7px;
}

.pl-opt-who i img { width: 100%; height: 100%; object-fit: cover }

.pl-opt-who em {
    font-style: normal;
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: .1em;
    color: var(--ink-75);
    margin-left: 11px;
}

.pl-poll-say {
    margin: 12px 0 0;
    font-family: var(--sans);
    font-size: 9.5px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--ink-55);
}

.pl-poll-say b { color: var(--ink); font-weight: 400 }

/* ---- asking one ------------------------------------------------ */

.pl-ask { display: grid; gap: 10px; padding-bottom: 14px; justify-items: stretch }

.pl-ask-q {
    width: 100%;
    max-width: none;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--hairline);
    padding: 0 0 8px;
    font-family: var(--serif);
    font-size: min(clamp(18px, 2.2vw, 21px), 28px + (clamp(18px, 2.2vw, 21px) - 28px) * 0.6);
    color: var(--ink);
}

.pl-ask-q:focus { outline: 0; border-color: var(--moss) }
.pl-ask-q::placeholder { color: var(--ink-55) }

.pl-ask-lot { display: grid; gap: 4px }

.pl-ask-one { display: flex; align-items: center; gap: 10px }
.pl-ask-one img { width: 34px; height: 28px; object-fit: cover; flex: none }

.pl-ask-one input {
    flex: 1;
    background: var(--ground);
    border: 1px solid var(--hairline-soft);
    padding: 10px 12px;
    font-family: var(--serif);
    font-size: 15.5px;
    color: var(--ink);
}

.pl-ask-one input:focus { outline: 0; border-color: var(--moss) }

.pl-ask-one button {
    flex: none;
    background: none;
    border: 0;
    font-size: 17px;
    color: var(--ink-55);
    cursor: pointer;
    padding: 0 4px;
}

.pl-ask-one button:hover { color: #682114 }

.pl-ask-do { display: flex; align-items: center; gap: 18px; flex-wrap: wrap }

.pl-ask-do > button {
    background: none;
    border: 0;
    padding: 0 0 3px;
    border-bottom: 1px solid var(--hairline);
    font-family: var(--sans);
    font-size: 9.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-55);
    cursor: pointer;
}

.pl-ask-do > button:hover { color: var(--ink); border-color: var(--ink) }

.pl-ask-many {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--sans);
    font-size: 9.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-55);
    cursor: pointer;
}

.pl-ask-many input { accent-color: var(--gold, #C08C3D) }

.pl-ask-go { display: flex; align-items: center; gap: 20px; margin-top: 4px }

.pl-ask-send {
    background: var(--forest);
    color: var(--paper);
    border: 0;
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 12px 22px;
    cursor: pointer;
}

.pl-ask-send:disabled { opacity: .35; cursor: default }

.pl-ask-not {
    background: none;
    border: 0;
    font-family: var(--sans);
    font-size: 9.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-55);
    cursor: pointer;
    padding: 0;
}

/* === your part ===============================================
   Not the trip's checklist - theirs. Each disappears the moment it
   is done, which is the whole appeal: a list that only gets shorter.
   ============================================================ */

.yp { margin-bottom: clamp(26px, 4vh, 40px) }

.yp-k {
    margin: 0 0 12px;
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-55);
}

.yp ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 }

.yp a {
    display: grid;
    gap: 2px;
    padding: 11px 0 11px 22px;
    border-bottom: 1px solid var(--hairline-soft);
    text-decoration: none;
    position: relative;
}

.yp li:first-child a { border-top: 1px solid var(--hairline-soft) }

/* A mark to tick off, because that is what the list is for. */
.yp a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 17px;
    width: 11px;
    height: 11px;
    border: 1px solid var(--hairline);
    border-radius: 50%;
}

.yp a:hover::before { border-color: var(--moss); background: rgba(65, 64, 66, .12) }

.yp b {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 18px;
    line-height: 1.3;
    color: var(--ink);
}

.yp a:hover b { color: var(--moss) }

.yp i {
    font-style: normal;
    font-family: var(--serif);
    font-size: 14px;
    line-height: 1.4;
    color: var(--ink-55);
}

.wl-beds {
    margin-top: clamp(26px, 4vh, 38px);
    padding-top: 16px;
    border-top: 1px solid var(--hairline-soft);
    font-family: var(--sans);
    font-size: 9.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-55);
}

.wl-beds a { color: var(--moss); text-decoration: none; border-bottom: 1px solid currentColor }

@media (max-width: 620px) {
    .yp a { flex-direction: column; gap: 3px }
    .fd-places.many { grid-template-columns: 1fr 1fr }
    .fd-place img, .fd-place-bare { height: 120px }
}


/* ---- the ways in -----------------------------------------------
 *
 * Six doors where three shelves of listings used to be. Each one is a
 * photograph, a name and a count, and each leads to the page that can
 * actually hold what it is counting.
 *
 * Deliberately not cards: no boxes, no shadows, no rounded corners.
 * The photograph is the object and the type sits under it, which is
 * how the rest of the guide is set.
 * ---------------------------------------------------------------- */

.dz { padding-top: clamp(30px, 5vh, 56px) }

.dz-kick {
    margin: 0 0 clamp(16px, 2.6vh, 26px);
    font-family: var(--sans);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink-55);
}

.dz-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: clamp(18px, 2.4vw, 34px) clamp(16px, 2vw, 28px);
}

.dz-door {
    display: grid;
    grid-template-areas: "shot shot" "said arr";
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 12px 10px;
    text-decoration: none;
    color: var(--ink);
}

.dz-shot {
    grid-area: shot;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--hairline-soft);
}

.dz-shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s var(--ease, ease), filter .4s var(--ease, ease);
}

.dz-door:hover .dz-shot img { transform: scale(1.035) }

.dz-none {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(140deg, var(--hairline-soft), transparent);
}

.dz-said { grid-area: said; display: block; min-width: 0 }

.dz-said b {
    display: block;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(19px, 1.6vw, 23px);
    line-height: 1.15;
    letter-spacing: -.014em;
    color: var(--ink);
    transition: color .25s var(--ease, ease);
}

.dz-said i {
    display: block;
    margin-top: 5px;
    font-style: normal;
    font-family: var(--sans);
    font-size: 9.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-55);
    font-variant-numeric: tabular-nums;
}

.dz-arr {
    grid-area: arr;
    align-self: center;
    color: var(--ink-55);
    transition: transform .3s var(--ease, ease), color .25s var(--ease, ease);
}

.dz-door:hover .dz-said b { color: var(--moss) }
.dz-door:hover .dz-arr { transform: translateX(4px); color: var(--moss) }
.dz-door:focus-visible { outline: 2px solid var(--moss); outline-offset: 4px }

@media (prefers-reduced-motion: reduce) {
    .dz-shot img, .dz-arr { transition: none }
    .dz-door:hover .dz-shot img { transform: none }
}

/* ---- what we would send you to first --------------------------- */

.dz-taste { padding-top: clamp(24px, 4vh, 44px) }



/* ---- did you know ----------------------------------------------
 *
 * These are the region's facts. They were set as numbered cards - 01
 * to 12 - under a heading that said "Know before you go", which
 * promises how to get there and what to pack and then tells you about
 * the elephant somebody kept in a flat off Fishmarket Close.
 *
 * Numbering trivia implies an order to it. There is none. So: a list,
 * set in the guide's own serif, beside the stories where the other
 * good-to-know-but-not-needed writing lives.
 * ---------------------------------------------------------------- */

.dyk { padding-top: clamp(20px, 3.5vh, 40px) }

.dyk-kick {
    margin: 0 0 clamp(12px, 2vh, 20px);
    font-family: var(--sans);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink-55);
}

.dyk-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 0 clamp(24px, 4vw, 60px);
}

.dyk-list li {
    padding: clamp(12px, 1.8vh, 18px) 0;
    border-bottom: 1px solid var(--hairline-soft);
    font-family: var(--serif);
    font-size: clamp(15px, 1.15vw, 17px);
    line-height: 1.5;
    color: var(--ink);
}

/* The last in each column, whatever the column count turns out to be. */
.dyk-list li:last-child { border-bottom: 0 }



/* The printed guide, photographed. Two of the ninety-six regions have a
   real book; for those it stands here instead of the drawn cover, which
   is a rectangle in the right colour and reads as one. */
.rpl-shot {
    align-self: center;
    justify-self: center;
    width: min(100%, 460px);
}

.rpl-shot img {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .38);
}



/* ---- the long reads --------------------------------------------
 *
 * What is left of the passport: no chapter numbers, no leader dots,
 * no stamps, no "1 of 3 stamped". Three essays is not a course. The
 * question each one answers and how long it takes is the whole of
 * what a reader wanted from the list.
 * ---------------------------------------------------------------- */

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

.rc-read {
    position: relative;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: clamp(16px, 3vw, 40px);
    padding: clamp(15px, 2.2vh, 22px) 2px;
    border-bottom: 1px solid var(--hairline-soft);
    text-decoration: none;
    transition: border-color .3s var(--ease, ease);
}

.rc-list li:last-child .rc-read { border-bottom: 0 }
.rc-read:hover { border-color: var(--hairline) }

.rc-read::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: var(--moss);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .45s var(--ease, ease);
}

.rc-read:hover::after { transform: scaleX(1) }
.rc-read:focus-visible { outline: 2px solid var(--moss); outline-offset: 3px }

.rc-said { display: block; min-width: 0 }

.rc-said b {
    display: block;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(19px, 1.7vw, 24px);
    line-height: 1.2;
    letter-spacing: -.014em;
    color: var(--ink);
    transition: color .25s var(--ease, ease);
}

.rc-read:hover .rc-said b { color: var(--moss) }

.rc-said i {
    display: block;
    margin-top: 5px;
    font-style: italic;
    font-family: var(--serif);
    font-size: clamp(14px, 1.1vw, 16px);
    color: var(--ink-55);
}

.rc-mins {
    flex: none;
    font-family: var(--sans);
    font-size: 9.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-55);
    font-variant-numeric: tabular-nums;
}



/* ---- the map, full screen --------------------------------------
 *
 * The whole window: no site header, no navigation, one way out. A map
 * inside a column with a menu bar above it is a picture of a map.
 *
 * The panel floats over the map rather than sitting in a hard column
 * beside it, so the map runs the full width underneath and the eye
 * reads one surface instead of two.
 * ---------------------------------------------------------------- */

.mv {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: #e8e6dd;
    font-family: var(--sans);
}

.mv-map { position: absolute; inset: 0 }
.mv-canvas { position: absolute; inset: 0 }

.mv-off {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    margin: 0 auto;
    padding: 30px;
    max-width: 34ch;
    text-align: center;
    font-family: var(--serif);
    font-size: 18px;
    color: var(--ink-55);
}

/* ---- the panel --------------------------------------------------- */

.mv-side {
    position: absolute;
    top: clamp(12px, 2vh, 22px);
    left: clamp(12px, 2vh, 22px);
    bottom: clamp(12px, 2vh, 22px);
    width: min(380px, calc(100vw - 24px));
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: rgba(251, 249, 246, .96);
    backdrop-filter: blur(14px);
    box-shadow: 0 24px 60px rgba(65, 64, 66, .22);
}

.mv-head {
    flex: none;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: clamp(16px, 2.4vh, 24px) clamp(16px, 2vw, 22px) 0;
}

.mv-kick {
    margin: 0 0 4px;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink-55);
}

.mv-head h1 {
    margin: 0;
    font-family: var(--serif);
    font-weight: 500;
    font-size: min(clamp(24px, 2.2vw, 31px), 28px + (clamp(24px, 2.2vw, 31px) - 28px) * 0.6);
    line-height: 1.05;
    letter-spacing: -.024em;
    color: var(--ink);
}

.mv-shut {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    background: none;
    border: 1px solid var(--hairline);
    border-radius: 50%;
    color: var(--ink);
    cursor: pointer;
    transition: background .2s, border-color .2s;
}

.mv-shut:hover { background: var(--ink); border-color: var(--ink); color: var(--paper) }

/* ---- searching and filtering ------------------------------------- */

.mv-find { flex: none; padding: clamp(12px, 1.8vh, 18px) clamp(16px, 2vw, 22px) 0 }

.mv-find input {
    width: 100%;
    padding: 10px 12px;
    background: rgba(65, 64, 66, .04);
    border: 1px solid var(--hairline-soft);
    font-family: var(--sans);
    font-size: 13px;
    color: var(--ink);
}

.mv-find input:focus {
    outline: none;
    border-color: var(--moss);
    background: var(--paper);
}

.mv-kinds {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 12px clamp(16px, 2vw, 22px);
}

.mv-kinds button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    background: none;
    border: 1px solid var(--hairline-soft);
    cursor: pointer;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: .04em;
    color: var(--ink);
    transition: border-color .2s, color .2s, background .2s;
}

/* The colour this group's pins are drawn in, so the filter bar is the
   map's legend rather than a second thing to learn. */
.mv-ink {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: none;
}

.mv-kinds button.on .mv-ink { box-shadow: 0 0 0 2px rgba(251, 249, 246, .5) }

.mv-kinds button i {
    font-style: normal;
    font-size: 8.5px;
    opacity: .65;
    font-variant-numeric: tabular-nums;
}

.mv-kinds button:hover { border-color: var(--hairline); color: var(--ink) }

.mv-kinds button.on {
    background: var(--forest, #2B301D);
    border-color: var(--forest, #2B301D);
    color: var(--paper);
}

.mv-count {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 clamp(16px, 2vw, 22px) 10px;
    font-size: 9.5px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--ink-55);
    border-bottom: 1px solid var(--hairline-soft);
    padding-bottom: 12px;
    font-variant-numeric: tabular-nums;
}

.mv-follow { display: inline-flex; align-items: center; gap: 6px; cursor: pointer }
.mv-follow input { accent-color: var(--moss); width: 13px; height: 13px }

/* ---- the places -------------------------------------------------- */

.mv-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0;
    padding: 0 clamp(10px, 1.4vw, 14px) 14px;
    list-style: none;
}

/* Four hundred rows with a photograph each: let the browser skip the
   ones nobody has scrolled to. */
.mv-list li { content-visibility: auto; contain-intrinsic-size: auto 62px }

.mv-list a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px;
    text-decoration: none;
    transition: background .2s var(--ease, ease);
}

.mv-list li.on a { background: rgba(192, 140, 61, .13) }
.mv-list a:hover { background: rgba(65, 64, 66, .05) }

.mv-shot {
    flex: none;
    width: 46px;
    height: 46px;
    overflow: hidden;
    background: var(--hairline-soft);
}

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

.mv-said { min-width: 0 }

.mv-said b {
    display: block;
    font-family: var(--serif);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mv-said i {
    display: block;
    margin-top: 2px;
    font-style: normal;
    font-size: 8.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-55);
}

.mv-empty {
    padding: 22px 8px;
    font-family: var(--serif);
    font-size: 15px;
    color: var(--ink-55);
}

.mv-empty button {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--moss);
    text-decoration: underline;
    cursor: pointer;
}

/* ---- what you last pointed at ------------------------------------ */

.mv-peek {
    position: absolute;
    right: clamp(12px, 2vh, 22px);
    bottom: clamp(12px, 2vh, 22px);
    display: flex;
    align-items: center;
    gap: 12px;
    width: min(320px, calc(100vw - 24px));
    padding: 9px;
    background: rgba(251, 249, 246, .97);
    box-shadow: 0 18px 44px rgba(65, 64, 66, .24);
    text-decoration: none;
    animation: mv-peek-in .3s var(--ease, ease) both;
}

@keyframes mv-peek-in {
    from { opacity: 0; transform: translateY(10px) }
    to   { opacity: 1; transform: none }
}

.mv-peek img { flex: none; width: 58px; height: 58px; object-fit: cover; display: block }
.mv-peek span { min-width: 0 }

.mv-peek b {
    display: block;
    font-family: var(--serif);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.2;
    color: var(--ink);
}

.mv-peek i {
    display: block;
    margin-top: 3px;
    font-style: normal;
    font-size: 8.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-55);
}

@media (max-width: 720px) {
    /* The panel takes the bottom half and the map keeps the top, so
       both are usable with a thumb. */
    .mv-side {
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 58vh;
        box-shadow: 0 -14px 40px rgba(65, 64, 66, .2);
    }

    .mv-peek { bottom: calc(58vh + 12px); right: 12px; left: 12px; width: auto }
}

@media (prefers-reduced-motion: reduce) {
    .mv-peek { animation: none }
}

}



/* ---- the line between the pictures -----------------------------
 *
 * Seven mosaic frames running straight into ten doors is seventeen
 * photographs with nothing to rest on. One sentence of the guide's
 * own writing sits between them.
 *
 * The measure was the whole problem, twice. A hundred-and-ninety
 * character sentence at 30ch is not a pull quote, it is a column -
 * seven lines deep and thin enough to read like a poem nobody asked
 * for. Set in em against the type size, twenty-two of them gives
 * about four lines, which is a block rather than a stack.
 *
 * Left, not centred: the doors below it and every section head on
 * this page are left, and a centred slab between them reads as a
 * different page that wandered in.
 * ---------------------------------------------------------------- */

.pq {
    padding: clamp(44px, 8vh, 100px) 0 clamp(38px, 7vh, 86px);
}

.pq-line {
    margin: 0;
    border: 0;
    padding: 0;
}

/* A short rule and a word, so the sentence is placed rather than
   dropped. */
.pq-from {
    max-width: 52em;
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 clamp(16px, 2.6vh, 26px);
    font-family: var(--sans);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink-55);
}

.pq-from::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--hairline);
}

.pq-said {
    margin: 0;
    font-family: var(--serif);
    font-weight: 400;
    font-size: min(clamp(22px, 2.9vw, 38px), 28px + (clamp(22px, 2.9vw, 38px) - 28px) * 0.6);
    line-height: 1.28;
    letter-spacing: -.02em;
    color: var(--ink);
    text-wrap: pretty;
    /* On the sentence, not on the blockquote around it: em resolves
       against the element's own size, and the blockquote inherits 16px -
       so 22em there was 352px, a column four words wide, rather than the
       836px the type size asks for. */
    max-width: 22em;
}

/* The opening mark hangs into the margin, as it is set in print, so
   the first letter still lines up with the label above it. */
.pq-said::before {
    content: "\201C";
    margin-left: -.4em;
    color: var(--moss);
}

.pq-said::after { content: "\201D"; color: var(--moss) }

@media (max-width: 720px) {
    .pq-said { font-size: min(clamp(20px, 5.4vw, 26px), 28px + (clamp(20px, 5.4vw, 26px) - 28px) * 0.6) }
}

.dz-head {
    margin: 0 0 clamp(20px, 3.4vh, 34px);
    font-family: var(--serif);
    font-weight: 500;
    font-size: min(clamp(24px, 2.5vw, 34px), 28px + (clamp(24px, 2.5vw, 34px) - 28px) * 0.6);
    line-height: 1.12;
    letter-spacing: -.022em;
    color: var(--ink);
}

.dz-head em { font-style: italic; font-weight: 400 }

/* ==== no italics on hover ==== ==========================
 *
 * Three hundred rules across these sheets shifted type into italic
 * when the cursor crossed it. On a serif that changes the width of
 * every letter, so the line moves under the pointer - and on a list
 * of links, moving the thing somebody is aiming at is the one thing
 * a hover state should not do.
 *
 * The rules are left where they are: two of these sheets are the
 * design's own, and several set the italic on a state as well as on
 * hover - `nav.main a:hover, nav.main a.current`. Only the hovering
 * halves are named here, so the marker on the page you are actually
 * on survives.
 *
 * Generated by scratchpad/noital.py.
 * ============================================================== */

.rg-list button:hover,
.offer:hover b,
.near-list a:hover b,
.ccard:hover .txt b,
.mg-types a:hover,
.mg-regions a:hover,
.rb-list a:hover,
nav.main a:hover,
.scard:hover h3,
.rgh-rail a:hover span,
.areagrid .acard:hover figcaption h3,
.psh-f:hover h3 a,
.dex:hover h3 a,
.gd-next:hover strong,
.gd-course a:hover .gd-t,
.tl-lead:hover h3,
.tl-more a:hover .tl-t,
.tl-who a:hover strong,
.cnt-row:hover .cnt-t,
.fk-who-in:hover strong,
.dk-book:hover strong {
    font-style: normal;
}


/* ---- in print --------------------------------------------------
 *
 * The printed guide where a region has one, the current magazine
 * where it does not.
 *
 * .bookrow and .bookshot had no rules at all. The guidebook version
 * survived that because a product shot on a dark ground looks like
 * something either way; the magazine version did not, because its
 * cover image is a landscape photograph, and an unconstrained
 * landscape photograph in a full-width band is a full-width band.
 * The words were sitting on top of it.
 * ---------------------------------------------------------------- */

.bookrow {
    display: grid;
    grid-template-columns: minmax(0, 330px) minmax(0, 480px);
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
    justify-content: center;
}

.bookshot {
    margin: 0;
    align-self: center;
}

/* One shape for both. The Edinburgh book is photographed square and
   the magazine cover is landscape; cropping both to a square is what
   lets the two versions of this section look like one section. */
.bookshot img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
    box-shadow: 0 26px 60px rgba(0, 0, 0, .38);
}

.bookbody { min-width: 0 }

.bookbody h2 {
    margin: 6px 0 clamp(14px, 2.4vh, 22px);
    font-family: var(--serif);
    font-weight: 400;
    font-size: min(clamp(26px, 3vw, 40px), 28px + (clamp(26px, 3vw, 40px) - 28px) * 0.6);
    line-height: 1.1;
    letter-spacing: -.022em;
    color: var(--paper);
    text-wrap: balance;
}

.bookbody h2 em { font-style: italic }

.bookbody .fb-kick {
    margin: 0;
    font-family: var(--sans);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(251, 249, 246, .6);
}

.bookstand {
    margin: 0 0 clamp(14px, 2.2vh, 20px);
    max-width: 44ch;
    font-family: var(--serif);
    font-size: clamp(15px, 1.2vw, 17.5px);
    line-height: 1.6;
    color: rgba(251, 249, 246, .82);
}

.bookmeta {
    margin: 0 0 clamp(18px, 3vh, 28px);
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(251, 249, 246, .45);
}

.bk-acts {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: clamp(14px, 2vw, 26px);
    margin: 0;
}

.bk-more {
    font-family: var(--serif);
    font-size: 15px;
    color: rgba(251, 249, 246, .82);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.bk-more:hover { color: var(--paper) }

.bk-quote {
    margin: 0 0 clamp(14px, 2.2vh, 20px);
    padding-left: 16px;
    border-left: 2px solid rgba(251, 249, 246, .3);
}

.bk-quote p {
    margin: 0;
    font-family: var(--serif);
    font-style: italic;
    font-size: 16px;
    line-height: 1.5;
    color: rgba(251, 249, 246, .86);
}

.bk-quote cite {
    display: block;
    margin-top: 8px;
    font-style: normal;
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(251, 249, 246, .5);
}

@media (max-width: 780px) {
    .bookrow {
        grid-template-columns: minmax(0, 380px);
        gap: clamp(22px, 4vh, 34px);
    }
}



/* ---- a card still waiting for its picture ----------------------
 *
 * A hundred and twenty-one of the stories have no illustration yet.
 * An empty frame reads as a photograph that failed; a plate reads as
 * a decision. Two tones from the guidebook palette, the kind of
 * story set small, and a rule under it.
 *
 * When the illustration lands it replaces this and nothing else
 * changes.
 * ---------------------------------------------------------------- */

.st-plate {
    display: grid;
    place-items: center;
    background:
        repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px),
        var(--moss, #2B301D);
    position: relative;
}

/* Folklore and history get different ground, so a shelf of plates is
   not one flat colour. */
.st-plate[data-kind="history"] {
    background:
        repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px),
        #414042;
}

.st-plate em {
    font-style: normal;
    font-family: var(--sans);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: rgba(251, 249, 246, .82);
}

/* A short rule under the words, the same one the contents pages use. */
.st-plate::after {
    content: "";
    position: absolute;
    bottom: 38%;
    width: 26px;
    height: 1px;
    background: rgba(251, 249, 246, .4);
}



/* =====================================================================
   THE WAY IN

   The sign-in mockup drew these screens completely and they were never
   built: the pages stayed on the Laravel starter kit's own components,
   which do not use this layout at all, so the stylesheet config/design.php
   points at /login loaded and matched nothing on the page.

   Everything structural comes from that mockup. What follows is only what
   a working form needs and a drawn one does not - every button in the
   prototypes carries data-fake, so nothing in them was ever wrong, empty
   or waiting.
   ===================================================================== */

/* The mockup wrote this inline on every form in a card, because the card
   already provides the paper and the border and a second one inside it
   reads as a box in a box. */
.pform.bare {
    max-width: none;
    margin: 0;
    background: none;
    border: 0;
    padding: 0;
}

/* A card on its own rather than beside another - the reset and verify
   screens, where there is no second thing to say. */
.onecol {
    max-width: 440px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 60px);
}

/* The confirmation. It is display:none in the mockups, which never had
   anything to confirm. */
.pdone.on { display: block }

/* Something is wrong with one field. Not red-on-white shouting: the same
   iron the rest of the site uses for a warning, close under the input it
   belongs to so there is no guessing which one it means. */
.pcard .pwrong,
.pwrong {
    margin: 6px 0 0;
    font-family: var(--serif);
    font-style: italic;
    font-size: 13.5px;
    line-height: 1.5;
    color: #682114;
}

/* Keep me signed in. On by default, because somebody planning a trip over
   three weekends should not be asked who they are each time. */
.pkeep {
    display: flex !important;
    align-items: center;
    gap: 9px;
    margin: 18px 0 0 !important;
    font-family: var(--serif) !important;
    font-size: 14px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--ink-75) !important;
    cursor: pointer;
}

.pkeep input {
    width: auto !important;
    margin: 0;
    accent-color: var(--forest);
}

/* The ghost button is a link on these pages - it goes somewhere rather
   than submitting - so it needs saying that it is not underlined text. */
.pcard .pbtn { text-decoration: none }
.pcard .pnote { margin-inline: 0; text-align: left }
.pcard .pnote a { color: var(--forest) }

@media (max-width: 720px) {
    .twocol { grid-template-columns: 1fr }
}

/* Where the photographs came from.
 *
 * Shown only where every picture on the listing is ours. It sits under the
 * credit line and is meant to be noticed second - the photograph is the
 * point, this is a footnote about it. */
.gal-mark {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.35rem 0 0;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: inherit;
    opacity: 0.62;
}

/* A small filled square rather than a tick. A tick reads as a claim that
   something was verified, which is more than we know. */
.gal-mark-d {
    width: 0.4rem;
    height: 0.4rem;
    flex: 0 0 auto;
    background: currentColor;
    opacity: 0.75;
}

/* The second of the two route buttons.
 *
 * "Open the live map" stays the primary action because it keeps the reader
 * on the site. This one hands them to Google, which is what you want in a
 * car and not what you want in a browser, so it is quieter. */
.mapbtn-alt {
    margin-top: 0.5rem;
    background: transparent;
    border: 1px solid currentColor;
    opacity: 0.8;
}

.mapbtn-alt:hover,
.mapbtn-alt:focus-visible {
    opacity: 1;
}

/* The photographer's name under a stop photograph.
 *
 * Required wherever one of Google's photographs appears, and right for ours
 * too. Quiet, but present - a credit that cannot be read is not a credit. */
.cred {
    opacity: 0.75;
}

.cred a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* The route map.
 *
 * It takes the slot the drawn shape had, so the panel's proportions are
 * unchanged - a better picture in the same frame, not a new layout.
 * Google's attribution is burnt into the image; the caption repeats it
 * because their terms ask for the data credit to be legible. */
.rp-real {
    margin: 0;
    overflow: hidden;
}

.rp-real img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 20rem;
    object-fit: cover;
}

.rp-real figcaption {
    margin-top: 0.4rem;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.55;
}

/* ------------------------------------------------------------------
 * The foot of a stop: what it is, what you can do about it.
 * ------------------------------------------------------------------ */

/* The facts, out from behind the pull-down.
 *
 * A row of small headings with the answer under each, so the eye can find
 * the one it came for - which is nearly always "will it be open". Set in
 * the sans, because these are measurements and the prose above them is not.
 */
.s-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
    gap: 18px 28px;
    margin: 28px 0 0;
    padding: 20px 22px;
    background: var(--paper, #f6f3ee);
    border: 1px solid var(--hairline-soft);
}

.s-facts > div {
    min-width: 0;
}

.s-facts dt {
    margin: 0 0 5px;
    font-family: var(--sans);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--moss);
}

.s-facts dd {
    margin: 0;
    font-family: var(--serif);
    font-size: 15px;
    line-height: 1.45;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.s-facts dd a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--hairline);
}

.s-facts dd a:hover { text-decoration-color: currentColor }

/* Three things a reader might equally do, so three buttons the same size.
 *
 * They were three sizes before, which read as a hierarchy that was not
 * meant and put the most weight on the least consequential of them. */
.stop .s-acts {
    margin-top: 26px;
    gap: 10px;
}

.stop .s-acts > * ,
.stop .s-acts .want,
.stop .s-acts .addtrip,
.stop .s-acts button {
    flex: 0 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 11px 18px;
    font-family: var(--sans);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--hairline);
    border-radius: 0;
    text-decoration: none;
    transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}

.stop .s-acts > *:hover,
.stop .s-acts .want:hover,
.stop .s-acts .addtrip:hover,
.stop .s-acts button:hover {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--ground);
}

/* Saved is a state, not a louder button. */
.stop .s-acts .want.on {
    background: var(--forest);
    border-color: var(--forest);
    color: var(--ground);
}

/* Room. The controls sat hard against the last line of the paragraph and
   the whole foot of the stop read as one bunched block. */
.stop .s-body { margin-bottom: 4px }

/* The dashed thread runs down the whole page.
 *
 * The rail is drawn by .stop and continued by .leg, and a margin between
 * them breaks it - a margin is outside the box the rail spans. The same
 * room as padding sits inside it, so the line runs unbroken from the first
 * number to the last. */
.stop + .leg,
.stop .leg {
    margin-top: 0;
    padding-top: 30px;
}

@media (max-width: 700px) {
    .s-facts { padding: 16px 16px; gap: 14px 18px }
    .stop .s-acts > * { flex: 1 1 auto }
}

/* "On a day out" - the itineraries a listing appears on.
 *
 * The link between the two halves of the site. A stop already points at its
 * listing; this points back, so a reader who came in from a search finds the
 * day the place belongs to instead of a dead end. */
.onaday ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.onaday li a {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 16px 18px;
    border: 1px solid var(--hairline-soft);
    text-decoration: none;
    color: inherit;
    transition: border-color .2s var(--ease), background .2s var(--ease);
}

.onaday li a:hover {
    border-color: var(--hairline);
    background: var(--paper, #f6f3ee);
}

.onaday li b {
    font-family: var(--serif);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.3;
}

.onaday li span {
    font-family: var(--sans);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--moss);
}

/* ==================================================================
 * The day as a thing you can use: a map, a clock, and a way to take
 * it with you.
 * ================================================================== */

/* The panel map, which is now a door.
 *
 * A picture of a route invites a click, and there was no reason to answer
 * that click with a different page. The cue only appears on hover, because
 * the map should look like a map first. */
.rp-open {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    overflow: hidden;
}

.rp-open img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 20rem;
    object-fit: cover;
    transition: transform .6s var(--ease);
}

.rp-open:hover img,
.rp-open:focus-visible img { transform: scale(1.02) }

.rp-cue {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 12px 20px;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity .25s var(--ease);
    pointer-events: none;
}

.rp-open:hover .rp-cue,
.rp-open:focus-visible .rp-cue { opacity: 1 }

.rp-open em {
    position: absolute;
    right: 10px;
    bottom: 8px;
    font-family: var(--sans);
    font-size: 8.5px;
    font-style: normal;
    letter-spacing: .06em;
    color: var(--ink);
    opacity: .5;
}

.mapbtn-go {
    background: var(--forest);
    border-color: var(--forest);
    color: var(--ground);
}

/* Two answers side by side under the route: how long it takes, and how to
   carry it. */
.rp-extras {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 24px;
    margin-top: 24px;
    padding-top: 26px;
    border-top: 1px solid var(--hairline-soft);
}

@media (max-width: 820px) {
    .rp-extras { grid-template-columns: 1fr }
}

/* ---- Does it fit? ---- */

.fits-h,
.tt-h {
    margin: 0 0 10px;
    font-family: var(--sans);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--moss);
}

.fits-said {
    margin: 0 0 16px;
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.5;
    color: var(--ink);
}

.fits-said b { font-weight: 500; font-style: italic }

.fits-clock {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 16px;
    background: var(--paper, #f6f3ee);
    border: 1px solid var(--hairline-soft);
}

.fits-clock label {
    font-family: var(--sans);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-55);
}

.fits-clock input[type="time"] {
    padding: 7px 10px;
    font-family: var(--serif);
    font-size: 17px;
    color: var(--ink);
    background: var(--ground);
    border: 1px solid var(--hairline);
    border-radius: 0;
    font-variant-numeric: tabular-nums;
}

/* A short rule doing the work of the word "until". */
.fits-arrow {
    width: 26px;
    height: 1px;
    background: var(--hairline);
}

.fits-end {
    font-family: var(--serif);
    font-size: 17px;
    color: var(--ink);
}

.fits-end b {
    font-weight: 500;
    font-style: italic;
    font-variant-numeric: tabular-nums;
}

.fits-end i { font-size: 13px; opacity: .6 }

.fits-note {
    margin: 12px 0 0;
    font-family: var(--sans);
    font-size: 11px;
    line-height: 1.6;
    color: var(--ink-55);
}

/* ---- Take it with you ---- */

.totake {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.tt-code {
    flex: 0 0 auto;
    width: 118px;
    line-height: 0;
    border: 1px solid var(--hairline-soft);
    padding: 8px;
    background: var(--ground);
}

.tt-code svg { width: 100%; height: auto; display: block }

.tt-words p:not(.tt-h) {
    margin: 0;
    font-family: var(--serif);
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ink-55);
}

/* No point showing a phone a code to scan with itself. */
@media (max-width: 700px) {
    .totake { display: none }
}

/* ==================================================================
 * The full-screen map.
 * ================================================================== */

.daymap {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: flex;
    flex-direction: column;
    background: var(--ground);
}

.dm-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px clamp(14px, 3vw, 30px);
    border-bottom: 1px solid var(--hairline-soft);
}

.dm-t {
    margin: 0;
    font-family: var(--serif);
    font-size: min(clamp(15px, 2vw, 20px), 28px + (clamp(15px, 2vw, 20px) - 28px) * 0.6);
    font-style: italic;
    color: var(--ink);
}

.dm-acts { display: flex; gap: 8px; flex: 0 0 auto }

.dm-acts a,
.dm-acts button {
    padding: 10px 16px;
    font-family: var(--sans);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--hairline);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.dm-acts button:hover,
.dm-acts a:hover { background: var(--ink); color: var(--ground); border-color: var(--ink) }

.dm-body {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr minmax(290px, 26vw);
}

.dm-canvas {
    position: relative;
    align-self: center;
    justify-self: center;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    outline: none;
}

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

/* Our own pin. A numbered disc that grows a name when it is chosen -
   seven names at once would be a mess, one is an answer. */
.dm-pin {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    z-index: 2;
}

.dm-pin b {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--forest);
    color: var(--ground);
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 1px 6px rgba(20, 24, 18, .35);
    transition: transform .18s var(--ease);
}

.dm-pin span {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    font-family: var(--serif);
    font-size: 14px;
    color: var(--ink);
    background: var(--ground);
    border-radius: 0 14px 14px 0;
    transition: max-width .28s var(--ease), padding .28s var(--ease);
    padding: 5px 0;
}

.dm-pin:hover span,
.dm-pin:focus-visible span,
.dm-pin.on span {
    max-width: 15rem;
    padding: 5px 12px 5px 10px;
    box-shadow: 0 1px 6px rgba(20, 24, 18, .18);
}

.dm-pin:hover b,
.dm-pin.on b { transform: scale(1.14) }

.dm-pin.on b { background: var(--ink) }

.dm-credit {
    position: absolute;
    right: 8px;
    bottom: 6px;
    margin: 0;
    font-family: var(--sans);
    font-size: 8.5px;
    letter-spacing: .05em;
    color: var(--ink);
    opacity: .45;
}

.dm-side {
    border-left: 1px solid var(--hairline-soft);
    overflow-y: auto;
    padding: clamp(14px, 2vw, 24px);
}

.dm-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px }

.dm-list button {
    width: 100%;
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 12px 10px;
    text-align: left;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--hairline-soft);
    cursor: pointer;
    font-family: var(--serif);
    font-size: 16px;
    color: var(--ink);
}

.dm-list button:hover { background: var(--paper, #f6f3ee) }

.dm-list b {
    flex: 0 0 auto;
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 700;
    color: var(--moss);
    font-variant-numeric: tabular-nums;
}

.dm-list i {
    display: block;
    margin-top: 3px;
    font-family: var(--sans);
    font-size: 9.5px;
    font-style: normal;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-55);
}

.dm-card img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
    margin-bottom: 14px;
}

.dm-kick {
    margin: 0 0 6px;
    font-family: var(--sans);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--moss);
}

.dm-card h3 {
    margin: 0 0 14px;
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 500;
    line-height: 1.25;
    color: var(--ink);
}

.dm-card h3 em {
    display: inline-block;
    margin-right: 9px;
    font-family: var(--sans);
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    color: var(--moss);
    vertical-align: middle;
}

.dm-card dl { margin: 0 0 16px; display: grid; gap: 10px }
.dm-card dt {
    margin: 0 0 3px;
    font-family: var(--sans);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--moss);
}
.dm-card dd { margin: 0; font-family: var(--serif); font-size: 14.5px; color: var(--ink) }

.dm-go { display: grid; gap: 8px }

.dm-go a,
.dm-go button {
    display: block;
    padding: 11px 14px;
    text-align: center;
    font-family: var(--sans);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink);
    background: transparent;
    border: 1px solid var(--hairline);
    text-decoration: none;
    cursor: pointer;
}

.dm-go a:first-child { background: var(--forest); border-color: var(--forest); color: var(--ground) }

@media (max-width: 860px) {
    .dm-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr }
    .dm-side { border-left: 0; border-top: 1px solid var(--hairline-soft) }
}

/* ==================================================================
 * Following the day, in the car.
 * ================================================================== */

.onday {
    position: fixed;
    inset: 0;
    z-index: 410;
    display: flex;
    flex-direction: column;
    background: var(--ink);
    color: var(--ground);
}

.od-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px clamp(14px, 4vw, 28px);
}

.od-count {
    font-family: var(--sans);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .65;
}

.od-bar button {
    padding: 9px 15px;
    font-family: var(--sans);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ground);
    background: none;
    border: 1px solid rgba(255, 255, 255, .3);
    cursor: pointer;
}

.od-in {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.od-shot {
    width: 100%;
    max-height: 46vh;
    object-fit: cover;
    display: block;
}

.od-words { padding: clamp(18px, 5vw, 34px) }

.od-kick {
    margin: 0 0 8px;
    font-family: var(--sans);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .6;
}

.od-words h2 {
    margin: 0 0 20px;
    font-family: var(--serif);
    font-size: min(clamp(26px, 6vw, 40px), 28px + (clamp(26px, 6vw, 40px) - 28px) * 0.6);
    font-weight: 400;
    line-height: 1.15;
    color: var(--ground);
}

.od-facts { margin: 0 0 22px; display: grid; gap: 14px }
.od-facts dt {
    margin: 0 0 3px;
    font-family: var(--sans);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .55;
}
.od-facts dd { margin: 0; font-family: var(--serif); font-size: 17px }

/* The one button that matters when you are sitting in a lay-by. */
.od-dir {
    display: inline-block;
    padding: 15px 26px;
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--ground);
    text-decoration: none;
}

.od-foot {
    flex: 0 0 auto;
    display: flex;
    gap: 10px;
    padding: 14px clamp(14px, 4vw, 28px) calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(255, 255, 255, .16);
}

.od-foot button {
    flex: 1 1 auto;
    min-height: 52px;
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ground);
    background: none;
    border: 1px solid rgba(255, 255, 255, .3);
    cursor: pointer;
}

.od-foot button:disabled { opacity: .3; cursor: default }

.od-next {
    flex: 2 1 auto !important;
    background: var(--forest) !important;
    border-color: var(--forest) !important;
}

.od-next i {
    display: block;
    margin-top: 4px;
    font-size: 9px;
    font-style: normal;
    font-weight: 500;
    opacity: .75;
}

@media (prefers-reduced-motion: reduce) {
    .rp-open img, .dm-pin b, .dm-pin span { transition: none }
}

/* How you get to the next one.
 *
 * The mode is the first thing said, because "drive" and "walk" ask
 * completely different things of a reader with a day to plan. Where a hop
 * is short enough to be worth walking, both are offered - the alternative
 * set quietly under the main line rather than competing with it. */
.leg-how {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

/* Drawn rather than written: a long dash for a road, a dotted one for a
   path. Two marks a reader reads without being taught them. */
.leg-how i {
    display: block;
    width: 22px;
    height: 0;
    border-top: 2px solid var(--moss);
    opacity: .8;
}

.leg-how.on-foot i {
    border-top-style: dotted;
    border-top-width: 2px;
}

/* "Or twelve minutes on foot" - an offer, on its own line. */
.leg-walk {
    display: block;
    margin-top: 6px;
    font-family: var(--sans);
    font-style: normal;
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--moss);
    opacity: .85;
}

.leg-walk b {
    font-weight: 600;
    letter-spacing: inherit;
    margin: 0;
    color: inherit;
}

/* ------------------------------------------------------------------
 * The spine of the page, and the things hung on it.
 * ------------------------------------------------------------------ */

/* The dashed thread.
 *
 * It was drawn at sixteen per cent black, which on this cream is very
 * nearly nothing - correct as a hairline between cards, far too polite for
 * the one line that says these seven stops are a single day. Darkened, and
 * the dashes lengthened so they read as a route rather than a texture. */
.stop::before,
.leg::before {
    border-left-color: var(--hairline, rgba(65, 64, 66, .34)) !important;
    border-left-style: dashed !important;
    border-left-width: 1px !important;
    opacity: .55;
}

/* The drive to the next one, said in as few marks as possible.
 *
 * The words "to the next stop" have gone: the next stop is directly below,
 * and a line that explains what the reader can see is a line to cut. */
.leg {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
}

.leg-far {
    font-family: var(--serif);
    font-style: italic;
    font-size: 13.5px;
    color: var(--ink-55);
    font-variant-numeric: tabular-nums;
}

.leg-walk {
    flex-basis: 100%;
    margin-top: 2px;
}

/* One mark, not three.
 *
 * The component draws a bookmark; a heart had been typed into the label as
 * well, and a question mark after it, on a button half again the size of
 * the one beside it. */
.icard .want,
.stop .s-acts .want {
    min-height: 40px;
    padding: 10px 16px;
    font-family: var(--sans);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    gap: 7px;
}

.icard .want svg,
.stop .s-acts .want svg {
    width: 11px;
    height: auto;
    flex: 0 0 auto;
}

/* Both buttons on a card are the same height, so the row reads as a row. */
.icard .want,
.icard .addtrip,
.icard .read {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ---- Where this goes ---- */

.it-regions {
    padding: clamp(30px, 5vh, 54px) 0;
    border-top: 1px solid var(--hairline-soft);
}

.it-reglinks {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 12px 0 0;
}

.it-reglinks a {
    display: inline-flex;
    align-items: center;
    padding: 11px 20px;
    border: 1px solid var(--hairline);
    font-family: var(--serif);
    font-size: 16px;
    color: var(--ink);
    text-decoration: none;
    transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}

.it-reglinks a:hover {
    background: var(--forest);
    border-color: var(--forest);
    color: var(--ground);
}

.it-regnote {
    max-width: 46ch;
    margin: 14px 0 0;
    font-family: var(--serif);
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--ink-55);
}

/* The writer, at the top of their own article.
 *
 * Small - it is a byline, not a portrait - but present, because a face is
 * how the page says a person went and did this. */
.byline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.by-face {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    filter: saturate(.92);
}

.byline a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--hairline);
}

.byline a:hover { text-decoration-color: currentColor }

.by-where {
    display: block;
    margin-top: 2px;
    font-family: var(--sans);
    font-size: 9px;
    font-style: normal;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-55);
}

/* ---- Take it with you ----
 *
 * It sat on its own in a wide band with nothing beside it, which made a
 * small square of black-and-white look like a mistake. Given a ground, a
 * rule and a width so it reads as a deliberate aside. */
/* It sat hard left in a full-width band with nothing beside it, which read
   as something that had come loose. Centred, and held to a width that
   matches the column of prose above it. */
.rp-extras {
    grid-template-columns: 1fr;
    justify-items: center;
}

.totake {
    align-items: center;
    max-width: 30rem;
    padding: 20px 22px;
    background: var(--paper, #f6f3ee);
    border: 1px solid var(--hairline-soft);
}

.tt-code {
    width: 96px;
    border: 0;
    padding: 0;
    background: none;
}

.tt-words p:not(.tt-h) { max-width: 34ch }

/* ==================================================================
 * The Spread — the printed shape.
 * One measure, questions and answers in a column, photographs breaking
 * it where the magazine broke it.
 * ================================================================== */

.mg-spread .mg-qa {
    max-width: 34rem;
    margin: 0 auto clamp(30px, 4.5vh, 46px);
    padding: 0 clamp(18px, 5vw, 24px);
}

/* A hairline above each question, the way a printed page rules them off. */
.mg-spread .mg-qa + .mg-qa .mg-q { padding-top: 26px; border-top: 1px solid var(--hairline-soft) }

/* ==================================================================
 * The Conversation — the web shape.
 * A photograph sits with the answer it belongs to. Print cannot do this;
 * it has to put the picture where the page has room.
 * ================================================================== */

.mg-conv .mg-turn {
    max-width: 34rem;
    margin: 0 auto clamp(30px, 4.5vh, 46px);
    padding: 0 clamp(18px, 5vw, 24px);
}

/* Where a portrait comes with the answer, the pair widens out of the
   measure and sits side by side. */
.mg-conv .mg-withshot {
    max-width: 62rem;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(24px, 4vw, 54px);
    align-items: center;
    margin-top: clamp(34px, 5vh, 60px);
    margin-bottom: clamp(34px, 5vh, 60px);
}

.mg-conv .mg-beside { margin: 0 }
.mg-conv .mg-beside img { display: block; width: 100%; height: auto }

/* Alternate which side the picture falls on, so a long interview does not
   read as a list. */
.mg-conv .mg-withshot:nth-of-type(even) .mg-said { order: 2 }

@media (max-width: 860px) {
    .mg-conv .mg-withshot { grid-template-columns: 1fr; max-width: 34rem }
    .mg-conv .mg-withshot .mg-said { order: 0 !important }
}

/* ---- next in the issue ---- */

.mg-next {
    max-width: 46rem;
    margin: clamp(50px, 9vh, 110px) auto clamp(40px, 7vh, 80px);
    padding: 0 clamp(18px, 5vw, 24px);
}

.mg-next a {
    display: block;
    padding: clamp(24px, 4vh, 38px) clamp(22px, 4vw, 34px);
    border: 1px solid var(--hairline);
    text-decoration: none;
    color: inherit;
    transition: background .25s var(--ease), border-color .25s var(--ease);
}

.mg-next a:hover { background: var(--paper, #f6f3ee); border-color: var(--ink) }

.mg-next b {
    display: block;
    font-family: var(--serif);
    font-size: min(clamp(20px, 2.4vw, 28px), 28px + (clamp(20px, 2.4vw, 28px) - 28px) * 0.6);
    font-weight: 400;
    line-height: 1.2;
    color: var(--ink);
}

.mg-next span {
    display: block;
    margin-top: 10px;
    font-family: var(--serif);
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-55);
}

/* ==================================================================
 * A magazine piece, made for a screen.
 *
 * Every name here is prefixed hsm- and was checked against the whole
 * design system before it was used. No bare element is styled: the
 * previous attempt used a <header>, which _shared.css makes sticky, and
 * the title followed the reader down the page.
 *
 * The type is set at magazine scale rather than web-article scale. A
 * headline that is smaller than the photograph under it tells the reader
 * the photograph matters more, which on a written piece is a lie.
 * ================================================================== */

.hsm { background: var(--ground) }

/* ---- the opening view ------------------------------------------- */

.hsm-open {
    position: relative;
    min-height: min(62vh, 600px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: #2B301D;
}

.hsm-open-shot {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
}

/* Dark at the foot so the type has somewhere to sit, clear at the top so
   the photograph is still a photograph. */
.hsm-open-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(12,14,11,.86) 0%,
        rgba(12,14,11,.55) 34%,
        rgba(12,14,11,.12) 62%,
        rgba(12,14,11,.30) 100%);
}

.hsm-open-in {
    position: relative;
    width: 100%;
    max-width: 60rem;
    margin: 0 auto;
    /* Room at the top. The contents sit at the bottom of the hero, which is
       right until a headline runs to four lines: then the block grows
       upward until the issue plate is jammed under the navigation. */
    padding: clamp(56px, 8vh, 84px) clamp(20px, 5vw, 48px) clamp(32px, 5vh, 56px);
    color: #F6F3EE;
    text-align: center;
}

/* The issue plate. Said before the headline, because where a piece came
   from is part of what it is - and because this is the thing that makes it
   feel like something you were given rather than something you found. */
/* The issue plate: the printed object, and what it is.
 *
 * Showing the magazine does the work a sentence cannot - the reader sees at
 * a glance that this was made for paper first, and that there is a copy of
 * it they could hold. */
.hsm-plate-of {
    display: inline-flex;
    align-items: center;
    gap: clamp(14px, 2vw, 22px);
    margin: 0 0 clamp(24px, 4.4vh, 42px);
    padding: 13px 22px 13px 14px;
    border: 1px solid rgba(246,243,238,.34);
    background: rgba(12,14,11,.28);
    backdrop-filter: blur(3px);
}

.hsm-plate-cover {
    display: block;
    width: clamp(46px, 5vw, 66px);
    height: auto;
    flex: 0 0 auto;
    box-shadow: 0 6px 20px rgba(0,0,0,.45);
}

.hsm-plate-said {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
    text-align: left;
}

.hsm-plate-said i {
    font-family: var(--sans);
    font-style: normal;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .34em;
    text-transform: uppercase;
    opacity: .72;
}

.hsm-plate-said b {
    font-family: var(--serif);
    font-size: min(clamp(19px, 2.2vw, 25px), 28px + (clamp(19px, 2.2vw, 25px) - 28px) * 0.6);
    font-weight: 400;
    font-style: italic;
    letter-spacing: .01em;
}

.hsm-plate-said span {
    font-family: var(--sans);
    font-size: 8.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    opacity: .6;
}

.hsm-open-in h1 {
    margin: 0;
    font-family: var(--serif);
    /* Capped at 88px: at 116px two lines of headline were a quarter of a
       900px screen on their own, and the page began below the fold. */
    font-size: min(clamp(44px, 6.2vw, 88px), 28px + (clamp(44px, 6.2vw, 88px) - 28px) * 0.6);
    font-weight: 400;
    line-height: .98;
    letter-spacing: -0.022em;
    text-wrap: balance;
    color: #FBF9F6;
}

.hsm-stand {
    max-width: 40rem;
    margin: clamp(22px, 3.4vh, 34px) auto 0;
    font-family: var(--serif);
    font-size: min(clamp(18px, 1.85vw, 24px), 28px + (clamp(18px, 1.85vw, 24px) - 28px) * 0.6);
    font-style: italic;
    line-height: 1.56;
    color: rgba(246,243,238,.86);
    text-wrap: pretty;
}

.hsm-by {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: clamp(26px, 4vh, 40px) 0 0;
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(246,243,238,.62);
}

.hsm-by b { font-weight: 600; color: #FBF9F6; margin-left: 8px }
.hsm-by em { width: 30px; height: 1px; background: rgba(246,243,238,.34) }

.hsm-open-credit {
    position: absolute;
    right: clamp(14px, 3vw, 26px);
    bottom: 12px;
    margin: 0;
    font-family: var(--sans);
    font-size: 8.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(246,243,238,.5);
}

/* ---- the writing ------------------------------------------------- */

.hsm-body { padding: clamp(56px, 10vh, 130px) 0 0 }

.hsm-prose,
.hsm-turn {
    max-width: 38rem;
    margin: 0 auto;
    padding: 0 clamp(20px, 5vw, 24px);
}

.hsm-prose p {
    margin: 0 0 1.1em;
    font-family: var(--serif);
    font-size: clamp(18px, 1.5vw, 21px);
    line-height: 1.74;
    color: var(--ink);
    text-wrap: pretty;
}

/* The oldest signal in printing that a piece has begun. */
/* Whether a block opens the piece is decided where the length is known,
   which is in the builder. This just draws it. */
.hsm-lede p:first-child::first-letter {
    float: left;
    font-family: var(--serif);
    font-size: min(4.6em, 28px + (4.6em - 28px) * 0.6);
    line-height: .78;
    padding: .05em .1em 0 0;
    color: var(--forest);
}

.hsm-lede { margin-bottom: clamp(40px, 6vh, 76px) }

/* ---- the movements ---- */

.hsm-mv {
    max-width: 38rem;
    margin: clamp(56px, 9vh, 116px) auto clamp(30px, 4.5vh, 50px);
    padding: 0 clamp(20px, 5vw, 24px);
    text-align: center;
}

.hsm-mv-n {
    display: block;
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .3em;
    color: var(--moss);
    margin-bottom: 14px;
}

.hsm-mv h2 {
    margin: 0;
    font-family: var(--serif);
    font-size: min(clamp(30px, 4.4vw, 54px), 28px + (clamp(30px, 4.4vw, 54px) - 28px) * 0.6);
    font-weight: 400;
    font-style: italic;
    line-height: 1.06;
    letter-spacing: -0.012em;
    color: var(--ink);
    text-wrap: balance;
}

.hsm-mv p {
    max-width: 26rem;
    margin: 14px auto 0;
    font-family: var(--sans);
    font-size: 12px;
    line-height: 1.65;
    letter-spacing: .02em;
    color: var(--ink-55);
}

/* A hairline under the movement title, the width of the measure. */
.hsm-mv::after {
    content: "";
    display: block;
    width: 46px;
    height: 1px;
    margin: clamp(22px, 3.4vh, 34px) auto 0;
    background: var(--hairline);
}

/* ---- question and answer ---- */

.hsm-turn { margin-bottom: clamp(44px, 7vh, 84px) }

/* The interviewer's voice.
 *
 * It was italic serif in green - the same family and nearly the same colour
 * as the answers, so the two speakers read as one. The sans, set heavy and
 * large, makes the change of voice visible before a word is read, which is
 * the whole job of typography in an interview. */
.hsm-q {
    margin: 0 0 20px;
    font-family: var(--serif);
    font-size: clamp(19px, 1.68vw, 24px);
    font-weight: 700;
    font-style: normal;
    line-height: 1.32;
    letter-spacing: -0.006em;
    color: var(--ink);
    text-wrap: pretty;
}

/* The join between turns.
 *
 * A gap on its own reads as something missing. A number and a rule read as
 * one thing ending and the next beginning - and they give a long interview
 * a sense of how far through it you are. */
.hsm-n {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 18px;
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .26em;
    color: var(--moss);
    font-variant-numeric: tabular-nums;
}

.hsm-n::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--hairline-soft);
}

.hsm-a p {
    margin: 0 0 1.05em;
    font-family: var(--serif);
    font-size: clamp(17.5px, 1.42vw, 20px);
    line-height: 1.76;
    color: var(--ink);
    text-wrap: pretty;
}

.hsm-a p:last-child { margin-bottom: 0 }

/* Where a portrait comes with an answer, the pair steps out of the measure
   and the two sit together - the thing print cannot do, because print has
   to put the photograph where the page has room. */
.hsm-pair {
    max-width: 70rem;
    margin: clamp(44px, 7vh, 92px) auto;
    padding: 0 clamp(20px, 5vw, 40px);
    display: grid;
    grid-template-columns: 1fr 0.86fr;
    gap: clamp(26px, 4.4vw, 64px);
    align-items: center;
}

.hsm-pair-shot { margin: 0 }
.hsm-pair-shot img { display: block; width: 100%; height: auto }

.hsm-pair:nth-of-type(even) .hsm-pair-words { order: 2 }

/* ---- plates ---- */

/* A plate is a picture to look at, not a wall. At most 72rem wide and
   three-quarters of the screen tall - checked in an 800px pane it was a
   photograph, on a 1920px screen the same 100% was a picture nobody could
   read as one. Never cropped: the band takes the shape of whatever is in
   it, and a portrait keeps its face. */
.hsm-plate {
    max-width: 72rem;
    margin: clamp(48px, 8vh, 110px) auto;
    padding: 0 clamp(20px, 5vw, 40px);
}

.hsm-plate img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 75vh;
    margin: 0 auto;
}

/* A body that opens on a plate: the plate keeps the body's own beat after
   the hero and adds none of its own. */
.hsm-body > :first-child > .hsm-plate,
.hsm-body > :first-child .hsm-plate:first-child {
    margin-top: 0;
}

.hsm-plate figcaption,
.hsm-pair-shot figcaption {
    padding: 9px clamp(20px, 5vw, 40px) 0;
    font-family: var(--sans);
    font-size: 8.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-55);
}

/* ---- the quotation, given the view ---- */

.hsm-say {
    position: relative;
    min-height: min(80vh, 720px);
    display: grid;
    place-items: center;
    margin: clamp(56px, 9vh, 120px) 0;
    overflow: hidden;
    background: var(--forest);
}

.hsm-say img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .34;
}

.hsm-say-in {
    position: relative;
    max-width: 40rem;
    padding: clamp(30px, 6vh, 60px) clamp(24px, 6vw, 48px);
    text-align: center;
    color: #FBF9F6;
}

.hsm-say-in p {
    margin: 0;
    font-family: var(--serif);
    font-size: min(clamp(26px, 4.2vw, 52px), 28px + (clamp(26px, 4.2vw, 52px) - 28px) * 0.6);
    font-style: italic;
    line-height: 1.22;
    letter-spacing: -0.012em;
    text-wrap: balance;
}

.hsm-say-in cite {
    display: block;
    margin-top: clamp(22px, 3.4vh, 34px);
    font-family: var(--sans);
    font-size: 9.5px;
    font-style: normal;
    letter-spacing: .24em;
    text-transform: uppercase;
    opacity: .72;
}

/* ---- where it came from ---- */

.hsm-kick {
    margin: 0 0 12px;
    font-family: var(--sans);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--moss);
}

/* The panel of places already sets the distance from the writing. This
   was adding its own on top of it, and on a roundup the last entry added a
   third - three stacked margins and a screen of nothing between the final
   photograph and this. */
.hsm-printed {
    margin: clamp(30px, 5vh, 64px) 0 0;
    padding: clamp(34px, 5vh, 60px) clamp(20px, 5vw, 40px);
    border-top: 1px solid var(--hairline-soft);
    border-bottom: 1px solid var(--hairline-soft);
    background: var(--paper, #f6f3ee);
}

.hsm-printed-in { max-width: 36rem; margin: 0 auto; text-align: center }

.hsm-printed-in h3 {
    margin: 0 0 16px;
    font-family: var(--serif);
    font-size: min(clamp(26px, 3.4vw, 40px), 28px + (clamp(26px, 3.4vw, 40px) - 28px) * 0.6);
    font-weight: 400;
    line-height: 1.14;
    color: var(--ink);
    text-wrap: balance;
}

.hsm-printed-in p {
    margin: 0;
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.7;
    color: var(--ink-55);
}

.hsm-printed-acts {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: clamp(24px, 4vh, 34px) !important;
}

.hsm-btn {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 14px 26px;
    font-family: var(--sans);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ground);
    background: var(--forest);
    border: 1px solid var(--forest);
    transition: background .22s var(--ease), color .22s var(--ease);
}

.hsm-btn:hover { background: var(--ink); border-color: var(--ink) }

.hsm-btn-quiet {
    color: var(--ink);
    background: transparent;
    border-color: var(--hairline);
}

.hsm-btn-quiet:hover { background: var(--ink); color: var(--ground) }

/* ---- keep reading ---- */

.hsm-next {
    position: relative;
    display: grid;
    place-items: center;
    min-height: min(50vh, 440px);
    overflow: hidden;
    background: #2B301D;
    text-decoration: none;
}

.hsm-next img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.1s var(--ease);
}

.hsm-next:hover img { transform: scale(1.035) }

.hsm-next-veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(12,14,11,.88), rgba(12,14,11,.42));
}

.hsm-next-in {
    position: relative;
    max-width: 40rem;
    padding: clamp(34px, 6vh, 64px) clamp(24px, 6vw, 40px);
    text-align: center;
    color: #FBF9F6;
}

.hsm-next-in .hsm-kick { color: rgba(246,243,238,.72) }

.hsm-next-in b {
    display: block;
    font-family: var(--serif);
    font-size: min(clamp(30px, 5vw, 60px), 28px + (clamp(30px, 5vw, 60px) - 28px) * 0.6);
    font-weight: 400;
    line-height: 1.06;
    letter-spacing: -0.018em;
    text-wrap: balance;
}

.hsm-next-in em {
    display: block;
    max-width: 32rem;
    margin: 16px auto 0;
    font-family: var(--serif);
    font-size: 16.5px;
    font-style: italic;
    line-height: 1.6;
    color: rgba(246,243,238,.8);
}

.hsm-next-go {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: clamp(26px, 4vh, 38px);
    padding: 14px 28px;
    font-family: var(--sans);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #2B301D;
    background: #FBF9F6;
}

.hsm-next-go i { font-style: normal; transition: transform .3s var(--ease) }
.hsm-next:hover .hsm-next-go i { transform: translateX(5px) }

@media (max-width: 860px) {
    .hsm-pair { grid-template-columns: 1fr; max-width: 38rem }
    .hsm-pair .hsm-pair-words { order: 0 !important }
}

@media (prefers-reduced-motion: reduce) {
    .hsm-next img, .hsm-next-go i { transition: none }
}

/* The printed pages.
 *
 * Shown at an angle to each other so they read as objects on a table rather
 * than screenshots, and lifted off the ground with a shadow. The crop marks
 * and folios are left in on purpose - they are the proof. */
.hsm-spreads {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(16px, 3vw, 34px);
    max-width: 52rem;
    margin: clamp(30px, 5vh, 46px) auto 0;
}

.hsm-spreads figure { margin: 0 }

.hsm-spreads img {
    display: block;
    width: 100%;
    height: auto;
    background: #fff;
    box-shadow: 0 10px 34px rgba(20, 22, 18, .16);
    transition: transform .45s var(--ease);
}

.hsm-spreads figure:first-child img { transform: rotate(-1.1deg) }
.hsm-spreads figure:last-child img { transform: rotate(.9deg) }
.hsm-spreads figure img:hover { transform: rotate(0) scale(1.015) }

.hsm-spreads figcaption {
    margin-top: 12px;
    font-family: var(--sans);
    font-size: 8.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-55);
    text-align: center;
}

.hsm-printed { text-align: center }

@media (max-width: 700px) {
    .hsm-spreads { grid-template-columns: 1fr }
}

@media (prefers-reduced-motion: reduce) {
    .hsm-spreads img { transition: none }
}

/* Places in this piece.
 *
 * The end of an article is the one moment a reader has finished something
 * and is deciding what to do next, so this is given room rather than
 * squeezed in as a list of links. Pictures for the listings, because they
 * are things to go and look at; a quiet line for the regions, because a
 * region is a starting point and giving it a photograph too would make the
 * panel read as a grid of equal things. */
.hsm-been {
    max-width: 60rem;
    /* The same measure both sides. With nothing underneath, the last card's
       name sat hard against whatever the page did next. */
    margin: clamp(36px, 6vh, 72px) auto;
    padding: 0 clamp(20px, 5vw, 40px);
}

/* A rail rather than a grid.
 *
 * Centring the cards left the heading above them hanging out to the left of
 * everything it belonged to, and a roundup naming twenty-four places came
 * out as eight rows of them - a second article at the end of the article.
 * As a rail the cards begin where the heading begins, and the ones that do
 * not fit run off the right and scroll, snapping one at a time.
 *
 * The scrollbar stays visible. A rail nobody knows they can move is a rail
 * with things hidden behind it. */
.hsm-been-list {
    list-style: none;
    margin: clamp(18px, 3vh, 26px) 0 0;
    padding: 0 0 14px;
    display: flex;
    gap: clamp(18px, 3vw, 30px);
    /* To the top. A flex row stretches its items, so one place with a long
       description made every other card as tall as itself and filled them
       with nothing. */
    align-items: start;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    /* Thin, and in the page's colours. Left as the operating system draws
       it, this was a full-width grey control across the foot of the
       article. */
    scrollbar-width: thin;
    scrollbar-color: var(--hairline) transparent;
    /* The rail runs to the edge of the panel and no further, so the page
       itself never scrolls sideways. */
    overscroll-behavior-x: contain;
}

.hsm-been-list > li {
    flex: 0 0 clamp(14rem, 42vw, 17rem);
    scroll-snap-align: start;
}

.hsm-been-list::-webkit-scrollbar { height: 6px }
.hsm-been-list::-webkit-scrollbar-track { background: transparent }
.hsm-been-list::-webkit-scrollbar-thumb {
    background: var(--hairline);
    border-radius: 3px;
}

/* Where everything fits there is nothing to scroll, and a rail that cannot
   move should not offer a handle. */
.hsm-been-list:not(:hover)::-webkit-scrollbar-thumb { background: var(--hairline-soft) }

.hsm-been-list a {
    display: block;
    text-decoration: none;
    color: inherit;
}

.hsm-been-shot {
    display: block;
    overflow: hidden;
    background: var(--hairline-soft);
    aspect-ratio: 4 / 3;
}

.hsm-been-shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--ease);
}

.hsm-been-list a:hover .hsm-been-shot img { transform: scale(1.04) }

.hsm-been-blank { display: block; width: 100%; height: 100% }

.hsm-been-list b {
    display: block;
    margin-top: 14px;
    font-family: var(--serif);
    font-size: min(clamp(19px, 2vw, 22px), 28px + (clamp(19px, 2vw, 22px) - 28px) * 0.6);
    font-weight: 500;
    line-height: 1.2;
}

.hsm-been-list i {
    display: block;
    margin-top: 5px;
    font-family: var(--sans);
    font-style: normal;
    font-size: 9px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-55);
}

.hsm-been-list em {
    display: block;
    margin-top: 8px;
    font-style: normal;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--ink-75);
}

/* The regions. One line, set quietly, separated by the space between them
   rather than by bullets or slashes. */
.hsm-been-more {
    margin: clamp(26px, 4vh, 38px) 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--hairline);
    font-family: var(--sans);
    font-size: 13px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 18px;
}

/* Its own line, the way the heading above the cards is set, rather than
   two words tucked in front of the first link. */
.hsm-been-more span {
    flex: 0 0 100%;
    font-size: 9px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-55);
    margin-bottom: 2px;
}

.hsm-been-more a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--hairline);
    padding-bottom: 1px;
    transition: border-color .25s var(--ease), color .2s;
}

.hsm-been-more a:hover { color: var(--moss); border-bottom-color: var(--moss) }

/* Links inside the prose are .inlink, which is already set the way a well
   made book marks a cross-reference. Nothing to add here. */

@media (prefers-reduced-motion: reduce) {
    .hsm-been-shot img { transition: none }
}

/* An upright photograph.
 *
 * Full width suits a landscape and ruins a portrait: the frame becomes a
 * wall the reader has to scroll past, and the subject ends up smaller on the
 * page than it would have been in a column. So a tall frame takes a column,
 * centred, at about the measure of the text it interrupts. */
.hsm-plate-tall {
    max-width: 34rem;
    margin-left: auto;
    margin-right: auto;
    padding: 0 clamp(20px, 5vw, 40px);
}

/* Two upright frames, set as facing pages.
 *
 * Nothing is cropped to make them match. A crop on a portrait takes the top
 * off, and the top of a portrait is the face - so they are aligned at the
 * top and left at their own proportions, which for two frames off the same
 * shoot is near enough the same shape anyway. On a phone there is no room
 * for two, so they stack. */
.hsm-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: clamp(10px, 2vw, 22px);
    margin: clamp(34px, 6vh, 70px) auto;
    max-width: 72rem;
    padding: 0 clamp(20px, 5vw, 40px);
}

.hsm-two figure { margin: 0; min-width: 0 }

/* One shape for both, so the pair ends on the same line whatever it is
   given. Anchored above centre: where there is a person in the frame they
   are near the top, and a crop that takes a head off is worse than any
   amount of ragged edge. */
.hsm-two img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: 50% 32%;
}

.hsm-two figcaption {
    margin-top: 10px;
    font-family: var(--sans);
    font-size: 8.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-55);
}

@media (max-width: 620px) {
    /* Stacked, there is no pair to align, so nothing is cropped. */
    .hsm-two { grid-template-columns: 1fr }
    .hsm-two img { aspect-ratio: auto; object-fit: fill; height: auto }
}

/* ---- the desk: listings waiting to be judged ----------------------------
 *
 * A working screen, not a page. Everything needed to make one decision sits
 * on one card, and the two answers are next to each other so going through
 * forty of them is forty keystrokes rather than forty page loads. */

.vet {
    max-width: 58rem;
    margin: 0 auto;
    padding: clamp(30px, 6vh, 60px) clamp(18px, 4vw, 36px) 20vh;
    font-family: var(--sans);
    color: var(--ink);
}

.vet-top h1 {
    font-family: var(--serif);
    font-size: min(clamp(30px, 4.4vw, 46px), 28px + (clamp(30px, 4.4vw, 46px) - 28px) * 0.6);
    font-weight: 500;
    line-height: 1.05;
    margin: 6px 0 14px;
}

.vet-kick {
    font-size: 9px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink-55);
    margin: 0;
}

.vet-lede {
    max-width: 42rem;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-75);
    margin: 0 0 22px;
}

/* Which pile you are looking at. */
.vet-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    border-bottom: 1px solid var(--hairline);
    padding-bottom: 14px;
    margin-bottom: 26px;
}

.vet-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    font-size: 11.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ink-75);
}

.vet-tabs a.is-on {
    background: var(--forest);
    border-color: var(--forest);
    color: #fff;
}

.vet-tabs b {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    opacity: .75;
}

.vet-list {
    display: flex;
    flex-direction: column;
    gap: clamp(18px, 3vh, 30px);
}

.vet-card {
    border: 1px solid var(--hairline);
    padding: clamp(18px, 3vw, 28px);
    background: var(--paper);
}

.vet-card h2 {
    font-family: var(--serif);
    font-size: min(clamp(21px, 2.4vw, 26px), 28px + (clamp(21px, 2.4vw, 26px) - 28px) * 0.6);
    font-weight: 500;
    margin: 0 0 4px;
}

.vet-where {
    font-size: 13px;
    color: var(--ink-75);
    margin: 0 0 12px;
    line-height: 1.5;
}

.vet-where a { color: inherit }

.vet-quiet {
    font-size: 12.5px;
    color: var(--ink-55);
    margin: 0 0 10px;
}

/* What the gates measured. Kept small: it explains the ranking, it does not
   make the decision. */
.vet-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    font-size: 12px;
    color: var(--ink-75);
    margin: 0 0 14px;
    font-variant-numeric: tabular-nums;
}

.vet-conf { color: var(--ink-55) }
.vet-failed { color: #682114 }

/* The reason any of this is happening. */
.vet-said {
    margin: 0 0 16px;
    padding: 14px 0 0;
    border-top: 1px solid var(--hairline);
    font-family: var(--serif);
    font-size: 16.5px;
    line-height: 1.55;
}

.vet-said cite {
    display: block;
    margin-top: 8px;
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-style: normal;
    color: var(--ink-55);
}

.vet-said cite a { color: inherit }

.vet-look {
    appearance: none;
    background: none;
    border: 1px dashed var(--hairline);
    padding: 9px 15px;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-55);
    cursor: pointer;
    margin-bottom: 14px;
}

.vet-look:hover { color: var(--moss); border-color: var(--moss) }

.vet-shots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 8px;
    margin-bottom: 16px;
}

.vet-shots figure { margin: 0 }

.vet-shots img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.vet-shots figcaption {
    margin-top: 5px;
    font-size: 9px;
    color: var(--ink-55);
    line-height: 1.3;
}

/* The two answers, side by side, because that is the whole job. */
.vet-acts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--hairline);
}

.vet-acts button {
    appearance: none;
    cursor: pointer;
    font-family: var(--sans);
    font-size: 11.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 11px 18px;
    border: 1px solid transparent;
}

.vet-yes {
    background: var(--forest);
    color: #fff;
}

.vet-yes:hover { background: var(--moss) }

.vet-no-wrap {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    margin-left: auto;
}

.vet-no-wrap select {
    appearance: none;
    border: 1px solid var(--hairline);
    border-right: 0;
    background: transparent;
    font-family: var(--sans);
    font-size: 12px;
    color: var(--ink-75);
    padding: 0 12px;
    max-width: 17rem;
}

.vet-no {
    background: transparent;
    border-color: var(--hairline) !important;
    color: var(--ink-75);
}

.vet-no:hover { color: #682114; border-color: #682114 !important }

.vet-undo {
    background: transparent;
    border-color: var(--hairline) !important;
    color: var(--ink-55);
    margin-left: auto;
}

.vet-empty {
    padding: 60px 0;
    text-align: center;
    color: var(--ink-55);
    font-family: var(--serif);
    font-size: 19px;
}

/* What the refusals have taught it. */
.vet-rules {
    margin-top: clamp(50px, 9vh, 90px);
    padding-top: 26px;
    border-top: 1px solid var(--hairline);
}

.vet-rules h2 {
    font-family: var(--serif);
    font-size: 23px;
    font-weight: 500;
    margin: 0 0 8px;
}

.vet-rules ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vet-rules li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--hairline-soft);
    font-size: 12.5px;
}

.vet-rules li b { font-weight: 600 }

.vet-rules li i {
    font-style: normal;
    font-size: 9px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-55);
}

.vet-rules li em {
    font-style: normal;
    color: var(--ink-75);
}

.vet-never { color: #682114 }

.vet-taught {
    margin-left: auto;
    color: var(--ink-55);
    font-variant-numeric: tabular-nums;
}

.vet-rules li button {
    appearance: none;
    background: none;
    border: 0;
    padding: 0 0 0 10px;
    font-family: var(--sans);
    font-size: 11px;
    color: var(--ink-55);
    cursor: pointer;
    text-decoration: underline;
}

.vet-rules li button:hover { color: #682114 }

@media (max-width: 620px) {
    .vet-no-wrap { margin-left: 0; width: 100% }
    .vet-no-wrap select { flex: 1 }
}

/* Where to go next.
 *
 * At the foot of a feature this is the last thing on the page before the
 * magazine plate, and it is the only place in the piece where a link is
 * allowed to look like a link - everywhere else the reading comes first. */
.hsm-go {
    max-width: 34rem;
    margin: clamp(40px, 7vh, 76px) auto clamp(20px, 4vh, 40px);
    padding: clamp(22px, 4vh, 34px) clamp(20px, 5vw, 40px);
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    text-align: center;
}

.hsm-go .hsm-kick { margin: 0 0 12px }

.hsm-go-links {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 22px;
}

.hsm-go-links a {
    font-family: var(--serif);
    font-size: min(clamp(17px, 2vw, 20px), 28px + (clamp(17px, 2vw, 20px) - 28px) * 0.6);
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--hairline);
    padding-bottom: 2px;
    transition: color .2s var(--ease), border-color .2s var(--ease);
}

.hsm-go-links a:hover { color: var(--moss); border-bottom-color: var(--moss) }

/* The same thing under one entry of a list, set quietly - there are twelve
   of them on the page and twelve shouting links is a directory. */
.hsm-entry-go {
    margin: 14px 0 0;
    font-family: var(--sans);
}

.hsm-entry-go a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 9.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-55);
    text-decoration: none;
    border-bottom: 1px solid var(--hairline);
    padding-bottom: 3px;
    transition: color .2s var(--ease), border-color .2s var(--ease);
}

.hsm-entry-go a:hover { color: var(--moss); border-bottom-color: var(--moss) }

.hsm-entry-go i { font-style: normal; font-size: 11px }

@media (prefers-reduced-motion: reduce) {
    .hsm-go-links a, .hsm-entry-go a { transition: none }
}

/* One entry in a roundup.
 *
 * Photograph on one side, writing on the other, swapping sides down the
 * page. A stack of identical cards reads as a database; alternating halves
 * read as a magazine, and the eye is given somewhere to travel. */
.hsm-en {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: clamp(20px, 4vw, 54px);
    max-width: 74rem;
    margin: clamp(46px, 8vh, 96px) auto;
    padding: 0 clamp(20px, 5vw, 40px);
}

/* Not every entry has a photograph, and the ones that do not were keeping
   the empty half of the grid - a column of writing against a blank space,
   pushed to whichever side the alternation had put it on. On its own it
   takes the width the writing wants and sits in the middle.
   :only-child is the condition itself, so no class is needed to say it. */
.hsm-en > .hsm-en-words:only-child {
    grid-column: 1 / -1;
    max-width: 38rem;
    margin: 0 auto;
}

.hsm-en-flip .hsm-en-shot { order: 2 }

.hsm-en-shot { margin: 0 }

.hsm-en-shot img {
    display: block;
    width: 100%;
    height: auto;
}

.hsm-en-words { position: relative }

/* The count, set large and pale behind the name. It numbers the list
   without competing with it. */
.hsm-en-n {
    display: block;
    font-family: var(--serif);
    font-size: min(clamp(38px, 5vw, 58px), 28px + (clamp(38px, 5vw, 58px) - 28px) * 0.6);
    line-height: 1;
    color: var(--hairline);
    margin-bottom: -.28em;
    font-variant-numeric: tabular-nums;
}

.hsm-en-words h2 {
    position: relative;
    font-family: var(--serif);
    font-size: min(clamp(26px, 3.4vw, 38px), 28px + (clamp(26px, 3.4vw, 38px) - 28px) * 0.6);
    font-weight: 500;
    line-height: 1.08;
    margin: 0;
    text-wrap: balance;
}

.hsm-en-where {
    margin: 10px 0 0;
    font-family: var(--sans);
    font-size: 9.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-55);
}

/* The same body style as the introduction. It was the sans at sixteen
   pixels against the introduction's serif at twenty-one, which read as two
   different articles stitched together. */
.hsm-en-said {
    margin-top: 16px;
    color: var(--ink);
}

.hsm-en-said p {
    margin: 0 0 1.1em;
    font-family: var(--serif);
    font-size: clamp(18px, 1.5vw, 21px);
    line-height: 1.74;
    text-wrap: pretty;
}
.hsm-en-said p:last-child { margin-bottom: 0 }

@media (max-width: 760px) {
    .hsm-en {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    /* Stacked, the photograph always comes first - the swap only means
       something when there are two columns to swap. */
    .hsm-en-flip .hsm-en-shot { order: 0 }
}

/* The words the listing would carry.
 *
 * Set the way they would read on the site rather than as form data, because
 * the question being asked is whether they are good enough to publish. */
.vet-words {
    margin: 0 0 16px;
    padding: 14px 16px;
    background: var(--hairline-soft);
}

.vet-words p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink-75);
}

.vet-tag {
    font-family: var(--serif) !important;
    font-size: 17px !important;
    color: var(--ink) !important;
    margin-bottom: 5px !important;
}

/* A candidate nobody has photographed. Worth saying plainly - it is usually
   the answer to the question. */
.vet-nophotos {
    margin: 0 0 14px;
    font-size: 12.5px;
    color: #682114;
}

/* ---- something to follow ------------------------------------------------
 *
 * A recipe is used, not read. Everything below is arranged around finding
 * your place again after looking away: the things to gather in one block,
 * and the steps numbered where the eye lands. */

/* The join between one part and the next. A rule with a word on it. */
.hsm-part {
    max-width: 34rem;
    margin: clamp(38px, 6vh, 64px) auto clamp(14px, 2vh, 22px);
    padding: 0 clamp(20px, 5vw, 40px);
    text-align: center;
    border-top: 1px solid var(--hairline);
}

.hsm-part span {
    display: inline-block;
    transform: translateY(-.72em);
    background: var(--paper);
    padding: 0 16px;
    font-family: var(--sans);
    font-size: 9.5px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink-55);
}

.hsm-yield {
    max-width: 34rem;
    margin: 0 auto 8px;
    padding: 0 clamp(20px, 5vw, 40px);
    text-align: center;
    font-family: var(--serif);
    font-style: italic;
    font-size: 17px;
    color: var(--ink-75);
}

/* What to gather. One block, checkable in a glance, and two columns once
   there is room for two - a list of eight in a single column makes the
   reader scroll to see whether they have everything. */
.hsm-things {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(18px, 3vw, 34px);
    align-items: start;
    max-width: 52rem;
    margin: clamp(16px, 3vh, 26px) auto clamp(30px, 5vh, 50px);
    padding: 0 clamp(20px, 5vw, 40px);
}

.hsm-things:has(figure) { grid-template-columns: 1fr 1fr }

.hsm-things ul {
    list-style: none;
    margin: 0;
    padding: clamp(18px, 3vw, 26px);
    background: var(--hairline-soft);
    columns: 1;
}

.hsm-things li {
    font-family: var(--serif);
    font-size: 16px;
    line-height: 1.45;
    padding: 7px 0;
    border-bottom: 1px solid var(--hairline);
}

.hsm-things li:last-child { border-bottom: 0 }

.hsm-things figure { margin: 0 }

.hsm-things img {
    display: block;
    width: 100%;
    height: auto;
}

/* One step. The number sits in the margin at a size you can find again
   from across a kitchen. */
.hsm-step {
    display: grid;
    grid-template-columns: 3.2rem 1fr;
    gap: clamp(12px, 2vw, 22px);
    align-items: baseline;
    max-width: 40rem;
    margin: 0 auto;
    padding: 14px clamp(20px, 5vw, 40px);
}

.hsm-step-n {
    font-family: var(--serif);
    font-size: min(clamp(24px, 3vw, 32px), 28px + (clamp(24px, 3vw, 32px) - 28px) * 0.6);
    line-height: 1;
    color: var(--hairline);
    font-variant-numeric: tabular-nums;
}

.hsm-step p {
    margin: 0;
    font-size: 16.5px;
    line-height: 1.62;
}

@media (max-width: 640px) {
    .hsm-things:has(figure) { grid-template-columns: 1fr }
    .hsm-step { grid-template-columns: 2.4rem 1fr }
}

/* The contents row as a link.
 *
 * display:contents so the anchor takes part in nothing - the grid on the
 * li stays exactly as the design drew it, and the whole row becomes the
 * target rather than the title alone. */
.clist .c-go {
    display: contents;
    color: inherit;
    text-decoration: none;
}

.clist li:focus-within { padding-left: 8px }

/* A piece that is not published yet. Only somebody who can see drafts is
   ever shown this, so it says what it is rather than hinting. */
.c-draft {
    display: inline-block;
    margin-right: 8px;
    padding: 2px 7px;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    font-family: var(--sans);
    font-style: normal;
    font-size: 8.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-55);
    vertical-align: middle;
}

/* ---- reading an issue -------------------------------------------------- */

.hsr {
    color: var(--ink);
    padding-bottom: 12vh;
}

.hsr-kick {
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink-55);
    margin: 0 0 10px;
}

/* The cover stands against the ground, the welcome sits beside it. */
.hsr-top {
    display: grid;
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    align-items: center;
    gap: clamp(26px, 5vw, 70px);
    max-width: 68rem;
    margin: 0 auto;
    padding: clamp(40px, 8vh, 92px) clamp(20px, 5vw, 40px) clamp(30px, 6vh, 60px);
}

.hsr-cover img {
    display: block;
    width: 100%;
    height: auto;
    box-shadow: 0 18px 50px rgba(20, 22, 18, .22);
}

.hsr-top h1 {
    font-family: var(--serif);
    font-size: min(clamp(38px, 6vw, 68px), 28px + (clamp(38px, 6vw, 68px) - 28px) * 0.6);
    font-weight: 500;
    line-height: 1;
    margin: 0;
}

.hsr-season {
    margin: 10px 0 0;
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-55);
}

.hsr-welcome {
    margin: clamp(16px, 3vh, 26px) 0 0;
    font-family: var(--serif);
    font-size: min(clamp(17px, 1.9vw, 20px), 28px + (clamp(17px, 1.9vw, 20px) - 28px) * 0.6);
    line-height: 1.5;
    color: var(--ink-75);
    max-width: 34rem;
}

.hsr-count {
    margin: 14px 0 0;
    font-family: var(--sans);
    font-size: 12.5px;
    color: var(--ink-55);
}

.hsr-acts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: clamp(18px, 3vh, 28px) 0 0;
}

.hsr-btn {
    display: inline-block;
    padding: 13px 22px;
    background: var(--forest);
    color: #fff;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid var(--forest);
    transition: background .25s var(--ease), color .25s var(--ease);
}

.hsr-btn:hover { background: var(--moss); border-color: var(--moss) }

.hsr-btn-quiet {
    background: transparent;
    color: var(--ink);
    border-color: var(--hairline);
}

.hsr-btn-quiet:hover { background: transparent; color: var(--moss); border-color: var(--moss) }

/* The piece the issue opens with, at the size an opening spread deserves. */
.hsr-first {
    display: block;
    position: relative;
    max-width: 82rem;
    margin: 0 auto clamp(40px, 7vh, 80px);
    text-decoration: none;
    color: inherit;
}

.hsr-first-shot img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: 50% 40%;
}

.hsr-first-in {
    display: block;
    max-width: 44rem;
    margin: 0 auto;
    padding: clamp(20px, 4vh, 34px) clamp(20px, 5vw, 40px) 0;
    text-align: center;
}

.hsr-first-in b {
    display: block;
    font-family: var(--serif);
    font-size: min(clamp(28px, 4vw, 44px), 28px + (clamp(28px, 4vw, 44px) - 28px) * 0.6);
    font-weight: 500;
    line-height: 1.06;
    text-wrap: balance;
}

.hsr-first-in em {
    display: block;
    margin-top: 12px;
    font-style: normal;
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.55;
    color: var(--ink-75);
}

.hsr-first-in i {
    display: block;
    margin-top: 12px;
    font-style: normal;
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-55);
}

.hsr-first:hover .hsr-first-in b { color: var(--moss) }

/* The rest of the issue. */
.hsr-rest {
    max-width: 62rem;
    margin: 0 auto;
    padding: 0 clamp(20px, 5vw, 40px);
}

.hsr-h {
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink-55);
    font-weight: 400;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--hairline);
    margin: 0 0 4px;
}

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

.hsr-list li { border-bottom: 1px solid var(--hairline-soft) }

.hsr-list a {
    display: grid;
    grid-template-columns: 10rem 1fr;
    gap: clamp(16px, 3vw, 30px);
    align-items: center;
    padding: clamp(16px, 2.4vh, 24px) 0;
    text-decoration: none;
    color: inherit;
    transition: padding-left .25s var(--ease);
}

.hsr-list a:hover { padding-left: 8px }

.hsr-shot {
    display: block;
    overflow: hidden;
    background: var(--hairline-soft);
}

.hsr-shot img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: 50% 38%;
}

.hsr-blank { display: block; width: 100%; aspect-ratio: 4 / 3 }

.hsr-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px;
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-55);
    margin-bottom: 7px;
}

.hsr-meta b { font-variant-numeric: tabular-nums; font-weight: 600 }

.hsr-words strong {
    display: block;
    font-family: var(--serif);
    font-size: min(clamp(20px, 2.3vw, 25px), 28px + (clamp(20px, 2.3vw, 25px) - 28px) * 0.6);
    font-weight: 500;
    line-height: 1.16;
}

.hsr-list a:hover strong { color: var(--moss) }

.hsr-words em {
    display: block;
    margin-top: 7px;
    font-style: normal;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--ink-75);
}

.hsr-words i {
    display: block;
    margin-top: 8px;
    font-style: normal;
    font-family: var(--sans);
    font-size: 8.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-55);
}

/* What a piece is, where it is not simply a piece. */
.hsr-mark {
    padding: 2px 8px;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    letter-spacing: .16em;
}

/* An advertorial is paid for, and a reader is entitled to know that before
   they read it rather than after. */
.hsr-ad {
    border-color: var(--moss);
    color: var(--moss);
}

.hsr-foot {
    max-width: 40rem;
    margin: clamp(50px, 9vh, 100px) auto 0;
    padding: clamp(26px, 4vh, 40px) clamp(20px, 5vw, 40px);
    border-top: 1px solid var(--hairline);
    text-align: center;
}

.hsr-foot h3 {
    font-family: var(--serif);
    font-size: min(clamp(21px, 2.6vw, 28px), 28px + (clamp(21px, 2.6vw, 28px) - 28px) * 0.6);
    font-weight: 500;
    line-height: 1.2;
    margin: 0 0 4px;
    text-wrap: balance;
}

.hsr-foot .hsr-acts { justify-content: center }

@media (max-width: 820px) {
    .hsr-top { grid-template-columns: 1fr; text-align: center }
    .hsr-cover { max-width: 15rem; margin: 0 auto }
    .hsr-welcome { margin-left: auto; margin-right: auto }
    .hsr-acts { justify-content: center }
}

@media (max-width: 620px) {
    .hsr-list a { grid-template-columns: 6.5rem 1fr; gap: 14px }
    .hsr-first-shot img { aspect-ratio: 4 / 3 }
}

@media (prefers-reduced-motion: reduce) {
    .hsr-list a, .hsr-btn { transition: none }
}

/* Said before the piece is read, not after. It sits on the opening view over
   the photograph, so it takes a border rather than a colour to be legible
   against whatever is behind it. */
.hsm-ad {
    display: inline-block;
    margin: 0 auto 14px;
    padding: 5px 14px;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 8.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #fff;
}

/* A page arriving.
 *
 * Not a loader. The waiting has been dealt with elsewhere; this is only so
 * that one page becoming another reads as a turn rather than as a jump. It
 * moves eight pixels and takes a fifth of a second, which is under the
 * threshold where anybody would say they were waiting for it.
 *
 * The chrome does not move: the masthead, the menu and the footer stay put
 * while the page changes underneath them, which is what makes it feel like
 * one application rather than a series of documents. */
@keyframes hs-arrive {
    from { opacity: 0; transform: translateY(8px) }
    to   { opacity: 1; transform: none }
}

.hs-arrive {
    animation: hs-arrive .2s var(--ease, ease) both;
}

/* Anybody who has asked for less movement gets none. */
@media (prefers-reduced-motion: reduce) {
    .hs-arrive { animation: none }
}

/* ---- one page turning into another ------------------------------------- */

/* Where the browser will animate between two states of the page, the plain
   arrival is redundant and the two together read as a stutter. */
.can-turn .hs-arrive { animation: none }

/* The page beneath: a cross-fade, slightly weighted so the new page leads.
   Long enough to register, short enough that nobody is waiting on it. */
::view-transition-old(root) {
    animation: hs-fade-out .18s var(--ease, ease) both;
}

::view-transition-new(root) {
    animation: hs-fade-in .26s var(--ease, ease) both;
}

@keyframes hs-fade-out {
    to { opacity: 0 }
}

@keyframes hs-fade-in {
    from { opacity: 0; transform: translateY(6px) }
    to   { opacity: 1; transform: none }
}

/* A photograph that exists on both pages travels between them rather than
   fading: the frame on a contents page becomes the frame at the top of the
   article, moving and growing into its new place. Named per piece, because
   the browser matches the two by name. */
::view-transition-group(*) {
    animation-duration: .34s;
    animation-timing-function: var(--ease, ease);
}

/* The masthead and the footer do not take part. They are the same on both
   pages and animating them would make the whole window appear to move. */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) { animation: none }
}

/* The paragraph as it will read on the listing. Set in the reading face at
   the reading size, because the question is whether it is good enough to
   publish and that cannot be judged from form fields. */
.vet-copy {
    font-family: var(--serif) !important;
    font-size: 15.5px !important;
    line-height: 1.62 !important;
    color: var(--ink) !important;
    margin-top: 8px !important;
}

/* Where it still breaks a rule. Said plainly. */
.vet-faults {
    margin: 10px 0 0 !important;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.vet-faults span {
    font-family: var(--sans);
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #682114;
    border: 1px solid currentColor;
    border-radius: 999px;
    padding: 2px 8px;
}

/* What it was checked against. Folded away, because it is only wanted when
   a claim looks doubtful - but it is there every time. */
.vet-sources {
    margin-top: 10px;
    font-family: var(--sans);
    font-size: 11.5px;
}

.vet-sources summary {
    cursor: pointer;
    color: var(--ink-55);
    letter-spacing: .04em;
}

.vet-sources ul {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: grid;
    gap: 3px;
}

.vet-sources a { color: var(--ink-75) }
.vet-sources a:hover { color: var(--moss) }


/* ---- the sitemap ---------------------------------------------------
 *
 * Two thousand rows, so the list itself is plain and everything that helps
 * a person find one row is not: the filter is sticky, the count updates,
 * and anything with something wrong with it is marked down the left edge
 * where the eye runs.
 */
.vet-sift {
    position: sticky;
    top: 60px;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
    margin: 22px 0 6px;
    padding: 12px 0;
    background: var(--ground);
    border-bottom: 1px solid var(--hairline);
}

.vet-sift input[type="search"] {
    flex: 1 1 16rem;
    font: inherit;
    font-size: 15px;
    padding: 9px 12px;
    border: 1px solid var(--hairline);
    background: var(--paper, #f6f3ee);
    color: var(--ink);
}

.vet-only {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--sans);
    font-size: 13px;
    color: var(--ink-75);
    cursor: pointer;
}

.vet-count {
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: .06em;
    color: var(--ink-55);
    margin-left: auto;
}

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

.vet-map > li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 4px 18px;
    padding: 12px 0 12px 14px;
    border-bottom: 1px solid var(--hairline-soft);
    border-left: 3px solid transparent;
}

/* Marked down the edge rather than coloured all over: the row still has to
   be readable, and there may be seventy-five of them in a row. */
.vet-map-off { border-left-color: var(--moss) }

.vet-map > li > a {
    grid-column: 1;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

.vet-map > li > a b {
    display: block;
    font-family: var(--serif);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.3;
}

.vet-map > li > a code {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    color: var(--ink-55);
    word-break: break-all;
}

.vet-map > li > a:hover b { text-decoration: underline }

.vet-map-said {
    grid-column: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 4px;
}

.vet-map-said em {
    font-family: var(--sans);
    font-style: normal;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-55);
}

.vet-map-draft { color: var(--ink-75); font-weight: 500 }
.vet-map-wrong { color: var(--moss); font-weight: 500 }

.vet-map-acts {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: flex;
    gap: 8px;
    align-self: center;
}

.vet-map-acts button {
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: .04em;
    padding: 6px 12px;
    border: 1px solid var(--hairline);
    background: transparent;
    color: var(--ink-75);
    cursor: pointer;
    transition: border-color .2s, color .2s;
}

.vet-map-acts button:hover:not(:disabled) {
    border-color: var(--ink);
    color: var(--ink);
}

.vet-map-acts button:disabled { opacity: .4; cursor: default }

/* The one that takes something off the site reads as the one that does. */
.vet-map-bin:hover:not(:disabled) {
    border-color: #682114 !important;
    color: #682114 !important;
}

/* The count on a tab, and the number of rows on it worth a look. */
.vet-tag b {
    margin-left: 7px;
    font-weight: 400;
    color: var(--ink-55);
}

.vet-tag i {
    margin-left: 6px;
    font-style: normal;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 9px;
    background: var(--moss);
    color: #fff;
}

.vet-tag-on {
    border-color: var(--ink);
    color: var(--ink);
}

@media (max-width: 640px) {
    .vet-map > li { grid-template-columns: minmax(0, 1fr) }
    .vet-map-acts { grid-column: 1; grid-row: auto; margin-top: 8px }
    .vet-sift { position: static }
}


/* ---- a town in a roundup ------------------------------------------
 *
 * The magazine gave each of these a page and turned it. Here the page does
 * not turn, so the ground changes instead: six tints, cycled, each a shift
 * of the paper rather than a colour of its own.
 */
.hsm-town {
    --ground-here: var(--paper, #f6f3ee);
    background: var(--ground-here);
    padding: clamp(44px, 8vh, 96px) 0;
    /* A stacking context of its own, at the bottom. Nothing inside a
       section can then paint over the header however large it is set. */
    position: relative;
    z-index: 0;
}

/* The opening had nothing between it and the first town. */
.hsm-town:first-of-type { margin-top: clamp(30px, 6vh, 64px) }

/* Two grounds, the two the site already uses, alternating. Six was five too
   many: enough of a change to say a new town has started, and not enough to
   be noticed doing it.
   Told apart by the attribute, not by position: every section is wrapped in
   a div of its own, so each is the only one of its type inside it and
   nth-of-type would call all ten of them the first. */
.hsm-town[data-tint="1"] { --ground-here: var(--ground) }

/* Both grounds are the site's own tokens, so the dark theme needs nothing
   said about them here. */

.hsm-town-in {
    max-width: 60rem;
    margin: 0 auto;
    padding: 0 clamp(20px, 5vw, 40px);
}

.hsm-town-of {
    max-width: 38rem;
    margin: 0 auto clamp(20px, 3vh, 30px);
}

.hsm-town-of h2 {
    margin: 0;
    font-family: var(--serif);
    font-size: min(clamp(32px, 5vw, 54px), 28px + (clamp(32px, 5vw, 54px) - 28px) * 0.6);
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -.01em;
}

.hsm-town-of p {
    margin: 6px 0 0;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-55);
}

/* The full page the magazine faced it with, at the width of the writing. */
.hsm-town-shot {
    margin: 0 0 clamp(22px, 4vh, 34px);
}

.hsm-town-shot img {
    display: block;
    width: 100%;
    height: auto;
}

/* Centred in the column. A thirty-eight rem measure left-aligned inside
   sixty left a third of the section empty down one side. */
.hsm-town-said {
    max-width: 38rem;
    margin: 0 auto;
}

.hsm-town-said p {
    margin: 0 0 1.1em;
    font-family: var(--serif);
    font-size: clamp(18px, 1.5vw, 21px);
    line-height: 1.74;
    color: var(--ink);
    text-wrap: pretty;
}

.hsm-town-said p:last-child { margin-bottom: 0 }

/* ---- what is worth going to, inside the town ----
   A list, not a grid of cards. Cards of unequal height leave holes wherever
   one has a photograph and the next has two lines; rows cannot. Name and
   place on the left, the sentence under them, a small square photograph on
   the right only where we hold a page - the text keeps its left edge either
   way, and the arrow keeps its line. */

.hsm-town-list { margin-top: clamp(28px, 5vh, 46px) }

.hsm-town-list .hsm-kick { margin-bottom: 6px }

.hsm-town-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--hairline);
}

.hsm-town-list li { border-bottom: 1px solid var(--hairline) }

.hsm-town-list li > a,
.hsm-town-list li > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "name" "where" "said" "ours" "go";
    column-gap: clamp(18px, 3vw, 30px);
    padding: clamp(18px, 2.6vw, 24px) 0;
    text-decoration: none;
    color: inherit;
}

/* The photograph, where there is one, takes a column of its own. */
.hsm-town-list li:has(.hsm-town-pic) > a,
.hsm-town-list li:has(.hsm-town-pic) > div {
    grid-template-columns: minmax(0, 1fr) clamp(76px, 9vw, 112px);
    grid-template-areas: "name pic" "where pic" "said pic" "ours pic" "go pic";
}

.hsm-town-list li > a:hover b {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.hsm-town-pic {
    grid-area: pic;
    align-self: start;
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--hairline-soft);
}

.hsm-town-pic img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hsm-town-list b {
    grid-area: name;
    display: block;
    font-family: var(--serif);
    font-size: clamp(19px, 1.6vw, 21px);
    font-weight: 500;
    line-height: 1.25;
}

.hsm-town-list i {
    grid-area: where;
    display: block;
    margin-top: 4px;
    font-style: normal;
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-55);
}

.hsm-town-list em {
    grid-area: said;
    display: block;
    margin-top: 9px;
    font-style: normal;
    font-family: var(--sans);
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink-75);
    max-width: 40rem;
}

.hsm-town-list em.hsm-town-ours { grid-area: ours }

.hsm-town-go {
    grid-area: go;
    justify-self: start;
    display: inline-block;
    margin-top: 12px;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--moss);
    white-space: nowrap;
}

/* The arrow is inline. The list's own rule makes every <i> a block, which
   put the arrow on a line of its own under the words. */
.hsm-town-go i {
    display: inline;
    margin: 0 0 0 6px;
    font-style: normal;
    font-size: inherit;
    letter-spacing: 0;
}

/* ---- getting there ---- */

.hsm-town-there {
    margin-top: clamp(28px, 5vh, 46px);
    padding-top: 22px;
    border-top: 1px solid var(--hairline);
    max-width: 44rem;
}

.hsm-town-there p {
    margin: 0 0 16px;
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-75);
}

.hsm-town-there .hsm-kick { margin-bottom: 12px }

/* A table, because that is what it is: somebody comparing Aberdeen with
   Glasgow needs the two times in a column under each other, not scattered
   across a grid in reading order. */
.hsm-town-there dl {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0 clamp(20px, 4vw, 48px);
}

.hsm-town-there dl > div {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--hairline-soft);
}

/* A dotted rule between the place and the time, the way a timetable sets
   it, so the eye crosses the gap without losing the line. */
.hsm-town-there dt::after {
    content: "";
    display: inline-block;
    width: 100%;
}

.hsm-town-there dt {
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-55);
}

.hsm-town-there dd {
    margin: 0;
    font-family: var(--sans);
    font-size: 14px;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.hsm-town-there dt {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

@media (max-width: 640px) {
    .hsm-town { padding: 34px 0 }
    .hsm-town-list ul { grid-template-columns: 1fr }
}



/* What we hold about a place, under what the writer said about it. Set
   quieter and separated by a rule, because they are two voices and running
   them together would read as one long description that contradicts itself. */
.hsm-town-ours {
    margin-top: 10px !important;
    padding-top: 10px;
    border-top: 1px solid var(--hairline-soft);
    font-size: 13.5px !important;
    color: var(--ink-55) !important;
}


/* ==========================================================================
   A LOCAL'S GUIDE
   --------------------------------------------------------------------------
   One person's piece: you meet her, you read her answers, then she tells you
   where to go. Four sections, none of them numbered except the tips, which
   the magazine numbers itself.
   ========================================================================== */

/* --- meeting her ---------------------------------------------------------
   Her portrait beside her own words. Her name is set as a name, large and
   quiet, rather than as a section heading: the reader is being introduced to
   somebody, not shown a chapter title. */

.hsm-local {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
    gap: clamp(1.75rem, 4vw, 3.5rem);
    align-items: start;
    /* The measure every section on these pages is held to. */
    max-width: 60rem;
    margin: clamp(2.5rem, 6vw, 4.5rem) auto;
    padding: 0 clamp(20px, 5vw, 40px);
}

.hsm-local-name {
    margin: 0.35rem 0 0;
    font-family: var(--serif);
    font-size: min(clamp(2.1rem, 5vw, 3.4rem), 28px + (clamp(2.1rem, 5vw, 3.4rem) - 28px) * 0.6);
    line-height: 1.02;
    letter-spacing: -0.015em;
}

.hsm-local-of {
    margin: 0.5rem 0 0;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-55);
}

.hsm-local-said {
    margin-top: clamp(1.1rem, 2.5vw, 1.6rem);
}

.hsm-local-said p {
    margin: 0 0 1em;
}

.hsm-local-shot {
    margin: 0;
    /* Level with the name rather than the label above it, so the two
       columns start together. */
    padding-top: 1.9rem;
}

.hsm-local-shot img {
    display: block;
    width: 100%;
    height: auto;
}

.hsm-local-shot figcaption {
    margin-top: 0.6rem;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-55);
}

@media (max-width: 760px) {
    .hsm-local {
        grid-template-columns: minmax(0, 1fr);
    }

    .hsm-local-shot {
        order: -1;
        padding-top: 0;
    }
}

/* --- her weekend ---------------------------------------------------------
   The one part of the piece a reader might act on directly, so it is boxed
   and set apart from the interview around it. */

.hsm-wknd {
    max-width: 52rem;
    margin: clamp(2.25rem, 5vw, 3.5rem) auto;
    padding: clamp(1.5rem, 3.5vw, 2.5rem);
    /* The lighter of the two paper tints. --ground is what the page itself
       is set on, so a panel painted with it is a panel nobody can see. */
    background: var(--paper, #f6f3ee);
}

.hsm-wknd-days {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1.5rem, 4vw, 3rem);
    margin-top: 1.4rem;
}

.hsm-wknd-day p:last-child {
    margin: 0;
}

.hsm-wknd-n {
    margin: 0 0 0.6rem;
    font-family: var(--serif);
    font-size: 1.35rem;
}

@media (max-width: 680px) {
    .hsm-wknd-days {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* --- her picks -----------------------------------------------------------
   The roundup's own cards, unchanged. A reader who has seen one on a roundup
   knows what this is, and the card already handles the photograph, the
   region, our line and the link through. */

.hsm-picks {
    max-width: 46rem;
    margin: clamp(2.5rem, 6vw, 4rem) auto;
    padding: 0 clamp(20px, 5vw, 40px);
}

.hsm-picks-of {
    margin: 0 0 clamp(1.25rem, 3vw, 2rem);
    font-family: var(--serif);
    font-size: min(clamp(1.8rem, 4vw, 2.6rem), 28px + (clamp(1.8rem, 4vw, 2.6rem) - 28px) * 0.6);
    line-height: 1.05;
}

.hsm-picks-list {
    margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}

.hsm-picks-shots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: clamp(1rem, 2.5vw, 1.75rem);
    margin-top: clamp(1.25rem, 3vw, 2rem);
}

.hsm-picks-shots figure {
    margin: 0;
}

.hsm-picks-shots img {
    display: block;
    width: 100%;
    height: auto;
}

.hsm-picks-shots figcaption {
    margin-top: 0.55rem;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-55);
}

/* --- her tips ------------------------------------------------------------
   Numbered, because she numbers them and refers to them that way. */

.hsm-tips {
    max-width: 60rem;
    margin: clamp(2.5rem, 6vw, 4rem) auto;
    padding: clamp(1.25rem, 3vw, 2rem) clamp(20px, 5vw, 40px) 0;
    border-top: 1px solid var(--hairline);
}

.hsm-tips ol {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: clamp(1.25rem, 3vw, 2.25rem);
    margin: 1.4rem 0 0;
    padding: 0;
    list-style: none;
    /* Three tips of unequal length should sit on their own baselines, not
       stretch to match the longest. */
    align-items: start;
}

.hsm-tips li > span {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--serif);
    font-size: 1.5rem;
    color: var(--hairline);
}

.hsm-tips li p {
    margin: 0;
}

/* A tip with a title of its own - "Rainy Days" - sets it over the words. */
.hsm-tips-called {
    margin: 0 0 0.4rem !important;
    font-family: var(--serif);
    font-size: clamp(17px, 1.5vw, 19px);
    line-height: 1.3;
    color: var(--ink);
}

/* --- the question kept until last ---------------------------------------- */

.hsm-pair-last {
    padding-top: clamp(1.25rem, 3vw, 2rem);
    border-top: 1px solid var(--hairline);
}


/* ==========================================================================
   AN INTERVIEW
   --------------------------------------------------------------------------
   A run of questions and answers with no places laid out in the body. The
   questions are already set bold by .hsm-q; what is different here is the
   measure of the answers and the marks around anything quoted.
   ========================================================================== */

/* The pulled-out line is something somebody said, so it is set inside the
   marks the magazine sets it in. Drawn by the page rather than stored in the
   text, so the text stays clean and cannot end up quoted twice. */
.hsm-say-in p::before { content: "\201C" }
.hsm-say-in p::after { content: "\201D" }

.hsm-say-in p::before,
.hsm-say-in p::after {
    /* Punctuation, not decoration: the same face and size as the line it
       belongs to, held back so it does not compete with the words. */
    opacity: .55;
}

/* The body of an interview, centred.

   Said plainly, because it is worth knowing: a centred paragraph is ragged
   on the left as well as the right, so the eye has to find the start of
   every line. It suits a short answer and it fights a long one, which is why
   it is scoped to the interview and left alone on the features. */
.hsm-talk .hsm-a p {
    text-align: center;
    /* A little narrower. Centred lines of very different lengths read as a
       shape rather than as a paragraph, and a tighter measure evens them. */
    max-width: 34rem;
    margin-left: auto;
    margin-right: auto;
}

.hsm-talk .hsm-q {
    text-align: center;
    max-width: 34rem;
    margin-left: auto;
    margin-right: auto;
}

/* The goodbye at the foot of the piece. */
.hsm-talk .hsm-yield {
    text-align: center;
}


/* ==========================================================================
   A PULL-OUT BOX
   --------------------------------------------------------------------------
   A short aside worth knowing that is not part of the argument. The magazine
   sets these in an oval in the middle of a column; here they are a tinted
   panel between two rules, which does the same job of stopping the eye
   without stopping the reader.
   ========================================================================== */

.hsm-box {
    max-width: 34rem;
    margin: clamp(2.25rem, 5vw, 3.5rem) auto;
    padding: clamp(1.5rem, 3.5vw, 2.25rem) clamp(1.25rem, 4vw, 2.5rem);
    background: var(--paper, #f6f3ee);
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    text-align: center;
}

.hsm-box .hsm-kick {
    margin: 0 0 0.9rem;
}

.hsm-box p {
    margin: 0 0 0.9em;
    font-family: var(--serif);
    /* A shade larger than body copy: it is an aside, and an aside set
       smaller reads as a footnote. */
    font-size: clamp(17px, 1.5vw, 20px);
    line-height: 1.62;
    color: var(--ink);
    text-wrap: pretty;
}

.hsm-box p:last-child {
    margin-bottom: 0;
}


/* ==========================================================================
   A SECTION HEADING
   --------------------------------------------------------------------------
   The name of one of the things a feature has been building towards: a
   place, a maker, a walk. Set as a heading rather than as the small
   uppercase marker used for a divider, because these are what the piece is
   for and a reader should be able to find them by scanning.
   ========================================================================== */

.hsm-head {
    max-width: 38rem;
    margin: clamp(4.5rem, 10vw, 8rem) auto clamp(0.9rem, 2vw, 1.4rem);
    padding: 0 clamp(20px, 5vw, 24px);
    font-family: var(--serif);
    font-size: min(clamp(1.7rem, 3.4vw, 2.5rem), 28px + (clamp(1.7rem, 3.4vw, 2.5rem) - 28px) * 0.6);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.014em;
    color: var(--ink);
    text-wrap: balance;
}

/* The first one follows the paragraph that introduces the whole set, so it
   does not need the full gap above it. */
.hsm-head:first-of-type {
    margin-top: clamp(2.25rem, 5vw, 3.5rem);
}


/* ==========================================================================
   A CONVERSATION BETWEEN TWO PEOPLE
   --------------------------------------------------------------------------
   No questions are printed: two people answer in turn. The page keeps them
   apart with a name and a rule rather than with initials, which on a screen
   read as a filename.
   ========================================================================== */

.hsm-said {
    max-width: 38rem;
    margin: 0 auto clamp(1.75rem, 4vw, 2.75rem);
    padding: 0 clamp(20px, 5vw, 24px);
}

.hsm-said-who {
    margin: 0 0 0.6rem;
    font-family: var(--sans);
    font-size: 9.5px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink-55);
}

.hsm-said > div {
    /* The rule says the words are still theirs, after the name has been
       read and forgotten. */
    padding-left: clamp(0.9rem, 2vw, 1.4rem);
    border-left: 1px solid var(--hairline);
}

/* On the words, not on everything in the block: the speaker's name is a
   paragraph too, and this rule was overruling its own colour. */
.hsm-said > div p {
    margin: 0 0 1.05em;
    font-family: var(--serif);
    font-size: clamp(17.5px, 1.42vw, 20px);
    line-height: 1.76;
    color: var(--ink);
    text-wrap: pretty;
}

.hsm-said > div p:last-child {
    margin-bottom: 0;
}

/* --- a strip of pattern --------------------------------------------------
   Four printed swatches shown as a set, because the range is the point. */

.hsm-swatch {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(0.5rem, 1.4vw, 1rem);
    max-width: 60rem;
    margin: clamp(2.5rem, 6vw, 4rem) auto;
    padding: 0 clamp(20px, 5vw, 40px);
}

.hsm-swatch figure {
    margin: 0;
}

.hsm-swatch img {
    display: block;
    width: 100%;
    height: auto;
    /* Space is reserved from the width and height on the tag, which the
       browser turns into a ratio on its own. attr() is not allowed in
       aspect-ratio, and writing it there made every swatch take its full
       618 pixels of height instead. */
}

@media (max-width: 620px) {
    .hsm-swatch {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* --- the ending ----------------------------------------------------------
   Over one of their own toiles. A studio that prints pattern for a living
   should not end on white, and a pattern you can read through is a pattern
   doing its job. */

.hsm-end {
    position: relative;
    isolation: isolate;
    margin: clamp(3rem, 7vw, 5rem) 0 0;
    padding: clamp(3rem, 8vw, 5.5rem) clamp(20px, 5vw, 40px);
    overflow: hidden;
    text-align: center;
}

.hsm-end-ground {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-repeat: repeat;
    background-size: 320px auto;
    /* Held right back. It is cloth behind words, not a photograph. */
    opacity: .13;
}

.hsm-end-in {
    display: block;
    max-width: 34rem;
    margin: 0 auto;
}

.hsm-end-said {
    margin: 0.7rem 0 1.5rem;
    font-family: var(--serif);
    font-size: min(clamp(19px, 2vw, 24px), 28px + (clamp(19px, 2vw, 24px) - 28px) * 0.6);
    line-height: 1.4;
    color: var(--ink);
    text-wrap: balance;
}

.hsm-end-go {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.4rem;
    border: 1px solid currentColor;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
}

.hsm-end-go:hover {
    background: var(--ink);
    color: var(--paper, #f6f3ee);
}

.hsm-end-go i {
    font-style: normal;
}


/* A piece that ends on a full-bleed panel meets what follows it. The 45px
   above the printed-edition section is right after a paragraph and wrong
   after a panel, where it leaves a band of nothing between the two. */
.hsm-flush .hsm-printed {
    margin-top: 0;
}


/* --------------------------------------------------------------------------
   WHERE A SECTION IS, AND WHERE TO READ MORE
   A named place at the end of a feature: the name, the place it stands in,
   and the two ways to find out more. Ours says what it is like to be there;
   theirs says whether it is open on Tuesday.
   -------------------------------------------------------------------------- */

.hsm-head-of {
    max-width: 38rem;
    /* Five places a reader might drive to. At eighty pixels apart they read
       as one column of text with names in it, so there is enough room above
       each that the eye knows the last one has ended. */
    margin: clamp(4.5rem, 10vw, 8rem) auto clamp(0.9rem, 2vw, 1.4rem);
    padding: 0 clamp(20px, 5vw, 24px);
}

/* The heading inside already has the measure and the space; here it only
   needs to stop adding its own on top. */
.hsm-head-of .hsm-head {
    max-width: none;
    margin: 0;
    padding: 0;
}

.hsm-head-at {
    margin: 0.35rem 0 0;
    font-family: var(--sans);
    font-size: 9.5px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink-55);
}

.hsm-more {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.6rem;
    max-width: 38rem;
    margin: -0.4rem auto clamp(1.5rem, 4vw, 2.5rem);
    padding: 0 clamp(20px, 5vw, 24px);
}

.hsm-more a {
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--hairline);
    padding-bottom: 2px;
}

.hsm-more a:hover {
    border-bottom-color: currentColor;
}

.hsm-more i {
    font-style: normal;
    margin-left: 0.35rem;
}


/* ==========================================================================
   A FOLKLORE PAGE
   --------------------------------------------------------------------------
   A told tale, two pages in print, drawn rather than photographed. The two
   colours are taken out of the illustration: the near-black it is printed on
   and the slate its sky is filled with.
   ========================================================================== */

.hsm-tale {
    --tale-ink: #2b301d;
    --tale-slate: #414042;
    --tale-paper: #f4f1ec;

    padding: clamp(2.5rem, 7vw, 5rem) clamp(20px, 5vw, 40px) clamp(3rem, 8vw, 6rem);
    background: var(--tale-ink);
    color: var(--tale-paper);
    text-align: center;
}

.hsm-tale-in {
    max-width: 52rem;
    margin: 0 auto;
}

/* The stamp beside the standing kicker, which is what the magazine does
   with it. */
.hsm-tale-kick {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.75rem, 2vw, 1.1rem);
    margin: 0 0 clamp(1.5rem, 4vw, 2.5rem);
}

.hsm-tale-kick img {
    display: block;
    width: clamp(44px, 6vw, 62px);
    height: auto;
}

.hsm-tale-kick span {
    font-family: var(--sans);
    font-size: clamp(11px, 1.3vw, 13px);
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--tale-slate);
    /* Slate on near-black is quiet by design; lifted just enough to read. */
    filter: brightness(1.45);
    text-align: left;
}

.hsm-tale-name {
    margin: 0;
    font-family: var(--serif);
    font-size: min(clamp(2.4rem, 6.5vw, 4.4rem), 28px + (clamp(2.4rem, 6.5vw, 4.4rem) - 28px) * 0.6);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -0.018em;
    text-wrap: balance;
}

.hsm-tale-at {
    margin: clamp(0.9rem, 2vw, 1.3rem) 0 0;
    font-family: var(--sans);
    font-size: 10px;
    letter-spacing: .28em;
    text-transform: uppercase;
    opacity: .58;
}

/* Framed as it was drawn. The scalloped border is part of the artwork, so
   it needs air around it rather than the edges of the screen. */
.hsm-tale-art {
    margin: clamp(2rem, 5vw, 3.5rem) 0 0;
}

.hsm-tale-art img {
    display: block;
    width: 100%;
    height: auto;
}

.hsm-tale-said {
    max-width: 38rem;
    margin: clamp(2rem, 5vw, 3rem) auto 0;
    font-family: var(--serif);
    font-size: min(clamp(18px, 2vw, 23px), 28px + (clamp(18px, 2vw, 23px) - 28px) * 0.6);
    font-style: italic;
    line-height: 1.55;
    text-wrap: pretty;
}

/* --- the story ---------------------------------------------------------
   Wider and slower than an article: it is being told, not reported. */

/* The same measure as every other article. Set narrower it reads as a
   column that ran out of room rather than as a slower one. */
.hsm-tale ~ * .hsm-prose,
.hsm-body:has(.hsm-tale) .hsm-prose {
    max-width: 38rem;
}

.hsm-body:has(.hsm-tale) .hsm-prose p {
    text-align: center;
}

/* A beat between the picture and the telling. The opening is a full-width
   change of ground, and a paragraph's worth of space under it is not enough
   to read as the story starting. */
.hsm-body:has(.hsm-tale) > div:nth-of-type(2) {
    padding-top: clamp(2.5rem, 6vw, 4.5rem);
}

.hsm-body:has(.hsm-tale) .hsm-prose p {
    margin-bottom: 1.35em;
    line-height: 1.82;
}

/* The first paragraph is the way in, so it is carried a size larger. */
.hsm-body:has(.hsm-tale) .hsm-tale + .hsm-prose p:first-child,
.hsm-body:has(.hsm-tale) > div:nth-of-type(2) .hsm-prose p:first-child {
    font-size: clamp(19px, 1.7vw, 22px);
    line-height: 1.68;
}



/* ==========================================================================
   A RECIPE
   --------------------------------------------------------------------------
   Used standing up with the hands full. The list has to work on its own in a
   shop and the method on its own at the stove, so the two are set apart.
   ========================================================================== */

.hsm-shop {
    max-width: 38rem;
    margin: clamp(2.5rem, 6vw, 4rem) auto;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    background: var(--paper, #f6f3ee);
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
}

.hsm-shop-serves {
    margin: 0.6rem 0 0;
    font-family: var(--sans);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-55);
}

.hsm-shop-lists {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: clamp(1.5rem, 4vw, 2.5rem);
    margin-top: clamp(1.25rem, 3vw, 1.75rem);
}

.hsm-shop-lists h3 {
    margin: 0 0 0.7rem;
    font-family: var(--serif);
    font-size: clamp(17px, 1.5vw, 19px);
    font-weight: 400;
}

.hsm-shop-lists ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.hsm-shop-lists li {
    padding: 0.42em 0;
    border-bottom: 1px solid var(--hairline-soft);
    font-family: var(--serif);
    font-size: clamp(15.5px, 1.3vw, 17px);
    line-height: 1.45;
    color: var(--ink);
}

.hsm-shop-lists li:last-child {
    border-bottom: 0;
}

/* --- the method ---------------------------------------------------------
   Numbered, because a recipe is a sequence and doing six before five ruins
   it. The numbers sit outside the text so a cook can find their place again
   after looking away. */

.hsm-method {
    max-width: 38rem;
    margin: clamp(2.5rem, 6vw, 4rem) auto;
    padding: 0 clamp(20px, 5vw, 24px);
}

.hsm-method ol {
    margin: clamp(1.25rem, 3vw, 1.75rem) 0 0;
    padding: 0;
    list-style: none;
}

.hsm-method li {
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr);
    gap: 0 clamp(0.75rem, 2vw, 1.1rem);
    padding: clamp(0.9rem, 2vw, 1.2rem) 0;
    border-top: 1px solid var(--hairline-soft);
}

.hsm-method li:first-child {
    border-top: 0;
    padding-top: 0;
}

.hsm-method li > span {
    font-family: var(--serif);
    font-size: clamp(17px, 1.6vw, 20px);
    line-height: 1.6;
    color: var(--ink-55);
}

.hsm-method li p {
    margin: 0;
    font-family: var(--serif);
    font-size: clamp(17px, 1.42vw, 19px);
    line-height: 1.72;
    color: var(--ink);
    text-wrap: pretty;
}


/* ==========================================================================
   WHAT IS ON
   --------------------------------------------------------------------------
   Nine things happening, three to a row on a wide screen. A card whose date
   has passed is set back and says so: on paper this page is read in its own
   season, and on a website it is read for years.
   ========================================================================== */

.hsm-on {
    max-width: 60rem;
    margin: clamp(2.5rem, 6vw, 4rem) auto;
    padding: 0 clamp(20px, 5vw, 40px);
}

.hsm-on ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: clamp(1.75rem, 4vw, 2.75rem);
    margin: 0;
    padding: 0;
    list-style: none;
    /* Cards of different lengths sit on their own baselines rather than
       stretching to match the longest. */
    align-items: start;
}

.hsm-on-when {
    margin: 0 0 0.5rem;
    font-family: var(--sans);
    font-size: 10.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-55);
}

.hsm-on-when i {
    font-style: normal;
}

.hsm-on h3 {
    margin: 0 0 0.6rem;
    font-family: var(--serif);
    font-size: min(clamp(19px, 1.8vw, 23px), 28px + (clamp(19px, 1.8vw, 23px) - 28px) * 0.6);
    font-weight: 400;
    line-height: 1.18;
    text-wrap: balance;
}

.hsm-on-said {
    margin: 0 0 0.9rem;
    font-family: var(--serif);
    font-size: clamp(15.5px, 1.3vw, 17px);
    line-height: 1.62;
    color: var(--ink);
}

.hsm-on a {
    font-family: var(--sans);
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--hairline);
    padding-bottom: 2px;
}

.hsm-on a:hover {
    border-bottom-color: currentColor;
}

.hsm-on a i {
    font-style: normal;
    margin-left: 0.3rem;
}

/* Been and gone. Still worth listing - these repeat every year - but not
   worth anybody driving to this winter. */
.hsm-on-past {
    opacity: .58;
}


/* A verse inside a folktale: a few short lines set apart from the prose,
   as the page set them. */
.hsm-prose .hsm-verse {
    margin: clamp(1.5rem, 3vw, 2.25rem) auto;
    padding-left: clamp(1.25rem, 4vw, 2.5rem);
    font-style: italic;
    line-height: 1.7;
}


/* The reading room: everything a model wrote, waiting for Jack.
 *
 * No design draws this page - it is a room behind the sign-in - so the
 * classes are ours and they live here. Written in the designs' own
 * variables, as everything in this file is.                              */

.wr-page { max-width: 780px; margin: 0 auto; padding: clamp(90px, 12vh, 140px) var(--edge, 24px) 120px }
.wr-page h1 { font-family: var(--face); font-weight: 400; font-size: min(clamp(30px, 3.4vw, 44px), 28px + (clamp(30px, 3.4vw, 44px) - 28px) * 0.6); line-height: 1.1 }

/* The wall: every listing on the site as cards, at /studio/all.
   Jack, 7 September: "a page where i can see every single listing on the site
   as cards, so i'll see the image, title and the description text… i would
   like it to be visual." So the photograph leads, four by three, and the
   description is printed whole — clipping it to a line would hide the very
   fault the page exists to find. Hand-written, like the rest of this file. */
.wall-page { max-width: 1400px; margin: 0 auto; padding: clamp(90px, 12vh, 140px) var(--edge, 24px) 120px }
.wall-page h1 { font-family: var(--face); font-weight: 400; font-size: min(clamp(30px, 3.4vw, 44px), 28px + (clamp(30px, 3.4vw, 44px) - 28px) * 0.6); line-height: 1.1; margin: 0 }
.wall-top { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: baseline; justify-content: space-between; margin: 0 0 6px }
.wall-tally { font-family: var(--sans); font-size: 13px; color: var(--ink-55) }
.wall-fil { display: flex; flex-wrap: wrap; gap: 2px; margin: 22px 0 26px }
.wall-fil a { padding: 8px 14px; font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--ink-55); background: var(--paper); border: 1px solid var(--line) }
.wall-fil a:hover { color: var(--ink) }
.wall-fil a.on { background: var(--forest); color: var(--on-forest); border-color: var(--forest) }
.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px }
.wcard { background: var(--paper); border: 1px solid var(--line); display: flex; flex-direction: column }
.wcard .shot { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--stone-2, #E9E4DC); overflow: hidden }
.wcard .shot img { width: 100%; height: 100%; object-fit: cover; display: block }
.wcard .shot .none { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--sans); font-size: 12px; color: var(--ink-55) }
.wcard .n { position: absolute; left: 0; bottom: 0; background: var(--forest); color: var(--on-forest); font-family: var(--sans); font-size: 11px; font-weight: 500; padding: 4px 9px }
.wcard .body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1 }
.wcard h3 { font-family: var(--face); font-weight: 400; font-size: 21px; line-height: 1.2; margin: 0 }
.wcard h3 a { color: var(--ink) }
.wcard .where { font-family: var(--sans); font-size: 12px; color: var(--ink-55) }
.wcard p { margin: 0; font-family: var(--serif); font-size: 14.5px; line-height: 1.55 }
.wcard p.gap { font-style: italic; color: var(--ink-55) }
.wcard .foot { margin-top: auto; padding-top: 12px; display: flex; flex-wrap: wrap; gap: 14px; font-family: var(--sans); font-size: 12px; color: var(--ink-55) }
.wcard .foot a { color: var(--ink-55) } .wcard .foot a:hover { color: var(--ink) }
.wall-page-nav { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin: 40px 0 0; font-family: var(--sans); font-size: 13px }
.wall-page-nav a, .wall-page-nav span { padding: 8px 14px; border: 1px solid var(--line); background: var(--paper); color: var(--ink-55) }
.wall-page-nav a:hover { color: var(--ink) }
.wall-page-nav span.here { background: var(--forest); color: var(--on-forest); border-color: var(--forest) }
@media (max-width: 600px) { .wall { grid-template-columns: 1fr } }
.wr-lede { font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.6; color: var(--ink-75); margin-top: 14px; max-width: 56ch }

.wr-tabs { display: flex; gap: 22px; margin: 30px 0 10px; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase }
.wr-tabs a { color: var(--ink-35) }
.wr-tabs a.on { color: var(--ink) }

.wr { padding: 30px 0 34px }
.wr + .wr { border-top: 1px solid var(--hair, rgba(65,64,66,.12)) }
.wr header { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap }
.wr h2 { font-family: var(--face); font-weight: 400; font-size: 22px; line-height: 1.2 }
.wr header a { font-family: var(--sans); font-size: 12px; color: var(--moss); word-break: break-all }
.wr-meta { font-family: var(--sans); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-35); white-space: nowrap }

/* The words themselves, set the way they will be read on the page. */
.wr-words { font-family: var(--serif); font-size: 17px; line-height: 1.68; margin-top: 16px; text-wrap: pretty }

.wr-note { font-family: var(--serif); font-style: italic; font-size: 15px; line-height: 1.6; margin-top: 14px; padding: 12px 16px; background: var(--stone, #E4DED9); color: var(--ink-75) }
.wr-note b { font-style: normal; font-weight: 500; color: var(--ink) }

.wr-acts { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap }
.wr-back { margin-top: 16px }
.wr-back label { display: block; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--moss); margin-bottom: 8px }
.wr-back textarea { width: 100%; padding: 12px 14px; font-family: var(--serif); font-size: 16px; line-height: 1.55; color: var(--ink); background: var(--paper); border: 1px solid var(--hair, rgba(65,64,66,.2)); resize: vertical }
.wr-wrong { display: block; margin-top: 6px; font-family: var(--sans); font-size: 12px; color: #682114 }
.wr-none { font-family: var(--serif); font-style: italic; color: var(--ink-55); margin-top: 40px }

/* The way between the studio's rooms.
 *
 * Six desks and, until the 6th, no way to get from one to another: each had
 * to be reached by typing its address. Not the site's navigation - this is a
 * back room and it should not pretend otherwise.                          */

.st-bar { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 34px; padding-bottom: 14px; border-bottom: 1px solid var(--hair, rgba(65,64,66,.12)); font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase }
.st-bar a { color: var(--ink-35) }
.st-bar a:hover { color: var(--ink-75) }
.st-bar a.on { color: var(--ink) }


/* The news desk: the stories the morning run found.
 *
 * The reading room's own furniture, with a photograph beside the words -
 * which is the whole reason this is a page and not the document it was.   */

.nw .nw-body { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 16px }
.nw .nw-body .wr-words { margin-top: 0 }
.nw-ph { margin: 0 }
.nw-ph img { width: 100%; aspect-ratio: 1337 / 1080; object-fit: cover; background: var(--stone-2, #D8D1CB); display: block }
.nw-ph figcaption { margin-top: 6px; font-family: var(--sans); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-35) }
.nw-none { display: grid; place-items: center; aspect-ratio: 1337 / 1080; background: var(--stone, #E4DED9); font-family: var(--sans); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-35) }

@media (max-width: 620px) {
  .nw .nw-body { grid-template-columns: 1fr }
}

/* What it has learned, in its own words, with the stories that taught it. */

.nw-learned { margin-top: 60px; padding-top: 26px; border-top: 1px solid var(--hair, rgba(65,64,66,.12)) }
.nw-learned h2 { font-family: var(--face); font-weight: 400; font-size: 24px; line-height: 1.15 }
.nw-learned > p { font-family: var(--serif); font-size: 16px; line-height: 1.65; color: var(--ink-75); margin-top: 10px; max-width: 60ch }
.nw-learned ul { margin-top: 20px; list-style: none; padding: 0 }
.nw-learned li { display: grid; gap: 4px; padding: 14px 0; border-top: 1px solid var(--hair, rgba(65,64,66,.12)) }
.nw-learned li b { font-family: var(--face); font-weight: 400; font-size: 19px }
.nw-learned li span { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--ink-75) }
.nw-learned li i { font-family: var(--sans); font-style: normal; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-35) }
.nw-learned li button { justify-self: start; margin-top: 6px; font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--moss) }
.nw-learned li button:hover { color: var(--ink) }

.nw-empty { font-family: var(--serif); font-style: italic; font-size: 16px; line-height: 1.6; color: var(--ink-55); text-wrap: pretty }

/* An event carries a line as well as a body: the words that sit under the
   title on a what's-on card, which is where an empty one shows.          */
.nw-line { font-family: var(--face); font-weight: 400; font-size: 19px; line-height: 1.25; margin-bottom: 12px }

/* ---- the keepers' room, from you.html ---- */
.wr-page{max-width: 780px; margin: 0 auto; padding: clamp(90px, 12vh, 140px) var(--edge, 24px) 120px}
.wr-page h1{font-family: var(--face); font-weight: 400; font-size: min(clamp(30px, 3.4vw, 44px), 28px + (clamp(30px, 3.4vw, 44px) - 28px) * 0.6); line-height: 1.1}
.wr-lede{font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.6; color: var(--ink-75); margin-top: 14px; max-width: 56ch}
.wr-shot{width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 2px; margin: 16px 0 4px; background: var(--stone, #e4ded9)}
.wr-faults{margin: 10px 0 0; padding: 10px 14px; list-style: none; background: var(--stone, #e4ded9); font-family: var(--sans); font-size: 12px; line-height: 1.5; color: var(--ink-75)}
.wr-faults li + li{margin-top: 4px}
.wr-faults li::before{content: "\2014\a0"}
.wr-tabs{display: flex; gap: 22px; margin: 30px 0 10px; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase}
.wr-tabs a{color: var(--ink-35)}
.wr-tabs a.on{color: var(--ink)}
.wr-page.wide{max-width:1100px;padding-top:clamp(40px,6vh,64px)}
.ksearch{margin-top:18px}
.ksearch input{width:100%;max-width:36rem;height:52px;padding:0 16px;background:var(--stone);font-family:var(--serif);font-size:17px;color:var(--ink)}
.ktable{margin-top:18px}
.kh,.kr{display:grid;grid-template-columns:2fr 1fr 1.4fr 1fr 1.2fr;gap:16px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--stone-2)}
.kh{font-family:var(--sans);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-55);border-bottom-color:var(--ink)}
.kr span{font-family:var(--serif);font-size:15.5px}
.kr b{display:block;font-family:var(--face);font-weight:400;font-size:18px;line-height:1.15}
.kr i{display:block;font-family:var(--serif);font-style:italic;font-size:13.5px;color:var(--ink-55)}
.kr:hover b{color:var(--moss)}
.kr.lapsing b::after{content:" · lapsing";font-family:var(--serif);font-style:italic;font-size:13px;color:var(--ink-55)}
.kr.way span:last-child{color:var(--forest)}
.kr.asked span:last-child{font-style:italic}
.kcols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);margin-top:24px}
.kcard{background:var(--stone);padding:20px 22px;margin-bottom:16px}
.kcard .kick{margin-bottom:8px}
.kcard b{font-family:var(--face);font-weight:400;font-size:20px;line-height:1.15}
.kcard p{margin-top:8px;font-family:var(--serif);font-size:15.5px;line-height:1.55}
.kcard .btns{margin-top:14px}
.krows div{padding:8px 0;border-top:1px solid var(--stone-2)}
.krows div:first-child{border:0;padding-top:0}
.krows b{font-size:17px}
.krows i{display:block;font-family:var(--serif);font-style:italic;font-size:13.5px;color:var(--ink-55)}
/* ---- end of the keepers' room ---- */
/* ---- the inbox (/basecamp/inbox, 15 October 2026) ----
   Our own helpdesk: the conversations, the one open, and what we know beside it. Hand-written like the rest of this
   sheet; every name is ib- (checked against every sheet Basecamp loads). Rows part by a shift of ground and by space,
   never by a rule; square corners throughout. */
.ib { padding: clamp(36px, 5vh, 56px) var(--edge, 28px) 120px; max-width: 1560px }
.ib-piles { margin-top: 0; flex-wrap: wrap; row-gap: 10px }
.ib-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 14px 0 22px; font-family: var(--sans); font-size: 13px }
.ib-filters a { color: var(--ink-55, rgba(65,64,66,.6)) }
.ib-filters a.on { color: var(--ink); text-decoration: underline; text-underline-offset: 4px }
.ib-search { margin-left: auto; flex: 0 1 340px }
.ib-search input, .ib-side input, .ib-side select, .ib-side textarea { width: 100%; padding: 9px 11px; font-family: var(--sans); font-size: 13px; color: var(--ink); background: var(--paper, #fff); border: 1px solid var(--hair, rgba(65,64,66,.2)); border-radius: 0 }
.ib-said { font-family: var(--sans); font-size: 14px; padding: 12px 16px; margin: 0 0 18px; background: var(--stone, #E4DED9); color: var(--ink) }
.ib-quiet { font-family: var(--sans); font-size: 12.5px; line-height: 1.5; color: var(--ink-55, rgba(65,64,66,.6)); margin: 8px 0 }
.ib-body { display: grid; grid-template-columns: minmax(260px, 330px) minmax(0, 1fr) minmax(220px, 280px); gap: 36px; align-items: start }

.ib-list { list-style: none; margin: 0; padding: 0; background: rgba(65,64,66,.04); max-height: calc(100vh - 120px); overflow-y: auto; position: sticky; top: 24px }
.ib-list li a { display: block; padding: 14px 16px; color: var(--ink) }
.ib-list li:nth-child(even) a { background: rgba(65,64,66,.025) }
.ib-list li.on a, .ib-list li a:hover { background: var(--stone, #E4DED9) }
.ib-row-top { display: flex; justify-content: space-between; gap: 10px; font-family: var(--sans); font-size: 13.5px }
.ib-row-top b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ib-row-top time { color: var(--ink-55, rgba(65,64,66,.6)); font-size: 12px; white-space: nowrap }
.ib-row-subject { display: block; margin-top: 3px; font-family: var(--sans); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.ib-row-snip { display: block; margin-top: 3px; font-family: var(--serif); font-size: 13.5px; line-height: 1.45; color: var(--ink-75, rgba(65,64,66,.8)) }
.ib-row-tags { display: block; margin-top: 6px; font-family: var(--sans); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-55, rgba(65,64,66,.6)) }
.ib-row-tags em { font-style: normal; color: #682114 }
.ib-empty { padding: 18px 16px; font-family: var(--serif); font-style: italic; color: var(--ink-55, rgba(65,64,66,.6)) }

.ib-thread { min-width: 0 }
.ib-head h2 { font-family: var(--face); font-weight: 400; font-size: 26px; line-height: 1.2; margin: 0 }
.ib-who { font-family: var(--sans); font-size: 13px; color: var(--ink-75, rgba(65,64,66,.8)); margin: 6px 0 0 }
.ib-who a { color: var(--moss) }
.ib-flag { font-family: var(--sans); font-size: 13px; line-height: 1.5; color: #682114; margin: 10px 0 }
.ib-said-list { list-style: none; margin: 22px 0 0; padding: 0 }
.ib-m { padding: 18px 20px; margin-bottom: 10px }
.ib-in { background: rgba(65,64,66,.035) }
.ib-out { background: var(--stone, #E4DED9); margin-left: 40px }
.ib-note { background: rgba(160,120,60,.12); font-style: italic }
.ib-m .wr-meta { white-space: normal; letter-spacing: .12em }
.ib-words { font-family: var(--serif); font-size: 16px; line-height: 1.62; margin-top: 10px; white-space: pre-wrap; overflow-wrap: anywhere }
.ib-files { list-style: none; margin: 12px 0 0; padding: 0; font-family: var(--sans); font-size: 13px }
.ib-files a { color: var(--moss) }
.ib-files span { color: var(--ink-55, rgba(65,64,66,.6)) }
.ib-draft { margin-top: 28px }
.ib-draft textarea { width: 100%; margin-top: 10px; padding: 16px 18px; font-family: var(--serif); font-size: 16px; line-height: 1.6; color: var(--ink); background: var(--paper, #fff); border: 1px solid var(--hair, rgba(65,64,66,.25)); border-radius: 0; resize: vertical }
.ib-more { margin-top: 26px }

.ib-side { min-width: 0; font-family: var(--sans); font-size: 13.5px; line-height: 1.5 }
.ib-side section { padding: 16px 18px; background: rgba(65,64,66,.035); margin-bottom: 12px }
.ib-side h3 { font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-55, rgba(65,64,66,.6)); margin: 0 0 8px }
.ib-side h3 + p { margin-top: 0 }
.ib-side select + h3 { margin-top: 16px }
.ib-side a { color: var(--moss) }
.ib-side form { display: grid; gap: 8px; margin-top: 8px }
.ib-side .btn, .ib-side input + .ib-row-acts { margin-top: 8px }
.ib-row-acts { display: flex; flex-wrap: wrap; gap: 8px }
.ib-orders { list-style: none; margin: 0 0 6px; padding: 0 }
.ib-orders li + li { margin-top: 10px }
.ib-orders span { color: var(--ink-75, rgba(65,64,66,.8)) }
.btn.small { padding: 8px 14px; font-size: 12px; min-height: 0 }

.ib-lessons { max-width: 1100px }
.ib-lesson { padding: 20px 22px; background: rgba(65,64,66,.035); margin-bottom: 12px }
.ib-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 10px }

/* Measured by the room, not the window: Basecamp's rail takes 246 of it, so at 1440 the canvas is 1127 and three
   columns leave the conversation 330 wide. Under 1240 the side drops beneath the conversation, two across. */
.ib { container-type: inline-size }
@container (max-width: 1240px) {
    .ib-body { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) }
    .ib-side { grid-column: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
    .ib-side section { margin-bottom: 0 }
}
@container (max-width: 700px) {
    .ib-body { grid-template-columns: 1fr }
    .ib-side { grid-column: auto; grid-template-columns: 1fr }
}
@media (max-width: 760px) {
    .ib { padding: 24px 16px 80px }
    .ib-body { grid-template-columns: 1fr; gap: 24px }
    .ib-side { grid-column: auto }
    .ib-list { position: static; max-height: 46vh }
    .ib-search { margin-left: 0; flex-basis: 100% }
    .ib-out { margin-left: 16px }
    .ib-pair { grid-template-columns: 1fr }
}