@charset "utf-8";
/* ======================================================================
   SKALÓPETRA — Σκαλόπετρα.  Guesthouse, Vathýskala, Anemónisi.
   THIS BUSINESS DOES NOT EXIST.  Direkto premium tier — four static pages.

   ORGANISING CONCEPT
   The site is the house's own hand: everything on it is written, ruled and
   added up by the person who answers the telephone, on a page that steps
   down to the door the way the lane does.

   SIGNATURE MOMENT — the ink.
   Nothing on this site is typeset by a machine where a hand would have done
   it.  On index and rooms the enquiry is a paper slip from the hall table:
   the nights are counted in tally strokes that draw themselves, the sum is
   ruled off in a ledger column, and the total is underlined twice by hand.
   On island and contact the same pen draws the journey as one continuous
   ink line down the page.  One idea, four pages.

   PALETTE — sampled from the hero photograph, and from nothing else.
   images.unsplash.com/photo-1690991966399-9758fdbe5794
   (a shaded terrace, an agave in the foreground, the hazed sea beyond)
     #1A160F  darkest shadow    — mean of the darkest 2% of pixels
     #58593D  dominant midtone  — the olive shade under the vine, most
                                  saturated cluster in the frame (S .31)
     #F8F7F4  lightest value    — mean of the lightest 1%, the lime wall
     #8C9EA9  the only hue      — sea haze, the single blue family (H 202)
     #B6BBB1  desaturated       — bleached stone in half light (S .05)
   Every other value in this file is one of those five, lightened, darkened
   or set at an opacity.  No sixth hue enters the page.
   ====================================================================== */

/* ------------------------------------------------------------ 1. tokens */
:root{
  color-scheme: light dark;

  /* the five, verbatim */
  --shadow:#1A160F;
  --olive:#58593D;
  --chalk:#F8F7F4;
  --haze:#8C9EA9;
  --drab:#B6BBB1;

  /* one ground, light */
  --paper:#F2F1EC;
  --paper-2:#E8E7DE;      /* insets and the slip */
  --paper-3:#DEDDD2;      /* the fold */
  --ink:#1F1D16;
  --ink-2:#494836;        /* 8.4:1 on --paper */
  --ink-3:#676752;        /* 4.9:1 on --paper */
  --accent:#2C5061;       /* --haze taken down the same hue for 7.6:1 */
  --accent-2:#3D6D83;
  --on-accent:#F6F8F9;
  --rule:rgba(31,29,22,.15);
  --rule-2:rgba(31,29,22,.32);
  --rule-3:rgba(31,29,22,.55);

  /* the dark ground, used for bands on both schemes */
  --night:#16150F;
  --night-2:#20200F;
  --on-night:#EAE9E1;
  --on-night-2:#A8A894;
  --accent-night:#A6C2CE;
  --rule-night:rgba(234,233,225,.22);

  /* type */
  --display:"Alegreya","Alegreya Regular",Palatino,"Palatino Linotype","Iowan Old Style","Noto Serif",Georgia,serif;
  --sans:"Commissioner",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue","Noto Sans",Arial,sans-serif;
  --num:"Commissioner",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --step--2:clamp(.72rem,.70rem + .10vw,.80rem);
  --step--1:clamp(.86rem,.83rem + .16vw,.96rem);
  --step-0: clamp(1.02rem,.97rem + .26vw,1.15rem);
  --step-1: clamp(1.22rem,1.10rem + .58vw,1.55rem);
  --step-2: clamp(1.55rem,1.30rem + 1.22vw,2.22rem);
  --step-3: clamp(2.00rem,1.52rem + 2.35vw,3.18rem);
  --step-4: clamp(2.55rem,1.68rem + 4.30vw,4.52rem);
  --step-5: clamp(2.85rem,1.75rem + 4.70vw,4.95rem);

  /* the lane: risers of deliberately unequal height */
  --riser-1:clamp(1.6rem,3vw,2.6rem);
  --riser-2:clamp(2.6rem,5vw,4.4rem);
  --riser-3:clamp(4.2rem,8vw,7.2rem);
  --riser-4:clamp(6.0rem,12vw,11rem);
  --gut:clamp(1.15rem,4.4vw,2.4rem);
  --wrap:1180px;

  /* motion */
  --e-quad:cubic-bezier(.25,.46,.45,.94);
  --e-expo:cubic-bezier(.16,1,.3,1);
  --e-back:cubic-bezier(.34,1.56,.64,1);
  --e-quart:cubic-bezier(.76,0,.24,1);

  /* one light direction: from the upper left, as on the terrace */
  --sh-1:0 1px 1px hsl(66 20% 8% / .05), 0 2px 4px hsl(66 20% 8% / .05);
  --sh-2:0 1px 2px hsl(66 20% 8% / .06), 0 4px 9px hsl(66 20% 8% / .06),
         0 10px 20px hsl(66 20% 8% / .06);
  --sh-3:0 1px 2px hsl(66 20% 8% / .07), 0 4px 8px hsl(66 20% 8% / .07),
         0 12px 24px hsl(66 20% 8% / .08), 0 26px 52px hsl(66 20% 8% / .09);
}

@media (prefers-color-scheme: dark){
  :root{
    --paper:#141309;
    --paper-2:#1C1B11;
    --paper-3:#26261A;
    --ink:#EDECE3;
    --ink-2:#C2C2AE;        /* 9.6:1 on --paper */
    --ink-3:#9C9C86;        /* 5.7:1 on --paper */
    --accent:#A6C2CE;
    --accent-2:#C3D6DE;
    --on-accent:#12181B;
    --rule:rgba(237,236,227,.16);
    --rule-2:rgba(237,236,227,.30);
    --rule-3:rgba(237,236,227,.50);
    --night:#0D0D07;
    --night-2:#17170D;
    --sh-1:0 1px 2px hsl(66 30% 3% / .5);
    --sh-2:0 2px 4px hsl(66 30% 3% / .45), 0 8px 18px hsl(66 30% 3% / .45);
    --sh-3:0 2px 4px hsl(66 30% 3% / .45), 0 8px 16px hsl(66 30% 3% / .45),
           0 20px 40px hsl(66 30% 3% / .5), 0 40px 80px hsl(66 30% 3% / .5);
  }
}

/* -------------------------------------------------------------- 2. base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:var(--step-0);line-height:1.62;
  font-weight:380;letter-spacing:.002em;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,h4{font-family:var(--display);font-weight:500;margin:0}
h1{font-size:var(--step-5);line-height:.94;letter-spacing:-.028em;text-wrap:balance}
h2{font-size:var(--step-3);line-height:1.04;letter-spacing:-.02em;text-wrap:balance}
h3{font-size:var(--step-1);line-height:1.18;letter-spacing:-.014em;text-wrap:balance}
h4{font-size:var(--step--1);letter-spacing:.14em;text-transform:uppercase;font-family:var(--sans);font-weight:600}
p{margin:0 0 1em;line-height:1.62;text-wrap:pretty;max-width:64ch}
p:last-child{margin-bottom:0}
a{color:var(--accent);text-underline-offset:.18em;text-decoration-thickness:from-font}
a:hover{color:var(--accent-2)}
strong,b{font-weight:600}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:2px}
::selection{background:var(--accent);color:var(--on-accent)}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* language switching: one of three spans is shown */
[data-lang="en"] [data-l]:not([data-l="en"]),
[data-lang="el"] [data-l]:not([data-l="el"]),
[data-lang="de"] [data-l]:not([data-l="de"]){display:none}

/* --------------------------------------------------- 3. grain and grade */
/* Every photograph on the site sits in .fig, which grades it toward the
   olive shade of the hero and lays one film of grain over the top. */
.fig{position:relative;overflow:hidden;background:var(--paper-3);isolation:isolate}
.fig img{width:100%;height:100%;object-fit:cover;filter:saturate(.84) contrast(1.05) brightness(1.01)}
.fig::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--olive);mix-blend-mode:soft-light;opacity:.34;
}
.fig::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  opacity:.15;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark){
  .fig img{filter:saturate(.78) contrast(1.04) brightness(.86)}
  .fig::before{opacity:.42}
}
figure{margin:0}
figcaption{
  font-size:var(--step--1);color:var(--ink-3);line-height:1.45;
  margin-top:.7em;max-width:44ch;
}

/* -------------------------------------------------------- 4. small type */
.mk{
  font-family:var(--sans);font-size:var(--step--2);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
  margin:0 0 .9em;display:flex;align-items:center;gap:.7em;
}
.mk::after{content:"";flex:1;height:1px;background:var(--rule);max-width:120px}
.mk--night{color:var(--on-night-2)}
.mk--night::after{background:var(--rule-night)}
.num{font-family:var(--num);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;font-weight:600;letter-spacing:-.01em}
.lede{font-size:var(--step-1);line-height:1.44;color:var(--ink-2);max-width:34ch;font-weight:350}

/* --------------------------------------------------- 5. fictional label */
.fict{
  margin:0;background:var(--night);color:var(--on-night-2);
  font-size:var(--step--2);letter-spacing:.11em;text-transform:uppercase;
  text-align:center;padding:.62rem var(--gut);line-height:1.5;font-weight:500;
  max-width:none;
}
.fict b{color:var(--on-night);font-weight:600;margin-inline-end:.4em}
.fict span{margin-inline-end:.6em}

/* --------------------------------------------------------- 6. site head */
.site{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--rule);
}
.site__in{display:flex;align-items:center;gap:var(--gut);min-height:64px;flex-wrap:wrap;padding-block:.5rem}
.mark{text-decoration:none;color:inherit;display:block;margin-inline-end:auto;line-height:1.15}
.mark b{display:block;font-family:var(--display);font-size:var(--step-0);font-weight:500;letter-spacing:-.008em}
.mark i{display:block;font-style:normal;font-size:var(--step--2);letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);margin-top:.25em}
.nav{display:flex;gap:clamp(.7rem,2vw,1.5rem);flex-wrap:wrap;order:3;width:100%;border-top:1px solid var(--rule);padding-top:.5rem}
.nav a{
  font-size:var(--step--1);text-decoration:none;color:var(--ink-2);
  padding:.25em 0;position:relative;white-space:nowrap;
  transition:color .18s var(--e-quad);
}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;
  background:var(--accent);transition:right .3s var(--e-expo);
}
.nav a:hover{color:var(--ink)}
.nav a:hover::after,.nav a[aria-current="page"]::after{right:0}
.nav a[aria-current="page"]{color:var(--ink);font-weight:600}
.lang{display:flex;gap:2px;border:1px solid var(--rule-2);border-radius:999px;padding:2px;background:var(--paper-2)}
.lang button{
  font:inherit;font-size:var(--step--2);font-weight:600;letter-spacing:.09em;
  border:0;background:none;color:var(--ink-3);cursor:pointer;
  padding:.32em .72em;border-radius:999px;
  transition:background .2s var(--e-quad),color .2s var(--e-quad);
}
.lang button:hover{color:var(--ink)}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
@media (min-width:820px){
  .site__in{flex-wrap:nowrap;min-height:76px}
  .nav{order:0;width:auto;border-top:0;padding-top:0}
}

/* ------------------------------------------------------------- 7. steps */
/* The lane. Each section is one tread further down and one further in;
   the risers between them are deliberately unequal. */
.sec{position:relative;padding-block:var(--riser-3)}
.sec--first{padding-block:var(--riser-2) var(--riser-3)}
.sec--pinch{padding-block:var(--riser-1) var(--riser-2)}
.sec--deep{padding-block:var(--riser-3) var(--riser-2)}
.sec--tail{padding-block:var(--riser-3) var(--riser-4)}

.tread{display:grid;gap:var(--riser-2)}
@media (min-width:900px){
  .tread{grid-template-columns:minmax(0,22rem) minmax(0,1fr);gap:clamp(2.5rem,5vw,5rem);align-items:start}
  .tread__rail{position:sticky;top:112px}
  .tread--flip{grid-template-columns:minmax(0,1fr) minmax(0,22rem)}
  .tread--flip .tread__rail{order:2}
}
.tread__rail h2{margin-bottom:.5em}
.tread__rail p{font-size:var(--step--1);color:var(--ink-3);max-width:32ch}

/* the joint: a hand-cut rule, not a border */
.joint{
  height:14px;margin:1.6rem 0;max-width:230px;color:var(--rule-3);
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 230 14' preserveAspectRatio='none'%3E%3Cpath d='M1 9.4C34 6.2 61 8.1 92 6.4c34-1.9 60 1.4 89-.5 18-1.2 33 .3 47-1.1' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 230 14' preserveAspectRatio='none'%3E%3Cpath d='M1 9.4C34 6.2 61 8.1 92 6.4c34-1.9 60 1.4 89-.5 18-1.2 33 .3 47-1.1' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;
}

/* --------------------------------------------------------------- 8. hero */
.hero{position:relative;padding-block:var(--riser-2) var(--riser-1);overflow:hidden}
.hero__in{display:grid;gap:var(--riser-2);position:relative}
.hero__t{position:relative;z-index:2}
.hero h1{margin-bottom:.34em}
.hero h1 .blk{display:block}
.rise{display:block;overflow:hidden;padding-bottom:.03em}
.rise > span{display:block}
.hero__lede{font-size:var(--step-1);line-height:1.42;color:var(--ink-2);max-width:38ch;font-weight:350}
.hero__lede b{font-weight:600;color:var(--ink)}
.hero__meta{
  font-size:var(--step--1);color:var(--ink-3);margin-top:1.6rem;
  border-top:1px solid var(--rule);padding-top:.9rem;max-width:46ch;
}
.hero__meta b{color:var(--ink-2)}
.hero__fig{display:flex;flex-direction:column;gap:.85rem;min-width:0}
.hero__fig .fig{aspect-ratio:4/5;border-radius:2px;box-shadow:var(--sh-3);flex:1 1 auto}
.hero__fig figcaption{margin-top:0;max-width:36ch}
@media (min-width:900px){
  .hero{padding-block:var(--riser-3) var(--riser-1)}
  .hero__in{
    grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
    gap:clamp(2rem,4vw,4rem);align-items:end;
  }
  .hero__in{align-items:stretch}
  .hero__fig{
    /* the photograph breaks the grid toward the water */
    margin-inline-end:calc(-1 * var(--gut) - clamp(0px,4vw,64px));
  }
  .hero__fig .fig{aspect-ratio:auto;min-height:30rem}
  .hero__fig figcaption{padding-inline-end:calc(var(--gut) + clamp(0px,4vw,64px))}
  .hero__t{padding-bottom:var(--riser-3)}
}
/* the treads under the hero: a real stepped edge, drawn once */
.treads{
  height:clamp(26px,4vw,48px);background:var(--paper-2);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M0 0H30V3H60V6H90V9H120V12H0Z' fill='%23000'/%3E%3C/svg%3E") repeat-x left top/240px 100%;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M0 0H30V3H60V6H90V9H120V12H0Z' fill='%23000'/%3E%3C/svg%3E") repeat-x left top/240px 100%;
}

/* -------------------------------------------------------------- 9. buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font:inherit;font-size:var(--step-0);font-weight:600;letter-spacing:-.005em;
  padding:.82em 1.25em;border-radius:3px;text-decoration:none;cursor:pointer;
  border:1px solid transparent;line-height:1.2;text-align:center;
  transition:transform .2s var(--e-quad),background .2s var(--e-quad),
             box-shadow .2s var(--e-quad),color .2s var(--e-quad),border-color .2s var(--e-quad);
}
.btn svg{width:1.15em;height:1.15em;flex:none;fill:currentColor}
.btn .arw{transition:transform .3s var(--e-expo)}
.btn:hover .arw{transform:translateX(4px)}
.btn--go{background:var(--accent);color:var(--on-accent);box-shadow:var(--sh-2)}
.btn--go:hover{background:var(--accent-2);color:var(--on-accent);transform:translateY(-2px);box-shadow:var(--sh-3)}
.btn--go:active{transform:translateY(0)}
.btn--tel{background:transparent;color:var(--ink);border-color:var(--rule-2)}
.btn--tel:hover{color:var(--ink);border-color:var(--rule-3);background:var(--paper-2);transform:translateY(-2px)}
.cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.7rem}
.cta .btn{flex:1 1 13rem;max-width:24rem;font-size:var(--step--1)}
.ask .btn--tel{color:var(--on-night);border-color:var(--rule-night)}
.ask .btn--tel:hover{background:rgba(234,233,225,.08);color:var(--on-night)}

/* ------------------------------------------------------------ 10. the slip */
/* The signature moment. A page torn from the pad by the telephone. */
.slip{
  position:relative;background:var(--paper-2);border:1px solid var(--rule-2);
  border-radius:2px;box-shadow:var(--sh-3);
  padding:clamp(1.15rem,3.6vw,2.1rem);
  max-width:44rem;
}
.slip::before{ /* the punched holes down the tear edge */
  content:"";position:absolute;left:0;top:0;bottom:0;width:14px;
  background:radial-gradient(circle at 7px 8px, var(--paper) 3px, transparent 3.5px) repeat-y left top/14px 22px;
  opacity:.9;pointer-events:none;
}
.slip__hd{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.1rem}
.slip__hd h3{font-size:var(--step-2);letter-spacing:-.018em}
.slip__hd .mk{margin:0}
.slip__hd .mk::after{display:none}
.grid2{display:grid;gap:.85rem}
@media (min-width:560px){.grid2{grid-template-columns:1fr 1fr}}
.fld{display:flex;flex-direction:column;gap:.34em;min-width:0}
.fld > span{font-size:var(--step--2);letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--ink-3)}
.fld input,.fld select{
  font:inherit;font-size:var(--step-0);font-family:var(--num);font-weight:500;
  color:var(--ink);background:var(--paper);
  border:1px solid var(--rule-2);border-bottom-width:2px;border-radius:2px;
  padding:.6em .7em;width:100%;min-width:0;
  transition:border-color .18s var(--e-quad),background .18s var(--e-quad);
}
.fld select{font-family:var(--sans)}
.fld input:hover,.fld select:hover{border-color:var(--rule-3)}
.fld input:focus,.fld select:focus{border-bottom-color:var(--accent)}
.fld--wide{grid-column:1/-1}

/* the ledger: rules drawn on real element boundaries, never painted behind */
.ledger{margin-top:1.3rem;border-top:1.5px solid var(--rule-3);padding-top:.15rem}
.ledger__row{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  border-bottom:1px solid var(--rule);padding:.62rem 0;
  font-size:var(--step--1);color:var(--ink-2);
}
.ledger__row dt,.ledger__row dd{margin:0}
.ledger__row dd{font-family:var(--num);font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink);text-align:end;white-space:nowrap}
.ledger__row--sum{border-bottom:0;padding-top:.9rem;font-size:var(--step-0)}
.ledger__row--sum dt{font-weight:600;color:var(--ink)}
.ledger__row--sum dd{white-space:nowrap;font-size:var(--step-2);font-family:var(--display);letter-spacing:-.02em;font-weight:600}
.ruleoff{ /* the double rule ruled under a total, by hand */
  height:9px;color:var(--rule-3);background:currentColor;margin-top:.15rem;
  -webkit-mask:var(--m) no-repeat right center/auto 100%;
  mask:var(--m) no-repeat right center/auto 100%;
  --m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 9'%3E%3Cpath d='M2 2.6c26-1 52 .5 78-.6 26-1 52 .3 78-.6M4 7c26-1 52 .5 78-.6 26-1 50 .4 76-.5' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.tally{display:flex;flex-wrap:wrap;gap:.55rem .8rem;align-items:center;min-height:1.9rem;margin:.2rem 0 0}
.tally svg{display:block;height:2.05rem;width:auto;overflow:visible}
.tally path{fill:none;stroke:var(--ink-2);stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:var(--len,60);stroke-dashoffset:0}
@media (prefers-reduced-motion: no-preference){
  .tally path{animation:ink .34s var(--e-quad) backwards;animation-delay:calc(var(--d,0) * 55ms)}
  @keyframes ink{from{stroke-dashoffset:var(--len,60)}}
}
.slip__out{margin-top:.35rem}
.slip__rest{font-size:var(--step--1);color:var(--ink-3);margin:1.3rem 0 0;border-top:1.5px solid var(--rule-3);padding-top:1rem}
.slip__note{font-size:var(--step--2);color:var(--ink-3);line-height:1.55;margin-top:1rem;max-width:52ch}
.slip__warn{
  font-size:var(--step--1);color:var(--ink-2);margin-top:.9rem;
  border-inline-start:2.5px solid var(--accent);padding:.15rem 0 .15rem .8rem;
}
.slip .cta{margin-top:1.3rem}
.slip .cta .btn{flex:1 1 100%}

/* ------------------------------------------------------------- 11. bands */
.band{position:relative;isolation:isolate;margin-block:var(--riser-3)}
/* Full-bleed images carry type, so they are graded harder than the rest. */
.band .fig img{filter:saturate(.58) contrast(1.09) brightness(.94)}
.band .fig::before{opacity:.5}
.band .fig{aspect-ratio:16/11}
.band__over{
  position:absolute;inset:auto 0 0 0;z-index:3;padding-block:clamp(1.6rem,5vw,3.4rem);
  background:linear-gradient(transparent,rgba(20,19,13,.30) 16%,rgba(20,19,13,.80) 55%,rgba(20,19,13,.95));
  color:var(--on-night);
}
.band__over h2{color:var(--on-night);max-width:22ch}
.band__over p{color:#D9D7CC;margin-top:.7em;max-width:48ch;font-size:var(--step--1)}
@media (min-width:700px){.band .fig{aspect-ratio:2/1}}
@media (min-width:1000px){.band .fig{aspect-ratio:24/9}}

/* ------------------------------------------------------ 12. rooms ledger */
.rooms{border-top:1.5px solid var(--rule-3)}
.room{
  display:grid;gap:1rem var(--gut);padding-block:var(--riser-2);
  border-bottom:1px solid var(--rule-2);
}
.room__no{font-family:var(--num);font-size:var(--step--1);font-weight:600;color:var(--ink-3);letter-spacing:.1em}
.room__fig{aspect-ratio:5/4;border-radius:2px;box-shadow:var(--sh-2)}
.room__fig img{transition:transform .7s var(--e-expo)}
.room:hover .room__fig img{transform:scale(1.045)}
.room h3{font-size:var(--step-2);margin:.1em 0 .35em}
.room__gk{font-size:var(--step--2);letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);margin:0 0 .2em}
.room__price{
  display:flex;align-items:baseline;gap:.5em;flex-wrap:wrap;
  margin-top:1.1rem;padding-top:.8rem;border-top:1px solid var(--rule);
  font-size:var(--step--1);color:var(--ink-3);
}
.room__price .num{font-size:var(--step-2);color:var(--ink);font-family:var(--display);font-weight:600;letter-spacing:-.02em}
.spec{margin:1.1rem 0 0;display:grid;gap:0}
.spec > div{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:.2rem 1rem;border-bottom:1px solid var(--rule);padding:.55rem 0;font-size:var(--step--1)}
.spec dt{color:var(--ink-3);letter-spacing:.02em}
.spec dd{margin:0;color:var(--ink-2);max-width:44ch}
@media (min-width:900px){
  .room{
    grid-template-columns:3.5rem minmax(0,1fr) minmax(0,1.02fr);
    grid-template-areas:"no text fig";align-items:start;
  }
  .room__no{grid-area:no}
  .room__body{grid-area:text}
  .room__fig{grid-area:fig;position:sticky;top:120px}
  .room:nth-child(even){grid-template-areas:"no fig text"}
}

/* --------------------------------------------------------- 13. the facts */
.facts{margin:0;display:grid;gap:0;border-top:1.5px solid var(--rule-3)}
.facts > div{
  display:grid;gap:.15rem .5rem;padding:.95rem 0;border-bottom:1px solid var(--rule);
}
.facts dt{font-size:var(--step--2);letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink-3)}
.facts dd{margin:0;font-size:var(--step--1);color:var(--ink-2);max-width:58ch}
.facts dd em{font-style:normal;color:var(--ink);font-weight:500}
@media (min-width:680px){
  .facts > div{grid-template-columns:11rem minmax(0,1fr);align-items:baseline}
}

/* ------------------------------------------------------- 14. the ink line */
/* island + contact: one continuous pen stroke down the page, drawn on
   scroll where the browser supports it and simply finished where it does
   not.  The content never depends on it. */
.routewrap{position:relative}
.route{position:relative;margin:0;padding:0;list-style:none}
.route__ink{
  position:absolute;left:8px;top:.5rem;bottom:.5rem;width:16px;height:auto;z-index:0;
  pointer-events:none;overflow:visible;
}
.route__ink path{
  fill:none;stroke:var(--rule-3);stroke-width:2.4;stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .route__ink path{
      stroke-dasharray:1000;stroke-dashoffset:1000;
      animation:draw linear forwards;
      animation-timeline:view();
      animation-range:entry 30% cover 72%;
    }
    @keyframes draw{to{stroke-dashoffset:0}}
  }
}
.route > li{
  position:relative;z-index:1;padding:0 0 var(--riser-2) 3.4rem;
}
.route > li:last-child{padding-bottom:0}
.route > li::before{
  content:"";position:absolute;left:16px;top:.72em;width:16px;height:16px;
  transform:translate(-50%,-50%);border-radius:50%;
  background:var(--paper);border:2.4px solid var(--ink-2);
}
.route h3{font-size:var(--step-1);margin-bottom:.3em}
.route .mk{margin-bottom:.5em}
.route p{color:var(--ink-2);font-size:var(--step--1)}
.route .tip{
  display:block;margin-top:.7em;font-size:var(--step--1);color:var(--ink);
  border-inline-start:2.5px solid var(--accent);padding-inline-start:.8rem;
}
.route .num{color:var(--ink);font-weight:600}

/* ------------------------------------------------------------- 15. entries */
.entries{display:grid;gap:var(--riser-2)}
@media (min-width:760px){.entries{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--riser-2) var(--gut)}}
.entry .fig{aspect-ratio:5/4;border-radius:2px;box-shadow:var(--sh-2)}
.entry .fig img{transition:transform .7s var(--e-expo)}
.entry:hover .fig img{transform:scale(1.045)}
.entry h3{margin:.35em 0 .3em}
.entry p{font-size:var(--step--1);color:var(--ink-2)}
.entry .why{margin-top:.7em;font-size:var(--step--1);color:var(--ink-3)}
.entry .why .num{color:var(--ink);font-size:var(--step-1);font-family:var(--display);font-weight:600}

/* --------------------------------------------------------------- 16. ask */
.ask{background:var(--night);color:var(--on-night);padding-block:var(--riser-4)}
.ask h2{color:var(--on-night);max-width:20ch}
.ask p{color:var(--on-night-2);max-width:50ch}
.ask .note{
  font-size:var(--step--1);margin-top:2rem;padding-top:1.1rem;
  border-top:1px solid var(--rule-night);max-width:58ch;color:var(--on-night-2);
}
.ask .note b{color:var(--on-night)}
.ask .btn--go{background:var(--accent-night);color:#12181B}
.ask .btn--go:hover{background:#C3D6DE;color:#12181B}

/* -------------------------------------------------------------- 17. foot */
.foot{background:var(--night-2);color:var(--on-night-2);padding-block:var(--riser-3) var(--riser-2);font-size:var(--step--1)}
.foot h3{
  font-family:var(--sans);font-size:var(--step--1);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;line-height:1.3;
  color:var(--on-night);margin-bottom:.7em;
}
.foot a{color:var(--accent-night)}
.foot p{max-width:34ch}
.foot__grid{display:grid;gap:var(--riser-2)}
@media (min-width:720px){.foot__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gut)}}
.disc{
  margin-top:var(--riser-2);padding-top:1.2rem;border-top:1px solid var(--rule-night);
  font-size:var(--step--2);line-height:1.65;max-width:none;color:var(--on-night-2);
}
.disc b{color:var(--on-night);letter-spacing:.08em}

/* ------------------------------------------------------ 18. sticky pair */
.stick{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:flex;gap:.5rem;padding:.55rem var(--gut) calc(.55rem + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-top:1px solid var(--rule-2);
  transform:translateY(102%);transition:transform .42s var(--e-expo);
}
.stick[data-on="1"]{transform:none}
.stick .btn{flex:1;font-size:var(--step--1);padding:.7em 1em}
@media (min-width:900px){.stick{display:none}}

/* ------------------------------------------------- 19. load orchestration */
/* Resting state is the finished state; nothing waits on an observer. */
@media (prefers-reduced-motion: no-preference){
  .reveal > *{animation:rise .72s var(--e-expo) backwards;animation-delay:calc(var(--i,0) * 72ms)}
  @keyframes rise{from{opacity:0;transform:translateY(15px)}}
  .rise > span{animation:up .82s var(--e-expo) backwards;animation-delay:calc(var(--i,0) * 88ms + 60ms)}
  @keyframes up{from{transform:translateY(105%)}}
}
/* scroll used for depth only, never to reveal */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .band .fig img,.hero__fig img{
      animation:pan linear both;animation-timeline:view();animation-range:entry 15% cover 90%;
    }
    @keyframes pan{from{transform:scale(1.085) translateY(1.4%)}to{transform:scale(1) translateY(-1.4%)}}
  }
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
}

/* --------------------------------------------------- 20. view transition */
@view-transition{navigation:auto}
@media (prefers-reduced-motion: no-preference){
  ::view-transition-old(root){animation:vt-out .22s var(--e-quad) both}
  ::view-transition-new(root){animation:vt-in .4s var(--e-expo) both}
  @keyframes vt-out{to{opacity:0}}
  @keyframes vt-in{from{opacity:0;transform:translateY(10px)}}
}

/* ------------------------------------------------------------ 21. print */
@media print{
  .site,.stick,.ask .cta,.slip .cta{display:none}
  body{background:#fff;color:#000}
}

/* ---------------------------------------------- 22. the nights cell */
.ledger__row .dd--tally{
  display:flex;align-items:center;gap:.55rem .9rem;flex-wrap:wrap;
  justify-content:flex-end;white-space:normal;
}
.ledger__row .dd--tally .tally{margin:0}