@font-face { font-family: "Balsamiq"; src: url(fonts/balsamiq-bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Andika"; src: url(fonts/andika-regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Andika"; src: url(fonts/andika-bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
:root { --ink:#1d1d1f; --mute:#5b5b62; --line:#d9d9de; --blue:#1E6FB8; --green:#2E8B3E; --orange:#E8641B;
        --purple:#7B3FA0; --teal:#13858A; --red:#C62828; --brown:#8B5A2B; }
* { box-sizing: border-box; }
html { scroll-padding-top: 90px; }
body { margin:0; background:#fff; color:var(--ink); font:17px/1.5 "Andika", system-ui, sans-serif; }
a { color: var(--blue); }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
header.top { padding: 26px 0 8px; text-align:center; }
.wave { display:block; width:100%; height:14px; }
.crumb { text-align:left; margin: 10px 0 0; font-size:15px; }
.crumb a { text-decoration:none; font-weight:700; }
.crumb a:hover { text-decoration:underline; }
h1 { font-family:"Balsamiq", "Comic Sans MS", system-ui, sans-serif; font-size: clamp(30px, 5vw, 46px); line-height:1.1; margin:14px 0 6px; }
.lede { color:var(--mute); margin:0 auto; max-width: 640px; }
.tidelink { margin: 10px 0 0; font-size:15.5px; }
.tidelink a { font-weight:700; }
/* ---- front page ---- */
.sections { list-style:none; padding:0; margin: 30px auto 10px; display:grid; gap:22px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.scard { border:2px solid var(--line); border-radius:20px; background:#fff; display:flex; flex-direction:column; }
.scard.live { border-color: var(--green); grid-column: 1 / -1; }
.scard a.cover { display:flex; gap:24px; align-items:center; padding:22px; text-decoration:none; color:inherit; border-radius:18px; }
.scard a.cover:hover { background:#f7faf7; }
.scard a.cover:focus-visible { outline:3px solid var(--blue); outline-offset:2px; }
.fan { position:relative; flex:0 0 250px; height:190px; }
.fan img { position:absolute; width:118px; height:auto; border:1px solid #e3e3e8; background:#fff; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.fan img:nth-child(1) { left:0; top:22px; transform: rotate(-8deg); }
.fan img:nth-child(2) { left:66px; top:4px; z-index:2; }
.fan img:nth-child(3) { left:132px; top:22px; transform: rotate(8deg); }
.scard h2 { font-family:"Balsamiq", system-ui, sans-serif; font-size:30px; margin:0 0 4px; }
.scard p { margin:0 0 14px; color:var(--mute); }
.scard .go { display:inline-block; font-weight:700; border:2px solid var(--ink); border-radius:12px; padding:8px 18px; color:var(--ink); }
.scard.game { border-color: var(--blue); }
.scard a.gcover { display:flex; flex-direction:column; text-decoration:none; color:inherit; border-radius:18px; height:100%; }
.scard a.gcover:hover { background:#f6f9fc; }
.scard a.gcover:focus-visible { outline:3px solid var(--blue); outline-offset:2px; }
.scard a.gcover img { display:block; width:100%; height:200px; object-fit:cover; object-position: 50% 60%; border-radius:18px 18px 0 0; border-bottom:1px solid var(--line); }
.gtext { padding:16px 22px 22px; display:flex; flex-direction:column; flex:1; }
.gtext .go { align-self:flex-start; margin-top:auto; }
.kicker { font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--blue) !important; margin:0 0 2px !important; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.scard.soon { opacity:.6; border-style:dashed; padding:22px; }
.scard.soon h2 { font-size:24px; }
.badge { align-self:flex-start; display:inline-block; font-size:13px; font-weight:700; border:1.5px solid var(--line); border-radius:999px; padding:1px 10px; color:var(--mute); }
.sicon { display:block; width:54px; height:54px; margin-bottom:10px; }
@media (max-width:620px) {
  .scard a.cover { flex-direction:column; align-items:flex-start; padding:18px; }
  .fan { flex-basis:auto; width:250px; height:180px; margin: 0 auto; }
}
/* ---- hunts gallery ---- */
nav.tabs { position: sticky; top:0; z-index:5; background:#fff; border-bottom:1px solid var(--line); padding:12px 0; margin-top:18px; }
nav.tabs .wrap { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.tab { font:inherit; font-weight:700; font-size:15px; background:#fff; color:var(--ink); border:2px solid var(--line);
       border-radius: 999px; padding:6px 14px; cursor:pointer; }
.tab .n { font-weight:400; color:var(--mute); font-size:13px; margin-left:2px; }
.tab:hover { border-color: var(--ink); }
.tab[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 -3px 0 var(--ink); }
.tab:focus-visible, .btn:focus-visible, .thumb:focus-visible { outline:3px solid var(--blue); outline-offset:2px; }
.tab.t-beach { border-color:#9cc3e6; } .tab.t-backyard { border-color:#9fcfa8; } .tab.t-town { border-color:#f2b38f; }
.tab.t-indoors { border-color:#c3a6d6; } .tab.t-sky { border-color:#94cfd2; } .tab.t-teens { border-color:#e39a9a; }
.tab[aria-pressed="true"] { border-color: var(--ink); }
main { padding: 8px 0 30px; }
section.cat { margin: 26px 0 8px; }
section.cat h2 { font-family:"Balsamiq", system-ui, sans-serif; font-size:26px; margin:0; padding-bottom:4px; border-bottom:3px solid var(--line); }
section.c-beach h2 { border-color: var(--blue); } section.c-backyard h2 { border-color: var(--green); } section.c-town h2 { border-color: var(--orange); }
section.c-indoors h2 { border-color: var(--purple); } section.c-sky h2 { border-color: var(--teal); } section.c-teens h2 { border-color: var(--red); }
.blurb { color:var(--mute); margin:6px 0 14px; }
.grid { list-style:none; padding:0; margin:0; display:grid; gap:20px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.card { border:2px solid var(--line); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; background:#fff; }
.thumb { display:block; background:#fff; border-bottom:1px solid var(--line); padding:12px; }
.thumb img { display:block; width:100%; height:auto; border:1px solid #ececf0; transition: transform .15s; }
.thumb:hover img { transform: scale(1.02); }
.meta { padding: 12px 14px 14px; display:flex; flex-direction:column; flex:1; }
.meta h3 { margin:0; font-size:19px; line-height:1.25; }
.sub { margin:2px 0 8px; color:var(--mute); font-size:15px; }
.tags { margin:0 0 12px; display:flex; flex-wrap:wrap; gap:6px; }
.tag { font-size:12.5px; border:1.5px solid var(--line); border-radius:999px; padding:1px 9px; }
.tag.t-beach { border-color:var(--blue); } .tag.t-backyard { border-color:var(--green); } .tag.t-teens { border-color:var(--red); }
.tag.t-town { border-color:var(--orange); } .tag.t-indoors { border-color:var(--purple); } .tag.t-sky { border-color:var(--teal); }
.actions { margin:auto 0 0; display:flex; gap:8px; flex-wrap:wrap; }
.btn { display:inline-block; font-weight:700; font-size:15px; text-decoration:none; color:var(--ink); border:2px solid var(--ink);
       border-radius:10px; padding:6px 14px; background:#fff; cursor:pointer; font-family:inherit; }
.btn:hover { background:#f4f4f6; }
.btn.ghost { border-color: var(--line); }
.btn.ghost:hover { border-color: var(--ink); }
.hide { display:none !important; }
footer { border-top:1px solid var(--line); color:var(--mute); font-size:14.5px; padding:20px 0 34px; margin-top:20px; }
footer p { margin: 6px 0; }
dialog#viewer { border:none; padding:0; border-radius:16px; width:min(920px, 96vw); max-height:94vh; }
dialog#viewer::backdrop { background: rgba(20,20,25,.6); }
.vbar { display:flex; align-items:flex-start; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line); position:sticky; top:0; background:#fff; }
.vbar h3 { margin:0; font-size:20px; }
.vbar p { margin:2px 0 0; color:var(--mute); font-size:15px; }
.vbar .actions { margin-left:auto; flex-wrap:nowrap; }
.vbody { padding:16px; overflow:auto; }
.vbody img { display:block; width:100%; height:auto; border:1px solid #ececf0; }
.vdesc { margin:0 0 12px; }
.x { font-size:22px; line-height:1; padding:4px 11px; }
@media (max-width:620px) {
  nav.tabs .wrap { flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; -webkit-overflow-scrolling:touch; scrollbar-width:thin; padding-bottom:4px; }
  .tab { flex:0 0 auto; }
  html { scroll-padding-top: 70px; }
  .vbar { flex-wrap:wrap; } .vbar .actions { margin-left:0; flex-wrap:wrap; }
}
@media print { nav.tabs, footer, .actions { display:none; } }