/* ==========================================================================
   ERIK UNCHARTED — stylesheet
   Organised top to bottom:
     1. Brand settings   <- change colours, grain, spacing HERE
     2. Base
     3. Reusable pieces  <- .wrap, .stamp, .sec  (use these on new sections)
     4. Hero
     5. Video
     6. Who's driving
     7. Follow links
     8. Footer
     9. Motion
   ========================================================================== */


/* ==========================================================================
   1. BRAND SETTINGS
   Almost everything you'd want to tweak lives in this one block.
   Change a value here and it updates across the whole site.
   ========================================================================== */
:root{
  /* --- Colours (from the brand identity — don't invent new ones) --- */
  --green:  #344618;   /* field green  — page background            */
  --black:  #1B1D16;   /* near-black   — stamps, video well         */
  --bone:   #E1E1E1;   /* bone white   — main text                  */
  --yellow: #F1CA30;   /* signal yellow— accents. Never below 18px. */
  --sand:   #C9BCA4;   /* warm sand    — secondary text             */
  --rust:   #B24A20;   /* rust         — one accent per screen       */

  --rule: rgba(201,188,164,.20);   /* hairline divider lines */

  /* --- Film grain strength. Higher = grittier. --- */
  --grain-strength:  .38;   /* fine grain  */
  --grain2-strength: .14;   /* coarse grain */

  /* --- Layout --- */
  --page-width: 1120px;                    /* max content width */
  --pad: clamp(1.5rem, 5vw, 4.5rem);       /* side padding */
}


/* ==========================================================================
   2. BASE
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--green);
  color:var(--bone);
  font-family:Montserrat, system-ui, sans-serif;
  font-size:clamp(1rem, .95rem + .25vw, 1.0625rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block }
a{ color:inherit }
:focus-visible{ outline:2px solid var(--yellow); outline-offset:4px; border-radius:2px }


/* --- Film grain overlay (sits above everything, ignores clicks) --- */
.grain,.grain2{ position:fixed; inset:-150%; pointer-events:none; z-index:900 }

.grain{
  opacity:var(--grain-strength);
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.58' numOctaves='4' stitchTiles='stitch'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
  background-size:190px 190px;
}
.grain2{
  opacity:var(--grain2-strength);
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='.28' numOctaves='3' stitchTiles='stitch'/></filter><rect width='300' height='300' filter='url(%23m)'/></svg>");
  background-size:420px 420px;
}


/* ==========================================================================
   3. REUSABLE PIECES
   Put class="sec wrap rise" on any new <section> and it will match the site.
   ========================================================================== */

/* Centres content and adds side padding */
.wrap{ max-width:var(--page-width); margin-inline:auto; padding-inline:var(--pad) }

/* Standard vertical spacing + top divider line */
.sec{ padding-block:clamp(4rem,11vh,7.5rem); border-top:1px solid var(--rule) }
.sec:first-of-type{ border-top:0 }

h2{ margin:0 }

/* The angled stencil label. Echoes the band in the logo. */
.stamp{
  display:inline-block;
  font-family:'Stardos Stencil', Impact, sans-serif;
  font-size:clamp(1.5rem, 1.2rem + .9vw, 1.9rem);
  line-height:1;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--yellow);
  background:var(--black);
  padding:.42em .8em .34em;
  transform:rotate(-2.2deg);
  transform-origin:left center;
  margin-bottom:2.25rem;
}


/* ==========================================================================
   4. HERO
   ========================================================================== */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:space-between;
  padding-block:clamp(1.75rem,4.5vh,3rem) clamp(3rem,9vh,5.5rem);
  overflow:hidden;
}

.hero__bg{ position:absolute; inset:0; z-index:0 }

/* object-position controls the crop: first number = left/right, second = up/down.
   Bigger second number pushes the photo UP (shows more of its bottom). */
.hero__bg img{ width:100%; height:100%; object-fit:cover; object-position:58% 67% }
@media(max-width:700px){ .hero__bg img{ object-position:40% 60% } }

/* Dark gradient so text stays readable and the page fades into green */
.hero__bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(27,29,22,.66) 0%,
    rgba(27,29,22,.10) 34%,
    rgba(52,70,24,.82) 80%,
    var(--green) 100%);
}

.hero__top,.hero__bottom{ position:relative; z-index:1; width:100% }

.wordmark{ width:clamp(168px, 20vw, 248px); height:auto }

.hero__tag{
  font-family:'Stardos Stencil', Impact, sans-serif;
  font-size:clamp(1.9rem, 1rem + 4.4vw, 4.4rem);
  line-height:1.02;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--yellow);
  margin:0;
  max-width:11ch;
}

.hero__rule{ height:3px; background:var(--rust); width:min(300px,58%); margin-top:2rem }


/* ==========================================================================
   5. VIDEO
   ========================================================================== */
.video{
  position:relative; aspect-ratio:16/9;
  background:var(--black); border:1px solid var(--rule);
  overflow:hidden;
}
.video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0 }

.video__thumb{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:saturate(.9) contrast(1.03) brightness(.82);
  transition:filter .35s ease, transform .6s ease;
}
.video__play{
  position:absolute; inset:0; width:100%; height:100%;
  display:grid; place-items:center;
  background:none; border:0; cursor:pointer; padding:0;
}
.video__play svg{
  width:clamp(66px,9vw,88px); height:auto;
  transition:transform .3s ease;
  filter:drop-shadow(0 4px 14px rgba(27,29,22,.45));
}
.video__play:hover svg,.video__play:focus-visible svg{ transform:scale(1.09) }
.video:hover .video__thumb{ filter:saturate(.95) contrast(1.05) brightness(.92); transform:scale(1.015) }
.video__play:focus-visible{ outline:2px solid var(--yellow); outline-offset:-4px }

.video__note{
  margin:1.1rem 0 0; font-size:.83rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--sand); font-weight:600;
}


/* ==========================================================================
   6. WHO'S DRIVING
   ========================================================================== */
.who{ display:grid; gap:clamp(2rem,5vw,4rem); grid-template-columns:1fr }
@media(min-width:860px){
  .who{ grid-template-columns:1fr 1fr; align-items:start; gap:clamp(2.5rem,6vw,5rem) }
}
.who p{ max-width:44ch; color:var(--bone) }
.who p + p{ margin-top:1.35rem }

.who__photo{ margin:0 }
.who__photo img{ width:100%; aspect-ratio:5/4; object-fit:cover; filter:saturate(.92) contrast(1.04) }
.who__cap{
  margin:.85rem 0 0; font-size:.78rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--sand); font-weight:600;
}


/* ==========================================================================
   7. FOLLOW LINKS
   ========================================================================== */
.links{ margin:0; padding:0; list-style:none; border-top:1px solid var(--rule) }

.links a{
  display:flex; align-items:baseline; gap:1rem;
  text-decoration:none;
  padding:clamp(1.4rem,3.4vw,2.1rem) 0;
  border-bottom:1px solid var(--rule);
  transition:color .25s ease, padding-left .25s ease;
}
.links .name{
  font-size:clamp(1.6rem, 1.1rem + 2.3vw, 2.9rem); font-weight:700;
  letter-spacing:-.015em; text-transform:uppercase; line-height:1;
}
.links .handle{
  font-size:.84rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--sand); font-weight:600; margin-left:auto; white-space:nowrap;
}
.links .arw{ font-size:1.3rem; line-height:1; color:var(--yellow); transition:transform .25s ease }

.links a:hover,.links a:focus-visible{ color:var(--yellow); padding-left:.7rem }
.links a:hover .arw{ transform:translateX(7px) }

@media(max-width:620px){
  .links a{ flex-wrap:wrap; gap:.4rem .8rem; padding-block:1.35rem }
  .links .handle{ margin-left:0; flex-basis:100%; font-size:.72rem }
  .links .arw{ margin-left:auto }
}


/* ==========================================================================
   8. FOOTER
   Three matching blocks: small label on top, one line underneath.
   ========================================================================== */
footer{ border-top:1px solid var(--rule); padding-block:clamp(3rem,7vh,4.5rem) 3rem }

.foot{ display:grid; gap:2.25rem; grid-template-columns:1fr }
@media(min-width:800px){
  .foot{ grid-template-columns:1fr auto 1fr; align-items:start; gap:3rem }
}
.foot > div{ display:flex; flex-direction:column }

.foot__label{
  font-size:.74rem; letter-spacing:.17em; text-transform:uppercase;
  color:var(--sand); font-weight:600; margin:0 0 .7rem; line-height:1.2;
}
.foot__line{ font-size:1rem; line-height:1.35; margin:0; font-weight:500 }
.foot__line--muted{ color:var(--sand); font-weight:400 }

.foot a.foot__link{
  text-decoration:none;
  border-bottom:1px solid var(--rust);
  padding-bottom:2px;
  color:var(--bone); font-weight:600;
  transition:color .25s ease, border-color .25s ease;
}
.foot a.foot__link:hover{ color:var(--yellow); border-color:var(--yellow) }

@media(min-width:800px){
  .foot__mid{ text-align:center; align-items:center }
  .foot__right{ text-align:right; align-items:flex-end }
}


/* ==========================================================================
   9. MOTION
   Any element with class="rise" fades up as it scrolls into view.
   ========================================================================== */
.rise{ opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s ease }
.rise.in{ opacity:1; transform:none }

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important }
  .rise{ opacity:1; transform:none }
}