/* Original artwork crops and web exports. Light, grain and framing are presentation-only. */
#approach{overflow:clip}
#approach .approach-book{align-items:start}
#approach .book-left{position:sticky;top:105px;align-self:start}
#approach .book-right{height:auto;overflow:visible;padding-top:0;scroll-snap-type:none}
#approach .process-window{scroll-margin-top:105px}
#approach .process-window{min-height:0;margin:0 0 48px;scroll-margin-top:105px;border-bottom:1px solid #162c2433;padding-bottom:24px}
#approach .process-window:last-child{margin-bottom:0;border-bottom:0}
#approach .process-visual.character-stage{position:relative;top:auto;margin:0;height:425px;isolation:isolate;overflow:hidden;border:1px solid #17382b2b;transform:none;perspective:900px}
#approach .character-art{position:absolute;inset:0;z-index:0;transition:transform 650ms cubic-bezier(.2,.72,.13,1);transform-origin:50% 50%}
#approach .character-art img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 650ms cubic-bezier(.2,.72,.13,1);user-select:none;-webkit-user-drag:none}
#approach .character-stage:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.075;mix-blend-mode:soft-light;background-image:repeating-radial-gradient(circle at 17% 31%,#fff 0 .5px,#111 .7px 1px,transparent 1.2px 3px);background-size:7px 9px}
#approach .character-index{position:absolute;left:18px;top:12px;z-index:2;font-family:var(--display,'Space Grotesk',sans-serif);font-size:72px;font-weight:500;letter-spacing:-.09em;line-height:1;pointer-events:none}
#approach .character-caption{position:absolute;inset:auto 0 0;z-index:3;display:flex;flex-direction:column;gap:7px;padding:39px 20px 18px;pointer-events:none}
#approach .character-caption>.micro{font-size:9px;letter-spacing:.14em;line-height:1.4}
#approach .character-caption>span:last-child{font-size:18px;line-height:1.25;letter-spacing:-.035em;font-weight:500}
#approach .character-notice{background:radial-gradient(ellipse at 78% 20%,#f0f3df,#bfd7cb 78%);color:#173e38}
#approach .character-notice .character-art{inset:18px 12% 54px 20%;transform:rotate(-3deg);box-shadow:11px 13px 24px #1d443627;overflow:hidden;background:#cedbd5}
#approach .character-notice .character-art img{object-fit:cover;object-position:50% 43%;filter:contrast(1.13) brightness(1.025);transform-origin:49% 49%}
#approach .character-notice .character-index{color:#1d5b542e}
#approach .character-notice .character-caption{background:linear-gradient(transparent,#c6ddcfef 54%,#c6ddcf)}
#approach .observer-focus{position:absolute;z-index:2;left:var(--focus-x,56%);top:var(--focus-y,46%);width:115px;height:90px;transform:translate(-50%,-50%);pointer-events:none;transition:width 400ms,height 400ms,opacity 400ms;opacity:.58}
#approach .observer-focus i{position:absolute;width:16px;height:16px;border-color:#0b635d;border-style:solid;border-width:0}
#approach .observer-focus i:nth-child(1){top:0;left:0;border-top-width:2px;border-left-width:2px}
#approach .observer-focus i:nth-child(2){top:0;right:0;border-top-width:2px;border-right-width:2px}
#approach .observer-focus i:nth-child(3){bottom:0;right:0;border-bottom-width:2px;border-right-width:2px}
#approach .observer-focus i:nth-child(4){bottom:0;left:0;border-bottom-width:2px;border-left-width:2px}
#approach .character-notice.is-focused .character-art img{transform:scale(1.16)}
#approach .character-notice.is-focused .observer-focus{width:152px;height:110px;opacity:1}
#approach .process-visual.character-understand{height:470px;background:radial-gradient(ellipse at 18% 23%,#41354c,#1b1927 76%);color:#fff1ff}
#approach .character-understand .character-art{inset:18px 16% 60px 16%;transform:rotate(3deg);box-shadow:-12px 17px 24px #090b1294;overflow:hidden;background:#c4cdd0}
#approach .character-understand .character-art img{object-fit:cover;object-position:center;filter:contrast(1.06) brightness(1.025)}
#approach .character-understand .character-index{color:#f0d9ff73;font-size:61px;left:auto;right:17px;top:14px}
#approach .character-understand .character-caption{background:linear-gradient(transparent,#17152eef 58%,#17152e)}
#approach .perspective-divider{position:absolute;z-index:1;left:49%;top:2%;height:90%;width:1px;transform:rotate(18deg);background:linear-gradient(transparent,#f6e1ff47,transparent);pointer-events:none;transition:transform 650ms cubic-bezier(.2,.72,.13,1)}
#approach .perspective-side{position:absolute;z-index:2;top:17px;padding:7px 9px;background:#16192ccb;color:#f2e8fb;border:1px solid #e0d4f332;font-size:8px;line-height:1.4;letter-spacing:.08em;pointer-events:none}
#approach .perspective-side.side-a{left:17px}
#approach .perspective-side.side-b{right:17px;top:auto;bottom:92px}
#approach .character-understand.is-reversed .character-art{transform:rotate(-3deg) scaleX(-1)}
#approach .character-understand.is-reversed .perspective-divider{transform:rotate(-18deg)}
#approach .process-visual.character-express{height:365px;background:radial-gradient(ellipse at 30% 20%,#167a7f,#163e59 78%);color:#fff9dd}
#approach .character-express .character-art{inset:14px 15% 48px;transform:rotate(-1deg);background:#fff;box-shadow:12px 15px 20px #07253666;overflow:hidden}
#approach .character-express .character-art img{object-fit:contain;object-position:center;filter:contrast(1.025) brightness(1.01)}
#approach .character-express .character-index{left:auto;right:18px;top:13px;color:#d5ff67;text-shadow:0 2px 12px #102561}
#approach .character-express .character-caption{background:linear-gradient(transparent,#123f42e8 65%,#123f42f7)}
#approach .connection-thread{position:absolute;left:20px;right:20px;bottom:88px;height:9px;z-index:2;pointer-events:none;opacity:0}
#approach .connection-thread:before{content:"";position:absolute;top:4px;left:0;right:0;height:1px;background:#dbf4bd}
#approach .connection-thread i{position:absolute;top:0;width:9px;height:9px;background:#d7f3c0;border:1px solid #153e39}
#approach .connection-thread i:nth-child(1){left:0}
#approach .connection-thread i:nth-child(2){left:calc(50% - 4px)}
#approach .connection-thread i:nth-child(3){right:0}
#approach .character-express.is-signaling .connection-thread{animation:ggg-character-signal 1400ms ease-out both}
#approach .character-express.signal-static .connection-thread{opacity:.9}
#approach .process-text{padding:25px 0 0}
#approach .process-text h3{margin:12px 0 15px;font-size:clamp(29px,2.8vw,43px);line-height:1.06;max-width:16ch;text-wrap:balance}
#approach .process-text>p{max-width:54ch;line-height:1.65}
#approach .process-secondary{margin-top:14px;max-width:53ch;color:#3c5149;font-size:13px;line-height:1.65}
#approach .character-action-row{display:none;align-items:center;justify-content:space-between;gap:14px;margin-top:20px;padding-top:15px;border-top:1px solid #213c2f25}
#approach.approach-characters-ready .character-action-row{display:flex}
#approach .character-action{min-height:44px;min-width:145px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:17px;padding:11px 12px;border:1px solid #245444;background:#f1f7ee;color:#163e33;font:500 9px/1.4 'Space Grotesk',sans-serif;letter-spacing:.055em;cursor:pointer;transition:background 160ms,color 160ms}
#approach .character-action:hover,#approach .character-action[aria-pressed=true]{background:#173f33;color:#ecfff1}
#approach .character-action:focus-visible{outline:3px solid #07796c;outline-offset:4px}
#approach .character-status{max-width:22ch;font-size:10px;line-height:1.5;letter-spacing:.04em;text-align:right;color:#355348}
#approach .process-understand .character-action{border-color:#58426c;color:#432f58}
#approach .process-understand .character-action:hover,#approach .process-understand .character-action[aria-pressed=true]{background:#493160;color:#fff2ff}
#approach .process-express .character-action{border-color:#1c4f85;color:#0b3e70}
#approach .process-express .character-action:hover{background:#123f80;color:#f2ffb8}
#approach[data-character-motion=off] .character-art,#approach[data-character-motion=off] .character-art img,#approach[data-character-motion=off] .observer-focus,#approach[data-character-motion=off] .perspective-divider{transition:none}
#approach[data-character-motion=off] .connection-thread,#approach .character-stage[data-in-view=false] .connection-thread{animation-play-state:paused}
@keyframes ggg-character-signal{0%{clip-path:inset(0 100% 0 0);opacity:0}18%{opacity:.95}80%{clip-path:inset(0);opacity:.95}100%{clip-path:inset(0);opacity:0}}
@media(max-width:1100px) and (min-width:761px){#approach .book-right{padding-left:24px}#approach .process-visual.character-stage{height:335px}#approach .process-visual.character-understand{height:365px}#approach .character-caption>span:last-child{font-size:16px}#approach .character-action-row{align-items:flex-start;flex-direction:column;gap:10px}#approach .character-status{text-align:left;max-width:none}}
@media(max-width:760px){#approach .book-left{position:static;top:auto}#approach .book-right{height:auto;overflow:visible;padding:28px 0 0;border-left:0;scroll-snap-type:none}#approach .process-window{margin-bottom:32px;padding-bottom:30px;scroll-margin-top:90px}#approach .process-visual.character-stage{height:330px}#approach .process-visual.character-understand{height:365px}#approach .process-visual.character-express{height:300px}#approach .process-text{padding-top:23px}#approach .process-text h3{font-size:35px}#approach .character-action-row{gap:12px}#approach .process-secondary{font-size:13px}#approach .character-index{font-size:64px}}
@media(max-width:390px){#approach .process-visual.character-stage{height:295px}#approach .process-visual.character-understand{height:325px}#approach .process-visual.character-express{height:280px}#approach .character-caption{padding-inline:15px}#approach .character-caption>span:last-child{font-size:16px}#approach .character-action-row{align-items:flex-start;flex-direction:column;gap:10px}#approach .character-status{text-align:left;max-width:none}#approach .process-text h3{font-size:31px}}
@media(prefers-reduced-motion:reduce){html:not(.motion-opt-in) #approach .character-art,html:not(.motion-opt-in) #approach .character-art img,html:not(.motion-opt-in) #approach .observer-focus,html:not(.motion-opt-in) #approach .perspective-divider{transition:none}html:not(.motion-opt-in) #approach .connection-thread{animation:none}}

/* Current notebook and heart paintings keep their complete selected crop readable. */
#approach .character-understand .character-art img{object-fit:contain;filter:contrast(1.02)}
#approach .character-notice .character-art img{object-position:50% 44%;filter:contrast(1.04)}
#approach .character-express .character-art{background:#104d57}