/* ==========================================================================
   Casa dos Muros — granite horreo
   Tokens sampled from the approved comp .impeccable/mocks/home-A-slot-wall.png
   ========================================================================== */

@font-face{font-family:Satoshi;src:url(../fonts/Satoshi-300.woff2) format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Satoshi;src:url(../fonts/Satoshi-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Satoshi;src:url(../fonts/Satoshi-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Satoshi;src:url(../fonts/Satoshi-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Satoshi;src:url(../fonts/Satoshi-900.woff2) format('woff2');font-weight:900;font-style:normal;font-display:swap}

/* --------------------------------------------------------------- tokens -- */
:root{
  /* sampled: void 36% of the comp surface, paper 17%, gold 74% of the CTA */
  --void:#1a1a1a;
  --void-2:#242424;
  --paper:#eaeaea;
  --paper-2:#dedcd7;
  --stone-lit:#b5a99d;
  --stone-mid:#a2968a;
  --stone-dk:#4e4e4e;
  --gold:#deae4e;
  --gold-dp:#b98d33;
  --sage:#baba96;
  --olive:#968a4e;

  --ink:var(--void);
  --ink-2:#565049;
  --ground:var(--paper);
  --ground-2:var(--paper-2);
  --rule:#c6c2ba;
  --field:var(--void);          /* the slot: always dark, in both themes */
  --on-field:#f0eee9;
  --on-field-2:#a8a49c;

  --slot:clamp(14px,1.6vw,26px); /* the gap. the whole system is built on it */
  --bar:clamp(46px,8.4vw,132px);
  --gutter:clamp(20px,4vw,72px);
  --nav-h:clamp(58px,5.4vw,74px);
  --measure:66ch;

  --step:1.5;
  --t-fast:180ms;
  --t-mid:420ms;
  --t-slow:900ms;
  --ease:cubic-bezier(.16,1,.3,1);
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --ground:#161616;
    --ground-2:#1f1f1f;
    --ink:#e8e6e1;
    --ink-2:#9c968d;
    --rule:#343434;
  }
}
:root[data-theme=dark]{
  --ground:#161616;
  --ground-2:#1f1f1f;
  --ink:#e8e6e1;
  --ink-2:#9c968d;
  --rule:#343434;
}

/* ---------------------------------------------------------------- reset -- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font:400 clamp(16px,1.02vw,18px)/1.62 Satoshi,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-feature-settings:"ss01","cv01";
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,picture,svg,video{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,figure,blockquote,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}

/* the browser surfaces the design still owns */
::selection{background:var(--gold);color:var(--void)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
html{scrollbar-color:var(--stone-mid) var(--ground);caret-color:var(--gold)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--ground)}
::-webkit-scrollbar-thumb{background:var(--stone-mid);border:3px solid var(--ground)}
::-webkit-scrollbar-thumb:hover{background:var(--stone-dk)}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--gutter);top:-4rem;z-index:100;background:var(--gold);color:var(--void);padding:.7rem 1.1rem;font-weight:700;transition:top var(--t-fast)}
.skip:focus{top:.6rem}

/* ----------------------------------------------------------- typography -- */
.display{
  font-weight:300;
  font-size:clamp(2.9rem,10.4vw,10.5rem);
  line-height:.92;
  letter-spacing:-.038em;
  text-wrap:balance;
}
.h2{
  font-weight:400;
  font-size:clamp(1.85rem,4.4vw,4rem);
  line-height:1.02;
  letter-spacing:-.032em;
  text-wrap:balance;
}
.h3{font-weight:500;font-size:clamp(1.12rem,1.7vw,1.5rem);line-height:1.2;letter-spacing:-.018em}
.lede{font-size:clamp(1.06rem,1.42vw,1.34rem);line-height:1.5;max-width:34ch;color:var(--ink-2)}
.body{max-width:var(--measure);color:var(--ink-2)}
.body + .body{margin-top:1.05em}
.num{font-variant-numeric:tabular-nums lining-nums}
.chapter{
  display:flex;align-items:center;gap:.55rem;
  font-size:.72rem;font-weight:700;letter-spacing:.105em;text-transform:uppercase;
  color:var(--ink-2)
}
.chapter span{color:var(--gold);font-variant-numeric:tabular-nums}
.chapter--light{color:rgba(240,238,233,.68)}
.arrowlink{
  display:inline-flex;align-items:center;justify-content:space-between;gap:2rem;
  width:min(100%,23rem);padding:.9rem 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  font-size:.9rem;font-weight:500;transition:color var(--t-fast),padding var(--t-mid) var(--ease)
}
.arrowlink span{font-size:1.25rem;color:var(--gold);transition:transform var(--t-mid) var(--ease)}
.arrowlink:hover{color:var(--gold);padding-left:.45rem}
.arrowlink:hover span{transform:translateX(.35rem)}

/* ---------------------------------------------------------------- shell -- */
.wrap{padding-inline:var(--gutter)}
.band{padding-block:clamp(4.5rem,11vh,10rem)}
.band--tight{padding-block:clamp(3rem,7vh,6rem)}
/* a dark region rebinds the semantic tokens rather than restating colours per
   component: without this, anything using --ink-2 inside it keeps the light
   value and measures 2.2:1 */
.band--dark,.foot,.drawer{
  background:var(--field);
  color:var(--on-field);
  --ink:var(--on-field);
  --ink-2:var(--on-field-2);
  --ground:var(--field);
  --ground-2:var(--void-2);
  --rule:#3a3a3a;
}
.band--stone{background:var(--ground-2)}

.pagehead{min-height:clamp(250px,38vh,440px);display:grid;align-content:end;gap:clamp(2.2rem,7vh,5rem);border-bottom:1px solid var(--rule)}
.pagehead .head{margin-bottom:0}

/* section headings: no eyebrow, the heading carries itself */
.head{display:grid;gap:1.1rem;margin-bottom:clamp(2.2rem,4.5vw,4rem)}

/* ------------------------------------------------------------------ nav -- */
.nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:clamp(.9rem,2.4vw,2.4rem);
  height:var(--nav-h);
  padding-inline:var(--gutter);
  background:color-mix(in srgb,var(--ground) 92%,transparent);
  backdrop-filter:saturate(1.4) blur(9px);
  border-bottom:1px solid var(--rule);
}
.nav__mark{flex:none;display:flex;align-items:center}
.nav__mark img{height:clamp(19px,1.9vw,25px);width:auto}
.nav__logo--on-dark{display:none}
:root[data-theme=dark] .nav__logo--on-light{display:none}
:root[data-theme=dark] .nav__logo--on-dark{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]) .nav__logo--on-light{display:none}
  :root:not([data-theme=light]) .nav__logo--on-dark{display:block}
}
.nav__list{display:none;gap:clamp(.9rem,1.9vw,2rem);margin-left:auto;align-items:center}
.nav__list a{
  font-size:.845rem;font-weight:500;letter-spacing:.012em;
  padding-block:.42rem;border-bottom:1px solid transparent;
  transition:border-color var(--t-fast) var(--ease),color var(--t-fast)
}
.nav__list a:hover,.nav__list a[aria-current=page]{border-bottom-color:var(--gold)}
.nav__book{
  display:none;align-items:center;gap:.55rem;padding:.55rem .8rem;
  background:var(--ink);color:var(--ground);font-size:.76rem;font-weight:700;letter-spacing:.045em;text-transform:uppercase;
  transition:background var(--t-fast),color var(--t-fast)
}
.nav__book span{color:var(--gold)}
.nav__book:hover{background:var(--gold);color:var(--void)}
.nav__book:hover span{color:var(--void)}
.nav__end{display:flex;align-items:center;gap:.55rem;margin-left:auto}
.nav__list + .nav__end{margin-left:0}

.lang{display:flex;border:1px solid var(--rule)}
.lang a{
  padding:.3rem .52rem;font-size:.72rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-2);
  transition:background var(--t-fast),color var(--t-fast)
}
.lang a[aria-current=true]{background:var(--ink);color:var(--ground)}
.lang a:not([aria-current=true]):hover{background:var(--rule);color:var(--ink)}

.mode{
  width:34px;height:34px;display:grid;place-items:center;
  background:none;border:1px solid var(--rule);cursor:pointer;
  transition:border-color var(--t-fast),background var(--t-fast)
}
.mode:hover{border-color:var(--gold)}
.mode svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6}
.mode .moon{display:none}
/* the icon shows the mode you would switch TO, so it follows the resolved theme */
:root[data-theme=dark] .mode .sun{display:none}
:root[data-theme=dark] .mode .moon{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]) .mode .sun{display:none}
  :root:not([data-theme=light]) .mode .moon{display:block}
}
:root[data-theme=light] .mode .sun{display:block}
:root[data-theme=light] .mode .moon{display:none}

.burger{width:34px;height:34px;display:grid;place-items:center;background:none;border:1px solid var(--rule);cursor:pointer}
.burger span{display:block;width:15px;height:1px;background:currentColor;box-shadow:0 -4px 0 currentColor,0 4px 0 currentColor}

@media (min-width:1000px){
  .nav__list{display:flex}
  .burger{display:none}
}
@media (min-width:1220px){.nav__book{display:inline-flex}.nav__list{margin-left:auto}.nav__end{margin-left:0}}

.book-dock{
  position:fixed;right:14px;bottom:max(14px,env(safe-area-inset-bottom));z-index:48;
  display:flex;align-items:center;justify-content:space-between;gap:2.2rem;
  min-width:154px;padding:.78rem .9rem;background:var(--gold);color:var(--void);
  border:1px solid rgba(26,26,26,.28);font-size:.79rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  box-shadow:0 12px 34px rgba(0,0,0,.24);opacity:0;pointer-events:none;transform:translateY(calc(100% + 18px));
  transition:transform var(--t-mid) var(--ease),opacity var(--t-fast),background var(--t-fast)
}
.book-dock[data-visible]{opacity:1;pointer-events:auto;transform:none}
.book-dock[data-visible]:hover{background:var(--gold-dp);transform:translateY(-2px)}
@media (min-width:1000px){.book-dock{display:none}}

/* --------------------------------------------------------------- drawer -- */
.drawer{position:fixed;inset:0;z-index:60;
  display:grid;align-content:center;gap:.2rem;padding:var(--gutter);
  transform:translateY(-100%);transition:transform var(--t-mid) var(--ease);}
.drawer[data-open=true]{transform:none}
.drawer a{font-size:clamp(1.5rem,6vw,2.4rem);font-weight:300;letter-spacing:-.03em;padding-block:.32em;border-bottom:1px solid #333}
.drawer .drawer__book{margin-top:1.2rem;padding:.72rem .9rem;background:var(--gold);color:var(--void);border:0;font-size:1rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.drawer__x{position:absolute;top:1.1rem;right:var(--gutter);background:none;border:1px solid #444;color:inherit;width:36px;height:36px;cursor:pointer;font-size:1.1rem}

/* =========================================================== THE  WALL === */
/* The hero is a slotted granite wall. The gaps are the design: on scroll the
   bars part and the valley behind widens. One authored motion moment.        */
.wall{
  position:relative;
  min-height:calc(100svh - var(--nav-h));
  background:var(--void);
  overflow:hidden;
  isolation:isolate;
}
.wall__view{position:absolute;inset:0;z-index:0}
.wall__view img{width:100%;height:100%;object-fit:cover;object-position:50% 62%}
/* the slot is a shadowed opening, not a window with the lights on.
   the comp's near-black field is 36% of the surface: this scrim is what
   keeps the void dominant and what makes the claim legible over grass */
.wall__view::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(102deg,rgba(10,10,10,.72) 0%,rgba(10,10,10,.34) 30%,rgba(10,10,10,.06) 58%,rgba(10,10,10,.22) 100%),
    linear-gradient(0deg,rgba(10,10,10,.76) 0%,rgba(10,10,10,.12) 46%,rgba(10,10,10,.26) 100%);
}

.wall__bars{
  position:absolute;inset:0;z-index:1;
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:var(--bar);
  justify-content:space-between;
  pointer-events:none;
}
.bar{
  position:relative;height:100%;
  background-repeat:no-repeat;
  /* cover keeps the stone at natural vertical scale and crops horizontally,
     so a bar reads as a slice of one tall monolith rather than a zoomed boulder */
  background-size:cover;
  background-position:50% 50%;
  will-change:transform;
  transform:translate3d(calc(var(--push,0) * var(--open,0)),0,0);
}
/* each bar pushes away from centre by its own multiplier */
.bar:nth-child(1){--push:-58%}
.bar:nth-child(2){--push:-34%}
.bar:nth-child(3){--push:-12%}
.bar:nth-child(4){--push:12%}
.bar:nth-child(5){--push:34%}
.bar:nth-child(6){--push:58%}
/* the dark side face of the stone, and the shadow it throws into the slot.
   physical shadow, not a CSS chrome shadow */
.bar::after{
  content:"";position:absolute;top:0;bottom:0;right:0;width:30%;
  background:linear-gradient(90deg,transparent,#0c0c0c 82%);
}
.bar::before{
  content:"";position:absolute;top:0;bottom:0;left:100%;width:42%;
  background:linear-gradient(90deg,rgba(8,8,8,.72),transparent);
  pointer-events:none;
}

.wall__body{
  position:relative;z-index:2;
  min-height:calc(100svh - var(--nav-h));
  display:grid;
  align-content:end;
  gap:clamp(1.1rem,2.4vw,2rem);
  padding:calc(var(--gutter) * .8) var(--gutter) clamp(3.4rem,8vh,6rem);
}
/* the corner of the wall the light never reaches. this is what the text stands
   on: measured, the lit granite faces gave 1.4:1 without it */
.wall__body::before{
  content:"";position:absolute;left:0;right:0;bottom:0;
  height:min(74%,640px);
  background:
    linear-gradient(0deg,rgba(6,6,7,.93) 0%,rgba(6,6,7,.86) 26%,rgba(6,6,7,.62) 56%,rgba(6,6,7,.22) 82%,transparent 100%);
  z-index:-1;pointer-events:none;
}
.wall__title{color:#f6f4f0}
.wall__kicker{
  align-self:end;width:max-content;max-width:100%;padding-bottom:.55rem;border-bottom:1px solid rgba(222,174,78,.68);
  color:#d9d5cd;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase
}
.wall__claim{
  max-width:31ch;color:#e4e1da;font-size:clamp(1.04rem,1.5vw,1.4rem);line-height:1.45;
}
.wall__act{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.wall__scroll{
  position:absolute;z-index:3;right:var(--gutter);bottom:clamp(2.4rem,5vh,4rem);
  display:none;align-items:center;gap:.75rem;color:rgba(240,238,233,.7);
  font-size:.67rem;font-weight:500;letter-spacing:.11em;text-transform:uppercase;writing-mode:vertical-rl
}
.wall__scroll span{display:block;width:1px;height:52px;background:linear-gradient(var(--gold),transparent);animation:scroll-pulse 1.9s var(--ease) infinite}
@keyframes scroll-pulse{0%,100%{transform:scaleY(.35);transform-origin:top;opacity:.45}50%{transform:scaleY(1);opacity:1}}
@media (min-width:900px){.wall__scroll{display:flex}}

/* ---------------------------------------------------------------- action -- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.92rem 1.5rem;
  font-weight:700;font-size:.94rem;letter-spacing:.005em;white-space:nowrap;
  border:1px solid transparent;cursor:pointer;
  transition:transform var(--t-fast) var(--ease),background var(--t-fast),color var(--t-fast),border-color var(--t-fast);
}
.btn:active{transform:translateY(1px)}
.btn--gold{background:var(--gold);color:#1a1508}
.btn--gold:hover{background:var(--gold-dp);color:#0f0c04}
.btn--ghost{border-color:rgba(240,238,233,.62);color:#f0eee9;
  /* measured: .28 over the lit stone gave 3.3:1, so the plate is opaque
     enough to clear 4.5 wherever the wall happens to be bright */
  background:rgba(16,16,16,.72);backdrop-filter:blur(4px)}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn--ink{border-color:var(--ink);color:var(--ink)}
.btn--ink:hover{background:var(--ink);color:var(--ground)}

/* ------------------------------------------------------ the ten rooms --- */
/* The wall again, laid along the page: ten stone slots you look into. On a
   pointer device one opening widens, but the flex interpolation keeps the
   movement continuous instead of snapping the grid to a new span. */
.slotwall{
  display:flex;
  gap:3px;
  height:clamp(360px,62vh,620px);
  background:var(--void);
  overflow:hidden;
}
.slot{
  position:relative;
  flex:1 1 0;
  min-width:0;
  overflow:hidden;
  background:var(--void);
  transition:flex-grow 1050ms var(--ease),flex-basis 1050ms var(--ease);
}
.slot__a{
  position:absolute;inset:0;
  display:grid;align-content:end;
  color:var(--on-field);
  overflow:hidden;
}
/* an incised nameplate at the foot of the pier. solid, not a gradient over a
   photograph: five of these rooms photograph as a white bedspread and every
   gradient attempt measured between 1.4 and 3.0 against it */
.slot__plate{
  position:relative;z-index:3;
  background:rgba(9,9,9,.93);
  padding:.85rem .8rem .95rem;
  display:grid;gap:.25rem;
  border-top:1px solid rgba(222,174,78,.34);
  transition:background-color 900ms var(--ease);
}
.slot img{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.88) contrast(1.03) brightness(.88);
  transform:scale(1.06);
  transition:filter 1200ms var(--ease),transform 1400ms var(--ease);
}
.slot__a::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(10,10,10,.28) 0%,
    rgba(10,10,10,.06) 34%,
    rgba(9,9,9,.34) 68%,
    rgba(6,6,6,.76) 100%);
}
/* A single warm glint marks the active opening; it appears slowly enough to
   read as reflected light rather than interface chrome. */
.slot__a::before{
  content:"";position:absolute;inset:0 auto 0 0;z-index:2;width:1px;
  pointer-events:none;
  background:linear-gradient(180deg,transparent 8%,var(--gold) 48%,transparent 94%);
  opacity:0;transform:scaleY(.35);transform-origin:center;
  transition:opacity 800ms var(--ease),transform 1100ms var(--ease);
}
.slot__name{
  font-size:clamp(.92rem,1.05vw,1.12rem);font-weight:500;letter-spacing:-.012em;
  color:#f4f2ee;line-height:1.15;
}
.slot__meta{
  font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:#c9c5bc;
  min-height:1.15em;
  opacity:0;transform:translateY(5px);
  transition:opacity 800ms var(--ease),transform 900ms var(--ease);
}
@media (hover:hover) and (min-width:900px){
  .slot:hover,.slot:focus-within{flex-grow:3.5}
  .slot:hover img,.slot:focus-within img{
    filter:saturate(1) contrast(1.015) brightness(1);
    transform:scale(1.01);
  }
  .slot:hover .slot__plate,.slot:focus-within .slot__plate{background:rgba(9,9,9,.86)}
  .slot:hover .slot__meta,.slot:focus-within .slot__meta{opacity:1;transform:none}
  .slot:hover .slot__a::before,.slot:focus-within .slot__a::before{opacity:.78;transform:scaleY(1)}
  .slotwall:has(.slot:hover) .slot:not(:hover) img{
    filter:saturate(.72) contrast(1.035) brightness(.74);
  }
}
@media (max-width:899px){
  .slotwall{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:min(82vw,360px);
    height:clamp(300px,54vh,440px);
    gap:var(--slot);
    padding:0 var(--gutter) var(--slot);
    background:var(--ground);
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x proximity;
    scroll-padding-inline:var(--gutter);
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
  }
  .slot{scroll-snap-align:start}
  .slot img{filter:saturate(.94) contrast(1.02) brightness(.96);transform:none}
  .slot__meta{opacity:1;transform:none}
}
.room-intro{display:grid;gap:clamp(1.6rem,3vw,3rem)}
.room-intro .head{margin-bottom:0}
@media (min-width:900px){
  .room-intro{grid-template-columns:minmax(130px,.42fr) minmax(0,1.35fr) minmax(220px,.62fr);align-items:end}
  .room-intro .chapter{align-self:start;padding-top:.45rem}
  .room-intro .arrowlink{justify-self:end}
}
/* the anchor targets on /habitaciones/ are full openings, not a hover trick */
.rooms-open{display:grid;gap:var(--slot);grid-template-columns:1fr}
@media (min-width:760px){.rooms-open{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.roomcard:nth-child(5),.roomcard:nth-child(8){grid-column:1/-1;aspect-ratio:21/9}}
.roomcard{position:relative;display:grid;align-content:end;aspect-ratio:16/10;padding:1.15rem;background:var(--void);color:var(--on-field);overflow:hidden}
.roomcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--ease)}
.roomcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,14,14,0) 34%,rgba(10,10,10,.86) 76%,rgba(8,8,8,.97) 100%)}
.roomcard > :not(img){position:relative;z-index:1}
.roomcard:hover img{transform:scale(1.04)}
.roomcard__name{font-size:clamp(1.2rem,2vw,1.7rem);font-weight:400;letter-spacing:-.02em}
.roomcard__meta{font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;color:#c3bfb6;margin-top:.2rem}

/* ------------------------------------------------------------ two-up ----- */
.duo{display:grid;gap:clamp(1.6rem,4vw,3.4rem);align-items:start}
.duo--mid{align-items:center}
@media (min-width:900px){
  .duo{grid-template-columns:1fr 1fr}
  .duo--wide{grid-template-columns:1.25fr 1fr}
  .duo--flip > :first-child{order:2}
}
/* the dark plate belongs to the image, not to the figure: with it on the
   figure the caption below inherited a #1a1a1a ground and measured 2.2:1 */
.shot{position:relative}
.shot img{width:100%;height:100%;object-fit:cover;background:var(--void)}
.shot figcaption{
  padding:.62rem .1rem 0;font-size:.8rem;color:var(--ink-2);letter-spacing:.005em
}

/* -------------------------------------------------------------- figures -- */
.facts{display:grid;gap:0;border-top:1px solid var(--rule)}
.fact{display:grid;grid-template-columns:auto 1fr;gap:1.4rem;align-items:baseline;
  padding-block:1.05rem;border-bottom:1px solid var(--rule)}
.fact__k{font-size:clamp(1.5rem,2.6vw,2.3rem);font-weight:300;letter-spacing:-.03em;min-width:4.2ch}
.fact__v{color:var(--ink-2);font-size:.98rem}

/* ---------------------------------------------------------------- rates -- */
/* A tariff is one sentence split into three readable measures. The previous
   build emitted these classes without layout rules, so every span collapsed
   into a single word-like run. */
.rates{display:grid;border-top:1px solid var(--rule)}
.rate{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.15rem 1rem;
  align-items:baseline;
  padding-block:clamp(1rem,2.4vw,1.8rem);
  border-bottom:1px solid var(--rule);
  transition:background-color var(--t-fast) var(--ease),padding-inline var(--t-mid) var(--ease);
}
.rate__from{font-size:.68rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-2)}
.rate__n{font-size:clamp(2.25rem,6vw,4.8rem);font-weight:300;letter-spacing:-.045em;line-height:.92}
.rate__l{grid-column:1/-1;font-size:clamp(1rem,1.55vw,1.34rem);color:var(--ink-2)}
@media (hover:hover){.rate:hover{background:color-mix(in srgb,var(--gold) 8%,transparent);padding-inline:.7rem}}
@media (min-width:760px){
  .rate{grid-template-columns:minmax(4.5rem,.34fr) minmax(9rem,.72fr) minmax(0,1.55fr);gap:1.2rem}
  .rate__from,.rate__n,.rate__l{grid-column:auto}
}

/* cut into the stone: the numbers are the surface, not cards on top of it */
.quarry{
  position:relative;
  background:#20211f url(/assets/img/bar-3-600.webp) center/cover;
  color:var(--on-field);
  --ink:var(--on-field);--ink-2:var(--on-field-2);--rule:#4b4b47;
  isolation:isolate;
}
.quarry::before{content:"";position:absolute;inset:0;background:rgba(18,19,17,.86);z-index:-1}
.carved{display:grid;gap:0;border-top:1px solid var(--rule)}
.carved__row{
  display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:1.2rem;
  padding-block:clamp(.9rem,2vw,1.5rem);border-bottom:1px solid var(--rule);
}
.carved__l{font-size:clamp(1.05rem,1.6vw,1.35rem);letter-spacing:-.012em}
.carved__n{
  font-size:clamp(2.1rem,5.4vw,4.4rem);font-weight:300;letter-spacing:-.04em;line-height:.9;
  /* incised, not embossed: light catches the lower lip of the cut */
  color:#cfcabf;
  text-shadow:0 1px 0 rgba(255,255,255,.16),0 -1px 1px rgba(0,0,0,.7);
}
.carved__n small{font-size:.42em;font-weight:400;letter-spacing:0;margin-left:.35em;color:var(--on-field-2)}
.quarry__note{margin-top:1.6rem;font-size:.9rem;color:var(--on-field-2);max-width:52ch}

/* --------------------------------------------------------------- region -- */
/* an index of real places with real distances, not four identical cards */
.index{display:grid;gap:0;border-top:1px solid var(--rule)}
.index__row{
  display:grid;gap:.35rem 1.6rem;align-items:baseline;
  grid-template-columns:1fr;
  padding-block:clamp(1rem,2.2vw,1.6rem);
  border-bottom:1px solid var(--rule);
  transition:background var(--t-fast)
}
@media (min-width:820px){
  .index__row{grid-template-columns:minmax(0,1.15fr) minmax(0,1.25fr) auto}
}
.index__row:hover{background:color-mix(in srgb,var(--gold) 9%,transparent)}
.index__n{font-size:clamp(1.24rem,2.3vw,1.85rem);font-weight:400;letter-spacing:-.022em}
.index__n a{border-bottom:1px solid transparent;transition:border-color var(--t-fast)}
.index__row:hover .index__n a{border-bottom-color:var(--gold)}
.index__d{color:var(--ink-2);font-size:.95rem}
.index__far{
  font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);
  white-space:nowrap
}

/* ------------------------------------------------- full-bleed statement -- */
.plate{position:relative;min-height:clamp(420px,72vh,760px);display:grid;align-items:end;isolation:isolate}
.plate > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
/* on a narrow screen the copy sits at the foot, not at the left edge, so the
   scrim has to turn with it or the text lands on the open flame */
.plate::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(0deg,rgba(8,8,9,.95) 0%,rgba(8,8,9,.84) 32%,rgba(8,8,9,.3) 64%,rgba(8,8,9,.34) 100%)}
@media (min-width:900px){
  .plate::after{background:linear-gradient(85deg,rgba(8,8,9,.93) 0%,rgba(8,8,9,.72) 36%,rgba(8,8,9,.16) 72%,rgba(8,8,9,.42) 100%)}
}
.plate__in{padding:var(--gutter);max-width:56ch;color:#f1efea}
.plate__in .h2{color:#f6f4f0}
.plate__in p{color:#ddd9d2;margin-top:.9rem}
@supports (animation-timeline:view()){
  .plate > img{animation:plate-drift linear both;animation-timeline:view();animation-range:entry -15% exit 115%}
  @keyframes plate-drift{from{transform:scale(1.07) translateY(-1.5%)}to{transform:scale(1.01) translateY(1.5%)}}
}

/* ----------------------------------------------------------------- form -- */
.form{display:grid;gap:1.05rem}
@media (min-width:720px){.form{grid-template-columns:1fr 1fr}.form .full{grid-column:1/-1}}
.field{display:grid;gap:.36rem}
.field label{font-size:.79rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.field input,.field select,.field textarea{
  background:var(--ground);border:1px solid var(--rule);color:var(--ink);
  padding:.78rem .85rem;width:100%;
  transition:border-color var(--t-fast)
}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--stone-mid)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold);outline:none}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-2);opacity:.75}
.field__help{font-size:.78rem;color:var(--ink-2)}
.field__err{font-size:.79rem;color:#a8331f;display:none}
.field[data-invalid=true] input,.field[data-invalid=true] select{border-color:#a8331f}
.field[data-invalid=true] .field__err{display:block}
.consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.85rem;color:var(--ink-2)}
.consent input{width:16px;height:16px;flex:none;margin-top:.24em;accent-color:var(--gold)}
.form__note{font-size:.84rem;color:var(--ink-2)}

/* --------------------------------------------------------------- footer -- */
.foot{padding-block:clamp(3rem,7vh,5.5rem)}
.foot a:hover{color:var(--gold)}
.foot__grid{display:grid;gap:2.2rem}
@media (min-width:820px){.foot__grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.foot h4{font-size:.76rem;letter-spacing:.11em;text-transform:uppercase;color:var(--on-field-2);font-weight:500;margin-bottom:.85rem}
.foot li{padding-block:.24rem;font-size:.92rem}
.foot__mark img{width:190px;margin-bottom:1rem}
.foot__legal{margin-top:2.6rem;padding-top:1.2rem;border-top:1px solid #313131;
  display:flex;flex-wrap:wrap;gap:.9rem 1.6rem;font-size:.8rem;color:var(--on-field-2)}
.badge{background:#fff;padding:.55rem;display:inline-block;width:124px;height:auto}

/* ---------------------------------------------------------- reveal ------- */
/* content is visible by default; only a page with live JS may hide it, so a
   failed or blocked script can never leave the page blank */
[data-js] [data-rise]{opacity:0;transform:translateY(18px);transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
[data-js] [data-rise][data-seen]{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  [data-js] [data-rise]{opacity:1;transform:none;transition:none}
  .bar{transform:none !important}
  .room img{transition:none}
  .wall__scroll span{animation:none}
  .plate > img{animation:none !important;transform:none !important}
  .gallery-shot img{transition:none}
}

/* ------------------------------------------------------- article prose -- */
.prose{max-width:68ch}
.prose p{margin-bottom:1.05em;color:var(--ink-2)}
.prose__h{margin:2.2rem 0 .7rem;color:var(--ink)}
.prose__list{margin:0 0 1.4rem;display:grid;gap:.4rem}
.prose__list li{position:relative;padding-left:1.1rem;color:var(--ink-2)}
.prose__list li::before{content:"";position:absolute;left:0;top:.72em;width:6px;height:1px;background:var(--gold)}
.prose__fig{margin:1.9rem 0}
.prose__fig img{width:100%;height:auto}
.prose__cap{font-size:.82rem;color:var(--ink-2);margin:-1.3rem 0 1.9rem}
.prose__q{border-left:2px solid var(--gold);padding-left:1.1rem;margin:1.7rem 0;font-size:1.06rem}
.prose a{border-bottom:1px solid var(--gold);color:var(--ink)}
.prose a:hover{background:var(--gold);color:var(--void)}

.notice{
  max-width:68ch;margin-top:1.2rem;padding:.85rem 1rem;
  border-left:2px solid var(--gold);background:var(--ground-2);
  font-size:.88rem;color:var(--ink-2)
}

/* --------------------------------------------------------- gallery grid -- */
.grid-gal{display:grid;gap:var(--slot);grid-template-columns:1fr}
@media (min-width:620px){.grid-gal{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.grid-gal{grid-template-columns:repeat(3,1fr)}}
.grid-gal .shot img{aspect-ratio:4/3;object-fit:cover;width:100%}

/* The complete archive is composed like an editorial contact sheet rather
   than poured into equal cards. Every photograph remains present. */
.gallery-edit{display:grid;grid-template-columns:1fr;gap:var(--slot)}
.gallery-shot{position:relative;min-height:0;background:var(--void);overflow:hidden}
.gallery-shot__open{position:relative;width:100%;height:100%;padding:0;border:0;background:var(--void);color:#f0eee9;cursor:zoom-in;overflow:hidden}
.gallery-shot img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1.1s var(--ease),filter 1.1s var(--ease)}
.gallery-shot__open::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 64%,rgba(8,8,8,.56));opacity:.62;transition:opacity var(--t-mid)}
.gallery-shot__number{position:absolute;left:.8rem;bottom:.65rem;z-index:1;font-size:.68rem;font-weight:700;letter-spacing:.1em;font-variant-numeric:tabular-nums}
.gallery-shot:hover img,.gallery-shot:focus-within img{transform:scale(1.035);filter:saturate(1.04) contrast(1.02)}
.gallery-shot:hover .gallery-shot__open::after,.gallery-shot:focus-within .gallery-shot__open::after{opacity:1}
.article-gallery{margin-top:0}
.aira-tail{display:grid;gap:1.5rem;margin-top:clamp(2.2rem,5vw,4.5rem);align-items:end}
.aira-tail p{margin:0}
@media (min-width:900px){
  .aira-tail{grid-template-columns:minmax(0,1fr) minmax(16rem,23rem)}
  .aira-tail .arrowlink{justify-self:end}
}
@media (min-width:620px) and (max-width:999px){.gallery-edit{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){
  .gallery-edit{grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(46px,5.2vw,78px);grid-auto-flow:dense}
  .gallery-shot{grid-column:span 4;grid-row:span 5}
  .gallery-shot:nth-child(8n + 1){grid-column:span 8;grid-row:span 6}
  .gallery-shot:nth-child(8n + 2){grid-column:span 4;grid-row:span 6}
  .gallery-shot:nth-child(8n + 3){grid-column:span 4;grid-row:span 6}
  .gallery-shot:nth-child(8n + 4){grid-column:span 8;grid-row:span 6}
  .gallery-shot:nth-child(8n + 5),.gallery-shot:nth-child(8n + 6),.gallery-shot:nth-child(8n + 7){grid-column:span 4;grid-row:span 5}
  .gallery-shot:nth-child(8n + 8){grid-column:span 12;grid-row:span 6}
  .gallery-edit[data-count="2"] .gallery-shot:nth-child(1){grid-column:span 7;grid-row:span 5}
  .gallery-edit[data-count="2"] .gallery-shot:nth-child(2){grid-column:span 5;grid-row:span 5}
  .gallery-edit[data-count="3"] .gallery-shot:nth-child(1){grid-column:span 12;grid-row:span 6}
  .gallery-edit[data-count="3"] .gallery-shot:nth-child(2),
  .gallery-edit[data-count="3"] .gallery-shot:nth-child(3){grid-column:span 6;grid-row:span 5}
  .gallery-shot img{aspect-ratio:auto}
}

.viewer{
  width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;
  background:#0e0e0e;color:#f0eee9;overflow:hidden
}
.viewer::backdrop{background:rgba(0,0,0,.92);backdrop-filter:blur(8px)}
.viewer__bar{height:62px;display:flex;align-items:center;justify-content:space-between;padding-inline:var(--gutter);border-bottom:1px solid #2d2d2d;font-size:.72rem;letter-spacing:.1em;font-variant-numeric:tabular-nums}
.viewer__bar button,.viewer__nav{border:0;background:none;color:inherit;cursor:pointer}
.viewer__bar button{width:38px;height:38px;font-size:1.45rem}
.viewer__stage{height:calc(100dvh - 62px);display:grid;grid-template-columns:54px minmax(0,1fr) 54px;align-items:center;padding:clamp(12px,2vw,28px)}
.viewer__stage img{justify-self:center;max-width:100%;max-height:calc(100dvh - 118px);width:auto;height:auto;object-fit:contain}
.viewer__nav{height:100%;font-size:1.4rem;color:#aaa;transition:color var(--t-fast),background var(--t-fast)}
.viewer__nav:hover{color:var(--gold);background:#171717}
@media (max-width:599px){.viewer__stage{grid-template-columns:38px minmax(0,1fr) 38px;padding:6px}.viewer__nav{font-size:1.15rem}}

/* archive cards carry only a title, so they need their own rhythm */
.region .card:has(> .card__t:only-child){padding-block:1rem .9rem}

/* two stacked bands double their padding where a page header meets its body */
.band--tight + .band--tight{padding-top:0}
.band--tight .head{margin-bottom:clamp(1.2rem,2.4vw,2rem)}

/* ============================================== cross-document transitions ==
   The page changes the way the wall opens: the arriving page is revealed in
   vertical slots that widen until they meet. Same physics as the hero, used
   once more, on the one moment that used to be a white flash.               */
@view-transition{navigation:auto}

@property --slit{syntax:'<percentage>';inherits:false;initial-value:0%}

@keyframes wall-open{
  from{--slit:0%;opacity:.35}
  to{--slit:50%;opacity:1}
}
@keyframes wall-close{
  from{opacity:1;transform:scale(1)}
  to{opacity:0;transform:scale(.985)}
}

::view-transition-group(root){animation-duration:520ms}
::view-transition-old(root){
  animation:wall-close 300ms cubic-bezier(.4,0,1,1) both;
  mix-blend-mode:normal;
}
::view-transition-new(root){
  animation:wall-open 520ms cubic-bezier(.16,1,.3,1) both;
  /* ten openings that widen from nothing to full, so the incoming page
     assembles out of the same slot rhythm the site is built on */
  mask-image:repeating-linear-gradient(90deg,
    #000 0 var(--slit), transparent var(--slit) 10%);
  mask-size:100% 100%;
}

/* the chrome does not travel: it stays put while the body changes behind it */
.nav{view-transition-name:nav}
.foot{view-transition-name:foot}
::view-transition-group(nav),::view-transition-group(foot){animation-duration:260ms}
::view-transition-old(nav),::view-transition-new(nav),
::view-transition-old(foot),::view-transition-new(foot){animation:none;mix-blend-mode:normal}

/* a room photograph is the same object on both pages, so it moves rather than
   being destroyed and rebuilt */
.slot img,.roomcard img{view-transition-class:room}
::view-transition-group(.room){animation-duration:600ms;animation-timing-function:cubic-bezier(.16,1,.3,1)}
::view-transition-old(.room),::view-transition-new(.room){
  animation-duration:600ms;animation-timing-function:cubic-bezier(.16,1,.3,1);
  height:100%;object-fit:cover;
}

@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){
    animation:none !important;
  }
  ::view-transition-new(root){mask-image:none}
}