/* ==========================================================================
   Simple view — same content, quiet presentation.
   Unlayered on purpose: it overrides every cascade layer of the full view.
   Toggled by html[data-view="simple"] (switch, ?view=simple, saved choice,
   or automatically for reduced motion / save-data).
   ========================================================================== */

html[data-view="simple"] {
  --fs-hero: clamp(2.4rem, 1.4rem + 3.6vw, 4.6rem);
  scroll-behavior: auto;

  /* no motion at all */
  & *, & *::before, & *::after {
    animation: none !important;
    transition-property: color, background-color, border-color, opacity, translate !important;
    transition-duration: .2s !important;
  }
  /* the switches keep their slide */
  & .switch__thumb { transition-property: translate, background-position !important; transition-duration: .45s !important; }

  /* full-view-only layers */
  & :is(.loader, .progress, .cursor, .hero__gl, .hero__fallback, .hero__stars, .brand-context,
        .scroll-cue, .marquee, .megamark, .principles, .hscroll__hint, .hscroll__progress, .gallery__nav) {
    display: none !important;
  }
  &, & * { cursor: auto !important; }
  & :is(a, button) { cursor: pointer !important; }
  & body::after { display: none; }

  /* everything visible immediately (reveals rely on animations) */
  & :is(.reveal, .reveal-scale, .hero__lede, .hero__actions, .hero .overline, .status-pill, .principle) {
    opacity: 1 !important; translate: none !important; filter: none !important; clip-path: none !important; scale: none !important;
  }
  & .hero__title .line > span { translate: none !important; }
  & :is(.btn, .email) { translate: none !important; }
  & .browser { transform: none !important; }

  /* ---------- hero: compact intro ---------- */
  & .hero {
    min-height: 0;
    padding-block: calc(var(--header-h) + 56px) 48px;
    border-bottom: 1px solid var(--line);
  }
  & .hero::after { display: none; }
  & .hero__title { font-stretch: 90%; letter-spacing: -.02em; margin-block: 18px 22px; }
  & .hero__title .line { overflow: visible; display: inline; }
  & .hero__title .line + .line::before { content: " "; }
  & .hero__title .chrome-text, & .hero__title .chrome-text .ch { background: none; color: var(--text-2); -webkit-text-fill-color: currentColor; }
  & .hero__lede { max-width: 46rem; }
  & .status-pill { position: static; margin-top: 32px; justify-self: start; width: fit-content; margin-inline: var(--gutter); }

  /* ---------- sections tighter ---------- */
  & .section { padding-block: 72px 0; }
  & .section__head { margin-bottom: 36px; }
  & .about__statement { font-size: clamp(1.5rem, 1rem + 1.6vw, 2.2rem); font-weight: 400; font-stretch: 90%; text-transform: none; }
  & .metrics { margin-top: 40px; }
  & .metric { min-height: 0; gap: 18px; }
  & .metric__value { font-size: clamp(2.4rem, 1.6rem + 2vw, 3.4rem); }
  & .panel::before { display: none; }

  /* projects */
  & .case { padding-block: 24px 64px; }
  & .case + .case { padding-top: 64px; }
  & .case__title { font-size: clamp(2.4rem, 8cqi, 4.4rem); }
  & .case__top { margin-bottom: 32px; }
  & .case__grid { margin-top: 40px; }
  & .browser { box-shadow: none; }
  & .browser::after { display: none; }
  /* all project screens visible at once: a wrapping grid instead of the drag carousel */
  & .gallery { margin-top: 40px; }
  & .gallery__track {
    display: grid; cursor: auto; overflow: visible;
    grid-template-columns: repeat(auto-fill, minmax(min(46%, 150px), 1fr));
    gap: 16px; margin-inline: 0; padding: 4px 0 0;
  }
  & .device { width: auto; }
  & .device .shot { box-shadow: none; padding: 5px; border-radius: 22px; }
  & .device .shot img { border-radius: 17px; }
  & .device p { margin-top: 8px; font-size: .62rem; }
  & .device--wide { grid-column: span 2; }
  & .device--wide .shot { border-radius: var(--r); }
  & .device--wide .shot img { border-radius: 6px; aspect-ratio: 16 / 10; }

  /* experience */
  & .role { padding-block: 28px; }
  & .role h3 { margin-bottom: 14px; }

  /* stack: plain grid instead of the pinned horizontal scroller */
  & .hscroll { height: auto !important; margin-inline: 0 !important; }
  & .hscroll__sticky { position: static !important; height: auto !important; overflow: visible !important; display: block !important; perspective: none; }
  & .hscroll .caps {
    display: grid !important; width: auto !important; padding-inline: 0 !important; translate: none !important;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  }
  & .hscroll .cap { width: auto !important; min-height: 0 !important; padding: 24px !important; rotate: none !important; scale: none !important; opacity: 1 !important; }
  & .hscroll .cap .ico--lg { width: 26px !important; height: 26px !important; margin-bottom: 12px !important; }
  & .hscroll .cap h3 { font-size: 1.2rem !important; }
  & .edu { margin-top: 48px; }

  /* contact */
  & .contact { padding-bottom: 72px; }
  & .contact__title { font-size: clamp(2rem, 1.2rem + 3vw, 3.6rem); font-stretch: 90%; }
  & .contact__title .chrome-text { background: none; color: var(--text-2); }
  & .contact__row { margin-top: 32px; }
}