/* ===========================================================
   THE ESCAPE POD DIARIES — grunge/vanlife site
   Tokens
   =========================================================== */
:root{
  --ink:      #1b1815;   /* asphalt / near-black, warm */
  --ink-2:    #26221d;   /* panel bg, slightly lighter */
  --paper:    #e8dfc8;   /* aged bone paper */
  --paper-dim:#c9bfa4;
  --rust:     #b3552b;   /* oxidised T4 panel */
  --rust-2:   #8a3f1f;
  --olive:    #5c5c3f;   /* canvas / army */
  --hazard:   #d9a441;   /* tape / sticker highlight */
  --moss:     #4a5a3a;

  --font-display: 'Anton', Impact, sans-serif;
  --font-kicker:  'Special Elite', 'Courier New', monospace;
  --font-body:    'Archivo', 'Helvetica Neue', Arial, sans-serif;

  --edge: 2px;
  --max: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

::selection{ background:var(--rust); color:var(--paper); }

/* focus visibility (accessibility floor) */
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:3px solid var(--hazard);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ===========================================================
   Film-grain / paper-grain overlay — the cohesive texture layer
   =========================================================== */
.grain{
  position:fixed; inset:0;
  z-index:999;
  pointer-events:none;
  opacity:0.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* rust bleed at edges of the viewport, very subtle */
.vignette{
  position:fixed; inset:0; z-index:998; pointer-events:none;
  background:
    radial-gradient(ellipse at top left, rgba(179,85,43,0.16), transparent 45%),
    radial-gradient(ellipse at bottom right, rgba(0,0,0,0.55), transparent 55%);
}

/* ===========================================================
   Utility: gaffer-tape kicker tag — the signature motif
   =========================================================== */
.tape-tag{
  display:inline-block;
  position:relative;
  font-family:var(--font-kicker);
  font-size:0.78rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--ink);
  background:var(--hazard);
  padding:0.45em 1em;
  transform:rotate(-2deg);
  clip-path:polygon(1.5% 15%,3% 0,97% 5%,100% 85%,98% 100%,2% 96%);
  box-shadow:0 3px 0 rgba(0,0,0,0.35);
}
.tape-tag::before,.tape-tag::after{
  content:"";
  position:absolute; top:-6px; width:14px; height:22px;
  background:rgba(255,255,255,0.35);
  transform:rotate(8deg);
}
.tape-tag::before{ left:-4px; }
.tape-tag::after{ right:-4px; transform:rotate(-8deg); }

.section-head{
  max-width:var(--max);
  margin:0 auto;
  padding:0 24px;
}
.section-head h2{
  font-family:var(--font-display);
  font-size:clamp(2rem,5vw,3.2rem);
  text-transform:uppercase;
  letter-spacing:0.01em;
  margin:0.35em 0 0.2em;
  color:var(--paper);
  text-shadow:2px 2px 0 var(--rust-2), -1px -1px 0 rgba(0,0,0,0.4);
}
.section-head p{
  max-width:56ch;
  color:var(--paper-dim);
  margin:0 0 2.2rem;
}

/* stencil-style spray overspray text used sparingly */
.spray{
  text-shadow:
    2px 0 0 rgba(179,85,43,0.5),
    -2px 0 0 rgba(179,85,43,0.35),
    0 3px 0 rgba(0,0,0,0.5);
}

/* ===========================================================
   Nav
   =========================================================== */
.nav{
  position:sticky; top:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px;
  background:linear-gradient(var(--ink) 92%, transparent);
  border-bottom:var(--edge) solid var(--rust);
  backdrop-filter:blur(2px);
}
.nav__brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-display);
  font-size:1.15rem;
  letter-spacing:0.03em;
  text-transform:uppercase;
}
.nav__brand .paw{ font-size:1.2rem; }
.nav__links{
  display:flex; gap:26px;
  font-family:var(--font-kicker);
  font-size:0.85rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
}
.nav__links a{
  position:relative; padding:4px 2px;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-3px;
  width:0%; height:2px; background:var(--hazard);
  transition:width 0.25s ease;
}
.nav__links a:hover::after,.nav__links a:focus-visible::after{ width:100%; }
.nav__toggle{
  display:none;
  background:none; border:1px solid var(--paper-dim); color:var(--paper);
  padding:8px 10px; cursor:pointer;
}

@media (max-width:760px){
  .nav__links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0;
    background:var(--ink-2);
    border-bottom:var(--edge) solid var(--rust);
    max-height:0; overflow:hidden;
  }
  .nav__links.open{ max-height:320px; }
  .nav__links a{ padding:16px 24px; border-top:1px solid rgba(232,223,200,0.08); }
  .nav__toggle{ display:block; }
}

/* ===========================================================
   Hero
   =========================================================== */
.hero{
  position:relative;
  min-height:92vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:120px 20px 80px;
  background:
    linear-gradient(160deg, rgba(27,24,21,0.4), rgba(27,24,21,0.92)),
    repeating-linear-gradient(115deg, rgba(179,85,43,0.06) 0 2px, transparent 2px 40px),
    var(--ink);
  border-bottom:var(--edge) solid var(--olive);
  overflow:hidden;
}
.hero__stamp{
  position:absolute; top:26px; right:26px;
  width:108px; height:108px;
  border:2px dashed var(--paper-dim);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transform:rotate(-12deg);
  opacity:0.75;
}
.hero__stamp span{
  font-family:var(--font-kicker);
  font-size:0.62rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  text-align:center;
  line-height:1.4;
}
.hero__content{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; }

.hero__cutout{
  position:absolute;
  bottom:-6px;
  z-index:1;
  pointer-events:none;
  filter:drop-shadow(0 16px 22px rgba(0,0,0,0.55));
}
.hero__cutout img{ display:block; width:100%; height:auto; }
.hero__cutout--van{
  left:10px;
  width:340px;
  transform:rotate(-4deg);
}
.hero__cutout--crew{
  right:10px;
  width:260px;
  transform:rotate(3deg);
}

@media (max-width:900px){
  .hero__cutout--van{ width:220px; left:6px; }
  .hero__cutout--crew{ width:170px; right:6px; }
}
@media (max-width:600px){
  .hero__cutout{ display:none; }
}

.hero__kicker{ margin-bottom:1.6rem; }
.hero h1{
  font-family:var(--font-display);
  font-size:clamp(2.6rem,9vw,6.2rem);
  line-height:0.95;
  margin:0;
  text-transform:uppercase;
  letter-spacing:0.01em;
}
.hero__sub{
  font-family:var(--font-kicker);
  color:var(--paper-dim);
  font-size:clamp(0.85rem,2vw,1.05rem);
  letter-spacing:0.06em;
  margin:1.3rem 0 2.4rem;
  text-transform:uppercase;
}
.hero__ctas{ display:flex; gap:18px; flex-wrap:wrap; justify-content:center; }

.btn-tape{
  font-family:var(--font-kicker);
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-size:0.85rem;
  padding:14px 26px;
  background:var(--rust);
  color:var(--paper);
  border:none;
  cursor:pointer;
  position:relative;
  box-shadow:0 4px 0 var(--rust-2), 0 4px 10px rgba(0,0,0,0.5);
  transform:rotate(-1deg);
  transition:transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-tape:hover{ transform:rotate(0deg) translateY(-2px); box-shadow:0 6px 0 var(--rust-2), 0 8px 14px rgba(0,0,0,0.55); }
.btn-tape--ghost{
  background:transparent;
  border:2px solid var(--paper-dim);
  color:var(--paper);
  box-shadow:none;
  transform:rotate(1deg);
}
.btn-tape--ghost:hover{ border-color:var(--hazard); color:var(--hazard); }

.hero__scroll{
  margin-top:60px;
  font-family:var(--font-kicker);
  font-size:0.7rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--paper-dim);
  animation:bob 2.2s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(8px);} }

/* ===========================================================
   About / "The Rig"
   =========================================================== */
.rig{
  padding:100px 0 90px;
  background:var(--ink-2);
  border-bottom:var(--edge) solid var(--rust);
}
.rig__grid{
  max-width:var(--max); margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:0.85fr 1fr; gap:56px; align-items:center;
}
.rig__photo{
  position:relative;
  aspect-ratio:4/5;
  background:
    linear-gradient(135deg, #3a3f2e, #1c2116 60%),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.15) 0 3px, transparent 3px 6px);
  border:6px solid var(--paper);
  box-shadow:0 14px 30px rgba(0,0,0,0.5);
  transform:rotate(-3deg);
  display:flex; align-items:flex-end;
}
.rig__photo::before{ /* windshield glare / horizon */
  content:"";
  position:absolute; inset:0;
  z-index:1;
  background:linear-gradient(200deg, rgba(217,164,65,0.18), transparent 40%);
}
.rig__photo-img{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  object-fit:cover;
}
.rig__photo-cap{
  position:relative; z-index:2;
  width:100%;
  font-family:var(--font-kicker);
  font-size:0.72rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  background:rgba(27,24,21,0.75);
  padding:10px 14px;
}
.rig__photo-tape{
  position:absolute; top:-16px; left:50%; transform:translateX(-50%) rotate(-4deg);
  z-index:2;
  width:70px; height:26px; background:rgba(232,223,200,0.55);
}
.rig__copy .tape-tag{ margin-bottom:1.2rem; }
.rig__copy h2{
  font-family:var(--font-display);
  font-size:clamp(1.9rem,4vw,2.7rem);
  text-transform:uppercase;
  margin:0 0 0.7rem;
}
.rig__copy p{ color:var(--paper-dim); margin:0 0 1.1rem; }
.rig__copy p strong{ color:var(--paper); }

@media (max-width:860px){
  .rig__grid{ grid-template-columns:1fr; }
  .rig__photo{ max-width:340px; margin:0 auto; }
}

/* ===========================================================
   Videos — "Latest Dispatches"
   =========================================================== */
.dispatches{ padding:100px 0 90px; }

.video-grid{
  max-width:var(--max); margin:0 auto; padding:0 24px;
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:26px;
}

@media (max-width:1000px){
  .video-grid{ grid-template-columns:repeat(3, 1fr); }
}
@media (max-width:640px){
  .video-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:420px){
  .video-grid{ grid-template-columns:1fr; }
}

.video-card{
  background:var(--ink-2);
  border:1px solid rgba(232,223,200,0.1);
  position:relative;
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.video-card:nth-child(3n+1){ transform:rotate(-0.6deg); }
.video-card:nth-child(3n+2){ transform:rotate(0.5deg); }
.video-card:nth-child(3n){ transform:rotate(-0.3deg); }
.video-card:hover{ transform:rotate(0deg) translateY(-5px); box-shadow:0 14px 24px rgba(0,0,0,0.45); z-index:2; }

.video-card__thumb{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--olive);
}
.video-card__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.video-card__play{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(27,24,21,0.0);
  transition:background 0.2s ease;
}
.video-card:hover .video-card__play{ background:rgba(27,24,21,0.25); }
.video-card__play svg{ width:52px; height:52px; opacity:0; transform:scale(0.85); transition:all 0.2s ease; filter:drop-shadow(0 3px 6px rgba(0,0,0,0.6)); }
.video-card:hover .video-card__play svg{ opacity:1; transform:scale(1); }

.video-card__date{
  position:absolute; top:8px; left:8px;
  font-family:var(--font-kicker);
  font-size:0.62rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  background:var(--hazard);
  color:var(--ink);
  padding:3px 8px;
  transform:rotate(-3deg);
}
.video-card__body{ padding:14px 16px 18px; }
.video-card__title{
  font-family:var(--font-body);
  font-weight:700;
  font-size:0.95rem;
  line-height:1.3;
  margin:0;
  color:var(--paper);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

.video-skel{ background:var(--ink-2); border:1px solid rgba(232,223,200,0.08); }
.video-skel__thumb{ aspect-ratio:16/9; background:linear-gradient(100deg, #201d19 30%, #2c2721 50%, #201d19 70%); background-size:220% 100%; animation:shimmer 1.6s infinite; }
.video-skel__line{ height:12px; margin:14px 16px; background:rgba(232,223,200,0.08); }
.video-skel__line--short{ width:60%; }
@keyframes shimmer{ 0%{ background-position:140% 0; } 100%{ background-position:-40% 0; } }

.dispatches__more{
  max-width:var(--max); margin:44px auto 0; padding:0 24px;
  display:flex; justify-content:center;
}

.feed-note{
  max-width:var(--max); margin:0 auto; padding:0 24px 8px;
  font-family:var(--font-kicker);
  font-size:0.8rem;
  color:var(--paper-dim);
}
.feed-note--error{ color:var(--hazard); }

/* ===========================================================
   Trail / Instagram sticker wall
   =========================================================== */
.trail{
  padding:100px 0 100px;
  background:var(--ink-2);
  border-top:var(--edge) solid var(--rust);
  border-bottom:var(--edge) solid var(--rust);
}
.sticker-wall{
  max-width:var(--max); margin:0 auto 46px; padding:0 24px;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px,1fr));
  gap:20px;
}
.sticker{
  aspect-ratio:1/1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px;
  font-family:var(--font-kicker);
  font-size:0.72rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
  text-align:center;
  color:var(--ink);
  padding:14px;
  cursor:pointer;
  transition:transform 0.2s ease;
  box-shadow:0 6px 14px rgba(0,0,0,0.35);
}
.sticker:hover{ transform:scale(1.05) rotate(0deg) !important; }
.sticker svg{ width:34px; height:34px; }
.sticker:nth-child(1){ background:var(--hazard); transform:rotate(-4deg); }
.sticker:nth-child(2){ background:var(--paper); transform:rotate(3deg); }
.sticker:nth-child(3){ background:var(--rust); color:var(--paper); transform:rotate(-2deg); }
.sticker:nth-child(4){ background:var(--moss); color:var(--paper); transform:rotate(4deg); }
.sticker:nth-child(5){ background:var(--paper); transform:rotate(-3deg); }
.sticker:nth-child(6){ background:var(--olive); color:var(--paper); transform:rotate(2deg); }

.trail__cta{
  max-width:var(--max); margin:0 auto; padding:0 24px;
  text-align:center;
}
.trail__cta p{ color:var(--paper-dim); margin:0 0 1.4rem; font-family:var(--font-kicker); font-size:0.85rem; letter-spacing:0.04em; }
.trail__cta-row{ display:flex; gap:18px; flex-wrap:wrap; justify-content:center; }

/* ===========================================================
   Footer
   =========================================================== */
.footer{
  padding:60px 24px 34px;
  text-align:center;
  border-top:var(--edge) solid var(--rust);
}
.footer__plate{
  display:inline-block;
  border:2px solid var(--paper-dim);
  padding:10px 22px;
  font-family:var(--font-display);
  letter-spacing:0.08em;
  font-size:1rem;
  margin-bottom:22px;
  transform:rotate(-1deg);
}
.footer__socials{ display:flex; gap:22px; justify-content:center; margin-bottom:22px; }
.footer__socials a{
  width:42px; height:42px;
  border:1px solid var(--paper-dim);
  display:flex; align-items:center; justify-content:center;
  transition:border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.footer__socials a:hover{ border-color:var(--hazard); color:var(--hazard); transform:translateY(-3px); }
.footer small{ color:var(--paper-dim); font-family:var(--font-kicker); font-size:0.72rem; letter-spacing:0.04em; }

@media (max-width:600px){
  .hero{ padding-top:100px; }
  .hero__stamp{ display:none; }
  .rig,.dispatches,.trail{ padding-top:70px; padding-bottom:70px; }
}