/* ===========================================================================
   PENDERS BASEBALL — shared design system
   Edit tokens here once; every page picks up the change.
   =========================================================================== */
:root{
  --cream:#F2EEE3;
  --cream-soft:#ece6d6;
  --navy:#0a1628;
  --navy-mid:#0e2138;
  --navy-deep:#081222;
  --ink:#10233f;
  --muted:#5c6678;
  --seam:#d12b39;
  --line:rgba(10,22,40,.15);
  /* baseball-seam stitch tile (two rows of doubled red stitches, tiles on x) */
  --stitch:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='14'%20height='16'%20viewBox='0%200%2014%2016'%3E%3Cg%20stroke='%23d12b39'%20stroke-width='2'%20stroke-linecap='round'%20fill='none'%3E%3Cpath%20d='M0%202L8%206'/%3E%3Cpath%20d='M2.4%202L10.4%206'/%3E%3Cpath%20d='M0%2014L8%2010'/%3E%3Cpath%20d='M2.4%2014L10.4%2010'/%3E%3C/g%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);
  font-family:"Hanken Grotesk",system-ui,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1120px;margin:0 auto;padding:0 clamp(20px,5vw,64px)}

/* ---- baseball-seam dividers ---- */
.seam{height:16px;background:var(--stitch) repeat-x center;background-size:14px 16px}
.seam.thin{height:11px;background-size:9.6px 11px;opacity:.6}

/* ---- brand lockup ---- */
.lk{display:inline-flex;flex-direction:column;align-items:center;line-height:1;color:var(--navy)}
.lk .word{font-family:"Barlow Condensed";font-weight:900;letter-spacing:.01em;font-size:26px;line-height:.86}
.lk .stitch{height:8px;width:100%;margin:4px 0 5px;background:var(--stitch) repeat-x center;background-size:7px 8px}
.lk .sub{font-family:"Barlow Condensed";font-weight:700;font-size:10.5px;letter-spacing:.42em;padding-left:.42em;color:var(--muted)}
.lk.on-navy{color:var(--cream)}
.lk.on-navy .sub{color:#b9bdc4}

/* ---- header / nav ---- */
header{position:sticky;top:0;z-index:30;background:rgba(242,238,227,.9);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 0;min-height:66px}
.nav .brand{text-decoration:none}
.navlinks{display:flex;align-items:center;gap:28px;flex-wrap:nowrap}
.navlinks a{font-family:"Barlow Condensed";font-weight:600;text-transform:uppercase;letter-spacing:.07em;
  font-size:15px;color:var(--ink);text-decoration:none;opacity:.82;white-space:nowrap}
.navlinks a:hover{opacity:1;color:var(--seam)}
.navlinks a.current{opacity:1;color:var(--navy);text-decoration:underline;text-decoration-color:var(--seam);
  text-underline-offset:6px;text-decoration-thickness:2px}
.navlinks a.btn,.navlinks a.btn:hover{color:var(--cream);opacity:1}

/* ---- mobile nav toggle (hamburger) ---- */
.navtoggle{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  width:44px;height:44px;margin:-10px -8px -10px 0;padding:10px;background:transparent;border:0;cursor:pointer}
.navtoggle span{display:block;width:24px;height:2px;background:var(--navy);border-radius:2px;transition:.2s}
.navtoggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navtoggle.open span:nth-child(2){opacity:0}
.navtoggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:9px;cursor:pointer;white-space:nowrap;flex:none;
  font-family:"Barlow Condensed";font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  font-size:16px;padding:11px 22px;border-radius:6px;text-decoration:none;
  background:var(--navy);color:var(--cream);border:1.5px solid var(--navy);transition:.16s}
.btn:hover{background:var(--seam);border-color:var(--seam);color:var(--cream)}
.btn.lg{font-size:18px;padding:14px 32px}
.btn.ghost{background:transparent;color:var(--navy)}
.btn.ghost:hover{background:var(--navy);color:var(--cream)}

/* ---- shared type helpers ---- */
.kicker{font-family:"Barlow Condensed";font-weight:600;text-transform:uppercase;letter-spacing:.24em;
  font-size:clamp(12px,1.6vw,15px);color:var(--muted)}
.kicker .mark{color:var(--seam)}

/* ---- inner-page hero (About/Services/Book/Policies/Contact) ---- */
.pagehero{padding:clamp(48px,8vw,104px) 0 clamp(34px,5vw,56px)}
.pagehero .kicker{color:var(--muted)}
.pagehero h1{font-family:"Barlow Condensed";font-weight:800;text-transform:uppercase;
  font-size:clamp(2.4rem,6vw,4.4rem);line-height:.96;letter-spacing:.005em;margin:14px 0 0;
  max-width:18ch;color:var(--navy);text-wrap:balance}
.pagehero .lede{font-size:clamp(1.05rem,2.2vw,1.35rem);color:var(--ink);max-width:54ch;
  margin:20px 0 0;line-height:1.6}

/* ---- generic section + prose ---- */
.section{padding:clamp(46px,7vw,84px) 0}
.section.soft{background:var(--cream-soft)}
.sec-h{font-family:"Barlow Condensed";font-weight:700;text-transform:uppercase;letter-spacing:.01em;
  font-size:clamp(1.5rem,3.4vw,2.3rem);margin:0;color:var(--navy)}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-bottom:1.5px solid var(--line);padding-bottom:16px;margin-bottom:30px}
.sec-head .note{font-family:"JetBrains Mono";font-size:12px;color:var(--muted);letter-spacing:.05em}
.prose{max-width:64ch}
.prose p{font-size:clamp(1rem,1.6vw,1.15rem);line-height:1.7;color:var(--ink);margin:0 0 1.1em}
.prose p:last-child{margin-bottom:0}
.prose strong{font-weight:700;color:var(--navy)}

/* ---- image placeholder slots (swap for real <img> later) ---- */
.imgslot{position:relative;border:1.5px solid var(--line);border-radius:10px;overflow:hidden;
  background-color:#e3ddcd;
  background-image:repeating-linear-gradient(45deg,transparent 0 10px,rgba(10,22,40,.05) 10px 11px);
  display:grid;place-items:center;min-height:240px;color:var(--muted)}
.imgslot .tag{font-family:"JetBrains Mono";font-size:12px;line-height:1.6;text-align:center;
  background:var(--cream);border:1px solid var(--line);border-radius:6px;padding:8px 12px;max-width:80%}
.imgslot.dark{background-color:#13203a;border-color:#1d2c44;color:#9fb0cc;
  background-image:repeating-linear-gradient(45deg,transparent 0 10px,rgba(255,255,255,.04) 10px 11px)}
.imgslot.dark .tag{background:var(--navy-deep);border-color:#22324f;color:#9fb0cc}
.cap{font-family:"JetBrains Mono";font-size:11.5px;letter-spacing:.04em;color:var(--muted);margin-top:10px}

/* ---- footer ---- */
footer{background:var(--navy-deep);color:#9fb0c9}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:30px;
  padding:clamp(42px,6vw,64px) 0 clamp(28px,4vw,44px)}
.foot .col{display:flex;flex-direction:column;gap:9px;min-width:160px}
.foot a{color:#9fb0c9;text-decoration:none;font-family:"Barlow Condensed";font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;font-size:14px}
.foot a:hover{color:var(--cream)}
.foot .meta{font-family:"JetBrains Mono";font-size:11px;line-height:1.8;letter-spacing:.04em;color:#7589a6}
.foot .meta b{color:#b9c6da;font-weight:500}

/* ---- forms (Book / Contact) ---- */
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.field label{font-family:"Barlow Condensed";font-weight:600;text-transform:uppercase;letter-spacing:.05em;
  font-size:13px;color:var(--navy)}
.field label .req{color:var(--seam)}
.field input,.field select,.field textarea{font-family:"Hanken Grotesk";font-size:16px;color:var(--ink);
  background:#fff;border:1.5px solid var(--line);border-radius:7px;padding:12px 14px;width:100%}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--navy);
  box-shadow:0 0 0 3px rgba(10,22,40,.08)}
.field textarea{min-height:120px;resize:vertical}
.field .hint{font-family:"JetBrains Mono";font-size:11px;color:var(--muted);letter-spacing:.03em}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.checkrow{display:flex;align-items:flex-start;gap:11px;margin:6px 0 4px}
.checkrow input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--navy)}
.checkrow span{font-size:14px;color:var(--ink);line-height:1.5}

@media (max-width:760px){
  .navtoggle{display:flex}
  .navlinks{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--cream);border-bottom:1.5px solid var(--line);
    box-shadow:0 14px 26px rgba(10,22,40,.14);
    padding:6px clamp(20px,5vw,64px) 16px;display:none}
  .navlinks.open{display:flex}
  .navlinks a,.navlinks a:not(.btn){display:block;opacity:1;font-size:18px;letter-spacing:.05em;
    padding:14px 0;border-top:1.5px solid var(--line)}
  .navlinks a:first-child{border-top:none}
  .navlinks a.current{text-decoration:none;color:var(--seam)}
  .navlinks a.btn{margin-top:14px;justify-content:center;font-size:16px;padding:13px 22px}
  .field-row{grid-template-columns:1fr}
}