/* ============================================================
   gabs.news -- a quarterly review
   Stylesheet: laid paper, lamp black, printer's red
   ============================================================ */

:root {
    /* Palette */
    --ink-lamp-black:    #1A1410;
    --paper-laid:        #F7F2EA;
    --red-printer:       #943030;
    --ink-graphite:      #2C1810;
    --foxed-edge:        #B8A898;
    --paper-endpaper:    #EDE6D8;
    --umber-shadow:      #3D2E22;
    --vellum:            #FFFCF5;
    --secondary-text:    #7A6B5E;

    /* Typography */
    --font-display:  "Cormorant", "Cormorant Garamond", "EB Garamond", Georgia, serif;
    --font-heading:  "Libre Baskerville", "Baskerville", Georgia, serif;
    --font-body:     "Crimson Pro", "Crimson Text", Georgia, serif;
    --font-margin:   "Spectral", Georgia, serif;

    /* Rhythm */
    --baseline: 1.625rem; /* 26px */

    /* Reveal */
    --reveal-duration: 1100ms;
    --reveal-easing:   cubic-bezier(0.22, 1, 0.36, 1);
    --reveal-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    background: var(--paper-laid);
    color: var(--ink-lamp-black);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: var(--baseline);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    overflow: hidden;
}

/* ============================================================
   Folio: the scrolling container
   ============================================================ */
.folio {
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.folio::-webkit-scrollbar { display: none; }

/* ============================================================
   Spread base
   ============================================================ */
.spread {
    height: 100vh;
    min-height: 600px;
    width: 100%;
    scroll-snap-align: start;
    position: relative;
    overflow: hidden;
    background: var(--paper-laid);
    /* Faint paper grain */
    background-image:
        radial-gradient(circle at 20% 30%, rgba(184,168,152,0.05) 0%, transparent 60%),
        radial-gradient(circle at 80% 70%, rgba(184,168,152,0.04) 0%, transparent 55%);
}

.grid {
    display: grid;
    grid-template-columns: repeat(14, 1fr);
    gap: 16px;
    padding: clamp(48px, 6vh, 96px) clamp(12px, 2vw, 32px);
    height: 100%;
    width: 100%;
    align-content: center;
    position: relative;
}

/* ============================================================
   Common typographic primitives
   ============================================================ */
.kicker {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 0.65rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ink-graphite);
    line-height: var(--baseline);
}

.byline,
.dateline {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ink-graphite);
    line-height: var(--baseline);
}

.dateline--secondary { color: var(--secondary-text); }

.section-heading {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(1.6rem, 3.5vw, 2.8rem);
    line-height: 1.15;
    color: var(--ink-lamp-black);
    margin-top: 0.15em;
}

.section-heading--small {
    font-size: clamp(1.2rem, 2.2vw, 1.7rem);
}

.body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(0.95rem, 1.6vw, 1.1rem);
    line-height: var(--baseline);
    color: var(--ink-lamp-black);
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    text-indent: 1.5em;
}

.body:first-child,
.body.has-dropcap {
    text-indent: 0;
}

.body--tight {
    line-height: 1.45;
    text-indent: 0;
    text-align: left;
    hyphens: none;
}

.dropcap {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--red-printer);
    float: left;
    font-size: 5em;
    line-height: 0.85;
    margin: 0.05em 0.12em -0.05em 0;
    shape-outside: margin-box;
}

.hairline {
    border: none;
    border-top: 0.5px solid var(--foxed-edge);
    height: 0;
    margin: 0.65rem 0;
    width: 38%;
}

/* ============================================================
   Slide-reveal animation system
   ============================================================ */
[data-reveal] {
    opacity: 0;
    transition:
        opacity var(--reveal-duration) var(--reveal-easing),
        transform var(--reveal-duration) var(--reveal-easing);
    will-change: opacity, transform;
}

[data-reveal="masthead"]   { transform: translateX(-80px); transition-duration: 1400ms; }
[data-reveal="dateline"]   { transform: translateY(20px); transition-delay: 700ms; }
[data-reveal="rule"]       { transform: scaleY(0); transform-origin: top; transition-delay: 1000ms; transition-duration: 800ms; }
[data-reveal="kicker"]     { transform: translateY(40px); transition-delay: 350ms; }
[data-reveal="headline"]   { transform: translateY(50px); transition-delay: 600ms; }
[data-reveal="byline"]     { transform: translateY(30px); transition-delay: 950ms; }

[data-reveal="head-kicker"] { transform: translateY(30px); }
[data-reveal="head-title"]  { transform: translateY(30px); transition-delay: 200ms; }
[data-reveal="col-left"]    { transform: translateY(40px); transition-delay: 300ms; }
[data-reveal="col-right"]   { transform: translateY(40px); transition-delay: 500ms; }
[data-reveal="rule-centre"] { transform: scaleY(0); transform-origin: top; transition-delay: 300ms; transition-duration: 900ms; }
[data-reveal="pullquote"]   { transform: translateY(20px); transition-delay: 1300ms; transition-duration: 1000ms; }

[data-reveal="plate"]          { transform: translateX(-100px); transition-duration: 1500ms; }
[data-reveal="caption-essay"]  { transform: translateX(60px); transition-delay: 400ms; }

[data-reveal="s4-kicker"]  { transform: translateY(30px); }
[data-reveal="s4-title"]   { transform: translateY(30px); transition-delay: 200ms; }
[data-reveal="primary"]    { transform: translateY(40px); transition-delay: 300ms; }
[data-reveal="shoulder"]   { transform: translateX(-60px); transition-delay: 500ms; }
[data-reveal="response"]   { transform: translateX(60px); transition-delay: 700ms; }

[data-reveal="colophon"]   { transform: translateY(30px); transition-duration: 2500ms; }
[data-reveal="fleuron"]    { transform: scale(0); transition-delay: 1000ms; transition-duration: 900ms; transition-timing-function: var(--reveal-overshoot); }

[data-revealed="true"] {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

/* ============================================================
   Spread 1 -- The Folio Title
   ============================================================ */
.spread-1__masthead-block {
    grid-column: 3 / span 4;
    align-self: end;
    padding-bottom: clamp(48px, 12vh, 140px);
    display: flex;
    flex-direction: column;
    gap: calc(var(--baseline) * 0.5);
}

.masthead {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(3.5rem, 11vw, 9rem);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-lamp-black);
    line-height: 0.95;
    margin-bottom: var(--baseline);
}

.spread-1__rule {
    grid-column: 7 / span 1;
    position: relative;
    height: 100%;
    display: flex;
    justify-content: center;
}

.vertical-rule {
    display: block;
    position: absolute;
    top: 15%;
    bottom: 15%;
    left: 50%;
    width: 0.75px;
    background: var(--ink-graphite);
    transition: background-color 500ms ease;
}

.vertical-rule.is-near {
    background: var(--red-printer);
}

.spread-1__headline-block {
    grid-column: 8 / span 5;
    align-self: end;
    padding-bottom: clamp(48px, 12vh, 140px);
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: calc(var(--baseline) * 0.5);
    align-items: flex-end;
}

.lead-headline {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2.2rem, 5.5vw, 4.5rem);
    line-height: 1.08;
    text-align: right;
    color: var(--ink-lamp-black);
    letter-spacing: -0.005em;
}

/* ============================================================
   Spread 2 -- The Long Read
   ============================================================ */
.spread--2 .grid {
    align-content: start;
    grid-template-rows: auto auto 1fr;
}

.spread-2__head {
    grid-column: 3 / span 10;
    grid-row: 1;
    margin-bottom: calc(var(--baseline) * 0.75);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.column {
    grid-row: 2 / span 2;
    align-self: start;
}

.column--left  { grid-column: 3 / span 5; padding-right: 0.5rem; }
.column--right { grid-column: 8 / span 5; padding-left: 0.5rem; }

.column .body + .body { margin-top: 0; }

.column-rule {
    background: var(--ink-graphite);
    width: 0.75px;
    transition: background-color 500ms ease;
}

.column-rule--centre {
    grid-column: 7 / span 2;
    grid-row: 2 / span 2;
    justify-self: center;
    height: 100%;
}

.column-rule.is-near {
    background: var(--red-printer);
}

.pullquote {
    grid-column: 4 / span 8;
    grid-row: 3;
    align-self: end;
    margin-top: calc(var(--baseline) * 1.5);
    margin-bottom: calc(var(--baseline) * 0.5);
    background: rgba(247, 242, 234, 0.92);
    padding: calc(var(--baseline) * 1.2) clamp(1rem, 3vw, 2.4rem);
    position: relative;
    z-index: 2;
    box-shadow: 0 0 0 0.5px var(--foxed-edge);
}

.pullquote::before,
.pullquote::after {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 7rem;
    line-height: 0.6;
    color: var(--red-printer);
    opacity: 0.15;
    position: absolute;
    pointer-events: none;
}

.pullquote::before {
    content: "\201C";
    top: 0.4rem;
    left: 0.6rem;
}

.pullquote::after {
    content: "\201D";
    bottom: -0.6rem;
    right: 0.6rem;
}

.pullquote__text {
    font-family: var(--font-heading);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(1.3rem, 2.8vw, 2.2rem);
    line-height: 1.3;
    color: var(--ink-lamp-black);
    text-align: center;
}

.pullquote__attribution {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    text-align: center;
    margin-top: var(--baseline);
    color: var(--ink-graphite);
}

/* ============================================================
   Spread 3 -- The Visual Argument
   ============================================================ */
.spread--3 .grid {
    align-content: stretch;
    grid-template-rows: auto 1fr auto;
}

.plate {
    grid-column: 1 / span 9;
    grid-row: 1 / span 3;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    margin-left: calc(-1 * clamp(12px, 2vw, 32px));
    position: relative;
}

.plate__image {
    flex: 1;
    position: relative;
    overflow: hidden;
    background-color: var(--ink-lamp-black);
    margin: clamp(48px, 8vh, 96px) 0;
}

.plate__photograph {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 70% 40%, rgba(255,252,245,0.85) 0%, rgba(184,168,152,0.4) 30%, rgba(26,20,16,0.95) 70%, var(--ink-lamp-black) 100%),
        linear-gradient(135deg, var(--umber-shadow) 0%, var(--ink-lamp-black) 100%);
    filter: grayscale(1) contrast(1.4) brightness(0.75);
}

.plate__photograph::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 75% 35%, rgba(255,252,245,0.5) 0%, transparent 25%),
        radial-gradient(ellipse 40% 80% at 20% 60%, rgba(61,46,34,0.7) 0%, transparent 60%),
        linear-gradient(180deg, transparent 30%, rgba(26,20,16,0.6) 100%);
}

.plate__photograph::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(90deg,
            transparent 0,
            transparent 8px,
            rgba(26,20,16,0.18) 8px,
            rgba(26,20,16,0.18) 9px,
            transparent 9px,
            transparent 24px),
        repeating-linear-gradient(0deg,
            transparent 0,
            transparent 14px,
            rgba(255,252,245,0.04) 14px,
            rgba(255,252,245,0.04) 16px);
    mix-blend-mode: multiply;
}

.plate__hatch {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(45deg,
            transparent 0,
            transparent 5px,
            rgba(26,20,16,0.06) 5px,
            rgba(26,20,16,0.06) 6px),
        repeating-linear-gradient(135deg,
            transparent 0,
            transparent 5px,
            rgba(26,20,16,0.06) 5px,
            rgba(26,20,16,0.06) 6px);
    mix-blend-mode: multiply;
    opacity: 0;
    transition: opacity 700ms var(--reveal-easing);
}

.plate__hatch.is-on { opacity: 1; }

.plate__caption {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 0.65rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ink-graphite);
    padding: 0 clamp(12px, 2vw, 32px);
    line-height: var(--baseline);
}

.caption-essay {
    grid-column: 10 / span 3;
    grid-row: 1 / span 3;
    align-self: center;
    padding-top: clamp(48px, 8vh, 96px);
    padding-bottom: clamp(48px, 8vh, 96px);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.caption-essay .body--tight + .body--tight {
    margin-top: 0;
}

/* ============================================================
   Spread 4 -- The Annotations
   ============================================================ */
.spread--4 .grid {
    align-content: start;
    grid-template-rows: auto 1fr;
}

.spread-4__head {
    grid-column: 3 / span 10;
    grid-row: 1;
    margin-bottom: calc(var(--baseline) * 0.75);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.shoulder-notes {
    grid-column: 3 / span 2;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: var(--baseline);
    padding-top: 0.5rem;
}

.primary-essay {
    grid-column: 5 / span 5;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 0.75rem;
    border-left: 0.5px solid var(--foxed-edge);
    border-right: 0.5px solid var(--foxed-edge);
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.response-notes {
    grid-column: 10 / span 3;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: var(--baseline);
    padding-top: 0.5rem;
}

.note {
    font-family: var(--font-margin);
    font-weight: 300;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--secondary-text);
    position: relative;
}

.note__label {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 0.6rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ink-graphite);
    margin-bottom: 0.25rem;
}

.note__text {
    font-family: var(--font-margin);
    font-weight: 400;
    color: var(--secondary-text);
}

.connectors {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.connector {
    stroke: var(--foxed-edge);
    stroke-width: 0.5;
    stroke-dasharray: 4 8;
    stroke-dashoffset: 200;
    fill: none;
    transition: stroke-dashoffset 800ms var(--reveal-easing);
}

.connector.is-drawn {
    stroke-dashoffset: 0;
}

/* ============================================================
   Spread 5 -- The Printer's Mark
   ============================================================ */
.spread--5 {
    background: var(--paper-endpaper);
}

.spread--5 .grid {
    align-content: center;
    justify-items: center;
}

.colophon {
    grid-column: 5 / span 6;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--baseline);
}

.colophon__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-lamp-black);
    margin: 0.25rem 0;
}

.colophon__line {
    font-family: var(--font-heading);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(0.85rem, 1.4vw, 1rem);
    line-height: 1.6;
    color: var(--ink-lamp-black);
    max-width: 36em;
}

.colophon__line--small {
    font-family: var(--font-margin);
    font-weight: 300;
    font-style: normal;
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--secondary-text);
}

.colophon__imprint {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 0.65rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--ink-graphite);
    margin-top: var(--baseline);
}

/* Fleuron ornament */
.fleuron {
    position: relative;
    width: 80px;
    height: 80px;
    margin: var(--baseline) 0;
    transform-origin: center;
}

.fleuron__petal,
.fleuron__centre {
    position: absolute;
    font-family: var(--font-display);
    color: var(--red-printer);
    opacity: 0.4;
    line-height: 1;
    width: 1em;
    text-align: center;
}

.fleuron__petal {
    font-size: 1.6rem;
    font-weight: 300;
    top: 50%;
    left: 50%;
    transform-origin: 0 0;
}

.fleuron__petal--n { transform: translate(-50%, -160%) rotate(0deg); }
.fleuron__petal--e { transform: translate(60%, -50%) rotate(90deg); }
.fleuron__petal--s { transform: translate(-50%, 60%) rotate(180deg); }
.fleuron__petal--w { transform: translate(-160%, -50%) rotate(270deg); }

.fleuron__centre {
    font-size: 2rem;
    font-weight: 700;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
}

/* ============================================================
   Responsive: below 768px
   ============================================================ */
@media (max-width: 768px) {
    .grid {
        gap: 8px;
        padding: clamp(32px, 5vh, 64px) 16px;
    }

    /* Spread 1 collapses to centred top-aligned masthead */
    .spread--1 .grid {
        grid-template-rows: auto auto auto auto;
        align-content: center;
    }

    .spread-1__masthead-block,
    .spread-1__headline-block {
        grid-column: 2 / span 12;
        align-self: center;
        padding-bottom: 0;
        text-align: center;
        align-items: center;
    }

    .spread-1__masthead-block { grid-row: 1; }
    .spread-1__rule {
        grid-column: 2 / span 12;
        grid-row: 2;
        justify-content: center;
        height: 80px;
    }
    .vertical-rule { top: 0; bottom: 0; }
    .spread-1__headline-block { grid-row: 3; text-align: center; }
    .lead-headline { text-align: center; }

    /* Spread 2 collapses to single column */
    .spread-2__head { grid-column: 2 / span 12; }
    .column--left,
    .column--right {
        grid-column: 2 / span 12;
        grid-row: auto;
        padding: 0;
    }
    .column-rule--centre { display: none; }
    .pullquote {
        grid-column: 2 / span 12;
        grid-row: auto;
        margin-top: var(--baseline);
    }

    /* Spread 3: photo full-width above caption */
    .spread--3 .grid {
        grid-template-rows: auto auto;
    }
    .plate {
        grid-column: 1 / span 14;
        grid-row: 1;
        margin-left: 0;
        height: 50vh;
    }
    .plate__image { margin: 0; }
    .caption-essay {
        grid-column: 2 / span 12;
        grid-row: 2;
        padding: var(--baseline) 0;
    }

    /* Spread 4: notes inline */
    .spread-4__head { grid-column: 2 / span 12; }
    .shoulder-notes,
    .primary-essay,
    .response-notes {
        grid-column: 2 / span 12;
        grid-row: auto;
        border: none;
        padding: 0;
    }
    .shoulder-notes,
    .response-notes {
        padding-left: 1.5em;
        border-left: 0.5px solid var(--foxed-edge);
    }
    .connectors { display: none; }

    /* Spread 5 */
    .colophon { grid-column: 2 / span 12; }
}