/* The coast: one place at different hours. Sea, wet granite, lamp-lit timber, paper and chart. Copy holds still; light moves. */
:root {
  --ink-900: #0F1E25;
  --ink-800: #192C35;
  --ink-700: #243842;
  --teal: #356F6A;
  --teal-lit: #8FBDB5;
  --sand: #DCC7A4;
  --sand-deep: #A8895C;
  --terra: #C98263;
  --terra-lit: #E6A47F;
  --ivory: #F6F1E9;
  --paper: #F0E6D2;
  --paper-ink: #2A2418;
  --paper-soft: #5F533E;
  --brass: #B9924F;
  --stone: #6C7777;
  --stone-dk: #4A5759;
  --line-dk: rgba(246, 241, 233, .18);
  --line-lt: rgba(42, 36, 24, .2);
  --display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --wordmark: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --body: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --gutter: clamp(20px, 5vw, 72px);
  --edge: max(var(--gutter), calc((100vw - 1240px) / 2 + var(--gutter)));
  --bar-h: 68px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --melt: clamp(50px, 9vh, 110px);
  color-scheme: dark light;
}
html[lang="zh-CN"] {
  --display: "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", "SimSun", serif;
  --body: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bar-h) + 12px); background: var(--ink-800); }
body { margin: 0; font-family: var(--body); font-size: clamp(16px, .55vw + 14px, 18px); line-height: 1.68; color: var(--ivory); background: transparent; overflow-x: clip; -webkit-font-smoothing: antialiased; }
html[lang="zh-CN"] body { line-height: 1.82; }
img, picture, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 500; line-height: 1.16; margin: 0; letter-spacing: -.01em; text-wrap: balance; }
html[lang="zh-CN"] h1, html[lang="zh-CN"] h2, html[lang="zh-CN"] h3 { font-weight: 600; letter-spacing: .01em; line-height: 1.32; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; border-radius: 3px; }
.leaf :focus-visible, .book :focus-visible, .letter :focus-visible, .place--day :focus-visible, .pinned :focus-visible, .harbours :focus-visible { outline-color: #7a3b1c; }
main:focus { outline: none; }
[hidden] { display: none !important; }

.skip { position: fixed; left: 12px; top: -80px; z-index: 100; padding: 10px 16px; background: var(--ivory); color: var(--ink-800); border-radius: 6px; text-decoration: none; }
.skip:focus { top: 12px; }

.wrap { width: min(1240px, 100%); margin: 0 auto; padding: 0 var(--gutter); position: relative; }
.narrow { width: min(760px, 100%); margin: 0 auto; padding: 0 var(--gutter); position: relative; }
.narrow-left { max-width: 44em; margin-bottom: clamp(36px, 5vw, 70px); }

.h1 { font-size: clamp(32px, 3.6vw + 12px, 68px); }
.h2 { font-size: clamp(26px, 2.1vw + 12px, 44px); }
.h3 { font-size: clamp(20px, .9vw + 14px, 28px); }
.lede { font-size: clamp(18px, .7vw + 14px, 24px); line-height: 1.6; }
html[lang="zh-CN"] .lede { line-height: 1.75; }
.kicker { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--sand); margin-bottom: 18px; font-weight: 500; }
html[lang="zh-CN"] .kicker { letter-spacing: .24em; font-size: 14px; }
.fine { font-size: 14px; opacity: .8; line-height: 1.6; }
.fine a { text-underline-offset: 3px; }
.note { padding: 14px 18px; border-left: 2px solid var(--sand); background: rgba(220, 199, 164, .08); }
.note-line { margin: 14px 0 0; font-size: 13px; letter-spacing: .04em; opacity: .74; }
.pullquote { font-family: var(--display); font-size: clamp(26px, 2.2vw + 14px, 46px); line-height: 1.3; margin: clamp(40px, 6vw, 80px) 0 0; max-width: 24em; color: var(--sand); }
.sec-head { max-width: 46em; margin-bottom: clamp(30px, 4vw, 56px); }
.sec-head .h1, .sec-head .h2 { margin-bottom: .45em; }

/* ---------- the live sea, and its stand-in ---------- */
.sea { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; opacity: 0; transition: opacity 1s ease; }
.sea.is-on { opacity: 1; }
.no-js .sea { display: none; }
html { --sea-a: #1d343e; --sea-b: #0e1c23; }
html:has(body[data-sea="dawn"]) { --sea-a: #24424a; --sea-b: #0f1f27; }
html:has(body[data-sea="night"]) { --sea-a: #15253a; --sea-b: #070e17; }
html:has(body[data-sea="ember"]) { --sea-a: #3a2620; --sea-b: #120d0e; }
html:has(body[data-sea="green"]) { --sea-a: #17545a; --sea-b: #06282c; }
html:has(body[data-sea="dusk"]) { --sea-a: #33262f; --sea-b: #0e1219; }
html { background: radial-gradient(120% 70% at 30% 0%, var(--sea-a), var(--sea-b) 72%) fixed var(--sea-b); }

/* ---------- places ---------- */
.place { position: relative; isolation: isolate; padding: clamp(80px, 11vw, 150px) 0; }
/* A ground stays put while the page moves over it, so neighbouring sections on the same surface have no seam,
   and where the surface changes one world melts into the next rather than meeting it at a ruled line. */
.ground { position: absolute; inset: 0; z-index: -1; clip-path: inset(0); -webkit-mask-image: linear-gradient(transparent, #000 var(--melt), #000 calc(100% - var(--melt)), transparent); mask-image: linear-gradient(transparent, #000 var(--melt), #000 calc(100% - var(--melt)), transparent); }
.ground__img { position: fixed; inset: 0; background: #1a120b center / cover no-repeat; }
.ground__img::after { content: ""; position: absolute; inset: 0; }
.ground--desk .ground__img { background-image: url(/assets/grounds/desk-l.webp); }
.ground--desk .ground__img::after { background: linear-gradient(90deg, rgba(12, 7, 3, .5), rgba(12, 7, 3, .24) 50%, rgba(12, 7, 3, .32)), linear-gradient(180deg, rgba(14, 8, 4, .1), rgba(14, 8, 4, .34)); }
.ground--quay .ground__img { background-image: url(/assets/grounds/quay-l.webp); background-color: #1f2122; }
.ground--quay .ground__img::after { background: linear-gradient(180deg, rgba(8, 10, 12, .62), rgba(8, 10, 12, .5)); }
.ground--dusk .ground__img { background-image: url(/assets/plates/coast-1-shore-l.webp); background-color: #1d1a1e; }
.ground--dusk .ground__img::after { background: linear-gradient(90deg, rgba(10, 14, 20, .28) 0%, rgba(10, 14, 20, .78) 52%, rgba(10, 14, 20, .86) 100%); }
@media (max-aspect-ratio: 85/100) {
  .ground--desk .ground__img { background-image: url(/assets/grounds/desk-p.webp); }
  .ground--dusk .ground__img { background-image: url(/assets/plates/coast-1-shore-p.webp); }
  .ground--dusk .ground__img::after { background: rgba(10, 14, 20, .68); }
}
.place--desk:has(+ .place--desk) > .ground { -webkit-mask-image: linear-gradient(transparent, #000 var(--melt)); mask-image: linear-gradient(transparent, #000 var(--melt)); }
.place--desk + .place--desk > .ground { -webkit-mask-image: linear-gradient(#000 calc(100% - var(--melt)), transparent); mask-image: linear-gradient(#000 calc(100% - var(--melt)), transparent); }
.place--desk + .place--desk:has(+ .place--desk) > .ground { -webkit-mask-image: none; mask-image: none; }
.place--desk, .place--quay { color: var(--ivory); }
.place--desk > .wrap .kicker, .place--quay .kicker { color: #F5E2C2; text-shadow: 0 1px 8px #000; }
.place--desk .sec-head .h1, .place--desk .sec-head .lede, .place--quay .sec-head .h1, .place--quay .sec-head .lede { text-shadow: 0 2px 22px rgba(0, 0, 0, .7); }

/* A sheet of paper: a physical thing, lit by the same lamp, with a real shadow. */
.leaf { position: relative; width: min(780px, calc(100% - 2 * var(--gutter))); margin: 0 auto; padding: clamp(28px, 5vw, 76px); color: var(--paper-ink); background: var(--paper) url(/assets/grounds/paper.webp); border-radius: 2px 3px 2px 4px / 3px 2px 4px 2px; box-shadow: 0 1px 1px rgba(0, 0, 0, .35), 0 12px 24px rgba(0, 0, 0, .34), 0 40px 80px rgba(0, 0, 0, .42); }
.leaf::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(90% 60% at 8% 0%, rgba(255, 204, 138, .26), transparent 70%), linear-gradient(120deg, transparent 72%, rgba(70, 44, 18, .11)); box-shadow: inset 0 0 44px rgba(120, 88, 44, .16); }
.leaf > * { position: relative; z-index: 1; }
.leaf h1, .leaf h2, .leaf h3 { color: var(--paper-ink); }
.leaf .kicker { color: #7a5a2c; }
.leaf .fine { color: var(--paper-soft); opacity: 1; }

/* An open book. */
.book { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(1180px, calc(100% - 2 * var(--gutter))); margin: 0 auto; color: var(--paper-ink); background: var(--paper) url(/assets/grounds/paper.webp); border-radius: 3px; box-shadow: 0 2px 0 #cdbd9e, 0 4px 0 #bfae8d, 0 6px 0 #ad9b78, 0 8px 0 #8d7c5d, 0 18px 30px rgba(0, 0, 0, .46), 0 54px 90px rgba(0, 0, 0, .5); }
.book::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 76px; margin-left: -38px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(66, 44, 18, .12) 34%, rgba(40, 26, 10, .42) 50%, rgba(66, 44, 18, .12) 66%, transparent); }
.book::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(70% 70% at 8% 0%, rgba(255, 204, 138, .26), transparent 70%); box-shadow: inset 0 0 50px rgba(120, 88, 44, .15); }
.book__page { position: relative; z-index: 1; padding: clamp(28px, 4.4vw, 66px); min-width: 0; }
.book h2, .book h3 { color: var(--paper-ink); }
.book .kicker { color: #7a5a2c; }
.book__links { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 18px; }
@media (max-width: 820px) {
  .book { grid-template-columns: 1fr; }
  .book::before { display: none; }
  .book__page + .book__page { padding-top: 0; }
}
/* A photograph tipped into the book: this one is allowed its corners, because they're real. */
.tipin { margin: 0; padding: 10px 10px 14px; background: #f7f1e4; transform: rotate(1.1deg); box-shadow: 0 1px 2px rgba(40, 26, 10, .4), 0 12px 26px rgba(40, 26, 10, .3); }
.tipin img { width: 100%; }
.tipin figcaption { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--paper-soft); }

/* ---------- bar ---------- */
.bar { position: fixed; inset: 0 0 auto 0; z-index: 40; height: var(--bar-h); display: flex; align-items: center; gap: clamp(10px, 2vw, 28px); padding: 0 var(--edge); transition: background .35s ease, box-shadow .35s ease; color: var(--ivory); }
.bar.is-solid, .wants-open .bar { background: rgba(12, 16, 19, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(246, 241, 233, .08); }
.bar__home { flex: 0 0 auto; display: flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; border-radius: 10px; }
.bar__name { display: grid; gap: 1px; white-space: nowrap; text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }
.bar__word { font-family: var(--wordmark); font-size: 21px; line-height: 1.12; }
.bar__by { font-family: var(--wordmark); font-size: 13px; line-height: 1.2; }
.bar__mark { flex: 0 0 auto; display: block; width: 44px; height: 44px; background: #FCFAF6; border-radius: 10px; padding: 1px; box-shadow: 0 1px 8px rgba(0, 0, 0, .28); }
.bar__mark img { width: 100%; height: 100%; object-fit: contain; }
.bar__nav { display: flex; gap: clamp(4px, 1.4vw, 22px); margin-left: auto; align-items: center; }
.bar__nav a, .bar__want { background: none; border: 0; padding: 9px 10px; color: inherit; text-decoration: none; font-size: 15px; border-radius: 6px; cursor: pointer; white-space: nowrap; text-shadow: 0 1px 10px rgba(0, 0, 0, .45); }
.bar__nav a:hover, .bar__want:hover { background: rgba(246, 241, 233, .12); }
.bar__nav a[aria-current="page"], .bar__want.is-here { box-shadow: inset 0 -2px 0 var(--sand); border-radius: 6px 6px 0 0; }
.bar__caret { display: inline-block; width: 7px; height: 7px; margin-left: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform .2s; }
.bar__want[aria-expanded="true"] .bar__caret { transform: translateY(0) rotate(225deg); }
.bar__lang { text-decoration: none; font-size: 14px; padding: 7px 12px; border: 1px solid rgba(246, 241, 233, .42); border-radius: 999px; white-space: nowrap; }
.bar__lang:hover { background: rgba(246, 241, 233, .12); }

.wants { position: absolute; inset: var(--bar-h) 0 auto 0; background: rgba(15, 30, 37, .97); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-top: 1px solid rgba(246, 241, 233, .08); max-height: calc(100vh - var(--bar-h)); max-height: calc(100svh - var(--bar-h)); overflow: auto; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); }
.wants__inner { width: min(1240px, 100%); margin: 0 auto; padding: clamp(20px, 3vw, 40px) var(--gutter) clamp(26px, 4vw, 48px); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 clamp(18px, 3vw, 44px); align-items: start; }
.wants__lead { font-family: var(--display); font-size: clamp(32px, 3vw + 12px, 56px); line-height: 1.1; color: var(--sand); margin: 8px 0 0; }
.wants__list a { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 20px; padding: 13px 8px; text-decoration: none; border-top: 1px solid var(--line-dk); border-radius: 4px; transition: background .2s, padding .25s var(--ease); }
.wants__list li:first-child a { border-top: 0; }
.wants__list a:hover, .wants__list a:focus-visible { background: rgba(246, 241, 233, .06); padding-left: 16px; }
.wants__list a[aria-current="page"] .wants__line { color: var(--sand); }
.wants__line { font-family: var(--display); font-size: clamp(20px, 1vw + 15px, 28px); line-height: 1.3; }
.wants__name { font-size: 14px; opacity: .72; }
/* The name keeps its place on a phone. Ideas, then About, then Contact give up theirs and move in here, so each is still one tap away. */
.wants__more { display: none; flex-wrap: wrap; gap: 6px 26px; margin: 8px 0 0; padding: 13px 8px 0; border-top: 1px solid var(--line-dk); }
.wants__more a { padding: 4px 0; text-decoration: none; font-family: var(--display); font-size: 20px; }
.more-about, .more-contact { display: none; }
@media (max-width: 680px) {
  .bar__nav a, .bar__want { padding: 8px 6px; font-size: 14px; }
  .bar { gap: 6px; }
  .bar__home { gap: 8px; }
  .bar__word { font-size: 18px; }
  .bar__by { font-size: 12px; }
  .bar__lang { padding: 5px 9px; font-size: 13px; }
  .bar__mark { width: 38px; height: 38px; }
}
@media (max-width: 620px) {
  .wants__inner { grid-template-columns: 1fr; }
  .wants__lead { margin-bottom: 6px; }
}
@media (max-width: 560px) {
  .bar__ideas { display: none; }
  .wants__more { display: flex; }
}
@media (max-width: 500px) {
  .bar { padding: 0 12px; }
  .bar__home { gap: 7px; }
  .bar__mark { width: 36px; height: 36px; }
  .bar__about { display: none; }
  .more-about { display: inline; }
  .bar__word { font-size: 17px; }
  .bar__nav { gap: 2px; }
  .bar__nav a, .bar__want { padding: 8px 5px; font-size: 13px; }
  .bar__caret { margin-left: 4px; width: 6px; height: 6px; }
}
@media (max-width: 388px) {
  .bar__contact { display: none; }
  .more-contact { display: inline; }
  .bar__word { font-size: 16px; }
  .bar__mark { width: 32px; height: 32px; }
  .bar__lang { padding: 5px 7px; }
}
.room-hero__copy .kicker { text-transform: none; letter-spacing: .02em; }

/* ---------- buttons, links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 11px 22px; border-radius: 999px; background: var(--ink-800); color: var(--ivory); border: 1px solid var(--ink-800); text-decoration: none; font-size: 16px; font-weight: 500; cursor: pointer; transition: transform .2s var(--ease), background .2s, color .2s; }
.btn:hover { transform: translateY(-1px); background: var(--ink-700); }
.deep .btn, .first-stone .btn, .lock-scene .btn { background: var(--ivory); color: var(--ink-800); border-color: var(--ivory); }
.deep .btn:hover, .first-stone .btn:hover { background: #fff; }
.btn--sun, .deep .btn--sun { background: linear-gradient(180deg, #E8AD86, var(--terra)); border-color: rgba(255, 220, 190, .5); color: #1c1410; box-shadow: 0 8px 30px rgba(201, 130, 99, .35); }
.btn--sun:hover, .deep .btn--sun:hover { background: linear-gradient(180deg, #F0BB98, #D18F70); }
.btn--quiet, .deep .btn--quiet, .first-stone .btn--quiet { background: transparent; color: inherit; border-color: currentColor; }
.btn--quiet:hover, .deep .btn--quiet:hover, .first-stone .btn--quiet:hover { background: rgba(127, 127, 127, .14); color: inherit; }
.btn--ghost, .deep .btn--ghost, .lock-scene .btn--ghost { background: rgba(10, 14, 18, .35); color: var(--ivory); border-color: rgba(246, 241, 233, .45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.btn--ghost:hover, .lock-scene .btn--ghost:hover { background: rgba(10, 14, 18, .6); color: var(--ivory); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.link { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--sand-deep); font-weight: 500; }
.link:hover { text-decoration-thickness: 2px; }

/* ---------- rising type ---------- */
/* overflow-anchor: none, because a block still rising is a poor scroll anchor: restoring on it lands off by the rise. */
.will-rise { opacity: 0; transform: translateY(26px); overflow-anchor: none; transition: opacity .9s var(--ease), transform 1.05s var(--ease); }
.will-rise.is-up { opacity: 1; transform: none; }

/* ---------- the opening ---------- */
.tide { position: relative; background: var(--ink-800); }
.sr-story { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tide__stage { position: relative; }
.tide__poster, .tide__gl, .tide__scrim, .tide__loader, .tools, .gauge, .tide__air, .tide__deep { display: none; }

/* Stills route: no scripts, reduced motion or no WebGL. Each act is its own scene, in order. */
.act { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; }
html:not(.tide-live) .tide__air, html:not(.tide-live) .tide__deep { display: block; }
html:not(.tide-live) .tide__deep { background: var(--ink-800); }
html:not(.tide-live) .tide__air { display: contents; }
html:not(.tide-live) .act--beat { display: none; }
.act__plate, .act__plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.act__plate { background: linear-gradient(180deg, #243a55 0%, #b76a42 36%, #e39a5a 38%, #6e4d38 60%, #231d1b 100%); }
.act--mill .act__plate, .act--room .act__plate { background: linear-gradient(180deg, #0c1c2e, #1b3145 50%, #101d26); }
.act::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 30, 37, .62) 0%, rgba(15, 30, 37, .1) 42%, rgba(15, 30, 37, 0) 70%); pointer-events: none; }
.act--room::after { display: none; }
.act__copy { position: relative; z-index: 2; width: min(780px + var(--edge), 100%); padding: 0 var(--gutter) 0 var(--edge); }
.act__copy--top { margin-top: calc(var(--bar-h) + clamp(28px, 7vh, 96px)); }
.act__copy--mid { margin: auto; text-align: center; }
html[lang="zh-CN"] .act__title { font-size: clamp(32px, 3.9vw + 11px, 72px); }
.act__title { font-size: clamp(34px, 4.4vw + 10px, 78px); color: var(--ivory); text-shadow: 0 2px 28px rgba(10, 18, 24, .55); margin-bottom: .4em; }
.act__title--hook { font-size: clamp(38px, 5.2vw + 10px, 92px); }
.act__title--name { font-size: clamp(44px, 7vw + 10px, 124px); }
.act__title--start { font-size: clamp(30px, 3.2vw + 10px, 60px); }
.act__title--start em { display: block; font-style: normal; color: #F5E6CC; margin-top: .18em; text-shadow: 0 2px 30px rgba(10, 18, 24, .8), 0 1px 4px rgba(10, 18, 24, .55); }
.act__copy--low { margin-top: auto; margin-bottom: clamp(26px, 7vh, 70px); }
.act__sub { font-size: clamp(17px, .7vw + 13px, 23px); line-height: 1.6; color: var(--ivory); text-shadow: 0 1px 16px rgba(10, 18, 24, .7); max-width: 40em; }
.act--deep { background: var(--ink-800); justify-content: center; }
.act--deep::after { display: none; }
.act--name { background: linear-gradient(180deg, #0c1c2e, var(--ink-800)); }
.tags { position: relative; z-index: 2; margin: auto 0 0; padding: 0 var(--gutter) 40px; display: flex; flex-wrap: wrap; gap: 8px; }
.tags li { font-size: 14px; padding: 6px 12px; border: 1px solid rgba(246, 241, 233, .5); border-radius: 999px; background: rgba(15, 30, 37, .62); }
.act__sandtext { position: absolute; z-index: 1; left: 0; right: 0; top: 66%; text-align: center; margin: 0; perspective: 620px; pointer-events: none; }
.act__sandtext span { display: inline-block; font-family: "Bradley Hand", "Hannotate SC", "HanziPen SC", "Kaiti SC", "STKaiti", cursive; font-weight: 600; font-size: clamp(38px, 6.5vw, 96px); color: rgba(20, 12, 8, .62); text-shadow: 0 2px 0 rgba(255, 214, 160, .55), 0 -1px 2px rgba(0, 0, 0, .5); transform: rotateX(58deg); transform-origin: 50% 50%; }

/* The room: Oscar at the desk, the words on the dark of the table in front of him. */
.act--room { justify-content: flex-end; }
.act__shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, transparent 52%, rgba(10, 6, 3, .62) 70%, rgba(10, 6, 3, .9) 100%); }
.act__copy--room { padding-bottom: calc(var(--melt) + 14px); width: min(860px + var(--edge), 100%); }
/* On a short phone the words need to sit lower, so they stay on the desk and off his shoulders. */
@media (max-height: 720px) { .act__copy--room { padding-bottom: 24px; } }
.act__title--room { font-size: clamp(34px, 3.8vw + 12px, 68px); margin-bottom: .22em; }
html[lang="zh-CN"] .act__title--room { font-size: clamp(34px, 3.8vw + 12px, 68px); }
.act__copy--room .act__sub { margin-bottom: .5em; font-size: clamp(16px, .55vw + 13px, 21px); max-width: 44em; }
.act__links { margin: 0; color: var(--ivory); }
.act__links .link { text-shadow: 0 1px 10px rgba(0, 0, 0, .8); text-decoration-color: var(--sand); }
@media (max-aspect-ratio: 85/100) {
  .act__shade { background: linear-gradient(180deg, transparent 44%, rgba(10, 6, 3, .72) 60%, rgba(10, 6, 3, .94) 100%); }
}

/* Live route */
.tide-live .tide { height: 1355vh; height: 1355svh; }
/* clip, not hidden: a hidden box can still be scrolled by focus or scrollIntoView, which would slide the whole scene. */
.tide-live .tide__stage { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; overflow: clip; background: var(--ink-800); touch-action: pan-y; }
.tide-live .tide__stage.is-writing { touch-action: none; cursor: crosshair; }
.tide-live .tide__poster { display: block; position: absolute; inset: 0; overflow: hidden; background: var(--ink-800); transition: opacity .6s ease .9s; }
.tide-live .tide__poster::before { content: ""; position: absolute; inset: -40px; filter: blur(22px); background: url(/assets/plates/coast-1-shore-lqip-l.jpg) center / cover no-repeat; }
@media (max-aspect-ratio: 85/100) { .tide-live .tide__poster::before { background-image: url(/assets/plates/coast-1-shore-lqip-p.jpg); } }
.tide-live .tide__gl { display: block; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.1s ease; }
.tide-ready .tide__gl { opacity: 1; }
.tide-ready .tide__poster { opacity: 0; }
.tide-live .tide__scrim { display: block; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(10, 20, 28, calc(.42 + var(--scrim, 0))) 0%, rgba(10, 20, 28, calc(.12 + var(--scrim, 0) * .5)) 34%, rgba(10, 20, 28, 0) 56%); }
.tide-live .tide__loader { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; overflow: hidden; }
.tide-live .tide__loader span { display: block; height: 100%; width: 34%; background: var(--sand); animation: load 1.6s ease-in-out infinite; }
.tide-ready .tide__loader { display: none; }
@keyframes load { from { transform: translateX(-110%); } to { transform: translateX(310%); } }
.tide-live .tide__air, .tide-live .tide__deep { display: block; position: absolute; inset: 0; pointer-events: none; }
.tide-live .tide__deep { visibility: hidden; }
.tide-live .act { position: absolute; inset: 0; min-height: 0; background: none; visibility: hidden; opacity: 0; }
.tide-live .act::after, .tide-live .act__plate, .tide-live .act__sandtext { display: none; }
.tide-live .act__copy { transform: translateY(calc(var(--rise, 0) * 1px)); }
.tide-live .act__copy--low { position: absolute; left: 0; bottom: 0; bottom: calc(100lvh - 100svh); margin-bottom: max(clamp(26px, 7vh, 70px), 84px); }
.tide-live .act--room .act__copy--room { position: absolute; left: 0; bottom: 0; bottom: calc(100lvh - 100svh); }
.tide-live .act a { pointer-events: auto; }
.tide-live .act--sand { visibility: visible; opacity: 1; }
.tide-live .tags { position: absolute; inset: 0; padding: 0; margin: 0; display: block; }
.tide-live .tags li { position: absolute; width: max-content; left: var(--x); top: var(--y); transform: translate(-50%, calc(-100% - var(--lift, 0) * 1px)); max-width: min(66vw, 320px); text-align: center; line-height: 1.32; padding: 7px 13px; background: rgba(15, 30, 37, .78); border-color: rgba(220, 199, 164, .7); opacity: 0; visibility: hidden; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.tide-live .tags li::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 18px; background: rgba(220, 199, 164, .8); }
.tide-live .tags li::before { content: ""; position: absolute; left: 50%; top: calc(100% + 16px); width: 5px; height: 5px; margin-left: -2px; border-radius: 50%; background: var(--sand); }

/* Every control shares this grid, so none can sit on another at any width or in either language.
   The form opens above the row, which keeps the button just pressed under the finger that pressed it. */
.tide-live .tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "form form" "row next"; align-items: end; gap: 10px 12px; position: absolute; left: var(--edge); right: var(--edge); bottom: calc(24px + var(--kb, 0px)); bottom: calc(100lvh - 100svh + max(24px, env(safe-area-inset-bottom)) + var(--kb, 0px)); z-index: 5; pointer-events: none; }
.tools.is-keyboard .tools__row, .tools.is-keyboard .tide__next { display: none; }
.tide-live .tools > * { pointer-events: auto; }
.tools.is-gone .tools__row, .tools.is-gone .tools__type { display: none; }
.tools__row { grid-area: row; display: flex; flex-wrap: wrap; gap: 8px; }
.tool { min-height: 44px; padding: 8px 16px; border-radius: 999px; font-size: 14px; color: var(--ivory); background: rgba(15, 30, 37, .46); border: 1px solid rgba(246, 241, 233, .36); cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .2s; }
.tool:hover { background: rgba(15, 30, 37, .7); }
.tool[aria-pressed="true"], .tool[aria-expanded="true"] { background: var(--ivory); color: var(--ink-800); border-color: var(--ivory); }
.tools__type { grid-area: form; max-width: 560px; }
.tide-live .tools__type { padding: 10px 12px 12px; border-radius: 14px; background: rgba(15, 30, 37, .66); border: 1px solid rgba(246, 241, 233, .18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.tools__type label { display: block; font-size: 13px; margin-bottom: 6px; color: var(--ivory); text-shadow: 0 1px 8px rgba(0, 0, 0, .7); }
.tools__typerow { display: flex; gap: 8px; }
.tools__type input { flex: 1; min-width: 0; min-height: 44px; padding: 8px 14px; border-radius: 10px; background: rgba(15, 30, 37, .72); border: 1px solid rgba(246, 241, 233, .4); color: var(--ivory); }
.tide__next { position: fixed; display: none; }
.tide-live .tide__next { grid-area: next; justify-self: end; position: relative; display: inline-flex; align-items: center; gap: 9px; min-height: 44px; white-space: nowrap; color: #1c1410; text-decoration: none; font-size: 14px; font-weight: 500; padding: 8px 18px; border-radius: 999px; background: linear-gradient(180deg, #E8AD86, var(--terra)); box-shadow: 0 6px 24px rgba(201, 130, 99, .4); pointer-events: auto; transition: background .3s; }
.tide-live .tide__next.is-skip { background: rgba(15, 30, 37, .55); color: var(--ivory); box-shadow: none; border: 1px solid rgba(246, 241, 233, .36); font-weight: 400; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.tide__next i { display: block; font-style: normal; line-height: 1; }
html:not(.calm) .tide__next i { animation: ebb 2.4s ease-in-out infinite; }
@keyframes ebb { 0%, 100% { transform: translateY(-2px); opacity: .7; } 50% { transform: translateY(2px); opacity: 1; } }
.tide-live .gauge { display: block; position: absolute; right: 14px; top: 18vh; height: 44vh; width: 2px; background: rgba(246, 241, 233, .22); }
.gauge span { position: absolute; left: -4px; width: 10px; height: 2px; background: var(--sand); bottom: calc(var(--level, 0) * 100%); }
.act--beat { display: none; margin: 0; }
.tide-live .act--beat { display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--display); font-size: clamp(30px, 3.4vw + 10px, 62px); color: var(--ivory); }
@media (max-width: 560px) {
  .tide-live .tools { grid-template-areas: "form form" "row row" ". next"; }
}
@media (max-width: 700px) {
  .tide-live .gauge { right: 7px; }
  .tool { padding: 7px 12px; font-size: 13px; min-height: 40px; }
  .tide-live .tools__row { gap: 6px; }
  .tide-live .tags li { font-size: 13px; }
  .tide__next { font-size: 13px; }
}

/* ---------- forms ---------- */
.form { display: grid; gap: 20px; }
.field { display: grid; gap: 7px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field label, .field legend { font-weight: 500; font-size: 15px; padding: 0; }
.field input[type="text"], .field input:not([type]), .field textarea { width: 100%; padding: 12px 14px; border-radius: 6px; border: 1px solid rgba(42, 36, 24, .34); background: rgba(255, 252, 244, .72); color: var(--paper-ink); font-size: 16px; line-height: 1.5; }
.field ::placeholder { color: rgba(42, 36, 24, .55); }
.field textarea { min-height: 88px; resize: vertical; }
.field__err { color: #93351A; min-height: 1.4em; margin: 0; font-size: 15px; }
.first-stone .field__err { color: var(--terra-lit); }
.field__msg { color: #93351A; font-size: 14px; margin: 0; }
.field--bad input, .field--bad textarea { border-color: #93351A; box-shadow: 0 0 0 1px #93351A; }
.field__help { margin: -2px 0 3px; font-size: 14px; color: var(--paper-soft); line-height: 1.45; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip span { display: inline-block; padding: 7px 14px; border: 1px solid rgba(246, 241, 233, .4); border-radius: 999px; font-size: 15px; font-weight: 400; transition: background .15s, color .15s; }
.chip input:checked + span { background: var(--ivory); color: var(--ink-800); border-color: var(--ivory); box-shadow: inset 0 0 0 2px var(--terra); }
.chip input:focus-visible + span { outline: 2px solid var(--sand); outline-offset: 2px; }
.form__row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.status { min-height: 1.5em; margin: 12px 0 0; font-size: 15px; font-weight: 500; }
.status:empty { min-height: 0; margin: 0; }
.status--on-stone { color: var(--ivory); text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }
.fine--on-stone { color: var(--ivory); text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }
.check { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; cursor: pointer; line-height: 1.45; }
.check input { flex: 0 0 auto; width: 20px; height: 20px; margin: 2px 0 0; accent-color: #7a3b1c; cursor: pointer; }
.deep .check input { accent-color: var(--sand); }
.check--inline { display: inline-flex; padding: 6px 0; }
.byline { font-size: 15px; opacity: .8; margin-top: 16px; }
.sign { margin-top: 22px; width: 190px; height: auto; }

/* ---------- chapter hero ---------- */
.hero { position: relative; }
.hero__stage { position: relative; min-height: 92vh; min-height: 92svh; overflow: hidden; display: flex; align-items: flex-end; -webkit-mask-image: linear-gradient(#000 calc(100% - var(--melt)), transparent); mask-image: linear-gradient(#000 calc(100% - var(--melt)), transparent); }
.hero__plate, .hero__plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }
.hero__plate { background: linear-gradient(180deg, #1f3440, #33504f 55%, #182a33); }
.hero__gl { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .9s ease; }
.hero--ready .hero__gl { opacity: 1; }
.hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 20, 28, .5) 0%, rgba(10, 20, 28, .14) 30%, rgba(10, 20, 28, .1) 48%, rgba(15, 30, 37, .78) 100%); pointer-events: none; }
.hero__copy { position: relative; z-index: 2; width: min(1240px, 100%); margin: 0 auto; padding: calc(var(--bar-h) + 40px) var(--gutter) clamp(50px, 9vh, 100px); }
.hero__copy .h1 { max-width: 15em; font-size: clamp(34px, 3.8vw + 14px, 76px); text-shadow: 0 2px 26px rgba(10, 18, 24, .6); }
.hero__copy .kicker { color: var(--sand); text-shadow: 0 1px 12px rgba(0, 0, 0, .6); }
.hero__lede { max-width: 38em; margin-top: 18px; font-size: clamp(17px, .7vw + 14px, 22px); text-shadow: 0 1px 14px rgba(10, 18, 24, .8); }
.tide-hero .hero { height: 170vh; height: 170svh; }
.tide-hero .hero__stage { position: sticky; top: 0; height: 100vh; height: 100lvh; min-height: 0; -webkit-mask-image: none; mask-image: none; }
.tide-hero .hero__copy { padding-bottom: calc(100lvh - 100svh + clamp(40px, 7vh, 88px)); }

/* ---------- home: the logbook ---------- */
/* The table in the room melts into the desk you are now looking down at. */
.logbook .h2 { margin-bottom: .55em; }

/* ---------- home: the chart ---------- */
.harbour-chart { padding: clamp(30px, 6vw, 90px) 0; }
.harbour-chart__inner { position: relative; width: min(1920px, 100%); margin: 0 auto; }
.chart-figure { position: relative; margin: 0; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .35)); }
.chart-figure img { width: 100%; -webkit-mask-image: linear-gradient(transparent, #000 5%, #000 96%, transparent); mask-image: linear-gradient(transparent, #000 5%, #000 96%, transparent); }
.chart-title { position: absolute; z-index: 3; left: 19.5%; top: 11%; width: 33%; color: var(--paper-ink); }
.chart-title .h1 { font-size: clamp(30px, 3vw + 4px, 58px); margin-bottom: .35em; }
.chart-title__sub { font-size: clamp(15px, .5vw + 11px, 19px); line-height: 1.5; max-width: 26em; margin: 0; color: #3b3222; }
.chart-pins { position: absolute; inset: 0; }
.chart-pin { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; display: grid; place-items: center; font-size: 13px; font-weight: 600; text-decoration: none; color: #fbf3e1; background: #7a3b1c; border: 1.5px solid #f5e9d0; border-radius: 50%; box-shadow: 0 2px 6px rgba(40, 20, 8, .5); }
.chart-pin--company { left: 64.3%; top: 30.1%; }
.chart-pin--projects { left: 53.2%; top: 42%; }
.chart-pin--trading { left: 40.2%; top: 57.4%; }
.chart-pin--identity { left: 28.1%; top: 69.6%; }
.chart-pin--career { left: 14.2%; top: 78.1%; }
.chart-pin--how { left: 79.5%; top: 70.2%; }
.harbours { position: absolute; inset: 0; pointer-events: none; }
.harbour { position: absolute; width: clamp(250px, 20.8vw, 380px); pointer-events: auto; }
.harbour--company { left: 66%; top: 32.5%; }
.harbour--projects { left: 55%; top: 44.5%; }
.harbour--trading { left: 42%; top: 58.5%; }
.harbour--identity { left: 35.5%; top: 73%; }
.harbour--career { left: 14%; top: 83%; }
.harbour--how { left: 68%; top: 80%; }
.harbour a { position: relative; display: block; padding: 8px 12px; color: var(--paper-ink); text-decoration: none; border-radius: 3px; background: rgba(241, 230, 206, .68); box-shadow: 0 1px 2px rgba(60, 40, 16, .24); transition: background .2s, transform .25s var(--ease), box-shadow .25s; }
.harbour a:hover, .harbour a:focus-visible { background: #f6ecd8; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(60, 40, 16, .35); }
.harbour__no { display: none; }
.harbour__line { display: block; font-family: var(--display); font-size: clamp(14px, .42vw + 10px, 17px); line-height: 1.4; }
.harbour__name { display: block; margin-top: 3px; font-size: 13px; font-weight: 600; color: #7a3b1c; }
.harbour__name i { font-style: normal; }
.harbour__peek { position: absolute; left: 50%; bottom: calc(100% + 10px); width: 150px; height: 150px; margin-left: -75px; object-fit: cover; border-radius: 50%; border: 3px solid var(--brass); box-shadow: 0 10px 26px rgba(30, 16, 6, .55); opacity: 0; transform: scale(.82); transition: opacity .25s, transform .3s var(--ease); pointer-events: none; }
.harbour a:hover .harbour__peek, .harbour a:focus-visible .harbour__peek { opacity: 1; transform: none; }
/* Below this the cards would cover each other on the chart, so the chart keeps its numbered pins and the lines go beneath it. */
@media (max-width: 1240px), (max-aspect-ratio: 85/100) {
  .harbour-chart { padding-top: 40px; }
  .chart-title { position: static; width: auto; padding: 0 var(--gutter) 22px; color: var(--ivory); }
  .chart-title .h1 { font-size: clamp(30px, 6vw, 48px); text-shadow: 0 2px 20px rgba(0, 0, 0, .7); }
  .chart-title__sub { color: var(--ivory); text-shadow: 0 1px 12px rgba(0, 0, 0, .8); font-size: 16px; }
  .harbours { position: static; padding: 18px var(--gutter) 0; display: grid; gap: 10px; pointer-events: auto; }
  .harbour { position: static; width: auto; }
  .harbour a { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 2px 12px; align-items: start; padding: 13px 14px; background: var(--paper) url(/assets/grounds/paper.webp); box-shadow: 0 8px 20px rgba(0, 0, 0, .4); }
  .harbour__no { display: grid; place-items: center; grid-row: 1 / span 2; width: 28px; height: 28px; font-size: 14px; font-weight: 600; color: #fbf3e1; background: #7a3b1c; border-radius: 50%; }
  .harbour__line { font-size: 17px; }
  .harbour__peek { display: none; }
}
@media (max-aspect-ratio: 85/100) {
  .chart-pin--company { left: 62.7%; top: 12.6%; }
  .chart-pin--projects { left: 42.5%; top: 27.5%; }
  .chart-pin--trading { left: 63.8%; top: 40.7%; }
  .chart-pin--identity { left: 39.3%; top: 55.6%; }
  .chart-pin--career { left: 62.7%; top: 73%; }
  .chart-pin--how { left: 70.7%; top: 88%; }
}

/* ---------- home: your first stone ---------- */
.first-stone__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(30px, 6vw, 96px); align-items: start; }
.first-stone__slab { position: sticky; top: calc(var(--bar-h) + 24px); }
.slab { width: 100%; height: auto; max-height: calc(100vh - var(--bar-h) - 60px); object-fit: contain; transform: rotate(-1.4deg); filter: drop-shadow(0 34px 44px rgba(0, 0, 0, .62)); }
.first-stone__side .h1 { margin-bottom: .4em; }
.first-stone__side .fine { margin-top: 14px; }
.first-stone .field input { background: rgba(10, 14, 18, .55); border-color: rgba(246, 241, 233, .4); color: var(--ivory); }
.first-stone .field ::placeholder { color: rgba(246, 241, 233, .55); }
.stone-form { margin-top: 26px; }
.stone-out { margin-top: 22px; display: grid; gap: 14px; }
.stone-text { width: 100%; padding: 12px; border-radius: 6px; border: 1px solid rgba(246, 241, 233, .3); background: rgba(10, 14, 18, .55); color: var(--ivory); font-size: 14px; }
@media (max-width: 860px) {
  .first-stone__grid { grid-template-columns: 1fr; }
  .first-stone__slab { position: static; width: min(84%, 360px); margin: 0 auto; }
  .slab { max-height: none; }
}

/* ---------- closing scene ---------- */
.close-scene { min-height: 100vh; min-height: 100svh; padding-bottom: clamp(60px, 9vh, 110px); overflow: hidden; }
.close-scene--short { min-height: 88svh; }
.close-scene__plate, .close-scene__plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.close-scene__plate { -webkit-mask-image: linear-gradient(transparent, #000 var(--melt)); mask-image: linear-gradient(transparent, #000 var(--melt)); }
.close-scene__plate::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 12, 22, .66), rgba(6, 12, 22, .1) 62%); }
.close-scene__inner .h1 { margin-bottom: .6em; max-width: 13em; text-shadow: 0 2px 26px rgba(4, 8, 14, .8); }
.close-scene .lede { max-width: 30em; text-shadow: 0 1px 14px rgba(4, 8, 14, .9); }
.moves { max-width: 44em; }
.moves a { display: block; padding: 18px 0; text-decoration: none; border-top: 1px solid rgba(246, 241, 233, .28); transition: padding .3s var(--ease), color .2s; }
.moves li:last-child a { border-bottom: 1px solid rgba(246, 241, 233, .28); }
.moves a:hover, .moves a:focus-visible { padding-left: 14px; color: #F5D9AE; }
.moves strong { display: block; font-family: var(--display); font-weight: 500; font-size: clamp(22px, 1.3vw + 15px, 34px); line-height: 1.3; text-shadow: 0 2px 16px rgba(4, 8, 14, .85); }
.moves span { display: block; margin-top: 2px; font-size: 16px; text-shadow: 0 1px 10px rgba(4, 8, 14, .95); }
.close-scene__addr { margin-top: 24px; opacity: 1; text-shadow: 0 1px 8px rgba(4, 8, 14, .95); }
.close-scene .next-chapters { margin-top: 40px; max-width: 760px; text-shadow: 0 1px 10px rgba(4, 8, 14, .95); }
@media (max-aspect-ratio: 85/100) {
  .close-scene__plate::after { background: linear-gradient(180deg, rgba(6, 12, 22, .58), rgba(6, 12, 22, .4) 60%, rgba(6, 12, 22, .7)); }
}

/* ---------- about ---------- */
.room-hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; padding: calc(var(--bar-h) + 40px) 0 clamp(36px, 8vh, 86px); isolation: isolate; }
.room-hero__plate, .room-hero__plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.room-hero__plate { background: linear-gradient(180deg, #2a1a0f, #120b07); -webkit-mask-image: linear-gradient(#000 calc(100% - var(--melt)), transparent); mask-image: linear-gradient(#000 calc(100% - var(--melt)), transparent); }
.room-hero__plate::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 6, 3, .35) 0, transparent 22%, transparent 52%, rgba(10, 6, 3, .82) 86%, rgba(10, 6, 3, .92) 100%); }
.room-hero .h1 { max-width: 19em; font-size: clamp(30px, 3vw + 12px, 58px); text-shadow: 0 2px 26px rgba(10, 6, 3, .9); }
.room-hero .kicker { text-shadow: 0 1px 10px #000; }
.story { padding-top: clamp(30px, 6vh, 70px); }
.leaf--story { font-size: clamp(17px, .35vw + 15px, 19px); }
.leaf--story .lede { margin-bottom: 1em; }
.leaf__turn { position: relative; margin: clamp(28px, 4vw, 48px) 0; padding: clamp(14px, 2vw, 22px) 0 clamp(14px, 2vw, 22px) calc(clamp(40px, 5vw, 76px) * 2.4); border-top: 1px solid var(--line-lt); border-bottom: 1px solid var(--line-lt); min-height: 60px; }
.leaf__turn p { margin: 0; font-family: var(--display); font-size: clamp(21px, 1.1vw + 16px, 30px); line-height: 1.4; }
.leaf__year { position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-family: var(--display); font-size: clamp(40px, 5vw, 76px); line-height: 1; color: #93502B; }
.leaf__big { font-family: var(--display); font-size: clamp(23px, 1.3vw + 17px, 34px); line-height: 1.35; margin: 1.3em 0 .6em; }
.who-is-who__head { margin-bottom: clamp(30px, 4vw, 60px); }
.who-is-who__head .h1 { margin-bottom: .4em; }
.who-is-who__head .lede { max-width: 40em; }
.who-is-who__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(30px, 6vw, 96px); align-items: start; }
.stones-figure { position: sticky; top: calc(var(--bar-h) + 16px); margin: 0; height: calc(100vh - var(--bar-h) - 32px); aspect-ratio: 9 / 16; max-width: 100%; justify-self: center; -webkit-mask-image: linear-gradient(transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(transparent, #000 7%, #000 93%, transparent); }
.stones-figure__plate, .stones-figure__plate img { width: 100%; height: 100%; object-fit: cover; }
.stone-mark { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; display: grid; place-items: center; font-size: 14px; font-weight: 600; color: #fff6e6; background: rgba(15, 20, 26, .62); border: 1.5px solid rgba(246, 241, 233, .55); border-radius: 50%; transition: background .3s, transform .3s var(--ease), box-shadow .3s; }
.stone-mark.is-on { background: var(--terra); border-color: #fff0dc; transform: scale(1.24); box-shadow: 0 0 0 6px rgba(230, 164, 127, .26), 0 6px 18px rgba(0, 0, 0, .6); }
.stone-mark--1 { left: 53%; top: 90%; }
.stone-mark--2 { left: 61.6%; top: 76%; }
.stone-mark--3 { left: 56%; top: 62%; }
.stone-mark--4 { left: 62.7%; top: 54%; }
.stone-mark--5 { left: 57%; top: 48.5%; }
.stone-mark--6 { left: 66%; top: 42.5%; }
.who__item { padding: clamp(22px, 3vw, 40px) 0; border-top: 1px solid var(--line-dk); transition: opacity .4s; }
.who__item h3 { display: flex; align-items: center; gap: 12px; font-size: clamp(26px, 1.4vw + 18px, 40px); margin-bottom: 14px; }
.who__no { flex: 0 0 auto; display: inline-grid; place-items: center; width: 30px; height: 30px; font-family: var(--body); font-size: 14px; font-weight: 600; letter-spacing: 0; color: #fff6e6; background: var(--terra); border-radius: 50%; }
.who__what, .who__adds { position: relative; margin-bottom: .8em; }
.who__tag { display: block; margin-bottom: 2px; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--sand); }
.who__adds { color: #F5E6CC; }
@media (max-width: 860px) {
  .who-is-who__grid { grid-template-columns: 1fr; }
  .stones-figure { position: relative; top: 0; height: auto; width: min(82%, 380px); }
}

/* ---------- contact ---------- */
.contact-desk { padding-top: calc(var(--bar-h) + clamp(30px, 6vw, 70px)); }
.contact-desk__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(26px, 5vw, 76px); align-items: start; }
.contact-desk .ground__img::after { background: linear-gradient(90deg, rgba(12, 7, 3, .62), rgba(12, 7, 3, .36) 46%, rgba(12, 7, 3, .2)); }
.contact-desk__side .kicker { color: #F5E2C2; text-shadow: 0 1px 10px #000; }
.reason__moves .link { display: inline; }
.contact-desk__side .h1 { margin-bottom: .4em; text-shadow: 0 2px 22px rgba(0, 0, 0, .75); }
.contact-desk__side .lede { text-shadow: 0 1px 14px rgba(0, 0, 0, .85); }
.reasons { border: 0; margin: 28px 0 0; padding: 0; }
.reasons legend { padding: 0; font-weight: 500; margin-bottom: 10px; text-shadow: 0 1px 10px rgba(0, 0, 0, .85); }
.reason { border-top: 1px solid rgba(246, 241, 233, .24); }
.reason:last-child { border-bottom: 1px solid rgba(246, 241, 233, .24); }
.reason__pick { display: flex; align-items: center; gap: 12px; padding: 14px 0; cursor: pointer; font-family: var(--display); font-size: clamp(19px, .7vw + 15px, 24px); line-height: 1.35; text-shadow: 0 1px 12px rgba(0, 0, 0, .85); }
.reason__pick input { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; accent-color: var(--terra-lit); cursor: pointer; }
.reason__body { padding: 0 0 18px 30px; font-size: 16px; text-shadow: 0 1px 10px rgba(0, 0, 0, .9); }
.reason__moves { display: grid; gap: 6px; }
.is-live .reason:not(.is-on) .reason__body { display: none; }
.letter { position: sticky; top: calc(var(--bar-h) + 18px); padding: clamp(24px, 3.4vw, 46px); color: var(--paper-ink); background: var(--paper) url(/assets/grounds/paper.webp); border-radius: 2px 3px 2px 4px; transform: rotate(.5deg); box-shadow: 0 1px 1px rgba(0, 0, 0, .35), 0 14px 28px rgba(0, 0, 0, .36), 0 44px 80px rgba(0, 0, 0, .44); }
.letter__head { padding-bottom: 8px; border-bottom: 1px solid var(--line-lt); margin-bottom: 4px; }
.letter__line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0 0 6px; font-size: 15px; overflow-wrap: anywhere; }
.letter__line span { min-width: 3em; color: var(--paper-soft); font-size: 13px; }
.letter__line b { font-weight: 500; }
.letter__copy { margin-left: auto; min-height: 30px; padding: 2px 10px; font-size: 13px; border: 1px solid rgba(42, 36, 24, .4); background: transparent; color: var(--paper-ink); border-radius: 999px; cursor: pointer; }
.letter__copy:hover { background: rgba(42, 36, 24, .08); }
.letter__body { display: block; width: 100%; min-height: 250px; padding: 8px 2px; border: 0; color: var(--paper-ink); font-family: var(--display); font-size: clamp(18px, .4vw + 16px, 21px); line-height: 34px; resize: vertical; background: transparent repeating-linear-gradient(transparent 0 33px, rgba(70, 50, 24, .22) 33px 34px); background-attachment: local; }
.letter__body::placeholder { color: rgba(42, 36, 24, .5); }
.letter__body:focus-visible { outline: 2px solid #7a3b1c; outline-offset: 3px; border-radius: 2px; }
.letter__hint { margin: 10px 0 16px; font-size: 14px; color: var(--paper-soft); }
.letter .btn--quiet { color: var(--paper-ink); }
.letter .fine { color: var(--paper-soft); opacity: 1; margin: 12px 0 0; }
.letter .note { color: var(--paper-ink); border-color: #7a3b1c; background: rgba(122, 59, 28, .08); }
.letter__sign { position: absolute; right: clamp(20px, 3vw, 40px); bottom: clamp(12px, 2vw, 26px); width: 110px; margin: 0; opacity: .28; pointer-events: none; }
@media (max-width: 900px) {
  .contact-desk__grid { grid-template-columns: 1fr; }
  .letter { position: relative; top: 0; transform: none; }
  .letter__sign { display: none; }
}

/* ---------- how ---------- */
.sand-stone .pullquote { max-width: 22em; }
.lanes { display: grid; gap: clamp(20px, 3vw, 34px); }
.lane2 h3 { font-size: clamp(19px, .6vw + 15px, 24px); margin-bottom: 10px; color: var(--sand); }
.lane2__track { position: relative; height: clamp(92px, 10vw, 150px); overflow: hidden; background: #2a2a2c url(/assets/plates/coast-1-shore-l.webp) 50% 78% / 100% auto no-repeat; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.lane2__start { position: absolute; left: 3%; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--ivory); box-shadow: 0 0 0 4px rgba(246, 241, 233, .28); z-index: 2; }
.lane2__mark { position: absolute; left: 7%; top: 30%; width: 46%; height: 40%; overflow: visible; }
.lane2__mark path { stroke: rgba(24, 14, 6, .8); filter: drop-shadow(0 1px 0 rgba(255, 214, 160, .55)); vector-effect: non-scaling-stroke; }
.lane2__wash { position: absolute; top: 0; bottom: 0; left: 100%; width: 110%; background: linear-gradient(90deg, rgba(240, 248, 248, .85), rgba(150, 196, 200, .6) 6%, rgba(46, 96, 110, .86) 30%, rgba(24, 58, 70, .92)); }
.lane2__track.is-washing .lane2__wash { animation: wash 1.4s var(--ease) both; }
@keyframes wash { 0% { left: 100%; } 46% { left: 4%; } 100% { left: 100%; } }
.lane2__track.is-washing .lane2__mark { animation: markwash 1.4s linear both; }
/* The tide takes what was written, then the next job writes it all over again from the same place. */
@keyframes markwash { 0%, 26% { opacity: 1; } 36%, 74% { opacity: 0; } 100% { opacity: 1; } }
.lane2__slab { position: absolute; top: 14%; bottom: 14%; width: 21%; background: url(/assets/grounds/stone-a.webp) center / 340% no-repeat #555; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .14), inset 0 -3px 6px rgba(0, 0, 0, .55), 0 8px 14px rgba(0, 0, 0, .5); opacity: 0; transform: translateY(-14px) scale(1.04); transition: opacity .45s, transform .55s var(--ease); z-index: 1; }
.lane2__slab.is-laid { opacity: 1; transform: none; }
.lane2__slab--1 { left: 5%; clip-path: polygon(3% 8%, 96% 0, 100% 90%, 8% 100%); background-position: 12% 40%; }
.lane2__slab--2 { left: 27.5%; clip-path: polygon(0 4%, 100% 10%, 95% 100%, 5% 94%); background-position: 40% 60%; }
.lane2__slab--3 { left: 50%; clip-path: polygon(4% 0, 97% 6%, 100% 96%, 0 100%); background-position: 62% 30%; }
.lane2__slab--4 { left: 72.5%; clip-path: polygon(0 8%, 96% 0, 100% 92%, 5% 100%); background-position: 88% 70%; }
.lane2__flag { position: absolute; top: 8%; width: 4px; height: 84%; background: var(--terra-lit); box-shadow: 0 0 14px rgba(230, 164, 127, .9); transition: left .6s var(--ease); z-index: 2; left: 3.4%; }
.lane2__flag[data-at="1"] { left: 25.8%; }
.lane2__flag[data-at="2"] { left: 48.4%; }
.lane2__flag[data-at="3"] { left: 70.9%; }
.lane2__flag[data-at="4"] { left: 93.5%; }
.lane2__state { margin: 10px 0 0; font-weight: 500; }
.lanes__ctrl { margin-top: 26px; }
.trace-scene { overflow: hidden; }
.trace-scene__plate, .trace-scene__plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 80%; z-index: -1; }
.trace-scene__plate { -webkit-mask-image: linear-gradient(transparent, #000 var(--melt), #000 calc(100% - var(--melt)), transparent); mask-image: linear-gradient(transparent, #000 var(--melt), #000 calc(100% - var(--melt)), transparent); }
.trace-scene__plate::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 10, 16, .72), rgba(8, 10, 16, .62) 62%, rgba(8, 10, 16, .34)); }
.trace-scene__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(26px, 5vw, 80px); align-items: start; }
.trace-scene__head { position: sticky; top: calc(var(--bar-h) + 30px); }
.trace-scene__head .h1 { margin-bottom: .4em; text-shadow: 0 2px 22px rgba(0, 0, 0, .8); }
.trace { position: relative; max-width: 860px; }
.trace::before { content: ""; position: absolute; left: 20px; top: 16px; bottom: 16px; width: 1px; background: var(--line-dk); }
.trace__head { display: flex; gap: 18px; align-items: center; width: 100%; background: none; border: 0; padding: 14px 0; color: inherit; cursor: pointer; text-align: left; font-family: var(--display); font-size: clamp(22px, 1vw + 16px, 31px); position: relative; }
.trace__body { padding: 0 0 18px 58px; text-shadow: 0 1px 10px rgba(0, 0, 0, .85); }
.trace__body p { margin: 0; font-size: clamp(17px, .4vw + 15px, 20px); }
.trace__stone { display: block; width: 40px; height: 28px; flex: 0 0 auto; background: url(/assets/grounds/stone-a.webp) 30% 50% / 400% no-repeat #666; clip-path: polygon(4% 10%, 96% 0, 100% 88%, 8% 100%); transition: opacity .4s; }
.is-live .trace__step:not(.is-on) .trace__stone { opacity: .28; }
.is-live .trace__step:not(.is-current) .trace__body { display: none; }
.is-live .trace__step:not(.is-on) .trace__head { opacity: .55; }
@media (max-width: 860px) {
  .trace-scene__inner { grid-template-columns: 1fr; }
  .trace-scene__head { position: static; }
  .trace-scene__plate::after { background: rgba(8, 10, 16, .74); }
}
.kinds-scene .pullquote--stone { color: #F5E6CC; text-shadow: 0 2px 18px rgba(0, 0, 0, .85); }
.pavers { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(8px, 1vw, 14px); }
.paver { position: relative; padding: clamp(22px, 2.6vw, 38px); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .1), inset -1px -2px 0 rgba(0, 0, 0, .5); background: linear-gradient(155deg, rgba(26, 28, 30, .84), rgba(8, 9, 10, .7)); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.paver h3 { font-size: clamp(22px, .9vw + 17px, 30px); margin-bottom: 8px; color: #F5E6CC; }
.paver p { margin: 0; }
.paver--1 { grid-column: span 5; clip-path: polygon(0 3%, 99% 0, 100% 97%, 2% 100%); }
.paver--2 { grid-column: span 7; clip-path: polygon(1% 0, 100% 4%, 98% 100%, 0 96%); }
.paver--3 { grid-column: span 4; clip-path: polygon(2% 2%, 100% 0, 98% 100%, 0 97%); }
.paver--4 { grid-column: span 4; clip-path: polygon(0 0, 98% 3%, 100% 98%, 3% 100%); }
.paver--5 { grid-column: span 4; clip-path: polygon(1% 4%, 100% 0, 99% 97%, 0 100%); }
.paver--6 { grid-column: span 12; clip-path: polygon(0 5%, 100% 0, 99% 100%, 1% 94%); }
@media (max-width: 760px) { .paver { grid-column: span 12; } }
/* What keeps working after the job ends is the machinery in this room, so the AI OS is told here, with the wheel in view. */
.aios { overflow: hidden; }
.aios__plate, .aios__plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 30%; z-index: -1; }
.aios__plate { -webkit-mask-image: linear-gradient(transparent, #000 var(--melt)); mask-image: linear-gradient(transparent, #000 var(--melt)); }
.aios__plate::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 6, 3, .9) 0%, rgba(10, 6, 3, .78) 58%, rgba(10, 6, 3, .3) 100%), linear-gradient(transparent 44%, rgba(10, 6, 3, .94) 78%); }
.aios .prose { text-shadow: 0 1px 10px rgba(10, 6, 3, .9); }
.aios .h1 { font-size: clamp(28px, 2.3vw + 12px, 50px); }
.aios__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); margin-bottom: clamp(40px, 6vw, 80px); }
.uses__head { font-size: clamp(22px, 1vw + 16px, 30px); margin-bottom: 10px; color: var(--sand); }
.uses { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 clamp(16px, 2.4vw, 32px); }
.uses a { display: block; padding: 18px 0; text-decoration: none; border-top: 1px solid var(--line-dk); }
.uses a:hover strong { color: var(--sand); }
.uses strong { display: block; font-family: var(--display); font-weight: 500; font-size: clamp(20px, .6vw + 17px, 26px); }
.uses i { font-style: normal; }
.uses span { font-size: 15px; opacity: .84; }
@media (max-width: 820px) {
  .aios__grid { grid-template-columns: 1fr; }
  .aios__plate::after { background: linear-gradient(rgba(10, 6, 3, .74), rgba(10, 6, 3, .86) 50%, rgba(10, 6, 3, .94)); }
}

/* ---------- prose ---------- */
.prose { font-size: clamp(17px, .4vw + 15px, 19px); }
.prose p { margin-bottom: 1.15em; }
.prose h2 { font-size: clamp(25px, 1.3vw + 18px, 36px); margin: 1.6em 0 .6em; }
.prose h3 { font-size: clamp(20px, .5vw + 17px, 25px); margin: 1.5em 0 .5em; }
.prose blockquote { margin: 1.5em 0; padding: 0 0 0 20px; border-left: 2px solid var(--sand-deep); font-family: var(--display); font-size: 1.16em; }
.statelabel { display: inline-block; font-size: 13px; font-weight: 500; padding: 3px 11px; border-radius: 999px; border: 1px solid currentColor; line-height: 1.5; letter-spacing: .01em; }
.state--part { color: var(--sand); }
.state--closed { color: #BCC8C8; }
.place--day .state--closed { color: var(--stone-dk); }

.next-chapters { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 36px; }
.next-chapters a { display: block; padding: 20px 0 8px; border-top: 1px solid rgba(246, 241, 233, .32); text-decoration: none; }
.next-chapters a:hover strong { text-decoration: underline; text-underline-offset: 5px; }
.next-chapters strong { display: block; font-family: var(--display); font-weight: 500; font-size: clamp(20px, .6vw + 17px, 26px); margin-bottom: 4px; }
.next-chapters span { font-size: 15px; opacity: .86; }
.on-desk-next { margin-top: clamp(40px, 6vw, 70px); text-shadow: 0 1px 12px rgba(0, 0, 0, .9); }

.no-js .needs-js { display: none !important; }

/* ---------- footer ---------- */
.foot { position: relative; padding: clamp(50px, 6vw, 86px) 0 44px; font-size: 15px; background: linear-gradient(transparent, rgba(8, 14, 18, .86) 60px); }
.is-day .foot { background: var(--ink-900); }
.foot__inner { width: min(1240px, 100%); margin: 0 auto; padding: 0 var(--gutter); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; }
.foot__sign { width: 150px; height: auto; margin-bottom: 14px; filter: brightness(0) invert(.92); }
.foot__nav { display: flex; gap: clamp(32px, 6vw, 90px); }
.foot__nav li { margin-bottom: 6px; }
.foot__nav a { text-decoration: none; opacity: .86; }
.foot__nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- moved / not found ---------- */
.lost { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--bar-h) + 30px) 0 50px; position: relative; overflow: hidden; isolation: isolate; }
.lost__plate, .lost__plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.lost__plate { -webkit-mask-image: linear-gradient(#000 calc(100% - var(--melt)), transparent); mask-image: linear-gradient(#000 calc(100% - var(--melt)), transparent); }
.lost__plate::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 30, 37, .7), rgba(15, 30, 37, .55)); }
.lost .h1 { margin-bottom: .4em; max-width: 14em; }

/* A failed image leaves ground, not a hole, and the alt text takes over. */
.img-failed { background: linear-gradient(180deg, #1f3440, #33504f 55%, #182a33) !important; }
.img-failed img { opacity: 0; }

/* ---------- company ---------- */
.judgement__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.judgement__lines li { font-family: var(--display); font-size: clamp(30px, 3vw + 12px, 58px); line-height: 1.25; padding: .32em 0; color: rgba(246, 241, 233, .28); transition: color .8s var(--ease), text-shadow .8s; }
.judgement__lines li.is-lit { color: var(--ivory); text-shadow: 0 0 34px rgba(143, 189, 181, .3); }
.calm .judgement__lines li, .no-js .judgement__lines li { color: var(--ivory); }
@media (max-width: 860px) { .judgement__grid { grid-template-columns: 1fr; } }
.logbook { display: block; }
.handover .logbook { display: grid; grid-template-columns: minmax(230px, 3fr) minmax(0, 9fr); gap: clamp(18px, 3vw, 40px); align-items: start; }
.pinned { position: relative; padding: 20px 22px; color: var(--paper-ink); background: var(--paper) url(/assets/grounds/paper.webp); transform: rotate(-1.1deg); box-shadow: 0 2px 2px rgba(0, 0, 0, .4), 0 18px 34px rgba(0, 0, 0, .46); }
.pinned::before { content: ""; position: absolute; top: -8px; left: 50%; width: 76px; height: 22px; margin-left: -38px; background: rgba(216, 200, 160, .62); box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transform: rotate(1.5deg); }
.pinned__enquiry { margin: 0 0 14px; font-family: var(--display); font-size: clamp(19px, .6vw + 15px, 23px); line-height: 1.4; }
.pinned__facts { border: 0; margin: 0; padding: 0; }
.pinned__facts legend { padding: 0; font-weight: 600; font-size: 14px; color: var(--paper-soft); }
.pinned .check { padding: 7px 0; font-size: 15px; }
.check--away { margin-top: 6px; padding-top: 12px !important; border-top: 1px dashed var(--line-lt); }
.book--handover { width: 100%; }
.page { transition: filter .7s, opacity .7s; }
.page h3 { font-size: clamp(18px, .5vw + 15px, 22px); margin-bottom: 14px; }
.page__state { display: inline-block; font-size: 14px; font-weight: 600; padding: 3px 12px; border: 1.5px solid #8A6A2F; color: #6e5423; border-radius: 3px; transform: rotate(-1deg); margin-bottom: 14px; }
.page__state.is-go { border-color: #2F6B61; color: #24554d; }
.page__action { font-family: var(--display); font-size: clamp(20px, .8vw + 15px, 26px); line-height: 1.4; }
.page__owner { font-size: 15px; padding-top: 12px; border-top: 1px solid var(--line-lt); margin-bottom: 0; }
/* When Lin's away the head-page washes out: the ink runs and goes pale. */
.page--head.is-washed { filter: blur(.8px) saturate(.5); opacity: .55; }
.page--head.is-washed .page__state { border-color: #A23D1E; color: #8c3418; }
.status--on-stone[data-handover-status] { grid-column: 2; margin: 0; }
.carry { margin-top: clamp(28px, 4vw, 48px); }
.carry__body { margin-top: 24px; }
.book--carry { width: 100%; }
.carry__book { padding: 6px 0; counter-reset: b; }
.carry__book li { counter-increment: b; padding: 8px 0 8px 28px; position: relative; border-top: 1px solid var(--line-lt); }
.carry__book li:first-child { border-top: 0; }
.carry__book li::before { content: counter(b); position: absolute; left: 0; font-family: var(--display); color: #7a5a2c; }
.carry__book .is-new { font-weight: 600; }
.carry__book em { font-style: normal; font-size: 13px; font-weight: 400; color: #8c3418; margin-left: 8px; }
.carry__line { font-family: var(--display); font-size: clamp(22px, 1vw + 16px, 30px); margin: 14px 0 0; }
@media (max-width: 860px) {
  .handover .logbook { grid-template-columns: 1fr; }
  .status--on-stone[data-handover-status] { grid-column: 1; }
}
/* Dusk gathers behind a heading that sits on a bright sky. */
/* Three doors. */
.doors-scene { padding: 0 0 clamp(50px, 7vw, 90px); }
.doors-figure { position: relative; margin: 0; }
.doors-figure picture img { width: 100%; -webkit-mask-image: linear-gradient(transparent, #000 6%, #000 90%, transparent); mask-image: linear-gradient(transparent, #000 6%, #000 90%, transparent); }
.doors-figure__dim { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .5s; -webkit-mask-image: linear-gradient(transparent, #000 6%, #000 90%, transparent); mask-image: linear-gradient(transparent, #000 6%, #000 90%, transparent); }
[data-doors][data-on="wedo"] .doors-figure__dim { opacity: 1; background: radial-gradient(26% 46% at 15.3% 48%, transparent 40%, rgba(6, 10, 16, .66) 100%); }
[data-doors][data-on="cantrust"] .doors-figure__dim { opacity: 1; background: radial-gradient(22% 46% at 46% 48%, transparent 40%, rgba(6, 10, 16, .66) 100%); }
[data-doors][data-on="europe"] .doors-figure__dim { opacity: 1; background: radial-gradient(16% 46% at 65% 50%, transparent 40%, rgba(6, 10, 16, .66) 100%); }
.doors-figure__head { position: absolute; right: var(--edge); top: 12%; width: min(44%, 620px); text-align: right; }
.doors-figure__head .h1 { font-size: clamp(30px, 2.8vw + 10px, 56px); text-shadow: 0 2px 26px rgba(8, 12, 24, .9); }
/* The sky darkens where the heading crosses the top of the wall. */
.doors-figure::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 40%; pointer-events: none; background: linear-gradient(rgba(8, 12, 24, .62), rgba(8, 12, 24, .38) 46%, transparent); }
.doors-figure__head, .door-pins { z-index: 1; }
.door-pins { position: absolute; inset: 0; pointer-events: none; }
.door-pin { position: absolute; pointer-events: auto; width: 32px; height: 32px; margin: -16px 0 0 -16px; display: grid; place-items: center; font-size: 15px; font-weight: 600; text-decoration: none; color: #fff6e6; background: var(--terra); border: 1.5px solid #fff0dc; border-radius: 50%; box-shadow: 0 0 0 6px rgba(230, 164, 127, .24), 0 6px 18px rgba(0, 0, 0, .6); }
.door-pin--wedo { left: 15.3%; top: 46.8%; }
.door-pin--cantrust { left: 46%; top: 46.8%; }
.door-pin--europe { left: 64.9%; top: 48.9%; }
.doors-lede { max-width: 40em; }
.door-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 46px); margin-top: 22px; }
.door-note { padding-top: 18px; scroll-margin-top: calc(var(--bar-h) + 16px); border-top: 2px solid rgba(246, 241, 233, .24); transition: border-color .3s; }
.door-note:hover, .door-note:focus-within, .door-note.is-on { border-top-color: var(--terra-lit); }
.door-note h3 { display: flex; align-items: center; gap: 12px; font-size: clamp(25px, 1.1vw + 18px, 36px); margin-bottom: 6px; }
.door-note__state { font-size: 14px; font-weight: 500; color: var(--sand); margin-bottom: 10px; }
@media (max-width: 820px) { .door-notes { grid-template-columns: 1fr; } }
@media (max-aspect-ratio: 85/100) {
  .doors-figure__head { right: auto; left: var(--gutter); top: 6%; width: calc(100% - 2 * var(--gutter)); text-align: left; }
  .door-pin--wedo { left: 19.7%; top: 45.5%; }
  .door-pin--cantrust { left: 51%; top: 45.5%; }
  .door-pin--europe { left: 69.6%; top: 46%; }
  [data-doors][data-on="wedo"] .doors-figure__dim { background: radial-gradient(34% 22% at 19.7% 46%, transparent 40%, rgba(6, 10, 16, .66) 100%); }
  [data-doors][data-on="cantrust"] .doors-figure__dim { background: radial-gradient(22% 20% at 51% 46%, transparent 40%, rgba(6, 10, 16, .66) 100%); }
  [data-doors][data-on="europe"] .doors-figure__dim { background: radial-gradient(14% 16% at 69.6% 46%, transparent 40%, rgba(6, 10, 16, .66) 100%); }
}
.leaf--foothold .h1 { font-size: clamp(28px, 2vw + 16px, 46px); margin-bottom: .55em; }
.leaf__rule { border: 0; border-top: 1px solid var(--line-lt); margin: clamp(22px, 3vw, 36px) 0; }
.leaf--foothold .h3 { margin-bottom: .5em; }

/* ---------- projects ---------- */
.intro-sea { padding: clamp(60px, 8vw, 110px) 0; }
.loft-scene .sec-head { margin-bottom: 24px; }
.slip__tabs { display: inline-flex; padding: 4px; border: 1px solid rgba(246, 241, 233, .4); border-radius: 999px; margin-bottom: 18px; background: rgba(10, 6, 3, .4); }
.slip__tab, .fam__tab, .seg button { background: transparent; border: 0; padding: 9px 20px; min-height: 44px; border-radius: 999px; cursor: pointer; font-size: 15px; transition: background .2s, color .2s; }
.slip__tab[aria-pressed="true"] { background: var(--ivory); color: var(--ink-800); }
.slip__loft { margin-bottom: 20px; }
.loft { width: 100%; height: auto; overflow: visible; }
.loft .wl { stroke: rgba(246, 236, 214, .22); stroke-width: 1; fill: none; stroke-dasharray: 4 7; }
.loft .hull { fill: none; stroke: rgba(250, 240, 220, .9); stroke-width: 2.2; }
.loft .frame { stroke: rgba(250, 240, 220, .3); stroke-width: 1; }
.loft .strake { fill: transparent; stroke: rgba(250, 240, 220, .45); stroke-width: 1; transition: fill .6s var(--ease); }
.is-second .loft .strake--1 { fill: #A9733F; transition-delay: 0s; }
.is-second .loft .strake--2 { fill: #96623A; transition-delay: .1s; }
.is-second .loft .strake--3 { fill: #8B5A33; transition-delay: .2s; }
.is-second .loft .strake--4 { fill: #7B4E2C; transition-delay: .3s; }
.is-second .loft .strake--5 { fill: #6B4326; transition-delay: .4s; }
.no-js .loft .strake--1 { fill: #A9733F; } .no-js .loft .strake--2 { fill: #96623A; } .no-js .loft .strake--3 { fill: #8B5A33; } .no-js .loft .strake--4 { fill: #7B4E2C; } .no-js .loft .strake--5 { fill: #6B4326; }
.slip__body { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(26px, 5vw, 72px); text-shadow: 0 1px 10px rgba(0, 0, 0, .85); }
.slip__h { font-size: clamp(20px, .6vw + 16px, 25px); margin-bottom: 10px; color: #EBCF9F; }
.slip__parts li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 20px; padding: 11px 0; border-top: 1px solid rgba(246, 241, 233, .24); }
.slip__parts span { font-weight: 500; }
.slip__parts em { font-style: normal; opacity: .82; }
.slip__parts [data-inherit] { display: none; color: #EBCF9F; opacity: 1; font-weight: 500; }
.is-second .slip__parts [data-from-zero] { display: none; }
.is-second .slip__parts [data-inherit] { display: inline; }
.no-js .slip__parts [data-inherit] { display: inline; }
.no-js .slip__parts [data-inherit]::before { content: "→ "; }
.slip__ask li { font-family: var(--display); font-size: clamp(20px, .9vw + 15px, 27px); padding: 8px 0; border-top: 1px solid rgba(246, 241, 233, .24); }
.slip__note { margin: 14px 0 0; font-size: 15px; }
@media (max-width: 760px) { .slip__body { grid-template-columns: 1fr; } }
.boats-scene { padding: 0 0 clamp(50px, 7vw, 90px); }
.boats-figure { position: relative; margin: 0; }
.boats-figure picture img { width: 100%; -webkit-mask-image: linear-gradient(transparent, #000 8%, #000 90%, transparent); mask-image: linear-gradient(transparent, #000 8%, #000 90%, transparent); }
.boats-figure__head { position: absolute; left: 0; right: 0; top: 12%; }
.boats-figure__head .h1, .boats-figure__head .kicker { margin-left: min(20%, 230px); text-shadow: 0 2px 22px rgba(24, 14, 10, .85); }
.boat-pins { position: absolute; inset: 0; pointer-events: none; }
.boat-pin { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; display: grid; place-items: center; font-size: 14px; font-weight: 600; color: #fff6e6; background: var(--terra); border: 1.5px solid #fff0dc; border-radius: 50%; box-shadow: 0 0 0 5px rgba(230, 164, 127, .24), 0 6px 16px rgba(0, 0, 0, .55); }
.boat-pin--frame { left: 22.7%; top: 48%; }
.boat-pin--planked { left: 45.5%; top: 52%; }
.boat-pin--afloat { left: 68%; top: 44%; }
.boats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 36px); margin-top: 16px; }
.boat { padding-top: 16px; border-top: 2px solid rgba(246, 241, 233, .24); display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.boat h3 { display: flex; align-items: center; gap: 10px; font-size: clamp(22px, .7vw + 18px, 28px); }
.boat__where { font-size: 14px; font-weight: 500; color: var(--sand); margin: 0; }
.boat p:not(.boat__where) { margin: 0 0 6px; }
.boat--next { border-top-style: dashed; border-top-color: rgba(220, 199, 164, .6); }
@media (max-width: 980px) { .boats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .boats { grid-template-columns: 1fr; }
  .boats-figure__head { position: static; padding-top: 30px; padding-bottom: 12px; }
  .boats-figure__head .h1, .boats-figure__head .kicker { margin-left: 0; }
  .boat-pin { width: 24px; height: 24px; margin: -12px 0 0 -12px; font-size: 12px; }
}
.wait-scene__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(26px, 5vw, 70px); align-items: start; }
.wait-scene__grid > div:first-child { text-shadow: 0 2px 20px rgba(0, 0, 0, .8); }
.leaf--wait { width: 100%; padding: clamp(22px, 3vw, 38px); transform: rotate(.5deg); }
.waitbox fieldset { border: 0; padding: 0; margin: 0; }
.waitbox__out { margin-top: 16px; padding-top: 18px; border-top: 1px solid var(--line-lt); }
.stamp { display: inline-block; margin: 0 0 12px; padding: 6px 16px; font-family: var(--display); font-size: clamp(24px, 1.2vw + 18px, 34px); line-height: 1.2; color: #8c3418; border: 3px double currentColor; border-radius: 4px; transform: rotate(-2deg); }
[data-verdict="go"] .stamp { color: #24554d; }
[data-verdict="change"] .stamp { color: #6e5423; }
@media (max-width: 860px) { .wait-scene__grid { grid-template-columns: 1fr; } }
.brief-scene { padding-top: clamp(30px, 5vw, 70px); }
.brief__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 60px); align-items: start; }
.leaf--form { width: 100%; padding: clamp(22px, 3vw, 40px); }
.brief__sheet { display: block; width: 100%; padding: clamp(20px, 2.6vw, 34px); border: 0; font-size: 15px; line-height: 1.6; resize: vertical; transform: rotate(-.4deg); }
.brief__sheet::after { display: none; }
.brief__out { position: sticky; top: calc(var(--bar-h) + 16px); display: grid; gap: 14px; text-shadow: 0 1px 10px rgba(0, 0, 0, .85); }
.brief__out .kicker { margin: 0; color: #EBCF9F; }
.leaf .btn { background: var(--ink-800); color: var(--ivory); border-color: var(--ink-800); }
.leaf .btn--quiet { background: transparent; color: var(--paper-ink); border-color: rgba(42, 36, 24, .5); }
.leaf .btn--quiet:hover { background: rgba(42, 36, 24, .08); color: var(--paper-ink); }
.leaf .link { text-decoration-color: #7a5a2c; }
@media (max-width: 860px) { .brief__grid { grid-template-columns: 1fr; } .brief__out { position: static; } }

/* ---------- trading ---------- */
.two-questions { padding-bottom: clamp(30px, 5vw, 60px); }
.qs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); }
.q__no { font-family: var(--display); font-size: clamp(50px, 6vw, 96px); line-height: 1; margin-bottom: 12px; color: transparent; -webkit-text-stroke: 1px rgba(220, 199, 164, .55); }
.q .h2 { margin-bottom: .55em; color: var(--ivory); }
@media (max-width: 760px) { .qs { grid-template-columns: 1fr; } }
.scan { padding-top: clamp(50px, 6vw, 80px); }
.scan__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(26px, 5vw, 80px); align-items: center; }
.sonar-wrap { margin: 0; }
.sonar { width: 100%; height: auto; font-family: var(--body); }
.sonar__ring { fill: none; stroke: rgba(143, 189, 181, .3); stroke-width: 1; }
.sonar__spoke { stroke: rgba(143, 189, 181, .13); stroke-width: 1; }
.sonar__beam { stroke: rgba(143, 189, 181, .75); stroke-width: 1.2; }
.sonar__sweep { transform-origin: 300px 300px; animation: sonar 9s linear infinite; }
.calm .sonar__sweep { animation: none; transform: rotate(-42deg); }
@keyframes sonar { to { transform: rotate(360deg); } }
.sonar__force { font-family: var(--display); font-size: 21px; fill: var(--ivory); paint-order: stroke; stroke: rgba(7, 14, 23, .9); stroke-width: 4px; }
.sonar__asset circle { fill: rgba(143, 189, 181, .5); transition: fill .4s, r .4s; }
.sonar__asset text { font-size: 15px; fill: rgba(246, 241, 233, .8); paint-order: stroke; stroke: rgba(7, 14, 23, .9); stroke-width: 3px; }
.sonar__asset.is-on circle { fill: var(--sand); r: 8px; }
.sonar__you { fill: var(--terra-lit); }
[data-scan][data-view="tide"] .sonar__ring, [data-scan][data-view="both"] .sonar__ring { stroke: rgba(230, 164, 127, .4); }
[data-scan][data-view="priced"] .sonar__asset.is-on circle, [data-scan][data-view="both"] .sonar__asset.is-on circle { fill: var(--terra-lit); }
.scan__side .h2 { margin-bottom: .5em; }
.scan__evidence { border: 0; padding: 0; margin: 0 0 10px; }
.scan__card { padding: clamp(18px, 2.2vw, 28px); background: var(--paper) url(/assets/grounds/paper.webp); color: var(--paper-ink); transform: rotate(-.5deg); box-shadow: 0 16px 40px rgba(0, 0, 0, .55); min-height: 170px; }
.scan__state { font-family: var(--display); font-size: clamp(24px, 1.2vw + 17px, 34px); margin-bottom: 8px; line-height: 1.25; color: #7a3b1c; }
.scan__card .note-line { color: var(--paper-soft); opacity: 1; }
/* SVG type scales with its drawing, so a narrower drawing needs larger type to stay readable. */
@media (max-width: 1180px) { .sonar__force { font-size: 26px; } .sonar__asset text { font-size: 20px; } }
@media (max-width: 860px) {
  .scan__grid { grid-template-columns: 1fr; }
  .sonar-wrap { max-width: 460px; margin: 0 auto; width: 100%; }
  .sonar { overflow: visible; }
  .sonar__force { font-size: 30px; }
  .sonar__asset text { font-size: 27px; }
}
.lock-scene { overflow: hidden; }
.lock-scene__plate, .lock-scene__plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; z-index: -1; }
.lock-scene__plate { -webkit-mask-image: linear-gradient(transparent, #000 var(--melt), #000 calc(100% - var(--melt)), transparent); mask-image: linear-gradient(transparent, #000 var(--melt), #000 calc(100% - var(--melt)), transparent); }
.lock-scene__plate::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 12, 20, .42), rgba(6, 12, 20, .66) 44%, rgba(6, 12, 20, .84)); }
.lock-scene .sec-head .h1, .lock-scene .sec-head .lede { text-shadow: 0 2px 20px rgba(4, 8, 14, .9); }
.gate__desk { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 3vw, 44px); align-items: start; }
.gate__rig { display: grid; gap: 14px; }
.gate__chart { position: relative; background: rgba(6, 12, 20, .55); box-shadow: inset 0 0 0 1px rgba(246, 241, 233, .12); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.gate__chart canvas { width: 100%; display: block; }
.gate__stage { position: absolute; left: 14px; top: 10px; padding: 3px 12px; border-radius: 3px; font-size: 14px; font-weight: 500; background: rgba(220, 199, 164, .16); border: 1px solid rgba(220, 199, 164, .6); color: var(--sand); }
.gate__stage[data-state="3"] { background: rgba(143, 189, 181, .16); border-color: var(--teal-lit); color: var(--teal-lit); }
.gate__stage[data-state="4"], .gate__stage[data-state="5"] { background: rgba(201, 130, 99, .16); border-color: var(--terra-lit); color: var(--terra-lit); }
.gate__ctrl { display: flex; align-items: center; gap: 14px; }
.gate__ctrl input[type="range"] { flex: 1; min-width: 0; height: 44px; accent-color: var(--sand); cursor: pointer; }
.gate__ctrl .btn { min-width: 52px; padding: 8px 14px; }
.gate__record li { padding: 14px 18px; border-left: 3px solid var(--line-dk); margin-bottom: 8px; }
.gate__record p { margin-bottom: .4em; }
.gate__event { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; opacity: .78; margin-bottom: 4px !important; }
html[lang="zh-CN"] .gate__event { letter-spacing: .18em; }
.gate__head { font-family: var(--display); font-size: clamp(21px, .9vw + 16px, 28px); line-height: 1.3; }
.gate__chip { display: inline-block; vertical-align: 3px; font-family: var(--body); font-size: 13px; font-weight: 500; padding: 1px 9px; border-radius: 3px; border: 1px solid var(--sand); color: var(--sand); margin-right: 6px; }
.gate__chip--s3 { color: var(--teal-lit); border-color: var(--teal-lit); }
.gate__chip--s4, .gate__chip--s5 { color: var(--terra-lit); border-color: var(--terra-lit); }
.gate__inv { font-size: 15px; opacity: .88; }
.gate.is-live .gate__record li, .is-live .gate__record li { display: none; }
.is-live .gate__record li.is-on { display: block; border-left-color: var(--sand); background: rgba(6, 12, 20, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.note-line--foot { margin-top: 18px; }
@media (max-width: 900px) { .gate__desk { grid-template-columns: 1fr; } }
.fam__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.fam__tab { border: 1px solid var(--line-dk); color: var(--ivory); }
.fam__tab[aria-pressed="true"] { background: var(--ivory); color: var(--ink-800); border-color: var(--ivory); }
.fam__stage { background: rgba(4, 8, 14, .45); margin-bottom: 22px; box-shadow: inset 0 0 0 1px rgba(246, 241, 233, .1); }
.fam__stage canvas { width: 100%; display: block; }
.fam__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 36px); }
.fam h3 { font-size: clamp(21px, .6vw + 17px, 26px); margin-bottom: 12px; }
.fam strong { display: block; font-size: 13px; font-weight: 600; color: var(--sand); }
.fam p { margin-bottom: .7em; }
.is-live .fam { display: none; }
.is-live .fam.is-on { display: block; }
.is-live .fam__cards { grid-template-columns: 1fr; max-width: 46em; }
@media (max-width: 760px) { .fam__cards { grid-template-columns: 1fr; } }
.rulecard__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(26px, 5vw, 70px); align-items: start; }
.rulecard__grid > div:first-child { text-shadow: 0 2px 18px rgba(0, 0, 0, .9); }
.rulecard__grid .h1, .wait-scene__grid .h1 { margin-bottom: .4em; }
@media (max-width: 860px) { .rulecard__grid { grid-template-columns: 1fr; } }
.offers { overflow: hidden; }
.offers::before { content: ""; position: absolute; z-index: -1; right: 0; top: 0; width: 56%; height: min(100%, 1100px); background: url(/assets/plates/chapter-trading.webp) 84% 12% / auto 160% no-repeat; opacity: .72; -webkit-mask-image: linear-gradient(90deg, transparent, #000 58%), linear-gradient(transparent, #000 12%, #000 74%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 58%), linear-gradient(transparent, #000 12%, #000 74%, transparent); mask-composite: intersect; }
@media (max-width: 760px) { .offers::before { width: 100%; opacity: .34; } }
.staff { position: relative; max-width: 780px; padding-left: clamp(34px, 5vw, 64px); background: repeating-linear-gradient(180deg, rgba(220, 199, 164, .7) 0 2px, transparent 2px 24px) 0 0 / 22px 100% no-repeat, linear-gradient(rgba(220, 199, 164, .5), rgba(220, 199, 164, .5)) 0 0 / 2px 100% no-repeat; }
.staff li { padding: 16px 0 16px 0; border-top: 1px solid var(--line-dk); }
.staff li:first-child { border-top: 0; }
.staff h3 { font-size: clamp(23px, .9vw + 18px, 30px); margin-bottom: 4px; }
.staff p { margin: 0; max-width: 42em; }
.vs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 3vw, 44px); margin: clamp(36px, 5vw, 64px) 0 26px; }
.vs__col { padding-top: 16px; border-top: 2px solid rgba(220, 199, 164, .5); }
.vs__col h3 { font-size: clamp(22px, 1vw + 16px, 30px); margin-bottom: 12px; }
.vs__col strong { display: block; font-size: 13px; font-weight: 600; color: var(--sand); }
.nextline { max-width: 44em; }
.nextline .link { margin-left: 6px; }
@media (max-width: 680px) { .vs { grid-template-columns: 1fr; } }

/* ---------- residency: the one daylight chapter ---------- */
html:has(body.is-day) { background: #E7DBC1 url(/assets/grounds/paper.webp); }
.is-day main { color: var(--paper-ink); }
.place--day { color: var(--paper-ink); padding: clamp(50px, 7vw, 100px) 0; }
.is-day::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(90% 70% at 78% 0%, rgba(255, 244, 214, .72), transparent 72%), radial-gradient(70% 60% at 0% 100%, rgba(150, 118, 70, .2), transparent 70%); }
.is-day .bar.is-solid { background: rgba(25, 44, 53, .95); }
.place--day h1, .place--day h2, .place--day h3 { color: var(--paper-ink); }
.place--day .kicker { color: #7a5a2c; }
.place--day .btn { background: var(--ink-800); color: var(--ivory); }
.place--day .link { text-decoration-color: #7a5a2c; }
.place--day .next-chapters a { border-top-color: var(--line-lt); }
.place--day .check input { accent-color: #7a3b1c; }
.is-day .hero__stage { -webkit-mask-image: none; mask-image: none; }
/* The opening is still a scene, so its words stay light even though the page below is paper. */
.is-day .hero__copy { color: var(--ivory); }
.day-intro { padding-top: clamp(70px, 9vw, 120px); }
.day-intro__big { font-family: var(--display); font-size: clamp(28px, 2.2vw + 16px, 50px); line-height: 1.25; margin: .6em 0 0; color: #7a3b1c; }
.chart-sheet { position: relative; padding: clamp(18px, 3vw, 44px); background: #F4ECD9 url(/assets/grounds/paper.webp); box-shadow: 0 2px 0 #cdbf9f, 0 4px 0 #bdae8d, 0 30px 60px rgba(70, 55, 30, .34); border-radius: 2px; }
.chart-sheet::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(74, 61, 40, .5); pointer-events: none; }
.chart-sheet > * { position: relative; }
.chart-sheet__ctrl { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; margin-bottom: 14px; }
.seg { display: inline-flex; flex-wrap: wrap; padding: 4px; border: 1px solid var(--line-lt); border-radius: 999px; }
.seg button[aria-pressed="true"] { background: var(--ink-800); color: var(--ivory); }
.chart-sheet__who { font-family: var(--display); font-size: clamp(18px, .7vw + 14px, 23px); line-height: 1.45; margin-bottom: 4px; max-width: 46em; }
.chart-sheet__routes { width: 100%; height: auto; max-height: 170px; margin: 2px 0 10px; }
.chart-sheet__routes circle { fill: var(--ink-800); }
.chart-sheet__routes path { fill: none; stroke: #4a3d28; stroke-width: 2; stroke-dasharray: 6 6; transition: stroke .5s, opacity .5s, stroke-width .5s; }
.chart-sheet__routes path[data-state="look"] { stroke: #A23D1E; stroke-width: 3; stroke-dasharray: none; }
.chart-sheet__routes path[data-state="drop"] { opacity: .22; }
.chart-sheet__routes path[data-state="unknown"] { opacity: .55; }
.chart-sheet__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 30px); }
.chart-sheet__cols h3 { font-size: clamp(17px, .5vw + 14px, 21px); margin-bottom: 8px; padding-bottom: 6px; border-bottom: 2px solid var(--ink-800); }
.chart-sheet__cols [data-col="look"] h3 { border-color: #A23D1E; color: #8c3418; }
.chart-sheet__cols [data-col="drop"] h3 { border-color: rgba(36, 56, 66, .3); opacity: .7; }
.chart-sheet__cols li { padding: 6px 0; font-weight: 500; }
.chart-sheet__cols [data-col="drop"] li { opacity: .6; text-decoration: line-through; text-decoration-thickness: 1px; }
.chart-sheet__qs { margin-top: 20px; padding-top: 16px; border-top: 1px dashed rgba(36, 56, 66, .3); }
.chart-sheet__qs h3 { font-size: clamp(17px, .5vw + 14px, 21px); margin-bottom: 8px; }
.chart-sheet__qs li { padding: 5px 0 5px 22px; position: relative; }
.chart-sheet__qs li::before { content: "?"; position: absolute; left: 0; font-family: var(--display); color: #A23D1E; font-weight: 500; }
.sheet-dl { margin-top: 22px; }
@media (max-width: 600px) { .chart-sheet__cols { grid-template-columns: 1fr; } .seg { border-radius: 14px; } .seg button { border-radius: 10px; } }
.legs__list { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); padding-top: 22px; }
.legs__list::before { content: ""; position: absolute; left: 18px; right: 0; top: 40px; height: 0; border-top: 2px dashed rgba(122, 59, 28, .55); }
.legs__list li { position: relative; }
.legs__port { position: relative; display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 18px; font-family: var(--display); font-size: 18px; color: #fbf3e1; background: #7a3b1c; border-radius: 50%; }
.legs__list h3 { font-size: clamp(22px, .8vw + 17px, 29px); margin-bottom: 8px; }
.legs__list blockquote { margin: 0 0 12px; font-family: var(--display); font-size: 1.1em; line-height: 1.45; color: #6e5423; }
@media (max-width: 820px) { .legs__list { grid-template-columns: 1fr; } .legs__list::before { display: none; } }
.nextleg__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(26px, 5vw, 72px); align-items: start; }
.pencil-route { width: 100%; max-width: 520px; height: auto; margin: 6px 0 16px; }
.pencil-route circle { fill: #7a3b1c; }
.pencil-route path { fill: none; stroke: #5b5244; stroke-width: 2; stroke-dasharray: 7 6; stroke-linecap: round; }
.pencil-route__x { stroke-dasharray: none !important; stroke: #7a3b1c !important; stroke-width: 2.5 !important; }
.leaf--faq { width: 100%; padding: clamp(18px, 2.6vw, 32px); }
.faq details { border-top: 1px solid var(--line-lt); padding: 13px 0; }
.faq details:first-child { border-top: 0; }
.faq summary { cursor: pointer; font-weight: 500; line-height: 1.5; }
.faq p { margin: 10px 0 0; }
@media (max-width: 860px) { .nextleg__grid { grid-template-columns: 1fr; } }

/* ---------- school and career: one line down through green water ---------- */
.sound__ctrl { margin-bottom: 18px; }
.sound__list { display: grid; gap: 0; }
.sound__row { display: grid; grid-template-columns: minmax(150px, 1fr) 54px minmax(0, 2.2fr); gap: 8px clamp(14px, 2.6vw, 38px); padding: 0; min-height: 170px; align-items: stretch; }
.sound__req, .sound__find { padding: 24px 0; }
.sound__tag { font-size: 13px; opacity: .8; letter-spacing: .04em; }
.sound__req h3 { font-size: clamp(20px, .6vw + 16px, 26px); margin-top: 4px; }
.sound__line { position: relative; }
/* The same marked line runs through every row: no gaps, so it reads as one rope going down. */
.sound__line::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; margin-left: -2px; background: repeating-linear-gradient(180deg, #d9c8a4 0 3px, #a8926a 3px 6px), #bda77f; box-shadow: 0 0 10px rgba(0, 0, 0, .35); }
.sound__line::after { content: ""; position: absolute; left: 50%; top: 42%; width: 9px; height: 26px; margin-left: -4.5px; background: #8c4b2c; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .2); }
.sound__lead { position: absolute; left: 50%; width: 18px; height: 28px; margin-left: -9px; border-radius: 50% 50% 45% 45%; background: linear-gradient(160deg, #b3b6b2, #50554f); box-shadow: 0 4px 12px rgba(0, 0, 0, .5); top: 0; z-index: 1; transition: top 1.4s var(--ease); }
.sound__lead[data-depth="100"] { top: calc(100% - 30px); }
.sound__lead[data-depth="65"] { top: 62%; }
.sound__lead[data-depth="55"] { top: 52%; }
.sound__lead[data-depth="35"] { top: 32%; }
.sound__lead[data-depth="0"] { top: 0; }
.will-sound .sound__row:not(.is-sounded) .sound__lead { top: 0 !important; }
.sound__state { display: inline-block; font-weight: 500; font-size: 14px; padding: 2px 12px; border-radius: 3px; border: 1px solid currentColor; margin-bottom: 10px; }
.sound__state--full { color: #A9E6D8; }
.sound__state--part { color: var(--sand); }
.sound__state--clash { color: #F9D3BC; }
.sound__state--none { color: #C5D2D2; }
.sound__wlabel { display: block; font-size: 13px; opacity: .8; margin-bottom: 3px; font-family: var(--body); }
.sound__words { font-family: var(--display); font-size: clamp(18px, .6vw + 15px, 22px); line-height: 1.4; margin-bottom: 8px; }
.sound__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 26px; }
.sound__pair p { font-family: var(--display); font-size: clamp(17px, .4vw + 15px, 20px); line-height: 1.4; margin-bottom: 8px; }
.sound__pair p:first-child { color: #F9D3BC; }
.maya__limits { margin-top: 18px; max-width: 46em; }
@media (max-width: 760px) { .sound__row { grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; } .sound__req { grid-column: 2; padding-bottom: 0; } .sound__line { grid-row: 1 / span 2; grid-column: 1; } .sound__find { grid-column: 2; padding-top: 10px; } .sound__pair { grid-template-columns: 1fr; } }
.wider { padding-top: clamp(30px, 5vw, 60px); }
.lanes-out { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); margin-bottom: 20px; }
.lane h3 { margin-bottom: 8px; }
.lane__steps { counter-reset: s; margin-top: 12px; border-left: 2px dashed rgba(220, 199, 164, .55); }
.lane__steps li { counter-increment: s; position: relative; padding: 11px 0 11px 34px; }
.lane__steps li::before { content: counter(s); position: absolute; left: -13px; top: 11px; width: 24px; height: 24px; display: grid; place-items: center; font-size: 13px; color: #06282c; background: var(--sand); border-radius: 50%; }
@media (max-width: 760px) { .lanes-out { grid-template-columns: 1fr; } }

/* ---------- ideas, articles, privacy ---------- */
.ideas { padding-top: clamp(40px, 7vw, 90px); }
.ideas__list { display: grid; gap: clamp(22px, 3vw, 40px); }
.leaf--entry { width: min(900px, calc(100% - 2 * var(--gutter))); padding: 0; transform: rotate(-.3deg); transition: transform .35s var(--ease); }
.leaf--entry:hover { transform: rotate(0) translateY(-3px); }
.leaf--entry-small { width: min(700px, calc(100% - 2 * var(--gutter))); transform: rotate(.5deg); }
.leaf--entry a { display: block; padding: clamp(26px, 4vw, 60px); text-decoration: none; }
.leaf--entry .h1 { font-size: clamp(28px, 2.4vw + 14px, 50px); margin-bottom: .4em; }
.leaf--entry .h2 { margin-bottom: .4em; }
.article__head { position: relative; min-height: 78vh; min-height: 78svh; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; }
.article__plate, .article__plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.article__plate { -webkit-mask-image: linear-gradient(#000 calc(100% - var(--melt)), transparent); mask-image: linear-gradient(#000 calc(100% - var(--melt)), transparent); }
.article__plate::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 10, 6, .46) 0%, rgba(14, 10, 6, .34) 42%, rgba(14, 10, 6, .86) 100%); }
.article__title { padding-top: calc(var(--bar-h) + 40px); padding-bottom: 34px; }
.article__title .h1 { text-shadow: 0 2px 22px rgba(0, 0, 0, .75); }
.article__title a { color: inherit; text-decoration: none; }
.article__desk { padding-top: clamp(30px, 5vw, 60px); padding-bottom: clamp(30px, 5vw, 60px); }
.leaf--article { width: min(820px, calc(100% - 2 * var(--gutter))); }
.article__after { padding-top: clamp(40px, 5vw, 70px); text-shadow: 0 1px 12px rgba(0, 0, 0, .9); }
.after__ext { margin-top: 26px; }
.plain { padding-top: calc(var(--bar-h) + clamp(24px, 5vw, 60px)); }
.plain .h1 { margin-bottom: .4em; font-size: clamp(30px, 2.6vw + 14px, 52px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
/* "Less motion", chosen on the site, does what the device setting does. */
html.calm-chosen, .calm-chosen *, .calm-chosen *::before, .calm-chosen *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
.motion-toggle { min-height: 44px; padding: 6px 0; color: inherit; font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; cursor: pointer; opacity: .8; }
.motion-toggle:hover { opacity: 1; }
.motion-toggle:disabled { text-decoration: none; cursor: default; opacity: .62; }
.foot__motion { margin: 2px 0 0; }
.wants__motion { margin: 6px 0 0; padding: 0 8px; }
.wants__motion .motion-toggle { font-size: 14px; }
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 420ms ease both vtOut; }
::view-transition-new(root) { animation: 760ms var(--ease) both vtIn; }
@keyframes vtOut { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vtIn { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
@media print { .bar, .foot, .tools, .gauge, .sea, .ground { display: none !important; } body { background: #fff; color: #000; } }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- the line in sand, and what the tide leaves ---------- */
/* Without scripts or motion both lines simply read in order. With them, one wave crosses and takes the old line with it. */
.wash { position: relative; }
.wash__was, .wash__now { margin: 0; }
.wash__was { font-family: "Bradley Hand", "Hannotate SC", "HanziPen SC", "Kaiti SC", "STKaiti", "Segoe Print", cursive; font-weight: 500; color: #E9D2AB; letter-spacing: 0; }
html[lang="zh-CN"] .wash__was { font-weight: 500; letter-spacing: .01em; }
.wash__now { font-family: var(--display); color: var(--ivory); }
.wash__label { display: block; margin-bottom: .45em; font-family: var(--body); font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--sand); }
html[lang="zh-CN"] .wash__label { letter-spacing: .18em; }
.wash:not(.wash--live) .wash__was { margin-bottom: .55em; opacity: .86; font-size: .86em; }
.wash--live { display: grid; --f: calc(var(--k, 0) * 170% - 35%); }
.wash--live .wash__was, .wash--live .wash__now { grid-area: 1 / 1; min-width: 0; }
.wash--live .wash__was { -webkit-mask-image: linear-gradient(100deg, transparent calc(var(--f) - 12%), #000 calc(var(--f) + 12%)); mask-image: linear-gradient(100deg, transparent calc(var(--f) - 12%), #000 calc(var(--f) + 12%)); }
.wash--live .wash__now { -webkit-mask-image: linear-gradient(100deg, #000 calc(var(--f) - 12%), transparent calc(var(--f) + 12%)); mask-image: linear-gradient(100deg, #000 calc(var(--f) - 12%), transparent calc(var(--f) + 12%)); }

/* ---------- a pinned passage ---------- */
.scene { position: relative; }
.scene--4 { --n: 4; }
.scene__stage { position: relative; }
.scene__world { position: relative; }
.scene__plate, .scene__plate img { width: 100%; height: auto; }
.scene__plate { background: linear-gradient(180deg, #1f3440, #33504f 55%, #182a33); }
.scene__gl { display: none; }
.scene__veil { display: none; }
.scene__beats { padding: clamp(36px, 6vw, 70px) var(--gutter); max-width: 1240px; margin: 0 auto; }
.beat { max-width: 40em; margin-bottom: clamp(36px, 6vw, 70px); }
.beat:last-child { margin-bottom: 0; }
.beat h2 { font-size: clamp(25px, 2.4vw + 14px, 50px); line-height: 1.26; }
html[lang="zh-CN"] .beat h2 { font-size: clamp(24px, 2.2vw + 14px, 46px); line-height: 1.42; }
.beat__say { font-family: var(--display); color: var(--ivory); }
.beat__say--big { font-size: clamp(34px, 5vw + 12px, 92px) !important; }
.beat__sub { margin: .7em 0 0; font-size: clamp(17px, .7vw + 14px, 23px); color: #F5E6CC; }
.beat__sub--big { font-family: var(--display); font-size: clamp(24px, 2vw + 14px, 44px); line-height: 1.32; }
html:not(.js) .rope, .calm .rope { display: none; }
.scene--rope .rope { display: none; }
/* Reading order is still right on the daylight page, on paper. */
html:not(.js) .is-day .scene .beat__say, .calm .is-day .scene .beat__say, html:not(.js) .is-day .scene .wash__now, .calm .is-day .scene .wash__now { color: var(--paper-ink); }
html:not(.js) .is-day .scene .wash__was, .calm .is-day .scene .wash__was { color: #7a5a2c; }
html:not(.js) .is-day .scene .beat__sub, .calm .is-day .scene .beat__sub { color: #5F533E; }
html:not(.js) .is-day .scene .kicker, .calm .is-day .scene .kicker { color: #7a5a2c; }

.js:not(.calm) .scene { height: calc(var(--n, 4) * 125vh); height: calc(var(--n, 4) * 125lvh); }
.js:not(.calm) .scene__stage { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; overflow: clip; -webkit-mask-image: linear-gradient(transparent, #000 var(--melt), #000 calc(100% - var(--melt)), transparent); mask-image: linear-gradient(transparent, #000 var(--melt), #000 calc(100% - var(--melt)), transparent); }
.js:not(.calm) .scene__world { position: absolute; inset: 0; will-change: transform; }
.js:not(.calm) .scene__plate, .js:not(.calm) .scene__plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The still and the live water fit the frame a little differently, so the hand-over is quick: a slow fade would show both at once. */
.js:not(.calm) .scene__gl { display: block; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .28s ease; }
/* A link to a pinned passage lands with it filling the screen, not with a strip of the section before it. */
.scene, .walk { scroll-margin-top: calc(-1 * (var(--bar-h) + 12px)); }
.scene--ready .scene__gl { opacity: 1 !important; }
.js:not(.calm) .scene__veil { display: block; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(8, 12, 16, .3), transparent 26%, rgba(8, 12, 16, .3) 50%, rgba(8, 12, 16, .84) 86%); }
.js:not(.calm) .scene__beats { position: absolute; inset: 0; max-width: none; margin: 0; padding: calc(var(--bar-h) + 16px) var(--edge) calc(100lvh - 100svh + var(--melt) + clamp(22px, 5vh, 56px)); display: grid; align-items: end; }
.js:not(.calm) .beat { grid-area: 1 / 1; margin: 0; max-width: min(44em, 100%); opacity: 0; visibility: hidden; transform: translateY(calc(var(--rise, 0) * 1px)); text-shadow: 0 2px 24px rgba(4, 8, 12, .82), 0 1px 3px rgba(4, 8, 12, .5); }
.js:not(.calm) .beat:first-child { opacity: 1; visibility: visible; }
.js:not(.calm) .beat .kicker { color: #F5E2C2; }
/* A wide world moves under a still camera, from one thing in the place to the next. */
.js:not(.calm) .scene--pan .scene__world { right: auto; width: max(128vw, calc(100lvh * 1.777)); transform: translate3d(calc(var(--p, 0) * (100vw - max(128vw, calc(100lvh * 1.777)))), 0, 0); }
/* Scaled here only as the fallback before the water is ready: the live canvas moves in depth instead, because resizing it would reallocate it every frame. */
.js:not(.calm) .scene--push .scene__plate { transform: scale(calc(1.02 + var(--p, 0) * .12)); transform-origin: 60% 42%; }
/* From the view out of the window, down to the routes on the table. */
.js:not(.calm) .scene--down .scene__world { bottom: auto; height: 150lvh; transform: translate3d(0, calc(var(--p, 0) * -33.34%), 0); }
.js:not(.calm) .scene--down .scene__plate img { object-position: 42% 50%; }
.is-day .scene .kicker { margin-bottom: 14px; }
/* A long first beat still has to fit between the bar and the bottom of a short screen. */
@media (max-width: 380px), (max-height: 640px) {
  .js:not(.calm) .beat h2 { font-size: 21px; line-height: 1.3; }
  html[lang="zh-CN"].js:not(.calm) .beat h2 { font-size: 20px; line-height: 1.45; }
  .js:not(.calm) .beat__say--big { font-size: 30px !important; }
  .js:not(.calm) .beat__sub { font-size: 15px; line-height: 1.5; }
  .js:not(.calm) .beat__sub--big { font-size: 19px; }
  .js:not(.calm) .beat .kicker { margin-bottom: 8px; }
}
@media (max-height: 480px) {
  .js:not(.calm) .beat h2 { font-size: 18px; }
  html[lang="zh-CN"].js:not(.calm) .beat h2 { font-size: 17px; }
  .js:not(.calm) .beat__say--big { font-size: 24px !important; }
  .js:not(.calm) .beat__sub, .js:not(.calm) .beat__sub--big { font-size: 14px; margin-top: .4em; }
  .js:not(.calm) .beat .kicker { display: none; }
  .js:not(.calm) .scene__beats { padding-bottom: calc(100lvh - 100svh + var(--melt) + 8px); }
  .walk-live .walk__name { font-size: 22px; }
  .walk-live .walk__stone .wash__now, .walk-live .walk__stone .wash__was { font-size: 15px; }
  .walk-live .walk__intro .h1 { font-size: 24px; }
  .walk-live .walk__intro .lede { font-size: 14px; }
  .walk-live .walk__end { font-size: 26px; }
  .walk-live .walk__ticks { display: none; }
  .walk-live .walk__stone { width: auto; right: var(--edge); bottom: calc(100lvh - 100svh + var(--melt)); }
}
.decision .check input { accent-color: #7a3b1c; }

/* One line going straight down through the water, the lead dropping with you. */
.js:not(.calm) .scene--rope .scene__stage { -webkit-mask-image: none; mask-image: none; }
.js:not(.calm) .scene--rope .rope { display: block; position: absolute; left: max(calc(var(--edge) + 6px), 20px); top: 0; bottom: 0; width: 4px; }
.js:not(.calm) .scene--rope .rope::before { content: ""; position: absolute; left: 0; top: 0; width: 4px; height: calc(10% + var(--p, 0) * 78%); background: repeating-linear-gradient(180deg, #d9c8a4 0 3px, #a8926a 3px 6px), #bda77f; box-shadow: 0 0 12px rgba(0, 0, 0, .35); }
.js:not(.calm) .scene--rope .rope__lead { position: absolute; left: 2px; top: calc(10% + var(--p, 0) * 78%); width: 18px; height: 28px; margin-left: -9px; border-radius: 50% 50% 45% 45%; background: linear-gradient(160deg, #b3b6b2, #50554f); box-shadow: 0 4px 12px rgba(0, 0, 0, .5); }
.js:not(.calm) .scene--rope .scene__beats { padding-left: calc(max(calc(var(--edge) + 6px), 20px) + clamp(28px, 4vw, 60px)); align-items: center; }

/* ---------- the walk out along the causeway ---------- */
.walk { position: relative; }
.walk__stage { position: relative; }
.walk__plate, .walk__plate img { width: 100%; height: auto; }
.walk__gl, .walk__veil, .walk__marker, .walk__ticks, .walk__skip, .walk__end { display: none; }
.walk__intro { padding: clamp(30px, 5vw, 60px) var(--gutter) 10px; max-width: 1240px; margin: 0 auto; }
.walk__intro .h1 { margin-bottom: .35em; }
.walk__stones { padding: 10px var(--gutter) clamp(40px, 6vw, 80px); max-width: 1240px; margin: 0 auto; display: grid; gap: clamp(22px, 3vw, 36px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.walk__stone { padding-top: 14px; border-top: 1px solid var(--line-dk); }
.walk__name { font-size: clamp(22px, 1vw + 17px, 30px); margin-bottom: 10px; color: #F5E6CC; }
.walk__stone .wash__now, .walk__stone .wash__was { font-size: 1.04em; line-height: 1.55; }

.walk-live .walk { height: 620vh; height: 620lvh; }
.walk-live .walk__stage { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; overflow: clip; background: var(--ink-800); -webkit-mask-image: linear-gradient(transparent, #000 var(--melt), #000 calc(100% - var(--melt)), transparent); mask-image: linear-gradient(transparent, #000 var(--melt), #000 calc(100% - var(--melt)), transparent); }
.walk-live .walk__plate, .walk-live .walk__plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.walk-live .walk__gl { display: block; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .28s ease; }
.walk--ready .walk__gl { opacity: 1; }
.walk-live .walk__veil { display: block; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(8, 10, 16, .62) 0, rgba(8, 10, 16, .18) 30%, transparent 44%, rgba(8, 10, 16, .55) 64%, rgba(8, 10, 16, .9) 92%); }
.walk-live .walk__intro { position: absolute; left: 0; right: 0; top: calc(var(--bar-h) + clamp(10px, 5vh, 56px)); padding: 0 var(--edge); max-width: none; transform: translateY(calc(var(--rise, 0) * 1px)); text-shadow: 0 2px 26px rgba(8, 10, 16, .85); }
.walk-live .walk__intro .h1 { font-size: clamp(32px, 4vw + 14px, 84px); max-width: 14em; }
.walk-live .walk__intro .lede { max-width: 32em; }
.walk-live .walk__stones { position: absolute; left: 0; right: 0; bottom: 0; display: block; max-width: none; margin: 0; padding: 0; height: 100%; pointer-events: none; }
.walk-live .walk__stone { position: absolute; left: var(--edge); bottom: calc(100lvh - 100svh + var(--melt) + clamp(40px, 8vh, 90px)); width: min(46em, calc(100vw - 2 * var(--edge) - 170px)); padding: 0; border: 0; opacity: 0; visibility: hidden; text-shadow: 0 2px 22px rgba(4, 6, 10, .9), 0 1px 3px rgba(4, 6, 10, .6); }
.walk-live .walk__name { font-size: clamp(32px, 3.6vw + 14px, 72px); margin-bottom: .32em; color: var(--ivory); }
.walk-live .walk__stone .wash__now, .walk-live .walk__stone .wash__was { font-size: clamp(19px, 1vw + 15px, 30px); line-height: 1.4; }
.walk-live .walk__end { display: block; position: absolute; left: var(--edge); right: var(--edge); top: 50%; margin: 0; font-family: var(--display); font-size: clamp(34px, 4.6vw + 12px, 88px); line-height: 1.24; color: var(--ivory); opacity: 0; visibility: hidden; transform: translateY(calc(-50% + var(--rise, 0) * 1px)); text-shadow: 0 2px 34px rgba(4, 6, 10, .95), 0 1px 4px rgba(4, 6, 10, .6); }
.walk-live .walk__marker { display: block; position: absolute; left: 0; top: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--terra-lit); box-shadow: 0 0 0 7px rgba(230, 164, 127, .28), 0 0 26px 8px rgba(230, 164, 127, .55); opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.walk-live .walk__ticks { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; position: absolute; right: var(--edge); bottom: calc(100lvh - 100svh + var(--melt) + 28px); }
.walk__tick { display: block; padding: 5px 2px 5px 12px; background: none; border: 0; border-right: 2px solid rgba(246, 241, 233, .28); color: rgba(246, 241, 233, .68); font-size: 14px; cursor: pointer; text-shadow: 0 1px 8px #000; transition: color .25s, border-color .25s; }
.walk__tick { padding-right: 10px; }
.walk__tick:hover { color: var(--ivory); }
.walk__tick.is-past { border-right-color: var(--sand); }
.walk__tick.is-on { color: #fff; border-right-color: var(--terra-lit); font-weight: 600; }
.walk-live .walk__skip { display: inline-flex; gap: 8px; position: absolute; right: var(--edge); top: calc(var(--bar-h) + 10px); padding: 7px 14px; border-radius: 999px; font-size: 13px; text-decoration: none; color: var(--ivory); background: rgba(10, 14, 18, .45); border: 1px solid rgba(246, 241, 233, .32); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
@media (max-width: 760px), (max-aspect-ratio: 85/100) {
  .walk-live .walk__ticks { flex-direction: row; left: var(--edge); right: var(--edge); bottom: calc(100lvh - 100svh + 14px); gap: 4px; align-items: stretch; }
  .walk__tick { flex: 1 1 0; min-width: 0; min-height: 28px; padding: 0; border: 0; font-size: 0; position: relative; }
  .walk__tick::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: rgba(246, 241, 233, .34); }
  .walk__tick.is-past::after { background: var(--sand); }
  .walk__tick.is-on::after { background: var(--terra-lit); height: 5px; margin-top: -2.5px; }
  .walk-live .walk__stone { width: auto; right: var(--edge); bottom: calc(100lvh - 100svh + 56px); }
  .walk-live .walk__intro { top: calc(var(--bar-h) + 54px); }
  .walk-live .walk__skip { font-size: 12px; padding: 5px 11px; }
  .walk-live .walk__veil { background: linear-gradient(180deg, rgba(8, 10, 16, .62) 0, rgba(8, 10, 16, .22) 28%, transparent 38%, rgba(8, 10, 16, .66) 58%, rgba(8, 10, 16, .94) 90%); }
}

/* ---------- the answer ---------- */
.answer { padding-top: clamp(70px, 10vw, 140px); }
.answer__ask { font-family: var(--display); font-size: clamp(24px, 1.8vw + 15px, 40px); color: var(--sand); margin: 0 0 .5em; }
.answer__line { font-size: clamp(38px, 6.2vw + 8px, 118px); line-height: 1.14; color: var(--ivory); margin-bottom: .5em; text-shadow: 0 0 44px rgba(143, 189, 181, .26); }
html[lang="zh-CN"] .answer__line { line-height: 1.26; }
.answer__lede { max-width: 38em; }
.answer__wider { margin-top: 1em; max-width: 34em; }

.morning { margin-top: clamp(40px, 6vw, 80px); padding: clamp(20px, 3vw, 44px); background: rgba(6, 14, 18, .5); box-shadow: inset 0 0 0 1px rgba(246, 241, 233, .12); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.morning__head { max-width: 46em; margin-bottom: clamp(18px, 2.4vw, 30px); }
.morning__head .h2 { margin-bottom: .4em; }
.morning__desk { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(18px, 3vw, 44px); align-items: start; }
.morning__night { position: relative; padding-left: 16px; border-left: 2px solid rgba(143, 189, 181, .45); font-size: 15px; }
.morning__night li { padding: 7px 0; opacity: .86; }
.morning__night li.is-rule { opacity: 1; color: #F5D9AE; font-weight: 500; }
.morning__deck { display: grid; gap: 12px; }
.decision { padding: clamp(14px, 1.8vw, 22px); color: var(--paper-ink); background: var(--paper) url(/assets/grounds/paper.webp); box-shadow: 0 8px 22px rgba(0, 0, 0, .42); }
.decision__ask { margin: 0 0 2px; font-family: var(--display); font-size: clamp(19px, .6vw + 16px, 24px); line-height: 1.35; }
.decision__why { margin: 0 0 12px; font-size: 14px; color: var(--paper-soft); }
.decision__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.decision__opt { min-height: 44px; padding: 8px 14px; border-radius: 6px; border: 1px solid rgba(42, 36, 24, .45); background: transparent; color: var(--paper-ink); cursor: pointer; font-size: 15px; text-align: left; transition: background .18s, color .18s; }
.decision__opt:hover { background: rgba(42, 36, 24, .08); }
.decision__opt[aria-pressed="true"] { background: var(--ink-800); color: var(--ivory); border-color: var(--ink-800); }
.decision :focus-visible { outline-color: #7a3b1c; }
.decision__rule { margin-top: 8px; padding-bottom: 0; font-size: 15px; }
.morning__ctrl { margin-top: clamp(16px, 2vw, 24px); }
.morning.is-clear .morning__deck { display: none; }
.morning.is-clear .morning__desk { grid-template-columns: 1fr; }
.morning.is-clear .morning__night { font-size: clamp(17px, .5vw + 15px, 20px); }
.morning__status { min-height: 1.5em; }
@media (max-width: 820px) { .morning__desk { grid-template-columns: 1fr; } .morning__night { order: 2; } }

/* ---------- your first stone ---------- */
.stones-tool__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(20px, 4vw, 60px); align-items: start; }
.stones-form { padding: clamp(18px, 2.4vw, 32px); }
.stones-form__row { border: 0; padding: 10px 0; margin: 0; border-top: 1px solid var(--line-lt); }
.stones-form__row:first-child { border-top: 0; }
.stones-form__row legend { padding: 0 0 6px; font-family: var(--display); font-size: clamp(18px, .5vw + 15px, 22px); }
.chips--paper .chip span { border-color: rgba(42, 36, 24, .42); color: var(--paper-ink); font-size: 14px; padding: 6px 11px; }
.chips--paper .chip input:checked + span { background: var(--ink-800); color: var(--ivory); border-color: var(--ink-800); box-shadow: none; }
.chips--paper .chip input:focus-visible + span { outline-color: #7a3b1c; }
.place--day .chips--paper .chip span { color: var(--paper-ink); }
.place--day .chips--paper .chip input:checked + span { color: var(--ivory); }
.stones-out { position: sticky; top: calc(var(--bar-h) + 16px); text-shadow: 0 1px 12px rgba(0, 0, 0, .85); }
.stones-out__empty { font-family: var(--display); font-size: clamp(20px, 1vw + 16px, 28px); }
.stones-out__name { color: #F5E6CC; margin-bottom: .3em; }
.stones-out__why { font-size: clamp(16px, .4vw + 14px, 18px); }
.stones-out__step strong { display: block; color: #F5E2C2; font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.stones-out__step span { display: block; }
.stones-out__next { margin: 0 0 10px; }
.stones-out__next li { padding: 6px 0; border-top: 1px solid rgba(246, 241, 233, .22); }
.stones-out__text { display: block; width: 100%; padding: 12px; margin: 12px 0 14px; border-radius: 4px; border: 0; color: var(--paper-ink); background: var(--paper) url(/assets/grounds/paper.webp); font-size: 14px; line-height: 1.55; resize: vertical; text-shadow: none; }
@media (max-width: 900px) { .stones-tool__grid { grid-template-columns: 1fr; } .stones-out { position: static; } }

/* ---------- who helps with what ---------- */
.doors-pick { border: 0; padding: 0; margin: 16px 0 6px; }
.doors-pick legend { padding: 0; margin-bottom: 8px; font-weight: 500; }
.doors-rule { margin-top: clamp(22px, 3vw, 38px); padding: 16px 20px; max-width: 46em; border-left: 3px solid var(--terra-lit); background: rgba(10, 14, 18, .35); font-family: var(--display); font-size: clamp(18px, .6vw + 15px, 23px); line-height: 1.45; }
.preview-tag { display: inline-block; margin-left: 8px; padding: 0 8px; border: 1px solid currentColor; border-radius: 3px; font-size: 12px; font-weight: 500; line-height: 1.6; vertical-align: 2px; opacity: .78; white-space: nowrap; }
.who-helps { margin-top: clamp(30px, 5vw, 60px); max-width: 44em; text-shadow: 0 1px 12px rgba(0, 0, 0, .9); }
.who-helps .h3 { margin-bottom: .4em; }
.who-list { margin: 20px 0 16px; }
.who-list li { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid var(--line-lt); }
.who-list strong { font-family: var(--display); font-size: clamp(20px, .6vw + 17px, 25px); font-weight: 500; }
.who-list .link { justify-self: start; }
.who__links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; margin: 0; }
.who-is-who__rule { margin-top: clamp(26px, 4vw, 50px); }
.who-is-who__rule .lede { max-width: 40em; padding-left: 18px; border-left: 3px solid var(--terra-lit); }
.boats-scene.place--desk { padding: clamp(60px, 8vw, 100px) 0; }
.boats-scene .boat { text-shadow: 0 1px 10px rgba(0, 0, 0, .85); }

/* ---------- trading: the rings, and the desk's own door ---------- */
.scan__layers { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.scan__layer { min-height: 44px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-dk); background: transparent; color: var(--ivory); cursor: pointer; font-size: 14px; transition: background .2s, color .2s; }
.scan__layer[aria-pressed="true"] { background: var(--sand); color: #17222a; border-color: var(--sand); }
.scan__asks { margin-bottom: 18px; }
.scan__asks li { padding: 8px 0; }
.scan__asks strong { display: block; font-family: var(--display); font-weight: 500; font-size: clamp(19px, .5vw + 16px, 23px); color: #F5E6CC; }
.scan.is-live .scan__asks li { display: none; }
.scan.is-live .scan__asks li.is-on { display: block; }
[data-layer="0"] .sonar__ring--0, [data-layer="1"] .sonar__ring--1, [data-layer="2"] .sonar__ring--2, [data-layer="3"] .sonar__ring--3 { stroke: var(--sand); stroke-width: 2.5; }
.sonar__ring { transition: stroke .4s, stroke-width .4s; }
.two-questions__door { margin: 4px 0 0; }
.desk-door { padding-bottom: clamp(20px, 3vw, 40px); }
.desk-door__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 44px); }
.desk-door__list li { padding-top: 16px; border-top: 2px solid rgba(220, 199, 164, .5); }
.desk-door__list h3 { font-size: clamp(22px, .8vw + 17px, 28px); margin-bottom: 8px; }
.desk-door__list .btn { margin-top: 2px; }
.desk-door__list .preview-tag { display: block; width: max-content; margin: 10px 0 0; }
.desk-door__back { margin-top: 22px; }
@media (max-width: 820px) { .desk-door__list { grid-template-columns: 1fr; } }

/* ---------- residency: the compass and the radar ---------- */
.compass__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(20px, 4vw, 56px); align-items: start; }
.compass__q { border: 0; padding: 0 0 18px; margin: 0; }
.compass__q legend { padding: 0 0 8px; font-family: var(--display); font-size: clamp(19px, .6vw + 16px, 24px); }
.compass__fixed input { background: rgba(255, 252, 244, .72); }
.compass__empty { margin: 0; font-family: var(--display); font-size: clamp(19px, .6vw + 16px, 24px); color: #6e5423; }
.compass__actions { margin-top: 18px; }
.compass .sheet-dl { margin-top: 16px; }
@media (max-width: 900px) { .compass__grid { grid-template-columns: 1fr; } }
.radar__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 4vw, 60px); align-items: start; }
.radar__form { display: grid; gap: 10px; padding: clamp(18px, 2.4vw, 30px); }
.radar__row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 4px 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line-lt); }
.radar__row .field__msg { grid-column: 1 / -1; min-height: 0; }
.radar__row .field__msg:empty { display: none; }
.field input[type="date"] { width: 100%; padding: 11px 12px; border-radius: 6px; border: 1px solid rgba(42, 36, 24, .34); background: rgba(255, 252, 244, .72); color: var(--paper-ink); font-size: 16px; min-height: 48px; }
.field--bad input[type="date"] { border-color: #93351A; box-shadow: 0 0 0 1px #93351A; }
.radar__leads { display: flex; flex-wrap: wrap; gap: 2px 18px; border: 0; padding: 2px 0; margin: 0; }
.radar__leads legend { padding: 0; font-weight: 500; font-size: 15px; width: 100%; }
.radar__out { margin-top: 18px; padding: clamp(16px, 2vw, 26px); background: #F4ECD9 url(/assets/grounds/paper.webp); box-shadow: 0 2px 0 #cdbf9f, 0 16px 34px rgba(70, 55, 30, .28); }
.radar__timeline { margin-bottom: 14px; max-height: 340px; overflow: auto; }
.radar__timeline li { display: grid; grid-template-columns: 7.4em minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline; padding: 7px 0; border-top: 1px dashed rgba(36, 56, 66, .25); font-size: 15px; }
.radar__timeline li:first-child { border-top: 0; }
.radar__timeline time { font-variant-numeric: tabular-nums; color: #6e5423; }
.radar__timeline em { font-style: normal; font-size: 13px; color: var(--paper-soft); }
.radar__timeline .is-day { font-weight: 600; }
.radar__timeline .is-day em { color: #8c3418; }
.radar__tool > .fine { margin-top: 12px; }
@media (max-width: 900px) { .radar__grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .radar__row { grid-template-columns: 1fr; } .radar__timeline li { grid-template-columns: 1fr auto; } .radar__timeline time { grid-column: 1 / -1; } }

/* ---------- school and career: one line of your own ---------- */
.my-line__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(20px, 4vw, 56px); align-items: start; }
.my-line__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.my-line__out { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 14px; position: sticky; top: calc(var(--bar-h) + 16px); }
.my-line__rope { position: relative; min-height: 340px; }
.my-line__rope::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; margin-left: -2px; background: repeating-linear-gradient(180deg, #d9c8a4 0 3px, #a8926a 3px 6px), #bda77f; }
.my-line__wait { font-family: var(--display); font-size: clamp(20px, 1vw + 16px, 28px); }
.my-line__why { margin: 0 0 12px; }
.my-line__h { font-size: clamp(18px, .4vw + 15px, 21px); margin: 12px 0 6px; color: var(--sand); }
.my-line__qs li { padding: 5px 0; }
.my-line__result .form__row { margin-top: 14px; }
.my-line__result .fine { margin-top: 14px; }
@media (max-width: 900px) { .my-line__grid { grid-template-columns: 1fr; } .my-line__out { position: static; } .my-line__rope { min-height: 240px; } }
@media (max-width: 560px) { .my-line__row { grid-template-columns: 1fr; } }

/* ---------- how, and home ---------- */
.aios__line { font-family: var(--display); font-size: clamp(26px, 2.6vw + 14px, 56px); line-height: 1.28; margin: 0 0 clamp(30px, 5vw, 60px); max-width: 22em; color: #F5E6CC; text-shadow: 0 2px 22px rgba(10, 6, 3, .9); }
.kinds-scene__cta { margin-top: 26px; }
.is-home #shores { margin-top: calc(-1 * var(--melt)); padding-top: calc(var(--melt) + clamp(70px, 10vh, 120px)); z-index: 1; }
.shores__head { max-width: 22em; margin-bottom: clamp(24px, 4vw, 54px); text-shadow: 0 2px 22px rgba(0, 0, 0, .8); }
.shore a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px clamp(14px, 3vw, 40px); align-items: center; padding: clamp(16px, 2.4vw, 28px) 0; border-top: 1px solid rgba(246, 241, 233, .24); text-decoration: none; text-shadow: 0 1px 16px rgba(0, 0, 0, .9); transition: padding .3s var(--ease); }
.shore:last-child a { border-bottom: 1px solid rgba(246, 241, 233, .24); }
.shore a:hover, .shore a:focus-visible { padding-left: 12px; }
.shore .wash__was, .shore .wash__now { font-size: clamp(22px, 2.6vw + 10px, 50px); line-height: 1.26; }
.shore__name { font-size: 15px; font-weight: 500; color: #F5E2C2; white-space: nowrap; }
.shore__name i { font-style: normal; }
@media (max-width: 620px) { .shore a { grid-template-columns: 1fr; } }

/* ---------- about: the table, and a film only when there is one ---------- */
.table-talk .sec-head .h1 { max-width: 18em; }
.table-talk__list { max-width: 860px; color: var(--paper-ink); background: var(--paper) url(/assets/grounds/paper.webp); box-shadow: 0 1px 1px rgba(0, 0, 0, .35), 0 12px 24px rgba(0, 0, 0, .34), 0 40px 80px rgba(0, 0, 0, .42); padding: clamp(10px, 2vw, 26px) clamp(18px, 3.4vw, 50px); }
.talk { border-top: 1px solid var(--line-lt); }
.talk:first-child { border-top: 0; }
.talk__q { cursor: pointer; padding: clamp(14px, 1.8vw, 22px) 26px clamp(14px, 1.8vw, 22px) 0; font-family: var(--display); font-size: clamp(20px, .9vw + 16px, 28px); line-height: 1.35; list-style: none; position: relative; }
.talk__q::-webkit-details-marker { display: none; }
.talk__q::after { content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
.talk[open] .talk__q::after { transform: translateY(5px) rotate(225deg); }
.talk__a { padding-bottom: 14px; font-size: clamp(17px, .35vw + 15px, 19px); }
.talk :focus-visible { outline-color: #7a3b1c; }
.talk__seek { background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; }
.table-talk__more { margin-top: 22px; text-shadow: 0 1px 12px rgba(0, 0, 0, .9); }
.film { padding: clamp(50px, 7vw, 90px) 0; }
.film__head { margin-bottom: clamp(18px, 3vw, 34px); }
.film__frame { position: relative; background: #120b07; box-shadow: 0 30px 70px rgba(0, 0, 0, .6); }
.film__video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #120b07; }
.film__failed { margin: 0; padding: clamp(30px, 6vw, 80px) clamp(20px, 4vw, 50px); font-family: var(--display); font-size: clamp(20px, 1vw + 16px, 28px); }
.film__disclosure { margin-top: 12px; }
.film__transcript { margin-top: 12px; }
.film__transcript summary { cursor: pointer; font-weight: 500; padding: 8px 0; }
@media (max-aspect-ratio: 85/100) { .film__video { aspect-ratio: auto; max-height: 86svh; } }
.foot__rights { margin-top: 8px; font-size: 13px; opacity: .72; }

/* ---------- The two planning workspaces ---------- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.is-plan { --plan-accent: #A23D1E; --plan-urgent: #93351A; }
.is-plan main { overflow-wrap: anywhere; }

/* The opening: the chapter's plate, with its title resting on it. */
.plan-open { position: relative; display: flex; align-items: flex-end; min-height: clamp(380px, 58vh, 600px); padding: calc(var(--bar-h, 64px) + 28px) 0 clamp(78px, 9vw, 118px); overflow: hidden; background: var(--ink-800); color: var(--ivory); }
.plan-open__plate { position: absolute; inset: 0; display: block; }
.plan-open__plate img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
html:not(.calm) .plan-open__plate img { animation: plan-settle 2.6s var(--ease) both; }
@keyframes plan-settle { from { transform: scale(1.045); } to { transform: scale(1); } }
.plan-open::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 16, 20, .28) 0%, rgba(10, 16, 20, .12) 34%, rgba(10, 16, 20, .78) 100%); pointer-events: none; }
.plan-open__copy { z-index: 1; }
.plan-open .h1 { color: var(--ivory); max-width: 19em; text-shadow: 0 2px 20px rgba(0, 0, 0, .55); }
.plan-open .kicker { color: var(--sand); text-shadow: 0 1px 8px rgba(0, 0, 0, .7); }
.plan-open .lede { max-width: 38em; margin: .7em 0 0; font-size: clamp(16px, .5vw + 14px, 20px); text-shadow: 0 1px 12px rgba(0, 0, 0, .7); }

/* Three doors, overlapping the plate like cards laid on the table. */
.plan-doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); margin-top: clamp(-74px, -5vw, -44px); z-index: 2; }
.door { display: grid; align-content: start; gap: 8px; padding: clamp(16px, 1.7vw, 24px); color: var(--paper-ink); text-decoration: none; background: var(--paper) url(/assets/grounds/paper.webp); border-radius: 2px 3px 2px 4px / 3px 2px 4px 2px; box-shadow: 0 1px 1px rgba(0, 0, 0, .3), 0 14px 30px rgba(50, 36, 18, .3); transition: transform .28s var(--ease), box-shadow .28s var(--ease); }
.door:hover { transform: translateY(-3px); box-shadow: 0 2px 2px rgba(0, 0, 0, .3), 0 20px 38px rgba(50, 36, 18, .34); }
.door[aria-current] { box-shadow: inset 0 -4px 0 var(--plan-accent), 0 18px 34px rgba(50, 36, 18, .34); }
.door__quote { font-family: var(--display); font-size: clamp(16px, .45vw + 14px, 20px); line-height: 1.4; }
.door__name { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #7a5a2c; font-weight: 600; order: -1; }
.door__leave { font-size: 14px; line-height: 1.55; color: var(--paper-soft); }
.calm .door, .calm .door:hover { transition: none; transform: none; }

.plan-noscript { margin-top: 28px; }
.is-day .plan-noscript { color: var(--paper-ink); }
.plan-work-wrap { padding: clamp(20px, 3vw, 34px) 0 clamp(36px, 5vw, 64px); scroll-margin-top: calc(var(--bar-h, 64px) + 4px); }

/* The bar that says where the plan is kept, and offers the ways to move it. */
.plan-bar { display: grid; gap: 10px; padding: 12px 16px; color: var(--paper-ink); background: rgba(255, 252, 244, .72); border: 1px solid var(--line-lt); border-radius: 3px; }
.plan-bar__status { margin: 0; font-size: 14px; line-height: 1.55; }
.plan-bar .btn, .plan-confirm .btn, .plan-notice .btn, .plan-banner .btn, .plan-export .btn { min-height: 44px; padding: 8px 15px; font-size: 14px; }
.plan-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.plan-confirm { display: grid; gap: 10px; padding: 12px 14px; border-left: 3px solid var(--plan-accent); background: rgba(162, 61, 30, .07); }
.plan-confirm p { margin: 0; font-size: 14.5px; line-height: 1.55; }
.plan-notice:not([hidden]) { display: grid; gap: 10px; margin-top: 12px; padding: 12px 16px; color: var(--paper-ink); border-left: 3px solid var(--plan-accent); background: #F8EFDC; box-shadow: 0 8px 22px rgba(50, 36, 18, .18); }
.plan-notice p { margin: 0; font-size: 15px; line-height: 1.55; }
.plan-notice ul { margin: 0; padding-left: 18px; font-size: 14px; }
.plan-notice:focus-visible { outline: 2px solid var(--plan-accent); outline-offset: 2px; }

/* A fictional example can't be mistaken for your own plan: this stays in view until you start your own. */
.plan-banner:not([hidden]) { position: sticky; top: calc(var(--bar-h, 64px) + 6px); z-index: 7; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 12px; padding: 10px 16px; color: var(--ivory); background: #33291A; border-radius: 3px; box-shadow: 0 8px 22px rgba(30, 22, 10, .34); }
.plan-banner p { margin: 0; font-size: 14.5px; font-weight: 500; line-height: 1.45; }
.plan-banner .btn { background: transparent; color: var(--ivory); border-color: rgba(246, 241, 233, .6); }
.plan-banner .btn:hover { background: rgba(246, 241, 233, .14); color: var(--ivory); }
.plan-banner__line { padding: 8px 12px; color: var(--ivory); background: #33291A; font-size: 14px; font-weight: 500; }

.plan-work { display: none; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: clamp(16px, 2.2vw, 30px); align-items: start; margin-top: 16px; }
.has-job .plan-work { display: grid; }
html:not(.calm) .has-job .plan-work { animation: plan-rise .5s var(--ease) both; }
@keyframes plan-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.plan-form, .plan-out { min-width: 0; }
.plan-pick { display: none; }

/* Steps: paper leaves, one question at a time. */
.plan-step { margin-bottom: 10px; color: var(--paper-ink); background: var(--paper) url(/assets/grounds/paper.webp); border-radius: 2px; box-shadow: 0 1px 1px rgba(0, 0, 0, .22), 0 8px 18px rgba(50, 36, 18, .16); }
.plan-step > summary { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 12px 16px; cursor: pointer; list-style: none; }
.plan-step > summary::-webkit-details-marker, .plan-task > summary::-webkit-details-marker { display: none; }
.plan-step > summary::after, .plan-task > summary::after { content: ""; flex: 0 0 auto; width: 8px; height: 8px; margin-left: 4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s var(--ease); opacity: .6; }
details[open] > summary::after { transform: rotate(-135deg) translate(-2px, -1px); }
.calm details > summary::after { transition: none; }
.plan-step__n { flex: 0 0 auto; display: inline-grid; place-items: center; width: 26px; height: 26px; font-size: 13px; color: var(--ivory); background: var(--ink-800); border-radius: 50%; }
.plan-step__title { flex: 1 1 auto; font-family: var(--display); font-size: clamp(17px, .4vw + 15px, 20px); line-height: 1.3; }
.plan-step__note { flex: 0 1 auto; max-width: 42%; font-size: 13px; color: var(--paper-soft); text-align: right; }
.plan-step__body { display: grid; gap: 14px; padding: 2px 16px 18px; }
.plan-step__body > .fine, .plan-task__body > .fine { margin: 0; color: var(--paper-soft); opacity: 1; }
.plan-form .field { min-width: 0; }
.plan-form select { width: 100%; min-height: 48px; padding: 10px 12px; font: inherit; font-size: 16px; color: var(--paper-ink); background-color: rgba(255, 252, 244, .72); border: 1px solid rgba(42, 36, 24, .34); border-radius: 6px; }
.plan-form input[type="date"] { width: 100%; }
.plan-form .field__msg:empty { display: none; }
.plan-form legend { margin-bottom: 4px; line-height: 1.4; }
.plan-form .chips { margin-top: 2px; }
.plan-form .chip span { min-height: 38px; display: inline-flex; align-items: center; }
.plan-row { display: grid; gap: 12px; padding: 14px 0 6px; border-top: 1px dashed var(--line-lt); min-width: 0; }
.plan-row__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; min-width: 0; }
.plan-row__pair--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plan-row__pair--dates { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
.plan-row__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; }
.plan-row__me { margin: 0; align-self: end; padding-bottom: 12px; font-family: var(--display); font-size: 18px; }
.plan-rm { justify-self: start; min-height: 44px; padding: 8px 0; color: var(--plan-urgent); background: none; border: 0; font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.plan-stay { margin: 0; padding: 10px 12px; font-size: 15px; background: rgba(255, 252, 244, .55); border-left: 3px solid var(--ink-800); }
.plan-addgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.plan-add { min-height: 44px; padding: 8px 12px; color: var(--paper-ink); text-align: left; background: rgba(255, 252, 244, .55); border: 1px solid rgba(42, 36, 24, .34); border-radius: 6px; font: inherit; font-size: 14.5px; line-height: 1.3; cursor: pointer; transition: background .15s; }
.plan-add:hover { background: rgba(42, 36, 24, .08); }
.plan-step__body > .btn { justify-self: start; }
.plan-step__body .btn--quiet { color: var(--paper-ink); border-color: rgba(42, 36, 24, .5); background: transparent; }
.plan-sub { margin: 8px 0 -4px; font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #7a5a2c; }
.plan-money__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(96px, 112px); gap: 8px; }
.plan-money__status { margin-top: 2px; }
.plan-money__status label { font-size: 13.5px; font-weight: 400; }
.plan-meaning { margin: 0; padding: 8px 10px; font-size: 14.5px; line-height: 1.5; background: rgba(255, 252, 244, .55); border-left: 3px solid var(--ink-800); }
.plan-seg { display: flex; flex-wrap: wrap; gap: 2px; border-radius: 14px; padding: 3px; }
.plan-seg button { min-height: 44px; padding: 8px 14px; color: inherit; font: inherit; font-size: 14.5px; line-height: 1.25; text-align: left; background: none; border: 0; border-radius: 11px; cursor: pointer; }
.plan-marks__name { margin: 0; font-family: var(--display); font-size: 19px; }
.plan-mark { padding-top: 10px; border-top: 1px dashed var(--line-lt); }
.plan-mark .field__help { font-size: 13.5px; }
.plan-task { border-top: 1px solid var(--line-lt); }
/* A row's name keeps a readable width of its own. When the name and its date or state don't fit on one line, the tag moves below the name
   and wraps by word, rather than squeezing the name into a column a few letters wide. */
.plan-task > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 48px; padding: 10px 0; cursor: pointer; list-style: none; }
.plan-task__title { flex: 1 1 14em; min-width: 0; overflow-wrap: break-word; font-weight: 500; line-height: 1.35; }
.plan-task > summary .plan-tag { flex: 0 1 auto; max-width: 100%; white-space: normal; overflow-wrap: break-word; text-align: left; }
.plan-step__title { overflow-wrap: break-word; }
.plan-task.is-blocked > summary .plan-task__title { opacity: .66; }
.plan-task.is-done > summary .plan-task__title, .plan-task.is-na > summary .plan-task__title { opacity: .6; text-decoration: line-through; text-decoration-thickness: 1px; }
.plan-task__body { display: grid; gap: 12px; padding: 0 0 16px; min-width: 0; }
.plan-tag { flex: 0 0 auto; justify-self: start; display: inline-block; max-width: 100%; padding: 1px 8px; font-size: 12px; line-height: 1.5; color: inherit; border: 1px solid currentColor; border-radius: 999px; opacity: .86; white-space: nowrap; }

/* The plan: a sheet that stays beside the questions and changes as you answer. */
/* --plan-banner-h is the example banner's real height, measured by the page, so the plan always sits below the banner and never under it. */
.plan-out { position: sticky; top: calc(var(--bar-h, 64px) + var(--plan-banner-h, 0px) + 10px); scroll-margin-top: var(--plan-banner-h, 0px); }
.plan-sheet { max-height: calc(100vh - var(--bar-h, 64px) - var(--plan-banner-h, 0px) - 30px); overflow: auto; padding: clamp(16px, 2vw, 26px); color: var(--paper-ink); background: #F4ECD9 url(/assets/grounds/paper.webp); border-radius: 2px; box-shadow: 0 2px 0 #cdbf9f, 0 4px 0 #bdae8d, 0 22px 44px rgba(70, 55, 30, .3); }
.plan-sheet:focus-visible { outline: 2px solid var(--plan-accent); outline-offset: 2px; }
.plan-brief__title { margin: 0 0 6px; color: var(--paper-ink); }
.plan-brief__title:focus:not(:focus-visible) { outline: none; }
.plan-brief__title:focus-visible { outline: 2px solid var(--plan-accent); outline-offset: 4px; }
.plan-head { margin-bottom: 14px; }
/* The example's label travels with the result, so it's still clear when the banner above has scrolled away or isn't printed. */
.plan-brief__fiction { display: inline-block; margin: 0 0 8px; padding: 3px 10px; font-size: 13px; font-weight: 600; line-height: 1.45; color: var(--ivory); background: #33291A; border-radius: 3px; }
.plan-letter .btn { min-height: 44px; }
.plan-brief__headline { margin: 0 0 6px; font-family: var(--display); font-size: clamp(17px, .35vw + 15px, 20px); line-height: 1.45; }
.plan-sec { margin-top: 16px; }
.plan-sec h3, .plan-sec h4 { margin: 0 0 2px; padding-bottom: 5px; font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #7a5a2c; border-bottom: 1px solid var(--line-lt); }
.plan-sec > .fine { margin: 6px 0 2px; color: var(--paper-soft); opacity: 1; font-size: 13.5px; }
.plan-sec ul { margin: 0; padding: 0; list-style: none; }
.plan-line { display: grid; gap: 3px; padding: 10px 0; border-bottom: 1px dotted var(--line-lt); min-width: 0; }
.plan-line:last-child { border-bottom: 0; }
.plan-line__text { font-weight: 500; line-height: 1.45; }
.plan-line__sub { font-size: 14px; line-height: 1.55; color: var(--paper-soft); white-space: pre-line; }
.plan-line__link { justify-self: start; font-size: 13.5px; text-underline-offset: 3px; }
.plan-line.is-urgent .plan-tag { color: #fff; background: var(--plan-urgent); border-color: var(--plan-urgent); opacity: 1; }
.plan-line.is-set_aside .plan-line__text { opacity: .62; text-decoration: line-through; text-decoration-thickness: 1px; }
.plan-line.is-standing .plan-tag { color: var(--ivory); background: var(--ink-800); border-color: var(--ink-800); opacity: 1; }
.plan-sec--decision .plan-line__text { font-family: var(--display); font-size: 18px; font-weight: 400; }
.plan-sec--pro .plan-line__text { font-weight: 400; padding: 8px 12px; background: rgba(255, 252, 244, .6); border-left: 3px solid var(--plan-accent); }
.plan-act { justify-self: start; min-height: 40px; padding: 6px 0; color: inherit; background: none; border: 0; font: inherit; font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.plan-money-lines { display: grid; gap: 6px; margin: 8px 0 0; }
.plan-ml { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 12px; padding: 7px 10px; background: rgba(255, 252, 244, .5); border-left: 3px solid rgba(42, 36, 24, .3); }
.plan-ml dt { font-size: 13.5px; font-weight: 600; }
.plan-ml dd { margin: 0; }
.plan-ml__value { font-family: var(--display); font-size: 17px; text-align: right; }
.plan-ml__why { grid-column: 1 / -1; font-size: 13.5px; line-height: 1.5; color: var(--paper-soft); }
.plan-ml--cash { border-left-color: var(--ink-800); }
.plan-ml--gap { border-left-color: var(--plan-accent); }
.plan-ml--lost { border-left-color: #4a6a6e; border-left-style: dashed; }
.plan-ml--scenario { border-left-style: dotted; }
.plan-ml--timing, .plan-ml--note, .plan-ml--error { background: none; border-left: 0; padding: 2px 10px; }
.plan-ml--error .plan-ml__why { color: var(--plan-urgent); }
.plan-export { margin-top: 18px; padding-top: 14px; border-top: 2px solid var(--ink-800); }
.plan-export__h { margin: 0 0 10px; font-size: 18px; }
.plan-export .btn--quiet { color: var(--paper-ink); border-color: rgba(42, 36, 24, .5); }
.plan-export .fine { margin: 10px 0 0; color: var(--paper-soft); opacity: 1; }
.plan-copy { margin-top: 10px; font-size: 14.5px; }
.plan-copy summary { min-height: 40px; display: flex; align-items: center; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.plan-copybox { width: 100%; padding: 10px; margin: 6px 0; font: inherit; font-size: 14px; line-height: 1.5; color: var(--paper-ink); background: rgba(255, 252, 244, .72); border: 1px solid rgba(42, 36, 24, .34); border-radius: 6px; }
.plan-jump { display: none; }

/* The route chart: one harbour, and a line for every alternative. */
.route-chart { margin: 0 0 8px; }
.route-chart__grid { display: grid; grid-template-columns: clamp(64px, 22%, 120px) minmax(0, 1fr); }
.route-chart svg { display: block; width: 100%; height: 100%; }
.route-chart path { fill: none; stroke: #4a3d28; stroke-width: 2; stroke-dasharray: 5 5; transition: stroke .5s, stroke-width .5s, opacity .5s; }
.route-chart path[data-state="standing"] { stroke: var(--plan-accent); stroke-width: 3; stroke-dasharray: none; }
.route-chart path[data-state="set_aside"] { opacity: .24; }
.calm .route-chart path { transition: none; }
.route-chart ol { display: grid; grid-auto-rows: 1fr; margin: 0; padding: 0; list-style: none; }
.route-chart li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 8px; min-height: 44px; padding: 4px 0 4px 8px; border-bottom: 1px dotted var(--line-lt); }
.route-chart__name { font-weight: 500; line-height: 1.25; }
.route-chart__state { font-size: 13px; color: var(--paper-soft); }
.route-chart li.is-set_aside .route-chart__name { opacity: .55; text-decoration: line-through; text-decoration-thickness: 1px; }
.route-chart li.is-standing .route-chart__state { color: var(--plan-accent); font-weight: 600; }
.route-chart figcaption { margin-top: 4px; font-size: 13px; color: var(--paper-soft); opacity: 1; }

/* The sounding chart: a line for each path, and a mark at each gate. */
.sounding { margin: 0 0 8px; }
.sounding table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.sounding th { font-weight: 500; font-size: 14px; text-align: left; line-height: 1.25; padding: 6px 4px 6px 0; }
.sounding thead th { width: auto; text-align: center; font-family: var(--display); font-size: 16px; }
.sounding thead th:first-child { width: 44%; }
.sounding td { position: relative; height: 34px; text-align: center; font-size: 15px; }
.sounding td::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: rgba(42, 36, 24, .34); }
.sounding td > span[aria-hidden] { position: relative; padding: 0 4px; background: #F4ECD9; }
.sounding td.is-no { color: var(--plan-urgent); font-weight: 700; }
.sounding td.is-na { opacity: .5; }
.sounding figcaption { margin-top: 6px; font-size: 13px; color: var(--paper-soft); opacity: 1; }
.sounding__names { margin: 0 0 4px; padding-left: 20px; }

/* The worked examples: readable with no scripts at all. */
.plan-examples { padding-top: clamp(30px, 4vw, 56px); }
.worked { margin-bottom: 12px; color: var(--paper-ink); background: #F4ECD9 url(/assets/grounds/paper.webp); border-radius: 2px; box-shadow: 0 2px 0 #cdbf9f, 0 16px 34px rgba(70, 55, 30, .24); scroll-margin-top: calc(var(--bar-h, 64px) + 12px); }
.worked > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 58px; padding: 12px 18px; cursor: pointer; }
.worked__tag { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #7a5a2c; font-weight: 600; }
.worked__title { font-family: var(--display); font-size: clamp(17px, .5vw + 15px, 21px); line-height: 1.3; }
.worked__body { padding: 0 18px 22px; }
.worked__who { margin: 0 0 14px; max-width: 46em; font-size: 16px; line-height: 1.6; }
.worked__grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(16px, 2.6vw, 36px); align-items: start; }
.worked__paper { min-width: 0; }
.worked__paper h4 { margin: 0 0 6px; font-size: 18px; }
.worked__paper ol { margin: 0 0 14px; padding-left: 20px; font-size: 15px; line-height: 1.55; }
.worked__paper li { margin-bottom: 6px; }
.worked .btn--quiet { color: var(--paper-ink); background: transparent; border-color: rgba(42, 36, 24, .5); min-height: 44px; padding: 8px 15px; font-size: 14.5px; }
.worked .btn--quiet:hover { background: rgba(42, 36, 24, .08); color: var(--paper-ink); }
.plan-foot { margin: 0 0 22px; max-width: 52em; color: var(--paper-soft); opacity: 1; }

/* School & Career lives on the green water, with the same paper on top. */
body.is-plan--sea { background: #0E2A2B; }
.is-plan--sea::before { display: none; }
.is-plan--sea main { color: var(--ivory); background: linear-gradient(180deg, #123A3A 0, #0E2A2B 540px, #0C2425 100%); }
.is-plan--sea .place--day { color: var(--ivory); }
.is-plan--sea .place--day h2 { color: var(--ivory); }
.is-plan--sea .place--day .kicker { color: var(--sand); }
.is-plan--sea .plan-examples .sec-head .fine, .is-plan--sea .plan-foot { color: rgba(246, 241, 233, .78); }
.is-plan--sea .place--day .link { color: var(--ivory); text-decoration-color: var(--sand); }
.is-plan--sea .next-chapters a { color: var(--ivory); border-top-color: rgba(246, 241, 233, .24); }
.is-plan--sea .plan-sheet, .is-plan--sea .worked { box-shadow: 0 2px 0 #cdbf9f, 0 4px 0 #bdae8d, 0 22px 44px rgba(0, 0, 0, .4); }
.is-plan--sea .door { box-shadow: 0 1px 1px rgba(0, 0, 0, .4), 0 14px 30px rgba(0, 0, 0, .4); }
.is-plan--sea .plan-step { box-shadow: 0 1px 1px rgba(0, 0, 0, .35), 0 10px 22px rgba(0, 0, 0, .34); }
.is-plan--sea .plan-bar { color: var(--paper-ink); background: var(--paper) url(/assets/grounds/paper.webp); }
.is-plan--sea .plan-noscript { color: var(--ivory); }
.is-plan--sea { --plan-accent: #A85A32; }

.lanes-out--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) {
  /* On a phone the banner stays, but as one slim strip, so it labels the example without taking a fifth of the screen. */
  .plan-banner:not([hidden]) { flex-wrap: nowrap; gap: 6px 12px; padding: 6px 8px 6px 14px; }
  .plan-banner p { font-size: 13px; line-height: 1.4; }
  .plan-banner .btn { flex: 0 0 auto; min-height: 40px; padding: 6px 12px; font-size: 13px; white-space: nowrap; }
  .lanes-out--three { grid-template-columns: minmax(0, 1fr); }
  .plan-work { grid-template-columns: minmax(0, 1fr); }
  .plan-out { position: static; }
  .plan-sheet { max-height: none; overflow: visible; }
  .has-job .plan-jump { position: sticky; bottom: 14px; z-index: 8; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 12px 0 0; padding: 9px 18px; color: var(--ivory); text-decoration: none; background: var(--ink-800); border-radius: 999px; box-shadow: 0 8px 22px rgba(0, 0, 0, .4); }
  .plan-doors { grid-template-columns: minmax(0, 1fr); margin-top: -44px; }
  .worked__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .plan-row__pair, .plan-row__pair--three { grid-template-columns: minmax(0, 1fr); }
  .plan-row__me { padding-bottom: 0; }
  .plan-open { min-height: 400px; padding-bottom: 66px; }
  .plan-step__note { display: none; }
  .door { padding: 14px 16px; }
  .plan-bar .form__row .btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .plan-open__plate img, .has-job .plan-work { animation: none !important; }
}
/* The plan as a plain document: still, readable at any width, and what Print prints when it's open. */
.plan-document { position: fixed; inset: 0; z-index: 80; overflow: auto; color: var(--paper-ink); background: #F7F2E6; }
/* It's a native dialog: these undo the browser's centred box so it fills the screen as one page. */
dialog.plan-document { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; }
dialog.plan-document::backdrop { background: rgba(10, 14, 18, .55); }
.plan-document__bar { position: sticky; top: 0; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px max(16px, calc((100vw - 760px) / 2)); background: rgba(247, 242, 230, .97); border-bottom: 1px solid var(--line-lt); }
.plan-document__bar .btn { min-height: 44px; padding: 8px 15px; font-size: 14px; color: var(--paper-ink); border-color: rgba(42, 36, 24, .5); background: transparent; }
.plan-document__bar .fine { flex: 1 1 18em; margin: 0; color: var(--paper-soft); opacity: 1; font-size: 13px; }
.plan-document__page { max-width: 760px; margin: 0 auto; padding: 22px 16px 72px; font-size: 16px; line-height: 1.6; }
.plan-document__page .plan-brief__title:focus { outline: none; }
body.has-document { overflow: hidden; }
@media print {
  body.has-document > *:not(.plan-document) { display: none !important; }
  body.has-document { overflow: visible; }
  .has-document .plan-document { position: static; overflow: visible; background: #fff; }
  dialog.plan-document { width: auto; height: auto; }
  dialog.plan-document::backdrop { display: none; }
  .plan-document__bar { display: none !important; }
  .plan-document__page { max-width: none; padding: 0; }
}
@media print {
  .bar, .foot, .skip, .plan-open, .plan-doors, .plan-bar, .plan-notice, .plan-form, .plan-export, .plan-jump, .plan-examples, #next { display: none !important; }
  body, .is-plan--sea main { background: #fff !important; color: #000 !important; }
  .plan-work, .has-job .plan-work { display: block !important; animation: none !important; margin: 0; }
  .plan-out { position: static; }
  .plan-sheet { max-height: none; overflow: visible; padding: 0; background: #fff; box-shadow: none; color: #000; }
  /* The printed plan carries its own example label in its head, so the screen banner isn't needed on paper. */
  .plan-banner, .plan-banner button, .plan-act { display: none !important; }
  .plan-brief__fiction { background: #fff; color: #000; border: 1px solid #000; }
  .plan-line__sub, .plan-ml__why { color: #222; }
  .plan-line { break-inside: avoid; }
}