/* ============================================================
   PELANNE.COM — THE SHOW BILL
   a hand-set letterpress bill: newsprint, three inks, wood type
   ============================================================ */

:root {
    --paper: #ece8df;
    --paper-deep: #dcd5c4;
    --ink: #221d19;
    --red: #c8331b;
    --blue: #1f4e8c;

    --font-display: 'Holtwood One SC', 'Rockwell Extra Bold', 'Impact', serif;
    --font-text: 'Archivo', 'Helvetica Neue', Arial, sans-serif;

    --measure: 60ch;
    --gutter: clamp(1.25rem, 4vw, 3.5rem);
}

* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    background: var(--paper-deep);
    color-scheme: light;
}

body {
    margin: 0;
    padding: clamp(0.6rem, 2vw, 2rem);
    color: var(--ink);
    font-family: var(--font-text);
    font-size: 1.0625rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

::selection { background: var(--blue); color: var(--paper); }

a {
    color: inherit;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 3px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.skip {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -150%);
    padding: 0.5rem 1rem;
    background: var(--ink);
    color: var(--paper);
    text-decoration: none;
    z-index: 10;
}

.skip:focus { transform: translate(-50%, 0.5rem); }

/* ------------------------------------------------------------
   THE SHEET — one poster, double-rule frame
   ------------------------------------------------------------ */
.sheet {
    max-width: 1080px;
    margin: 0 auto;
    background: var(--paper);
    border: 5px solid var(--ink);
    box-shadow:
        0 0 0 3px var(--paper),
        0 0 0 5px var(--ink);
    padding: 0 var(--gutter);
}

/* ------------------------------------------------------------
   RULES — printer's rules between blocks
   ------------------------------------------------------------ */
.rule {
    border: 0;
    margin: 0;
    height: 5px;
    background: var(--ink);
}

.rule--heavy { height: 6px; }

.rule--double {
    height: 14px;
    background:
        linear-gradient(var(--ink), var(--ink)) top / 100% 6px no-repeat,
        linear-gradient(var(--ink), var(--ink)) bottom / 100% 2px no-repeat;
}

/* ------------------------------------------------------------
   MASTHEAD
   ------------------------------------------------------------ */
.masthead {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem 1.5rem;
    padding: 0.9rem 0;
    font-weight: 600;
}

.masthead__home {
    text-decoration: none;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.masthead__nav {
    display: flex;
    gap: 1.5rem;
}

.masthead__nav a,
.masthead__home {
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
}

.masthead__nav a { text-decoration: none; }

.masthead__nav a:hover,
.masthead__home:hover {
    text-decoration: underline;
    text-decoration-color: var(--red);
}

/* ------------------------------------------------------------
   THE BILL — hero
   ------------------------------------------------------------ */
.bill {
    text-align: center;
    padding: clamp(1.75rem, 4vw, 3.25rem) 0 clamp(1.5rem, 3.5vw, 2.75rem);
}

.bill p { margin: 0; }

.bill__presents {
    font-stretch: 62%;
    font-weight: 600;
    font-size: clamp(0.85rem, 1.7vw, 1.15rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 auto !important;
    line-height: 1.35;
}

/* ── PHIL ── flanked by rules */
.bill__first {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 2vw, 1.5rem);
    margin-top: clamp(1rem, 2.4vw, 1.75rem) !important;
    color: var(--blue);
    font-stretch: 125%;
    font-weight: 900;
    font-size: clamp(1.5rem, 4.4vw, 3rem);
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.bill__first::before,
.bill__first::after {
    content: "";
    flex: 1;
    height: 5px;
    background: currentColor;
}

.bill__name {
    margin: clamp(0.5rem, 1.4vw, 1rem) 0 clamp(0.9rem, 2vw, 1.4rem);
    line-height: 0;
}

.bill__type {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.bill__type text {
    font-family: var(--font-display);
    font-size: 171px;
}

.plate { mix-blend-mode: multiply; }

.plate--ink text { fill: var(--ink); }
.plate--red text { fill: var(--red); }

/* the red plate is printed a hair off register, and settles once on load */
.plate--red {
    transform: translate(-6px, -5px);
    animation: register 1.1s cubic-bezier(0.2, 0.9, 0.25, 1) both;
}

@keyframes register {
    from { transform: translate(-30px, -22px); }
    to   { transform: translate(-6px, -5px); }
}

.bill__tag {
    margin-top: clamp(0.9rem, 2vw, 1.4rem) !important;
    font-stretch: 118%;
    font-weight: 800;
    font-size: clamp(1rem, 2.5vw, 1.65rem);
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-wrap: balance;
}

.bill__tagsub {
    margin-top: 0.5rem !important;
    font-stretch: 62%;
    font-weight: 500;
    font-size: clamp(0.85rem, 1.8vw, 1.15rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-wrap: balance;
}

/* ------------------------------------------------------------
   SECTIONS
   ------------------------------------------------------------ */
.section {
    padding: clamp(2rem, 4.5vw, 3.5rem) 0 clamp(2.25rem, 5vw, 4rem);
}

.section__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.7rem, 4.6vw, 3.2rem);
    line-height: 1.05;
    text-align: center;
    text-transform: uppercase;
    margin: 0 0 clamp(1.5rem, 3.5vw, 2.5rem);
    text-wrap: balance;
}

.section__lede {
    max-width: var(--measure);
    margin: -1rem auto clamp(1.5rem, 3vw, 2.25rem);
    text-align: center;
    font-stretch: 62%;
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* ------------------------------------------------------------
   ABOUT
   ------------------------------------------------------------ */
.about__grid {
    display: grid;
    grid-template-columns: minmax(180px, 280px) minmax(0, var(--measure));
    justify-content: center;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
}

/* the woodcut block */
.portrait {
    margin: 0;
    border: 5px solid var(--ink);
    padding: 0.5rem;
    background: var(--paper);
}

.portrait img {
    display: block;
    width: 100%;
    height: auto;
    border: 2px solid var(--ink);
}

.portrait figcaption {
    padding-top: 0.55rem;
    text-align: center;
    font-stretch: 62%;
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.about__text p { margin: 0; }
.about__text p + p { margin-top: 1.1em; }

.about__text strong { color: var(--red); font-weight: 800; }

.about__text a {
    color: var(--blue);
    font-weight: 600;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.15em;
}

.about__text a:hover { color: var(--red); }

.grue {
    display: inline-block;
    padding: 0.55rem 0.9rem;
    background: var(--ink);
    color: var(--paper);
    font-stretch: 62%;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ------------------------------------------------------------
   FEED
   ------------------------------------------------------------ */
.feed {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 62rem;
    border-top: 2px solid var(--ink);
}

.feed li {
    border-bottom: 2px solid var(--ink);
}

.feed a {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: 1rem;
    align-items: baseline;
    padding: 0.8rem 0.25rem;
    text-decoration: none;
    font-weight: 600;
    line-height: 1.35;
}

.feed time {
    color: var(--blue);
    font-stretch: 62%;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}

.feed a span { overflow-wrap: anywhere; }

.feed a:hover { color: var(--red); }
.feed a:hover time { color: var(--red); }

.feed__status {
    padding: 1rem 0.25rem;
    font-stretch: 62%;
    font-weight: 500;
    letter-spacing: 0.04em;
}

.feed__status a { color: var(--blue); }

/* ------------------------------------------------------------
   CONTACT — tickets
   ------------------------------------------------------------ */
.contact__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.9rem;
}

.ticket {
    display: inline-block;
    min-width: 9.5rem;
    padding: 0.95rem 1.6rem;
    background: var(--ink);
    color: var(--paper);
    text-decoration: none;
    text-align: center;
    font-stretch: 118%;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 3px solid var(--ink);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.ticket:hover {
    background: var(--red);
    border-color: var(--red);
}

.ticket:active { background: var(--blue); border-color: var(--blue); }

.contact__aside {
    margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
    text-align: center;
    font-stretch: 62%;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.contact__aside a {
    color: var(--blue);
    font-weight: 600;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.15em;
}

.contact__aside a:hover { color: var(--red); }

/* ------------------------------------------------------------
   COLOPHON — fine print and the sign-off
   ------------------------------------------------------------ */
.colophon {
    padding: clamp(1.5rem, 3.5vw, 2.5rem) 0 clamp(1rem, 2vw, 1.5rem);
    text-align: center;
}

.colophon__bye {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 14vw, 9rem);
    line-height: 0.95;
    text-transform: uppercase;
    color: var(--red);
}

.colophon__fine {
    margin-top: clamp(1rem, 2.5vw, 1.75rem);
    font-stretch: 62%;
    font-weight: 500;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.6;
    max-width: 70ch;
    margin-left: auto;
    margin-right: auto;
    text-wrap: balance;
}

.colophon__fine p { margin: 0; }

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 640px) {
    .masthead {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .masthead__nav { gap: 1.25rem; }

    .about__grid {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .portrait { max-width: 260px; }

    .feed a {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }

    .contact__links {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .ticket { min-width: 0; padding-inline: 0.75rem; }
}

/* ------------------------------------------------------------
   REDUCED MOTION
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .plate--red { animation: none; }
    .ticket { transition: none; }
}

/* ------------------------------------------------------------
   PRINT — it is, after all, a bill
   ------------------------------------------------------------ */
@media print {
    html { background: none; }
    body { padding: 0; }
    .sheet { max-width: none; box-shadow: none; }
    .skip, .masthead__nav { display: none; }
    .plate--red { animation: none; }
    .feed a, .ticket { color: var(--ink); background: none; border-color: var(--ink); }
    .ticket { padding: 0.5rem 1rem; }
}