/* BassPro Wannabe — palette carried over from the original coming-soon page. */
:root{
  --deep:#06171f;        /* deep water */
  --mid:#0c2a36;
  --surface:#103848;
  --line:#1b4b5e;
  --fg:#eaf4f6;
  --dim:#8fb3bd;
  --faint:#5c8492;
  --accent:#e8a33d;      /* late-afternoon sun on the water */
  --accent2:#4fd1a5;     /* weed-line green */
  --danger:#e8695d;
  --radius:12px;
  --wrap:900px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--deep);color:var(--fg);
  font:400 16px/1.65 "Segoe UI",-apple-system,BlinkMacSystemFont,Inter,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}
.faint{color:var(--faint)}
.dot{color:var(--faint);margin:0 .5em}

.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--accent);color:var(--deep);padding:8px 14px;border-radius:6px;z-index:10}

/* header: banner masthead, then a sticky nav strip under it */
.site-head{background:var(--deep)}
.masthead{padding-top:18px;padding-bottom:16px}
.banner{display:block;line-height:0;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);max-width:940px;margin:0 auto}
.banner:hover{border-color:var(--accent);text-decoration:none}
.banner img{width:100%;height:auto}

.site-nav{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:rgba(12,42,54,.85);position:sticky;top:0;backdrop-filter:blur(8px);z-index:5}
.nav-inner{display:flex;gap:20px;font-size:15px;padding-top:11px;padding-bottom:11px;
  flex-wrap:wrap;align-items:center;position:relative}

/* categories dropdown */
.menu{position:relative}
.menu summary{list-style:none;cursor:pointer;color:var(--dim);display:inline-flex;
  align-items:center;gap:7px;user-select:none}
.menu summary::-webkit-details-marker{display:none}
.menu summary:hover,.menu[open] summary{color:var(--accent)}
.menu[data-active] summary{color:var(--accent)}
.menu .caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;opacity:.75;transition:transform .15s}
.menu[open] .caret{transform:rotate(180deg)}

.menu-panel{position:absolute;top:calc(100% + 11px);left:-12px;z-index:20;min-width:212px;
  background:var(--mid);border:1px solid var(--line);border-radius:10px;padding:6px;
  box-shadow:0 12px 30px rgba(0,0,0,.45)}
.menu-panel a{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:9px 12px;border-radius:7px;color:var(--fg);font-size:15px}
.menu-panel a:hover{background:var(--surface);color:var(--accent);text-decoration:none}
.menu-panel a[aria-current]{color:var(--accent);background:rgba(232,163,61,.09)}
.menu-count{font-size:12.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.menu-all{border-top:1px solid var(--line);margin-top:5px;padding-top:11px!important;
  color:var(--dim)!important;font-size:14px!important}
.menu-all:hover{color:var(--accent)!important}

/* on a phone the panel spans the nav instead of hanging off one word */
@media (max-width:620px){
  .menu{position:static}
  .menu-panel{left:0;right:0;min-width:0}
}
.site-nav a{color:var(--dim)}
.site-nav a:hover{color:var(--accent)}
.nav-admin{color:var(--accent2)!important}

/* the admin header keeps the old compact text brand */
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--fg);font-weight:700;letter-spacing:.01em}
.brand:hover{text-decoration:none;color:var(--accent)}
.brand-mark{font-size:22px}
.head-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:14px;padding-bottom:14px;flex-wrap:wrap}

main.wrap{flex:1;padding:40px 20px 64px;width:100%;max-width:var(--wrap);margin:0 auto}

/* home */
.intro{margin-bottom:36px}
.intro h1{font-size:clamp(28px,5vw,40px);line-height:1.15;letter-spacing:-.02em}
.lede{color:var(--dim);margin-top:12px;max-width:60ch;font-size:17px}

.empty{border:1px dashed var(--line);border-radius:var(--radius);padding:40px 24px;text-align:center;color:var(--dim)}

.trips{list-style:none;display:flex;flex-direction:column;gap:18px}
.trip{background:var(--mid);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:border-color .15s,transform .15s}
.trip:hover{border-color:var(--accent);transform:translateY(-1px)}
.trip-link{display:flex;gap:16px;color:inherit;align-items:flex-start;padding:14px 16px}
.trip-link:hover{text-decoration:none}
/* Half the old 190x150. Height is pinned and the tile is top-aligned, because
   with align-items:stretch the image would otherwise grow to whatever height
   the title and excerpt happen to need, halving only the width. */
.trip-shot{flex:0 0 95px;height:75px;align-self:flex-start;
  background:var(--surface);overflow:hidden;border-radius:8px}
.trip-shot img{width:100%;height:100%;object-fit:cover;min-height:75px}
/* Stand-in when a trip has no photo. The art is portrait and only 206px wide,
   so it fills the narrow desktop slot by cropping (biased up to keep his head
   in frame) and switches to contain on mobile, where the slot goes full width
   and cropping would mean upscaling small art across the screen. */
.trip-shot--none{min-height:75px;background:#3f3f3f;opacity:.85;transition:opacity .15s}
.trip-shot--none img{width:100%;height:100%;min-height:75px;
  object-fit:cover;object-position:center 18%}
.trip:hover .trip-shot--none{opacity:1}
.trip-body{padding:0;min-width:0}
.trip-body h2{font-size:20px;line-height:1.3;letter-spacing:-.01em}
.trip-meta{font-size:13.5px;color:var(--dim);margin-top:6px}
.trip-excerpt{color:var(--dim);margin-top:10px;font-size:15px}
.tag-draft{margin-left:10px;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);border:1px solid rgba(232,163,61,.4);border-radius:99px;padding:2px 8px}

.pager{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:32px;font-size:15px}

/* single post */
.post-head{margin-bottom:28px}
.post h1{font-size:clamp(26px,4.5vw,36px);line-height:1.2;letter-spacing:-.02em}
.post-meta{color:var(--dim);margin-top:10px;font-size:15px}
.draft-banner{background:rgba(232,163,61,.12);border:1px solid rgba(232,163,61,.35);color:var(--accent);
  border-radius:8px;padding:9px 14px;font-size:14px;margin-bottom:18px}
.post-body{font-size:17px;max-width:68ch}
.post-body p{margin-bottom:1.1em}
.back{margin-top:40px;font-size:15px}

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:36px}
.gallery figure{background:var(--mid);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.gallery img{width:100%}
.gallery figcaption{padding:10px 13px;font-size:13.5px;color:var(--dim);border-top:1px solid var(--line)}

/* footer */
.site-foot{border-top:1px solid var(--line);padding:26px 0;color:var(--dim);font-size:14px}
.site-foot p+p{margin-top:4px}

@media (max-width:620px){
  .masthead{padding-top:12px;padding-bottom:12px}
  /* At 95px the thumbnail no longer needs its own row, so the card keeps the
     thumb-beside-text layout on phones instead of stacking. */
  .trip-link{gap:13px;padding:12px 13px}
  .trip-shot{flex:0 0 78px;height:62px}
  .trip-shot img{min-height:0}
  .trip-shot--none img{min-height:0}
  .trip-body{padding:0}
  .trip-body h2{font-size:17px}
  .trip-excerpt{font-size:14px}
  main.wrap{padding-top:28px}
}

/* categories */
.chip{display:inline-block;font-size:12px;letter-spacing:.04em;color:var(--accent2);
  background:rgba(79,209,165,.09);border:1px solid rgba(79,209,165,.32);
  border-radius:99px;padding:3px 10px;margin:0 5px 5px 0}
.chip:hover{text-decoration:none;background:rgba(79,209,165,.18);border-color:var(--accent2)}
.trip-cats{padding:0 16px 13px 123px}
.post-cats{margin-top:34px;font-size:13.5px;color:var(--faint)}
.post-cats .chip{margin-left:6px}
.crumb{font-size:13.5px;color:var(--faint);margin-bottom:10px}
.cat-list{list-style:none;display:flex;flex-direction:column;gap:12px}
.cat-list li{background:var(--mid);border:1px solid var(--line);border-radius:var(--radius);padding:15px 18px}
.cat-list li:hover{border-color:var(--accent)}
.cat-list a{display:flex;align-items:baseline;justify-content:space-between;gap:14px;color:var(--fg)}
.cat-list a:hover{text-decoration:none;color:var(--accent)}
.cat-name{font-size:18px;font-weight:600}
.cat-count{font-size:13px;color:var(--faint);font-variant-numeric:tabular-nums}
.cat-list p{margin-top:6px;font-size:14px}
@media (max-width:620px){ .trip-cats{padding:0 13px 11px 104px} }

/* search */
.searchbox{display:flex;gap:10px;margin:18px 0 12px;max-width:520px}
.searchbox input{flex:1;background:var(--mid);color:var(--fg);border:1px solid var(--line);
  border-radius:8px;padding:11px 14px;font:inherit;font-size:16px}
.searchbox input:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
.searchbox .btn{background:var(--accent);color:#06171f;border:0;border-radius:8px;
  padding:0 18px;font:inherit;font-weight:600;cursor:pointer}

/* archive */
.years{list-style:none;display:flex;flex-direction:column;gap:14px}
.year{background:var(--mid);border:1px solid var(--line);border-radius:var(--radius);padding:15px 18px}
.year-head{display:flex;align-items:center;gap:14px}
.year-n{font-size:21px;font-weight:700;color:var(--fg);min-width:62px}
.year-n:hover{color:var(--accent);text-decoration:none}
.year-bar{flex:1;height:7px;background:var(--deep);border-radius:99px;overflow:hidden}
.year-bar span{display:block;height:100%;background:var(--accent);opacity:.75;border-radius:99px}
.months{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.months a{font-size:13px;background:var(--deep);border:1px solid var(--line);border-radius:7px;
  padding:5px 10px;color:var(--fg)}
.months a:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.mo-empty{font-size:13px;padding:5px 10px;color:var(--faint);opacity:.4}

/* next / previous */
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:40px;
  padding-top:24px;border-top:1px solid var(--line)}
.pn{display:block;background:var(--mid);border:1px solid var(--line);border-radius:var(--radius);
  padding:13px 16px;color:var(--fg)}
.pn:hover{border-color:var(--accent);text-decoration:none}
.pn-next{text-align:right}
.pn-dir{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--faint)}
.pn-title{display:block;margin-top:5px;font-size:15px;line-height:1.35}
.pn:hover .pn-title{color:var(--accent)}
@media (max-width:620px){ .post-nav{grid-template-columns:1fr} .pn-next{text-align:left} }