/* ============================================================
   newtonium.css - Newtonium physics club, Hampton School

   Standalone page with its own identity. system.css is linked
   first for the reset, type scale, spacing and primitives; this
   file then repoints the colour tokens at the club's palette -
   the crest's black and gold, with chalk-white for the shield's
   equations - so the shared primitives (.shell, .btn, .tag,
   .eyebrow) come out in Newtonium colours rather than the
   Cosmos1562 cyan.

   CONTENTS
     1. Palette override
     2. Page frame and chalk grid
     3. Hero
     4. Fact strip
     5. Sections
     6. Rota table
     7. Footer
   ============================================================ */


/* --- 1. Palette override ---------------------------------------
   Sampled from the crest: the lion is #fec93f on true black, the
   shield is drawn in chalk. Only the tokens that carry colour are
   redefined; type, space and motion stay as system.css set them. */

:root {
    --bg:          #000000;
    --surface:     #0a0a0b;
    --surface-2:   #101012;
    --surface-3:   #17171a;

    --line:        rgba(254, 201, 63, 0.14);
    --line-strong: rgba(254, 201, 63, 0.30);

    --ink:         #ece9e2;   /* chalk */
    --ink-2:       #a9a49a;
    --ink-3:       #77726a;

    --gold:        #fec93f;
    --gold-dim:    rgba(254, 201, 63, 0.12);
    --gold-line:   rgba(254, 201, 63, 0.34);

    /* system.css primitives key off --signal; pointing it at the
       gold is what recolours .tag-info, focus rings and .btn. */
    --signal:      var(--gold);
    --signal-dim:  var(--gold-dim);
    --signal-line: var(--gold-line);
    --signal-live: #ffd766;
}


/* --- 2. Page frame and chalk grid -------------------------------
   Faint squared-paper grid behind everything, fading out down the
   page. Fixed and pointer-events-free, so it never interferes. */

body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(to right,  rgba(254, 201, 63, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(254, 201, 63, 0.05) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(to bottom, #000 0%, transparent 62%);
}

.page {
    position: relative;
    z-index: 1;
    max-width: 780px;
    margin-inline: auto;
    padding: var(--s-7) var(--s-5) var(--s-8);
}


/* --- 3. Hero ---------------------------------------------------- */

.hero {
    display: grid;
    grid-template-columns: 148px 1fr;
    gap: var(--s-6);
    align-items: center;
    padding-bottom: var(--s-6);
    margin-bottom: var(--s-6);
    border-bottom: 1px solid var(--line);
}

.crest {
    width: 148px;
    height: auto;
    justify-self: center;
}

.school {
    font-family: var(--font-mono);
    font-size: var(--t-11);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: var(--s-3);
}

.hero h1 {
    font-family: var(--font-mark);
    font-size: var(--t-44);
    line-height: var(--lh-tight);
    letter-spacing: 0.06em;
    color: var(--gold);
    margin-bottom: var(--s-3);
}

.hero .tagline {
    font-size: var(--t-17);
    color: var(--ink);
    line-height: var(--lh-snug);
    margin-bottom: var(--s-4);
}

.first-talk {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    border: 1px solid var(--gold-line);
    background: var(--gold-dim);
    border-radius: var(--r);
    font-family: var(--font-mono);
    font-size: var(--t-12);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gold);
}


/* --- 4. Fact strip ---------------------------------------------
   The poster's WHEN / WHERE / WHO block, same three columns. */

.facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    margin-bottom: var(--s-7);
}

.fact {
    background: var(--surface);
    padding: var(--s-4);
}

.fact dt {
    font-family: var(--font-mono);
    font-size: var(--t-11);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: var(--s-2);
}

.fact dd {
    margin: 0;
    font-size: var(--t-21);
    color: var(--gold);
    line-height: var(--lh-tight);
}

.fact .fact-note {
    display: block;
    margin-top: var(--s-2);
    font-size: var(--t-12);
    color: var(--ink-2);
    line-height: var(--lh-snug);
}


/* --- 5. Sections ------------------------------------------------ */

.section { margin-bottom: var(--s-7); }

.section h2 {
    font-size: var(--t-21);
    color: var(--ink);
    padding-bottom: var(--s-2);
    margin-bottom: var(--s-4);
    border-bottom: 1px solid var(--line);
}

.section p {
    color: var(--ink-2);
    font-size: var(--t-15);
    line-height: var(--lh-body);
    max-width: var(--measure);
}

.section p + p { margin-top: var(--s-4); }

.section p strong { color: var(--ink); }

/* Numbered "how a talk works" list. The counter is set in gold
   mono so the steps read as a sequence at a glance. */
.steps {
    counter-reset: step;
    display: grid;
    gap: var(--s-4);
    max-width: var(--measure);
}

/* The marker is absolute rather than a grid or flex item: the step
   text is a bare text node next to <strong>, and any layout that
   boxes each child separately would break it onto its own line. */
.steps li {
    counter-increment: step;
    list-style: none;
    position: relative;
    padding-left: 2.75rem;
    color: var(--ink-2);
    font-size: var(--t-15);
    line-height: var(--lh-body);
}

.steps li::before {
    content: counter(step, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0.2em;
    font-family: var(--font-mono);
    font-size: var(--t-12);
    color: var(--gold);
}

.steps li strong {
    color: var(--ink);
    font-weight: 500;
}


/* --- 6. Rota table ---------------------------------------------- */

.rota {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--t-13);
}

.rota th {
    text-align: left;
    font-family: var(--font-mono);
    font-size: var(--t-11);
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding: 0 var(--s-3) var(--s-2) 0;
    border-bottom: 1px solid var(--line);
}

.rota td {
    padding: var(--s-3) var(--s-3) var(--s-3) 0;
    border-bottom: 1px solid var(--line);
    color: var(--ink-2);
    vertical-align: top;
}

.rota td.date {
    font-family: var(--font-mono);
    color: var(--gold);
    white-space: nowrap;
}

.rota td.speaker { color: var(--ink); }

.rota td.open { color: var(--ink-3); font-style: italic; }

.table-note {
    margin-top: var(--s-3);
    font-size: var(--t-12);
    color: var(--ink-3);
}


/* --- 7. Footer -------------------------------------------------- */

.foot {
    border-top: 1px solid var(--line);
    padding-top: var(--s-5);
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-4);
    justify-content: space-between;
    font-size: var(--t-12);
    color: var(--ink-3);
}

.foot a { color: var(--ink-3); }
.foot a:hover { color: var(--gold); }


/* --- Narrow screens --------------------------------------------- */

@media (max-width: 640px) {
    .page { padding: var(--s-6) var(--s-4) var(--s-7); }

    .hero {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: var(--s-4);
    }

    .crest { width: 112px; }

    .facts { grid-template-columns: 1fr; }

    .hero h1 { font-size: var(--t-34); }
}