/* ==========================================================================
   SzymonExplores - Template Styles
   Section-specific styles: homepage, single post, archive, 404, etc.
   Depends on: style.css (tokens) + assets/css/main.css (base components)
   ========================================================================== */


/* ═══════════════════════════════════════════════════════════════════════
   BUTTONS - global CTA components
   ══════════════════════════════════════════════════════════════════════ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-8);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: var(--radius-sm);
    transition:
        background var(--dur-fast) var(--ease-out),
        color var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out),
        box-shadow var(--dur-fast) var(--ease-out),
        transform var(--dur-fast) var(--ease-out);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
}

.btn:active {
    transform: translateY(1px);
}

/* Tide filled (primary) */
.btn--gold {
    background: var(--clr-accent);
    color: var(--clr-on-accent);
    border: 1px solid var(--clr-accent);
}

.btn--gold:hover {
    background: var(--clr-accent-strong);
    border-color: var(--clr-accent-strong);
    box-shadow: 0 4px 16px rgba(28,140,160,0.30);
}

/* Coral CTA - the single vivid conversion action (dark label, AA) */
.btn--cta {
    background: var(--clr-coral);
    color: var(--clr-on-coral);
    border: 1px solid var(--clr-coral);
}

.btn--cta:hover {
    background: var(--clr-coral-dark);
    border-color: var(--clr-coral-dark);
    box-shadow: 0 4px 16px rgba(240,122,87,0.32);
}

/* Ghost (white border on dark bg) */
.btn--ghost {
    background: transparent;
    color: var(--clr-white);
    border: 1px solid rgba(255,255,255,0.4);
}

.btn--ghost:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.8);
}

/* Outline on light bg */
.btn--outline-dark {
    background: transparent;
    color: var(--clr-text);
    border: 1px solid var(--clr-text);
}

.btn--outline-dark:hover {
    background: var(--clr-text);
    color: var(--clr-bg);
}

/* Small variant */
.btn--sm {
    padding: var(--sp-2) var(--sp-5);
    font-size: var(--text-xs);
}


/* ═══════════════════════════════════════════════════════════════════════
   SECTION SHARED PATTERNS
   ══════════════════════════════════════════════════════════════════════ */

.section-header {
    text-align: center;
    margin-bottom: var(--sp-12);
}

.section-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--text-5xl);
    color: var(--clr-text);
    line-height: 1.1;
    margin-top: var(--sp-3);
    letter-spacing: -0.015em;
}

.section-subtitle {
    font-size: var(--text-lg);
    color: var(--clr-text-muted);
    margin-top: var(--sp-4);
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.section-footer {
    text-align: center;
    margin-top: var(--sp-12);
}

.section--dark {
    background: var(--clr-ink);
    color: var(--clr-white);
}

.section--dark .section-title {
    color: var(--clr-white);
}

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

.no-content {
    text-align: center;
    color: var(--clr-text-muted);
    font-style: italic;
    padding: var(--sp-16) 0;
}


/* ═══════════════════════════════════════════════════════════════════════
   HOMEPAGE - HERO
   ══════════════════════════════════════════════════════════════════════ */

.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-align: center;
}

.hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1.04);
    animation: heroZoom 18s ease-out forwards;
    will-change: transform;
}

.hero__bg--gradient {
    background: linear-gradient(
        135deg,
        #17140F 0%,
        #143036 38%,
        #173F3B 68%,
        #17140F 100%
    );
}

@keyframes heroZoom {
    from { transform: scale(1.08); }
    to   { transform: scale(1.0);  }
}

/* Multi-layered overlay: dark at bottom, dark at top, transparent in centre */
.hero__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, transparent 35%, transparent 55%, rgba(0,0,0,0.72) 100%);
}

.hero__content {
    position: relative;
    z-index: var(--z-above);
    padding: var(--sp-16) var(--gutter);
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
}

/* Status pill */
.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    margin-bottom: var(--sp-6);
}

.hero__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--clr-sage);
    flex-shrink: 0;
    animation: pulse 2.5s ease-in-out infinite;
}

/* Headline */
.hero__headline {
    font-family: var(--font-display);
    font-size: var(--text-7xl);
    font-weight: 400;
    line-height: 1.0;
    color: var(--clr-white);
    letter-spacing: -0.02em;
    margin-bottom: var(--sp-6);
}

.hero__headline-em {
    display: block;
    font-style: italic;
    color: var(--clr-accent-bright);
}

/* Subline */
.hero__sub {
    font-size: var(--text-lg);
    color: rgba(255,255,255,0.65);
    max-width: 520px;
    margin: 0 auto var(--sp-10);
    line-height: 1.6;
}

/* CTA cluster */
.hero__ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
}

/* Scroll cue line + bar */
.hero__scroll-cue {
    position: absolute;
    bottom: var(--sp-8);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero__scroll-line {
    display: block;
    width: 1px;
    height: 60px;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 100%);
    animation: scrollLineGrow 2s ease-out infinite;
    transform-origin: top center;
}

@keyframes scrollLineGrow {
    0%   { transform: scaleY(0); opacity: 1;   }
    80%  { transform: scaleY(1); opacity: 1;   }
    100% { transform: scaleY(1); opacity: 0;   }
}


/* ═══════════════════════════════════════════════════════════════════════
   HOMEPAGE - PORTFOLIO GRID
   ══════════════════════════════════════════════════════════════════════ */

.section-portfolio-preview {
    padding: var(--sp-24) 0;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--sp-4);
    align-items: start;
}

.portfolio-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--clr-bg-alt);
}

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

.portfolio-card__image-wrap {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    background: var(--clr-mist);
}

/* Portrait featured images get a 2:3 box so they aren't cropped to landscape */
.portfolio-card--portrait .portfolio-card__image-wrap {
    aspect-ratio: 2 / 3;
}

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

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

/* Hover overlay */
.portfolio-card__overlay {
    position: absolute;
    inset: 0;
    background: rgba(23,20,15,0.5);
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-out);
    display: flex;
    align-items: flex-end;
    padding: var(--sp-4);
}

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

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

.portfolio-card__body {
    padding: var(--sp-4);
}

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

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

.portfolio-card__image--placeholder {
    background: linear-gradient(135deg, var(--clr-mist) 0%, var(--clr-bg-alt) 100%);
}


/* ═══════════════════════════════════════════════════════════════════════
   HOMEPAGE - ABOUT SPLIT
   ══════════════════════════════════════════════════════════════════════ */

.section-about {
    padding: var(--sp-24) 0;
}

.about-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-12);
    align-items: center;
    max-width: var(--container-narrow);
    margin: 0 auto;
}

.about-split__image {
    position: relative;
    max-width: 440px;
    margin: 0 auto;
}

.about-split__img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 1;
}

.about-split__img-placeholder {
    width: 100%;
    aspect-ratio: 4 / 5;
    background: var(--clr-ink-soft);
    border: 1px solid rgba(255,255,255,0.06);
}

/* Gold decorative frame offset behind the image */
.about-split__frame {
    position: absolute;
    top: var(--sp-6);
    right: calc( -1 * var(--sp-6) );
    bottom: calc( -1 * var(--sp-6) );
    left: var(--sp-6);
    border: 1px solid rgba(28,140,160,0.3);
    z-index: 0;
    pointer-events: none;
}

.about-split__text {
    color: var(--clr-white);
    padding: var(--sp-4) 0;
}

.about-split__text .eyebrow {
    display: block;
    margin-bottom: var(--sp-4);
}

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

.about-split__heading em {
    color: var(--clr-accent-bright);
}

.about-split__body p {
    color: rgba(255,255,255,0.65);
    line-height: 1.8;
    margin-bottom: var(--sp-6);
}

/* Stats row */
.about-stats {
    display: flex;
    gap: var(--sp-8);
    flex-wrap: wrap;
    margin-bottom: var(--sp-8);
    padding: var(--sp-6) 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.about-stat {
    display: flex;
    flex-direction: column;
}

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

.about-stat__label {
    font-size: var(--text-xs);
    font-weight: 400;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: var(--sp-1);
}

.about-split__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
}


/* ═══════════════════════════════════════════════════════════════════════
   HOMEPAGE - JOURNAL PREVIEW (Post Cards)
   ══════════════════════════════════════════════════════════════════════ */

.section-journal {
    padding: var(--sp-24) 0;
}

.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--sp-8);
    list-style: none;
    /* Reading cards stay legible - cap width and centre, even inside a wide section. */
    max-width: 1500px;
    margin-inline: auto;
}

/* Post Card */
.post-card {
    display: flex;
    flex-direction: column;
    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);
}

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

.post-card__image-link {
    display: block;
    overflow: hidden;
}

.post-card__image-wrap {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--clr-mist);
}

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

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

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

.post-card__meta {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}

.post-card__cat {
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--clr-accent-strong);
    text-decoration: none;
    transition: color var(--dur-fast);
}

.post-card__cat:hover {
    color: var(--clr-accent);
}

/* Dark mode: Deep Tide on the dark card surface is 4.1:1, under AA for text
   this small. The dark calibration of Tide reads 5.5:1 there. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .post-card__cat { color: var(--clr-accent); }
    :root:not([data-theme="light"]) .post-card__cat:hover { color: var(--clr-accent-bright); }
}
:root[data-theme="dark"] .post-card__cat { color: var(--clr-accent); }
:root[data-theme="dark"] .post-card__cat:hover { color: var(--clr-accent-bright); }

.post-card__reading-time {
    font-size: var(--text-xs);
    color: var(--clr-text-muted);
    margin-left: auto;
}

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

.post-card__title-link {
    text-decoration: none;
    color: inherit;
    transition: color var(--dur-fast);
}

.post-card__title-link:hover {
    color: var(--clr-accent-strong);
}

.post-card__excerpt {
    font-size: var(--text-sm);
    color: var(--clr-text-muted);
    line-height: 1.65;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--sp-5);
    padding-top: var(--sp-4);
    border-top: var(--border);
}

.post-card__date {
    font-size: var(--text-xs);
    color: var(--clr-text-muted);
}

.post-card__read-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);
    text-decoration: none;
    transition: gap var(--dur-fast), color var(--dur-fast);
}

.post-card__read-more:hover {
    gap: var(--sp-2);
    color: var(--clr-accent);
}


/* ═══════════════════════════════════════════════════════════════════════
   HOMEPAGE - PRINT SHOP PREVIEW
   ══════════════════════════════════════════════════════════════════════ */

.section-prints {
    padding: var(--sp-24) 0;
}

.prints-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-8) var(--sp-6); /* taller row rhythm between gallery rows */
    align-items: stretch; /* equal-height rows → labels share one horizon */
}
@media (min-width: 600px) {
    .prints-grid { grid-template-columns: repeat(2, 1fr); }
}
.prints-grid > * {
    margin: 0;
}

.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);
}

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

.print-card__link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* NOTE: .print-card__image-wrap and .print-card__image are defined in
   phase2.css (full-frame, no crop). The earlier cropped/aspect-ratio rules
   were removed from here to avoid overriding that behaviour. */

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

.print-card__badge {
    position: absolute;
    top: var(--sp-3);
    right: var(--sp-3);
    background: var(--clr-ink);
    color: var(--clr-accent-bright);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--radius-full);
    border: 1px solid rgba(28,140,160,0.4);
}

.print-card__body {
    padding: var(--sp-4) var(--sp-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
}

.print-card__title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 400;
    color: var(--clr-text);
}

.print-card__price {
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--clr-text);
    margin-top: var(--sp-1);
}

.print-card__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--clr-accent-strong);
    white-space: nowrap;
    flex-shrink: 0;
    transition: color var(--dur-fast);
}

.print-card__link:hover .print-card__cta {
    color: var(--clr-accent);
}

.print-card__coming-soon {
    font-size: var(--text-sm);
    color: var(--clr-text-muted);
    font-style: italic;
    text-align: center;
    padding: var(--sp-4);
    width: 100%;
}


/* ═══════════════════════════════════════════════════════════════════════
   NEWSLETTER SECTION
   ══════════════════════════════════════════════════════════════════════ */

.section-newsletter {
    background: var(--clr-ink);
    padding: var(--sp-20) 0;
    overflow: hidden;
}

.newsletter {
    position: relative;
    text-align: center;
}

.newsletter__deco {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    color: rgba(28,140,160,0.07);
    pointer-events: none;
    z-index: 0;
}

.newsletter__content {
    position: relative;
    z-index: 1;
}

.newsletter__heading {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: 400;
    color: var(--clr-white);
    margin: var(--sp-3) 0 var(--sp-5);
    letter-spacing: -0.01em;
}

.newsletter__description {
    font-size: var(--text-base);
    color: rgba(255,255,255,0.5);
    max-width: 480px;
    margin: 0 auto var(--sp-8);
    line-height: 1.7;
}

.newsletter__form-wrap {
    max-width: 480px;
    margin: 0 auto;
}

.newsletter__input-group {
    display: flex;
    gap: 0;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: border-color var(--dur-base);
}

.newsletter__input-group:focus-within {
    border-color: var(--clr-accent);
}

.newsletter__input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    padding: var(--sp-4) var(--sp-5);
    font-size: var(--text-base);
    color: var(--clr-white);
    min-width: 0;
}

.newsletter__input::placeholder {
    color: rgba(255,255,255,0.3);
}

.newsletter__submit {
    flex-shrink: 0;
    border: none;
    border-left: 1px solid rgba(255,255,255,0.1);
    border-radius: 0;
    padding: var(--sp-4) var(--sp-6);
}

.newsletter__privacy {
    font-size: var(--text-xs);
    color: rgba(255,255,255,0.25);
    margin-top: var(--sp-3);
    letter-spacing: 0.04em;
}

.newsletter__honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}


/* ═══════════════════════════════════════════════════════════════════════
   SINGLE POST
   ══════════════════════════════════════════════════════════════════════ */

/* The post hero (.post-hero*) and article layout (.post-layout*) are owned by
   assets/css/editorial.css, which loads last on journal posts. */

/* Prose content - generous typography */
.prose {
    line-height: 1.85;
    color: var(--clr-text);
}

.prose h2 {
    font-size: var(--text-3xl);
    margin-top: var(--sp-12);
    margin-bottom: var(--sp-4);
    color: var(--clr-text);
}

.prose h3 {
    font-size: var(--text-2xl);
    margin-top: var(--sp-8);
    margin-bottom: var(--sp-3);
    color: var(--clr-text);
}

.prose p {
    margin-bottom: var(--sp-5);
    font-size: var(--text-lg);
}

.prose img {
    border-radius: var(--radius-md);
    margin: var(--sp-8) 0;
    max-width: 100%;
}

.prose blockquote {
    border-left: 3px solid var(--clr-accent);
    padding: var(--sp-4) var(--sp-8);
    margin: var(--sp-8) 0;
    background: var(--clr-bg-alt);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-style: italic;
    color: var(--clr-text-muted);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.prose ul, .prose ol {
    padding-left: var(--sp-6);
    margin-bottom: var(--sp-5);
    list-style: revert;
}

.prose li {
    margin-bottom: var(--sp-2);
    font-size: var(--text-lg);
}

/* Tags */
.post-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-10);
    padding-top: var(--sp-8);
    border-top: var(--border);
}

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

.post-tags__tag {
    font-size: var(--text-xs);
    padding: var(--sp-1) var(--sp-3);
    border: var(--border);
    border-radius: var(--radius-full);
    color: var(--clr-text-muted);
    text-decoration: none;
    transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
}

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

/* Author card, previous/next and sidebar widgets were replaced by the
   designed ending (editorial.css, section 8). */


/* ═══════════════════════════════════════════════════════════════════════
   ARCHIVE / INDEX
   ══════════════════════════════════════════════════════════════════════ */

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

.archive-header__title {
    font-family: var(--font-display);
    font-size: var(--text-5xl);
    font-weight: 400;
    color: var(--clr-white);
    margin-top: var(--sp-3);
    letter-spacing: -0.015em;
}

.archive-header__subtitle {
    font-size: var(--text-lg);
    color: rgba(255,255,255,0.5);
    margin-top: var(--sp-4);
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.65;
}

/* Filter bar */
.filter-bar {
    background: var(--clr-surface);
    border-bottom: var(--border);
    position: sticky;
    top: var(--header-height);
    z-index: var(--z-sticky);
}

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

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

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

.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;
    color: var(--clr-text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition:
        color var(--dur-fast),
        border-color var(--dur-fast);
    letter-spacing: 0.02em;
}

.filter-bar__link.is-active,
.filter-bar__link:hover {
    color: var(--clr-text);
    border-bottom-color: var(--clr-accent);
}

.filter-bar__count {
    font-size: var(--text-xs);
    color: var(--clr-text-muted);
    background: var(--clr-bg-alt);
    padding: 1px 6px;
    border-radius: var(--radius-full);
}

/* Pagination */
.archive-pagination {
    margin-top: var(--sp-16);
    text-align: center;
}

.archive-pagination .nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

.archive-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--sp-3);
    border: var(--border);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--clr-text-muted);
    text-decoration: none;
    transition:
        border-color var(--dur-fast),
        color var(--dur-fast),
        background var(--dur-fast);
}

.archive-pagination .page-numbers:hover,
.archive-pagination .page-numbers.current {
    border-color: var(--clr-accent);
    color: var(--clr-text);
    background: rgba(28,140,160,0.08);
}

/* Empty state */
.archive-empty {
    text-align: center;
    padding: var(--sp-20) 0;
}

.archive-empty__icon {
    margin-bottom: var(--sp-6);
}

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

.archive-empty__title {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    color: var(--clr-text);
    margin-bottom: var(--sp-4);
}

.archive-empty__text {
    font-size: var(--text-base);
    color: var(--clr-text-muted);
    margin-bottom: var(--sp-8);
}


/* ═══════════════════════════════════════════════════════════════════════
   PAGE HEADER
   ══════════════════════════════════════════════════════════════════════ */

.page-header {
    padding: var(--sp-16) 0 var(--sp-12);
    background: var(--clr-ink);
    color: var(--clr-white);
    position: relative;
    overflow: hidden;
}

.page-header--has-hero {
    min-height: 50vh;
    display: flex;
    align-items: flex-end;
}

.page-header__hero {
    position: absolute;
    inset: 0;
}

.page-header__hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.page-header__hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 0%, rgba(23,20,15,0.85) 100%);
}

.page-header__content {
    position: relative;
    z-index: 1;
}

.page-header__title {
    font-family: var(--font-display);
    font-size: var(--text-5xl);
    font-weight: 400;
    color: var(--clr-white);
    letter-spacing: -0.015em;
    margin-top: var(--sp-4);
}

/* Page content prose */
.page-content {
    padding: var(--sp-16) 0 var(--sp-20);
}


/* ═══════════════════════════════════════════════════════════════════════
   BREADCRUMB
   ══════════════════════════════════════════════════════════════════════ */

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

.breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
    list-style: none;
}

.breadcrumb__link {
    font-size: var(--text-xs);
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    letter-spacing: 0.06em;
    transition: color var(--dur-fast);
}

.breadcrumb__link:hover {
    color: var(--clr-accent-bright);
}

.breadcrumb__sep {
    font-size: var(--text-xs);
    color: rgba(255,255,255,0.2);
}

.breadcrumb__item--current {
    font-size: var(--text-xs);
    color: rgba(255,255,255,0.35);
    letter-spacing: 0.06em;
}


/* ═══════════════════════════════════════════════════════════════════════
   404 PAGE
   ══════════════════════════════════════════════════════════════════════ */

.error-404-page {
    padding: var(--sp-24) 0;
}

.error-404 {
    text-align: center;
    max-width: 560px;
    margin: 0 auto;
}

.error-404__number {
    font-family: var(--font-display);
    font-size: clamp(6rem, 20vw, 14rem);
    font-weight: 400;
    color: var(--clr-mist);
    line-height: 1;
    margin-bottom: var(--sp-4);
    letter-spacing: -0.04em;
    user-select: none;
}

.error-404__title {
    font-size: var(--text-4xl);
    font-weight: 400;
    color: var(--clr-text);
    margin-bottom: var(--sp-4);
}

.error-404__text {
    color: var(--clr-text-muted);
    max-width: 420px;
    margin: 0 auto var(--sp-8);
    line-height: 1.7;
}

.error-404__search {
    margin-bottom: var(--sp-8);
}

.error-404__search .search-form {
    display: flex;
    gap: var(--sp-3);
    border: var(--border);
    border-radius: var(--radius-md);
    padding: var(--sp-2) var(--sp-4);
    transition: border-color var(--dur-base);
}

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

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

.error-404__search .search-submit {
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--clr-accent-strong);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color var(--dur-fast);
}

.error-404__search .search-submit:hover {
    color: var(--clr-accent);
}

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


/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE - LAYOUT PROMOTIONS
   ══════════════════════════════════════════════════════════════════════ */

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

    .about-split {
        grid-template-columns: 1fr 1fr;
        align-items: center;
    }

    .about-split__image {
        max-width: none;
        margin: 0;
    }

}

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

    .portfolio-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .prints-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .posts-grid {
        grid-template-columns: repeat(3, 1fr);
    }

}

/* ── Dark-mode toggle button (sun/moon swap) ───────────────────────────── */
.header-btn--theme .icon-sun { display: none; }
.header-btn--theme .icon-moon { display: block; }
:root[data-theme="dark"] .header-btn--theme .icon-sun { display: block; }
:root[data-theme="dark"] .header-btn--theme .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .header-btn--theme .icon-sun { display: block; }
  :root:not([data-theme="light"]) .header-btn--theme .icon-moon { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SERVICES (Polish) - page-services.php
   Reuses section / container / prose / btn. Only the page-specific pieces
   live here.
   ═══════════════════════════════════════════════════════════════════════ */

.services-page__title {
    font-size: var(--text-4xl);
    line-height: 1.1;
    margin: var(--sp-3) 0 var(--sp-6);
    max-width: 18ch;
}

.services-page__heading {
    font-size: var(--text-2xl);
    margin-bottom: var(--sp-5);
}

.services-grid {
    /* Explicit 2 columns, not auto-fit. auto-fit resolves to 2 or 3 tracks
       depending on viewport width, so four cards could land 3+1 - an orphan
       on its own row, which is what read as unfinished. */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-5);
}

@media (max-width: 640px) {
    .services-grid { grid-template-columns: 1fr; }
}

.services-card {
    padding: var(--sp-5);
    background: var(--clr-surface);
    border: 1px solid var(--clr-mist);
    border-radius: var(--radius-md);
}

.services-card__title {
    font-size: var(--text-lg);
    margin-bottom: var(--sp-2);
}

.services-card__text {
    font-size: var(--text-sm);
    color: var(--clr-text-muted);
    line-height: 1.6;
}

.services-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--sp-5);
}

.services-steps__item {
    display: flex;
    gap: var(--sp-4);
    align-items: flex-start;
}

.services-steps__num {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--clr-accent-alt);
    color: var(--clr-on-accent);   /* same reason as the banner - see below */
    font-size: var(--text-sm);
    font-weight: 600;
}

.services-steps__title {
    font-size: var(--text-lg);
    margin-bottom: var(--sp-1);
}

.services-steps__text {
    font-size: var(--text-sm);
    color: var(--clr-text-muted);
    line-height: 1.6;
}

.services-page__email {
    font-size: var(--text-xl);
    margin: var(--sp-4) 0;
}

.services-page__email a {
    color: var(--clr-text);
    text-decoration: none;
    border-bottom: 1px solid var(--clr-mist);
    transition: color var(--dur-fast), border-color var(--dur-fast);
}

.services-page__email a:hover,
.services-page__email a:focus-visible {
    color: var(--clr-accent-strong);
    border-color: currentColor;
}

.services-page__actions {
    margin-top: var(--sp-5);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
}

.services-page__body {
    margin-top: var(--sp-6);
}

@media (max-width: 600px) {
    .services-page__title { font-size: var(--text-3xl); }
}

/* Services - lead image, English note, photo strip */

.services-hero {
    width: 100%;
    max-height: 46vh;
    overflow: hidden;
}

.services-hero__img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 46vh;
    object-fit: cover;
    object-position: center;
}

/* Language banner - full-width, first thing on the page. Deliberately more
   prominent than body copy: it has to be seen before someone decides the site
   is broken. */
.services-langbar {
    background: var(--clr-accent-alt);
    /* NOT #fff. --clr-accent-alt flips from #115F6E to #3FB0C2 in dark mode,
       where white gives 2.56:1 - a clear WCAG AA failure. --clr-on-accent is
       the token that flips with it: 7.28:1 light, 7.34:1 dark. */
    color: var(--clr-on-accent);
    padding: var(--sp-3) 0;
}

.services-langbar__text {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 500;
    line-height: 1.6;
    text-align: center;
}

@media (min-width: 700px) {
    .services-langbar__text { font-size: var(--text-lg); }
}

.services-langbar__text a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.services-langbar__text a:hover,
.services-langbar__text a:focus-visible {
    text-decoration-thickness: 2px;
}

.services-photos {
    margin-top: var(--sp-6);
}

@media (max-width: 600px) {
    .services-hero,
    .services-hero__img { max-height: 34vh; }
}

/* ═══════════════════════════════════════════════════════════════════════
   DESTINATION HUBS
   One page per place, showing everything filed to it. Deliberately not an
   interstitial: the hierarchy does the drilling, and every parent term is
   already an aggregate view because include_children rolls its children up.
   ═══════════════════════════════════════════════════════════════════════ */

.hub-hero {
    width: 100%;
    max-height: 52vh;
    overflow: hidden;
}

.hub-hero__img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 52vh;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 700px) {
    .hub-hero,
    .hub-hero__img { max-height: 36vh; }
}

/* Places within: the drill-down, after the content rather than instead of it. */
.hub-children {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--sp-3);
    margin-top: var(--sp-5);
}

.hub-child {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    padding: var(--sp-4) var(--sp-5);
    background: var(--clr-surface);
    border: 1px solid var(--clr-mist);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--dur-fast), transform var(--dur-fast);
}

.hub-child:hover,
.hub-child:focus-visible {
    border-color: var(--clr-accent-strong);
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .hub-child { transition: border-color var(--dur-fast); }
    .hub-child:hover,
    .hub-child:focus-visible { transform: none; }
}

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

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

/* ── About: the two audience tracks in the model section ──────────────── */
.about-tracks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
    margin: clamp(2rem, 4vw, 3rem) 0;
    padding-top: clamp(1.5rem, 3vw, 2rem);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.about-track__title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 500;
    margin: 0 0 var(--sp-2);
}

.about-track__text {
    font-size: var(--text-base);
    line-height: 1.65;
    margin: 0;
    opacity: 0.82;
}

/* Closing CTA: a heading now, not a signature. */
.about-signoff__lead {
    max-width: 46ch;
    margin: var(--sp-3) auto var(--sp-6);
    font-size: var(--text-lg);
    line-height: 1.6;
    color: var(--clr-text-muted);
}

/* ── Dark section: headings and body text inside the tracks ───────────────
   .section--dark sets color on the section, but global h3 and p rules carry
   their own colour and beat inheritance, so the tracks rendered near-black on
   near-black. Set explicitly rather than relying on the cascade. */
.section--dark .about-track__title {
    color: var(--clr-white);
}

.section--dark .about-track__text,
.section--dark .about-philosophy__body p {
    color: var(--clr-white);
    opacity: 0.78;
}

/* ── Transition from the opening statement into the bio ───────────────────
   The statement ended and the next heading began with nothing but empty space
   between them, which read as two unrelated pages. A short centred rule closes
   the thought and the tightened spacing stops the gap feeling accidental. */
/* The opening statement is now a dark band matching "One place, many ways",
   so the page opens and closes its argument in the same register. It carries
   real padding of its own; the earlier zero bottom padding only made sense
   when this sat directly on the page background. */
.about-opening.section--alt {
    padding-block: clamp(4rem, 9vw, 7rem);
}

/*
 * The opening now shares section--alt with "Explore what I am creating", so
 * the page opens and closes on the same sand band. Text colour is left to
 * phase2's own `.about-opening__text { color: var(--clr-text) }`, which is
 * correct on sand; the earlier white override existed only for the dark band.
 * Measured on --clr-bg-alt: 12.35:1 light, 12.42:1 dark. Both pass AAA.
 */
.about-opening.section--alt .about-opening__text {
    position: relative;
    padding-bottom: clamp(2rem, 5vw, 3rem);
}

.about-opening__text::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 3rem;
    height: 2px;
    background: var(--clr-accent);
    opacity: 0.8;
}

.about-bio.section {
    padding-top: clamp(4rem, 8vw, 6rem);
}