/* ─────────────────────────────────────────────────────────────────────────
   CLYUS — THE HOUSE, cut as dark cinematic catalogue noir.

   Warm ink on bone, one blood accent held under 1% of pixels, a variable
   serif italic at display size, and a mark that draws itself from real
   outlines. Structure over decoration: rails, channels and registration
   ticks, with depth from a moving grain sheet, a lit top edge and an offset
   shadow ramp. Motion slides, never fades, because partial-alpha text is a
   real low-contrast state. Direction notes live outside the shipped bundle.
   ───────────────────────────────────────────────────────────────────────── */

@font-face{font-family:"Bodoni";src:url("/fonts2/BodoniModa-VF.woff2") format("woff2-variations"),url("/fonts2/BodoniModa-VF.woff2") format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Bodoni";src:url("/fonts2/BodoniModa-Italic-VF.woff2") format("woff2-variations"),url("/fonts2/BodoniModa-Italic-VF.woff2") format("woff2");font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:"Archivo";src:url("/fonts2/Archivo-VF.woff2") format("woff2-variations"),url("/fonts2/Archivo-VF.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Martian";src:url("/fonts2/MartianMono-VF.woff2") format("woff2-variations"),url("/fonts2/MartianMono-VF.woff2") format("woff2");font-weight:100 800;font-display:swap}

:root{
  /* warm ink + bone. never #000, never #fff. */
  --ink:#0a0907; --ink-1:#111010; --ink-2:#181614; --ink-3:#221f1c;
  --bone:#e8e2d5; --bone-2:#b9b2a4; --bone-3:#8d867a; --bone-4:#8a8478;
  --blood:#7b1420; --blood-hi:#a81e2d;
  --line:#221f1c; --line-2:#2e2a26;
  --serif:"Bodoni",Times New Roman,Georgia,serif;
  --sans:"Archivo",ui-sans-serif,system-ui,sans-serif;
  --mono:"Martian",ui-monospace,SFMono-Regular,Menlo,monospace;
  --gut:clamp(18px,4vw,64px);
  --rail:clamp(0px,3.4vw,58px);
  --max:1680px;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-w:cubic-bezier(.33,.7,0,1);
  --bar:40px;
  --mx:50;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--ink);color:var(--bone);
  font-family:var(--sans);font-variation-settings:"wght" 370;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
  padding-top:var(--bar);
}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--blood-hi);color:var(--bone)}
:focus-visible{outline:2px solid var(--blood-hi);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;top:-70px;left:16px;z-index:400;background:var(--bone);color:var(--ink);padding:11px 18px;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.skip:focus{top:calc(var(--bar) + 12px)}
.wrap{width:min(var(--max),100% - 2*var(--gut));margin-inline:auto}
.bleed{width:100%}

/* ── DEPTH 1 · the grain sheet (moves, so it never reads as a texture png) ── */
.grain{position:fixed;inset:-5%;z-index:60;pointer-events:none;opacity:.055;
  will-change:transform;contain:strict;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(4) infinite}
@keyframes grain{
  0%{transform:translate3d(0,0,0)}25%{transform:translate3d(-14px,9px,0)}
  50%{transform:translate3d(11px,-13px,0)}75%{transform:translate3d(-9px,-8px,0)}
  100%{transform:translate3d(13px,5px,0)}}

/* ── STRUCTURE · rails, channels, registration ticks ─────────────────────── */
.railed{position:relative;padding-left:var(--rail)}
.railed::before{content:"";position:absolute;left:calc(var(--rail)/2);top:0;bottom:0;width:1px;background:var(--line-2)}
.tick{position:absolute;left:calc(var(--rail)/2 - 5px);width:11px;height:1px;background:var(--blood-hi)}
.channel{border-top:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(232,226,213,.055)}

/* ── TYPE ────────────────────────────────────────────────────────────────── */
.mast{font-family:var(--serif);font-style:italic;font-variation-settings:"opsz" 96,"wght" 500;line-height:.86;letter-spacing:-.022em;margin:0}
.display{font-family:var(--serif);font-variation-settings:"opsz" 88,"wght" 500;line-height:.94;letter-spacing:-.018em;margin:0}
.display em{font-style:italic;font-variation-settings:"opsz" 88,"wght" 400}
.mono{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--bone-3)}
.eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--blood-hi);margin:0}
.lede{font-size:clamp(19px,1.5vw,23px);line-height:1.55;color:var(--bone-2);margin:0}
.tnum{font-variant-numeric:tabular-nums}

/* ── MASTHEAD ────────────────────────────────────────────────────────────── */
.masthead{position:fixed;top:0;left:0;right:0;height:var(--bar);z-index:120;
  display:flex;align-items:center;gap:24px;padding:0 var(--gut);
  background:rgba(10,9,7,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(232,226,213,.05);
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--bone-3);white-space:nowrap}
.masthead .mk{display:flex;align-items:center;gap:10px;color:var(--bone)}
.masthead .mk svg{height:13px;width:auto;fill:var(--bone)}
.masthead nav{display:none;gap:22px}
.masthead nav a{padding-bottom:2px;border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.masthead nav a:hover,.masthead nav a[aria-current="true"]{color:var(--bone);border-color:var(--blood-hi)}
.masthead .sp{flex:1}
.hide-s{display:none}
@media (min-width:960px){.masthead nav{display:inline-flex}.hide-s{display:inline}}

/* ── THE OPENING · art at scale, mark draws itself ───────────────────────── */
.open{position:relative;padding:clamp(26px,4vh,60px) 0 0}
.open .markwrap{width:min(var(--max),100% - 2*var(--gut));margin-inline:auto}
.open .mark{width:100%;height:auto;display:block;overflow:visible;aspect-ratio:6629/1710}
.open .mark path{fill:var(--bone)}
.js .open .mark path{fill:transparent;stroke:var(--bone);stroke-width:6;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.js .open.drawn .mark path{animation:draw 1.35s var(--ease-w) forwards,ink .5s linear 1.15s forwards}
.js .open.drawn .mark path:nth-child(2){animation-delay:.09s,1.24s}
.js .open.drawn .mark path:nth-child(3){animation-delay:.18s,1.33s}
.js .open.drawn .mark path:nth-child(4){animation-delay:.27s,1.42s}
.js .open.drawn .mark path:nth-child(5){animation-delay:.36s,1.51s}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes ink{to{fill:var(--bone);stroke-width:0}}
@media (prefers-reduced-motion:reduce){.js .open .mark path{fill:var(--bone);stroke-width:0;stroke-dashoffset:0}}

.open .under{display:grid;gap:26px;margin-top:clamp(20px,2.6vw,40px)}
@media (min-width:1000px){.open .under{grid-template-columns:minmax(0,68fr) minmax(0,32fr);gap:clamp(30px,4vw,80px);align-items:start}}
.open .say{font-size:clamp(20px,1.7vw,26px);line-height:1.5;color:var(--bone-2);max-width:52ch}
.open .say b{color:var(--bone);font-variation-settings:"wght" 500}
.open .facts{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--bone-4);line-height:2.3}
.open .facts b{color:var(--bone-2)}

/* ── THE FILM · full bleed, no polite frame ──────────────────────────────── */
.film{position:relative;margin-top:clamp(26px,4vw,64px);background:#070605;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(232,226,213,.06),0 60px 120px -70px #000}
.film .frame{position:relative;aspect-ratio:16/9;overflow:hidden}
.film video{width:100%;height:100%;object-fit:cover}
.film .scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(10,9,7,.85) 0%,rgba(10,9,7,0) 42%)}
.film .cap{position:absolute;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;
  align-items:baseline;justify-content:space-between;gap:14px;padding:clamp(14px,2vw,26px) var(--gut);
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--bone-3)}
.film .cap b{color:var(--bone)}
.film .play{position:absolute;left:var(--gut);top:50%;transform:translateY(-50%);z-index:3;
  display:inline-flex;align-items:center;gap:14px;padding:16px 28px;
  border:1px solid rgba(232,226,213,.45);background:rgba(10,9,7,.5);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--bone);
  transition:border-color .3s,background .3s,transform .35s var(--ease)}
.film .play:hover{border-color:var(--blood-hi);background:rgba(10,9,7,.72);transform:translateY(-50%) translateX(4px)}
.film.playing .play,.film.playing .scrim,.film.playing .cap{opacity:0;pointer-events:none;transition:opacity .5s}

/* ── SECTION HEADS ───────────────────────────────────────────────────────── */
.sec{padding:clamp(46px,7vw,130px) 0}
.sec--tight{padding:clamp(34px,5vw,86px) 0}
.head{display:grid;gap:18px;margin-bottom:clamp(26px,3.4vw,56px)}
.head h2{font-size:clamp(38px,6.4vw,104px);max-width:16ch}
.head .note{color:var(--bone-2);font-size:17px;line-height:1.6;max-width:44ch}
@media (min-width:1000px){.head{grid-template-columns:minmax(0,62fr) minmax(0,38fr);gap:clamp(30px,5vw,90px);align-items:end}}

/* ── LOTS · art at scale, alternating weight, never 50/50 ────────────────── */
.lot{position:relative;display:grid;gap:clamp(18px,2.4vw,34px);padding:clamp(34px,5vw,88px) 0;border-top:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(232,226,213,.05)}
@media (min-width:1040px){
  .lot{grid-template-columns:minmax(0,72fr) minmax(0,28fr);gap:clamp(30px,4vw,74px);align-items:center}
  .lot.flip{grid-template-columns:minmax(0,28fr) minmax(0,72fr)}
  .lot.flip .lot-art{order:2}.lot.flip .lot-say{order:1}
}
.lot-art{position:relative;overflow:hidden;background:var(--ink-1);
  border:1px solid var(--line-2);box-shadow:0 50px 100px -60px #000,inset 0 1px 0 rgba(232,226,213,.06)}
.lot-art .media{overflow:hidden}
.lot-art img,.lot-art video{width:100%;height:100%;object-fit:cover;
  transform:scale(1.001);transition:transform 1.2s var(--ease)}
.lot-art:hover img,.lot-art:hover video{transform:scale(1.035)}
.lot-art .lit{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(112deg,rgba(232,226,213,0) 44%,rgba(232,226,213,.05) 51%,rgba(232,226,213,0) 58%);
  background-size:260% 100%;background-position:calc((100 - var(--mx))*1%) 0;transition:background-position .55s var(--ease)}
.lot-say{display:grid;gap:16px;align-content:center}
.lot-no{font-family:var(--serif);font-style:italic;font-variation-settings:"opsz" 60,"wght" 500;font-size:clamp(30px,3vw,52px);line-height:.9;color:var(--blood-hi)}
.lot-say h3{font-family:var(--serif);font-variation-settings:"opsz" 60,"wght" 500;font-size:clamp(28px,3.4vw,52px);line-height:1;letter-spacing:-.015em;margin:0}
.lot-say p{margin:0;color:var(--bone-2);font-size:16.5px;line-height:1.62;max-width:44ch}
.spec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 22px;padding-top:16px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--bone-4)}
.spec b{display:block;margin-top:3px;color:var(--bone-2);font-variation-settings:"wght" 500}
.acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}

/* ── BUTTONS ─────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;
  border:1px solid var(--line-2);background:var(--ink-2);
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--bone-2);
  box-shadow:inset 0 1px 0 rgba(232,226,213,.06),0 12px 26px -18px #000;
  transition:border-color .3s,color .3s,background .3s,transform .3s var(--ease)}
.btn:hover{border-color:var(--blood-hi);color:var(--bone);background:var(--ink-3);transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn--blood{border-color:var(--blood);color:var(--bone);background:linear-gradient(180deg,rgba(168,30,45,.20),rgba(123,20,32,.10))}
.btn--blood:hover{background:linear-gradient(180deg,rgba(168,30,45,.32),rgba(123,20,32,.16))}
.btn--lg{padding:16px 30px;font-size:11px}

/* ── THE LEDGER · every lot, as data ─────────────────────────────────────── */
.ledger{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:11px}
.ledger th{font-weight:400;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--bone-4);text-align:left;padding:0 16px 12px 0;border-bottom:1px solid var(--line-2)}
.ledger td{padding:15px 16px 15px 0;border-bottom:1px solid var(--line);color:var(--bone-3);vertical-align:baseline}
.ledger tbody tr{transition:background .3s}
.ledger tbody tr:hover{background:rgba(232,226,213,.03)}
.ledger .no{color:var(--blood-hi);width:1%;white-space:nowrap}
.ledger .ttl{font-family:var(--serif);font-variation-settings:"opsz" 20,"wght" 500;font-size:19px;color:var(--bone);letter-spacing:0}
.ledger tbody tr:hover .ttl{color:var(--blood-hi)}
.ledger .hide-m{display:none}
@media (min-width:800px){.ledger .hide-m{display:table-cell}}

/* ── WHAT THE HOUSE MAKES · running rows, not a card grid ────────────────── */
.make{display:grid;gap:14px;padding:clamp(24px,3vw,44px) 0;border-top:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(232,226,213,.05)}
@media (min-width:920px){.make{grid-template-columns:auto minmax(0,26ch) minmax(0,1fr);gap:clamp(26px,4vw,72px);align-items:baseline}}
.make .n{font-family:var(--serif);font-style:italic;font-variation-settings:"opsz" 60,"wght" 500;font-size:clamp(30px,2.6vw,44px);line-height:.9;color:var(--blood-hi)}
.make h3{margin:0;font-family:var(--serif);font-variation-settings:"opsz" 44,"wght" 500;font-size:clamp(24px,2.2vw,34px);line-height:1.04;letter-spacing:-.012em}
.make p{margin:0;color:var(--bone-2);font-size:16.5px;line-height:1.62;max-width:62ch}
.make .ex{margin-top:10px;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--bone-4);line-height:2}

/* ── COMMISSION ──────────────────────────────────────────────────────────── */
.commission{position:relative;padding:clamp(46px,7vw,120px) 0;border-top:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(232,226,213,.05)}
.commission .in{display:grid;gap:26px}
@media (min-width:1000px){.commission .in{grid-template-columns:minmax(0,64fr) minmax(0,36fr);gap:clamp(30px,5vw,90px);align-items:end}}
.commission h2{font-size:clamp(38px,6.6vw,108px);max-width:13ch}
.commission p{margin:0;color:var(--bone-2);font-size:18px;line-height:1.55;max-width:46ch}
.commission .fine{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--bone-4);margin-top:16px}

/* ── COLOPHON ────────────────────────────────────────────────────────────── */
.colophon{border-top:1px solid var(--line);padding:24px 0 32px;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--bone-4)}
.colophon .in{display:flex;flex-wrap:wrap;gap:12px 30px;justify-content:space-between}

/* ── LOT PAGE ────────────────────────────────────────────────────────────── */
.lotpage{padding:clamp(22px,3vw,44px) 0 clamp(46px,7vw,110px)}
.lotpage .top{display:grid;gap:22px;margin-bottom:clamp(24px,3vw,48px)}
@media (min-width:1000px){.lotpage .top{grid-template-columns:minmax(0,66fr) minmax(0,34fr);gap:clamp(30px,4vw,80px);align-items:end}}
.lotpage h1{font-family:var(--serif);font-variation-settings:"opsz" 96,"wght" 500;font-size:clamp(42px,7.4vw,112px);line-height:.92;letter-spacing:-.02em;margin:0}
.gallery{display:grid;gap:clamp(12px,1.4vw,24px)}
@media (min-width:960px){.gallery{grid-template-columns:repeat(6,1fr)}
  .gallery figure{grid-column:span 3}
  .gallery figure.wide{grid-column:span 6}
  .gallery figure.third{grid-column:span 2}}
.gallery figure{margin:0;position:relative;overflow:hidden;border:1px solid var(--line-2);background:var(--ink-1);box-shadow:0 40px 90px -60px #000,inset 0 1px 0 rgba(232,226,213,.05)}
.gallery .media{overflow:hidden}
.gallery img,.gallery video{width:100%;height:auto;display:block}
.gallery .fit img{max-height:74vh;object-fit:contain;margin-inline:auto;background:var(--ink-1)}
.gallery figcaption{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--bone-4);padding:11px 14px;border-top:1px solid var(--line)}

/* ── OVERLAY ─────────────────────────────────────────────────────────────── */
.overlay{position:fixed;inset:0;z-index:200;display:none;overflow:auto;padding:clamp(10px,4vh,48px) clamp(10px,3vw,30px);background:rgba(6,5,4,.93);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.overlay.on{display:block}
.overlay .sheet{width:min(1280px,100%);margin-inline:auto;border:1px solid var(--line-2);background:var(--ink);animation:rise .5s var(--ease-w)}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.overlay .bar{display:flex;align-items:center;gap:16px;padding:13px 16px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--bone-3)}
.overlay .bar .x{margin-left:auto;font-size:19px;line-height:1;color:var(--bone-3);padding:2px 6px}
.overlay .bar .x:hover{color:var(--bone)}
.overlay .body{padding:clamp(14px,2vw,26px);display:grid;gap:clamp(14px,2vw,24px)}
@media (min-width:980px){.overlay .body{grid-template-columns:minmax(0,68fr) minmax(0,32fr)}}
.overlay .facts{display:grid;gap:16px;align-content:start}
.overlay .facts h3{margin:0;font-family:var(--serif);font-variation-settings:"opsz" 44,"wght" 500;font-size:34px;line-height:1.02}
.overlay .facts p{margin:0;color:var(--bone-2);font-size:16px;line-height:1.6}

/* ── MOTION · slide, never fade (partial-alpha text is a real a11y state) ── */
.rv{opacity:0;transform:translateY(28px)}
.rv.in{opacity:1;transform:none;transition:opacity .05s linear,transform .9s var(--ease-w)}
.rv[data-d="1"].in{transition-delay:0s,.08s}
.rv[data-d="2"].in{transition-delay:0s,.16s}
.rv[data-d="3"].in{transition-delay:0s,.24s}
.no-js .rv{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .rv{opacity:1;transform:none}
  .grain{animation:none}
}
@media (hover:none){.btn:hover,.lot-art:hover img,.lot-art:hover video{transform:none}}
@media print{.masthead,.overlay,.grain{display:none}body{background:#fff;color:#000}}