/* ============================================================
   BUILDHAUS FASHION LAYER — motion + texture overhaul, 2026-07
   Progressive enhancement over motion.css. One easing token,
   one accent, hairline discipline. Sources: ledger-row floods
   (Phantom/Work&Co school), counter-zoom media (Clay school),
   masked serif line-rise with italic-safe padding (Obys school),
   sans-to-Fraunces-italic hover swap (Unseen school), animated
   drafting-hatch veils (Basement school), footer instrument
   clock (Obys). All vanilla; everything reduced-motion gated;
   hovers gated to hover-capable pointers.
   ============================================================ */
:root{
  --fx-ease: cubic-bezier(.16, 1, .3, 1);
  --fx-dur: .9s;
  --fx-ink: #111C18;
  --fx-paper: #FAFAF8;
  --fx-cream: #F2EED6;
  --fx-yellow: #FBDC11;
  --fx-hairline: rgba(17, 28, 24, .16);
}

/* ── 1 · Masked heading rise (±2px pad protects Fraunces italics) ── */
@media (prefers-reduced-motion: no-preference){
  .fx-lnw{display:block;overflow:hidden;margin:-.16em -5px;padding:.16em 5px}
  .fx-ln{display:block;transform:translateY(112%);transition:transform var(--fx-dur) var(--fx-ease)}
  .fx-h.fx-in .fx-ln{transform:none}
  .fx-h.fx-done .fx-lnw{overflow:visible}
}

/* ── 2 · Hero headline word stagger (fires on mount, not on scroll) ── */
@media (prefers-reduced-motion: no-preference){
  .fx-armed .fx-w{display:inline-block;transform:translateY(1.35em);transition:transform .95s var(--fx-ease);transition-delay:calc(var(--i) * 55ms)}
  .fx-armed .fx-wm{display:inline-block;overflow:hidden;vertical-align:bottom;margin:-.18em -.08em;padding:.18em .08em}
  .fx-armed.fx-live .fx-w{transform:none}
  .fx-armed.fx-done .fx-wm{overflow:visible}
}

/* ── 3 · Counter-zoom media settle (cinematic arrival, no fade-to-zero) ── */
@media (prefers-reduced-motion: no-preference){
  .fx-zoom{clip-path:inset(5.5% 5.5% 5.5% 5.5%);transform:scale(1.055);transition:clip-path 1.15s var(--fx-ease),transform 1.15s var(--fx-ease);will-change:transform}
  .fx-zoom.fx-in{clip-path:inset(0 0 0 0);transform:none}
}

/* ── 4 · Ledger row flood (register rows + work index rows) ── */
@media (hover: hover){
  .n2-row{position:relative}
  .n2-row::after{content:"";position:absolute;inset:0;background:var(--fx-cream);transform:scaleY(0);transform-origin:bottom;transition:transform .28s cubic-bezier(0,.5,.22,1);z-index:0;pointer-events:none}
  .n2-row:hover::after{transform:scaleY(1)}
  .n2-row > *{position:relative;z-index:1}
  .work-row{position:relative;overflow:hidden}
  .work-row::before{content:"";position:absolute;inset:0;background:var(--fx-cream);transform:scaleY(0);transform-origin:bottom;transition:transform .28s cubic-bezier(0,.5,.22,1);z-index:0;pointer-events:none}
  .work-row:hover::before{transform:scaleY(1)}
  .work-row > *{position:relative;z-index:1}
}

/* ── 5 · Drafting-hatch veil drifting over work imagery on hover ── */
@media (hover: hover) and (prefers-reduced-motion: no-preference){
  .fx-hatch{position:relative}
  .fx-hatch::after{
    content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
    transition:opacity .35s ease;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M-8 72 72 -8 M-8 136 136 -8 M-8 8 8 -8' stroke='%230E1714' stroke-opacity='.10' stroke-width='1'/%3E%3C/svg%3E");
    background-repeat:repeat;
    animation:fx-hatch-drift 6s linear infinite paused;
  }
  .fx-hatch:hover::after,
  .n2-row:hover ~ * .fx-hatch::after{opacity:1;animation-play-state:running}
  @keyframes fx-hatch-drift{from{background-position:0 0}to{background-position:64px 0}}
}

/* ── 6 · Nav label swap: Inter out, Fraunces italic rises through ── */
/* No overflow mask here: Fraunces italic overhangs and descenders must never
   clip, so the swap is a crossfade-rise instead of a masked slide. */
@media (hover: hover) and (prefers-reduced-motion: no-preference){
  .fx-swap{position:relative;display:inline-block;vertical-align:baseline}
  .fx-swap .fx-a,.fx-swap .fx-b{display:block;transition:transform .4s cubic-bezier(.19,1,.22,1),opacity .3s ease}
  .fx-swap .fx-b{position:absolute;inset:0;transform:translateY(42%);opacity:0;font-family:"Fraunces",serif;font-style:italic;font-weight:500;letter-spacing:0}
  a:hover > .fx-swap .fx-a,.fx-swap-host:hover .fx-swap .fx-a{transform:translateY(-38%);opacity:0}
  a:hover > .fx-swap .fx-b,.fx-swap-host:hover .fx-swap .fx-b{transform:none;opacity:1}
}

/* ── 7 · Mono label scramble target (JS drives; class is only a marker) ── */
.fx-scramble{font-variant-ligatures:none}

/* ── 8 · Footer instrument clock ── */
.fx-clock{
  font-family:"JetBrains Mono","IBM Plex Mono",ui-monospace,monospace;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  opacity:.62;margin:18px 0 0;text-align:left;
}
.bh-footer .fx-clock{padding:0 0 4px}

/* ── 9 · Hero plate sink + ink-out under scroll (JS writes --fx-p) ── */
@media (prefers-reduced-motion: no-preference){
  .fx-sink{transform:translate3d(0,calc(var(--fx-p,0) * -7vh),0)}
  .fx-sink-dim{position:absolute;inset:0;background:#0E1714;opacity:calc(var(--fx-p,0) * .55);pointer-events:none}
}

/* ── 10 · Knocked-out underline for prose links (paper gap breaks descenders) ── */
article p a, .post-body p a{
  text-decoration:none;
  box-shadow:0 -1px var(--fx-paper) inset, 0 -2px 0 0 currentColor inset;
  transition:box-shadow .25s ease;
}
@media (hover: hover){
  article p a:hover, .post-body p a:hover{box-shadow:0 -1px var(--fx-paper) inset, 0 -3px 0 0 var(--fx-yellow) inset}
}

/* ============================================================
   TEST · Mini hero page masts (choices-style, brand-translated)
   Full-bleed image + ink scrim + approved drafting grid, content
   bottom-anchored. Remove this block + the fashion.js block to
   revert the experiment.
   ============================================================ */
.mini-hero{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:40svh;overflow:hidden;border-bottom:1px solid rgba(17,28,24,.14);background:#0E1714;padding:clamp(110px,14vh,150px) 0 clamp(34px,5vh,60px);margin-bottom:clamp(0px,3vw,56px)}
.mini-hero > .wrap{position:relative;z-index:2;width:100%;padding-top:0;padding-bottom:0}
.mini-hero .mast-rail{display:none}
@media (max-width:820px){.mini-hero{padding-top:clamp(84px,11vh,104px)}}
.mh-bg{position:absolute;inset:0;z-index:0}
.mh-bg img{width:100%;height:100%;object-fit:cover;object-position:center 32%;opacity:.85;filter:saturate(.92)}
.mh-scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,23,20,.96) 0%,rgba(14,23,20,.8) 44%,rgba(14,23,20,.6) 74%,rgba(14,23,20,.56) 100%)}
.mini-hero h1{color:#FAFAF8;text-shadow:0 3px 30px rgba(0,0,0,.55)}
.mini-hero h1 em{color:var(--fx-yellow)}
.mini-hero .lede{color:rgba(250,250,248,.94);text-shadow:0 2px 18px rgba(0,0,0,.55)}
.mini-hero .sec-marker{color:rgba(250,250,248,.85)}
@media (max-width:820px){.mini-hero{min-height:30svh}}
/* nav legibility over the mast (the pinned nav already brings its own paper bar) */
.nav.mh-dark:not(.is-pinned) a,
.nav.mh-dark:not(.is-pinned) ul a,
.nav.mh-dark:not(.is-pinned) .brand-mark{color:#FAFAF8}
.nav.mh-dark:not(.is-pinned) .cta{border-color:rgba(250,250,248,.45);color:#FAFAF8}
.nav.mh-dark:not(.is-pinned) ul a:hover{color:var(--fx-yellow)}

/* mast variants: article-embedded pages bleed full width; imageless masts
   carry the drafting grid (approved on flat dark, never on photos) */
.mini-hero.mh-bleed{width:100vw;margin-left:calc(50% - 50vw);padding-left:clamp(20px,4vw,72px);padding-right:clamp(20px,4vw,72px);box-sizing:border-box}
.mini-hero.mh-flat{min-height:34svh}
.mh-grid{position:absolute;inset:0;z-index:0;background-image:
  repeating-linear-gradient(0deg,rgba(250,250,248,.035) 0 1px,transparent 1px 34px),
  repeating-linear-gradient(90deg,rgba(250,250,248,.035) 0 1px,transparent 1px 34px),
  repeating-linear-gradient(0deg,rgba(250,250,248,.07) 0 1px,transparent 1px 170px),
  repeating-linear-gradient(90deg,rgba(250,250,248,.07) 0 1px,transparent 1px 170px)}
.mini-hero .legal-meta,.mini-hero .legal-meta *,.mini-hero .post-meta,.mini-hero .post-meta *{color:rgba(250,250,248,.82)}
.mini-hero .post-title,.mini-hero h1.post-title{color:#FAFAF8}