/* ==========================================================================
   Wine Storey — Ghost theme
   Ported from the static design prototype (Figma "Wine Storey", node 1:2).
   Fonts: Cera Pro (sans) + Franziska (serif).
   ========================================================================== */

/* --- Licensed fonts (the .otf files in assets/fonts) -------------------- */
@font-face {
    font-family: "Cera Pro";
    src: url("../fonts/Cera-Pro-Regular.otf") format("opentype");
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Cera Pro";
    src: url("../fonts/Cera-Pro-Bold.otf") format("opentype");
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Franziska";
    src: url("../fonts/Franziska-Book.otf") format("opentype");
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Franziska";
    src: url("../fonts/Franziska-BookItalic.otf") format("opentype");
    font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
    font-family: "Franziska";
    src: url("../fonts/Franziska-ExtraBold.otf") format("opentype");
    font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Franziska";
    src: url("../fonts/Franziska-ExtraBoldItalic.otf") format("opentype");
    font-weight: 800; font-style: italic; font-display: swap;
}

/* --- Tokens -------------------------------------------------------------- */
:root {
    /* Brand fonts by default; honor any heading/body font chosen in Ghost
       Admin (Design → Branding) as an override. */
    --font-sans: var(--gh-font-heading, "Cera Pro", "Helvetica Neue", Arial, sans-serif);
    --font-serif: var(--gh-font-body, "Franziska", Georgia, "Times New Roman", serif);

    --ink: #2e3b48;        /* masthead + headings */
    --body: #111111;       /* body copy */
    --accent: #c94343;     /* editorial red — titles, links */
    --muted: #d9d9d9;      /* list bullets */
    --rule-top: #cccccc;
    --rule-bottom: #333333;
    --rule-quote: #cccccc;

    --measure: 570px;      /* column width, from Figma */
    --block-gap: 38px;     /* spacing between content blocks */
}

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

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    margin: 0;
    background: #fff;
    color: var(--body);
    font-family: var(--font-serif);
    font-size: 18px;
    line-height: 1.5;
}

img { max-width: 100%; height: auto; display: block; }

.page {
    max-width: calc(var(--measure) + 48px);   /* 570px content + 24px gutters */
    margin: 0 auto;
    padding: 0 24px;
}

/* --- Decorative rules ---------------------------------------------------- */
.rule { border: 0; margin: 0; }

.rule--top {
    height: 10px;
    margin-top: 40px;
    background-image: repeating-linear-gradient(
        to right,
        var(--rule-top) 0, var(--rule-top) 1px,
        transparent 1px, transparent 2px
    );
}

.rule--bottom {
    height: 0;
    border-top: 1px dotted var(--rule-bottom);
}

/* --- Masthead ------------------------------------------------------------ */
.masthead { text-align: center; }

.eyebrow {
    margin: 64px 0 0;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 10px;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--body);
}

.wordmark {
    display: block;
    margin: 22px 0 0;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: clamp(40px, 9vw, 60px);
    line-height: 1;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
}

.emblem {
    margin: 26px auto 0;
    max-width: 100%;   /* corkscrew box spans the full column, per Figma */
}

.emblem img {
    margin: 0 auto;
    mix-blend-mode: multiply;
}

/* --- Article header ------------------------------------------------------ */
.article__header {
    text-align: center;
    margin-top: 22px;
}

.kicker {
    margin: 0;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #333;
}

.article__title {
    /* Symmetric space above and below the title (matches the Figma box) */
    margin: 48px 0;
    font-family: var(--font-serif);
    font-weight: 800;
    font-style: normal;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: -0.01em;
    color: var(--accent);
}

/* Linked titles in the feed inherit the red; darken on hover */
.article__title a {
    color: inherit;
    text-decoration: none;
}

.article__title a:hover { color: var(--ink); }

/* --- Prose --------------------------------------------------------------- */
.prose {
    margin-top: 0;   /* title's symmetric 48px bottom margin sets this gap */
    font-family: var(--font-serif);
    font-size: 18px;
    line-height: 24px;
    letter-spacing: -0.02em;
    color: var(--body);
}

.prose p {
    margin: 0 0 24px;
}

.prose p:last-child { margin-bottom: 0; }

/* Bold sans run-in that opens the article */
.runin {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 18.25px;   /* 0.25px larger than the 18px body */
    letter-spacing: -0.5px;
    color: var(--body);
}

/* Inline links — red + heavy, no underline */
.prose a {
    font-family: var(--font-serif);
    font-weight: 800;
    color: var(--accent);
    text-decoration: none;
}

.prose a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Blockquote — dotted vertical rule flush-left, text indented 28px */
.prose blockquote {
    margin: var(--block-gap) 0;
    padding-left: 28px;
    border-left: 1px dotted var(--rule-quote);
    font-style: normal;
    color: var(--body);
}

/* Bulleted list — 8px gray square bullets, tight indent, generous rhythm */
.prose ul {
    margin: var(--block-gap) 0;
    padding: 0;
    padding-left: 11px;     /* bullet sits 11px in from the column edge */
    list-style: none;
}

.prose li {
    position: relative;
    padding-left: 19px;     /* text sits 30px in from the column edge */
    line-height: 38px;
}

.prose li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;              /* vertically centered on the 38px line */
    width: 8px;
    height: 8px;
    background: var(--muted);
}

/* --- End mark — inline symbol closing the final paragraph ---------------- */
.endmark {
    white-space: nowrap;   /* keep the mark on the same line as the last word */
}

.endmark__icon {
    display: inline-block;
    width: 33px;
    height: auto;
    margin-left: 10px;
    fill: #b3b3b3;
    /* Seat the mark on the text baseline. */
    vertical-align: -0.05em;
}

/* --- Post feed (homepage & archives) ------------------------------------ */
.post-feed .article + .article {
    margin-top: 56px;
    padding-top: 56px;
    border-top: 1px dotted var(--rule-top);
}

/* --- Pagination ---------------------------------------------------------- */
.pagination {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    margin-top: 64px;
    font-family: var(--font-sans);
    font-size: 12px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.pagination a {
    color: var(--ink);
    text-decoration: none;
}

.pagination a:hover { color: var(--accent); }

.pagination__next { margin-left: auto; }   /* keep "next" right-aligned when alone */

/* --- Footer -------------------------------------------------------------- */
.footer {
    margin-top: 110px;
    padding-bottom: 80px;
}

.footer__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin-top: 34px;
}

.footer__text {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 14px;
    line-height: 18px;
    letter-spacing: -0.02em;
    color: var(--body);
}

.footer__text--left { text-align: left; }
.footer__text--right { text-align: right; }

.footer__brand {
    font-weight: 800;
    color: var(--accent);
    text-decoration: none;
}

/* --- Koenig content widths (editor wide/full cards) --------------------- */
.prose .kg-width-wide {
    position: relative;
    width: calc(100vw - 48px);
    max-width: 860px;
    margin-left: 50%;
    transform: translateX(-50%);
}

.prose .kg-width-full {
    position: relative;
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
}

.prose .kg-width-full img { width: 100%; }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 620px) {
    .page { padding: 0 18px; }
    .eyebrow { margin-top: 44px; }
    .emblem { max-width: 320px; }
}