/* Discrete native figures have adjacent captions rather than full-width image walls. */
body[data-project=personamail] .hero-figure .figure-media{max-width:540px;margin-inline:auto}
.research-source-figure{display:grid!important;grid-template-columns:minmax(0,2.35fr) minmax(230px,1fr);gap:34px;align-items:center;width:100%;max-width:var(--source-width,1080px);margin-inline:auto!important}
.research-source-figure .figure-media{width:100%;padding:0!important}.research-source-figure .figure-media>img{width:100%;height:auto;object-fit:contain}
.research-source-figure>figcaption{display:block!important;align-self:center;border-top:0!important;border-left:1px solid var(--line);padding:8px 0 8px 24px!important;margin:0!important;font-size:18px!important;line-height:1.6!important;text-wrap:pretty}
.research-source-figure>figcaption>span{display:block;margin-bottom:10px;font-size:13px}.research-source-figure .figure-caption-title{display:block;font-size:22px!important;line-height:1.3;margin-bottom:10px;color:var(--ink);font-weight:600}.research-source-figure figcaption p{font-size:18px!important;line-height:1.6!important;margin:0!important}
body[data-project=suzhou-scrollverse] .comparisons .figure-media{max-height:430px}.persona-intent-demo{display:grid;grid-template-columns:minmax(260px,380px) minmax(250px,440px);gap:56px;align-items:center;justify-content:center;width:100%;max-width:940px;margin-inline:auto;padding-block:24px}
.persona-intent-panel{margin:0;padding:18px 20px 14px;border:1px solid #e3dcba;border-top:4px solid #d5ec67;border-bottom:4px solid #f3c944;border-radius:9px;background:#fcf9eb;color:#22272a;min-width:0;font-family:Arial,sans-serif;box-shadow:0 8px 30px #252a2d06}
.persona-intent-panel legend{float:left;width:100%;padding:0 0 15px;margin-bottom:10px;border-bottom:1px solid #e9e3d0;font-size:19px;font-weight:600;line-height:1.3}.persona-intent-panel label{display:flex;gap:12px;align-items:center;padding:11px 0;font-size:18px;line-height:1.45;clear:both;cursor:pointer}.persona-intent-panel input{flex:0 0 auto;appearance:auto;width:18px;height:18px;accent-color:#557de9;margin:0}.persona-intent-panel label:has(input:focus-visible){outline:2px solid #44518a;outline-offset:4px;border-radius:3px}
.persona-intent-demo>figcaption{display:block!important;font-size:19px!important;line-height:1.6;padding:0!important;margin:0!important;border:0!important}.persona-intent-demo figcaption>strong{font-size:25px;font-weight:500;line-height:1.25;display:block;margin-bottom:16px;color:var(--ink)}.persona-intent-demo figcaption p{font-size:19px!important;line-height:1.65!important;margin:0 0 16px!important}.persona-intent-demo small{font-size:14px;line-height:1.5;color:var(--muted)}
@media(max-width:760px){.research-source-figure{grid-template-columns:1fr;gap:18px}.research-source-figure>figcaption{border-left:0;border-top:1px solid var(--line)!important;padding:16px 0 0!important;font-size:17px!important}.research-source-figure figcaption p{font-size:17px!important}.persona-intent-demo{grid-template-columns:1fr;gap:30px;max-width:520px;padding-inline:4px}.persona-intent-panel{width:100%;max-width:380px;justify-self:center}.persona-intent-demo>figcaption{font-size:18px!important}.persona-intent-demo figcaption p{font-size:18px!important}}
/* Keep the editorial Research image row centered, including alternating chapters. */
body:is([data-project=personamail],[data-project=beyond-the-gaze],[data-project=suzhou-scrollverse],[data-project=versecolor]) .case-section.layout-editorial .section-visuals{grid-column:1/-1;grid-row:2;justify-self:center;width:min(100%,1080px);max-width:1080px;grid-template-columns:minmax(0,1fr)}
body[data-project=suzhou-scrollverse] #experience .comparisons .figure-media{height:auto;max-height:none;display:grid;place-items:center;padding:0!important}
body[data-project=suzhou-scrollverse] #experience .comparisons .figure-media>img{display:block;width:auto;max-width:100%;height:auto;max-height:470px}
body[data-project=suzhou-scrollverse] #experience .figure-pair{width:100%;gap:48px;max-width:820px;margin-inline:auto}
body[data-project=suzhou-scrollverse] #experience .figure-pair figcaption{padding-top:18px!important;max-width:32ch;margin-inline:auto;text-align:left}
body[data-project=versecolor] #study .section-visuals{grid-row:3}
@media(max-width:700px){body[data-project=suzhou-scrollverse] #experience .figure-pair{gap:32px}body[data-project=suzhou-scrollverse] #experience .comparisons .figure-media>img{max-height:400px}}
/* Keep native source panels beside the writing, below a full-width chapter heading. */
body[data-project=personamail] :is(#research,#reflection)>.section-heading{grid-column:1/-1!important;grid-row:1!important}
body[data-project=personamail] :is(#research,#reflection)>.section-visuals{grid-column:1!important;grid-row:2!important;align-self:start;width:100%;max-width:none;margin:0!important}
body[data-project=personamail] :is(#research,#reflection)>.section-body{grid-column:2!important;grid-row:2!important;align-self:center;padding:0!important}
body[data-project=personamail] :is(#research,#reflection) .research-source-figure{display:block!important;margin:0!important}
body[data-project=personamail] :is(#research,#reflection) .research-source-figure>figcaption{border:0!important;padding:18px 0 0!important;margin:0!important}
body[data-project=beyond-the-gaze] #signals>.section-heading,body[data-project=suzhou-scrollverse] #experience>.section-heading{grid-column:1/-1!important;grid-row:1!important}
body[data-project=beyond-the-gaze] #signals>.section-body,body[data-project=suzhou-scrollverse] #experience>.section-body{display:none}
body[data-project=suzhou-scrollverse] .hero-figure .figure-media{width:100%;max-width:800px;overflow:hidden;padding:0!important}
body[data-project=suzhou-scrollverse] .hero-figure .figure-media>img{width:100%;height:auto;max-height:370px;object-fit:contain}
body[data-project=suzhou-scrollverse] #experience .section-visuals{width:100%;max-width:1140px}
body[data-project=versecolor] #study>.section-visuals{grid-column:1/-1!important;grid-row:2!important}
body[data-project=versecolor] #findings>.section-heading{grid-column:1/-1!important;grid-row:1!important}
body[data-project=versecolor] #findings>.section-visuals{grid-column:1!important;grid-row:2!important;width:100%;margin:0!important}
body[data-project=versecolor] #findings>.section-body{grid-column:2!important;grid-row:2!important;padding:0!important;align-self:center}
body[data-project=versecolor] #findings .data-visual{margin:0;max-width:100%}
@media(max-width:760px){body[data-project=personamail] :is(#research,#reflection){display:flex!important;flex-direction:column;gap:24px}body[data-project=personamail] :is(#research,#reflection)>.section-heading{order:0}body[data-project=personamail] :is(#research,#reflection)>.section-visuals{order:1}body[data-project=personamail] :is(#research,#reflection)>.section-body{order:2;margin:0}body[data-project=versecolor] #findings{display:flex!important;flex-direction:column;gap:25px}body[data-project=versecolor] #findings>.section-heading{order:0}body[data-project=versecolor] #findings>.section-visuals{order:1}body[data-project=versecolor] #findings>.section-body{order:2;margin:0}}
body[data-project=beyond-the-gaze] #example>.section-visuals{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)!important;gap:45px;width:100%;max-width:1150px;align-items:center}
body[data-project=beyond-the-gaze] #example .project-figure.research-source-figure{display:block!important;max-width:440px;justify-self:center}
body[data-project=beyond-the-gaze] #example .research-source-figure .figure-media{padding:0!important}
body[data-project=beyond-the-gaze] #example .research-source-figure figcaption{display:block!important;border:0!important;padding:16px 0 0!important;margin:0!important;font-size:17px!important}
body[data-project=beyond-the-gaze] #example .research-source-figure .figure-caption-title{font-size:21px!important}
body[data-project=beyond-the-gaze] #example .research-source-figure figcaption p{font-size:17px!important;line-height:1.5!important}
body[data-project=beyond-the-gaze] #example [data-native-visual]{max-width:100%;margin:0}
@media(max-width:760px){body[data-project=beyond-the-gaze] #example>.section-visuals{grid-template-columns:1fr!important;gap:28px}body[data-project=beyond-the-gaze] #example .project-figure.research-source-figure{width:100%;max-width:390px}}
body[data-project=personamail] .hero-overview{grid-template-columns:minmax(0,.77fr) minmax(0,1.23fr);gap:4%}body[data-project=personamail] #interaction .section-visuals>.project-figure{width:100%;max-width:570px;margin:0 auto}body[data-project=personamail] #interaction .section-visuals .figure-media{padding:0!important}body[data-project=personamail] #interaction .section-visuals img{max-height:370px;object-fit:contain}body[data-project=personamail] #interaction .section-visuals figcaption{display:block;font-size:18px!important;line-height:1.5!important}body[data-project=personamail] #interaction .section-visuals .figure-caption-title{display:block;font-size:23px;color:var(--ink);margin-bottom:10px}body[data-project=personamail] #interaction .section-visuals figcaption p{font-size:18px;line-height:1.5;margin:0}
@media(max-width:760px){body[data-project=personamail] .hero-overview{display:flex;flex-direction:column;gap:22px}}
/* Custom multi-panel figures occupy the whole visual row, never one comparison slot. */
body[data-project=suzhou-scrollverse] #experience .figure-pair{display:block;width:100%;max-width:1140px}
body[data-project=suzhou-scrollverse] #experience .rf-suzhou-experience{width:100%;max-width:none!important}
body[data-project=beyond-the-gaze] #example .dv-shell{padding:22px;background:transparent;border:0}
body[data-project=beyond-the-gaze] #example :is(.dv-kicker,.dv-description){display:none}
body[data-project=beyond-the-gaze] #example .dv-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body[data-project=beyond-the-gaze] #example .dv-panels{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin:0}
body[data-project=beyond-the-gaze] #example .dv-panel+.dv-panel{border:0;padding:0}
body[data-project=beyond-the-gaze] #example .dv-panel-title{font-size:20px;min-height:55px;line-height:1.35}
body[data-project=beyond-the-gaze] #example .dv-row-head{display:block}
body[data-project=beyond-the-gaze] #example .dv-value{display:block;font-size:25px;margin-top:6px}
body[data-project=beyond-the-gaze] #example .dv-table-disclosure{margin-top:26px}
@media(max-width:760px){body[data-project=beyond-the-gaze] #example .dv-shell{padding:0}body[data-project=beyond-the-gaze] #example .dv-panels{gap:22px}body[data-project=beyond-the-gaze] #example .dv-panel-title{font-size:19px;min-height:78px}}
/* Show the source editor and its readable control together. */
body[data-project=personamail] #interaction>.section-visuals{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:55px;align-items:start;max-width:1030px;width:100%}
body[data-project=personamail] #interaction .section-visuals>.project-figure{grid-column:auto;max-width:490px;width:100%}
body[data-project=personamail] #interaction .section-visuals>.persona-intent-demo{display:block;padding:0;margin:0;width:100%;max-width:none}
body[data-project=personamail] #interaction .persona-intent-panel{width:100%;max-width:410px;margin:0 auto}
body[data-project=personamail] #interaction .persona-intent-demo>figcaption{margin:23px 0 0!important}
body[data-project=personamail] #interaction .persona-intent-demo figcaption>strong{font-size:23px;margin-bottom:12px}
body[data-project=personamail] #interaction .persona-intent-demo figcaption p{font-size:18px!important;line-height:1.5!important}
@media(max-width:760px){body[data-project=personamail] #interaction>.section-visuals{grid-template-columns:1fr;gap:30px}body[data-project=personamail] #interaction .persona-intent-demo>figcaption{margin-top:20px!important}}
body[data-project=personamail] #interaction>.section-visuals{grid-column:1!important;grid-row:2!important;display:block;max-width:490px;width:100%;justify-self:center;align-self:start}
body[data-project=personamail] #interaction>.persona-intent-demo{grid-column:2!important;grid-row:2!important;display:block;max-width:490px;width:100%;padding:0;margin:0;align-self:start;justify-self:center}
@media(max-width:760px){body[data-project=personamail] #interaction{display:flex;flex-direction:column;gap:25px}body[data-project=personamail] #interaction>.section-heading{order:0}body[data-project=personamail] #interaction>.section-body{order:1}body[data-project=personamail] #interaction>.section-visuals{order:2}body[data-project=personamail] #interaction>.persona-intent-demo{order:3}}
body[data-project=personamail] #interaction>.section-experience{grid-column:2!important;grid-row:2!important;max-width:490px;width:100%;margin:0;padding:0;align-self:start;justify-self:center}
body[data-project=personamail] #interaction .section-experience>.persona-intent-demo{display:block;max-width:none;width:100%;padding:0;margin:0}
@media(max-width:760px){body[data-project=personamail] #interaction>.section-experience{order:3}}
/* Verse study introduction and procedure occupy separate rows at every width. */
body[data-project=versecolor] #study>.section-heading{grid-column:1/-1!important;grid-row:1!important}
body[data-project=versecolor] #study>.section-body{grid-column:1/-1!important;grid-row:2!important;align-self:start;justify-self:start;width:100%;max-width:1050px;padding:0!important;margin:0!important}
body[data-project=versecolor] #study>.section-visuals{grid-column:1/-1!important;grid-row:3!important;margin:0!important}
body[data-project=versecolor] #study .rf-verse-procedure{margin-top:0!important}
@media(min-width:761px) and (max-width:1050px){.rf-verse-phases{grid-template-columns:185px minmax(0,1fr);gap:30px}.rf-verse-comparison ol{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 30px}.rf-verse-comparison li:nth-child(2)::after{display:none}}
/* The student scenario is an authored, local reading example. */
.persona-email-demo .persona-kept-context{border-top:2px solid var(--accent);padding-top:18px}.persona-kept-context h3{font-size:24px;margin:0 0 18px;line-height:1.25}.persona-kept-context dl{margin:0;display:grid;gap:11px}.persona-kept-context dl>div{display:grid;grid-template-columns:105px 1fr;gap:14px;font-size:18px;line-height:1.4}.persona-kept-context dt{color:var(--muted)}.persona-kept-context dd{margin:0;color:var(--ink)}.persona-example-switch{padding:0;margin:25px 0 18px;border:0;display:flex;flex-wrap:wrap;gap:12px 20px}.persona-example-switch legend{font-size:15px;color:var(--accent);padding:0;margin-bottom:12px}.persona-example-switch label{display:flex;gap:9px;align-items:center;font-size:17px;cursor:pointer}.persona-example-switch input{accent-color:var(--accent);width:16px;height:16px;margin:0}.persona-email-drafts{padding:21px 23px;background:color-mix(in srgb,var(--accent) 5%,var(--bg));border-left:2px solid var(--accent)}.persona-email-drafts h4{font-size:20px;margin:0 0 18px;line-height:1.3}.persona-email-drafts p{font-size:18px!important;line-height:1.5!important;margin:0 0 15px!important}.persona-email-drafts p:last-child{margin-bottom:0!important}.persona-email-meeting{display:none}.persona-email-demo:has(input[value=meeting]:checked) .persona-email-meeting{display:block}.persona-email-demo:has(input[value=meeting]:checked) .persona-email-leave{display:none}.persona-email-demo>figcaption{margin-top:20px!important}.persona-email-demo>figcaption>strong{font-size:22px!important}.persona-email-demo>figcaption small{display:block;margin-top:10px;font-size:14px;line-height:1.4;color:var(--muted)}
@media(max-width:760px){.persona-kept-context h3{font-size:23px}.persona-kept-context dl>div{grid-template-columns:90px 1fr;gap:12px;font-size:17px}.persona-email-drafts{padding:20px}.persona-example-switch{gap:13px 20px}.persona-example-switch label{font-size:17px}}
/* Persona: one concrete situation, editable settings, and a reusable draft. */
body[data-project=personamail] #interaction>.section-heading{grid-column:1/-1!important;grid-row:1!important}
body[data-project=personamail] #interaction>.section-body{grid-column:1/-1!important;grid-row:2!important;max-width:850px;padding:0!important;margin:0!important}
body[data-project=personamail] #interaction>.section-experience{grid-column:1/-1!important;grid-row:3!important;max-width:1160px;width:100%;justify-self:center}
body[data-project=personamail] #interaction .section-experience>.persona-flow{display:grid!important;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:36px 64px;padding:0;max-width:none}
.persona-flow .persona-step{font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:14px}
.persona-flow h3{font-size:29px;line-height:1.2;letter-spacing:-.025em;margin:0 0 21px;text-wrap:pretty}
.persona-flow p{font-size:19px!important;line-height:1.55!important;margin:0 0 18px!important}
.persona-before{padding-top:8px}.persona-before>p{max-width:38ch}.persona-bad-draft{margin:26px 0 22px;border-left:2px solid #a39a9e;padding:6px 0 6px 24px}.persona-bad-label{font-size:14px;display:flex;align-items:center;gap:10px;margin-bottom:16px;color:#775d68}.persona-bad-label b{font-size:29px;line-height:.8;font-weight:400}.persona-bad-draft p{color:#81787e;font-style:italic;text-decoration:line-through;text-decoration-color:#b4a4ab;text-decoration-thickness:1px}.persona-bad-draft>strong{display:block;font-size:18px;line-height:1.5;color:var(--ink);font-weight:600}.persona-flow .persona-before-note{font-size:17px!important;color:var(--muted)}
.persona-after{border-left:1px solid var(--line);padding-left:42px;min-width:0}.persona-settings{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px;margin-bottom:24px}.persona-settings>label{display:block;font-size:15px;font-weight:600;line-height:1.4}.persona-settings select{display:block;width:100%;font:inherit;font-size:17px;font-weight:400;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:0;padding:12px 30px 12px 12px;margin-top:8px;min-height:46px}.persona-settings .persona-appreciation{grid-column:1/-1;display:flex;gap:10px;align-items:center;font-size:16px;font-weight:400;cursor:pointer}.persona-appreciation input{width:18px;height:18px;accent-color:var(--accent);margin:0}.persona-settings :is(select,input):focus-visible,.persona-reuse button:focus-visible,.persona-original summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.persona-draft{padding:24px;background:color-mix(in srgb,var(--accent) 6%,var(--bg));border-left:3px solid var(--accent)}.persona-draft-heading{display:flex;justify-content:space-between;gap:15px;font-size:12px;line-height:1.4;text-transform:uppercase;letter-spacing:.04em;color:var(--accent);margin-bottom:20px}.persona-draft h4{font-size:21px;line-height:1.3;margin:0 0 22px}.persona-draft p{font-size:18px!important;line-height:1.55!important}.persona-draft p:last-child{margin-bottom:0!important;white-space:pre-line}.persona-draft.is-updated{animation:persona-draft-update .28s ease-out}.persona-reuse{margin-top:25px}.persona-reuse .persona-step{margin-bottom:10px}.persona-reuse p{font-size:17px!important;line-height:1.5!important}.persona-reuse button{display:flex;align-items:center;justify-content:space-between;width:100%;gap:16px;padding:13px 0;border:0;border-block:1px solid var(--line);background:none;color:var(--accent);font:inherit;font-size:17px;text-align:left;cursor:pointer}.persona-reuse button:hover{color:var(--ink)}.persona-reuse button span{font-size:24px}
.persona-original{grid-column:1/-1;border-top:1px solid var(--line);padding-top:18px}.persona-original summary{cursor:pointer;font-size:17px;color:var(--accent);padding:6px 0}.persona-original>div{display:grid;grid-template-columns:minmax(0,460px) minmax(200px,350px);align-items:center;gap:45px;margin:26px 0 0}.persona-original img{display:block;max-width:100%;height:auto;max-height:390px;object-fit:contain}.persona-original p{font-size:18px!important}.persona-flow>.persona-demo-note{grid-column:1/-1;display:block!important;border:0!important;padding:0!important;margin:0!important;font-size:14px!important;line-height:1.5!important;color:var(--muted)}
@keyframes persona-draft-update{from{opacity:.6;transform:translateY(3px)}to{opacity:1;transform:none}}
@media(max-width:900px){body[data-project=personamail] #interaction .section-experience>.persona-flow{gap:30px}.persona-after{padding-left:28px}.persona-settings{grid-template-columns:1fr}.persona-draft{padding:20px}}
@media(max-width:760px){body[data-project=personamail] #interaction .section-experience>.persona-flow{grid-template-columns:1fr;gap:30px}.persona-after{padding:25px 0 0;border-left:0;border-top:1px solid var(--line)}.persona-before>p{max-width:none}.persona-flow h3{font-size:27px}.persona-settings{grid-template-columns:1fr 1fr;gap:18px 12px}.persona-settings select{font-size:15px;padding-left:8px;padding-right:22px}.persona-original>div{grid-template-columns:1fr;gap:20px}.persona-draft-heading{font-size:11px}.persona-flow .persona-demo-note{font-size:14px!important}}
@media(prefers-reduced-motion:reduce){.persona-draft.is-updated{animation:none}}
/* Keep the Gaze overview within the first desktop screen. */
body[data-project=beyond-the-gaze] #overview .rf-gaze-artwork{margin-block:0!important}
body[data-project=beyond-the-gaze] #overview .rf-art-stage{height:245px;max-height:245px;aspect-ratio:auto;background:transparent}
body[data-project=beyond-the-gaze] #overview .rf-art-stage img{height:245px;max-height:245px!important;width:auto;max-width:100%}
body[data-project=beyond-the-gaze] #overview .rf-tabs{margin-bottom:10px}
body[data-project=beyond-the-gaze] #overview .rf-tabs button{padding-block:7px;min-height:36px}
body[data-project=beyond-the-gaze] #overview .rf-art-meta{margin-top:10px;gap:15px}
body[data-project=beyond-the-gaze] #overview .rf-caption{padding-top:10px!important;margin-top:10px!important}
body[data-project=beyond-the-gaze] #overview .rf-caption>p{font-size:16px!important;line-height:1.4!important}
@media(max-width:760px){body[data-project=beyond-the-gaze] #overview .rf-art-stage,body[data-project=beyond-the-gaze] #overview .rf-art-stage img{height:220px;max-height:220px!important}}