:root{
  --bg-deep:#241B15;
  --bg-deep-2:#1B140F;
  --bg-section:#F2E9DB;
  --bg-section-2:#EAE0CD;
  --accent-clay:#A9714E;
  --accent-gold:#C9A876;
  --ink:#EFE6D8;
  --ink-dim:#B8AA96;
  --ink-dark:#2B2118;
  --ink-dark-dim:#6B5F4F;
  --line-light:rgba(239,230,216,0.16);
  --line-dark:rgba(43,33,24,0.14);
  --serif:'Fraunces', serif;
  --sans:'Work Sans', sans-serif;
  --cjk:'Noto Serif SC', serif;
}

*{box-sizing:border-box; margin:0; padding:0;}

html{scroll-behavior:smooth;}

/* ============ ENTRANCE: gates opening from the center seam ============ */
.intro-overlay{
  position:fixed;
  inset:0;
  z-index:999;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
/* rest state: two solid panels, each covering half the viewport, meeting
   at the vertical center — "opening" slides the top one up and the
   bottom one down, so the page appears at the middle seam first and
   the gates part outward from there */
.intro-panel{
  position:absolute;
  left:0;
  width:100%;
  height:50%;
  background:var(--bg-deep-2);
  transition:transform 3s cubic-bezier(.5,0,.1,1);
}
.intro-panel-top{ top:0; }
.intro-panel-bottom{ bottom:0; }
.intro-overlay.intro-opening .intro-panel-top{ transform:translateY(-100%); }
.intro-overlay.intro-opening .intro-panel-bottom{ transform:translateY(100%); }

.intro-loading{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.5rem;
  opacity:1;
  transition:opacity .6s ease;
}
.intro-overlay.intro-opening .intro-loading{ opacity:0; }

/* the wordmark "develops" — a pale outline (unexposed film) that a solid
   gold fill gradually appears over, driven by real load progress */
.intro-logo{
  position:relative;
  display:inline-block;
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  font-size:clamp(2.2rem, 7vw, 4.4rem);
  letter-spacing:.01em;
  line-height:1;
}
.intro-logo-outline{
  display:block;
  color:transparent;
  -webkit-text-stroke:1px rgba(239,230,216,.3);
}
.intro-logo-fill{
  position:absolute;
  inset:0;
  display:block;
  color:var(--accent-gold);
  opacity:0;
}

.intro-progress{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.6rem;
}
.intro-progress-count{
  font-family:var(--sans);
  font-size:.68rem;
  letter-spacing:.22em;
  color:var(--ink-dim);
  font-variant-numeric:tabular-nums;
}
.intro-progress-rule{
  position:relative;
  width:min(180px, 32vw);
  height:1px;
  background:var(--line-light);
  overflow:hidden;
}
.intro-progress-fill{
  position:absolute;
  left:0; top:0; bottom:0;
  width:0%;
  background:var(--accent-gold);
}

@media (prefers-reduced-motion: reduce){
  .intro-overlay{ display:none !important; }
}
html.lock-scroll{ overflow:hidden; height:100dvh; }

*{ cursor:inherit; }
html{
  cursor:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzQiIGhlaWdodD0iMzAiIHZpZXdCb3g9Ii04IC04IDgwIDY4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxkZWZzPgogICAgPHJhZGlhbEdyYWRpZW50IGlkPSJnbG93R3JhZCIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNTAlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI0YyRTlEQiIgc3RvcC1vcGFjaXR5PSIwLjUiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSI1NSUiIHN0b3AtY29sb3I9IiNGMkU5REIiIHN0b3Atb3BhY2l0eT0iMC4yMiIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNGMkU5REIiIHN0b3Atb3BhY2l0eT0iMCIvPgogICAgPC9yYWRpYWxHcmFkaWVudD4KICAgIDxyYWRpYWxHcmFkaWVudCBpZD0ibGVuc0dyYWQiIGN4PSIzNSUiIGN5PSIzNSUiIHI9IjcwJSI+CiAgICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMxYzNhNTIiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSI2MCUiIHN0b3AtY29sb3I9IiMwNTA1MDUiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwIi8+CiAgICA8L3JhZGlhbEdyYWRpZW50PgogIDwvZGVmcz4KCiAgPCEtLSBTb2Z0IGNpcmN1bGFyIHNlZS10aHJvdWdoIGdsb3cgc28gdGhlIGN1cnNvciBwb3BzIG9uIGRhcmsgYmFja2dyb3VuZHMgLS0+CiAgPGNpcmNsZSBjeD0iMzIiIGN5PSIyNiIgcj0iMzMiIGZpbGw9InVybCgjZ2xvd0dyYWQpIi8+CgogIDwhLS0gQ2FtZXJhIGJvZHkgLS0+CiAgPHJlY3QgeD0iNCIgeT0iMTQiIHdpZHRoPSI1NiIgaGVpZ2h0PSIzMiIgcng9IjQiIGZpbGw9IiMxYTFhMWEiIHN0cm9rZT0iI0VGRTZEOCIgc3Ryb2tlLXdpZHRoPSIxLjUiLz4KICA8IS0tIFRvcCBwbGF0ZSAtLT4KICA8cmVjdCB4PSI4IiB5PSI2IiB3aWR0aD0iMzAiIGhlaWdodD0iMTAiIHJ4PSIyIiBmaWxsPSIjMjMyMzIzIiBzdHJva2U9IiNFRkU2RDgiIHN0cm9rZS13aWR0aD0iMS4zIi8+CiAgPCEtLSBWaWV3ZmluZGVyIGh1bXAgLS0+CiAgPHJlY3QgeD0iMjIiIHk9IjIiIHdpZHRoPSIxMiIgaGVpZ2h0PSI2IiByeD0iMS41IiBmaWxsPSIjMGQwZDBkIiBzdHJva2U9IiNFRkU2RDgiIHN0cm9rZS13aWR0aD0iMSIvPgogIDwhLS0gSG90IHNob2UgLS0+CiAgPHJlY3QgeD0iMjUiIHk9IjAiIHdpZHRoPSI2IiBoZWlnaHQ9IjMiIGZpbGw9IiMyYjJiMmIiLz4KICA8IS0tIE1vZGUgZGlhbCAtLT4KICA8Y2lyY2xlIGN4PSIxMiIgY3k9IjEwIiByPSIzLjIiIGZpbGw9IiMzYTNhM2EiIHN0cm9rZT0iI0VGRTZEOCIgc3Ryb2tlLXdpZHRoPSIwLjkiLz4KICA8Y2lyY2xlIGN4PSIxMiIgY3k9IjEwIiByPSIxIiBmaWxsPSIjMTExIi8+CiAgPCEtLSBTaHV0dGVyIGJ1dHRvbiAtLT4KICA8Y2lyY2xlIGN4PSIzNCIgY3k9IjkiIHI9IjIuNCIgZmlsbD0iI2M5YzljOSIgc3Ryb2tlPSIjOGE4YThhIiBzdHJva2Utd2lkdGg9IjAuOCIvPgogIDwhLS0gR3JpcCB0ZXh0dXJlIC0tPgogIDxyZWN0IHg9IjYiIHk9IjE4IiB3aWR0aD0iMTAiIGhlaWdodD0iMjQiIHJ4PSIyIiBmaWxsPSIjMTAxMDEwIi8+CiAgPCEtLSBMZW5zIGJhcnJlbCBvdXRlciAtLT4KICA8Y2lyY2xlIGN4PSIzOCIgY3k9IjMwIiByPSIxNSIgZmlsbD0iIzAwMCIgc3Ryb2tlPSIjRUZFNkQ4IiBzdHJva2Utd2lkdGg9IjEuMiIvPgogIDxjaXJjbGUgY3g9IjM4IiBjeT0iMzAiIHI9IjE1IiBmaWxsPSJub25lIiBzdHJva2U9IiNDOUE4NzYiIHN0cm9rZS13aWR0aD0iMSIvPgogIDwhLS0gTGVucyByaW5nIC0tPgogIDxjaXJjbGUgY3g9IjM4IiBjeT0iMzAiIHI9IjExLjUiIGZpbGw9IiMxNjE2MTYiIHN0cm9rZT0iIzNhM2EzYSIgc3Ryb2tlLXdpZHRoPSIxIi8+CiAgPCEtLSBMZW5zIGdsYXNzIC0tPgogIDxjaXJjbGUgY3g9IjM4IiBjeT0iMzAiIHI9IjgiIGZpbGw9IiMwNTA1MDUiLz4KICA8Y2lyY2xlIGN4PSIzOCIgY3k9IjMwIiByPSI4IiBmaWxsPSJ1cmwoI2xlbnNHcmFkKSIvPgogIDwhLS0gTGVucyByZWZsZWN0aW9uIC0tPgogIDxjaXJjbGUgY3g9IjM1IiBjeT0iMjciIHI9IjIuNCIgZmlsbD0iIzNhNmVhNSIgb3BhY2l0eT0iMC41NSIvPgogIDxjaXJjbGUgY3g9IjQxIiBjeT0iMzMiIHI9IjEuMiIgZmlsbD0iIzdmYjBkOCIgb3BhY2l0eT0iMC4zNSIvPgogIDwhLS0gU29ueS1zdHlsZSByZWQgYWNjZW50IHJpbmcgLS0+CiAgPGNpcmNsZSBjeD0iMzgiIGN5PSIzMCIgcj0iMTEuNSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTAyNzJkIiBzdHJva2Utd2lkdGg9IjEiIG9wYWNpdHk9IjAuOSIgc3Ryb2tlLWRhc2hhcnJheT0iMSA0Ii8+CiAgPCEtLSBGbGFzaCAtLT4KICA8cmVjdCB4PSI0NiIgeT0iMTciIHdpZHRoPSI5IiBoZWlnaHQ9IjYiIHJ4PSIxIiBmaWxsPSIjMDUwNTA1IiBzdHJva2U9IiMyYjJiMmIiIHN0cm9rZS13aWR0aD0iMC44Ii8+CiAgPCEtLSBCcmFuZCBzdHJpcCAtLT4KICA8cmVjdCB4PSI0MSIgeT0iOSIgd2lkdGg9IjE2IiBoZWlnaHQ9IjMiIHJ4PSIxIiBmaWxsPSIjMTExIi8+Cjwvc3ZnPgo=") 5 4, auto;
}
input, textarea{ cursor:text; }

body{
  font-family:var(--sans);
  background:var(--bg-deep-2);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{color:inherit;}

img,svg{display:block; max-width:100%;}

.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

a:focus-visible, button:focus-visible{
  outline:2px solid var(--accent-clay);
  outline-offset:4px;
}

/* ============ HERO ============ */
.hero{
  position:relative;
  min-height:100svh;
  background:
    linear-gradient(180deg, rgba(20,15,11,.55) 0%, rgba(20,15,11,.28) 45%, rgba(15,11,8,.72) 100%),
    radial-gradient(120% 90% at 78% 30%, rgba(52,40,30,.35) 0%, rgba(36,27,21,.15) 45%, rgba(27,20,15,.55) 100%),
    url('hero.jpg') center 30% / cover no-repeat;
  color:var(--ink);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding: clamp(1.5rem, 4vw, 3.5rem);
}

/* dappled light — layered blurred shapes standing in for the leaf-shadow photograph */
.dapple{
  position:absolute;
  inset:-10%;
  pointer-events:none;
  z-index:0;
}
.dapple span{
  position:absolute;
  border-radius:38% 62% 55% 45% / 45% 40% 60% 55%;
  filter:blur(38px);
  mix-blend-mode:soft-light;
  opacity:.85;
}
.dapple span:nth-child(1){ width:46vw; height:46vw; left:2%; top:8%; background:radial-gradient(circle, #EFE0C4 0%, transparent 70%); animation: drift1 26s ease-in-out infinite; }
.dapple span:nth-child(2){ width:30vw; height:34vw; left:22%; top:38%; background:radial-gradient(circle, #C9A876 0%, transparent 72%); animation: drift2 32s ease-in-out infinite; }
.dapple span:nth-child(3){ width:22vw; height:52vw; left:8%; top:2%; background:linear-gradient(200deg,#0000 0%, #120D09 55%, #0000 100%); opacity:.55; animation: drift3 22s ease-in-out infinite; }
.dapple span:nth-child(4){ width:18vw; height:48vw; left:34%; top:-6%; background:linear-gradient(160deg,#0000 0%, #120D09 60%, #0000 100%); opacity:.4; animation: drift3 28s ease-in-out infinite reverse; }

@keyframes drift1{ 0%,100%{ transform:translate(0,0) rotate(0deg);} 50%{ transform:translate(2%, 3%) rotate(4deg);} }
@keyframes drift2{ 0%,100%{ transform:translate(0,0) rotate(0deg);} 50%{ transform:translate(-3%, 2%) rotate(-3deg);} }
@keyframes drift3{ 0%,100%{ transform:translateX(0) rotate(2deg);} 50%{ transform:translateX(3%) rotate(6deg);} }

@media (prefers-reduced-motion: reduce){
  .dapple span{ animation:none !important; }
}

/* ============ SITE NAV ============ */
.site-nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 1.15rem clamp(1.25rem, 5vw, 3rem);
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .5s ease, border-color .5s ease, backdrop-filter .5s ease;
}
.site-nav.scrolled,
.site-nav.nav-solid{
  background:rgba(27,20,15,.74);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line-light);
}

.nav-logo{
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  font-size:1.2rem;
  color:var(--ink);
  text-decoration:none;
  letter-spacing:.01em;
  padding:.7rem 0;
  margin:-.7rem 0;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:2.1rem;
}

.nav-links a{
  font-size:.74rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-dim);
  text-decoration:none;
  padding:.5rem 0;
  position:relative;
  transition:color .25s ease;
}
.nav-links a::after{
  content:'';
  position:absolute; left:0; bottom:.15rem;
  width:0; height:1px;
  background:var(--accent-gold);
  transition:width .3s ease;
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a:hover::after{ width:100%; }
.nav-links a.is-active{ color:var(--ink); }
.nav-links a.is-active::after{ width:100%; }

.nav-meta{
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-dim);
  margin-left:.9rem;
  padding-left:1.6rem;
  border-left:1px solid var(--line-light);
}

.nav-toggle{
  display:none;
  width:44px; height:44px;
  align-items:center; justify-content:center;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  z-index:110;
}
.nav-toggle span{
  width:20px; height:1px;
  background:var(--ink);
  transition:transform .3s ease, opacity .3s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.hero-body{
  position:relative; z-index:2;
  margin-top:auto;
  display:grid;
  grid-template-columns:1fr;
  justify-items:end;
  text-align:right;
  max-width:100%;
  padding-top:8rem;
}

.hero-headline{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(2.3rem, 6.4vw, 4.6rem);
  line-height:1.04;
  letter-spacing:.01em;
}
.hero-headline em{
  font-style:italic;
  font-weight:400;
  color:var(--accent-gold);
}

.hero-cjk{
  font-family:var(--cjk);
  font-size:clamp(1.5rem, 3vw, 2.2rem);
  margin-top:.9rem;
  letter-spacing:.06em;
  color:var(--ink);
  display:flex;
  gap:.9rem;
}
.hero-cjk span:first-child{ color:var(--ink-dim); font-size:.55em; align-self:center; letter-spacing:.2em;}

.hero-rule{
  width:min(340px, 60vw);
  height:1px;
  background:var(--line-light);
  margin:1.6rem 0 1.1rem;
}

.hero-sub{
  max-width:32ch;
  font-size:.95rem;
  line-height:1.7;
  color:var(--ink-dim);
  font-weight:300;
}
.hero-headline + .hero-sub{ margin-top:1rem; }

.hero-bottom{
  position:relative; z-index:2;
  display:flex; justify-content:flex-end; align-items:flex-end;
  margin-top:3.5rem;
}

.hero-label{
  font-size:.72rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ink-dim);
}

.hero-scroll{
  display:flex; align-items:center; gap:.6rem;
  font-size:.68rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-dim);
  padding:.55rem 0;
  margin:-.55rem 0;
}
.hero-scroll .stem{
  width:1px; height:34px; background:var(--line-light);
  position:relative; overflow:hidden;
}
.hero-scroll .stem::after{
  content:'';
  position:absolute; left:0; top:-100%; width:100%; height:100%;
  background:var(--accent-gold);
  animation:pour 2.6s ease-in-out infinite;
}
@keyframes pour{ 0%{top:-100%;} 60%{top:100%;} 100%{top:100%;} }
@media (prefers-reduced-motion: reduce){ .hero-scroll .stem::after{ animation:none; top:0;} }

/* ============ HERO PEEK (preview prints that fly into the Archive) ============ */
.hero-peek{
  position:absolute;
  z-index:2;
  left:clamp(1.25rem, 6vw, 3.5rem);
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.hero-peek-label{
  font-size:.64rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-dim);
}
.hero-peek-row{
  position:relative;
  width:calc(clamp(75px, 9.1vw, 109px) + 117px);
  height:calc(clamp(75px, 9.1vw, 109px) * 5 / 4 + 78px);
}
.peek-print{
  display:block;
  appearance:none;
  -webkit-appearance:none;
  border:none;
  padding:0;
  background:none;
  cursor:pointer;
  position:absolute;
  left:0;
  bottom:0;
  width:clamp(75px, 9.1vw, 109px);
  aspect-ratio:4/5;
  overflow:hidden;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.55);
  transition:transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s ease;
  /* ambient float: layered on the standalone `translate` property so it
     composes with each print's own rotate()/translate() in `transform`
     below, instead of fighting it for the same property */
  animation:peekFloat 5s ease-in-out infinite;
}
.peek-print:nth-child(1){ transform:rotate(-6deg) translate(0, 0); z-index:1; }
.peek-print:nth-child(2){ transform:rotate(4deg) translate(18.2px, -10.4px); z-index:2; animation-duration:5.6s; animation-delay:-1.1s; }
.peek-print:nth-child(3){ transform:rotate(-3deg) translate(7.8px, -28.6px); z-index:3; animation-duration:4.6s; animation-delay:-2.4s; }
.peek-print:nth-child(4){ transform:rotate(6deg) translate(31.2px, -7.8px); z-index:4; animation-duration:5.9s; animation-delay:-.6s; }
.peek-print:nth-child(5){ transform:rotate(-5deg) translate(44.2px, -33.8px); z-index:5; animation-duration:5.2s; animation-delay:-3.3s; }
.peek-print:nth-child(6){ transform:rotate(3deg) translate(59.8px, -15.6px); z-index:6; animation-duration:6.3s; animation-delay:-1.8s; }
.peek-print img{ width:100%; height:100%; object-fit:cover; display:block; }
.peek-print:hover, .peek-print:focus-visible{
  transform:translateY(-7.8px) rotate(0deg) scale(1.06);
  translate:0 0;
  animation-play-state:paused;
  box-shadow:0 18px 34px -12px rgba(0,0,0,.6);
  z-index:10;
}
.peek-print.is-flying{ visibility:hidden; }

@keyframes peekFloat{
  0%, 100%{ translate:0 0; }
  50%{ translate:0 -7px; }
}
@media (prefers-reduced-motion: reduce){
  .peek-print{ animation:none; }
}

@media (max-width:900px){
  .hero-peek{ left:clamp(1rem,5vw,1.6rem); top:auto; bottom:7.5rem; transform:none; }
}
@media (max-width:560px){
  .hero-peek{ bottom:6.5rem; }
  .hero-peek-row{ width:calc(clamp(75px, 9.1vw, 109px) + 78px); height:calc(68px * 5 / 4 + 52px); }
  .peek-print{ width:68px; }
  .peek-print:nth-child(2){ transform:rotate(4deg) translate(11.7px, -6.5px); }
  .peek-print:nth-child(3){ transform:rotate(-3deg) translate(5.2px, -18.2px); }
  .peek-print:nth-child(4){ transform:rotate(6deg) translate(20.8px, -5.2px); }
  .peek-print:nth-child(5){ transform:rotate(-5deg) translate(28.6px, -22.1px); }
  .peek-print:nth-child(6){ transform:rotate(3deg) translate(39px, -10.4px); }
}

.flying-print{
  position:fixed;
  z-index:500;
  top:0; left:0;
  overflow:hidden;
  pointer-events:none;
  box-shadow:0 20px 50px rgba(0,0,0,.4);
}
.flying-print img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ============ SECTION SHELL ============ */
section{
  padding:clamp(4rem, 9vw, 7.5rem) clamp(1.5rem, 6vw, 5rem);
  position:relative;
}
main[data-barba="container"]{
  display:block;
  min-height:100svh;
}

.eyebrow{
  font-size:.7rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent-clay);
  display:flex; align-items:center; gap:.7rem;
  margin-bottom:1.4rem;
}
.eyebrow::before{
  content:'';
  width:26px; height:1px;
  background:var(--accent-clay);
}

/* ============ ABOUT (campaign-hero style) ============ */
.about{
  position:relative;
  height:100dvh;
  overflow:hidden;
  background:radial-gradient(120% 90% at 22% 15%, #3A2D22 0%, var(--bg-deep) 45%, var(--bg-deep-2) 100%);
  color:var(--ink);
  display:flex;
  flex-direction:column;
}
.about .dapple{ opacity:.65; }

.about-top{
  position:relative; z-index:2;
  display:flex; justify-content:space-between; align-items:center;
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-dim);
}

.contact-top-label{
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-dim);
}

.about-type{
  position:relative; z-index:2;
  margin:auto 0;
  padding:3rem 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(2rem, 6vw, 5rem);
}
.about-text-col{ flex:0 1 auto; max-width:46ch; min-width:0; }

.about-photo.reveal{
  flex:0 0 auto;
  position:relative;
  width:clamp(190px, 23vw, 300px);
  aspect-ratio:2 / 3;
  border-radius:3px;
  overflow:hidden;
  box-shadow:0 26px 54px -18px rgba(0,0,0,.6);
  opacity:0;
  transform:rotate(6deg) translateY(26px);
  transition:opacity 1s ease .15s, transform 1s cubic-bezier(.16,.84,.24,1) .15s;
}
.about-photo.reveal.in-view{
  opacity:1;
  transform:rotate(3deg) translateY(0);
}
.about-photo img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.about-photo::after{
  content:'';
  position:absolute; inset:0;
  box-shadow:inset 0 0 0 1px rgba(239,230,216,.14);
  pointer-events:none;
}
@media (prefers-reduced-motion: reduce){
  .about-photo.reveal{ opacity:1; transform:rotate(3deg); transition:none; }
}
.about-numeral{
  position:absolute;
  left:-.04em; top:-.22em;
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(9rem, 20vw, 15.5rem);
  line-height:.8;
  color:transparent;
  -webkit-text-stroke:1px rgba(239,230,216,.16);
  z-index:0;
  user-select:none;
  pointer-events:none;
}
.about-titles{ position:relative; z-index:1; }
.about-title{
  margin:0;
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(2.6rem, 7vw, 5.1rem);
  line-height:.98;
  letter-spacing:.01em;
}
.about-title.outline{
  color:transparent;
  -webkit-text-stroke:1.4px var(--ink);
}
.about-subtitle{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:clamp(1.5rem, 3.6vw, 2.5rem);
  color:var(--accent-gold);
  margin-top:.3rem;
}
.about-desc{
  position:relative; z-index:2;
  max-width:46ch;
  margin-top:2.2rem;
  font-size:.98rem;
  line-height:1.85;
  color:var(--ink-dim);
  font-weight:300;
}
.about-desc + .about-desc{ margin-top:1.1rem; }
.about-desc a{
  color:var(--accent-gold);
  text-decoration:underline;
  text-decoration-color:rgba(201,168,118,.4);
  text-underline-offset:3px;
  transition:text-decoration-color .3s ease;
}
.about-desc a:hover, .about-desc a:focus-visible{ text-decoration-color:var(--accent-gold); }

.about-bottom{
  position:relative; z-index:2;
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-top:2.5rem;
  padding-top:1.4rem;
  border-top:1px solid var(--line-light);
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-dim);
}

/* ============ ARCHIVE (horizontal filmstrip, photoyoshi-style) ============ */
/* the gallery consumes all vertical scroll input while in grid view, so the
   footer has no way to be reached — hide it rather than leave it stranded */
html.lock-scroll footer{ display:none; }

.portraits{
  background:var(--bg-deep-2);
  color:var(--ink);
  position:relative;
  height:100dvh;
  padding:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.filmstrip{
  position:relative;
  z-index:2;
  flex:1 1 auto;
  display:flex;
  align-items:stretch;
  gap:clamp(.5rem, 1vw, 1rem);
  padding:0 clamp(1rem, 4vw, 3rem);
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.filmstrip::-webkit-scrollbar{ display:none; }

.fcol{
  flex-shrink:0;
  height:100%;
  display:flex;
  flex-direction:column;
  gap:clamp(.5rem, 1vw, 1rem);
}
.fcol--triple{ width:clamp(176px, 16vw, 272px); }

.fcol-photo{
  appearance:none;
  -webkit-appearance:none;
  border:none;
  padding:0;
  background:rgba(43,33,24,.08);
  cursor:pointer;
  position:relative;
  flex:1 1 0;
  min-height:0;
  width:100%;
  overflow:hidden;
  opacity:0;
  transform:translateX(24px);
  transition:opacity .7s ease, transform .7s ease;
}
.filmstrip.in-view .fcol-photo{
  opacity:1;
  transform:translateX(0);
  transition-delay:calc(var(--i, 0) * 45ms);
}
.fcol-photo.is-flying{ visibility:hidden; }
.fcol-photo img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  filter:grayscale(1) brightness(1.05) contrast(.92);
  opacity:.55;
  transition:filter .5s ease, opacity .5s ease, transform .7s ease;
}
.fcol-photo:hover img, .fcol-photo:focus-visible img{
  filter:grayscale(0) brightness(1) contrast(1);
  opacity:1;
  transform:scale(1.035);
}
.fcol-photo.filtered-out{ pointer-events:none; }
.fcol-photo.filtered-out img,
.fcol-photo.filtered-out:hover img,
.fcol-photo.filtered-out:focus-visible img{
  filter:grayscale(1) brightness(.7);
  opacity:.18;
  transform:none;
}

/* active category filter: the matching photos show in full color, so the
   selection itself reads as a color reveal rather than just "not dimmed" */
.fcol-photo.filter-match img{
  filter:grayscale(0) brightness(1) contrast(1);
  opacity:1;
}

/* center spotlight: whichever column is in the middle band shows in color
   as the filmstrip scrolls, independent of hover */
.fcol.in-focus .fcol-photo img{
  filter:grayscale(0) brightness(1) contrast(1);
  opacity:1;
}
.fcol.in-focus .fcol-photo.filtered-out img{
  filter:grayscale(1) brightness(.7);
  opacity:.18;
}

@media (prefers-reduced-motion: reduce){
  .fcol-photo{ transition:opacity .3s ease; transform:none !important; opacity:1; }
  .fcol-photo img{ transition:none; }
}

/* fixed overlay: photo counter (bottom-left) + view toggle (bottom-right) */
.gallery-counter{
  position:fixed;
  left:clamp(1.5rem,5vw,3rem);
  bottom:clamp(1.2rem,3vw,2rem);
  z-index:20;
  display:flex;
  align-items:baseline;
  gap:.7rem;
  pointer-events:none;
}
.gallery-counter-label{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.35rem;
  color:var(--ink);
}
.gallery-counter-count{
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-dim);
}

.gallery-filter{
  position:fixed;
  left:50%;
  bottom:clamp(1.2rem,3vw,2rem);
  transform:translateX(-50%);
  z-index:20;
  display:flex;
  gap:.5rem;
}
.filter-btn{
  appearance:none;
  -webkit-appearance:none;
  border:1px solid var(--line-dark);
  background:rgba(243,236,224,.6);
  backdrop-filter:blur(6px);
  font-family:var(--sans);
  font-size:.7rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-dark-dim);
  padding:.85rem 1.15rem;
  border-radius:999px;
  cursor:pointer;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.filter-btn.active{ background:var(--ink-dark); color:#F3ECE0; border-color:var(--ink-dark); }
.filter-btn:hover:not(.active){ color:var(--ink-dark); border-color:var(--ink-dark-dim); }

@media (max-width:560px){
  .gallery-filter{ flex-wrap:wrap; justify-content:center; max-width:88vw; }
  /* the filter pills wrap to multiple rows here and grow tall enough to
     collide with the bottom-left counter — move the counter to the top,
     which is clear space below the nav, instead */
  .gallery-counter{ top:5.75rem; bottom:auto; left:1rem; }
}

.gallery-view-toggle{
  position:fixed;
  right:clamp(1.5rem,5vw,3rem);
  bottom:clamp(1.2rem,3vw,2rem);
  z-index:20;
  display:flex;
  gap:.5rem;
}
.view-btn{
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-dark);
  background:rgba(243,236,224,.6);
  backdrop-filter:blur(6px);
  border-radius:4px;
  cursor:pointer;
  color:var(--ink-dark-dim);
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.view-btn.active, .view-btn:hover{ background:var(--ink-dark); color:#F3ECE0; border-color:var(--ink-dark); }
.view-btn svg{ width:16px; height:16px; }

/* carousel (focus) view — one large sharp photo centered, blurred/dimmed
   neighbors peeking at the edges, same infinite horizontal-loop scroll as grid */
.carousel{
  display:none;
  position:relative;
  z-index:2;
  flex:1 1 auto;
  align-items:center;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.carousel::-webkit-scrollbar{ display:none; }
.portraits.list-view .filmstrip{ display:none; }
.portraits.list-view .carousel{ display:flex; }
.portraits.list-view .gallery-counter{ display:none; }

.carousel-slide{
  appearance:none;
  -webkit-appearance:none;
  border:none;
  padding:0;
  background:rgba(0,0,0,.2);
  cursor:pointer;
  flex:0 0 auto;
  width:min(50vw, 720px);
  height:80%;
  overflow:hidden;
  filter:blur(7px) brightness(.5) saturate(.75);
  opacity:.6;
  transform:scale(.94);
  transition:filter .6s ease, opacity .6s ease, transform .6s ease;
}
.carousel-slide.is-active{
  filter:blur(0) brightness(1) saturate(1);
  opacity:1;
  transform:scale(1);
}
.carousel-slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.carousel-slide.filtered-out,
.carousel-slide.is-active.filtered-out{
  filter:blur(7px) brightness(.35) saturate(.4);
  opacity:.3;
  transform:scale(.94);
  pointer-events:none;
}

/* active category filter: matching slides get their full color back even
   while blurred in the background, so the selection reads as a color cue */
.carousel-slide.filter-match{
  filter:blur(7px) brightness(.5) saturate(1);
}
.carousel-slide.filter-match.is-active{
  filter:blur(0) brightness(1) saturate(1);
}
@media (prefers-reduced-motion: reduce){
  .carousel-slide{ transition:none; }
}

.carousel-caption{
  display:none;
  position:fixed;
  left:clamp(1.5rem, 5vw, 3rem);
  bottom:clamp(1.5rem, 4vw, 3rem);
  z-index:20;
  pointer-events:none;
  color:var(--ink);
}
.portraits.list-view .carousel-caption{ display:block; }
.carousel-caption-main{
  display:flex;
  align-items:flex-start;
  gap:.5rem;
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(2rem, 4.2vw, 3.4rem);
  line-height:1;
}
.carousel-caption-index{
  font-size:.4em;
  font-weight:400;
  margin-top:.35em;
  color:var(--ink-dim);
}
.carousel-caption-count{
  margin-top:.6rem;
  font-size:.76rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-dim);
}

@media (max-width:900px){
  .carousel-slide{ width:min(70vw, 520px); }
}
@media (max-width:560px){
  .carousel-slide{ width:82vw; height:70%; }
}

/* ============ LIGHTBOX ============ */
.lightbox{
  position:fixed; inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(1rem, 4vw, 3rem);
  background:rgba(20,15,11,.94);
  opacity:0;
  visibility:hidden;
  transition:opacity .35s ease, visibility 0s linear .35s;
}
.lightbox.open{
  opacity:1;
  visibility:visible;
  transition:opacity .35s ease, visibility 0s linear 0s;
}
.lightbox-figure{
  position:relative;
  max-width:min(78vw, 900px);
  max-height:88vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
  transform:scale(.96);
  transition:transform .4s cubic-bezier(.2,.7,.3,1);
}
.lightbox.open .lightbox-figure{ transform:scale(1); }
.lightbox-figure img{
  max-width:100%;
  max-height:78vh;
  width:auto;
  object-fit:contain;
  box-shadow:0 30px 70px rgba(0,0,0,.5);
}
.lightbox-figure figcaption{
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-dim);
}
.lightbox-close, .lightbox-prev, .lightbox-next{
  position:absolute;
  background:none;
  border:1px solid var(--line-light);
  color:var(--ink);
  width:44px; height:44px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background .25s ease, border-color .25s ease;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{
  background:rgba(239,230,216,.1);
  border-color:var(--ink-dim);
}
.lightbox-close{ top:clamp(1rem,3vw,2rem); right:clamp(1rem,3vw,2rem); }
.lightbox-prev{ left:clamp(.5rem,2vw,1.5rem); top:50%; transform:translateY(-50%); }
.lightbox-next{ right:clamp(.5rem,2vw,1.5rem); top:50%; transform:translateY(-50%); }
.lightbox-prev svg, .lightbox-next svg, .lightbox-close svg{ width:18px; height:18px; }
@media (max-width:560px){
  .lightbox-prev{ left:.4rem; }
  .lightbox-next{ right:.4rem; }
}
@media (prefers-reduced-motion: reduce){
  .lightbox, .lightbox-figure{ transition:none; }
}

/* ============ CONTACT HERO ============ */
.contact-hero{
  position:relative;
  height:100dvh;
  overflow:hidden;
  background:radial-gradient(120% 90% at 78% 20%, #3A2D22 0%, var(--bg-deep) 45%, var(--bg-deep-2) 100%);
  color:var(--ink);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.contact-hero .dapple{ opacity:.6; }

.contact-photo{
  position:absolute;
  top:0; left:0;
  width:50%; height:100%;
  z-index:1;
  overflow:hidden;
}
.contact-photo img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 48%;
  display:block;
}
.contact-photo::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(27,20,15,0) 58%, var(--bg-deep-2) 100%);
  pointer-events:none;
}

.contact-meta-row{
  position:relative; z-index:2;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1.5rem;
}
.contact-meta-row .meta-block{ display:flex; flex-direction:column; gap:.45rem; }
.contact-meta-row.foot-row{
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim);
}

.contact-main-grid{
  position:relative; z-index:2;
  margin:auto 0 auto auto;
  padding:3rem 0;
  width:50%;
  display:flex;
  justify-content:center;
}
.contact-hero-text{
  max-width:46ch;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.contact-headline{
  margin:0 auto;
  font-family:var(--serif); font-weight:500;
  font-size:clamp(2.6rem, 7vw, 5.2rem);
  line-height:1.02;
  max-width:16ch;
}
.contact-headline em{ font-style:italic; color:var(--accent-gold); font-weight:400; }
.contact-social-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:1.6rem;
  margin-top:2rem;
}
.contact-social{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  text-decoration:none;
  color:var(--ink-dim);
  padding:.65rem 0;
}
.contact-social-icon{
  width:19px; height:19px;
  flex-shrink:0;
  transition:color .3s ease, transform .3s ease;
}
.contact-social-handle{
  font-family:var(--sans); font-size:.85rem; letter-spacing:.02em;
  border-bottom:1px solid transparent;
  padding-bottom:.15rem;
  transition:color .3s ease, border-color .3s ease;
}
.contact-social:hover .contact-social-icon,
.contact-social:focus-visible .contact-social-icon{
  color:var(--accent-gold);
  transform:rotate(-8deg);
}
.contact-social:hover .contact-social-handle,
.contact-social:focus-visible .contact-social-handle{
  color:var(--ink);
  border-bottom-color:var(--accent-gold);
}
@media (prefers-reduced-motion: reduce){
  .contact-social-icon{ transition:color .3s ease; }
  .contact-social:hover .contact-social-icon,
  .contact-social:focus-visible .contact-social-icon{ transform:none; }
}

.contact-sub{
  margin-top:1.4rem; font-size:1rem; line-height:1.75; color:var(--ink-dim); font-weight:300; max-width:40ch;
}

.btn-primary{
  display:inline-flex; align-items:center; gap:.6rem;
  margin-top:2.2rem;
  font-family:var(--sans); font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
  background:var(--accent-gold); color:var(--bg-deep-2);
  padding:1rem 1.8rem; border-radius:999px; border:none; cursor:pointer;
  text-decoration:none;
  transition:transform .3s ease, background .3s ease, color .3s ease;
}
.btn-primary:hover{ background:var(--ink); transform:translateY(-2px); }
.btn-primary svg{ width:14px; height:14px; transition:transform .3s ease; }
.btn-primary:hover svg{ transform:translate(2px,2px); }

/* ============ CONTACT FORM ============ */
form.contact-form{ display:flex; flex-direction:column; gap:1.5rem; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.form-field{ display:flex; flex-direction:column; gap:.55rem; }
.form-field label{
  font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-dim);
}
.form-field input, .form-field textarea{
  background:transparent; border:none; border-bottom:1px solid var(--line-light);
  padding:.7rem 0; font-family:var(--sans); font-size:.98rem; color:var(--ink);
  transition:border-color .3s ease;
}
.form-field input:focus, .form-field textarea:focus{
  outline:none; border-bottom-color:var(--accent-gold);
}
.form-field textarea{ resize:vertical; min-height:90px; }

.form-consent{
  display:flex; align-items:flex-start; gap:.7rem;
  font-size:.8rem; color:var(--ink-dim); line-height:1.55;
  cursor:pointer;
}
.form-consent input{
  margin-top:.2rem; accent-color:var(--accent-gold); width:16px; height:16px; flex-shrink:0;
}

.contact-form.hidden{ display:none; }
.form-success{ display:none; flex-direction:column; gap:.6rem; padding:1rem 0; }
.form-success.active{ display:flex; }
.form-success h3{ font-family:var(--serif); font-size:1.6rem; font-weight:500; color:var(--ink); }
.form-success p{ color:var(--ink-dim); font-size:.95rem; }

/* ============ CHAT DRAWER (contact sheet sliding out of a tray) ============ */
.chat-drawer{
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:flex-end; justify-content:center;
  background:rgba(15,11,7,.62);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
}
.chat-drawer.open{ opacity:1; pointer-events:auto; }
.chat-drawer-panel{
  position:relative;
  width:min(640px, 94vw);
  max-height:88vh;
  overflow-y:auto;
  background:var(--bg-deep);
  border-radius:24px 24px 0 0;
  box-shadow:0 -24px 60px -16px rgba(0,0,0,.6);
  padding:1.4rem clamp(1.5rem, 5vw, 3rem) 2.6rem;
  transform:translateY(100%);
  transition:transform .55s cubic-bezier(.16,.84,.24,1);
}
.chat-drawer.open .chat-drawer-panel{ transform:translateY(0); }
.chat-drawer-handle{
  width:40px; height:4px; border-radius:999px;
  background:var(--line-light);
  margin:0 auto 1.6rem;
}
.chat-drawer-close{
  position:absolute; top:1.05rem; right:1.15rem;
  appearance:none; -webkit-appearance:none; border:none; background:none;
  padding:.85rem; cursor:pointer;
  color:var(--ink-dim);
  transition:color .3s ease, transform .3s ease;
}
.chat-drawer-close:hover, .chat-drawer-close:focus-visible{ color:var(--accent-gold); transform:rotate(90deg); }
.chat-drawer-close svg{ width:18px; height:18px; display:block; }
.chat-drawer-head{ margin-bottom:1.8rem; }
.chat-drawer-eyebrow{
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent-clay);
}
.chat-drawer-title{
  font-family:var(--serif); font-weight:500; font-size:clamp(1.8rem, 4vw, 2.5rem);
  margin-top:.5rem;
}
.chat-drawer-title em{ font-style:italic; color:var(--accent-gold); font-weight:400; }
@media (prefers-reduced-motion: reduce){
  .chat-drawer, .chat-drawer-panel, .chat-drawer-close{ transition:none; }
  .chat-drawer-close:hover, .chat-drawer-close:focus-visible{ transform:none; }
}
@media (max-width:560px){
  .chat-drawer-panel{ border-radius:20px 20px 0 0; padding:1.3rem 1.4rem 2rem; max-height:92vh; }
}

/* ============ FOOTER ============ */
footer{
  background:var(--bg-deep-2);
  color:var(--ink);
  padding:1.6rem clamp(1.5rem, 6vw, 5rem);
}
.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  font-size:.72rem; letter-spacing:.08em; color:var(--ink-dim);
}

/* ============ REVEAL ON SCROLL ============ */
.reveal{
  opacity:0; transform:translateY(18px);
  transition:opacity .9s ease, transform .9s ease;
}
.reveal.in-view{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 900px){
  .contact-photo{ display:none; }
  .contact-main-grid{ width:100%; margin:auto 0; }
  .about-photo{ display:none; }

  .nav-toggle{ display:flex; }
  .nav-links{
    position:fixed;
    top:0; right:0;
    height:100vh;
    width:min(78vw, 320px);
    background:var(--bg-deep-2);
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:1.5rem;
    padding:6.5rem 2rem 2rem;
    transform:translateX(100%);
    transition:transform .4s ease;
    box-shadow:-12px 0 40px rgba(0,0,0,.25);
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-links a{ font-size:.9rem; padding:.85rem 0; width:100%; }
  .nav-meta{
    margin-left:0; padding-left:0; border-left:none;
    border-top:1px solid var(--line-light);
    padding-top:1.2rem; margin-top:.5rem; width:100%;
  }
}
@media (max-width: 560px){
  .hero-body{ padding-top:5rem; }
  /* the enlarged "From the Archive" print stack sits at the left edge here —
     narrow the subhead so its wrapped lines stay clear of it on the right */
  .hero-sub{ max-width:16ch; }
  .form-row{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; gap:.5rem; }
  .hero-headline{ letter-spacing:0; }

  .about-type{
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .about-title{ font-size:clamp(2rem, 11vw, 2.75rem); }
  .about-subtitle{ font-size:clamp(1.15rem, 6vw, 1.5rem); }
  .about-desc{
    font-size:.88rem; line-height:1.62; max-width:34ch;
    margin-left:auto; margin-right:auto; margin-top:1.3rem;
  }
  .about-desc + .about-desc{ margin-top:.85rem; }
  /* the inline padding-top on .about is sized for desktop; it needs to
     shrink here too, but inline styles always beat a stylesheet rule
     without !important */
  .about{ padding-top:2.5rem !important; }
}

/* Hero's dapple stays hidden — it was a stand-in for dappled light before
   the real hero photo was added, and would now just conflict with it */
header.hero .dapple{
  display:none;
}