/* Yutori homepage. Ivory ground, charcoal ink; olive, clay and terracotta only as small details. */
@font-face { font-family: 'Fixel Text'; src: url('fonts/FixelText-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Fixel Text'; src: url('fonts/FixelText-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }

:root {
  --ivory: #F3EFE6;
  --ivory-2: #EBE5D8;
  --ink: #252521;
  --ink-2: #4A4A42;
  --olive: #666B4E;
  --clay: #C6AA8C;
  --terra: #A6654E;
  --terra-ink: #8E513C;
  --earth: #3F4336;
  /* sampled from the photographs: meadow and ridges, forest edge, the terrace after dark */
  --meadow: #5C6149;
  --forest: #3A3F31;
  --night: #2E3229;
  --on-dark-2: #E3DCCB;  /* secondary text on olive, 4.7:1 and up */
  --btn: #666B4E;        /* primary buttons: Yutori olive with ivory text (4.9:1) */
  --btn-hover: #3F4336;  /* deeper olive / earth for hover and pressed */
  --night-ink: #EFEADF;
  --serif: 'Source Serif 4', 'Iowan Old Style', Georgia, serif;
  --sans: 'Fixel Text', 'Segoe UI', system-ui, sans-serif;
  --m: clamp(20px, 5.4vw, 88px);
  --gap: 24px;
  --hd: 68px;
  --sec: clamp(104px, 11.5vw, 176px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --hair: rgba(198, 170, 140, 0.7);
}

* { box-sizing: border-box; }
html { background: var(--ivory); color: var(--ink); -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hd) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--ivory); font: 400 17px/1.62 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-kerning: normal; }
::selection { background: var(--clay); color: var(--ink); }
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: var(--clay); }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; }
p { margin: 0 0 1em; text-wrap: pretty; }
h1, h2, h3 { margin: 0; font-weight: 400; }
button { font: inherit; color: inherit; }
html { scrollbar-color: var(--clay) var(--ivory); }

.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--btn); color: var(--ivory); padding: 10px 16px; }
.skip:focus { top: 12px; }

.wrap { padding-inline: var(--m); max-width: 1720px; margin-inline: auto; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.grid > * { grid-column: var(--col, 1 / -1); }
@media (max-width: 899px) { .grid > * { grid-column: 1 / -1; } }

/* type */
.statement, .h-section, .h-room, .hero-line, .closing-line, .done-line, .moment figcaption {
  font-family: var(--serif); font-optical-sizing: auto; letter-spacing: -0.012em; text-wrap: balance; font-weight: 400;
}
.statement { font-size: clamp(2.05rem, 4.3vw, 3.9rem); line-height: 1.08; }
.h-section { font-size: clamp(2rem, 3.7vw, 3.35rem); line-height: 1.08; }
.h-room { font-size: clamp(1.7rem, 2.75vw, 2.5rem); line-height: 1.12; }
h3 { font: 500 1.05rem/1.4 var(--sans); }
.muted { color: var(--ink-2); }
.small { font-size: 0.875rem; }
.label { font-size: 0.84rem; line-height: 1.4; color: var(--olive); margin-top: 12px; font-variant-numeric: tabular-nums; }
.head-text { align-self: end; max-width: 46ch; }
.lead-text { font-size: 1.2rem; line-height: 1.5; color: var(--ink-2); }

/* header */
.hd { position: fixed; inset: 0 0 auto 0; z-index: 30; height: var(--hd); display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-inline: var(--m); background: var(--ivory); border-bottom: 1px solid transparent; transition: border-color 0.4s; }
.hd.is-scrolled { border-bottom-color: var(--hair); }
.hd-logo img { height: 30px; width: auto; }
.hd-nav { display: flex; gap: clamp(18px, 2.2vw, 36px); font-size: 0.95rem; }
.hd-nav a, .hd-book { text-decoration: none; padding-block: 10px; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 6px) / 0 1px no-repeat; transition: background-size 0.5s var(--ease); }
.hd-nav a:hover, .hd-nav a[aria-current] { background-size: 100% 1px; }
.hd-nav a[aria-current] { color: var(--terra-ink); }
.hd-end { display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); font-size: 0.95rem; }
.hd-book { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px !important; background: var(--btn) !important; color: var(--ivory); font-weight: 500; text-decoration: none; transition: background-color 0.3s; }
.hd-book:hover, .hd-book:active { background: var(--btn-hover) !important; }
.lang { margin: 0; display: flex; gap: 8px; align-items: center; font-size: 0.9rem; letter-spacing: 0.02em; }
.lang span[aria-current] { font-weight: 500; }
.lang span[aria-hidden] { color: var(--clay); }
.lang a { text-decoration: none; color: var(--ink-2); padding: 10px 2px; }
.lang a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--clay); }
.hd-menu { display: none; background: none; border: 0; padding: 12px 0 12px 8px; cursor: pointer; font-size: 0.95rem; }
@media (max-width: 899px) {
  .hd-nav, .hd-end .lang { display: none; }
  .hd-menu { display: block; }
}
.menu { position: fixed; inset: 0; z-index: 40; background: var(--ivory); padding: calc(var(--hd) + 24px) var(--m) 40px; display: flex; flex-direction: column; gap: 32px; }
.menu[hidden] { display: none; }
.menu nav { display: flex; flex-direction: column; gap: 6px; }
.menu nav a { font-family: var(--serif); font-size: 2.1rem; line-height: 1.25; text-decoration: none; padding-block: 4px; }
.menu-close { position: absolute; top: 0; right: var(--m); height: var(--hd); background: none; border: 0; cursor: pointer; font-size: 0.95rem; }

/* hero */
.hero { margin-top: var(--hd); height: calc(100svh - var(--hd)); min-height: 560px; max-height: 1080px; display: grid; grid-template-columns: 5fr 7fr; }
.hero-copy { padding: 40px var(--m) clamp(40px, 6vh, 72px); display: flex; flex-direction: column; justify-content: flex-end; gap: 28px; }
.hero-line { font-size: clamp(2.5rem, 4.4vw, 4.3rem); line-height: 1.05; max-width: 13ch; }
.hero-go { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; text-decoration: none; font-size: 0.98rem; padding: 10px 0; }
.hero-go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform 0.6s var(--ease); }
.hero-go:hover svg { transform: translateY(4px); }
.hero-plate { margin: 0; position: relative; overflow: hidden; }
.hero-plate picture, .hero-plate img { width: 100%; height: 100%; }
.hero-plate img { object-fit: cover; object-position: 58% 40%; }
.label.on-photo { position: absolute; left: 20px; bottom: 16px; margin: 0; color: var(--night-ink); text-shadow: 0 1px 8px rgba(20, 20, 16, 0.5); }
@media (max-width: 899px) {
  .hero { display: block; height: calc(100svh - var(--hd)); max-height: none; position: relative; }
  .hero-plate { position: absolute; inset: 0; }
  .hero-copy { position: absolute; inset: auto 0 0 0; z-index: 1; color: var(--night-ink); padding: 120px var(--m) calc(32px + env(safe-area-inset-bottom)); background: linear-gradient(to top, rgba(26, 27, 22, 0.66), rgba(26, 27, 22, 0)); gap: 18px; }
  .hero-line { font-size: clamp(2.1rem, 9vw, 2.8rem); }
  .label.on-photo { top: 14px; bottom: auto; left: var(--m); }
}

/* sections */
.idea { padding-top: var(--sec); }
.idea-text { margin-top: 48px; max-width: 44ch; font-size: 1.08rem; }
.bleed { margin: var(--sec) 0 0; }
.bleed img { width: 100%; }
.bleed .label { padding-inline: var(--m); }
.room, .time, .gallery, .info, .location, .book { padding-top: var(--sec); }
.head { margin-bottom: clamp(48px, 6vw, 88px); row-gap: 24px; }
.bleed + .head { margin-top: clamp(48px, 6vw, 88px); }
.comp { align-items: start; row-gap: 40px; }
.comp + .comp { margin-top: clamp(64px, 8vw, 128px); }
.side { align-self: center; max-width: 46ch; }
.side.end { align-self: end; }
.side .h-room, .side .h-section { margin-bottom: 24px; }
.side h3 { margin: 32px 0 8px; }
.aside { align-self: end; color: var(--ink-2); max-width: 26ch; }
.facts { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--hair); }
.facts li { padding: 10px 0; border-bottom: 1px solid var(--hair); font-size: 0.97rem; }

/* plates: real proportions, never cropped; tall photos limited to the screen height */
.plate { margin: 0; margin-top: calc(var(--y, 0) * 0.62vw); width: min(100%, calc(86 * var(--vh, 1svh) * var(--ar))); justify-self: var(--al, start); }
.plate img, .plate video { width: 100%; background: var(--ivory-2); }
.plate.wide { width: 100%; }
@media (max-width: 899px) {
  .plate { margin-top: 0; width: 100%; }
  .plate.lead { width: calc(100% + 2 * var(--m)); margin-inline: calc(-1 * var(--m)); }
  .plate.lead .label { padding-inline: var(--m); }
  .plate.small { width: 64%; justify-self: end; }
  .comp > .plate.small:nth-child(odd) { justify-self: start; }
  .comp { row-gap: 32px; }
}
[data-zoom] { cursor: zoom-in; }

/* spreads: photos side by side at one shared height, like facing pages of a catalogue */
.spread { display: flex; justify-content: center; align-items: var(--al, center); gap: clamp(32px, 5vw, 96px); }
.head + .spread { margin-top: 0; }
.spread + .spread { margin-top: clamp(64px, 8vw, 136px); }
.plates { display: flex; align-items: flex-start; gap: var(--gap); min-width: 0; flex: 0 1 calc(var(--h) * var(--vh, 1svh) * var(--sum) + (var(--n) - 1) * var(--gap)); }
.plates .plate { flex: var(--ar) 1 0; min-width: 0; width: auto; margin: 0; justify-self: auto; }
.spread-text { flex: 0 1 36ch; min-width: 260px; }
.spread-text .h-room { margin-bottom: 24px; }
.spread-text p:last-child { margin-bottom: 0; }
.moment-line { font-family: var(--serif); font-size: clamp(1.15rem, 1.6vw, 1.45rem); line-height: 1.25; margin-top: 14px; max-width: 20ch; text-wrap: balance; }
.moment-wide .moment-line { max-width: none; margin-top: 16px; }
.time .bleed { margin-block: clamp(64px, 8vw, 136px); }
.time .spread + .bleed, .time .bleed + .spread { margin-top: 0; }
@media (max-width: 899px) {
  .spread { display: flex; flex-direction: column; align-items: stretch; gap: 28px; }
  .spread .spread-text { order: -1; min-width: 0; flex: none; }
  .plates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex: none; }
  .plates .plate:only-child, .plates .plate:first-child:nth-last-child(3) { grid-column: 1 / -1; }
  .moments .plates { gap: 28px 10px; }
  .moment-line { font-size: 1.1rem; margin-top: 10px; }
}

/* time at yutori: the ground follows the day */
.time { --day: 0; background: color-mix(in oklab, var(--night) calc(var(--day) * 100%), var(--forest)); color: var(--ivory); padding-bottom: var(--sec); }
.time .lead-text { color: var(--on-dark-2); }
.time .plate img, .time .plate video { background: rgba(243, 239, 230, 0.06); }
.moments { list-style: none; margin: 0 auto; row-gap: clamp(72px, 9vw, 136px); }
.moment { margin-top: calc(var(--y, 0) * 0.62vw); }
.moment figure { margin: 0; width: min(100%, calc(82 * var(--vh, 1svh) * var(--ar))); }
.moment.wide figure { width: 100%; }
.moment img, .moment video { width: 100%; background: rgba(198, 170, 140, 0.25); }
.moment figcaption { font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1.25; margin-top: 16px; max-width: 22ch; }
.time-cta { margin-top: clamp(80px, 9vw, 136px); }
@media (max-width: 899px) {
  .moment { margin-top: 0; }
  .moment figure { width: 82%; }
  .moment:nth-child(even) figure { margin-left: auto; }
  .moment.wide figure { width: calc(100% + 2 * var(--m)); margin-inline: calc(-1 * var(--m)); }
  .moment.wide figcaption { padding-inline: var(--m); }
}

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 28px; background: var(--btn); color: var(--ivory); border: 1px solid var(--btn); border-radius: 0; font: 500 1rem/1.2 var(--sans); text-decoration: none; cursor: pointer; transition: background-color 0.3s, border-color 0.3s, color 0.3s; }
.btn:hover, .btn:active { background: var(--btn-hover); border-color: var(--btn-hover); }
.btn.ghost { background: transparent; color: var(--btn); border-color: var(--btn); }
.btn.ghost:hover, .btn.ghost:active { background: var(--btn-hover); color: var(--ivory); border-color: var(--btn-hover); }
.link { background: none; border: 0; padding: 10px 0; color: var(--btn); text-decoration: underline; text-decoration-color: var(--clay); text-underline-offset: 0.22em; cursor: pointer; }

/* gallery: justified rows, every photo at its own proportions */
.g-grid { list-style: none; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 12px; }
.g-grid::after { content: ''; flex-grow: 1e4; }
.g-item { --h: clamp(150px, 22vw, 330px); flex: calc(var(--a, 0.46) * 100) 1 calc(var(--a, 0.46) * var(--h)); }
.g-item.tall { --a: 0.46; }
.g-item.square { --a: 0.8; }
.g-item.wide { --a: 2.17; }
.g-item button { display: block; width: 100%; padding: 0; border: 0; background: var(--ivory-2); cursor: zoom-in; }
.g-item img { width: 100%; transition: opacity 0.4s; }
.g-item button:hover img { opacity: 0.88; }
@media (max-width: 599px) { .g-item { --h: 220px; } .g-grid { gap: 8px; } }

/* essentials */
.info .grid { row-gap: 40px; }
.rows { margin: 0; border-top: 1px solid var(--hair); }
.rows div { display: grid; grid-template-columns: minmax(9rem, 2fr) 3fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--hair); }
.rows dt { color: var(--olive); font-size: 0.95rem; }
.rows dd { margin: 0; }
.info-side h3 { margin: 0 0 14px; }
.info-side h3 + .rows { margin-bottom: 48px; }
.rules { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.rules li { padding: 13px 0; border-bottom: 1px solid var(--hair); }
@media (min-width: 900px) { .info .h-section { grid-row: 1; } .info .rows[style] { grid-row: 2; } .info-side { grid-row: 2; } }

/* location */
.dist { display: flex; gap: 48px; margin: 28px 0 8px; }
.dist dt { color: var(--olive); font-size: 0.95rem; }
.dist dd { margin: 0; font-family: var(--serif); font-size: 1.6rem; }
.map { margin: 0; }
.map svg { width: 100%; height: auto; overflow: visible; }
.m-ridge { fill: none; stroke: var(--clay); stroke-width: 1.2; }
.m-ridge.b { opacity: 0.6; }
.m-route { fill: none; stroke: var(--olive); stroke-width: 1.2; stroke-dasharray: 3 5; }
.map text { font: 400 13px var(--sans); fill: var(--ink-2); }
.map .name { font: 400 22px var(--serif); fill: var(--ink); }
.m-town circle { fill: var(--ink-2); }
.m-home circle { fill: var(--ink); }
.m-time { fill: var(--olive) !important; font-size: 12px !important; }
.map figcaption { display: flex; gap: 16px; flex-wrap: wrap; font-size: 0.875rem; color: var(--olive); margin-top: 12px; }
.map-cell { align-self: center; }

/* booking */
.book-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 24px; margin-bottom: clamp(48px, 5vw, 72px); }
.book-head h2 { grid-column: 1 / 7; }
.book-price { grid-column: 8 / 13; align-self: end; }
.price { font-size: 1.05rem; margin-bottom: 10px; }
.price strong { font: 400 clamp(1.7rem, 2.6vw, 2.2rem)/1.1 var(--serif); margin-inline: 4px; }
.book-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 48px; align-items: start; }
.cal { grid-column: 1 / 8; }
.req, .done { grid-column: 9 / 13; }
@media (max-width: 899px) {
  .book-head h2, .book-price, .cal, .req, .done { grid-column: 1 / -1; }
}
.cal-bar { display: flex; justify-content: space-between; margin-bottom: -44px; position: relative; z-index: 1; pointer-events: none; }
.cal-nav { pointer-events: auto; width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; cursor: pointer; }
.cal-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.cal-nav:disabled { opacity: 0.25; cursor: default; }
.cal-months { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); }
@media (max-width: 1099px) { .cal-months { grid-template-columns: 1fr; } .cal-months .month + .month { display: none; } }
.month h3 { text-align: center; height: 44px; line-height: 44px; margin-bottom: 8px; }
.month table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.month th { font: 400 0.78rem var(--sans); color: var(--olive); padding: 0 0 8px; }
.month td { padding: 1px; }
.day { width: 100%; aspect-ratio: 1; min-height: 44px; border: 0; background: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 1rem; font-variant-numeric: tabular-nums; position: relative; transition: background-color 0.25s, color 0.25s; }
.day small { font-size: 0.62rem; color: var(--olive); line-height: 1; margin-top: 3px; }
.day:hover:not([disabled]) { background: rgba(198, 170, 140, 0.28); }
.day[disabled] { cursor: default; color: rgba(37, 37, 33, 0.3); }
.day.busy { text-decoration: line-through; text-decoration-color: var(--clay); text-decoration-thickness: 1.5px; }
.day.today::after { content: ''; position: absolute; top: 6px; width: 4px; height: 4px; border-radius: 50%; background: var(--olive); }
.day.mid { background: rgba(166, 101, 78, 0.14); }
.day.in, .day.out { background: var(--terra-ink); color: var(--ivory); }
.day.in small, .day.out small { color: inherit; opacity: 0.8; }
.day.short { color: rgba(37, 37, 33, 0.4); }
.cal-status { margin: 20px 0 0; font-size: 0.92rem; color: var(--ink-2); min-height: 1.5em; }
.cal-status.warn { color: var(--terra-ink); }
.cal-legend { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 0.84rem; color: var(--olive); }
.cal-legend i { display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; }
.k-sel { background: var(--terra-ink); }
.k-night { background: rgba(166, 101, 78, 0.14); }
.k-busy { border-bottom: 1.5px solid var(--clay); height: 8px !important; vertical-align: 2px !important; }

.sum { margin: 0 0 12px; border-top: 1px solid var(--ink); }
.sum div { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 50px; border-bottom: 1px solid var(--hair); font-variant-numeric: tabular-nums; }
.sum dt { color: var(--ink-2); }
.sum dd { margin: 0; text-align: right; }
.sum-total { border-bottom-color: var(--ink) !important; font-weight: 500; }
.step { display: flex; align-items: center; }
.step button { width: 44px; height: 44px; border: 1px solid var(--btn); color: var(--btn); background: none; cursor: pointer; font-size: 1.15rem; transition: background-color 0.3s, color 0.3s; }
.step button:hover:not([disabled]), .step button:active:not([disabled]) { background: var(--btn-hover); border-color: var(--btn-hover); color: var(--ivory); }
.step button[disabled] { opacity: 0.35; cursor: default; }
.step output { width: 44px; text-align: center; }
.sofa { margin-bottom: 4px; }
.req .muted { font-size: 0.9rem; }
.field { display: grid; gap: 4px; margin-top: 22px; }
.field label { font-size: 0.9rem; color: var(--ink-2); }
.field input, .field textarea { font: 400 1.02rem/1.4 var(--sans); color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--ink-2); border-radius: 0; padding: 10px 0; min-height: 46px; width: 100%; }
.field textarea { resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: none; border-bottom: 2px solid var(--olive); padding-bottom: 9px; }
.field [aria-invalid='true'] { border-bottom-color: var(--terra-ink); }
.hint { font-size: 0.84rem; color: var(--olive); margin: 6px 0 0; }
.err { color: var(--terra-ink); font-size: 0.9rem; margin: 6px 0 0; }
.req .btn { width: 100%; margin-top: 32px; }
.req .btn[disabled] { background: var(--btn-hover); opacity: 0.75; cursor: progress; }
.hp { position: absolute; left: -9999px; }
.done { padding: 32px 0; border-top: 1px solid var(--ink); }
.done:focus { outline: none; }
.done-line { font-size: clamp(1.5rem, 2.2vw, 1.9rem); line-height: 1.28; margin-bottom: 16px; }

/* closing + footer */
.closing { padding: var(--sec) var(--m) 0; display: grid; justify-items: center; text-align: center; }
.closing .plate { width: min(100%, calc(72 * var(--vh, 1svh) * var(--ar))); justify-self: center; }
.closing-line { font-size: clamp(1.6rem, 2.8vw, 2.4rem); line-height: 1.15; margin: 40px 0 0; max-width: 18ch; }
.ft { margin-top: var(--sec); padding-block: 56px calc(48px + env(safe-area-inset-bottom)); border-top: 1px solid var(--hair); font-size: 0.95rem; }
.ft .grid { row-gap: 32px; align-items: start; }
.ft-brand img { width: 108px; margin-bottom: 18px; }
.ft-brand p { color: var(--ink-2); }
.ft-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ft-links a { text-decoration: none; }
.ft-links a:hover { text-decoration: underline; }
.ft details summary { cursor: pointer; list-style: none; }
.ft details summary::-webkit-details-marker { display: none; }
.ft details summary::after { content: ' +'; color: var(--olive); }
.ft details[open] summary::after { content: ' −'; }
.ft details p { margin: 8px 0 0; color: var(--ink-2); font-size: 0.88rem; max-width: 40ch; }
.ft-lang { justify-self: end; }
@media (max-width: 899px) { .ft-lang { justify-self: start; } .ft { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } }

/* phone booking bar */
.dock { position: fixed; z-index: 25; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); min-height: 50px; display: flex; align-items: center; justify-content: center; background: var(--btn); color: var(--ivory); text-decoration: none; font-weight: 500; transition: transform 0.5s var(--ease), opacity 0.5s; }
.dock:active { background: var(--btn-hover); }
.dock.away { transform: translateY(140%); opacity: 0; }
@media (min-width: 900px) { .dock { display: none !important; } }

/* photo viewer */
.viewer { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #22241D; color: var(--night-ink); }
.viewer::backdrop { background: #22241D; }
.viewer[open] { display: grid; place-items: center; }
.viewer figure { margin: 0; display: grid; place-items: center; width: 100%; height: 100%; padding: 64px 72px; touch-action: pan-y; }
.viewer img { max-width: 100%; max-height: calc(100dvh - 128px); width: auto; height: auto; object-fit: contain; }
.viewer figcaption { margin-top: 14px; font-size: 0.9rem; color: rgba(239, 234, 223, 0.75); text-align: center; }
.viewer-count { position: absolute; left: var(--m); top: 0; height: 64px; display: flex; align-items: center; margin: 0; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.viewer-close { position: absolute; right: var(--m); top: 0; height: 64px; background: none; border: 0; color: inherit; cursor: pointer; }
.viewer-prev, .viewer-next { position: absolute; top: 50%; translate: 0 -50%; width: 56px; height: 56px; display: grid; place-items: center; background: none; border: 0; color: inherit; cursor: pointer; }
.viewer-prev { left: 8px; } .viewer-next { right: 8px; }
.viewer svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.3; }
@media (max-width: 599px) { .viewer figure { padding: 64px 0 72px; } .viewer-prev, .viewer-next { top: auto; bottom: 8px; translate: none; } }

/* 404 */
.nf main { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: 20px; }
.nf-logo { width: 110px; margin-bottom: 24px; }

/* gentle reveals, only when scripts run and motion is welcome */
@media (prefers-reduced-motion: no-preference) {
  .js .plate, .js .moment figure, .js .bleed, .js .g-item {
    opacity: 0; transform: translateY(28px); clip-path: inset(5% 0 0 0);
    transition: opacity 1.3s var(--ease), transform 1.3s var(--ease), clip-path 1.5s var(--ease);
  }
  .js .in { opacity: 1 !important; transform: none !important; clip-path: inset(0) !important; }
  .js .statement, .js .h-section, .js .h-room { opacity: 0; transition: opacity 1.4s var(--ease) 0.1s; }
  .js .statement.in, .js .h-section.in, .js .h-room.in { opacity: 1; }
}

/* the two olive moments: the idea of yutori with the landscape, and Time at Yutori */
.idea { background: var(--meadow); color: var(--ivory); padding-bottom: clamp(48px, 5vw, 80px); }
.idea .idea-text, .idea .bleed .label { color: var(--on-dark-2); }
.idea :focus-visible, .time :focus-visible { outline-color: var(--ivory); }

/* hand-drawn Yutori marks (assets/mk), drawn in terracotta and used only to point or emphasise */
.mk { display: inline-block; flex: none; background: var(--terra); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.mk-arrow { --m: url('mk/arrow.png'); width: 34px; height: 8px; }
.mk-arrow.down { transform: rotate(90deg); width: 26px; margin-inline: -4px; }
.mk-x { --m: url('mk/x.png'); width: 13px; height: 13px; }
.mk-check { --m: url('mk/check.png'); width: 17px; height: 16px; }
.mk-flourish { --m: url('mk/flourish.png'); width: 64px; height: 26px; }
.hero-go, .arrow-link, .time-go { display: inline-flex; align-items: center; gap: 12px; }
.hero-go .mk, .arrow-link .mk, .time-go .mk { transition: transform 0.6s var(--ease); }
.hero-go:hover .mk.down { transform: rotate(90deg) translateX(4px); }
.arrow-link:hover .mk, .time-go:hover .mk { transform: translateX(5px); }
@media (max-width: 899px) { .hero-go .mk { background: var(--clay); } }
.time-go { font: 400 clamp(1.3rem, 2vw, 1.7rem)/1.2 var(--serif); color: var(--ivory); text-decoration: none; padding-block: 10px; }
.time-go .mk { background: var(--clay); width: 72px; height: 30px; }
.time-go:hover { text-decoration: underline; text-decoration-color: var(--clay); }
.rules li { display: flex; align-items: center; gap: 14px; }
.rules .mk-check { background: var(--meadow); }
.menu-close, .viewer-close { display: inline-flex; align-items: center; gap: 10px; }
.viewer .mk-x { background: var(--clay); }

/* the price, circled by hand */
.ring { position: relative; display: inline-block; padding: 0 0.32em; }
.ring::after { content: ''; position: absolute; inset: -0.32em -0.1em -0.28em; background: var(--terra); -webkit-mask: url('mk/ellipse.png') center / 100% 100% no-repeat; mask: url('mk/ellipse.png') center / 100% 100% no-repeat; pointer-events: none; }

/* active section in the header: the hand-drawn flick instead of a ruled line */
.hd-nav a { background: none !important; position: relative; }
.hd-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 5px; background: var(--terra); -webkit-mask: url('mk/line-flick.png') left center / 100% 100% no-repeat; mask: url('mk/line-flick.png') left center / 100% 100% no-repeat; transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease); }
.hd-nav a:hover::after, .hd-nav a[aria-current]::after { transform: scaleX(1); }
.hd-nav a[aria-current] { color: var(--ink); }

/* the confirmation after sending, in a hand-drawn frame */
.done { position: relative; padding: 36px 32px; border-top: 0; }
.done::before { content: ''; position: absolute; inset: 0; background: var(--clay); -webkit-mask: url('mk/frame.png') center / 100% 100% no-repeat; mask: url('mk/frame.png') center / 100% 100% no-repeat; pointer-events: none; }

/* phone spacing: closer rhythm between text and photos */
@media (max-width: 899px) {
  :root { --sec: 80px; }
  .head { margin-bottom: 28px; }
  .bleed + .head { margin-top: 32px; }
  .spread + .spread { margin-top: 40px; }
  .spread { gap: 20px; }
  .time-cta { margin-top: 48px; }
  .time .bleed { margin-block: 40px; }
  .idea-text { margin-top: 24px; }
}
/* divider between the rooms of the house: the hand-drawn line, centred in the space between sections */
.room + .room, .room + .time { position: relative; }
.room + .room::before {
  content: ''; position: absolute; left: 50%; top: calc(var(--sec) / 2); translate: -50% -50%;
  width: clamp(120px, 14vw, 200px); height: 12px; background: var(--terra);
  -webkit-mask: url('mk/line-flick.png') center / contain no-repeat; mask: url('mk/line-flick.png') center / contain no-repeat;
}
@media (max-width: 899px) { :root { --sec: 72px; } }
.room > .bleed:first-child { margin-top: 0; }
.room + .room::before { height: 16px; width: clamp(140px, 16vw, 220px); }

/* booking: selected dates in the olive family; seasonal breakdown in the summary */
.day.in, .day.out { background: var(--btn); color: var(--ivory); }
.day.mid { background: rgba(102, 107, 78, 0.16); }
.k-sel { background: var(--btn) !important; }
.k-night { background: rgba(102, 107, 78, 0.16) !important; }
.day[disabled]:not(.busy) small { visibility: hidden; }
.day.busy { color: rgba(37, 37, 33, 0.28); }
.day.short { color: rgba(37, 37, 33, 0.45); }
.sum-h { font: 400 clamp(1.4rem, 2vw, 1.7rem)/1.2 var(--serif); margin: 0 0 14px; }
.sum dd[data-s='rate'].split { display: grid; gap: 4px; padding-block: 10px; font-size: 0.95rem; }
.sum-rate { align-items: flex-start !important; }
.sum-rate dt { padding-top: 13px; }
/* gallery: an even grid; every tile the same shape, wide landscapes span two. The full photo opens uncropped. */
.g-tabs { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: -24px auto 32px; }
.g-tab { background: none; border: 0; padding: 10px 0; cursor: pointer; font-size: 0.97rem; color: var(--ink-2); position: relative; }
.g-tab::after { content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 5px; background: var(--terra); -webkit-mask: url('mk/line-flick.png') left center / 100% 100% no-repeat; mask: url('mk/line-flick.png') left center / 100% 100% no-repeat; transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease); }
.g-tab[aria-pressed='true'] { color: var(--ink); }
.g-tab[aria-pressed='true']::after, .g-tab:hover::after { transform: scaleX(1); }
.g-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: dense; gap: clamp(8px, 1.2vw, 16px); }
.g-grid::after { content: none; }
.g-grid .g-item { flex: none; aspect-ratio: 3 / 4; }
.g-grid .g-item.wide { grid-column: span 2; aspect-ratio: auto; }
.g-grid .g-item[hidden] { display: none; }
.g-grid .g-item button, .g-grid .g-item picture { display: block; width: 100%; height: 100%; }
.g-grid .g-item img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
@media (min-width: 1200px) { .g-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 599px) { .g-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g-tabs { gap: 4px 20px; margin-top: -8px; } }
.late { margin: 6px 0 8px; padding: 10px 14px; background: rgba(166, 101, 78, 0.1); color: var(--terra-ink); font-size: 0.92rem; }

/* review fixes, 2026-10-08 */
.sum-rate { align-items: center !important; }
.sum-rate dt { padding-top: 0; }
.sum-rate:has(.split) { align-items: flex-start !important; }
.sum-rate:has(.split) dt { padding-top: 13px; }
.rows dd .ln { display: block; }
.rows dd .ln + .ln { margin-top: 6px; }
.idea .bleed { margin-top: clamp(64px, 7vw, 112px); }
.mk-arrow.down { width: 30px; height: 11px; }
@media (max-width: 599px) {
  .rows div { grid-template-columns: 1fr; gap: 2px; padding: 12px 0; }
  .rows dt { font-size: 0.85rem; }
}
:lang(en) .hero-line { max-width: 15ch; }

/* larger logo on computers: taller header, logo about 2x */
@media (min-width: 900px) {
  :root { --hd: 92px; }
  .hd-logo img { height: 56px; }
  .ft-brand img { width: 170px; }
}
.aside { max-width: 36ch; font-size: 1.02rem; line-height: 1.6; }

.room:has(+ .time) { padding-bottom: clamp(72px, 8vw, 128px); }

/* military discount */
.check { display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 10px 0 4px; cursor: pointer; font-size: 0.95rem; }
.check input { width: 20px; height: 20px; margin: 0; accent-color: var(--btn); flex: none; }
.sum-disc dd { color: var(--btn); }
.mil-line { color: var(--olive) !important; }
.sum div[hidden] { display: none; }

.check span { display: grid; gap: 2px; }
.check-hint { font-size: 0.82rem; color: var(--olive); }
.check { align-items: flex-start; } .check input { margin-top: 2px; }