/* The Renovation Institute coming-soon pages.
   Each page in site/pages/ sets a body class (v2a … v2e) that picks its layout.
   The CSP blocks inline styles, so every rule lives here. */

@font-face {
  font-family: "Figtree";
  src: url("/assets/fonts/figtree-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Figtree";
  src: url("/assets/fonts/figtree-italic-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Nunito Sans";
  src: url("/assets/fonts/nunito-sans-latin.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --teal: #116a6e;
  --teal-deep: #0b4447;
  --teal-muted: #5ea89f;
  --coral: #e66e51;
  --coral-hover: #ec8770;
  --peach: #f7b08a;
  --lime: #d7ff85;
  --cream: #fef4e9;
  --choc: #2b1f18;
  --sand: #d9b48f;
  --ink: #1e2b2c;
  --gutter: clamp(20px, 5vw, 80px);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: Figtree, system-ui, sans-serif;
}

img { display: block; max-width: 100%; height: auto; }

a { color: var(--teal); }
a:hover { color: var(--teal-deep); }
a:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

h1 {
  margin: 0;
  font-family: "Nunito Sans", sans-serif;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.page {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
}

/* ---------- Subscribe block (shared) ---------- */

.signup { display: flex; flex-direction: column; gap: 12px; width: 100%; }

#subscribe-form { display: flex; gap: 8px; margin: 0; }

#email {
  flex: 1;
  min-width: 0;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: 400 17px/1 Figtree, sans-serif;
  outline: none;
}
#email::placeholder { color: inherit; opacity: 0.6; }

#subscribe-form button {
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  font: 600 14px/1 Figtree, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 140ms;
}
#subscribe-form button:disabled { opacity: 0.7; cursor: progress; }

/* Inline pill: input and button share one rounded field (2c, 2d, 2e). */
.pill #subscribe-form { padding: 6px; border-radius: 999px; }
.pill #email, .pill #subscribe-form button { height: 52px; }

/* Stacked: input above button (2a, 2b). */
.stacked #subscribe-form { flex-direction: column; }
.stacked #email { flex: none; }

#subscribe-status { margin: 0; padding-left: 24px; font: 500 14px/1.4 Figtree, sans-serif; }
#subscribe-status:empty { display: none; }
#subscribe-status.done {
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 0 26px;
  border-radius: 999px;
  font: 500 18px/1.3 Figtree, sans-serif;
}

.reassure { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 0; padding-left: 24px; }
.reassure span { font: italic 400 16px Figtree, sans-serif; }
.reassure a { font: 400 13px Figtree, sans-serif; }

.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Credit line and social icons (shared) ---------- */

.credit { margin: 0; font: 400 16px/1.4 Figtree, sans-serif; }
.credit a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--lime);
  text-underline-offset: 4px;
}

.social { display: flex; flex-wrap: wrap; gap: 4px; margin-left: -10px; }
.social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  color: inherit;
  transition: opacity 140ms;
}
.social a:hover { color: inherit; opacity: 0.7; }
.social svg { width: 22px; height: 22px; }

/* ---------- 2a: centred, full-bleed photo, teal footer ---------- */

.v2a .page { display: flex; flex-direction: column; background: #1b2526; color: var(--cream); }
.v2a .bg {
  position: absolute;
  top: -13.2vw;
  left: -13.2vw;
  width: calc(100% + 26.4vw);
  max-width: none;
  height: calc(100% + 13.2vw);
  object-fit: cover;
  object-position: 50% 100%;
}
.v2a .shade { position: absolute; inset: 0; background: rgba(10, 26, 28, 0.55); }
.v2a .hero {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 5.8vh, 52px);
  padding: 48px 20px;
  text-align: center;
}
.v2a .logo { width: clamp(150px, 15.3vw, 220px); }
.v2a h1 { max-width: 1100px; color: #fff; font-size: clamp(46px, 7.2vw, 104px); }
.v2a .signup { width: min(440px, 100%); align-items: center; gap: 14px; }
.v2a #subscribe-form { width: 100%; gap: 14px; }
.v2a #email { height: 60px; background: var(--cream); font-size: 18px; text-align: center; }
.v2a #email:focus { box-shadow: 0 0 0 3px var(--lime); }
.v2a #subscribe-form button { height: 60px; background: var(--teal-muted); color: #0c2a2c; font-size: 15px; }
.v2a #subscribe-form button:hover { background: #74bab1; }
.v2a #subscribe-status { padding: 0; color: var(--lime); }
.v2a #subscribe-status.done {
  justify-content: center;
  width: 100%;
  min-height: 134px;
  padding: 0 24px;
  border-radius: 24px;
  background: var(--cream);
  color: var(--teal);
  font-size: 20px;
}
.v2a .reassure { flex-direction: column; align-items: center; gap: 14px; margin-top: 6px; padding: 0; }
.v2a .reassure span { font-size: 17px; }
.v2a .reassure a, .v2a .reassure a:hover { color: var(--cream); }
.v2a .bar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  min-height: 84px;
  padding: 12px clamp(20px, 3.3vw, 48px);
  background: var(--teal);
}
.v2a .credit { font-size: 18px; }

/* ---------- 2b: split, copy on cream, photo kept clean ---------- */

.v2b .page { display: grid; grid-template-columns: 640px 1fr; background: var(--cream); }
.v2b .panel { display: flex; flex-direction: column; padding: 56px 72px 48px; color: var(--teal); }
.v2b .logo { width: 280px; }
.v2b .middle { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 48px 0; }
.v2b h1 { margin-bottom: 40px; color: var(--teal); font-size: clamp(46px, 5.8vw, 84px); }
.v2b .signup { width: min(420px, 100%); }
.v2b #subscribe-form { gap: 12px; }
.v2b #email { height: 58px; padding: 0 26px; border: 1.5px solid var(--teal); background: #fff; }
.v2b #email:focus { box-shadow: 0 0 0 3px var(--peach); }
.v2b #subscribe-form button { height: 58px; background: var(--coral); color: #1f1410; font-size: 15px; }
.v2b #subscribe-form button:hover { background: var(--coral-hover); }
.v2b #subscribe-status { padding-left: 26px; color: #a23a20; }
.v2b #subscribe-status.done { min-height: 128px; border-radius: 24px; background: var(--teal); color: var(--cream); font-size: 20px; }
.v2b .reassure { padding-left: 26px; color: #2f4446; }
.v2b .foot { display: flex; flex-direction: column; gap: 16px; padding-top: 24px; border-top: 1px solid rgba(17, 106, 110, 0.25); }
.v2b .credit { color: #2f4446; }
.v2b .social { color: var(--teal); }
.v2b .photo { width: 100%; height: 100%; min-height: 100vh; object-fit: cover; object-position: 52% 30%; background: var(--peach); }

/* ---------- 2c: the mark as a window, teal ground ---------- */

.v2c .page {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 4.4vw, 64px) clamp(20px, 4.9vw, 70px) 36px;
  background: var(--teal);
  color: var(--cream);
}
.v2c .mark {
  width: 100%;
  max-width: 1300px;
  aspect-ratio: 1300 / 457;
  background: var(--peach) url("/assets/photos/2c.jpg") center 40% / cover no-repeat;
  -webkit-mask: url("/assets/logo/ri-mark-black.png") 0 0 / 100% 100% no-repeat;
  mask: url("/assets/logo/ri-mark-black.png") 0 0 / 100% 100% no-repeat;
}
.v2c .wordmark { align-self: flex-end; width: clamp(180px, 25vw, 360px); margin-top: 27px; }
.v2c .row {
  display: grid;
  grid-template-columns: 1fr minmax(0, 560px);
  gap: 48px;
  align-items: start;
  margin: clamp(28px, 4vw, 57px) 0 48px;
  padding: 0 10px;
}
.v2c h1 { color: var(--cream); font-size: clamp(40px, 4.45vw, 64px); line-height: 1.02; letter-spacing: -0.02em; }
.v2c #subscribe-form { background: var(--cream); }
.v2c #subscribe-form:focus-within { box-shadow: 0 0 0 3px var(--lime); }
.v2c #subscribe-form button { background: var(--lime); color: #0c2a2c; }
.v2c #subscribe-form button:hover { background: #e4ffad; }
.v2c #subscribe-status { color: var(--lime); }
.v2c #subscribe-status.done { background: var(--lime); color: #0c2a2c; }
.v2c .reassure a, .v2c .reassure a:hover { color: var(--cream); }
.v2c .foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  margin: auto 10px 0;
  padding-top: 20px;
  border-top: 1px solid rgba(254, 244, 233, 0.22);
}

/* ---------- 2d: no photo, lime ground, oversized peach mark ---------- */

.v2d .page { background: var(--lime); color: var(--teal-deep); }
.v2d .mark {
  position: absolute;
  right: -15.3vw;
  bottom: -7.6vw;
  width: 90.3vw;
  aspect-ratio: 1300 / 457;
  background: var(--peach);
  -webkit-mask: url("/assets/logo/ri-mark-black.png") 0 0 / 100% 100% no-repeat;
  mask: url("/assets/logo/ri-mark-black.png") 0 0 / 100% 100% no-repeat;
}
.v2d .content {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  padding: 56px var(--gutter) 44px;
}
.v2d .logo { width: clamp(200px, 19.4vw, 280px); }
.v2d h1 {
  max-width: 1100px;
  margin-top: clamp(40px, 7vh, 65px);
  color: var(--teal);
  font-size: clamp(50px, 8.6vw, 124px);
  line-height: 0.98;
  letter-spacing: -0.03em;
}
.v2d .signup { width: min(560px, 100%); margin-top: clamp(36px, 6vh, 57px); }
.v2d #subscribe-form { border: 1.5px solid var(--teal); background: #fff; }
.v2d #subscribe-form:focus-within { box-shadow: 0 0 0 3px var(--peach); }
.v2d #email, .v2d #subscribe-form button { height: 50px; }
.v2d #subscribe-form button { background: var(--coral); color: #1f1410; }
.v2d #subscribe-form button:hover { background: var(--coral-hover); }
.v2d #subscribe-status { color: #7a1f0b; }
.v2d #subscribe-status.done { background: var(--teal); color: var(--cream); }
.v2d .foot { display: flex; flex-direction: column; gap: 14px; margin-top: auto; padding-top: 40px; }
/* A lime underline vanishes on the lime ground, so the credit links use the text colour here. */
.v2d .credit a { text-decoration-color: currentColor; }

/* ---------- 2e: chocolate split, beige paint patch ---------- */

.v2e .page { display: grid; grid-template-columns: 680px 1fr; background: var(--choc); color: var(--cream); }
.v2e .panel { display: flex; flex-direction: column; padding: 56px 72px 44px; }
.v2e .logo { width: 260px; }
.v2e .middle { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 48px 0; }
.v2e .dash { width: 56px; height: 6px; margin-bottom: 28px; border-radius: 3px; background: var(--lime); }
.v2e h1 { margin-bottom: 44px; color: var(--cream); font-size: clamp(46px, 6.1vw, 88px); line-height: 0.98; letter-spacing: -0.03em; }
.v2e h1 span { color: var(--sand); }
.v2e #subscribe-form { background: var(--cream); }
.v2e #subscribe-form:focus-within { box-shadow: 0 0 0 3px var(--peach); }
.v2e #email { color: var(--choc); }
.v2e #subscribe-form button { background: var(--coral); color: #1f1410; }
.v2e #subscribe-form button:hover { background: var(--coral-hover); }
.v2e #subscribe-status { color: var(--peach); }
.v2e #subscribe-status.done { background: var(--peach); color: var(--choc); }
.v2e .reassure a, .v2e .reassure a:hover { color: var(--cream); }
.v2e .foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(254, 244, 233, 0.18);
}
.v2e .social { flex: none; flex-wrap: nowrap; }
.v2e .credit { max-width: 300px; font-size: 14px; text-align: right; }
.v2e .photo { position: relative; overflow: hidden; background: #d9c3a5; }
.v2e .photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 12% 50%; }
.v2e .photo::after { content: ""; position: absolute; inset: 0; background: #7a5a43; mix-blend-mode: multiply; opacity: 0.18; }

/* ---------- Privacy policy ---------- */

.privacy { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.privacy header, .privacy footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding: 24px var(--gutter);
  background: var(--teal);
  color: var(--cream);
}
.privacy header img { width: min(220px, 60vw); }
.privacy header a, .privacy header a:hover { color: var(--cream); font: 500 14px Figtree, sans-serif; }
.privacy main { flex: 1; padding: clamp(40px, 7vw, 88px) var(--gutter); }
.privacy article { display: flex; flex-direction: column; gap: 40px; max-width: 720px; margin: 0 auto; font: 400 17px/1.65 Figtree, sans-serif; }
.privacy h1 { color: var(--teal); font-size: clamp(44px, 7vw, 72px); }
.privacy h2 { margin: 0; color: var(--teal); font: 400 28px/1.2 "Nunito Sans", sans-serif; }
.privacy p, .privacy ul { margin: 0; }
.privacy ul { display: flex; flex-direction: column; gap: 8px; padding-left: 22px; }
.privacy section { display: flex; flex-direction: column; gap: 12px; }
.privacy .intro { display: flex; flex-direction: column; gap: 16px; }
.privacy .updated { color: #4a5a5b; font-size: 15px; }
.privacy .draft { padding: 14px 18px; border-radius: 12px; background: var(--lime); color: var(--teal-deep); font: 500 14px/1.5 Figtree, sans-serif; }
.privacy .lead { font-size: 18px; }
.privacy .contact { padding: 24px; border: 1px solid rgba(17, 106, 110, 0.2); border-radius: 12px; background: #fff; }
.privacy footer nav { display: flex; flex-wrap: wrap; gap: 22px; }
.privacy footer nav a, .privacy footer nav a:hover { color: var(--cream); font: 500 14px Figtree, sans-serif; text-decoration: none; }
.privacy .credit { font-size: 15px; }

/* ---------- Smaller screens (only desktop is designed so far) ---------- */

@media (max-width: 1100px) {
  .v2b .page, .v2e .page { grid-template-columns: 1fr; }
  .v2b .panel, .v2e .panel { padding: 40px var(--gutter) 36px; }
  .v2b .photo, .v2e .photo { order: -1; min-height: 0; height: 38vh; }
  .v2b .logo, .v2e .logo { width: 220px; }
  .v2c .row { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 640px) {
  .v2a .credit { font-size: 16px; }
  .v2a .bar { justify-content: center; text-align: center; }
  .v2e .foot { flex-direction: column; align-items: flex-start; }
  .v2e .credit { text-align: left; }
  .pill #subscribe-form { flex-direction: column; border-radius: 30px; }
  .pill #subscribe-status.done { border-radius: 30px; padding: 14px 26px; }
}