/* ============================================================
   Casa Timbale — "Die stille Stunde / The quiet hour"
   Concept: a German owner's quiet finca near Felanitx, read as
   the still hour of the day. ONE hairline horizon is held
   perfectly level edge-to-edge; a single small ink mark (the
   timbale ▪) sits exactly on it. The day is a short, numbered
   index of still moments. Stark monochrome editorial — near-black
   ink on warm cream, almost no colour, air as the material.

   Signature moment: the level horizon line running clean across
   the hero behind the title, the ink mark resting on it.

   Distinct in the batch: near-BLACK ink (not can-posteta's wine
   registry), Crimson Pro (not EB Garamond), NO seal/ledger-rules,
   monochrome-cool cream (not sant-blai / can-pina warm).
   ============================================================ */

:root{
  /* ---- palette — ink on cream, that's almost the whole story ---- */
  --ink:      #16140f;   /* near-black, a hair warm so it isn't cold */
  --ink-2:    #2c2922;   /* headings on cream where pure black is heavy */
  --ink-soft: #5a554b;   /* body / secondary */
  --ink-faint:#8d8779;   /* captions, meta, the index numerals */

  --cream:    #f4f0e7;   /* warm off-white paper — the ground */
  --cream-2:  #eee9dd;   /* a half-tone band, barely there */
  --cream-3:  #e7e1d2;   /* the deepest the paper ever goes */
  --paper:    var(--cream);

  /* the one near-non-neutral: a faint warm-grey hairline. Not a colour
     so much as ink at low opacity — keeps the page monochrome. */
  --rule:     color-mix(in srgb, var(--ink) 22%, transparent);
  --rule-soft:color-mix(in srgb, var(--ink) 12%, transparent);
  --rule-hair:color-mix(in srgb, var(--ink) 30%, transparent);

  /* inverted band (booking / footer): ink ground, cream type */
  --on-ink:   #ece7da;
  --on-ink-soft: color-mix(in srgb, var(--on-ink) 64%, transparent);
  --rule-on-ink: color-mix(in srgb, var(--on-ink) 22%, transparent);

  /* ---- type ---- */
  --serif: "Crimson Pro", Georgia, "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* ---- rhythm — generous; air is the point ---- */
  --pad: clamp(22px, 6vw, 120px);
  --maxw: 1200px;
  --measure: 62ch;

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

/* ============================================================
   Reset / base
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* the level horizon never wants a fixed-nav jump to cover it */
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
#house,#still,#stay,#hour,#book{ scroll-margin-top:78px; }

body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink-soft);
  background:var(--paper);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;            /* belt-and-braces vs 390px overflow */
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
h1,h2,h3{ margin:0; font-weight:400; }
p{ margin:0 0 1.1em; }
::selection{ background:var(--ink); color:var(--cream); }
:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

/* display headings: never break a word one-letter-per-line; wide measure */
.hero__title,.sec__title,.book__title{
  font-family:var(--serif);
  font-weight:430;
  line-height:1.02;
  letter-spacing:-.006em;
  color:var(--ink);
  word-break:keep-all;
  overflow-wrap:normal;
  hyphens:none;
}

.skip{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--ink); color:var(--cream); padding:12px 18px;
  font-size:.85rem; letter-spacing:.02em;
}
.skip:focus{ left:0; }

/* ============================================================
   The MARK — a small filled square, the "timbale" ink mark.
   It rests on the horizon. Reused at small sizes as the signature.
   ============================================================ */
.mark{
  display:inline-block; width:.46em; height:.46em;
  background:currentColor; flex:none;
  /* a hair off-square so it reads drawn, not default */
  transform:translateY(.02em);
}

/* ============================================================
   The INDEX numeral system — the rhythm device.
   Numbered still moments: a hairline-ruled, monospaced-feel index.
   ============================================================ */
.kicker{
  display:flex; align-items:center; gap:.85em;
  font-family:var(--sans); font-weight:600;
  font-size:.7rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-faint); margin:0 0 1.6em;
}
.kicker__no{
  font-family:var(--serif); font-weight:500;
  font-size:1.15rem; letter-spacing:0; line-height:1;
  color:var(--ink); font-feature-settings:"lnum" 1, "tnum" 1;
  font-variant-numeric: lining-nums tabular-nums;
}
.kicker__rule{ height:1px; flex:1 1 auto; background:var(--rule); max-width:120px; }

/* ============================================================
   BUTTONS — minimal: an underlined-by-a-rule link, and one solid.
   ============================================================ */
.btn{
  --bh:50px;
  display:inline-flex; align-items:center; justify-content:center; gap:.7em;
  min-height:var(--bh); padding:0 26px;
  font-family:var(--sans); font-weight:600; font-size:.9rem; letter-spacing:.02em;
  text-decoration:none; cursor:pointer; border-radius:0;
  border:1px solid var(--ink); background:transparent; color:var(--ink);
  transition:background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease), border-color .4s var(--ease);
  white-space:nowrap;
}
.btn .mark{ width:.4em; height:.4em; }
.btn--solid{ background:var(--ink); color:var(--cream); }
.btn--solid:hover{ background:#000; transform:translateY(-2px); }
.btn--line:hover{ background:var(--ink); color:var(--cream); transform:translateY(-2px); }
.btn--lg{ --bh:56px; padding:0 32px; font-size:.95rem; }
.btn--xl{ --bh:60px; padding:0 40px; font-size:1rem; }

/* a quieter inline link: the rule-underline that grows */
.rlink{
  display:inline-flex; align-items:center; gap:.7em;
  min-height:44px;                 /* tap target */
  font-weight:600; font-size:.9rem; letter-spacing:.02em;
  color:var(--ink); text-decoration:none; padding:6px 0;
  position:relative;
}
.rlink::after{
  content:""; position:absolute; left:0; bottom:11px; height:1px; width:100%;
  background:var(--rule); transition:background .4s var(--ease);
}
.rlink .rlink__tick{ width:18px; height:1px; background:var(--ink); transition:width .4s var(--ease); flex:none; }
.rlink:hover::after{ background:var(--ink); }
.rlink:hover .rlink__tick{ width:30px; }

/* ============================================================
   HEADER — a thin line of text on the cream. No box, no shadow.
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; gap:16px;
  padding:18px var(--pad);
  background:color-mix(in srgb, var(--cream) 0%, transparent);
  transition:background .5s var(--ease), border-color .5s var(--ease), padding .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-solid{
  background:color-mix(in srgb, var(--cream) 90%, transparent);
  -webkit-backdrop-filter:blur(10px) saturate(120%);
  backdrop-filter:blur(10px) saturate(120%);
  border-bottom-color:var(--rule-soft);
  padding-top:13px; padding-bottom:13px;
}
.nav__brand{
  display:inline-flex; align-items:center; gap:.6em;
  text-decoration:none; color:var(--ink); margin-right:auto;
  min-height:44px; padding:4px 0;
}
.nav__brand .mark{ width:8px; height:8px; transform:none; }
.nav__name{
  font-family:var(--serif); font-weight:500; font-size:1.28rem;
  letter-spacing:.005em; color:var(--ink);
}
.nav__name b{ font-weight:500; }

.nav__links{ display:none; gap:34px; }
.nav__links a{
  text-decoration:none; color:var(--ink-soft); font-weight:500; font-size:.86rem;
  letter-spacing:.02em; position:relative; padding:6px 0;
  transition:color .35s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:1px; height:1px; width:0; background:var(--ink);
  transition:width .35s var(--ease);
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after{ width:100%; }

.nav__right{ display:flex; align-items:center; gap:14px; }
.lang{ display:inline-flex; align-items:center; gap:2px; }
.lang__btn{
  border:0; background:transparent; cursor:pointer;
  padding:10px 8px; min-height:44px; min-width:40px;
  font-family:var(--sans); font-weight:600; font-size:.78rem; letter-spacing:.06em;
  color:var(--ink-faint); transition:color .3s var(--ease);
}
.lang__btn.is-active{ color:var(--ink); }
.lang__btn:hover{ color:var(--ink); }
.lang__sep{ color:var(--rule); font-size:.7rem; }
.nav__book{ display:none; }

/* ============================================================
   HERO — full-viewport editorial type. The horizon is the wow.
   A single hairline runs edge-to-edge, dead level; the mark sits
   on it; the headline straddles it. Air above and below.
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh; min-height:100dvh;
  display:grid;
  /* air · eyebrow+title · the horizon line · sub+cta · air */
  grid-template-rows:1fr auto auto auto 1fr;
  padding:96px var(--pad) 0;
  overflow:hidden;
  isolation:isolate;
  background:var(--cream);
}
/* the faint half-tone wash that gives the cream depth without colour */
.hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 6%, var(--cream-2) 0%, transparent 58%),
    linear-gradient(to bottom, transparent 62%, var(--cream-2) 100%);
}

/* eyebrow + title sit in the upper-centre band, baseline resting just above the line */
.hero__head{ grid-row:2; align-self:end; position:relative; z-index:2; }
.hero__eyebrow{
  font-weight:600; font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ink-faint); margin:0 0 1.2em;
  display:flex; align-items:center; gap:.9em;
}
.hero__eyebrow .mark{ width:.42em; height:.42em; transform:none; background:var(--ink-faint); }
.hero__title{
  font-size:clamp(2.7rem, 9vw, 6.8rem);
  margin:0;
  max-width:none;
}

/* THE HORIZON — its own clear band between title and body. Dead level, edge to edge. */
.hero__horizon{
  grid-row:3; position:relative;
  width:100%;
  z-index:2;
  margin:clamp(22px,4.5vh,46px) 0;
  display:flex; align-items:center;
}
.hero__rule{
  height:1px; width:100%; flex:1 1 auto;
  background:linear-gradient(to right,
    var(--rule-hair) 0%,
    var(--rule-hair) 78%,
    color-mix(in srgb,var(--ink) 18%,transparent) 100%);
}
/* the small ink mark resting exactly on the line, at the left */
.hero__mark{
  position:absolute; top:50%; left:0;
  width:9px; height:9px; background:var(--ink);
  transform:translate(-1px,-50%);
}
/* a precise coordinate label riding the right end of the line, in its own band — never under the title */
.hero__coord{
  flex:none; display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--sans); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-faint); background:var(--cream); padding-left:1.1em;
}
.hero__coord .mark{ width:.4em; height:.4em; transform:none; background:var(--ink-faint); }

/* sub + CTA sit in the lower-centre band, just below the line */
.hero__inner{ grid-row:4; align-self:start; position:relative; z-index:2; max-width:980px; }
.hero__title em{ font-style:italic; color:var(--ink); font-weight:430; }
.hero__title .soft{ color:var(--ink-soft); }

.hero__sub{
  font-size:clamp(1.02rem, 2.1vw, 1.22rem);
  line-height:1.6; max-width:46ch; color:var(--ink-soft);
  margin:0 0 1.9em;
}
.hero__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 22px; }

/* a hairline scroll cue, far bottom-left, very quiet */
.hero__scroll{
  position:absolute; left:var(--pad); bottom:14px; z-index:2;
  display:inline-flex; align-items:center; gap:.8em;
  min-height:44px; padding:7px 4px;
  text-decoration:none; color:var(--ink-faint);
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
}
.hero__scroll-line{ width:1px; height:30px; background:var(--ink-faint); position:relative; overflow:hidden; }
.hero__scroll-line::after{
  content:""; position:absolute; left:0; top:-30px; width:1px; height:30px; background:var(--ink);
  animation:slide 2.6s var(--slow) infinite;
}
@keyframes slide{ 0%{ top:-30px } 60%{ top:30px } 100%{ top:30px } }

/* ============================================================
   SECTION scaffold — the composed editorial rhythm
   ============================================================ */
.sec{ padding:clamp(70px,12vw,150px) var(--pad); max-width:var(--maxw); margin-inline:auto; }
.sec__title{ font-size:clamp(1.9rem, 5vw, 3.2rem); max-width:20ch; margin:0 0 .8em; }
.sec__lede{ font-size:clamp(1.05rem,2vw,1.2rem); color:var(--ink-soft); max-width:var(--measure); }

/* a full-bleed hairline divider that echoes the horizon between sections */
.seam{ position:relative; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); }
.seam__rule{ height:1px; background:var(--rule-soft); }
.seam__mark{ position:absolute; left:var(--pad); top:50%; width:6px; height:6px; background:var(--ink); transform:translateY(-50%); }

/* ---- HOUSE: the opening statement, asymmetric two-column ---- */
.house__grid{ display:grid; gap:clamp(28px,5vw,64px); }
.house__lead{ }
.house__lead p{ color:var(--ink-soft); max-width:54ch; font-size:clamp(1.02rem,1.8vw,1.16rem); }
.house__lead .drop::first-letter{
  font-family:var(--serif); font-weight:500; font-size:3.4em; line-height:.78;
  float:left; padding:.06em .12em .02em 0; color:var(--ink);
}
.house__aside{ }
/* the "still hours" index — the rhythm signature, hairline-ruled rows */
.index{ border-top:1px solid var(--ink); }
.index__row{
  display:grid; grid-template-columns:auto 1fr; align-items:baseline; gap:1.2em;
  padding:1.05em 0; border-bottom:1px solid var(--rule-soft);
}
.index__no{
  font-family:var(--serif); font-weight:500; font-size:1.05rem; color:var(--ink-faint);
  font-variant-numeric: lining-nums tabular-nums; letter-spacing:.04em;
}
.index__body{ }
.index__t{ display:block; color:var(--ink); font-weight:600; font-size:.96rem; letter-spacing:.01em; margin-bottom:.18em; }
.index__d{ display:block; color:var(--ink-soft); font-size:.9rem; line-height:1.55; }

/* ---- STILL: the setting near Felanitx, wide statement + facts ---- */
.still{ background:var(--cream-2); }
.still__wrap{ max-width:var(--maxw); margin-inline:auto; }
.still__grid{ display:grid; gap:clamp(34px,5vw,72px); align-items:start; }
.still__copy p{ color:var(--ink-soft); max-width:52ch; }
.still__pull{
  font-family:var(--serif); font-weight:430; font-style:italic;
  font-size:clamp(1.5rem,3.4vw,2.2rem); line-height:1.28; color:var(--ink);
  max-width:20ch; margin:0;
}
.facts{ border-top:1px solid var(--ink); }
.facts__row{
  display:flex; align-items:baseline; justify-content:space-between; gap:1.4em;
  padding:.95em 0; border-bottom:1px solid var(--rule-soft);
}
.facts__k{ color:var(--ink-soft); font-size:.94rem; }
.facts__v{
  font-family:var(--serif); font-weight:500; font-size:1.05rem; color:var(--ink);
  white-space:nowrap; font-variant-numeric: lining-nums tabular-nums;
}

/* ---- STAY: the rooms/spaces, as a quiet numbered editorial list ---- */
.stay__head{ max-width:var(--maxw); margin:0 auto clamp(40px,6vw,72px); }
.stay__list{ max-width:var(--maxw); margin-inline:auto; border-top:1px solid var(--ink); }
.stay__item{
  display:grid; grid-template-columns:1fr; gap:.4em 2.6em;
  padding:clamp(26px,4vw,44px) 0; border-bottom:1px solid var(--rule-soft);
  position:relative;
}
.stay__no{
  font-family:var(--serif); font-weight:500; font-size:1.1rem; color:var(--ink-faint);
  font-variant-numeric: lining-nums tabular-nums; letter-spacing:.06em;
}
.stay__t{ font-family:var(--serif); font-weight:500; font-size:clamp(1.4rem,3vw,2rem); color:var(--ink); line-height:1.1; }
.stay__p{ color:var(--ink-soft); max-width:54ch; margin:.3em 0 0; }
.stay__meta{
  display:flex; flex-wrap:wrap; gap:.6em 1.4em; margin:.9em 0 0; padding:0; list-style:none;
}
.stay__meta li{
  font-size:.78rem; letter-spacing:.04em; color:var(--ink-faint);
  display:inline-flex; align-items:center; gap:.6em;
}
.stay__meta li::before{ content:""; width:4px; height:4px; background:var(--ink-faint); flex:none; }

/* ---- HOUR: the single quiet "detail moment" — a full-width still ---- */
.hour{
  background:var(--ink); color:var(--on-ink);
  padding:clamp(90px,16vw,200px) var(--pad);
  position:relative; isolation:isolate; overflow:hidden;
}
/* the horizon returns, inverted, behind the words */
.hour__horizon{
  position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); z-index:0;
  height:1px;
  background:linear-gradient(to right, transparent, var(--rule-on-ink) 10%, var(--rule-on-ink) 90%, transparent);
}
.hour__mark{ position:absolute; top:50%; left:50%; width:9px; height:9px; background:var(--on-ink); transform:translate(-50%,-50%); z-index:1; }
.hour__inner{ position:relative; z-index:2; max-width:760px; margin-inline:auto; text-align:center; }
.hour__time{
  font-family:var(--serif); font-weight:430; font-style:italic;
  font-size:.9rem; letter-spacing:.18em; text-transform:uppercase; color:var(--on-ink-soft);
  margin:0 0 1.4em;
}
.hour__line{
  font-family:var(--serif); font-weight:430;
  font-size:clamp(1.7rem,4.6vw,3.1rem); line-height:1.18; color:var(--on-ink);
  margin:0;
}
.hour__line em{ font-style:italic; }
.hour__sig{
  margin:1.8em 0 0; font-size:.78rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--on-ink-soft);
  display:inline-flex; align-items:center; gap:.9em;
}
.hour__sig .mark{ width:.42em; height:.42em; transform:none; background:var(--on-ink-soft); }

/* ---- BOOK: the keystone CTA on cream — calm, precise ---- */
.book{ padding:clamp(80px,14vw,170px) var(--pad); max-width:var(--maxw); margin-inline:auto; }
.book__grid{ display:grid; gap:clamp(34px,5vw,72px); align-items:end; }
.book__title{ font-size:clamp(2rem,5.2vw,3.4rem); max-width:16ch; margin:0 0 .55em; }
.book__txt{ color:var(--ink-soft); max-width:46ch; }
.book__panel{ }
.book__rule{ height:1px; background:var(--ink); margin-bottom:1.6em; }
.book__cta{ display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.book__lines{ margin:1.8em 0 0; padding:0; list-style:none; border-top:1px solid var(--rule-soft); }
.book__lines li{ border-bottom:1px solid var(--rule-soft); }
.book__lines a{
  display:flex; align-items:center; gap:.7em; min-height:48px; padding:.45em 0;
  font-family:var(--serif); font-size:1.12rem; color:var(--ink); text-decoration:none;
}
.book__lines .k{ font-family:var(--sans); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); min-width:5.5em; }
.book__lines a:hover .v{ text-decoration:underline; text-underline-offset:3px; }

/* ============================================================
   FOOTER — ink ground, the horizon one last time
   ============================================================ */
.foot{ background:var(--ink); color:var(--on-ink-soft); padding:clamp(56px,9vw,96px) var(--pad) 32px; }
.foot__horizon{ max-width:var(--maxw); margin:0 auto clamp(40px,6vw,64px); position:relative; height:1px; background:var(--rule-on-ink); }
.foot__horizon .mark{ position:absolute; left:0; top:50%; width:7px; height:7px; background:var(--on-ink); transform:translateY(-50%); }
.foot__grid{ max-width:var(--maxw); margin-inline:auto; display:grid; gap:40px; }
.foot__brand .mark{ width:9px; height:9px; transform:none; background:var(--on-ink); }
.foot__name{ font-family:var(--serif); font-weight:500; font-size:1.5rem; color:var(--on-ink); margin:.5em 0 .3em; display:flex; align-items:center; gap:.5em; }
.foot__place{ font-size:.84rem; letter-spacing:.04em; color:var(--on-ink-soft); margin:0; }
.foot__h{ font-family:var(--sans); font-weight:600; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--on-ink-soft); margin:0 0 1.1em; }
.foot__col p{ font-size:.9rem; margin:0 0 .25em; color:var(--on-ink); }
.foot__col a:not(.btn){ display:inline-flex; align-items:center; min-height:44px; color:var(--on-ink); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .3s; }
.foot__col a:not(.btn):hover{ border-bottom-color:var(--on-ink); }
.foot__col .foot__rating{ color:var(--on-ink-soft); }
.foot__base{
  max-width:var(--maxw); margin:clamp(40px,6vw,64px) auto 0; padding-top:24px;
  border-top:1px solid var(--rule-on-ink);
  display:flex; flex-wrap:wrap; gap:10px 22px; justify-content:space-between; align-items:center;
}
.foot__rights{ margin:0; font-size:.78rem; color:var(--on-ink-soft); }
.foot__sign{ margin:0; font-family:var(--serif); font-style:italic; font-size:.98rem; color:var(--on-ink); }

/* ============================================================
   Reveal-on-scroll — quiet: a short fade + 1px settle, nothing flashy
   ============================================================ */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .9s var(--slow), transform .9s var(--slow); }
.reveal.is-in{ opacity:1; transform:none; }
/* the horizon draws in from the centre on load */
.hero__rule{ transform:scaleX(0); transform-origin:center; transition:transform 1.3s var(--slow) .15s; }
.hero.is-ready .hero__rule{ transform:scaleX(1); }
.hero__mark,.hero__coord{ opacity:0; transition:opacity .8s var(--ease) .9s; }
.hero.is-ready .hero__mark,.hero.is-ready .hero__coord{ opacity:1; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero__rule{ transform:none; transition:none; }
  .hero__mark,.hero__coord{ opacity:1; transition:none; }
  .hero__scroll-line::after{ animation:none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width:720px){
  .house__grid{ grid-template-columns:1.15fr .85fr; align-items:start; }
  .still__grid{ grid-template-columns:1fr 1fr; }
  .stay__item{ grid-template-columns:auto 1fr; gap:.4em 3em; }
  .stay__item .stay__head-row{ grid-column:2; }
  .book__grid{ grid-template-columns:1.1fr .9fr; }
}

@media (min-width:980px){
  .nav__links{ display:flex; }
  .nav__book{ display:inline-flex; }
  body{ font-size:17.5px; }
  .hero__title{ max-width:none; }
  /* on wide screens the stay item lays the number in a true margin column */
  .stay__item{ grid-template-columns:5.5rem 1fr 16rem; gap:0 2.6em; align-items:start; }
  .stay__no{ grid-column:1; }
  .stay__main{ grid-column:2; }
  .stay__meta{ grid-column:3; margin-top:.4em; flex-direction:column; gap:.7em; }
}

@media (min-width:1280px){ body{ font-size:18px; } }

/* phones: the horizon stays a clean full line; the coord label steps back so
   nothing crowds the title. On the narrowest screens drop the coord text and
   let the rule run fully edge-to-edge — the mark + line carry the signature. */
@media (max-width:600px){
  .hero__coord{ font-size:.6rem; letter-spacing:.14em; gap:.55em; padding-left:.9em; }
  .hero__title{ font-size:clamp(2.5rem, 12.5vw, 4.6rem); line-height:1.04; }
}
@media (max-width:430px){
  .hero__coord{ display:none; }
  .hero__rule{
    background:linear-gradient(to right,
      var(--rule-hair) 0%, var(--rule-hair) 88%, color-mix(in srgb,var(--ink) 14%,transparent) 100%);
  }
}