@charset "utf-8";

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
:root {
  --linen: #f5efe4; --night: #0f0905; --smoke: #1a0f08;
  --spice: #d4732a; --gold: #b8922a; --gold-warm: #c9a84c; --gold-light: #d4aa5a;
}
html { scroll-behavior:smooth; }
body { background:var(--night); color:var(--linen); font-family:'EB Garamond',serif; overflow-x:hidden; cursor:none; }
@media (hover:none),(max-width:900px){
  body { cursor:auto; }
  .cur,.cur-r { display:none !important; }
}

.cur   { width:7px; height:7px; background:var(--gold-light); border-radius:50%; position:fixed; pointer-events:none; z-index:9999; transform:translate(-50%,-50%); transition:width .3s,height .3s; }
.cur-r { width:30px; height:30px; border:1px solid rgba(201,168,76,.3); border-radius:50%; position:fixed; pointer-events:none; z-index:9998; transform:translate(-50%,-50%); transition:width .35s,height .35s; }

nav { position:fixed; top:0; left:0; right:0; z-index:200; padding:1.8rem 5rem; display:flex; align-items:center; justify-content:space-between; }
nav::after { content:''; position:absolute; inset:0; background:linear-gradient(to bottom,rgba(15,9,5,.65) 0%,transparent 100%); z-index:-1; }
.nav-back { font-family:'Didact Gothic',sans-serif; font-size:0.58rem; letter-spacing:0.28em; text-transform:uppercase; color:rgba(212,170,90,.55); text-decoration:none; display:flex; align-items:center; gap:.8rem; transition:color .3s; }
.nav-back::before { content:'←'; transition:transform .3s; }
.nav-back:hover { color:var(--gold-light); }
.nav-back:hover::before { transform:translateX(-4px); }
.nav-inquire { font-family:'Didact Gothic',sans-serif; font-size:0.58rem; letter-spacing:0.22em; text-transform:uppercase; color:rgba(212,170,90,.55); text-decoration:none; border:1px solid rgba(201,168,76,.25); padding:.3rem .9rem; transition:color .3s,border-color .3s; }
.nav-inquire:hover { color:var(--gold-light); border-color:rgba(201,168,76,.5); }

.hero { min-height:100vh; min-height:100svh; position:relative; overflow:hidden; }
.hero-img { position:absolute; inset:0; background-image:url(olf.jpg); background-size:cover; background-position:center center; background-repeat:no-repeat; }
.hero-vignette { position:absolute; inset:0; background: radial-gradient(ellipse at 50% 48%, transparent 30%, rgba(15,9,5,.5) 100%), linear-gradient(to bottom, rgba(15,9,5,.3) 0%, transparent 20%, transparent 70%, rgba(15,9,5,.75) 100%); }

.notes-section { background:var(--smoke); padding:clamp(3.5rem,10vw,7rem) clamp(1.25rem,5vw,5rem); position:relative; }
.notes-section::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(to right,transparent,rgba(201,168,76,.22),transparent); }
.notes-inner { max-width:860px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:clamp(2.5rem,8vw,5rem); width:100%; }

.film-block {
  width:100%;
  max-width:min(80ch,94vw);
  margin:clamp(-2.5rem,-6vw,-6rem) auto 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.film-sentence { font-family:'Libre Baskerville',serif; font-size:clamp(1.05rem,2.8vw,1.6rem); font-style:italic; font-weight:400; line-height:1.85; text-align:center; color:rgba(245,239,228,.7); max-width:100%; margin:0; }
.film-byline { margin-top:clamp(1.5rem,4vw,2.5rem); width:100%; }
.film-role {
  font-family:'Didact Gothic',sans-serif;
  font-size:clamp(0.62rem,1.8vw,0.85rem);
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:#e8a832;
  margin:0 0 0.5rem;
  font-style:normal;
}
.film-director {
  font-family:'Libre Baskerville',serif;
  font-size:clamp(1.35rem,4vw,1.8rem);
  font-style:normal;
  font-weight:400;
  color:rgba(245,239,228,.88);
  margin:0 0 1rem;
  line-height:1.2;
}
.film-rule {
  border:none;
  border-top:1px solid rgba(232,168,50,.4);
  width:min(30%,12rem);
  margin:clamp(0.25rem,2vw,0.5rem) auto clamp(1.25rem,3vw,1.75rem);
}
.film-join {
  font-size:clamp(1rem,2.6vw,1.5rem);
  line-height:1.65;
  font-style:normal;
  color:rgba(245,239,228,.72);
  margin:0 auto clamp(1.25rem,3vw,1.5rem);
  max-width:100%;
}
.film-cta-link {
  font-family:'Didact Gothic',sans-serif;
  color:#e8a832;
  letter-spacing:clamp(0.12em,0.6vw,0.28em);
  text-transform:uppercase;
  font-size:clamp(0.72rem,2.2vw,1.05rem);
  display:inline-block;
  text-align:center;
  text-decoration:none;
  padding:0.75rem 1rem;
  margin-bottom:clamp(1.5rem,4vw,3rem);
  transition:color .3s,transform .25s;
  max-width:100%;
  word-break:break-word;
}
.film-cta-link:hover { color:var(--gold-light); transform:translateY(-2px); }

.ingredients { width:100%; display:flex; flex-direction:column; align-items:center; gap:2rem; transition-delay:.12s; }
.ing-label { font-family:'Didact Gothic',sans-serif; font-size:clamp(1rem,3vw,1.5rem); letter-spacing:clamp(0.2em,1.2vw,.42em); text-transform:uppercase; color:rgba(201,168,76,.38); text-align:center; }
.ing-row {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:1px;
  width:100%;
  background:rgba(201,168,76,.12);
  border:1px solid rgba(201,168,76,.09);
}
.ing-item {
  min-width:0;
  padding:clamp(1.25rem,3vw,2.2rem) clamp(0.5rem,2vw,1rem);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.9rem;
  transition:background .5s;
  background:var(--smoke);
}
.ing-item:hover { background:rgba(201,168,76,.04); }
.ing-svg { width:36px; height:44px; opacity:.55; transition:opacity .5s,transform .6s; }
.ing-item:hover .ing-svg { opacity:.9; transform:translateY(-4px); }
.ing-svg path,.ing-svg line,.ing-svg circle,.ing-svg ellipse,.ing-svg polyline { stroke:var(--gold-light); fill:none; stroke-linecap:round; stroke-linejoin:round; }
.ing-svg .fill-accent { fill:rgba(201,168,76,.18); stroke:none; }
.ing-name { font-family:'Libre Baskerville',serif; font-size:.92rem; font-style:italic; color:rgba(245,239,228,.58); transition:color .4s; }
.ing-item:hover .ing-name { color:rgba(245,239,228,.9); }
.ing-note { font-family:'Didact Gothic',sans-serif; font-size:.42rem; letter-spacing:.24em; text-transform:uppercase; color:rgba(201,168,76,.32); }

.details-section { padding:6rem 5rem 7rem; background:var(--night); position:relative; }
.details-section::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(to right,transparent,rgba(201,168,76,.14),transparent); }
.details-inner { max-width:680px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:3rem; text-align:center; }
.details-title { font-family:'Libre Baskerville',serif; font-size:clamp(2.8rem,5vw,4.2rem); font-weight:400; line-height:1; color:var(--gold-light); letter-spacing:.15em; font-variant:small-caps; }
.details-rule { width:5rem; height:1px; background:rgba(201,168,76,.22); }
.details-credits { display:flex; flex-direction:column; align-items:center; gap:1.8rem; }
.credit-row { display:flex; flex-direction:column; align-items:center; gap:.45rem; }
.credit-role { font-family:'Didact Gothic',sans-serif; font-size:0.62rem; letter-spacing:.28em; text-transform:uppercase; color:rgba(201,168,76,.42); }
.credit-name { font-family:'Libre Baskerville',serif; font-style:italic; font-size:1.5rem; color:var(--linen); line-height:1; }
.details-rule-thin { width:3rem; height:1px; background:rgba(201,168,76,.15); }
.details-status { font-family:'Didact Gothic',sans-serif; font-size:0.62rem; letter-spacing:.24em; text-transform:uppercase; color:rgba(201,168,76,.38); line-height:2.4; text-align:center; }

.contact-section { padding:7rem 5rem 8rem; background:var(--smoke); text-align:center; position:relative; }
.contact-section::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(to right,transparent,rgba(201,168,76,.15),transparent); }
.contact-inner { max-width:460px; margin:0 auto; }
.contact-phrase { font-family:'Libre Baskerville',serif; font-size:clamp(1.8rem,3.5vw,2.8rem); font-weight:400; font-style:italic; color:var(--linen); line-height:1.25; margin-bottom:1.5rem; }
.contact-sub { font-family:'EB Garamond',serif; font-style:italic; font-size:1.05rem; line-height:1.85; color:rgba(245,239,228,.38); margin-bottom:3rem; }
.contact-btn { display:inline-block; font-family:'Didact Gothic',sans-serif; font-size:0.62rem; letter-spacing:.3em; text-transform:uppercase; color:var(--night); background:var(--gold-warm); padding:1rem 3rem; text-decoration:none; transition:background .3s,transform .25s; }
.contact-btn:hover { background:var(--spice); transform:translateY(-2px); }

footer { background:var(--night); padding:clamp(1.5rem,4vw,2rem) clamp(1.25rem,4vw,5rem); display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.04); }
.f-l { font-family:'EB Garamond',serif; font-size:clamp(0.78rem,2vw,.85rem); font-style:italic; color:rgba(245,239,228,.2); line-height:1.4; }
.f-r { font-family:'Didact Gothic',sans-serif; font-size:clamp(0.42rem,1.5vw,.46rem); letter-spacing:.15em; color:rgba(245,239,228,.15); line-height:1.6; max-width:100%; text-align:right; }

@keyframes sUp { from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none} }
.reveal { opacity:0; transform:translateY(28px); transition:opacity 1s ease,transform 1s ease; }
.reveal.in { opacity:1; transform:none; }

@media(max-width:1024px){
  nav { padding:1.25rem clamp(1.25rem,4vw,3rem); }
  .nav-back { font-size:0.54rem; letter-spacing:0.22em; }
  .ing-row { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media(max-width:768px){
  nav { padding:1.25rem clamp(1rem,4vw,2rem); }
  .notes-section,.details-section,.contact-section { padding:clamp(3rem,8vw,5rem) clamp(1rem,4vw,2rem); }
  .film-block { margin-top:clamp(-1.5rem,-3vw,-2.5rem); }
  .ing-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ing-item:last-child:nth-child(odd){ grid-column:1/-1; }
  footer { flex-direction:column; align-items:center; text-align:center; }
  .f-r { text-align:center; }
}

@media(max-width:480px){
  .ing-row { grid-template-columns:1fr; }
  .ing-item:last-child:nth-child(odd){ grid-column:auto; }
}