/* Shared portfolio engine — project-list items + sliding preview panel.
   Loaded by both index.html and work-with-me/index.html. Single source of truth.
   Relies on the host page's :root tokens (--cream, --burgundy, --red, --blue, --ease-out). */

body.panel-open { overflow: hidden; }

    .project-item {
      display: block;
      padding: 28px var(--m);
      border-bottom: 1px solid var(--rule);
      border-left: 3px solid transparent;
      text-decoration: none;
      color: inherit;
      cursor: pointer;
      transition: background 140ms ease;
      /* Divider goes full viewport width on mobile, content stays contained */
      position: relative;
    }

    .project-item:first-child {
      border-top: none;
    }

    /* Current projects — red index tab */
    .project-item.current { border-left-color: var(--red); }
    .project-item.current:hover .project-name { color: var(--red); }

    /* Previous projects — blue index tab */
    .project-item.previous { border-left-color: var(--blue); }
    .project-item.previous:hover .project-name { color: var(--blue); }

    /* File folder tab on first item of each category */
    .project-item.current.section-first::before,
    .project-item.previous.section-first::before {
      position: absolute;
      top: -1px;
      left: -3px;
      padding: 3px 8px;
      font-size: 7px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--cream);
      border-radius: 2px 2px 0 0;
      line-height: 1.4;
    }
    .project-item.current.section-first::before {
      content: 'Now';
      background: var(--red);
    }
    .project-item.previous.section-first::before {
      content: 'Then';
      background: var(--blue);
    }

    .project-item:hover { background: rgba(17,16,9,0.03); }

    .project-item.coming-soon {
      cursor: default;
      opacity: 0.45;
    }
    .project-item.coming-soon:hover { background: none; }
    .project-item.coming-soon:hover .project-name { color: var(--burgundy); }


    .project-meta {
      display: flex;
      align-items: baseline;
      gap: 10px;
      margin-bottom: 8px;
    }

    .project-name {
      font-size: clamp(28px, 3vw, 44px);
      font-weight: 700;
      letter-spacing: -0.03em;
      line-height: 1;
      color: var(--burgundy);
      transition: color 140ms ease;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .project-platform {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .project-desc {
      font-size: 13px;
      line-height: 1.55;
      color: rgba(68,19,30,0.85);
    }

    /* ══════════════════════════════════════════
       PREVIEW PANEL — dark mode
    ══════════════════════════════════════════ */

    #preview {
      position: fixed;
      top: 0;
      right: 0;
      width: min(560px, 90vw);
      height: 100vh;
      background: var(--burgundy);
      z-index: 200;
      transform: translateX(110%);
      transition: transform 440ms var(--ease-out);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      color: var(--cream);
    }

    #preview.open {
      transform: translateX(0);
    }

    .preview-band {
      height: 4px;
      flex-shrink: 0;
      background: var(--red);
    }

    .preview-header {
      height: 96px;
      padding: 0 32px;
      border-bottom: 1px solid rgba(240,235,224,0.12);
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
    }

    .preview-meta {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .preview-platform {
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(240,235,224,0.45);
    }

    .preview-name {
      font-size: clamp(32px, 4vw, 52px);
      font-weight: 700;
      letter-spacing: -0.03em;
      line-height: 1;
      color: var(--cream);
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .preview-name-icon {
      height: 0.85em;
      width: 0.85em;
      object-fit: contain;
      background: var(--cream);
      border-radius: 22%;
      padding: 0.12em;
      flex-shrink: 0;
    }

    .preview-close {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: none;
      border: none;
      font-size: 22px;
      color: rgba(240,235,224,0.35);
      cursor: pointer;
      font-family: var(--font);
      transition: color 120ms ease;
      flex-shrink: 0;
      padding: 0;
      line-height: 1;
    }

    .preview-close:hover { color: var(--cream); }

    .preview-body {
      flex: 1;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 28px 0;
      scrollbar-width: none;
    }
    .preview-body::-webkit-scrollbar { display: none; }

    /* All body content gets consistent 32px side padding except full-bleed elements */
    .preview-tagline,
    .preview-features-headline {
      padding-left: 32px;
      padding-right: 32px;
      margin-bottom: 20px;
    }

    .preview-tagline {
      font-size: 15px;
      line-height: 1.65;
      color: rgba(240,235,224,0.82);
      margin-bottom: 28px;
    }

    /* Dark scene — layered floating product images */
    .preview-scene {
      width: 100%;
      margin-left: 0;
      background: var(--burgundy);
      position: relative;
      /* Height driven by the front image — no fixed height so nothing clips */
      padding: 28px 0 48px;
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 0;
      flex-shrink: 0;
      min-height: 300px;
    }

    /* Front image: mini player — show full height, anchored left */
    .preview-scene .layer-front {
      position: relative;
      margin-left: 28px;
      /* Let image be its natural aspect ratio, capped by panel width */
      width: 46%;
      flex-shrink: 0;
      border-radius: 12px;
      box-shadow: 0 14px 48px rgba(0,0,0,0.8);
      z-index: 2;
    }

    /* Back image: queue panel — overlaps right side of front */
    .preview-scene .layer-back {
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
      width: 46%;
      border-radius: 10px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.7);
      z-index: 1;
    }

    .preview-features-headline {
      font-size: clamp(18px, 3vw, 26px);
      font-weight: 700;
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
      color: var(--cream);
      line-height: 1.15;
      margin-bottom: 16px;
      letter-spacing: -0.02em;
    }

    /* Feature strip — three cards below the scene */
    .preview-features {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      padding: 0 32px;
      margin-bottom: 24px;
    }

    .feature-card {
      background: rgba(240,235,224,0.07);
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .feature-card-text-only {
      justify-content: center;
      min-height: 120px;
      border: 1px solid rgba(240,235,224,0.12);
    }

    .feature-card img {
      width: 100%;
      display: block;
      aspect-ratio: 4/3;
      object-fit: cover;
      object-position: top center;
    }

    .feature-card-body {
      padding: 12px 14px 16px;
    }

    .feature-card-title {
      font-size: 13px;
      font-weight: 700;
      color: var(--cream);
      margin-bottom: 4px;
      line-height: 1.2;
      text-align: center;
    }

    .feature-card-desc {
      font-size: 11px;
      line-height: 1.5;
      color: rgba(240,235,224,0.68);
      text-align: left;
    }

    /* Single full-width image (fallback) */
    .preview-main-img {
      width: calc(100% - 64px);
      margin-left: 32px;
      display: block;
      margin-bottom: 24px;
      box-shadow: 0 10px 36px rgba(0,0,0,0.35);
    }

    /* Video hero with panel margins */
    .preview-main-video {
      width: calc(100% - 64px);
      margin-left: 32px;
      display: block;
      margin-top: 20px;
      margin-bottom: 24px;
      box-shadow: 0 10px 36px rgba(0,0,0,0.35);
    }

    /* Watch carousel hero */
    .preview-carousel {
      position: relative;
      width: calc(100% - 64px);
      margin-left: 32px;
      margin-top: 20px;
      margin-bottom: 44px;
      background: #000;
      height: 280px;
      box-shadow: 0 10px 36px rgba(0,0,0,0.35);
      overflow: visible;
    }
    .preview-carousel .carousel-watch {
      position: absolute;
      height: 340px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      transition: transform 1.4s cubic-bezier(0.22, 1.2, 0.36, 1);
      filter: drop-shadow(0 10px 24px rgba(0,0,0,0.45));
      z-index: 2;
    }
    .preview-carousel .carousel-watch.pos-left {
      transform: translate(-112%, -50%);
    }
    .preview-carousel .carousel-watch.pos-right {
      transform: translate(12%, -50%);
    }
    .preview-carousel .carousel-bezel {
      position: relative;
      z-index: 2;
      height: 100%;
      display: block;
    }
    .preview-carousel .carousel-screens {
      position: absolute;
      z-index: 1;
      overflow: hidden;
      top: 23.2%;
      left: 14.8%;
      width: 70.3%;
      height: 53.5%;
      border-radius: 18px;
    }
    .preview-carousel .carousel-screens img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      transition: opacity 1s ease;
    }
    .preview-carousel .carousel-screens img.active {
      opacity: 1;
    }
    .preview-carousel .carousel-text {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 55%;
      padding: 0 24px;
      opacity: 0;
      transition: opacity 0.8s ease 0.5s;
      box-sizing: border-box;
    }
    .preview-carousel .carousel-text.visible {
      opacity: 1;
    }
    .preview-carousel .carousel-text.text-right {
      right: 0;
    }
    .preview-carousel .carousel-text.text-left {
      left: 0;
    }
    .preview-carousel .carousel-text h3 {
      font-size: 18px;
      font-weight: 700;
      color: var(--cream);
      margin: 0 0 8px 0;
      letter-spacing: -0.02em;
    }
    .preview-carousel .carousel-text p {
      font-size: 13px;
      line-height: 1.55;
      color: rgba(240,235,224,0.68);
      margin: 0;
    }
    /* Carousel nav arrow — inside text panel */
    .preview-carousel .carousel-nav {
      background: none;
      border: none;
      color: rgba(240,235,224,0.4);
      font-size: 28px;
      padding: 0;
      margin-top: 14px;
      margin-left: auto;
      margin-right: 10px;
      display: block;
      text-align: right;
      animation: carousel-nudge 2.5s ease-in-out infinite;
      pointer-events: none;
    }
    /* Whole black box is clickable */
    .preview-carousel {
      cursor: pointer;
    }
    @keyframes carousel-nudge {
      0%, 100% { transform: translateX(0); }
      40% { transform: translateX(6px); }
      60% { transform: translateX(-2px); }
      75% { transform: translateX(0); }
    }

    /* Haptic effect — inner wrapper for jiggle */
    .carousel-watch-inner {
      position: relative;
      height: 100%;
    }
    .carousel-watch-inner.jiggle {
      animation: haptic-jiggle 0.5s ease;
    }
    @keyframes haptic-jiggle {
      0%, 100% { transform: translateX(0) rotate(0); }
      15% { transform: translateX(-2px) rotate(-1deg); }
      30% { transform: translateX(2px) rotate(1deg); }
      45% { transform: translateX(-1.5px) rotate(-0.7deg); }
      60% { transform: translateX(1.5px) rotate(0.7deg); }
      75% { transform: translateX(-0.5px) rotate(-0.3deg); }
      90% { transform: translateX(0.5px) rotate(0.3deg); }
    }

    /* Haptic waves radiating from watch */
    .carousel-haptic-waves {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.5);
      width: 500px;
      opacity: 0;
      pointer-events: none;
      z-index: 0;
    }
    .carousel-haptic-waves.active {
      animation: haptic-waves 1.2s ease-out forwards;
    }
    @keyframes haptic-waves {
      0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
      25% { opacity: 0.6; transform: translate(-50%, -50%) scale(0.8); }
      100% { opacity: 0; transform: translate(-50%, -50%) scale(1.15); }
    }

    /* ── EDITORIAL PANEL (Hoff & Pepper) ──── */

    .ed-body p {
      font-size: 14px;
      line-height: 1.8;
      color: rgba(240,235,224,0.78);
      margin-bottom: 16px;
    }
    .ed-body p strong {
      font-weight: 700;
      color: var(--cream);
    }
    .ed-body p a {
      color: rgba(240,235,224,0.78);
      text-decoration: underline;
      text-decoration-color: rgba(240,235,224,0.3);
      text-underline-offset: 3px;
      transition: text-decoration-color 0.2s ease;
    }
    .ed-body p a:hover {
      text-decoration-color: var(--cream);
      color: var(--cream);
    }

    .ed-pull-quote {
      border-left: 3px solid var(--accent, var(--red));
      padding: 8px 0 8px 20px;
      margin: 28px 0 24px;
      font-size: clamp(22px, 3.5vw, 26px);
      font-weight: 700;
      line-height: 1.35;
      letter-spacing: -0.02em;
      color: var(--cream);
    }

    .ed-lineup-quote {
      position: relative;
      overflow: hidden;
    }
    .ed-lineup-quote img {
      width: 100%;
      display: block;
      object-fit: cover;
      object-position: center 65%;
      aspect-ratio: 16 / 9;
    }
    .ed-lineup-quote-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 24px 28px 22px;
      background: linear-gradient(to top, rgba(6,3,4,0.92) 0%, rgba(6,3,4,0.7) 60%, transparent 100%);
    }
    .ed-lineup-quote-overlay blockquote {
      font-size: clamp(14px, 2.5vw, 18px);
      font-weight: 700;
      line-height: 1.45;
      letter-spacing: -0.01em;
      color: var(--cream);
      border-left: 2px solid var(--red);
      padding-left: 14px;
      margin: 0;
    }

    .ed-section {
      padding: 0 28px;
      margin-bottom: 24px;
    }

    .ed-caption {
      font-size: 11px;
      line-height: 1.6;
      color: rgba(240,235,224,0.5);
      margin-top: 10px;
      transition: opacity 0.4s ease;
    }
    .ed-caption a {
      color: rgba(240,235,224,0.7);
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    .ed-caption a:hover {
      color: var(--cream);
    }

    .ed-hero {
      width: 100%;
      display: block;
      margin-top: 12px;
    }

    /* Hero demo slideshow — auto crossfade, no controls */
    .ed-hero-slideshow {
      position: relative;
      width: 100%;
    }
    .ed-hero-slideshow img {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      object-fit: contain;
      opacity: 0;
      transition: opacity 2.5s ease;
    }
    .ed-hero-slideshow.has-shadow img {
      filter: drop-shadow(0 6px 20px rgba(0,0,0,0.5));
    }
    .ed-hero-slideshow img.active { opacity: 1; }

    /* Slideshow player — mirrors video player */
    .ed-slideshow-outer {
      border: 1px solid rgba(240,235,224,0.12);
      overflow: hidden;
    }
    .ed-slideshow-wrap {
      position: relative;
      cursor: pointer;
      overflow: hidden;
    }
    .ed-slideshow-wrap img {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      opacity: 0;
      transition: opacity 0.6s ease;
    }
    .ed-slideshow-wrap img.active { opacity: 1; }
    .ed-slideshow-wrap.has-shadow img {
      filter: drop-shadow(0 6px 20px rgba(0,0,0,0.5));
    }
    .ed-slideshow-bar {
      padding: 12px 14px;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
      border-top: 1px solid rgba(240,235,224,0.1);
    }
    .ed-slideshow-title {
      font-size: 10px;
      font-weight: 400;
      line-height: 1.5;
      letter-spacing: 0.02em;
      color: rgba(240,235,224,0.55);
      flex: 1;
      min-width: 0;
      transition: opacity 0.3s ease;
    }
    .ed-slideshow-nav {
      display: flex;
      gap: 4px;
      flex-shrink: 0;
    }
    .ed-slideshow-nav button {
      border: 1px solid rgba(240,235,224,0.3);
      background: none;
      cursor: pointer;
      padding: 4px 10px;
      font-family: var(--font);
      font-size: 10px;
      font-weight: 700;
      color: #f0ebe0;
      transition: all 0.15s ease;
      line-height: 1;
    }
    .ed-slideshow-nav button:hover {
      background: rgba(240,235,224,0.12);
      border-color: rgba(240,235,224,0.5);
    }
    .ed-slideshow-counter {
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.08em;
      color: rgba(240,235,224,0.35);
      margin-left: 8px;
      flex-shrink: 0;
    }

    .ed-video-outer {
      border: 1px solid rgba(240,235,224,0.12);
      overflow: hidden;
    }
    .ed-video-outer video {
      width: 100%;
      display: block;
    }
    .ed-video-bar {
      padding: 9px 14px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-top: 1px solid rgba(240,235,224,0.1);
    }
    .ed-video-title {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(240,235,224,0.65);
      display: flex;
      align-items: center;
      gap: 7px;
    }
    .ed-video-title::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--accent, var(--red));
      flex-shrink: 0;
    }
    .ed-video-sub {
      font-size: 9px;
      color: rgba(240,235,224,0.28);
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .ed-video-wrap { position: relative; cursor: pointer; }
    .ed-video-wrap video { width: 100%; display: block; }
    .ed-video-play {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: rgba(0,0,0,0.55);
      border: 2px solid rgba(240,235,224,0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity 0.3s ease;
      pointer-events: none;
    }
    .ed-video-play::after {
      content: '';
      display: block;
      width: 0;
      height: 0;
      border-top: 9px solid transparent;
      border-bottom: 9px solid transparent;
      border-left: 15px solid rgba(240,235,224,0.85);
      margin-left: 3px;
    }
    .ed-video-wrap.playing .ed-video-play { opacity: 0; }
    .ed-video-bar-controls {
      display: flex;
      gap: 4px;
      margin-left: auto;
    }
    .ed-video-ctrl-btn {
      border: 1px solid rgba(240,235,224,0.3);
      background: none;
      cursor: pointer;
      padding: 4px 8px;
      font-family: var(--font);
      font-size: 8px;
      font-weight: 700;
      letter-spacing: 0.1em;
      color: #f0ebe0;
      transition: all 0.15s ease;
    }
    .ed-video-ctrl-btn:hover { background: rgba(240,235,224,0.12); border-color: rgba(240,235,224,0.5); }

    .ed-strip {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }
    .ed-strip img {
      width: 100%;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      display: block;
    }

    .ed-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }
    .ed-stat {
      background: rgba(240,235,224,0.06);
      border: 1px solid rgba(240,235,224,0.1);
      padding: 14px 10px;
      text-align: center;
    }
    .ed-stat-n {
      font-size: 24px;
      font-weight: 700;
      letter-spacing: -0.03em;
      color: var(--cream);
      line-height: 1;
    }
    .ed-stat-l {
      font-size: 8px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(240,235,224,0.36);
      margin-top: 5px;
    }

    .ed-lineup {
      width: 100%;
      display: block;
      background: #060304;
      border: 1px solid rgba(240,235,224,0.08);
      object-fit: cover;
    }

    .ed-map-card {
      background: rgba(240,235,224,0.06);
      border: 1px solid rgba(240,235,224,0.1);
      padding: 20px 16px 20px;
      text-align: center;
    }
    .ed-map-viewer {
      position: relative;
      overflow: hidden;
      height: 280px;
      background: rgba(240,235,224,0.03);
    }
    .ed-map-viewer svg {
      width: 100%;
      height: 100%;
      display: block;
    }
    .ed-map-label-float {
      position: absolute;
      top: 12px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--cream);
      background: rgba(68,19,30,0.88);
      border: 1px solid rgba(240,235,224,0.15);
      padding: 5px 12px;
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
      white-space: nowrap;
    }
    .ed-map-label-float.visible { opacity: 1; }
    .ed-map-countries {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: center;
      margin-top: 14px;
    }
    .ed-map-btn {
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      border: 1px solid rgba(240,235,224,0.2);
      color: rgba(240,235,224,0.58);
      background: none;
      padding: 5px 10px;
      cursor: pointer;
      transition: all 0.2s ease;
      font-family: var(--font);
    }
    .ed-map-btn:hover { border-color: rgba(240,235,224,0.4); color: var(--cream); }
    .ed-map-btn.active { background: var(--cream); color: var(--burgundy); border-color: var(--cream); }
    .ed-map-card-label {
      font-size: clamp(36px, 5vw, 52px);
      font-weight: 700;
      letter-spacing: -0.03em;
      color: var(--cream);
      margin-top: 18px;
      line-height: 1;
    }
    .ed-map-card-sub {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(240,235,224,0.36);
      margin-top: 6px;
    }

    .ed-retailers {
      padding: 0;
    }
    .ed-retailers-label {
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(240,235,224,0.3);
      margin-bottom: 10px;
    }
    .ed-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .ed-pill {
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      border: 1px solid rgba(240,235,224,0.2);
      color: rgba(240,235,224,0.58);
      padding: 5px 11px;
    }

    .ed-footer-meta {
      font-size: 10px;
      color: rgba(240,235,224,0.28);
      letter-spacing: 0.06em;
    }

    /* ── Keyboard shortcuts card ────────────── */
    .ed-kb-card {
      background: rgba(240,235,224,0.04);
      border: 1px solid rgba(240,235,224,0.1);
      padding: 24px 16px 0;
      text-align: center;
    }
    .ed-kb-headline {
      font-size: clamp(15px, 2.5vw, 20px);
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--cream);
      margin-bottom: 8px;
    }
    .ed-kb-viewer {
      position: relative;
      overflow: hidden;
    }
    .ed-kb-viewer svg {
      width: 100%;
      display: block;
    }
    .ed-kb-viewer svg rect,
    .ed-kb-viewer svg text,
    .ed-kb-viewer svg circle {
      transition: opacity 0.3s ease;
    }
    .ed-kb-cats {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: center;
      margin-bottom: 10px;
    }
    .ed-kb-btn {
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      border: 1px solid rgba(240,235,224,0.2);
      color: rgba(240,235,224,0.58);
      background: none;
      padding: 5px 10px;
      cursor: pointer;
      transition: all 0.2s ease;
      font-family: var(--font);
    }
    .ed-kb-btn:hover { border-color: rgba(240,235,224,0.4); color: var(--cream); }
    .ed-kb-btn.active { background: var(--cream); color: var(--burgundy); border-color: var(--cream); }
    .ed-kb-desc {
      font-size: 13px;
      line-height: 1.65;
      color: rgba(240,235,224,0.72);
      margin-top: 24px;
      margin-bottom: 0;
      padding: 0 12px;
      height: 44px;
      transition: opacity 0.2s ease;
    }
    .ed-kb-sub {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(240,235,224,0.28);
      margin-top: 6px;
    }

    /* No-image placeholder */
    .preview-placeholder {
      width: 100%;
      height: 200px;
      background: var(--burgundy);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 24px;
      font-size: 64px;
    }

    .preview-footer {
      padding: 20px 32px 28px;
      border-top: 1px solid rgba(240,235,224,0.12);
      flex-shrink: 0;
    }

    .preview-visit {
      display: inline-block;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--burgundy);
      background: var(--cream);
      text-decoration: none;
      padding: 13px 22px;
      transition: background 120ms ease, color 120ms ease;
    }

    .preview-visit:hover {
      background: var(--burgundy-light);
      color: var(--cream);
    }

    .preview-visit.disabled {
      opacity: 0.35;
      pointer-events: none;
    }

    .preview-beta {
      display: none;
      font-size: 11px;
      color: rgba(240,235,224,0.45);
      margin-top: 12px;
    }

    /* ── MOBILE (panel + project items) ───── */
    @media (max-width: 767px) {
      /* Extend the border lines to full width with pseudo-elements */
      .project-item {
        border-bottom-width: 1px;
        /* Content stays within natural padding */
      }

      /* Hover highlight goes full width */
      .project-item::before {
        content: '';
        position: absolute;
        inset: 0;
        left: 0;
        right: 0;
        pointer-events: none;
        background: transparent;
        transition: background 140ms ease;
      }

      #preview {
        width: 100%;
        top: 0;
        bottom: 0;
        height: 100%;
        border-left: none;
        border-top: none;
        box-shadow: none;
        transform: translateY(110%);
      }

      #preview.open {
        transform: translateY(0);
      }

      /* Swap color bar to right side on mobile */
      .project-item.current,
      .project-item.previous {
        border-left-color: transparent !important;
        border-right: 3px solid transparent;
      }
      .project-item.current { border-right-color: var(--red) !important; }
      .project-item.previous { border-right-color: var(--blue) !important; }

      /* File tab on right side, protruding above border */
      .project-item.current.section-first::before,
      .project-item.previous.section-first::before {
        left: auto !important;
        right: -3px;
        top: -1px !important;
        bottom: auto !important;
        height: auto !important;
        width: auto !important;
        display: inline-block !important;
        border-radius: 2px 2px 0 0;
      }

      /* Watch carousel — same translations as desktop, watch scaled to
         the largest size that fits within 375px (smallest common phone).
         Carousel box is shorter than the watch so the band still hangs
         outside exactly like desktop. overflow-x: hidden on the scroll
         body prevents page scroll without clipping the band or haptic waves. */
      .preview-body { overflow-x: hidden; }

      .preview-carousel {
        height: 220px;
        overflow: visible;
        margin-left: 16px;
        width: calc(100% - 32px);
      }
      .preview-carousel .carousel-watch {
        height: 268px;
      }
      .preview-carousel .carousel-watch.pos-left {
        transform: translate(-112%, -50%);
      }
      .preview-carousel .carousel-watch.pos-right {
        transform: translate(12%, -50%);
      }
      .preview-carousel .carousel-text {
        width: 48%;
      }
      .preview-carousel .carousel-text h3 {
        font-size: 14px;
      }
      .preview-carousel .carousel-text p {
        font-size: 11px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      #preview { transition: none !important; }
      .project-item { transition: none; }
    }