@font-face {
      font-family: 'JOA';
      src: url('/assets/jaofont.woff2') format('woff2');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }

    :root {
      --jera-yellow: #e9b444;
      --body-color: #1b2129;
      --text-color: #e3ddc7;
    }

    * { box-sizing: border-box; }

    html {
      background: var(--body-color);
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      min-width: 320px;
      background: var(--body-color);
      color: var(--text-color);
      font-family: 'Roboto Mono', monospace;
      font-size: 1.3em;
      font-weight: 400;
      line-height: 1.7;
      overflow-x: hidden;
    }

    .hero {
      position: relative;
      min-height: 16svh;
      padding:
        max(22px, env(safe-area-inset-top))
        clamp(20px, 5vw, 72px)
        34px;
      background: var(--body-color);
      overflow: hidden;
    }

    .logo {
      display: block;
      width: clamp(180px, 28vw, 310px);
      height: auto;
      max-height: 130px;
      object-fit: contain;
      object-position: left top;
    }
.kicker {
      margin-bottom: 12px;
      color: var(--jera-yellow);
      font-size: .66em;
      font-weight: 700;
      line-height: 1.4;
      letter-spacing: .16em;
      text-transform: uppercase;
    }

    h2, .value, .badge, .photo-title {
      font-family: 'JOA', Impact, sans-serif;
      font-weight: normal;
    }

    .date-line {
      margin-top: 22px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px 14px;
      font-size: clamp(.72em, 2vw, 1.02em);
      font-weight: 700;
      line-height: 1.4;
      letter-spacing: .05em;
      text-transform: uppercase;
    }

    .dot { color: var(--jera-yellow); }

    .photo-break {
      position: relative;
      height: clamp(260px, 48vw, 560px);
      overflow: hidden;
      background: #0d1116;
    }

    .photo-layer {
      position: absolute;
      inset: -12% 0;
      background-image:
        linear-gradient(
          to bottom,
          rgba(27,33,41,.22) 0%,
          rgba(27,33,41,.02) 38%,
          rgba(27,33,41,.15) 75%,
          rgba(27,33,41,.72) 100%
        ),
        url('/assets/JERA-banner.png');
      background-position: center center;
      background-size: cover;
      will-change: transform;
      transform: translate3d(0,0,0) scale(1.03);
    }

    .photo-copy {
      position: absolute;
      left: clamp(20px, 5vw, 72px);
      right: clamp(20px, 5vw, 72px);
      bottom: 28px;
      z-index: 2;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 20px;
      pointer-events: none;
    }

    .photo-title {
      margin: 0;
      max-width: 760px;
      color: var(--text-color);
      font-size: clamp(40px, 8vw, 100px);
      line-height: .8;
      text-transform: uppercase;
      text-shadow: 0 3px 18px rgba(0,0,0,.45);
    }

    .photo-mark {
      color: var(--jera-yellow);
      font-size: .55em;
      font-weight: 700;
      line-height: 1.4;
      letter-spacing: .12em;
      text-align: right;
      text-transform: uppercase;
      text-shadow: 0 2px 10px rgba(0,0,0,.7);
    }

    .count-section {
      position: relative;
      padding:
        clamp(42px, 6vw, 76px)
        clamp(20px, 5vw, 72px)
        max(44px, env(safe-area-inset-bottom));
      background: var(--text-color);
      color: var(--body-color);
    }

    .count-section::before {
      content: "";
      position: absolute;
      top: -20px;
      left: 0;
      width: 100%;
      height: 26px;
      background: var(--text-color);
      clip-path: polygon(0 70%,6% 14%,12% 63%,18% 5%,25% 70%,32% 16%,39% 72%,47% 8%,55% 65%,63% 18%,72% 75%,81% 10%,90% 67%,100% 20%,100% 100%,0 100%);
    }

    .headline-row {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 24px;
      margin-bottom: 28px;
    }

    h2 {
      margin: 0;
      font-size: clamp(42px, 7vw, 92px);
      line-height: .86;
      text-transform: uppercase;
    }

    .today {
      margin: 0;
      text-align: right;
      color: #676858;
      font-size: .54em;
      font-weight: 700;
      line-height: 1.55;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .countdown {
      display: grid;
      grid-template-columns: repeat(4, minmax(0,1fr));
      border-top: 4px solid var(--jera-yellow);
      border-bottom: 4px solid var(--jera-yellow);
    }

    .unit {
      min-width: 0;
      padding: clamp(24px,4vw,44px) clamp(9px,2.5vw,28px) 30px;
      border-right: 2px solid var(--jera-yellow);
    }

    .unit:last-child { border-right: 0; }

    .value {
      display: block;
      font-size: clamp(56px,11vw,132px);
      line-height: .78;
      letter-spacing: -.02em;
      font-variant-numeric: tabular-nums;
    }

    .label {
      display: block;
      margin-top: 15px;
      font-size: .5em;
      font-weight: 700;
      line-height: 1.4;
      letter-spacing: .11em;
      text-transform: uppercase;
    }

    .status {
      display: none;
      margin-top: 20px;
      padding: 16px 20px;
      background: var(--jera-yellow);
      color: var(--body-color);
      font-size: .68em;
      font-weight: 700;
      text-align: center;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 24px;
      padding-top: 28px;
    }

    .location {
      font-size: clamp(.7em,2vw,1em);
      font-weight: 700;
      line-height: 1.4;
      letter-spacing: .05em;
      text-transform: uppercase;
    }

    .tagline {
      margin-top: 8px;
      color: #666858;
      font-size: .48em;
      font-weight: 700;
      line-height: 1.4;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .badge {
      width: 74px;
      aspect-ratio: 1;
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      border: 3px solid var(--jera-yellow);
      border-radius: 50%;
      color: var(--jera-yellow);
      font-size: 17px;
      line-height: .9;
      text-align: center;
      text-transform: uppercase;
      transform: rotate(-7deg);
    }

    @media (max-width: 700px) {
      body { font-size: 1.05em; }

      .hero {
        min-height: 16svh;
        padding:
          max(18px, env(safe-area-inset-top))
          20px
          26px;
      }

      .logo {
        width: min(58vw, 220px);
        max-height: 105px;
      }
.date-line {
        margin-top: 18px;
        font-size: .7em;
      }

      .photo-break {
        height: 58vw;
        min-height: 250px;
        max-height: 390px;
      }

      .photo-layer {
        inset: -16% 0;
        background-position: 50% 50%;
      }

      .photo-copy {
        left: 20px;
        right: 20px;
        bottom: 22px;
      }

      .photo-title {
        font-size: clamp(42px, 13vw, 66px);
      }

      .photo-mark { display: none; }

      .count-section {
        padding-left: 20px;
        padding-right: 20px;
      }

      .headline-row {
        flex-direction: column;
        align-items: flex-start;
      }

      .today { text-align: left; }

      .countdown {
        grid-template-columns: repeat(2,minmax(0,1fr));
      }

      .unit:nth-child(2) { border-right: 0; }

      .unit:nth-child(-n+2) {
        border-bottom: 2px solid var(--jera-yellow);
      }

      .value {
        font-size: clamp(58px, 20vw, 92px);
      }

      .footer { align-items: flex-start; }
    }

    @media (max-width: 380px) {
      .logo { width: min(62vw, 200px); }
      .photo-break { min-height: 235px; }
      .badge { width: 62px; font-size: 14px; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .photo-layer {
        transform: none !important;
        will-change: auto;
      }
    }