/* Trejon overrides, applied after every mirror of Daksh's build.
   Source of truth: /root/sage-server/workshop/patch/copy_patches.py
   Asked for by Daksh in HQ, 2026-09-08. */

/* 5. Tighter vertical rhythm. His scale was 84 / 96, so a section boundary
      cost 180px of empty page. */
:root { --sec-y: 46px; --sec-y-lg: 50px; }
@media (width<=900px) { :root { --sec-y: 40px; --sec-y-lg: 44px; } }
@media (width<=600px) { :root { --sec-y: 32px; --sec-y-lg: 36px; } }

/* Two column rows where the left column is much shorter than the right left a
   tall void at the bottom of the page. Centring it splits that space in two
   and reads as a decision rather than a hole. */
@media (width>900px) {
  .grow-panel, .build-grid { align-items: center; }
}

.hero { min-height: auto; padding-top: 78px; }
.provocation-title { margin-bottom: 26px; }
.track-grid { margin-bottom: 24px; }
.floor-sub, .grow-sub, .build-lede, .proof-lede, .tt-lede { margin-top: 14px; }
.duty-layout, .build-grid, .rooms-grid { margin-top: 28px; }
.duty-roster, .demo, .build-three, .video-main, .video-small,
.tt-list, .grow-panel { margin-top: 24px; }
.grow-tabs { margin-top: 20px; }
.logo-strip { margin-top: 30px; }
.tt-logistics, .tt-foot { margin-top: 20px; }
.site-footer { padding-bottom: 22px; }

/* 4. The real estate line between the headline and the paragraph. */
.hero-lead {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.18;
  color: var(--hot);
  font-size: clamp(1.3rem, 2.5vw, 1.95rem);
  max-width: 22ch;
  margin: -6px 0 16px;
}

/* The real photograph in the first scroll, in the slot the invented
   "unanswered for 00:50" card used to hold. Asked for by Daksh, 2026-09-08.
   Warmed with the same gradient the share card uses so a photo shot under
   office fluorescents sits inside the cream and orange page instead of
   fighting it. */
.hero-photo {
  position: relative;
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  background: #3b1d0a;
  box-shadow: 0 26px 54px -30px rgba(88, 45, 20, .55),
              inset 0 0 0 1px rgba(255, 255, 255, .5);
}
.hero-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 880 / 1021;
  object-fit: cover;
  object-position: 50% 42%;
}
.hero-photo-warm {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(168deg, rgba(255, 187, 110, .22) 0%,
                              rgba(228, 87, 46, .10) 44%, rgba(59, 29, 10, .34) 100%);
  mix-blend-mode: multiply;
}
.hero-photo-tag {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px 7px;
  border-radius: 999px;
  background: rgba(27, 33, 68, .74);
  backdrop-filter: blur(4px);
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #fff4e4;
}
.hero-photo-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hot);
  box-shadow: 0 0 0 4px rgba(228, 87, 46, .22);
}
.hero-card-note { margin-top: 14px; }

/* Iffort's wordmark ships as pure black on transparent, so on the indigo
   footer it was invisible. Daksh, HQ 2026-09-08: "Iffort logo at the bottom
   change to white as it's not visible." brightness(0) flattens every pixel to
   black first, so the invert lands on a clean white wordmark whatever the
   source art does, and the alpha channel is untouched. Footer only: the same
   logo in the About block sits on sand, where black is correct. */
.site-footer .footer-logos img.is-iffort {
  filter: brightness(0) invert(1);
  opacity: .92;
}
@media (width<=900px) {
  /* On a phone the column is full width, so a portrait crop would push the
     form a screen further down. Show a landscape band instead. */
  .hero-photo img { aspect-ratio: 16 / 11; object-position: 46% 46%; }
}

/* 2. Privacy and terms, sitting under his footer, same band, same type.
      Kept in index.html rather than in the bundle so a redeploy on his side
      cannot take the legal links off the page. The bottom row is padded to
      the right to stay clear of the floating Dubai clock. */
.legal-bar {
  background: var(--indigo);
  color: var(--night-dim);
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 0 0 34px;
}
.legal-bar .wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: 40px; }
.legal-bar-rule { border-top: 1px solid var(--indigo-line); padding-top: 18px; }
.legal-bar-links { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.legal-bar a { color: var(--night-ink-2); text-decoration: none; border-bottom: 1px solid transparent; }
.legal-bar a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.legal-bar .legal-sep { opacity: .38; }
.legal-bar .legal-copy {
  display: block;
  margin-top: 12px;
  padding-right: 230px;
  opacity: .72;
  text-transform: none;
  letter-spacing: .04em;
}
@media (width<=860px) {
  .legal-bar .wrap { padding-inline: 20px; }
  /* No room to dodge the clock sideways on a phone, so leave room under it. */
  .legal-bar { padding-bottom: 68px; }
  .legal-bar .legal-copy { padding-right: 0; }
}