/* ===== Tokens ===== */
:root{
  --black:   #0B0B0A;
  --red:     #CE1126;
  --green:   #00693E;
  --cream:   #F6F1E7;
  --gold:    #C89B3C;
  --ink:     #1A1815;
  --muted:   #6B6459;

  --display: 'Anton', 'Impact', sans-serif;
  --body:    'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radius: 6px;
  --wrap: 1140px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: var(--body);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; }
.wrap{ max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
code{
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(0,0,0,.06);
  padding: .1em .4em;
  border-radius: 4px;
  font-size: .92em;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ===== Eyebrow + signature mark ===== */
.eyebrow{
  display:flex; align-items:center; gap:10px;
  font-family: var(--body);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.8rem;
  color: var(--red);
  margin: 0 0 14px;
}
.mark{
  width:16px; height:16px;
  flex:none;
  background:
    linear-gradient(var(--black),var(--black)) center / 100% 2.5px no-repeat,
    linear-gradient(var(--black),var(--black)) center / 2.5px 100% no-repeat;
  transform: rotate(45deg);
}
.mark-light{
  background:
    linear-gradient(var(--cream),var(--cream)) center / 100% 2.5px no-repeat,
    linear-gradient(var(--cream),var(--cream)) center / 2.5px 100% no-repeat;
}

h1, h2, h3{
  font-family: var(--display);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:1.02;
  margin:0 0 .3em;
}

/* ===== Header ===== */
.site-header{
  position:sticky; top:0; z-index:50;
  background: rgba(11,11,10,.92);
  backdrop-filter: blur(6px);
  border-bottom: 3px solid var(--red);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:68px;
}
.logo{
  font-family: var(--display);
  color: var(--cream);
  text-decoration:none;
  font-size:1.15rem;
  letter-spacing:.03em;
}
.logo span{ color: var(--gold); margin-left:.35em; }
.site-nav{ display:flex; align-items:center; gap:28px; }
.site-nav a{
  color: var(--cream);
  text-decoration:none;
  font-weight:600;
  font-size:.92rem;
  opacity:.88;
}
.site-nav a:hover{ opacity:1; }
.nav-cta{
  background: var(--gold);
  color: var(--black) !important;
  padding:9px 16px;
  border-radius: var(--radius);
  opacity:1 !important;
}
.nav-toggle{
  display:none;
  flex-direction:column; justify-content:center; gap:5px;
  width:38px; height:38px;
  background:none; border:0; cursor:pointer;
}
.nav-toggle span{ display:block; height:2px; background:var(--cream); border-radius:2px; }

/* ===== Buttons ===== */
.btn{
  display:inline-block;
  font-weight:700;
  font-size:.95rem;
  padding: 14px 26px;
  border-radius: var(--radius);
  text-decoration:none;
  border: 2px solid transparent;
  cursor:pointer;
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.btn:active{ transform: translateY(1px); }
.btn-gold{ background: var(--gold); color: var(--black); }
.btn-gold:hover{ background:#b98c2f; }
.btn-outline-light{ border-color: rgba(246,241,231,.6); color: var(--cream); }
.btn-outline-light:hover{ background: rgba(246,241,231,.12); }
.btn-wide{ width:100%; text-align:center; font-size:1.02rem; }

/* ===== Hero ===== */
.hero{
  position:relative;
  background: var(--black);
  color: var(--cream);
  overflow:hidden;
  padding: 96px 0 84px;
}
.hero-flagbar{
  position:absolute; inset:0 0 auto 0; height:6px;
  background: linear-gradient(90deg, var(--black) 0 33%, var(--red) 33% 66%, var(--green) 66% 100%);
}
.hero-inner{ position:relative; max-width: 720px; }
.hero .eyebrow{ color: var(--gold); }
.hero .eyebrow .mark{
  background:
    linear-gradient(var(--gold),var(--gold)) center / 100% 2.5px no-repeat,
    linear-gradient(var(--gold),var(--gold)) center / 2.5px 100% no-repeat;
}
.hero h1{
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  color: var(--cream);
}
.hero-sub{
  font-size:1.1rem;
  color: rgba(246,241,231,.78);
  max-width: 46ch;
  margin: 18px 0 34px;
}
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* Signature diagonal tricolor divider */
.divider{
  height: 46px;
  background: var(--cream);
  position: relative;
  overflow: hidden;
}
.divider::before{
  content:"";
  position:absolute; left:-5%; right:-5%; top:0; height:100%;
}
.divider-1::before{
  background: var(--black);
  clip-path: polygon(0 0, 100% 0, 100% 35%, 0 100%);
}
.divider-1::after{
  content:"";
  position:absolute; left:-5%; right:-5%; top:0; height:100%;
  background: linear-gradient(90deg, var(--red) 0 50%, var(--green) 50% 100%);
  clip-path: polygon(0 100%, 100% 45%, 100% 55%, 0 100%);
}
.divider-2{ background: var(--black); }
.divider-2::before{
  background: var(--cream);
  clip-path: polygon(0 0, 100% 0, 100% 65%, 0 100%);
}
.divider-2::after{
  content:"";
  position:absolute; left:-5%; right:-5%; top:0; height:100%;
  background: linear-gradient(90deg, var(--gold) 0 50%, var(--red) 50% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 8%, 0 42%);
}

/* ===== Sections ===== */
.section{ padding: 80px 0; }
.section-dark{ background: var(--black); color: var(--cream); }
.section-lede{
  max-width: 58ch;
  color: var(--muted);
  font-size:1.05rem;
  margin-bottom: 40px;
}
.section-lede.light{ color: rgba(246,241,231,.7); }
.section-dark h2{ color: var(--cream); }

/* ===== Photo grid ===== */
.photo-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.photo-card{
  margin:0;
  position:relative;
  aspect-ratio: 4/5;
  border-radius: var(--radius);
  overflow:hidden;
  background-size: cover;
  background-position:center;
  display:flex; align-items:flex-end;
}
.photo-card::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.72) 100%);
}
.photo-card figcaption{
  position:relative; z-index:1;
  color:#fff; font-weight:700; font-size:.95rem;
  padding: 16px;
}
/* Placeholder art until real photos are dropped into /images */
.ph-1{ background-color:#274a3c; background-image: radial-gradient(circle at 30% 20%, #3f7a5f, transparent 60%), linear-gradient(160deg, #0B0B0A, #274a3c); }
.ph-2{ background-color:#0e5a7a; background-image: radial-gradient(circle at 70% 30%, #1c8bb0, transparent 60%), linear-gradient(160deg, #0B0B0A, #0e5a7a); }
.ph-3{ background-color:#3a3a38; background-image: radial-gradient(circle at 50% 15%, var(--gold), transparent 55%), linear-gradient(160deg, #0B0B0A, #3a3a38); }
.ph-4{ background-color:#7a4a12; background-image: radial-gradient(circle at 40% 25%, #c47a1f, transparent 60%), linear-gradient(160deg, #0B0B0A, #7a4a12); }
.ph-5{ background-color:#7a1420; background-image: radial-gradient(circle at 60% 20%, var(--red), transparent 55%), linear-gradient(160deg, #0B0B0A, #7a1420); }
.ph-6{ background-color:#1f3d2b; background-image: radial-gradient(circle at 35% 20%, var(--green), transparent 55%), linear-gradient(160deg, #0B0B0A, #1f3d2b); }

/* When real photos are added, set e.g.
   .ph-1{ background-image: url('../images/rift-valley.jpg'); }
   background-size/position above already fit a real photo. */

/* ===== Video grid ===== */
.video-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.video-card video{
  width:100%;
  border-radius: var(--radius);
  background:#000;
  aspect-ratio: 16/9;
}
.video-caption{
  margin: 12px 0 0;
  font-weight:600;
  color: rgba(246,241,231,.85);
  font-size:.95rem;
}

/* ===== Subscribe ===== */
.subscribe-wrap{ max-width: 560px; }
.subscribe-form{
  background:#fff;
  border: 2px solid var(--black);
  border-radius: var(--radius);
  padding: 28px;
}
.subscribe-form label{
  display:block;
  font-weight:700;
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:8px;
}
.input-row{
  display:flex;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  overflow:hidden;
  margin-bottom: 14px;
}
.input-prefix{
  display:flex; align-items:center;
  padding: 0 14px;
  background: var(--black);
  color: var(--cream);
  font-weight:700;
  font-size:.95rem;
}
.input-row input{
  flex:1;
  border:0; outline:0;
  padding: 14px;
  font-size:1.05rem;
  font-family: var(--body);
  min-width:0;
}
.input-row:focus-within{ border-color: var(--gold); }
.input-row input:invalid:not(:placeholder-shown){ color: var(--red); }
.form-hint{
  font-size:.88rem;
  color: var(--muted);
  margin: 0 0 20px;
}
.form-status{
  min-height: 1.4em;
  margin: 12px 0 0;
  font-size:.9rem;
  font-weight:600;
}
.form-status.is-error{ color: var(--red); }
.form-status.is-ok{ color: var(--green); }

/* ===== Footer ===== */
.site-footer{
  background: var(--black);
  color: rgba(246,241,231,.6);
  padding: 26px 0;
  font-size:.85rem;
}
.footer-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.footer-flag{
  width:34px; height:22px; border-radius:2px; flex:none;
  background: repeating-linear-gradient(
    180deg,
    var(--black) 0 6px,
    var(--red) 6px 8px,
    var(--green) 8px 14px,
    var(--red) 14px 16px,
    var(--black) 16px 22px
  );
}

/* ===== Responsive ===== */
@media (max-width: 860px){
  .photo-grid{ grid-template-columns: repeat(2, 1fr); }
  .video-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 680px){
  .site-nav{
    position:absolute; top:68px; left:0; right:0;
    background: var(--black);
    flex-direction:column;
    align-items:flex-start;
    padding: 18px 24px 26px;
    gap:18px;
    border-bottom: 3px solid var(--red);
    display:none;
  }
  .site-nav.is-open{ display:flex; }
  .nav-toggle{ display:flex; }
  .hero{ padding: 64px 0 56px; }
  .photo-grid{ grid-template-columns: 1fr 1fr; }
  .section{ padding: 60px 0; }
}

@media (max-width: 420px){
  .photo-grid{ grid-template-columns: 1fr; }
}