:root{
    --ink: #070707;
    --paper: #efeeec;
    --paper-dim: rgba(239,238,236,0.74);
    --paper-faint: rgba(239,238,236,0.4);
    --teal: #3ea6a0;
    --teal-dim: rgba(62,166,160,0.5);
    --magenta: #e2137a;
    --map-warm: #93805f;
    --map-warm-2: #a97456;
    --map-rose: #a17d78;
    --map-gold: #c2a15a;
    --map-rust: #ad6b4a;
    --line: rgba(239,238,236,0.14);
    --line-strong: rgba(239,238,236,0.28);
  }

  *,*::before,*::after{ box-sizing: border-box; }

  html,body{
    margin:0; padding:0; height:100%; width:100%;
    background: var(--ink); color: var(--paper);
    font-family: 'Cormorant Garamond', serif;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
  }

  h1,h2,h3{
    font-family:'Libre Bodoni', serif; font-weight:600; margin:0;
    letter-spacing:-0.008em;
    text-transform: uppercase;
  }

  /* film grain */
  .grain{
    position:fixed; inset:-50px; pointer-events:none; z-index:40;
    opacity:0.05; mix-blend-mode: overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }

  /* persistent wordmark */
  .mark{
    position:fixed; top:26px; left:9vw; z-index:30;
    pointer-events:none; transition: opacity .4s ease;
  }
  .mark span{
    display:block; font-family:'Abril Fatface', serif; font-weight:400;
    font-size:16px; line-height:0.92; letter-spacing:0.01em;
    color: var(--paper-dim);
    transform: scaleX(0.88); transform-origin: left top;
  }
  .mark.hide-mark{ opacity:0; }

  .counter{
    position:fixed; bottom:26px; right:9vw; z-index:30;
    font-family:'Inter', sans-serif;
    font-size:12.5px; color:var(--paper-faint); font-variant-numeric: tabular-nums;
    pointer-events:none;
  }
  .counter b{ color:var(--paper-dim); font-weight:500; }

  .back-link{
    position:fixed; top:26px; right:9vw; z-index:30;
    font-family:'Inter', sans-serif; font-size:12.5px; color:var(--paper-dim);
    text-decoration:none; letter-spacing:0.01em;
    border-bottom:1px solid var(--line-strong); padding-bottom:2px;
    transition: color .2s ease, border-color .2s ease;
  }
  .back-link:hover, .back-link:focus-visible{ color:var(--paper); border-color:var(--paper-dim); }

  .progress-track{
    position:fixed; left:0; bottom:0; width:100%; height:2px; z-index:30;
    background: var(--line);
  }
  .progress-fill{
    height:100%; width:0%; background: var(--teal);
    transition: width .7s cubic-bezier(.65,0,.35,1);
  }

  /* deck */
  .deck{ position:relative; width:100vw; height:100vh; overflow:hidden; }
  .track{
    display:flex; height:100%;
    transition: transform .85s cubic-bezier(.65,0,.35,1);
    will-change: transform;
  }
  .slide{
    position:relative; flex:0 0 100vw; width:100vw; height:100vh;
    display:flex; align-items:center;
    overflow:hidden;
  }

  /* content column: generous, asymmetric padding so the reading
     column doesn't get squeezed by padding on the side with nothing in it */
  .slide__content{
    position:relative; z-index:2;
    max-width: 46vw;
    min-width: 320px;
    padding-left: clamp(28px, 9vw, 170px);
    padding-right: clamp(20px, 4vw, 64px);
  }
  .slide--right .slide__content{
    margin-left:auto; margin-right:8vw; text-align:left;
  }

  .slide__title{
    font-size: clamp(2.2rem, 4.6vw, 4rem);
    line-height:1.04; letter-spacing:-0.01em;
    margin-bottom: 28px;
  }
  .slide__title.title-cover{
    font-size: clamp(3rem, 7.6vw, 6.6rem);
    text-transform: uppercase; letter-spacing:-0.005em; line-height:0.94;
  }
  .slide__title.teal{ color: var(--teal); }
  .slide__quote{ text-wrap: pretty;
    font-family:'Libre Bodoni', serif; font-weight:500;
    font-size: clamp(1.6rem, 2.9vw, 2.5rem);
    line-height:1.34; letter-spacing:-0.004em;
    max-width: 42ch;
  }
  .slide__body{
    font-size: clamp(1.2rem, 1.5vw, 1.45rem);
    line-height:1.62; color: var(--paper-dim);
    max-width: 46ch; font-weight:400;
  }

  .budget-drops{ margin-top: 26px; max-width: 46ch; }
  .budget-drop{ border-top:1px solid var(--line); }
  .budget-drop:last-of-type{ border-bottom:1px solid var(--line); }
  .budget-drop summary{
    cursor:pointer; list-style:none;
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:16px 0;
    font-family:'Libre Bodoni', serif; font-weight:500;
    font-size: clamp(1.05rem, 1.2vw, 1.25rem); color: var(--paper);
  }
  .budget-drop summary::-webkit-details-marker{ display:none; }
  .budget-drop summary::marker{ content:""; }
  .budget-drop .chev{
    width:9px; height:9px; flex:0 0 auto;
    border-right:1px solid var(--paper-dim); border-bottom:1px solid var(--paper-dim);
    transform: rotate(45deg); transition: transform .3s ease;
  }
  .budget-drop[open] .chev{ transform: rotate(-135deg); }
  .budget-drop .drop-body{
    padding: 0 0 18px; margin:0;
    font-size: clamp(0.95rem, 1vw, 1.05rem); font-style:italic;
    color: var(--paper-faint); max-width:40ch;
  }
  .slide__meta{
    margin-top:22px; font-size: clamp(1.02rem,1.05vw,1.15rem);
    color:var(--teal); letter-spacing:0.01em; font-weight:500;
  }
  .slide__note{
    margin-top:18px; font-size: clamp(1.02rem,1.05vw,1.15rem);
    color:var(--paper-faint); font-style:italic;
  }
  .slide__body.ask{ margin-top: 1.6em; }

  .team-list{ margin: 6px 0 0; }
  .team-row{
    font-family:'Cormorant Garamond', serif; font-weight:400;
    font-size: clamp(1.2rem, 1.5vw, 1.45rem);
    line-height:1.9; color: var(--paper-dim); margin:0;
  }
  .team-row strong{ color: var(--paper); font-weight:700; }

  .slide__tag{
    margin-top:22px; font-family:'Libre Bodoni', serif; font-weight:500;
    font-size: clamp(1.4rem,2.1vw,1.9rem); color: var(--teal);
  }

  /* entrance animation, first slide only */
  .slide[data-index="0"] .reveal{
    opacity:0; transform: translateY(16px);
    animation: rise .9s cubic-bezier(.2,.7,.3,1) forwards;
  }
  .slide[data-index="0"] .reveal:nth-child(2){ animation-delay:.12s; }
  .slide[data-index="0"] .reveal:nth-child(3){ animation-delay:.24s; }
  @keyframes rise{ to{ opacity:1; transform:translateY(0); } }

  /* --- background motifs, kept quiet --- */
  .bg{ position:absolute; inset:0; z-index:1; }

  .bg-window::before,.bg-window::after{
    content:""; position:absolute; background:var(--line);
  }
  .bg-window::before{ top:0; bottom:0; left:62%; width:1px; }
  .bg-window::after{ left:0; right:0; top:46%; height:1px; }
  .bg-window .glow{
    position:absolute; left:58%; bottom:-10%; width:60%; height:70%;
    background: radial-gradient(circle at 30% 100%, rgba(62,166,160,0.14), transparent 65%);
  }

  .bg-plates i{
    position:absolute; border:1px solid var(--line-strong); border-radius:50%;
  }
  .bg-plates i:nth-child(1){ width:220px; height:220px; top:8%; right:6%; }
  .bg-plates i:nth-child(2){ width:150px; height:150px; top:20%; right:22%; opacity:.7; }
  .bg-plates i:nth-child(3){ width:90px; height:90px; top:12%; right:30%; opacity:.5; }

  .bg-wedge::before{
    content:""; position:absolute; left:0; top:0; bottom:0; width:min(24vw, 260px);
    background: var(--magenta);
    clip-path: polygon(0 0, 100% 0, 46% 100%, 0 100%);
  }

  .bg-circle .vignette{
    position:absolute; left:66%; top:50%; width:520px; height:520px; margin:-260px 0 0 -260px;
    border-radius:50%;
    background: radial-gradient(circle, rgba(62,166,160,0.16), transparent 70%);
  }
  .bg-circle .ring{
    position:absolute; left:66%; top:50%; width:260px; height:260px; margin:-130px 0 0 -130px;
    border-radius:50%; border:1px solid var(--line-strong);
  }

  .bg-light{
    background: radial-gradient(ellipse 55% 90% at 0% 40%, rgba(239,238,236,0.09), transparent 60%);
  }
  .bg-light::after{
    content:""; position:absolute; inset:0;
    background: linear-gradient(100deg, rgba(62,166,160,0.08), transparent 55%);
  }

  .bg-grid{
    background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 78% 50%, black 10%, transparent 70%);
            mask-image: radial-gradient(ellipse 70% 70% at 78% 50%, black 10%, transparent 70%);
    opacity:.55;
  }

  /* world map, slide 10 */
  .bg-map{
    display:flex; align-items:center; justify-content:flex-end;
    padding-right: 3vw;
  }
  .bg-map svg{ width:min(58vw, 960px); height:auto; opacity:.9; }
  .bg-map text{
    font-family:'Inter', sans-serif;
    font-size:12.5px;
    font-weight:500;
    letter-spacing:0.02em;
    fill: var(--paper);
  }
  .map-badge{
    fill: var(--ink);
    opacity: 0.55;
  }
  .map-key{
    position:absolute; left:auto; right:6vw; bottom:9%; z-index:2;
    display:flex; flex-wrap:wrap; gap:10px 20px; max-width:34vw;
    font-family:'Inter', sans-serif; font-size:12px; color:var(--paper-faint);
  }
  .map-key span{ display:flex; align-items:center; gap:7px; }
  .map-key i{ width:8px; height:8px; border-radius:50%; display:inline-block; }

  /* two-up grid, reused for characters + technique blocks */
  .duo{
    display:grid; grid-template-columns: 1fr 1fr; gap: 56px;
    max-width: 66vw;
  }
  .duo h3{ font-size: clamp(1.4rem,1.8vw,1.7rem); margin-bottom:8px; }
  .duo .credit{
    display:block; font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:500;
    font-size: clamp(1rem,1vw,1.1rem); color:var(--teal); margin-bottom:12px;
  }
  .duo p{ font-size: clamp(1.1rem,1.25vw,1.3rem); line-height:1.58; color:var(--paper-dim); max-width:36ch; }
  .duo .who + .who{ border-left:1px solid var(--line); padding-left:56px; }

  .avatar{
    width:88px; height:88px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    margin-bottom:18px;
    font-family:'Libre Bodoni', serif; font-weight:600;
    font-size:1.3rem; letter-spacing:0.02em; color:var(--paper);
    background:
      radial-gradient(circle at 35% 28%, rgba(62,166,160,0.4), rgba(62,166,160,0.06) 62%, transparent 75%),
      var(--ink);
    border:1px solid var(--line-strong);
  }

  /* parallel-line device slide */
  .stack{ margin: 4px 0 28px; }
  .stack div{
    font-family:'Libre Bodoni', serif; font-weight:500;
    font-size: clamp(1.5rem,2.6vw,2.1rem);
    padding: 15px 0; border-top: 1px solid var(--line);
  }
  .stack div:last-child{ border-bottom:1px solid var(--line); }

  /* nav arrows */
  .nav-btn{
    position:fixed; top:0; height:100%; width:9vw; min-width:64px; z-index:30;
    display:flex; align-items:center; justify-content:center;
    background:transparent; border:none; cursor:pointer; color:var(--paper);
    opacity:.4; transition: opacity .25s ease;
  }
  .nav-btn:hover, .nav-btn:focus-visible{ opacity:1; }
  .nav-btn:focus-visible{ outline: 1px solid var(--teal); outline-offset:-6px; }
  .nav-btn[disabled]{ opacity:.08; pointer-events:none; }
  .nav-prev{ left:0; }
  .nav-next{ right:0; }
  .nav-btn svg{ width:22px; height:22px; }

  .sr-only{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }

  @media (max-width: 760px){
    .mark{ top:20px; left:6vw; }
    .counter{ bottom:20px; right:6vw; }
    .back-link{ top:20px; right:6vw; font-size:11px; }

    /* safe zone: keep slide content clear of the fixed mark / back-link
       (top) and counter / progress bar (bottom), and let a slide's own
       content scroll internally if it's taller than the space left */
    .slide{
      padding: 88px 0 72px;
    }
    .slide__content{
      max-width: 100% !important;
      max-height: calc(100vh - 160px);
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      padding-left: 7vw; padding-right: 7vw;
    }
    .slide__content::-webkit-scrollbar{ display:none; }

    .slide--right .slide__content{ margin-left:0; margin-right:0; }
    .slide__body, .slide__quote{ max-width: 100%; }
    .nav-btn{ width:15vw; min-width:44px; }
    .duo{ grid-template-columns: 1fr; gap:28px; max-width:100%; }
    .duo p{ max-width:100%; }
    .duo .who + .who{ border-left:none; padding-left:0; border-top:1px solid var(--line); padding-top:28px; }
    .slide__title.title-cover{
      font-size: clamp(2.6rem, 12vw, 4.5rem);
      line-height: 1.06;
    }
    .bg-map{ justify-content:center; padding-right:0; opacity:.7; }
    .bg-map svg{ width:90vw; }
    .map-key{ display:none; }
  }

  @media (prefers-reduced-motion: reduce){
    .track{ transition:none; }
    .slide[data-index="0"] .reveal{ animation:none; opacity:1; transform:none; }
    .progress-fill{ transition:none; }
  }