/* CONFIDENTIAL - TRADE SECRET - Property of Joseph M. Castillo - All rights reserved */
/* yosemite-camp — "Go Climb A Rock" design system. Mobile-first. */

:root {
  /* ---- Go Climb A Rock palette ---- */
  --bg:        #0c0c0d;   /* near-black canvas */
  --bg-2:      #141416;   /* raised surface */
  --bg-3:      #1c1d20;   /* card */
  --ink:       #f4f3f0;   /* primary text */
  --ink-dim:   #b7b4ad;   /* secondary text */
  --ink-mute:  #7d7a73;   /* muted */
  --gold:      #d8a84b;   /* gold-hour amber — the accent */
  --gold-soft: #e7c587;
  --granite:   #3a3d42;   /* granite grey */
  --pine:      #4a6b54;   /* deep pine (rare) */
  --line:      #26262a;

  /* ---- type ---- */
  --face: "Helvetica Neue", Helvetica, Arimo, Arial, sans-serif;

  /* ---- spacing (4px base) ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:72px;

  /* ---- safe areas (iOS notch / home indicator) ---- */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  --nav-h: 56px;
}

* { box-sizing:border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior:smooth; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--face); line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }

/* ============ display type — the YMS shirt voice ============ */
.gcar {
  font-weight:700; letter-spacing:-0.04em; line-height:0.92;
  text-transform:lowercase;
}

/* ============ top bar (thumb-safe) ============ */
.topbar {
  position:fixed; top:0; left:0; right:0; z-index:50;
  height:calc(var(--nav-h) + var(--safe-t));
  padding:var(--safe-t) max(var(--s4), var(--safe-l)) 0 max(var(--s4), var(--safe-r));
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(12,12,13,0.72); backdrop-filter:saturate(160%) blur(12px);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--line);
}
.topbar .mark { font-weight:700; letter-spacing:-0.03em; font-size:17px; }
.topbar .mark b { color:var(--gold); }
.topbar .dot { color:var(--ink-mute); font-weight:400; }

/* ============ bottom tab nav — primary on mobile ============ */
.tabnav {
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:flex; justify-content:space-around; align-items:stretch;
  padding-bottom:var(--safe-b);
  background:rgba(12,12,13,0.86); backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
}
.tabnav a {
  flex:1; min-height:52px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:3px;
  color:var(--ink-mute); font-size:10px; letter-spacing:0.04em;
  text-transform:uppercase; padding:6px 2px; transition:color .18s ease;
}
.tabnav a .ic { width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.7; }
.tabnav a.active { color:var(--gold); }

/* ============ layout shell ============ */
main { padding-top:calc(var(--nav-h) + var(--safe-t)); padding-bottom:90px; }
.section { padding:var(--s7) max(var(--s4), var(--safe-l)) var(--s7) max(var(--s4), var(--safe-r)); }
.section h2.eyebrow { font-size:12px; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold); margin:0 0 var(--s2); font-weight:700; }
.section h3.title { font-weight:700; letter-spacing:-0.03em; font-size:30px; margin:0 0 var(--s4); line-height:1; }
.lead { color:var(--ink-dim); max-width:60ch; }

/* ============ HERO ============ */
.hero {
  position:relative; min-height:100svh; min-height:100vh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:var(--s6) max(var(--s5), var(--safe-l)) calc(var(--s8) + var(--safe-b)) max(var(--s5), var(--safe-r));
  overflow:hidden;
  /* gold-hour over granite — El Cap at sunset, rendered in pure CSS */
  background:
    radial-gradient(120% 80% at 70% 8%, rgba(216,168,75,0.30), transparent 55%),
    radial-gradient(140% 90% at 20% 100%, rgba(74,107,84,0.18), transparent 50%),
    linear-gradient(180deg, #1a1410 0%, #100f10 40%, #0a0a0b 100%);
}
.hero::after { /* granite grain */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero .ridge { /* a granite skyline silhouette */
  position:absolute; left:0; right:0; bottom:0; height:38vh; z-index:0; opacity:0.9;
}
.hero-inner { position:relative; z-index:2; }
.hero .kicker { color:var(--gold-soft); font-size:13px; letter-spacing:0.2em; text-transform:uppercase; font-weight:700; margin-bottom:var(--s4); }
.hero .gcar { font-size:clamp(64px, 22vw, 132px); color:var(--ink); }
.hero .gcar .amp { color:var(--gold); }
.hero .school { margin-top:var(--s4); font-weight:700; letter-spacing:-0.01em; color:var(--ink-dim); font-size:15px; }
.hero .trip {
  margin-top:var(--s6); display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4);
  align-items:baseline; color:var(--ink-dim);
}
.hero .trip .where { color:var(--ink); font-weight:700; font-size:18px; letter-spacing:-0.01em; }
.hero .trip .when { color:var(--gold); font-weight:700; }
.scrollcue { margin-top:var(--s6); color:var(--ink-mute); font-size:11px; letter-spacing:0.2em; text-transform:uppercase; animation:bob 2.4s ease-in-out infinite; }
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)} }

/* ============ generic cards / placeholders ============ */
.placeholder {
  border:1px dashed var(--line); border-radius:14px; padding:var(--s6) var(--s4);
  color:var(--ink-mute); text-align:center; background:var(--bg-2);
}
.photo-slot {
  position:relative; border-radius:14px; overflow:hidden; background:
    radial-gradient(120% 90% at 60% 10%, rgba(216,168,75,0.22), transparent 60%),
    linear-gradient(180deg, #20211f, #0e0e0f);
  border:1px solid var(--line); aspect-ratio:4/3; display:flex; align-items:flex-end; padding:var(--s4);
}
.photo-slot .cap { font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-mute); }

/* ============ family roster ============ */
.family-grid { display:grid; grid-template-columns:1fr; gap:var(--s3); margin-top:var(--s5); }
.fam-card {
  display:flex; align-items:center; gap:var(--s4);
  background:var(--bg-3); border:1px solid var(--line); border-radius:14px;
  padding:var(--s4); transition:border-color .2s ease, transform .2s ease;
}
.fam-card.lead { border-color:rgba(216,168,75,0.5); background:linear-gradient(180deg, rgba(216,168,75,0.08), var(--bg-3)); }
.fam-card .mono {
  flex:0 0 auto; width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:24px; letter-spacing:-1px;
  background:radial-gradient(120% 120% at 30% 20%, var(--gold-soft), var(--gold)); color:#171206;
}
.fam-name { margin:0; font-weight:700; letter-spacing:-0.02em; font-size:19px; }
.fam-role { color:var(--gold); font-size:12px; letter-spacing:0.12em; text-transform:uppercase; margin-top:1px; }
.fam-from { color:var(--ink-dim); font-size:13px; margin-top:3px; }
.fam-tag { color:var(--ink-mute); font-size:12px; font-style:italic; margin-top:3px; }
.photo-img { width:100%; border-radius:14px; border:1px solid var(--line); }
@media (min-width:620px){ .family-grid { grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .family-grid { grid-template-columns:1fr 1fr 1fr; } }

/* ============ trip + logistics ============ */
.badge-draft { display:inline-block; font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  color:#171206; background:var(--gold-soft); border-radius:999px; padding:4px 10px; margin-bottom:var(--s4); font-weight:700; }
.trip-meta { display:grid; grid-template-columns:1fr; gap:var(--s2); margin:var(--s4) 0 var(--s5); }
.trip-meta .tm { display:flex; gap:var(--s3); align-items:baseline; background:var(--bg-3); border:1px solid var(--line); border-radius:10px; padding:var(--s3) var(--s4); }
.trip-meta .k { color:var(--gold); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; flex:0 0 64px; font-weight:700; }
.trip-meta .v { color:var(--ink); }
.timeline { list-style:none; margin:0; padding:0; position:relative; }
.timeline .day { display:flex; gap:var(--s4); padding:var(--s3) 0; position:relative; }
.timeline .day-d { flex:0 0 58px; color:var(--gold); font-weight:700; font-size:13px; padding-top:2px; letter-spacing:0.02em; }
.timeline .day-c { border-left:2px solid var(--line); padding-left:var(--s4); padding-bottom:var(--s2); }
.timeline .day-c h4 { margin:0 0 2px; font-weight:700; letter-spacing:-0.01em; }
.timeline .day-c p { margin:0; color:var(--ink-dim); font-size:14px; }
.log-arrivals { display:grid; grid-template-columns:1fr; gap:var(--s3); margin:var(--s4) 0 var(--s6); }
.arr { display:flex; gap:var(--s4); align-items:flex-start; background:var(--bg-3); border:1px solid var(--line); border-radius:12px; padding:var(--s4); }
.arr.fly { border-color:rgba(216,168,75,0.4); }
.arr-ic { font-size:22px; color:var(--gold); flex:0 0 26px; text-align:center; }
.arr-who { font-weight:700; }
.arr-meta { color:var(--gold); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; margin:1px 0; }
.arr-detail { color:var(--ink-dim); font-size:13px; }
.gear-h { margin:var(--s5) 0 var(--s3); font-weight:700; letter-spacing:-0.01em; }
.gear { list-style:none; margin:0; padding:0; }
.gear-item { display:flex; align-items:center; gap:var(--s3); padding:var(--s3) 0; border-bottom:1px solid var(--line); }
.gear-item .box { flex:0 0 22px; height:22px; width:22px; border:1.5px solid var(--ink-mute); border-radius:6px; display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:14px; }
.gear-item .box.on { border-color:var(--gold); background:rgba(216,168,75,0.15); }
.gear-item .gi { flex:1; }
.gear-item .go { color:var(--ink-mute); font-size:12px; }
@media (min-width:620px){ .trip-meta { grid-template-columns:1fr 1fr 1fr; } .log-arrivals { grid-template-columns:1fr 1fr 1fr; } }

/* ============ legends ============ */
.legends { display:grid; grid-template-columns:1fr; gap:var(--s4); margin-top:var(--s5); }
.legend { margin:0; background:var(--bg-3); border:1px solid var(--line); border-radius:16px; overflow:hidden; transition:transform .25s ease, border-color .25s ease; }
.legend:hover, .legend:focus-within { transform:translateY(-3px); border-color:rgba(216,168,75,0.5); }
.legend-media .photo-slot { border:0; border-radius:0; aspect-ratio:3/4; }
.legend-media .photo-img { border-radius:0; border:0; aspect-ratio:3/4; object-fit:cover; }
.legend-cap { padding:var(--s4); }
.legend-cap h4 { margin:0; font-weight:700; letter-spacing:-0.02em; font-size:20px; }
.legend-for { margin:4px 0 0; color:var(--ink-dim); font-size:13px; }
.legend-q { margin:var(--s3) 0 0; color:var(--gold); font-style:italic; font-size:14px; }
@media (min-width:620px){ .legends { grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .legends { grid-template-columns:1fr 1fr 1fr; } }

/* ============ a11y: skip link + focus ============ */
.skip { position:absolute; left:-999px; top:0; z-index:100; background:var(--gold); color:#171206; padding:10px 16px; border-radius:0 0 10px 0; font-weight:700; }
.skip:focus { left:0; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; }

/* ============ reveal-on-scroll ============ */
.reveal { opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in { opacity:1; transform:none; }

/* ============ footer ============ */
.foot { padding:var(--s7) var(--s4) calc(var(--s7) + var(--safe-b)); color:var(--ink-mute); font-size:12px; text-align:center; border-top:1px solid var(--line); }
.foot b { color:var(--gold); }

/* ============ laptop / tablet enhancement (mobile is the base) ============ */
@media (min-width:760px) {
  .tabnav { left:50%; right:auto; bottom:24px; transform:translateX(-50%);
    width:auto; gap:var(--s2); border-radius:999px; border:1px solid var(--line);
    padding:0 var(--s2); box-shadow:0 10px 40px rgba(0,0,0,.5); }
  .tabnav a { min-width:88px; border-radius:999px; }
  main { padding-bottom:0; }
  .section { padding-left:max(var(--s8), 8vw); padding-right:max(var(--s8), 8vw); }
  .section h3.title { font-size:42px; }
  .hero .school { font-size:18px; }
}
@media (min-width:1100px) {
  .section { max-width:1100px; margin:0 auto; }
  .hero .gcar { font-size:clamp(96px, 12vw, 168px); }
}
@media (prefers-reduced-motion:reduce) {
  * { scroll-behavior:auto !important; animation:none !important; transition:none !important; }
  .reveal { opacity:1; transform:none; }
}