:root{
  --bg:#0a0908;
  --ink:#f4efe9;
  --ink-dim:#b3a89c;
  --ember:#ff6a2b;
  --flame:#ffc233;      /* byline yellow */
  --maxw:920px;
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{height:100%}
body{
  background:#140d08;
  color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
}
/* persistent burning-tree background — real fixed element (reliable on mobile) */
.bg{
  position:fixed;inset:0;z-index:-2;
  background:#140d08 url('assets/burning-tree.jpg?v=2') center / cover no-repeat;
}
/* dark veil — light on the gate, heavier once the site is revealed */
.bg-veil{
  position:fixed;inset:0;z-index:-1;
  background-color:rgba(10,9,8,.28);
  transition:background-color .9s ease;
  pointer-events:none;
}
body.revealed .bg-veil{background-color:rgba(8,7,6,.82)}
img{max-width:100%;display:block}
a{color:inherit}

/* ---------- screens ---------- */
.screen{
  position:fixed;inset:0;
  display:none;
  align-items:center;justify-content:center;
}
.screen.is-active{display:flex}

/* ---------- gate ---------- */
.gate-scrim{
  position:absolute;inset:0;
  background:radial-gradient(60% 60% at 50% 42%, rgba(0,0,0,.10), rgba(0,0,0,.68) 100%);
}
.gate-inner{
  position:relative;
  text-align:center;
  padding:2rem;
  width:100%;
  max-width:720px;
}
.byline{
  font-family:"Archivo Black","Inter",system-ui,sans-serif;
  font-weight:400;            /* Archivo Black is already ultra-bold */
  text-transform:uppercase;
  font-size:clamp(1.6rem,5.4vw,3.05rem);
  line-height:1.06;
  letter-spacing:.03em;
  text-wrap:balance;
  color:var(--flame);
  text-shadow:0 2px 20px rgba(0,0,0,.45);
}
/* small header version — keep it understated */
.byline--sm{
  font-size:.95rem;
  letter-spacing:.09em;
  color:var(--ink-dim);
  text-shadow:none;
}

/* the gate question — big, like the old byline */
.gate-q{display:block;margin-bottom:1.6rem;cursor:text}
.prompt{
  display:block;
  margin:2.4rem 0 .9rem;
  font-size:.95rem;
  letter-spacing:.12em;
  text-transform:lowercase;
  color:var(--ink);
  text-shadow:0 1px 16px rgba(0,0,0,.75);
}
#gate-form{position:relative;display:inline-flex;flex-direction:column;align-items:center;width:100%}
#pw{
  width:min(320px,80vw);
  background:transparent;
  border:0;border-bottom:1px solid rgba(244,239,233,.35);
  color:var(--ink);
  font-size:1.3rem;
  text-align:center;
  padding:.5rem .5rem .6rem;
  outline:none;
  transition:border-color .25s;
}
#pw:focus{border-color:var(--ember)}
.enter-btn{
  margin-top:1.4rem;
  width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(244,239,233,.4);
  background:transparent;color:var(--ink);
  font-size:1.1rem;cursor:pointer;
  transition:background .2s,border-color .2s,transform .2s;
}
.enter-btn:hover{background:var(--ember);border-color:var(--ember)}
.gate-error{
  margin-top:1rem;color:var(--ember);
  font-size:.85rem;letter-spacing:.08em;
}
.shake{animation:shake .4s}
@keyframes shake{
  10%,90%{transform:translateX(-2px)}
  30%,70%{transform:translateX(4px)}
  50%{transform:translateX(-6px)}
}

/* ---------- teaser ---------- */
#teaser{background:#000}
#teaser-video{width:100%;height:100%;object-fit:contain;background:#000}
#stream-mount{width:100%;height:100%}
#stream-mount iframe{width:100%;height:100%;border:0;display:block}
.skip-btn{
  position:absolute;top:max(1rem,env(safe-area-inset-top));right:1rem;
  background:rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.25);
  color:#fff;padding:.5rem .9rem;border-radius:999px;
  font-size:.8rem;letter-spacing:.1em;cursor:pointer;
  backdrop-filter:blur(4px);
}
.skip-btn:hover{background:rgba(0,0,0,.7)}
.big-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:.6rem;
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.3);
  color:#fff;padding:1rem 1.6rem;border-radius:999px;
  font-size:1rem;letter-spacing:.08em;cursor:pointer;
}
.big-play span{color:var(--ember)}

/* ---------- site ---------- */
#site[hidden]{display:none!important}
#site{display:block}
html{scroll-behavior:smooth}
.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 clamp(1.25rem,4vw,3rem) clamp(1.25rem,4vw,3rem);
}
.text-btn,.big-link{
  background:none;border:0;color:var(--ink-dim);
  font:inherit;cursor:pointer;text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .2s,border-color .2s;
}
.text-btn:hover{color:var(--ember);border-color:var(--ember)}

.block{padding:clamp(3rem,9vw,6rem) 0;border-bottom:1px solid rgba(244,239,233,.12)}
.block h1{
  font-family:"EB Garamond",Georgia,serif;
  font-weight:500;
  font-size:clamp(1.8rem,5vw,2.8rem);
  line-height:1.15;
  margin-bottom:1.4rem;
}

/* want to see what it is? */
.cta{
  display:inline-block;margin-bottom:2.2rem;
  padding:.85rem 1.5rem;border-radius:999px;
  background:var(--ember);color:#1a0c05;text-decoration:none;
  font-weight:500;letter-spacing:.04em;
  transition:background .2s,transform .2s;
}
.cta:hover{background:var(--flame);transform:translateY(-1px)}

/* label / value lists: contact details, tree location */
.facts{
  display:grid;grid-template-columns:auto 1fr;gap:.35rem 1.6rem;
  margin:0 0 1.8rem;font-size:1.05rem;font-variant-numeric:tabular-nums;
}
.facts dt{color:var(--ink-dim)}
.facts dd{margin:0}
.facts a{text-decoration:none;border-bottom:1px solid rgba(244,239,233,.35)}
.facts a:hover{color:var(--ember);border-color:var(--ember)}

.socials{display:flex;gap:1.1rem;margin-top:-.4rem}
.block--socials{padding:clamp(1.8rem,5vw,2.6rem) 0}
.block--socials .socials{margin:0;justify-content:center}
.socials a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(244,239,233,.22);color:var(--ink);transition:color .2s,border-color .2s,background .2s}
.socials a:hover{color:var(--ember);border-color:var(--ember);background:rgba(255,106,43,.08)}
.socials svg{width:17px;height:17px;fill:currentColor}

/* watch again */
.links{display:flex;flex-direction:column;align-items:flex-start;gap:1.2rem}

.big-link{
  display:inline-block;font-family:"EB Garamond",serif;font-size:1.4rem;
  border-bottom:1px solid var(--ink-dim);padding-bottom:2px;
}
.big-link:hover{color:var(--ember);border-color:var(--ember)}

.site-foot{
  padding:3rem 0 1rem;text-align:center;color:var(--ink-dim);
  font-family:"EB Garamond",serif;font-style:italic;
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}


/* device version gate: "do you know what I made from this tree?" yes / no */
.gate-yn { display: flex; gap: 14px; justify-content: center; margin-top: 2rem; }
.gate-btn {
  min-width: 112px; padding: .85rem 1.6rem; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 1rem; letter-spacing: .06em; color: var(--ink);
  border: 1px solid rgba(244,239,233,.4); background: rgba(0,0,0,.3);
  transition: background .2s, border-color .2s, color .2s;
}
.gate-btn:hover { background: var(--ember); border-color: var(--ember); color: #1a0c05; }
.gate-btn--go { margin-top: 1rem; }
.gate-q--sm { font-size: clamp(1.2rem, 4.5vw, 1.9rem); margin-bottom: 1.4rem; }
.gate-guess { text-align: left; max-width: 520px; margin: 0 auto; }
.gate-guess .gate-q { text-align: center; }
.gate-skip { display: block; margin: 1.6rem auto 0; background: none; border: 0; color: var(--ink-dim); font: inherit; font-size: .85rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.gate-skip:hover { color: var(--ink); }
.gate-guess .f-thanks { text-align: center; }
/* the guess form is taller than the screen: let the gate scroll */
#gate.gate--scroll { align-items: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; }
#gate.gate--scroll .gate-inner { padding-top: 3rem; padding-bottom: 3rem; }
#gate.gate--scroll .gate-scrim { position: fixed; }

/* opening screen: "136 people have seen what it is." / "do you want to see?" */
.gate-n { color: var(--ember); }
.gate-want {
  display: block; margin-top: .9rem; font-family: "EB Garamond", Georgia, serif; font-style: italic; font-weight: 400;
  text-transform: none; letter-spacing: 0; font-size: clamp(1.3rem, 4.6vw, 1.9rem); color: var(--ink);
}

.gate-ask .gate-btn { background: var(--ember); border-color: var(--ember); color: #1a0c05; font-weight: 500; }
.gate-ask .gate-btn:hover { background: var(--flame); border-color: var(--flame); }
#guess .cta { margin-bottom: 0; }

/* ---------- show version (?show) ---------- */
.gate-show { display: flex; flex-direction: column; align-items: center; gap: 2rem; }
.gate-show .gate-q { max-width: 18ch; margin: 0 auto; }
.gate-show .gate-q--note { max-width: 22ch; }
.gate-q--note .gate-want { max-width: 26ch; margin: 1.1rem auto 0; }
.gate-roll { font-variant-numeric: tabular-nums; }                /* digits don't jiggle while rolling */
.gate-watch { background: var(--ember); border-color: var(--ember); color: #1a0c05; font-weight: 500; }
.gate-watch:hover { background: var(--flame); border-color: var(--flame); }
.gate-play {
  width: 84px; height: 84px; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  background: var(--ember); color: #1a0c05; border: 0; font-size: 1.6rem; padding-left: 6px;
  box-shadow: 0 0 0 10px rgba(255,106,43,.18), 0 10px 40px rgba(0,0,0,.5);
  transition: transform .2s, background .2s;
}
.gate-play:hover { transform: scale(1.06); background: var(--flame); }
.g-show {
  position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 18px;
  background: rgba(8,6,4,.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  animation: g-show-in .5s ease both;
}
.g-show[hidden] { display: none; }
@keyframes g-show-in { from { opacity: 0; } to { opacity: 1; } }
.g-show-card {
  width: min(420px, 100%); text-align: center; padding: 34px 26px 26px; border-radius: 16px;
  background: rgba(20,13,9,.96); border: 1px solid rgba(244,239,233,.12); box-shadow: 0 20px 60px rgba(0,0,0,.55);
}
.g-show-q { font-family: "EB Garamond", Georgia, serif; font-weight: 500; font-size: clamp(1.7rem, 6vw, 2.2rem); line-height: 1.1; margin-bottom: 1.4rem; }
.g-show-card .cta { margin-bottom: 1rem; }
.g-show-skip { display: block; margin: 0 auto; background: none; border: 0; color: var(--ink-dim); font: inherit; font-size: .85rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.g-show-skip:hover { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .g-show { animation: none; } }

/* minimal footer (full site): button, email for anything else, then the socials */
.foot-min{text-align:center;border-bottom:0;padding-bottom:1rem}
.foot-min .cta{margin-bottom:1.4rem}
.foot-mail{margin:0;font-size:.85rem;letter-spacing:.04em;color:var(--ink-dim)}
.foot-mail a{color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(244,239,233,.35)}
.foot-mail a:hover{color:var(--ember);border-color:var(--ember)}
body:not(.v-minimal) .block--socials{padding-top:1.2rem}

/* password screen: socials pinned to the bottom (hidden when the phone keyboard squeezes the screen) */
.gate-socials{position:absolute;left:0;right:0;bottom:max(22px,env(safe-area-inset-bottom));margin:0;justify-content:center;z-index:2}
@media (max-height:520px){.gate-socials{display:none}}

/* second screen: project line, then the rolling participant count */
.gate-show .gate-q--intro{max-width:20ch;font-size:clamp(1.35rem,4.6vw,2.6rem)}
.gate-count{margin:-.6rem 0 0;font-size:1.05rem;letter-spacing:.06em;color:var(--ink)}
.gate-count .gate-n{font-family:"Archivo Black",sans-serif;font-size:1.35em;font-variant-numeric:tabular-nums}

/* ⓘ about card over the globe — lighter backdrop so the globe shows through */
.g-intro{background:rgba(8,6,4,.38);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.g-intro-card{width:min(440px,100%);background:rgba(20,13,9,.9)}
.g-intro-card p{margin:0 0 .85rem;font-family:"EB Garamond",Georgia,serif;font-size:clamp(1.15rem,4.2vw,1.4rem);line-height:1.35;color:var(--ink);text-wrap:balance}
.g-intro-card .about-dims{font-family:"Inter",system-ui,sans-serif;font-size:clamp(.74rem,3.3vw,.85rem);letter-spacing:.03em;white-space:nowrap;color:var(--ember)}
.g-intro-card .about-dims span{color:var(--ink-dim)}
.g-intro-card{position:relative}
.g-intro-x{position:absolute;top:8px;right:10px;width:36px;height:36px;border:0;background:none;color:var(--ink-dim);font-size:1.6rem;line-height:1;cursor:pointer}
.g-intro-x:hover{color:var(--ink)}
/* the ⓘ button in the globe's top bar */
.g-info{width:26px;height:26px;flex:none;border-radius:50%;border:1px solid rgba(244,239,233,.45);background:none;color:var(--ink);
  font-family:"EB Garamond",Georgia,serif;font-style:italic;font-size:15px;line-height:1;cursor:pointer;display:inline-grid;place-items:center;padding:0;transition:border-color .2s,color .2s}
.g-info:hover{border-color:var(--ember);color:var(--ember)}
.g-info-dot{width:5px;height:5px;border-radius:50%;background:currentColor}
.g-intro-card a{color:var(--ember);text-decoration:none;border-bottom:1px solid rgba(255,106,43,.5)}
.g-intro-card a:hover{color:var(--flame);border-color:var(--flame)}
/* ⊙ card: email sign-up under the dimensions */
.g-signup{margin:.6rem 0 0;gap:.5rem}
.g-signup input[type=email]{text-align:left}
.g-signup .f-status{min-height:0;margin:0;font-family:"Inter",system-ui,sans-serif}
.g-signup .f-thanks{font-size:1.15rem;margin:0}
.g-intro-card .g-signup-note{margin:1.1rem 0 0;font-family:"Inter",system-ui,sans-serif;font-size:.8rem;letter-spacing:.03em;color:var(--ink-dim)}

.g-intro-card:has(.g-signup.done) .g-signup-note{display:none}