/* ozjective: grid feed of photos, quotes and notes. Monochrome, to sit with grainy black-and-white photos. */

/* Suisse Intl, self-hosted. Light is left out: the only copy is the trial file with a reduced glyph set. */
@font-face {
    font-family: "Suisse Intl";
    src: url("../fonts/suisseintl-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Suisse Intl";
    src: url("../fonts/suisseintl-medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
/* Cartograph CF Regular, the same monospace as ozgur.design. */
@font-face {
    font-family: "Cartograph CF";
    src: url("../fonts/cartographcf-regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    color-scheme: dark;
    --page: #0A0A0A;
    --surface: #141414;
    --ink: #F8F8F8;
    --text: #E6E6E6;
    --muted: #9A9A9A;
    --line: rgba(255, 255, 255, 0.1);
    --quote-bg: #F8F8F8;
    --quote-ink: #0A0A0A;
    --quote-muted: #5C5C5C;
    --gap: 16px;
    --sans: "Suisse Intl", system-ui, -apple-system, sans-serif;
    --mono: "Cartograph CF", ui-monospace, SFMono-Regular, Menlo, monospace;
}

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

/* Always show the vertical scrollbar, so the layout never shifts between short and long pages. */
html {
    -webkit-text-size-adjust: 100%;
    overflow-y: scroll;
}

body {
    margin: 0;
    background: var(--page);
    color: var(--text);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Fine film grain over the page, to echo the photos. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.35;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.12 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: var(--ink); }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

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

.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    left: 16px; top: -60px;
    z-index: 10;
    padding: 10px 14px;
    background: var(--ink);
    color: var(--page);
}
.skip-link:focus { top: 16px; }

/* Header and footer */

.site-header,
.site-footer,
.shell {
    max-width: 1400px;
    margin: 0 auto;
    padding-left: 16px;
    padding-right: 16px;
}

.site-header {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "logo profile" "filter filter";
    align-items: center;
    gap: 20px 24px;
    padding-top: 28px;
    padding-bottom: 28px;
}

.site-header .logo { grid-area: logo; justify-self: start; }
.site-header .filter { grid-area: filter; }
.site-header .profile { grid-area: profile; }
@media (min-width: 900px) {
    .site-header {
        grid-template-columns: 1fr auto 1fr;
        grid-template-areas: "logo filter profile";
    }
    .site-header .profile { justify-self: end; }
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    text-decoration: none;
}
.logo-full {
    display: block;
    height: 30px;
    width: auto;
    flex-shrink: 0;
}

/* Post type filter, centred in the header on wide screens and on its own row below the logo on narrow ones. */
.filter {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    font-family: var(--mono);
    font-size: 13px;
}
.filter a {
    padding: 6px 12px;
    border-radius: 999px;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.15s, background-color 0.15s;
}
.filter a:hover { color: var(--ink); }
.filter a[aria-current="page"] {
    color: var(--page);
    background: var(--ink);
}

/* Profile photo with a popover of links, ported from ozgur.design. Opens on hover or focus. */
.profile { position: relative; z-index: 20; }
.profile-toggle {
    display: block;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    overflow: hidden;
    background: #262626;
    cursor: pointer;
    transition: border-color 0.15s;
}
.profile-toggle:hover { border-color: rgba(255, 255, 255, 0.25); }
.profile-toggle img { width: 100%; height: 100%; object-fit: cover; }
.profile-menu {
    position: absolute;
    top: 100%;
    right: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: #1A1A1A;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}
/* Invisible bridge over the gap, so the menu stays open while the pointer moves down to it. */
.profile-menu::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    bottom: 100%;
    height: 12px;
}
.profile:hover .profile-menu,
.profile:focus-within .profile-menu {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
.profile-menu a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 6px;
    color: var(--muted);
    transition: color 0.15s, background-color 0.15s;
}
.profile-menu a:hover { color: var(--ink); background: rgba(255, 255, 255, 0.1); }
@media (prefers-reduced-motion: reduce) {
    .profile-menu { transition: none; }
}

.footer-description {
    margin: 0;
    font-family: var(--mono);
    font-size: 13px;
    color: var(--muted);
}

.site-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    margin-top: 48px;
    padding-top: 24px;
    padding-bottom: 40px;
    border-top: 1px solid var(--line);
}
.footer-copy {
    margin: 0;
    font-family: var(--mono);
    font-size: 13px;
    color: var(--muted);
}
/* Same treatment as ozgur.ca's footer icon: 14px, nudged onto the baseline. */
.footer-icon { display: inline-block; vertical-align: -2px; }
/* The mark stands taller than the text. Flex centres it on the line box; the 1.5px nudge moves it to the
   text's optical middle, halfway between the cap-height and x-height centres of this mostly lowercase line. */
.footer-description { display: flex; align-items: center; gap: 8px; }
.footer-mark { flex: none; transform: translateY(1.5px); }

/* Feed: a uniform grid. Every tile is 4:5, the shape of the Instagram photos,
   so photos, quotes and notes line up in even rows. Tiles never get narrower than 320px,
   so 36px quotes and notes keep room to breathe; the column count follows from that (4 at full width). */
.feed {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: var(--gap);
}

/* Cards. All share the tile shape; the tile surface tells the type apart. */

.card { position: relative; min-width: 0; }

.card-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: safe center;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    text-decoration: none;
}
.is-single .card-tile { aspect-ratio: auto; }

/* Photo: the image fills the tile, cropped to 4:5 when it is another shape. */
.card--photo .card-tile { background: var(--surface); }
.card--photo .card-tile .card-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.card--photo .card-tile .card-caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 32px 14px 12px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
    color: #F2F0EA;
    font-size: 13px;
}
.is-single .card-image { width: 100%; }
.is-single .card-caption { margin: 10px 0 0; font-size: 14px; }

/* Quote: inverted tile, larger text. */
.card--quote .card-tile {
    padding: 28px 24px;
    background: var(--quote-bg);
    color: var(--quote-ink);
}
.quote-text {
    margin: 0;
    font-family: var(--sans);
    font-weight: 500;
    /* One size everywhere, feed and post page alike. */
    font-size: 36px;
    line-height: 1.05;
    overflow-wrap: break-word;
    letter-spacing: -0.03em;
}
.quote-text::before,
.blurb-text::before {
    content: "\201C";
    display: block;
    height: 0.55em;
    font-size: 1.1em;
    line-height: 1;
    color: var(--quote-muted);
}
.quote-text p { margin: 0 0 0.5em; }
.quote-text p:last-child { margin-bottom: 0; }
.quote-source {
    margin: 12px 0 0;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--quote-muted);
}
.quote-source cite { font-style: normal; }
/* Blurbs are Oz's own words: the same quote mark, signed "Oz" with the date. */
.blurb-text::before { color: var(--muted); }
.blurb-source {
    margin: 12px 0 0;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--muted);
}

/* Note: light tile with a hairline, sans text, like a post on X. Long notes fade out; the full note is on its own page. */
.card--blurb .card-tile {
    padding: 24px 22px;
    background: var(--surface);
    border: 1px solid var(--line);
}
.blurb-text {
    /* Same size as quotes. */
    font-size: 36px;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--ink);
}
/* Note: a pointer to a note on ozgur.ca. Dark tile like a blurb, but marked with the ozgur.ca logo
   instead of a quote mark, titled at the same 36px, with the description and date below. */
.card--note .card-tile {
    background: var(--surface);
    border: 1px solid var(--line);
}
.note-mark {
    flex: none;
    margin-bottom: 14px;
    color: var(--muted);
}
.note-title {
    margin: 0;
    font-size: 36px;
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--ink);
}
.note-excerpt {
    margin: 14px 0 0;
    font-size: 15px;
    line-height: 1.4;
    color: var(--text);
}
.note-source {
    margin: 12px 0 0;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--muted);
}

/* Song: cover art across the tile, then title and artist, centred in the space left under the cover.
   Its link (to the song's TIDAL page) works like every other card's: on hover. */
.card--song .card-tile {
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    justify-content: flex-start;
}
/* The cover again, blurred and darkened, filling the tile behind the sharp cover and the text. */
.song-backdrop {
    position: absolute;
    top: -20%;
    left: -20%;
    width: 140%;
    max-width: none;
    height: 140%;
    object-fit: cover;
    filter: blur(32px) saturate(1.3);
    opacity: 0.55;
}
.card--song .card-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(10, 10, 10, 0.2), rgba(10, 10, 10, 0.7));
}
/* Layering: backdrop, then its dark gradient, then cover and text, then the link overlay. */
.card--song .card-tile { isolation: isolate; }
.song-backdrop { z-index: -2; }
.card--song .card-tile::after { z-index: -1; }
.song-cover-wrap,
.song-info { position: relative; }
.song-cover {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.song-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding-top: 14px;
}
.song-text { flex: 1; min-width: 0; }
.song-title,
.song-artist {
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.song-title {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--ink);
}
.song-artist {
    margin-top: 2px;
    font-size: 14px;
    line-height: 1.3;
    color: var(--muted);
}

/* Single post: larger cover and title. */
.is-single.card--song .card-tile { padding: 20px; }
.is-single .song-info { padding-top: 20px; }
.is-single .song-title { font-size: 26px; white-space: normal; }
.is-single .song-artist { font-size: 17px; white-space: normal; margin-top: 4px; }

/* Optional "link to": a Button card from the post body. On hover or keyboard focus the whole card
   dims and the button appears centred; the whole card is clickable.
   Everything else in the body stays out of it, and the button stays out of the note, quote and song text. */
.card-link > :not(.kg-button-card),
.blurb-text .kg-button-card,
.quote-text .kg-button-card,
.card-link:not(:has(.kg-button-card)) { display: none; }
.card-link {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 10, 10, 0.55);
    opacity: 0;
    transition: opacity 0.2s ease-out;
}
.card:hover .card-link,
.card-link:focus-within { opacity: 1; }
/* Let the button itself be the centred item, whatever alignment Ghost gave its card. */
.card .card-link .kg-button-card.kg-button-card { display: contents; }
/* The button's link covers the whole card, so the whole card is the hitbox. site.js wraps its text
   in .card-link-label, which draws the pill. Doubled classes beat the accent styling in
   Ghost's own cards stylesheet, which loads after this one. */
.card .card-link .kg-btn.kg-btn {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: #F8F8F8;
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
    text-decoration: none;
}
.card-link-label {
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    /* Solid, like the profile popover, so it looks the same on every card whether dimmed or not. */
    background: #1A1A1A;
}
/* Ghost's cards stylesheet fades buttons to 85% on hover; keep the pill at full strength. */
.card .card-link .kg-btn.kg-btn:hover { opacity: 1; }
.card .card-link .kg-btn.kg-btn:focus-visible { outline: 2px solid #F8F8F8; outline-offset: -4px; }
.is-single .card-link { display: none; }

/* Copy CTA on quotes and blurbs: the same dim and pill as a card link, but it copies the text.
   A card with its own link shows the link instead. */
.card-copy:not([hidden]) {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0;
    border: 0;
    background: rgba(10, 10, 10, 0.55);
    color: #F8F8F8;
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.3;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease-out;
}
.card:hover .card-copy,
.card-copy:focus-visible { opacity: 1; }
.card-copy:focus-visible { outline: 2px solid #F8F8F8; outline-offset: -4px; }
.card:has(.card-link .kg-button-card) .card-copy,
.is-single .card-copy { display: none; }
@media (prefers-reduced-motion: reduce) {
    .card-copy:not([hidden]) { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
    .card-link { transition: none; }
}

/* Text starts top-left in a box the full height of the tile. Text too long for it fades out at the bottom;
   the full text is on the post's own page. */
.tile-inner {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.card:not(.is-single) .tile-inner {
    position: absolute;
    inset: 24px 22px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
}
.blurb-text p { margin: 0 0 0.6em; }
.blurb-text p:last-child { margin-bottom: 0; }

/* Single post */

.single {
    max-width: 720px;
    margin: 8px auto 0;
}
.single .card--quote .card-tile { padding: 48px 40px; }
.single .card--blurb .card-tile { padding: 32px; }
.card-body:not(:empty) { margin-top: 16px; }

.single-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 32px;
    font-family: var(--mono);
    font-size: 13px;
    color: var(--muted);
}
.single-nav a { color: var(--ink); }

/* Pagination: a tight centred group, styled like the filter pills. */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 40px;
    font-family: var(--mono);
    font-size: 13px;
}
.page-step {
    padding: 6px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    text-decoration: none;
    transition: background-color 0.15s, border-color 0.15s;
}
a.page-step:hover { border-color: var(--ink); }
.page-step[aria-disabled="true"] {
    color: var(--muted);
    opacity: 0.4;
    cursor: default;
}
.page-count {
    min-width: 4.5em;
    text-align: center;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}
.page-numbers {
    display: flex;
    align-items: center;
    gap: 4px;
    font-variant-numeric: tabular-nums;
}
.page-number {
    min-width: 32px;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 999px;
    text-align: center;
    color: var(--muted);
    text-decoration: none;
    transition: color 0.15s, border-color 0.15s;
}
a.page-number:hover { color: var(--ink); border-color: var(--line); }
.page-number[aria-current="page"] { color: var(--page); background: var(--ink); }
.page-gap { color: var(--muted); padding: 0 2px; }
/* On narrow screens the numbers take their own row under Newer and Older. */
@media (max-width: 520px) {
    .pagination { flex-wrap: wrap; row-gap: 12px; }
    .page-numbers { order: 3; width: 100%; justify-content: center; }
}

/* Plain pages, e.g. About */

.page {
    max-width: 640px;
    margin: 8px auto 0;
}
.page-title {
    margin: 0 0 24px;
    font-family: var(--sans);
    font-weight: 500;
    letter-spacing: -0.02em;
    font-size: 48px;
    line-height: 1.05;
    color: var(--ink);
}
.page-content { font-size: 17px; }

/* Error page */

.error { padding: 64px 0; text-align: center; }
.error-code { margin: 0; font-family: var(--mono); color: var(--muted); }
.error-message {
    margin: 8px 0 24px;
    font-family: var(--sans);
    font-weight: 500;
    letter-spacing: -0.02em;
    font-size: 40px;
    color: var(--ink);
}

/* Ghost editor cards that themes must support. */

.kg-width-wide,
.kg-width-full { width: 100%; }
.kg-image-card,
.kg-gallery-card,
.kg-embed-card { margin: 1em 0; }
.kg-image { width: 100%; }
figcaption {
    margin-top: 6px;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--muted);
}

@media (min-width: 900px) {
    .site-header, .site-footer, .shell { padding-left: 32px; padding-right: 32px; }
    .site-header { padding-top: 40px; padding-bottom: 40px; }
}