@charset "UTF-8";
/* ============================================================================
   THE INSTRUMENTS — component styles for the seven tools.

   Carried over from the previous build so the instruments keep working exactly
   as they did, but every colour and face they reference is remapped below onto
   the limewash tokens, so they inherit the new world without their markup
   being rewritten.

   Extracted with PostCSS, so this file is well-formed by construction.
   Loaded only on instrument pages, after main.css.
   ========================================================================= */

:root {
  /* Old token names, new values. This is the whole translation layer. */
  --ink:        var(--graphite);
  --slate:      var(--graphite);
  --stone:      var(--graphite-soft);
  --fog:        var(--graphite-soft);
  --body:       var(--graphite);
  --mist:       var(--graphite-soft);
  --bone:       var(--lime);
  --chalk:      var(--lime-shade);
  --white:      var(--lime-lit);
  --accent:     var(--wash);
  --gold-light: rgba(138, 109, 59, 0.12);
  --moss:       var(--wash);

  --font-sans:  var(--font-body);
  --font-serif: var(--font-display);

  --container:  var(--wall-max);
  --ease-out:   var(--ease);
  --ease-in-out: var(--ease-slow);

  --shadow-card: var(--shadow-x) var(--shadow-y) var(--shadow-blur) rgba(51, 70, 94, calc(var(--shadow-alpha) * 0.6));
  --shadow-lift: calc(var(--shadow-x) * 1.3) calc(var(--shadow-y) * 1.3) calc(var(--shadow-blur) * 1.3) rgba(51, 70, 94, var(--shadow-alpha));
  --shadow-glow: 0 0 60px -10px rgba(138, 109, 59, 0.22);
}

/* The old sheet set display type in Cormorant. Montserrat carries it now. */
.serif-italic {
  font-family: var(--font-display);
  font-style: normal;
}

/* Eyebrows are not part of this design system; the heading carries itself. */
.prologue-eyebrow,
.mono-art-kicker { display: none; }

/* ==========================================================================
   elaineleigh.com — "The Journey"
   Sublime, contemporary museum-grade white gallery aesthetic with an Irish
   prehistoric undercurrent. Montserrat carries the journey; Cormorant
   Garamond speaks the poetry. All motion is 60fps GPU-accelerated and strictly
   honours prefers-reduced-motion.
   ========================================================================== */

/* ---------- Fonts ---------- */

/* ---------- Design Tokens ---------- */

/* ---------- Base & Reset ---------- */

.serif-italic {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0.01em;
}

.br-desktop { display: none; }
@media (min-width: 768px) { .br-desktop { display: inline; } }

/* --- Selection --- */
::-moz-selection { background: var(--ink); color: #FAF9F7; }

/* --- Top Scroll Progress --- */

/* ==========================================================================
   Motion & Animation Primitives
   ========================================================================== */
.anim {
    opacity: 0;
    transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out);
    transition-delay: var(--delay, 0s);
    will-change: opacity, transform;
}
.fade-in-up    { transform: translate3d(0, 42px, 0); }
.fade-in-left  { transform: translate3d(-52px, 0, 0); }
.fade-in-right { transform: translate3d(52px, 0, 0); }
.anim.is-visible { opacity: 1; transform: translate3d(0, 0, 0); }

.light-speed-in.is-visible {
    animation: lightSpeedIn 1.2s var(--ease-out) both;
    animation-delay: var(--delay, 0s);
    transition: none;
}
@keyframes lightSpeedIn {
    0%   { opacity: 0; transform: translate3d(50%, 0, 0) skewX(-24deg); }
    60%  { opacity: 1; transform: skewX(12deg); }
    80%  { transform: skewX(-3deg); }
    100% { opacity: 1; transform: none; }
}

/* Word reveal */
.split-words .w {
    display: inline-block;
    opacity: 0;
    transform: translate3d(0, 0.85em, 0) rotate(1.5deg);
    transition: opacity .8s ease, transform 1s var(--ease-out);
    transition-delay: calc(var(--wi) * 40ms);
    will-change: opacity, transform;
}
.split-words.is-visible .w { opacity: 1; transform: none; }

/* Cinematic reveal */
.reveal-media {
    transition: clip-path 1.2s var(--ease-out), opacity .9s ease, transform 1.2s var(--ease-out);
    transition-delay: var(--reveal-delay, 0s);
    will-change: clip-path;
}

/* ==========================================================================
   Header & Navigation
   ========================================================================== */
@keyframes headerDrop { from { transform: translateY(-100%); } to { transform: none; } }

/* Navigation Dropdown */
/* Invisible bridge to prevent mouse leave gap */

/* Mobile nav lives in the Responsive Breakpoints section (max-width: 960px). */

/* ==========================================================================
   Journey Rail (Waypoint Navigator)
   ========================================================================== */
.rail-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    border: 1px solid var(--mist);
    background: transparent;
    transition: background-color .3s ease, transform .35s var(--ease-out), border-color .3s ease, box-shadow .3s ease;
}
.rail-label {
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--fog);
    opacity: 0;
    transform: translateX(8px);
    transition: opacity .3s ease, transform .3s var(--ease-out), color .3s ease;
    white-space: nowrap;
}

/* ==========================================================================
   I. The Threshold (Hero)
   ========================================================================== */
@keyframes drawArm  { to { stroke-dashoffset: 0; } }
@keyframes slowSpin { to { transform: rotate(360deg); } }
.kicker-sparkle {
    color: var(--gold);
    font-size: .8rem;
}
.line-gold {
    color: #8c723f;
    font-style: italic;
    font-weight: 500;
}
@keyframes cueDrop {
    0%   { transform: translateY(-100%); }
    50%  { transform: translateY(0); }
    100% { transform: translateY(100%); }
}

/* ==========================================================================
   II. Prologue
   ========================================================================== */
.prologue {
    position: relative;
    padding: clamp(130px, 18vh, 190px) 24px clamp(110px, 15vh, 160px);
    background: var(--white);
    overflow: hidden;
}
.prologue-inner {
    position: relative;
    max-width: 840px;
    margin-inline: auto;
    text-align: center;
    z-index: 2;
}

.prologue-eyebrow {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .44em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 24px;
}
.prologue-eyebrow--light { color: rgba(250, 249, 247, .65); }

.prologue-statement {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(2.1rem, 5vw, 3.4rem);
    line-height: 1.32;
    color: var(--slate);
    margin: 0 0 38px;
    letter-spacing: -0.01em;
}
.prologue-body {
    font-size: 1.08rem;
    line-height: 1.95;
    margin: 0 auto;
    max-width: 680px;
    color: var(--body);
}

.prologue-stats {
    display: flex;
    justify-content: center;
    gap: clamp(24px, 4vw, 56px);
    margin-top: 80px;
}
.stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 28px 34px;
    border-radius: 8px;
    background: var(--white);
    border: 1px solid rgba(220, 217, 210, .9);
    box-shadow: 0 10px 30px -5px rgba(14, 16, 18, .06);
    transition: transform .35s var(--ease-out), box-shadow .35s ease, border-color .35s ease;
}
.stat:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lift);
    border-color: rgba(138, 109, 59, .4);
}
.stat-badge {
    font-size: .5625rem;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--gold);
    border: 1px solid rgba(138, 109, 59, 0.35);
    background: rgba(138, 109, 59, 0.06);
    padding: 2px 10px;
    border-radius: 999px;
    margin-bottom: 4px;
}
.stat-number {
    font-family: var(--font-serif);
    font-size: clamp(2.8rem, 5.8vw, 3.8rem);
    line-height: 1;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.stat-label {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--fog);
    text-align: center;
}

/* Chapters explore link */

.prologue-fragments { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.fragment {
    position: absolute;
    width: clamp(140px, 18vw, 250px);
    padding: 10px;
    background: var(--white);
    border: 1px solid rgba(220, 217, 210, .9);
    box-shadow: 0 16px 40px rgba(14, 16, 18, .12);
    opacity: .75;
    border-radius: 4px;
    will-change: transform;
}
.fragment img { filter: saturate(.85) contrast(1.04); }
.fragment-1 { top: 10%; left: 3%; transform: rotate(-5deg); }
.fragment-2 { bottom: 10%; right: 4%; transform: rotate(4deg); }

/* ==========================================================================
   III. The Chapters (Collections)
   ========================================================================== */
.chapters {
    padding: 130px 0 60px;
    background: var(--white);
    position: relative;
}
.chapters-head {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 52px;
    padding-inline: 24px;
}

.section-title {
    font-size: clamp(2.2rem, 5.2vw, 3.25rem);
    font-weight: 300;
    color: var(--slate);
    margin-bottom: 20px;
    letter-spacing: -0.02em;
}
.chapters-intro {
    font-size: clamp(1.1rem, 2.1vw, 1.4rem);
    color: var(--body);
    line-height: 1.65;
}
.chapters-intro strong {
    font-weight: 600;
    font-style: normal;
    letter-spacing: .03em;
    color: var(--slate);
}

.chapter {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: center;
    gap: clamp(36px, 7vw, 96px);
    max-width: 1260px;
    margin: 0 auto;
    padding: clamp(56px, 9vh, 108px) 32px;
}
.stratum-chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 20px;
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--slate);
    background: var(--bone);
    text-decoration: none;
    border: 1px solid var(--chalk);
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(14, 16, 18, .02);
    transition: border-color .3s ease, background-color .3s ease, color .3s ease, transform .3s var(--ease-out), box-shadow .3s ease;
}
.stratum-chip:hover, .stratum-chip:focus-visible {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(14, 16, 18, .12);
}

/* ==========================================================================
   III. The Chapters (Collections)
   ========================================================================== */
.chapters {
    padding: clamp(100px, 14vh, 160px) 24px clamp(120px, 16vh, 180px);
    background: var(--white);
    position: relative;
}
.chapters-head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 90px;
}
.section-title {
    font-family: var(--font-serif);
    font-size: clamp(2.4rem, 5.5vw, 3.8rem);
    font-weight: 400;
    line-height: 1.15;
    color: var(--slate);
    margin: 0 0 18px;
    letter-spacing: -0.015em;
}
.chapters-intro {
    font-size: clamp(1.05rem, 2.2vw, 1.25rem);
    line-height: 1.7;
    color: var(--body);
    margin: 0;
}

.chapter {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    align-items: center;
    gap: clamp(48px, 7vw, 110px);
    max-width: var(--container);
    margin: 0 auto clamp(90px, 12vh, 140px);
    position: relative;
}
.chapter:last-child { margin-bottom: 0; }
.stratum-chip {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--bone);
    border: 1px solid var(--chalk);
    color: var(--slate);
    font-size: .75rem;
    font-weight: 500;
    text-decoration: none;
    transition: all .25s ease;
}
.stratum-chip:hover {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
    transform: translateY(-1px);
}

/* ==========================================================================
   IV. The Passage (Horizontal Gallery Showcase)
   ========================================================================== */

/* ==========================================================================
   V. The Interlude ("The Dark Beneath")
   ========================================================================== */
.interlude {
    position: relative;
    padding: clamp(130px, 22vh, 220px) 24px;
    background: #0d0e10;
    color: #F4F4F1;
    text-align: center;
    overflow: hidden;
}
.interlude-spiral {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #F4F4F1;
    opacity: .07;
    pointer-events: none;
}
.interlude-spiral svg {
    width: min(120vmin, 920px);
    animation: slowSpin 200s linear infinite reverse;
}

.interlude-quote {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.8rem, 4.4vw, 3.1rem);
    line-height: 1.48;
    max-width: 920px;
    margin: 0 auto;
    color: #F4F4F1;
    position: relative;
    letter-spacing: -0.01em;
}
.interlude-attr {
    margin: 40px 0 0;
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: rgba(237, 235, 232, .55);
    position: relative;
}

/* ==========================================================================
   VI. Field Notes (Chronicle Timeline)
   ========================================================================== */

.notes-timeline {
    position: relative;
    max-width: 1120px;
    margin: 80px auto 0;
}
.notes-line {
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 1.5px;
    background: var(--chalk);
    transform: translateX(-50%);
}
.notes-line-progress {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 100%;
    background: linear-gradient(180deg, var(--gold) 0%, var(--slate) 100%);
    transform: scaleY(var(--progress, 0));
    transform-origin: top;
    will-change: transform;
}

.note {
    position: relative;
    width: 50%;
    padding: 38px 0;
}
.note--left  { padding-right: clamp(40px, 5.5vw, 72px); }
.note--right { margin-left: 50%; padding-left: clamp(40px, 5.5vw, 72px); }

.note-node {
    position: absolute;
    top: 66px;
    width: 13px; height: 13px;
    border-radius: 50%;
    background: var(--white);
    border: 2px solid var(--slate);
    box-shadow: 0 0 10px rgba(14, 16, 18, .1);
    z-index: 2;
    transition: transform .3s ease, border-color .3s ease;
}
.note:hover .note-node {
    transform: scale(1.3);
    border-color: var(--gold);
}
.note--left  .note-node { right: -7px; }
.note--right .note-node { left: -6px; }

.note-card {
    background: var(--white);
    border: 1px solid rgba(220, 217, 210, .7);
    border-radius: 2px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transform: perspective(900px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0));
    transition: transform .5s var(--ease-out), box-shadow .5s ease, border-color .3s ease;
}
.note-card:hover {
    box-shadow: var(--shadow-lift);
    border-color: rgba(138, 109, 59, .35);
}
.note-media { display: block; overflow: hidden; position: relative; background: var(--bone); }
/* The field studies are annotated sketches of varying proportion — cropping
   them to a landscape band cuts the subject out and leaves only margin notes.
   Contain shows the whole plate. */
.note-media img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    transition: transform .8s var(--ease-out);
    filter: saturate(.9);
}
.note-card:hover .note-media img {
    transform: scale(1.06);
    filter: saturate(1.02);
}

.note-body { padding: 26px 30px 24px; }
.note-epoch {
    display: inline-block;
    padding: 3px 10px;
    background: rgba(73, 91, 76, .08);
    border-radius: 999px;
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--moss);
    margin: 0 0 12px;
}
.note-title {
    font-size: 1.35rem;
    font-weight: 400;
    line-height: 1.4;
    margin: 0 0 12px;
}
.note-title a { color: var(--slate); text-decoration: none; transition: color .25s ease; }
.note-title a:hover { color: var(--ink); }
.note-excerpt { font-size: .925rem; line-height: 1.8; margin: 0 0 18px; color: var(--body); }
.note-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    border-top: 1px solid var(--chalk);
    padding-top: 16px;
}
.note-foot time { font-size: .78rem; color: var(--mist); }

.post-readmore {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--slate);
    border-bottom: 1px solid transparent;
    transition: color .3s ease, border-color .3s ease;
}
.post-readmore:hover { color: var(--ink); border-bottom-color: currentColor; }

/* ==========================================================================
   VII. Contact & The Studio
   ========================================================================== */
.contact {
    position: relative;
    padding: clamp(120px, 20vh, 180px) 24px;
    text-align: center;
    color: #f0f0f0;
    background:
        linear-gradient(rgba(5, 6, 7, .84), rgba(5, 6, 7, .84)),
        #cbcbcb url('../images/contact-bg.jpg') center / cover no-repeat fixed;
}
@supports (-webkit-touch-callout: none) { .contact { background-attachment: scroll; } }
/* Was inheriting the sans stack — the only display heading on the site that
   wasn't Cormorant, which made this section read as a different website. */
.contact p { font-size: .95rem; font-weight: 300; margin: .5em 0; color: rgba(245, 244, 242, .8); }

/* ==========================================================================
   Footer
   ========================================================================== */

.social-icons {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin: 0 0 36px;
    padding: 0;
    list-style: none;
}
.social-icons a {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--white);
    border: 1px solid var(--chalk);
    box-shadow: 0 2px 10px rgba(14, 16, 18, .06);
    transition: transform .25s var(--ease-out), box-shadow .25s ease, border-color .25s ease;
}
.social-icons svg {
    width: 18px;
    height: 18px;
    fill: #686868;
    transition: fill .25s ease;
}
.social-icons a:hover, .social-icons a:focus-visible {
    transform: translateY(-4px) scale(1.06);
    box-shadow: var(--shadow-card);
    border-color: var(--slate);
}
.social-icons a:hover svg { fill: var(--ink); }

/* Scroll to top button */
.scroll-top {
    position: fixed;
    right: 28px; bottom: 28px;
    z-index: 85;
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    border: 1px solid var(--chalk);
    border-radius: 50%;
    background: var(--white);
    color: var(--slate);
    cursor: pointer;
    opacity: 0; visibility: hidden;
    transform: translateY(14px);
    box-shadow: var(--shadow-card);
    transition: opacity .3s ease, transform .3s var(--ease-out), visibility .3s, background-color .2s ease, color .2s ease, border-color .2s ease;
}
.scroll-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.scroll-top:hover {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
    transform: translateY(-3px);
    box-shadow: var(--shadow-lift);
}

/* ==========================================================================
   Inner Pages (Gallery, Artwork, Collections, Writings)
   ========================================================================== */
.crumbs {
    display: flex;
    justify-content: center;
    gap: 10px;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    margin-bottom: 36px;
    color: var(--mist);
}
.crumbs a { color: var(--mist); text-decoration: none; transition: color .2s ease; }
.crumbs a:hover { color: var(--ink); }

/* --- Gallery Hall --- */
.gallery-hall {
    max-width: 1280px;
    margin-inline: auto;
    padding: clamp(60px, 9vh, 100px) 32px 70px;
}
.gallery-head {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 52px;
}

.gallery-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 56px;
}
.filter-chip {
    padding: 10px 24px;
    font-family: var(--font-sans);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--slate);
    background: var(--bone);
    border: 1px solid var(--chalk);
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(14, 16, 18, .02);
    transition: border-color .3s ease, background-color .3s ease, color .3s ease, transform .25s var(--ease-out);
}
.filter-chip:hover { border-color: var(--slate); transform: translateY(-1px); }
.filter-chip.is-active {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--white);
    box-shadow: 0 4px 14px rgba(14, 16, 18, .15);
}
.gallery-piece {
    display: block;
    width: 100%;
    margin: 0 0 clamp(28px, 3.5vw, 44px);
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
    break-inside: avoid;
    font: inherit;
}
.gallery-piece.is-hidden { display: none; }

.piece-frame {
    position: relative;
    display: block;
    background: var(--white);
    padding: 14px;
    border: 1px solid rgba(220, 217, 210, .7);
    border-radius: 2px;
    box-shadow: var(--shadow-card);
    transition: transform .5s var(--ease-out), box-shadow .5s ease, border-color .3s ease;
}
.gallery-piece:hover .piece-frame,
.gallery-piece:focus-within .piece-frame {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lift);
    border-color: rgba(138, 109, 59, .35);
}

.piece-hover {
    position: absolute;
    inset: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(14, 16, 18, .6);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity .35s ease;
}
.gallery-piece:hover .piece-hover,
.gallery-piece:focus-within .piece-hover { opacity: 1; }

.piece-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.piece-action {
    min-width: 160px;
    padding: 12px 26px;
    font-family: var(--font-sans);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    color: #f5f4f2;
    background: rgba(245, 244, 242, .08);
    border: 1px solid rgba(245, 244, 242, .6);
    border-radius: 999px;
    cursor: pointer;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .4s ease, transform .5s var(--ease-out),
                background-color .3s ease, color .3s ease, border-color .3s ease;
}
.piece-action--alt { transition-delay: .06s; }
.gallery-piece:hover .piece-action,
.gallery-piece:focus-within .piece-action { opacity: 1; transform: none; }
.piece-action:hover, .piece-action:focus-visible {
    background: #f5f4f2;
    color: var(--ink);
    border-color: #f5f4f2;
}

@media (hover: none) {
    .piece-hover {
        opacity: 1;
        align-items: flex-end;
        justify-content: center;
        padding-bottom: 18px;
        background: linear-gradient(to top, rgba(14, 16, 18, .75), rgba(14, 16, 18, .1) 60%, transparent);
    }
    .piece-action { opacity: 1; transform: none; }
}

.piece-caption {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 4px 0;
}

/* --- The Room (Virtual Wall Viewer) --- */

.room {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    flex-direction: column;
    background: #090a0c;
    opacity: 0;
    transition: opacity .35s ease;
}
.room.is-open { opacity: 1; }
@keyframes hangSettle {
    0%   { opacity: 0; transform: translateY(-18px); }
    60%  { opacity: 1; transform: translateY(2px); }
    100% { opacity: 1; transform: none; }
}
.closeup-caption { font-family: var(--font-serif); font-style: italic; font-size: 1.15rem; color: rgba(245, 244, 242, .8); text-align: center; max-width: 60ch; margin: 0; }

/* --- Single Artwork & Single Field Note (Studies) --- */
.study {
    max-width: 900px;
    margin-inline: auto;
    padding: clamp(60px, 9vh, 100px) 24px 44px;
}
.study-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.study-title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: clamp(2.1rem, 5.2vw, 3.4rem);
    line-height: 1.2;
    color: var(--slate);
    margin: 0 0 18px;
}
.study-meta {
    font-size: .78rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--mist);
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}
.study-site { color: var(--fog); font-weight: 500; }

.study-figure {
    margin: 0 0 54px;
    background: var(--white);
    padding: 16px;
    border: 1px solid rgba(220, 217, 210, .8);
    border-radius: 2px;
    box-shadow: var(--shadow-card);
}
.study-figure img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.study-body {
    max-width: 660px;
    margin-inline: auto;
    font-size: 1.08rem;
    line-height: 1.95;
    color: var(--body);
}
.study-body p { margin: 0 0 1.7em; }
.study-body > p:first-of-type::first-letter {
    font-family: var(--font-serif);
    font-size: 3.5em;
    line-height: .8;
    float: left;
    padding: .08em .14em 0 0;
    color: var(--slate);
}

.study-foot { text-align: center; margin-top: 60px; }
.study-foot-line { font-size: 1.35rem; color: var(--fog); margin: 24px 0 16px; }

.study-adjacent {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--chalk);
    border-block: 1px solid var(--chalk);
    margin-top: 54px;
}
.adjacent-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: clamp(34px, 5.5vw, 60px);
    background: var(--white);
    text-decoration: none;
    transition: background-color .3s ease;
}
.adjacent-card:hover { background: var(--bone); }
.adjacent-card--next { text-align: right; align-items: flex-end; }
.adjacent-card:only-child { grid-column: 1 / -1; text-align: center; align-items: center; }
.adjacent-label { font-size: .625rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--mist); }
.adjacent-title { font-size: clamp(1.2rem, 2.5vw, 1.55rem); line-height: 1.35; color: var(--slate); }
.adjacent-card:hover .adjacent-title { color: var(--ink); }

/* --- Artwork Product Page --- */
.product-figure { margin: 0; }
.product-figure img { aspect-ratio: 6 / 5; }
.product-thumbs { display: flex; gap: 12px; margin: 16px 0 54px; flex-wrap: wrap; }
.product-thumb {
    width: 80px; height: 80px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 2px;
    background: var(--white);
    box-shadow: var(--shadow-card);
    cursor: pointer;
    overflow: hidden;
    transition: border-color .2s ease, transform .2s ease;
}
.product-thumb:hover { transform: translateY(-2px); }
.product-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-thumb.is-active { border-color: var(--ink); }
.product-details { display: flex; flex-direction: column; gap: 30px; align-items: center; text-align: center; }
.product-specs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 22px 36px;
    width: 100%;
    max-width: 540px;
    margin: 0;
    padding: 26px 0;
    border-block: 1px solid var(--chalk);
}
.product-specs dt { font-size: .625rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--mist); margin: 0 0 4px; }
.product-specs dd { margin: 0; font-size: 1rem; color: var(--slate); }

.product-shipping {
    width: 100%;
    max-width: 540px;
    text-align: left;
    border-top: 1px solid var(--chalk);
    padding-top: 28px;
}
.product-shipping-title { font-size: .6875rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--mist); margin: 0 0 12px; }
.product-shipping-note { font-size: .925rem; line-height: 1.8; color: var(--body); margin: 0 0 20px; }
.shipping-estimator { display: flex; flex-direction: column; gap: 10px; }
.shipping-label { font-size: .625rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--mist); }
.shipping-select {
    font-family: var(--font-sans);
    font-size: .95rem;
    color: var(--slate);
    padding: 12px 16px;
    width: 100%;
    background: var(--white);
    border: 1px solid var(--chalk);
    border-radius: 4px;
    cursor: pointer;
    transition: border-color .3s ease;
}
.shipping-select:hover { border-color: var(--fog); }
.shipping-select:focus-visible { outline: 2px solid var(--slate); outline-offset: 2px; border-color: var(--slate); }
.shipping-terms {
    margin: 8px 0 0;
    font-size: .9rem;
    line-height: 1.7;
    color: var(--slate);
    padding: 14px 18px;
    background: var(--bone);
    border-left: 1px solid var(--lime-deep);
    border-radius: 0 4px 4px 0;
}
.shipping-terms strong { letter-spacing: .06em; }
.shipping-terms-note { color: var(--fog); font-size: .84rem; }

/* --- Collection Single Page --- */

.stratum {
    max-width: 1260px;
    margin: 0 auto;
    padding: clamp(44px, 8vh, 80px) 32px;
    border-top: 1px solid var(--chalk);
    scroll-margin-top: calc(var(--header-height) + 20px);
}
.stratum-head { margin-bottom: 38px; }
.stratum-title { font-size: clamp(1.7rem, 3.2vw, 2.3rem); font-weight: 300; color: var(--slate); margin: 0; }
.stratum-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: clamp(28px, 4vw, 48px); }
.stratum-item { width: auto; }
.stratum-empty { font-size: 1.25rem; color: var(--fog); margin: 0; }
.stratum-empty a { color: var(--ink); text-decoration: underline; }

/* ==========================================================================
   Cookie Consent Banner & Modal
   ========================================================================== */

/* Modal */

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */
@media (max-width: 960px) {

    /* Tools submenu is a tap-to-open accordion here; hover/focus-within must
       not reveal it on touch, so display is gated on .is-open alone. */

    .chapter { grid-template-columns: 1fr; gap: 36px; }

    .notes-line { left: 16px; }
    .note, .note--right { width: 100%; margin-left: 0; padding: 26px 0 26px 52px; }
    .note--left { padding-right: 0; }
    .note--left .note-node, .note--right .note-node { left: 10px; right: auto; }

    .prologue-stats { flex-wrap: wrap; gap: 16px; }
    .stat { flex: 1 1 200px; }
    .fragment { opacity: .35; }
    .study-adjacent { grid-template-columns: 1fr; }
    .adjacent-card--next { text-align: left; align-items: flex-start; }
}

@media (max-width: 640px) {
    .contact { background-attachment: scroll; }
}

/* ==========================================================================
   Fine Art Painter Enhancements
   ========================================================================== */

/* --- Archival 300gsm Cotton Paper & Linen Weave Texture --- */

/* --- Ambient Spotlight Cursor Glow --- */
.ambient-cursor-glow {
    position: fixed;
    top: 0; left: 0;
    width: 300px; height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(138, 109, 59, 0.045) 0%, rgba(138, 109, 59, 0.015) 45%, transparent 70%);
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity .6s ease;
    will-change: transform;
}
.ambient-cursor-glow.is-active { opacity: 1; }

/* --- Kildare Pigment Palette Swatches --- */
.pigment-list {
    display: flex;
    align-items: center;
    gap: 14px;
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
}
.pigment-item {
    position: relative;
    outline: none;
    cursor: pointer;
}
.pigment-dot {
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--swatch, #555);
    border: 2px solid var(--white);
    box-shadow: 0 2px 8px rgba(14, 16, 18, 0.18), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
    transition: transform .3s var(--ease-out), box-shadow .3s ease;
}
.pigment-item:hover .pigment-dot,
.pigment-item:focus-visible .pigment-dot {
    transform: scale(1.35);
    box-shadow: 0 4px 14px rgba(14, 16, 18, 0.28), 0 0 0 3px rgba(138, 109, 59, 0.35);
}

.pigment-tooltip {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 170px;
    max-width: 220px;
    padding: 10px 14px;
    background: var(--ink);
    color: #FAF9F7;
    border-radius: 6px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
    font-size: .75rem;
    line-height: 1.4;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, transform .25s var(--ease-out), visibility .25s ease;
    z-index: 100;
}
.pigment-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--ink);
}
.pigment-item:hover .pigment-tooltip,
.pigment-item:focus-visible .pigment-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.pigment-name {
    display: block;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .6875rem;
    color: #C4AA78;
    margin-bottom: 2px;
}
.pigment-note {
    display: block;
    color: rgba(250, 249, 247, .85);
    font-size: .72rem;
}

/* --- Interactive Studio Loupe Magnifier --- */
.loupe-container {
    position: relative;
    display: inline-block;
    cursor: crosshair;
    overflow: hidden;
}
.product-loupe-container {
    display: block;
    max-width: 100%;
}
.studio-loupe {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    pointer-events: none;
    border: 3px solid rgba(255, 255, 255, 0.95);
    box-shadow:
        0 12px 36px rgba(0, 0, 0, 0.4),
        inset 0 0 20px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(0, 0, 0, 0.2);
    background-repeat: no-repeat;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.85);
    transition: opacity .2s ease, transform .2s var(--ease-out), visibility .2s ease;
    z-index: 50;
}
.studio-loupe.is-active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}
.studio-loupe::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.25) 0%, transparent 60%);
    pointer-events: none;
}
.loupe-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: .88rem;
    color: var(--fog);
    margin: 12px 0 0;
}
.closeup-hint {
    font-size: .88rem;
    color: rgba(245, 244, 242, .6);
    text-align: center;
    margin: 8px 0 0;
}

/* --- Gallery Lighting Simulator (The Room) --- */
.lighting-label {
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(245, 244, 242, .55);
}
.lighting-btn {
    padding: 6px 14px;
    font-family: var(--font-sans);
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(245, 244, 242, .7);
    background: none;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color .25s ease, color .25s ease;
}
.lighting-btn:hover { color: #fff; }
.lighting-btn.is-active {
    background: rgba(255, 255, 255, .2);
    color: #fff;
}

/* Warm Spotlight 3000K */

/* Studio Daylight 5500K */

/* Kildare Half-Light / Dusk 2400K */
/* ==========================================================================
   VIII. Gallery Hall (/gallery/)
   ========================================================================== */
.gallery-hall {
    padding: calc(var(--header-height) + 50px) 24px 120px;
    max-width: var(--container);
    margin: 0 auto;
}
.gallery-head {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 50px;
}
.crumbs {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mist);
    margin-bottom: 24px;
}
.crumbs a { color: var(--stone); text-decoration: none; transition: color .2s ease; }
.crumbs a:hover { color: var(--ink); }

.gallery-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0 auto 50px;
    max-width: 900px;
}
.filter-chip {
    padding: 9px 22px;
    font-family: var(--font-sans);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    border-radius: 999px;
    background: var(--white);
    border: 1px solid var(--chalk);
    color: var(--stone);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(14, 16, 18, .04);
    transition: all .25s ease;
}
.filter-chip:hover {
    border-color: var(--slate);
    color: var(--ink);
    transform: translateY(-1px);
}
.filter-chip.is-active {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
    box-shadow: 0 4px 14px rgba(14, 16, 18, .18);
}
.gallery-piece {
    position: relative;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform .4s var(--ease-out);
}
.gallery-piece.is-hidden { display: none; }
.gallery-piece:hover { transform: translateY(-6px); }

.piece-frame {
    position: relative;
    display: block;
    padding: 16px;
    background: var(--white);
    border: 1px solid rgba(215, 210, 200, .8);
    border-radius: 4px;
    box-shadow:
        0 14px 36px -8px rgba(14, 16, 18, .1),
        0 0 0 1px rgba(255, 255, 255, .8) inset;
    overflow: hidden;
    transition: box-shadow .4s ease, border-color .3s ease;
}
.gallery-piece:hover .piece-frame {
    box-shadow:
        0 24px 50px -10px rgba(14, 16, 18, .18),
        0 0 0 1px rgba(138, 109, 59, .4);
    border-color: rgba(138, 109, 59, .45);
}
.piece-frame img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
    border-radius: 2px;
    transition: transform .6s var(--ease-out);
}
.gallery-piece:hover .piece-frame img { transform: scale(1.03); }

.piece-hover {
    position: absolute;
    inset: 16px;
    background: rgba(14, 16, 18, .45);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .35s ease;
    border-radius: 2px;
    z-index: 5;
}
.gallery-piece:hover .piece-hover { opacity: 1; }

.piece-actions {
    display: flex;
    gap: 12px;
    transform: translateY(8px);
    transition: transform .35s var(--ease-out);
}
.gallery-piece:hover .piece-actions { transform: translateY(0); }

.piece-action {
    padding: 10px 22px;
    font-family: var(--font-sans);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    border: 0;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
    transition: all .2s ease;
}
.piece-action:hover {
    background: var(--ink);
    color: #fff;
    transform: scale(1.05);
}
.piece-action--alt {
    background: rgba(255, 255, 255, .2);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .6);
    backdrop-filter: blur(8px);
}
.piece-action--alt:hover {
    background: #fff;
    color: var(--ink);
    border-color: #fff;
}

.piece-caption {
    padding: 18px 6px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.piece-title-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}
.piece-status-tag {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--bone);
    border: 1px solid var(--chalk);
    color: var(--slate);
}
.piece-status-tag.is-avail {
    color: #8c723f;
    border-color: rgba(138, 109, 59, .35);
    background: rgba(138, 109, 59, .06);
}
.piece-status-tag.is-sold {
    color: var(--mist);
    background: var(--bone);
}

/* ==========================================================================
   IX. The Room (Virtual Scale Viewer & Studio Loupe)
   ========================================================================== */
.room {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: #111215;
    color: #fff;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s ease, visibility .4s ease;
}
.room:not([hidden]) {
    opacity: 1;
    visibility: visible;
}
#room-loupe-container {
    max-height: 72vh;
    max-width: 85vw;
    display: flex;
    justify-content: center;
    align-items: center;
}
#closeup-img {
    max-height: 72vh;
    max-width: 85vw;
    object-fit: contain;
    border-radius: 2px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .8);
}
.closeup-caption {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    color: #fff;
    margin: 18px 0 4px;
    text-align: center;
}

/* ==========================================================================
   X. Collection & Artwork Detail Pages
   ========================================================================== */

.study-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 36px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.study-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: transform .35s var(--ease-out);
}
.study-card:hover { transform: translateY(-6px); }
.study-card-frame {
    position: relative;
    padding: 14px;
    background: var(--white);
    border: 1px solid rgba(215, 210, 200, .75);
    border-radius: 3px;
    box-shadow: 0 10px 28px rgba(14, 16, 18, .08);
    overflow: hidden;
    transition: box-shadow .35s ease, border-color .3s ease;
}
.study-card:hover .study-card-frame {
    box-shadow: 0 20px 45px rgba(14, 16, 18, .15);
    border-color: rgba(138, 109, 59, .4);
}
.study-card-frame img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
    border-radius: 1px;
}
.study-card-title {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-weight: 400;
    color: var(--slate);
    margin: 14px 0 2px;
}
.study-card-meta {
    font-size: .78rem;
    color: var(--fog);
    letter-spacing: .04em;
}

/* Artwork Detail / Product View */
.study-page {
    max-width: var(--container);
    margin: 0 auto;
    padding: calc(var(--header-height) + 40px) 24px 120px;
}
.product-gallery {
    margin-bottom: 40px;
}
.product-figure {
    position: relative;
    padding: 20px;
    background: var(--white);
    border: 1px solid rgba(215, 210, 200, .85);
    border-radius: 4px;
    box-shadow: 0 24px 60px -10px rgba(14, 16, 18, .12);
    display: inline-block;
    max-width: 100%;
}
.product-figure img {
    max-width: 100%;
    height: auto;
    max-height: 78vh;
    object-fit: contain;
    display: block;
    border-radius: 2px;
}
.product-thumbs {
    display: flex;
    gap: 12px;
    margin-top: 18px;
    justify-content: center;
}
.product-thumb {
    width: 72px;
    height: 72px;
    padding: 4px;
    background: var(--white);
    border: 1px solid var(--chalk);
    border-radius: 4px;
    cursor: pointer;
    transition: border-color .2s ease, transform .2s ease;
}
.product-thumb.is-active, .product-thumb:hover {
    border-color: var(--ink);
    transform: scale(1.05);
}
.product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 2px;
}

.product-specs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 18px;
    background: var(--bone);
    border: 1px solid var(--chalk);
    padding: 24px;
    border-radius: 6px;
    margin: 28px 0;
}
.product-specs dt {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--fog);
    margin-bottom: 4px;
}
.product-specs dd {
    font-size: .95rem;
    color: var(--ink);
    margin: 0;
    font-weight: 500;
}
.product-specs dd a { color: var(--ink); text-decoration: underline; }

/* ==========================================================================
   XI. Refinement Layer
   Appended deliberately. Several component blocks above are declared twice —
   a legacy pass and a later one that silently overrides it — so editing them
   in place is ambiguous. Everything below is last-wins and is the source of
   truth for the components it names. Its own breakpoints live at the bottom
   of this block so they aren't outranked by the earlier media queries.
   ========================================================================== */

/* ---------- Prologue: a ledger, not three SaaS cards ---------- */
.prologue-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-top: clamp(70px, 11vh, 124px);
    border-top: 1px solid rgba(14, 16, 18, .82);
    text-align: left;
}
.stat {
    align-items: flex-start;
    gap: 0;
    padding: 30px clamp(16px, 2.4vw, 40px) 36px 0;
    background: none;
    border: 0;
    border-left: 1px solid var(--chalk);
    border-radius: 0;
    box-shadow: none;
    transition: none;
}
.stat:first-child { border-left: 0; }
.stat + .stat { padding-left: clamp(20px, 3vw, 48px); }
.stat:hover { transform: none; box-shadow: none; border-color: var(--chalk); }

/* The gold capsule badge was the loudest "template" signal in the section. */
.stat-badge {
    margin: 0 0 clamp(20px, 3.5vh, 38px);
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    font-size: .5625rem;
    font-weight: 600;
    letter-spacing: .3em;
    color: var(--mist);
}
.stat-number {
    font-size: clamp(3rem, 7vw, 5.2rem);
    line-height: .86;
    letter-spacing: -0.04em;
    margin-bottom: 16px;
}
.stat-label {
    max-width: 20ch;
    text-align: left;
    text-transform: none;
    letter-spacing: .01em;
    font-size: .8rem;
    font-weight: 300;
    line-height: 1.7;
    color: var(--fog);
}

/* ---------- Prologue fragments: plates, not scrapbook polaroids ---------- */
.fragment {
    width: clamp(170px, 21vw, 300px);
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: 0 30px 70px -18px rgba(14, 16, 18, .28);
    opacity: .9;
}
.fragment img { filter: saturate(.82) contrast(1.03); }
.fragment-1 { top: 8%; left: 2%; }
.fragment-2 { bottom: 8%; right: 3%; }

/* ---------- Strata: a set index, not grey pills ---------- */
.stratum-chip {
    display: inline-block;
    padding: 5px 0;
    background: none;
    border: 0;
    border-bottom: 1px solid rgba(14, 16, 18, .16);
    border-radius: 0;
    box-shadow: none;
    font-size: .8rem;
    font-weight: 400;
    letter-spacing: .02em;
    text-transform: none;
    color: var(--stone);
    transition: color .35s var(--ease-out), border-color .35s var(--ease-out);
}
.stratum-chip:hover, .stratum-chip:focus-visible {
    background: none;
    color: var(--ink);
    border-bottom-color: var(--ink);
    transform: none;
    box-shadow: none;
}

/* ---------- Pigment study: name the colours ---------- */
/* Four unlabelled dots read as a colour-picker widget; a hover tooltip means
   the information is invisible until you happen to find it. */
.pigment-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
    gap: 0 clamp(12px, 1.6vw, 24px);
    margin-top: 12px;
}
.pigment-item { cursor: default; }
.pigment-dot {
    width: 100%;
    height: 4px;
    border-radius: 0;
    border: 0;
    box-shadow: none;
    margin-bottom: 10px;
}
.pigment-item:hover .pigment-dot,
.pigment-item:focus-visible .pigment-dot { transform: none; box-shadow: none; }

.pigment-tooltip {
    position: static;
    display: block;
    min-width: 0;
    max-width: none;
    padding: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
    text-align: left;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
}
.pigment-tooltip::after { display: none; }
.pigment-item:hover .pigment-tooltip,
.pigment-item:focus-visible .pigment-tooltip { transform: none; }
.pigment-name {
    font-size: .5625rem;
    font-weight: 600;
    letter-spacing: .16em;
    color: var(--stone);
    margin-bottom: 3px;
}
.pigment-note {
    font-size: .6875rem;
    font-weight: 300;
    line-height: 1.5;
    color: var(--mist);
}

/* ---------- Journey rail: measured ticks, not radio buttons ---------- */
.rail-dot {
    width: 16px;
    height: 1px;
    border-radius: 0;
    border: 0;
    background: rgba(14, 16, 18, .26);
    transition: background-color .4s ease;
}
.rail-label { font-size: .5625rem; letter-spacing: .26em; }

/* ---------- Buttons: keep the silhouette, add the mechanism ---------- */
/* A fill that sweeps up from the bottom edge on hover, rather than a colour
   swap and a nudge. .btn-face wraps the label so it paints above the sweep. */

/* Dark buttons sweep light */

/* Light buttons sweep dark */

/* Outlined chapter link */

/* ---------- Rhythm: close the dead space ---------- */
/* The image column is much taller than the text column; centring both left a
   200–400px void under every chapter. Aligning tops reads as a set grid. */
.chapter { align-items: start; }
.chapters { padding-bottom: clamp(80px, 11vh, 130px); }
.chapter { margin-bottom: clamp(70px, 10vh, 118px); }

/* The timeline spine ran past the final card into empty space. */
.notes-line { bottom: clamp(70px, 9vh, 118px); }

/* Ghost lights read as dust at full strength; hold them back so they behave
   like air rather than smudges on the glass. */

/* ---------- Refinement breakpoints ---------- */
@media (max-width: 960px) {
    .prologue-stats {
        grid-template-columns: 1fr;
        margin-top: clamp(52px, 8vh, 84px);
    }
    .stat {
        border-left: 0;
        border-top: 1px solid var(--chalk);
        padding: 26px 0 30px;
    }
    .stat + .stat { padding-left: 0; }
    .stat:first-child { border-top: 0; }
    .stat-badge { margin-bottom: 16px; }
    .stat-label { max-width: none; }
    .fragment { opacity: .3; }
}

@media (max-width: 700px) {
    .pigment-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 18px; }
}

/* Numeral sits above the plate rather than across the artwork. */

/* ==========================================================================
   XII. Motion Layer
   Styles for assets/js/motion.js. Every selector here is inert until that
   script adds its hook class, so the page is unaffected if it never runs.
   ========================================================================== */

/* ---------- Loading sequence ---------- */

.veil {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: grid;
    place-items: center;
    background: var(--white);
    transition: opacity .9s var(--ease-out), visibility .9s;
}
.veil.is-gone { opacity: 0; visibility: hidden; pointer-events: none; }

/* A single rule that draws itself across, then parts. */
.veil-mark {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(280px, 42vw);
    height: 1px;
    margin-left: calc(min(280px, 42vw) / -2);
    background: var(--chalk);
    overflow: hidden;
}
.veil-mark::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, var(--gold) 45%, var(--ink));
    transform: scaleX(0);
    transform-origin: left center;
    animation: veilDraw 2.6s cubic-bezier(.16, 1, .3, 1) forwards;
}
@keyframes veilDraw { to { transform: scaleX(1); } }

.veil-count {
    position: absolute;
    left: 50%;
    top: calc(50% + 26px);
    transform: translateX(-50%);
    font-family: var(--font-sans);
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .34em;
    color: var(--mist);
    font-variant-numeric: tabular-nums;
}
.veil-count i { font-style: normal; }
.veil-count::after { content: '%'; margin-left: 2px; }

/* ---------- Page transitions ---------- */
.curtain {
    position: fixed;
    inset: 0;
    z-index: 380;
    background: var(--ink);
    pointer-events: none;
    opacity: 0;
    transform: translateY(100%);
    transition: transform .52s cubic-bezier(.65, 0, .35, 1), opacity .1s linear;
}
.curtain.is-drawn { opacity: 1; transform: translateY(0); }

/* ---------- Inertial scrolling ---------- */
/* Native smooth scrolling would fight the eased position. */

/* ---------- Custom cursor ---------- */
/* Text entry keeps a real caret. */

/* The bloom is painted to a canvas; the core and caption are DOM so they
   can use difference blending and stay legible on paper and on black. */
.wisp-canvas {
    position: fixed;
    inset: 0;
    z-index: 388;
    pointer-events: none;
    opacity: 0;
    transition: opacity .6s ease;
}
.wisp-canvas.is-on { opacity: 1; }

.cur-core, .cur-cap {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 390;
    pointer-events: none;
    opacity: 0;
    transition: opacity .35s ease;
    will-change: transform;
}
.cur-core.is-on { opacity: 1; }

.cur-core {
    width: 4px;
    height: 4px;
    margin: -2px 0 0 -2px;
    border-radius: 50%;
    background: #ffffff;
    mix-blend-mode: difference;
}

.cur-cap {
    margin-left: 0;
    transform-origin: center top;
    font-family: var(--font-sans);
    font-size: .5625rem;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #ffffff;
    mix-blend-mode: difference;
    translate: -50% 0;
}
.cur-cap.is-on { opacity: 1; }

/* Difference blending means the cursor inverts itself against whatever is
   under it — legible on the paper sections and on the black ones, with no
   need to track which section the pointer is over. */
/* ---------- Lantern ----------
   A brighter, warmer reading of the artwork, masked to a soft disc that
   follows the pointer. --lantern is set to the image URL by motion.js on
   enter; --lx/--ly track the pointer as percentages of the plate.
   The inset on each rule matches that component's mat padding so the
   overlay lands exactly on the image, not the frame. */
.piece-frame::after         { inset: 16px; }

/* The gallery hover scrim has to stay above the lantern. */
.piece-hover { z-index: 5; }

/* ---------- Hero choreography ---------- */

/* ---------- Motion layer: reduced-motion and touch ---------- */
@media (prefers-reduced-motion: reduce) {
    .veil, .curtain, .wisp-canvas, .cur-core, .cur-cap { display: none !important; }
}
@media (hover: none), (pointer: coarse) {
    .wisp-canvas, .cur-core, .cur-cap { display: none !important; }
}

/* ---------- Line reveals ----------
   Once motion.js has regrouped the words into measured lines, the per-word
   float is retired and each line slides out from behind its own edge. */
.split-words.has-lines .w {
    opacity: 1;
    transform: none;
    transition: none;
}
.split-words.has-lines .ln {
    display: block;
    overflow: hidden;
    /* Descenders and italic overhang would otherwise be clipped. */
    padding-bottom: .06em;
    margin-bottom: -.06em;
}
.split-words.has-lines .ln-i {
    display: block;
    transform: translate3d(0, 106%, 0);
    transition: transform 1.15s var(--ease-out);
    transition-delay: calc(var(--li) * 95ms);
    will-change: transform;
}
.split-words.has-lines.is-visible .ln-i { transform: none; }

@media (prefers-reduced-motion: reduce) {
    .split-words.has-lines .ln-i { transform: none !important; transition: none !important; }
}

/* ==========================================================================
   XIII. Depth & Scroll Presence

   Blocks arrive tilted back in Z and settle flat as they enter, then fall
   away again as they leave — so scrolling reads as moving through a space
   rather than past a list.

   Primary path is CSS scroll-driven animation (`animation-timeline: view()`),
   which runs off the main thread entirely. motion.js supplies an equivalent
   rAF fallback for engines without it. The two are mutually exclusive: the
   fallback checks CSS.supports first.
   ========================================================================== */

@keyframes plate3d {
    0% {
        opacity: 0;
        transform: perspective(1300px) translate3d(0, 52px, -96px) rotateX(6.5deg);
    }
    17% {
        opacity: 1;
        transform: perspective(1300px) translate3d(0, 0, 0) rotateX(0deg);
    }
    80% {
        opacity: 1;
        transform: perspective(1300px) translate3d(0, 0, 0) rotateX(0deg);
    }
    100% {
        opacity: 0;
        transform: perspective(1300px) translate3d(0, -38px, -64px) rotateX(-4.5deg);
    }
}

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        /* Deliberately NOT applied to .split-words statements — those have
           their own line reveal — nor to the hero, which keeps its staged
           intro timing. */
    }
}

/* rAF fallback writes inline transform/opacity; this only marks the element. */
.has-presence { will-change: transform, opacity; }

/* ---------- Depth-layered plates ----------
   The frame tilts toward the pointer while the artwork inside shifts very
   slightly against it, so the image sits behind the mat rather than being
   painted on it. Done with 2D counter-translation rather than translateZ,
   because these plates need overflow:hidden to clip the scaled artwork and
   that forces transform-style back to flat. */

/* --mx/--my are percentages of the plate, set by the tilt handler. */

/* The legacy hover rules declare a bare translateY, which at equal-or-higher
   specificity would replace the tilt just as the pointer arrives. Recombine
   both transforms explicitly. */

/* ==========================================================================
   XIV. Signature mark
   The gold signature is near-square (aspect 0.93) where the wordmarks it
   replaces were wide (4.0 and 3.7), so both placements size by HEIGHT and
   let width follow. Constrained with max-* rather than a fixed height, so
   the aspect is never squashed on narrow viewports.
   ========================================================================== */

/* The ambient glow was a wide, shallow ellipse sized for a wordmark. */

/* Reclaim vertical room around the signature so it can carry the hero
   without pushing the CTA and scroll cue into the clipped overflow. */

/* The hero is a fixed 100vh box that clips its overflow, and the signature
   is now the tallest thing in it. On short viewports everything tightens so
   the CTA and scroll cue stay above the fold instead of being cut off. */
@media (max-height: 900px) {
    /* The scroll cue is absolutely positioned 30px off the bottom edge, so
       the padding has to reserve its full height or the centred content
       block runs straight through it. */
}

/* ==========================================================================
   XV. Study & Field Note Articles (/writings/ & /gallery/<slug>/)
   ========================================================================== */
.study {
    max-width: 860px;
    margin: 0 auto;
    padding: calc(var(--header-height) + 50px) 24px 120px;
}
.study.product {
    max-width: 1040px;
}
.study-head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 44px;
}
.study-title {
    font-family: var(--font-serif);
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    font-weight: 400;
    line-height: 1.18;
    color: var(--slate);
    margin: 12px 0 16px;
    letter-spacing: -0.015em;
}
.study-meta {
    font-size: .8125rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mist);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
.study-site { color: var(--stone); font-weight: 500; }
.study-meta-sep { color: var(--chalk); }

.study-figure {
    position: relative;
    padding: 16px;
    background: var(--white);
    border: 1px solid rgba(215, 210, 200, .85);
    border-radius: 4px;
    box-shadow: 0 20px 50px -10px rgba(14, 16, 18, .12);
    margin: 0 0 48px;
}
.study-figure img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 2px;
}

.study-body {
    font-size: 1.1rem;
    line-height: 1.95;
    color: var(--body);
    margin: 0 auto 60px;
}
.study-body p { margin: 0 0 1.6em; }
.study-body h2 {
    font-family: var(--font-serif);
    font-size: 1.8rem;
    font-weight: 400;
    color: var(--slate);
    margin: 2em 0 .8em;
}
.study-body blockquote {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.35rem;
    line-height: 1.6;
    color: var(--slate);
    border-left: 2px solid var(--gold);
    padding-left: 24px;
    margin: 2em 0;
}

.study-foot {
    text-align: center;
    padding-top: 40px;
    margin-bottom: 80px;
}
.study-foot-line {
    font-size: 1.25rem;
    color: var(--slate);
    margin: 20px 0 18px;
}

.study-adjacent {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 860px;
    margin: 0 auto 100px;
    padding-inline: 24px;
}
.adjacent-card {
    display: flex;
    flex-direction: column;
    padding: 24px 28px;
    background: var(--white);
    border: 1px solid var(--chalk);
    border-radius: 6px;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(14, 16, 18, .04);
    transition: all .3s var(--ease-out);
}
.adjacent-card:hover {
    border-color: var(--slate);
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(14, 16, 18, .08);
}
.adjacent-card--next { text-align: right; align-items: flex-end; }
.adjacent-label {
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--mist);
    margin-bottom: 6px;
}
.adjacent-title {
    font-size: 1.1rem;
    color: var(--slate);
    line-height: 1.4;
}

/* 404 Lost Page */
.lost {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
    padding: calc(var(--header-height) + 100px) 24px 140px;
}
.lost-title {
    font-size: clamp(2rem, 4.5vw, 3rem);
    color: var(--slate);
    margin: 16px 0 20px;
}
.lost-body {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--body);
    margin-bottom: 36px;
}

/* ==========================================================================
   XVI. High-End Studio Features & Collector Concierge
   ========================================================================== */

/* --- Collector Visualizer & Wall Simulator (artwork.php) --- */
.collector-visualizer-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin: 0 0 16px;
    padding: 12px 20px;
    background: var(--bone);
    border: 1px solid var(--chalk);
    border-radius: 8px;
}
.wall-selector {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.ctrl-label {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mist);
    margin-right: 4px;
}
.wall-btn {
    padding: 6px 14px;
    font-family: var(--font-sans);
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .08em;
    border-radius: 999px;
    background: var(--white);
    border: 1px solid var(--chalk);
    color: var(--stone);
    cursor: pointer;
    transition: all .2s ease;
}
.wall-btn:hover { border-color: var(--slate); color: var(--ink); }
.wall-btn.is-active {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}

.scale-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    font-family: var(--font-sans);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    border-radius: 999px;
    background: var(--white);
    border: 1px solid var(--chalk);
    color: var(--stone);
    cursor: pointer;
    transition: all .25s ease;
}
.scale-toggle-btn:hover { border-color: var(--slate); color: var(--ink); }
.scale-toggle-btn.is-active {
    background: #9A8150;
    color: #fff;
    border-color: #9A8150;
    box-shadow: 0 2px 10px rgba(138, 109, 59, .3);
}

/* Wall Finish Backgrounds */
.product-gallery {
    transition: background-color .5s ease;
    border-radius: 8px;
    padding: 24px;
    background: transparent;
}
.product-gallery.wall-gallery {
    background-color: #FAF9F7;
}
.product-gallery.wall-plaster {
    background-color: #DCD6C9;
    box-shadow: inset 0 0 60px rgba(0, 0, 0, .05);
}
.product-gallery.wall-linen {
    background-color: #C8BEAF;
    background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, .015) 0, rgba(0, 0, 0, .015) 2px, transparent 0, transparent 4px);
}
.product-gallery.wall-charcoal {
    background-color: #26282C;
    color: #fff;
}
.product-gallery.wall-charcoal .loupe-hint { color: rgba(255, 255, 255, .7); }
.product-gallery.wall-charcoal .product-figure {
    border-color: rgba(255, 255, 255, .15);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}

/* Living Scale Guide Overlay */
.scale-living-guide {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s ease, visibility .4s ease;
    z-index: 10;
}
.scale-living-guide.is-active {
    opacity: 1;
    visibility: visible;
}
.scale-credenza {
    position: absolute;
    bottom: -32px;
    left: 50%;
    transform: translateX(-50%);
    width: min(540px, 94%);
    height: 38px;
    background: rgba(40, 35, 30, .85);
    border-radius: 3px 3px 0 0;
    border-top: 2px solid rgba(200, 180, 140, .4);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}
.scale-figure-silhouette {
    position: absolute;
    bottom: -32px;
    right: 4%;
    width: 32px;
    height: 120px;
    background: rgba(14, 16, 18, .4);
    border-radius: 12px 12px 0 0;
    backdrop-filter: blur(2px);
}

/* Collector Inquiry Trigger Box */
.product-inquiry-box {
    margin: 0 0 36px;
    padding: 24px 28px;
    background: var(--bone);
    border: 1px solid var(--chalk);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.acq-trigger-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 36px;
    background: var(--ink);
    color: #fff;
    font-family: var(--font-sans);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    border-radius: 999px;
    border: 1px solid rgba(138, 109, 59, .4);
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(14, 16, 18, .18);
    transition: all .3s var(--ease-out);
}
.acq-trigger-btn:hover {
    background: var(--slate);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(14, 16, 18, .28);
}
.acq-trigger-btn .btn-arrow { transition: transform .25s ease; }
.acq-trigger-btn:hover .btn-arrow { transform: translateX(4px); }
.inquiry-subtext {
    font-size: .88rem;
    color: var(--fog);
    text-align: center;
    margin: 0;
}

/* --- Slide-Over Private Collector Acquisition Drawer --- */
.acquisition-drawer {
    position: fixed;
    inset: 0;
    z-index: 360;
    display: flex;
    justify-content: flex-end;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility .35s ease;
}
.acquisition-drawer.is-open {
    opacity: 1;
    visibility: visible;
}
.acquisition-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(14, 16, 18, .65);
    backdrop-filter: blur(8px);
}
.acquisition-panel {
    position: relative;
    width: min(560px, 92vw);
    height: 100%;
    background: var(--white);
    box-shadow: -20px 0 60px rgba(0, 0, 0, .3);
    z-index: 2;
    overflow-y: auto;
    padding: clamp(28px, 4vw, 44px);
    transform: translateX(100%);
    transition: transform .4s var(--ease-out);
    display: flex;
    flex-direction: column;
}
.acquisition-drawer.is-open .acquisition-panel {
    transform: translateX(0);
}
.acquisition-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--chalk);
    margin-bottom: 24px;
}
.acq-eyebrow {
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: #9A8150;
    margin: 0 0 4px;
}
.acquisition-title {
    font-family: var(--font-serif);
    font-size: 1.8rem;
    font-weight: 400;
    color: var(--slate);
    margin: 0;
}
.acquisition-close {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--bone);
    border: 1px solid var(--chalk);
    font-size: 1.4rem;
    line-height: 1;
    color: var(--stone);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s ease;
}
.acquisition-close:hover { background: var(--ink); color: #fff; }

.acq-piece-card {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 16px;
    background: var(--bone);
    border: 1px solid var(--chalk);
    border-radius: 6px;
    margin-bottom: 28px;
}
.acq-piece-thumb {
    width: 68px;
    height: 68px;
    flex-shrink: 0;
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, .08);
}
.acq-piece-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.acq-piece-title {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-weight: 400;
    color: var(--slate);
    margin: 0 0 2px;
}
.acq-piece-meta {
    font-size: .75rem;
    color: var(--fog);
    margin: 0 0 4px;
}
.acq-piece-price {
    font-size: .88rem;
    font-weight: 600;
    color: #9A8150;
    margin: 0;
}

.acquisition-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.acq-intent-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 8px;
}
.acq-intent-chip {
    position: relative;
    cursor: pointer;
}
.acq-intent-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.acq-intent-chip span {
    display: block;
    padding: 10px 14px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: center;
    border: 1px solid var(--chalk);
    border-radius: 6px;
    background: var(--bone);
    color: var(--stone);
    transition: all .2s ease;
}
.acq-intent-chip input:checked + span {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}
.acq-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.acq-field label {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--slate);
}
.acq-field input, .acq-field textarea {
    padding: 12px 14px;
    border: 1px solid var(--chalk);
    border-radius: 6px;
    background: var(--white);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: .88rem;
    transition: border-color .2s ease;
}
.acq-field input:focus, .acq-field textarea:focus {
    outline: none;
    border-color: var(--ink);
}
.acq-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 28px;
    background: var(--ink);
    color: #fff;
    font-family: var(--font-sans);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    border-radius: 999px;
    border: 0;
    cursor: pointer;
    margin-top: 10px;
    transition: all .25s ease;
}
.acq-submit-btn:hover {
    background: var(--slate);
    transform: translateY(-1px);
    box-shadow: var(--shadow-card);
}
.acq-note {
    font-size: .72rem;
    line-height: 1.5;
    color: var(--mist);
    text-align: center;
    margin: 12px 0 0;
}

/* Plaque action button inside The Room */

/* --- Fullscreen Exhibition Cinema Mode --- */
.gallery-controls-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin: 0 auto 50px;
    max-width: 960px;
}
.cinema-trigger-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 22px;
    font-family: var(--font-sans);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
    border: 1px solid rgba(138, 109, 59, .4);
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(14, 16, 18, .18);
    transition: all .25s ease;
}
.cinema-trigger-btn:hover {
    background: var(--slate);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(14, 16, 18, .28);
}

.cinema-modal {
    position: fixed;
    inset: 0;
    z-index: 380;
    background: #090A0C;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease, visibility .5s ease;
}
.cinema-modal.is-open {
    opacity: 1;
    visibility: visible;
}
.cinema-stage {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.cinema-figure {
    position: relative;
    max-width: 86vw;
    max-height: 82vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cinema-img {
    max-width: 86vw;
    max-height: 82vh;
    object-fit: contain;
    border-radius: 2px;
    box-shadow: 0 30px 100px rgba(0, 0, 0, .8);
    transform: scale(0.98);
    opacity: 0;
    transition: transform 6.5s cubic-bezier(.2, .8, .2, 1), opacity .8s ease;
}
.cinema-img.is-active {
    transform: scale(1.03);
    opacity: 1;
}

.cinema-plaque {
    position: absolute;
    bottom: 40px;
    left: 48px;
    background: rgba(14, 16, 18, .8);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, .15);
    padding: 18px 26px;
    border-radius: 6px;
    z-index: 10;
    max-width: 420px;
}
.cinema-count {
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: #9A8150;
    margin: 0 0 4px;
}
.cinema-title {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 400;
    color: #fff;
    margin: 0 0 4px;
}
.cinema-meta {
    font-size: .78rem;
    color: rgba(255, 255, 255, .7);
    margin: 0 0 4px;
}
.cinema-price {
    font-size: .95rem;
    font-weight: 600;
    color: #C4AA78;
    margin: 0;
}

.cinema-controls {
    position: absolute;
    top: 32px;
    right: 48px;
    display: flex;
    gap: 12px;
    z-index: 20;
}
.cinema-btn {
    padding: 8px 18px;
    font-family: var(--font-sans);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    border-radius: 999px;
    background: rgba(14, 16, 18, .75);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .25);
    color: #fff;
    cursor: pointer;
    transition: all .2s ease;
}
.cinema-btn:hover { background: #fff; color: var(--ink); }
.cinema-btn--close { border-color: rgba(138, 109, 59, .5); }
.cinema-btn--close:hover { background: #9A8150; color: #fff; }

@media (max-width: 768px) {
    .cinema-plaque { left: 20px; right: 20px; bottom: 20px; max-width: none; }
    .cinema-controls { top: 20px; right: 20px; }
}

/* ==========================================================================
   XVII. 3D Fine Art Suite & The Ogham Journey Pillar
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 🪨 The Ogham Journey Pillar (Standing Stone Scroll Tracker)
   -------------------------------------------------------------------------- */

/* Central Ogham Stemline (Druim) */

/* Ogham Notch Stations */

/* Active & Carved Ogham Runes */

/* Luxury Archaeological Tooltip */
.ogham-label {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #fff;
}
.ogham-sub {
    font-size: .625rem;
    color: #C4AA78;
    letter-spacing: .08em;
}

/* --------------------------------------------------------------------------
   2. 🖼️ Interactive 3D Canvas Orbit & Stretcher-Bar Inspection (artwork.php)
   -------------------------------------------------------------------------- */
.visualizer-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.orbit-3d-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    font-family: var(--font-sans);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    border-radius: 999px;
    background: var(--white);
    border: 1px solid var(--chalk);
    color: var(--stone);
    cursor: pointer;
    transition: all .25s ease;
}
.orbit-3d-btn:hover { border-color: var(--slate); color: var(--ink); }
.orbit-3d-btn.is-active {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
    box-shadow: 0 4px 14px rgba(14, 16, 18, .25);
}

/* 3D Canvas Orbit Stage */
.canvas-3d-stage {
    position: relative;
    width: 100%;
    min-height: 540px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}
.canvas-3d-scene {
    position: relative;
    width: min(680px, 90vw);
    height: min(540px, 70vh);
    perspective: 1400px;
    cursor: grab;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.canvas-3d-scene.is-grabbing { cursor: grabbing; }

.canvas-3d-object {
    position: relative;
    width: 80%;
    height: 80%;
    transform-style: preserve-3d;
    transform: rotateX(0deg) rotateY(0deg);
}

/* Canvas Faces (Front, Sides, Back) */
.canvas-face {
    position: absolute;
    inset: 0;
    backface-visibility: visible;
}
.canvas-face--front {
    transform: translateZ(19px);
    background: #fff;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .2);
    border-radius: 2px;
    overflow: hidden;
}
.canvas-face--front img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.canvas-glaze-sheen {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, .2) 0%, transparent 40%, rgba(255, 255, 255, .05) 100%);
    pointer-events: none;
}

/* Stretcher Back Face */
.canvas-face--back {
    transform: rotateY(180deg) translateZ(19px);
    background: #C4B9A8;
    background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, .02) 0, rgba(0, 0, 0, .02) 2px, transparent 0, transparent 4px);
    border: 1px solid #A89D8C;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
    border-radius: 2px;
    overflow: hidden;
    padding: 24px;
}
.stretcher-wood {
    position: absolute;
    background: #D4B98E;
    background-image: repeating-linear-gradient(to right, rgba(0, 0, 0, .03) 0, rgba(0, 0, 0, .03) 8px, transparent 0, transparent 16px);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, .2);
}
.stretcher-top    { top: 0; left: 0; right: 0; height: 32px; }
.stretcher-bottom { bottom: 0; left: 0; right: 0; height: 32px; }
.stretcher-left   { top: 0; bottom: 0; left: 0; width: 32px; }
.stretcher-right  { top: 0; bottom: 0; right: 0; width: 32px; }
.stretcher-cross  { top: 50%; left: 0; right: 0; height: 26px; transform: translateY(-50%); }

.stretcher-canvas-back {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 28px;
}
.stretcher-seal {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(138, 109, 59, .9);
    color: #fff;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
}
.seal-mark { font-family: var(--font-serif); font-weight: 700; font-size: 1.1rem; }
.seal-text { font-size: .625rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }

.stretcher-inscription {
    align-self: center;
    text-align: center;
    background: rgba(255, 255, 255, .7);
    backdrop-filter: blur(4px);
    padding: 16px 24px;
    border-radius: 4px;
    border: 1px dashed rgba(0, 0, 0, .2);
}
.insc-title { font-family: var(--font-serif); font-size: 1.25rem; font-style: italic; color: #1E2024; margin: 0 0 4px; }
.insc-meta { font-size: .75rem; color: #4A4E56; margin: 0 0 6px; }
.insc-signature { font-family: var(--font-serif); font-size: 1.1rem; color: #1E2024; margin: 0 0 2px; }
.insc-archival { font-size: .5625rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #9A8150; margin: 0; }

/* 38mm Gallery Wrapped Edges */
.canvas-face--left {
    width: 38px;
    transform: rotateY(-90deg) translateZ(19px);
    left: -19px;
    background: #8A7E70;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, .3);
}
.canvas-face--right {
    width: 38px;
    transform: rotateY(90deg) translateZ(calc(100% - 19px));
    right: -19px;
    background: #8A7E70;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, .3);
}
.canvas-face--top {
    height: 38px;
    transform: rotateX(90deg) translateZ(19px);
    top: -19px;
    background: #A09485;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, .2);
}
.canvas-face--bottom {
    height: 38px;
    transform: rotateX(-90deg) translateZ(calc(100% - 19px));
    bottom: -19px;
    background: #6D6357;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, .4);
}

/* 3D Orbit Presets & Controls */
.canvas-3d-presets {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}
.preset-btn {
    padding: 6px 14px;
    font-family: var(--font-sans);
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .08em;
    border-radius: 999px;
    background: var(--white);
    border: 1px solid var(--chalk);
    color: var(--stone);
    cursor: pointer;
    transition: all .2s ease;
}
.preset-btn:hover { border-color: var(--slate); color: var(--ink); }
.preset-btn.is-active {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}
.canvas-3d-hint {
    font-size: .88rem;
    color: var(--fog);
    text-align: center;
    margin-top: 12px;
}

/* Dynamic Specular Reflex on 2D Figure */
.canvas-glaze-reflex {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at var(--glaze-x, 50%) var(--glaze-y, 30%), rgba(255, 255, 255, .32) 0%, rgba(255, 255, 255, 0) 55%);
    mix-blend-mode: overlay;
    transition: opacity .3s ease;
}

/* Shop Under Construction Notices */
.shop-notice-banner {
    max-width: 820px;
    margin: 28px auto 0;
    padding: 16px 24px;
    background: #FAF8F2;
    border: 1px solid rgba(196, 170, 120, .45);
    border-radius: 8px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    text-align: left;
    box-shadow: 0 4px 16px rgba(14, 16, 18, .04);
}
.shop-notice-tag {
    flex-shrink: 0;
    padding: 4px 10px;
    font-size: .5625rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    background: #141619;
    color: #C4AA78;
    border-radius: 4px;
    margin-top: 2px;
}
.shop-notice-body {
    flex: 1;
}
.shop-notice-title {
    display: block;
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 4px;
}
.shop-notice-desc {
    font-size: .8125rem;
    line-height: 1.55;
    color: var(--slate);
    margin: 0;
}
.artwork-shop-notice {
    background: #FAF8F2;
    border: 1px solid rgba(196, 170, 120, .4);
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 16px;
    text-align: left;
}
.artwork-shop-notice .shop-notice-tag {
    display: inline-block;
    margin-bottom: 6px;
}
.artwork-shop-notice .shop-notice-text {
    font-size: .78rem;
    color: var(--slate);
    margin: 0;
    line-height: 1.45;
}

/* --------------------------------------------------------------------------
   3. 🏛️ 3D Infinite Depth Perspective Corridor (gallery.php)
   -------------------------------------------------------------------------- */
.gallery-mode-toggles {
    display: flex;
    align-items: center;
    gap: 8px;
}
.gallery-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-family: var(--font-sans);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    border-radius: 999px;
    background: var(--bone);
    border: 1px solid var(--chalk);
    color: var(--stone);
    cursor: pointer;
    transition: all .2s ease;
}
.gallery-view-btn:hover { border-color: var(--slate); color: var(--ink); }
.gallery-view-btn.is-active {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}

.gallery-3d-corridor {
    position: relative;
    width: 100%;
    height: 80vh;
    min-height: 560px;
    max-height: 840px;
    background: radial-gradient(ellipse at 50% 40%, #16181D 0%, #0A0B0D 100%);
    border: 1px solid rgba(196, 170, 120, .3);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 60px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
    cursor: grab;
    user-select: none;
    outline: none;
}
.gallery-3d-corridor:active {
    cursor: grabbing;
}
.corridor-viewport {
    position: relative;
    width: 100%;
    height: 100%;
    perspective: 900px;
    perspective-origin: 50% 48%;
    overflow: hidden;
    transform-style: preserve-3d;
}
.corridor-tunnel {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
}
.corridor-floor {
    position: absolute;
    bottom: 0;
    left: -100%;
    right: -100%;
    height: 3000px;
    background: linear-gradient(to top, rgba(20, 22, 26, .98) 0%, rgba(8, 9, 11, 1) 100%);
    transform: rotateX(90deg) translateZ(-280px);
    border-top: 1px solid rgba(196, 170, 120, .15);
}
.corridor-floor-grid {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(196, 170, 120, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(196, 170, 120, .08) 1px, transparent 1px);
    background-size: 80px 80px;
}
.corridor-ceiling {
    position: absolute;
    top: 0;
    left: -100%;
    right: -100%;
    height: 3000px;
    background: linear-gradient(to bottom, #07080A, #121418);
    transform: rotateX(-90deg) translateZ(-280px);
    border-bottom: 1px solid rgba(255, 255, 255, .04);
}
.corridor-wall--left {
    position: absolute;
    top: -100%;
    bottom: -100%;
    left: 0;
    width: 3000px;
    background: linear-gradient(to right, #1A1D24 0%, #0D0E12 100%);
    transform: rotateY(90deg) translateZ(-420px);
    border-right: 1px solid rgba(196, 170, 120, .12);
}
.corridor-wall--right {
    position: absolute;
    top: -100%;
    bottom: -100%;
    right: 0;
    width: 3000px;
    background: linear-gradient(to left, #1A1D24 0%, #0D0E12 100%);
    transform: rotateY(-90deg) translateZ(-420px);
    border-left: 1px solid rgba(196, 170, 120, .12);
}

.corridor-pieces-track {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transform: translateZ(0px);
}
.corridor-hanging {
    position: absolute;
    top: 50%;
    width: 320px;
    cursor: pointer;
    transform-style: preserve-3d;
    transition: filter .25s ease;
}
.corridor-hanging--left {
    left: 12%;
    transform: translateY(-50%) translateZ(var(--hang-z, 0px)) rotateY(22deg);
}
.corridor-hanging--right {
    right: 12%;
    transform: translateY(-50%) translateZ(var(--hang-z, 0px)) rotateY(-22deg);
}
.corridor-hanging:hover {
    filter: brightness(1.2);
}
.corridor-spotlight {
    position: absolute;
    top: -120px;
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    height: 160px;
    background: radial-gradient(ellipse at 50% 0%, rgba(252, 210, 105, .32) 0%, rgba(252, 210, 105, 0) 75%);
    pointer-events: none;
}
.corridor-frame {
    background: #181A1E;
    border: 1px solid rgba(196, 170, 120, .35);
    border-radius: 6px;
    padding: 12px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, .85), 0 0 30px rgba(196, 170, 120, .12);
    display: flex;
    flex-direction: column;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.corridor-hanging:hover .corridor-frame {
    transform: scale(1.04);
    border-color: #C4AA78;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .95), 0 0 50px rgba(196, 170, 120, .35);
}
.corridor-img-wrap {
    width: 100%;
    height: 280px;
    overflow: hidden;
    background: #0A0B0D;
    border-radius: 3px;
}
.corridor-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.corridor-hanging:hover .corridor-img-wrap img {
    transform: scale(1.05);
}
.corridor-hanging-plaque {
    padding-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-top: 1px solid rgba(196, 170, 120, .2);
    margin-top: 10px;
}

/* Corridor HUD */
.corridor-hud {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px 28px 20px;
    background: linear-gradient(to top, rgba(10, 11, 13, .95) 0%, rgba(10, 11, 13, 0) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    pointer-events: none;
    z-index: 20;
}
.corridor-station-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 18px;
    border-radius: 999px;
    background: rgba(18, 20, 24, .92);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(196, 170, 120, .35);
    pointer-events: auto;
    box-shadow: 0 8px 20px rgba(0,0,0,.4);
}
.badge-station {
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #C4AA78;
}
.badge-title {
    font-family: var(--font-serif);
    font-size: .95rem;
    color: #FFFFFF;
    font-weight: 400;
}
.corridor-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    pointer-events: auto;
}
.corridor-nav-btn {
    padding: 8px 18px;
    font-family: var(--font-sans);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    border-radius: 999px;
    background: #141619;
    border: 1px solid rgba(196, 170, 120, .4);
    color: #C4AA78;
    cursor: pointer;
    transition: all .2s ease;
}
.corridor-nav-btn:hover {
    background: #C4AA78;
    color: #141619;
    border-color: #C4AA78;
    transform: translateY(-2px);
}
.corridor-tip {
    color: rgba(255, 255, 255, .6);
    font-size: .78rem;
    margin: 0;
    text-align: center;
}

/* --------------------------------------------------------------------------
   4. 🔬 3D Geological Mineral Strata Explorer (index.php)
   -------------------------------------------------------------------------- */

/* ==========================================================================
   XVIII. Ogham Transliterator & Photorealistic Stone Carving Studio
   ========================================================================== */

.ogham-page {
    background: var(--snow);
    min-height: 100vh;
    padding-bottom: 120px;
}

.ogham-hero {
    padding: calc(var(--header-height) + 54px) var(--gutter) 48px;
    border-bottom: 1px solid var(--chalk);
    text-align: center;
}
.ogham-hero-inner {
    max-width: 840px;
    margin: 0 auto;
}
.ogham-hero .crumbs {
    justify-content: center;
    margin-bottom: 20px;
}

/* Workbench Card */
/* The previous build left this rule unclosed, so the card below was read as a
   nested descendant and these declarations — a header row for an element that
   does not exist in the markup — were absorbed into the section wrapper. The
   rule is closed and the orphaned declarations dropped. */
.ogham-workbench-section {
    max-width: 1200px;
    margin: 48px auto 100px;
    padding: 0 var(--gutter);
}
.ogham-workbench-card {
    background: var(--white);
    border: 1px solid var(--chalk);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(14, 16, 18, .06);
    padding: 36px;
}
.toolbar-group {
    display: flex;
    align-items: center;
    gap: 12px;
}
.toolbar-label {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--stone);
}
.trans-select {
    padding: 8px 16px;
    font-family: var(--font-sans);
    font-size: .8125rem;
    color: var(--ink);
    background: var(--bone);
    border: 1px solid var(--chalk);
    border-radius: 6px;
    outline: none;
    cursor: pointer;
    transition: border-color .2s ease;
}
.trans-select:focus {
    border-color: var(--slate);
}

.toolbar-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}
.toggle-control {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .78rem;
    font-weight: 500;
    color: var(--slate);
    cursor: pointer;
    user-select: none;
}
.toggle-control input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.toggle-box {
    width: 16px;
    height: 16px;
    border: 1px solid var(--chalk);
    border-radius: 3px;
    background: var(--bone);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .2s ease;
}
.toggle-control input:checked + .toggle-box {
    background: var(--ink);
    border-color: var(--ink);
}
.toggle-control input:checked + .toggle-box::after {
    content: "✓";
    font-size: .65rem;
    color: #fff;
    font-weight: bold;
}

/* Split Grid */
.transliterator-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-bottom: 40px;
}
@media (max-width: 900px) {
    .transliterator-grid { grid-template-columns: 1fr; }
}

.trans-pane {
    display: flex;
    flex-direction: column;
    background: var(--bone);
    border: 1px solid var(--chalk);
    border-radius: 8px;
    padding: 20px;
}
.pane-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.pane-title {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--stone);
}
.pane-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.pane-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    font-family: var(--font-sans);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .06em;
    border-radius: 4px;
    background: var(--white);
    border: 1px solid var(--chalk);
    color: var(--stone);
    cursor: pointer;
    transition: all .2s ease;
}
.pane-action-btn:hover {
    border-color: var(--slate);
    color: var(--ink);
}
.pane-action-btn--gold {
    background: #141619;
    border-color: #141619;
    color: #C4AA78;
}
.pane-action-btn--gold:hover {
    background: #9A8150;
    border-color: #9A8150;
    color: #fff;
}

/* Input Area */
.trans-textarea {
    width: 100%;
    min-height: 140px;
    background: var(--white);
    border: 1px solid var(--chalk);
    border-radius: 6px;
    padding: 16px;
    font-family: var(--font-sans);
    font-size: 1.15rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink);
    resize: vertical;
    outline: none;
    transition: border-color .2s ease;
}
.trans-textarea:focus {
    border-color: #9A8150;
}
.input-char-count {
    font-size: .6875rem;
    color: var(--fog);
    text-align: right;
    margin-top: 6px;
}

/* Formula Chips */
.formula-chips-wrap {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed var(--chalk);
}
.formula-label {
    font-size: .6875rem;
    font-weight: 600;
    color: var(--stone);
    display: block;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.formula-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.formula-chip {
    padding: 4px 10px;
    font-size: .6875rem;
    font-weight: 500;
    border-radius: 999px;
    background: var(--white);
    border: 1px solid var(--chalk);
    color: var(--slate);
    cursor: pointer;
    transition: all .2s ease;
}
.formula-chip:hover {
    border-color: #9A8150;
    color: #9A8150;
    background: #FAF8F2;
}

/* Result Output Box */
.ogham-result-box {
    position: relative;
    width: 100%;
    min-height: 140px;
    background: #141619;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 6px;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-x: auto;
    overflow-y: hidden;
}
.ogham-text-display {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    letter-spacing: .08em;
    color: #C4AA78;
    text-shadow: 0 0 12px rgba(196, 170, 120, .6), 0 0 24px rgba(138, 109, 59, .35);
    white-space: nowrap;
    user-select: all;
    line-height: 1.2;
}

/* Breakdown Summary Bar */
.ogham-breakdown-summary {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed var(--chalk);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.summary-kicker {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #9A8150;
}
.summary-details {
    font-size: .75rem;
    color: var(--stone);
    font-family: var(--font-sans);
    font-weight: 500;
}

/* ==========================================================================
   XIX. Celtic Birth Tree & 13-Moon Calendar Studio
   ========================================================================== */

.tree-calendar-page {
    background: var(--snow);
    min-height: 100vh;
    padding-bottom: 120px;
}

.tree-hero {
    padding: calc(var(--header-height) + 54px) var(--gutter) 48px;
    background: linear-gradient(180deg, #F3F1EC 0%, var(--snow) 100%);
    border-bottom: 1px solid var(--chalk);
    text-align: center;
}
.tree-hero-inner {
    max-width: 860px;
    margin: 0 auto;
}
.tree-hero .crumbs {
    justify-content: center;
    margin-bottom: 20px;
}

/* Calculator Section */
.tree-calculator-section {
    max-width: 1200px;
    margin: 48px auto 90px;
    padding: 0 var(--gutter);
}

.tree-calc-card {
    background: var(--white);
    border: 1px solid var(--chalk);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(14, 16, 18, .06);
    padding: 36px;
}

/* Input Controls */
.tree-calc-controls {
    padding-bottom: 28px;
    border-bottom: 1px solid var(--chalk);
    margin-bottom: 32px;
}
.calc-inputs-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}
.calc-label {
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink);
}
.date-selects-wrap {
    display: flex;
    gap: 10px;
}
.tree-date-select {
    padding: 10px 18px;
    font-family: var(--font-sans);
    font-size: .9375rem;
    font-weight: 500;
    color: var(--ink);
    background: var(--bone);
    border: 1px solid var(--chalk);
    border-radius: 6px;
    outline: none;
    cursor: pointer;
    transition: all .2s ease;
}
.tree-date-select:focus {
    border-color: #9A8150;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(138, 109, 59, .15);
}

/* Festival Chips */
.tree-festival-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.festival-chips-label {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--stone);
}
.festival-chips-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.festival-chip {
    padding: 4px 12px;
    font-size: .6875rem;
    font-weight: 500;
    border-radius: 999px;
    background: var(--bone);
    border: 1px solid var(--chalk);
    color: var(--slate);
    cursor: pointer;
    transition: all .2s ease;
}
.festival-chip:hover {
    border-color: #9A8150;
    color: #9A8150;
    background: #FAF8F2;
}

/* Talisman Stage (Split Card) */
.tree-talisman-stage {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 32px;
    align-items: stretch;
}
@media (max-width: 960px) {
    .tree-talisman-stage {
        grid-template-columns: 1fr;
    }
}

/* Left: Identity Card */
.tree-identity-card {
    background: var(--bone);
    border: 1px solid var(--chalk);
    border-radius: 10px;
    padding: 32px;
    display: flex;
    flex-direction: column;
}
.tree-card-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--chalk);
    margin-bottom: 20px;
}
.tree-rune-glow {
    font-family: var(--font-serif);
    font-size: 3.5rem;
    line-height: 1;
    color: #C4AA78;
    text-shadow: 0 0 16px rgba(196, 170, 120, .6), 0 0 30px rgba(138, 109, 59, .3);
    background: #141619;
    padding: 12px 18px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .1);
}
.tree-titles {
    flex: 1;
}
.tree-moon-epoch {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #9A8150;
    display: block;
    margin-bottom: 4px;
}
.tree-name-heading {
    font-family: var(--font-serif);
    font-size: 1.85rem;
    font-weight: 400;
    color: var(--ink);
    margin: 0 0 6px;
    line-height: 1.15;
}
.tree-archetype-badge {
    display: inline-block;
    font-size: .75rem;
    font-weight: 600;
    color: var(--slate);
    background: var(--white);
    padding: 3px 10px;
    border-radius: 4px;
    border: 1px solid var(--chalk);
}

/* Kenning Banner */
.tree-kenning-banner {
    background: #FAF8F2;
    border-left: 1px solid var(--gold);
    padding: 14px 18px;
    border-radius: 0 6px 6px 0;
    margin-bottom: 24px;
    position: relative;
}
.kenning-quote-mark {
    display: none;
}
.kenning-text {
    font-size: .9375rem;
    color: #5A4E38;
    margin: 0;
    line-height: 1.45;
}

/* Attributes Grid */
.tree-attributes-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 24px;
}
.tree-attr-item {
    background: var(--white);
    border: 1px solid var(--chalk);
    border-radius: 6px;
    padding: 12px 14px;
}
.attr-label {
    display: block;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--stone);
    margin-bottom: 2px;
}
.attr-val {
    font-size: .8125rem;
    color: var(--ink);
}

/* Lore Body */
.tree-lore-body {
    flex: 1;
    margin-bottom: 24px;
}
.lore-subhead {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--stone);
    margin: 0 0 8px;
}
.lore-text {
    font-size: .875rem;
    line-height: 1.6;
    color: var(--slate);
    margin: 0;
}

/* Action Bar */
.tree-talisman-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 20px;
    border-top: 1px solid var(--chalk);
    margin-top: auto;
}
.tree-act-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-family: var(--font-sans);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    border-radius: 6px;
    background: var(--white);
    border: 1px solid var(--chalk);
    color: var(--slate);
    text-decoration: none;
    cursor: pointer;
    transition: all .2s ease;
}
.tree-act-btn:hover {
    border-color: var(--slate);
    color: var(--ink);
    transform: translateY(-1px);
}
.tree-act-btn--gold {
    background: #141619;
    border-color: #141619;
    color: #C4AA78;
}
.tree-act-btn--gold:hover {
    background: #9A8150;
    border-color: #9A8150;
    color: #fff;
}

/* Right: Artwork Card */
.tree-artwork-card {
    background: var(--white);
    border: 1px solid var(--chalk);
    border-radius: 10px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 24px rgba(14, 16, 18, .04);
}
.artwork-match-badge {
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #9A8150;
}
.artwork-collection-tag {
    font-size: .6875rem;
    color: var(--stone);
    font-style: italic;
}

.artwork-preview-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    background: #181A1D;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
}
.art-match-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.artwork-preview-frame:hover .art-match-img {
    transform: scale(1.03);
}
.artwork-matting-overlay {
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, .4);
    pointer-events: none;
}

.artwork-info-pane {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.art-match-title {
    font-family: var(--font-serif);
    font-size: 1.35rem;
    font-weight: 400;
    color: var(--ink);
    margin: 0 0 4px;
}
.art-match-medium {
    font-size: .78rem;
    color: var(--stone);
    margin: 0 0 12px;
}
.art-match-reason {
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--slate);
    margin: 0 0 20px;
}
.art-match-actions {
    display: flex;
    gap: 10px;
    margin-top: auto;
}
.art-btn {
    flex: 1;
    text-align: center;
    padding: 9px 14px;
    font-family: var(--font-sans);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    transition: all .2s ease;
}
.art-btn--solid {
    background: var(--ink);
    color: #fff;
    border: 1px solid var(--ink);
}
.art-btn--solid:hover {
    background: #2D3035;
}
.art-btn--outline {
    background: transparent;
    color: var(--slate);
    border: 1px solid var(--chalk);
}
.art-btn--outline:hover {
    border-color: #9A8150;
    color: #9A8150;
}

/* Almanac Section */
.tree-almanac-section {
    padding: 80px var(--gutter);
    background: var(--bone);
    border-top: 1px solid var(--chalk);
}
.tree-almanac-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    margin-top: 40px;
}
.almanac-card {
    background: var(--white);
    border: 1px solid var(--chalk);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    cursor: pointer;
    transition: all .25s ease;
}
.almanac-card:hover {
    border-color: #9A8150;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(14, 16, 18, .06);
}
.almanac-card.is-active {
    border-color: #9A8150;
    background: #FAF8F2;
    box-shadow: 0 0 0 2px #C4AA78;
}
.almanac-rune {
    font-family: var(--font-serif);
    font-size: 2.2rem;
    color: #9A8150;
    line-height: 1;
    background: #141619;
    padding: 8px 12px;
    border-radius: 6px;
}
.almanac-info {
    flex: 1;
}
.almanac-dates {
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--stone);
    display: block;
    margin-bottom: 2px;
}
.almanac-tree-name {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--ink);
    margin: 0 0 2px;
}
.almanac-archetype {
    display: block;
    font-size: .72rem;
    font-weight: 500;
    color: var(--slate);
    margin-bottom: 4px;
}
.almanac-element {
    font-size: .6875rem;
    color: var(--fog);
    display: block;
}

/* ==========================================================================
   XX. The Celtic Wheel of the Year & Solstice Almanac Studio
   ========================================================================== */

.wheel-page {
    background: var(--snow);
    min-height: 100vh;
    padding-bottom: 120px;
}

.wheel-hero {
    padding: calc(var(--header-height) + 54px) var(--gutter) 48px;
    background: linear-gradient(180deg, #F3F1EC 0%, var(--snow) 100%);
    border-bottom: 1px solid var(--chalk);
    text-align: center;
}
.wheel-hero-inner {
    max-width: 880px;
    margin: 0 auto;
}
.wheel-hero .crumbs {
    justify-content: center;
    margin-bottom: 20px;
}

/* Main Workbench Stage */
.wheel-stage-section {
    max-width: 1240px;
    margin: 48px auto 90px;
    padding: 0 var(--gutter);
}

.wheel-workbench-card {
    background: var(--white);
    border: 1px solid var(--chalk);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(14, 16, 18, .06);
    padding: 36px;
}

/* Live Seasonal Status Bar */
.wheel-live-status-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    background: #141619;
    border-radius: 8px;
    border: 1px solid rgba(196, 170, 120, .3);
    margin-bottom: 32px;
}
.status-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, .08);
    padding: 5px 12px;
    border-radius: 999px;
}
.live-dot {
    width: 8px;
    height: 8px;
    background: #38C757;
    border-radius: 50%;
    box-shadow: 0 0 8px #38C757;
    animation: livePulse 2s infinite;
}
@keyframes livePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .4; transform: scale(0.85); }
}
.live-title {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #C4AA78;
}
.status-meta-text {
    flex: 1;
    min-width: 240px;
    display: flex;
    flex-direction: column;
}
.status-season-name {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    color: #FFF;
}
.status-countdown {
    font-size: .75rem;
    color: rgba(255, 255, 255, .65);
}
.wheel-quick-btn {
    padding: 6px 14px;
    font-family: var(--font-sans);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: var(--white);
    border: 1px solid var(--chalk);
    color: var(--ink);
    border-radius: 4px;
    cursor: pointer;
    transition: all .2s ease;
}
.wheel-quick-btn:hover {
    background: #C4AA78;
    border-color: #C4AA78;
    color: #141619;
}

/* Interactive Split Grid */
.wheel-interactive-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 40px;
    align-items: center;
}
@media (max-width: 960px) {
    .wheel-interactive-grid {
        grid-template-columns: 1fr;
    }
}

/* Dial Pane */
.wheel-dial-pane {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.wheel-svg-container {
    width: 100%;
    max-width: 480px;
    aspect-ratio: 1;
    position: relative;
}
.celestial-dial-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}
.dial-instruction-hint {
    font-size: .8rem;
    color: var(--fog);
    margin-top: 14px;
    text-align: center;
}

/* SVG Node Styles */
.node-aura {
    fill: transparent;
    transition: fill .25s ease;
}
.node-core {
    fill: #1B1E22;
    stroke: #C4AA78;
    stroke-width: 2px;
    transition: all .25s ease;
}
.node-label {
    fill: #9B9487;
    font-size: 11px;
    font-family: -apple-system, BlinkMacSystemFont, "Montserrat", sans-serif;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: fill .25s ease;
}
.dial-node-group:hover .node-core {
    fill: #C4AA78;
    stroke: #FFF;
}
.dial-node-group:hover .node-aura {
    fill: rgba(252, 210, 105, 0.2);
}
.dial-node-group.is-active .node-core {
    fill: #FCD269;
    stroke: #FFFFFF;
    r: 20px;
    filter: drop-shadow(0 0 10px rgba(252, 210, 105, 0.8));
}
.dial-node-group.is-active .node-aura {
    fill: rgba(252, 210, 105, 0.28);
}
.dial-node-group.is-active .node-label {
    fill: #141619;
    font-weight: 700;
}

/* Detail Pane */
.wheel-detail-pane {
    background: var(--bone);
    border: 1px solid var(--chalk);
    border-radius: 10px;
    padding: 32px;
    display: flex;
    flex-direction: column;
}
.festival-header-badge-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.festival-type-tag {
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #9A8150;
    background: #FAF8F2;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid rgba(138, 109, 59, .25);
}
.festival-epoch-tag {
    font-size: .6875rem;
    color: var(--stone);
    font-style: italic;
}
.festival-name {
    font-family: var(--font-serif);
    font-size: 1.85rem;
    font-weight: 400;
    color: var(--ink);
    margin: 0 0 4px;
    line-height: 1.2;
}
.festival-dates {
    font-size: .875rem;
    color: var(--stone);
    margin: 0 0 18px;
}

/* Quote Banner */
.festival-lore-quote {
    background: #FAF8F2;
    border-left: 1px solid var(--gold);
    padding: 14px 18px;
    border-radius: 0 6px 6px 0;
    margin-bottom: 22px;
}
.fest-quote-text {
    font-size: .9375rem;
    color: #5A4E38;
    margin: 0;
    line-height: 1.45;
}

/* Attributes Grid */
.fest-attributes-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 22px;
}
.fest-attr-item {
    background: var(--white);
    border: 1px solid var(--chalk);
    border-radius: 6px;
    padding: 10px 12px;
}
.fest-attr-label {
    display: block;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--stone);
    margin-bottom: 2px;
}
.fest-attr-val {
    font-size: .78rem;
    color: var(--ink);
    line-height: 1.3;
}

/* Story Body */
.festival-story-body {
    margin-bottom: 24px;
}
.story-subhead {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--stone);
    margin: 0 0 6px;
}
.story-text {
    font-size: .875rem;
    line-height: 1.6;
    color: var(--slate);
    margin: 0;
}

/* Curated Seasonal Art Card */
.fest-artwork-pairing-card {
    background: var(--white);
    border: 1px solid var(--chalk);
    border-radius: 8px;
    padding: 18px;
    box-shadow: 0 4px 14px rgba(14, 16, 18, .04);
}
.fest-art-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.fest-art-kicker {
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #9A8150;
}
.fest-art-collection {
    font-size: .6875rem;
    color: var(--stone);
    font-style: italic;
}
.fest-art-body {
    display: flex;
    gap: 16px;
    align-items: center;
}
@media (max-width: 600px) {
    .fest-art-body {
        flex-direction: column;
        align-items: flex-start;
    }
}
.fest-art-thumb {
    width: 120px;
    height: 90px;
    flex-shrink: 0;
    border-radius: 4px;
    overflow: hidden;
    background: #141619;
}
.fest-art-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.fest-art-meta {
    flex: 1;
}
.fest-art-title {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-weight: 400;
    color: var(--ink);
    margin: 0 0 2px;
}
.fest-art-medium {
    font-size: .75rem;
    color: var(--stone);
    margin: 0 0 6px;
}
.fest-art-desc {
    font-size: .78rem;
    line-height: 1.45;
    color: var(--slate);
    margin: 0 0 10px;
}
.fest-art-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #9A8150;
    text-decoration: none;
    transition: color .2s ease;
}
.fest-art-link-btn:hover {
    color: var(--ink);
}

/* Almanac Grid */
.wheel-almanac-section {
    padding: 80px var(--gutter);
    background: var(--bone);
    border-top: 1px solid var(--chalk);
}
.wheel-almanac-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    margin-top: 40px;
}
.wheel-card {
    background: var(--white);
    border: 1px solid var(--chalk);
    border-radius: 8px;
    padding: 20px;
    cursor: pointer;
    transition: all .25s ease;
}
.wheel-card:hover {
    border-color: #9A8150;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(14, 16, 18, .06);
}
.wheel-card.is-active {
    border-color: #9A8150;
    background: #FAF8F2;
    box-shadow: 0 0 0 2px #C4AA78;
}
.wheel-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.wheel-card-type {
    font-size: .5625rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #9A8150;
}
.wheel-card-dates {
    font-size: .625rem;
    color: var(--stone);
    font-weight: 600;
}
.wheel-card-title {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    font-weight: 400;
    color: var(--ink);
    margin: 0 0 4px;
}
.wheel-card-epoch {
    font-size: .78rem;
    color: var(--stone);
    margin: 0 0 12px;
}
.wheel-card-meta {
    font-size: .6875rem;
    color: var(--slate);
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 10px;
    border-top: 1px dashed var(--chalk);
}

/* ==========================================================================
   XXI. Prehistoric Petroglyph & Spiral Studio
   ========================================================================== */

.petroglyph-page {
    background: var(--snow);
    min-height: 100vh;
    padding-bottom: 120px;
}

.petroglyph-hero {
    padding: calc(var(--header-height) + 54px) var(--gutter) 48px;
    background: linear-gradient(180deg, #F3F1EC 0%, var(--snow) 100%);
    border-bottom: 1px solid var(--chalk);
    text-align: center;
}
.petroglyph-hero-inner {
    max-width: 880px;
    margin: 0 auto;
}
.petroglyph-hero .crumbs {
    justify-content: center;
    margin-bottom: 20px;
}

/* Main Workbench Stage */
.petroglyph-stage-section {
    max-width: 1240px;
    margin: 48px auto 90px;
    padding: 0 var(--gutter);
}

.petroglyph-workbench-card {
    background: var(--white);
    border: 1px solid var(--chalk);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(14, 16, 18, .06);
    padding: 36px;
}

/* Motif Selector Bar */
.motif-selector-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--chalk);
}
.motif-bar-label {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--stone);
}
.motif-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.motif-chip {
    padding: 6px 14px;
    font-family: var(--font-sans);
    font-size: .75rem;
    font-weight: 600;
    background: var(--bone);
    border: 1px solid var(--chalk);
    border-radius: 999px;
    color: var(--slate);
    cursor: pointer;
    transition: all .2s ease;
}
.motif-chip:hover {
    border-color: #9A8150;
    color: var(--ink);
}
.motif-chip.is-active {
    background: #141619;
    border-color: #141619;
    color: #C4AA78;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}

/* Studio Split Grid */
.petroglyph-studio-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 40px;
    align-items: center;
}
@media (max-width: 960px) {
    .petroglyph-studio-grid {
        grid-template-columns: 1fr;
    }
}

/* Canvas Pane */
.petroglyph-canvas-pane {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.canvas-frame-wrap {
    width: 100%;
    max-width: 500px;
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    background: #101214;
    border: 1px solid rgba(196, 170, 120, .3);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .35), inset 0 0 40px rgba(0, 0, 0, .6);
    position: relative;
}
#petroglyph-canvas {
    width: 100%;
    height: 100%;
    display: block;
}
.canvas-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
    width: 100%;
    max-width: 500px;
    justify-content: center;
}
.canvas-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-family: var(--font-sans);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: var(--bone);
    border: 1px solid var(--chalk);
    color: var(--ink);
    border-radius: 6px;
    cursor: pointer;
    transition: all .2s ease;
}
.canvas-btn:hover {
    background: var(--white);
    border-color: #9A8150;
    transform: translateY(-1px);
}
.canvas-btn--gold {
    background: #141619;
    color: #C4AA78;
    border-color: rgba(196, 170, 120, .4);
}
.canvas-btn--gold:hover {
    background: #C4AA78;
    color: #141619;
    border-color: #C4AA78;
}

/* Controls Pane */
.petroglyph-controls-pane {
    background: var(--bone);
    border: 1px solid var(--chalk);
    border-radius: 10px;
    padding: 32px;
    display: flex;
    flex-direction: column;
}
.controls-header {
    margin-bottom: 22px;
}
.controls-kicker {
    display: block;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #9A8150;
    margin-bottom: 4px;
}
.controls-title {
    font-family: var(--font-serif);
    font-size: 1.85rem;
    font-weight: 400;
    color: var(--ink);
    margin: 0 0 6px;
    line-height: 1.2;
}
.controls-desc {
    font-size: .875rem;
    color: var(--slate);
    margin: 0;
    line-height: 1.5;
}

/* Sliders Group */
.sliders-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
    background: var(--white);
    border: 1px solid var(--chalk);
    border-radius: 8px;
    padding: 18px 20px;
}
.slider-control {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.slider-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.slider-label {
    font-size: .75rem;
    font-weight: 600;
    color: var(--ink);
}
.slider-val {
    font-size: .75rem;
    color: #9A8150;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.petro-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: #E5E0D5;
    outline: none;
}
.petro-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #C4AA78;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
    transition: transform .15s ease;
}
.petro-range::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

/* Material Finish Options */
.material-finish-box {
    margin-bottom: 24px;
}
.finish-label {
    display: block;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--stone);
    margin-bottom: 8px;
}
.finish-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 8px;
}
.finish-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--white);
    border: 1px solid var(--chalk);
    border-radius: 6px;
    font-family: var(--font-sans);
    font-size: .72rem;
    font-weight: 600;
    color: var(--slate);
    cursor: pointer;
    transition: all .2s ease;
}
.finish-btn:hover {
    border-color: #9A8150;
    color: var(--ink);
}
.finish-btn.is-active {
    border-color: #9A8150;
    background: #FAF8F2;
    box-shadow: 0 0 0 2px #C4AA78;
    color: var(--ink);
}
.swatch {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.swatch--gold { background: linear-gradient(135deg, #FFF2C2 0%, #C4AA78 100%); }
.swatch--chiseled { background: linear-gradient(135deg, #E6E8EB 0%, #626873 100%); }
.swatch--ochre { background: linear-gradient(135deg, #FFE6CC 0%, #B8581B 100%); }
.swatch--silver { background: linear-gradient(135deg, #FFFFFF 0%, #8EAFCE 100%); }

/* Art Pairing Card */
.petro-art-pairing-card {
    background: var(--white);
    border: 1px solid var(--chalk);
    border-radius: 8px;
    padding: 16px;
}
.petro-art-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.petro-art-kicker {
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #9A8150;
}
.petro-art-coll {
    font-size: .6875rem;
    color: var(--stone);
    font-style: italic;
}
.petro-art-body {
    display: flex;
    gap: 14px;
    align-items: center;
}
.petro-art-thumb {
    width: 80px;
    height: 60px;
    flex-shrink: 0;
    border-radius: 4px;
    overflow: hidden;
    background: #141619;
}
.petro-art-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.petro-art-info {
    flex: 1;
}
.petro-art-title {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-weight: 400;
    color: var(--ink);
    margin: 0 0 2px;
}
.petro-art-medium {
    font-size: .72rem;
    color: var(--stone);
    margin: 0 0 6px;
}
.petro-art-link {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #9A8150;
    text-decoration: none;
}
.petro-art-link:hover {
    color: var(--ink);
}

/* Almanac Grid */
.petro-almanac-section {
    padding: 80px var(--gutter);
    background: var(--bone);
    border-top: 1px solid var(--chalk);
}
.petro-almanac-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    margin-top: 40px;
}
.petro-card {
    background: var(--white);
    border: 1px solid var(--chalk);
    border-radius: 8px;
    padding: 20px;
    cursor: pointer;
    transition: all .25s ease;
}
.petro-card:hover {
    border-color: #9A8150;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(14, 16, 18, .06);
}
.petro-card.is-active {
    border-color: #9A8150;
    background: #FAF8F2;
    box-shadow: 0 0 0 2px #C4AA78;
}
.petro-card-head {
    margin-bottom: 6px;
}
.petro-card-origin {
    font-size: .5625rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #9A8150;
}
.petro-card-title {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-weight: 400;
    color: var(--ink);
    margin: 0 0 4px;
}
.petro-card-meaning {
    font-size: .78rem;
    color: var(--slate);
    line-height: 1.45;
    margin: 0 0 10px;
}
.petro-card-coll {
    font-size: .6875rem;
    color: var(--stone);
    display: block;
    padding-top: 8px;
    border-top: 1px dashed var(--chalk);
}

/* ==========================================================================
   XXII. Celtic Sacred Beast Quiz
   ========================================================================== */

.totem-page {
    background: var(--snow);
    min-height: 100vh;
    padding-bottom: 120px;
}
.totem-hero {
    padding: calc(var(--header-height) + 54px) var(--gutter) 48px;
    background: linear-gradient(180deg, #F3F1EC 0%, var(--snow) 100%);
    border-bottom: 1px solid var(--chalk);
    text-align: center;
}
.totem-hero-inner {
    max-width: 880px;
    margin: 0 auto;
}
.totem-hero .crumbs {
    justify-content: center;
    margin-bottom: 20px;
}
.totem-stage-section {
    max-width: 1100px;
    margin: 48px auto 90px;
    padding: 0 var(--gutter);
}
.totem-workbench-card {
    background: var(--white);
    border: 1px solid var(--chalk);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(14, 16, 18, .06);
    padding: 40px;
}

/* Quiz Flow Container */
.totem-quiz-container {
    max-width: 760px;
    margin: 0 auto;
}
.quiz-progress-bar {
    width: 100%;
    height: 4px;
    background: #EAE6DC;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 24px;
}
.quiz-progress-fill {
    height: 100%;
    background: #C4AA78;
    transform-origin: left center;
    transform: scaleX(0);
    width: 100%;
    transition: transform .3s var(--ease-out);
}
.quiz-step-header {
    text-align: center;
    margin-bottom: 32px;
}
.quiz-step-num {
    display: block;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #9A8150;
    margin-bottom: 8px;
}
.quiz-question-title {
    font-family: var(--font-serif);
    font-size: 1.85rem;
    font-weight: 400;
    color: var(--ink);
    margin: 0;
    line-height: 1.25;
}
.quiz-options-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}
.quiz-option-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    background: var(--bone);
    border: 1px solid var(--chalk);
    border-radius: 8px;
    font-family: var(--font-sans);
    font-size: .9375rem;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    transition: all .2s ease;
}
.quiz-option-card:hover {
    background: #FAF8F2;
    border-color: #C4AA78;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(14, 16, 18, .06);
}
.opt-arrow {
    color: #9A8150;
    font-weight: 700;
    transition: transform .2s ease;
}
.quiz-option-card:hover .opt-arrow {
    transform: translateX(4px);
}
.quiz-nav-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
}
.quiz-back-btn {
    background: none;
    border: none;
    font-size: .75rem;
    font-weight: 600;
    color: var(--stone);
    cursor: pointer;
}
.quiz-hint-text {
    font-size: .75rem;
    color: var(--fog);
}

/* Result Card */
.totem-result-header {
    text-align: center;
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--chalk);
}
.totem-badge-kicker {
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: #9A8150;
    display: block;
    margin-bottom: 6px;
}
.totem-title {
    font-family: var(--font-serif);
    font-size: 2.2rem;
    font-weight: 400;
    color: var(--ink);
    margin: 0 0 4px;
}
.totem-archetype {
    font-size: .9375rem;
    color: var(--stone);
    margin: 0;
}
.totem-card-split {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 36px;
    align-items: center;
}
@media (max-width: 800px) {
    .totem-card-split { grid-template-columns: 1fr; }
}
.totem-emblem-wrap {
    background: #141619;
    border: 1px solid rgba(196, 170, 120, .35);
    border-radius: 12px;
    padding: 32px 20px;
    text-align: center;
    margin-bottom: 20px;
    box-shadow: 0 12px 30px rgba(0,0,0,.2);
}
.totem-large-icon {
    font-size: 5rem;
    display: block;
    margin-bottom: 12px;
}
.totem-ogham-rune {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    color: #C4AA78;
    display: block;
}
.totem-traits-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.trait-item {
    background: var(--bone);
    border: 1px solid var(--chalk);
    border-radius: 6px;
    padding: 10px 14px;
}
.trait-label {
    display: block;
    font-size: .5625rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--stone);
    margin-bottom: 2px;
}
.trait-val {
    font-size: .8rem;
    color: var(--ink);
}
.totem-story-box {
    background: #FAF8F2;
    border-left: 1px solid var(--gold);
    padding: 16px 20px;
    border-radius: 0 8px 8px 0;
    margin-bottom: 24px;
}
.story-heading {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #9A8150;
    margin: 0 0 6px;
}
.story-desc {
    font-size: .875rem;
    line-height: 1.6;
    color: #5A4E38;
    margin: 0;
}
.totem-art-pairing {
    display: flex;
    gap: 16px;
    align-items: center;
    background: var(--bone);
    border: 1px solid var(--chalk);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 24px;
}
.totem-art-thumb {
    width: 90px;
    height: 70px;
    flex-shrink: 0;
    border-radius: 4px;
    overflow: hidden;
    background: #141619;
}
.totem-art-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.totem-art-info { flex: 1; }
.art-pair-kicker {
    font-size: .5625rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #9A8150;
    display: block;
}
.art-pair-title {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--ink);
    margin: 2px 0;
}
.art-pair-medium {
    font-size: .72rem;
    color: var(--stone);
    margin: 0 0 4px;
}
.totem-art-link {
    font-size: .6875rem;
    font-weight: 600;
    color: #9A8150;
    text-decoration: none;
}
.totem-action-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.totem-act-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-family: var(--font-sans);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: var(--bone);
    border: 1px solid var(--chalk);
    border-radius: 6px;
    color: var(--ink);
    cursor: pointer;
    transition: all .2s ease;
}
.totem-act-btn--gold {
    background: #141619;
    border-color: rgba(196, 170, 120, .4);
    color: #C4AA78;
}
.totem-act-btn--gold:hover {
    background: #C4AA78;
    color: #141619;
    border-color: #C4AA78;
}

/* Almanac Bestiary Grid */
.totem-almanac-section {
    padding: 80px var(--gutter);
    background: var(--bone);
    border-top: 1px solid var(--chalk);
}
.totem-almanac-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    margin-top: 40px;
}
.totem-card {
    background: var(--white);
    border: 1px solid var(--chalk);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    gap: 16px;
    align-items: center;
    cursor: pointer;
    transition: all .25s ease;
}
.totem-card:hover {
    border-color: #9A8150;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(14, 16, 18, .06);
}
.totem-card-icon {
    font-size: 2.2rem;
    background: #141619;
    padding: 10px;
    border-radius: 8px;
}
.totem-card-body { flex: 1; }
.totem-card-gaelic {
    font-size: .5625rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #9A8150;
    display: block;
}
.totem-card-name {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-weight: 400;
    color: var(--ink);
    margin: 2px 0;
}
.totem-card-arch {
    font-size: .72rem;
    color: var(--stone);
    margin: 0 0 4px;
}
.totem-card-ogham {
    font-size: .6875rem;
    color: var(--fog);
}

/* ==========================================================================
   XXIII. Megalithic Solstice Sunbeam Simulator
   ========================================================================== */

.solstice-page {
    background: var(--snow);
    min-height: 100vh;
    padding-bottom: 120px;
}
.solstice-hero {
    padding: calc(var(--header-height) + 54px) var(--gutter) 48px;
    background: linear-gradient(180deg, #F3F1EC 0%, var(--snow) 100%);
    border-bottom: 1px solid var(--chalk);
    text-align: center;
}
.solstice-hero-inner {
    max-width: 880px;
    margin: 0 auto;
}
.solstice-hero .crumbs {
    justify-content: center;
    margin-bottom: 20px;
}
.solstice-stage-section {
    max-width: 1240px;
    margin: 48px auto 90px;
    padding: 0 var(--gutter);
}
.solstice-workbench-card {
    background: var(--white);
    border: 1px solid var(--chalk);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(14, 16, 18, .06);
    padding: 36px;
}
.solstice-season-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--chalk);
}
.season-bar-label {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--stone);
}
.season-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.season-chip {
    padding: 6px 14px;
    font-family: var(--font-sans);
    font-size: .75rem;
    font-weight: 600;
    background: var(--bone);
    border: 1px solid var(--chalk);
    border-radius: 999px;
    color: var(--slate);
    cursor: pointer;
    transition: all .2s ease;
}
.season-chip:hover {
    border-color: #9A8150;
    color: var(--ink);
}
.season-chip.is-active {
    background: #141619;
    border-color: #141619;
    color: #C4AA78;
}
.solstice-studio-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 40px;
    align-items: center;
}
@media (max-width: 960px) {
    .solstice-studio-grid { grid-template-columns: 1fr; }
}
.solstice-canvas-wrap {
    width: 100%;
    aspect-ratio: 16/10;
    border-radius: 10px;
    overflow: hidden;
    background: #0B0D11;
    border: 1px solid rgba(196, 170, 120, .3);
    box-shadow: 0 16px 40px rgba(0,0,0,.35);
}
#solstice-canvas {
    width: 100%;
    height: 100%;
    display: block;
}
.solstice-playback-bar {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}
.solstice-play-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    background: #141619;
    border: 1px solid rgba(196, 170, 120, .4);
    border-radius: 6px;
    color: #C4AA78;
    font-family: var(--font-sans);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .2s ease;
}
.solstice-play-btn:hover {
    background: #C4AA78;
    color: #141619;
    border-color: #C4AA78;
}
.solstice-quick-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--bone);
    border: 1px solid var(--chalk);
    border-radius: 6px;
    font-family: var(--font-sans);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink);
    cursor: pointer;
    transition: all .2s ease;
}
.solstice-controls-pane {
    background: var(--bone);
    border: 1px solid var(--chalk);
    border-radius: 10px;
    padding: 30px;
}
.telemetry-kicker {
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #9A8150;
    display: block;
    margin-bottom: 4px;
}
.telemetry-title {
    font-family: var(--font-serif);
    font-size: 1.85rem;
    font-weight: 400;
    color: var(--ink);
    margin: 0 0 4px;
}
.telemetry-status {
    font-size: .875rem;
    color: #C4AA78;
    margin: 0 0 20px;
}
.time-slider-box {
    background: var(--white);
    border: 1px solid var(--chalk);
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 20px;
}
.time-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.time-label {
    font-size: .75rem;
    font-weight: 600;
    color: var(--ink);
}
.time-val {
    font-size: .8rem;
    color: #9A8150;
}
.solstice-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: #E5E0D5;
    outline: none;
}
.solstice-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #C4AA78;
    cursor: pointer;
}
.time-ticks {
    display: flex;
    justify-content: space-between;
    font-size: .625rem;
    color: var(--stone);
    margin-top: 6px;
}
.telemetry-metrics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
}
.metric-card {
    background: var(--white);
    border: 1px solid var(--chalk);
    border-radius: 6px;
    padding: 10px 12px;
}
.metric-label {
    display: block;
    font-size: .5625rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--stone);
    margin-bottom: 2px;
}
.metric-val {
    font-size: .85rem;
    color: var(--ink);
}
.solstice-lore-card {
    background: #FAF8F2;
    border-left: 1px solid var(--gold);
    padding: 14px 18px;
    border-radius: 0 6px 6px 0;
    margin-bottom: 20px;
}
.lore-heading {
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #9A8150;
    margin: 0 0 4px;
}
.lore-desc {
    font-size: .8125rem;
    line-height: 1.5;
    color: #5A4E38;
    margin: 0;
}
.solstice-art-pairing {
    display: flex;
    gap: 14px;
    align-items: center;
    background: var(--white);
    border: 1px solid var(--chalk);
    border-radius: 8px;
    padding: 14px;
}
.solstice-art-thumb {
    width: 80px;
    height: 60px;
    border-radius: 4px;
    overflow: hidden;
    background: #141619;
    flex-shrink: 0;
}
.solstice-art-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.solstice-art-info { flex: 1; }
.art-kicker {
    font-size: .5625rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #9A8150;
    display: block;
}
.art-title {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-weight: 400;
    color: var(--ink);
    margin: 2px 0;
}
.art-medium {
    font-size: .6875rem;
    color: var(--stone);
    margin: 0 0 4px;
}
.art-link {
    font-size: .6875rem;
    font-weight: 600;
    color: #9A8150;
    text-decoration: none;
}

/* ==========================================================================
   XXIV. Insular Celtic Monogram & Initial Illuminator
   ========================================================================== */

.monogram-page {
    background: var(--snow);
    min-height: 100vh;
    padding-bottom: 120px;
}
.monogram-hero {
    padding: calc(var(--header-height) + 54px) var(--gutter) 48px;
    background: linear-gradient(180deg, #F3F1EC 0%, var(--snow) 100%);
    border-bottom: 1px solid var(--chalk);
    text-align: center;
}
.monogram-hero-inner {
    max-width: 880px;
    margin: 0 auto;
}
.monogram-hero .crumbs {
    justify-content: center;
    margin-bottom: 20px;
}
.monogram-stage-section {
    max-width: 1240px;
    margin: 48px auto 90px;
    padding: 0 var(--gutter);
}
.monogram-workbench-card {
    background: var(--white);
    border: 1px solid var(--chalk);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(14, 16, 18, .06);
    padding: 36px;
}
.monogram-studio-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 40px;
    align-items: center;
}
@media (max-width: 960px) {
    .monogram-studio-grid { grid-template-columns: 1fr; }
}
.monogram-canvas-wrap {
    width: 100%;
    max-width: 500px;
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    background: #101214;
    border: 1px solid rgba(196, 170, 120, .3);
    box-shadow: 0 16px 40px rgba(0,0,0,.35);
}
#monogram-canvas {
    width: 100%;
    height: 100%;
    display: block;
}
.canvas-actions-row {
    display: flex;
    gap: 10px;
    margin-top: 18px;
    max-width: 500px;
}
.monogram-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 14px;
    font-family: var(--font-sans);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: var(--bone);
    border: 1px solid var(--chalk);
    border-radius: 6px;
    color: var(--ink);
    cursor: pointer;
    transition: all .2s ease;
}
.monogram-btn--gold {
    background: #141619;
    border-color: rgba(196, 170, 120, .4);
    color: #C4AA78;
}
.monogram-btn--gold:hover {
    background: #C4AA78;
    color: #141619;
    border-color: #C4AA78;
}
.monogram-controls-pane {
    background: var(--bone);
    border: 1px solid var(--chalk);
    border-radius: 10px;
    padding: 32px;
}
.mono-kicker {
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #9A8150;
    display: block;
    margin-bottom: 4px;
}
.mono-title {
    font-family: var(--font-serif);
    font-size: 1.85rem;
    font-weight: 400;
    color: var(--ink);
    margin: 0 0 4px;
}
.mono-desc {
    font-size: .875rem;
    color: var(--slate);
    margin: 0 0 20px;
}
.mono-input-box {
    background: var(--white);
    border: 1px solid var(--chalk);
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 18px;
}
.mono-input-label {
    display: block;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--stone);
    margin-bottom: 8px;
}
.mono-input-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.mono-text-input {
    width: 60px;
    height: 48px;
    font-family: var(--font-serif);
    font-size: 1.6rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    background: var(--bone);
    border: 1px solid var(--chalk);
    border-radius: 6px;
    color: #9A8150;
    outline: none;
}
.mono-text-input:focus {
    border-color: #C4AA78;
    background: #FAF8F2;
}
.quick-initial-chips {
    display: flex;
    gap: 6px;
}
.init-chip {
    width: 34px;
    height: 34px;
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 600;
    background: var(--bone);
    border: 1px solid var(--chalk);
    border-radius: 4px;
    color: var(--slate);
    cursor: pointer;
    transition: all .2s ease;
}
.init-chip:hover {
    border-color: #9A8150;
    color: var(--ink);
}
.mono-sliders-group {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--white);
    border: 1px solid var(--chalk);
    border-radius: 8px;
    padding: 16px 18px;
    margin-bottom: 18px;
}
.slider-label-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}
.slider-title {
    font-size: .75rem;
    font-weight: 600;
    color: var(--ink);
}
.slider-stat {
    font-size: .75rem;
    color: #9A8150;
    font-weight: 700;
}
.mono-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: #E5E0D5;
    outline: none;
}
.mono-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #C4AA78;
    cursor: pointer;
}
.mono-palette-box {
    margin-bottom: 18px;
}
.mono-pal-label {
    display: block;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--stone);
    margin-bottom: 8px;
}
.mono-pal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.mono-pal-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--white);
    border: 1px solid var(--chalk);
    border-radius: 6px;
    font-family: var(--font-sans);
    font-size: .72rem;
    font-weight: 600;
    color: var(--slate);
    cursor: pointer;
    transition: all .2s ease;
}
.mono-pal-btn:hover {
    border-color: #9A8150;
    color: var(--ink);
}
.mono-pal-btn.is-active {
    border-color: #9A8150;
    background: #FAF8F2;
    box-shadow: 0 0 0 2px #C4AA78;
    color: var(--ink);
}
.pal-swatches {
    display: flex;
    gap: 2px;
}
.pal-swatches span {
    width: 8px;
    height: 14px;
    border-radius: 2px;
}
.mono-art-card {
    display: flex;
    gap: 12px;
    align-items: center;
    background: var(--white);
    border: 1px solid var(--chalk);
    border-radius: 8px;
    padding: 12px 14px;
}
.mono-art-thumb {
    width: 70px;
    height: 50px;
    border-radius: 4px;
    overflow: hidden;
    background: #141619;
    flex-shrink: 0;
}
.mono-art-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mono-art-meta { flex: 1; }
.mono-art-kicker {
    font-size: .5625rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #9A8150;
    display: block;
}
.mono-art-title {
    font-family: var(--font-serif);
    font-size: .95rem;
    font-weight: 400;
    color: var(--ink);
    margin: 1px 0;
}
.mono-art-desc {
    font-size: .6875rem;
    color: var(--stone);
    margin: 0 0 2px;
}
.mono-art-link {
    font-size: .625rem;
    font-weight: 600;
    color: #9A8150;
    text-decoration: none;
}




/* ---- mobile guards ------------------------------------------------------
   The instruments were laid out as desktop workbenches: two-column studio
   grids with fixed track widths that stayed wider than a phone. Below the
   workbench breakpoint every studio grid collapses to one column and its
   panes are allowed to shrink, which is what stops the page scrolling
   sideways. The one genuinely wide thing left scrolls inside its own box.
------------------------------------------------------------------------- */
@media (max-width: 860px) {
  [class$="-studio-grid"],
  [class*="-studio-grid "],
  [class$="-workbench-grid"],
  [class*="-workbench-grid "],
  .transliterator-grid,
  .trans-grid {
    display: grid;
    grid-template-columns: 1fr;
  }

  [class*="-workbench-card"],
  [class*="-pane"],
  [class*="-canvas"],
  [class*="toolbar"],
  [class*="-actions-row"] {
    min-width: 0;
    max-width: 100%;
    width: auto;
    box-sizing: border-box;
  }

  [class*="-pane"] canvas,
  [class*="-canvas"] canvas {
    max-width: 100%;
    height: auto;
  }

  .toolbar-group,
  .toolbar-options,
  .pane-actions,
  .canvas-actions-row { flex-wrap: wrap; }

  .trans-select,
  .monogram-btn,
  .pane-action-btn { max-width: 100%; }

  /* A table of glyphs is allowed to be wide, inside its own scroller. */
  .ogham-workbench-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---- world alignment ----------------------------------------------------
   The instruments arrived as soft-SaaS workbenches: large rounded cards with
   drop shadows, nested bordered sub-panels and pill buttons. That is a
   different world sitting on the wall, and it contradicts OWN-WORLD ("no
   cards, no rules — plaster seams and cast shadows do the separating").

   The controls keep their layout and behaviour; only the container chrome is
   removed. Work that is genuinely an object on the wall — a canvas, a plate —
   keeps a real cast shadow, because that is how this world separates things.
------------------------------------------------------------------------- */

[class$="-workbench-card"],
[class$="-studio-card"] {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding-inline: 0;
}

/* Sub-panels separate by seam, not by box. */
.trans-pane,
.wheel-detail-pane,
.wheel-dial-pane,
.monogram-controls-pane,
.petroglyph-controls-pane,
.solstice-controls-pane,
.artwork-info-pane,
.acquisition-panel {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.trans-pane + .trans-pane,
.wheel-detail-pane + .wheel-detail-pane { border-top: 1px solid var(--lime-deep); }

/* The drawing surfaces are objects on the wall: real shadow, square corners. */
.petroglyph-canvas-pane canvas,
.monogram-canvas-wrap canvas,
.wheel-dial-pane svg {
  border-radius: 0;
  background: var(--lime-lit);
  box-shadow:
    var(--shadow-x) var(--shadow-y) var(--shadow-blur) var(--shadow-spread)
      rgba(51, 70, 94, var(--shadow-alpha));
}

/* No pills. Controls in this world are squared, hairline, and quiet. */
.pane-action-btn,
.monogram-btn,
.tree-act-btn,
.finish-btn,
.mono-pal-btn,
.festival-chip,
.motif-chip,
.init-chip,
.formula-chip,
.trans-select,
.field,
input[type="text"],
input[type="date"],
select,
textarea {
  border-radius: 0;
}

.festival-chip,
.motif-chip,
.init-chip,
.formula-chip,
.mono-pal-btn {
  box-shadow: none;
  border: 1px solid var(--lime-deep);
  background: transparent;
}
.festival-chip.is-active,
.motif-chip.is-active,
.init-chip.is-active,
.formula-chip.is-active,
.mono-pal-btn.is-active {
  border-color: var(--gold);
  color: var(--graphite);
  background: var(--lime-shade);
}

/* The instrument sections carry their own vertical margins from the previous
   build, and they sit inside <section>, which the new stylesheet already pads.
   Stacked with the colophon's own top margin that left ~400px of dead wall
   above the footer. The section's spacing wins; the duplicates are removed. */
[class$="-workbench-section"],
[class$="-stage-section"] {
  padding-block: 0;
  margin-bottom: 0;
}

/* ---- the sacred beasts --------------------------------------------------
   Drawn marks, not emoji. They inherit their colour from whatever they sit
   in, so the gold on the result card and the graphite in the almanac grid
   both come for free.
------------------------------------------------------------------------- */
.beast-mark {
  display: block;
  width: 100%;
  height: auto;
  max-width: 140px;
  margin-inline: auto;
  color: inherit;
  overflow: visible;
}
#totem-icon {
  display: grid;
  place-items: center;
  color: var(--gold-bright, #B7955A);
}
#totem-icon .beast-mark { max-width: 150px; }

.totem-card-icon {
  display: grid;
  place-items: center;
  color: var(--gold);
}
.totem-card-icon .beast-mark { max-width: 64px; }

/* ---- the sacred beasts, on paper ----------------------------------------
   A torn sheet pinned to the wall. The deckle is displaced turbulence rather
   than a polygon approximating a torn edge, the fibre is real grain, and the
   sheet casts the same shadow as everything else on this wall — so it sits in
   the site's own light rather than being a card with a border.
------------------------------------------------------------------------- */
.beast-paper {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 30px);
  background: #FDFCF8;
  border: 0;
  border-radius: 0;
  filter:
    url(#deckle)
    drop-shadow(calc(var(--shadow-x, 10px) * 0.5) calc(var(--shadow-y, 14px) * 0.5)
                calc(var(--shadow-blur, 30px) * 0.35) rgba(51, 70, 94, 0.26));
}

/* Paper fibre, and the faint warmth of a sheet that has been handled. */
.beast-paper::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' seed='11'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23f)' opacity='0.55'/%3E%3C/svg%3E"),
    radial-gradient(120% 90% at 30% 20%, rgba(255, 252, 242, 0.9), rgba(236, 232, 221, 0.55));
  background-size: 260px 260px, 100% 100%;
  mix-blend-mode: multiply;
  opacity: 0.2;
}

.beast-paper .beast-mark,
.beast-paper .beast-drawing {
  position: relative;
  display: block;
  width: 100%;
  max-width: 190px;
  height: auto;
  margin-inline: auto;
  color: #2E2C27;          /* graphite on paper, never gold */
}

.totem-card-icon.beast-paper .beast-mark,
.totem-card-icon.beast-paper .beast-drawing { max-width: 78px; }

@media (prefers-reduced-motion: no-preference) {
  .beast-paper { transition: filter 700ms var(--ease); }
}

/* The sheet is the object now, so the dark panel behind it is redundant —
   the paper hangs on the wall like everything else does. */
.totem-emblem-wrap {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0 0 16px;
}
.totem-large-icon {
  display: block;
  font-size: inherit;
  line-height: 0;
}
.totem-ogham-rune {
  display: block;
  margin-top: 14px;
  color: var(--gold);
}

/* The almanac reads as a list of eight, so give the text room: the sheet
   becomes a thumbnail with a fixed width rather than a flex item competing
   with the name for the card. */
.totem-almanac-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

.totem-card { align-items: flex-start; gap: 14px; }
.totem-card-icon.beast-paper {
  flex: 0 0 96px;
  width: 96px;
  padding: 7px;
  margin-top: 2px;
}
.totem-card-icon.beast-paper .beast-drawing,
.totem-card-icon.beast-paper .beast-mark { max-width: 100%; }
.totem-card-body { flex: 1 1 auto; min-width: 0; }
.totem-card-name { text-wrap: balance; }

@media (max-width: 520px) {
  .totem-card-icon.beast-paper { flex-basis: 76px; width: 76px; }
}