/* Shared responses for controls and short, structured lists. Reading prose stays still. */
:root {
  --interaction-ease: cubic-bezier(.2,.75,.25,1);
  --interaction-wash: #b7a99724;
  --control-wash: var(--wheat);
}

/* A fill must remain visible against the section beneath it. */
:is(.hero, .page-hero, .collection-hero, .article-hero, .private-panel, .collection-note, .related-writing, .site-header) {
  --control-wash: var(--paper);
}
:is(.button, .text-link, .primary-nav > a, .menu-toggle, .film-toggle, .topic-filter, .reading-tools button, .search-clear, .clear-request, .article-back, .footer-top nav a, .footer-bottom a) {
  transition: transform .28s var(--interaction-ease), box-shadow .32s var(--interaction-ease), background-color .32s var(--interaction-ease), border-color .32s var(--interaction-ease), color .25s ease;
}
.text-link::before { background: var(--control-wash); }
:is(.hero-actions, .private-intro) > .text-link::before { background: var(--control-wash); }
.button-dark::before { background: var(--autumn); }
.button-light::before { background: var(--paper); }
.menu-toggle { position: relative; isolation: isolate; }
.menu-toggle::before {
  content: '';
  position: absolute;
  inset: 0 -8px 0 0;
  z-index: -1;
  border-radius: 100px;
  background: var(--paper);
  opacity: 0;
  transform: scale(.86,.7);
  transition: opacity .25s ease, transform .4s var(--interaction-ease);
  pointer-events: none;
}
:is(.button, .text-link)::before {
  transition: opacity .25s ease, transform .42s var(--interaction-ease);
}
.link-arrow {
  transition: transform .32s var(--interaction-ease);
}
:is(.button, .text-link, .nav-begin, .topic-filter, .reading-tools button, .search-clear):focus-visible {
  box-shadow: 0 4px 16px #28312b14;
}
:is(.button, .text-link):is(:focus-visible, .is-touch-active)::before {
  opacity: 1;
  transform: scale(1);
}
:is(.button, .text-link):active::before { opacity: 1; transform: scale(1); }
:is(.primary-nav > a:not(.nav-begin), .menu-toggle):is(:focus-visible, :active, .is-touch-active)::before {
  opacity: 1;
  transform: scale(1);
}
.primary-nav > a[aria-current]:not(.nav-begin):is(:focus-visible, :active, .is-touch-active) {
  color: var(--paper);
}
.primary-nav > a[aria-current]:not(.nav-begin):is(:focus-visible, :active, .is-touch-active)::before { background: var(--autumn); }
.nav-begin:is(:focus-visible, :active, .is-touch-active) { background: var(--autumn); }
.menu-toggle[aria-expanded="true"]::before { opacity: 1; transform: scale(1); }
.menu-toggle[aria-expanded="true"]:is(:focus-visible, :active, .is-touch-active) { color: var(--paper); }
.menu-toggle[aria-expanded="true"]:is(:focus-visible, :active, .is-touch-active)::before { background: var(--autumn); }
.film-toggle:is(:focus-visible, :active, .is-touch-active) { background: var(--autumn); border-color: var(--paper); }
.clear-request { border-radius: 100px; }
:is(.topic-filter, .reading-tools button, .search-clear, .clear-request, .article-back, .footer-top nav a, .footer-bottom a):is(:focus-visible, :active, .is-touch-active) {
  background: var(--control-wash);
  color: var(--moss);
}
:is(.topic-filter, .reading-tools button)[aria-pressed="true"]:is(:focus-visible, :active, .is-touch-active) {
  background: var(--autumn);
  border-color: var(--autumn);
  color: var(--paper);
}
:is(.button, .text-link, .essay, .essay-card):focus-visible .link-arrow {
  transform: translate(3px,-3px);
}
:is(.button, .text-link)[href^="#"]:focus-visible .link-arrow {
  transform: translateY(3px);
}

/* These are still plain content rows: no click handlers, tab stops or button cursors. */
:is(.method-list > li, .engagement-item, .offer-list > li) {
  position: relative;
  isolation: isolate;
}
:is(.method-list > li, .engagement-item, .offer-list > li)::before {
  content: '';
  position: absolute;
  inset: 3px -14px;
  z-index: -1;
  border-radius: 14px;
  background: var(--interaction-wash);
  opacity: 0;
  transform: scale(.988,.96);
  transition: opacity .3s ease, transform .4s var(--interaction-ease);
  pointer-events: none;
}
.page-dark :is(.method-list > li, .engagement-item, .offer-list > li) {
  --interaction-wash: #dcd3c415;
}
:is(.engagement-item, .offer-list > li):first-child::before { top: -8px; }
:is(.engagement-item, .offer-list > li):last-child::before { bottom: -8px; }
:is(.method-number, .item-number, .offer-number),
:is(.method-list > li, .engagement-item) h3,
:is(.essay, .essay-card) :is(h2, h3, .essay-index) {
  transition: transform .36s var(--interaction-ease), color .3s ease;
}
:is(.method-list > li, .engagement-item, .offer-list > li).is-touch-active::before {
  opacity: 1;
  transform: scale(1);
}
:is(.method-list > li, .engagement-item).is-touch-active h3 { transform: translateX(4px); }
:is(.method-list > li, .engagement-item, .offer-list > li).is-touch-active :is(.method-number, .item-number, .offer-number) {
  transform: translateX(2px);
  color: var(--autumn);
}
.page-dark :is(.method-list > li, .engagement-item, .offer-list > li).is-touch-active :is(.method-number, .item-number, .offer-number) { color: var(--wheat); }

/* Expandable controls retain their resting dimensions when highlighted. */
summary {
  position: relative;
  isolation: isolate;
  transition: color .25s ease;
}
summary::before {
  content: '';
  position: absolute;
  inset: 4px -12px;
  z-index: -1;
  border-radius: 12px;
  background: var(--control-wash);
  opacity: 0;
  transition: opacity .28s ease;
  pointer-events: none;
}
summary:is(:focus-visible, .is-touch-active)::before { opacity: 1; }
summary:active::before { opacity: 1; }
.detail-mark { transition: color .25s ease; }
summary:is(:focus-visible, .is-touch-active) .detail-mark { color: var(--autumn); }

.essay-card::before {
  content: '';
  position: absolute;
  inset: 8px -12px;
  z-index: -1;
  border: 1px solid #b7a99780;
  border-radius: 18px;
  background: var(--wheat);
  opacity: 0;
  transform: scale(.975,.96);
  transition: opacity .28s ease, transform .4s var(--interaction-ease);
  pointer-events: none;
}
.related-writing .essay-card::before { background: var(--paper); }
.essay-card:focus-visible { outline: none; }
.essay-card:focus-visible::before { outline: 2px solid var(--autumn); outline-offset: 3px; }
.essay-card:is(:focus-visible, :active)::before,
:is(.essay, .essay-card).is-touch-active::before { opacity: 1; transform: scale(1); }
:is(.essay, .essay-card):is(:focus-visible, .is-touch-active) :is(h2, h3) { transform: translateX(3px); }
:is(.essay, .essay-card):is(:focus-visible, .is-touch-active) .link-arrow { transform: translate(3px,-3px); }
.article-back:is(:focus-visible, .is-touch-active) span { transform: translateX(-4px); }

/* Page-specific components opt in through shared classes; fields never move. */
:is(.contents-list a, .policy-index a) {
  transition: color .25s ease, background-color .25s ease;
}
:is(.contents-list a, .policy-index a):is(:focus-visible, :active, .is-touch-active) { background: var(--control-wash); color: var(--moss); }
:is(.form-input, .form-field input, .form-field textarea) {
  transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}
:is(.form-input, .form-field input, .form-field textarea):focus-visible { box-shadow: 0 0 0 3px #886a461c; }
:is(.form-consent, .consent-field input) { accent-color: var(--moss); }

@media (hover:hover) and (pointer:fine) {
  :is(.button, .text-link, .nav-begin, .topic-filter):hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px #28312b17;
  }
  :is(.button, .text-link):hover::before { opacity: 1; transform: scale(1); }
  .menu-toggle:hover::before { opacity: 1; transform: scale(1); }
  .menu-toggle[aria-expanded="true"]:hover { color: var(--paper); }
  .menu-toggle[aria-expanded="true"]:hover::before { background: var(--autumn); }
  .primary-nav > a[aria-current]:not(.nav-begin):hover { color: var(--paper); }
  .primary-nav > a[aria-current]:not(.nav-begin):hover::before { background: var(--autumn); }
  .film-toggle:hover { background: var(--autumn); border-color: var(--paper); }
  :is(.topic-filter, .reading-tools button, .search-clear, .clear-request, .article-back, .footer-top nav a, .footer-bottom a):hover {
    background: var(--control-wash);
    color: var(--moss);
  }
  :is(.topic-filter, .reading-tools button)[aria-pressed="true"]:hover {
    background: var(--autumn);
    border-color: var(--autumn);
    color: var(--paper);
  }
  :is(.button, .text-link, .essay, .essay-card):hover .link-arrow { transform: translate(3px,-3px); }
  :is(.button, .text-link)[href^="#"]:hover .link-arrow { transform: translateY(3px); }
  :is(.method-list > li, .engagement-item, .offer-list > li):hover::before { opacity: 1; transform: scale(1); }
  :is(.method-list > li, .engagement-item):hover h3 { transform: translateX(4px); }
  :is(.method-list > li, .engagement-item, .offer-list > li):hover :is(.method-number, .item-number, .offer-number) {
    transform: translateX(2px);
    color: var(--autumn);
  }
  .page-dark :is(.method-list > li, .engagement-item, .offer-list > li):hover :is(.method-number, .item-number, .offer-number) { color: var(--wheat); }
  .essay-card:hover::before { opacity: 1; transform: scale(1); }
  :is(.essay, .essay-card):hover :is(h2, h3) { transform: translateX(3px); }
  summary:hover { background: transparent; padding-inline: 0; }
  summary:hover::before { opacity: 1; }
  summary:hover .detail-mark { color: var(--autumn); }
  :is(.contents-list a, .policy-index a):hover { background: var(--control-wash); color: var(--moss); }
  :is(.form-input, .form-field input, .form-field textarea):hover:not(:focus):not([aria-invalid="true"]) { border-color: var(--coffee); }
}

/* The small film mark keeps its existing 44px transparent touch target. */
@media(max-width:680px),(max-height:500px) {
  .film-toggle:is(:hover, :focus-visible, :active, .is-touch-active) { background: transparent; }
  .film-toggle::before { transition: background-color .25s ease, border-color .25s ease; }
  .film-toggle:is(:focus-visible, :active, .is-touch-active)::before { background: var(--autumn); border-color: var(--paper); }
}
@media(hover:none) {
  .film-toggle:not(:focus-visible):not(:active):not(.is-touch-active) { background: #28312be8; border-color: #dcd3c4a8; }
  @media(max-width:680px),(max-height:500px) {
    .film-toggle:not(:focus-visible):not(:active):not(.is-touch-active) { background: transparent; }
    .film-toggle:not(:focus-visible):not(:active):not(.is-touch-active)::before { background: var(--moss); border-color: var(--sand); }
  }
}

/* Native activation remains intact. A small compression also acknowledges touch. */
:is(.button, .text-link, .nav-begin, .topic-filter, .reading-tools button, .search-clear):is(:active, .is-touch-active) {
  transform: translateY(0) scale(.985);
  box-shadow: 0 2px 6px #28312b12;
  transition-duration: .14s;
}
:is(.button, .text-link):is(:active, .is-touch-active) .link-arrow { transform: translate(2px,-2px); }
:is(.button, .text-link)[href^="#"]:is(:active, .is-touch-active) .link-arrow { transform: translateY(2px); }

/* Pending or unavailable controls do not invite another activation. */
:is(button, .button, .text-link):is(:disabled, [aria-disabled="true"]) {
  transform: none !important;
  box-shadow: none !important;
  transition: none !important;
}
:is(button, .button, .text-link):is(:disabled, [aria-disabled="true"])::before { opacity: 0 !important; }
:is(.topic-filter, .reading-tools button):disabled { background: var(--paper); color: var(--prairie); border-color: var(--rule); cursor: not-allowed; }
:is(.topic-filter, .reading-tools button)[aria-pressed="true"]:disabled { background: var(--moss); color: var(--paper); border-color: var(--moss); }

@media (prefers-reduced-motion:reduce) {
  :is(.button, .text-link, .primary-nav > a, .menu-toggle, .film-toggle, .topic-filter, .reading-tools button, .search-clear, .clear-request, .article-back, .footer-top nav a, .footer-bottom a, summary, .contents-list a, .policy-index a),
  :is(.method-number, .item-number, .offer-number, .link-arrow),
  :is(.method-list > li, .engagement-item, .essay, .essay-card) :is(h2, h3),
  :is(.essay, .essay-card) .essay-index,
  .article-back span,
  :is(.method-list > li, .engagement-item, .offer-list > li)::before,
  :is(.button, .text-link, .essay, .essay-card, .primary-nav > a, .menu-toggle, .film-toggle, summary)::before {
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}