/* styles for the service pages only, 8 Nov 2026 */
/* service pages, 8 Nov 2026 */
.hero-h1{font-family:var(--f-head);font-weight:400;font-size:clamp(32px,4.2vw,60px);line-height:1.08;margin:0 0 16px;max-width:19ch;text-wrap:balance}
.ph-full .copy .hero-h1{color:var(--cream)}
.ph-split .text .hero-h1{color:var(--ink)}
.crumbs{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:15px;color:var(--soft);margin:0 0 26px}
.crumbs a{color:var(--soft);text-underline-offset:3px}
.crumbs a:hover{color:var(--ink)}
.intro-sec{padding-bottom:0}
.answer{max-width:900px;padding:clamp(20px,3vw,34px);background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:18px}
.answer p{margin:0 0 20px;font-size:clamp(19px,1.5vw,22px);line-height:1.6}
.answer p b{font-family:var(--f-head);font-weight:400;color:var(--accent-ink)}
.answer .btns{margin-top:4px}
.meta{margin:22px 0 0;font-size:15px;color:var(--soft)}
.grid3.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ptable{list-style:none;margin:0 0 14px;padding:0;max-width:760px}
.ptable li{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:16px 0;border-top:1px solid var(--line)}
.ptable li:last-child{border-bottom:1px solid var(--line)}
.ptable span{min-width:0}
.ptable small{display:block;color:var(--soft);font-size:16px;line-height:1.45;margin-top:2px}
.ptable b{font-family:var(--f-head);font-weight:400;font-size:clamp(24px,2.2vw,30px);white-space:nowrap}
.note-sm{font-size:16px;color:var(--soft);margin:0 0 22px;max-width:62ch}
.wide.portrait{max-width:520px}
.rvgrid.one{grid-template-columns:minmax(0,640px)}
.srcs{font-size:15.5px;color:var(--soft);max-width:78ch;margin:0}
.srcs a{color:var(--soft);text-underline-offset:3px}
.tcard h3 a{text-decoration:none}
.tcard h3 a:hover{text-decoration:underline;text-underline-offset:4px}
.scard h3 a{text-decoration:none}
.scard h3 a:hover{text-decoration:underline;text-underline-offset:4px}
.page-intro .rules{max-width:860px}
@media(max-width:760px){
  .grid3.g2{grid-template-columns:1fr}
  .ptable li{flex-direction:column;gap:4px}
  .hero-h1{max-width:none}
}
.ph-full .copy .kick,.ph-full .copy .hero-h1,.ph-full .copy .hero-h1~p{text-shadow:0 1px 22px rgba(24,18,12,.6),0 0 2px rgba(24,18,12,.25)}

/* diagrams and town blocks, 8 Nov 2026 */
.diagram{margin:0;max-width:940px}
.diagram figcaption{color:var(--soft);font-size:16px;margin-top:14px;max-width:70ch}
.svgd{display:block;width:100%;height:auto;max-width:720px;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:10px}
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(6px,1.2vw,12px)}
.week .d{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 4px 12px;text-align:center;min-width:0}
.week .d b{display:block;font-family:var(--f-head);font-weight:400;font-size:clamp(20px,2.4vw,28px);margin-bottom:10px}
.week .chips{display:flex;flex-direction:column;align-items:center;gap:6px;min-height:46px}
.chip{display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--accent);flex:none}
.chip.str{border-radius:4px;width:18px;height:18px;background:var(--ink)}
.chip.play{border-radius:50% 50% 50% 0;width:18px;height:18px;background:var(--accent-ink)}
.weekbar{margin-top:10px;padding:14px 18px;border-radius:14px;background:var(--ink);color:var(--cream);font-size:clamp(15px,1.5vw,18px);line-height:1.4;text-align:center}
.legend{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px;font-size:17px;color:var(--soft)}
.legend li{display:flex;gap:12px;align-items:center}
.bars{display:grid;gap:12px}
.brow{display:grid;grid-template-columns:minmax(96px,150px) minmax(0,1fr) minmax(86px,130px);gap:12px;align-items:center}
.bn{font-family:var(--f-head);font-size:clamp(18px,1.6vw,22px)}
.bt{position:relative;height:22px;border-radius:999px;background:var(--alt)}
.bf{height:100%;border-radius:999px;background:var(--accent)}
.brow.me .bf{background:var(--ink)}
.brow.me .bn{font-weight:600}
.bref{position:absolute;top:-5px;bottom:-5px;width:2px;background:var(--accent-ink)}
.bv{font-weight:600;font-size:clamp(16px,1.4vw,19px);line-height:1.2;text-align:right}
.bv small{display:block;font-weight:400;color:var(--soft);font-size:13.5px}
.legend2{display:flex;align-items:center;gap:10px;margin:16px 0 0;font-size:15.5px;color:var(--soft)}
.legend2 .bref{position:static;display:inline-block;width:2px;height:18px}
.sports{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
.sport{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:22px 20px;min-width:0}
.sport h3{font-size:clamp(22px,1.8vw,26px);margin:10px 0 10px}
.sport p{margin:0 0 10px;font-size:16.5px;line-height:1.5;color:var(--soft)}
.sport p b{display:block;color:var(--ink);font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:2px}
.sport .loc{border-top:1px solid var(--line);padding-top:10px;margin-top:12px;color:var(--ink)}
.sico{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--alt);color:var(--accent-ink)}
.ptable.towns .here{background:rgba(180,138,78,.12);border-radius:12px;padding-inline:14px}
.ptable.towns .here b{font-size:clamp(18px,1.6vw,22px)}
@media(max-width:1100px){.sports{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){
  .sports{grid-template-columns:1fr}
  .brow{grid-template-columns:minmax(0,1fr) minmax(86px,auto);grid-template-areas:"n v" "b b";gap:6px 12px}
  .brow .bn{grid-area:n}.brow .bv{grid-area:v}.brow .bt{grid-area:b}
  .week .d{padding:12px 2px 10px}
}

/* ticked points, easy to scan */
.ticks{list-style:none;margin:20px 0;padding:0;display:grid;gap:14px;max-width:62ch}
.ticks li{position:relative;padding-left:40px;line-height:1.5;font-size:19px}
.ticks li::before{content:"";position:absolute;left:0;top:2px;width:26px;height:26px;border-radius:50%;background:var(--accent-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat}
.ticks li b{font-weight:600}
.page-intro .lead{margin-top:0}
.page-intro p{margin:0 0 14px}
.page-intro .ticks+p{margin-top:6px}