/* ============================================================
   ABOUT
   ============================================================ */
.about{background:var(--stone)}
.about__title{
  margin-top:clamp(1.6rem,3.4vw,2.75rem);
  margin-inline:auto;text-align:center;
  max-width:16ch;
}
/* Single centred column at every width. This is the same stack the <900px
   breakpoint already shipped, promoted to the default — no amount of
   text-align can centre content that lives in a 52%-wide right-hand column. */
.about__grid{
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(2.5rem,5vw,4.5rem);
  margin-top:clamp(2.5rem,5vw,4.5rem);
}
.about__figure{position:relative;margin:0;width:min(100%,460px)}
.about__figure[data-reveal]{opacity:1;transform:none}
.about__quote{margin:0}

/* From 1000px up this runs as two columns — portrait left, copy and pull quote
   stacked right — purely to buy back height. Stacked, About was the tallest
   section on the page and the least important; side by side it is roughly half
   as tall with every word still on it. The copy stays centred within its own
   column, so no sentence starts at the left edge of the page. */
@media (min-width:1000px){
  /* --- desktop compaction: keep the section within one screen --- */
  .about{padding-block:clamp(2.5rem,3.8vw,3.8rem)}
  .about__title{margin-top:clamp(.4rem,.8vw,.8rem)}
  .about__grid{
    display:grid;
    grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
    grid-template-rows:auto auto;
    align-items:center;
    column-gap:clamp(2.75rem,5vw,5.5rem);
    row-gap:clamp(.6rem,1vw,.8rem);
    margin-top:clamp(1.2rem,2.2vw,2rem);
  }
  .about__figure{grid-column:1;grid-row:1 / span 2;width:100%;max-width:380px;justify-self:center}
  .about__copy {grid-column:2;grid-row:1;align-self:end}
  .about__copy p{max-width:46ch}
  .about__quote{grid-column:2;grid-row:2;align-self:start;max-width:24ch}
}

.about__frame{
  --tilt:-2.4deg;
  position:relative;display:block;width:100%;
  padding:clamp(13px,1.5vw,26px);
  background:var(--ivory);
  transform:rotate(var(--tilt));
  box-shadow:0 26px 60px -34px color-mix(in srgb,var(--espresso) 60%,transparent);
  transition:opacity .95s var(--ease-soft),transform 1.1s var(--ease);
}
.js .about__frame{opacity:0;transform:rotate(var(--tilt)) translateY(26px)}
.about__figure.is-in .about__frame{opacity:1;transform:rotate(var(--tilt))}
/* layered fabric backing peeking behind one edge */
.about__frame::before{
  content:"";position:absolute;
  left:-14px;top:16px;right:20px;bottom:-16px;
  background:var(--linen);border:1px dashed var(--clay);
  transform:rotate(1.6deg);z-index:-1;
}
/* stitched corner detail */
.about__frame::after{
  content:"";position:absolute;left:7px;top:7px;
  width:clamp(26px,3vw,44px);height:clamp(26px,3vw,44px);
  border-left:1px dashed var(--clay);border-top:1px dashed var(--clay);
  pointer-events:none;
}
/* `isolation:isolate` pins the blend root for the grade below. ::before uses
   mix-blend-mode:soft-light, which otherwise blends against whatever stacking
   context happens to be nearest — so adding a z-index anywhere up the tree
   (the desktop `.about__grid` does exactly that) would silently change how the
   portrait renders. Isolating here makes the grade depend only on the photo. */
.about__photo{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--stone);isolation:isolate}
/* Film grade on a raw frame. Three parts, each doing one job:
   1. the filter warms and lifts it — sepia pulls the whole image toward the
      brand's sand/clay, saturate pushes back so it warms rather than yellows;
   2. ::before is the colour cast — a warm clay lift in the highlights and a
      cool olive weight in the shadows, which is what actually reads as film
      rather than "photo with a filter on it";
   3. ::after is halation plus a corner vignette, the falloff a real lens gives.
   Kept subtle on purpose: this is a grade, not an Instagram preset. */
.about__photo img{
  width:100%;height:100%;object-fit:cover;object-position:center 20%;
  filter:sepia(.22) saturate(1.18) contrast(1.07) brightness(1.03) hue-rotate(-6deg);
}
.about__photo::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(150deg,
    color-mix(in srgb,var(--clay) 26%,transparent) 0%,
    transparent 42%,
    color-mix(in srgb,var(--olive) 20%,transparent) 100%);
  mix-blend-mode:soft-light;
}
.about__photo::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(120% 88% at 50% 42%,
      transparent 52%,
      color-mix(in srgb,var(--espresso) 30%,transparent) 100%),
    radial-gradient(70% 52% at 52% 26%,
      color-mix(in srgb,var(--linen) 20%,transparent) 0%,transparent 68%);
}
.about__figure.is-in .about__photo{transition-delay:.18s}
.about__figure.is-in .about__photo img{transition-delay:.18s}
.about__grain{
  position:absolute;inset:0;pointer-events:none;
  opacity:.09;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.about__annot{
  position:absolute;left:50%;bottom:-2.4rem;
  transform:translateX(-50%) rotate(-2.4deg);
}
.about__figure .patch--tz{right:-6%;top:-5%;width:clamp(70px,8.5vw,124px)}

/* Centred as a BLOCK (margin-inline:auto) but set FLUSH LEFT.
   It was centred as text too, back when this was four short paragraphs —
   ragged-both-edges survives a 54ch measure at that length. The copy went to
   five long paragraphs on 2026-08-06 (~380 words), and at that volume centred
   text makes the eye hunt for the start of every line. This is deliberately
   unscoped: the readability problem is identical at both widths.
   The pull quote below is still centred — it is two lines, which is what
   centred ragged text is actually for. */
.about__copy p{
  max-width:54ch;margin-inline:auto;
  text-align:left;text-wrap:pretty;
  font-size:var(--t-body);line-height:1.85;
}
.about__copy p + p{margin-top:var(--s-4)}

.about__quote{
  padding-top:clamp(1.4rem,2.6vw,2.2rem);
  margin-top:clamp(1.4rem,2.6vw,2.2rem);
  border-top:1px dashed var(--clay);
  max-width:26ch;margin-inline:auto;
  text-align:center;text-wrap:balance;
}
.about__quote p{
  font-family:var(--display);font-style:italic;font-weight:300;
  font-size:var(--t-quote);line-height:1.18;
}

.about__close{
  margin-top:clamp(3.5rem,7vw,6.5rem);
  padding-top:clamp(2rem,3.4vw,3rem);
  border-top:1px dashed var(--hairline);
}
/* `.about__keywords` lived here — the "warm light · real reactions · nothing
   overproduced" strip. Removed 2026-08-05 at Tanyi's request, rule and all, so
   the class cannot quietly come back with no styling. The details list is now
   the first child of .about__close, so its top margin does the spacing the
   keyword line used to. */
.about__details{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--s-3) var(--s-4);
  margin-top:clamp(2.2rem,4vw,3.4rem);
  padding:0;list-style:none;
  text-align:center;
}
.about__details li{padding-top:.9rem;border-top:1px solid var(--olive)}

/* --- desktop compaction: keep About within one screen on a laptop ---
   These rules come AFTER the base declarations so they win by cascade. */
@media (min-width:1000px){
  .about{padding-block:clamp(2.5rem,3.8vw,3.8rem)}
  .about__title{margin-top:clamp(.4rem,.8vw,.8rem);font-size:clamp(2.4rem,4.2vw,4.8rem);max-width:none}
  .about__title .line,.about__title .line>span{display:inline}
  .about__figure{max-width:440px}
  .about__copy p{line-height:1.6}
  .about__quote{padding-top:clamp(.5rem,.8vw,.7rem);margin-top:0;max-width:30ch}
  .about__close{margin-top:clamp(1.5rem,2.5vw,2.5rem);padding-top:clamp(.8rem,1.4vw,1.2rem)}
  .about__details{margin-top:clamp(1rem,1.8vw,1.5rem)}

  /* ---- DARKROOM ----------------------------------------------
     Promoted from variant v06 on 2026-08-06 and made the default. A charcoal
     room with one lit print: the portrait sits in an ivory border like a fibre
     print on a light table, the copy is linen at 85%, and the pull quote is
     the only warm thing on screen.

     THE SECTION IS BRACKETED BY TWO IDENTICAL SPROCKET STRIPS. The film
     perforation runs along the top edge AND the bottom edge — same gradient,
     same height, same opacity, same inset. That symmetry is the entire edge
     treatment; change one and you change the other in the same commit.

     There used to be a tall film band across the top instead (stone frames,
     rotated, wiping open on scroll). Two things killed it. It needed ~195px of
     top padding to clear, which left a dead black gap above the title. And it
     was gated on the reveal observer via `clip-path`, so until that fired
     there was nothing painted there at all — which is how it shipped looking
     like an empty section. These strips are pseudo-elements: always painted,
     no JS, nothing to fire. */
  .about{
    background:var(--charcoal);
    position:relative;overflow:hidden;
    /* symmetric, because the two edges are now symmetric */
    padding-block:clamp(4rem,6vw,6.5rem);
  }
  /* the film perforation — top and bottom, deliberately identical */
  .about::before,.about::after{
    content:"";position:absolute;left:0;right:0;height:16px;
    pointer-events:none;
    background-image:linear-gradient(to right,var(--linen) 0 14px,transparent 14px 36px);
    background-size:36px 100%;
    opacity:.4;
  }
  .about::before{top:14px}
  .about::after {bottom:14px}

  /* --- the print --- */
  .about__title{color:var(--linen)}
  /* two lines again — the compaction rule above collapses them to one */
  .about__title .line{display:block}
  .about__title .line>span{display:block}
  .about__grid{
    position:relative;z-index:2;
    align-items:center;
    margin-top:clamp(1.6rem,2.8vw,2.6rem);
  }
  .about__figure{grid-column:1;grid-row:1 / span 2;justify-self:center}
  .about__copy {grid-column:2;grid-row:1;align-self:start}
  .about__quote{grid-column:2;grid-row:2;align-self:start;max-width:none}
  .about__frame{
    --tilt:0deg;
    padding:clamp(12px,1.4vw,20px);
    background:var(--ivory);
    box-shadow:0 0 90px -10px rgba(246,242,235,.16),
               0 40px 70px -40px rgba(0,0,0,.9);
  }
  /* the fabric backing belongs to the linen scrapbook, not to a darkroom */
  .about__frame::before{content:none}
  .about__frame::after{border-color:rgba(38,35,33,.3)}
  .about__annot{color:rgba(246,242,235,.55)}

  /* --- the copy --- */
  .about__copy p{max-width:none;color:rgba(246,242,235,.85)}
  /* THE DROP CAP, taken from variant v02.
     It is a real <span>, not `::first-letter`, and that is deliberate: the
     paragraph opens on "I'm", and `::first-letter` swallows punctuation that
     immediately follows the letter — it set "I'" at 3.6em, apostrophe and all.
     The span is desktop-only styling, so on mobile it stays an ordinary inline
     "I" and the sentence is unchanged. */
  .about__dropcap{
    float:left;
    font-family:var(--display);font-weight:400;
    /* DERIVED, not eyeballed. For the cap to span exactly two lines its ink
       ascent must equal one line-height plus the body text's own cap height.
       Measured off the real fonts: Cormorant's "I" inks to .625 of its
       font-size, Manrope caps at .72 of its own, and `.about__copy p` runs
       line-height 1.6 on desktop, so
           (1.6 + .72) / .625 = 3.712em
       line-height is twice the body's 1.6 (3.2 / 3.712 = .862) so the float
       occupies exactly two lines, and the .007em nudge takes the last half
       pixel off the baseline. Verified to <0.5px on both the cap top and the
       second baseline.
       IF `.about__copy p`'s line-height EVER MOVES OFF 1.6, all three numbers
       are wrong — re-derive them, do not nudge. */
    font-size:3.712em;
    line-height:.862;
    margin-top:.007em;
    /* No right padding. Cormorant's "I" already carries ~.046em of right side
       bearing and that is the entire gutter this needs: the paragraph opens on
       the contraction "I'm", so anything more reads as "I 'm". */
    padding:0;
    color:var(--clay);
  }
  .about__quote{border-left:1px solid rgba(181,146,120,.5);padding-left:1.4rem}
  .about__quote p{color:var(--clay);text-align:left}
  .about__close{border-top-color:var(--hairline-dark)}
  .about__details li{border-top-color:var(--hairline-dark);color:rgba(246,242,235,.66)}
}

@media (max-width:899px){
  /* .about__title needs no override once it is margin-inline:auto */
  .about__grid{
    display:flex;flex-direction:column;
    gap:clamp(2.5rem,7vw,3.5rem);
    margin-top:clamp(2rem,6vw,3rem);
  }
  .about__frame{--tilt:-1.4deg;box-shadow:0 16px 38px -28px color-mix(in srgb,var(--espresso) 55%,transparent)}
  .about__frame::before{left:-8px;top:12px;right:14px;bottom:-10px}
  .about__quote{max-width:24ch;margin-top:0}
  .about__figure .patch--tz{right:2%;top:-4%;width:clamp(64px,17vw,96px)}
  .about__details{grid-template-columns:1fr;gap:0}
  .about__details li{padding-block:.85rem}
}