/* SevenTwentyNine memorial page. Uses the site tokens from styles.css. */

.stn {
    display: grid;
    gap: clamp(48px, 7vw, 88px);
    padding-bottom: clamp(24px, 4vw, 48px);
}

/* ─── HERO ─────────────────────────────────────────── */

.stn-hero {
    container-type: inline-size;
    padding-top: clamp(48px, 9vw, 128px);
    text-align: center;
}

.stn-sign {
    padding: 32px 0 8px;
    border-top: 1px solid var(--rule);
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-dim);
}

/* The original logo, kept small so the 128px source stays crisp */
.stn-mark {
    display: block;
    width: clamp(56px, 6vw, 72px);
    height: auto;
    margin: 0 auto clamp(20px, 2.5vw, 32px);
}

.stn-name {
    font-family: var(--display);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.035em;
    white-space: nowrap;
    /* "SevenTwentyNine" is about 8.4em wide, so this fills ~84% of the width */
    font-size: calc(84cqw / 8.4);
    color: var(--ink);
}

.stn-name-accent { color: var(--accent); }

.stn-swoosh {
    display: block;
    width: min(42cqw, 520px);
    margin: 1.2cqw auto 0;
    fill: none;
    stroke: var(--sky);
    stroke-width: 5;
    stroke-linecap: round;
}

.stn-swoosh path {
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    animation: stn-draw 0.9s ease-out 0.2s forwards;
}

.stn-swoosh path + path { stroke-width: 4; animation-delay: 0.6s; }

.stn-note {
    margin-top: 18px;
    font-family: 'Caveat', cursive;
    font-weight: 600;
    font-size: clamp(30px, 3.6cqw, 48px);
    line-height: 1.1;
    color: var(--ink);
    transform: rotate(-2deg);
}

/* ─── BODY (one calm centered column) ──────────────── */

.stn-body {
    display: grid;
    justify-items: center;
    gap: 40px;
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
    font-size: 19px;
    line-height: 1.7;
}

/* The Herald clipping: a paper cutting laid slightly askew */
.stn-clip {
    width: 100%;
    max-width: 420px;
    margin: 16px 0 8px;
}

.stn-clip picture {
    position: relative;
    display: block;
    transform: rotate(-1.5deg);
}

.stn-clip img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 2px;
    box-shadow:
        0 1px 2px rgba(27, 22, 36, 0.08),
        0 12px 32px -8px rgba(27, 22, 36, 0.22);
}

/* Two strips of translucent tape holding the clipping up */
.stn-clip picture::before,
.stn-clip picture::after {
    content: "";
    position: absolute;
    top: -12px;
    width: 100px;
    height: 30px;
    background: rgba(222, 219, 210, 0.75);   /* matte paper tape */
    box-shadow: 0 1px 2px rgba(27, 22, 36, 0.1);
    /* torn, slightly ragged ends */
    clip-path: polygon(
        3% 0, 97% 0, 100% 18%, 96% 38%, 100% 60%, 97% 82%, 99% 100%,
        2% 100%, 0 80%, 4% 58%, 0 40%, 3% 20%
    );
    z-index: 1;
}

.stn-clip picture::before { left: -22px; transform: rotate(-38deg); }
.stn-clip picture::after { right: -22px; transform: rotate(36deg); }

/* Leave room for the tape on narrow screens */
@media (max-width: 520px) {
    .stn-clip { padding: 0 22px; }
}

.stn-clip figcaption {
    margin-top: 20px;
    font-family: 'Caveat', cursive;
    font-size: 24px;
    font-weight: 600;
    color: var(--ink-mid);
}

.stn-term {
    width: 100%;
    max-width: 680px;
    padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 48px);
    background: var(--ink);
    border-radius: 18px;
    text-align: left;
    font-family: var(--mono);
    font-size: clamp(16px, 1.6vw, 20px);
    line-height: 1.9;
    color: var(--bg);
    overflow-x: auto;
}

.stn-term b { color: var(--accent); font-weight: 400; }
.stn-term .bye { color: var(--sun); }

/* Lines appear one at a time, like it's typing */
.stn-term .l {
    opacity: 0;
    animation: stn-in 0.01s linear forwards;
}

.stn-term .l:nth-child(1) { animation-delay: 1.2s; }
.stn-term .l:nth-child(2) { animation-delay: 2.0s; }
.stn-term .l:nth-child(3) { animation-delay: 2.6s; }

.stn-term u {
    display: inline-block;
    width: 0.55em;
    height: 1.1em;
    margin-left: 4px;
    vertical-align: -0.2em;
    background: var(--sun);
    animation: stn-blink 1s steps(1) infinite;
}

.stn-body p { text-wrap: balance; }

.stn-thanks { color: var(--ink-dim); font-size: 17px; }

/* ─── MOTION ───────────────────────────────────────── */

@keyframes stn-draw { to { stroke-dashoffset: 0; } }
@keyframes stn-in { to { opacity: 1; } }
@keyframes stn-blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .stn-swoosh path { animation: none; stroke-dashoffset: 0; }
    .stn-term .l { animation: none; opacity: 1; }
    .stn-term u { animation: none; }
}