/* The night traverse: the phone's own version of the scrub theme.
 *
 * Loaded only under 820px (media-gated in layout.php), paired with the
 * night sky the world renders on mobile (world3d.js MOBILE stops). The
 * rules: smaller, sharper, blue, and NOTHING between the words and the
 * world. No card backgrounds, no borders, no panels: the deep blue sky is
 * the contrast layer, and the type sits straight on it. Square corners
 * everywhere. Desktop never loads this file. */

/* ---- square by default; the exceptions below are deliberate ---- */
.ovl-in, .j-card, .j-mecard, .j-tier, .j-offer, .j-slide-info, .j-gal-head,
.j-arr, .j-dot, .j-dot span, .theme-chip, .orb-card, .j-railstop,
.j-thumbstrip, .j-rail-line, .j-vtime, .j-vbtn, .j-loop, .j-orbs {
  border-radius: 0 !important;
}
/* the face is a circle again, and the frames that hold work get a soft edge */
.j-face img { border-radius: 50% !important; }
.j-media-main.chrome .j-mainslot { border-radius: 8px !important; overflow: clip; }
.j-media-main:not(.chrome) .j-mainslot img,
.j-media-main:not(.chrome) .j-mainslot video { border-radius: 7px !important; }
.j-thumb { border-radius: 5px !important; overflow: clip; }
.j-cta.solid { border-radius: 6px !important; }

/* ---- the global type step-down ---- */
.ovl h1 { font-size: clamp(25px, 7.2vw, 31px) !important; line-height: 1.14 !important; letter-spacing: -.01em; }
.ovl h2 { font-size: clamp(20px, 5.8vw, 25px) !important; line-height: 1.18 !important; }
.ovl h3 { font-size: 16px !important; }
.ovl .lede { font-size: 13.5px !important; line-height: 1.55 !important; }
.ovl p { font-size: 13.5px; }
.eyebrow { font-size: 10px !important; letter-spacing: .22em !important; }
.j-note, .j-cue-note, .j-face-say { font-size: 11px !important; }

/* ---- ivory on night: the sky is the panel ---- */
.ovl, .ovl h1, .ovl h2, .ovl h3, .ovl p, .ovl .lede, .j-gal-h, .j-gal-head .eyebrow,
.j-slide-info, .j-slide-info h3, .j-projmeta, .j-projsum, .j-projserv,
.j-comp-title, .j-comp-blurb, .j-mebody, .j-mestats, .j-loopword,
.j-card, .j-card *, .j-tier, .j-mecard, .j-mecard *, .j-offer, .j-offer * {
  color: #f2f6ff !important;
}
.ovl .lede, .j-projsum, .j-comp-blurb, .j-projserv, .j-face-say, .j-note,
.t-l, .t-inc, .j-cardline { color: #c3d4f2 !important; }
.ovl h1 em, .ovl h2 em { color: #e8926b !important; }
.j-projmeta, .eyebrow, .j-tier .t-k, .j-again { color: #86ace8 !important; }
.j-projlink, .j-tier .t-p, .j-tier .t-pn, .t-go { color: #e8926b !important; }
.j-tier .t-n, .j-card b, .j-cardtop, .j-projstats b, .j-projstats dt { color: #ffffff !important; }

/* a whisper of shadow so type holds its edge over the brighter cloud bands;
   legibility only, tight enough to disappear as an effect */
.ovl h1, .ovl h2, .ovl h3, .ovl p, .ovl .lede, .j-slide-info, .j-loopword, .j-tier, .j-card {
  text-shadow: 0 1px 3px rgba(3, 9, 24, .55);
}

/* ---- NOTHING between the words and the world ---- */
.ovl-in, .j-card, .j-mecard, .j-tier, .j-offer, .j-slide-info, .j-gal-head,
.ovl-ground .ovl-in, .ovl-gallery .ovl-in {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
.ovl-in { padding: 14px 18px 20px !important; }
.j-gal-head { padding: 0 4px 8px !important; display: block; }
.j-slide-info { padding: 12px 4px 0 !important; margin-top: 6px !important; flex: none; position: relative; z-index: 2; }
.j-card, .j-mecard, .j-tier, .j-offer { padding: 10px 0 !important; }
.j-tiers { gap: 14px !important; }
.t-l, .t-inc { font-size: 12px !important; line-height: 1.45 !important; }
.t-go { font-size: 12.5px !important; }

/* ---- the face: just the photograph, square, no frames ---- */
.j-face, .j-face-lede { background: none !important; box-shadow: none !important; padding: 0 !important; border: 0 !important; outline: 0 !important; }
.j-face img { width: 64px !important; height: 64px !important; border: 0 !important; box-shadow: none !important; outline: 0 !important; }

/* ---- buttons: solid stays solid; everything else is type ---- */
.j-cta, .j-ctas a, .j-projlink {
  font-size: 12.5px !important;
  min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 16px !important;
}
.j-cta.solid { background: #cf6544 !important; color: #fff !important; border: 0 !important; }
.j-cta.line { background: none !important; border: 0 !important; color: #f2f6ff !important;
  text-decoration: underline !important; text-underline-offset: 4px; padding: 10px 8px !important; }

/* ---- the loop words earn their contrast back ---- */
.j-loopword { opacity: .95 !important; font-size: 15px !important; }
.j-again { font-size: 11px !important; }

/* ---- furniture: smaller, tighter, square, unboxed ---- */
.j-orbs { gap: 8px !important; }
.j-dots { gap: 7px !important; }
.j-dot { transform: scale(.8); }
.j-arr { width: 44px !important; height: 44px !important; background: none !important;
  border: 0 !important; box-shadow: none !important; color: #f2f6ff !important; font-size: 20px !important; }
.j-railstop { transform: scale(.85); }
.j-projstats { border: 0 !important; }
.j-projstats b, .j-projstats dt { font-size: 17px !important; }
.j-projstats span, .j-projstats dd { color: #9fbcec !important; font-size: 11px !important; }
.theme-chip { font-size: 10.5px !important; padding: 8px 12px !important; }
.ovl-in > *:last-child { margin-bottom: 0 !important; }

/* ---- the stage: a scrollable column, media capped, thumbs as a row ---- */
.j-slide { flex-direction: column !important; flex-wrap: nowrap !important; gap: 0 !important;
  overflow-y: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.j-showcase { flex: none !important; height: auto !important; max-width: 100% !important; }
.j-media-main { height: auto !important; }
.j-mainslot img, .j-mainslot video { max-height: 30vh !important; width: auto !important; max-width: 100% !important; }

/* the thumbstrip lives on the phone: a finger-scrollable row, read by
   brightness instead of borders (active = full, rest = dimmed) */
.j-thumbstrip {
  display: flex !important;
  position: static !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  gap: 6px !important;
  padding: 8px 2px 4px;
  scrollbar-width: none;
}
.j-thumbstrip::-webkit-scrollbar { display: none; }
.j-thumb { flex: 0 0 auto; width: 76px; height: 50px; padding: 0 !important;
  border: 0 !important; outline: 0 !important; box-shadow: none !important;
  opacity: .55; transition: opacity .2s; }
.j-thumb.on { opacity: 1; }
.j-thumb video, .j-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- the gallery and the landing fly at night too: the desktop's day-sky
   stage and ivory feet would wash the bare type out. ---- */
body.traverse-on .ovl-gallery .j-gal {
  background: linear-gradient(168deg, #0a2450 0%, #123870 46%, #1c4c92 100%) !important;
}
body.traverse-on .ovl-gallery .j-gal::before { opacity: .22 !important; }
body.traverse-on .ovl-gallery::after {
  background: linear-gradient(to top,
    rgba(5, 14, 34, .92) 0%, rgba(5, 14, 34, .7) 40%, rgba(5, 14, 34, 0) 100%) !important;
}
body.traverse-on .ovl-ground::after {
  background: linear-gradient(to top,
    rgba(5, 14, 34, .9) 0%, rgba(5, 14, 34, .66) 34%, rgba(5, 14, 34, 0) 100%) !important;
}

/* ---- round three, from Eric's own phone: darker portfolio night, his
   face leading it, no scrollbars anywhere, and type sized so a whole
   case fits the screen without scrolling. ---- */

/* no scrollbars, ever (scrolling itself still works everywhere) */
* { scrollbar-width: none !important; -ms-overflow-style: none !important; }
*::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }

/* darker night over the work */
body.traverse-on .ovl-gallery .j-gal {
  background: linear-gradient(168deg, #06152f 0%, #0b2450 52%, #123468 100%) !important;
}
body.traverse-on .ovl-gallery .j-gal::before { opacity: .16 !important; }

/* the person, then the work */
.j-face-work { display: flex !important; align-items: center; gap: 10px; margin: 0 0 8px !important; }
.j-face-work img { width: 44px !important; height: 44px !important; }
.j-face-work .j-face-say { font-size: 10px !important; color: #a7c0ea !important; }

/* compact-to-fit: the whole case on one screen */
.j-gal-h { font-size: 17px !important; }
.j-gal-head { padding-bottom: 4px !important; }
.j-mainslot img, .j-mainslot video { max-height: 24vh !important; }
.j-thumb { width: 64px; height: 42px; }
.j-slide-info h3 { font-size: 15px !important; margin-bottom: 3px !important; }
.j-projsum, .j-comp-blurb { font-size: 12px !important; line-height: 1.45 !important; color: #dbe6fb !important; }
.j-comp-title { font-size: 13px !important; }
.j-projmeta { font-size: 9.5px !important; margin-bottom: 3px !important; }
.j-projstats { gap: 12px !important; margin-top: 6px !important; }
.j-projstats b, .j-projstats dt { font-size: 15px !important; }
.j-projstats span, .j-projstats dd { font-size: 10px !important; }
.j-projserv { font-size: 9.5px !important; margin-top: 5px !important; }
.j-projlink { font-size: 11.5px !important; min-height: 40px; padding: 8px 0 !important; }

/* fit pass two: the remaining 84px */
.j-mainslot img, .j-mainslot video { max-height: 18vh !important; }
.j-thumb { width: 58px; height: 38px; }
.j-thumbstrip { padding: 8px 4px 4px; }
.j-slide-info { padding: 10px 4px 0 !important; margin-top: 6px !important; }
.j-face-work { margin: 0 0 4px !important; }
.j-gal-head { padding-bottom: 2px !important; }
.j-projsum, .j-comp-blurb { font-size: 11.5px !important; line-height: 1.4 !important; }
body.traverse-on .j-arrpair .j-arr { width: 40px !important; height: 40px !important; }
.j-arrpair { margin-top: 2px !important; }
body.traverse-on .j-dots { margin-top: 2px !important; }

/* the chrome frame hugs the media, never wider than the piece itself */
.j-media-main { width: fit-content !important; max-width: 100% !important; margin: 0 !important; }
.j-mainslot { width: fit-content !important; max-width: 100% !important; }
.j-showcase { width: fit-content !important; align-self: flex-start !important; }
.j-media-main, .j-mainslot { align-self: flex-start !important; }

/* the chrome belongs to the slot, not the whole media block: the thumbstrip
   below was stretching the frame wider than the piece itself */
.j-media-main.chrome { padding: 0 !important; background: none !important; }
.j-media-main.chrome::before { display: none !important; }
.j-media-main.chrome .j-mainslot { background: linear-gradient(#272c36, #1f242c);
  padding: 22px 0 0; position: relative; }
.j-media-main.chrome .j-mainslot::before { content: ""; position: absolute; top: 7px; left: 10px;
  width: 8px; height: 8px; background: #ff5f57;
  box-shadow: 14px 0 0 #febc2e, 28px 0 0 #28c840; z-index: 3; }


/* ---- the exit: the last world must park at the FOOT of the track.
   The theme releases it with `inset: auto 0 0 0`, but the phone block
   later in screens.css re-asserts `inset: var(--topband) 0 0 0`, which
   pinned the landing to the TOP of an 11,000px track and left the final
   screen blank. Restore the release, phone-side. ---- */
body.traverse-done .ovl-ground {
  inset: auto 0 0 0 !important;
  height: 100vh !important;
  height: 100svh !important;
}

/* ---- breathing room between the blocks in every world ---- */
.j-orbs { margin-top: 12px !important; }
.j-ctas { margin-top: 14px !important; gap: 10px !important; }
.j-loop { margin-top: 12px !important; }
.ovl .lede { margin-top: 8px !important; }
.j-cards, .j-tiers { margin-top: 12px !important; }
.j-mestats { margin-top: 12px !important; }

/* the case fits the screen: the last few pixels off the strip */
.j-thumbstrip { padding: 6px 4px 2px !important; }
.j-thumb { height: 36px; }

/* released, the landing still needs the header band above it */
/* released, the copy rides the trailing edge so it stays with the reader
   until the footer arrives, instead of scrolling away into empty sky */
body.traverse-done .ovl-ground {
  display: flex !important; align-items: flex-end !important;
  padding-top: calc(var(--topband) + 10px) !important; padding-bottom: 30px !important;
}

/* the rail hairline above the dots: the dots already show position, and
   on a phone the line reads as a stray rule under the header */
.j-rail-line { display: none !important; }

/* ---- the portfolio dots are circles ---- */
.j-dot, .j-dot span { border-radius: 50% !important; }

/* ---- the thumbstrip lives INSIDE the media's width, never past its edges.
   width:0 + min-width:100% keeps the strip out of the parent's intrinsic
   sizing (so the media alone sets the frame width) while still filling it,
   and the row scrolls within that band. ---- */
.j-thumbstrip {
  width: 0 !important;
  min-width: 100% !important;
  box-sizing: border-box !important;
}
.j-thumb { width: 48px; height: 32px; }