/* =====================================================
   lugubrious.dev — v2
   palette: honeyed, melancholy, street-style x classical
   ===================================================== */

:root {
    --honey-warm: #F2E8D5;
    --dark-honey: #5A4A35;
    --amber-glow: #D4A84B;
    --marble-vein: #9B8B7A;
    --cream-white: #FAF6F0;
    --street-charcoal: #2A2420;
    --blush-rose: #C4917A;

    --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
    --font-serif: "Libre Baskerville", "Georgia", serif;
    --font-mono: "Azeret Mono", "Space Mono", ui-monospace, monospace;

    --shadow-tile: 0 2px 12px rgba(42, 36, 32, 0.06);
    --shadow-deep: 0 6px 22px rgba(42, 36, 32, 0.08);

    --torn-bottom: polygon(
        0 0, 100% 0, 100% calc(100% - 8px),
        96% 100%, 92% calc(100% - 4px),
        87% 99%, 82% calc(100% - 6px),
        77% 100%, 72% calc(100% - 3px),
        66% 99%, 60% calc(100% - 7px),
        54% 100%, 48% calc(100% - 4px),
        42% 99%, 36% calc(100% - 6px),
        30% 100%, 24% calc(100% - 3px),
        18% 99%, 12% calc(100% - 7px),
        6% 100%, 0 calc(100% - 4px)
    );
}

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

html { scroll-behavior: smooth; }

body {
    background: var(--honey-warm);
    color: var(--dark-honey);
    font-family: var(--font-serif);
    font-size: clamp(15px, 1vw, 18px);
    line-height: 1.75;
    overflow-x: hidden;
    position: relative;
}

/* paper grain everywhere */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.35;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.29 0 0 0 0 0.21 0 0 0 0.16 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    mix-blend-mode: multiply;
}

.noise-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.page { position: relative; z-index: 2; }

/* =====================================================
   HERO
   ===================================================== */

.hero {
    position: relative;
    min-height: 100vh;
    width: 100%;
    background: var(--honey-warm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(24px, 4vw, 64px);
}

.hero__paper {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 30% 25%, rgba(212, 168, 75, 0.18), transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 80%, rgba(196, 145, 122, 0.12), transparent 70%);
    pointer-events: none;
}

.hero__title {
    position: relative;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(80px, 22vw, 360px);
    letter-spacing: -0.04em;
    line-height: 0.82;
    color: var(--street-charcoal);
    text-align: center;
    width: 100%;
    margin-top: 6vh;
    margin-bottom: 4vh;
    /* slight clipping at top/bottom */
    transform: translateY(-2vh);
    user-select: none;
}

.hero__letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(0);
    transition: opacity 1.2s ease-out;
    transition-delay: calc(var(--i) * 60ms);
}

.hero.is-loaded .hero__letter {
    opacity: 1;
}

/* alternate letters get a hairline different shade for handmade feel */
.hero__letter:nth-child(odd) { color: var(--street-charcoal); }
.hero__letter:nth-child(even) { color: var(--dark-honey); }
.hero__letter:nth-child(5n) { color: var(--amber-glow); }

.hero__meta {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 920px;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
    transition-delay: 1.8s;
}

.hero.is-loaded .hero__meta {
    opacity: 1;
    transform: translateY(0);
}

.hero__suffix {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(20px, 2vw, 28px);
    color: var(--amber-glow);
    letter-spacing: -0.01em;
}

.hero__divider {
    width: 38px;
    height: 1px;
    background: var(--marble-vein);
    opacity: 0.6;
}

.hero__tag {
    font-style: italic;
    font-size: clamp(14px, 1.05vw, 17px);
    color: var(--dark-honey);
    max-width: 540px;
    line-height: 1.6;
}

.hero__corner {
    position: absolute;
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--marble-vein);
    z-index: 3;
}

.hero__corner--tl { top: clamp(20px, 3vw, 36px); left: clamp(20px, 3vw, 36px); }
.hero__corner--tr { top: clamp(20px, 3vw, 36px); right: clamp(20px, 3vw, 36px); }
.hero__corner--br {
    bottom: clamp(20px, 3vw, 36px);
    right: clamp(20px, 3vw, 36px);
    color: var(--dark-honey);
}

.hero__label::before {
    content: "·· ";
    color: var(--amber-glow);
}

.hero__scroll {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    animation: drift 3.6s ease-in-out infinite;
}

@keyframes drift {
    0%, 100% { transform: translateY(0); opacity: 0.7; }
    50%      { transform: translateY(4px); opacity: 1; }
}

/* =====================================================
   INTERSTITIAL BANDS
   ===================================================== */

.band {
    position: relative;
    min-height: 80px;
    padding: 32px clamp(24px, 5vw, 80px);
    background: #E8DCC2;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.band--alt { background: #DFD0B0; }

.band--torn {
    clip-path: var(--torn-bottom);
}

.band__quote {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(16px, 1.5vw, 22px);
    color: var(--dark-honey);
    max-width: 880px;
    line-height: 1.5;
}

.band__cite {
    display: block;
    margin-top: 8px;
    font-family: var(--font-mono);
    font-style: normal;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--marble-vein);
}

/* =====================================================
   GRID
   ===================================================== */

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: clamp(24px, 5vw, 80px);
    grid-auto-flow: dense;
    grid-auto-rows: minmax(180px, auto);
}

.grid--lower { padding-top: 0; }

.tile--span1 { grid-row: span 1; }
.tile--span2 { grid-row: span 2; }
.tile--span3 { grid-row: span 3; }

/* =====================================================
   TILE — base
   ===================================================== */

.tile {
    position: relative;
    background: var(--cream-white);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: var(--shadow-tile);
    padding: clamp(20px, 2.4vw, 36px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 240px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out, box-shadow 0.4s ease-out;
}

.tile.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

.tile:hover {
    box-shadow: var(--shadow-deep);
}

.tile__head { display: flex; flex-direction: column; gap: 14px; }

.tile__tag {
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--amber-glow);
    font-weight: 500;
}
.tile__tag--light { color: var(--amber-glow); }

.tile__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(18px, 2vw, 28px);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--street-charcoal);
}

.tile__title--big {
    font-size: clamp(28px, 3vw, 44px);
    font-weight: 700;
    color: var(--cream-white);
    text-transform: lowercase;
    letter-spacing: -0.02em;
}

.tile__title--mid {
    font-size: clamp(20px, 1.5vw, 24px);
    line-height: 1.35;
    font-weight: 500;
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--dark-honey);
}

.tile__title--light { color: var(--cream-white); }

.tile__body {
    margin-top: 16px;
    color: var(--dark-honey);
    font-size: clamp(14px, 0.95vw, 16px);
    line-height: 1.7;
}

.tile__body--quote {
    font-style: italic;
    font-size: clamp(15px, 1vw, 17px);
    color: var(--marble-vein);
}

.tile__body--mini { font-size: 13px; line-height: 1.5; margin-top: 10px; }

.tile__body--light { color: rgba(250, 246, 240, 0.78); }

.tile__foot {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 24px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--marble-vein);
}

.tile__foot--light { color: rgba(250, 246, 240, 0.7); }

.tile__num { color: var(--marble-vein); }

.tile__cta {
    color: var(--amber-glow);
    font-weight: 500;
    cursor: pointer;
    transition: letter-spacing 0.3s ease;
}
.tile__cta--light { color: var(--amber-glow); }

.tile:hover .tile__cta { letter-spacing: 0.18em; }

.tile--blush {
    background: linear-gradient(150deg, #F0DDD2 0%, var(--cream-white) 70%);
}
.tile--blush .tile__title { color: var(--street-charcoal); }
.tile--blush .tile__tag { color: var(--blush-rose); }
.tile--blush .tile__cta { color: var(--blush-rose); }

.tile--charcoal {
    background: var(--street-charcoal);
    color: var(--cream-white);
}
.tile--charcoal::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.88 0 0 0 0 0.78 0 0 0 0.07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    mix-blend-mode: screen;
    pointer-events: none;
}

/* =====================================================
   MARBLE TILES
   ===================================================== */

.tile--marble {
    padding: 0;
    background: var(--marble-vein);
    color: var(--cream-white);
    min-height: 320px;
}

.tile__marble {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 30% 30%, rgba(255,255,255,0.45), transparent 65%),
        radial-gradient(ellipse 60% 80% at 80% 70%, rgba(155, 139, 122, 0.6), transparent 70%),
        repeating-linear-gradient(118deg,
            rgba(255,255,255,0.06) 0 2px,
            transparent 2px 18px,
            rgba(42, 36, 32, 0.08) 18px 19px,
            transparent 19px 60px),
        repeating-linear-gradient(38deg,
            rgba(255,255,255,0.03) 0 1px,
            transparent 1px 26px),
        linear-gradient(140deg, #BDB0A0 0%, #8A7868 50%, #6F5E50 100%);
    filter: contrast(1.08);
}

.tile__marble--rosette {
    background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.55) 0%, transparent 18%),
        radial-gradient(circle at 50% 50%, transparent 22%, rgba(42, 36, 32, 0.12) 23%, transparent 26%),
        radial-gradient(circle at 50% 50%, transparent 38%, rgba(42, 36, 32, 0.16) 39%, transparent 42%),
        radial-gradient(circle at 50% 50%, transparent 56%, rgba(255,255,255,0.35) 57%, transparent 60%),
        conic-gradient(from 0deg at 50% 50%,
            #C8BBAB 0deg, #A9998A 30deg,
            #C8BBAB 60deg, #A9998A 90deg,
            #C8BBAB 120deg, #A9998A 150deg,
            #C8BBAB 180deg, #A9998A 210deg,
            #C8BBAB 240deg, #A9998A 270deg,
            #C8BBAB 300deg, #A9998A 330deg, #C8BBAB 360deg);
}

.tile__marble--vein {
    background:
        repeating-linear-gradient(72deg,
            transparent 0 12px,
            rgba(42, 36, 32, 0.18) 12px 13px,
            transparent 13px 30px),
        repeating-linear-gradient(108deg,
            transparent 0 22px,
            rgba(42, 36, 32, 0.10) 22px 23px,
            transparent 23px 60px),
        linear-gradient(160deg, #D8C9B6 0%, #B6A696 60%, #8E7E6E 100%);
}

.tile__overlay {
    position: relative;
    z-index: 2;
    padding: clamp(20px, 2.4vw, 36px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.tile__overlay--corner {
    align-items: flex-end;
    justify-content: flex-end;
}

.tile__stencil {
    font-family: var(--font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 12px;
    color: var(--cream-white);
    background: var(--street-charcoal);
    padding: 4px 10px;
    align-self: flex-start;
    transform: rotate(-1.2deg);
    box-shadow: 2px 2px 0 rgba(42, 36, 32, 0.18);
}

.tile__stencil--small { font-size: 10px; padding: 3px 8px; }
.tile__stencil--bold {
    background: var(--amber-glow);
    color: var(--street-charcoal);
    align-self: flex-end;
    margin: 14px;
    transform: rotate(2deg);
}

/* =====================================================
   MEDIA / MIXED-MEDIA TILES
   ===================================================== */

.tile--media {
    padding: 0;
    background: var(--cream-white);
}

.tile__photo {
    position: relative;
    width: 100%;
    flex: 1;
    min-height: 180px;
    overflow: hidden;
    filter: sepia(20%) saturate(90%) brightness(105%);
}

.tile__photo--wide { min-height: 220px; }

.tile__photo-fill {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--blush-rose), var(--amber-glow));
    mix-blend-mode: multiply;
}

.tile__photo-fill[data-hue="1"] {
    background:
        radial-gradient(circle at 30% 40%, rgba(212, 168, 75, 0.55), transparent 60%),
        radial-gradient(circle at 70% 70%, rgba(196, 145, 122, 0.55), transparent 60%),
        linear-gradient(135deg, #8A6F4E 0%, #C4917A 50%, #D4A84B 100%);
}

.tile__photo-fill[data-hue="2"] {
    background:
        radial-gradient(circle at 50% 30%, rgba(250, 246, 240, 0.5), transparent 55%),
        linear-gradient(160deg, #6F5E50 0%, #9B8B7A 60%, #C4917A 100%);
}

.tile__photo-fill[data-hue="3"] {
    background:
        radial-gradient(circle at 20% 80%, rgba(212, 168, 75, 0.6), transparent 65%),
        radial-gradient(circle at 80% 30%, rgba(42, 36, 32, 0.45), transparent 60%),
        linear-gradient(125deg, #C4917A 0%, #5A4A35 100%);
}

.tile__photo-label {
    position: absolute;
    top: 14px;
    left: 14px;
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--cream-white);
    background: rgba(42, 36, 32, 0.78);
    padding: 4px 8px;
    z-index: 2;
}

.tile__torn {
    background: var(--cream-white);
    padding: clamp(18px, 2vw, 28px);
    clip-path: polygon(
        0 6px, 6% 0, 14% 8px, 22% 0, 32% 6px,
        42% 0, 52% 7px, 62% 0, 72% 6px,
        82% 0, 92% 7px, 100% 0,
        100% 100%, 0 100%
    );
    margin-top: -6px;
    position: relative;
    z-index: 2;
}

.tile__torn--alt { background: #F4ECDA; }

.tile__torn .tile__title {
    font-size: clamp(18px, 1.6vw, 22px);
}

.tile--media .tile__foot {
    padding: 0 clamp(18px, 2vw, 28px) clamp(18px, 2vw, 24px);
    margin-top: 0;
}

/* =====================================================
   FOOTER / SIGNOFF
   ===================================================== */

.signoff {
    position: relative;
    background: var(--street-charcoal);
    color: var(--cream-white);
    padding: clamp(60px, 9vw, 140px) clamp(24px, 5vw, 80px);
    text-align: center;
    overflow: hidden;
    clip-path: polygon(
        0 12px, 5% 0, 12% 14px, 20% 0, 28% 12px,
        38% 0, 48% 16px, 58% 0, 68% 14px,
        78% 0, 88% 12px, 96% 0, 100% 14px,
        100% 100%, 0 100%
    );
}

.signoff__paper {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.88 0 0 0 0 0.78 0 0 0 0.10 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    opacity: 0.6;
    mix-blend-mode: screen;
}

.signoff__mark {
    position: relative;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(40px, 9vw, 140px);
    letter-spacing: -0.04em;
    line-height: 0.9;
    color: var(--cream-white);
    transform: rotate(-1.4deg);
    margin-bottom: 28px;
    /* marker-style: very slight blur + drop-shadow imitates marker bleed */
    text-shadow:
        0 0 1px rgba(212, 168, 75, 0.6),
        2px 2px 0 rgba(212, 168, 75, 0.18);
}

.signoff__dot { color: var(--amber-glow); }
.signoff__tld { color: var(--amber-glow); }

.signoff__row {
    position: relative;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(250, 246, 240, 0.7);
}

.signoff__bullet { color: var(--amber-glow); font-size: 8px; }

/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 980px) {
    .grid { grid-template-columns: repeat(2, 1fr); }
    .tile--span2 { grid-column: span 2; grid-row: span 1; }
    .tile--marble { min-height: 260px; }
}

@media (max-width: 620px) {
    .grid { grid-template-columns: 1fr; gap: 12px; padding: 24px; }
    .tile--span1, .tile--span2, .tile--span3 { grid-column: span 1; grid-row: span 1; }
    .hero__corner--tr { display: none; }
    .hero__title { font-size: clamp(64px, 28vw, 200px); }
    .signoff__mark { font-size: clamp(40px, 16vw, 80px); }
}