/* ==========================================================================
   CHR Builds — Blog
   All article text is plain, visible HTML. Motion is limited to images,
   figures and decorative lines so nothing a reader or crawler needs is hidden.
   ========================================================================== */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.main-nav a[aria-current="page"] { color: #fff; }
.main-nav a[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1.5px;
  background: var(--color-gold);
  box-shadow: 0 0 8px var(--color-gold-glow);
}
.site-header.nav-open .main-nav a[aria-current="page"]::after { display: none; }
.site-header.nav-open .main-nav a[aria-current="page"] { color: var(--color-gold-bright); }

/* ---- Breadcrumb + meta ---- */
.breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 0 0 26px;
  padding: 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.breadcrumb li + li::before {
  content: '/';
  color: var(--color-gold);
  margin-right: 10px;
}
.breadcrumb a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumb a:hover { color: #fff; }
.breadcrumb [aria-current="page"] { color: var(--color-text); }

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  font-size: 0.88rem;
  color: var(--color-text-muted);
  margin: 0 0 20px;
}
.post-meta a { color: var(--color-text); text-decoration: none; border-bottom: 1px solid rgba(176, 141, 87, 0.5); }
.post-meta a:hover { color: #fff; border-color: var(--color-gold); }
.post-category {
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.74rem;
  font-weight: 600;
}
.post-meta-sep { width: 4px; height: 4px; border-radius: 50%; background: rgba(176, 141, 87, 0.7); }

/* ==========================================================================
   Article hero — the opening shot
   ========================================================================== */
.post-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: min(80vh, 780px);
  display: flex;
  align-items: flex-end;
  padding: 160px 0 72px;
}
.post-hero > .container { width: 100%; }
.post-hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  /* The photo dissolves into the page instead of ending on an edge */
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}
.post-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  animation: post-push 20s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes post-push { from { scale: 1.14; } to { scale: 1; } }
.post-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(5, 9, 15, 0.74) 0%, rgba(5, 9, 15, 0.5) 32%, rgba(5, 9, 15, 0.78) 62%, rgba(5, 9, 15, 0.55) 85%, rgba(5, 9, 15, 0) 100%),
    radial-gradient(ellipse 55% 32% at 18% 62%, rgba(176, 141, 87, 0.16), transparent 70%);
}
.post-hero h1 {
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: 1.04;
  max-width: 15ch;
  margin: 0;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.45);
}

/* ==========================================================================
   Article layout
   ========================================================================== */
.post-layout {
  display: grid;
  grid-template-columns: minmax(0, 720px) minmax(200px, 1fr);
  gap: 80px;
  padding-top: 64px;
  padding-bottom: 72px;
}

.post-body { font-size: 1.1rem; line-height: 1.8; min-width: 0; }
.post-body p { color: #C3CBD6; margin: 0 0 1.25em; }
.post-body strong { color: #fff; font-weight: 600; }
.post-body a { color: var(--color-link); text-underline-offset: 4px; text-decoration-thickness: 1px; }
.post-body a:hover { color: #fff; }
.post-body h2 {
  font-size: clamp(1.75rem, 3.2vw, 2.4rem);
  line-height: 1.15;
  margin: 0 0 0.7em;
}
.post-section { padding-top: 72px; scroll-margin-top: 100px; }

/* The direct answer, immediately under the H1 */
.post-answer {
  position: relative;
  padding-left: 28px;
  border-left: 2px solid var(--color-gold);
}
.post-answer p { color: var(--color-text); font-size: 1.22rem; line-height: 1.7; }
.post-answer p:first-child { font-size: clamp(1.3rem, 2.2vw, 1.5rem); line-height: 1.6; color: #fff; }
.post-answer p:last-child { margin-bottom: 0; }

/* Hyper-focus moments: they're always readable; JS only adds the light */
.key-question {
  position: relative;
  margin: 72px 0 0;
  padding: 40px 0 8px;
  font-size: 1.05rem;
  color: var(--color-text-muted) !important;
}
.key-question::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg, var(--color-gold-bright), transparent);
  box-shadow: 0 0 12px rgba(205, 170, 114, 0.6);
}
.key-question strong {
  display: block;
  margin-top: 16px;
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: 'opsz' 96;
  font-size: clamp(1.9rem, 3.8vw, 2.9rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #F6ECD8;
  transition: text-shadow 1.6s ease;
}
.js .key-question::before { transform: scaleX(0); transform-origin: left; transition: transform 1.4s cubic-bezier(0.65, 0, 0.35, 1); }
.js .key-question.is-lit::before { transform: scaleX(1); }
.key-question.is-lit strong { text-shadow: 0 0 42px rgba(205, 170, 114, 0.32); }

.post-callout {
  position: relative;
  margin: 32px 0 !important;
  padding: 26px 30px;
  border-radius: 12px;
  border: 1px solid rgba(176, 141, 87, 0.4);
  background:
    radial-gradient(ellipse at 0% 0%, rgba(176, 141, 87, 0.16), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  font-size: 1.05rem;
  color: var(--color-text) !important;
  transition: box-shadow 1.2s ease, border-color 1.2s ease;
}
.post-callout strong { font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; line-height: 1.4; color: #F6ECD8; }
.post-callout.is-lit { border-color: rgba(205, 170, 114, 0.7); box-shadow: 0 0 60px rgba(176, 141, 87, 0.12); }

/* Statistic figures — text stays put; only the bars animate */
.post-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 36px 0 32px;
}
.post-stat {
  position: relative;
  overflow: hidden;
  padding: 28px 26px 32px;
  border-radius: 12px;
  border: 1px solid rgba(176, 141, 87, 0.35);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
}
.post-stat-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(3rem, 7vw, 4.6rem);
  line-height: 1;
  color: var(--color-gold-bright);
  text-shadow: 0 0 40px rgba(205, 170, 114, 0.25);
}
.post-stat-label { display: block; margin-top: 12px; color: var(--color-text); font-size: 1rem; line-height: 1.5; }
.post-stat-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: var(--pct);
  background: linear-gradient(90deg, rgba(176, 141, 87, 0.4), var(--color-gold-bright));
  box-shadow: 0 0 12px rgba(205, 170, 114, 0.6);
}
.js .post-stat-bar { transform: scaleX(0); transform-origin: left; transition: transform 1.6s cubic-bezier(0.65, 0, 0.35, 1) 0.2s; }
.js .post-stats.is-lit .post-stat-bar { transform: scaleX(1); }
.js .post-stats.is-lit .post-stat:nth-child(2) .post-stat-bar { transition-delay: 0.45s; }
.post-stats figcaption { grid-column: 1 / -1; font-size: 0.88rem; color: var(--color-text-dim); }

/* Comparison table */
.post-table-wrap {
  margin: 28px 0 22px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
}
.post-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; line-height: 1.55; }
.post-table th,
.post-table td { padding: 16px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border-subtle); }
.post-table tbody tr:last-child > * { border-bottom: none; }
.post-table thead th {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold);
  background: rgba(176, 141, 87, 0.08);
}
.post-table tbody th { color: #fff; font-weight: 600; width: 26%; }
.post-table td { color: var(--color-text-muted); }
.post-table tbody tr { transition: background 0.3s ease; }
.post-table tbody tr:hover { background: rgba(176, 141, 87, 0.06); }


/* Figures */
.post-figure { margin: 48px 0 8px; }
.post-figure figcaption {
  margin-top: 14px;
  padding-left: 14px;
  border-left: 1px solid var(--color-gold);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* Closing call to action */
.post-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: 36px;
  padding: clamp(30px, 5vw, 56px);
  border-radius: 16px;
  border: 1px solid rgba(176, 141, 87, 0.45);
  box-shadow: var(--shadow-lg), 0 0 70px rgba(176, 141, 87, 0.1);
}
.post-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgba(5, 9, 15, 0.95) 0%, rgba(5, 9, 15, 0.82) 55%, rgba(5, 9, 15, 0.55) 100%),
    url('../assets/kitchen-after.jpg') center / cover no-repeat;
}
.post-cta p { color: var(--color-text) !important; font-size: 1.15rem; max-width: 560px; }
.post-cta p strong a { color: #fff; font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; text-decoration: none; }
.post-cta .btn { margin-top: 8px; }

/* "On this page" — follows the reader */
.post-toc {
  position: sticky;
  top: 110px;
  align-self: start;
  max-width: 280px;
  justify-self: end;
  font-size: 0.9rem;
}
.post-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--border-subtle);
  counter-reset: toc;
}
.post-toc li { counter-increment: toc; }
.post-toc a {
  display: block;
  position: relative;
  margin-left: -1px;
  padding: 9px 0 9px 20px;
  border-left: 1px solid transparent;
  color: var(--color-text-dim);
  text-decoration: none;
  line-height: 1.4;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.post-toc a::before {
  content: counter(toc, decimal-leading-zero);
  display: block;
  font-family: var(--font-display);
  font-size: 0.78rem;
  color: rgba(176, 141, 87, 0.7);
  margin-bottom: 2px;
}
.post-toc a:hover { color: #fff; }
.post-toc a.is-read { color: var(--color-text-muted); }
.post-toc a.is-current { color: #fff; border-left-color: var(--color-gold); }
.post-toc a.is-current::before { color: var(--color-gold-bright); }

.post-back { padding-bottom: 96px; }
.post-back a { color: var(--color-link); font-weight: 500; text-underline-offset: 4px; }

/* ==========================================================================
   Blog index
   ========================================================================== */
.blog-hero { padding: 120px 0 56px; }
.blog-hero h1 { font-size: clamp(2.8rem, 6.4vw, 5.2rem); line-height: 1.02; margin: 0 0 20px; }
.blog-intro { font-size: 1.2rem; color: var(--color-text-muted); max-width: 560px; }

.blog-list { padding: 0 0 120px; }
.post-card {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  transition: border-color 0.4s ease, box-shadow 0.4s ease, translate 0.4s ease;
}
.post-card + .post-card { margin-top: 32px; }
.post-card:nth-of-type(even) { grid-template-columns: 0.85fr 1.15fr; }
.post-card:nth-of-type(even) .post-card-media { order: 2; }
.post-card:hover,
.post-card:focus-within { border-color: rgba(176, 141, 87, 0.55); box-shadow: var(--glow-gold); translate: 0 -4px; }
.post-card-media { position: relative; min-height: 420px; overflow: hidden; }
.post-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale 1.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.post-card:hover .post-card-media img { scale: 1.05; }
.post-card-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 55%, rgba(5, 9, 15, 0.55));
}
.post-card-body { padding: clamp(28px, 4vw, 52px); display: flex; flex-direction: column; justify-content: center; }
.post-card-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.15;
  margin: 0 0 16px;
}
.post-card-title a { color: #fff; text-decoration: none; }
/* The title link covers the whole card, so there's still only one link */
.post-card-title a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.post-card-title a:focus-visible { outline: none; }
.post-card:focus-within { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.post-card-excerpt { color: var(--color-text-muted); }
.post-card-cue { margin-top: 10px; color: var(--color-gold-bright); font-weight: 600; display: inline-flex; gap: 10px; }
.post-card-cue::after { content: '\2192'; transition: translate 0.3s ease; }
.post-card:hover .post-card-cue::after { translate: 5px 0; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .post-layout { grid-template-columns: minmax(0, 1fr); }
  .post-toc { display: none; }
}

@media (max-width: 760px) {
  .post-hero { min-height: 72vh; padding: 120px 0 48px; }
  .post-layout { padding-top: 44px; }
  .post-answer { padding-left: 20px; }
  .post-stats { grid-template-columns: 1fr; }
  .post-card { grid-template-columns: 1fr; }
  .post-card-media { min-height: 240px; }

  /* The comparison table becomes stacked cards; it stays a real table */
  .post-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .post-table, .post-table tbody, .post-table tr, .post-table th, .post-table td { display: block; width: 100% !important; }
  .post-table tr { padding: 6px 0; border-bottom: 1px solid var(--border-subtle); }
  .post-table tbody tr:last-child { border-bottom: none; }
  .post-table th, .post-table td { border-bottom: none; padding: 10px 18px; }
  .post-table tbody th { padding-top: 16px; font-size: 1.05rem; }
  .post-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: 4px;
  }
}

/* ==========================================================================
   Story illustrations — the article's decision logic, drawn as you read.
   Color logic: gold = update path / addressed, blue = layout & function,
   coral = a problem that remains. Text is always visible; only lines,
   positions and highlights animate (initial states are .js-only).
   ========================================================================== */
.post-body { --path-update: #CDAA72; --path-layout: #9DB7D5; --path-problem: #E8957A; }

/* 1. The fork */
.fork { margin: 36px 0 8px; }
.fork-svg { display: block; width: 100%; height: 56px; overflow: visible; }
.fork-svg path { fill: none; stroke: var(--color-gold-bright); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.fork-svg path:last-child { stroke: var(--path-layout); }
/* Lines are revealed with a wipe: dash tricks are unreliable on stretched, non-scaling strokes */
.fork { position: relative; }
.fork::before {
  content: '';
  position: absolute;
  top: -4px;
  left: calc(50% - 4px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-gold-bright);
  box-shadow: 0 0 14px rgba(205, 170, 114, 0.8);
}
.js .fork-svg { clip-path: inset(0 0 100% 0); transition: clip-path 1.2s cubic-bezier(0.65, 0, 0.35, 1) 0.15s; }
.fork.is-lit .fork-svg { clip-path: inset(0 0 0 0); }
.fork-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.fork-path {
  padding: 22px 24px;
  border-radius: 12px;
  border: 1px solid;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  transition: box-shadow 1s ease 0.9s, translate 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.9s;
}
.fork-path--update { border-color: rgba(205, 170, 114, 0.5); }
.fork-path--remodel { border-color: rgba(157, 183, 213, 0.45); }
.js .fork:not(.is-lit) .fork-path { translate: 0 10px; }
.fork.is-lit .fork-path--update { box-shadow: 0 0 40px rgba(205, 170, 114, 0.1); }
.fork.is-lit .fork-path--remodel { box-shadow: 0 0 40px rgba(157, 183, 213, 0.08); }
.fork-label {
  margin: 0 0 10px !important;
  font-size: 0.72rem !important;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.fork-path--update .fork-label { color: var(--path-update) !important; }
.fork-path--remodel .fork-label { color: var(--path-layout) !important; }
.fork-path ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fork-path li { position: relative; padding-left: 20px; font-size: 0.98rem; line-height: 1.5; color: var(--color-text); }
.fork-path li::before { content: ''; position: absolute; left: 0; top: 0.75em; width: 10px; height: 1px; }
.fork-path--update li::before { background: var(--path-update); }
.fork-path--remodel li::before { background: var(--path-layout); }
.fork figcaption, .sort figcaption, .dep figcaption, .scope figcaption, .plan figcaption {
  margin-top: 14px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* 2. The sort */
.sort { margin: 34px 0 30px; }
.sort-cols {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  padding: 26px;
  border-radius: 14px;
  border: 1px solid var(--border-subtle);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  overflow: hidden;
}
.sort-cols::before {
  content: '';
  position: absolute;
  top: 26px;
  bottom: 26px;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(205, 170, 114, 0.6), transparent);
}
.sort-head { margin: 0 0 14px !important; font-family: var(--font-display); font-size: 1.2rem; line-height: 1.2; color: #fff !important; }
.sort-head span { display: block; margin-top: 6px; font-family: var(--font-body); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.sort-col--function .sort-head span { color: var(--path-layout); }
.sort-col--finish .sort-head span { color: var(--path-update); }
.sort ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.sort li { padding: 7px 14px; border-radius: 999px; border: 1px solid; font-size: 0.9rem; line-height: 1.35; }
.sort-col--function li { border-color: rgba(157, 183, 213, 0.45); background: rgba(157, 183, 213, 0.08); color: #DCE6F2; }
.sort-col--finish li { border-color: rgba(205, 170, 114, 0.5); background: rgba(176, 141, 87, 0.1); color: #F1E5CE; }
.js .sort li {
  transition: translate 1.1s cubic-bezier(0.2, 0.75, 0.15, 1), rotate 1.1s cubic-bezier(0.2, 0.75, 0.15, 1), opacity 0.6s ease;
  transition-delay: calc(var(--i, 0) * 90ms + 0.15s);
}
/* Before sorting, the chips sit in a loose pile across the divider */
.js .sort:not(.is-lit) .sort-col--function li { translate: 62% var(--fy, 0); rotate: var(--fr, 0deg); opacity: 0.6; }
.js .sort:not(.is-lit) .sort-col--finish li { translate: -62% var(--fy, 0); rotate: var(--fr, 0deg); opacity: 0.6; }

/* 3. The test becomes a choice */
.test-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 6px 0 4px; }
.test-path {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  border-radius: 10px;
  border: 1px solid;
  color: #fff !important;
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.35;
  text-decoration: none;
  transition: background 0.3s ease, translate 0.3s ease, box-shadow 0.3s ease;
}
.test-path span { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; }
.test-path--yes { border-color: rgba(205, 170, 114, 0.5); }
.test-path--yes span { color: var(--path-update); }
.test-path--no { border-color: rgba(157, 183, 213, 0.45); }
.test-path--no span { color: var(--path-layout); }
.test-path:hover { translate: 0 -2px; }
.test-path--yes:hover { background: rgba(176, 141, 87, 0.12); box-shadow: 0 0 30px rgba(176, 141, 87, 0.12); }
.test-path--no:hover { background: rgba(157, 183, 213, 0.1); box-shadow: 0 0 30px rgba(157, 183, 213, 0.1); }

/* 4. The example kitchen (floor plans) */
.plan { margin: 40px 0 12px; }
.plan-frame {
  position: relative;
  padding: 54px 24px 22px;
  border-radius: 14px;
  border: 1px solid var(--border-subtle);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(205, 170, 114, 0.08), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
}
.plan-badge {
  position: absolute;
  top: 16px;
  left: 18px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid rgba(205, 170, 114, 0.45);
  background: rgba(5, 9, 15, 0.6);
  color: var(--path-update);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.plan-svg { display: block; width: 100%; height: auto; overflow: hidden; }
.plan-wall { fill: none; stroke: rgba(238, 241, 245, 0.6); stroke-width: 3; stroke-linecap: square; }
.plan-footprint { fill: none; stroke: rgba(205, 170, 114, 0.55); stroke-width: 1; stroke-dasharray: 5 5; }
.plan-cabs rect { fill: #182841; stroke: rgba(238, 241, 245, 0.18); stroke-width: 1; }
.plan-finish rect { fill: rgba(233, 215, 180, 0.14); stroke: rgba(205, 170, 114, 0.75); stroke-width: 1.2; }
.plan-corner path { fill: none; stroke: rgba(238, 241, 245, 0.35); stroke-width: 1; }
.plan-corner-new path { fill: none; stroke: var(--color-gold-bright); stroke-width: 1.2; }
.plan-stove rect, .plan-sink { fill: #0D1727; stroke: rgba(238, 241, 245, 0.5); stroke-width: 1; }
.plan-stove circle { fill: none; stroke: rgba(238, 241, 245, 0.45); stroke-width: 1; }
.plan-fridge rect { fill: #22344D; stroke: rgba(238, 241, 245, 0.6); stroke-width: 1.2; }
.plan-swing { fill: none; stroke: rgba(238, 241, 245, 0.5); stroke-width: 1; stroke-dasharray: 3 3; }
.plan-walk { fill: none; stroke: rgba(169, 179, 193, 0.5); stroke-width: 2; stroke-dasharray: 1 7; stroke-linecap: round; }
.plan--after .plan-walk { stroke: var(--color-gold-bright); }
.plan-mark text { font: 700 11px var(--font-body); text-anchor: middle; fill: var(--color-ink); }
.plan-mark--remains .plan-mark-dot { fill: var(--path-problem); }
.plan-mark--remains .plan-mark-ring { fill: none; stroke: var(--path-problem); stroke-width: 1.5; }
.plan-mark--addressed .plan-mark-dot { fill: var(--color-gold-bright); }
.plan-mark--addressed .plan-mark-ring { fill: none; stroke: var(--color-gold-bright); stroke-width: 1.5; opacity: 0; }
.plan-mark-ring { transform-box: fill-box; transform-origin: center; }

/* Before: a new-finish sweep passes over, and the problems stay lit */
.js .plan--before .plan-finish { opacity: 0; transition: opacity 1.1s ease 0.6s; }
.js .plan--before.is-lit .plan-finish { opacity: 1; }
.js .plan--before .plan-sweep { transition: transform 1.7s cubic-bezier(0.45, 0, 0.25, 1) 0.3s; }
.js .plan--before.is-lit .plan-sweep { transform: translateX(530px); }
.js .plan--before .plan-mark { opacity: 0; transition: opacity 0.6s ease; transition-delay: calc(2s + var(--m, 0) * 0.3s); }
.js .plan--before.is-lit .plan-mark { opacity: 1; }
.plan--before.is-lit .plan-mark-ring { animation: plan-pulse 2.4s ease-out 2.2s infinite; }
.plan-sweep { opacity: 1; }
html:not(.js) .plan-sweep { display: none; }
@keyframes plan-pulse {
  0% { scale: 1; opacity: 0.9; }
  100% { scale: 2.4; opacity: 0; }
}

/* After: the range and refrigerator glide into a better arrangement */
.js .plan--after .plan-move { transform: translate(var(--dx, 0), var(--dy, 0)); transition: transform 1.6s cubic-bezier(0.65, 0, 0.35, 1) 0.4s; }
.js .plan--after.is-lit .plan-move { transform: none; }
.js .plan--after .plan-swing { opacity: 0; transition: opacity 0.6s ease 2s; }
.js .plan--after.is-lit .plan-swing { opacity: 1; }
.js .plan--after .plan-corner-new { opacity: 0; transition: opacity 0.8s ease 1.3s; }
.js .plan--after.is-lit .plan-corner-new { opacity: 1; }
.js .plan--after .plan-mark { opacity: 0; transition: opacity 0.5s ease; transition-delay: calc(2.2s + var(--m, 0) * 0.25s); }
.js .plan--after.is-lit .plan-mark { opacity: 1; }
.plan--after.is-lit .plan-mark-ring { animation: plan-pulse 1.4s ease-out calc(2.2s + var(--m, 0) * 0.25s) 1; }

.plan-legend { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.plan-legend li { display: flex; align-items: center; gap: 9px; font-size: 0.9rem; color: var(--color-text); }
.plan-key {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-ink);
}
.plan-legend--remains .plan-key { background: var(--path-problem); }
.plan-legend--addressed .plan-key { background: var(--color-gold-bright); }

/* 5. Dependency map */
.dep { margin: 36px 0 30px; }
.dep-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
  grid-template-rows: 1fr auto 1fr; /* equal outer rows keep the hub at the true center */
  gap: 34px 40px;
  align-items: center;
  justify-items: center;
  padding: 28px 22px;
  border-radius: 14px;
  border: 1px solid var(--border-subtle);
  background: radial-gradient(circle at 50% 50%, rgba(205, 170, 114, 0.1), transparent 55%), linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
}
.dep-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.dep-line { stroke: rgba(205, 170, 114, 0.5); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.dep-line--main { stroke: var(--color-gold-bright); stroke-width: 2; }
/* Each connection grows outward from the central question */
.js .dep-line { transform-origin: 50px 50px; scale: 0; transition: scale 0.9s cubic-bezier(0.65, 0, 0.35, 1); transition-delay: calc(0.5s + var(--d, 0) * 0.22s); }
.dep.is-lit .dep-line { scale: 1; }
.dep-node {
  position: relative;
  z-index: 1;
  margin: 0 !important;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: #0B1A2F;
  text-align: center;
  font-size: 0.82rem !important;
  line-height: 1.4 !important;
  color: var(--color-text-muted) !important;
  transition: border-color 0.6s ease, box-shadow 0.6s ease;
}
.dep-node:not(.dep-node--center)::after {
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-gold-bright);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.dep-node--top::after { left: calc(50% - 2.5px); bottom: -3px; }
.dep-node--bottom::after { left: calc(50% - 2.5px); top: -3px; }
.dep-node--left::after { top: calc(50% - 2.5px); right: -3px; }
.dep-node--right::after { top: calc(50% - 2.5px); left: -3px; }
.dep.is-lit .dep-node::after { opacity: 1; transition-delay: 1.3s; }
html:not(.js) .dep-node::after { opacity: 1; }
.dep-node strong { display: block; font-size: 0.98rem; color: #fff; }
.dep-node span { display: block; margin-top: 3px; }
.dep-node--center {
  grid-column: 2;
  grid-row: 2;
  padding: 18px;
  border-color: var(--color-gold);
  font-family: var(--font-display);
  font-size: 1.15rem !important;
  line-height: 1.25 !important;
  color: #fff !important;
  box-shadow: 0 0 40px rgba(205, 170, 114, 0.16);
}
.dep-node--top { grid-column: 2; grid-row: 1; }
.dep-node--left { grid-column: 1; grid-row: 2; }
.dep-node--right { grid-column: 3; grid-row: 2; }
.dep-node--bottom { grid-column: 2; grid-row: 3; }
.dep.is-lit .dep-node--top { border-color: rgba(205, 170, 114, 0.7); transition-delay: 1.2s; }

/* 6. Scope check */
.scope { margin: 8px 0 32px; }
.scope-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  overflow: hidden;
  font-size: 0.92rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
}
.scope-table th, .scope-table td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
.scope-table tbody tr:last-child > * { border-bottom: none; }
.scope-table thead th { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-gold); background: rgba(176, 141, 87, 0.08); }
.scope-table tbody th { color: #fff; font-weight: 600; }
.scope-table td { white-space: nowrap; font-weight: 600; }
.scope-table td::before {
  content: '';
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 9px;
  border-radius: 50%;
  vertical-align: 1px;
  transition: scale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: calc(0.3s + var(--r, 0) * 0.18s);
}
.scope-table td.is-addressed { color: var(--path-update); }
.scope-table td.is-addressed::before { background: var(--path-update); box-shadow: 0 0 10px rgba(205, 170, 114, 0.6); }
.scope-table td.is-remains { color: var(--path-problem); }
.scope-table td.is-remains::before { border: 1.5px solid var(--path-problem); }
.js .scope:not(.is-lit) .scope-table td::before { scale: 0; }
.scope-table td:last-child::before { transition-delay: calc(0.9s + var(--r, 0) * 0.18s); }

/* 7. The paths rejoin above the call to action */
.merge { position: relative; margin: 30px 0 14px; padding-bottom: 8px; }
.merge svg { display: block; width: 100%; height: 48px; overflow: visible; }
.merge path { fill: none; stroke: var(--color-gold-bright); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.merge path:nth-of-type(2) { stroke: var(--path-layout); }
.merge-dot {
  position: absolute;
  bottom: 0;
  left: calc(50% - 5px);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-gold-bright);
  box-shadow: 0 0 16px rgba(205, 170, 114, 0.9);
}
.js .merge svg { clip-path: inset(0 0 100% 0); transition: clip-path 1.2s cubic-bezier(0.65, 0, 0.35, 1); }
.js .merge .merge-dot { opacity: 0; scale: 0.4; transition: opacity 0.5s ease 1.05s, scale 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.05s; }
.merge.is-lit svg { clip-path: inset(0 0 0 0); }
.merge.is-lit .merge-dot { opacity: 1; scale: 1; }

@media (max-width: 760px) {
  .fork-paths, .test-paths { grid-template-columns: 1fr; }
  .fork-svg, .fork::before { display: none; } /* stacked cards: the colored borders carry the two paths */
  .fork { margin-top: 28px; }
  .sort-cols { gap: 18px; padding: 20px 16px; }
  .sort li { font-size: 0.84rem; padding: 6px 11px; border-radius: 12px; }
  .plan-frame { padding: 50px 12px 16px; }
  .dep-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); gap: 26px 16px; padding: 22px 10px; }
  .dep-node { padding: 10px 8px; font-size: 0.74rem !important; }
  .dep-node strong { font-size: 0.86rem; }
  .dep-node--center { font-size: 0.98rem !important; padding: 14px 10px; }
  .scope-table { font-size: 0.84rem; }
  .scope-table th, .scope-table td { padding: 11px 9px; }
  .scope-table td::before { width: 7px; height: 7px; margin-right: 6px; }
  .scope-table thead th { font-size: 0.6rem; letter-spacing: 0.08em; }
}

@media (prefers-reduced-motion: reduce) {
  /* Illustrations still change state as they are reached, but without choreography */
  .focus-moment, .focus-moment *, .focus-moment *::before, .focus-moment *::after { transition-delay: 0s !important; animation: none !important; }
}

/* The quiz, offered at the end of "Compare the scope to the problem" (opens in place over the article).
   Secondary button: the estimate request stays the article's primary action. */
.sp-entry--article { margin: 40px 0 8px; padding: clamp(28px, 5vw, 48px); }
.sp-entry--article::before {
  background:
    linear-gradient(90deg, rgba(5, 9, 15, 0.95) 0%, rgba(5, 9, 15, 0.82) 60%, rgba(5, 9, 15, 0.55) 100%),
    url('../assets/hero-living-kitchen.jpg') center / cover no-repeat;
}
.sp-entry--article::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--color-gold-bright), rgba(205, 170, 114, 0.2) 60%, transparent);
  box-shadow: 0 0 12px rgba(205, 170, 114, 0.6);
  transform-origin: left;
}
.js .sp-entry--article::after { transform: scaleX(0); transition: transform 1.4s cubic-bezier(0.65, 0, 0.35, 1) 0.2s; }
.sp-entry--article.is-lit::after { transform: scaleX(1); }
.post-body .sp-entry-title {
  margin: 0 0 0.5em;
  max-width: 560px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  line-height: 1.2;
  color: #fff;
}
.post-body .sp-entry--article p:not(.sp-entry-title) { font-size: 1rem; line-height: 1.7; color: var(--color-text-muted); margin-bottom: 24px; }
.post-body .sp-entry--article .btn { color: #fff; text-decoration: none; border-color: rgba(205, 170, 114, 0.65); }
.post-body .sp-entry--article .btn:hover { color: #fff; border-color: var(--color-gold-bright); background: rgba(176, 141, 87, 0.16); }
@media (max-width: 760px) {
  .sp-entry--article { padding: 26px 20px; }
  .post-body .sp-entry--article .btn { width: 100%; padding-inline: 16px; }
}

/* ==========================================================================
   Kitchen remodel cost article — the pricing logic, drawn as the reader goes.
   Color logic: gold = known, included or priced; blue = layout and systems;
   coral = uncertainty, overage or repeat work. All text is visible HTML;
   only bars, lines, highlights and positions animate (initial states are .js-only).
   ========================================================================== */
.post-source { font-size: 0.88rem !important; color: var(--color-text-dim) !important; }
.post-body dfn { font-style: normal; font-weight: 600; color: #fff; }

/* Related-article link at the end of a section */
.post-next { margin: 4px 0 0 !important; }
.post-next a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-gold-bright);
  text-decoration: none;
  padding: 6px 0;
}
.post-next a::after { content: '\2192'; transition: translate 0.3s ease; }
.post-next a:hover::after { translate: 5px 0; }

/* Numbered H3 subsections */
.post-body { counter-reset: sub; }
.post-sub { padding-top: 52px; scroll-margin-top: 100px; counter-increment: sub; }
.post-body h3 {
  margin: 0 0 0.6em;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
  line-height: 1.25;
  color: #fff;
}
.post-sub h3::before {
  content: counter(sub, decimal-leading-zero);
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--color-gold);
}

/* Shared frames and pills */
.layers-frame, .ripple-frame, .xray-frame, .allow-frame, .seq-frame,
.kr, .stacks, .over, .budget {
  position: relative;
  border-radius: 14px;
  border: 1px solid var(--border-subtle);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(205, 170, 114, 0.07), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
}
.inputs figcaption, .layers figcaption, .ripple figcaption, .xray figcaption, .between figcaption,
.quotes figcaption, .allow figcaption, .redirect figcaption, .seq figcaption, .over figcaption, .bound figcaption {
  margin-top: 14px;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}
.post-body .inputs-result, .post-body .kit-total, .post-body .quotes-brief, .post-body .ledger-in {
  width: fit-content;
  margin: 0 auto;
  padding: 9px 20px;
  border-radius: 999px;
  text-align: center;
}
.post-body .inputs-result, .post-body .kit-total {
  border: 1px solid var(--color-gold);
  background: rgba(176, 141, 87, 0.14);
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.3;
  color: #F6ECD8;
  transition: box-shadow 1s ease, opacity 0.8s ease;
}
.post-body .quotes-brief, .post-body .ledger-in {
  border: 1px solid var(--border-strong);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.9rem;
  line-height: 1.4;
  color: #fff;
}
/* Converging and splitting lines: revealed with a downward wipe */
.inputs-lines, .quotes-fork, .ledger-fork, .kit-lines { display: block; width: 100%; height: 42px; overflow: visible; }
.inputs-lines path, .quotes-fork path, .ledger-fork path, .kit-lines path {
  fill: none;
  stroke: var(--color-gold-bright);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}
.quotes-fork path, .ledger-fork path { stroke: rgba(238, 241, 245, 0.45); }
.js .inputs-lines, .js .quotes-fork, .js .ledger-fork, .js .kit-lines {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1s cubic-bezier(0.65, 0, 0.35, 1);
}
.inputs.is-lit .inputs-lines, .quotes.is-lit .quotes-fork, .ledger.is-lit .ledger-fork, .kit.is-lit .kit-lines { clip-path: inset(0 0 0 0); }
/* Check circles that fill in turn */
.ticks, .kit-col ul { list-style: none; margin: 0; padding: 0; }
.ticks { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.ticks li, .kit-col li { position: relative; padding-left: 28px; font-size: 0.92rem; line-height: 1.45; color: var(--color-text); }
.ticks li::before, .kit-col li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  top: 0.12em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.64rem;
  font-weight: 700;
  border: 1.5px solid var(--color-gold-bright);
  background: var(--color-gold-bright);
  color: var(--color-ink);
  transition: background 0.4s ease, color 0.4s ease;
  transition-delay: calc(var(--i, 0) * 0.18s + 0.5s);
}
.js .kr:not(.is-lit) .ticks li::before, .js .kit:not(.is-lit) .kit-col li::before { background: transparent; color: transparent; }

/* A. Keep / change / solve -> a useful price */
.inputs { margin: 40px 0 0; }
.inputs-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.inputs-list li {
  padding: 16px 16px 18px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  font-size: 0.95rem;
  line-height: 1.45;
  text-align: center;
  color: var(--color-text);
  transition: border-color 0.8s ease, box-shadow 0.8s ease;
  transition-delay: calc(var(--i) * 0.25s + 0.2s);
}
.inputs-verb { display: block; margin-bottom: 6px; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-gold-bright); }
.inputs.is-lit .inputs-list li { border-color: rgba(205, 170, 114, 0.55); box-shadow: 0 0 30px rgba(176, 141, 87, 0.1); }
.js .inputs .inputs-lines { transition-delay: 0.9s; }
.js .inputs:not(.is-lit) .inputs-result { opacity: 0.45; }
.inputs.is-lit .inputs-result { transition-delay: 1.7s; box-shadow: 0 0 40px rgba(205, 170, 114, 0.28); }

/* B. Benchmark table: the bars are drawn to scale, the numbers stay as text */
.bench {
  margin: 28px 0 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
}
.bench-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 0.98rem; line-height: 1.45; }
.bench-table caption {
  caption-side: bottom;
  padding: 12px 18px 14px;
  border-top: 1px solid var(--border-subtle);
  text-align: left;
  font-size: 0.82rem;
  color: var(--color-text-dim);
}
.bench-table th, .bench-table td { padding: 16px 18px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--border-subtle); }
.bench-table tbody tr:last-child > * { border-bottom: none; }
.bench-table thead th { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-gold); background: rgba(176, 141, 87, 0.08); }
.bench-table tbody th { width: 42%; color: #fff; font-weight: 600; }
.bench-table thead th:first-child { width: 42%; }
.bench-bar {
  display: inline-block;
  width: calc(var(--v) * (100% - 6.2em));
  min-width: 6px;
  height: 10px;
  border-radius: 5px;
  vertical-align: middle;
  background: linear-gradient(90deg, rgba(176, 141, 87, 0.45), var(--color-gold-bright));
  box-shadow: 0 0 12px rgba(205, 170, 114, 0.35);
  transform-origin: left;
  transition: transform 1.3s cubic-bezier(0.65, 0, 0.35, 1);
  transition-delay: calc(var(--r) * 0.2s + 0.2s);
}
.js .bench:not(.is-lit) .bench-bar { transform: scaleX(0); }
.bench-num { display: inline-block; margin-left: 12px; font-family: var(--font-display); font-size: 1.2rem; color: #fff; font-variant-numeric: tabular-nums; vertical-align: middle; }

/* C. Levels of work (kitchen elevation) */
.layers { margin: 36px 0 30px; }
.layers-frame { padding: 54px 22px 20px; }
.layers-svg { display: block; width: 100%; height: auto; overflow: hidden; }
.layers-svg rect:not(.lay-splash), .layers-svg path { fill: #14233A; stroke: rgba(238, 241, 245, 0.45); stroke-width: 1.2; }
.layers-svg g.lv path { fill: none; }
.layers-svg .lay-floor { stroke: rgba(238, 241, 245, 0.35); stroke-width: 2; }
.layers-svg .lay-splash { stroke: rgba(238, 241, 245, 0.3); stroke-width: 1.2; }
.layers-svg .lay-tile-line { fill: none; stroke: rgba(238, 241, 245, 0.16); stroke-width: 1; }
.layers-svg .lv-tint { fill: transparent; stroke: none; }
.layers-svg .lay-sink { fill: none; stroke: rgba(238, 241, 245, 0.55); stroke-width: 1.4; }
.layers-svg .lay-pipe { fill: none; stroke: rgba(157, 183, 213, 0.3); stroke-width: 4; stroke-linecap: round; }
.layers-svg .lay-wall { fill: #22344D; }
.layers-svg .lay-wall-ghost { fill: none; stroke: rgba(157, 183, 213, 0.6); stroke-dasharray: 4 4; opacity: 0; }
.layers-svg .lv, .layers-svg .lv *, .layers-svg .lay-wall-ghost { transition: fill 0.6s ease, stroke 0.6s ease, opacity 0.6s ease, filter 0.6s ease, transform 1s cubic-bezier(0.65, 0, 0.35, 1); }
.layers[data-level="1"] .lv:not(.lv1),
.layers[data-level="2"] .lv:not(.lv2),
.layers[data-level="3"] .lv:not(.lv3) { opacity: 0.3; }
.layers[data-level="1"] .lv1, .layers[data-level="2"] .lv2 { filter: drop-shadow(0 0 7px rgba(205, 170, 114, 0.45)); }
.layers[data-level="1"] .lv1 .lv-tint { fill: rgba(205, 170, 114, 0.28); }
.layers[data-level="1"] rect.lv1 { fill: rgba(205, 170, 114, 0.6); stroke: var(--color-gold-bright); }
.layers[data-level="2"] .lv2 rect, .layers[data-level="2"] path.lv2 { fill: rgba(205, 170, 114, 0.16); stroke: var(--color-gold-bright); }
.layers[data-level="2"] g.lv2 path { stroke: var(--color-gold-bright); }
.layers[data-level="3"] .lay-wall { fill: rgba(157, 183, 213, 0.35); stroke: #9DB7D5; transform: translateX(22px); }
.layers[data-level="3"] .lay-wall-ghost { opacity: 1; }
.layers[data-level="3"] .lay-pipe { stroke: #9DB7D5; stroke-dasharray: 8 6; filter: drop-shadow(0 0 6px rgba(157, 183, 213, 0.6)); animation: pipe-flow 1.2s linear infinite; }
@keyframes pipe-flow { to { stroke-dashoffset: -28; } }
.layers-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.layers-step {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.02);
  color: var(--color-text-muted);
  font: inherit;
  font-size: 0.86rem;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.layers-num {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  border: 1px solid rgba(205, 170, 114, 0.6);
  color: var(--color-gold-bright);
  transition: background 0.3s ease, color 0.3s ease;
}
.layers-step--systems .layers-num { border-color: rgba(157, 183, 213, 0.6); color: #9DB7D5; }
.layers-step:hover { color: #fff; border-color: var(--border-strong); }
.layers-step[aria-pressed="true"] { color: #fff; border-color: rgba(205, 170, 114, 0.7); background: rgba(176, 141, 87, 0.12); }
.layers-step--systems[aria-pressed="true"] { border-color: rgba(157, 183, 213, 0.7); background: rgba(157, 183, 213, 0.1); }
.layers-step[aria-pressed="true"] .layers-num { background: var(--color-gold-bright); color: var(--color-ink); }
.layers-step--systems[aria-pressed="true"] .layers-num { background: #9DB7D5; }
.layers-step:focus-visible, .ripple-toggle button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
html:not(.js) .layers-step { cursor: default; }

/* D. The six price factors: an overview that doubles as navigation */
.factors { margin: 6px 0 4px; }
.factors ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; counter-reset: factor; }
.factors li { counter-increment: factor; transition: opacity 0.6s ease, translate 0.6s ease; transition-delay: calc(var(--i) * 80ms + 0.1s); }
.js .factors:not(.is-lit) li { opacity: 0.35; translate: 0 10px; }
.post-body .factors a {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  padding: 16px 16px 18px;
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  color: var(--color-text-muted);
  font-size: 0.92rem;
  line-height: 1.4;
  text-decoration: none;
  transition: border-color 0.4s ease, color 0.4s ease, background 0.4s ease, translate 0.4s ease, box-shadow 0.4s ease;
}
.factors a::before { content: counter(factor, decimal-leading-zero); position: absolute; top: 14px; right: 16px; font-family: var(--font-display); font-size: 0.8rem; color: rgba(176, 141, 87, 0.75); }
.factor-icon { width: 28px; height: 28px; fill: none; stroke: var(--color-gold-bright); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.factor-icon .factor-dash { stroke-dasharray: 2 2.4; }
.post-body .factors a:hover { color: #fff; border-color: rgba(205, 170, 114, 0.5); translate: 0 -2px; }
.post-body .factors a.is-read { color: var(--color-text); border-color: rgba(205, 170, 114, 0.28); }
.post-body .factors a.is-current { color: #fff; border-color: var(--color-gold-bright); background: rgba(176, 141, 87, 0.12); box-shadow: 0 0 30px rgba(176, 141, 87, 0.12); }

/* E. Cabinets: keep vs. replace, and what the price includes */
.kr { margin: 30px 0 18px; padding: 24px; }
.kr-cols { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.kr-cols::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: linear-gradient(180deg, transparent, rgba(205, 170, 114, 0.5), transparent); }
.post-body .kr-head { margin: 0 0 2px; font-family: var(--font-display); font-size: 1.15rem; line-height: 1.3; color: #fff; }
.post-body .kr-sub { margin: 0 0 14px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-dim); }
.kr-col--keep .kr-sub { color: var(--path-update); }
.kr-col--replace .kr-sub { color: var(--path-layout); }
.kr-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.kr-bars li { display: grid; grid-template-columns: 88px 1fr; align-items: center; gap: 12px; font-size: 0.88rem; color: var(--color-text); }
.kr-bars i { position: relative; display: block; height: 10px; border-radius: 5px; border: 1px dashed rgba(205, 170, 114, 0.4); }
.kr-bars i::before {
  content: '';
  position: absolute;
  inset: -1px auto -1px -1px;
  width: 50%;
  border-radius: 5px;
  background: linear-gradient(90deg, rgba(176, 141, 87, 0.45), var(--color-gold-bright));
  transition: width 1.2s cubic-bezier(0.65, 0, 0.35, 1);
  transition-delay: calc(var(--i) * 0.15s + 0.5s);
}
.js .kr:not(.is-lit) .kr-bars i::before { width: calc(100% + 2px); }
.kr-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.kr-chips li {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(157, 183, 213, 0.45);
  background: rgba(157, 183, 213, 0.08);
  color: #DCE6F2;
  font-size: 0.85rem;
  line-height: 1.3;
  transition: opacity 0.5s ease, scale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: calc(var(--i) * 0.12s + 0.4s);
}
.js .kr:not(.is-lit) .kr-chips li { opacity: 0.35; scale: 0.9; }
.kr-includes { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border-subtle); }
.kr .ticks li::before { transition-delay: calc(var(--i) * 0.18s + 1.4s); }

/* F. Layout: a moved sink and everything it reaches */
.ripple { margin: 30px 0 24px; }
.ripple-frame { padding: 18px 22px 22px; }
.ripple-toggle { display: inline-flex; gap: 4px; margin-bottom: 14px; padding: 4px; border-radius: 999px; border: 1px solid var(--border-subtle); background: rgba(5, 9, 15, 0.5); }
.ripple-toggle button { padding: 8px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--color-text-muted); font: inherit; font-size: 0.85rem; cursor: pointer; transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; }
.ripple-toggle button:hover { color: #fff; }
.ripple-toggle button[aria-pressed="true"] { background: rgba(157, 183, 213, 0.16); color: #fff; box-shadow: inset 0 0 0 1px rgba(157, 183, 213, 0.6); }
.ripple-stage { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 22px; align-items: center; }
.ripple-svg { display: block; width: 100%; height: auto; overflow: visible; }
.rp-wall { fill: none; stroke: rgba(238, 241, 245, 0.6); stroke-width: 3; }
.rp-counter, .rp-island { fill: #182841; stroke: rgba(238, 241, 245, 0.22); stroke-width: 1; }
.rp-island { stroke: rgba(238, 241, 245, 0.4); }
.rp-ghost { fill: none; stroke: rgba(157, 183, 213, 0.6); stroke-width: 1.2; stroke-dasharray: 3 3; opacity: 0; transition: opacity 0.6s ease 0.6s; }
.rp-sink { transition: transform 1.2s cubic-bezier(0.65, 0, 0.35, 1); }
.rp-sink rect { fill: #0D1727; stroke: #9DB7D5; stroke-width: 1.6; }
.rp-sink circle { fill: #9DB7D5; }
.ripple[data-level="1"] .rp-sink { transform: translate(17px, -115px); }
.ripple[data-level="2"] .rp-ghost { opacity: 1; }
.rp-rings circle { fill: none; stroke: #9DB7D5; stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.ripple.is-lit[data-level="2"] .rp-rings circle { animation: rp-ring 2.6s ease-out calc(1s + var(--k) * 0.55s) 2 both; }
@keyframes rp-ring {
  0% { opacity: 0.9; scale: 1; }
  100% { opacity: 0; scale: 7; }
}
.ripple-tags { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ripple-tags li {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  color: var(--color-text-muted);
  font-size: 0.88rem;
  transition: border-color 0.5s ease, color 0.5s ease, background 0.5s ease, opacity 0.5s ease;
}
.ripple[data-level="2"] .ripple-tags li { border-color: rgba(157, 183, 213, 0.55); background: rgba(157, 183, 213, 0.08); color: #fff; transition-delay: calc(1.2s + var(--i) * 0.22s); }
.ripple[data-level="1"] .ripple-tags li { opacity: 0.45; }

/* G. Materials: the purchase price is the bottom of the stack */
.stacks { margin: 30px 0 22px; padding: 24px 24px 18px; }
.stacks-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: end; }
.stack { display: flex; flex-direction: column; }
.stack-blocks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column-reverse; gap: 4px; }
.stack-blocks li {
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px dashed rgba(205, 170, 114, 0.5);
  background: rgba(176, 141, 87, 0.06);
  color: var(--color-text);
  font-size: 0.82rem;
  line-height: 1.3;
  text-align: center;
  transition: opacity 0.5s ease, translate 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--i, 0) * 0.18s + 0.3s);
}
.stack-blocks .stack-base { border: 1px solid var(--color-gold); background: rgba(176, 141, 87, 0.28); color: #fff; font-weight: 600; }
.js .stacks:not(.is-lit) .stack-blocks li:not(.stack-base) { opacity: 0.3; translate: 0 -14px; }
.post-body .stack-title { margin: 12px 0 0; text-align: center; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-gold); }
.post-body .stacks-key { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 18px 0 0; font-size: 0.82rem; color: var(--color-text-dim); }
.stacks-key span::before { content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 8px; border-radius: 3px; vertical-align: -1px; }
.stacks-key-base::before { border: 1px solid var(--color-gold); background: rgba(176, 141, 87, 0.28); }
.stacks-key-installed::before { border: 1px dashed rgba(205, 170, 114, 0.6); }

/* H. Behind the finishes: the wall is opened to show what an estimate can't see */
.xray { margin: 30px 0 24px; }
.xray-frame { padding: 18px 20px 20px; }
.xray-labels { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 10px; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; line-height: 1.4; text-transform: uppercase; }
.xray-label--seen { color: var(--path-update); max-width: 45%; }
.xray-label--open { color: var(--path-problem); max-width: 50%; text-align: right; }
.xray-stage { position: relative; overflow: hidden; border-radius: 10px; aspect-ratio: 480 / 220; }
.xray-inside, .xray-face, .xray-face svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.xray-face { clip-path: inset(0 55% 0 0); transition: clip-path 2s cubic-bezier(0.65, 0, 0.35, 1) 0.3s; }
.js .xray:not(.is-lit) .xray-face { clip-path: inset(0 0 0 0); }
.xray-scan { position: absolute; top: 0; bottom: 0; left: 45%; width: 2px; margin-left: -1px; background: var(--color-gold-bright); box-shadow: 0 0 18px 4px rgba(205, 170, 114, 0.55); transition: left 2s cubic-bezier(0.65, 0, 0.35, 1) 0.3s; }
.js .xray:not(.is-lit) .xray-scan { left: 100%; }
.xr-cavity { fill: #0A1424; }
.xr-plate { fill: rgba(176, 141, 87, 0.22); }
.xr-stud { fill: rgba(176, 141, 87, 0.16); stroke: rgba(176, 141, 87, 0.4); }
.xr-wire { fill: none; stroke: rgba(238, 241, 245, 0.45); stroke-width: 2; }
.xr-pipe { fill: none; stroke: rgba(157, 183, 213, 0.7); stroke-width: 6; stroke-linecap: round; }
.xr-damage { fill: rgba(232, 149, 122, 0.28); stroke: rgba(232, 149, 122, 0.8); stroke-width: 1.2; }
.xr-patch { fill: rgba(238, 241, 245, 0.05); stroke: rgba(238, 241, 245, 0.55); stroke-dasharray: 5 4; }
.xr-crack { fill: none; stroke: var(--path-problem); stroke-width: 2; }
.xr-mark .plan-mark-dot { fill: var(--path-problem); }
.xr-mark .plan-mark-ring { fill: none; stroke: var(--path-problem); stroke-width: 1.5; opacity: 0; }
.js .xray .xr-mark { opacity: 0; transition: opacity 0.5s ease; transition-delay: calc(2.2s + var(--m) * 0.25s); }
.xray.is-lit .xr-mark { opacity: 1; }
.xray.is-lit .xr-mark .plan-mark-ring { animation: plan-pulse 1.4s ease-out calc(2.2s + var(--m) * 0.25s) 1; }
.xr-face-wall { fill: #2B3A52; }
.xr-tile-line { fill: none; stroke: rgba(255, 255, 255, 0.14); stroke-width: 1; }
.xr-face-outlet { fill: #E9E3D6; opacity: 0.8; }
.xr-face-counter { fill: #8C8577; }
.xr-face-cab { fill: #1A2840; }
.xray-legend .plan-key { background: var(--path-problem); }

/* I. Where the project ends */
.bound { margin: 30px 0 24px; }
.bound-svg { display: block; width: 100%; height: auto; overflow: hidden; }
.bd-hatch-line { stroke: rgba(205, 170, 114, 0.35); stroke-width: 1.2; }
.bd-floor { stroke: none; }
.bd-floor--ext { opacity: 0.6; transition: clip-path 1.6s cubic-bezier(0.65, 0, 0.35, 1) 0.6s; }
.js .bound:not(.is-lit) .bd-floor--ext { clip-path: inset(0 100% 0 0); }
.bd-glow { transition: opacity 1s ease 1.4s; }
.js .bound:not(.is-lit) .bd-glow { opacity: 0; }
.bd-cab { fill: #182841; stroke: rgba(238, 241, 245, 0.25); }
.bd-cab--new { fill: rgba(205, 170, 114, 0.18); stroke: var(--color-gold-bright); stroke-dasharray: 4 3; transition: opacity 0.8s ease 1.9s; }
.js .bound:not(.is-lit) .bd-cab--new { opacity: 0; }
.bd-table, .bd-sofa { fill: none; stroke: rgba(238, 241, 245, 0.35); }
.bd-wall { fill: none; stroke: rgba(238, 241, 245, 0.6); stroke-width: 3; }
.bd-wall--removed { stroke: rgba(157, 183, 213, 0.75); stroke-dasharray: 6 5; transition: stroke 0.8s ease 1.2s; }
.js .bound:not(.is-lit) .bd-wall--removed { stroke: rgba(238, 241, 245, 0.6); stroke-dasharray: none; }
.bd-room { font: 600 10px var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; fill: var(--color-text-dim); text-anchor: middle; }
.bd-line { fill: none; stroke: var(--color-gold-bright); stroke-width: 1.5; stroke-dasharray: 6 5; }
.bound.is-lit .bd-line:not(.bd-line--grown) { animation: bd-march 14s linear infinite; }
@keyframes bd-march { to { stroke-dashoffset: -220; } }
.bd-line--grown { stroke: var(--path-problem); transition: opacity 1s ease 2.2s; }
.js .bound:not(.is-lit) .bd-line--grown { opacity: 0; }
.bd-mark .plan-mark-dot { fill: var(--color-gold-bright); }
.bd-mark .plan-mark-ring { fill: none; stroke: var(--color-gold-bright); stroke-width: 1.5; opacity: 0; }
.js .bound .bd-mark { opacity: 0; transition: opacity 0.5s ease; transition-delay: calc(1s + var(--m) * 0.5s); }
.bound.is-lit .bd-mark { opacity: 1; }
.bound-legend .plan-key { background: var(--color-gold-bright); }

/* J. The work between the before and after photos */
.between { margin: 30px 0 24px; }
.between-track { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; align-items: center; }
.between-photo { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 12px; border: 1px solid var(--border-subtle); }
.between-photo img { width: 100%; height: 100%; object-fit: cover; }
.between-photo--before img { filter: saturate(0.75) brightness(0.85); }
.between-photo span { position: absolute; top: 10px; left: 10px; padding: 4px 10px; border-radius: 4px; background: rgba(5, 9, 15, 0.72); color: #fff; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.between-steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.between-steps::before { content: ''; position: absolute; top: 10px; bottom: 10px; left: 8px; width: 1px; background: linear-gradient(180deg, rgba(205, 170, 114, 0.2), var(--color-gold-bright), rgba(205, 170, 114, 0.2)); }
.between-steps li { position: relative; padding-left: 28px; font-size: 0.9rem; line-height: 1.35; color: var(--color-text); transition: opacity 0.5s ease; transition-delay: calc(var(--i) * 0.3s + 0.3s); }
.between-steps li::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 3px;
  width: 11px;
  height: 11px;
  margin-top: -6px;
  border-radius: 50%;
  border: 1.5px solid var(--color-gold-bright);
  background: var(--color-gold-bright);
  box-shadow: 0 0 10px rgba(205, 170, 114, 0.6);
  transition: background 0.4s ease, box-shadow 0.4s ease;
  transition-delay: inherit;
}
.js .between:not(.is-lit) .between-steps li { opacity: 0.45; }
.js .between:not(.is-lit) .between-steps li::before { background: var(--color-ink); box-shadow: none; }

/* K. Two proposals for the same description */
.quotes { margin: 30px 0 24px; }
.quotes-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.quote-card { padding: 20px 20px 18px; border-radius: 12px; border: 1px solid var(--border-strong); background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)); }
.post-body .quote-name { margin: 0 0 12px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-gold); }
.quote-card dl { margin: 0; display: grid; gap: 12px; }
.quote-card dt { font-size: 0.78rem; color: var(--color-text-dim); }
.quote-card dd { margin: 2px 0 0; font-size: 0.95rem; line-height: 1.4; color: #fff; }
.quote-card--b dd { color: #F3C9B9; }
.quote-total { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border-subtle); }
.quote-total-label { display: block; margin-bottom: 8px; font-size: 0.78rem; color: var(--color-text-dim); }
.quote-total-label em { margin-left: 4px; font-style: normal; color: var(--path-problem); }
.quote-total-bar { position: relative; display: block; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, 0.06); }
.quote-total-bar::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 92%; border-radius: 5px; background: linear-gradient(90deg, rgba(176, 141, 87, 0.4), var(--color-gold-bright)); transform-origin: left; transition: transform 1.3s cubic-bezier(0.65, 0, 0.35, 1) 0.8s; }
.quote-card--b .quote-total-bar::before { width: 58%; }
.quote-card--b .quote-total-bar::after { content: ''; position: absolute; top: 0; bottom: 0; left: 58%; width: 34%; border: 1px dashed rgba(232, 149, 122, 0.7); border-left: 0; border-radius: 0 5px 5px 0; transition: opacity 0.8s ease 2s; }
.js .quotes:not(.is-lit) .quote-total-bar::before { transform: scaleX(0); }
.js .quotes:not(.is-lit) .quote-card--b .quote-total-bar::after { opacity: 0; }

/* L. The allowance example, to scale (with a slider to try other selections) */
.allow { margin: 30px 0 18px; }
.allow-frame { padding: 56px 24px 22px; }
.allow-track { position: relative; height: 18px; border-radius: 9px; background: rgba(255, 255, 255, 0.06); }
.allow-fill { position: absolute; top: 0; bottom: 0; transform-origin: left; transition: width 0.35s ease, transform 1.2s cubic-bezier(0.65, 0, 0.35, 1); }
.allow-fill--in { left: 0; width: min(calc(var(--sel) / 8000 * 100%), 50%); border-radius: 9px 0 0 9px; background: linear-gradient(90deg, rgba(176, 141, 87, 0.45), var(--color-gold-bright)); transition-delay: 0s, 0.3s; }
.allow.is-within .allow-fill--in { border-radius: 9px; }
.allow-fill--over { left: 50%; width: max(calc((var(--sel) - 4000) / 8000 * 100%), 0%); border-radius: 0 9px 9px 0; background: repeating-linear-gradient(45deg, rgba(232, 149, 122, 0.85) 0 6px, rgba(232, 149, 122, 0.5) 6px 12px); box-shadow: 0 0 14px rgba(232, 149, 122, 0.4); transition-delay: 0s, 1.4s; }
.js .allow:not(.is-lit) .allow-fill { transform: scaleX(0); }
.allow-line { position: absolute; top: -8px; bottom: -8px; left: 50%; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); }
.allow-scale { display: flex; justify-content: space-between; margin-top: 10px; font-size: 0.72rem; color: var(--color-text-dim); font-variant-numeric: tabular-nums; }
.allow-figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 22px 0 0; }
.allow-fig { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border-subtle); transition: border-color 0.3s ease, background 0.3s ease; }
.allow-fig dt { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-dim); }
.allow-fig dd { margin: 4px 0 0; font-family: var(--font-display); font-size: 1.5rem; line-height: 1.25; color: #fff; font-variant-numeric: tabular-nums; }
.allow-fig--allowance { border-color: rgba(205, 170, 114, 0.5); }
.allow-fig--allowance dd { color: var(--color-gold-bright); }
.allow-fig--diff { border-color: rgba(232, 149, 122, 0.6); background: rgba(232, 149, 122, 0.08); }
.allow-fig--diff dd { color: var(--path-problem); }
.allow.is-within .allow-fig--diff { border-color: rgba(205, 170, 114, 0.5); background: rgba(176, 141, 87, 0.08); }
.allow.is-within .allow-fig--diff dd { color: var(--color-gold-bright); font-size: 1.05rem; padding-top: 6px; }
.allow-control { display: flex; align-items: center; gap: 14px; margin-top: 18px; font-size: 0.85rem; color: var(--color-text-muted); }
.allow-control input { flex: 1; min-width: 0; accent-color: var(--color-gold-bright); cursor: pointer; }
html:not(.js) .allow-control { display: none; }
.post-body .allow-note { margin: 12px 0 0; font-size: 0.82rem; color: var(--color-text-dim); }

/* M. Comparison categories: numbered, revealed row by row */
.cats-table tbody { counter-reset: cat; }
.cats-table tbody tr { counter-increment: cat; transition: background 0.3s ease, opacity 0.6s ease, translate 0.6s ease; transition-delay: 0s, calc(var(--r) * 70ms), calc(var(--r) * 70ms); }
.cats-table tbody th::before { content: counter(cat, decimal-leading-zero); display: block; margin-bottom: 2px; font-family: var(--font-display); font-size: 0.78rem; font-weight: 400; color: rgba(176, 141, 87, 0.85); }
.js .cats:not(.is-lit) tbody tr { opacity: 0.4; translate: 0 8px; }

/* N. Over budget: 37 of 100, then why */
.over { display: grid; grid-template-columns: 1fr 1.1fr; gap: 28px; margin: 30px 0 14px; padding: 26px; border-color: rgba(232, 149, 122, 0.28); }
.over-main { display: grid; gap: 18px; align-content: start; }
.over-waffle { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; max-width: 220px; }
.over-waffle i { aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, 0.1); }
.over-waffle i.on { background: var(--path-problem); box-shadow: 0 0 6px rgba(232, 149, 122, 0.5); transition: background 0.3s ease, box-shadow 0.3s ease; transition-delay: calc(var(--d) * 30ms + 0.2s); }
.js .over:not(.is-lit) .over-waffle i.on { background: rgba(255, 255, 255, 0.1); box-shadow: none; }
.post-body .over-headline { margin: 0; }
.over-num { display: block; font-family: var(--font-display); font-weight: 500; font-size: clamp(3rem, 7vw, 4.4rem); line-height: 1; color: var(--path-problem); }
.over-label { display: block; margin-top: 8px; font-size: 1rem; line-height: 1.45; color: var(--color-text); }
.post-body .over-why-head { margin: 0 0 14px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-dim); }
.over-why ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.over-why li { display: grid; grid-template-columns: 3.2em 1fr; gap: 6px 12px; align-items: baseline; }
.over-pct { font-family: var(--font-display); font-size: 1.4rem; color: #fff; }
.over-text { font-size: 0.9rem; line-height: 1.4; color: var(--color-text-muted); }
.over-bar { position: relative; grid-column: 1 / -1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.07); }
.over-bar::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: var(--pct); border-radius: 2px; background: linear-gradient(90deg, rgba(232, 149, 122, 0.4), var(--path-problem)); transform-origin: left; transition: transform 1.2s cubic-bezier(0.65, 0, 0.35, 1); transition-delay: calc(1.5s + var(--i) * 0.25s); }
.js .over:not(.is-lit) .over-bar::before { transform: scaleX(0); }
.over figcaption { grid-column: 1 / -1; margin-top: 0; }

/* O. Necessary vs. optional */
.ledger { margin: 26px 0 24px; }
.ledger-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ledger-col { padding: 16px 18px; border-radius: 12px; border: 1px solid; }
.ledger-col--need { border-color: rgba(232, 149, 122, 0.5); background: rgba(232, 149, 122, 0.06); }
.ledger-col--opt { border-color: rgba(205, 170, 114, 0.5); background: rgba(176, 141, 87, 0.06); }
.post-body .ledger-head { margin: 0 0 6px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.ledger-col--need .ledger-head { color: var(--path-problem); }
.ledger-col--opt .ledger-head { color: var(--path-update); }
.post-body .ledger-item { margin: 0; font-size: 1rem; line-height: 1.45; color: #fff; transition: opacity 0.7s ease 0.9s, translate 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.9s; }
.js .ledger:not(.is-lit) .ledger-item { opacity: 0.4; translate: 0 -8px; }

/* P. The budget, structured */
.budget { margin: 26px 0 28px; padding: 22px 22px 18px; }
.budget-bar { display: grid; grid-template-columns: 1.6fr minmax(110px, 0.9fr) 1fr; gap: 14px; align-items: start; }
.budget-seg::before { content: ''; display: block; height: 16px; margin-bottom: 10px; border-radius: 8px; transform-origin: left; transition: transform 1.1s cubic-bezier(0.65, 0, 0.35, 1) 0.2s; }
.budget-seg--priced::before { background: linear-gradient(90deg, rgba(176, 141, 87, 0.45), var(--color-gold-bright)); }
.budget-seg--reserve::before { border: 1.5px dashed rgba(232, 149, 122, 0.75); background: rgba(232, 149, 122, 0.08); transition-delay: 1.2s; }
.js .budget:not(.is-lit) .budget-seg::before { transform: scaleX(0); }
.budget-seg span, .budget-gate span { display: block; font-size: 0.85rem; line-height: 1.4; color: var(--color-text); }
.budget-gate { text-align: center; }
.budget-gate svg { display: block; width: 22px; height: 22px; margin: -3px auto 7px; fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; transition: opacity 0.6s ease 0.9s, scale 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.9s; }
.budget-gate span { color: var(--color-text-muted); }
.js .budget:not(.is-lit) .budget-gate svg { opacity: 0; scale: 0.6; }

/* Q. Keep what works: budget flows to the improvements you need */
.redirect { margin: 28px 0 24px; }
.redirect-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(60px, 0.8fr) minmax(0, 1fr); align-items: stretch; }
.post-body .redirect-src { align-self: center; margin: 0; padding: 16px 18px; border-radius: 12px; border: 1px solid var(--color-gold); background: rgba(176, 141, 87, 0.14); font-family: var(--font-display); font-size: 1.15rem; line-height: 1.3; color: #fff; text-align: center; }
.redirect-lines { width: 100%; height: 100%; min-height: 150px; overflow: visible; }
.redirect-lines path { fill: none; stroke: var(--color-gold-bright); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 2 7; stroke-linecap: round; opacity: 0.35; transition: opacity 0.8s ease 0.4s; }
.redirect.is-lit .redirect-lines path, html:not(.js) .redirect-lines path { opacity: 1; }
.redirect.is-lit .redirect-lines path { animation: flow 1.1s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -18; } }
.redirect-dest { list-style: none; margin: 0; padding: 0; display: grid; grid-template-rows: repeat(3, 1fr); gap: 0; min-height: 150px; }
.redirect-dest li { align-self: center; padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(205, 170, 114, 0.35); background: rgba(176, 141, 87, 0.05); color: var(--color-text); font-size: 0.95rem; transition: border-color 0.6s ease, background 0.6s ease, color 0.6s ease; transition-delay: calc(0.8s + var(--i) * 0.25s); }
.redirect.is-lit .redirect-dest li { border-color: rgba(205, 170, 114, 0.75); background: rgba(176, 141, 87, 0.14); color: #fff; }

/* R. Specific vs. vague: the specific request is highlighted, the vague one recedes */
.say .say-specific { color: #fff; background-image: linear-gradient(rgba(205, 170, 114, 0.3), rgba(205, 170, 114, 0.3)); background-repeat: no-repeat; background-position: 0 88%; background-size: 100% 0.42em; transition: background-size 1.3s cubic-bezier(0.65, 0, 0.35, 1) 0.3s; }
.js .say:not(.is-lit) .say-specific { background-size: 0% 0.42em; }
.say .say-vague { color: var(--color-text-dim); transition: color 1s ease 1.5s; }
.js .say:not(.is-lit) .say-vague { color: inherit; }

/* S. Sequence: countertops installed now, cabinets replaced soon */
.seq { margin: 28px 0 24px; }
.seq-frame { display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px; align-items: center; padding: 20px 22px; }
.seq-svg { display: block; width: 100%; height: auto; overflow: visible; }
.seq-floor { stroke: rgba(238, 241, 245, 0.35); stroke-width: 2; }
.seq-cab rect { fill: #182841; stroke: rgba(238, 241, 245, 0.45); stroke-width: 1.2; }
.seq-cab path { fill: none; stroke: rgba(238, 241, 245, 0.35); stroke-width: 1.2; }
.seq-cab--new rect { fill: rgba(157, 183, 213, 0.12); stroke: #9DB7D5; }
.seq-cab--new path { stroke: rgba(157, 183, 213, 0.6); }
.seq-top, .seq-cab { transform-box: fill-box; transform-origin: center; }
.seq-top { transform: translateY(-34px) rotate(-3deg); }
.seq-top rect { fill: var(--path-problem); }
.seq-cab--old { opacity: 0; }
.seq-repeat { font: 600 12px var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; fill: var(--path-problem); text-anchor: middle; }
.js .seq:not(.is-lit) .seq-top { transform: translateY(-60px); opacity: 0; }
.js .seq:not(.is-lit) .seq-cab--old { opacity: 1; }
.js .seq:not(.is-lit) .seq-cab--new { opacity: 0; }
.js .seq:not(.is-lit) .seq-repeat { opacity: 0; }
.js .seq.is-lit .seq-top { animation: seq-top 3s cubic-bezier(0.45, 0, 0.25, 1) both; }
.js .seq.is-lit .seq-top rect { animation: seq-top-color 3s ease both; }
.js .seq.is-lit .seq-cab--old { animation: seq-out 3s ease both; }
.js .seq.is-lit .seq-cab--new { animation: seq-in 3s ease both; }
.js .seq.is-lit .seq-repeat { animation: seq-label 3.4s ease both; }
@keyframes seq-top {
  0% { transform: translateY(-60px); opacity: 0; }
  22% { transform: translateY(0); opacity: 1; }
  55% { transform: translateY(0); opacity: 1; }
  80%, 100% { transform: translateY(-34px) rotate(-3deg); opacity: 1; }
}
@keyframes seq-top-color {
  0%, 58% { fill: var(--color-gold-bright); }
  82%, 100% { fill: var(--path-problem); }
}
@keyframes seq-out {
  0%, 55% { opacity: 1; transform: none; }
  80%, 100% { opacity: 0; transform: translateX(-40px); }
}
@keyframes seq-in {
  0%, 55% { opacity: 0; transform: translateX(40px); }
  80%, 100% { opacity: 1; transform: none; }
}
@keyframes seq-label {
  0%, 82% { opacity: 0; }
  100% { opacity: 1; }
}
.seq-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: seq; }
.seq-steps li { position: relative; padding-left: 34px; font-size: 0.92rem; line-height: 1.4; color: var(--color-text); counter-increment: seq; transition: opacity 0.5s ease; }
.seq-steps li::before { content: counter(seq); position: absolute; top: -1px; left: 0; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(205, 170, 114, 0.6); color: var(--color-gold-bright); font-size: 0.72rem; font-weight: 700; }
.seq-steps li:nth-child(2)::before { border-color: rgba(157, 183, 213, 0.6); color: #9DB7D5; }
.seq-steps li:nth-child(3)::before { border-color: rgba(232, 149, 122, 0.7); color: var(--path-problem); }
.seq-steps li:nth-child(1) { transition-delay: 0.3s; }
.seq-steps li:nth-child(2) { transition-delay: 1.6s; }
.seq-steps li:nth-child(3) { transition-delay: 2.5s; }
.js .seq:not(.is-lit) .seq-steps li { opacity: 0.4; }

/* T. Related article (and the quiz) where the reader is still choosing the scope */
.related { display: grid; grid-template-columns: 150px 1fr; gap: 22px; align-items: center; margin: 30px 0 8px; padding: 18px; border-radius: 14px; border: 1px solid rgba(176, 141, 87, 0.4); background: radial-gradient(ellipse at 0% 0%, rgba(176, 141, 87, 0.12), transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)); transition: box-shadow 1.2s ease, border-color 1.2s ease; }
.related.is-lit { border-color: rgba(205, 170, 114, 0.65); box-shadow: 0 0 50px rgba(176, 141, 87, 0.1); }
.related-media { overflow: hidden; aspect-ratio: 1; border-radius: 10px; }
.related-media img { width: 100%; height: 100%; object-fit: cover; }
.post-body .related-body p { margin: 0 0 10px; font-size: 1.02rem; line-height: 1.65; }
.post-body .related-body strong a { color: #fff; font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; text-decoration-color: rgba(205, 170, 114, 0.6); }
.post-body .related-quiz { display: inline-flex; gap: 8px; font-size: 0.92rem; font-weight: 600; color: var(--color-gold-bright); text-decoration: none; }
.related-quiz::after { content: '\2192'; transition: translate 0.3s ease; }
.related-quiz:hover::after { translate: 4px 0; }
html:not(.js) .related-quiz { display: none; }

/* U. What to bring, converging on one total */
.kit { margin: 28px 0 22px; }
.kit-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.kit-col { padding: 18px 20px; border-radius: 12px; border: 1px solid var(--border-strong); background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)); }
.post-body .kit-head { margin: 0 0 12px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-gold); }
.kit-col ul { display: grid; gap: 10px; }
.post-body .kit-not { margin: 14px 0 0; font-size: 0.82rem; color: var(--color-text-dim); }
.kit-not s { margin-right: 8px; color: var(--color-text-muted); text-decoration-color: var(--path-problem); }
.js .kit .kit-lines { transition-delay: 1.6s; }
.js .kit:not(.is-lit) .kit-total { opacity: 0.45; }
.kit.is-lit .kit-total { transition-delay: 2.3s; box-shadow: 0 0 40px rgba(205, 170, 114, 0.28); }

@media (max-width: 760px) {
  .inputs-list { grid-template-columns: 1fr; gap: 8px; }
  .inputs-list li { display: flex; align-items: baseline; gap: 12px; text-align: left; padding: 12px 14px; }
  .inputs-verb { flex: none; width: 5.6em; margin: 0; }
  .inputs-lines { height: 26px; }
  .inputs-lines path:not(:nth-child(2)) { display: none; }
  .bench-table { font-size: 0.86rem; }
  .bench-table th, .bench-table td { padding: 13px 12px; }
  .bench-table tbody th, .bench-table thead th:first-child { width: 46%; }
  .bench-table thead th { font-size: 0.6rem; letter-spacing: 0.1em; }
  .bench-num { font-size: 1rem; margin-left: 8px; }
  .bench-bar { width: calc(var(--v) * (100% - 5.6em)); height: 8px; }
  .layers-frame { padding: 50px 12px 14px; }
  .layers-steps { grid-template-columns: 1fr; }
  .factors ol { grid-template-columns: 1fr 1fr; }
  .post-body .factors a { padding: 14px 12px 14px; font-size: 0.86rem; gap: 8px; }
  .kr { padding: 20px 16px; }
  .kr-cols { grid-template-columns: 1fr; gap: 24px; }
  .kr-cols::before { display: none; }
  .ripple-frame { padding: 14px 12px 16px; }
  .ripple-stage { grid-template-columns: 1fr; gap: 14px; }
  .ripple-tags { display: flex; flex-wrap: wrap; gap: 6px; }
  .ripple-tags li { padding: 6px 10px; font-size: 0.82rem; }
  .ripple-toggle button { padding: 8px 11px; font-size: 0.8rem; }
  .stacks { padding: 18px 12px 14px; }
  .stacks-cols { gap: 8px; }
  .stack-blocks li { padding: 7px 4px; font-size: 0.72rem; }
  .xray-frame { padding: 14px 12px 16px; }
  .xray-labels { font-size: 0.6rem; letter-spacing: 0.1em; }
  .between-track { grid-template-columns: 1fr 1fr; grid-template-areas: "before after" "steps steps"; }
  .between-photo--before { grid-area: before; }
  .between-photo--after { grid-area: after; }
  .between-steps { grid-area: steps; gap: 10px; }
  .between-photo { aspect-ratio: 4 / 3; }
  .quotes-cards, .ledger-cols, .kit-cols { grid-template-columns: 1fr; }
  .quotes-fork, .ledger-fork, .kit-lines { display: none; }
  .post-body .quotes-brief, .post-body .ledger-in { margin-bottom: 12px; }
  .post-body .kit-total { margin-top: 14px; }
  .allow-frame { padding: 52px 14px 16px; }
  .post-body .plan-badge { top: 14px; left: 14px; right: 14px; width: fit-content; font-size: 0.6rem; letter-spacing: 0.1em; }
  .allow-figures { gap: 8px; }
  .allow-fig { padding: 10px; }
  .allow-fig dt { font-size: 0.58rem; letter-spacing: 0.08em; }
  .allow-fig dd { font-size: 1.15rem; }
  .allow.is-within .allow-fig--diff dd { font-size: 0.82rem; }
  .allow-control { flex-direction: column; align-items: stretch; gap: 8px; }
  .over { grid-template-columns: 1fr; padding: 20px 16px; }
  .budget-bar { grid-template-columns: 1fr; gap: 16px; }
  .budget-gate { display: flex; align-items: center; gap: 10px; text-align: left; }
  .budget-gate svg { margin: 0; flex: none; }
  .redirect-grid { grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); }
  .post-body .redirect-src { font-size: 1rem; padding: 12px; }
  .redirect-dest li { font-size: 0.86rem; padding: 8px 10px; }
  .seq-frame { grid-template-columns: 1fr; padding: 16px 14px; }
  .related { grid-template-columns: 76px 1fr; gap: 14px; padding: 14px; align-items: start; }
}
@media (max-width: 420px) {
  .factors ol { grid-template-columns: 1fr; }
  .post-body .factors a { flex-direction: row; align-items: center; gap: 12px; }
  .factors a span { flex: 1; }
  .factors a::before { position: static; order: 3; flex: none; }
}
@media (max-width: 760px) {
  .post-card:nth-of-type(even) { grid-template-columns: 1fr; }
  .post-card:nth-of-type(even) .post-card-media { order: 0; }
}

/* ==========================================================================
   Kitchen remodel timeline article — the schedule's logic, drawn as the reader goes.
   Color logic: gold = planning, decisions and milestones; blue = construction work;
   coral = changes, waiting and disruption. Text is visible HTML; motion is decorative.
   ========================================================================== */

/* Hero: the "before" photo gives way to the "after" as the page opens */
.post-hero-media--wipe img { position: absolute; inset: 0; }
.post-hero-before { clip-path: inset(0 0 0 100%); }
.js .post-hero-before { animation: post-push 20s cubic-bezier(0.2, 0.7, 0.2, 1) both, hero-wipe 2.8s cubic-bezier(0.65, 0, 0.35, 1) 0.9s both; }
@keyframes hero-wipe { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 100%); } }
.post-hero-seam { position: absolute; top: 0; bottom: 0; left: 100%; z-index: 1; width: 2px; opacity: 0; background: linear-gradient(180deg, transparent, var(--color-gold-bright) 25%, var(--color-gold-bright) 75%, transparent); box-shadow: 0 0 24px 6px rgba(205, 170, 114, 0.4); }
.js .post-hero-seam { animation: hero-seam 2.8s cubic-bezier(0.65, 0, 0.35, 1) 0.9s both; }
@keyframes hero-seam {
  0% { left: 0%; opacity: 0; }
  8%, 92% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* Blog card: before and after, split by a gold seam */
.post-card-before { clip-path: polygon(0 0, 54% 0, 42% 100%, 0 100%); }
.post-card-seam { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.post-card-seam line { stroke: var(--color-gold-bright); stroke-width: 2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px rgba(205, 170, 114, 0.8)); }

/* Milestone flag, reused wherever a milestone appears */
.ms-flag {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 20px;
  padding-right: 5px;
  background: var(--color-gold-bright);
  color: var(--color-ink);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  clip-path: polygon(0 0, 100% 0, 78% 50%, 100% 100%, 0 100%);
}

/* Shared frames and captions */
.twotl-frame, .avg-chart, .lanes, .gate, .quiet, .shift-frame, .walk, .back-frame {
  position: relative;
  border-radius: 14px;
  border: 1px solid var(--border-subtle);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(205, 170, 114, 0.07), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
}
.avg figcaption, .miles figcaption, .shape figcaption, .lanes figcaption, .gate figcaption, .chain figcaption,
.quiet figcaption, .update figcaption, .shift figcaption, .back figcaption {
  margin-top: 14px;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}
.key-question--solo strong { margin-top: 0; }

/* 1. Two timelines: the full period, and the construction window inside it */
.twotl { margin: 36px 0 0; }
.twotl-frame { padding: 56px 24px 24px; }
.post-body .twotl-label { margin: 0 0 10px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-gold); }
.twotl-bar { list-style: none; margin: 0; padding: 0; display: flex; height: 48px; overflow: hidden; border-radius: 10px; border: 1px solid rgba(205, 170, 114, 0.35); }
.twotl-seg {
  flex: 0 0 var(--w);
  display: grid;
  place-items: center;
  padding: 0 6px;
  border-right: 1px solid rgba(5, 9, 15, 0.7);
  background: rgba(176, 141, 87, 0.15);
  color: #F1E5CE;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  transition: opacity 0.6s ease;
  transition-delay: calc(var(--i) * 0.22s + 0.2s);
}
.twotl-seg--build { border-right: 0; background: rgba(157, 183, 213, 0.24); color: #fff; box-shadow: inset 0 0 0 1px rgba(157, 183, 213, 0.65); }
.js .twotl:not(.is-lit) .twotl-seg { opacity: 0.3; }
.twotl-access { display: flex; margin-top: 8px; font-size: 0.72rem; color: var(--color-text-dim); }
.twotl-access span { position: relative; padding-top: 10px; }
.twotl-access span::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 2px; }
.twotl-access-on { flex: 0 0 75%; padding-right: 4px; }
.twotl-access-on::before { right: 4px !important; background: linear-gradient(90deg, rgba(205, 170, 114, 0.45), var(--color-gold-bright)); }
.twotl-access-off { flex: 0 0 25%; color: var(--path-problem); }
.twotl-access-off::before { background: repeating-linear-gradient(90deg, var(--path-problem) 0 6px, transparent 6px 10px); }
.twotl-zoom-lines { display: block; width: 100%; height: 34px; margin-top: 2px; overflow: visible; }
.twotl-zoom-lines path { fill: none; stroke: rgba(157, 183, 213, 0.65); stroke-width: 1.2; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.js .twotl-zoom-lines { clip-path: inset(0 0 100% 0); transition: clip-path 0.8s cubic-bezier(0.65, 0, 0.35, 1) 1.4s; }
.twotl.is-lit .twotl-zoom-lines { clip-path: inset(0 0 0 0); }
.twotl-zoom { margin-left: 36%; padding: 18px 20px; border-radius: 12px; border: 1px solid rgba(157, 183, 213, 0.55); background: rgba(157, 183, 213, 0.07); transition: opacity 0.8s ease 1.9s, translate 0.8s ease 1.9s; }
.js .twotl:not(.is-lit) .twotl-zoom { opacity: 0.35; translate: 0 -8px; }
.post-body .twotl-zoom-title { margin: 0 0 12px; font-family: var(--font-display); font-size: 1.15rem; line-height: 1.3; color: #fff; }
.twotl-est { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.twotl-est li { padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border-subtle); font-size: 0.85rem; line-height: 1.35; color: var(--color-text-muted); }
.post-body .twotl-est strong { display: block; margin-bottom: 2px; font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; color: #fff; }
.post-body .twotl-stamp { margin: 12px 0 0; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; line-height: 1.5; text-transform: uppercase; color: var(--color-text-dim); }
.twotl-stamp::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--color-gold-bright); vertical-align: 1px; }

/* 2. National averages: two bars from the same zero, month by month */
.avg { margin: 26px 0 28px; }
.avg-chart { display: grid; gap: 16px; padding: 22px 22px 16px; }
.post-body .avg-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 8px; }
.avg-label { font-size: 0.85rem; font-weight: 600; color: #fff; }
.avg-num { font-family: var(--font-display); font-size: 1.2rem; color: #fff; white-space: nowrap; }
.avg-track { position: relative; display: block; height: 22px; border-radius: 4px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 calc(10% - 1px), rgba(255, 255, 255, 0.13) calc(10% - 1px) 10%); }
.avg-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(var(--m) * 10%);
  border-radius: 4px;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(100% / var(--m) - 1.5px), rgba(5, 9, 15, 0.55) calc(100% / var(--m) - 1.5px) calc(100% / var(--m))),
    linear-gradient(90deg, rgba(176, 141, 87, 0.5), var(--color-gold-bright));
  transform-origin: left;
  transition: transform 1.4s cubic-bezier(0.65, 0, 0.35, 1);
  transition-delay: calc(var(--i) * 0.3s + 0.2s);
}
.avg-row--build .avg-fill {
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(100% / var(--m) - 1.5px), rgba(5, 9, 15, 0.55) calc(100% / var(--m) - 1.5px) calc(100% / var(--m))),
    linear-gradient(90deg, rgba(157, 183, 213, 0.45), #9DB7D5);
}
.js .avg:not(.is-lit) .avg-fill { transform: scaleX(0); }
.avg-axis { display: flex; justify-content: space-between; margin-top: -6px; font-size: 0.7rem; color: var(--color-text-dim); font-variant-numeric: tabular-nums; }
.avg-axis span:last-child::after { content: ' months'; }

/* 3. Three milestones */
.miles { margin: 26px 0 28px; }
.miles-track { position: relative; list-style: none; margin: 0; padding: 70px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.miles-track::before { content: ''; position: absolute; top: 64px; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, rgba(205, 170, 114, 0.1), var(--color-gold-bright) 12%, var(--color-gold-bright) 88%, rgba(205, 170, 114, 0.1)); transform-origin: left; transition: transform 1.2s cubic-bezier(0.65, 0, 0.35, 1); }
.js .miles:not(.is-lit) .miles-track::before { transform: scaleX(0); }
.mile { position: relative; padding-top: 12px; text-align: center; font-size: 0.9rem; line-height: 1.4; color: var(--color-text); }
.mile::before { content: ''; position: absolute; top: -52px; left: 50%; width: 2px; height: 46px; background: var(--color-gold-bright); }
.mile .ms-flag { position: absolute; top: -52px; left: calc(50% + 2px); }
.mile::before, .mile .ms-flag { transition: opacity 0.5s ease, translate 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); transition-delay: calc(var(--i) * 0.35s + 0.8s); }
.js .miles:not(.is-lit) .mile::before, .js .miles:not(.is-lit) .mile .ms-flag { opacity: 0; translate: 0 14px; }
.mile::after { content: ''; position: absolute; top: -10px; left: calc(50% - 5px); width: 10px; height: 10px; border-radius: 50%; background: var(--color-ink); border: 2px solid var(--color-gold-bright); }

/* 4. Before demolition: four steps to the start line (doubles as navigation) */
.runway { margin: 6px 0 4px; }
.runway ol { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; counter-reset: runway; }
.runway li { position: relative; counter-increment: runway; transition: opacity 0.6s ease, translate 0.6s ease; transition-delay: calc(var(--i) * 90ms + 0.1s); }
.runway li + li::before { content: '\203A'; position: absolute; top: 50%; left: -11px; z-index: 1; translate: 0 -50%; color: var(--color-gold-bright); font-size: 1.2rem; line-height: 1; }
.js .runway:not(.is-lit) li { opacity: 0.35; translate: 0 10px; }
.post-body .runway a {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: 14px 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1.35;
  text-decoration: none;
  transition: border-color 0.4s ease, color 0.4s ease, background 0.4s ease, translate 0.4s ease, box-shadow 0.4s ease;
}
.runway a::before { content: counter(runway, decimal-leading-zero); font-family: var(--font-display); font-size: 0.8rem; color: rgba(176, 141, 87, 0.8); }
.post-body .runway a:hover { color: #fff; border-color: rgba(205, 170, 114, 0.5); translate: 0 -2px; }
.post-body .runway a.is-read { color: var(--color-text); border-color: rgba(205, 170, 114, 0.28); }
.post-body .runway a.is-current { color: #fff; border-color: var(--color-gold-bright); background: rgba(176, 141, 87, 0.12); box-shadow: 0 0 30px rgba(176, 141, 87, 0.12); }
.post-body .runway-end { display: flex; align-items: center; gap: 10px; width: fit-content; margin: 14px 0 0 auto; padding: 8px 16px 8px 12px; border-radius: 999px; border: 1px solid rgba(205, 170, 114, 0.5); color: #fff; font-size: 0.9rem; font-weight: 600; }
.runway-end::before { content: ''; width: 40px; height: 1px; margin-right: 2px; background: linear-gradient(90deg, transparent, var(--color-gold-bright)); }

/* 5. Decisions -> agreed scope -> what it shapes */
.shape { margin: 28px 0 24px; }
.shape-grid { display: grid; grid-template-columns: minmax(0, 1fr) 46px auto 46px minmax(0, 1fr); align-items: stretch; }
.shape-qs, .shape-fx { list-style: none; margin: 0; padding: 0; display: grid; grid-template-rows: repeat(3, 1fr); min-height: 168px; }
.shape-qs li, .shape-fx li { align-self: center; padding: 9px 12px; border-radius: 10px; font-size: 0.86rem; line-height: 1.3; transition: opacity 0.6s ease; }
.shape-qs li { border: 1px solid var(--border-strong); background: rgba(255, 255, 255, 0.03); color: var(--color-text); }
.shape-fx li { border: 1px solid rgba(157, 183, 213, 0.45); background: rgba(157, 183, 213, 0.07); color: #DCE6F2; transition-delay: calc(1.6s + var(--i) * 0.2s); }
.js .shape:not(.is-lit) .shape-fx li { opacity: 0.35; }
.shape-lines { width: 100%; height: 100%; overflow: visible; }
.shape-lines path { fill: none; stroke: rgba(205, 170, 114, 0.75); stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.js .shape-lines { clip-path: inset(0 100% 0 0); transition: clip-path 0.8s cubic-bezier(0.65, 0, 0.35, 1) 0.3s; }
.js .shape-lines--out { transition-delay: 1.1s; }
.shape.is-lit .shape-lines { clip-path: inset(0 0 0 0); }
.post-body .shape-scope { align-self: center; margin: 0; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--color-gold); background: rgba(176, 141, 87, 0.14); color: #fff; font-family: var(--font-display); font-size: 1.1rem; line-height: 1.25; text-align: center; transition: box-shadow 0.8s ease 0.9s; }
.shape.is-lit .shape-scope { box-shadow: 0 0 34px rgba(205, 170, 114, 0.25); }

/* 6. Selection schedule */
.selsched { margin: 24px 0 24px; }
.selsched-table { width: 100%; border-collapse: separate; border-spacing: 0 10px; font-size: 0.92rem; line-height: 1.4; }
.selsched-table caption { caption-side: bottom; padding-top: 2px; text-align: left; font-size: 0.88rem; color: var(--color-text-muted); }
.selsched-table thead th { padding: 0 16px; text-align: left; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-gold); }
.selsched-table tbody th, .selsched-table tbody td { position: relative; padding: 14px 16px; text-align: left; vertical-align: middle; background: rgba(255, 255, 255, 0.035); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.selsched-table tbody th { border-left: 1px solid var(--border-subtle); border-radius: 10px 0 0 10px; color: #fff; font-weight: 600; }
.selsched-table tbody td:last-child { border-right: 1px solid var(--border-subtle); border-radius: 0 10px 10px 0; color: #DCE6F2; }
.selsched-table tbody th::after, .selsched-table tbody td:nth-child(2)::after { content: '\2192'; position: absolute; top: 50%; right: -7px; z-index: 1; translate: 0 -50%; color: var(--color-gold-bright); }
.selsched-when { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 1px dashed rgba(205, 170, 114, 0.7); color: var(--color-gold-bright); font-size: 0.82rem; font-weight: 600; }
.selsched-table tbody tr { transition: opacity 0.6s ease, translate 0.6s ease; transition-delay: calc(var(--r) * 0.2s + 0.2s); }
.js .selsched:not(.is-lit) tbody tr { opacity: 0.4; translate: 0 8px; }

/* 7. Approvals and ordering, side by side, converging on the start of work */
.lanes { margin: 28px 0 24px; padding: 20px; }
.lanes-grid { display: grid; grid-template-columns: minmax(0, 1fr) 52px 150px; grid-template-rows: 1fr 1fr; row-gap: 14px; }
.lane { grid-column: 1; padding: 16px 18px; border-radius: 12px; border: 1px solid var(--border-subtle); background: rgba(5, 9, 15, 0.35); transition: opacity 0.6s ease, translate 0.6s ease; }
.lane--approvals { grid-row: 1; }
.lane--ordering { grid-row: 2; transition-delay: 0.25s; }
.js .lanes:not(.is-lit) .lane { opacity: 0.4; translate: -10px 0; }
.post-body .lane-name { margin: 0 0 10px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-gold); }
.lane-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 30px; }
.lane-steps li { position: relative; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border-strong); background: rgba(255, 255, 255, 0.03); color: #fff; font-size: 0.86rem; line-height: 1.3; }
.lane-steps li + li::before { content: '\2192'; position: absolute; top: 50%; left: -22px; translate: 0 -50%; color: var(--color-gold-bright); }
.lane-steps--neq li + li::before { content: '\2260'; left: -21px; color: var(--path-problem); font-size: 1.15rem; }
.lane-steps--neq li:last-child { border-style: dashed; border-color: rgba(232, 149, 122, 0.65); }
.lane-where { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lane-where li { padding: 8px 10px; border-left: 2px solid rgba(157, 183, 213, 0.6); border-radius: 0 8px 8px 0; background: rgba(157, 183, 213, 0.06); color: var(--color-text-muted); font-size: 0.8rem; line-height: 1.35; }
.lane-where span { display: block; margin-bottom: 2px; color: #fff; font-weight: 600; }
.post-body .lane-items { margin: 12px 0 0; font-size: 0.8rem; color: var(--color-text-dim); }
.lanes-join { grid-column: 2; grid-row: 1 / span 2; width: 100%; height: 100%; overflow: visible; }
.lanes-join path { fill: none; stroke: var(--color-gold-bright); stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.js .lanes-join { clip-path: inset(0 100% 0 0); transition: clip-path 0.8s cubic-bezier(0.65, 0, 0.35, 1) 0.8s; }
.lanes.is-lit .lanes-join { clip-path: inset(0 0 0 0); }
.post-body .lanes-start { grid-column: 3; grid-row: 1 / span 2; align-self: center; display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--color-gold); background: rgba(176, 141, 87, 0.14); color: #fff; font-size: 0.95rem; font-weight: 600; line-height: 1.3; transition: box-shadow 0.8s ease 1.5s; }
.lanes.is-lit .lanes-start { box-shadow: 0 0 34px rgba(205, 170, 114, 0.25); }
.post-body .lanes-later { margin: 14px 0 0; text-align: right; font-size: 0.82rem; color: var(--color-text-muted); }
.lanes-later::before { content: ''; display: inline-block; width: 70px; margin-right: 10px; border-top: 1px dashed rgba(205, 170, 114, 0.7); vertical-align: middle; }

/* 8. Ready to start: four conditions lift the barrier */
.gate { margin: 26px 0 24px; padding: 22px; }
.gate-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) 130px minmax(0, 0.8fr); align-items: center; gap: 18px; }
.gate-conds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gate-conds li { position: relative; padding: 10px 10px 10px 36px; border-radius: 10px; border: 1px solid var(--border-subtle); color: var(--color-text); font-size: 0.86rem; line-height: 1.3; }
.gate-conds li::before {
  content: '\2713';
  position: absolute;
  top: 50%;
  left: 10px;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--color-gold-bright);
  background: var(--color-gold-bright);
  color: var(--color-ink);
  font-size: 0.64rem;
  font-weight: 700;
  transition: background 0.4s ease, color 0.4s ease;
  transition-delay: calc(var(--i) * 0.25s + 0.3s);
}
.js .gate:not(.is-lit) .gate-conds li::before { background: transparent; color: transparent; }
.gate-barrier { display: block; width: 100%; height: auto; overflow: visible; }
.gate-ground { stroke: rgba(238, 241, 245, 0.3); stroke-width: 2; }
.gate-post { fill: #22344D; stroke: rgba(238, 241, 245, 0.5); stroke-width: 1.2; }
.gate-arm-base { fill: #EEF1F5; }
.gate-stripe { fill: var(--path-problem); }
.gate-pivot { fill: var(--color-gold-bright); }
.gate-arm { transform-origin: 19px 117.5px; transform: rotate(-76deg); transition: transform 1.2s cubic-bezier(0.34, 1.3, 0.64, 1) 1.5s; }
.js .gate:not(.is-lit) .gate-arm { transform: none; }
.post-body .gate-open { display: flex; align-items: center; gap: 10px; width: fit-content; margin: 0; padding: 10px 16px 10px 12px; border-radius: 999px; border: 1px solid var(--color-gold); background: rgba(176, 141, 87, 0.14); color: #fff; font-size: 0.95rem; font-weight: 600; transition: opacity 0.6s ease 2.3s, box-shadow 0.8s ease 2.3s; }
.js .gate:not(.is-lit) .gate-open { opacity: 0.35; }
.gate.is-lit .gate-open { box-shadow: 0 0 34px rgba(205, 170, 114, 0.28); }

/* 9. Construction stages: the rail fills as the reader moves through the table */
.stages { margin: 26px 0 22px; }
.stages .post-table-wrap { margin: 0; }
.stages-table tbody { counter-reset: stage; }
.stages-table tbody tr { counter-increment: stage; }
.stages-table tbody th { position: relative; padding-left: 58px; }
.stages-table tbody th::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 27px;
  width: 2px;
  background: linear-gradient(var(--color-gold-bright), var(--color-gold-bright)) no-repeat 0 0 / 2px calc(var(--rp, 0) * 100%), rgba(255, 255, 255, 0.08);
}
.stages-table tbody tr:first-child th::before { top: 26px; }
.stages-table tbody tr:last-child th::before { bottom: auto; height: 26px; }
.stages-table tbody th::after {
  content: counter(stage);
  position: absolute;
  top: 14px;
  left: 16px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(205, 170, 114, 0.6);
  background: var(--color-ink);
  color: var(--color-gold-bright);
  font-size: 0.72rem;
  font-weight: 700;
  transition: background 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
}
.stages-table tbody tr.is-current th::after, .stages-table tbody tr.is-done th::after { background: var(--color-gold-bright); color: var(--color-ink); box-shadow: 0 0 14px rgba(205, 170, 114, 0.55); }
.stages-table tbody tr.is-current { background: rgba(176, 141, 87, 0.06); }
.stages-table td:last-child { color: var(--color-text); }

/* 10. The countertop chain */
.chain { margin: 26px 0 24px; }
.chain-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; }
.chain-steps li {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 14px 10px;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  color: var(--color-text-muted);
  font-size: 0.84rem;
  line-height: 1.35;
  text-align: center;
  transition: border-color 0.5s ease, color 0.5s ease, box-shadow 0.5s ease;
  transition-delay: calc(var(--i) * 0.45s + 0.3s);
}
.chain-steps li + li::before { content: ''; position: absolute; top: 50%; left: -22px; width: 22px; height: 2px; background: var(--color-gold-bright); transform-origin: left; transition: transform 0.4s ease; transition-delay: calc(var(--i) * 0.45s + 0.1s); }
.js .chain:not(.is-lit) .chain-steps li + li::before { transform: scaleX(0); }
.chain.is-lit .chain-steps li { border-color: rgba(157, 183, 213, 0.7); color: #fff; box-shadow: 0 0 22px rgba(157, 183, 213, 0.12); }
.chain-steps .chain-wait { border-style: dashed; }
.chain.is-lit .chain-steps .chain-wait { border-color: rgba(232, 149, 122, 0.75); box-shadow: none; }
.chain-note { display: block; margin-top: 6px; font-size: 0.72rem; color: var(--path-problem); }

/* 11. Quiet days: the line keeps moving without a truck in the driveway */
.quiet { margin: 26px 0 24px; padding: 22px 22px 18px; }
.quiet-days { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.qd { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 6px 12px; border-radius: 10px; border: 1px dashed var(--border-strong); color: var(--color-text-muted); font-size: 0.78rem; line-height: 1.25; text-align: center; transition: opacity 0.4s ease; transition-delay: calc(var(--i) * 0.5s + 0.3s); }
.qd--crew { border-style: solid; border-color: rgba(157, 183, 213, 0.55); background: rgba(157, 183, 213, 0.08); color: #fff; }
.qd-icon { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.qd--crew .qd-icon { stroke: #9DB7D5; }
.js .quiet:not(.is-lit) .qd { opacity: 0.35; }
.quiet-line { position: relative; height: 4px; margin-top: 14px; border-radius: 2px; background: rgba(255, 255, 255, 0.07); }
.quiet-line span { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; border-radius: 2px; background: linear-gradient(90deg, rgba(176, 141, 87, 0.4), var(--color-gold-bright)); box-shadow: 0 0 10px rgba(205, 170, 114, 0.45); transform-origin: left; transition: transform 3s linear 0.3s; }
.js .quiet:not(.is-lit) .quiet-line span { transform: scaleX(0); }

/* 12. A useful update */
.update { margin: 22px 0 24px; }
.update-card { max-width: 480px; margin: 0 auto; padding: 18px 20px; border-radius: 16px; border: 1px solid rgba(205, 170, 114, 0.45); background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); box-shadow: var(--shadow-lg); }
.post-body .update-head { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: #fff; font-size: 0.95rem; font-weight: 600; }
.update-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-gold-bright); box-shadow: 0 0 10px rgba(205, 170, 114, 0.8); }
.update-tag { margin-left: auto; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--color-text-dim); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.update-card dl { margin: 0; display: grid; gap: 12px; }
.update-card dl > div { padding-left: 14px; border-left: 2px solid rgba(205, 170, 114, 0.55); transition: opacity 0.5s ease, translate 0.5s ease; transition-delay: calc(var(--i) * 0.35s + 0.3s); }
.update-card dl > div:nth-child(2) { border-left-color: var(--path-problem); }
.update-card dt { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-dim); }
.update-card dd { margin: 3px 0 0; font-size: 0.98rem; line-height: 1.4; color: #fff; }
.js .update:not(.is-lit) .update-card dl > div { opacity: 0.35; translate: 0 6px; }
.update figcaption { text-align: center; }

/* 13. A change moves the tasks after it, and the milestones */
.shift { margin: 28px 0 24px; }
.shift-frame { padding: 18px 22px 18px; }
.post-body .shift-event { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 0.82rem; transition: opacity 0.5s ease; }
.shift-event span { padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(232, 149, 122, 0.6); background: rgba(232, 149, 122, 0.08); color: #F3C9B9; }
.shift-event span + span::before { content: '\2192'; margin-right: 8px; color: var(--path-problem); }
.shift[data-level="planned"] .shift-event { opacity: 0.3; }
.shift-chart { position: relative; display: grid; grid-template-columns: 150px 1fr; column-gap: 14px; row-gap: 10px; margin-top: 34px; }
.shift-row { display: contents; }
.shift-label { align-self: center; color: var(--color-text); font-size: 0.82rem; line-height: 1.3; }
.shift-lane { position: relative; height: 28px; border-radius: 6px; background: rgba(255, 255, 255, 0.04); }
.shift-bar { position: absolute; top: 4px; bottom: 4px; border-radius: 5px; transition: left 1.1s cubic-bezier(0.65, 0, 0.35, 1), width 1.1s cubic-bezier(0.65, 0, 0.35, 1); }
.shift-bar--cab { left: 0; width: 30%; background: linear-gradient(90deg, rgba(157, 183, 213, 0.45), #9DB7D5); }
.shift-bar--change { left: 30%; width: 0; background: repeating-linear-gradient(45deg, rgba(232, 149, 122, 0.9) 0 6px, rgba(232, 149, 122, 0.5) 6px 12px); box-shadow: 0 0 12px rgba(232, 149, 122, 0.45); }
.shift-bar--top { left: 34%; width: 24%; background: linear-gradient(90deg, rgba(157, 183, 213, 0.35), rgba(157, 183, 213, 0.85)); }
.shift-bar--close { left: 62%; width: 18%; background: linear-gradient(90deg, rgba(157, 183, 213, 0.3), rgba(157, 183, 213, 0.7)); }
.shift[data-level="changed"] .shift-bar--change { width: 14%; }
.shift[data-level="changed"] .shift-bar--top { left: 48%; }
.shift[data-level="changed"] .shift-bar--close { left: 76%; }
.shift-flags { position: absolute; top: -8px; bottom: -6px; left: 164px; right: 0; pointer-events: none; }
.shift-flag { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed rgba(205, 170, 114, 0.7); transition: left 1.1s cubic-bezier(0.65, 0, 0.35, 1), border-color 0.6s ease; }
.shift-flag .ms-flag { position: absolute; top: -20px; left: -1px; transition: background 0.6s ease; }
.shift-flag--2 { left: 74%; }
.shift-flag--3 { left: 80%; }
.shift[data-level="changed"] .shift-flag--2 { left: 88%; }
.shift[data-level="changed"] .shift-flag--3 { left: 94%; }
.shift[data-level="changed"] .shift-flag { border-left-color: rgba(232, 149, 122, 0.8); }
.shift[data-level="changed"] .shift-flag .ms-flag { background: var(--path-problem); }
.post-body .shift-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 18px 0 0; font-size: 0.82rem; color: var(--color-text-muted); }
.shift-legend > span { display: inline-flex; align-items: center; gap: 8px; }

/* 14. Installed is not the same as ready for normal use */
.usable { margin: 26px 0 24px; }
.usable-grid { display: grid; grid-template-columns: minmax(0, 0.75fr) auto minmax(0, 1.7fr); align-items: center; gap: 16px; }
.usable-card { padding: 18px 20px; border-radius: 12px; border: 1px solid var(--border-subtle); background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)); }
.usable-card--installed { border-color: rgba(205, 170, 114, 0.45); }
.usable-card--ready { border-color: rgba(157, 183, 213, 0.5); }
.post-body .usable-head { margin: 0 0 12px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-gold); }
.usable-card--ready .usable-head { color: #9DB7D5; }
.usable-done { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.usable-done li { position: relative; padding-left: 26px; color: #fff; font-size: 0.95rem; }
.usable-done li::before { content: '\2713'; position: absolute; top: 0.15em; left: 0; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--color-gold-bright); color: var(--color-ink); font-size: 0.64rem; font-weight: 700; }
.usable-neq { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; color: var(--path-problem); text-align: center; }
.usable-items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.usable-items li { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: 10px; border: 1px solid var(--border-subtle); color: var(--color-text-muted); font-size: 0.78rem; line-height: 1.25; text-align: center; transition: border-color 0.5s ease, color 0.5s ease, background 0.5s ease; transition-delay: calc(var(--i) * 0.3s + 0.5s); }
.usable-items svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.usable.is-lit .usable-items li, html:not(.js) .usable-items li { border-color: rgba(157, 183, 213, 0.55); background: rgba(157, 183, 213, 0.07); color: #fff; }
.post-body .usable-zone, .post-body .usable-cure { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; color: var(--color-text-muted); font-size: 0.82rem; line-height: 1.35; }
.usable-zone::before { content: ''; flex: none; width: 34px; height: 10px; border-radius: 2px; background: repeating-linear-gradient(45deg, var(--path-problem) 0 5px, rgba(5, 9, 15, 0.9) 5px 10px); }
.usable-cure::before { content: ''; flex: none; width: 12px; height: 12px; margin: 0 11px; border-radius: 50%; border: 1.5px dashed var(--color-gold-bright); }
.post-body .usable-ms { display: flex; align-items: center; gap: 10px; width: fit-content; margin: 16px 0 0 auto; padding: 8px 16px 8px 12px; border-radius: 999px; border: 1px solid rgba(205, 170, 114, 0.5); color: #fff; font-size: 0.9rem; font-weight: 600; }

/* 15. Walkthrough checklist (ticks are kept on this device) */
.walk { margin: 26px 0 24px; padding: 22px; }
.walk-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 12px; margin-bottom: 14px; }
.post-body .walk-title { margin: 0; font-family: var(--font-display); font-size: 1.2rem; color: #fff; }
.post-body .walk-count { margin: 0; font-size: 0.82rem; color: var(--color-text-dim); font-variant-numeric: tabular-nums; }
html:not(.js) .walk-count, html:not(.js) .walk-clear { display: none; }
.walk-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.walk-list label { display: flex; align-items: flex-start; gap: 12px; height: 100%; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--border-subtle); color: var(--color-text); font-size: 0.9rem; line-height: 1.4; cursor: pointer; transition: border-color 0.3s ease, background 0.3s ease; }
.walk-list label:hover { border-color: rgba(205, 170, 114, 0.4); }
.walk-list input { appearance: none; -webkit-appearance: none; flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin: 1px 0 0; border-radius: 6px; border: 1.5px solid rgba(205, 170, 114, 0.75); background: transparent; cursor: pointer; transition: background 0.2s ease; }
.walk-list input::after { content: '\2713'; color: var(--color-ink); font-size: 0.72rem; font-weight: 700; opacity: 0; }
.walk-list input:checked { background: var(--color-gold-bright); }
.walk-list input:checked::after { opacity: 1; }
.walk-list input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.walk-list label:has(input:checked) { border-color: rgba(205, 170, 114, 0.55); background: rgba(176, 141, 87, 0.08); color: #fff; }
.walk-vs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-subtle); }
.post-body .walk-vague { margin: 0; color: var(--color-text-dim); font-size: 0.95rem; }
.walk-vague s { text-decoration-color: var(--path-problem); text-decoration-thickness: 2px; transition: text-decoration-color 0.6s ease 0.6s; }
.js .walk:not(.is-lit) .walk-vague s { text-decoration-color: transparent; }
.post-body .walk-defined { display: flex; align-items: center; gap: 10px; margin: 0; color: #fff; font-size: 0.92rem; }
.walk-defined::before { content: '\2192'; color: var(--color-gold-bright); }
.post-body .walk-ms { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; color: var(--color-text-muted); font-size: 0.9rem; }
.walk-clear { margin-top: 10px; padding: 0; border: 0; background: none; color: var(--color-link); font: inherit; font-size: 0.82rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* 16. Work backward from the date that matters */
.back { margin: 28px 0 24px; }
.back-frame { padding: 18px 22px 22px; }
.back-toggle { flex-wrap: wrap; margin-bottom: 20px; border-radius: 18px; }
.back-chain { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: row-reverse; align-items: stretch; gap: 26px; }
.back-chain li {
  position: relative;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  color: var(--color-text);
  font-size: 0.82rem;
  line-height: 1.3;
  text-align: center;
  transition: border-color 0.5s ease, opacity 0.5s ease, background 0.5s ease;
  transition-delay: calc(var(--i) * 0.3s + 0.3s);
}
.back-chain li + li::after { content: '\2190'; position: absolute; top: 50%; right: -19px; translate: 0 -50%; color: var(--color-gold-bright); font-size: 0.95rem; }
.js .back:not(.is-lit) .back-chain li { opacity: 0.35; }
.back.is-lit .back-chain li:not(.back-date) { border-color: rgba(205, 170, 114, 0.45); }
.back-chain .back-date { flex: 1.5 1 0; flex-direction: column; gap: 4px; border-color: var(--color-gold); background: rgba(176, 141, 87, 0.14); }
.back-date-label { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-gold-bright); }
.back-for { display: none; font-family: var(--font-display); font-size: 0.98rem; line-height: 1.25; color: #fff; }
.back[data-level="dinner"] .back-for--dinner,
.back[data-level="hosting"] .back-for--hosting,
.back[data-level="final"] .back-for--final { display: block; }
.post-body .back-room { margin: 16px 0 0; padding: 10px 14px; border-radius: 10px; border: 1.5px dashed rgba(232, 149, 122, 0.65); background: rgba(232, 149, 122, 0.06); color: var(--color-text); font-size: 0.85rem; text-align: center; }

@media (min-width: 761px) {
  .stages-table td:last-child::before { content: '\21B3'; margin-right: 6px; color: var(--color-gold-bright); }
}
@media (max-width: 760px) {
  .post-card-before { clip-path: polygon(0 0, 54% 0, 46% 100%, 0 100%); }
  .twotl-frame { padding: 52px 14px 16px; }
  .twotl-bar { flex-direction: column; height: auto; }
  .twotl-seg { flex: none; justify-items: start; padding: 9px 12px; border-right: 0; border-bottom: 1px solid rgba(5, 9, 15, 0.7); text-align: left; }
  .twotl-seg--build { border-bottom: 0; }
  .twotl-access { gap: 16px; }
  .twotl-access span { flex: none; padding: 0 0 0 26px; }
  .twotl-access span::before { top: 50%; right: auto !important; width: 18px; margin-top: -1.5px; }
  .twotl-zoom-lines { display: none; }
  .twotl-zoom { margin: 12px 0 0; }
  .avg-chart { padding: 18px 14px 14px; }
  .miles-track { gap: 8px; }
  .mile { font-size: 0.8rem; }
  .runway ol { grid-template-columns: 1fr 1fr; }
  .runway li:nth-child(3)::before { display: none; }
  .shape-grid { grid-template-columns: 1fr; gap: 10px; }
  .shape-lines { display: none; }
  .shape-qs, .shape-fx { min-height: 0; grid-template-rows: none; display: flex; flex-wrap: wrap; gap: 6px; }
  .post-body .shape-scope { position: relative; margin: 14px 0; }
  .post-body .shape-scope::before, .post-body .shape-scope::after { content: '\2193'; position: absolute; left: 50%; translate: -50% 0; color: var(--color-gold-bright); font-family: var(--font-body); font-size: 0.9rem; }
  .post-body .shape-scope::before { top: -22px; }
  .post-body .shape-scope::after { bottom: -22px; }
  .selsched-table { font-size: 0.82rem; }
  .selsched-table thead th { padding: 0 8px; font-size: 0.58rem; letter-spacing: 0.08em; }
  .selsched-table tbody th, .selsched-table tbody td { padding: 10px 8px; }
  .selsched-when { display: inline-block; padding: 4px 8px; border-radius: 8px; font-size: 0.72rem; line-height: 1.35; }
  .selsched-table tbody th::after, .selsched-table tbody td:nth-child(2)::after { display: none; }
  .lanes { padding: 14px; }
  .lanes-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .lane--approvals, .lane--ordering, .post-body .lanes-start { grid-column: 1; grid-row: auto; }
  .lanes-join { display: none; }
  .post-body .lanes-start { justify-self: center; margin-top: 4px; }
  .lane-where { grid-template-columns: 1fr; }
  .post-body .lanes-later { text-align: center; }
  .gate { padding: 16px; }
  .gate-grid { grid-template-columns: 1fr; justify-items: center; gap: 14px; }
  .gate-conds { width: 100%; }
  .gate-barrier { max-width: 130px; }
  .stages-table tbody tr { position: relative; padding-left: 46px; }
  .stages-table tbody tr::before { content: ''; position: absolute; top: 0; bottom: 0; left: 22px; width: 2px; background: linear-gradient(var(--color-gold-bright), var(--color-gold-bright)) no-repeat 0 0 / 2px calc(var(--rp, 0) * 100%), rgba(255, 255, 255, 0.08); }
  .stages-table tbody th { position: static; padding-left: 0; }
  .stages-table tbody th::before { display: none; }
  .stages-table tbody th::after { top: 16px; left: 11px; }
  .chain-steps { grid-template-columns: 1fr; gap: 16px; }
  .chain-steps li + li::before { top: -16px; left: 50%; width: 2px; height: 16px; transform-origin: top; }
  .js .chain:not(.is-lit) .chain-steps li + li::before { transform: scaleY(0); }
  .quiet { padding: 16px 12px 14px; }
  .quiet-days { grid-template-columns: repeat(3, 1fr); }
  .shift-frame { padding: 14px 12px 14px; }
  .shift-chart { grid-template-columns: 92px 1fr; column-gap: 10px; }
  .shift-label { font-size: 0.72rem; }
  .shift-flags { left: 102px; }
  .shift-chart { margin-top: 52px; }
  .shift-flag--3 .ms-flag { top: -42px; }
  .shift-flag--3::before { content: ''; position: absolute; top: -22px; left: -1px; height: 22px; border-left: 1px dashed currentColor; color: rgba(205, 170, 114, 0.7); }
  .usable-grid { grid-template-columns: 1fr; gap: 10px; }
  .usable-items { grid-template-columns: 1fr 1fr; }
  .post-body .usable-ms { margin: 14px auto 0; }
  .walk { padding: 16px 14px; }
  .walk-list { grid-template-columns: 1fr; }
  .back-frame { padding: 14px 12px 16px; }
  .back-chain { flex-direction: column; gap: 20px; }
  .back-chain li { flex: none; padding: 10px; }
  .back-chain .back-date { flex: none; }
  .back-chain li + li::after { content: '\2193'; top: -19px; right: auto; left: 50%; translate: -50% 0; }
}

/* ==========================================================================
   Living at home during a kitchen remodel — one normal day, flowing.
   The sky and a sun follow the reader from breakfast to night; a sticky example plan
   (desktop) lights the part of the house each section is about. Figures are lighter and
   mostly unframed so the day reads as one continuous flow.
   ========================================================================== */
.post { --path-update: #CDAA72; --path-layout: #9DB7D5; --path-problem: #E8957A; }
.post--day { position: relative; isolation: isolate; }

/* The day's light, fixed behind the article */
.day-sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.sky { position: absolute; inset: 0; transition: opacity 0.35s linear; }
.sky--dawn { opacity: var(--sky-dawn, 0); background: radial-gradient(ellipse 75% 50% at 6% 104%, rgba(242, 178, 112, 0.22), transparent 70%), radial-gradient(ellipse 45% 30% at 28% 100%, rgba(232, 149, 122, 0.10), transparent 70%); }
.sky--noon { opacity: var(--sky-noon, 0); background: radial-gradient(ellipse 85% 55% at 50% -12%, rgba(170, 196, 226, 0.17), transparent 70%); }
.sky--dusk { opacity: var(--sky-dusk, 0); background: radial-gradient(ellipse 75% 50% at 96% 104%, rgba(232, 133, 110, 0.22), transparent 70%), radial-gradient(ellipse 50% 35% at 70% 100%, rgba(205, 170, 114, 0.12), transparent 70%); }
.sky--night { opacity: var(--sky-night, 0); background: radial-gradient(circle at 84% 14%, rgba(220, 230, 245, 0.10), transparent 18%), radial-gradient(1px 1px at 20% 20%, rgba(255, 255, 255, 0.5), transparent), radial-gradient(1px 1px at 62% 12%, rgba(255, 255, 255, 0.4), transparent), radial-gradient(1px 1px at 76% 34%, rgba(255, 255, 255, 0.35), transparent), linear-gradient(180deg, rgba(2, 4, 10, 0.42), rgba(2, 4, 10, 0.55)); }

/* Hero: a warm light crosses the room, like the sun across a day */
.post-hero-sun { position: absolute; top: 62%; left: -6%; width: 70vmax; height: 70vmax; border-radius: 50%; translate: -50% -50%; background: radial-gradient(circle, rgba(255, 196, 128, 0.34), rgba(232, 149, 122, 0.12) 34%, transparent 64%); mix-blend-mode: screen; pointer-events: none; }
.js .post-hero-sun { animation: hero-day 13s cubic-bezier(0.45, 0, 0.25, 1) 0.5s both; }
@keyframes hero-day {
  0% { top: 92%; left: 0%; opacity: 0; }
  14% { opacity: 1; }
  50% { top: 12%; left: 50%; }
  100% { top: 88%; left: 100%; opacity: 0.55; }
}

/* Each section names its part of the day (decorative) */
.post--day .post-section[data-daypart]::before {
  content: attr(data-daypart);
  display: block;
  margin-bottom: 12px;
  color: var(--daypart, var(--color-gold-bright));
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.post--day [data-daypart="Morning"] { --daypart: #F2C987; }
.post--day [data-daypart="Midday"], .post--day [data-daypart="Daytime"] { --daypart: #C9D9EC; }
.post--day [data-daypart="Afternoon"] { --daypart: #E9C9A1; }
.post--day [data-daypart="Evening"], .post--day [data-daypart="After dinner"] { --daypart: #EFA58B; }
.post--day [data-daypart="Night"] { --daypart: #A9C1DE; }
.post--day [data-daypart="Evening"] .flow-node.is-lit::before, .post--day [data-daypart="After dinner"] .flow-node.is-lit::before { background: #EFA58B; border-color: #EFA58B; }
.post--day [data-daypart="Night"] .flow-node.is-lit::before { background: #A9C1DE; border-color: #A9C1DE; box-shadow: 0 0 0 5px rgba(157, 183, 213, 0.14), 0 0 20px 4px rgba(157, 183, 213, 0.4); }

/* Opening: the three things to keep are drawn in as the answer is read */
.needs .need { color: #fff; background-image: linear-gradient(rgba(205, 170, 114, 0.32), rgba(205, 170, 114, 0.32)); background-repeat: no-repeat; background-position: 0 90%; background-size: 100% 0.38em; transition: background-size 1.2s cubic-bezier(0.65, 0, 0.35, 1) 0.3s; }
.needs .need:nth-of-type(2) { transition-delay: 0.7s; }
.needs .need:nth-of-type(3) { transition-delay: 1.1s; }
.js .needs:not(.is-lit) .need { background-size: 0% 0.38em; }

/* 1. One ordinary weekday over the straight construction timeline */
.weekday { margin: 30px 0 4px; }
.weekday-stage { position: relative; height: 214px; }
.weekday-svg { position: absolute; top: 34px; left: 0; width: 100%; height: 120px; overflow: visible; }
.weekday-ribbon { fill: none; stroke: var(--color-gold-bright); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px rgba(205, 170, 114, 0.45)); }
.weekday-ribbon--soft { stroke: rgba(157, 183, 213, 0.45); stroke-width: 1.4; filter: none; }
.js .weekday-svg { clip-path: inset(-20px 100% -20px 0); transition: clip-path 2.4s cubic-bezier(0.45, 0, 0.25, 1) 0.2s; }
.weekday.is-lit .weekday-svg { clip-path: inset(-20px 0 -20px 0); }
.weekday-beads { position: absolute; top: 34px; left: 0; right: 0; height: 120px; list-style: none; margin: 0; padding: 0; }
.weekday-beads li { position: absolute; left: calc(var(--xn) * 100%); top: calc(var(--yn) * 100%); translate: -50% 18px; color: #fff; font-size: 0.86rem; font-weight: 500; white-space: nowrap; transition: opacity 0.5s ease, scale 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); transition-delay: calc(0.4s + var(--xn) * 2.2s); }
.weekday-beads li.is-up { translate: -50% calc(-100% - 18px); }
.weekday-beads li::before { content: ''; position: absolute; left: calc(50% - 7px); width: 14px; height: 14px; border-radius: 50%; background: var(--color-ink); border: 2px solid var(--color-gold-bright); box-shadow: 0 0 14px rgba(205, 170, 114, 0.6); }
.weekday-beads li.is-down::before { top: -25px; }
.weekday-beads li.is-up::before { bottom: -25px; }
.js .weekday:not(.is-lit) .weekday-beads li { opacity: 0; scale: 0.85; }
.post-body .weekday-line { position: absolute; left: 0; right: 0; bottom: 22px; height: 1px; margin: 0; background: rgba(238, 241, 245, 0.28); }
.weekday-line span { position: absolute; top: 8px; right: 0; color: var(--color-text-dim); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; }
.weekday figcaption { margin-top: 4px; font-size: 0.86rem; color: var(--color-text-muted); }
.post-body .weekday-close { margin: 22px 0 0; font-family: var(--font-display); font-size: clamp(1.3rem, 2.3vw, 1.55rem); line-height: 1.4; color: #F6ECD8; }

/* 2. Two projects, two footprints */
.foot { margin: 26px 0 26px; }
.foot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.foot-svg { display: block; width: 100%; height: auto; }
.foot-house { fill: rgba(255, 255, 255, 0.025); stroke: rgba(238, 241, 245, 0.4); stroke-width: 1.5; }
.foot-wall { fill: none; stroke: rgba(238, 241, 245, 0.3); stroke-width: 1.5; }
.foot-zone { fill: rgba(232, 149, 122, 0.35); stroke: rgba(232, 149, 122, 0.85); stroke-width: 1; }
.foot-zone--spread { fill: rgba(232, 149, 122, 0.16); stroke-dasharray: 5 4; transition: clip-path 1.8s cubic-bezier(0.65, 0, 0.35, 1) 0.5s; }
.js .foot:not(.is-lit) .foot-zone--spread { clip-path: inset(0 100% 100% 0); }
.post-body .foot-label { margin: 10px 0 0; color: var(--color-text); font-size: 0.88rem; line-height: 1.45; }
.foot figcaption, .homemap figcaption, .setup figcaption, .reach figcaption, .band figcaption, .households figcaption,
.moveout figcaption, .meal figcaption, .budgets figcaption, .wash figcaption, .dusk figcaption, .ret figcaption {
  margin-top: 12px;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* 3. The example home (full, annotated) and its compact twin in the sticky panel */
.hm-svg { display: block; width: 100%; height: auto; }
.hm-house { fill: rgba(255, 255, 255, 0.015); stroke: rgba(238, 241, 245, 0.35); stroke-width: 2; }
.hm-room > rect:first-child { fill: rgba(255, 255, 255, 0.03); stroke: rgba(238, 241, 245, 0.25); stroke-width: 1.2; }
.hm-room--work > rect:first-child { fill: rgba(232, 149, 122, 0.1); stroke: rgba(232, 149, 122, 0.75); }
.hm-hatch { stroke: none; }
.hm-hatch-line { stroke: rgba(232, 149, 122, 0.4); stroke-width: 1.5; }
.hm-room--store > rect:first-child { fill: rgba(232, 149, 122, 0.05); stroke: rgba(232, 149, 122, 0.6); stroke-dasharray: 5 4; }
.hm-box { fill: rgba(232, 149, 122, 0.22); stroke: rgba(232, 149, 122, 0.7); }
.hm-room--temp > rect:first-child { fill: rgba(205, 170, 114, 0.14); stroke: var(--color-gold-bright); stroke-width: 1.6; }
.hm-item { fill: rgba(238, 241, 245, 0.08); stroke: rgba(238, 241, 245, 0.5); stroke-width: 1; }
.hm-room--temp .hm-item { fill: rgba(205, 170, 114, 0.14); stroke: rgba(205, 170, 114, 0.9); }
.hm-room--bath > rect:first-child { fill: rgba(157, 183, 213, 0.12); stroke: rgba(157, 183, 213, 0.75); }
.hm-drop { fill: rgba(157, 183, 213, 0.65); }
.hm-zone { fill: none; stroke: rgba(232, 149, 122, 0.85); stroke-width: 1.5; stroke-dasharray: 7 5; }
.hm-noise { fill: none; stroke: rgba(232, 149, 122, 0.4); stroke-width: 1.2; stroke-dasharray: 3 6; }
.hm-route { fill: none; stroke: rgba(238, 241, 245, 0.8); stroke-width: 2.2; stroke-dasharray: 1 7; stroke-linecap: round; }
.hm-crew-path { fill: none; stroke: var(--path-problem); stroke-width: 2; }
.hm-door--crew { fill: var(--path-problem); }
.hm-door--front, .hm-door--yard { fill: var(--color-gold-bright); }
.hm-move { fill: none; stroke: var(--color-gold-bright); stroke-width: 1.4; stroke-dasharray: 4 4; }
.hm-arrowhead { fill: var(--color-gold-bright); }
.hm-arrowhead--crew { fill: var(--path-problem); }
.hm-bowl, .hm-pack { fill: rgba(205, 170, 114, 0.25); stroke: var(--color-gold-bright); }
.hm-label { fill: rgba(238, 241, 245, 0.88); font: 600 10px var(--font-body); text-anchor: middle; }
.hm-sub { fill: rgba(238, 241, 245, 0.6); font-weight: 500; font-size: 8.5px; }
.hm-label--sm { font-size: 8.5px; }
.hm-mark .plan-mark-dot { fill: var(--color-gold-bright); }
.hm-mark .plan-mark-ring { fill: none; stroke: var(--color-gold-bright); stroke-width: 1.5; opacity: 0; }
@keyframes route-flow { to { stroke-dashoffset: -16; } }

.homemap { margin: 30px 0 24px; }
.homemap-frame { position: relative; padding: 56px 20px 18px; border-radius: 16px; border: 1px solid var(--border-subtle); background: radial-gradient(ellipse at 50% 0%, rgba(205, 170, 114, 0.07), transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)); }
.homemap .hm-noise-g { display: none; }
.homemap .hm-el { transition: opacity 0.7s ease; }
.homemap .hm-room { transition-delay: 0.2s; }
.homemap .hm-zone { transition-delay: 0.7s; }
.homemap .hm-routes { transition-delay: 1.1s; }
.homemap .hm-move, .homemap .hm-bowl, .homemap .hm-pack { transition-delay: 1.4s; }
.homemap .hm-crew, .homemap .hm-door { transition-delay: 1.6s; }
.js .homemap:not(.is-lit) .hm-el { opacity: 0; }
.homemap.is-lit .hm-route { animation: route-flow 1.4s linear infinite; }
.homemap .hm-mark { transition: opacity 0.5s ease; transition-delay: calc(1.9s + var(--m) * 0.15s); }
.js .homemap:not(.is-lit) .hm-mark { opacity: 0; }
.homemap-legend .plan-key { background: var(--color-gold-bright); }

/* 4. The busiest half-hour */
.rush { margin: 26px 0 26px; }
.post-body .rush-window { margin: 0 0 12px; }
.rush-window span { color: var(--color-gold-bright); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.rush-window::after { content: ''; display: block; height: 8px; margin-top: 6px; border: 1px solid rgba(205, 170, 114, 0.55); border-bottom: 0; border-radius: 6px 6px 0 0; }
.rush-grid { display: grid; grid-template-columns: auto minmax(60px, 1fr) auto; align-items: stretch; }
.rush-lanes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-rows: repeat(3, 1fr); min-height: 150px; }
.rush-lanes li { align-self: center; width: fit-content; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--border-strong); background: rgba(255, 255, 255, 0.03); color: var(--color-text); font-size: 0.88rem; transition: opacity 0.5s ease, translate 0.5s ease; transition-delay: calc(var(--i) * 0.2s + 0.2s); }
.js .rush:not(.is-lit) .rush-lanes li { opacity: 0.35; translate: -10px 0; }
.rush-lines { width: 100%; height: 100%; overflow: visible; }
.rush-lines path { fill: none; stroke: var(--color-gold-bright); stroke-width: 1.5; stroke-dasharray: 2 6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.rush.is-lit .rush-lines path { animation: flow 1s linear infinite; }
.post-body .rush-out { align-self: center; max-width: 170px; margin: 0; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--color-gold); background: rgba(176, 141, 87, 0.14); color: #fff; font-family: var(--font-display); font-size: 1.05rem; line-height: 1.3; }

/* 5. An example temporary kitchen */
.setup { position: relative; margin: 28px 0 24px; padding: 56px 20px 18px; border-radius: 16px; border: 1px solid var(--border-subtle); background: radial-gradient(ellipse at 25% 100%, rgba(242, 178, 112, 0.1), transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)); }
.setup-svg { display: block; width: 100%; height: auto; overflow: visible; }
.st-floor { stroke: rgba(238, 241, 245, 0.3); stroke-width: 2; }
.st-obj { fill: #14233A; stroke: rgba(238, 241, 245, 0.5); stroke-width: 1.2; }
.st-obj--hi { stroke: var(--color-gold-bright); }
.st-glass { fill: rgba(157, 183, 213, 0.18); stroke: rgba(157, 183, 213, 0.6); }
.st-line { fill: none; stroke: rgba(238, 241, 245, 0.45); stroke-width: 1.2; }
.st-board { fill: rgba(205, 170, 114, 0.35); stroke: var(--color-gold-bright); }
.st-food { fill: rgba(205, 170, 114, 0.22); stroke: rgba(205, 170, 114, 0.8); }
.st-bin { fill: rgba(205, 170, 114, 0.12); stroke: var(--color-gold-bright); stroke-dasharray: 3 2; }
.st-outlet { fill: #1F2E46; stroke: rgba(238, 241, 245, 0.6); }
.st-cord { fill: none; stroke: rgba(205, 170, 114, 0.7); stroke-width: 1.4; stroke-dasharray: 3 3; }
.st-part { transition: opacity 0.6s ease, translate 0.6s ease; transition-delay: calc(var(--i) * 0.18s + 0.2s); }
.js .setup:not(.is-lit) .st-part { opacity: 0; translate: 0 8px; }
.st-mark .plan-mark-dot { fill: var(--color-gold-bright); }
.st-mark .plan-mark-ring { fill: none; stroke: var(--color-gold-bright); stroke-width: 1.5; opacity: 0; }
.setup .st-mark { transition: opacity 0.5s ease; transition-delay: calc(1.6s + var(--m) * 0.15s); }
.js .setup:not(.is-lit) .st-mark { opacity: 0; }
.setup-legend .plan-key { background: var(--color-gold-bright); }
.post-body .setup-fit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 0.82rem; }
.setup-fit span { padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(205, 170, 114, 0.5); color: #F1E5CE; }
.setup-fit .setup-fit-head { margin-right: 4px; padding: 0; border: 0; color: var(--color-text-dim); }

/* 6. Within reach, not in the boxes */
.reach { margin: 26px 0 24px; }
.reach-grid { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 24px; }
.reach-boxes { position: relative; height: 150px; }
.reach-box { position: absolute; width: 70px; height: 52px; border-radius: 4px; border: 1px solid rgba(205, 170, 114, 0.35); background: linear-gradient(180deg, #3A2E22, #2A2119); }
.reach-box::before { content: ''; position: absolute; top: 0; bottom: 64%; left: calc(50% - 7px); width: 14px; background: rgba(205, 170, 114, 0.25); }
.reach-box:nth-child(1) { top: 84px; left: 4px; }
.reach-box:nth-child(2) { top: 84px; left: 76px; }
.reach-box:nth-child(3) { top: 34px; left: 40px; }
.reach-box-label { position: absolute; right: 0; bottom: -4px; left: 0; color: var(--color-text-dim); font-size: 0.66rem; letter-spacing: 0.14em; text-align: center; text-transform: uppercase; }
.reach-shelf { padding: 16px 18px; border-radius: 14px; border: 1px solid rgba(205, 170, 114, 0.45); background: rgba(176, 141, 87, 0.06); }
.post-body .reach-head { margin: 0 0 10px; color: var(--color-gold-bright); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.reach-items { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.reach-items li { padding: 7px 13px; border-radius: 999px; border: 1px solid rgba(205, 170, 114, 0.55); background: rgba(5, 9, 15, 0.55); color: #fff; font-size: 0.86rem; transition: translate 1.1s cubic-bezier(0.2, 0.75, 0.15, 1), rotate 1.1s cubic-bezier(0.2, 0.75, 0.15, 1), opacity 0.6s ease; transition-delay: calc(var(--i) * 0.12s + 0.2s); }
.js .reach:not(.is-lit) .reach-items li { translate: var(--fx) var(--fy); rotate: var(--fr); opacity: 0.25; }
.reach-pantry { display: grid; grid-template-columns: 0.8fr 1.6fr; gap: 12px; margin-top: 16px; }
.post-body .reach-slot { margin: 0; padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--border-strong); color: var(--color-text-muted); font-size: 0.84rem; }
.post-body .reach-slot--food { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; border: 1px solid rgba(157, 183, 213, 0.45); background: rgba(157, 183, 213, 0.06); }
.reach-slot--food span:not(.reach-slot-head) { padding: 4px 10px; border-radius: 999px; background: rgba(157, 183, 213, 0.14); color: #DCE6F2; font-size: 0.8rem; }
.reach-slot-head { width: 100%; color: #9DB7D5; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }

/* 7. Sleeping at home vs. working there all day */
.band { margin: 26px 0 24px; }
.band-chart { --lab: 150px; position: relative; display: grid; gap: 12px; padding: 18px 20px; border-radius: 16px; border: 1px solid var(--border-subtle); background: linear-gradient(90deg, rgba(2, 4, 10, 0.45), rgba(157, 183, 213, 0.07) 32%, rgba(157, 183, 213, 0.07) 68%, rgba(2, 4, 10, 0.45)); }
.band-row { display: grid; grid-template-columns: var(--lab) 1fr; align-items: center; gap: 14px; }
.band-label { color: var(--color-text); font-size: 0.82rem; line-height: 1.3; }
.band-track { position: relative; height: 22px; border-radius: 6px; background: rgba(255, 255, 255, 0.04); }
.band-seg { position: absolute; top: 3px; bottom: 3px; left: var(--s); width: var(--w); border-radius: 5px; transform-origin: left; transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1); transition-delay: calc(var(--i) * 0.35s + 0.2s); }
.band-seg--sleep { background: linear-gradient(90deg, rgba(157, 183, 213, 0.35), rgba(157, 183, 213, 0.65)); }
.band-seg--crew { background: repeating-linear-gradient(45deg, rgba(232, 149, 122, 0.8) 0 6px, rgba(232, 149, 122, 0.45) 6px 12px); }
.band-seg--work { background: linear-gradient(90deg, rgba(205, 170, 114, 0.45), var(--color-gold-bright)); }
.js .band:not(.is-lit) .band-seg { transform: scaleX(0); }
.band-dot { position: absolute; top: 50%; left: var(--s); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(5, 9, 15, 0.6); transition: opacity 0.4s ease 1.3s; }
.band-dot--pickup { background: #9DB7D5; }
.js .band:not(.is-lit) .band-dot { opacity: 0; }
.band-clash { position: absolute; top: -4px; bottom: -4px; left: var(--s); width: var(--w); border: 1.5px dashed rgba(232, 149, 122, 0.85); border-radius: 7px; background: rgba(232, 149, 122, 0.08); transition: opacity 0.6s ease 1.5s; }
.js .band:not(.is-lit) .band-clash { opacity: 0; }
.post-body .band-key { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; color: var(--color-text-muted); font-size: 0.82rem; }
.band-key-clash { flex: none; width: 26px; height: 14px; border: 1.5px dashed rgba(232, 149, 122, 0.85); border-radius: 4px; background: rgba(232, 149, 122, 0.08); }
.post-body .band-notes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 0.82rem; }
.band-notes span { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--color-text); }
.band-notes .band-notes-head { padding: 0; border: 0; color: var(--color-text-dim); }

/* 8. Two households (reuses the fork) */
.households .fork-path li:first-child { color: var(--color-text-muted); }
.households .fork-path li:last-child { color: #fff; font-weight: 600; }

/* 9. Move routines out of the work's path */
.moveout { margin: 26px 0 24px; }
.moveout-heads { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-bottom: 10px; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.moveout-heads span:first-child { color: var(--path-problem); }
.moveout-heads span:last-child { color: var(--color-gold-bright); }
.moveout-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.moveout-rows li { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; gap: 56px; }
.mo-from, .mo-to { display: flex; align-items: center; padding: 10px 14px; border-radius: 12px; font-size: 0.86rem; line-height: 1.35; }
.mo-from { border: 1px dashed rgba(232, 149, 122, 0.65); background: rgba(232, 149, 122, 0.06); color: var(--color-text-muted); }
.mo-to { border: 1px solid rgba(205, 170, 114, 0.6); background: rgba(176, 141, 87, 0.1); color: #fff; transition: opacity 0.6s ease, translate 0.9s cubic-bezier(0.2, 0.75, 0.15, 1); transition-delay: calc(var(--i) * 0.3s + 0.5s); }
.moveout-rows li::after { content: ''; position: absolute; top: 50%; left: calc(50% - 20px); width: 40px; height: 2px; background: linear-gradient(90deg, rgba(232, 149, 122, 0.8), var(--color-gold-bright)); transform-origin: left; transition: transform 0.5s ease; transition-delay: calc(var(--i) * 0.3s + 0.3s); }
.moveout-rows li::before { content: '\203A'; position: absolute; top: 50%; left: calc(50% + 14px); z-index: 1; translate: 0 -54%; color: var(--color-gold-bright); font-size: 1.3rem; line-height: 1; transition: opacity 0.3s ease; transition-delay: calc(var(--i) * 0.3s + 0.7s); }
.js .moveout:not(.is-lit) .mo-to { opacity: 0.25; translate: -40px 0; }
.js .moveout:not(.is-lit) .moveout-rows li::after { transform: scaleX(0); }
.js .moveout:not(.is-lit) .moveout-rows li::before { opacity: 0; }

/* 10. Dinner: four steps for every meal, and whether it fits the setup */
.meal { margin: 28px 0 24px; }
.meal-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); align-items: center; gap: 28px; }
.meal-ring { position: relative; width: 280px; height: 280px; }
.meal-svg { position: absolute; top: 20px; left: 20px; width: 240px; height: 240px; overflow: visible; }
.meal-track { fill: none; stroke: rgba(205, 170, 114, 0.25); stroke-width: 1.5; }
.meal-flow { fill: none; stroke: var(--color-gold-bright); stroke-width: 2.2; stroke-dasharray: 22 443; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(205, 170, 114, 0.7)); }
.meal-spin { transform-origin: 100px 100px; }
.meal.is-lit .meal-spin { animation: meal-spin 7s linear infinite; }
@keyframes meal-spin { to { transform: rotate(360deg); } }
.meal-steps { list-style: none; margin: 0; padding: 0; }
.meal-step { position: absolute; translate: -50% -50%; padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(205, 170, 114, 0.55); background: #0B1729; color: #fff; font-size: 0.8rem; white-space: nowrap; }
.meal-step--n { top: 51px; left: 140px; }
.meal-step--e { top: 140px; left: 229px; }
.meal-step--s { top: 229px; left: 140px; }
.meal-step--w { top: 140px; left: 51px; }
.post-body .meal-center { position: absolute; top: 50%; left: 50%; width: 78px; margin: 0; translate: -50% -50%; color: #F6ECD8; font-family: var(--font-display); font-size: 0.86rem; line-height: 1.25; text-align: center; }
.meal-fit { position: relative; padding: 18px 20px; border-radius: 14px; border: 1px solid var(--border-subtle); background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)); }
.post-body .meal-fit-tag { position: absolute; top: 12px; right: 14px; margin: 0; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--color-text-dim); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.meal-fit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.meal-fit-head { width: 100%; color: var(--color-text-dim); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.meal-fit-row span:not(.meal-fit-head) { padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border-strong); color: #fff; font-size: 0.84rem; }
.meal-fit-vs { position: relative; height: 26px; }
.meal-fit-vs::before { content: '\2260'; position: absolute; top: 50%; left: 18px; translate: 0 -50%; color: var(--path-problem); font-size: 1.3rem; }
.post-body .meal-fit-result { margin: 14px 0 0; color: var(--path-problem); font-size: 0.86rem; font-weight: 600; transition: opacity 0.5s ease 1s; }
.js .meal:not(.is-lit) .meal-fit-result { opacity: 0; }

/* 11. Two parts of the household budget */
.budgets { margin: 22px 0 24px; }
.budgets-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.budgets-jar { position: relative; isolation: isolate; overflow: hidden; min-height: 130px; padding: 18px 20px; border: 1px solid; border-radius: 16px 16px 24px 24px; }
.budgets-jar::after { content: ''; position: absolute; right: 0; bottom: 0; left: 0; z-index: -1; height: 55%; transition: height 1.2s ease 0.3s; }
.js .budgets:not(.is-lit) .budgets-jar::after { height: 0; }
.budgets-jar--estimate { border-color: rgba(205, 170, 114, 0.55); }
.budgets-jar--estimate::after { background: linear-gradient(0deg, rgba(176, 141, 87, 0.22), rgba(176, 141, 87, 0.04)); }
.budgets-jar--living { border-color: rgba(157, 183, 213, 0.55); }
.budgets-jar--living::after { background: linear-gradient(0deg, rgba(157, 183, 213, 0.18), rgba(157, 183, 213, 0.03)); }
.post-body .budgets-head { margin: 0 0 6px; color: #fff; font-family: var(--font-display); font-size: 1.05rem; line-height: 1.3; }
.post-body .budgets-sub { margin: 0; color: var(--color-text-dim); font-size: 0.82rem; }
.budgets-jar ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.budgets-jar li { padding: 4px 10px; border-radius: 999px; background: rgba(157, 183, 213, 0.14); color: #DCE6F2; font-size: 0.8rem; }

/* 12. Cleanup: three places, and a sink that suits the cookware */
.wash { margin: 26px 0 24px; }
.wash-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr); align-items: center; gap: 24px; }
.wash-loop { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: wash; }
.wash-loop li { position: relative; padding: 10px 14px 10px 46px; border-radius: 12px; border: 1px solid rgba(157, 183, 213, 0.45); background: rgba(157, 183, 213, 0.06); color: #fff; font-size: 0.88rem; counter-increment: wash; transition: opacity 0.5s ease, translate 0.5s ease; transition-delay: calc(var(--i) * 0.25s + 0.2s); }
.wash-loop li::before { content: counter(wash); position: absolute; top: 50%; left: 12px; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; display: grid; place-items: center; background: rgba(157, 183, 213, 0.25); color: #DCE6F2; font-size: 0.74rem; font-weight: 700; }
.js .wash:not(.is-lit) .wash-loop li { opacity: 0.35; translate: 10px 0; }
.wash-svg { display: block; width: 100%; max-width: 220px; height: auto; margin: 0 auto; overflow: visible; }
.wash-sink { fill: rgba(157, 183, 213, 0.12); stroke: rgba(157, 183, 213, 0.7); stroke-width: 1.5; }
.wash-faucet { fill: none; stroke: rgba(238, 241, 245, 0.6); stroke-width: 2; stroke-linecap: round; }
.wash-pot rect { fill: rgba(232, 149, 122, 0.12); stroke: var(--path-problem); stroke-width: 1.6; }
.wash-pot path { stroke: var(--path-problem); stroke-width: 3; stroke-linecap: round; }
.wash-pot { transition: transform 1s cubic-bezier(0.34, 1.3, 0.64, 1) 0.6s; }
.js .wash:not(.is-lit) .wash-pot { transform: translateY(-34px); }
.post-body .wash-fit-label { margin: 8px 0 0; color: var(--path-problem); font-size: 0.82rem; text-align: center; }

/* 13. At the end of each working day */
.dusk { margin: 26px 0 24px; }
.dusk-card { position: relative; overflow: hidden; padding: 22px 24px; border-radius: 18px; border: 1px solid rgba(157, 183, 213, 0.35); background: radial-gradient(1.5px 1.5px at 18% 22%, rgba(255, 255, 255, 0.55), transparent), radial-gradient(1px 1px at 58% 14%, rgba(255, 255, 255, 0.45), transparent), radial-gradient(1px 1px at 74% 42%, rgba(255, 255, 255, 0.35), transparent), radial-gradient(circle at 92% 8%, rgba(220, 230, 245, 0.12), transparent 30%), linear-gradient(160deg, rgba(20, 32, 58, 0.85), rgba(5, 9, 15, 0.6)); }
.post-body .dusk-head { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; color: #fff; font-family: var(--font-display); font-size: 1.15rem; }
.dusk-moon { flex: none; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset -6px -2px 0 0 #DCE6F2; rotate: -20deg; }
.dusk-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dusk-list li { position: relative; padding: 9px 12px 9px 30px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); color: var(--color-text); font-size: 0.86rem; transition: opacity 0.5s ease; transition-delay: calc(var(--i) * 0.2s + 0.3s); }
.dusk-list li::before { content: ''; position: absolute; top: 50%; left: 12px; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #9DB7D5; box-shadow: 0 0 8px rgba(157, 183, 213, 0.8); }
.js .dusk:not(.is-lit) .dusk-list li { opacity: 0.3; }

/* 14. Routine check */
.routines { margin: 24px 0 26px; }
.post-body .routines-hint { margin: 0 0 12px; color: var(--color-text-muted); font-size: 0.86rem; }
html:not(.js) .routines-hint { display: none; }
.routines-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.routine {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(205, 170, 114, 0.45);
  background: rgba(176, 141, 87, 0.07);
  color: #fff;
  font: inherit;
  font-size: 0.82rem;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease, opacity 0.5s ease, translate 0.5s ease;
}
.routine-icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--color-gold-bright); }
.routine-icon::after { content: '\2713'; color: var(--color-gold-bright); font-size: 0.7rem; font-weight: 700; }
.routine:hover { border-color: var(--color-gold-bright); }
.routine:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.routine[aria-pressed="true"] { border-color: rgba(232, 149, 122, 0.7); background: rgba(232, 149, 122, 0.1); color: var(--color-text-muted); }
.routine[aria-pressed="true"] .routine-icon { border-color: var(--path-problem); }
.routine[aria-pressed="true"] .routine-icon::after { content: '\2715'; color: var(--path-problem); }
.js .routines:not(.is-lit) .routine { opacity: 0.35; translate: 0 8px; }
html:not(.js) .routine { cursor: default; }
.post-body .routines-out { margin: 14px 0 0; padding: 10px 16px; border-left: 2px solid var(--color-gold); color: var(--color-text); font-size: 0.95rem; transition: border-color 0.3s ease, color 0.3s ease; }
.routines.has-gaps .routines-out { border-left-color: var(--path-problem); color: #fff; }

/* 15. Time away, then a return based on what will be usable */
.ret { margin: 26px 0 24px; }
.ret-band { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1.3fr 1.3fr; }
.ret-seg { padding: 14px 16px; color: #fff; font-size: 0.86rem; line-height: 1.35; text-align: center; transition: opacity 0.5s ease; transition-delay: calc(var(--i) * 0.35s + 0.2s); }
.ret-seg--home { border: 1px solid rgba(205, 170, 114, 0.5); border-radius: 12px 0 0 12px; background: rgba(205, 170, 114, 0.16); }
.ret-seg--away { border-top: 1px dashed rgba(157, 183, 213, 0.6); border-bottom: 1px dashed rgba(157, 183, 213, 0.6); background: repeating-linear-gradient(135deg, rgba(157, 183, 213, 0.1) 0 8px, rgba(157, 183, 213, 0.04) 8px 16px); color: #DCE6F2; }
.ret-seg--back { border: 1px solid rgba(205, 170, 114, 0.5); border-radius: 0 12px 12px 0; background: rgba(205, 170, 114, 0.16); }
.js .ret:not(.is-lit) .ret-seg { opacity: 0.3; }
.ret-conds { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 16px; margin-top: 14px; }
.ret-conds ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ret-conds li { position: relative; padding: 6px 12px 6px 32px; border-radius: 999px; border: 1px solid rgba(205, 170, 114, 0.55); color: #fff; font-size: 0.84rem; transition: opacity 0.5s ease; transition-delay: calc(var(--i) * 0.2s + 1.1s); }
.ret-conds li::before { content: '\2713'; position: absolute; top: 50%; left: 9px; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; display: grid; place-items: center; background: var(--color-gold-bright); color: var(--color-ink); font-size: 0.6rem; font-weight: 700; }
.js .ret:not(.is-lit) .ret-conds li { opacity: 0.3; }
.post-body .ret-not { margin: 0; color: var(--color-text-dim); font-size: 0.84rem; }
.ret-not s { text-decoration-color: var(--path-problem); text-decoration-thickness: 2px; }

/* Sticky day panel (desktop): the sun's arc, the example plan, and "On this page" */
.post-toc.day-panel { max-width: 290px; max-height: calc(100vh - 130px); overflow-y: auto; scrollbar-width: none; }
.day-panel::-webkit-scrollbar { display: none; }
.day-arc { margin: 0 0 4px; }
.dp-svg { display: block; width: 100%; height: auto; overflow: visible; }
.dp-horizon { stroke: rgba(238, 241, 245, 0.18); stroke-width: 1; }
.dp-arc { fill: none; stroke: rgba(205, 170, 114, 0.35); stroke-width: 1.2; stroke-dasharray: 2 5; }
.dp-tick { fill: var(--color-ink); stroke: rgba(205, 170, 114, 0.55); stroke-width: 1; transition: fill 0.4s ease; }
.dp-tick.is-passed { fill: var(--color-gold-bright); }
.dp-sun { transition: transform 0.35s ease-out; }
.dp-glow { fill: rgba(255, 200, 128, 0.22); }
.dp-core { fill: color-mix(in srgb, #DCE6F2 calc(var(--moon, 0) * 100%), #F2C987); filter: drop-shadow(0 0 6px rgba(242, 201, 135, 0.9)); }
.dp-glow { opacity: calc(1 - var(--moon, 0) * 0.6); }
.dp-label { fill: var(--color-gold-bright); font: 600 10px var(--font-body); letter-spacing: 0.16em; text-anchor: middle; text-transform: uppercase; }
.day-map { margin: 0 0 18px; padding: 10px; border-radius: 12px; border: 1px solid var(--border-subtle); background: rgba(5, 9, 15, 0.45); }
.day-map .hm-el { opacity: 0.14; transition: opacity 0.6s ease; }
.day-map .hm-noise-g { opacity: 0; }
.day-map[data-focus="plan"] .f-plan,
.day-map[data-focus="breakfast"] .f-breakfast,
.day-map[data-focus="lunch"] .f-lunch,
.day-map[data-focus="working"] .f-working,
.day-map[data-focus="children"] .f-children,
.day-map[data-focus="dinner"] .f-dinner,
.day-map[data-focus="cleanup"] .f-cleanup,
.day-map[data-focus="end"] .f-end,
.day-map[data-focus="elsewhere"] .f-elsewhere,
.day-map[data-focus="bring"] .f-bring { opacity: 1; }
.day-map .hm-route { animation: route-flow 1.6s linear infinite; }
.day-map-caption { margin: 8px 2px 0; color: var(--color-text-muted); font-size: 0.76rem; line-height: 1.4; }
.day-map-caption::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--color-gold-bright); vertical-align: 1px; }
.day-panel ol a { overflow: hidden; padding: 5px 0 5px 16px; font-size: 0.78rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.day-panel ol a::before { display: inline; margin-right: 8px; font-size: 0.7rem; }

@media (prefers-reduced-motion: reduce) {
  .day-map .hm-route, .post-hero-sun { animation: none !important; }
  .sky, .dp-sun { transition: none !important; }
}

@media (max-width: 760px) {
  .weekday-stage { height: 200px; }
  .weekday-beads li { font-size: 0.74rem; }
  .weekday-beads li:first-child { translate: -22% 18px; }
  .weekday-beads li:last-child { translate: -80% 18px; }
  .foot-grid { gap: 14px; }
  .post-body .foot-label { font-size: 0.78rem; }
  .homemap-frame { padding: 50px 10px 14px; }
  .homemap .hm-label { display: none; }
  .rush-grid { grid-template-columns: minmax(0, 1.1fr) 28px minmax(0, 0.8fr); }
  .rush-lanes li { padding: 7px 10px; font-size: 0.78rem; }
  .post-body .rush-out { padding: 10px 12px; font-size: 0.9rem; }
  .setup { padding: 50px 12px 14px; }
  .reach-grid { grid-template-columns: 1fr; gap: 14px; }
  .reach-boxes { height: 100px; max-width: 160px; margin: 0 auto; }
  .reach-box:nth-child(1) { top: 40px; }
  .reach-box:nth-child(2) { top: 40px; }
  .reach-box:nth-child(3) { top: 0; }
  .js .reach:not(.is-lit) .reach-items li { translate: calc(var(--fx) * 0.2) -90px; }
  .reach-pantry { grid-template-columns: 1fr; }
  .band-chart { --lab: 92px; padding: 14px 12px; }
  .band-label { font-size: 0.72rem; }
  .moveout-heads { display: none; }
  .moveout-rows li { grid-template-columns: 1fr; gap: 26px; }
  .moveout-rows li::after { top: calc(50% - 13px); left: 50%; width: 2px; height: 26px; margin: 0; background: linear-gradient(180deg, rgba(232, 149, 122, 0.8), var(--color-gold-bright)); transform-origin: top; }
  .js .moveout:not(.is-lit) .moveout-rows li::after { transform: scaleY(0); }
  .moveout-rows li::before { content: '\2304'; top: calc(50% + 4px); left: calc(50% - 6px); translate: none; font-size: 1rem; }
  .js .moveout:not(.is-lit) .mo-to { translate: 0 -20px; }
  .meal-grid { grid-template-columns: 1fr; justify-items: center; }
  .meal-fit { width: 100%; }
  .budgets-grid { grid-template-columns: 1fr; }
  .wash-grid { grid-template-columns: 1fr; }
  .dusk-list { grid-template-columns: 1fr; }
  .routines-grid { grid-template-columns: repeat(2, 1fr); }
  .routine:last-child { grid-column: 1 / -1; }
  .ret-band { grid-template-columns: 1fr; }
  .ret-seg--home { border-radius: 12px 12px 0 0; }
  .ret-seg--away { border: 0; border-right: 1px dashed rgba(157, 183, 213, 0.6); border-left: 1px dashed rgba(157, 183, 213, 0.6); }
  .ret-seg--back { border-radius: 0 0 12px 12px; }
  .ret-conds { justify-content: flex-start; }
}