/* site.css — daurenmoldabayev.com. Components for index.html and the five niche pages. Colours and fonts only via tokens.css. */

/* ---- Layout primitives ---- */
.container { max-width: var(--container-max); padding-inline: var(--container-pad); margin-inline: auto; }
.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.band { background: var(--color-paper-2); }
main p, main li, main dd { max-width: var(--measure); }
main p { margin-block: 0 var(--space-md); }
.head { margin-block-end: var(--space-lg); }
.head--square::before { content: ""; display: block; width: 8px; height: 8px; margin-block-end: var(--space-sm); background: var(--color-accent); }
.label, .figure__caption, .colophon, .masthead__line { line-height: 1.4; }

/* ---- Skip link ---- */
.skip-link { position: absolute; inset-inline-start: var(--space-md); top: -100%; padding: var(--space-sm) var(--space-md); background: var(--color-ink); color: var(--color-paper); z-index: var(--z-tooltip); }
.skip-link:focus-visible { top: var(--space-md); }

/* ---- Buttons and links ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
  min-height: var(--hit); padding-inline: var(--space-lg);
  font-family: var(--font-body); font-weight: var(--weight-button); font-size: var(--text-base);
  border: 1px solid var(--color-accent); border-radius: var(--radius-xs);
  background: var(--color-accent); color: var(--color-accent-ink);
  white-space: nowrap; text-decoration: none;
  transition: background-color var(--dur-short) var(--ease-out), transform 100ms var(--ease-out);
}
.btn:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); transform: translateY(-1.5px); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.btn__long { display: none; }
.btn__short { display: inline; }

.link { color: var(--color-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: var(--color-line-strong); }
.link:hover { color: var(--color-accent); text-decoration-color: var(--color-accent); }
.link:active { color: var(--color-accent-hover); }
.link--arrow { display: inline-flex; align-items: center; min-height: var(--hit); font-family: var(--font-mono); font-size: var(--text-sm); white-space: nowrap; }

/* ---- Masthead (N6) ---- */
.masthead { display: contents; }
.masthead__wordmark { margin: 0; text-align: center; font-family: var(--font-display); font-size: var(--text-xl); line-height: var(--leading-tight); padding-block: var(--space-lg) var(--space-sm); }
.masthead__wordmark a { display: inline-flex; align-items: center; min-height: var(--hit); color: var(--color-ink); text-decoration: none; }
.masthead__wordmark a:hover { color: var(--color-accent); }
.masthead__wordmark a:active { color: var(--color-accent-hover); }
.masthead__bar { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); min-height: var(--masthead-bar-height); display: grid; grid-template-rows: minmax(0, 1fr) auto; padding-inline: max(var(--container-pad), env(safe-area-inset-left)) max(var(--container-pad), env(safe-area-inset-right)); }
.masthead__line { width: 100%; max-width: var(--container-max); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: var(--hit); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.masthead__links { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.masthead__links li { display: inline-flex; align-items: center; white-space: nowrap; }
.masthead__links li + li::before { content: "·"; margin-inline: var(--space-sm); line-height: 1; color: var(--color-ink-mute); }
.masthead__line a { color: var(--color-ink); text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; min-height: var(--hit); padding-inline: var(--space-2xs); margin-inline: calc(-1 * var(--space-2xs)); }
.masthead__line a:hover { color: var(--color-accent); }
.masthead__line a:active { color: var(--color-accent-hover); }
.masthead__line a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.masthead__links--wide { display: none; }
.masthead__contents summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-height: var(--hit); color: var(--color-ink); white-space: nowrap; }
.masthead__contents summary::-webkit-details-marker { display: none; }
.masthead__contents summary::after { content: "+"; margin-inline-start: var(--space-xs); }
.masthead__contents[open] summary::after { content: "−"; }
.masthead__contents summary:hover { color: var(--color-accent); }
.masthead__contents summary:active { color: var(--color-accent-hover); }
.masthead__contents .masthead__links { position: absolute; left: 0; right: 0; top: 100%; background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-line); padding: var(--space-sm) var(--container-pad); display: grid; row-gap: var(--space-2xs); }
.masthead__contents .masthead__links li + li::before { content: none; }
.masthead__email-long { display: none; }
.masthead__email-short { display: inline; }
.masthead__rule { border-top: var(--rule-hair) solid var(--color-ink); height: var(--rule-gap); border-bottom: var(--rule-heavy) solid var(--color-ink); }

/* ---- Hero (H2 diptych) ---- */
.hero { min-height: 60dvh; padding-block: var(--space-2xl) var(--space-3xl); overflow: visible; }
.hero__lede { font-size: var(--text-md); max-width: 52ch; margin-block: var(--space-lg) var(--space-xl); }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); }
.hero__mono { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-ink-mute); margin-block-start: var(--space-lg); line-height: 1.4; }
[data-enter] { animation: enter var(--dur-short) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- Figure (three stacked svg layers) ---- */
.figure { display: grid; grid-template-rows: auto auto; margin: 0; max-width: 100%; min-width: 0; }
.figure__layer { grid-area: 1 / 1; width: 100%; height: auto; overflow: visible; display: block; }
.figure__layer text { font-family: var(--font-mono); font-size: var(--figure-label); fill: var(--color-ink-mute); }
.figure__layer .col { font-size: var(--figure-col); text-transform: uppercase; letter-spacing: 0.1em; }
.figure__layer .plate { fill: var(--color-paper-2); stroke: var(--color-ink); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.figure__layer .ink { fill: none; stroke: var(--color-ink); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.figure__layer .bar { fill: var(--color-line); }
.figure__layer .wire { fill: none; stroke: var(--color-line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.figure__layer .wire--dash { stroke-dasharray: 3 4; }
.figure__layer .mark { stroke: var(--color-accent); fill: var(--color-accent); }
.figure__layer polyline.mark { fill: none; stroke-width: 2; }
.figure__caption { grid-area: 2 / 1; margin-block-start: var(--space-sm); font-size: var(--text-xs); color: var(--color-ink-mute); }
.hero__figure { width: 100%; max-width: 32rem; }
@media (hover: none), (pointer: coarse) { [data-tilt] [data-depth] { transform: none !important; } }

/* ---- Who this is for: index rows ---- */
.who { padding-block: var(--space-2xl); }
.row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-sm) var(--space-xl); padding-block: var(--space-lg); min-height: var(--hit); }
.row + .row { border-block-start: var(--rule-hair) solid var(--color-line); }
.row p { margin: 0; }
.row a::after { content: ""; position: absolute; inset: 0; }
.row:has(a:hover) h3 { color: var(--color-accent); }

/* ---- Week (niche): plain list, two uneven columns ---- */
.week { padding-block: var(--space-2xl); }
.week__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--space-xl); }
.week__list li { padding-block: var(--space-sm); border-top: var(--rule-hair) solid var(--color-line-2); }

/* ---- Spec sheet (F3) ---- */
.chain { border-top: var(--rule-hair) solid var(--color-line); padding-block: var(--space-3xl) var(--space-2xl); }
.built { padding-block: var(--space-2xl); }
.spec { margin: 0; border-bottom: var(--rule-hair) solid var(--color-line-2); }
.spec__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs) var(--space-lg); padding-block: var(--space-md); border-top: var(--rule-hair) solid var(--color-line-2); }
.spec__row dd { margin: 0; }
.spec__what { color: var(--color-ink-2); }
.spec__tools { font-size: var(--text-sm); color: var(--color-ink-mute); }

/* ---- What you get ---- */
.outcomes { padding-block: var(--space-2xl); }
.outcomes__list { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg) var(--space-xl); }
.outcomes__list dt { font-weight: var(--weight-strong); color: var(--color-ink); }
.outcomes__list dd { margin: 0; }

/* ---- Work I can describe ---- */
.work { border-top: var(--rule-hair) solid var(--color-line); border-bottom: var(--rule-hair) solid var(--color-line); padding-block: var(--space-3xl); }
.work__prose { max-width: var(--measure); }
.work__prose .label { display: block; margin-block-end: var(--space-2xs); }
.work__note { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-ink-mute); margin-block-start: var(--space-lg); }
.work__aside { display: grid; gap: var(--space-xl); align-content: start; }
.portrait { margin: 0; }
.portrait img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; filter: saturate(.92); border: var(--rule-hair) solid var(--color-line); display: block; }
.portrait figcaption { margin-block-start: var(--space-xs); }
.ledger { margin: 0; font-size: var(--text-sm); border-bottom: var(--rule-hair) solid var(--color-line-2); }
.ledger__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs) var(--space-md); padding-block: var(--space-sm); border-top: var(--rule-hair) solid var(--color-line-2); }
.ledger__row dd { margin: 0; color: var(--color-ink-2); }

/* ---- Steps (F4) ---- */
.process, .start { padding-block: var(--space-2xl) var(--space-3xl); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); border-top: var(--rule-hair) solid var(--color-line); }
.steps > li { padding-block-start: var(--space-md); }
.steps__num { display: block; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-accent); white-space: nowrap; margin-block-end: var(--space-xs); }
.steps h3 { margin-block-end: var(--space-xs); }
.steps p { margin: 0; }
.process__aside { max-width: 60ch; margin-block-start: var(--space-xl); border-top: var(--rule-hair) solid var(--color-line); padding-block-start: var(--space-md); }
.process__aside ul { margin: var(--space-sm) 0 0; padding-inline-start: var(--space-lg); }
.process__aside li + li { margin-block-start: var(--space-xs); }

/* ---- Final CTA ---- */
.cta { padding-block: var(--space-3xl); }
.cta__body { max-width: 40rem; }
.cta h2 { font-size: var(--text-2xl); margin-block-end: var(--space-md); }
.cta .btn { margin-block-start: var(--space-xs); }
.cta__mono { font-family: var(--font-mono); font-size: var(--text-sm); margin-block-start: var(--space-lg); }
.cta__mono a { display: inline-flex; align-items: center; min-height: var(--hit); white-space: nowrap; }

/* ---- Footer (Ft1) ---- */
.footer { border-top: var(--rule-hair) solid var(--color-line); padding-block: var(--space-2xl) var(--space-lg); }
.footer__band { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.footer__wordmark { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); line-height: var(--leading-tight); color: var(--color-ink); }
.footer__statement { margin: var(--space-xs) 0 0; font-family: var(--font-display); font-size: var(--text-md); line-height: var(--leading-tight); color: var(--color-ink); }
.footer__links { list-style: none; margin: 0; padding: 0; display: grid; font-family: var(--font-mono); font-size: var(--text-sm); }
.footer__links a { min-height: var(--hit); display: inline-flex; align-items: center; white-space: nowrap; padding-inline: var(--space-2xs); margin-inline: calc(-1 * var(--space-2xs)); color: var(--color-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: var(--color-line-strong); }
.footer__links a:hover { text-decoration-color: var(--color-accent); color: var(--color-accent); }
.footer__links a:active { color: var(--color-accent-hover); }
.footer__link-long { display: none; }
.footer__link-short { display: inline; }
.colophon { font-size: var(--text-xs); color: var(--color-ink-mute); margin: var(--space-lg) 0 0; }

/* ---- 24 rem: long labels ---- */
@media (min-width: 24rem) {
  .btn__long { display: inline; }
  .btn__short { display: none; }
  .footer__link-long { display: inline; }
  .footer__link-short { display: none; }
}

/* ---- 40 rem: two-column lists, spec grid ---- */
@media (min-width: 40rem) {
  .masthead__wordmark { font-size: var(--text-2xl); }
  .row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .week__list { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .spec__row { grid-template-columns: 7rem minmax(0, 1fr) minmax(0, 13rem); }
  .outcomes__list { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .outcomes__list > :last-child { grid-column: 1 / -1; }
  .ledger__row { grid-template-columns: 7rem minmax(0, 1fr); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps > :last-child { grid-column: 1 / -1; }
}

/* ---- 50 rem: inline masthead links (six labels + separators + EMAIL = 703 px; 40 rem leaves 589 px) ---- */
@media (min-width: 50rem) {
  .masthead__links--wide { display: flex; }
  .masthead__contents { display: none; }
}

/* ---- 60 rem: diptychs, 12-col grid, sticky aside, long email label ---- */
@media (min-width: 60rem) {
  .masthead__email-long { display: inline; }
  .masthead__email-short { display: none; }
  .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-xl); }
  .hero__text { grid-column: 1 / 8; }
  .hero__figure { grid-column: 8 / 13; align-self: start; max-width: none; }
  .hero--rule .hero__text { grid-column: 1 / 7; }
  .hero--rule .hero__figure { grid-column: 7 / 13; border-inline-start: var(--rule-hair) solid var(--color-line); padding-inline-start: var(--space-xl); }
  .row { grid-template-columns: minmax(0, 3.5fr) minmax(0, 6.5fr) 14rem; } /* fixed link column: the widest arrow label is 201 px and a 2fr share is 131 px at 60 rem */
  .row a { justify-self: end; }
  .chain__aside { grid-column: 9 / 13; grid-row: 1; position: sticky; top: calc(var(--masthead-bar-height) + var(--space-lg)); z-index: var(--z-sticky); align-self: start; }
  .chain__sheet { grid-column: 1 / 9; grid-row: 1; }
  .outcomes__head { grid-column: 1 / 5; }
  .outcomes__list { grid-column: 5 / 13; }
  .work__prose { grid-column: 1 / 8; }
  .work__aside { grid-column: 9 / 13; }
  .steps { grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)) minmax(0, 0.9fr); }
  .steps > :last-child { grid-column: auto; }
  .steps--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__band { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

/* Hero figure may overflow its column slightly at desktop (contract 4.2: right edge past the container). 3 % a side: 6 % pushed the right edge past the viewport at 1280 px and clipped figure ink */
@media (min-width: 60rem) {
  .hero__figure .figure__layer { width: 106%; margin-inline-start: -3%; }
}
/* Phones: 11 px figure labels would render at 6-9 px; the caption carries the meaning */
@media (max-width: 39.99rem) {
  .figure__layer text { display: none; }
}