/* ========================================
   EVA ARTICLE — page-eva.php (and the homepage, front-page.php)
   ========================================
   Scoped to .eva-page. Reuses the warm-paper tokens from style.css
   (--bg-paper, --ink-black, --amber, --sage, --serif-*, --sans-ui) rather
   than introducing another token namespace. Amber marks Eva-talk, sage
   marks Eva-brain, and ink marks the bridge between them.
   ======================================== */

/* ----------------------------------------
   Bands, hero, prose
   ---------------------------------------- */

.eva-band {
    background: var(--bg-subtle);
    border-top: 2px solid var(--amber);
}

.eva-band .sans-label::before {
    background: var(--amber);
}

.eva-hero {
    text-align: center;
}

.eva-hero__lede {
    max-width: 64ch;
    margin: 0 auto 2rem;
}

.eva-ctas {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.eva-hero .eva-ctas,
.eva-ctas--center {
    justify-content: center;
}

/* A speech-like waveform under the lede — decorative only */
.eva-wave {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 48px;
    margin: 0 auto 2.5rem;
}

.eva-wave span {
    --amp: 0.6;
    width: 4px;
    height: 100%;
    border-radius: 2px;
    background: var(--amber);
    opacity: 0.85;
    transform: scaleY(0.15);
    animation: evaWave 1.4s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * -0.11s);
}

.eva-wave span:nth-child(4n+1) { --amp: 0.55; }
.eva-wave span:nth-child(4n+2) { --amp: 0.95; }
.eva-wave span:nth-child(4n+3) { --amp: 0.4; }
.eva-wave span:nth-child(5n)   { --amp: 0.75; }

@keyframes evaWave {
    0%, 100% { transform: scaleY(0.15); }
    50%      { transform: scaleY(var(--amp)); }
}

.eva-prose {
    max-width: 72ch;
}

.eva-prose ul {
    padding-left: 1.25rem;
    margin-bottom: 1.5rem;
}

.eva-prose li {
    margin-bottom: 0.6rem;
}

.eva-prose strong {
    font-weight: 700;
}

.eva-prose a {
    color: var(--ink-black);
    text-decoration: underline;
    text-decoration-color: var(--amber);
    text-underline-offset: 3px;
}

.eva-prose a:hover {
    text-decoration-color: var(--ink-black);
}

/* "Under the hood" — the shared .approach-steps, but read as one column */
.eva-page .approach-steps.eva-deep {
    grid-template-columns: 1fr;
    gap: 0;
    max-width: 58rem;
    margin-top: 2rem;
}

.eva-deep .step {
    padding: 2.5rem 0 1.5rem 6rem;
}

.eva-deep .step-number {
    top: 2.1rem;
    left: 0;
}

.eva-deep .step-content {
    padding-top: 0;
}

.eva-deep .step p,
.eva-deep .step li {
    font-size: 1rem;
    color: var(--charcoal);
}

/* Small UI button used inside both widgets */
.eva-btn {
    font-family: var(--sans-ui);
    font-size: 0.8rem;
    padding: 0.55rem 1.1rem;
    border: 1px solid var(--ink-black);
    background: transparent;
    color: var(--ink-black);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.eva-btn:hover {
    background: var(--ink-black);
    color: var(--bg-paper);
}

.eva-btn--filled {
    background: var(--ink-black);
    color: var(--bg-paper);
}

.eva-btn--filled:hover {
    background: var(--charcoal);
    border-color: var(--charcoal);
}

.eva-btn:disabled {
    opacity: 0.4;
    cursor: default;
    background: transparent;
    color: var(--ink-black);
}

.eva-btn:focus-visible,
.eva-node:focus-visible,
.eva-turn__tab:focus-visible,
.eva-chip:focus-visible {
    outline: 2px solid var(--amber);
    outline-offset: 2px;
}

/* ----------------------------------------
   System map (#eva-map)
   ---------------------------------------- */

.eva-map {
    margin-top: 3rem;
    padding: 1.5rem;
    border: 1px solid var(--light-gray);
    background: var(--bg-paper);
}

.eva-map__bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.eva-map__bar .sans-label {
    margin: 0;
}

.eva-map__grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: 2rem;
    row-gap: 1.75rem;
    padding: 0.75rem;
}

.eva-map__zone {
    margin: -0.75rem;
    border-radius: 4px;
    z-index: 0;
}

.eva-map__zone--talk {
    grid-row: 1 / 5;
    grid-column: 1 / -1;
    background: rgba(184, 101, 36, 0.05);
    border: 1px solid rgba(184, 101, 36, 0.2);
}

.eva-map__zone--brain {
    grid-row: 6 / 8;
    grid-column: 1 / -1;
    background: rgba(93, 122, 83, 0.06);
    border: 1px solid rgba(93, 122, 83, 0.25);
}

.eva-map__label {
    grid-column: 1 / -1;
    margin: 0;
    position: relative;
    z-index: 2;
}

.eva-map__label--talk  { grid-row: 1; color: var(--amber-hover); }
.eva-map__label--brain { grid-row: 6; color: var(--sage); }

.eva-map__label::before {
    display: none;
}

.eva-map__wires {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 1;
}

.eva-wire {
    fill: none;
    stroke: rgba(92, 85, 74, 0.35);
    stroke-width: 1.5;
    marker-end: url(#eva-arrow);
    transition: stroke 0.2s ease, opacity 0.2s ease;
}

.eva-map.has-focus .eva-wire {
    opacity: 0.25;
}

.eva-map.has-focus .eva-wire.is-lit {
    opacity: 1;
    stroke: var(--amber);
    stroke-width: 2;
    marker-end: url(#eva-arrow-lit);
}

.eva-arrow-head     { fill: rgba(92, 85, 74, 0.5); }
.eva-arrow-head-lit { fill: var(--amber); }

.eva-pulse {
    fill: var(--amber);
    stroke: var(--bg-paper);
    stroke-width: 2;
    opacity: 0;
}

.eva-node {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.15rem;
    min-height: 4rem;
    padding: 0.7rem 0.85rem;
    text-align: left;
    font: inherit;
    color: var(--ink-black);
    background: var(--bg-paper);
    border: 1px solid var(--light-gray);
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.eva-node:hover {
    border-color: var(--ink-black);
}

.eva-node__name {
    font-family: var(--sans-ui);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.25;
}

.eva-node__role {
    font-family: var(--sans-ui);
    font-size: 0.72rem;
    line-height: 1.3;
    color: var(--muted-taupe);
}

.eva-node--brain {
    border-color: rgba(93, 122, 83, 0.35);
}

.eva-node--gate {
    background: var(--ink-black);
    border-color: var(--ink-black);
    color: var(--bg-paper);
}

.eva-node--gate .eva-node__role {
    color: var(--light-gray);
}

.eva-map.has-focus .eva-node {
    opacity: 0.4;
}

.eva-map.has-focus .eva-node.is-linked,
.eva-map.has-focus .eva-node.is-visited {
    opacity: 1;
    border-color: var(--amber);
}

.eva-map.has-focus .eva-node.is-active {
    opacity: 1;
    background: var(--amber);
    border-color: var(--amber);
    color: #fff;
}

.eva-map.has-focus .eva-node.is-active .eva-node__role {
    color: rgba(255, 255, 255, 0.85);
}

/* Desktop placement. DOM order is the mobile order. */
@media (min-width: 761px) {
    .eva-node[data-node="you"]        { grid-area: 2 / 1 / 4 / 2; }
    .eva-node[data-node="ears"]       { grid-area: 2 / 2; }
    .eva-node[data-node="turns"]      { grid-area: 2 / 3; }
    .eva-node[data-node="director"]   { grid-area: 2 / 4; }
    .eva-node[data-node="mouth"]      { grid-area: 3 / 2; }
    .eva-node[data-node="queue"]      { grid-area: 3 / 3; }
    .eva-node[data-node="quick"]      { grid-area: 3 / 4; }
    .eva-node[data-node="auditor"]    { grid-area: 3 / 5; }
    .eva-node[data-node="overseer"]   { grid-area: 4 / 1; }
    .eva-node[data-node="memory"]     { grid-area: 4 / 2 / 5 / 4; }
    .eva-node[data-node="researcher"] { grid-area: 4 / 4; }
    .eva-node[data-node="gate"]       { grid-area: 5 / 4; }
    .eva-node[data-node="sources"]    { grid-area: 7 / 1; }
    .eva-node[data-node="claims"]     { grid-area: 7 / 2; }
    .eva-node[data-node="facts"]      { grid-area: 7 / 3; }
    .eva-node[data-node="search"]     { grid-area: 7 / 4; }
    .eva-node[data-node="profile"]    { grid-area: 7 / 5; }
}

/* Detail panel */
.eva-map__detail {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 2rem;
    min-height: 9.5rem;
    margin-top: 1.5rem;
    padding: 1.25rem 1.5rem;
    background: var(--bg-subtle);
    border-top: 2px solid var(--amber);
}

.eva-map__detail[hidden] {
    display: none;
}

.eva-map__detail.is-hint,
.eva-map__detail.is-caption {
    display: flex;
    align-items: center;
}

.eva-map__detail h4 {
    font-size: 1.35rem;
    margin-bottom: 0.5rem;
}

.eva-map__detail p {
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
}

.eva-map__detail p:last-child {
    margin-bottom: 0;
}

.eva-detail__tech {
    color: var(--charcoal);
}

.eva-detail__k {
    display: block;
    margin-bottom: 0.35rem;
    font-family: var(--sans-ui);
    font-size: 0.68rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--muted-taupe);
}

.eva-detail__links {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.eva-chip {
    font-family: var(--sans-ui);
    font-size: 0.78rem;
    line-height: 1.35;
    text-align: left;
    padding: 0.35rem 0.7rem;
    color: var(--ink-black);
    background: var(--bg-paper);
    border: 1px solid var(--light-gray);
    border-radius: 999px;
    cursor: pointer;
}

.eva-chip:hover {
    border-color: var(--amber);
}

.eva-chip b {
    font-weight: 600;
}

.eva-detail__caption {
    font-family: var(--serif-display);
    font-size: 1.3rem;
    line-height: 1.4;
    margin: 0;
}

.eva-detail__step {
    flex: none;
    margin-right: 1.25rem;
    font-family: var(--sans-ui);
    font-size: 0.75rem;
    color: var(--muted-taupe);
}

/* No-JS fallback: a readable list of every part */
.eva-map__notes {
    margin-top: 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem 2rem;
}

.eva-map__notes dt {
    font-family: var(--sans-ui);
    font-weight: 600;
    font-size: 0.9rem;
}

.eva-map__notes dd {
    font-size: 0.9rem;
    margin: 0.25rem 0 0;
}

.eva-map__notes .eva-map__tech {
    color: var(--charcoal);
}

.eva-map.is-ready .eva-map__notes {
    display: none;
}

/* ----------------------------------------
   Turn simulator (#eva-turn)
   ---------------------------------------- */

.eva-turn {
    margin-top: 3rem;
    border: 1px solid var(--light-gray);
    background: var(--bg-paper);
}

.eva-turn__tabs {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--light-gray);
}

.eva-turn__tab {
    font-family: var(--sans-ui);
    font-size: 0.85rem;
    padding: 0.9rem 1.25rem;
    margin-bottom: -1px;
    color: var(--charcoal);
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}

.eva-turn__tab:hover {
    color: var(--ink-black);
}

.eva-turn__tab[aria-selected="true"] {
    color: var(--ink-black);
    font-weight: 600;
    border-bottom-color: var(--amber);
}

.eva-turn__panel {
    padding: 1.5rem;
}

.eva-turn__scene {
    font-size: 1rem;
    font-style: italic;
    color: var(--charcoal);
    margin-bottom: 1.25rem;
}

/* Timeline: one lane per participant, a shared time axis, a playhead */
.eva-turn__timeline {
    --lane-label: 8.5rem;
    --p: 0;
    position: relative;
    overflow: hidden;
}

.eva-lane,
.eva-axis {
    display: grid;
    grid-template-columns: var(--lane-label) 1fr;
    align-items: center;
}

.eva-lane {
    min-height: 2.4rem;
    border-bottom: 1px dashed var(--light-gray);
}

.eva-lane__name {
    padding-right: 0.75rem;
    font-family: var(--sans-ui);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--charcoal);
}

.eva-lane.is-idle .eva-lane__name {
    opacity: 0.4;
}

.eva-lane__track,
.eva-axis__track {
    position: relative;
    height: 2.4rem;
}

.eva-axis__track {
    height: 1.5rem;
}

.eva-axis__tick {
    position: absolute;
    top: 0.3rem;
    transform: translateX(-50%);
    font-family: var(--sans-ui);
    font-size: 0.65rem;
    color: var(--muted-taupe);
}

.eva-axis__tick:first-child {
    transform: none;
}

.eva-turn__playhead {
    position: absolute;
    top: 0;
    bottom: 1.5rem;
    left: calc(var(--lane-label) + (100% - var(--lane-label)) * var(--p));
    width: 2px;
    margin-left: -1px;
    background: var(--amber);
    z-index: 3;
    transition: left 0.6s ease;
}

.eva-ev {
    position: absolute;
    top: 0.35rem;
    height: 1.7rem;
    display: flex;
    align-items: center;
    padding: 0 0.5rem;
    border-radius: 3px;
    font-family: var(--sans-ui);
    font-size: 0.72rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 0.35s ease, transform 0.35s ease, box-shadow 0.2s ease;
}

.eva-ev--say {
    font-family: var(--serif-body);
    font-style: italic;
    background: rgba(184, 101, 36, 0.12);
    border: 1px solid rgba(184, 101, 36, 0.45);
}

.eva-ev--lane-you.eva-ev--say {
    background: var(--bg-subtle);
    border-color: var(--ink-black);
}

.eva-ev--work {
    color: var(--charcoal);
    background: var(--bg-subtle);
    border: 1px solid var(--light-gray);
}

.eva-ev--lane-brain.eva-ev--work {
    background: rgba(93, 122, 83, 0.12);
    border-color: rgba(93, 122, 83, 0.45);
}

.eva-ev--cut {
    color: var(--muted-taupe);
    text-decoration: line-through;
    background: transparent;
    border: 1px dashed var(--muted-taupe);
}

.eva-ev--mark {
    overflow: visible;
    padding: 0 0 0 0.75rem;
    color: var(--ink-black);
}

.eva-ev--mark::before {
    content: '';
    position: absolute;
    left: -5px;
    top: 50%;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    border-radius: 50%;
    background: var(--sage);
    border: 2px solid var(--bg-paper);
}

.eva-ev.is-current:not(.eva-ev--mark) {
    box-shadow: 0 0 0 2px var(--ink-black);
}

.eva-ev--mark.is-current {
    font-weight: 600;
}

.eva-ev--mark.is-current::before {
    background: var(--amber);
}

.eva-turn.is-animated .eva-ev.is-future {
    opacity: 0;
    transform: translateY(4px);
}

/* Step list: the mobile view, and the screen-reader view on desktop */
.eva-turn__list {
    list-style: none;
}

.eva-turn__list li {
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: 0.75rem;
    padding: 0.55rem 0.5rem;
    border-bottom: 1px dashed var(--light-gray);
    font-size: 0.9rem;
    line-height: 1.45;
    transition: opacity 0.3s ease, background 0.3s ease;
}

.eva-turn__list li.is-future {
    opacity: 0.35;
}

.eva-turn__list li.is-current {
    background: rgba(184, 101, 36, 0.1);
}

.eva-li__t {
    font-family: var(--sans-ui);
    font-size: 0.75rem;
    color: var(--muted-taupe);
}

.eva-li__lane {
    display: block;
    font-family: var(--sans-ui);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--amber-hover);
}

@media (min-width: 761px) {
    .eva-turn__list {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* Caption and memory */
.eva-turn__bottom {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.eva-turn__caption {
    min-height: 6rem;
    padding: 0.25rem 0 0.25rem 1rem;
    border-left: 3px solid var(--amber);
    font-size: 1rem;
    line-height: 1.6;
}

.eva-cap__meta {
    display: block;
    margin-bottom: 0.35rem;
    font-family: var(--sans-ui);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted-taupe);
}

.eva-turn__memory {
    min-height: 6rem;
    padding: 1rem 1.25rem;
    background: var(--bg-subtle);
}

.eva-turn__memory .sans-label {
    margin-bottom: 0.5rem;
}

.eva-turn__heard {
    list-style: none;
    font-size: 0.9rem;
}

.eva-turn__heard li {
    margin-bottom: 0.4rem;
    line-height: 1.5;
}

.eva-turn__heard li.is-new {
    animation: evaFadeIn 0.5s ease;
}

.eva-heard__empty {
    color: var(--muted-taupe);
    font-style: italic;
}

.eva-heard__who {
    margin-right: 0.4rem;
    font-family: var(--sans-ui);
    font-size: 0.75rem;
    font-weight: 600;
}

.eva-heard__cut {
    color: var(--muted-taupe);
    text-decoration: line-through;
}

.eva-heard__note {
    margin-left: 0.35rem;
    font-family: var(--sans-ui);
    font-size: 0.68rem;
    color: var(--amber-hover);
}

@keyframes evaFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

.eva-turn__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.eva-turn__count {
    margin: 0 0 0 auto;
}

/* No-JS fallback: every scenario as a plain list */
.eva-turn__static h3 {
    font-size: 1.25rem;
    margin: 1.5rem 0 0.5rem;
}

.eva-turn__static h3:first-child {
    margin-top: 0;
}

.eva-turn__static ol {
    padding-left: 1.25rem;
    font-size: 0.95rem;
}

.eva-turn__static li {
    margin-bottom: 0.5rem;
}

.eva-turn__static .sans-label {
    margin-right: 0.5rem;
}

.eva-turn:not(.is-ready) .eva-turn__live,
.eva-turn:not(.is-ready) .eva-turn__scene,
.eva-turn.is-ready .eva-turn__static {
    display: none;
}

/* ----------------------------------------
   Interview Eva — section-eva-interview.php
   The form is Forminator with Design style "None"; these rules give it
   the same look as the theme's .form-group fields (sections.css).
   ---------------------------------------- */

.eva-interview .section-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.eva-interview__lede {
    max-width: 60ch;
    margin: 0 auto 2.5rem;
    text-align: center;
}

.eva-interview__form {
    max-width: 560px;
    margin: 0 auto;
    text-align: left;
}

.eva-interview__fallback {
    text-align: center;
}

.eva-interview__fallback a {
    color: var(--ink-black);
    text-decoration: underline;
    text-decoration-color: var(--amber);
    text-underline-offset: 3px;
}

.eva-interview__form .forminator-row {
    margin-bottom: 1.5rem;
}

.eva-interview__form .forminator-label {
    display: block;
    font-family: var(--sans-ui);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--charcoal);
    margin-bottom: 0.5rem;
}

.eva-interview__form .forminator-required {
    color: var(--amber);
}

.eva-interview__form .forminator-input,
.eva-interview__form .forminator-textarea {
    width: 100%;
    padding: 0.875rem 1rem;
    font-family: inherit;
    font-size: 1rem;
    border: 1px solid var(--light-gray);
    border-radius: 0;
    background: var(--bg-paper);
    color: var(--ink-black);
    transition: border-color 0.3s ease;
}

.eva-interview__form .forminator-input:focus,
.eva-interview__form .forminator-textarea:focus {
    outline: none;
    border-color: var(--ink-black);
}

.eva-interview__form .forminator-textarea {
    resize: vertical;
    min-height: 120px;
}

.eva-interview__form .forminator-error-message {
    display: block;
    margin-top: 0.4rem;
    font-family: var(--sans-ui);
    font-size: 0.8rem;
    color: var(--amber-hover);
}

.eva-interview__form .forminator-button-submit {
    font-family: var(--sans-ui);
    font-size: 0.875rem;
    padding: 0.875rem 1.75rem;
    border: 1px solid var(--amber);
    border-radius: 0;
    background: var(--amber);
    color: #ffffff;
    cursor: pointer;
    transition: all 0.3s ease;
}

.eva-interview__form .forminator-button-submit:hover {
    background: var(--amber-hover);
    border-color: var(--amber-hover);
}

.eva-interview__form .forminator-response-message {
    margin-bottom: 1.5rem;
    padding: 1rem;
    border: 1px solid var(--light-gray);
    background: var(--bg-paper);
}

/* ----------------------------------------
   Homepage — front-page.php
   ---------------------------------------- */

/* No breadcrumbs above the hero here, so clear the fixed header
   the way the Helm hero does (helm.css) */
.eva-home .eva-hero {
    padding-top: 9rem;
}

/* Four cards read as a 2 × 2 rather than 3 + 1 */
.eva-home .belief-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 760px) {
    .eva-home .belief-grid {
        grid-template-columns: 1fr;
    }
}

.eva-home__more {
    margin: 2.5rem 0 0;
    text-align: center;
}

.eva-home__more a {
    font-family: var(--sans-ui);
    font-size: 0.9rem;
    color: var(--ink-black);
    text-decoration: underline;
    text-decoration-color: var(--amber);
    text-underline-offset: 3px;
}

/* "Also from the lab" — one quiet line under the form */
.eva-lab-strip {
    padding: 2.5rem 0;
    border-top: 1px solid var(--light-gray);
    text-align: center;
}

.eva-lab-strip .sans-label {
    margin-bottom: 1rem;
}

.eva-lab-strip ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.eva-lab-strip a {
    font-family: var(--sans-ui);
    font-size: 0.9rem;
    color: var(--muted-taupe);
    text-decoration: none;
}

.eva-lab-strip a strong {
    color: var(--ink-black);
    font-weight: 600;
    margin-right: 0.25rem;
}

.eva-lab-strip a:hover strong {
    text-decoration: underline;
    text-decoration-color: var(--amber);
    text-underline-offset: 3px;
}

/* ----------------------------------------
   Responsive
   ---------------------------------------- */

@media (max-width: 760px) {
    .eva-map {
        padding: 1rem;
    }

    .eva-map__bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .eva-map__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
        padding: 0;
    }

    .eva-map__zone,
    .eva-map__wires {
        display: none;
    }

    .eva-map__label {
        grid-row: auto;
        margin-top: 0.75rem;
    }

    .eva-node {
        min-height: 3.5rem;
    }

    .eva-node--gate {
        grid-column: 1 / -1;
    }

    .eva-map__detail {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1rem;
    }

    .eva-detail__caption {
        font-size: 1.1rem;
    }

    .eva-turn__tab {
        flex: 1 1 50%;
        padding: 0.75rem;
        font-size: 0.8rem;
    }

    .eva-turn__panel {
        padding: 1rem;
    }

    .eva-turn__timeline {
        display: none;
    }

    .eva-turn__bottom {
        grid-template-columns: 1fr;
    }

    .eva-turn__count {
        margin-left: 0;
    }

    .eva-deep .step {
        padding: 3.75rem 0 1.5rem;
    }

    .eva-deep .step-number {
        top: 0.75rem;
        font-size: 3rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .eva-wave span {
        animation: none;
        transform: scaleY(var(--amp));
    }

    .eva-page .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .eva-node,
    .eva-wire,
    .eva-ev,
    .eva-turn__playhead,
    .eva-turn__list li {
        transition: none;
    }

    .eva-turn__heard li.is-new {
        animation: none;
    }
}