/* Oktavia — the floor mosaic.
   Four stones only: nero, giallo antico (ochre), marmo; verde antico is booking's alone.
   Everything spaces on the tessera module (14px). */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/fonts/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --nero: #1B1A18;
  --nero-grout: #11100F;
  --ochre: #D9A53A;
  --ochre-deep: #4A3712;      /* secondary text on ochre: tinted from the stone */
  --marmo: #F4F3EF;
  --marmo-shade: #4F4C47;     /* secondary text on marmo */
  --nero-soft: #B9B7B0;       /* secondary text on nero */
  --verde: #2A7260;           /* booking only */
  --verde-press: #215C4D;

  --m: 14px;                  /* one tessera */
  --gutter: clamp(16px, 4vw, 56px);
  --wrap: 1328px;
  --band-pad: clamp(84px, 10vw, 154px);
  --octo: 56px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --font: 'Archivo', system-ui, sans-serif;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent; /* every control has its own :active instead */
  scroll-padding-top: calc(var(--m) * 4);
  scrollbar-color: var(--ochre) var(--nero);
  background: var(--nero);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-stretch: 100%;
  color: var(--marmo);
  background: var(--nero);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}

img { display: block; max-width: 100%; height: auto; }
button, input, select { font: inherit; color: inherit; }

/* On touch: controls fire on tap without the double-tap-zoom wait, and a long press
   doesn't select a button's label or pop the link callout. Text stays selectable;
   only controls are exempt. Hover styles below sit behind (hover: hover) and
   (pointer: fine), so a tap never leaves one stuck; :active gives touch its feedback. */
a, button, label, input, select { touch-action: manipulation; }
button, .btn-book, .dock-book, .langs a, .footer__langs a, .octo__list a {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
.mosaic__open img { -webkit-touch-callout: none; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

::selection { background: var(--ochre); color: var(--nero); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: fixed; left: var(--m); top: var(--m); z-index: 50;
  padding: var(--m) calc(var(--m) * 1.5);
  background: var(--marmo); color: var(--nero); font-weight: 700;
  transform: translateY(-200%);
}
.skip:focus-visible { transform: none; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:active { text-decoration-thickness: 2px; }
@media (hover: hover) and (pointer: fine) {
  a:hover { text-decoration-thickness: 2px; }
}

:focus-visible { outline: 2px solid var(--focus, var(--ochre)); outline-offset: 3px; }

/* ---------------------------------------------------------------- bands */

/* The page runs under the notch (viewport-fit=cover); in landscape the content
   keeps clear of it, evenly on both sides so the column stays centred. */
.wrap {
  --inset-x: max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  width: min(100% - max(var(--gutter), var(--inset-x)) * 2, var(--wrap));
  margin-inline: auto;
}

.band { position: relative; padding-block: var(--band-pad); }
.band--nero {
  --focus: var(--ochre);
  color: var(--marmo);
  background: var(--nero) url(/img/tess/floor-nero.svg) 0 0 / 168px;
}
.band--marmo {
  --focus: var(--nero);
  color: var(--nero);
  background: var(--marmo) url(/img/tess/floor-marmo.svg) 0 0 / 168px;
}
.band--ochre {
  --focus: var(--nero);
  color: var(--nero);
  background: var(--ochre) url(/img/tess/floor-ochre.svg) 0 0 / 168px;
}
.band--follow { padding-top: 0; }

/* The borders between bands are laid like a mosaic's frame. */
.border { height: calc(var(--m) * 3); background-repeat: repeat-x; background-size: auto 100%; }
.border--nero-marmo { background-image: url(/img/tess/border-nero-marmo.svg); }
.border--marmo-nero { background-image: url(/img/tess/border-marmo-nero.svg); }
.border--marmo-ochre { height: calc(var(--m) * 4); background-image: url(/img/tess/border-marmo-ochre.svg); }
.border--ochre-marmo { height: calc(var(--m) * 4); background-image: url(/img/tess/border-ochre-marmo.svg); }

/* On wide screens the left gutter holds the octagon index, and one grout line
   threads the page from it down to the booking panel. */
@media (min-width: 1100px) {
  :root { --gutter: clamp(98px, 8vw, 126px); }
  main > .band::before {
    content: '';
    position: absolute; top: 0; bottom: 0;
    /* Halfway between the screen edge and the content column, however wide the screen. */
    left: calc(max(var(--gutter), (100% - var(--wrap)) / 2) - var(--gutter) / 2 - var(--m) / 2);
    width: var(--m);
    background: url(/img/tess/thread.svg) 0 0 / var(--m) var(--m) repeat-y;
    opacity: 0.85;
    pointer-events: none;
  }
  main > .band--ochre::before { filter: brightness(0.12); opacity: 0.7; }
  main > .book::before { bottom: auto; height: calc(var(--band-pad) + var(--m) * 6); }
  main > .hero::before { top: calc(var(--m) * 1.5 + var(--octo) + 6px); }
}

/* ---------------------------------------------------------------- type */

h2 {
  font-size: clamp(2.125rem, 1.35rem + 2.9vw, 3.75rem);
  font-weight: 760;
  font-stretch: 116%;
  line-height: 1.02;
  letter-spacing: -0.018em;
  text-wrap: balance;
  max-width: 17ch;
}
h3 {
  font-size: 0.8125rem;
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.lede { display: grid; gap: calc(var(--m) * 2); max-width: 62ch; }
.lede p, .bay__text p, .street__text p, .book__text p { max-width: 60ch; }

.fine { font-size: 0.875rem; }

/* ---------------------------------------------------------------- corners: language, octagon, dock */

.langs {
  position: absolute; z-index: 20;
  top: var(--m); right: max(var(--gutter), env(safe-area-inset-right, 0px), (100% - var(--wrap)) / 2);
}
.langs ul, .footer__langs { display: flex; gap: 2px; }
.langs a, .footer__langs a {
  display: grid; place-items: center;
  min-width: 44px; height: 44px;
  font-size: 0.8125rem; font-weight: 700; font-stretch: 112%; letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--nero-soft);
}
.langs a:active, .footer__langs a:active { color: var(--marmo); }
@media (hover: hover) and (pointer: fine) {
  .langs a:hover, .footer__langs a:hover { color: var(--marmo); }
}
.langs a[aria-current], .footer__langs a[aria-current] { color: var(--nero); background: var(--ochre); }

.octo {
  position: fixed; z-index: 30;
  left: calc(max(var(--gutter), (100% - var(--wrap)) / 2) - var(--gutter) / 2 - var(--octo) / 2);
  top: calc(var(--m) * 1.5);
}
.octo__button {
  display: block; width: var(--octo); height: var(--octo); padding: 0;
  border: 0; background: none; cursor: pointer;
}
.octo__mark { width: 100%; height: 100%; overflow: visible; transition: transform 120ms var(--ease-out); }
.octo__button:active .octo__mark { transform: scale(0.94); }
.octo__plate { fill: var(--nero); stroke: var(--nero-grout); stroke-width: 1; }
.octo__side {
  fill: none; stroke: rgba(244, 243, 239, 0.26); stroke-width: 5; stroke-linecap: butt;
  stroke-dasharray: 3.6 1.2; stroke-dashoffset: -0.6;
  transition: stroke 400ms var(--ease-out);
}
.octo__side.is-done { stroke: var(--ochre); }
.octo__side.is-current { stroke: var(--marmo); }
.octo__core { fill: var(--ochre); transition: transform 600ms var(--ease-out); transform-origin: 24px 24px; }
.octo__button[aria-expanded='true'] .octo__core { transform: rotate(53deg); }
@media (hover: hover) and (pointer: fine) {
  .octo__button:hover .octo__side:not(.is-done):not(.is-current) { stroke: rgba(244, 243, 239, 0.4); }
}

.octo__list {
  position: absolute; left: 0; top: calc(100% + var(--m) / 2);
  min-width: 15rem;
  padding: calc(var(--m) / 2) 0;
  background: var(--nero);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.55);
  counter-reset: octo;
}
.octo__list a {
  display: flex; align-items: baseline; gap: var(--m);
  padding: 10px calc(var(--m) * 1.5);
  color: var(--marmo); text-decoration: none;
  font-weight: 600; font-stretch: 108%;
}
.octo__list a::before {
  counter-increment: octo; content: counter(octo);
  min-width: 1ch; font-variant-numeric: tabular-nums;
  font-size: 0.8125rem; color: var(--nero-soft);
}
.octo__list a:active { background: rgba(244, 243, 239, 0.06); }
@media (hover: hover) and (pointer: fine) {
  .octo__list a:hover { background: rgba(244, 243, 239, 0.06); }
}
.octo__list a[aria-current='true'] { color: var(--ochre); }
.octo__list a[aria-current='true']::before { color: var(--ochre); }

.dock-book { display: none; }

/* ---------------------------------------------------------------- buttons and forms */

.btn-book {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: calc(var(--m) * 4);
  padding: 0 calc(var(--m) * 2);
  border: 2px solid var(--verde); border-radius: 2px;
  background: var(--verde); color: var(--marmo);
  font-weight: 700; font-stretch: 110%; letter-spacing: 0.01em;
  text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: background-color 200ms var(--ease-out), transform 120ms var(--ease-out);
}
.btn-book:active { background: var(--verde-press); border-color: var(--verde-press); transform: translateY(1px); transition-duration: 100ms; }
@media (hover: hover) and (pointer: fine) {
  .btn-book:hover { background: var(--verde-press); border-color: var(--verde-press); }
}

.dates__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--m) / 2 + 2px);
}
.dates__field { display: grid; gap: 6px; min-width: 0; }
.dates label {
  font-size: 0.75rem; font-weight: 700; font-stretch: 112%;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--nero-soft);
}
.dates input, .dates select {
  width: 100%; min-width: 0;
  height: calc(var(--m) * 4);
  padding: 0 12px;
  border: 1px solid rgba(244, 243, 239, 0.32); border-radius: 2px;
  background: rgba(17, 16, 15, 0.72);
  color: var(--marmo);
  color-scheme: dark;
  font-variant-numeric: tabular-nums;
  appearance: none; -webkit-appearance: none;
}
.dates input::-webkit-date-and-time-value { text-align: left; }
@media (hover: hover) and (pointer: fine) {
  .dates input:hover, .dates select:hover { border-color: rgba(244, 243, 239, 0.6); }
}
.dates input:focus-visible, .dates select:focus-visible { outline-offset: 0; border-color: var(--ochre); }
.dates input[aria-invalid='true'] { border: 2px solid var(--ochre); }
.dates select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23D9A53A' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--m) center; background-size: 12px 8px;
  padding-right: calc(var(--m) * 3);
}
.dates select option { background: var(--nero); color: var(--marmo); }
.dates .btn-book { grid-column: 1 / -1; width: 100%; }
.dates__note { margin-top: var(--m); font-size: 0.875rem; color: var(--nero-soft); }
.dates__error {
  margin-top: var(--m);
  padding: 10px var(--m);
  background: var(--ochre); color: var(--nero);
  font-weight: 600; font-size: 0.9375rem;
}
.dates__error[hidden] { display: none; }

/* ---------------------------------------------------------------- photo frames: photos bedded in grout */

.frame {
  position: relative;
  background: var(--nero-grout);
  padding: 6px;
  overflow: hidden;
}
.frame img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------- 1 hero */

.hero { padding-top: calc(var(--m) * 6); padding-bottom: calc(var(--m) * 6); }
.wordmark { margin-bottom: calc(var(--m) * 3); }
.wordmark svg { display: block; width: 100%; height: auto; }
.wordmark__phone { display: none !important; }
@media (max-width: 899px) {
  .wordmark__wide { display: none !important; }
  .wordmark__phone { display: block !important; }
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: 'text' 'photo' 'intro' 'form';
  gap: calc(var(--m) * 2);
}
.hero__text { grid-area: text; display: grid; gap: var(--m); }
.hero__photo { grid-area: photo; }
.dates--hero { grid-area: form; }

.tagline {
  font-size: clamp(1.5rem, 1.05rem + 1.9vw, 2.75rem);
  font-weight: 640;
  font-stretch: 112%;
  line-height: 1.08;
  letter-spacing: -0.012em;
  text-wrap: balance;
  max-width: 20ch;
}
.address { color: var(--nero-soft); }
.intro { grid-area: intro; max-width: 52ch; color: var(--nero-soft); }
.facts { display: flex; flex-wrap: wrap; gap: 6px calc(var(--m) * 1.5); margin-top: calc(var(--m) / 2); }
.facts li {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; font-stretch: 106%;
}
.facts li::before {
  content: ''; width: 8px; height: 8px; flex: none;
  background: var(--ochre);
  transform: rotate(var(--r, 6deg));
}
.facts li:nth-child(2)::before { --r: -4deg; }
.facts li:nth-child(3)::before { --r: 9deg; }
.facts li:nth-child(4)::before { --r: -7deg; }

.frame--hero { aspect-ratio: 4 / 5; }
.frame--hero canvas {
  position: absolute; inset: 6px;
  width: calc(100% - 12px); height: calc(100% - 12px);
  pointer-events: none;
}
/* While the tiles are laid the photo waits underneath. If the script never
   runs, the photo shows anyway after a moment. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .frame--hero.is-resolving img { opacity: 0; animation: hero-failsafe 1ms linear 3.2s forwards; }
}
@keyframes hero-failsafe { to { opacity: 1; } }
.hero__photo figcaption { margin-top: 10px; font-size: 0.875rem; color: var(--nero-soft); }

@media (min-width: 900px) {
  .hero { padding-top: calc(var(--m) * 6); }
  .hero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas: 'text photo' 'intro photo' 'form photo';
    grid-template-rows: auto auto 1fr;
    column-gap: calc(var(--m) * 4);
    row-gap: calc(var(--m) * 3);
  }
  .frame--hero { aspect-ratio: auto; height: clamp(400px, calc(100svh - 350px), 640px); }
  .dates--hero { align-self: end; }
}
@media (min-width: 1560px) {
  .dates--hero .dates__row { grid-template-columns: 1fr 1fr auto; align-items: end; }
  .dates--hero .btn-book { grid-column: auto; width: auto; }
}

/* ---------------------------------------------------------------- 2 the apartment: the mosaic of photos */

.mosaic {
  margin-top: calc(var(--m) * 4);
  display: grid;
  gap: 6px;
  padding: 6px;
  background: var(--nero-grout);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: clamp(140px, 42vw, 220px);
  grid-template-areas:
    'living living'
    'living living'
    'kitchen kitchen-door'
    'lounge lounge'
    'lounge lounge'
    'bathroom shower'
    'bathroom shower';
}
.mosaic__cell { min-width: 0; min-height: 0; }
.mosaic__cell--living { grid-area: living; }
.mosaic__cell--kitchen { grid-area: kitchen; }
.mosaic__cell--lounge { grid-area: lounge; }
.mosaic__cell--kitchen-door { grid-area: kitchen-door; }
.mosaic__cell--bathroom { grid-area: bathroom; }
.mosaic__cell--shower { grid-area: shower; }
.mosaic__open {
  display: block; width: 100%; height: 100%;
  padding: 0; border: 0; background: var(--nero);
  cursor: zoom-in; overflow: hidden;
}
.mosaic__open img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 700ms var(--ease-out), filter 700ms var(--ease-out);
}
.mosaic__open:active img { filter: brightness(0.88); transition-duration: 120ms; }
@media (hover: hover) and (pointer: fine) {
  .mosaic__open:hover img { transform: scale(1.025); }
}
.mosaic__open:focus-visible { outline-offset: -4px; outline-color: var(--ochre); }

@media (min-width: 900px) {
  .mosaic {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: clamp(150px, 15vw, 230px);
    grid-template-areas:
      'living living living living living living living living kitchen kitchen kitchen kitchen'
      'living living living living living living living living kitchen-door kitchen-door kitchen-door kitchen-door'
      'lounge lounge lounge lounge lounge lounge bathroom bathroom bathroom shower shower shower'
      'lounge lounge lounge lounge lounge lounge bathroom bathroom bathroom shower shower shower';
  }
}

/* ---------------------------------------------------------------- 3 the bay window */

.bay__grid {
  display: grid;
  gap: calc(var(--m) * 2);
}
.bay__text { display: grid; gap: calc(var(--m) * 2); align-content: start; }
.bay__photo { aspect-ratio: 3 / 2; }
/* Wide: the table large on the right, the view set lower on the left, under
   the text, so the two photos step down like the old pair did. */
@media (min-width: 900px) {
  .bay__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: 'text dining' 'view dining';
    column-gap: calc(var(--m) * 2); align-items: start;
  }
  .bay__text { grid-area: text; padding-top: calc(var(--m) * 2); }
  .bay__photo--dining { grid-area: dining; }
  .bay__photo--view { grid-area: view; margin-top: calc(var(--m) * 2); }
}

/* ---------------------------------------------------------------- 4 what's inside */

.spec {
  margin-top: calc(var(--m) * 4);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: calc(var(--m) * 3) calc(var(--m) * 3);
}
.spec__group { display: grid; gap: var(--m); align-content: start; }
.spec__group h3 { color: var(--marmo-shade); }
.spec ul { display: grid; }
.spec li {
  display: flex; align-items: baseline; gap: var(--m);
  padding: 9px 0;
  background: url(/img/tess/rule-nero.svg) left bottom / auto 5px repeat-x;
  font-weight: 500;
}
.spec li::before {
  content: ''; flex: none; width: 7px; height: 7px;
  background: var(--ochre); outline: 1px solid rgba(27, 26, 24, 0.35);
  transform: translateY(-2px) rotate(var(--r, 5deg));
}
.spec li:nth-child(3n + 2)::before { --r: -6deg; }
.spec li:nth-child(3n)::before { --r: 11deg; }

/* ---------------------------------------------------------------- 5 the street (ochre) */

.street p { color: var(--nero); }
.street__grid { display: grid; gap: calc(var(--m) * 5); }
.street__text { display: grid; gap: calc(var(--m) * 1.5); align-content: start; }
.street__text h2 { margin-bottom: calc(var(--m) / 2); }
.street__text h3 { margin-top: calc(var(--m) * 2); color: var(--ochre-deep); }
.nearby { display: grid; }
.nearby div {
  display: flex; justify-content: space-between; gap: var(--m);
  padding: 9px 0;
  background: url(/img/tess/rule-nero-strong.svg) left bottom / auto 5px repeat-x;
}
.nearby dd { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.street .fine { color: var(--ochre-deep); }

.street__visual { position: relative; padding-bottom: calc(var(--m) * 4); }
.street__facade { aspect-ratio: 4 / 5; width: 82%; margin-left: auto; }
.street__octagon {
  position: absolute; left: -2%; bottom: 0;
  width: 44%; height: auto;
  transform: rotate(-9deg);
  filter: drop-shadow(0 14px 22px rgba(27, 26, 24, 0.35));
}
@media (min-width: 900px) {
  .street__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: calc(var(--m) * 5); align-items: center; }
  .street__octagon { left: 0; width: 46%; }
}

/* ---------------------------------------------------------------- 6 getting here, 7 good to know */

.getting__grid { display: grid; gap: calc(var(--m) * 4); }
.getting__text { display: grid; gap: calc(var(--m) * 2.5); align-content: start; }
.ways { display: grid; gap: calc(var(--m) * 1.5); }
.ways dt { font-weight: 700; font-stretch: 110%; }
.ways dd { color: var(--marmo-shade); max-width: 46ch; }
.links { display: flex; flex-wrap: wrap; gap: var(--m) calc(var(--m) * 2); font-weight: 600; }
.map { aspect-ratio: 4 / 3; }
.map iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (min-width: 900px) {
  .getting__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: calc(var(--m) * 5); }
  .map { aspect-ratio: auto; min-height: 420px; }
}

.rules__grid { display: grid; gap: calc(var(--m) * 3); padding-top: calc(var(--m) * 6); }
.rules { display: grid; }
.rules div {
  display: grid; gap: 2px calc(var(--m) * 2);
  padding: var(--m) 0;
  background: url(/img/tess/rule-nero.svg) left bottom / auto 5px repeat-x;
}
.rules dt { font-weight: 700; font-stretch: 110%; }
.rules dd { color: var(--marmo-shade); }
@media (min-width: 700px) {
  .rules div { grid-template-columns: minmax(9rem, 1fr) 3fr; }
}
@media (min-width: 900px) {
  .rules__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: calc(var(--m) * 5); }
}

/* ---------------------------------------------------------------- 8 book */

.book__grid { display: grid; gap: calc(var(--m) * 3); }
.book__text { display: grid; gap: calc(var(--m) * 2); align-content: start; }
.book__text p { color: var(--nero-soft); }

/* Booking is direct only, in Bentral's frames: the booking form and the availability
   calendar, each on marble in its own panel inside a ring of ochre tiles, with the
   section's gap between them. Phones get the form first; wide screens put the
   calendar, three months across, above it, and the form in a column about 730 px
   wide with the contact details beside it (a form stretched to the full 1200 px
   looked empty, Tim 2026-11-08). Inside the frames everything is Bentral's. */
.book__panel {
  min-width: 0;
  padding: var(--m);
  background: var(--nero-grout) padding-box;
  border: var(--m) solid var(--ochre);
  border-image: url(/img/tess/frame-ochre.svg) 14 round;
}
.book__panel--form { scroll-margin-top: calc(var(--m) * 2); }
@media (min-width: 900px) {
  .book__text { order: 0; }
  .book__panel--calendar { order: 1; }
  .book__panel--form { order: 2; max-width: 760px; }
  .contact { order: 3; }
}
@media (min-width: 1080px) {
  .book__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: calc(var(--m) * 4); }
  .book__text, .book__panel--calendar { grid-column: 1 / -1; }
  .book__panel--form { grid-column: 1; max-width: none; }
  .contact { grid-column: 2; align-self: start; position: sticky; top: calc(var(--m) * 4); }
  .contact ul { flex-direction: column; }
}
.direct__iframe { display: block; width: 100%; height: 640px; border: 0; background: var(--marmo); }
.direct__iframe--calendar { height: 420px; }
@media (max-width: 899px) { .direct__iframe--calendar { height: 840px; } }
.contact { display: grid; gap: var(--m); }
.contact ul { display: flex; flex-wrap: wrap; gap: var(--m) calc(var(--m) * 2); font-weight: 600; }
.contact a { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- footer */

.footer { padding-block: calc(var(--m) * 4) calc(var(--m) * 4); font-size: 0.875rem; color: var(--nero-soft); }
.footer__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--m) calc(var(--m) * 2); }
.footer__id { display: grid; gap: 2px; }
.footer__rno { color: var(--marmo); font-variant-numeric: tabular-nums; font-weight: 600; }
.footer__legal { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: var(--m) calc(var(--m) * 2); }
.footer__legal a { display: inline-block; padding-block: 10px; } /* a 44px-tall target */

/* ---------------------------------------------------------------- legal pages */

.book__note { font-size: 0.9375rem; color: var(--nero-soft); max-width: 60ch; }
.legal__top { padding-block: calc(var(--m) * 2); }
.legal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--m) calc(var(--m) * 2); }
.legal__home { display: block; width: min(320px, 60vw); }
.legal__home svg { display: block; width: 100%; height: auto; }
.legal__home .wordmark__phone { display: none; }
.legal__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(var(--m) * 2.5); max-width: 72ch; margin-inline: max(var(--gutter), (100% - var(--wrap)) / 2) auto; }
.legal h1 { max-width: 20ch; hyphens: auto; overflow-wrap: break-word; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.25rem); line-height: 1.05; font-stretch: 125%; font-weight: 800; letter-spacing: -0.01em; }
.legal h2 { max-width: none; font-size: 1.25rem; font-stretch: 115%; font-weight: 750; margin-bottom: calc(var(--m) / 2); }
.legal section { display: grid; gap: var(--m); }
.legal p, .legal li { color: var(--nero); }
.legal ul { display: grid; gap: calc(var(--m) / 2); padding-left: 1.2em; list-style: square; }
.legal li::marker { color: var(--ochre-deep); }
.legal__intro { font-size: 1.125rem; }
.legal__also { padding-top: var(--m); border-top: 1px solid rgba(27, 26, 24, 0.2); }
.legal .legal__draft { padding: 10px var(--m); background: var(--nero); color: var(--marmo); font-weight: 600; }
.todo { padding: 0 4px; background: var(--ochre); color: var(--nero); font-weight: 600; }

/* ---------------------------------------------------------------- lightbox */

.lightbox {
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: rgba(17, 16, 15, 0.97); color: var(--marmo);
  overscroll-behavior: contain;
  /* The browser keeps vertical panning and pinch-zoom; sideways swipes go to the
     photo viewer's own swipe in app.js instead of being cancelled as a pan. */
  touch-action: pan-y pinch-zoom;
}
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: rgba(17, 16, 15, 0.9); }
.lightbox__figure {
  display: grid; gap: var(--m); justify-items: center; max-height: 100dvh;
  padding: calc(var(--m) * 5) max(var(--m), env(safe-area-inset-right, 0px)) calc(var(--m) * 3) max(var(--m), env(safe-area-inset-left, 0px));
}
.lightbox__figure img {
  max-width: min(100%, 1400px); max-height: calc(100dvh - 160px);
  width: auto; height: auto; object-fit: contain;
  border: 6px solid var(--nero);
}
.lightbox figcaption { max-width: 60ch; text-align: center; font-size: 0.9375rem; color: var(--nero-soft); }
.lightbox__count { font-variant-numeric: tabular-nums; color: var(--ochre); margin-left: var(--m); white-space: nowrap; }
.lightbox__btn {
  position: fixed; display: grid; place-items: center;
  width: 52px; height: 52px; border: 0; padding: 0;
  background: var(--nero); color: var(--marmo); cursor: pointer;
}
.lightbox__btn:active { color: var(--ochre); }
@media (hover: hover) and (pointer: fine) {
  .lightbox__btn:hover { color: var(--ochre); }
}
.lightbox__btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: square; }
.lightbox__btn--close { top: calc(var(--m) + env(safe-area-inset-top, 0px)); right: calc(var(--m) + env(safe-area-inset-right, 0px)); }
.lightbox__btn--prev { left: calc(var(--m) + env(safe-area-inset-left, 0px)); top: 50%; transform: translateY(-50%); }
.lightbox__btn--next { right: calc(var(--m) + env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%); }
@media (max-width: 699px) {
  .lightbox__btn--prev, .lightbox__btn--next { top: auto; bottom: calc(var(--m) + env(safe-area-inset-bottom, 0px)); transform: none; }
}

/* ---------------------------------------------------------------- phones: the floor at the wordmark's scale */

@media (max-width: 599px) {
  .band--nero, .band--marmo, .band--ochre { background-size: 98px; }
  .book__panel { border-width: 10px; padding: 6px; }
  .border { height: 30px; }
  .border--marmo-ochre, .border--ochre-marmo { height: 40px; }
}

@media (max-width: 379px) {
  .dates__row { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- phones and tablets: bottom dock */

@media (max-width: 1099px) {
  .octo { top: auto; bottom: calc(var(--m) + env(safe-area-inset-bottom, 0px)); left: calc(var(--m) + env(safe-area-inset-left, 0px)); }
  .octo__list { top: auto; bottom: calc(100% + var(--m) / 2); }
  .dock-book {
    position: fixed; z-index: 29;
    right: calc(var(--m) + env(safe-area-inset-right, 0px));
    bottom: calc(var(--m) + env(safe-area-inset-bottom, 0px));
    left: calc(var(--m) * 2 + var(--octo) + env(safe-area-inset-left, 0px));
    max-width: 28rem; margin-left: auto;
    display: flex; align-items: center; justify-content: center;
    height: 56px;
    background: var(--verde); color: var(--marmo);
    font-weight: 700; font-stretch: 110%; text-decoration: none;
    box-shadow: 0 0 0 4px var(--nero-grout), 0 14px 30px -10px rgba(0, 0, 0, 0.6);
    border-radius: 2px;
    transition: transform 400ms var(--ease-out), opacity 300ms var(--ease-out);
  }
  .dock-book:active { background: var(--verde-press); }
  .dock-book.is-hidden { transform: translateY(calc(100% + var(--m) * 2)); opacity: 0; pointer-events: none; }
  .footer { padding-bottom: calc(var(--m) * 9 + env(safe-area-inset-bottom, 0px)); }
}

/* ---------------------------------------------------------------- 404 */

.notfound { min-height: 100svh; }
.notfound main { display: grid; gap: calc(var(--m) * 4); padding-block: calc(var(--m) * 8); }
.notfound section { display: grid; gap: var(--m); justify-items: start; }
.notfound h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); }
.wordmark--small { max-width: 520px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}