/* site-motion.css: styles for the optional jQuery interaction layer (site-motion.js).
   Works with both the editorial tokens (--copper/--rule) and reader tokens (--accent/--hair). */
:root{--motion-accent:var(--accent,var(--copper,#89543e));--motion-rule:var(--hair-strong,var(--rule,#d8d2c8));--motion-bg:var(--bg,#f4f0e8);--motion-text:var(--text,#1c1d1f);--motion-ease:cubic-bezier(.2,.7,.2,1)}

/* Scroll reveal: content is only ever hidden once JS has confirmed motion is welcome. */
.motion-ok .reveal{opacity:0;transform:translate3d(0,14px,0);transition:opacity .7s var(--motion-ease),transform .7s var(--motion-ease);transition-delay:calc(var(--reveal-i,0) * 60ms)}
.motion-ok .reveal.is-in{opacity:1;transform:none}

/* Reading progress hairline on editorial pages */
.site-progress{position:fixed;left:0;right:0;top:0;height:2px;z-index:90;pointer-events:none;opacity:0;transition:opacity .3s var(--motion-ease)}
.site-progress.is-visible{opacity:1}
.site-progress span{display:block;height:100%;background:var(--motion-accent);transform:scaleX(0);transform-origin:0 50%}

/* Back to top */
.back-to-top{position:fixed;right:24px;bottom:24px;z-index:80;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--motion-rule);border-radius:0;background:var(--motion-bg);color:var(--motion-text);font:500 12px/1 Inter,system-ui,sans-serif;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s var(--motion-ease),transform .25s var(--motion-ease),visibility 0s linear .25s,border-color .2s,color .2s}
.back-to-top.is-visible{opacity:1;visibility:visible;transform:none;transition:opacity .25s var(--motion-ease),transform .25s var(--motion-ease),visibility 0s,border-color .2s,color .2s}
.back-to-top:hover{border-color:var(--motion-accent);color:var(--motion-accent)}
.back-to-top:focus-visible{outline:2px solid var(--motion-accent);outline-offset:4px}
@media(min-width:901px){body:has(.cookie-banner.show) .back-to-top{bottom:220px}}
@media(max-width:900px){.back-to-top{right:14px;bottom:84px;padding:0 14px}.back-to-top-label{display:none}}

/* Editorial masthead: sticky with a quiet hairline once scrolled */
.js-motion .masthead{position:sticky;top:0;z-index:70;background:var(--motion-bg);transition:min-height .3s var(--motion-ease)}
.js-motion .masthead::before{content:"";position:absolute;z-index:-1;top:0;bottom:-1px;left:50%;width:100vw;transform:translateX(-50%);background:var(--motion-bg);border-bottom:1px solid transparent;transition:border-color .3s var(--motion-ease)}
.js-motion.is-scrolled .masthead{min-height:72px}
.js-motion.is-scrolled .masthead::before{border-bottom-color:var(--motion-rule)}

/* Theme cross-fade (only while switching) */
.theme-fading,.theme-fading *,.theme-fading *::before,.theme-fading *::after{transition:background-color .4s var(--motion-ease),color .4s var(--motion-ease),border-color .4s var(--motion-ease)!important}

/* Row hover/focus: arrows and titles respond together */
.poem-row .row-arrow,.thread-link .row-arrow,.text-link span:last-child{transition:transform .3s var(--motion-ease)}
.poem-row:hover .row-arrow,.poem-row.is-focus .row-arrow,.thread-link:hover .row-arrow,.thread-link.is-focus .row-arrow{transform:translate(3px,-3px)}
.poem-row .row-title{transition:color .2s var(--motion-ease),transform .35s var(--motion-ease)}
.poem-row:hover .row-title,.poem-row.is-focus .row-title{transform:translateX(6px)}
.text-link:hover span:last-child{transform:translateX(4px)}

@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .back-to-top,.site-progress,.js-motion .masthead{transition:none!important}
  .poem-row:hover .row-title,.poem-row.is-focus .row-title{transform:none}
}
body.reduce-motion .reveal{opacity:1!important;transform:none!important;transition:none!important}
@media print{.reveal{opacity:1!important;transform:none!important}.back-to-top,.site-progress{display:none!important}}
/* The full-bleed masthead backdrop uses 100vw; clip (not hidden) keeps sticky working. */
html.js-motion,html.js-motion body{overflow-x:clip}
.brand-mark{transition:height .3s var(--motion-ease)}
.js-motion.is-scrolled .masthead .brand-mark{height:34px}