/* Shared article rhythm and interactions for the four current place pages.
   Deliberately scoped: no hero, navigation, Elsewhere, footer or pop-up rules. */
main.qc-place {
  --qc-space-small: 12px;
  --qc-space-copy: 24px;
  --qc-space-section: clamp(80px, 8vw, 112px);
  --qc-heading-size: clamp(26px, 2.3vw, 32px);
  /* MANNA's facts are the shared size reference for ordinary desktop copy. */
  --qc-facts-size: 14px;
  --qc-copy-size: var(--qc-facts-size);
  --qc-action-ink: #493729;
  --qc-action-fill: #ded2c2;
  --qc-action-hover: #d5c6b3;
  --qc-action-line: rgba(73, 55, 41, .32);
  --qc-action-radius: 3px;
}

/* Existing Quietcation font families are inherited, not replaced. */
html body main.qc-place :is(.after-opening-pair__copy, .city-story__copy) h3 {
  margin: 0 0 var(--qc-space-copy) !important;
  font-size: var(--qc-heading-size) !important;
  font-weight: 300;
  line-height: 1.2 !important;
  letter-spacing: -.015em;
  text-wrap: balance;
}
html body main.qc-place :is(.after-opening-pair__copy, .city-story__copy) p {
  margin: 0;
  font-size: var(--qc-copy-size) !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  letter-spacing: 0;
  text-align: left !important;
  -webkit-hyphens: none !important;
  hyphens: none !important;
  text-wrap: pretty;
}
html body main.qc-place :is(.after-opening-pair__copy, .city-story__copy) p + p {
  margin-top: 1.2em;
}
html body main.qc-place :is(.opening__media-title, .stay-intro__facts) h2 {
  font-size: 24px !important;
  line-height: 1.2 !important;
  letter-spacing: -.01em;
}
html body main.qc-place .practical__grid dd {
  font-size: var(--qc-facts-size) !important;
  line-height: 1.5 !important;
}
html body main.qc-place :is(.practical__grid, .location-note__details) :is(a, button) {
  text-decoration: none !important;
  text-decoration-line: none !important;
}
html body main.qc-place .practical__grid .facts-tag {
  /* Tags are metadata, not table prose: stay compact on every viewport. */
  font-size: 10px !important;
  line-height: 1.3 !important;
}
html body main.qc-place .opening__media-left .practical__grid .facts-tag {
  /* Compact the outlined pills; retain MANNA's unboxed inline tag layout. */
  padding: 4px 8px;
  letter-spacing: .06em;
}
html body main.qc-place .practical__grid :is(dt, .facts-details__label) {
  font-size: 10px !important;
  line-height: 1.6 !important;
  letter-spacing: .06em;
}
html body main.qc-place .opening {
  padding-block: var(--qc-space-section);
  row-gap: var(--qc-space-section);
}
html body main.qc-place :is(.city-story, .grace-pair, .location-note) {
  margin-top: var(--qc-space-section);
}
html body main.qc-place .location-note { padding-top: 0; }
html body main.qc-place .location-note > h2 {
  font-size: var(--qc-heading-size) !important;
  line-height: 1.2 !important;
  margin-bottom: 32px;
}
html body main.qc-place :is(.opening__full-copy, .editorial-statement) p {
  line-height: 1.5 !important;
}
/* The large opening paragraph stays justified at every viewport size. */
html body main.qc-place .opening__full-copy > p {
  text-align: justify !important;
  text-align-last: left !important;
  text-justify: inter-word;
  -webkit-hyphens: auto !important;
  hyphens: auto !important;
  word-spacing: normal;
  overflow-wrap: break-word;
  text-wrap: wrap;
}
html body main.qc-place .location-note__body > p:first-child {
  font-size: clamp(24px, 2.15vw, 30px) !important;
  line-height: 1.5 !important;
}
html body main.qc-place :is(.opening, .stay-intro, .after-opening-pair, .city-story, .grace-pair) .caption {
  box-sizing: border-box;
  padding-inline: 10px;
  font-family: var(--sans) !important;
  font-size: 10px !important;
  font-weight: 400;
  line-height: 1.5 !important;
  letter-spacing: .02em;
  text-transform: none;
}

/* Primary and secondary actions share geometry, but retain their hierarchy. */
html body main.qc-place :is(.facts-booking__button, .location-note__route) {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  max-width: 100% !important;
  min-height: 44px !important;
  padding: 12px 16px !important;
  border: 1px solid var(--qc-action-line) !important;
  border-radius: var(--qc-action-radius) !important;
  color: var(--qc-action-ink) !important;
  font: 500 10px/1.4 var(--sans) !important;
  letter-spacing: .06em !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  white-space: normal;
  opacity: 1 !important;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease !important;
}
html body main.qc-place .facts-booking__button {
  width: 100% !important;
  background: var(--qc-action-fill) !important;
}
html body main.qc-place .facts-booking__button:is(:hover, :focus-visible) {
  background: var(--qc-action-hover) !important;
}
html body main.qc-place .location-note__route {
  width: fit-content !important;
  margin: var(--qc-space-copy) 0 0 !important;
  background: transparent !important;
}
html body main.qc-place .location-note__route:is(:hover, :focus-visible) {
  background: rgba(73, 55, 41, .06) !important;
}
html body main.qc-place .location-note__booking {
  width: fit-content !important;
  margin: var(--qc-space-copy) 0 0 !important;
}
html body main.qc-place .location-note__body > p:has(.location-note__booking) {
  margin: 0;
  line-height: 1;
  text-align: left !important;
}
html body main.qc-place .location-note__body > p:has(.location-note__booking) + .location-note__route {
  margin-top: var(--qc-space-small) !important;
}
html body main.qc-place .location-note__actions { margin-top: var(--qc-space-copy); }
html body main.qc-place .location-note__actions .location-note__route { margin-top: 0 !important; }

/* Tertiary actions: one icon scale, one touch target, no filled button. */
html body main.qc-place :is(.facts-contact__action, .location-note__contact-link) {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  padding: 8px 0;
  border: 0;
  border-radius: var(--qc-action-radius);
  background: transparent;
  color: var(--qc-action-ink);
  letter-spacing: 0;
  text-align: left;
  text-decoration: none !important;
  text-transform: none;
  overflow-wrap: anywhere;
  cursor: pointer;
  opacity: 1;
  transition: background-color .2s ease, color .2s ease;
}
html body main.qc-place .practical__grid .facts-contact__action {
  /* Links and the native email button inherit the same font as their dd. */
  font: inherit !important;
}
html body main.qc-place .location-note__contact-link {
  font: 400 var(--qc-facts-size)/1.5 var(--sans) !important;
}
html body main.qc-place :is(.facts-contact__action, .location-note__contact-link):is(:hover, :focus-visible) {
  color: var(--qc-action-ink);
  background: rgba(73, 55, 41, .06);
  opacity: 1;
}
html body main.qc-place :is(.facts-contact__action, .location-note__contact-link) .lucide-icon {
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  stroke-width: 1.5;
  color: currentColor;
}
html body main.qc-place :is(.facts-booking__button, .location-note__route, .facts-contact__action, .location-note__contact-link):focus-visible {
  outline: 2px solid var(--qc-action-ink);
  outline-offset: 4px;
}

/* Hide only JS-armed, off-screen blocks. Never change their layout or transform. */
html body main.qc-place .qc-reveal {
  opacity: 1;
  transition: opacity 800ms cubic-bezier(.2, .65, .3, 1);
}
html body main.qc-place .qc-reveal.qc-reveal--waiting {
  opacity: 0;
  transition: none;
}
html body main.qc-place .qc-reveal:focus-within {
  opacity: 1;
  transition: none;
}
html body main.qc-place .qc-sticky-managed {
  /* Keep absolute children (especially map zoom controls) inside their
     component even while sticky behaviour is disabled on short screens. */
  position: relative !important;
  min-height: 0 !important;
}
@media (min-width: 901px) and (min-height: 600px) {
  html body main.qc-place .qc-sticky-managed.qc-can-stick {
    position: sticky !important;
    top: var(--qc-sticky-inset, 88px) !important;
    align-self: start;
  }
}

@media (max-width: 900px) {
  main.qc-place {
    --qc-gutter: 20px;
    --qc-gallery-slide: 68vw;
    --qc-copy-size: 18px;
    --qc-space-copy: 20px;
    --qc-space-section: 64px;
    --qc-heading-size: 26px;
  }
  html body main.qc-place .quiet-story { --article-gutter: var(--qc-gutter); }
  html body main.qc-place :is(.opening, .after-opening-pair, .city-story, .grace-pair, .location-note) {
    box-sizing: border-box;
    width: calc(100% - 2 * var(--qc-gutter));
    max-width: none;
    min-width: 0;
    margin-inline: auto;
    column-gap: 28px;
  }
  html body main.qc-place :is(.after-opening-pair, .city-story) { row-gap: 28px; }
  html body main.qc-place :is(.opening__full-copy, .opening__media-title, .opening__media-left, .after-opening-pair__copy, .city-story__copy, .location-note__body, .location-note > h2) {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0;
    max-width: none !important;
    margin-inline: 0 !important;
  }
  html body main.qc-place .opening__media { width: 100%; gap: 32px; }
  html body main.qc-place .opening__media-left .practical__grid { width: 100% !important; margin-inline: 0 !important; }
  /* Mobile chapters and later statements use a natural rag; the opening
     paragraph keeps its justified setting above. Tables and actions are separate. */
  html body main.qc-place :is(.editorial-statement, .after-opening-pair__copy, .city-story__copy) > p,
  html body main.qc-place .location-note__body > p:first-child {
    text-align: left !important;
    text-align-last: auto !important;
    text-justify: auto;
    -webkit-hyphens: manual !important;
    hyphens: manual !important;
    word-spacing: normal;
    overflow-wrap: break-word;
    text-wrap: pretty;
  }
  html body main.qc-place .city-story__images {
    /* The scrollport itself reaches BOTH viewport edges. The initial inset
       belongs to its padding, so photos can pass the left gutter while swiping. */
    box-sizing: border-box;
    width: calc(100% + 2 * var(--qc-gutter)) !important;
    margin-inline: calc(-1 * var(--qc-gutter)) !important;
    padding-inline-start: var(--qc-gutter);
    /* Finish at the normal right page inset, without an extra empty slide. */
    padding-inline-end: var(--qc-gutter);
    scroll-padding-inline: var(--qc-gutter);
  }
  html body main.qc-place .city-story__images > figure:last-of-type:not(:first-of-type) {
    scroll-snap-align: end;
  }
  html body main.qc-place :is(.opening__media-sticky, .after-opening-pair__images) .caption { margin-inline: 0 !important; }
  html body main.qc-place .location-note__body > p:first-child { font-size: clamp(23px, 5.8vw, 26px) !important; }
  html body main.qc-place :is(.location-note__booking, .location-note__route) { width: 100% !important; }
}
@media (max-width: 580px) {
  main.qc-place { --qc-gutter: 14px; --qc-gallery-slide: 82vw; }
}
@media (prefers-reduced-motion: reduce) {
  html body main.qc-place .qc-reveal,
  html body main.qc-place .qc-reveal.qc-reveal--waiting { opacity: 1 !important; transition: none !important; }
  html body main.qc-place :is(.facts-booking__button, .location-note__route, .facts-contact__action, .location-note__contact-link) { transition: none !important; }
}
@media print {
  html body main.qc-place .qc-reveal { opacity: 1 !important; transition: none !important; }
  html body main.qc-place .qc-sticky-managed { position: static !important; }
}