// EVRYWHR — Atlas Negroni book page.
// Rendered in place of the generic ProjectDetail for id === "atlas".
// Loaded after projects.jsx, before app.jsx.

// ---------------------------------------------------------------------------
// EDIT ME — paste the Amazon pre-order URL here and the button goes live.
const ATLAS_AMAZON_URL = "";                       // e.g. "https://www.amazon.com/dp/XXXXXXXXXX"
const ATLAS_RELEASE = new Date(2026, 8, 17, 0, 0, 0); // 17 September 2026, local time
const ATLAS_IG = "https://www.instagram.com/atlasnegroni/";
const ATLAS_COVER = "assets/cover-atlas.jpg?v=1";

// Sample spreads. Add more entries and the viewer grows tabs for them automatically.
const ATLAS_SPREADS = [
  {
    src: "assets/spread-atlas-colimense.jpg?v=1",
    tab: "Guadalajara",
    chapter: "Chapter Five · Airport Bars & Happy Accidents",
    title: "Negroni Colimense — Guadalajara, Mexico.",
    caption: "Coconut-fat-washed banana distillate, Mexican vermut, Campari and a banana chip. " +
      "Every entry pairs a full-page photograph with the recipe, the place, and a bartender’s note."
  }
];
// ---------------------------------------------------------------------------

// Page-local styles (injected once). Keeps everything Atlas-specific in this file.
(function atlasStyles() {
  if (document.getElementById("atlas-css")) return;
  const s = document.createElement("style");
  s.id = "atlas-css";
  s.textContent =
    ".atlas-spread{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:3px}" +
    ".atlas-spread img{display:block;width:100%;min-width:760px;height:auto}" +
    ".atlas-hint{display:none}" +
    "@media(max-width:820px){.atlas-hint{display:inline}}";
  document.head.appendChild(s);
})();

function atlasParts(ms) {
  const s = Math.max(0, Math.floor(ms / 1000));
  return {
    days: Math.floor(s / 86400),
    hours: Math.floor((s % 86400) / 3600),
    minutes: Math.floor((s % 3600) / 60),
    seconds: s % 60
  };
}

function AtlasCountdown({ theme, compact }) {
  const [now, setNow] = useState(Date.now());
  useEffect(() => {
    const t = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(t);
  }, []);

  const diff = ATLAS_RELEASE.getTime() - now;
  const out = diff <= 0;
  const p = atlasParts(diff);
  const cells = [["Days", p.days], ["Hours", p.hours], ["Min", p.minutes], ["Sec", p.seconds]];

  if (out) {
    return (
      <div style={{ display: "inline-flex", alignItems: "center", gap: 12, padding: "12px 18px",
        border: `1px solid ${theme.accent}`, borderRadius: 3, background: theme.accentFill }}>
        <span style={{ fontFamily: theme.fontMono, fontSize: 11, letterSpacing: "0.16em",
          textTransform: "uppercase", color: theme.ink }}>Out now — 17 September 2026</span>
      </div>
    );
  }

  return (
    <div>
      <div style={{ fontFamily: theme.fontMono, fontSize: 10, letterSpacing: "0.18em",
        textTransform: "uppercase", color: theme.muted, marginBottom: 10 }}>
        Last call before release · 17 September 2026
      </div>
      <div style={{ display: "flex", gap: compact ? 8 : 10, flexWrap: "wrap" }}>
        {cells.map(([label, val]) => (
          <div key={label} style={{ minWidth: compact ? 62 : 76, padding: compact ? "10px 12px" : "14px 16px",
            background: theme.surface, border: `1px solid ${theme.line}`, borderRadius: 3, textAlign: "center" }}>
            <div style={{ fontFamily: theme.fontDisplay, fontWeight: 400, lineHeight: 1,
              fontSize: compact ? 28 : "clamp(30px,3.4vw,44px)", letterSpacing: "-0.02em", color: theme.ink,
              fontVariantNumeric: "tabular-nums" }}>
              {String(val).padStart(2, "0")}
            </div>
            <div style={{ fontFamily: theme.fontMono, fontSize: 9.5, letterSpacing: "0.16em",
              textTransform: "uppercase", color: theme.muted, marginTop: 8 }}>{label}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function AtlasPreorder({ theme, solid }) {
  const live = !!ATLAS_AMAZON_URL;
  const base = {
    fontFamily: theme.fontMono, fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase",
    textDecoration: "none", padding: "13px 22px", borderRadius: 999, display: "inline-block",
    transition: "transform .2s ease, filter .2s ease",
    background: solid ? theme.accent : "transparent",
    color: solid ? (theme.dark ? "#15130f" : "#faf7f0") : theme.ink,
    border: solid ? "none" : `1px solid ${theme.line}`,
    cursor: live ? "pointer" : "not-allowed",
    opacity: live ? 1 : 0.55
  };
  if (live) {
    return <a className="ev-btn" href={ATLAS_AMAZON_URL} target="_blank" rel="noopener noreferrer"
      style={base}>Pre-order on Amazon →</a>;
  }
  return (
    <span style={{ display: "inline-flex", flexDirection: "column", gap: 7 }}>
      <span style={base} aria-disabled="true">Pre-order on Amazon</span>
      <span style={{ fontFamily: theme.fontMono, fontSize: 9.5, letterSpacing: "0.14em",
        textTransform: "uppercase", color: theme.muted, paddingLeft: 4 }}>Link opens soon</span>
    </span>
  );
}

function AtlasQuote({ theme, quote, cite, big }) {
  return (
    <figure style={{ margin: 0, borderLeft: `2px solid ${theme.accent}`, paddingLeft: "clamp(18px,2.4vw,30px)" }}>
      <blockquote style={{ margin: 0, fontFamily: theme.fontDisplay, fontWeight: 400, fontStyle: "italic",
        fontSize: big ? "clamp(28px,4.4vw,56px)" : "clamp(21px,2.4vw,30px)", lineHeight: 1.12,
        letterSpacing: "-0.015em", color: theme.ink, textWrap: "balance" }}>
        {quote}
      </blockquote>
      {cite && (
        <figcaption style={{ fontFamily: theme.fontMono, fontSize: 10.5, letterSpacing: "0.16em",
          textTransform: "uppercase", color: theme.muted, marginTop: 16 }}>{cite}</figcaption>
      )}
    </figure>
  );
}

function AtlasMini({ p, theme, onOpen }) {
  const [h, setH] = useState(false);
  const cover = ((window.EVRYWHR.PROJECT_DETAIL || {})[p.id] || {}).cover;
  return (
    <button onClick={() => onOpen(p.id)} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ textAlign: "left", background: "transparent", border: "none", cursor: "pointer", padding: 0,
        color: theme.ink, transform: h ? "translateY(-3px)" : "none",
        transition: "transform .3s cubic-bezier(.16,1,.3,1)" }}>
      <div style={{ aspectRatio: "4 / 3", borderRadius: 3, border: `1px solid ${theme.line}`,
        background: theme.surface2, overflow: "hidden", display: "flex", alignItems: "center",
        justifyContent: "center" }}>
        {cover
          ? <img src={cover} alt={p.name}
              style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
          : <span style={{ fontFamily: theme.fontMono, fontSize: 10, letterSpacing: "0.14em",
              textTransform: "uppercase", color: theme.muted }}>{p.kind.split("·")[0].trim()}</span>}
      </div>
      <h4 style={{ fontFamily: theme.fontDisplay, fontWeight: 400, fontSize: "clamp(18px,1.6vw,22px)",
        lineHeight: 1.08, margin: "10px 0 0", letterSpacing: "-0.01em" }}>{p.name}</h4>
      <span style={{ display: "block", fontFamily: theme.fontMono, fontSize: 10, letterSpacing: "0.1em",
        textTransform: "uppercase", color: theme.muted, marginTop: 5 }}>{p.coord}</span>
    </button>
  );
}

function AtlasNegroniPage({ id, theme, onBack, onOpen }) {
  const p = window.EVRYWHR.PROJECTS.find((x) => x.id === "atlas") || {};
  const d = (window.EVRYWHR.PROJECT_DETAIL || {})["atlas"] || {};
  const [waitlist, setWaitlist] = useState(false);
  const [spread, setSpread] = useState(0);
  const sheet = ATLAS_SPREADS[spread] || ATLAS_SPREADS[0];
  const all = window.EVRYWHR.PROJECTS;
  const channel = all.find((x) => x.seriesRole === "channel");
  const related = [channel, ...all.filter((x) => !x.series && x.id !== "atlas")]
    .filter(Boolean).slice(0, 3);
  const Modal = window.WaitlistModal;          // defined in projects.jsx
  const canWaitlist = !!(Modal && d.waitlist);

  const meta = [
    ["Release", "17 September 2026"],
    ["Work", d.role || "Book · Photography"],
    ["Scope", "5 continents · 20+ countries · 10 chapters"]
  ];

  const rule = { border: "none", borderTop: `1px solid ${theme.line}`, margin: 0 };
  const section = { padding: "clamp(46px,6vw,86px) 0 0" };

  return (
    <div style={{ padding: "clamp(24px,4vw,46px) var(--pad) 60px" }}>
      {waitlist && canWaitlist && <Modal theme={theme} cfg={d.waitlist} onClose={() => setWaitlist(false)} />}

      <BackLink theme={theme} onClick={onBack} label="All projects" />

      {/* ---------------------------------------------------------------- hero */}
      <div className="proj-top" style={{ display: "grid", gridTemplateColumns: "minmax(0,0.95fr) minmax(0,1.05fr)",
        gap: "clamp(28px,5vw,72px)", alignItems: "center", marginTop: "clamp(26px,4vw,52px)" }}>
        <div>
          <Eyebrow theme={theme}>Book · Releasing 17 September</Eyebrow>
          <h1 style={{ fontFamily: theme.fontDisplay, fontWeight: 400, fontSize: "clamp(46px,7.4vw,104px)",
            lineHeight: 0.88, margin: "14px 0 0", letterSpacing: "-0.025em" }}>
            Atlas<br /><em style={{ fontStyle: "italic" }}>Negroni</em>
          </h1>
          <p style={{ fontFamily: theme.fontDisplay, fontStyle: "italic", fontWeight: 400,
            fontSize: "clamp(18px,2vw,26px)", lineHeight: 1.25, color: theme.muted, margin: "18px 0 0" }}>
            In Search of the World’s Best Cocktail
          </p>
          <p style={{ fontFamily: theme.fontBody, fontSize: "clamp(16px,1.35vw,18.5px)", lineHeight: 1.6,
            color: theme.ink, margin: "22px 0 0", maxWidth: 520, textWrap: "pretty" }}>
            Take a trip around the globe with the world’s best cocktail — a celebration of the unique
            flavors and customs that form the identity of a place, and the drinks that bring us together.
          </p>

          <div style={{ marginTop: "clamp(26px,3.2vw,38px)" }}>
            <AtlasCountdown theme={theme} />
          </div>

          <div style={{ display: "flex", flexWrap: "wrap", gap: 14, alignItems: "flex-start",
            marginTop: "clamp(24px,3vw,34px)" }}>
            <AtlasPreorder theme={theme} solid />
            {canWaitlist && (
              <button className="ev-btn" onClick={() => setWaitlist(true)}
                style={{ fontFamily: theme.fontMono, fontSize: 12, letterSpacing: "0.12em",
                  textTransform: "uppercase", padding: "13px 22px", borderRadius: 999, cursor: "pointer",
                  background: "transparent", color: theme.ink, border: `1px solid ${theme.line}` }}>
                Join the waitlist
              </button>
            )}
          </div>
        </div>

        <div className="proj-top-media" style={{ position: "relative" }}>
          <img src={ATLAS_COVER} alt="Atlas Negroni — a negroni on a salt flat"
            style={{ width: "100%", height: "auto", display: "block", borderRadius: 3,
              border: `1px solid ${theme.line}` }} />
          <a href={ATLAS_IG} target="_blank" rel="noopener noreferrer"
            style={{ position: "absolute", left: 14, bottom: 14, textDecoration: "none",
              fontFamily: theme.fontMono, fontSize: 10.5, letterSpacing: "0.14em", textTransform: "uppercase",
              padding: "8px 14px", borderRadius: 999, background: "rgba(12,14,16,0.55)", color: "#fff",
              backdropFilter: "blur(6px)" }}>
            @atlasnegroni
          </a>
        </div>
      </div>

      {/* --------------------------------------------------------------- meta */}
      <div className="meta-row" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 20,
        margin: "clamp(38px,5vw,64px) 0 0", borderTop: `1px solid ${theme.line}`,
        borderBottom: `1px solid ${theme.line}`, padding: "20px 0" }}>
        {meta.map(([k, v]) => (
          <div key={k}>
            <div style={{ fontFamily: theme.fontMono, fontSize: 10, letterSpacing: "0.14em",
              textTransform: "uppercase", color: theme.muted, marginBottom: 6 }}>{k}</div>
            <div style={{ fontFamily: theme.fontBody, fontSize: 15.5, color: theme.ink }}>{v}</div>
          </div>
        ))}
      </div>

      {/* -------------------------------------------------------- the epigraph */}
      <div style={section}>
        <AtlasQuote theme={theme} big
          quote={"“A Negroni is a perfect drink as far as I’m concerned.”"}
          cite="Anthony Bourdain" />
      </div>

      {/* ------------------------------------------------------- the long read */}
      <div className="detail-grid" style={{ ...section, display: "grid",
        gridTemplateColumns: "1.5fr 1fr", gap: "clamp(26px,5vw,72px)", alignItems: "start" }}>
        <div>
          <Eyebrow theme={theme}>About the book</Eyebrow>
          <p style={{ fontFamily: theme.fontBody, fontSize: "clamp(17px,1.5vw,20px)", lineHeight: 1.62,
            color: theme.ink, margin: "18px 0 20px", textWrap: "pretty" }}>
            The Negroni is, in many ways, the perfect drink: equal parts spirit, bitter, and fortified wine.
            Its simple formula is endlessly adaptable to local flavors and techniques. You’d be hard pressed
            to find a bar that doesn’t serve their own version of it anywhere on earth. Nicholas Pieper knows,
            because he checked.
          </p>
          <p style={{ fontFamily: theme.fontBody, fontSize: "clamp(16px,1.4vw,18.5px)", lineHeight: 1.62,
            color: theme.muted, margin: "0 0 20px", textWrap: "pretty" }}>
            <em>Atlas Negroni</em> follows the drink across five continents and more than twenty countries —
            from the Florence bar where it was allegedly born to a coffee estate in Costa Rica, a yurt camp in
            the Kyrgyz mountains, and a Samarkand supper club where it arrives in a porcelain bowl. Every
            recipe is anchored to a real place and a real story: <em>la hora del vermut</em> in Spain, rosemary
            Negronis at a 200-year-old Colorado hotel bar, a full moon party in Thailand.
          </p>
          <p style={{ fontFamily: theme.fontBody, fontSize: "clamp(16px,1.4vw,18.5px)", lineHeight: 1.62,
            color: theme.muted, margin: 0, textWrap: "pretty" }}>
            It’s organized into ten chapters by mood rather than map — Aperitivo Hour in Italy, Beach Bum,
            Airport Bars &amp; Happy Accidents, The Bitter Old West, Blow Out Parties — and threaded with
            full-page original photography, evergreen travel advice paired with honest bar recommendations,
            and sidebars on everything from the world of Mexican liquor to how to find a good drink anywhere
            on earth. Part coffee-table object, part travel guide, part working recipe book.
          </p>
        </div>

        <aside style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          <div style={{ padding: "22px 24px", background: theme.surface, border: `1px solid ${theme.line}`,
            borderRadius: 3 }}>
            <div style={{ fontFamily: theme.fontMono, fontSize: 10, letterSpacing: "0.16em",
              textTransform: "uppercase", color: theme.accent, marginBottom: 14 }}>The particulars</div>
            {[["Format", "Hardcover · coffee-table"], ["Chapters", "Ten, by mood"], ["Countries", "20+ across 5 continents"],
              ["Photography", "Original, full-page"], ["ISBN", "979-8-9976365-0-0"]].map(([k, v]) => (
              <div key={k} style={{ display: "flex", justifyContent: "space-between", gap: 14,
                padding: "9px 0", borderTop: `1px solid ${theme.line}` }}>
                <span style={{ fontFamily: theme.fontMono, fontSize: 10.5, letterSpacing: "0.1em",
                  textTransform: "uppercase", color: theme.muted, whiteSpace: "nowrap" }}>{k}</span>
                <span style={{ fontFamily: theme.fontBody, fontSize: 14, color: theme.ink,
                  textAlign: "right" }}>{v}</span>
              </div>
            ))}
          </div>

          <a href={ATLAS_IG} target="_blank" rel="noopener noreferrer" className="ev-btn"
            style={{ textDecoration: "none", display: "block", padding: "22px 24px", borderRadius: 3,
              background: theme.accent2Fill, border: `1px solid ${theme.line}`, color: theme.onAccent2 }}>
            <div style={{ fontFamily: theme.fontMono, fontSize: 10, letterSpacing: "0.16em",
              textTransform: "uppercase", opacity: 0.72, marginBottom: 8 }}>Follow the trip</div>
            <div style={{ fontFamily: theme.fontDisplay, fontSize: "clamp(24px,2.4vw,32px)", lineHeight: 1.05,
              letterSpacing: "-0.015em" }}>@atlasnegroni</div>
            <div style={{ fontFamily: theme.fontBody, fontSize: 14, lineHeight: 1.5, marginTop: 10,
              opacity: 0.85 }}>
              Recipes, outtakes and bar recommendations from the road — posted as the book counts down.
            </div>
          </a>
        </aside>
      </div>

      {/* ------------------------------------------------------ sample spreads */}
      <div style={section}>
        <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between",
          flexWrap: "wrap", gap: 14, marginBottom: 20 }}>
          <Eyebrow theme={theme}>{ATLAS_SPREADS.length > 1 ? "Sample spreads" : "A sample spread"}</Eyebrow>
          {ATLAS_SPREADS.length < 2 ? (
            <span style={{ fontFamily: theme.fontMono, fontSize: 10.5, letterSpacing: "0.12em",
              textTransform: "uppercase", color: theme.muted }}>{sheet.chapter}</span>
          ) : (
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
            {ATLAS_SPREADS.map((sp, i) => {
              const on = i === spread;
              return (
                <button key={sp.tab} onClick={() => setSpread(i)} aria-pressed={on}
                  style={{ fontFamily: theme.fontMono, fontSize: 10.5, letterSpacing: "0.12em",
                    textTransform: "uppercase", padding: "6px 14px", borderRadius: 999, cursor: "pointer",
                    whiteSpace: "nowrap", transition: "background .2s ease, border-color .2s ease",
                    border: `1px solid ${on ? theme.accent2 : theme.line}`,
                    color: on ? theme.onAccent2 : theme.muted,
                    background: on ? theme.accent2Fill : "transparent" }}>
                  {sp.tab}
                </button>
              );
            })}
          </div>
          )}
        </div>
        <figure style={{ margin: 0 }}>
          <div className="atlas-spread" style={{ border: `1px solid ${theme.line}`, background: theme.surface }}>
            <img key={sheet.src} src={sheet.src} alt={"Sample spread from Atlas Negroni — " + sheet.title} />
          </div>
          <figcaption style={{ fontFamily: theme.fontBody, fontSize: 14.5, lineHeight: 1.55,
            color: theme.muted, marginTop: 14, maxWidth: 680, textWrap: "pretty" }}>
            {ATLAS_SPREADS.length > 1 && (
              <span style={{ display: "block", fontFamily: theme.fontMono, fontSize: 10.5,
                letterSpacing: "0.12em", textTransform: "uppercase", color: theme.accent,
                marginBottom: 8 }}>{sheet.chapter}</span>
            )}
            <strong style={{ color: theme.ink, fontWeight: 600 }}>{sheet.title}</strong>{" "}
            {sheet.caption}{" "}
            <span className="atlas-hint" style={{ color: theme.accent }}>Scroll the spread sideways to read it →</span>
          </figcaption>
        </figure>
      </div>

      {/* ----------------------------------------------------------- pull quote */}
      <div style={section}>
        <AtlasQuote theme={theme} big
          quote={"“With beautiful photography and a splash of humor, Atlas Negroni is proof that La Dolce Vita can be found anywhere on earth.”"} />
      </div>

      {/* ------------------------------------------------------------- the author */}
      <div className="detail-grid" style={{ ...section, display: "grid", gridTemplateColumns: "1.5fr 1fr",
        gap: "clamp(26px,5vw,72px)", alignItems: "start" }}>
        <div>
          <Eyebrow theme={theme}>The author</Eyebrow>
          <h2 style={{ fontFamily: theme.fontDisplay, fontWeight: 400, fontSize: "clamp(32px,4.4vw,58px)",
            lineHeight: 0.98, margin: "14px 0 18px", letterSpacing: "-0.02em" }}>Nicholas Pieper</h2>
          <p style={{ fontFamily: theme.fontBody, fontSize: "clamp(16px,1.4vw,18.5px)", lineHeight: 1.62,
            color: theme.ink, margin: "0 0 18px", textWrap: "pretty" }}>
            Nicholas is one half of EVRYWHR, the travel studio behind <em>Go Everywhere Do Everything</em>. His
            journey with the Negroni started in Italy, after biking from Amsterdam to Switzerland left him in
            the habit of chugging his drinks — a habit the Negroni cured on the spot. It was the cocktail at
            his wedding. It has since been the excuse for a great deal of travel.
          </p>
          <p style={{ fontFamily: theme.fontBody, fontSize: "clamp(16px,1.4vw,18.5px)", lineHeight: 1.62,
            color: theme.muted, margin: 0, textWrap: "pretty" }}>
            Photographs throughout the book are his own, shot on the road over several years and across five
            continents — with a handful of frames contributed by fellow travelers who were there when it counted.
          </p>
        </div>
        <div style={{ padding: "22px 24px", background: theme.surface, border: `1px solid ${theme.line}`,
          borderRadius: 3, borderLeft: `2px solid ${theme.accent}` }}>
          <div style={{ fontFamily: theme.fontMono, fontSize: 10, letterSpacing: "0.16em",
            textTransform: "uppercase", color: theme.accent, marginBottom: 12 }}>From the introduction</div>
          <p style={{ fontFamily: theme.fontBody, fontStyle: "italic", fontSize: 16, lineHeight: 1.58,
            margin: 0, color: theme.ink, textWrap: "pretty" }}>
            “Consider this book as much a travel guide as a recipe book. Half the fun is going out of your way
            to find something new. Next time you’re in another country, bring back a bottle of the local
            liquor. You’re practically guaranteed to be able to make a good Negroni with it.”
          </p>
        </div>
      </div>

      {/* ------------------------------------------------------------ pre-order */}
      <div style={{ ...section }}>
        <div style={{ padding: "clamp(28px,4vw,56px)", borderRadius: 4, background: theme.surface,
          border: `1px solid ${theme.line}`, display: "flex", flexWrap: "wrap", gap: "clamp(22px,3vw,48px)",
          alignItems: "center", justifyContent: "space-between" }}>
          <div style={{ flex: "1 1 440px", maxWidth: 620 }}>
            <Eyebrow theme={theme}>Pre-order</Eyebrow>
            <h2 style={{ fontFamily: theme.fontDisplay, fontWeight: 400, fontSize: "clamp(30px,4vw,52px)",
              lineHeight: 1.0, margin: "12px 0 0", letterSpacing: "-0.02em", textWrap: "balance" }}>
              One drink. Twenty-odd countries. Out 17 September.
            </h2>
            <p style={{ fontFamily: theme.fontBody, fontSize: 16.5, lineHeight: 1.55, color: theme.muted,
              margin: "14px 0 0", textWrap: "pretty" }}>
              First printing is limited. Join the waitlist and we’ll pour you the first round before it’s
              anywhere else.
            </p>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 14, alignItems: "flex-start", marginTop: 24 }}>
              <AtlasPreorder theme={theme} solid />
              {canWaitlist && (
                <button className="ev-btn" onClick={() => setWaitlist(true)}
                  style={{ fontFamily: theme.fontMono, fontSize: 12, letterSpacing: "0.12em",
                    textTransform: "uppercase", padding: "13px 22px", borderRadius: 999, cursor: "pointer",
                    background: "transparent", color: theme.ink, border: `1px solid ${theme.line}` }}>
                  Join the waitlist
                </button>
              )}
            </div>
          </div>
          <div style={{ flex: "0 1 auto" }}>
            <AtlasCountdown theme={theme} compact />
          </div>
        </div>
      </div>

      {/* -------------------------------------------------------------- related */}
      {related.length > 0 && (
        <div style={{ marginTop: "clamp(52px,6vw,86px)", borderTop: `1px solid ${theme.line}`, paddingTop: 28 }}>
          <Eyebrow theme={theme}>Keep wandering</Eyebrow>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill,minmax(240px,1fr))",
            gap: 26, marginTop: 18 }}>
            {related.map((o) => <AtlasMini key={o.id} p={o} theme={theme} onOpen={onOpen} />)}
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { AtlasNegroniPage, AtlasCountdown });

// Route id === "atlas" to this page by wrapping the generic ProjectDetail.
// No edit to projects.jsx is needed — this file just has to load after it.
(function atlasRoute() {
  const Base = window.ProjectDetail;
  if (!Base || Base.__atlasWrapped) return;
  function ProjectDetailWithAtlas(props) {
    if (props && props.id === "atlas") return <AtlasNegroniPage {...props} />;
    return <Base {...props} />;
  }
  ProjectDetailWithAtlas.__atlasWrapped = true;
  window.ProjectDetail = ProjectDetailWithAtlas;
})();