*{box-sizing:border-box}

:root{
  --about-black:#0c0c0c;
  --about-paper:#e7e3db;
  --about-paper-dark:#d7d1c7;
  --about-ink:#171717;
  --about-muted:#6d6861;
  --about-line-dark:rgba(255,255,255,.15);
  --about-line-light:rgba(20,20,20,.17);
  --about-accent:#9f825c;
}

.about-page{
  margin:0;
  color:#f2efe9;
  background:var(--about-black);
  font-family:"Inter",Arial,sans-serif;
  font-weight:300;
  overflow-x:hidden;
}

.about-page .about-header{color:#f4f1eb}
.about-page .about-main{overflow:hidden}

.about-intro{
  min-height:78svh;
  padding:150px 6vw 8vh;
  display:grid;
  grid-template-columns:170px minmax(0,1fr) minmax(220px,330px);
  gap:5vw;
  align-items:end;
  border-bottom:1px solid var(--about-line-dark);
  background:var(--nv-studio-section-background,var(--about-black));
}

.about-intro-label{
  align-self:start;
  display:flex;
  justify-content:space-between;
  color:rgba(255,255,255,.48);
  font:400 9px/1.4 "IBM Plex Mono",monospace;
  letter-spacing:.14em;
}

.about-intro-label p{margin:0}

.about-intro-main h1{
  margin:0 0 30px;
  font:300 clamp(88px,13vw,190px)/.78 "Cormorant Garamond",serif;
  letter-spacing:-.055em;
}

.about-intro-lead{
  max-width:760px;
  margin:0;
  font:300 clamp(34px,4.3vw,64px)/1.02 "Cormorant Garamond",serif;
}

.about-intro-note{
  align-self:end;
  padding-top:22px;
  border-top:1px solid var(--about-line-dark);
}

.about-intro-note p{
  margin:0;
  color:rgba(255,255,255,.52);
  font-size:12px;
  line-height:1.75;
}

.about-section{
  display:grid;
  grid-template-columns:170px minmax(0,1fr);
  gap:5vw;
  padding:14vh 6vw;
}

.about-section-side{
  padding-top:5px;
  color:var(--about-muted);
  font:400 9px/1.5 "IBM Plex Mono",monospace;
  letter-spacing:.13em;
}

.about-section-side span{display:block;margin-bottom:32px}
.about-section-side p{margin:0;writing-mode:vertical-rl}

.about-statement{
  min-height:88svh;
  color:var(--about-ink);
  background:var(--nv-studio-section-background,var(--about-paper));
}

.about-statement-large{
  max-width:1050px;
  margin:0;
  font:300 clamp(50px,6.8vw,105px)/.95 "Cormorant Garamond",serif;
  letter-spacing:-.04em;
}

.about-statement-columns{
  max-width:870px;
  margin:90px 0 0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7vw;
}

.about-statement-columns p,
.about-portrait-copy>p,
.about-territories-content header>p,
.about-sonus-copy>p:not(.about-sonus-lead){
  margin:0;
  color:var(--about-muted);
  font-size:14px;
  line-height:1.85;
}

.about-portrait{
  color:var(--about-ink);
  background:var(--nv-studio-section-background,#d8d2c8);
}

.about-portrait-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,.72fr);
  gap:7vw;
  align-items:center;
}

.about-portrait-image{
  position:relative;
  min-height:72svh;
  margin:0;
  display:grid;
  place-items:center;
  background:#c9c2b7;
}

.about-portrait-image img{
  display:block;
  max-width:100%;
  max-height:72svh;
  width:auto;
  height:auto;
  object-fit:contain;
}

.about-portrait-image figcaption{
  position:absolute;
  left:12px;
  bottom:-28px;
  color:var(--about-muted);
  font:400 8px/1 "IBM Plex Mono",monospace;
  letter-spacing:.09em;
}

.about-image-placeholder{
  display:none;
  padding:20px;
  border:1px solid var(--about-line-light);
  color:var(--about-muted);
  font:400 10px/1.5 "IBM Plex Mono",monospace;
}

.about-portrait-image.is-missing .about-image-placeholder{display:block}

.about-portrait-copy h2,
.about-territories-content h2{
  margin:0 0 55px;
  font:300 clamp(50px,6vw,92px)/.94 "Cormorant Garamond",serif;
  letter-spacing:-.04em;
}

.about-portrait-copy>p+p{margin-top:24px}

.about-signature{
  margin-top:55px!important;
  color:var(--about-ink)!important;
  font:300 28px "Cormorant Garamond",serif!important;
}

.about-territories{
  color:var(--about-ink);
  background:var(--nv-studio-section-background,var(--about-paper));
}

.about-territories-content header{
  display:grid;
  grid-template-columns:1.3fr .7fr;
  gap:7vw;
  align-items:end;
  margin-bottom:90px;
}

.about-territories-content h2{margin:0}

.about-territory-index{border-top:1px solid var(--about-ink)}

.about-territory-index a{
  min-height:155px;
  display:grid;
  grid-template-columns:60px 1fr 180px minmax(250px,360px);
  gap:3vw;
  align-items:center;
  border-bottom:1px solid var(--about-line-light);
  transition:padding .35s ease;
}

.about-territory-index a:hover{padding-left:12px}

.about-territory-index span,
.about-territory-index em{
  font:400 9px/1 "IBM Plex Mono",monospace;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.about-territory-index strong{
  font:300 clamp(48px,6vw,88px)/.85 "Cormorant Garamond",serif;
}

.about-territory-index em{
  color:var(--about-muted);
  font-style:normal;
}

.about-territory-index p{
  color:var(--about-muted);
  font-size:13px;
  line-height:1.65;
}

.about-sonus{
  min-height:74svh;
  background:var(--nv-studio-section-background,#111);
}

.about-sonus .about-section-side{color:rgba(255,255,255,.45)}

.about-sonus-content{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:8vw;
  align-items:center;
}

.about-sonus-title h2{
  margin:0;
  font:300 clamp(90px,13vw,190px)/.75 "Cormorant Garamond",serif;
  letter-spacing:-.055em;
}

.about-sonus-title span{
  display:block;
  margin-top:25px;
  color:rgba(255,255,255,.4);
  font:400 9px/1 "IBM Plex Mono",monospace;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.about-sonus-lead{
  margin:0 0 35px;
  font:300 clamp(38px,4.5vw,68px)/1 "Cormorant Garamond",serif;
}

.about-sonus-copy>p:not(.about-sonus-lead){color:rgba(255,255,255,.52)}

.about-sonus-copy>a{
  display:inline-block;
  margin-top:42px;
  padding-bottom:8px;
  border-bottom:1px solid currentColor;
  font:400 9px/1 "IBM Plex Mono",monospace;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.about-closing{
  min-height:96svh;
  padding:12vh 4vw 10vh;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  justify-items:center;
  align-content:center;
  text-align:center;
  background:var(--nv-studio-section-background,#090909);
}

.about-closing-copy{
  width:min(100%,1100px);
}

.about-closing-copy>p{
  margin:0;
  color:rgba(255,255,255,.45);
  font:400 9px/1 "IBM Plex Mono",monospace;
  letter-spacing:.14em;
}

.about-closing-copy blockquote{
  margin:35px 0 0;
  font:300 clamp(42px,6vw,88px)/.98 "Cormorant Garamond",serif;
}

.about-closing>.back-to-home{
  margin-top:clamp(12px,2vw,28px);
}

body[data-cuaderno-access="hidden"] .about-cuaderno-sequence{
  display:none!important;
}

.about-cuaderno-sequence{
  position:relative;
  width:min(92vw,900px);
  aspect-ratio:2 / 1;
  margin-top:clamp(28px,4vh,52px);
  overflow:visible;
}

.about-cuaderno-trace{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
}

.about-cuaderno-signature,
.about-cuaderno-ring{
  fill:none;
  stroke:#b39260;
  stroke-width:1.15;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}

.about-cuaderno-geometry{
  fill:none;
  stroke:none;
  pointer-events:none;
}

.about-cuaderno-signature{
  opacity:0;
}

.about-cuaderno-ring{
  opacity:0;
}

.about-cuaderno-light{
  fill:#d6b477;
  opacity:0;
}

.about-cuaderno-sequence.is-thread-running .about-cuaderno-signature{
  opacity:.7;
}

.about-cuaderno-sequence.is-thread-running .about-cuaderno-light{
  opacity:1;
}

.about-cuaderno-sequence.is-orbit-running .about-cuaderno-signature,
.about-cuaderno-sequence.is-complete .about-cuaderno-signature{
  opacity:.25;
  transition:opacity 1.5s ease;
}

.about-cuaderno-sequence.is-orbit-running .about-cuaderno-ring,
.about-cuaderno-sequence.is-complete .about-cuaderno-ring{
  opacity:.52;
}

.about-cuaderno-sequence.is-complete .about-cuaderno-light{
  opacity:.82;
  animation:aboutCuadernoLightRest 2.8s ease-in-out infinite;
}

.about-cuaderno-gate{
  position:absolute;
  top:39%;
  left:50%;
  width:25%;
  aspect-ratio:1;
  padding:0;
  border:0;
  border-radius:50%;
  color:#f1ede5;
  background:transparent;
  text-decoration:none;
  pointer-events:none;
  transform:translateX(-50%);
  -webkit-tap-highlight-color:transparent;
}

.about-cuaderno-sequence.is-complete .about-cuaderno-gate{
  pointer-events:auto;
}

.about-cuaderno-label{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  opacity:0;
  transform:translateY(8px);
  transition:opacity 1.25s ease,transform 1.4s cubic-bezier(.2,.7,.2,1),color .4s ease;
}

.about-cuaderno-sequence.is-complete .about-cuaderno-label{
  opacity:1;
  transform:none;
}

.about-cuaderno-label small{
  color:rgba(241,237,229,.42);
  font:400 clamp(5px,.48vw,7px)/1.4 "IBM Plex Mono",monospace;
  letter-spacing:.13em;
  white-space:nowrap;
}

.about-cuaderno-label strong{
  margin-top:clamp(15px,1.5vw,22px);
  font:300 clamp(27px,2.7vw,39px)/.86 "Cormorant Garamond",serif;
  letter-spacing:-.025em;
}

.about-cuaderno-label strong em{
  display:block;
  font-style:normal;
}

.about-cuaderno-label b{
  margin-top:clamp(16px,1.5vw,23px);
  color:rgba(241,237,229,.54);
  font:400 clamp(6px,.55vw,8px)/1 "IBM Plex Mono",monospace;
  letter-spacing:.19em;
  text-transform:uppercase;
}

.about-cuaderno-gate:hover .about-cuaderno-label,
.about-cuaderno-gate:focus-visible .about-cuaderno-label{color:#fff}

@keyframes aboutCuadernoLightRest{
  0%,100%{opacity:.72}
  50%{opacity:.95}
}

.about-reveal{
  opacity:0;
  transform:translateY(35px);
  transition:opacity 1s ease,transform 1s cubic-bezier(.2,.7,.2,1);
}

.about-reveal.is-visible{opacity:1;transform:none}

@media(max-width:760px){
  .about-intro{
    min-height:auto;
    padding:120px 18px 75px;
    display:block;
  }

  .about-intro-label{margin-bottom:70px}
  .about-intro-main h1{font-size:27vw}
  .about-intro-lead{font-size:12vw}
  .about-intro-note{margin-top:70px}

  .about-section{
    padding:13vh 18px;
    display:block;
  }

  .about-section-side{
    margin-bottom:65px;
    display:flex;
    justify-content:space-between;
  }

  .about-section-side span{margin:0}
  .about-section-side p{writing-mode:horizontal-tb}

  .about-statement-large{font-size:13vw}

  .about-statement-columns{
    margin-top:65px;
    display:block;
  }

  .about-statement-columns p+p{margin-top:25px}

  .about-portrait-layout{
    display:flex;
    flex-direction:column;
    gap:70px;
  }

  .about-portrait-image{
    width:100%;
    min-height:60svh;
  }

  .about-portrait-copy h2,
  .about-territories-content h2{
    font-size:14vw;
  }

  .about-territories-content header{
    display:block;
    margin-bottom:65px;
  }

  .about-territories-content header>p{margin-top:30px}

  .about-territory-index a{
    min-height:auto;
    padding:38px 0;
    display:grid;
    grid-template-columns:40px 1fr;
  }

  .about-territory-index em,
  .about-territory-index p{
    grid-column:2;
  }

  .about-territory-index strong{font-size:17vw}
  .about-territory-index p{margin-top:18px}

  .about-sonus-content{display:block}
  .about-sonus-title h2{font-size:27vw}
  .about-sonus-copy{margin-top:65px}
  .about-sonus-lead{font-size:13vw}

  .about-closing{
    min-height:100svh;
    padding:90px 18px 76px;
  }

  .about-closing-copy blockquote{font-size:12vw}

  .about-cuaderno-sequence{
    width:100vw;
    aspect-ratio:560 / 500;
    margin-top:28px;
    overflow:hidden;
  }

  .about-cuaderno-trace{
    left:50%;
    right:auto;
    width:178.571%;
    transform:translateX(-50%);
  }

  .about-cuaderno-gate{
    width:44.643%;
  }

  .about-closing>.back-to-home{
    margin-top:24px;
  }

  .about-cuaderno-label small{font-size:5.5px}
  .about-cuaderno-label strong{font-size:clamp(27px,8.2vw,32px)}
  .about-cuaderno-label b{font-size:6.5px}
}

@media(prefers-reduced-motion:reduce){
  .about-reveal{
    opacity:1;
    transform:none;
    transition:none;
  }

  .about-cuaderno-label{
    transition:none;
  }

  .about-cuaderno-sequence .about-cuaderno-signature,
  .about-cuaderno-sequence .about-cuaderno-ring{animation:none}

  .about-cuaderno-sequence .about-cuaderno-signature{opacity:.25}
  .about-cuaderno-sequence .about-cuaderno-ring{opacity:.52}
  .about-cuaderno-sequence .about-cuaderno-light{opacity:.82}

  .about-cuaderno-sequence .about-cuaderno-label{
    opacity:1;
    transform:none;
  }

  .about-cuaderno-sequence .about-cuaderno-gate{pointer-events:auto}
}


.about-wordmark {
  width: min(100%, 760px);
  margin: 0 0 26px;
}
.about-wordmark .nv-inline-title-svg {
  width: 100%;
  color: #f2efe9;
  --inline-trace-color: var(--about-accent);
}
