/* ============================================================
   courts.studio
   cloistered atelier of disrepair
   wabi-sabi opulence, forest-green & beeswax, mono typography
   ============================================================ */

:root {
    --court:        #101A14;  /* near-black green */
    --mortar:       #0E1A12;  /* darker still, gutters */
    --cypress:      #1F3A2C;  /* cloister wall in shadow */
    --moss:         #3F5E47;  /* mid green, italic Cormorant */
    --lichen:       #7FA08A;  /* light green, hover/alt */
    --frost:        #D8E0CE;  /* off-white, foreground text */
    --beeswax:      #E8C672;  /* candlelight accent */
    --brass:        #7A6A3A;  /* tarnished brass hairline */

    --flagstone-w:  120px;
    --flagstone-h:  168px;
    --gutter:       14px;

    --grid-w: calc(8 * var(--flagstone-w) + 7 * var(--gutter));

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

/* --- base reset --- */

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

html, body {
    background: var(--mortar);
    color: var(--frost);
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.78;
    font-feature-settings: "ss01" on, "ss02" on, "calt" on, "liga" on;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body {
    overflow-x: hidden;
}

/* --- bronze tile (upper-left, 14x14, hover reveals section index) --- */

#bronze-tile {
    position: fixed;
    top: 28px;
    left: 28px;
    z-index: 100;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    width: 14px;
    height: 14px;
    transition: width 0.6s var(--ease-candle), height 0.6s var(--ease-candle);
}

#bronze-tile .tile-square {
    position: absolute;
    top: 0;
    left: 0;
    width: 14px;
    height: 14px;
    background: var(--brass);
    transition: filter 0.6s var(--ease-candle);
}

#bronze-tile:hover .tile-square {
    filter: drop-shadow(0 0 12px rgba(232, 198, 114, 0.4));
}

#bronze-tile .tile-index {
    position: absolute;
    top: 22px;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    opacity: 0;
    filter: blur(8px);
    transition: opacity 0.9s var(--ease-candle), filter 0.9s var(--ease-candle);
    pointer-events: none;
    white-space: nowrap;
}

#bronze-tile .tile-index span {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--brass);
}

#bronze-tile:hover .tile-index,
#bronze-tile:focus .tile-index {
    opacity: 1;
    filter: blur(0);
}

/* --- scroll-progress: hourglass-of-wax on right page edge --- */

#scroll-progress {
    position: fixed;
    top: 50%;
    right: 22px;
    transform: translateY(-50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    pointer-events: none;
}

.hourglass-glyph {
    width: 22px;
    height: 22px;
}

.progress-track {
    width: 1px;
    height: 160px;
    background: var(--mortar);
    position: relative;
    overflow: hidden;
}

.progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 0%;
    background: linear-gradient(to bottom,
        rgba(232, 198, 114, 0.7),
        rgba(122, 106, 58, 0.5));
    transition: height 0.4s var(--ease-candle);
}

/* --- main, the cloister --- */

#cloister {
    background: var(--mortar);
    padding: 0;
}

/* --- movement (one of seven) --- */

.movement {
    position: relative;
    padding: 96px 0 48px;
    background: var(--court);
    border: none;
}

/* faint cypress-green vignette to read as a separate court */
.movement::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%,
        rgba(31, 58, 44, 0.18),
        transparent 60%);
    pointer-events: none;
}

.movement-deep {
    background: #0B1410;
}

/* --- the cloister-grid: 8 columns of 120px flagstones --- */

.cloister-grid {
    display: grid;
    grid-template-columns: repeat(8, var(--flagstone-w));
    grid-auto-rows: var(--flagstone-h);
    gap: var(--gutter);
    width: var(--grid-w);
    margin: 0 auto;
    position: relative;
}

/* the void aisle: column 4 stays empty by virtue of explicit grid-column placements
   (we never place into column 4). render a faint mortar reminder. */
.cloister-grid::before {
    content: "";
    grid-column: 4;
    grid-row: 1 / -1;
    background: var(--mortar);
    pointer-events: none;
    z-index: 0;
}

/* --- typography roles --- */

.caption {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--brass);
    align-self: center;
    padding-top: 6px;
}

.opening-italic {
    font-family: 'Cormorant Garamond', 'Lora', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.4rem, 2.6vw, 2.1rem);
    line-height: 1.18;
    color: var(--moss);
    align-self: end;
    padding-bottom: 10px;
    font-feature-settings: "swsh" on, "salt" on;
    filter: blur(3px);
    opacity: 0.4;
    transition: filter 900ms var(--ease-candle), opacity 900ms var(--ease-candle);
}

.opening-italic.in-view {
    filter: blur(0);
    opacity: 1;
}

.movement-title {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 200;
    font-size: clamp(2.4rem, 5.2vw, 4.6rem);
    line-height: 1.06;
    letter-spacing: -0.005em;
    color: var(--frost);
    align-self: end;
    padding-bottom: 6px;
    filter: blur(3px);
    opacity: 0.4;
    transition: filter 900ms var(--ease-candle), opacity 900ms var(--ease-candle);
}

.movement-title.in-view {
    filter: blur(0);
    opacity: 1;
}

.prose {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.78;
    color: var(--frost);
    align-self: start;
    padding: 6px 0;
}

.prose.long-prose {
    font-size: 13.5px;
    line-height: 1.92;
}

.prose.tarnished {
    color: var(--lichen);
    font-weight: 400;
}

/* --- cypress-bullet list --- */

.cypress-list {
    list-style: none;
    align-self: start;
    padding: 6px 0;
    color: var(--lichen);
}

.cypress-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    line-height: 2.1;
}

.cypress-list .bullet {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* --- work caption (caption block under green-court works) --- */

.work-caption {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-self: start;
    padding-top: 10px;
}

.work-caption .work-no {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--brass);
}

.work-caption .work-title {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 17px;
    color: var(--moss);
    line-height: 1.3;
}

/* --- flagstone photo (duotone, blur-focus) --- */

.flagstone-photo {
    position: relative;
    background: var(--cypress);
    overflow: hidden;
    cursor: none;
    filter: blur(14px) brightness(0.6);
    opacity: 0.7;
    transition: filter 1.6s var(--ease-candle), opacity 1.6s var(--ease-candle);
}

.flagstone-photo.in-view {
    filter: blur(0) brightness(1.0);
    opacity: 1;
}

/* duotone painted backgrounds (live CSS, no external imagery) -
   stack of layered gradients that read as cypress-and-beeswax photographs.
   each photo is composed of 3+ radial/linear gradients to imply subject. */

.photo-arch {
    background:
        /* arch silhouette */
        radial-gradient(ellipse 70% 90% at 50% 100%, rgba(232,198,114,0.18) 0%, transparent 55%),
        radial-gradient(ellipse 60% 70% at 50% 90%, var(--cypress) 0%, transparent 60%),
        linear-gradient(180deg, #0E1A12 0%, var(--cypress) 60%, #1A2E22 100%);
    background-color: var(--cypress);
}
.photo-arch::after {
    content: "";
    position: absolute;
    left: 30%;
    right: 30%;
    top: 25%;
    bottom: 0;
    background: radial-gradient(ellipse 100% 60% at 50% 100%,
        var(--mortar) 0%,
        rgba(14,26,18,0.6) 60%,
        transparent 100%);
    border-radius: 50% 50% 0 0;
}

.photo-confessional {
    background:
        radial-gradient(circle at 40% 35%, rgba(232,198,114,0.22) 0%, transparent 30%),
        linear-gradient(135deg, var(--mortar) 0%, var(--cypress) 50%, #2A4233 100%),
        var(--cypress);
}
.photo-confessional::after {
    content: "";
    position: absolute;
    left: 20%; right: 20%;
    top: 15%; bottom: 15%;
    background:
        linear-gradient(180deg, transparent 0%, rgba(63,94,71,0.4) 50%, transparent 100%);
    border-left: 1px solid rgba(63,94,71,0.5);
    border-right: 1px solid rgba(63,94,71,0.5);
}

.photo-table {
    background:
        linear-gradient(180deg,
            var(--mortar) 0%,
            var(--cypress) 30%,
            #2A4233 60%,
            var(--cypress) 100%),
        var(--cypress);
}
.photo-table::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(180deg,
            transparent 0px,
            transparent 20px,
            rgba(232,198,114,0.06) 20px,
            rgba(232,198,114,0.06) 21px),
        radial-gradient(ellipse 60% 30% at 50% 50%, rgba(216,224,206,0.1) 0%, transparent 70%);
}

.photo-cypress {
    background:
        radial-gradient(ellipse 30% 90% at 50% 50%, var(--cypress) 0%, transparent 60%),
        linear-gradient(180deg, var(--mortar) 0%, #1A2E22 50%, var(--cypress) 100%);
}
.photo-cypress::after {
    content: "";
    position: absolute;
    left: 35%; right: 35%;
    top: 5%; bottom: 0;
    background:
        linear-gradient(180deg, var(--cypress) 0%, #2A4233 100%);
    border-radius: 50% 50% 0 0 / 30% 30% 0 0;
    box-shadow: 0 0 20px rgba(31,58,44,0.6);
}

.photo-stair {
    background:
        repeating-linear-gradient(105deg,
            var(--cypress) 0px,
            var(--cypress) 22px,
            #2A4233 22px,
            #2A4233 26px,
            var(--mortar) 26px,
            var(--mortar) 28px),
        var(--cypress);
}
.photo-stair::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 50% 30%, rgba(232,198,114,0.12) 0%, transparent 70%),
        radial-gradient(circle at 20% 80%, rgba(63,94,71,0.4) 0%, transparent 40%);
}

.photo-candelabrum {
    background:
        radial-gradient(circle at 50% 25%, rgba(232,198,114,0.3) 0%, rgba(232,198,114,0.05) 20%, transparent 35%),
        linear-gradient(180deg, var(--mortar) 0%, var(--cypress) 70%, #1A2E22 100%);
}
.photo-candelabrum::after {
    content: "";
    position: absolute;
    left: 45%;
    right: 45%;
    top: 25%;
    bottom: 15%;
    background: linear-gradient(180deg,
        rgba(122,106,58,0.6) 0%,
        rgba(122,106,58,0.9) 20%,
        var(--brass) 100%);
}

.photo-celadon {
    background:
        radial-gradient(circle at 40% 40%, rgba(127,160,138,0.3) 0%, transparent 40%),
        radial-gradient(circle at 65% 60%, rgba(127,160,138,0.25) 0%, transparent 35%),
        linear-gradient(135deg, var(--cypress) 0%, #2A4233 100%);
}
.photo-celadon::after {
    content: "";
    position: absolute;
    left: 20%; right: 30%;
    top: 30%; bottom: 30%;
    border: 1px solid rgba(216,224,206,0.15);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(216,224,206,0.08) 0%, transparent 70%);
    transform: rotate(-12deg);
}

.photo-rain {
    background:
        repeating-linear-gradient(95deg,
            transparent 0px,
            transparent 18px,
            rgba(216,224,206,0.04) 18px,
            rgba(216,224,206,0.04) 19px),
        linear-gradient(180deg, var(--mortar) 0%, var(--cypress) 80%, #2A4233 100%);
}
.photo-rain::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 40% at 50% 70%, rgba(63,94,71,0.5) 0%, transparent 70%);
}

.photo-chorister {
    background:
        radial-gradient(circle at 50% 60%, rgba(216,224,206,0.18) 0%, rgba(127,160,138,0.1) 25%, transparent 40%),
        linear-gradient(180deg, var(--mortar) 0%, var(--cypress) 100%);
}
.photo-chorister::after {
    content: "";
    position: absolute;
    left: 35%; right: 35%;
    top: 40%; bottom: 0;
    background:
        radial-gradient(ellipse 100% 80% at 50% 0%, rgba(216,224,206,0.25) 0%, transparent 60%);
    border-radius: 50% 50% 0 0;
}

/* small photos in inner court are deeper green */
.flagstone-photo.small-photo {
    filter: blur(14px) brightness(0.45);
    opacity: 0.55;
}
.flagstone-photo.small-photo.in-view {
    filter: blur(0) brightness(0.78);
    opacity: 0.92;
}

.photo-bark {
    background:
        repeating-radial-gradient(ellipse 30% 40% at 50% 50%,
            #2A4233 0%,
            var(--cypress) 30%,
            var(--mortar) 60%),
        var(--cypress);
}

.photo-doorway {
    background:
        radial-gradient(ellipse 90% 60% at 50% 100%, rgba(232,198,114,0.1) 0%, transparent 70%),
        linear-gradient(180deg, var(--cypress) 0%, var(--mortar) 60%, var(--cypress) 100%);
}

.photo-stained {
    background:
        radial-gradient(circle at 30% 30%, rgba(232,198,114,0.15) 0%, transparent 25%),
        radial-gradient(circle at 70% 60%, rgba(127,160,138,0.2) 0%, transparent 30%),
        linear-gradient(135deg, var(--mortar) 0%, var(--cypress) 100%);
}

.photo-spent {
    background:
        radial-gradient(circle at 50% 30%, rgba(232,198,114,0.18) 0%, transparent 20%),
        linear-gradient(180deg, var(--mortar) 0%, var(--cypress) 100%);
}
.photo-spent::after {
    content: "";
    position: absolute;
    left: 45%; right: 45%;
    top: 35%; bottom: 20%;
    background: var(--brass);
    opacity: 0.6;
}

.photo-thurible {
    background:
        radial-gradient(circle at 50% 50%, rgba(122,106,58,0.4) 0%, transparent 30%),
        linear-gradient(180deg, var(--mortar) 0%, var(--cypress) 100%);
}

.photo-vestry {
    background:
        linear-gradient(180deg, var(--mortar) 0%, #1A2E22 50%, var(--cypress) 100%);
}
.photo-vestry::after {
    content: "";
    position: absolute;
    left: 25%; right: 25%;
    top: 20%; bottom: 20%;
    background: rgba(63,94,71,0.3);
}

/* candle bloom gradient layered over selected flagstones */
.flagstone-photo.bloom::before {
    content: "";
    position: absolute;
    inset: -10%;
    background: radial-gradient(circle at 50% 50%,
        rgba(232,198,114,0.14) 0%,
        rgba(122,106,58,0.06) 30%,
        transparent 60%);
    mix-blend-mode: screen;
    pointer-events: none;
    transition: opacity 1.4s var(--ease-candle);
}

/* --- dim flagstone (one-in-twelve, with taper-glyph) --- */

.dim-flagstone {
    background: rgba(14, 26, 18, 0.94);
    position: relative;
    transition: background-color 1.4s var(--ease-candle), opacity 1.4s var(--ease-candle);
}

.dim-flagstone::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 35%,
        rgba(232,198,114,0.12) 0%,
        rgba(122,106,58,0.04) 30%,
        transparent 60%);
    opacity: 0.22;
    mix-blend-mode: screen;
    transition: opacity 1.4s var(--ease-candle);
    pointer-events: none;
}

.dim-flagstone::after {
    content: "";
    position: absolute;
    top: 18%;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 22px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'><ellipse cx='11' cy='3.4' rx='0.9' ry='1.6' fill='%23E8C672' opacity='0.7'/><rect x='9.7' y='5' width='2.6' height='13' fill='none' stroke='%237A6A3A' stroke-width='1.1'/><path d='M9.7 18 L7.5 21 L14.5 21 L12.3 18' fill='none' stroke='%237A6A3A' stroke-width='1.1'/></svg>");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.22;
    transition: opacity 1.4s var(--ease-candle);
}

.dim-flagstone.lit {
    background: var(--cypress);
}

.dim-flagstone.lit::before {
    opacity: 1;
}

.dim-flagstone.lit::after {
    opacity: 0.85;
}

.flagstone-blank {
    background: var(--mortar);
}

/* --- snuffer divider (replaces *** ///) --- */

.snuffer-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    padding: 24px 0;
}

.snuffer-divider svg {
    width: 22px;
    height: 22px;
}

/* --- the refectory hairline (1px brass with candle-spill) --- */

.refectory-hairline {
    height: 1px;
    background: var(--brass);
    box-shadow: 0 0 24px rgba(232, 198, 114, 0.08);
    align-self: center;
    margin: 64px 0 32px;
    width: 100vw;
    margin-left: calc((100vw - var(--grid-w)) / -2);
}

/* --- the apse (clip-path ellipse, half-dome recess) --- */

#movement-apse {
    padding: 0;
    background: transparent;
}

.apse-recess {
    height: 720px;
    background:
        radial-gradient(ellipse 80% 60% at 50% 100%, var(--cypress) 0%, var(--mortar) 70%, #060B08 100%);
    clip-path: ellipse(140% 60% at 50% 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    padding: 96px 24px 48px;
    position: relative;
}

.apse-monogram {
    width: 80px;
    height: 80px;
    opacity: 0.85;
}

.monogram-svg {
    width: 100%;
    height: 100%;
}

.apse-line {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.2rem, 2.2vw, 1.8rem);
    color: var(--moss);
    text-align: center;
    max-width: 480px;
}

.apse-address {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    line-height: 2;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--brass);
    text-align: center;
}

.apse-taper {
    background: transparent;
    border: 0;
    cursor: pointer;
    width: 22px;
    height: 22px;
    padding: 0;
    margin-top: 16px;
    opacity: 0.6;
    transition: opacity 0.6s var(--ease-candle), filter 0.6s var(--ease-candle);
}

.apse-taper svg {
    width: 22px;
    height: 22px;
}

.apse-taper:hover,
.apse-taper.active {
    opacity: 1;
    filter: drop-shadow(0 0 6px rgba(232,198,114,0.6));
}

/* --- gate closes (final 100vh, snuffer fading from brass to mortar) --- */

.gate-closes {
    height: 100vh;
    background: var(--court);
    display: flex;
    align-items: center;
    justify-content: center;
}

.closing-snuffer {
    width: 22px;
    height: 22px;
    color: var(--brass);
    transition: opacity 6s linear, filter 6s linear;
    opacity: 1;
}

.closing-snuffer.faded {
    opacity: 0.05;
    filter: blur(2px);
}

/* --- snuffer cursor inside imagery flagstones (browser-level cursor png) --- */

.flagstone-photo {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M3 19 L11 11' stroke='%237A6A3A' stroke-width='1.4'/><path d='M11 11 L17 5 L19 7 L13 13 Z' fill='%237A6A3A' stroke='%237A6A3A' stroke-width='1.1'/></svg>") 11 11, default;
}

/* ============================================================
   Responsive: rebuild the lattice into 4xN, then 2xN courts
   The flagstone module never deforms.
   ============================================================ */

@media (max-width: 1140px) {
    :root {
        --flagstone-w: 96px;
        --flagstone-h: 134px;
    }
}

@media (max-width: 880px) {
    :root {
        --flagstone-w: 78px;
        --flagstone-h: 110px;
        --gutter: 10px;
    }

    .cloister-grid {
        grid-template-columns: repeat(4, var(--flagstone-w));
        width: calc(4 * var(--flagstone-w) + 3 * var(--gutter));
    }

    /* re-flow grid placements onto a 4-column courtyard. items intentionally
       collapse onto a single column where they used to span 1-3 or 5-8. */
    .cloister-grid > * {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
    }

    .cloister-grid::before {
        display: none;
    }

    .flagstone-photo {
        height: calc(2 * var(--flagstone-h) + var(--gutter));
    }

    .small-photo {
        height: calc(1.5 * var(--flagstone-h) + var(--gutter));
    }

    .refectory-hairline {
        height: 1px;
        margin: 32px 0;
        width: 100vw;
        margin-left: calc((100vw - calc(4 * var(--flagstone-w) + 3 * var(--gutter))) / -2);
    }

    #scroll-progress {
        display: none;
    }
}

@media (max-width: 520px) {
    :root {
        --flagstone-w: 130px;
        --flagstone-h: 180px;
        --gutter: 8px;
    }

    .cloister-grid {
        grid-template-columns: repeat(2, var(--flagstone-w));
        width: calc(2 * var(--flagstone-w) + var(--gutter));
    }
}