/* The Landing page's styles, as the Founders wrote them in Claude.
   The top of this file was added, and one repair is marked in .masthead. */

/* Base styles claude.ai puts around the page, kept so the page looks the same. */
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}

/* The two fonts, hosted on the site so the page asks no other company for anything.
   Each file holds every weight the page uses. */
@font-face{
  font-family:'Montserrat';
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url('fonts/montserrat-latin.woff2') format('woff2');
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('fonts/jetbrains-mono-latin.woff2') format('woff2');
}

/* Layout: one full-bleed editorial masthead built from the approved invitation photo and a navy scrim,
   sized to its content — mark, headline, countdown ribbon, mission note, contact — no forced viewport height. */
:root{
  --navy:#0B132B;
  --navy-2:#111b3a;
  --paper:#F2EFE8;
  --paper-dim:#B7BDD1;
  --blue:#0D47A1;
  --teal:#0097A7;
  --emerald:#2ECC71;
  --gold:#F5B041;
  --orange:#FF8A3D;
  --line:rgba(242,239,232,0.16);
  --font-display:'Montserrat',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  color-scheme:dark;
}

*{box-sizing:border-box;}
body{
  background:var(--navy);
  color:var(--paper);
  font-family:var(--font-display);
  margin:0;
  -webkit-font-smoothing:antialiased;
}
h1,h2{text-wrap:balance;}
a{color:inherit;}

.wrap{max-width:860px;margin:0 auto;padding-inline:20px;}

/* ---------- masthead photo band ---------- */
.masthead{
  position:relative;
  width:100%;
  /* A repair: this was a fixed height (height:min(62vh,560px); min-height:380px), which cut off
     the end of the lede on short screens. As a least height, the band grows when its words need it. */
  min-height:max(380px,min(62vh,560px));
  overflow:hidden;
  background:var(--navy) center/cover no-repeat;
}
.masthead img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 22%;
  filter:saturate(0.92);
}
.scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(11,19,43,0.55) 0%, rgba(11,19,43,0.35) 30%, rgba(11,19,43,0.88) 86%, var(--navy) 100%),
    linear-gradient(90deg, rgba(11,19,43,0.35) 0%, rgba(11,19,43,0.05) 30%, rgba(11,19,43,0.05) 70%, rgba(11,19,43,0.35) 100%);
}

.brandmark{
  position:relative; z-index:2;
  padding-top:24px;
}
.logo-stack{
  position:relative;
  width:196px; aspect-ratio:640/424;
}
.logo-stack img{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
}
.logo-arcs{
  transform-origin:50.2% 49%;
  animation:ringspin 46s linear infinite;
}
@media (prefers-reduced-motion: reduce){ .logo-arcs{animation:none;} }
@keyframes ringspin{ to{ transform:rotate(360deg); } }

.hero-copy{
  position:relative; z-index:2;
  display:flex; flex-direction:column; gap:14px;
  padding-top:min(8vh,66px); padding-bottom:28px;
}
.badge{
  display:inline-flex; align-items:center; gap:7px;
  width:fit-content;
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--paper);
  background:rgba(242,239,232,0.1);
  border:1px solid var(--line);
  border-radius:999px;
  padding:6px 13px 6px 10px;
  backdrop-filter:blur(6px);
}
.badge-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 3px rgba(245,176,65,0.22);
}
h1{
  margin:0; max-width:11.5ch;
  font-size:clamp(32px,6.4vw,54px);
  font-weight:800; line-height:1.06; letter-spacing:-0.01em;
}
.lede{
  margin:0; max-width:46ch;
  font-size:clamp(15px,2vw,17.5px);
  line-height:1.55; font-weight:400;
  color:#E8E6DF;
}

/* ---------- countdown ribbon ---------- */
.countdown-section{ padding-block:40px 36px; border-bottom:1px solid var(--line); }
.cd-label{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--paper-dim); margin:0 0 16px;
}
.cd-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
}
.cd-tile{
  background:rgba(242,239,232,0.05);
  border:1px solid var(--line);
  border-radius:12px;
  padding:16px 6px 13px;
  text-align:center;
}
.cd-num{
  font-family:var(--font-mono); font-variant-numeric:tabular-nums;
  font-size:clamp(26px,5.6vw,40px); font-weight:700; line-height:1;
  background:linear-gradient(135deg,var(--emerald),var(--teal));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.cd-unit{
  margin-top:7px;
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--paper-dim);
}
.event-meta{
  margin-top:22px; display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 10px;
}
.event-date{ font-weight:700; font-size:15px; }
.event-venue{ color:var(--paper-dim); font-size:14px; }
.event-note{
  margin:10px 0 0; font-size:12.5px; color:var(--paper-dim); font-style:italic;
}

/* ---------- mission note ---------- */
.mission-section{ padding-block:36px; border-bottom:1px solid var(--line); }
.mission-eyebrow{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--gold); margin:0 0 10px;
}
.mission-text{
  margin:0; max-width:52ch;
  font-size:clamp(16px,2.4vw,19px); line-height:1.5; font-weight:500;
  color:var(--paper);
}
.mission-tag{
  margin:16px 0 0; font-size:13px; color:var(--paper-dim);
}

/* ---------- contact ---------- */
.contact-section{ padding-block:32px; }
.contact-row{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px;
}
.contact-label{ font-size:14px; color:var(--paper-dim); margin:0 0 10px; }
.contact-pill{
  display:flex; align-items:center; gap:10px;
  background:rgba(242,239,232,0.05);
  border:1px solid var(--line);
  border-radius:999px;
  padding:9px 8px 9px 16px;
  flex:1 1 auto; min-width:0;
}
.contact-email{
  font-family:var(--font-mono); font-size:13px;
  color:var(--paper);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  user-select:all;
}
.copy-btn{
  flex:none;
  font-family:var(--font-display); font-weight:700; font-size:12.5px;
  color:var(--navy); background:var(--paper);
  border:none; border-radius:999px;
  padding:8px 16px;
  cursor:pointer;
}
.copy-btn:focus-visible, .copy-btn:focus{ outline:2px solid var(--gold); outline-offset:2px; }
.copy-btn[data-copied="true"]{ background:var(--emerald); color:var(--navy); }

footer{
  border-top:1px solid var(--line);
  padding-block:22px 34px;
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px;
}
.foot-left{ display:flex; align-items:center; gap:8px; }
.foot-ring{ width:20px;height:20px; }
.foot-ring circle{ fill:none; stroke:var(--paper-dim); }
.foot-text{ font-size:12px; color:var(--paper-dim); }

@media (max-width:480px){
  .cd-grid{ gap:7px; }
  .cd-tile{ padding:12px 4px 10px; border-radius:10px; }
}