/* Direction D, the hub: Laura's house, outside, under her own sky. */
@font-face { font-family: "Bricolage Grotesque"; src: url("/_assets/previews/d/hub/fonts/bricolage.a756882d8a.woff2") format("woff2"); font-weight: 400 800; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/_assets/previews/d/hub/fonts/figtree.4ba7d3d096.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Shantell Sans"; src: url("/_assets/previews/d/hub/fonts/shantell.f15631aba9.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --f-display: "Bricolage Grotesque", "Avenir Next Condensed", "Arial Narrow", sans-serif;
  --f-body: "Figtree", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --f-hand: "Shantell Sans", "Comic Neue", "Segoe Print", cursive;
  --ground: light-dark(#CFE2EA, #0D1424);
  --ground-2: light-dark(#E3EEF2, #152036);
  --ink: light-dark(#172033, #ECF1F7);
  --ink-2: light-dark(#3B4A5E, #AFBCCD);
  --focus: light-dark(#B4530F, #F28C3E);
  --thread: light-dark(#ED802B, #F28C3E);
  /* the drawing kit */
  --line: light-dark(#1B2333, #070B14);
  --shell: light-dark(#F7F9FA, #2A3550);
  --roof-band: light-dark(#34405A, #1A2236);
  --paper: light-dark(#FFFFFF, #E4DED3);
  --oak: light-dark(#C8955E, #94683E);
  --floor: light-dark(#DDB98E, #3B2A1C);
  --navy: light-dark(#2D3A5C, #26304C);
  --leaf: light-dark(#6E9A5B, #3E6440);
  --leaf-2: light-dark(#4F7A43, #2C4A30);
  --pot: light-dark(#C9714A, #8E4E33);
  --cork: light-dark(#C98B4E, #7A5430);
  --sky-in: light-dark(#BFE0F0, #1B2850);
  --bulb: light-dark(#FFF3D6, #FFD27A);
  --glow: #FFD58A;
  --grass: light-dark(#7FA96A, #24402C);
  --earth: light-dark(#5E4A3A, #1C1712);
  --star: light-dark(transparent, #F6E7B8);
}

/* ---------- header ---------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: var(--step-3); padding: var(--step-3) clamp(1rem, 4vw, 3.5rem); position: relative; z-index: 3; }
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--ink); }
.brand-name { font: 800 1.2rem/1 var(--f-display); font-stretch: 85%; letter-spacing: -.01em; }
.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.5vw, 1.25rem); }
.top-link { display: none; font-weight: 600; text-decoration: none; padding: .6rem .25rem; }
.top-link:hover { text-decoration: underline; text-decoration-color: var(--thread); text-decoration-thickness: 2px; }
.top .call-small .call-long { display: none; }
@media (min-width: 760px) { .top-link { display: inline-block; } .top .call-small .call-long { display: inline; } }
@media (max-width: 420px) { .brand-sub { display: none; } .top .switch-label { display: none; } }

/* ---------- hero ---------- */
.hero { display: grid; gap: var(--step-5); padding: var(--step-4) clamp(1rem, 4vw, 3.5rem) 0; align-items: end; position: relative; }
@media (min-width: 1024px) { .hero { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 4vw, 5rem); padding-top: var(--step-5); } }
.hero-copy { display: grid; gap: var(--step-4); align-content: end; padding-bottom: clamp(1.5rem, 4vw, 4rem); max-width: 36rem; }
.hero-name { font: 600 1.05rem/1.2 var(--f-hand); color: var(--ink-2); }
.hero h1 { font-family: var(--f-display); font-weight: 800; font-stretch: 82%; font-size: clamp(2.7rem, 1.6rem + 4.4vw, 5.6rem); line-height: .92; letter-spacing: -.025em; text-wrap: balance; }
.hero h1 .w { display: inline-block; }
.lede { font-size: clamp(1.08rem, 1rem + .35vw, 1.25rem); color: var(--ink-2); max-width: 32rem; }
.lede strong { color: var(--ink); font-weight: 700; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--step-3) var(--step-4); }
.text-link { font-weight: 700; text-decoration-color: var(--thread); text-decoration-thickness: 2px; min-height: 2.75rem; display: inline-flex; align-items: center; }

/* ---------- the house ---------- */
.house-wrap { position: relative; }
.hero { overflow-x: clip; }
.house {
  --gap: clamp(3px, .5vw, 6px);
  display: grid; grid-template-columns: minmax(0, 1fr); position: relative; transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%);
  transition: transform 520ms var(--handoff-easing);
}
@media (min-width: 700px) { .house { grid-template-columns: minmax(0, 3.1fr) minmax(0, 1.15fr); column-gap: clamp(.5rem, 1.5vw, 1.25rem); } }
.house-roof { grid-column: 1; position: relative; margin: 0 -5% calc(var(--gap) * -1); }
.house-roof svg { width: 100%; height: auto; aspect-ratio: 720 / 150; overflow: visible; }
.roof-face { fill: url(#roof-big); stroke: var(--line); stroke-width: 3; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.roof-chimney { fill: var(--roof-band); stroke: var(--line); stroke-width: 3; vector-effect: non-scaling-stroke; }
.roof-window { fill: var(--seal-paper); stroke: var(--line); stroke-width: 3; vector-effect: non-scaling-stroke; }
.roof-mono { color: var(--seal-ink); }
.roof-sky-star { fill: var(--star); }
.house-body { grid-column: 1; display: grid; gap: 0; position: relative; z-index: 1; }
.floor-row { display: grid; gap: var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--line); padding: 0 var(--gap) var(--gap); }
.floor-row.loft { padding-top: var(--gap); }
.floor-row.loft { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.house-garden { grid-column: 1; margin-top: clamp(.75rem, 3vw, 1.5rem); display: grid; padding: var(--gap); background: var(--line); border-radius: 2px; }
@media (min-width: 700px) { .house-garden { grid-column: 2; grid-row: 2; align-self: end; margin-top: 0; height: calc(66.5% - var(--gap)); } }
.hero-lawn { height: clamp(1.25rem, 3vw, 2.25rem); background: var(--grass); border-top: 3px solid var(--line); position: relative; z-index: 2; }
.house-legend { margin-top: 0; font: 400 .9375rem/1.4 var(--f-hand); color: var(--ink-2); display: flex; gap: .5rem; align-items: center; }
.house-legend .lit { width: .8rem; height: .8rem; border-radius: 50%; background: var(--thread); border: 2px solid var(--line); flex: none; }

.room { position: relative; display: block; background: var(--wall); color: var(--tag-ink); text-decoration: none; overflow: hidden; isolation: isolate; }
.room .scene { width: 100%; height: auto; }
.floor-row:not(.loft) .scene { aspect-ratio: 240 / 160; }
.loft .scene { aspect-ratio: 360 / 140; }
.house-garden .room { height: 100%; }
.house-garden .scene { height: 100%; aspect-ratio: 360 / 150; }
@media (min-width: 700px) { .house-garden .scene { aspect-ratio: auto; } }
.room-tag {
  position: absolute; left: clamp(.25rem, .8vw, .6rem); top: clamp(.25rem, .8vw, .6rem); z-index: 2;
  display: grid; gap: .05rem; padding: .2rem .5rem .25rem; background: var(--tag-paper); color: var(--tag-ink);
  border: 1.5px solid var(--line); border-radius: 3px 9px 9px 3px; max-width: calc(100% - .5rem);
  transition: transform 180ms var(--ease-out);
}
.room-verb { font: 700 clamp(.78rem, .62rem + .55vw, 1.02rem)/1.1 var(--f-hand); display: flex; align-items: center; gap: .3rem; }
.room-verb::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: var(--thread); border: 1.5px solid var(--line); flex: none; }
.room-where { font-size: .75rem; line-height: 1.15; display: none; }
@media (min-width: 1100px) { .room-where { display: block; } }
.room.is-closed .room-tag { border-style: dashed; }
.room.is-closed .room-verb { font-weight: 400; }
.room.is-closed .room-verb::before { background: transparent; }
.room.is-closed .scene { opacity: .62; }
a.room:hover .room-tag, a.room:focus-visible .room-tag { transform: translateY(-3px); }
a.room:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; z-index: 3; }
a.room .glow { transition: opacity 260ms var(--ease-out); }
a.room:hover .glow, a.room:focus-visible .glow { opacity: .55; }

/* the drawing kit: one ink line, flat fills */
.scene .k { stroke: var(--line); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.scene .wall { fill: var(--wall); }
.scene .floor { fill: var(--floor); }
.scene .hue { fill: var(--hue); }
.scene .paper { fill: var(--paper); }
.scene .oak { fill: var(--oak); }
.scene .navy { fill: var(--navy); }
.scene .leaf { fill: var(--leaf); }
.scene .leaf-2 { fill: var(--leaf-2); }
.scene .pot { fill: var(--pot); }
.scene .cork { fill: var(--cork); }
.scene .sky { fill: var(--sky-in); }
.scene .bulb { fill: var(--bulb); }
.scene .none { fill: none; }
.scene .glow { fill: var(--glow); opacity: var(--glow-o); }
.scene .halo { fill: var(--glow); opacity: calc(var(--glow-o) * 1.6); }
.scene .ring { fill: none; stroke: var(--hue); stroke-width: 4; vector-effect: non-scaling-stroke; }
.scene .red { fill: #E0453C; }
.scene .sun { fill: #F2C230; }
.scene .green { fill: #7DB03A; }
.scene .cyan { fill: #2BB3E0; }
.scene .sage { fill: #8FA77E; }
.scene .rattan { fill: #C9A46A; }
.scene .clear { fill: color-mix(in srgb, var(--paper) 55%, transparent); }
.scene .teal-2 { fill: #8FD0D8; }
.scene .lilac { fill: #B79BE0; }
.scene .hedge { fill: var(--leaf-2); }
.scene .lawn { fill: var(--grass); }
.scene .star { fill: var(--star); }

/* the walk-out veil: arriving back from a room, its walls shrink back into the house */
.veil { position: fixed; inset: 0; z-index: 40; pointer-events: none; transform-origin: 0 0; display: none; }
html.lt-js[data-arrived-from-hub="organise"] .veil { display: block; background: var(--wall-organise); }
html.lt-js[data-arrived-from-hub="style"] .veil { display: block; background: var(--wall-style); }
html.lt-js[data-arrived-from-hub="celebrate"] .veil { display: block; background: var(--wall-celebrate); }
.veil.is-done { display: none !important; }
/* if the script never runs, the veil still lifts by itself */
html.lt-js[data-arrived-from-hub] .veil { animation: veil-failsafe 240ms ease-out 2.4s forwards; }
@keyframes veil-failsafe { to { opacity: 0; visibility: hidden; } }

/* stepping in: the rest of the house dims as the chosen room opens */
.house.is-entering a.room:not(.is-chosen), .house.is-entering .room.is-closed { opacity: .35; transition: opacity 300ms var(--ease-out); }
@media (prefers-reduced-motion: no-preference) { .house.is-entering { transform: scale(1.04); } }

/* ---------- the arrival: the house goes up floor by floor, then the lamps come on ---------- */
@media (prefers-reduced-motion: no-preference) {
    html.lt-ready:not([data-arrived-from-hub]) .floor-row { animation: rise 760ms var(--ease-out) both; }
  html.lt-ready:not([data-arrived-from-hub]) .floor-row.f0 { animation-delay: 120ms; }
  html.lt-ready:not([data-arrived-from-hub]) .floor-row.f1 { animation-delay: 260ms; }
  html.lt-ready:not([data-arrived-from-hub]) .floor-row.loft { animation-delay: 400ms; }
  html.lt-ready:not([data-arrived-from-hub]) .house-roof { animation: drop 800ms var(--ease-out) 520ms both; }
  html.lt-ready:not([data-arrived-from-hub]) .house-garden { animation: rise 800ms var(--ease-out) 300ms both; }
  html.lt-ready:not([data-arrived-from-hub]) .room-tag { animation: tag-in 520ms var(--ease-out) both; animation-delay: calc(900ms + var(--i, 0) * 70ms); }
  html.lt-ready:not([data-arrived-from-hub]) .festoon .bulb-on { animation: bulb 420ms ease-out both; animation-delay: calc(1100ms + var(--i, 0) * 90ms); }
  html.lt-ready:not([data-arrived-from-hub]) .hero-copy > * { animation: rise-sm 700ms var(--ease-out) both; animation-delay: calc(80ms + var(--i, 0) * 90ms); }
  .scene .glow, .scene .halo { transition: opacity 420ms ease-out; }
  .room-organise .glow { transition-delay: 120ms; }
  .room-style .glow { transition-delay: 240ms; }
  .room-celebrate .halo { transition-delay: 360ms; }
}
@keyframes rise { from { transform: translateY(28px); opacity: 0; } }
@keyframes rise-sm { from { transform: translateY(14px); } }
@keyframes drop { from { transform: translateY(-22px); opacity: 0; } }
@keyframes grow-x { from { transform: scaleX(.6); } }
@keyframes tag-in { from { transform: translateY(-6px) rotate(-3deg); } }
@keyframes bulb { from { opacity: .2; } }

/* ---------- sections ---------- */
.section { padding: clamp(3.5rem, 8vw, 7rem) clamp(1rem, 4vw, 3.5rem); }
.section-head { display: grid; gap: var(--step-3); max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.section h2 { font-family: var(--f-display); font-weight: 800; font-stretch: 85%; font-size: clamp(2rem, 1.4rem + 2.6vw, 3.6rem); line-height: .98; letter-spacing: -.02em; text-wrap: balance; }
.section-head p { color: var(--ink-2); font-size: 1.125rem; max-width: 38rem; }
.rooms-section { background: var(--ground-2); }

/* the plan: every room as a floor plan, doors drawn the architect's way */
.plan { display: grid; gap: 4px; padding: 4px; background: var(--line); border-radius: 3px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .plan { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .plan { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.plan-room { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr auto; column-gap: var(--step-3); row-gap: .35rem; padding: var(--step-4); background: var(--wall); --ink: light-dark(#172033, #ECF1F7); --ink-2: light-dark(#3B4A5E, #C2CCDA); color: var(--ink); text-decoration: none; min-height: 11rem; }
.plan-room .plan-icon { grid-row: 1 / span 2; width: 3.25rem; height: 3.25rem; }
.plan-verb { font: 800 clamp(1.5rem, 1.2rem + 1vw, 2.1rem)/1 var(--f-display); font-stretch: 85%; letter-spacing: -.01em; }
.plan-where { font: 400 .95rem/1.2 var(--f-hand); color: var(--ink-2); }
.plan-line { grid-column: 1 / -1; align-self: end; font-size: 1.02rem; }
.plan-state { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; font-size: .95rem; }
.plan-door { color: var(--ink); position: absolute; right: 0; bottom: 0; width: 3.5rem; height: 3.5rem; }
#door-open path, #door-shut path { fill: none; stroke: currentColor; stroke-width: 2; vector-effect: non-scaling-stroke; }
#door-open .swing { stroke-dasharray: 3 4; }
a.plan-room .plan-state { color: var(--ink); }
a.plan-room .plan-state .icon { color: var(--ink); transition: transform 180ms var(--ease-out); }
a.plan-room:hover .plan-state .icon { transform: translateX(4px); }
a.plan-room:hover .plan-verb { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--hue); text-underline-offset: .12em; }
a.plan-room:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.plan-room.is-open { min-height: 14rem; }
@media (min-width: 1024px) {
  .plan-room.is-open { grid-column: span 2; min-height: 16rem; }
  .plan-room.is-closed { grid-column: span 2; }
}
.plan-room.is-closed .plan-state { font-weight: 400; font-family: var(--f-hand); color: var(--ink-2); }
.plan-sub { margin: clamp(2.5rem, 5vw, 4rem) 0 var(--step-4); font: 700 1.25rem/1.2 var(--f-hand); color: var(--ink-2); }
symbol .k { stroke: #172033; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
symbol .hue { fill: var(--hue); }
symbol .paper { fill: #FFFFFF; }
symbol .none { fill: none; }
symbol .navy { fill: #2D3A5C; }
symbol .oak { fill: #C8955E; }
symbol .bulb { fill: #FFE7A8; }

/* ---------- about Laura, in her own words ---------- */
.about { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
@media (min-width: 900px) { .about { grid-template-columns: minmax(14rem, 4fr) minmax(0, 7fr); } }
.about-seal { width: min(16rem, 60vw); height: auto; }
.about-mark { display: grid; gap: var(--step-4); }
.about-facts { display: flex; flex-wrap: wrap; gap: .5rem .6rem; padding: 0; list-style: none; }
.about-facts li { font: 600 .95rem/1.2 var(--f-hand); padding: .4rem .7rem; border: 1.5px solid var(--line); border-radius: 3px 10px 10px 3px; background: var(--tag-paper); color: var(--tag-ink); }
.words { display: grid; gap: var(--step-5); padding: 0; list-style: none; }
.words blockquote { font: 600 clamp(1.3rem, 1rem + 1.2vw, 1.9rem)/1.2 var(--f-display); font-stretch: 90%; letter-spacing: -.01em; text-wrap: pretty; max-width: 34ch; }
.words blockquote::before { content: "\201C"; color: var(--thread); }
.words blockquote::after { content: "\201D"; color: var(--thread); }
.words figcaption { margin-top: .5rem; font: 400 .95rem/1.3 var(--f-hand); color: var(--ink-2); }

/* ---------- the front door ---------- */
.door { display: grid; gap: var(--step-5); align-items: center; padding: clamp(2rem, 5vw, 4rem); background: var(--ground-2); border: 2px solid var(--line); border-radius: 4px; }
@media (min-width: 900px) { .door { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.door h2 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3.2rem); }
.door p { color: var(--ink-2); max-width: 36rem; margin-top: var(--step-3); }
.door-actions { display: grid; gap: var(--step-3); justify-items: start; }
.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: 600; text-decoration-color: var(--thread); text-decoration-thickness: 2px; }

.foot { padding: var(--step-5) clamp(1rem, 4vw, 3.5rem) 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; }
.foot .brand { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .house { transition: none; }
}

/* stagger order for the arrival */
.hero-copy > :nth-child(2) { --i: 1; } .hero-copy > :nth-child(3) { --i: 2; } .hero-copy > :nth-child(4) { --i: 3; } .hero-copy > :nth-child(5) { --i: 4; }
.room-style .room-tag { --i: 0; } .room-juggle .room-tag { --i: 1; } .room-share .room-tag { --i: 2; }
.room-celebrate .room-tag { --i: 3; } .room-organise .room-tag { --i: 4; } .room-simplify .room-tag { --i: 5; }
.room-stage .room-tag { --i: 6; } .room-declutter .room-tag { --i: 7; } .room-design .room-tag { --i: 8; }
.festoon .bulb-on:nth-of-type(2) { --i: 1; } .festoon .bulb-on:nth-of-type(3) { --i: 2; } .festoon .bulb-on:nth-of-type(4) { --i: 3; }
.festoon .bulb-on:nth-of-type(5) { --i: 4; } .festoon .bulb-on:nth-of-type(6) { --i: 5; } .festoon .bulb-on:nth-of-type(7) { --i: 6; }
.festoon .bulb-on:nth-of-type(8) { --i: 7; } .festoon .bulb-on:nth-of-type(9) { --i: 8; }
symbol .ring-i { fill: none; stroke: var(--hue); stroke-width: 3; }
symbol .red { fill: #E0453C; } symbol .sage { fill: #8FA77E; }
#door-shut path { stroke-width: 5; }

/* light-dark() takes colours only, so the number that dims or lights the lamps is switched here */
:root { --glow-o: 0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --glow-o: .32; } }
:root[data-theme="dark"] { --glow-o: .32; }