/*
 * Ojistoh — homepage.css
 * Styles for front-page.php, archive pages, shortcodes, patterns.
 * Loaded via enqueue.php after templates.css.
 */

/* ── PATTERN BACKGROUNDS
   Use these utility classes anywhere in Pagelayer or templates.
   All reference files in /assets/patterns/
── */
.oj-pat-chevron-star  { background-image: url('../patterns/chevron-star.svg'); }
.oj-pat-chevron-ember { background-image: url('../patterns/chevron-ember.svg'); }
.oj-pat-chevron-sage  { background-image: url('../patterns/chevron-sage.svg'); }
.oj-pat-diamond-star  { background-image: url('../patterns/diamond-star.svg'); }
.oj-pat-diamond-ember { background-image: url('../patterns/diamond-ember.svg'); }
.oj-pat-stripe-star   { background-image: url('../patterns/stripe-star.svg'); }
.oj-pat-stripe-ember  { background-image: url('../patterns/stripe-ember.svg'); }
.oj-pat-stripe-sage   { background-image: url('../patterns/stripe-sage.svg'); }
.oj-pat-zigzag-sage   { background-image: url('../patterns/zigzag-sage.svg'); }
.oj-pat-zigzag-star   { background-image: url('../patterns/zigzag-star.svg'); }
.oj-pat-grid-star     { background-image: url('../patterns/grid-star.svg'); }
.oj-pat-stars-tile    { background-image: url('../patterns/stars-tile.svg'); }
.oj-pat-vlines-ember  { background-image: url('../patterns/vlines-ember.svg'); }
.oj-pat-vlines-star   { background-image: url('../patterns/vlines-star.svg'); }
.oj-pat-turtle-shell  { background-image: url('../patterns/turtle-shell.svg'); }

/* Pattern utility classes — explicit background-size for FF/Edge/Safari */
[class*="oj-pat-"] {
    background-repeat: repeat;
}
.oj-pat-chevron-star  { background-size: 80px 80px; }
.oj-pat-chevron-ember { background-size: 80px 80px; }
.oj-pat-chevron-sage  { background-size: 80px 80px; }
.oj-pat-diamond-star  { background-size: 24px 24px; }
.oj-pat-diamond-ember { background-size: 24px 24px; }
.oj-pat-stripe-star   { background-size: 40px 40px; }
.oj-pat-stripe-ember  { background-size: 40px 40px; }
.oj-pat-stripe-sage   { background-size: 40px 40px; }
.oj-pat-zigzag-sage   { background-size: 48px 24px; }
.oj-pat-zigzag-star   { background-size: 48px 24px; }
.oj-pat-grid-star     { background-size: 48px 48px; }
.oj-pat-stars-tile    { background-size: 120px 120px; }
.oj-pat-vlines-ember  { background-size: 20px 20px; }
.oj-pat-vlines-star   { background-size: 20px 20px; }
.oj-pat-turtle-shell  { background-size: 60px 52px; }

/* ─────────────────────────────────────────
   HOMEPAGE — HERO
───────────────────────────────────────── */
.oj-homepage { overflow-x: hidden; }

.oj-hero {
    min-height: 50vh;
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

.oj-hero__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.oj-hero__svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.oj-hero__vignette {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(13,13,20,0.35) 0%,
        rgba(13,13,20,0.08) 30%,
        rgba(13,13,20,0.15) 60%,
        rgba(13,13,20,0.90) 100%
    );
    pointer-events: none;
}

.oj-hero__content {
    position: relative;
    z-index: 10;
    width: 100%;
    padding-bottom: 48px;
    padding-top: 80px;
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 56px;
    align-items: flex-end;
}

/* Hero left */
.oj-hero__kicker {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--oj-star);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}
.oj-hero__kicker::before {
    content: '';
    width: 32px;
    height: 1px;
    background: var(--oj-star);
    flex-shrink: 0;
}
.oj-hero__h1 {
    font-family: var(--oj-font-display);
    font-size: clamp(60px, 9vw, 116px);
    font-weight: 300;
    line-height: 0.92;
    letter-spacing: -0.03em;
    color: var(--oj-white);
    margin-bottom: 36px;
}
.oj-hero__h1 em {
    font-style: italic;
    color: var(--oj-star);
    display: block;
}
.oj-hero__actions {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.oj-btn-ghost-light {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(245,243,250,0.72);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--oj-font-sans);
}
.oj-btn-ghost-light:hover { color: var(--oj-star); opacity: 1; }

/* Hero right */
.oj-hero__right {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.oj-hero__featured-label {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--oj-slate);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.oj-hero__featured-label::before {
    content: '';
    width: 20px;
    height: 1px;
    background: var(--oj-slate);
}

/* Hero event card (compact) */
.oj-hero-event-card {
    background: var(--oj-dusk);
    border: 1px solid rgba(240,230,160,0.12);
    border-radius: var(--oj-radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: block;
    margin-bottom: 10px;
    transition: border-color 0.2s;
}
.oj-hero-event-card:hover { border-color: rgba(240,230,160,0.3); opacity: 1; }
.oj-hero-event-card__image {
    height: 180px;
    background: var(--oj-deep);
    position: relative;
    overflow: hidden;
}
.oj-hero-event-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oj-hero-event-card__placeholder {
    width: 100%;
    height: 100%;
    background: var(--oj-deep);
    background-image: url('../patterns/chevron-star.svg');
    background-repeat: repeat;
    background-size: 80px 80px;
}
.oj-hero-event-card__image .oj-type-pill {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
}
.oj-hero-event-card__body { padding: 18px 20px 14px; }
.oj-hero-event-card__date {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--oj-star);
    margin-bottom: 6px;
}
.oj-hero-event-card__title {
    font-family: var(--oj-font-display);
    font-size: 22px;
    font-weight: 400;
    color: var(--oj-white);
    line-height: 1.2;
    margin-bottom: 4px;
}
.oj-hero-event-card__venue { font-size: 12px; color: var(--oj-slate); }
.oj-hero-event-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    border-top: 1px solid rgba(240,230,160,0.08);
}
.oj-hero-event-card__link {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--oj-ash);
}

/* Mini events */
.oj-hero__mini-events { display: flex; flex-direction: column; gap: 6px; }
.oj-mini-event {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    background: var(--oj-ink);
    border: 1px solid rgba(240,230,160,0.07);
    border-radius: var(--oj-radius-md);
    text-decoration: none;
    transition: border-color 0.18s, background 0.18s;
    color: inherit;
}
.oj-mini-event:hover { border-color: rgba(240,230,160,0.22); background: var(--oj-dusk); opacity: 1; }
.oj-mini-event__date {
    width: 44px;
    flex-shrink: 0;
    text-align: center;
}
.oj-mini-event__month {
    display: block;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--oj-star);
}
.oj-mini-event__day {
    display: block;
    font-family: var(--oj-font-display);
    font-size: 28px;
    font-weight: 300;
    color: var(--oj-white);
    line-height: 1;
}
.oj-mini-event__divider {
    width: 1px;
    height: 36px;
    background: rgba(240,230,160,0.12);
    flex-shrink: 0;
}
.oj-mini-event__info { flex: 1; min-width: 0; }
.oj-mini-event__title {
    font-size: 13px;
    font-weight: 400;
    color: var(--oj-white);
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.oj-mini-event__meta { font-size: 11px; color: var(--oj-slate); }
.oj-mini-event__arrow { color: var(--oj-slate); font-size: 14px; flex-shrink: 0; }

/* Scroll indicator */
.oj-hero__scroll {
    position: absolute;
    bottom: 32px;
    right: 48px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.oj-hero__scroll-label {
    writing-mode: vertical-rl;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(240,230,160,0.45);
}
.oj-hero__scroll-line {
    width: 1px;
    height: 56px;
    background: rgba(240,230,160,0.25);
}

/* ── MARQUEE ── */
.oj-marquee {
    background: var(--oj-star);
    overflow: hidden;
    white-space: nowrap;
    padding-block: 13px;
}
.oj-marquee__track {
    display: inline-flex;
    gap: 0;
    animation: oj-marquee 28s linear infinite;
}
.oj-marquee__item {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--oj-night);
    padding-inline: 28px;
    display: inline-flex;
    align-items: center;
    gap: 16px;
}
.oj-marquee__sep { color: rgba(13,13,20,0.35); }
@keyframes oj-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .oj-marquee__track { animation: none; }
}

/* ─────────────────────────────────────────
   HOMEPAGE SECTIONS
───────────────────────────────────────── */
.oj-home-featured,
.oj-home-events-strip,
.oj-home-books { padding-block: 80px; }

.oj-home-pillars { padding-block: 0; }

/* ── Homepage book grid — simplified card
   On the homepage strip show only:
     cover image, title, price, buy button.
   Hide: nation tags, genre pill, author line.
── */
.oj-home-books .oj-genre-pill,
.oj-home-books .oj-book-card__genre,
.oj-home-books .oj-book-card__author,
.oj-home-books .oj-nation-tags,
.oj-home-books .oj-nation-tag { display: none; }

/* Tighten body padding now that metadata is hidden */
.oj-home-books .oj-book-card__body {
    padding-bottom: 10px;
}


/* Events strip */
.oj-events-strip-wrap {
    overflow-x: auto;
    padding-inline: 40px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.oj-events-strip-wrap::-webkit-scrollbar { display: none; }
.oj-events-strip {
    display: flex;
    gap: 16px;
    scroll-snap-type: x mandatory;
    width: max-content;
    padding-bottom: 4px;
}
.oj-events-strip .oj-event-card {
    flex: 0 0 300px;
    scroll-snap-align: start;
    width: 300px;
}
.oj-events-strip__see-all-card {
    flex: 0 0 140px;
    scroll-snap-align: start;
    background: transparent;
    border: 1px dashed rgba(240,230,160,0.2);
    border-radius: var(--oj-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.oj-events-strip__see-all-card span {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--oj-star);
    text-align: center;
    padding: 16px;
}
.oj-events-strip__see-all-card:hover { border-color: rgba(240,230,160,0.4); opacity: 1; }

/* ─────────────────────────────────────────
   PILLARS
───────────────────────────────────────── */
.oj-pillars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid rgba(240,230,160,0.08);
    border-bottom: 1px solid rgba(240,230,160,0.08);
}
.oj-pillar {
    position: relative;
    overflow: hidden;
    padding: 72px 64px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 460px;
    text-decoration: none;
    color: inherit;
    transition: background 0.25s;
}
/* Divider between pillars — right border on all except last child */
.oj-pillar:not(:last-child) { border-right: 1px solid rgba(240,230,160,0.08); }
.oj-pillar:hover { background: rgba(240,230,160,0.02); opacity: 1; }
.oj-pillar__bg {
    position: absolute;
    inset: 0;
    opacity: 1;
    background-repeat: repeat;
    pointer-events: none;
}
/* Pillar background patterns are set via inline style from the Customizer */
.oj-pillar__number {
    font-family: var(--oj-font-display);
    font-size: 120px;
    font-weight: 300;
    color: rgba(240,230,160,0.05);
    position: absolute;
    top: 32px;
    right: 48px;
    line-height: 1;
    user-select: none;
    pointer-events: none;
}
.oj-pillar__eyebrow {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--oj-slate);
    margin-bottom: 18px;
}
.oj-pillar__name {
    font-family: var(--oj-font-display);
    font-size: clamp(30px, 3.5vw, 46px);
    font-weight: 300;
    color: var(--oj-white);
    line-height: 1.05;
    margin-bottom: 16px;
}
.oj-pillar--pub .oj-pillar__name em,
.oj-pillar--prod .oj-pillar__name em { font-style: italic; color: var(--oj-star); }
.oj-pillar__desc {
    font-size: 14px;
    color: var(--oj-ash);
    line-height: 1.7;
    max-width: 36ch;
    margin-bottom: 32px;
}
.oj-pillar__link {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--oj-star);
    display: flex;
    align-items: center;
    gap: 6px;
}
.oj-pillar__link::after { content: '→'; }

/* ─────────────────────────────────────────
   STATS ROW
───────────────────────────────────────── */
.oj-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: var(--oj-max-width);
    margin-inline: auto;
    border-top: 1px solid rgba(240,230,160,0.08);
    border-bottom: 1px solid rgba(240,230,160,0.08);
}
.oj-stat {
    padding: 48px 40px;
    border-right: 1px solid rgba(240,230,160,0.08);
}
.oj-stat:last-child { border-right: none; }
.oj-stat__num {
    font-family: var(--oj-font-display);
    font-size: 56px;
    font-weight: 300;
    color: var(--oj-white);
    line-height: 1;
    margin-bottom: 6px;
}
.oj-stat__num em { font-style: normal; color: var(--oj-star); }
.oj-stat__label {
    font-size: 12px;
    color: var(--oj-slate);
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}
.oj-stat__note { font-size: 11px; color: var(--oj-sage); line-height: 1.5; }

/* ─────────────────────────────────────────
   NEWSLETTER BAND
───────────────────────────────────────── */
.oj-newsletter-band {
    background: var(--oj-dusk);
    padding-block: 80px;
}
.oj-newsletter-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}
.oj-newsletter-title {
    font-family: var(--oj-font-display);
    font-size: clamp(28px, 3.5vw, 44px);
    font-weight: 300;
    color: var(--oj-white);
    line-height: 1.1;
    margin-block: 8px 12px;
}
.oj-newsletter-body { font-size: 14px; color: var(--oj-ash); line-height: 1.7; }
.oj-nl-form {}
.oj-nl-form__row {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}
.oj-nl-form__input {
    flex: 1;
    background: rgba(240,230,160,0.06);
    border: 1px solid rgba(240,230,160,0.18);
    border-radius: var(--oj-radius-sm);
    padding: 13px 16px;
    font-family: var(--oj-font-sans);
    font-size: 14px;
    color: var(--oj-white);
    outline: none;
}
.oj-nl-form__input::placeholder { color: var(--oj-slate); }
.oj-nl-form__input:focus { border-color: rgba(240,230,160,0.45); }
.oj-nl-form__note { font-size: 11px; color: var(--oj-slate); }

/* ─────────────────────────────────────────
   BOOKS ARCHIVE / SHORTCODE
───────────────────────────────────────── */

/* Filter bar — same pattern as .oj-filter-bar on events page */
.oj-books-filter-bar {
    background: var(--oj-ink);
    border-bottom: 1px solid rgba(240,230,160,0.1);
    position: sticky;
    top: 64px;
    z-index: 90;
}
.oj-books-filter-bar__inner {
    display: flex;
    align-items: center;
    padding-block: 0;
    overflow-x: auto;
    gap: 0;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.oj-books-filter-bar__inner::-webkit-scrollbar { display: none; }

/* Archive inner — single column, full width */
.oj-books-archive-inner {
    padding-block: 32px 96px;
    scroll-margin-top: 54px; /* height of sticky filter bar */
}
.oj-books-main {}

.oj-books-grid-full {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/* Cursor override — filter items here are <span> not <a> */
.oj-books-filter-bar .oj-nation-filter-item {
    cursor: pointer;
}

/* ─────────────────────────────────────────
   ARTISTS GRID
───────────────────────────────────────── */
.oj-artists-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    padding-block: 48px 96px;
}
.oj-artist-card {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.oj-artist-card__portrait {
    aspect-ratio: 1;
    border-radius: var(--oj-radius-md);
    overflow: hidden;
    background: var(--oj-dusk);
    border: 1px solid rgba(240,230,160,0.1);
    position: relative;
    transition: border-color 0.2s;
}
.oj-artist-card:hover .oj-artist-card__portrait { border-color: rgba(240,230,160,0.3); }
.oj-artist-card__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oj-artist-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('../patterns/chevron-star.svg');
    background-repeat: repeat;
    background-size: 80px 80px;
}
.oj-artist-card__placeholder span {
    font-family: var(--oj-font-display);
    font-size: 44px;
    font-weight: 300;
    color: var(--oj-ash);
}
.oj-artist-card .oj-open-badge {
    position: absolute;
    bottom: 10px;
    left: 10px;
    font-size: 9px;
}
.oj-artist-card__discipline {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--oj-star);
}
.oj-artist-card__name {
    font-family: var(--oj-font-display);
    font-size: 20px;
    font-weight: 400;
    color: var(--oj-white);
    line-height: 1.2;
}
.oj-artist-card__pronouns {
    font-size: 13px;
    color: var(--oj-slate);
    font-family: var(--oj-font-sans);
    font-weight: 300;
}
.oj-artist-card__nation { font-size: 11px; color: var(--oj-sage); }

/* ─────────────────────────────────────────
   BOOKS ARCHIVE — PAGE HEADER PATTERNS
───────────────────────────────────────── */
.oj-books-archive .oj-page-header {
    background: var(--oj-ink);
    position: relative;
    overflow: hidden;
}
.oj-books-archive .oj-page-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../patterns/diamond-star.svg');
    background-repeat: repeat;
    opacity: 0.5;
    pointer-events: none;
}

.oj-artists-archive .oj-page-header {
    background: var(--oj-ink);
    position: relative;
    overflow: hidden;
}
.oj-artists-archive .oj-page-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('../patterns/stars-tile.svg');
    background-repeat: repeat;
    opacity: 0.6;
    pointer-events: none;
}

/* ─────────────────────────────────────────
   EVENT CARD — pattern placeholders
   When no featured image, use themed patterns
───────────────────────────────────────── */
.oj-event-card__image-placeholder {
    background-image: url('../patterns/chevron-star.svg');
    background-repeat: repeat;
    opacity: 0.7;
}
/* Override per event type via data attribute or class */
.oj-type--spoken-word ~ .oj-event-card__image .oj-event-card__image-placeholder,
.oj-event-card--spoken-word .oj-event-card__image-placeholder {
    background-image: url('../patterns/stripe-ember.svg');
}
.oj-type--concert ~ .oj-event-card__image .oj-event-card__image-placeholder,
.oj-event-card--concert .oj-event-card__image-placeholder {
    background-image: url('../patterns/zigzag-sage.svg');
}

/* ─────────────────────────────────────────
   BOOK COVER — pattern placeholders
───────────────────────────────────────── */
.oj-book-card__cover-placeholder {
    background-image: url('../patterns/diamond-star.svg');
    background-repeat: repeat;
}
.oj-book-cover-placeholder {
    background-image: url('../patterns/chevron-star.svg');
    background-repeat: repeat;
}

/* ─────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────── */
/* ── Desktop: 4 pillars side by side (shortcode sets inline cols via JS count)
   The inline style on .oj-pillars handles 1–4 columns at desktop.
   Breakpoints below override to enforce the responsive grid. ── */

@media ( max-width: 1100px ) {
    .oj-hero__content { grid-template-columns: 1fr 380px; gap: 40px; }
    .oj-stats-row { grid-template-columns: repeat(2, 1fr); }
    .oj-stat:nth-child(2) { border-right: none; }
    .oj-books-grid-full { grid-template-columns: repeat(3, 1fr); }
    .oj-artists-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Tablet: 2 pillar columns ── */
@media ( max-width: 960px ) {
    .oj-pillars { grid-template-columns: repeat(2, 1fr) !important; }
    /* Side borders between pairs; bottom border between rows */
    .oj-pillar:not(:last-child) { border-right: 1px solid rgba(240,230,160,0.08); }
    .oj-pillar:nth-child(2n)    { border-right: none !important; }
    .oj-pillar:nth-child(1),
    .oj-pillar:nth-child(2)     { border-bottom: 1px solid rgba(240,230,160,0.08); }
}

@media ( max-width: 900px ) {
    .oj-hero__content { grid-template-columns: 1fr; padding-bottom: 56px; }
    .oj-hero__right { display: none; } /* Hide on mobile — hero focuses on headline */
    .oj-hero__h1 { font-size: clamp(48px, 12vw, 80px); }
    .oj-hero__scroll { display: none; }
    .oj-newsletter-inner { grid-template-columns: 1fr; gap: 40px; }
    .oj-books-grid-full { grid-template-columns: repeat(2, 1fr); }
    .oj-books-grid-full { grid-template-columns: repeat(2, 1fr); }
    .oj-artists-grid { grid-template-columns: repeat(2, 1fr); }
    .oj-events-strip-wrap { padding-inline: 20px; }
    .oj-stat { padding: 32px 24px; }
}

/* ── Mobile: 1 pillar column ── */
@media ( max-width: 600px ) {
    .oj-pillars { grid-template-columns: 1fr !important; }
    .oj-pillar:not(:last-child) {
        border-right: none !important;
        border-bottom: 1px solid rgba(240,230,160,0.08);
    }
    .oj-stats-row { grid-template-columns: 1fr; }
    .oj-stat { border-right: none !important; border-bottom: 1px solid rgba(240,230,160,0.08); }
    .oj-stat:last-child { border-bottom: none; }
    .oj-pillar { padding: 40px 28px; min-height: 300px; }
    .oj-pillar__number { display: none; }
    .oj-books-grid-full { grid-template-columns: repeat(2, 1fr); }
    .oj-artists-grid { grid-template-columns: repeat(2, 1fr); }
}