/* =========================
   Follincraft — Clean Styles
   ========================= */

/* ---- Theme + radii ---- */
:root{
  --accent:#ea580c;
  --ink:#e5e7eb;
  --muted:#9ca3af;
  --line:#2a2f36;
  --panel:#0f1115;
  --bg:#0a0c0f;

  --r:12px;         /* global rounded rect */
  --r-sm:10px;

  --navh:68px;

  /* Cards */
  --card-title-fs:16px;
  --card-body-fs:15px;
  --card-pill-fs:12px;

  /* Modal layout knobs */
  --media-col:max(520px, 56vw);
  --gal-h:clamp(360px, 56vh, 720px);   /* big, Camp-style */
  --section-gap:10px;                  /* your requested spacing */
}

/* ---- Base ---- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--accent) #0b0c0f}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#0b0c0f}
::-webkit-scrollbar-thumb{background:var(--accent);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:#ff884d}
body{background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.6}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
:target{scroll-margin-top:calc(var(--navh) + 10px)}

/* ---- Header/Nav ---- */
header{
  position:fixed;left:0;right:0;height:var(--navh);z-index:1200;
  background:rgba(0,0,0,.92);border-bottom:1px solid var(--line);backdrop-filter:blur(10px)
}
.nav{height:100%;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px}
.logo{width:44px;height:44px;border-radius:8px;background:#000;border:2px solid var(--line);display:grid;place-items:center;font-weight:800;font-size:20px;color:#fff}
.logo .c{color:var(--accent)}
.brand h1{font-size:20px;font-weight:700;line-height:1}
#topNav{display:flex;gap:8px;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
#topNav::-webkit-scrollbar{display:none}
nav a{
  color:var(--accent);font-size:14px;text-decoration:none;
  padding:8px 10px;border:1px solid var(--line);
  border-radius:var(--r-sm);transition:.2s
}
nav a:hover{border-color:var(--accent);background:color-mix(in oklab, var(--accent) 12%, transparent);color:#fff}
nav a.active{background:#fff;color:#000;border-color:#fff}
.menu-btn{display:none;border:1px solid var(--line);background:#000;color:var(--accent);padding:8px 10px;border-radius:var(--r-sm);cursor:pointer}

/* ---- Buttons / Chips (rounded rectangles site-wide) ---- */
.btn,.chip,.pill{border-radius:var(--r-sm)}
.btn{
  display:inline-block;border:1px solid var(--accent);color:var(--accent);
  padding:10px 14px;text-decoration:none;transition:.2s;cursor:pointer;background:transparent
}
.btn:hover{background:var(--accent);color:#000;transform:translateY(-2px)}
.btn.solid{background:var(--accent);color:#000;border-color:var(--accent)}
.chip,.pill{
  display:inline-block;border:1px solid var(--line);padding:6px 10px;background:#0e0e0e;color:var(--ink);font-size:13px
}
.chip.active{background:var(--accent);color:#000;border-color:var(--accent)}

/* ---- Sections / Grid / Cards ---- */
section{padding:56px 0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;align-items:stretch}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px;transition:.2s}
.card:hover{transform:translateY(-2px);box-shadow:0 8px 16px rgba(0,0,0,.3)}
.card,.project-card,.code-card,.camp-card,.gear-card{display:flex;flex-direction:column;height:100%}

/* Thumbs: consistent 3:2 frame */
.card .thumb,.project-card .thumb,.code-card .thumb,.camp-card .thumb,.gear-card .thumb{
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#0e0e0e;aspect-ratio:3/2;min-height:clamp(180px,20vw,240px)
}
.card .thumb img,.project-card .thumb img,.code-card .thumb img,.camp-card .thumb img,.gear-card .thumb img{
  width:100%;height:100%;object-fit:cover;display:block
}
.card-body{display:flex;flex-direction:column;gap:8px;height:100%}
.card h4{margin:10px 0 6px;font-size:var(--card-title-fs);line-height:1.25}
.card .desc,.card .lead{
  font-size:var(--card-body-fs);line-height:1.45;color:var(--muted);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden
}
.card-tags,.project-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.card-tags .pill,.project-tags .chip{font-size:var(--card-pill-fs);padding:3px 8px;border-radius:8px;border:1px solid var(--line);background:#0f1013}

/* ---- Forms ---- */
form{display:grid;gap:20px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.input{width:100%;padding:12px;border:1px solid var(--line);border-radius:var(--r-sm);background:#0f0f0f;color:var(--ink);font-size:15px}
.input:focus{outline:none;border-color:var(--accent);background:#0a0a0a}
textarea.input{min-height:140px;resize:vertical}
.contact-box{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px}

/* ---- Modals (UNIFIED across project/camp/code/gear) ---- */
.modal{
  position:fixed;inset:0;background:rgba(10,12,15,.45);backdrop-filter:blur(12px) saturate(110%);
  display:flex;align-items:center;justify-content:center;padding:22px;z-index:2000;opacity:0;visibility:hidden;transition:.3s
}
.modal.open{opacity:1;visibility:visible}
.modal::before{content:"";position:fixed;inset:0;z-index:0;background:var(--modal-bg,transparent) center/cover no-repeat fixed;filter:blur(24px) saturate(120%);transform:scale(1.06);opacity:.35;pointer-events:none}
.modal-card{
  position:relative;z-index:1;background:#0f0f0f;border:1px solid var(--line);border-radius:var(--r);
  width:min(1180px,95vw);max-height:92vh;display:grid;grid-template-rows:auto 1fr;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6)
}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}
.close-btn{border:1px solid var(--line);background:#0b0b0b;color:var(--ink);border-radius:var(--r-sm);padding:8px 10px;cursor:pointer}
.close-btn:hover{border-color:var(--accent);color:var(--accent)}

/* Body: two columns (media left, details right) */
.modal-body{
  display:grid;grid-template-columns:minmax(0,var(--media-col)) 1fr;gap:16px;padding:16px;align-items:start;overflow:auto
}
@media (max-width:900px){.modal-body{grid-template-columns:1fr}}

/* Gallery: Camp-style “contain” with blurred infill */
.gallery{
  position:relative;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#111827;min-height:var(--gal-h)
}
.gallery::before{
  content:"";position:absolute;inset:0;z-index:0;background:var(--img) center/cover no-repeat;filter:blur(10px) saturate(105%);transform:scale(1.08);opacity:.38;
  -webkit-mask-image:radial-gradient(120% 120% at 50% 50%, #000 60%, transparent 100%);mask-image:radial-gradient(120% 120% at 50% 50%, #000 60%, transparent 100%)
}
.gallery img{position:relative;z-index:1;width:100%;height:var(--gal-h);object-fit:contain;background:transparent}
.gal-btn{
  position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:12px;font-size:24px;display:grid;place-items:center;
  color:#fff;background:rgba(0,0,0,.55);border:1px solid var(--line);box-shadow:0 6px 18px rgba(0,0,0,.35)
}
.gal-btn:hover{background:color-mix(in oklab, var(--accent) 24%, rgba(0,0,0,.55));border-color:var(--accent)}
#prevProjectPhoto,#prevPhoto,#prevCodePhoto,#prevGearPhoto{left:10px}
#nextProjectPhoto,#nextPhoto,#nextCodePhoto,#nextGearPhoto{right:10px}
.thumb-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px}
.thumb-row img{height:72px;width:auto;object-fit:cover;border-radius:8px;border:1px solid var(--line);background:#111;cursor:pointer}

/* Details column — STACKED section titles, single border, full width */
.details{display:grid;grid-template-columns:1fr;gap:var(--section-gap)}
.meta-block{display:flex;flex-wrap:wrap;gap:8px}
.meta-block .pill,.meta-block .chip{
  border:1px solid var(--accent);background:transparent;color:var(--accent);padding:4px 8px;border-radius:var(--r-sm);font-size:12px;font-weight:600
}

/* Section block */
.kv{border:1px solid var(--line);border-radius:var(--r);background:rgba(255,255,255,.02);padding:12px}
.kv .k{
  display:block;margin:0 0 6px;font-size:12px;letter-spacing:.04em;font-weight:800;color:var(--accent);text-transform:uppercase;border-bottom:0
}
.kv .v{margin:0;padding:0;border:0;color:var(--ink)}
.kv ul{margin:0;padding-left:18px}
.kv li{margin:4px 0}
.kv.kv-my{border-color:var(--accent);background:color-mix(in oklab, var(--accent) 10%, #0f0f0f)}
.camp-notes{border:1px solid var(--accent);border-radius:var(--r);padding:10px;background:color-mix(in oklab, var(--accent) 6%, #0f0f0f)}

/* Visit/CTA row */
.btn-row{display:flex;flex-wrap:wrap;gap:8px}

/* ---- Hero (kept minimal) ---- */
.hero{position:relative;height:100dvh;display:grid;place-items:center;text-align:center;overflow:hidden}
.hero .bg{position:absolute;inset:0;background:url('https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?q=80&w=1600') center/cover no-repeat;opacity:.22}
.hero .wrap{position:relative;z-index:1;max-width:1100px;padding:calc(var(--navh) + 20px) 20px 40px;display:flex;flex-direction:column;align-items:center;gap:18px}
.hero img{width:200px;height:200px;object-fit:cover;border-radius:50%;border:3px solid var(--accent)}
.hero h2{font-size:clamp(34px,5vw,48px);line-height:1.2}
.cta-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:12px}

/* ---- Footer ---- */
footer{padding:26px 0;border-top:1px solid var(--line);text-align:center;color:#a1a1aa;font-size:13px}

/* ---- Mobile tweaks ---- */
@media (max-width:900px){.row{grid-template-columns:1fr}.gallery{min-height:clamp(300px,50vh,560px)}}
@media (max-width:640px){
  :root{--navh:56px}
  #topNav{display:none}
  .menu-btn{display:inline-block}
  section{padding:40px 0}
  .card{padding:12px}
  .hero img{width:140px;height:140px}
  .hero h2{font-size:28px}
}

/* ---- Mobile menu panel ---- */
.mobile-menu{
  position:fixed;inset:0;display:none;z-index:2147483649;background:rgba(0,0,0,.65);backdrop-filter:blur(8px)
}
.mobile-menu.open{display:block}
.mobile-menu .mobile-links{
  position:absolute;top:var(--navh);left:12px;right:12px;background:#0f1117;border:1px solid var(--line);
  border-radius:var(--r);padding:16px;box-shadow:0 16px 40px rgba(0,0,0,.45)
}
.mobile-menu .mobile-links a{
  display:block;padding:14px 18px;margin:6px 0;border-radius:var(--r-sm);text-decoration:none;color:var(--ink);border:1px solid transparent
}
.mobile-menu .mobile-links a:hover{border-color:var(--accent);background:color-mix(in oklab, var(--accent) 14%, transparent);color:#fff}

/* ---- Utilities ---- */
#projects .title,
#code .title,
#camp .title,
#gear .title,
#store .title,
#resources .title {
  color: var(--accent);
  font-weight: 800;
  margin-bottom: .4em;
}

html,body,* { caret-color: transparent; }
input,textarea,[contenteditable="true"] { caret-color: auto; }



/* =========================
   RESOURCES — formatted table with icons (restored)
   ========================= */

/* Desktop table (visible again, fully styled) */
#resources .tool-table{
  display: table;                 /* ensure it isn't hidden */
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;               /* rounds the outer corners */
}

/* Header */
#resources .tool-table thead th{
  text-align: left;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  background: #0b0d12;
  border-bottom: 1px solid var(--line);
  padding: 12px 14px;
}

/* Cells */
#resources .tool-table td{
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  font-size: 14px;
  color: var(--ink);
}
#resources .tool-table tbody tr:last-child td{ border-bottom: 0; }

/* Row hover */
#resources .tool-table tbody tr:hover td{
  background: color-mix(in oklab, var(--accent) 6%, transparent);
}

/* Left cell content: icon + title/subtitle */
#resources .tool-meta{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
}
#resources .tool-icon{
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: #0e0f12;
}

/* Inline SVG (Lucide etc.) inside the icon block */
#resources .tool-icon svg{
  width: 35px; height: 35px;
  stroke: var(--accent);
  stroke-width: 2.2;
}

/* Title + subline */
#resources .tool-title{ font-weight: 600; line-height: 1.2; }
#resources .tool-sub{ color: var(--muted); font-size: 12px; margin-top: 2px; }


/* Resources icon cell */
.tool-table .tool-meta{
  display:flex; align-items:center; gap:10px;
}
.tool-table .tool-icon{
  width:32px; height:32px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:8px; background:#0e0f12;
  flex:0 0 auto;
}
/* Lucide SVG styling */
.tool-table .tool-icon svg{
  width:18px; height:18px; stroke:var(--accent); /* orange */
  stroke-width:2.2;
}


/* Lock brand/wordmark colors so :visited never goes purple */
.brand a,
.brand a:link,
.brand a:visited,
.brand a:hover,
.brand a:active { color: inherit !important; text-decoration:none; }

.logo,
.logo:link,
.logo:visited,
.logo:hover,
.logo:active { color:#fff !important; }

.logo .f { color:#fff !important; }
.logo .c { color: var(--accent) !important; } /* the orange "c" */


/* ==== Modal right-pane spacing (uniform, 10px) ==== */
:root{
  --section-gap: 10px;   /* one knob for chips/sections/button spacing */
  --chip-gap: 8px;
}

#projectMeta, #campMeta, #codeMeta, #gearMeta{
  display: grid;
  grid-auto-rows: min-content;
  align-content: start;
  gap: var(--section-gap);          /* <— spacing between every block */
}

/* kill stray margins so the grid gap is the only spacing */
#projectMeta > *, #campMeta > *, #codeMeta > *, #gearMeta > *{
  margin: 0 !important;
}

/* chips row */
#projectModal .meta-block,
#campModal .meta-block,
#codeModal .meta-block,
#gearModal .meta-block{
  display: flex; flex-wrap: wrap; gap: var(--chip-gap);
}

/* section cards (title stacked over text, single border) */
#projectModal .kv, #campModal .kv, #codeModal .kv, #gearModal .kv{
  border: 1px solid var(--line);
  border-radius: var(--r, 12px);
  background: var(--panel);
  padding: 12px;
}
#projectModal .kv .k, #campModal .kv .k, #codeModal .kv .k, #gearModal .kv .k{
  display:block; margin:0 0 6px; font-size:12px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; color: var(--accent);
}
#projectModal .kv .v, #campModal .kv .v, #codeModal .kv .v, #gearModal .kv .v{ margin:0; }

/* CTA row uses the same rhythm */
#projectModal .btn-row,
#campModal .btn-row,
#codeModal .btn-row,
#gearModal .btn-row{ display:flex; flex-wrap:wrap; gap: var(--chip-gap); }


/* ================================
   UNIFIED MODALS — one size/theme
   (paste at end to override older rules)
==================================*/

:root{
  --modal-w: min(1180px, 96vw);   /* same width everywhere */
  --modal-h: 90vh;                /* same height everywhere */
  --gal-h: clamp(380px, 58vh, 620px);   /* same gallery height */
  --m-gap: 16px;                  /* column gap */
  --section-gap: 10px;            /* sections/pills/button spacing */
}

/* Card frame */
#projectModal .modal-card,
#campModal .modal-card,
#codeModal .modal-card,
#gearModal .modal-card{
  width: var(--modal-w);
  height: var(--modal-h);
  display: grid;
  grid-template-rows: auto 1fr;  /* sticky head + scroll body */
  overflow: hidden;
}

/* Sticky header, scrolling body */
#projectModal .modal-head,
#campModal .modal-head,
#codeModal .modal-head,
#gearModal .modal-head{
  position: sticky; top: 0; z-index: 3;
  background: #0f0f0f;
}

#projectModal .modal-body,
#campModal .modal-body,
#codeModal .modal-body,
#gearModal .modal-body{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;   /* media | details */
  gap: var(--m-gap);
  padding: 16px;
  overflow: auto;                          /* the whole body scrolls */
  align-items: start;
}

/* Same gallery size/behavior for all */
#projectModal .gallery,
#campModal .gallery,
#codeModal .gallery,
#gearModal .gallery{
  position: relative;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  min-height: var(--gal-h);
  background:#0b0c0f;
}
#projectModal .gallery::before,
#campModal .gallery::before,
#codeModal .gallery::before,
#gearModal .gallery::before{
  content:"";
  position:absolute; inset:0;
  background: var(--img) center/cover no-repeat;
  filter: blur(10px) saturate(105%);
  transform: scale(1.06);
  opacity: .35;
}
#projectModal .gallery img,
#campModal .gallery img,
#codeModal .gallery img,
#gearModal .gallery img{
  position: relative; z-index:1;
  width:100%; height: var(--gal-h);
  object-fit: contain;     /* consistent ‘contain’ everywhere */
  background: transparent;
}

/* Gallery nav + thumbs (same sizes) */
#projectModal .gal-btn, #campModal .gal-btn,
#codeModal .gal-btn,    #gearModal .gal-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:10px;
  border:1px solid var(--line);
  background: rgba(0,0,0,.55);
}
#projectModal #prevProjectPhoto, #campModal #prevPhoto,
#codeModal    #prevCodePhoto,    #gearModal #prevGearPhoto{ left:10px; }
#projectModal #nextProjectPhoto, #campModal #nextPhoto,
#codeModal    #nextCodePhoto,    #gearModal #nextGearPhoto{ right:10px; }

#projectThumbs img,
#codeThumbs img,
#gearThumbs img,
#thumbRow img{
  width:96px; height:64px; object-fit:cover;
  border-radius:10px; border:1px solid var(--line);
  background:#0b0c0f;
}
#projectThumbs img.active,
#codeThumbs img.active,
#gearThumbs img.active,
#thumbRow img.active{ outline:2px solid var(--accent); }

/* Details column: same spacing/stacked sections everywhere */
#projectMeta, #campMeta, #codeMeta, #gearMeta{
  display: grid;
  gap: var(--section-gap);
  align-content: start;
}

#projectMeta .meta-block, #campMeta .meta-block,
#codeMeta .meta-block,    #gearMeta .meta-block{
  display:flex; flex-wrap:wrap; gap: var(--section-gap);
}

#projectMeta .pill, #campMeta .pill,
#codeMeta .pill,    #gearMeta .pill{
  display:inline-block;
  padding:6px 10px;
  border-radius:10px;
  border:1px solid var(--accent);
  background: color-mix(in oklab, var(--accent) 14%, transparent);
  color:#fff; font-size:12px; font-weight:600;
}

/* “KV” section blocks: stacked title then body, single border */
#projectMeta .kv, #campMeta .kv,
#codeMeta .kv,    #gearMeta .kv{
  border:1px solid var(--line);
  border-radius:12px;
  background: var(--panel);
  padding:12px;
}
#projectMeta .kv .k, #campMeta .kv .k,
#codeMeta .kv .k,  #gearMeta .kv .k{
  display:block;
  font-size:12px; font-weight:800;
  letter-spacing:.04em; text-transform:uppercase;
  color: var(--accent);
  margin:0 0 6px;
}
#projectMeta .kv .v, #campMeta .kv .v,
#codeMeta .kv .v,  #gearMeta .kv .v{
  margin:0; border:0; padding:0; color: var(--ink);
}
#projectMeta .kv .v ul, #campMeta .kv .v ul,
#codeMeta .kv .v ul,  #gearMeta .kv .v ul{ margin:0; padding-left:18px; }
#projectMeta .kv .v li, #campMeta .kv .v li,
#codeMeta .kv .v li,  #gearMeta .kv .v li{ margin:3px 0; }

/* Buttons in details column */
#projectMeta .btn, #campMeta .btn,
#codeMeta .btn,    #gearMeta .btn{ margin-top: 2px; }

/* Mobile: one column, same sizes */
@media (max-width: 900px){
  #projectModal .modal-body,
  #campModal .modal-body,
  #codeModal .modal-body,
  #gearModal .modal-body{
    grid-template-columns: 1fr;
  }
  #projectModal .gallery img,
  #campModal .gallery img,
  #codeModal .gallery img,
  #gearModal .gallery img{
    height: clamp(300px, 48vh, 520px);
  }
}


/* ======================================
   MOBILE POLISH PACK (paste at end)
   ====================================== */

/* Phones & small tablets */
@media (max-width: 900px){
  /* Global knobs (match all modals) */
  :root{
    --modal-w: 96vw;
    --modal-h: 92dvh;
    --gal-h: clamp(260px, 48vh, 520px); /* same image height everywhere */
    --m-gap: 12px;                      /* modal column gap */
    --section-gap: 10px;                /* spacing for pills/sections/buttons */
  }

  /* Layout spacing */
  section{ padding: 34px 0; }
  .wrap{ padding: 0 14px; }

  /* Cards → horizontal rails you can swipe */
  .grid{
    display:flex; gap:12px;
    overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }
  .grid > *{ flex:0 0 86%; scroll-snap-align:start; }
  .grid::-webkit-scrollbar{ display:none; }

  /* One-column modals (all types) */
  #projectModal .modal-card,
  #campModal .modal-card,
  #codeModal .modal-card,
  #gearModal .modal-card{
    width: var(--modal-w);
    height: var(--modal-h);
  }
  #projectModal .modal-body,
  #campModal .modal-body,
  #codeModal .modal-body,
  #gearModal .modal-body{
    grid-template-columns: 1fr;
    gap: var(--m-gap);
    padding: 12px;
    align-items: start;
  }

  /* Unified gallery sizing */
  #projectModal .gallery img,
  #campModal .gallery img,
  #codeModal .gallery img,
  #gearModal .gallery img{
    height: var(--gal-h);
    object-fit: contain;
  }
  /* Bigger, touch-friendly arrows */
  #projectModal .gal-btn, #campModal .gal-btn,
  #codeModal .gal-btn,    #gearModal .gal-btn{
    width:44px; height:44px;
  }

  /* Thumbs → horizontal scroller */
  #projectThumbs, #codeThumbs, #gearThumbs, #thumbRow{
    display:flex; gap:8px; overflow-x:auto; padding-bottom:2px;
    scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
  }
  #projectThumbs img, #codeThumbs img, #gearThumbs img, #thumbRow img{
    width:84px; height:56px; flex:0 0 auto;
  }

  /* Details column spacing + tap targets */
  #projectMeta, #campMeta, #codeMeta, #gearMeta{ gap: var(--section-gap); }
  .modal .details .btn{ width:100%; padding:12px 14px; }
  .pill, .chip{ padding:6px 10px; }

  /* Tone down heavy blur on mobile for perf */
  .modal::before{ filter: blur(8px) saturate(110%); opacity:.28; }
}

/* Narrow phones */
@media (max-width: 640px){
  :root{ --navh: 56px; }
  .card{ padding:12px; }
  .card .thumb{ min-height:160px; }
  .hero h2{ font-size:26px; }
  .modal .modal-head{ padding:10px 12px; }
  .kv{ padding:10px; border-radius:10px; }
  .kv .k{ font-size:11px; margin-bottom:6px; }
  .kv .v{ font-size:14px; }
}

/* Resources table: keep the table, make it scrollable on mobile
   (Wrap your table in <div class="tool-wrap"> … </div>) */
@media (max-width: 900px){
  .tool-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .tool-table{ min-width:720px; } /* preserve columns; user can pan sideways */
}

/* Mobile nav/hamburger (safety in case earlier rules differ) */
@media (max-width: 640px){
  #topNav{ display:none !important; }
  .menu-btn{ display:inline-block !important; }
}

/* Respect iOS safe areas for fixed UI (e.g., cart button) */
@supports (padding: max(0px)){
  body{ padding-bottom: max(0px, env(safe-area-inset-bottom)); }
  #fc-cart{
    right:  max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
  }
}

/* Accessibility: reduce motion when requested */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}


/* ================================
   SINGLE-LINE CHIPS ON ALL CARDS
   ================================ */

/* Containers become a single row */
.card-tags,
.project-tags {
  display: flex !important;
  flex-wrap: nowrap !important;   /* <-- one line */
  align-items: center;
  gap: 6px;
  overflow: hidden;                /* hide overflow */
  white-space: nowrap;

  /* soft fade on the right so overflow doesn't look harsh */
  -webkit-mask-image: linear-gradient(to right, #000 82%, transparent);
          mask-image: linear-gradient(to right, #000 82%, transparent);
}

/* Chips themselves don’t wrap and don’t shrink */
.card-tags .chip,
.card-tags .pill,
.project-tags .chip,
.project-tags .pill {
  flex: 0 0 auto;                  /* keep each chip’s width */
  white-space: nowrap;
}

/* Mobile: allow horizontal swipe instead of fading */
@media (max-width: 640px){
  .card-tags,
  .project-tags{
    -webkit-mask-image: none;
            mask-image: none;
    overflow-x: auto;              /* swipe to reveal extra chips */
    padding-bottom: 2px;           /* tiny room for the hidden scrollbar */
    scrollbar-width: none;
  }
  .card-tags::-webkit-scrollbar,
  .project-tags::-webkit-scrollbar{
    display: none;
  }
}


/* ===== F C  — Floating Cart (override, minimal) ===================== */
#fc-cart{
  position: fixed !important;
  right: 16px !important;
  bottom: 16px !important;
  z-index: 2147483647 !important;
  pointer-events: auto !important;
}

/* Toggle button */
#fc-cart-toggle,
#fc-cart-toggle:hover,
#fc-cart-toggle:focus{
  background: var(--accent) !important;
  color: #000 !important;
  border: 0 !important;
  border-radius: 12px !important;
  min-width: 72px !important;
  height: 44px !important;
  padding: 0 12px !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.35) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

/* Drawer panel */
#fc-cart-panel{
  position: absolute !important;
  right: 0 !important;
  bottom: 56px !important;
  display: none !important;
  width: clamp(320px, 42vw, 520px) !important;
  max-width: calc(100vw - 24px) !important;
  max-height: 76vh !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  background: #0f1117 !important;
  padding: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 18px 40px rgba(0,0,0,.6) !important;

  /* fade + slide */
  opacity: 0; transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
}
#fc-cart-panel.open{ display:block !important; opacity:1; transform: translateY(0); }

/* Header row */
#fc-cart-panel .fc-cart-head{
  display:flex; align-items:center; gap:8px; margin:2px 4px 10px;
}
#fc-cart-panel .fc-cart-head strong{ font-size:16px; font-weight:700; }
#fc-cart-close{
  margin-left:auto; background:none; border:0; color:var(--muted,#a1a1aa);
  font-size:20px; line-height:1; cursor:pointer;
}
#fc-cart-close:hover{ color: var(--accent); }

/* Items list */
#fc-cart-items{
  display:flex; flex-direction:column; gap:8px;
  overflow:auto; max-height: 44vh; padding-right:4px;
  scrollbar-width: thin;
}
#fc-cart-items .fc-item{
  display:grid; grid-template-columns: 1fr auto 84px auto; /* name | qty | line | remove */
  align-items:center; gap:10px;
  padding:10px 12px; border:1px solid var(--line); border-radius:8px; background:#0b0d12;
}
#fc-cart-items .name{ min-width:0; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#fc-cart-items .qty{ display:inline-flex; align-items:center; gap:8px; }
#fc-cart-items .qty button{ width:28px; height:28px; padding:0; line-height:26px; border-radius:6px; }
#fc-cart-items .line{ text-align:right; font-weight:700; }
#fc-cart-items .remove{ padding:6px 10px; border-radius:6px; background:#241b1b; color:#fff; }

/* Totals */
#fc-cart-panel .fc-cart-summary{ margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
#fc-cart-panel .fc-cart-summary .total{ font-size:18px; font-weight:800; }
#paypal-checkout{ margin-top:12px; }

/* Mobile: full-width bottom sheet & stacked item layout */
@media (max-width:560px){
  #fc-cart{ right:8px !important; bottom:8px !important; }
  #fc-cart-panel{
    right: 50% !important;
    transform: translate(50%, 8px);
    width: calc(100vw - 16px) !important;
    max-height: 78vh !important;
  }
  #fc-cart-panel.open{ transform: translate(50%, 0); }
  #fc-cart-items .fc-item{
    grid-template-columns: 1fr auto auto;
    grid-template-rows: auto auto;
  }
  #fc-cart-items .name{ grid-column: 1 / -1; }
  #fc-cart-items .line{ justify-self:end; }
  #fc-cart-items .remove{ justify-self:end; }
}


/* CART PANEL: keep it in the DOM so PayPal can render */
#fc-cart-panel{
  /* was: display:none */
  display: block !important;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  /* keep your other panel styles (position, size, padding, etc.) */
}

#fc-cart-panel.open{
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
  /* keep your transform transition */
}

/* Ensure fixed cart isn’t trapped by transformed ancestors (footer/contact reveal) */
#contact.reveal, footer.reveal, .site-footer.reveal { transform: none !important; }

/* PayPal slot sizing (covers common IDs) */
#paypal-checkout,
#paypal-button-container { min-height: 46px; display:block; }


html, body { overflow-x: hidden; }
img, svg, video, canvas { max-width: 100%; height: auto; }
* { box-sizing: border-box; }


/* Base dropdown panel */
.dropdown {
  position: absolute;      /* desktop default */
  top: 100%;
  right: 0;
  width: 420px;
  max-width: 90vw;
  background: #111214;
  border: 1px solid #2a2b2f;
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}

/* Card grid inside the dropdown */
.dropdown .card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.dropdown .card {
  background: #0b0c0e;
  border: 1px solid #26272b;
  border-radius: 12px;
  padding: 12px;
}

/* Make the dropdown a fixed sheet on small screens */
@media (max-width: 768px) {
  .dropdown {
    position: fixed;
    inset: 56px 0 0 0;     /* below your nav bar */
    width: 100vw;
    max-width: 100vw;
    height: calc(100vh - 56px);
    overflow-y: auto;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    padding: 16px;
  }
  /* optional backdrop so content under it is dimmed */
  .menu-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(2px);
  }
  /* prevent layout from creating sideways scroll inside flex rows */
  .row, .wrap, .container, .nav { min-width: 0; }
}

/* Buttons in the cards */
.dropdown .card .actions {
  display: flex;
  justify-content: flex-end;
}
.dropdown .open-btn {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 10px;
  background: #ea580c;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border: 0;
}


/* --- Global guards (stop sideways scroll) --- */
html, body { overflow-x: hidden; }
img, video, canvas, svg { max-width: 100%; height: auto; }
* { box-sizing: border-box; }
.wrap, .container, .row, .nav { min-width: 0; }
:root, body { max-width: 100vw; }

/* --- Mobile menu as a fixed sheet --- */
#mobileMenu {
  position: absolute;        /* desktop default (kept hidden) */
  right: 0;
  top: 100%;
  background: var(--panel, #111214);
  border: 1px solid var(--line, #2a2b2f);
  border-radius: 14px;
  padding: 14px;
  width: 420px;
  max-width: 90vw;
  display: none;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
#mobileMenu.open { display: block; }

@media (max-width: 768px) {
  #mobileMenu {
    position: fixed;
    inset: 56px 0 0 0;       /* sits under your header */
    width: 100vw;
    max-width: 100vw;
    height: calc(100vh - 56px);
    border-radius: 0;
    border-left: 0; border-right: 0;
    padding: 16px;
    overflow-y: auto;
    display: none;
  }
  #mobileMenu.open { display: block; }

  .menu-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(2px);
  }
}

/* --- Turn the Resources tables into cards on small screens --- */
/* Desktop/tablet keeps normal table layout */
@media (max-width: 768px) {
  .tool-table { 
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;        /* space between "rows" */
  }
  .tool-table thead { display: none; }
  .tool-table tr {
    display: block;
    background: #0b0c0f;
    border: 1px solid var(--line, #26272b);
    border-radius: 12px;
    padding: 12px;
  }
  .tool-table td {
    display: block;
    padding: 6px 0;
  }
  .tool-table td + td { border-top: 1px solid var(--line, #26272b); padding-top: 10px; }

  /* optional labels for clarity */
  .tool-table td:nth-child(1)::before { content: "Resource"; display:block; font-size:12px; color:var(--muted); }
  .tool-table td:nth-child(2)::before { content: "Description"; display:block; font-size:12px; color:var(--muted); }
  .tool-table td:nth-child(3)::before { content: "Link"; display:block; font-size:12px; color:var(--muted); }

  /* keep buttons full width on phones */
  .tool-table td:last-child .btn { width: 100%; text-align: center; }
}

/* Small polish for the tool “meta” block inside the cards */
.tool-meta { display:flex; gap:10px; align-items:center; }
.tool-icon i { width:20px; height:20px; display:inline-block; }
.tool-title { font-weight:600; }
.tool-sub { font-size:12px; color:var(--muted); }

/* Ensure long words/URLs don’t force horizontal scroll */
.card, .lead, .desc, .tool-title, .tool-sub { overflow-wrap: anywhere; }


/* ---------------------------
   RESOURCES TABLE - DESKTOP
----------------------------*/

/* Keep table sane and give the last column a fixed lane */
.tool-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;               /* allow natural widths */
}
.tool-table th, .tool-table td { padding: 10px 12px; vertical-align: top; }
.tool-table th:last-child,
.tool-table td:last-child { 
  width: 160px;                     /* lane for the button */
  text-align: right;
  white-space: nowrap;
}

/* Buttons should not overflow cells on desktop */
.tool-table .btn {
  display: inline-block;
  width: auto;                      /* important: not 100% on desktop */
  max-width: 100%;
}

/* Icons + text block */
.tool-meta { display: flex; gap: 10px; align-items: center; min-width: 0; }
.tool-title { font-weight: 600; }
.tool-sub   { font-size: 12px; color: var(--muted); }

/* Prevent any long text from forcing horizontal scroll */
.tool-table, .tool-meta, .tool-title, .tool-sub, .lead, .desc { overflow-wrap: anywhere; }

/* ---------------------------
   RESOURCES TABLE -> CARDS (MOBILE)
----------------------------*/
@media (max-width: 768px) {

  /* Turn rows into cards without using border-spacing (can overflow) */
  .tool-table { border-collapse: collapse; }
  .tool-table thead { display: none; }

  .tool-table tr {
    display: block;
    margin: 12px 0;
    background: #0b0c0f;
    border: 1px solid var(--line, #26272b);
    border-radius: 12px;
    overflow: hidden;               /* clip the full-width button corners */
  }

  .tool-table td {
    display: block;
    padding: 10px 12px;
    width: auto !important;
    border-top: 1px solid var(--line, #26272b);
  }
  .tool-table td:first-child { border-top: 0; }

  /* Optional labels */
  .tool-table td:nth-child(1)::before { content: "Resource"; display:block; font-size:12px; color:var(--muted); }
  .tool-table td:nth-child(2)::before { content: "Description"; display:block; font-size:12px; color:var(--muted); }
  .tool-table td:nth-child(3)::before { content: "Link"; display:block; font-size:12px; color:var(--muted); }

  /* Make the button a clean full-width action inside the card */
  .tool-table td:last-child { padding: 0; }
  .tool-table td:last-child .btn {
    display: block;
    width: 100%;
    border-radius: 0;               /* looks like a card footer button */
    padding: 14px 16px;
    text-align: center;
  }
}


/* =========================
   RESOURCES → mobile cards
   (fix button width / gaps)
========================= */
@media (max-width: 768px) {
  /* turn table into stacked cards */
  .tool-table { width:100%; border-collapse: collapse; }
  .tool-table thead { display:none; }
  .tool-table tbody, .tool-table tr, .tool-table td { display:block; width:auto; }

  .tool-table tr {
    margin: 12px 0;
    background: #0b0c0f;
    border: 1px solid var(--line, #26272b);
    border-radius: 12px;
    overflow: hidden;                /* ensures button corners clip */
  }

  /* card content pads normally */
  .tool-table td {
    padding: 12px;
    border: 0;                       /* kill table borders that create extra lines */
  }

  /* “labels” for clarity */
  .tool-table td:nth-child(1)::before { content: "Resource"; display:block; font-size:12px; color:var(--muted); }
  .tool-table td:nth-child(2)::before { content: "Description"; display:block; font-size:12px; color:var(--muted); }
  .tool-table td:nth-child(3)::before { content: "Link"; display:none; } /* hide label over the button */

  /* button cell must have ZERO padding so the button can flush to edges */
  .tool-table td:nth-child(3) {
    padding: 0 !important;
  }

  /* make the button a full-width footer action with no margins */
  .tool-table td:nth-child(3) .btn {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 0 12px 12px !important;
    padding: 14px 16px !important;
    text-align: center;
  }

  /* safety: nothing in these cards should trigger sideways scroll */
  .tool-meta, .tool-title, .tool-sub, .lead, .desc { overflow-wrap: anywhere; }
}


/* replace any 100vw widths with % on phones to avoid iOS overflow */
@media (max-width: 768px) {
  #mobileMenu,
  .fc-cart-panel,
  .modal-card,
  .tool-table,
  .tool-table tr,
  .tool-table td {
    width: 100% !important;
    max-width: 100% !important;
  }
}


@media (max-width: 768px) {
  /* the <details class="card"> wrapper */
  details.card {
    display: block;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden;                 /* clip inner full-width button corners */
  }

  /* turn each table row into a full-width card with no side gap */
  .tool-table { border-collapse: collapse; }
  .tool-table thead { display: none; }
  .tool-table tbody, .tool-table tr, .tool-table td { display: block; }

  .tool-table tr {
    margin: 12px 0;                   /* vertical spacing only */
    border: 1px solid var(--line, #26272b);
    border-radius: 12px;
    background: #0b0c0f;
    overflow: hidden;
  }

  /* normal content padding */
  .tool-table td { padding: 12px; border: 0; box-sizing: border-box; }

  /* the button cell must have zero padding so it can flush to edges */
  .tool-table td:last-child { padding: 0 !important; }

  /* make the orange button span edge-to-edge */
  .tool-table td:last-child .btn {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 0 12px 12px !important;
    padding: 14px 16px !important;
    text-align: center;
  }

  /* prevent any long text from pushing width */
  .tool-meta, .tool-title, .tool-sub, .lead, .desc { overflow-wrap: anywhere; }
}

/* Section headings */
h2.title, h3.title, h4.title {
  color: var(--accent, #ea580c);   /* your burnt orange */
  margin-bottom: 12px;
}

@media (min-width: 1024px) {
  h2.title, h3.title, h4.title {
    font-size: 1.8rem;               /* larger on desktops */
  }
}

/* Resources section headings inside details */
details.card > summary {
  color: var(--accent, #ea580c);   /* burnt orange */
  font-weight: 700;
  font-size: 1.2rem;
}


/* Table header + cells in Resources */
.tool-table th:last-child,
.tool-table td:last-child {
  text-align: right;
  white-space: nowrap;
}

/* Make sure buttons stay inline, not stretched */
.tool-table td:last-child .btn {
  display: inline-block;
  width: auto;
}

/* Resources section headings inside details */
details.card > summary {
  color: var(--accent, #ea580c);   /* burnt orange */
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 10px;             /* spacing beneath the heading */
  display: block;                  /* ensures margin works as expected */
}


/* Align "Link" header with the buttons */
.tool-table th:last-child {
  text-align: right !important;
  padding-right: 12px;   /* match the cell padding of the buttons */
}

/* Make sure the last column cells line up */
.tool-table td:last-child {
  text-align: right;
  padding-right: 12px;   /* keeps header and button flush */
}

/* Buttons stay auto-width, not stretched */
.tool-table td:last-child .btn {
  display: inline-block;
  width: auto;
}





/* =========================
   Section headings: orange + larger
========================= */
.title{
  color:var(--accent,#ea580c);
  font-weight:800;
  letter-spacing:.2px;
  margin-bottom:12px;
  font-size:1.4rem;
}
@media (min-width:1024px){
  .title{ font-size:1.8rem; }
}



/* Smaller mailing-list notice */
.subscribe-text {
  font-size: 10px;     /* smaller than body text */
  line-height: 1.4;
  color: var(--muted); /* lighter gray tone */
  margin-top: 8px;
  text-align: center;  /* optional */
}


/* Camp modal: show description right after the chips */
#campModal .details { display: grid; }

#campModal #campMeta   { order: 0; } /* chips */
#campModal #campNotes  { order: 1; } /* description (move up) */
#campModal .details .kv{ order: 2; } /* ACCESS / HIGHLIGHTS / TIPS blocks */
#campModal #campMapWrap{ order: 3; } /* map stays last */

/* optional spacing tweak */
#campModal #campNotes { margin: 4px 0 8px; }


/* Gear modal polish */
.procon{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 900px){ .procon{ grid-template-columns: 1fr; } }

/* Callout + tip */
.callout{
  border:1px solid var(--accent);
  background: color-mix(in oklab, var(--accent) 10%, #0f0f0f);
  border-radius: var(--r);
  padding: 10px 12px;
  margin-bottom: 8px;
}
.tip-box{
  position: relative;
  border:1px dashed var(--accent);
  border-radius: var(--r);
  padding: 10px 12px 10px 46px;
  background: rgba(234,88,12,.06);
}
.tip-box .tip-label{
  position:absolute; left:10px; top:10px;
  display:inline-grid; place-items:center;
  width:26px; height:26px; border-radius:8px;
  border:1px solid var(--accent); color:#fff;
  background: var(--accent);
  font-size:12px; font-weight:800;
}
.tip-box .tip-body{ color:var(--ink); }

/* Chip row inside sections */
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; }

/* Section block already styled as .kv — add orange edge on hover */
.kv{ transition: border-color .2s, background .2s; }
.kv:hover{ border-color: var(--accent); background: rgba(255,255,255,.03); }

/* Make section headers pop a bit more */
.kv .k{
  color: var(--accent);
  font-weight: 800;
  letter-spacing: .03em;
}

/* Tighter ULs in these data sections */
.kv ul{ margin:0; padding-left: 18px; }
.kv li{ margin: 3px 0; }


/* Gear modal: consistent 10px rhythm */
#gearModal .details {
  display: flex;
  flex-direction: column;
  gap: 10px;                /* space between #gearMeta, #gearSpecs, map, etc. */
}

/* Inside the injected stack */
#gearModal #gearSpecs {
  display: flex;
  flex-direction: column;
  gap: 10px;                /* space between Description, My take, Pros/Cons, Tip, Specs… */
}
#gearModal #gearSpecs > * { margin: 0; }  /* kill stray margins */

/* Pros/Cons two-up with 10px gutter */
#gearModal .procon {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 720px) {
  #gearModal .procon { grid-template-columns: 1fr; }
}


/* Center the Link column (header + cells) */
#resources .tool-table th:last-child,
#resources .tool-table td:last-child {
  text-align: center !important;
}

/* If you’re using a button there, keep it centered too */
#resources .tool-table td:last-child .btn {
  display: inline-flex;
  margin: 0 auto;
}

/* My take: orange border + tinted background */
#campModal .kv-my,
#projectModal .kv-my,
#gearModal .kv-my,
#codeModal .kv-my{
  border: 1px solid var(--accent);
  background: color-mix(in oklab, var(--accent) 12%, #0f0f0f);
  border-radius: var(--r, 12px);
}

/* Keep the label orange and bold */
#campModal .kv-my .k,
#projectModal .kv-my .k,
#gearModal .kv-my .k,
#codeModal .kv-my .k{
  color: var(--accent);
  font-weight: 800;
}


/* Impact block: orange border + tinted background */
.kv-impact {
  border: 1px solid var(--accent);
  background: color-mix(in oklab, var(--accent) 12%, #0f0f0f);
  border-radius: var(--r, 12px);
  padding: 0.75em;
  margin-top: 0.75em;
}

.kv-impact .k {
  color: var(--accent);
  font-weight: 800;
}


/* Code modal: highlight Impact */
.kv.kv-impact{
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 10%, #0f0f0f);
}
.kv.kv-impact .k{ color: var(--accent); }


/* Impact block — orange border and tinted background */
.kv-impact {
  border: 2px solid var(--accent) !important;
  background: color-mix(in srgb, var(--accent) 12%, #0b0c0f) !important;
  border-radius: 12px;
  padding: 0.75em;
  margin-top: 0.75em;
}

.kv-impact .k {
  color: var(--accent) !important;
  font-weight: 700;
}

/* Prevent background scrolling when locked (helps some Android browsers) */
html.lock-scroll,
body.lock-scroll {
  overflow: hidden;
  overscroll-behavior: none;
  height: 100%;
}

/* Temporarily disable smooth scrolling during modal unlock */
html.no-smooth { scroll-behavior: auto !important; }


/* Resources → mobile cards fix (no sideways scroll, proper sizing) */
@media (max-width: 768px){
  /* Kill any old min-widths/spacing that force overflow */
  #resources .tool-table{ 
    width:100% !important;
    min-width:0 !important;      /* ← overrides the 720px rule */
    border-collapse: collapse;
    table-layout: fixed;
  }
  #resources .tool-table thead{ display:none !important; }

  /* Each row becomes a self-contained card */
  #resources .tool-table tr{
    display:block;
    margin:12px 0;
    background:#0b0c0f;
    border:1px solid var(--line);
    border-radius:12px;
    overflow:hidden;             /* keeps the full-width button corners clean */
  }

  /* Cells stack vertically */
  #resources .tool-table td{
    display:block;
    width:auto !important;
    padding:12px;
    border:0;
  }

  /* Meta line: icon + titles in a tight grid */
  #resources .tool-meta{
    display:grid;
    grid-template-columns:36px 1fr;
    gap:10px;
    align-items:center;
    min-width:0;                 /* allow text to wrap without expanding card */
  }
  #resources .tool-icon{ width:36px; height:36px; }
  #resources .tool-title{ font-size:16px; font-weight:600; }
  #resources .tool-sub{ font-size:12px; color:var(--muted); }

  /* Make the Open button a full-width footer action */
  #resources .tool-table td:last-child{ padding:0 !important; }
  #resources .tool-table td:last-child .btn{
    display:block !important;
    width:100% !important;
    margin:0 !important;
    border-radius:0 0 12px 12px !important;
    padding:14px 16px !important;
    text-align:center;
  }

  /* Absolute safety: nothing in resources can widen the viewport */
  #resources, #resources *{ max-width:100%; overflow-wrap:anywhere; }
}

/* Small polish so desktop aligns the Link column neatly */
@media (min-width: 769px){
  #resources .tool-table th:last-child,
  #resources .tool-table td:last-child{
    text-align:right;
    white-space:nowrap;
    width:160px;
  }
}

/* Camp cards - mobile only */
@media (max-width: 768px) {
  /* 1) Keep layout predictable on phones */
  .camp-grid {            /* use your real grid/wrapper (e.g., .locations, .cards) */
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* 2) Make every card the same height */
  .camp-card, .card.camp {            /* target your camp cards */
    display: flex;
    flex-direction: column;
    min-height: 400px;                /* adjust to taste */
    overflow: hidden;
  }

  /* 3) Lock the image area to a uniform slice */
  .camp-card .card-img, 
  .card.camp .card-img {
    aspect-ratio: 16 / 10;            /* consistent image box */
    width: 100%;
    overflow: hidden;
  }
  .camp-card .card-img img, 
  .card.camp .card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;                /* fills without warping */
  }

  /* 4) Let body stretch to fill, push tags to the bottom */
  .camp-card .card-body, 
  .card.camp .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  /* 5) Clamp long descriptions so heights stay equal */
  .camp-card .card-desc, 
  .card.camp .card-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;            /* 2-4 lines works well */
    overflow: hidden;
  }

  /* 6) Keep chips/buttons pinned to the bottom */
  .camp-card .card-tags, 
  .card.camp .card-tags {
    margin-top: auto;
  }
}

/* Mobile nav styles */
@media (max-width: 768px) {
  /* Hamburger icon */
  .hamburger {
    font-size: 2rem;       /* make icon bigger */
    color: #ea580c;        /* Follincraft orange */
  }

  /* If it's SVG or bars inside a button */
  .hamburger span,
  .hamburger svg {
    width: 32px;
    height: 32px;
    stroke: #ea580c;       /* orange lines */
  }

  /* Nav menu when opened */
  .mobile-nav,
  .nav-menu {
    font-size: 1.2rem;     /* bump up text size */
    background: #111;      /* dark background */
  }

  .mobile-nav a,
  .nav-menu a {
    color: #ea580c;        /* orange links */
    padding: 1rem;
    display: block;
  }

  .mobile-nav a:hover,
  .nav-menu a:hover {
    background: rgba(234, 88, 12, 0.1);
  }
}

.project-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 24px;
  align-items: start;     /* makes top edges align */
}

.project-grid > div {
  display: flex;
  flex-direction: column;
  gap: 18px;              /* keeps stacked items spaced */
}

.project-hero {
  flex: 0 0 auto;
}

.project-grid .card {
  width: 100%;            /* fill right column */
  max-width: none;        /* override global narrow card max-width */
}

.thumbs {
  justify-content: flex-start;
  margin-top: 12px;
}




/* SQUARE frame */
.hero-frame{
  position:relative;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--line);
  aspect-ratio:1 / 1;        /* square box */
  isolation:isolate;
}

/* Blurred infill behind the actual image */
.hero-frame::before{
  content:"";
  position:absolute; inset:0;
  background-image:var(--hero);
  background-size:cover;
  background-position:center;
  filter:blur(18px) saturate(1.2);
  transform:scale(1.06);     /* avoids blur-edge clipping */
  z-index:0;
}
.hero-frame img{
  position:relative; z-index:1;
  display:block; width:100%; height:100%;
  object-fit:contain;        /* show entire image – no zoom */
  background:transparent;
}
/* Move crumbs/title a hair lower from the sticky header */
.proj-wrap{ margin-top: 74px; }     /* was 68px */

/* Give the crumbs a touch of breathing room under the header */
.breadcrumbs{ margin-top: 2px; }

/* Tighten the gap between the page title and the image grid */
.proj-title{ margin: 4px 0 4px; }   /* smaller bottom margin */
.project-grid{ margin-top: 0; }     /* no extra nudge */

/* The main culprit: kill the big top padding on this section only */
.project-page{ padding-top: 12px; } /* override the global 56px */

/* (optional) if you want it absolutely snug, go to 6–8px */


/* Breadcrumbs: push them a bit lower under the header */
.proj-wrap { 
  margin-top: 86px;   /* was 74px */
}

/* Title: collapse space below it even more */
.proj-title { 
  margin: 2px 0 2px;  /* nearly flush */
}

/* Project grid: make sure it hugs the title */
.project-grid { 
  margin-top: -2px;   /* tiny pull upward */
}
  /* Breadcrumbs a bit lower under sticky header */
  .proj-wrap{ margin-top: 86px; }          /* was 74px */

  /* Title + grid: make the gap almost zero */
  .proj-title{ margin: 2px 0 2px; }        /* was 4px 0 4px */
  .project-grid{ margin-top: -2px; }       /* pull the grid up a hair */

  /* Project section: kill the big global top padding on this page only */
  .project-page{ padding-top: 12px; }

  /* —— Blur image (CSS-var approach, no extra <img>) —— */
  .hero-frame{
    position:relative; border-radius:12px; overflow:hidden;
    border:1px solid var(--line); aspect-ratio:1/1; isolation:isolate;
  }
  .hero-frame::before{
    content:""; position:absolute; inset:0; z-index:0;
    background-image:var(--hero);
    background-size:cover; background-position:center;
    filter:blur(18px) saturate(1.2); transform:scale(1.06);
  }
  .hero-frame img{
    position:relative; z-index:1; width:100%; height:100%;
    object-fit:contain; background:transparent;
  }

  /* (kept from before) chips + section title styles, if not already present */
  .chip-row{ display:flex; flex-wrap:wrap; gap:6px; }
  .chip-row .chip{ background:rgba(234,88,12,.12); border:1.5px solid var(--accent);
                   color:#fff; padding:4px 10px; border-radius:10px; font-weight:600; font-size:.82rem; }
  .card h5.section-title{ color:var(--accent); font-size:13px; margin:0 0 6px;
                          letter-spacing:.06em; text-transform:uppercase; }
  .project .card ul{ list-style:disc outside; padding-left:22px; margin:0; }
  .project .card li{ margin:8px 0; line-height:1.6; }
  .project .card li::marker{ color:var(--accent); }
  
  /* ==== Project page spacing overrides (final, canonical) ==== */
.proj-wrap{            /* breadcrumbs block under sticky header */
  margin-top: 96px !important;     /* was 68/74/86 in different places */
}

.breadcrumbs{
  margin-top: 4px !important;      /* tiny nudge down */
}

.proj-title{            /* page title above the hero image */
  margin: 0 0 10px !important;      /* collapse space above, leave 4px below */
  line-height:4 1.15;
}

.project-page{
  padding-top: 8px !important;     /* kill big global section padding here */
}

.project-grid{
  margin-top: -6px !important;     /* pull image up tighter to the title */
}


/* ===== "My Take" block ===== */
.my-take{
  border: 2px solid var(--accent);   /* strong orange edge */
  background: color-mix(in oklab, var(--accent) 12%, #0f0f0f); /* tinted panel */
  border-radius: var(--r, 12px);
  padding: 14px;
}

.my-take .section-title{
  color: var(--accent);
  font-weight: 800;
}

.my-take p,
.my-take li{
  color: var(--ink);
}


.hero-frame::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-image:var(--hero);
  background-size:cover;
  background-position:center;
  filter:blur(18px) saturate(1.2);
  transform:scale(1.06);
  opacity:1;           /* this line makes sure blur is visible */
}


/* UNCLAMP right-column text on this page */
.project .card,
.project .card *{
  overflow: visible !important;
  max-height: none !important;
}

.project .lead,
.project p,
.project li{
  display: block !important;
  white-space: normal !important;
  text-overflow: clip !important;
  /* kill any global multi-line clamp */
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  -webkit-box-orient: initial !important;
}

/* spacing so the cards don’t feel stacked */
.project-grid > .right{
  display:flex; 
  flex-direction:column;
  gap:24px;                  /* was 16px */
  align-items:stretch;
}

/* optional: give cards some breathing room (matches your look) */
.project .card{
  padding:16px 18px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:10px;
}


/* ===== Reusable "My Take" card (global) ===== */
.card.my-take{
  border: 2px solid var(--accent);
  background: color-mix(in oklab, var(--accent) 12%, #0f0f0f);
  /* fallback if color-mix not supported */
  background-color: rgba(234, 88, 12, 0.10);
  border-radius: var(--r, 12px);
}

.card.my-take .section-title{
  color: var(--accent);
  font-weight: 800;
}

/* ensure other .card rules don’t override it */
.project .card.my-take { background: inherit; }




/* ===== Breadcrumbs (site-wide) ===== */
.breadcrumbs { color: var(--muted); font-weight: 400; }

.breadcrumbs a:link,
.breadcrumbs a:visited {
  color: var(--muted);
  text-decoration: none;
}

.breadcrumbs a:hover {
  text-decoration: underline;
}

.breadcrumbs a:focus-visible {
  outline: 2px dashed var(--accent);
  outline-offset: 2px;
}


/* Force specs lists to actually show bullets, styled orange */
.project .card ul {
  list-style: disc outside !important;
  padding-left: 22px;
  margin: 0;
}

.project .card li {
  display: list-item !important;   /* ensure browser renders marker */
  margin: 8px 0;
  line-height: 1.6;
}

.project .card li::marker {
  color: var(--accent);  /* burnt orange */
  font-weight: bold;
}

/* --- Gallery thumbnails: tidy multi-row layout --- */
.thumbs{
  display:flex;
  flex-wrap: wrap;           /* allow multiple rows */
  gap:12px 12px;             /* row + column spacing */
  justify-content:flex-start;/* left align under the hero */
  align-content:flex-start;  /* consistent row spacing when wrapping */
  margin-top:12px;
}

.thumbs a{
  flex:0 0 auto;             /* don’t stretch/shrink; keep each thumb size */
  display:block;
  padding:3px;
  border-radius:10px;
  border:2px solid transparent;
  background:var(--panel);
}

.thumbs a.active{ border-color:var(--accent); }

.thumbs img{
  display:block;
  width:88px;                /* same size everywhere */
  height:64px;
  object-fit:cover;
  border-radius:8px;
}

/* Smaller phones: center the rows under the hero */
@media (max-width: 520px){
  .thumbs{ justify-content:center; }
}

/* If any page sets a conflicting rule, this keeps wrapping stable */
.left .thumbs{ max-width:100%; }

/* === Project-embed layout fixes (modal only) ======================= */
#projectModal .modal-card {
  /* give the modal more room */
  max-width: 1200px;
  width: 96vw;
  max-height: 86vh;
}

#projectModal .modal-body {
  overflow: auto;
}

/* Let the embedded page use the full modal width */
#projectModal .project-embed .wrap {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0;
  padding-right: 0;
}

/* Make the grid breathe on desktop */
#projectModal .project-embed .project-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 22px;
}

/* Square hero is too cramped in a modal; use a wider aspect */
#projectModal .project-embed .hero-frame {
  aspect-ratio: 16 / 10 !important;   /* was 1 / 1 on the pages */
}

/* Make sure images are not constrained */
#projectModal .project-embed img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Keep cards flexible inside modal */
#projectModal .project-embed .project .card {
  max-width: none !important;
  height: auto !important;
  overflow: visible !important;
}

/* Thumbs wrap nicely when narrow */
#projectModal .project-embed .thumbs {
  justify-content: flex-start;
  gap: 12px;
}

/* Modal gallery controls */
.modal .fc-nav {
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:999px;
  background:rgba(0,0,0,.55); color:#fff; border:1px solid rgba(255,255,255,.35);
  display:grid; place-items:center; cursor:pointer; user-select:none;
  z-index:5;
}
.modal .fc-nav:focus { outline:2px solid var(--accent, #ea580c); outline-offset:2px; }
.modal .fc-prev { left:8px; }
.modal .fc-next { right:8px; }
.modal .fc-counter {
  position:absolute; left:50%; bottom:8px; transform:translateX(-50%);
  padding:4px 8px; font:600 12px/1.1 system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  color:#fff; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.35);
  border-radius:8px; z-index:5;
}
.modal .fc-swipe {
  position:absolute; inset:0; z-index:4;
}
.modal [data-fc-slide] {
  display:none; max-width:100%; max-height:70vh; margin:0 auto;
}
.modal [data-fc-slide].is-active { display:block; }


/* Modal gallery core */
.modal .modal-content { position: relative; }
.modal .fc-nav {
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:999px;
  background:rgba(0,0,0,.55); color:#fff; border:1px solid rgba(255,255,255,.35);
  display:grid; place-items:center; cursor:pointer; user-select:none; z-index:5;
}
.modal .fc-prev { left:8px; }
.modal .fc-next { right:8px; }
.modal .fc-counter {
  position:absolute; left:50%; bottom:8px; transform:translateX(-50%);
  padding:4px 8px; font:600 12px/1.1 system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  color:#fff; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.35);
  border-radius:8px; z-index:5;
}
.modal .fc-swipe { position:absolute; inset:0; z-index:4; }
.modal [data-fc-slide] {
  display:none !important; max-width:100%; max-height:74vh; margin:0 auto;
}
.modal [data-fc-slide].is-active { display:block !important; }


/* ===== Modal Hero Image Standardization ===== */
.modal .gallery,
.modal .hero-frame,
.modal .modal-img-wrap {
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--panel);
  isolation: isolate;
}

.modal .gallery::before,
.modal .hero-frame::before,
.modal .modal-img-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--img);
  background-size: cover;
  background-position: center;
  filter: blur(18px) saturate(1.2);
  transform: scale(1.08);
  opacity: 1;
  z-index: 0;
}

.modal .gallery img,
.modal .hero-frame img,
.modal .modal-img-wrap img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}

.hero-frame img{
  position:relative; z-index:1;
  display:block; width:100%; height:100%;
  /* was: object-fit:contain; */
  object-fit:cover;
  background:transparent;
}


.modal,
.lightbox {
  position: fixed;        /* fixes it to viewport, not document flow */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;          /* ensure it overlays everything */
}


.modal img,
.lightbox img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 8px;
}

/* Modal baseline */
.modal{
  position: fixed;               /* anchor to viewport, not page flow */
  inset: 0;                      /* top:0; right:0; bottom:0; left:0 */
  display: none;
  justify-content: center;       /* center the card */
  align-items: center;           /* center the card */
  background: rgba(0,0,0,.85);
  z-index: 9999;
}

/* when opened */
.modal.open{ display: flex; }

/* make sure the inner card can’t push below the fold */
.modal .modal-card{
  max-height: 88vh;
  width: min(1100px, 96vw);
  margin: 0;                     /* kill any theme margins */
  overflow: hidden;              /* iframe/image scrolls inside */
  border-radius: 12px;
  background: #0b0c0f;
}

/* the slot you replace with iframes/images */
.modal .modal-body,
#campPageWrap,
#projectEmbed{
  height: 82vh;                  /* consistent viewport sizing */
  overflow: auto;
}

/* click-to-close outside */
.modal:has(.modal-card){ cursor: default; }
.modal.open{ cursor: pointer; }
.modal .modal-card{ cursor: auto; }

/* make the gallery images center/fit */
.modal img{ max-width: 90vw; max-height: 85vh; object-fit: contain; display: block; }

/* Unified modal title style */
.modal .modal-title{
  color: var(--accent);          /* your #ea580c */
  font-weight: 800;
  font-size: clamp(18px, 2.2vw, 22px);
  letter-spacing: 0.2px;
  line-height: 1.2;
  margin: 0 0 8px 0;
}


/* Emergency override: style any plausible modal title */
.modal .modal-card :is(h1, h2, .title, [data-title]) {
  color: var(--accent, #ea580c) !important;
  font-weight: 800 !important;
  font-size: clamp(18px, 2.2vw, 22px) !important;
  letter-spacing: 0.2px !important;
  line-height: 1.2 !important;
  margin: 0 0 8px 0 !important;
}

/* If your titles sit inside a header element */
.modal .modal-card header :is(h1, h2, .title, [data-title]) {
  color: var(--accent, #ea580c) !important;
}

/* In case there’s an inline color elsewhere */
.modal .modal-card [style*="color"] :is(h1, h2, .title, [data-title]) {
  color: var(--accent, #ea580c) !important;
}


/* FINAL OVERRIDE — make any modal header title big + orange */
.modal .modal-head > :is(h1, h2, h3, div, span, .title, [data-title], [id$="Title"], [id$="title"]) {
  color: var(--accent, #ea580c) !important;
  font-weight: 800 !important;
  font-size: clamp(18px, 2.2vw, 22px) !important;
  letter-spacing: .2px !important;
  line-height: 1.2 !important;
  margin: 0 0 8px 0 !important;
  display: block !important;     /* in case it's a span */
}

/* Slightly dim the close button so it doesn't compete */
.modal .modal-head .close-btn {
  color: var(--muted) !important;
  border-color: var(--line) !important;
}


/* Lower the modal title a bit inside the header */
.modal .modal-head{
  padding-top: 18px !important;   /* was 14px */
  padding-bottom: 10px !important;/* keep overall height similar */
  align-items: center !important; /* belt-and-suspenders */
}

/* If you want it one more pixel lower, keep this */
.modal .modal-head > :is(h1,h2,h3,div,span,.title,[data-title],[id$="Title"],[id$="title"]){
  margin-top: 2px !important;     /* subtle drop */
  margin-bottom: 8px !important;
  line-height: 1.2 !important;
}

/* Keep the close button centered relative to the title */
.modal .modal-head .close-btn{
  align-self: center !important;
}

/* Modal shell */
.project-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;                 /* .open -> display:block (or flex) */
  background: rgba(0,0,0,.7);
}

/* The scrollable content area INSIDE the modal */
.project-modal__body {
  overflow: auto;                 /* important: this is the scroller */
  max-height: calc(100vh - 80px); /* adjust for your header/padding */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Optional: don’t let the page itself smooth-scroll while modal is open */
html.modal-open { scroll-behavior: auto; }


/* Modal shell */
.project-modal{ position:fixed; inset:0; z-index:9999; display:none; }
.project-modal.is-open{ display:block; }

/* Sheet layout: header (fixed height) + scroller (flex) */
.project-modal__sheet{
  position:absolute; inset:12px;
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  display:flex; flex-direction:column; min-height:0;   /* prevent flex overflow */
}

/* Modal header (not scrolling) */
.project-modal__header{ flex:0 0 auto; padding:10px 12px; }

/* The ONLY scrollable area */
.project-modal__scroller{
  flex:1 1 auto; min-height:0;
  overflow:auto;                           /* make THIS the scroller */
  -webkit-overflow-scrolling:touch;        /* iOS smooth */
  overscroll-behavior:contain;             /* stop scroll chaining to page */
  padding:12px;                            /* keep content off the top */
  scroll-padding-top:12px;                 /* for hash/focus jumps */
}

/* Avoid margin-collapse making “top” feel stuck */
.project-modal__scroller > :first-child{ margin-top:0; }

/* Optional: if you have a sticky toolbar inside the sheet */
:root{ --modal-toolbar-h: 0px; }           /* set to e.g. 48px if you have one */
.project-modal__scroller{ padding-top: calc(12px + var(--modal-toolbar-h)); }

body.modal-open{
  overflow:hidden;                         /* desktop */
  position:fixed; inset:0; width:100%;     /* mobile: truly locks background */
}

/* Modal shell */
.project-modal{ position:fixed; inset:0; z-index:9999; display:none; }
.project-modal.is-open{ display:block; }

/* Sheet layout: header (fixed height) + scroller (flex) */
.project-modal__sheet{
  position:absolute; inset:12px;
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  display:flex; flex-direction:column; min-height:0;   /* prevent flex overflow */
}

/* Modal header (not scrolling) */
.project-modal__header{ flex:0 0 auto; padding:10px 12px; }

/* The ONLY scrollable area */
.project-modal__scroller{
  flex:1 1 auto; min-height:0;
  overflow:auto;                           /* make THIS the scroller */
  -webkit-overflow-scrolling:touch;        /* iOS smooth */
  overscroll-behavior:contain;             /* stop scroll chaining to page */
  padding:12px;                            /* keep content off the top */
  scroll-padding-top:12px;                 /* for hash/focus jumps */
}

/* Avoid margin-collapse making “top” feel stuck */
.project-modal__scroller > :first-child{ margin-top:0; }

/* Optional: if you have a sticky toolbar inside the sheet */
:root{ --modal-toolbar-h: 0px; }           /* set to e.g. 48px if you have one */
.project-modal__scroller{ padding-top: calc(12px + var(--modal-toolbar-h)); }


body.modal-open{
  overflow:hidden;                         /* desktop */
  position:fixed; inset:0; width:100%;     /* mobile: truly locks background */
}


/* When the page is inside the modal/iframe */
body.embedded header{ display:none !important; }              /* remove full site header */
body.embedded .proj-wrap{ margin-top:8px !important; }        /* kill the big top gap */
body.embedded .proj-wrap .breadcrumbs{
  display:block !important;
  margin:0 0 6px !important;
  opacity:1 !important;
}
body.embedded .proj-wrap .title{ margin-top:2px !important; } /* tuck the H3 up */
body.embedded .project-page{ padding-top:0 !important; }      /* belt & suspenders */

/* =========================
   MODALS — unified behavior
   ========================= */

/* Body lock when any modal is open */
html.modal-open { scroll-behavior: auto; }
body.modal-open{
  overflow:hidden;                       /* desktop */
  position:fixed; inset:0; width:100%;   /* mobile hard lock */
}

/* Shell + visibility */
.modal{ position:fixed; inset:0; z-index:9999; display:none; }
.modal.is-open{ display:block; }

/* Generic sheet */
.modal-card{
  position:absolute; inset:12px;
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  display:flex; flex-direction:column; min-height:0; /* prevent flex overflow */
}

/* Header (non-scrolling area). We'll hide this on targeted modals */
.modal-head, .modal-header{ flex:0 0 auto; padding:10px 12px; }

/* Single scroll area */
.modal-body, .modal__scroller{
  flex:1 1 auto; min-height:0;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:12px;                 /* keep content off the top */
  scroll-padding-top:12px;
}
.modal-body > :first-child,
.modal__scroller > :first-child{ margin-top:0; }

/* Project modal legacy classes kept for compatibility */
.project-modal{ position:fixed; inset:0; z-index:9999; display:none; }
.project-modal.is-open{ display:block; }
.project-modal__sheet{ composes: modal-card; } /* if you don’t use a build step, ignore */
.project-modal__header{ padding:10px 12px; }
.project-modal__scroller{
  flex:1 1 auto; min-height:0; overflow:auto;
  -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  padding:12px; scroll-padding-top:12px;
}
:root{ --modal-toolbar-h: 0px; }
.project-modal__scroller{ padding-top: calc(12px + var(--modal-toolbar-h)); }

/* -------------------------
   HIDE TITLE BAR on these:
   #campModal, #projectModal, #codeModal
   ------------------------- */
#campModal,
#projectModal,
#codeModal { --modal-fade: .16s; }

#campModal .modal-head,     #campModal .modal-header,
#campModal .modal-title,    #campModal [data-modal-title],
#projectModal .modal-head,  #projectModal .modal-header,
#projectModal .modal-title, #projectModal [data-modal-title],
#codeModal .modal-head,     #codeModal .modal-header,
#codeModal .modal-title,    #codeModal [data-modal-title]{
  display:none !important;
}

/* tighten layout when header is gone */
#campModal .modal-body,
#projectModal .modal-body,
#codeModal .modal-body{
  padding-top:0 !important;
}

/* -------------------------
   FLOATING CLOSE (X) button
   ------------------------- */
#campModal .modal-card,
#projectModal .modal-card,
#codeModal .modal-card{ position:relative; }

#campModal .modal-close,
#projectModal .modal-close,
#codeModal .modal-close{
  position:absolute;
  top:10px; right:10px;
  width:40px; height:40px;
  display:grid; place-items:center;
  border-radius:10px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.55);
  color:#fff;
  font-size:20px; line-height:1;
  cursor:pointer;
  z-index:10;
  opacity:1; /* will fade via .loading/.ready below */
}
#campModal .modal-close:hover,
#projectModal .modal-close:hover,
#codeModal .modal-close:hover{
  border-color:var(--accent);
  background:rgba(0,0,0,.82);
  color:var(--accent);
}

/* Fade-in anti-flash */
#campModal.loading .modal-card,
#projectModal.loading .modal-card,
#codeModal.loading .modal-card{ opacity:0; }

#campModal.ready .modal-card,
#projectModal.ready .modal-card,
#codeModal.ready .modal-card{
  opacity:1; transition:opacity var(--modal-fade) ease;
}

#campModal.loading .modal-close,
#projectModal.loading .modal-close,
#codeModal.loading .modal-close{ opacity:0; }

#campModal.ready .modal-close,
#projectModal.ready .modal-close,
#codeModal.ready .modal-close{
  opacity:1; transition:opacity var(--modal-fade) ease;
}

/* -------------------------
   Embedded page cleanup (when you inject pages)
   ------------------------- */
body.embedded header{ display:none !important; }
body.embedded .proj-wrap{ margin-top:8px !important; }
body.embedded .proj-wrap .breadcrumbs{
  display:block !important;
  margin:0 0 6px !important;
  opacity:1 !important;
}
body.embedded .proj-wrap .title{ margin-top:2px !important; }
body.embedded .project-page{ padding-top:0 !important; }


/* Camp page link colors */
.project .card a:any-link {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px dotted transparent;
}
.project .card a:hover,
.project .card a:focus-visible {
  color: var(--accent);           /* your orange */
  border-bottom-color: var(--accent);
  outline: none;
}

/* If you want this only for the “Before You Go” boxes */
.bygo-card a:any-link { color:#fff; text-decoration:none; border-bottom:1px dotted transparent; }
.bygo-card a:hover, .bygo-card a:focus-visible { color:var(--accent); border-bottom-color:var(--accent); outline:none; }


.mobile-menu{ display:none; }
.mobile-menu.open{ display:block; }
body.menu-open{ overflow:hidden; } /* prevent page behind from scrolling */

/* Gear modal: remove built-in title bar */
#gearModal .modal-head,
#gearModal .modal-header,
#gearModal header[role="banner"]{
  display: none !important;
}

/* Give the card a little breathing room since the bar is gone */
#gearModal .modal-card{ padding-top: 12px; }