/* ============================================================
   KELHEM - MOBILE LAYOUT  (loaded with media="(max-width: 820px)")
   The media condition lives on the <link>, so nothing in this file
   can leak into the desktop cascade, and desktop rules stay clean of
   phone exceptions. Split of responsibilities:
     this file      - layout and sizing on small screens
     js/mobile.js   - touch behaviour (what plays when, no pointer)
     css/style.css  - the .is-hot twins of :hover, kept next to the
                      originals so the two states cannot drift apart
   The one rule of the cover: a feed of showpieces, not a corridor of
   text. Media stays big, copy gets clamped, padding gets tight.
   ============================================================ */

/* ---------- vertical rhythm ---------- */
.section { padding: 56px 0; }
.sec-head { margin-bottom: 30px; }

/* ---------- hero ---------- */
.hero { padding: 96px var(--gut) 130px; }
.hero__eyebrow { margin-bottom: 18px; }
.hero__lead { font-size: 15px; margin-bottom: 30px; }

/* ---------- cover cards ----------
   Stacked already (style.css breaks the grid at 820); here they are
   tightened into feed cards: 16/9 media on top, clamped copy below.
   The role line is the full pitch on desktop; on a phone three lines
   are the teaser and the project page carries the rest. */
.index { gap: 30px; }
.entry { padding: 12px 12px 16px; gap: 14px; border-radius: 16px; }
.entry__media { aspect-ratio: 16 / 9; }
.entry__info { padding: 2px 6px 0; }
.entry__index { font-size: 3rem; }
.entry__cat { margin-bottom: 8px; }
.entry__title { font-size: 1.45rem; margin-bottom: 8px; }
.entry__role {
  font-size: 14px; margin-bottom: 14px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.entry__tags { margin-bottom: 14px; }

/* ---------- cover fx, resized for a stacked card ----------
   The ornaments were measured against the wide desktop row; on a
   phone card the same pixel sizes read as a monster. Only sizes and
   anchors change here; the machinery is untouched. */
.fx-theo .fxt { width: 170px; }               /* the bear pop-up */
.fx-theo .plc { --cat-w: 120px; }             /* the washing cat */
/* The vine is a TOP-LEFT corner piece: a strand along the card's top
   edge, a curl on the corner, a dangle down the left side. Its frame
   was measured against the desktop card and anchored to the bottom,
   which is fine there because the embedded card and the real card are
   the same height. The stacked phone card is three times taller, so
   bottom-anchoring dragged the whole top-edge garland into the middle
   of the copy. Anchor to the TOP instead: the embedded card's top
   edge sits 32.83% of the frame's own height from its top, so lifting
   the frame by exactly that puts the garland on the real top edge and
   the curl on the real corner. */
.fx-levelart .fxv {
  top: 0; bottom: auto;
  transform: translateY(-32.83%);
}
/* The sakura keeps its desktop home, the bottom-right corner, but is
   pushed hard off the right edge: the trunk rises at the edge of the
   SCREEN and only the left half of the canopy leans back over the
   card. Oleh's call: partially off-screen is fine, on the copy is not. */
.fx-levelart .fxs { --sakura-w: 340px; --sakura-push: 72%; }
/* The headset slot's top offset is inline (set in js, measured for
   the desktop card height), hence the important: on a phone card
   -148px floats it into the previous card. */
.entry__fxf .fxr__slot { top: -44px !important; }
/* Stylised renders: the cut-outs were placed against the wide desktop
   row, where mid-card is beside the text. On the stacked card mid-card
   IS the text, so they scattered over the copy. Line them up along the
   card's bottom edge instead, cats grown into the lead prop. Slot
   geometry is inline (set in js), hence the importants; DOM order is
   cats, mushrooms, cookie. */
.entry__fx.fx-renders .fxr__slot:nth-child(1) { left: 56% !important; top: 85% !important; width: 48% !important; }
.entry__fx.fx-renders .fxr__slot:nth-child(2) { left: 72% !important; top: 66% !important; width: 34% !important; }
.entry__fx.fx-renders .fxr__slot:nth-child(3) { left: 40% !important; top: 88% !important; width: 14% !important; }

/* ---------- about ---------- */
.about__text p { font-size: 14.5px; }
.xp__list { gap: 20px; }
.skills { gap: 18px; margin-top: 30px; padding-top: 24px; }
.toolset__grid { grid-template-columns: repeat(5, 1fr); gap: 14px 6px; }
.toolset__grid img { width: 40px; height: 40px; }

/* ---------- contact ---------- */
.contact__links { gap: 6px; }
.contact__links a { padding: 8px 14px; font-size: 12.5px; }

/* ============================================================
   PROJECT PAGE
   The detail page is allowed to run long, it is the deep dive. It
   still gets the small-screen fit: grids to two columns, pills that
   swipe, media edge to edge.
   ============================================================ */
.project-hero { padding: 96px 0 36px; }
.project-hero__title { margin: 16px 0; }
.project-body { padding: 36px 0; }
.project-body__media { margin-bottom: 28px; border-radius: 12px; }
.project-body__media.has-modular-inspector {
  width: 100vw; margin-left: calc(50% - 50vw); border-radius: 0;
}
.mi { border-radius: 0; border-inline: 0; }
.mi-game { margin-top: 16px; border-radius: 0; border-inline: 0; }
.mi-game__head { min-height: 68px; padding: 14px; }
.mi-game__head > span { display: none; }
.mi-game__launch { min-height: 0; padding: 14px; grid-template-columns: 1fr; gap: 22px; }
.mi-game__art { min-height: 260px; }
.mi-game__intro { padding: 4px 2px 8px; }
.mi-game__intro h3 { max-width: 16ch; font-size: 29px; }
.mi-game__facts { margin: 20px 0; }
.mi-game__facts span { padding: 9px 7px; font-size: 7px; }
.mi-game__toolbar { align-items: flex-start; padding: 10px; }
.mi-game__state { padding-top: 8px; }
.mi-game__state span { max-width: 32vw; }
.mi-game__fullscreen { display: none; }
.mi-game__frame { min-height: 0; aspect-ratio: 16 / 10; }
.mi.is-library { grid-template-columns: 1fr; }
.mi__topbar {
  grid-template-columns: 1fr auto; gap: 8px; min-height: 0; padding: 9px 10px;
}
.mi__asset-catalog { grid-template-columns: 1fr; padding: 8px; gap: 6px; }
.mi__asset-catalog-head { padding: 7px 9px; }
.mi__asset-catalog-head strong { font-size: 8px; }
.mi__asset-catalog-list { padding-bottom: 2px; }
.mi__asset-card { flex-basis: 184px; height: 58px; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 8px; }
.mi__asset-card img { width: 64px; height: 46px; }
.mi__asset-card strong { font-size: 9px; }
.mi__asset-nav { inset-inline: 8px; }
.mi__asset-nav a, .mi__asset-nav button { width: 34px; height: 48px; font-size: 25px; }
.mi__brand span, .mi__brand small { display: none; }
.mi__modes { grid-column: 1 / -1; grid-row: 2; overflow-x: auto; justify-content: center; }
.mi__modes button { white-space: nowrap; padding: 7px 10px; }
.mi__looks { grid-column: 2; grid-row: 1; }
.mi__looks button { font-size: 8px; padding: 6px; }
.mi__look-trigger { min-width: 112px; }
.mi__look-menu { width: 190px; }
.mi__viewport { height: 70vh; min-height: 500px; max-height: 690px; }
.mi__worldcard { width: 156px; padding: 11px; }
.mi__worldcard-name { font-size: 12px; }
.mi__worldcard-stats { gap: 5px; margin-top: 8px; }
.mi__worldcard-stats small { font-size: 6px; }
.mi__worldcard-stats b { font-size: 9px; }
.mi__worldcard-lod { font-size: 7px; }
.mi__lodcard { width: 154px; padding: 9px 10px 8px; }
.mi__lodcard > strong { font-size: 10px; }
.mi__lodcard-stats { gap: 4px; }
.mi__lodcard b { font-size: 8px; }
.mi__textures-open { left: 10px; top: 10px; min-width: 174px; padding: 9px 10px; }
.mi__textures-open strong { font-size: 8px; }
.mi__texture-browser { padding: 8px; }
.mi__texture-panel { width: 100%; max-height: calc(100% - 4px); }
.mi__texture-panel > header { padding: 13px 14px 11px; }
.mi__texture-panel h2 { font-size: 15px; }
.mi__texture-tabs button { font-size: 7px; }
.mi__texture-stage { grid-template-columns: 1fr; overflow-y: auto; }
.mi__texture-stage figure { min-height: 250px; padding: 10px; overflow: visible; }
.mi__texture-stage img { max-height: 340px; }
.mi__texture-stage > aside { overflow: visible; padding: 15px 13px; border-left: 0; border-top: 1px solid rgba(255,255,255,.075); }
.mi__texture-description { font-size: 9px; margin-bottom: 12px; }
.mi__texture-channels { grid-template-columns: 1fr 1fr; }
.mi__texture-channels button { grid-template-columns: 28px 1fr; gap: 7px; padding: 7px; }
.mi__texture-channels button > b { width: 28px; height: 27px; }
.mi__texture-channels span { font-size: 8px; }
.mi__help { display: none; }
.mi__rail {
  grid-row: 4; height: 215px; border-left: 0;
  border-top: 1px solid rgba(77,211,231,.16);
}
.mi__rail-head { height: 54px; }
.mi__rail-list {
  height: 161px; display: flex; overflow-x: auto; overflow-y: hidden;
}
.mi__rail-list button { flex: 0 0 190px; border-right: 1px solid rgba(255,255,255,.055); }
.mi__footer {
  grid-row: 5; grid-template-columns: repeat(4, 1fr);
  gap: 8px; min-height: 64px; padding: 10px;
}
.mi__footer strong { font-size: 11px; }
.mi__footer small { font-size: 6px; }
.mi__status { display: none; }
.tt__panel { width: min(284px, calc(100vw - 34px)); }
.tt.is-open .tt__handle { transform: translateX(calc(-1 * min(294px, calc(100vw - 24px)))); }
.fxm__live { top: 14px; left: 15px; }
.fxm__systems { top: 40px; right: 15px; }
.fxm__metrics { left: 14px; right: 14px; bottom: 13px; }
.fxm__metrics span { padding: 7px 8px; }
.fxm__metrics small { font-size: 5px; }
.fxm__metrics b { font-size: 8px; }

.case { margin-top: 34px; }
.case__block { margin-top: 34px; }
.case__lead { font-size: 1rem; margin-top: 24px; }
.fact { padding: 14px; }
.case__stats { gap: 12px; }
.stat__n { font-size: 1.35rem; }

/* tab pills: one swipeable row instead of a wrapping pile */
.case__tabs {
  display: flex; max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.case__tabs::-webkit-scrollbar { display: none; }
.case__tab { white-space: nowrap; padding: 8px 16px; }

/* systems read better as two skinny columns than one long ladder;
   this outranks the desktop sheet's 1fr fallback by load order */
.case__sys { grid-template-columns: repeat(2, 1fr); gap: 18px 14px; }

.hl { padding: 18px 16px 20px; }
.hl__b { font-size: 13.5px; }

.techmark { padding: 8px 13px 8px 11px; font-size: 12.5px; }
.case__kw span { font-size: 11.5px; padding: 4px 10px; }

/* umbrella selector cards */
.projcard__body { padding: 14px 16px 16px; }
.projcard__t { font-size: 17px; }
.projcard__b { font-size: 13.5px; }

/* galleries and media rows */
.gallery__clip { width: min(200px, 56vw); }
.carousel__arrow { width: 38px; height: 38px; font-size: 20px; }
.thumbstrip__t { width: 86px; }

/* playable bar: note above button when the row cannot hold both */
.sp-play__bar { flex-wrap: wrap; }

.project-nav { padding: 26px 0; font-size: 13px; }