/* The personal side of the portfolio, using the shared type and palette. */
.about-page{--about-gutter:clamp(24px,5.5vw,96px)}
.about-page .about-back{display:inline-flex;gap:10px;margin-bottom:42px;font:10px/1.7 var(--mono);letter-spacing:.07em;text-decoration:none;color:var(--muted)}
.about-page .about-back:hover{color:var(--ink)}
.about-introduction{padding:46px var(--about-gutter) 84px;position:relative}
.about-intro-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.75fr);gap:clamp(38px,7vw,110px);align-items:start}
.about-personal-copy .eyebrow{margin:0 0 23px}
.about-personal-copy h1{font-size:clamp(46px,5.8vw,90px);line-height:1.05;letter-spacing:-.065em;font-weight:650;margin:0 0 34px}
.about-personal-copy h1 em{display:block;color:#748b2a;font-family:var(--serif);font-weight:400;letter-spacing:-.07em}
.about-personal-copy>p:not(.eyebrow){max-width:720px;font-size:16px;line-height:1.9;color:#51574d;margin:0 0 20px}
.about-personal-copy>p.about-first-line{font-size:19px;line-height:1.75;color:var(--ink)}
.about-personal-copy a{color:var(--ink);text-decoration-color:#9aa871;text-underline-offset:4px}
.about-personal-copy a:hover{color:#657d24}
.about-personal-portrait{position:relative;margin:20px 0 0;isolation:isolate}
.about-personal-portrait:before{content:'';position:absolute;inset:-20px 18px 60px -18px;border:1px solid #cbd4ac;border-radius:220px 220px 20px 20px;z-index:-1;transform:rotate(-4deg)}
.about-personal-portrait img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:center 24%;border-radius:210px 210px 16px 16px}
.about-personal-portrait figcaption{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:18px;font:9px/1.7 var(--mono);letter-spacing:.07em;color:var(--muted)}
.about-portrait-star{position:absolute;top:6%;right:-15px;display:grid;place-items:center;width:58px;height:58px;background:var(--acid);color:#566c24;border-radius:50%;font:36px/1 var(--serif)}
.about-life-note{margin:54px 0 0;padding:30px 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:.35fr 1fr;gap:40px;align-items:start}
.about-life-note .eyebrow{margin:7px 0 0}
.about-life-note blockquote{margin:0;max-width:1020px;font:italic 400 clamp(24px,2.8vw,40px)/1.45 var(--serif);color:#63782d;letter-spacing:-.035em}
.about-gallery{padding:78px var(--about-gutter) 96px;background:#eeeee5;border-block:1px solid #e2e3d9;scroll-margin-top:96px}
.about-gallery-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:36px;margin-bottom:38px}
.about-gallery-heading .eyebrow{margin:0 0 20px}
.about-gallery-heading h2{font:650 clamp(36px,4.5vw,66px)/1.08 var(--sans);letter-spacing:-.06em;margin:0}
.about-gallery-heading h2 em{display:block;font-family:var(--serif);font-weight:400;color:#748b2a}
.about-gallery-intro{max-width:320px;margin:0 0 3px;color:var(--muted);font-size:14px;line-height:1.85}
.about-gallery-intro span{display:block;margin-top:14px;font:9px/1.6 var(--mono);letter-spacing:.08em;color:#6a774a}
.about-gallery-filters{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 30px}
.about-gallery-filters[hidden]{display:none}
.about-gallery-filters button{appearance:none;min-height:42px;padding:10px 18px;border:1px solid #ccd1bf;border-radius:99px;background:transparent;color:var(--ink);font:500 12px/1.5 var(--sans);cursor:pointer;transition:background .18s,border-color .18s}
.about-gallery-filters button:hover{background:#e0e6d0;border-color:#b7c393}
.about-gallery-filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.about-gallery-filters button:focus-visible,.about-photo-link:focus-visible{outline:2px solid #748b2a;outline-offset:4px}
.about-gallery-grid{column-count:3;column-gap:22px}
.about-photo{position:relative;break-inside:avoid;overflow:hidden;isolation:isolate;margin:0 0 22px;border-radius:14px;background:#dfe4d5}
.about-photo[hidden]{display:none}
.about-photo-link{display:block;position:relative;border-radius:14px}
.about-photo img{display:block;width:100%;height:auto;transition:transform .3s}
.about-photo:hover img{transform:scale(1.025)}
.about-photo-open{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:32px;height:32px;border:1px solid #ffffff80;border-radius:50%;background:#f6f5f1d9;color:var(--ink);font-size:17px;opacity:0;transition:opacity .2s}
.about-photo figcaption{position:absolute;bottom:0;left:0;right:0;pointer-events:none;padding:42px 20px 19px;color:#fff;background:linear-gradient(transparent,#151715b3);font:500 13px/1.6 var(--sans);opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s}
.about-photo:hover figcaption,.about-photo:focus-within figcaption{opacity:1;transform:none}
.about-photo:hover .about-photo-open,.about-photo:focus-within .about-photo-open{opacity:1}
.about-gallery-status{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.about-photo-dialog{width:min(1000px,calc(100% - 32px));max-height:calc(100dvh - 32px);margin:auto;padding:0;border:1px solid #62694d;border-radius:18px;background:var(--ink);color:var(--paper);overflow:auto;overscroll-behavior:contain;box-shadow:0 25px 100px #0006}
.about-photo-dialog::backdrop{background:#0e100de6;backdrop-filter:blur(7px)}
.about-photo-viewer{padding:20px 24px}
.about-photo-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.about-photo-toolbar .eyebrow{color:#cbd5af;margin:0;font-size:9px}
.about-photo-close,.about-photo-navigation button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:44px;padding:9px 17px;border:1px solid #686e60;border-radius:99px;background:transparent;color:var(--paper);font:500 12px/1.5 var(--sans);cursor:pointer}
.about-photo-close>span{font-size:24px;line-height:1}
.about-photo-close:hover,.about-photo-navigation button:hover{background:var(--acid);border-color:var(--acid);color:var(--ink)}
.about-photo-dialog button:focus-visible{outline:2px solid var(--acid);outline-offset:4px}
.about-photo-viewer figure{margin:0}
.about-full-photo{display:block;width:auto;height:auto;max-width:100%;max-height:calc(100dvh - 225px);margin:auto;object-fit:contain;border-radius:8px}
#about-photo-caption{text-align:center;font-size:14px;line-height:1.65;margin:15px 0;color:#e9ebdf}
.about-photo-navigation{display:flex;justify-content:space-between;gap:18px;margin-top:18px}
html.photo-viewing{overflow:hidden}
@media(min-width:1250px){.about-gallery-grid{column-count:4}}
@media(max-width:800px){.about-gallery-grid{column-count:2;column-gap:16px}.about-photo{margin-bottom:16px}}
@media(max-width:950px){
  .about-intro-layout{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:36px}
  .about-personal-copy h1{font-size:clamp(42px,5.5vw,58px)}
  .about-personal-copy>p:not(.eyebrow){font-size:15px}
  .about-personal-copy>p.about-first-line{font-size:17px}
  .about-personal-portrait{margin-top:38px}
  .about-life-note{grid-template-columns:1fr;gap:18px}
  .about-gallery-heading{display:block}
  .about-gallery-intro{margin-top:25px;max-width:520px}
}
@media(max-width:650px){
  .about-page{--about-gutter:22px}
  .about-introduction{padding-top:30px;padding-bottom:56px}
  .about-page .about-back{margin-bottom:34px}
  .about-intro-layout{display:flex;flex-direction:column;gap:34px}
  .about-personal-copy h1{font-size:clamp(42px,10vw,58px);margin-bottom:26px}
  .about-personal-copy .eyebrow{font-size:8px;margin-bottom:19px}
  .about-personal-portrait{margin:0 auto;max-width:340px;width:88%}
  .about-personal-portrait figcaption{font-size:8px}
  .about-portrait-star{width:45px;height:45px;font-size:28px;right:-12px}
  .about-life-note{margin-top:36px;padding-top:26px}
  .about-life-note blockquote{font-size:26px}
  .about-gallery{padding-top:54px;padding-bottom:62px}
  .about-gallery-heading h2{font-size:clamp(34px,8.2vw,46px)}
  .about-gallery-filters{gap:8px;margin-bottom:24px}
  .about-gallery-filters button{padding:9px 13px;font-size:11px}
  .about-gallery-grid{column-gap:14px}
  .about-photo{margin-bottom:14px;border-radius:10px}
  .about-photo-link{border-radius:10px}
  .about-photo-open{width:28px;height:28px;top:8px;right:8px;opacity:1}
  .about-photo-dialog{width:calc(100% - 20px);max-height:calc(100dvh - 20px);border-radius:14px}
  .about-photo-viewer{padding:16px}
  .about-photo-toolbar .eyebrow{font-size:7px;max-width:150px;line-height:1.8}
  .about-photo-close{padding-inline:13px}
  .about-full-photo{max-height:calc(100dvh - 230px)}
}
@media(prefers-reduced-motion:reduce){.about-photo img,.about-photo figcaption,.about-photo-open,.about-gallery-filters button{transition:none}}