/* ==========================================================================
   Handmaids: Keepers of the Lamp
   ==========================================================================

   The palette is six values and they are declared once. Two of them may
   never carry text, and that is not a style preference - antique rose is
   3.0:1 on cream and Lamplight gold is worse. They are the flame and the
   ornament. Marian blue and ink do the reading.

   Mrs Eaves XL is an Adobe Fonts project that is not live yet, so the
   headings fall back to a serif stack that holds the same shape. When the
   project is published, one @import and the --font-display line change.
   ========================================================================== */

:root {
    --blue: #1E3461;
    --blue-deep: #16274A;
    --rose: #C7818D;
    --blush: #F2DCE0;
    --cream: #F7F1E8;
    --gold: #C9A227;
    --ink: #22263A;

    --ink-soft: #55596B;
    --line: rgba(30, 52, 97, 0.14);

    --font-display: 'Mrs Eaves XL Serif', 'Iowan Old Style', 'Palatino Linotype',
        Palatino, Georgia, 'Times New Roman', serif;
    --font-body: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
        'Helvetica Neue', Arial, sans-serif;

    --measure: 38rem;
    --page: 70rem;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.65;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--blue);
    line-height: 1.2;
    font-weight: 600;
    margin: 0 0 0.5em;
}

h1 { font-size: clamp(2rem, 5vw, 2.9rem); }
h2 { font-size: clamp(1.5rem, 3.4vw, 2rem); }
h3 { font-size: 1.25rem; }

p, ul, ol { margin: 0 0 1.1em; }

a {
    color: var(--blue);
    text-underline-offset: 0.15em;
}

a:hover { color: var(--blue-deep); }

/* Keyboard users get the same affordance a mouse gets. */
:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
    border-radius: 2px;
}

img { max-width: 100%; height: auto; }

.wrap {
    width: 100%;
    max-width: var(--page);
    margin: 0 auto;
    padding: 0 1.25rem;
}

.measure { max-width: var(--measure); }

/* The Latin motto, wherever it appears. */
.motto {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--blue);
}

.motto small {
    display: block;
    font-style: normal;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */

.masthead {
    background: #fff;
    border-bottom: 1px solid var(--line);
}

.masthead__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
}

.wordmark {
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--blue);
    text-decoration: none;
    line-height: 1.15;
    margin-right: auto;
}

.wordmark span {
    display: block;
    font-family: var(--font-body);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav a {
    display: inline-block;
    padding: 0.35rem 0;
    font-size: 0.95rem;
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

.nav a:hover,
.nav a[aria-current='page'] {
    border-bottom-color: var(--gold);
}

/* --------------------------------------------------------------------------
   Blocks
   -------------------------------------------------------------------------- */

.hero {
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding: 3rem 0 3.25rem;
}

.section { padding: 2.75rem 0; }
.section--tint { background: var(--blush); }
.section--white { background: #fff; }

.lede {
    font-size: 1.2rem;
    color: var(--ink-soft);
}

.rule-gold {
    border: 0;
    border-top: 2px solid var(--gold);
    width: 3.5rem;
    margin: 1.4rem 0;
}

.card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 1.35rem 1.4rem;
}

.grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
    display: inline-block;
    padding: 0.7rem 1.25rem;
    border: 1px solid var(--blue);
    border-radius: 2px;
    background: var(--blue);
    color: #fff;
    font: inherit;
    font-size: 0.98rem;
    text-decoration: none;
    cursor: pointer;
}

.btn:hover { background: var(--blue-deep); color: #fff; }

.btn--quiet {
    background: transparent;
    color: var(--blue);
}

.btn--quiet:hover { background: rgba(30, 52, 97, 0.06); color: var(--blue); }

.btn[disabled] { opacity: 0.55; cursor: default; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.field { margin-bottom: 1.05rem; }

.field label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--blue);
    margin-bottom: 0.3rem;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 2px;
    background: #fff;
    color: var(--ink);
    font: inherit;
}

.field .hint {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.85rem;
    color: var(--ink-soft);
    font-weight: 400;
}

.field--error input,
.field--error select,
.field--error textarea { border-color: #B3261E; }

.error {
    color: #B3261E;
    font-size: 0.88rem;
    margin-top: 0.3rem;
}

/* Never rendered. A form filled in by something that fills in everything is
   a form filled in by a robot. */
.trap {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.notice {
    padding: 0.85rem 1rem;
    border-left: 3px solid var(--gold);
    background: #fff;
    margin-bottom: 1.25rem;
}

.notice--bad { border-left-color: #B3261E; }

/* --------------------------------------------------------------------------
   Copy still to come
   -------------------------------------------------------------------------- */

/* Deliberately loud. The brief says not to write public-facing copy, so every
   place waiting for the copy set says so until it arrives - visible to
   whoever is reviewing the page, impossible to ship by accident. */
.placeholder {
    border: 1px dashed var(--rose);
    background: rgba(199, 129, 141, 0.09);
    padding: 0.8rem 1rem;
    border-radius: 2px;
    color: var(--ink-soft);
    font-size: 0.92rem;
}

.placeholder::before {
    content: 'Copy set';
    display: block;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rose);
    margin-bottom: 0.2rem;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
    background: var(--blue);
    color: rgba(255, 255, 255, 0.82);
    padding: 2.25rem 0;
    margin-top: 3rem;
    font-size: 0.92rem;
}

.footer a { color: #fff; }

.footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    list-style: none;
    margin: 0 0 1.1rem;
    padding: 0;
}

.footer__legal {
    margin: 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
}

.skip {
    position: absolute;
    left: -9999px;
}

.skip:focus {
    left: 1rem;
    top: 1rem;
    z-index: 10;
    background: #fff;
    padding: 0.6rem 1rem;
}

/* ==========================================================================
   The Preview
   ========================================================================== */

.gate {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.25rem;
    background: var(--cream);
}

.gate__panel {
    width: 100%;
    max-width: 24rem;
    background: #fff;
    border: 1px solid var(--line);
    border-top: 3px solid var(--gold);
    border-radius: 3px;
    padding: 2rem 1.75rem;
}

.reader__bar {
    background: #fff;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 5;
}

.reader__bar-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 0.8rem;
    padding-bottom: 0.6rem;
}

.reader__for {
    margin: 0 auto 0 0;
    font-size: 0.85rem;
    color: var(--ink-soft);
}

.reader__tabs {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    padding-bottom: 0;
}

.reader__tabs a {
    padding: 0.5rem 0 0.6rem;
    font-size: 0.95rem;
    white-space: nowrap;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    color: var(--ink-soft);
}

.reader__tabs a[aria-current='page'] {
    color: var(--blue);
    font-weight: 600;
    border-bottom-color: var(--gold);
}

.reader {
    display: grid;
    gap: 2.5rem;
    padding: 2rem 1.25rem 4rem;
    align-items: start;
}

@media (min-width: 60rem) {
    .reader { grid-template-columns: 16rem 1fr; }
}

/* Sticky and scrollable: the Rule's contents are themselves taller than the
   window, so a sticky column that cannot scroll hides half of them. */
.reader__toc {
    position: sticky;
    top: 7rem;
    max-height: calc(100vh - 9rem);
    overflow-y: auto;
    font-size: 0.9rem;
}

.reader__toc-label {
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 0.6rem;
}

.reader__toc ul { list-style: none; margin: 0; padding: 0; }
.reader__toc li { margin-bottom: 0.3rem; }
.reader__toc li.lvl-3 { padding-left: 0.9rem; font-size: 0.86rem; }
.reader__toc a { text-decoration: none; color: var(--ink-soft); }
.reader__toc a:hover { color: var(--blue); text-decoration: underline; }
.reader__toc li.lvl-2 a { color: var(--blue); font-weight: 600; }

.reader__body { max-width: 44rem; }

.reader__version {
    margin: -0.3rem 0 0;
    font-size: 0.9rem;
    color: var(--ink-soft);
}

.reader__rights {
    margin-top: 2.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    font-size: 0.85rem;
    color: var(--ink-soft);
}

.reader__ask {
    margin-top: 2rem;
    padding: 1.1rem 1.25rem;
    background: var(--blush);
    border-radius: 3px;
}

/* The rendered document itself. */
.prose h2 { margin-top: 2.2rem; scroll-margin-top: 8rem; }
.prose h3 { margin-top: 1.6rem; scroll-margin-top: 8rem; }
.prose h4 { margin-top: 1.2rem; font-size: 1.05rem; }

.prose blockquote {
    margin: 1.3rem 0;
    padding: 0.6rem 1.1rem;
    border-left: 3px solid var(--rose);
    background: rgba(242, 220, 224, 0.45);
    color: var(--ink);
}

.prose blockquote p:last-child { margin-bottom: 0; }

.prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.3rem 0;
    font-size: 0.95rem;
}

.prose thead th {
    background: var(--blue);
    color: #fff;
    text-align: left;
    font-weight: 600;
}

.prose th, .prose td {
    padding: 0.5rem 0.7rem;
    border-bottom: 1px solid var(--gold);
    vertical-align: top;
}

.prose li { margin-bottom: 0.35rem; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
.prose strong { color: var(--blue); }

.print-only { display: none; }

/* ==========================================================================
   Paper
   ==========================================================================
   A pastor prints the Rule and reads it with a pen. In colour, because the
   headings carry the program's blue and a packet printed flat grey loses the
   only thing distinguishing one document from another in a binder.
   ========================================================================== */

@media print {
    @page {
        margin: 18mm 16mm;
    }

    body { background: #fff; font-size: 10.5pt; }

    .print-hide, .masthead, .footer, .reader__toc, .reader__ask { display: none !important; }
    .print-only { display: block !important; }

    .print-header {
        border-bottom: 1px solid var(--gold);
        padding-bottom: 0.4rem;
        margin-bottom: 1.2rem;
        font-size: 9pt;
        color: var(--blue);
    }

    .reader { display: block; padding: 0; }
    .reader__body { max-width: none; }

    .prose h1, .prose h2, .prose h3,
    .reader__body h1 { break-after: avoid; page-break-after: avoid; }

    .prose table, .prose blockquote { break-inside: avoid; page-break-inside: avoid; }
    .prose thead { display: table-header-group; }
    .prose tr { break-inside: avoid; page-break-inside: avoid; }

    a { color: var(--blue); text-decoration: none; }

    /* Only real destinations. A mailto or an in-page anchor printed in full
       is noise on paper. */
    a[href^='http']::after {
        content: ' (' attr(href) ')';
        font-size: 8pt;
        word-break: break-all;
    }
}

/* Sign-up form */
.signup { margin-top: 1.4rem; }

.signup__pair { display: grid; gap: 0 1rem; }

@media (min-width: 34rem) {
    .signup__pair { grid-template-columns: 1fr 1fr; }
}

.field--check { margin-top: -0.4rem; }

.check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 400 !important;
    color: var(--ink) !important;
    cursor: pointer;
}

.check input { width: auto !important; }

/* Hidden by the "Outside the US" box. Honoured here because [hidden] loses to
   the display rule the fields otherwise carry. */
[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   The marks
   --------------------------------------------------------------------------
   Two of them, for two jobs. The emblem is the full seal and carries the
   program's name in its ribbon, so it goes where there is room to read it.
   The simple mark - the lamp on a corporal - has no words in it, which is
   exactly why it survives at 32px where the emblem becomes a smudge.
   -------------------------------------------------------------------------- */

.wordmark {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.wordmark img { display: block; }

.wordmark__text { display: block; }

.gate__emblem {
    display: block;
    margin: 0 auto 0.9rem;
    width: 150px;
    height: auto;
}

.gate__mark {
    display: block;
    margin: 0 auto 0.9rem;
    width: 56px;
    height: auto;
}

/* Emblem left, everything else to its right, stacking on a phone. Big enough
   that the ribbon reads as words - at 72px it was a texture. */
.footer__grid {
    display: grid;
    gap: 1.5rem 2.25rem;
    align-items: start;
}

@media (min-width: 46rem) {
    .footer__grid { grid-template-columns: auto minmax(0, 1fr); }
}

.footer__emblem {
    display: block;
    width: 140px;
    justify-self: center;
    /* Line art drawn in Marian blue, sitting on Marian blue. Inverting it is
       the only way it reads - and it is a mark, not a logo with rules about
       recolouring. Kept near full strength now that it is large enough to be
       read rather than sensed. */
    filter: brightness(0) invert(1);
    opacity: 0.88;
}

.footer__emblem img { display: block; width: 100%; height: auto; }

@media (min-width: 46rem) {
    .footer__emblem { width: 180px; justify-self: start; }
}

.print-header__mark {
    float: right;
    width: 34px;
    height: auto;
    margin-left: 1rem;
}

/* The hero: words left, emblem right, stacking on a phone with the words
   first - which is why the emblem is last in the source order. */
.hero__grid {
    display: grid;
    gap: 1.75rem 3rem;
    align-items: center;
}

.hero__emblem {
    display: block;
    justify-self: center;
    max-width: 220px;
}

.hero__emblem img { display: block; width: 100%; height: auto; }

@media (min-width: 60rem) {
    .hero__grid { grid-template-columns: minmax(0, 1fr) auto; }
    .hero__emblem { max-width: 320px; justify-self: end; }
}