/* Direction E, style: Styled by Laura. Limewash plaster by day, an indigo
   room by lamp light; Bodoni Moda with Jost; motion that lays things down
   slowly, like swatches settling on a board. */
@font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/_assets/previews/e/style/fonts/BodoniModa-400-700.c032219ef6.woff2) format("woff2"); }
@font-face { font-family: "Bodoni Moda"; font-style: italic; font-weight: 400 700; font-display: swap; src: url(/_assets/previews/e/style/fonts/BodoniModa-Italic-400-700.b737328c13.woff2) format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 300 600; font-display: swap; src: url(/_assets/previews/e/style/fonts/Jost-300-600.7726a5cd6f.woff2) format("woff2"); }

:root {
  color-scheme: light dark;
  --f-ground: light-dark(#EED9D1, #1A1C2E);
  --f-surface: light-dark(#F6E9E3, #24263B);
  --f-text: light-dark(#1A2147, #F1E4DE);
  --f-muted: light-dark(#4F4A5E, #BDB2B4);
  --f-line: light-dark(#D6BBB0, #3B3E5A);
  --ring: light-dark(#A84C0C, #F5A262);
  --indigo: light-dark(#2B3A86, #9FB0F2);
  --oak: light-dark(#8A5A2B, #D9A46A);
  --here-c: var(--c-style);
  --here: 5;
  --seal-ink: var(--f-text);
  --seal-paper: var(--f-ground);
  --didone: "Bodoni Moda", "Didot", "Bodoni 72", "Times New Roman", serif;
  --geo: "Jost", "Futura", "Century Gothic", "Avenir Next", system-ui, sans-serif;
  --arrive-duration: 900ms;
  --arrive-distance: 26px;
  --arrive-stagger: 110ms;
  --arrive-easing: cubic-bezier(.22, .61, .36, 1);
  /* The fan deck: five chips from pale to deep indigo. */
  --k1: light-dark(#DDE2F4, #2C3256);
  --k2: light-dark(#B9C3EC, #3A4479);
  --k3: light-dark(#8D9CDD, #5265B5);
  --k4: light-dark(#5468C2, #8496E6);
  --k5: light-dark(#2B3A86, #B9C6F7);
}
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--f-ground); color: var(--f-text); font: 400 18px/1.6 var(--geo); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
em { font-style: italic; font-weight: 400; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 12px 16px; border-radius: 10px; background: var(--f-surface); font-weight: 600; }
.skip:focus { top: 12px; }
.s-wrap { max-width: 1240px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }
.s-h2 { margin: 0; font: 600 clamp(34px, 5vw, 58px)/1.02 var(--didone); letter-spacing: -.01em; font-optical-sizing: auto; }
.s-h2 em { color: var(--indigo); }
.s-sub { margin: 14px 0 0; max-width: 50ch; color: var(--f-muted); }
.s-small { margin: 26px 0 0; color: var(--f-muted); font-size: 15.5px; max-width: 70ch; }

/* Hero: the room seen through an arched doorway. */
.s-hero { max-width: 1400px; margin-inline: auto; padding: clamp(24px, 4vw, 56px) clamp(16px, 4vw, 40px) clamp(48px, 7vw, 96px); display: grid; gap: 36px; align-items: center; }
@media (min-width: 980px) { .s-hero { grid-template-columns: 1fr 1.1fr; gap: 64px; } }
.s-brand { display: flex; align-items: center; gap: 16px; }
.s-brand .seal { width: 84px; height: 84px; flex: none; }
.s-site { margin: 0; font: 500 15px/1.35 var(--geo); letter-spacing: .2em; text-transform: uppercase; }
.s-site span { display: block; color: var(--f-muted); letter-spacing: .12em; font-size: 13px; }
.s-hero h1 { margin: 26px 0 0; font: 500 clamp(48px, 8.4vw, 96px)/.95 var(--didone); letter-spacing: -.02em; font-optical-sizing: auto; text-wrap: balance; }
.s-hero h1 em { display: inline-block; color: var(--indigo); }
.s-lede { margin: 22px 0 0; max-width: 34ch; font-size: 19px; }
.s-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 30px 0 24px; }
.s-link { display: inline-flex; align-items: center; min-height: 48px; font-weight: 500; letter-spacing: .02em; text-decoration-thickness: 1.5px; text-underline-offset: 7px; }
.s-room { margin: 0; }
.s-arch { overflow: hidden; border-radius: 999px 999px 18px 18px; aspect-ratio: 4 / 4.6; box-shadow: 0 0 0 10px var(--f-surface), 0 0 0 11px var(--f-line), 0 40px 70px -40px rgb(40 20 30 / .55); background: var(--f-surface); }
.s-arch picture, .s-room-img { width: 100%; height: 100%; }
.s-room-img { object-fit: cover; object-position: 50% 60%; }
.s-room figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 24px; color: var(--f-muted); font-size: 15px; }
.s-light-note { max-width: 32ch; }
.s-lamp { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 18px 0 12px; border: 1px solid var(--f-line); border-radius: 23px; background: var(--f-surface); color: var(--f-text); font: 500 15px/1 var(--geo); cursor: pointer; transition: transform 200ms var(--ease-out); }
.s-lamp:hover { transform: translateY(-2px); }
.s-lamp-dot { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #FFE2A8, #E9A24A 70%); box-shadow: 0 0 0 1.5px var(--oak); }
.s-lamp[aria-pressed="true"] .s-lamp-on, .s-lamp:not([aria-pressed="true"]) .s-lamp-off { display: none; }

/* The ladder: a fan deck of five chips. */
.s-ladder { padding: clamp(64px, 9vw, 120px) 0; background: var(--f-surface); }
.chips { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 18px; }
@media (min-width: 720px) { .chips { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .chips { grid-template-columns: repeat(5, 1fr); gap: 14px; } }
.chip-card { display: flex; flex-direction: column; padding: 0 0 20px; border-radius: 6px 6px 14px 14px; background: var(--f-ground); box-shadow: 0 1px 0 var(--f-line), 0 18px 30px -26px rgb(40 20 30 / .45); overflow: hidden; transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out); }
.chip-card:hover { transform: translateY(-6px) rotate(-.6deg); box-shadow: 0 1px 0 var(--f-line), 0 30px 40px -28px rgb(40 20 30 / .5); }
.chip-swatch { display: block; height: 84px; background: var(--chip); }
.c1 { --chip: var(--k1); } .c2 { --chip: var(--k2); } .c3 { --chip: var(--k3); } .c4 { --chip: var(--k4); } .c5 { --chip: var(--k5); }
.chip-name, .chip-price, .chip-mode, .chip-inc, .chip-time { margin-inline: 20px; }
.chip-name { margin-top: 18px; margin-bottom: 0; font: 600 25px/1.1 var(--didone); }
.chip-price { margin-top: 10px; margin-bottom: 0; font: 400 16px/1 var(--geo); color: var(--f-muted); }
.chip-price b { color: var(--f-text); font: 600 46px/1 var(--didone); letter-spacing: -.02em; margin-right: 4px; }
.chip-mode { margin-top: 10px; margin-bottom: 0; font: 500 13px/1.3 var(--geo); letter-spacing: .14em; text-transform: uppercase; color: var(--f-muted); }
.chip-inc { margin-top: 14px; margin-bottom: 0; padding-left: 18px; font-size: 15.5px; line-height: 1.5; flex: 1; }
.chip-inc li { margin-bottom: 6px; }
.chip-inc li::marker { color: var(--indigo); }
.chip-time { margin-top: 14px; margin-bottom: 0; padding-top: 12px; box-shadow: 0 -1px 0 var(--f-line); font-size: 14.5px; color: var(--f-muted); }

/* The sample board. */
.s-board { padding: clamp(64px, 9vw, 120px) 0; }
.s-board-in { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .s-board-in { grid-template-columns: 1fr 1fr; gap: 64px; } }
.s-board-pic { margin: 0; }
.s-board-img { width: 100%; border-radius: 4px; transform: rotate(-1.5deg); box-shadow: 0 30px 50px -30px rgb(40 20 30 / .5); }
.s-board-pic figcaption { margin-top: 18px; color: var(--f-muted); font-size: 14.5px; }
.s-layers { margin: 30px 0 0; display: grid; gap: 18px; }
.s-layers dt { font: 600 22px/1.2 var(--didone); }
.s-layers dd { margin: 4px 0 0; color: var(--f-muted); }

/* Booking. */
.s-book { padding: clamp(64px, 9vw, 120px) 0; background: var(--f-surface); }
.s-steps { list-style: none; counter-reset: s; margin: 34px 0 36px; padding: 0; display: grid; gap: 26px; }
@media (min-width: 820px) { .s-steps { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
.s-steps li { counter-increment: s; display: grid; gap: 6px; }
.s-steps li::before { content: counter(s); font: italic 500 52px/1 var(--didone); color: var(--indigo); }
.s-steps b { font: 600 22px/1.2 var(--didone); }
.s-steps span { color: var(--f-muted); }

/* Arrival: the room comes into focus slowly; the copy settles after it.
   Things laid down on the page settle with the slightest turn. */
@media (prefers-reduced-motion: no-preference) {
  html.lt-ready .s-room-img { animation: s-focus 1600ms cubic-bezier(.22, .61, .36, 1) backwards; }
  html.lt-ready .s-brand, html.lt-ready .s-hero h1, html.lt-ready .s-lede, html.lt-ready .s-actions { animation: s-rise 900ms cubic-bezier(.22, .61, .36, 1) backwards; }
  html.lt-ready .s-hero h1 { animation-delay: 120ms; } html.lt-ready .s-lede { animation-delay: 240ms; } html.lt-ready .s-actions { animation-delay: 340ms; }
  .chip-card.lt-arrived, .s-board-pic.lt-arrived { animation: s-lay 900ms cubic-bezier(.22, .61, .36, 1) calc(var(--arrive-order, 0) * 110ms) backwards; }
}
@keyframes s-focus { from { opacity: .2; transform: scale(1.09); } }
@keyframes s-rise { from { opacity: 0; transform: translateY(22px); } }
@keyframes s-lay { from { transform: translateY(30px) rotate(-2.5deg); } }
@media (prefers-reduced-motion: reduce) {
  .chip-card, .s-lamp { transition-duration: 1ms; }
  .chip-card:hover { transform: none; }
}