/* ==========================================================================
   SzymonExplores - Phase 2 Stylesheet
   Portfolio (archive + single), Shop (archive + single), About page, Lightbox.
   Depends on: style.css (tokens) + main.css + templates.css
   ========================================================================== */


/* ═══════════════════════════════════════════════════════════════════════
   TABLE OF CONTENTS
   1.  PORTFOLIO ARCHIVE - hero, filter bar, masonry grid
   2.  SINGLE PORTFOLIO - hero, layout, sidebar, nav
   3.  LIGHTBOX
   4.  SHOP ARCHIVE - hero, trust strip, grid, process
   5.  PRINT CARD COMPONENT
   6.  SINGLE PRINT - detail layout, specs, purchase
   7.  ABOUT PAGE - hero, bio, philosophy, pillars, signoff
   8.  RESPONSIVE
   ══════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════
   1. PORTFOLIO ARCHIVE
   ══════════════════════════════════════════════════════════════════════ */

.portfolio-archive-header {
    padding: clamp(3rem, 7vw, 6rem) 0 clamp(2rem, 4vw, 3rem);
    background: var(--clr-bg);
    text-align: center;
}

.portfolio-archive-header__eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--clr-accent-strong);
    margin-bottom: var(--sp-4);
}

.portfolio-archive-header__title {
    font-family: var(--font-display);
    font-size: clamp(2.75rem, 7vw, 5.5rem);
    font-weight: 500;
    color: var(--clr-text);
    line-height: 1.02;
    letter-spacing: -0.02em;
    margin: 0 auto var(--sp-5);
}

.portfolio-archive-header__desc {
    font-size: var(--text-lg);
    color: var(--clr-text-muted);
    max-width: 56ch;
    margin: 0 auto;
    line-height: 1.6;
}

.portfolio-archive-header__desc strong {
    color: var(--clr-text);
    font-weight: 600;
}

/* ── Filter bar (sticky) ─────────────────────────────────────────────── */
.portfolio-filter-bar {
    position: sticky;
    top: var(--header-height);
    z-index: var(--z-sticky);
    background: rgba(250,248,243,0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: var(--border);
}

.portfolio-filter-bar .container {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.portfolio-filter-bar .container::-webkit-scrollbar {
    display: none;
}

.portfolio-filter-bar__list {
    display: flex;
    align-items: center;
    gap: 0;
    list-style: none;
    padding: var(--sp-2) 0;
    white-space: nowrap;
}

.portfolio-filter-bar__link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-5);
    font-size: var(--text-sm);
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--clr-text-muted);
    text-decoration: none;
    border-radius: var(--radius-full);
    transition: color var(--dur-fast), background var(--dur-fast);
}

.portfolio-filter-bar__link:hover {
    color: var(--clr-text);
    background: var(--clr-bg-alt);
}

.portfolio-filter-bar__link.is-active {
    color: var(--clr-text);
    background: var(--clr-ink);
    color: var(--clr-white);
}

.portfolio-filter-bar__count {
    font-size: var(--text-xs);
    opacity: 0.6;
}

/* ── Masonry grid ─────────────────────────────────────────────────────── */
.portfolio-archive-grid {
    padding: var(--sp-16) 0 var(--sp-24);
}

.portfolio-masonry {
    /* True masonry via CSS multi-column - cards pack vertically with no row
       gaps. Column count is responsive (breakpoints below). */
    column-count: 1;
    column-gap: clamp(1.5rem, 3vw, 2rem);
}
@media (min-width: 600px) {
    .portfolio-masonry { column-count: 2; }
}

.portfolio-masonry__item {
    position: relative;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin: 0 0 clamp(1.5rem, 3vw, 2rem);
}

.portfolio-masonry__link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.portfolio-masonry__image-wrap {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--clr-bg-alt);
    line-height: 0;
}

.portfolio-masonry__image {
    width: 100%;
    height: auto;
    display: block;
    transition: transform var(--dur-slow) var(--ease-out);
    will-change: transform;
}

.portfolio-masonry__link:hover .portfolio-masonry__image {
    transform: scale(1.03);
}

.portfolio-masonry__image--placeholder {
    aspect-ratio: 3 / 2;
    background: linear-gradient(135deg, var(--clr-bg-alt), var(--clr-bg));
}

/* Hover overlay - restrained: a quiet darkening + single CTA */
.portfolio-masonry__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(23,20,15,0.55) 0%, rgba(23,20,15,0.05) 55%, transparent 100%);
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-out);
    display: flex;
    align-items: flex-end;
    padding: var(--sp-6);
}

.portfolio-masonry__link:hover .portfolio-masonry__overlay,
.portfolio-masonry__link:focus-visible .portfolio-masonry__overlay {
    opacity: 1;
}

.portfolio-masonry__cat {
    display: block;
    color: var(--clr-accent-bright);
    margin-bottom: var(--sp-2);
}

.portfolio-masonry__view {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--clr-white);
}

/* Caption */
.portfolio-masonry__caption {
    padding: var(--sp-4) 0 0;
}

.portfolio-masonry__title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 500;
    color: var(--clr-text);
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin-bottom: var(--sp-2);
}

.portfolio-masonry__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-4);
}

.portfolio-masonry__location,
.portfolio-masonry__date,
.portfolio-masonry__count {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--clr-text-muted);
}

.portfolio-masonry__location svg {
    color: var(--clr-accent);
    flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════════════════
   2. SINGLE PORTFOLIO
   ══════════════════════════════════════════════════════════════════════ */

/* Layout */
.portfolio-layout {
    padding: var(--sp-16) 0 var(--sp-20);
}

.portfolio-layout__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-12);
    align-items: start;
}

/* Intro */
.portfolio-intro {
    margin-bottom: var(--sp-10);
}

.portfolio-intro__text {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 400;
    line-height: 1.5;
    color: var(--clr-text);
    font-style: italic;
}

/* Gallery content - style Gutenberg galleries/images inside */
.portfolio-gallery-content img {
    border-radius: var(--radius-md);
    margin: var(--sp-6) 0;
    cursor: zoom-in;
}

.portfolio-gallery-content .wp-block-gallery {
    margin: var(--sp-8) 0;
    gap: var(--sp-4) !important;
}

.portfolio-gallery-content .wp-block-image figcaption {
    margin-top: var(--sp-2);
}

/* Sidebar */
.portfolio-sidebar {
    position: sticky;
    top: calc(var(--header-height) + var(--sp-6));
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}

/* Technical details list */
.portfolio-tech-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.portfolio-tech-list__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
    border-bottom: var(--border);
}

.portfolio-tech-list__row:last-child {
    border-bottom: none;
}

.portfolio-tech-list__key {
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--clr-text-muted);
    flex-shrink: 0;
}

.portfolio-tech-list__val {
    font-size: var(--text-sm);
    color: var(--clr-text);
    text-align: right;
    margin: 0;
}

/* Sidebar prints */
.sidebar-prints {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    list-style: none;
}

.sidebar-prints__item {
    display: flex;
    gap: var(--sp-3);
    align-items: center;
}

.sidebar-prints__thumb {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    overflow: hidden;
    border-radius: var(--radius-sm);
}

.sidebar-prints__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sidebar-prints__title {
    display: block;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--clr-text);
    text-decoration: none;
    line-height: 1.3;
    transition: color var(--dur-fast);
}

.sidebar-prints__title:hover {
    color: var(--clr-accent-strong);
}

.sidebar-prints__price {
    display: block;
    font-size: var(--text-xs);
    color: var(--clr-accent-strong);
    margin-top: 2px;
}

/* Share */
.portfolio-share {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

.portfolio-share__btn {
    display: inline-flex;
    align-items: center;
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--clr-text-muted);
    border: var(--border);
    border-radius: var(--radius-full);
    text-decoration: none;
    transition: border-color var(--dur-fast), color var(--dur-fast);
}

.portfolio-share__btn:hover {
    border-color: var(--clr-accent);
    color: var(--clr-accent-strong);
}

/* Adjacent navigation */
.portfolio-nav {
    display: grid;
    grid-template-columns: 1fr;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.portfolio-nav__item {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    padding: var(--sp-8) var(--gutter);
    background: var(--clr-ink);
    text-decoration: none;
    color: inherit;
    transition: background var(--dur-base);
    overflow: hidden;
}

.portfolio-nav__item:hover {
    background: var(--clr-ink-soft);
}

.portfolio-nav__item--next {
    flex-direction: row-reverse;
    text-align: right;
}

.portfolio-nav__thumb {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    background-size: cover;
    background-position: center;
    border-radius: var(--radius-sm);
}

.portfolio-nav__direction {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--clr-accent-bright);
    margin-bottom: var(--sp-2);
}

.portfolio-nav__item--next .portfolio-nav__direction {
    justify-content: flex-end;
}

.portfolio-nav__title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 400;
    color: var(--clr-white);
    line-height: 1.2;
}


/* ═══════════════════════════════════════════════════════════════════════
   3. LIGHTBOX
   ══════════════════════════════════════════════════════════════════════ */

.se-lightbox {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity var(--dur-base) var(--ease-out), visibility 0s var(--dur-base);
}

.se-lightbox.is-open {
    opacity: 1;
    pointer-events: all;
    visibility: visible;
    transition: opacity var(--dur-base) var(--ease-out), visibility 0s 0s;
}

.se-lightbox__overlay {
    position: absolute;
    inset: 0;
    background: rgba(8,8,6,0.96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.se-lightbox__stage {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-8);
}

.se-lightbox__image-wrap {
    position: relative;
    max-width: 90vw;
    max-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.se-lightbox__image {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: var(--radius-sm);
    box-shadow: 0 24px 80px rgba(0,0,0,0.6);
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-out);
}

.se-lightbox__image.is-loaded {
    opacity: 1;
}

.se-lightbox__loader {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 36px;
    height: 36px;
    margin: -18px 0 0 -18px;
    border: 2px solid rgba(255,255,255,0.15);
    border-top-color: var(--clr-accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    opacity: 0;
    transition: opacity var(--dur-fast);
}

.se-lightbox__loader.is-active {
    opacity: 1;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Close + nav buttons */
.se-lightbox__close {
    position: absolute;
    top: var(--sp-6);
    right: var(--sp-6);
    z-index: 2;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.7);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 50%;
    background: rgba(0,0,0,0.3);
    transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}

.se-lightbox__close:hover {
    color: var(--clr-white);
    border-color: rgba(255,255,255,0.4);
    background: rgba(0,0,0,0.5);
}

.se-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.6);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 50%;
    background: rgba(0,0,0,0.25);
    transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}

.se-lightbox__nav:hover {
    color: var(--clr-white);
    border-color: rgba(255,255,255,0.4);
    background: rgba(0,0,0,0.5);
}

.se-lightbox__nav--prev { left: var(--sp-6); }
.se-lightbox__nav--next { right: var(--sp-6); }

.se-lightbox__nav:disabled {
    opacity: 0.2;
    cursor: not-allowed;
}

/* Info bar */
.se-lightbox__info {
    position: absolute;
    bottom: var(--sp-6);
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    text-align: center;
    max-width: 80vw;
}

.se-lightbox__caption {
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.7);
    margin-bottom: var(--sp-1);
}

.se-lightbox__counter {
    font-size: var(--text-xs);
    color: rgba(255,255,255,0.4);
    letter-spacing: 0.1em;
}


/* ═══════════════════════════════════════════════════════════════════════
   4. SHOP ARCHIVE
   ══════════════════════════════════════════════════════════════════════ */

.shop-hero {
    background: var(--clr-ink);
    color: var(--clr-white);
    padding: var(--sp-24) 0 var(--sp-16);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.shop-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 0%, rgba(28,140,160,0.1) 0%, transparent 60%);
    pointer-events: none;
}

.shop-hero__content {
    position: relative;
    z-index: 1;
    max-width: 640px;
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.shop-hero__title {
    font-family: var(--font-display);
    font-size: var(--text-6xl);
    font-weight: 400;
    color: var(--clr-white);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: var(--sp-3) 0 var(--sp-5);
}

.shop-hero__sub {
    font-size: var(--text-lg);
    color: rgba(255,255,255,0.55);
    line-height: 1.65;
    margin-bottom: var(--sp-10);
}

/* Trust strip */
.shop-trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--sp-6);
    padding-top: var(--sp-8);
    border-top: 1px solid rgba(255,255,255,0.08);
}

.shop-trust__item {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.02em;
}

.shop-trust__item svg {
    color: var(--clr-accent);
    flex-shrink: 0;
}

/* Shop grid */
.shop-archive {
    padding: var(--sp-16) 0 var(--sp-20);
}

.shop-grid {
    /* Masonry via CSS multi-column: cards flow top-to-bottom and fill the
       shortest column, so a short landscape card lets the next print rise into
       the gap instead of leaving dead space. Column count is responsive; each
       card's label sits directly beneath its own image (no row alignment). */
    column-count: 1;
    column-gap: var(--sp-6);
}
@media (min-width: 600px) {
    .shop-grid { column-count: 2; }
}
.shop-grid > * {
    break-inside: avoid;               /* never split a card across columns */
    -webkit-column-break-inside: avoid;
    margin: 0 0 var(--sp-8);           /* vertical rhythm between stacked cards */
}

/* Process steps */
.shop-quality {
    padding: var(--sp-20) 0;
}

.shop-process {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-6);
    margin-top: var(--sp-8);
}

.shop-process__step {
    display: flex;
    gap: var(--sp-5);
    align-items: flex-start;
    padding: var(--sp-6);
    background: var(--clr-surface);
    border-radius: var(--radius-md);
    border: var(--border);
}

.shop-process__num {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 400;
    color: var(--clr-accent);
    line-height: 1;
    flex-shrink: 0;
}

.shop-process__title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 400;
    color: var(--clr-text);
    margin-bottom: var(--sp-2);
}

.shop-process__text {
    font-size: var(--text-sm);
    color: var(--clr-text-muted);
    line-height: 1.65;
    margin: 0;
}


/* ═══════════════════════════════════════════════════════════════════════
   5. PRINT CARD COMPONENT
   ══════════════════════════════════════════════════════════════════════ */

.print-card {
    background: var(--clr-surface);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.print-card:hover {
    box-shadow: var(--shadow-xl);
    transform: translateY(-4px);
}

.print-card__link {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-decoration: none;
    color: inherit;
}

/* Each orientation gets its OWN container shape, so a portrait card is taller
   than a landscape card - different sizes, each print at its natural
   proportion. The image fills that shape centred (never top-aligned with dead
   space below). Container ratio equals the print's orientation ratio, so
   "cover" shows the whole print with no real crop; reserving the ratio also
   gives zero layout shift while images load. */
.print-card__image-wrap {
    position: relative;
    overflow: hidden;
    background: var(--clr-bg-alt);
    line-height: 0;
}
.print-card__image-wrap--portrait  { aspect-ratio: 2 / 3; }
.print-card__image-wrap--land      { aspect-ratio: 3 / 2; }
.print-card__image-wrap--square    { aspect-ratio: 1 / 1; }

.print-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform var(--dur-slow) var(--ease-out);
    will-change: transform;
}

.print-card:hover .print-card__image {
    transform: scale(1.02);
}

.print-card__image--placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--clr-bg-alt), var(--clr-bg));
}

.print-card__badge {
    position: absolute;
    top: var(--sp-4);
    left: var(--sp-4);
    width: fit-content;
    max-width: calc(100% - var(--sp-6));
    white-space: nowrap;
    line-height: 1;
    background: rgba(23,20,15,0.85);
    color: var(--clr-accent-bright);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--radius-full);
    border: 1px solid rgba(28,140,160,0.3);
    backdrop-filter: blur(4px);
}

.print-card__overlay {
    /* Retired for the gallery-mat card: nothing covers the print on
       hover - the lift + label CTA carry the affordance. Markup kept. */
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(23,20,15,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-out);
}

.print-card:hover .print-card__overlay {
    opacity: 1;
}

.print-card__overlay-text {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--clr-white);
    padding: var(--sp-3) var(--sp-6);
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: var(--radius-full);
}

.print-card__body {
    /* Museum label sits directly under its own image (masonry: no stretch). */
    padding: var(--sp-4) var(--sp-5);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--sp-1);
}

.print-card__title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 400;
    color: var(--clr-text);
    line-height: 1.2;
    margin-bottom: 0;
    text-wrap: balance;
}

.print-card__spec-line {
    font-size: var(--text-xs);
    color: var(--clr-text-muted);
    margin: 0;
}

.print-card__pricing {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: var(--sp-1) var(--sp-3);
}

/* Quiet separator between price and the CTA when both are present. */
.print-card__price ~ .print-card__cta-label::before {
    content: '·';
    color: var(--clr-text-muted);
    margin-right: var(--sp-2);
}

.print-card__price {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--clr-text);
    white-space: nowrap;
}

.print-card__cta-label {
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--clr-accent-strong);
}


/* ═══════════════════════════════════════════════════════════════════════
   6. SINGLE PRINT
   ══════════════════════════════════════════════════════════════════════ */

.print-detail {
    padding-top: var(--sp-8);
}

.breadcrumb__list--dark .breadcrumb__link--dark { color: var(--clr-text-muted); }
.breadcrumb__list--dark .breadcrumb__link--dark:hover { color: var(--clr-accent-strong); }
.breadcrumb__sep--dark { color: var(--clr-text-muted); }
.breadcrumb__list--dark .breadcrumb__item--current { color: var(--clr-text-muted); }

.print-detail__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-10);
    align-items: stretch;   /* image frame matches the info column height */
    margin-top: var(--sp-6);
}

/* Image column */
.print-detail__image-col {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Consistent frame: one fixed height for every orientation, aligned with the
   info column on the right. The print is contained and centred inside, so a
   landscape sits mid-height and a portrait mid-width - fitting neatly, never
   cropped. Per-orientation padding removes the mat on the print's long edge
   (no top/bottom band for a portrait; no left/right band for landscape or
   square), while keeping a slim mount on the short edges. */
.print-detail__image-wrap {
    position: relative;
    height: 100%;
    min-height: clamp(420px, 56vh, 680px);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    background: var(--clr-bg-alt);
    display: grid;
    place-items: center;
    line-height: 0;
}

.print-detail__image {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Trim the mat on the print's long edge; keep a slim mount on the short edge.
   (Orientation class is set from the real image ratio in single-print.php.) */
.print-detail__image-col.is-portrait  .print-detail__image-wrap { padding: 0 clamp(8px, 1.4vw, 16px); }
.print-detail__image-col.is-landscape .print-detail__image-wrap { padding: clamp(8px, 1.4vw, 16px) 0; }
.print-detail__image-col.is-square    .print-detail__image-wrap { padding: clamp(8px, 1.4vw, 16px) 0; }

.print-detail__edition-badge {
    position: absolute;
    top: var(--sp-4);
    left: var(--sp-4);
    background: rgba(23,20,15,0.85);
    color: var(--clr-accent-bright);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--radius-full);
    border: 1px solid rgba(28,140,160,0.3);
    backdrop-filter: blur(4px);
}

.print-detail__cert {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
    font-size: var(--text-sm);
    color: var(--clr-text-muted);
}

.print-detail__cert svg {
    color: var(--clr-accent);
    flex-shrink: 0;
}

/* Info column */
.print-detail__location {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    color: var(--clr-accent-strong);
    margin-bottom: var(--sp-3);
}

.print-detail__title {
    font-family: var(--font-display);
    font-size: var(--text-5xl);
    font-weight: 400;
    color: var(--clr-text);
    line-height: 1.1;
    letter-spacing: -0.015em;
    margin-bottom: var(--sp-4);
}

.print-detail__excerpt {
    font-size: var(--text-lg);
    color: var(--clr-text-muted);
    line-height: 1.6;
    margin-bottom: var(--sp-6);
}

.print-detail__price-block {
    padding: var(--sp-5) 0;
    border-top: var(--border);
    border-bottom: var(--border);
    margin-bottom: var(--sp-6);
}

.print-detail__price {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: 400;
    color: var(--clr-text);
}

/* Specs */
.print-detail__specs {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: var(--sp-8);
}

.print-detail__spec-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-4);
    padding: var(--sp-3) 0;
    border-bottom: var(--border);
}

.print-detail__spec-key {
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--clr-text-muted);
    flex-shrink: 0;
}

.print-detail__spec-val {
    font-size: var(--text-sm);
    color: var(--clr-text);
    text-align: right;
    margin: 0;
}

/* Actions */
.print-detail__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-bottom: var(--sp-6);
}

.print-detail__buy-btn {
    flex: 1;
    min-width: 200px;
}

.print-detail__no-buy {
    flex: 1;
    padding: var(--sp-4);
    background: var(--clr-bg-alt);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--clr-text-muted);
    font-style: italic;
    text-align: center;
    margin: 0;
}

.print-detail__assurance {
    padding: var(--sp-4);
    background: var(--clr-bg-alt);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--clr-accent);
}

.print-detail__assurance p {
    font-size: var(--text-sm);
    color: var(--clr-text-muted);
    line-height: 1.6;
    margin: 0;
}

/* Full description */
.print-detail__full-desc {
    max-width: var(--container-prose);
    margin: var(--sp-16) auto 0;
    padding-top: var(--sp-12);
    border-top: var(--border);
}

.print-detail__full-desc h2 {
    font-size: var(--text-3xl);
    margin-bottom: var(--sp-5);
}

/* Related grid 3-col override */
.shop-grid--3col {
    /* column count handled by responsive breakpoints below */
}


/* ═══════════════════════════════════════════════════════════════════════
   7. ABOUT PAGE
   ══════════════════════════════════════════════════════════════════════ */

.about-hero {
    position: relative;
    min-height: 90vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--clr-ink);
}

.about-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: var(--about-hero-pos, center); /* Customizer: About hero focus */
    transform-origin: var(--about-hero-pos, center);
    animation: heroZoom 20s ease-out forwards;
}

.about-hero__bg--gradient {
    background:
        radial-gradient(circle at 30% 40%, rgba(28,140,160,0.16) 0%, transparent 55%),
        radial-gradient(circle at 75% 65%, rgba(47,99,83,0.12) 0%, transparent 55%),
        linear-gradient(135deg, #17140F 0%, #221C16 55%, #14100A 100%);
}

.about-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, rgba(23,20,15,0.85) 0%, rgba(23,20,15,0.5) 50%, rgba(23,20,15,0.7) 100%);
}

.about-hero__content {
    position: relative;
    z-index: var(--z-above);
    padding: var(--sp-16) var(--gutter);
    width: 100%;
}

.about-hero__title {
    font-family: var(--font-display);
    /* Fluid floor so "Kwiatkowski" always fits one line on small phones
       (11vw × 11 glyphs ≈ 60vw used at 360px); token cap keeps desktop. */
    font-size: clamp(2.4rem, 11vw, var(--text-7xl));
    font-weight: 400;
    color: var(--clr-white);
    line-height: 0.98;
    letter-spacing: -0.03em;
    margin: var(--sp-4) 0 var(--sp-5);
    hyphens: none;
    overflow-wrap: normal;
    word-break: keep-all;
    text-wrap: balance;
}

.about-hero__title em {
    color: var(--clr-accent-bright);
    font-style: italic;
}

.about-hero__role {
    font-size: var(--text-base);
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.06em;
}

/* Opening statement */
.about-opening {
    padding: var(--sp-24) 0;
    text-align: center;
}

.about-opening__text {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: 400;
    line-height: 1.4;
    color: var(--clr-text);
    letter-spacing: -0.01em;
}

/* Stats strip */
.about-stats-strip {
    background: var(--clr-ink);
    padding: var(--sp-12) 0;
}

.about-stats-strip__inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-8);
    text-align: center;
}

.about-stats-strip__stat {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.about-stats-strip__value {
    font-family: var(--font-display);
    font-size: var(--text-5xl);
    font-weight: 400;
    color: var(--clr-accent-bright);
    line-height: 1;
}

.about-stats-strip__label {
    font-size: var(--text-xs);
    color: rgba(255,255,255,0.45);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

/* Bio section */
.about-bio {
    padding: var(--sp-24) 0;
}

.about-bio__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-12);
    align-items: start;
}

.about-bio__portrait-col {
    position: relative;
}

.about-portrait-wrap {
    position: relative;
    max-width: 420px;
}

.about-portrait {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: var(--about-focus, 50% 50%); /* Customizer: About portrait vertical focus */
    display: block;
    position: relative;
    z-index: 1;
    border-radius: var(--radius-sm);
}

.about-portrait--placeholder {
    background: linear-gradient(135deg, var(--clr-mist), var(--clr-bg-alt));
}

.about-portrait__frame {
    position: absolute;
    top: var(--sp-5);
    left: var(--sp-5);
    right: calc(-1 * var(--sp-5));
    bottom: calc(-1 * var(--sp-5));
    border: 1px solid var(--clr-accent);
    opacity: 0.4;
    z-index: 0;
    border-radius: var(--radius-sm);
}

.about-bio__status {
    margin-top: var(--sp-8);
}

.about-bio__heading {
    font-family: var(--font-display);
    font-size: var(--text-5xl);
    font-weight: 400;
    color: var(--clr-text);
    line-height: 1.05;
    letter-spacing: -0.015em;
    margin-bottom: var(--sp-6);
}

.about-bio__heading em {
    color: var(--clr-accent-strong);
    font-style: italic;
}

.about-bio__prose p {
    font-size: var(--text-lg);
    line-height: 1.85;
    color: var(--clr-text);
    margin-bottom: var(--sp-5);
}

/* Pull quote */
.about-pullquote {
    margin: var(--sp-10) 0;
    padding: var(--sp-6) 0 var(--sp-6) var(--sp-8);
    border-left: 3px solid var(--clr-accent);
}

.about-pullquote__text {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 400;
    font-style: italic;
    line-height: 1.4;
    color: var(--clr-text);
    margin-bottom: var(--sp-4);
}

.about-pullquote__cite {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-style: normal;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--clr-accent-strong);
}

.about-pullquote--light .about-pullquote__text {
    color: var(--clr-white);
}

.about-pullquote--light .about-pullquote__cite {
    color: var(--clr-accent-bright);
}

/* Philosophy */
.about-philosophy {
    padding: var(--sp-24) 0;
}

.about-philosophy__heading {
    font-family: var(--font-display);
    font-size: var(--text-5xl);
    font-weight: 400;
    color: var(--clr-white);
    line-height: 1.05;
    letter-spacing: -0.015em;
    margin: var(--sp-3) 0 var(--sp-8);
}

.about-philosophy__heading em {
    color: var(--clr-accent-bright);
    font-style: italic;
}

.about-philosophy__body p {
    font-size: var(--text-lg);
    line-height: 1.85;
    color: rgba(255,255,255,0.65);
    margin-bottom: var(--sp-5);
}

/* Approach pillars */
.about-approach {
    padding: var(--sp-24) 0;
}

.about-pillars {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-8);
}

.about-pillar {
    text-align: center;
    padding: var(--sp-8) var(--sp-6);
}

.about-pillar__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: var(--sp-5);
    color: var(--clr-accent);
    border: 1px solid var(--clr-mist);
    border-radius: 50%;
}

.about-pillar__title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 400;
    color: var(--clr-text);
    margin-bottom: var(--sp-3);
}

.about-pillar__text {
    font-size: var(--text-base);
    color: var(--clr-text-muted);
    line-height: 1.7;
}

/* Sign-off */
.about-signoff {
    padding: var(--sp-24) 0;
    text-align: center;
}

.about-signoff__thanks {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 400;
    font-style: italic;
    color: var(--clr-text);
    margin-bottom: var(--sp-3);
}

.about-signoff__name {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    color: var(--clr-accent-strong);
    margin-bottom: var(--sp-8);
}

.about-signoff__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
}


/* ═══════════════════════════════════════════════════════════════════════
   8. RESPONSIVE
   ══════════════════════════════════════════════════════════════════════ */

@media screen and (min-width: 48rem) {

    .portfolio-masonry {
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(1.5rem, 2.5vw, 2.25rem);
    }

    /* (Wide-span items are not used in column masonry.) */

    .portfolio-layout__inner {
        grid-template-columns: 1fr 300px;
        gap: var(--sp-16);
    }

    .portfolio-nav {
        grid-template-columns: 1fr 1fr;
    }

    .portfolio-nav__item--prev {
        border-right: 1px solid rgba(255,255,255,0.08);
    }

    .print-detail__inner {
        grid-template-columns: 1.1fr 1fr;
        gap: var(--sp-16);
    }

    .about-bio__inner {
        grid-template-columns: 0.85fr 1fr;
        gap: var(--sp-16);
        align-items: center;
    }

    .about-stats-strip__inner {
        grid-template-columns: repeat(4, 1fr);
    }

    .about-pillars {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--sp-6);
    }

    .shop-process {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 64rem) {

    .portfolio-masonry {
        column-count: 3;
    }

    .portfolio-layout__inner {
        grid-template-columns: 1fr 340px;
        gap: var(--sp-20);
    }

    .shop-grid {
        column-count: 3;
    }

    .shop-grid--3col {
        column-count: 3;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   9. CONTACT PAGE
   ══════════════════════════════════════════════════════════════════════ */

.contact-header {
    background: var(--clr-ink);
    color: var(--clr-white);
    padding: var(--sp-20) 0 var(--sp-16);
    text-align: center;
}

.contact-header__title {
    font-family: var(--font-display);
    font-size: var(--text-6xl);
    font-weight: 400;
    color: var(--clr-white);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: var(--sp-3) 0 var(--sp-5);
}

.contact-header__title em {
    color: var(--clr-accent-bright);
    font-style: italic;
}

.contact-header__sub {
    font-size: var(--text-lg);
    color: rgba(255,255,255,0.55);
    max-width: 540px;
    margin: 0 auto;
    line-height: 1.65;
}

.contact-body {
    padding: var(--sp-20) 0;
}

.contact-body__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-12);
    align-items: start;
}

/* Form */
.contact-form__honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-form__fieldset {
    border: none;
    padding: 0;
    margin: 0 0 var(--sp-6);
}

.contact-form__legend {
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--clr-text-muted);
    margin-bottom: var(--sp-3);
    padding: 0;
}

.contact-form__type-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-2);
}

.contact-type {
    position: relative;
    cursor: pointer;
}

.contact-type__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.contact-type__label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--text-sm);
    color: var(--clr-text-muted);
    background: var(--clr-surface);
    border: var(--border);
    border-radius: var(--radius-sm);
    text-align: center;
    transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
}

.contact-type__input:checked + .contact-type__label {
    border-color: var(--clr-accent);
    background: rgba(28,140,160,0.08);
    color: var(--clr-text);
    font-weight: 500;
}

.contact-type__input:focus-visible + .contact-type__label {
    outline: 2px solid var(--clr-accent);
    outline-offset: 2px;
}

.contact-form__field {
    margin-bottom: var(--sp-5);
}

.contact-form__label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--clr-text);
    margin-bottom: var(--sp-2);
}

.contact-form__required {
    color: var(--clr-accent-strong);
}

.contact-form__input,
.contact-form__textarea {
    width: 100%;
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--text-base);
    font-family: var(--font-body);
    color: var(--clr-text);
    background: var(--clr-surface);
    border: var(--border);
    border-radius: var(--radius-sm);
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}

.contact-form__input:focus,
.contact-form__textarea:focus {
    outline: none;
    border-color: var(--clr-accent);
    box-shadow: 0 0 0 3px rgba(28,140,160,0.12);
}

.contact-form__textarea {
    resize: vertical;
    min-height: 140px;
    line-height: 1.6;
}

.contact-form__submit-row {
    margin-top: var(--sp-6);
}

.contact-form__submit {
    width: 100%;
}

.contact-form__submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Status messages */
.contact-form__status {
    margin-top: var(--sp-4);
    padding: 0;
    font-size: var(--text-sm);
    border-radius: var(--radius-sm);
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity var(--dur-base), max-height var(--dur-base), padding var(--dur-base);
}

.contact-form__status.is-visible {
    opacity: 1;
    max-height: 120px;
    padding: var(--sp-3) var(--sp-4);
}

.contact-form__status--success {
    background: rgba(47, 99, 83,0.12);
    color: #4a6152;
    border: 1px solid rgba(47, 99, 83,0.3);
}

.contact-form__status--error {
    background: rgba(180,90,70,0.08);
    color: #9a4530;
    border: 1px solid rgba(180,90,70,0.25);
}

/* Info column */
.contact-info-col {
    display: flex;
    flex-direction: column;
    gap: var(--sp-8);
}

.contact-info-block {
    padding-bottom: var(--sp-6);
    border-bottom: var(--border);
}

.contact-info-block:last-child {
    border-bottom: none;
}

.contact-info-block--accent {
    background: var(--clr-bg-alt);
    padding: var(--sp-6);
    border-radius: var(--radius-md);
    border-bottom: none;
}

.contact-info-block__heading {
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--clr-text-muted);
    margin-bottom: var(--sp-3);
}

.contact-info-block__link {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    color: var(--clr-text);
    text-decoration: none;
    transition: color var(--dur-fast);
    word-break: break-word;
}

.contact-info-block__link:hover {
    color: var(--clr-accent-strong);
}

/* Secondary address (licensing) - subordinate to the primary one above it. */
.contact-info-block__alt {
    margin-top: var(--sp-4);
}

.contact-info-block__alt-label {
    display: block;
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--clr-text-muted);
    margin-bottom: var(--sp-1);
}

.contact-info-block__alt-link {
    font-size: var(--text-sm);
    color: var(--clr-text);
    text-decoration: none;
    transition: color var(--dur-fast);
    word-break: break-word;
}

.contact-info-block__alt-link:hover,
.contact-info-block__alt-link:focus-visible {
    color: var(--clr-accent-strong);
}

.contact-info-block__text {
    font-size: var(--text-lg);
    color: var(--clr-text);
}

.contact-info-block__note {
    font-size: var(--text-sm);
    color: var(--clr-text-muted);
    line-height: 1.6;
    margin-top: var(--sp-2);
}

.social-links--dark .menu-item a {
    border-color: var(--clr-mist);
    color: var(--clr-text-muted);
}

.social-links--dark .menu-item a:hover {
    border-color: var(--clr-accent);
    color: var(--clr-accent-strong);
    background: rgba(28,140,160,0.06);
}


/* ═══════════════════════════════════════════════════════════════════════
   10. SEARCH RESULTS
   ══════════════════════════════════════════════════════════════════════ */

.search-header {
    background: var(--clr-ink);
    color: var(--clr-white);
    padding: var(--sp-20) 0 var(--sp-12);
    text-align: center;
}

.search-header__title {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: 400;
    color: var(--clr-white);
    margin: var(--sp-3) 0 var(--sp-8);
    line-height: 1.15;
}

.search-header__form {
    max-width: 480px;
    margin: 0 auto;
}

.search-header__form .search-form {
    display: flex;
    gap: var(--sp-2);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: var(--radius-sm);
    padding: var(--sp-2) var(--sp-3);
    transition: border-color var(--dur-base);
}

.search-header__form .search-form:focus-within {
    border-color: var(--clr-accent);
}

.search-header__form .search-field {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    padding: var(--sp-2);
    color: var(--clr-white);
    font-size: var(--text-base);
}

.search-header__form .search-field::placeholder {
    color: rgba(255,255,255,0.3);
}

.search-header__form .search-submit {
    background: var(--clr-accent);
    color: var(--clr-on-accent);
    border: none;
    padding: var(--sp-2) var(--sp-5);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--dur-fast);
}

.search-header__form .search-submit:hover {
    background: var(--clr-accent-bright);
}

.search-results {
    padding: var(--sp-16) 0 var(--sp-20);
}

.search-results__list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    list-style: none;
    max-width: var(--container-narrow);
    margin: 0 auto;
}

.search-result {
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: background var(--dur-base);
}

.search-result__link {
    display: flex;
    gap: var(--sp-5);
    align-items: center;
    padding: var(--sp-4);
    text-decoration: none;
    color: inherit;
    border: var(--border);
    border-radius: var(--radius-md);
    transition: border-color var(--dur-base), box-shadow var(--dur-base);
}

.search-result__link:hover {
    border-color: var(--clr-accent);
    box-shadow: var(--shadow-md);
}

.search-result__thumb {
    flex-shrink: 0;
    width: 120px;
    height: 90px;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--clr-mist);
}

.search-result__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.search-result__body {
    flex: 1;
    min-width: 0;
}

.search-result__type {
    display: block;
    margin-bottom: var(--sp-1);
}

.search-result__title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 400;
    color: var(--clr-text);
    line-height: 1.25;
    margin-bottom: var(--sp-2);
}

.search-result__excerpt {
    font-size: var(--text-sm);
    color: var(--clr-text-muted);
    line-height: 1.6;
    margin-bottom: var(--sp-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.search-result__more {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--clr-accent-strong);
}

/* Empty state */
.search-empty {
    text-align: center;
    padding: var(--sp-16) 0;
    max-width: 480px;
    margin: 0 auto;
}

.search-empty__icon {
    margin-bottom: var(--sp-5);
}

.search-empty__icon svg {
    margin: 0 auto;
}

.search-empty__text {
    font-size: var(--text-lg);
    color: var(--clr-text-muted);
    margin-bottom: var(--sp-8);
    line-height: 1.6;
}

.search-empty__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
}

@media screen and (min-width: 48rem) {
    .contact-body__inner {
        grid-template-columns: 1.4fr 1fr;
        gap: var(--sp-16);
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   11. NEWSLETTER STATUS (Phase 3C)
   ══════════════════════════════════════════════════════════════════════ */

.newsletter__status {
    margin-top: var(--sp-3);
    font-size: var(--text-sm);
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity var(--dur-base), max-height var(--dur-base);
}

.newsletter__status.is-visible {
    opacity: 1;
    max-height: 80px;
}

.newsletter__status--success {
    color: var(--clr-accent-bright);
}

.newsletter__status--error {
    color: #e0a89a;
}

.newsletter__submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}


/* ═══════════════════════════════════════════════════════════════════════
   12. PORTFOLIO SPOTLIGHT (featured latest series)
   ══════════════════════════════════════════════════════════════════════ */

.portfolio-spotlight {
    margin-bottom: var(--sp-12);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--clr-ink);
    box-shadow: var(--shadow-lg);
}

.portfolio-spotlight__link {
    display: grid;
    grid-template-columns: 1fr;
    text-decoration: none;
    color: inherit;
    min-height: 360px;
}

.portfolio-spotlight__image-wrap {
    position: relative;
    overflow: hidden;
    min-height: 280px;
    background: var(--clr-mist);
}

.portfolio-spotlight__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--dur-slower) var(--ease-out);
}

.portfolio-spotlight:hover .portfolio-spotlight__image {
    transform: scale(1.04);
}

.portfolio-spotlight__image--placeholder {
    min-height: 280px;
    background: linear-gradient(135deg, var(--clr-mist), var(--clr-bg-alt));
}

.portfolio-spotlight__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(23,20,15,0.45) 0%, transparent 55%);
    opacity: 0;
    transition: opacity var(--dur-base);
}

.portfolio-spotlight:hover .portfolio-spotlight__overlay {
    opacity: 1;
}

.portfolio-spotlight__content {
    padding: var(--sp-10) var(--sp-8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--clr-white);
}

.portfolio-spotlight__flag {
    color: var(--clr-accent-bright);
    margin-bottom: var(--sp-3);
}

.portfolio-spotlight__title {
    font-family: var(--font-display);
    font-size: var(--text-5xl);
    font-weight: 400;
    color: var(--clr-white);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: var(--sp-4);
}

.portfolio-spotlight__excerpt {
    font-size: var(--text-lg);
    color: rgba(255,255,255,0.6);
    line-height: 1.6;
    margin-bottom: var(--sp-5);
    max-width: 46ch;
}

.portfolio-spotlight__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
}

.portfolio-spotlight__cat {
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--clr-accent-bright);
    padding: var(--sp-1) var(--sp-3);
    border: 1px solid rgba(28,140,160,0.4);
    border-radius: var(--radius-full);
}

.portfolio-spotlight__loc {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.55);
}

.portfolio-spotlight__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--clr-accent-bright);
    transition: gap var(--dur-fast);
}

.portfolio-spotlight:hover .portfolio-spotlight__cta {
    gap: var(--sp-3);
}

@media screen and (min-width: 64rem) {
    .portfolio-spotlight__link {
        grid-template-columns: 1.5fr 1fr;
    }
    .portfolio-spotlight__content {
        padding: var(--sp-12) var(--sp-10);
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   13. SOCIAL ICONS (footer + reusable)
   ══════════════════════════════════════════════════════════════════════ */

.social-links {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    list-style: none;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
}

.social-links__item { margin: 0; }

.social-links__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: var(--radius-sm);
    color: rgba(255,255,255,0.55);
    transition:
        color var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out),
        background var(--dur-fast) var(--ease-out),
        transform var(--dur-fast) var(--ease-out);
}

.social-links__link:hover {
    color: var(--clr-accent-bright);
    border-color: rgba(28,140,160,0.45);
    background: rgba(28,140,160,0.08);
    transform: translateY(-2px);
}

.social-links__link .social-icon {
    width: 18px;
    height: 18px;
    display: block;
}

/* Footer label above icons */
.footer-social-label {
    font-size: var(--text-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.3);
    margin: var(--sp-6) 0 var(--sp-3);
}

/* Light-background variant (e.g. contact page) */
.social-links--dark .social-links__link {
    border-color: var(--clr-mist);
    color: var(--clr-text-muted);
}

.social-links--dark .social-links__link:hover {
    color: var(--clr-accent-strong);
    border-color: var(--clr-accent);
    background: rgba(28,140,160,0.06);
}


/* ═══════════════════════════════════════════════════════════════════════
   14. DESTINATION ARCHIVE
   ══════════════════════════════════════════════════════════════════════ */

.destination-counts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-6);
    margin-top: var(--sp-6);
}

.destination-counts__item {
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.02em;
}

.destination-counts__item strong {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 400;
    color: var(--clr-accent-bright);
    margin-right: var(--sp-1);
}

.destination-content {
    padding: var(--sp-16) 0 var(--sp-20);
}

.destination-section {
    margin-bottom: var(--sp-16);
}

.destination-section:last-child {
    margin-bottom: 0;
}

.destination-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
    padding-bottom: var(--sp-3);
    border-bottom: var(--border);
}

.destination-section__title {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 400;
    color: var(--clr-text);
    letter-spacing: -0.01em;
}

.destination-section__all {
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--clr-accent-strong);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--dur-fast);
}

.destination-section__all:hover {
    color: var(--clr-accent);
}


/* ═══════════════════════════════════════════════════════════════════════
   PORTFOLIO REFINEMENT (Premium redesign)
   Series title lockup on paper + clean full-bleed lead image.
   Replaces the old dark-overlay hero (the "stretched grayed title").
   ══════════════════════════════════════════════════════════════════════ */

/* ── Series title lockup (text on paper, no overlay) ─────────────────── */
.series-intro {
    padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(1.5rem, 3vw, 2.5rem);
    background: var(--clr-bg);
}

.breadcrumb--quiet {
    margin-bottom: var(--sp-8);
}

.series-intro__eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--clr-text-muted);
    margin-bottom: var(--sp-5);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
}

.series-intro__cat-link {
    color: var(--clr-accent-strong);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
}

.series-intro__cat-link:hover {
    color: var(--clr-accent);
}

.series-intro__sep {
    color: var(--clr-text-muted);
    opacity: 0.6;
}

.series-intro__title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2.5rem, 6vw, 5rem);
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--clr-text);
    margin: 0;
    max-width: 18ch;
}

.series-intro__standfirst {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    line-height: 1.6;
    color: var(--clr-text-muted);
    margin-top: var(--sp-6);
    max-width: 60ch;
}

/* ── Full-bleed lead image (no text on it) ───────────────────────────── */
.series-lead {
    margin: clamp(2rem, 4vw, 3.5rem) 0 0;
    width: 100%;
    background: var(--clr-bg-alt);
    overflow: hidden;
}

.series-lead__image {
    display: block;
    width: 100%;
    height: auto;
    /* Cap very tall portraits so the lead doesn't dominate the fold */
    max-height: 86vh;
    object-fit: cover;
    object-position: center;
}

/* Reveal-on-load for the lead image (subtle) */
@media (prefers-reduced-motion: no-preference) {
    .series-lead__image {
        animation: seFadeIn var(--dur-slow) var(--ease-out) both;
    }
}

@keyframes seFadeIn {
    from { opacity: 0; transform: scale(1.01); }
    to   { opacity: 1; transform: scale(1); }
}


/* ═══════════════════════════════════════════════════════════════════════
   PHOTO GRID (justified) + FILTER + LIGHTBOX PANEL
   Photo-first portfolio. Full-width justified rows that reflow on resize.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Grid container (JS sets item positions absolutely) ───────────────── */
.pg-grid {
    position: relative;
    width: 100%;
    margin: 0;
    min-height: 200px;
}

/* Before JS lays out, show a simple stacked fallback (no jump to blank) */
.pg-grid:not(.is-laid-out) {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.pg-grid:not(.is-laid-out) .pg-item {
    flex: 1 1 280px;
    aspect-ratio: var(--w) / var(--h);
}

.pg-item {
    margin: 0;
    overflow: hidden;
    background: var(--clr-bg-alt);
    border-radius: 2px;
}

.pg-item__link {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.pg-item__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 600ms var(--ease-out);
    will-change: transform;
}

.pg-item__link:hover .pg-item__img {
    transform: scale(1.04);
}

/* Hover overlay - bottom scrim with caption + a small zoom glyph */
.pg-item__overlay {
    position: absolute;
    inset: 0;
    display: block;
    opacity: 0;
    background: linear-gradient(to top, rgba(23,20,15,0.55) 0%, rgba(23,20,15,0.15) 38%, rgba(23,20,15,0) 62%);
    transition: opacity var(--dur-base) var(--ease-out);
}

.pg-item__link:hover .pg-item__overlay,
.pg-item__link:focus-visible .pg-item__overlay {
    opacity: 1;
}

/* Caption (title + place) slides up on hover */
.pg-item__caption {
    position: absolute;
    left: var(--sp-4);
    right: var(--sp-4);
    bottom: var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--clr-white);
    transform: translateY(6px);
    transition: transform var(--dur-base) var(--ease-out);
}
.pg-item__link:hover .pg-item__caption,
.pg-item__link:focus-visible .pg-item__caption {
    transform: translateY(0);
}
.pg-item__title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    line-height: 1.15;
    text-shadow: 0 1px 8px rgba(0,0,0,0.35);
}
.pg-item__place {
    font-size: var(--text-sm);
    letter-spacing: 0.02em;
    color: rgba(255,255,255,0.85);
    text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}

.pg-item__zoom {
    position: absolute;
    top: var(--sp-3);
    right: var(--sp-3);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-white);
    background: rgba(23,20,15,0.4);
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 50%;
    backdrop-filter: blur(2px);
    transform: scale(0.85);
    transition: transform var(--dur-base) var(--ease-out);
}
.pg-item__link:hover .pg-item__zoom,
.pg-item__link:focus-visible .pg-item__zoom {
    transform: scale(1);
}

/* Visible keyboard focus ring (arrow-key navigation) */
.pg-item__link:focus-visible {
    outline: 3px solid var(--clr-accent);
    outline-offset: -3px;
}

@media (prefers-reduced-motion: reduce) {
    .pg-item__img,
    .pg-item__caption,
    .pg-item__zoom {
        transition: none;
    }
    .pg-item__link:hover .pg-item__img {
        transform: none;
    }
}

/* ── Filter bar ───────────────────────────────────────────────────────── */
.pg-filter {
    margin: 0 auto clamp(2rem, 4vw, 3rem);
    max-width: 60rem;
    padding: var(--sp-5) var(--sp-6);
    background: var(--clr-surface);
    border: 1px solid var(--clr-mist);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.pg-filter__modes {
    display: flex;
    justify-content: center;
    gap: var(--sp-1);
    margin-bottom: var(--sp-5);
    border-bottom: 1px solid var(--clr-mist);
}

.pg-filter__mode {
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--clr-text-muted);
    padding: var(--sp-2) var(--sp-4);
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    transition: color var(--dur-fast), border-color var(--dur-fast);
}

.pg-filter__mode:hover { color: var(--clr-text-muted); }

.pg-filter__mode.is-active {
    color: var(--clr-text);
    border-bottom-color: var(--clr-accent);
}

/* CRITICAL: the `hidden` attribute must override the flex/inline-flex display
   rules below, or JS-hidden rows/chips stay visible (breaking the cascade). */
.pg-filter [hidden] { display: none !important; }

/* Each drill level is a labelled row. Sub-levels are indented with a quiet
   left accent so the continent > country > city hierarchy is unmistakable.
   Child rows are revealed (progressive disclosure) only once a parent is
   chosen, keeping the control calm by default. */
.pg-filter__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) 0;
}

.pg-filter__row-label {
    flex: 0 0 5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--clr-text-muted);
    user-select: none;
}

/* ── Breadcrumb path (2B) ─────────────────────────────────────────────────
   Reflects the active drill-down (e.g. All › Europe › Poland › Warsaw). Every
   crumb except the current one is a clickable step back up the tree. */
.pg-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-1) var(--sp-2);
    margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--clr-mist);
}

.pg-crumb {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: 1;
    color: var(--clr-text-muted);
    background: transparent;
    border: 0;
    padding: var(--sp-1) 0;
    transition: color var(--dur-fast) var(--ease-out);
}

/* Chevron separator before every crumb except the first. */
.pg-crumb + .pg-crumb::before {
    content: "›";
    margin-right: var(--sp-2);
    color: var(--clr-text-muted);
    font-size: 1.05em;
}

.pg-crumb:not(.is-current):hover {
    color: var(--clr-accent-strong);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* The current (deepest) crumb is the active context: emphasised, not clickable. */
.pg-crumb.is-current {
    color: var(--clr-text);
    font-weight: 600;
    cursor: default;
}

.pg-filter__row--sub {
    margin-left: var(--sp-3);
    padding-left: var(--sp-5);
    border-left: 2px solid var(--clr-accent-bright);
    animation: pg-reveal var(--dur-base) var(--ease-out);
}

@keyframes pg-reveal {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pg-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--clr-text-muted);
    background: transparent;
    border: 1px solid var(--clr-mist);
    border-radius: var(--radius-full);
    padding: var(--sp-1) var(--sp-4);
    transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}

.pg-chip:hover {
    color: var(--clr-text);
    border-color: var(--clr-accent-bright);
}

.pg-chip.is-active {
    color: var(--clr-white);
    background: var(--clr-ink);
    border-color: var(--clr-text);
}

/* Photo counts on filter chips are hidden by request (data kept for a11y). */
.pg-chip__count {
    display: none;
}

/* Skeleton placeholders (shown during slow filter/load-more requests) */
.pg-skeleton {
    position: absolute;
    border-radius: var(--radius-md);
    background: var(--clr-bg-alt);
    overflow: hidden;
}
.pg-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
    animation: pg-shimmer 1.4s ease-in-out infinite;
}
@keyframes pg-shimmer {
    100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
    .pg-skeleton::after { animation: none; }
}

/* Multi-select (union) summary bar */
.pg-multi {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--clr-mist);
}
.pg-multi__label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--clr-text);
}
.pg-multi__clear {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--clr-text-muted);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
}
.pg-multi__clear:hover {
    color: var(--clr-accent-strong);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Crumbs are links now; the current one is shown static (not clickable). */
.pg-crumb {
    text-decoration: none;
}
.pg-crumb.is-current {
    pointer-events: none;
}

/* Adaptive dropdown (used when a level has many options). */
.pg-select {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--clr-text);
    background: var(--clr-surface);
    border: 1px solid var(--clr-mist);
    border-radius: var(--radius-full);
    padding: var(--sp-1) var(--sp-6) var(--sp-1) var(--sp-4);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B6560' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--sp-3) center;
    transition: border-color var(--dur-fast) var(--ease-out);
}
.pg-select:hover,
.pg-select:focus {
    border-color: var(--clr-accent);
    outline: none;
}

/* Load more */
.pg-loadmore-wrap {
    display: flex;
    justify-content: center;
    margin-top: var(--sp-8);
}
.pg-loadmore {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    letter-spacing: 0.04em;
    color: var(--clr-text);
    background: transparent;
    border: 1px solid var(--clr-ink);
    border-radius: var(--radius-full);
    padding: var(--sp-3) var(--sp-8);
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.pg-loadmore:hover {
    color: var(--clr-white);
    background: var(--clr-ink);
}
.pg-loadmore[disabled] {
    opacity: 0.55;
    cursor: default;
}
.pg-loadmore.is-done {
    color: var(--clr-text-muted);
    border-color: var(--clr-mist);
    background: transparent;
    cursor: default;
}

/* ── PhotoSwipe info panel ────────────────────────────────────────────── */
.pswp-info {
    position: absolute;
    top: 0;
    right: 0;
    width: 320px;
    max-width: 85vw;
    height: 100%;
    padding: 88px var(--sp-8) var(--sp-8);
    background: rgba(23,20,15,0.82);
    backdrop-filter: blur(10px);
    color: rgba(255,255,255,0.85);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 350ms var(--ease-out);
    z-index: 10;
    box-sizing: border-box;
}

.pswp--info-open .pswp-info {
    transform: translateX(0);
}

.pswp-info__head {
    margin-bottom: var(--sp-6);
    padding-bottom: var(--sp-5);
    border-bottom: 1px solid rgba(255,255,255,0.12);
}

.pswp-info__title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 400;
    color: var(--clr-white);
    line-height: 1.2;
    margin: 0 0 var(--sp-2);
}

.pswp-info__loc {
    font-size: var(--text-sm);
    color: var(--clr-accent-bright);
    letter-spacing: 0.04em;
    margin: 0;
}

.pswp-info__exif {
    margin: 0 0 var(--sp-6);
}

.pswp-info__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-4);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.pswp-info__row dt {
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    margin: 0;
}

.pswp-info__row dd {
    font-size: var(--text-sm);
    color: rgba(255,255,255,0.9);
    margin: 0;
    text-align: right;
}

.pswp-info__collection {
    display: block;
    padding: var(--sp-4);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(28,140,160,0.3);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background var(--dur-fast), border-color var(--dur-fast);
}

.pswp-info__collection:hover {
    background: rgba(28,140,160,0.12);
    border-color: rgba(28,140,160,0.5);
}

.pswp-info__collection-label {
    display: block;
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    margin-bottom: var(--sp-1);
}

.pswp-info__collection-name {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--clr-accent-bright);
}

/* Push PhotoSwipe controls left of the panel when open (desktop) */
@media (min-width: 900px) {
    .pswp--info-open .pswp__button--arrow--next {
        right: 320px;
    }
}

@media (max-width: 899px) {
    .pswp-info {
        width: 100%;
        max-width: 100%;
        height: auto;
        bottom: 0;
        top: auto;
        padding: var(--sp-6);
        transform: translateY(100%);
        max-height: 55%;
    }
    .pswp--info-open .pswp-info {
        transform: translateY(0);
    }
}

/* ── Collection / filtered header ─────────────────────────────────────── */
.pg-collection-header {
    padding: clamp(3rem, 7vw, 6rem) 0 clamp(1.5rem, 3vw, 2.5rem);
    text-align: center;
}

.pg-collection-header__back {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--clr-text-muted);
    text-decoration: none;
    margin-bottom: var(--sp-5);
    transition: color var(--dur-fast);
}

.pg-collection-header__back:hover { color: var(--clr-accent-strong); }

.pg-collection-header__eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--clr-accent-strong);
    margin-bottom: var(--sp-4);
}

.pg-collection-header__title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 500;
    color: var(--clr-text);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 auto var(--sp-4);
}

.pg-collection-header__desc {
    font-size: var(--text-lg);
    color: var(--clr-text-muted);
    max-width: 56ch;
    margin: 0 auto;
    line-height: 1.6;
}


/* ═══════════════════════════════════════════════════════════════════════
   SINGLE PHOTO PAGE (aspect-respecting, compact)
   ══════════════════════════════════════════════════════════════════════ */

.single-photo__header {
    padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(1.25rem, 2vw, 2rem);
    text-align: center;
}

.single-photo__eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--clr-accent-strong);
    margin-bottom: var(--sp-3);
}

.single-photo__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 500;
    color: var(--clr-text);
    line-height: 1.08;
    letter-spacing: -0.015em;
    margin: 0;
}

.single-photo__body {
    padding-bottom: clamp(3rem, 6vw, 5rem);
}

.single-photo__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 4vw, 3rem);
    align-items: start;
}

@media (min-width: 64rem) {
    .single-photo__layout {
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: var(--sp-16);
    }
}

.single-photo__figure {
    margin: 0;
    text-align: center;
}

.single-photo__image {
    display: block;
    width: auto;
    max-width: 100%;
    /* Cap height so portraits don't dominate; respect aspect ratio. */
    max-height: min(82vh, 920px);
    height: auto;
    margin: 0 auto;
    object-fit: contain;
    border-radius: 2px;
}

.single-photo__caption {
    margin-top: var(--sp-5);
    font-size: var(--text-base);
    color: var(--clr-text-muted);
    text-align: left;
}

.single-photo__aside {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}

@media (min-width: 64rem) {
    .single-photo__aside {
        position: sticky;
        top: calc(var(--header-height, 80px) + var(--sp-6));
    }
}

.single-photo__collection {
    display: block;
    padding: var(--sp-5);
    background: var(--clr-bg-alt);
    border: 1px solid var(--clr-mist);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: border-color var(--dur-fast), background var(--dur-fast);
}

.single-photo__collection:hover {
    border-color: var(--clr-accent);
    background: rgba(28,140,160,0.06);
}

.single-photo__collection-label {
    display: block;
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--clr-text-muted);
    margin-bottom: var(--sp-1);
}

.single-photo__collection-name {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--clr-accent-strong);
}

/* Tighter section padding for grid pages */
.section--tight {
    padding-top: var(--sp-4);
    padding-bottom: clamp(3rem, 6vw, 5rem);
}


/* ═══════════════════════════════════════════════════════════════════════
   ARTICLE → PRINTS  ("Take this place home" block under journal articles)
   Auto-rendered from the shared place vocabulary (decision C2).
   ══════════════════════════════════════════════════════════════════════ */
.article-prints {
    margin-top: clamp(2.5rem, 5vw, 4rem);
    padding-top: clamp(2rem, 4vw, 3rem);
    border-top: 1px solid var(--clr-mist);
}

.article-prints__head {
    text-align: center;
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.article-prints__eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--clr-accent-strong);
    margin-bottom: var(--sp-3);
}

.article-prints__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 500;
    color: var(--clr-text);
    line-height: 1.1;
    letter-spacing: -0.015em;
    margin: 0;
}

.article-prints__grid {
    column-count: 1;
    column-gap: clamp(1.5rem, 3vw, 2rem);
}

@media (min-width: 40rem) {
    .article-prints__grid { column-count: 3; }
}

.article-prints__grid > * {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin: 0 0 clamp(1.5rem, 3vw, 2rem);
}


/* ═══════════════════════════════════════════════════════════════════════
   DESTINATIONS INDEX  (place index, grouped by continent > country)
   First version of the Destinations section (A3). Hub-ready.
   ══════════════════════════════════════════════════════════════════════ */
.dest-continent {
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.dest-continent__title {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 500;
    color: var(--clr-text);
    letter-spacing: -0.01em;
    padding-bottom: var(--sp-3);
    margin-bottom: var(--sp-6);
    border-bottom: 1px solid var(--clr-mist);
}

.dest-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.25rem, 2.5vw, 1.75rem);
}

@media (min-width: 40rem) {
    .dest-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64rem) {
    .dest-grid { grid-template-columns: repeat(3, 1fr); }
}

.dest-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    background: var(--clr-bg);
    border: 1px solid var(--clr-mist);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.dest-card:hover {
    border-color: var(--clr-accent-bright);
    transform: translateY(-2px);
}

.dest-card__image-wrap {
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--clr-bg-alt);
}

.dest-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 600ms var(--ease-out);
}

.dest-card:hover .dest-card__image {
    transform: scale(1.04);
}

.dest-card__image--placeholder {
    display: block;
    background: linear-gradient(135deg, var(--clr-bg-alt), var(--clr-bg));
}

.dest-card__body {
    padding: var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

.dest-card__name {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 500;
    color: var(--clr-text);
}

.dest-card__count {
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--clr-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════
   PORTFOLIO - "All Photographs" hybrid section (beneath the series masonry)
   ══════════════════════════════════════════════════════════════════════ */
.portfolio-allphotos {
    border-top: 1px solid var(--clr-mist);
}

/* ==========================================================================
   HOMEPAGE - editorial hero (full-bleed image, identity lockup below)
   ========================================================================== */
.home-hero {
    /* Sand, matching section--alt and the About page's opening and closing
       bands. The photograph is its own block above the lockup rather than a
       background, so this colours only the text band and leaves the image
       untouched. Title --clr-text 12.35:1, standfirst --clr-text-muted 4.59:1
       in light mode; the standfirst is the tight one if the palette shifts. */
    background: var(--clr-bg-alt);
}
.home-hero__media {
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 78vh;
    overflow: hidden;
    background: var(--clr-bg-alt);
}
.home-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.home-hero__media--placeholder {
    aspect-ratio: 16 / 9;
    max-height: 60vh;
    background: linear-gradient(135deg, var(--clr-bg-alt), var(--clr-mist));
}
.home-hero__lockup {
    max-width: 60rem;
    margin-inline: auto;
    text-align: center;
    padding: var(--sp-10) var(--sp-4) var(--sp-8);
}
.home-hero__eyebrow {
    margin-bottom: var(--sp-3);
}
.home-hero__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.2rem, 5vw, 3.75rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--clr-text);
    margin: 0 0 var(--sp-4);
}
.home-hero__standfirst {
    max-width: 40rem;
    margin: 0 auto var(--sp-6);
    color: var(--clr-text-muted);
    font-size: var(--text-lg);
    line-height: 1.6;
}
.home-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    justify-content: center;
}

/* ==========================================================================
   HOMEPAGE - destinations strip
   ========================================================================== */
.dest-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--sp-5) var(--sp-4);
}
.dest-card {
    display: block;
    text-decoration: none;
    color: inherit;
}
.dest-card__media {
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--clr-bg-alt);
}
.dest-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out);
}
.dest-card:hover .dest-card__img,
.dest-card:focus-visible .dest-card__img {
    transform: scale(1.04);
}
.dest-card__label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: var(--sp-3);
}
.dest-card__name {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    line-height: 1.1;
    color: var(--clr-text);
}
.dest-card__count {
    font-size: var(--text-sm);
    color: var(--clr-text-muted);
}
@media (prefers-reduced-motion: reduce) {
    .dest-card__img { transition: none; }
    .dest-card:hover .dest-card__img { transform: none; }
}

/* ==========================================================================
   JOURNAL INDEX - magazine layout (featured lead post)
   ========================================================================== */
.posts-featured { margin-bottom: var(--sp-12); }
.posts-featured .post-card__title { font-family: var(--font-display); }
@media (min-width: 900px) {
    .posts-featured .post-card {
        display: grid;
        grid-template-columns: 1.25fr 1fr;
        gap: var(--sp-8);
        align-items: center;
    }
    .posts-featured .post-card__image-link { margin: 0; }
    .posts-featured .post-card__image-wrap { aspect-ratio: 4 / 3; height: 100%; }
    .posts-featured .post-card__title { font-size: var(--text-4xl); line-height: 1.1; }
    .posts-featured .post-card__excerpt { font-size: var(--text-lg); }
}

/* Prints shop in a full-width container: cap at 4 columns on wide screens so
   cards stay a controlled, scannable size instead of stretching huge. */
@media (min-width: 1600px) {
    .shop-grid { column-count: 4; }
}

/* ==========================================================================
   Homepage - section dividers
   Hairline rules give the (now full-width) sections a deliberate rhythm and
   stop adjacent same-coloured sections (e.g. Journal → Prints) from blending.
   Uses --clr-mist so it flips correctly in dark mode.
   ========================================================================== */
.section-destinations,
.section-journal,
.section-prints {
    border-top: 1px solid var(--clr-mist);
}

/* ==========================================================================
   Photo capture strip - the signature technical line under the hero image.
   Contact-sheet voice: mono, quiet, uppercase. Tokens flip for dark mode.
   ========================================================================== */
.photo-strip {
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--clr-mist);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--clr-text-muted);
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Newsletter consent (GDPR) - quiet, legible, token-driven.
   ========================================================================== */
.newsletter__consent {
    display: flex;
    gap: 0.55em;
    align-items: flex-start;
    justify-content: center;
    font-size: 0.78rem;
    color: var(--clr-text-muted);
    margin: 0.9rem auto 0.2rem;
    max-width: 46ch;
    text-align: left;
}
.newsletter__consent input {
    flex: none;
    margin-top: 0.22em;
    accent-color: var(--clr-accent);
}
.newsletter__consent a {
    color: var(--clr-accent);
    text-decoration: underline;
}


/* ==========================================================================
   Print card - quality floor: visible keyboard focus, motion respected.
   ========================================================================== */
.print-card__link:focus-visible {
    outline: 3px solid var(--clr-accent);
    outline-offset: 2px;
    border-radius: var(--radius-md);
}

@media (prefers-reduced-motion: reduce) {
    .print-card,
    .print-card__image {
        transition: none;
    }
    .print-card:hover {
        transform: none;
    }
    .print-card:hover .print-card__image {
        transform: none;
    }
}

/* ==========================================================================
   Print detail - provenance link to the source photograph (S09 mesh).
   ========================================================================== */
.print-detail__source {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: var(--border);
    text-decoration: none;
}
.print-detail__source-label {
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--clr-text-muted);
}
.print-detail__source-name {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--clr-text);
    transition: color var(--dur-base) var(--ease-out);
}
.print-detail__source:hover .print-detail__source-name,
.print-detail__source:focus-visible .print-detail__source-name {
    color: var(--clr-accent);
}

/* ==========================================================================
   Related prints ("More from…") - a curated, ratio-uniform trio. Because all
   three now share an orientation, a true equal-column row reads as deliberate
   (overrides the masonry columns used by the main shop grid). Collapses to a
   single column on mobile so three portraits don't become an endless scroll.
   ========================================================================== */
.shop-related .shop-grid--3col {
    column-count: auto;              /* cancel the masonry columns here */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;         /* a pair or trio stays centred, no gap */
    align-items: center;             /* mixed heights hang on a shared centre
                                        line, like works on a gallery wall */
    gap: var(--sp-6);
}
.shop-related .shop-grid--3col > * {
    margin: 0;
    break-inside: auto;
    /* Each card takes a third of the row (min 260px), so 1–3 uniform cards
       are sized and centred consistently; wraps to 1-up on narrow screens. */
    flex: 0 1 clamp(260px, 30%, 360px);
}
@media (max-width: 640px) {
    .shop-related .shop-grid--3col > * {
        flex-basis: 100%;            /* single clean column on mobile */
        max-width: 420px;
    }
}

/* ==========================================================================
   Icons - see brand guide Part 9.
   Colour is inherited (stroke="currentColor"), so an icon takes the colour of
   whatever it sits in. These modifiers name the intent rather than the colour.
   ========================================================================== */
.se-icon {
    display: inline-block;
    vertical-align: -0.125em;
    flex: none;
    color: var(--clr-accent);          /* Tide by default */
}
.se-icon--muted { color: var(--clr-text-muted); }
.se-icon--text  { color: var(--clr-text); }
.se-icon--place { color: var(--clr-pine); }   /* map pins, location metadata */
.se-icon--cream { color: var(--clr-white); }
.se-icon--inherit { color: inherit; }

/* Standalone icon controls keep a 44px target however small the glyph is. */
.se-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: inherit;
}
.se-icon-btn:focus-visible {
    outline: 3px solid var(--clr-accent);
    outline-offset: 2px;
    border-radius: var(--radius-md);
}

@media (prefers-reduced-motion: reduce) {
    .se-icon { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PORTFOLIO IDENTITY + FILTER BAR
   One sticky strip carrying the H1, the count and the filters, so the
   photographs - the actual content - start near the top of the page.
   Scoped to .pg-bar throughout: taxonomy archives keep their own header
   and the panel-style filter.
   ═══════════════════════════════════════════════════════════════════════ */

.pg-bar {
    position: sticky;
    /* Sits directly beneath the fixed site header, which owns --header-height. */
    top: var(--header-height);
    /* Below the header, above the grid: the bar must never cover the nav. */
    z-index: calc(var(--z-sticky) - 1);
    background: var(--clr-bg);
    border-bottom: 1px solid var(--clr-mist);
}

.pg-bar__inner {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    min-height: 3.25rem;
    padding-block: var(--sp-2);
}

.pg-bar__id {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    flex: 0 0 auto;
}

/* An H1 sized as a label, not a billboard. Semantic weight is unchanged;
   on a photography page the pictures should be the visual headline. */
.pg-bar__title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 500;
    line-height: 1.2;
    margin: 0;
    white-space: nowrap;
}

.pg-bar__count {
    font-size: var(--text-xs);
    color: var(--clr-text-muted);
    font-variant-numeric: tabular-nums;
}

/* ── The filter, stripped of its card chrome inside the bar ────────────── */

.pg-bar .pg-filter {
    margin: 0;
    padding: 0;
    max-width: none;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    flex: 1 1 auto;
    min-width: 0;               /* lets the scroller actually shrink */
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    justify-content: flex-end;
}

.pg-bar .pg-filter__modes {
    justify-content: flex-end;
    flex: 0 0 auto;
    margin: 0;
    border: 0;
    padding: 0;
    gap: var(--sp-2);
}

.pg-bar .pg-filter__panel {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    /* One row that scrolls sideways rather than wrapping into a block. */
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.pg-bar .pg-filter__panel::-webkit-scrollbar { display: none; }

.pg-bar .pg-filter__panel > * {
    flex: 0 0 auto;
}

.pg-bar .pg-crumb,
.pg-bar .pg-chip {
    white-space: nowrap;
}

/* ── Mobile: identity on one line, controls scrolling beneath ──────────── */
@media (max-width: 860px) {
    .pg-bar__inner {
        flex-direction: column;
        align-items: stretch;
        gap: var(--sp-2);
        padding-block: var(--sp-3);
    }

    .pg-bar__id {
        justify-content: space-between;
    }

    .pg-bar .pg-filter {
        justify-content: flex-start;
        gap: var(--sp-3);
    }
}

/* The grid begins immediately below the bar. */
.section--flush {
    padding-top: var(--sp-4);
    padding-bottom: clamp(2rem, 5vw, 4rem);
}

.portfolio-intro {
    color: var(--clr-text-muted);
}

/* Place trail on a photo page: the eyebrow made navigable. Two equal axes,
   place and collection, and only one of them used to be clickable. */
.photo-trail {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.photo-trail__item {
    display: inline-flex;
    align-items: center;
}

/* Separator drawn in CSS so it is never read out as content. */
.photo-trail__item + .photo-trail__item::before {
    content: "/";
    margin: 0 0.5em;
    opacity: 0.45;
}

.photo-trail__link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur-fast), color var(--dur-fast);
}

.photo-trail__link:hover,
.photo-trail__link:focus-visible {
    color: var(--clr-accent-strong);
    border-bottom-color: currentColor;
}

/* ── Licensing card: the quiet commercial surface on an editorial page ── */
.single-photo__license {
    margin-top: var(--sp-5);
    padding: var(--sp-5);
    border: 1px solid var(--clr-mist);
    border-radius: var(--radius-md);
}

.single-photo__license-label {
    display: block;
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--clr-text-muted);
    margin-bottom: var(--sp-2);
}

.single-photo__license-text {
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--clr-text-muted);
    margin: 0 0 var(--sp-3);
}

.single-photo__license-link {
    font-family: var(--font-display);
    font-size: var(--text-base);
    color: var(--clr-accent-strong);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur-fast);
}

.single-photo__license-link:hover,
.single-photo__license-link:focus-visible {
    border-bottom-color: currentColor;
}

/* ── Previous / next, scoped to the same place ────────────────────────── */
.photo-nav {
    border-top: 1px solid var(--clr-mist);
    padding-block: var(--sp-5);
}

.photo-nav__inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--sp-5);
}

.photo-nav__link {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    max-width: 22rem;
    text-decoration: none;
    color: inherit;
}

/* Holds the right-hand slot open when there is no previous frame, so "Next"
   stays on the right instead of sliding across. */
.photo-nav__link--empty { flex: 0 1 auto; }

.photo-nav__link--next {
    text-align: right;
    margin-left: auto;
}

.photo-nav__dir {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--clr-text-muted);
}

.photo-nav__link--next .photo-nav__dir { justify-content: flex-end; }

.photo-nav__title {
    font-family: var(--font-display);
    font-size: var(--text-base);
    line-height: 1.3;
    /* Titles can be long sentences; two lines then ellipsis. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color var(--dur-fast);
}

.photo-nav__link:hover .photo-nav__title,
.photo-nav__link:focus-visible .photo-nav__title {
    color: var(--clr-accent-strong);
}

@media (max-width: 600px) {
    .photo-nav__inner { gap: var(--sp-4); }
    .photo-nav__link { max-width: 48%; }
}

/* ── Term cards with a thumbnail (place + collection) ─────────────────── */

/* The card was display:block; it becomes a grid so the thumbnail can sit
   above the label without changing the existing padding or borders. */
.single-photo__collection-media {
    display: block;
    margin: calc(-1 * var(--sp-5)) calc(-1 * var(--sp-5)) var(--sp-4);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    overflow: hidden;
    aspect-ratio: 3 / 2;
}

.single-photo__collection-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow);
}

.single-photo__collection:hover .single-photo__collection-img,
.single-photo__collection:focus-visible .single-photo__collection-img {
    transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
    .single-photo__collection-img { transition: none; }
    .single-photo__collection:hover .single-photo__collection-img,
    .single-photo__collection:focus-visible .single-photo__collection-img { transform: none; }
}

/* Two cards now stack in the aside. */
.single-photo__collection + .single-photo__collection { margin-top: var(--sp-4); }

/* ── Technical table ──────────────────────────────────────────────────── */
.photo-tech {
    margin-top: var(--sp-5);
    padding: var(--sp-5);
    border: 1px solid var(--clr-mist);
    border-radius: var(--radius-md);
}

.photo-tech__label {
    display: block;
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--clr-text-muted);
    margin-bottom: var(--sp-3);
}

.photo-tech__list { margin: 0; }

.photo-tech__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-4);
    padding-block: var(--sp-2);
    border-bottom: 1px solid var(--clr-mist);
}

.photo-tech__row:last-child { border-bottom: 0; }

.photo-tech__key {
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--clr-text-muted);
    flex: 0 0 auto;
}

.photo-tech__val {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    text-align: right;
    /* Long lens names wrap rather than overflow the card. */
    overflow-wrap: anywhere;
}

/* Lightbox place link: matches the collection link already in the pane. */
.pswp-info__loc-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur-fast);
}

.pswp-info__loc-link:hover,
.pswp-info__loc-link:focus-visible {
    border-bottom-color: currentColor;
}

/* Licensing block in the lightbox reuses the collection card shell. */
.pswp-info__license { margin-top: 0.75rem; }

/* Licensing CTA: coral, the only conversion action on a photo page. */
.single-photo__license-cta,
.pswp-info__license-cta {
    display: inline-block;
    margin-top: var(--sp-2);
    font-size: var(--text-sm);
}

.pswp-info__license {
    margin-top: var(--sp-4);
    padding: var(--sp-4);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.05);
}

/* ── Sidebar blocks: one container, four uses ─────────────────────────────
   Destination, licensing, collections and technical were carrying three
   different treatments in one narrow column, which read as inconsistent
   rather than deliberate. They now share the same fill, border, radius and
   padding, and the content differentiates them: only licensing holds a coral
   button, and that alone is enough to mark it as the action.
   Deliberately NOT a tide border on licensing: a coloured border plus a coral
   button puts two accent colours in one small box, and they compete. */
.single-photo__license,
.photo-tech {
    background: var(--clr-bg-alt);
    border: 1px solid var(--clr-mist);
    border-radius: var(--radius-md);
    padding: var(--sp-5);
}

/* One rhythm between every block, replacing the per-block margins that were
   set independently and did not agree. */
.single-photo__aside > * + * {
    margin-top: var(--sp-4);
}

.single-photo__license,
.photo-tech,
.single-photo__collection + .single-photo__collection {
    margin-top: var(--sp-4);
}

/* ── Lightbox pane: same rhythm ───────────────────────────────────────── */
.pswp-info__license,
.pswp-info__collection {
    display: block;
    margin-top: var(--sp-4);
}

.pswp-info__license {
    padding: var(--sp-4);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.pswp-info__license-cta {
    display: inline-block;
    margin-top: var(--sp-2);
}

/* The first block in the aside must line up with the top of the photograph.
   The per-block margin-top above applies to every instance, including the
   first, which pushed the column out of alignment with the image beside it. */
.single-photo__aside > :first-child {
    margin-top: 0;
}

/* Licence CTA centred in its container: it is the one action in that column
   and a left-aligned button under centred-weight text reads as unfinished. */
.single-photo__license {
    text-align: center;
}

.single-photo__license-label,
.single-photo__license-text {
    text-align: left;
}

.single-photo__license-cta {
    display: inline-block;
}

/* Related tiles that navigate rather than zoom: no lightbox cursor. */
.pg-item__link--page { cursor: pointer; }

/* ═══════════════════════════════════════════════════════════════════════
   DESTINATION CARDS - one component, two containers

   There are two .dest-card blocks earlier in this file: one for the
   /destinations/ archive (.dest-grid) and one for the homepage strip
   (.dest-strip). They share class names but were written independently.
   The archive version sets background, border, border-radius and
   overflow:hidden; the strip version redefines `display` but CANNOT unset
   those, so it inherited card chrome it was never designed for, and its
   label class carries no horizontal padding. That is why the text sat hard
   against the card edge.

   Rather than fight it, both now ARE the same card: chrome from the archive
   version, and matching inner padding. Everything below is scoped to
   .dest-strip so the archive is untouched.
   ═══════════════════════════════════════════════════════════════════════ */

.dest-strip {
    display: grid;
    /* 300px minimum: at 240 the columns were narrow enough that any
       landscape photograph had to be crushed to fit. */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
}

.dest-strip .dest-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--clr-bg);
    border: 1px solid var(--clr-mist);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out);
}

.dest-strip .dest-card:hover,
.dest-strip .dest-card:focus-visible {
    border-color: var(--clr-accent-bright);
    transform: translateY(-2px);
}

.dest-strip .dest-card__media {
    /* 5:6 rather than 4:5: still portrait-leaning, but a landscape frame
       survives it. The card clips, so no radius of its own is needed. */
    aspect-ratio: 5 / 6;
    border-radius: 0;
    flex: 0 0 auto;
}

/* THE FIX: the label is a card body and needs the same padding as one.
   Matches .dest-card__body on the archive so the two read identically. */
.dest-strip .dest-card__label {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    padding: var(--sp-5);
    flex: 1 1 auto;
}

.dest-strip .dest-card__name {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 500;
    line-height: 1.15;
    color: var(--clr-text);
}

.dest-strip .dest-card__count {
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--clr-text-muted);
}

@media (prefers-reduced-motion: reduce) {
    .dest-strip .dest-card:hover,
    .dest-strip .dest-card:focus-visible { transform: none; }
}

@media (max-width: 560px) {
    .dest-strip { grid-template-columns: 1fr; }
    /* A tall crop on a narrow screen spends the whole viewport on one place. */
    .dest-strip .dest-card__media { aspect-ratio: 4 / 3; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PHOTO FILTER · popover
   Replaces the sideways row of tabs, breadcrumb, labels and chips. New class
   names throughout (pgf), so none of the old .pg-filter card chrome can leak
   in by inheritance.
   ═══════════════════════════════════════════════════════════════════════ */

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

.pgf__bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pgf__group { position: relative; }

/* ── Trigger ──────────────────────────────────────────────────────────── */
.pgf__trigger {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.5rem;
    padding: 0 0.875rem 0 1.05rem;
    border: 1px solid var(--clr-mist);
    border-radius: 999px;
    background: var(--clr-bg);
    color: var(--clr-text);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
}

.pgf__trigger:hover { border-color: var(--clr-text-muted); }

.pgf__trigger[aria-expanded="true"] {
    border-color: var(--clr-text);
    /* Soft tide halo: says "this is open" without shouting. */
    box-shadow: 0 0 0 4px rgba(22, 121, 139, 0.14);
}

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

/* Active: a solid monochrome pill. Coral stays reserved for the one CTA. */
.pgf__trigger.is-set {
    background: var(--clr-text);
    border-color: var(--clr-text);
    color: var(--clr-bg);
}

.pgf__kicker {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    opacity: 0.78;
}

.pgf__value {
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pgf__chev {
    flex: 0 0 auto;
    opacity: 0.7;
    transition: transform var(--dur-fast) var(--ease-out);
}

.pgf__trigger[aria-expanded="true"] .pgf__chev { transform: rotate(180deg); }

/* ── Clear ────────────────────────────────────────────────────────────── */
.pgf__clear {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 2.5rem;
    padding: 0 0.6rem;
    border-radius: 999px;
    color: var(--clr-text-muted);
    font-size: var(--text-sm);
    text-decoration: none;
    transition: color var(--dur-fast), background-color var(--dur-fast);
}

.pgf__clear:hover { color: var(--clr-text); background: var(--clr-bg-alt); }
.pgf__clear:focus-visible { outline: 2px solid var(--clr-accent); outline-offset: 2px; }

/* ── Panel (desktop popover) ──────────────────────────────────────────── */
.pgf__panel {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    z-index: var(--z-dropdown, 100);
    display: flex;
    flex-direction: column;
    width: min(20rem, calc(100vw - 2rem));
    max-height: min(30rem, 70vh);
    background: var(--clr-bg);
    border: 1px solid var(--clr-mist);
    border-radius: 14px;
    /* Two layers: a crisp contact shadow plus a soft ambient one. */
    box-shadow: 0 1px 2px rgba(14, 12, 9, 0.06),
                0 16px 40px -12px rgba(14, 12, 9, 0.28);
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    transform-origin: top left;
    transition: opacity 170ms var(--ease-out), transform 170ms var(--ease-out);
}

/* Display rules above would otherwise override the [hidden] attribute. */
.pgf__panel[hidden],
.pgf__item[hidden],
.pgf__empty[hidden],
.pgf-backdrop[hidden] { display: none; }

.pgf__panel.is-right { left: auto; right: 0; transform-origin: top right; }
.pgf__panel.is-open  { opacity: 1; transform: none; }

/* Sheet furniture: only shown on phones. */
.pgf__handle, .pgf__head { display: none; }

/* ── Search ───────────────────────────────────────────────────────────── */
.pgf__search {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex: 0 0 auto;
    margin: 0.6rem 0.6rem 0.25rem;
    padding: 0 0.75rem;
    height: 2.5rem;
    border-radius: 10px;
    background: var(--clr-bg-alt);
    color: var(--clr-text-muted);
    transition: box-shadow var(--dur-fast);
}

/* The field's own outline is removed; this ring replaces it. */
.pgf__search:focus-within { box-shadow: inset 0 0 0 2px var(--clr-accent); }

.pgf__search input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--clr-text);
    font: inherit;
    font-size: var(--text-sm);
    outline: none;
}

.pgf__search input::placeholder { color: var(--clr-text-muted); }
.pgf__search input::-webkit-search-cancel-button { appearance: none; }

/* ── List, with scroll shadows ────────────────────────────────────────────
   The four-gradient technique: covers scroll with the list, shadows stay
   put, so a soft edge appears only when there is more to scroll to. */
.pgf__list {
    list-style: none;
    margin: 0;
    padding: 0.35rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    background:
        linear-gradient(var(--clr-bg) 30%, transparent) top / 100% 28px no-repeat local,
        linear-gradient(transparent, var(--clr-bg) 70%) bottom / 100% 28px no-repeat local,
        radial-gradient(farthest-side at 50% 0, rgba(14, 12, 9, 0.14), transparent) top / 100% 10px no-repeat scroll,
        radial-gradient(farthest-side at 50% 100%, rgba(14, 12, 9, 0.14), transparent) bottom / 100% 10px no-repeat scroll;
    background-color: var(--clr-bg);
}

.pgf__item { margin-left: calc(var(--d, 0) * 1.1rem); }

/* A hairline tree connector for nested places. */
.pgf__item.is-child { border-left: 1px solid var(--clr-mist); padding-left: 0.3rem; }

.pgf__item--all {
    margin-bottom: 0.35rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--clr-mist);
}

/* ── Option ───────────────────────────────────────────────────────────── */
.pgf__opt {
    appearance: none;
    display: grid;
    grid-template-columns: 1rem 1fr auto;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    min-height: 2.5rem;
    padding: 0 0.65rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--clr-text);
    font: inherit;
    font-size: var(--text-sm);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--dur-fast);
}

.pgf__opt:hover { background: var(--clr-bg-alt); }

.pgf__opt:focus-visible {
    outline: 2px solid var(--clr-accent);
    outline-offset: -2px;
    background: var(--clr-bg-alt);
}

.pgf__check {
    display: inline-flex;
    color: var(--clr-accent-strong);
    visibility: hidden;
}

.pgf__opt.is-active { font-weight: 600; }
.pgf__opt.is-active .pgf__check { visibility: visible; }

.pgf__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pgf__count {
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    color: var(--clr-text-muted);
}

/* Ancestors shown only to give a search match its context. */
.pgf__item.is-context > .pgf__opt { color: var(--clr-text-muted); }

.pgf__empty {
    margin: 0;
    padding: 1.5rem 1rem;
    text-align: center;
    font-size: var(--text-sm);
    color: var(--clr-text-muted);
}

.pgf__hint {
    flex: 0 0 auto;
    margin: 0;
    padding: 0.6rem 0.9rem;
    border-top: 1px solid var(--clr-mist);
    font-size: var(--text-xs);
    color: var(--clr-text-muted);
}

/* ── Inside the sticky portfolio bar ──────────────────────────────────── */
.pg-bar .pgf { flex: 1 1 auto; }
.pg-bar .pgf__bar { justify-content: flex-end; }

@media (max-width: 860px) {
    .pg-bar .pgf__bar { justify-content: flex-start; }
}

/* ── Phone: bottom sheet ──────────────────────────────────────────────── */
.pgf-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay, 300);
    background: rgba(14, 12, 9, 0.42);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 220ms var(--ease-out);
}

.pgf-backdrop.is-on { opacity: 1; }

html.pgf-lock,
html.pgf-lock body { overflow: hidden; }

.pgf__panel.is-sheet {
    position: fixed;
    inset: auto 0 0 0;
    z-index: var(--z-modal, 400);
    width: 100%;
    max-height: 82vh;
    border-radius: 20px 20px 0 0;
    border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    opacity: 1;
    transform: translateY(100%);
    transition: transform 280ms cubic-bezier(0.22, 0.9, 0.24, 1);
}

.pgf__panel.is-sheet.is-open { transform: none; }
.pgf__panel.is-sheet.is-dragging { transition: none; }

.pgf__panel.is-sheet .pgf__grab { cursor: grab; touch-action: none; }

.pgf__panel.is-sheet .pgf__handle {
    display: block;
    width: 2.25rem;
    height: 4px;
    margin: 0.6rem auto 0;
    border-radius: 2px;
    background: var(--clr-mist);
}

.pgf__panel.is-sheet .pgf__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem 0.25rem 1.1rem;
}

.pgf__title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 500;
}

.pgf__close {
    appearance: none;
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--clr-text-muted);
    cursor: pointer;
}

.pgf__close:hover { background: var(--clr-bg-alt); color: var(--clr-text); }
.pgf__close:focus-visible { outline: 2px solid var(--clr-accent); outline-offset: -2px; }

/* Fingers, not cursors: 44px targets inside the sheet. */
.pgf__panel.is-sheet .pgf__opt { min-height: 2.75rem; font-size: var(--text-base); }
.pgf__panel.is-sheet .pgf__search { height: 2.75rem; margin: 0.25rem 0.75rem 0.5rem; }

/* Ctrl/⌘ does not exist on a phone. */
.pgf__panel.is-sheet .pgf__hint { display: none; }

@media (max-width: 640px) {
    .pgf__trigger { height: 2.75rem; }
    .pgf__clear   { height: 2.75rem; }
}

@media (prefers-reduced-motion: reduce) {
    .pgf__panel,
    .pgf__panel.is-sheet,
    .pgf-backdrop,
    .pgf__chev { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SUBSCRIBED · newsletter confirmation landing (page-subscribed.php)
   Sand band like the About page's opening and closing, so a new subscriber
   lands somewhere that already feels like the site they signed up to.
   ═══════════════════════════════════════════════════════════════════════ */
.subscribed-hero {
    padding-block: clamp(3.5rem, 9vw, 7rem);
}

.subscribed-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: clamp(2.5rem, 6vw, 6rem);
    align-items: center;
}

/* No photographs yet: one centred column, never an empty half. */
.subscribed-hero__grid--solo {
    grid-template-columns: minmax(0, 1fr);
    max-width: 40rem;
    text-align: center;
}
.subscribed-hero__grid--solo .subscribed-hero__lead,
.subscribed-hero__grid--solo .subscribed-hero__note { margin-inline: auto; }
.subscribed-hero__grid--solo .subscribed-facts { display: inline-grid; text-align: left; }
.subscribed-hero__grid--solo .subscribed-hero__actions { justify-content: center; }

.subscribed-hero__title {
    margin: var(--sp-3) 0 var(--sp-5);
    font-family: var(--font-display);
    font-size: clamp(3rem, 7vw, 5.25rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--clr-text);
}

.subscribed-hero__lead {
    max-width: 34rem;
    margin: 0 0 var(--sp-6);
    font-size: var(--text-lg);
    line-height: 1.6;
    color: var(--clr-text);
}

.subscribed-facts {
    display: grid;
    gap: var(--sp-3);
    max-width: 34rem;
    margin: 0 0 var(--sp-6);
    padding: 0;
    list-style: none;
}

.subscribed-facts li {
    position: relative;
    padding-left: 1.4rem;
    line-height: 1.55;
    color: var(--clr-text-muted);
}

/* A small tide dot instead of a bullet: quieter, and on-palette. */
.subscribed-facts li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--clr-accent);
}

.subscribed-facts strong { color: var(--clr-text); font-weight: 600; }

.subscribed-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
}

.subscribed-hero__note {
    max-width: 34rem;
    margin: var(--sp-6) 0 0;
    padding-top: var(--sp-4);
    border-top: 1px solid var(--clr-mist);
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--clr-text-muted);
}

.subscribed-hero__note a {
    color: var(--clr-accent-strong);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.subscribed-hero__media {
    margin: 0;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--clr-mist);
    box-shadow: 0 30px 70px -30px rgba(14, 12, 9, 0.45);
}

.subscribed-hero__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── New in the portfolio ─────────────────────────────────────────────── */
.subscribed-new__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.subscribed-new__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 500;
    color: var(--clr-text);
}

.subscribed-new__all {
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--clr-accent-strong);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur-fast);
}

.subscribed-new__all:hover,
.subscribed-new__all:focus-visible { border-bottom-color: currentColor; }

.subscribed-new__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2.5vw, 2rem);
}

.subscribed-tile {
    display: block;
    color: inherit;
    text-decoration: none;
    border-radius: var(--radius-md);
}

.subscribed-tile:focus-visible { outline: 2px solid var(--clr-accent); outline-offset: 4px; }

.subscribed-tile__media {
    display: block;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--clr-bg-alt);
}

.subscribed-tile__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out);
}

.subscribed-tile:hover .subscribed-tile__img,
.subscribed-tile:focus-visible .subscribed-tile__img { transform: scale(1.035); }

/* Titles can be full sentences: two lines, then an ellipsis. */
.subscribed-tile__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: var(--sp-3);
    font-family: var(--font-display);
    font-size: var(--text-base);
    line-height: 1.3;
    color: var(--clr-text);
}

.subscribed-tile__place {
    display: block;
    margin-top: var(--sp-1);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--clr-text-muted);
}

@media (prefers-reduced-motion: reduce) {
    .subscribed-tile__img { transition: none; }
    .subscribed-tile:hover .subscribed-tile__img,
    .subscribed-tile:focus-visible .subscribed-tile__img { transform: none; }
}

@media (max-width: 860px) {
    /* Text first on a phone: the confirmation is the point, the photo a bonus. */
    .subscribed-hero__grid { grid-template-columns: minmax(0, 1fr); }
    .subscribed-hero__media { aspect-ratio: 4 / 3; }
    .subscribed-new__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .subscribed-new__grid > :nth-child(3) { display: none; }
}

/* About: wide photograph under the bio */
.about-wide { padding-top: 0; }
.about-wide__figure { margin: 0 auto; }
.about-wide__img { width: 100%; height: auto; display: block; border-radius: var(--radius-sm); }
.about-wide__caption { margin-top: .75rem; font-size: .875rem; color: var(--clr-muted, #6E665E); }

/* About hero: name on the right, overlay darkest behind it; on phones the name moves to the top */
.about-hero--text-right .about-hero__content { text-align: right; }
.about-hero--text-right .about-hero__overlay { background: linear-gradient(255deg, rgba(23,20,15,0.85) 0%, rgba(23,20,15,0.45) 50%, rgba(23,20,15,0.25) 100%); }
@media (max-width: 700px) {
    .about-hero--text-right { align-items: flex-start; }
    .about-hero--text-right .about-hero__content { text-align: left; padding-top: calc(var(--sp-16) + 3rem); }
    .about-hero--text-right .about-hero__overlay { background: linear-gradient(180deg, rgba(23,20,15,0.8) 0%, rgba(23,20,15,0.35) 40%, rgba(23,20,15,0.1) 100%); }
}