/* =========================================================================
   CLUBHOUSE — a sectioned editorial theme for Ghost
   1. Tokens
   2. Reset & base
   3. Typography
   4. Layout helpers
   5. Buttons & flags
   6. Masthead & navigation
   ========================================================================= */

/* -------------------------------------------------- 1. Tokens ---------- */

:root {
    /* Section colours are injected by default.hbs from theme settings.
       These are only the fallbacks. */
    --golf: #5ecb7e;
    --tech: #59c7f5;
    --humor: #ffb02e;
    --projects: #c58cff;
    --menu: #ff6b6b;
    --brand: #d8e04a;

    /* Ghost's Brand settings can supply --gh-font-heading / --gh-font-body.
       When the publisher hasn't picked a font, the theme's own faces stand. */
    --font-display: var(--gh-font-heading, 'Bricolage Grotesque', 'Helvetica Neue', Helvetica, Arial, sans-serif);
    --font-body: var(--gh-font-body, 'Newsreader', Georgia, 'Times New Roman', serif);
    --font-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Bricolage Grotesque's width axis runs 75%-100%, driven through
       font-stretch so it composes with font-weight.

       Uppercase display sits at 100%, the widest the face goes. That is what
       keeps a stem-heavy run like NELL readable - the earlier 78% was near
       the narrowest setting and collapsed it into a picket fence. Mixed-case
       headlines can take some narrowing; lowercase has more shape to it. */
    --width-wide: 100%;
    --width-normal: 92%;

    --wrap: 1280px;
    --measure: 46rem;
    --gutter: clamp(1.15rem, 4vw, 3rem);

    --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.075rem);
    --step-1: clamp(1.18rem, 1.1rem + 0.4vw, 1.4rem);
    --step-2: clamp(1.45rem, 1.28rem + 0.85vw, 2rem);
    --step-3: clamp(1.8rem, 1.45rem + 1.75vw, 2.9rem);
    --step-4: clamp(2.3rem, 1.6rem + 3.4vw, 4.4rem);
    --step-5: clamp(2.9rem, 1.3rem + 7.6vw, 8rem);

    --ease: cubic-bezier(.2, .7, .3, 1);
    --dur: .28s;

    --radius: 2px;
    --hair: 1px;
}

/* Dark is the default. */
:root,
:root[data-scheme="dark"] {
    --bg: #0c0d0f;
    --bg-soft: #131518;
    --panel: #16181c;
    --panel-2: #1d2026;
    --fg: #edeef0;
    --fg-2: #9ba1a9;
    --fg-3: #6b7178;
    --line: rgba(255, 255, 255, .11);
    --line-strong: rgba(255, 255, 255, .22);
    --shadow: 0 0 0 1px rgba(255, 255, 255, .04);
    --img-tint: .92;
    --accent: var(--brand);
    color-scheme: dark;

    /* Code tokens. Fixed values rather than the section variables, so a
       recoloured section can never drop code below readable contrast. */
    --hl-comment: #6f757d;
    --hl-keyword: #c58cff;
    --hl-string:  #7fd99a;
    --hl-number:  #6ecff7;
    --hl-title:   #ffc766;
    --hl-attr:    #9fd2ff;
    --hl-meta:    #868d95;
    --hl-add:     #7fd99a;
    --hl-del:     #ff8a8a;
}

:root[data-scheme="light"] {
    --bg: #f4f2ee;
    --bg-soft: #eceae4;
    --panel: #ffffff;
    --panel-2: #f7f5f1;
    --fg: #14161a;
    --fg-2: #565c65;
    --fg-3: #878d96;
    --line: rgba(0, 0, 0, .14);
    --line-strong: rgba(0, 0, 0, .3);
    --shadow: 0 0 0 1px rgba(0, 0, 0, .03);
    --img-tint: 1;
    --accent: var(--brand);
    color-scheme: light;

    --hl-comment: #8a9096;
    --hl-keyword: #8034cc;
    --hl-string:  #1c7038;
    --hl-number:  #0a6288;
    --hl-title:   #8a5000;
    --hl-attr:    #14528f;
    --hl-meta:    #6a7079;
    --hl-add:     #1c7038;
    --hl-del:     #b02121;
}

/* Section accents. Applied by [data-section] on any element, and by the
   tag-* classes Ghost puts on <body> for post and tag archive pages. */
[data-section="golf"],
body.tag-golf { --accent: var(--golf); }

[data-section="tech"],
body.tag-tech { --accent: var(--tech); }

[data-section="humor"],
[data-section="humour"],
body.tag-humor,
body.tag-humour { --accent: var(--humor); }

[data-section="projects"],
[data-section="personal-projects"],
[data-section="home-lab"],
body.tag-projects,
body.tag-personal-projects { --accent: var(--projects); }

/* -------------------------------------------------- 2. Reset & base ---- */

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

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

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-display);
    font-size: var(--step-0);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body > * { position: relative; z-index: 1; }

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

a { color: inherit; text-decoration: none; }

button, input, textarea, select {
    font: inherit;
    color: inherit;
}

button { cursor: pointer; background: none; border: 0; padding: 0; }

hr {
    border: 0;
    border-top: var(--hair) solid var(--line);
    margin: 3rem 0;
}

::selection {
    background: var(--accent);
    color: #08090a;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--accent);
    color: #08090a;
    padding: .75rem 1.25rem;
    z-index: 999;
    font-family: var(--font-mono);
    font-size: .8rem;
}
.skip-link:focus { left: 0; }

/* -------------------------------------------------- 3. Typography ------ */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -.026em;
    line-height: 1.04;
    margin: 0;
    text-wrap: balance;
}

.mono,
.card__meta,
.rail,
.flag,
.pager,
.foot__head,
.archive__kicker {
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* The little square that carries a section's colour everywhere. */
.nav__dot {
    display: inline-block;
    width: .5rem;
    height: .5rem;
    background: var(--accent);
    margin-right: .5rem;
    flex: none;
    transform: translateY(-1px);
}

.blink {
    color: var(--accent);
    animation: blink 1.6s steps(1) infinite;
    font-size: .6em;
    margin-right: .5rem;
}
@keyframes blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .15; } }

/* -------------------------------------------------- 4. Layout ---------- */

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

.site-main { display: block; min-height: 50vh; }

/* -------------------------------------------------- 5. Buttons & flags - */

.btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-mono);
    font-size: .74rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .62rem 1.05rem;
    border: var(--hair) solid var(--line-strong);
    border-radius: var(--radius);
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
                border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
    white-space: nowrap;
}

.btn--solid {
    background: var(--accent);
    border-color: var(--accent);
    color: #08090a;
    font-weight: 500;
}
.btn--solid:hover { transform: translateY(-2px); }

.btn--ghost:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.iconbtn {
    display: inline-grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    border: var(--hair) solid var(--line);
    border-radius: var(--radius);
    color: var(--fg-2);
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.iconbtn:hover { color: var(--accent); border-color: var(--accent); }

.iconbtn__sun { display: none; }
:root[data-scheme="light"] .iconbtn__sun { display: block; }
:root[data-scheme="light"] .iconbtn__moon { display: none; }

.flag {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .34rem .6rem;
    border: var(--hair) solid var(--line);
    color: var(--fg-2);
    border-radius: var(--radius);
}
.flag--section { color: var(--fg); border-color: var(--line-strong); }
a.flag--section:hover { border-color: var(--accent); color: var(--accent); }
a.flag--section:hover .nav__dot { background: var(--accent); }

/* -------------------------------------------------- 6. Masthead -------- */

.masthead {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--bg);
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    border-bottom: var(--hair) solid var(--line);
}

.masthead__bar {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
    height: 4.4rem;
}

.masthead__nav { flex: 1; min-width: 0; }
.masthead__tools { margin-left: auto; }

.masthead__brand { display: flex; align-items: center; min-width: 0; }

.masthead__logo { max-height: 2rem; width: auto; }

.masthead__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.12rem;
    letter-spacing: -.035em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.masthead__brand:hover .masthead__title { color: var(--accent); }

.masthead__tools {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.nav {
    display: flex;
    align-items: stretch;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }

.nav__item { flex: none; }

.nav {
    gap: clamp(.85rem, 2vw, 1.9rem);

    /* A menu item is neutral unless it names one of the four sections.
       Without this it inherits the current page's accent - so on a golf page
       every item in the menu would turn green, and Home and About would pick
       up the site accent colour anywhere else. */
    --accent: var(--menu);
}

.nav__item[data-section="golf"]               { --accent: var(--golf); }
.nav__item[data-section="tech"]               { --accent: var(--tech); }
.nav__item[data-section="humor"],
.nav__item[data-section="humour"]             { --accent: var(--humor); }
.nav__item[data-section="projects"],
.nav__item[data-section="personal-projects"]  { --accent: var(--projects); }

.nav__link {
    display: flex;
    align-items: center;
    padding-block: .35rem;
    font-family: var(--font-mono);
    font-size: .74rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--fg-2);
    position: relative;
    transition: color var(--dur) var(--ease);
    white-space: nowrap;
}

.nav__link::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur) var(--ease);
}
.nav__link:hover { color: var(--fg); }
.nav__link:hover::after,
.nav__item--current .nav__link::after { transform: scaleX(1); }
.nav__item--current .nav__link { color: var(--fg); }

.nav__link .nav__dot {
    width: .42rem;
    height: .42rem;
    background: var(--fg-3);
    transition: background var(--dur) var(--ease);
}
.nav__link:hover .nav__dot,
.nav__item--current .nav__link .nav__dot { background: var(--accent); }

/* Reading progress */
.progress {
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: transparent;
    pointer-events: none;
}
.progress__bar {
    display: block;
    height: 100%;
    width: 0;
    background: var(--accent);
    transition: width .1s linear;
}
body:not(.post-template) .progress { display: none; }

/* Burger for narrow screens */
.iconbtn--menu { display: none; }
.burger, .burger::before, .burger::after {
    display: block;
    width: 15px;
    height: 1.5px;
    background: currentColor;
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.burger { position: relative; }
.burger::before, .burger::after { content: ""; position: absolute; left: 0; }
.burger::before { top: -5px; }
.burger::after { top: 5px; }
[aria-expanded="true"] .burger { background: transparent; }
[aria-expanded="true"] .burger::before { transform: translateY(5px) rotate(45deg); }
[aria-expanded="true"] .burger::after { transform: translateY(-5px) rotate(-45deg); }

/* =========================================================================
   7. Home: hero, lead story
   8. Cards, photo shots, rows
   9. Shelves & pagination
   ========================================================================= */

/* -------------------------------------------------- 7. Cover ----------- */

/* One picture at the top of the home page, straight from Ghost's
   publication cover. Height is a theme setting. */

.cover {
    position: relative;
    width: 100%;
    background: var(--panel-2);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

.cover--tall   { height: min(78vh, 46rem); }
.cover--medium { height: min(58vh, 34rem); }
.cover--short  { height: min(42vh, 25rem); }

.cover__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(var(--img-tint));
}

.cover__inner {
    position: relative;
    width: 100%;
    padding-block: clamp(2rem, 6vw, 4rem);
    background: linear-gradient(to top, rgba(5, 6, 8, .82), rgba(5, 6, 8, .3) 55%, transparent);
    color: #fff;
}
.cover--plain .cover__inner { background: none; color: var(--fg); }

.cover__title {
    font-size: var(--step-5);
    font-weight: 700;
    letter-spacing: -.012em;
    line-height: .95;
    font-stretch: var(--width-wide);
    text-transform: uppercase;
    color: inherit;
}

.cover__sub {
    font-family: var(--font-body);
    font-size: var(--step-1);
    line-height: 1.45;
    margin: 1rem 0 0;
    max-width: 46ch;
    color: inherit;
    opacity: .82;
}

/* No cover image set: a plain title block, still calm. */
.cover--plain {
    height: auto;
    min-height: 0;
    border-bottom: var(--hair) solid var(--line);
    padding-block: clamp(3rem, 9vw, 7rem) clamp(2rem, 5vw, 3.5rem);
}

/* -------------------------------------------------- 8. Cards ----------- */

/* Two across, separated by space rather than rules. */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
    column-gap: clamp(1.5rem, 3.5vw, 3.25rem);
    row-gap: clamp(2.75rem, 6vw, 4.75rem);
}

.grid--two {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 27rem), 1fr));
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.card__hit { position: absolute; inset: 0; z-index: 3; }

.card__media {
    position: relative;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    background: var(--panel-2);
}
.card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(var(--img-tint));
    transition: transform .7s var(--ease);
}
.card:hover .card__img { transform: scale(1.035); }

.card__body {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    align-items: flex-start;
}

.card__meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--fg-3);
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.card__section {
    display: inline-flex;
    align-items: center;
    color: var(--fg-2);
}

.card__title {
    font-size: var(--step-2);
    letter-spacing: -.035em;
    line-height: 1.12;
    transition: color var(--dur) var(--ease);
    text-wrap: balance;
}
.card:hover .card__title { color: var(--accent); }

.card__excerpt {
    font-family: var(--font-body);
    font-size: 1.04rem;
    line-height: 1.55;
    color: var(--fg-2);
    margin: 0;
    max-width: 46ch;
}

.card__rt {
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--fg-3);
}

/* No feature image: a short accent rule stands in for the picture. */
.card--noimg .card__body::before {
    content: "";
    display: block;
    width: 3rem;
    height: 3px;
    background: var(--accent);
}

/* -------------------------------------------------- Photo shots -------- */

/* Used on the Golf section page, where the posts are mostly pictures. */
.shots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
}

.shot {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--panel-2);
}

.shot__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(var(--img-tint));
    transition: transform .8s var(--ease);
}
.shot:hover .shot__img { transform: scale(1.05); }

.shot__blank {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(45deg, var(--panel) 0 10px, var(--panel-2) 10px 20px);
}

.shot__veil {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: 3rem 1rem 1rem;
    background: linear-gradient(to top, rgba(6, 7, 8, .9), rgba(6, 7, 8, .45) 50%, transparent);
    color: #fff;
}

.shot__title {
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.2;
    letter-spacing: -.02em;
}
.shot__date {
    font-family: var(--font-mono);
    font-size: .66rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .7);
}

/* -------------------------------------------------- 9. Shelves --------- */

.feed, .shelf {
    margin-top: clamp(3.5rem, 8vw, 6rem);
}
.shelf:last-child { margin-bottom: clamp(3.5rem, 8vw, 6rem); }

.shelf__head {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}

.shelf__title {
    display: flex;
    align-items: center;
    font-size: var(--step-2);
    letter-spacing: -.04em;
    white-space: nowrap;
}
.shelf__title .nav__dot { width: .62rem; height: .62rem; }

.shelf__rule {
    flex: 1;
    height: var(--hair);
    background: var(--line);
}




/* -------------------------------------------------- Load more ---------- */

.loadmore__wrap {
    display: flex;
    justify-content: center;
    margin-top: clamp(3rem, 6vw, 4.5rem);
}

.loadmore {
    font-family: var(--font-mono);
    font-size: .76rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--fg-2);
    padding: .95rem 2.5rem;
    border: var(--hair) solid var(--line-strong);
    border-radius: var(--radius);
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.loadmore:hover { color: var(--accent); border-color: var(--accent); }
.loadmore[disabled] { opacity: .5; cursor: default; }

/* -------------------------------------------------- Pagination --------- */

.pager[hidden] { display: none; }

.pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: clamp(3rem, 6vw, 4.5rem);
    padding: 1.1rem 0;
    border-top: var(--hair) solid var(--line);
    border-bottom: var(--hair) solid var(--line);
    color: var(--fg-2);
}
.pager__link { transition: color var(--dur) var(--ease); }
a.pager__link:hover { color: var(--accent); }
.pager__link.is-off { color: var(--fg-3); opacity: .4; }
.pager__count { font-variant-numeric: tabular-nums; color: var(--fg-3); }
.pager__slash { color: var(--accent); }

/* =========================================================================
   10. Post & page
   11. Content / Koenig cards
   12. Archives, footer, forms, lightbox, error
   13. Responsive & print
   ========================================================================= */

/* -------------------------------------------------- 10. Post ----------- */

.post__head {
    padding-top: clamp(2.5rem, 6vw, 4.5rem);
    padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.post__head-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 15rem;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: end;
}

.post__head-main .flag { margin-bottom: 1.1rem; }

.post__title {
    font-size: var(--step-4);
    letter-spacing: -.032em;
    font-stretch: var(--width-normal);
    line-height: .96;
    max-width: 20ch;
}
.post__title--page { max-width: 24ch; }

.post__standfirst {
    font-family: var(--font-body);
    font-size: var(--step-1);
    line-height: 1.5;
    color: var(--fg-2);
    margin: 1.1rem 0 0;
    max-width: 46ch;
}

.post__rail { border-top: 3px solid var(--accent); padding-top: 1rem; }

.rail { margin: 0; }
.rail__row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .5rem 0;
    border-bottom: var(--hair) solid var(--line);
}
.rail dt { color: var(--fg-3); flex: none; }
.rail dd {
    margin: 0;
    color: var(--fg);
    text-align: right;
    min-width: 0;
    overflow-wrap: anywhere;
}
.rail dd a { border-bottom: 1px solid var(--line-strong); }
.rail dd a:hover { color: var(--accent); border-color: var(--accent); }

.post__hero {
    margin: 0;
    width: 100%;
}
/* Show the whole picture. A tall portrait shot gets centred and scaled to
   fit rather than having its top and bottom cropped off; a wide landscape
   shot still runs edge to edge. */
.post__hero-img {
    display: block;
    margin-inline: auto;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 82vh;
    background: var(--bg-soft);
    border-block: var(--hair) solid var(--line);
    filter: saturate(var(--img-tint));
}
.post__hero figcaption {
    max-width: var(--wrap);
    margin: .75rem auto 0;
    padding-inline: var(--gutter);
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .06em;
    color: var(--fg-3);
}

.post__content { padding-block: clamp(2.5rem, 6vw, 4.5rem); }

.post__foot {
    padding-bottom: clamp(2rem, 4vw, 3rem);
}

.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .4rem .7rem;
    border: var(--hair) solid var(--line);
    color: var(--fg-2);
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.chip:hover { color: var(--accent); border-color: var(--accent); }

.byline {
    display: flex;
    gap: 1.1rem;
    align-items: flex-start;
    margin-top: 2.25rem;
    padding-top: 1.75rem;
    border-top: var(--hair) solid var(--line);
}
.byline__avatar {
    width: 3.25rem;
    height: 3.25rem;
    object-fit: cover;
    border-radius: 50%;
    flex: none;
    border: var(--hair) solid var(--line);
}
.byline__avatar--blank { background: var(--accent); border: 0; }
.byline__name { font-weight: 600; font-size: 1.05rem; letter-spacing: -.02em; }
.byline__name:hover { color: var(--accent); }
.byline__bio {
    font-family: var(--font-body);
    color: var(--fg-2);
    margin: .3rem 0 0;
    max-width: 48ch;
}

/* Prev / next */
.jump {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--hair);
    background: var(--line);
    border-block: var(--hair) solid var(--line);
    margin-top: clamp(2rem, 5vw, 3.5rem);
}
.jump:empty { display: none; }
.jump:not(:has(.jump__link)) { display: none; }
.jump__link {
    background: var(--bg);
    padding: 1.5rem clamp(1rem, 3vw, 2rem);
    display: flex;
    flex-direction: column;
    gap: .5rem;
    transition: background var(--dur) var(--ease);
}
.jump__link:hover { background: var(--panel); }
.jump__link--next { text-align: right; align-items: flex-end; }
.jump__link:only-child { grid-column: 1 / -1; }
.jump__dir {
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--fg-3);
}
.jump__link:hover .jump__dir { color: var(--accent); }
.jump__title {
    font-size: var(--step-1);
    font-weight: 600;
    letter-spacing: -.03em;
    line-height: 1.2;
    max-width: 30ch;
}

.related { margin-top: clamp(3rem, 6vw, 4.5rem); margin-bottom: clamp(3rem, 6vw, 4.5rem); }

/* Photo essay template */
.essay__hero { position: relative; margin: 0; }
.essay__hero-img {
    width: 100%;
    height: clamp(24rem, 78vh, 54rem);
    object-fit: cover;
}
.essay__overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding-block: clamp(2rem, 8vw, 5rem) clamp(1.5rem, 4vw, 3rem);
    background: linear-gradient(to top, rgba(5, 6, 7, .93), rgba(5, 6, 7, .5) 55%, transparent);
    color: #fff;
}
.essay__overlay .flag { color: #fff; border-color: rgba(255, 255, 255, .35); }
.essay__title {
    font-size: var(--step-4);
    letter-spacing: -.032em;
    font-stretch: var(--width-normal);
    line-height: .95;
    margin-top: 1rem;
    max-width: 18ch;
    color: #fff;
}
.essay__meta {
    display: flex;
    gap: 1.25rem;
    margin: 1rem 0 0;
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .72);
}
.essay__standfirst {
    font-family: var(--font-body);
    font-size: var(--step-2);
    line-height: 1.35;
    letter-spacing: -.015em;
    max-width: 28ch;
    margin: 0 0 2.5rem;
    color: var(--fg);
    border-left: 3px solid var(--accent);
    padding-left: 1.25rem;
}

/* -------------------------------------------------- 11. Content -------- */

.content {
    max-width: var(--measure);
    margin-inline: auto;
    font-family: var(--font-body);
    font-size: clamp(1.09rem, 1.02rem + .3vw, 1.24rem);
    line-height: 1.68;
    color: var(--fg);
}

.content > * { margin-block: 0 1.45em; }
.content > *:last-child { margin-bottom: 0; }

.content p { margin-block: 0 1.45em; }

.content a {
    color: var(--fg);
    background-image: linear-gradient(var(--accent), var(--accent));
    background-size: 100% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    padding-bottom: 1px;
    transition: background-size var(--dur) var(--ease), color var(--dur) var(--ease);
}
.content a:hover { color: var(--accent); }

.content h2, .content h3, .content h4 {
    font-family: var(--font-display);
    margin-top: 2.2em;
    margin-bottom: .55em;
    scroll-margin-top: 8rem;
}
.content h2 { font-size: var(--step-3); letter-spacing: -.04em; }
.content h3 { font-size: var(--step-2); letter-spacing: -.03em; }
.content h4 { font-size: var(--step-1); letter-spacing: -.02em; }

.content h2::before {
    content: "";
    display: block;
    width: 2.25rem;
    height: 3px;
    background: var(--accent);
    margin-bottom: .7rem;
}

.content ul, .content ol { padding-left: 1.3em; }
.content li { margin-bottom: .5em; }
.content li::marker { color: var(--accent); }

.content blockquote {
    margin-inline: 0;
    padding: .35em 0 .35em 1.4em;
    border-left: 3px solid var(--accent);
    font-size: 1.14em;
    line-height: 1.45;
    font-style: italic;
    color: var(--fg);
}
.content blockquote p:last-child { margin-bottom: 0; }

.content strong { font-weight: 600; }

.content code {
    font-family: var(--font-mono);
    font-size: .85em;
    background: var(--panel-2);
    border: var(--hair) solid var(--line);
    padding: .12em .38em;
    border-radius: var(--radius);
    color: var(--accent);
    overflow-wrap: anywhere;
}

.content pre {
    font-family: var(--font-mono);
    font-size: .84rem;
    line-height: 1.6;
    background: var(--panel);
    border: var(--hair) solid var(--line);
    border-left: 3px solid var(--accent);
    padding: 1.15rem 1.25rem;
    overflow-x: auto;
    border-radius: var(--radius);
    color: var(--fg);
}
.content pre code {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    font-size: inherit;
}

/* Syntax highlighting (highlight.js). */
.content pre { position: relative; }

.content pre[data-lang] { padding-top: 2.2rem; }
.content pre[data-lang]::before {
    content: attr(data-lang);
    position: absolute;
    top: 0;
    right: 0;
    padding: .38rem .7rem;
    font-family: var(--font-mono);
    font-size: .62rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--fg-3);
    border-left: var(--hair) solid var(--line);
    border-bottom: var(--hair) solid var(--line);
}

.hljs-comment,
.hljs-quote { color: var(--hl-comment); font-style: italic; }

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-subst,
.hljs-operator { color: var(--hl-keyword); }

.hljs-string,
.hljs-regexp,
.hljs-char\.escape,
.hljs-bullet,
.hljs-symbol { color: var(--hl-string); }

.hljs-number,
.hljs-built_in,
.hljs-type,
.hljs-class .hljs-title,
.hljs-link { color: var(--hl-number); }

.hljs-title,
.hljs-name,
.hljs-section,
.hljs-selector-id,
.hljs-selector-class { color: var(--hl-title); }

.hljs-attr,
.hljs-attribute,
.hljs-variable,
.hljs-template-variable,
.hljs-property,
.hljs-params { color: var(--hl-attr); }

.hljs-meta,
.hljs-meta .hljs-keyword,
.hljs-doctag,
.hljs-punctuation { color: var(--hl-meta); }

.hljs-addition { color: var(--hl-add); }
.hljs-deletion { color: var(--hl-del); }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 600; }

.content table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-display);
    font-size: .95rem;
}
.content table th,
.content table td {
    text-align: left;
    padding: .7rem .85rem;
    border-bottom: var(--hair) solid var(--line);
}
.content table th {
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--fg-2);
    border-bottom-color: var(--line-strong);
}

.content figure { margin-inline: 0; }
.content figcaption {
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .05em;
    line-height: 1.5;
    color: var(--fg-3);
    text-align: left;
    margin-top: .7rem;
    padding-left: .9rem;
    border-left: 2px solid var(--accent);
}
.content figcaption a { background: none; color: var(--accent); }

/* Koenig widths */
.content .kg-card,
.content figure,
.content img { border-radius: var(--radius); }

.kg-width-wide {
    width: min(calc(100vw - var(--gutter) * 2), 62rem);
    margin-inline: calc(50% - min(calc(50vw - var(--gutter)), 31rem));
    max-width: none;
}
.kg-width-full {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    max-width: none;
}
.kg-width-full img { width: 100%; border-radius: 0; }
.kg-width-full figcaption,
.kg-width-wide figcaption {
    max-width: var(--measure);
    margin-inline: auto;
    padding-left: .9rem;
}

/* Zoomable images */
.content img[data-zoomable] { cursor: zoom-in; }

/* Gallery */
.kg-gallery-container { display: flex; flex-direction: column; gap: var(--hair); }
.kg-gallery-row { display: flex; gap: var(--hair); }
.kg-gallery-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Embeds */
.kg-embed-card { display: flex; flex-direction: column; align-items: center; }
.kg-embed-card iframe { max-width: 100%; }

/* Bookmark card */
.kg-bookmark-card a.kg-bookmark-container {
    display: flex;
    background: var(--panel);
    border: var(--hair) solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    color: var(--fg);
    text-decoration: none;
    background-image: none;
    transition: border-color var(--dur) var(--ease);
}
.kg-bookmark-card a.kg-bookmark-container:hover { border-color: var(--accent); }
.kg-bookmark-content { flex: 1; padding: 1.1rem 1.25rem; min-width: 0; }
.kg-bookmark-title {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -.02em;
    font-size: 1.02rem;
}
.kg-bookmark-description {
    font-size: .92rem;
    color: var(--fg-2);
    margin-top: .35rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.kg-bookmark-metadata {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .8rem;
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .06em;
    color: var(--fg-3);
    flex-wrap: wrap;
}
.kg-bookmark-icon { width: 1rem; height: 1rem; }
.kg-bookmark-thumbnail { flex: 0 0 34%; max-height: 12rem; }
.kg-bookmark-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.kg-bookmark-author::after { content: "•"; margin-inline: .4rem; color: var(--accent); }

/* Callout */
.kg-callout-card {
    display: flex;
    gap: .85rem;
    padding: 1.1rem 1.25rem;
    background: var(--panel);
    border: var(--hair) solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    font-size: .98em;
}
.kg-callout-emoji { flex: none; }

/* Toggle */
.kg-toggle-card {
    border: var(--hair) solid var(--line);
    border-radius: var(--radius);
    padding: 1rem 1.15rem;
    background: var(--panel);
}
.kg-toggle-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
}
.kg-toggle-heading-text { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; }
.kg-toggle-card-icon { width: 1.1rem; height: 1.1rem; color: var(--accent); transition: transform var(--dur) var(--ease); }
.kg-toggle-card[data-kg-toggle-state="open"] .kg-toggle-card-icon { transform: rotate(180deg); }
.kg-toggle-content { display: none; margin-top: .85rem; font-size: .97em; color: var(--fg-2); }
.kg-toggle-card[data-kg-toggle-state="open"] .kg-toggle-content { display: block; }

/* Button */
.kg-button-card { display: flex; }
.kg-button-card.kg-align-center { justify-content: center; }
.kg-btn {
    display: inline-flex;
    align-items: center;
    background: var(--accent);
    color: #08090a;
    font-family: var(--font-mono);
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 500;
    padding: .8rem 1.4rem;
    border-radius: var(--radius);
    background-image: none;
    transition: transform var(--dur) var(--ease);
}
.kg-btn:hover { transform: translateY(-2px); color: #08090a; }

/* Header card */
.kg-header-card {
    padding: clamp(2rem, 6vw, 4rem) 1.5rem;
    text-align: center;
    border: var(--hair) solid var(--line);
    background: var(--panel);
}
.kg-header-card-header { font-family: var(--font-display); font-size: var(--step-3); letter-spacing: -.04em; }
.kg-header-card-subheader { color: var(--fg-2); margin-top: .75rem; }

/* Product, audio, video, file cards keep Ghost's own card_assets styling but
   inherit our borders. */
.kg-product-card-container,
.kg-audio-card,
.kg-file-card-container,
.kg-video-card {
    border-radius: var(--radius);
    border-color: var(--line) !important;
}


/* -------------------------------------------------- Photo page --------- */

/* The "Photos" page template: one picture at a time, as big as the screen
   allows, with its caption underneath. Nothing is cropped - a tall portrait
   shot and a wide landscape shot both show in full. */

.photos__head {
    padding-top: clamp(2.5rem, 6vw, 4.5rem);
    padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.photos__title {
    font-size: var(--step-4);
    letter-spacing: -.012em;
    line-height: .98;
    font-stretch: var(--width-wide);
    text-transform: uppercase;
}

.photos__sub {
    font-family: var(--font-body);
    font-size: var(--step-1);
    color: var(--fg-2);
    margin: 1rem 0 0;
    max-width: 52ch;
}

.photos__body {
    padding-bottom: clamp(3rem, 8vw, 6rem);
}

.content--photos {
    max-width: min(100%, 78rem);
    padding-inline: var(--gutter);
    font-size: 1.05rem;
}

/* Every photo gets the full column, however the card was set in the editor. */
.content--photos .kg-width-wide,
.content--photos .kg-width-full,
.content--photos figure,
.content--photos img {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
}

.content--photos > * {
    margin-block: 0 clamp(3rem, 7vw, 5.5rem);
}
.content--photos > *:last-child { margin-bottom: 0; }

.content--photos img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 86vh;
    margin-inline: auto;
    background: var(--bg-soft);
    cursor: zoom-in;
}

.content--photos figcaption {
    font-family: var(--font-mono);
    font-size: .76rem;
    letter-spacing: .04em;
    line-height: 1.6;
    color: var(--fg-2);
    text-align: left;
    max-width: 60ch;
    margin: 1rem auto 0;
    padding-left: .9rem;
    border-left: 2px solid var(--accent);
}

/* Ghost gallery cards: keep the rows, but let them breathe. */
.content--photos .kg-gallery-container { gap: clamp(.5rem, 1.5vw, 1rem); }
.content--photos .kg-gallery-row { gap: clamp(.5rem, 1.5vw, 1rem); }
.content--photos .kg-gallery-image img { max-height: none; }

/* Text between photos stays readable rather than stretching the full width. */
.content--photos p,
.content--photos h2,
.content--photos h3,
.content--photos ul,
.content--photos ol,
.content--photos blockquote {
    max-width: var(--measure);
    margin-inline: auto;
}

@media (max-width: 700px) {
    .content--photos { padding-inline: 0; }
    .content--photos img { max-height: none; }
    .content--photos figcaption {
        padding-inline: var(--gutter) 0;
        margin-left: var(--gutter);
        margin-right: var(--gutter);
    }
    .content--photos p,
    .content--photos h2,
    .content--photos h3,
    .content--photos ul,
    .content--photos ol,
    .content--photos blockquote {
        padding-inline: var(--gutter);
    }
    .content--photos .kg-gallery-row { flex-direction: column; }
}

/* -------------------------------------------------- 12. Archives ------- */

.archive {
    padding-top: clamp(3rem, 7vw, 5.5rem);
    padding-bottom: clamp(2rem, 4.5vw, 3.5rem);
    border-bottom: var(--hair) solid var(--line);
    margin-bottom: clamp(3rem, 6vw, 4.5rem);
}

.archive__kicker {
    display: flex;
    align-items: center;
    color: var(--fg-2);
    margin: 0 0 1rem;
}

.archive__title {
    font-size: var(--step-5);
    letter-spacing: -.012em;
    font-stretch: var(--width-wide);
    line-height: .95;
    text-transform: uppercase;
}
.archive--author .archive__title { font-size: var(--step-4); text-transform: none; }

.archive__desc {
    font-family: var(--font-body);
    font-size: var(--step-1);
    color: var(--fg-2);
    max-width: 52ch;
    margin: 1.1rem 0 0;
}

.archive__count {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--fg-3);
    margin: 1.5rem 0 0;
    padding-top: 1rem;
    border-top: var(--hair) solid var(--line);
}
.archive__link { color: var(--fg-2); }
.archive__link:hover { color: var(--accent); }

.archive__media { margin: 2rem 0 0; }
.archive__media img { width: 100%; max-height: 22rem; object-fit: cover; }

.archive__author { display: flex; gap: clamp(1rem, 3vw, 2rem); align-items: flex-start; }
.archive__avatar {
    width: clamp(4.5rem, 9vw, 7rem);
    height: clamp(4.5rem, 9vw, 7rem);
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--accent);
    flex: none;
}

/* -------------------------------------------------- Footer ------------- */

.foot {
    margin-top: clamp(3rem, 8vw, 6rem);
    border-top: var(--hair) solid var(--line);
    background: var(--bg-soft);
    padding-block: clamp(2.5rem, 6vw, 4.5rem) 2rem;
}


.foot__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr));
    gap: clamp(1.75rem, 4vw, 3rem);
}
.foot__title {
    font-size: var(--step-2);
    font-weight: 700;
    letter-spacing: -.04em;
    display: block;
}
.foot__note {
    font-family: var(--font-body);
    color: var(--fg-2);
    margin: .6rem 0 0;
    max-width: 34ch;
}
.foot__head { display: block; color: var(--fg-3); margin-bottom: .9rem; }
.foot__list, .foot .nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    overflow: visible;
}
.foot__list a, .foot .nav__link {
    display: flex;
    align-items: center;
    color: var(--fg-2);
    font-size: .95rem;
    transition: color var(--dur) var(--ease);
    height: auto;
    padding: 0;
    border: 0;
    font-family: var(--font-display);
    letter-spacing: 0;
    text-transform: none;
}
.foot__list a:hover, .foot .nav__link:hover { color: var(--accent); }
.foot .nav__link::after { display: none; }
.foot .nav__link .nav__dot { display: none; }
.foot__list { --accent: var(--menu); }
.foot__list li[data-section="golf"] { --accent: var(--golf); }
.foot__list li[data-section="tech"] { --accent: var(--tech); }
.foot__list li[data-section="humor"] { --accent: var(--humor); }
.foot__list li[data-section="personal-projects"] { --accent: var(--projects); }

.foot__pub { color: var(--fg-3); }

.foot__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
    padding-top: 1.25rem;
    border-top: var(--hair) solid var(--line);
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--fg-3);
}

/* -------------------------------------------------- Lightbox ----------- */
/* PhotoSwipe ships its own layout CSS; this only recolours it to match the
   theme. Photos stay on a dark ground in both schemes — they read better. */

.pswp {
    --pswp-bg: #0a0b0d;
    --pswp-placeholder-bg: #1d2026;
    --pswp-icon-color: #ffffff;
    --pswp-icon-color-secondary: #0a0b0d;
    --pswp-icon-stroke-color: rgba(0, 0, 0, .4);
    --pswp-icon-stroke-width: 2px;
    --pswp-error-text-color: rgba(255, 255, 255, .7);
    --pswp-root-z-index: 200;
}

.pswp__button:hover .pswp__icn { fill: var(--accent); }

.pswp__counter {
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .12em;
    opacity: .7;
}

.pswp__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    padding: 2.5rem 1.5rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, rgba(6, 7, 8, .9), transparent);
    color: rgba(255, 255, 255, .88);
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .05em;
    line-height: 1.5;
    text-align: center;
    pointer-events: none;
}

/* -------------------------------------------------- Error -------------- */

.error {
    padding-block: clamp(3rem, 10vw, 7rem) clamp(3rem, 8vw, 5rem);
    text-align: left;
}
.error__code {
    font-family: var(--font-display);
    font-size: var(--step-5);
    line-height: .85;
    color: var(--accent);
    margin: 0;
    font-weight: 500;
    font-stretch: var(--width-wide);
}
.error__title { font-size: var(--step-3); letter-spacing: -.04em; margin-top: 1rem; }
.error__sub { font-family: var(--font-body); color: var(--fg-2); max-width: 42ch; margin-top: .75rem; }
.error__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 2rem 0 clamp(3rem, 7vw, 5rem); }
.error .shelf__head { margin-top: 0; }

/* -------------------------------------------------- 13. Responsive ----- */

@media (max-width: 1080px) {
    .post__head-grid { grid-template-columns: 1fr; }
    .post__rail { max-width: 26rem; }
}

@media (max-width: 860px) {
    .foot__grid { grid-template-columns: 1fr 1fr; }
    .foot__col--brand { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
    .cover--tall   { height: min(62vh, 30rem); }
    .cover--medium { height: min(48vh, 24rem); }
    .cover--short  { height: min(36vh, 18rem); }

    .iconbtn--menu { display: inline-grid; }

    .masthead__nav {
        display: none;
        position: absolute;
        left: 0; right: 0; top: 100%;
        background: var(--bg);
        border-bottom: var(--hair) solid var(--line);
        padding: .5rem var(--gutter) 1.25rem;
        max-height: 70vh;
        overflow-y: auto;
    }
    .masthead__nav.is-open { display: block; }
    .nav { flex-direction: column; gap: 0; }
    .nav__link {
        border-bottom: var(--hair) solid var(--line);
        height: 3.2rem;
        padding-block: 0;
    }
    .nav__link::after { display: none; }

    .grid { grid-template-columns: 1fr; }
    .shots { grid-template-columns: 1fr 1fr; }

    .jump { grid-template-columns: 1fr; }
    .jump__link--next { text-align: left; align-items: flex-start; }

    .foot__grid { grid-template-columns: 1fr; }

    .rail dd { text-align: left; }
    .rail__row { flex-direction: column; gap: .1rem; }

    .kg-width-wide, .kg-width-full {
        width: 100%;
        margin-inline: 0;
    }
    .kg-gallery-row { flex-direction: column; }
}

@media (max-width: 420px) {
    .shots { grid-template-columns: 1fr; }
    .masthead__tools .btn { display: none; }
}

/* -------------------------------------------------- Print -------------- */

@media print {
    .masthead, .foot, .jump, .related, .lightbox, .progress { display: none !important; }
    body { background: #fff; color: #000; }
    .content { max-width: none; font-size: 11pt; }
    .content a { background: none; text-decoration: underline; }
    .post__hero-img { max-height: 8cm; }
}