/* CCATTL.com — The Cattail Effervescence Society
   Palette (warm, vellum + aged brass)
     Vellum Cream      #f3e7d3
     Honey Amber       #d49a5c
     Aged Brass        #b8732a
     Ember Rust        #9a4a2c
     Foxed Sepia       #5a3826
     Inkwell Umber     #2c1810
     Effervescent Pearl#fbf3e3

   Typography:
     Display: Limelight (Domain & section titles)
     Card labels: Poiret One
     Body: Cormorant Garamond
     Small caps / metadata: Cormorant Upright

   Spacing scale (Fibonacci): 8 13 21 34 55 89 px
*/

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

:root {
    --vellum:   #f3e7d3;
    --honey:    #d49a5c;
    --brass:    #b8732a;
    --ember:    #9a4a2c;
    --sepia:    #5a3826;
    --umber:    #2c1810;
    --pearl:    #fbf3e3;

    --s-1: 8px;
    --s-2: 13px;
    --s-3: 21px;
    --s-4: 34px;
    --s-5: 55px;
    --s-6: 89px;

    --display: 'Limelight', 'Cormorant Upright', serif;
    --label:   'Poiret One', 'Limelight', serif;
    --body:    'Cormorant Garamond', 'Cormorant Upright', Georgia, serif;
    --caps:    'Cormorant Upright', 'Cormorant Garamond', Georgia, serif;

    --ease-deco: cubic-bezier(0.22, 1, 0.36, 1);
}

html, body {
    background: var(--vellum);
    color: var(--sepia);
    font-family: var(--body);
    font-size: 17px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

body {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><rect x='3' y='3' width='8' height='8' transform='rotate(45 7 7)' fill='%23b8732a'/></svg>") 7 7, auto;
    background:
        radial-gradient(ellipse at 12% 18%, rgba(212, 154, 92, 0.10), transparent 40%),
        radial-gradient(ellipse at 88% 78%, rgba(184, 115, 42, 0.08), transparent 45%),
        var(--vellum);
}

a, button, .cartouche, .medallion, .alcove {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'><rect x='4' y='4' width='10' height='10' transform='rotate(45 9 9)' fill='%23d49a5c' stroke='%23b8732a' stroke-width='1.2'/></svg>") 9 9, pointer;
}

/* ---------------- Cursor trail (brass dot) ---------------- */
.cursor-trail {
    position: fixed;
    width: 6px;
    height: 6px;
    background: var(--brass);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9000;
    opacity: 0;
    transform: translate3d(-100px, -100px, 0);
    transition: opacity 200ms ease;
    box-shadow: 0 0 6px rgba(184, 115, 42, 0.4);
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
    position: relative;
    min-height: 100vh;
    padding: var(--s-5) var(--s-4) var(--s-4);
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 30%, rgba(212, 154, 92, 0.18), transparent 55%),
        linear-gradient(170deg, var(--vellum) 0%, #efdcc1 60%, var(--vellum) 100%);
}

.medallions {
    position: absolute;
    top: var(--s-4);
    right: var(--s-4);
    display: flex;
    gap: var(--s-2);
    z-index: 5;
}

.medallion {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    text-decoration: none;
    background: var(--vellum);
    color: var(--brass);
    font-family: var(--caps);
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    box-shadow:
        0 0 0 1px var(--brass),
        0 0 0 3px var(--vellum),
        0 0 0 4px var(--brass);
    transition: transform 600ms var(--ease-deco), color 400ms ease;
}

.medallion:hover {
    transform: rotate(45deg) scale(1.05);
    color: var(--ember);
}

.medallion span {
    transform: rotate(0deg);
    transition: transform 600ms var(--ease-deco);
    display: inline-block;
}

.medallion:hover span {
    transform: rotate(-45deg);
}

.hero-grid {
    display: grid;
    grid-template-columns: 6fr 4fr;
    gap: var(--s-5);
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
    min-height: calc(100vh - var(--s-6) * 2);
}

.hero-poster {
    position: relative;
    background: var(--pearl);
    border-radius: 4px;
    padding: var(--s-4) var(--s-3);
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 0 0 1px var(--brass),
        0 0 0 4px var(--vellum),
        0 0 0 5px var(--brass),
        0 0 0 9px var(--vellum),
        0 0 0 10px var(--honey);
}

.hero-poster::before {
    content: '';
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(184, 115, 42, 0.35);
    pointer-events: none;
}

.cattail {
    width: 70%;
    height: auto;
    max-height: 70vh;
    position: relative;
    z-index: 2;
}

.cattail-stroke {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawStroke 2400ms var(--ease-deco) forwards;
}
.cattail .stalk         { animation-delay: 0ms;   }
.cattail .leaf-left     { animation-delay: 600ms; }
.cattail .leaf-left2    { animation-delay: 800ms; }
.cattail .leaf-right    { animation-delay: 600ms; }
.cattail .leaf-right2   { animation-delay: 800ms; }
.cattail .bulrush       { animation: drawStroke 1400ms var(--ease-deco) forwards; animation-delay: 1400ms; opacity: 0; }
.cattail .ground        { animation-delay: 1800ms; }
.cattail .base-diamond  { animation-delay: 2000ms; }

@keyframes drawStroke {
    0%   { stroke-dashoffset: 1000; opacity: 0; }
    20%  { opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 1; }
}

.cattail .bulrush {
    animation-name: bulrushFill;
}

@keyframes bulrushFill {
    0%   { opacity: 0; transform: scaleY(0.4); transform-origin: 162px 304px; }
    100% { opacity: 1; transform: scaleY(1);  transform-origin: 162px 304px; }
}

.bubble-field {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
}

.bubble {
    fill: none;
    stroke: var(--brass);
    stroke-width: 1;
    opacity: 0;
    transform-origin: center;
    transform-box: fill-box;
}

.bubble-field .bubble.b1 { animation: rise1  9s linear infinite; }
.bubble-field .bubble.b2 { animation: rise2 11s linear infinite; }
.bubble-field .bubble.b3 { animation: rise3  7s linear infinite; }
.bubble-field .bubble.b4 { animation: rise4 13s linear infinite; }
.bubble-field .bubble.b5 { animation: rise5  6s linear infinite; }
.bubble-field .bubble.b6 { animation: rise6 14s linear infinite; }
.bubble-field .bubble.b7 { animation: rise7 10s linear infinite; }
.bubble-field .bubble.b8 { animation: rise8  8s linear infinite; }

.bubble-field .bubble:nth-child(2)  { animation-delay: 1.2s; }
.bubble-field .bubble:nth-child(3)  { animation-delay: 2.4s; }
.bubble-field .bubble:nth-child(4)  { animation-delay: 0.6s; }
.bubble-field .bubble:nth-child(5)  { animation-delay: 3.2s; }
.bubble-field .bubble:nth-child(6)  { animation-delay: 1.8s; }
.bubble-field .bubble:nth-child(7)  { animation-delay: 4.5s; }
.bubble-field .bubble:nth-child(8)  { animation-delay: 0.9s; }
.bubble-field .bubble:nth-child(9)  { animation-delay: 2.1s; }
.bubble-field .bubble:nth-child(10) { animation-delay: 5.0s; }
.bubble-field .bubble:nth-child(11) { animation-delay: 1.5s; }
.bubble-field .bubble:nth-child(12) { animation-delay: 3.6s; }
.bubble-field .bubble:nth-child(13) { animation-delay: 0.3s; }
.bubble-field .bubble:nth-child(14) { animation-delay: 4.2s; }
.bubble-field .bubble:nth-child(15) { animation-delay: 2.8s; }
.bubble-field .bubble:nth-child(16) { animation-delay: 1.0s; }
.bubble-field .bubble:nth-child(17) { animation-delay: 3.9s; }
.bubble-field .bubble:nth-child(18) { animation-delay: 5.5s; }

@keyframes rise1 { 0%{opacity:0;transform:translateY(0)} 15%{opacity:.8} 80%{opacity:.4} 100%{opacity:0;transform:translateY(-200px)} }
@keyframes rise2 { 0%{opacity:0;transform:translateY(0)} 15%{opacity:.7} 80%{opacity:.3} 100%{opacity:0;transform:translateY(-220px)} }
@keyframes rise3 { 0%{opacity:0;transform:translateY(0)} 15%{opacity:.85} 80%{opacity:.4} 100%{opacity:0;transform:translateY(-180px)} }
@keyframes rise4 { 0%{opacity:0;transform:translateY(0)} 15%{opacity:.7} 80%{opacity:.3} 100%{opacity:0;transform:translateY(-260px)} }
@keyframes rise5 { 0%{opacity:0;transform:translateY(0)} 15%{opacity:.85} 80%{opacity:.4} 100%{opacity:0;transform:translateY(-190px)} }
@keyframes rise6 { 0%{opacity:0;transform:translateY(0)} 15%{opacity:.75} 80%{opacity:.3} 100%{opacity:0;transform:translateY(-280px)} }
@keyframes rise7 { 0%{opacity:0;transform:translateY(0)} 15%{opacity:.8} 80%{opacity:.4} 100%{opacity:0;transform:translateY(-210px)} }
@keyframes rise8 { 0%{opacity:0;transform:translateY(0)} 15%{opacity:.7} 80%{opacity:.3} 100%{opacity:0;transform:translateY(-250px)} }

/* Hero text */
.hero-text {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    align-items: center;
    text-align: center;
    padding: var(--s-3);
}

.hero-rule {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    width: 100%;
    max-width: 360px;
    opacity: 0;
    animation: fadeIn 800ms ease forwards;
    animation-delay: 2400ms;
}

.hero-rule .line {
    flex: 1;
    height: 1px;
    background: var(--brass);
}

.hero-rule .diamond {
    width: 8px;
    height: 8px;
    background: var(--brass);
    transform: rotate(45deg);
    flex-shrink: 0;
}

.hero-title {
    font-family: var(--display);
    font-size: clamp(2.25rem, 4.8vw, 4rem);
    color: var(--umber);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    line-height: 1.2;
    font-weight: 400;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hero-title .word {
    display: inline-block;
    overflow: hidden;
}

.hero-title .word > * { display: inline-block; }

/* Letter-by-letter spans injected by JS */
.hero-title .letter {
    display: inline-block;
    transform: translateY(110%);
    opacity: 0;
    animation: letterReveal 800ms var(--ease-deco) forwards;
}

@keyframes letterReveal {
    0%   { transform: translateY(110%); opacity: 0; }
    60%  { opacity: 1; }
    100% { transform: translateY(0); opacity: 1; }
}

.hero-epigraph {
    font-family: var(--body);
    font-size: 1.05rem;
    color: var(--sepia);
    font-weight: 500;
    max-width: 360px;
    opacity: 0;
    animation: fadeIn 1200ms ease forwards;
    animation-delay: 3600ms;
}

.hero-meta {
    font-family: var(--caps);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brass);
    font-variant: small-caps;
    opacity: 0;
    animation: fadeIn 1200ms ease forwards;
    animation-delay: 4000ms;
}

@keyframes fadeIn { to { opacity: 1; } }

.guilloche {
    position: absolute;
    bottom: var(--s-3);
    left: 0;
    width: 100%;
    height: 24px;
    pointer-events: none;
    opacity: 0.85;
}

/* ============================================================
   SECTION HEADS (shared)
   ============================================================ */
.section-head {
    text-align: center;
    margin: var(--s-6) auto var(--s-5);
    max-width: 720px;
    padding: 0 var(--s-3);
}

.diamond-rule {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 16px;
    margin-bottom: var(--s-3);
}

.diamond-rule .brass {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: var(--brass);
}

.diamond-rule .dia {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--brass);
    transform: rotate(45deg);
    top: 50%;
    margin-top: -3px;
}

.diamond-rule .dia:nth-child(2) { left: 35%; }
.diamond-rule .dia:nth-child(3) { left: 50%; transform: translateX(-50%) rotate(45deg); }
.diamond-rule .dia:nth-child(4) { left: 65%; }

.section-title {
    font-family: var(--display);
    font-size: clamp(1.7rem, 3.2vw, 2.6rem);
    color: var(--umber);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 400;
    margin-bottom: var(--s-3);
}

.section-sub {
    font-family: var(--body);
    font-size: 1.05rem;
    color: var(--sepia);
}

/* Reveal-on-scroll */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 1100ms var(--ease-deco), transform 1100ms var(--ease-deco);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   VINTAGE INDEX (cartouche grid)
   ============================================================ */
.vintage-index {
    padding: var(--s-5) var(--s-4) var(--s-6);
    position: relative;
}

.cartouche-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(190px, auto);
    gap: var(--s-4);
    max-width: 1280px;
    margin: 0 auto;
}

.cartouche {
    position: relative;
    background: var(--pearl);
    border-radius: 2px;
    overflow: hidden;
    transition:
        transform 700ms var(--ease-deco),
        box-shadow 600ms ease;
    box-shadow:
        0 0 0 1px var(--brass),
        0 0 0 4px var(--vellum),
        0 0 0 5px var(--brass),
        0 0 0 9px var(--vellum),
        0 0 0 10px var(--honey);
    margin: 12px;
}

.cartouche.tall    { grid-column: span 4; grid-row: span 2; min-height: 420px; }
.cartouche.lozenge { grid-column: span 5; grid-row: span 1; min-height: 230px; }
.cartouche.hex     { grid-column: span 3; grid-row: span 1; min-height: 230px; }
.cartouche.wide    { grid-column: span 8; grid-row: span 1; min-height: 230px; }

.cartouche:hover {
    transform: translateY(-4px);
    box-shadow:
        0 0 0 1px var(--ember),
        0 0 0 4px var(--vellum),
        0 0 0 5px var(--brass),
        0 0 0 9px var(--vellum),
        0 0 0 10px var(--honey),
        0 14px 28px rgba(44, 24, 16, 0.18);
}

/* Inset shadow that intensifies on open */
.cartouche::before {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 1px rgba(184, 115, 42, 0.0);
    pointer-events: none;
    transition: box-shadow 600ms var(--ease-deco);
    z-index: 4;
}

.cartouche.is-open::before {
    box-shadow: inset 0 0 24px rgba(90, 56, 38, 0.35), inset 0 0 0 1px rgba(184, 115, 42, 0.6);
}

.fan-crown {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 36px;
    z-index: 5;
    transition: transform 800ms var(--ease-deco);
}

.fan-crown svg { width: 100%; height: 100%; overflow: visible; }

.fan-crown line,
.fan-crown .fan-arc {
    stroke: var(--brass);
    stroke-width: 1;
    transition: stroke 800ms ease;
}

.fan-crown .keystone {
    fill: var(--brass);
    transition: transform 800ms var(--ease-deco);
    transform-origin: 32px 0px;
    transform-box: fill-box;
}

.cartouche:hover .fan-crown,
.cartouche.is-open .fan-crown {
    transform: translateX(-50%) rotate(8deg);
}

.cartouche:hover .fan-crown line,
.cartouche:hover .fan-crown .fan-arc,
.cartouche.is-open .fan-crown line,
.cartouche.is-open .fan-crown .fan-arc {
    stroke: var(--honey);
}

.cartouche:hover .fan-crown .keystone,
.cartouche.is-open .fan-crown .keystone {
    animation: keystonePulse 800ms ease;
}

@keyframes keystonePulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}

.cartouche-face {
    position: relative;
    height: 100%;
    padding: var(--s-4) var(--s-3) var(--s-3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    text-align: center;
}

.lithograph {
    width: 48px;
    height: 48px;
    margin-bottom: var(--s-1);
}

.cartouche-label {
    font-family: var(--label);
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    color: var(--umber);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 400;
}

.cartouche-region {
    font-family: var(--caps);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    color: var(--brass);
    font-variant: small-caps;
}

/* Drawer */
.cartouche-drawer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -100%;
    background: linear-gradient(180deg, var(--pearl) 0%, var(--vellum) 100%);
    padding: var(--s-3) var(--s-3) var(--s-3);
    transition: bottom 600ms var(--ease-deco);
    z-index: 3;
    border-top: 1px solid var(--brass);
    box-shadow: 0 -8px 24px rgba(44, 24, 16, 0.18);
    height: 100%;
    overflow: hidden;
}

.cartouche.is-open .cartouche-drawer,
.cartouche:hover .cartouche-drawer,
.cartouche:focus-within .cartouche-drawer {
    bottom: 0;
}

.drawer-heading {
    font-family: var(--display);
    font-size: 0.95rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ember);
    text-align: center;
    margin-bottom: var(--s-2);
    font-weight: 400;
}

.drawer-list {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px var(--s-2);
    margin-bottom: var(--s-2);
    font-family: var(--body);
    font-size: 0.95rem;
}

.drawer-list dt {
    color: var(--sepia);
    font-style: italic;
}

.drawer-list dd {
    color: var(--umber);
    text-align: right;
    font-family: var(--caps);
    letter-spacing: 0.05em;
    font-variant: small-caps;
}

.drawer-note {
    font-family: var(--body);
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--sepia);
    margin-bottom: var(--s-2);
}

.drawer-coords {
    font-family: var(--caps);
    font-size: 0.74rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--brass);
    text-align: center;
    font-variant: small-caps;
}

/* ============================================================
   LEDGER (horizontal scroll of alcoves)
   ============================================================ */
.ledger {
    padding: var(--s-5) var(--s-4) var(--s-6);
    background:
        linear-gradient(180deg, transparent 0%, rgba(212, 154, 92, 0.12) 50%, transparent 100%),
        var(--vellum);
    position: relative;
}

.ledger-rail {
    display: flex;
    gap: var(--s-4);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    padding: var(--s-4) var(--s-4) var(--s-3);
    scroll-padding-left: var(--s-4);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--brass) var(--vellum);
}

.ledger-rail::-webkit-scrollbar { height: 6px; }
.ledger-rail::-webkit-scrollbar-thumb { background: var(--brass); border-radius: 3px; }
.ledger-rail::-webkit-scrollbar-track { background: rgba(184, 115, 42, 0.15); }

.alcove {
    flex: 0 0 360px;
    min-height: 460px;
    background: var(--pearl);
    position: relative;
    padding: 0;
    scroll-snap-align: start;
    box-shadow:
        0 0 0 1px var(--brass),
        0 0 0 4px var(--vellum),
        0 0 0 5px var(--brass);
    margin: 6px;
    display: flex;
    flex-direction: column;
}

.alcove-arch {
    width: 100%;
    height: 60px;
    position: relative;
    overflow: hidden;
}

.alcove-arch svg { width: 100%; height: 100%; }

.alcove-body {
    padding: var(--s-3) var(--s-3) var(--s-4);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}

.alcove-marker {
    font-family: var(--caps);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brass);
    font-variant: small-caps;
}

.alcove-title {
    font-family: var(--display);
    font-size: 1.35rem;
    color: var(--umber);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 400;
    line-height: 1.3;
}

.alcove-text {
    font-family: var(--body);
    font-size: 1.0rem;
    line-height: 1.7;
    color: var(--sepia);
}

.rail-hint {
    text-align: center;
    font-family: var(--body);
    font-size: 0.9rem;
    color: var(--brass);
    margin-top: var(--s-2);
    opacity: 0.75;
}

/* Ledger guilloche separators between alcoves */
.alcove + .alcove::before {
    content: '';
    position: absolute;
    left: -22px;
    top: 50%;
    width: 1px;
    height: 60%;
    transform: translateY(-50%);
    background: linear-gradient(180deg, transparent, var(--brass), transparent);
    opacity: 0.5;
}

/* ============================================================
   RITUAL FOOTER (fan-light transom)
   ============================================================ */
.ritual {
    position: relative;
    padding: 0 0 var(--s-5);
    background: var(--vellum);
    overflow: hidden;
}

.fan-light {
    width: 100%;
    height: 120px;
    position: relative;
}

.fan-light svg { width: 100%; height: 100%; display: block; }

.ritual-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-4);
    max-width: 960px;
    margin: 0 auto;
    padding: var(--s-4) var(--s-4) var(--s-3);
    text-align: center;
}

.ritual-col {
    padding: var(--s-3);
    border-top: 1px solid var(--brass);
    position: relative;
}

.ritual-col::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -5px;
    width: 8px;
    height: 8px;
    background: var(--brass);
    transform: translateX(-50%) rotate(45deg);
}

.ritual-marker {
    font-family: var(--caps);
    font-size: 0.85rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ember);
    font-variant: small-caps;
    margin-bottom: var(--s-2);
}

.ritual-body {
    font-family: var(--body);
    font-size: 1.0rem;
    line-height: 1.7;
    color: var(--sepia);
}

.colophon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-3) 0;
    font-family: var(--caps);
    font-size: 0.8rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brass);
    font-variant: small-caps;
}

.colophon .diamond {
    width: 6px;
    height: 6px;
    background: var(--brass);
    transform: rotate(45deg);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
    .hero {
        padding: var(--s-4) var(--s-3) var(--s-3);
    }
    .hero-grid {
        grid-template-columns: 1fr;
        gap: var(--s-4);
    }
    .hero-poster {
        min-height: 50vh;
    }
    .cattail { width: 50%; max-height: 50vh; }
    .cartouche-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: var(--s-3);
    }
    .cartouche.tall    { grid-column: span 6; min-height: 360px; }
    .cartouche.lozenge { grid-column: span 6; }
    .cartouche.hex     { grid-column: span 3; }
    .cartouche.wide    { grid-column: span 6; }
    .ritual-grid { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
    .hero { padding: var(--s-4) var(--s-2) var(--s-3); }
    .medallions { top: var(--s-2); right: var(--s-2); gap: var(--s-1); }
    .medallion { width: 36px; height: 36px; }
    .hero-title { font-size: 2rem; letter-spacing: 0.14em; }
    .cartouche-grid {
        grid-template-columns: 1fr;
    }
    .cartouche.tall, .cartouche.lozenge, .cartouche.hex, .cartouche.wide {
        grid-column: span 1;
        min-height: 320px;
    }
    .alcove { flex-basis: 280px; }
}