/* ═══════════════════════════════════════════════════════════════════════════
   Atelier — foundation: fonts, tokens, reset, typography, buttons, utilities.

   Every var() below carries its Linen value as a hardcoded fallback. If a
   minifier or an optimiser plugin ever eats the custom properties, the site
   falls back to a complete, correct Linen render instead of to unstyled text.
   assets/css/dark.css restates the token block for dark mode, and
   assets/css/noir-layout.css carries the Noir variation's layout.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Self-hosted typefaces. No third-party request on a page view. ──────── */
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../fonts/cormorant/cormorant-garamond-400.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../fonts/cormorant/cormorant-garamond-500.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../fonts/cormorant/cormorant-garamond-600.woff2') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../fonts/cormorant/cormorant-garamond-400-italic.woff2') format('woff2');
    font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
    font-family: 'Jost';
    src: url('../fonts/jost/jost-300.woff2') format('woff2');
    font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Jost';
    src: url('../fonts/jost/jost-400.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Jost';
    src: url('../fonts/jost/jost-500.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Parisienne';
    src: url('../fonts/parisienne/parisienne-400.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}

/* ── Tokens: Linen ─────────────────────────────────────────────────────── */
:root {
    --at-canvas: #faf7f2;
    --at-panel:  #ffffff;
    --at-band:   #f2ebe1;
    --at-ink:    #2a2724;
    --at-muted:  #6b625a;
    --at-faint:  #9a8f85;
    --at-rule:   #e4dbcf;
    --at-accent: #1c1a18;
    --at-on-accent: #faf7f2;
    --at-gilt:   #b08d57;
    --at-blush:  #e8d3cb;

    --at-shadow-soft: 0 18px 48px rgba(42, 39, 36, 0.09);
    --at-shadow-lift: 0 26px 64px rgba(42, 39, 36, 0.15);
    --at-scrim: rgba(18, 16, 14, 0.42);

    --at-serif:  'Cormorant Garamond', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
    --at-sans:   'Jost', 'Avenir Next', Avenir, 'Segoe UI', system-ui, sans-serif;
    --at-script: 'Parisienne', 'Snell Roundhand', 'Brush Script MT', cursive;

    --at-shell: 1240px;
    --at-gutter: 1.5rem;

    /* One curve for everything. Mixing easings is what makes a site feel
       assembled rather than designed. */
    --at-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

    /* The arrow glyph as a mask, for the handful of buttons whose label is
       rendered and escaped by a plugin, so no inline SVG can be put inside it.
       Used with `background-color: currentColor`, so it recolours with the
       button in either palette. Same path as the 'arrow-right' icon in
       inc/icons.php; keep the two in step. */
    --at-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15'/%3E%3Cpath d='M13.5 6.5 19 12l-5.5 5.5'/%3E%3C/svg%3E");
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

body {
    margin: 0;
    background: var(--at-canvas, #faf7f2);
    color: var(--at-ink, #2a2724);
    font-family: var(--at-sans, 'Jost', 'Avenir Next', system-ui, sans-serif);
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.75;
    letter-spacing: 0.005em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

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

/* ── Type scale ────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--at-serif, 'Cormorant Garamond', Georgia, serif);
    font-weight: 400;
    line-height: 1.14;
    letter-spacing: -0.005em;
    color: var(--at-ink, #2a2724);
    margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.25rem); }
h2 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); }
h3 { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem); }
h4 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); }

p { margin: 0 0 1.25em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; transition: color 0.25s var(--at-ease, ease); }

strong { font-weight: 500; }

blockquote {
    margin: 2.5rem 0;
    padding-left: 1.75rem;
    border-left: 1px solid var(--at-gilt, #b08d57);
    font-family: var(--at-serif, Georgia, serif);
    font-style: italic;
    font-size: 1.375rem;
    line-height: 1.5;
    color: var(--at-muted, #6b625a);
}

hr, .wp-block-separator {
    border: 0;
    border-top: 1px solid var(--at-rule, #e4dbcf);
    margin: 3rem 0;
}

::selection { background: var(--at-blush, #e8d3cb); color: var(--at-ink, #2a2724); }

/* ── Layout shell ──────────────────────────────────────────────────────── */
.at-shell {
    width: 100%;
    max-width: var(--at-shell, 1240px);
    margin-inline: auto;
    padding-inline: var(--at-gutter, 1.5rem);
}

.at-shell-narrow {
    width: 100%;
    max-width: 760px;
    margin-inline: auto;
    padding-inline: var(--at-gutter, 1.5rem);
}

.at-section { padding-block: clamp(3.5rem, 2rem + 6vw, 7rem); }
.at-section-tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.at-band { background: var(--at-band, #f2ebe1); }
.at-panel { background: var(--at-panel, #ffffff); }

/* main sits under a fixed header; the offset is the header's own height */
.at-main { padding-top: var(--at-header-h, 76px); }

/* Plugins bring their own block templates, and those wrap content in a <main>
   this theme never marked up. WooCommerce's cart and checkout do exactly that,
   and without this the page title renders underneath the fixed header. Written
   as "any top-level main that is not ours" so a plugin added later is covered
   without a new rule. */
.wp-site-blocks > main:not(.at-main) { padding-top: var(--at-header-h, 76px); }

/* ── Section headings: the small caps eyebrow + centred serif title ─────── */
.at-eyebrow {
    display: block;
    font-family: var(--at-sans, sans-serif);
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--at-faint, #9a8f85);
    margin-bottom: 1rem;
}

.at-section-head { text-align: center; margin-bottom: clamp(2.25rem, 1.5rem + 2vw, 3.5rem); }
.at-section-head h2 { margin-bottom: 0.35em; }
.at-section-head p {
    max-width: 46ch;
    margin-inline: auto;
    color: var(--at-muted, #6b625a);
}

/* The hairline under a section title. A pseudo-element, so it never becomes a
   stray empty div in the markup. */
.at-rule-mark::after {
    content: '';
    display: block;
    width: 54px;
    height: 1px;
    margin: 1.25rem auto 0;
    background: var(--at-gilt, #b08d57);
}

.at-script {
    font-family: var(--at-script, cursive);
    font-weight: 400;
    letter-spacing: 0.01em;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.at-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.95rem 2rem;
    border: 1px solid transparent;
    border-radius: 0;
    font-family: var(--at-sans, sans-serif);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.3s var(--at-ease, ease),
                color 0.3s var(--at-ease, ease),
                border-color 0.3s var(--at-ease, ease),
                transform 0.3s var(--at-ease, ease);
}

.at-btn:hover { transform: translateY(-2px); }
.at-btn .at-icon { width: 15px; height: 15px; }

.at-btn-primary {
    background: var(--at-accent, #1c1a18);
    color: var(--at-on-accent, #faf7f2);
    border-color: var(--at-accent, #1c1a18);
}
.at-btn-primary:hover {
    background: var(--at-gilt, #b08d57);
    border-color: var(--at-gilt, #b08d57);
    color: #ffffff;
}

.at-btn-ghost {
    background: transparent;
    color: var(--at-ink, #2a2724);
    border-color: var(--at-ink, #2a2724);
}
.at-btn-ghost:hover {
    background: var(--at-ink, #2a2724);
    color: var(--at-canvas, #faf7f2);
}

/* The understated "View Collection →" link that sits under every tile. */
.at-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--at-muted, #6b625a);
}
.at-link .at-icon {
    width: 15px; height: 15px;
    transition: transform 0.3s var(--at-ease, ease);
}
.at-link:hover { color: var(--at-gilt, #b08d57); }
.at-link:hover .at-icon { transform: translateX(4px); }

/* ── Forms ─────────────────────────────────────────────────────────────── */
.at-input,
.at-textarea,
.at-select {
    width: 100%;
    padding: 0.9rem 1.1rem;
    background: var(--at-panel, #ffffff);
    border: 1px solid var(--at-rule, #e4dbcf);
    border-radius: 0;
    color: var(--at-ink, #2a2724);
    font-family: var(--at-sans, sans-serif);
    font-size: 0.9375rem;
    font-weight: 300;
    transition: border-color 0.25s var(--at-ease, ease);
}
.at-textarea { min-height: 170px; resize: vertical; line-height: 1.7; }
.at-input::placeholder, .at-textarea::placeholder { color: var(--at-faint, #9a8f85); }
.at-input:focus, .at-textarea:focus, .at-select:focus {
    outline: none;
    border-color: var(--at-gilt, #b08d57);
}

.at-label {
    display: block;
    margin-bottom: 0.45rem;
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--at-muted, #6b625a);
}

/* Honeypot. Off-screen rather than display:none — some bots skip hidden
   fields, and an off-screen input is still "visible" to them. */
.at-hp {
    position: absolute !important;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
}

.at-notice {
    padding: 0.85rem 1.1rem;
    margin-bottom: 1.25rem;
    border-left: 2px solid var(--at-gilt, #b08d57);
    background: var(--at-band, #f2ebe1);
    font-size: 0.875rem;
}
.at-notice-bad { border-left-color: #b4503c; }

/* ── Focus: visible for keyboards, quiet for mice ──────────────────────── */
:focus-visible {
    outline: 2px solid var(--at-gilt, #b08d57);
    outline-offset: 3px;
}

.at-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    padding: 0.9rem 1.4rem;
    background: var(--at-accent, #1c1a18);
    color: var(--at-on-accent, #faf7f2);
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.at-skip:focus { left: 1rem; top: 1rem; }

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

/* ── Scroll reveal. assets/js/modules/reveal.js adds .is-in. ───────────── */
.at-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s var(--at-ease, ease), transform 0.7s var(--at-ease, ease);
}
.at-reveal.is-in { opacity: 1; transform: none; }

/* No JS, no reveal — never leave content invisible because a script failed. */
.no-js .at-reveal { opacity: 1; transform: none; }

/* ── The frame every artwork image sits in ─────────────────────────────── */
.at-frame {
    position: relative;
    overflow: hidden;
    background: var(--at-band, #f2ebe1);
}
.at-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.85s var(--at-ease, ease);
}
.at-frame-ratio { aspect-ratio: 4 / 5; }
.at-frame-wide  { aspect-ratio: 3 / 2; }
a:hover > .at-frame img,
.at-card:hover .at-frame img { transform: scale(1.045); }

/* ── Block editor content inside patterns ─────────────────────────────── */
.at-prose > * { margin-block: 0 1.4em; }
.at-prose h2 { margin-top: 2.25em; }
.at-prose h3 { margin-top: 1.75em; }
.at-prose img, .at-prose figure { margin-block: 2.5rem; }
.at-prose figcaption {
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    color: var(--at-faint, #9a8f85);
    text-align: center;
}
.at-prose ul, .at-prose ol { padding-left: 1.25rem; }
.at-prose li { margin-bottom: 0.5rem; }
.at-prose a { color: var(--at-gilt, #b08d57); text-decoration: underline; text-underline-offset: 3px; }

.at-icon { flex: none; }

/* An artwork with no image yet. A soft wash rather than a grey box, so a
   half-populated gallery still reads as a gallery. */
.at-frame-empty {
    display: block;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(120% 90% at 30% 20%, var(--at-blush, #e8d3cb) 0%, transparent 62%),
        radial-gradient(110% 80% at 78% 76%, var(--at-rule, #e4dbcf) 0%, transparent 58%),
        var(--at-band, #f2ebe1);
}

/* ── The reassurance row ───────────────────────────────────────────────────
   Three claims — shipping, materials, packaging — rendered by
   atelier_assurance_row() in inc/commerce-pages.php and used on a piece page,
   in the cart's totals panel and in the checkout's order summary. It lives in
   the foundation rather than in a page stylesheet because it now appears on
   three page types that load three different files; filing it under any one of
   them is what made it render as a bulleted list on the others.
   ───────────────────────────────────────────────────────────────────────── */
.at-assurance {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 2rem 0 1.5rem;
    padding: 1.75rem 0;
    border-top: 1px solid var(--at-rule, #e4dbcf);
    border-bottom: 1px solid var(--at-rule, #e4dbcf);
    list-style: none;
}
.at-assurance li {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.55rem;
    margin: 0;
    padding-inline: 0.75rem;
}
/* Dividers between, not around — a border on every item doubles at the joins
   and leaves a stray rule at each end. */
.at-assurance li + li { border-left: 1px solid var(--at-rule, #e4dbcf); }

.at-assurance .at-icon { color: var(--at-ink, #2a2724); }
.at-assurance strong {
    font-family: var(--at-sans, sans-serif);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--at-ink, #2a2724);
}
.at-assurance span {
    font-family: var(--at-serif, Georgia, serif);
    font-size: 0.9375rem;
    color: var(--at-muted, #6b625a);
}

/* The three stay in ONE row on a phone. Stacking them turned a glanceable strip
   into three-quarters of a screen of scrolling directly under the buy button,
   which is the worst possible place to put a wall. They shrink instead: the
   label drops to the smallest legible letterspaced size and the sub-line to a
   caption, both of which survive 320px with the dividers intact. */
@media (max-width: 520px) {
    .at-assurance {
        gap: 0;
        padding-block: 1.25rem;
    }
    .at-assurance li {
        gap: 0.4rem;
        padding-inline: 0.4rem;
    }
    .at-assurance .at-icon { width: 20px; height: 20px; }
    .at-assurance strong {
        font-size: 0.5625rem;
        letter-spacing: 0.1em;
        line-height: 1.3;
    }
    .at-assurance span {
        font-size: 0.75rem;
        line-height: 1.35;
    }
}

/* Narrower than a phone is a fold or a very old device; there the dividers are
   the first thing to go, because at that width they land inside a word. */
@media (max-width: 360px) {
    .at-assurance li { padding-inline: 0.25rem; }
    .at-assurance li + li { border-left: 0; }
}