/* ═══════════════════════════════════════════════════════════
   THE KENNEDYS — main.css
   ═══════════════════════════════════════════════════════════ */

/* ── TOKENS ────────────────────────────────────────────────── */
:root {
  --green:   #00FF00;
  --ink:     #393939;
  --bg:      #E9E9E9;
  --grid-ln: #C9C9C9;

  --font: 'Helvetica Neue', 'HelveticaNeue', Helvetica, Arial, sans-serif;

  --col-l:  16%;
  --col-r:  84%;
  --row-h:  13vh;

  /* Arrow gutter fill: slot width minus matching padding on each side */
  --arrow-pad: clamp(14px, 1.8vh, 28px);
  --arrow-size: calc(var(--col-l) - var(--arrow-pad) * 2);
}

/* ── RESET ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }

body {
  font-family:      var(--font);
  background:       var(--bg);
  color:            var(--ink);
  overflow:         hidden;
  width:            100vw;
  height:           100vh;
  -webkit-font-smoothing: antialiased;
}

a      { color: inherit; text-decoration: none; }
img    { display: block; }
button { font-family: inherit; background: none; border: none; cursor: pointer; padding: 0; }

::selection { background: var(--green); color: var(--ink); }

/* ── GLOBAL TYPE ───────────────────────────────────────────── */
body, p, h1, h2, h3, h4, h5, h6, span, a, li, button {
  font-weight:    700;
  line-height:    0.9;
  letter-spacing: -0.04em;
}

/* ── SCROLL TRACK ──────────────────────────────────────────── */
#scroll-track {
  display:        flex;
  flex-direction: row;
  width:          max-content;
  height:         100vh;
  will-change:    transform;
}

/* ════════════════════════════════════════════════════════════
   PANEL BASE
   ════════════════════════════════════════════════════════════ */
.panel {
  position:    relative;
  width:       100vw;
  height:      100vh;
  flex-shrink: 0;
  overflow:    hidden;
  background:  var(--bg);
}
#panel-home { background: #1D160B; }

/* ════════════════════════════════════════════════════════════
   GRID OVERLAY — 2 vertical + 1 horizontal line
   ════════════════════════════════════════════════════════════ */
.panel--grid::before {
  content:  '';
  position: absolute;
  inset:    0;
  z-index:  1;
  pointer-events: none;
  background:
    linear-gradient(to right,
      transparent calc(var(--col-l) - 0.5px),
      var(--grid-ln) calc(var(--col-l) - 0.5px),
      var(--grid-ln) calc(var(--col-l) + 0.5px),
      transparent   calc(var(--col-l) + 0.5px)
    ),
    linear-gradient(to right,
      transparent calc(var(--col-r) - 0.5px),
      var(--grid-ln) calc(var(--col-r) - 0.5px),
      var(--grid-ln) calc(var(--col-r) + 0.5px),
      transparent   calc(var(--col-r) + 0.5px)
    ),
    linear-gradient(to bottom,
      transparent calc(var(--row-h) - 0.5px),
      var(--grid-ln) calc(var(--row-h) - 0.5px),
      var(--grid-ln) calc(var(--row-h) + 0.5px),
      transparent   calc(var(--row-h) + 0.5px)
    );
}

/* ════════════════════════════════════════════════════════════
   SLOT SYSTEM
   ════════════════════════════════════════════════════════════ */
.panel-layout {
  position: absolute;
  inset:    0;
  z-index:  2;
}

/* Top-left: logo — extra padding so logo breathes, truly centered */
.slot-top-left {
  position:        absolute;
  top:             0;
  left:            0;
  width:           var(--col-l);
  height:          var(--row-h);
  display:         flex;
  align-items:     center;
  justify-content: center;
  /* Generous equal padding on all sides */
  padding: clamp(16px, 2.2vh, 32px) clamp(16px, 1.4vw, 28px);
}

/* Top-right: empty corner cell */
.slot-top-right {
  position:        absolute;
  top:             0;
  right:           0;
  width:           calc(100% - var(--col-r));
  height:          var(--row-h);
  display:         flex;
  align-items:     center;
  justify-content: center;
}

/* Main content zone: col-l to col-r, full height */
.slot-main {
  position:       absolute;
  top:            0;
  left:           var(--col-l);
  width:          calc(var(--col-r) - var(--col-l));
  height:         100%;
  display:        flex;
  flex-direction: column;
}

/* Bottom-right: forward arrow */
.slot-bottom-right {
  position:        absolute;
  bottom:          0;
  right:           0;
  width:           calc(100% - var(--col-r));
  height:          calc(100% - var(--row-h));
  display:         flex;
  align-items:     flex-end;
  justify-content: center;
  padding-bottom:  clamp(16px, 2.2vh, 32px);
}

/* Bottom-left: back arrow */
.slot-bottom-left {
  position:        absolute;
  bottom:          0;
  left:            0;
  width:           var(--col-l);
  height:          calc(100% - var(--row-h));
  display:         flex;
  align-items:     flex-end;
  justify-content: center;
  padding-bottom:  clamp(16px, 2.2vh, 32px);
}

/* ════════════════════════════════════════════════════════════
   NAVIGATION ARROWS — inline SVG triangles with label text inside
   ════════════════════════════════════════════════════════════ */
.arrow-btn {
  display:    block;
  background: none;
  border:     none;
  cursor:     pointer;
  padding:    var(--arrow-pad);
  /* Pad so arrow fills gutter with same breathing room as logo */
  width:      100%;
  line-height: 0;
}

/* Forward arrow (right-pointing) fills the right gutter */
.arrow-svg--fwd {
  width:      100%;
  height:     auto;
  display:    block;
  transition: transform .2s ease;
}
.arrow-btn:hover .arrow-svg--fwd {
  transform: translateX(6px);
}

/* Back arrow — left-pointing triangle, no CSS transform needed
   The SVG path is drawn pointing left directly, so text math is clean */
.arrow-svg--back {
  width:      100%;
  height:     auto;
  display:    block;
  transition: transform .2s ease;
}
.arrow-btn:hover .arrow-svg--back {
  transform: translateX(-6px);
}

/* Label text inside both triangles */
.arrow-label {
  font-family:    var(--font);
  font-weight:    700;
  letter-spacing: -0.04em;
  font-size:      26px;
  fill:           var(--ink);
}

/* ════════════════════════════════════════════════════════════
   HOME PANEL — logo slot (matches grid proportions)
   ════════════════════════════════════════════════════════════ */
.home-logo-slot {
  position:        absolute;
  top:             0;
  left:            0;
  width:           var(--col-l);
  height:          var(--row-h);
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         clamp(16px, 2.2vh, 32px) clamp(16px, 1.4vw, 28px);
  z-index:         10;
}

/* ════════════════════════════════════════════════════════════
   VIDEO
   ════════════════════════════════════════════════════════════ */
#home-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
#home-video-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 1; transition: opacity .4s; pointer-events: none; z-index: 1;
}
#home-video-placeholder.hidden { opacity: 0; }

/* ════════════════════════════════════════════════════════════
   LOGO SVG
   ════════════════════════════════════════════════════════════ */
.logo-btn {
  background: none; border: none; cursor: pointer;
  padding: 0; line-height: 0; overflow: visible;
  /* Fill entire slot so logo scales to available space */
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.logo-svg {
  width:    100%;
  height:   100%;
  display:  block;
  overflow: visible;
  /* Fit within slot bounds */
  object-fit: contain;
}
.logo-svg path {
  transition:      fill .35s, transform .25s;
  transform-box:   fill-box;
  transform-origin: center;
}

/* ════════════════════════════════════════════════════════════
   PROMPT PANELS
   ════════════════════════════════════════════════════════════ */
.prompt-title-zone {
  flex: 0 0 auto;
  padding:     clamp(16px, 2vh, 32px) clamp(20px, 2.5vw, 48px);
  display:     flex;
  align-items: flex-end;
  min-height:  45vh;
}
.prompt-title {
  font-size:      clamp(72px, 11.1vw, 160px);
  line-height:    0.88;
  letter-spacing: -0.04em;
  font-weight:    700;
  color:          var(--green);
}
.prompt-body-zone {
  flex:    1;
  padding: clamp(32px, 5vh, 64px) clamp(20px, 2.5vw, 48px) clamp(20px, 3vh, 40px);
  display: flex;
  align-items: flex-start;
}
.prompt-body-text {
  font-size:      clamp(20px, 2.5vw, 36px);
  line-height:    0.9;
  letter-spacing: -0.04em;
  color:          var(--ink);
  max-width:      540px;
}

/* ════════════════════════════════════════════════════════════
   APPLICATION / OPINIONS PANEL
   ════════════════════════════════════════════════════════════ */
.app-body-zone {
  position:    absolute;
  top:         var(--row-h);
  left:        var(--col-l);
  width:       calc(var(--col-r) - var(--col-l));
  height:      calc(100% - var(--row-h));
  display:     flex;
  align-items: center;
  padding:     clamp(24px, 4vw, 64px) clamp(20px, 2.5vw, 48px);
}
.application-body p {
  font-size:      clamp(20px, 2.5vw, 36px);
  line-height:    0.9;
  letter-spacing: -0.04em;
  margin-bottom:  1.4em;
}
.application-body p:last-child { margin-bottom: 0; }

/* ════════════════════════════════════════════════════════════
   CONTACT / APPLY PANEL
   ════════════════════════════════════════════════════════════ */
.contact-body-zone {
  position:        absolute;
  top:             var(--row-h);
  left:            var(--col-l);
  width:           calc(var(--col-r) - var(--col-l));
  height:          calc(100% - var(--row-h));
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  padding:         clamp(24px, 4vw, 64px) clamp(20px, 2.5vw, 48px);
}
.contact-instruction {
  font-size:      clamp(20px, 2.5vw, 36px);
  line-height:    0.9;
  letter-spacing: -0.04em;
  margin-bottom:  0.9em;
}
.contact-detail {
  font-size:      clamp(20px, 2.5vw, 36px);
  line-height:    1.2;
  letter-spacing: -0.04em;
  margin-bottom:  0.15em;
}
.contact-detail a {
  border-bottom: 1px solid rgba(57,57,57,0.25);
  transition: border-color .15s;
}
.contact-detail a:hover { border-color: var(--ink); }
.contact-divider {
  font-size:      clamp(14px, 1.5vw, 20px);
  color:          rgba(57,57,57,0.45);
  margin:         0.5em 0;
  letter-spacing: -0.04em;
}
/* Small grey footnote — same visual style as .contact-divider */
.contact-note {
  font-size:      clamp(12px, 1.1vw, 16px);
  color:          rgba(57,57,57,0.4);
  letter-spacing: -0.03em;
  padding-top:    clamp(16px, 3vh, 40px);
}

/* ════════════════════════════════════════════════════════════
   THANK YOU PANEL
   ════════════════════════════════════════════════════════════ */
.thankyou-title-zone {
  flex:        0 0 auto;
  padding:     clamp(16px, 2vh, 32px) clamp(20px, 2.5vw, 48px);
  display:     flex;
  align-items: flex-end;
  min-height:  45vh;
}
.thankyou-headline {
  font-size:      clamp(72px, 11.1vw, 160px);
  line-height:    0.88;
  letter-spacing: -0.04em;
  font-weight:    700;
  color:          var(--green);
}
.thankyou-body-zone {
  flex:        1;
  padding:     clamp(32px, 5vh, 64px) clamp(20px, 2.5vw, 48px) clamp(20px, 3vh, 40px);
  display:     flex;
  align-items: flex-start;
}

/* ════════════════════════════════════════════════════════════
   SCROLL CUE — panel 0
   Matches prompt-title scale
   ════════════════════════════════════════════════════════════ */
#scroll-cue {
  position:       fixed;
  bottom:         clamp(24px, 4vh, 56px);
  left:           clamp(20px, 4vw, 80px);
  z-index:        500;
  display:        flex;
  align-items:    center;
  gap:            clamp(12px, 1.5vw, 24px);
  opacity:        0;
  pointer-events: none;
  transition:     opacity .4s;
}
#scroll-cue.visible { opacity: 1; }

.scroll-word {
  /* Match prompt title size */
  font-size:      clamp(72px, 11.1vw, 160px);
  font-weight:    700;
  letter-spacing: -0.04em;
  line-height:    0.88;
  color:          var(--green);
}
.nav-triangle--scroll {
  /* Triangle scales with the text */
  width:      clamp(52px, 7.7vw, 111px); /* roughly 0.7× text cap-height */
  height:     auto;
  transition: transform .2s;
}
#scroll-cue:hover .nav-triangle--scroll { transform: translateX(6px); }

/* ════════════════════════════════════════════════════════════
   PROGRESS DOTS
   ════════════════════════════════════════════════════════════ */
#progress-dots {
  position:  fixed;
  bottom:    20px;
  left:      50%;
  transform: translateX(-50%);
  display:   flex;
  gap:       8px;
  z-index:   400;
  opacity:   0;
  transition: opacity .3s;
}
#progress-dots.visible { opacity: 1; }
.dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(57,57,57,0.2);
  transition: background .3s, transform .2s;
}
.dot.active { background: var(--ink); transform: scale(1.3); }

/* ════════════════════════════════════════════════════════════
   FOCUS + REDUCED MOTION
   ════════════════════════════════════════════════════════════ */
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:  0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ════════════════════════════════════════════════════════════
   MOBILE & TABLET — ≤ 768px
   Only these rules change on touch devices.
   Desktop layout is completely unaffected.
   ════════════════════════════════════════════════════════════ */
@media screen and (max-width: 768px) {

  /* ── Hide grid lines ─────────────────────────────────────── */
  .panel--grid::before {
    display: none;
  }

  /* ── Larger logo ─────────────────────────────────────────── */
  .slot-top-left {
    width:   28vw;
    height:  10vh;
    padding: clamp(10px, 1.8vh, 20px) clamp(10px, 2vw, 18px);
  }
  .home-logo-slot {
    width:   28vw;
    height:  10vh;
    padding: clamp(10px, 1.8vh, 20px) clamp(10px, 2vw, 18px);
  }

  /* ── Content zones: full width, anchored to top ─────────── */
  .slot-main {
    left:  0;
    width: 100%;
  }

  /* App / contact: full width, top-anchored */
  .app-body-zone {
    left:        0;
    width:       100%;
    align-items: flex-start;
    padding:     clamp(16px, 3vw, 32px) clamp(20px, 5vw, 48px);
    padding-top: clamp(20px, 4vh, 48px);
    padding-bottom: clamp(16px, 3vw, 32px);
  }
  .contact-body-zone {
    left:            0;
    width:           100%;
    justify-content: flex-start;
    padding:         clamp(16px, 3vw, 32px) clamp(20px, 5vw, 48px);
    padding-top:     clamp(20px, 4vh, 48px);
  }

  /* Prompt title: pull closer to top (reduce min-height) */
  .prompt-title-zone {
    min-height:  20vh;
    align-items: flex-end;
  }
  .thankyou-title-zone {
    min-height:  20vh;
    align-items: flex-end;
  }

  /* Prompt body: less top padding so it starts higher */
  .prompt-body-zone {
    padding-top:    clamp(16px, 2.5vh, 32px);
  }
  .thankyou-body-zone {
    padding-top:    clamp(16px, 2.5vh, 32px);
  }

  /* ── Type sizes ─────────────────────────────────────────── */
  .prompt-title {
    font-size: clamp(52px, 13vw, 120px);
  }
  .thankyou-headline {
    font-size: clamp(52px, 13vw, 120px);
  }
  .prompt-body-text,
  .application-body p,
  .contact-instruction,
  .contact-detail {
    font-size: clamp(18px, 4vw, 32px);
  }

  /* ── Nav arrows: hidden on mobile — tap zones handle navigation */
  .slot-bottom-left,
  .slot-bottom-right {
    display: none;
  }

  /* ── Progress dots hidden ───────────────────────────────── */
  #progress-dots {
    display: none;
  }

  /* ── Scroll cue: scale down ─────────────────────────────── */
  .scroll-word {
    font-size: clamp(40px, 11vw, 90px);
  }
  .nav-triangle--scroll {
    width: clamp(30px, 7.5vw, 64px);
  }
}