/* 94.is */

:root {
    /* surfaces */
    --paper:        #f7f0e6;   /* page background, warm off-white */
    --paper-deep:   #efe6d7;   /* code blocks, subtle wells */
    --paper-rule:   #d9c9b3;   /* hairline borders */

    /* text */
    --ink:          #2a211c;   /* body text, warm near-black */
    --ink-soft:     #6e5f55;   /* meta, captions, muted nav */

    /* accent — dusty erythrosine */
    --rose:         #b94d6a;
    --rose-deep:    #93384f;   /* hover/active */
    --rose-tint:    rgba(185, 77, 106, 0.10);
    --rose-glow:    rgba(185, 77, 106, 0.28);

    /* type */
    --serif:        Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Times New Roman', serif;
    --mono:         'IBM Plex Mono', ui-monospace, 'SF Mono', SFMono-Regular,
    Menlo, Consolas, 'Liberation Mono', monospace;

    /* rhythm */
    --measure:      64ch;      /* ideal reading column */
}

/* ---- base ---------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
    background: var(--paper);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.7;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

/* ---- layout -------------------------------------------------------- */

main, .page {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 2.5rem 1.5rem 5rem;
}

@media (min-width: 720px) {
    main, .page { padding: 4rem 1.5rem 6rem; }
}

/* ---- site header / nav -------------------------------------------- */

.site-header {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 2rem 1.5rem 1.25rem;
    display: flex;
    align-items: baseline;
    gap: 1.5rem;
    border-bottom: 1px solid var(--paper-rule);

    .site-name {
        font-size: 1.2rem;
        font-weight: 500;
        letter-spacing: 0.01em;
        margin-right: auto;
        color: var(--ink);
        text-decoration: none;
        border-bottom: none;
    }

    nav { display: flex; gap: 1.25rem; }
    nav a {
        font-size: 0.95rem;
        color: var(--ink-soft);
        text-decoration: none;
        border-bottom: none;
        padding-bottom: 3px;
    }

    nav a:hover { color: var(--rose); background: transparent; }

    nav a[aria-current],
    nav a.current {
        color: var(--rose);
        border-bottom: 1.5px solid var(--rose);
    }
}



/* ---- typography ---------------------------------------------------- */

h1, h2, h3, h4 {
    font-family: var(--serif);
    font-weight: 500;
    color: var(--ink);
    line-height: 1.25;
    margin: 0 0 0.5rem;
}

h1 { font-size: 1.95rem; margin-top: 0.5rem; }
h2 { font-size: 1.35rem; margin: 2.25rem 0 0.75rem; }
h3 { font-size: 1.1rem;  margin: 1.75rem 0 0.5rem; }

p { margin: 0 0 1.1rem; }

em, i { font-style: italic; }
strong, b { font-weight: 500; }

hr {
    border: 0;
    border-top: 1px solid var(--paper-rule);
    margin: 2.5rem 0;
}

/* ---- meta / dates -------------------------------------------------- */

.meta, time, .date {
    color: var(--ink-soft);
    font-size: 0.9rem;
    font-style: italic;
    letter-spacing: 0.02em;
}

article > .meta:first-of-type { margin: 0 0 2rem; }

/* ---- links --------------------------------------------------------- */

a {
    color: var(--rose);
    text-decoration: none;
    border-bottom: 1px dotted var(--rose);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

a:hover {
    color: var(--rose-deep);
    border-bottom-color: var(--rose-deep);
    background: var(--rose-tint);
}

a:focus-visible {
    outline: 2px solid var(--rose);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ---- code ---------------------------------------------------------- */

code, kbd, samp {
    font-family: var(--mono);
    font-size: 0.875em;
}

:not(pre) > code {
    background: var(--rose-tint);
    color: var(--rose-deep);
    padding: 1px 5px;
    border-radius: 3px;
    white-space: nowrap;
}

pre {
    font-family: var(--mono);
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--ink);
    background: var(--paper-deep);
    border: 1px solid var(--paper-rule);
    border-left: 3px solid var(--rose);
    border-radius: 3px;
    padding: 0.95rem 1.1rem;
    margin: 0 0 1.4rem;
    overflow-x: auto;
}

pre code {
    background: none;
    color: inherit;
    padding: 0;
    white-space: pre;
}

/* ---- blockquote ---------------------------------------------------- */

blockquote {
    margin: 0 0 1.4rem;
    padding: 0.2rem 1.2rem;
    border-left: 3px solid var(--rose);
    color: var(--ink-soft);
    font-style: italic;
}

blockquote p:last-child { margin-bottom: 0; }

/* ---- lists --------------------------------------------------------- */

ul, ol { padding-left: 1.4rem; margin: 0 0 1.1rem; }
li { margin-bottom: 0.35rem; }
li::marker { color: var(--rose); }

/* ---- images & figures ---------------------------------------------- */

img, video {
    max-width: 100%;
    height: auto;
    border-radius: 2px;
}

figure { margin: 1.6rem 0; }
figcaption {
    font-size: 0.875rem;
    color: var(--ink-soft);
    font-style: italic;
    text-align: center;
    margin-top: 0.5rem;
}

/* ---- tables -------------------------------------------------------- */

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    margin: 0 0 1.4rem;

    th, td {
        text-align: left;
        padding: 0.5rem 0.75rem;
        border-bottom: 1px solid var(--paper-rule);
    }

    th { font-weight: 500; color: var(--ink); }
}


/* ---- articles listing ---------------------------------------------- */
/* Markup assumption: each entry is an <article> or .post-summary with
a heading link and a teaser paragraph. Adapt selectors to your theme. */

.post-list { list-style: none; padding: 0; margin: 0; }

.post-summary {
    padding: 1.6rem 0;
    border-bottom: 1px solid var(--paper-rule);

    &:last-child { border-bottom: none; }

    & .date {
        display: block;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        font-style: normal;
        margin-bottom: 0.35rem;
    }

    & h2,
    & .title {
        font-size: 1.3rem;
        margin: 0 0 0.5rem;
        line-height: 1.3;

        & {
            color: var(--ink);
            border-bottom: none;

            &:hover {
                color: var(--rose);
                background: transparent;
            }
        }
    }

    & .teaser,
    & p {
        margin: 0 0 0.6rem;
        color: var(--ink);
    }

    & .read-more {
        font-size: 0.9rem;
        font-style: italic;
    }
}


/* ---- home page ----------------------------------------------------- */

.home-intro { margin-bottom: 2.5rem; }

.social-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.social-links li {
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--paper-rule);
}

.social-links li:last-child { border-bottom: none; }

/* ---- footer -------------------------------------------------------- */

.site-footer {
    max-width: var(--measure);
    margin: 4rem auto 2rem;
    padding: 1.5rem 1.5rem 0;
    border-top: 1px solid var(--paper-rule);
    font-size: 0.85rem;
    color: var(--ink-soft);
    text-align: center;
}