@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&family=Cormorant+Upright:wght@300;400;500;600;700&display=swap');

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
/* ── CLIPPING ── */
.clipping {
    position: relative;
    width: 100%;
    max-width: 1000px;
    background: #f4edcf;
    box-shadow:
        2px 3px 0 rgba(0, 0, 0, 0.35),
        6px 10px 20px rgba(0, 0, 0, 0.5),
        0 0 60px rgba(0, 0, 0, 0.4);
    animation: settle 5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes settle {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Noise texture */
.clipping::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    opacity: 0.045;
    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.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Age / foxing */
.clipping::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 19;
    pointer-events: none;
    background:
        radial-gradient(ellipse 120px 120px at 0 0, rgba(150, 100, 20, 0.22) 0%, transparent 100%),
        radial-gradient(ellipse 100px 100px at 100% 0, rgba(130, 85, 15, 0.18) 0%, transparent 100%),
        radial-gradient(ellipse 140px 140px at 0 100%, rgba(160, 110, 30, 0.24) 0%, transparent 100%),
        radial-gradient(ellipse 120px 120px at 100% 100%, rgba(140, 90, 10, 0.26) 0%, transparent 100%),
        radial-gradient(ellipse at 55% 60%, rgba(180, 140, 60, 0.05) 0%, transparent 50%);
    mix-blend-mode: multiply;
}

.clipping-inner {
    padding: 30px 36px 24px;
    position: relative;
    z-index: 1;
}

/* Torn bottom */
.torn-bottom {
    height: 18px;
    position: relative;
    overflow: hidden;
}

.torn-bottom::before {
    content: '';
    display: block;
    height: 18px;
    background: #f4edcf;
    clip-path: polygon(0% 0%, 2% 60%, 4% 20%, 6% 80%, 8% 30%, 10% 70%, 12% 15%, 14% 65%,
            16% 40%, 18% 85%, 20% 25%, 22% 70%, 24% 45%, 26% 90%, 28% 30%,
            30% 75%, 32% 20%, 34% 60%, 36% 35%, 38% 80%, 40% 15%, 42% 55%,
            44% 30%, 46% 75%, 48% 20%, 50% 65%, 52% 40%, 54% 85%, 56% 25%,
            58% 70%, 60% 10%, 62% 60%, 64% 35%, 66% 80%, 68% 20%, 70% 65%,
            72% 30%, 74% 75%, 76% 15%, 78% 55%, 80% 40%, 82% 80%, 84% 25%,
            86% 70%, 88% 10%, 90% 60%, 92% 35%, 94% 75%, 96% 20%, 98% 65%, 100% 40%,
            100% 0%);
}

/* ── MASTHEAD ── */
.masthead-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 5px;
    border-bottom: 3px solid #0f0a04;
    margin-bottom: 3px;
}

.paper-motto {
    font-family: 'IM Fell English', serif;
    font-style: italic;
    font-size: 0.58rem;
    color: #3d2c10;
    line-height: 1.55;
    max-width: 130px;
}

.paper-name {
    font-family: 'UnifrakturMaguntia', cursive;
    font-size: 3rem;
    color: #0a0603;
    line-height: 1;
    text-align: center;
    flex: 1;
    padding: 0 12px;
}

.masthead-right {
    font-family: 'IM Fell English', serif;
    font-size: 0.58rem;
    color: #3d2c10;
    text-align: right;
    line-height: 1.6;
    max-width: 130px;
}

.masthead-rule-double {
    border: none;
    border-top: 3px double #0f0a04;
    margin-bottom: 6px;
}

.edition-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Old Standard TT', serif;
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    color: #3d2c10;
    border-bottom: 1px solid #8a7040;
    padding-bottom: 6px;
    margin-bottom: 10px;
}

.edition-bar .edition-price {
    font-weight: 700;
}

/* ── SECTION ── */
.section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'IM Fell English', serif;
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #2a1e08;
    margin-bottom: 9px;
}

.section-label::before,
.section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #2a1e08;
}

/* ── HEADLINE ── */
.headline {
    font-family: 'Old Standard TT', serif;
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.15;
    color: #0a0603;
    text-align: center;
    margin-bottom: 7px;
}

.headline-rule {
    border: none;
    border-top: 2px solid #0f0a04;
    margin-bottom: 5px;
}

.subheadline {
    font-family: 'IM Fell English', serif;
    font-style: italic;
    font-size: 0.9rem;
    line-height: 1.38;
    color: #2a1e08;
    text-align: center;
    margin-bottom: 7px;
}

.byline {
    font-family: 'Old Standard TT', serif;
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #5a4020;
    text-align: center;
    margin-bottom: 10px;
    border-top: 1px solid #8a7040;
    border-bottom: 1px solid #8a7040;
    padding: 4px 0;
}

/* ── COLUMNS ── */
.columns {
    column-count: 3;
    column-gap: 22px;
    column-rule: 1px solid #9a8050;
    font-size: 16px;
    line-height: 1.66;
    color: #180f04;
    text-align: justify;
    hyphens: auto;
}

.columns p {
    margin-bottom: 0.55em;
    font-family: "Cormorant Upright", sans-serif;
    font-weight: 600;
}

.columns p.drop-cap::first-letter {
    font-family: 'UnifrakturMaguntia', cursive;
    font-size: 3.4em;
    float: left;
    line-height: 0.76;
    margin: 0.06em 0.07em 0 0;
    color: #0a0603;
}

/* ── PHOTO ── */
.photo-block {
    break-inside: avoid;
    margin-bottom: 0.7em;
}

.photo-box {
    width: 100%;
    height: 100%;
    min-height: 115px;

    background:
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.04) 0, rgba(0, 0, 0, 0.04) 1px, transparent 1px, transparent 6px),
        repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.03) 0, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 6px),
        linear-gradient(135deg, #d8ceaa 0%, #c9bf9a 50%, #d2c8a4 100%);
    border: 1px solid #7a6530;
    display: flex;
    align-items: center;
    vertical-align: middle;
    justify-content: center;
    position: relative;
}

.photo-box-label {
    font-family: 'IM Fell English', serif;
    font-style: italic;
    font-size: 0.65rem;
    color: #6a5528;
}

.photo-box::before,
.photo-box::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border-color: #7a6530;
    border-style: solid;
}

.photo-box::before {
    top: 3px;
    left: 3px;
    border-width: 1px 0 0 1px;
}

.photo-box::after {
    bottom: 3px;
    right: 3px;
    border-width: 0 1px 1px 0;
}

.photo-caption {
    font-family: 'IM Fell English', serif;
    font-style: italic;
    font-size: 16px;
    color: #4a3818;
    margin-top: 3px;
    line-height: 1.35;
}

/* ── PULL QUOTE ── */
.pull-quote {
    break-inside: avoid;
    border-top: 2px solid #0f0a04;
    border-bottom: 2px solid #0f0a04;
    margin: 0.9em 0;
    padding: 7px 2px;
    font-family: 'Old Standard TT', serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.42;
    color: #000000;
    text-align: center;
    text-decoration: underline;
    transition: color .3s ease-in-out, box-shadow .3s ease-in-out, transform .3s ease-in-out, border-top .3s ease-in-out, border-bottom .3s ease-in-out;
}
.pull-quote:hover {
    box-shadow: inset 100% 0 0 0 red;
    color: #d3460e;
    transform: scale(1.05);
    border-top: 2px solid #d3460e;
    border-bottom: 2px solid #d3460e;
}

/* ── SMALL AD ── */
.ad-box {
    break-inside: avoid;
    border: 2px solid #0f0a04;
    margin-top: 0.8em;
    padding: 8px 10px;
    text-align: center;
}

.ad-box .ad-name {
    font-family: 'UnifrakturMaguntia', cursive;
    font-size: 18px;
    color: #0a0603;
    line-height: 1;
    margin-bottom: 3px;
}

.ad-box .ad-body {
    font-family: 'IM Fell English', serif;
    font-style: italic;
    font-size: 16px;
    line-height: 1.45;
    color: #2a1e08;
}

.ad-box .ad-rule {
    border: none;
    border-top: 1px solid #0f0a04;
    margin: 4px 0;
}

/* ── FOOTER ── */
.clipping-footer {
    border-top: 1px solid #8a7040;
    margin-top: 14px;
    padding-top: 5px;
    display: flex;
    justify-content: space-between;
    font-family: 'IM Fell English', serif;
    font-size: 0.56rem;
    color: #6a5030;
    font-style: italic;
}

@media (max-width: 560px) {
    .columns {
        column-count: 2;
    }

    .paper-name {
        font-size: 2rem;
    }

    .clipping-inner {
        padding: 22px 20px 16px;
    }
}