:root{
    --ink:#19181A;
    --ink-2:#232224;
    --cream:#F4F1E9;
    --cream-dim:#E7E2D6;
    --red:#ff3c1f;
    --red-deep:#C7300F;
    --line: rgba(244,241,233,0.12);
  }

  *{ margin:0; padding:0; box-sizing:border-box; }

  html,body{
    height:100%;
    background:var(--ink);
    color:var(--cream);
    font-family:'Inter', sans-serif;
    overflow-x:hidden;
  }

  body{
    position:relative;
    min-height:100vh;
    display:flex;
    flex-direction:column;
  }

  /* subtle ambient texture */
  body::before{
    content:"";
    position:fixed;
    inset:0;
    background:
      radial-gradient(circle at 85% 8%, rgba(255,68,35,0.10), transparent 45%),
      radial-gradient(circle at 10% 95%, rgba(255,68,35,0.06), transparent 40%);
    pointer-events:none;
    z-index:0;
  }

  header{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    padding:clamp(20px,4vw,44px) clamp(20px,5vw,64px) 0;
  }

  /* logo slot: drop your own logo file in here */
  .logo-slot{
    position:relative;
    width:240px;
    height:112px;
  }
  .logo-slot img{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:left center;
    display:block;
  }
  .logo-placeholder{
    display:none;
    width:100%;
    height:100%;
    border:1.5px dashed rgba(244,241,233,0.35);
    border-radius:8px;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    font-family:'IBM Plex Mono', monospace;
    font-size:10px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:rgba(244,241,233,0.55);
    text-align:center;
    line-height:1.4;
    gap:2px;
  }
  .logo-placeholder strong{
    font-size:11px;
    color:var(--red);
  }

  main{
    position:relative;
    z-index:2;
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:clamp(28px,5vw,56px) clamp(20px,5vw,64px);
    gap:clamp(20px,3vw,28px);
  }

  .stage{
    width:100%;
    max-width:1180px;
    aspect-ratio:2/1;
    background:var(--cream);
    border-radius:22px;
    position:relative;
    overflow:hidden;
    box-shadow:0 30px 80px -30px rgba(0,0,0,0.6);
  }

  .slide{
    position:absolute;
    inset:0;
    opacity:0;
    transform:translateX(24px);
    transition:opacity .6s ease, transform .6s ease;
    pointer-events:none;
  }
  .slide.active{
    opacity:1;
    transform:translateX(0);
    pointer-events:auto;
  }

  /* photo slot: drop slide-N.jpg beside this file to fill it */
  .slide img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .slide .photo-placeholder{
    display:none;
    width:100%;
    height:100%;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    border:2px dashed rgba(25,24,26,0.18);
    box-sizing:border-box;
  }
  .slide .photo-placeholder strong{
    font-family:'IBM Plex Mono', monospace;
    font-size:clamp(13px,1.6vw,16px);
    color:var(--red-deep);
    letter-spacing:.04em;
  }
  .slide .photo-placeholder span{
    font-family:'IBM Plex Mono', monospace;
    font-size:clamp(11px,1.3vw,13px);
    color:#8a877c;
  }

  .slide .caption{
    position:absolute;
    left:0; right:0; bottom:0;
    padding:22px clamp(16px,3vw,32px);
    background:linear-gradient(to top, rgba(0,0,0,0.55), transparent);
    text-align:left;
  }
  .slide .caption .eyebrow{
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--red);
    margin-bottom:4px;
  }
  .slide .caption h2{
    font-family:'Anton', sans-serif;
    font-weight:400;
    color:var(--cream);
    font-size:clamp(18px,2.6vw,30px);
    text-transform:uppercase;
    line-height:1.05;
  }

  .slash-accent{
    position:absolute;
    top:0;
    right:14%;
    width:3px;
    height:100%;
    background:var(--red);
    transform:skewX(-18deg);
    opacity:.9;
    z-index:3;
    pointer-events:none;
  }

  .dots{
    display:flex;
    gap:8px;
  }
  .dot{
    width:34px;
    height:6px;
    border-radius:3px;
    background:var(--cream-dim);
    opacity:.35;
    border:none;
    cursor:pointer;
    padding:0;
    position:relative;
    overflow:hidden;
    transition:opacity .3s ease;
  }
  .dot::after{
    content:"";
    position:absolute;
    inset:0;
    background:var(--red);
    transform:scaleX(0);
    transform-origin:left;
  }
  .dot.active{ opacity:1; }
  .dot.active::after{
    transform:scaleX(1);
    transition:transform 5s linear;
  }
  .dot:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }

  .status{
    text-align:center;
    margin-top:6px;
  }
  .status .badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-family:'IBM Plex Mono', monospace;
    font-size:clamp(18px,3vw,26px);
    color:var(--red);
    letter-spacing:.01em;
  }
  .status .pulse{
    width:9px;
    height:9px;
    border-radius:50%;
    background:var(--red);
    box-shadow:0 0 0 0 rgba(255,68,35,.6);
    animation:pulse 2s infinite;
  }
  @keyframes pulse{
    0%{ box-shadow:0 0 0 0 rgba(255,68,35,.55); }
    70%{ box-shadow:0 0 0 12px rgba(255,68,35,0); }
    100%{ box-shadow:0 0 0 0 rgba(255,68,35,0); }
  }

  footer{
    position:relative;
    z-index:2;
    padding:0 clamp(20px,5vw,64px) clamp(24px,4vw,40px);
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
  }
  footer a{
    color:var(--cream);
    text-decoration:none;
    font-family:'IBM Plex Mono', monospace;
    font-size:clamp(13px,1.6vw,16px);
    opacity:.85;
    border-bottom:1px solid transparent;
    transition:border-color .2s ease, opacity .2s ease;
  }
  footer a:hover{ opacity:1; border-color:var(--red); }
  footer .meta{
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    color:var(--cream);
    opacity:.4;
  }

  @media (prefers-reduced-motion: reduce){
    .slide, .dot::after, .pulse{ transition:none; animation:none; }
  }