/* Direction D, the living room: Styled by Laura. Limewash plaster, aizome indigo, oak. Slow, soft, freshly painted. */
@font-face { font-family: "Gloock"; src: url("/_assets/previews/d/style/fonts/gloock.9389ada8d3.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Albert Sans"; src: url("/_assets/previews/d/style/fonts/albert.c2fb6fda41.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Shantell Sans"; src: url("/_assets/previews/d/style/fonts/shantell.f15631aba9.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --f-display: "Gloock", "Didot", "Bodoni 72", Georgia, serif;
  --f-body: "Albert Sans", "Avenir Next", "Segoe UI", Arial, sans-serif;
  --f-hand: "Shantell Sans", "Comic Neue", "Segoe Print", cursive;
  --ground: var(--wall-style);
  --ground-2: light-dark(#F3E2DA, #232945);
  --ink: light-dark(#1C2546, #F3E2DA);
  --ink-2: light-dark(#4E3F52, #C9BCC6);
  --indigo: light-dark(#2C3D7E, #A9B8F2);
  --oak: light-dark(#7A4F27, #D6A56E);
  --focus: light-dark(#2C3D7E, #F29A55);
  --thread: light-dark(#ED802B, #F29A55);
  --line: light-dark(#1C2546, #070B14);
  --roller: light-dark(#2C3D7E, #D6A56E);
}

.wrap { padding-inline: clamp(1rem, 4vw, 3.5rem); }
.top { display: flex; align-items: center; justify-content: space-between; gap: var(--step-3); padding-block: var(--step-3); }
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--ink); }
.brand-name { font: 400 1.35rem/1 var(--f-display); }
.brand-sub { display: block; font: 400 .8rem/1.2 var(--f-hand); color: var(--ink-2); margin-top: .2rem; }
.top-nav { display: flex; align-items: center; gap: clamp(.25rem, 1.4vw, 1.1rem); }
.top-link { display: none; font-weight: 600; text-decoration: none; padding: .6rem .2rem; }
.top-link:hover { text-decoration: underline; text-decoration-color: var(--thread); text-decoration-thickness: 2px; }
.top .call-long { display: none; }
@media (min-width: 900px) { .top-link { display: inline-block; } .top .call-long { display: inline; } }
@media (max-width: 460px) { .brand-sub { display: none; } .top .switch-label { display: none; } }

/* ---------- hero: the room is the wall, the words are a paint card held up to it ---------- */
.hero { padding-block: var(--step-3) clamp(3rem, 7vw, 6rem); display: grid; }
.hero-note { margin-bottom: var(--step-4); }
.room-view { position: relative; border: 3px solid var(--line); border-radius: 2px; overflow: hidden; background: var(--ground-2); }
.room-view img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 1000px) { .room-view img { aspect-ratio: 16 / 8.6; object-position: 50% 60%; } }
.roller { position: absolute; inset: 0; z-index: 2; pointer-events: none; display: none; }
.roller-coat { position: absolute; inset: 0; background: var(--ground); }
.roller-bar { position: absolute; top: -2%; bottom: -2%; left: -1.4rem; width: 1.4rem; background: var(--roller); border-radius: 999px; }
.view-tag { position: absolute; left: .75rem; top: .75rem; z-index: 3; display: grid; padding: .25rem .6rem .3rem; background: var(--tag-paper); color: var(--tag-ink); border: 1.5px solid var(--seal-ink); border-radius: 3px 10px 10px 3px; }
.view-tag b { font: 700 1rem/1.1 var(--f-hand); display: flex; gap: .35rem; align-items: center; }
.view-tag b::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: var(--thread); border: 1.5px solid var(--seal-ink); }
.view-tag span { font-size: .75rem; }
.card {
  position: relative; z-index: 4; display: grid; gap: var(--step-4); padding: clamp(1.25rem, 3vw, 2.5rem);
  background: var(--ground-2); border: 3px solid var(--line); border-radius: 2px; margin-top: -2.5rem; margin-inline: clamp(.5rem, 2vw, 1rem); max-width: 40rem;
}
@media (min-width: 1000px) {
  .hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; }
  .room-view { grid-row: 2; grid-column: 1; }
  .card { grid-row: 2; grid-column: 1; align-self: center; justify-self: start; margin: 0 0 0 clamp(1.5rem, 3vw, 2.5rem); max-width: 37rem; gap: var(--step-3); }
  .card h1 { font-size: clamp(2.6rem, 1.4rem + 2.2vw, 3.9rem); }
  .view-tag { left: auto; right: .75rem; }
}
.card-chip { display: flex; gap: 4px; }
.card-chip span { width: 2.1rem; height: 1.2rem; border: 1.5px solid var(--line); }
.card-chip span:nth-child(1) { background: #EBD3C9; } .card-chip span:nth-child(2) { background: #8FA77E; } .card-chip span:nth-child(3) { background: #3A4FA0; } .card-chip span:nth-child(4) { background: #C8955E; }
.hero h1 { font: 400 clamp(2.8rem, 1.8rem + 4.2vw, 5.6rem)/.95 var(--f-display); letter-spacing: -.02em; text-wrap: balance; }
.hero h1 em { font-style: normal; color: var(--indigo); }
.lede { font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); color: var(--ink-2); max-width: 34rem; }
.lede strong { color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; gap: var(--step-3) var(--step-4); align-items: center; }
.text-link { font-weight: 700; text-decoration-color: var(--thread); text-decoration-thickness: 2px; min-height: 2.75rem; display: inline-flex; align-items: center; }
.light-row { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; font: 400 .95rem/1.3 var(--f-hand); color: var(--ink-2); padding-top: var(--step-2); border-top: 1.5px dashed color-mix(in srgb, var(--ink) 35%, transparent); }

/* ---------- sections ---------- */
.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section-head { display: grid; gap: var(--step-3); max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section h2 { font: 400 clamp(2.1rem, 1.5rem + 2.4vw, 3.6rem)/1 var(--f-display); letter-spacing: -.015em; text-wrap: balance; }
.section-head p { color: var(--ink-2); font-size: 1.125rem; }

/* the ladder as a paint card: lightest to deepest, the way a colour card reads */
.ladder { display: grid; padding: 4px; gap: 4px; list-style: none; background: var(--line); border-radius: 3px; }
@media (min-width: 1100px) { .ladder { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.chip { --c-ink: #1C2546; --c-ink-2: #2E3A63; display: grid; gap: var(--step-3); align-content: start; padding: var(--step-4); color: var(--c-ink); }
.chip-1 { background: #DDE2F4; } .chip-2 { background: #B7C2EA; } .chip-3 { background: #8B9BD9; --c-ink-2: #1C2546; }
.chip-4 { background: #4F63B5; --c-ink: #FFFFFF; --c-ink-2: #E6EAF8; } .chip-5 { background: #24346F; --c-ink: #FFFFFF; --c-ink-2: #DCE2F5; }
.chip-step { font: 600 .9rem/1.2 var(--f-hand); color: var(--c-ink-2); }
.chip h3 { font: 400 1.75rem/1.05 var(--f-display); }
.chip-price { font: 400 clamp(2.4rem, 2rem + 1.2vw, 3rem)/1 var(--f-display); font-variant-numeric: lining-nums; }
.chip-price small { font: 600 1rem/1 var(--f-body); }
.chip-what { font-weight: 600; }
.chip ul { display: grid; gap: .4rem; padding: 0 0 0 1.1rem; margin: 0; }
.chip li { color: var(--c-ink-2); font-size: .98rem; }
.chip li::marker { color: var(--c-ink); }
.chip-when { padding-top: var(--step-2); border-top: 1.5px solid currentColor; font-size: .95rem; color: var(--c-ink); }
@media (prefers-reduced-motion: no-preference) {
  .chip { transition: transform 260ms var(--ease-out); }
  .chip:hover { transform: translateY(-4px); }
}
.small-print { display: grid; gap: .5rem; margin-top: var(--step-4); color: var(--ink-2); max-width: 52rem; }

/* morning and evening light */
.light { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 900px) { .light { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.patches { display: flex; gap: clamp(.6rem, 2vw, 1.25rem); }
.patch { flex: 1; aspect-ratio: 1; border: 3px solid var(--line); border-radius: 2px; }
.patch-1 { background: light-dark(#E9C9BC, #A88072); } .patch-2 { background: light-dark(#8FA77E, #5D6E55); } .patch-3 { background: light-dark(#3A4FA0, #26336A); }
.patch-names { display: flex; gap: clamp(.6rem, 2vw, 1.25rem); font: 400 .9rem/1.2 var(--f-hand); color: var(--ink-2); margin-top: .5rem; }
.patch-names span { flex: 1; }

/* booking */
.steps { display: grid; gap: var(--step-4); padding: 0; list-style: none; counter-reset: step; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.step { display: grid; grid-template-columns: auto 1fr; gap: .25rem var(--step-3); align-content: start; counter-increment: step; }
.step::before { content: counter(step); grid-row: span 2; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 2px solid var(--line); border-radius: 50%; font: 400 1.4rem/1 var(--f-display); background: var(--ground-2); }
.step h3 { font: 400 1.5rem/1.1 var(--f-display); }
.step p { color: var(--ink-2); }
.book-row { margin-top: var(--step-5); display: flex; flex-wrap: wrap; gap: var(--step-3) var(--step-5); align-items: center; }
.socials { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; padding: 0; list-style: none; }
.socials a { display: inline-flex; min-height: 2.75rem; align-items: center; font-weight: 700; text-decoration-color: var(--thread); text-decoration-thickness: 2px; }

.house-section { background: var(--ground-2); }
.foot { padding-block: var(--step-5) var(--step-6); display: flex; flex-wrap: wrap; gap: var(--step-3) var(--step-5); align-items: center; justify-content: space-between; color: var(--ink-2); font-size: .95rem; }

/* ---------- motion: one roller pass, then everything settles slowly ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.lt-ready .roller { display: block; animation: roll 1100ms cubic-bezier(.45, 0, .2, 1) 40ms both; }
  html.lt-ready .room-view img { animation: settle 1600ms var(--ease-out) both; }
  html.lt-ready .card { animation: lift 800ms var(--ease-out) 380ms both; }
  html.lt-ready .card-chip span { animation: lift-sm 500ms var(--ease-out) both; animation-delay: calc(900ms + var(--i, 0) * 90ms); }
  .ladder.lt-arrived .chip { animation: fan 700ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 90ms); transform-origin: 50% 100%; }
}
@keyframes roll { to { transform: translateX(calc(100% + 1.5rem)); } }
@keyframes settle { from { transform: scale(1.06); } }
@keyframes lift { from { transform: translateY(26px); opacity: 0; } }
@keyframes lift-sm { from { transform: translateY(8px); } }
@keyframes fan { from { transform: translateY(18px); } }
.card-chip span:nth-child(2) { --i: 1; } .card-chip span:nth-child(3) { --i: 2; } .card-chip span:nth-child(4) { --i: 3; }
.chip-2 { --i: 1; } .chip-3 { --i: 2; } .chip-4 { --i: 3; } .chip-5 { --i: 4; }