/* ---------- links: one behavior on every page of the site ----------
   Sha, Oct 7, 2026: how a link behaves under the cursor must be the same across the
   entire site; "we can't be having the same thing behave differently on two pages."
   Every page loads this file, last (scripts/check-links.js fails the build if one
   doesn't), and it is the only place that says how a link is underlined, what it does
   on hover, and how fast. The other stylesheets set a link's resting color and type,
   never its hover. The home page draws its menu in React Native and copies these
   values by hand (components/MainApp.js, the injected [data-sitenav] rule).

   Two kinds of link, one motion:
   · a link in running text (a lede, a credit, a card's links, "session archive"): a
     hairline underline at rest; on hover the line and the words deepen to ink together.
   · a menu or control (the site's menu, The Clearing's calendar · reserve · contact row,
     the previous and next session): no underline at rest; on hover
     the words deepen to ink; the open panel is underlined in ink, and the site menu's
     current page is in ink with no line under it (Sha, Oct 13, 2026: the line looked ugly).
   Both answer at the room's pace (--answer-hover in /tokens.css: a short pause, then .6s
   on the breath). Nothing draws in, slides or fades out: hover only deepens color. */

:root{--link-answer:color var(--answer-hover), border-color var(--answer-hover);}   /* /tokens.css */
a{-webkit-tap-highlight-color:transparent;}   /* a tap answers like a hover, in color; the phone's gray box would flash before the page's own fade */

/* in running text */
.mast .lede a, .list.compact a, .more a, .mast .credit a, .pl-links a, .bio-links a,
.p-links a, .p-sess, .link, .event-card .ev-recap, .sec-text a{
  border-bottom:1px solid var(--line); padding-bottom:1px; transition:var(--link-answer);}
.mast .lede a:hover, .list.compact a:hover, .more a:hover, .mast .credit a:hover, .pl-links a:hover,
.bio-links a:hover, .p-links a:hover, .p-sess:hover, .link:hover, .event-card .ev-recap:hover, .sec-text a:hover{
  color:var(--ink); border-bottom-color:var(--ink);}
/* words inside a link that carry their own color deepen with it */
.mast .credit a em, .list.compact a b{transition:var(--link-answer);}
/* on a first visit the credits and the lede's links develop with the page over 2.4s (session.css);
   once they have, type.js marks the masthead settled and their links answer at the usual pace */
.typefx .mast.settled .credit a, .typefx .mast.settled .credit a em, .typefx .mast.settled .lede a{transition:var(--link-answer);}
.mast .credit a:hover em, .list.compact a:hover b{color:var(--ink);}

/* menus and controls */
.site-nav a, .flink, .pn a{border-bottom:1px solid transparent; padding-bottom:1px; transition:var(--link-answer);}
.pn a{border-bottom:0; padding-bottom:0;}   /* a two-line block: it deepens, it is never underlined */
.pn a .pn-k, .pn a .pn-t{transition:var(--link-answer);}
.site-nav a:hover, .flink:hover, .pn a:hover .pn-k, .pn a:hover .pn-t{color:var(--ink);}
.site-nav a[aria-current]{color:var(--ink);}   /* the current page: ink alone, no line under it (Sha, Oct 13, 2026) */
.flink[aria-expanded="true"]{color:var(--ink); border-bottom-color:var(--ink);}
/* the same menu in white, on The Clearing's dark coming-soon veil: it deepens toward white */
#soon .site-nav a{color:rgba(255,255,255,.82);}
#soon .site-nav a:hover{color:#fff;}

/* the archive's recede: hovering a session quiets the others (the one hover that isn't color;
   DESIGN.md, Hover) */
@media (hover:hover){
  .s-row{transition:opacity var(--answer-hover);}
  .sess:has(a.s-row:hover) .s-row, .sess:has(a.s-row:focus-visible) .s-row{opacity:.35;}   /* motion: the recede */
  .sess:has(a.s-row:hover) a.s-row:hover, .sess:has(a.s-row:focus-visible) a.s-row:focus-visible{opacity:1;}   /* motion: the recede */
}