/* The orientation guide is a method, not an essay: a procedure, three decision
   tables, a set of observations, a checklist and a reference list. This sheet
   gives each of those jobs its own surface so a reader can see the structure
   before reading a word, while the reading column itself stays paper.

   Everything reads the rubric tokens from palette.css, so the article turns with
   its category instead of hard-coding one green. Selectors are scoped to
   .gi-orientation-article, which clears editorial-content.css on specificity and
   removes the !important ladder the previous revision needed. */

.gi-orientation-article {
    --gi-o-ground: var(--gi-cat-ground);
    --gi-o-deep: var(--gi-cat-deep);
    --gi-o-ink: var(--gi-cat-ground);
    --gi-o-accent: var(--gi-cat-ink);
    --gi-o-glow: var(--gi-cat-accent);
    --gi-o-wash: var(--gi-cat-wash);
    --gi-o-line: var(--gi-cat-line);
    --gi-o-paper: var(--gi-ivory-50);
    --gi-o-body: var(--gi-ink);
    --gi-o-warn: var(--gi-clay-600);
    --gi-o-measure: 66ch;
    --gi-o-plate: clamp(.9rem, 1.7vw, 1.4rem);
    --gi-o-lift:
        0 1px 2px color-mix(in oklch, var(--gi-o-ground) 6%, transparent),
        0 18px 38px -22px color-mix(in oklch, var(--gi-o-ground) 34%, transparent);
    --gi-o-lift-strong:
        0 2px 4px color-mix(in oklch, var(--gi-o-ground) 8%, transparent),
        0 34px 70px -28px color-mix(in oklch, var(--gi-o-ground) 42%, transparent);

    color: var(--gi-o-body);
    counter-reset: gi-o-section gi-o-figure gi-o-table gi-o-question;
    isolation: isolate;
}

/* Sections ---------------------------------------------------------------- */

.gi-orientation-article .gi-orientation-section {
    position: relative;
    scroll-margin-top: 7rem;
}

.gi-orientation-article .gi-orientation-section:has(.gi-orientation-section__title) {
    counter-increment: gi-o-section;
}

.gi-orientation-article .gi-orientation-section + .gi-orientation-section {
    margin-top: clamp(3.25rem, 6vw, 5.25rem);
    padding-top: clamp(2.5rem, 4.5vw, 3.5rem);
}

/* A hairline that dissolves before the right edge reads as a section boundary
   rather than as a table border across the column. */
.gi-orientation-article .gi-orientation-section + .gi-orientation-section::before {
    background: linear-gradient(to right, var(--gi-o-line) 0 58%, transparent);
    content: '';
    height: 1px;
    inset-inline: 0;
    position: absolute;
    top: 0;
}

/* The numeral sits on the rule and breaks it, the way a stamped folio would. */
.gi-orientation-article .gi-orientation-section:has(.gi-orientation-section__title)::after {
    background: var(--gi-o-ground);
    border-radius: .4rem;
    box-shadow: 0 0 0 .5rem var(--gi-o-paper);
    color: var(--gi-o-paper);
    content: counter(gi-o-section, decimal-leading-zero);
    font-size: .72rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    left: 0;
    letter-spacing: .1em;
    line-height: 1;
    padding: .42rem .55rem .4rem;
    position: absolute;
    top: -.78rem;
}

/* A plate is its own boundary, so it takes the rule's place rather than sitting
   under one. */
.gi-orientation-article .gi-orientation-section.gi-orientation-section--role-faq::before,
.gi-orientation-article .gi-orientation-section.gi-orientation-section--role-sources::before {
    display: none;
}

.gi-orientation-article .gi-orientation-section__title {
    border: 0;
    color: var(--gi-o-ink);
    font-size: clamp(1.7rem, 1.15rem + 1.7vw, 2.55rem);
    font-weight: 750;
    letter-spacing: -.045em;
    line-height: 1.08;
    margin: 0 0 1.1rem;
    max-width: 22ch;
    padding: 0;
    text-wrap: balance;
}

.gi-orientation-article .gi-orientation-section__subtitle {
    color: var(--gi-o-ink);
    font-size: clamp(1.18rem, 1.05rem + .5vw, 1.45rem);
    font-weight: 750;
    letter-spacing: -.028em;
    line-height: 1.24;
    margin: 2.4rem 0 .85rem;
    max-width: 30ch;
    text-wrap: balance;
}

/* Prose ------------------------------------------------------------------- */

.gi-orientation-article .gi-orientation-prose {
    font-size: clamp(1.06rem, 1.01rem + .16vw, 1.16rem);
    line-height: 1.78;
    margin: 0 0 1.2em;
    max-width: var(--gi-o-measure);
    text-wrap: pretty;
}

.gi-orientation-article .gi-orientation-prose:last-child {
    margin-bottom: 0;
}

.gi-orientation-article :is(.gi-orientation-section--role-prose, .gi-orientation-section--role-pitfalls, .gi-orientation-section--role-checklist) .gi-orientation-prose--lead {
    color: color-mix(in oklch, var(--gi-o-ink) 82%, var(--gi-o-body));
    font-size: clamp(1.14rem, 1.05rem + .34vw, 1.34rem);
    line-height: 1.62;
    max-width: 56ch;
}

/* The article opens on a single statement of method, set larger than anything
   that follows so the page has one entrance. */
.gi-orientation-article .gi-orientation-section--role-opening .gi-orientation-prose--lead {
    color: var(--gi-o-ink);
    font-size: clamp(1.24rem, 1.1rem + .6vw, 1.58rem);
    font-weight: 500;
    letter-spacing: -.022em;
    line-height: 1.42;
    margin-bottom: 0;
    max-width: 44ch;
}

.gi-orientation-article .gi-orientation-emphasis {
    color: var(--gi-o-ink);
    font-weight: 720;
}

/* Links and citations ----------------------------------------------------- */

.gi-orientation-article .gi-orientation-link {
    color: var(--gi-o-accent);
    font-weight: 650;
    text-decoration: underline;
    text-decoration-color: color-mix(in oklch, var(--gi-o-accent) 32%, transparent);
    text-decoration-thickness: 1.5px;
    text-underline-offset: .18em;
    transition: color 180ms var(--gi-ease), text-decoration-color 180ms var(--gi-ease);
}

.gi-orientation-article .gi-orientation-link:hover {
    color: var(--gi-o-ground);
    text-decoration-color: currentColor;
}

/* A reader should know before the click whether a reference leaves the site. */
.gi-orientation-article .gi-orientation-link--external::after {
    content: '\2197';
    display: inline-block;
    font-size: .82em;
    font-weight: 700;
    margin-inline-start: .16em;
    text-decoration: none;
    transform: translateY(-.04em);
}

.gi-orientation-article .gi-orientation-citation {
    font-size: .64em;
    line-height: 0;
    margin-inline-start: .12em;
    top: -.5em;
}

.gi-orientation-article .gi-orientation-citation__ref {
    background: var(--gi-o-wash);
    border-radius: .3rem;
    color: var(--gi-o-accent);
    display: inline-block;
    font-weight: 800;
    padding: .2em .4em;
    text-decoration: none;
    transition: background-color 160ms var(--gi-ease), color 160ms var(--gi-ease);
}

.gi-orientation-article .gi-orientation-citation__ref:hover {
    background: var(--gi-o-ground);
    color: var(--gi-o-paper);
}

/* Lists ------------------------------------------------------------------- */

.gi-orientation-article .gi-orientation-list {
    list-style: none;
    margin: 1.6rem 0 1.8rem;
    max-width: var(--gi-o-measure);
    padding: 0;
}

.gi-orientation-article .gi-orientation-list__item {
    margin: 0;
    max-width: none;
}

/* An opening bold phrase is the item's name; on its own line it turns a wall of
   sentences into a scannable set. */
.gi-orientation-article .gi-orientation-list__lead {
    color: var(--gi-o-ink);
    display: block;
    font-weight: 750;
    letter-spacing: -.014em;
    margin-bottom: .12rem;
}

/* Steps: a numbered procedure, held together by the rail between its numerals. */
.gi-orientation-article .gi-orientation-list--steps {
    counter-reset: gi-o-step;
    display: grid;
    margin-block: 1.9rem 2.1rem;
}

.gi-orientation-article .gi-orientation-list__item--steps {
    counter-increment: gi-o-step;
    padding: 0 0 1.5rem 3.4rem;
    position: relative;
}

.gi-orientation-article .gi-orientation-list__item--steps:last-child {
    padding-bottom: 0;
}

.gi-orientation-article .gi-orientation-list__item--steps::before {
    align-items: center;
    background: var(--gi-o-ground);
    border-radius: 50%;
    color: var(--gi-o-paper);
    content: counter(gi-o-step);
    display: flex;
    font-size: .84rem;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    height: 2.15rem;
    justify-content: center;
    left: 0;
    position: absolute;
    top: -.1rem;
    width: 2.15rem;
}

.gi-orientation-article .gi-orientation-list__item--steps:not(:last-child)::after {
    background: linear-gradient(to bottom, var(--gi-o-line), color-mix(in oklch, var(--gi-o-line) 20%, transparent));
    bottom: .35rem;
    content: '';
    left: 1.075rem;
    position: absolute;
    top: 2.35rem;
    width: 1px;
}

/* Observations: a pressed leaf instead of a bullet. */
.gi-orientation-article .gi-orientation-list--notes {
    display: grid;
    gap: .8rem;
}

.gi-orientation-article .gi-orientation-list__item--notes {
    padding-inline-start: 1.75rem;
    position: relative;
}

.gi-orientation-article .gi-orientation-list__item--notes::before {
    background: var(--gi-o-accent);
    border-radius: 62% 0 62% 0;
    content: '';
    height: .5rem;
    inset-inline-start: .28rem;
    position: absolute;
    top: .68em;
    transform: rotate(-14deg);
    width: .5rem;
}

.gi-orientation-article .gi-orientation-list__item--notes .gi-orientation-list {
    margin-block: .7rem .2rem;
}

/* Pitfalls: one plate of ruled rows, so the mistakes read as a single warning. */
.gi-orientation-article .gi-orientation-list--pitfalls {
    background: var(--gi-o-wash);
    border-radius: var(--gi-o-plate);
    margin-block: 1.9rem 2.1rem;
    padding: .2rem clamp(1.1rem, 2.4vw, 1.75rem);
}

.gi-orientation-article .gi-orientation-list__item--pitfalls {
    border-top: 1px solid color-mix(in oklch, var(--gi-o-line) 65%, transparent);
    padding: 1.05rem 0 1.05rem 2rem;
    position: relative;
}

.gi-orientation-article .gi-orientation-list__item--pitfalls:first-child {
    border-top: 0;
}

.gi-orientation-article .gi-orientation-list__item--pitfalls::before {
    border: 2.5px solid var(--gi-o-warn);
    border-radius: 50%;
    content: '';
    height: .8rem;
    inset-inline-start: .1rem;
    position: absolute;
    top: 1.66rem;
    width: .8rem;
}

/* Checks: the last thing a reader does before buying or sowing. */
.gi-orientation-article .gi-orientation-list--checks {
    background: var(--gi-o-paper);
    border: 1px solid var(--gi-o-line);
    border-radius: var(--gi-o-plate);
    box-shadow: var(--gi-o-lift);
    display: grid;
    gap: .9rem clamp(1.5rem, 3vw, 2.5rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    margin-block: 1.9rem 2.1rem;
    max-width: none;
    padding: clamp(1.25rem, 2.8vw, 1.9rem);
}

.gi-orientation-article .gi-orientation-list__item--checks {
    padding-inline-start: 2.1rem;
    position: relative;
}

.gi-orientation-article .gi-orientation-list__item--checks::before {
    align-items: center;
    border: 1.5px solid var(--gi-o-line);
    border-radius: .4rem;
    color: var(--gi-o-accent);
    content: '\2713';
    display: flex;
    font-size: .8rem;
    font-weight: 800;
    height: 1.4rem;
    inset-inline-start: 0;
    justify-content: center;
    position: absolute;
    top: .1em;
    width: 1.4rem;
}

/* Motion ------------------------------------------------------------------ */

/* Scroll-driven, so nothing waits on a script and nothing blocks reading: a
   section heading and a plate settle as they arrive, and are already settled
   for anything on screen at load. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .gi-orientation-article .gi-orientation-section:not(.gi-orientation-section--role-sources) .gi-orientation-section__title,
        .gi-orientation-article .gi-orientation-figure,
        .gi-orientation-article .gi-content-table:has(.gi-orientation-table),
        .gi-orientation-article .gi-orientation-list--checks {
            animation: gi-o-settle linear both;
            animation-range: entry 6% entry 58%;
            animation-timeline: view();
        }
    }
}

@keyframes gi-o-settle {
    from { opacity: .35; transform: translate3d(0, 16px, 0); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .gi-orientation-article .gi-orientation-figure:hover .gi-orientation-figure__image {
        transform: none;
    }
}

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

@media (max-width: 44rem) {
    .gi-orientation-article {
        --gi-o-measure: 100%;
    }

    .gi-orientation-article .gi-orientation-section__title {
        max-width: none;
    }

    .gi-orientation-article .gi-orientation-list__item--steps {
        padding-inline-start: 2.9rem;
    }

    .gi-orientation-article .gi-orientation-list__item--steps::before {
        font-size: .78rem;
        height: 1.9rem;
        width: 1.9rem;
    }

    .gi-orientation-article .gi-orientation-list__item--steps:not(:last-child)::after {
        inset-inline-start: .95rem;
        top: 2.1rem;
    }
}