/* ============================================
   TOKENS — swap these to re-skin the whole page
   ============================================ */
   :root{
    --ink: #0D0D0D;         /* background */
    --paper: #ffe800;       /* primary text / paper */
    --paper-dim: #F2EFE6;   /* secondary text */
    --stamp: #ffe800;       /* accent */
    --stamp-ink: #0D0D0D;   /* text sitting on the accent */
  
    --font-display: 'citizen', sans-serif;
    --font-body: 'citizen', sans-serif;
  
    --max-w: 1100px;
  }
   /* comment test */
  /* ============================================
     RESET
     ============================================ */
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-body);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  a { color: inherit; }
  
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
  }
  
  /* Visible keyboard focus everywhere */
  a:focus-visible, button:focus-visible {
    outline: 2px solid var(--stamp);
    outline-offset: 3px;
  }
  
  .wrap {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 1.25rem;
  }
  
  /* ============================================
     HERO
     ============================================ */
  .hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
  
    /* === SWAP THIS for your real photo === */
       background-image:
         linear-gradient(180deg, rgba(13,13,13,0.35) 0%, rgba(13,13,13,0.55) 55%, rgba(13,13,13,0.96) 100%),
         url('images/aardent_bg3.jpg');
       background-size: cover;
       background-position: center;
    
  /*  background-image:
      linear-gradient(180deg, rgba(13,13,13,0.25) 0%, rgba(13,13,13,0.6) 55%, var(--ink) 100%),
      radial-gradient(ellipse at 30% 20%, #2a2430 0%, transparent 55%),
      radial-gradient(ellipse at 80% 70%, #241d24 0%, transparent 60%),
      linear-gradient(160deg, #1a1620 0%, #0D0D0D 60%);
    background-size: cover;
    background-position: center;
  */
  }

  /* fine grain overlay = screen-print texture */
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.35;
    mix-blend-mode: overlay;
    background-image:
      repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0px, transparent 1px, transparent 2px),
      repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0px, transparent 1px, transparent 2px);
  }
  
  .hero__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
  }
  
  .hero__title {
    margin-top: 0.2rem;
    margin-bottom: 0.4rem;
    line-height: 1;
    font-family: var(--font-display);
    font-weight: 700;
    font-style: italic;
    letter-spacing: 0.02em;
    /* fluid scaling: shrinks on narrow screens, caps out at 4rem on desktop */
    font-size: clamp(1.5rem, 10vw, 6rem);
    /* safety net — wraps or breaks instead of overflowing the viewport */
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  
    /* yellow → orange gradient fill */
    background: linear-gradient(135deg, #ffe800 0%, var(--stamp) 30%, #ff6c2f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  
    /* "linear light"-style glow against the dark hero background —
       CSS has no literal Linear Light blend mode, plus-lighter is the closest additive match */
    mix-blend-mode: plus-lighter;
  
    /* "dissolve"-style grainy transparency — SVG feTurbulence noise,
       packaged as a fixed-size tileable data URI so it sizes reliably.
       feComponentTransfer biases the mask brighter so grain stays visible
       without letting the text drop below ~45% opacity (readability floor) */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch' result='noise'/%3E%3CfeColorMatrix in='noise' type='luminanceToAlpha' result='alphaNoise'/%3E%3CfeComponentTransfer in='alphaNoise'%3E%3CfeFuncA type='linear' slope='0.3' intercept='0.7'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch' result='noise'/%3E%3CfeColorMatrix in='noise' type='luminanceToAlpha' result='alphaNoise'/%3E%3CfeComponentTransfer in='alphaNoise'%3E%3CfeFuncA type='linear' slope='0.3' intercept='0.7'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    -webkit-mask-size: 200px 200px;
    mask-size: 200px 200px;
    -webkit-mask-repeat: repeat;
    mask-repeat: repeat;
  }
  
  .hero__sub {
    margin-top: 0rem;
    margin-bottom: 5rem;
    font-family: var(--font-body);
    font-style: normal;
    font-size: clamp(1rem, 2vw, 1rem);
    letter-spacing: 0.1em;
    color: var(--paper-dim);
    max-width: 40ch;
    opacity: 70%;
  }

  .body__font {
    margin-top: 1rem;
    margin-bottom: 0rem;
    font-family: var(--font-body);
    font-style: normal;
    font-size: clamp(0.85rem, 2vw, 1rem);
    letter-spacing: 0.04em;
    color: var(--paper-dim);
    max-width: 40ch;
    opacity: 70%;
  }
  
  .join__link {
    margin-top: 0.2rem;
    margin-bottom: 0.8rem;
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 400;
    font-style: normal;
    font-size: clamp(0.85rem, 2vw, 1rem);
    letter-spacing: 0.08em;
    text-transform: lowercase;
    color: var(--paper);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease, opacity 0.15s ease;
    opacity: 70%;
  }
  .join__link:hover { border-color: var(--paper); }