.about-page{
  /* Shared subpage primitives: one safe area and one fluid type scale. */
  --subpage-content-max:1180px;
  --subpage-gutter:clamp(20px,5vw,72px);
  --subpage-grid-gap:clamp(48px,6vw,88px);
  --subpage-hero-title:clamp(3.25rem,calc(2rem + 4.2vw),7.5rem);
  --subpage-section-title:clamp(2.7rem,7.2cqi,5rem);
  --subpage-statement:clamp(1.45rem,calc(1rem + 1.35vw),2.3rem);
  --subpage-headline-leading:.94;
  --about-max:var(--subpage-content-max);
  --about-side:var(--subpage-gutter);
  overflow-x:clip;
  background:#15110f;
}
.about-page main{overflow:clip}
.about-wrap{
  container-type:inline-size;
  width:min(var(--about-max),calc(100% - var(--about-side) - var(--about-side)));
  margin-inline:auto;
}
.about-page :where(h1,h2,p,blockquote,figure){min-width:0;overflow-wrap:break-word}
.about-site-header{position:absolute;z-index:20;inset:0 0 auto;height:0;overflow:visible}
.about-hero{
  position:relative;
  display:grid;
  align-items:end;
  min-height:620px;
  height:min(92vh,900px);
  height:min(92svh,900px);
  overflow:hidden;
  isolation:isolate;
  background:#0d0c0c;
}
.about-hero-image,.about-hero-shade{position:absolute;inset:0;width:100%;height:100%}
.about-hero-image{
  z-index:-2;
  object-fit:cover;
  object-position:43% center;
  filter:saturate(.82) contrast(1.08);
  transform:scale(1.015);
}
.about-hero-shade{
  z-index:-1;
  background:
    linear-gradient(180deg,rgba(5,5,7,.48) 0%,rgba(5,5,7,.04) 32%,rgba(9,7,7,.16) 57%,rgba(9,7,7,.9) 100%),
    linear-gradient(90deg,rgba(8,7,7,.58),transparent 70%);
}
.about-hero-copy{
  position:relative;
  width:min(var(--about-max),calc(100% - var(--about-side) - var(--about-side)));
  margin-inline:auto;
  padding-bottom:clamp(54px,9vh,106px);
}
.about-kicker,.section-number{
  margin:0 0 18px;
  color:#e37833;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.18em;
  line-height:1.2;
  text-transform:uppercase;
}
.about-hero h1{
  margin:0;
  max-width:760px;
  color:#fff;
  font-size:var(--subpage-hero-title);
  font-weight:900;
  letter-spacing:-.072em;
  line-height:var(--subpage-headline-leading);
  text-transform:uppercase;
}
.about-hero h1 span{display:block}
.about-hero-copy > p:last-child{
  max-width:480px;
  margin:34px 0 0;
  color:rgba(255,255,255,.74);
  font-size:clamp(.96rem,2.5vw,1.22rem);
  line-height:1.55;
}
.about-section{padding:clamp(84px,12vw,170px) 0}
.about-page h2{
  margin:0;
  color:#f4ede4;
  font-size:var(--subpage-section-title);
  font-weight:900;
  letter-spacing:-.065em;
  line-height:var(--subpage-headline-leading);
  text-transform:uppercase;
}
.about-page p{font-size:clamp(1rem,1.5vw,1.19rem);line-height:1.68}
.about-page .lead{color:#f5ede4;font-size:clamp(1.24rem,2vw,1.68rem);font-weight:700;line-height:1.4}
.origin-section{background:#181311}
.origin-layout,.listening-layout,.teaching-layout,.notation-layout{
  display:grid;
  gap:var(--subpage-grid-gap);
}
.origin-layout > *,.listening-layout > *,.teaching-layout > *,.notation-layout > *{min-width:0}
.origin-copy h2{max-width:780px}
.text-columns{display:grid;gap:0;margin-top:48px;color:#cfc1b4}
.text-columns p:first-child{margin-top:0}
.accent-note{margin-top:38px;padding-left:20px;border-left:3px solid var(--accent);color:#f0ded0}
.image-frame{margin:0;position:relative}
.image-frame img{display:block;width:100%;height:100%;object-fit:cover}
.origin-image{
  width:min(78vw,470px);
  aspect-ratio:2 / 3;
  margin-left:auto;
  transform:rotate(1.1deg);
}
.origin-image img{object-position:48% center;filter:saturate(.22) contrast(1.13)}
.origin-image figcaption{
  position:absolute;
  right:12px;
  bottom:14px;
  padding:6px 9px;
  color:rgba(255,255,255,.68);
  background:rgba(10,8,7,.68);
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.urban-section{position:relative;display:grid;min-height:0;background:#22130d}
.urban-image-wrap{height:clamp(520px,110vw,610px);overflow:hidden}
.urban-image-wrap img{
  width:100%;height:100%;object-fit:cover;object-position:center 56%;filter:saturate(.72) contrast(1.08)
}
.urban-copy{
  width:calc(100% - var(--about-side) - var(--about-side));
  margin:-74px auto 0;
  padding:38px 28px 52px;
  position:relative;
  background:rgba(18,12,10,.92);
  border-radius:18px 18px 0 0;
  box-shadow:0 -24px 70px rgba(0,0,0,.22);
}
.urban-copy h2{margin-bottom:38px}
.urban-copy > p:not(.section-number):not(.rhythm-lines){color:#d4c4b8}
.rhythm-lines{
  margin:34px 0 0;
  color:#f0a26e;
  font-size:clamp(1.8rem,5.5vw,4.4rem)!important;
  font-weight:900;
  letter-spacing:-.045em;
  line-height:1!important;
}
.rhythm-lines span{display:block}
.listening-section{position:relative;background:#e9dfd2;color:#2a211c}
.listening-section .section-number{color:#a94b24}
.listening-section h2{color:#211a16}
.listening-opening{margin-top:48px;max-width:620px}
.listening-opening p{font-size:clamp(1.12rem,2vw,1.45rem)}
.abstract-image{
  width:min(82vw,440px);
  aspect-ratio:11 / 16;
  margin-left:auto;
  transform:translateX(8px) rotate(-1deg);
}
.abstract-image img{filter:saturate(.6) contrast(1.05)}
.listening-deep{max-width:690px}
.listening-deep > p:first-child{font-weight:800}
.rhythm-lines.compact{margin:24px 0 40px;color:#a94b24;font-size:clamp(1.55rem,4.8vw,3.5rem)!important}
.listening-emphasis{
  margin:44px 0;
  color:#211a16;
  font-size:var(--subpage-statement)!important;
  font-weight:900;
  line-height:1.2!important;
}
.teaching-section{background:#171311}
.teaching-copy{color:#cdbfb3}
.teaching-copy p:first-child{margin-top:0}
.teaching-conclusion{
  margin-top:42px;
  color:#f3dfd0;
  font-size:clamp(1.3rem,2.2vw,1.8rem)!important;
  font-weight:800;
  line-height:1.38!important;
}
.live-break{position:relative;display:grid;align-items:end;min-height:clamp(360px,58vw,790px);overflow:hidden;background:#0a0909}
.live-break::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(8,6,5,.72))}
.live-break img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:center}
.live-break p{
  position:relative;
  z-index:1;
  width:min(var(--about-max),calc(100% - var(--about-side) - var(--about-side)));
  margin:0 auto 28px;
  color:#fff;
  font-size:clamp(1rem,2.2vw,1.5rem);
  font-weight:900;
  letter-spacing:.06em;
  text-align:right;
  text-transform:uppercase;
}
.notation-section{background:#201814}
.notation-copy{max-width:720px;color:#d2c3b6}
.notation-copy h2{margin-bottom:48px}
.quiet-note{
  align-self:end;
  margin:0 0 4px;
  padding:28px 0 0 24px;
  border-top:1px solid rgba(255,255,255,.2);
  color:rgba(239,226,214,.66);
}
.quiet-note p{margin:0;font-size:clamp(.98rem,1.6vw,1.2rem);font-style:italic;line-height:1.75}
.studio-section{position:relative;display:grid;align-items:end;min-height:760px;overflow:hidden;background:#1c130e}
.studio-section::after{
  content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,8,6,.05),rgba(12,8,6,.28) 44%,rgba(12,8,6,.92))
}
.studio-section > img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.76) contrast(1.03)
}
.studio-copy{
  position:relative;
  z-index:1;
  width:min(720px,calc(100% - var(--about-side) - var(--about-side)));
  margin-right:auto;
  margin-bottom:clamp(42px,7vw,90px);
  margin-left:max(var(--about-side),calc((100% - var(--about-max)) / 2));
  padding:28px;
  border-radius:18px;
  background:rgba(15,10,8,.73);
  -webkit-backdrop-filter:blur(5px);
  backdrop-filter:blur(5px);
}
.studio-copy h2{font-size:clamp(2.55rem,calc(1.7rem + 3.5vw),5.9rem)}
.studio-copy p:last-child{color:#d7c7ba}
.about-cta{padding:clamp(96px,14vw,190px) 0;background:#ede4d8;color:#211a16}
.about-cta .section-number{color:#a94b24}
.about-cta h2{max-width:960px;color:#211a16}
.about-cta h2 + p{max-width:620px;margin:34px 0 0;font-size:clamp(1.15rem,2vw,1.55rem)}
.about-actions{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:42px}
.about-text-link{
  color:#6d321c;font-size:.78rem;font-weight:900;letter-spacing:.08em;text-decoration:none;text-transform:uppercase
}
.about-text-link:hover{color:var(--accent)}
.about-footer{
  display:flex;
  justify-content:space-between;
  gap:24px;
  padding-block:28px;
  padding-inline:max(var(--about-side),calc((100% - var(--about-max)) / 2));
  color:rgba(255,255,255,.5);
  background:#0f0c0a;
  font-size:.74rem;
  letter-spacing:.04em;
}
.about-footer a{color:var(--accent);font-weight:900;text-decoration:none}
.back-to-top{position:fixed;z-index:30;right:clamp(16px,2vw,24px);bottom:max(clamp(16px,2vw,24px),env(safe-area-inset-bottom));width:46px;height:46px;padding:0;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:rgba(18,15,13,.76);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#f2e8df;font-family:inherit;font-size:1.1rem;font-weight:800;line-height:1;cursor:pointer;box-shadow:0 6px 22px rgba(0,0,0,.16)}
.back-to-top:hover{background:rgba(38,28,23,.9)}
.back-to-top:focus-visible{outline:2px solid #f18a4d;outline-offset:3px}
.back-to-top[hidden]{display:none}

@media(min-width:601px){
  .text-columns{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px}
  .origin-image{width:470px}
  .urban-copy{width:min(620px,calc(100% - var(--about-side) - var(--about-side)));margin:-120px var(--about-side) 0 auto;padding:52px}
  .listening-layout{grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);align-items:start}
  .listening-copy{padding-top:28px}
  .abstract-image{grid-column:2;grid-row:1 / 3;width:100%;aspect-ratio:11 / 19;transform:rotate(-1deg)}
  .listening-deep{grid-column:1}
  .studio-copy{padding:40px}
}

@media(min-width:941px){
  .origin-layout,.teaching-layout,.notation-layout{
    grid-template-columns:minmax(0,1fr) minmax(280px,.8fr);
    align-items:start;
  }
  .origin-layout{align-items:center}
  .origin-image{width:100%;transform:translateY(54px) rotate(1.1deg)}
  .urban-section{min-height:clamp(760px,62.5vw,900px);grid-template-columns:minmax(0,1.45fr) minmax(390px,.8fr)}
  .urban-image-wrap{height:100%}
  .urban-copy{width:auto;margin:0;padding:clamp(70px,7vw,120px) clamp(48px,6vw,100px);display:flex;flex-direction:column;justify-content:center;border-radius:0}
  .notation-layout{align-items:end}
  .studio-section{min-height:min(84vw,980px)}
  .studio-copy{width:min(650px,calc(100% - var(--about-side) - var(--about-side)))}
}

@media(max-width:600px){
  .about-hero{height:88vh;height:88svh;min-height:600px}
  .about-hero-copy{padding-bottom:50px}
  .about-hero h1{font-size:clamp(2.15rem,9.2vw,3.2rem)}
  .urban-image-wrap{height:560px}
  .studio-section{min-height:700px}
  .studio-section > img{object-position:55% center}
  .studio-copy{width:calc(100% - 36px);margin:0 18px 18px;padding:24px 20px}
  .about-footer{flex-direction:column}
}

@media(prefers-reduced-motion:reduce){
  .about-page *,.about-page *::before,.about-page *::after{scroll-behavior:auto!important;transition:none!important}
}