.topbar-actions { display:flex; justify-self:end; align-items:center; }
.topbar-actions .home-button { width:44px; min-width:44px; padding:0; }
.about-panel {
  position:fixed; inset:0; margin:0 auto; width:min(100%,1080px); max-width:1080px;
  height:100dvh; max-height:100dvh; padding:0; border:0; color:var(--ink);
  background:var(--paper); overflow:hidden; font-family:"GT Zirkon","Avenir Next",sans-serif;
}
.about-panel::backdrop { background:rgba(15,22,18,.48); }
.about-shell { position:relative; height:100%; display:grid; grid-template-rows:auto auto minmax(0,1fr); }
/* One close control for every screen size: a floating disc, bottom right, ringed in paper so it reads over dark bands and photos. */
.about-close {
  position:absolute; right:clamp(16px,3vw,32px); bottom:calc(env(safe-area-inset-bottom,0px) + clamp(16px,3vw,32px));
  width:clamp(60px,7vw,84px); height:clamp(60px,7vw,84px); border-radius:50%; border:0;
  display:grid; place-items:center; background:var(--deep); color:var(--white);
  box-shadow:0 0 0 3px var(--paper), 0 10px 28px rgba(15,22,18,.28); z-index:5;
  transition:transform 160ms cubic-bezier(.22,.65,.2,1);
}
.about-close svg { width:42%; height:42%; }
.about-close:active { transform:scale(.94); }
.about-close:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
.about-header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:calc(env(safe-area-inset-top,0px) + 16px) 4.5% 16px; border-bottom:1px solid var(--line); }
.about-header .brand-mark { width:clamp(132px,20vw,190px); }
.about-chapters { display:flex; gap:24px; overflow-x:auto; padding:0 4.5%; border-bottom:1px solid var(--line); scrollbar-width:thin; }
.about-chapters button { flex:0 0 auto; min-height:54px; padding:8px 0; color:var(--ink); background:none; border-bottom:2px solid transparent; font-size:clamp(14px,1.7vw,18px); }
.about-chapters button[aria-current="location"] { border-bottom-color:var(--deep); }
.about-scroll { overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; scroll-behavior:smooth; }
.about-scroll:focus-visible { outline:2px solid var(--deep); outline-offset:-3px; }
.about-panel h1,.about-panel h2,.about-panel h3,.about-panel p,.about-panel figure { margin:0; }
.about-panel h1,.about-panel h2 { font-weight:300; letter-spacing:-.035em; text-wrap:balance; line-height:1.05; }
.about-panel p { font-size:clamp(17px,2.2vw,23px); line-height:1.55; max-width:55ch; }
.about-panel h2 { font-size:clamp(36px,6.3vw,68px); }
.about-panel h3 { font-size:clamp(21px,3vw,30px); font-weight:400; line-height:1.2; }
.about-cover { padding:clamp(32px,6vw,68px) 4.5% 0; }
.about-edition { display:flex; justify-content:space-between; gap:16px; font-size:clamp(12px,1.6vw,16px); letter-spacing:.05em; margin-bottom:30px; }
.about-cover h1 { font-size:clamp(48px,8.5vw,92px); color:var(--deep); max-width:11ch; }
.about-cover-intro { display:grid; grid-template-columns:1.3fr 1fr; gap:5%; align-items:end; margin-bottom:38px; }
.about-cover-intro p { font-size:clamp(18px,2.3vw,25px); }
.about-cover-image { width:100%; height:auto; aspect-ratio:1.65; object-fit:cover; display:block; }
.about-panel figcaption { padding:12px 0; font-size:clamp(12px,1.6vw,16px); line-height:1.4; color:var(--ink); }
.about-spread { padding:clamp(48px,8vw,88px) 4.5%; }
.about-split { display:grid; grid-template-columns:1fr 1.25fr; gap:8%; align-items:start; }
.about-copy { display:grid; gap:24px; }
.about-lead { font-size:clamp(24px,3.3vw,36px)!important; line-height:1.35!important; }
.about-rule { border-top:1px solid var(--line); padding-top:24px; margin-top:32px; }
.about-panel figure.about-rule { margin-top:32px; }
.about-scale { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:44px; padding-top:24px; border-top:1px solid var(--line); }
.about-scale strong { display:block; font-size:clamp(42px,7vw,76px); font-weight:300; line-height:1.15; letter-spacing:-.035em; }
.about-scale span { display:block; margin-top:8px; font-size:clamp(15px,2vw,20px); }
.about-dark { background:var(--deep); color:var(--white); }
.about-dark figure { margin-top:36px; }
.about-wide-image { display:block; width:100%; height:auto; aspect-ratio:1.8; object-fit:cover; }
.about-dark figcaption { color:var(--white); opacity:.85; }
.about-feature { display:grid; grid-template-columns:1.1fr 1fr; gap:6%; align-items:center; }
.about-feature img { width:100%; height:auto; aspect-ratio:.85; object-fit:cover; display:block; }
.about-feature .about-copy { padding:24px 0; }
.about-process { margin-top:44px; display:grid; gap:24px; }
.about-process div { display:grid; grid-template-columns:1fr 1.6fr; gap:6%; padding-top:22px; border-top:1px solid var(--line); }
.about-process p { font-size:clamp(17px,2.1vw,22px); }
.about-land { position:relative; min-height:430px; display:grid; align-items:end; padding:8% 4.5%; color:white; background:var(--deep); }
.about-land img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 70%; }
.about-land::after { content:""; position:absolute; inset:0; background:linear-gradient(transparent,rgba(15,22,18,.8)); }
.about-land div { position:relative; z-index:1; max-width:650px; display:grid; gap:24px; }
.about-support { background:var(--sage); }
.about-links { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.about-website { display:flex; align-items:center; gap:clamp(16px,3vw,32px); margin-top:28px; }
.about-website span { color:var(--ink); font-size:clamp(19px,2.5vw,28px); }
.about-website img { display:block; width:clamp(112px,16vw,176px); height:auto; flex-shrink:0; }
.about-links a,.about-back { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:12px 20px; background:var(--deep); color:var(--white); border-radius:4px; text-decoration:none; font-size:clamp(16px,2vw,20px); }
.about-footer { padding:36px 4.5% calc(32px + env(safe-area-inset-bottom,0px)); display:grid; gap:20px; }
.about-footer p { font-size:14px; }
.about-footer a { color:var(--ink); text-underline-offset:4px; }
.about-back { justify-self:start; }
@media (max-width:600px) {
  .about-header { padding:calc(env(safe-area-inset-top,0px) + 8px) 20px 8px; }
  .about-chapters { gap:12px; padding-inline:20px; justify-content:space-between; }
  .about-chapters button { min-height:48px; font-size:13px; }
  .about-cover,.about-spread,.about-footer { padding-left:24px; padding-right:24px; }
  .about-cover-intro { grid-template-columns:1fr; gap:24px; margin-bottom:28px; }
  .about-edition { margin-bottom:24px; }
  .about-cover-image { aspect-ratio:1.15; }
  .about-split,.about-feature { grid-template-columns:1fr; gap:28px; }
  .about-scale { gap:20px; margin-top:28px; }
  .about-feature img { aspect-ratio:1.15; }
  .about-feature .about-copy { padding:0; }
  .about-process div { grid-template-columns:1fr; gap:12px; }
  .about-land { min-height:430px; padding:48px 24px; }
  .about-panel h2 { max-width:14ch; }
}
@media (max-width:479px) {
  .about-chapters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 8px; }
  .about-chapters button { font-size:14px; }
}
@media (prefers-reduced-motion:reduce) { .about-scroll { scroll-behavior:auto; } }