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

   ORGANISING CONCEPT — THE STAIR.  Unchanged, and not what was wrong.
   The house is forty-one steps below the square and the lane gets there one
   tread at a time.  So does the site.  The four pages are four landings on
   one flight, numbered by how far down they are:

        41   index.html    the house, at the top of the lane
        27   rooms.html    the five rooms
        14   island.html   what is outside the door
         0   contact.html  the door itself

   THE SKIN — THE MASON'S SETTING-OUT.  Rewritten 10 September 2026, because
   in a row this page and the hotel next to it were plainly the same studio:
   both cream-warm, both a serif display, both letterspaced small caps, both
   a photograph band with the type written over it.  We changed nothing
   structural.  We changed the surface, which is the thing a visitor sees.

   The house was cut by Anastásis Voulgáris in 1911 and his initials are
   still on the lintel over the kitchen door, because nobody ever painted
   over them.  So the page is not paper.  The page is the stone — bare,
   cool, mid-value, never whitewashed — and the only marks on it are the
   ones a mason leaves: a line snapped in red keel, a number written on the
   face of a block before it is cut, and a photograph set in like a panel.

   WHAT WAS DELIBERATELY BROKEN, against the house default:
     1. THE GROUND'S VALUE.  Cream #F2EEE7 -> cut stone #C6C9C1.  Not paper
        and not dark: the one page in the set whose ground is neither.  It
        is the decision that shows at thumbnail size, which is the size the
        set test judges at.
     2. THE TYPEFACE REGISTER.  No serif anywhere, and no second family.
        One engineer's grotesque — IBM Plex Sans, Greek subset verified by
        curling the CSS2 URL and grepping for the greek subset comment (do
        NOT paste that comment into a stylesheet: its own closing delimiter
        ends the comment you are writing, and the rest of the file is then
        parsed as garbage.  This cost one render) — at 700 and tight for
        display, 400 for text, its own lining figures for every number.
        And the letterspaced small-cap micro-label is gone from every page:
        section marks are a plain word at reading size under a snapped line.
     3. THE IMAGE GRADE.  The ochre soft-light wash that sat over every
        photograph on this site at .30 opacity was a colour grade we were
        applying ourselves, and it was the single strongest reason this page
        and the hotel looked related.  Removed, with the grain film.  The
        photographs now run near-neutral and are the only saturated objects
        on a grey page, so they gain scale for free.
     4. THE GRID.  No price is right-aligned against a wide left column
        anywhere on the site: every figure sits on its own line, left, at
        display size, in keel red.  And no type is written over any
        photograph — a band is a frame with a hard bottom edge and a solid
        graphite shelf under it.

   PALETTE — computed, not eyeballed.  Every pair below was run through a
   contrast script before a line of this file was written; worst painted
   pair 4.55:1 (keel on the recessed course), body text 10.86:1.
     --paper    #C6C9C1  bare cut stone, the ground
     --paper-2  #D1D4CC  a dressed face — the slip, the board, the drawing
     --paper-3  #BABDB5  a course in shadow — strips, the onward tread
     --accent   #8A2A17  red keel, the chalk a mason snaps his lines with
     --graphite #1E201C  the only dark object on the site
   No sixth hue enters the site.  THE GROUND DECLINES TO INVERT: a stone
   wall is the same colour at night, the whole thesis is a mid-value mineral
   ground, and painting it dark would hand the dark render straight back to
   the house skin.  color-scheme is light, both schemes are painted the same.
   ====================================================================== */

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

  /* the stone, at three values */
  --paper:#C6C9C1;
  --paper-2:#D1D4CC;
  --paper-3:#BABDB5;

  --ink:#141613;          /* 10.86:1 on --paper */
  --ink-2:#3A3D37;        /*  6.58:1 */
  --ink-3:#484C44;        /*  5.10:1 on --paper, 4.55:1 on --paper-3 */
  --accent:#8A2A17;       /*  5.17:1 — red keel */
  --accent-2:#6E2011;     /*  6.67:1 */
  --on-accent:#F3F1E9;    /*  7.66:1 on --accent */

  /* the one dark object: the shelf under a frame */
  --night:#1E201C;
  --on-night:#E4E6DF;     /* 13.05:1 */
  --on-night-2:#AFB3AA;   /*  7.70:1 */

  /* the drawing on island.html */
  --land:#AEB2A8;
  --sea:#A2B4BB;

  /* every edge on this site is cut, not blurred */
  --rule:rgba(20,22,19,.20);
  --rule-2:rgba(20,22,19,.38);
  --rule-3:rgba(20,22,19,.62);
  --wash:rgba(20,22,19,.055);
  --cut:1.5px solid var(--rule-3);   /* a dressed edge */
  --cut-2:2.5px solid var(--ink);    /* a cut edge */

  /* type — one family, no serif, nowhere */
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue","Noto Sans",Arial,sans-serif;
  --display:var(--sans);
  --num:var(--sans);

  --step--2:clamp(.76rem,.74rem + .10vw,.84rem);
  --step--1:clamp(.88rem,.85rem + .16vw,.98rem);
  --step-0: clamp(1.03rem,.98rem + .26vw,1.16rem);
  --step-1: clamp(1.22rem,1.10rem + .58vw,1.55rem);
  --step-2: clamp(1.52rem,1.28rem + 1.18vw,2.16rem);
  --step-3: clamp(1.94rem,1.48rem + 2.26vw,3.05rem);
  --step-4: clamp(2.45rem,1.62rem + 4.10vw,4.30rem);
  --step-5: clamp(3.40rem,2.00rem + 7.00vw,7.40rem);

  /* 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:1160px;

  /* 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);

  /* Kept as tokens because a dozen rules name them, but a stone page has
     no soft shadows on it.  Depth here is a cut edge and a change of
     value, never a blur — which is also why nothing on the page reads as
     a floating card. */
  --sh-1:none;
  --sh-2:none;
  --sh-3:none;
}

/* -------------------------------------------------------------- 2. base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
[hidden]{display:none!important}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:var(--step-0);line-height:1.6;
  font-weight:400;letter-spacing:0;
  font-variant-numeric:lining-nums;
  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:700;margin:0}
h1{font-size:var(--step-3);line-height:1.02;letter-spacing:-.035em;text-wrap:balance}
h2{font-size:var(--step-2);line-height:1.08;letter-spacing:-.03em;text-wrap:balance}
h3{font-size:var(--step-1);line-height:1.18;letter-spacing:-.022em;text-wrap:balance}
p{margin:0 0 1em;line-height:1.6;text-wrap:pretty;max-width:62ch}
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:0}
::selection{background:var(--accent);color:var(--on-accent)}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}

/* Accented French and Italian capitals push a circumflex through the line
   above at a display line-height tuned to English.  The leading is given to
   the languages that need it, not to the type, so the English setting is
   untouched to the pixel. */
h1 [data-l="fr"],h1 [data-l="it"],h2 [data-l="fr"],h2 [data-l="it"]{line-height:1.12}

/* =====================================================================
   FIVE LANGUAGES, AND NO JAVASCRIPT IN THE SWITCH.

   Every translatable run is a bare <span data-l="xx" lang="xx">.  The
   language the page SHIPS is the one named by data-lang on <html>, and
   the rule below uses no :has(), so it is what an old browser, a feed
   reader and a printer get.  The five PAIRS under it are the switch:
   five visually hidden radios live once in the document and :has()
   reads whichever one the reader checked.  No script is consulted and
   the un-switched state is the finished page.

   Because the override has to UN-hide as well as hide, every [data-l]
   is a plain <span> with no display of its own — including the ones
   wrapping the WhatsApp and telephone buttons — so revert always lands
   on inline, and a span that is a flex item is blockified by its
   parent as usual.  That invariant is why this needs no !important. */
[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"]),
[data-lang="fr"] [data-l]:not([data-l="fr"]),
[data-lang="it"] [data-l]:not([data-l="it"]){display:none}

/* Each pair is its own statement: a browser without :has() drops these
   and keeps the shipped language rather than showing all five at once. */
html:has(#lg-en:checked) [data-l="en"]{display:revert}
html:has(#lg-en:checked) [data-l]:not([data-l="en"]){display:none}
html:has(#lg-el:checked) [data-l="el"]{display:revert}
html:has(#lg-el:checked) [data-l]:not([data-l="el"]){display:none}
html:has(#lg-de:checked) [data-l="de"]{display:revert}
html:has(#lg-de:checked) [data-l]:not([data-l="de"]){display:none}
html:has(#lg-fr:checked) [data-l="fr"]{display:revert}
html:has(#lg-fr:checked) [data-l]:not([data-l="fr"]){display:none}
html:has(#lg-it:checked) [data-l="it"]{display:revert}
html:has(#lg-it:checked) [data-l]:not([data-l="it"]){display:none}

/* --------------------------------------------------- 3. the photographs */
/* NO GRADE.  The ochre soft-light wash and the grain film that used to sit
   over every frame here are gone — a lighting effect that covers a whole
   frame has stopped being lighting and become a house colour grade, and it
   was ours.  What is left is a hair of desaturation to keep five different
   afternoons in one family, and a cut edge.  On a grey ground the
   photographs are the only saturated objects on the page. */
.fig{position:relative;overflow:hidden;background:var(--paper-3);isolation:isolate;border:1px solid var(--rule-3)}
.fig img{width:100%;height:100%;object-fit:cover;filter:saturate(.97) contrast(1.02)}
figure{margin:0}
figcaption{font-size:var(--step--1);color:var(--ink-3);line-height:1.45;margin-top:.7em;max-width:46ch}

/* -------------------------------------------------------- 4. small type */
/* THE SECTION MARK.  Not a .16em-tracked uppercase micro-label — that is
   the tic nobody names and it was on every section of every page we own.
   It is a line snapped in red keel and a plain word at reading size under
   it, which is what a mason actually leaves on a wall. */
.mk{
  font-family:var(--sans);font-size:var(--step--1);font-weight:600;
  letter-spacing:0;text-transform:none;color:var(--ink-2);
  margin:0 0 1em;padding-top:.55em;position:relative;
}
.mk::before{
  content:"";position:absolute;left:0;top:0;width:2.6rem;height:3px;
  background:var(--accent);
}
.num{font-variant-numeric:tabular-nums lining-nums;font-feature-settings:"tnum" 1;font-weight:600;letter-spacing:-.01em}
.lede{font-size:var(--step-1);line-height:1.42;color:var(--ink-2);max-width:36ch;font-weight:400}

/* --------------------------------------------------- 5. fictional label */
/* One line at 390 — it must not push the photograph off the first screen. */
.fict{
  margin:0;background:var(--paper-3);color:var(--ink-2);
  font-size:var(--step--2);letter-spacing:0;text-transform:none;
  padding:.42rem var(--gut);line-height:1.4;font-weight:500;max-width:none;
  display:flex;gap:.55em;justify-content:center;flex-wrap:wrap;
  border-bottom:1px solid var(--rule-2);
}
.fict b{color:var(--ink);font-weight:700}


/* --------------------------------------------------------- 6. masthead */
/* Opaque on purpose.  A translucent sticky makes our own gate composite
   its text against whatever section is scrolled underneath and report a
   perfectly legible line at 1.03:1; an opaque background removes the
   whole class of false positives, and on a stone page a blurred bar was
   the wrong material anyway. */
.site{
  position:sticky;top:0;z-index:60;
  background:var(--paper);
  view-transition-name:masthead;
}
.site__in{display:flex;flex-wrap:wrap;align-items:center;gap:var(--gut);min-height:54px;padding-block:.4rem}
.mark{text-decoration:none;color:inherit;display:block;margin-inline-end:auto;line-height:1.14}
.mark b{display:block;font-family:var(--display);font-size:var(--step-0);font-weight:700;letter-spacing:-.02em}
.mark i{display:block;font-style:normal;font-size:var(--step--2);letter-spacing:0;text-transform:none;color:var(--ink-3);margin-top:.15em;font-weight:500}
/* --------------------------------------------------- the language chip
   Five languages will not sit in a row of chips — a row of five chips
   is a second bar.  It is a disclosure, and it stays in the strip the
   masthead already had.  Below 560px the panel opens IN FLOW: the
   strip grows and the page moves down, so nothing is ever covered on a
   390px screen.  Above it, the panel is a small cut-edged plate. */
.lang{flex:none;position:relative;font-size:var(--step--2)}
.lang > summary{
  list-style:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:.34rem;
  min-height:32px;padding:.1rem .6rem;
  border:1.5px solid var(--rule-3);border-radius:0;
  background:var(--paper-2);color:var(--ink);
  font-family:var(--sans);font-size:var(--step--2);font-weight:600;
  letter-spacing:.02em;line-height:1;
}
.lang > summary::-webkit-details-marker{display:none}
.lang > summary::marker{content:""}
.lang > summary svg{width:14px;height:14px;fill:currentColor;flex:none}
.lang > summary i{font-style:normal;font-size:.78em;opacity:.75}
.lang > summary:hover{background:var(--wash)}
.lang[open] > summary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.lang__menu{display:flex;flex-wrap:wrap;gap:.3rem;padding:.5rem 0 .2rem}
.lang[open]{flex:1 0 100%}
.lang__r{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.lang__menu label{
  cursor:pointer;
  display:inline-flex;align-items:center;min-height:32px;
  padding:.2rem .7rem .24rem;
  border:1.5px solid var(--rule-3);border-radius:0;
  background:var(--paper-2);color:var(--ink);
  font-family:var(--sans);font-size:var(--step--1);line-height:1.2;
}
.lang__menu label:hover{background:var(--wash)}
.lang__r:checked + label{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.lang__r:focus-visible + label{outline:2.5px solid var(--accent);outline-offset:2px}
@media (min-width:560px){
  .lang[open]{flex:none}
  .lang__menu{
    position:absolute;inset-inline-end:0;top:calc(100% + .45rem);z-index:80;
    flex-direction:column;flex-wrap:nowrap;gap:.22rem;padding:.45rem;
    min-width:10.5rem;
    background:var(--paper-2);border:2px solid var(--ink);border-radius:0;
  }
}
@media (min-width:900px){.site__in{min-height:64px}}

/* ---------------------------------------------------- 7. the stair strip */
/* The whole navigation.  Four treads, each one lower than the last, and a
   marker that is the visitor's position on the flight.  The marker carries
   its own view-transition-name, so between two landings it does not fade —
   it walks down.  The tread numbers are the largest thing in the strip and
   they are in keel, because a number written on stone is the one piece of
   furniture this business would actually have. */
.stair{
  position:sticky;top:0;z-index:55;background:var(--paper);
  border-top:1px solid var(--rule-2);border-bottom:2.5px solid var(--ink);
  view-transition-name:stair;
}
.stair__in{position:relative;display:grid;grid-template-columns:repeat(4,1fr);align-items:stretch}
.stair a{
  position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;
  gap:.05em;text-decoration:none;color:var(--ink-3);
  padding:.34rem .3rem .5rem;min-width:0;
  border-inline-start:1px solid var(--rule-2);
  transition:color .2s var(--e-quad),background .2s var(--e-quad);
}
.stair a:first-child{border-inline-start:0}
/* the real stepped edge: each tread sits lower in its cell */
.stair a:nth-child(1){padding-top:.34rem}
.stair a:nth-child(2){padding-top:.62rem}
.stair a:nth-child(3){padding-top:.90rem}
.stair a:nth-child(4){padding-top:1.18rem}
.stair i{
  font-style:normal;font-family:var(--num);font-weight:700;
  font-size:var(--step-0);letter-spacing:-.04em;color:var(--ink-2);
  font-variant-numeric:tabular-nums lining-nums;line-height:1;
}
.stair b{
  font-weight:500;font-size:var(--step--2);letter-spacing:0;line-height:1.15;
}
.stair a:hover{color:var(--ink);background:var(--wash)}
.stair a:hover i{color:var(--accent)}
.stair a[aria-current="page"]{color:var(--ink)}
.stair a[aria-current="page"] i{color:var(--accent)}
.stair a[aria-current="page"] b{font-weight:700}
.stair__mark{
  position:absolute;z-index:1;bottom:0;height:5px;width:25%;
  background:var(--accent);
  transform:translateX(calc(var(--tread,0) * 100%));
  view-transition-name:mark;
}
/* while a landing is being read, the marker travels toward the next tread */
.stair__mark{transform:translateX(calc((var(--tread,0) + var(--within,0) * .999) * 100%))}
@media (min-width:760px){
  .stair a{padding-inline:.9rem;gap:.15em}
  .stair a:nth-child(1){padding-top:.5rem;padding-bottom:.62rem}
  .stair a:nth-child(2){padding-top:.85rem;padding-bottom:.62rem}
  .stair a:nth-child(3){padding-top:1.2rem;padding-bottom:.62rem}
  .stair a:nth-child(4){padding-top:1.55rem;padding-bottom:.62rem}
  .stair i{font-size:var(--step-1)}
  .stair b{font-size:var(--step--1)}
}

/* --------------------------------------------------------------- 8. hero */
/* The photograph is the first thing on the page at every width — full-bleed,
   and it is the lane.  Nothing is written on it.  The type stands under it
   and the step-count is set at the size a number gets when it is cut into a
   block rather than printed under one. */
.lane{position:relative;isolation:isolate;background:var(--paper-3);overflow:hidden}
.lane .fig{aspect-ratio:3/4;border:0;border-bottom:2.5px solid var(--ink)}
.lane__gl{
  position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;
  filter:saturate(.97) contrast(1.02);
}
.lane__edge{
  position:absolute;left:0;right:0;bottom:-1px;height:clamp(26px,4.6vw,58px);z-index:4;
  background:var(--paper);pointer-events:none;
  --m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M0 0H20V4H40V8H60V12H80V16H100V20H0Z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask:var(--m) no-repeat left bottom/100% 100%;
  mask:var(--m) no-repeat left bottom/100% 100%;
}
@media (min-width:700px){.lane .fig{aspect-ratio:16/10}}
@media (min-width:1100px){.lane .fig{aspect-ratio:2.1/1}
  .lane:not(#lane) .fig{aspect-ratio:16/9}}

.head{padding-block:var(--riser-2) var(--riser-1)}
.head__in{display:grid;gap:var(--riser-1)}
.gauge{display:flex;align-items:flex-start;gap:.9rem}
.gauge__n{
  font-family:var(--display);font-size:var(--step-5);line-height:.78;
  letter-spacing:-.06em;font-weight:700;color:var(--accent);
  font-variant-numeric:lining-nums;
}
.gauge__t{font-size:var(--step--1);color:var(--ink-3);max-width:10em;line-height:1.35;padding-top:.4em}
.gauge__t b{display:block;color:var(--ink);font-weight:700;letter-spacing:0;text-transform:none;font-size:var(--step--1);margin-bottom:.2em}
.head h1{margin-bottom:.5em}
.head__lede{font-size:var(--step-1);line-height:1.42;color:var(--ink-2);max-width:40ch;font-weight:400}
.head__meta{
  font-size:var(--step--1);color:var(--ink-3);margin-top:1.5rem;
  padding-top:.85rem;border-top:1.5px solid var(--rule-3);max-width:54ch;
}
.head__meta .num{color:var(--ink)}
.head figcaption{margin-top:1.6rem;border-top:1px solid var(--rule-2);padding-top:.7rem;max-width:44ch}
@media (min-width:900px){
  .head{padding-block:var(--riser-3) var(--riser-2)}
  /* THE SETTING-OUT LINE.  The number hangs in its own margin against a
     keel line running the height of the block, and the text starts where
     the line is.  This is not the narrow-column / wide-column pair the
     rest of the set uses; the left column carries no prose at all. */
  .head__in{grid-template-columns:minmax(0,13rem) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
  .gauge{flex-direction:column;gap:.55rem;position:sticky;top:9rem}
  .gauge__t{padding-top:0;max-width:14em}
  .head figcaption{margin-top:2rem}
}

/* -------------------------------------------------------- 9. the buttons */
/* Square, cut, no lift and no glow.  A stone page has no floating cards on
   it, so a button that rises on hover is the wrong material; it darkens. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font:inherit;font-size:var(--step--1);font-weight:600;letter-spacing:0;
  padding:.86em 1.25em;border-radius:0;text-decoration:none;cursor:pointer;
  border:2px solid transparent;line-height:1.2;text-align:center;
  transition:background .18s var(--e-quad),color .18s var(--e-quad),border-color .18s 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);border-color:var(--accent)}
.btn--go:hover{background:var(--accent-2);border-color:var(--accent-2);color:var(--on-accent)}
.btn--tel{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--tel:hover{color:var(--paper);background:var(--ink)}
.cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem}
.cta > [data-l]{flex:1 1 13rem;max-width:24rem;min-width:0}
.cta > [data-l] > .btn{display:flex;width:100%}
/* a plain text link that steps down */
.down{
  display:inline-flex;align-items:baseline;gap:.5em;text-decoration:none;
  font-size:var(--step--1);font-weight:600;color:var(--ink);
  border-bottom:2px solid var(--accent);padding-bottom:.2em;
  transition:color .22s var(--e-quad),background .22s var(--e-quad);
}
.down .num{color:var(--ink-3);font-size:var(--step--2)}
.down svg{width:.9em;height:.9em;fill:currentColor;transition:transform .3s var(--e-expo)}
.down:hover{color:var(--accent)}
.down:hover svg{transform:translateY(3px)}

/* ------------------------------------------------------- 10. the sections */
.sec{position:relative;padding-block:var(--riser-3)}
.sec--pinch{padding-block:var(--riser-2)}
.sec--tail{padding-block:var(--riser-2) var(--riser-3)}
.sec + .band{margin-top:var(--riser-1)}
.band + .sec{padding-top:var(--riser-2)}
.sec__hd{max-width:34ch;margin-bottom:var(--riser-2)}
.sec__hd p{font-size:var(--step--1);color:var(--ink-3);margin-top:.8em;max-width:40ch}
/* a snapped line, used only where a heading needs a stop under it */
.joint{
  height:5px;margin:1.2rem 0;max-width:210px;background:var(--accent);
}

/* ------------------------------------------------------- 11. the enquiry */
/* The signature moment, kept whole: the slip counts your nights in pencil,
   in five-bar gates, and rules the total off by hand.  What changed is that
   the total is no longer a figure right-aligned in an amount column — it
   stands on its own line, left, at display size, in keel. */
.slipwrap{display:grid;gap:var(--riser-2)}
@media (min-width:980px){
  .slipwrap{grid-template-columns:minmax(0,19rem) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:start}
  .slipwrap__say{position:sticky;top:9rem}
}
.slipwrap__say h2{margin-bottom:.5em}
.slipwrap__say p{font-size:var(--step--1);color:var(--ink-3);max-width:32ch}
.slip{
  position:relative;background:var(--paper-2);border:2.5px solid var(--ink);
  border-radius:0;
  padding:clamp(1.15rem,3.6vw,2.1rem);padding-inline-start:clamp(1.6rem,4.4vw,2.6rem);
  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:.85;pointer-events:none;
}
.slip__hd{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.2rem}
.slip__hd h3{font-size:var(--step-2);letter-spacing:-.03em}
.slip__hd .mk{margin:0}
.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--1);letter-spacing:0;text-transform:none;font-weight:600;color:var(--ink-2)}
.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:1.5px solid var(--rule-3);border-bottom-width:2.5px;border-radius:0;
  padding:.6em .7em;width:100%;min-width:0;
  transition:border-color .18s var(--e-quad),background .18s var(--e-quad);
}
.fld input:hover,.fld select:hover{border-color:var(--ink)}
.fld input:focus,.fld select:focus{border-bottom-color:var(--accent)}
/* THE RECKONING.  Rules on real element boundaries, never painted behind,
   and nothing right-aligned: the amount column is gone and every value
   sits under its own label. */
.ledger{margin-top:1.4rem;border-top:2.5px solid var(--ink);padding-top:.15rem}
.ledger__row{
  display:grid;grid-template-columns:minmax(0,8.5rem) minmax(0,1fr);
  align-items:baseline;gap:.15rem .9rem;
  border-bottom:1px solid var(--rule-2);padding:.62rem 0;
  font-size:var(--step--1);color:var(--ink-3);
}
.ledger__row dt,.ledger__row dd{margin:0}
.ledger__row dd{font-variant-numeric:tabular-nums lining-nums;font-weight:600;color:var(--ink);text-align:start}
.ledger__row--sum{
  display:block;border-bottom:0;padding-top:1.1rem;font-size:var(--step-0);
}
.ledger__row--sum dt{font-weight:600;color:var(--ink-2);max-width:26em;font-size:var(--step--1)}
.ledger__row--sum dd{
  white-space:nowrap;font-size:var(--step-4);font-family:var(--display);
  letter-spacing:-.05em;font-weight:700;color:var(--accent);line-height:1;
  margin-top:.18em;
}
.ruleoff{                          /* ruled off twice under a total, by hand */
  height:9px;color:var(--ink);background:currentColor;margin-top:.5rem;max-width:11rem;
  --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");
  -webkit-mask:var(--m) no-repeat left center/100% 100%;
  mask:var(--m) no-repeat left center/100% 100%;
}
.dd--tally{display:flex;align-items:center;gap:.55rem .9rem;flex-wrap:wrap;justify-content:flex-start;white-space:normal}
.tally{display:flex;flex-wrap:wrap;gap:.55rem .8rem;align-items:center;min-height:1.9rem}
.tally svg{display:block;height:2.05rem;width:auto;overflow:visible}
.tally path{fill:none;stroke:var(--accent);stroke-width:2.8;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__rest{font-size:var(--step--1);color:var(--ink-3);margin:1.4rem 0 0;border-top:2.5px solid var(--ink);padding-top:1rem}
.slip__note{font-size:var(--step--2);color:var(--ink-3);line-height:1.55;margin-top:1rem;max-width:54ch}
.slip__warn{
  font-size:var(--step--1);color:var(--ink-2);margin-top:.9rem;
  border-inline-start:4px solid var(--accent);padding:.15rem 0 .15rem .8rem;max-width:52ch;
}
.slip .cta{margin-top:1.4rem}
.slip .cta .btn{flex:1 1 100%}

/* ------------------------------------------ 12. the storeys (index only) */
/* A section through the house, read downward: roof, first floor, ground.
   The left margin gives the height above the courtyard, in keel. */
.storeys{display:grid;gap:0;border-top:2.5px solid var(--ink)}
.storey{
  display:grid;gap:.9rem;padding-block:var(--riser-2);
  border-bottom:1px solid var(--rule-2);align-items:start;
}
.storey__n{
  font-family:var(--num);font-size:var(--step--1);font-weight:500;color:var(--ink-3);
  letter-spacing:0;text-transform:none;font-variant-numeric:lining-nums;
  line-height:1.3;max-width:9em;
}
.storey__n b{display:block;color:var(--accent);font-size:var(--step-3);font-family:var(--display);letter-spacing:-.05em;font-weight:700;line-height:.9;margin-bottom:.12em}
.storey h3{margin-bottom:.35em}
.storey p{font-size:var(--step--1);color:var(--ink-2);max-width:50ch}
.storey .fig{aspect-ratio:4/3;border-radius:0}
.storey .fig img{transition:transform .7s var(--e-expo)}
.storey:hover .fig img{transform:scale(1.04)}
@media (min-width:820px){
  .storey{grid-template-columns:8.5rem minmax(0,1fr) minmax(0,16rem);gap:var(--gut);align-items:start}
  /* each storey is one step further in, as the house is */
  .storey:nth-child(2){padding-inline-start:1.6rem}
  .storey:nth-child(3){padding-inline-start:3.2rem}
}

/* --------------------------------- 13. the stepped room list (index only) */
/* THE PRICE IS OUT OF THE RIGHT-HAND COLUMN.  It was a figure right-aligned
   against a wide left column, which is the tell the whole set shared; it is
   now a line of its own under the room's name, left, in keel. */
.flight{list-style:none;margin:0;padding:0;border-top:2.5px solid var(--ink)}
.flight li{border-bottom:1px solid var(--rule-2)}
.flight a{
  display:grid;gap:.5rem 1rem;text-decoration:none;color:inherit;
  padding-block:1.15rem;grid-template-columns:4.2rem minmax(0,1fr);align-items:start;
  transition:background .2s var(--e-quad),padding-inline-start .3s var(--e-expo);
}
.flight a:hover{background:var(--wash);padding-inline-start:.6rem}
.flight .fig{aspect-ratio:1/1;border-radius:0;width:4.2rem}
.flight .fig img{transition:transform .7s var(--e-expo)}
.flight a:hover .fig img{transform:scale(1.07)}
.flight h3{font-size:var(--step-1);margin:0}
.flight small{display:block;font-size:var(--step--2);letter-spacing:0;text-transform:none;color:var(--ink-3);margin-bottom:.15em;font-weight:500}
.flight p{font-size:var(--step--1);color:var(--ink-2);margin:.25em 0 0;max-width:46ch;display:none}
.flight .price{
  display:block;font-family:var(--display);font-size:var(--step-2);font-weight:700;
  letter-spacing:-.04em;white-space:nowrap;color:var(--accent);
  line-height:1;margin-top:.5rem;grid-column:2;
}
@media (min-width:700px){
  .flight p{display:block}
  .flight a{grid-template-columns:5.6rem minmax(0,1fr);padding-block:1.5rem}
  .flight .fig{width:5.6rem}
  .flight li:nth-child(2) a{padding-inline-start:1.4rem}
  .flight li:nth-child(3) a{padding-inline-start:2.8rem}
  .flight li:nth-child(2) a:hover{padding-inline-start:2rem}
  .flight li:nth-child(3) a:hover{padding-inline-start:3.4rem}
  .flight .price{margin-top:.65rem}
}

/* ------------------------------------------------------------ 14. bands */
/* NO TYPE OVER ANY PHOTOGRAPH.  The band used to be a frame with a dark
   gradient and a heading written across it — which is the silhouette this
   page shared with the hotel, and it is also what our gate cannot measure
   honestly.  The frame now ends at a cut edge and the sentence sits on a
   graphite shelf beneath it: the one dark object on the site. */
.band{position:relative;isolation:isolate;margin-block:var(--riser-3)}
.band .fig{aspect-ratio:4/3;border:0;border-top:2.5px solid var(--ink)}
.band .fig img{filter:saturate(.97) contrast(1.02)}
.band__over{
  position:static;z-index:3;padding-block:clamp(1.5rem,4vw,2.6rem);
  background:var(--night);color:var(--on-night);
}
.band__over h2{color:var(--on-night);max-width:24ch}
.band__over p{color:var(--on-night-2);margin-top:.7em;max-width:52ch;font-size:var(--step--1)}
@media (min-width:700px){.band .fig{aspect-ratio:2/1}}
/* one band on the site is nearly square, because its subject is at the foot
   of the frame and a letterbox would cut it off */
.band.band--tall .fig{aspect-ratio:1/1}
@media (min-width:700px){.band.band--tall .fig{aspect-ratio:4/3}}
@media (min-width:1000px){.band.band--tall .fig{aspect-ratio:5/4}}
@media (min-width:1000px){.band:not(.band--tall) .fig{aspect-ratio:21/9}}
/* on a wide screen the shelf carries the sentence in two unequal columns,
   so it reads as a caption cut into stone rather than as a hero strapline */
@media (min-width:900px){
  .band__over .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--gut) clamp(2rem,5vw,4rem);align-items:start}
  .band__over p{margin-top:.35em}
}

/* ------------------------------------------------ 15. the room ledger */
.rooms{border-top:2.5px solid var(--ink)}
.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:0;font-variant-numeric:lining-nums}
.room__fig{aspect-ratio:5/4;border-radius:0}
.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--1);letter-spacing:0;text-transform:none;color:var(--ink-3);margin:0 0 .2em;font-weight:500}
/* the rate, on its own line, left, at display size */
.room__price{
  display:block;
  margin-top:1.2rem;padding-top:.9rem;border-top:2.5px solid var(--ink);
  font-size:var(--step--1);color:var(--ink-3);
}
.room__price .num{
  display:block;font-size:var(--step-4);color:var(--accent);font-family:var(--display);
  font-weight:700;letter-spacing:-.05em;line-height:1;margin-bottom:.14em;
}
.spec{margin:1.2rem 0 0;display:grid;gap:0}
.spec > div{display:grid;grid-template-columns:6rem minmax(0,1fr);gap:.2rem 1rem;border-bottom:1px solid var(--rule-2);padding:.55rem 0;font-size:var(--step--1)}
.spec dt{color:var(--ink-3)}
.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:9.5rem}
  .room:nth-child(even){grid-template-areas:"no fig text"}
}

/* ------------------------------- 16. the rate board (rooms only) */
/* A board, not an invoice: the rate is set in the first column beside the
   room's name, at reading weight, and nothing is pushed to the right edge. */
.board{
  border:2.5px solid var(--ink);border-radius:0;background:var(--paper-2);
  padding:clamp(1rem,3vw,1.7rem);max-width:42rem;
}
.board caption{
  caption-side:top;text-align:start;font-size:var(--step--1);letter-spacing:0;
  text-transform:none;color:var(--ink-2);font-weight:600;padding-bottom:.8rem;
}
.board table{width:100%;border-collapse:collapse}
.board th,.board td{text-align:start;padding:.6rem 0;border-bottom:1px solid var(--rule-2);font-weight:400;font-size:var(--step--1)}
.board th{font-family:var(--display);font-size:var(--step-1);font-weight:700;letter-spacing:-.025em}
.board th small{display:block;font-family:var(--sans);font-size:var(--step--2);letter-spacing:0;text-transform:none;color:var(--ink-3);font-weight:500}
.board td:last-child{text-align:start;padding-inline-start:1.4rem;white-space:nowrap;font-family:var(--display);font-size:var(--step-1);font-weight:700;letter-spacing:-.035em;color:var(--accent)}
.board tr:last-child th,.board tr:last-child td{border-bottom:0}
.board__foot{font-size:var(--step--2);color:var(--ink-3);margin-top:1rem;line-height:1.55}

/* ------------------------------------------------- 17. the facts, once */
/* Used on exactly one page of this site: what the rate covers. */
.facts{margin:0;display:grid;gap:0;border-top:2.5px solid var(--ink)}
.facts > div{display:grid;gap:.15rem .5rem;padding:.95rem 0;border-bottom:1px solid var(--rule-2)}
.facts dt{font-size:var(--step--1);letter-spacing:0;text-transform:none;font-weight:600;color:var(--ink-2)}
.facts dd{margin:0;font-size:var(--step--1);color:var(--ink-3);max-width:58ch}
.facts dd em{font-style:normal;color:var(--ink);font-weight:600}
@media (min-width:680px){.facts > div{grid-template-columns:12rem minmax(0,1fr);align-items:baseline}}

/* -------------------------------- 18. the section line (island only) */
/* A cross-section of the island, from the water at the ferry ramp up over
   the ridge, with the five places pinned at the height they actually sit.
   Without JS it is a drawing above a list, and the list is the content.
   It is drawn the way the rest of the site is: stone, a cut edge, and a
   keel line for the one thing that moves. */
.xsec{position:relative;background:var(--paper-2);border:2.5px solid var(--ink);border-radius:0;padding:clamp(.9rem,2.6vw,1.6rem);overflow:hidden}
.xsec__scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.xsec svg{display:block;width:100%;min-width:680px;height:auto}
.xsec .ground{fill:var(--land);stroke:var(--ink);stroke-width:1.8;vector-effect:non-scaling-stroke}
.xsec .sea{fill:var(--sea);opacity:1}
.xsec .waterline{stroke:var(--ink-2);stroke-width:1;vector-effect:non-scaling-stroke;opacity:.6}
.xsec .grid,.xsec .tick{stroke:var(--rule-2);stroke-width:1;vector-effect:non-scaling-stroke}
.xsec .gridlab,.xsec .ticklab{fill:var(--ink-3);font-family:var(--num);font-size:10.5px;font-weight:600;letter-spacing:0}
.xsec .ticklab{font-size:10px;text-transform:none;letter-spacing:0;fill:var(--ink-2)}
.xsec .lead{fill:none;stroke:var(--rule-2);stroke-width:1;vector-effect:non-scaling-stroke}
.xsec g.on .lead{stroke:var(--accent)}
.xsec .pin{stroke:var(--rule-3);stroke-width:1.2;vector-effect:non-scaling-stroke}
.xsec .pin--house{stroke:var(--accent);stroke-width:2;vector-effect:non-scaling-stroke}
.xsec .dot{fill:var(--paper-2);stroke:var(--ink);stroke-width:2.4;vector-effect:non-scaling-stroke;transition:fill .22s var(--e-quad),stroke .22s var(--e-quad),r .22s var(--e-back)}
.xsec .lab{fill:var(--ink-2);font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:0;paint-order:stroke;stroke:var(--paper-2);stroke-width:3.5px;stroke-linejoin:round}
.xsec .house{fill:var(--accent)}
.xsec g.on .dot{fill:var(--accent);stroke:var(--accent);r:7}
.xsec g.on .lab{fill:var(--ink)}
.xsec .trace{fill:none;stroke:var(--accent);stroke-width:3;vector-effect:non-scaling-stroke;stroke-linecap:round}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .xsec .trace{stroke-dasharray:1400;stroke-dashoffset:1400;animation:trace linear forwards;animation-timeline:view();animation-range:entry 40% cover 65%}
    @keyframes trace{to{stroke-dashoffset:0}}
  }
}
.xsec__legend{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;font-size:var(--step--2);color:var(--ink-3);margin-top:.9rem;letter-spacing:0;text-transform:none;font-weight:500}
.places{list-style:none;margin:var(--riser-2) 0 0;padding:0;display:grid;gap:0;border-top:2.5px solid var(--ink)}
.places > li{border-bottom:1px solid var(--rule-2);padding-block:1.25rem}
.places__hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem .9rem}
.places h3{font-size:var(--step-1)}
.places__at{font-family:var(--num);font-size:var(--step--1);font-weight:600;letter-spacing:0;color:var(--accent);white-space:nowrap;font-variant-numeric:lining-nums}
.places p{font-size:var(--step--1);color:var(--ink-2);margin:.5em 0 0;max-width:56ch}
.places .why{margin-top:.6em;font-size:var(--step--1);color:var(--ink);border-inline-start:4px solid var(--accent);padding-inline-start:.8rem;max-width:44ch}
.places .fig{aspect-ratio:5/4;border-radius:0;margin-top:1rem}
.places .fig img{transition:transform .7s var(--e-expo)}
.places > li:hover .fig img{transform:scale(1.04)}
@media (min-width:820px){
  .places > li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,17rem);gap:var(--gut);align-items:start;padding-block:var(--riser-2)}
  .places .fig{margin-top:0}
}

/* ------------------------------------- 19. the timetable (island only) */
.times{width:100%;border-collapse:collapse;font-size:var(--step--1)}
.times caption{caption-side:top;text-align:start;font-size:var(--step--1);letter-spacing:0;text-transform:none;color:var(--ink-2);font-weight:600;padding-bottom:.8rem}
.times th,.times td{text-align:start;padding:.75rem .6rem .75rem 0;border-bottom:1px solid var(--rule-2);vertical-align:baseline}
.times thead th{font-family:var(--sans);font-size:var(--step--2);letter-spacing:0;text-transform:none;color:var(--ink-3);font-weight:600;border-bottom:2.5px solid var(--ink)}
.times tbody th{font-family:var(--display);font-size:var(--step-1);font-weight:700;letter-spacing:-.025em;padding-inline-end:1rem}
.times .dur{font-family:var(--num);font-variant-numeric:tabular-nums lining-nums;font-weight:700;color:var(--accent);white-space:nowrap}
.times td p{margin:0;color:var(--ink-2);max-width:44ch;font-size:var(--step--1)}
.times .note{display:block;margin-top:.45em;color:var(--ink);border-inline-start:4px solid var(--accent);padding-inline-start:.7rem}
@media (max-width:679px){
  .times thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .times tr{display:block;border-bottom:1px solid var(--rule-2);padding-block:1rem}
  .times th,.times td{display:block;border:0;padding:0}
  .times .dur{margin-block:.3em}
}

/* --------------------------- 20. the written descent (contact only) */
/* Six instructions, each one lower than the last, with the steps still to
   go in the margin.  The last one is nought, and it is the door. */
.descent{list-style:none;margin:0;padding:0;counter-reset:tread}
.descent > li{
  position:relative;border-top:1px solid var(--rule-2);
  padding:1.15rem 0 1.15rem 4.6rem;
}
.descent > li:first-child{border-top:2.5px solid var(--ink)}
.descent > li:last-child{border-bottom:2.5px solid var(--ink)}
.descent__n{
  position:absolute;left:0;top:1.05rem;width:3.6rem;text-align:end;
  font-family:var(--num);font-variant-numeric:tabular-nums lining-nums;font-weight:700;
  font-size:var(--step-1);letter-spacing:-.04em;color:var(--ink-3);line-height:1.1;
}
.descent__n small{display:block;font-size:.44em;letter-spacing:0;text-transform:none;font-weight:500}
.descent > li:last-child .descent__n{color:var(--accent)}
.descent h3{font-size:var(--step-1);margin-bottom:.3em}
.descent p{font-size:var(--step--1);color:var(--ink-2);max-width:52ch}
.descent .why{margin-top:.55em;font-size:var(--step--1);color:var(--ink);border-inline-start:4px solid var(--accent);padding-inline-start:.8rem}
@media (min-width:820px){
  .descent > li{padding-left:7rem}
  .descent__n{width:6rem;font-size:var(--step-3);top:.75rem}
  /* each instruction indents, as the lane does */
  .descent > li:nth-child(2){margin-inline-start:.9rem}
  .descent > li:nth-child(3){margin-inline-start:1.8rem}
  .descent > li:nth-child(4){margin-inline-start:2.7rem}
  .descent > li:nth-child(5){margin-inline-start:3.6rem}
  .descent > li:nth-child(6){margin-inline-start:4.5rem}
}

/* ------------------------------------- 21. the day strip (contact only) */
.day{border:2.5px solid var(--ink);border-radius:0;background:var(--paper-2);padding:clamp(.9rem,2.6vw,1.4rem)}
.day__bar{display:flex;height:2.6rem;border:2px solid var(--ink);border-radius:0;overflow:hidden}
/* Only the two segments are laid out; the [data-l] runs inside them stay
   bare spans with no display of their own, as the switch requires.
   The label is sized against the segment rather than the page, because
   "quelqu'un est là" and "κάποιος είναι εδώ" are wider than "somebody is
   here" and the seventeen-to-seven proportion is the point of the bar. */
.day__bar > span{display:flex;align-items:center;justify-content:center;font-size:clamp(.58rem,1.72vw,var(--step--2));font-weight:600;letter-spacing:0;text-transform:none;min-width:0;overflow:hidden;white-space:nowrap}
.day__awake{flex:17;background:var(--accent);color:var(--on-accent)}
.day__asleep{flex:7;background:var(--paper-3);color:var(--ink-2)}
.day__scale{display:flex;justify-content:space-between;font-family:var(--num);font-size:var(--step--2);color:var(--ink-3);font-weight:600;margin-top:.45rem;letter-spacing:0;font-variant-numeric:lining-nums}
.day p{font-size:var(--step--1);color:var(--ink-2);margin-top:1rem;max-width:52ch}

/* ---------------------------------------------- 22. the onward tread */
/* Every landing ends by stepping to the next one.  The tread number is the
   largest thing in the block and it is in keel. */
.onward{
  display:block;text-decoration:none;color:inherit;position:relative;
  background:var(--paper-3);border-top:2.5px solid var(--ink);
  padding-block:var(--riser-3) var(--riser-3);
  transition:background .25s var(--e-quad);
}
.onward::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:clamp(18px,3vw,34px);
  background:var(--paper);
  --m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M0 0H20V4H40V8H60V12H80V16H100V20H0Z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask:var(--m) no-repeat left bottom/100% 100%;
  mask:var(--m) no-repeat left bottom/100% 100%;
}
.onward:hover{background:var(--paper-2)}
.onward__in{display:grid;gap:.9rem 2rem;align-items:end}
.onward__k{font-size:var(--step--1);letter-spacing:0;text-transform:none;color:var(--ink-2);font-weight:600;display:block}
.onward__n{
  font-family:var(--display);font-size:var(--step-4);line-height:.82;letter-spacing:-.06em;
  font-weight:700;color:var(--accent);display:block;
}
.onward__n small{font-family:var(--sans);font-size:.24em;letter-spacing:0;text-transform:none;color:var(--ink-3);display:block;margin-top:.7em;font-weight:500}
.onward__t{font-family:var(--display);font-size:var(--step-3);letter-spacing:-.035em;line-height:1.02;display:block;color:var(--ink);font-weight:700}
.onward__p{font-size:var(--step--1);color:var(--ink-2);max-width:44ch;display:block;margin-top:.6em}
.onward__go{display:inline-flex;align-items:center;gap:.5em;margin-top:1.2rem;font-size:var(--step--1);font-weight:600;color:var(--accent)}
.onward__go svg{width:1.1em;height:1.1em;fill:currentColor;transition:transform .32s var(--e-expo)}
.onward:hover .onward__go svg{transform:translateY(4px)}
.onward--up .onward__go svg{transform:rotate(180deg)}
.onward--up:hover .onward__go svg{transform:rotate(180deg) translateY(4px)}
.onward__arw{display:none}
@media (min-width:820px){
  .onward__in{grid-template-columns:minmax(0,11rem) minmax(0,1fr) minmax(0,7rem);align-items:start}
  .onward__p{max-width:52ch}
  .onward__arw{
    display:block;justify-self:end;align-self:center;width:5.2rem;height:5.2rem;
    fill:none;stroke:var(--rule-3);stroke-width:1.8;
    transition:stroke .25s var(--e-quad),transform .4s var(--e-expo);
  }
  .onward:hover .onward__arw{stroke:var(--accent);transform:translateY(9px)}
  .onward--up .onward__arw{transform:rotate(180deg)}
  .onward--up:hover .onward__arw{transform:rotate(180deg) translateY(9px)}
}

/* ------------------------------------------------------- 23. reach strip */
.reach{background:var(--paper-3);border-top:2.5px solid var(--ink);padding-block:var(--riser-2)}
.reach__in{display:grid;gap:1.2rem;align-items:center}
.reach__no{font-family:var(--display);font-size:var(--step-2);letter-spacing:-.035em;font-weight:700;color:var(--ink)}
.reach__no a{color:inherit;text-decoration:none;border-bottom:2.5px solid var(--accent);transition:color .2s var(--e-quad)}
.reach__no a:hover{color:var(--accent)}
.reach__no small{display:block;font-family:var(--sans);font-size:var(--step--1);letter-spacing:0;text-transform:none;color:var(--ink-2);font-weight:600;margin-bottom:.35em}
.reach p{font-size:var(--step--1);color:var(--ink-2);max-width:46ch}
.reach .cta{margin-top:0}
@media (min-width:900px){
  .reach__in{grid-template-columns:minmax(0,1fr) minmax(0,24rem);gap:var(--riser-2)}
}

/* ------------------------------------ 23b. the four pledges (contact) */
.pledge{display:grid;gap:0;border-top:2.5px solid var(--ink)}
.pledge > div{padding-block:1.5rem;border-bottom:1px solid var(--rule-2)}
.pledge h3{font-size:var(--step-1);margin-bottom:.4em;max-width:20ch}
.pledge p{font-size:var(--step--1);color:var(--ink-2);max-width:50ch}
@media (min-width:760px){
  .pledge{grid-template-columns:1fr 1fr;column-gap:var(--riser-2)}
}

/* ---------------------------------------------------------- 24. the foot */
.foot{background:var(--paper);border-top:2.5px solid var(--ink);padding-block:var(--riser-2);font-size:var(--step--1);color:var(--ink-2)}
.foot h3{
  font-family:var(--sans);font-size:var(--step--1);font-weight:700;
  letter-spacing:0;text-transform:none;line-height:1.3;color:var(--ink);margin-bottom:.7em;
}
.foot p{max-width:34ch}
.foot .disc{max-width:none}
.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.1rem;border-top:1px solid var(--rule-2);
  font-size:var(--step--2);line-height:1.65;max-width:none;color:var(--ink-3);
}
.disc b{color:var(--ink);letter-spacing:0}

/* ------------------------------------------------------ 25. 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));
  /* opaque, on purpose: a translucent sticky bar makes our own gate
     composite its text against whatever section is scrolled underneath,
     and report a legible white label at 1.53:1 */
  background:var(--paper);
  border-top:2.5px solid var(--ink);
  transform:translateY(102%);transition:transform .42s var(--e-expo);
}
.stick[data-on="1"]{transform:none}
.stick > [data-l]{flex:1;min-width:0}
.stick > [data-l] > .btn{display:flex;width:100%;padding:.7em 1em}
@media (min-width:900px){.stick{display:none}}

/* ------------------------------------------- 26. load orchestration */
/* The 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)}}
  .gauge__n{animation:tick 1s var(--e-expo) backwards;animation-delay:120ms}
  @keyframes tick{from{opacity:0;transform:translateY(-.14em)}}
}
/* scroll is used for depth, never to reveal */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .band .fig img{animation:pan linear both;animation-timeline:view();animation-range:entry 12% cover 92%}
    @keyframes pan{from{transform:scale(1.08) 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;
  }
}

/* --------------------------------------------- 27. the descent between */
/* The masthead and the stair strip hold still.  The marker walks from one
   tread to the next.  The landing itself falls upward past the reader when
   you go down, and downward past them when you go back up. */
@view-transition{navigation:auto}
@media (prefers-reduced-motion: no-preference){
  ::view-transition-group(mark){animation-duration:.62s;animation-timing-function:cubic-bezier(.76,0,.24,1)}
  ::view-transition-group(masthead),::view-transition-group(stair){animation-duration:.36s}
  html[data-dir="down"]::view-transition-old(root){animation:fall-out .34s cubic-bezier(.25,.46,.45,.94) both}
  html[data-dir="down"]::view-transition-new(root){animation:fall-in .56s cubic-bezier(.16,1,.3,1) both}
  html[data-dir="up"]::view-transition-old(root){animation:climb-out .34s cubic-bezier(.25,.46,.45,.94) both}
  html[data-dir="up"]::view-transition-new(root){animation:climb-in .56s cubic-bezier(.16,1,.3,1) both}
  @keyframes fall-out{to{opacity:0;transform:translateY(-5vh)}}
  @keyframes fall-in{from{opacity:0;transform:translateY(7vh)}}
  @keyframes climb-out{to{opacity:0;transform:translateY(5vh)}}
  @keyframes climb-in{from{opacity:0;transform:translateY(-7vh)}}
}
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.14s}
}