/* Porchlight — the interaction contract (2026-07-31, proposals #1/3/7/8/9/10).
   One vocabulary for all nine pages: keyboard focus, the primary-button
   bloom, links that draw their underline, the header that settles once you
   scroll, a flash where an anchor lands, the once-per-session arrival of the
   wordmark, and the reduced-motion guard. STATES ONLY — every page keeps its
   own base styles; this sheet must never define layout or color grounds.
   Loaded after each page's <style> so its state rules win ties. */

:root{
  --pl-ease:var(--ease-arrive,cubic-bezier(.16,1,.3,1));
  --pl-ring:var(--glow);
  --pl-underline:var(--amber-deep,#A05412);
}

/* ── Keyboard focus: one amber ring everywhere ─────────────────────────── */
:is(a,button,input,select,textarea,summary):focus-visible{
  outline:2px solid var(--amber,#F49B16);outline-offset:2px;border-radius:4px}

/* ── Primary buttons bloom; ghost/danger stay matte (Operate surfaces) ───
   The glow ring is the brand moment — reserved for the lit wordmark and key
   CTAs (DESIGN.md). Hover/focus raises the bulb; press settles it. */
.btn{transition:box-shadow var(--t-slow,220ms) var(--ease-arrive,ease-out),transform var(--t-slow,220ms) var(--ease-arrive,ease-out)}
.btn:not(.ghost):not(.danger):hover,
.btn:not(.ghost):not(.danger):focus-visible{
  box-shadow:0 0 1px rgba(244,155,22,.5),0 0 10px rgba(255,178,64,.34),0 0 24px rgba(255,169,40,.13)}
.btn:not(.ghost):not(.danger):active{transform:scale(.985);transition-duration:var(--t-press,70ms)}
/* porchlight.css's global a:hover (amber-bright) outranks .btn's color and
   turned amber-on-amber on hovered <a class="btn"> — Rio caught the nav Join
   going blank. Buttons keep their on-amber ink in every state. */
a.btn:hover, a.btn:focus-visible, a.btn:active{color:var(--on-amber,#2E2000)}
a.btn.ghost:hover, a.btn.ghost:focus-visible{color:var(--ink,#1A1D26)}
/* …and the wordmark: only "light" is ever lit. Without this, hovering the
   logo link turned "porch" amber too (Rio, 2026-08-01). */
a.litword:hover, a.litword:focus-visible{color:var(--ink,#1A1D26)}

/* ── Links draw their underline, in reading direction ────────────────────
   In from the left on hover, out to the right on leave. Buttons, chips and
   icon links are excluded; nav links only at desktop widths (the mobile
   menu's full-width rows read as a list, not prose). */
footer a:not(.btn):not(.soc), .f-link, a.uld{
  text-decoration:none;
  background-image:linear-gradient(var(--pl-underline),var(--pl-underline));
  background-repeat:no-repeat;background-size:0% 1.5px;background-position:right 100%;
  transition:background-size .18s ease-out}
footer a:not(.btn):not(.soc):hover, footer a:not(.btn):not(.soc):focus-visible,
.f-link:hover, .f-link:focus-visible, a.uld:hover, a.uld:focus-visible{
  background-size:100% 1.5px;background-position:left 100%}
@media (min-width:861px){
  .nav nav a:not(.btn){
    text-decoration:none;
    background-image:linear-gradient(var(--pl-underline),var(--pl-underline));
    background-repeat:no-repeat;background-size:0% 1.5px;background-position:right 100%;
    transition:background-size .18s ease-out,color .15s}
  .nav nav a:not(.btn):hover, .nav nav a:not(.btn):focus-visible{
    background-size:100% 1.5px;background-position:left 100%}
}

/* ── The header settles once you leave the top ───────────────────────────
   pl-interaction.js adds .pl-settle to sticky/fixed headers and toggles
   .pl-scrolled past 8px. The static border yields to a hairline that fades
   in — the bar visibly starts floating over content. */
header.pl-settle{border-bottom-color:transparent}
header.pl-settle::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--hair,rgba(38,40,52,.14));opacity:0;transition:opacity .3s ease-out;
  pointer-events:none}
header.pl-settle.pl-scrolled::after{opacity:1}

/* ── Anchor arrival: the row you were sent to warms, then cools ───────── */
@keyframes pl-anchor{
  0%{background-color:color-mix(in srgb,var(--amber,#F49B16) 16%,transparent)}
  100%{background-color:transparent}}
:is(.rel[id],section[id],form[id]):target{
  animation:pl-anchor 1.4s ease-out;border-radius:10px}

/* ── Prose-link fallback: no UA blue, no visited purple ──────────────────
   Pages that never set a link color fell back to the browser defaults —
   unreadable on the night palette, and a second hue besides. In @layer so
   ANY page-level link rule (privacy's amber, for-you's ember) still wins;
   this only catches links no page rule colors. Ink text, amber-deep
   underline tint — the digest's own link convention. Colors only: links
   the page left un-underlined stay un-underlined. */
@layer pl-fallback{
  a{color:inherit;text-decoration-color:var(--pl-underline);text-underline-offset:2px}
  a:visited{color:inherit;text-decoration-color:var(--pl-underline)}
}

/* ── Dusk Slate v2: the lamp is OFF by day (amber is a pigment) ──────────
   Loaded last, so this wins over any page-level day glow. At dusk/night the
   glow returns via the tokens; porchlight.css adds the breathe on
   .pl-wordmark. */
.litword .lit{text-shadow:none}
[data-theme="night"] .litword .lit,
[data-theme="dusk"] .litword .lit{text-shadow:var(--glow)}

/* ── Reduced motion: everything above collapses to instant states ──────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-delay:0s!important;
    transition-duration:.001ms!important}
  html{scroll-behavior:auto!important}
}