/* tylerfontaine.me: Fraunces + Figtree, Forest palette.
   Breakpoints: tablet under 1000px, phone under 640px. */

:root {
    --ground: #FBFCF8;
    --ink: #14201A;
    --muted: #56635B;
    --accent: #146C43;
    --accent-deep: #0C4A2D;
    --tint: #E6F0E6;
    --rule: #DDE4DA;
    --frame: #C4CEC0;
    --font-title: var(--gh-font-heading, Fraunces, Georgia, serif);
    --font-body: var(--gh-font-body, Figtree, system-ui, sans-serif);
    --gutter: 32px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--font-body);
    font-kerning: normal;
    text-rendering: optimizeLegibility;
}

a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-deep); }
img { max-width: 100%; }

h1, h2, .serif {
    font-family: var(--font-title);
    font-variation-settings: 'SOFT' 100;
    font-weight: 500;
}

.wrap { max-width: 1120px; margin-inline: auto; padding-inline: var(--gutter); }

/* Site header and footer */
.site-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-top: 24px; }
.brand { color: var(--ink); text-decoration: none; font-size: 22px; font-weight: 600; padding-block: 8px; }
.site-nav { display: flex; gap: 28px; font-size: 17px; }
.site-nav a { color: var(--ink); text-decoration: none; padding-block: 12px; }
.site-nav a:hover, .site-nav a[aria-current] { color: var(--accent); }
.site-nav a[aria-current] { font-weight: 600; }
.site-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 28px; border-top: 1px solid var(--rule); padding-block: 20px 36px; font-size: 15px; color: var(--muted); }
.site-foot nav { display: flex; gap: 24px; }
.site-foot a { color: var(--muted); padding-block: 12px; }

/* Page rhythm */
.page { padding-block: 72px 72px; }
.title { margin: 0 0 48px; max-width: 960px; font-size: clamp(42px, 30px + 3.2vw, 72px); line-height: 1.04; letter-spacing: -0.015em; text-wrap: balance; }
.kicker { margin: 0 0 12px; font-size: 16px; font-weight: 600; color: var(--accent); }
.intro { margin: -16px 0 64px; max-width: 680px; font-size: 22px; line-height: 1.4; color: var(--muted); }

/* The margin grid, for pages built from .row */
.row { display: grid; grid-template-columns: 200px minmax(0, 680px); column-gap: 48px; }
.row > .rail { grid-column: 1; }
.row > .main { grid-column: 2; }

/* The margin grid, for post content. Ghost outputs cards as flat siblings, so
   each one is placed on named lines: main by default, wide and full on request. */
.content {
    display: grid;
    grid-template-columns:
        [full-start] minmax(var(--gutter), 1fr)
        [wide-start rail-start] 200px [rail-end] 48px
        [main-start] minmax(0, 680px) [main-end]
        128px [wide-end]
        minmax(var(--gutter), 1fr) [full-end];
    font-size: 19px;
    line-height: 1.65;
}
.content > * { grid-column: main; min-width: 0; margin-block: 0 1.3em; margin-inline: 0; }

.meta { grid-column: rail !important; grid-row: 1; height: 0; margin: 0 !important; padding-top: 8px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.meta .date { color: var(--accent); font-weight: 600; }
.meta .tags { margin-top: 12px; }
.meta a { color: var(--muted); }

.rail-photo { grid-column: rail !important; grid-row: 1 / span 6; margin: 0 !important; }
.rail-photo img { display: block; width: 100%; height: auto; }

/* Reading text */
.lede, .content > p:first-of-type { font-size: 27px; line-height: 1.32; letter-spacing: -0.005em; margin-block: 0 32px; }
.lede { margin: 0 0 32px; }
.content > h2 { margin-block: 1.5em 0.55em; font-size: 36px; line-height: 1.14; letter-spacing: -0.01em; }
.content > h3 { margin-block: 1.5em 0.5em; font-size: 22px; line-height: 1.3; font-weight: 600; }
.content > h4 { margin-block: 1.5em 0.5em; font-size: 19px; line-height: 1.3; font-weight: 600; }
.content > ul { padding-left: 1.2em; }
.content > ul li::marker { color: var(--accent); }
.content li + li { margin-top: 0.3em; }
.content > ol { list-style: none; padding: 0; counter-reset: step; }
.content > ol > li { position: relative; margin: 0; padding: 11px 0 11px 44px; border-top: 1px solid var(--rule); counter-increment: step; }
.content > ol > li:last-child { border-bottom: 1px solid var(--rule); }
.content > ol > li::before { content: counter(step); position: absolute; left: 0; color: var(--accent); font-weight: 600; }
.content > blockquote { margin-block: 12px 40px; font-family: var(--font-title); font-variation-settings: 'SOFT' 100; font-size: 28px; line-height: 1.25; color: var(--accent); }
.content > blockquote.kg-blockquote-alt { grid-column: wide; max-width: 940px; margin-block: 48px 64px; font-size: clamp(30px, 4.4vw, 56px); line-height: 1.12; font-style: normal; font-weight: 500; letter-spacing: -0.01em; text-align: left; text-wrap: balance; color: var(--accent); padding: 0; }
.content > hr { width: 100%; height: 1px; margin-block: 32px 48px; border: 0; background: var(--rule); }
.content code { padding: 2px 5px; background: var(--tint); border-radius: 4px; font-size: 0.88em; }
.content pre { overflow-x: auto; padding: 18px 20px; background: var(--tint); border-radius: 4px; font-size: 15px; line-height: 1.5; }
.content pre code { padding: 0; background: none; font-size: inherit; }

/* Images. Normal cards keep their natural size up to the text width, and a tall
   image is capped so it doesn't take over the screen. Captions sit in the margin. */
.content figure { margin-inline: 0; }
.content img { display: block; height: auto; }
figcaption { font-size: 14px; line-height: 1.45; color: var(--muted); }

.content > .kg-image-card {
    grid-column: rail-start / main-end;
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    column-gap: 48px;
    margin-block: 32px 64px;
}
.kg-image-card > .kg-image, .kg-image-card > a { grid-column: 2; grid-row: 1; }
.kg-image-card > .kg-image, .kg-image-card > a > .kg-image { width: auto; max-width: 100%; max-height: min(85vh, 720px); }
.kg-image-card > figcaption { grid-column: 1; grid-row: 1; align-self: end; }

.content > .kg-width-wide { grid-column: wide; display: block; margin-block: 32px 64px; }
.content > .kg-width-full { grid-column: full; display: block; margin-block: 32px 64px; }
.kg-width-wide .kg-image, .kg-width-full .kg-image { width: 100%; max-height: none; }
.kg-width-wide > figcaption { margin-top: 10px; max-width: 420px; }
.kg-width-full > figcaption { margin: 10px auto 0; max-width: 1120px; padding-inline: var(--gutter); }

/* Any image with "screenshot" in its alt text or file name gets a thin border,
   so white screenshots don't melt into the page. */
.content img[alt*="screenshot" i], .content img[src*="screenshot" i] { border: 1px solid var(--frame); }

/* Galleries */
.content .kg-gallery-container { display: flex; flex-direction: column; gap: 8px; max-width: none; }
.content .kg-gallery-row { display: flex; gap: 8px; }
.content .kg-gallery-row:not(:first-of-type) { margin: 0; }
.content .kg-gallery-image:not(:first-of-type) { margin: 0; }
.content .kg-gallery-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.content > .kg-gallery-card figcaption { margin-top: 10px; max-width: 420px; text-align: left; }

/* Post lists: archive, tag, author */
.years { border-top: 1px solid var(--ink); padding-top: 28px; }
.year { margin-bottom: 36px; }
.year-label { margin: 0; padding-top: 14px; font-size: 24px; color: var(--accent); }
.entry { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding-block: 14px; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.entry:hover, .entry:hover .entry-title { color: var(--accent); }
.entry-title { font-size: 23px; line-height: 1.24; }
.entry-side { display: flex; gap: 16px; flex-shrink: 0; font-size: 15px; color: var(--muted); }
.entry-tag { display: none; }
.archive .entry-tag { display: inline; }
.is-grouped .entry-year { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 56px; }
.chip { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 18px; border: 0; border-radius: 99px; background: var(--tint); color: var(--ink); font: inherit; font-size: 15px; cursor: pointer; }
.chip.on { background: var(--accent); color: #FFFFFF; font-weight: 600; }
.more { margin: 28px 0 0; font-size: 17px; font-weight: 600; }
.next { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 32px; border-top: 1px solid var(--ink); margin-top: 64px; padding-top: 24px; }
.next a { color: var(--ink); text-decoration: none; }
.next a:hover { color: var(--accent); }
.next .label { display: block; margin-bottom: 6px; font-size: 15px; color: var(--muted); }
.next .serif { font-size: 26px; line-height: 1.2; }

/* Author and about */
.profile { margin-bottom: 88px; }
.avatar { display: block; width: 160px; height: 160px; border-radius: 50%; object-fit: cover; }
.profile-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 20px; font-size: 17px; }
.profile-links a { padding-block: 12px; }

/* Tablet */
@media (max-width: 999px) {
    :root { --gutter: 40px; }
    .page { padding-block: 64px 56px; }
    .row { display: block; max-width: 680px; }
    .rail:empty { display: none; }
    .content {
        grid-template-columns:
            [full-start] var(--gutter)
            [wide-start main-start rail-start] minmax(0, 680px) [main-end rail-end]
            minmax(0, 1fr) [wide-end]
            var(--gutter) [full-end];
    }
    .meta { grid-column: main !important; grid-row: auto; height: auto; display: flex; flex-wrap: wrap; gap: 4px 20px; margin-bottom: 28px !important; padding-top: 0; }
    .meta .tags { margin-top: 0; }
    .rail-photo { grid-column: main !important; grid-row: auto; width: 200px; margin-bottom: 32px !important; }
    .content > .kg-image-card { grid-column: main; display: block; }
    .content > .kg-width-wide { grid-column: wide; }
    .content > .kg-width-full { grid-column: full; }
    .kg-image-card > figcaption { margin-top: 10px; }
    .year-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 24px; max-width: none; }
    .year-row > .rail { grid-column: 1; }
    .year-row > .main { grid-column: 2; }
    .profile .rail { margin-bottom: 32px; }
}

/* Phone */
@media (max-width: 639px) {
    :root { --gutter: 20px; }
    .brand { font-size: 20px; }
    .site-nav { gap: 16px; font-size: 16px; }
    .site-nav a[aria-current] { font-weight: 400; }
    .page { padding-block: 56px 40px; }
    .title { margin-bottom: 40px; }
    .intro { margin: -24px 0 40px; font-size: 19px; }
    .content { font-size: 18px; line-height: 1.62; }
    .lede, .content > p:first-of-type { font-size: 22px; line-height: 1.36; }
    .content > h2 { font-size: 29px; }
    .content > blockquote { font-size: 24px; }
    .content > blockquote.kg-blockquote-alt { grid-column: main; margin-block: 32px 44px; }

    /* Images run edge to edge. Small images are centered rather than stuck to the screen edge. */
    .content > .kg-image-card, .content > .kg-width-wide, .content > .kg-gallery-card { grid-column: full; margin-block: 24px 40px; }
    .content > .kg-width-full { margin-block: 24px 40px; }
    .kg-image-card > .kg-image, .kg-image-card > a > .kg-image { margin-inline: auto; }
    .content figcaption { max-width: none; padding-inline: var(--gutter); }

    .content .kg-gallery-container, .content .kg-gallery-row { gap: 4px; }
    .content .kg-gallery-row:has(> :nth-child(3)) { flex-wrap: wrap; }
    .content .kg-gallery-row:has(> :nth-child(3)) > .kg-gallery-image { flex: 1 1 calc(50% - 2px) !important; }
    .content .kg-gallery-row:has(> :nth-child(3)) > .kg-gallery-image:first-child { flex-basis: 100% !important; }

    .year-row { display: block; }
    .year-label { padding-top: 0; margin-bottom: 4px; }
    .entry { flex-direction: column; gap: 4px; }
    .entry-title { font-size: 21px; }
    .chips { margin-bottom: 40px; }
    .next .serif { font-size: 23px; }
    .avatar { width: 112px; height: 112px; }
}