/* ===== Club colours: edit here ===== */
  :root {
    --blue: #0063A7;      /* Souris blue (town crest) */
    --orange: #C45118;    /* red-sandstone orange (town crest), one notch darker than #C75319 so white text passes 4.5:1 */
    --slate: #3F484F;     /* dark slate (Mouse Tales) */
    --peach: #E9905F;     /* light orange accent */
    --ice: #EEF4F8;       /* pebbled-ice background */
    --white: #FFFFFF;
    --orange-dark: #a9440f; /* hover on orange buttons */
    /* Spacing steps: use these for padding, margin and gap */
    /* Corner radii: change these three to round or sharpen everything at once */
    --radius: 8px;       /* boxes: the next-draw and Learn to curl boxes, the pop-up */
    --radius-sm: 6px;    /* draw-time chips and the phone menu */
    --radius-btn: 6px;   /* buttons and small tags */
    --band-pad: clamp(2rem, 5vw, 3rem); /* top and bottom of the page header and the home hero */
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --display: "Oswald", "Arial Narrow", Impact, sans-serif;
    --body: "Source Sans 3", "Segoe UI", Arial, sans-serif;
  }
  * { box-sizing: border-box; }
  [hidden] { display: none !important; }
  html { scroll-behavior: smooth; }
  body { margin: 0; font-family: var(--body); font-size: 1.0625rem; line-height: 1.6; color: var(--slate); background: var(--white); }
  a { color: var(--blue); }
  a:focus-visible, .btn:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
  img { max-width: 100%; }
  /* Skip link: hidden until a keyboard user tabs to it */
  .skip { position: absolute; left: var(--space-4); top: -4rem; z-index: 50; padding: var(--space-3) var(--space-4); background: var(--blue); color: var(--white); font-weight: 700; border-radius: 0 0 var(--radius) var(--radius); text-decoration: none; }
  .skip:focus { top: 0; }
  /* Registration night bar: a slim bar above the header on every page, added by menu.js until REG_NIGHT_ENDS */
  .reg-notice { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2) var(--space-4); max-width: none; margin: 0; padding: var(--space-3) var(--space-5); background: var(--slate); color: var(--white); text-align: center; font-size: 1rem; line-height: 1.4; }
  .reg-notice strong { font-weight: 700; }
  .reg-notice .btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-5); background: var(--white); border-color: var(--white); color: var(--slate); font-size: 1rem; }
  .reg-notice .btn:hover { background: var(--ice); border-color: var(--ice); }
  .reg-notice a:focus-visible { outline-color: var(--white); }
  /* Registration night pop-up: opened by the script in index.html until REG_NIGHT_ENDS */
  .popup { width: min(420px, calc(100% - 32px)); box-sizing: border-box; border: 0; border-top: 6px solid var(--orange); border-radius: var(--radius); padding: 0; text-align: center; color: var(--slate); }
  .popup form { padding: var(--space-6) var(--space-5) var(--space-5); } /* padding lives here so a click on the dialog itself means the backdrop */
  .popup::backdrop { background: rgba(28, 34, 38, .55); }
  .popup h2 { font-size: 1.9rem; color: var(--blue); }
  .popup p { margin: 0 0 var(--space-4); }
  .popup .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-5); }
  .popup .btn { cursor: pointer; font: inherit; font-weight: 700; }
  .popup-x { position: absolute; top: var(--space-2); right: var(--space-3); width: 44px; height: 44px; border: 0; background: none; font-size: 1.8rem; line-height: 1; color: var(--slate); cursor: pointer; }
  .popup[open] { animation: pop-in .25s ease-out; }
  @keyframes pop-in { from { opacity: 0; transform: translateY(12px); } }
  @media (prefers-reduced-motion: reduce) { .popup[open] { animation: none; } }
  .club-status { max-width: none; margin: 0; padding: var(--space-3) var(--space-5); background: var(--orange); color: var(--white); text-align: center; font-weight: 700; line-height: 1.4; }
  .wrap { width: min(1100px, 100% - 2.5rem); margin-inline: auto; }
  h1, h2, h3 { font-family: var(--display); color: var(--slate); line-height: 1.05; margin: 0 0 .5em; text-transform: uppercase; letter-spacing: .01em; }
  h2 { font-size: clamp(1.9rem, 4vw, 2.75rem); font-weight: 700; }
  h3 { font-size: 1.35rem; font-weight: 500; }
  p { max-width: 62ch; margin: 0 0 1em; }

  /* Header */
  header { padding: var(--space-4) 0; }
  /* With menu.js: header stays at the top, slides away while scrolling down, comes back on scrolling up */
  .has-menu header { position: sticky; top: 0; z-index: 30; background: var(--white); transition: transform .25s ease, box-shadow .25s ease; }
  .has-menu header.head-hidden { transform: translateY(-100%); }
  .has-menu header.head-stuck { box-shadow: 0 2px 14px rgba(28, 34, 38, .1); }
  @media (prefers-reduced-motion: reduce) { .has-menu header { transition: none; } }
  /* Moving between pages fades instead of flashing blank (browsers without support just load normally); the header stays put */
  @view-transition { navigation: auto; }
  header { view-transition-name: site-header; }
  ::view-transition-group(root) { animation-duration: .2s; }
  @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none; } }
  /* Jump-link targets clear the header if it is showing */
  main section[id] { scroll-margin-top: var(--space-6); }
  header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
  .brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; }
  .brand img { display: block; width: 48px; height: 48px; } /* no text line around the mark, so the header wraps it exactly */
  /* Logo text is live type (Oswald) beside the mouse mark: one line, Souris in blue, Curling Club in orange */
  .brand-name { font-family: var(--display); font-weight: 700; font-size: 1.4rem; line-height: 1; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
  .brand-1 { color: var(--blue); }
  .brand-2 { color: var(--orange); }
  header nav { display: flex; align-items: center; gap: var(--space-5); white-space: nowrap; }
  header nav a { font-family: var(--display); font-weight: 500; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .04em; text-decoration: none; color: var(--slate); padding: var(--space-1) 0; background: linear-gradient(var(--orange), var(--orange)) left bottom / 0 3px no-repeat; transition: background-size .2s ease, color .2s ease; }
  header nav a:hover, header nav a:focus-visible, header nav a[aria-current="page"] { color: var(--blue); background-size: 100% 3px; }
  header nav a.nav-home { display: none; } /* Home is only in the folded phone menu: the logo is the home link on wide screens */
  header nav a.nav-reg { background: var(--orange); color: var(--white); padding: var(--space-2) var(--space-4); border-radius: var(--radius-btn); }
  header nav a.nav-reg:hover, header nav a.nav-reg:focus-visible, header nav a.nav-reg[aria-current="page"] { background: var(--blue); color: var(--white); }
  @media (prefers-reduced-motion: reduce) { header nav a { transition: none; } }

  /* Menu button (shown by menu.js below 900px; see "Screen sizes" at the end) */
  .nav-toggle { display: none; align-items: center; gap: var(--space-2); min-height: 44px; padding: var(--space-2) var(--space-3); border: 2px solid rgba(63, 72, 79, .25); border-radius: var(--radius-btn); background: none; color: var(--slate); font-family: var(--display); font-weight: 500; font-size: 1rem; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; }
  .nav-toggle:hover, .nav-toggle:focus-visible, .nav-toggle[aria-expanded="true"] { border-color: var(--blue); color: var(--blue); }
  .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s ease, background-color .2s ease; }
  .nav-toggle-bars { position: relative; }
  .nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
  .nav-toggle-bars::before { transform: translateY(-6px); }
  .nav-toggle-bars::after { transform: translateY(6px); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars { background-color: transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: rotate(-45deg); }
  /* Register button in the header row when the Menu button is showing (the menu has the links; Register stays one tap away) */
  .head-reg { display: none; align-items: center; min-height: 44px; padding: 0 var(--space-4); border-radius: var(--radius-btn); background: var(--orange); color: var(--white); font-family: var(--display); font-weight: 500; font-size: 1rem; text-transform: uppercase; letter-spacing: .04em; text-decoration: none; transition: background-color .2s ease; }
  .head-reg:hover, .head-reg:focus-visible, .head-reg[aria-current="page"] { background: var(--blue); color: var(--white); }
  @keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } }
  @media (prefers-reduced-motion: reduce) { .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { transition: none; } header nav.open { animation: none; } .head-reg { transition: none; } }

  /* Hero: the house */
  .hero { background: var(--ice); overflow: hidden; position: relative; padding-block: 0; } /* spacing comes from .hero .wrap; the general section padding would double it */
  .hero .wrap { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: var(--space-6); padding-block: var(--band-pad); }
  .hero h1 { font-size: clamp(2.8rem, 7.5vw, 5.5rem); font-weight: 700; letter-spacing: 0; }
  .hero h1 span { display: block; color: var(--blue); }
  .hero p { font-size: 1.2rem; }
  .house { width: 100%; max-width: 380px; justify-self: end; aspect-ratio: 1; }
  .house .stone { transform-box: view-box; transform-origin: 196px 209px; animation: slide 3.4s linear .4s both; }
  @keyframes slide {
    0.00% { transform: translate(-40.00px, 260.00px) rotate(-140.00deg); }
    4.17% { transform: translate(-39.73px, 229.79px) rotate(-128.58deg); }
    8.33% { transform: translate(-38.98px, 202.37px) rotate(-117.64deg); }
    12.50% { transform: translate(-37.80px, 177.53px) rotate(-107.19deg); }
    16.67% { transform: translate(-36.27px, 155.09px) rotate(-97.22deg); }
    20.83% { transform: translate(-34.43px, 134.88px) rotate(-87.74deg); }
    25.00% { transform: translate(-32.34px, 116.72px) rotate(-78.75deg); }
    29.17% { transform: translate(-30.07px, 100.45px) rotate(-70.24deg); }
    33.33% { transform: translate(-27.65px, 85.93px) rotate(-62.22deg); }
    37.50% { transform: translate(-25.15px, 73.00px) rotate(-54.69deg); }
    41.67% { transform: translate(-22.59px, 61.53px) rotate(-47.64deg); }
    45.83% { transform: translate(-20.03px, 51.41px) rotate(-41.08deg); }
    50.00% { transform: translate(-17.50px, 42.50px) rotate(-35.00deg); }
    54.17% { transform: translate(-15.04px, 34.71px) rotate(-29.41deg); }
    58.33% { transform: translate(-12.68px, 27.92px) rotate(-24.31deg); }
    62.50% { transform: translate(-10.46px, 22.06px) rotate(-19.69deg); }
    66.67% { transform: translate(-8.40px, 17.04px) rotate(-15.56deg); }
    70.83% { transform: translate(-6.52px, 12.78px) rotate(-11.91deg); }
    75.00% { transform: translate(-4.84px, 9.22px) rotate(-8.75deg); }
    79.17% { transform: translate(-3.40px, 6.30px) rotate(-6.08deg); }
    83.33% { transform: translate(-2.19px, 3.98px) rotate(-3.89deg); }
    87.50% { transform: translate(-1.24px, 2.22px) rotate(-2.19deg); }
    91.67% { transform: translate(-0.55px, 0.98px) rotate(-0.97deg); }
    95.83% { transform: translate(-0.14px, 0.24px) rotate(-0.24deg); }
    100.00% { transform: translate(0.00px, 0.00px) rotate(-0.00deg); }
  }
  @media (prefers-reduced-motion: reduce) { .house .stone { animation: none; } html { scroll-behavior: auto; } }

  .actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
  .btn { display: inline-block; padding: var(--space-3) var(--space-5); border-radius: var(--radius-btn); font-weight: 700; text-decoration: none; border: 2px solid var(--blue); }
  .btn-primary { background: var(--orange); border-color: var(--orange); color: var(--white); }
  .btn-primary:hover { background: var(--orange-dark); border-color: var(--orange-dark); }
  .btn-ghost { color: var(--blue); background: transparent; }
  .btn-ghost:hover { background: var(--blue); color: var(--white); }

  section { padding-block: clamp(3rem, 7vw, 5rem); }

  /* Tuesday nights */
  /* Tuesday nights price: $260, PER SEASON and Register stacked and centred on each other */
  .price-wrap { --price-size: clamp(4rem, 12vw, 8rem); display: flex; flex-direction: column; align-items: center; justify-self: start; font-family: var(--display); font-weight: 700; font-size: var(--price-size); line-height: 1; color: var(--blue); }
  .price-wrap .btn { margin-top: var(--space-4); font-family: var(--body); font-size: 1.0625rem; line-height: 1.6; letter-spacing: 0; }
  /* Tuesday nights and New to curling: the price and its button sit beside the title; the content runs the full width as strips */
  .head-price .wrap { display: flex; align-items: center; gap: var(--space-7); }
  .head-price .price-wrap { --price-size: clamp(3.2rem, 6vw, 4.5rem); display: grid; grid-template-columns: auto auto; grid-template-areas: "amt btn"; align-items: center; justify-content: start; column-gap: var(--space-4); row-gap: var(--space-2); flex: none; padding-left: var(--space-7); border-left: 2px solid rgba(63, 72, 79, .2); }
  .head-price .price-amt { grid-area: amt; }
  .head-price .price-wrap .btn { grid-area: btn; align-self: center; margin: 0; }
  .head-price .price-actions { grid-area: btn; display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
  .head-price .price-actions .btn { margin: 0; }
  .head-price.two-actions .price-wrap { grid-template-areas: "amt btn"; }
  .flat-section h2 { margin: 0 0 var(--space-3); }
  .flat-section > .wrap > p { margin: 0 0 var(--space-5); }
  .flat-section .rules-body { padding-bottom: 0; }
  .flat-section { padding-block: var(--space-6) var(--space-7); }
  .flat-section + .flat-section { padding-top: 0; }
  .span-last .rules-body p:last-child, .span-first .rules-body p:first-child { grid-column: 1 / -1; }

  /* On at the club: next draw, Learn to curl and the bonspiels as cards under the hero */
  .onat { padding-block: var(--space-6) var(--space-7); }
  .onat h2 { margin-bottom: var(--space-5); }
  .onat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
  .oc { display: flex; flex-direction: column; padding: var(--space-5); background: var(--ice); border: 1px solid #d6e1e8; border-radius: var(--radius); }
  .oc h3 { margin: 0 0 var(--space-2); font-size: clamp(1.5rem, 3.5vw, 2rem); font-weight: 700; line-height: 1.05; }
  .oc p { margin: 0 0 var(--space-3); }
  .oc-kick { font-family: var(--display); font-size: .85rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); }
  .oc-body { display: flex; flex: 1; flex-direction: column; }
  .oc .btn { align-self: flex-start; margin-top: auto; }
  .oc-when { align-self: flex-start; margin-top: auto; padding: var(--space-1) var(--space-3); background: var(--white); border: 1px solid #d6e1e8; border-radius: var(--radius-btn); font-family: var(--display); font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; }
  /* The next-draw card spans the row: words on the left, draw times and button on the right */
  .oc.week { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; column-gap: var(--space-6); background: var(--blue); border-color: var(--blue); color: var(--white); }
  /* Registration night band: between the hero and "On at the club", removed by the script after REG_NIGHT_ENDS */
  .regband { padding-block: var(--space-6) 0; }
  .regband + .onat { padding-top: var(--space-7); }
  .oc.reg2 { background: var(--white); border: 2px solid var(--orange); padding: var(--space-5); }
  .oc.reg2 h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); margin-bottom: var(--space-4); }
  .reg2-routes { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: var(--space-4); }
  .reg2-route { display: flex; flex-direction: column; align-items: flex-start; padding: var(--space-4) var(--space-5); background: var(--ice); border-radius: var(--radius-sm); }
  .reg2-route p { margin: 0 0 var(--space-3); }
  .reg2-route .btn { margin-top: auto; }
  .reg2-label { font-family: var(--display); font-weight: 700; font-size: 1.35rem; text-transform: uppercase; letter-spacing: .02em; color: var(--slate); }
  .reg2-or { align-self: center; margin: 0; font-family: var(--display); text-transform: uppercase; letter-spacing: .1em; color: var(--slate); opacity: .7; }
  .oc.week h3, .oc.week .oc-kick, .oc.week a { color: var(--white); }
  .oc.week .oc-kick { opacity: .9; }
  .oc.week .dropin { margin-bottom: 0; font-size: .95rem; }
  .oc.week .dropin a { font-weight: 700; }
  .draws { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); }
  .draws span { padding: var(--space-2) var(--space-4); background: rgba(255, 255, 255, .16); border-radius: var(--radius-sm); font-family: var(--display); font-size: 1.35rem; font-weight: 700; letter-spacing: .02em; }
  .oc.week .btn { background: var(--white); border-color: var(--white); color: var(--slate); }
  /* Times and button form one block at the right of the card; the button is as wide as the row of times */
  .oc.week > div:last-child { display: grid; justify-self: end; gap: var(--space-3); }
  .oc.week .draws { margin-bottom: 0; }
  .oc.week .btn { justify-self: stretch; margin-top: 0; text-align: center; }
  .oc.week .btn:hover { background: var(--ice); border-color: var(--ice); }
  .oc.week a:focus-visible { outline-color: var(--white); }

  /* Footer */
  footer { background: var(--blue); color: var(--white); padding-block: var(--space-7) var(--space-6); }
  footer h2 { color: var(--white); }
  footer a { color: var(--white); }
  footer .foot a { display: inline-block; padding-block: var(--space-2); } /* taller tap area for the links */
  .foot { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-6); }
  .fine { margin-top: var(--space-6); font-size: .9rem; opacity: .85; }

  /* Sub pages */
  .page-head { background: var(--ice); padding-block: var(--band-pad); }
  /* One rhythm for every page: a band at the top (--band-pad), a 32px gap under it, 48px between sections and 48px above the footer */
  .page-head + section { padding-top: var(--space-6); }
  main > section:last-child { padding-bottom: var(--space-7); }
  main > section:last-child > .wrap > :last-child { margin-bottom: 0; } /* so the gap above the footer is the padding alone */
  .page-head h1 { font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 700; margin: 0 0 .3em; }
  .page-head p { font-size: 1.15rem; margin: 0; }
  .roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-6) var(--space-7); }
  .roles div { border-top: 4px solid var(--blue); padding-top: var(--space-4); }
  .roles h2 { font-size: 1.35rem; font-weight: 500; margin: 0 0 .3em; }
  .roles p { margin: 0 0 .4em; }
  .note { margin-top: var(--space-6); font-size: .95rem; }
  .rules-section { padding-bottom: var(--space-7); }
  .people { padding-bottom: var(--space-6); }
  .help-section { background: var(--ice); border-top: 4px solid var(--orange); padding-block: var(--space-7); }
  .help-card { max-width: 62ch; }
  .help-card h2 { margin: 0 0 var(--space-3); font-size: clamp(1.5rem, 3vw, 2rem); }
  .help-card p { margin: 0 0 var(--space-4); }
  .help-card ul { margin: 0; padding-left: var(--space-5); }
  .help-card li { margin-bottom: var(--space-2); }
  .help-card li::marker { color: var(--orange); }
  .help-card .actions { margin-top: var(--space-5); }
  /* 404 page: suggested links, each a comfortable tap target */
  .lost-links { list-style: none; margin: 0; padding: 0; }
  .lost-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: 1.1rem; }

  /* How we play: four panels that open one at a time; each rule is its own soft ice strip */
  .acc { padding-block: var(--space-6) 0; }
  .acc details { border-top: 1px solid rgba(63, 72, 79, .25); }
  .acc details:last-of-type { border-bottom: 1px solid rgba(63, 72, 79, .25); }
  .acc summary { display: flex; align-items: center; gap: var(--space-4); padding-block: var(--space-5); cursor: pointer; list-style: none; }
  .acc summary::-webkit-details-marker { display: none; }
  .acc summary h2 { margin: 0; font-size: clamp(1.6rem, 3.5vw, 2.3rem); transition: color .2s ease; }
  .acc summary::after { content: ""; flex: none; width: 12px; height: 12px; margin-left: auto; border-right: 3px solid var(--blue); border-bottom: 3px solid var(--blue); transform: rotate(45deg) translate(-3px, -3px); transition: transform .2s ease; }
  .acc details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
  .acc summary:hover h2 { color: var(--blue); }
  .acc summary:focus-visible { outline: 3px solid var(--orange); outline-offset: -3px; }
  .acc details { scroll-margin-top: 5.5rem; } /* room for the header (if showing) above a panel opened from a #link */
  .rules-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-3); padding-bottom: var(--space-6); }
  .rules-body p { max-width: none; margin: 0; padding: var(--space-3) var(--space-4); background: var(--ice); border-radius: var(--radius-sm); }
  .rules-body .lead { grid-column: 1 / -1; max-width: 62ch; padding: 0 0 var(--space-3); background: none; font-size: 1.15rem; }
  .rules-body .alert { grid-column: 1 / -1; background: var(--white); border: 2px solid var(--orange); border-left-width: 4px; font-weight: 600; }
  .rules-body strong { display: block; margin-bottom: var(--space-1); color: var(--blue); }
  @media (prefers-reduced-motion: reduce) { .acc summary::after, .acc summary h2 { transition: none; } }
  .rules-end { padding-block: var(--space-5) var(--space-7); }
  .rules-end .note { margin: 0 0 var(--space-3); }
  .to-top-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: none; }
  .to-top-link:hover { text-decoration: underline; }
  /* Register page */
  .reg-head { padding-bottom: 0; }
  .tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }
  .tabs a { display: inline-block; font-weight: 700; padding: var(--space-3) var(--space-5); border-radius: var(--radius) var(--radius) 0 0; text-decoration: none; color: var(--blue); background: rgba(255,255,255,.55); }
  .tabs a:hover { background: var(--white); color: var(--blue); }
  .tabs a[aria-current="page"] { background: var(--white); color: var(--slate); text-decoration: none; box-shadow: inset 0 4px 0 var(--orange); }
  .widget { padding-block: var(--space-6) var(--space-7); min-height: 50vh; }
  .fallback { border-top: 4px solid var(--orange); padding-top: var(--space-4); max-width: 62ch; }
  /* Keep the site's bare element styles (h2, p, a, nav a...) out of the Curling I/O widget.
     :where() keeps this at element-level specificity so the widget's own class styles still win. */
  :where(.cio-host) :is(h1, h2, h3, p, a, nav, nav a, section, header, footer) { all: revert; }
  /* The widget pads its own container 10px (.cio__container) on top of the page gutter from .wrap, which squeezes it on phones.
     The gutter is enough, so drop the widget's side padding and keep its top and bottom. */
  .cio-host .cio__container { padding-inline: 0; }
  .fallback h2 { font-size: 1.35rem; font-weight: 500; }

  /* ===== Screen sizes =====
     All the narrower-screen overrides live here, widest first, after the rules they adjust. */

  /* 901 to 999px: the full menu row and the full-size logo text don't fit on one row, so the logo text and the menu are a little smaller */
  @media (min-width: 901px) and (max-width: 999px) {
    .brand { gap: var(--space-2); }
    .brand img { width: 44px; height: 44px; }
    .brand-name { font-size: 1.05rem; }
    header nav { gap: var(--space-4); }
    header nav a { font-size: 1rem; letter-spacing: .02em; }
  }

  /* Up to 900px: Menu button + Register in the header row; How we play contents as one line of links */
  @media (max-width: 900px) {
    header nav a.nav-home { display: inline-block; }
    /* Two buttons in the page header (New to curling): stack the title and the price block earlier */
    .head-price.two-actions .wrap { flex-direction: column; align-items: flex-start; gap: var(--space-5); }
    .head-price.two-actions .price-wrap { padding-left: 0; border-left: 0; }
    /* With menu.js running, the nav folds away behind the Menu button and opens as a list.
       900px, not 760: the full five-item row needs about 860px beside the logo, so below this it would drop to a second row */
    .has-menu header .wrap { position: relative; column-gap: var(--space-3); }
    .has-menu .nav-toggle { display: inline-flex; padding: var(--space-2) var(--space-3); }
    .has-menu .head-reg { display: inline-flex; margin-left: auto; padding: 0 var(--space-3); font-size: .95rem; }
    .has-menu header nav a.nav-reg, .has-menu header nav.open a.nav-reg { display: none; } /* Register lives in the header row instead */
    .has-menu header nav { display: none; }
    /* Open: a card dropped from the Menu button, lined up with its right edge, floating over the page */
    .has-menu header nav.open { display: flex; position: absolute; top: calc(100% + .6rem); right: 0; z-index: 20; width: auto; min-width: 15rem; flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-2) 0; background: var(--white); border-top: 4px solid var(--orange); border-radius: var(--radius-sm); box-shadow: 0 14px 34px rgba(28, 34, 38, .2); animation: menu-in .15s ease-out; }
    /* Each link is a full-width row at least 48px tall (Google's recommended tap size) */
    .has-menu header nav.open a { display: flex; align-items: center; min-height: 48px; margin: 0; padding: 0 var(--space-5); background: none; font-size: 1.05rem; letter-spacing: .04em; }
    .has-menu header nav.open a + a { border-top: 1px solid rgba(63, 72, 79, .1); }
    .has-menu header nav.open a:hover, .has-menu header nav.open a:focus-visible { background: var(--ice); color: var(--blue); outline-offset: -3px; }
    .has-menu header nav.open a[aria-current="page"] { color: var(--blue); box-shadow: inset 4px 0 0 var(--orange); }
    /* "Add to home screen" (pwa.js): only in the dropdown, last item, an outlined button set apart from the page links above it */
    .has-menu header nav.open .nav-install { display: flex; align-items: center; width: auto; min-height: 44px; margin: var(--space-3) var(--space-5) var(--space-2); padding: 0 var(--space-4); justify-content: center; border: 2px solid var(--blue); border-radius: var(--radius-btn); background: none; font-family: var(--display); font-weight: 500; font-size: .95rem; text-transform: uppercase; letter-spacing: .04em; text-align: center; color: var(--blue); cursor: pointer; }
    .has-menu header nav.open .nav-install[hidden] { display: none; }
    .has-menu header nav.open .nav-install:hover, .has-menu header nav.open .nav-install:focus-visible { background: var(--blue); color: var(--white); }
    .has-menu header nav.open .nav-install-hint { max-width: none; margin: 0; padding: var(--space-2) var(--space-5) var(--space-3); font-size: .95rem; line-height: 1.4; white-space: normal; }
    .has-menu header nav.open .nav-install-hint[hidden] { display: none; }

  }

  /* Up to 760px: one-column layouts */
  @media (max-width: 760px) {
    .hero .wrap { grid-template-columns: 1fr; }
    /* Stacked hero is centred: house, headline, intro and buttons on one centre line */
    .house { max-width: 210px; order: -1; justify-self: center; }
    .hero .wrap > div { text-align: center; }
    .hero p { margin-inline: auto; }
    .hero .actions { justify-content: center; }
    .hero .wrap { gap: var(--space-4); }
            .rules-body { grid-template-columns: 1fr; }
          .onat-grid, .oc.week { grid-template-columns: 1fr; }
    .reg2-routes { grid-template-columns: 1fr; }
    .reg2-or { justify-self: center; }
    /* Phones: the registration bar is one slim row (text left, button right), the band is tighter, and Learn to curl is the first card under "On at the club" */
    .reg-notice { flex-wrap: nowrap; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-4); text-align: left; font-size: .9rem; line-height: 1.3; }
    .reg-notice .btn { flex: none; padding: 0 var(--space-3); font-size: .9rem; }
    .regband { padding-block: var(--space-5) 0; }
    .oc.reg2 { padding: var(--space-4); }
    .oc.reg2 > .oc-kick { display: none; }
    .oc.reg2 h2 { margin-bottom: var(--space-3); font-size: 1.4rem; }
    .reg2-routes { gap: var(--space-2); }
    .reg2-or { display: none; }
    .reg2-route { padding: var(--space-3) var(--space-4); }
    .reg2-route p { margin-bottom: var(--space-2); font-size: 1rem; line-height: 1.45; }
    .reg2-label { font-size: 1.15rem; }
    .onat-grid > .oc:nth-child(2) { order: -1; }
    .oc.week > div + div { margin-top: var(--space-4); }
    .oc.week > div:last-child { justify-self: start; }
        /* Without menu.js: the links wrap onto a second row rather than scroll Register out of sight */
    header nav { width: 100%; flex-wrap: wrap; gap: var(--space-2) var(--space-4); white-space: nowrap; padding: var(--space-1) 0; }
    header nav a { font-size: .95rem; letter-spacing: .02em; }
    header nav a.nav-reg { padding: var(--space-2) var(--space-3); }
    .tabs a { flex: 1 1 auto; text-align: center; padding-inline: var(--space-3); }
    /* Curling I/O list: the widget has no option for fewer columns, so show the name (with its summary), price and Add to cart.
       The dates and an always-empty location column are hidden; the dates sit on the event page one tap away.
       Each cell is placed on the widget's grid by number, so the grid is redrawn with three columns and the price and button moved into 2 and 3. */
    .cio-host .cio__items_table { grid-template-columns: minmax(0, 1fr) auto auto !important; }
    .cio-host .cio__items_table > div:has(> .cio__item_location, > .cio__item_cell > .cio__item_occurs_on) { display: none !important; }
    .cio-host .cio__items_table > div:has(> .cio__item_cell > .cio__item_price) { grid-column: 2 !important; }
    .cio-host .cio__items_table > div:has(> .cio__item_register) { grid-column: 3 !important; }
    .cio-host .cio__item_name { padding-right: var(--space-2) !important; }
    .cio-host .cio__item_cell:has(.cio__item_price) { padding-inline: var(--space-2) !important; }
    .cio-host .cio__item_register { padding-left: var(--space-2) !important; padding-right: 0 !important; }
    /* The price and button cells have a fixed height, so their divider lines sat above the name's when a summary wrapped; match the row */
    .cio-host .cio__item_register, .cio-host .cio__item_cell:has(.cio__item_price), .cio-host .cio__item_price { height: 100% !important; box-sizing: border-box; }
    .cio-host .cio__item_name, .cio-host .cio__item_name * { white-space: normal !important; min-width: 0; overflow-wrap: anywhere; line-height: 1.3; }
  }

  /* Up to 640px: the page title and price stack */
  @media (max-width: 640px) {
    .head-price .wrap { flex-direction: column; align-items: flex-start; gap: var(--space-5); }
    .head-price .price-wrap { padding-left: 0; border-left: 0; }
    .head-price .price-wrap { grid-template-areas: "amt" "btn"; justify-items: start; row-gap: var(--space-3); }
  }

  /* Up to 559px: phones. The one-line name is too wide beside Register and the menu button, so it stacks: Souris over a smaller Curling Club */
  @media (max-width: 559px) {
    .has-menu .brand { gap: var(--space-2); }
    .has-menu .brand-name { display: flex; flex-direction: column; align-items: center; gap: 3px; }
    .has-menu .brand-1 { font-size: 1.35rem; }
    .has-menu .brand-2 { font-size: .85rem; letter-spacing: .07em; }
  }

  /* Up to 479px: phones */
  @media (max-width: 479px) {
    .house { max-width: 130px; } /* phones: small enough that the headline and both buttons fit on the first screen */
    /* Not enough room for a labelled button next to Register: icon only (label kept for screen readers) */
    .has-menu .nav-toggle { width: 44px; padding: 0; justify-content: center; }
    .nav-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  }

  /* Up to 359px: the smallest phones */
  @media (max-width: 359px) {
    .has-menu .brand img { width: 36px; height: 36px; }
    .has-menu .brand-1 { font-size: 1.2rem; }
    .has-menu .brand-2 { font-size: .75rem; letter-spacing: .02em; }
    header nav { gap: var(--space-2) var(--space-3); }
    header nav a { font-size: .9rem; letter-spacing: 0; }
    header nav a.nav-reg { padding: var(--space-1) var(--space-3); }
  }

/* LAUNCH ONLY: "Add to home screen" is hidden until the full site goes live. Revert the commit that added this block to bring it back. */
.nav-install, .nav-install-hint { display: none !important; }