/* ============================================================================
   YOURE.AT — brand system
   Built to the 2026 YOURE.AT Brand Guideline (ArteHub).

   Logo rule, non-negotiable: logotype stays WHITE, squares stay BLACK, never
   recoloured, rotated, outlined or shadowed. Typography is black or white;
   a headline may take Minsk on a white ground. Colour floods sections — it
   never tints body copy.
   ========================================================================= */

/* ---- Typefaces -----------------------------------------------------------
   Display  : the brand deck is set in Optic Wide Medium (Love Letters), but
              in its TRIAL cut, which cannot be used commercially. Rather than
              licence it, the display face here is **Archivo Expanded at
              weight 500** — chosen by setting "SOMEWHERE ELSE, ANY TIME."
              against the deck's own specimen alongside eleven other free
              candidates (Asap, Encode Sans, Saira, Anybody, Roboto Flex,
              Gabarito, Onest, Outfit, Figtree, Host Grotesk, Wix Madefor).
              Archivo at wdth 125 / wght 500 matches Optic's width, weight and
              letter proportions almost exactly; the one difference is that
              Optic's stroke ends are softly rounded and Archivo's are cut
              square, which is not readable at web sizes.
              If Optic is ever licensed, drop optic-wide-medium.woff2 into
              /fonts — the @font-face below already prefers it.
   Body     : HK Grotesk — the actual brand body face, SIL OFL, self-hosted
              here as its maintained sibling Hanken Grotesk.
   ------------------------------------------------------------------------ */

@font-face {
  font-family: 'Optic';
  src: url('/fonts/optic-wide-medium.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}
/* Subset to the characters display type actually uses — 55 kB, not 90 kB. */
@font-face {
  font-family: 'ArchivoVar';
  src: url('/fonts/archivo-display.woff2') format('woff2');
  font-weight: 300 800;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+20-22, U+25-29, U+2b-3b, U+3f-5a, U+61-7a, U+b0, U+b2, U+d7, U+2013-2014;
}
@font-face {
  font-family: 'HankenVar';
  src: url('/fonts/hanken-grotesk-var.woff2') format('woff2-variations');
  font-weight: 300 800;
  font-display: swap;
}
/* owner (16 Sep 2026, home rebuild): the ONE new font the mockup allows — a
   free hand-written face for "What Guests Wrote" / "Kata yang Sudah
   Menginap" only. Caveat Brush, the closest free match to the mockup's
   marker-pen heading, subset to just the glyphs those two headings use
   (6.7 kB, not the family's ~290 kB). Never used anywhere else on the site. */
@font-face {
  font-family: 'CaveatBrush';
  src: url('/fonts/caveat-brush-subset.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+20, U+47, U+4B, U+4D, U+53, U+57, U+61, U+64, U+65, U+67, U+68, U+69, U+6E, U+6F, U+70, U+72, U+73, U+74, U+75, U+79;
}

:root {
  /* --- YOURE.AT colour ------------------------------------------------- */
  --yellow:    #EACD39;   /* Yellow Daisy   — curiosity, new beginnings     */
  --minsk:     #352F7F;   /* Minsk          — the unknown                   */
  --green:     #99A525;   /* Icky Green     — discovery                     */
  --red:       #B4383C;   /* Dull Red       — warmth                        */
  --flamingo:  #ED5129;   /* Flamingo       — human connection              */
  --cream:     #F3EAD5;   /* Charming Cream — comfort, belonging            */

  --ink:       #14131A;   /* Ink Black — all body copy                      */
  --ink-70:    #5A5862;   /* tint of Ink Black, for secondary hierarchy     */
  --ink-40:    #9B99A2;
  --paper:     #FFFFFF;

  /* Logo is locked. These exist so the SVG can be inlined, not re-coloured. */
  --logo-square: #000000;
  --logo-type:   #FFFFFF;

  /* --- Surface (set per section by .flood-*) --------------------------- */
  --bg:   var(--cream);
  --fg:   var(--ink);
  --rule: color-mix(in srgb, var(--fg) 16%, transparent);
  --fb-seam: var(--bg);

  /* --- Type ------------------------------------------------------------ */
  --display: 'Optic', 'ArchivoVar', 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --body: 'HankenVar', 'Hanken Grotesk', 'HK Grotesk', system-ui, -apple-system, sans-serif;

  /* Fluid scale. Min is the phone value — Dea reads on a phone first.      */
  --t-hero:  clamp(1.7rem, 7.3vw, 7rem);   /* sized so the tagline keeps its own line break on a phone */
  --t-h1:    clamp(1.75rem, 6vw, 4rem);
  --t-h2:    clamp(1.4rem, 4vw, 2.6rem);
  --t-h3:    clamp(1.125rem, 2.4vw, 1.5rem);
  --t-body:  clamp(0.975rem, 1.15vw, 1.0625rem);
  --t-small: 0.8125rem;
  --t-micro: 0.6875rem;

  /* --- Grid: one square is the unit of the system ---------------------- */
  --gutter: clamp(1rem, 4vw, 3.5rem);
  --maxw: 1480px;
  --seam: 1px;             /* hairline — the wayfinding grid               */
  --fb-gap: 0.0715;        /* square gap ÷ square size, from the artwork   */

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ============================================================================
   Reset
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;         /* one wide table must never shift the page  */
}
img, svg, video { max-width: 100%; display: block; }
img { height: auto; background: color-mix(in srgb, var(--ink) 8%, transparent); }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--flamingo); outline-offset: 3px; }
[hidden] { display: none !important; }

/* ============================================================================
   Typography
   ========================================================================= */
.display, h1, h2, h3, .h1, .h2, .h3 {
  max-width: 100%;
  overflow-wrap: break-word;
  font-family: var(--display);
  font-weight: 500;
  font-stretch: 125%;             /* Optic *Wide* Medium                    */
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: balance;
}
.t-hero { font-size: var(--t-hero); text-wrap: pretty; }
h1, .h1 { font-size: var(--t-h1); }
h2, .h2 { font-size: var(--t-h2); }
h3, .h3 { font-size: var(--t-h3); }

/* Sub-headline — HK Grotesk SemiBold, per the hierarchy page */
.subhead {
  font-family: var(--body);
  font-weight: 600;
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  line-height: 1.35;
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
}
p { margin: 0 0 1em; max-width: 62ch; }
.lede { font-size: clamp(1.0625rem, 1.8vw, 1.375rem); line-height: 1.5; font-weight: 400; }

/* The wayfinding label — small, tracked-out, the airport-signage voice */
.eyebrow {
  font-family: var(--body);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  margin: 0;
  color: var(--fg);
}
.eyebrow--muted { color: color-mix(in srgb, var(--fg) 60%, transparent); }

/* Outlined display type — transparent fill, ink (or paper, on a dark flood)
   stroke. Reusable wherever the mockup wants a heading drawn rather than
   filled: "Need more reasons to stay?", "Who is coming?", "Three addresses,
   one city". The stroke colour is set separately from `color`, so it still
   reads on every flood without a second class. */
.t-outline {
  color: transparent;
  -webkit-text-stroke-width: 1.5px;
  -webkit-text-stroke-color: var(--fg);
  text-stroke-width: 1.5px;
  text-stroke-color: var(--fg);
}

/* ============================================================================
   Layout
   ========================================================================= */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--wide { max-width: 1760px; }
.section { padding-block: clamp(3rem, 8vw, 7rem); background: var(--bg); color: var(--fg); }
.section--tight { padding-block: clamp(2rem, 4vw, 3.5rem); }
.stack > * + * { margin-top: var(--s, 1rem); }

/* Colour floods. Type inside stays black or white — never a third colour. */
.flood-cream    { --bg: var(--cream);    --fg: var(--ink);   --fb-seam: var(--cream); }
.flood-paper    { --bg: var(--paper);    --fg: var(--ink);   --fb-seam: var(--paper); }
.flood-ink      { --bg: var(--ink);      --fg: var(--paper); --fb-seam: var(--ink); }
.flood-minsk    { --bg: var(--minsk);    --fg: var(--paper); --fb-seam: var(--minsk); }
.flood-green    { --bg: var(--green);    --fg: var(--ink);   --fb-seam: var(--green); }
.flood-yellow   { --bg: var(--yellow);   --fg: var(--ink);   --fb-seam: var(--yellow); }
.flood-red      { --bg: var(--red);      --fg: var(--paper); --fb-seam: var(--red); }
.flood-flamingo { --bg: var(--flamingo); --fg: var(--ink);   --fb-seam: var(--flamingo); }

/* ============================================================================
   The logo
   ========================================================================= */
.logo { display: block; width: var(--logo-w, 136px); aspect-ratio: 8.5 / 1; }
.logo svg { width: 100%; height: 100%; }

/* ============================================================================
   The naming system — an airport split-flap board.
   Three rows of squares: YOURE.AT / a blank course / the destination.
   Geometry is taken from the artwork: square 42.04, gap 3.005.
   ========================================================================= */
/* The board sizes itself to its column count so a twelve-letter destination
   never runs off a phone. One square + its share of the gaps = --unit. */
.flipboard {
  --cols: 8;
  --cell-max: 64px;
  --span: calc(var(--cols) + var(--fb-gap) * (var(--cols) - 1));
  container-type: inline-size;
  display: grid;
  width: 100%;
  max-width: min(100%, calc(var(--cell-max) * var(--span)));
  --unit: calc(100cqw / var(--span));
  gap: calc(var(--unit) * var(--fb-gap));
}
.fb-row {
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--unit));
  gap: calc(var(--unit) * var(--fb-gap));
}
.fb-cell {
  position: relative;
  aspect-ratio: 1;
  background: #000;
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 500;
  font-stretch: 125%;
  font-size: calc(var(--unit) * 0.78);
  line-height: 1;
  text-transform: uppercase;
  overflow: hidden;
  user-select: none;
}
/* the seam of a real flip: the ground showing through the middle of the tile */
.fb-cell::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: max(1px, calc(var(--unit) * 0.035));
  background: var(--fb-seam);
  transform: translateY(-50%);
  pointer-events: none;
}
.fb-cell > span { display: block; transform: translateY(-2%); }
.fb-cell--blank > span { visibility: hidden; }

/* The flap. The tile's contents rotate about its own middle — the same axis
   as the seam — so a change reads as the top half falling, the way a real
   split-flap board does. */
.fb-row { perspective: 420px; }
.fb-cell > span { backface-visibility: hidden; }
.fb-cell--flipping > span { animation: fb-flap 150ms cubic-bezier(.35, .1, .2, 1); }
@keyframes fb-flap {
  0%   { transform: translateY(-2%) rotateX(0deg); }
  49%  { transform: translateY(-2%) rotateX(-86deg); opacity: .55; }
  50%  { transform: translateY(-2%) rotateX(86deg);  opacity: .55; }
  100% { transform: translateY(-2%) rotateX(0deg);   opacity: 1; }
}

/* sizes — a ceiling on the square, never a fixed width */
.flipboard--sm   { --cell-max: 17px; }
.flipboard--lg   { --cell-max: 46px; }
.flipboard--hero { --cell-max: 62px; }
@media (max-width: 620px) {
  .flipboard--lg   { --cell-max: 34px; }
  .flipboard--hero { --cell-max: 40px; }
}

/* ============================================================================
   Buttons
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: .82em 1.4em;
  font-family: var(--body);
  font-weight: 700;
  font-size: var(--t-small);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  border: var(--seam) solid transparent;
  border-radius: 0;                 /* the system is square */
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--book { background: var(--yellow); color: var(--ink); border-color: var(--ink); }
.btn--book:hover { background: var(--ink); color: var(--yellow); }
/* Flamingo for "look at this", Yellow Daisy for "book this" — two yellows
   stacked at the top of the page were competing with each other, and the
   colours now say which button does what. Ink on Flamingo is 5.1:1. */
.btn--accent { background: var(--flamingo); color: var(--ink); border-color: var(--ink); }
.btn--accent:hover { background: var(--ink); color: var(--flamingo); border-color: var(--ink); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: var(--flamingo); color: var(--ink); }
.btn--ghost { background: transparent; color: var(--fg); border-color: currentColor; }
.btn--ghost:hover { background: var(--fg); color: var(--bg); }
.btn--sm { padding: .6em 1em; font-size: var(--t-micro); }

/* Inline links get colour — the one place colour signals interactivity. */
.prose a { color: inherit; text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.prose a:hover { text-decoration-thickness: 2px; }

/* ============================================================================
   Masthead
   ========================================================================= */
.masthead {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--cream);
  border-bottom: var(--seam) solid var(--ink);
}
.masthead__bar {
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 2vw, 2rem);
  height: 62px;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.masthead__nav { display: flex; align-items: center; gap: clamp(.75rem, 1.6vw, 1.75rem); margin-inline-start: auto; }
.masthead__bar > .langs { display: none; margin-inline-start: auto; }
.navlink {
  font-size: var(--t-small);
  font-weight: 600;
  text-decoration: none;
  letter-spacing: .04em;
  white-space: nowrap;
  padding-block: .35rem;
  border-bottom: 2px solid transparent;
}
.navlink:hover, .navlink[aria-current='page'] { border-bottom-color: var(--ink); }

/* version + update, per house rule — always visible next to the logo */
.version {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--ink-70);
  white-space: nowrap;
}
.version button {
  background: none;
  border: var(--seam) solid var(--ink-40);
  padding: .2rem .45rem;
  cursor: pointer;
  font-size: var(--t-micro);
  line-height: 1;
  white-space: nowrap;
}
.version button:hover { background: var(--yellow); border-color: var(--ink); }

/* mobile drawer */
.navtoggle { display: none; background: none; border: var(--seam) solid var(--ink); padding: .45rem .6rem; cursor: pointer; line-height: 1; }

@media (max-width: 860px) {
  .masthead__bar { height: 54px; gap: .45rem; }
  .logo { --logo-w: 104px; }
  /* keep the whole bar on one line — the version chip loses its words,
     not its function */
  .version { font-size: 9px; letter-spacing: .02em; gap: .25rem; }
  .version button { padding: .25rem .3rem; font-size: 11px; }
  .version button span { display: none; }
  .navtoggle { display: block; margin-inline-start: auto; }
  .masthead__nav {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--cream);
    border-bottom: var(--seam) solid var(--ink);
    padding: .5rem var(--gutter) 1rem;
  }
  .masthead__nav[data-open='true'] { display: flex; }
  .masthead__nav .navlink { padding-block: .7rem; border-bottom: var(--seam) solid var(--rule); }
  .masthead__nav .btn { margin-top: .75rem; justify-content: center; }
}

/* ============================================================================
   Hero
   ========================================================================= */
.hero { position: relative; background: var(--ink); color: var(--paper); overflow: hidden; }
/* The photograph is positioned in its own right rather than filling its
   parent with height:100%. A percentage height depends on the parent
   resolving one first, and when it did not the hero painted its own dark
   background instead of the room — which is what phones were showing. */
.hero__media { position: absolute; inset: 0; overflow: hidden; background: var(--ink); }
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: none;
}
/* The cycling home hero swaps one single <img> in place, with no opacity
   transition on it. Both a stack of faded layers and a persistent
   transition promote the photograph onto its own compositor layer, and
   some renderers then drop it and paint the hero solid black. The board
   flipping to the new destination carries the motion instead. */
/* The scrim is full-bleed and the content inside it keeps the measure. With
   the gradient on the same element as the .wrap it stopped at the 1480px
   column, so on a wide screen the dark panel had two hard vertical edges
   straight down the middle of the photograph. Nothing overlays the picture —
   a full-cover pseudo-element here made some renderers drop the image and
   paint the hero solid black. */
.hero__inner {
  position: relative;
  z-index: 2;
  background:
    linear-gradient(180deg,
      rgba(20, 19, 26, .46) 0%,
      rgba(20, 19, 26, .06) 20%,
      rgba(20, 19, 26, .58) 52%,
      rgba(20, 19, 26, .90) 100%);
}
.hero__body {
  min-height: var(--hero-min, min(92svh, 880px));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding-block: clamp(4.5rem, 10vw, 7rem);
}
/* Type over a photograph gets a black block behind it — the content
   guideline's own answer for legibility on imagery, rather than a shadow
   (which the logo rules forbid) or a heavier scrim over the room. */
.hero .eyebrow {
  display: inline-block;
  background: #000;
  color: #fff;
  padding: .45em .6em .4em;
}
.hero__body > .stack > .eyebrow { align-self: start; }

/* The photograph itself is the target — people click the picture, not the
   label next to it. This sits under the hero content, so the buttons and
   links on top still work. */
.hero__open {
  position: absolute;
  inset: 0;
  z-index: 1;
  border: 0;
  padding: 0;
  background: none;
  cursor: zoom-in;
}
.hero__zoom {
  position: absolute;
  right: clamp(.75rem, 3vw, 1.5rem);
  top: clamp(.75rem, 3vw, 1.5rem);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .6rem .8rem;
  background: rgba(0, 0, 0, .72);
  color: #fff;
  border: var(--seam) solid rgba(255, 255, 255, .3);
  cursor: pointer;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.hero__zoom:hover { background: var(--yellow); color: var(--ink); border-color: var(--ink); }

.hero__foot { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.25rem; }

/* ============================================================================
   Departures board — the unit index
   ========================================================================= */
.board { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.board th, .board td { text-align: left; padding: .85rem .75rem; border-bottom: var(--seam) solid var(--rule); }
.board th {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--fg) 65%, transparent);
  white-space: nowrap;
}
.board tr { transition: background .15s var(--ease); }
.board tbody tr:hover { background: color-mix(in srgb, var(--fg) 7%, transparent); }
.board td:first-child { font-family: var(--display); font-stretch: 125%; font-weight: 500; text-transform: uppercase; font-size: 1.05rem; }
.board a { text-decoration: none; }
.board__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ============================================================================
   Unit cards
   ========================================================================= */
.grid-units {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: clamp(1rem, 2.2vw, 2rem);
}
/* owner: cards were hard to tap. content-visibility reserved 420px for each
   off-screen card while a real one is taller, so the page shifted under the
   finger as cards scrolled in. 85 cards render fine without it. */
.ucard {
  display: flex; flex-direction: column; text-decoration: none;
  background: var(--paper); color: var(--ink); border: var(--seam) solid var(--ink);
}
.ucard__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink); }
.ucard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.ucard:hover .ucard__media img { transform: scale(1.045); }
/* the card nameplate: the board's voice at a glance, one tile instead of 27 */
.ucard__plate {
  position: absolute;
  left: .7rem;
  bottom: .7rem;
  max-width: calc(100% - 1.4rem);
  background: #000;
  color: #fff;
  font-family: var(--display);
  font-weight: 500;
  font-stretch: 125%;
  text-transform: uppercase;
  font-size: clamp(.95rem, 2.2vw, 1.2rem);
  line-height: 1;
  padding: .42em .5em .38em;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ucard__body { padding: .9rem 1rem 1.1rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.ucard__theme { font-weight: 600; font-size: .95rem; line-height: 1.3; }
/* owner: theme name and the type/size tags sit close together, not pushed apart */
.ucard__meta { font-size: var(--t-small); color: var(--ink-70); display: flex; flex-wrap: wrap; gap: .4rem .75rem; margin-top: .2rem; padding-top: 0; }
.tag { display: inline-flex; align-items: center; gap: .3em; font-size: var(--t-micro); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .25em .5em; border: var(--seam) solid currentColor; white-space: nowrap; }

/* ============================================================================
   Filter bar — search + sort, one row, never wraps on a phone
   ========================================================================= */
/* One search box across the whole index — city, theme, bedrooms, building,
   size. Nothing to pick from first. */
.search { display: flex; align-items: center; gap: .6rem; border: 2px solid var(--ink); background: var(--paper); padding: .1rem .8rem; }
.search svg { width: 18px; height: 18px; flex: 0 0 auto; opacity: .55; }
.search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: none;
  background: none;
  padding: .8rem 0;
  font-size: 16px;          /* anything smaller makes iOS zoom the page */
}
.search input::-webkit-search-cancel-button { display: none; }
.search button { border: 0; background: none; cursor: pointer; padding: .4rem; font-size: .95rem; line-height: 1; opacity: .6; }
.search button:hover { opacity: 1; }

.filterrow { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.filterrow .chiprow { flex: 1 1 auto; }
.sortbox { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.sortbox span { font-size: var(--t-micro); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-70); }
.sortbox select { font-size: var(--t-small); padding: .38rem .3rem; border: var(--seam) solid var(--ink); background: var(--paper); border-radius: 0; max-width: 38vw; }
@media (max-width: 620px) { .sortbox span { display: none; } }
.gstep { gap: 0; border: var(--seam) solid var(--ink); background: var(--paper); }
.gstep button { width: 2.2rem; min-height: 2.2rem; border: 0; background: none; cursor: pointer; font-size: 1.15rem; line-height: 1; color: var(--ink); }
.gstep button:hover { background: var(--ink); color: var(--yellow); }
.lightbox__end { position: absolute; inset: 0; overflow: auto; background: var(--ink); display: grid; align-content: center; gap: 1rem; padding: clamp(1rem, 4vw, 2rem); color: var(--paper); text-align: center; }
.lightbox__end[hidden], .lightbox img[hidden] { display: none; }
.lightbox__end .h3, .lightbox__end .eyebrow { margin: 0; color: var(--paper); }
.lightbox__end .eyebrow { margin-top: .6rem; }
.lightbox__endbtns { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.lightbox__endbtns .btn--book, .lightbox__endbtns .btn--book:hover { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.lightbox__endbtns .btn:not(.btn--book) { background: none; color: var(--paper); border-color: var(--paper); }
/* owner: the neighbours look like the normal unit cards, in a row you swipe */
.lightbox__rel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(15rem, 78%); gap: .8rem; overflow-x: auto; scroll-snap-type: x mandatory;
  width: 100%; max-width: 64rem; margin: 0 auto; padding-bottom: .5rem; text-align: left; color: var(--ink); }
@media (min-width: 900px) { .lightbox__rel { grid-auto-columns: calc((100% - 2.4rem) / 4); } }
.lightbox__rel > * { scroll-snap-align: start; }
/* owner: the card looked broken — the photo must fill its frame down to the name plate */
.lightbox .lightbox__rel .ucard__media img { width: 100%; height: 100%; object-fit: cover; }
.lightbox__cap { margin: 0 auto; padding: .6rem 1rem 0; max-width: 60ch; text-align: center; font-size: var(--t-small); line-height: 1.4; color: var(--paper); }
.gstep output { align-self: stretch; display: grid; place-items: center; min-width: 5.2rem; padding: 0 .3rem;
  border-inline: var(--seam) solid var(--ink); font-size: var(--t-small); font-weight: 600; font-variant-numeric: tabular-nums; }
.chiprow { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: none; }
.chiprow::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; cursor: pointer; background: transparent;
  border: var(--seam) solid var(--ink); padding: .38rem .7rem;
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.chip[aria-pressed='true'] { background: var(--ink); color: var(--cream); }
.result-count { font-size: var(--t-small); color: var(--ink-70); white-space: nowrap; }

/* ============================================================================
   Gallery
   ========================================================================= */
/* No hairline grid between the photographs. Butted up against a 1px rule,
   any picture shot a degree off level reads as crooked; a real gap lets each
   one stand on its own. */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: clamp(.4rem, 1vw, .75rem); }
.gallery button { padding: 0; border: 0; background: color-mix(in srgb, var(--fg) 8%, transparent); cursor: zoom-in; aspect-ratio: 4 / 3; overflow: hidden; }
.gallery button img { transition: transform .5s var(--ease); }
.gallery button:hover img { transform: scale(1.03); }
/* a logo or a badge is not a photograph: show it whole, on its own tile */
.gallery--contain button { background: var(--paper); border: var(--seam) solid var(--rule); }
.gallery--contain img { object-fit: contain; padding: clamp(1rem, 3vw, 2rem); }
.gallery img { width: 100%; height: 100%; object-fit: cover; }

.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(20,19,26,.96); display: grid; grid-template-rows: auto 1fr auto; }
.lightbox img { width: 100%; height: 100%; object-fit: contain; }
.lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem clamp(.75rem, 3vw, 1.5rem); color: var(--paper); }
.lightbox__bar button { background: none; border: var(--seam) solid currentColor; color: inherit; padding: .45rem .75rem; cursor: pointer; font-size: var(--t-small); }
.lightbox__stage { position: relative; overflow: hidden; touch-action: pan-y; }
/* the picture follows the thumb on a swipe; no transition while dragging,
   a short one on release so it snaps back rather than jumps */
.lightbox img { transition: transform .18s ease, opacity .18s ease; }

/* ============================================================================
   Info pages
   ========================================================================= */
.prose { max-width: 68ch; }
.prose h2 { margin-top: 2.5em; margin-bottom: .5em; }
.prose h3 { margin-top: 1.75em; margin-bottom: .4em; }
.prose ul { padding-left: 1.1em; margin: 0 0 1.25em; }
.prose li { margin-bottom: .4em; }
.prose li::marker { color: var(--ink-40); }

.cols { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.rule { height: var(--seam); background: var(--rule); border: 0; margin: 0; }

/* ============================================================================
   Footer
   ========================================================================= */
/* Minsk, not black. The logo's squares must stay black, and on a near-black
   ground they vanished — which is why the mark had to sit in a yellow box to
   be seen at all. On violet the squares read on their own, so the box goes
   and the footer stops being a slab of black under a yellow band. */
.footer {
  background: var(--minsk);
  color: var(--paper);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  --fb-seam: var(--minsk);
}
.footer__mark { display: inline-block; margin-bottom: 1.25rem; }
.footer__mark .logo { margin: 0; }
.footer a { text-decoration: none; }
.footer a:hover { text-decoration: underline; text-underline-offset: .2em; }
.footer__grid { display: grid; gap: clamp(1.75rem, 4vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.footer__addr { font-size: var(--t-small); line-height: 1.55; color: color-mix(in srgb, var(--paper) 82%, transparent); }
/* owner: no version number on the public site (it stays an HTML comment
   above this row) — just the copyright, and Terms centred between the two
   empty edges rather than pinned to the right where the version used to sit. */
.footer__bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .4rem 1rem; font-size: var(--t-micro); letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--paper) 70%, transparent); }
.footer__bottom > span:first-child { justify-self: start; }
.footer__terms { grid-column: 2; justify-self: center; }
@media (max-width: 620px) {
  .footer__bottom { grid-template-columns: 1fr; text-align: center; }
  .footer__bottom > span:first-child, .footer__terms { justify-self: center; grid-column: 1; }
}

/* ============================================================================
   Phone: every line is expensive. Tighten, never wrap a control onto its own
   row, and keep the photographs full size.
   ========================================================================= */
@media (max-width: 620px) {
  /* On a phone the hero was a stack of eight things and the photograph had
     nowhere left to show. The board is tappable, so the arrows go; the
     caption repeats what the board already says, so it goes too. */
  .hero__body { min-height: var(--hero-min, min(74svh, 620px)); padding-block: 3rem 1.5rem; gap: 1rem; }
  .hero [data-hero-caption] { display: none; }
  .hero .eyebrow { font-size: 10px; padding: .4em .5em .35em; }
  .hero__foot { gap: .75rem; }
  .hero__foot .lede { font-size: 1rem; }
  .board th:nth-child(2), .board td:nth-child(2),
  .board th:nth-child(n+5), .board td:nth-child(n+5) { display: none; }
  .board th, .board td { padding: .7rem .5rem; white-space: nowrap; }
  .filters select { font-size: var(--t-micro); padding: .5rem .4rem; }
  .footer__grid { gap: 1.5rem; }
  .ucard__media { aspect-ratio: 1 / 1; }
}

/* ============================================================================
   Reservation form. Same contract as the old Book & Link widget, but native
   date inputs — the phone's own picker, and no third-party script to load.
   ========================================================================= */
.reserve { display: grid; gap: .6rem; max-width: 560px; }
.reserve__dates { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.reserve__f { display: grid; gap: .3rem; min-width: 0; }
.reserve__f input {
  width: 100%;
  padding: .68rem .7rem;
  border: var(--seam) solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  border-radius: 0;
  font-size: 16px;              /* anything smaller makes iOS zoom the page */
  line-height: 1.2;
  min-height: 46px;             /* a comfortable tap target */
}
.reserve__go { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.reserve__go .btn { flex: 1 1 auto; justify-content: center; }
.reserve__promolink {
  background: none; border: 0; padding: .4rem 0; cursor: pointer;
  font-size: var(--t-small); font-weight: 600; text-decoration: underline;
  text-underline-offset: .2em; white-space: nowrap; color: inherit;
}
.reserve__note { font-size: var(--t-micro); letter-spacing: .04em; text-transform: uppercase; margin: 0; opacity: .7; }
.reserve__err { font-size: var(--t-small); font-weight: 600; margin: 0; }

/* ============================================================================
   Socials + WhatsApp
   ========================================================================= */
.socials { display: flex; align-items: center; gap: .15rem; }
.social { display: grid; place-items: center; width: 2rem; height: 2rem; color: inherit; opacity: .78; }
.social:hover { opacity: 1; }
.footer .social { opacity: .8; }

.wafab {
  position: fixed;
  right: clamp(.75rem, 3vw, 1.5rem);
  bottom: clamp(.75rem, 3vw, 1.5rem);
  z-index: 65;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem .95rem;
  background: var(--green);      /* Icky Green — the palette's own green */
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--t-small);
  letter-spacing: .06em;
  text-transform: uppercase;
  border: var(--seam) solid var(--ink);
  box-shadow: 0 6px 22px rgba(20, 19, 26, .28);
  transition: transform .18s var(--ease);
}
.wafab:hover { transform: translateY(-2px); }
@media (max-width: 860px) {
  /* icon only, and lifted clear of the booking bar when one is present */
  .wafab { padding: .75rem; gap: 0; border-radius: 999px; }
  .wafab span { display: none; }
  /* the booking bar already carries a WhatsApp button — one is enough */
  body.has-bookbar .wafab { display: none; }
}

/* ============================================================================
   Sticky booking bar — phone only, on a unit page.
   The one thing a browsing guest should never have to scroll back up for.
   ========================================================================= */
.bookbar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 70;
  display: none;
  align-items: center;
  gap: .6rem;
  padding: .55rem clamp(.75rem, 4vw, 1rem);
  padding-bottom: calc(.55rem + env(safe-area-inset-bottom, 0px));
  background: var(--ink);
  color: var(--paper);
  border-top: var(--seam) solid var(--yellow);
  transform: translateY(110%);
  transition: transform .28s var(--ease);
}
.bookbar[data-show='true'] { transform: translateY(0); }
.bookbar__id { min-width: 0; line-height: 1.15; }
.bookbar__name {
  font-family: var(--display); font-weight: 500; font-stretch: 125%;
  text-transform: uppercase; font-size: 1rem; display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bookbar__meta { font-size: var(--t-micro); letter-spacing: .08em; text-transform: uppercase; opacity: .7; white-space: nowrap; }
.bookbar__actions { margin-inline-start: auto; display: flex; gap: .4rem; align-items: center; flex: 0 0 auto; }
.bookbar .btn { padding: .7em 1em; }
.bookbar__wa {
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem;
  border: var(--seam) solid currentColor; text-decoration: none; flex: 0 0 auto;
}
@media (max-width: 860px) { .bookbar { display: flex; } body.has-bookbar { padding-bottom: 4.25rem; } }

/* ============================================================================
   Print / utility
   ========================================================================= */
.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: absolute; left: .5rem; top: -4rem; z-index: 100;
  background: var(--yellow); color: var(--ink); padding: .6rem 1rem; font-weight: 700; text-decoration: none;
  transition: top .15s var(--ease);
}
.skip:focus { top: .5rem; }

/* reservation: building picker (home page only) */
.reserve__pick select {
  width: 100%;
  padding: .68rem .7rem;
  border: var(--seam) solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  border-radius: 0;
  font-size: 16px;
  min-height: 46px;
}

/* Amenities: a photograph of the actual thing, then its name. The page is
   meant to be looked at, not read. */
.amen {
  margin: 0;
  display: grid;
  gap: clamp(.75rem, 2vw, 1.5rem);
  grid-template-columns: repeat(var(--amen-cols, 4), minmax(0, 1fr));
}
@media (max-width: 900px) { .amen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.amen__i { margin: 0; display: flex; flex-direction: column; background: var(--paper); border: var(--seam) solid var(--ink); }
.amen__ph { aspect-ratio: 1; overflow: hidden; background: color-mix(in srgb, var(--ink) 6%, transparent);
            border: 0; padding: 0; width: 100%; cursor: zoom-in; display: block; }
.amen__ph img { transition: transform .5s var(--ease); }
.amen__i:hover .amen__ph img { transform: scale(1.04); }
.amen__ph img { width: 100%; height: 100%; object-fit: cover; }
.amen__txt { padding: .75rem .85rem .9rem; display: grid; gap: .25rem; }
.amen__name { font-weight: 700; font-size: .95rem; line-height: 1.25; margin: 0; color: var(--ink); }
.amen__body { margin: 0; color: var(--ink-70); font-size: .82rem; line-height: 1.45; }
/* owner: the descriptions were hidden on phones and read as lost — they stay */
@media (max-width: 620px) { .amen { grid-template-columns: 1fr 1fr; gap: .6rem; } }

/* the room-by-room list on a unit page */
.room { display: grid; gap: .4rem; align-content: start; }
.room__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.room__list li { position: relative; padding-left: 1rem; font-size: .95rem; line-height: 1.45; }
.room__list li::before { content: ''; position: absolute; left: 0; top: .58em; width: .45rem; height: .45rem; background: currentColor; opacity: .45; }

/* ============================================================================
   Policy pages. Read before someone pays, so they get to look like a document
   rather than a wall: one topic per block, its sub-topics indented under it.
   The wording is exactly what the old site said.
   ========================================================================= */
.legal__topic { border-top: var(--seam) solid var(--ink); padding-top: 1.25rem; margin-bottom: 2.25rem; }
.legal__h { font-family: var(--display); font-weight: 500; font-stretch: 125%; text-transform: uppercase;
            font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.05; margin: 0 0 1rem; }
.legal__sub { margin: 0 0 1.1rem; padding-left: clamp(.75rem, 2vw, 1.1rem); border-left: 2px solid var(--rule); }
.legal__sub:last-child { margin-bottom: 0; }
.legal__sub-h { font-weight: 700; font-size: .95rem; margin: 0 0 .35rem; }
.legal__topic p { font-size: .95rem; line-height: 1.6; margin: 0 0 .55rem; }
.legal__topic ul { margin: .25rem 0 .75rem; padding-left: 1.05em; }
.legal__topic li { font-size: .95rem; line-height: 1.55; margin-bottom: .3rem; }

/* ============================================================================
   Language switch. Each language is a real address, so these are links.
   ========================================================================= */
.langs { display: inline-flex; align-items: center; border: var(--seam) solid var(--ink); flex: 0 0 auto; }
.lang {
  padding: .3rem .5rem;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .08em;
  text-decoration: none;
  line-height: 1;
  color: var(--ink);
}
.lang + .lang { border-left: var(--seam) solid var(--ink); }
.lang.is-on { background: var(--ink); color: var(--cream); }
@media (max-width: 860px) {
  /* it rides in the top bar, not the drawer, so it is always one tap away */
  .masthead__nav .langs { display: none; }
  .masthead__bar > .langs { display: inline-flex; }
}


/* ============================================================================
   How many of you? — steppers, and a badge saying how each unit fits
   ========================================================================= */
.steppers { display: flex; flex-wrap: wrap; gap: clamp(1rem, 4vw, 3rem); }
.stepper { display: grid; gap: .5rem; }
.stepper__label { font-size: var(--t-micro); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.stepper__ctrl { display: inline-flex; align-items: stretch; border: 2px solid var(--ink); background: var(--paper); }
.stepper__ctrl button {
  width: 3rem; border: 0; background: none; cursor: pointer;
  font-size: 1.4rem; line-height: 1; font-weight: 500; color: var(--ink);
}
.stepper__ctrl button:hover { background: var(--ink); color: var(--yellow); }
.stepper__ctrl output {
  min-width: 3.2rem; display: grid; place-items: center;
  font-family: var(--display); font-weight: 500; font-stretch: 125%;
  font-size: 1.6rem; line-height: 1; padding: .7rem .2rem;
  border-inline: 2px solid var(--ink);
  font-variant-numeric: tabular-nums;
}
.ucard { position: relative; }
.fitbadge {
  position: absolute; z-index: 2; top: 0; left: 0;
  background: var(--green); color: var(--ink);
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: .4rem .55rem; line-height: 1;
}
.fitbadge--extra { background: var(--yellow); }

/* ============================================================================
   Google reviews — written by guests on a page we cannot edit
   ========================================================================= */
.revgrid { display: grid; gap: clamp(.75rem, 2vw, 1.25rem); grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.rev { display: grid; gap: .4rem; align-content: start; padding: 1.1rem 1.2rem; border: var(--seam) solid var(--ink); background: var(--paper); color: var(--ink); text-decoration: none; }
.rev:hover { background: var(--yellow); }
.rev__score { font-family: var(--display); font-weight: 500; font-stretch: 125%; font-size: 1.8rem; line-height: 1; margin: 0; display: flex; align-items: baseline; gap: .5rem; }
.rev__count { margin: 0; font-size: var(--t-small); color: var(--ink-70); }
.rev__go { font-size: var(--t-micro); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-top: .35rem; }
/* owner: stars easier to see — full size, a firmer outline */
.stars { color: var(--yellow); font-size: 1em; letter-spacing: .06em; -webkit-text-stroke: 1.2px var(--ink); paint-order: stroke fill; }
.rev__big { font-family: var(--display); font-weight: 500; font-stretch: 125%; font-size: clamp(2rem, 5vw, 3rem); line-height: 1; margin: 0; display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.rev__big span { font-family: var(--body); font-weight: 400; font-size: var(--t-small); letter-spacing: 0; text-transform: none; color: var(--ink-70); }

/* socials live in the footer, not at the top of every page */
.socials--footer { gap: .25rem; margin-top: .1rem; }
.socials--footer .social { width: 2.2rem; height: 2.2rem; border: var(--seam) solid color-mix(in srgb, var(--paper) 45%, transparent); }
.socials--footer .social:hover { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }

/* ---------------------------------------------------------------------------
   Phone hero, last word. These overrides sit at the end of the file on purpose:
   the later rule wins regardless of the media query around it.
   ------------------------------------------------------------------------- */

/* The hero is its own control: tap it or swipe and it moves to the next
   destination. Forward only — it is a loop, there is nothing behind you. */
.hero__board { display: block; }
.flipboard[role="button"] { cursor: pointer; }
.flipboard[role="button"]:hover { opacity: .93; }
.hero a, .hero button { cursor: pointer; }

/* Six pillars, three across: four columns leaves two stranded on a second row. */
.pillars { display: grid; gap: clamp(1.75rem, 3.5vw, 3rem); grid-template-columns: 1fr; }
@media (min-width: 640px)  { .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------------------
   Phone hero: the board is the thing worth looking at, so everything that
   competes with it goes. The detail line and the caption stay on desktop,
   where there is room for them.
   ------------------------------------------------------------------------- */
@media (max-width: 620px) {
  .hero__foot .lede { display: none; }
  .hero__body { gap: .85rem; padding-block: 2.5rem 1.25rem; }
}

/* ============================================================================
   Home: who is coming. On a phone this replaces the 85-row board — a question
   you answer with your thumbs rather than a list you scroll past.
   ========================================================================= */
.fitband__says { margin: 0; min-height: 2.6em; }
.fitband .stepper__ctrl { background: var(--paper); border-color: var(--paper); }
.fitband .stepper__ctrl output { color: var(--ink); border-color: var(--ink); }
.fitband .stepper__ctrl button { color: var(--ink); }
.fitband .stepper__ctrl button:hover { background: var(--ink); color: var(--yellow); }
@media (min-width: 761px) {
  /* on a desktop the board does this job, so the widget stays compact */
  .fitband .steppers { gap: 2.5rem; }
}

/* ============================================================================
   Pillars. On a phone they arrive short and open on a tap; on a desktop they
   are simply open.
   ========================================================================= */
.pillar { display: grid; gap: .5rem; align-content: start; }
.pillar__body { margin: 0; }
.pillar__more {
  justify-self: start;
  background: none;
  border: 0;
  padding: .2rem 0;
  cursor: pointer;
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: underline;
  text-underline-offset: .2em;
  color: inherit;
}
@media (max-width: 760px) {
  .pillar--clamped .pillar__body {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ---------------------------------------------------------------------------
   Phone hero, final trim. The room and the board are what the screen is for;
   the tagline is still in the document for crawlers and screen readers, and
   the board gives back the middle of the photograph.
   ------------------------------------------------------------------------- */
@media (max-width: 620px) {
  .hero__tagline {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .flipboard--hero { --cell-max: 32px; }
  .hero__body { min-height: min(66svh, 540px); padding-block: 2.25rem 1.1rem; gap: .8rem; }
  .hero__foot { gap: .6rem; }
}

/* the fit answer: one number, large; the rest is a footnote */
.fitband__says {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-stretch: 125%;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 5vw, 2.2rem);
  line-height: 1;
}
.fitband__note { margin: 0; opacity: .75; }

/* two lines is enough to judge a pillar by */
@media (max-width: 760px) {
  .pillar--clamped .pillar__body { -webkit-line-clamp: 2; }
}

/* The first pillar answers who is behind the unit at two in the morning, so it
   is never cut off — the other five still clamp. Two classes to outrank the
   clamp rule above without reaching for !important. */
.pillar.pillar--open .pillar__body { display: block; -webkit-line-clamp: none; overflow: visible; }

/* ---------------------------------------------------------------------------
   A unit's own page. The photograph is left alone — no board, no scrim, no
   type over the room — and the nameplate band sits directly under it. On a
   phone that band is what you read; the picture is what you look at.
   ------------------------------------------------------------------------- */
.hero--plain { height: min(42svh, 76vw, 440px); }
.unithero__over { display: none; }

/* On a phone everything sits under the picture — there is not enough screen
   to put anything on top of a room. On a desktop there is: the building, the
   theme and the facts caption the photograph itself, and the band beneath
   stands the nameplate and the description left and right. */
@media (min-width: 900px) {
  .hero--plain { height: min(62svh, 620px); }
  .unithero__over {
    display: flex;
    align-items: flex-end;
    position: absolute;
    inset: 0;
    /* a caption over the picture: the photograph underneath stays the click
       target that opens the gallery */
    pointer-events: none;
  }
  .unithero__over > .wrap { padding-bottom: clamp(1.75rem, 4vw, 3rem); }
  .unithero__theme { color: #fff; margin: 0; }
  .unithero__facts { color: color-mix(in srgb, #fff 82%, transparent); }
  .unitband__ident { display: none; }
}

.unitband__in { display: grid; gap: clamp(.8rem, 2.5vw, 1.25rem); align-items: start; }
@media (min-width: 900px) {
  .unitband__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
  .unitband__blurb .lede { max-width: 48ch; }
}
.unitband__facts {
  margin: 0;
  font-size: var(--t-small);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-70);
}
.unitband__facts em { white-space: nowrap; }

/* the answer to "does my family fit", in plain sentences rather than the
   uppercase eyebrow it used to be set in */
.capline {
  margin: clamp(.5rem, 1.5vw, 1rem) 0 0;
  padding-top: clamp(.9rem, 2.5vw, 1.25rem);
  border-top: var(--seam) solid var(--rule);
  max-width: 64ch;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--fg);
}

/* the nameplate band and whatever follows it share the cream ground, so the
   two lots of section padding would otherwise read as a hole */
.unitband + .section { padding-top: clamp(1.25rem, 3vw, 2.25rem); }

/* ---------------------------------------------------------------------------
   Fixes to three things that were reading wrong.
   ------------------------------------------------------------------------- */

/* The footer sets its own ground but never set --fg with it, so every eyebrow
   in it ("TALK TO A HUMAN", "FOLLOW ALONG") inherited Ink Black and sat almost
   invisible on the Minsk purple. */
.footer { --fg: var(--paper); --bg: var(--minsk); }

/* The answer and the way to act on it belong together: one line on a desktop,
   stacked on a phone, instead of a number floating in the middle of the band. */
.fitband__answer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(.9rem, 2.5vw, 1.5rem);
}
.fitband .steppers { margin-bottom: clamp(.25rem, 1vw, .6rem); }

/* The tagline, off the photograph at last, with the board that resolves into
   real destinations as it scrolls up. */
.tagband__board { max-width: min(100%, 760px); }
.tagband h1 { margin: 0; }
@media (max-width: 620px) {
  .tagband h1 { font-size: clamp(1.6rem, 8.5vw, 2.4rem); }
}

/* The line that explains the tagline now sits under it, where it is an answer
   rather than a caption on a photograph. */
.tagband__sub { max-width: 46ch; margin: 0; }
.tagband p + p { margin-top: clamp(.6rem, 1.5vw, 1rem); }

/* With the standing paragraph gone from the hero, the caption naming the room
   you are looking at moves up beside the buttons. */
.hero__foot [data-hero-caption] { align-self: end; }

/* A badge is not a photograph. `.gallery img { object-fit: cover }` is written
   after `.gallery--contain img` and carries the same weight, so it won the tie
   and cropped the Superhost badge to its middle. Two classes settle it. */
.gallery.gallery--contain img { object-fit: contain; }

/* The badge has its own white ground. Sat on a grey tile inside a border it
   read as a box pasted inside a box — so the tile takes the badge's white,
   the border goes, and the whole thing is one clean card. It is also only
   174 px wide, so it is not stretched past about twice that. */
.gallery.gallery--contain button { background: var(--paper); border: 0; }
.gallery.gallery--contain img { max-width: 360px; margin-inline: auto; }
/* the grey was never the tile: it was the <img> loading placeholder (8% ink)
   showing through the image's own padding around the badge */
.gallery.gallery--contain img { background: transparent; }

/* ---------------------------------------------------------------------------
   Unit strip — one photograph per unit, swiped sideways. It scrolls inside
   itself, so the page never grows wider than the screen.
   ------------------------------------------------------------------------- */
.strip__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; flex-wrap: nowrap; margin-bottom: clamp(.75rem, 2vw, 1.1rem);
}
.strip__head .btn { white-space: nowrap; }
.strip {
  display: flex;
  gap: clamp(.6rem, 1.5vw, 1rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: 0 var(--gutter) .75rem;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: thin;
  cursor: grab;
}
.strip.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.strip.is-dragging .strip__card { pointer-events: none; }
/* owner: Airbnb badge, Traveloka and tiket.com side by side, with ratings */
/* owner: Airbnb, Traveloka and tiket.com boxes the same as the Google ones — same frame, same logo height, same size */
.proofrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; align-items: stretch; }
.proofrow .gallery { display: grid; grid-template-columns: 1fr; margin: 0; }
.proofrow .badge-link, .otacard { border: var(--seam) solid var(--ink); background: var(--paper); padding: 1.1rem 1.2rem; display: grid; gap: .1rem; align-content: start; color: var(--ink); }
.proofrow .badge-link:hover { background: var(--yellow); }
.proofrow .badge-link__img { aspect-ratio: auto; height: 3rem; place-items: center start; background: transparent; margin-bottom: .6rem; }
.proofrow .badge-link__img img { width: auto; height: 3rem; max-width: 100%; padding: 0; object-fit: contain; }
.proofrow .badge-link__label { padding-top: .6rem; border-top: var(--seam) solid var(--rule); font-size: var(--t-small); }
.otacard__logo { height: 3rem; width: auto; max-width: 70%; object-fit: contain; justify-self: start; margin-bottom: .6rem; }
.otacard__row { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; padding: .6rem 0; border-top: var(--seam) solid var(--rule); color: var(--ink); text-decoration: none; font-size: var(--t-small); font-weight: 600; }
.otacard__score { white-space: nowrap; font-weight: 700; }
.otacard__score small { font-weight: 400; color: var(--ink-70); }
.strip__meta { display: block; margin-top: .15rem; font-size: var(--t-micro); letter-spacing: .04em; color: var(--ink-70); }
.strip__card {
  flex: 0 0 min(70vw, 280px);
  scroll-snap-align: start;
  display: grid; gap: .3rem; align-content: start;
  color: var(--ink); text-decoration: none;
}
.strip__media {
  display: block; aspect-ratio: 4 / 5; overflow: hidden;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}
.strip__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); -webkit-user-drag: none; user-select: none; }
.strip__card:hover .strip__media img { transform: scale(1.03); }
.strip__name {
  font-family: var(--display); font-weight: 500; font-stretch: 125%;
  text-transform: uppercase; font-size: 1rem; line-height: 1.1; margin-top: .25rem;
}
.strip__theme { font-size: var(--t-small); color: var(--ink-70); line-height: 1.3; }

/* The facts over the unit photograph were set in --ink-70: .unitband__facts
   comes later in the file than the white override and won the tie, so the
   line sat dark grey on a dark picture. Two classes settle it. */
.unithero__over .unithero__facts { color: color-mix(in srgb, #fff 85%, transparent); }

/* Dates are asked for at the top of a unit page, under the nameplate, not
   eight screens down. The form is the call to action, so it gets room. */
.unitband__book { margin-top: clamp(.5rem, 1.5vw, 1rem); max-width: 520px; }.unitband__book .reserve { max-width: none; }
.unitband__book .btn--book { min-height: 3.1rem; font-size: 1rem; }
/* on a desktop the dates sit beside the board, level with it, so the form is
   on the first screen of a laptop rather than just under it */
@media (min-width: 900px) {
  .unitband__in { align-items: start; }
  .unitband__book { margin-top: 0; }
}

/* Desktop: the description reads first, the dates follow (owner's call). The
   band's .stack spaces children with margin-top on the second DOM child,
   which would land on the wrong element once reordered — so here the column
   spaces itself with gap instead. Phones keep the DOM order: dates stay on
   the first screen there. */
@media (min-width: 900px) {
  .unitband__main { display: flex; flex-direction: column; gap: clamp(1rem, 2.5vw, 1.5rem); }
  .unitband__main.stack > * + * { margin-top: 0; }
  .unitband__blurb { order: -1; }
}

/* the capacity line runs the full width instead of breaking every few words */
.capline { max-width: none; }
/* the rate notes run the page column's full width too, not a narrow measure */
.wrap.unitnotes { max-width: var(--maxw); }

/* Tagline band rhythm. `.tagband h1 { margin: 0 }` and the paragraphs'
   margin:0 were cancelling the band's .stack spacing, so the eyebrow, the
   headline, the line under it and the paragraph all sat on top of each other.
   Two classes each, so these win over both. */
.tagband .eyebrow + h1 { margin-top: clamp(.75rem, 1.6vw, 1.1rem); }
.tagband .tagband__sub { margin-top: clamp(1.4rem, 3.2vw, 2.25rem); max-width: 54ch; }
.tagband .tagband__body { margin: clamp(.9rem, 2vw, 1.25rem) 0 0; max-width: 54ch; }

/* The Superhost badge as a link to the Airbnb profile: the same clean white
   card, with a line underneath saying where it goes. */
.badge-link { display: grid; gap: .6rem; color: var(--ink); text-decoration: none; }
.badge-link__img { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--paper); overflow: hidden; }
.badge-link__img img { width: 100%; height: 100%; max-width: 360px; object-fit: contain; padding: clamp(1rem, 3vw, 2rem); background: transparent; }
.badge-link__label { font-size: var(--t-small); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.badge-link:hover .badge-link__label { text-decoration: underline; text-underline-offset: .2em; }

/* OTA listings: a footnote, not a call to action */
.rev__also { margin: 0; font-size: var(--t-small); color: var(--ink-70); }
.rev__also a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }

/* Quiet Google-review quotes on /superhost — no carousel, no stars, no
   avatars, no quotation-mark glyphs. Just the text and a small credit line. */
.quoteband__eyebrow { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quoteband__grid {
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.5rem) clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 720px) { .quoteband__grid { grid-template-columns: 1fr 1fr; } }
.quoteband__item { padding-top: 1.1rem; border-top: var(--seam) solid var(--ink-70); }
.quoteband__text {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--body);
  font-style: normal;
  font-weight: 400;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.5;
}
.quoteband__by { margin: .75rem 0 0; font-size: var(--t-small); color: var(--ink-70); }
.quoteband__by a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }

/* ---------------------------------------------------------------------------
   Phone menu, take two. It was a cream panel exactly as tall as its links,
   hanging over a cream page — the booking form showed straight through under
   it and it read as more page, not as a menu. Now it is its own screen: Ink
   from the bar down, links in the display face, the page frozen behind it.
   ------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .masthead__nav {
    position: fixed;
    top: 55px;                        /* the 54px bar plus its rule */
    bottom: 0;
    inset-inline: 0;
    background: var(--ink);
    color: var(--paper);
    border-bottom: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.25rem var(--gutter) calc(1.75rem + env(safe-area-inset-bottom, 0px));
  }
  .masthead__nav .navlink {
    color: var(--paper);
    font-family: var(--display);
    font-weight: 500;
    font-stretch: 125%;
    text-transform: uppercase;
    letter-spacing: .01em;
    font-size: clamp(1.3rem, 6vw, 1.7rem);
    padding-block: 1rem;
    border-bottom: var(--seam) solid rgba(255, 255, 255, .18);
  }
  .masthead__nav .navlink[aria-current='page'] { color: var(--yellow); }
  .masthead__nav .btn { margin-top: 1.75rem; min-height: 3.1rem; }
  .navtoggle[aria-expanded='true'] { background: var(--ink); color: var(--paper); }
  body.nav-open .wafab,
  body.nav-open .bookbar { display: none; }
}
/* freeze the page behind the open phone menu from <body>, which hands the
   overflow to the viewport — the sticky header keeps its place on screen */
@media (max-width: 860px) {
  body.nav-open { overflow: hidden; }
}

/* ---------------------------------------------------------------------------
   Personalized picks (draft). Reuses the chip row and the unit strip.
   ------------------------------------------------------------------------- */
.picks__chips { margin-top: clamp(.5rem, 2vw, 1rem); }
.picks__chips .chip { white-space: nowrap; text-decoration: none; }
.picks__n { margin-left: .4em; opacity: .55; font-variant-numeric: tabular-nums; }
.picks__cat { scroll-margin-top: 70px; }
.picks__head { margin-bottom: clamp(.75rem, 2vw, 1.1rem); }
.picks__head h2 { margin: 0; }
.picks__desc { margin: .35rem 0 0; max-width: 62ch; color: var(--ink-70); }

/* a card can say what makes it special — the same black block the site uses
   for type over a photograph */
.strip__media { position: relative; }
.strip__label {
  position: absolute; left: .5rem; top: .5rem;
  background: #000; color: #fff;
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: .4em .55em .35em; line-height: 1;
}

/* ---------------------------------------------------------------------------
   Share a unit. One quiet button by the dates; the phone's share sheet does
   the rest. On a laptop a two-line menu opens under it.
   ------------------------------------------------------------------------- */
.unitband__bookhead { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: nowrap; }
.sharewrap { position: relative; display: inline-flex; flex: 0 0 auto; }
.sharebtn {
  display: inline-flex; align-items: center; gap: .4rem;
  background: transparent; color: var(--ink);
  border: var(--seam) solid var(--ink);
  padding: .45rem .7rem; cursor: pointer; white-space: nowrap;
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.sharebtn:hover { background: var(--ink); color: var(--paper); }
.bookbar__share { background: transparent; color: inherit; cursor: pointer; padding: 0; }
.sharemenu {
  position: absolute; right: 0; top: calc(100% + .35rem); z-index: 90;
  display: grid; min-width: 13rem;
  background: var(--paper); color: var(--ink);
  border: var(--seam) solid var(--ink); box-shadow: 0 10px 24px rgba(20, 19, 26, .18);
}
.sharemenu a, .sharemenu button {
  display: block; text-align: left; padding: .75rem .9rem;
  font: inherit; font-size: var(--t-small); font-weight: 600;
  color: inherit; text-decoration: none; background: none; border: 0; cursor: pointer;
}
.sharemenu > * + * { border-top: var(--seam) solid var(--rule); }
.sharemenu a:hover, .sharemenu button:hover { background: var(--yellow); }
/* in the booking bar the menu opens upward — the bar sits on the screen's edge */
.bookbar .sharemenu { top: auto; bottom: calc(100% + .5rem); }

/* The booking bar gained a share icon. The name block now gives way cleanly
   (it shrinks and truncates instead of sliding under the icons), and on a
   narrow phone the button tightens and the meta line steps aside. */
.bookbar__id { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.bookbar__meta { display: block; overflow: hidden; text-overflow: ellipsis; }
.bookbar__actions { gap: .35rem; }
@media (max-width: 420px) {
  .bookbar { gap: .45rem; }
  .bookbar__wa { width: 2.35rem; height: 2.35rem; }
  .bookbar .btn { padding: .65em .7em; font-size: .72rem; letter-spacing: .06em; }
}

/* ---------------------------------------------------------------------------
   Personalized picks: filtered by who is coming.
   ------------------------------------------------------------------------- */
.picks__filter { margin-top: clamp(.5rem, 2vw, 1rem); display: grid; gap: .6rem; }
.strip__card[hidden], .picks__cat[hidden] { display: none !important; }
.strip__label--extra { top: auto; bottom: .5rem; background: var(--yellow); color: var(--ink); }
.picks__chips .chip.is-empty { opacity: .38; cursor: default; }
.fitband__more { margin: 0; }
.fitband__more a { color: inherit; font-size: var(--t-small); font-weight: 600; text-underline-offset: .2em; }

/* only one of each unit: a nudge above the dates, not an alarm */
.unitband__only { margin: 0; font-size: var(--t-small); font-weight: 600; color: var(--ink); }
.unitnotes .parking { font-size: .9rem; color: var(--ink); font-weight: 600; }

/* unit card: type and size as tags, capacity as its own plain line below */
.ucard__cap { flex-basis: 100%; margin: .25rem 0 0; font-size: var(--t-small); color: var(--ink-70); }

/* room list: the bed first, what comes with it as small labels underneath */
.room__list li { display: grid; gap: .35rem; }
.room__main { font-weight: 600; }
.room__feats { display: flex; flex-wrap: wrap; gap: .3rem; }
.room__feat { font-size: var(--t-micro); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: .25em .5em; border: var(--seam) solid var(--rule); color: var(--ink-70); line-height: 1.2; }
.room__list { gap: .65rem; }
/* share belongs to the unit, not to the dates: it sits under the nameplate */
.unitband__share { align-self: start; margin-top: .35rem; }

/* room list with bed icons: icons with size and people on the left, the words beside */
.room__list li.has-beds { display: flex; gap: .75rem; align-items: flex-start; padding-left: 0; }
.room__list li.has-beds::before { display: none; }
.room__icons { display: flex; gap: .35rem; flex: 0 0 auto; }
.bedic { display: grid; justify-items: center; gap: .1rem; min-width: 3.1rem; }
.bedic svg { width: 2.4rem; height: 2.4rem; color: var(--ink); }
.bedic__sz, .bedic__ppl { font-size: .62rem; font-weight: 700; letter-spacing: .02em; color: var(--ink-70); white-space: nowrap; text-align: center; line-height: 1.2; }
.room__text { display: grid; gap: .35rem; min-width: 0; padding-top: .35rem; }

/* share sits on the unit photograph, bottom right, like the photo count at the top */
.hero__share { position: absolute; right: clamp(.75rem, 3vw, 1.5rem); bottom: clamp(.75rem, 3vw, 1.5rem); z-index: 3; }
.hero__share .sharebtn { background: rgba(0, 0, 0, .72); color: #fff; border-color: rgba(255, 255, 255, .3); }
.hero__share .sharebtn:hover { background: #000; }
.hero__share .sharemenu { top: auto; bottom: calc(100% + .5rem); }

/* ---------------------------------------------------------------------------
   Rooms & beds: a summary, then one plain block per room.
   ------------------------------------------------------------------------- */
.rooms__sum { display: flex; flex-wrap: wrap; gap: .55rem 1.3rem; padding-bottom: 1rem; border-bottom: var(--seam) solid var(--rule); }
.rooms__sum span { display: inline-flex; align-items: center; gap: .45rem; font-size: .95rem; }
.rooms__sum svg { width: 1.3rem; height: 1.3rem; flex: 0 0 1.3rem; }
.rooms { display: grid; }
@media (min-width: 900px) { .rooms { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 4vw, 3.5rem); } }
.rblock { padding: .95rem 0; border-bottom: var(--seam) solid var(--rule); display: grid; gap: .45rem; align-content: start; }
.rblock__name { margin: 0; font-size: var(--t-micro); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.rblock__name span { font-weight: 500; letter-spacing: .06em; color: var(--ink-70); }
.rline { display: flex; align-items: center; gap: .65rem; margin: 0; font-weight: 400; }
.rline svg { width: 1.3rem; height: 1.3rem; flex: 0 0 1.3rem; color: var(--ink); }
.rline svg.bedsvg { width: 2.2rem; height: 2.2rem; flex-basis: 2.2rem; }
.rother { margin: 0; color: var(--ink-70); font-size: .92rem; }
/* owner: email not too prominent on the contact page */
.contact__mail { margin: 0; font-size: var(--t-small); color: var(--ink-70); }
.contact__mail a { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
/* owner: all proof boxes the same height — the Airbnb link fills its column like the others */
.proofrow > .gallery { height: 100%; grid-template-rows: 1fr; align-content: stretch; }
.proofrow > .gallery > .badge-link { height: 100%; }
/* owner: Airbnb card in the same frame; logos sit on a transparent ground */
a.otacard--link { text-decoration: none; }
a.otacard--link:hover { background: var(--yellow); }
.otacard__note { padding-top: .6rem; border-top: var(--seam) solid var(--rule); font-size: var(--t-small); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
/* owner: theme name and tags close together — paragraphs in the card body carry no default margin */
.ucard__body > p, .ucard__theme, .ucard__body .eyebrow { margin: 0; }

/* owner: no grey behind the logos — the site-wide image placeholder showed through the transparent PNGs */
.otacard__logo { background: transparent; }
/* owner: order Traveloka, tiket.com, then Airbnb */
.proofrow > .otacard { order: 1; }
.proofrow > .otacard--link { order: 2; }
/* owner: quotes inside the Google box — a little air above them, lines on the cream ground */
.quoteband--inline { margin-top: clamp(1rem, 3vw, 2rem); }
/* owner: deep links to a unit's rooms (#kamar) land below the sticky header */
.roomsec { scroll-margin-top: 4.5rem; }
/* owner: the end screen was too full on a phone and the unit card got cut off —
   content starts at the top and the neighbour cards use a shorter photo */
.lightbox__end { align-content: start; padding-block: clamp(1.25rem, 5vw, 2rem); }
.lightbox__rel .ucard__media { aspect-ratio: 4 / 3; }
/* owner (menu "overline" on phones): the long "Personalized picks" link on Your stay
   could not wrap (.btn is nowrap) and pushed the page — and the open menu — past the
   screen edge. It may wrap and never be wider than its column. */
.btn[data-guests-picks] { white-space: normal; max-width: 100%; text-align: center; line-height: 1.35; }
/* owner (16 Sep 2026): the board's first course is the real logo — each square fills its tile */
.fb-cell > .fb-logo { width: 100%; height: 100%; transform: none; }
.fb-logo svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.fb-cell--flipping > .fb-logo { animation: fb-flap 150ms cubic-bezier(.35, .1, .2, 1); }
/* owner (designer note): the hero caption stays on one line */
.hero [data-hero-caption] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* owner (16 Sep 2026): next to the real logo tiles the city name read thin —
   the board's letters take a heavier weight of the same face */
/* owner (16 Sep 2026): city letters must fill the square like the logo tiles do
   (logo glyph ≈ 93% tall, 80–90% wide). Archivo narrowed to 72% width so a
   cap-height of ~88% still leaves M and W inside the tile. */
.flipboard .fb-cell { font-weight: 800; font-stretch: 72%; font-size: calc(var(--unit) * 1.28); }
/* owner (16 Sep 2026): board letters in Optic, the logo's own face, drawn to the
   logo's proportions (stem ≈ 21% and O ≈ 91% of cap height → wdth 140, wght 520;
   cap ≈ 90% of the tile). M and W are narrowed so they stay inside the square.
   TRIAL cut: fine on the noindex preview, needs a licence before going live. */
@font-face {
  font-family: 'OpticBoard';
  src: url('/fonts/optic-board-trial.woff2') format('woff2');
  font-weight: 400 900;
  font-stretch: 50% 175%;
  font-display: block;
}
.flipboard .fb-cell {
  font-family: 'OpticBoard', var(--display);
  font-weight: 520;
  font-stretch: 140%;
  font-variation-settings: 'wdth' 140, 'wght' 520;
  font-size: calc(var(--unit) * 1.15);
}
/* same size as the other letters (so M and W sit on the same baseline), only narrower */
.flipboard .fb-cell--wide { font-variation-settings: 'wdth' 50, 'wght' 520; }
/* Optic's line box sits the caps low; lift them to the tile's centre (measured). */
.flipboard .fb-cell > span:not(.fb-logo) { transform: translateY(-0.1em); }
.flipboard .fb-cell--flipping > span:not(.fb-logo) { animation-name: fb-flap-optic; }
@keyframes fb-flap-optic {
  0%   { transform: translateY(-0.1em) rotateX(0deg); }
  49%  { transform: translateY(-0.1em) rotateX(-86deg); opacity: .55; }
  50%  { transform: translateY(-0.1em) rotateX(86deg);  opacity: .55; }
  100% { transform: translateY(-0.1em) rotateX(0deg);   opacity: 1; }
}

/* ============================================================================
   Home rebuild, 16 Sep 2026 — designer mockup (Opsi 2 pillars, the
   interactive sign in place of the departures table). Every rule below is
   home-page-only unless noted; other pages keep the components above as
   they were.
   ========================================================================= */

/* -------------------------------------------------------------- 1. dates */
/* "Pick your dates.": bumped from an h3 to h1 scale, wrapped to two lines
   like the mockup by narrowing the box rather than hard-coding a <br> that
   would only fit one language. */
.datesband__h { max-width: 11ch; }

/* --------------------------------------------------- 2. somewhere else */
/* Three zones on one row: the first headline half top-left, the photo pile
   centred, the second half bottom-right — the h1 is `display:contents` so
   its two spans and the pile (a true sibling) can share one grid without
   nesting a div inside a heading. */
/* minmax(0, 1fr), not a bare 1fr: a bare 1fr track will not shrink below its
   content's own preferred width, so "ANY TIME." at hero scale pushed the
   third column — and the whole page — wider than the viewport. */
.splithero { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(1rem, 4vw, 2.5rem); }
.splithero__h1 { display: contents; }
.splithero__a, .splithero__b { display: block; }
.splithero__a { grid-column: 1; grid-row: 1; justify-self: start; align-self: start; }
.splithero__media { grid-column: 2; grid-row: 1 / span 2; }
.splithero__b { grid-column: 3; grid-row: 2; justify-self: end; align-self: end; }
@media (max-width: 760px) {
  .splithero { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 1.25rem; }
  .splithero__a { grid-column: 1; grid-row: 1; justify-self: center; order: 1; }
  .splithero__media { grid-column: 1; grid-row: 2; order: 2; }
  .splithero__b { grid-column: 1; grid-row: 3; justify-self: center; order: 3; }
}

.splithero__media { display: flex; align-items: center; justify-content: center; gap: clamp(.5rem, 2vw, 1rem); }
.splithero__frames { position: relative; width: clamp(11rem, 24vw, 20rem); aspect-ratio: 4 / 3; }
.splithero__frame {
  position: absolute; inset: 0;
  border: 6px solid var(--paper);
  box-shadow: 0 14px 30px rgba(20, 19, 26, .28);
  overflow: hidden;
  transition: transform .45s var(--ease), opacity .3s var(--ease), z-index 0s;
}
.splithero__frame img { width: 100%; height: 100%; object-fit: cover; }
/* stacked, slightly rotated pile — position 0 is the active photo on top */
.splithero__frame[data-pos="0"] { transform: rotate(-2.5deg); z-index: 3; opacity: 1; }
.splithero__frame[data-pos="1"] { transform: rotate(3.5deg) translate(.5rem, .5rem); z-index: 2; opacity: 1; }
.splithero__frame[data-pos="2"] { transform: rotate(-5deg) translate(-.4rem, .8rem); z-index: 1; opacity: 1; }
.splithero__frame[data-pos]:not([data-pos="0"]):not([data-pos="1"]):not([data-pos="2"]) { opacity: 0; z-index: 0; }
.pilearrow {
  flex: 0 0 auto; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--yellow); color: var(--ink); border: 0; cursor: pointer;
  display: grid; place-items: center;
}
.pilearrow svg { width: 1.1rem; height: 1.1rem; }
.pilearrow:hover { background: var(--ink); color: var(--yellow); }

.splithero__cols { margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.splithero__sub { margin: 0; }
/* a short descriptive line inside the H1 (a visible fact in the heading),
   set as a small eyebrow label so "Somewhere else," still reads first */
.splithero__kicker { display: block; margin-bottom: .9em; }
.splithero__body { margin: 0; }

/* ------------------------------------------------------- 3. reasons grid */
.reasonsband__h, .reasonsband > .wrap > .t-outline { margin-bottom: 0; }
.reasons { display: grid; gap: clamp(1.75rem, 3.5vw, 3rem); grid-template-columns: 1fr; }
@media (min-width: 640px)  { .reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .reasons { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.reason { display: grid; gap: .5rem; align-content: start; }
.reason__icon svg { width: 2.1rem; height: 2.1rem; color: var(--fg); }
.reason__title { margin: 0; font-family: var(--body); font-weight: 700; font-size: 1.05rem; line-height: 1.3; text-transform: none; letter-spacing: 0; }
.reason__short { margin: 0; color: var(--ink-70); }
.reason__full { margin: .2rem 0 0; }
.reason__full p { margin: 0; }
.reason__more {
  justify-self: start; display: inline-flex; align-items: center; gap: .3rem;
  background: none; border: 0; padding: .2rem 0; cursor: pointer;
  font-size: var(--t-small); font-weight: 700; letter-spacing: .04em; color: inherit;
}
.reason__chev { width: .85rem; height: .85rem; transition: transform .2s var(--ease); }
.reason__more[aria-expanded="true"] .reason__chev { transform: rotate(180deg); }

/* --------------------------------------------------- 4. who is coming */
.fitband--centered .fitband__center { justify-items: center; text-align: center; }
.fitband--centered .steppers { justify-content: center; }
.fitband__answer { flex-direction: column; }
.fitband__big { margin: 0; font-family: var(--display); font-weight: 500; font-stretch: 125%; text-transform: uppercase; font-size: clamp(1.2rem, 3vw, 1.6rem); }
.fitband__big strong { display: inline-block; font-size: clamp(2.6rem, 8.5vw, 4.75rem); line-height: .85; margin: 0 .1em; vertical-align: -.08em; }
.fitband__extra { margin: 0; font-size: var(--t-body); }
.fitband__extra strong { font-weight: 700; }
.fitband__extra em, .fitband__big em, .fitband__none em { font-style: italic; }
.fitband__none { margin: 0; }

/* ------------------------------------------------ 5. the interactive sign */
.signband__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 800px) { .signband__grid { grid-template-columns: 1.05fr 1fr; } }
.signband__h { margin: 0; color: var(--yellow); }
.signbox { display: grid; gap: clamp(.7rem, 2vw, 1rem); justify-items: start; }
.signbox__buildings { display: flex; gap: .5rem; flex-wrap: wrap; width: 100%; }
.signbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  background: var(--paper); color: var(--ink); border: 2px solid var(--ink);
  padding: .55rem .9rem; font-weight: 700; font-size: var(--t-small); letter-spacing: .06em;
  cursor: pointer; flex: 1 1 0;
}
.signbtn svg { width: 1.1rem; height: 1.1rem; }
.signbtn:hover { background: var(--yellow); }
.signbtn[aria-pressed="true"] { background: var(--flamingo); border-color: var(--flamingo); }
.signplate {
  display: flex; align-items: center; gap: .7rem; width: 100%;
  background: var(--yellow); color: var(--ink); border: 0; cursor: pointer;
  padding: clamp(.9rem, 2.5vw, 1.4rem) clamp(1rem, 3vw, 1.6rem);
}
.signplate:hover { background: color-mix(in srgb, var(--yellow) 82%, #fff); }
.signplate__arrow {
  flex: 0 0 auto; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: #000; color: var(--yellow); display: grid; place-items: center; font-size: 1.2rem; line-height: 1;
}
.signplate__city {
  font-family: var(--display); font-weight: 500; font-stretch: 125%; text-transform: uppercase;
  font-size: clamp(1.5rem, 5vw, 2.4rem); line-height: 1;
}
.signplate__city.is-flip { animation: sign-flip 260ms var(--ease); }
@keyframes sign-flip {
  0%   { transform: translateY(0) rotateX(0); opacity: 1; }
  45%  { transform: translateY(-6%) rotateX(-80deg); opacity: .4; }
  55%  { transform: translateY(-6%) rotateX(80deg); opacity: .4; }
  100% { transform: translateY(0) rotateX(0); opacity: 1; }
}
.signchips { display: flex; gap: .5rem; flex-wrap: wrap; width: 100%; }
.signchip {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  background: var(--minsk); color: var(--paper);
  padding: .5rem .8rem; font-weight: 700; font-size: var(--t-small); letter-spacing: .03em;
}
.signchip:last-child { flex: 1 1 0; }
.signchip svg { width: 1.1rem; height: 1.1rem; }
.signchip em { font-style: italic; }
.signlink { margin: 0; }
.signlink a { color: var(--yellow); font-weight: 700; text-decoration: underline; text-underline-offset: .2em; }

/* ----------------------------------------------- 6. three addresses */
.locationsband__h { text-align: center; margin-inline: auto; }
.locationsband__grid { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.locationsband__body { max-width: 62ch; margin-inline: auto; text-align: center; }

/* ---------------------------------------------- 7. what guests wrote */
.revband--paper { padding-block: clamp(3rem, 7vw, 6rem); }
.revband__sheet {
  position: relative;
  max-width: 900px;
  margin-inline: auto;
  background: var(--cream);
  color: var(--ink);
  padding: clamp(2.25rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4rem);
  text-align: center;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .25);
  /* a light paper grain, drawn with feTurbulence — no external image */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* two more skewed sheets peeking out above, for the stacked-paper edge */
.revband__sheet::before, .revband__sheet::after {
  content: ''; position: absolute; left: 5%; right: 5%; height: 16px; background: var(--cream); z-index: -1;
}
.revband__sheet::before { top: -8px; transform: rotate(-.7deg); opacity: .85; }
.revband__sheet::after  { top: -15px; transform: rotate(.9deg); opacity: .6; }
.revband__script {
  font-family: 'CaveatBrush', var(--display);
  font-weight: 400; text-transform: none; letter-spacing: 0;
  font-size: clamp(2.4rem, 7vw, 4.25rem); line-height: 1;
  color: var(--minsk); margin: 0;
}
.revband__body { max-width: 56ch; margin: clamp(.75rem, 2vw, 1.25rem) auto 0; }
.revband__overall { justify-content: center; margin-top: 1rem; }
.revband__sheet .revgrid { margin-top: clamp(1.5rem, 3vw, 2.25rem); text-align: left; }

/* -------------------------------------------------------- 9. footer */
.footer__tagline {
  font-family: var(--body); font-weight: 700; text-transform: uppercase;
  letter-spacing: .02em; font-size: .95rem; margin: .65rem 0 .4rem; color: var(--paper);
}

/* the paper sheet is light: its cards' muted labels follow ink, not the minsk flood's white */
.revband__sheet { --fg: var(--ink); }
/* phones: keep "TANGGALMU." / "DATES." whole instead of dropping the full stop to its own line */
@media (max-width: 760px) {
  .datesband__h { max-width: none; font-size: min(10vw, 3rem); }
}

/* owner (17 Sep 2026): reasons cards in one text colour, not grey + black */
.reason__short { color: inherit; }
.reason__short[hidden] { display: none; }
/* phones: the rotated photos hang below their box — give "ANY TIME." room */
@media (max-width: 760px) {
  .splithero__media { margin-bottom: 1.75rem; }
}
/* Personalized picks filter band, on minsk like the home "who is coming" */
.picks__kids { margin: 0; max-width: 52ch; font-size: var(--t-small); line-height: 1.5; opacity: .85; }
.picks__band .picks__chips { justify-content: safe center; margin-top: .25rem; max-width: 100%; }
.picks__band .chip { color: var(--paper); border-color: var(--paper); background: transparent; }
.picks__band .chip:hover { background: var(--paper); color: var(--ink); }

.reserve__check { margin: 0; font-size: var(--t-small); font-weight: 700; }
.kidswarn { display: grid; gap: .6rem; justify-items: center; text-align: center; max-width: 60ch; margin-inline: auto; }
.data-kidswarn-left, .kidswarn__soft { margin: 0; font-size: var(--t-small); }
.kidswarn__strong { margin: 0; font-size: var(--t-small); line-height: 1.5; opacity: .9; }
.kidswarn__strong.is-over { color: #c1121f; font-weight: 700; opacity: 1; }
.kidswarn[hidden], .kidswarn [hidden] { display: none; }
[data-guests] .kidswarn { justify-items: start; text-align: left; margin-inline: 0; }
.fitband .kidswarn__strong.is-over { color: #ff9a9a; }
.facility__link { font-weight: 700; text-decoration: underline; text-underline-offset: .2em; }
@media (min-width: 900px) { .cols.facilities { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: clamp(2rem, 4vw, 3rem); } }
@media (min-width: 620px) and (max-width: 899px) { .cols.facilities { grid-template-columns: repeat(2, minmax(0, 1fr)); } }