/*
 * Style: Styled by Laura. Aizome indigo for the title page, limewash plaster
 * (pink, never cream) for the rooms, oak for the small things. Bodoni Moda
 * speaks like an interiors magazine; Jost does the plain talking. Motion
 * settles: slow, weighted, like samples laid on a board.
 */
@font-face {
  font-family: "Bodoni Moda";
  src: url("/_assets/previews/f/style/fonts/bodoni-normal-400-800.c032219ef6.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("/_assets/previews/f/style/fonts/bodoni-italic-400-700.b737328c13.woff2") format("woff2");
  font-weight: 400 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("/_assets/previews/f/style/fonts/jost-normal-300-600.7726a5cd6f.woff2") format("woff2");
  font-weight: 300 600; font-style: normal; font-display: swap;
}

:root {
  --ground: light-dark(#f2e4df, #15172b);
  --surface: light-dark(#eadad4, #1d2038);
  --ink: light-dark(#1d2147, #f2e4df);
  --ink-2: light-dark(#5a4f66, #bdb2c8);
  --accent: light-dark(#2e3a8c, #adb7ff);
  --oak: light-dark(#7a5129, #d9aa7a);
  --hair: light-dark(#d9c4be, #2e3254);
  --focus: light-dark(#2e3a8c, #adb7ff);
  --select-bg: #262f66;
  --select-ink: #f4e7e2;
  --display: "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif;
  --body-font: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --dock-bg: #262f66;
  --dock-ink: #f4e7e2;
  --sheet-bg: var(--ground);
}
body { font-weight: 400; font-size: 1.0625rem; }

/* Title page: indigo in both lights; the picture inside it changes with the light. */
.title { background: #262f66; color: #f4e7e2; --ink: #f4e7e2; --ink-2: #cfc3d6; --focus: #f4e7e2; --proof-ink: #cfc3d6; --oak: #e0b488; }
.title .seal { color: #e0b488; fill: #f4e7e2; }
.title .head__toc:hover { text-decoration: underline; }
.textlink { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 500; }

.hero {
  display: grid; gap: var(--space-6);
  padding: var(--space-4) var(--gutter) var(--space-8);
  max-width: 100rem; margin: 0 auto;
}
.hero__text { display: grid; gap: var(--space-4); justify-items: start; align-content: center; }
.hero__title { display: grid; gap: var(--space-1); }
.hero__verb { font-size: clamp(4.4rem, 17vw, 6rem); line-height: .86; padding-right: .1em; }
.hero__name { font: italic 500 clamp(1.5rem, 3vw, 2rem)/1.1 var(--display); color: #e0b488; }
.hero__lede { font-size: 1.1875rem; font-weight: 300; max-width: 32ch; }
.hero__start { font-size: 1.0625rem; }
.hero__start-k { font: italic 500 .9375rem/1.3 var(--ledger); color: var(--ink-2); margin-right: .35em; }
.hero__start b { font: 700 1.5rem/1 var(--ledger); margin-left: .25em; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-top: var(--space-2); }
.hero__fig { display: grid; gap: var(--space-3); }
.hero__mat { padding: clamp(.6rem, 1.6vw, 1.1rem); background: #f2e4df; border-radius: 4px; box-shadow: 0 2px 3px rgb(0 0 0 / .2), 0 28px 50px -24px rgb(0 0 0 / .6); }
.hero__img { width: 100%; height: auto; }
.hero__cap { font: italic 400 .875rem/1.35 var(--ledger); color: var(--ink-2); }
.when-night { display: none; }
:root[data-theme="dark"] .when-day { display: none; }
:root[data-theme="dark"] .when-night { display: inline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .when-day { display: none; }
  :root:not([data-theme="light"]) .when-night { display: inline; }
}
@media (min-width: 64rem) {
  .hero { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(2.5rem, 5vw, 5.5rem); align-items: center; min-height: calc(100svh - 5rem); padding-top: var(--space-5); }
}

/* Sections */
.sec { padding: var(--space-9) var(--gutter) 0; max-width: 86rem; margin: 0 auto; }
.sec__head { display: grid; gap: var(--space-3); margin-bottom: var(--space-7); max-width: 44rem; }
.sec__title { font: 600 clamp(2.2rem, 5vw, 3.8rem)/1.02 var(--display); letter-spacing: -.02em; }
.sec__sub { color: var(--ink-2); font-size: 1.125rem; font-weight: 300; max-width: 50ch; }

/* The paint card: five chips, lightest first. Physical colours, the same in both lights. */
.card {
  list-style: none; display: grid; border-radius: 10px; overflow: hidden;
  box-shadow: 0 1px 2px rgb(0 0 0 / .12), 0 26px 48px -26px rgb(29 33 71 / .55);
}
.chip { display: grid; align-content: start; gap: var(--space-3); padding: var(--space-6) var(--space-5); }
.chip__name { font: 600 1.75rem/1.05 var(--display); font-style: italic; }
.chip__mode { font: 500 .8125rem/1.2 var(--body-font); letter-spacing: .12em; text-transform: uppercase; color: var(--chip-2); }
.chip__price { font: 700 2.5rem/1 var(--ledger); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.02em; }
.chip__price small { font: 500 1rem/1 var(--ledger); letter-spacing: 0; }
.chip__list { list-style: none; display: grid; gap: .5rem; font-size: 1rem; line-height: 1.4; }
.chip__list li { padding-left: 1.05rem; position: relative; }
.chip__list li::before { content: ""; position: absolute; left: 0; top: .6em; width: .45rem; height: .45rem; border-radius: 50%; border: 1.5px solid currentColor; }
.chip__time { margin-top: auto; padding-top: var(--space-3); font: italic 400 .9375rem/1.35 var(--ledger); color: var(--chip-2); }
.chip--1 { background: #f7ede9; color: #1d2147; --chip-2: #4e4560; }
.chip--2 { background: #e5d0ce; color: #1d2147; --chip-2: #4a3f58; }
.chip--3 { background: #bdb1d0; color: #1d2147; --chip-2: #33294a; }
.chip--4 { background: #545c9c; color: #ffffff; --chip-2: #e9e6f6; }
.chip--5 { background: #262f66; color: #f4e7e2; --chip-2: #d3c8dc; }
.chip :focus-visible { outline-color: currentColor; }
@media (min-width: 64rem) {
  .card { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .chip { grid-template-rows: auto auto auto 1fr auto; padding: var(--space-6) var(--space-5) var(--space-5); }
}

.notin { display: grid; gap: var(--space-3); margin-top: var(--space-6); max-width: 46rem; }
.notin__title { font: 600 1.375rem/1.2 var(--display); font-style: italic; }
.notin__list { list-style: none; display: grid; gap: .4rem; font-size: 1.0625rem; }
.notin__list li { padding-left: 1.1rem; position: relative; }
.notin__list li::before { content: ""; position: absolute; left: 0; top: .7em; width: .55rem; height: 1.5px; background: var(--oak); }

/* Two lights */
.light__grid { display: grid; gap: var(--space-7); align-items: center; }
.light__text { display: grid; gap: var(--space-4); justify-items: start; }
.light__text p { max-width: 44ch; font-size: 1.125rem; font-weight: 300; }
.theme--big { min-height: 3rem; padding-inline: 1.1em; font-size: 1rem; color: var(--accent); }
.light__fig { display: grid; gap: var(--space-3); }
.light__img { width: 100%; height: auto; border-radius: 4px; }
@media (min-width: 64rem) {
  .light__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--space-8); }
}

/* Booking */
.book { display: grid; justify-items: start; gap: var(--space-6); }
.book .sec__head { margin-bottom: 0; }
.steps { width: 100%; }
.steps li::before { font-family: var(--display); font-style: italic; font-weight: 500; }
.btn--big { font-size: 1.125rem; min-height: 3.5rem; padding-inline: 1.6em; }

.back { margin-top: var(--space-9); background: var(--surface); }
.back__title { font-family: var(--display); font-weight: 500; }

/*
 * Arrival: settling. The framed room lowers onto the wall and the picture
 * inside eases still; the verb arrives slowly; the paint chips are laid down
 * one by one. Long, weighted, finished by itself.
 */
@media (prefers-reduced-motion: no-preference) {
  .lt-ready .head { animation: drift 700ms var(--ease-out) both; }
  .lt-ready .hero__verb { animation: lower 1000ms var(--ease-out) 80ms both; }
  .lt-ready .hero__name { animation: lower 900ms var(--ease-out) 220ms both; }
  .lt-ready .hero__lede, .lt-ready .hero__start, .lt-ready .hero__actions, .lt-ready .hero__text .proof { animation: drift 800ms var(--ease-out) 360ms both; }
  .lt-ready .hero__mat { animation: hang 1100ms var(--ease-out) 160ms both; }
  .lt-ready .hero__img { animation: still 1500ms var(--ease-out) 160ms both; }
  .card.lt-arrived .chip { animation: lay 760ms var(--ease-out) both; }
  .card.lt-arrived .chip--2 { animation-delay: 90ms; }
  .card.lt-arrived .chip--3 { animation-delay: 180ms; }
  .card.lt-arrived .chip--4 { animation-delay: 270ms; }
  .card.lt-arrived .chip--5 { animation-delay: 360ms; }
  .light__fig.lt-arrived { animation: hang 1000ms var(--ease-out) both; }
  .steps.lt-arrived li { animation: drift 700ms var(--ease-out) both; }
  .steps.lt-arrived li:nth-child(2) { animation-delay: 110ms; }
  .steps.lt-arrived li:nth-child(3) { animation-delay: 220ms; }
}
@media (prefers-reduced-motion: reduce) {
  .lt-ready .hero { animation: fade 240ms linear both; }
}
@keyframes drift { from { transform: translateY(10px); opacity: 0; } }
@keyframes lower { from { transform: translateY(-22px); opacity: 0; } }
@keyframes hang { from { transform: translateY(-18px) rotate(-1.2deg); opacity: 0; } }
@keyframes still { from { transform: scale(1.05); } }
@keyframes lay { from { transform: translateY(20px) rotate(-1.5deg); opacity: 0; } }
@keyframes fade { from { opacity: .4; } }