/* The whitepaper · Clay. Page structure: title block, chapter rail, chapters, overview, rules table, closing.
   Tokens come from clay-tokens.css; the diagrams live in whitepaper.css and the walk-through in whitepaper-try.css.
   Every chapter sets --hue (a clay fill) and --hue-ink (the same colour, dark enough to read as text on the light panels). */

@property --hue { syntax: "<color>"; inherits: true; initial-value: #7ab8ff; }
body[data-page="how"] {
  --hue: var(--sky); --hue-ink: var(--sky-ink);
  --fs-xs: .8125rem; --fs-s: .9375rem; --fs-b: 1.0625rem; --fs-lead: clamp(1.1rem, 1rem + .5vw, 1.35rem);
  transition: --hue 1.1s ease;
}

.wp-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.wp { width: min(1360px, 100% - 2 * var(--pad)); margin-inline: auto; padding-top: clamp(16px, 3vw, 40px); padding-bottom: clamp(20px, 4vw, 40px); }

/* reading progress, fixed to the very top: a soft clay bar */
.wp-progress { position: fixed; z-index: 70; left: 0; right: 0; top: 0; height: 5px; border-radius: 0 5px 5px 0; background: linear-gradient(90deg, var(--hue), var(--coral)); box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset; transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }

/* ---------------------------------------------------------------- title block */
.wp-hero { --hue: var(--coral); --hue-ink: var(--coral-ink); padding: clamp(20px, 4vw, 56px) 0 clamp(40px, 6vw, 90px); }
.wp-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 clamp(18px, 2.6vw, 30px); padding: 9px 18px 9px 14px; border-radius: 999px; background: color-mix(in srgb, var(--coral) 30%, var(--panel-2)); box-shadow: var(--puff-sm); font: 700 .86rem/1 var(--sans); color: var(--coral-ink); }
.wp-live { width: 10px; height: 10px; border-radius: 50%; background: var(--coral); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .7), 0 1px 2px rgba(var(--shade), .3); animation: wp-pulse 1.8s ease-in-out infinite; }
.wp-title { margin: 0; font: 800 clamp(2.5rem, .8rem + 7.4vw, 7.4rem)/.98 var(--display); letter-spacing: -.04em; color: var(--ink); text-wrap: balance; }
.wp-title em { font-style: normal; font-weight: 800; color: var(--ink); padding: 0 .08em; margin: 0 -.08em; border-radius: .2em; background: linear-gradient(180deg, transparent 66%, color-mix(in srgb, var(--coral) 55%, transparent) 66% 94%, transparent 94%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.wp-title { animation: wp-rise .9s var(--ease) both; }
.wp-lede { margin: clamp(20px, 3vw, 34px) 0 0; max-width: 58ch; font-size: var(--fs-lead); line-height: 1.55; color: var(--body); animation: wp-rise .9s .12s var(--ease) both; }
.wp-hero .wp-fig { margin-top: clamp(28px, 4.5vw, 56px); animation: wp-rise 1s .25s var(--ease) both; }
.wp-hero__meta { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; color: var(--body); font-size: var(--fs-s); }
.wp-hero__meta li { padding: 10px 18px; border-radius: 999px; background: var(--panel-2); box-shadow: var(--puff-sm); }
.wp-hero__meta b { font: 800 1.15rem/1 var(--display); letter-spacing: -.02em; color: var(--coral-ink); margin-right: 6px; }
.wp-cue { display: inline-flex; align-items: center; gap: 10px; margin-top: clamp(28px, 4vw, 48px); font: 700 var(--fs-s)/1 var(--sans); text-decoration: none; color: var(--ink); padding: 14px 22px 14px 24px; border-radius: 999px; background: var(--panel-2); box-shadow: var(--puff); transition: transform .2s var(--ease), box-shadow .2s; }
.wp-cue svg { animation: wp-bob 1.8s ease-in-out infinite; color: var(--coral-ink); }
.wp-cue:hover { transform: translateY(-3px); }
.wp-cue:active { transform: translateY(1px) scale(.97); box-shadow: var(--dent); }
.wp-cue:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
@keyframes wp-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes wp-bob { 50% { transform: translateY(4px); } }
@keyframes wp-pulse { 50% { transform: scale(1.35); } }

/* ---------------------------------------------------------------- layout with a chapter rail */
.wp-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); column-gap: clamp(32px, 5vw, 76px); align-items: start; }
.wp-body { min-width: 0; overflow-x: clip; padding-bottom: clamp(30px, 5vw, 60px); }

.wp-toc { position: sticky; top: calc(var(--nav-h, 88px) + 4px); max-height: calc(100svh - var(--nav-h, 88px) - 24px); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 6px 0 6px 22px; }
.wp-toc__head { display: none; }
.wp-toc__rail { position: absolute; left: 4px; top: 10px; bottom: 10px; width: 8px; border-radius: 8px; background: rgba(var(--shade), .1); box-shadow: var(--dent); overflow: hidden; }
.wp-toc__rail i { position: absolute; inset: 0; background: var(--hue); border-radius: 8px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6); transform-origin: 50% 0; transform: scaleY(0); }
.wp-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.wp-toc a { display: grid; grid-template-columns: 30px 1fr; align-items: baseline; gap: 6px; padding: 7px 10px 7px 8px; text-decoration: none; font: 600 var(--fs-s)/1.25 var(--sans); color: var(--muted); border-radius: 14px; transition: color .2s, transform .3s var(--ease), background .2s, box-shadow .2s; }
.wp-toc a .n { font: 700 .72rem/1 var(--display); letter-spacing: 0; color: var(--faint); transition: color .2s; }
.wp-toc a:hover { color: var(--ink); transform: translateX(4px); }
.wp-toc a.is-here { color: var(--ink); background: color-mix(in srgb, var(--c, var(--hue)) 30%, var(--panel-2)); box-shadow: var(--puff-sm); }
.wp-toc a.is-here .n { color: var(--ci, var(--hue-ink)); }
.wp-toc li { position: relative; }
.wp-toc a:focus-visible { outline: 3px solid var(--ink); outline-offset: 0; }

/* ---------------------------------------------------------------- chapters */
.wp-ch { position: relative; margin-top: clamp(84px, 11vw, 180px); scroll-margin-top: calc(var(--nav-h, 88px) - 24px); }
.wp-ch:first-child { margin-top: 0; }
.wp-ch__num { position: absolute; z-index: 0; right: -.02em; top: -.62em; font: 800 clamp(7rem, 3rem + 15vw, 17rem)/1 var(--display); letter-spacing: -.06em; color: color-mix(in srgb, var(--hue) 24%, transparent); pointer-events: none; user-select: none; }
.wp-ch > *:not(.wp-ch__num):not(.wp-anchor) { position: relative; z-index: 1; }
.wp-kick { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 6px 18px 6px 6px; border-radius: 999px; background: color-mix(in srgb, var(--hue) 34%, var(--panel-2)); box-shadow: var(--puff-sm); font: 700 .88rem/1 var(--sans); color: var(--ink); }
.wp-kick b { display: grid; place-items: center; min-width: 32px; height: 32px; padding: 0 8px; border-radius: 999px; background: var(--panel-2); box-shadow: var(--puff-sm); font: 800 .88rem/1 var(--display); letter-spacing: 0; color: var(--hue-ink); }
.wp-ch h2 { margin: 0 0 clamp(26px, 4vw, 52px); max-width: 17ch; font: 800 clamp(1.85rem, .9rem + 3.6vw, 3.9rem)/1.04 var(--display); letter-spacing: -.035em; color: var(--ink); text-wrap: balance; }
.wp-ch--plain h2 { max-width: 22ch; }
.wp-ch__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 4.4vw, 68px); align-items: start; }
.wp-ch__grid > .wp-fig { position: sticky; top: calc(var(--nav-h, 88px) + 6px); }

.wp-prose p { margin: 0 0 1.3em; max-width: 60ch; font-size: var(--fs-b); line-height: 1.74; color: var(--body); }
.wp-prose > p:first-child { font-size: 1.16rem; line-height: 1.66; color: var(--ink); }
.wp-prose b { color: var(--ink); font-weight: 700; padding: 0 .12em; margin: 0 -.12em; border-radius: .25em; background: linear-gradient(180deg, transparent 46%, color-mix(in srgb, var(--hue) 42%, transparent) 46%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.wp-prose--wide { max-width: 78ch; }
.wp-prose .wp-sim, .wp-sim { margin: 30px 0 0; padding: 16px 20px 18px; max-width: 58ch; border-radius: var(--r); background: color-mix(in srgb, var(--hue) 14%, var(--panel)); box-shadow: var(--puff-sm); font-size: var(--fs-s); line-height: 1.62; color: var(--body); }
.wp-sim b { display: inline-block; margin: 0 0 10px; padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--hue) 36%, var(--panel-2)); font: 700 .78rem/1 var(--sans); letter-spacing: 0; color: var(--ink); }
.wp-prose .wp-sim b { background: color-mix(in srgb, var(--hue) 36%, var(--panel-2)); padding: 6px 12px; margin: 0 0 10px; }
.wp-prose .wp-actions, .wp-actions { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; margin: 34px 0 0; max-width: none; }
.wp-prose .wp-actions .btn { color: var(--accent-ink); }
.wp-prose .wp-actions .btn--ghost { color: var(--ink); }
.wp-prose .link { font-weight: 700; color: var(--coral-ink); }

/* the scope list */
.wp-ban { list-style: none; margin: 4px 0 24px; padding: 0; display: grid; gap: 12px; }
.wp-ban li { position: relative; padding: 14px 18px 14px 58px; border-radius: 18px; background: var(--panel-2); box-shadow: var(--puff-sm); color: var(--ink); font-weight: 700; }
.wp-ban li::before { content: ""; position: absolute; left: 18px; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; border: 3px solid var(--rose-ink); background: linear-gradient(135deg, transparent 43%, var(--rose-ink) 43%, var(--rose-ink) 57%, transparent 57%); }

/* ---------------------------------------------------------------- overview */
.wp-beats { list-style: none; margin: 44px 0 40px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: relative; counter-reset: beat; }
.wp-beats::before { content: ""; position: absolute; left: 0; right: 0; top: -3px; height: 6px; border-radius: 6px; background: rgba(var(--shade), .12); box-shadow: var(--dent); }
.wp-beats::after { content: ""; position: absolute; top: -3px; left: 0; width: 22%; height: 6px; border-radius: 6px; background: linear-gradient(90deg, transparent, var(--sky), transparent); animation: wp-beat 6.5s linear infinite; }
.wp-beats a { display: grid; gap: 6px; padding: 30px 14px 8px 0; text-decoration: none; position: relative; border-radius: 16px; transition: transform .25s var(--ease); }
.wp-beats a:hover { transform: translateY(-3px); }
.wp-beats a:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.wp-beats i { position: absolute; top: -14px; left: 0; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--sky); box-shadow: var(--puff-sm); font: 800 .8rem/1 var(--display); font-style: normal; color: var(--ink); }
.wp-beats li:nth-child(1) i { background: var(--coral); } .wp-beats li:nth-child(2) i { background: var(--butter); } .wp-beats li:nth-child(3) i { background: var(--lilac); }
.wp-beats li:nth-child(4) i { background: var(--sky); } .wp-beats li:nth-child(5) i { background: var(--mint); }
.wp-beats b { font: 800 clamp(1.1rem, .95rem + .8vw, 1.5rem)/1.1 var(--display); letter-spacing: -.02em; color: var(--ink); transition: color .2s; }
.wp-beats span { font-size: var(--fs-xs); line-height: 1.5; color: var(--muted); max-width: 22ch; }
.wp-beats a:hover b { color: var(--sky-ink); }
@keyframes wp-beat { from { transform: translateX(-100%); } to { transform: translateX(460%); } }
.wp-anchor { position: absolute; left: 0; top: 0; width: 1px; height: 1px; scroll-margin-top: calc(var(--nav-h, 88px) - 24px); }
.wp-kinds { scroll-margin-top: calc(var(--nav-h, 88px) + 10px); margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.wp-kinds > div { padding: 24px 24px 26px; border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--puff); transition: transform .3s var(--ease), box-shadow .3s; }
.wp-kinds > div:nth-child(7n+1) { background: color-mix(in srgb, var(--coral) 12%, var(--panel)); } .wp-kinds > div:nth-child(7n+2) { background: color-mix(in srgb, var(--sky) 14%, var(--panel)); }
.wp-kinds > div:nth-child(7n+3) { background: color-mix(in srgb, var(--mint) 14%, var(--panel)); } .wp-kinds > div:nth-child(7n+4) { background: color-mix(in srgb, var(--butter) 18%, var(--panel)); }
.wp-kinds > div:nth-child(7n+5) { background: color-mix(in srgb, var(--lilac) 16%, var(--panel)); } .wp-kinds > div:nth-child(7n+6) { background: color-mix(in srgb, var(--pink) 16%, var(--panel)); }
.wp-kinds > div:nth-child(7n+7) { background: color-mix(in srgb, var(--teal) 14%, var(--panel)); }
.wp-kinds > div:hover { transform: translateY(-4px); box-shadow: var(--puff-lg); }
.wp-kinds dt { margin: 0 0 10px; font: 800 1.2rem/1.2 var(--display); letter-spacing: -.02em; color: var(--ink); }
.wp-kinds dd { margin: 0; font-size: var(--fs-s); line-height: 1.65; color: var(--body); }
.wp-kinds a { display: inline-block; margin-top: 8px; color: var(--hue-ink); font-weight: 700; text-underline-offset: 4px; }
.wp-ch--plain .wp-sim { margin-top: 36px; max-width: 78ch; }

/* ---------------------------------------------------------------- the table */
.wp-tablewrap { margin-top: 30px; border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--puff-lg); overflow: hidden; }
.wp-table { width: 100%; border-collapse: collapse; font-size: var(--fs-s); }
.wp-table caption { text-align: left; padding: 18px 24px 14px; color: var(--muted); font-size: var(--fs-xs); caption-side: bottom; }
.wp-table thead th { text-align: left; padding: 16px 24px; font: 700 .8rem/1 var(--sans); letter-spacing: .02em; color: var(--body); background: rgba(var(--shade), .08); box-shadow: inset 0 -1px 0 rgba(var(--shade), .1); }
.wp-table tbody th[scope="rowgroup"] { text-align: left; padding: 26px 24px 10px; font: 800 1.1rem/1 var(--display); letter-spacing: -.01em; color: var(--g-ink, var(--ink)); background: linear-gradient(90deg, color-mix(in srgb, var(--g, var(--hue)) 26%, transparent), transparent 70%); border-top: 1px solid var(--line); }
.wp-table tbody tr:first-child th[scope="rowgroup"] { border-top: 0; }
.wp-table td, .wp-table tbody th[scope="row"] { padding: 14px 24px; vertical-align: top; border-top: 1px solid var(--line); text-align: left; }
.wp-table tbody th[scope="row"] { font-weight: 700; color: var(--ink); width: 26%; }
.wp-table td:nth-child(2) { width: 24%; font: 800 1.05rem/1.25 var(--display); letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
.wp-table td:nth-child(3) { color: var(--body); line-height: 1.6; }
.wp-table tbody tr:hover td, .wp-table tbody tr:hover th[scope="row"] { background: rgba(255, 255, 255, .6); }

/* ---------------------------------------------------------------- closing */
.wp-end { margin-top: clamp(90px, 13vw, 200px); text-align: center; display: grid; justify-items: center; padding-bottom: clamp(20px, 5vw, 60px); position: relative; scroll-margin-top: calc(var(--nav-h, 88px) - 24px); }
.wp-end h2 { margin: 0; max-width: 14ch; font: 800 clamp(2.4rem, 1rem + 6vw, 5.8rem)/.98 var(--display); letter-spacing: -.04em; color: var(--ink); text-wrap: balance; }
.wp-end__sub { margin: 24px 0 0; max-width: 46ch; color: var(--body); font-size: var(--fs-lead); line-height: 1.55; }
.wp-end .wp-actions { justify-content: center; margin-top: 38px; }

/* ---------------------------------------------------------------- narrow screens: the chapter list becomes a bottom dock */
@media (max-width: 1180px) {
  .wp-layout { display: block; }
  .wp-ch__grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .wp-ch__grid > .wp-fig { position: relative; top: 0; order: -1; }
  .wp-prose p { max-width: 68ch; }
  .wp-ch h2 { max-width: 20ch; }
  .wp-toc { position: fixed; top: auto; z-index: 45; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: min(440px, 100% - 24px); max-height: none; overflow: visible; padding: 0; }
  .wp-toc__rail { display: none; }
  .wp-toc__head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 18px; border-radius: 999px; background: var(--panel-2); border: 0; box-shadow: var(--puff); color: var(--ink); font: 700 var(--fs-xs)/1 var(--sans); cursor: pointer; text-align: left; position: relative; overflow: hidden; }
  .wp-toc__head:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
  .wp-toc__head::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 4px; border-radius: 4px; background: var(--hue); transform-origin: 0 50%; transform: scaleX(var(--prog, 0)); }
  .wp-toc__head b { font: 800 .9rem/1 var(--display); color: var(--hue-ink); }
  .wp-toc__head span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wp-toc__head svg { flex: none; transition: transform .3s var(--ease); }
  .wp-toc.is-open .wp-toc__head svg { transform: rotate(180deg); }
  .wp-toc__list { position: absolute; left: 0; right: 0; bottom: calc(100% + 12px); padding: 10px; border-radius: 28px; background: var(--panel); box-shadow: var(--puff-lg); max-height: min(62svh, 520px); overflow: auto; opacity: 0; visibility: hidden; transform: translateY(10px) scale(.98); transform-origin: 50% 100%; transition: opacity .2s, transform .25s var(--ease), visibility .2s; }
  .wp-toc.is-open .wp-toc__list { opacity: 1; visibility: visible; transform: none; }
  .wp-toc a { padding: 10px 12px; }
  .wp-toc li { position: static; }
  .wp-body { padding-bottom: 90px; }
  .wp-toc { transition: opacity .2s, visibility .2s; }
  .wp-toc.is-off { opacity: 0; visibility: hidden; pointer-events: none; } /* the dock steps aside over the site footer */
}
@media (max-width: 760px) {
  .wp-beats { grid-template-columns: 1fr; margin-left: 14px; }
  .wp-beats::before { right: auto; left: -3px; top: 0; bottom: 0; width: 6px; height: auto; }
  .wp-beats::after { display: none; }
  .wp-beats a { padding: 6px 0 22px 34px; }
  .wp-beats i { left: -14px; top: 6px; }
  .wp-ch__num { font-size: clamp(5.5rem, 28vw, 9rem); top: -.35em; }
  .wp-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .wp-table, .wp-table tbody, .wp-table tr, .wp-table th, .wp-table td { display: block; width: auto !important; }
  .wp-table caption { display: block; width: auto; padding: 14px 20px 14px; }
  .wp-table td:nth-child(2) { white-space: normal; padding-top: 0; border-top: 0; font-size: 1.15rem; }
  .wp-table td:nth-child(3) { padding-top: 0; border-top: 0; padding-bottom: 18px; }
  .wp-table tbody th[scope="row"] { padding: 16px 20px 6px; border-top: 1px solid var(--line); }
  .wp-table td { padding-left: 20px; padding-right: 20px; }
  .wp-kinds { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .wp-title, .wp-lede, .wp-hero .wp-fig { animation: none; }
  .wp-live, .wp-cue svg, .wp-beats::after { animation: none; }
  .wp-beats::after { display: none; }
  .wp-toc a:hover, .wp-kinds > div:hover, .wp-beats a:hover, .wp-cue:hover { transform: none; }
  body[data-page="how"] { transition: none; }
}