/*fonts*/
@layer fonts {
    @font-face {
        font-family: "Inter Tight";
        src: url("./fonts/InterTight.ttf");
    }

    @font-face {
        font-family: "Fraunces";
        src: url("./fonts/Fraunces.ttf");
    }

    @font-face {
        font-family: "JetBrains Mono";
        src: url("./fonts/JetBrainsMono.ttf");
    }
}
/* tokens */
:root {
    /* surfaces */
    --peach: #fbe8d6;
    --peach-2: #f5d8be;
    --peach-3: #edc4a0;
    --peach-4: #d2a27a;

    /* ink */
    --ink: #2a1a10;
    --ink-2: #4a3728;
    --ink-3: #7a6558;
    --ink-4: #a89488;

    /*accent*/
    --rust: #b8431c;
    --rust-deep: #8a2f10;
    --rust-light: #f7e4dc;

    /* geometry */
    --radius: 0;
    --rule: 1px solid var(--ink);
    --rule-soft: 1px solid var(--ink-4);

    /* typography */
    --font-display: "Fraunces", serif;
    --font-body: "Inter Tight", sans-serif;
    --font-mono: "JetBrains Mono", monospace;

    /* scaling */
    --step--2: 0.64rem;
    --step--1: 0.8rem;
    --step-0: 1rem;
    --step-1: 1.25rem;
    --step-2: 1.563rem;
    --step-3: 1.953rem;
    --step-4: 2.441rem;
    --step-5: 3.052rem;
    --step-6: 3.815rem;
}

@layer reset {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
}

@layer base {
    body {
        font-family: var(--font-body);
        font-size: var(--step-0);
        line-height: 1.55;
        color: var(--ink);
        background-color: var(--peach);
        min-height: 100dvh;
    }

    /* grain overlay; */
    body::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 1000;
        pointer-events: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
        mix-blend-mode: multiply;
        opacity: 0.05;
    }

    main {
        margin: 2rem clamp(1rem, 10vw, 10rem) 0;
    }
}

@layer typography {
    h1 {
        font-family: var(--font-display);
        font-style: italic;
        font-weight: 300;
    }

    h2 {
        font-family: var(--font-display);
        font-style: italic;
        font-weight: 400;
    }

    a {
        color: inherit;
        text-decoration: none;
    }

    .eyebrow,
    time,
    .meta {
        font-family: var(--font-mono);
        font-size: var(--step--1);
        text-transform: lowercase;
        letter-spacing: 0.03em;
        color: var(--ink-3);
    }

    .emptyState {
        font-family: var(--font-display);
        font-style: italic;
        font-size: var(--step-2);
        color: var(--ink-3);
        padding: 3rem 0;
    }
}

@layer nav {
    .masthead {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 2rem;
        padding: 1rem 2rem;
        position: sticky;
        top: 0;
        z-index: 100;
        background-color: color-mix(in srgb, var(--peach) 85%, transparent);
        backdrop-filter: blur(8px);
        border-bottom: var(--rule);

        .wordmark {
            font-family: var(--font-display);
            font-style: italic;
            font-weight: 300;
            font-size: var(--step-2);
            color: var(--ink);
            letter-spacing: -0.02em;
        }

        .links {
            display: flex;
            gap: 2rem;
            justify-content: center;
            a {
                font-family: var(--font-mono);
                font-size: var(--step--1);
                text-transform: lowercase;
                color: var(--ink-2);
                transition: color 0.15s;
            }

            a:hover {
                color: var(--rust);
            }
        }

        .leave button {
            font-family: var(--font-mono);
            font-size: var(--step--1);
            text-transform: lowercase;
            background: transparent;
            border: none;
            color: var(--ink-3);
            transition: color 0.15s;
        }

        .leave button:hover {
            color: var(--rust);
        }
    }
}

@layer passGate {
    .passGate {
        display: grid;
        grid-template-columns: 1fr 1fr;
        min-height: 100vh;
        min-height: 100dvh;
    }

    .passGateLeft {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 4rem 3rem;
        border-right: var(--rule);
        position: relative;
    }

    .passGateRight {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 2rem;
        padding: 4rem 3rem;
        background-color: var(--peach-2);
    }

    .passGateError {
        font-family: var(--font-mono);
        font-size: var(--step--1);
        color: var(--rust);
        margin-top: -0.25rem;
    }

    .passGateDetails {
        summary::before {
            content: "+ ";
            color: var(--rust);
        }

        summary {
            font-family: var(--font-mono);
            font-size: var(--step-1);
            cursor: pointer;
            list-style: none;
            margin-bottom: 1rem;
        }

        button {
            border: none;
            background-color: var(--ink);
            color: var(--peach);
            padding: 0.875rem 2rem;
            transition: background-color 0.15s;
        }
        button:hover {
            background-color: var(--rust);
            color: var(--ink);
        }

        form {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        input[type="password"] {
            font-family: var(--font-mono);
            font-size: var(--step-0);
            background-color: var(--peach);
            border: var(--rule-soft);
            color: var(--ink);
            text-align: center;
        }
    }
    .passGateDetails[open] summary::before {
        content: "- ";
    }
}

@layer hero {
    .hero {
        display: grid;
        grid-template-columns: 7fr 5fr;
        gap: 3rem;
        padding: 3 rem 2rem 3rem;
        border-bottom: var(--rule);

        .heroTitle {
            font-family: var(--font-display);
            font-style: italic;
            font-weight: 300;
            font-size: clamp(var(--step-4), 6vw, var(--step-6));
            line-height: 1.05;

            .accent {
                color: var(--rust);
                font-style: normal;
                font-weight: 400;
            }
        }

        .heroMeta {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 0.5rem 1.5rem;
            align-content: start;
            border-left: 3px solid var(--rust);
            padding-left: 1.25rem;

            dt {
                font-family: var(--font-mono);
                font-size: var(--step--1);
                text-transform: lowercase;
                color: var(--ink-3);
                padding-top: 0.1rem;
            }

            dd {
                font-family: var(--font-display);
                font-style: italic;
                font-size: var(--step-1);
                color: var(--ink);
            }
        }
    }
}

@layer newsletter {
    #newsletterIndex {
        padding: 0 2rem;
    }

    .issue {
        display: grid;
        grid-template-columns: 4rem 1fr auto;
        align-items: center;
        gap: 1.5rem;
        padding: 1.25rem 0;
        border-bottom: var(--rule-soft);
        transition:
            background-color 0.15s,
            padding-left 0.15s;

        .issueNumber {
            font-family: var(--font-mono);
            font-size: var(--step--1);
            color: var(--ink-3);
        }

        .issueTitle {
            font-family: var(--font-display);
            font-style: italic;
            font-size: var(--step-2);
            font-weight: 300;
        }
    }

    .issue:hover {
        background-color: var(--peach-2);
        padding-left: 0.75rem;

        .issueTitle {
            color: var(--rust);
        }
    }

    .issueSection {
        margin-bottom: 3rem;
    }

    .issueSection:last-child {
        margin-bottom: 0;
    }

    .issueSectionHeader {
        display: grid;
        grid-template-columns: 4rem 1fr auto;
        align-items: baseline;
        gap: 1.5rem;
        padding: 1.25rem 0;
        margin-bottom: 1.5rem;
        border-top: 3px solid var(--ink);
        cursor: pointer;
        transition: padding-left 0.15s;

        .issueSectionNum {
            font-family: var(--font-mono);
            font-size: var(--step--1);
            color: var(--ink-3);
        }

        .issueSectionTitle {
            font-family: var(--font-display);
            font-style: italic;
            font-size: var(--step-2);
            font-weight: 300;
            transition: color 0.15s;
        }

        .issueSectionDate {
            font-family: var(--font-mono);
            font-size: var(--step--2);
            color: var(--ink-3);
        }
    }

    .issueSectionHeader:hover {
        padding-left: 0.75rem;

        .issueSectionTitle {
            color: var(--rust);
        }
    }
}

@layer shelf {
    .shelfHeader {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: baseline;
        gap: 1rem;
        padding: 3rem 2rem 1.5rem;
        border-bottom: var(--rule);
        h1 {
            font-size: var(--step-5);
        }
    }

    .shelfHeaderCount {
        font-family: var(--font-mono);
        font-size: var(--step--1);
        color: var(--ink-3);
    }
}

@layer viewer {
    .viewer {
        max-width: 72ch;
        margin: 0 auto;
        padding: 3rem 2rem;
    }
    .viewerBack {
        font-family: var(--font-mono);
        font-size: var(--step--1);
        text-transform: lowercase;
        background: transparent;
        border: none;
        cursor: pointer;
        color: var(--ink-3);
        padding: 0;
        margin-bottom: 3rem;
        transition: color 0.15s;
    }

    .viewerBack:hover {
        color: var(--rust);
    }

    .viewerBack::before {
        content: "← ";
    }

    .viewerHeader {
        border-bottom: var(--rule);
        padding-bottom: 2rem;
        margin-bottom: 2rem;
    }

    .viewerTitle {
        font-family: var(--font-mono);
        font-style: italic;
        font-weight: 300;
        font-size: var(--step-3);
        line-height: 1.1;
        margin-bottom: 1.5rem;
    }

    .viewerMeta {
        font-family: var(--font-mono);
        font-size: var(--step--1);
        color: var(--ink-3);
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .viewerContent {
        font-family: var(--font-sans);
        font-size: var(--step-0);
        line-height: 1.7;
    }
}

@layer zineShelf {
    #zineShelf {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 2rem;
        padding: 2px;
    }

    .zineCard {
        grid-column: span 4;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 2rem;
        background-color: var(--peach-2);
        cursor: pointer;
        transition:
            background-color 0.15s,
            box-shadow 0.15s;
        min-height: 280px;
        position: relative;

        .zineCorner {
            font-family: var(--font-mono);
            font-size: var(--step--2);
            color: var(--ink-3);
        }

        .zineTitle {
            font-family: var(--font-display);
            font-style: italic;
            font-weight: 300;
            font-size: var(--step-2);
            line-height: 1.15;
            transition: color 0.15s;
        }

        .zineMeta {
            display: flex;
            gap: 1rem;
            align-items: center;
            justify-content: space-between;
            font-family: var(--font-mono);
            font-size: var(--step--2);
            color: var(--ink-3);
            padding-top: 1rem;
            border-top: var(--rule-soft);
        }
    }

    .zineCard:hover {
        background-color: var(--peach);
        box-shadow: 8px 8px 0 var(--ink);
        z-index: 1;

        .zineTitle {
            color: var(--rust);
        }
    }

    .zineCard:nth-child(12n + 1) {
        grid-column: span 6;
        min-height: 360px;
    }
    .zineCard:nth-child(12n + 6) {
        grid-column: span 5;
    }
    .zineCard:nth-child(12n + 10) {
        grid-column: span 5;
    }

    @media (max-width: 900px) {
        .zineCard,
        .zineCard:nth-child(12n + 1),
        .zineCard:nth-child(12n + 6),
        .zineCard:nth-child(12n + 10) {
            grid-column: span 12;
        }
    }
}

@layer blog {
    #blogListing {
        padding: 0.2rem;
        border-top: var(--rule);
    }

    .blogEntry {
        display: grid;
        grid-template-columns: 6rem 1fr auto;
        align-items: center;
        border-bottom: var(--rule-soft);
        cursor: pointer;
        transition:
            padding-left 0.5s,
            background-color 0.15s;

        .blogNum {
            font-family: var(--font-mono);
            font-size: var(--step--1);
            color: var(--ink-3);
        }

        .blogTitle {
            font-family: var(--font-display);
            font-style: italic;
            font-size: var(--step-2);
            font-weight: 300;
            transition: color 0.15s;
        }

        .blogTitle:hover {
            color: var(--rust);
        }

        .blogDate {
            font-family: var(--font-mono);
            font-size: var(--step--2);
            color: var(--ink-4);
        }
    }

    .blogEntry:hover {
        background-color: var(--peach-2);
        padding-left: 0.75rem;
    }
}

@layer artifactBlock {
    .artifactBlock {
        border-top: var(--rule);
        padding: 2rem 0;
    }

    .artifactBlock:first-child {
        border-top: none;
        padding-top: 0;
    }

    .artifactTitle {
        font-family: var(--font-display);
        font-size: var(--step-2);
        font-weight: 500;
        margin-bottom: 1rem;
    }

    .artifactBody {
        font-family: var(--font-display);
    }
}

@layer renderer {
    .imageRenderer,
    .videoRenderer {
        max-width: 100%;
        width: 100%;
        height: auto;
        display: block;
        img,
        video {
            max-width: 100%;
            width: 100%;
            height: auto;
        }
    }

    .audioRenderer {
        max-width: 100%;
        width: 100%;
        display: block;
    }

    figcaption {
        font-family: var(--font-mono);
        font-size: var(--step--2);
        color: var(--ink-3);
        margin-top: 0.5rem;
    }
}

@layer provenance {
    .artifactProvenance {
        margin-top: 1, 5rem;
        padding-top: 1rem;
        border-top: var(--rule-soft);
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem 1rem;
        font-family: var(--font-mono);
        font-size: var(--step--2);
        color: var(--ink-3);
    }

    .provPill {
        background: var(--peach-2);
        color: var(--ink-2);
        padding: 0.25rem 0.5rem;
        border: var(--rule-soft);
    }

    .provPillVibe {
        background: var(--rust-light);
        color: var(--rust-deep);
    }

    .provLine a {
        color: var(--rust);
        text-decoration: underline;
    }

    .provLineLicence {
        color: var(--ink-3);
    }

    .provLineRemix {
        color: var(--font-mono);
    }
}

@layer noteBlock {
    .noteBlock {
        border-top: var(--rule);
        padding: 2rem 0;
    }

    .noteBlock:first-child {
        border-top: none;
        padding-top: 0;
    }

    .noteTitle {
        font-family: var(--font-display);
        font-size: var(--step-2);
    }

    .noteStatus {
        display: inline-block;
        font-family: var(--font-mono);
        font-size: var(--step--2);
        padding: 0.1rem 0.4rem;
        border: var(--rule-soft);
        margin-left: 0.5rem;
        vertical-align: middle;
    }

    .noteStatus-resolved {
        background: var(--peach-2);
    }

    .noteStatus-archived {
        color: var(--ink-3);
    }

    .noteMeta {
        font-family: var(--font-mono);
        font-size: var(--step--2);
        color: var(--ink-3);
    }

    .noteMeta-critical {
        color: var(--rust-deep);
    }

    .noteMeta-warning {
        color: var(--rust);
    }
}

@layer error {
    .error {
        border: 1px solid var(--rust);
        background-color: var(--rust-light);
        color: var(--rust-deep);
        font-family: var(--font-mono);
        font-size: var(--step-0);
        padding: 1.25rem 1.5rem;
        margin: 2rem;
    }
    /* htmx adds .htmx-request to the element making a request */
    /* use this to show a loading state */
    .htmx-indicator {
        opacity: 0;
        transition: opacity 200ms;
    }
    .htmx-request .htmx-indicator {
        opacity: 1;
    }

    /* ─────────────────────────────────────────
   FOCUS + ACCESSIBILITY
───────────────────────────────────────── */
    button:focus-visible,
    a:focus-visible,
    input:focus-visible,
    summary:focus-visible {
        outline: 2px solid var(--rust);
        outline-offset: 2px;
    }

    /* Skip link — see baseTop.ejs */
    .skip {
        position: absolute;
        top: -100%;
        left: 1rem;
        z-index: 200;
        font-family: var(--font-mono);
        font-size: var(--step--1);
        background: var(--ink);
        color: var(--cream);
        padding: 0.5rem 1rem;
        transition: top 0.1s;
    }

    .skip:focus {
        top: 1rem;
    }

    /* ─────────────────────────────────────────
   REDUCED MOTION
───────────────────────────────────────── */
    @media (prefers-reduced-motion: no-preference) {
        @keyframes rise {
            from {
                opacity: 0;
                transform: translateY(6px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .issue,
        .zineCard,
        .blogEntry {
            animation: rise 0.3s ease both;
            animation-delay: calc(var(--i, 0) * 0.04s);
        }
    }
}

/* ─────────────────────────────────────────
   MOBILE / SMALL SCREENS
   (declared last so it wins over earlier layers)
───────────────────────────────────────── */
@layer mobile {
    @media (max-width: 800px) {
        main {
            margin: 1.5rem 1rem 0;
        }

        /* masthead: tighter, links wrap instead of overflowing */
        .masthead {
            grid-template-columns: auto auto;
            grid-template-areas:
                "wordmark leave"
                "links links";
            gap: 0.5rem 1rem;
            padding: 0.75rem 1rem;

            .wordmark {
                grid-area: wordmark;
            }

            .links {
                grid-area: links;
                justify-content: flex-start;
                flex-wrap: wrap;
                gap: 0.75rem 1.25rem;
            }

            .leave {
                grid-area: leave;
                justify-self: end;
            }
        }

        /* pass gate: stack the two panels */
        .passGate {
            grid-template-columns: 1fr;
        }

        .passGateLeft {
            border-right: none;
            border-bottom: var(--rule);
            padding: 2rem 1.5rem;
            gap: 2rem;
        }

        .passGateRight {
            padding: 2rem 1.5rem;
        }

        /* hero: stack title over meta */
        .hero {
            grid-template-columns: 1fr;
            gap: 2rem;
            padding: 2rem 1rem;
        }

        /* newsletter index + blog listing: tighter gutter columns */
        #newsletterIndex {
            padding: 0 1rem;
        }

        .issue,
        .issueSectionHeader {
            grid-template-columns: 2.5rem 1fr auto;
            gap: 0.75rem;
        }

        .blogEntry {
            grid-template-columns: 2.5rem 1fr auto;
            gap: 0.75rem;
        }

        .issueTitle,
        .issueSectionTitle,
        .blogTitle {
            font-size: var(--step-1);
        }

        /* shelf */
        .shelfHeader {
            padding: 2rem 1rem 1rem;

            h1 {
                font-size: var(--step-4);
            }
        }

        #zineShelf {
            gap: 1rem;
        }

        .zineCard {
            min-height: 220px;
            padding: 1.5rem;
        }

        /* viewers */
        .viewer {
            padding: 2rem 1rem;
        }

        .viewerTitle {
            font-size: var(--step-2);
        }

        .error {
            margin: 1rem;
        }

        /* bigger tap targets */
        .masthead .links a,
        .viewerBack,
        .leave button {
            padding: 0.25rem 0;
        }
    }
}