/* Totemphonia v2 · brEARk (Kilian, 2026-10-25/26): the site around it, the plugin's own look for its window. First the
   idea alone (name, claim, what it is, the download); then one evening told by scrolling: the window stays in view,
   its battery sinks and refills.
   The window is drawn as the plugin draws it (ui/MeterView.cpp): the content once on paper, then again, inverted,
   clipped to the battery from the bottom. Positions are the plugin's own pixels (POSTER 960 × 600, COMPACT 520 × 320),
   scaled by --px. Then the rest, clear and compact. */

@font-face { font-family: 'Space Grotesk'; src: url('/assets/fonts/space-grotesk-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* OFL, from the brEARk repo */
@font-face { font-family: 'Space Mono'; src: url('/assets/fonts/space-mono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Space Mono'; src: url('/assets/fonts/space-mono-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

.bk {
  --cols: repeat(12, minmax(0, 1fr)); --hdr: 4.25rem;
  --k-paper: #EDEDED; --k-ink: #0A0A0A; --k-signal: #E10600; /* brEARk's palette (ui/Look.h) */
  --k-grotesk: 'Space Grotesk', var(--f-use); --k-mono: 'Space Mono', var(--f-data);
  --k-h: clamp(1.9rem, 1.2rem + 2.3vw, 3.25rem);
}
.k-inline { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; transition: text-decoration-color 0.3s; }
.k-inline:focus-visible { text-decoration-color: transparent; }
@media (hover: hover) { .k-inline:hover { text-decoration-color: transparent; } }

/* ---------- the idea: one calm screen ---------- */
.k-hero { display: grid; grid-template-columns: var(--cols); column-gap: var(--gutter); align-content: center; min-height: 100svh; padding: calc(var(--hdr) + 2rem) var(--gutter) clamp(3rem, 9svh, 6rem); }
.k-mark { grid-column: 1 / -1; }
.k-claim { grid-column: 1 / span 6; align-self: end; } /* two sentences, two lines each */
.k-hero__act { grid-column: 8 / -1; align-self: end; padding-bottom: 0.35rem; }

/* ---------- the evening: the stations on the left, the window held on the right ---------- */
.k-stage { display: grid; grid-template-columns: var(--cols); column-gap: var(--gutter); padding: 0 var(--gutter); }
.k-side { grid-column: 6 / -1; grid-row: 1; align-self: start; position: sticky; top: var(--hdr); height: calc(100svh - var(--hdr)); display: grid; align-content: center; justify-items: end; padding-bottom: 1rem; }
.k-story { grid-column: 1 / span 5; grid-row: 1; }

.k-mark { font-family: var(--k-grotesk); font-weight: 700; font-size: clamp(4.6rem, 1.6rem + 9.6vw, 13rem); line-height: 0.88; letter-spacing: -0.045em; margin-left: -0.06em; }
/* the claim and its second line in one voice: together they are the idea */
.k-claim { margin-top: clamp(1.6rem, 5svh, 3.2rem); font-family: var(--f-voice); font-weight: 300; font-size: clamp(1.9rem, 1rem + 2.5vw, 3.4rem); line-height: 1.08; letter-spacing: -0.02em; margin-left: -0.04em; text-wrap: balance; }
.k-claim span { display: block; }
.k-lede { max-width: 34rem; line-height: 1.6; }
.k-get { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 1.8rem; }
.k-ver { margin-top: 0.4rem; font-family: var(--f-data); font-size: var(--t-data); color: var(--muted); }

/* the download: brEARk's button (paper, a hard 2 px line, mono capitals); it fills from the bottom like the battery */
.k-dl {
  display: inline-flex; align-items: center; min-height: 3.25rem; padding: 0 1.5rem;
  font-family: var(--k-mono); font-weight: 700; font-size: 0.875rem; letter-spacing: 0.02em; text-transform: uppercase;
  border: 2px solid var(--ink); background: linear-gradient(var(--ink), var(--ink)) no-repeat 0 100% / 100% 0%;
  transition: background-size 0.55s var(--settle), color 0.3s;
}
.k-dl:focus-visible { background-size: 100% 100%; color: var(--ground); outline-offset: 3px; }
@media (hover: hover) { .k-dl:hover { background-size: 100% 100%; color: var(--ground); } }
.k-dl:active { background-size: 100% 100%; color: var(--ground); scale: 0.98; }
.k-link { display: inline-flex; gap: 0.45rem; font-weight: 500; padding: 0.35rem 0; background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 1px; transition: background-size 0.6s var(--settle); }
.k-link::after { content: '↗'; transition: translate 0.5s var(--settle); }
.k-link:focus-visible { background-size: 0% 1px; background-position: 100% 100%; }
.k-link:focus-visible::after { translate: 0.18rem -0.18rem; }
@media (hover: hover) { .k-link:hover { background-size: 0% 1px; background-position: 100% 100%; } .k-link:hover::after { translate: 0.18rem -0.18rem; } }

/* ---------- the window ---------- */
.k-win { width: min(100%, calc((100svh - var(--hdr) - 8rem) * 1.6)); container: kwin / inline-size; }
.k-frame { position: relative; --px: calc(100cqw / 960); }
.k-bar { display: flex; align-items: center; gap: 0.4rem; height: 1.6rem; padding: 0 0.6rem; background: #262626; color: #9C9C9C; border-radius: 0.5rem 0.5rem 0 0; font: 500 0.6875rem/1 var(--f-use); letter-spacing: 0.01em; }
.k-bar i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #4A4A4A; }
.k-bar span { margin: 0 auto; translate: -1.3rem 0; }
.w {
  position: relative; aspect-ratio: 960 / 600; overflow: hidden; isolation: isolate;
  box-shadow: 0 1.6rem 3.2rem -1.6rem rgb(0 0 0 / 0.38), 0 0 0 1px rgb(0 0 0 / 0.08);
  font-family: var(--k-mono); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;
  --b: 1;
}
.w-layer { position: absolute; inset: 0; background: var(--k-paper); color: var(--k-ink); }
.w-mass { background: var(--k-ink); color: var(--k-paper); clip-path: inset(calc(100% - var(--b) * 100%) 0 0 0); }
.w.is-red .w-mass { background: var(--k-signal); color: #fff; } /* the battery at 20 % or less */
.w.is-alarm .w-base { background: var(--k-signal); color: #fff; } /* STOP.: the whole window */
.w-layer > * { position: absolute; white-space: nowrap; }
.w-mark { left: calc(var(--px) * 36); top: calc(var(--px) * 26); font: 700 calc(var(--px) * 22) / normal var(--k-grotesk); letter-spacing: -0.04em; }
.w-status { left: calc(var(--px) * 36); top: calc(var(--px) * 66); font-weight: 700; font-size: max(9px, calc(var(--px) * 13)); line-height: normal; }
.w-word { left: calc(var(--px) * 30); top: calc(var(--px) * 100); font: 700 calc(var(--px) * var(--ws, 250)) / normal var(--k-grotesk); letter-spacing: -0.04em; translate: 0 -0.28em; }
.w-pct { right: calc(var(--px) * 36); top: calc(var(--px) * 300); font: 700 calc(var(--px) * 80) / normal var(--k-grotesk); letter-spacing: -0.04em; translate: 0 -0.28em; }
.w-pct i { font-style: normal; margin-left: 0.12em; }
.w-time, .w-c { left: calc(var(--px) * 36); top: calc(var(--px) * 370); display: flex; gap: 1.8em; font-weight: 700; font-size: max(9.5px, calc(var(--px) * 14)); line-height: normal; }
.w-rule { left: calc(var(--px) * 36); right: calc(var(--px) * 36); top: calc(var(--px) * 404); height: max(2px, calc(var(--px) * 3)); background: currentColor; }
.w-stats { left: calc(var(--px) * 36); right: calc(var(--px) * 36); top: calc(var(--px) * 416); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: calc(var(--px) * 12); }
.w-stats > div { min-width: 0; }
.w-stats small, .w-stats b { display: block; overflow: hidden; text-overflow: ellipsis; }
.w-stats small { height: calc(var(--px) * 16); font-size: max(8px, calc(var(--px) * 10)); line-height: calc(var(--px) * 16); }
.w-stats b { height: calc(var(--px) * 30); font-size: calc(var(--px) * 22); line-height: calc(var(--px) * 30); }
.w-factors { left: calc(var(--px) * 36); top: calc(var(--px) * 486); display: flex; gap: 1.8em; font-size: max(8.5px, calc(var(--px) * 11)); line-height: calc(var(--px) * 16); }
.w-coach { left: calc(var(--px) * 36); top: calc(var(--px) * 546); width: calc(var(--px) * 590); white-space: normal !important; font-size: max(9.5px, calc(var(--px) * 14)); line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.w-c { display: none; }

/* the controls: separate components in the plugin, so drawn once, on top (paper, ink line, mono capitals) */
.w-btn { position: absolute; display: grid; place-items: center; background: var(--k-paper); color: var(--k-ink); border: max(1.5px, calc(var(--px) * 2)) solid var(--k-ink); font: 700 max(6.5px, calc(var(--px) * 10.8)) / 1 var(--k-mono); letter-spacing: 0.01em; white-space: nowrap; }
.w-top { top: calc(var(--px) * 22); height: calc(var(--px) * 30); }
.w-top--1 { left: calc(var(--px) * 456); width: calc(var(--px) * 100); }
.w-top--2 { left: calc(var(--px) * 564); width: calc(var(--px) * 104); }
.w-top--3 { left: calc(var(--px) * 676); width: calc(var(--px) * 96); }
.w-top--4 { left: calc(var(--px) * 780); width: calc(var(--px) * 82); }
.w-top--5 { left: calc(var(--px) * 870); width: calc(var(--px) * 58); }
.w-top--4c { display: none; }
.w-seg { position: absolute; left: calc(var(--px) * 655); top: calc(var(--px) * 367); width: calc(var(--px) * 268); height: calc(var(--px) * 24); display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--px) * 2); }
.w-seg span { display: grid; place-items: center; background: var(--k-paper); color: var(--k-ink); font: 700 max(6.5px, calc(var(--px) * 10)) / 1 var(--k-mono); }
.w-seg span[data-on] { background: var(--k-ink); color: var(--k-paper); outline: calc(var(--px) * 2) solid var(--k-paper); outline-offset: calc(var(--px) * 1); }
.w-hist { left: calc(var(--px) * 660); top: calc(var(--px) * 536); width: calc(var(--px) * 106); height: calc(var(--px) * 36); font-size: max(7px, calc(var(--px) * 12)); }
.w-break { left: calc(var(--px) * 780); top: calc(var(--px) * 536); width: calc(var(--px) * 146); height: calc(var(--px) * 36); font-size: max(7px, calc(var(--px) * 12)); }

/* COMPACT: the plugin's small window, for narrow screens */
@container kwin (max-width: 639px) {
  .k-frame { --px: calc(100cqw / 520); }
  .w { aspect-ratio: 520 / 340; }
  .w-mark { left: calc(var(--px) * 24); top: calc(var(--px) * 18); font-size: calc(var(--px) * 15); }
  .w-status { left: calc(var(--px) * 24); top: calc(var(--px) * 46); font-size: max(8px, calc(var(--px) * 11)); }
  .w-word { left: calc(var(--px) * 18); top: calc(var(--px) * 74); font-size: calc(var(--px) * var(--wsc, 132)); }
  .w-pct { right: calc(var(--px) * 24); top: calc(var(--px) * 190); font-size: calc(var(--px) * 44); }
  .w-time { left: calc(var(--px) * 24); top: calc(var(--px) * 227); font-size: max(9px, calc(var(--px) * 10.5)); }
  .w-c { display: flex; left: calc(var(--px) * 24); font-weight: 400; font-size: max(8.5px, calc(var(--px) * 10.5)); }
  .w-c--0 { top: calc(var(--px) * 244); }
  .w-c--1 { top: calc(var(--px) * 259); }
  .w-rule, .w-stats, .w-factors, .w-hist, .w-top--4 { display: none; }
  .w-coach { left: calc(var(--px) * 24); top: calc(var(--px) * 280); width: calc(var(--px) * 340); font-size: max(8.5px, calc(var(--px) * 11)); -webkit-line-clamp: 3; }
  .w-top { top: calc(var(--px) * 14); height: calc(var(--px) * 24); font-size: max(5.5px, calc(var(--px) * 9)); }
  .w-top--1 { left: calc(var(--px) * 112); width: calc(var(--px) * 84); }
  .w-top--2 { left: calc(var(--px) * 202); width: calc(var(--px) * 86); }
  .w-top--3 { left: calc(var(--px) * 294); width: calc(var(--px) * 80); }
  .w-top--4c { display: grid; left: calc(var(--px) * 380); width: calc(var(--px) * 66); }
  .w-top--5 { left: calc(var(--px) * 452); width: calc(var(--px) * 48); }
  .w-seg { left: calc(var(--px) * 316); top: calc(var(--px) * 243); width: calc(var(--px) * 180); height: calc(var(--px) * 22); }
  .w-seg span { font-size: max(6px, calc(var(--px) * 9)); }
  .w-break { left: calc(var(--px) * 378); top: calc(var(--px) * 296); width: calc(var(--px) * 120); height: calc(var(--px) * 28); }
}

/* the evening's clock and its line, the break as a band */
.k-time { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.9rem; margin-top: 1.4rem; font-family: var(--f-data); font-size: var(--t-data); color: var(--muted); font-variant-numeric: tabular-nums; }
.k-time__now { font-size: 1.05rem; color: var(--ink); min-width: 3.2em; }
.k-time__line { position: relative; height: 1.25rem; }
.k-time__line::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line); }
.k-time__fill { position: absolute; left: 0; top: 50%; height: 1px; width: calc(var(--p, 0) * 100%); background: var(--ink); }
.k-time__rest { position: absolute; top: calc(50% - 0.2rem); height: 0.4rem; background: color-mix(in srgb, var(--ink) 16%, transparent); }
.k-time__dot { position: absolute; top: calc(50% - 0.45rem); left: calc(var(--p, 0) * 100%); width: 2px; height: 0.9rem; margin-left: -1px; background: var(--ink); }

/* ---------- the evening, station by station ---------- */
.k-story__head { padding-top: clamp(3rem, 10svh, 7rem); padding-bottom: clamp(2rem, 6svh, 4rem); max-width: 34rem; }
.k-h { font-family: var(--f-voice); font-weight: 300; font-size: var(--k-h); line-height: 1.05; letter-spacing: -0.02em; margin-left: -0.04em; text-wrap: balance; }
.k-num { font-size: var(--t-ui); font-weight: 500; color: var(--muted); margin-bottom: 0.9rem; }
.k-story__head p:not(.k-num) { margin-top: 1rem; line-height: 1.6; color: color-mix(in srgb, var(--ink) 84%, var(--ground)); }
.k-st { min-height: 74svh; max-width: 34rem; padding-top: 1px; }
.k-st:last-child { min-height: 100svh; } /* the window stays while the break plays out */
.k-st__t { display: flex; gap: 0.8rem; align-items: baseline; font-family: var(--f-data); font-size: var(--t-data); color: var(--muted); }
.k-st__w { font-family: var(--k-mono); font-weight: 700; font-size: 0.6875rem; letter-spacing: 0.02em; color: var(--ink); }
.k-st__h { margin: 0.55rem 0 0.9rem -0.04em; font-family: var(--f-voice); font-weight: 300; font-size: clamp(1.8rem, 1.2rem + 1.5vw, 2.8rem); line-height: 1.06; letter-spacing: -0.02em; text-wrap: balance; transition: color 0.5s var(--settle); }
.k-st p:not(.k-st__t) { line-height: 1.6; transition: color 0.5s var(--settle); }
.js .k-st:not(.is-on) .k-st__h { color: color-mix(in srgb, var(--ink) 50%, var(--ground)); } /* large text: 3.3:1 */
.js .k-st:not(.is-on) p:not(.k-st__t) { color: var(--muted); } /* AA */

/* ---------- the rest: heading left, text right ---------- */
.k-sec { display: grid; grid-template-columns: var(--cols); gap: 1.4rem var(--gutter); padding: 0 var(--gutter); margin-top: clamp(6rem, 18svh, 11rem); scroll-margin-top: calc(var(--hdr) + 1.5rem); }
.k-sec__head { grid-column: 1 / span 5; }
.k-sec__body { grid-column: 7 / -1; max-width: 46rem; display: grid; gap: 1.1rem; align-content: start; }
.k-sec__body p, .k-sec__body li, .k-sec__body dd { line-height: 1.6; }
.k-sec__body b { font-weight: 600; }
.k-sec code { font-family: var(--f-data); font-size: 0.86em; word-break: break-word; }
.k-ui { font-family: var(--k-mono); font-weight: 700; font-size: 0.82em; letter-spacing: 0.01em; } /* the plugin's words, as it writes them */
.k-meters { display: grid; gap: 0; }
.k-meters > div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--line); }
.k-meters > div:last-child { border-bottom: 1px solid var(--line); }
.k-meters dt { font-weight: 500; }
.k-table { border-collapse: collapse; font-size: var(--t-ui); margin-top: 0.4rem; width: 100%; max-width: 36rem; }
.k-table th { text-align: left; font-weight: 500; color: var(--muted); padding: 0 1.4rem 0.5rem 0; }
.k-table td { padding: 0.6rem 1.4rem 0.6rem 0; border-top: 1px solid var(--line); vertical-align: top; line-height: 1.5; }
.k-table td:first-child { white-space: nowrap; }
.k-promises { display: grid; gap: 0; }
.k-promises > div { padding: 1rem 0; border-top: 1px solid var(--line); display: grid; gap: 0.3rem; }
.k-promises dt { font-weight: 600; }
.k-proof { display: grid; gap: 0.9rem; padding: 1.6rem; margin-top: 0.8rem; background: var(--k-ink); color: var(--k-paper); }
.k-proof .k-h3 { font-family: var(--f-voice); font-weight: 300; font-size: clamp(1.45rem, 1.1rem + 0.9vw, 1.95rem); line-height: 1.12; letter-spacing: -0.012em; text-wrap: balance; }
.k-proof .k-link { justify-self: start; }
.k-proof .k-fund { margin-top: 0.5rem; padding-top: 1.1rem; border-top: 1px solid color-mix(in srgb, var(--k-paper) 22%, transparent); } /* GitHub Sponsors: a quiet afterword */
.k-proof :focus-visible { outline-color: var(--k-paper); }
.k-steps { counter-reset: k; display: grid; gap: 0; }
.k-steps li { counter-increment: k; display: grid; grid-template-columns: 2.4rem 1fr; padding: 0.9rem 0; border-top: 1px solid var(--line); }
.k-steps li:last-child { border-bottom: 1px solid var(--line); }
.k-steps li::before { content: counter(k, decimal-leading-zero); font-family: var(--f-data); font-size: var(--t-data); color: var(--muted); padding-top: 0.25em; }
.k-note { font-size: var(--t-ui); color: var(--muted); line-height: 1.55; }
.k-faq { display: grid; }
.k-faq details { border-top: 1px solid var(--line); }
.k-faq details:last-child { border-bottom: 1px solid var(--line); }
.k-faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: baseline; padding: 1rem 0; font-weight: 500; }
.k-faq summary::-webkit-details-marker { display: none; }
.k-faq summary::after { content: '+'; font-family: var(--f-data); color: var(--muted); transition: rotate 0.4s var(--settle); }
.k-faq details[open] summary::after { rotate: 45deg; }
.k-faq summary:focus-visible { outline-offset: 2px; }
@media (hover: hover) { .k-faq summary:hover::after { color: var(--ink); } }
.k-faq details p { padding: 0 0 1.1rem; max-width: 40rem; line-height: 1.6; }
.k-end { padding-bottom: clamp(5rem, 14svh, 9rem); }

/* ---------- tablet / phone: the window held at the top, the evening scrolls beneath it ---------- */
@media (max-width: 999px) {
  .k-stage { display: block; }
  .k-hero { min-height: 92svh; align-content: end; }
  .k-claim, .k-hero__act { grid-column: 1 / -1; }
  .k-hero__act { margin-top: 1.8rem; }
  .k-side { position: sticky; top: 0; z-index: 3; height: auto; margin: 0 calc(var(--gutter) * -1); padding: calc(var(--k-top, 3.4rem) + 0.4rem) var(--gutter) 0.4rem; background: var(--ground); justify-items: stretch; } /* covers the strip behind the glass header too */
  .k-side::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 1.5rem; background: linear-gradient(var(--ground), transparent); pointer-events: none; }
  .k-win { width: 100%; max-width: 40rem; justify-self: center; }
  .k-time { margin-top: 0.7rem; gap: 0.6rem; }
  .k-time__now { font-size: 0.9rem; }
  .k-story { position: relative; z-index: 1; }
  .k-st { min-height: 66svh; }
  .k-sec__head, .k-sec__body { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .k-meters > div { grid-template-columns: 1fr; gap: 0.3rem; }
  .k-bar { height: 1.25rem; font-size: 0.625rem; }
}
@media (prefers-reduced-motion: reduce) {
  .k-st__h, .k-st p, .k-dl { transition: none; }
}