/* Mobile and tablet experience for the home and about pages.
   Linked after styles/main.css so it can override the desktop rules in
   site-shell.css and main.css without editing them. It must stay a linked
   stylesheet: CSS ignores an @import that appears after other rules, which
   would silently drop every override in this file.
   Every rule here is scoped to narrower-than-desktop widths, so the desktop
   rendering above 860px is untouched. */

@media (max-width: 860px) {

/* ---------------------------------------------------------------- shell --- */

:root {
    --gutter: 20px;
    --tap: 48px;
    /* The sticky header plus its divider, so a full-height block starts exactly
       below it. */
    --header-height: 77px;
    /* Room from the header to the rows, and from the rows to the section below. */
    --hero-room: 16px;
    /* The pixel display face has a tall line box, so its glyphs sit below the
       box top. Trimming twice this keeps the block optically centred and stops
       the sliver of the next section showing at the fold. */
    --hero-heading-trim: 10px;
    --hero-gap: 24px;
}

.hero-heading {
    margin-bottom: var(--hero-gap);
}

body {
    /* Phone reading size. The desktop 16px base renders as ~13px body copy
       because most paragraphs opt into 13-14px; the mobile type scale below
       brings real paragraphs back to a comfortable phone size. */
    font-size: 16px;
    line-height: 1.7;
    -webkit-text-size-adjust: 100%;
}

body .container {
    width: auto;
    margin-inline: var(--gutter);
    padding-bottom: env(safe-area-inset-bottom);
}

.section {
    padding-top: 64px;
}

/* Long words, emails and URLs must never widen the page on a phone. */
h1, h2, h3, p, a, li {
    overflow-wrap: break-word;
}

/* ------------------------------------------------------------ site nav --- */

.site-header {
    position: sticky;
    top: 0;
    /* Keeps the bar clear of a notch when the background extends edge to edge. */
    padding-top: env(safe-area-inset-top);
    /* Backdrop blur keeps the CRT and photos from visually colliding with the
       menu label while the page scrolls underneath the bar. */
    backdrop-filter: blur(8px);
}

.site-header .site-nav {
    min-height: 60px;
    padding-block: 8px;
}

.site-header .brand {
    /* ~48px of thumb target without changing the visual type size. */
    padding-block: 12px;
    font-size: 15px;
}

.site-header .menu-toggle {
    min-height: var(--tap);
    min-width: 64px;
    padding-inline: 8px;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.site-header .nav-links {
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    padding: 4px var(--gutter) calc(24px + env(safe-area-inset-bottom));
}

.site-header .nav-links > li {
    width: 100%;
    border-top: 1px solid var(--line);
}

.site-header .nav-links > li > a,
.site-header .nav-dropdown-btn {
    min-height: 56px;
    padding-block: 16px;
    font-size: 17px;
}

.site-header .nav-dropdown-list a {
    min-height: 52px;
    display: flex;
    align-items: center;
    font-size: 15px;
}

/* The workshop pages are desktop-only: they keep their own layouts and are not
   adapted for a phone, so the menu entry is withheld on narrow screens rather
   than sending a phone visitor to a page built for a wide viewport. The pages
   themselves stay published and reachable by direct link. */
.site-header .nav-dropdown {
    display: none;
}

/* --------------------------------------------------------- mobile hero --- */

.home-hero {
    /* The hero is a full screen: its contents are vertically centred, and the
       next section begins at the fold so a first-time visitor sees the whole
       welcome and none of the club photo below it. The artwork is sized against
       the screen height to fit inside. Both are portrait rules: in landscape
       there is not enough height for a full-screen hero, so the hero keeps its
       natural height and the page scrolls as usual. */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Symmetric room above and below. The extra at the bottom is optical: the
       pixel face has a tall line box, so its glyphs sit lower than their box. */
    padding-block: var(--hero-room);
    padding-bottom: calc(var(--hero-room) + 2 * var(--hero-heading-trim));
}

@media (orientation: portrait) {
    .home-hero {
        height: calc(100svh - var(--header-height));
        overflow: hidden;
    }
}

.hero-heading h1 {
    font-size: clamp(38px, 11.4vw, 60px);
    line-height: 0.98;
    text-wrap: balance;
}

.hero-stage {
    /* One column, ordered art -> identity -> invite by CSS order below.
       The artwork bleeding past the text column is intentional and matches the
       desktop composition; overflow is clipped on this container. */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--hero-gap);
    overflow-x: clip;
}

.hero-art {
    order: 1;
    /* Square the box so a width chosen against the screen height also bounds the
       height. */
    aspect-ratio: 1;
    /* Sized from the screen height rather than the text column: on a tall phone
       the artwork stays comfortably inside the hero instead of swallowing it,
       which is what leaves the hero its breathing room. The floor keeps it
       legible on a short screen; the cap stops it growing on a tablet. */
    width: clamp(240px, 40dvh, 400px);
    /* The CRT artwork is drawn wider than its box on purpose, and a flex item
       sizes to its content by default: without these it takes the inflated
       content height instead of the square box above. */
    min-width: 0;
    min-height: 0;
    align-self: center;
}

/* main.css pulls the artwork up by 56px for the desktop three-column hero;
   on a phone the stacked layout wants that space back. */
.hero-identity,
.hero-invite {
    --hero-lift: 0px;
    transform: translateY(var(--hero-lift));
}

.hero-identity {
    order: 2;
    width: 100%;
    max-width: 34ch;
    /* The desktop stylesheet adds margins here at its 480px breakpoint; the stack
       spacing is owned by .hero-stage's gap instead. */
    margin: 0 auto;
    font-size: 13px;
    line-height: 1.75;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    color: var(--muted);
}

/* The short rule under the identity block is a desktop alignment device. */
.hero-identity::after {
    display: none;
}

.hero-invite {
    order: 3;
    width: 100%;
    max-width: none;
    margin: 0;
    padding-left: 0;
    text-align: center;
}

.hero-invite p {
    max-width: 30ch;
    margin: 0 auto 22px;
    font-size: 16px;
    line-height: 1.65;
}

/* A centred, comfortable-width primary action with a real thumb target. */
.hero-invite .btn {
    width: min(100%, 320px);
    min-height: 56px;
    margin-inline: auto;
    gap: 16px;
    padding: 15px 22px;
    white-space: normal;
    font-size: 16px;
}

/* -------------------------------------------------------------- about ---- */

.page-title {
    padding: 30px 0 34px;
}

.page-title h1 {
    margin: 16px 0;
    font-size: clamp(50px, 14vw, 72px);
}

.page-title .lede {
    font-size: 16px;
    line-height: 1.75;
}

/* The beaver sits beside the title on desktop; on a phone a narrower title
   column would squeeze the headline, so the logo steps down to sit above it. */
.about-title-row {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 18px;
}

.about-title-row h1 {
    font-size: clamp(46px, 14vw, 66px);
}

.about-ascii-logo {
    flex: 0 0 auto;
    width: 72px;
}

.about-image {
    margin-top: 26px;
}

.about-image img {
    max-height: 60vh;
    object-position: center 50%;
}

.about-welcome {
    padding-block: 26px 30px;
}

.about-welcome + .section {
    padding-top: 40px;
}

/* ------------------------------------------------------- section intro --- */

.section-intro {
    margin-bottom: 26px;
}

.section-intro h2,
.story-copy h2 {
    font-size: clamp(34px, 9.6vw, 50px);
    line-height: 1.02;
    text-wrap: balance;
}

.section-intro p:not(.eyebrow),
.story-copy > p:not(.eyebrow) {
    max-width: none;
    font-size: 16px;
    line-height: 1.75;
}

/* ------------------------------------------------------- club story ------ */

.club-story {
    gap: 26px;
}

.club-photo {
    width: 100%;
}

.photo-caption {
    font-size: 11px;
    letter-spacing: 0.06em;
}

/* ------------------------------------------------------------ officers --- */

.officer-grid {
    /* One full-width card per officer: two columns made every portrait too
       narrow to read a face and forced names to break mid-word. */
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
}

.officer img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-position: center 35%;
}

.officer .eyebrow {
    margin-top: 16px;
    font-size: 11px;
    letter-spacing: 0.1em;
}

.officer h3 {
    font-size: 30px;
    line-height: 1.15;
    margin-top: 4px;
}

/* ------------------------------------------------------- join / footer --- */

.join-section {
    gap: 24px;
    padding: 36px 0;
    margin-top: 64px;
}

.join-section h2 {
    font-size: clamp(32px, 9vw, 46px);
}

.join-section .btn {
    width: 100%;
    max-width: 420px;
    min-height: 56px;
    font-size: 15px;
}

.site-footer {
    margin-top: 48px;
}

.site-footer .footer-inner {
    gap: 14px;
    padding-block: 26px calc(26px + env(safe-area-inset-bottom));
}

.site-footer p {
    font-size: 12px;
}

.site-footer .footer-links {
    /* 44px rows instead of 15px so the links are reliably tappable. */
    gap: 0 26px;
}

.site-footer .footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 13px;
}

/* --------------------------------------------------------- error pages --- */

.error-page {
    min-height: 60vh;
    padding-block: 56px;
}

.error-page h1 {
    font-size: clamp(84px, 26vw, 160px);
}

.error-page h2 {
    font-size: 34px;
}

.error-page p {
    font-size: 16px;
}

.error-actions .btn {
    width: 100%;
}

}

/* --- phones that cannot fit the full hero: tighten instead of overflowing --- */

@media (max-width: 860px) and (max-height: 780px) {
    :root {
        --hero-room: 14px;
        --hero-gap: 20px;
    }

    .hero-heading h1 {
        font-size: clamp(34px, 10.4vw, 48px);
    }

    .hero-invite p {
        margin-bottom: 16px;
    }
}

@media (max-width: 860px) and (max-height: 680px) {
    :root {
        --hero-room: 10px;
        --hero-gap: 16px;
    }

    .hero-art {
        /* Below this height the heading, copy and action need the room more than
           the artwork does. */
        width: clamp(190px, 34dvh, 320px);
    }

    .hero-identity {
        font-size: 12px;
        line-height: 1.6;
    }

    .hero-invite p {
        font-size: 15px;
        line-height: 1.5;
        margin-bottom: 12px;
    }

    .hero-invite .btn {
        min-height: 50px;
        font-size: 15px;
    }
}

/* ------------------------------- very small phones (<= 360px) ------------ */

@media (max-width: 360px) {
    :root {
        --gutter: 16px;
    }

    .hero-heading h1 {
        font-size: clamp(34px, 11vw, 44px);
    }

    .site-header .brand {
        font-size: 14px;
    }

    .site-header .menu-toggle {
        min-width: 56px;
        font-size: 14px;
    }

    .officer h3 {
        font-size: 27px;
    }
}

/* Touch devices: no hover-only affordances, and never a sticky hover state. */
@media (hover: none), (pointer: coarse) {
    .officer h3,
    .workshop-row:hover h3,
    .site-header .nav-links > li > a:hover,
    .site-footer a:hover {
        color: inherit;
    }

    .hero-invite .btn:hover,
    .btn:hover {
        background: var(--accent);
        border-color: var(--accent);
        color: #000;
    }

    .btn-outline:hover {
        background: transparent;
        color: var(--text);
        border-color: var(--line);
    }
}