.shell--mobile {
  display: none;
  flex-direction: column;
}

@media (max-width: 1023px) {
  .shell--mobile {
    display: flex;
  }
}

/* ===== Top bar — same as the desktop menubar: just the name, no iOS
   status-bar chrome (clock/signal/wifi/battery). ===== */
.statusbar {
  flex: 0 0 auto;
  height: var(--statusbar-h);
  display: flex;
  align-items: center;
  padding: 0 26px;
}

.statusbar__brand {
  letter-spacing: 0.01em;
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
}

/* ===== Home screen — matches the mockup: a 2-column block (Video/Fashion,
   Storyboard/Illustration, About/Editorial) with Contact set apart below.
   Positioned in %, centered via transform, so it scales with the screen. */
.home-grid {
  flex: 1 1 auto;
  position: relative;
}

.home-grid .app-icon {
  position: absolute;
  width: 118px;
  transform: translate(-50%, -50%);
}

.home-grid .app-icon__glyph {
  width: var(--icon-size-mobile);
  height: var(--icon-size-mobile);
}

/* Video/Contact/Fashion: wider, not bigger — same height as every other
   icon (so labels still line up), just more width for these non-square
   source photos (see the matching desktop rule). */
.home-grid .app-icon[data-app-id="video"] .app-icon__glyph,
.home-grid .app-icon[data-app-id="contact"] .app-icon__glyph,
.home-grid .app-icon[data-app-id="fashion"] .app-icon__glyph {
  width: calc(var(--icon-size-mobile) * 150 / 116);
  height: var(--icon-size-mobile);
}

/* Smaller + always one line: at the base 14px, two-word labels ("Fashion
   Design", "Clip Vidéo") wrapped to a second line and ran into the icon row
   below (rows were only 18% apart). */
.home-grid .app-icon__label {
  font-size: 11px;
  white-space: nowrap;
}

/* Rows spaced further apart (~21% instead of 18%) so a label never reaches
   the icon in the row below. */
.home-grid .app-icon[data-app-id="video"] {
  top: 25%;
  left: 28%;
}

.home-grid .app-icon[data-app-id="fashion"] {
  top: 25%;
  left: 72%;
}

.home-grid .app-icon[data-app-id="storyboard"] {
  top: 46%;
  left: 28%;
}

.home-grid .app-icon[data-app-id="illustration"] {
  top: 46%;
  left: 72%;
}

.home-grid .app-icon[data-app-id="about"] {
  top: 67%;
  left: 28%;
}

.home-grid .app-icon[data-app-id="editorial"] {
  top: 67%;
  left: 72%;
}

.home-grid .app-icon[data-app-id="contact"] {
  top: 88%;
  left: 50%;
}

/* Tablet: bigger icons (iPadOS-style) */
@media (min-width: 600px) and (max-width: 1023px) {
  .home-grid .app-icon__glyph {
    width: var(--icon-size-tablet);
  }

  .home-grid .app-icon[data-app-id="video"] .app-icon__glyph,
  .home-grid .app-icon[data-app-id="contact"] .app-icon__glyph,
  .home-grid .app-icon[data-app-id="fashion"] .app-icon__glyph {
    width: calc(var(--icon-size-tablet) * 150 / 116);
    height: var(--icon-size-tablet);
  }

  .statusbar {
    font-size: 17px;
    padding: 0 40px;
  }
}

/* ===== Home indicator (bottom of iOS screen) ===== */
.home-indicator-bar {
  flex: 0 0 auto;
  height: var(--home-indicator-h);
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-indicator-bar::before {
  content: "";
  width: 134px;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.75);
}