/* ════════════════════════════════════════════════════════
 W RITI*NG ARTICLE PAGE — The Commonplace
 ════════════════════════════════════════════════════════ */

main {
    max-width: 780px !important;
    padding-bottom: 80px !important;
}

/* ── Tokens ──────────────────────────────────────────── */
.writing-page {
    font-family: var(--font-article-body-base);
    color: var(--color-article-body-base-text);
    max-width: 780px;
    margin: 0 auto;
    padding: 0 24px 60px;
}

:root {

    /* ════════════════════════════════════════════════════════════════
     *   COLORS
     *   ════════════════════════════════════════════════════════════════ */

    /* ── Article container base ── */
    --color-article-body-base-text:   var(--ink);  /* default text color inherited by everything inside .writing-page */

    /* ── Masthead frame ── */
    --color-masthead-border-top:      var(--ink);  /* 4px heavy rule across the very top of the masthead */
    --color-masthead-border-bottom:   var(--rule); /* 1px rule under the masthead */
    --color-masthead-rule-upper:      var(--rule); /* decorative ::before line, just under the border-bottom */
    --color-masthead-rule-lower:      var(--rule); /* decorative ::after line, below the upper rule */

    /* ── Type badge + meta row (Feature / Dispatch / Digest, date, read time) ── */
    --color-badge-feature-text:       var(--ink);  /* "Feature" badge text */
    --color-badge-dispatch-text:      var(--mid);  /* "Dispatch" badge text */
    --color-badge-digest-text:        var(--mid);  /* "Digest" badge text */
    --color-meta-separator:           var(--rule); /* vertical divider bar between badge / date / read-time */
    --color-datestamp-text:           var(--mid);  /* small-caps date shown in the meta row */
    --color-readtime-text:            var(--mid);  /* italic "N min read" text in the meta row */

    /* ── Title ── */
    --color-title-text:               var(--ink);  /* main article headline (h1) */

    /* ── Byline row ── */
    --color-byline-border:            var(--faint); /* thin top rule separating title from the byline row */
    --color-author-text:              var(--deep);  /* author name */
    --color-byline-date-text:         var(--mid);   /* date repeated on the right side of the byline */

    /* ── Rules / dividers ── */
    --color-double-rule:              var(--rule); /* <hr> double rule between masthead and article body */
    --color-footer-border:            var(--rule); /* double rule across the top of the footer — same value as --color-double-rule, separate instance */

    /* ── Body copy ── */
    --color-body-text:                var(--ink);  /* main paragraph text color */
    --color-drop-cap-text:            var(--ink);  /* oversized first letter of the article */

    /* ── In-body headings ── */
    --color-section-heading-text:     var(--mid);   /* h2 section headings within the article body */
    --color-section-heading-border:   var(--faint); /* underline beneath h2 headings */
    --color-subheading-text:          var(--deep);  /* h3 subheadings within the article body */

    /* ── Blockquotes ── */
    --color-blockquote-border:        var(--rule); /* left border accent on blockquotes */
    --color-blockquote-text:          var(--mid);  /* blockquote text color */

    /* ── In-body links ── */
    --color-link-text:                var(--deep); /* default link color within article prose */
    --color-link-text-hover:          var(--rule); /* link color on hover */

    /* ── Footer ── */
    --color-footer-ornament-text:     var(--rule); /* "· ✦ · ✦ · ✦ ·" ornament above the back link */
    --color-back-link-text:           var(--deep); /* "← Return to the Commonplace" link, default state */
    --color-back-link-text-hover:     #8b5e10; /* back link color on hover */


    /* ════════════════════════════════════════════════════════════════
     *   FONTS
     *   ════════════════════════════════════════════════════════════════ */

    --font-article-body-base:   var(--f-body); /* base font-family set on .writing-page itself (inherited unless overridden) */
    --font-badge:                'goldentype-sc-original'; /* Feature / Dispatch / Digest badge */
    --font-datestamp:            var(--f-head); /* date shown in the meta row */
    --font-readtime:             var(--f-ital); /* "N min read" text */
    --font-title:                'globe'; /* main article headline (h1) */
    --font-author:                'lamar-pen'; /* author name in the byline */
    --font-byline-date:          'silentina-film'; /* date repeated in the byline */
    --font-body-text:            'century731'; /* main paragraph text */
    --font-drop-cap:             'thalia', serif; /* oversized first letter — NOT a token reference; only spot in the file using a raw, un-tokenized font stack */
    --font-section-heading:      var(--f-head); /* h2 section headings */
    --font-subheading:           var(--f-disp); /* h3 subheadings */
    --font-blockquote:           var(--f-ital); /* blockquote text */
    --font-back-link:            'clarendon'; /* "← Return to the Commonplace" link */

}


/* ════════════════════════════════════════════════════════
 M ASTH*EAD
 ════════════════════════════════════════════════════════ */

.wrt-masthead {
    text-align: center;
    padding: 0.25rem 0 1.6rem;
    border-top: 4px solid var(--color-masthead-border-top);
    border-bottom: 1px solid var(--color-masthead-border-bottom);
    margin-bottom: 0;
    position: relative;
}

.wrt-masthead::before {
    content: '';
    display: block;
    height: 1px;
    background: var(--color-masthead-rule-upper);
    margin: 5px auto 12px;
    width: 70%;
}
.wrt-masthead::after {
    content: '';
    display: block;
    height: 1px;
    background: var(--color-masthead-rule-lower);
    margin: 6px auto 0;
    width: 50%;
}

/* Type badge + meta row */
.wrt-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}
.wrt-badge {
    font-family: var(--font-badge);
    font-size: 0.75rem;
    letter-spacing: 0.44em;
    text-transform: lowercase;
    white-space: nowrap;
    line-height: 1;
}
.wrt-badge--feature  { background: none; color: var(--color-badge-feature-text); padding: 3px 7px; opacity: 0.88; }
.wrt-badge--dispatch { color: var(--color-badge-dispatch-text); padding: 3px 7px; opacity: 0.7; }
.wrt-badge--digest   { color: var(--color-badge-digest-text); opacity: 0.7; }

/* Title */
.wrt-title {
    font-family: var(--font-title);
    font-size: clamp(1.9rem, 4.5vw, 3.2rem);
    font-weight: normal;
    line-height: 1.0;
    letter-spacing: 0.02em;
    color: var(--color-title-text);
    margin: 0 0 0.8rem;
    text-transform: uppercase;
}

/* Author / date row */
.wrt-byline {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 0.9rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--color-byline-border);
}
.wrt-author {
    font-family: var(--font-author);
    font-weight: 300;
    font-size: 1.25rem;
    color: var(--color-author-text);
}
.wrt-date {
    font-family: var(--font-byline-date);
    font-size: 1.25rem;
    color: var(--color-byline-date-text);
    opacity: 0.8;
}

/* ════════════════════════════════════════════════════════
 A RTIC*LE BODY
 ════════════════════════════════════════════════════════ */

.wrt-double-rule {
    border: none;
    border-top: 3px double var(--color-double-rule);
    margin: 0;
}

.wrt-body {
    padding: 2.2rem 0 0;
}

.wrt-text {
    font-family: var(--font-body-text);
    font-size: 1.12rem;
    line-height: 1.4em;
    text-align: justify;
    color: var(--color-body-text);
}

/* Drop cap */
.wrt-text::first-letter {
    float: left;
    font-family: var(--font-drop-cap);
    font-size: 4.2rem;
    line-height: 0.8;
    padding: 4px 8px 0 3px;
    color: var(--color-drop-cap-text);
    font-weight: normal;
}

.wrt-text p {
    margin-top: 0;
    margin-bottom: 1.55rem;
    text-indent: 1.5em;
}

.wrt-text p:first-of-type {
    text-indent: 0;
}

.wrt-text h2 {
    font-family: var(--font-section-heading);
    font-size: 0.58rem;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--color-section-heading-text);
    margin: 2.4rem 0 1rem;
    border-bottom: 1px solid var(--color-section-heading-border);
    padding-bottom: 0.35rem;
}

.wrt-text h3 {
    font-family: var(--font-subheading);
    font-size: 1.25rem;
    font-weight: normal;
    color: var(--color-subheading-text);
    margin: 2rem 0 0.7rem;
}

.wrt-text blockquote {
    border-left: 3px solid var(--color-blockquote-border);
    margin: 1.8rem 0 1.8rem 1.2rem;
    padding: 0.2rem 0 0.2rem 1.4rem;
    font-family: var(--font-blockquote);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--color-blockquote-text);
    line-height: 1.65;
}

.wrt-text a {
    color: var(--color-link-text);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color .14s;
    background: none;
}
.wrt-text a:hover { color: var(--color-link-text-hover); background: none; }

/* ════════════════════════════════════════════════════════
 F OOTE*R — back link + ornament
 ════════════════════════════════════════════════════════ */

.wrt-footer {
    text-align: center;
    padding: 2rem 0 0;
    margin-top: 2rem;
    border-top: 3px double var(--color-footer-border);
}
.wrt-footer-ornament {
    font-size: 20px;
    color: var(--color-footer-ornament-text);
    display: block;
    margin: 0 0 1rem;
    letter-spacing: .35em;
}
.wrt-back-link {
    font-family: var(--font-back-link);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--color-back-link-text);
    text-decoration: none;
    border-bottom: none;
    background: none;
    transition: color .14s;
}
.wrt-back-link:hover { color: var(--color-back-link-text-hover); background: none; }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 640px) {
    .writing-page {
        padding: 0 12px 40px;
    }

    .wrt-meta {
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: center;
    }

    .wrt-meta-sep {
        display: none;
    }

    .wrt-title {
        font-size: 1.8rem;
        margin-bottom: 0.6rem;
    }

    .wrt-byline {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.4rem;
        margin-top: 0.6rem;
        padding-top: 0.6rem;
    }

    .wrt-author {
        font-size: 0.95rem;
    }

    .wrt-date {
        font-size: 0.8rem;
    }

    .wrt-body {
        padding: 1.5rem 0 0;
    }

    .wrt-text {
        text-align: justify;
        text-justify: inter-word;
        hyphens: auto;
        -webkit-hyphens: auto;
    }

    .wrt-text::first-letter {
        font-size: 3.5rem;
        padding: 2px 6px 0 2px;
    }

    .wrt-text h2 {
        margin: 1.8rem 0 0.8rem;
    }

    .wrt-text h3 {
        font-size: 1.15rem;
        margin: 1.5rem 0 0.5rem;
    }

    .wrt-text blockquote {
        margin: 1.2rem 0 1.2rem 0.6rem;
        padding: 0.1rem 0 0.1rem 0.8rem;
        font-size: 0.98rem;
        line-height: 1.55;
    }

    .wrt-footer {
        padding: 1.5rem 0 0;
        margin-top: 1.5rem;
    }
}