/* Shared editorial interaction language, based on the homepage cards and program rows. */
*,
*::before,
*::after {
    transition-timing-function: var(--ease);
}

/* Keep standalone link arrows legible beside small editorial labels. */
a > span[aria-hidden="true"]:not([class]) {
    display: inline-grid;
    place-items: center;
    align-self: center;
    flex: none;
    min-width: 1em;
    min-height: 1em;
    font-size: max(1rem, 1em);
    line-height: 1;
    vertical-align: middle;
}

.hero-sketch {
    box-shadow: 12px 14px 0 rgba(17, 18, 15, .14);
}

.hero::after {
    box-shadow: 0 0 0 5vw rgba(239, 100, 54, .055), 0 0 0 10vw rgba(17, 18, 15, .035);
}

.hero-sketch.is-visible:hover {
    box-shadow: 16px 20px 0 rgba(17, 18, 15, .18);
}

:is(.pathway, .related-link, .note-link, .note-next, .doc-nav nav a, .admission-nav nav a, .contact-links a, .faq-list summary, .notes-sidebar__back, .text-link) {
    transition: color .35s var(--ease), background-color .35s var(--ease), border-color .35s var(--ease);
}

:is(.pathway, .related-link, .note-link, .note-next, .admission-nav nav a, .notes-sidebar__back, .text-link):focus-visible,
:is(.solid-button, .team-button, .compact-cta a):focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 4px;
}

/* Program rows retain identical dimensions in both states. */
.pathway {
    padding-inline: 1rem;
    background: var(--cream);
}

.pathway:hover,
.pathway:focus-visible {
    padding-inline: 1rem;
    background: var(--yellow);
}

.pathway b {
    transition: transform .35s var(--ease);
}

.pathway:hover b,
.pathway:focus-visible b {
    transform: rotate(45deg);
}

/* Vision cards use the same cream, ink and yellow palette as founder-note cards. */
.vision-page .learning-principle {
    background: var(--cream);
    transition: color .35s var(--ease), background-color .35s var(--ease);
}

.vision-page .learning-principle:nth-child(odd):hover {
    color: var(--paper);
    background: var(--ink);
}

.vision-page .learning-principle:nth-child(even):hover {
    color: var(--ink);
    background: var(--yellow);
}

.vision-page .habit:nth-child(odd):hover {
    color: var(--paper);
    background: var(--ink);
}

.vision-page .habit:nth-child(even):hover {
    color: var(--ink);
    background: var(--yellow);
}

.vision-page .habit:hover p {
    color: inherit;
}

.vision-page .role:first-child:hover {
    color: var(--paper);
    background: var(--ink);
}

.vision-page .role:first-child:hover del {
    color: rgba(246, 242, 233, .55);
}

.vision-page .role:last-child:hover {
    color: var(--ink);
    background: var(--yellow);
}

.vision-page .related-link:focus-visible,
.vision-page .related-link:hover {
    color: var(--ink);
    background: var(--yellow);
}

.related-link i,
.note-next i {
    transition: transform .35s var(--ease);
}

.related-link:hover i,
.related-link:focus-visible i,
.note-next:hover i,
.note-next:focus-visible i {
    transform: rotate(45deg);
}

/* Sidebar and directory links change surface, never padding or width. */
.admission-page .admission-nav nav a:hover,
.admission-page .admission-nav nav a:focus-visible,
.vision-page .doc-nav nav a:hover,
.vision-page .doc-nav nav a:focus-visible,
.note-page .notes-sidebar__back:hover,
.note-page .notes-sidebar__back:focus-visible {
    color: var(--ink);
    background: var(--yellow);
}

/* Preserve the inset in every note-link state. */
.note-page .note-link:hover,
.note-page .note-link:focus-visible {
    color: var(--ink);
    background: var(--yellow);
}

.note-page .note-link[aria-current="page"],
.admission-page .admission-nav nav a[aria-current="page"] {
    color: var(--ink);
    background: var(--cream);
}

/* Large article navigation behaves like a fixed founder-note card. */
.note-page .note-next {
    padding: 1.5rem;
    background: var(--cream);
    border: 1px solid var(--ink);
}

.note-page .note-next:hover,
.note-page .note-next:focus-visible {
    color: var(--ink);
    background: var(--yellow);
}

.note-page .note-next:hover strong,
.note-page .note-next:focus-visible strong {
    color: inherit;
}

/* People and FAQ rows receive a stable surface treatment. */
.team-page .person {
    transition: background-color .35s var(--ease);
}

.team-page .person:hover {
    background: var(--cream);
}

.team-page .person summary,
.faq-page .faq-list summary {
    transition: color .35s var(--ease), background-color .35s var(--ease);
}

.team-page .person summary:hover,
.team-page .person summary:focus-visible,
.faq-page .faq-list summary:hover,
.faq-page .faq-list summary:focus-visible {
    color: var(--ink);
    background: var(--yellow);
}

.faq-page .faq-list details[open] summary {
    color: var(--ink);
    background: var(--yellow);
}

/* Text links and contact rows keep their geometry while adopting the shared palette. */
.admission-page .text-link:hover,
.admission-page .text-link:focus-visible {
    gap: 2.5rem;
    color: var(--orange);
}

.admission-page .contact-links a:hover,
.admission-page .contact-links a:focus-visible {
    color: var(--ink);
    background: var(--yellow);
}

.solid-button,
.team-button,
.compact-cta a {
    transition: color .25s var(--ease), background-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}

.solid-button:hover,
.solid-button:focus-visible,
.team-button:hover,
.team-button:focus-visible,
.compact-cta a:hover,
.compact-cta a:focus-visible {
    color: var(--ink);
    background: var(--yellow);
}

@media (prefers-reduced-motion: reduce) {
    :is(.pathway b, .related-link i, .note-next i) {
        transition: none;
    }
}

@media (max-width: 640px) {
    .hero-sketch {
        box-shadow: 7px 8px 0 rgba(17, 18, 15, .14);
    }

}