/* Creation in the Dark site-wide cursor lantern. */
html,
body {
    max-width: 100%;
    overflow-x: clip;
}

main,
#main-content {
    width: 100%;
    max-width: 100%;
}

@supports not (overflow: clip) {
    html,
    body {
        overflow-x: hidden;
    }
}

.citd-cursor-light {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999998;
    width: clamp(320px, 31vw, 500px);
    height: clamp(320px, 31vw, 500px);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transform: translate3d(-50%, -50%, 0);
    background: radial-gradient(
        circle,
        rgba(255, 249, 226, .23) 0%,
        rgba(255, 238, 190, .12) 29%,
        rgba(255, 226, 153, .045) 52%,
        transparent 73%
    );
    box-shadow: 0 0 56px rgba(255, 232, 174, .025);
    mix-blend-mode: screen;
    transition: opacity .28s ease;
    contain: layout paint;
    will-change: left, top, opacity;
}

.citd-cursor-light.is-visible {
    opacity: 1;
}

/* Colourful photography does not need another light layer. */
.citd-cursor-light.is-over-media {
    opacity: 0 !important;
}

.citd-cursor-light.is-over-journal-media {
    opacity: .34;
}

/*
 * Journal photography remains editorially monochrome until the lantern
 * passes over it. The duplicated image is visual-only and reveals the real
 * colour in a soft circle without changing the card's size or layout.
 */
.citd-colour-reveal {
    --citd-reveal-x: 50%;
    --citd-reveal-y: 50%;
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.citd-colour-reveal > img:not(.citd-colour-reveal__image) {
    position: relative;
    z-index: 0;
}

.citd-colour-reveal > .citd-colour-reveal__image {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    object-fit: cover;
    filter: none !important;
    pointer-events: none;
    clip-path: circle(0 at var(--citd-reveal-x) var(--citd-reveal-y));
    transition: clip-path .22s ease;
}

.citd-colour-reveal.is-revealing > .citd-colour-reveal__image {
    clip-path: circle(clamp(120px, 13vw, 185px) at var(--citd-reveal-x) var(--citd-reveal-y));
}

/*
 * A discovery has no visible base colour. Its letters are painted only where
 * the lantern's radial field crosses the text.
 */
.citd-lantern-verse {
    --citd-verse-x: -1000px;
    --citd-verse-y: -1000px;
    position: fixed;
    z-index: 999999;
    width: min(34rem, calc(100vw - 96px));
    margin: 0;
    pointer-events: none;
    color: transparent;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(.82rem, .95vw, 1rem);
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: .035em;
    text-wrap: balance;
    background: radial-gradient(
        circle 155px at var(--citd-verse-x) var(--citd-verse-y),
        rgba(255, 250, 232, .92) 0%,
        rgba(255, 241, 204, .62) 42%,
        rgba(255, 232, 177, .20) 66%,
        transparent 76%
    );
    -webkit-background-clip: text;
    background-clip: text;
}

.citd-lantern-verse__quotation,
.citd-lantern-verse__reference {
    display: block;
}

.citd-lantern-verse__reference {
    margin-top: .55rem;
    font-family: inherit;
    font-size: .67em;
    font-style: normal;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.citd-lantern-verse--home {
    right: clamp(36px, 5vw, 84px);
    bottom: clamp(42px, 9vh, 104px);
    text-align: right;
}

.citd-lantern-verse--about {
    left: clamp(36px, 5vw, 84px);
    top: 68vh;
}

.citd-lantern-verse--journal {
    right: clamp(36px, 5vw, 84px);
    top: 24vh;
    text-align: right;
}

/*
 * Font ascenders and descenders must never be cropped by reveal masks or
 * fixed line boxes. These rules repair the visual layer without changing the
 * words or the intended typography scale.
 */
main :is(h1, h2, h3),
.citd-motion-heading,
.citd-motion-heading.is-in-view {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    padding-top: .1em;
    padding-bottom: .22em;
    box-sizing: border-box;
}

.citd-heading-safe,
.citd-heading-safe-parent {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    contain: none !important;
}

/* A quiet moving editorial field replaces the empty black Journal hero. */
.citd-journal-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.citd-journal-hero::before,
.citd-journal-hero::after {
    content: '';
    position: absolute;
    inset: -18%;
    z-index: 0;
    pointer-events: none;
}

.citd-journal-hero::before {
    background:
        radial-gradient(circle at 76% 26%, rgba(189, 169, 132, .15), transparent 30%),
        radial-gradient(circle at 28% 82%, rgba(98, 104, 111, .12), transparent 34%),
        linear-gradient(132deg, #030303 12%, #111 52%, #060606 88%);
    transform: scale(1.05);
    animation: citd-journal-drift 18s ease-in-out infinite alternate;
}

.citd-journal-hero::after {
    opacity: .16;
    background-image:
        repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 72px),
        repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 72px);
    -webkit-mask-image: linear-gradient(110deg, transparent 8%, #000 48%, transparent 90%);
    mask-image: linear-gradient(110deg, transparent 8%, #000 48%, transparent 90%);
    animation: citd-journal-grid 24s linear infinite;
}

.citd-journal-hero > * {
    position: relative;
    z-index: 1;
}

@keyframes citd-journal-drift {
    from { transform: translate3d(-1.5%, -1%, 0) scale(1.05); }
    to { transform: translate3d(1.5%, 1%, 0) scale(1.09); }
}

@keyframes citd-journal-grid {
    from { transform: translate3d(-18px, 0, 0); }
    to { transform: translate3d(54px, 0, 0); }
}

.citd-hero-content,
.citd-about-hero-content,
.citd-page-hero-content,
.citd-journal-featured-content,
.citd-journal-article-header,
main section > .citd-container,
main section > .citd-about-wrap,
main section > .citd-journal-container {
    position: relative;
    z-index: 2;
}

.citd-hero-media,
.citd-brand-media,
.citd-editorial-media {
    z-index: 0;
}

#citd-header {
    z-index: 1000;
}

@media (max-width: 900px), (pointer: coarse), (prefers-reduced-motion: reduce) {
    .citd-cursor-light,
    .citd-lantern-verse,
    .citd-colour-reveal__image {
        display: none !important;
    }

    .citd-journal-hero::before,
    .citd-journal-hero::after {
        animation: none !important;
    }
}