/* Direction E, the hub: one calm sheet on a drafting-table ground. */
@font-face { font-family: "Zen Maru Gothic"; font-style: normal; font-weight: 700; font-display: swap; src: url(/_assets/previews/e/hub/fonts/ZenMaruGothic-700.9d65f92a3e.woff2) format("woff2"); }
@font-face { font-family: "Zen Maru Gothic"; font-style: normal; font-weight: 900; font-display: swap; src: url(/_assets/previews/e/hub/fonts/ZenMaruGothic-900.3e04ec1d29.woff2) format("woff2"); }

:root {
  color-scheme: light dark;
  --f-ground: light-dark(#E4E8EE, #0F131A);
  --f-surface: light-dark(#F7F8F9, #1A1E27);
  --f-text: light-dark(#1C2230, #E8EAEE);
  --f-muted: light-dark(#454D5E, #A7AEBB);
  --f-line: light-dark(#C3C9D3, #343B49);
  --ring: light-dark(#A84C0C, #F5A262);
  --seal-ink: var(--f-text);
  --seal-paper: var(--c-hub);
  --round: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Arial Rounded MT Bold", var(--thread);
}
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--f-ground); color: var(--f-text); font: 400 17px/1.55 var(--thread); -webkit-font-smoothing: antialiased; }
img, svg { max-width: none; }
a { color: inherit; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 12px 16px; border-radius: 10px; background: var(--f-surface); color: var(--f-text); font-weight: 700; }
.skip:focus { top: 12px; }

/* First screen: the title block and the key beside the sheet. */
.first { max-width: 1920px; margin-inline: auto; }
.first-text { padding: 26px clamp(16px, 4vw, 32px) 24px; }
.title-block { max-width: 640px; }
.title-block h1 { margin: 0; }
.t-name { display: block; font: 900 clamp(46px, 11vw, 80px)/.98 var(--round); letter-spacing: -.02em; }
.t-tag { display: block; margin-top: 12px; font: 700 clamp(21px, 5vw, 28px)/1.2 var(--round); color: var(--f-muted); }
.t-lede { margin: 16px 0 0; max-width: 36ch; color: var(--f-muted); }
.t-actions { margin: 22px 0 16px; }

.key { margin-top: 26px; }
.key-h { margin: 0 0 10px; font: 700 15px/1.3 var(--thread); letter-spacing: .02em; }
.key-h span { display: block; margin-top: 2px; font-weight: 400; color: var(--f-muted); }
.key-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.key-row { display: grid; grid-template-columns: 46px 1fr auto; grid-template-areas: "sw verb state" "sw name name" "sw line line"; align-items: center; gap: 0 12px; width: 100%; min-height: 60px; padding: 8px 10px 8px 8px; border: 0; border-radius: 14px; background: transparent; color: var(--f-text); font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: background-color 160ms, transform 200ms var(--ease-out); }
.key-row:hover, .key-row:focus-visible { background: color-mix(in srgb, var(--seg-c) 38%, var(--f-ground)); transform: translateX(4px); }
.key-sw { grid-area: sw; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--seg-c); color: var(--seg-i); align-self: start; }
.key-sw svg { width: 32px; height: 32px; }
.key-verb { grid-area: verb; font: 900 20px/1.1 var(--round); }
.key-name { grid-area: name; margin-top: 1px; font-size: 14px; font-weight: 700; color: var(--f-text); }
.key-line { grid-area: line; font-size: 14.5px; line-height: 1.4; color: var(--f-muted); }
.key-state { grid-area: state; justify-self: end; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--seg-c); color: var(--seg-i); font: 700 13px/1 var(--thread); white-space: nowrap; }
a.key-row .key-state::after { content: ""; width: 6px; height: 6px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
.key-row.is-later .key-state { background: transparent; color: var(--f-muted); box-shadow: inset 0 0 0 1.5px var(--f-muted); font-weight: 500; }
.k0 { --i: 0; } .k1 { --i: 1; } .k2 { --i: 2; } .k3 { --i: 3; } .k4 { --i: 4; } .k5 { --i: 5; } .k6 { --i: 6; } .k7 { --i: 7; } .k8 { --i: 8; }
@media (min-width: 760px) and (max-width: 1099px) {
  .first-text { display: grid; grid-template-columns: 1fr; }
  .key-list { grid-template-columns: 1fr 1fr; column-gap: 12px; }
}

/* The sheet. */
.sheet-col { padding: 0 clamp(8px, 2vw, 16px) 16px; }
.sheet { position: relative; height: 78svh; min-height: 440px; max-height: 820px; overflow: hidden; border-radius: 18px; background: var(--c-hub); box-shadow: 0 0 0 1px var(--f-line), 0 30px 60px -42px rgb(20 30 50 / .5); touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.sheet.is-dragging { cursor: grabbing; }
.sheet:focus-visible { outline-offset: -5px; }
.sheet-world { position: absolute; left: 0; top: 0; width: 3000px; height: 2050px; transform-origin: 0 0; transform: scale(.14); }
@media (min-width: 640px) { .sheet-world { transform: scale(.25); } }
@media (min-width: 1100px) { .sheet-world { transform: scale(.34); } }
html.lt-js .sheet-world { visibility: hidden; }
html.lt-js .sheet.is-placed .sheet-world { visibility: visible; }
.sheet-ground { position: absolute; left: 0; top: 0; width: 3000px; height: 2050px; }
.sg-paper { fill: var(--c-hub); }
.sg-grid { fill: none; stroke: var(--f-line); stroke-width: 1.2; opacity: .6; }
.sg-frame { fill: none; stroke: var(--f-muted); stroke-width: 3; }
.sg-frame.thin { stroke-width: 1.4; }
.sg-ticks { fill: none; stroke: var(--f-muted); stroke-width: 2; }
.sg-road { fill: none; stroke: var(--f-muted); stroke-width: 7; stroke-dasharray: 1 24; stroke-linecap: round; }
.sg-note { font: 500 27px/1 var(--thread); fill: var(--f-muted); text-anchor: middle; }
.sg-block rect, .sg-block path { fill: none; stroke: var(--f-muted); stroke-width: 2; }
.sg-bt { font: 500 24px/1 var(--thread); fill: var(--f-muted); letter-spacing: .05em; }
.sg-bt.strong { font-weight: 700; fill: var(--f-text); }

.centre { position: absolute; left: 1100px; top: 760px; width: 800px; text-align: center; pointer-events: none; }
.centre .seal { width: 400px; height: 400px; margin: 0 auto; }
.seal-hub .seal-text { font-size: 10.5px; }
.centre-name { margin: 22px 0 0; font: 900 84px/1 var(--round); letter-spacing: -.02em; }
.centre-tag { margin: 14px 0 0; font: 700 38px/1.2 var(--round); color: var(--f-muted); }

.plot { position: absolute; display: block; width: 520px; height: 400px; margin: 0; padding: 0; border: 0; border-radius: 20px; background: none; color: var(--seg-i); font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: transform 280ms var(--ease-out), box-shadow 280ms var(--ease-out); }
.plot.s-organise { left: 1240px; top: 105px; } .plot.s-simplify { left: 1947px; top: 273px; } .plot.s-juggle { left: 2323px; top: 700px; }
.plot.s-declutter { left: 2193px; top: 1185px; } .plot.s-stage { left: 1616px; top: 1502px; } .plot.s-style { left: 864px; top: 1502px; }
.plot.s-celebrate { left: 287px; top: 1185px; } .plot.s-design { left: 157px; top: 700px; } .plot.s-share { left: 533px; top: 273px; }
.p0 { --i: 0; } .p1 { --i: 1; } .p2 { --i: 2; } .p3 { --i: 3; } .p4 { --i: 4; } .p5 { --i: 5; } .p6 { --i: 6; } .p7 { --i: 7; } .p8 { --i: 8; }
.plot-ground { position: absolute; inset: 0; width: 100%; height: 100%; }
.pg-fill { fill: var(--seg-c); }
.pg-band { opacity: .5; }
.pg-edge { fill: none; stroke: var(--seg-i); stroke-width: 2.5; opacity: .45; transition: opacity 200ms; }
.plot-verb { position: absolute; left: 52px; top: 50px; font: 900 66px/1 var(--round); letter-spacing: -.02em; }
.plot-line { position: absolute; left: 52px; right: 48px; top: 136px; font: 500 32px/1.25 var(--thread); }
.plot-emb { position: absolute; right: 42px; bottom: 38px; width: 112px; height: 112px; }
.plot-go { position: absolute; left: 52px; bottom: 46px; display: inline-flex; align-items: center; gap: 12px; padding: 12px 22px; border-radius: 30px; background: var(--seg-i); color: var(--seg-c); font: 700 26px/1 var(--thread); }
a.plot .plot-go::after { content: ""; width: 12px; height: 12px; border-top: 3.5px solid currentColor; border-right: 3.5px solid currentColor; transform: rotate(45deg); }
.plot.is-later .plot-go { background: transparent; color: var(--seg-i); box-shadow: inset 0 0 0 3px var(--seg-i); font-weight: 500; }
a.plot:hover, .plot.is-lit { transform: translateY(-12px); box-shadow: 0 40px 60px -36px rgb(10 20 40 / .45); }
.plot:hover .pg-edge, .plot.is-lit .pg-edge { opacity: 1; }
.plot:focus-visible { outline: 8px solid var(--ring); outline-offset: 10px; border-radius: 22px; }
.plot.is-noted .plot-go { animation: stamp 420ms var(--ease-out); }
@keyframes stamp { 0% { transform: scale(1.25) rotate(-4deg); opacity: .4; } 100% { transform: none; opacity: 1; } }

.sheet-hint { position: absolute; left: 10px; top: 10px; max-width: min(36ch, calc(100% - 80px)); margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--f-surface); box-shadow: 0 0 0 1px var(--f-line); color: var(--f-muted); font: 500 13px/1.4 var(--thread); pointer-events: none; transition: opacity 400ms ease-out; }
.sheet.is-used .sheet-hint { opacity: 0; }
.sheet-tools { position: absolute; right: 10px; bottom: 10px; display: grid; gap: 6px; }
.st-btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: var(--f-surface); box-shadow: 0 0 0 1px var(--f-line), 0 6px 14px -8px rgb(0 0 0 / .3); color: var(--f-text); cursor: pointer; transition: transform 140ms var(--ease-out); }
.st-btn:hover { transform: translateY(-1px); }
.st-btn:active { transform: scale(.94); }
.st-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.minimap { position: absolute; left: 10px; bottom: 10px; width: 132px; height: 90px; display: none; pointer-events: none; }
@media (min-width: 640px) { .minimap { display: block; } }
.mm-sheet { fill: var(--f-surface); stroke: var(--f-line); stroke-width: 30; }
.mm-plot { fill: var(--seg-c); }
.mm-centre { fill: var(--f-line); }
.minimap-view { fill: none; stroke: var(--f-text); stroke-width: 44; }

/* Wide screens: the sheet holds still beside the key while the page scrolls. */
@media (min-width: 1100px) {
  .first { display: grid; grid-template-columns: minmax(380px, 440px) 1fr; align-items: start; }
  .first-text { padding: 30px 28px 40px clamp(20px, 3vw, 40px); }
  .sheet-col { position: sticky; top: 61px; height: calc(100svh - 61px); padding: 14px 14px 14px 0; }
  .sheet { height: 100%; max-height: none; min-height: 0; }
  .t-name { font-size: clamp(54px, 4.6vw, 76px); }
}

/* About Laura, in her own words. */
.about { padding: clamp(64px, 9vw, 128px) clamp(16px, 4vw, 40px); }
.about-in { max-width: 1180px; margin-inline: auto; display: grid; gap: 28px 64px; }
.sec-h { margin: 0; font: 900 clamp(30px, 4.4vw, 46px)/1.05 var(--round); letter-spacing: -.01em; }
.about-big { margin: 0; font: 700 clamp(28px, 4.4vw, 54px)/1.15 var(--round); max-width: 18ch; }
.about-big .q { color: var(--f-muted); }
.about-src { margin: -12px 0 0; color: var(--f-muted); font-size: 15px; }
.about-notes { margin: 0; display: grid; gap: 22px; }
.about-notes dt { font: 700 13px/1 var(--thread); letter-spacing: .1em; text-transform: uppercase; color: var(--f-muted); }
.about-notes dd { margin: 6px 0 0; font-size: 18px; line-height: 1.5; max-width: 52ch; }
.about-links { display: flex; gap: 20px; margin: 0; }
.about-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-underline-offset: 5px; }
@media (min-width: 900px) {
  .about-in { grid-template-columns: 1fr 1fr; grid-template-areas: "h notes" "big notes" "src notes" "links notes"; align-items: start; }
  .about-in .sec-h { grid-area: h; } .about-big { grid-area: big; } .about-src { grid-area: src; margin: 0; } .about-notes { grid-area: notes; } .about-links { grid-area: links; }
}

/* The free call: a real sequence, so it is numbered. */
.callsec { background: var(--f-surface); padding: clamp(56px, 8vw, 104px) clamp(16px, 4vw, 40px); box-shadow: 0 -1px 0 var(--f-line); }
.callsec-in { max-width: 1180px; margin-inline: auto; }
.steps { list-style: none; counter-reset: step; margin: 28px 0 32px; padding: 0; display: grid; gap: 22px; }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 36px; } }
.steps li { counter-increment: step; display: grid; grid-template-columns: 52px 1fr; column-gap: 14px; }
.steps li::before { content: counter(step); grid-row: span 2; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; box-shadow: inset 0 0 0 2.5px var(--f-text); font: 900 22px/1 var(--round); }
.steps b { font: 900 21px/1.2 var(--round); align-self: end; }
.steps span { color: var(--f-muted); }
.hub-foot { padding: 28px clamp(16px, 4vw, 40px) 40px; color: var(--f-muted); font: 500 14px/1.4 var(--thread); }
.hub-foot p { max-width: 1180px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; }
.hub-foot a { color: var(--f-text); display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 4px; }

/* Zooming through a district: its ground fills the screen, then the site opens. */
.e-enter-field { position: fixed; inset: 0; z-index: 95; pointer-events: none; opacity: 0; }
.e-enter-field[data-key="organise"] { background: var(--c-organise); }
.e-enter-field[data-key="style"] { background: var(--c-style); }
.e-enter-field[data-key="celebrate"] { background: var(--c-celebrate); }

/* Arrival: the title rises, the key and the districts land round the ring,
   the seal turns into place. Plays once, finishes by itself. */
@media (prefers-reduced-motion: no-preference) {
  html.lt-ready .t-name, html.lt-ready .t-tag, html.lt-ready .t-lede, html.lt-ready .t-actions { animation: rise 720ms var(--ease-out) backwards; }
  html.lt-ready .t-tag { animation-delay: 90ms; } html.lt-ready .t-lede { animation-delay: 170ms; } html.lt-ready .t-actions { animation-delay: 240ms; }
  html.lt-ready .key-list li { animation: key-in 560ms var(--ease-out) backwards; animation-delay: calc(var(--i) * 60ms + 200ms); }
  .sheet.is-placed:not(.from-site) .plot { animation: land 820ms var(--ease-out) backwards; animation-delay: calc(var(--i) * 70ms + 160ms); }
  .sheet.is-placed:not(.from-site) .centre .seal { animation: turn 1200ms var(--ease-out) backwards; }
  .sheet.is-placed:not(.from-site) .sg-road, .sheet.is-placed:not(.from-site) .sg-note { animation: fade 700ms ease-out 600ms backwards; }
}
@media (prefers-reduced-motion: reduce) {
  html.lt-ready .t-name, html.lt-ready .key-list li, .sheet.is-placed .plot { animation: fade 200ms ease-out backwards; }
  .plot, .key-row, .st-btn { transition-duration: 1ms; }
  a.plot:hover, .plot.is-lit, .key-row:hover { transform: none; }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes key-in { from { opacity: 0; transform: translateX(-14px); } }
@keyframes land { from { opacity: 0; transform: translateY(70px) scale(.9); } }
@keyframes turn { from { opacity: 0; transform: rotate(-50deg) scale(.88); } }
@keyframes fade { from { opacity: 0; } }