/*
 * Exodus Core Solutions — work.html (portfolio), Work-only styles.
 *
 * Loads after css/inner.css, which holds everything shared by the inner
 * pages (reset, tokens, type, buttons, FadeIn, nav, hero shell, panels,
 * closing band, footer, cursor). Hand-written translation of Jay's
 * React/Tailwind/Framer reference (docs/GALLERY_PROMPT.md); Tailwind
 * breakpoints kept: sm = 640px, md = 768px, lg = 1024px, min-width.
 */

/* ---------------------------------------------------------------------- */
/* 1. Hero — h-screen flex-col, overflowX clip                              */
/* ---------------------------------------------------------------------- */

.hero--work{
  height: 100vh;
  height: 100svh;
  min-height: 520px;
}

/* Reference: 14/15/16/17.5vw for "HI, I'M JACK". "EXODUS CORE" measures
   6.41em wide in Kanit 900 (no narrow I/comma/apostrophe), so 15.6vw is the
   edge-to-edge limit; lg uses 15.3vw (~98% of the width) and the smaller
   steps still grow toward it the way the reference does. */
.hero--work .hero__heading{
  font-size: 13.4vw;
  margin-top: 1.5rem;                        /* mt-6 */
}
@media (min-width: 640px){
  .hero--work .hero__heading{ font-size: 14vw; margin-top: 1rem; }      /* sm:mt-4 */
}
@media (min-width: 768px){
  .hero--work .hero__heading{ font-size: 14.8vw; margin-top: -1.25rem; }  /* md:-mt-5 */
}
@media (min-width: 768px) and (max-width: 1023.98px){
  /* Tablet portrait (iPad 768-1023): at -1.25rem the nav's current-page
     underline touched the top of the letters; no pull-up here. */
  .hero--work .hero__heading{ margin-top: 0; }
}
@media (min-width: 1024px){
  .hero--work .hero__heading{ font-size: 15.3vw; }
}

/* Portrait (here: devices). absolute left-1/2 -translate-x-1/2 z-10,
   mobile top-1/2 -translate-y-1/2; sm+: bottom-0. */
.hero__portrait{
  position: absolute;
  z-index: 10;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 280px;
}
@media (min-width: 640px){
  .hero__portrait{ width: 360px; top: auto; bottom: 0; transform: translate(-50%, 0); }
}
@media (min-width: 768px){ .hero__portrait{ width: 440px; } }
@media (min-width: 1024px){ .hero__portrait{ width: 520px; } }

.hero__portrait-img{ width: 100%; height: auto; }

/* ---------------------------------------------------------------------- */
/* 2. Marquee — pt-24 sm:pt-32 md:pt-40 pb-10, rows gap-3, tiles gap-3     */
/* ---------------------------------------------------------------------- */

.marquee{
  background: var(--bg);
  padding: 6rem 0 2.5rem;
  overflow: hidden;
}
@media (min-width: 640px){ .marquee{ padding-top: 8rem; } }
@media (min-width: 768px){ .marquee{ padding-top: 10rem; } }

.marquee__rows{
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.marquee__row{
  display: flex;
  gap: .75rem;
  width: max-content;
  will-change: transform;
}

.marquee__tile{
  flex: 0 0 auto;
  width: 420px;
  height: 270px;
  border-radius: 1rem;                       /* rounded-2xl */
  object-fit: cover;
  background: linear-gradient(135deg, #17181b 0%, #22252b 100%);
  pointer-events: none;
}

/* ---------------------------------------------------------------------- */
/* 5. Projects — dark, rounded top. It follows the dark marquee (the white  */
/* Price panel it used to tuck over is gone), so the rounded top is drawn  */
/* as a 2px ink lid — the same edge as the project cards — which tapers    */
/* away down the corner curves.                                            */
/* ---------------------------------------------------------------------- */

.projects{
  position: relative;
  z-index: 10;
  background: var(--bg);
  border-top: 2px solid var(--ink);
  border-radius: var(--round-xl) var(--round-xl) 0 0;
  margin-top: 1.5rem;
  padding: 5rem 1.25rem 2.5rem;
}
@media (min-width: 640px){ .projects{ margin-top: 2rem; padding: 6rem 2rem 3rem; } }
@media (min-width: 768px){ .projects{ margin-top: 2.5rem; padding: 8rem 2.5rem 4rem; } }

.projects__heading{ margin-bottom: 4rem; }
@media (min-width: 640px){ .projects__heading{ margin-bottom: 5rem; } }
@media (min-width: 768px){ .projects__heading{ margin-bottom: 7rem; } }

.projects__stack{
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
}

/* h-[85vh] wrapper, sticky top-24 md:top-32 */
.card-wrap{
  position: sticky;
  top: 6rem;
  height: 85vh;
}
@media (min-width: 768px){ .card-wrap{ top: 8rem; } }

/* Each card offset by top: index * 28px (set by --i from JS; nth-child fallback) */
.card{
  position: relative;
  top: calc(var(--i, 0) * 28px);
  transform-origin: top center;
  will-change: transform;
  background: var(--bg);
  border: 2px solid var(--ink);
  border-radius: var(--round-xl);
  padding: 1rem;                             /* p-4 */
}
@media (min-width: 640px){ .card{ padding: 1.5rem; } }  /* sm:p-6 */
@media (min-width: 768px){ .card{ padding: 2rem; } }    /* md:p-8 */

.card-wrap:nth-child(2) .card{ --i: 1; }
.card-wrap:nth-child(3) .card{ --i: 2; }
.card-wrap:nth-child(4) .card{ --i: 3; }
.card-wrap:nth-child(5) .card{ --i: 4; }
.card-wrap:nth-child(6) .card{ --i: 5; }

.card__top{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .75rem 1.25rem;
  padding: .25rem .5rem 0;
}
@media (min-width: 768px){ .card__top{ gap: 1rem 2rem; padding: .5rem 1rem 0; } }

.card__num{
  flex: 0 0 auto;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.025em;
  font-size: clamp(3rem, 10vw, 140px);
}

.card__meta{
  flex: 1 1 10rem;
  min-width: 0;
  padding-bottom: .3em;
}
.card__label{
  color: var(--ink);
  opacity: .6;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: clamp(.75rem, 1.1vw, .95rem);  /* 12px floor (was 11.2px below 1024) */
  line-height: 1.4;
  margin-bottom: .35rem;
}
.card__name{
  color: var(--ink);
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1.1;
  font-size: clamp(1rem, 2.2vw, 2.1rem);
}

.card__top .live-btn{ margin-bottom: .3em; }

@media (max-width: 639.98px){
  /* On phones the button drops to its own row instead of crushing the name. */
  .card__top .live-btn{ flex: 0 0 auto; margin-left: auto; }
}

/* Two-column grid: left 40% (two stacked), right 60% (one tall) */
.card__grid{
  display: flex;
  gap: .75rem;
  margin-top: 1rem;
}
@media (min-width: 640px){ .card__grid{ gap: 1rem; margin-top: 1.5rem; } }
@media (min-width: 768px){ .card__grid{ margin-top: 2rem; } }

.card__col{
  display: flex;
  flex-direction: column;
  gap: .75rem;
  min-width: 0;
}
@media (min-width: 640px){ .card__col{ gap: 1rem; } }
.card__col--left{ flex: 0 0 calc(40% - .375rem); }
.card__col--right{ flex: 1 1 0; }
@media (min-width: 640px){ .card__col--left{ flex-basis: calc(40% - .5rem); } }

.card__img{
  width: 100%;
  object-fit: cover;
  border-radius: var(--round-xl);
  background: linear-gradient(135deg, #17181b 0%, #262a31 100%);
}
.card__img--a{ height: clamp(130px, 16vw, 230px); }
.card__img--b{ height: clamp(160px, 22vw, 340px); }
.card__img--tall{ height: 100%; flex: 1 1 auto; }

/* ---------------------------------------------------------------------- */
/* 6. Every screen — one foldable, the section's centerpiece.              */
/* Home state: a two-pane foldable home screen (the words widget on the    */
/* left, the design widget + app tray on the right). App state: a live     */
/* demo spanning the whole unfolded screen at a tablet CSS width.          */
/* The device is our own photo (assets/work/screens/foldable.jpg); the     */
/* screen box is measured from it, so the overlay is % of the image and    */
/* everything inside it is sized in cqw of the screen.                     */
/* ---------------------------------------------------------------------- */

.screens{
  position: relative;
  z-index: 11;
  background: #F6F4F2;                       /* sampled from the foldable photo's studio backdrop */
  color: var(--bg);
  border-radius: var(--round-xl) var(--round-xl) 0 0;
  margin-top: -2.5rem;
  padding: 5rem 1.25rem 7rem;
}
@media (min-width: 640px){ .screens{ margin-top: -3rem; padding: 6rem 2rem 8rem; } }
@media (min-width: 768px){ .screens{ margin-top: -3.5rem; padding: 8rem 2.5rem 10rem; } }

.screens__heading{
  color: var(--bg);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -.025em;
  text-align: center;
  font-size: clamp(3rem, 12vw, 160px);
}
.screens__lede{
  max-width: 38rem;
  margin: 1.5rem auto 2rem;
  text-align: center;
  font-weight: 300;
  line-height: 1.6;
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  color: rgba(12, 12, 12, .65);
}
@media (min-width: 768px){ .screens__lede{ margin-bottom: 3rem; } }

.screens__cap{
  margin-top: .5rem;
  text-align: center;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: clamp(.75rem, 1.1vw, .9rem);
  color: rgba(12, 12, 12, .64);              /* .55 was 4.2:1 on #F6F4F2; .64 clears 4.5:1 */
}

/* ---- Device + stage --------------------------------------------------- */

.fold{ max-width: 1300px; margin: 0 auto; }

/* The stage bleeds across the section gutter and clips the photo, so on
   narrow screens the device can be zoomed past the hands to fill the width. */
.fold__stage{ margin: 0 -1.25rem; overflow: hidden; }
@media (min-width: 640px){ .fold__stage{ margin: 0 -2rem; } }
@media (min-width: 768px){ .fold__stage{ margin: 0 -2.5rem; } }

.fold__device{
  --fw: 160%;                                 /* photo width; the device frame is ~58% of it */
  position: relative;
  width: var(--fw);
  margin-left: calc((100% - var(--fw)) / 2);
}
@media (min-width: 768px){ .fold__device{ --fw: 120%; } }
@media (min-width: 1024px){ .fold__device{ --fw: min(1100px, 100%); } }

.fold__img{
  display: block;
  width: 100%; height: auto;
  /* soften the photo edge into the section so no box shows */
  -webkit-mask-image: radial-gradient(125% 110% at 50% 48%, #000 62%, transparent 82%), linear-gradient(180deg, #000 84%, transparent 99%);
          mask-image: radial-gradient(125% 110% at 50% 48%, #000 62%, transparent 82%), linear-gradient(180deg, #000 84%, transparent 99%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

.fold__screen{
  position: absolute;
  left: 20.938%; top: 10.169%; width: 57.625%; height: 73.07%;
  border-radius: 1.5% / 1.8%;
  overflow: hidden;
  background: #000;
  container-type: inline-size;
}
.fold__screen::after{                        /* the hinge crease — stays over the live site too */
  content: ""; position: absolute; z-index: 5; top: 0; bottom: 0; left: 50%; width: .5cqw; transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(0, 0, 0, .3), rgba(255, 255, 255, .14), rgba(0, 0, 0, .3));
  pointer-events: none;
  transition: opacity .45s var(--ease);
}
.fold.is-app .fold__screen::after{ opacity: .45; }

/* ---- Home state -------------------------------------------------------- */

.fold__home{
  --icon: 6.6cqw;
  position: absolute; inset: 0;
  display: grid; grid-template-columns: 1fr 1fr;
  padding: 6.2cqw 0 3.2cqw;
  background:
    radial-gradient(70% 90% at 12% 8%, rgba(182, 0, 168, .85), transparent 60%),
    radial-gradient(70% 90% at 92% 92%, rgba(190, 76, 0, .9), transparent 60%),
    linear-gradient(150deg, #18011F 0%, #7621B0 55%, #BE4C00 100%);
  color: #fff;
  transition: transform .45s var(--ease), opacity .45s var(--ease), filter .45s var(--ease);
}
.fold.is-app .fold__home{ transform: scale(.94); opacity: 0; filter: blur(6px); pointer-events: none; }

.fold__status{
  position: absolute; top: 0; left: 0; right: 0; height: 5.2cqw;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 3.6cqw;
  font-weight: 600; font-size: max(1.7cqw, 9px); letter-spacing: .02em;
}
.fold__status-icons{ font-size: .62em; letter-spacing: .1em; opacity: .9; }

.fold__pane{ position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 0 3.4cqw; }

/* the words widget */
.fold__words{
  position: relative;
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; justify-content: center; gap: 1.9cqw;
  padding: 6cqw 3.8cqw 4cqw;
  border-radius: 3.4cqw;
  background: rgba(12, 12, 12, .64);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 1.6cqw 4cqw rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(255, 255, 255, .08);
  overflow: hidden;
}
.fold__tag{
  position: absolute; top: 3.2cqw; left: 3.8cqw;
  font-size: max(1.3cqw, 8px); font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(215, 226, 234, .6);
}
.fold__count{
  position: absolute; top: 3.2cqw; right: 3.8cqw;
  font-size: max(1.3cqw, 8px); font-weight: 500; letter-spacing: .12em;
  color: rgba(215, 226, 234, .45);
  font-variant-numeric: tabular-nums;
}
.fold__count b{ font-weight: 700; color: #fff; }
.fold__brand{ font-size: max(1.6cqw, 9px); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #E0A96D; }
.fold__headline{
  font-weight: 800; line-height: 1.04; letter-spacing: -.02em;
  font-size: 5.3cqw; min-height: 3.12em;
  color: #fff;
}
.fold__caret{
  display: inline-block; width: .12em; height: .85em; margin-left: .08em; vertical-align: -.08em;
  background: #E14BD6; animation: fold-caret 1s steps(1) infinite;
}
@keyframes fold-caret{ 50%{ opacity: 0; } }
.fold__sub{ font-size: max(1.95cqw, 9px); font-weight: 300; line-height: 1.5; color: rgba(215, 226, 234, .8); transition: opacity .4s var(--ease); }
.fold__cta{
  align-self: flex-start; margin-top: .6cqw;
  font-size: max(1.35cqw, 8px); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #fff;
  padding: 1.1cqw 2.4cqw; border-radius: 999px;
  background: linear-gradient(123deg, #18011F 7%, #B600A8 37%, #7621B0 72%, #BE4C00 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15);
  transition: opacity .4s var(--ease);
}
.fold__screen.is-typing .fold__sub,
.fold__screen.is-typing .fold__cta{ opacity: 0; }

/* the design widget — shows the demo being typed on the left; opens it */
.fold__pane--apps{ gap: 2.6cqw; }
.fold__feature{
  all: unset; cursor: pointer;
  position: relative; display: block;
  flex: 1 1 auto; min-height: 0;
  border-radius: 3.4cqw; overflow: hidden;
  background: #111;
  box-shadow: 0 1.6cqw 4cqw rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .1);
  -webkit-tap-highlight-color: transparent;
}
.fold__shot{
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  transition: opacity .5s var(--ease), transform 5s linear;
}
.fold__shot.is-missing{ visibility: hidden; }
.fold__screen.is-swapping .fold__shot{ opacity: 0; }
.fold__screen.is-showing .fold__shot{ transform: scale(1.05); }
.fold__feature::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 38%, rgba(0, 0, 0, .55) 62%, rgba(0, 0, 0, .9)); pointer-events: none; }
.fold__feature-k, .fold__feature-v{ position: absolute; z-index: 1; left: 3cqw; color: #fff; }
.fold__feature-k{ bottom: 7.4cqw; font-size: max(1.3cqw, 8px); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.fold__feature-v{ bottom: 3cqw; font-size: max(2.6cqw, 11px); font-weight: 700; line-height: 1.1; }
.fold__feature-go{
  position: absolute; z-index: 1; top: 2.4cqw; right: 2.4cqw;
  font-size: max(1.3cqw, 8px); font-weight: 600; letter-spacing: .06em;
  padding: .8cqw 1.8cqw; border-radius: 999px;
  background: rgba(12, 12, 12, .7); color: #fff;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: background .2s var(--ease);
}
.fold__feature:hover .fold__feature-go{ background: #B600A8; }
.fold__feature:focus-visible{ outline: 3px solid #fff; outline-offset: -3px; }

/* the app tray */
.fold__apps{
  list-style: none;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .6cqw;
  padding: 2cqw 1.2cqw 1.6cqw;
  border-radius: 3.4cqw;
  background: rgba(255, 255, 255, .2);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.fold__apps > li{ display: flex; justify-content: center; min-width: 0; }

.app{
  all: unset;
  cursor: pointer;
  box-sizing: border-box;
  width: 100%; min-width: 0;                  /* the whole tray column is the tap target */
  display: flex; flex-direction: column; align-items: center; gap: .8cqw;
  -webkit-tap-highlight-color: transparent;
}
.app__icon{
  width: var(--icon); height: var(--icon);
  border-radius: calc(var(--icon) * .27);
  display: grid; place-items: center;
  font-weight: 800; font-size: calc(var(--icon) * .3); letter-spacing: -.02em;
  box-shadow: 0 calc(var(--icon) * .09) calc(var(--icon) * .18) rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(255, 255, 255, .12);
  transition: transform .2s var(--ease);
}
.app:hover .app__icon{ transform: translateY(-6%) scale(1.05); }
.app:active .app__icon{ transform: scale(.92); }
.app:focus-visible .app__icon{ outline: 2px solid #fff; outline-offset: 2px; }
.app__icon--mf{ background: linear-gradient(145deg, #1a1712, #050505); color: #D9B25F; font-family: Georgia, serif; font-weight: 400; font-size: calc(var(--icon) * .27); }
.app__icon--solace{ background: linear-gradient(145deg, #5a2a47, #2e1426); color: #F3E4DA; font-family: Georgia, serif; font-weight: 400; font-size: calc(var(--icon) * .47); }
.app__icon--ridge{ background: linear-gradient(145deg, #1b1f27, #0b0d11); color: #F5C518; font-size: calc(var(--icon) * .47); }
.app__icon--umbra{ background: linear-gradient(145deg, #1c232a, #0a0c0e 70%); color: #3FD0F0; font-size: calc(var(--icon) * .47); font-weight: 900; box-shadow: 0 calc(var(--icon) * .09) calc(var(--icon) * .18) rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(63, 208, 240, .25); }
.app__icon--kola{ background: radial-gradient(90% 80% at 50% 110%, rgba(214, 104, 34, .55), transparent 62%), linear-gradient(145deg, #4a3a30, #1f1712); color: #F1DFC4; font-weight: 700; font-size: calc(var(--icon) * .26); letter-spacing: .02em; box-shadow: 0 calc(var(--icon) * .09) calc(var(--icon) * .18) rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(233, 196, 140, .22); }
.app__icon--noctra{ background: radial-gradient(70% 60% at 50% 38%, rgba(207, 205, 203, .22), transparent 70%), linear-gradient(145deg, #1d1c1b, #050505); color: #EDEBE8; box-shadow: 0 calc(var(--icon) * .09) calc(var(--icon) * .18) rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(237, 235, 232, .2); }
.app__icon--noctra svg{ display: block; }
.app__label{
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: max(1.25cqw, 7.5px); font-weight: 500; line-height: 1.2;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

.fold__hint{
  text-align: center; font-size: max(1.2cqw, 8px); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; opacity: .85;
  margin-top: -.6cqw;
  animation: fold-hint 2.4s var(--ease) infinite;
}
@keyframes fold-hint{ 0%, 100%{ transform: translateY(0); opacity: .85; } 50%{ transform: translateY(-.5cqw); opacity: .5; } }

/* Phones: two panes get too narrow for a card and a tray side by side, so
   the words collapse to a strip across the top and the apps take the full
   unfolded width. */
@media (max-width: 479.98px){
  .fold__home{ --icon: 11cqw; grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); row-gap: 2.4cqw; padding: 7.4cqw 0 3cqw; }
  .fold__status{ height: 6.4cqw; padding: 0 4cqw; }
  .fold__pane{ padding: 0 3cqw; }
  .fold__words{ flex: 0 0 auto; justify-content: flex-start; gap: .8cqw; padding: 2.4cqw 3.4cqw 2.6cqw; }
  .fold__tag, .fold__count, .fold__sub, .fold__cta{ display: none; }
  .fold__shot{ object-position: 50% 14%; }
  .fold__brand{ font-size: max(2.4cqw, 8px); }
  .fold__headline{ font-size: max(4.6cqw, 12px); min-height: 2.08em; }
  .fold__pane--apps{ gap: 2.4cqw; }
  .fold__feature-k{ bottom: 8.6cqw; font-size: max(2.2cqw, 7.5px); }
  .fold__feature-v{ bottom: 3cqw; font-size: max(3.8cqw, 11px); }
  .fold__feature-go{ font-size: max(2.4cqw, 8px); padding: 1cqw 2.6cqw; }
  .fold__apps{ gap: 1cqw; padding: 2.4cqw 2cqw 2cqw; }
  .app{ gap: 1cqw; }
  .app__label{ font-size: max(2.4cqw, 7.5px); }
  .fold__hint{ display: none; }
}

/* ---- App state --------------------------------------------------------- */

.fold__app{
  --bar: max(4cqw, 20px);
  position: absolute; inset: 0; z-index: 3;
  background: #fff;
  visibility: hidden;
  opacity: 0; transform: scale(.9);
  transform-origin: var(--ox, 50%) var(--oy, 50%);
  transition: transform .45s var(--ease), opacity .35s var(--ease), visibility 0s linear .45s;
}
.fold.is-app .fold__app{ visibility: visible; opacity: 1; transform: none; transition: transform .45s var(--ease), opacity .35s var(--ease); }
.fold__app-status{
  position: absolute; top: 0; left: 0; right: 0; height: var(--bar);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
  padding: 0 3.6cqw;
  background: #0C0C0C; color: #fff;
  font-weight: 600; font-size: max(1.5cqw, 9px);
}
.fold__app-status .fold__status-icons{ justify-self: end; }
.fold__app-name{ opacity: .7; font-weight: 500; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fold__frame{
  position: absolute; top: var(--bar); left: 0;
  width: 820px;                               /* a real tablet CSS width; scaled to the screen by JS */
  border: 0;
  transform-origin: 0 0;
  background: #fff;
}
.fold__appbar{
  position: absolute; left: 0; right: 0; bottom: max(4.4cqw, 22px);
  display: flex; justify-content: center; gap: max(3cqw, 14px);
  pointer-events: none;
}
.fold__open,
.fold__close{
  all: unset;
  pointer-events: auto; cursor: pointer;
  box-sizing: border-box;
  display: inline-flex; align-items: center; gap: .35em;
  min-height: max(4.4cqw, 32px);
  font-size: max(1.5cqw, 12px); font-weight: 600; letter-spacing: .04em; line-height: 1;
  padding: 0 max(2.2cqw, 14px); border-radius: 999px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 .8cqw 2.4cqw rgba(0, 0, 0, .3);
  -webkit-tap-highlight-color: transparent;
}
.fold__open{ background: linear-gradient(123deg, #18011F 7%, #B600A8 37%, #7621B0 72%, #BE4C00 100%); color: #fff; }
.fold__close{ background: rgba(12, 12, 12, .78); color: #fff; }
.fold__close span{ font-size: 1.3em; line-height: .8; }
.fold__open:focus-visible,
.fold__close:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 4px #B600A8; }
.fold__homebar{
  all: unset; cursor: pointer;
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: max(16cqw, 88px); height: max(3.6cqw, 18px);
  display: grid; place-items: center;
}
.fold__homebar::before{ content: ""; width: 100%; height: max(.6cqw, 4px); border-radius: 999px; background: rgba(12, 12, 12, .75); box-shadow: 0 0 0 max(.25cqw, 1.5px) rgba(255, 255, 255, .7); }
.fold__homebar:focus-visible::before{ background: #B600A8; }

/* ---- Dots -------------------------------------------------------------- */

.fold__dots{ display: flex; justify-content: center; gap: .15rem; margin-top: .35rem; }
.fold__dot{
  all: unset; cursor: pointer;
  display: grid; place-items: center;
  height: 2rem; padding: 0 .3rem;
  -webkit-tap-highlight-color: transparent;
}
.fold__dot::before{
  content: "";
  width: .6rem; height: .6rem; border-radius: 999px;
  background: rgba(12, 12, 12, .2);
  transition: width .3s var(--ease), background .3s var(--ease);
}
.fold__dot.is-active::before{ width: 1.8rem; background: #0C0C0C; }
.fold__dot:focus-visible{ outline: 2px solid #B600A8; outline-offset: 1px; border-radius: 999px; }
@media (pointer: coarse){ .fold__dot{ height: 2.75rem; } }   /* 44px-tall tap target on touch */

/* the dark closing band tucks over the light section, like Projects over Price */
.screens + .closing{
  position: relative; z-index: 12;
  background: var(--bg);
  border-radius: var(--round-xl) var(--round-xl) 0 0;
  margin-top: -2.5rem;
}
@media (min-width: 640px){ .screens + .closing{ margin-top: -3rem; } }
@media (min-width: 768px){ .screens + .closing{ margin-top: -3.5rem; } }

@media (prefers-reduced-motion: reduce){
  .fold__hint, .fold__caret{ animation: none; }
  .fold__home, .fold__app, .fold.is-app .fold__app, .fold__shot, .fold__sub, .fold__cta, .fold__screen::after, .fold__dot::before, .fold__feature-go, .app__icon{ transition: none; }
  .fold__screen.is-showing .fold__shot{ transform: none; }
}

/* ---------------------------------------------------------------------- */
/* Cursor — these controls reset their cursor with `all: unset`, so they   */
/* repeat the shared chrome-arrow rule from css/inner.css.                 */
/* ---------------------------------------------------------------------- */

@media (hover: hover) and (pointer: fine){
  .app,
  .fold__feature,
  .fold__open,
  .fold__close,
  .fold__homebar,
  .fold__dot{ cursor: url("../assets/brand/cursor-48.png") 12 3, pointer; }
}

/* ---------------------------------------------------------------------- */
/* Reduced motion                                                          */
/* ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce){
  .marquee__row,
  .card{ transform: none !important; will-change: auto; }
}