/* Crumbs, /clay/ page. Builds on site.css: ink and paper, one accent, signal colours only on marks. */

/* ---------- Hero ---------- */

.cl-hero { position: relative; overflow: hidden; padding: 168px 0 clamp(56px, 7vw, 92px); }
.cl-hero__grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(244, 240, 232, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(244, 240, 232, 0.06) 1px, transparent 1px);
  background-size: 136px 44px;
  background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(90% 85% at 92% 6%, #000 0%, rgba(0,0,0,.55) 38%, transparent 72%);
  mask-image: radial-gradient(90% 85% at 92% 6%, #000 0%, rgba(0,0,0,.55) 38%, transparent 72%);
}
.cl-hero__in { position: relative; display: grid; gap: 28px; }
.cl-hero__lockup { margin: 0; grid-column: 2; grid-row: 1; align-self: start; justify-self: end; gap: 20px; }
.cl-hero__lockup .clay__crumbs svg { height: 34px; }
.cl-hero__lockup img { height: 42px; }
.cl-hero h1 { font-size: clamp(48px, 6.6vw, 98px); max-width: 13ch; }
.cl-hero__head { display: grid; grid-template-columns: 1.15fr .85fr; grid-template-rows: auto 1fr; gap: 28px 40px; }
.cl-hero__title { display: grid; gap: 26px; grid-column: 1; grid-row: 1 / span 2; align-self: end; }
.cl-hero__head .lede { grid-column: 2; grid-row: 2; align-self: end; max-width: 42ch; color: var(--on-ink-muted); }

.cl-chips { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cl-chips > li { display: flex; }
.cl-chip {
  flex: 1; display: flex; align-items: center; gap: 16px;
  min-height: 66px; padding: 12px 18px;
  border: 1px solid var(--ink-line-strong); border-radius: 14px;
  background: rgba(244, 240, 232, 0.035);
  color: var(--on-ink); text-decoration: none;
  transition: border-color .2s, background .2s;
}
.cl-chip--link:hover { border-color: var(--on-ink); background: rgba(244, 240, 232, 0.06); }
.cl-chip--link .arr { display: inline-block; transition: transform .25s var(--ease); }
.cl-chip--link:hover .arr { transform: translate(2px, -2px); }
.cl-nw { white-space: nowrap; }
.cl-chip__n { flex: 0 0 86px; font-family: var(--serif); font-weight: 700; font-size: 28px; letter-spacing: -0.035em; line-height: 1; font-variation-settings: "opsz" 60; }
.cl-chip__i { display: flex; align-items: center; }
.cl-chip__i img { width: 74px; max-width: 100%; height: auto; }
.cl-chip__t { display: grid; gap: 3px; font-size: 14.5px; line-height: 1.35; color: var(--on-ink-muted); }
.cl-chip__t b { color: var(--on-ink); font-weight: 600; font-size: 15.5px; }

@media (max-width: 1100px) {
  .cl-chip { gap: 12px; padding: 12px 16px; }
  .cl-chip__n { flex-basis: 74px; font-size: 25px; }
  .cl-chip__t { font-size: 14px; }
}
@media (max-width: 860px) {
  .cl-chips { grid-template-columns: 1fr; gap: 10px; max-width: 560px; }
}
@media (max-width: 860px) {
  .cl-hero__head { grid-template-columns: 1fr; grid-template-rows: none; }
  .cl-hero__title, .cl-hero__head .lede { grid-column: 1; grid-row: auto; }
  .cl-hero__lockup { grid-column: 1; grid-row: auto; justify-self: start; order: 3; margin-top: 4px; gap: 14px; }
  .cl-hero__lockup .clay__crumbs svg { height: 26px; }
  .cl-hero__lockup img { height: 32px; }
  .cl-hero__head .lede { order: 2; }
}
@media (max-width: 520px) {
  .cl-hero__lockup { gap: 12px; }
  .cl-hero__lockup .clay__crumbs svg { height: 23px; }
  .cl-hero__lockup img { height: 28px; }
  .cl-chip { padding: 12px 14px; }
  .cl-chip__n { flex-basis: 70px; }
}

/* ---------- Anatomy ---------- */

.cl-anat-sec { padding-top: 0; }
.cl-anat-sec .sec-head { border-top: 1px solid var(--ink-line); padding-top: clamp(64px, 8vw, 104px); }

.cl-anat { margin: 0; border-radius: var(--radius-lg); border: 1px solid var(--ink-line); background: var(--ink-2); overflow: hidden; }
.cl-anat__bar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--ink-line); font-family: var(--mono); font-size: 12.5px; color: var(--on-ink-muted); }
.cl-anat__meta { margin-left: auto; }

.cl-anat__ctl { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; padding: 14px 20px; border-bottom: 1px solid var(--ink-line); }
.cl-anat__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 15px; color: var(--on-ink); }
.cl-anat__tag { font-family: var(--mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--on-ink-muted); background: var(--ink-3); padding: 5px 8px; border-radius: 6px; }
.cl-anat__tag b { color: var(--on-ink); font-weight: 500; }
.cl-anat__btns { display: inline-flex; gap: 3px; padding: 3px; border-radius: 11px; background: rgba(244, 240, 232, 0.06); }
.cl-anat__btns button { font: 500 12.5px/1 var(--mono); letter-spacing: .04em; height: 30px; min-width: 32px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--on-ink-muted); cursor: pointer; transition: background .2s, color .2s; }
.cl-anat__btns button:hover { color: var(--on-ink); }
.cl-anat__btns button[data-row][aria-pressed="true"] { background: var(--on-ink); color: var(--ink); }
.cl-anat__btns .cl-anat__pause { margin-left: 4px; position: relative; }
.cl-anat__btns .cl-anat__pause::before { content: ""; position: absolute; left: -4px; top: 7px; bottom: 7px; width: 1px; background: var(--ink-line-strong); }
.cl-anat__btns .cl-anat__pause.is-paused { color: var(--on-ink); }
.no-js .cl-anat__btns { display: none; }
@media (pointer: coarse), (max-width: 760px) {
  .cl-anat__btns button { height: 40px; min-width: 44px; }
  .cl-anat__btns .cl-anat__pause::before { top: 10px; bottom: 10px; }
}

.cl-anat__body { position: relative; padding: 28px 22px 26px; }
.cl-anat__canvas { position: relative; }
.cl-anat__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(7, auto);
}

.cl-stg { --c: var(--on-ink); grid-row: span 7; display: grid; grid-template-rows: subgrid; position: relative; padding: 0 10px 0 12px; min-width: 0; }
/* vertical divider */
.cl-stg + .cl-stg::after { content: ""; position: absolute; left: 0; top: 34px; bottom: 0; width: 1px; background: var(--ink-line); }
/* track segment to the next node */
.cl-stg:not(:last-child)::before { content: ""; position: absolute; top: 5.25px; left: 26px; right: -10px; height: 1.5px; background: var(--ink-line-strong); transition: background .8s var(--ease); }
.cl-stg:has(+ .cl-stg.is-done)::before { background: rgba(244, 240, 232, 0.55); }

.cl-stg__node { width: 12px; height: 12px; border-radius: 50%; background: var(--ink-2); border: 1.5px solid var(--on-ink-muted); position: relative; z-index: 1; margin-left: 0; transition: background .4s, border-color .4s; }
.cl-stg--gate .cl-stg__node { border-radius: 2px; width: 11px; height: 11px; transform: rotate(45deg); margin: 0.5px 0 0 0.5px; }
.cl-stg.is-done .cl-stg__node { background: var(--c); border-color: var(--c); }
.cl-stg.is-stop .cl-stg__node { background: var(--sig-role); border-color: var(--sig-role); }

.cl-stg__head { display: flex; align-items: center; gap: 8px; margin-top: 20px; }
.cl-stg__n { font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em; color: var(--on-ink-muted); }
.ct--data { background: var(--sig-news); }
.ct--push { background: var(--accent); color: var(--ink); }
.cl-stg__t { font-family: var(--serif); font-size: 22px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.1; margin-top: 12px; transition: color .3s; }
.cl-stg__d { font-size: 13px; line-height: 1.45; color: var(--on-ink-muted); margin-top: 6px; text-wrap: pretty; }

.cl-stg__out {
  margin-top: 14px; min-height: 80px; padding: 9px 10px; border-radius: 9px;
  border: 1px dashed var(--ink-line-strong);
  font-size: 12.5px; line-height: 1.38; color: var(--on-ink-muted);
  transition: border-color .4s, background .4s, color .4s, opacity .4s;
}
.cl-stg__out span { display: block; }
.is-live .cl-stg__out span { animation: cl-in .45s var(--ease) both; }
@keyframes cl-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.cl-stg.is-done .cl-stg__out { border-style: solid; border-color: rgba(244, 240, 232, 0.22); background: rgba(244, 240, 232, 0.05); color: var(--on-ink); }
@supports (background: color-mix(in srgb, red 10%, transparent)) {
  .cl-stg.is-done .cl-stg__out { border-color: color-mix(in srgb, var(--c) 42%, transparent); background: color-mix(in srgb, var(--c) 8%, transparent); }
}
.cl-stg.is-stop .cl-stg__out { border-color: rgba(255, 138, 91, 0.7); background: rgba(255, 138, 91, 0.12); color: #ffd6c6; }
.cl-stg.is-skip .cl-stg__out { font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; }
.cl-stg.is-skip .cl-stg__t, .cl-stg.is-skip .cl-stg__head { opacity: .45; }
.cl-stg.is-skip .cl-stg__d { opacity: .8; }
.cl-stg.is-on .cl-stg__t { color: var(--c); }
.cl-stg.is-stop .cl-stg__t { color: var(--sig-role); }

.cl-stg__count { font-family: var(--mono); font-size: 11.5px; color: var(--on-ink-muted); margin-top: 18px; letter-spacing: .02em; }
.cl-stg__count b { color: var(--on-ink); font-weight: 500; }

.cl-cols { list-style: none; margin: 9px 0 0; padding: 0; display: grid; gap: 3px; align-content: start; }
.cl-cols li {
  display: block; height: 18px; line-height: 18px; padding: 0 6px; border-radius: 4px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .01em;
  color: rgba(244, 240, 232, 0.52); background: rgba(244, 240, 232, 0.035);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background .35s, color .35s, opacity .35s;
}
.cl-cols li::before { content: ""; display: inline-block; vertical-align: middle; width: 5px; height: 5px; border-radius: 50%; margin: -2px 6px 0 0; background: var(--k, transparent); box-shadow: inset 0 0 0 1px var(--kb, transparent); }
.cl-stg.is-done .cl-cols li { color: var(--on-ink); background: rgba(244, 240, 232, 0.08); }
@supports (background: color-mix(in srgb, red 10%, transparent)) {
  .cl-stg.is-done .cl-cols li { background: color-mix(in srgb, var(--c) 13%, transparent); }
}
.cl-stg.is-skip .cl-cols li { opacity: .35; }
.cl-stg.is-run .cl-cols li:nth-child(2) { transition-delay: .03s; } .cl-stg.is-run .cl-cols li:nth-child(3) { transition-delay: .06s; } .cl-stg.is-run .cl-cols li:nth-child(4) { transition-delay: .09s; }
.cl-stg.is-run .cl-cols li:nth-child(5) { transition-delay: .12s; } .cl-stg.is-run .cl-cols li:nth-child(6) { transition-delay: .15s; } .cl-stg.is-run .cl-cols li:nth-child(7) { transition-delay: .18s; } .cl-stg.is-run .cl-cols li:nth-child(8) { transition-delay: .21s; }
.cl-stg.is-run .cl-cols li:nth-child(9) { transition-delay: .24s; } .cl-stg.is-run .cl-cols li:nth-child(10) { transition-delay: .27s; } .cl-stg.is-run .cl-cols li:nth-child(11) { transition-delay: .30s; } .cl-stg.is-run .cl-cols li:nth-child(12) { transition-delay: .33s; }
.cl-stg.is-run .cl-cols li:nth-child(13) { transition-delay: .36s; } .cl-stg.is-run .cl-cols li:nth-child(14) { transition-delay: .39s; } .cl-stg.is-run .cl-cols li:nth-child(15) { transition-delay: .42s; } .cl-stg.is-run .cl-cols li:nth-child(16) { transition-delay: .45s; }

/* column type keys (shared by blocks and legend) */
.t-s { --k: var(--on-ink); }
.t-d { --k: var(--sig-news); }
.t-a { --k: var(--sig-champion); }
.t-c { --k: var(--sig-social); }
.t-q { --k: var(--sig-hiring); }
.t-p { --k: var(--accent); }
.t-f { --k: transparent; --kb: rgba(244, 240, 232, 0.5); }

/* the row travelling through */
.cl-anat__dot {
  position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; border-radius: 50%; z-index: 3;
  background: var(--on-ink);
  box-shadow: none;
  transition: transform .8s var(--ease), background .35s, scale .35s;
  pointer-events: none;
}
.cl-anat__dot.is-stop { background: var(--sig-role); }
.no-js .cl-anat__dot { display: none; }

.cl-anat__legend { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 14px 20px; border-top: 1px solid var(--ink-line); font-family: var(--mono); font-size: 11.5px; color: var(--on-ink-muted); letter-spacing: .02em; }
.cl-anat__legend span { display: inline-flex; align-items: center; gap: 7px; }
.cl-anat__legend .k { width: 7px; height: 7px; border-radius: 50%; background: var(--k, transparent); box-shadow: inset 0 0 0 1px var(--kb, transparent); }
.cl-anat__legend .g { width: 8px; height: 8px; border-radius: 1.5px; border: 1.5px solid var(--on-ink-muted); transform: rotate(45deg); }
.cl-anat__gk { margin-left: auto; }
.cl-anat .figcap { margin: 0; padding: 0 20px 18px; max-width: 110ch; }

/* notes under the table */
.cl-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 30px; }
.cl-notes > div { border-top: 1px solid var(--ink-line-strong); padding-top: 18px; display: grid; gap: 8px; align-content: start; }
.cl-notes h3 { font-size: clamp(21px, 1.8vw, 25px); }
.cl-notes p { color: var(--on-ink-muted); font-size: 15.5px; max-width: 36ch; }

/* mid widths: the table scrolls inside its frame, never the page */
@media (max-width: 1139px) and (min-width: 861px) {
  .cl-anat__body { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--ink-3) transparent; }
  .cl-anat__canvas { min-width: 1060px; }
  .cl-anat__body:not(.is-end) { -webkit-mask-image: linear-gradient(to right, #000 88%, transparent); mask-image: linear-gradient(to right, #000 88%, transparent); }
  .cl-anat__body:focus-visible { -webkit-mask-image: none; mask-image: none; outline-offset: -3px; }
}

/* narrow: the table turns into a vertical run */
@media (max-width: 860px) {
  .cl-anat__bar .cl-anat__meta { display: none; }
  .cl-anat__ctl { padding: 14px 16px; }
  .cl-anat__row { font-size: 14px; }
  .cl-anat__body { padding: 24px 16px 8px; }
  .cl-anat__grid { grid-template-columns: 1fr; grid-template-rows: none; }
  .cl-stg { grid-row: auto; grid-template-rows: none; grid-template-columns: 14px minmax(0, 1fr); column-gap: 16px; padding: 0 0 28px; }
  .cl-stg > * { grid-column: 2; }
  .cl-stg__node { grid-column: 1; grid-row: 1 / span 6; margin-top: 4px; }
  .cl-stg + .cl-stg::after { display: none; }
  .cl-stg:not(:last-child)::before { top: 18px; bottom: 2px; left: 5.25px; right: auto; width: 1.5px; height: auto; }
  .cl-stg__head { margin-top: 0; }
  .cl-stg__t { margin-top: 8px; font-size: 23px; }
  .cl-stg__d { font-size: 14.5px; max-width: 46ch; }
  .cl-stg__out { min-height: 44px; font-size: 14px; margin-top: 12px; }
  .cl-stg__count { margin-top: 12px; }
  .cl-cols { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 4px; margin-top: 8px; }
}
@media (max-width: 560px) {
  .cl-cols { display: flex; flex-wrap: wrap; gap: 4px; }
  .cl-cols li { width: 13px; height: 13px; padding: 0; font-size: 0; line-height: 0; border-radius: 3px; background: rgba(244, 240, 232, 0.05); position: relative; overflow: hidden; }
  .cl-cols li::before { position: absolute; inset: 3.5px; width: auto; height: auto; margin: 0; border-radius: 50%; }
  .cl-anat__legend { padding: 14px 16px; }
  .cl-anat__gk { margin-left: 0; }
  .cl-anat .figcap { padding: 0 16px 16px; }
  .cl-notes { grid-template-columns: 1fr; gap: 0; margin-top: 18px; }
  .cl-notes > div { padding: 18px 0 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .cl-anat__dot, .cl-stg__out, .cl-cols li, .cl-stg::before { transition: none; }
  .is-live .cl-stg__out span { animation: none; }
}

/* ---------- How we build ---------- */

.cl-habits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.cl-habit { padding: 32px 30px 38px 0; display: grid; gap: 12px; align-content: start; border-bottom: 1px solid var(--line); }
.cl-habit:not(:nth-child(3n+1)) { padding-left: 30px; border-left: 1px solid var(--line); }
.cl-habit h3 { font-size: clamp(22px, 1.9vw, 27px); }
.cl-habit .body { max-width: 38ch; }
.cl-habit__n { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--muted); }
.cl-pic { width: 96px; height: 48px; color: var(--text); margin-bottom: 14px; overflow: visible; }
.cl-pic .p-line { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cl-pic .p-soft { opacity: .35; }
.cl-pic .p-thick { stroke-width: 2.2; }
.cl-pic .p-on { stroke: var(--paper); opacity: .5; }
.cl-pic .p-box { fill: none; stroke: currentColor; stroke-width: 1.5; }
.cl-pic .p-fill { fill: var(--text); }
.cl-pic .p-acc, .cl-pic .p-acc-f { fill: var(--accent); }
.cl-pic .p-ai { fill: var(--sig-champion); }
.cl-pic .p-knob { fill: var(--text); }
.cl-pic .p-grid rect:not(.p-acc-f) { fill: var(--paper-3); }

.cl-habit { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.cl-habits.in .cl-habit { opacity: 1; transform: none; }
.cl-habits.in .cl-habit:nth-child(2) { transition-delay: .08s; } .cl-habits.in .cl-habit:nth-child(3) { transition-delay: .16s; }
.cl-habits.in .cl-habit:nth-child(4) { transition-delay: .24s; } .cl-habits.in .cl-habit:nth-child(5) { transition-delay: .32s; } .cl-habits.in .cl-habit:nth-child(6) { transition-delay: .40s; }
.no-js .cl-habit { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .cl-habit { opacity: 1; transform: none; transition: none; } }

@media (max-width: 900px) {
  .cl-habits { grid-template-columns: 1fr 1fr; }
  .cl-habit:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; }
  .cl-habit { padding-right: 24px; }
  .cl-habit:nth-child(2n) { padding-left: 24px; padding-right: 0; border-left: 1px solid var(--line); }
}
@media (max-width: 600px) {
  .cl-habits { grid-template-columns: 1fr; }
  .cl-habit, .cl-habit:nth-child(2n) { padding: 26px 0 28px; border-left: 0; }
  .cl-pic { margin-bottom: 6px; }
}

/* ---------- Two ways ---------- */

.cl-ways { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(7, auto); column-gap: 16px; }
.cl-way { grid-row: span 7; display: grid; grid-template-rows: subgrid; row-gap: 0; background: #fbf9f4; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(22px, 3vw, 38px); }
.cl-way__top { display: grid; gap: 12px; align-content: start; padding-bottom: 26px; }
.cl-way__n { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cl-way h3 { font-size: clamp(26px, 2.5vw, 34px); }
.cl-way__fig { width: 100%; max-width: 360px; height: auto; margin-top: 14px; color: var(--text); overflow: visible; }
.cl-way__rows { grid-row: span 6; display: grid; grid-template-rows: subgrid; margin: 0; }
.cl-way__rows > div { display: grid; grid-template-columns: minmax(118px, 32%) 1fr; gap: 18px; padding: 14px 0; border-top: 1px solid var(--line); align-items: baseline; }
.cl-way__rows dt { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cl-way__rows dd { margin: 0; font-size: 16px; line-height: 1.45; text-wrap: pretty; }
.cl-way--ink { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.cl-way--ink .cl-way__n, .cl-way--ink .cl-way__rows dt { color: var(--on-ink-muted); }
.cl-way--ink .cl-way__rows > div { border-color: var(--ink-line); }
.cl-way--ink .cl-way__fig { color: var(--on-ink); }

.cl-way__fig text { font-family: var(--mono); }
.cl-way__fig .w-zone { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-dasharray: 4 5; opacity: .55; }
.cl-way__fig .w-lbl { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; fill: currentColor; opacity: .7; }
.cl-way__fig .w-table rect { fill: none; stroke: currentColor; stroke-width: 1.4; }
.cl-way__fig .w-table path { fill: none; stroke: currentColor; stroke-width: 1; opacity: .3; }
.cl-way__fig .w-node { fill: none; stroke: currentColor; stroke-width: 1.2; opacity: .9; }
.cl-way__fig .w-t { font-size: 11.5px; fill: currentColor; }
.cl-way__fig .w-link { fill: none; stroke: var(--accent); stroke-width: 1.6; }
.cl-way__fig .w-dash { stroke-dasharray: 3 4; }
.cl-way__fig .w-us { fill: var(--text); }
.cl-way__fig .w-us-t { font-size: 11px; fill: var(--paper); letter-spacing: .02em; }
.cl-way__fig .w-c0 { fill: var(--sig-role); }
.cl-way__fig .w-c1 { fill: var(--sig-champion); }
.cl-way__fig .w-c2 { fill: var(--sig-hiring); }
.cl-way__fig .w-c3 { fill: var(--sig-social); }

.cl-ways__foot { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; color: var(--muted); font-size: 16px; }

@media (max-width: 900px) {
  .cl-ways { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 16px; }
  .cl-way { grid-row: auto; grid-template-rows: none; }
  .cl-way__rows { grid-row: auto; grid-template-rows: none; }
}
@media (max-width: 520px) {
  .cl-way__rows > div { grid-template-columns: 1fr; gap: 4px; padding: 12px 0; }
  .cl-way__fig .w-t { font-size: 15px; }
  .cl-way__fig .w-lbl { font-size: 13px; }
  .cl-way__fig .w-us-t { font-size: 13px; }
}

/* ---------- Clay Cup ---------- */

.cl-cup__in { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: clamp(36px, 7vw, 110px); align-items: center; }
.cl-cup__card { margin: 0; }
.cl-cup__card img { width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--ink-line); background: #000; }
.cl-cup__copy { display: grid; gap: 22px; align-content: center; }
.cl-cup__copy .lede { max-width: 44ch; }
.cl-cup__copy .body { max-width: 44ch; }
.cl-cup__field { margin: 6px 0 0; max-width: 420px; }
.cl-field { width: 100%; height: auto; display: block; }
.cl-field .cf-dot { fill: rgba(244, 240, 232, 0.28); }
.cl-field .cf-lit { fill: var(--accent); }
.cl-cup__field .figcap { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 14px; }
.cl-cup__field .figcap span { display: inline-flex; align-items: center; gap: 8px; }
.cf-k { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.cf-k--all { background: rgba(244, 240, 232, 0.4); }
.cf-k--lit { background: var(--accent); }
.cl-field .cf-lit { transform-box: fill-box; transform-origin: center; }
.cl-cup__field .cl-field .cf-dot { transition: fill .9s var(--ease) var(--d); }
.cl-cup__field:not(.in) .cl-field .cf-lit { opacity: .25; transform: scale(.55); }
.cl-cup__field .cl-field .cf-lit { transition: opacity .8s var(--ease) .9s, transform .8s var(--ease) .9s; }
.cl-cup__field.in .cl-field .cf-dot { fill: rgba(244, 240, 232, 0.2); }
.no-js .cl-cup__field .cl-field .cf-lit { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .cl-cup__field .cl-field .cf-lit { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 860px) {
  .cl-cup__in { grid-template-columns: 1fr; }
  .cl-cup__card { max-width: 420px; }
}

/* ---------- Stack ---------- */

.cl-hub { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 300px) minmax(0, 1fr); gap: clamp(56px, 8vw, 120px); align-items: center; }
.cl-hub__wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.cl-hub__wires .wire { fill: none; stroke: var(--text); stroke-opacity: .3; stroke-width: 1.4; }
.cl-hub__wires .wire-end { fill: var(--paper); stroke: var(--text); stroke-opacity: .55; stroke-width: 1.4; }
.cl-hub__wires .wire-run { fill: var(--accent); }
.cl-hub__side { display: grid; gap: 18px; position: relative; z-index: 1; }
.cl-node { background: #fbf9f4; border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px 18px; display: grid; gap: 8px; }
.cl-node__k { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.cl-node h3 { font-size: 23px; }
.cl-node p { font-size: 15px; color: var(--muted); text-wrap: pretty; }
.cl-node__w { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-top: 4px; letter-spacing: .02em; }
.cl-node__w::before { content: ""; width: 16px; height: 1.5px; background: var(--accent); }

.cl-hub__core { position: relative; z-index: 1; background: var(--ink); color: var(--on-ink); border-radius: var(--radius-lg); padding: 34px 26px 30px; display: grid; gap: 14px; justify-items: center; text-align: center; }
.cl-hub__ring { position: absolute; inset: -14px; border: 1px dashed var(--line); border-radius: 32px; pointer-events: none; }
.cl-hub__core img { width: 128px; height: auto; }
.cl-hub__core p { font-family: var(--serif); font-weight: 650; font-size: 21px; letter-spacing: -0.02em; }
.cl-hub__core ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.cl-hub__core li { font-family: var(--mono); font-size: 11px; letter-spacing: .03em; color: var(--on-ink-muted); border: 1px solid var(--ink-line-strong); border-radius: 999px; padding: 5px 10px; }
#stack .figcap { margin-top: 40px; }

@media (max-width: 1139px) and (min-width: 861px) {
  .cl-hub { gap: 44px; grid-template-columns: minmax(0, 1fr) 216px minmax(0, 1fr); }
  .cl-hub__core { padding: 28px 18px 24px; }
  .cl-hub__core img { width: 108px; }
  .cl-hub__core p { font-size: 19px; }
}
@media (max-width: 860px) {
  .cl-hub { grid-template-columns: 1fr; gap: 40px; }
  .cl-hub__wires { display: none; }
  .cl-hub__core { max-width: 420px; width: 100%; justify-self: center; }
  .cl-hub__ring { display: none; }
  .cl-hub__core::before, .cl-hub__core::after { content: ""; position: absolute; left: 50%; width: 1.5px; height: 40px; background: var(--line); }
  .cl-hub__core::before { top: -40px; }
  .cl-hub__core::after { bottom: -40px; }
}