/* About: compact editorial pacing, with the original site's faded curves
   carried behind editable photographs and project details. */
.about-home,.about-page .about-opening{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);align-items:center;gap:40px;padding-block:44px}
.about-home{border-top:var(--section-rule-width) solid var(--section-rule)}
.about-atmosphere{position:absolute;inset:0 calc(-1 * var(--page-gutter));overflow:hidden;z-index:-1;pointer-events:none;user-select:none}
.about-atmosphere>img,.about-atmosphere>picture{position:absolute;inset:0;width:100%;height:100%}
.about-atmosphere>img,.about-atmosphere>picture>img{width:100%;height:100%;object-fit:cover;object-position:center;opacity:.36;filter:saturate(.65)}
.about-atmosphere:after{content:'';position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,color-mix(in srgb,var(--paper) 52%,transparent),color-mix(in srgb,var(--paper) 20%,transparent) 44%,transparent 68%),linear-gradient(0deg,var(--paper),transparent 12%,transparent 94%,var(--paper))}
.about-atmosphere>svg{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.about-home .studio-copy,.about-page .about-heading,.about-visual{min-width:0;position:relative}
.about-home .studio-copy h2{font-size:42px;line-height:1.08;letter-spacing:-.045em;margin:16px 0;color:var(--forest)}
.about-home .studio-copy>p{font-size:14px;line-height:1.65;margin-top:12px;max-width:48ch;color:var(--ink)}
.about-home .studio-copy>p.lead{font-size:16px;line-height:1.6;color:var(--ink)}
.about-home .studio-copy>.text-link{margin-top:12px}
.about-home .audience-tabs{margin-top:18px;gap:24px;flex-wrap:wrap}
.about-home .audience-tabs button{font-size:12px;min-height:44px;padding:10px 0}
.about-home #audience-panel{min-height:0;margin-top:20px;padding-top:16px}
.about-home #audience-title{font-size:17px;line-height:1.35}
.about-home #audience-copy{font-size:13px;line-height:1.6;margin:8px 0;max-width:45ch;color:var(--ink)}
.about-home .text-link{min-height:44px}
.about-visual{align-self:center}
.about-workstation{width:86%;margin-left:auto}
.about-image{display:block;position:relative;overflow:hidden;background:var(--panel);min-width:0}
.about-image>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.about-work-image{aspect-ratio:4/3}
.about-project-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:14px}
.about-project-pair .about-place{margin-top:-6px}
.about-project-pair .about-message{margin-top:-6px}
.about-detail-image{aspect-ratio:3/2}
.about-message .about-image>img{object-fit:contain}
.about-visual figcaption,.about-person figcaption{font-size:10px;line-height:1.5;color:var(--muted);padding-top:8px;letter-spacing:.015em}
.about-visual figcaption{color:var(--ink);text-align:left}
.about-visual figcaption strong,.about-person figcaption strong{font-weight:600;color:var(--forest)}
.about-visual figcaption span,.about-person figcaption span{display:block;margin-top:2px}
.about-page .about-opening{padding-block:38px 28px;gap:48px}
.about-page .about-heading h1{font-size:48px;line-height:1.08;letter-spacing:-.045em;font-weight:400;margin:16px 0 18px;color:var(--forest);max-width:12ch}
.about-page .about-heading h1 .display-accent{color:inherit}
.about-page .about-heading>p{font-size:17px;line-height:1.6;max-width:40ch;color:var(--ink)}
.about-page .about-person{width:min(100%,270px);justify-self:start}
.about-page .about-person-image{aspect-ratio:4/5}
/* Crop the selected portrait inside its frame, including stacked source photos. */
.about-person-image>img.sdw-framed{--portrait-zoom:var(--frame-desktop-zoom);--portrait-x:var(--frame-desktop-x);--portrait-y:var(--frame-desktop-y);max-width:none;width:calc(100% * var(--portrait-zoom));height:calc(100% * var(--portrait-zoom));left:calc((1 - var(--portrait-zoom)) * var(--portrait-x));top:calc((1 - var(--portrait-zoom)) * var(--portrait-y));right:auto;bottom:auto;transform:none!important}
@media(max-width:900px){.about-person-image>img.sdw-framed{--portrait-zoom:var(--frame-tablet-zoom);--portrait-x:var(--frame-tablet-x);--portrait-y:var(--frame-tablet-y)}}
@media(max-width:560px){.about-person-image>img.sdw-framed{--portrait-zoom:var(--frame-mobile-zoom);--portrait-x:var(--frame-mobile-x);--portrait-y:var(--frame-mobile-y)}}
.about-page .about-prose p{font-size:15px;line-height:1.7;color:var(--muted);margin-bottom:14px;max-width:66ch}
.about-page .about-prose p:last-of-type{margin-bottom:12px}
.about-page .experience-section{padding-bottom:44px}
.about-page .section-head{align-items:flex-end;gap:28px;margin-bottom:20px}
.about-page .section-head h2{font-size:36px;line-height:1.12;letter-spacing:-.04em;margin-top:12px}
.about-page .section-head>p{font-size:13px;max-width:310px;line-height:1.6}
.about-page .experience-list article{grid-template-columns:minmax(130px,.65fr) minmax(0,2fr);gap:30px;padding-block:19px}
.about-page .experience-list h3{font-size:23px;line-height:1.2;letter-spacing:-.025em;margin-bottom:6px}
.about-page .experience-list p{font-size:13px;line-height:1.65;margin-top:8px}
.about-page .tools-section{padding-block:40px}
.about-page .tools-section h2{font-size:36px;line-height:1.12;letter-spacing:-.04em;margin:14px 0 24px}
.about-page .tool-columns{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 40px}
.about-page .tool-columns h3{font-size:19px;line-height:1.3;margin-bottom:8px}
.about-page .tool-columns p{font-size:13px;line-height:1.7}
.about-page .toolkit-layout{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:36px;align-items:start}
.toolkit-figure{min-width:0;position:relative;border-top:3px solid #b79a62;padding-top:12px}
.toolkit-image{aspect-ratio:4/3;background:var(--paper)}
.toolkit-image>img{object-fit:contain}
.toolkit-figure figcaption{font-size:10px;line-height:1.5;color:var(--muted);padding-top:10px}
.about-page .toolkit-layout .tool-columns{gap:24px 26px}
.toolkit-layout .tool-columns article{position:relative;border-top:var(--section-rule-width) solid var(--section-rule);padding-top:14px}
.tool-index{display:block;font-size:9px;line-height:1;color:var(--accent);letter-spacing:.08em;margin-bottom:10px}
.about-page .studio-audiences{gap:48px;padding-block:40px 44px}
.about-page .studio-audiences h2{font-size:32px;line-height:1.15;letter-spacing:-.035em;margin:14px 0}
.about-page .studio-audiences p{font-size:13px;line-height:1.65;margin-bottom:12px}

@media(max-width:1000px){
  .about-home,.about-page .about-opening{gap:28px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .about-home .studio-copy h2{font-size:40px}
  .about-workstation{width:94%}
  .about-project-pair{gap:12px}
  .about-page .about-heading h1{font-size:44px}
  .about-page .about-heading>p{font-size:16px}
}
@media(max-width:850px){
  .about-page .toolkit-layout{grid-template-columns:1fr;gap:28px}
  .toolkit-figure{width:min(100%,600px)}
  .about-home,.about-page .about-opening{grid-template-columns:1fr;gap:26px;padding-block:34px}
  .about-home .studio-copy{max-width:620px}
  .about-home .studio-copy h2{font-size:40px}
  .about-home .studio-copy>p{max-width:62ch}
  .about-home #audience-copy{max-width:60ch}
  .about-visual{width:min(100%,620px);justify-self:start}
  .about-page .about-workstation{margin-inline:0 auto}
  .about-workstation{width:78%}
  .about-project-pair{width:88%;margin-top:12px;gap:18px}
  .about-project-pair .about-message{margin-top:-6px}
  .about-page .about-heading h1{font-size:44px;max-width:none;margin-bottom:14px}
  .about-page .about-heading>p{max-width:58ch}
  .about-page .about-prose p{font-size:14px;line-height:1.65}
  .about-page .experience-section{padding-bottom:36px}
  .about-page .section-head h2,.about-page .tools-section h2{font-size:34px}
  .about-page .experience-list article{gap:24px}
  .about-page .studio-audiences{gap:32px;padding-block:34px}
  .about-atmosphere>img,.about-atmosphere>picture>img{opacity:.28}
  .about-atmosphere>svg{top:auto;bottom:0;height:760px;max-height:100%}
  .about-atmosphere:after{background:linear-gradient(180deg,color-mix(in srgb,var(--paper) 75%,transparent),color-mix(in srgb,var(--paper) 48%,transparent) 42%,transparent 68%),linear-gradient(0deg,var(--paper),transparent 14%)}
}
@media(max-width:560px){
  .about-page .toolkit-layout .tool-columns{grid-template-columns:1fr;gap:20px}
  .about-home,.about-page .about-opening{gap:22px;padding-block:28px}
  .about-home .studio-copy h2{font-size:36px;margin:14px 0}
  .about-home .studio-copy>p.lead{font-size:15px}
  .about-home .studio-copy>p{font-size:14px}
  .about-home .audience-tabs{gap:22px;margin-top:16px}
  .about-home .audience-tabs button{font-size:11px}
  .about-home #audience-panel{padding-top:14px}
  .about-workstation{width:92%}
  .about-project-pair{width:100%;gap:12px;margin-top:12px}
  .about-project-pair .about-place{margin-top:0}
  .about-project-pair .about-message{margin-top:0}
  .about-visual figcaption,.about-person figcaption{font-size:10px;padding-top:7px}
  .about-page .about-heading h1{font-size:40px;margin:14px 0}
  .about-page .about-heading>p{font-size:15px}
  .about-page .about-person{width:min(72%,240px);justify-self:start}
  .about-page .about-prose p{margin-bottom:12px}
  .about-page .section-head{margin-bottom:18px}
  .about-page .section-head h2,.about-page .tools-section h2{font-size:30px}
  .about-page .section-head>p{margin-top:12px;max-width:none}
  .about-page .experience-list article{grid-template-columns:1fr;gap:8px;padding-block:17px}
  .about-page .experience-list h3{font-size:22px}
  .about-page .experience-section{padding-bottom:30px}
  .about-page .tools-section{padding-block:30px}
  .about-page .tool-columns{grid-template-columns:1fr;gap:20px}
  .about-page .tools-section h2{margin-bottom:22px}
  .about-page .studio-audiences{grid-template-columns:1fr;gap:26px;padding-block:30px}
  .about-page .studio-audiences h2{font-size:29px;margin:12px 0}
  .about-atmosphere>img,.about-atmosphere>picture>img{opacity:.24}
  .about-atmosphere>svg{height:600px}
}

/* Home chapters 03 and 05 share a forest field and restrained cultivated geometry.
   The photo-and-band atmosphere remains available on the separate About page. */
.about-home{color:var(--on-dark);align-items:end;padding-block:54px 38px}
/* Keep the two study image bottoms on the action row; captions sit just below. */
.about-home .about-visual{width:min(100%,480px);align-self:end;justify-self:end;margin-bottom:-23px}
.about-home .about-workstation{width:100%;margin-inline:0}
/* Widen the workstation photo without increasing the desktop image height. */
.about-home .about-work-image{aspect-ratio:80/43}
.about-home .about-visual{top:-10px}
.about-home .chapter-marker{position:relative;top:-20px}
.about-home .about-work-image>img{--about-photo-x:var(--frame-desktop-x);--about-photo-y:calc(var(--frame-desktop-y) - 5.5%);object-position:var(--about-photo-x) var(--about-photo-y)!important;transform-origin:var(--about-photo-x) var(--about-photo-y)}
@media(max-width:900px){.about-home .about-work-image>img{--about-photo-x:var(--frame-tablet-x);--about-photo-y:calc(var(--frame-tablet-y) - 5.5%)}}
@media(max-width:560px){.about-home .about-work-image>img{--about-photo-x:var(--frame-mobile-x);--about-photo-y:calc(var(--frame-mobile-y) - 5.5%)}}
.about-home .about-project-pair{width:100%;margin-top:10px}
@media(max-width:680px){.about-home .about-workstation{margin-inline:auto}}
.about-page .button{min-height:36px;padding-block:6px}
@media(max-width:850px){.about-home{gap:24px;padding-block:40px 32px}.about-home .about-visual{width:min(100%,560px);justify-self:start;margin-bottom:0}}
@media(max-width:560px){.about-home{padding-top:32px}}
.about-home::before{content:'';position:absolute;inset:0 calc(-1 * var(--page-gutter));z-index:-2;background:var(--forest);pointer-events:none}
.about-home>.about-atmosphere{background:url('assets/services-cultivated-geometry.svg') left 22px/max(100%,900px) auto no-repeat;opacity:.8}
.about-home>.about-atmosphere>:is(img,picture,svg),.about-home>.about-atmosphere::after{display:none}
.about-home .studio-copy h2,.about-home .studio-copy>p.lead,.about-home #audience-title{color:var(--on-dark)}
.about-home .studio-copy>p,.about-home #audience-copy,.about-home .about-visual figcaption{color:#d7dfd3}
.about-home .studio-copy>p.studio-availability,.about-page .about-heading>p.studio-availability{border-left:2px solid #c7ab70;padding-left:14px;margin-top:18px;font-size:14px;line-height:1.65;max-width:48ch}
.about-home .studio-copy>p.studio-availability{color:var(--on-dark)}
.about-page .about-heading>p.studio-availability{color:var(--forest)}
.about-home .about-visual figcaption strong{color:var(--on-dark)}
.about-home .chapter-marker{color:var(--on-dark)}
.about-home .chapter-marker::after{background:linear-gradient(90deg,var(--chapter-line),transparent)}
.about-home .text-link{color:var(--on-dark);border-bottom-color:#c3d0bc}
.about-home .text-link:hover{color:var(--signal);border-bottom-color:var(--signal)}
.about-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:24px;max-width:460px}
.about-home .about-actions .text-link{position:relative;isolation:isolate;overflow:hidden;min-height:60px;padding:12px 14px;gap:10px;line-height:1.35;font-weight:600;color:var(--forest);background:color-mix(in srgb,var(--selection-accent) 78%,var(--paper));border:1px solid var(--selection-accent);border-bottom:2px solid var(--selection-shade);transition:background .2s,border-color .2s}
.about-actions .text-link::before{content:'';position:absolute;z-index:-1;width:112px;height:84px;right:-64px;top:-40px;border:1px solid currentColor;border-radius:50%;box-shadow:0 0 0 9px color-mix(in srgb,currentColor 6%,transparent),0 0 0 18px color-mix(in srgb,currentColor 4%,transparent);opacity:.16;pointer-events:none}
.about-home .about-actions .text-link:is(:hover,:focus-visible){color:var(--forest);background:var(--selection-accent);border-color:var(--paper);border-bottom-color:var(--selection-shade)}
@media(max-width:380px){.about-actions{grid-template-columns:1fr;gap:10px}.about-home .about-actions .text-link{min-height:52px}}
@media(prefers-reduced-motion:reduce){.about-actions .text-link{transition:none}}
.about-home .audience-tabs button{color:#c3d0c0}
.about-home .audience-tabs button[aria-selected=true]{color:var(--on-dark);border-bottom-color:#d3b779;font-weight:600}
.about-home .audience-tabs button:hover{color:var(--signal)}
.about-home :is(.text-link,.audience-tabs button,#audience-panel):focus-visible{outline-color:var(--signal)}
@media(forced-colors:active){
 .about-home::before{background:Canvas}
 .about-home>.about-atmosphere{display:none}
 .about-home :is(.studio-copy h2,.studio-copy>p,.studio-copy>p.lead,#audience-title,#audience-copy,.about-visual figcaption,.about-visual figcaption strong){color:CanvasText}
 .about-home :is(.chapter-marker,.text-link){color:LinkText}
 .about-home .audience-tabs button{color:ButtonText}
 .about-home .audience-tabs button[aria-selected=true]{color:Highlight;border-bottom-color:Highlight}
 .about-home .about-actions .text-link{color:LinkText;background:Canvas;border-color:LinkText}
 .about-actions .text-link::before{display:none}
 .about-home .about-actions .text-link:is(:hover,:focus-visible){color:Highlight;background:Canvas;border-color:Highlight}
 .about-home :is(.text-link,.audience-tabs button,#audience-panel):focus-visible{outline-color:Highlight}
}

/* One compact introduction replaces the repeated homepage image group. */
.about-page .about-opening{grid-template-columns:minmax(0,.78fr) minmax(0,1.72fr);align-items:start;gap:36px;padding-block:36px}
.about-page .about-opening .about-atmosphere img{opacity:.18}
.about-page .about-heading h1{font-size:44px;margin-block:14px 16px}
.about-page .about-heading>p{font-size:16px;line-height:1.65;max-width:38ch}
.about-profile{display:grid;grid-template-columns:minmax(150px,210px) minmax(0,1fr);align-items:start;gap:24px;min-width:0}
.about-profile .about-person{width:100%;max-width:210px}
.about-profile .about-prose{min-width:0;padding-top:15px}
.about-profile .about-prose p{font-size:14px;line-height:1.65;margin-bottom:14px;max-width:58ch;color:var(--ink)}
.about-profile .text-link{font-size:12px;margin-top:2px}
@media(max-width:1060px){
 .about-page .about-opening{grid-template-columns:1fr;gap:22px;padding-block:30px}
 .about-page .about-heading h1{max-width:none;font-size:40px;margin-block:12px 14px}
 .about-page .about-heading>p{max-width:68ch}
 .about-profile{grid-template-columns:minmax(150px,210px) minmax(0,1fr);gap:28px}
}
@media(max-width:560px){
 .about-page .about-opening{padding-block:26px;gap:20px}
 .about-page .about-heading h1{font-size:36px}
 .about-page .about-heading>p{font-size:15px}
 .about-page .about-opening>.about-atmosphere{transform:translateY(-150px);mask-image:linear-gradient(180deg,transparent,#000 70px,#000 calc(100% - 140px),transparent),linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);mask-composite:intersect}
 .about-profile{grid-template-columns:1fr;gap:18px}
 .about-profile .about-person{width:min(60%,210px);max-width:210px}
 .about-profile .about-prose p{font-size:14px;max-width:none}
 .about-profile .about-prose{padding-top:0}
}
