/* ============================================================
   Hotel S'ARDEVIU — Sóller
   "El Índice" — a printed Sóller travel journal.
   Crisp 90° corners. Drawn hairlines, not containers.
   ============================================================ */

:root {
  /* ---- palette (identity tokens) ---- */
  --bg:      #F2EEE2;   /* cool limewashed paper — crisper, less sandstone */
  --ink:     #1F3D2B;   /* deep mountain green — the structural colour */
  --green:   #1F3D2B;   /* alias: the masthead/footer/rule green */
  --green-deep: #173123; /* a darker green for grounds */
  --accent:  #E0591E;   /* Sóller orange — the sharp accent */
  --accent2: #C28A3A;   /* ochre — a rare warm glint */
  --muted:   #6E7A6A;   /* cool grey-green stone (was warm grey) */

  /* ---- derived ---- */
  --paper:    #F7F4EA;  /* lighter plate / card paper */
  --ink-80:   #1F3D2Bcc;
  --ink-55:   #1F3D2B8c;
  --hair:     #1F3D2B;          /* hairline rules: green */
  --hair-soft: rgba(31,61,43,.20);
  --ochre-key: rgba(194,138,58,.50);

  /* ---- type ---- */
  --display: "Cormorant", "Times New Roman", Georgia, serif;
  --body:    "Archivo", system-ui, -apple-system, Segoe UI, sans-serif;

  /* ---- rhythm ---- */
  --col-max: 1220px;
  --gutter:  clamp(20px, 5.5vw, 88px);
  --rule-w:  1px;
  --masthead-h: 62px;          /* measured at runtime; fallback here */

  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 400;
  font-size: clamp(15px, 1.05vw + 11px, 18px);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* faint journal-paper tint */
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(251,246,236,.9), rgba(244,235,218,0) 60%);
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }

::selection { background: var(--accent); color: #fff; }

a { color: inherit; text-decoration: none; }

h1, h2, h3 {
  margin: 0;
  font-weight: 400;
  /* root-cause guard against right-edge clipping on narrow screens */
  overflow-wrap: break-word;
  word-break: break-word;
}
p { overflow-wrap: break-word; }

.display {
  font-family: var(--display);
  font-weight: 500;          /* Cormorant runs light — display needs ~500 */
  line-height: 1.04;
  letter-spacing: 0;          /* high-contrast serif: no negative tracking */
  /* never let a long word punch past its column */
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

.lede {
  font-size: clamp(17px, 1.1vw + 13px, 21px);
  line-height: 1.5;
  color: var(--ink);
}

/* shared inner column */
.masthead__inner,
.hero__grid,
.section,
.footer__inner {
  width: 100%;
  max-width: var(--col-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ============================================================
   ORANGE-SLICE MOTIF  — the signature flourish
   half-circle + radiating segment lines, drawn in CSS.
   ============================================================ */
.orange-slice {
  --slc: 30px;
  position: relative;
  display: inline-block;
  width: var(--slc);
  height: calc(var(--slc) / 2);
  flex: none;
  vertical-align: middle;
  /* the half-disc */
  background: var(--accent);
  border-radius: var(--slc) var(--slc) 0 0 / var(--slc) var(--slc) 0 0;
  overflow: hidden;
  transform-origin: 50% 100%;
}
/* radiating segment lines (page-cream) fanning from the centre base */
.orange-slice::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* central pith line */
    linear-gradient(to top, var(--bg) 0, var(--bg) 100%) 50% 100% / 1.4px 100% no-repeat,
    /* +/- 45° segment lines, drawn as thin rotated bars from base centre */
    conic-gradient(from 0deg at 50% 100%,
       transparent 0deg,
       transparent 28deg,  var(--bg) 28deg, var(--bg) 29.4deg, transparent 29.4deg,
       transparent 60deg,  var(--bg) 60deg, var(--bg) 61.4deg, transparent 61.4deg,
       transparent 119deg, var(--bg) 119deg, var(--bg) 120.4deg, transparent 120.4deg,
       transparent 151deg, var(--bg) 151deg, var(--bg) 152.4deg, transparent 152.4deg,
       transparent 180deg);
  transform-origin: 50% 100%;
  transition: transform .9s var(--ease);
}
/* thin rind */
.orange-slice::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1.4px solid var(--accent);
  border-bottom: 0;
  border-radius: inherit;
  /* slightly darker rind */
  box-shadow: inset 0 0 0 1.4px rgba(120,40,8,.18);
}
.orange-slice--xs { --slc: 18px; }
.orange-slice--sm { --slc: 22px; }
.orange-slice--lg { --slc: 64px; }

/* quiet rotate accent when its section reveals */
.is-in .orange-slice::before { transform: rotate(-4deg); }

/* ============================================================
   MASTHEAD  — thin double-rule, magazine nameplate
   ============================================================ */
.masthead {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  /* over the cover photo the masthead is transparent; it gains its
     green band the moment the page scrolls (see .is-scrolled) */
  background: transparent;
  color: var(--paper);
  transition: background .4s var(--ease), backdrop-filter .4s var(--ease);
}
/* solid green band once past the cover (and as the default when JS is off) */
.masthead.is-scrolled,
.no-js .masthead {
  background: color-mix(in srgb, var(--green) 94%, #000 0%);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
/* the double-rule is now drawn in ochre/paper over the green band */
.masthead__rule { height: var(--rule-w); background: var(--ochre-key); transition: opacity .4s var(--ease); }
.masthead__rule--top    { opacity: .9; }
.masthead__rule--bottom { background: rgba(247,244,234,.28); opacity: 1; }
/* over the photo, hush the double-rule so the cover frame leads */
.masthead:not(.is-scrolled) .masthead__rule { opacity: 0; }
.masthead:not(.is-scrolled) .masthead__inner { border-top-color: transparent; }
/* a soft top vignette so the transparent masthead always stays legible */
.masthead::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 220%;
  background: linear-gradient(180deg, rgba(15,30,22,.5) 0%, rgba(15,30,22,0) 100%);
  opacity: 1;
  pointer-events: none;
  z-index: -1;
  transition: opacity .4s var(--ease);
}
.masthead.is-scrolled::before { opacity: 0; }
/* the "double rule" — a hair gap between two lines */
.masthead__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 12px;
  border-top: var(--rule-w) solid rgba(247,244,234,.28);   /* second rule of the double */
  margin-top: 2px;
}

.wordmark { display: flex; flex-direction: column; line-height: 1; color: var(--paper); }
.wordmark__name {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(22px, 2.3vw, 29px);
  letter-spacing: .005em;
  font-style: italic;
  line-height: 1;
}
.wordmark__sub {
  font-family: var(--body);
  font-weight: 500;
  font-size: 9.5px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(247,244,234,.66);
  margin-top: 6px;
}

.nav {
  display: none;
  gap: clamp(18px, 2.4vw, 34px);
}
.nav a {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(247,244,234,.86);
  padding-bottom: 3px;
  position: relative;
  transition: color .25s var(--ease);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1.5px;
  background: var(--accent);
  transition: right .35s var(--ease);
}
.nav a:hover { color: var(--accent); }
.nav a:hover::after { right: 0; }

.lang { display: flex; align-items: center; gap: 7px; }
.lang__btn {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  color: rgba(247,244,234,.6);
  background: none;
  border: 0;
  padding: 8px 6px;            /* ≥ tap-friendly hit area */
  cursor: pointer;
  transition: color .2s var(--ease);
}
.lang__btn.is-active { color: var(--paper); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; }
.lang__btn:hover { color: var(--accent); }
.lang__sep { color: rgba(247,244,234,.3); font-size: 12px; }

@media (min-width: 800px) {
  .nav { display: flex; }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;            /* tap target */
  font-family: var(--body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 14px 22px;
  border: var(--rule-w) solid var(--ink);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  max-width: 100%;
  transition: background .3s var(--ease), color .3s var(--ease), transform .25s var(--ease), border-color .3s var(--ease);
}
.btn--solid { background: var(--ink); color: var(--paper); }
.btn--solid:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-2px); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); }
.btn--lg { padding: 17px 28px; font-size: 14px; }

/* ============================================================
   IMAGE PLATES  — rectangular, 1px ochre keyline, lift on hover
   ============================================================ */
.plate {
  position: relative;
  border: 1px solid var(--ochre-key);
  background: var(--paper);
  overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.plate::after { /* inner hair to read as a printed plate */
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(31,61,43,.10);
  pointer-events: none;
}
.plate img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 1.1s var(--ease), filter .6s var(--ease);
  filter: saturate(.98) contrast(1.02);
}
figure:hover .plate { transform: translateY(-2px); box-shadow: 0 18px 40px -28px rgba(31,61,43,.5); }
figure:hover .plate img { transform: scale(1.03); }

.plate__cap {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 12px;
  font-size: 12.5px;
  font-style: italic;
  font-family: var(--display);
  color: var(--muted);
  letter-spacing: .005em;
}
figure { margin: 0; }

/* ============================================================
   HERO — full-bleed magazine cover
   The green-shutter Sóller street, edge to edge. A printed
   cover: issue line, 00 · Sóller folio, the orange-slice mark,
   a Cormorant statement, and a quiet scroll cue.
   ============================================================ */
.hero {
  position: relative;
  /* full viewport, honouring mobile browser chrome */
  min-height: 100vh;
  min-height: 100svh;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--green-deep);   /* fallback while the photo paints */
  isolation: isolate;
  display: flex;
}

/* ---- the edge-to-edge photographic plate ---- */
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* the street recedes to the right; favour the stone + green shutter */
  object-position: 64% 50%;
  /* a touch warmer + deeper so type sits cleanly over it */
  filter: saturate(1.04) contrast(1.04) brightness(.96);
  transform: scale(1.06);
  animation: heroDrift 26s var(--ease) forwards;
}
@keyframes heroDrift {
  from { transform: scale(1.10); }
  to   { transform: scale(1.0); }
}

/* refined scrim — a printed gravure wash, darker at the feet for type */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    /* warm orange kiss at top-right — the Sóller signal */
    radial-gradient(120% 90% at 92% 4%, rgba(224,89,30,.28), rgba(224,89,30,0) 46%),
    /* deepen the lower band where headline + deck copy sit */
    linear-gradient(183deg,
      rgba(15,30,22,.30) 0%,
      rgba(15,30,22,.15) 26%,
      rgba(15,30,22,.40) 60%,
      rgba(15,30,22,.84) 100%),
    /* left rail darkened so the cover furniture reads */
    linear-gradient(95deg, rgba(15,30,22,.64) 0%, rgba(15,30,22,.16) 42%, rgba(15,30,22,0) 72%);
}
/* a focused wash under the right-hand deck copy (desktop) so the sub-line
   and actions stay crisp where the sunlit street is brightest */
@media (min-width: 920px) {
  .hero__scrim::after {
    content: "";
    position: absolute;
    right: 0; bottom: 0;
    width: 52%;
    height: 56%;
    background: linear-gradient(295deg, rgba(15,30,22,.5) 0%, rgba(15,30,22,.12) 55%, rgba(15,30,22,0) 100%);
  }
}
/* faint film grain — keeps the photo from looking flat / stock */
.hero__grain {
  position: absolute;
  inset: 0;
  opacity: .42;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
  pointer-events: none;
}

/* ---- the thin printed keyline frame ---- */
.hero__frame {
  position: absolute;
  inset: clamp(14px, 2.1vw, 26px);
  z-index: 2;
  border: 1px solid rgba(247,244,234,.34);
  pointer-events: none;
}

/* ---- the cover content, laid on a top/middle/bottom stack ---- */
.hero__cover {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--col-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  /* clear the fixed masthead at the top, breathe at the foot */
  padding-top: calc(var(--masthead-h) + clamp(18px, 3vh, 40px));
  padding-bottom: clamp(34px, 5vh, 68px);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(18px, 3.4vh, 40px);
  color: var(--paper);
}

/* top register: issue label + edition line, on a hairline */
.hero__masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px 24px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(247,244,234,.34);
}
.hero__issue {
  margin: 0;
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(15px, 1.5vw, 20px);
  letter-spacing: .01em;
  color: var(--paper);
}
.hero__edition {
  margin: 0;
  font-family: var(--body);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(247,244,234,.74);
}

/* the cover statement, bottom-aligned in the middle band */
.hero__plate-type {
  align-self: end;
  max-width: min(94vw, 18ch);
}
.hero__folio {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0 0 clamp(14px, 2.4vh, 26px);
}
.hero__folio-num {
  font-family: var(--display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(30px, 4vw, 48px);
  line-height: .8;
  color: var(--accent);
  letter-spacing: 0;
  /* lift it off the photo */
  text-shadow: 0 1px 18px rgba(15,30,22,.5);
}
.hero__folio-slice { filter: drop-shadow(0 2px 8px rgba(15,30,22,.45)); }
/* the slice's pith/segment lines must read as the dark ground, not cream */
.hero .hero__folio-slice.orange-slice::before { background: none; }
.hero .hero__folio-slice.orange-slice::before {
  background:
    linear-gradient(to top, rgba(15,30,22,.92) 0, rgba(15,30,22,.92) 100%) 50% 100% / 1.4px 100% no-repeat,
    conic-gradient(from 0deg at 50% 100%,
       transparent 0deg, transparent 28deg, rgba(15,30,22,.9) 28deg, rgba(15,30,22,.9) 29.4deg, transparent 29.4deg,
       transparent 60deg, rgba(15,30,22,.9) 60deg, rgba(15,30,22,.9) 61.4deg, transparent 61.4deg,
       transparent 119deg, rgba(15,30,22,.9) 119deg, rgba(15,30,22,.9) 120.4deg, transparent 120.4deg,
       transparent 151deg, rgba(15,30,22,.9) 151deg, rgba(15,30,22,.9) 152.4deg, transparent 152.4deg,
       transparent 180deg);
}
.hero__folio-place {
  font-family: var(--body);
  font-weight: 600;
  font-size: clamp(10px, 1vw, 12px);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(247,244,234,.9);
}

.hero__headline {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(40px, 8vw, 104px);
  line-height: .96;
  letter-spacing: -0.004em;
  margin: 0;
  color: #fff;
  text-wrap: balance;
  /* the giant serif must wrap at WORDS, never mid-word — override the
     global h1/.display break rules that would shatter it on the photo */
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
  /* readability lift over photography */
  text-shadow: 0 2px 32px rgba(15,30,22,.5), 0 1px 3px rgba(15,30,22,.35);
}
.hero__sub {
  margin: clamp(18px, 2.6vh, 30px) 0 0;
  max-width: 44ch;
  font-family: var(--body);
  font-size: clamp(15px, 1vw + 12px, 19px);
  line-height: 1.5;
  color: rgba(247,244,234,.94);
  text-shadow: 0 1px 14px rgba(15,30,22,.55);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(24px, 3.4vh, 38px);
}

/* buttons that live on the photograph */
.btn--onphoto.btn--solid {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 14px 34px -16px rgba(224,89,30,.7);
}
.btn--onphoto.btn--solid:hover {
  background: #fff;
  border-color: #fff;
  color: var(--ink);
}
.btn--onphoto.btn--ghost {
  border-color: rgba(247,244,234,.66);
  color: var(--paper);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.btn--onphoto.btn--ghost:hover {
  border-color: #fff;
  color: #fff;
  background: rgba(247,244,234,.1);
}

/* bottom register: credit + scroll cue, on a hairline */
.hero__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid rgba(247,244,234,.34);
}
.hero__credit {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(12.5px, 1.2vw, 15px);
  color: rgba(247,244,234,.88);
}
.hero__scroll {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--body);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(247,244,234,.82);
  transition: color .25s var(--ease);
}
.hero__scroll:hover { color: var(--accent); }
.hero__scroll-line {
  position: relative;
  width: 46px;
  height: 1px;
  background: rgba(247,244,234,.5);
  overflow: hidden;
}
.hero__scroll-line::after {
  content: "";
  position: absolute;
  top: 0; left: -40%;
  width: 40%;
  height: 100%;
  background: var(--accent);
  animation: heroScroll 2.4s var(--ease) infinite;
}
@keyframes heroScroll {
  0%   { left: -40%; }
  60%  { left: 100%; }
  100% { left: 100%; }
}

/* desktop: a wider statement that wraps to ~3 lines, with the sub-line
   and actions set to the right of the headline like cover deck copy */
@media (min-width: 920px) {
  .hero__plate-type {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.9fr);
    align-items: end;
    column-gap: clamp(40px, 5vw, 88px);
    row-gap: clamp(14px, 2vh, 24px);
  }
  .hero__folio { grid-column: 1 / -1; }
  .hero__headline {
    grid-column: 1;
    font-size: clamp(64px, 6.6vw, 104px);
    max-width: 13ch;     /* ~3 lines for this headline */
  }
  .hero__sub {
    grid-column: 2;
    margin: 0 0 8px;
    padding-left: clamp(20px, 1.6vw, 30px);
    border-left: 1px solid rgba(247,244,234,.4);
    align-self: end;
  }
  .hero__actions { grid-column: 2; margin-top: 4px; }
}

/* a tall, generous desktop canvas gives the cover room to breathe */
@media (min-width: 1180px) {
  .hero__headline { font-size: clamp(84px, 6.4vw, 118px); max-width: 12ch; }
}

/* very short / landscape phones: let the hero grow with content */
@media (max-height: 560px) {
  .hero { min-height: 620px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__img { animation: none; transform: scale(1.02); }
  .hero__scroll-line::after { animation: none; }
}

/* ============================================================
   SECTION FRAME + EL ÍNDICE
   ============================================================ */
.section { padding-block: clamp(56px, 9vw, 128px); }

/* the index head: two-digit numeral on a full-width green rule */
.index {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 18px;
  margin-bottom: clamp(30px, 4.5vw, 56px);
  position: relative;
}
.index__num {
  font-family: var(--display);
  font-weight: 600;
  font-style: italic;
  font-size: clamp(38px, 5.4vw, 64px);
  line-height: .8;
  color: var(--accent);        /* the index numeral is now the orange accent */
  letter-spacing: 0;
}
.index .orange-slice { align-self: center; transform: translateY(-2px); }
.index__label {
  font-family: var(--body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--muted);
  align-self: center;
}
/* the rule itself: drawn left-to-right on entry */
.index__rule {
  flex: 1;
  height: var(--rule-w);
  background: var(--hair);
  transform: scaleX(0);
  transform-origin: left center;
  align-self: center;
  margin-bottom: 4px;
  transition: transform .8s var(--ease) .05s;
}
.index.is-in .index__rule { transform: scaleX(1); }
.index--light .index__num { color: var(--accent); }
.index--light .index__label { color: rgba(247,244,234,.72); }
.index--light .index__rule { background: rgba(247,244,234,.5); }

/* ----- 01 · STORY ----- */
.story__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3.5vw, 48px);
}
.story__title {
  font-size: clamp(28px, 4.4vw, 50px);
  max-width: 18ch;
}
.story__body { max-width: 60ch; }
.story__body p + p { margin-top: 1.1em; }
.story__note {
  margin-top: 1.4em;
  font-style: italic;
  font-family: var(--display);
  color: var(--muted);
}
@media (min-width: 860px) {
  .story__grid { grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 5vw, 80px); align-items: start; }
  .story__title { position: sticky; top: 96px; }
}

/* ----- 02 · ROOMS ----- */
.rooms__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(30px, 4.5vw, 60px);
  align-items: center;
}
.rooms__copy h2 { font-size: clamp(26px, 3.8vw, 44px); max-width: 16ch; margin-bottom: .7em; }
.rooms__copy > p { max-width: 46ch; }

.ledger {
  list-style: none;
  margin: 32px 0 0;
  padding: 22px 0 6px;
  border-top: var(--rule-w) solid var(--hair-soft);
}
.ledger li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(19px, 1.5vw, 24px);
  color: var(--ink);
  border-bottom: var(--rule-w) solid var(--hair-soft);
}
.ledger li .orange-slice { transition: transform .5s var(--ease); }
.ledger li:hover .orange-slice { transform: rotate(-8deg); }

@media (min-width: 860px) {
  .rooms__grid { grid-template-columns: 0.92fr 1.08fr; gap: clamp(44px, 5vw, 78px); }
}

/* ----- 03 · SÓLLER ----- */
.soller__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 44px);
}
.soller__lead {
  font-size: clamp(30px, 5.4vw, 62px);
  max-width: 14ch;
  letter-spacing: -0.02em;
}
.soller__body { max-width: 56ch; }
.soller__body p + p { margin-top: 1.1em; }

.bearings {
  list-style: none;
  margin: clamp(12px, 2vw, 22px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  border-top: var(--rule-w) solid var(--hair);
}
.bearings li {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 20px 0;
  border-bottom: var(--rule-w) solid var(--hair-soft);
}
.bearings__fig {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(36px, 4.6vw, 56px);
  line-height: 1;
  color: var(--accent);
  min-width: 2.6ch;
  letter-spacing: 0;
}
.bearings__lbl {
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--muted);
  text-transform: lowercase;
}
@media (min-width: 760px) {
  .soller__grid { grid-template-columns: 1.15fr 1fr; column-gap: clamp(44px, 5vw, 90px); align-items: start; }
  .soller__lead { grid-row: span 2; }
  .bearings { grid-template-columns: 1fr; }
}
@media (min-width: 1040px) {
  .bearings { grid-column: 2; }
}

/* ----- 04 · BOOK (ink ground) ----- */
.section--book {
  background: var(--green-deep);
  color: var(--paper);
  margin-top: clamp(20px, 4vw, 48px);
  /* page-edge keylines in ochre to frame the dark plate */
  position: relative;
}
.section--book::before,
.section--book::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--ochre-key);
}
.section--book::before { top: 0; }
.section--book::after  { bottom: 0; }
.section--book .lede { color: var(--paper); }
.section--book p { color: rgba(251,246,236,.82); }

.book__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(34px, 5vw, 64px);
  align-items: center;
}
.book__headline {
  font-size: clamp(30px, 5vw, 58px);
  max-width: 15ch;
  color: var(--paper);
  margin-bottom: .6em;
}
.book__type .lede { margin-bottom: 1em; max-width: 48ch; }
.book__actions { margin-top: 32px; }

/* "or call the house" line under the email CTA */
.book__phone {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin: 18px 0 0;
}
.book__phone-lbl {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent2) !important;
}
.book__phone-num {
  font-family: var(--display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(20px, 2vw, 26px);
  color: var(--paper);
  border-bottom: 1px solid var(--ochre-key);
  padding-bottom: 2px;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.book__phone-num:hover { color: var(--accent); border-color: var(--accent); }
.section--book .btn--solid { background: var(--accent); border-color: var(--accent); color: #fff; }
.section--book .btn--solid:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.book__fineprint {
  margin-top: 18px;
  font-size: 13px;
  font-style: italic;
  font-family: var(--display);
  color: rgba(251,246,236,.6) !important;
  max-width: 44ch;
}

/* the direct-booking card — replaces the dated discount modal */
.book__card {
  border: 1px solid var(--ochre-key);
  background:
    linear-gradient(180deg, rgba(251,246,236,.05), rgba(251,246,236,0));
  padding: clamp(28px, 4vw, 44px);
  text-align: center;
  position: relative;
}
.book__card-tick { display: inline-flex; margin-bottom: 10px; }
.book__card-kicker {
  font-family: var(--body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--accent2) !important;
  margin: 0 0 6px;
}
.book__card-figure {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  margin: 2px 0 4px;
  line-height: .9;
}
.book__card-num {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(96px, 17vw, 168px);
  color: var(--accent);
  letter-spacing: -0.02em;
  line-height: .82;
}
.book__card-pct {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(36px, 5vw, 56px);
  color: var(--accent);
  margin-top: .35em;
}
.book__card-label {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(16px, 1.5vw, 20px);
  color: var(--paper) !important;
  margin: 0 0 14px;
}
.book__card-foot {
  font-size: 12.5px;
  color: rgba(251,246,236,.6) !important;
  border-top: 1px solid rgba(251,246,236,.18);
  padding-top: 14px;
  margin: 0;
}

@media (min-width: 880px) {
  .book__grid { grid-template-columns: 1.25fr .75fr; gap: clamp(48px, 5vw, 84px); }
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer { padding-bottom: 40px; }
.footer__rule { height: var(--rule-w); background: var(--hair); max-width: var(--col-max); margin-inline: auto; }
.footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  padding-top: clamp(28px, 4vw, 46px);
  align-items: start;
}
.footer__name {
  font-family: var(--display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(24px, 2.5vw, 32px);
  margin: 0 0 6px;
}
.footer__place {
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.footer__contact { display: flex; flex-direction: column; gap: 4px; }
.footer__mail {
  font-family: var(--display);
  font-size: clamp(18px, 2vw, 24px);
  border-bottom: 1px solid var(--ochre-key);
  padding-bottom: 3px;
  align-self: start;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.footer__mail:hover { color: var(--accent); border-color: var(--accent); }
.footer__phone {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(16px, 1.6vw, 19px);
  color: var(--ink);
  align-self: start;
  transition: color .25s var(--ease);
}
.footer__phone:hover { color: var(--accent); }
.footer__site {
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--muted);
  text-transform: uppercase;
}
.footer__site:hover { color: var(--accent); }
.footer__sign {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--display);
  font-style: italic;
  font-size: 15px;
  color: var(--ink);
  margin: 0;
}
.footer__legal {
  max-width: var(--col-max);
  margin: clamp(28px, 4vw, 44px) auto 0;
  padding-inline: var(--gutter);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hair-soft);
}
@media (min-width: 760px) {
  .footer__inner { grid-template-columns: 1.2fr 1fr 1fr; gap: 30px; }
  .footer__sign { justify-self: end; text-align: right; }
}

/* ============================================================
   MOTION — measured editorial reveal
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .68s var(--ease), transform .68s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }
/* stagger children within a revealed cluster */
.hero__actions.reveal { transition-delay: .12s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .index__rule { transform: scaleX(1); transition: none; }
  .orange-slice::before { transition: none; }
  .plate img, .plate { transition: none; }
}