/* 2026-09-15 refinement → compact cases, editorial about story, curtain footer */

/* Vertical evidence should read as a vertical artefact, not float in a landscape frame. */
.case-live-preview:has(.case-live-screen[data-fit="phone"]) {
  justify-self:center;
  width:min(100%,430px);
  height:min(72vh,620px);
  min-height:520px;
  border-radius:var(--radius-club-panel)}

.case-live-preview:has(.case-live-screen[data-fit="phone"])::before {
  background:radial-gradient(circle at 50% 28%,rgb(99 128 255 / .32),transparent 38%),var(--studio-ink)}

.case-live-screen[data-fit="phone"] {
  align-self:center;
  width:min(100%,330px);
  border:1px solid rgb(255 255 255 / .13);
  border-radius:var(--radius-club-control);
  background:rgb(255 255 255 / .035)}

.case-live-screen[data-fit="phone"] img {
  inset:3%;
  width:94%!important;
  height:94%!important;
  border-radius:var(--radius-club-control);
  box-shadow:0 24px 60px rgb(0 0 0 / .32)}

/* Main-page about chapter → three sticky leaves, no personnel directory. */
.about-story {
  position:relative;
  z-index:2;
  padding:var(--studio-section) var(--studio-gutter) clamp(104px,11vw,176px);
  overflow:clip;
  background:var(--studio-ink);
  color:var(--studio-white)}

.about-story-head {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,.45fr);
  gap:var(--space-8);
  align-items:end;
  width:min(100%,var(--studio-max));
  margin:0 auto var(--space-12)}

.about-story-head .eyebrow {grid-column:1/-1;color:var(--club-muted-light)}
.about-story-head h2 {
  margin:0;
  color:var(--studio-white);
  font-size:var(--studio-heading);
  line-height:.9;
  letter-spacing:-.065em}
.about-story-head h2 span {color:var(--studio-blue)}
.about-story-head>p:last-child {
  max-width:430px;
  margin:0;
  color:var(--club-muted-light);
  font-size:clamp(17px,1.5vw,22px);
  line-height:1.4}

.about-stack {
  width:min(100%,var(--studio-max));
  margin:0 auto}

.about-leaf {
  position:sticky;
  top:96px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(250px,.42fr);
  grid-template-rows:auto 1fr auto;
  gap:var(--space-8);
  min-height:58svh;
  margin:0 0 14svh;
  padding:clamp(28px,4vw,58px);
  overflow:hidden;
  border:1px solid rgb(255 255 255 / .13);
  border-radius:var(--studio-radius);
  background:color-mix(in srgb,var(--studio-ink) 86%,var(--studio-blue));
  color:var(--studio-white);
  box-shadow:0 32px 80px rgb(0 0 0 / .28)}

.about-leaf:nth-child(1) {z-index:1}
.about-leaf:nth-child(2) {
  z-index:2;
  top:112px;
  background:var(--studio-blue)}

.about-leaf:nth-child(3) {
  z-index:3;
  top:128px;
  margin-bottom:0;
  border-color:var(--studio-line);
  background:var(--studio-white);
  color:var(--studio-ink)}

.about-leaf-index {
  grid-column:1/-1;
  display:flex;
  justify-content:space-between;
  color:currentColor;
  font-size:10px;
  font-weight:650;
  letter-spacing:.12em;
  opacity:.62}

.about-leaf h3 {
  grid-column:1;
  grid-row:2;
  align-self:center;
  max-width:880px;
  margin:0;
  font-size:clamp(54px,7.2vw,112px);
  font-weight:620;
  line-height:.86;
  letter-spacing:-.07em}
.about-leaf h3 span {color:color-mix(in srgb,var(--studio-blue) 78%,var(--studio-white))}
.about-leaf:nth-child(2) h3 span {color:var(--club-acid)}
.about-leaf:nth-child(3) h3 span {color:var(--studio-blue)}

.about-leaf-copy {
  grid-column:2;
  grid-row:2;
  align-self:end;
  max-width:370px;
  margin:0;
  color:currentColor;
  font-size:clamp(15px,1.25vw,18px);
  line-height:1.5;
  opacity:.66}

.about-leaf-mark {
  position:absolute;
  right:-5%;
  bottom:-24%;
  width:min(45vw,620px);
  height:min(45vw,620px);
  border:1px solid currentColor;
  border-radius:50%;
  opacity:.08}
.about-leaf-mark::before,.about-leaf-mark::after {
  content:'';
  position:absolute;
  inset:16%;
  border:1px solid currentColor;
  border-radius:50%}
.about-leaf-mark::after {inset:33%}

.about-people {
  grid-column:2;
  grid-row:3;
  align-self:end;
  display:flex;
  justify-content:flex-end;
  padding-right:var(--space-4)}
.about-people img {
  width:clamp(48px,5.5vw,78px);
  height:auto;
  aspect-ratio:1;
  margin-left:-12px;
  border:3px solid var(--studio-white);
  border-radius:50%;
  background:var(--studio-paper);
  object-fit:cover}
.about-people img:nth-child(3) {object-position:50% 22%}
.about-people img:nth-child(4) {object-position:50% 30%}

.about-page-link {
  position:absolute;
  inset:0;
  z-index:3;
  border-radius:inherit}
.about-page-link:focus-visible {outline:4px solid var(--studio-blue);outline-offset:-8px}
.about-link-label {
  grid-column:1;
  grid-row:3;
  align-self:end;
  display:inline-flex;
  gap:var(--space-3);
  align-items:center;
  width:max-content;
  font-size:clamp(16px,1.4vw,20px);
  font-weight:650}

/* The contact scene reads as the last screen; the footer is revealed underneath it. */
.closing-curtain {
  position:relative;
  z-index:3;
  background:var(--studio-white)}

.closing-section {
  position:relative;
  z-index:3;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  box-shadow:0 38px 80px rgb(0 0 0 / .28)}

.site-footer {
  position:sticky;
  bottom:0;
  z-index:1;
  min-height:clamp(300px,36svh,360px);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:var(--studio-white)}

@media(max-width:900px) {
  .case-live-preview:has(.case-live-screen[data-fit="phone"]) {
    width:min(82vw,390px);
    height:min(68svh,570px);
    min-height:440px;
    margin-right:auto;
    margin-left:auto}
  .case-live-screen[data-fit="phone"] {width:min(100%,300px)}
}

@media(max-width:767px) {
  .about-story {padding:92px 18px 104px}
  .about-story-head {display:block;margin-bottom:48px}
  .about-story-head h2 {margin-top:18px;font-size:clamp(58px,17vw,76px)}
  .about-story-head>p:last-child {margin-top:22px;font-size:15px}
  .about-leaf {
    top:76px;
    display:flex;
    flex-direction:column;
    min-height:62svh;
    margin-bottom:10svh;
    padding:27px 23px;
    border-radius:28px}
  .about-leaf:nth-child(2) {top:88px}
  .about-leaf:nth-child(3) {top:100px}
  .about-leaf h3 {margin:auto 0;font-size:clamp(50px,14vw,66px)}
  .about-leaf-copy {font-size:14px}
  .about-people {align-self:flex-start;padding:0 0 0 10px}
  .about-people img {width:54px;margin-left:-10px;border-width:2px}
  .about-link-label {font-size:16px}
  .closing-section {min-height:92svh}
  .site-footer {min-height:clamp(360px,44svh,390px);padding-bottom:22px}
}

@media(prefers-reduced-motion:reduce) {
  .about-leaf {position:relative;top:auto!important;margin-bottom:16px}
  .site-footer {position:relative;bottom:auto}}