:root {
    --bg: #f3e4c9;
    --peach: #e8a994;
    --teal: #7a9ba6;
    --red: #d63a2f;
    --red-dark: #6e1f1a;
    --ink: #1f1a14;
    --ink-faded: rgba(31, 26, 20, 0.5);
  }

  * { box-sizing: border-box; }

  html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    font-family: 'JetBrains Mono', monospace;
    color: var(--ink);
    min-height: 100vh;
  }

  body {
    display: grid;
    place-items: center;
    padding: 2rem 1rem;
  }

  /* Particle field — fixed full-viewport layer behind the poster */
  .particles {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
  }
 
  .particle {
    position: absolute;
    /* All particles start at screen center; animation translates them outward. */
    left: 50%;
    top: 50%;
    width: 3px;
    height:3px;
    border-radius: 50%;
    background-color: var(--teal);
    /* Per-particle values come from JS as CSS custom properties. */
    animation: radiate var(--duration, 4s) linear infinite;
    animation-delay: var(--delay, 0s);
  }
 
  @keyframes radiate {
    from {
      /* rotate() spins the coordinate system to the particle's angle,
         then translateX moves along that rotated x-axis — so each particle
         travels in its own direction outward from center. */
      transform: rotate(var(--angle, 0deg)) translateX(0);
      opacity: 0;
    }
    8%, 92% {
      opacity: 1;
    }
    to {
      transform: rotate(var(--angle, 0deg)) translateX(120vmax);
      opacity: 0;
    }
  }
 
  /* Respect users who prefer reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .particle {
      animation: none;
    }
  }
  /* Poster container -- responsive sizing with clamp keeps proportions */
  .poster {
    width: min(100%, 740px);
    aspect-ratio: 1/ 1;
    background: var(--bg);
     box-shadow: 0 25px 60px -20px rgba(0, 0, 0, 0.4);
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    container-type: inline-size;
  }

  /* Decorative blocks behind the content */
  .peach-block {
    position: absolute;
    left: 0;
    top: clamp(4rem, 8cqi, 5rem);
    bottom: clamp(3rem, 8cqi, 5rem);
    width: clamp(2.5rem, 70cqi, 11rem);
    background: var(--peach);
    z-index: 1;
  }

  .teal-block {
    opacity:0.5;
    position: absolute;
    right: clamp(1.5rem, 4cqi, 2.5rem);
    top: 18%;
    width: 28%;
    height: 100%;
    background: var(--teal);
    background-image:
      repeating-linear-gradient(
        90deg,
        rgba(255,255,255,0.06) 0 1px,
        transparent 1px 3px
      ),
      repeating-linear-gradient(
        0deg,
        rgba(0,0,0,0.08) 0 1px,
        transparent 1px 3px
      );
    z-index: 1;
  }

  /* Title */
  .title {
    position: relative;
    z-index: 3;
    font-family: "JetBrains Mono", monospace;
    font-size: clamp(2.2rem, 10cqi, 6rem);
    line-height: 0.95;
    /* letter-spacing: 0.01em; */
    color: var(--red);
    margin: 0 0 clamp(0.5rem, 2cqi, 1rem) 0;
    text-align: center;
    text-transform: uppercase;
  }

  /* Middle section: image + overlapping tagline */
  .middle {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    justify-items: center;
    min-height: 0;
  }

  .image-wrap {
    position: relative;
    width: clamp(60%, 75cqi, 78%);
    aspect-ratio: 1 / 1.05;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .placeholder-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* Subtle vintage paper feel for the placeholder */
    filter: sepia(0.15) contrast(1.05);
    background: #ddd5c1;
  }

  .tagline {
    position: absolute;
    left: clamp(0.5rem, 2cqi, 1rem);
    bottom: 4cqi;
    z-index: 3;
    font-family: 'abolition', sans-serif;
    font-size: clamp(1.4rem, 25cqi, 5rem);
    line-height: .8;
    letter-spacing: 0.01em;
    color: var(--ink-faded);
    text-transform: uppercase;
    margin: 0;
    pointer-events: none;
    max-width: 70%;
  }

  /* Bottom block: code line + footer */
  .bottom {
    position: relative;
    z-index: 3;
    display: grid;
    gap: clamp(1rem, 4cqi, 2rem);
  }

  .code-line {
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(0.7rem, 2cqi, 1rem);
    line-height: 1.6;
    color: var(--ink);
    margin: 0;
    padding-left: clamp(5rem, 50cqi, 20rem); /* clear of peach block */
    word-spacing: 0.05em;
  }

  .footer {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 1rem;
    font-family: 'abolition', sans-serif;
    font-size: clamp(0.85rem, 10cqi, 2rem);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--ink);
  }

  .footer .date,
  .footer .place {
    margin: 0;
  }

  .halftone {
  /* 1. Solid background and high contrast filter to threshold the dots */
  background: #f3e4c9;
  filter: contrast(5);
  
  /* 2. Define the mask gradient (controls density/intensity) */
  --mask: linear-gradient(red, rgba(#000, .45));
  
  /* 3. Pseudo-element holds the radial gradient pattern */
}

.halftone::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Radial gradient creates the dots; space ensures they don't touch */
  background: radial-gradient(rgb(230, 90, 9), transparent) 0 0 / .2em .2em space;
  /* Apply the mask */
  -webkit-mask: var(--mask);
  mask: var(--mask);
}

.dot{
  width:2px;
  height:2px;
  border-radius: 50%;
  background-color: #e8a994;
}

#scroll-arrow{
  text-align: center;
  font-weight:100;
}

.hussman-logo{
  max-width: 20%;
}

  /* Signup band — same parchment frame as the poster, sits below it */
  .signup-band {
    width: min(100%, 740px);
    margin-top: 1.5rem;
    background: var(--bg);
    border: 1px solid rgba(31, 26, 20, 0.15);
    box-shadow: 0 25px 60px -20px rgba(0, 0, 0, 0.4);
    padding: clamp(1rem, 3vw, 1.5rem) clamp(1.25rem, 4vw, 2rem);
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem 2rem;
    font-family: 'JetBrains Mono', monospace;
    color: var(--ink);
  }
 
  .signup-band .theme {
    font-size: clamp(0.8rem, 2.2vw, 0.95rem);
    line-height: 1.45;
    margin: 0;
    max-width: 38ch;
    flex: 1 1 240px;
  }
 
  .signup-band form {
    display: flex;
    gap: 0.5rem;
    flex: 0 1 auto;
  }
 
  /* Visually hidden label — still read by screen readers */
  .signup-band .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
 
  .signup-band input[type="email"] {
    font: inherit;
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--ink);
    background: transparent;
    color: var(--ink);
    min-width: 0;
    flex: 1 1 200px;
  }
 
  .signup-band input[type="email"]::placeholder {
    color: rgba(31, 26, 20, 0.5);
  }
 
  .signup-band input[type="email"]:focus {
    outline: 2px solid var(--red);
    outline-offset: 2px;
  }
 
  .signup-band input[type="submit"] {
    font: inherit;
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    background: var(--red);
    color: var(--bg);
    border: 1px solid var(--red-dark);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }
 
  .signup-band input[type="submit"]:hover,
  .signup-band input[type="submit"]:focus-visible {
    background: var(--red-dark);
  }
  /* Small screens: stack footer if cramped */
  @container (max-width: 420px) {

    .tagline{
      font-size:2em;
      bottom:20cqi;
    }
    .footer {
      /* flex-direction: column;
      align-items: flex-start; */
      font-size:1em;
    }
    .code-line {
      padding-left: 3rem;
    }
  }