/* VENENVM by Luccivo - raw, flash-lit, guarded. Fred 27 Oct: "raw stylish and outrageous ... still fashion",
   "subtle and intelligent", hidden Roman-church signs, a door you have to get through. */
:root {
  --ink: #0b0a09; --ink-2: #141210; --bone: #ebe3d3; --bone-2: #c9c0b0; --ash: #8b8377;
  --ember: #ff1aa8; --lilac: #ff1aa8; --magenta: #ff1aa8; --st-accent: #ff1aa8;   /* Fred 27 Oct: glaring magenta, sparingly - never the Luccivo rust */ --line: rgba(235,227,211,.14);
  --display: "Bodoni Moda", "Didot", serif; --text: "Spectral", Georgia, serif;
  --gut: clamp(18px, 5vw, 64px);
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); color: var(--bone); -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 300 18px/1.6 var(--text); background: var(--ink); min-height: 100vh; overflow-x: hidden; }
a { color: inherit; }
img, video { display: block; max-width: 100%; }
::selection { background: var(--lilac); color: var(--ink); }
.skip { position: absolute; left: -9999px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip:focus { left: 12px; top: 12px; z-index: 300; background: var(--bone); color: var(--ink); padding: 8px 14px; }

/* film grain over everything: the flash-photo register */
body::after { content: ""; position: fixed; inset: -50%; z-index: 200; pointer-events: none; opacity: .09;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)} 50%{transform:translate(2%,-3%)} 75%{transform:translate(-2%,-1%)} 100%{transform:translate(1%,3%)} }
@media (prefers-reduced-motion: reduce) { body::after { animation: none; } }

.smallcaps { font: 400 12px/1.4 var(--text); letter-spacing: .32em; text-transform: uppercase; color: var(--ash); }
.word { font-family: var(--display); font-weight: 400; letter-spacing: .02em; line-height: .9; margin: 0; }
.year { font-family: var(--display); letter-spacing: .55em; padding-left: .55em; color: var(--bone-2); }
.rule { width: min(520px, 60vw); height: 1px; background: #968c7d; margin: 28px auto 16px; }
.card-glyphs { --st-glyphs: "ⅠⅤⅩⅬⅭⅮⅯ☧✠⁜ΑΩΧΡΣΘꝐꝒꝘꝜꝪꝯꝸ"; }
.st-cell--just-locked { color: #fff; text-shadow: 0 0 14px rgba(255,255,255,.55); }

/* the surveyor's broad arrow: our mark, in a corner of every page */
.mark { position: fixed; right: 14px; bottom: 10px; z-index: 210; font: 400 13px var(--display); color: var(--ash); opacity: .7; letter-spacing: .1em; }

.btn { display: inline-flex; align-items: center; gap: 16px; padding: 18px 30px; border: 1px solid var(--bone); background: transparent;
  color: var(--bone); font: 400 13px var(--text); letter-spacing: .38em; text-transform: uppercase; cursor: pointer; text-decoration: none; }
.btn:hover, .btn:focus-visible { background: var(--bone); color: var(--ink); outline: none; }
.btn--solid { background: var(--bone); color: var(--ink); }
.btn--solid:hover { background: var(--lilac); border-color: var(--lilac); }

/* ---------------------------------------------------------------- the door (home) */
.door { position: relative; isolation: isolate; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; text-align: center; overflow: hidden; }
.door__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: brightness(.42) saturate(.85);
  animation: drift 28s ease-in-out infinite alternate; }
@keyframes drift { from { transform: scale(1.04); } to { transform: scale(1.14) translate(-1.5%, 1%); } }
.door::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 55%, transparent 0%, rgba(11,10,9,.55) 55%, var(--ink) 100%); }
.door__inner { padding: 90px var(--gut) 70px; }
.door .word { font-size: clamp(64px, 15vw, 190px); }
.door .year { font-size: clamp(16px, 2.4vw, 26px); min-height: 1.3em; }
.door__line { font: italic 400 clamp(22px, 3.4vw, 34px)/1.25 var(--display); margin: 26px 0 34px; opacity: 0; transition: opacity 1.4s; }
.door__line.on, .door__knock.on { opacity: 1; }
.door__knock { opacity: 0; transition: opacity 1.4s .4s; }
.door__foot { position: absolute; left: 0; right: 0; bottom: 16px; font-size: 12px; color: var(--ash); letter-spacing: .2em; }
.door__foot a { text-decoration: none; border-bottom: 1px solid var(--line); }
.inscription { font: 400 11px var(--display); letter-spacing: .5em; color: rgba(235,227,211,.32); }

/* the gate overlay */
.gate { position: fixed; inset: 0; z-index: 150; display: none; place-items: center; background: rgba(11,10,9,.97); padding: 24px var(--gut); }
.gate.open { display: grid; }
.gate__box { width: min(640px, 100%); text-align: center; }
.gate__step { display: none; }
.gate__step.on { display: block; animation: rise .7s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.gate h2 { font: 400 clamp(40px, 8vw, 72px)/1 var(--display); margin: 10px 0 18px; }
.gate p { color: var(--bone-2); max-width: 46ch; margin: 0 auto 26px; }
.gate .q { font: italic 400 clamp(22px, 3.6vw, 30px)/1.35 var(--display); color: var(--bone); }
.mirror { display: inline-block; transform: scaleX(-1); font: 400 clamp(34px, 7vw, 64px) var(--display); letter-spacing: .12em; margin: 4px 0 18px; color: var(--lilac); }
.gate input, .gate textarea { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--bone-2); color: var(--bone);
  font: 400 24px var(--display); text-align: center; padding: 10px 4px; margin-bottom: 26px; outline: none; letter-spacing: .08em; }
.gate textarea { font: 300 19px/1.5 var(--text); text-align: left; min-height: 120px; border: 1px solid var(--line); padding: 14px; }
.gate input:focus, .gate textarea:focus { border-color: var(--lilac); }
.gate__no { color: var(--ember); min-height: 1.4em; letter-spacing: .3em; text-transform: uppercase; font-size: 13px; }
.shake { animation: shake .45s; }
@keyframes shake { 0%,100%{transform:none} 20%{transform:translateX(-10px)} 40%{transform:translateX(9px)} 60%{transform:translateX(-6px)} 80%{transform:translateX(4px)} }
.wait { width: 120px; height: 120px; margin: 10px auto 24px; }
.wait circle { fill: none; stroke: var(--bone); stroke-width: 1; stroke-dasharray: 340; stroke-dashoffset: 340; }
.wait.go circle { transition: stroke-dashoffset 7s linear; stroke-dashoffset: 0; }

/* ---------------------------------------------------------------- inside */
.top { position: fixed; top: 0; left: 0; right: 0; z-index: 120; display: flex; justify-content: space-between; align-items: center;
  padding: 16px var(--gut); background: linear-gradient(180deg, rgba(11,10,9,.85), transparent); }
.top a { text-decoration: none; }
.top .word { font-size: 22px; letter-spacing: .14em; }
.film { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.film video { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.05) saturate(.9); }
.film::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, var(--ink) 100%); }
.film__copy { position: absolute; left: var(--gut); right: var(--gut); top: clamp(80px, 14vh, 140px); z-index: 2; }
.film::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(11,10,9,.7) 0%, transparent 45%); }
.film__copy .word { font-size: clamp(56px, 12vw, 160px); }
.film__copy p { font: italic 400 clamp(22px, 3.4vw, 36px) var(--display); margin: 10px 0 0; }
.sec { padding: clamp(80px, 14vh, 160px) var(--gut); }
.sec--tex { position: relative; isolation: isolate; }
.sec--tex > .tex { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.lede { font: 400 clamp(28px, 4.6vw, 52px)/1.15 var(--display); max-width: 22ch; margin: 0 0 22px; letter-spacing: -.01em; }
.lede em { color: var(--lilac); }
.body { max-width: 52ch; color: var(--bone-2); }
.bottle { display: grid; gap: 40px; align-items: center; }
.bottle__img { background: radial-gradient(ellipse at 50% 60%, #1d1a17, var(--ink) 70%); padding: 30px; }
.bottle__img img { max-height: 78vh; margin: 0 auto; object-fit: contain; }
.bottle h2 { font: 400 clamp(46px, 7vw, 92px)/.95 var(--display); margin: 8px 0 14px; }
.price { font: 400 40px var(--display); margin: 22px 0 6px; }
.price small { font-size: 14px; letter-spacing: .4em; color: var(--ash); margin-left: 14px; }
.notes { color: var(--ash); font-size: 15px; margin: 6px 0 28px; }
@media (min-width: 900px) { .bottle { grid-template-columns: 1fr 1fr; } }
.roll { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
.roll img { width: 100%; aspect-ratio: 16/9; object-fit: cover; filter: brightness(.95); }
.roll img:nth-child(3n+1) { grid-column: span 2; }
@media (min-width: 900px) { .roll { grid-template-columns: repeat(3, 1fr); } .roll img:nth-child(3n+1) { grid-column: span 2; } }
.band { text-align: center; padding: clamp(100px, 18vh, 200px) var(--gut); }
.band .inscription { font-size: clamp(14px, 2.4vw, 26px); color: var(--bone); letter-spacing: .5em; }
.file { display: block; max-width: 760px; margin: 0 auto; text-decoration: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 36px 0; }
.file b { display: block; font: 400 clamp(28px, 4vw, 44px)/1.15 var(--display); margin: 8px 0; }
.file:hover b { color: var(--lilac); }
.foot { padding: 60px var(--gut) 40px; border-top: 1px solid var(--line); color: var(--ash); font-size: 13px; display: grid; gap: 14px; }
.foot a { text-decoration: none; border-bottom: 1px solid var(--line); }

/* basket */
.basket { min-height: 100vh; display: grid; place-items: center; padding: 120px var(--gut) 80px; }
.basket__box { width: min(560px, 100%); }
.line-item { display: grid; grid-template-columns: 88px 1fr auto; gap: 18px; align-items: center; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.line-item img { width: 88px; height: 110px; object-fit: contain; background: var(--ink-2); }
.line-item b { font: 400 26px var(--display); display: block; }
.basket label { display: block; margin: 34px 0 8px; }
.basket input { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--bone-2); color: var(--bone);
  font: 400 26px var(--display); padding: 8px 2px; letter-spacing: .12em; text-transform: uppercase; outline: none; }
.basket .btn { margin-top: 30px; width: 100%; justify-content: center; }
.verdict { margin-top: 34px; font: italic 400 26px/1.3 var(--display); min-height: 1.4em; }

/* article */
.article { max-width: 720px; margin: 0 auto; padding: 140px var(--gut) 100px; }
.article h1 { font: 400 clamp(40px, 7vw, 76px)/1 var(--display); margin: 12px 0 30px; }
.article p { color: var(--bone-2); }
.article p.first::first-letter { font-family: var(--display); float: left; font-size: 4.2em; line-height: .8; margin: 6px 12px 0 0; color: var(--lilac); }
.article h2 { font: italic 400 30px var(--display); margin: 48px 0 10px; color: var(--bone); }
.article .src { font-size: 14px; color: var(--ash); margin-top: 50px; }
/* the pack shot (shop) and the cage mechanism loop - Stillroom flacon footage, label-free */
.bottle__img--pack { padding: 0; background: none; }
.bottle__img--pack video { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.cage { position: relative; height: 80vh; overflow: hidden; }
.cage video { width: 100%; height: 100%; object-fit: cover; filter: brightness(.8); }
.cage::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, transparent 40%, var(--ink) 100%); }
.cage__line { position: absolute; left: 0; right: 0; bottom: 8vh; z-index: 2; text-align: center; margin: 0;
  font: italic 400 clamp(22px, 3.4vw, 36px) var(--display); }
/* the full film (Fred's chosen cut, A take 6 with vignette and the end card) */
.reel { max-width: 1100px; margin: 0 auto; text-align: center; }
.reel video { width: 100%; aspect-ratio: 16/9; margin-top: 18px; background: #000; }
.door__about { max-width: 46ch; margin: 34px auto 0; font-size: 14px; line-height: 1.6; color: var(--ash); }

/* stories along the foot of each photograph (Fred 27 Oct) */
.roll .tale { position: relative; margin: 0; overflow: hidden; }
.roll .tale:nth-child(3n+1) { grid-column: span 2; }
.roll .tale img { width: 100%; height: 100%; aspect-ratio: 16/9; object-fit: cover; }
.story { position: absolute; left: 0; right: 0; bottom: 0; padding: 46px 22px 16px;
  background: linear-gradient(180deg, transparent, rgba(11,10,9,.82) 55%); pointer-events: none; }
.story__title { display: block; color: var(--magenta); letter-spacing: .3em; margin-bottom: 6px; font-size: 10px; }
.story__lane { position: relative; height: 1.6em; overflow: hidden; font: italic 400 clamp(15px, 1.6vw, 20px)/1.6 var(--display); color: var(--bone); }
.story__lane--still { height: auto; font-style: normal; font-size: 14px; }
.story__line { position: absolute; left: 0; white-space: nowrap; opacity: 0; transform: translateX(28%); transition: transform .9s cubic-bezier(.2,.7,.2,1), opacity .9s; }
.story__line.in { opacity: 1; transform: translateX(0); }
.story__line.out { opacity: 0; transform: translateX(-28%); }
@media (max-width: 899px) { .story__line { white-space: normal; position: static; } .story__lane { height: auto; min-height: 3.2em; } }
/* the top bar reads over bright photographs */
.top { background: linear-gradient(180deg, rgba(11,10,9,.95) 0%, rgba(11,10,9,.7) 60%, transparent 100%); }
.top .smallcaps { color: var(--bone-2); }
@media (max-width: 899px) { .roll { grid-template-columns: 1fr; } .roll .tale:nth-child(3n+1) { grid-column: auto; } .story { padding: 40px 16px 14px; } }
/* the novel (Fred 27 Oct: "I like this text and font and colour" - the footer's type) */
.novel-teaser { max-width: 760px; margin: 0 auto; color: var(--ash); font-size: 15px; }
.novel-teaser .inscription { display: block; margin-bottom: 14px; }
.novel-teaser__line { font: italic 400 clamp(20px, 2.6vw, 28px)/1.35 var(--display); color: var(--bone); margin: 0 0 18px; }
.novel-teaser__list { list-style: none; padding: 0; margin: 0 0 16px; }
.novel-teaser__list li { border-top: 1px solid var(--line); }
.novel-teaser__list a { display: block; padding: 10px 0; text-decoration: none; color: var(--bone-2); }
.novel-teaser__list a span { color: var(--ash); letter-spacing: .2em; font-size: 11px; text-transform: uppercase; margin-right: 12px; }
.novel-teaser__list a:hover { color: var(--magenta); }
.novel-teaser__more a, .chap-nav a { color: var(--bone-2); text-decoration: none; border-bottom: 1px solid var(--line); }
.toc { list-style: none; padding: 0; margin: 30px 0 50px; }
.toc a { display: grid; gap: 4px; padding: 18px 0; border-top: 1px solid var(--line); text-decoration: none; }
.toc b { font: 400 26px var(--display); color: var(--bone); }
.toc em { color: var(--ash); font-size: 15px; }
.toc a:hover b { color: var(--magenta); }
.novel p { font-size: 18px; }
.chap-nav { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 60px 0 20px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 14px; }
.ebook { margin-top: 60px; padding: 34px 0 10px; border-top: 1px solid var(--line); color: var(--ash); font-size: 15px; }
.ebook .inscription { display: block; margin-bottom: 10px; }
.ebook input[type=email] { width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--bone-2); color: var(--bone); font: 400 20px var(--display); padding: 8px 2px; margin: 10px 0 14px; outline: none; }
.ebook input[type=email]:focus { border-color: var(--magenta); }
.ebook__c { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; margin-bottom: 18px; }
.ebook__c a { color: var(--bone-2); }
.ebook__hp { position: absolute; left: -9999px; }
.ebook__msg { min-height: 1.4em; margin-top: 14px; color: var(--bone); }
.ebook__msg a { color: var(--magenta); }
.novel p.brk { text-align: center; color: var(--magenta); letter-spacing: .4em; margin: 34px 0; }
.novel p.first::first-letter { color: var(--magenta); }