/* ============================================================
   Chris Ilic — Portrait of a Legend
   Editorial · serif · minimal · museum-at-night
   ============================================================ */
:root{
  --bg:#0b0a09;
  --bg-2:#12100e;
  --ink:#ece6da;
  --dim:#9c9384;
  --dimmer:#6c6456;
  --accent:#b8985c;          /* brass */
  --accent-soft:#c9ad78;
  --line:rgba(236,230,218,.14);
  --line-soft:rgba(236,230,218,.08);
  --card:rgba(18,16,14,.66);
  --glass:rgba(236,230,218,.04);
  --ease:cubic-bezier(.16,1,.3,1);
  --serif:"EB Garamond",Georgia,"Times New Roman",serif;
  --display:"Cormorant Garamond",Georgia,serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}

/* ---------- for people who are not using a mouse ----------
   Every page on this site opens with the same eleven nav links. Without
   this, reaching the actual content by keyboard means tabbing through
   all of them, on every page, every time. */
.skip-link{
  position:fixed;top:0;left:50%;z-index:200;
  transform:translate(-50%,-140%);
  background:var(--ink);color:#140f07;
  padding:.75rem 1.4rem;border-radius:0 0 3px 3px;
  font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;
  text-decoration:none;transition:transform .3s var(--ease)}
.skip-link:focus{transform:translate(-50%,0);outline:2px solid var(--accent)}
/* present to a screen reader, absent to everyone else */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
body{
  font-family:var(--serif);
  background:var(--bg);
  color:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  font-size:1.06rem;
  line-height:1.7;
}
body.lock{overflow:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
em{font-style:italic}
::selection{background:var(--accent);color:#140f07}

.section-kicker{font-family:var(--serif);font-size:.72rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--accent);margin-bottom:1rem;font-weight:500}
.section-title{font-family:var(--display);font-weight:300;
  font-size:clamp(2.4rem,7vw,5rem);letter-spacing:.01em;line-height:1}

/* ---------- Background field ---------- */
#space{position:fixed;inset:0;z-index:-2;background:
  radial-gradient(1200px 820px at 72% -12%, #1b1712 0%, transparent 56%),
  radial-gradient(900px 700px at 8% 18%, #17130e 0%, transparent 52%),
  radial-gradient(1100px 1000px at 50% 120%, #100d0a 0%, transparent 60%),
  var(--bg);}
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* ---------- Custom cursor ---------- */
.cursor,.cursor-dot{position:fixed;top:0;left:0;pointer-events:none;z-index:9999;
  border-radius:50%;transform:translate(-50%,-50%)}
.cursor{width:30px;height:30px;border:1px solid rgba(236,230,218,.5);
  transition:width .3s var(--ease),height .3s var(--ease),background .3s,border-color .3s}
.cursor-dot{width:3px;height:3px;background:var(--accent-soft)}
.cursor.grow{width:60px;height:60px;background:rgba(184,152,92,.08);border-color:var(--accent)}
@media (hover:none){.cursor,.cursor-dot{display:none}}

/* ---------- Loader ---------- */
.loader{position:fixed;inset:0;z-index:1000;background:var(--bg);
  display:grid;place-items:center;transition:opacity 1s ease,visibility 1s}
.loader.done{opacity:0;visibility:hidden}
.loader-inner{text-align:center;width:min(80vw,440px)}
.loader-name{font-family:var(--display);font-weight:300;font-size:clamp(2.6rem,9vw,4.4rem);
  letter-spacing:.04em;opacity:0;animation:fade 1.4s var(--ease) .1s forwards}
@keyframes fade{to{opacity:1}}
.loader-bar{margin:1.8rem auto 1rem;height:1px;width:100%;background:var(--line);overflow:hidden}
.loader-bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s linear}
.loader-pct{font-size:.68rem;letter-spacing:.36em;text-transform:uppercase;color:var(--dimmer)}

/* ---------- Nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.7rem clamp(1.3rem,4vw,3.2rem);transition:padding .5s var(--ease),background .5s,border-color .5s;
  border-bottom:1px solid transparent}
.nav.scrolled{padding-top:1rem;padding-bottom:1rem;
  background:rgba(11,10,9,.72);backdrop-filter:blur(16px);border-bottom:1px solid var(--line-soft)}
.brand{font-family:var(--display);font-weight:500;font-size:1.4rem;letter-spacing:.02em}
.nav-links{display:flex;align-items:center;gap:clamp(1.2rem,3vw,2.6rem)}
.nav-links a{color:var(--dim);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;transition:color .3s;
  white-space:nowrap}
.brand{white-space:nowrap}
.nav-links a:hover{color:var(--ink)}
.nav-cta{padding:.55rem 1.3rem;border:1px solid var(--line);color:var(--ink)!important}
.nav-cta:hover{border-color:var(--accent);background:var(--glass)}
/* Measured widths for the seven-item row: 1212px as set, 945px tightened, and
   879px once the Illic Isle PLAY chip drops (that step lives in
   illic-isle.css). Below that there is no room and the links go. */
@media (max-width:1220px){
  .nav-links{gap:1.1rem}
  .nav-links a:not(.nav-cta){font-size:.68rem;letter-spacing:.1em}
  .nav-cta{padding:.5rem 1rem}
}
@media (max-width:890px){.nav-links a:not(.nav-cta){display:none}}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:center;align-items:center;text-align:center;
  padding:7rem clamp(1.3rem,6vw,6rem) 5rem}
.hero-content{max-width:56rem;position:relative;z-index:2}
.hero-eyebrow{font-size:.74rem;letter-spacing:.36em;text-transform:uppercase;color:var(--accent);margin-bottom:2rem}
.hero-title{font-family:var(--display);font-weight:300;line-height:.94;
  font-size:clamp(4rem,15vw,11rem);letter-spacing:.01em}
.hero-title em{font-style:italic;color:var(--ink)}
.hero-rule{width:0;height:1px;background:var(--accent);margin:2rem auto;max-width:120px;
  transition:width 1.4s var(--ease) .3s}
.hero-rule.in,[data-reveal].in .hero-rule{width:120px}
.hero-sub{max-width:40rem;margin:0 auto 2.6rem;font-size:clamp(1.05rem,2vw,1.3rem);
  color:var(--dim);font-style:italic;line-height:1.75}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.9rem 1.9rem;
  font-family:var(--serif);font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid var(--line);transition:background .4s var(--ease),color .4s,border-color .4s,transform .4s}
.btn-primary{background:var(--ink);color:#140f07;border-color:var(--ink)}
.btn-primary:hover{background:transparent;color:var(--ink);transform:translateY(-2px)}
.btn-ghost{color:var(--ink)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-soft);transform:translateY(-2px)}

.hero-scroll{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.7rem;color:var(--dimmer);
  font-size:.66rem;letter-spacing:.3em;text-transform:uppercase}
.hero-scroll i{width:1px;height:46px;background:linear-gradient(var(--accent),transparent);
  animation:scrolln 2.2s ease infinite}
@keyframes scrolln{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}
  50.1%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- Divider ---------- */
.divider{display:flex;align-items:center;justify-content:center;gap:1.4rem;
  padding:2.4rem 1.2rem;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--dim);text-align:center}
.divider-dot{color:var(--accent);letter-spacing:0}

/* ---------- About ---------- */
.about{padding:clamp(5rem,12vw,10rem) clamp(1.3rem,6vw,4rem)}
.about-inner{max-width:52rem;margin:0 auto;text-align:center}
.about-title{font-family:var(--display);font-weight:300;font-size:clamp(2.6rem,8vw,5.5rem);
  line-height:1;margin:.6rem 0 1.8rem}
.about-title em{font-style:italic;color:var(--accent-soft)}
.about-text{color:var(--dim);font-size:clamp(1.08rem,2vw,1.35rem);max-width:42rem;margin:0 auto;line-height:1.8}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-top:4rem;
  padding-top:3rem;border-top:1px solid var(--line-soft)}
.stat b{font-family:var(--display);font-weight:300;font-size:clamp(2.4rem,5vw,3.8rem);
  color:var(--ink);display:block;line-height:1}
.stat span{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dimmer);margin-top:.5rem;display:block}
@media (max-width:640px){.stats{grid-template-columns:repeat(2,1fr);gap:2.4rem}}

/* ---------- Fast Facts ---------- */
.facts{padding:clamp(4rem,10vw,8rem) clamp(1.3rem,6vw,4rem);border-top:1px solid var(--line-soft)}
.facts-head{max-width:52rem;margin:0 auto 3.5rem;text-align:center}
.facts-lede{margin-top:1.2rem;color:var(--dim);font-style:italic;font-size:clamp(1rem,2vw,1.2rem)}
.facts-grid{list-style:none;max-width:66rem;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  border-top:1px solid var(--line-soft);border-left:1px solid var(--line-soft)}
.fact{position:relative;padding:2.2rem clamp(1.4rem,3vw,2.4rem);
  border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.fact-no{font-family:var(--display);font-size:.9rem;letter-spacing:.1em;color:var(--accent);display:block;margin-bottom:1rem}
.fact-label{font-family:var(--display);font-weight:500;font-size:1.5rem;letter-spacing:.01em;margin-bottom:.7rem}
.fact-text{color:var(--dim);font-size:1.02rem;line-height:1.7}
.fact-text em{color:var(--accent-soft)}
.fact::after{content:"";position:absolute;left:0;top:0;width:0;height:1px;background:var(--accent);transition:width .8s var(--ease)}
.fact.in::after{width:38px}
@media (max-width:640px){.facts-grid{grid-template-columns:1fr}}

/* ---------- Footer ---------- */
.footer{padding:clamp(4rem,7vw,6rem) clamp(1.3rem,5vw,4rem) 3rem;border-top:1px solid var(--line-soft);text-align:center}
.footer-big{font-family:var(--display);font-weight:300;font-size:clamp(3rem,13vw,9rem);
  line-height:.9;letter-spacing:.02em;margin-bottom:2.4rem;color:var(--ink)}
.footer-big em{font-style:italic;color:var(--accent-soft)}
.footer-row{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:center;
  color:var(--dim);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  border-top:1px solid var(--line-soft);padding-top:1.8rem}
.footer-row a:hover{color:var(--accent-soft)}

/* ---------- Footer index ---------- */
.footer-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:.4rem clamp(1.2rem,3vw,2.6rem);
  margin-bottom:2.2rem;padding-bottom:2rem;border-bottom:1px solid var(--line-soft)}
.footer-nav a{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
  transition:color .35s ease}
.footer-nav a:hover{color:var(--accent-soft)}
/* the ticket, printed small the way a real one is */
.footer-ticket{
  margin-top:1.6rem;text-align:center;
  font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;color:var(--dimmer);
  font-variant-numeric:tabular-nums}
.footer-ticket b{color:var(--accent);font-weight:400;letter-spacing:.18em}

/* ---------- Current page / section in the nav ---------- */
.nav-links a.is-current{color:var(--ink);position:relative}
.nav-links a.is-current::after{content:"";position:absolute;left:0;right:0;bottom:-.42rem;
  height:1px;background:var(--accent)}

/* ---------- Scroll progress ---------- */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:120;pointer-events:none}
.scroll-progress i{display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--accent),var(--accent-soft));
  box-shadow:0 0 12px rgba(184,152,92,.45)}

/* ---------- Reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
[data-reveal].in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto}
  [data-reveal]{opacity:1!important;transform:none!important}
}