:root{
  color-scheme:dark;
  --iron:#434341;      /* Sherwin-Williams Iron Ore SW 7069 — replaces the guide's #222222 charcoal */
  --yellow:#FFDF00;    /* Golden Yellow */
  --orange:#FF9500;    /* Vibrant Orange — the warm bridge */
  --red:#FF3232;       /* Bright Red — the spark, keep it thin */
  --display:'League Spartan','Archivo','Helvetica Neue',Arial,system-ui,sans-serif;
  --body:'Nunito','Avenir Next','Segoe UI',system-ui,-apple-system,sans-serif;
  --accent:'Architects Daughter','Bradley Hand','Segoe Script',cursive;
}
*{box-sizing:border-box}
html,body{min-height:100%}
/* Iron Ore field, warmed: a low orange glow lifts off the bottom edge and a
   soft vignette pulls focus to the middle. Both are felt, not seen. */
body{
  margin:0;color:#fff;font-family:var(--body);
  background-color:var(--iron);
  background-image:
    radial-gradient(95% 55% at 50% 100%, rgba(255,149,0,.15), transparent 72%),
    radial-gradient(120% 85% at 50% 48%, transparent 40%, rgba(0,0,0,.30));
  background-attachment:fixed;
  display:flex;align-items:center;justify-content:center;
  text-align:center;padding:44px 28px;position:relative;overflow-x:hidden;
}
/* Ghost field — the Zoroastrian motto tiled on the diagonal, standing in for the
   old stripe texture. Oversized and rotated as one block so the lines stay
   parallel; inset:-50% guarantees coverage past the corners at any viewport. */
.ghost{
  position:fixed;inset:-50%;pointer-events:none;user-select:none;z-index:0;
  transform:rotate(-45deg);
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:clamp(26px,4.5vw,44px);
}
.ghost-line{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(11px,1.5vw,15px);letter-spacing:.22em;
  color:rgba(255,255,255,.038);white-space:nowrap;line-height:1;
}
/* Every other line slides over so the tiling doesn't read as a rigid grid. */
.ghost-line:nth-child(even){transform:translateX(-9%)}
.wrap{position:relative;z-index:1;max-width:620px;width:100%}
.logo{width:min(340px,78vw);margin:0 auto 34px;display:block}
.soon{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(30px,7vw,52px);letter-spacing:.06em;color:var(--yellow);
  margin:0 0 18px;line-height:1.05;
}
/* Divider under the headline — the yellow→orange gradient colorway, shrunk to a rule.
   Yellow is the brand's voice; orange takes the structural marks so yellow stops
   meaning four different things on one page. */
.rule{
  width:64px;height:4px;border-radius:3px;margin:0 auto 22px;
  background:linear-gradient(90deg,var(--yellow),var(--orange));
}

/* Body copy — one <p> per blank line in the CMS */
.copy{margin:0 auto;max-width:470px}
.copy p{
  font-size:clamp(15px,2.4vw,17px);line-height:1.7;color:#eceae5;margin:0 0 15px;
}
.copy p:first-child{
  font-size:clamp(16px,2.6vw,19px);font-weight:600;color:#fff;margin-bottom:18px;
}
.copy p:last-child{margin-bottom:0}

/* Sign-off — the personal note */
.signoff{margin:26px auto 0;max-width:470px}
.signoff-line{
  font-size:clamp(15px,2.4vw,17px);line-height:1.6;color:#eceae5;margin:0 0 6px;
}
.signature{
  font-family:var(--accent);font-size:clamp(19px,3.2vw,23px);
  color:var(--yellow);margin:0;line-height:1.3;
}

/* Email — readable and tappable, deliberately NOT the handwriting font */
.email{margin:12px 0 0}
.email a{
  display:inline-block;font-family:var(--body);font-weight:600;
  font-size:clamp(14px,2.3vw,16px);color:var(--yellow);text-decoration:none;
  border-bottom:1px solid rgba(255,223,0,.45);padding:2px 0;
}
.email a:hover,.email a:focus-visible{border-bottom-color:var(--yellow)}

/* Location block — separated, leads into the address.
   The divider is an orange hairline that fades out at both ends, so it separates
   without drawing a hard line across the page. */
.find{
  position:relative;
  margin:34px auto 0;padding-top:26px;max-width:470px;
}
.find::before{
  content:"";position:absolute;top:0;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,149,0,.6) 22%,rgba(255,149,0,.6) 78%,transparent);
}
.directions{
  font-size:clamp(13px,2.1vw,15px);line-height:1.6;color:#d6d3cc;
  margin:0 0 12px;font-style:italic;
}
.addr{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:clamp(11px,2vw,13px);color:#b9b6ae;line-height:1.9;
}
@media(max-width:480px){
  .logo{margin-bottom:26px}
  .find{margin-top:28px;padding-top:22px}
}