/* =========================================================
   L’INCONNU V6.5 — INTERACTION PASS
   20 interaction/quality systems + House-wide hover grammar.
   ========================================================= */

:root{
  --motion-instant: 120ms;
  --motion-fast: 220ms;
  --motion-base: 360ms;
  --motion-slow: 560ms;
  --motion-ease: cubic-bezier(.22,.8,.22,1);
  --interactive-dark:#11110f;
  --interactive-light:#ffffff;
}

/* 1 — scroll states */
.house-header{
  transition: background-color var(--motion-fast) var(--motion-ease),
              border-color var(--motion-fast) var(--motion-ease),
              box-shadow var(--motion-fast) var(--motion-ease),
              transform var(--motion-base) var(--motion-ease);
}
.house-header[data-scrolled="true"]{box-shadow:0 1px 0 rgba(17,17,15,.12)}
.interior-body .house-header[data-scrolled="true"]{background:rgba(242,240,233,.985)}
.house-header[data-scroll-direction="down"][data-scrolled="true"] .house-header__inner{transform:translateY(-1px)}

/* 2 — active navigation states */
.house-menu__primary a[aria-current="page"]{
  background:var(--interactive-dark);
  color:var(--interactive-light);
  padding-inline:12px;
}
.house-menu__primary a[aria-current="page"] .house-menu__index,
.house-menu__primary a[aria-current="page"] .house-menu__current{opacity:.72}
.interior-tabs a[aria-current="page"]{opacity:1}
.interior-tabs a[aria-current="page"]::after{height:2px}

/* 3 — menu quick find used by '/' shortcut */
.house-menu__quickfind{padding:0 0 30px;border-bottom:1px solid var(--line-subtle);margin-bottom:18px}
.house-menu__quickfind label{display:block;margin-bottom:10px;font-family:var(--font-ui);font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.5}
.house-menu__quickfind-field{display:grid;grid-template-columns:1fr auto;align-items:center;border:1px solid rgba(17,17,15,.16);transition:border-color var(--motion-fast) var(--motion-ease),background var(--motion-fast) var(--motion-ease)}
.house-menu__quickfind-field:focus-within{border-color:var(--ink);background:rgba(17,17,15,.025)}
.house-menu__quickfind input{width:100%;min-height:46px;border:0;background:transparent;color:inherit;padding:0 14px;outline:0;font:12px/1.2 var(--font-ui);letter-spacing:.02em}
.house-menu__quickfind kbd{margin-right:12px;border:1px solid rgba(17,17,15,.16);padding:3px 7px;font:11px/1 var(--font-ui);opacity:.5}
.house-menu__no-results,.house-menu__note{margin:12px 0 0;font:11px/1.4 var(--font-ui);opacity:.72}
[data-menu-filtered="false"]{display:none!important}

/* 4 — stronger accessible focus */
:focus-visible{outline:2px solid currentColor!important;outline-offset:4px!important}
.house-header__utility:focus-visible,.house-menu__close:focus-visible,.story-folio__tools button:focus-visible{outline-offset:2px!important}

/* 5 — menu transition system */
.house-menu__scrim{transition:opacity var(--motion-base) var(--motion-ease)!important}
.house-menu__panel{transition:transform var(--motion-base) var(--motion-ease)!important}
.house-menu__primary a{transition:background-color var(--motion-fast) var(--motion-ease),color var(--motion-fast) var(--motion-ease),padding var(--motion-fast) var(--motion-ease),opacity var(--motion-fast) var(--motion-ease)!important}
.house-menu[data-active="true"] .house-menu__primary a{animation:menuItemIn var(--motion-base) both var(--motion-ease)}
@keyframes menuItemIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}

/* 6 — House navigation is instant (constitution: no House-level page transition; artist grammar owns its own motion). */
@keyframes houseLeave{to{opacity:.7}}
@keyframes houseEnter{from{opacity:.7}to{opacity:1}}
html[data-page-state="leaving"] body{opacity:.94}
body{transition:opacity var(--motion-fast) var(--motion-ease)}

/* 7 — one motion language: reveal/shift, no random effects */
a,button,.editorial-well,.house-related__card,.story-pagination a{transition-timing-function:var(--motion-ease)}

/* 9 — image ratio locking / 10 — responsive images */
img[width][height]{height:auto;object-fit:contain}
.brand-mark{contain:layout paint}

/* 11 — generic video fallback state */
.house-video-shell{position:relative;background:#11110f;color:#f2f0e9;aspect-ratio:16/9;overflow:hidden}
.house-video-shell[data-video-state="loading"]::after{content:"LOADING FILM";position:absolute;left:18px;bottom:16px;font:11px var(--font-ui);letter-spacing:.14em}
.house-video-shell[data-video-state="error"]::after{content:"FILM UNAVAILABLE";position:absolute;inset:0;display:grid;place-items:center;font:11px var(--font-ui);letter-spacing:.14em}
.house-video-shell[data-video-state="error"] video{visibility:hidden}

/* 12 — loading states */
[data-loading="true"],.is-loading{position:relative;pointer-events:none;cursor:wait}
[data-loading="true"]::after,.is-loading::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,currentColor,transparent);animation:houseLoading 1.2s linear infinite;transform-origin:left}
@keyframes houseLoading{0%{transform:scaleX(.15) translateX(-100%)}100%{transform:scaleX(.15) translateX(700%)}}

/* 13 — compact empty states */
.house-empty-state{min-height:240px;padding:48px var(--page-pad);display:grid;align-content:center;border-block:1px solid var(--line-subtle)}
.house-empty-state strong{font:400 clamp(30px,4vw,64px)/1 var(--font-house)}
.house-empty-state p{max-width:46ch;margin:12px 0 0;font:14px/1.6 var(--font-ui);opacity:.62}

/* 14 — error states */
.house-error-state{padding:26px;border:1px solid rgba(17,17,15,.2);background:rgba(17,17,15,.025)}
.house-error-state>[role="status"]{font:11px/1.5 var(--font-ui);letter-spacing:.06em;text-transform:uppercase}
.house-toast{position:fixed;right:24px;bottom:24px;z-index:150;max-width:min(360px,calc(100vw - 48px));padding:12px 16px;background:#11110f;color:#f2f0e9;font:11px/1.3 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity var(--motion-fast) var(--motion-ease),transform var(--motion-fast) var(--motion-ease)}
.house-toast[data-visible="true"]{opacity:1;transform:none}

/* 15 — copy tools */
.story-folio__tools{display:flex;align-items:center;justify-content:flex-end;gap:16px}
.story-folio__tools button{border:1px solid rgba(17,17,15,.18);background:transparent;color:inherit;min-height:34px;padding:0 10px;cursor:pointer;font:11px/1 var(--font-ui);letter-spacing:.12em}

/* 16/17 — deep links + section anchors */
html{scroll-padding-top:calc(var(--house-header-h) + 70px)}
.story-anchor-nav{position:sticky;top:var(--house-header-h);z-index:11;display:flex;gap:0;overflow-x:auto;scrollbar-width:none;background:rgba(242,240,233,.97);border-block:1px solid var(--line-subtle);backdrop-filter:blur(10px)}
.story-anchor-nav::-webkit-scrollbar{display:none}
.story-anchor-nav a{flex:0 0 auto;min-height:48px;padding:0 18px;display:grid;place-items:center;border-right:1px solid var(--line-subtle);font:11px/1 var(--font-ui);letter-spacing:.13em;text-transform:uppercase;opacity:.58}
.story-anchor-nav a[aria-current="true"]{background:#11110f;color:#f2f0e9;opacity:1}
[id]{scroll-margin-top:calc(var(--house-header-h) + 62px)}

/* 18 — reading progress enhanced */
.house-progress{height:2px!important}
.house-progress>span{transform-origin:left center;will-change:transform}

/* 20 — print mode */
@media print{
  @page{margin:18mm}
  .house-header,.house-menu,.house-progress,.story-anchor-nav,.house-footer,.house-directory,.house-related,.story-pagination,.story-folio__tools,a.skip-link,a.text-link{display:none!important}
  html,body,.interior-body{background:#fff!important;color:#111!important}
  main{padding:0!important}
  .story-hero,.story-intro,.story-quote,.story-body,.story-folio{break-inside:avoid}
  .editorial-well{border:1px solid #aaa!important;background:#fff!important;color:#111!important;min-height:180px}
  a{text-decoration:none!important;color:#111!important}
  *{box-shadow:none!important;text-shadow:none!important}
}

/* =========================================================
   HOUSE-WIDE HOVER STATE
   Light interfaces: interactive surface turns ink-black.
   Front door: inverse treatment so hover remains visible.
   ========================================================= */
@media (hover:hover) and (pointer:fine){
  .interior-body :is(.text-link,.story-anchor-nav a,.story-folio__tools button,.places-index__rail a,.culture-calendar__row,.world-ledger__row,.section-next a,.house-footer__notify,.house-footer__column nav a,.house-footer__legal a,.institutional-page a):hover,
  .interior-body :is(.text-link,.story-anchor-nav a,.story-folio__tools button,.places-index__rail a,.culture-calendar__row,.world-ledger__row,.section-next a,.house-footer__notify,.house-footer__column nav a,.house-footer__legal a,.institutional-page a):focus-visible{
    background:var(--interactive-dark)!important;color:var(--interactive-light)!important;opacity:1!important;
  }
  .interior-body .world-ledger__row:hover,.interior-body .culture-calendar__row:hover,.interior-body .places-index__rail a:hover{padding-inline:12px}
  .house-related__card:hover,.house-related__card:focus-visible,.story-pagination a:hover,.story-pagination a:focus-visible{background:#11110f!important;color:#f2f0e9!important}
  .house-related__card:hover .house-related__meta,.house-related__card:hover p,.house-related__card:hover .house-related__link{opacity:.74}
  .editorial-well[href]:hover,.editorial-well[href]:focus-visible{filter:contrast(1.08);transform:translateY(-3px);box-shadow:0 14px 36px rgba(17,17,15,.12)}
  .object-card h2 a:hover,.person-card h2 a:hover,.journal-card h2 a:hover,.journal-lead h2 a:hover,.world-feature h2 a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em}
  .house-menu__secondary a:hover,.house-menu__languages a:hover{background:#11110f;color:#f2f0e9;opacity:1;padding-left:8px}
  .interior-tabs a:hover{background:#11110f;color:#f2f0e9;padding-inline:12px;opacity:1}
  .house-header[data-surface="light"] .house-header__utility:hover,.interior-body .house-header__utility:hover{background:#11110f;color:#f2f0e9}
  .house-header[data-surface="dark"] .house-header__utility:hover{background:#f2f0e9;color:#11110f}
  .house-header__brand:hover{transform:scale(.985)}
}

/* Mobile/touch uses pressed state instead of hover. */
@media (hover:none){
  :is(a,button):active{opacity:.68}
}

/* 8 — reduced motion is a hard override */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  .house-menu[data-active="true"] .house-menu__primary a{animation:none!important}
  [data-loading="true"]::after,.is-loading::after{animation:none!important}
  .editorial-well[href]:hover{transform:none!important}
}

@media(max-width:760px){
  .house-menu__quickfind{padding-bottom:20px;margin-bottom:10px}
  .house-menu__quickfind input{font-size:16px}
  .story-anchor-nav{top:calc(var(--mobile-header-h) + env(safe-area-inset-top));padding-left:var(--mobile-page-pad)}
  .story-anchor-nav a{min-height:46px;padding-inline:14px}
  .story-folio__tools{justify-content:flex-start;flex-wrap:wrap}
  .story-folio__tools strong{width:100%;margin-top:4px}
  .house-toast{right:18px;bottom:18px}
}

/* Front-door / institutional hover coverage */
@media (hover:hover) and (pointer:fine){
  .house-entry__visual,
  .house-entry__caption a,
  .institutional-page a{
    transition:background-color var(--motion-fast) var(--motion-ease),color var(--motion-fast) var(--motion-ease),transform var(--motion-fast) var(--motion-ease),opacity var(--motion-fast) var(--motion-ease),filter var(--motion-fast) var(--motion-ease);
  }
  .house-entry__visual:hover,.house-entry__visual:focus-visible{transform:translateY(-3px);box-shadow:0 14px 36px rgba(17,17,15,.12)}
  .house-entry__visual--journal:hover,.house-entry__visual--journal:focus-visible{background:#11110f;color:#f2f0e9}
  .house-entry__visual--journal:hover img,.house-entry__visual--journal:focus-visible img{filter:invert(1)}
  .house-entry__visual--world:hover,.house-entry__visual--world:focus-visible,
  .house-entry__visual--culture:hover,.house-entry__visual--culture:focus-visible{background:#f2f0e9;color:#11110f;outline:1px solid rgba(17,17,15,.16)}
  .house-entry__visual--world:hover img,.house-entry__visual--world:focus-visible img{filter:invert(1)}
  .house-entry__caption h3 a:hover,.house-entry__caption h3 a:focus-visible,
  .house-entry__action:hover,.house-entry__action:focus-visible{background:#11110f;color:#f2f0e9;padding:4px 7px;text-decoration:none}
  .institutional-page__foot a:hover,.institutional-page__foot a:focus-visible{background:#11110f;color:#f2f0e9;padding:4px 7px}
}