/* 03 · everything — 2026-10-20 (Mark: "1 and 4"; SITE-DESIGN.md)
   The ledger drives a pinned phone; nine rows in three groups with a progress bar.
   Hairlines, not boxes; the only rounded thing is the product (SITE-DESIGN.md). */

.ev { --ev-line: rgba(59,30,34,.18); --ev-nav: 64px; }

/* ── the three groups: a bar that stays while the chapter is on screen ── */
.ev-bar { position: sticky; top: var(--ev-nav); z-index: 20; margin-top: 46px; background: rgba(214,187,182,.9);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border-block: 1px solid var(--ev-line); }
.ev-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 3vw, 40px); padding-block: 14px 0; }
.ev-tab { display: grid; gap: 4px; padding-bottom: 12px; color: var(--bloom-ink-3); text-decoration: none; min-width: 0; }
.ev-tab .k { font-family: var(--mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; transition: color .4s; white-space: nowrap; }
.ev-tab .k b { font-weight: 500; margin-right: 6px; }
.ev-tab .s { font-size: 13px; color: var(--bloom-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev-tab i { display: block; height: 2px; margin-top: 8px; background: var(--ev-line); border-radius: 2px; overflow: hidden; }
.ev-tab i u { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--bloom-accent); transition: width .5s var(--ease); }
.ev-tab.on .k { color: var(--bloom-accent); }
.ev-tab:hover .k { color: var(--bloom-ink); }

/* ── the body: the ledger on the left, the phone pinned on the right ── */
.ev-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 420px); gap: clamp(32px, 6vw, 96px); align-items: start; }
.ev-gh { margin: 64px 0 0; padding-bottom: 14px; border-bottom: 1px solid var(--ev-line); font-family: var(--mono); font-size: 12px;
  letter-spacing: .26em; text-transform: uppercase; color: var(--bloom-ink-3); }
.ev-gh b { font-weight: 500; color: var(--bloom-ink); margin-right: 8px; }
.ev-row { display: grid; grid-template-columns: 44px 1fr; row-gap: 10px; align-content: center; min-height: 34vh; padding: 26px 0;
  border-bottom: 1px solid var(--ev-line); color: inherit; text-decoration: none; transition: opacity .5s var(--ease); }
.ev-row .n { font-family: var(--mono); font-size: 12px; letter-spacing: .2em; color: var(--bloom-ink-3); transition: color .4s; align-self: baseline; padding-top: .9em; }
.ev-row .w { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(32px, 4.2vw, 52px); line-height: 1;
  letter-spacing: -.01em; transition: color .4s, transform .5s var(--ease); display: inline-block; }
.ev-row p { grid-column: 2; max-width: 30em; font-size: 16.5px; line-height: 1.55; color: var(--bloom-ink-2); transition: color .4s; }
.ev-row p b { font-weight: 600; color: var(--bloom-ink); }
.ev-list.live .ev-row { opacity: .4; }
.ev-list.live .ev-row.lit, .ev-row:hover, .ev-row:focus-visible { opacity: 1; }
.ev-row.lit .n, .ev-row.lit .w { color: var(--bloom-accent); }
.ev-row.lit .w { transform: translateX(6px); }
.ev-row.lit p { color: var(--bloom-ink); }
.ev-row:focus-visible { outline: 2px solid var(--bloom-accent); outline-offset: -2px; border-radius: 4px; }

/* ── the device: a phone, which becomes a laptop for "on any computer" ── */
.ev-stage { position: sticky; top: calc(var(--ev-nav) + 96px); container-type: inline-size; display: grid; justify-items: center; padding-top: 24px; }
.ev-dev { --pw: min(300px, 78cqw, calc((100vh - 290px) * .466)); position: relative; width: var(--pw); height: calc(var(--pw) * 2.144);
  border-radius: 46px; border: 9px solid #1B1C1F; background: #0B0C0A; overflow: hidden;
  box-shadow: 0 40px 90px -34px rgba(59,30,34,.7), inset 0 0 0 1px rgba(255,255,255,.06);
  transition: width .7s var(--ease), height .7s var(--ease), border-radius .7s var(--ease), border-width .7s var(--ease); }
.ev-dev[data-kind="laptop"] { width: 100cqw; height: calc(100cqw * .655); border-radius: 14px; border-width: 8px; }
.ev-island { position: absolute; top: 10px; left: 50%; z-index: 3; width: 30%; height: 24px; border-radius: 14px; background: #000; transform: translateX(-50%); transition: width .5s var(--ease), height .5s var(--ease); }
.ev-dev[data-kind="laptop"] .ev-island { width: 6px; height: 6px; top: 4px; background: #2A2B2E; }
.ev-scr { position: absolute; inset: 0; }
.ev-scr img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: 0;
  transform: scale(1.03); transition: opacity .45s var(--ease), transform .7s var(--ease); }
.ev-scr img.on { opacity: 1; transform: none; }
.ev-scr img.wide { object-position: top left; }
.ev-deck { display: block; width: 0; height: 12px; margin-top: -1px; border-radius: 0 0 14px 14px; opacity: 0;
  background: linear-gradient(180deg, #D8D2CB, #A79F97); box-shadow: 0 18px 30px -18px rgba(59,30,34,.8);
  transition: width .7s var(--ease), opacity .4s; }
.ev-stage[data-kind="laptop"] .ev-deck { width: calc(100cqw + 34px); opacity: 1; }
.ev-cap { margin-top: 22px; font-family: var(--mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--bloom-ink-3); }
.ev-cap b { color: var(--bloom-accent); font-weight: 500; margin-right: 8px; }

/* ── on a phone: the device pins at the top, the rows pass under it ── */
@media (max-width: 899px) {
  .ev-tabs { gap: 10px; }
  .ev-tab .s { display: none; }
  .ev-tab .k { font-size: 10.5px; letter-spacing: .14em; white-space: normal; }
  .ev-body { grid-template-columns: 1fr; gap: 0; }
  .ev-stage { order: -1; top: calc(var(--ev-nav) + 62px); z-index: 10; margin-inline: calc(-1 * var(--gutter)); padding: 16px var(--gutter) 12px; background: var(--bloom);
    box-shadow: 0 14px 18px -14px rgba(59,30,34,.25); }
  .ev-dev { --pw: min(150px, 40vw, calc(36vh * .466)); border-radius: 26px; border-width: 6px; }
  .ev-dev[data-kind="laptop"] { width: min(100cqw, 320px); height: calc(min(100cqw, 320px) * .655); }
  .ev-stage[data-kind="laptop"] .ev-deck { width: calc(min(100cqw, 320px) + 26px); }
  .ev-island { top: 6px; height: 14px; }
  .ev-cap { margin-top: 10px; font-size: 10.5px; }
  .ev-row { min-height: 26vh; }
  .ev-gh { margin-top: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .ev-dev, .ev-island, .ev-scr img, .ev-deck, .ev-tab i u, .ev-row, .ev-row .w { transition: none; }
}

/* 2026-10-20 · Mark: "Can you give this phone the same treatment you gave the one in the hero, because the one in the
   hero looks perfect? It looks real." The hero's frame (home.css `.device`), at this phone's size: a titanium band,
   the side buttons, a faint glass sheen, the screen's corners and island in proportion. The buttons go when it's a laptop. */
.ev-frame { position: relative; }
.ev-dev { border-radius: calc(var(--pw) * .165); border: calc(var(--pw) * .032) solid #050506;
  box-shadow: 0 0 0 1.5px #55555b, 0 0 0 3px #2a2a2e, 0 0 0 3.8px #6a6a70, 0 40px 90px -34px rgba(59,30,34,.75), inset 0 0 0 1px rgba(255,255,255,.05); }
.ev-dev::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit;
  background: linear-gradient(125deg, rgba(255,255,255,.07), rgba(255,255,255,0) 34%); }
.ev-dev[data-kind="laptop"] { box-shadow: 0 0 0 1.5px #8c8c92, 0 40px 90px -34px rgba(59,30,34,.75); }
.ev-island { top: calc(var(--pw) * .035); height: calc(var(--pw) * .082); width: 30%; border-radius: 999px; }
.ev-btn { position: absolute; width: 4px; border-radius: 2px; background: linear-gradient(90deg, #1d1d20, #66666c 55%, #2a2a2e); transition: opacity .3s; }
.ev-btn.act { left: -6px; top: 17.5%; height: 4.2%; }
.ev-btn.vu { left: -6px; top: 25%; height: 8.4%; }
.ev-btn.vd { left: -6px; top: 35.4%; height: 8.4%; }
.ev-btn.pw { right: -6px; top: 27%; height: 12.5%; }
.ev-btn.cc { right: -5px; top: 55%; height: 6.5%; width: 3px; }
.ev-stage[data-kind="laptop"] .ev-btn { opacity: 0; }
@media (max-width: 899px) {
  .ev-btn { width: 2.5px; }
  .ev-btn.act, .ev-btn.vu, .ev-btn.vd { left: -4px; }
  .ev-btn.pw { right: -4px; }
  .ev-btn.cc { right: -3.5px; width: 2px; }
}
@media (prefers-reduced-motion: reduce) { .ev-btn { transition: none; } }