/* ============================================================
   THE PHONE — the site's own design for a phone
   ============================================================
   2026-10-06, user: "the design on the desktop is the current, and
   the mobile is a different one". They chose, from options: an
   APP-LIKE design, the stars on the NAME ONLY (no river, no mini
   galaxy), a BOTTOM TAB BAR, on every page.

   Linked by index.html, work.html, posts.html and activities.html,
   after their own sheets. Everything below keys on :root.is-phone,
   which mobile.js decides once at load — the same moment profile.js
   and work.js decide which markup to write — so markup and styles
   always agree. A desktop window narrowed later keeps the desktop
   design. (system.html never shows on a phone: mobile.js sends it to
   work.html before it paints.)

     THE TAB BAR  .m-tabs (mobile.js): Home · Projects · Posts ·
                  Activities, fixed at the bottom, glass. The top bar's
                  links are hidden; on the home page its section links
                  stay as a strip of chips at the top once the reader
                  is past the name (profile.js navCheck).
     HOME         the name in stars on the cover (galaxy.js PHONE: no
                  river), then the sheet, whole: About opens on a
                  profile header (.m-id) and a bio that reads more on a
                  tap, the numbers in one row, the contact rows; Career
                  as cards; Stack as rows of chips to swipe; Projects
                  as cards to swipe (.m-rail) and a button to them all.
     PROJECTS     work.html, plain: filter chips (.m-filter) and rows
                  that open in place (.m-item, a <details> each).
     POSTS        the mosaic in its narrow pattern, chips that swipe,
                  the story full screen; empty → a card.
     ACTIVITIES   the posts' header, chips that swipe, the timeline's
                  rows with a small picture beside the words.

   Sizes: 18px side gutters, 20px card radius, 44px touch targets. */

/* ── Not on a desktop ── */
.m-tabs, .m-id, .m-more, .m-rail { display: none; }

/* ============================================================
   THE HERO — these follow the window, as profile.js's placeLinks
   does (it moves the icons under the name by the same query):
   keep the query in step with mobile.js.
   ============================================================ */
@media (max-width: 767px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  .galaxy-name { --S: clamp(2.8rem, min(21vw, 12vh), 6rem); }
  .gname-quote { display: none; }
  .gname-below .gname-social {
    position: static;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 1.7rem;
    transform: none;
  }
  .gname-below .gname-icon { width: 46px; height: 46px; }
  .gname-below .gname-cv { width: auto; }
  .gname-meta { margin-top: 0.9rem; }
}
@media (hover: none) and (pointer: coarse) and (max-height: 500px) {
  .galaxy-name { --S: clamp(2.6rem, 15vh, 5rem); }
  .gname-role, .gname-meta, .gname-cue { display: none; }
  .gname-below .gname-social { margin-top: 1.2rem; }
}

/* THE HERO, PAINTED ONCE (2026-10-06, user: "the hero section is
   still lagging on the mobile, change the approach"). galaxy.js does
   not run on a phone; js/phone-hero.js paints the sky and the name's
   stars once, and everything that moves after that is opacity and
   transform below — the compositor's, no script. The name block is
   ABSOLUTE in the hero, so it scrolls with the page; the cue too. */
:root.is-phone .galaxy-name { position: absolute; --name-scroll: 0px; }
:root.is-phone .gname-cue { position: absolute; }

/* The sky: a canvas a little larger than the largest the window gets
   (100lvh: the toolbar coming and going never stretches it), drifting
   a few px back and forth — the floating sky. */
:root.is-phone-hero #heroCanvas {
  position: absolute;
  left: -14px;
  top: -14px;
  width: calc(100% + 28px);
  height: calc(100lvh + 28px);
  animation: mSkyDrift 38s ease-in-out infinite alternate;
}
@keyframes mSkyDrift {
  from { transform: translate3d(-6px, 4px, 0); }
  to   { transform: translate3d(6px, -5px, 0); }
}

/* The name: the still word, and two twinkle layers out of phase. The
   word comes in once, wiped from the left, the lines under it after. */
.m-name { position: absolute; pointer-events: none; }
.m-name--still { animation: mNameIn 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.m-name--a { animation: mNameIn 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) both, mTwinkle 2.7s ease-in-out 1.5s infinite alternate; }
.m-name--b { animation: mNameIn 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) both, mTwinkle 3.6s ease-in-out 2.4s infinite alternate-reverse; }
@keyframes mNameIn {
  from { clip-path: inset(0 100% 0 0); opacity: 0.2; }
  to   { clip-path: inset(0 0 0 0); opacity: 1; }
}
@keyframes mTwinkle {
  from { opacity: 1; }
  to   { opacity: 0.18; }
}
:root.is-phone-hero .gname-full,
:root.is-phone-hero .gname-hello,
:root.is-phone-hero .gname-below,
:root.is-phone-hero .gname-cue { animation: mFade 0.9s ease 0.7s both; }
@keyframes mFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  :root.is-phone-hero #heroCanvas,
  .m-name,
  :root.is-phone-hero .gname-full,
  :root.is-phone-hero .gname-hello,
  :root.is-phone-hero .gname-below,
  :root.is-phone-hero .gname-cue { animation: none; }
}

/* The block of name + lines sits a little higher than the desktop's
   52 %, so the cover reads as one composed screen above the tab bar.
   The stars are sampled from the name's box: they follow. */
:root.is-phone .gname-full,
:root.is-phone .gname-hello,
:root.is-phone .gname-below { top: 45%; }
:root.is-phone .gname-cue { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
/* The cover is the height of the screen WITH the browser's toolbar showing
   (svh), as it is on the first view: at 100vh (the height without it) the
   cue sat under the tab bar until the toolbar went away. */
:root.is-phone #hero { min-height: 100svh; }

/* ============================================================
   THE TAB BAR
   ============================================================ */
:root.is-phone .m-tabs {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  height: 64px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 22px;
  /* Nearly opaque, no backdrop blur: blurring a canvas that redraws
     every frame is one of the dearest things a phone can be asked. */
  background: #0D0F15;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 14px 34px rgba(0, 0, 0, 0.55);
  font-family: 'Space Grotesk', system-ui, sans-serif;
}
:root.is-phone .m-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  border-radius: 16px;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #8892A6;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s ease, background-color 0.2s ease;
}
:root.is-phone .m-tab svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
:root.is-phone .m-tab[aria-current="page"] { color: var(--accent); background: rgba(var(--accent-rgb), 0.11); }
:root.is-phone .m-tab:active { background: rgba(255, 255, 255, 0.07); }
:root.is-phone .m-tab:focus-visible { outline: 2px solid var(--accent-dim); outline-offset: -2px; }

/* The top bar: on the home page a strip of the four section chips
   (Posts and Activities are tabs); on the other pages nothing. */
:root.is-phone .site-nav {
  top: 10px;
  padding: 4px;
  max-width: calc(100vw - 24px);
  background: rgba(16, 18, 24, 0.95);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
:root.is-phone .site-nav-sep,
:root.is-phone .site-nav-links a:not([data-sec]),
:root.is-phone body.page .site-nav { display: none; }
:root.is-phone .site-nav-links { gap: 0; }
:root.is-phone .site-nav-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; font-size: 0.82rem; }   /* the 44px touch target */

/* ============================================================
   HOME — the sheet
   ============================================================ */
:root.is-phone .sheet {
  padding: 0 18px calc(104px + env(safe-area-inset-bottom, 0px));
  border-radius: 28px 28px 0 0;
}
:root.is-phone .sheet-edge { display: none; }
:root.is-phone .pf-sec { padding: 40px 0; }
:root.is-phone .pf-sec + .pf-sec { border-top: 1px solid rgba(255, 255, 255, 0.06); }

/* One heading style for every section: a kicker, a title. */
:root.is-phone .ab-label {
  margin: 0 0 6px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
:root.is-phone .ab-title {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: #FFFFFF;
}
:root.is-phone .pf-head { margin-bottom: 18px; }

/* ── About ── */
:root.is-phone .ab { padding-top: 52px; }
:root.is-phone .ab-strip,
:root.is-phone .ab-frame { display: none; }
:root.is-phone .m-id {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.03);
}
.m-id-pic {
  position: relative;
  flex: 0 0 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  border-radius: 50%;
  background: radial-gradient(120% 90% at 30% 20%, #1A2136 0%, #0A0D16 70%);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.07);
  overflow: hidden;
  font-family: 'Orbitron', var(--font-mono, monospace);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.85);
}
.m-id-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.m-id-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.m-id-name { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; color: #FFFFFF; }
.m-id-role { font-size: 0.84rem; color: #9AA3B8; }
.m-id-status { display: inline-flex; align-items: center; gap: 8px; margin-top: 3px; font-size: 0.78rem; color: var(--accent-pale); }
.m-id-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.8); }

:root.is-phone .ab-split { gap: 0; margin-top: 20px; }
:root.is-phone .ab-copy p { margin: 0 0 1em; font-size: 0.98rem; line-height: 1.7; }
:root.is-phone .ab-copy p:first-child { font-size: 1.04rem; }
:root.is-phone .ab-copy:not(.is-open) p:nth-of-type(n + 2) { display: none; }
:root.is-phone .m-more {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  margin: -0.4em 0 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
:root.is-phone .m-more::after { content: '↓'; margin-left: 8px; }
:root.is-phone .m-more[aria-expanded="true"]::after { content: '↑'; }
:root.is-phone .m-more:focus-visible { outline: 2px solid var(--accent-dim); outline-offset: 3px; border-radius: 4px; }

/* The four numbers in one row. */
:root.is-phone .ab-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: none;
  margin-top: 18px;
  border-radius: 18px;
  border-color: rgba(255, 255, 255, 0.08);
}
:root.is-phone .ab-stat { padding: 16px 4px 14px; border: 0; text-align: center; }
:root.is-phone .ab-stat + .ab-stat { border-left: 1px solid rgba(255, 255, 255, 0.08); }
:root.is-phone .ab-num { font-size: 1.65rem; text-shadow: 0 0 22px rgba(var(--accent-rgb), 0.3); }
:root.is-phone .ab-stat-label { margin-top: 7px; font-size: 0.6rem; letter-spacing: 0.1em; }
:root.is-phone .ab-contact { max-width: none; margin-top: 12px; border-radius: 18px; border-color: rgba(255, 255, 255, 0.08); }
:root.is-phone .ab-contact li + li { border-top-color: rgba(255, 255, 255, 0.07); }
:root.is-phone .ab-link { column-gap: 14px; padding: 15px 16px; }
:root.is-phone .ab-link-to { min-width: 0; font-size: 0.72rem; }

/* ── Career: one card per entry ── */
:root.is-phone .tl { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
:root.is-phone .tl::before,
:root.is-phone .tl-dot { display: none; }
:root.is-phone .tl-item {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.03);
}
:root.is-phone .tl-date {
  align-self: flex-start;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.10);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
}
:root.is-phone .tl-body { column-gap: 14px; align-items: center; }
:root.is-phone .tl-logo { width: 48px; height: 48px; border-radius: 14px; }
:root.is-phone .tl-logo img { padding: 11px; }
:root.is-phone .tl-logo[data-tile="light"] img { padding: 2px; }
:root.is-phone .tl-body h3 { font-size: 1.02rem; line-height: 1.3; }
:root.is-phone .tl-body p { margin-top: 4px; font-size: 0.84rem; line-height: 1.5; }

/* ── Stack: a row of chips per stage, swiped sideways ── */
:root.is-phone .pf-stack { display: flex; flex-direction: column; gap: 22px; }
:root.is-phone .pf-stack::before { display: none; }
:root.is-phone .pf-stage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  padding: 0;
}
:root.is-phone .pf-stage-node { position: static; width: 34px; height: 34px; background: transparent; }
:root.is-phone .pf-stage-node svg { width: 17px; height: 17px; }
:root.is-phone .pf-stage-title { margin: 0; font-size: 1.04rem; }
:root.is-phone .pf-stage::after {
  content: attr(data-count);
  grid-row: 1;
  grid-column: 3;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.7rem;
  color: #7C869A;
}
:root.is-phone .pf-chips {
  grid-column: 1 / -1;
  flex-wrap: nowrap;
  margin: 12px -18px 0;
  padding: 2px 18px 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding: 0 18px;
  scrollbar-width: none;
}
:root.is-phone .pf-chips::-webkit-scrollbar { display: none; }
:root.is-phone .pf-chips li { flex: 0 0 auto; padding: 9px 14px; border-radius: 12px; white-space: nowrap; scroll-snap-align: start; }

/* ── Projects: cards to swipe, then the way to all of them ── */
:root.is-phone .pf-build {
  min-height: 0;
  align-items: stretch;
  padding: 40px 0 8px;
  text-align: left;
}
:root.is-phone .profile-launch-lead { max-width: none; margin: 10px 0 0; font-size: 0.96rem; line-height: 1.6; color: #9AA3B8; }
:root.is-phone .m-rail {
  display: flex;
  gap: 12px;
  margin: 20px -18px 0;
  padding: 4px 18px 10px;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 18px;
  scrollbar-width: none;
}
:root.is-phone .m-rail::-webkit-scrollbar { display: none; }
:root.is-phone .m-rail > li { flex: 0 0 76%; max-width: 300px; scroll-snap-align: start; }
.m-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 200px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(var(--accent-rgb), 0.10), rgba(255, 255, 255, 0.025) 55%);
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.m-card:active { transform: scale(0.98); border-color: rgba(var(--accent-rgb), 0.4); }
.m-card:focus-visible { outline: 2px solid var(--accent-dim); outline-offset: 3px; }
.m-card-top { display: flex; align-items: flex-start; justify-content: space-between; }
.m-card-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 1.35rem;
}
.m-card-num { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 0.72rem; letter-spacing: 0.12em; color: var(--accent); }
.m-card-name {
  margin-top: 16px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #FFFFFF;
}
.m-card-line { margin-top: 4px; font-size: 0.86rem; line-height: 1.45; color: #9AA3B8; }
.m-card-tags,
.m-item-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.m-card-tags { margin-top: auto; padding-top: 14px; }
.m-card-tags li,
.m-item-tags li {
  padding: 4px 9px;
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  border-radius: 8px;
  background: rgba(var(--accent-rgb), 0.07);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.66rem;
  color: var(--accent-pale);
}
:root.is-phone .launch-mark { display: none; }
:root.is-phone .profile-launch { margin-top: 16px; }
:root.is-phone .orbit-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: 0 18px;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: 16px;
  background: rgba(var(--accent-rgb), 0.11);
}
:root.is-phone .orbit-btn:active { background: rgba(var(--accent-rgb), 0.2); }
:root.is-phone .orbit-label { padding: 0; font-size: 0.76rem; letter-spacing: 0.16em; white-space: nowrap; background: none; }
:root.is-phone .orbit-label .gname-arrow { margin-left: 10px; }

/* ============================================================
   THE OTHER PAGES — work, posts, activities
   ============================================================ */
:root.is-phone body.page { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
/* work.html is plain on a phone: no sky (galaxy.js stops at
   data-phone-plain), no sheet, no river — the plain pages' night. */
:root.is-phone[data-phone-plain] #hero,
:root.is-phone .work-sheet,
:root.is-phone .work-top,
:root.is-phone .work-foot { display: none; }

/* The header, the same on the three: kicker, a large title, a line. */
:root.is-phone .work,
:root.is-phone .posts { padding: 56px 18px 24px; }
:root.is-phone .work-head,
:root.is-phone .posts-head { display: block; margin-bottom: 20px; }
:root.is-phone .work-label {
  margin: 0 0 6px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
:root.is-phone .work-title,
:root.is-phone .posts-title { font-size: 2.4rem; font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; }
:root.is-phone .work-lead,
:root.is-phone .posts-lead { margin-top: 10px; font-size: 0.95rem; line-height: 1.6; }

/* ── Projects: the filter, then the rows ── */
.m-filter {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  gap: 8px;
  margin: 0 -18px 12px;
  padding: 10px 18px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  background: rgba(6, 8, 13, 0.96);
}
.m-filter::-webkit-scrollbar { display: none; }
.m-chip {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  font: 500 0.82rem 'Space Grotesk', system-ui, sans-serif;
  color: #9AA3B8;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.m-chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: #0A0D14; }
.m-chip:focus-visible { outline: 2px solid var(--accent-dim); outline-offset: 2px; }

:root.is-phone .work-list.m-list { display: flex; flex-direction: column; gap: 10px; }
.m-item {
  scroll-margin-top: 72px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.m-item[hidden] { display: none; }
.m-item:has(details[open]) { border-color: rgba(var(--accent-rgb), 0.3); background: rgba(var(--accent-rgb), 0.045); }
.m-item summary {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.m-item summary::-webkit-details-marker { display: none; }
.m-item summary:focus-visible { outline: 2px solid var(--accent-dim); outline-offset: -2px; border-radius: 18px; }
.m-item-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 1.3rem;
}
.m-item-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.m-item-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.94rem;
  font-weight: 500;
  color: #FFFFFF;
}
.m-item-line { font-size: 0.82rem; line-height: 1.4; color: #8892A6; }
.m-item-chev {
  justify-self: center;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid #7C869A;
  border-bottom: 1.5px solid #7C869A;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.m-item details[open] .m-item-chev { transform: translateY(2px) rotate(-135deg); border-color: var(--accent); }
.m-item-body { padding: 2px 16px 18px; }
.m-item-type {
  margin: 0;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.m-item-type span { margin-right: 10px; color: #7C869A; }
.m-item-desc { margin: 10px 0 0; font-size: 0.92rem; line-height: 1.65; color: #AEB6C6; }
.m-item-tags { margin-top: 14px; }
.m-item-links { display: flex; gap: 10px; margin: 16px 0 0; }
.m-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 13px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #C3CAD8;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.m-btn--main { border-color: rgba(var(--accent-rgb), 0.4); background: rgba(var(--accent-rgb), 0.14); color: var(--accent-pale); }
.m-btn:active { background: rgba(var(--accent-rgb), 0.24); }
.m-btn:focus-visible { outline: 2px solid var(--accent-dim); outline-offset: 2px; }

/* ── Posts: the mosaic (narrow pattern, js/posts.js) and the story
   full screen; here only the chips swipe and the story keeps clear of
   the tab bar. ── */
:root.is-phone .topics {
  flex-wrap: nowrap;
  margin: 18px -18px 0;
  padding: 0 18px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
:root.is-phone .topics::-webkit-scrollbar { display: none; }
:root.is-phone .topic { flex: 0 0 auto; min-height: 40px; background: rgba(255, 255, 255, 0.03); -webkit-tap-highlight-color: transparent; }
:root.is-phone .topic[aria-pressed="true"] { background: var(--accent); }
:root.is-phone .posts-head { margin-bottom: 22px; }
:root.is-phone .posts-stats { margin-top: 20px; }
:root.is-phone .stat { padding: 0 14px; }
:root.is-phone .stat:first-child { padding-left: 0; border-left: 0; }
:root.is-phone .stat dd { font-size: 1.9rem; }
:root.is-phone .chap { gap: 12px; margin-top: 28px; }
:root.is-phone .chap:first-child { margin-top: 0; }
:root.is-phone .chap-year { font-size: 1.6rem; }
:root.is-phone .tile { -webkit-tap-highlight-color: transparent; }
:root.is-phone .story-nav { padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
:root.is-phone .posts-foot { margin-top: 40px; }

/* ── Activities: the posts' header; the chips swipe; the rows keep
   their picture beside the words, small. ── */
:root.is-phone .acts { padding: 56px 18px 24px; }
:root.is-phone .acts-head { display: block; margin-bottom: 22px; }
:root.is-phone .acts-title { font-size: 2.4rem; font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; }
:root.is-phone .acts-lead { margin-top: 10px; font-size: 0.95rem; line-height: 1.6; }
:root.is-phone .acts-stats { margin-top: 20px; }
:root.is-phone .acts-stats .stat { padding: 0 14px; }
:root.is-phone .acts-stats .stat:first-child { padding-left: 0; border-left: 0; }
:root.is-phone .acts-stats dd { font-size: 1.9rem; }
:root.is-phone .acts-kinds {
  flex-wrap: nowrap;
  margin: 18px -18px 0;
  padding: 0 18px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
:root.is-phone .acts-kinds::-webkit-scrollbar { display: none; }
:root.is-phone .kind { flex: 0 0 auto; min-height: 40px; background: rgba(255, 255, 255, 0.03); -webkit-tap-highlight-color: transparent; }
:root.is-phone .kind[aria-pressed="true"] { background: var(--accent); }
:root.is-phone .acts-y span { font-size: 1.6rem; }
:root.is-phone .act { grid-template-columns: minmax(0, 1fr) 84px; padding: 20px 0 20px 30px; -webkit-tap-highlight-color: transparent; }
:root.is-phone .act-mark { top: 22px; }
:root.is-phone .act-title { font-size: 1.05rem; }
:root.is-phone .act-with { font-size: 0.82rem; }
:root.is-phone .act-brief { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.88rem; line-height: 1.6; }
:root.is-phone .act-go { margin-top: 0.7rem; }
:root.is-phone .act-pic { border-radius: 12px; }
:root.is-phone .act-count { right: 6px; bottom: 6px; padding: 2px 7px; font-size: 0.62rem; }
:root.is-phone .acts-also-list li { width: 100%; }

/* ── Empty states: a card ── */
:root.is-phone .posts-empty:not([hidden]),
:root.is-phone .acts-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  margin: 8px 0 0;
  padding: 22px 20px;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.025);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 0.98rem;
  letter-spacing: 0;
  line-height: 1.6;
  color: #9AA3B8;
}
:root.is-phone .posts-empty a,
:root.is-phone .acts-empty a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  border-radius: 13px;
  background: rgba(var(--accent-rgb), 0.12);
  font-weight: 500;
  text-decoration: none;
}

/* ============================================================
   A PHONE HELD SIDEWAYS — little height
   ============================================================ */
@media (max-height: 500px) {
  :root.is-phone .m-tabs {
    left: 50%;
    right: auto;
    width: min(440px, 72vw);
    height: 52px;
    padding: 4px;
    border-radius: 18px;
    transform: translateX(-50%);
  }
  :root.is-phone .m-tab { flex-direction: row; gap: 8px; border-radius: 14px; }
  :root.is-phone .m-tab svg { width: 18px; height: 18px; }
  :root.is-phone .gname-full,
  :root.is-phone .gname-hello,
  :root.is-phone .gname-below { top: 34%; }
  :root.is-phone .gname-below .gname-social { margin-top: 0.9rem; }
  :root.is-phone .gname-below .gname-icon { width: 40px; height: 40px; }
  :root.is-phone .gname-below .gname-cv { width: auto; }
  :root.is-phone .m-rail > li { flex-basis: 260px; }
}

@media (prefers-reduced-motion: reduce) {
  .m-tab, .m-card, .m-chip, .m-item, .m-item-chev { transition: none; }
  .m-card:active { transform: none; }
}