/* Etpaar Creative — homepage testimonials panel + editor's-note purpose.
   Loads after site.css; every override for this zone lives here.
   The section keeps site.css's .quote class (home.js anchors the dusk ramp
   to it), so the old centered pull-quote styles are re-set below. */

/* ===== the section shell ===== */
.quote.testimonials{
  --e-suck:cubic-bezier(.87,0,.13,1);   /* the house curve: slow in, pulled through, soft release */
  max-width:min(1240px,100%);
  margin:0 auto;
  padding:clamp(72px,11vh,140px) var(--gutter) clamp(48px,7vh,88px);
  text-align:left;
  position:relative;
  z-index:1; /* sits above the .dusk layer, like every other section */
}
.quote.testimonials .sec-index{margin-bottom:clamp(18px,3vh,30px);}

/* ===== the panel: cream paper washed with the client's own ink ===== */
.t-panel{
  position:relative;
  border-radius:clamp(20px,2.6vw,30px);
  background:var(--paper);
  border:1px solid rgba(20,18,31,0.09);
  box-shadow:0 34px 80px -46px rgba(20,18,31,0.4),0 2px 6px rgba(20,18,31,0.05);
  overflow:hidden;
  touch-action:pan-y pinch-zoom; /* sideways swipes reach JS; scrolling stays native */
}
/* the panel's paper grain, continuing the ambient's texture */
.t-panel::after{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:radial-gradient(circle,rgba(60,38,12,0.05) 0.5px,transparent 1.1px);
  background-size:5px 5px;mix-blend-mode:multiply;opacity:0.5;
  border-radius:inherit;
}

/* ===== slides: grid-stacked, cross-fading ===== */
.t-slides{display:grid;}
.t-slide{
  grid-area:1/1;
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(300px,32vw,420px);
  gap:clamp(26px,4vw,58px);
  padding:clamp(30px,4.6vw,62px);
  align-items:stretch;
  opacity:0;visibility:hidden;
  transition:opacity .7s var(--e-suck),visibility 0s linear .7s;
}
.t-slide.on{
  opacity:1;visibility:visible;
  transition:opacity .7s var(--e-suck) .12s,visibility 0s;
}
/* each slide carries its own low-tint wash of the client's ink, so the
   colour cross-fades together with the words (work-page wash language) */
.t-slide::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(130% 150% at 86% -8%,rgba(var(--t-ink-rgb),0.19),transparent 58%),
    radial-gradient(110% 130% at -6% 108%,rgba(var(--t-ink-rgb),0.12),transparent 55%);
}
/* a quiet rise on the incoming copy — motion only, fails open */
html.js-ready body:not(.calm) .t-slide:not(.on) .t-say{transform:translateY(16px);}
html.js-ready body:not(.calm) .t-slide .t-say{transition:transform .7s var(--e-suck) .12s;}
.t-slide.on .t-say{transform:none;}
@media (prefers-reduced-motion: reduce){
  .t-slide,html.js-ready body:not(.calm) .t-slide .t-say{transition:none;}
  html.js-ready body:not(.calm) .t-slide:not(.on) .t-say{transform:none;}
}

/* ===== left column: the words ===== */
.t-say{position:relative;z-index:1;display:flex;flex-direction:column;min-width:0;}
.t-key{
  font-family:var(--ff-display);font-weight:400;font-style:italic;
  font-variation-settings:var(--fx-i);
  font-size:clamp(2.05rem,4.4vw,3.6rem);line-height:1.08;letter-spacing:-0.02em;
  color:var(--ink);margin:0 0 clamp(18px,2.6vh,28px);text-wrap:balance;
}
/* .testimonials prefix outranks site.css's `.quote blockquote` pull-quote */
.testimonials .t-full{
  font-size:clamp(1.14rem,1.6vw,1.34rem);line-height:1.55;color:var(--soft-ink);
  max-width:54ch;margin:0 0 clamp(24px,4vh,40px);font-style:normal;
  font-family:var(--ff-body);font-weight:400;letter-spacing:0;
  font-variation-settings:normal;
}
.t-by{
  margin-top:auto;display:flex;align-items:center;gap:18px;
  padding-top:18px;border-top:1px solid rgba(20,18,31,0.1);
}
/* medallion · name · role — the medallion spans both text rows */
.t-who{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:14px;row-gap:2px;align-items:center;min-width:0;
}
.t-who b{color:var(--ink);font-weight:600;font-size:1.05rem;grid-column:2;align-self:end;}
.t-role{color:var(--warm-gray);font-size:0.95rem;grid-column:2;align-self:start;}

/* ===== the medallion: a circle-cropped portrait or an inked monogram.
   Cream under the photo while it loads; a hairline ring in the slide's
   own ink. .t-ava-mono is the fallback face — initials set in Fraunces
   over a soft wash of the same ink (real people ALWAYS get this form). */
.t-ava{
  grid-column:1;grid-row:1/span 2;
  width:clamp(56px,4.6vw,64px);height:clamp(56px,4.6vw,64px);
  border-radius:50%;overflow:hidden;flex:none;
  background:var(--paper);
  box-shadow:0 0 0 1px rgba(var(--t-ink-rgb,58,53,48),0.45),
    0 10px 18px -12px rgba(20,18,31,0.4);
  display:grid;place-items:center;
}
.t-ava img{
  width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;
}
.t-ava-mono{
  font-family:var(--ff-display);font-weight:500;font-style:normal;
  font-size:1.25rem;line-height:1;letter-spacing:0.04em;
  color:var(--t-ink,var(--soft-ink));
  background:
    radial-gradient(120% 120% at 30% 22%,
      rgba(var(--t-ink-rgb,58,53,48),0.17),
      rgba(var(--t-ink-rgb,58,53,48),0.07) 72%),
    var(--paper);
}
.t-ava-mono img{display:none;} /* belt & braces if a broken img lingers */
/* the brand's mark, restamped in its own ink through a CSS mask.
   mask-image is set inline per slide (an inline URL resolves against the
   document; through a var() Chromium resolves it against this stylesheet) */
.t-mark{
  margin-left:auto;flex:none;
  height:clamp(26px,2.6vw,34px);aspect-ratio:var(--t-logo-ar,4/1);
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  background-color:var(--t-ink,var(--soft-ink));opacity:0.85;
}

/* ===== right column: a work plate from that brand's kit ===== */
.t-art{
  position:relative;display:block;border-radius:clamp(14px,1.6vw,18px);
  overflow:hidden;min-height:300px;max-height:440px;color:inherit;text-decoration:none;
  z-index:1;
}
.t-art picture,.t-art img{display:block;width:100%;height:100%;}
.t-art img{object-fit:cover;transition:transform 1.2s var(--e-quart);}
body:not(.calm) .t-art:hover img{transform:scale(1.035);}
.t-tag{
  position:absolute;left:14px;bottom:14px;z-index:2;
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--ff-mono);font-size:0.625rem;font-weight:500;
  letter-spacing:0.1em;text-transform:uppercase;line-height:1;
  color:var(--ink);background:rgba(251,248,243,0.92);
  padding:8px 13px;border-radius:999px;
  max-width:calc(100% - 28px);
}
.t-tag .t-arw{transition:transform .45s var(--e-expo);}
.t-art:hover .t-arw{transform:translateX(3px);}

/* ===== pager: a quiet strip along the panel's foot ===== */
.t-pager{display:none;}
.t-pager:not([hidden]){
  display:flex;align-items:center;gap:12px;
  padding:16px clamp(30px,4.6vw,62px) 22px;
  border-top:1px solid rgba(20,18,31,0.08);
  position:relative;z-index:1;
}
.t-btn{
  width:44px;height:44px;border-radius:999px;flex:none;
  border:1px solid rgba(20,18,31,0.18);background:rgba(251,248,243,0.7);
  color:var(--ink);font-size:1.05rem;line-height:1;cursor:pointer;
  font-family:var(--ff-body);
  transition:background .35s var(--e-quart),border-color .35s var(--e-quart),transform .35s var(--e-expo);
}
.t-btn:hover{
  background:rgba(var(--t-ink-rgb,58,53,48),0.1);
  border-color:rgba(var(--t-ink-rgb,58,53,48),0.45);
  transform:translateY(-1px);
}
.t-count{
  font-size:0.72rem;letter-spacing:0.14em;color:var(--warm-gray);
  min-width:56px;text-align:center;
}
/* one dot per letter, inked in the CURRENT slide's colour (the panel-level
   --t-ink cross-fades as paint() restamps it) */
.t-dots{display:flex;align-items:center;gap:4px;margin-inline:2px;}
.t-dot{
  width:24px;height:24px;border:0;padding:0;margin:0;flex:none;
  background:transparent;cursor:pointer;
  display:grid;place-items:center;border-radius:50%;
}
.t-dot::after{
  content:'';width:8px;height:8px;border-radius:50%;
  background:rgba(var(--t-ink-rgb,58,53,48),0.25);
  transition:background .45s var(--e-quart),transform .45s var(--e-expo);
}
.t-dot:hover::after{background:rgba(var(--t-ink-rgb,58,53,48),0.55);}
.t-dot.on::after{background:var(--t-ink,var(--soft-ink));transform:scale(1.3);}
.t-dot:focus-visible{outline:2px solid rgba(var(--t-ink-rgb,58,53,48),0.6);outline-offset:1px;}

/* ===== responsive: the panel stacks ===== */
@media(max-width:900px){
  .t-slide{grid-template-columns:1fr;gap:26px;}
  .t-art{min-height:0;aspect-ratio:4/3;}
  .t-mark{height:24px;}
}
@media(max-width:560px){
  .t-slide{padding:24px 20px 28px;}
  .t-pager:not([hidden]){padding:14px 20px 18px;gap:8px;}
  .t-by{gap:12px;}
  .t-who{column-gap:12px;}
}

/* =====================================================================
   THE HANDOFF — the dusk ramp, recalibrated for the taller letters panel.
   home.js anchors .dusk at this section's top; the original stops put the
   steep crossing where the old three-line quote ended. The panel is taller,
   so the descent is re-sampled (same smootherstep discipline, same
   beige→sand→clay→rose→mauve→plum path): the ground holds cream past the
   panel, crosses in the empty band beneath it, and is fully dark before
   the editor's note begins. #55414B matches site.css's --fdark literal.
   ===================================================================== */
body.home .dusk{
  background:
    radial-gradient(circle,rgba(60,38,12,0.05) 0.5px,transparent 1.1px) 0 0/5px 5px,
    radial-gradient(circle,rgba(40,25,10,0.03) 0.5px,transparent 1px) 1.5px 1px/3px 3px,
    linear-gradient(180deg,
      rgba(250,245,236,0) 0%, #FAF5EC 8%, #FAF5EC 17%,
      #FAF4EB 19.4%, #F7EFE3 21.8%, #F1E4D4 24.2%, #ECDBC9 25.4%,
      #E6D0BE 26.6%, #DEC3B1 27.8%, #CEAEA3 29%, #BE9994 30.2%,
      #A88185 31.4%, #936B76 32.6%, #805C69 33.8%, #70525E 35%,
      #644B56 36.2%, #5F4751 37.4%, #5B4450 38.8%, #58434E 40.4%,
      #56424C 42.4%, #55414B 46%, #55414B 100%);
  background-blend-mode:multiply,multiply,normal;
}
@supports (background:linear-gradient(180deg in oklch,#000,#fff)){
  body.home .dusk{
    background:
      radial-gradient(circle,rgba(60,38,12,0.05) 0.5px,transparent 1.1px) 0 0/5px 5px,
      radial-gradient(circle,rgba(40,25,10,0.03) 0.5px,transparent 1px) 1.5px 1px/3px 3px,
      linear-gradient(180deg in oklch,
        rgba(250,245,236,0) 0%, #FAF5EC 8%, #FAF5EC 17%,
        #FAF4EB 19.4%, #F7EFE3 21.8%, #F1E4D4 24.2%, #ECDBC9 25.4%,
        #E6D0BE 26.6%, #DEC3B1 27.8%, #CEAEA3 29%, #BE9994 30.2%,
        #A88185 31.4%, #936B76 32.6%, #805C69 33.8%, #70525E 35%,
        #644B56 36.2%, #5F4751 37.4%, #5B4450 38.8%, #58434E 40.4%,
        #56424C 42.4%, #55414B 46%, #55414B 100%);
    background-blend-mode:multiply,multiply,normal;
  }
}

/* =====================================================================
   THE EDITOR'S NOTE — a visible purpose: the paper's sign-off.
   Eyebrow (why it exists) · the note · a signed close under the gold star.
   ===================================================================== */
.manifesto .note-star{color:var(--gold);font-style:normal;margin-right:2px;}
/* the taller label block (eyebrow · title · why-line) top-aligns the row;
   the № and rule are nudged back level with the title line */
.manifesto .sec-index{align-items:flex-start;}
.manifesto .sec-index .num{margin-top:1.55em;}
.manifesto .sec-index .rule{margin-top:22px;}
.manifesto .sec-index .lab .note-why{
  display:block;margin-top:10px;
  font-family:var(--ff-body);font-size:clamp(1rem,1.4vw,1.12rem);
  font-style:italic;font-variation-settings:normal;font-weight:400;
  letter-spacing:0;line-height:1.5;text-transform:none;
  color:rgba(216,207,213,0.82);max-width:46ch;
}
.manifesto .note-sig{
  grid-column:1/-1;
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  margin-top:clamp(18px,3.5vh,38px);
  padding-top:clamp(16px,2.5vh,24px);
  border-top:1px solid rgba(244,238,241,0.14);
}
.manifesto .sig-star{color:var(--gold);font-size:0.95rem;flex:none;}
.manifesto .sig-name{
  font-family:var(--ff-display);font-style:italic;
  font-variation-settings:var(--fx-i);
  font-size:clamp(1.5rem,2.4vw,1.9rem);letter-spacing:-0.01em;
  color:#F4EEF1;
}
.manifesto .sig-role{
  font-size:0.62rem;letter-spacing:0.16em;text-transform:uppercase;
  color:rgba(216,207,213,0.7);
}