/* About page layout only. Components and tokens live in site.css. */

/* ---------- page head: copy on bone, a daylight room running off the right edge ---------- */
.ph{padding-bottom:clamp(56px,6vw,104px)}
.ph__in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
.ph__media{position:relative;grid-column:7 / -1;grid-row:1;margin-right:calc(var(--edge) * -1);min-height:clamp(520px,calc(100svh - 112px - 136px),720px);overflow:hidden;background:var(--linen)}
.ph__media picture,.ph__media img{position:absolute;inset:0;width:100%;height:100%}
.ph__media img{object-fit:cover;object-position:40% 50%}
.ph__cap{position:absolute;left:var(--space-md);bottom:var(--space-md);z-index:2}
.ph__text{grid-column:1 / 7;grid-row:1;display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-xl);padding:var(--space-2xs) clamp(0px,3vw,48px) 0 0}
.ph__copy{display:grid;gap:var(--space-md)}
.ph h1{display:grid;gap:var(--space-sm);font-weight:inherit}
.ph__kicker{font-size:var(--fs-ui);font-weight:500;line-height:1.35;color:var(--ink-2);letter-spacing:.01em}
.ph__display{font-family:var(--display);font-size:var(--fs-display);font-weight:340;line-height:.98;letter-spacing:-.02em;text-wrap:balance}
.ph__lede{font-size:var(--fs-lead);line-height:1.5;color:var(--ink-2);max-width:42ch}
.ph__meta{display:flex;flex-wrap:wrap;row-gap:4px;padding-top:var(--space-xs);border-top:1px solid var(--rule);font-size:var(--fs-small);line-height:1.5;color:var(--ink-2)}
.ph__meta li + li::before{content:"·";margin-inline:.65em;color:var(--ink-3)}
.ph__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xs) var(--space-md);margin-top:var(--space-2xs)}
@media (prefers-reduced-motion:no-preference){
  .ph__media img{animation:phSettle 2.4s var(--ease-expo) both}
  .ph__copy > *{animation:phRise 1.1s var(--ease-expo) both}
  .ph__copy > :nth-child(2){animation-delay:.08s}
  .ph__copy > :nth-child(3){animation-delay:.16s}
  .ph__copy > :nth-child(4){animation-delay:.24s}
  .ph__cap{animation:fadeIn 1s .9s var(--ease-quart) both}
}
@keyframes phSettle{from{transform:scale(1.05)}to{transform:none}}
@keyframes phRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---------- approach: one statement, set large ---------- */
.ab-approach{padding-top:0}
.ab-approach .grid{row-gap:var(--space-lg);padding-top:clamp(32px,3.4vw,48px);border-top:1px solid var(--ink)}
.ab-approach__t{grid-column:1 / 6}
.ab-approach__body{grid-column:7 / 13;display:grid;gap:var(--space-md);align-content:start}
.ab-approach__lead{font-family:var(--display);font-size:var(--fs-h3);font-weight:380;line-height:1.3;letter-spacing:-.005em;max-width:34ch}
.ab-approach__body .muted{max-width:56ch}

/* ---------- what we do: photo held on the left, the three parts on the right ---------- */
.ab-do{padding-top:0}
.ab-do__fig{grid-column:1 / 6;grid-row:1;align-self:start;position:sticky;top:calc(var(--hdr-h) + var(--space-md))}
.ab-do__body{grid-column:7 / 13;grid-row:1;display:grid;gap:var(--space-xl);align-content:start;padding-top:clamp(0px,6vw,96px)}
.ab-do__list{border-top:1px solid var(--ink)}
.ab-do__list li{display:grid;grid-template-columns:7.5rem minmax(0,1fr);grid-template-areas:"who t" "who p";gap:var(--space-2xs) var(--gutter);padding:var(--space-md) 0;border-bottom:1px solid var(--rule)}
.ab-who{grid-area:who;font-size:var(--fs-small);font-weight:600;color:var(--ink-2);padding-top:8px}
.ab-do__t{grid-area:t;font-family:var(--display);font-size:var(--fs-h3);font-weight:440;line-height:1.15}
.ab-do__list li > p:last-child{grid-area:p;font-size:var(--fs-ui);line-height:1.6;color:var(--ink-2);max-width:48ch}
.ab-do__for{display:grid;gap:var(--space-xs);font-size:var(--fs-ui);line-height:1.55;color:var(--ink-2)}
.ab-do__for b{font-weight:600;color:var(--ink)}
.ab-do__for p:last-child{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--space-sm)}
.ab-do__for .link-arrow{color:var(--ink);min-height:44px}

/* ---------- the panels: a stack of sheets drawn to proportion + the spec ---------- */
.ab-sheet__head{grid-column:1 / 7;grid-row:1}
.ab-sheet__fig{grid-column:1 / 6;grid-row:2;margin-top:clamp(40px,5vw,72px)}
.ab-sheet__spec{grid-column:7 / 13;grid-row:1 / 3;align-self:end;display:grid;gap:var(--space-xl)}
.sheets{position:relative;width:min(100%,440px);aspect-ratio:10 / 13.6;--w:50%}
.sheets__s{position:absolute;width:var(--w);aspect-ratio:4 / 9;overflow:hidden;background:var(--paper);box-shadow:0 36px 40px -30px oklch(0.15 0.02 60 / .5),0 0 0 1px oklch(0.25 0.02 60 / .07)}
.sheets__s picture,.sheets__s img{display:block;width:100%;height:100%;object-fit:cover}
.sheets__s--1{left:0;top:0}
.sheets__s--2{left:15%;top:4%}
.sheets__s--3{left:30%;top:8%}
/* dimension lines, drafted like a spec sheet */
.dim{position:absolute;display:grid;place-items:center;color:var(--ink-2)}
.dim > span{position:relative;z-index:1;padding:0 8px;background:var(--linen);font-size:var(--fs-small);line-height:1;white-space:nowrap}
.dim::before{content:"";position:absolute;background:var(--ink-3)}
.dim::after{content:"";position:absolute;border:0 solid var(--ink-3)}
.dim--w{left:30%;width:var(--w);top:calc(8% + 82.7% + 18px);height:16px}
.dim--w::before{left:0;right:0;top:50%;height:1px}
.dim--w::after{inset:0;border-width:0 1px}
.dim--h{left:calc(80% + 18px);width:16px;top:8%;height:82.7%}
.dim--h::before{top:0;bottom:0;left:50%;width:1px}
.dim--h::after{inset:0;border-width:1px 0}
.dim--h > span{padding:6px 0}
/* the front sheet shows its edge (a 4 px foot and side, drawn as thickness); "5 mm" is called out at the foot, from outside the stack */
.sheets__s--3{overflow:visible}
.sheets__s--3::before,.sheets__s--3::after{content:"";position:absolute;transform-origin:0 0}
.sheets__s--3::before{top:0;bottom:0;right:-4px;width:4px;transform:skewY(45deg);background:oklch(0.66 0.045 74)}
.sheets__s--3::after{left:0;right:0;bottom:-4px;height:4px;transform:skewX(45deg);background:oklch(0.58 0.045 70)}
.sheets__edge{position:absolute;right:calc(70% - 7px);top:calc(8% + 82.7% + 2px);z-index:2;display:flex;flex-direction:row-reverse;align-items:center;transform:translateY(-50%)}
.sheets__edge .callout__dot{width:11px;height:11px;box-shadow:0 0 0 4px oklch(0.956 0.011 82 / .6)}
.sheets__edge .callout__line{width:22px;background:var(--ink-3)}
.sheets__edge .chip{background:var(--bone);border-color:transparent;min-height:30px;padding:5px 10px;color:var(--ink-2);white-space:nowrap}
.ab-sheet__fig .cap{max-width:440px}
.ab-spec > div{grid-template-columns:6.5rem 1fr}
.ab-sheet__more{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--space-md);padding-top:var(--space-sm);border-top:1px solid var(--rule);font-size:var(--fs-ui);color:var(--ink-2)}
.ab-sheet__more a{color:var(--ink)}

/* ---------- process: one line, four names on it ---------- */
.ab-process .sec-head{margin-bottom:clamp(40px,5vw,72px)}
.steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gutter)}
.steps::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--ink)}
.steps li{position:relative;display:grid;gap:var(--space-2xs);align-content:start;padding-top:var(--space-lg)}
.steps li::before{content:"";position:absolute;left:0;top:-5px;width:11px;height:11px;border-radius:50%;background:var(--bone);box-shadow:inset 0 0 0 1px var(--ink)}
.steps .is-gift::before{background:var(--tobacco);box-shadow:0 0 0 4px oklch(0.41 0.072 55 / .16)}
.steps__who{font-size:var(--fs-small);font-weight:600;color:var(--ink-2)}
.steps .is-gift .steps__who{color:var(--tobacco)}
.steps__t{font-family:var(--display);font-size:var(--fs-h3);font-weight:440;line-height:1.2;text-wrap:balance}
.steps li > p:last-child{margin-top:4px;font-size:var(--fs-ui);line-height:1.55;color:var(--ink-2);max-width:34ch}

/* ---------- service area: the coast, north to south ---------- */
.ab-area{padding-top:0}
.ab-area .grid{row-gap:var(--space-xl);padding-top:clamp(40px,4vw,64px);border-top:1px solid var(--rule)}
.ab-area__head{grid-column:1 / 6;display:grid;gap:var(--space-md);align-content:start}
.ab-area__head .muted{max-width:46ch}
.coast{grid-column:7 / 13;position:relative;margin-left:6px;border-left:1px solid var(--ink)}
.coast::before,.coast::after{position:absolute;left:var(--space-lg);font-size:var(--fs-small);line-height:1.4;color:var(--ink-3)}
.coast::before{content:"North";top:-1.6em}
.coast::after{content:"South";bottom:-1.8em}
.coast li{position:relative;display:grid;gap:4px;padding:var(--space-md) 0 var(--space-md) var(--space-lg);border-bottom:1px solid var(--rule)}
.coast li:last-child{border-bottom:0}
.coast li::before{content:"";position:absolute;left:0;top:calc(var(--space-md) + .75em);width:18px;height:1px;background:var(--ink)}
.coast__county{font-family:var(--display);font-size:var(--fs-h3);font-weight:400;line-height:1.15}
.coast__towns{display:flex;flex-wrap:wrap;align-items:center;gap:2px var(--space-md);font-size:var(--fs-ui);color:var(--ink-2)}
.coast__studio{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-weight:500}
.coast__pin{flex:none;width:13px;height:13px;border-radius:50%;background:var(--bone);box-shadow:0 0 0 1px var(--rule-strong),0 0 0 5px oklch(0.62 0.12 45 / .12);display:grid;place-items:center}
.coast__pin::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--clay)}
.coast__studio small{font-size:var(--fs-small);font-weight:400;color:var(--ink-2)}

/* ---------- quick facts: short sentences that stand on their own ---------- */
.ab-facts__head{grid-column:1 / 5;align-self:start;position:sticky;top:calc(var(--hdr-h) + var(--space-lg));display:grid;gap:var(--space-sm);align-content:start}
.ab-facts__head .muted{max-width:34ch}
.qf-d{grid-column:6 / 13}
.qf-d__sum{list-style:none}
.qf-d__sum::-webkit-details-marker{display:none}
.qf{border-top:1px solid var(--ink)}
.qf > div{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:var(--space-2xs) var(--gutter);padding:var(--space-sm) 0;border-bottom:1px solid var(--rule)}
.qf dt{font-size:var(--fs-small);font-weight:600;line-height:1.6;color:var(--ink-2);padding-top:2px}
.qf dd{line-height:1.6;max-width:62ch}
.qf a{position:relative;text-decoration-color:var(--rule-strong)}
.qf a::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:44px;transform:translateY(-50%)}
.qf a:hover{text-decoration-color:currentColor}

/* contact band: shared component, site.css 14b */

/* ---------- responsive ---------- */
/* short desktop screens (1366×657, 1280×650): the primary button stays on the first screen */
@media (min-width:901px) and (max-height:820px){
  .ph__media{min-height:clamp(440px,calc(100svh - 150px),560px)}
  .ph__text{gap:var(--space-lg)}
  .ph__copy{gap:var(--space-sm)}
  .ph__display{font-size:min(var(--fs-display),3.5rem)}
  .ph__lede{font-size:1.125rem}
}
@media (min-width:761px){
  .qf-d__sum{display:none}
}
@media (max-width:1180px){
  .ph__meta{column-gap:var(--space-md)}
  .ph__meta li + li::before{content:none}
  .ph__media{grid-column:7 / -1}
  .ph__text{grid-column:1 / 7;padding-right:var(--space-sm)}
  .ph__display{font-size:min(var(--fs-display),3.25rem)}
  .ph__lede{font-size:1.125rem}
  .ab-do__list li{grid-template-columns:1fr;grid-template-areas:"who" "t" "p"}
  .ab-who{padding-top:0}
}
@media (max-width:900px){
  .ph{padding-bottom:var(--space-2xl)}
  .ph__in{display:flex;flex-direction:column}
  .ph__media{order:-1;min-height:0;height:clamp(240px,60vw,460px);margin-inline:calc(var(--margin) * -1)}
  .ph__media img{object-position:22% 50%}
  .ph__cap{display:none}
  .ph__text{padding:var(--space-sm) 0 0;gap:var(--space-sm)}
  .ph__copy{gap:var(--space-sm)}
  .ph__lede{font-size:1.0625rem}
  .ph__actions{gap:var(--space-2xs) var(--space-sm)}
  .ab-approach__t,.ab-approach__body,.ab-do__fig,.ab-do__body,.ab-sheet__head,.ab-sheet__fig,.ab-sheet__spec,
  .ab-area__head,.coast,.ab-facts__head,.qf-d{grid-column:1 / -1;grid-row:auto}
  .ab-do__fig{position:static;margin-top:var(--space-xl)}
  .ab-facts__head{position:static}
  .ab-do__fig .media{aspect-ratio:3 / 2}
  .ab-do__body{padding-top:0}
  .ab-sheet__fig{margin-top:var(--space-xl)}
  .sheets{width:min(100%,340px)}
  .ab-sheet__spec{margin-top:var(--space-xl)}
  .steps{grid-template-columns:1fr;padding-left:var(--space-lg)}
  .steps::before{left:5px;right:auto;top:6px;bottom:6px;width:1px;height:auto}
  .steps li{padding:0 0 var(--space-lg)}
  .steps li:last-child{padding-bottom:0}
  .steps li::before{left:calc(var(--space-lg) * -1);top:6px}
  .steps li > p:last-child{max-width:52ch}
  .coast{margin-top:var(--space-lg)}
  .qf-d{margin-top:var(--space-lg)}
}
/* phones: the same story, shorter */
@media (max-width:760px){
  .page-about{--section:60px}
  .ph__media{height:clamp(220px,56vw,320px)}
  .ph__meta li:first-child{display:none}
  .ph__actions .link-arrow{display:none}
  .ab-do__list li{padding:var(--space-sm) 0}
  .ab-do__t{font-size:1.375rem}
  .crumbs{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .steps__t{font-size:1.375rem}
  .sheets__edge .callout__line{width:10px}
  .sheets__edge .chip{padding:5px 8px}
  .qf-d{margin-top:var(--space-md)}
  .qf-d__sum{display:flex;align-items:center;justify-content:space-between;min-height:52px;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule);font-weight:500;cursor:pointer}
  .qf-d__sum::after{content:"";width:14px;height:14px;background:linear-gradient(currentColor,currentColor) center/100% 1px no-repeat,linear-gradient(currentColor,currentColor) center/1px 100% no-repeat;transition:transform .45s var(--ease-expo)}
  .qf-d[open] .qf-d__sum::after{transform:rotate(45deg)}
  .qf-d[open] .qf{border-top:0}
  .qf > div{grid-template-columns:1fr;gap:2px;padding:var(--space-xs) 0}
}
/* short phones (375×667, 360×640): the button stays on the first screen */
@media (max-width:760px) and (max-height:740px){
  .ph__media{height:clamp(120px,34vw,160px)}
  .ph__text{padding-top:var(--space-xs)}
  .ph__copy,.ph h1{gap:var(--space-xs)}
  .ph__lede{font-size:1rem;line-height:1.45}
}