:root {
  color-scheme: light;
  --page: #f4f2ee;
  --surface: rgba(255, 255, 255, 0.72);
  --ink: #161a22;
  --muted: #697080;
  --line: rgba(22, 26, 34, 0.14);
  --accent: #5c60c9;
  --shadow: 0 24px 70px rgba(30, 34, 45, 0.10);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  min-height: 100svh;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 56% 38%, rgba(255, 255, 255, 0.92), transparent 45%),
    linear-gradient(145deg, #ebe8e2, var(--page) 52%, #e4e6ec);
  color: var(--ink);
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

button {
  font: inherit;
}

.site-shell {
  width: min(94vw, 1460px);
  min-height: 100svh;
  margin: 0 auto;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}

.content-layout {
  min-height: 0;
  display: grid;
  grid-template-columns:
    minmax(220px, clamp(240px, 25vw, 390px))
    minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 4vw, 72px);
  padding:
    clamp(18px, 3vh, 34px)
    0
    clamp(10px, 1.8vh, 20px);
}

.site-header {
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-logo {
  display: block;
  width: min(100%, clamp(235px, 24vw, 385px));
  max-height: min(68svh, 620px);
  object-fit: contain;
  filter: drop-shadow(0 18px 32px rgba(30, 34, 45, 0.12));
}

.right-column {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto;
  align-content: center;
  gap: clamp(8px, 1.3vh, 14px);
}

.banner-frame {
  width: min(100%, 920px);
  max-height: clamp(190px, 39vh, 365px);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: clamp(12px, 1.2vw, 18px);
  background: rgba(255, 255, 255, 0.45);
  box-shadow: 0 16px 42px rgba(30, 34, 45, 0.09);
}

.banner-image {
  display: block;
  width: 100%;
  height: 100%;
  max-height: clamp(190px, 39vh, 365px);
  object-fit: cover;
}

.quote-stage {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: clamp(8px, 1.2vh, 14px);
}

.quote-card {
  width: 100%;
  min-height: clamp(160px, 25vh, 235px);
  margin: 0;
  padding:
    clamp(22px, 3.8vh, 42px)
    clamp(28px, 4.5vw, 60px);
  display: grid;
  align-content: center;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: clamp(18px, 1.8vw, 28px);
  background: var(--surface);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.quote-card.is-changing {
  animation: quote-change 340ms ease;
}

.quote-lines {
  display: grid;
  gap: clamp(0.32em, 0.7vh, 0.58em);
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-size: clamp(
    1.45rem,
    min(2.55vw, 4.4vh),
    3rem
  );
  font-weight: 400;
  line-height: 1.1;
  text-wrap: balance;
}

.quote-line {
  display: block;
}

.quote-attribution {
  margin-top: clamp(12px, 1.9vh, 20px);
  color: var(--muted);
  font-size: clamp(0.74rem, min(1.1vw, 1.7vh), 0.96rem);
  letter-spacing: 0.025em;
}

.quote-attribution cite {
  font-style: italic;
}

.quote-attribution cite:not(:empty)::before {
  content: ", ";
}

.quote-controls {
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.8vw, 12px);
}

.quote-controls button {
  min-width: clamp(42px, 3vw, 48px);
  min-height: clamp(38px, 4.8vh, 46px);
  padding: 0 clamp(14px, 1.3vw, 18px);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  color: var(--ink);
  cursor: pointer;
  transition:
    transform 150ms ease,
    border-color 150ms ease,
    background 150ms ease;
}

.quote-controls button:hover {
  transform: translateY(-1px);
  border-color: rgba(92, 96, 201, 0.4);
  background: rgba(255, 255, 255, 0.92);
}

.quote-controls button:focus-visible {
  outline: 3px solid rgba(92, 96, 201, 0.3);
  outline-offset: 3px;
}

.site-footer {
  padding:
    clamp(6px, 0.8vh, 12px)
    0
    clamp(12px, 1.8vh, 24px);
  color: var(--muted);
  text-align: center;
  font-size: clamp(0.66rem, min(0.8vw, 1.4vh), 0.78rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

@keyframes quote-change {
  from {
    opacity: 0.35;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*
  Shorter desktop windows:
  preserve the two-column layout, but compress the artwork and card.
*/
@media (min-width: 981px) and (max-height: 820px) {
  .site-shell {
    width: min(95vw, 1500px);
  }

  .content-layout {
    gap: clamp(24px, 3.2vw, 54px);
    padding-top: 14px;
    padding-bottom: 8px;
  }

  .site-logo {
    width: min(100%, clamp(220px, 22vw, 345px));
    max-height: 61svh;
  }

  .banner-frame,
  .banner-image {
    max-height: 31vh;
  }

  .quote-card {
    min-height: 19vh;
    padding-top: 18px;
    padding-bottom: 18px;
  }

  .quote-lines {
    font-size: clamp(1.35rem, min(2.3vw, 3.8vh), 2.55rem);
  }

  .quote-attribution {
    margin-top: 10px;
  }

  .quote-controls button {
    min-height: 38px;
  }
}

/*
  Very short desktop windows:
  allow normal page scrolling rather than crushing the content excessively.
*/
@media (min-width: 981px) and (max-height: 650px) {
  .site-shell {
    min-height: 650px;
  }

  .content-layout {
    align-items: start;
  }
}

@media (max-width: 980px) {
  body {
    min-height: 100%;
  }

  .site-shell {
    width: min(100% - 28px, 900px);
    min-height: 100svh;
  }

  .content-layout {
    grid-template-columns: 1fr;
    align-content: start;
    gap: 24px;
    padding-top: 28px;
  }

  .site-logo {
    width: min(270px, 58vw);
    max-height: 240px;
  }

  .right-column {
    gap: 14px;
  }

  .banner-frame,
  .banner-image {
    width: 100%;
    max-height: none;
  }

  .banner-frame {
    border-radius: 16px;
  }

  .banner-image {
    height: auto;
    object-fit: contain;
  }

  .quote-card {
    min-height: 280px;
  }

  .quote-lines {
    font-size: clamp(1.7rem, 6vw, 3rem);
  }
}

@media (max-width: 540px) {
  .site-shell {
    width: min(100% - 16px, 900px);
  }

  .content-layout {
    gap: 18px;
    padding-top: 16px;
  }

  .site-logo {
    width: min(220px, 58vw);
  }

  .right-column,
  .quote-stage {
    gap: 12px;
  }

  .banner-frame {
    border-radius: 12px;
  }

  .quote-card {
    min-height: 300px;
    padding: 30px 22px;
    border-radius: 22px;
  }

  .quote-lines {
    font-size: clamp(1.55rem, 7.6vw, 2.5rem);
  }

  .quote-attribution {
    margin-top: 16px;
  }

  .site-footer {
    padding-bottom: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/*
  Eidolon Protocol v0.5 override
  Append this block to the end of style.css, or replace the matching rules.
*/
@media (min-width: 981px) {
  .site-shell {
    width: min(70vw, 1220px);
  }

  .content-layout {
    grid-template-columns:
      minmax(190px, clamp(210px, 20vw, 320px))
      minmax(0, 1fr);
    gap: clamp(24px, 3vw, 52px);
  }

  .site-logo {
    width: min(100%, clamp(210px, 19vw, 315px));
  }

  .banner-frame {
    width: 100%;
    max-height: none;
  }

  .banner-image {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
  }
}

/*
  Avoid making the composition too narrow on medium desktop/laptop widths.
*/
@media (min-width: 981px) and (max-width: 1400px) {
  .site-shell {
    width: min(78vw, 1120px);
  }
}

/*
  Eidolon Protocol v0.6 override
  Append this block to the end of style.css.
*/

/*
  The right column is content-sized:
  natural banner height + fixed gap + quote card + controls.
*/
.right-column {
  align-content: center;
  gap: 14px;
}

.banner-frame {
  max-height: none;
}

.banner-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
}

/*
  The quote card no longer consumes a percentage of viewport height.
  It stays at least 160px tall and grows only when its content requires it.
*/
.quote-card {
  min-height: 160px;
  height: auto;
}

/*
  Keep spacing predictable even when banner dimensions vary.
*/
.quote-stage {
  gap: 14px;
}

@media (max-width: 980px) {
  .right-column,
  .quote-stage {
    gap: 14px;
  }

  .quote-card {
    min-height: 220px;
  }
}

@media (max-width: 540px) {
  .right-column,
  .quote-stage {
    gap: 12px;
  }

  .quote-card {
    min-height: 260px;
  }
}