/* Additions the CMS needs on top of the theme's style.css. The theme file itself is unchanged.
   Everything here uses the theme's own tokens (colours, sizes), so it reads as part of the same design. */

:root { color-scheme: only light; }   /* the design is light: stop phones' "force dark" from muddying it */

/* Forms: honeypot, success message */
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__ok { margin: 0 0 16px; padding: 14px 16px; border-radius: 8px; background: #E6EDE4; font-weight: 600; color: var(--green-dark); }
.form.is-sending button[type="submit"], .news.is-sending button { opacity: .6; pointer-events: none; }
.form textarea[name="requests"] { min-height: 96px; }
.news-wrap { max-width: 34rem; margin-inline: auto; }

/* Hero options */
.hero--tall { height: min(82svh, 900px); }
.hero--short { height: min(42svh, 440px); }
.hero video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero--plain::before, .hero--plain::after { display: none; }
.hero--dark::before { background: linear-gradient(rgba(12, 14, 11, .78), rgba(12, 14, 11, 0)); }
.hero--dark::after { background: linear-gradient(rgba(12, 14, 11, 0), rgba(12, 14, 11, .86)); }
.hero--still .hero__slide { transition: none; }
.hero--inline { height: min(52svh, 520px); margin-bottom: clamp(28px, 4vw, 56px); }
.sec--banner { padding-top: 0; }
.title--left { text-align: left; }
.title--left h1, .title--left .title__lede { margin-inline: 0; }
.title--left .actions--center, .title--left .crumbs ol { justify-content: flex-start; }
.page--nohero .sheet { margin-top: clamp(12px, 3vw, 48px); }

/* Hero with the menu over the photograph and the content box rising into it (not full screen) */
.hero--over { height: min(74svh, 780px); min-height: 400px; }
.hero--over.hero--tall { height: min(88svh, 940px); }
.hero--over.hero--short { height: min(58svh, 560px); min-height: 340px; }
.hero--over::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 200px; z-index: 1; pointer-events: none; background: linear-gradient(rgba(12, 14, 11, .64), rgba(12, 14, 11, 0)); }
.page--lift .sheet { z-index: 2; margin-top: calc(-1 * clamp(64px, 9vw, 132px)); border-radius: 20px 20px 0 0; box-shadow: 0 -22px 44px rgba(12, 14, 11, .14); }
@media (min-width: 700px) { .page--lift .sheet { border-radius: 20px; } }
@media (max-width: 699px) {
  .hero--over, .hero--over.hero--tall { height: 64svh; min-height: 340px; }
  .hero--over.hero--short { height: 50svh; min-height: 300px; }
  .page--lift .sheet { margin-top: -40px; border-radius: 18px 18px 0 0; }
}

/* Small pieces */
.spacer { height: clamp(24px, 3vw, 48px); }
.spacer--s { height: clamp(12px, 1.5vw, 24px); }
.spacer--l { height: clamp(48px, 6vw, 96px); }
.spacer--line { border-top: 1px solid var(--line); margin-inline: var(--gutter); }
.figure { max-width: 1100px; margin-inline: auto; }
.figure button { display: block; width: 100%; overflow: hidden; cursor: zoom-in; border-radius: var(--radius); background: var(--sand); }
.figure img { width: 100%; }
.figure figcaption { margin-top: 10px; font-size: var(--fs-small); color: var(--ink-soft); text-align: center; }
.map--embed iframe { display: block; width: 100%; aspect-ratio: 4 / 3; border: 0; border-radius: var(--radius); background: var(--sand); }
.chron__item--text { grid-template-columns: 1fr; text-align: center; }
.tile span.tile__kind { margin-left: 6px; font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.preview-bar { position: sticky; top: 0; z-index: 200; padding: 10px 16px; background: var(--green); color: #fff; font-size: var(--fs-small); font-weight: 600; text-align: center; }
.preview-bar a { text-decoration: underline; }

/* Payment page */
.pay { max-width: 46rem; margin-inline: auto; }
.pay__choices { display: grid; gap: 12px; margin: 24px 0; }
.pay__choice { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border: 2px solid var(--line-strong); border-radius: var(--radius); background: #fff; cursor: pointer; }
.pay__choice:has(input:checked) { border-color: var(--green); }
.pay__choice input { margin-top: 6px; accent-color: var(--green); width: 18px; height: 18px; }
.pay__choice span { display: block; color: var(--ink-soft); font-size: var(--fs-small); }
.pay__choice strong { display: block; color: var(--ink); font-size: var(--fs-body); }

@media (max-width: 760px) {
  .title--left { text-align: center; }
}

/* Two-up form rows: keep date fields inside the form panel on narrow panels (they overflowed in the original) */
.form__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.form__row .field { min-width: 0; }

/* ---------------------------------------------------------------- Booking form: availability calendar
   Colours are written out (not taken from the theme's tints) so every state keeps a strong contrast:
   dark numbers on white for free nights, a clear amber for the last room, grey with a strike for full nights. */
.avail { margin: 0 0 20px; padding: 16px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: #fff; color: #171713; }
.avail.is-loading { min-height: 120px; opacity: .6; }
.avail__bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.avail__title { font-size: var(--fs-body); font-weight: 700; text-align: center; color: #171713; }
.avail__nav { width: 44px; height: 44px; border: 2px solid #171713; border-radius: 50%; background: #fff; font-size: 24px; line-height: 1; cursor: pointer; color: #171713; }
.avail__nav:hover:not(:disabled) { background: #171713; color: #fff; }
.avail__nav:disabled { border-color: #B9B1A1; color: #8C8272; cursor: default; }
.avail__months { display: grid; gap: 20px; }
.avail__months--2 { grid-template-columns: 1fr 1fr; }
.avail__name { margin-bottom: 8px; font-weight: 700; font-size: var(--fs-small); text-align: center; color: #171713; }
.avail__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.avail__dow { padding: 4px 0; font-size: .8125rem; font-weight: 700; color: #453F35; text-align: center; text-transform: uppercase; letter-spacing: .04em; }
.avail__day { position: relative; aspect-ratio: 1 / 1; min-height: 38px; padding: 0; border: 1px solid #B9B1A1; border-radius: 8px; background: #fff; font: inherit; font-size: 1rem; font-weight: 700; color: #171713; cursor: pointer; }
.avail__day:hover:not(:disabled):not(.is-start):not(.is-end) { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); background: #EEF4EE; }
.avail__day:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.avail__day.is-high::after { content: ""; position: absolute; left: 28%; right: 28%; bottom: 4px; height: 3px; border-radius: 2px; background: #9A7A3A; }
.avail__day.is-few { background: #FFE49A; border-color: #B8860B; }
.avail__day.is-full { background: #DDD7CA; background-image: repeating-linear-gradient(135deg, rgba(23, 23, 19, .09) 0 2px, transparent 2px 7px); border-color: #DDD7CA; color: #3B362D; text-decoration: line-through; text-decoration-thickness: 2px; font-weight: 600; }
.avail__day:disabled { cursor: not-allowed; }
.avail__day:disabled:not(.is-full) { background: #F4F1EA; border-color: transparent; color: #6B6354; font-weight: 500; }
.avail__day.is-wait { background: #F4F1EA; border-color: transparent; color: transparent; }
.avail__day.is-in { background: #CFE3D2; border-color: #9DBFA4; color: #12301C; border-radius: 4px; text-decoration: none; }
.avail__day.is-start, .avail__day.is-end { background: var(--green); border-color: var(--green); color: #fff; text-decoration: none; font-weight: 700; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--green); z-index: 1; }
.avail__day.is-start.is-high::after, .avail__day.is-end.is-high::after { background: #fff; }
.avail__legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 16px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); list-style: none; font-size: .9375rem; color: #171713; }
.avail__legend li { display: flex; align-items: center; gap: 8px; }
.avail__key { display: inline-block; width: 20px; height: 20px; border-radius: 5px; border: 1px solid #B9B1A1; background: #fff; }
.avail__key--few { background: #FFE49A; border-color: #B8860B; }
.avail__key--full { background: #DDD7CA; background-image: repeating-linear-gradient(135deg, rgba(23, 23, 19, .09) 0 2px, transparent 2px 7px); border-color: #DDD7CA; }
.avail__key--high { border: 0; height: 4px; border-radius: 2px; background: #9A7A3A; }
.avail__rates { margin: 10px 0 0; font-size: .9375rem; color: #453F35; }
.avail__hint { margin: 10px 0 0; padding: 10px 12px; border-radius: 8px; background: #EEF4EE; font-size: 1rem; font-weight: 700; color: #12301C; }

/* Activities on the booking form */
.acts { margin: 0 0 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--sheet); }
.acts summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; font-weight: 700; cursor: pointer; list-style: none; }
.acts summary::-webkit-details-marker { display: none; }
.acts summary::after { content: "+"; font-size: 22px; line-height: 1; font-weight: 400; }
.acts[open] summary::after { content: "–"; }
.acts summary small { margin-right: auto; font-weight: 400; color: var(--earth); font-size: .875rem; }
.acts__note { margin: 0; padding: 0 16px 10px; font-size: .9375rem; color: var(--ink-soft); }
.acts__list { border-top: 1px solid var(--line); }
.acts__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.acts__item:last-child { border-bottom: 0; }
.acts__item label { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; cursor: pointer; }
.acts__item input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin-top: 3px; accent-color: var(--green); }
.acts__meta { text-align: right; font-size: .9375rem; white-space: nowrap; }
.acts__meta small { display: block; font-size: .8125rem; color: var(--earth); }
.acts__item select { display: none; grid-column: 1 / -1; width: auto; min-width: 120px; justify-self: start; margin-left: 30px; height: 40px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; font: inherit; }
.acts__item:has(input:checked) select { display: block; }
.acts__item:has(input:checked) { background: #F3F6F1; }

/* The estimate */
.quote { margin: 0 0 20px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--sheet); }
.quote--bad { background: #F9E4DD; border-color: #E9BFB2; }
.quote__msg { margin: 0 0 8px; font-weight: 600; }
.quote--bad .quote__msg { color: var(--error); }
.quote__lines { margin: 0; }
.quote__lines > div { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; font-size: .9375rem; }
.quote__lines dt { font-weight: 400; }
.quote__lines dd { margin: 0; white-space: nowrap; font-weight: 600; }
.quote__lines .quote__total { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line-strong); font-size: var(--fs-body); }
.quote__lines .quote__total dt { font-weight: 700; }
.quote__fine { margin: 8px 0 0; font-size: .875rem; color: var(--ink-soft); }

/* ---------------------------------------------------------------- Guest portal */
.portal { max-width: 60rem; margin-inline: auto; }
.portal--signin { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 24px; align-items: start; }
.portal .form { padding: clamp(24px, 3vw, 36px); }
.portal .form__error { margin: 0 0 16px; }
.portal__bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.portal__nav { margin: 0; }
.portal__nav .tabs__tab { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); }
.portal__nav .tabs__tab.is-active { color: #fff; }
.portal__count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--error); color: #fff; font-size: .8125rem; font-weight: 700; }
.portal__out { flex: none; padding-top: 12px; }
.portal__link { font: inherit; font-size: var(--fs-small); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; background: none; border: 0; color: var(--ink-soft); }
.portal .panel + .panel, .portal .panel + .form, .portal .form + .panel, .portal__booking + .portal__booking { margin-top: 24px; }
.portal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.portal__head .panel__title { margin: 0; }
.portal__dates { margin: 4px 0 0; color: var(--ink-soft); }
.portal__note { margin: 16px 0 0; font-weight: 600; }
.portal__facts { margin-top: 20px; margin-bottom: 8px; }
.portal__muted { color: var(--earth); font-size: .9375rem; font-weight: 400; }
.portal .tbl th .portal__muted { margin-left: 6px; }
.portal__sum th, .portal__sum td { font-weight: 700 !important; }
.portal__actions { margin-top: 24px; align-items: center; }
.portal__past { margin-top: 32px; }
.portal__past summary { font-weight: 700; cursor: pointer; padding: 12px 0; }
.portal__switch { margin-bottom: 24px; }
.portal__switch .chip { display: inline-flex; align-items: center; text-decoration: none; }
.portal__switch .chip.is-active { background: var(--ink); color: #fff; }
.portal__form { margin-top: 24px; }
.portal__person { margin: 0 0 8px; padding: 0; border: 0; }
.portal__person legend { margin-bottom: 8px; font-weight: 700; }
.portal__agree { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 20px; }
.portal__agree input { flex: none; width: 20px; height: 20px; margin-top: 4px; accent-color: var(--green); }
.portal__arrive { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.portal__arrive p { margin: 0 0 14px; }
.portal__two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 24px; align-items: start; }
.portal__two .portal__form, .portal__two .panel { margin-top: 0; }
.portal__two .panel form { margin: 16px 0 0; }
.portal__code { display: inline-block; padding: 2px 10px; border-radius: 6px; background: #fff; border: 1px solid var(--line); font-size: 1.25rem; letter-spacing: .08em; white-space: nowrap; }
.pill { flex: none; display: inline-block; padding: 4px 14px; border-radius: 999px; font-size: .875rem; font-weight: 700; white-space: nowrap; background: #FBF0D2; color: #5C4100; }
.pill--ok { background: #DDEADD; color: #17431F; }
.pill--done { background: #E4E1D8; color: var(--ink-soft); }
.pill--off { background: #F9E4DD; color: var(--error); }

/* the service menu */
.smenu { margin: 0 0 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--sheet); overflow: hidden; }
.smenu__cat { margin: 0; padding: 12px 16px; background: #EFEADD; font-family: var(--body); font-size: var(--fs-small); font-weight: 700; letter-spacing: .02em; }
.smenu__item { display: grid; grid-template-columns: minmax(0, 1fr) auto 76px; gap: 12px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line); }
.smenu__item strong { display: block; }
.smenu__item span { display: block; font-size: .9375rem; color: var(--ink-soft); }
.smenu__price { font-size: .9375rem; font-weight: 600; text-align: right; white-space: nowrap; }
.smenu__price small { display: block; font-size: .8125rem; font-weight: 400; color: var(--earth); }
.smenu__qty input { width: 76px; height: 44px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; font: inherit; text-align: center; }
.smenu__item:has(input:not([value="0"]):valid) { }
.req { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.req:first-of-type { border-top: 0; }
.req span { display: block; font-size: .9375rem; color: var(--ink-soft); }
.req__staff { margin-top: 4px; padding-left: 10px; border-left: 3px solid var(--brass); color: var(--ink) !important; }
.req__side { flex: none; text-align: right; }
.req__side span { margin-top: 6px; font-weight: 600; color: var(--ink); }

/* messages */
.chat__list { display: flex; flex-direction: column; gap: 14px; max-height: 60vh; margin: 0 0 20px; padding: 0 4px 0 0; overflow-y: auto; list-style: none; }
.chat__msg { display: flex; flex-direction: column; max-width: 82%; }
.chat__msg--me { align-self: flex-end; align-items: flex-end; }
.chat__msg--them { align-self: flex-start; align-items: flex-start; }
.chat__bubble { padding: 12px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--line); overflow-wrap: anywhere; }
.chat__msg--me .chat__bubble { background: var(--green); border-color: var(--green); color: #fff; border-bottom-right-radius: 4px; }
.chat__msg--them .chat__bubble { border-bottom-left-radius: 4px; }
.chat__meta { margin-top: 4px; font-size: .8125rem; color: var(--earth); }
.chat__form { display: flex; gap: 12px; align-items: flex-end; }
.chat__form textarea { flex: 1; min-height: 56px; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: #fff; font: inherit; resize: vertical; }
.chat__form.is-sending button { opacity: .6; pointer-events: none; }

@media (max-width: 640px) {
  .portal__bar { flex-direction: column-reverse; }
  .portal__out { align-self: flex-end; padding-top: 0; }
  .portal__head { flex-direction: column-reverse; gap: 10px; }
  .smenu__item { grid-template-columns: minmax(0, 1fr) 76px; }
  .smenu__price { grid-column: 1; grid-row: 2; text-align: left; }
  .smenu__qty { grid-column: 2; grid-row: 1 / span 2; }
  .chat__msg { max-width: 92%; }
}

/* Booking form in a narrow column: dates one above the other, quieter activity list */
.form { container-type: inline-size; }
@container (max-width: 400px) {
  .form__row:has(input[type="date"]) { grid-template-columns: minmax(0, 1fr); }
}
.form__row .field input, .form__row .field select { min-width: 0; max-width: 100%; }
.acts { font-size: 1rem; }
.acts__item label { font-weight: 600; }

/* ---------------------------------------------------------------- Journal categories, "In brief", wildlife */
.chips--links .chip { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); }
.chips--links .chip.is-active { color: #fff; }
.chip__n { font-size: .8125rem; font-weight: 700; opacity: .7; }
.chips--links + .chips { margin-top: -16px; }
.card__cat { display: inline-block; margin-right: 6px; padding: 2px 10px; border-radius: 999px; background: var(--paper); color: var(--ink); font-size: .875rem; font-weight: 600; }
.sec--tint .card__cat { background: var(--sheet); }
.brief { margin: 0 0 clamp(28px, 3.5vw, 44px); padding: clamp(20px, 2.6vw, 30px); border-radius: var(--radius); background: var(--paper); }
.brief .brief__title, .prose .brief__title { margin: 0 0 10px; font-family: var(--body); font-size: var(--fs-small); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--earth); }
.brief ul { margin: 0; padding-left: 1.2em; }
.brief li + li { margin-top: 6px; }
.brief p { margin: 0; }
.brief--lead p { font-size: var(--fs-lede); line-height: 1.5; }
.card--species .card__sci, .title__meta i { font-style: italic; }
.card--species .card__sci { margin: 4px 0 0; color: var(--earth); font-size: var(--fs-small); }
.card__img--blank { display: grid; place-items: center; padding: 20px; background: linear-gradient(135deg, #E9E2D2, #D8C8AE); text-align: center; }
.card__img--blank span { font-family: var(--display); font-style: italic; font-size: clamp(1.4rem, 1rem + 1.6vw, 2rem); line-height: 1.15; color: rgba(23, 23, 19, .62); }
.cards > .is-hidden { display: none; }
.glance__label { margin: 0 0 6px; font-size: var(--fs-small); font-weight: 500; color: var(--earth); }
.glance__links { margin: 0 0 24px; padding: 0; list-style: none; }
.glance__links li { padding: 6px 0; font-weight: 600; }
.glance__links a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Design preview: the small bar a reviewer sees after opening the private link ---------- */
.review-bar { position: fixed; left: 50%; bottom: 14px; z-index: 300; transform: translateX(-50%); display: flex; align-items: center; gap: 6px 20px; flex-wrap: wrap; justify-content: center;
  width: max-content; max-width: calc(100vw - 24px); padding: 10px 22px; border-radius: 999px; background: #171713; color: #fff; font-size: 1rem; line-height: 1.4; box-shadow: 0 10px 34px -10px rgba(0, 0, 0, .55); }
.review-bar p { margin: 0; }
.review-bar p span { color: #D9D4C5; }
.review-bar a, .review-bar summary { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer; }
.review-bar summary { list-style: none; }
.review-bar summary::-webkit-details-marker { display: none; }
.review-bar summary::after { content: " ▴"; }
.review-bar__pages { position: relative; }
.review-bar__pages ul { position: absolute; bottom: calc(100% + 16px); left: 50%; transform: translateX(-50%); min-width: 230px; padding: 10px; border-radius: 14px; background: #171713; box-shadow: 0 10px 34px -10px rgba(0, 0, 0, .55); }
.review-bar__pages li a { display: block; padding: 8px 12px; border-radius: 8px; text-decoration: none; font-weight: 500; }
.review-bar__pages li a:hover { background: rgba(255, 255, 255, .12); }
@media (max-width: 760px) {
  .review-bar { left: 12px; right: 12px; bottom: 10px; transform: none; width: auto; border-radius: 16px; padding: 10px 14px; font-size: .9375rem; }
  .review-bar p span { display: none; }
}
@media print { .review-bar { display: none; } }

/* ---------- Wildlife pages: the photograph is as wide as the content box, not the whole screen ---------- */
.hero--inset { max-width: 1440px; margin-inline: auto; }
@media (min-width: 700px) {
  .hero--inset { width: calc(100% - clamp(24px, 6vw, 96px)); margin-top: clamp(12px, 3vw, 48px); border-radius: 20px; }
  .hero--inset + .sheet { margin-top: clamp(12px, 2vw, 28px); }
}

/* ---------- Two levels of tabs: the journal's subjects above, what belongs to one subject in a tray below ---------- */
.chips--links:has(+ .subnav) { margin-bottom: 18px; }
.subnav { max-width: 880px; margin: 0 auto 40px; padding: 18px clamp(16px, 3vw, 28px) 20px; border-radius: 16px; background: var(--paper); text-align: center; }
.subnav__title { margin: 0 0 14px; font-family: var(--display); font-size: 1.5rem; line-height: 1.2; }
.subnav__title span { margin-left: 8px; font-family: var(--body); font-size: var(--fs-small); color: var(--earth); }
.subnav__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; }
.subnav__row + .subnav__row { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.subnav__k { font-size: var(--fs-small); font-weight: 600; color: var(--earth); }
.chips--sub { gap: 8px; margin: 0; }
.chips--sub .chip { min-height: 40px; padding: 5px 16px; border: 1px solid var(--line-strong); background: var(--sheet); font-size: var(--fs-small); font-weight: 500; }
.chips--sub .chip:hover { border-color: var(--green); background: var(--sheet); }
.chips--sub .chip.is-active { border-color: var(--green); background: var(--green); color: #fff; }
.chips--links + .chips--sub { margin-top: 0; }
@media (max-width: 700px) { .chips--sub .chip { flex: 0 1 auto; } }

/* ---------- Journal article: the species it speaks of, linked to their profiles ---------- */
.seen { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; max-width: 44rem; margin: clamp(28px, 4vw, 44px) 0 0; padding-top: 20px; border-top: 1px solid var(--line); font-size: var(--fs-small); }
.seen__k { margin: 0; font-weight: 600; color: var(--earth); }
.seen ul { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.seen a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.seen a:hover { color: var(--green); }
@media (max-width: 700px) {
  /* the journal's subjects wrap as compact buttons on a phone instead of one full-width button per row */
  .chips--links .chip { flex: 0 1 auto; min-height: 44px; padding: 6px 16px; font-size: 1rem; }
  .chips--links { gap: 8px; }
}

/* ---------- Header: logo on the left, menu in the middle, button on the right ---------- */
.top--left .top__in { grid-template-columns: 1fr auto 1fr; gap: clamp(20px, 2.4vw, 40px); max-width: 1480px; min-height: 104px; transition: min-height .35s ease; }
.top--left .brand { justify-self: start; }
.top--left .brand img { width: clamp(118px, 9.5vw, 150px); transition: width .35s ease; }
.top--left .nav--main > ul { justify-content: center; gap: clamp(16px, 2vw, 34px); }
.top--left.is-scrolled .top__in { min-height: 80px; }
.top--left.is-scrolled .brand img { width: 112px; }
.top { transition: box-shadow .3s ease, background .25s, color .25s, border-color .25s; }
.top.is-scrolled { box-shadow: 0 10px 30px -22px rgba(23, 23, 19, .55); }
@media (max-width: 1300px) {
  .top--left .top__in { grid-template-columns: auto 1fr; min-height: 84px; }
  .top--left .brand img { width: 112px; }
}
@media (max-width: 700px) {
  .top--left .top__in { min-height: 72px; }
  .top--left .brand img, .top--left.is-scrolled .brand img { width: 96px; }
}

/* =========================================================
   Width of the website (Appearance → Layout)
   site--boxed: the content sits in a framed white box on the sand background.
   site--full:  the content runs from one side of the screen to the other; words and photographs keep their reading width inside.
   site--wide:  words and photographs may spread wider on large screens.
   foot--full / foot--boxed and foot--white / foot--dark: the footer's width and background.
   ========================================================= */
:root { --ed-max: 1320px; --box-max: 1440px; }
.site--wide { --wrap: 1400px; --ed-max: 1520px; --box-max: 1680px; }
.site--wide.site--boxed .top--left .top__in { max-width: calc(var(--box-max) + 40px); }
.site--wide .hero--inset { max-width: var(--box-max); }

/* Full width */
.site--full .sheet, .site--full.page--lift .sheet, .site--full.page--nohero .sheet {
  width: 100%; max-width: none; margin: 0; border-radius: 0; box-shadow: none;
}
.site--full .sheet > .sec:last-child { border-radius: 0; }
.site--full .hero--inset + .sheet { margin-top: 0; padding-top: clamp(4px, 1vw, 12px); }
@media (min-width: 700px) {
  /* the wildlife photograph lines up with the words below it */
  .site--full .hero--inset { width: calc(100% - var(--gutter) * 2); max-width: var(--wrap); margin-top: clamp(16px, 2.4vw, 36px); border-radius: var(--radius); }
}
.site--full main { display: flow-root; background: var(--sheet); }
/* the header spreads as wide as a full-width footer */
.site--full .top__in, .site--full .top--left .top__in { max-width: calc(var(--box-max) + 240px); }

/* Framed box on a page built with editorial sections: sections keep inside the box */
@media (min-width: 700px) {
  .site--boxed.page--editorial .sheet { overflow: clip; }
  .site--boxed.page--editorial .sheet .ed { --ed-edge: clamp(28px, 4vw, 64px); }
  .site--boxed.page--editorial .sheet > .ed:last-child, .site--boxed.page--editorial .sheet > .sec:last-child { border-radius: 0 0 20px 20px; }
}

/* Footer: full width */
.foot--full .wrap { max-width: calc(var(--box-max) + 240px); padding-inline: clamp(20px, 4.5vw, 80px); }
@media (min-width: 1100px) {
  .foot--full .foot__grid { grid-template-columns: minmax(260px, 2fr) repeat(3, minmax(0, 1fr)); gap: 40px clamp(40px, 5vw, 96px); }
}

/* Footer: its own framed box, like the content */
.foot--boxed { background: var(--sheet); }
@media (min-width: 700px) {
  .foot--boxed { width: calc(100% - clamp(24px, 6vw, 96px)); max-width: var(--box-max); margin: clamp(12px, 3vw, 48px) auto clamp(12px, 2vw, 32px); border-radius: 20px; }
}

/* Footer backgrounds */
.foot--white { background: var(--sheet); }
.site--full .foot--white:not(.foot--boxed) { border-top: 1px solid var(--line); }
.foot--dark { --line-strong: rgba(243, 239, 228, .2); background: var(--green-dark); color: #F3EFE4; }
.foot--dark .foot__h { color: #CDBF9E; }
.foot--dark .foot__base { color: rgba(243, 239, 228, .74); }
.foot--dark a:focus-visible { outline-color: #F3EFE4; }
.foot--dark .awards li, .foot--dark .awards strong { color: inherit; }
.foot--dark .awards img { padding: 8px; border-radius: 10px; background: #fff; box-sizing: content-box; }
.foot--dark .news input { border-color: transparent; }
.foot--dark .news .btn { background: #F3EFE4; border-color: #F3EFE4; color: var(--green-dark); }
.foot--dark .news .btn:hover { background: #fff; border-color: #fff; }
.foot--dark .news__msg { color: inherit; }

/* Trying a width (only the signed-in person sees it) */
.layout-try { position: fixed; left: 50%; bottom: 16px; z-index: 300; transform: translateX(-50%); display: flex; align-items: center; gap: 18px; padding: 10px 12px 10px 20px; border-radius: 999px; background: var(--ink); color: #fff; font-size: var(--fs-small); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.layout-try p { margin: 0; }
.layout-try span { margin-left: 8px; opacity: .72; }
.layout-try a { padding: 8px 16px; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 600; white-space: nowrap; }
@media print { .layout-try { display: none; } }
body:has(.review-bar) .layout-try { bottom: 84px; }

/* =========================================================
   Size of the letters (Appearance → Layout → Reading comfort)
   Large (the default) and extra large lift every text size from the root, so menus, buttons, forms, captions and
   small print grow together; the large display headings keep their size so headings do not break into more lines.
   ========================================================= */
html.text--large { font-size: 112.5%; }
html.text--xl { font-size: 125%; }
html:is(.text--large, .text--xl) {
  --fs-h1: clamp(41.6px, 24px + 4.4vw, 76px);
  --fs-h2: clamp(33.6px, 24px + 2vw, 49.6px);
  --fs-h3: clamp(25.6px, 22.4px + .7vw, 30.4px);
}
html:is(.text--large, .text--xl) body.page--editorial .ed { --ed-h: clamp(33.6px, 20.8px + 2.4vw, 56px); }
html:is(.text--large, .text--xl) body.page:not(.page--editorial) .ed { --ed-h: clamp(35.2px, 20.8px + 2.6vw, 57.6px); }
html.text--xl .title__lede, html.text--xl .sec__intro { max-width: 50rem; }

/* Standard sections settle into view (script.js initReveal; not for visitors who asked for stillness when Movement follows the device) */
.rv-on .rv { opacity: 0; transform: translateY(22px); transition: opacity .8s cubic-bezier(.2, .6, .2, 1) var(--rv-d, 0ms), transform .9s cubic-bezier(.2, .6, .2, 1) var(--rv-d, 0ms); }
.rv-on .rv.is-in { opacity: 1; transform: none; }
@media print { .rv-on .rv { opacity: 1; transform: none; } }

/* Tabs made of whole sections (a Contact page: Contact us · Rates · Seasons · Job vacancies · Checking out) */
.tabs--page > .tabs__list { justify-content: center; gap: 10px; margin-bottom: clamp(24px, 3vw, 40px); }
.tabs--page > .tabs__list .tabs__tab { min-height: 54px; padding: 10px 24px; border-color: var(--line-strong); }
.tabs--page > .tabs__list .tabs__tab.is-active { border-color: var(--ink); }
.tabs--page > .tabs__panel { padding: 0; background: none; }
.tabs--page > .tabs__panel:focus { outline: none; }
.tabs--page > .tabs__panel > .prose { margin-inline: auto; }

/* ---------- Seasons calendar ---------- */
.sea__table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: var(--fs-small); line-height: 1.45; }
.sea__table th, .sea__table td { padding: 10px 8px; vertical-align: top; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); text-align: left; }
.sea__table tr > :last-child { border-right: 0; }
.sea__table thead th { padding-block: 12px; border-bottom: 2px solid var(--ink); font-weight: 600; text-align: center; background: none; }
.sea__table thead abbr { text-decoration: none; }
.sea__corner { width: 8.5rem; }
.sea__table tbody th { font-weight: 600; color: var(--ink); background: var(--paper); }
.sea__table .is-now { background: #F6F0E2; }
.sea__table thead .is-now { background: var(--ink); color: #fff; border-radius: 10px 10px 0 0; }
.sea__now { display: block; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.sea__temps td { text-align: center; }
.sea__c { display: block; font-weight: 600; color: var(--ink); }
.sea__f { display: block; font-size: .8125rem; color: var(--earth); }
.sea__rain td { text-align: center; height: 92px; vertical-align: bottom; }
.sea__bar { display: block; width: 60%; max-width: 34px; height: calc(var(--h) * .6); min-height: 3px; margin: 0 auto 6px; border-radius: 4px 4px 0 0; background: #7FA0A8; }
.sea__mm { display: block; font-size: .8125rem; color: var(--ink-soft); white-space: nowrap; }
.sea__note { color: var(--ink-soft); }
.sea__note.is-now { color: var(--ink); }
.sea__note-small { margin: 16px 0 0; font-size: var(--fs-small); color: var(--ink-soft); }
.sea__list { display: none; }
.sea__month { border-bottom: 1px solid var(--line); }
.sea__month summary { display: flex; align-items: baseline; gap: 10px; padding: 16px 4px; font-family: var(--display); font-size: 1.5rem; cursor: pointer; list-style: none; }
.sea__month summary::-webkit-details-marker { display: none; }
.sea__month summary::after { content: "+"; margin-left: auto; font-family: var(--body); font-size: 1.4rem; color: var(--earth); }
.sea__month[open] summary::after { content: "–"; }
.sea__month .sea__now { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--ink); color: #fff; font-family: var(--body); }
.sea__sum { font-family: var(--body); font-size: var(--fs-small); color: var(--earth); }
.sea__month ul { margin: 0 0 18px; padding: 0 4px; list-style: none; display: grid; gap: 10px; }
.sea__month li strong { display: block; font-size: var(--fs-small); color: var(--earth); font-weight: 600; }
@media (max-width: 1080px) {
  .sea__wrap { display: none; }
  .sea__list { display: block; }
}

/* ---------- Job vacancies ---------- */
.jobs { max-width: 52rem; margin-inline: auto; }
.jobs--none p { margin: 0; padding: clamp(22px, 3vw, 36px); border-radius: var(--radius); background: var(--paper); font-size: var(--fs-lede); line-height: 1.55; text-align: center; }
.jobs__list { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.job { padding: clamp(20px, 2.6vw, 32px); border-radius: var(--radius); background: var(--paper); }
.job__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 24px; }
.job__title { font-size: var(--fs-h3); }
.job__closes { margin: 0; font-weight: 600; color: var(--green); }
.job__meta { margin: 6px 0 0; color: var(--earth); }
.job__text { margin-top: 12px; }
.jobs__apply { margin: 22px 0 0; }
@media (max-width: 640px) {
  .tabs--page > .tabs__list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .tabs--page > .tabs__list .tabs__tab { min-height: 50px; padding: 8px 12px; }
  .tabs--page > .tabs__list .tabs__tab:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.job__sum { margin: 10px 0 0; }
.job__more { margin-top: 12px; }
.job__more summary { cursor: pointer; font-weight: 600; color: var(--green); }
.job__more[open] summary { margin-bottom: 8px; }
.job__acts { margin: 16px 0 0; }

/* ---------- Journal subjects: one line that slides sideways, never a second row ---------- */
.chipbar { position: relative; display: flex; align-items: center; gap: 8px; max-width: 100%; margin: 0 auto clamp(24px, 3vw, 36px); }
.chipbar > .chips--links { flex: 1 1 auto; flex-wrap: nowrap; justify-content: safe center; margin: 0; padding: 4px 2px; scroll-padding-inline: 32px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; }
.chipbar > .chips--links::-webkit-scrollbar { display: none; }
.chipbar > .chips--links .chip { flex: 0 0 auto; white-space: nowrap; }
.chipbar.is-overflowing > .chips--links { justify-content: flex-start; padding-inline: 30px; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); }
.chipbar__btn { flex: none; display: none; width: 44px; height: 44px; place-items: center; border: 1.5px solid var(--line-strong); border-radius: 50%; background: var(--sheet); color: var(--ink); cursor: pointer; }
.chipbar__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chipbar__btn:hover { border-color: var(--ink); }
.chipbar__btn:disabled { opacity: .3; cursor: default; }
.chipbar.is-overflowing .chipbar__btn { display: grid; }
@media (max-width: 700px) {
  .chipbar.is-overflowing .chipbar__btn { display: none; }
  .chipbar > .chips--links .chip { min-height: 44px; padding: 6px 16px; }
}

/* ---------- Birds & animals: a quiet list of choices under the subjects, not a second row of buttons ---------- */
.subnav { max-width: none; margin: 0 auto clamp(28px, 3.4vw, 44px); padding: 14px 0; border-radius: 0; background: none; border-block: 1px solid var(--line); }
.subnav__title { margin: 0 0 6px; font-size: 1.375rem; }
.subnav__row { gap: 4px 0; }
.subnav__row + .subnav__row { margin-top: 6px; padding-top: 6px; border-top: 0; }
.subnav__k { margin-right: 10px; }
.subnav .chips--sub { gap: 0; flex-wrap: wrap; justify-content: center; }
.subnav .chips--sub .chip { min-height: 40px; padding: 4px 14px; border: 0; border-radius: 0; background: none; color: var(--ink-soft); font-size: var(--fs-small); font-weight: 500; }
.subnav .chips--sub .chip { position: relative; }
.subnav .chips--sub .chip + .chip::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 14px; margin-top: -7px; background: var(--line-strong); }
@media (max-width: 700px) { .subnav__k { display: none; } .subnav .chips--sub .chip { padding-inline: 10px; } }
.subnav .chips--sub .chip:hover { background: none; color: var(--ink); text-decoration: underline; text-underline-offset: 6px; }
.subnav .chips--sub .chip.is-active { background: none; color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.chipbar:has(+ .subnav) { margin-bottom: 14px; }

/* =========================================================
   Footer, 1.7: links · awards and newsletter · in the press and partners · small print
   ========================================================= */
.foot__row { align-items: center; gap: 24px 56px; }
.foot__row .awards--foot { gap: 20px 28px; }
.foot__row .awards--foot li { width: 168px; gap: 8px; font-size: .875rem; }
.foot__row .awards--foot img { height: 84px; }
.foot__credits { display: grid; gap: 18px; margin-top: 36px; padding-top: 30px; border-top: 1px solid var(--line-strong); }
.foot__credit { display: grid; grid-template-columns: minmax(150px, 15rem) minmax(0, 1fr); align-items: center; gap: 8px 32px; }
.foot__k { margin: 0; font-family: var(--body); font-size: var(--fs-small); font-weight: 600; color: var(--earth); }
.foot__body { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; min-width: 0; }
.foot__logos .logo-text { font-size: .8125rem; font-weight: 600; letter-spacing: .04em; color: var(--ink-soft); white-space: nowrap; }
.foot__names { display: flex; flex-wrap: wrap; gap: 6px 0; margin: 0; padding: 0; list-style: none; font-size: var(--fs-small); }
.foot__names li { display: inline-flex; align-items: center; }
.foot__names li + li::before { content: "·"; margin: 0 12px; color: var(--earth); }
.foot__names a { text-decoration: none; }
.foot__names a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; margin: 0; padding: 0; list-style: none; }
.foot__logos li { display: flex; align-items: center; height: 40px; }
.foot__logo { display: block; width: auto; height: 34px; max-width: 110px; object-fit: contain; filter: grayscale(1); opacity: .6; transition: filter .25s, opacity .25s; }
.foot__logos a:hover .foot__logo, .foot__logos a:focus-visible .foot__logo { filter: none; opacity: 1; }
.foot__logoname { font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.foot__more { font-size: var(--fs-small); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }
.foot__more::after { content: " →"; }
.foot--dark .foot__logo { filter: grayscale(1) brightness(0) invert(1); opacity: .62; }
.foot--dark .foot__logos a:hover .foot__logo { filter: grayscale(1) brightness(0) invert(1); opacity: 1; }
.foot--dark .foot__k, .foot--dark .foot__names li + li::before { color: #CDBF9E; }
.foot--dark .foot__logoname { color: rgba(243, 239, 228, .8); }
.foot__base { margin-top: 30px; }
@media (max-width: 760px) {
  .foot__credit { grid-template-columns: minmax(0, 1fr); }
  .foot__logos { gap: 12px 22px; }
  .foot__logo { height: 28px; max-width: 90px; }
  .foot__row .awards--foot li { width: calc(50% - 14px); }
  .foot__row .awards--foot img { height: 72px; }
}
.foot__credit { align-items: start; }
.foot__k { padding-top: 2px; }
.foot__logos li { height: 44px; }
/* dividing lines as wide as the words, not the padding around them */
.foot__row, .foot__credits { position: relative; border-top: 0; }
.foot__row::before, .foot__credits::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid var(--line-strong); }
.foot--full .foot__row::before, .foot--full .foot__credits::before { left: clamp(20px, 4.5vw, 80px); right: clamp(20px, 4.5vw, 80px); }

/* A silent background film from YouTube or Vimeo, covering its box like a photograph */
.bgfilm { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; container-type: size; opacity: 0; transition: opacity 1.2s ease; }
.bgfilm.is-on { opacity: 1; }
.bgfilm iframe { position: absolute; top: 50%; left: 50%; width: max(100cqw, 177.78cqh); height: max(100cqh, 56.25cqw); transform: translate(-50%, -50%); border: 0; }
.hero > .bgfilm { z-index: 0; }
.cine__media > .bgfilm { z-index: 1; }

/* =========================================================
   Footer, 1.7.1: every band keeps the columns of the links above it
   [ the lodge          | Stay        | The lodge   | Plan your stay ]
   [ newsletter         | award       | award       | award          ]
   [ in the press       | partners and memberships                   ]
   ========================================================= */
.foot { --foot-cols: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); --foot-gap: 40px; }
@media (min-width: 1100px) { .foot--full { --foot-cols: minmax(260px, 2fr) repeat(3, minmax(0, 1fr)); --foot-gap: clamp(40px, 5vw, 96px); } }
.foot__mid, .foot__credits { display: grid; grid-template-columns: var(--foot-cols); column-gap: var(--foot-gap); }
.foot__mid { position: relative; align-items: center; row-gap: 28px; margin-top: 44px; padding-top: 36px; }
.foot__mid::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid var(--line-strong); }
.foot--full .foot__mid::before { left: clamp(20px, 4.5vw, 80px); right: clamp(20px, 4.5vw, 80px); }
.foot__news .news { max-width: 26rem; }
.foot__news .news__row { position: relative; display: block; }
.foot__news .news input { width: 100%; padding-right: 136px; }
.foot__news .news .btn { position: absolute; top: 5px; right: 5px; bottom: 5px; min-height: 0; padding: 0 20px; background: var(--ink); border-color: var(--ink); color: #fff; }
.foot__news .news .btn:hover { background: var(--green); border-color: var(--green); }
.foot__awards { grid-column: 2 / -1; }
.foot__awards .awards--foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--foot-gap); row-gap: 20px; margin: 0; }
.foot__awards .awards--foot li { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; justify-items: start; gap: 14px; width: auto; text-align: left; font-size: .875rem; line-height: 1.4; }
.foot__awards .awards--foot img { width: 64px; height: 64px; object-fit: contain; }
.foot__awards .awards--foot strong { font-size: var(--fs-small); line-height: 1.3; }
.foot__credits { row-gap: 22px; align-items: start; margin-top: 36px; padding-top: 30px; }
.foot__credit { display: block; }
.foot__credit--partners { grid-column: 2 / -1; }
.foot__credit:only-child { grid-column: 1 / -1; }
.foot__credit .foot__k { margin: 0 0 12px; padding: 0; }
.foot__credit--press .foot__names { display: block; }
.foot__credit--press .foot__names li { display: inline; }
.foot__credit--press .foot__names li + li::before { margin: 0 10px; }
.foot__credit--press .foot__names { line-height: 1.9; }
.foot__logos { gap: 16px 34px; }
.foot__logos li { height: 48px; }
.foot__logo { height: 40px; max-width: 120px; opacity: .78; filter: grayscale(1) contrast(1.15); }
.foot__body { gap: 14px 34px; }
/* social pages as round icons */
.social { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.social a { display: grid; place-items: center; width: 42px; height: 42px; border: 1.5px solid var(--line-strong); border-radius: 50%; color: var(--ink); transition: background .2s, color .2s, border-color .2s; }
.social a:hover { background: var(--ink); border-color: var(--ink); color: #fff; text-decoration: none; }
.social svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.social svg .fill { fill: currentColor; stroke: none; }
.foot--dark .social a { border-color: rgba(243, 239, 228, .35); color: #F3EFE4; }
.foot--dark .social a:hover { background: #F3EFE4; color: var(--green-dark); }
@media (max-width: 900px) {
  .foot__mid, .foot__credits { grid-template-columns: minmax(0, 1fr); }
  .foot__awards, .foot__credit--partners { grid-column: 1; }
  .foot__awards .awards--foot { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================
   Header menu, 1.8: an arrow on links that open a list; lists that keep every name on one line; a clear hover
   ========================================================= */
.nav > ul > li.has-sub > a { display: inline-flex; align-items: center; gap: 6px; }
.nav__chev { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.has-sub:hover .nav__chev, .has-sub:focus-within .nav__chev { transform: rotate(180deg); }
.nav > ul > li > a { transition: border-color .2s, color .2s; }
.nav > ul > li > a:hover { border-bottom-color: currentColor; }
.sub { width: max-content; min-width: 260px; max-width: min(92vw, 760px); padding: 10px; }
.sub ul { display: grid; gap: 2px; }
.sub a { white-space: nowrap; padding: 10px 16px; color: var(--ink); transition: background .15s, color .15s; }
.sub a:hover, .sub a:focus-visible { background: #E9E1CF; color: var(--green-dark); }
.sub a[aria-current] { background: #F1ECDF; font-weight: 600; }
.sub--wide { min-width: 0; }
.sub--wide ul { grid-auto-flow: column; grid-template-rows: repeat(var(--rows, 6), auto); grid-template-columns: none; column-gap: 8px; }
.sub__all { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin: 0 0 6px; padding: 12px 16px; border-radius: 8px; background: var(--paper); font-weight: 600; white-space: nowrap; }
.sub__all:hover { background: #E9E1CF; color: var(--green-dark); }
.sub__all + ul { padding-top: 4px; border-top: 1px solid var(--line); }
/* wide lists open centred under their link, so they never run off the screen */
.nav .has-sub > .sub--wide { left: 50%; right: auto; transform: translate(-50%, 6px); }
.nav .has-sub:hover > .sub--wide, .nav .has-sub:focus-within > .sub--wide { transform: translate(-50%, 0); }

/* Journal article: the photograph framed, as wide as the content column */
.hero--article { width: calc(100% - var(--gutter) * 2); max-width: var(--ed-max); height: min(62svh, 660px); margin-top: clamp(16px, 2.4vw, 36px); border-radius: var(--radius); }
@media (max-width: 699px) { .hero--article { width: calc(100% - var(--gutter) * 2); height: auto; aspect-ratio: 4 / 3; margin-top: 12px; border-radius: 14px; } }
.hero--article + .sheet { margin-top: clamp(12px, 2vw, 28px); }
.site--full .hero--article { max-width: var(--ed-max); }
.page--lift .hero--article + .sheet { margin-top: clamp(12px, 2vw, 28px); }

/* timeline: the floating "Milestones" button, shown while the timeline is on the screen */
.chron__item { scroll-margin-top: calc(var(--header, 88px) + 24px); }
.chron-nav { position: fixed; right: clamp(14px, 3vw, 32px); bottom: clamp(14px, 3vw, 28px); z-index: 90; display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .25s ease, transform .25s ease; }
.chron-nav.is-on { opacity: 1; transform: none; pointer-events: auto; }
.chron-nav__btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 20px 10px 16px; border: 0; border-radius: 999px; background: var(--ink); color: #fff;
  font: inherit; font-size: var(--fs-small); font-weight: 600; letter-spacing: .02em; cursor: pointer; box-shadow: 0 12px 30px -10px rgba(15, 15, 12, .45); }
.chron-nav__btn:hover { background: var(--green, #2F3A2B); }
.chron-nav__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.chron-nav__now { padding-left: 10px; margin-left: 2px; border-left: 1px solid rgba(255, 255, 255, .3); font-weight: 500; opacity: .85; }
.chron-nav__now:empty { display: none; }
.chron-nav__panel { width: min(280px, calc(100vw - 28px)); max-height: min(60vh, 460px); overflow-y: auto; padding: 14px 8px 8px; border-radius: 18px; background: var(--sheet, #fff);
  box-shadow: 0 18px 50px -12px rgba(15, 15, 12, .35); }
.chron-nav__title { margin: 0 12px 8px; font-size: var(--fs-small); color: var(--ink-soft); }
.chron-nav__panel ol { margin: 0; padding: 0; list-style: none; }
.chron-nav__panel a { display: block; padding: 10px 12px; border-radius: 10px; color: var(--ink); text-decoration: none; line-height: 1.3; }
.chron-nav__panel a:hover, .chron-nav__panel a:focus-visible { background: var(--sand, #F1EBDF); }
.chron-nav__panel a[aria-current] { font-weight: 700; background: var(--sand, #F1EBDF); }
@media print { .chron-nav { display: none; } }

/* map below the text, the full width */
.map-wide { display: grid; gap: clamp(24px, 3vw, 40px); }
.map-wide__text { max-width: 46rem; margin-inline: auto; text-align: center; }
.map-wide__text > :first-child { margin-top: 0; }
.map-wide .map { width: 100%; }
.map-wide .map button { padding: 0; background: none; }
.map-wide .map img { border-radius: var(--radius); }
.map--embed.map--h-medium iframe { aspect-ratio: auto; height: clamp(320px, 42vw, 440px); }
.map--embed.map--h-tall iframe { aspect-ratio: auto; height: clamp(380px, 52vw, 600px); }
.map--embed.map--h-xtall iframe { aspect-ratio: auto; height: clamp(440px, 64vw, 780px); }