/* Eve's website: the landing, privacy and questions pages. Layout copied from ~/eve-screens/eve-prototype-v6.html (site pages, documents, phone). */
/* ---------- site pages ---------- */
.site { padding-inline: 24px; }
.sh { max-width: var(--wide); margin: 0 auto; height: 56px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 17px; line-height: 20px; font-weight: 650; letter-spacing: -0.01em; }
.brand svg { transform: translateY(1px); }
.nav { display: flex; gap: 24px; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; color: var(--dim); transition: color .2s var(--in); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }

/* The stage: hero and demo share one centred axis. Everything below the demo sits in one left-aligned 720 column. */
.hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 48px; max-width: var(--wide); margin: 0 auto; }
/* The locked line in a measure wide enough for two lines at 1280. */
.hero .lede { margin-top: 16px; max-width: 860px; }
.hero .cta { margin-top: 32px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.only-phone { display: none !important; }

/* The demo: nine videos on the bare ground, no frame, as YouTube would show them. The top two and the fifth are low-quality; they fade and the six that stay close up into a 3 x 2 of the same size. */
.feed { position: relative; width: 100%; margin: 48px auto 0; }
.dgrid { display: grid; grid-template-columns: repeat(3, 264px); justify-content: center; column-gap: 32px; row-gap: 28px; }
/* One caption centred above the grid, Play again centred under it. The tiles stack above the junk while it leaves, so the six slide in over it and the grid never shows a hole. */
.feed-cap { text-align: center; margin-bottom: 16px; }
.dgrid { position: relative; }
.dgrid .tile { position: relative; z-index: 1; }
.feed-foot { margin: 16px auto 0; display: flex; align-items: center; justify-content: center; min-height: 44px; }
.replay { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; color: var(--dim); transition: color .2s var(--in), opacity .35s var(--in); }
.replay:hover { color: var(--ink); }
.feed-foot.idle .replay { opacity: 0; pointer-events: none; }

.tile { display: flex; flex-direction: column; gap: 10px; min-width: 0; text-align: left; }
.th { position: relative; aspect-ratio: 16 / 9; max-width: 100%; border-radius: 14px; overflow: hidden; background: var(--t6); }
.th::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--th-edge); pointer-events: none; }
.th .dur { z-index: 2; }
/* Illustrations: viewBox 160 x 90, ground line at y 65 (72%). bg and fl are the tile's own hue (--h), o1 to o3 the object's hue (--h2) from light to deep,
   pp is paper, dk a dark object. One ink for every line and outline, 1.75px at any size. */
.art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: inherit; }
.pk .th .art { clip-path: inset(0 round 14px); }
.art .bg { fill: hsl(var(--h) var(--sb) var(--lb)); } .art .fl { fill: hsl(var(--h) var(--sb) var(--lf)); }
.art .o1 { fill: hsl(var(--h2) var(--so) var(--l1)); } .art .o2 { fill: hsl(var(--h2) var(--so) var(--l2)); } .art .o3 { fill: hsl(var(--h2) var(--so) var(--l3)); }
.art .pp { fill: hsl(var(--h2) 30% var(--lpp)); } .art .dk { fill: hsl(var(--h2) 12% var(--ldk)); } .art .ik { fill: var(--art-ink); }
.art .moon { fill: hsl(var(--h) 40% var(--lm)); opacity: var(--mo); }
.art .s, .art .ln, .art .lp, .art .lw { stroke: var(--art-ink); stroke-width: 1.75px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.art .ln, .art .lp, .art .lw { fill: none; }
.art .lp { stroke: hsl(var(--h2) 30% var(--lpp)); }
.art .lw { stroke: hsl(var(--h2) var(--so) var(--l3)); stroke-width: 3.5px; }
.art .tooth { fill: none; stroke: hsl(var(--h2) var(--so) var(--l3)); }
.art .ds { stroke-dasharray: 4 4; }
/* Clickbait type: one style everywhere, heavy condensed yellow letters, a black edge and a small black drop. */
.art .jt, .art .jts { font-family: Impact, "Anton", "Arial Black", "Helvetica Neue", Arial, sans-serif; font-weight: 400; stroke-width: 2.6px; stroke-linejoin: round; paint-order: stroke; letter-spacing: .01em; }
.art .jt { fill: #FFD400; stroke: #111111; }
.art .jts { fill: #111111; stroke: #111111; }
/* YouTube's own badge: the same dark chip in both themes. */
.dur { position: absolute; right: 8px; bottom: 8px; padding: 2px 6px; border-radius: 4px; font-size: 12px; line-height: 14px; font-weight: 500; font-variant-numeric: tabular-nums; background: rgba(0, 0, 0, 0.72); color: #FFFFFF; }
.ti { font-size: 15px; line-height: 20px; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.k5 { fill: var(--t5); } .k6 { fill: var(--t6); } .k9 { fill: var(--t9); } .k10 { fill: var(--t10); } .k12 { fill: var(--t12); }
.k18 { fill: var(--t18); } .k28 { fill: var(--t28); } .k40 { fill: var(--t40); } .k60 { fill: var(--t60); } .k80 { fill: var(--t80); }

/* Below the demo: one left-aligned column, 128 between sections. */
.band { width: min(var(--text), 100%); margin: 128px auto 0; text-align: left; }
.band .lede { margin-top: 16px; text-wrap: pretty; }
.band .sec-h { text-wrap: pretty; }
.pair { width: 100%; margin-top: 48px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; row-gap: 40px; }
.pcol { display: flex; flex-direction: column; min-width: 0; }
.pcol .pline { margin-top: 4px; font-size: 18px; line-height: 27px; }
.pcol .tile { margin-top: 16px; }
/* Hidden by Eve: the video keeps its colour under a frosted veil with one label, so it reads as hidden, not as faded or prettier. */
.veil { position: absolute; inset: 0; z-index: 3; border-radius: inherit; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--ground) 70%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.pill { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ink); }
.pcol .tile .ti { transition: color .5s var(--in); }
.pcol .tile.is-hidden .ti { color: var(--dim); }
/* The signed note: a photo, a name, one or two sentences of why. */
.avatar { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: var(--t9); margin-bottom: 20px; }
.avatar svg { display: block; }
.note .lede { margin-top: 12px; }
.note + .closer { margin-top: 48px; }
.closer { width: min(var(--text), 100%); margin: 128px auto 0; display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.fine { margin-top: 32px; display: flex; flex-direction: column; gap: 8px; max-width: 600px; }
.closer .dt { margin-top: 24px; }
.closer .dt-in { margin: 0; }
.sf { max-width: var(--text); margin: 96px auto 0; padding: 24px 0 48px; border-top: 1px solid var(--hair); display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 13px; line-height: 18px; color: var(--dim); }
.sf a { transition: color .2s var(--in); }
.sf a:hover { color: var(--ink); }
.sel { user-select: all; -webkit-user-select: all; }

/* documents */
.doc { width: 100%; max-width: var(--text); margin: 0 auto; padding: 48px 0 0; }
.doc .lede { margin-top: 12px; }
.sum { margin-top: 48px; display: grid; grid-template-columns: 80px minmax(0, 1fr); row-gap: 16px; column-gap: 16px; align-items: baseline; }
.sum .label { font-size: 15px; line-height: 27px; }
.sum p { font-size: 18px; line-height: 27px; }
.rule { border: 0; border-top: 1px solid var(--hair); margin: 48px 0 0; }
.item { margin-top: 32px; }
.item h3, .item .q { font-size: 18px; line-height: 27px; font-weight: 650; }
.item p { margin-top: 8px; }
.grp { margin-top: 48px; }
.grp > .label { display: block; margin-bottom: 8px; }
.qrow { width: 100%; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--hair); padding: 14px 0; font-size: 18px; line-height: 27px; text-align: left; }
.qrow svg { flex: none; width: 12px; height: 12px; color: var(--dim); transition: transform .35s var(--move); }
.qrow[aria-expanded="true"] svg { transform: rotate(180deg); }
.qa { overflow: hidden; }
.qa-in { padding: 0 32px 20px 0; color: var(--dim); }
.qa-in p + p { margin-top: 8px; }
.msteps li + li { margin-top: 8px; }
.dgrid { align-content: start; }

/* Thumbnail hues, one class per video (no inline styles, so a strict Content-Security-Policy works). */
.art.a1 { --h:28; --h2:210; }
.art.a3 { --h:245; --h2:28; }
.art.a5 { --h:350; --h2:25; }
.art.a7 { --h:48; --h2:205; }
.art.a8 { --h:160; --h2:38; }
.art.a10 { --h:205; --h2:16; }
.art.a11 { --h:100; --h2:30; }
.art.a12 { --h:28; --h2:215; }

/* Skip link: hidden until it gets keyboard focus. */
.skip { position: absolute; left: 16px; top: -64px; z-index: 10; padding: 8px 16px; border-radius: 14px; background: var(--ink); color: var(--ground); font-size: 15px; line-height: 22px; }
.skip:focus { top: 8px; }

/* 404 */
.lost { width: min(var(--text), 100%); margin: 0 auto; padding: 96px 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.lost .ring { margin-bottom: 12px; }

/* ---------- phone ---------- */
@media (max-width: 760px) {
  .site { padding-inline: 16px; }
  .only-phone { display: flex !important; }
  .only-desk { display: none !important; }
  .hero { align-items: flex-start; text-align: left; padding-top: 32px; }
  .hero-h { font-size: 36px; line-height: 40px; text-wrap: pretty; }
  .hero .lede { text-wrap: pretty; }
  .hero .cta { align-items: flex-start; margin-top: 24px; }
  .sec-h { font-size: 28px; line-height: 34px; }
  .feed { margin-top: 40px; }
  .dgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 24px; }
  .dgrid .ti { font-size: 14px; line-height: 19px; -webkit-line-clamp: 3; }
  .feed-cap { text-align: left; }
  .feed-foot { justify-content: flex-start; }
  .band, .closer { margin-top: 96px; }
  .note + .closer { margin-top: 40px; }
  .pair { grid-template-columns: minmax(0, 1fr); }
  .doc { padding-top: 32px; }
  .sum { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .sum .label { line-height: 22px; }
  .sum p { margin: 2px 0 16px; }
  .lost { padding-top: 48px; }
}
.avatar img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; display: block; }

/* Without JavaScript: show the calm six at rest and no Play again. */
html:not(.js) #lgrid .tile:not([data-calm]) { display: none; }
html:not(.js) .feed-foot { visibility: hidden; }
/* Questions: answers stay visible without JavaScript; with it, they start closed (questions.js). */
html.js .qa:not(.ready) { display: none; }