/* New Life Spaces — Design Philosophy hub
 * Generated by build/build-plugin.mjs. Do not edit by hand.
 * Sources: build/tailwind/tw.css · philosophy-src <style> · japandi-tour/tour.css
 */

/* ---------- 1. Tailwind (compiled, preflight off) ---------- */
.visible{visibility:visible}.invisible{visibility:hidden}.static{position:static}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.-bottom-8{bottom:-2rem}.-right-8{right:-2rem}.top-0{top:0}.z-50{z-index:50}.mx-3{margin-left:.75rem;margin-right:.75rem}.mx-auto{margin-left:auto;margin-right:auto}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-14{margin-bottom:3.5rem}.mb-16{margin-bottom:4rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-2{margin-left:.5rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.mt-14{margin-top:3.5rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-7{margin-top:1.75rem}.mt-8{margin-top:2rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.aspect-\[4\/3\]{aspect-ratio:4/3}.aspect-\[4\/5\]{aspect-ratio:4/5}.h-11{height:2.75rem}.h-14{height:3.5rem}.h-20{height:5rem}.h-full{height:100%}.h-px{height:1px}.w-8{width:2rem}.w-auto{width:auto}.w-full{width:100%}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-\[220px\]{max-width:220px}.max-w-content{max-width:1200px}.max-w-prose{max-width:68ch}.max-w-xl{max-width:36rem}.max-w-xs{max-width:20rem}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-10{gap:2.5rem}.gap-12{gap:3rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-9{gap:2.25rem}.gap-x-10{-moz-column-gap:2.5rem;column-gap:2.5rem}.gap-x-8{-moz-column-gap:2rem;column-gap:2rem}.gap-y-14{row-gap:3.5rem}.gap-y-4{row-gap:1rem}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem*var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem*var(--tw-space-y-reverse))}.self-stretch{align-self:stretch}.overflow-hidden{overflow:hidden}.border{border-width:1px}.border-y{border-top-width:1px}.border-b,.border-y{border-bottom-width:1px}.border-l-2{border-left-width:2px}.border-t{border-top-width:1px}.border-clay{--tw-border-opacity:1;border-color:rgb(180 113 78/var(--tw-border-opacity,1))}.border-paper\/10{border-color:hsla(40,47%,96%,.1)}.border-paper\/15{border-color:hsla(40,47%,96%,.15)}.border-sage\/50{border-color:hsla(96,13%,59%,.5)}.border-sand{--tw-border-opacity:1;border-color:rgb(235 227 214/var(--tw-border-opacity,1))}.bg-clay{background-color:rgb(180 113 78/var(--tw-bg-opacity,1))}.bg-clay,.bg-forest{--tw-bg-opacity:1}.bg-forest{background-color:rgb(38 51 42/var(--tw-bg-opacity,1))}.bg-forest\/10{background-color:rgba(38,51,42,.1)}.bg-paper{--tw-bg-opacity:1;background-color:rgb(250 247 241/var(--tw-bg-opacity,1))}.bg-paper\/90{background-color:hsla(40,47%,96%,.9)}.bg-sand{--tw-bg-opacity:1;background-color:rgb(235 227 214/var(--tw-bg-opacity,1))}.bg-sand\/50{background-color:hsla(37,34%,88%,.5)}.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-clay\/35{--tw-gradient-from:rgba(180,113,78,.35) var(--tw-gradient-from-position);--tw-gradient-to:rgba(180,113,78,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-forest\/60{--tw-gradient-from:rgba(38,51,42,.6) var(--tw-gradient-from-position);--tw-gradient-to:rgba(38,51,42,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-forest\/70{--tw-gradient-from:rgba(38,51,42,.7) var(--tw-gradient-from-position);--tw-gradient-to:rgba(38,51,42,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-forest\/80{--tw-gradient-from:rgba(38,51,42,.8) var(--tw-gradient-from-position);--tw-gradient-to:rgba(38,51,42,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-forest\/85{--tw-gradient-from:rgba(38,51,42,.85) var(--tw-gradient-from-position);--tw-gradient-to:rgba(38,51,42,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-forest\/90{--tw-gradient-from:rgba(38,51,42,.9) var(--tw-gradient-from-position);--tw-gradient-to:rgba(38,51,42,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-moss\/40{--tw-gradient-from:rgba(94,115,85,.4) var(--tw-gradient-from-position);--tw-gradient-to:rgba(94,115,85,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.from-sage\/30{--tw-gradient-from:hsla(96,13%,59%,.3) var(--tw-gradient-from-position);--tw-gradient-to:hsla(96,13%,59%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-forest\/40{--tw-gradient-to:rgba(38,51,42,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgba(38,51,42,.4) var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-forest\/75{--tw-gradient-to:rgba(38,51,42,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgba(38,51,42,.75) var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-forest\/80{--tw-gradient-to:rgba(38,51,42,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgba(38,51,42,.8) var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-forest\/85{--tw-gradient-to:rgba(38,51,42,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),rgba(38,51,42,.85) var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-forest{--tw-gradient-to:#26332a var(--tw-gradient-to-position)}.to-forest\/95{--tw-gradient-to:rgba(38,51,42,.95) var(--tw-gradient-to-position)}.to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.object-cover{-o-object-fit:cover;object-fit:cover}.p-2{padding:.5rem}.p-6{padding:1.5rem}.px-12{padding-left:3rem;padding-right:3rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-16{padding-top:4rem;padding-bottom:4rem}.py-20{padding-top:5rem;padding-bottom:5rem}.py-24{padding-top:6rem;padding-bottom:6rem}.py-28{padding-top:7rem;padding-bottom:7rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.pb-1{padding-bottom:.25rem}.pb-24{padding-bottom:6rem}.pl-8{padding-left:2rem}.pt-2{padding-top:.5rem}.pt-24{padding-top:6rem}.pt-8{padding-top:2rem}.text-center{text-align:center}.align-top{vertical-align:top}.font-body{font-family:Karla,system-ui,sans-serif}.font-display{font-family:Fraunces,Georgia,serif}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-\[12vw\]{font-size:12vw}.text-\[13px\]{font-size:13px}.text-\[13vw\]{font-size:13vw}.text-\[15px\]{font-size:15px}.text-\[16px\]{font-size:16px}.text-\[17px\]{font-size:17px}.text-\[19px\]{font-size:19px}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-light{font-weight:300}.font-medium{font-weight:500}.font-normal{font-weight:400}.uppercase{text-transform:uppercase}.italic{font-style:italic}.leading-\[1\.02\]{line-height:1.02}.leading-\[1\.05\]{line-height:1.05}.leading-\[1\.25\]{line-height:1.25}.leading-\[1\.2\]{line-height:1.2}.leading-\[1\.45\]{line-height:1.45}.leading-\[1\.5\]{line-height:1.5}.leading-\[1\.85\]{line-height:1.85}.leading-\[1\.8\]{line-height:1.8}.leading-none{line-height:1}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}.leading-tight{line-height:1.25}.tracking-\[0\.15em\]{letter-spacing:.15em}.tracking-\[0\.28em\]{letter-spacing:.28em}.tracking-\[0\.2em\]{letter-spacing:.2em}.tracking-wide{letter-spacing:.025em}.tracking-widest{letter-spacing:.1em}.text-clay{color:rgb(180 113 78/var(--tw-text-opacity,1))}.text-clay,.text-forest{--tw-text-opacity:1}.text-forest{color:rgb(38 51 42/var(--tw-text-opacity,1))}.text-forest\/80{color:rgba(38,51,42,.8)}.text-ink{--tw-text-opacity:1;color:rgb(28 31 26/var(--tw-text-opacity,1))}.text-ink\/50{color:rgba(28,31,26,.5)}.text-ink\/55{color:rgba(28,31,26,.55)}.text-ink\/70{color:rgba(28,31,26,.7)}.text-ink\/75{color:rgba(28,31,26,.75)}.text-ink\/80{color:rgba(28,31,26,.8)}.text-moss{color:rgb(94 115 85/var(--tw-text-opacity,1))}.text-moss,.text-paper{--tw-text-opacity:1}.text-paper{color:rgb(250 247 241/var(--tw-text-opacity,1))}.text-paper\/30{color:hsla(40,47%,96%,.3)}.text-paper\/40{color:hsla(40,47%,96%,.4)}.text-paper\/45{color:hsla(40,47%,96%,.45)}.text-paper\/55{color:hsla(40,47%,96%,.55)}.text-paper\/60{color:hsla(40,47%,96%,.6)}.text-paper\/70{color:hsla(40,47%,96%,.7)}.text-paper\/75{color:hsla(40,47%,96%,.75)}.text-paper\/80{color:hsla(40,47%,96%,.8)}.text-paper\/85{color:hsla(40,47%,96%,.85)}.text-paper\/90{color:hsla(40,47%,96%,.9)}.text-sage{--tw-text-opacity:1;color:rgb(147 164 136/var(--tw-text-opacity,1))}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-20{opacity:.2}.opacity-25{opacity:.25}.opacity-30{opacity:.3}.opacity-40{opacity:.4}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-90{opacity:.9}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-\[0_1px_3px_rgba\(28\2c 31\2c 26\2c 0\.06\)\]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-\[0_1px_3px_rgba\(28\2c 31\2c 26\2c 0\.06\)\]{--tw-shadow:0 1px 3px rgba(28,31,26,.06);--tw-shadow-colored:0 1px 3px var(--tw-shadow-color)}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-lg,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.brightness-0{--tw-brightness:brightness(0)}.brightness-0,.invert{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.invert{--tw-invert:invert(100%)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-sm{--tw-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.duration-700{transition-duration:.7s}.hover\:border-sage\/60:hover{border-color:hsla(96,13%,59%,.6)}.hover\:bg-moss:hover{--tw-bg-opacity:1;background-color:rgb(94 115 85/var(--tw-bg-opacity,1))}.hover\:bg-sage\/15:hover{background-color:hsla(96,13%,59%,.15)}.hover\:bg-sand:hover{--tw-bg-opacity:1;background-color:rgb(235 227 214/var(--tw-bg-opacity,1))}.hover\:text-forest:hover{--tw-text-opacity:1;color:rgb(38 51 42/var(--tw-text-opacity,1))}.hover\:text-paper:hover{--tw-text-opacity:1;color:rgb(250 247 241/var(--tw-text-opacity,1))}.hover\:opacity-100:hover{opacity:1}.hover\:shadow-\[0_10px_28px_rgba\(28\2c 31\2c 26\2c 0\.10\)\]:hover{--tw-shadow:0 10px 28px rgba(28,31,26,.1);--tw-shadow-colored:0 10px 28px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.group:hover .group-hover\:w-14{width:3.5rem}.group:hover .group-hover\:scale-\[1\.03\]{--tw-scale-x:1.03;--tw-scale-y:1.03;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:text-moss{--tw-text-opacity:1;color:rgb(94 115 85/var(--tw-text-opacity,1))}.group:hover .group-hover\:text-sage{--tw-text-opacity:1;color:rgb(147 164 136/var(--tw-text-opacity,1))}@media (min-width:640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:text-6xl{font-size:3.75rem;line-height:1}}@media (min-width:768px){.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width:1024px){.lg\:sticky{position:sticky}.lg\:top-32{top:8rem}.lg\:col-span-4{grid-column:span 4/span 4}.lg\:col-span-5{grid-column:span 5/span 5}.lg\:col-span-7{grid-column:span 7/span 7}.lg\:col-span-8{grid-column:span 8/span 8}.lg\:mb-20{margin-bottom:5rem}.lg\:mt-10{margin-top:2.5rem}.lg\:block{display:block}.lg\:flex{display:flex}.lg\:hidden{display:none}.lg\:aspect-auto{aspect-ratio:auto}.lg\:h-14{height:3.5rem}.lg\:h-24{height:6rem}.lg\:h-\[44vh\]{height:44vh}.lg\:min-h-\[240px\]{min-height:240px}.lg\:min-h-\[280px\]{min-height:280px}.lg\:flex-1{flex:1 1 0%}.lg\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:gap-16{gap:4rem}.lg\:gap-20{gap:5rem}.lg\:self-center{align-self:center}.lg\:self-stretch{align-self:stretch}.lg\:p-7{padding:1.75rem}.lg\:px-10{padding-left:2.5rem;padding-right:2.5rem}.lg\:py-20{padding-top:5rem;padding-bottom:5rem}.lg\:py-24{padding-top:6rem;padding-bottom:6rem}.lg\:py-28{padding-top:7rem;padding-bottom:7rem}.lg\:py-32{padding-top:8rem;padding-bottom:8rem}.lg\:py-40{padding-top:10rem;padding-bottom:10rem}.lg\:py-44{padding-top:11rem;padding-bottom:11rem}.lg\:pb-32{padding-bottom:8rem}.lg\:pt-36{padding-top:9rem}.lg\:text-5xl{font-size:3rem;line-height:1}.lg\:text-\[1\.75rem\]{font-size:1.75rem}.lg\:text-\[1\.9rem\]{font-size:1.9rem}.lg\:text-\[2\.5rem\]{font-size:2.5rem}.lg\:text-\[2\.75rem\]{font-size:2.75rem}.lg\:text-\[2rem\]{font-size:2rem}.lg\:text-\[3\.25rem\]{font-size:3.25rem}.lg\:text-\[3rem\]{font-size:3rem}.lg\:text-\[5\.5rem\]{font-size:5.5rem}.lg\:text-\[5rem\]{font-size:5rem}.lg\:text-xl{font-size:1.25rem;line-height:1.75rem}}

/* ---------- 2. Shared components ---------- */
html{scroll-behavior:smooth} body{-webkit-font-smoothing:antialiased}
  .grain::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E")}
  .rule-label{display:flex;align-items:center;gap:1rem}
  .rule-label::after{content:'';flex:1;height:1px;background:currentColor;opacity:.25}
  @keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
  .rise{animation:rise .9s cubic-bezier(.22,.61,.36,1) both}
  .link-draw{position:relative}
  .link-draw::after{content:'';position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:currentColor;
    transform:scaleX(0);transform-origin:right;transition:transform .45s cubic-bezier(.22,.61,.36,1)}
  .link-draw:hover::after{transform:scaleX(1);transform-origin:left}
  .dropcap::first-letter{font-family:'Fraunces',Georgia,serif;float:left;font-size:4.6rem;line-height:.82;
    padding-right:.11em;padding-top:.06em;font-weight:300;color:#5E7355}
  #demoFlag{position:fixed;left:1rem;bottom:1rem;z-index:60}
  @media (prefers-reduced-motion:reduce){.rise{animation:none}html{scroll-behavior:auto}}

/* ---------- 3. Interactive tour ---------- */
/* New Life Spaces — Japandi flagship tour
   Tokens per design/README.md. No framework, no build step.
   Progressive enhancement: everything below works without JS;
   `html.js` styles are the enhanced (tabbed + slider) layer only. */

:root {
  /* Palette adopted from the Design Philosophy hub (design-philosophy.html)
     so the tour and the six topic pages read as one site. */
  --forest: #26332A;
  --moss:   #5E7355;
  --sage:   #93A488;
  --clay:   #B4714E;
  /* Clay is a mid tone: it reads well on paper but only manages 2.5:1 on
     the dark hero, well under AA. This lighter cast is for text sitting
     on forest, and keeps the same hue so the accent still looks related. */
  --clay-soft: #D9A183;
  --paper:  #FAF7F1;
  --sand:   #EBE3D6;
  --ink:    #1C1F1A;

  --panel: #FFFDF9;
  --band: #F3EDE3;
  --body: #4F544B;
  --muted: #6E7369;
  --line: #EBE3D6;
  --line-strong: #DDD2C0;
  --accent: var(--clay);

  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --wrap: 1200px;
  --gutter: 40px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

h1, h2 { font-family: var(--display); font-weight: 300; line-height: 1.12; margin: 0; }
h3 { font-family: var(--display); font-weight: 400; line-height: 1.2; margin: 0; }

/* The paper grain lives in David's own stylesheet, which the plugin bundles
   ahead of this file. A copy here once carried `.grain > * { position:
   relative }` to lift content above the ::before overlay — that rule outranks
   Tailwind's `.absolute` and, once both files were bundled together, it broke
   the absolutely-positioned hero image on every topic page. The tour markup
   never used `.grain` at all, so the whole block is gone. */

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

.eyebrow {
  font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase;
  font-weight: 500; color: var(--moss); margin: 0;
  display: flex; align-items: center; gap: 1rem;
}
.eyebrow::after { content: ''; flex: 1; height: 1px; background: currentColor; opacity: .25; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 14px 20px; text-decoration: none;
}
.skip:focus { left: 8px; top: 8px; }

/* Visible, consistent focus everywhere */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* ---------- Header ---------- */
.site-head {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.site-head .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding-top: 22px; padding-bottom: 22px;
}
.brand {
  font-family: var(--display); font-size: 21px; font-weight: 700;
  color: var(--ink); text-decoration: none; letter-spacing: 0.02em;
}
.site-nav { display: flex; gap: 26px; align-items: center; font-size: 15px; flex-wrap: wrap; }
.site-nav a { color: var(--ink); text-decoration: none; padding: 6px 0; }
.site-nav a:hover { color: var(--accent); }
.site-nav a[aria-current="page"] { border-bottom: 2px solid var(--accent); }
.site-nav a.btn-dark { color: var(--paper); padding: 12px 20px; }
.site-nav a.btn-dark:hover { color: var(--paper); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 15px 28px;
  font-family: inherit; font-size: 13px; font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase; line-height: 1.2;
  border-radius: 0; border: 1px solid transparent; cursor: pointer;
  text-decoration: none; transition: background-color 300ms ease, color 300ms ease;
}
.btn-accent { background: var(--forest); color: var(--paper); }
.btn-accent:hover { background: var(--moss); }
.btn-dark { background: var(--ink); color: var(--paper); }
.btn-dark:hover { background: var(--moss); }
.btn-ghost { background: transparent; color: var(--forest); border-color: var(--sage); }
.btn-ghost:hover { background: var(--sand); }

/* ---------- Hero ---------- */
.hero { padding: 76px 0 8px; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(42px, 5.6vw, 74px); margin: 18px 0 6px; }
.hero .sub { font-family: var(--display); font-size: clamp(21px, 2.4vw, 30px); color: var(--accent); margin: 0 0 20px; line-height: 1.2; }
.hero .lede { font-size: 19px; line-height: 1.62; color: var(--body); max-width: 52ch; }
.hero .meta { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 22px 0 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.hero-figure { position: relative; }
.hero-figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ---------- Generic section ---------- */
.section { padding: 76px 0; }
.section--band { background: var(--band); }
.section h2 { font-size: clamp(30px, 3.6vw, 44px); }
.prose { max-width: 66ch; color: var(--body); font-size: 17.5px; }

/* Tailwind's preflight is injected after this stylesheet and resets `p` to
   margin:0, which collapsed the space between paragraphs. The rhythm is set
   here with selectors specific enough to outrank it. */
.prose p + p,
.room-text p + p,
.note p + p { margin-top: 1.15em; }

.two-col { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 52px; align-items: start; }
/* Without the photo this column is the short one, so it holds while the prose
   scrolls past rather than leaving a hole under it. 112px clears the sticky
   site header. */
.two-col > h2, .two-col > .premise-side { position: sticky; top: 112px; }

/* Left column of the premise section: the heading plus David's own list of
   what the basement already had, lifted out of the opening sentence. */
.premise-side { display: flex; flex-direction: column; gap: 26px; align-self: start; }
.constraints h3 {
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 4px;
}
.constraints ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.constraints li {
  display: flex; align-items: baseline; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
  font-size: 15.5px; line-height: 1.45; color: var(--body);
}
.constraints li::before {
  content: ""; flex: 0 0 auto;
  width: 6px; height: 6px; background: var(--accent);
  transform: translateY(-1px);
}

.constraints-fig { margin: 22px 0 0; }
.constraints-fig img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border: 1px solid var(--line-strong);
}
.constraints-fig figcaption { font-size: 14px; line-height: 1.5; color: var(--muted); margin-top: 10px; }

@media (max-width: 1000px) {
  .two-col > h2, .two-col > .premise-side { position: static; }
  .premise-side { gap: 20px; }
  .constraints-fig img { aspect-ratio: 4 / 3; }
}

/* ---------- Before / after ---------- */
.ba { margin: 0; }
.ba-stage {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--band);
  border: 1px solid var(--line-strong);
  --pos: 50%;
}
.ba-stage img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.ba-tag {
  position: absolute; bottom: 14px; z-index: 3;
  background: rgba(38, 36, 31, 0.82); color: var(--paper);
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700;
  padding: 7px 12px; pointer-events: none;
}
.ba-tag--before { left: 14px; }
.ba-tag--after { right: 14px; }
.ba-caption { font-size: 14.5px; color: var(--muted); margin-top: 12px; }

/* Shown only once the slider actually exists */
.js-only { display: none; }
.js .js-only { display: block; }
.hint {
  font-size: 14.5px; color: var(--muted); margin: 0 0 14px;
  display: flex; align-items: center; gap: 8px;
}

/* No-JS fallback: two images side by side, both fully visible */
.ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.ba-pair figure { margin: 0; position: relative; }
.ba-pair img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.js .ba-pair { display: none; }
.ba-stage { display: none; }
.js .ba-stage { display: block; }

/* Enhanced slider */
.js .ba-stage .ba-after { clip-path: inset(0 0 0 var(--pos)); }
.ba-divider {
  position: absolute; top: 0; bottom: 0; left: var(--pos);
  width: 2px; background: var(--panel); transform: translateX(-1px);
  z-index: 2; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(38, 36, 31, 0.25);
}
.ba-knob {
  position: absolute; top: 50%; left: var(--pos);
  transform: translate(-50%, -50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--panel); color: var(--ink);
  display: grid; place-items: center; z-index: 2; pointer-events: none;
  box-shadow: 0 2px 10px rgba(38, 36, 31, 0.32);
}
.ba-range {
  position: absolute; inset: 0; z-index: 4;
  width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize;
  -webkit-appearance: none; appearance: none; background: transparent;
}
.ba-range::-webkit-slider-thumb { -webkit-appearance: none; width: 52px; height: 52px; }
.ba-range::-moz-range-thumb { width: 52px; height: 52px; border: 0; opacity: 0; }
.ba-range:focus-visible { outline: none; }
.ba-range:focus-visible ~ .ba-knob {
  outline: 3px solid var(--accent); outline-offset: 3px;
}

/* ---------- Room navigator ---------- */
.rooms-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; flex-wrap: wrap; margin-bottom: 30px; }
.rooms-head p { max-width: 46ch; color: var(--body); margin: 0; }

.roomnav { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.roomnav li { margin: 0; }
.roomnav a, .roomnav button {
  display: flex; flex-direction: column; gap: 0; width: 100%;
  background: var(--panel); border: 1px solid var(--line-strong);
  padding: 0; text-align: left; font-family: inherit; color: var(--ink);
  text-decoration: none; cursor: pointer; min-height: 48px;
  transition: border-color 160ms ease, transform 160ms ease;
}
.roomnav a:hover, .roomnav button:hover { border-color: var(--ink); }
.roomnav .rn-thumb { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.roomnav .rn-label { padding: 11px 12px 13px; font-size: 14.5px; font-weight: 700; line-height: 1.3; }
.roomnav .rn-status { display: block; font-size: 12px; font-weight: 400; color: var(--muted); margin-top: 3px; }
.js .roomnav [aria-selected="true"] { border-color: var(--ink); border-width: 2px; background: var(--band); }
.js .roomnav [aria-selected="true"] .rn-label::after {
  content: ""; display: block; width: 26px; height: 2px; background: var(--accent); margin-top: 8px;
}

/* ---------- Room panel ---------- */
.room { padding: 72px 0; border-top: 1px solid var(--line); }
.js .room { border-top: 0; padding-top: 52px; }
.js .room[hidden] { display: none; }

.room-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 34px; }

/* ---------- Sticky room column ----------
   One column pins while the other scrolls past it, with the room heading
   inside the pinned side. The grid item has to stretch to the row height or
   the wrapper inside it has no room to travel.

   Anchored to the top. `bottom` anchoring was tried for blocks taller than the
   screen and does not engage on a downward scroll — it holds an element that
   is entering from below, which is the opposite case. Where a block is taller
   than the viewport it pins with its tail below the fold and that tail comes
   into view as the block releases at the end of the room. */
.room-body--sticky-text .room-text,
.room-body--sticky-figures .room-figures { align-self: stretch; }

.room-sticky { display: flex; flex-direction: column; gap: 34px; }
.room-text .room-sticky { display: block; }
.room-sticky .room-head { margin-bottom: 0; }
.room-text .room-sticky .room-head { margin-bottom: 26px; }

@media (min-width: 1001px) {
  .js .room-sticky { position: sticky; top: 112px; }
}
.room-head .room-n { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.room-head h2 { font-size: clamp(30px, 4vw, 48px); }
.room-head .room-name { color: var(--accent); }

.room-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 52px; align-items: start; }
.room-figures { display: flex; flex-direction: column; gap: 34px; }
.room-text { color: var(--body); font-size: 17.5px; }
.room-text .lead { font-size: 20px; line-height: 1.55; color: var(--ink); font-family: var(--display); }
.room-sub { margin-top: 30px; }
.room-sub h3 { font-size: 21px; margin-bottom: 10px; }

.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-top: 30px; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--line-strong); }

.note {
  border-left: 3px solid var(--accent); background: var(--panel);
  padding: 18px 22px; color: var(--body); font-size: 16px;
}
.note strong { color: var(--ink); }

/* Link from a room back to the principle it demonstrates. */
.principle {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px;
  margin-top: 34px; padding: 18px 22px;
  background: var(--sand); border-left: 3px solid var(--accent);
}
.principle-k {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted); font-weight: 500;
}
.principle a {
  font-family: var(--display); font-size: 19px; color: var(--forest);
  text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 1px;
}
.principle a:hover { color: var(--moss); }
.principle-why { flex: 1 1 100%; font-size: 15px; color: var(--body); line-height: 1.5; }

.room-foot {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: 46px; padding-top: 24px; border-top: 1px solid var(--line);
}

/* ---------- Highlights ---------- */
.highlights { list-style: none; margin: 30px 0 0; padding: 0; border-top: 1px solid var(--ink); }
.highlights li { border-bottom: 1px solid var(--line); }
.highlights .h-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: none; border: 0; padding: 20px 0; min-height: 48px;
  font-family: inherit; font-size: 18px; font-weight: 700; color: var(--ink);
  text-align: left; cursor: pointer;
}
.highlights .h-btn:hover { color: var(--accent); }
.highlights .h-num { font-family: var(--display); font-size: 15px; color: var(--accent); min-width: 28px; }
.highlights .h-mark { flex: 0 0 auto; transition: transform 200ms ease; }
.highlights .h-btn[aria-expanded="true"] .h-mark { transform: rotate(45deg); }
.highlights .h-panel { padding: 0 0 22px 28px; max-width: 70ch; color: var(--body); }
.js .highlights .h-panel[hidden] { display: none; }

/* ---------- CTA ---------- */
.text-clay-soft { color: var(--clay-soft); }

/* The "Or call" number is a real conversion action on a phone, but as an
   inline link it renders ~17px tall — well under the 44px target size. Padding
   it out only on small screens keeps the sentence intact on desktop. */
@media (max-width: 767px) {
  .nls-dp a[href^="tel:"] {
    display: inline-block;
    min-height: 44px;
    line-height: 44px;
    padding: 0 4px;
  }
}
.cta { background: var(--ink); color: var(--paper); padding: 74px 0; }
.cta h2 { font-size: clamp(30px, 3.6vw, 42px); }
.cta p { color: #D8D2C6; max-width: 54ch; margin: 16px 0 28px; }
.cta .btn-ghost { color: var(--paper); border-color: var(--paper); }
.cta .btn-ghost:hover { background: rgba(243, 238, 229, 0.12); }

/* ---------- Footer ---------- */
.site-foot { padding: 34px 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  :root { --gutter: 24px; }
  .hero .wrap, .room-body, .two-col { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .hero { padding-top: 48px; }
  .roomnav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .section, .room { padding: 52px 0; }
}

@media (max-width: 620px) {
  body { font-size: 16.5px; }
  .site-head .wrap { flex-direction: column; align-items: flex-start; gap: 14px; }
  .site-nav { gap: 16px; font-size: 14.5px; }
  .roomnav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ba-pair { grid-template-columns: 1fr; }
  .ba-stage { aspect-ratio: 3 / 2; }
  .hero-actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ==========================================================================
   Divi interop
   ==========================================================================
   Divi's stylesheet and its Customizer CSS both style bare elements:

     h1 … h6 { color: #333 }               ← hero headings on forest went grey
     a        { color: rgba(0,40,80,.06) }  ← links at 6% alpha, near-invisible
     body     { font-size: 14px }
     h1 … h6  { line-height: 1.4em }

   Utility classes (0,1,0) already outrank those, which is why `text-forest`,
   `font-display` and the buttons were never affected. The casualties were the
   places where the design *inherits* a colour from a parent — the hero h1
   inside `text-paper`, the "Continue reading" headings, the breadcrumb.

   Specificity here is deliberately 0,0,2: `main` (0,0,1) + `:where()` (0) +
   the element (0,0,1). That is one notch above a bare element selector and
   one notch below any utility class, so these rules beat the theme without
   ever beating our own CSS — and without depending on load order, which
   matters because Divi prints its Customizer sheet manually, after ours. */

main:where(.nls-dp) h1,
main:where(.nls-dp) h2,
main:where(.nls-dp) h3,
main:where(.nls-dp) h4,
main:where(.nls-dp) h5,
main:where(.nls-dp) h6,
main:where(.nls-dp) p,
main:where(.nls-dp) li,
main:where(.nls-dp) blockquote,
main:where(.nls-dp) figcaption,
main:where(.nls-dp) span,
main:where(.nls-dp) strong,
main:where(.nls-dp) em { color: inherit; }

main:where(.nls-dp) a,
main:where(.nls-dp) a:hover,
main:where(.nls-dp) a:focus { color: inherit; text-decoration: none; }

/* Divi forces 1.4em on every heading; the display sizes need their own. */
main:where(.nls-dp) h1,
main:where(.nls-dp) h2,
main:where(.nls-dp) h3 { line-height: 1.15; }

/* Divi's body is 14px. Inheritance resolves by proximity, not specificity,
   so setting it on our own container is enough. */
.nls-dp { font-size: 17px; line-height: 1.6; }

/* Divi adds bullets and indents to lists in page content. */
main:where(.nls-dp) ul { list-style: none; margin: 0; padding: 0; }