styles.css

@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap');

:root {
    --bg: #f4ecce;
    --fg: #1a0f04;
    --link: #1a0f04;
    --blockquote-border: #c8b070;
    --desk: #1a0e06;
    --line-h: 45px;
}

/* ═══════════════════════════════════════
   DESK — fills the entire viewport
═══════════════════════════════════════ */
html {
    min-height: 100vh;
    background: var(--desk);
    background-image:
        /* subtle wood grain — fine horizontal lines */
        repeating-linear-gradient(
            89deg,
            rgba(255,220,150,0.018) 0px, rgba(255,220,150,0.018) 1px,
            transparent 1px, transparent 160px
        ),
        repeating-linear-gradient(
            91.5deg,
            rgba(0,0,0,0.05) 0px, rgba(0,0,0,0.05) 1px,
            transparent 1px, transparent 210px
        ),
        repeating-linear-gradient(
            90.8deg,
            rgba(80,40,8,0.03) 0px, rgba(80,40,8,0.03) 1px,
            transparent 1px, transparent 95px
        );
    margin: 0;
    padding: 56px 32px;
    box-sizing: border-box;
    position: relative;
}


/* ═══════════════════════════════════════
   PAPER PAGE
═══════════════════════════════════════ */
body {
    max-width: 70ch;
    margin: 0 auto;
    padding: 4em 3.5em 6em 5em;
    line-height: 2;
    font-size: 1.4em;
    font-family: 'Kalam', 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', cursive;
    color: var(--fg);
    position: relative;
    z-index: 1; /* sits above desk pseudo-elements */

    background-color: var(--bg);
    background-image:
        /* 1. Coarse paper grain — gives cellulose fibre texture */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.52' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23g)' opacity='0.12'/%3E%3C/svg%3E"),
        /* 2. Fine grain — surface smoothness variation */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23f)' opacity='0.06'/%3E%3C/svg%3E"),
        /* 3. Binding shadow — left edge dark like a notebook spine */
        linear-gradient(to right,
            rgba(0,0,0,0.22) 0%,
            rgba(0,0,0,0.1) 52px,
            rgba(0,0,0,0.03) 100px,
            transparent 140px
        ),
        /* 4. Top edge shadow */
        linear-gradient(to bottom,
            rgba(0,0,0,0.1) 0%,
            rgba(0,0,0,0.03) 40px,
            transparent 70px
        ),
        /* 5. Right edge — slight curl shadow */
        linear-gradient(to left,
            rgba(0,0,0,0.07) 0%,
            transparent 40px
        ),
        /* 6. Bottom edge shadow */
        linear-gradient(to top,
            rgba(0,0,0,0.06) 0%,
            transparent 40px
        ),
        /* 7. Central light source — lamp or window from above */
        radial-gradient(ellipse 80% 60% at 48% 15%,
            rgba(255,252,240,0.45) 0%,
            transparent 100%
        ),
        /* 8. Top-left age darkening */
        radial-gradient(ellipse 55% 45% at 0% 0%,
            rgba(155,110,22,0.2) 0%,
            transparent 100%
        ),
        /* 9. Bottom-right age darkening */
        radial-gradient(ellipse 50% 42% at 100% 100%,
            rgba(135,90,14,0.16) 0%,
            transparent 100%
        ),
        /* 10. Age darkening — mid left (pages darken near binding) */
        radial-gradient(ellipse 30% 50% at 0% 55%,
            rgba(140,98,18,0.1) 0%,
            transparent 100%
        ),
        /* 11–15. Foxing spots — small brownish age spots scattered on old paper */
        radial-gradient(ellipse 14px 9px at 82% 31%,
            rgba(138,88,22,0.14) 0%, transparent 100%
        ),
        radial-gradient(ellipse 9px 12px at 21% 68%,
            rgba(148,92,18,0.12) 0%, transparent 100%
        ),
        radial-gradient(ellipse 11px 7px at 93% 54%,
            rgba(128,82,16,0.11) 0%, transparent 100%
        ),
        radial-gradient(ellipse 7px 10px at 48% 84%,
            rgba(142,90,20,0.13) 0%, transparent 100%
        ),
        radial-gradient(ellipse 16px 7px at 9% 22%,
            rgba(132,85,18,0.09) 0%, transparent 100%
        ),
        /* 16. Spine crease — subtle vertical shadow near binding */
        linear-gradient(to right,
            transparent 74px,
            rgba(0,0,0,0.045) 75px,
            rgba(255,255,255,0.07) 76px,
            transparent 78px
        ),
        /* 17. Horizontal page crease — like the page was once folded */
        linear-gradient(to bottom,
            transparent 46%,
            rgba(0,0,0,0.025) 47%,
            rgba(255,255,255,0.035) 48%,
            transparent 49%
        ),
        /* 18. Red margin line */
        linear-gradient(to right,
            transparent 3.2em,
            rgba(172,48,38,0.58) 3.2em,
            rgba(172,48,38,0.58) calc(3.2em + 1.5px),
            transparent calc(3.2em + 1.5px)
        ),
        /* 19. Ruled lines */
        repeating-linear-gradient(
            transparent,
            transparent calc(var(--line-h) - 1px),
            rgba(138,108,44,0.24) calc(var(--line-h) - 1px),
            rgba(138,108,44,0.24) var(--line-h)
        ),
        /* 20. Base paper colour — slight warm variation, not uniform */
        linear-gradient(148deg,
            #f6eecf 0%,
            #f4eccb 30%,
            #f2e8c4 60%,
            #f5eece 100%
        );

    background-size:
        400px 400px,  /* 1 grain coarse */
        200px 200px,  /* 2 grain fine */
        100% 100%,    /* 3 binding shadow */
        100% 100%,    /* 4 top edge */
        100% 100%,    /* 5 right edge */
        100% 100%,    /* 6 bottom edge */
        100% 100%,    /* 7 light source */
        100% 100%,    /* 8 top-left age */
        100% 100%,    /* 9 bottom-right age */
        100% 100%,    /* 10 mid-left age */
        100% 100%,    /* 11 foxing 1 */
        100% 100%,    /* 12 foxing 2 */
        100% 100%,    /* 13 foxing 3 */
        100% 100%,    /* 14 foxing 4 */
        100% 100%,    /* 15 foxing 5 */
        100% 100%,    /* 16 spine crease */
        100% 100%,    /* 17 horizontal crease */
        100% 100%,    /* 18 margin line */
        100% var(--line-h), /* 19 ruled lines */
        100% 100%;    /* 20 base colour */

    background-repeat:
        repeat, repeat,
        no-repeat, no-repeat, no-repeat, no-repeat,
        no-repeat, no-repeat, no-repeat, no-repeat,
        no-repeat, no-repeat, no-repeat, no-repeat, no-repeat,
        no-repeat, no-repeat, no-repeat,
        repeat,
        no-repeat;

    /* Ink bleeds slightly into paper fibres when writing */
    text-shadow:
        0 0 0.3px rgba(8,3,0,0.18),
        0.4px 0.3px 0px rgba(8,3,0,0.07);

    /* Page elevated off the desk — deep layered shadow */
    box-shadow:
        0 1px 2px rgba(0,0,0,0.18),
        0 3px 8px rgba(0,0,0,0.28),
        0 10px 28px rgba(0,0,0,0.32),
        0 28px 72px rgba(0,0,0,0.26),
        0 60px 120px rgba(0,0,0,0.16),
        -7px 0 20px rgba(0,0,0,0.2),
        7px 0 20px rgba(0,0,0,0.14),
        inset 5px 0 16px rgba(0,0,0,0.07); /* inner binding shadow */
}


/* ═══════════════════════════════════════
   STANDARD ELEMENTS
═══════════════════════════════════════ */
.blogtitle { font-size: 2em; font-weight: 700; }
.date { font-style: italic; font-size: 0.75em; }
a { color: var(--link); }
hr { margin: 8px 0 12px; border: none; border-top: 1.5px solid rgba(140, 100, 40, 0.38); }
blockquote {
    position: relative;
    padding: 1em 1.5em 1.2em 1.4em;
    margin: 2em 0.4em;
    font-style: italic;
    background: #ede8b4;
    color: rgba(26, 15, 4, 0.85);
    transform: rotate(1.5deg);
    box-shadow:
        2px 4px 14px rgba(80, 55, 8, 0.18),
        0 1px 4px rgba(80, 55, 8, 0.10);
    border-radius: 1px;
    transition: transform 0.25s ease;
}
blockquote:hover { transform: rotate(0deg); }
img {
    max-width: 100%;
    display: block;
    margin: 0;
    max-height: 72vh;
    border-radius: 2px;
    border: 7px solid #f9f3e2;
    box-shadow:
        2px 4px 14px rgba(55, 30, 5, 0.22),
        0 1px 3px rgba(55, 30, 5, 0.12);
    filter: sepia(0.22) saturate(0.9) contrast(0.96) brightness(1.02);
}

/*
  SCRAPBOOK TAPE CORNERS
  p:has(> img) targets the <p> wrapping standalone images.
  The paragraph becomes the photo frame; ::before/::after are tape strips
  placed at the top-left and bottom-right corners — just like a travel journal.
  translate(-50%,-50%) / translate(50%,50%) centres each strip exactly on its
  corner so the tape crosses it diagonally at 42°.
*/
p:has(> img) {
    position: relative;
    width: fit-content;
    margin: 2em auto;
    transform: rotate(-1.2deg);
    transition: transform 0.25s ease;
}
p:has(> img):hover { transform: rotate(0deg); }

p:has(> img)::before,
p:has(> img)::after {
    content: '';
    position: absolute;
    width: 85px;
    height: 22px;
    /* tape colour: warm amber, semi-transparent */
    background:
        repeating-linear-gradient(
            90deg,
            transparent 0, transparent 5px,
            rgba(255,255,255,0.11) 5px, rgba(255,255,255,0.11) 6px
        ),
        linear-gradient(
            rgba(238,210,120,0.70),
            rgba(230,200,108,0.70)
        );
    border-radius: 1px;
    box-shadow: 1px 1px 5px rgba(80,48,8,0.22);
    z-index: 2;
}
/* top-left corner */
p:has(> img)::before {
    top: 0; left: 0;
    transform: translate(-50%, -50%) rotate(-42deg);
}
/* bottom-right corner */
p:has(> img)::after {
    bottom: 0; right: 0;
    transform: translate(50%, 50%) rotate(-42deg);
}

/* ═══════════════════════════════════════
   MOBILE
═══════════════════════════════════════ */
@media (max-width: 768px) {
    :root { --line-h: 40px; }

    /* no dark desk on mobile — paper fills the screen */
    html {
        padding: 0;
        background: var(--bg);
        background-image: none;
    }

    body {
        font-size: 1.25em;
        /* left 3em kept for margin line; right/top/bottom tightened */
        padding: 1.6em 1.2em 3em 3em;
        box-shadow: none;
        min-height: 100vh;
        /* grain + margin line + ruled lines — keep the journal feel */
        background-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.52' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23g)' opacity='0.12'/%3E%3C/svg%3E"),
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23f)' opacity='0.06'/%3E%3C/svg%3E"),
            /* margin line moved inward to leave breathing room before text */
            linear-gradient(to right,
                transparent 2.2em,
                rgba(172,48,38,0.5) 2.2em,
                rgba(172,48,38,0.5) calc(2.2em + 1.5px),
                transparent calc(2.2em + 1.5px)
            ),
            repeating-linear-gradient(
                transparent,
                transparent calc(var(--line-h) - 1px),
                rgba(138,108,44,0.22) calc(var(--line-h) - 1px),
                rgba(138,108,44,0.22) var(--line-h)
            );
        background-size:
            400px 400px,
            200px 200px,
            100% 100%,
            100% var(--line-h);
        background-repeat: repeat, repeat, no-repeat, repeat;
    }

    /* headings */
    h1 { font-size: 1.2em; line-height: 1.5; margin-top: 2em; margin-bottom: 0.3em; }
    h2 { font-size: 1.25em; }
    h3 { font-size: 1.1em; }

    /* blockquote — flat on mobile to prevent overflow, compact padding */
    blockquote {
        transform: none;
        margin: 0.75em 0;
        padding: 0.5em 0.7em;
        font-size: 0.85em;
    }
    blockquote:hover { transform: none; }

    img {
        width: 100%;
        max-height: none;
        border-width: 5px;
    }

    p:has(> img) {
        transform: rotate(-0.8deg);
        margin: 1.2em auto;
    }

    .blogtitle { font-size: 1.7em; margin-top: 0.8em; }
    .site-footer { text-align: center; }
}