@charset "utf-8";
/* =====================================================================
   ANTIKRY — one word: FACING.

   Antikry means "opposite", "across", "facing". The hotel faces the water
   from the top of a dead salt-works, and it faces the guest with the
   whole of the bill rather than a "from" price. Every photograph is
   square-on at the thing it names; every price is printed rather than
   approached.

   THE ARCHETYPE, AND WHERE IT IS ALLOWED TO SHOW ITS FURNITURE.
   The site is still one running account, opening at zero and totalled on
   the last leaf. That is the SPINE. But the LEDGER -- ruled rows, a
   leading number column, hairlines between entries, a right-aligned
   amount column -- now exists on ONE page, book.html, where an itemised
   total is exactly what a guest came to see. Everywhere else the account
   speaks as prose and a single quiet figure. A five-star hotel does not
   hand you a table of zeros; it does not charge, and says so once.

   FEW THINGS, LARGE, WITH AIR. The first screen is the place: one line
   of standing notice, then a photograph at size, then the name beneath
   it. No masthead stack, no status strip. Air is the material here, not
   what is left over: the vertical rhythm is set by --leaf, which is most
   of the composition.

   TYPE. An elegant serif for what is said (EB Garamond) and a clean sans
   for the machinery that says it (Inter). Everything is a step or two
   larger than it was, because small type reads as administrative whatever
   the typeface is.

   PALETTE. Five colours sampled from the photograph of the stair down to
   the water (photo-1735326853205): pale sky #93c6fe, dry scrub #6f6e50,
   deep olive #505032, sea #0b8cda, warm stone #cab393.

   CONTRAST. Every foreground token was computed against every one of the
   three surfaces it can be painted on. Worst pair in either scheme is
   --ink-3 on --paper-3 at 4.82:1 light and 6.13:1 dark. --rule is a
   border colour and never carries text. No text is painted over a
   photograph anywhere on this site, which is why that promise holds at
   every scroll position.

   NO FULL-WIDTH VIEWPORT UNITS. A band is full-bleed by being a direct
   child of <main> at width:100%, never by 100vw with a negative margin:
   100vw counts the scrollbar and puts a horizontal scroll on every wide
   render.
   ===================================================================== */

:root {
  color-scheme: light dark;

  --paper:  #F4F0E6;   /* the sheet */
  --paper-2:#EBE5D7;   /* a quiet block */
  --paper-3:#DFD8C6;   /* the standing notice, the account strip */
  --ink:    #20211A;   /* 11.42:1 on --paper-3, the worst surface */
  --ink-2:  #3E4033;   /*  7.44:1 */
  --ink-3:  #5A5C4A;   /*  4.82:1 -- the floor, and it is checked */
  --rule:   #B7AC93;   /* borders only, never text */
  --sea:    #0A5A80;   /*  5.30:1 -- links, actions */
  --zero:   #2F5D3E;   /*  5.36:1 -- an amount that is nothing */

  --shadow-1: 0 1px 0 rgba(32,33,26,.06), 0 1px 2px rgba(32,33,26,.05);
  --shadow-2: 0 1px 0 rgba(32,33,26,.07), 0 8px 18px -10px rgba(32,33,26,.35);
  --shadow-3: 0 2px 0 rgba(32,33,26,.07), 0 26px 50px -28px rgba(32,33,26,.5);

  --display: "EB Garamond", "Hoefler Text", "Iowan Old Style", Palatino, Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(.2,.72,.15,1);
  --gap: clamp(1.2rem, 4.5vw, 2.4rem);
  /* Air. This is the composition, so it is generous and it is one number. */
  --leaf: clamp(4.2rem, 10vw, 8.5rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:  #14150F;
    --paper-2:#1B1D15;
    --paper-3:#24261C;
    --ink:    #EFEADB;  /* 12.76:1 on --paper-3 */
    --ink-2:  #CFC9B6;  /*  9.26:1 */
    --ink-3:  #A9A48F;  /*  6.13:1 */
    --rule:   #3E4132;
    --sea:    #7CC6E8;  /*  8.11:1 */
    --zero:   #8FC79E;  /*  7.91:1 */
    --shadow-1: 0 1px 0 rgba(0,0,0,.4);
    --shadow-2: 0 1px 0 rgba(0,0,0,.45), 0 8px 18px -10px rgba(0,0,0,.8);
    --shadow-3: 0 2px 0 rgba(0,0,0,.5), 0 26px 50px -28px rgba(0,0,0,.9);
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  /* Larger than it was, at both ends. Small type reads as administrative. */
  font-size: clamp(1.06rem, .99rem + .34vw, 1.2rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

/* =====================================================================
   FOUR LANGUAGES, AND NO JAVASCRIPT ANYWHERE 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
   that rule uses no :has(), so it is what an old browser, a feed reader
   and a printer get. The four rules under it are the switch: four hidden
   radios live once in the document, and :has() reads whichever one the
   reader checked. No script is consulted, nothing is stored, 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: revert therefore always
   lands on inline, and a span that is a flex or grid item is blockified
   by its parent as usual. That invariant is the whole reason this needs
   no !important and no specificity games. */
[data-lang="en"] [data-l]:not([data-l="en"]),
[data-lang="el"] [data-l]:not([data-l="el"]),
[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 four 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-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; }

/* A class that sets `display` outranks the user-agent rule for [hidden],
   which is how a confirmation meant to appear after a click ends up
   printed on the page at load. Once, globally, so it cannot recur. */
[hidden] { display: none !important; }

::selection { background: var(--paper-3); color: var(--ink); }

a { color: var(--sea); text-underline-offset: .18em; text-decoration-thickness: from-font; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--sea); outline-offset: 3px; border-radius: 1px;
}

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

.wrap { width: min(100% - 2 * var(--gap), 76rem); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2 * var(--gap), 48rem); margin-inline: auto; }

/* =====================================================================
   THE ONLY THING ABOVE THE PHOTOGRAPH.  The standing notice this work
   sample is required to carry, and the language switch, on one line.
   Everything that used to sit here -- a masthead, an account strip -- is
   either further down or on book.html, where it belongs.
   ===================================================================== */
.top {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .5rem 1.2rem;
  padding: .38rem var(--gap);
  background: var(--paper-3);
  border-bottom: 1px solid var(--rule);
}
.fict {
  margin: 0; min-width: 0;
  font-family: var(--sans);
  font-size: .68rem; font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.fict b { font-weight: 600; }
.fict span::before { content: " · "; }
@media (max-width: 34rem) { .fict { font-size: .63rem; line-height: 1.45; letter-spacing: .06em; } }

/* ---------------------------------------------------- the language chip
   Four languages will not sit in a row of chips — a row of four chips IS
   a bar, and a third bar was cut from this hotel for exactly that fault.
   Instead it is a disclosure at the end of the strip the notice already
   lives in. Below 560px the panel opens IN FLOW: .top wraps and grows,
   the page moves down, and nothing on a 390px screen is ever covered. */
.lang { flex: none; position: relative; font-size: .68rem; }
.lang > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: .3rem;
  min-height: 30px; padding: .1rem .55rem;
  border: 1px solid var(--rule);
  background: var(--paper); color: var(--ink-2);
  font-family: var(--sans); font-weight: 600; font-size: .68rem;
  letter-spacing: .08em; line-height: 1;
}
.lang > summary::-webkit-details-marker { display: none; }
.lang > summary::marker { content: ""; }
.lang > summary svg { width: 13px; height: 13px; fill: currentColor; flex: none; }
.lang > summary i { font-style: normal; font-size: .85em; opacity: .8; }
.lang[open] > summary { background: var(--paper-2); border-color: var(--rule); }
.lang__menu { display: flex; flex-wrap: wrap; gap: .3rem; padding: .5rem 0 .1rem; }
.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: 30px;
  padding: .2rem .6rem .22rem;
  border: 1px solid var(--rule);
  background: var(--paper); color: var(--ink-2);
  font-family: var(--sans); font-size: .68rem; letter-spacing: .04em; line-height: 1.2;
}
.lang__r:checked + label { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.lang__r:focus-visible + label { outline: 2px solid var(--sea); outline-offset: 2px; }
@media (min-width: 35rem) {
  .lang[open] { flex: none; }
  .lang__menu {
    position: absolute; right: 0; top: calc(100% + .4rem); z-index: 60;
    flex-direction: column; flex-wrap: nowrap; gap: .2rem; padding: .4rem;
    min-width: 9.5rem;
    background: var(--paper); border: 1px solid var(--rule);
    box-shadow: var(--shadow-3);
  }
}

/* =====================================================================
   THE FIRST SCREEN.  A photograph at size, and the name under it.
   ===================================================================== */
.hero { margin: 0; }
.hero__f { overflow: hidden; background: var(--paper-2); border-bottom: 1px solid var(--rule); }
.hero img { width: 100%; height: 100%; object-fit: cover; }
.hero__f { height: clamp(17rem, 44vh, 24rem); }
@media (min-width: 62rem) { .hero__f { height: clamp(25rem, 60vh, 40rem); } }

.nameplate { padding-block: clamp(2rem, 5vw, 3.4rem) 0; }
.nameplate h1, .nameplate .name {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.5rem, 1.1rem + 6.2vw, 6rem);
  line-height: .98;
  letter-spacing: -.022em;
  text-wrap: balance;
}
/* The place, the season, and the one errand a guest might have here.
   A line of words, not a bar. */
.nameplate .under {
  margin: clamp(1rem, 2.6vw, 1.6rem) 0 0;
  display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; align-items: baseline;
  font-family: var(--sans); font-size: .78rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-3);
}
.nameplate .under a { color: var(--sea); text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 2px; }
.nameplate .under a:hover { border-bottom-color: currentColor; }

/* =====================================================================
   A LEAF.  One idea, the whole width, and a great deal of air.
   ===================================================================== */
.leaf { padding-block: var(--leaf); }
.leaf:first-of-type { padding-top: 0; }
.leaf--tight { padding-block: clamp(2.4rem, 6vw, 4.4rem); }

.mark {
  margin: 0 0 clamp(.9rem, 2.4vw, 1.4rem);
  font-family: var(--sans); font-size: .78rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3);
}
/* kept for the account page, where the steps of a form are numbered */
.folio-no {
  font-family: var(--sans); font-size: .74rem; font-weight: 500; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3); margin: 0;
}

h1.say, h2.say, .say {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2rem, 1.15rem + 3.6vw, 3.9rem);
  line-height: 1.04;
  letter-spacing: -.02em;
  text-wrap: balance;
  max-width: 22ch;
}
.said {
  margin: clamp(1.1rem, 2.6vw, 1.7rem) 0 0;
  color: var(--ink-2);
  max-width: 40ch;
  font-size: 1.06em;
}
.said--wide { max-width: 54ch; }

/* =====================================================================
   THE BAND.  A photograph at the size a guest would choose the thing in
   it: edge to edge, ending at a hard edge, with nothing written over it.
   A direct child of <main>, so full width costs no viewport unit.
   ===================================================================== */
.band { margin: 0; }
.band__f {
  overflow: hidden;
  background: var(--paper-2);
  border-block: 1px solid var(--rule);
}
.band img { width: 100%; height: 100%; object-fit: cover; }
/* Frames are requested from Unsplash near the aspect they are displayed
   at, so that `cover` trims rather than zooms. Asking for 16:9 and
   showing 3:1 is how a made bed becomes a close-up of a pillow. */
.band--tall  .band__f { height: clamp(15rem, 38vh, 21rem); }
.band--wide  .band__f { height: clamp(14rem, 34vh, 19rem); }
.band--short .band__f { height: clamp(10rem, 26vh, 16rem); }
@media (min-width: 62rem) {
  .band--tall  .band__f { height: clamp(22rem, 58vh, 38rem); }
  .band--wide  .band__f { height: clamp(21rem, 52vh, 35rem); }
  .band--short .band__f { height: clamp(13rem, 32vh, 22rem); }
}

/* A caption on paper under the frame. One line, and it is not a row. */
.band__cap {
  padding-block: clamp(.8rem, 2vw, 1.1rem);
  font-size: 1em; color: var(--ink-2);
  max-width: 56ch;
}
.band__cap b {
  font-family: var(--sans); font-size: .72rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3);
  display: block; margin-bottom: .3rem;
}

/* =====================================================================
   A TARIFF.  One photograph, and beneath its hard edge, on paper, the
   thing it shows -- named at size, described in a sentence, and priced
   on a line of its own at the left. NOT a row with a right-aligned
   amount: the same price in a table reads as a bill, and stated once in
   prose it reads as confidence.
   ===================================================================== */
.item { padding-block: 0; margin-top: var(--leaf); }
.item:first-of-type { margin-top: clamp(2.4rem, 6vw, 4.4rem); }

.tariff {
  display: grid;
  gap: clamp(.7rem, 1.8vw, 1.1rem);
  max-width: 54rem;
  padding-top: clamp(1.5rem, 3.6vw, 2.4rem);
}
.tariff h2, .tariff h3 {
  margin: 0;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2rem, 1.2rem + 3.2vw, 3.4rem);
  line-height: 1.02; letter-spacing: -.02em;
  text-wrap: balance;
}
.tariff p { margin: 0; color: var(--ink-2); max-width: 46ch; }
.tariff .rate {
  margin: clamp(.3rem, 1vw, .6rem) 0 0;
  font-family: var(--display);
  font-variant-numeric: lining-nums;
  font-size: clamp(1.5rem, 1rem + 2.2vw, 2.5rem);
  line-height: 1.16; letter-spacing: -.012em;
  color: var(--ink);
  max-width: 30ch;
}
.tariff .rate small {
  display: block;
  font-family: var(--sans); font-size: .72rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3);
  margin-top: .35rem;
}
.tariff .rate .nil { color: var(--zero); }

/* =====================================================================
   THE LINES THAT STAY AT ZERO.  The signature moment, and the reason
   this page exists. Four things a lesser hotel would have charged for,
   said as prose, at size, with air -- and one figure at the end of them.
   There is no column here, no rule, and no number in front of anything.
   ===================================================================== */
.vow { display: grid; gap: clamp(2.2rem, 5.5vw, 3.8rem); }
@media (min-width: 56rem) {
  .vow { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(3rem, 7vw, 6rem); }
}
.vow h3 {
  margin: 0;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.55rem, 1.05rem + 1.9vw, 2.35rem);
  line-height: 1.1; letter-spacing: -.014em;
  text-wrap: balance;
}
.vow p { margin: .55rem 0 0; color: var(--ink-2); max-width: 36ch; }

/* The zeros, surviving as a sentence. */
.tally-said {
  margin: clamp(2.6rem, 6vw, 4.6rem) 0 0;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.7rem, 1.05rem + 2.6vw, 3.1rem);
  line-height: 1.14; letter-spacing: -.016em;
  max-width: 26ch;
}
.tally-said .nil { color: var(--zero); font-variant-numeric: lining-nums; }

/* =====================================================================
   PLATES.  A smaller photograph, tipped in like a plate into a book: it
   ends at a hard edge and nothing is written on top of it.
   ===================================================================== */
.plates { display: grid; gap: clamp(1.6rem, 4vw, 2.8rem); margin-top: clamp(2rem, 5vw, 3.2rem); }
@media (min-width: 46rem) {
  .plates--2 { grid-template-columns: 1.35fr 1fr; align-items: end; }
  .plates--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
}
.plate { margin: 0; }
.plate__f { overflow: hidden; background: var(--paper-2); box-shadow: var(--shadow-2); }
.plate img { width: 100%; }
.plate figcaption { margin-top: .8rem; color: var(--ink-2); font-size: .98em; max-width: 40ch; }
.plate figcaption b {
  display: block; margin-bottom: .25rem;
  font-family: var(--sans); font-size: .72rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3);
}

/* =====================================================================
   THE FOLIO'S OWN CONTENTS.  This does the job a navigation bar would
   do, and it is at the foot of the page rather than over the hotel. It
   is a list of names at size -- not five ruled rows with a status
   column.
   ===================================================================== */
.leaves { display: grid; gap: clamp(1.8rem, 4.5vw, 3rem); }
@media (min-width: 56rem) {
  .leaves { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(3rem, 7vw, 5.5rem); }
}
.leaves a { display: grid; gap: .3rem; text-decoration: none; color: inherit; }
.leaves .no {
  font-family: var(--sans); font-size: .72rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
}
.leaves .entry {
  margin: 0;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.7rem, 1.15rem + 2.1vw, 2.7rem);
  line-height: 1.04; letter-spacing: -.016em;
}
.leaves .note { margin: .2rem 0 0; color: var(--ink-2); max-width: 34ch; }
.leaves a:hover .entry, .leaves a:focus-visible .entry { color: var(--sea); }
.leaves a[aria-current="page"] .entry { color: var(--ink-3); }

/* =====================================================================
   THE SENTENCE THIS SITE IS REQUIRED TO SAY.  Once, plainly, without
   apology, and at reading size rather than in a grey box of small print.
   ===================================================================== */
.stated { margin-top: clamp(1.8rem, 4vw, 2.8rem); max-width: 56ch; }
.stated::before {
  content: ""; display: block; width: 3.2rem; height: 3px;
  background: var(--ink); margin-bottom: clamp(1rem, 2.4vw, 1.5rem);
}
.stated p { margin: 0; color: var(--ink-2); }
.stated p + p { margin-top: .9rem; }
.stated b { color: var(--ink); font-weight: 600; }
.stated--plain::before { display: none; }

/* --------------------------------------------------------- the foot */
.foot { border-top: 1px solid var(--rule); padding-block: var(--leaf) 3rem; }
.foot__in { display: grid; gap: clamp(1.6rem, 4vw, 2.6rem); }
@media (min-width: 52rem) { .foot__in { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.foot h3 {
  margin: 0 0 .5rem;
  font-family: var(--sans); font-size: .72rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3);
}
.foot p { margin: 0; color: var(--ink-2); }
.foot a { color: var(--sea); }
.foot__fict {
  margin-top: clamp(2rem, 5vw, 3rem);
  padding-top: 1.3rem;
  border-top: 1px solid var(--rule);
  font-family: var(--sans); font-size: .78rem; line-height: 1.7;
  color: var(--ink-2);
  max-width: 74ch;
}

/* =====================================================================
   THE DATE PICKER.  A plain GET form pointed at the account. It computes
   nothing on its own and claims nothing: it carries two dates and a kind
   of room to leaf v, where they are totalled against the printed tariff.
   With JavaScript switched off it still submits, because it is a form.
   ===================================================================== */
.picker { max-width: 54rem; }
.picker__note { margin: 0 0 clamp(1.1rem, 2.6vw, 1.6rem); color: var(--ink-2); max-width: 44ch; }
.check { display: flex; flex-wrap: wrap; align-items: end; gap: 1rem 1.4rem; margin: 0; }
.picker .check .fld { flex: 1 1 9.5rem; }
.picker .check .fld--room { flex: 2 1 17rem; }
.check__go {
  appearance: none; cursor: pointer;
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink);
  font-family: var(--sans); font-size: .72rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  padding: .74rem 1.3rem;
  white-space: nowrap;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.check__go:hover { transform: translateY(-1px); box-shadow: var(--shadow-2); }

/* =====================================================================
   BOOK.HTML ONLY, EVERYTHING BELOW.

   The account strip, the ledger, and the form. An itemised total with a
   number column and a right-aligned amount is exactly what a guest came
   to this page for; it is invoice furniture anywhere else, so nothing
   below appears on any other leaf.
   ===================================================================== */

/* the account strip: pinned, and it carries the name, the dates and the
   running total. It paints an opaque background on the sticky element
   itself, so the gate's backdrop walk finds it immediately. */
.bal {
  position: sticky; top: 0; z-index: 20;
  background: var(--paper-3);
  border-bottom: 1px solid var(--rule);
  box-shadow: var(--shadow-1);
}
.bal__in {
  display: flex; align-items: center; gap: .6rem 1.4rem;
  justify-content: space-between; flex-wrap: nowrap;
  padding: .55rem 0;
  font-family: var(--sans);
  font-size: .72rem; font-weight: 500; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-2);
}
.bal__name {
  font-family: var(--display); font-size: 1.25rem; font-weight: 500;
  letter-spacing: -.01em; text-transform: none; color: var(--ink);
  text-decoration: none; white-space: nowrap; flex: 0 0 auto;
}
.bal__name:hover { color: var(--sea); }
.bal__what { min-width: 0; flex: 0 1 auto; }
@media (max-width: 61.99rem) { .bal__what { display: none; } }
.bal__sum { display: flex; align-items: baseline; gap: .55rem; white-space: nowrap; flex: 0 0 auto; }
.bal__sum b {
  font-family: var(--display);
  font-variant-numeric: lining-nums tabular-nums;
  font-size: 1.35rem; font-weight: 500; letter-spacing: -.01em;
  text-transform: none; color: var(--ink);
}
.bal__sum b[data-zero="1"] { color: var(--zero); }
.bal__rule { height: 2px; background: var(--rule); transform-origin: left center; }
.check--bar { display: none; }
.check--bar .fld input {
  font-size: .82rem; padding: .12rem .1rem;
  background: transparent;
  border-bottom-color: var(--ink-2);
  width: 8.4rem;
}
.check--bar .fld > span { color: var(--ink-2); font-size: .62rem; }
.check--bar .check__go { padding: .44rem .8rem; font-size: .66rem; }
@media (min-width: 66rem) { .check--bar { display: flex; gap: .6rem; } }

/* ------------------------------------------------------ the ledger */
.acct { border-top: 2px solid var(--ink); }
.acct__hd, .row {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) auto;
  grid-template-areas: "no entry amt" ". note amt";
  align-items: baseline;
  column-gap: .8rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 60rem) {
  .acct__hd, .row {
    grid-template-columns: 3.6rem minmax(0, 20rem) minmax(0, 1fr) 8.5rem;
    grid-template-areas: "no entry note amt";
    column-gap: 1.6rem;
    padding: .95rem 0;
  }
}
.acct__hd {
  background: var(--paper-2);
  font-family: var(--sans);
  font-size: .68rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-2);
}
.acct__hd > .no, .row > .no  { grid-area: no; }
.acct__hd > .entry, .row > .entry { grid-area: entry; }
.acct__hd > .note, .row > .note  { grid-area: note; }
.acct__hd > .amt, .row > .amt   { grid-area: amt; }
.acct__hd > .amt { font-size: inherit; letter-spacing: inherit; }
@media (max-width: 59.99rem) { .acct__hd > .note { display: none; } }

.no {
  font-family: var(--sans); font-size: .72rem; font-weight: 500; letter-spacing: .04em;
  color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.entry {
  margin: 0;
  font-family: var(--display);
  font-size: 1.2em; line-height: 1.24; letter-spacing: -.006em;
}
.entry b { font-weight: 500; }
.note { margin: .28rem 0 0; color: var(--ink-2); font-size: .9em; line-height: 1.55; max-width: 44ch; }
@media (min-width: 60rem) { .note { margin-top: .1rem; max-width: 62ch; } }

.amt {
  justify-self: end; text-align: right; white-space: nowrap;
  font-family: var(--sans);
  font-variant-numeric: lining-nums tabular-nums;
  font-size: 1rem; font-weight: 600;
  letter-spacing: -.005em;
  color: var(--ink);
}
.amt--zero { color: var(--zero); }
.amt--none { color: var(--ink-3); font-weight: 500; }
.amt small { display: block; font-size: .66rem; letter-spacing: .07em; text-transform: uppercase; font-weight: 500; color: var(--ink-3); }

.acct__off { border-bottom: 3px double var(--ink); }
.row--sum { border-bottom: 0; padding-top: 1.1rem; }
.row--sum .entry { font-size: 1.3em; font-weight: 500; }
.row--sum .amt { font-size: 1.6rem; }

/* =====================================================================
   CONTROLS.  Putting a line on the account, and the account being
   totalled. The `put` button appears beside a tariff on the leaves that
   list things; the form is on book.html.
   ===================================================================== */
.put {
  appearance: none; cursor: pointer;
  justify-self: start;
  margin-top: .3rem;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--sea);
  font-family: var(--sans); font-size: .7rem; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase;
  padding: .5rem .85rem;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.put:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.puts { display: flex; flex-wrap: wrap; gap: .8rem 1rem; align-items: start; margin-top: .3rem; }
.putbox { display: inline-grid; justify-items: start; gap: .1rem; }
.putbox .put { margin-top: 0; }
.done {
  display: block; margin-top: .5rem;
  font-family: var(--sans); font-size: .7rem; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--zero);
}

/* The steps of the form. The label above a step needs room of its own,
   or it collides with the first field's own label. */
.form, .plans { margin-top: .8rem; }
.form { display: grid; gap: 1.3rem 1.6rem; }
/* auto-fit rather than a viewport breakpoint: this form lives in a 22rem
   column at a desk and the full width on a phone, so the number of
   columns has to follow the column, not the window. */
.form--2 { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.fld { display: grid; gap: .3rem; min-width: 0; }
.fld > span {
  font-family: var(--sans); font-size: .68rem; font-weight: 600; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-3);
}
.fld input, .fld select {
  font: inherit; font-family: var(--sans); font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 0; border-bottom: 1px solid var(--ink);
  border-radius: 0;
  padding: .4rem .1rem;
  width: 100%; min-width: 0;
  font-variant-numeric: lining-nums tabular-nums;
}
.fld select { appearance: none; background-image: none; padding-right: 1.2rem; }
.fld--sel { position: relative; }
.fld--sel::after {
  content: ""; position: absolute; right: .25rem; bottom: 1rem;
  width: .42rem; height: .42rem;
  border-right: 1px solid var(--ink-2); border-bottom: 1px solid var(--ink-2);
  transform: rotate(45deg); pointer-events: none;
}
.plans { display: grid; gap: .8rem; margin: 0; padding: 0; border: 0; }
.plans legend {
  padding: 0; margin-bottom: .5rem;
  font-family: var(--sans); font-size: .68rem; font-weight: 600; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-3);
}
.plan { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .1rem .6rem; align-items: start; cursor: pointer; }
.plan input { margin: .5rem 0 0; accent-color: var(--sea); }
.plan b { font-weight: 600; }
.plan i { grid-column: 2; font-style: normal; color: var(--ink-2); font-size: .93em; }

.warn {
  margin: 1.3rem 0 0; padding: .9rem 1.1rem;
  background: var(--paper-2); border-left: 3px solid var(--sea);
  color: var(--ink-2); font-size: .95em;
}

.acts { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; margin-top: 1.6rem; }
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .78rem 1.2rem;
  background: var(--ink); color: var(--paper);
  text-decoration: none; border: 1px solid var(--ink); cursor: pointer;
  font-family: var(--sans); font-size: .72rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  box-shadow: var(--shadow-2);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-3); }
.btn--quiet { background: transparent; color: var(--sea); border-color: var(--rule); box-shadow: none; }
.btn--quiet:hover { border-color: var(--sea); }

/* two columns at width: the form on the left, the account on the right */
.tally { display: grid; gap: clamp(2.2rem, 5vw, 3.4rem); }
@media (min-width: 64rem) {
  .tally { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); align-items: start; }
  .tally__acct { position: sticky; top: 5rem; }
}
.fld--wide { grid-column: 1 / -1; }

/* ------------------------------------------------------- the motion
   One authored load sequence, then scroll for depth. No library: there
   is no second job on these pages for one to do. The un-enhanced state
   is the finished state everywhere. */
@keyframes rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes drift { from { transform: translateY(-2.4%) scale(1.06); } to { transform: translateY(2.4%) scale(1.06); } }

@media (prefers-reduced-motion: no-preference) {
  .seq > * { animation: rise .68s var(--ease) both; animation-delay: calc(var(--i, 0) * 80ms + 60ms); }
  .acct > .row { animation: rise .5s var(--ease) both; animation-delay: calc(var(--i, 0) * 55ms + 240ms); }
  .bal__rule { animation: draw .8s var(--ease) both; animation-delay: .1s; }
}

/* Scroll, used for depth and never to reveal text. Firefox has no
   scroll-driven animations in stable yet, so this sits behind @supports
   and everything reads finished without it. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .bal__rule { animation: draw linear both; animation-timeline: scroll(root block); }
    .band img, .plate img { animation: drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    .hero img { animation: none; }
  }
}

/* --------------------------------------------- leading for accented capitals
   Every display heading on this site is set with a line-height tuned for
   English and Greek capitals, which have nothing above cap height. French
   capitals do: a circumflex or an acute on a Garamond capital at 3-6rem
   pushes straight through whatever sits on the line above it, at 390 and
   at 1280. The fix is leading, and it belongs to the two languages that
   need it rather than to the type: the [data-l] runs are inline, so a
   line-height set on the run raises only the line boxes it lands in, and
   the English and Greek settings are untouched to the pixel. */
.nameplate h1 [data-l="fr"], .nameplate h1 [data-l="it"],
.say [data-l="fr"], .say [data-l="it"],
.tariff h2 [data-l="fr"], .tariff h2 [data-l="it"],
.tariff h3 [data-l="fr"], .tariff h3 [data-l="it"],
.vow h3 [data-l="fr"], .vow h3 [data-l="it"],
.tally-said [data-l="fr"], .tally-said [data-l="it"],
.leaves .entry [data-l="fr"], .leaves .entry [data-l="it"],
.entry [data-l="fr"], .entry [data-l="it"],
.row--sum .entry [data-l="fr"], .row--sum .entry [data-l="it"] { line-height: 1.1; }