/*
 * Night library: the original site, warmed toward candlelight.
 * Loaded after index.css. The colours themselves were moved from ember red to candle gold in
 * index.css; this layer adds the reading face for section headings and 19th-century engravings
 * ghosted behind the text of each screenshot row.
 */

/* The YouTube mark sits on the wordmark's centre line (measured: 4px low) */

.youtube-icon { translate: 0 -4px; }

/* Section headings in Cormorant Garamond; headings elsewhere are Cinzel */
.showcase-text h3 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
    font-size: 2.15rem;
    line-height: 1.1;
    letter-spacing: 0;
}

/* ── Engravings as atmosphere ──
   Each row carries a public-domain Gustave Doré engraving, inverted so its ink reads as faint candlelit lines
   on the dark, fading out from behind the text. Never on top of anything; purely ambient. */
/* the engravings reach past the rows; keep the page from scrolling sideways */
.showcase-section { overflow-x: clip; }
.showcase-row {
    position: relative;
    isolation: isolate;
}
.showcase-row::after {
    content: '';
    position: absolute;
    top: -14%;
    bottom: -14%;
    right: -4%;
    width: 46%;
    z-index: -1;
    pointer-events: none;
    background: var(--atmos) center / cover no-repeat;
    opacity: 0.3;
    -webkit-mask-image: radial-gradient(ellipse 58% 60% at 50% 50%, #000 40%, transparent 82%);
    mask-image: radial-gradient(ellipse 58% 60% at 50% 50%, #000 40%, transparent 82%);
}
.showcase-row.reverse::after {
    right: auto;
    left: -4%;
}

/* Screenshot frames about 20% smaller than the original 64% / 1150px, giving the text and engravings room */
.showcase-media {
    flex: 0 0 51%;
    max-width: min(51%, 920px);
}

/* ── The details under each row ──
   No divider rule across the engraving: a short list, one detail per line, with the gold diamond. */
.showcase-spec-line {
    border-top: 0;
    margin-top: 0.4rem;
    padding-top: 0;
    display: grid;
    gap: 0.35rem;
    font-size: 0.86rem;
    line-height: 1.45;
    color: rgba(239, 231, 214, 0.72);
}
.showcase-spec-line .sep { display: none; }
.showcase-spec-line .spec {
    display: grid;
    grid-template-columns: 1rem 1fr;
    align-items: center;
}
.showcase-spec-line .spec::before {
    content: '';
    width: 0.38rem;
    height: 0.38rem;
    background: rgb(212, 181, 122);
    transform: translateY(-0.08em) rotate(45deg);
}

@media (max-width: 980px) {
    /* Stacked rows (from 980px, where index.css stacks them) read top to bottom:
       engraving band, the heading over its lower edge, the screenshot it
       introduces, then the paragraph and details. The text block's children
       join the row's own order so the heading can sit above the screenshot. */
    .showcase-row,
    .showcase-row.reverse { gap: 0; align-items: stretch; text-align: left; }
    .showcase-row::after {
        position: relative;
        display: block;
        order: 0;
        top: auto;
        right: auto;
        left: auto;
        bottom: auto;
        width: calc(100% + 2rem);
        margin: 0 -1rem -3.25rem;
        height: 200px;
        opacity: 0.34;
        background-position: center 30%;
        -webkit-mask-image: radial-gradient(ellipse 60% 62% at 50% 50%, #000 30%, transparent 78%);
        mask-image: radial-gradient(ellipse 60% 62% at 50% 50%, #000 30%, transparent 78%);
    }
    .showcase-text { display: contents; }
    .showcase-text h3 {
        order: 1;
        position: relative;
        z-index: 1;
        margin: 0 0 1.25rem;
        text-shadow: 0 2px 18px rgba(11, 11, 10, 0.9);
    }
    /* The frame needs a width of its own: a gallery's slides are absolutely
       positioned, so without one it collapsed to nothing. */
    .showcase-media {
        order: 2;
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        margin-bottom: 1.5rem;
    }
    .showcase-text > :not(h3) { order: 3; margin-top: 0; margin-bottom: 1rem; }
}
}

/* Design Your Own Document Types: a finished sheet, already framed to 3:2 */
.shot-template-story { object-position: 50% 0%; }

/* Text to Speech: the reader panel, already framed to 3:2 */
.shot-tts { object-position: 50% 0%; }

/* Languages: each name set in its own script, in place of a screenshot */
.showcase-languages {
    display: grid;
    place-items: center;
    background: radial-gradient(ellipse 80% 70% at 50% 45%, rgba(30, 27, 23, 0.95), rgba(14, 13, 11, 0.98));
}
.lang-list {
    list-style: none;
    margin: 0;
    padding: 2rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem 1.6rem;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
    font-size: clamp(1.6rem, 1rem + 2.2vw, 2.7rem);
    line-height: 1.4;
    color: #efe7d6;
    text-align: center;
}
.lang-list li:nth-child(even) { color: rgb(212, 181, 122); }

/* Top bar: brand anchored to the left edge, links and menu button at the right */
nav {
    max-width: none;
    display: grid;
    grid-template-columns: 1fr auto auto;
    padding-inline: clamp(1rem, 2.5vw, 2.5rem);
}
nav .logo-container { justify-self: start; }
nav .nav-links { justify-self: end; margin-right: 0; }
.nav-links .youtube-icon { translate: 0 0; }
nav .nav-cta-group { justify-self: end; grid-column: 3; }

/* ── Core values: three ruled columns, no decoration ── */
.value-card::before, .value-card::after { content: none !important; display: none !important; }
.values-title {
    font-family: 'Cinzel', 'Trajan Pro', Georgia, serif;
    font-weight: 600;
    font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem);
    letter-spacing: 6px;
    text-transform: uppercase;
    text-align: center;
    color: var(--splash-white);
    margin-bottom: 2.5rem;
}
.values-cards { gap: 0; }
.value-card {
    background: none;
    border: 0;
    border-left: 1px solid rgba(212, 181, 122, 0.35);
    box-shadow: none;
    text-align: left;
    padding: 0.4rem 2rem 0.6rem;
}
.value-card:first-child { border-left: 0; }
.value-card:hover { transform: none; background: none; box-shadow: none; border-color: rgba(212, 181, 122, 0.35); }
.value-card h4 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
    font-size: 1.75rem;
    letter-spacing: 0;
    margin-bottom: 0.6rem;
    color: var(--splash-white);
}
.value-card p { text-align: left; color: rgba(239, 231, 214, 0.75); }
@media (max-width: 900px) {
    .value-card { border-left: 0; border-top: 1px solid rgba(212, 181, 122, 0.35); padding: 1.4rem 0.2rem; }
    .value-card:first-child { border-top: 0; }
}

/* ── Square corners everywhere on the site ── */
*, *::before, *::after { border-radius: 0 !important; }

/* Hero tagline: one line on desktop, balanced wrap on phones */
.hero p { max-width: 920px; text-wrap: balance; }