@font-face { font-family:'CSDiegoMono'; font-style:normal; src:url('../fonts/CS Diego Mono/CSDiegoMono-Regular.otf') format('opentype'), url('../fonts/CS Diego Mono/CSDiegoMono-Regular.ttf') format('truetype'); }
@font-face { font-family:'CSDiegoMono'; font-style:italic; src:url('../fonts/CS Diego Mono/CSDiegoMono-Italic.otf') format('opentype'), url('../fonts/CS Diego Mono/CSDiegoMono-Italic.ttf') format('truetype'); }
@font-face { font-family:'VT323'; src:url('data:font/woff2;base64,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') format('woff2'); }
    *,*::before,*::after { box-sizing:border-box; }
    html,body { margin:0; padding:0; background-color:#f5f4f1; background-image:radial-gradient(circle,rgb(170,166,160) 1.5px,transparent 1.5px); background-size:20px 20px; font-family:'VT323',monospace; color:rgb(26,24,20); min-height:100vh; cursor:crosshair; }

    /* NAV */
    #nav { position:fixed; top:0; left:0; right:0; height:40px; background:rgba(245,244,241,0.92); backdrop-filter:blur(4px); border-bottom:1px solid #ccc9c3; display:flex; align-items:center; padding:0 20px; gap:20px; z-index:100; }
    #nav a { font-size:18px; color:rgb(110,106,100); text-decoration:none; }
    #nav a:hover { color:rgb(26,24,20); }
    /* Right-side nav links */
    .nav-right { margin-left:auto; display:flex; align-items:center; gap:16px; flex-shrink:0; }
    .nav-right a { font-size:15px; line-height:20px; color:rgb(110,106,100); text-decoration:none; letter-spacing:.04em; }
    .nav-right a:hover { color:rgb(26,24,20); }
    .nav-right .nr-sep { color:#ccc9c3; font-size:13px; }
    #nav .sep { color:#ccc9c3; }
    #nav .project-title { color:rgb(26,24,20); font-size:18px; }

    /* ── Hamburger toggle (hidden on desktop) ── */
    .nav-toggle-input { position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
    .nav-hamburger { display:none; }

    @media (max-width:767px) {
      /* Tighten nav, hide separator, truncate title */
      #nav { gap:8px; padding:0 16px; }
      #nav .sep { display:none; }
      #nav .project-title { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; font-size:16px; }

      /* Show hamburger button */
      .nav-hamburger {
        display:flex; align-items:center; justify-content:center;
        margin-left:auto; width:40px; height:40px; flex-shrink:0;
        cursor:pointer; font-family:'VT323',monospace; font-size:24px;
        color:rgb(26,24,20); user-select:none; -webkit-user-select:none;
      }

      /* Collapse nav-right off-screen by default */
      .nav-right {
        display:none; margin-left:0; flex-direction:column; gap:0;
        position:absolute; top:40px; right:0; z-index:200; min-width:140px;
        background:rgba(245,244,241,0.97); backdrop-filter:blur(4px);
        border:1px solid #ccc9c3; border-top:none;
        box-shadow:4px 4px 12px rgba(0,0,0,0.10);
      }

      /* Open state */
      .nav-toggle-input:checked ~ .nav-right { display:flex; }

      /* Vertical stacked links */
      .nav-right a { padding:10px 20px; border-bottom:1px solid #ccc9c3; font-size:18px; display:block; }
      .nav-right a:last-child { border-bottom:none; }
      .nav-right .nr-sep { display:none; }
    }

    /* CONTENT */
    #content { padding:60px 40px 80px; max-width:1260px; margin:0 auto; }

    /* BLOCK */
    .block { margin-bottom:20px; background:rgba(245,244,241,0.95); border:1px solid #ccc9c3; box-shadow:4px 4px 12px rgba(0,0,0,0.10); }

    /* ACCENT STRIPE */
    .accent-stripe { height:20px; }

    /* HERO */
    #hero-block { margin-top:0px; }
    #hero-block .inner { padding:40px; }
    #hero-block h1 { font-size:48px; line-height:60px; margin:0 0 20px; letter-spacing:.02em; }
    #hero-block .subtitle { font-size:22px; line-height:40px; color:rgb(110,106,100); margin-bottom:40px; }
    .tag-row { display:flex; flex-wrap:wrap; gap:10px; padding:0 0 20px; }
    .tag { height:20px; display:inline-flex; align-items:center; padding:0 12px; border:1px solid #ccc9c3; font-size:15px; color:rgb(110,106,100); letter-spacing:.05em; }
    .meta-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); border-top:1px solid #ccc9c3; }
    .meta-item { padding:20px; border-right:1px solid #ccc9c3; }
    .meta-item:last-child { border-right:none; }
    .meta-label { font-size:13px; line-height:20px; color:rgb(110,106,100); text-transform:uppercase; letter-spacing:.1em; display:block; }
    .meta-value { font-size:14px; line-height:20px; color:rgb(26,24,20); font-family:'CSDiegoMono', monospace; }

    /* SECTION LABEL */
    .section-label { height:40px; display:flex; align-items:center; padding:0 20px; border-bottom:1px solid #ccc9c3; font-size:18px; text-transform:uppercase; letter-spacing:.12em; color:rgb(26,24,20); }

    /* TEXT */
    .text-block .content { padding:20px; font-size:16px; line-height:20px; color:rgb(26,24,20); font-family:'CSDiegoMono', monospace; }
    .text-block .content p { margin:0 0 20px; line-height:20px; }
    .text-block .content p:last-child { margin-bottom:0; }
    .text-block em { font-style:italic; }
    .text-block strong { font-weight:bold; letter-spacing:.01em; }
    .text-block a { color:rgb(26,24,20); text-decoration:underline; text-underline-offset:3px; }
    .text-block a:hover { color:rgb(110,106,100); }

    /* VIDEO ROW (free-floating, like image-row) */
    .video-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; margin:0 0 20px; }
    .single-video-free { margin:0 0 20px; }
    .vid-card { display:flex; flex-direction:column; overflow:hidden; border:1px solid #ccc9c3; box-shadow:4px 4px 12px rgba(0,0,0,0.08); background:rgba(245,244,241,0.95); }
    .vid-card video { width:100%; display:block; aspect-ratio:16/9; object-fit:cover; }
    .vid-caption { min-height:60px; flex:1; display:flex; flex-direction:column; justify-content:flex-start; padding:20px; border-top:1px solid #ccc9c3; background:rgba(245,244,241,0.95); }
    .vid-caption-title { font-size:18px; line-height:20px; color:rgb(26,24,20); }
    .vid-caption-sub { font-size:11px; line-height:20px; color:rgb(110,106,100); font-family:'CSDiegoMono', monospace; }

    /* IMAGE ROW (free-floating, centered) */
    .image-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:20px; margin:0 0 20px; }
    .img-card { height:160px; overflow:hidden; border:1px solid #ccc9c3; box-shadow:4px 4px 12px rgba(0,0,0,0.08); }
    .img-card img { width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in; }
    .img-card.portrait { height:360px; }
    .ph-card { height:160px; background:rgb(210,208,204); display:flex; align-items:center; justify-content:center; border:1px solid #ccc9c3; }
    .ph-card .fname { font-size:13px; line-height:20px; color:rgb(130,126,120); padding:0 8px; text-align:center; word-break:break-all; }



    /* Vimeo cells rendered inline via JS using flex row — no static grid CSS needed */

    /* SOUNDCLOUD */
    .soundcloud-wrap iframe { display:block; width:100%; height:180px; border:none; }

    /* 3D MODEL */
    .model-3d-wrap iframe { display:block; width:100%; height:500px; border:none; background:#000; }

    /* SINGLE IMAGE */
    .single-image-free { margin:0 0 20px; }
    .single-image-free img { width:100%; height:auto; display:block; cursor:zoom-in; border:1px solid #ccc9c3; box-shadow:4px 4px 12px rgba(0,0,0,0.08); }

    /* PLACEHOLDER */
    .placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:20px; min-height:160px; background:rgb(220,218,214); }
    .ph-type { font-size:22px; letter-spacing:.15em; color:rgb(110,106,100); text-transform:uppercase; }
    .ph-caption { font-size:18px; line-height:20px; color:rgb(150,146,140); margin-top:20px; max-width:400px; }
    .ph-src { font-size:13px; line-height:20px; color:rgb(170,166,160); margin-top:20px; word-break:break-all; max-width:500px; }

    /* ── STRUCTURED LAYOUT SECTIONS ── */

    /* QUOTE */
    .quote-block { padding:40px; border-left:4px solid #ccc9c3; }
    .quote-text { font-size:20px; line-height:40px; margin:0 0 20px; font-family:'CSDiegoMono', monospace; }
    .quote-attr { font-size:18px; line-height:20px; color:rgb(110,106,100); display:block; }

    /* STAT ROW */
    .stat-block { margin:0 0 20px; }
    .stat-row { display:flex; width:100%; gap:20px; }
    .stat-item { flex:1; padding:40px 20px; text-align:center; border:1px solid #ccc9c3; box-shadow:4px 4px 12px rgba(0,0,0,0.10); background:rgba(245,244,241,0.95); }
    .stat-number { font-size:60px; line-height:60px; display:block; }
    .stat-label { font-size:14px; line-height:20px; display:block; margin-top:20px; font-family:'CSDiegoMono', monospace; }
    .stat-body { font-size:11px; line-height:20px; display:block; margin-top:20px; color:rgb(110,106,100); font-family:'CSDiegoMono', monospace; }

    /* CARD GRID */
    .card-grid { display:grid; border-top:1px solid #ccc9c3; }
    .card-grid.cols-2 { grid-template-columns:repeat(2,1fr); }
    .card-grid.cols-3 { grid-template-columns:repeat(3,1fr); }
    .card-grid.cols-auto { grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
    .card-item { padding:20px; border-right:1px solid #ccc9c3; border-bottom:1px solid #ccc9c3; }
    .card-grid.cols-2 .card-item:nth-child(2n) { border-right:none; }
    .card-grid.cols-3 .card-item:nth-child(3n) { border-right:none; }
    .card-heading { font-size:20px; line-height:20px; display:block; margin-bottom:20px; }
    .card-body { font-size:14px; line-height:20px; color:rgb(110,106,100); font-family:'CSDiegoMono', monospace; }

    /* METRIC ROW */
    .metric-block { margin:0 0 20px; }
    .metric-row { display:flex; width:100%; gap:20px; }
    .metric-item-el { flex:1; padding:40px 20px; text-align:center; border:1px solid #ccc9c3; box-shadow:4px 4px 12px rgba(0,0,0,0.10); background:rgba(245,244,241,0.95); }
    .metric-number { font-size:80px; line-height:80px; display:block; }
    .metric-label { font-size:14px; line-height:20px; display:block; margin-top:20px; color:rgb(110,106,100); font-family:'CSDiegoMono', monospace; }

    /* FEATURE LIST */
    .feature-list { padding:20px; display:grid; gap:20px; }
    .feature-item-el { padding:0 0 0 20px; border-left:3px solid #ccc9c3; }
    .feature-heading { font-size:20px; line-height:20px; display:block; margin-bottom:20px; }
    .feature-body { font-size:14px; line-height:20px; color:rgb(110,106,100); font-family:'CSDiegoMono', monospace; }

    /* PROTOTYPE BLOCK */
    .prototype-block-el { padding:20px; }
    .prototype-tag-el { display:inline-block; height:20px; line-height:20px; padding:0 12px; border:1px solid #ccc9c3; font-size:13px; text-transform:uppercase; letter-spacing:.1em; color:rgb(110,106,100); margin-bottom:20px; }
    .prototype-heading { font-size:28px; line-height:40px; margin:0 0 20px; }
    .prototype-body { font-size:16px; line-height:20px; color:rgb(110,106,100); margin-bottom:20px; font-family:'CSDiegoMono', monospace; }
    .prototype-features-grid { display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid #ccc9c3; margin-top:20px; }
    .prototype-feature { padding:20px; border-right:1px solid #ccc9c3; border-bottom:1px solid #ccc9c3; }
    .prototype-feature:nth-child(2n) { border-right:none; }
    .prototype-feature-heading { font-size:18px; line-height:20px; display:block; margin-bottom:20px; }
    .prototype-feature-body { font-size:11px; line-height:20px; color:rgb(110,106,100); font-family:'CSDiegoMono', monospace; }

    /* SKILL LIST */
    .skill-list-el { padding:20px; }
    .skill-item-el { display:grid; grid-template-columns:260px 1fr; gap:40px; padding:20px 0; border-bottom:1px solid #ccc9c3; }
    .skill-item-el:last-child { border-bottom:none; }
    .skill-title { font-size:20px; line-height:20px; }
    .skill-desc { font-size:14px; line-height:20px; color:rgb(110,106,100); font-family:'CSDiegoMono', monospace; }

    /* FOOTER */
    #footer { text-align:center; padding:40px 20px; }
    #footer a { font-size:20px; line-height:20px; color:rgb(110,106,100); text-decoration:none; border-bottom:1px solid #ccc9c3; padding-bottom:2px; }
    #footer a:hover { color:rgb(26,24,20); }
    #loading { padding:80px 40px; font-size:22px; color:rgb(110,106,100); text-align:center; }

    /* ── LIGHTBOX ── */
    #lb { display:none; position:fixed; inset:0; z-index:1000; align-items:center; justify-content:center; }
    #lb.open { display:flex; }
    #lb-bg { position:absolute; inset:0; background:rgba(26,24,20,0.93); }
    #lb-img-wrap { position:relative; z-index:1; max-width:calc(100vw - 160px); max-height:calc(100vh - 160px); display:flex; align-items:center; justify-content:center; }
    #lb-img { display:block; max-width:100%; max-height:calc(100vh - 160px); object-fit:contain; box-shadow:0 0 80px rgba(0,0,0,0.6); }
    #lb-close,#lb-prev,#lb-next { position:absolute; z-index:2; width:40px; height:40px; display:flex; align-items:center; justify-content:center; background:rgba(245,244,241,0.08); border:1px solid rgba(245,244,241,0.25); color:rgb(245,244,241); font-family:'VT323',monospace; font-size:22px; cursor:pointer; }
    #lb-close:hover,#lb-prev:hover,#lb-next:hover { background:rgba(245,244,241,0.18); }
    #lb-close { top:20px; right:20px; }
    #lb-prev { left:20px; top:50%; transform:translateY(-50%); }
    #lb-next { right:20px; top:50%; transform:translateY(-50%); }
    #lb-caption { position:absolute; bottom:40px; left:0; right:0; text-align:center; z-index:2; font-family:'VT323',monospace; font-size:18px; line-height:20px; color:rgb(245,244,241); pointer-events:none; }
    #lb-counter { position:absolute; bottom:20px; left:0; right:0; text-align:center; z-index:2; font-family:'VT323',monospace; font-size:15px; line-height:20px; color:rgba(245,244,241,0.5); pointer-events:none; }
    /* image cursor set inline on .image-row img and .single-image-free img */
  
    /* FEATURE SHOWCASE (2-col: text + phone screenshot) */
    .fs-grid { display:grid; grid-template-columns:1fr 260px; gap:40px; padding:40px; align-items:center; }
    .fs-grid.reverse { grid-template-columns:260px 1fr; }
    .fs-heading { font-size:28px; line-height:40px; margin:0 0 20px; }
    .fs-body { font-size:20px; line-height:20px; color:rgb(110,106,100); margin-bottom:20px; }
    .fs-list { list-style:none; margin-top:20px; }
    .fs-list li { padding-left:20px; position:relative; font-size:18px; line-height:20px; color:rgb(110,106,100); margin-bottom:20px; }
    .fs-list li::before { content:'→'; position:absolute; left:0; color:rgb(26,24,20); }
    .fs-img { width:100%; height:auto; object-fit:contain; cursor:zoom-in; border:1px solid #ccc9c3; box-shadow:4px 4px 12px rgba(0,0,0,0.08); }
  
    /* 2-col hero with image */
    .hero-2col { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; padding:40px; }
    @media (max-width: 800px) { .hero-2col { grid-template-columns:1fr; } }
    /* AUTOPLAY VIDEO (full-width, no controls) */
    .video-autoplay-wrap { margin:0 0 20px; }
    .video-autoplay-wrap a { display:block; }
    .video-autoplay-wrap video { width:100%; height:auto; display:block; border:1px solid #ccc9c3; box-shadow:4px 4px 12px rgba(0,0,0,0.08); }

    /* VIDEO PAIR (2 autoplay videos side by side) */
    .video-pair-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:0 0 20px; }
    .video-pair-row video { width:100%; height:460px; object-fit:cover; display:block; border:1px solid #ccc9c3; box-shadow:4px 4px 12px rgba(0,0,0,0.08); }

    /* ── MOBILE ────────────────────────────────────────────────────────────── */
    @media (max-width:767px) {

      /* Content padding — higher specificity wins over page-specific #content rules */
      body #content { padding-left:16px; padding-right:16px; padding-bottom:40px; }

      /* Case study hero */
      #hero-block .inner { padding:20px; }
      #hero-block h1 { font-size:32px; line-height:40px; }
      #hero-block .subtitle { font-size:18px; line-height:24px; margin-bottom:20px; }
      .meta-item { padding:12px; }

      /* Stat row — stack vertically */
      .stat-row { flex-direction:column; gap:10px; }
      .stat-item { padding:20px; }
      .stat-number { font-size:48px; line-height:48px; }

      /* Metric row — stack vertically */
      .metric-row { flex-direction:column; gap:10px; }
      .metric-item-el { padding:20px; }
      .metric-number { font-size:56px; line-height:56px; }

      /* Card grids — single column */
      .card-grid.cols-2,
      .card-grid.cols-3 { grid-template-columns:1fr; }
      .card-item { border-right:none !important; }

      /* Skill list — stack title above description */
      .skill-item-el { grid-template-columns:1fr; gap:8px; }

      /* Prototype features grid — single column */
      .prototype-features-grid { grid-template-columns:1fr; }
      .prototype-feature { border-right:none !important; }

      /* Feature showcase — stack image below text */
      .fs-grid,
      .fs-grid.reverse { grid-template-columns:1fr; padding:20px; gap:16px; }

      /* Video pair — stack */
      .video-pair-row { grid-template-columns:1fr; }
      .video-pair-row video { height:auto; aspect-ratio:16/9; }

      /* 3D model viewer — shorter on phone */
      .model-3d-wrap iframe { height:280px; }

      /* Image rows — smaller min card size */
      .image-row { grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }
      .img-card { height:120px; }
      .img-card.portrait { height:240px; }

      /* Blog post pages */
      .post-header { padding:20px; }
      .post-body { padding:20px; }
      .post-title { font-size:32px; line-height:40px; }

      /* Music page section headers + album blocks */
      .mu-section__header { padding:12px 20px; }
      .mu-album-block { padding:20px; }
      .mu-album-grid { gap:20px; }

      /* Film page */
      .fp-heading { padding:12px 20px; }

      /* Lightbox — tighter on small screens */
      #lb-img-wrap { max-width:calc(100vw - 60px); max-height:calc(100vh - 80px); }
      #lb-img { max-height:calc(100vh - 80px); }
      #lb-prev { left:8px; }
      #lb-next { right:8px; }
      #lb-close { top:8px; right:8px; }
    }