@import url("premium-studies/p5-artworks.css");

/* About and projects: the approved text in a quiet editorial composition.
   All artwork is complete by default; site.js owns each one-shot clock. */
body.site-page.site-about .about-head,
body.site-page.site-projects .se-project-head{padding-top:34px;padding-bottom:0}
body.site-page.site-about .breadcrumb,
body.site-page.site-projects .breadcrumb{margin-bottom:68px}
body.site-page.site-about .about-head h1,
body.site-page.site-projects .se-project-head h1{
 font-size:clamp(48px,5.7vw,76px);font-weight:500;line-height:1.45;letter-spacing:.025em;
}
body.site-page.site-about .about-hero{
 grid-template-columns:minmax(0,1.25fr) minmax(250px,.75fr);gap:90px;
 align-items:center;padding-bottom:86px;border-bottom:1px solid #d8d8d8;
}
body.site-page.site-about .about-head .page-intro{
 max-width:620px;font-size:16px;line-height:2.15;margin-top:34px;
}
body.site-page.site-about .about-head .page-intro p{margin:0 0 20px}
body.site-page.site-about .about-head .page-intro p:last-child{margin:0}
body.site-page.site-about .about-portrait{
 position:relative;width:100%;max-width:390px;justify-self:end;margin:20px -12px 0 0;
}
body.site-page.site-about .about-portrait img{display:block;width:100%;height:auto}
body.site-page.site-about .se-portrait-line{
 position:relative;display:block;width:86%;height:auto;margin:0 0 0 auto;
 overflow:visible;color:#9a9a9a;
}
body.site-page.site-about .se-portrait-line path,
body.site-page.site-about .se-chapter-line path{
 fill:none;stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke;
 stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;
}

/* A narrow contents column leaves the story itself a stable reading measure. */
body.site-page.site-about .reading-layout{
 display:grid;grid-template-columns:190px minmax(0,1fr);gap:100px;
 margin-top:82px;margin-bottom:110px;
}
body.site-page.site-about .reading-aside{top:116px;align-self:start}
body.site-page.site-about .aside-label{font-size:10px;letter-spacing:.08em;margin-bottom:20px;color:#6a6a6a}
body.site-page.site-about .reading-aside nav{border-top:1px solid #c9c9c9}
body.site-page.site-about .reading-aside a{
 display:grid;grid-template-columns:20px minmax(0,1fr);gap:11px;
 font-size:11px;line-height:1.95;padding:17px 0;border-bottom:1px solid #e1e1e1;
}
body.site-page.site-about .reading-aside a>span:first-child{font:10px/2.15 Arial,sans-serif;color:#777}
body.site-page.site-about .reading-aside a:hover,
body.site-page.site-about .reading-aside a:focus-visible{text-decoration:underline;text-underline-offset:5px}
body.site-page.site-about .about-story{min-width:0;max-width:none}
body.site-page.site-about .se-chapter{
 display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:0 38px;
 align-items:center;padding:76px 0 88px;border-top:1px solid #dedede;
 scroll-margin-top:115px;
}
body.site-page.site-about .se-chapter:first-child{padding-top:0;border-top:0}
body.site-page.site-about .se-chapter:last-child{padding-bottom:0}
body.site-page.site-about .se-chapter-title{grid-column:1;grid-row:1;align-self:center;min-width:0}
body.site-page.site-about .se-chapter .item-number{font:11px/1.5 Arial,sans-serif;letter-spacing:.08em;color:#737373}
body.site-page.site-about .se-chapter h2{
 font-size:clamp(27px,2.6vw,35px);font-weight:500;line-height:1.65;
 letter-spacing:.025em;margin:19px 0 26px;text-wrap:balance;
}
body.site-page.site-about .se-chapter .heading-phrase{display:inline;max-width:none}
body.site-page.site-about .se-chapter-art{
 position:relative;grid-column:2;grid-row:1;width:190px;
 margin:0 0 20px;align-self:end;isolation:isolate;pointer-events:none;
}
body.site-page.site-about .se-chapter-art img{width:100%;height:auto;display:block;position:relative;z-index:1}
body.site-page.site-about .se-chapter-line{
 position:relative;display:block;width:100%;height:auto;margin:7px 0 0;color:#ababab;
}
body.site-page.site-about .se-chapter-learning .se-chapter-art,
body.site-page.site-about .se-chapter-conversation .se-chapter-art,
body.site-page.site-about .se-chapter-family .se-chapter-art{width:220px;margin-left:-15px}
body.site-page.site-about .se-chapter-writing .se-chapter-art{width:176px;justify-self:end}
body.site-page.site-about .se-chapter .prose{
 grid-column:1/-1;max-width:650px;font-size:16px;line-height:2.2;
 letter-spacing:.025em;overflow-wrap:break-word;line-break:strict;
}
body.site-page.site-about .se-chapter .prose>p{margin:0 0 27px}
body.site-page.site-about .se-chapter .prose>p:last-child{margin-bottom:0}
body.site-page.site-about .se-chapter .links-row{margin-top:32px;gap:14px 32px}
body.site-page.site-about .se-chapter .text-link{font-size:12px;line-height:1.85;min-height:44px}

/* Each project is an open spread, with the real screen one deliberate step deeper. */
body.site-page.site-projects .se-project-head{padding-bottom:76px;border-bottom:1px solid #d8d8d8}
body.site-page.site-projects .se-project-head .page-intro{
 max-width:640px;margin-top:34px;font-size:16px;line-height:2.15;
}
body.site-page.site-projects .se-projects{padding-top:68px;padding-bottom:100px}
body.site-page.site-projects .se-projects>.section-head{margin-bottom:64px}
body.site-page.site-projects .se-projects>.section-head h2{font-size:25px;font-weight:500;line-height:1.7}
body.site-page.site-projects .se-project{
 padding:0 0 102px;border-top:0;scroll-margin-top:115px;
}
body.site-page.site-projects .se-project+.se-project{padding-top:90px;border-top:1px solid #d8d8d8}
body.site-page.site-projects .se-project:last-child{padding-bottom:0}
body.site-page.site-projects .project-feature-head{gap:30px;align-items:start;margin-bottom:24px}
body.site-page.site-projects .project-feature-head>.item-number{font:12px/1.6 Arial,sans-serif;padding-top:4px;letter-spacing:.1em;color:#717171}
body.site-page.site-projects .project-feature-head .status-badge{
 padding:0;border:0;background:none;border-radius:0;font-size:11px;color:#656565;letter-spacing:.08em;
}
body.site-page.site-projects .se-project h3{font-size:clamp(36px,4vw,52px);font-weight:500;line-height:1.6;letter-spacing:.025em;margin-top:15px}
body.site-page.site-projects .project-feature-grid{
 display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:80px;align-items:center;
}
body.site-page.site-projects .se-project-art{width:100%;max-width:590px;margin:0;min-width:0;pointer-events:none}
body.site-page.site-projects .se-project-art .p5a-canvas{aspect-ratio:1.1}
body.site-page.site-projects .se-project-art .p5a-edition{display:none}
body.site-page.site-projects .se-project-art .p5a-person{mix-blend-mode:multiply}
body.site-page.site-projects .se-project-body{padding-top:25px;min-width:0}
body.site-page.site-projects .se-project-body .prose{font-size:15px;line-height:2.15;letter-spacing:.02em;max-width:500px}
body.site-page.site-projects .se-project-body .prose>p{margin:0 0 25px}
body.site-page.site-projects .se-project-body .prose>p:last-child{margin-bottom:0}
body.site-page.site-projects .se-project-body .external,
body.site-page.site-projects .se-project-body .text-link{font-size:12px;line-height:1.9;display:inline-flex;gap:18px;align-items:baseline;padding-block:8px;min-height:44px}
body.site-page.site-projects #fde .project-feature-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
body.site-page.site-projects #fde .se-project-art{grid-column:2;grid-row:1}
body.site-page.site-projects #fde .se-project-body{grid-column:1;grid-row:1}
body.site-page.site-projects .se-project-screen{margin-top:38px;border-top:1px solid #c9c9c9;border-bottom:1px solid #dedede}
body.site-page.site-projects .se-project-screen summary{
 display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:58px;
 padding:15px 2px;font-size:11px;line-height:1.85;color:#5b5b5b;cursor:pointer;list-style:none;
}
body.site-page.site-projects .se-project-screen summary::-webkit-details-marker{display:none}
body.site-page.site-projects .se-project-screen summary::after{content:'+';font:18px/1 Arial,sans-serif;flex:none;color:#444}
body.site-page.site-projects .se-project-screen[open] summary::after{content:'−'}
body.site-page.site-projects .se-project-screen summary:hover{color:#111}
body.site-page.site-projects .se-project-screen summary:focus-visible{outline:2px solid #555;outline-offset:5px}
body.site-page.site-projects .se-project-screen .project-display{padding:10px 0 24px;margin:0;background:white;box-shadow:none}
body.site-page.site-projects .se-project-screen:not([open])>.project-display{display:none}
body.site-page.site-projects .se-project-screen .project-display img{display:block;width:100%;height:auto;box-shadow:none;border:1px solid #e1e1e1}
body.site-page.site-projects .se-project-screen .phone-display img{width:min(100%,230px);border-radius:12px}
body.site-page.site-projects .support-section{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:90px;padding:66px 0 36px;border-top:1px solid #ccc}
body.site-page.site-projects .support-section .section-head{margin:0}
body.site-page.site-projects .support-section h2{font-size:30px;font-weight:500;line-height:1.6}
body.site-page.site-projects .support-section .prose{font-size:15px;line-height:2.15;max-width:610px}
body.site-page.site-projects .support-section .button{margin-top:16px}

/* Separate paper, print, figure and route phases share one bounded clock. */
body.site-page.site-about.site-motion-ready .about-portrait img{transform:translateY(calc((1 - var(--site-art-p,1))*14px))}
body.site-page.site-about.site-motion-ready .se-chapter-art img{transform:translateY(calc((1 - var(--site-art-p,1))*12px))}
body.site-page.site-about.site-motion-ready .se-portrait-line path,
body.site-page.site-about.site-motion-ready .se-chapter-line path{stroke-dashoffset:calc(1 - var(--site-art-p,1))}
body.site-page.site-projects.site-motion-ready .se-project-art{
 --se-cover:clamp(0,calc((var(--site-art-p,1) - .04)/.58),1);
 --se-leaf:clamp(0,calc((var(--site-art-p,1) - .2)/.72),1);
 --se-person:clamp(0,calc((var(--site-art-p,1) - .34)/.58),1);
 --se-device:clamp(0,calc((var(--site-art-p,1) - .02)/.66),1);
 --se-card-one:clamp(0,calc((var(--site-art-p,1) - .18)/.6),1);
 --se-card-two:clamp(0,calc((var(--site-art-p,1) - .32)/.64),1);
 --p5a-open:var(--se-cover);--p5a-cover:calc(-158deg*var(--se-cover));
 --p5a-leaf:calc(-148deg*var(--se-leaf));
 --p5a-book-y:calc((1 - var(--se-cover))*14px);
 --p5a-person-y:calc((1 - var(--se-person))*20px);
 --p5a-person-opacity:calc(.86 + .14*var(--se-person));
 --p5a-copy-one:clamp(0,calc((var(--site-art-p,1) - .28)/.44),1);
 --p5a-copy-two:clamp(0,calc((var(--site-art-p,1) - .4)/.44),1);
 --p5a-copy-three:clamp(0,calc((var(--site-art-p,1) - .52)/.46),1);
 --p5a-route:clamp(0,calc((var(--site-art-p,1) - .06)/.72),1);
 --p5a-map:clamp(0,calc((var(--site-art-p,1) - .26)/.72),1);
 --p5a-device-y:calc((1 - var(--se-device))*22px);
 --p5a-card-one-x:calc((1 - var(--se-card-one))*-22px);
 --p5a-card-one-y:calc((1 - var(--se-card-one))*6px);
 --p5a-card-two-x:calc((1 - var(--se-card-two))*20px);
 --p5a-card-two-y:calc((1 - var(--se-card-two))*12px);
}

@media(max-width:1100px){
 body.site-page.site-about .about-hero{gap:44px;grid-template-columns:minmax(0,1.4fr) minmax(230px,.7fr)}
 body.site-page.site-about .reading-layout{grid-template-columns:165px minmax(0,1fr);gap:60px}
 body.site-page.site-about .se-chapter{grid-template-columns:minmax(0,1fr) 150px;gap:0 25px}
 body.site-page.site-about .se-chapter-art{width:150px}
 body.site-page.site-about .se-chapter-learning .se-chapter-art,
 body.site-page.site-about .se-chapter-conversation .se-chapter-art,
 body.site-page.site-about .se-chapter-family .se-chapter-art{width:175px;margin-left:-12px}
 body.site-page.site-about .se-chapter-writing .se-chapter-art{width:146px}
 body.site-page.site-projects .project-feature-grid{gap:42px}
 body.site-page.site-projects .support-section{gap:56px}
}
@media(max-width:850px){
 body.site-page.site-about .reading-layout{display:block;margin-top:48px}
 body.site-page.site-about .reading-aside{position:static;max-width:none;margin-bottom:72px}
 body.site-page.site-about .reading-aside nav{display:grid;grid-template-columns:1fr 1fr;gap:0 32px}
 body.site-page.site-about .reading-aside a{padding:15px 0;min-height:56px}
 body.site-page.site-about .about-story{max-width:690px;margin:0 auto}
 body.site-page.site-about .se-chapter{grid-template-columns:minmax(0,1fr) 170px;gap:0 32px}
 body.site-page.site-about .se-chapter-art{width:170px}
 body.site-page.site-about .se-chapter-learning .se-chapter-art,
 body.site-page.site-about .se-chapter-conversation .se-chapter-art,
 body.site-page.site-about .se-chapter-family .se-chapter-art{width:190px;margin-left:-10px}
 body.site-page.site-projects .project-feature-grid,
 body.site-page.site-projects #fde .project-feature-grid{grid-template-columns:minmax(0,1fr);gap:30px}
 body.site-page.site-projects .se-project-art{max-width:590px;justify-self:center}
 body.site-page.site-projects #fde .se-project-art,
 body.site-page.site-projects #fde .se-project-body{grid-column:auto;grid-row:auto}
 body.site-page.site-projects .se-project-body{padding:0;max-width:630px;width:100%;justify-self:center}
 body.site-page.site-projects .se-project-body .prose{max-width:none;font-size:16px}
 body.site-page.site-projects .support-section{grid-template-columns:1fr;gap:30px}
}
@media(max-width:700px){
 body.site-page.site-about .about-head,
 body.site-page.site-projects .se-project-head{padding-top:25px}
 body.site-page.site-about .breadcrumb,
 body.site-page.site-projects .breadcrumb{margin-bottom:42px}
 body.site-page.site-about .about-head h1,
 body.site-page.site-projects .se-project-head h1{font-size:42px;line-height:1.5;letter-spacing:.015em;max-width:none}
 body.site-page.site-about .about-hero{display:flex;flex-direction:column;gap:26px;align-items:stretch;padding-bottom:44px}
 body.site-page.site-about .about-head .page-intro{font-size:15px;line-height:2.1;margin-top:27px;max-width:none}
 body.site-page.site-about .about-portrait{position:relative;top:auto;right:auto;width:min(76%,320px);margin:0 0 0 auto;align-self:flex-end}
 body.site-page.site-about .reading-layout{margin-top:42px;margin-bottom:72px}
 body.site-page.site-about .reading-aside{margin-bottom:64px}
 body.site-page.site-about .reading-aside nav{display:block}
 body.site-page.site-about .reading-aside a{font-size:12px;padding:12px 0;min-height:48px;gap:15px}
 body.site-page.site-about .se-chapter{grid-template-columns:minmax(0,1fr) 102px;gap:0 16px;padding:52px 0 65px;scroll-margin-top:96px;align-items:center}
 body.site-page.site-about .se-chapter h2{font-size:25px;line-height:1.7;letter-spacing:0;margin:15px 0 26px;text-wrap:initial}
 body.site-page.site-about .se-chapter-title{grid-column:1/-1;grid-row:1;padding-right:95px;min-height:134px}
 body.site-page.site-about .se-chapter-art{grid-column:2;grid-row:1;width:102px;margin:0;align-self:center;transform:translateY(10px)}
 body.site-page.site-about .se-chapter-learning .se-chapter-art,
 body.site-page.site-about .se-chapter-conversation .se-chapter-art,
 body.site-page.site-about .se-chapter-family .se-chapter-art{width:112px;margin:0 0 0 -10px}
 body.site-page.site-about .se-chapter-writing .se-chapter-art{width:102px}
 body.site-page.site-about .se-chapter .prose{font-size:15px;line-height:2.1;letter-spacing:.018em;max-width:none}
 body.site-page.site-about .se-chapter .prose>p{margin-bottom:25px}
 body.site-page.site-about .se-chapter .links-row{margin-top:27px;gap:10px 26px}
 body.site-page.site-about .se-chapter-line{margin-top:4px}
 body.site-page.site-projects .se-project-head{padding-bottom:45px}
 body.site-page.site-projects .se-project-head .page-intro{font-size:15px;line-height:2.1;margin-top:27px}
 body.site-page.site-projects .se-projects{padding-top:42px;padding-bottom:65px}
 body.site-page.site-projects .se-projects>.section-head{margin-bottom:48px}
 body.site-page.site-projects .se-projects>.section-head h2{font-size:22px}
 body.site-page.site-projects .se-project{padding-bottom:66px;scroll-margin-top:96px}
 body.site-page.site-projects .se-project+.se-project{padding-top:54px}
 body.site-page.site-projects .project-feature-head{gap:19px;margin-bottom:20px}
 body.site-page.site-projects .se-project h3{font-size:34px;line-height:1.55;margin-top:13px}
 body.site-page.site-projects .project-feature-head>.item-number{font-size:11px;padding-top:3px}
 body.site-page.site-projects .project-feature-head .status-badge{font-size:10px}
 body.site-page.site-projects .project-feature-grid,
 body.site-page.site-projects #fde .project-feature-grid{gap:27px}
 body.site-page.site-projects .se-project-body .prose{font-size:15px;line-height:2.1}
 body.site-page.site-projects .se-project-screen{margin-top:29px}
 body.site-page.site-projects .se-project-screen summary{font-size:11px;min-height:56px}
 body.site-page.site-projects .se-project-body .external,
 body.site-page.site-projects .se-project-body .text-link{font-size:12px;gap:14px}
 body.site-page.site-projects .support-section{padding:44px 0 14px;gap:25px}
 body.site-page.site-projects .support-section h2{font-size:26px}
 body.site-page.site-projects .support-section .prose{font-size:14px;line-height:2.1}
}
@media(max-width:380px){
 body.site-page.site-about .about-head h1,
 body.site-page.site-projects .se-project-head h1{font-size:36px}
 body.site-page.site-about .se-chapter-title{padding-right:0;min-height:0}
 body.site-page.site-about .se-chapter h2{font-size:25px;margin-bottom:13px}
 body.site-page.site-about .se-chapter-art{grid-row:2;grid-column:2;margin:0 0 17px;transform:none}
 body.site-page.site-about .se-chapter .prose{grid-row:3}
 body.site-page.site-projects .se-project h3{font-size:29px}
}
@media(max-height:550px){body.site-page.site-about .reading-aside{position:static}}
@media(prefers-reduced-motion:reduce){
 body.site-page.site-about [data-site-art],
 body.site-page.site-projects [data-site-art]{--site-art-p:1!important}
}
