/* calvin — the sign is the website */

.calvin-page {
  --paper: #e6e4dd;
  --ink: #121212;
  --muted: #5d5c57;
  --line: #c6c4bc;
  --soft: #d8d6ce;
  background: #cfcdc6;
  overflow: hidden;
  overscroll-behavior: none;
}

.scene { position: fixed; inset: 0; overflow: hidden; }

/* sf weather, top left. quiet until you look at it */
.weather {
  position: fixed;
  z-index: 40;
  top: 16px; left: 16px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  color: #111;
  text-decoration: none;
  opacity: .38;
  transition: opacity .2s ease;
}
.weather b { font-weight: 700; }
.weather .more { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width .3s ease, opacity .2s ease; }
.weather:hover { opacity: .9; }
.weather:hover .more { max-width: 140px; opacity: 1; }
.weather .sky, .weather .more { color: #333; }

/* 1. san francisco, out of focus behind him */
.backdrop {
  position: absolute;
  inset: -20px;
  background: url('/assets/img/sf-backdrop.jpg') center 65% / cover no-repeat;
  filter: blur(5px) saturate(.55) brightness(1.04);
}
.backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(232, 229, 222, .38);
}

/* 2. calvin, peeking out below the sign. a stack of turned views + visor overlays */
.head {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: var(--head-t);
  width: var(--head-w);
  aspect-ratio: 929 / 925;
  transform: translateX(-50%);
  transform-origin: 50% 78%; /* the neck */
  will-change: transform;
  filter: drop-shadow(0 -6px 18px rgba(0,0,0,.18));
  user-select: none;
  pointer-events: none;
}
.hf { position: absolute; inset: 0; opacity: 0; }
.hf img { width: 100%; height: 100%; }
.visor {
  position: absolute;
  inset: 0;
  -webkit-mask: var(--m) center / 100% 100% no-repeat;
  mask: var(--m) center / 100% 100% no-repeat;
  background: transparent;
}
/* e-ink refresh reaches his eyes too */
.head[data-phase="black"] .visor { background: #050505; }
.head[data-phase="invert"] .visor { background: repeating-linear-gradient(0deg, #e9e7e0 0 2px, #6b6a66 2px 4px); }
.head[data-phase="white"] .visor { background: #eeede8; }
.head[data-phase="settle"] .visor { background: rgba(238,237,232,.18); transition: background .9s cubic-bezier(.2,.7,.3,1); }
.head[data-phase=""] .visor { background: rgba(238,237,232,0); transition: background .9s cubic-bezier(.2,.7,.3,1); }

/* psst: a speech bubble just right of his face. the whole bubble is the link */
.psst {
  position: absolute;
  z-index: 6;
  left: var(--psst-x);
  top: var(--psst-y);
  max-width: min(250px, var(--psst-max));
  transform: translateY(-50%) scale(.6);
  transform-origin: 0 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .35s cubic-bezier(.3,1.5,.5,1);
}
.psst.on { opacity: 1; transform: translateY(-50%) scale(1); pointer-events: auto; }
.psst.nudge .psst-link { animation: nudge .7s ease-in-out 1; }
@keyframes nudge { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-3deg); } 50% { transform: rotate(2.5deg); } 75% { transform: rotate(-1deg); } }
.psst-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 9px 9px 13px;
  border-radius: 16px 16px 16px 4px;
  background: #fbfaf6;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.06);
  transform-origin: 0 100%;
  transition: transform .15s ease, box-shadow .15s ease;
}
.psst-go {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--ink);
  transition: transform .15s ease;
}
.psst-go svg { width: 13px; height: 13px; fill: #fbfaf6; }
.psst-link:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.26), 0 0 0 1px rgba(0,0,0,.08); }
.psst-link:hover .psst-go { transform: translateX(2px); }
.psst-x {
  position: absolute;
  top: -7px; right: -7px;
  width: 20px; height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fbfaf6;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
  color: #777;
  font-size: 13px;
  line-height: 20px;
  opacity: 0;
  transition: opacity .15s ease;
}
.psst:hover .psst-x, .psst-x:focus-visible { opacity: 1; }
.psst-x:hover { color: var(--ink); }

/* 3. the cardboard */
.sign {
  position: absolute;
  z-index: 2;
  left: var(--sign-l);
  top: var(--sign-t);
  width: var(--sign-w);
  height: var(--sign-h);
  background: url('/assets/img/cardboard.webp') center / 100% 100% no-repeat;
  filter: drop-shadow(0 22px 26px rgba(0,0,0,.32)) drop-shadow(0 2px 3px rgba(0,0,0,.2));
}

/* 4. the e-ink panel taped into it */
.bezel {
  position: absolute;
  inset: 5.5% 4.6% 6.5%;
  border-radius: 4px;
  /* no plastic frame: the panel is set straight into the cardboard */
  box-shadow: 0 1px 0 rgba(255,255,255,.3), 0 3px 8px rgba(60,40,20,.35), 0 0 0 1px rgba(60,40,20,.25);
}
.bezel::before, .bezel::after {
  /* strips of tape holding the panel on */
  content: "";
  position: absolute;
  top: -14px;
  width: 92px;
  height: 30px;
  background: rgba(226, 216, 188, .82);
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
  mix-blend-mode: multiply;
}
.bezel::before { left: 7%; transform: rotate(-4deg); }
.bezel::after { right: 7%; transform: rotate(3deg); }

.screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 4px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), inset 0 2px 10px rgba(0,0,0,.1);
  color: var(--ink);
}

/* 5. the arms, in front, fingers over the edge */
.arm {
  position: absolute;
  z-index: 3;
  top: var(--arm-y);
  height: auto;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.28));
}
.arm-left { left: var(--arm-l-x); width: calc(400px * var(--arm-s)); }
.arm-right { left: var(--arm-r-x); width: calc(400px * var(--arm-s)); }

/* ---------------------------------------------------------------
   e-ink refresh
   --------------------------------------------------------------- */
.ink, .ghost {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: #9c9a93 transparent;
}
.ghost { overflow: hidden; pointer-events: none; opacity: 0; filter: blur(.4px); }
.ghost.show { opacity: .13; }
.ghost.fade { opacity: 0; transition: opacity 1.1s cubic-bezier(.2,.7,.3,1); }

.flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.screen[data-phase="black"] .flash { background: #0d0d0d; opacity: 1; }
.screen[data-phase="white"] .flash { background: #f4f3ee; opacity: 1; }
.screen[data-phase="invert"] .ink { filter: invert(1) contrast(1.3); }
.screen[data-phase="invert"] .ghost { opacity: 0; }

@keyframes partial {
  0% { filter: none; }
  20% { filter: invert(1); }
  45% { filter: invert(1) contrast(2); }
  60% { filter: brightness(1.8); }
  100% { filter: none; }
}
.partial { animation: partial .34s steps(1, end); }

/* ---------------------------------------------------------------
   screen chrome
   --------------------------------------------------------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--paper);
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 52px;
  padding: 0 clamp(14px, 2.4vw, 30px);
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.topbar a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 0 12px;
  text-decoration: none;
  color: var(--muted);
  font-weight: 700;
}
.topbar a.on, .topbar a:hover { color: var(--ink); }
.topbar a.on:not(.home)::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: -1px;
  height: 3px;
  border-radius: 2px;
  background: var(--ink);
}
.topbar .home { padding-left: 0; }
.topbar .home img { height: 17px; width: auto; }
.topbar .spacer { flex: 1; }

.page {
  flex: 1 0 auto;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(16px, 3vh, 34px) clamp(16px, 3.4vw, 44px) calc(24px + var(--hand-clear) * .35);
}



/* ---------------------------------------------------------------
   the post
   --------------------------------------------------------------- */
.post-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}
/* "← post" takes no space of its own: beside the header, or a thin line above it */
.backrow {
  position: absolute;
  left: 0; bottom: calc(100% + 3px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}
.backrow svg { width: 14px; height: 14px; fill: currentColor; }
.backrow:hover { color: var(--ink); }
.backrow.side { left: auto; bottom: auto; right: calc(100% + 22px); top: 50%; transform: translateY(-50%); font-size: 15px; }
.backrow.side svg { width: 18px; height: 18px; }
.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.who { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; font-family: var(--x); line-height: 1.25; }
.who a { text-decoration: none; }
.who a:hover { text-decoration: underline; }
.name { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; font-size: 16px; }
.handle { color: var(--muted); font-size: 15px; }
.avatar-link { flex: 0 0 auto; border-radius: 50%; }
.follow {
  margin-left: auto;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font: 700 14px var(--x);
  text-decoration: none;
}
.follow + .x-mark { margin-left: 14px; }
.verified { width: 19px; height: 19px; fill: #2f7fc0; }
.x-mark { margin-left: auto; align-self: center; display: inline-flex; }
.x-mark svg { width: 26px; height: 26px; fill: var(--ink); }
.post-head.compact .avatar { width: 40px; height: 40px; }
.post-head.compact .x-mark svg { width: 22px; height: 22px; }

.post-text {
  margin: 14px 0 0;
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.35;
}
.post-text.hero {
  margin: clamp(12px, 2vh, 22px) 0 clamp(18px, 3vh, 30px);
  font-size: clamp(30px, min(4.4vw, 6.4vh), 64px);
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -.01em;
}
.post-text.lead {
  margin: 10px 0 12px;
  font-size: clamp(24px, min(2.5vw, 3.7vh), 34px);
  line-height: 1.28;
  font-weight: 400;
}
.post-text.hero.small { font-size: clamp(26px, min(3.2vw, 5vh), 46px); }
.aside { margin: 8px 0 0; color: var(--muted); font-size: 15px; }

.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: clamp(14px, 2.4vh, 22px);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font-family: var(--x);
  font-size: 15px;
  color: var(--muted);
}
.post-meta b { color: var(--ink); }
.post-stats {
  display: flex;
  justify-content: space-between;
  padding: 12px 4px 0;
  font-family: var(--x);
  font-size: 13px;
  color: var(--muted);
}
.post-stats span { display: inline-flex; align-items: center; gap: 6px; }
.post-stats svg { width: 19px; height: 19px; fill: currentColor; }

/* the three choices, as an x poll: pill buttons you can't miss */
.page-home { padding-top: clamp(12px, 2vh, 24px); }
.page-home .post { max-width: 720px; margin: 0 auto; }
.page-home .post-meta { margin-top: 12px; padding-bottom: 10px; }
.page-home .post-stats { padding-top: 10px; }
.poll { display: grid; gap: 8px; }
.opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: clamp(44px, 6vh, 54px);
  padding: 8px 56px 8px 22px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  text-decoration: none;
  font-size: clamp(16px, min(1.6vw, 2.5vh), 19px);
  line-height: 1.2;
  transition: background .08s ease, color .08s ease;
}
.opt b {
  flex: 0 0 auto;
  font-size: clamp(19px, min(1.9vw, 2.9vh), 23px);
  font-weight: 700;
  letter-spacing: -.01em;
}
.opt span { font-weight: 400; color: #3b3b38; }
.opt .go {
  position: absolute;
  right: 18px; top: 50%;
  transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 6px;
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
}
.opt .go svg { width: 22px; height: 22px; fill: currentColor; }
.opt:hover { background: var(--ink); color: var(--paper); }
.opt:hover span { color: #d9d7cf; }
.opt:active { transform: translateY(1px); }
.poll-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  margin-top: 10px;
  font-family: var(--x);
  font-size: 14px;
  color: var(--muted);
}
.poll-meta .live { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 700; }

.powers { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.powers li { padding: 10px 12px; border: 1.5px solid var(--ink); border-radius: 12px; }
.powers b { display: block; font-size: 17px; }
.powers span { font-size: 13px; color: var(--muted); }

.live i, .live-badge i, .stop.current .when i {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  animation: blink 1.6s steps(1, end) infinite;
}
@keyframes blink { 50% { opacity: .15; } }

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1.5px solid var(--ink);
  background: transparent;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  white-space: nowrap;
}
.pill.solid { background: var(--ink); color: var(--paper); }
.pill:disabled { opacity: .5; cursor: default; }
.row-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* ---------------------------------------------------------------
   watch
   --------------------------------------------------------------- */
@font-face { font-family: pricedown; src: url('/assets/fonts/pricedown.woff2') format('woff2'); font-display: swap; }

/* watch: two previews; hover darkens them and offers the stream */
.previews {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  width: 100%;
  margin-top: 14px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
}
.pv { position: relative; display: block; width: 100%; height: clamp(150px, calc(var(--sign-h) - 380px), 380px); border-radius: 14px; overflow: hidden; background: #222; }
.pv img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08) brightness(1.02); transition: filter .25s ease; }
.pv em, .lb-feed em {
  position: absolute;
  left: 10px; bottom: 10px;
  padding: 3px 9px;
  border-radius: 6px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font: normal 12px var(--x);
}
.pv-cta {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity .2s ease;
}
.pv-cta .pill { gap: 8px; min-height: 48px; padding: 0 24px; font-size: 16px; background: var(--paper); color: var(--ink); border-color: var(--paper); box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.pv-cta svg { width: 20px; height: 20px; fill: currentColor; }
.previews:hover .pv img, .previews:focus-visible .pv img { filter: grayscale(1) contrast(1.08) brightness(.42); }
.previews:hover .pv-cta, .previews:focus-visible .pv-cta { opacity: 1; }
@media (hover: none) { .pv-cta { opacity: 1; } .pv img { filter: grayscale(1) contrast(1.08) brightness(.6); } }
.live-badge {
  position: absolute;
  top: 10px; left: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
}
.feed-bar {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  font-size: 14px;
  color: var(--muted);
}
.feed-bar b { color: var(--ink); }

/* the stream lightbox: both feeds, full frame, plus the tweet */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(12,12,12,.82);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .2s ease;
  overflow-y: auto;
}
.lightbox.on { opacity: 1; }
.lb-inner {
  width: min(1560px, 100%, calc((100vh - 230px) * 3));
  color: #f1f0eb;
}
.lb-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.lb-head .live-badge { position: static; background: #f1f0eb; color: #111; }
.lb-meta { flex: 1; font-size: 14px; color: #b9b7af; }
.lb-meta b { color: #f1f0eb; }
.lb-close {
  width: 40px; height: 40px;
  border: 1.5px solid rgba(255,255,255,.4);
  border-radius: 50%;
  background: none;
  color: #fff;
  font-size: 24px;
  line-height: 1;
}
.lb-close:hover { background: rgba(255,255,255,.12); }
.lb-feeds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lb-feed { position: relative; margin: 0; aspect-ratio: 3 / 2; border-radius: 14px; overflow: hidden; background: #000; }
.lb-feed > img { width: 100%; height: 100%; object-fit: cover; }
.lb-feed em { top: 10px; bottom: auto; }
.lb-foot { display: flex; align-items: flex-end; gap: 16px; margin-top: 12px; }
.lb-foot .holding { flex: 1; margin: 0; border-color: rgba(255,255,255,.2); }
.lb-foot .holding .kicker { color: #b9b7af; }
.lb-foot .sign-tweet { background: #e9e7e0; border-color: transparent; }
.lb-foot .pill.solid { background: #f1f0eb; color: #111; border-color: #f1f0eb; }

/* gta-style stat, top right */
.gta-stat {
  position: absolute;
  top: 10px; right: 14px;
  display: flex; flex-direction: column; align-items: flex-end;
  font-family: pricedown, var(--brand);
  color: #fff;
  line-height: .9;
  text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 0 3px 6px rgba(0,0,0,.5);
  letter-spacing: .02em;
  pointer-events: none;
}
.gta-stat b { font-weight: 400; font-size: clamp(26px, 3vw, 42px); color: #9fd89a; }
.gta-stat span { font-size: clamp(16px, 1.6vw, 22px); }

.sign-tweet { color: #111; font-family: var(--x); }
.st-head { display: flex; align-items: center; gap: 14px; }
.st-avatar {
  display: grid; place-items: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: #111; color: #e9e7e0;
  font: 700 30px var(--brand);
}
.st-who { display: flex; flex-direction: column; line-height: 1.2; }
.st-who b { font-size: 28px; }
.st-who span { font-size: 24px; color: #555; }
.st-x { margin-left: auto; }
.st-x svg { width: 40px; height: 40px; fill: #111; }
.sign-tweet p { margin: 20px 0 0; font: 400 46px/1.18 var(--brand); }

.holding .sign-tweet { margin-top: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; }
.holding .st-avatar { width: 36px; height: 36px; font-size: 16px; }
.holding .st-who b { font-size: 15px; }
.holding .st-who span { font-size: 14px; }
.holding .st-x svg { width: 20px; height: 20px; }
.holding .sign-tweet p { margin-top: 8px; font-size: 18px; }

/* gta hud in the lightbox's third-person feed */
.mm-wrap { position: absolute; left: 14px; bottom: 14px; width: clamp(84px, 22%, 150px); }
.minimap {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #111;
  box-shadow: 0 0 0 2px rgba(255,255,255,.7), 0 4px 12px rgba(0,0,0,.4);
  background: #d9d7d0;
}
.minimap > div { position: absolute; inset: 0; filter: grayscale(1) contrast(1.1); }
.minimap .me {
  position: absolute; left: 50%; top: 50%;
  width: 0; height: 0;
  transform: translate(-50%, -60%);
  border-left: 7px solid transparent; border-right: 7px solid transparent;
  border-bottom: 16px solid #111;
  filter: drop-shadow(0 0 1px #fff);
}
.minimap .north {
  position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
  font: 700 11px var(--x); color: #111;
}
.mm-tip {
  position: absolute;
  left: 0; bottom: calc(100% + 10px);
  padding: 6px 10px;
  border-radius: 8px;
  background: #f1f0eb;
  border: 1.5px solid #111;
  color: #111;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease;
  pointer-events: none;
}
.mm-wrap:hover .mm-tip { opacity: 1; transform: none; pointer-events: auto; }
.stick {
  position: absolute;
  right: 16px; bottom: 16px;
  width: clamp(76px, 18%, 132px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(20,20,20,.35);
  border: 2px solid rgba(255,255,255,.75);
  backdrop-filter: blur(2px);
  touch-action: none;
  cursor: grab;
}
.stick .knob {
  position: absolute;
  left: 50%; top: 50%;
  width: 44%; height: 44%;
  margin: -22% 0 0 -22%;
  border-radius: 50%;
  background: #f1f0eb;
  box-shadow: 0 3px 8px rgba(0,0,0,.45);
  transition: transform .18s ease-out;
}
.stick:active .knob { transition: none; }
.stick-tip {
  position: absolute;
  right: 14px; bottom: calc(16px + clamp(76px, 18%, 132px) + 10px);
  padding: 6px 10px;
  border-radius: 8px;
  background: #f1f0eb;
  border: 1.5px solid #111;
  color: #111;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.stick-tip.show { opacity: 1; transform: none; pointer-events: auto; }

.holding { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; }
.holding .kicker { font-size: 13px; color: var(--muted); }

/* ---------------------------------------------------------------
   map
   --------------------------------------------------------------- */
.page-map { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; max-width: 1180px; padding-bottom: 18px; }
.page-map .post { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.page-map .post-text { margin-top: 8px; }
.map-card {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr minmax(220px, 280px);
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
.map { position: relative; height: 100%; background: #dcdad3; filter: grayscale(1) contrast(1.06); }
.map.offline::after { content: "map didn't load. i'm still out here though."; position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); }
.stops {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  border-left: 1px solid var(--line);
}
.stop {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.stop:hover, .stop.on { background: #dcdad2; }
.stop .when { display: inline-flex; align-items: center; gap: 6px; font-family: var(--x); font-size: 12px; color: var(--muted); }
.stop .place { font-weight: 700; font-size: 15px; }
.stop .note { font-size: 13px; color: var(--muted); line-height: 1.3; }
.stop.current .when { color: var(--ink); font-weight: 700; }

.pin { border: 0; padding: 0; cursor: pointer; }
.pin.past {
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #f3f2ee;
  border: 2px solid #111;
  font: 700 11px/1 var(--x);
  color: #111;
}
.pin.now {
  position: relative;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #111;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.pin.now img { width: 24px; height: 24px; }
.pin.now .ring {
  position: absolute; inset: -8px;
  border-radius: 50%;
  border: 2px solid #111;
  animation: blink 1.6s steps(1, end) infinite;
}
.ink-popup .maplibregl-popup-content {
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--paper);
  border: 1.5px solid #111;
  box-shadow: 0 3px 0 #111;
  font-family: var(--brand);
  color: #111;
  max-width: 220px;
}
.ink-popup b { display: block; font-size: 14px; }
.ink-popup span { font: 12px var(--x); color: var(--muted); }
.ink-popup p { margin: 4px 0 0; font-size: 13px; }
.ink-popup .maplibregl-popup-tip { display: none; }
.maplibregl-ctrl-attrib { font-family: var(--x); }

/* ---------------------------------------------------------------
   messages
   --------------------------------------------------------------- */
.page-messages { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; max-width: 1180px; padding-bottom: 14px; }
.page-messages .table-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; }
.page-messages > .post, .page-messages > .tabs { flex-shrink: 0; } /* only the table gives up space */
.tabs {
  display: flex;
  margin: 16px calc(-1 * clamp(16px, 3.4vw, 44px)) 0;
  padding: 0 clamp(16px, 3.4vw, 44px);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  position: relative;
  flex: 1 0 auto;
  padding: 14px 16px;
  border: 0;
  background: none;
  color: var(--muted);
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
}
.tabs button:hover { background: #dcdad2; }
.tabs button[aria-selected="true"] { color: var(--ink); }
.tabs button[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  width: 56px; height: 4px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: var(--ink);
}
.table-wrap { overflow-x: auto; overscroll-behavior: contain; }
.board { width: 100%; border-collapse: collapse; font-size: 14px; }
.board th {
  position: sticky; top: 0;
  padding: 12px 10px;
  background: var(--paper);
  text-align: left;
  font-size: 12px;
  color: var(--muted);
  font-weight: 400;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.board td { padding: 14px 10px; border-bottom: 1px solid var(--soft); vertical-align: top; }
.board .user { font-family: var(--x); font-weight: 700; white-space: nowrap; }
.board .msg { min-width: 200px; font-size: 15px; line-height: 1.35; }
.board .when, .board .held, .board .likes { font-family: var(--x); white-space: nowrap; color: var(--muted); }
.board .where { min-width: 110px; color: var(--muted); }
.board .held { color: var(--ink); font-variant-numeric: tabular-nums; }
.board .likes { display: flex; align-items: center; gap: 5px; }
.board .likes svg { width: 15px; height: 15px; fill: currentColor; }

/* ---------------------------------------------------------------
   forms: an x reply composer
   --------------------------------------------------------------- */
.page-form { max-width: 760px; }
.composer { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.replying { font-family: var(--x); font-size: 14px; color: var(--muted); margin-bottom: 8px; }
.replying a { color: #2f7fc0; text-decoration: none; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.field { display: block; grid-column: 1 / -1; min-width: 0; }
.field.half { grid-column: span 1; }

/* psa: paste a tweet, or write one */
.seg { display: inline-flex; gap: 4px; padding: 3px; margin-bottom: 8px; border: 1.5px solid #a9a79f; border-radius: 999px; }
.seg button { padding: 6px 14px; border: 0; border-radius: 999px; background: none; color: var(--muted); font-size: 14px; font-weight: 700; }
.seg button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.psa .psa-write { position: relative; }
.psa .count { position: absolute; right: 10px; bottom: 8px; font: 12px var(--x); color: var(--muted); }
.psa[data-mode="tweet"] .psa-write, .psa[data-mode="write"] .psa-tweet { display: none; }
.psa .hint { margin: 6px 0 0; }
.field span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.field .hint { display: block; margin: -2px 0 6px; font-size: 12px; font-style: normal; color: var(--muted); opacity: .8; }
.field input, .field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid #a9a79f;
  border-radius: 8px;
  background: #efede7;
  font-size: 17px;
  outline: none;
  resize: vertical;
}
.field input:focus, .field textarea:focus { border-color: var(--ink); }
.trap { position: absolute; left: -9999px; }
.turnstile { display: flex; justify-content: flex-end; } /* empty until cloudflare needs a click */
.composer-foot { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 16px; }
.error { color: var(--ink); font-size: 14px; }
.error:not(:empty)::before { content: "⚠ "; }

/* ---------------------------------------------------------------
   compact screens
   --------------------------------------------------------------- */
@media (max-width: 900px) {
  .map-card { grid-template-columns: 1fr; grid-template-rows: 3fr 2fr; }
  .map { height: auto; }
  .stops { border-left: 0; border-top: 1px solid var(--line); min-height: 0; }
}

@media (max-width: 719px) {
  .weather { top: 13px; left: 12px; font-size: 12px; }
  .bezel { inset: 16px 14px 18px; }
  .bezel::before, .bezel::after { width: 64px; height: 22px; top: -11px; }
  .topbar { height: 46px; font-size: 14px; }
  .topbar a { padding: 0 8px; }
  .post-text.lead { font-size: 23px; margin: 8px 0 10px; }
  .poll { gap: 7px; }
  .opt { flex-direction: column; align-items: flex-start; gap: 4px; min-height: 0; padding: 9px 14px; border-radius: 18px; font-size: 15px; }
  .opt b { font-size: 18px; }
  .opt span { font-size: 14px; }
  .opt .go:not(.live) { display: none; }
  .opt .go.live { right: 12px; top: 14px; transform: none; font-size: 12px; }
  .wide-only { display: none; }
  .follow { display: none; }
  .powers { grid-template-columns: 1fr; }
  .field.half { grid-column: 1 / -1; }
  .page-map, .page-messages { padding-bottom: 10px; }
  .psst-link { padding: 7px 7px 7px 11px; gap: 6px; border-radius: 14px 14px 14px 4px; font-size: 12.5px; }
  .psst-go { width: 20px; height: 20px; }
  .psst-x { display: none; }
  .post-stats { font-size: 12px; }
  .previews { grid-template-columns: 1fr; }
  .pv { height: auto; aspect-ratio: 3 / 2; }
  .feed-bar { flex-direction: column; gap: 2px; }
  .lightbox { place-items: start center; }
  .lb-feeds { grid-template-columns: 1fr; }
  .lb-meta { font-size: 12px; }
  .lb-foot { flex-direction: column; align-items: stretch; }
  .board .msg { min-width: 220px; }
}

@media (prefers-reduced-motion: reduce) {
  .live i, .live-badge i, .pin.now .ring, .stop.current .when i { animation: none; }
  .ghost.fade { transition: none; }
}

@media (max-height: 820px) and (min-width: 720px) {
  .page-home .poll-meta { display: none; }
  .page-home .post-meta { margin-top: 10px; }
}