/* dzidzi components. Everything is drawn from the line: cells you read and press, small pills that switch, dots that count. */

/* ---- buttons are cells you press: square corners, the height of a field. On hover one dot runs once around
   the rim (the orbit, in miniature). --r is the corner; the rim follows it. */
.btn {
  --r: 0px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 48px; padding: 0 24px; border-radius: var(--r); border: 0; text-decoration: none; cursor: pointer;
  font: 600 16px/1 var(--font-body); letter-spacing: -.01em; white-space: nowrap; background: none; color: var(--fg);
  transition: transform .2s var(--ease-ui), background-color .2s var(--ease-ui), box-shadow .2s var(--ease-ui);
}
.btn:active { transform: scale(.985); }
.btn--primary { background: var(--accent); color: var(--btn-ink); }
.btn--ghost { box-shadow: inset 0 0 0 1px var(--hair); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--hair-strong); }
.btn--small { min-height: 40px; padding: 0 18px; font-size: 14px; }
.btn__orbit { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.btn__orbit rect { x: .75px; y: .75px; width: calc(100% - 1.5px); height: calc(100% - 1.5px); rx: var(--r); ry: var(--r); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 5 95; stroke-dashoffset: 0; opacity: 0; }
.btn--primary .btn__orbit rect { stroke: var(--btn-ink); }
.btn--ghost .btn__orbit rect { stroke: var(--fg); }
@keyframes orbit-once { 0% { stroke-dashoffset: 0; opacity: 1; } 85% { opacity: 1; } 100% { stroke-dashoffset: -100; opacity: 0; } }
.btn:hover .btn__orbit rect, .btn:focus-visible .btn__orbit rect { animation: orbit-once .9s cubic-bezier(.3, 0, .2, 1) 1; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
/* a quiet link with a dot that steps forward */
.more { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; text-decoration: none; }
.more::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--spark); transition: transform .3s var(--ease-out); }
.more:hover::after { transform: translateX(5px); }

/* ---- chips and marks */
.chip { display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 11px; border: 1px solid var(--hair); border-radius: 999px; font: 400 10px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg); white-space: nowrap; }
.chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .55; }
.chip--accent::before { background: var(--spark); opacity: 1; }
/* the orbit mark: one ring and dots that count. One dot, two dots, three. It turns a little when its cell is hovered. */
.mark { width: 40px; height: 40px; flex: none; overflow: visible; transition: transform 1.1s var(--ease-out); }
.mark circle.ring { fill: none; stroke: var(--hair-strong); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .7; }
.mark circle.d { fill: var(--fg); }
.mark circle.d.a { fill: var(--spark); }
.cell:hover .mark, .cell:focus-within .mark { transform: rotate(60deg); }
/* ---- cells: the hero's grid, continued. A group of cells is one surface; the gaps between them are the line.
   Under the pointer the line comes forward in a small spot, as the hero's grid does. */
.cells {
  --n: 3; --mx: -999px; --my: -999px;
  display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 1px; padding-block: 1px;
  background:
    radial-gradient(circle 140px at var(--mx) var(--my), var(--fg) 0, var(--fg) 28%, transparent) no-repeat,
    linear-gradient(var(--hair), var(--hair)), var(--bg);
}
.cells[data-n="2"] { --n: 2; }
.cell { position: relative; background: var(--bg); padding: max(var(--pad), 28px) var(--pad); display: flex; flex-direction: column; gap: 14px; min-width: 0; transition: background-color .5s var(--ease-ui); }
.cell__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; margin-bottom: calc(var(--cell) * .6); }
.cell p { color: var(--muted); }
.cell p.label { color: var(--label); }
.cell .h2, .cell .h3 { color: var(--fg); }
@media (max-width: 899px) { .tier__for, .tier__note { min-height: 0; } .tier .switch[aria-hidden="true"] { display: none; }
  .cells, .cells[data-n] { --n: 1; } }

/* ---- band: a divider made of the hero's grid. Two lines, and one or two rows of grid cells between them. The
   cells are placed by the script (site.js) so there is a column for every column of the hero; under the pointer
   the lines come forward in a small spot, as they do there. */
.band {
  --cols: 30; --mx: -999px; --my: -999px;
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 1px; border-block: 1px solid var(--hair);
  background:
    radial-gradient(circle 120px at var(--mx) var(--my), var(--fg) 0, var(--fg) 26%, transparent) no-repeat,
    linear-gradient(var(--grid), var(--grid)), var(--bg);
}
.band > i { display: block; aspect-ratio: 1; background: var(--bg); transition: background-color .5s var(--ease-ui); }
.band:empty { height: 81px; background: linear-gradient(to right, var(--grid) 1px, transparent 1px) -1px 0 / 40px 100%, linear-gradient(to bottom, transparent 39px, var(--grid) 39px, var(--grid) 40px, transparent 40px) 0 0 / 100% 100%, var(--bg); }
/* a chapter band (chapters.js): on its bottom row the chapter's number, on whole cells; on its top line a rose
   dot, and behind it the line filled from the left rail: the story so far. Until the cells are placed, and
   without script, the band is the grid drawn as a background. */
.band--chapter { position: relative; }
.band--joined { border-top: 0; }
.band__slate { grid-column: 1 / span 3; grid-row: 2; display: flex; align-items: center; padding-left: var(--pad); background: var(--bg); font: 400 10.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--label); white-space: nowrap; transition: background-color .5s var(--ease-ui); }
.band__track, .band__dot { position: absolute; z-index: 3; left: 0; pointer-events: none; }
.band__track { top: -1px; height: 1px; width: 0; background: var(--hair-strong); }
.band__dot { top: -6px; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: var(--spark); will-change: transform; }
.band__dot::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid var(--hair-strong); opacity: .6; }
.band--chapter:not(.is-filled) { display: block; height: 81px; background: linear-gradient(to right, var(--grid) 1px, transparent 1px) -1px 0 / 40px 100%, linear-gradient(to bottom, transparent 39px, var(--grid) 39px, var(--grid) 40px, transparent 40px) 0 0 / 100% 100%, var(--bg); }
.band--chapter:not(.is-filled) > * { display: none; }

/* ---- stage: a panel of the hero's grid with a video on it (assets/js/work.js). The video's frame is placed by
   the script so that it covers whole cells: the grid's own lines are its border. Under it, a bar with what the
   video is and one button to pause it. Without script there is no grid and the video simply fills its column,
   with the browser's controls. */
.stage { position: relative; }
.stage .band { display: none; border-block: 0; }
.stage.is-live .band { display: grid; }
.stage__media { position: relative; aspect-ratio: 16 / 9; background: var(--bg); overflow: hidden; }
.stage.is-live .stage__media { position: absolute; aspect-ratio: auto; cursor: pointer; box-shadow: 0 0 0 1px var(--hair); }
.stage__media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.stage__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
.stage__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; min-height: 60px; padding: 0 var(--pad); border-top: 1px solid var(--hair); }
.stage__bar .pillbtn { margin-left: auto; }
html:not(.js) .stage__bar .pillbtn { display: none; }
/* a small pill that changes a setting, like the mode button */
.pillbtn { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; min-width: 76px; justify-content: center; font: 500 13px/1 var(--font-body); color: var(--fg); background: transparent; border: 1px solid var(--hair); border-radius: 999px; padding: 0 14px; cursor: pointer; transition: border-color .2s var(--ease-ui); }
.pillbtn:hover { border-color: var(--hair-strong); }
.pillbtn::before { content: ""; width: 8px; height: 8px; background: linear-gradient(90deg, var(--fg) 34%, transparent 34%, transparent 66%, var(--fg) 66%); }
.stage:not(.is-playing) ~ .stage__bar .pillbtn::before { width: 0; height: 0; background: none; border-left: 8px solid var(--fg); border-block: 5px solid transparent; }
@media (max-width: 479px) { .stage__meta { display: none; } }

/* ---- tiers. Each tier's mark sits in a pool of light, and the light grows with the tier: a glimmer for
   Simple, a glow for Signature, a full lamp for Experience. The pools are alive: each circles its mark slowly and
   breathes, a little out of step with its neighbours, so the light seems to pass along the row. Hovering a tier
   turns its light up. Only transform and opacity move, so nothing is repainted. */
.tier { position: relative; overflow: hidden; isolation: isolate; gap: 0; --lit: .36; --reach: 180px; --orbit-r: 20px; --orbit-t: 19s; }
.tier::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%;
  left: calc(var(--pad) + 20px - var(--reach)); top: calc(var(--pad) + 20px - var(--reach));
  width: calc(var(--reach) * 2); height: calc(var(--reach) * 2);
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--accent) var(--lit-peak, 78%), transparent) 0,
    color-mix(in srgb, var(--accent) calc(var(--lit-peak, 78%) * .42), transparent) 30%,
    color-mix(in srgb, var(--accent) calc(var(--lit-peak, 78%) * .13), transparent) 62%, transparent 100%);
  opacity: var(--lit); transition: opacity .6s var(--ease-ui);
  animation: tier-orbit var(--orbit-t) linear infinite, tier-breathe 6.5s ease-in-out infinite alternate;
  animation-delay: var(--orbit-d, 0s), var(--orbit-d, 0s); will-change: transform;
}
:root[data-mode="dark"] .tier { --lit-peak: 50%; }
.tier--2 { --lit: .64; --reach: 290px; --orbit-r: 34px; --orbit-t: 15s; --orbit-d: -2.2s; }
.tier--3 { --lit: .86; --reach: 430px; --orbit-r: 52px; --orbit-t: 12s; --orbit-d: -4.4s; }
.tier:hover, .tier:focus-within { --lit: .62; }
.tier--2:hover, .tier--2:focus-within { --lit: .88; }
.tier--3:hover, .tier--3:focus-within { --lit: 1; }
@keyframes tier-orbit { from { transform: rotate(0deg) translateX(var(--orbit-r)) rotate(0deg); } to { transform: rotate(360deg) translateX(var(--orbit-r)) rotate(-360deg); } }
@keyframes tier-breathe { from { scale: .9; } to { scale: 1.12; } }
@media (prefers-reduced-motion: reduce) { .tier::before { animation: none; } }
.tier .mark circle.ring { opacity: 1; }
.tier__name { margin-bottom: 10px; }
.tier__for { min-height: 4.6em; }
.tier__price { display: flex; align-items: baseline; gap: 10px; margin-top: calc(var(--cell) * .7); font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 4vw, 56px); line-height: 1; letter-spacing: -.035em; color: var(--fg) !important; }
.tier__price .from { font: 400 10.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--label); }
.tier__price [data-swap] { display: inline-block; transition: opacity .25s var(--ease-ui), transform .35s var(--ease-out); }
.tier__price [data-swap].is-out { opacity: 0; transform: translateY(8px); }
.tier__note { margin-top: 10px; min-height: 2.8em; }
.tier__note > span:not(.sr-only) { display: block; }   /* the usual price, then the first draft: two lines, on purpose */
.tier .switch { margin-top: calc(var(--cell) * .5); }
.ticks { display: grid; gap: 9px; margin-top: calc(var(--cell) * .7); padding-top: calc(var(--cell) * .7); border-top: 1px solid var(--hair); font-size: 15px; line-height: 1.4; }
.ticks li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; align-items: baseline; }
.ticks li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--fg); transform: translateY(-2px); }
.tier .actions { margin-top: auto; padding-top: calc(var(--cell) * .8); }
/* Side by side, the three tiers share their rows, so the names, prices, notes, lists and buttons stand level
   however long the words above them run. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 900px) {
    .tier { display: grid; grid-row: span 8; grid-template-rows: subgrid; row-gap: 0; }
    .tier .switch { justify-self: start; }
    .tier .ticks { align-content: start; }   /* a shorter list keeps its own spacing, and the row's spare room falls below it */
    .tier__for, .tier__note { min-height: 0; }
  }
}

/* ---- switch: a two-way control. One slim shape slides between the two. */
.switch { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 3px; border: 1px solid var(--hair); border-radius: 999px; font-size: 14px; font-weight: 500; line-height: 1; align-self: flex-start; }
.switch::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px; background: var(--fg); transition: transform .4s var(--ease-out); }
.switch:has(label:nth-of-type(2) input:checked)::before { transform: translateX(100%); }
.switch label { position: relative; display: grid; place-items: center; min-height: 34px; padding: 0 16px; cursor: pointer; white-space: nowrap; transition: color .25s var(--ease-ui); }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.switch label:has(input:checked) { color: var(--bg); }
.switch label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 999px; }

/* ---- step rail: dots on a line. The active dot takes the accent and its own small orbit. */
.steps { position: relative; display: grid; }
.steps::before { content: ""; position: absolute; left: calc(var(--pad) + 5px); top: var(--rail-top, 30px); bottom: var(--rail-bottom, 30px); width: 1px; background: var(--hair); }   /* from the first dot to the last (site.js) */
.step { position: relative; display: grid; grid-template-columns: 11px 44px minmax(0, 1fr) auto; column-gap: 18px; align-items: center; padding: 16px var(--pad); cursor: default; }
.step__dot { position: relative; width: 11px; height: 11px; border-radius: 50%; background: var(--bg); border: 1px solid var(--hair-strong); transition: background-color .3s var(--ease-ui), border-color .3s var(--ease-ui), transform .5s var(--ease-out); }
.step__dot::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid var(--hair-strong); opacity: 0; transform: scale(.6); transition: opacity .4s var(--ease-ui), transform .6s var(--ease-out); }
.step.is-done .step__dot { background: var(--fg); border-color: var(--fg); }
.step.is-active .step__dot { background: var(--spark); border-color: var(--spark); transform: scale(1.18); }
.step.is-active .step__dot::after { opacity: .6; transform: none; }
.step__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.2; letter-spacing: -.015em; color: color-mix(in srgb, var(--fg) 72%, transparent); transition: color .3s var(--ease-ui); }
.step.is-active .step__title, .step:hover .step__title { color: var(--fg); }
.step__body { grid-column: 3 / -1; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease-out); }
.step__body > div { overflow: hidden; }
.step__body p { padding-top: 10px; color: var(--muted); max-width: 56ch; }
.step.is-active .step__body { grid-template-rows: 1fr; }
/* on a phone the chip goes under the title, so the title keeps the width of the line */
@media (max-width: 599px) { .step { grid-template-columns: 11px minmax(0, 1fr); } .step .label { display: none; } .step .chip { grid-column: 2; justify-self: start; margin-top: 8px; } .step__body { grid-column: 2; } }

/* ---- questions: rows on the line. One open at a time (the name attribute does that without script). */
.qa { border-bottom: 1px solid var(--hair); }
.qa:first-of-type { border-top: 1px solid var(--hair); }
.qa summary { display: grid; grid-template-columns: minmax(0, 1fr) 20px; gap: 20px; align-items: center; padding: 22px var(--pad); cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: 600; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.25; letter-spacing: -.015em; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ""; width: 20px; height: 20px; background: linear-gradient(var(--fg), var(--fg)) center / 100% 1px no-repeat, linear-gradient(var(--fg), var(--fg)) center / 1px 100% no-repeat; transition: transform .45s var(--ease-out); }
.qa[open] summary::after { transform: rotate(45deg); }
.qa summary:focus-visible { outline-offset: -3px; }
/* rows answer the pointer: the ground lifts a shade and the cross takes the accent */
.qa summary, .row, .contact__ways a { transition: background-color .25s var(--ease-ui); }
@media (hover: hover) {
  .qa summary:hover, .fold > summary:hover, .fold .row:hover { background-color: color-mix(in srgb, var(--fg) 4.5%, transparent); }
  .qa summary:hover::after, .fold > summary:hover::after { background: linear-gradient(var(--spark), var(--spark)) center / 100% 1.5px no-repeat, linear-gradient(var(--spark), var(--spark)) center / 1.5px 100% no-repeat; }
}
.qa__a { padding: 0 var(--pad) 26px; max-width: calc(62ch + 2 * var(--pad)); color: var(--muted); }
.qa::details-content { block-size: 0; overflow: clip; transition: block-size .5s var(--ease-out), content-visibility .5s allow-discrete; }
.qa[open]::details-content { block-size: auto; }
@supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } }

/* ---- table rows: add-ons */
.rows { display: grid; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 24px; align-items: baseline; padding: 18px var(--pad); border-bottom: 1px solid var(--hair); }
.row:first-child { border-top: 1px solid var(--hair); }
.row__name { font-weight: 500; }
.row__note { grid-column: 1; color: var(--muted); font-size: 14px; line-height: 1.45; max-width: 60ch; }
.row__price { grid-row: 1; grid-column: 2; font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -.01em; font-variant-numeric: lining-nums; white-space: nowrap; }

/* ---- form: fields are cells. Label above, the line around, plain words for errors. */
.form { display: grid; gap: 22px; }
.field { display: grid; gap: 8px; }
.field > label { font-size: 14px; font-weight: 500; }
.field .opt { color: var(--muted); font-weight: 400; }
.input { --field-line: color-mix(in srgb, var(--fg) 55%, transparent); width: 100%; min-height: 52px; padding: 14px 16px; background: transparent; border: 1px solid var(--field-line); border-radius: 0; color: var(--fg); font-size: 17px; line-height: 1.4; transition: border-color .2s var(--ease-ui), box-shadow .2s var(--ease-ui); -webkit-appearance: none; appearance: none; }
textarea.input { min-height: 132px; resize: vertical; }
.input::placeholder { color: color-mix(in srgb, var(--fg) 42%, transparent); }
/* the field's edge is a line you can find: at least 3 to 1 against the ground in either mode */
:root[data-mode="dark"] .input { --field-line: color-mix(in srgb, var(--fg) 40%, transparent); }
.input:hover { border-color: var(--hair-strong); }
.input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--fg); }
.field.is-error .input, .input[aria-invalid="true"] { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.field__error { display: flex; gap: 8px; align-items: baseline; font-size: 14px; color: var(--danger); }
.field__error::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; transform: translateY(-1px); }

/* ---- the portrait frame: a cell with a photograph in it, and one accent dot on its corner. */
.frame { position: relative; border: 1px solid var(--hair); padding: 10px; }
.frame img { width: 100%; height: auto; aspect-ratio: 1800 / 1909; object-fit: cover; }
.frame__dot { position: absolute; right: -6px; top: -6px; width: 11px; height: 11px; border-radius: 50%; background: var(--accent); }
.frame figcaption { display: flex; justify-content: space-between; gap: 12px; padding-top: 10px; }

/* ---- the mode button */
.mode { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; font: 500 13px/1 var(--font-body); color: var(--fg); background: transparent; border: 1px solid var(--hair); border-radius: 999px; padding: 0 13px; cursor: pointer; transition: border-color .2s var(--ease-ui); }
.mode:hover { border-color: var(--hair-strong); }
.mode__dot { width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(90deg, var(--fg) 50%, transparent 50%); border: 1.5px solid var(--fg); }

/* ---- halo: an accent word with a light passing through it (assets/js/halo.js). The light is a soft ellipse
   drawn as a gradient, with no blur filter and no clipping, so it has no edge anywhere. It sits under all of the
   heading's letters: the heading is its stacking context, so neighbouring words are never tinted.
   Two drawings, as for the lamp. On ink the letters turn to light and bloom. On paper nothing can be lighter than
   the page, so the letters take the lamp's deep colour and bleed it into the paper round them.
   Without script, and under reduced motion, the light rests under the middle of the word. */
:is(h1, h2, p):has(.halo) { isolation: isolate; }
.halo { position: relative; display: inline-block; white-space: nowrap; }
.halo__l { position: relative; display: inline-block; white-space: pre; }
.halo__glow, .halo:not(:has(.halo__glow))::before {
  content: ""; position: absolute; z-index: -1; left: 0; top: 50%; width: 4.2em; height: 2em; margin-top: -.98em;
  border-radius: 50%; pointer-events: none; will-change: transform, opacity; opacity: .9;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--lamp-mid) var(--halo-a, 96%), transparent) 0,
    color-mix(in srgb, var(--lamp-mid) calc(var(--halo-a, 96%) * .66), transparent) 34%,
    color-mix(in srgb, var(--accent) calc(var(--halo-a, 96%) * .24), transparent) 66%, transparent 100%);
}
.halo:not(.is-live) .halo__glow, .halo:not(:has(.halo__glow))::before { left: 50%; transform: translateX(-50%); opacity: .75; }
.halo:not(.is-live) .halo__l { color: color-mix(in srgb, var(--lamp-edge) 70%, var(--fg)); text-shadow: 0 0 .1em color-mix(in srgb, var(--lamp-edge) 60%, transparent), 0 0 .3em var(--lamp-mid); }
/* on ink the light itself is dimmer and the letters do the shining */
:root[data-mode="dark"] .halo, .anchor .halo { --halo-a: 34%; }
:root[data-mode="dark"] .halo:not(.is-live) .halo__l, .anchor .halo:not(.is-live) .halo__l { color: inherit; text-shadow: 0 0 .12em var(--accent), 0 0 .4em color-mix(in srgb, var(--accent) 55%, transparent); }

/* ---- the second line of a heading (.lead__sub, and .soft inside a heading): drawn with the line, as an outline,
   like the rings. Chosen by Giorgi on 3 October over a grey and seven other looks. The fill is the ground's own
   colour, painted over the inner half of the stroke: only a fine outer line shows, and the overlaps inside the
   variable font's letters stay hidden. A little more air between letters than the heading has, and more again at
   small sizes, so that neighbouring outlines do not run together. Where a browser cannot stroke text, the line
   falls back to the soft grey (--soft). */
.lead__sub, .d1 .soft, .h2 .soft {
  color: var(--bg); -webkit-text-stroke: clamp(1.5px, .05em, 2.6px) var(--fg); paint-order: stroke fill;
  letter-spacing: -.016em; transition: color .5s var(--ease-ui);
}
@media (max-width: 899px) { .lead__sub, .d1 .soft, .h2 .soft { letter-spacing: .012em; } }
/* On a screen of ordinary density (one device pixel to a CSS pixel) the fine line would fall between pixels and
   go faint, so it is drawn a little thicker there. Dense screens keep the fine one. */
@media (max-resolution: 1.5dppx), (-webkit-max-device-pixel-ratio: 1.5) { .lead__sub, .d1 .soft, .h2 .soft { -webkit-text-stroke-width: clamp(2px, .066em, 3.2px); } }
@supports not ((-webkit-text-stroke: 1px black) and (paint-order: stroke fill)) { .lead__sub, .d1 .soft, .h2 .soft { color: var(--soft); } }
@media (forced-colors: active) { .lead__sub, .d1 .soft, .h2 .soft { color: CanvasText; -webkit-text-stroke: 0; } }