/* Travel guide character layer: the homepage's "Volcanic Quiet" voice (abh-character.css)
   carried into the guide.
   - plaster paper under every section; two typefaces only, Cormorant for titles and figures
     and Inter for text and labels, as the guide already sets them;
   - the four chapters numbered like the Living Atlas, in clay;
   - the owner's three objects, and only these: the olive crown at the edge of chapter 01, the
     small jug in chapter 03 and the obsidian in chapter 04 (in its own colour: in the volcanic
     chapter the mineral is the subject), each in open space, never on text or photographs;
   - the repertoire numbered 01 to 08; the rhythms recomposed on the chapters' measure, on dark volcanic stone;
   - the homepage footer on the guide's sand closing.
   Markup comes from the abh-guide-character mu-plugin (scripts/build-guide-character.cjs). */

#travel-guide {
  --gc-ink: #1f1f1f;
  --gc-clay: #b07d67;
  --gc-plaster: url("../character/textures/plaster-1024.webp");
}

/* the chapter index under the carousel is gone (owner, 2026-10-16); the drawer keeps the links */
#travel-guide .guide-index { display: none !important; }

/* ---------- Surfaces: plaster paper, as under the homepage's Living Atlas ---------- */
#travel-guide :is(.edit-split, .cards-section, .edit-stack) {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
}
#travel-guide :is(.edit-split, .cards-section, .edit-stack)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--gc-plaster) center / 760px repeat;
  mix-blend-mode: multiply;
  opacity: .34;
  pointer-events: none;
}

/* ---------- Objects ---------- */
#travel-guide .gc-obj {
  position: absolute;
  z-index: 0;
  margin: 0;
  pointer-events: none;
  user-select: none;
}
/* !important: the theme sizes every content image (max-width:100%; height:auto) */
#travel-guide .gc-obj img {
  display: block;
  width: auto !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  mix-blend-mode: multiply;
  opacity: .9;
}
#travel-guide .gc-obj--color img { mix-blend-mode: normal; opacity: 1; }

/* ---------- Chapters: one quiet mark per chapter ----------
   A light Cormorant figure, a short hairline, the chapter's name and a small count; it replaces
   the original eyebrow and hairline (kept for screen readers), so the number is said once. */
#travel-guide .edit-split .gc-num {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 30px;
}
#travel-guide .edit-split .gc-num b {
  font-family: "Cormorant Garamond", "Noto Serif Display", Georgia, serif !important;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(40px, 3.2vw, 52px);
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--gc-clay);
  font-variant-numeric: lining-nums;
}
#travel-guide .edit-split .gc-num i {
  flex: none;
  width: 1px;
  height: 38px;
  background: rgba(31, 31, 31, .22);
}
#travel-guide .edit-split .gc-num span { display: flex; flex-direction: column; gap: 6px; }
#travel-guide .edit-split .gc-num em {
  font: 500 10.5px/1.3 Inter, Arial, sans-serif !important;
  font-style: normal !important;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #1f1f1f;
}
html:not([lang^="el"]) #travel-guide .gc-num em[lang="el"],
html[lang^="el"] #travel-guide .gc-num em[lang="en"] { display: none; }
#travel-guide .edit-split .gc-num small {
  font: 400 10px/1 Inter, Arial, sans-serif !important;
  letter-spacing: .18em;
  color: #9a9086;
}
/* the original eyebrow and hairline: visually hidden, still read aloud */
#travel-guide .edit-split .gc-num ~ .eyebrow {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
#travel-guide .edit-split .gc-num ~ .hairline { display: none !important; }

#travel-guide .edit-split__grid > div:has(> .gc-obj) { position: relative; }
#travel-guide .edit-split__grid > div:has(> .gc-obj) > :not(.gc-obj) { position: relative; z-index: 1; }
/* a deeper foot under the chapters holds the objects; a drop always stays inside it, so an
   object never reaches the next chapter, and the heights keep it clear of the text above */
@media (min-width: 761px) {
  #travel-guide .edit-split { padding-bottom: 176px; }
  #travel-guide #way { padding-bottom: 250px; }
}
#travel-guide .gc-obj--chapter {
  right: var(--gc-x, 0px);
  bottom: calc(-1 * var(--gc-drop, 160px));
  height: var(--gc-h, 200px);
}
/* 01: the olive crown grows in from the right page edge, its crown in the foot under the text */
#travel-guide .gc-obj--crown {
  right: 0;
  bottom: 0;
  height: 300px;
}
/* 03: the jug beside the chapter link, leaning out into the margin */
#travel-guide .gc-obj--village { --gc-h: 210px; --gc-x: -36px; }
/* 04: the obsidian in its own colour, inside the column, clear of the photograph */
#travel-guide .gc-obj--volcanic { --gc-h: 196px; --gc-x: -8px; }
#travel-guide .gc-obj--volcanic img { filter: drop-shadow(0 18px 22px rgba(36, 33, 29, .16)); }

/* ---------- Repertoire: numbered like a register ---------- */
#travel-guide .cards-grid { counter-reset: gc-card; }
#travel-guide .abh-card { counter-increment: gc-card; }
#travel-guide .abh-card__chip::before {
  content: counter(gc-card, decimal-leading-zero) "\2002\2014\2002";
  color: rgba(31, 31, 31, .45);
}


/* ---------- Rhythms: one composition with the chapters, in two typefaces ----------
   Cormorant for titles and figures, Inter for everything else (no third voice). The section
   sits on the chapters' 1160px measure; the photographs hold the left half, the three
   rhythms read as a ruled register on the right. */
#travel-guide .edit-stack { padding: clamp(96px, 9vw, 140px) clamp(24px, 4vw, 48px); }
#travel-guide .edit-stack__inner {
  max-width: 1160px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(48px, 7vw, 110px);
  align-items: center;
}
#travel-guide .edit-stack__media { min-height: clamp(560px, 50vw, 720px); }
#travel-guide .edit-stack__frame--tall { width: 64%; }
#travel-guide .edit-stack__frame--short { width: 56%; }
#travel-guide .edit-stack__text { max-width: none; padding-top: 0; }
#travel-guide .edit-stack__eyebrow {
  margin: 0 0 26px;
  padding-left: 0;
  font: 500 10px/1.5 Inter, Arial, sans-serif;
  letter-spacing: .2em;
  color: #986b55;
}
#travel-guide .edit-stack__eyebrow::before { display: none; }
#travel-guide .edit-stack__title {
  font-weight: 300;
  font-size: clamp(44px, 4.4vw, 68px);
  line-height: 1.02;
  letter-spacing: -.015em;
}
#travel-guide .edit-stack__lede {
  max-width: 34em;
  margin-top: 26px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: normal;
  font-weight: 400;
  font-size: clamp(19px, 1.45vw, 22px);
  line-height: 1.5;
  color: #4a443d;
}
#travel-guide .edit-stack__chapters { margin-top: clamp(40px, 4.4vw, 60px); counter-reset: gc-rhythm; }
/* a register: a small numeral on the title line, the title, then its note */
#travel-guide .edit-chapter {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: baseline;
  column-gap: 0;
  padding: 30px 0 32px;
  border-top: 1px solid rgba(31, 31, 31, .14);
  counter-increment: gc-rhythm;
}
#travel-guide .edit-chapter:last-child { border-bottom: 1px solid rgba(31, 31, 31, .14); }
/* the roman figure in the markup gives way to the page's 01-style numbering */
#travel-guide .edit-chapter__num {
  position: static;
  grid-row: 1;
  width: auto;
  margin: 0;
  font-size: 0 !important;
  line-height: 1;
  color: var(--gc-clay);
}
#travel-guide .edit-chapter__num::before {
  content: counter(gc-rhythm, decimal-leading-zero);
  font: 500 11px/1 Inter, Arial, sans-serif;
  letter-spacing: .2em;
}
#travel-guide .edit-chapter__title {
  grid-column: 2;
  margin: 0 0 10px;
  font-weight: 400;
  font-size: clamp(22px, 1.7vw, 26px);
  line-height: 1.2;
  letter-spacing: -.005em;
}
#travel-guide .edit-chapter__body {
  grid-column: 2;
  max-width: 50ch;
  margin: 0;
  font: 400 14.5px/1.75 Inter, Arial, sans-serif;
  color: #5b554d;
}
#travel-guide .edit-stack__footnote {
  margin-top: 26px;
  font: 400 13px/1.7 Inter, Arial, sans-serif;
  font-style: normal;
  color: #7a736a;
}
@media (max-width: 900px) {
  #travel-guide .edit-stack { padding: 72px 24px; }
  #travel-guide .edit-stack__inner { grid-template-columns: 1fr; }
  #travel-guide .edit-chapter { grid-template-columns: 44px minmax(0, 1fr); }
}


/* ---------- Rhythms on dark volcanic stone: the page's one contrast ----------
   Between the paper of the repertoire and the sand of the closing, the rhythms sit on the
   volcanic texture the homepage uses for its menu; type turns to bone, figures stay clay. */
#travel-guide .edit-stack {
  background: #1b1814;
  color: #efe8de;
}
#travel-guide .edit-stack::before {
  background: url("../character/textures/volcanic-1024.webp") center / 900px repeat;
  mix-blend-mode: normal;
  opacity: .2;
}
#travel-guide .edit-stack::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(27, 24, 20, .45), rgba(27, 24, 20, .78));
  pointer-events: none;
}
#travel-guide .edit-stack__eyebrow { color: #c99a82; }
#travel-guide .edit-stack__title, #travel-guide .edit-stack__title em { color: #f3ede4; }
#travel-guide .edit-stack__lede { color: rgba(239, 232, 222, .78); }
#travel-guide .edit-chapter,
#travel-guide .edit-chapter:last-child { border-color: rgba(239, 232, 222, .16); }
#travel-guide .edit-chapter__num { color: #c99a82; }
#travel-guide .edit-chapter__title { color: #f3ede4; }
#travel-guide .edit-chapter__body { color: rgba(239, 232, 222, .68); }
#travel-guide .edit-chapter, #travel-guide .edit-chapter:last-child { border-color: rgba(239, 232, 222, .13); }
#travel-guide .edit-stack__footnote { color: rgba(239, 232, 222, .56); }
#travel-guide .edit-stack__footnote a { color: #f3ede4; text-decoration-color: rgba(239, 232, 222, .4); }
#travel-guide .edit-stack__frame { box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .6); }
#travel-guide .edit-stack__frame::after { display: none; }

/* narrower columns grow taller: smaller objects, still inside the foot */
@media (max-width: 1200px) {
  #travel-guide .gc-obj--chapter { --gc-h: 170px; --gc-drop: 128px; --gc-x: 0px; }
  #travel-guide .gc-obj--volcanic { --gc-h: 150px; }
  #travel-guide .gc-obj--crown { height: 240px; }
}
@media (min-width: 761px) and (max-width: 1200px) {
  #travel-guide #way { padding-bottom: 210px; }
}
/* tablets in portrait: the crown a little smaller, clear of the chapter link */
@media (min-width: 761px) and (max-width: 900px) {
  #travel-guide .gc-obj--crown { height: 180px; }
  /* narrow columns: the objects sit below the chapter link instead of beside it */
  #travel-guide .gc-obj--chapter { --gc-h: 118px; --gc-drop: 128px; }
}
/* phones: one column (photograph, then text); each object sits under its chapter link */
@media (max-width: 760px) {
  #travel-guide .edit-split, #travel-guide .edit-split + .edit-split { padding-bottom: 150px; }
  #travel-guide #way { padding-bottom: 210px; }
  #travel-guide .gc-obj--chapter { --gc-h: 112px; --gc-drop: 128px; --gc-x: 0px; }
  #travel-guide .gc-obj--volcanic { --gc-h: 104px; }
  #travel-guide .gc-obj--crown { height: 190px; }
}

/* ---------- The homepage footer on the guide's sand ---------- */
#travel-guide .gc-footer { margin: 0; background: transparent !important; }
html body #travel-guide .gc-footer .abh-step7-creator-footer {
  display: block !important;
  background: transparent !important;
}
/* labels and small text in the footer's own voice (the theme forces its font elsewhere) */
html body #travel-guide .gc-footer .abh-step7-creator-footer :is(p, span, time, strong, address, .abh-step7-creator-footer__links a) {
  font-family: Inter, "Helvetica Neue", Arial, sans-serif !important;
}

/* ---------- Greek guide (5843): the same full-bleed page as the English one ----------
   The English guide carries these integration rules for page-id-5415 in its own content;
   the Greek translation never got them, so the theme's header, page title, boxed width and
   footer were showing around the guide. */
body.page-id-5843 { margin: 0; background: #f3efe8; }
body.page-id-5843 #wrapper, body.page-id-5843 #page_content_wrapper, body.page-id-5843 .page_content_wrapper,
body.page-id-5843 #page_content_wrapper .inner, body.page-id-5843 .inner_wrapper,
body.page-id-5843 .sidebar_content, body.page-id-5843 .post_wrapper, body.page-id-5843 .entry-content {
  width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important;
  float: none !important; background: transparent !important; box-shadow: none !important;
}
body.page-id-5843 #page_caption, body.page-id-5843 .header_style_wrapper, body.page-id-5843 #footer,
body.page-id-5843 #footer_wrapper, body.page-id-5843 .footer_bar, body.page-id-5843 .page_title_wrapper { display: none !important; }
body.page-id-5843 #travel-guide { width: 100%; margin: 0; }
body.page-id-5843.admin-bar .abh-lux-shell { top: 32px; }
@media (max-width: 782px) { body.page-id-5843.admin-bar .abh-lux-shell { top: 46px; } }

/* ---------- Limewash panels: a cool white wall against the warm paper ----------
   (owner's texture, after the Milos Cove experiences page). 02 and 04: the panel rises above
   the photograph and runs behind it to the page edge (02: the owner's black-and-white wave, behind
   the boat). 03: the jug stands on a panel that runs
   from under it to the page edge. Never behind text. Tablets keep the desktop walls; phones get
   a shorter wall that shows above and beside the photograph. */
@media (min-width: 761px) {
  #travel-guide :is(#sea, #volcanic) { padding-top: 150px; }
  #travel-guide :is(#sea, #volcanic)::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 34%;
    left: 62%;
    background: url("../character/textures/limewash-960.webp") center / cover;
    pointer-events: none;
  }
  #travel-guide #sea::after { background: url("../character/textures/wave-bw-960.webp") 40% 58% / cover; }
  #travel-guide .gc-obj--village::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 46%;
    left: -56px;
    right: -100vw;
    bottom: -30px;
    background: url("../character/textures/limewash-960.webp") left top / 960px auto;
    pointer-events: none;
  }
  #travel-guide .gc-obj--village img { position: relative; }
}

@media (max-width: 760px) {
  #travel-guide :is(#sea, #volcanic) { padding-top: 104px; }
  #travel-guide :is(#sea, #volcanic)::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 44px;
    left: 30%;
    right: 0;
    height: min(80vw, 320px);
    background: url("../character/textures/limewash-960.webp") center / cover;
    pointer-events: none;
  }
  #travel-guide #sea::after { background: url("../character/textures/wave-bw-960.webp") 40% 58% / cover; }
  #travel-guide .gc-obj--village::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 46%;
    left: -40px;
    right: -100vw;
    bottom: -24px;
    background: url("../character/textures/limewash-960.webp") left top / 640px auto;
    pointer-events: none;
  }
  #travel-guide .gc-obj--village img { position: relative; }
}

/* ---------- The opening carousel, in the hotels' editorial voice ----------
   (owner's references: Verina, Milos Cove, Gundari, Acro). Paper instead of a dark full-bleed
   screen: the words on the left in Cormorant and Inter, a large framed photograph on the right
   revealed by the beige wipe at every change, the limewash wall behind it, thin long arrows and
   a count under the frame. The carousel's markup and behaviour (abh-travel-guide.js) are
   untouched; only its presentation changes. */
#travel-guide {
  --gh-edge: max(48px, calc((100vw - 1280px) / 2 + 32px));
  /* the measure between the edges: the frame takes 58% of it, the words 34% */
  --gh-c: calc(100vw - 2 * var(--gh-edge));
  --gh-frame: calc(var(--gh-c) * .58);
  --gh-words: calc(var(--gh-c) * .34);
  --gh-top: 132px;
  --gh-bottom: 132px;
}
#travel-guide .hero {
  isolation: isolate;
  height: clamp(680px, 96svh, 980px) !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  background: #f3efe8 !important;
  overflow: hidden;
}
#travel-guide .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--gc-plaster) center / 760px repeat;
  mix-blend-mode: multiply;
  opacity: .34;
  pointer-events: none;
}
/* the frame */
#travel-guide .hero__slides {
  top: var(--gh-top) !important;
  bottom: var(--gh-bottom) !important;
  left: auto !important;
  right: var(--gh-edge) !important;
  width: var(--gh-frame) !important;
  height: auto !important;
  overflow: visible;
}
/* explicit layers (the Greek page's styles reorder them): walls 0, frame 1, words and controls 2 */
#travel-guide .hero__slides { z-index: 1 !important; }
#travel-guide :is(.guide-hero-copy, .hero__controls, .hero__meta-strip, .hero__progress) { z-index: 2 !important; }
/* the wall belongs to the hero (not the frame), so it always lies behind the photograph */
#travel-guide .hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: calc(var(--gh-top) - 56px);
  right: 0;
  width: calc(var(--gh-frame) * .46 + var(--gh-edge));
  height: calc((100% - var(--gh-top) - var(--gh-bottom)) * .58);
  background: url("../character/textures/limewash-960.webp") center / cover;
  pointer-events: none;
}
/* a quick change underneath, so the wipe is what the eye follows */
#travel-guide .hero__slide { overflow: hidden; transition: opacity .25s linear !important; }
#travel-guide .hero__media::after {
  content: "" !important;
  inset: 0;
  background: #d9d0c6 !important;
  mix-blend-mode: normal !important;
  transform: scaleX(0);
  transform-origin: right center;
}
#travel-guide .hero__slide.is-active .hero__media::after { animation: ghWipe 1.15s cubic-bezier(.7, 0, .3, 1) both; }
@keyframes ghWipe {
  0% { transform: scaleX(1); transform-origin: right center; }
  100% { transform: scaleX(0); transform-origin: right center; }
}
#travel-guide .hero__media img { filter: saturate(.86) contrast(.98) !important; }

/* the words */
#travel-guide#travel-guide .guide-hero-copy {
  left: var(--gh-edge) !important;
  right: auto !important;
  top: 50% !important;
  bottom: auto !important;
  width: var(--gh-words) !important;
  max-width: none !important;
  transform: translateY(-46%);
  pointer-events: auto;
}
#travel-guide#travel-guide .guide-hero-copy .guide-kicker {
  margin: 0 0 22px !important;
  font: 500 10.5px/1.5 Inter, Arial, sans-serif !important;
  letter-spacing: .22em !important;
  color: #986b55 !important;
}
#travel-guide#travel-guide .guide-hero-copy h1,
#travel-guide#travel-guide .guide-hero-copy h1 em {
  font-family: "Cormorant Garamond", "Noto Serif Display", Georgia, serif !important;
  font-weight: 300 !important;
  font-size: clamp(46px, 4.6vw, 76px) !important;
  line-height: 1 !important;
  letter-spacing: -.02em !important;
  color: #1f1f1f !important;
}
#travel-guide#travel-guide .guide-hero-copy h1 em { font-style: italic; color: #4a443d !important; }
#travel-guide#travel-guide .guide-hero-copy :is(h1, h1 em, p, a, span) { text-shadow: none !important; }
#travel-guide#travel-guide .guide-hero-copy > p:not(.guide-kicker) {
  max-width: 32em !important;
  margin: 26px 0 30px !important;
  font: 400 15px/1.7 Inter, Arial, sans-serif !important;
  color: #5b554d !important;
}
#travel-guide#travel-guide .guide-hero-copy .guide-text-link { color: #1f1f1f !important; border-color: rgba(31, 31, 31, .35) !important; }

/* the line of facts, quiet, at the foot of the words */
#travel-guide#travel-guide .hero__meta-strip {
  left: var(--gh-edge) !important;
  right: auto !important;
  bottom: 56px !important;
  color: #7a736a !important;
}
#travel-guide .hero__meta-sep { background: rgba(31, 31, 31, .25) !important; }

/* under the frame: thin long arrows, the count, pause */
#travel-guide .hero__controls {
  left: auto !important;
  right: var(--gh-edge) !important;
  bottom: 64px !important;
  width: var(--gh-frame);
  justify-content: flex-start;
  gap: 22px !important;
  color: #24211d;
}
#travel-guide .hero__nav {
  position: relative;
  width: 56px !important;
  height: 32px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #24211d !important;
  box-shadow: none !important;
}
#travel-guide .hero__nav svg { display: none; }
#travel-guide .hero__nav::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 4px;
  right: 4px;
  height: 1px;
  background: currentColor;
}
#travel-guide .hero__nav::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  border-top: 1px solid currentColor;
  border-left: 1px solid currentColor;
}
#travel-guide .hero__nav--prev::after { left: 4px; transform: translateY(-50%) rotate(-45deg); }
#travel-guide .hero__nav--next::after { right: 4px; transform: translateY(-50%) rotate(135deg); }
#travel-guide .hero__nav:is(:hover, :focus-visible) { color: #986b55 !important; }
#travel-guide .hero__nav--prev { order: 1; }
#travel-guide .hero__nav--next { order: 2; }
#travel-guide .hero__counter { order: 3; margin-left: auto; font: 400 22px/1 "Cormorant Garamond", Georgia, serif !important; color: #24211d !important; }
#travel-guide .hero__counter * { color: inherit !important; font: inherit !important; }
#travel-guide .guide-pause {
  order: 4;
  color: #7a736a !important;
  font: 500 10px/1 Inter, Arial, sans-serif !important;
  letter-spacing: .2em !important;
  border-color: rgba(31, 31, 31, .25) !important;
}
#travel-guide .hero__progress {
  left: auto !important;
  right: var(--gh-edge) !important;
  bottom: calc(var(--gh-bottom) - 1px) !important;
  width: var(--gh-frame) !important;
  background: rgba(31, 31, 31, .1) !important;
}
#travel-guide .hero__progress-bar { background: #986b55 !important; }

/* the header sits on paper over this opening */
#travel-guide .abh-lux-shell { background: rgba(243, 239, 232, .94) !important; border-bottom-color: rgba(31, 31, 31, .1) !important; }
#travel-guide .abh-lux-shell :is(.abh-lux-shell__menu, .abh-lux-shell__brand) { color: #1f1f1f !important; }
#travel-guide .abh-lux-shell .abh-lux-shell__bars span { background: #1f1f1f !important; }

@media (min-width: 761px) and (max-width: 1100px) {
  #travel-guide { --gh-top: 120px; --gh-bottom: 150px; --gh-frame: calc(var(--gh-c) * .54); --gh-words: calc(var(--gh-c) * .4); }
  #travel-guide#travel-guide .hero__meta-strip { display: none !important; }
}

/* phones: the frame first, the controls under it, then the words */
@media (max-width: 760px) {
  #travel-guide .hero {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    padding: 84px 20px 48px !important;
  }
  #travel-guide .hero__slides {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 62vw !important;
    min-height: 260px;
    order: 1 !important;
  }
  #travel-guide .hero::after { top: 56px; right: 0; width: 46%; height: 34vw; }
  #travel-guide .hero__progress { position: relative !important; inset: auto !important; width: 100% !important; order: 2 !important; margin-top: 0; }
  #travel-guide .hero__controls { position: relative !important; inset: auto !important; width: 100%; order: 3 !important; margin: 14px 0 26px; }
  #travel-guide#travel-guide .guide-hero-copy { position: relative !important; inset: auto !important; transform: none !important; width: 100% !important; order: 4 !important; }
  #travel-guide#travel-guide .guide-hero-copy h1, #travel-guide#travel-guide .guide-hero-copy h1 em { font-size: clamp(38px, 11vw, 48px) !important; }
  #travel-guide#travel-guide .hero__meta-strip { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  #travel-guide .hero__slide.is-active .hero__media::after { animation: none; }
}

/* the left patch: rose tuff from the page edge, above the words (owner, 2026-10-17) */
@media (min-width: 761px) {
  #travel-guide .guide-hero-copy::before {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: calc(100% + 36px);
    left: calc(-1 * var(--gh-edge));
    width: calc(var(--gh-edge) + var(--gh-words) * .62);
    height: clamp(90px, calc(50svh - 330px), 240px);
    background: url("../character/textures/tuff-rose-1024.webp") center / 640px;
    pointer-events: none;
  }
}
/* some of the photographs in black and white: the first and the fourth */
#travel-guide .hero__slide:is([data-slide="0"], [data-slide="3"]) .hero__media img {
  filter: grayscale(1) contrast(1.06) brightness(1.03) !important;
}
/* phones: the rose patch peeks out under the photograph's left corner, beside the arrows */
@media (max-width: 760px) {
  #travel-guide .hero__slides::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: -20px;
    bottom: -30px;
    width: 46%;
    height: 48%;
    background: url("../character/textures/tuff-rose-1024.webp") center / 420px;
    pointer-events: none;
  }
}
/* the Greek page's older styles push the photograph back (z-index -2) and let it shrink: the
   photograph fills its frame and sits above the walls, in both languages */
#travel-guide .hero__slide .hero__media { z-index: 0 !important; }
#travel-guide .hero__slide .hero__media img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
}

/* Rhythms: a rose tuff patch in its own piece of the background (owner: never behind a
   photograph). It fills the open corner under the tall photograph and left of the second one,
   running to the left page edge. Rose was chosen against clay, olive, sage, cream, silver,
   limewash and charcoal: the complement of the sea-green in the photographs, an echo of the clay
   figures, clear on the dark stone without the glare of the whites. */
#travel-guide .edit-stack__media { container-type: inline-size; }
#travel-guide .edit-stack__media::before {
  content: "";
  position: absolute;
  z-index: 0;
  /* the tall frame is 64% wide at 3:4, so it ends at 85.33% of the column's width */
  top: calc(85.33cqw + 32px);
  bottom: -48px;
  left: -100vw;
  right: calc(56% + 32px);
  background: url("../character/textures/tuff-rose-1024.webp") center / 560px;
  pointer-events: none;
}
#travel-guide .edit-stack__frame { z-index: 1; }
#travel-guide .edit-stack__frame--short { z-index: 2; }

/* one column on tablets and phones: the photographs take the full width (they had none) */
@media (max-width: 900px) {
  #travel-guide .edit-stack__media { width: 100% !important; justify-self: stretch !important; min-height: clamp(380px, 92vw, 640px) !important; }
  #travel-guide .edit-stack__inner { grid-template-columns: minmax(0, 1fr) !important; }
}
/* one column: the patch ends with the photographs, with air before the words below */
@media (max-width: 900px) {
  #travel-guide .edit-stack__media::before { bottom: 0; background-size: 420px; }
  #travel-guide .edit-stack__media { margin-bottom: 40px !important; }
}
/* desktop: the patch moves to the open field at the bottom-left, under the photographs and
   left of the words (owner's choice), reaching the left page edge */
@media (min-width: 901px) {
  #travel-guide .edit-stack__media::before {
    top: calc(100% + 64px);
    bottom: auto;
    height: clamp(170px, 15vw, 260px);
    right: 14%;
  }
  #travel-guide .edit-stack { padding-bottom: calc(clamp(170px, 15vw, 260px) + 120px) !important; }
}

/* Rhythms: a second texture from the right page edge, behind the right half of the three
   rhythms (owner). Olive tuff, lowered so the bone text keeps its contrast; it pairs with the
   rose patch at the bottom-left and the sea-green of the photographs. */
#travel-guide .edit-stack__chapters { position: relative; }
#travel-guide .edit-stack__chapters > .edit-chapter { position: relative; z-index: 1; }
#travel-guide .edit-chapter__body { color: rgba(243, 237, 228, .94) !important; }
#travel-guide .edit-stack__chapters :is(.edit-chapter__title, .edit-chapter__body, .edit-chapter__num) {
  text-shadow: 0 0 2px rgba(20, 17, 13, .85), 0 0 14px rgba(20, 17, 13, .7), 0 0 28px rgba(20, 17, 13, .45);
}
/* above the section's dark veil (its ::after), below the words */
#travel-guide .edit-stack__chapters::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -28px;
  bottom: -28px;
  left: 50%;
  right: -100vw;
  background:
    /* the stone as it is, not darkened (owner); the words keep their contrast through a soft
       shadow around the letters instead */
    url("../character/textures/tuff-olive-1024.webp") center / 560px;
  pointer-events: none;
}
@media (max-width: 900px) {
  #travel-guide .edit-stack__chapters::before { left: 42%; right: -24px; }
}