/* ===================================================================
   Atelier theme - Brutalist editorial × Risograph print sensibility
   Version: 1.0.3
   Author: Reveloni
   For: CMS 6.0.2+
   
   For artists, designers, creative studios, galleries. Not for general
   business sites - this is a deliberate aesthetic statement.
   
   Spectral display serif × Manrope grotesk (mixed type families in same
   line). Tomato red #ff3b00 as the single decisive accent. Warm paper
   background #f4f1ea. Offset solid shadows (pure color, no blur) -
   risograph print signature. Asymmetric layouts. Numbered everything
   (Plate 001 / 047). Italic captions in white space.
   
   The menu button is "● ● CONTENTS" with sliding lines on hover - not a
   hamburger oval. Clicking opens a side drawer (60% viewport from left)
   with oversized typographic links - each link a mini hero. When the
   drawer is open, the same button morphs into "× Close" and stays above
   the drawer (z-index 1001) so clicking it again closes the drawer -
   one button serves both gestures, transforming visually.
   
   Light mode only. Galleries are light. This is a deliberate choice.
   
   Changelog:
     1.0.3 - Reverted clickable backdrop from 1.0.1 - it was preventing
             clicks on links inside the drawer and blocking scroll within
             the drawer (backdrop's pointer-events: auto interfered with
             drawer interactions despite higher z-index). Backdrop now
             back to pointer-events: none. Drawer is closed by clicking
             the menu button again (now z-index 1001, above the drawer)
             which morphs visually into "× Close" via :has() selector
             when .dropdown-menu has .active class. Same button, two
             gestures, transforms in place. body { overflow: hidden }
             from 1.0.2 retained - locks page scroll while drawer open.
     1.0.2 - Lock body scroll when side drawer is open. Without this,
             scroll wheel events would bleed through to the page beneath
             the drawer once the drawer's own scroll reached its end.
             Added body:has(.dropdown-menu.active) { overflow: hidden }.
     1.0.1 - Removed decorative × close button on the side drawer. It was
             a CSS pseudo-element which can't receive click events through
             the engine's toggleMenu() handler (the click was contained
             within .hamburger-menu so the "click outside menu" logic
             didn't fire either). Replaced with clickable backdrop:
             pointer-events: auto on body::before with cursor: pointer.
             Clicking the dimmed area to the right of the drawer now
             closes it - standard side-drawer UX pattern.
     1.0.0 - Initial release.
   =================================================================== */

/* === @PROPERTY === */
@property --grad-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* === RESET === */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    /* Atelier palette - paper + ink + one decisive accent */
    --paper: #f4f1ea;           /* Warm off-white, paper feel */
    --paper-warm: #ebe6d8;      /* Subtle warmer for elevated surfaces */
    --paper-shadow: #d8d2c0;    /* Paper edge shadow */
    --ink: #0a0a0a;             /* Deep black, like litho print */
    --ink-soft: #2a2a2a;        /* Body text, slightly less black */
    --ink-fade: #6a6660;        /* Captions, secondary text */
    --ink-mute: #a8a39a;        /* Page numbers, smallest meta */
    --accent: #ff3b00;          /* Tomato red - Schiaparelli, decisive */
    --accent-deep: #c92e00;     /* Darker for hover states */
    
    /* Mapped tokens */
    --text: var(--ink);
    --text-soft: var(--ink-soft);
    --text-secondary: var(--ink-fade);
    --text-muted: var(--ink-mute);
    --bg: var(--paper);
    --bg-elevated: var(--paper-warm);
    --bg-card: var(--paper);
    --border: var(--ink);
    --border-soft: rgba(10, 10, 10, 0.15);
    
    /* Sharp corners - editorial brutalism */
    --radius: 0;
    
    /* Solid offset shadows - risograph signature, no blur ever */
    --shadow-print-sm: 3px 3px 0 var(--ink);
    --shadow-print-md: 6px 6px 0 var(--ink);
    --shadow-print-accent: 6px 6px 0 var(--accent);
    --shadow-print-accent-sm: 3px 3px 0 var(--accent);
    
    /* Slow editorial easings */
    --ease-print: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-snap: cubic-bezier(0.5, 0, 0, 1);
    --transition: 0.4s var(--ease-print);
    --transition-fast: 0.2s var(--ease-print);
    --transition-slow: 0.7s var(--ease-print);
    
    /* Type stacks - mixed editorial */
    --font-display: 'Spectral', 'Times New Roman', Georgia, serif;
    --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
    --font-italic: 'Spectral', Georgia, serif;
}

/* === BASE === */
html {
    scroll-behavior: smooth;
    color-scheme: light;
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    color: var(--text-soft);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    
    /* Subtle paper texture - very low opacity noise */
    background-image: 
        radial-gradient(circle at 1px 1px, rgba(10, 10, 10, 0.018) 1px, transparent 0),
        radial-gradient(circle at 5px 8px, rgba(10, 10, 10, 0.012) 1px, transparent 0);
    background-size: 4px 4px, 9px 11px;
    background-attachment: fixed;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 1;
}

/* CMS scroll animations */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(var(--animation-offset, 30px));
    transition: opacity 0.7s var(--ease-print), transform 0.7s var(--ease-print);
}

body.js-ready[data-animations-enabled="true"] .animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

body:not([data-animations-enabled="true"]) .animate-on-scroll {
    opacity: 1;
    transform: none;
}

/* === TYPOGRAPHY === */
/* Display: Spectral with extreme contrast, descender-safe line-height */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--text);
    line-height: 1.15;  /* Safe for descenders g, p, q, j, y */
    letter-spacing: -0.015em;
    text-wrap: balance;
}

h1 {
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 3.5rem);
    margin-bottom: 1.5rem;
    padding-bottom: 0.05em;  /* Extra space for descenders */
}

h2 {
    font-weight: 500;
    font-size: clamp(1.5rem, 3.5vw, 2.5rem);
    margin-bottom: 1rem;
    margin-top: 3rem;
    padding-bottom: 0.05em;
}

h3 {
    font-weight: 500;
    font-size: clamp(1.2rem, 2.5vw, 1.65rem);
    margin-bottom: 0.85rem;
    margin-top: 2rem;
    padding-bottom: 0.05em;
}

h4 {
    font-weight: 500;
    font-size: 1.15rem;
    font-style: italic;
    margin-bottom: 0.65rem;
}

p {
    margin-bottom: 1.25rem;
    color: var(--text-soft);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.7;
    text-wrap: pretty;
    max-width: 64ch;  /* Editorial readability */
}

a {
    color: var(--text);
    text-decoration: none;
    transition: color var(--transition-fast);
    border-bottom: 1px solid var(--text);
    padding-bottom: 0.05em;
}

a:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

strong { font-weight: 700; color: var(--text); }
em { font-family: var(--font-italic); font-style: italic; font-weight: 400; }

code, pre {
    font-family: var(--font-mono);
    font-size: 0.9em;
}

code {
    background: var(--bg-elevated);
    padding: 0.15rem 0.4rem;
    color: var(--text);
    border: 1px solid var(--border-soft);
}

pre {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-print-sm);
    padding: 1.25rem 1.5rem;
    overflow-x: auto;
    margin: 1.5rem 0 2rem;
    line-height: 1.6;
}

pre code { background: none; padding: 0; border: none; }

/* === DARK MODE TOGGLE === 
   Atelier is light-mode only by deliberate design choice.
   The CMS engine renders the toggle button regardless, so we hide it.
*/
.dark-mode-toggle {
    display: none !important;
}

/* === HEADER - editorial masthead === */
header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--paper);
    border-bottom: 1px solid var(--ink);
    /* Subtle paper transparency for layering */
    background: color-mix(in srgb, var(--paper) 95%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 0;
    gap: 2rem;
}

.logo-container {
    display: flex;
    align-items: baseline;
    gap: 0.85rem;
}

.logo-container img {
    height: 80px;
    width: auto;
}

.logo-container a {
    color: inherit;
    text-decoration: none;
    border-bottom: none;
    display: flex;
    align-items: baseline;
    gap: 0.85rem;
}

.logo-container a:hover {
    color: inherit;
    border-bottom: none;
}

.site-title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--text);
    letter-spacing: -0.015em;
    line-height: 1;
}

/* === MENU BUTTON - "● ● CONTENTS" with sliding lines === */
nav {
    display: flex;
    align-items: center;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
}

.hamburger-menu {
    position: relative;
}

/* Custom menu button - completely re-imagined.
   Two dots (one accent, one ink) + small caps label + animated lines.
   When the drawer is active, the button is given a higher z-index than
   the drawer itself (which has z-index: 1000) so the user can click the
   same button to close it. The dots morph into an "×" shape - same
   button serves as both opener and closer, transforming visually. */
.hamburger-btn {
    background: transparent;
    border: none;
    padding: 0.5rem 0;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 0.65rem;
    transition: color var(--transition-fast);
    position: relative;
}

/* Hide the engine's default <span>☰</span> and "Menu" text */
.hamburger-btn > span {
    display: none;
}

/* Construct our own label with pseudo-elements */
.hamburger-btn::before {
    content: '';
    display: inline-flex;
    align-items: center;
    width: 18px;
    height: 6px;
    /* Two dots side by side: accent + ink */
    background-image: 
        radial-gradient(circle at 3px center, var(--accent) 3px, transparent 3.5px),
        radial-gradient(circle at 14px center, var(--ink) 3px, transparent 3.5px);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    transition: width 0.35s var(--ease-print), background-image 0.35s var(--ease-print);
}

.hamburger-btn::after {
    content: 'Contents';
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: inherit;
    position: relative;
}

/* On hover - dots become a line, label gets accent underline */
.hamburger-btn:hover::before {
    width: 28px;
    background-image: 
        linear-gradient(to right, 
            var(--accent) 0%, 
            var(--accent) 35%, 
            var(--ink) 50%, 
            var(--ink) 100%);
    background-size: 100% 2px;
    background-position: 0 50%;
    height: 2px;
}

.hamburger-btn:hover::after {
    color: var(--accent);
}

.hamburger-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

/* When drawer is active: button stays clickable above drawer, label
   changes to "Close", dots morph into × visually. The same gesture
   (click button) opens and closes the drawer. */
.hamburger-menu:has(.dropdown-menu.active) .hamburger-btn {
    position: relative;
    z-index: 1001;  /* above drawer's z-index: 1000 */
    color: var(--accent);
}

.hamburger-menu:has(.dropdown-menu.active) .hamburger-btn::before {
    /* Morph the two dots into an × - one rotated 45°, one -45° at same point */
    width: 16px;
    height: 16px;
    background-image: 
        linear-gradient(45deg, 
            transparent calc(50% - 1px), var(--accent) calc(50% - 1px), 
            var(--accent) calc(50% + 1px), transparent calc(50% + 1px)),
        linear-gradient(-45deg, 
            transparent calc(50% - 1px), var(--ink) calc(50% - 1px), 
            var(--ink) calc(50% + 1px), transparent calc(50% + 1px));
    background-size: 100% 100%;
}

.hamburger-menu:has(.dropdown-menu.active) .hamburger-btn::after {
    content: 'Close';
    color: var(--accent);
}

/* Hover when drawer is active - subtle nudge */
.hamburger-menu:has(.dropdown-menu.active) .hamburger-btn:hover::before {
    transform: scale(1.15) rotate(90deg);
    transition: transform 0.3s var(--ease-print);
}

/* === SIDE DRAWER - dramatic 60% viewport overlay === */
.dropdown-menu {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 60%;
    max-width: 720px;
    height: 100vh;
    margin: 0;
    background: var(--paper);
    border: none;
    border-right: 1px solid var(--ink);
    padding: 0;
    list-style: none;
    z-index: 1000;
    box-shadow: 12px 0 0 var(--ink);  /* Solid risograph offset */
    overflow-y: auto;
    overscroll-behavior: contain;
    
    /* Closed state - off-screen left */
    transform: translateX(-105%);
    transition: transform 0.5s var(--ease-print);
    
    /* Texture inside drawer */
    background-image: 
        radial-gradient(circle at 1px 1px, rgba(10, 10, 10, 0.025) 1px, transparent 0);
    background-size: 5px 5px;
}

.dropdown-menu.active {
    transform: translateX(0);
}

/* Drawer header - large editorial title */
.dropdown-menu::before {
    content: 'Contents';
    display: block;
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 700;
    color: var(--text);
    line-height: 1;
    letter-spacing: -0.02em;
    padding: 4rem 3rem 2rem;
    border-bottom: 1px solid var(--ink);
    padding-bottom: 0.25em;
}

.dropdown-menu > ul {
    display: block;
    list-style: none;
    padding: 1.5rem 3rem 4rem;
    margin: 0;
    counter-reset: nav-counter;
}

.dropdown-menu li {
    margin: 0;
    counter-increment: nav-counter;
}

/* Each link is a mini-hero - oversized typography */
.dropdown-menu a {
    display: flex;
    align-items: baseline;
    gap: 1.5rem;
    padding: 1rem 0;
    color: var(--text);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.5rem, 3.5vw, 2.5rem);
    line-height: 1.15;
    border-bottom: 1px solid var(--border-soft);
    transition: color var(--transition-fast), padding-left 0.3s var(--ease-print);
    position: relative;
    padding-bottom: 0.15em;
}

/* Numbering before each link */
.dropdown-menu a::before {
    content: counter(nav-counter, decimal-leading-zero);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.05em;
    flex-shrink: 0;
    line-height: 1;
    align-self: center;
    transition: color var(--transition-fast);
}

.dropdown-menu a:hover,
.dropdown-menu a.active {
    color: var(--accent);
    padding-left: 0.5rem;
}

.dropdown-menu a:hover::before,
.dropdown-menu a.active::before {
    color: var(--accent);
}

/* Submenu - inline expanded, smaller typography */
.dropdown-submenu {
    list-style: none;
    margin: 0;
    padding: 0 0 0.5rem 3.5rem;  /* indent past number */
    counter-reset: nav-sub-counter;
}

.dropdown-submenu li {
    counter-increment: nav-sub-counter;
}

.dropdown-submenu a {
    font-size: clamp(1rem, 2vw, 1.35rem);
    font-style: italic;
    font-weight: 400;
    padding: 0.5rem 0;
    border-bottom: 1px dotted var(--border-soft);
    gap: 1rem;
}

.dropdown-submenu a::before {
    content: counter(nav-counter, decimal-leading-zero) '.' counter(nav-sub-counter, decimal-leading-zero);
    font-size: 0.7rem;
}

.dropdown-subsubmenu {
    list-style: none;
    margin: 0;
    padding: 0 0 0.5rem 1.5rem;
}

.dropdown-subsubmenu a {
    font-size: clamp(0.9rem, 1.6vw, 1.1rem);
    font-style: italic;
    padding: 0.4rem 0;
    border-bottom: none;
}

.dropdown-subsubmenu a::before {
    content: '↳';
    font-family: var(--font-display);
}

/* Lock body scroll when drawer is open so scroll wheel events stay
   inside the drawer (which has its own overflow-y: auto) instead of
   bleeding through to the page underneath. */
body:has(.dropdown-menu.active) {
    overflow: hidden;
}

/* Backdrop - faint dim of rest of page. Non-clickable: drawer is closed
   either by clicking the menu button again (which is given z-index above
   the drawer when active - see hamburger-menu rules) or by navigating
   via a link in the drawer. */
body:has(.dropdown-menu.active)::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 10, 0.25);
    z-index: 999;
    pointer-events: none;
    animation: fade-in 0.4s var(--ease-print) both;
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* === BREADCRUMBS === */
.breadcrumbs {
    padding: 1.5rem 0 0;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.breadcrumbs a { 
    color: var(--text-muted); 
    border-bottom: 1px solid transparent;
}

.breadcrumbs a:hover { 
    color: var(--accent); 
    border-bottom-color: var(--accent);
}

.breadcrumbs span { 
    margin: 0 0.5rem; 
    color: var(--text-muted); 
    opacity: 0.5; 
}

/* === HERO - typographic installation === */
.hero {
    position: relative;
    padding: 5rem 0 4rem;
    counter-reset: section-counter;
}

/* "Index — 001" prefix above hero */
.hero .container::before {
    content: 'Index — 001';
    display: block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 2rem;
    font-weight: 500;
}

.hero h1 {
    font-family: var(--font-display);
    font-size: clamp(3rem, 13vw, 11rem);
    font-weight: 700;
    line-height: 1.0;
    letter-spacing: -0.04em;
    margin-bottom: 1.5rem;
    padding-bottom: 0.15em;  /* Generous descender room - g, p, q, j, y */
    max-width: 100%;
    text-wrap: balance;
    color: var(--text);
    position: relative;
}

/* Hero subtitle/p sits asymmetrically right */
.hero p {
    font-family: var(--font-italic);
    font-style: italic;
    font-size: clamp(1.05rem, 1.5vw, 1.3rem);
    color: var(--text-secondary);
    max-width: 560px;
    margin: 2rem 0 1.5rem auto;
    line-height: 1.55;
    font-weight: 400;
    text-align: left;
    position: relative;
    padding-left: 2rem;
    border-left: 1px solid var(--text);
}

/* === CONTENT SECTIONS === */
.content-section {
    background: var(--paper);
    border: 1px solid var(--ink);
    box-shadow: var(--shadow-print-md);
    padding: 3rem 3.5rem;
    margin: 3rem auto 4rem;
    max-width: 880px;
    position: relative;
    container-type: inline-size;
    counter-increment: section-counter;
}

/* Section number in corner - "PLATE 02" */
.content-section::before {
    content: 'Plate ' counter(section-counter, decimal-leading-zero);
    position: absolute;
    top: 1.5rem;
    right: 2rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-muted);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 500;
}

.content-section h1 {
    font-family: var(--font-display);
    font-size: clamp(1.85rem, 4vw, 2.75rem);
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 1.5rem;
    letter-spacing: -0.025em;
    line-height: 1.15;
    padding-bottom: 0.1em;
    color: var(--text);
}

.content-section h2 {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    color: var(--text);
}

.content-section h3 {
    font-family: var(--font-display);
    font-weight: 500;
    color: var(--text-soft);
}

.content-section ul, .content-section ol {
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
    color: var(--text-soft);
}

.content-section li { margin-bottom: 0.5rem; }

/* Content links - ink underline, accent on hover */
.content-section a:not(.cta-button):not(.price-tag):not(.btn) {
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid var(--text);
    padding-bottom: 0.05em;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.content-section a:not(.cta-button):not(.price-tag):not(.btn):hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* === PAGE CARDS GRID - asymmetric editorial === */
.page-cards-intro {
    /* Optional intro - we don't have it from engine, but add as label above grid */
}

.page-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    padding: 3rem 0 4rem;
    counter-reset: card-counter;
    position: relative;
}

/* Numbered intro before grid - inserted as ::before on container */
.page-cards-grid::before {
    content: 'Selected works · 001 — n';
    grid-column: 1 / -1;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 500;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--ink);
    margin-bottom: 1rem;
}

/* Asymmetric: every 3rd card spans 2 columns - oversized work */
.page-card:nth-child(5n + 3) {
    grid-column: span 2;
}

.page-card {
    background: var(--paper);
    border: 1px solid var(--ink);
    overflow: hidden;
    box-shadow: var(--shadow-print-md);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.4s var(--ease-print), box-shadow 0.4s var(--ease-print);
    counter-increment: card-counter;
    will-change: transform;
}

.page-card:hover {
    transform: translate(-3px, -3px);
    box-shadow: 9px 9px 0 var(--accent);
}

/* Plate number in top-left of every card */
.page-card::before {
    content: counter(card-counter, decimal-leading-zero);
    position: absolute;
    top: 0.85rem;
    left: 1rem;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-muted);
    letter-spacing: 0.15em;
    z-index: 2;
    background: var(--paper);
    padding: 0.15rem 0.4rem;
    border: 1px solid var(--border-soft);
}

.page-card-image {
    width: 100%;
    height: 240px;
    object-fit: cover;
    background: var(--paper-warm);
    border-bottom: 1px solid var(--ink);
}

/* Larger cards get taller images */
.page-card:nth-child(5n + 3) .page-card-image {
    height: 320px;
}

/* === PAGE CARD PLACEHOLDERS - abstract risograph compositions === 
   Each nth-child gets a different composition - hand-illustrated feel */
.page-card-placeholder {
    position: relative;
    height: 240px;
    background: var(--paper-warm);
    overflow: hidden;
    border-bottom: 1px solid var(--ink);
}

.page-card:nth-child(5n + 3) .page-card-placeholder {
    height: 320px;
}

.page-card-placeholder span { display: none; }

/* Composition 1: Diagonal divide + circle */
.page-card-placeholder::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        /* Big circle, accent, slightly off-center */
        radial-gradient(circle at 35% 50%, var(--accent) 0%, var(--accent) 22%, transparent 22.5%),
        /* Diagonal stripe across */
        linear-gradient(115deg, 
            transparent 0%, transparent 49.7%, 
            var(--ink) 49.7%, var(--ink) 50.3%, 
            transparent 50.3%);
    transition: transform 0.5s var(--ease-print);
}

.page-card-placeholder::after {
    content: '';
    position: absolute;
    /* Halftone dots cluster, top-right */
    width: 90px;
    height: 90px;
    top: 12%;
    right: 8%;
    background: 
        radial-gradient(circle at 50% 50%, var(--ink) 1.5px, transparent 2px);
    background-size: 9px 9px;
    background-repeat: repeat;
    -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
    mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
    transition: transform 0.5s var(--ease-print);
}

/* Composition 2 (every 2nd card): Triangle + lines */
.page-card:nth-child(2n) .page-card-placeholder::before {
    background: 
        /* Triangle, accent, mid-right */
        conic-gradient(from 90deg at 70% 60%, 
            transparent 0deg, transparent 30deg, 
            var(--accent) 30deg, var(--accent) 90deg, 
            transparent 90deg, transparent 360deg),
        /* Vertical lines, left */
        repeating-linear-gradient(90deg,
            transparent 0px,
            transparent 10px,
            var(--ink) 10px,
            var(--ink) 11px) left/35% 100% no-repeat;
}

.page-card:nth-child(2n) .page-card-placeholder::after {
    /* Small accent square, bottom-left */
    width: 50px;
    height: 50px;
    bottom: 18%;
    left: 12%;
    top: auto;
    right: auto;
    background: var(--ink);
    -webkit-mask-image: none;
    mask-image: none;
}

/* Composition 3 (every 3rd card): Concentric circles + offset */
.page-card:nth-child(3n) .page-card-placeholder::before {
    background: 
        /* Circle accent */
        radial-gradient(circle at 60% 50%, transparent 0%, transparent 18%, var(--accent) 18%, var(--accent) 19.5%, transparent 19.5%, transparent 28%, var(--ink) 28%, var(--ink) 29.5%, transparent 29.5%);
}

.page-card:nth-child(3n) .page-card-placeholder::after {
    /* Diagonal accent line, full bottom */
    width: 100%;
    height: 6px;
    background: var(--accent);
    bottom: 25%;
    top: auto;
    left: 0;
    right: auto;
    -webkit-mask-image: none;
    mask-image: none;
    transform: rotate(-3deg) translateX(-5%);
    transform-origin: left center;
}

/* Composition 4 (every 4th): Bold X shape */
.page-card:nth-child(4n) .page-card-placeholder::before {
    background: 
        /* X composed of two diagonal stripes */
        linear-gradient(135deg,
            transparent calc(50% - 2px), var(--ink) 50%, transparent calc(50% + 2px)),
        linear-gradient(45deg,
            transparent calc(50% - 6px), var(--accent) 50%, transparent calc(50% + 6px));
    background-size: 60% 60%, 60% 60%;
    background-repeat: no-repeat;
    background-position: center;
}

.page-card:nth-child(4n) .page-card-placeholder::after {
    /* Small caption-like rectangle */
    width: 50%;
    height: 12px;
    bottom: 20%;
    left: 25%;
    right: auto;
    top: auto;
    background: var(--ink);
    -webkit-mask-image: none;
    mask-image: none;
}

/* Animate placeholder shapes on hover */
.page-card:hover .page-card-placeholder::before {
    transform: scale(1.08) rotate(-2deg);
}

.page-card:hover .page-card-placeholder::after {
    transform: scale(1.15) rotate(5deg);
}

.page-card-content {
    padding: 1.5rem 1.5rem 1.75rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.page-card h3,
.page-card-title {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2vw, 1.65rem);
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: var(--text);
    letter-spacing: -0.015em;
    line-height: 1.2;
    padding-bottom: 0.05em;
}

.page-card-excerpt {
    color: var(--text-soft);
    margin-bottom: 1.25rem;
    flex: 1;
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.6;
}

.page-card-link {
    color: var(--text);
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    align-self: flex-start;
    transition: color var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid var(--text);
    padding-bottom: 0.1em;
}

.page-card-link::after {
    content: '↗';
    transition: transform var(--transition);
    display: inline-block;
}

.page-card:hover .page-card-link {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.page-card:hover .page-card-link::after {
    transform: translate(3px, -3px);
}

/* === GALLERY === */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    margin: 2.5rem 0 3rem;
}

.gallery-item {
    overflow: hidden;
    cursor: pointer;
    position: relative;
    aspect-ratio: 4 / 5;  /* Portrait, gallery-style */
    border: 1px solid var(--ink);
    box-shadow: var(--shadow-print-sm);
    transition: transform 0.4s var(--ease-print), box-shadow 0.4s var(--ease-print);
}

.gallery-item:hover {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 var(--accent);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s var(--ease-print);
}

.gallery-item:hover img { transform: scale(1.04); }

/* === LIGHTBOX === */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 10, 0.94);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.lightbox.active { display: flex; }

.lightbox img {
    max-width: 90%;
    max-height: 90%;
    border: 1px solid var(--paper);
    box-shadow: 12px 12px 0 var(--accent);
}

.lightbox-close, .lightbox-prev, .lightbox-next {
    position: absolute;
    width: 48px;
    height: 48px;
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 1.4rem;
    transition: transform var(--transition-fast);
}

.lightbox-close { top: 2rem; right: 2rem; }
.lightbox-prev { left: 2rem; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 2rem; top: 50%; transform: translateY(-50%); }

.lightbox-close:hover { transform: scale(1.05); background: var(--accent); color: var(--paper); }
.lightbox-prev:hover { transform: translateY(-50%) translateX(-2px); background: var(--accent); color: var(--paper); }
.lightbox-next:hover { transform: translateY(-50%) translateX(2px); background: var(--accent); color: var(--paper); }

/* === TESTIMONIALS - editorial pull-quotes === */
.testimonial-card {
    background: var(--paper);
    border: 1px solid var(--ink);
    box-shadow: var(--shadow-print-sm);
    padding: 2.5rem 3rem 2rem;
    margin: 0 auto 1.5rem;
    max-width: 760px;
    position: relative;
    transition: transform 0.4s var(--ease-print), box-shadow 0.4s var(--ease-print);
}

.testimonial-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 var(--accent);
}

.testimonial-card::before {
    content: '"';
    position: absolute;
    top: 0.5rem;
    left: 1.5rem;
    font-family: var(--font-display);
    font-size: 5rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
}

.testimonial-card p {
    margin-bottom: 1rem;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-style: italic;
    line-height: 1.5;
    color: var(--text);
    font-weight: 400;
    text-wrap: pretty;
    padding-left: 1.5rem;
    max-width: none;
}

.testimonial-author {
    font-family: var(--font-mono);
    font-style: normal;
    font-weight: 500;
    color: var(--text-muted);
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding-left: 1.5rem;
    display: block;
}

.testimonial-author::before { content: '— '; color: inherit; }

/* === CONTACT FORM === */
.contact-form {
    background: var(--paper);
    border: 1px solid var(--ink);
    box-shadow: var(--shadow-print-md);
    padding: 3rem;
    max-width: 700px;
    margin: 3rem auto 4rem;
}

.contact-form h2 {
    margin-top: 0;
    margin-bottom: 2rem;
    font-family: var(--font-display);
    font-size: clamp(1.65rem, 3vw, 2.25rem);
    font-style: italic;
    font-weight: 500;
    padding-bottom: 0.1em;
}

.form-group { margin-bottom: 2rem; }

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.form-group input, .form-group textarea, .form-group select {
    width: 100%;
    padding: 0.75rem 0;
    border: none;
    border-bottom: 1px solid var(--ink);
    border-radius: 0;
    background: transparent;
    color: var(--text);
    font-size: 1rem;
    font-family: var(--font-body);
    transition: border-color var(--transition-fast);
}

.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
    outline: none;
    border-bottom-color: var(--accent);
    border-bottom-width: 2px;
}

.form-group textarea { 
    min-height: 140px; 
    resize: vertical;
    font-family: var(--font-body);
}

/* === BUTTONS - print-style with offset shadow === */
.btn {
    display: inline-block;
    background: var(--paper);
    color: var(--ink);
    padding: 0.75rem 1.75rem;
    border: 1px solid var(--ink);
    box-shadow: var(--shadow-print-sm);
    font-size: 0.75rem;
    font-weight: 600;
    font-family: var(--font-body);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.2s var(--ease-print), box-shadow 0.2s var(--ease-print);
}

.btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 var(--accent);
    color: var(--ink);
    border-color: var(--ink);
}

.btn:active {
    transform: translate(0, 0);
    box-shadow: var(--shadow-print-sm);
}

.btn:visited { color: var(--ink); }

/* === CTA & PRICE TAG === */
.cta-button {
    display: inline-block;
    padding: 1rem 2.25rem;
    background: var(--primary);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    text-decoration: none;
    border: 1px solid var(--ink);
    font-weight: 700;
    font-size: 0.8rem;
    font-family: var(--font-body);
    line-height: 1.4;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    box-shadow: var(--shadow-print-md);
    transition: transform 0.25s var(--ease-print), box-shadow 0.25s var(--ease-print);
    margin-top: 1rem;
    border-radius: 0;
    position: relative;
}

.cta-button:hover {
    transform: translate(-3px, -3px);
    box-shadow: 9px 9px 0 var(--ink), 13px 13px 0 var(--accent);
    color: #fff;
}

.cta-button:active {
    transform: translate(0, 0);
    box-shadow: var(--shadow-print-sm);
}

.cta-button:visited { color: #fff; }

.price-tag {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    padding: 0.5rem 1.35rem;
    border: 1px solid var(--ink);
    font-weight: 700;
    font-size: 0.8rem;
    font-family: var(--font-body);
    line-height: 1.4;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: var(--shadow-print-sm);
    transition: transform 0.2s var(--ease-print), box-shadow 0.2s var(--ease-print);
    margin-top: 0.5rem;
    border-radius: 0;
}

a.price-tag:hover {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 var(--ink);
    color: #fff;
}

a.price-tag:visited { color: #fff; }

/* === MESSAGES === */
.error, .success {
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    border: 1px solid;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: var(--shadow-print-sm);
}

.error {
    background: var(--paper);
    color: var(--accent-deep);
    border-color: var(--accent-deep);
}

.error::before {
    content: '✕ ';
    font-weight: 700;
    margin-right: 0.5rem;
}

.success {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--ink);
}

.success::before {
    content: '✓ ';
    color: var(--accent);
    font-weight: 700;
    margin-right: 0.5rem;
}

/* === FOOTER - colophon === */
footer {
    background: var(--footer-bg, var(--ink));
    color: var(--paper);
    padding: 5rem 0 1.5rem;
    margin-top: 6rem;
    border-top: 1px solid var(--ink);
}

/* When using default --footer-bg (ink), invert content treatment */
.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2.5rem 4rem;
    color: rgba(244, 241, 234, 0.85);
    padding-bottom: 3rem;
    border-bottom: 1px solid rgba(244, 241, 234, 0.15);
}

.footer-section { 
    min-width: 0; 
}

.footer-section h3 {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    margin: 0 0 1rem;
    color: rgba(244, 241, 234, 0.5);
    letter-spacing: 0.25em;
    text-transform: uppercase;
}

.footer-section h3::before {
    content: '— ';
    color: var(--accent);
}

.footer-section p {
    margin: 0.4rem 0;
    color: rgba(244, 241, 234, 0.85);
    font-size: 0.9rem;
    font-family: var(--font-body);
    max-width: none;
}

.footer-section ul, .footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-section li, .footer-menu li { 
    margin: 0.4rem 0; 
}

.footer-section a, .footer-menu a {
    color: rgba(244, 241, 234, 0.85);
    transition: color var(--transition-fast);
    font-size: 0.9rem;
    font-family: var(--font-body);
    border-bottom: 1px solid transparent;
}

.footer-section a:hover, .footer-menu a:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.social-links {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: transparent;
    border: 1px solid rgba(244, 241, 234, 0.3);
    transition: all var(--transition-fast);
    font-size: 0.95rem;
    color: rgba(244, 241, 234, 0.85);
}

.social-links a:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--paper);
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 var(--paper);
}

/* Copyright as colophon - editorial book closing */
.copyright {
    padding-top: 2rem;
    margin-top: 0;
    text-align: left;
    font-family: var(--font-italic);
    font-style: italic;
    font-size: 0.85rem;
    color: rgba(244, 241, 234, 0.55);
}

.copyright p { 
    margin: 0.2rem 0; 
    color: inherit; 
    font-family: var(--font-italic); 
}

.copyright a {
    color: rgba(244, 241, 234, 0.75);
    transition: color var(--transition-fast);
    border-bottom: 1px solid rgba(244, 241, 234, 0.3);
}

.copyright a:hover { 
    color: var(--accent); 
    border-bottom-color: var(--accent); 
}

/* Add typography credit at bottom - subtle colophon detail */
.copyright::after {
    content: 'Set in Spectral & Manrope.';
    display: block;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    font-style: italic;
    color: rgba(244, 241, 234, 0.4);
    letter-spacing: 0.02em;
}

/* === RESPONSIVE === */
@media (max-width: 1024px) {
    .container { padding: 0 1.5rem; }
    
    .page-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .page-card:nth-child(5n + 3) {
        grid-column: span 2;
    }
    
    .content-section { padding: 2.5rem 2.25rem; }
    .hero { padding: 4rem 0 3rem; }
}

@media (max-width: 768px) {
    .container { padding: 0 1.25rem; }
    .header-content { padding: 1rem 0; }
    .logo-container img { height: 56px; }
    .site-title { font-size: 1.15rem; }
    
    .hero {
        padding: 3rem 0 2rem;
    }
    
    .hero h1 {
        font-size: clamp(2.25rem, 14vw, 4.5rem);
        padding-bottom: 0.2em;
    }
    
    .hero p {
        margin-left: 0;
        max-width: 100%;
    }
    
    .content-section {
        padding: 2rem 1.5rem;
        margin: 2rem 0 3rem;
    }
    
    .content-section::before {
        top: 1rem;
        right: 1.25rem;
    }
    
    .content-section h1 { font-size: 1.65rem; }
    
    .page-cards-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 2rem 0 3rem;
    }
    
    .page-card:nth-child(5n + 3) {
        grid-column: span 1;
    }
    
    .page-card:nth-child(5n + 3) .page-card-image,
    .page-card:nth-child(5n + 3) .page-card-placeholder {
        height: 240px;
    }
    
    .gallery {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 0.75rem;
    }
    
    .testimonial-card {
        padding: 2rem 1.75rem 1.75rem;
    }
    
    .testimonial-card::before {
        font-size: 3.5rem;
    }
    
    .testimonial-card p {
        font-size: 1.05rem;
    }
    
    .contact-form {
        padding: 2rem 1.5rem;
    }
    
    /* Side drawer takes more space on tablet */
    .dropdown-menu {
        width: 80%;
        max-width: 100%;
    }
    
    .dropdown-menu::before {
        font-size: clamp(2rem, 8vw, 3rem);
        padding: 3rem 2rem 1.5rem;
    }
    
    .dropdown-menu > ul {
        padding: 1rem 2rem 3rem;
    }
    
    .dropdown-menu a {
        font-size: clamp(1.35rem, 4vw, 2rem);
    }
    
    .footer-content {
        gap: 2rem;
    }
    
    .lightbox-close, .lightbox-prev, .lightbox-next {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 480px) {
    .logo-container img { height: 48px; }
    .header-content { padding: 0.85rem 0; gap: 1rem; }
    .site-title { font-size: 1rem; }
    
    .hero h1 {
        font-size: clamp(2rem, 16vw, 3.75rem);
    }
    
    .hero .container::before { font-size: 0.7rem; }
    
    /* Drawer fullscreen on phone */
    .dropdown-menu {
        width: 100%;
        border-right: none;
        box-shadow: none;
    }
    
    .testimonial-card::before { font-size: 3rem; }
    
    /* Hide colophon typography credit on smallest screens */
    .copyright::after { display: none; }
}

/* === CONTAINER QUERIES === */
@container (max-width: 500px) {
    .content-section h2 { font-size: 1.4rem; }
    .content-section h3 { font-size: 1.15rem; }
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
    .dropdown-menu { transition: none !important; }
    .page-card-placeholder::before,
    .page-card-placeholder::after { transition: none !important; }
    
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* === PRINT === */
@media print {
    body { 
        background: white; 
        color: black; 
        background-image: none;
    }
    header, footer, .hamburger-menu, .dropdown-menu { display: none !important; }
    .hero { padding: 1rem 0; }
    .content-section, .page-card, .testimonial-card, .contact-form {
        background: white;
        box-shadow: none;
        border: 1px solid #ccc;
        page-break-inside: avoid;
    }
    .page-card::before { display: none; }
    .page-card-placeholder::before,
    .page-card-placeholder::after { display: none; }
}