/* Classic Keipi chapter: simple copy, documentary photograph, and one offset material. */
.about-story .story-keipi {
 background:var(--stone);
 color:var(--ink);
 padding-block:clamp(72px,8vw,118px);
 overflow:clip;
}
.story-keipi .keipi-layout {
 display:grid;
 grid-template-columns:minmax(0,.82fr) minmax(0,1.35fr);
 gap:clamp(48px,6.5vw,96px);
 align-items:center;
 max-width:1280px;
}
.story-keipi .keipi-paper { min-width:0; max-width:510px; }
.story-keipi .keipi-heading { margin-bottom:30px; }
.story-keipi .keipi-heading h2 { margin:0; font-size:clamp(44px,4.9vw,70px); color:var(--ink); }
.story-keipi .keipi-heading h2 span { display:block; white-space:nowrap; }
.story-keipi .keipi-paper p { margin-bottom:17px; line-height:1.58; }
.story-keipi .keipi-paper .hospitality-note { font:inherit; color:inherit; }
.story-keipi .keipi-paper .text-link { margin:8px 0 0; }
.story-keipi .interior-photo { min-width:0; margin:0; transform:none; isolation:isolate; }
.story-keipi .interior-photo::before {
 display:block;
 inset:12px -16px -16px 16px;
 background:var(--olive) url('/assets/partner-olive-recycled.webp') center / cover;
 transform:rotate(1deg);
 clip-path:var(--paper-cut);
}
.story-keipi .photo-window {
 position:relative;
 aspect-ratio:1.5;
 clip-path:var(--paper-cut);
 mask-image:none;
 box-shadow:0 10px 24px #27252224;
}
.story-keipi .photo { width:100%; height:100%; object-fit:cover; object-position:center; }
@media(max-width:1000px) {
 .about-story .story-keipi { padding-block:64px; }
 .story-keipi .keipi-layout { grid-template-columns:1fr; gap:46px; max-width:760px; }
 .story-keipi .keipi-paper { max-width:620px; }
 .story-keipi .interior-photo { width:94%; justify-self:center; }
}
@media(max-width:760px) {
 .about-story .story-keipi { padding-block:52px; }
 .story-keipi .keipi-layout { gap:36px; }
 .story-keipi .keipi-heading { margin-bottom:22px; }
 .story-keipi .keipi-heading h2 { font-size:clamp(38px,12vw,54px); }
 .story-keipi .interior-photo { width:calc(100% - 10px); }
 .story-keipi .interior-photo::before { inset:8px -10px -11px 10px; transform:rotate(.8deg); }
}
.about-story .story-opening { padding-top:180px; }
.story-opening > .wrap { display:grid; grid-template-columns:1.15fr .85fr; gap:10%; align-items:start; }
.story-opening h1 { font-size:clamp(50px,6vw,86px); }
.story-beginning { margin-top:65px; }
.story-beginning h2 { font-size:clamp(36px,3.9vw,55px); }
.story-archive { margin-top:145px; }
.archive-frame .photo-window { aspect-ratio:6/7; }
.archive-frame .photo { height:100%; object-fit:cover; object-position:bottom; }
.interior-foundation { display:flex; align-items:center; gap:20px; margin:28px 0 36px; font-size:16px; }
.interior-foundation a { display:block; width:190px; background:var(--navy); padding:15px; transform:rotate(-1deg); box-shadow:3px 5px 0 var(--stone); clip-path:var(--paper-cut); }
.interior-foundation img { display:block; width:100%; height:auto; }
.about-story .story-turn { background:var(--navy); color:var(--white); }
.story-turn > .wrap { display:grid; grid-template-columns:1.15fr .85fr; gap:10%; align-items:center; }
.turn-statement { font-family:var(--font-display); font-size:32px; line-height:1.25; padding-block:20px; }
.turn-statement em { color:var(--gold-light); font-style:normal; }
.story-turn .text-link { --link-backer:var(--cream); --link-ink:var(--navy); }
.story-collage .interior-photo:first-child { width:88%; margin-left:auto; }
.story-collage .interior-photo + .interior-photo { width:90%; margin-top:45px; margin-left:-12%; }
.story-collage > p { font:32px/1.2 var(--font-display); color:var(--gold-light); margin-top:60px; transform:rotate(-2deg); }
.hospitality-note { font:25px/1.35 var(--font-display); color:var(--olive); }
.story-teaching { background:var(--white); }
.teaching-composition { display:grid; grid-template-columns:1fr 1.1fr; gap:9%; align-items:center; }
.teaching-composition .interior-photo { margin-top:-90px; }
.story-teaching h2 { margin-bottom:45px; }
.about-story .story-invitation { border-top:1px solid var(--stone); }
@media(max-width:760px) {
 .about-story .story-opening { padding-top:130px; }
 .story-opening > .wrap,.story-turn > .wrap,.teaching-composition { grid-template-columns:1fr; gap:50px; }
 .story-archive { margin:0 auto; width:85%; max-width:380px; }
 .story-collage { padding-left:8%; }
 .story-collage > p { font-size:28px; }
 .teaching-composition .interior-photo { margin:0; }
 .interior-foundation { gap:14px; }
 .interior-foundation a { width:170px; }
 .turn-statement { font-size:28px; }
}
@media(max-width:760px) {
 .story-collage .interior-photo + .interior-photo { margin-left:0; }
}
.story-opening > .wrap { grid-template-columns:1.1fr 1fr; gap:7%; }
.story-archive { margin-top:165px; }
.interior-foundation a { transition:transform 180ms ease,box-shadow 180ms ease; }
@media(prefers-reduced-motion:no-preference) {
 .interior-foundation a:is(:hover,:focus-visible) { transform:rotate(1deg); box-shadow:5px 7px 0 var(--stone); }
}
.story-collage .interior-photo:first-child { width:100%; }
.story-collage .interior-photo + .interior-photo { width:96%; margin-top:60px; margin-left:-8%; }
.story-collage .interior-photo::before { bottom:38px; }
.story-collage figcaption { position:relative; display:table; margin:-8px 18px 0 auto; padding:12px 20px; background:var(--cream); color:var(--navy); font:29px/1.2 var(--font-display); box-shadow:3px 4px 0 var(--gold); transform:rotate(-2deg); }
.story-teaching { background:var(--cream); }
.story-teaching .chapter-label { font:25px/1.3 var(--font-display); color:var(--olive); max-width:24ch; }
.teaching-composition .interior-photo { margin-top:-60px; }
.teaching-composition .interior-photo::before { bottom:105px; }
.teaching-note { position:relative; margin:-4px 0 0 12%; padding:18px 22px; background:var(--gold-light); color:var(--ink); font-size:17px; line-height:1.4; box-shadow:4px 5px 0 var(--stone); transform:rotate(-2deg); }
.teaching-note strong { display:block; font:24px/1.2 var(--font-display); margin-bottom:8px; }
.about-story .story-invitation { border:0; }
@media(max-width:760px) {
 .story-opening > .wrap { grid-template-columns:1fr; row-gap:50px; }
 .story-archive { margin:0 auto; }
 .story-collage { padding-left:0; }
 .story-collage .interior-photo + .interior-photo { margin-left:0; }
 .teaching-composition .interior-photo { margin-top:0; }
 .teaching-note { margin-left:5%; }
}
/* Keep the keyboard outline outside the institutional material face. */
.interior-foundation a { clip-path:none; border-radius:1% 3% 2% 1%; }
/* Final owner review: legible institutional mark and paired contrasting labels. */
.interior-foundation a { width:245px; flex-shrink:1; }
.interior-foundation > span { flex:none; }
.story-collage figcaption { background:var(--white); box-shadow:3px 4px 0 var(--red); border-radius:1% 3% 2% 1%; }
.story-teaching { background:var(--navy); color:var(--white); }
.story-teaching .text-link { --link-backer:var(--gold-light); --link-ink:var(--ink); }
.teaching-composition .interior-photo::before { bottom:35px; }
.teaching-note { margin:-4px 0 0 8%; box-shadow:none; background:var(--cream); font-size:23px; }
.story-invitation .closing-title { min-height:2.8em; width:6em; }
.story-invitation .interior-hand { left:3.2em; top:.75em; width:2.15em; }
@media(max-width:760px) {
 .interior-foundation a { width:210px; padding:12px; }
 .story-invitation .closing-title { font-size:clamp(42px,8.5vw,68px); }
}
/* Owner polish: Home's institutional paper silhouette and rotation, without shadow. */
.interior-foundation a { position:relative; isolation:isolate; width:265px; max-width:100%; padding:18px 22px; background:transparent; border-radius:0; clip-path:none; transform:rotate(-.5deg); box-shadow:none; filter:none; transition:transform .18s ease; }
.interior-foundation a::before { content:''; position:absolute; inset:0; z-index:-1; background:var(--navy); clip-path:var(--paper-cut); }
.interior-foundation a:is(:hover,:focus-visible) { box-shadow:none; }
@media(prefers-reduced-motion:no-preference) { .interior-foundation a:is(:hover,:focus-visible) { transform:rotate(1deg); } }
.about-story .story-turn { padding-block:72px; }
.turn-statement { padding-block:8px; }
.story-collage .interior-photo + .interior-photo { margin-top:32px; }
.story-collage figcaption { padding:10px 18px; font-size:24px; background:var(--cream); box-shadow:none; border-radius:0; filter:drop-shadow(2px 3px 0 var(--stone)); clip-path:var(--paper-cut); }
@media(max-width:760px) {
 .interior-foundation a { width:220px; padding:14px 18px; }
 .about-story .story-turn { padding-block:58px; }
}
/* Final delta: fit the homecoming narrative and photographs into one chapter. */
.story-turn > .wrap { grid-template-columns:1.5fr 1fr; gap:7%; }
.story-turn .interior-prose { max-width:none; }
.about-story .story-turn { padding-block:56px; }
.story-turn h2 { font-size:clamp(40px,4.2vw,60px); margin-bottom:25px; }
.story-turn .interior-prose > p { margin-bottom:15px; line-height:1.48; }
.story-turn .interior-prose > .turn-statement { font-size:29px; line-height:1.2; padding-block:6px; }
.story-turn .text-link { margin-top:0; }
.story-collage .interior-photo + .interior-photo { margin-top:25px; margin-left:-4%; }
@media(max-width:760px) {
 .story-turn > .wrap { grid-template-columns:1fr; gap:42px; }
 .story-collage .interior-photo + .interior-photo { margin-left:0; }
}

/* Give narrow desktop windows the same deliberate reading order as phones.
   Row spacing is fixed: percentage grid gaps escape auto-height chapters. */
@media(min-width:1001px) {
 .story-invitation > .wrap > :first-child { container-type:inline-size; min-width:0; }
 .story-invitation .closing-title { width:100%; max-width:none; font-size:18cqw; min-height:3.4em; margin:0; }
 .story-invitation .closing-title .interior-hand { left:auto; right:0; top:.6em; width:2.45em; }
}
@media(max-width:1000px) {
 .story-opening > .wrap { grid-template-columns:1fr; gap:50px; }
 .story-archive { margin:0 auto; width:85%; max-width:380px; }
 .story-turn > .wrap { grid-template-columns:1fr; gap:42px; }
 .story-collage { padding-left:0; max-width:640px; margin-inline:auto; }
 .story-collage .interior-photo + .interior-photo { margin-left:0; }
 .teaching-composition { grid-template-columns:1fr; gap:48px; }
 .teaching-composition .interior-photo { margin-top:0; }
 .about-story .story-opening { padding-bottom:80px; }
 .story-invitation > .wrap { grid-template-columns:1fr; gap:36px; container-type:inline-size; }
 .story-invitation .closing-title { width:100%; max-width:none; font-size:18cqw; min-height:3.4em; margin:0; }
 .story-invitation .closing-title .interior-hand { left:auto; right:0; top:.6em; width:2.45em; }
 .story-invitation .closing-response { max-width:38ch; }
}

/* Owner-selected photo and caption materials. */
.about-story .story-archive .interior-photo::before {
  background:var(--olive) url('/assets/partner-olive-recycled.webp') center / cover;
}
.about-story .story-collage .interior-photo:first-child::before {
  background:var(--gold) url('/assets/partner-gold-matte.webp') center / cover;
}
.about-story .story-collage .interior-photo + .interior-photo::before {
  background:var(--olive) url('/assets/partner-olive-matte.webp') center / cover;
}
.about-story .story-teaching .interior-photo::before {
  background:var(--gold) url('/assets/partner-gold-matte.webp') center / cover;
}
.about-story .teaching-note {
  isolation:isolate;
  width:fit-content;
  max-width:88%;
  padding:14px 20px;
  background:transparent;
  color:var(--ink);
  font-family:var(--font-display);
  font-size:clamp(22px,2.1vw,30px);
  font-weight:750;
  font-optical-sizing:none;
  font-variation-settings:"wght" 750,"opsz" 76;
  letter-spacing:-.035em;
  line-height:1.05;
  filter:none;
}
.about-story .teaching-note::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  clip-path:var(--paper-cut);
  background:var(--cream) url('/assets/partner-cream-matte.webp') center / cover;
}
.about-story .teaching-note::after {
  content:'';
  position:absolute;
  inset:0;
  z-index:-2;
  transform:translate(3px,5px);
  clip-path:var(--paper-cut);
  background:var(--stone) url('/assets/partner-ash-matte.webp') center / cover;
}
