/* The site's theme — the island seen from inside an ordinary Ischian home: limewashed wall,
   worn shutters, a terrace. The button borrows the shutter green. Sets the colour and type
   roles tokens.css declares, and the few places this direction departs from components.css. */

:root {
  /* Each face's metric-matched fallback next (fonts.css), so nothing moves when the face arrives */
  --font-display: "Cormorant Garamond", "Cormorant Garamond Fallback", "Cormorant Garamond Fallback DejaVu", Georgia, serif;
  --font-body: "Noto Sans", "Noto Sans Fallback", "Noto Sans Fallback DejaVu", system-ui, sans-serif;
  --font-wordmark: "Cormorant Garamond", Georgia, serif;

  /* The site's one palette (owner's direction, 6 October 2026). Every page and every section
     reads these roles; a page sheet may name its own --stays-* / --bh-* roles, but only by
     pointing them here, never with a colour of its own.

     Three grounds: the cream every page and the footer stand on, white for the bands that lift
     a section off it (the host and the guest reviews, Good to know), and a warm card for what
     sits on a white band — review cards, Good-to-know panels — and for dialogs. A card standing
     straight on the cream (About, For owners) is white instead, with a hairline edge. */
  --color-ground: #fbf8f2;
  --color-section: #fff;
  --color-card: #f7f4ef;
  /* Behind a photograph while it loads */
  --color-media: #ece5d9;
  /* A pale sage: the guest's initial, a dialog control's hover */
  --color-tint: #d3d8ce;

  /* Three deep greens and nothing brighter. The darkest carries every heading, the nav and the
     strongest copy; the shutter green fills the buttons and marks the labels and links; its
     hover is the lightest the site goes. */
  --color-ink: #293c35;
  --color-cta: #34503f;
  --color-cta-hover: #456b53;
  --color-cta-ink: #f7f2e8;
  /* Paragraph text, and a quieter one for meta, captions and notes (5:1 on the cards) */
  --color-ink-soft: #3d4d45;
  --color-muted: #5c6b63;
  --color-nav: var(--color-ink);
  --color-label: var(--color-cta);
  --color-focus: var(--color-cta);
  --color-line: rgb(41 60 53 / 0.16);
  /* One brass, never for words: the icons' second colour, the stars, bullets and map dots.
     3:1 on the cards, as a graphic needs. */
  --color-accent: #ad7c2f;
  --icon-accent: var(--color-accent);
  /* Gold that carries words: Peppino's own labels and credentials, on the host card and on
     About (owner's direction). Deep enough for 4.6:1 on the cream and 4.9:1 on white. */
  --color-gold: #9a6524;

  --radius-cta: 0.1875rem;
  --display-weight: 500;
  --display-style: italic;
  --display-leading: 0.95;
  --display-tracking: -0.01em;
  --lead-weight: 400;
  --hero-measure: min(30rem, 30vw);
  /* Wall-coloured wash down the left: calms the leaf shadows behind the copy. No band across
     the top: the sky reads clean up to the nav. */
  --hero-scrim: linear-gradient(90deg, rgb(239 231 219 / 0.7) 0%, rgb(239 231 219 / 0.55) 30%, rgb(239 231 219 / 0) 40%);
}

.wordmark {
  font-weight: 500;
  font-size: calc(var(--text-wordmark) * 1.15);
}

.hero__lead {
  line-height: 1.35;
}

.btn {
  font-weight: 500;
}

@media (max-width: 52rem) {
  :root {
    --hero-measure: 40rem;
    --hero-scrim:
      linear-gradient(0deg, rgb(239 231 219 / 0.95) 0%, rgb(239 231 219 / 0.82) 48%, rgb(239 231 219 / 0) 76%);
  }
}

/* Upright, the scene stands above the copy (components.css) and fades into the page ground, so
   the copy needs no wash over the picture */
@media (max-width: 52rem) and (orientation: portrait) {
  :root {
    --hero-scrim: none;
  }
}

/* Stays: the editorial rows on the page ground, every role the site's own. Italic belongs to
   the homepage hero alone. */
.stays {
  --stays-title: var(--color-ink);
  --stays-line: var(--color-line);
  /* Holds the frame while a photograph loads, so no row collapses to the page ground */
  --stays-media-bg: var(--color-media);
  --stays-index: var(--color-muted);
  --stays-location: var(--color-label);
  --stays-name: var(--color-ink);
  --stays-facts: var(--color-ink-soft);
  --stays-fact-icon: var(--color-cta);
  --stays-fact-accent: var(--color-accent);
  --stays-body: var(--color-ink-soft);
  --stays-display-style: normal;
  --stays-title-size: var(--text-h1);
  --stays-title-measure: none;

  /* Give the title more room below the nav, and a wider band for the hairline that opens the
     list: the intro pays the half above it and the first row the half below (pages/stays.css). */
  --stays-intro-top: clamp(3.6rem, 2.16rem + 4.77vw, 8.1rem);
  --stays-divider-gap: clamp(3.3rem, 1.98rem + 3.63vw, 6.6rem);
  --stays-name-size: var(--text-h2);
}