/* ============================================================================
   Shared layer for the rebuilt pages (home, our story, history). Loaded after
   style.css, scrollcraft.css and theme.css. Maroon is the ground, gold is the
   one accent (two lightnesses: bright on maroon, ochre on paper).
   ========================================================================== */
:root {
  --sc-canvas:     #420b18;
  --sc-surface:    #5a0f1d;
  --sc-ink:        #f7efe4;
  --sc-ink-soft:   #e3d0c3;
  --sc-accent:     #f3b53c;
  --sc-accent-ink: #26090f;
  --sc-font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --sc-font-text:    "Archivo", system-ui, sans-serif;
  --sc-shadow-color: 345 60% 4%;
  --r: 4px;
}
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body.cx { background: var(--sc-canvas); color: var(--sc-ink); font-family: var(--sc-font-text); line-height: 1.6; }
.cx p { max-width: none; }
.cx h1, .cx h2, .cx h3 { color: inherit; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 1rem; top: -4rem; z-index: 2000; background: var(--sc-accent); color: var(--sc-accent-ink); padding: .6rem 1rem; border-radius: var(--r); font-weight: 700; }
.skip:focus { top: 1rem; }

.sc-display { font-family: var(--sc-font-display); font-weight: 900; text-transform: uppercase; letter-spacing: .004em; line-height: .88; }
.cx-wrap { width: 100%; max-width: 82rem; margin-inline: auto; padding-inline: var(--sc-gutter); }
.cx-label { display: block; margin: 0 0 .9rem; font-family: var(--sc-font-text); font-weight: 700; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sc-accent); }

/* Grounds. Each section paints its own; there is no drift. */
.g-900 { background: #2e0813; } .g-800 { background: #420b18; } .g-700 { background: #5a0f1d; }
.on-paper { --sc-ink: #23100e; --sc-ink-soft: #5b3b34; --sc-accent: #86560a; --sc-accent-ink: #fbf4e8;
            --sc-hairline: color-mix(in oklab, #23100e 16%, transparent);
            background: #f4ecdf; color: var(--sc-ink); }
.gold-rule { border-top: 4px solid var(--sc-accent); }

/* Links and buttons (the buttons themselves come from theme.css .btn--primary) */
.link { color: var(--sc-ink); font-weight: 650; font-size: .95rem; text-decoration: underline;
        text-decoration-color: color-mix(in oklab, var(--sc-accent) 85%, transparent); text-underline-offset: .3em; text-decoration-thickness: 2px; }
.link:hover { text-decoration-color: var(--sc-accent); }
.link:focus-visible, .row-link:focus-visible, .tile:focus-visible { outline: 3px solid var(--sc-accent); outline-offset: 4px; border-radius: 2px; }
.on-paper .btn--primary { background: var(--sc-accent); color: #fbf4e8; }
.on-paper .btn--primary:hover { background: #6f4707; color: #fbf4e8; }
.arrow { display: inline-block; transition: transform 160ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { a:hover > .arrow, a:hover .arrow { transform: translateX(4px); } }

/* Layered photo scenes (home hero and close) */
.plane { position: absolute; left: 0; top: 0; width: 2560px; height: 1702px; transform-origin: 0 0; pointer-events: none; visibility: hidden; will-change: transform; }
.plane img { position: absolute; max-width: none; }
.is-live .plane { visibility: visible; }
.plane--plate img { left: 0; top: 0; width: 2560px; height: 1702px; }
.plane--pitcher img { left: 269px; top: 253px; width: 806px; height: 1228px; }
.ball { position: absolute; left: 0; top: 0; width: 72px; height: 72px; max-width: none; transform-origin: 0 0; visibility: hidden; will-change: transform; pointer-events: none; }
.is-live .ball { visibility: visible; }

/* The site footer sits flush after the last section */
.cx .footer { margin: 0; }

/* Without JavaScript: no pinning, no motion, everything showing. */
html.no-js [data-sc-stage] { position: relative; min-height: 100vh; overflow: hidden; }
html.no-js [data-sc-cue], html.no-js [data-sc-in], html.no-js [data-sc-stagger] > * { opacity: 1 !important; transform: none !important; }
html.no-js [data-sc-act="pan"] [data-sc-stage] { overflow-x: auto; }

/* Reduced motion: a sideways rail that no longer moves would hold a still
   stage for several screens. Re-lay every rail as an ordinary wrapped grid
   and give the act back its natural height instead. */
@media (prefers-reduced-motion: reduce) {
  [data-sc-act="pan"] { height: auto !important; }
  [data-sc-act="pan"] [data-sc-stage] { position: relative; height: auto; min-height: 0; overflow: visible; padding-block: clamp(4rem, 8vw, 6rem); }
  [data-sc-act="pan"] [data-sc-pan] { width: auto !important; flex-wrap: wrap; align-items: flex-start; row-gap: 2.5rem; transform: none !important; }
}

/* The live site's page heroes, on the rebuilt pages */
.cx .page-hero { padding: clamp(8.5rem, 16vh, 10.5rem) 0 clamp(3.5rem, 7vw, 5rem); }
.cx .page-hero .overline { color: var(--sc-accent); }
.cx .page-hero p { margin-top: 1rem; max-width: 46rem; font-size: 1.15rem; line-height: 1.55; color: rgba(247,239,228,.86); }
.hero-links { display: flex; flex-wrap: wrap; gap: .6rem 1.8rem; margin-top: 1.8rem; }

/* Photo hero: an inner page's first screen. The headline on the dark ground,
   a club photograph in its own colours on the right, and a gold rule before
   the page starts (the Juniors and Join heroes, shared). Pick photos that
   are at least as big as their half of the screen: never stretched. */
.phero { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; min-height: min(84vh, 50rem); background: #2e0813; color: #f7efe4; border-bottom: 4px solid #f3b53c; overflow: hidden; }
.phero__text { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end;
               padding: clamp(8rem, 16vh, 10rem) clamp(1.5rem, 4vw, 4rem) clamp(3rem, 7vh, 4.5rem) max(var(--sc-gutter), calc((100vw - 82rem) / 2 + var(--sc-gutter))); }
.phero .overline { color: #f3b53c; }
.phero h1 { margin: .9rem 0 1.2rem; max-width: 12ch; font-size: clamp(3rem, 5.6vw, 6rem); line-height: .92; color: #f7efe4; }
.phero p { margin: 0; max-width: 34rem; font-size: 1.1rem; line-height: 1.6; color: rgba(247,239,228,.84); }
.phero .hero-links { margin-top: 1.8rem; }
.phero__photo { position: relative; margin: 0; overflow: hidden; }
.phero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phero__photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, #2e0813 0%, rgba(46,8,19,0) 22%); }
.phero__tag { position: absolute; z-index: 2; right: 1.2rem; bottom: 1.2rem; padding: .35rem .7rem; border-radius: 3px; background: rgba(33,5,16,.84); font-size: .76rem; font-weight: 700; color: #f7efe4; }
@media (prefers-reduced-motion: no-preference) {
  html.js .phero__photo { clip-path: inset(0 0 0 100%); }
  html.js .phero__photo img { transform: scale(1.1); }
  html.js .phero__text > * { opacity: 0; transform: translateY(18px); }
  html.js .phero.is-in .phero__photo { clip-path: inset(0); transition: clip-path 1000ms cubic-bezier(.77,0,.18,1) 100ms; }
  html.js .phero.is-in .phero__photo img { transform: none; transition: transform 2000ms cubic-bezier(.22,1,.36,1) 100ms; }
  html.js .phero.is-in .phero__text > * { opacity: 1; transform: none; transition: opacity 700ms ease, transform 700ms cubic-bezier(.22,1,.36,1); transition-delay: var(--d, 0ms); }
}
@media (max-width: 860px) {
  .phero { grid-template-columns: 1fr; min-height: 0; }
  .phero__photo { order: -1; height: 44vh; min-height: 17rem; }
  .phero__photo::after { background: linear-gradient(0deg, #2e0813 0%, rgba(46,8,19,0) 30%); }
  .phero__text { padding: 1.4rem var(--sc-gutter) 2.6rem; }
  .phero h1 { font-size: clamp(2.6rem, 12vw, 3.6rem); }
}

/* Sections, heads, closes and the phone join bar, shared by the rebuilt inner
   pages (schedule, contact, join). Same values as the home page's own. */
.sec { padding-block: clamp(4rem, 8vw, 7rem); }
.sec__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 3rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.sec__head h2 { margin: 0; font-size: clamp(2.8rem, 5.2vw, 5.2rem); }
.sec__head p { margin: .8rem 0 0; max-width: 38rem; color: var(--sc-ink-soft); line-height: 1.5; }
.on-paper .sec__head h2 { color: var(--cardinal); }
.btn--outline-cx { display: inline-flex; align-items: center; gap: .5rem; padding: .9em 1.3em; border: 2px solid currentColor; border-radius: 4px; font-weight: 700; font-size: .9rem; color: var(--sc-ink); }
.btn--outline-cx:hover { background: color-mix(in oklab, currentColor 10%, transparent); }
.cta { padding-block: clamp(4rem, 8vw, 6.5rem); }
.cta h2 { margin: 0 0 1.2rem; font-size: clamp(3.2rem, 6.4vw, 6.4rem); }
.cta p { margin: 0 0 2rem; font-size: 1.15rem; max-width: 34rem; line-height: 1.5; color: var(--sc-ink-soft); }
.cta__row { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: center; }
.follow { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.follow a { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem; border: 1px solid rgba(247,239,228,.28); border-radius: 4px; font-size: .85rem; font-weight: 600; color: var(--sc-ink); }
.follow a:hover { border-color: var(--sc-accent); color: var(--sc-accent); }
.follow svg { width: 15px; height: 15px; fill: currentColor; }
.joinbar { position: fixed; z-index: 1005; left: .75rem; right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom, 0px)); display: none; align-items: center; gap: .8rem;
           padding: .7rem .7rem .7rem 1rem; background: #2e0813; border: 1px solid rgba(243,181,60,.4); border-radius: 6px; box-shadow: 0 10px 30px rgba(10,2,5,.45);
           transform: translateY(140%); transition: transform 280ms var(--sc-ease-out); }
.joinbar.is-on { transform: none; }
.joinbar p { margin: 0; flex: 1; font-size: .8rem; line-height: 1.3; }
.joinbar p b { display: block; font-size: .9rem; }
.joinbar .btn { padding: .65rem .9rem; font-size: .8rem; }
.joinbar button { flex: none; width: 32px; height: 32px; color: var(--sc-ink-soft); font-size: 1.1rem; }
@media (max-width: 860px) { .joinbar { display: flex; } }
html.no-js .joinbar { display: none; }

/* Legacy pages that load the scroll engine keep their own page ground and type:
   the engine's base sets the body to the concept canvas, which turned any
   section without its own background maroon. */
body:not(.cx) { background: var(--off-white); color: var(--ink); font-family: var(--font-sans); font-size: 1rem; line-height: 1.7; letter-spacing: normal; }