/*
 * Direction E, the calm sheet: the family layer every site shares.
 * The ruler (where you are on the sheet), the seal, the family panel and the
 * footer. Each site sets its own ground tokens (--f-*) and keeps its own
 * character; this file only holds the thread that ties the nine together.
 */
@font-face { font-family: "Zen Kaku Gothic New"; font-style: normal; font-weight: 400; font-display: swap; src: url(/_assets/previews/e/organise/fonts/ZenKakuGothicNew-400.5b1bfc34d6.woff2) format("woff2"); }
@font-face { font-family: "Zen Kaku Gothic New"; font-style: normal; font-weight: 500; font-display: swap; src: url(/_assets/previews/e/organise/fonts/ZenKakuGothicNew-500.e4ab8e9dc6.woff2) format("woff2"); }
@font-face { font-family: "Zen Kaku Gothic New"; font-style: normal; font-weight: 700; font-display: swap; src: url(/_assets/previews/e/organise/fonts/ZenKakuGothicNew-700.3be1f56356.woff2) format("woff2"); }

:root {
  /* Nine districts, round the colour wheel in ring order. Plot = the
     district's ground on the sheet; ink = its drawing and lettering. */
  --c-organise: light-dark(#F4A867, #4A2408);  --i-organise: light-dark(#4A2106, #FFC796);
  --c-simplify: light-dark(#F2D45C, #3D3408);  --i-simplify: light-dark(#463A05, #F7E08A);
  --c-juggle: light-dark(#A9D97A, #233A12);    --i-juggle: light-dark(#22400E, #C4EBA0);
  --c-declutter: light-dark(#86D3B5, #11392C); --i-declutter: light-dark(#0D4232, #A9E6CF);
  --c-stage: light-dark(#7DCBD6, #0F3439);     --i-stage: light-dark(#0B3D44, #A8E2EA);
  --c-style: light-dark(#9DAEEB, #1E2650);     --i-style: light-dark(#1B2557, #C3CEF6);
  --c-celebrate: light-dark(#C3A2EC, #2E1A4D); --i-celebrate: light-dark(#36195C, #D9C3F6);
  --c-design: light-dark(#EC9FD0, #4A1534);    --i-design: light-dark(#561339, #F6C2E3);
  --c-share: light-dark(#F29A9C, #4D1418);     --i-share: light-dark(#5A1216, #F8C1C2);
  --c-hub: light-dark(#F7F8F9, #1A1E27);
  /* Laura's own orange: the seal, the call and the way home, nothing else. */
  --orange: #ED802B;
  --on-orange: #1B1208;
  --thread: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", "Segoe UI", system-ui, sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
}
.s-organise { --seg-c: var(--c-organise); --seg-i: var(--i-organise); --handoff-colour: var(--c-organise); }
.s-simplify { --seg-c: var(--c-simplify); --seg-i: var(--i-simplify); }
.s-juggle { --seg-c: var(--c-juggle); --seg-i: var(--i-juggle); }
.s-declutter { --seg-c: var(--c-declutter); --seg-i: var(--i-declutter); }
.s-stage { --seg-c: var(--c-stage); --seg-i: var(--i-stage); }
.s-style { --seg-c: var(--c-style); --seg-i: var(--i-style); --handoff-colour: var(--c-style); }
.s-celebrate { --seg-c: var(--c-celebrate); --seg-i: var(--i-celebrate); --handoff-colour: var(--c-celebrate); }
.s-design { --seg-c: var(--c-design); --seg-i: var(--i-design); }
.s-share { --seg-c: var(--c-share); --seg-i: var(--i-share); }
[data-e-handoff="hub"] { --handoff-colour: var(--here-c, var(--c-hub)); }
a[data-e-handoff] { --handoff-duration: 520ms; --handoff-duration-reduced: 160ms; --handoff-easing: cubic-bezier(.65, 0, .35, 1); }

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

/* The nine repeat patterns, each in its own ink. */
.pt { fill: none; stroke-width: 1.4; }
.pt-organise { stroke: var(--i-organise); } .pt-simplify { stroke: var(--i-simplify); }
.pt-juggle circle { fill: none; stroke: var(--i-juggle); stroke-width: 1.3; }
.pt-stage { stroke: var(--i-stage); } .pt-style { stroke: var(--i-style); stroke-width: 1; }
.pf-declutter { fill: var(--i-declutter); } .pf-celebrate rect { fill: var(--i-celebrate); }
.pk circle { fill: var(--c-celebrate); }
.pf-design { fill: var(--i-design); } .pf-share { fill: var(--i-share); }

/* Seal: one shared core, a band per site. */
.seal { display: block; color: var(--seal-ink); overflow: visible; }
.seal .seal-line { fill: none; stroke: var(--seal-ink); stroke-width: 2.2; }
.seal .seal-line.thin { stroke-width: 1; }
.seal .seal-paper { fill: var(--seal-paper); }
.seal .seal-text { fill: var(--seal-ink); font: 500 11px/1 var(--thread); letter-spacing: .2em; }
.seal .seal-band-bg { fill: var(--seal-band-bg, var(--seal-paper)); }
.seal-style { --seal-band-bg: var(--c-style); }
.seal-celebrate { --seal-band-bg: var(--c-celebrate); }
.pt-wave { stroke: var(--orange); stroke-width: 2; }
.sb-organise { fill: var(--c-organise); } .sb-simplify { fill: var(--c-simplify); } .sb-juggle { fill: var(--c-juggle); }
.sb-declutter { fill: var(--c-declutter); } .sb-stage { fill: var(--c-stage); } .sb-style { fill: var(--c-style); }
.sb-celebrate { fill: var(--c-celebrate); } .sb-design { fill: var(--c-design); } .sb-share { fill: var(--c-share); }
.seal-mini { width: 34px; height: 34px; flex: none; color: var(--seal-ink); }
.seal-mini .mini-band { fill: var(--orange); }
.seal-mini.seal-style .mini-band { fill: var(--c-style); }
.seal-mini.seal-celebrate .mini-band { fill: var(--c-celebrate); }
.seal-mini.seal-hub .mini-band { fill: var(--orange); }
.seal-mini .seal-paper { fill: var(--seal-paper); }

/* Browser surfaces carry the design too. */
::selection { background: var(--orange); color: var(--on-orange); }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; border-radius: 4px; }
html { scrollbar-color: var(--f-muted) var(--f-ground); }

/* Header: the home seal, the ruler, two tools. */
.e-top { position: sticky; top: 0; z-index: 60; background: var(--f-ground); color: var(--f-text); box-shadow: 0 1px 0 var(--f-line); }
.e-top-row { display: flex; align-items: center; gap: clamp(8px, 2vw, 20px); height: 60px; padding-inline: clamp(12px, 3vw, 32px); max-width: 1920px; margin-inline: auto; }
.e-home { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: inherit; text-decoration: none; font: 700 16px/1 var(--thread); letter-spacing: .01em; border-radius: 22px; padding-right: 6px; }
.e-home:hover .e-home-name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--orange); }
.e-top-tools { display: flex; gap: 6px; margin-left: auto; }
.e-tool { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 0 10px; border: 1px solid var(--f-line); border-radius: 22px; background: var(--f-surface); color: var(--f-text); font: 700 14px/1 var(--thread); cursor: pointer; transition: transform 140ms var(--ease-out), background-color 140ms; }
.e-tool:hover { transform: translateY(-1px); }
.e-tool:active { transform: translateY(1px) scale(.97); }
.e-tool-label { display: none; }
@media (min-width: 560px) { .e-tool-label { display: inline; } }
.nine { display: grid; grid-template-columns: repeat(3, 5px); gap: 2px; }
.nine i { width: 5px; height: 5px; border-radius: 1px; background: var(--seg-c); box-shadow: 0 0 0 .5px var(--seg-i); }
.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.ico-moon { fill: currentColor; stroke: none; }
.e-theme[aria-pressed="true"] .ico-sun, .e-theme:not([aria-pressed="true"]) .ico-moon { display: none; }

/* The ruler: Laura's nine sites unrolled from the ring, a hollow marker on
   the one you are in. Ticks belong here: it is a measuring rule. */
.ruler { position: relative; }
.ruler-track { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(9, 1fr); }
.ruler .seg { position: relative; }
.ruler .seg::before { content: ""; position: absolute; left: 0; right: 0; bottom: 7px; height: 5px; background: repeating-linear-gradient(90deg, var(--f-line) 0 1px, transparent 1px 20%); border-left: 1px solid var(--f-muted); }
.ruler .seg::after { content: ""; position: absolute; left: 0; right: 1px; bottom: 0; height: 7px; background: var(--seg-c); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--seg-i) 22%, transparent); }
.ruler--full { flex: 1; display: none; max-width: 980px; margin-inline: auto; }
.ruler--full .seg > a, .ruler--full .seg > button, .ruler--full .seg > span { display: flex; align-items: flex-start; justify-content: center; width: 100%; height: 44px; padding: 6px 2px 0; margin: 0; border: 0; background: none; color: var(--f-muted); font: 500 12px/1.1 var(--thread); letter-spacing: .04em; text-decoration: none; cursor: pointer; border-radius: 4px; }
.ruler--full .seg > a { color: var(--f-text); font-weight: 700; }
.ruler--full .seg > span { cursor: default; }
.ruler--full .seg > a:hover .seg-label, .ruler--full .seg > button:hover .seg-label { text-decoration: underline; text-decoration-color: var(--seg-c); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.ruler--full .seg.is-here > a { color: var(--f-text); }
.ruler--compact { display: block; height: 14px; margin: 0 clamp(12px, 3vw, 32px) 4px; }
.ruler--compact .ruler-track { display: grid; height: 14px; }
.ruler--compact .seg::before { bottom: 6px; height: 4px; }
.ruler--compact .seg::after { height: 6px; }
@media (min-width: 900px) {
  .ruler--full { display: block; }
  .ruler--compact { display: none; }
}
.ruler-marker { position: absolute; left: 0; right: 0; bottom: -3px; height: 13px; pointer-events: none; }
.ruler--full .ruler-marker { height: 14px; }
.mk-bar, .mk-l, .mk-r { position: absolute; top: 0; bottom: 0; display: block; }
.mk-bar { left: 0; width: 100%; border-top: 2px solid var(--f-text); border-bottom: 2px solid var(--f-text); transform-origin: 0 50%; transform: translateX(calc(var(--here, 0) * 100% / 9)) scaleX(calc(1 / 9)); }
.mk-l, .mk-r { width: 2px; background: var(--f-text); }
.mk-l { left: calc(var(--here, 0) * 100% / 9); }
.mk-r { left: calc((var(--here, 0) + 1) * 100% / 9 - 2px); }
.ruler.is-live .mk-l, .ruler.is-live .mk-r { left: 0; }

/* The family panel: every site as a plain list, the fallback way in. */
.family-panel { position: absolute; right: clamp(8px, 3vw, 32px); top: calc(100% + 8px); width: min(440px, calc(100vw - 16px)); max-height: calc(100svh - 96px); overflow: auto; padding: 14px; background: var(--f-surface); color: var(--f-text); border: 1px solid var(--f-line); border-radius: 14px; box-shadow: 0 18px 40px -18px rgb(0 0 0 / .35), 0 2px 6px rgb(0 0 0 / .08); }
.family-panel.is-open { animation: fp-in 220ms var(--ease-out); }
.family-panel.is-closing { animation: fp-out 160ms ease-in forwards; }
@keyframes fp-in { from { opacity: 0; transform: translateY(-8px); } }
@keyframes fp-out { to { opacity: 0; transform: translateY(-6px); } }
/* The handoff between sites: a field in the next site's colour grows from
   the link to the whole screen, then the next site opens from that colour. */
.e-handoff-layer { position: fixed; inset: 0; z-index: 2147483647; pointer-events: none; transform-origin: 0 0; }
.e-handoff-layer[hidden] { display: none; }
.fp-title { margin: 2px 6px 10px; font: 500 13px/1.3 var(--thread); color: var(--f-muted); }
.fp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.fp-item { display: grid; grid-template-columns: 18px auto 1fr; align-items: center; column-gap: 12px; min-height: 48px; padding: 6px 10px; border-radius: 10px; color: var(--f-text); text-decoration: none; font: 400 14px/1.3 var(--thread); transition: background-color 140ms, transform 160ms var(--ease-out); }
.fp-item b { font-weight: 700; font-size: 16px; }
.fp-item > span:last-child { color: var(--f-muted); }
a.fp-item:hover { background: color-mix(in srgb, var(--seg-c, var(--orange)) 22%, var(--f-surface)); transform: translateX(3px); }
.fp-item[aria-current] { box-shadow: inset 0 0 0 2px var(--f-text); }
.chip { width: 16px; height: 16px; border-radius: 4px; background: var(--seg-c); box-shadow: inset 0 0 0 1.5px var(--seg-i); }
.chip-hub { background: conic-gradient(var(--c-organise) 0 11.1%, var(--c-simplify) 0 22.2%, var(--c-juggle) 0 33.3%, var(--c-declutter) 0 44.4%, var(--c-stage) 0 55.5%, var(--c-style) 0 66.6%, var(--c-celebrate) 0 77.7%, var(--c-design) 0 88.8%, var(--c-share) 0); border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--f-text); }

/* The one shared action: her orange, her form. */
.call { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 24px; background: var(--orange); color: var(--on-orange); font: 700 16px/1 var(--thread); text-decoration: none; box-shadow: 0 6px 16px -8px rgb(160 70 10 / .55); transition: transform 160ms var(--ease-out), box-shadow 160ms; }
.call::after { content: ""; width: 9px; height: 9px; border-top: 2.2px solid currentColor; border-right: 2.2px solid currentColor; transform: rotate(45deg); transition: transform 160ms var(--ease-out); }
.call:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgb(160 70 10 / .6); }
.call:hover::after { transform: translateX(3px) rotate(45deg); }
.call:active { transform: translateY(0) scale(.98); }

/* The design note: a small stamp, never a banner. */
.e-note { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border: 1px dashed var(--f-muted); border-radius: 6px; color: var(--f-muted); font: 500 13px/1.3 var(--thread); }
.e-note svg { width: 18px; height: 18px; flex: none; color: var(--f-muted); }

/* Footer: next door first, then every site. */
.e-foot { background: var(--f-surface); color: var(--f-text); border-top: 1px solid var(--f-line); }
.e-foot-in { max-width: 1200px; margin-inline: auto; padding: clamp(40px, 6vw, 72px) clamp(16px, 4vw, 40px) 32px; }
.e-foot-h { margin: 0 0 18px; font: 700 clamp(22px, 3vw, 28px)/1.15 var(--thread); }
.nb-pair { display: grid; gap: 12px; grid-template-columns: 1fr; margin-bottom: 36px; }
@media (min-width: 640px) { .nb-pair { grid-template-columns: 1fr 1fr; } }
.nb { position: relative; display: grid; gap: 4px; padding: 22px 22px 20px; min-height: 150px; border-radius: 14px; background: var(--seg-c); color: var(--seg-i); text-decoration: none; overflow: hidden; transition: transform 200ms var(--ease-out); }
a.nb:hover { transform: translateY(-3px); }
.nb-verb { font: 700 28px/1 var(--thread); }
.nb-name { font: 500 15px/1.3 var(--thread); }
.nb-why { font: 400 15px/1.35 var(--thread); }
.nb-go { margin-top: 10px; font: 700 14px/1 var(--thread); }
a.nb .nb-go::after { content: " \2192"; }
.nb.is-later .nb-go { font-weight: 500; }
.e-foot-all .fp-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.e-foot-all .fp-item { background: transparent; }
.e-foot-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin: 28px 0 0; padding-top: 20px; border-top: 1px solid var(--f-line); font: 500 14px/1.4 var(--thread); color: var(--f-muted); }
.e-foot-line a { color: var(--f-text); min-height: 44px; display: inline-flex; align-items: center; text-underline-offset: 4px; }
.e-foot-line .e-foot-call { font-weight: 700; text-decoration-color: var(--orange); text-decoration-thickness: 2px; }

/* Arriving from another site in the family: open from that colour field. */
.e-arrive-field { position: fixed; inset: 0; z-index: 90; pointer-events: none; background: var(--arrive-c, transparent); opacity: 0; }
html.lt-ready[data-arrived-from-hub] .e-arrive-field { animation: e-field-out 620ms var(--ease-out) both; }
@keyframes e-field-out { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  html.lt-ready[data-arrived-from-hub] .e-arrive-field { animation-duration: 180ms; }
  .family-panel, .e-tool, .call, .nb, .fp-item { transition-duration: 1ms; }
  .family-panel.is-open, .family-panel.is-closing { animation-duration: 1ms; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
html[data-arrived-from-hub="hub"] .e-arrive-field, html[data-arrived-from-hub="family"] .e-arrive-field { --arrive-c: var(--here-c, var(--c-hub)); }
html[data-arrived-from-hub="organise"] .e-arrive-field { --arrive-c: var(--c-organise); }
html[data-arrived-from-hub="style"] .e-arrive-field { --arrive-c: var(--c-style); }
html[data-arrived-from-hub="celebrate"] .e-arrive-field { --arrive-c: var(--c-celebrate); }
/* By night the ruler's strips take each district's lit ink, so they read on dark. */
html[data-theme="dark"] .ruler .seg::after { background: var(--seg-i); }
@media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .ruler .seg::after { background: var(--seg-i); } }