/* The plates the orientation guide stands its evidence on: the photographic
   plate, the decision table, the question set and the closing source field.

   Tokens and the shared motion layer live in orientation-garden-article.css,
   which this sheet is enqueued behind. */

/* Figures ----------------------------------------------------------------- */

.gi-orientation-article .gi-orientation-figure {
    background: var(--gi-o-paper);
    border: 1px solid var(--gi-o-line);
    border-radius: var(--gi-o-plate);
    box-shadow: var(--gi-o-lift);
    counter-increment: gi-o-figure;
    margin-block: clamp(2rem, 4vw, 3rem);
    margin-inline: 0;
    max-width: none;
    overflow: hidden;
    width: 100%;
}

.gi-orientation-article .gi-orientation-figure .gi-orientation-figure__image {
    border-radius: 0;
    display: block;
    height: auto;
    transition: transform 900ms var(--gi-ease);
    width: 100%;
}

.gi-orientation-article .gi-orientation-figure:hover .gi-orientation-figure__image {
    transform: scale(1.022);
}

.gi-orientation-article .gi-orientation-figure .gi-orientation-figure__caption {
    background: var(--gi-o-wash);
    border-top: 1px solid var(--gi-o-line);
    color: var(--gi-muted);
    font-size: .845rem;
    line-height: 1.55;
    margin: 0;
    max-width: none;
    padding: .95rem clamp(1.05rem, 2.2vw, 1.5rem) 1.05rem;
    text-align: start;
}

.gi-orientation-article .gi-orientation-figure__caption::before {
    color: var(--gi-o-accent);
    content: 'Fig. ' counter(gi-o-figure);
    display: block;
    font-size: .66rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    letter-spacing: .16em;
    margin-bottom: .3rem;
    text-transform: uppercase;
}

/* Tables ------------------------------------------------------------------ */

.gi-orientation-article .gi-content-table:has(.gi-orientation-table) {
    background: var(--gi-o-paper);
    border: 1px solid var(--gi-o-line);
    border-radius: var(--gi-o-plate);
    box-shadow: var(--gi-o-lift);
    counter-increment: gi-o-table;
    margin-block: clamp(2rem, 4vw, 3rem);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding: 0;
}

.gi-orientation-article .gi-content-table .gi-orientation-table {
    border: 0;
    border-collapse: collapse;
    display: table;
    font-size: .92rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.55;
    margin: 0;
    min-width: 40rem;
    overflow: visible;
    table-layout: auto;
    width: 100%;
}

.gi-orientation-article .gi-orientation-table .gi-orientation-table__caption {
    background: var(--gi-o-paper);
    caption-side: top;
    color: var(--gi-o-ink);
    font-size: clamp(1rem, .95rem + .2vw, 1.1rem);
    font-weight: 750;
    letter-spacing: -.02em;
    padding: clamp(1rem, 2.2vw, 1.4rem) clamp(1rem, 2.2vw, 1.4rem) .95rem;
    text-align: start;
}

.gi-orientation-article .gi-orientation-table__caption::before {
    color: var(--gi-o-accent);
    content: 'Tableau ' counter(gi-o-table);
    display: block;
    font-size: .66rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    letter-spacing: .16em;
    margin-bottom: .35rem;
    text-transform: uppercase;
}

.gi-orientation-article .gi-orientation-table :is(.gi-orientation-table__heading, .gi-orientation-table__cell) {
    border: 0;
    border-top: 1px solid var(--gi-o-line);
    padding: .92rem clamp(.85rem, 1.6vw, 1.15rem);
    text-align: start;
    vertical-align: top;
}

/* The column band is the one place the rubric takes a full surface inside the
   reading column: it is what makes a decision table read as a table. */
.gi-orientation-article .gi-orientation-table .gi-orientation-table__heading--column {
    background: var(--gi-o-ground);
    border-top: 0;
    color: color-mix(in oklch, var(--gi-o-paper) 94%, var(--gi-o-ground));
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .11em;
    line-height: 1.35;
    text-transform: uppercase;
}

.gi-orientation-article .gi-orientation-table .gi-orientation-table__heading--row {
    background: var(--gi-o-wash);
    color: var(--gi-o-ink);
    font-weight: 750;
    width: 30%;
}

.gi-orientation-article .gi-orientation-table .gi-orientation-table__cell {
    background: var(--gi-o-paper);
    color: var(--gi-o-body);
    transition: background-color 200ms var(--gi-ease);
}

.gi-orientation-article .gi-orientation-table__body .gi-orientation-table__row:hover .gi-orientation-table__cell {
    background: color-mix(in oklch, var(--gi-o-wash) 62%, var(--gi-o-paper));
}

.gi-orientation-article .gi-orientation-table__body .gi-orientation-table__row:hover .gi-orientation-table__heading--row {
    background: color-mix(in oklch, var(--gi-o-line) 42%, var(--gi-o-wash));
}

/* Questions --------------------------------------------------------------- */

.gi-orientation-article .gi-orientation-section.gi-orientation-section--role-faq {
    background: var(--gi-o-wash);
    border-radius: clamp(1rem, 2vw, 1.6rem);
    margin-top: clamp(3.25rem, 6vw, 5.25rem);
    padding: clamp(3.6rem, 5.5vw, 4.75rem) clamp(1.4rem, 3.4vw, 2.75rem) clamp(1.75rem, 3.4vw, 2.75rem);
}

.gi-orientation-article .gi-orientation-section.gi-orientation-section--role-faq::after {
    box-shadow: none;
    inset-inline-start: clamp(1.4rem, 3.4vw, 2.75rem);
    top: clamp(1.6rem, 3.2vw, 2.4rem);
}

.gi-orientation-article .gi-orientation-faq__question {
    border-top: 1px solid color-mix(in oklch, var(--gi-o-line) 70%, transparent);
    counter-increment: gi-o-question;
    font-size: clamp(1.1rem, 1.02rem + .32vw, 1.28rem);
    margin: 1.6rem 0 .7rem;
    max-width: 40ch;
    padding: 1.6rem 0 0 2.9rem;
    position: relative;
}

.gi-orientation-article .gi-orientation-section--role-faq > .gi-orientation-faq__question:first-of-type {
    border-top: 0;
    margin-top: 1.9rem;
    padding-top: 0;
}

.gi-orientation-article .gi-orientation-faq__question::before {
    align-items: center;
    background: var(--gi-o-paper);
    border-radius: .45rem;
    color: var(--gi-o-accent);
    content: 'Q' counter(gi-o-question);
    display: flex;
    font-size: .68rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    height: 1.7rem;
    inset-inline-start: 0;
    justify-content: center;
    letter-spacing: .06em;
    position: absolute;
    top: 1.55rem;
    width: 2.1rem;
}

.gi-orientation-article .gi-orientation-section--role-faq > .gi-orientation-faq__question:first-of-type::before {
    top: .02rem;
}

.gi-orientation-article .gi-orientation-faq__answer {
    margin-bottom: 0;
    max-width: 62ch;
    padding-inline-start: 2.9rem;
}

/* Sources ----------------------------------------------------------------- */

/* The article ends on its evidence, on a dark plate that closes the read the
   way the hero opened it. */
.gi-orientation-article .gi-orientation-section.gi-orientation-section--role-sources {
    --gi-focus: var(--gi-o-glow);
    background: linear-gradient(168deg, var(--gi-o-ground), var(--gi-o-deep));
    border-radius: clamp(1rem, 2vw, 1.6rem);
    color: color-mix(in oklch, var(--gi-o-paper) 86%, var(--gi-o-ground));
    margin-top: clamp(3.25rem, 6vw, 5.25rem);
    overflow: hidden;
    padding: clamp(3.6rem, 5.5vw, 4.75rem) clamp(1.4rem, 3.4vw, 2.75rem) clamp(1.9rem, 3.4vw, 3rem);
}

.gi-orientation-article .gi-orientation-section.gi-orientation-section--role-sources > * {
    position: relative;
    z-index: 1;
}

.gi-orientation-article .gi-orientation-section.gi-orientation-section--role-sources::after {
    background: var(--gi-o-glow);
    box-shadow: none;
    color: var(--gi-o-ground);
    inset-inline-start: clamp(1.4rem, 3.4vw, 2.75rem);
    top: clamp(1.6rem, 3.2vw, 2.4rem);
    z-index: 2;
}

/* The house sprig, dropped into the plate the way the hero carries it. */
.gi-orientation-article .gi-orientation-section--role-sources .gi-orientation-section__title::after {
    background: currentColor;
    color: var(--gi-o-glow);
    content: '';
    height: 26rem;
    inset-inline-end: -3.5rem;
    -webkit-mask: url('../images/botanical-sprig-mark.svg') no-repeat center / contain;
    mask: url('../images/botanical-sprig-mark.svg') no-repeat center / contain;
    opacity: .09;
    pointer-events: none;
    position: absolute;
    top: -6rem;
    width: 13rem;
    z-index: 0;
}

.gi-orientation-article .gi-orientation-section--role-sources .gi-orientation-section__title {
    color: var(--gi-o-paper);
}

.gi-orientation-article .gi-orientation-section--role-sources .gi-orientation-prose {
    color: color-mix(in oklch, var(--gi-o-paper) 80%, var(--gi-o-ground));
    max-width: 62ch;
}

.gi-orientation-article .gi-orientation-list--sources {
    counter-reset: gi-o-source;
    display: grid;
    font-size: .95rem;
    gap: 1.05rem;
    line-height: 1.65;
    margin-block: 1.9rem;
    max-width: 74ch;
}

.gi-orientation-article .gi-orientation-list__item--sources {
    counter-increment: gi-o-source;
    isolation: isolate;
    padding-inline-start: 2.6rem;
    position: relative;
    scroll-margin-top: 7rem;
}

.gi-orientation-article .gi-orientation-list__item--sources::before {
    align-items: center;
    background: color-mix(in oklch, var(--gi-o-glow) 20%, transparent);
    border-radius: .4rem;
    color: var(--gi-o-glow);
    content: counter(gi-o-source);
    display: flex;
    font-size: .72rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    height: 1.6rem;
    inset-inline-start: 0;
    justify-content: center;
    position: absolute;
    top: .1rem;
    width: 1.6rem;
}

/* Arriving from a footnote marker, the reference names itself for a moment. */
.gi-orientation-article .gi-orientation-list__item--sources:target::after {
    animation: gi-o-cited 2.2s var(--gi-ease) forwards;
    background: var(--gi-o-glow);
    border-radius: .55rem;
    content: '';
    inset: -.6rem -.75rem;
    pointer-events: none;
    position: absolute;
    z-index: -1;
}

.gi-orientation-article .gi-orientation-section--role-sources .gi-orientation-link {
    color: var(--gi-o-glow);
    text-decoration-color: color-mix(in oklch, var(--gi-o-glow) 40%, transparent);
}

.gi-orientation-article .gi-orientation-section--role-sources .gi-orientation-link:hover {
    color: var(--gi-o-paper);
    text-decoration-color: currentColor;
}

@keyframes gi-o-cited {
    0% { opacity: 0; }
    12% { opacity: .18; }
    100% { opacity: 0; }
}

/* Narrow ------------------------------------------------------------------ */

@media (max-width: 44rem) {
    /* A three-column decision table cannot be read through a 350px window, so
       each row becomes its own block and every value carries the column name
       the band used to supply. The head stays in the accessibility tree. */
    .gi-orientation-article .gi-content-table:has(.gi-orientation-table) {
        overflow-x: visible;
    }

    .gi-orientation-article .gi-content-table .gi-orientation-table {
        display: block;
        min-width: 0;
    }

    .gi-orientation-article .gi-orientation-table :is(.gi-orientation-table__body, .gi-orientation-table__row, .gi-orientation-table__heading, .gi-orientation-table__cell) {
        display: block;
        width: auto;
    }

    .gi-orientation-article .gi-orientation-table .gi-orientation-table__caption {
        display: block;
    }

    .gi-orientation-article .gi-orientation-table .gi-orientation-table__head {
        block-size: 1px;
        clip-path: inset(50%);
        inline-size: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
    }

    .gi-orientation-article .gi-orientation-table .gi-orientation-table__row {
        border-top: 1px solid var(--gi-o-line);
        padding: 1.1rem clamp(1rem, 4vw, 1.4rem) 1.25rem;
    }

    .gi-orientation-article .gi-orientation-table :is(.gi-orientation-table__heading, .gi-orientation-table__cell) {
        background: transparent;
        border: 0;
        font-size: .92rem;
        padding: 0;
    }

    .gi-orientation-article .gi-orientation-table .gi-orientation-table__heading--row {
        color: var(--gi-o-ink);
        font-size: 1.02rem;
        letter-spacing: -.018em;
        margin-bottom: .55rem;
    }

    .gi-orientation-article .gi-orientation-table .gi-orientation-table__cell + .gi-orientation-table__cell {
        margin-top: .8rem;
    }

    .gi-orientation-article .gi-orientation-table .gi-orientation-table__cell[data-gi-column]::before {
        color: var(--gi-o-accent);
        content: attr(data-gi-column);
        display: block;
        font-size: .63rem;
        font-weight: 800;
        letter-spacing: .13em;
        margin-bottom: .18rem;
        text-transform: uppercase;
    }

    .gi-orientation-article .gi-orientation-faq__question,
    .gi-orientation-article .gi-orientation-faq__answer {
        padding-inline-start: 0;
    }

    .gi-orientation-article .gi-orientation-faq__question {
        padding-top: 3.1rem;
    }

    .gi-orientation-article .gi-orientation-faq__question::before {
        top: 1.5rem;
    }

    .gi-orientation-article .gi-orientation-section--role-faq > .gi-orientation-faq__question:first-of-type {
        padding-top: 2.1rem;
    }

    .gi-orientation-article .gi-orientation-section--role-faq > .gi-orientation-faq__question:first-of-type::before {
        top: 0;
    }

    .gi-orientation-article .gi-orientation-section--role-sources .gi-orientation-section__title::after {
        height: 18rem;
        inset-inline-end: -2.5rem;
        width: 9rem;
    }
}