/* ===========================================================
   March 11th Archive · L & F
   Editorial · Restraint · Whitespace as language
   =========================================================== */

:root {
    --ink: #1a1a1a;
    --cream: #f9f9f9;
    --mute: #8a8580;
    --champagne: #b8946a;
    --line: rgba(26, 26, 26, 0.12);
    --line-strong: rgba(26, 26, 26, 0.28);
}

* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 300;
    background: var(--cream);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* paper grain — very subtle, only visible on close inspection */
body::before {
    content: "";
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 100;
    opacity: 0.025;
    mix-blend-mode: multiply;
    background-image:
        radial-gradient(circle at 25% 25%, #000 0, transparent 1px),
        radial-gradient(circle at 75% 75%, #000 0, transparent 1px);
    background-size: 3px 3px, 5px 5px;
}

::selection { background: var(--ink); color: var(--cream); }

/* ===== Hairlines (signature element) ===== */
.hairline-h {
    height: 1px;
    background: var(--line-strong);
}
.hairline-v {
    width: 1px;
    background: var(--line-strong);
}

/* ===== Top bar tweaks ===== */
.masthead-num {
    color: var(--ink);
}
.scroll-arrow {
    width: 26px; height: 1px;
    background: currentColor;
    position: relative;
    transition: width .4s ease;
}
.scroll-arrow::after {
    content: ""; position: absolute; right: 0; top: -3px;
    width: 7px; height: 7px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: rotate(45deg);
}
a:hover .scroll-arrow { width: 40px; }

/* ===== Hero typographic detail ===== */
.hero-h .line {
    overflow: hidden;
}
.hero-h .line > .word,
.hero-h .line {
    will-change: transform, opacity;
}

/* ===== Reveal helper ===== */
.reveal { opacity: 0; transform: translateY(28px); }

/* ===== Section h2 mask (filled by JS) ===== */
section h2.split-h2 {
    overflow: hidden;
    display: block;
    line-height: 1.02;
    padding-bottom: 0.06em;
}
section h2.split-h2 .h2-inner {
    display: inline-block;
    will-change: transform;
}

/* ===========================================================
   FRAGMENTS — magazine collage (asymmetric grid)
   =========================================================== */

.collage {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}

@media (min-width: 768px) {
    .collage {
        grid-template-columns: repeat(12, 1fr);
        grid-auto-flow: dense;
        gap: 4rem 2.5rem;
    }
    .frag-1      { grid-column: 1 / span 5;  margin-top: 0; }
    .frag-text   { grid-column: 8 / span 4;  align-self: center; }
    .frag-3      { grid-column: 2 / span 4;  margin-top: 6rem; }
    .frag-4      { grid-column: 7 / span 5;  margin-top: -2rem; }
    .frag-5      { grid-column: 1 / span 4;  margin-top: 4rem; }
    .frag-text-r { grid-column: 6 / span 4;  align-self: end; padding-bottom: 2rem; }
    .frag-7      { grid-column: 10 / span 3; margin-top: -1rem; }
    .frag-8      { grid-column: 3 / span 4;  margin-top: 3rem; }
    .frag-9      { grid-column: 8 / span 4;  margin-top: 7rem; }
}

@media (min-width: 1280px) {
    .collage { gap: 5rem 3rem; }
}

.frag {
    will-change: transform;
}

.frame {
    width: 100%;
    overflow: hidden;
    position: relative;
    background: #ebe7e0;
    transition: transform 1.2s cubic-bezier(.2, .8, .2, 1);
}
.ratio-1-1  { aspect-ratio: 1 / 1; }
.ratio-3-4  { aspect-ratio: 3 / 4; }
.ratio-4-5  { aspect-ratio: 4 / 5; }

.frag .frame::after {
    content: "";
    position: absolute; inset: 0;
    background: rgba(26, 26, 26, 0);
    transition: background .6s ease;
}
.frag:hover .frame { transform: scale(1.015); }
.frag:hover .frame::after { background: rgba(26, 26, 26, 0.04); }

.frag figcaption {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1.25rem;
    align-items: baseline;
    font-family: 'Inter', sans-serif;
}
.frag figcaption .num {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 300;
    font-size: 0.95rem;
    color: var(--champagne);
    letter-spacing: 0;
    grid-row: 1 / span 2;
    align-self: center;
}
.frag figcaption .cn {
    font-family: 'Noto Serif SC', serif;
    font-weight: 300;
    font-size: 0.95rem;
    letter-spacing: 0.2em;
    color: var(--ink);
}
.frag figcaption em {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 300;
    font-size: 0.85rem;
    color: var(--mute);
    grid-column: 2;
}

/* ===== text fragments inside collage ===== */
.frag-text {
    padding: 1rem 0;
}
.frag-text p {
    color: var(--ink);
}

/* ===========================================================
   EDITORIAL FRAMES — pure CSS art (no photos needed)
   Each frame is a typographic/geometric composition
   =========================================================== */
.grad-1, .grad-2, .grad-3, .grad-4, .grad-5, .grad-6, .grad-7 {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

/* Frame 01 — Vertical hairline + date stamp */
.grad-1 {
    background: linear-gradient(180deg, #f9f9f9 0%, #ebe7e0 100%);
}
.grad-1::before {
    content: "03";
    position: absolute;
    top: 8%; left: 10%;
    font-family: 'Playfair Display', serif;
    font-size: clamp(6rem, 18vw, 14rem);
    font-weight: 200;
    line-height: 0.85;
    color: rgba(26, 26, 26, 0.08);
    letter-spacing: -0.04em;
}
.grad-1::after {
    content: "";
    position: absolute;
    left: 50%; top: 15%; bottom: 15%;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(184, 148, 106, 0.6) 30%, rgba(184, 148, 106, 0.6) 70%, transparent);
}

/* Frame 02 — Centered circle + cross */
.grad-2 {
    background: #1a1a1a;
}
.grad-2::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 40%; aspect-ratio: 1;
    border: 1px solid rgba(249, 249, 249, 0.25);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
.grad-2::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(184, 148, 106, 0.3) calc(50% - 0.5px), rgba(184, 148, 106, 0.3) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
        linear-gradient(0deg, transparent calc(50% - 0.5px), rgba(184, 148, 106, 0.3) calc(50% - 0.5px), rgba(184, 148, 106, 0.3) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}

/* Frame 03 — Diagonal slash + "11" */
.grad-3 {
    background: linear-gradient(135deg, #f9f9f9 0%, #e8e3da 100%);
}
.grad-3::before {
    content: "11";
    position: absolute;
    bottom: 12%; right: 10%;
    font-family: 'Playfair Display', serif;
    font-size: clamp(5rem, 16vw, 12rem);
    font-weight: 200;
    font-style: italic;
    color: rgba(184, 148, 106, 0.18);
    line-height: 0.85;
}
.grad-3::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(135deg, transparent 48%, rgba(26, 26, 26, 0.04) 49%, rgba(26, 26, 26, 0.04) 51%, transparent 52%);
}

/* Frame 04 — Horizontal thirds + dot */
.grad-4 {
    background: #1a1a1a;
}
.grad-4::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(0deg, transparent calc(33.33% - 0.5px), rgba(249, 249, 249, 0.12) calc(33.33% - 0.5px), rgba(249, 249, 249, 0.12) calc(33.33% + 0.5px), transparent calc(33.33% + 0.5px)),
        linear-gradient(0deg, transparent calc(66.66% - 0.5px), rgba(249, 249, 249, 0.12) calc(66.66% - 0.5px), rgba(249, 249, 249, 0.12) calc(66.66% + 0.5px), transparent calc(66.66% + 0.5px));
}
.grad-4::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 8px; height: 8px;
    background: rgba(184, 148, 106, 0.7);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* Frame 05 — Large "L" monogram */
.grad-5 {
    background: linear-gradient(180deg, #f9f9f9 0%, #f4f0ea 100%);
}
.grad-5::before {
    content: "L";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Playfair Display', serif;
    font-size: clamp(8rem, 22vw, 18rem);
    font-weight: 200;
    color: rgba(26, 26, 26, 0.06);
    line-height: 0.85;
}
.grad-5::after {
    content: "";
    position: absolute;
    left: 15%; right: 15%; top: 50%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(184, 148, 106, 0.4) 20%, rgba(184, 148, 106, 0.4) 80%, transparent);
}

/* Frame 06 — Corner brackets */
.grad-6 {
    background: #1a1a1a;
}
.grad-6::before {
    content: "";
    position: absolute;
    inset: 12%;
    border: 1px solid rgba(249, 249, 249, 0.15);
    clip-path: polygon(
        0 0, 0 20%, 1px 20%, 1px 1px, 20% 1px, 20% 0,
        80% 0, 80% 1px, calc(100% - 1px) 1px, calc(100% - 1px) 20%, 100% 20%, 100% 0,
        100% 80%, calc(100% - 1px) 80%, calc(100% - 1px) calc(100% - 1px), 80% calc(100% - 1px), 80% 100%,
        20% 100%, 20% calc(100% - 1px), 1px calc(100% - 1px), 1px 80%, 0 80%
    );
}
.grad-6::after {
    content: "F";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Playfair Display', serif;
    font-size: clamp(6rem, 18vw, 14rem);
    font-weight: 200;
    font-style: italic;
    color: rgba(184, 148, 106, 0.15);
    line-height: 0.85;
}

/* Frame 07 — Radial lines (sunburst) */
.grad-7 {
    background: linear-gradient(135deg, #f9f9f9 0%, #ebe7e0 100%);
    overflow: hidden;
}
.grad-7::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 200%; height: 200%;
    transform: translate(-50%, -50%);
    background:
        repeating-conic-gradient(
            from 0deg at 50% 50%,
            transparent 0deg,
            transparent 5deg,
            rgba(26, 26, 26, 0.03) 5deg,
            rgba(26, 26, 26, 0.03) 5.5deg
        );
}
.grad-7::after {
    content: "2024";
    position: absolute;
    bottom: 10%; right: 10%;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 300;
    letter-spacing: 0.3em;
    color: rgba(138, 133, 128, 0.6);
}

/* When you want to use real photos, replace any .grad-N with:
   .grad-1 { background-image: url('photos/01.jpg'); }
   and remove the ::before/::after rules for that frame.
*/

/* ===========================================================
   TICKING — pure numbers, no boxes
   =========================================================== */

.ticker { align-items: end; }

.t-cell {
    text-align: left;
    position: relative;
    padding-left: 0;
}
.t-cell + .t-cell { padding-left: 0; }

@media (min-width: 768px) {
    .t-cell + .t-cell {
        padding-left: 2.5rem;
    }
    .t-cell + .t-cell::before {
        content: "";
        position: absolute;
        left: 0; top: 14%; bottom: 14%;
        width: 1px;
        background: var(--line);
    }
}

.t-num {
    font-weight: 200;
    line-height: 0.9;
    font-size: clamp(3.5rem, 11vw, 9rem);
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}
.t-cell .t-num.italic { font-style: italic; font-weight: 300; }

.t-cap {
    margin-top: 0.85rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.66rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--mute);
}

/* tick flash on second change */
.t-num.tick {
    animation: tick-flash 0.5s ease;
}
@keyframes tick-flash {
    0%   { color: var(--champagne); }
    100% { color: inherit; }
}
#t-seconds.tick { animation: none; }

/* ===========================================================
   Footer / colophon
   =========================================================== */
footer code { font-family: ui-monospace, SFMono-Regular, monospace; }

/* ===========================================================
   Reduce motion
   =========================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    .reveal { opacity: 1; transform: none; }
}

/* ===========================================================
   Scrollbar (subtle, editorial)
   =========================================================== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(26, 26, 26, 0.18); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(26, 26, 26, 0.32); }

/* ===========================================================
   Print — because a real magazine prints
   =========================================================== */
@media print {
    body::before { display: none; }
    .frag { break-inside: avoid; }
}