/* Daily Pitch — look A, "the room" (Ari's pick, 2026-10-28): the meeting's own picture is the scene, the
   person in it is the person (a docked portrait only for a phone call or an empty room), verdicts are paper. */
/* The page is dark by design and says so three ways: Samsung's browser repaints ("darkens") the light surfaces of any
   page that does not declare a dark scheme in a meta tag or a media query — the paper cards went brown, the main button
   grey (seen on a Galaxy A54, 2026-11-11). The meta tag is in index.html; the media query is here. */
@media (prefers-color-scheme: dark) { :root { color-scheme: dark; } }
:root {
  color-scheme: dark;
  --g: #3f9d58; --y: #d9b23a; --r: #c4493a;
  --ink: #1f1b16; --paper: #fbf8f1;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font: 17px/1.45 -apple-system, system-ui, "Segoe UI", Roboto, "Liberation Sans", sans-serif;
  min-height: 100vh; -webkit-text-size-adjust: 100%; background: #14171c; color: #eee9e0;
}

#app { max-width: 460px; margin: 0 auto; padding-block: max(12px, env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-bottom, 0px)); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
body.share-only #app { max-width: none; padding: 0; }
body.share-only img.share { display: block; width: 100%; height: auto; }

p { margin: 0 0 10px; }
.serif { font-family: Georgia, "Iowan Old Style", "Times New Roman", serif; }
.fade-in { animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Tiles: the squares, drawn. Emoji stay in the share text only. */
.tiles { display: flex; flex-wrap: wrap; gap: 6px; min-height: 22px; }
.tile { display: inline-block; width: 22px; height: 22px; border-radius: 5px; box-shadow: inset 0 -3px 0 rgba(0,0,0,.18); animation: pop .28s ease-out; }
.tile.g { background: var(--g); } .tile.y { background: var(--y); } .tile.r { background: var(--r); }
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }

/* The room's temperature, with the term-sheet line marked. */
.temp .bar { position: relative; height: 8px; border-radius: 5px; background: rgba(255,255,255,.22); }
.temp .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; transition: width .5s ease, background .5s ease; }
.temp .mark { position: absolute; top: -4px; bottom: -4px; width: 2px; left: 80%; background: currentColor; }
.temp .labels { display: flex; justify-content: space-between; font-size: 13px; margin-top: 4px; opacity: .9; }

button { font: inherit; cursor: pointer; }
button[disabled] { opacity: .5; cursor: default; }
.btn { display: block; width: 100%; text-align: center; text-decoration: none; border-radius: 12px; min-height: 52px; padding: 14px; font-weight: 600; font-size: 17px; border: 0; margin-top: 10px; }
.btn.ghost { font-weight: 500; font-size: 16px; min-height: 48px; padding: 12px; background: transparent; }
.toast { text-align: center; font-size: 14px; min-height: 20px; margin-top: 6px; }
.next { text-align: center; font-size: 14px; margin-top: 14px; opacity: .7; }
.stats { display: flex; gap: 10px; margin: 14px 0 4px; text-align: center; }
.stats div { flex: 1; border-radius: 10px; padding: 8px 4px; }
.stats b { display: block; font-size: 22px; }
.stats span { font-size: 12px; opacity: .7; }
.reveal { border-radius: 10px; padding: 10px 12px; margin: 12px 0; font-size: 15px; }
.dev { margin-top: 12px; font-size: 13px; text-align: center; opacity: .7; }
.dev a { color: inherit; margin: 0 4px; }

/* ===================== the room ===================== */
.a-card { background: #1d2127; border-radius: 18px; overflow: hidden; box-shadow: 0 14px 40px rgba(0,0,0,.45); }
.a-scene { position: relative; height: 300px; background-color: #2a2f36; background-size: cover; background-position: var(--fx, 50%) 42%; }
.a-scene .grade { position: absolute; inset: 0; transition: background .7s ease; background: linear-gradient(180deg, rgba(60,95,150,.10), rgba(40,70,120,.42)); mix-blend-mode: multiply; }
.a-scene.mid .grade { background: linear-gradient(180deg, rgba(120,110,90,.06), rgba(90,80,60,.25)); }
.a-scene.warm .grade { background: linear-gradient(180deg, rgba(255,190,90,.10), rgba(220,140,50,.28)); mix-blend-mode: soft-light; }
.a-scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.35) 0, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 55%, rgba(0,0,0,.62) 100%); pointer-events: none; }
.a-temp { position: absolute; z-index: 2; left: 12px; right: 12px; top: 12px; color: #fff; padding: 8px 10px 6px; border-radius: 10px; background: rgba(15,17,20,.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.a-plate { position: absolute; z-index: 2; left: 16px; bottom: 34px; color: #fff; font-weight: 700; font-size: 18px; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.a-plate span { display: block; font-weight: 400; font-size: 13px; opacity: .85; letter-spacing: .02em; }
.a-badge { position: absolute; z-index: 2; right: 14px; bottom: 26px; width: 94px; height: 94px; border-radius: 50%; overflow: hidden; background: var(--fund); border: 3px solid #fbf8f1; box-shadow: 0 6px 18px rgba(0,0,0,.5); }
.a-badge img { position: absolute; width: 150%; left: -25%; top: -2%; transition: opacity .15s ease; }
.a-speech { position: relative; z-index: 3; margin: -22px 14px 0; background: var(--paper); color: var(--ink); border-radius: 14px; padding: 12px 16px 14px; box-shadow: 0 8px 22px rgba(0,0,0,.35); }
.a-speech::before { content: ""; position: absolute; top: -9px; left: var(--tail, calc(100% - 72px)); border: 10px solid transparent; border-top: 0; border-bottom-color: var(--paper); }
.a-speech .who { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #8a7f6d; margin-bottom: 2px; }
.a-speech .q { font-size: 18.5px; line-height: 1.38; }
.a-tiles { padding: 14px 16px 2px; }
.a-chips { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 18px; }
.a-chip { text-align: left; color: #f1ece3; background: #272c34; border: 1px solid #3a414b; border-radius: 12px; padding: 13px 14px; min-height: 52px; font-size: 16.5px; line-height: 1.35; transition: border-color .12s, background .12s; }
.a-chip:hover { border-color: #8b95a3; background: #2d333c; }
.a-chip.tell { border-color: #c9a14a; box-shadow: inset 3px 0 0 #c9a14a; }
.a-pad { padding: 16px 18px 18px; }
.a-kicker { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #9aa1ab; margin: 0 0 4px; }
.a-title { font-size: 26px; line-height: 1.15; margin: 0 0 6px; font-weight: 750; }
.a-door { color: #b3b8bf; font-style: italic; }
.a-index { margin: 14px 0; color: var(--ink); background: var(--paper) repeating-linear-gradient(transparent 0 25px, #dfe6ee 25px 26px); background-position: 0 34px; border-top: 3px solid #c96b5a; border-radius: 4px; padding: 10px 14px 12px; box-shadow: 0 6px 16px rgba(0,0,0,.35); line-height: 26px; }
.a-index .name { font-weight: 800; font-size: 18px; }
.a-index dl { display: grid; grid-template-columns: auto 1fr; gap: 0 12px; margin: 2px 0 0; font-size: 15px; }
.a-index dt { color: #7d7466; } .a-index dd { margin: 0; }
.a-note { margin: 16px 6px 14px; color: #2b2410; background: #f4df7b; padding: 12px 14px 14px; transform: rotate(-1.3deg); box-shadow: 0 8px 18px rgba(0,0,0,.4); font-family: -apple-system, system-ui, sans-serif; font-size: 16px; line-height: 1.4; }   /* a hand font read badly on a phone (Ari, 2026-11-07) */
.a-note .k { font-family: -apple-system, system-ui, sans-serif; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .65; display: block; margin-bottom: 4px; }
.a-how { font-size: 14px; color: #9aa1ab; }
.btn.go { background: #3a7d5c; color: #fff; }
.btn.ghost { color: #e6e0d6; border: 1px solid #3a414b; }
.stats div, .reveal { background: #272c34; }
.toast { color: #9fd1b0; }

/* the desk the paper lies on */
.a-desk { position: relative; overflow: hidden; padding: 22px 16px 18px; background: radial-gradient(120% 90% at 50% 0%, #4a3727 0%, #33261b 55%, #241a12 100%); }
.a-desk::before { content: ""; position: absolute; inset: -24px; background: var(--scene) center / cover; filter: blur(10px) brightness(.42) saturate(.8); }
.a-desk > * { position: relative; }
.a-paper { position: relative; color: var(--ink); background: var(--paper); padding: 20px 20px 18px; transform: rotate(-.7deg); box-shadow: 0 14px 32px rgba(0,0,0,.5); font-family: Georgia, "Iowan Old Style", serif; }
.a-paper .letterhead { font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase; border-bottom: 2px solid var(--ink); padding-bottom: 6px; font-family: -apple-system, system-ui, sans-serif; font-weight: 700; }
.a-paper .doc-title { font-size: 22px; margin: 12px 0 2px; }
.a-paper .doc-meta { font-size: 13px; color: #6f6556; margin-bottom: 8px; }
.a-paper table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.a-paper td { padding: 6px 0; border-bottom: 1px solid #e3dccd; vertical-align: top; }
.a-paper td:first-child { color: #6f6556; width: 44%; padding-right: 10px; }
.a-paper .sign { display: flex; gap: 16px; margin-top: 18px; font-size: 12.5px; color: #6f6556; }
.a-paper .sign div { flex: 1; border-top: 1px solid var(--ink); padding-top: 4px; }
body.still *, body.still *::before { animation: none !important; transition: none !important; }
.a-stamp { position: absolute; right: 16px; bottom: 16px; color: #b8291e; border: 3px solid #b8291e; border-radius: 4px; padding: 6px 10px; font: 800 21px/1 -apple-system, system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; transform: rotate(-13deg); opacity: .86; mix-blend-mode: multiply; animation: stamp .4s cubic-bezier(.2,.9,.3,1.2) .15s both; }
@keyframes stamp { from { transform: rotate(-13deg) scale(2.4); opacity: 0; } to { transform: rotate(-13deg) scale(1); opacity: .86; } }
.a-mail { color: #1c1c1e; background: #f6f6f7; border-radius: 16px; overflow: hidden; box-shadow: 0 14px 32px rgba(0,0,0,.5); }
.a-mail .bar { display: flex; justify-content: space-between; padding: 11px 14px; font-size: 14px; color: #2f6fd6; border-bottom: 1px solid #e2e2e5; background: #fbfbfc; }
.a-mail .bar span:last-child { color: #8e8e93; }
.a-mail .from { display: flex; gap: 10px; align-items: center; padding: 12px 14px 4px; }
.a-mail .from .av { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; position: relative; background: var(--fund); flex: none; }
.a-mail .from .av img { position: absolute; width: 175%; left: -37.5%; top: -4%; }
.a-mail .from b { display: block; font-size: 15px; } .a-mail .from span { font-size: 13px; color: #8e8e93; }
.a-mail .subj { padding: 6px 14px 0; font-weight: 700; font-size: 16px; }
.a-mail .body { padding: 8px 14px 4px; font-size: 16px; line-height: 1.45; }
.a-mail .sig { padding: 4px 14px 14px; font-size: 13px; color: #8e8e93; }
.a-mail .empty { padding: 46px 16px 52px; text-align: center; color: #8e8e93; font-size: 16px; }
.a-mail .tray { width: 58px; height: 40px; margin: 0 auto 12px; border: 3px solid #c7c7cc; border-top: 0; border-radius: 0 0 10px 10px; position: relative; }
.a-mail .tray::before { content: ""; position: absolute; left: 12px; right: 12px; top: 10px; height: 3px; background: #c7c7cc; }
.a-translate { display: inline-block; margin-top: 14px; color: var(--paper); background: #b8291e; padding: 5px 10px; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; transform: rotate(-1deg); }
.a-toast { display: flex; gap: 10px; align-items: center; margin: 0 4px 14px; padding: 10px 12px; border-radius: 14px; color: #fff; background: rgba(28,28,30,.94); box-shadow: 0 10px 24px rgba(0,0,0,.45); font-size: 14px; animation: drop .5s ease-out .2s both; }
.a-toast .av { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; position: relative; background: var(--fund); flex: none; }
.a-toast .av img { position: absolute; width: 175%; left: -37.5%; top: -4%; }
.a-toast span { display: block; font-size: 12px; opacity: .7; }
@keyframes drop { from { transform: translateY(-14px); opacity: 0; } to { transform: none; opacity: 1; } }


/* a phone call: the caller's photo with a ringing edge */
.a-badge.call { border-color: #6fd38f; box-shadow: 0 0 0 6px rgba(111,211,143,.25), 0 6px 18px rgba(0,0,0,.5); }
.a-badge { background: #39414b; }

/* the founder's own call: no square, set apart from the questions */
.a-speech.decide { background: #efe6d2; }
.a-speech .ctx { font-size: 14px; color: #6f6556; margin-bottom: 6px; font-style: italic; }
.a-chip.decide { border-style: dashed; border-color: #8a7f6d; }

/* the week: seven days, each with the stamp it earned */
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin: 12px 0 2px; }
.week a, .week b { display: block; text-align: center; text-decoration: none; color: #cfd4da; background: #272c34; border-radius: 9px; padding: 7px 0 6px; font-size: 13.5px; font-weight: 700; border: 1px solid transparent; }
.week span { display: block; font-size: 12px; font-weight: 600; line-height: 1; margin-top: 4px; min-height: 12px; opacity: .9; }
.week .g-top { background: #2f6b47; color: #fff; } .week .g-mid { background: #8a7224; color: #fff; } .week .g-low { background: #8c3a30; color: #fff; }
.week .open { border-color: #6a7380; border-style: dashed; } .week .today { border-color: #eee9e0; } .week .later { opacity: .45; }
.week .here { outline: 2px solid #eee9e0; outline-offset: 1px; }
.a-note.dim { background: #d9d3c4; color: #4a4336; font-family: -apple-system, system-ui, sans-serif; font-size: 15px; }

/* the day's paper when there is no term sheet: a receipt of what changed hands */
.a-paper.receipt .doc-title { font-size: 20px; line-height: 1.3; }
.a-paper.receipt { padding-bottom: 70px; }
.a-paper .nothing { font-size: 15px; color: #6f6556; margin: 6px 0 0; }
.a-desk .a-note { margin-top: 18px; }

/* Sunday: the week told back */
.story { color: var(--ink); background: var(--paper); border-radius: 6px; padding: 14px 16px 12px; margin: 6px 0 4px; box-shadow: 0 8px 22px rgba(0,0,0,.35); }
.story .kicker { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #8a7f6d; font-weight: 700; margin-bottom: 6px; }
.story .line { padding: 7px 0; border-bottom: 1px solid #e3dccd; font-size: 15px; line-height: 1.35; }
.story .line b { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #8a7f6d; }
.story .line .tiles { margin-top: 5px; gap: 4px; min-height: 0; }
.story .line .tile { width: 14px; height: 14px; border-radius: 3px; }
.story .own { font: 19px/1.4 Georgia, "Iowan Old Style", serif; margin: 12px 0 10px; }
.story .cap .row { display: grid; grid-template-columns: 96px 1fr 44px; gap: 8px; align-items: center; font-size: 14px; margin: 4px 0; }
.story .cap i { display: block; height: 10px; background: #e7e0d1; border-radius: 5px; overflow: hidden; }
.story .cap u { display: block; height: 100%; background: #3a7d5c; }
.story .cap b { text-align: right; }
.story .money { font-size: 14px; color: #6f6556; margin: 8px 0 0; }
.tile.x { background: #3a3f47; }

/* the morning: the day's title, then who you can see */
.a-pad.head { padding-bottom: 6px; }
.a-pad.tight { padding-top: 0; padding-bottom: 0; }
.a-pad.tight .a-note { margin: 10px 6px 4px; }
.choose { padding: 8px 14px 2px; }
.choose h2 { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #9aa1ab; margin: 4px 4px 10px; font-weight: 700; }
.pick { display: block; width: 100%; padding: 0; margin: 0 0 12px; text-align: left; color: inherit; background: #272c34; border: 1px solid #3a414b; border-radius: 14px; overflow: hidden; transition: border-color .12s, transform .12s; }
.pick:hover { border-color: #8b95a3; } .pick:active { transform: scale(.99); }
.pick .pic { position: relative; height: 150px; background-color: #2a2f36; background-size: cover; background-position: var(--fx, 50%) 40%; }
.pick .pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0) 45%, rgba(0,0,0,.68) 100%); }
.pick .nm { position: absolute; z-index: 1; left: 14px; bottom: 10px; color: #fff; font-weight: 750; font-size: 19px; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.pick .nm span { display: block; font-weight: 400; font-size: 13px; opacity: .88; }
.pick .tag { position: absolute; z-index: 1; left: 12px; top: 10px; background: #f4df7b; color: #2b2410; font-size: 12.5px; font-weight: 700; padding: 4px 9px; border-radius: 6px; transform: rotate(-1.5deg); box-shadow: 0 3px 8px rgba(0,0,0,.35); }
.pick .txt { display: flex; gap: 10px; align-items: flex-end; padding: 10px 12px 12px 14px; }
.pick .words { flex: 1; min-width: 0; }
.pick .hl { font-size: 13.5px; color: #aeb4bc; line-height: 1.35; }
.pick .stake { font-size: 15.5px; color: #f1ece3; margin-top: 4px; font-weight: 600; }
.pick .go { flex: none; white-space: nowrap; font-size: 14px; font-weight: 700; color: #fff; background: #3a7d5c; border-radius: 9px; padding: 7px 10px; }
.a-badge.mini { width: 64px; height: 64px; right: 12px; top: 12px; bottom: auto; border-width: 2px; }   /* top right: the name and place sit bottom left */

/* the company as it stands */
.ledger { margin: 6px 0 12px; color: var(--ink); background: var(--paper); border-top: 3px solid #c96b5a; border-radius: 6px; padding: 10px 12px 10px; box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.ledger .co b { font-size: 17px; margin-right: 6px; } .ledger .co span { font-size: 14px; color: #5f574b; }
.ledger dl { display: grid; grid-template-columns: .95fr 1.12fr 1.2fr .8fr; gap: 5px; margin: 8px 0 0; }
.ledger dl div { background: #f1ebde; border-radius: 6px; padding: 5px 6px 4px; }
.ledger dt { font-size: 10px; letter-spacing: 0; text-transform: uppercase; color: #8a7f6d; white-space: nowrap; }
.ledger dd { margin: 0; font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ledger dd.long { font-size: 12px; letter-spacing: -.01em; }   /* "You + Dex + 2" on a 412 px phone */

.mail { text-align: center; font-size: 14px; color: #9aa1ab; margin: 14px 0 0; }
.mail a { color: #e6e0d6; user-select: all; }
#saved .share-img { display: block; width: 100%; border-radius: 10px; margin-top: 12px; }
#saved .hint { font-size: 13.5px; color: #9aa1ab; text-align: center; margin-top: 6px; }
@media (prefers-reduced-motion: reduce) { *, *::before { animation: none !important; transition: none !important; } }

/* ===== compact for phones (Ari, 2026-10-28: a Samsung A54 is 412 × ~800 usable) ===== */
body { font-size: 16px; }
#app { padding-block: max(8px, env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-bottom, 0px)); }
.a-scene { height: clamp(170px, 27vh, 260px); }
.a-temp { top: 8px; left: 10px; right: 10px; padding: 6px 9px 5px; }
.a-plate { bottom: 26px; font-size: 16.5px; }
.a-speech { margin: -18px 12px 0; padding: 10px 14px 12px; }
.a-speech .q { font-size: 17px; line-height: 1.36; }
.a-tiles { padding: 10px 14px 0; }
.tile { width: 18px; height: 18px; border-radius: 4px; }
.a-chips { gap: 8px; padding: 10px 12px 14px; }
.a-chip { padding: 10px 12px; min-height: 44px; font-size: 15.5px; line-height: 1.32; }
.a-pad { padding: 14px 16px 16px; }
.a-pad.head { padding-bottom: 4px; }
.a-title { font-size: 22px; margin-bottom: 2px; }
.a-kicker { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.week { margin-top: 10px; gap: 4px; }
.week a, .week b { padding: 5px 0 4px; font-size: 12.5px; border-radius: 8px; }
.week span { font-size: 11px; margin-top: 3px; }
.choose { padding: 6px 12px 0; }
.choose h2 { margin: 2px 4px 8px; }
.picks.n2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.picks.n2 .pick { margin: 0; display: flex; flex-direction: column; }
.picks.n2 .pic { height: 132px; }
.picks.n2 .nm { left: 10px; bottom: 8px; font-size: 16px; }
.picks.n2 .nm span { font-size: 12px; }
.picks.n2 .tag { font-size: 11px; padding: 3px 6px; left: 8px; top: 8px; }
.picks.n2 .txt { flex: 1; flex-direction: column; align-items: stretch; gap: 8px; padding: 8px 10px 10px; }
.picks.n2 .hl { font-size: 12px; }   /* whole, never clamped (Ari, 2026-10-29: Mom's and Timo's ended in "…" on a 360 px phone); the picture gives up the height */
.picks.n2 .stake { font-size: 13.5px; line-height: 1.3; }
.picks.n2 .go { margin-top: auto; text-align: center; padding: 8px 6px; }
.picks.n1 .pick { margin: 0; }
.ledger { margin-top: 2px; }
.btn { min-height: 46px; padding: 11px 12px; font-size: 16px; margin-top: 8px; }
.btn.ghost { min-height: 42px; padding: 9px 12px; font-size: 15px; }

/* ===== one phone screen tall (Ari, 2026-10-29: the compact pass left a third of the screen empty) =====
   Every screen fills the phone's height; the picture takes what the words and buttons leave, so a tall
   phone gets a bigger room rather than an empty bottom, and a short one keeps the 170 px floor and scrolls. */
#app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
#app > .a-card { flex: 1 0 auto; display: flex; flex-direction: column; }
.a-scene { flex: 1 1 auto; height: auto; min-height: clamp(170px, 27vh, 260px); max-height: 66vh; }
.a-chips { padding-bottom: 18px; }
.choose { flex: 1 0 auto; display: flex; flex-direction: column; }
.picks { flex: 1 0 auto; display: flex; flex-direction: column; }
.picks.n2 { display: grid; grid-auto-rows: 1fr; }
.picks .pick { flex: 1 0 auto; display: flex; flex-direction: column; }
.picks .pic { flex: 1 1 auto; height: auto; min-height: 150px; }
.picks.n2 .pic { height: auto; min-height: 132px; }
.picks .txt, .picks.n2 .txt { flex: none; }
/* the two cards share their rows, so both names and both buttons sit level whatever the headline's length */
.picks.n2 { grid-template-rows: 1fr auto; grid-auto-rows: auto; row-gap: 0; }
.picks.n2 .pick { grid-row: span 2; display: grid; grid-template-rows: subgrid; row-gap: 0; }
/* a tall phone (most of them: 390 x 844 and up) has the room for the first build's reading sizes back */
@media (min-height: 760px) {
  .a-speech .q { font-size: 18.5px; line-height: 1.38; }
  .a-speech { padding: 12px 16px 14px; }
  .a-chips { gap: 10px; padding: 12px 14px 20px; }
  .a-chip { padding: 13px 14px; min-height: 52px; font-size: 16.5px; line-height: 1.35; }
  .tile { width: 20px; height: 20px; }
  .a-title { font-size: 25px; }
}
.restart { display: block; margin: 12px auto 0; font-size: 13px; color: #9aa1ab; background: none; border: 0; text-decoration: underline; padding: 6px 10px; }
/* the day's paper: the desk takes the screen's spare height and the paper sits in the middle of it */
#app > .a-card > .a-desk { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; }
/* the week strip first, then the day's title with the music switch beside it (Ari, 2026-10-29): the strip already
   says which day it is, so the demo drops the "Monday · day 1 of 7" line and the Artifact's top bar costs less */
.a-pad.head > .week:first-child { margin-top: 0; }
.a-titlerow { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; }
.a-titlerow .a-title { margin: 0; }

/* ===== the public page (Ari, 2026-10-29): a start screen, statistics, the share line ===== */
.tools { display: flex; gap: 6px; flex: none; }
.tools.foot { justify-content: center; margin-top: 16px; }
.ic { position: relative; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; color: #cfd4da; background: #272c34; border: 1px solid #3a414b; border-radius: 50%; }
.ic svg { width: 18px; height: 18px; fill: currentColor; }
.ic:hover { border-color: #8b95a3; }
.ic.off svg { opacity: .4; }
.ic.off::after { content: ""; position: absolute; width: 22px; height: 2px; background: #cfd4da; transform: rotate(-45deg); border-radius: 1px; }

.home { min-height: calc(100dvh - 40px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 12px 4px 4px; }
.home .logo { width: 76px; height: 76px; border-radius: 18px; box-shadow: 0 8px 22px rgba(0,0,0,.45); }
.home h1 { font: 700 40px/1.05 Georgia, "Iowan Old Style", "Times New Roman", serif; letter-spacing: -.01em; margin: 16px 0 8px; }
.home .tagline { font-size: 16.5px; color: #b9bec6; max-width: 320px; margin: 0 0 20px; }
.wkcard { width: 100%; text-align: left; color: var(--ink); background: var(--paper); border-top: 3px solid #c96b5a; border-radius: 8px; padding: 12px 14px 14px; box-shadow: 0 8px 22px rgba(0,0,0,.4); }
.wkcard .k { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #8a7f6d; font-weight: 700; }
.wkcard b { display: block; font: 700 24px/1.2 Georgia, "Iowan Old Style", serif; margin: 2px 0 2px; }
.wkcard span { display: block; font-size: 14.5px; color: #5f574b; line-height: 1.35; }
.pips { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 12px; }
.pips i { font-style: normal; display: grid; place-items: center; height: 34px; border-radius: 6px; background: #ece5d6; color: #8a7f6d; font-size: 13px; font-weight: 700; }
.pips .g-top { background: var(--g); color: #fff; } .pips .g-mid { background: var(--y); color: #fff; } .pips .g-low { background: var(--r); color: #fff; }
.btn.play { color: #14171c; background: #f1ece3; border-radius: 999px; font-weight: 750; margin-top: 22px; }
.btn.play:hover { background: #fff; }
.pair { display: flex; gap: 10px; width: 100%; }
.btn.line { flex: 1; min-height: 46px; padding: 10px; font-size: 15px; color: #e6e0d6; background: transparent; border: 1px solid #4a525d; border-radius: 999px; }
.btn.line:hover { border-color: #8b95a3; }
.home .live { font-size: 14.5px; color: #cfd4da; margin: 16px 0 0; min-height: 1px; max-width: 340px; }
.home .foot { font-size: 13px; color: #8a919b; margin: 18px 0 0; line-height: 1.6; }
.home .foot a { color: #cfd4da; }

.sheet-bg { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,0); transition: background .2s; }
.sheet-bg.in { background: rgba(0,0,0,.55); }
.sheet { position: absolute; left: 50%; bottom: 0; width: min(100%, 460px); max-height: 88dvh; overflow: auto; transform: translate(-50%, 100%); transition: transform .25s ease;
  background: #1d2127; border-radius: 18px 18px 0 0; padding: 18px 18px calc(22px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -10px 40px rgba(0,0,0,.5); }
.sheet-bg.in .sheet { transform: translate(-50%, 0); }
@media (min-width: 700px) and (min-height: 640px) {
  .sheet { bottom: auto; top: 50%; border-radius: 18px; transform: translate(-50%, -44%); opacity: 0; transition: transform .2s ease, opacity .2s; padding-bottom: 22px; }
  .sheet-bg.in .sheet { transform: translate(-50%, -50%); opacity: 1; }
}
.sheet .x { position: absolute; right: 10px; top: 8px; width: 36px; height: 36px; font-size: 26px; line-height: 1; color: #9aa1ab; background: none; border: 0; }
.sheet h2 { font-size: 15px; letter-spacing: .14em; text-transform: uppercase; text-align: center; margin: 2px 0 6px; }
.sheet h3 { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #9aa1ab; margin: 18px 0 8px; }
.nums { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; text-align: center; }
.nums b { display: block; font-size: 26px; font-weight: 750; line-height: 1.15; }
.nums span { display: block; font-size: 11.5px; color: #9aa1ab; line-height: 1.2; margin-top: 2px; }
.dist div { display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 8px; margin: 5px 0; font-size: 13px; color: #cfd4da; }
.dist i { display: block; font-style: normal; text-align: right; color: #fff; font-weight: 700; font-size: 13px; padding: 2px 7px; border-radius: 4px; min-width: 26px; }
.dist .g i { background: var(--g); } .dist .y i { background: var(--y); } .dist .r i { background: var(--r); }
.rankline, .rank p { font-size: 15px; line-height: 1.4; text-align: center; color: #e6e0d6; margin: 12px 0 0; }
.rank p + p { margin-top: 4px; font-size: 14px; color: #9aa1ab; }
.btn.share { display: flex; align-items: center; justify-content: center; gap: 8px; color: #fff; background: #3a7d5c; border-radius: 999px; font-weight: 700; margin-top: 16px; }
.btn.share svg { width: 19px; height: 19px; }
.how { padding-left: 20px; margin: 10px 0 4px; font-size: 16px; line-height: 1.45; }
.how li { margin-bottom: 9px; }
.pop { position: fixed; z-index: 60; left: 50%; top: max(18px, env(safe-area-inset-top, 0px)); transform: translateX(-50%); background: #f1ece3; color: #14171c; font-weight: 700; font-size: 15px; padding: 10px 16px; border-radius: 10px; box-shadow: 0 8px 22px rgba(0,0,0,.45); transition: opacity .4s; }
.pop.out { opacity: 0; }
.btn.line.again { width: 100%; margin-top: 4px; }

/* ===== Sunday's verdict (Ari, 2026-10-29: "the end must be more impressive") ===== */
.verdict-pad { padding-bottom: 6px; }
.verdict { position: relative; color: var(--ink); background: var(--paper); border-top: 4px solid #c96b5a; border-radius: 10px; padding: 14px 16px 16px; box-shadow: 0 10px 28px rgba(0,0,0,.45); overflow: hidden; }
.v-k { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #8a7f6d; font-weight: 700; }
.v-stamp { position: absolute; top: 12px; right: 12px; color: #c4362a; border: 3px solid #c4362a; border-radius: 6px; padding: 3px 9px 2px; font-weight: 800; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; transform: rotate(-7deg); opacity: .92; animation: slam .42s cubic-bezier(.2,.9,.3,1.3) .95s both; }
@keyframes slam { from { transform: rotate(-7deg) scale(2.4); opacity: 0; } to { transform: rotate(-7deg) scale(1); opacity: .92; } }
.v-value { font: 700 44px/1.05 Georgia, "Iowan Old Style", serif; letter-spacing: -.01em; margin: 14px 0 4px; font-variant-numeric: tabular-nums; }
.v-sub { font-size: 14.5px; color: #5f574b; line-height: 1.35; }
.v-line { font: italic 17px/1.35 Georgia, "Iowan Old Style", serif; margin: 12px 0 14px; padding-top: 12px; border-top: 1px solid #e3dccd; }
.v-row { display: flex; align-items: center; gap: 16px; }
.ring { position: relative; flex: none; width: 96px; height: 96px; border-radius: 50%; animation: spin-in .8s ease-out .2s both; }
@keyframes spin-in { from { transform: rotate(-90deg) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.ring > div { position: absolute; inset: 15px; background: var(--paper); border-radius: 50%; display: grid; place-content: center; text-align: center; }
.ring b { font-size: 19px; line-height: 1; } .ring span { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: #8a7f6d; }
.v-cap { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 0; font-size: 14px; }
.v-cap li { display: flex; align-items: center; gap: 7px; padding: 2px 0; }
.v-cap i { flex: none; width: 10px; height: 10px; border-radius: 3px; }
.v-cap b { margin-left: auto; font-variant-numeric: tabular-nums; }
.v-facts { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; margin-top: 14px; padding-top: 10px; border-top: 1px solid #e3dccd; }
.v-facts b { display: block; font-size: 19px; } .v-facts span { font-size: 11.5px; color: #8a7f6d; }
.v-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 14px; perspective: 400px; }
.v-days i { font-style: normal; display: grid; place-items: center; height: 40px; border-radius: 7px; color: #fff; font-size: 12px; font-weight: 750; box-shadow: inset 0 -3px 0 rgba(0,0,0,.18); animation: flip .5s ease-out calc(var(--i) * 90ms + .25s) both; }
.v-days .g-top { background: var(--g); } .v-days .g-mid { background: var(--y); } .v-days .g-low { background: var(--r); } .v-days .miss { background: #3a3f47; }
@keyframes flip { from { transform: rotateX(90deg); opacity: 0; } to { transform: none; opacity: 1; } }
.v-rank:not(:empty) { margin-top: 14px; padding-top: 12px; border-top: 1px solid #e3dccd; }
.v-badge { display: flex; align-items: center; gap: 12px; text-align: left; animation: fade .4s ease both; }
.v-badge .medal { flex: none; width: 60px; height: 60px; border-radius: 50%; display: grid; place-content: center; text-align: center; color: #3b2a06;
  background: radial-gradient(circle at 35% 30%, #f6dd8a, #d9b23a 55%, #a87f22); box-shadow: 0 4px 12px rgba(0,0,0,.25), inset 0 -3px 0 rgba(0,0,0,.15); }
.v-badge .medal span { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1; }
.v-badge .medal b { font: 700 25px/1 Georgia, serif; }
.v-badge > div:last-child b { display: block; font-size: 16px; line-height: 1.3; }
.v-badge > div:last-child span { display: block; font-size: 13px; color: #6f6556; margin-top: 2px; }
.v-chart .bars { display: flex; align-items: flex-end; gap: 2px; height: 72px; }
.v-chart .bars i { flex: 1; background: #d8cfbd; border-radius: 2px 2px 0 0; animation: grow .6s ease-out both; transform-origin: bottom; }
.v-chart .bars i.zero { flex: 0 0 14px; margin-right: 8px; background: #c9bea9; }
.v-chart .bars i.me { background: var(--g); }
@keyframes grow { from { transform: scaleY(0); } to { transform: none; } }
.v-chart .axis { display: flex; justify-content: space-between; font-size: 11px; color: #8a7f6d; margin-top: 3px; }
.v-chart .axis span:first-child { margin-right: auto; } .v-chart .axis span + span { margin-left: 10px; }
.v-better { font-size: 16px; font-weight: 750; text-align: center; margin: 10px 0 2px; }
.v-note { font-size: 13px; color: #6f6556; text-align: center; margin: 2px 0 0; }
.verdict-pad .btn.share { margin-top: 14px; }
/* the same chart and badge inside the dark statistics sheet */
.sheet .v-chart .bars i { background: #3f4650; } .sheet .v-chart .bars i.zero { background: #353b44; } .sheet .v-chart .bars i.me { background: var(--g); }
.sheet .v-chart .axis, .sheet .v-note, .sheet .v-badge > div:last-child span { color: #9aa1ab; }
.sheet .v-better, .sheet .v-badge > div:last-child b { color: #eee9e0; }
.sheet .v-chart, .sheet .v-badge { margin-top: 14px; }
.ledger .co em { font-style: normal; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #8a7f6d; margin-right: 6px; }
.v-k { padding-right: 46%; }   /* the stamp sits top right; a long one ("Co-founder left") must not cross the heading */

/* ===== the season (Ari, 2026-11-04): the press line, the waterfall, the post ===== */
.a-paper .doc-title.long { font-size: 17px; line-height: 1.38; }
.v-press { font: 700 17px/1.32 Georgia, "Iowan Old Style", serif; margin: 12px 0 2px; padding: 8px 0 10px; border-top: 2px solid var(--ink); border-bottom: 1px solid #e3dccd; }
.v-press span { display: block; font: 700 10.5px/1.4 -apple-system, system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #8a7f6d; margin-bottom: 3px; }
.v-press.first { margin-top: 0; border-top: 0; padding-top: 0; }
.li-comments { margin-top: 10px; border-top: 1px solid #e3dccd; padding-top: 8px; }
.li-comments p { font-size: 13.5px; line-height: 1.35; margin: 0 0 6px; color: #3a3530; }
.li-comments b { font-weight: 700; }

.fin-hero { position: relative; height: 170px; background-color: #2a2f36; background-size: cover; background-position: var(--fx, 50%) 40%; }
.fin-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,0) 40%, rgba(29,33,39,1) 100%); }
.fin-k { position: absolute; z-index: 1; left: 18px; top: 12px; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.finale .verdict-pad { margin-top: -34px; position: relative; z-index: 2; padding-top: 0; }
.wf { margin: 10px 0 2px; }
.wf-row { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: baseline; padding: 6px 0 9px; font-size: 14px; line-height: 1.3; animation: wf-in .4s ease-out both; animation-delay: calc(var(--i) * .45s + .3s); }
.wf-row b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.wf-row i { position: absolute; left: 0; bottom: 3px; height: 4px; width: var(--w); min-width: 2px; background: #c96b5a; border-radius: 2px; transform-origin: left; animation: wf-bar .5s ease-out both; animation-delay: calc(var(--i) * .45s + .4s); }
.wf-row.head { font-weight: 700; } .wf-row.head i { background: var(--ink); }
.wf-row.dim { color: #8a7f6d; font-size: 13px; } .wf-row.dim i { display: none; }
.wf-row.you { font-size: 16px; font-weight: 800; border-top: 1px solid #e3dccd; margin-top: 2px; padding-top: 9px; } .wf-row.you i { background: var(--g); }
@keyframes wf-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes wf-bar { from { transform: scaleX(0); } to { transform: none; } }
.fin-take { margin-top: 12px; animation: wf-in .5s ease-out both; animation-delay: calc(var(--i) * .45s + .4s); }
.fin-take span, .fin-type span { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: #8a7f6d; }
.fin-take .v-value { margin-top: 4px; }
.fin-type { margin-top: 14px; padding: 12px 14px; background: #f1ebde; border-radius: 8px; animation: wf-in .5s ease-out both; animation-delay: calc(var(--i) * .45s + .5s); }
.fin-type b { display: block; font: 700 21px/1.2 Georgia, "Iowan Old Style", serif; margin: 3px 0 4px; }
.fin-type p { margin: 0; font-size: 14.5px; line-height: 1.35; color: #5f574b; }
.fin-grid { margin-top: 14px; display: grid; gap: 4px; justify-content: center; }
.fin-grid div { display: flex; gap: 4px; }
.fin-grid .tile { width: 26px; height: 26px; border-radius: 5px; }
.tile.x { background: #d8cfbd; }
.li-post { margin-top: 14px; color: #1d2127; background: #fff; border-radius: 10px; padding: 12px 14px; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.li-head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.li-av { flex: none; width: 42px; height: 42px; border-radius: 50%; background: #c9d2dc; }
.li-head b { display: block; font-size: 15px; } .li-head span { display: block; font-size: 12.5px; color: #6c7480; }
.li-body { font-size: 15px; line-height: 1.42; margin: 0 0 8px; }
.li-react { font-size: 12.5px; color: #6c7480; }
.nums.second { margin-top: 10px; }
@media (max-height: 700px) { .fin-hero { height: 130px; } }
.v-value.long { font-size: 36px; }
.fin-hero::after { background: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,0) 34%, rgba(29,33,39,1) 100%); }
.v-value.long { font-size: 36px; }
.fin-hero::after { background: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,0) 34%, rgba(29,33,39,1) 100%); }
.ledger dl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, .85fr); }
.v-stage { height: 150px; margin: -14px -16px 12px; background-size: cover; background-position: 50% 30%; }
.verdict .v-stage + .v-k + .v-stamp { top: 164px; }

/* the week's brief: the company, where it stands, what the week asks — one screen before Monday (Ari, 2026-11-07) */
.brief { padding: 12px 0 8px; }
.brief .kicker { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #9aa1ab; font-weight: 700; margin: 8px 2px 6px; }
.brief .text { font-size: 16.5px; line-height: 1.45; color: #e6e0d6; margin: 12px 2px 14px; }
.brief .plan { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 4px; }
.brief .plan li { display: grid; grid-template-columns: 56px 1fr; align-items: center; background: #272c34; border-radius: 8px; padding: 7px 10px; font-size: 15px; }
.brief .plan b { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: #9aa1ab; white-space: nowrap; }

/* the hackathon weekend's seven half-day tabs ("Fri pm", "Sat am", "Night") */
.week.hack a, .week.hack b { font-size: 11px; letter-spacing: -.02em; padding-left: 0; padding-right: 0; white-space: nowrap; overflow: hidden; }
/* the weekend's half-day pips on the start screen: "Fri / pm", "Sat / am", "Night" */
.pips.hack i { font-size: 9px; line-height: 1.1; letter-spacing: .02em; text-transform: uppercase; text-align: center; padding: 0 1px; }

/* The mailing list and the referral line under a week's share button (2026-11-08). */
.v-ref, .mail-done { text-align: center; font-size: 14px; color: #cfd4da; opacity: .85; margin: 12px 0 0; }
.v-ref:empty { display: none; }
.mailform { margin: 16px 0 0; text-align: center; }
.mailform p { font-size: 14px; color: #cfd4da; opacity: .85; margin: 0 0 8px; }
.mailform .row { display: flex; gap: 8px; }
.mailform input { flex: 1; min-width: 0; min-height: 46px; padding: 10px 14px; font: inherit; font-size: 16px; color: #e6e0d6; background: #1b2027; border: 1px solid #4a525d; border-radius: 999px; }
.mailform input:focus { outline: none; border-color: #8b95a3; }
.mailform input::placeholder { color: #6b7480; }
.mailform .btn.line { flex: 0 0 auto; width: auto; margin-top: 0; padding-left: 18px; padding-right: 18px; }
.mailform.busy { opacity: .6; pointer-events: none; }
.mailform .cf-turnstile { display: flex; justify-content: center; margin-top: 8px; }
.mailform .cf-turnstile:empty { display: none; }
.mail-note { min-height: 0; font-size: 13px; color: #e0a06a; margin: 6px 0 0; }
.mail-note:empty { display: none; }

/* ---- 2026-11-10: reactions, the term sheet's own words, the decision, tomorrow's card ---- */
.a-paper td small { display: block; margin-top: 1px; font: 11.5px/1.3 -apple-system, system-ui, sans-serif; letter-spacing: .02em; color: #8a7f6d; }
.a-paper .legend { margin: 8px 0 0; font: 11.5px/1.3 -apple-system, system-ui, sans-serif; color: #8a7f6d; }
.a-speech.flat { margin-top: 14px; }
.a-speech.flat::before { display: none; }
.lastword { margin: 0 2px 12px; font: italic 15.5px/1.4 Georgia, "Iowan Old Style", serif; color: #d8d2c6; }
.v-if { margin: 10px 0 0; padding: 9px 12px; font-size: 14px; line-height: 1.4; color: #4a4336; background: #f1e6c8; border-left: 3px solid #b8291e; border-radius: 0 6px 6px 0; }
.tomorrow { margin: 14px 0 4px; padding: 12px 14px; background: #232a33; border: 1px solid #3a414b; border-radius: 14px; }
.tomorrow .k { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: #c9a14a; font-weight: 700; margin-bottom: 8px; }
.tomorrow .row { display: flex; gap: 12px; align-items: center; }
.tomorrow .thumbs { display: flex; flex: 0 0 auto; }
.tomorrow .thumbs:empty { display: none; }
.tomorrow .thumbs i { display: block; width: 54px; height: 54px; border-radius: 12px; background-size: auto 210%; border: 2px solid #232a33; }
.tomorrow .thumbs i + i { margin-left: -14px; }
.tomorrow .w b { display: block; font-size: 17px; color: #f1ece3; }
.tomorrow .w span { display: block; font-size: 14.5px; line-height: 1.35; color: #cfd4da; margin-top: 2px; }
.tomorrow .when { margin: 10px 0 0; font-size: 13px; color: #8a919b; }

/* ---- The hackathon weekend's first two screens (2026-11-11, Ari: "no hackathon feeling at all… we need to impress"):
   a picture that fills the phone and moves. The still stands first; the clip fades in over it when the phone plays it.
   A phone that refuses video keeps the still, which drifts under two light beams. .pic keeps the picture's own shape
   (cover, by hand) so the clock can be drawn on the hall's screen at a fixed place in percent. ---- */
#app:has(> .bleed) { padding: 0; }
.bleed { position: relative; isolation: isolate; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.hero { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: #0e1116; container-type: size; }
.hero.top { bottom: auto; height: 64vh; height: 64dvh; }
.hero .pic { position: absolute; left: 50%; top: 50%; height: 100%; aspect-ratio: var(--ar); transform: translate(-50%, -50%); transform-origin: 50% 42%; animation: drift 30s ease-in-out infinite alternate; }
.hero.top .pic { top: 0; transform: translate(-50%, calc(-1 * var(--shift, 0%))); animation: none; }
@supports (width: 1cqw) {
  .hero .pic { height: auto; width: max(100cqw, calc(100cqh * var(--ar))); container-type: inline-size; }
}
.hero img, .hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hero video { opacity: 0; transition: opacity .5s ease; }
.hero video.on { opacity: 1; }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(12,14,18,.66) 0, rgba(12,14,18,0) 15%, rgba(12,14,18,0) 46%, rgba(12,14,18,.8) 68%, rgba(12,14,18,.97) 100%); }
.hero.top::after { background: linear-gradient(to bottom, rgba(12,14,18,.66) 0, rgba(12,14,18,0) 18%, rgba(12,14,18,0) 66%, #14171c 100%); }
.hero .beam { position: absolute; top: -6%; width: 46%; height: 70%; pointer-events: none; mix-blend-mode: screen; opacity: .4; filter: blur(5px); transform-origin: 50% 0; clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); }
.hero .beam.b1 { left: 2%; background: linear-gradient(to bottom, rgba(80,200,255,.7), rgba(80,200,255,0) 80%); animation: sway 9s ease-in-out infinite alternate; }
.hero .beam.b2 { right: 2%; background: linear-gradient(to bottom, rgba(255,90,210,.6), rgba(255,90,210,0) 80%); animation: sway 12s ease-in-out infinite alternate-reverse; }
.hero.rolling .beam, .hero.top .beam { display: none; }           /* the clip has its own lights; the stage has its own too */
@keyframes sway { from { rotate: -15deg; } to { rotate: 13deg; } }
@keyframes drift { from { scale: 1; } to { scale: 1.1; } }
/* The hall's big screen, counting down: a lit panel over the drawn one, at the place week.json measures. */
.hero .led { position: absolute; display: grid; place-items: center; overflow: hidden; background: linear-gradient(180deg, #86d1f4, #74bdec); box-shadow: 0 0 2.2cqw rgba(150,215,255,.8); }
.hero .led b { font: 700 13px/1 ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: 3.9cqw; letter-spacing: .02em; color: #fff; text-shadow: 0 0 .8cqw #fff, 0 0 2cqw rgba(255,255,255,.9); font-variant-numeric: tabular-nums; }

.home.hackhome { min-height: 100vh; min-height: 100dvh; justify-content: space-between; align-items: stretch; text-align: left;
  padding: max(14px, env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) max(20px, env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px)); }
.hh-brand { display: flex; align-items: center; gap: 8px; font-size: 15px; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.hh-brand img { border-radius: 7px; box-shadow: 0 2px 8px rgba(0,0,0,.5); }
.hh-body .k { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: #8fd3f4; }
.home.hackhome h1 { font: 700 46px/1 Georgia, "Iowan Old Style", "Times New Roman", serif; letter-spacing: -.01em; margin: 6px 0 8px; text-shadow: 0 2px 14px rgba(0,0,0,.6); }
.home.hackhome .tagline { font-size: 18px; line-height: 1.35; color: #e9edf2; max-width: none; margin: 0; }
.home.hackhome .pips { margin: 14px 0 0; }
.home.hackhome .btn.play { margin-top: 18px; min-height: 56px; font-size: 18px; animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(143,211,244,.55); } 70%, 100% { box-shadow: 0 0 0 16px rgba(143,211,244,0); } }
.home.hackhome .btn.line { min-height: 42px; padding: 8px; font-size: 14px; background: rgba(14,17,22,.5); border-color: rgba(255,255,255,.26); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.home.hackhome .live { margin: 10px 0 0; max-width: none; text-align: center; }
.home.hackhome .foot { margin: 12px 0 0; text-align: center; color: #aeb6c0; }

.brief.hackbrief { padding: 0; }
.hb-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: max(14px, env(safe-area-inset-top, 0px)) 18px 0; text-shadow: 0 1px 6px rgba(0,0,0,.75); }
.hb-top .k { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: #fff; }
.hb-top .hud { font: 700 15px/1 ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; color: #8fd3f4; font-variant-numeric: tabular-nums; }
.hb-body { margin-top: auto; padding: 0 16px max(18px, env(safe-area-inset-bottom, 0px)); }
.hackbrief .a-speech { margin: 0; }
.hackbrief .a-speech .q { font-size: 19px; line-height: 1.36; }
.hackbrief .ln { animation: say .5s ease both; animation-delay: calc(.3s + var(--i) * 4.7s); }      /* the second line when he says it */
@keyframes say { from { opacity: 0; } to { opacity: 1; } }
.hackbrief .task { font-size: 16.5px; line-height: 1.42; color: #e6e0d6; margin: 14px 2px 0; }
.hackbrief .btn.play { margin-top: 14px; min-height: 54px; font-size: 17.5px; }
.hackbrief .tools.foot { margin-top: 12px; }

/* A meeting whose picture moves (week.json "video"): the clip lies on the still, cropped the same way. */
.a-scene .scene-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--fx, 50%) 42%; display: block; }

/* The weekend's seven slots as calendar cards (2026-11-11, Ari: "calendar card style so they fit better"): the day
   over the part of the day, in the day strip, on the start screen and on the weekend's end card. */
.week small, .pips small, .v-days small { display: block; font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; line-height: 1; margin-top: 3px; opacity: .78; }
.week.hack a, .week.hack b { font-size: 13px; letter-spacing: 0; white-space: normal; overflow: visible; line-height: 1.05; padding: 7px 0 5px; }
.week.hack span { font-size: 10px; margin-top: 3px; min-height: 10px; }
.pips.hack i { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 44px; padding: 0; font-size: 13px; line-height: 1.05; letter-spacing: 0; text-transform: none; }
.v-days i { align-content: center; line-height: 1.05; }
.v-days small { font-size: 9.5px; }
/* On the hall's picture the cards are dark glass, not paper. */
.home.hackhome .pips i { background: rgba(14,17,22,.62); color: #e9edf2; border: 1px solid rgba(255,255,255,.22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.home.hackhome .pips .g-top { background: var(--g); border-color: transparent; }
.home.hackhome .pips .g-mid { background: var(--y); border-color: transparent; }
.home.hackhome .pips .g-low { background: var(--r); border-color: transparent; }

/* The feedback sheet and the email question before week 1. Inputs stay at 16px: an iPhone zooms the page below that. */
.gate-line { font-size: 15px; color: #cfd4da; text-align: center; margin: 6px 0 0; line-height: 1.45; }
.fb label { display: block; font-size: 14px; color: #cfd4da; margin: 12px 0 0; }
.fb textarea { display: block; box-sizing: border-box; width: 100%; max-width: 100%; margin-top: 6px; padding: 10px 14px; font: inherit; font-size: 16px; color: #e6e0d6; background: #1b2027; border: 1px solid #4a525d; border-radius: 14px; resize: vertical; }
.fb textarea:focus { outline: none; border-color: #8b95a3; }
.fb-q { font-size: 14px; color: #cfd4da; margin: 16px 0 0; }
.fb-pay { display: flex; gap: 8px; margin-top: 8px; }
.fb-pay .btn.line { flex: 1 1 0; min-width: 0; margin-top: 0; padding-left: 6px; padding-right: 6px; }
.fb-pay .btn.line[aria-pressed="true"] { color: #14171c; background: #f1ece3; border-color: #f1ece3; font-weight: 700; }
.fb .btn.play { margin-top: 16px; }
.fb .btn.play:disabled { opacity: .6; }
.fb .mail-note { text-align: center; }
.fb-or { font-size: 13px; color: #8a919b; text-align: center; margin: 12px 0 0; overflow-wrap: anywhere; }
.fb-or a { color: #cfd4da; }
.fb-open { width: 100%; margin-top: 12px; }

/* The next-day notification's button on tomorrow's card (2026-11-12): hidden until the site says push works here. */
.push[hidden] { display: none; }
.tomorrow .push .mail-done { text-align: left; margin: 10px 0 0; font-size: 13.5px; }