/**
 * ELEVEN28 — additions on top of the Paisana theme.
 * Everything here uses the theme's own variables and type classes.
 * The triad block (BUILD / EXPLORE / ENDURE) is preserved verbatim from v1.
 */

/* =====================
   TRIAD (kept as-is)
   ===================== */

.triad {
  --triad-ease: cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  isolation: isolate;
  background: #05080b;
  padding: clamp(96px, 14vh, 200px) clamp(20px, 3.5vw, 64px);
  min-height: 92svh;
  display: flex;
  align-items: center;
}

.triad__bgs {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.triad__bg {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s var(--triad-ease);
}

.triad__bg.is-active {
  opacity: 1;
}

.triad__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(5, 8, 11, 0.45);
}

.triad__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.58) brightness(0.72) contrast(1.06);
}

.triad__words {
  width: 100%;
}

.triad__word {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--font-primary);
  font-size: clamp(3em, 11vh, 7.5em);
  line-height: 1.18;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #a9a698;
  padding: 0.08em 0;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.7s var(--triad-ease), letter-spacing 0.9s var(--triad-ease);
}

.triad__word.is-active,
.triad__word:hover,
.triad__word:focus-visible {
  color: #e9e4d8;
  letter-spacing: 0.18em;
}

@media screen and (max-width: 767px) {
  .triad__word {
    font-size: clamp(2.4em, 8vh, 4em);
  }
}

/* =====================
   SHARED PAGE HELPERS (theme-styled)
   ===================== */

.e28-page {
  background: var(--color-1);
  color: var(--color-2);
}

/* The parallax blocks scale their media (GSAP scale 1.15); never let that
   create sideways scroll */
html,
body {
  overflow-x: clip;
}

@supports not (overflow: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

.e28-rule {
  border: 0;
  border-top: 1px solid #03090D26;
  margin: 0;
}

/* Simple page intro under the fixed pill header */
.e28-intro {
  padding: 11em 2em 4em;
}

@media screen and (max-width: 1024px) {
  .e28-intro {
    padding: 8em 0.75em 3em;
  }
}

.e28-intro .eyebrow {
  display: block;
  margin-bottom: 2.5em;
  opacity: 0.65;
}

/* Statement of Intent: "ELEVEN28 grows deliberately." is the calmest, most
   load-bearing line on the page — it should not render at half-opacity
   (the theme's default treatment for a block-card-content lead-in). */
.block-card-content__description.paragraph-l p:first-child {
  opacity: 1;
}

.block-card-content__description.paragraph-l p + p {
  margin-top: 0.7em;
}

/* =====================
   THE WORLD — twelve tiles
   ===================== */

.e28-world {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0.75em;
  padding: 0 2em 6em;
}

@media screen and (max-width: 1024px) {
  .e28-world {
    padding: 0 0.75em 4em;
  }
}

.e28-world__tile {
  position: relative;
  display: block;
  grid-column: span 6;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 0.375em;
  background: var(--color-2);
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

.e28-world__tile:nth-child(12n + 1) { grid-column: span 7; }
.e28-world__tile:nth-child(12n + 2) { grid-column: span 5; }
.e28-world__tile:nth-child(12n + 3) { grid-column: span 5; }
.e28-world__tile:nth-child(12n + 4) { grid-column: span 7; }
.e28-world__tile:nth-child(12n + 5) { grid-column: span 12; aspect-ratio: 21 / 9; }
.e28-world__tile:nth-child(12n + 8) { grid-column: span 7; }
.e28-world__tile:nth-child(12n + 9) { grid-column: span 5; }
.e28-world__tile:nth-child(12n + 10) { grid-column: span 5; }
.e28-world__tile:nth-child(12n + 11) { grid-column: span 7; }
.e28-world__tile:nth-child(12n + 12) { grid-column: span 12; aspect-ratio: 21 / 9; }

@media screen and (max-width: 767px) {
  .e28-world__tile,
  .e28-world__tile:nth-child(n) {
    grid-column: span 12;
    aspect-ratio: 16 / 11;
  }
}

.e28-world__tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.e28-world__tile::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(3, 9, 13, 0.55), rgba(3, 9, 13, 0.05) 55%);
}

.e28-world__tile:hover img,
.e28-world__tile:focus-visible img {
  transform: scale(1.04);
}

.e28-world__word {
  position: absolute;
  left: 1.25em;
  bottom: 1em;
  z-index: 1;
  font-family: var(--font-primary);
  font-size: 1.5em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-1);
}

/* Overlay: one image, one paragraph — cream, theme-styled */
.e28-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  border: none;
  padding: 0;
  background: var(--color-1);
  color: var(--color-2);
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.e28-overlay.is-shown {
  opacity: 1;
}

.e28-overlay::backdrop {
  background: transparent;
}

.e28-overlay__inner {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  width: 100%;
  height: 100%;
}

.e28-overlay__media {
  height: 100%;
  overflow: hidden;
}

.e28-overlay__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.e28-overlay__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5em;
  padding: 3em;
  overflow-y: auto;
}

.e28-overlay__body .paragraph-l p + p {
  margin-top: 0.8em;
}

.e28-overlay__close {
  position: absolute;
  top: 1.5em;
  right: 2em;
  font-size: 0.875em;
  font-weight: 500;
  letter-spacing: 0.04375em;
  text-transform: uppercase;
  font-family: var(--font-primary);
  color: var(--color-2);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5em;
}

.e28-overlay__nav {
  display: flex;
  gap: 2em;
}

.e28-overlay__nav button {
  font-size: 0.875em;
  font-weight: 500;
  letter-spacing: 0.04375em;
  text-transform: uppercase;
  font-family: var(--font-primary);
  color: var(--color-2);
  background: none;
  border: none;
  border-bottom: 1px solid #03090D40;
  padding: 0 0 0.4em;
  cursor: pointer;
}

@media screen and (max-width: 767px) {
  .e28-overlay__inner {
    grid-template-columns: 1fr;
    grid-template-rows: 46svh 1fr;
  }

  .e28-overlay__body {
    justify-content: flex-start;
    padding: 1.5em 0.75em;
  }
}

/* =====================
   LISTS (Quiet Standards, Journal)
   ===================== */

.e28-list {
  list-style: none;
  margin: 0;
  padding: 0 2em 6em;
  max-width: 56em;
}

@media screen and (max-width: 1024px) {
  .e28-list {
    padding: 0 0.75em 4em;
  }
}

.e28-list li {
  border-bottom: 1px solid #03090D26;
  padding: 1.6em 0;
}

.e28-list li:first-child {
  border-top: 1px solid #03090D26;
}

.e28-list .title-xs {
  text-transform: none;
  letter-spacing: 0.01em;
  line-height: 1.35;
}

/* Manifesto rhythm on Philosophy */
.e28-manifesto {
  display: grid;
  gap: 4em;
  padding: 2em 2em 6em;
  max-width: 60em;
}

@media screen and (max-width: 1024px) {
  .e28-manifesto {
    padding: 1em 0.75em 4em;
    gap: 3em;
  }
}

.e28-manifesto .title-m {
  text-transform: uppercase;
  max-width: 14em;
}

.e28-manifesto .paragraph-l {
  max-width: 34em;
}

.e28-manifesto .is-indent {
  margin-left: clamp(0px, 16vw, 320px);
}

/* =====================
   FORMS — status + success states on the theme's form-contact
   ===================== */

.form-contact .field .field-error {
  color: #b3432e;
  font-size: 0.7em;
  font-weight: 500;
  letter-spacing: 0.04375em;
  text-transform: uppercase;
  font-family: var(--font-primary);
  display: block;
  padding: 0.6em 0.7em 0;
}

.form-contact .field.is-invalid input,
.form-contact .field.is-invalid textarea {
  border-bottom-color: #b3432e;
}

/* ---------------------------------------------------------------------------
   Analytics consent notice — injected into every page by assets/js/analytics.js
   when the reader has not yet chosen. Deliberately quiet: a corner card, not a
   modal, never blocking content, dismissed for good by either answer. It is
   only ever shown when a choice is genuinely outstanding, so it cannot become
   the thing every visitor has to dismiss on every page.
   --------------------------------------------------------------------------- */
.e28-consent {
  position: fixed;
  z-index: 200;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 1.5rem;
  max-width: 34rem;
  margin-left: auto;
  padding: 1.5rem 1.75rem;
  background: var(--color-1, #F8F2E5);
  color: var(--color-2, #03090D);
  border: 1px solid rgba(3, 9, 13, 0.14);
  box-shadow: 0 18px 48px rgba(3, 9, 13, 0.16);
  opacity: 0;
  transform: translateY(0.75rem);
  transition: opacity .5s ease, transform .5s cubic-bezier(0.16, 1, 0.3, 1);
}

.e28-consent.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.e28-consent__text {
  margin: 0 0 1.25rem;
  font-family: var(--font-secondary);
  font-size: 0.875rem;
  line-height: 1.6;
}

.e28-consent__text a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color .3s ease;
}

.e28-consent__text a:hover {
  color: var(--color-3, #C2644F);
}

.e28-consent__actions {
  display: flex;
  flex-direction: row;
  gap: 1.75rem;
  align-items: center;
}

.e28-consent__btn {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: inherit;
  font-family: var(--font-primary);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04375em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  transition: color .3s ease, opacity .3s ease;
}

.e28-consent__btn:hover {
  color: var(--color-3, #C2644F);
}

.e28-consent__btn--quiet {
  border-bottom-color: transparent;
  opacity: 0.6;
}

.e28-consent__btn--quiet:hover {
  opacity: 1;
}

.e28-consent__btn:disabled {
  cursor: default;
  opacity: 0.4;
  border-bottom-color: transparent;
}

@media screen and (max-width: 640px) {
  .e28-consent {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    padding: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .e28-consent {
    transition: none;
  }
}

/* Data-protection notice at the point of collection, beside the submit button
   on /consideration/. Sentence case and secondary weight on purpose: it is
   reassurance, not another instruction competing with the form. */
.form-privacy {
  margin: 1.5em 0 0;
  max-width: 42em;
  font-family: var(--font-secondary);
  font-size: 0.875em;
  line-height: 1.55;
  color: var(--color-2);
  opacity: 0.65;
}

.form-privacy a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color .3s ease;
}

.form-privacy a:hover {
  color: var(--color-3, #C2644F);
  opacity: 1;
}

.form-status {
  font-size: 0.875em;
  font-family: var(--font-primary);
  letter-spacing: 0.04375em;
  text-transform: uppercase;
  color: var(--color-2);
  opacity: 0.75;
}

.form-status.is-error {
  color: #b3432e;
  opacity: 1;
}

form.is-sending .form-contact__button {
  opacity: 0.45;
  pointer-events: none;
}

.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Consideration confirmation: a quiet, flat dialog using the same paper, ink,
   typography and hairlines as the public site. */
html.has-consideration-modal {
  overflow: hidden;
}

.consideration-received {
  width: min(48em, calc(100vw - 3em));
  max-width: none;
  max-height: calc(100svh - 3em);
  margin: auto;
  padding: 0;
  color: var(--color-2);
  background: var(--color-1);
  border: 1px solid #03090D60;
  border-radius: 0.375em;
  overflow: auto;
}

.consideration-received::backdrop {
  background: #03090DCC;
}

.consideration-received__inner {
  position: relative;
  padding: 5em 5.25em 4.5em;
}

.consideration-received__close {
  position: absolute;
  top: 1.75em;
  right: 1.75em;
  padding: 0 0 0.35em;
  border: 0;
  border-bottom: 1px solid #03090D60;
  background: transparent;
  color: var(--color-2);
  font-family: var(--font-primary);
  font-size: 0.75em;
  font-weight: 500;
  letter-spacing: 0.04375em;
  text-transform: uppercase;
  cursor: pointer;
}

.consideration-received .title-m {
  margin-bottom: 0.75em;
}

.consideration-received__copy {
  max-width: 33em;
}

.consideration-received__copy p + p {
  margin-top: 1em;
}

/* blocks/editorial-section.css carries a comma-separated selector list whose
   last member is a BARE `strong`, so `strong { font-weight: 500 }` leaks to
   every <strong> on the site — a plain <strong> in this dialog rendered at the
   same weight as the surrounding copy. Re-assert the emphasis here rather than
   touching that rule, which other pages are laid out against. */
.consideration-received__copy strong {
  font-weight: 700;
}

.consideration-received__action {
  margin-top: 3em;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

@media screen and (max-width: 767px) {
  .consideration-received {
    width: calc(100vw - 1.5em);
    max-height: calc(100svh - 1.5em);
  }

  .consideration-received__inner {
    padding: 4.75em 1.5em 2.5em;
  }

  .consideration-received__close {
    top: 1.5em;
    right: 1.5em;
  }

}

/* Login panel */
.e28-login {
  min-height: 70vh;
  display: flex;
  align-items: center;
  padding: 10em 2em 6em;
}

.e28-login .form-contact {
  margin: 0 auto;
}

.e28-login .title-m {
  margin-bottom: 1.6em;
  text-transform: none;
  letter-spacing: 0.02em;
}

@media screen and (max-width: 1024px) {
  .e28-login {
    padding: 8em 0.75em 4em;
  }
}

/* Mobile only: the theme collapses the footer's bottom padding to 0.5em on
   small screens (vs. a dedicated 6.8125em on desktop), leaving the "This
   space is reserved for members." line pressed against the divider rule
   above the ELEVEN28 logotype. Give it a little more room to breathe. */
@media screen and (max-width: 1024px) {
  .footer {
    padding-bottom: 2.5em;
  }
}

/* Footer members column (replaces newsletter). The theme applies a large
   gap between block-footer__form's direct flex children, so Member Login
   and the reserved-for-members line are wrapped as one child, keeping
   Member Login the first item after the eyebrow — in line with Home in
   the Navigation column — with a small gap between the two locally. */
.e28-members-content {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
}

/* Small screens: the minimal step-down that keeps the longest display words
   ("conversations", "announcements.") on-screen at the theme's mobile size */
@media screen and (max-width: 479px) {
  .block-text-image__title.title-xl {
    font-size: 2em;
  }

  .e28-title-fit.title-xl {
    font-size: 1.9em;
  }
}

/* Small screens: the pill is too narrow for button text + wordmark */
@media screen and (max-width: 600px) {
  .block-header__book-btn {
    visibility: hidden;
  }
}

/* Menu image emblem: keep the 11/28 mark small, like the template ornament */
.header-image__mini img {
  max-height: 4.5em;
  width: auto;
  margin: 0 auto;
}

/* Inner (light) pages: solid ink pill so the light wordmark stays legible */
body.page-light .block-header:not(.is-menu-open) {
  background-color: #03090D;
}

/* Skip link (accessibility, unobtrusive) */
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 3000;
  padding: 0.75em 1.25em;
  background: var(--color-2);
  color: var(--color-1);
  font-size: 0.875em;
  font-family: var(--font-primary);
  letter-spacing: 0.04375em;
  text-transform: uppercase;
  transform: translateY(-300%);
}

.skip-link:focus {
  transform: none;
}

/* Reduced motion: quiet everything */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
    scroll-behavior: auto !important;
  }
}