/*
 * Direction F, "The Contents": the family layer shared by the hub and every
 * chapter. Laura's own face (Bitter) carries every price and the running
 * head; each chapter's verb keeps its own face wherever it appears. Colours
 * are tokens set by each site's site.css; nothing here picks a ground.
 */
@font-face {
  font-family: "Bitter";
  src: url("/_assets/previews/f/hub/fonts/bitter-normal-300-800.0efe0fbe60.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bitter";
  src: url("/_assets/previews/f/hub/fonts/bitter-italic-400-600.46f805476f.woff2") format("woff2");
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Each chapter's verb, subset to the letters of its own word (2 to 5 KB each). */
@font-face { font-family: "V Simplify"; src: url("/_assets/previews/f/hub/fonts/v-simplify-normal-700.8a803ab8f4.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "V Juggle"; src: url("/_assets/previews/f/hub/fonts/v-juggle-normal-600.e83e513ac3.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "V Declutter"; src: url("/_assets/previews/f/hub/fonts/v-declutter-normal-600.854f7d523a.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "V Stage"; src: url("/_assets/previews/f/hub/fonts/v-stage-normal-400.7446c06429.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "V Style"; src: url("/_assets/previews/f/hub/fonts/v-style-italic-600.b70bb82f24.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "V Celebrate"; src: url("/_assets/previews/f/hub/fonts/v-celebrate-normal-600.6518581345.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "V Design"; src: url("/_assets/previews/f/hub/fonts/v-design-normal-800.4cad3f4a7e.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "V Share"; src: url("/_assets/previews/f/hub/fonts/v-share-normal-800.5c93bef63e.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  color-scheme: light dark;
  --orange: #ed802b;
  --on-orange: #14161e;
  --ledger: "Bitter", "Rockwell", "Roboto Slab", Georgia, serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 7rem;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --measure: 66ch;
  --radius: 14px;

  /* The nine chapters: verb colour on the page ground, and the chapter's field. */
  --c-organise: light-dark(#984707, #f49a55);
  --c-simplify: light-dark(#735800, #ebc94a);
  --c-juggle: light-dark(#356911, #9ad86a);
  --c-declutter: light-dark(#0d6a50, #5fd3ae);
  --c-stage: light-dark(#0d6b7c, #5bc9dd);
  --c-style: light-dark(#2e3f9e, #a3b2ff);
  --c-celebrate: light-dark(#7a2db0, #cda2f4);
  --c-design: light-dark(#a1207a, #f28fcd);
  --c-share: light-dark(#b01f3a, #ff8c9a);
  --f-organise: #ed802b;
  --f-style: #262f66;
  --f-celebrate: #2a1233;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 1.5rem; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body-font);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; }
h1, h2, h3 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: .08em; }
::selection { background: var(--select-bg, var(--orange)); color: var(--select-ink, #14161e); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip {
  position: absolute; left: var(--space-4); top: var(--space-4); z-index: 50;
  padding: var(--space-3) var(--space-4); background: var(--ink); color: var(--ground);
  border-radius: 8px; transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* Verb voices: the same face wherever a chapter's verb is set. */
.v-organise { font-family: "Bitter", Georgia, serif; font-weight: 800; letter-spacing: -.02em; }
.v-simplify { font-family: "V Simplify", "Comic Neue", sans-serif; font-weight: 700; letter-spacing: -.01em; }
.v-juggle { font-family: "V Juggle", "Nunito", sans-serif; font-weight: 600; letter-spacing: -.01em; }
.v-declutter { font-family: "V Declutter", "Arial Narrow", sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.v-stage { font-family: "V Stage", Georgia, serif; font-weight: 400; letter-spacing: -.02em; }
.v-style { font-family: "V Style", "Bodoni 72", "Didot", serif; font-weight: 600; font-style: italic; letter-spacing: -.02em; }
.v-celebrate { font-family: "V Celebrate", "Arial Black", sans-serif; font-weight: 600; letter-spacing: -.03em; }
.v-design { font-family: "V Design", "Arial Black", sans-serif; font-weight: 800; letter-spacing: -.03em; }
.v-share { font-family: "V Share", "Arial Black", sans-serif; font-weight: 800; font-stretch: 125%; letter-spacing: -.02em; }

/* The seal: ring in the chapter colour (color), Laura's mark in ink (fill). */
.seal { width: 2.5rem; height: 2.5rem; flex: none; fill: var(--seal-mark, currentColor); }

/* Buttons: her orange is the one thread, always "book a call". */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 2.875rem; padding: .7em 1.25em; border-radius: 999px;
  font-family: var(--ledger); font-weight: 600; font-size: 1rem; line-height: 1.1;
  text-decoration: none; white-space: nowrap;
  transition: transform 140ms var(--ease-out), box-shadow 140ms var(--ease-out);
}
.btn--call { background: var(--orange); color: var(--on-orange); box-shadow: 0 1px 0 rgb(0 0 0 / .18), 0 6px 14px -8px rgb(20 22 30 / .55); }
.btn--call:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgb(0 0 0 / .18), 0 12px 20px -10px rgb(20 22 30 / .6); }
.btn--call:active { transform: translateY(0) scale(.98); }
.btn .arrow { width: 1.1em; height: 1.1em; transition: transform 160ms var(--ease-out); }
.btn:hover .arrow { transform: translateX(3px); }

/* Theme switch */
.theme {
  display: inline-flex; align-items: center; gap: .45em; min-height: 2.75rem; padding: .5em .85em;
  border: 1.5px solid currentColor; border-radius: 999px; background: transparent; color: inherit;
  font: 600 .875rem/1 var(--ledger); cursor: pointer;
}
.theme svg { width: 1.05em; height: 1.05em; transition: transform 300ms var(--ease-out); }
.theme[aria-pressed="true"] svg { transform: rotate(180deg); }
.theme:hover svg { transform: rotate(30deg); }
.theme[aria-pressed="true"]:hover svg { transform: rotate(210deg); }

/* The proof slip: the one small preview note on every page. */
.proof {
  display: inline-flex; align-items: center; gap: .5em;
  font: italic 500 .8125rem/1.3 var(--ledger); letter-spacing: .01em;
  color: var(--proof-ink, var(--ink-2));
}
.proof::before {
  content: ""; width: .55em; height: .55em; border-radius: 50%;
  background: currentColor; flex: none;
}

/* The running head */
.head {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--gutter);
  position: relative; z-index: 5;
}
.head__home {
  display: inline-flex; align-items: center; gap: .65rem; min-height: 2.75rem; min-width: 2.75rem;
  text-decoration: none; font: 600 1.0625rem/1.1 var(--ledger); letter-spacing: -.005em;
}
.head__home .seal { width: 2.75rem; height: 2.75rem; transition: transform 500ms var(--ease-out); }
.head__home:hover .seal { transform: rotate(-24deg); }
.head .btn--call { gap: 0; }
.head__tools { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }
.head__toc {
  display: inline-flex; align-items: center; gap: .5em; min-height: 2.75rem; padding: .5em .9em;
  font: 600 .9375rem/1 var(--ledger); text-decoration: none; border-radius: 999px;
}
.head__toc svg { width: 1.1em; height: 1.1em; flex: none; }
@media (max-width: 40rem) {
  .head { gap: var(--space-2); padding-block: var(--space-3); }
  .head__home .head__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .head__tools { gap: var(--space-2); }
  .head .theme span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .head .theme { width: 2.75rem; padding: 0; justify-content: center; }
  .head .btn--call .long { display: none; }
  .head .btn--call { padding-inline: 1em; }
}

/* The family contents list: back matter and the contents sheet. */
.toc { list-style: none; display: grid; gap: 0; }
.toc__row > a, .toc__row > .toc__item {
  position: relative; display: grid; align-items: baseline;
  grid-template-columns: 1.9rem minmax(0, 9.5rem) minmax(0, 1fr) auto;
  column-gap: var(--space-4);
  padding: .8rem var(--space-3); border-radius: 10px; text-decoration: none; isolation: isolate;
}
.toc__row > a::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--row-fill); transform: scaleX(0); transform-origin: left center;
  transition: transform 300ms var(--ease-out);
}
.toc__row > a:hover::before, .toc__row > a:focus-visible::before { transform: scaleX(1); }
.toc__row > a:hover, .toc__row > a:focus-visible { color: var(--row-on); }
.toc__row > a:hover .toc__verb, .toc__row > a:focus-visible .toc__verb { color: var(--row-on); }
.toc__seal { width: 1.9rem; height: 1.9rem; align-self: center; fill: var(--ink); }
.toc__row > a:hover .toc__seal, .toc__row > a:focus-visible .toc__seal { color: var(--row-on); fill: var(--row-on); }
.toc__home { font: 700 1.25rem/1.1 var(--ledger); letter-spacing: -.01em; }
.toc__verb { font-size: 1.75rem; line-height: 1; }
.toc__verb.v-celebrate { font-size: 1.3rem; }
.toc__verb.v-share { font-size: 1.45rem; }
.toc__verb.v-declutter { font-size: 1.6rem; }
.toc__name { font: 600 .9375rem/1.3 var(--ledger); }
.toc__name small { display: block; font: 400 .875rem/1.35 var(--body-font); color: var(--ink-2); margin-top: .15rem; }
.toc__row > a:hover small, .toc__row > a:focus-visible small { color: inherit; }
.toc__end { font: 600 .9375rem/1.2 var(--ledger); font-variant-numeric: lining-nums tabular-nums; text-align: right; white-space: nowrap; }
.toc__end .item { display: block; font-weight: 400; font-size: .8125rem; }
.toc__later { font: italic 400 .875rem/1.2 var(--ledger); color: var(--ink-2); text-align: right; }
.toc__row[data-ch="organise"] { --row-fill: var(--f-organise); --row-on: #14161e; }
.toc__row[data-ch="style"] { --row-fill: var(--f-style); --row-on: #f4e7e2; }
.toc__row[data-ch="celebrate"] { --row-fill: var(--f-celebrate); --row-on: #f8ecf4; }
.toc__row[data-ch="hub"] { --row-fill: var(--ink); --row-on: var(--ground); }
.toc a[aria-current="page"] .toc__end::after { content: " (you are here)"; font-weight: 400; font-size: .8125rem; }
@media (max-width: 40rem) {
  .toc__row > a, .toc__row > .toc__item { grid-template-columns: 1.9rem minmax(0, 1fr) auto; row-gap: .2rem; }
  .toc__name { grid-column: 2 / -1; grid-row: 2; }
  .toc__verb { font-size: 1.6rem; }
}
.c-organise { color: var(--c-organise); }
.c-simplify { color: var(--c-simplify); }
.c-juggle { color: var(--c-juggle); }
.c-declutter { color: var(--c-declutter); }
.c-stage { color: var(--c-stage); }
.c-style { color: var(--c-style); }
.c-celebrate { color: var(--c-celebrate); }
.c-design { color: var(--c-design); }
.c-share { color: var(--c-share); }

/* Handoff colours: the field each site opens on. */
a[data-handoff="organise"] { --handoff-colour: #ed802b; }
a[data-handoff="style"] { --handoff-colour: #262f66; }
a[data-handoff="celebrate"] { --handoff-colour: #2a1233; }
a[data-handoff="hub"] { --handoff-colour: light-dark(#f4f5f9, #0f1117); }
a[data-handoff] { --handoff-duration: 460ms; --handoff-duration-reduced: 160ms; --handoff-easing: cubic-bezier(.65, 0, .35, 1); }

/* The contents sheet (spokes): a dialog opened from the running head or the dock. */
.sheet {
  width: min(46rem, 100% - 1.5rem); max-height: min(44rem, 100svh - 1.5rem);
  margin: .75rem auto auto; padding: 0; border: 0; border-radius: 18px;
  background: var(--sheet-bg, var(--ground)); color: var(--ink);
  box-shadow: 0 2px 4px rgb(0 0 0 / .12), 0 30px 60px -20px rgb(0 0 0 / .45);
  overflow: auto; overscroll-behavior: contain;
}
.sheet::backdrop { background: rgb(14 12 20 / .55); }
.sheet__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5) var(--space-2); }
.sheet__title { font: 700 1.25rem/1.2 var(--ledger); }
.sheet__close {
  display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem;
  border: 1.5px solid currentColor; border-radius: 50%; background: transparent; color: inherit; cursor: pointer;
}
.sheet__close svg { width: 1.1rem; height: 1.1rem; }
.sheet .toc { padding: 0 var(--space-3) var(--space-3); }
.sheet__foot { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-5) var(--space-5); }
@media (prefers-reduced-motion: no-preference) {
  .sheet[open] { animation: sheet-in 340ms var(--ease-out); }
  .sheet[open]::backdrop { animation: fade-in 340ms var(--ease-out); }
  .sheet.is-closing { animation: sheet-out 200ms var(--ease-in-out) forwards; }
  .sheet.is-closing::backdrop { animation: fade-out 200ms var(--ease-in-out) forwards; }
  .sheet[open] .toc__row { animation: rise-in 360ms var(--ease-out) both; animation-delay: 60ms; }
  .sheet[open] .toc__row:nth-child(2) { animation-delay: 85ms; }
  .sheet[open] .toc__row:nth-child(3) { animation-delay: 110ms; }
  .sheet[open] .toc__row:nth-child(4) { animation-delay: 135ms; }
  .sheet[open] .toc__row:nth-child(5) { animation-delay: 160ms; }
  .sheet[open] .toc__row:nth-child(6) { animation-delay: 185ms; }
  .sheet[open] .toc__row:nth-child(7) { animation-delay: 210ms; }
  .sheet[open] .toc__row:nth-child(8) { animation-delay: 235ms; }
  .sheet[open] .toc__row:nth-child(9) { animation-delay: 260ms; }
  .sheet[open] .toc__row:nth-child(10) { animation-delay: 285ms; }
}
@keyframes sheet-in { from { transform: translateY(-14px) scale(.985); opacity: 0; } }
@keyframes sheet-out { to { transform: translateY(-10px) scale(.985); opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes rise-in { from { transform: translateY(10px); opacity: 0; } }

/* The dock: contents and the call, close to the thumb once the title page has gone by. */
.dock { display: none; }
.lt-js .dock {
  position: fixed; z-index: 20; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom));
  display: none; align-items: center; gap: .35rem; padding: .35rem;
  border-radius: 999px; background: var(--dock-bg); color: var(--dock-ink);
  box-shadow: 0 2px 4px rgb(0 0 0 / .14), 0 18px 34px -14px rgb(0 0 0 / .5);
  transform: translate(-50%, calc(100% + 2rem));
  transition: transform 420ms var(--ease-out), display 420ms allow-discrete;
}
.lt-js .dock.is-shown { display: flex; transform: translate(-50%, 0); }
@starting-style {
  .lt-js .dock.is-shown { transform: translate(-50%, calc(100% + 2rem)); }
}
.dock .head__toc { color: inherit; }
.dock .head__toc:hover { text-decoration: underline; }
.dock .btn--call { min-height: 2.75rem; }
@media (prefers-reduced-motion: reduce) {
  .lt-js .dock, .lt-js .dock.is-shown { transition: none; transform: translate(-50%, 0); }
}

/* Back matter, shared by every spoke */
.back { padding: var(--space-9) var(--gutter) var(--space-8); }
.back__inner { max-width: 72rem; margin: 0 auto; display: grid; gap: var(--space-7); }
.back__head { display: grid; gap: var(--space-3); max-width: 40rem; }
.back__title { font: 700 clamp(1.75rem, 3.2vw, 2.5rem)/1.1 var(--ledger); letter-spacing: -.015em; }
.back__base {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-5);
  padding-top: var(--space-6); border-top: 1px solid var(--hair);
}
.back__base .head__home { margin-right: auto; }
.back__links { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.back__links a { min-height: 2.75rem; display: inline-flex; align-items: center; font-weight: 600; }

/* Three plain steps, every site */
.steps { list-style: none; display: grid; gap: var(--space-5); counter-reset: step; }
.steps li { display: grid; grid-template-columns: 3rem 1fr; column-gap: var(--space-4); align-items: start; counter-increment: step; }
.steps li::before {
  content: counter(step); grid-row: span 2;
  display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
  border: 2px solid currentColor; font: 700 1.25rem/1 var(--ledger);
}
.steps strong { font: 700 1.1875rem/1.3 var(--ledger); display: block; padding-top: .3rem; }
.steps p { color: var(--ink-2); max-width: 36ch; }
@media (min-width: 56rem) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
}

/* Reduced motion: every transition becomes a short fade or an instant swap. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; }
  .toc__row > a::before { transition: none; }
}