/* ==========================================================================
   OTT Editorial Layer
   --------------------------------------------------------------------------
   The lessons and the ceremonies look hand-made. The member dashboard, the
   vetting status page, the class catalog and the Story page look like a
   Joomla admin panel. This is the small shared vocabulary that lets the
   editorial voice out of those two rooms.

   HOUSE RULES OBSERVED HERE

   1. Every colour is var(--ott-…, <dungeon-hex>). theme-base.css (which
      defines the --ott-surface-* aliases) is NOT loaded under the Dungeon
      theme, so the fallback IS Dungeon's look. Same law custom.css follows.

   2. No web fonts. The site loads none today, and a members-only area for a
      kink community should not be making third-party font requests that leak
      a referrer. The display face is a system serif stack — it reads as
      "printed" against the body sans without costing a request or a byte.

   3. Chrome, not cutscene. The ceremonies deliberately pin a fixed
      leather-and-bronze palette because they are full-screen cinematic
      moments. Page chrome is the opposite: it must follow whichever of the
      12 themes the member chose, including High Contrast.

   4. Nothing here sets a colour on a surface it does not also set a
      background for, so a token resolving unexpectedly cannot produce
      dark-on-dark. Contrast pairs are taken from the theme, never invented.

   5. No layout ownership. This layer styles headers, rules and panel
      treatment. It never sets widths, floats or grid on component markup —
      components keep their own layout.
   ========================================================================== */

.ott-editorial {
    --ott-ed-ink: var(--ott-surface-ink, #cfc3ae);
    --ott-ed-strong: var(--ott-surface-ink-strong, #f0e6d2);
    --ott-ed-accent: var(--ott-surface-accent, #b87333);
    --ott-ed-rule: var(--ott-surface-border, #4a3f30);
    --ott-ed-panel: var(--ott-surface, #15110d);
    --ott-ed-panel-2: var(--ott-surface-2, #1c1712);

    /* A serif with real presence, from what the OS already has. */
    --ott-ed-display: "Iowan Old Style", "Palatino Linotype", Palatino,
        "Book Antiqua", Georgia, "Times New Roman", serif;
}

/* --- the page opening ---------------------------------------------------- */

.ott-editorial-head {
    margin: 0 0 1.75rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--ott-ed-rule);
}

/* The eyebrow carries its own fallback chain rather than relying on the
   .ott-editorial locals: it is the piece most likely to be reused on a page
   that hasn't opted into the wrapper, and an eyebrow with no colour is an
   invisible eyebrow. */
.ott-editorial-eyebrow {
    display: block;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--ott-ed-accent, var(--ott-surface-accent, #b87333));
    margin: 0 0 .5rem;
}

.ott-editorial-head h1,
.ott-editorial-title {
    font-family: var(--ott-ed-display);
    font-weight: 600;
    font-size: clamp(1.9rem, 4.2vw, 2.9rem);
    line-height: 1.15;
    letter-spacing: .01em;
    color: var(--ott-ed-strong);
    margin: 0;
}

/* The standfirst: the one paragraph that says what this page is for. */
.ott-editorial-standfirst {
    font-family: var(--ott-ed-display);
    font-size: clamp(1.02rem, 1.9vw, 1.2rem);
    line-height: 1.6;
    color: var(--ott-ed-ink);
    opacity: .92;
    max-width: 62ch;
    margin: .7rem 0 0;
}

/* --- section rhythm ------------------------------------------------------ */

.ott-editorial-section {
    margin: 0 0 2rem;
}

.ott-editorial-section > h2,
.ott-editorial-subhead {
    font-family: var(--ott-ed-display);
    font-weight: 600;
    font-size: clamp(1.2rem, 2.4vw, 1.5rem);
    letter-spacing: .01em;
    color: var(--ott-ed-strong);
    margin: 0 0 .2rem;
}

/* A hairline with a centred diamond — the ceremonies' one piece of
   ornament, reduced to something quiet enough for a page. */
.ott-editorial-rule {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin: 2rem 0;
    color: var(--ott-ed-rule);
}
.ott-editorial-rule::before,
.ott-editorial-rule::after {
    content: "";
    flex: 1;
    height: 1px;
    background: currentColor;
}
.ott-editorial-rule::after { opacity: .55; }
.ott-editorial-rule > span {
    font-size: .62rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--ott-ed-accent);
    white-space: nowrap;
}

/* --- panels -------------------------------------------------------------- */

/* Applied ALONGSIDE Bootstrap's .card, not instead of it: the components
   keep their structure and this only re-skins the surface. */
.ott-editorial .card,
.ott-editorial-panel {
    background: var(--ott-ed-panel);
    border: 1px solid var(--ott-ed-rule);
    border-radius: .3rem;
}

.ott-editorial .card-header {
    background: var(--ott-ed-panel-2);
    border-bottom: 1px solid var(--ott-ed-rule);
    font-family: var(--ott-ed-display);
    font-size: 1.02rem;
    letter-spacing: .01em;
    color: var(--ott-ed-strong);
}

/* The one flourish worth keeping: a hairline accent along the top edge of a
   panel the page wants to lead with. Opt-in per panel. */
.ott-editorial-panel--lead {
    position: relative;
    overflow: hidden;
}
.ott-editorial-panel--lead::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--ott-ed-accent) 22%,
        var(--ott-ed-accent) 78%,
        transparent
    );
    opacity: .75;
}

/* --- quiet metadata ------------------------------------------------------ */

.ott-editorial-meta {
    font-size: .82rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ott-ed-ink);
    opacity: .78;
}

/* --- reduced motion / print --------------------------------------------- */
/* Nothing animates here, so there is no motion guard to write. */

@media print {
    .ott-editorial-rule::before,
    .ott-editorial-rule::after { background: #999; }
    .ott-editorial .card,
    .ott-editorial-panel { border-color: #999; }
}