:root {
  --forest: #0b2118;
  --forest-deep: #07110d;
  --ink: #11120f;
  --ivory: #e9e1cd;
  --parchment: #d8cbae;
  --gold: #b99b5d;
  --gold-light: #d2b878;
  --tobacco: #75513a;
  --muted: #9d9789;
  --serif: "Italiana", "Times New Roman", serif;
  --mono: "DM Mono", "Courier New", monospace;
  --page-pad: clamp(1.4rem, 5vw, 5.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--forest-deep); }
body { margin: 0; overflow-x: hidden; color: var(--ivory); background: var(--forest-deep); font-family: var(--mono); font-weight: 300; }
a { color: inherit; }
img { display: block; max-width: 100%; }
::selection { color: var(--forest-deep); background: var(--gold-light); }

.skip-link { position: fixed; top: 1rem; left: 1rem; z-index: 100; padding: .75rem 1rem; color: var(--forest-deep); background: var(--ivory); transform: translateY(-180%); transition: transform .2s; }
.skip-link:focus { transform: none; }
a:focus-visible { outline: 1px solid var(--gold-light); outline-offset: 6px; }
.grain { position: fixed; inset: -50%; z-index: 20; pointer-events: none; opacity: .045; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); animation: grain .24s steps(2) infinite; }

.site-header { position: absolute; inset: 0 0 auto; z-index: 10; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; padding: 1.5rem var(--page-pad); border-bottom: 1px solid rgb(185 155 93 / .25); text-transform: uppercase; font-size: .6rem; letter-spacing: .15em; }
.wordmark { display: flex; flex-direction: column; width: fit-content; text-decoration: none; font-size: .7rem; line-height: 1.2; letter-spacing: .24em; }
.header-note { margin: .2rem 0 0; color: var(--muted); }
.header-link { justify-self: end; margin-top: .2rem; text-decoration: none; }
.header-link span { margin-left: .55rem; color: var(--gold); }

.hero { position: relative; display: grid; grid-template-columns: 5fr 4fr; align-items: center; min-height: 100svh; padding: 8rem var(--page-pad) 3rem; isolation: isolate; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(circle at 70% 48%, rgb(117 81 58 / .16), transparent 31%), linear-gradient(115deg, #0d281d 0%, #07120e 58%, #050a08 100%); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .18; background: none; }
.hero-glow { position: absolute; top: 15%; right: 6%; width: 38rem; aspect-ratio: 1; border-radius: 50%; background: rgb(185 155 93 / .08); filter: blur(80px); animation: breathe 8s ease-in-out infinite alternate; }
.hero-index { position: absolute; left: var(--page-pad); top: 23%; display: flex; flex-direction: column; gap: .3rem; color: var(--gold); text-transform: uppercase; font-size: .52rem; letter-spacing: .18em; }
.hero-copy { position: relative; z-index: 2; align-self: center; padding-top: 10vh; }
.kicker, .section-marker, .ritual-label { color: var(--gold-light); text-transform: uppercase; font-size: .58rem; letter-spacing: .22em; }
.kicker { margin: 0 0 2rem; }
.hero h1 { position: relative; z-index: 2; margin: 0; font: 400 clamp(4.7rem, 9.2vw, 10.5rem)/.76 var(--serif); letter-spacing: -.045em; }
.title-line { display: block; white-space: nowrap; }
.title-indent { margin-left: clamp(1rem, 8vw, 8rem); color: var(--gold-light); font-style: italic; }
.hero-intro { max-width: 28rem; margin: 3.2rem 0 0 clamp(1rem, 8vw, 8rem); color: #aaa698; font-size: clamp(.68rem, .85vw, .78rem); line-height: 1.9; }
.crest-stage { position: relative; z-index: 1; width: min(42vw, 40rem); margin: 4rem 0 0 -2rem; transform: translateY(var(--parallax, 0)); }
.crest-stage img { position: relative; z-index: 2; width: 84%; margin: auto; mix-blend-mode: screen; filter: sepia(.3) saturate(.75) contrast(1.06) drop-shadow(0 2rem 3rem rgb(0 0 0 / .35)); animation: crest-drift 7s ease-in-out infinite alternate; }
.crest-ring { position: absolute; left: 50%; top: 50%; aspect-ratio: 1; border: 1px solid rgb(185 155 93 / .3); border-radius: 50%; transform: translate(-50%, -50%); }
.crest-ring-outer { width: 101%; }
.crest-ring-inner { width: 78%; border-color: rgb(233 225 205 / .1); }
.crest-stage figcaption { margin-top: 1rem; text-align: center; color: var(--muted); text-transform: uppercase; font-size: .48rem; letter-spacing: .24em; }
.scroll-cue { position: absolute; bottom: 2.3rem; left: var(--page-pad); display: flex; align-items: center; gap: 1.2rem; color: var(--muted); text-decoration: none; text-transform: uppercase; font-size: .5rem; letter-spacing: .22em; }
.scroll-cue i { display: block; width: 5rem; height: 1px; background: var(--gold); transform-origin: left; animation: draw 2.4s ease-in-out infinite; }

.section-marker { display: flex; gap: 1.5rem; align-items: center; }
.section-marker span:first-child { color: var(--muted); }
.philosophy { position: relative; min-height: 46rem; padding: clamp(7rem, 12vw, 12rem) var(--page-pad); color: var(--ink); background: var(--ivory); overflow: hidden; }
.philosophy::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .1; background: none; }
.philosophy .section-marker { color: var(--tobacco); }
.philosophy-body { position: relative; z-index: 1; display: grid; grid-template-columns: 2.2fr 1fr; gap: 8vw; align-items: end; margin-top: 7rem; }
.display-copy { margin: 0; font: 400 clamp(4rem, 7.4vw, 8.5rem)/.87 var(--serif); letter-spacing: -.04em; }
.display-copy em { color: var(--tobacco); font-style: italic; }
.philosophy-note { max-width: 22rem; padding-bottom: .8rem; font-size: .72rem; line-height: 2; }
.philosophy-note .rule { display: block; width: 100%; height: 1px; margin-bottom: 2rem; background: rgb(17 18 15 / .35); transform-origin: left; }
.margin-word { position: absolute; right: -.8rem; bottom: 1.5rem; margin: 0; color: rgb(117 81 58 / .07); font: 400 11rem/1 var(--serif); writing-mode: vertical-rl; }

.collection { position: relative; padding: clamp(7rem, 11vw, 11rem) var(--page-pad); background: #0a1712; }
.collection-header { display: grid; grid-template-columns: 1fr 1.2fr .8fr; gap: 4vw; align-items: end; margin-bottom: clamp(5rem, 9vw, 9rem); }
.collection-header .section-marker { align-self: start; }
.collection-header h2 { margin: 0; font: 400 clamp(4.5rem, 8vw, 9rem)/.72 var(--serif); letter-spacing: -.04em; }
.collection-header h2 em { color: var(--gold-light); font-style: italic; }
.collection-header > p { max-width: 16rem; margin: 0; color: var(--muted); font-size: .68rem; line-height: 1.9; }
.collection-list { border-top: 1px solid rgb(185 155 93 / .4); }
.collection-item { display: grid; grid-template-columns: 8% 1fr auto 2rem; gap: 2rem; align-items: center; min-height: clamp(8rem, 11vw, 11rem); border-bottom: 1px solid rgb(185 155 93 / .25); transition: background .45s, padding .45s; }
.collection-item:hover { padding-inline: 1.2rem; background: rgb(185 155 93 / .045); }
.collection-number, .collection-status { color: var(--muted); text-transform: uppercase; font-size: .52rem; letter-spacing: .18em; }
.collection-item h3 { margin: 0; font: 400 clamp(3.1rem, 6vw, 7rem)/1 var(--serif); letter-spacing: -.03em; }
.collection-arrow { color: var(--gold); font-size: 1.3rem; transition: transform .4s; }
.collection-item:hover .collection-arrow { transform: translate(5px, -5px); }

.ritual { min-height: 100svh; padding: clamp(7rem, 12vw, 12rem) var(--page-pad); color: var(--ink); background: var(--parchment); }
.ritual-line { width: 100%; height: 1px; background: rgb(17 18 15 / .35); transform-origin: left; }
.ritual-label { margin: 1.5rem 0 12vh; color: var(--tobacco); }
.ritual-words { display: flex; flex-direction: column; font: 400 clamp(4rem, 9vw, 10rem)/.85 var(--serif); letter-spacing: -.045em; }
.ritual-words span:nth-child(2) { align-self: center; color: var(--tobacco); font-style: italic; }
.ritual-words span:last-child { align-self: end; }
.ritual-copy { max-width: 27rem; margin: 5rem 0 0 auto; font-size: .72rem; line-height: 2; }

.contact { position: relative; min-height: 92svh; display: flex; flex-direction: column; justify-content: center; padding: 7rem var(--page-pad) 4rem; background: radial-gradient(circle at 80% 30%, #173527, #07110d 52%); overflow: hidden; }
.contact::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgb(185 155 93 / .14); }
.contact .section-marker { position: relative; z-index: 2; margin-bottom: 10vh; }
.contact-prelude { position: absolute; top: 50%; right: var(--page-pad); z-index: 2; margin: 0; color: var(--muted); font: 400 clamp(1.5rem, 2.5vw, 2.5rem)/1.15 var(--serif); }
.contact h2 { position: relative; z-index: 2; margin: 0; font: 400 clamp(4.3rem, 9.4vw, 10.5rem)/.8 var(--serif); letter-spacing: -.045em; }
.contact h2 em { color: var(--gold-light); font-style: italic; }
.email-link { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; width: min(100%, 47rem); margin-top: 5rem; padding: 1.3rem 0; border-block: 1px solid rgb(185 155 93 / .45); color: var(--ivory); text-decoration: none; font-size: clamp(.65rem, 1.2vw, .88rem); letter-spacing: .04em; }
.email-arrow { color: var(--gold-light); font-size: 1.4rem; transition: transform .35s; }
.email-link:hover .email-arrow { transform: translate(5px, -5px); }
footer { display: flex; justify-content: space-between; gap: 2rem; padding: 1.5rem var(--page-pad); border-top: 1px solid rgb(233 225 205 / .12); color: var(--muted); background: var(--forest-deep); text-transform: uppercase; font-size: .48rem; letter-spacing: .15em; }
footer a { text-decoration: none; }

.js .reveal { opacity: 0; transform: translateY(2rem); transition: opacity .85s cubic-bezier(.2,.65,.25,1) var(--delay, 0ms), transform .85s cubic-bezier(.2,.65,.25,1) var(--delay, 0ms); }
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }
.js .ritual-line.reveal, .js .philosophy-note.reveal .rule { transform: scaleX(0); }
.js .ritual-line.reveal.is-visible, .js .philosophy-note.reveal.is-visible .rule { transform: scaleX(1); transition: transform 1.3s cubic-bezier(.2,.65,.25,1) .15s; }

@keyframes crest-drift { to { transform: translate3d(0, -10px, 0) rotate(.35deg); } }
@keyframes breathe { to { opacity: .55; transform: scale(1.08); } }
@keyframes draw { 0% { transform: scaleX(.15); transform-origin: left; } 50% { transform: scaleX(1); transform-origin: left; } 51% { transform-origin: right; } 100% { transform: scaleX(.15); transform-origin: right; } }
@keyframes grain { 0% { transform: translate(1%, -1%); } 50% { transform: translate(-1%, 1%); } 100% { transform: translate(1%, 1%); } }

@media (max-width: 800px) {
  .site-header { grid-template-columns: 1fr 1fr; padding-top: 1.2rem; }
  .header-note { display: none; }
  .hero { display: block; min-height: 52rem; padding-top: 9rem; }
  .hero::after { background-size: 50% 100%; }
  .hero-index { display: none; }
  .hero-copy { padding-top: 0; }
  .hero h1 { font-size: clamp(4.25rem, 20vw, 7rem); line-height: .82; }
  .title-indent { margin-left: .5rem; }
  .hero-intro { width: 65%; margin: 2rem 0 0 auto; }
  .crest-stage { position: absolute; right: -18vw; bottom: 2rem; width: min(92vw, 32rem); margin: 0; opacity: .78; }
  .crest-stage figcaption { display: none; }
  .scroll-cue { bottom: 2rem; }
  .philosophy { min-height: auto; }
  .philosophy-body { grid-template-columns: 1fr; margin-top: 4rem; }
  .display-copy { font-size: clamp(3.6rem, 17vw, 6rem); }
  .philosophy-note { margin-left: 22%; }
  .margin-word { display: none; }
  .collection-header { grid-template-columns: 1fr; }
  .collection-header h2 { margin: 2.5rem 0 1rem; font-size: clamp(4.4rem, 20vw, 7rem); }
  .collection-item { grid-template-columns: 2rem 1fr 1rem; gap: .8rem; min-height: 8.5rem; }
  .collection-status { display: none; }
  .collection-item h3 { font-size: clamp(3rem, 14vw, 5rem); }
  .ritual { min-height: auto; }
  .ritual-label { margin-bottom: 5rem; }
  .ritual-words { font-size: clamp(3.5rem, 17vw, 6rem); }
  .ritual-words span:nth-child(2), .ritual-words span:last-child { align-self: initial; }
  .ritual-words span:nth-child(2) { margin-left: 12%; }
  .ritual-copy { margin-top: 4rem; margin-left: 20%; }
  .contact { min-height: 48rem; }
  .contact::before, .contact-prelude { display: none; }
  .contact h2 { font-size: clamp(4rem, 18vw, 7rem); }
  footer { flex-wrap: wrap; }
  footer span:nth-child(2) { display: none; }
}

@media (max-width: 430px) {
  .hero { min-height: 48rem; }
  .hero h1 { font-size: 4.4rem; }
  .hero-intro { width: 78%; }
  .crest-stage { right: -25vw; bottom: 4.5rem; width: 105vw; }
  .display-copy { font-size: 3.6rem; }
  .collection-item h3 { font-size: 3.4rem; }
  .email-link { font-size: .58rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  .js .ritual-line.reveal, .js .philosophy-note.reveal .rule { transform: none; }
}

/* The cigar and its viewport smoke signature */
.smoke-canvas {
  position: fixed;
  inset: 0;
  z-index: 6;
  display: block;
  width: 100vw;
  height: 100vh;
  max-width: 100%;
  pointer-events: none;
  opacity: .82;
}

/* Smoke sits over the lacquer surfaces but under every readable layer. */
.hero { isolation: auto; }
.hero-copy, .hero-index, .scroll-cue,
.philosophy > *, .collection > *, .ritual > *, .contact > *, footer > * { position: relative; z-index: 8; }
.hero-vignette { z-index: 3; }
.hero-crest { z-index: 0; width: min(53rem, 67vw, 82vh); max-width: min(53rem, 82vw); max-height: 82vh; overflow: visible; }
.hero-crest img { width: 100%; height: auto; max-width: 100%; max-height: 82vh; aspect-ratio: 1 / 1; object-fit: contain; }
.philosophy, .collection, .ritual, .contact { overflow: clip; }
.philosophy { background: linear-gradient(125deg, rgb(17 17 15 / .975), rgb(10 10 9 / .97) 70%); }
.collection { background: linear-gradient(180deg, rgb(7 7 6 / .97), rgb(11 10 9 / .965)); }
.ritual { background: radial-gradient(circle at 77% 20%, rgb(92 45 27 / .1), transparent 27%), rgb(17 16 14 / .97); }
.contact { background: radial-gradient(circle at 76% 35%, rgb(82 34 22 / .12), transparent 32%), linear-gradient(135deg, rgb(11 11 10 / .97), rgb(5 5 5 / .965) 68%); padding-bottom: 8rem; }
footer { position: relative; z-index: 7; padding-bottom: 5.5rem; }

@media (max-width: 800px) {
  .smoke-canvas { opacity: .72; }
  .hero-crest { left: 50%; top: 52%; width: min(86vw, 70vh); max-width: 86vw; max-height: 70vh; }
  .hero-crest img { max-height: 70vh; }
  .contact { padding-bottom: 7.5rem; }
  footer { padding-bottom: 5rem; }
}

@media (max-width: 430px) {
  .hero-crest { left: 50%; width: min(88vw, 62vh); max-width: 88vw; max-height: 62vh; }
}

@media (prefers-reduced-motion: reduce) {
  .smoke-canvas { display: block; opacity: .68; }
}

/* Restrained hero surface */
.grain { opacity: .025; }
.hero-vignette {
  background: radial-gradient(ellipse at 64% 52%, transparent 22%, rgb(0 0 0 / .15) 61%, rgb(0 0 0 / .7) 100%);
  box-shadow: inset 0 0 10rem 3rem rgb(0 0 0 / .76);
}
.hero-copy { max-width: 76%; }
.smoke-canvas { opacity: 1; }

@media (max-width: 800px) {
  .hero-copy { align-self: flex-start; max-width: 100%; padding-top: 7vh; }
  .hero h1 { font-size: clamp(4.7rem, 24vw, 7.8rem); }
  .hero-intro { width: min(72%, 25rem); }
}

@media (max-width: 430px) {
  .hero-copy { padding-top: 5vh; }
}

/* Closing still life */
.hero { background: #050505; }
.hero-copy { max-width: min(76rem, 100%); }
.closing-scene {
  position: relative;
  min-height: 110svh;
  overflow: hidden;
  background: radial-gradient(ellipse at 76% 78%, #0b0907 0%, #060605 38%, #040404 72%);
  isolation: isolate;
}
.closing-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  box-shadow: inset 0 0 10rem 2rem rgb(0 0 0 / .72);
}
.closing-scene .smoke-canvas {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  opacity: 1;
  pointer-events: none;
}
.closing-product {
  position: absolute;
  right: clamp(2rem, 5vw, 5.5rem);
  bottom: clamp(2.5rem, 6vh, 5rem);
  z-index: 2;
  width: min(33vw, 560px);
  max-width: calc(100vw - 4rem);
  margin: 0;
  background: none;
  border: 0;
  box-shadow: none;
  pointer-events: none;
}
.closing-product img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1536 / 1024;
  object-fit: contain;
}
.closing-product .smoke-origin {
  position: absolute;
  left: 55%;
  top: 50.8%;
  width: 2px;
  height: 2px;
  transform: translate(-50%, -50%);
}
.closing-scene-copy {
  position: absolute;
  left: var(--page-pad);
  top: 18%;
  z-index: 6;
  color: var(--gold);
  text-transform: uppercase;
  font-size: .55rem;
  letter-spacing: .2em;
}
.closing-scene-copy p { margin: 1.25rem 0 0; color: var(--ivory); text-transform: none; font: 400 clamp(3rem, 6vw, 6.5rem)/.88 var(--serif); letter-spacing: -.04em; }
.closing-scene-copy em { color: var(--gold-light); }
footer { padding-bottom: 1.5rem; }

@media (max-width: 800px) {
  .closing-scene { min-height: 100svh; }
  .closing-product { right: 1rem; bottom: 3rem; width: min(72vw, 25rem); max-width: calc(100vw - 2rem); }
  .closing-scene-copy { top: 14%; }
  .closing-scene-copy p { font-size: clamp(3.4rem, 16vw, 5.8rem); }
}

@media (max-width: 430px) {
  .closing-product { right: .75rem; bottom: 3.5rem; width: min(76vw, 20rem); max-width: calc(100vw - 1.5rem); }
  .closing-scene-copy { top: 12%; }
}

@media (prefers-reduced-motion: reduce) {
  .closing-scene .smoke-canvas { display: block; opacity: .84; }
}

/* Page-smoke placement intentionally last in the cascade. */
.page-smoke {
  position: fixed;
  inset: 0;
  z-index: 9;
  display: block;
  width: 100vw;
  height: 100vh;
  max-width: 100%;
  opacity: 1;
  pointer-events: none;
}
.hero .hero-copy, .philosophy > *, .collection > *, .ritual > *, .contact-copy, footer > * { position: relative; z-index: 10; }
.contact-product { z-index: 8; }
main, .contact { overflow: visible !important; }
@media (prefers-reduced-motion: reduce) {
  .page-smoke { display: block; opacity: .8; }
}

/* Contact still life and page-coordinate smoke */
main, .contact { overflow: visible !important; }
.page-smoke {
  position: fixed;
  inset: 0;
  z-index: 3;
  display: block;
  width: 100vw;
  height: 100vh;
  max-width: 100%;
  opacity: 1;
  pointer-events: none;
}
.hero-copy, .philosophy > *, .collection > *, .ritual > *, .contact > *, footer > * { position: relative; z-index: 8; }
.contact {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(18rem, .85fr);
  gap: clamp(3rem, 7vw, 8rem);
  align-items: center;
  min-height: 100svh;
  padding: clamp(7rem, 11vw, 11rem) var(--page-pad) clamp(3rem, 6vw, 6rem);
}
.contact-copy { min-width: 0; align-self: center; }
.contact .contact-prelude { position: static; display: block; margin: 2rem 0 0; color: var(--muted); }
.contact .section-marker { margin-bottom: clamp(3rem, 8vh, 6rem); }
.contact .email-link { width: min(100%, 47rem); }
.contact-product {
  position: relative;
  z-index: 8;
  align-self: end;
  justify-self: end;
  width: min(33vw, 560px);
  max-width: 100%;
  margin: 0 0 clamp(1rem, 3vh, 2.5rem);
  background: none;
  border: 0;
  box-shadow: none;
  pointer-events: none;
}
.contact-product img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: 1373 / 999;
  object-fit: contain;
}
.contact-product .smoke-origin { position: absolute; left: 55.8%; top: 47.9%; width: 2px; height: 2px; transform: translate(-50%, -50%); }

@media (max-width: 800px) {
  .contact { grid-template-columns: 1fr; gap: 3.5rem; min-height: auto; padding-top: 8rem; }
  .contact-product { grid-row: 2; width: min(76vw, 24rem); max-width: calc(100vw - 2 * var(--page-pad)); margin: 0 0 1rem auto; }
  .contact .contact-prelude { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .page-smoke { display: block; opacity: .8; }
}

/* Complete, proportion-safe hero crest */
.hero-crest {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  width: min(52vw, 42rem, 70vh);
  height: auto;
  max-width: 80vw;
  max-height: 70vh;
  margin: 0;
  overflow: visible;
  opacity: .065;
  transform: translate(-50%, -50%);
  animation: none;
  pointer-events: none;
}
.hero-crest img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 70vh;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  mix-blend-mode: normal;
  filter: grayscale(.12) sepia(.14) contrast(1.04);
  animation: none;
}

@media (max-width: 800px) {
  .hero-crest { left: 50%; top: 52%; width: min(82vw, 33rem, 62vh); max-width: 82vw; max-height: 62vh; transform: translate(-50%, -50%); }
  .hero-crest img { max-height: 62vh; }
}

/* Nocturne refinement */
:root {
  --forest: #0d1712;
  --forest-deep: #070706;
  --ink: #080806;
  --ivory: #e7dfce;
  --parchment: #cbbd9f;
  --gold: #a9884f;
  --gold-light: #c5a768;
  --tobacco: #6e4935;
  --muted: #918d83;
}
html, body { background: #070706; }
body { color: var(--ivory); }
img { height: auto; object-fit: contain; }

.site-header { border-color: rgb(197 167 104 / .18); }
.wordmark { color: #d9d1c1; }
.hero {
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding: 8rem var(--page-pad) 5rem;
  background: #070706;
}
.hero::before {
  background:
    radial-gradient(ellipse at 76% 52%, rgb(89 49 30 / .09), transparent 37%),
    radial-gradient(ellipse at 22% 115%, rgb(58 20 12 / .12), transparent 39%),
    linear-gradient(115deg, #090a09 0%, #050505 58%, #090806 100%);
}
.hero::after {
  z-index: 3;
  opacity: .3;
  pointer-events: none;
  background: linear-gradient(90deg, rgb(0 0 0 / .58), transparent 28%, transparent 72%, rgb(0 0 0 / .45));
}
.smoke-canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; opacity: .9; }
.hero-vignette { position: absolute; inset: 0; z-index: 2; pointer-events: none; box-shadow: inset 0 0 12rem 4rem rgb(0 0 0 / .78); }
.hero-crest {
  position: absolute;
  left: 50%;
  top: 52%;
  z-index: 0;
  width: min(67vw, 53rem);
  aspect-ratio: 1 / 1;
  margin: 0;
  opacity: .105;
  transform: translate(-47%, calc(-50% + var(--crest-shift, 0px)));
  animation: hero-crest-drift 12s ease-in-out infinite alternate;
  pointer-events: none;
}
.hero-crest img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  mix-blend-mode: screen;
  filter: grayscale(.25) sepia(.22) contrast(1.08);
}
.hero-crest { max-width: min(72rem, 82vw); max-height: min(72rem, 82vh); overflow: hidden; }
.hero-crest img { max-width: 100%; max-height: 100%; }
.hero-copy { position: relative; z-index: 4; width: min(88rem, 100%); padding: 4vh 0 0; }
.kicker { margin: 0 0 clamp(2rem, 5vh, 4rem); color: var(--gold-light); }
.hero h1 { max-width: 100%; font-size: clamp(5.5rem, 13vw, 14rem); line-height: .68; letter-spacing: -.055em; text-shadow: 0 1.2rem 3rem rgb(0 0 0 / .7); }
.title-line { width: fit-content; }
.title-indent { margin: .08em 0 0 clamp(1.2rem, 15vw, 15rem); color: var(--ivory); font-style: normal; }
.hero-rule { width: min(34rem, 48vw); height: 1px; margin: clamp(2.5rem, 6vh, 5rem) 0 0 clamp(1.2rem, 15vw, 15rem); background: linear-gradient(90deg, var(--gold), transparent); transform-origin: left; }
.hero-intro { max-width: 29rem; margin: 1.5rem 0 0 clamp(1.2rem, 15vw, 15rem); color: #aaa59a; }
.hero-index { z-index: 4; top: auto; bottom: 2.25rem; gap: .42rem; }
.scroll-cue { z-index: 4; left: auto; right: var(--page-pad); }
.scroll-cue i { background: linear-gradient(90deg, var(--gold), transparent); }
.hero-reveal { opacity: 0; transform: translateY(1.4rem); transition: opacity 1.15s cubic-bezier(.2,.65,.22,1) var(--hero-delay), transform 1.15s cubic-bezier(.2,.65,.22,1) var(--hero-delay); }
.hero-reveal.is-visible { opacity: 1; transform: translateY(0); }
.hero-rule.hero-reveal { transform: scaleX(0); }
.hero-rule.hero-reveal.is-visible { transform: scaleX(1); transition-duration: 1.5s; }

.philosophy { color: var(--ivory); background: linear-gradient(125deg, #11110f, #0a0a09 70%); }
.philosophy::after { opacity: .025; }
.philosophy .section-marker { color: var(--gold-light); }
.display-copy em { color: var(--gold-light); }
.philosophy-note { color: #aaa59b; }
.philosophy-note .rule { background: rgb(197 167 104 / .35); }
.margin-word { color: rgb(197 167 104 / .025); }
.collection { background: linear-gradient(180deg, #070706, #0b0a09); }
.collection-list { border-color: rgb(197 167 104 / .32); }
.collection-item { border-color: rgb(197 167 104 / .18); }
.collection-item:hover { background: linear-gradient(90deg, rgb(169 136 79 / .055), transparent 70%); }
.ritual { color: var(--ivory); background: radial-gradient(circle at 77% 20%, rgb(92 45 27 / .11), transparent 27%), #11100e; }
.ritual-line { background: rgb(197 167 104 / .28); }
.ritual-label, .ritual-words span:nth-child(2) { color: var(--gold-light); }
.ritual-copy { color: #aaa59b; }
.contact { background: radial-gradient(circle at 76% 35%, rgb(82 34 22 / .14), transparent 32%), linear-gradient(135deg, #0b0b0a, #050505 68%); }
footer { background: #050505; }

@keyframes hero-crest-drift {
  to { transform: translate(-47%, calc(-50% + var(--crest-shift, 0px) - 7px)); }
}

@media (max-width: 800px) {
  .hero { display: flex; min-height: 100svh; padding-top: 8rem; }
  .hero-crest { left: 58%; top: 55%; width: min(112vw, 39rem); opacity: .09; }
  .hero h1 { font-size: clamp(5rem, 25vw, 8.4rem); line-height: .73; }
  .title-indent { margin-left: .12em; }
  .hero-rule { width: 72%; margin: 3rem 0 0 18%; }
  .hero-intro { width: 74%; margin: 1.4rem 0 0 18%; }
  .hero-index { display: none; }
  .scroll-cue { left: var(--page-pad); right: auto; }
  .philosophy { background: #0e0e0c; }
}

@media (max-width: 430px) {
  .hero { min-height: 47rem; }
  .hero h1 { font-size: clamp(4.75rem, 24vw, 6.5rem); }
  .hero-crest { left: 67%; width: 128vw; }
}

@media (prefers-reduced-motion: reduce) {
  .smoke-canvas { display: none; }
  .hero-reveal { opacity: 1; transform: none; }
  .hero-rule.hero-reveal { transform: none; }
  .hero-crest { animation: none; transform: translate(-47%, -50%); }
}

/* Final hero-crest constraints intentionally last in the cascade. */
.hero .hero-crest {
  left: 50%;
  top: 50%;
  width: min(52vw, 42rem, 70vh);
  height: auto;
  max-width: 80vw;
  max-height: 70vh;
  overflow: visible;
  opacity: .065;
  transform: translate(-50%, -50%);
  animation: none;
}
.hero .hero-crest img {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 70vh;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  mix-blend-mode: normal;
  animation: none;
}
@media (max-width: 800px) {
  .hero .hero-crest { left: 50%; top: 52%; width: min(82vw, 33rem, 62vh); max-width: 82vw; max-height: 62vh; transform: translate(-50%, -50%); }
  .hero .hero-crest img { max-height: 62vh; }
}
@media (prefers-reduced-motion: reduce) {
  .closing-scene .smoke-canvas { display: block; opacity: .84; }
}

.page-smoke {
  position: fixed;
  inset: 0;
  z-index: 3;
  display: block;
  width: 100vw;
  height: 100vh;
  max-width: 100%;
  opacity: 1;
  pointer-events: none;
}
.hero .hero-copy { position: relative; z-index: 8; }
.contact-product { position: relative; z-index: 2; }
.contact-product img { position: relative; z-index: 2; }
.contact-copy, .contact-copy a { position: relative; z-index: 4; }
main, .contact { overflow: visible !important; }
@media (prefers-reduced-motion: reduce) {
  .page-smoke { display: block; opacity: .8; }
}