/* youthhockeycoachingtips.com - v3 (2026-10-31, Barry): the look of the book site (ifitmakessense.com), same brown colors */
:root{
  --ink:#15181A; --muted:#5C6167; --rule:#C8CAC3; --bg:#E7E8E3; --box:#FFFFFF;
  --accent:#8E5115; --accent-dk:#6B3C0F; --accent-soft:#E3D7C4; --bar:#8B4F13; --callout:#FBF3E4;
  --strip:#F3E3C6; --strip-line:#D9BF93; --gold:#C8862A;
  --shadow:0 1px 2px rgba(20,24,26,.06), 0 6px 18px rgba(20,24,26,.06);
  --barh:96px;
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--bg); color:var(--ink); font:18px/1.6 Fraunces, Georgia, "Times New Roman", serif; }
a{ color:var(--accent); }
a:hover{ color:var(--accent-dk); }
p{ margin:0 0 1em; }
img{ max-width:100%; }

/* ---------- header ---------- */
.bar{ position:sticky; top:0; z-index:40; background:var(--bar); color:#fff; box-shadow:0 2px 6px rgba(0,0,0,.18); }
.bar-in{ max-width:1240px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:10px; padding:12px 20px 12px; }
.brand{ color:#fff; text-decoration:none; font:700 26px/1.2 Fraunces, Georgia, serif; text-align:center; }
.brand:hover{ color:#fff; }
.brand .br-short{ display:none; }
.bar nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.bar nav a, .bar nav .nav-btn{ display:inline-flex; align-items:center; gap:6px; background:var(--accent-soft); color:var(--ink); border:0; border-radius:.25rem;
  padding:.22rem .75rem; margin:0; cursor:pointer; font:400 18px/1.35 Fraunces, Georgia, serif; text-decoration:none; white-space:nowrap; }
.bar nav a:hover, .bar nav .nav-btn:hover{ background:#fff; color:var(--ink); }
.bar nav a[aria-current]{ background:var(--ink); color:#fff; }
.bar nav .nav-btn svg{ display:block; }
.ph-s, .ph-m, .hm-panel{ display:none; }

/* ---------- page frame and white boxes ---------- */
.wrap{ max-width:1240px; margin:0 auto; padding:28px 24px 48px; }
.box{ background:var(--box); border:1px solid var(--rule); border-radius:4px; box-shadow:var(--shadow); padding:18px 18px 20px; }
h1, h2, h3{ font-family:Fraunces, Georgia, serif; font-weight:700; line-height:1.2; color:var(--ink); }
.callout{ background:var(--callout); border-left:5px solid var(--gold); border-radius:2px; padding:16px 22px 6px; }
.callout h1{ font-size:36px; margin:0 0 12px; }

/* ---------- home page ---------- */
.hero{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:44px; align-items:start; }
.hero-photo{ margin:0; }
.hero-photo img, .pick-photo img{ display:block; width:100%; height:auto; border-radius:3px; box-shadow:0 10px 30px rgba(20,24,26,.25); }
.two{ display:grid; grid-template-columns:1fr 1fr; gap:28px 44px; margin-top:44px; padding-top:36px; border-top:1px solid var(--rule); align-items:start; }
.col-h, .side-h{ font-size:30px; margin:0 0 12px; }
.col-h a, .side-h a{ color:var(--ink); text-decoration:none; }
.col-h a:hover, .side-h a:hover{ color:var(--accent); }
.tl{ list-style:none; margin:0; padding:0; }
.tl li{ margin:0; }
.tl a{ display:block; padding:5px 0; color:var(--accent); text-decoration:none; font-size:18px; line-height:1.35; }
.tl a:hover{ text-decoration:underline; text-underline-offset:3px; }
.tl a[aria-current]{ color:var(--ink); font-weight:700; background:var(--accent-soft); margin:0 -8px; padding:5px 8px; border-radius:3px; text-decoration:none; }
.book{ display:flex; gap:22px; align-items:flex-start; margin-top:32px; max-width:760px; }
.book > a{ flex:none; line-height:0; }
.book img{ width:110px; height:auto; border-radius:3px; box-shadow:0 2px 8px rgba(0,0,0,.2); }
.book p{ margin:0 0 .5em; }
.book .t{ font-weight:700; font-size:20px; line-height:1.3; }
.book .t a{ text-decoration:none; }

/* ---------- Coaching Tips / Barry's Teams: list on the left, the page on the right ---------- */
.sec{ display:grid; grid-template-columns:400px minmax(0,1fr); gap:40px; align-items:start; }
.hint{ margin:0 0 10px; }
.prompt{ display:flex; align-items:center; gap:18px; padding:30px 18px; }
.prompt p{ margin:0; font-weight:700; font-size:26px; line-height:1.25; }
.tri{ flex:none; width:0; height:0; border-top:19px solid transparent; border-bottom:19px solid transparent; border-right:32px solid var(--accent); }
.pick-photo{ margin:28px 0 0; }
.pick-photo img{ width:auto; max-width:100%; max-height:calc(100vh - var(--barh) - 220px); margin:0 auto; }

/* the white reading box: heading stays put, the page scrolls inside it */
.reader{ position:sticky; top:calc(var(--barh) + 16px); height:calc(100vh - var(--barh) - 32px); height:calc(100dvh - var(--barh) - 32px);
  display:flex; flex-direction:column; padding:16px 0 0 16px; overflow:hidden; }
.rhead{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:14px; margin-right:16px;
  background:var(--strip); border:1px solid var(--strip-line); border-radius:4px; padding:9px 12px 9px 16px; }
.rhead h1{ margin:0; font-size:24px; line-height:1.25; }
.rback, .rbtn{ display:inline-flex; align-items:center; gap:.35em; flex:none; background:var(--accent); color:#fff; border:0; border-radius:4px; padding:.32rem .9rem;
  font:700 18px/1.3 Fraunces, Georgia, serif; text-decoration:none; cursor:pointer; white-space:nowrap; }
.rback:hover, .rbtn:hover{ background:var(--accent-dk); color:#fff; }
.rbody{ flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:18px 30px 22px 2px; scrollbar-gutter:stable; }
.rbody h2{ font-size:24px; margin:1.4em 0 .5em; }
.rfoot{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-top:30px; padding-top:16px; border-top:1px solid var(--rule); }

/* photos and results inside a page */
.gallery{ display:grid; gap:16px; margin:8px 0 26px; align-items:start; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); }
.gallery figure{ margin:0; }
.shot{ display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in; line-height:0; }
.gallery img, .solo img{ width:100%; height:auto; border-radius:4px; border:1px solid var(--rule); background:#eef2f6; }
.shot:hover img{ filter:brightness(1.06); }
.gallery figcaption, .solo figcaption{ font-size:17px; line-height:1.4; padding:6px 2px 0; }
.solo{ margin:8px 0 26px; }
.tablewrap{ overflow-x:auto; margin:8px 0 30px; -webkit-overflow-scrolling:touch; }
.results{ width:auto; max-width:100%; margin:0 auto; border-collapse:collapse; font:17px/1.4 Fraunces, Georgia, serif; }
.results th{ background:var(--bar); color:#fff; text-align:left; padding:8px 12px; font-weight:600; white-space:nowrap; }
.results td{ padding:6px 12px; border-bottom:1px solid var(--rule); vertical-align:top; }
.results tbody tr:nth-child(even) td{ background:#F6F3EC; }
.results td.num{ white-space:nowrap; }
.results td.w{ color:#1a7f37; font-weight:700; }
.results td.l{ color:#b42318; font-weight:700; }
.results td.t{ color:#5a6b7c; font-weight:700; }
.results tr.note td{ font-weight:600; background:var(--accent-soft) !important; }
h2.results-title{ text-align:center; }
.lines{ font-weight:600; }
hr{ border:0; border-top:1px solid var(--rule); margin:30px 0; }
.list{ margin:0 0 20px; padding-left:22px; }
.list li{ margin:0 0 8px; }
.nf h1{ margin:0 0 12px; }

/* photo enlarger */
#lb{ position:fixed; inset:0; background:rgba(21,24,26,.94); display:none; align-items:center; justify-content:center; z-index:80; padding:28px; }
#lb.on{ display:flex; }
#lb img{ max-width:100%; max-height:100%; border-radius:4px; }
#lb button{ position:absolute; top:16px; right:20px; background:none; border:0; color:#fff; font-size:38px; line-height:1; cursor:pointer; padding:6px 12px; }

/* ---------- middle sizes ---------- */
@media (max-width:1100px){
  .sec{ grid-template-columns:330px minmax(0,1fr); gap:28px; }
  .hero{ gap:30px; }
}

/* ---------- phones and small tablets ---------- */
@media (max-width:899px){
  .wrap{ padding:18px 14px 36px; }
  .hero, .two, .sec{ grid-template-columns:1fr; }
  .hero{ gap:22px; }
  .two{ margin-top:26px; padding-top:0; border-top:0; gap:18px; }
  .box{ padding:14px 12px 16px; }
  .callout{ padding:14px 16px 4px; border-left-width:4px; }
  .callout h1{ font-size:28px; }
  .col-h, .side-h{ font-size:26px; }
  .pick{ display:none; }
  .reading .side{ display:none; }
  .reader{ position:static; height:auto; overflow:visible; padding:0; }
  .rhead{ position:sticky; top:var(--barh); z-index:5; margin:0; border-radius:4px 4px 0 0; border-width:0 0 1px; padding:10px 12px 10px 14px; }
  .rhead h1{ font-size:20px; }
  .rback, .rbtn{ font-size:17px; padding:.3rem .8rem; }
  .rbody{ overflow:visible; padding:16px 16px 18px; }
  .book{ gap:14px; }
  .book img{ width:80px; }
  .gallery{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; }
  .results{ font-size:16px; } .results th, .results td{ padding:6px 8px; }
}
@media (max-width:899px){
  .bar-in{ flex-direction:row; flex-wrap:nowrap; align-items:center; gap:8px; padding:6px 12px 6px 16px; }
  .bar nav{ display:none; }
  .brand{ margin-right:auto; font-size:clamp(20px, 6.6vw, 28px); white-space:nowrap; text-align:left; }
  .brand .br-full{ display:none; } .brand .br-short{ display:inline; }
  .ph-s, .ph-m{ display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:52px; background:none; border:0; padding:0 2px; margin:0; color:#fff; cursor:pointer; flex:0 0 auto; -webkit-tap-highlight-color:transparent; }
  .ph-s{ margin-right:8px; } .ph-s svg{ display:block; margin-bottom:6px; }
  .ph-lines{ display:block; width:30px; height:3px; background:#fff; border-radius:2px; box-shadow:0 8px 0 #fff, 0 16px 0 #fff; margin-bottom:22px; }
  .ph-word{ font:700 11px/1 Arial, Helvetica, sans-serif; letter-spacing:1.5px; color:#fff; }
  .hm-panel.open{ display:block; position:fixed; inset:0; z-index:70; background:var(--bar); color:#fff; padding:14px 18px 40px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .hm-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
  .hm-t{ font:700 22px/1.25 Fraunces, Georgia, serif; color:#fff; }
  .hm-x{ background:none; border:0; color:#fff; font-size:42px; line-height:1; padding:0 4px; cursor:pointer; font-family:Arial, Helvetica, sans-serif; }
  .hm-item{ display:block; width:100%; text-align:left; background:none; border:0; border-bottom:1px solid rgba(255,255,255,.25); color:#fff; text-decoration:none;
    font:400 22px/1.3 Fraunces, Georgia, serif; padding:15px 4px; margin:0; cursor:pointer; }
  .hm-item.is-on{ font-weight:700; }
  body.hm-lock{ overflow:hidden; }
}

/* ---------- Leave a Comment box ---------- */
.cm-overlay{ position:fixed; inset:0; z-index:60; background:rgba(10,18,26,.6); display:flex; align-items:center; justify-content:center; padding:16px; }
.cm-overlay[hidden]{ display:none !important; }
.cm-overlay [hidden]{ display:none !important; }   /* after Send: hide the boxes and the Send button so only the thank-you and Close show */
.cm-box{ background:#fff; color:var(--ink); width:100%; max-width:34rem; max-height:calc(100vh - 32px); overflow:auto; border-radius:6px; box-shadow:0 12px 40px rgba(0,0,0,.3); }
.cm-head{ background:var(--bar); color:#fff; padding:.9rem 1.2rem; border-radius:6px 6px 0 0; }
.cm-head h2{ margin:0; font-size:24px; color:#fff; }
.cm-head p{ margin:.3rem 0 0; font-size:17px; line-height:1.4; color:var(--strip); }
.cm-body{ padding:1rem 1.2rem 1.2rem; display:flex; flex-direction:column; gap:.8rem; }
.cm-body label{ display:block; font-weight:600; font-size:18px; line-height:1.35; }
.cm-body .opt{ font-weight:400; color:var(--muted); }
.cm-body textarea, .cm-body input{ display:block; width:100%; margin-top:.3rem; font:400 18px/1.45 Fraunces, Georgia, serif; color:var(--ink); border:1px solid #C9BBA6; border-radius:4px; padding:.5rem .65rem; }
.cm-body textarea{ min-height:8rem; resize:vertical; }
.cm-note{ display:block; margin-top:.3rem; font-weight:400; font-size:16px; line-height:1.4; color:var(--muted); }
.cm-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.cm-msg{ margin:0; font-size:18px; line-height:1.45; color:#1a7f37; }
.cm-msg.bad{ color:#b42318; }
.cm-row{ display:flex; gap:.7rem; flex-wrap:wrap; }
.cm-btn{ display:inline-flex; align-items:center; background:var(--accent); color:#fff; border:1px solid var(--accent); border-radius:4px; padding:.4rem 1.1rem; cursor:pointer; font:700 18px/1.4 Fraunces, Georgia, serif; }
.cm-btn:hover{ background:var(--accent-dk); border-color:var(--accent-dk); }
.cm-row .cm-cancel{ background:#fff; color:var(--accent); }
.cm-row .cm-cancel:hover{ background:var(--accent-soft); color:var(--accent-dk); }

/* ---------- search ---------- */
.hs-search{ display:none; }
.hs-search:not([hidden]){ display:block; position:fixed; left:0; right:0; bottom:0; top:var(--hs-top,0px); z-index:55; }
.hs-back{ position:absolute; inset:0; background:rgba(10,18,26,.45); }
.hs-box{ position:relative; margin:0 auto; max-width:820px; max-height:calc(100% - 24px); display:flex; flex-direction:column; background:#fff; border-radius:0 0 8px 8px; box-shadow:0 10px 30px rgba(0,0,0,.25); overflow:hidden; }
.hs-row{ display:flex; align-items:center; gap:10px; padding:14px 16px; background:var(--accent-soft); border-bottom:1px solid var(--rule); flex:0 0 auto; }
.hs-row svg{ flex:0 0 auto; }
.hs-in{ flex:1 1 auto; min-width:0; font:400 20px/1.3 Fraunces, Georgia, serif; color:var(--ink); background:#fff; border:1.5px solid var(--accent); border-radius:4px; padding:8px 12px; -webkit-appearance:none; appearance:none; }
.hs-in:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.hs-x{ flex:0 0 auto; background:var(--accent); color:#fff; border:0; border-radius:4px; font:700 18px/1 Fraunces, Georgia, serif; padding:10px 14px; cursor:pointer; }
.hs-msg{ margin:0; padding:10px 16px 6px; font-size:18px; line-height:1.4; color:var(--muted); flex:0 0 auto; }
.hs-res{ overflow-y:auto; -webkit-overflow-scrolling:touch; padding:0 16px 16px; flex:1 1 auto; }
.hs-item{ display:block; text-decoration:none; color:var(--ink); padding:12px 4px; border-bottom:1px solid var(--rule); }
.hs-item:hover, .hs-item:focus{ background:var(--accent-soft); outline:none; color:var(--ink); }
.hs-t{ display:block; font-weight:700; font-size:20px; line-height:1.3; color:var(--accent); }
.hs-c{ display:block; font-size:17px; line-height:1.35; color:var(--muted); margin-top:2px; }
.hs-x2{ display:block; font-size:18px; line-height:1.45; margin-top:4px; }
.hs-item mark{ background:#ffe58a; color:inherit; padding:0 1px; border-radius:2px; }
body.hs-lock{ overflow:hidden; }
@media (max-width:640px){
  .hs-box{ max-width:none; border-radius:0; max-height:100%; }
  .hs-row{ padding:10px 12px; gap:8px; } .hs-in{ font-size:19px; } .hs-x{ font-size:17px; padding:10px 12px; }
  .hs-msg{ font-size:17px; padding:8px 12px 4px; } .hs-res{ padding:0 12px 24px; }
  .hs-t{ font-size:19px; } .hs-x2{ font-size:17px; }
}

/* ---------- 2026-10-31 (Barry): one white box in the middle of the page, like the book site ---------- */
.one{ display:block; }
.one .reader{ position:relative; top:auto; margin:0 auto; }
.reader.wide{ max-width:1080px; height:auto; max-height:calc(100vh - var(--barh) - 32px); max-height:calc(100dvh - var(--barh) - 32px); }
.reader.narrow{ max-width:820px; }
.reader.mid{ max-width:940px; }
.tl.cols2{ columns:2; column-gap:56px; column-rule:1px solid var(--rule); margin-top:4px; }
.tl.cols2 li{ break-inside:avoid; }
.tl.cols2 a{ padding:6px 0; }
@media (max-width:899px){
  .tl.cols2{ columns:1; }
  .one .reader, .reader.wide{ max-width:none; max-height:none; }
}

/* 2026-10-31 (Barry): the book box goes all the way across, with the book's coaching phrases in two columns */
.home .book{ max-width:none; }
.home .book > div{ flex:1 1 auto; min-width:0; }
.booklist{ margin-top:6px; }
.philo-top{ display:flex; gap:18px; align-items:flex-start; margin:0 0 14px; }
.philo-top img{ width:90px; height:auto; border-radius:3px; box-shadow:0 2px 8px rgba(0,0,0,.2); flex:none; }
.philo-top p{ margin:0; }
.philo-top > a{ flex:none; width:90px; line-height:0; } .philo-top img{ width:100%; }
/* 2026-10-31: home page Philosophical Ideas box (same as its page) */
.philo-home{ margin-top:32px; }
.philo-home .philo-top p{ font-size:18px; }
/* 2026-10-31: Barry's Teams in two parts (coached / played on) */
.rbody h2.tgroup{ font-size:22px; margin:22px 0 6px; padding-bottom:6px; border-bottom:2px solid var(--accent-soft); }
.rbody .hint + h2.tgroup{ margin-top:6px; }
h3.tgroup{ font-size:19px; margin:18px 0 4px; color:var(--ink); }
.col-h + h3.tgroup{ margin-top:0; }
/* 2026-10-31: home page "About Coach Barry" (like the book site's About the Author) */
.about-home{ margin-top:32px; }
.about-in{ display:flex; gap:28px; align-items:flex-start; }
.about-txt{ flex:1 1 auto; min-width:0; }
.about-txt p{ font-size:18px; margin:0 0 .8em; }
.about-ph{ flex:none; display:flex; gap:12px; }
.about-ph figure{ margin:0; }
.about-ph .shot{ display:block; padding:0; border:0; background:none; cursor:zoom-in; line-height:0; }
.about-ph img{ height:260px; width:auto; border-radius:4px; box-shadow:0 2px 8px rgba(0,0,0,.2); }
@media (max-width:899px){
  .about-in{ flex-direction:column; gap:14px; }
  .about-ph{ width:100%; }
  .about-ph figure{ flex:1 1 0; min-width:0; }
  .about-ph img{ height:auto; width:100%; }
}
.rbody > h2.tgroup:first-child{ margin-top:2px; }
/* 2026-10-31: teams Barry played on, under the About text, beside the pictures */
.about-txt h3.tgroup{ margin:14px 0 2px; }
.about-txt .tl.played{ column-gap:28px; }
.about-txt .tl.played a{ padding:4px 0; font-size:17px; }
@media (max-width:1100px){ .about-txt .tl.played{ columns:1; } }
/* 2026-10-31: a picture of just Barry on a team page - big, but not as wide as the team photo */
.solo.me{ max-width:560px; margin:18px auto 26px; }