/* ===== okhenn — polished v3.8 (global skeletons) ===== */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&family=Nunito:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Orbitron:wght@700&display=swap');
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha512-9usAa8mY30s5s+SO1zp+M9Uz+Xb8U0H+x3A3lM2LX2jTZGi4ZLJdkvRjt8WcN6iYG8YEMwRya6LL+k6qV0N/A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
      integrity="sha512-9usAa8mY30s5s+SO1zp+M9Uz+Xb8U0H+x3A3lM2LX2jTZGi4ZLJdkvRjt8WcN6iYG8YEMwRya6LL+k6qV0N/A=="
      crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.1/css/all.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.1/css/all.min.css">


/* ------------------ Design Tokens ------------------ */
:root {
  --ink: #1a1a1a;
  --muted: #6b6b6b;
  --hot: #ff46a6;   /* hot pink */
  --pop: #00d2ff;  /* teal/cyan */
  --bg1: #fff1f8;  /* cotton candy */
  --bg2: #dff7ff;  /* sky gelato */

  --radius: 20px;
  --border: 2px solid var(--ink);
  --shadow: 0 8px 16px rgba(0,0,0,.08);

  /* Header nav button size */
  --navW: 176px;
  --navH: 64px;
}

/* ------------------ Base / Reset ------------------ */
* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; padding: 0; }

body {
  font-family: Nunito, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: #fff; /* readable on dark wallpaper */

  /* skeleton wallpaper everywhere */
  background: url("/assets/skeleton-gradient.jpg") no-repeat center bottom / cover fixed;
  min-height: 100dvh;
  position: relative;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* overlay for readability */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.20) 0%,
    rgba(0,0,0,0.10) 40%,
    rgba(0,0,0,0.00) 70%,
    rgba(0,0,0,0.10) 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* content wrapper */
.wrap {
  position: relative;
  z-index: 1;
  max-width: 1000px;
  margin: 0 auto;
  padding: 6rem 1.25rem 28vh;
}

/* mobile tweak */
@media (max-width: 600px) {
  body { background-position: center 95%; }
  .wrap { padding-bottom: 34vh; }
}

/* ------------------ Keyframes ------------------ */
@keyframes wiggle { 0%{transform:rotate(0)}25%{transform:rotate(3deg)}50%{transform:rotate(-3deg)}75%{transform:rotate(2deg)}100%{transform:rotate(0)} }
@keyframes float { 0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)} }
@keyframes fade { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
@keyframes riseIn { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

/* ------------------ Header ------------------ */
header.site-header{
  position: relative;
  z-index: 10;
  text-align: center;
  background: transparent;          /* was a dark gradient */
  box-shadow: none;
  backdrop-filter: none;             /* no blur box */
  border-block: 0;
  padding: 1rem 1rem .75rem;
  color: #fff;
}

/* default sparkle (not clickable unless JS makes it so) */
.sparkle {
  display: inline-block;
  transition: transform .15s ease, text-shadow .2s ease;
}

/* linkable state (only applied on journal page) */
.sparkle--link {
  cursor: pointer;
}
.sparkle--link:hover,
.sparkle--link:focus-visible {
  transform: translateY(-1px) scale(1.05);
  text-shadow:
    0 0 6px rgba(255,70,166,.70),
    0 0 12px rgba(255,70,166,.60),
    0 0 24px rgba(255,70,166,.45);
  outline: none;
}

/* Tagline centered between logo and nav */
.site-tagline{
  margin: .15rem auto .65rem;
  max-width: 900px;
  padding: 0 .5rem;
  color: #fff;
  font-weight: 400;                  /* was 600 */
  text-shadow: 0 1px 6px rgba(0,0,0,.18);
}

.home-logo { display: block; margin: 0 auto .25rem; }
.home-logo img {
  width: 100px; height: auto; border-radius: 20%;
  transition: transform .25s ease, box-shadow .25s ease;
  animation: float 4s ease-in-out infinite;
  filter: drop-shadow(0 1px 6px rgba(0,0,0,.25));
}
.home-logo img:hover { transform: scale(1.08) rotate(-3deg); box-shadow: 0 8px 20px rgba(0,0,0,.15); }
}

}
.main-nav::-webkit-scrollbar { height: 6px; }
.main-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 999px; }

/* One-row grid: 6 items spanning full width */
.main-nav{
  display: grid;
  grid-template-columns: repeat(6, 1fr);   /* one row */
  gap: .6rem;
  padding: 0 .75rem;
}

.nav-card{
  display: flex; justify-content: center; align-items: center;
  height: 56px;                             /* uniform height */
  padding: 0 .5rem;
  /* keep your dark-gradient style */
  background-image: url("/assets/dark-gradient.png");
  background-repeat: no-repeat; background-position: center; background-size: cover;
  border: 2px solid #1a0b0b; border-radius: 14px;
  color:#fff; text-decoration:none;
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(.62rem, 1.3vw, .8rem);   /* scales with page size */
  letter-spacing:.05em; text-transform:uppercase;
  box-shadow: 0 6px 14px rgba(0,0,0,.35);
  transition: transform .2s ease, box-shadow .2s ease, background-color .25s ease, border-color .25s ease;
  text-shadow: 0 0 3px rgba(255,211,105,.5), 0 0 6px rgba(184,110,0,.35);
}

.nav-card:hover,
.nav-card:focus-visible{
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 22px rgba(0,0,0,.45);
  background-color: rgba(255,255,255,.12);
  background-blend-mode: lighten;
  border-color: rgba(255,255,255,.25);
  outline: none;
  text-shadow:
    0 0 6px rgba(255,70,166,.70),
    0 0 12px rgba(255,70,166,.60),
    0 0 24px rgba(255,70,166,.45);
}
.nav-card[aria-current="page"]{
  border-color: rgba(255,255,255,.35);
  background-color: rgba(255,255,255,.10);
  background-blend-mode: lighten;
}

/* ------------------ Footer (card-style) ------------------ */
/* Footer: transparent, single row, mini hollow chips */
/* ===== Footer (3 rows: nav chips / socials / copyright) ===== */
.site-footer{
  margin-top: 2rem;
  color: #fff;
}
.site-footer .footer-inner{
  max-width: 1000px;
  margin: 0 auto;
  padding: 0.75rem 0.75rem 1rem;
  background: transparent;   /* no big box so skeletons show */
  border: 0;
  box-shadow: none;
  display: grid;
  gap: .6rem;                /* spacing between rows */
}

.footer-row{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

/* --- Hit counter row (matches copyright font; glows on hover) --- */
.hit-counter{
  font-family: inherit; /* same as copyright/body (Nunito) */
  font-size: clamp(.55rem, 1.1vw, .85rem);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.25);
  justify-content: center;
  padding: .25rem 0;
  opacity: .95;
  transition: text-shadow .2s ease, transform .2s ease;
}

.hit-counter:hover{
  transform: translateY(-1px);
  /* soft hot-pink neon inspired by card hover */
  text-shadow:
    0 0 6px rgba(255,70,166,0.7),
    0 0 12px rgba(255,70,166,0.6),
    0 0 24px rgba(255,70,166,0.45);
}

/* Row 1: hollow nav chips with border matching text color */
/* --- Footer row 1: ONE ROW, 6 equal columns, auto-shrinking chips & text --- */
.footer-nav{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);        /* change 6 if you add/remove links */
  align-items: center;
  gap: clamp(.25rem, 1vw, .6rem);               /* gap also shrinks */
}

.footer-chip{
  min-width: 0;                                  /* allow true shrinking */
  width: 100%;
  text-align: center;
  white-space: nowrap;                           /* keep labels on one line */

  /* box sizing scales with viewport, reliably */
  padding-block: clamp(.35em, 1vw, .8em);
  padding-inline: clamp(.25rem, .9vw, .9rem);
  min-height: clamp(28px, 4.2vw, 44px);

  background: transparent;
  color: #fff;
  border: 2px solid currentColor;
  border-radius: 12px;
  text-decoration: none;

  font-family: 'Press Start 2P', monospace;
  /* TEXT SHRINKS with screen: conservative floor + responsive middle + cap */
  font-size: clamp(.36rem, 1.35vw, .70rem);
  letter-spacing: clamp(.01em, .22vw, .06em);
  line-height: 1;

  text-shadow: 0 1px 4px rgba(0,0,0,.25);
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}

.footer-chip:hover,
.footer-chip:focus-visible{
  transform: translateY(-2px);
  background-color: rgba(255,255,255,.08);
  outline: none;
}

/* Extra squeeze on small phones so it STILL fits in one row */
@media (max-width: 480px){
  .footer-nav{ gap: clamp(.18rem, .6vw, .35rem); }
  .footer-chip{
    font-size: clamp(.34rem, 1.2vw, .56rem);
    letter-spacing: clamp(.01em, .18vw, .04em);
    padding-inline: clamp(.18rem, .7vw, .55rem);
    min-height: clamp(26px, 5vw, 36px);
    border-width: 1.8px;
  }
}

@media (max-width: 360px){
  .footer-chip{
    font-size: .32rem;           /* hard floor so it never wraps */
    letter-spacing: .01em;
    padding-inline: .18rem;
    border-width: 1.5px;
  }
  .footer-nav{ gap: .22rem; }
}

/* Row 2: lighter, semi-transparent circular icon buttons */
.footer-social{ gap: .75rem; }

.social-icon{
  width: clamp(34px, 4vw, 40px);
  height: clamp(34px, 4vw, 40px);
  display: inline-flex;
  justify-content: center;
  align-items: center;

  color: rgba(255,255,255,.72);              /* lighter */
  border: 2px solid rgba(255,255,255,.72);   /* matches icon color */
  background: transparent;
  border-radius: 50%;

  text-decoration: none;
  font-size: clamp(1rem, 2.2vw, 1.2rem);     /* icon size */
  transition: transform .15s ease, color .15s ease, border-color .15s ease, background-color .15s ease;
}
.social-icon:hover,
.social-icon:focus-visible{
  transform: translateY(-2px);
  color: #ff46a6;
  border-color: #ff46a6;
  background-color: rgba(255,255,255,.08);
  outline: none;
}

/* Row 3: copyright centered */
.copyright{
  opacity: .9;
  font-size: .9rem;
  text-align: center;
}


.to-top{
  position: absolute; right: 12px; bottom: 12px;
  width: 42px; height: 42px; display: grid; place-items: center;
  background: rgba(255,255,255,.08);
  border: 2px solid #1a0b0b; border-radius: 50%;
  color: #fff; text-decoration: none; font-weight: 700;
  box-shadow: 0 6px 14px rgba(0,0,0,.35);
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}
.to-top:hover{ transform: translateY(-2px); background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); }

@media (min-width: 720px){
  .site-footer .footer-inner{
    grid-template-columns: 80px 1fr 1fr 80px;
    grid-template-areas:
      "logo nav nav top"
      ". social copyright .";
    text-align: left;
  }
  .footer-logo{ grid-area: logo; justify-self: center; }
  .footer-nav{ grid-area: nav; justify-content: flex-start; }
  .footer-social{ grid-area: social; justify-content: flex-start; }
  .copyright{ grid-area: copyright; }
  .to-top{ grid-area: top; position: static; justify-self: end; }
}

/* ------------------ Type ------------------ */
h1, h2, h3 { font-family: "Space Grotesk", Nunito, sans-serif; letter-spacing: .2px; }
h1 { margin: .25rem 0; font-size: 2.6rem; }
h2 { margin: 0 0 .4rem; font-size: 1.6rem; }
.tag { color: var(--muted); margin: .25rem 0 0; }

/* ------------------ Main ------------------ */
main { padding: 2rem 1rem; }
.squig { display: block; margin: 1.25rem auto; width: 120px; opacity: .9; }

/* ------------------ Cards & Grids ------------------ */
.cards {
  display: grid;
  grid-template-columns: 1fr; /* always one column */
  gap: 1rem;
  margin-top: 1rem;
}

.card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;

  min-height: 200px;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;

  background: url("/assets/dark-gradient.png") no-repeat center / cover;
  border: 2px solid #1a0b0b;
  border-radius: var(--radius);
  padding: 1.5rem;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 6px 14px rgba(0,0,0,0.4);
  backdrop-filter: blur(4px);
  transition: transform .2s ease, box-shadow .2s ease, background-color .3s ease;

  opacity: 0;
  animation: riseIn .6s ease forwards;
}
.cards .card:nth-child(1){ animation-delay:.1s; }
.cards .card:nth-child(2){ animation-delay:.2s; }
.cards .card:nth-child(3){ animation-delay:.3s; }
.cards .card:nth-child(4){ animation-delay:.4s; }
.cards .card:nth-child(5){ animation-delay:.5s; }

/* Card title — Press Start 2P, crisp with soft neon on hover */
.card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: 0.05em;
  font-family: 'Press Start 2P', monospace;
  font-weight: 400;
  text-transform: uppercase;
  text-align: center;

  background: linear-gradient(180deg, #ffd369 0%, #b86e00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  -webkit-text-stroke: 1px #3b1b00;
  text-shadow: 1px 1px 0 #3b1b00;

  image-rendering: pixelated;
  text-rendering: geometricPrecision;

  transition: transform .2s ease, text-shadow .2s ease, color .2s ease;
}

.card:hover h3 {
  transform: scale(1.05);

  /* switch OFF the gradient fill so color & glow actually render */
  background: none;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: currentColor; /* critical */
  color: var(--hot);

  /* neon glow */
  text-shadow:
    0 0 6px var(--hot),
    0 0 12px rgba(255,70,166,0.7),
    0 0 24px rgba(255,70,166,0.5),
    1px 1px 0 #3b1b00; /* crisp edge under glow */

  /* keep stroke color if you use it */
  -webkit-text-stroke-color: #3b1b00;
}

/* === DARKER GOLD HOVER FOR CARD TITLES === */
:root {
  --gold: #e6b400;        /* darker, deeper gold */
  --gold-deep: #b87900;   /* bronze undertone */
  --gold-glow-1: rgba(230,180,0,.95);
  --gold-glow-2: rgba(184,121,0,.65);
}

.card:hover h3,
.card:focus-visible h3 {
  transform: scale(1.05);

  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: var(--gold) !important;
  color: var(--gold) !important;

  -webkit-text-stroke: 1px #3b1b00;
  text-shadow:
    0 0 6px var(--gold-glow-1),
    0 0 12px var(--gold-glow-1),
    0 0 24px var(--gold-glow-2),
    1px 1px 0 #3b1b00;
}

.card p {
  margin: 0;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.85);
}


/* ------------------ Journal ------------------ */
.post { background:#fff; border:var(--border); border-radius:var(--radius); padding:1rem; margin:0 0 1rem; box-shadow:var(--shadow); }
.date { font-size:.85rem; color:var(--muted); }

/* ------------------ Adventures ------------------ */
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem; }
.card--photo { overflow:hidden; }
.card--photo img { width:100%; height:180px; object-fit:cover; border-bottom:var(--border); }
.card--photo .p { padding:.9rem; }

/* ------------------ Cooking ------------------ */
.muted { color:var(--muted); }

/* ------------------ Contact / Forms ------------------ */
form { background:#fff; border:var(--border); border-radius:var(--radius); padding:1rem; display:grid; gap:.75rem; box-shadow:var(--shadow); }
input, textarea { padding:.8rem; border:var(--border); border-radius:12px; font:inherit; }
button {
  padding:.7rem 1.1rem; border:var(--border); border-radius:999px; background:#fff; cursor:pointer;
  transition: transform .1s ease, box-shadow .15s ease, background .2s;
}
button:hover { transform:translateY(-2px); box-shadow:0 10px 20px rgba(0,0,0,.12); background:#f8f8f8; }

/* ------------------ Helpers / Utils ------------------ */
.fade-in { animation: fade .4s ease both; }
.floaty  { animation: float 4s ease-in-out infinite; }
.center  { text-align: center; }