.about-page .nav .wordmark{color:var(--wine)}
.about-hero{background:var(--rose);padding:70px 7% 65px;border-bottom:1px solid var(--line);overflow:hidden}
.about-hero-inner{max-width:1320px;margin:auto;display:grid;grid-template-columns:1.3fr 1fr;gap:9%;align-items:center}
.about-hero h1{font-size:clamp(66px,7.5vw,112px);letter-spacing:-3.8px;line-height:1.02;margin:0 0 27px}
.about-hero h1 em{color:var(--red)}
.about-lead{max-width:510px;font-size:18px;line-height:1.8;margin-bottom:28px}
.about-actions{display:flex;align-items:center;gap:30px;flex-wrap:wrap}
.about-actions .text-link{font-size:14px;gap:16px}
.jeff-portrait{margin:0;position:relative;max-width:425px;justify-self:center;transform:rotate(3deg);animation:portrait-arrival 1s .1s both}
.jeff-portrait img{display:block;width:100%;height:auto;border:12px solid var(--mustard);outline:1px solid var(--wine);filter:drop-shadow(10px 14px 0 #49333120)}
.jeff-portrait figcaption{position:relative;background:var(--cream);border:1px solid var(--wine);margin:-15px 12px 0;padding:17px 20px;display:flex;justify-content:space-between;gap:20px;font-size:12px;font-weight:600;letter-spacing:1.5px;transform:rotate(-3deg)}
.jeff-portrait figcaption span:last-child{text-align:right}
.about-facts{max-width:1320px;margin:55px auto 0;padding-top:28px;border-top:1px solid #49333145;display:flex;justify-content:space-between;gap:25px;font-size:13px;letter-spacing:.5px}
.about-facts strong{font-family:var(--serif);font-size:23px;font-weight:400;margin-right:10px}
.about-intro{text-align:center;max-width:940px;padding-bottom:70px}
.about-intro h2{font-size:clamp(39px,4.8vw,65px)}
.about-intro>p:last-child{max-width:640px;margin:0 auto;font-size:18px;line-height:1.8}
.story-section{display:grid;grid-template-columns:1.08fr 1fr;gap:9%;align-items:start;padding-top:0;padding-bottom:95px}
.story-world{position:sticky;top:35px;margin:0;border:1px solid var(--wine);background:var(--teal);box-shadow:9px 9px 0 #e6ddc5}
.story-frames{display:grid;position:relative;overflow:hidden}
.story-frames>.living-scene{grid-area:1/1;aspect-ratio:1/1;min-width:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .8s,visibility 0s .8s}
.story-frames>.is-current{opacity:1;visibility:visible;pointer-events:auto;z-index:1;transition:opacity .8s,visibility 0s}
.story-world figcaption{display:flex;align-items:center;justify-content:space-between;gap:20px;background:var(--cream);padding:20px 22px;font-size:12px;letter-spacing:1.3px;line-height:1.6}
.story-world figcaption>span:last-child{font-family:var(--serif);font-size:25px;color:var(--red);letter-spacing:0;white-space:nowrap}
.story-chapter{position:relative;padding:0 0 60px 34px;border-left:1px solid #49333130;scroll-margin-top:60px}
.story-chapter:last-child{padding-bottom:0;border-color:transparent}
.story-chapter::before{content:'';position:absolute;left:-5px;top:6px;width:9px;height:9px;border:1px solid var(--wine);border-radius:50%;background:var(--cream);transition:background .3s,box-shadow .3s}
.story-chapter.is-reading::before{background:var(--red);box-shadow:0 0 0 5px var(--cream)}
.story-chapter .eyebrow{margin-bottom:17px;color:var(--red);font-size:12px;letter-spacing:1.5px}
.story-chapter h3{font-size:39px;line-height:1.15;letter-spacing:-.8px;margin-bottom:22px}
.story-chapter p:not(.eyebrow){font-size:17px;line-height:1.85;margin-bottom:20px}
.story-chapter blockquote{margin:27px 0 0;padding:22px 25px;background:var(--mustard);border:1px solid var(--wine);font-family:var(--serif);font-size:27px;line-height:1.35;transform:rotate(-1deg)}
.story-chapter blockquote cite{display:block;font:500 12px var(--sans);font-style:normal;letter-spacing:1.3px;margin-top:15px}
.principle-section{background:var(--teal);color:var(--cream);border-block:1px solid var(--wine)}
.principle-section .section{padding-block:90px}
.principle-heading{display:grid;grid-template-columns:1fr 1fr;gap:9%;align-items:end;margin-bottom:50px}
.principle-heading h2{margin:0}.principle-heading h2 em{color:var(--mustard)}
.principle-heading>p{font-size:17px;line-height:1.8;max-width:420px;margin:0 0 6px;color:#e8e7d9}
.principle-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:9%;list-style:none;padding:0;margin:0;counter-reset:principles}
.principle-grid li{padding:28px 0;display:grid;grid-template-columns:40px 1fr;gap:18px;border-top:1px solid #f8f2df40;counter-increment:principles}
.principle-grid li::before{content:'0' counter(principles);font:27px var(--serif);color:var(--mustard)}
.principle-grid h3{font-size:27px;line-height:1.2;margin:0 0 11px}
.principle-grid p{font-size:16px;line-height:1.8;margin:0;color:#e8e7d9}
.builder-section{display:grid;grid-template-columns:1fr 1fr;gap:9%;align-items:center}
.builder-copy h2{font-size:clamp(38px,4.2vw,60px)}
.builder-copy>p:not(.eyebrow){font-size:17px;line-height:1.85}
.builder-note{background:var(--mustard);border:1px solid var(--wine);padding:40px 38px;box-shadow:9px 9px 0 #4933311a;transform:rotate(1deg)}
.builder-note .eyebrow{margin-bottom:24px}
.builder-note h3{font-size:39px;line-height:1.1;margin-bottom:28px}
.builder-note ul{list-style:none;padding:0;margin:0 0 28px}
.builder-note li{border-top:1px solid var(--line);padding:14px 0;font-size:16px}
.builder-note .text-link{width:100%;justify-content:space-between}
.about-closing .closing-content{max-width:900px;margin:auto;padding-block:110px}
.about-closing .closing-content>p:not(.eyebrow){font-size:18px;line-height:1.8;max-width:530px;margin:0 auto 28px}
.about-closing .closing-content .text-link{margin-left:26px}
.about-page .nav a[aria-current=page]{border-bottom:1px solid var(--red)}
.motion-paused .jeff-portrait{animation:none}.motion-paused .story-frames>.living-scene{transition:none}
@keyframes portrait-arrival{from{opacity:0;transform:translateY(20px) rotate(0)}to{opacity:1;transform:translateY(0) rotate(3deg)}}
@media(max-width:1050px){.about-hero-inner{gap:5%;grid-template-columns:1.2fr 1fr}.about-hero h1{font-size:77px}.about-lead{font-size:17px}.story-section{gap:6%}.story-chapter{padding-left:25px}.story-chapter h3{font-size:34px}.jeff-portrait figcaption{font-size:12px;letter-spacing:.5px;padding:15px}.builder-note{padding:30px}.about-facts{font-size:12px}.about-facts strong{display:block;margin:0 0 3px}.story-world figcaption{padding:15px;font-size:12px;letter-spacing:.7px}}
@media(max-width:760px){.about-hero{padding:45px 7% 34px}.about-hero-inner{grid-template-columns:1fr;gap:42px}.about-hero h1{font-size:66px;letter-spacing:-2.5px}.about-lead{font-size:17px;line-height:1.75}.about-actions{gap:22px}.about-actions .button{gap:24px}.jeff-portrait{max-width:270px;margin:0 auto}.jeff-portrait figcaption{margin-top:-10px;padding:13px 15px}.about-facts{margin-top:38px;gap:18px;flex-wrap:wrap}.about-facts>span{flex:1;min-width:100px}.about-facts strong{font-size:23px}.about-intro{padding-top:70px;padding-bottom:40px}.about-intro h2{font-size:42px}.about-intro>p:last-child{font-size:17px}.story-section{grid-template-columns:1fr;gap:42px;padding-bottom:65px}.story-world{position:relative;top:0;box-shadow:6px 6px 0 #e6ddc5}.story-frames>.living-scene{aspect-ratio:1.2}.story-chapter{padding:0 0 40px 25px}.story-chapter h3{font-size:34px}.story-chapter p:not(.eyebrow){font-size:16px}.story-chapter blockquote{font-size:25px;padding:21px}.principle-section .section{padding-block:65px}.principle-heading{grid-template-columns:1fr;gap:20px;margin-bottom:34px}.principle-heading>p{font-size:16px}.principle-heading h2{font-size:42px}.principle-grid{grid-template-columns:1fr}.principle-grid li{padding:25px 0}.principle-grid h3{font-size:26px}.builder-section{grid-template-columns:1fr;gap:32px}.builder-copy h2{font-size:40px}.builder-copy>p:not(.eyebrow){font-size:16px}.builder-note h3{font-size:36px}.about-closing .closing-content{padding-block:75px}.about-closing .closing-content>p:not(.eyebrow){font-size:17px}.about-closing .closing-content .text-link{display:flex;width:max-content;margin:24px auto 0}}
@media(max-width:380px){.about-hero h1{font-size:59px}.about-actions{align-items:flex-start;flex-direction:column}.jeff-portrait{max-width:235px}.story-world figcaption{gap:12px}.story-world figcaption>span:first-child{max-width:190px}}
@media(prefers-reduced-motion:reduce){.jeff-portrait{animation:none}.story-frames>.living-scene{transition:none}}
