/* The '27 Cohort - shared styles. All values from Figma file wyQF6BgwaLVf0ZDDT24Gkh. */

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { background: #fbf7f0; }
img { display: block; }

/* ---- version switcher bar (site chrome, sits above the design) ---- */
.switcher {
  display: flex; align-items: center; justify-content: space-between;
  height: 48px; padding: 0 24px;
  background: #fbf7f0; border-bottom: 1px solid rgba(30, 30, 30, .15);
  position: relative; z-index: 10;
}
.switcher-home { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.switcher-home img { height: 22px; width: auto; }
.switcher-home span {
  font-family: 'Alata', sans-serif; font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: #1e1e1e;
}
.switcher-links { display: flex; gap: 22px; }
.switcher-links a {
  font-family: 'Alata', sans-serif; font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: #1e1e1e; text-decoration: none;
}
.switcher-links a:hover { color: #de3914; }
.switcher-links a.active { color: #de3914; border-bottom: 1px solid #de3914; }
@media (max-width: 620px) {
  .switcher { height: auto; flex-direction: column; gap: 6px; padding: 8px 12px; }
}

/* ---- scaled 1440x3258 canvas ---- */
.viewport { position: relative; overflow: hidden; }
.page {
  position: relative; width: 1440px; height: 3258px;
  transform-origin: 0 0; background: #fbf7f0;
}
.page section, .page footer { position: absolute; left: 0; width: 1440px; overflow: hidden; }

/* =================================================== hero (0 - 1024.29) */
.hero { top: 0; height: 1024.29px; }

.hero-fresco {
  position: absolute; left: -377.77px; top: -140.69px;
  width: 1842.35px; height: 2655.31px; filter: blur(10px);
}
.hero-fresco-crop { position: absolute; inset: 0; opacity: .4; overflow: hidden; }
.hero-fresco-crop img {
  position: absolute; height: 123.2%; width: 126.79%;
  left: 1.52%; top: -31.8%; max-width: none;
}
.hero-photo {
  position: absolute; left: -38.77px; top: -55.73px;
  width: 1978.99px; height: 1322.59px; filter: blur(5px);
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-photo-d3 { left: -5.77px; top: -0.73px; }
.hero-flat { position: absolute; inset: 0; }
.hero-flat img { width: 100%; height: 100%; object-fit: cover; }
.hero-flat-grad {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 45.559%, rgba(0,0,0,.8) 100%);
}
.hero-veil { position: absolute; left: -5.5px; top: -0.29px; width: 1444px; height: 1024.29px; }

.hero-mark { position: absolute; left: 692.51px; top: 77px; width: 71.02px; height: 67.62px; }
.hero-eyebrow {
  position: absolute; left: 42.05px; top: 270.29px; width: 1343.98px;
  font-family: 'Alata', sans-serif; font-size: 20px; line-height: 1.5;
  letter-spacing: -0.38px; text-transform: uppercase; text-align: center;
  color: var(--hero-fg);
}
.hero-headline { position: absolute; left: 189.92px; top: 349.48px; width: 1098px; height: 163px; }
.hero-lede {
  position: absolute; left: 462.04px; top: 558.06px; width: 504px; height: 95px;
  display: flex; align-items: center;
}
.hero-lede p {
  width: 100%; font-family: 'Sora', sans-serif; font-size: 18px; line-height: 1.5;
  letter-spacing: -0.198px; text-align: center; color: var(--hero-fg);
}
.hero-convened {
  position: absolute; left: 569.5px; top: 824.06px; width: 118.64px;
  font-family: 'Sora', sans-serif; font-size: 13.407px; line-height: 1.5;
  letter-spacing: -0.2547px; text-align: center; color: var(--hero-fg);
}
.hero-lockup { position: absolute; left: 689.14px; top: 824.07px; width: 170.43px; height: 19.05px; }

/* ============================================= invitation (1024.29 - 2048.29) */
.invite { top: 1024.29px; height: 1024px; background: #4c0000; }
.inv-texture {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; mix-blend-mode: multiply; opacity: .9;
}
.inv-watermark {
  position: absolute; left: -519.52px; top: -658.7px;
  width: 2601.13px; height: 1793.29px;
  display: flex; align-items: center; justify-content: center;
}
.inv-watermark img { width: 1793.29px; height: 2601.13px; transform: rotate(-90deg); flex: none; }

.inv-schematic { position: absolute; inset: 0; }
.inv-schematic > * { position: absolute; }
.inv-sq-line { border: 1px solid #de3914; }
.inv-sq-fill { background: #de3914; }

.inv-griffin { position: absolute; width: 402.19px; height: 567.79px; }
.inv-heading {
  position: absolute; width: 578.21px;
  font-family: 'Alata', sans-serif; font-weight: 400; font-size: 45px;
  line-height: 1.31; letter-spacing: -0.495px; text-transform: uppercase; color: #fbf7f0;
}
.inv-body {
  position: absolute; width: 372.07px; height: 95px;
  transform: translateY(-50%); display: flex; align-items: center;
}
.inv-body p {
  font-family: 'Sora', sans-serif; font-size: 15px; line-height: 1.5;
  letter-spacing: -0.165px; color: #fbf7f0;
}
.inv-cards { position: absolute; display: flex; flex-direction: column; gap: 10px; }
.card { display: flex; align-items: flex-start; backdrop-filter: blur(2.5px); }
.card-bar { width: 8.857px; height: 65.58px; background: #de3914; flex: none; }
.card-body {
  position: relative; height: 65px; background: #720202; flex: none;
  display: flex; align-items: center; justify-content: center;
  gap: 20px; padding: 5px 15px;
}
.card-num { position: absolute; }
.card-body::before { content: ""; width: 121.874px; flex: none; }
.card-text { flex: 1 0 0; min-width: 1px; }
.card-text-over {
  flex: none; position: absolute; right: 15px; top: 50%;
  transform: translateY(-50%); width: 191.13px;
}
.card-text p {
  font-family: 'Sora', sans-serif; font-size: 15px; line-height: 1.2;
  letter-spacing: -0.165px; color: #fbf7f0; text-align: right;
}
.card-thumb { width: 210.1px; flex: none; }
.card-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: bottom; }

.inv-button {
  position: absolute; display: flex; align-items: center; justify-content: center;
  gap: 10px; padding: 15px 25px; background: #de3914; text-decoration: none;
}
.inv-button img { width: 42.586px; height: 15.56px; transform: scaleX(-1); }
.inv-button span {
  width: 148.75px; height: 20.21px; display: flex; align-items: center; justify-content: center;
  font-family: 'Sora', sans-serif; font-weight: 600; font-size: 15px;
  line-height: 1.05; color: #fff; text-align: center;
}
.inv-lbl, .inv-el { max-width: none; }

/* ==================================================== why (2048.29 - 3016.29) */
.why { top: 2048.29px; height: 968px; }

/* v1/v2: rotated blurred engraving full-bleed */
.why-art-wrap {
  position: absolute; left: -373.11px; top: -287.07px;
  width: 2524.13px; height: 3071.92px;
  display: flex; align-items: center; justify-content: center;
}
.why-art {
  position: relative; width: 2239.26px; height: 2854.39px;
  transform: rotate(-5.97deg); filter: blur(5px); flex: none;
}
.why-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.why-art-grad {
  position: absolute; inset: 0; mix-blend-mode: darken;
  background: linear-gradient(78.364deg, rgba(48,33,21,.9) 24.553%, rgba(184,133,89,.2) 98.709%);
}

/* v4: sharp engraving right, fading to black on the left */
.why-art4-wrap {
  position: absolute; left: 540.63px; top: -34.93px;
  width: 974.39px; height: 1073.51px;
  display: flex; align-items: center; justify-content: center;
}
.why-art4 { position: relative; width: 972.9px; height: 1072.15px; transform: rotate(.08deg); flex: none; }
.why-art4 img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: bottom;
}
.why-art4-grad {
  position: absolute; inset: 0;
  background: linear-gradient(90.166deg, rgb(0,0,0) 0.46%, rgba(0,0,0,.1) 84.145%);
}

/* v3/v5: photo right + solid panel left */
.why-photo { position: absolute; object-fit: cover; object-position: bottom; }
.why-panel { position: absolute; left: -39.43px; top: 0; width: 739.71px; height: 968px; }

.why-heading {
  position: absolute; width: 578.06px;
  font-family: 'Alata', sans-serif; font-weight: 400; font-size: 45px;
  line-height: 1.16; letter-spacing: -0.495px; text-transform: uppercase; color: #fff;
}
.why-num { position: absolute; }
.why-p {
  position: absolute; width: 474.24px;
  font-family: 'Sora', sans-serif; font-size: 20px; line-height: 1.5;
  letter-spacing: -0.22px; color: #f4f4f4;
}
.why-p:first-of-type { width: 439.52px; }

/* ================================================= footer (3016.29 - 3258) */
.footer { top: 3016.29px; height: 241.71px; }
.footer-lockup { position: absolute; width: 210.11px; height: 23.49px; }
.footer-mark { position: absolute; left: 46px; top: 158.83px; width: 35.51px; height: 33.81px; }
.footer-copy {
  position: absolute; left: 696.09px; top: 171.54px; width: 706.12px;
  font-family: 'Inter', sans-serif; font-weight: 500; font-size: 15px;
  line-height: 1.5; letter-spacing: -0.165px;
}

/* ====================================================== deadline strip */
.strip {
  position: absolute; left: 237.71px; top: 939.29px;
  width: 964.58px; height: 158.69px; background: #bc8f68;
  padding: 25px 80px; display: flex; align-items: flex-start;
}
.strip > * { flex: none; }
.strip-copy {
  width: 262.58px; margin-top: 10.84px;
  font-family: 'Alata', sans-serif; font-size: 24.21px; line-height: 1.2;
  letter-spacing: -0.2663px; color: #000;
}
.strip-divider { width: 1.5px; height: 108.69px; margin-left: 51.25px; }
.strip-dates { display: flex; gap: 50px; margin-left: 51.25px; margin-top: 24.81px; }
.strip-dates > div { display: flex; flex-direction: column; gap: 5px; }
.strip-label {
  font-family: 'Sora', sans-serif; font-weight: 700; font-size: 13px;
  line-height: 1.5; letter-spacing: -0.247px; text-transform: uppercase; color: #000;
}
.strip-value {
  font-family: 'Sora', sans-serif; font-weight: 400; font-size: 25.59px;
  line-height: 1.5; letter-spacing: -0.4862px; color: #000;
}
