/* HAUT · The Founders: two signatures.
   Each founder is a full-length photograph, modest in size, with her name set beside it in Cormorant light.
   Rest on a photograph, or on the arrow at her side, and the other founder recedes, leaving her place to the story. */
.founders{position:relative;padding:clamp(100px,13vw,190px) var(--gutter) clamp(28px,3.2vw,44px);border-top:1px solid var(--line);overflow:clip;
  --stamp:clamp(168px,15vw,224px)}
.founders-in{max-width:1440px;margin:0 auto}

/* head: the title to the left; to the right the intro, and beneath it the way in */
.fd-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,5vw,90px);align-items:end;
  padding-bottom:clamp(26px,3vw,40px);border-bottom:1px solid var(--line)}
.fd-head .label{grid-column:1/-1}
.fd-head h2{margin:0;font:300 clamp(40px,6vw,96px)/1 var(--serif);letter-spacing:-.02em;text-wrap:balance;max-width:14ch}
.fd-head h2 em{font-style:italic;color:var(--champagne)}
.fd-lead{display:grid;gap:clamp(22px,2.6vw,34px);justify-items:end;text-align:right;justify-self:end}
.fd-lead p{margin:0;font:400 clamp(19px,1.7vw,25px)/1.35 var(--serif);letter-spacing:.005em;color:var(--champagne);text-wrap:balance}
.fd-lead .nw{white-space:nowrap}

/* the big arrow, with its word: the founders are folded beneath until it is pressed */
.fd-open{display:inline-flex;align-items:center;gap:clamp(14px,1.4vw,20px);margin:0 clamp(40px,7vw,130px) 0 0;padding:0;   /* pulled in from the right edge, toward the title */color:var(--ink-2);cursor:pointer;outline:none;transition:color .6s var(--ease)}
.fd-open-t{font:500 10.5px var(--sans);letter-spacing:.26em;text-transform:uppercase;transition:color .6s var(--ease)}
.t-close{display:none}
.founders.open .t-open{display:none}.founders.open .t-close{display:inline}
.fd-open-ring{display:grid;place-items:center;width:clamp(56px,5vw,72px);aspect-ratio:1;border-radius:50%;border:1px solid rgba(236,232,225,.22);
  transition:border-color .6s var(--ease),background .6s var(--ease),transform .9s var(--ease)}
.fd-open-ring svg{width:46%;height:46%;overflow:visible}
.fd-open path{transform-box:fill-box;transform-origin:center;animation:fd-breathe-d 3.2s cubic-bezier(.45,0,.2,1) infinite}
@keyframes fd-breathe-d{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
.fd-open:hover,.fd-open:focus-visible{color:var(--champagne)}
.fd-open:hover .fd-open-ring,.fd-open:focus-visible .fd-open-ring{border-color:var(--champagne)}
.founders.open .fd-open{color:var(--champagne)}
.founders.open .fd-open-ring{transform:rotate(180deg);border-color:var(--champagne);background:rgba(201,184,148,.08)}
.founders.open .fd-open path{animation:none}
.fd-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows 1.1s var(--ease)}
.fd-body-in{min-height:0;overflow:hidden;visibility:hidden;transition:visibility 0s 1.1s}
.fd-body-in > .fd-stage{margin-top:clamp(18px,2.2vw,30px)}
.founders.open .fd-body{grid-template-rows:1fr}
.founders.open .fd-body-in{visibility:visible;transition:visibility 0s}

/* the stage: an arrow at each edge, then Ariana's place and Margarita's place; each story overlays the other's place */
.fd-stage{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr) auto;grid-template-areas:"A L R B";
  column-gap:clamp(24px,4vw,64px);row-gap:clamp(36px,4vw,56px);align-items:start;align-content:start;transition:min-height .7s var(--ease)}
.ar-ae{grid-area:A}.ar-ms{grid-area:B}
.s-ae,.i-ms{grid-area:L}
.s-ms,.i-ae{grid-area:R}
.fd-space{height:0}

/* the arrows: always present, so the reader can pass from one founder to the other without leaving.
   Each chevron breathes gently in the direction it points; on hover it leans further and the ring warms. */
.fd-arrow{align-self:center;display:grid;place-items:center;color:var(--ink-3);cursor:pointer;padding:6px;transition:color .5s var(--ease)}
.fd-arrow svg{width:46px;height:46px;padding:12px;border-radius:50%;border:1px solid rgba(236,232,225,.2);overflow:visible;transition:border-color .5s var(--ease),background .5s var(--ease)}
.fd-arrow path{transform-box:fill-box;transform-origin:center;animation:fd-breathe-r 3.2s cubic-bezier(.45,0,.2,1) infinite}
.ar-ae path{animation-name:fd-breathe-l}
.ar-ms path{animation-delay:1.6s}
@keyframes fd-breathe-l{0%,100%{transform:translateX(0)}50%{transform:translateX(-3.5px)}}
@keyframes fd-breathe-r{0%,100%{transform:translateX(0)}50%{transform:translateX(3.5px)}}
.fd-arrow:hover,.fd-arrow:focus-visible{color:var(--champagne);outline:none}
.fd-arrow:hover svg,.fd-arrow:focus-visible svg{border-color:var(--champagne)}
.fd-arrow:hover path{animation-duration:1.6s}
.fd-stage[data-show="ae"] .ar-ae,.fd-stage[data-show="ms"] .ar-ms{color:var(--champagne)}
.fd-stage[data-show="ae"] .ar-ae svg,.fd-stage[data-show="ms"] .ar-ms svg{border-color:var(--champagne);background:rgba(201,184,148,.1)}

/* the signature: the photograph and, beside it, the name over the role */
.fd-sig{margin:0;display:flex;flex-wrap:wrap;align-items:flex-end;gap:clamp(18px,2.2vw,32px);justify-self:start;max-width:100%;outline:none;cursor:default;
  transition:opacity .8s var(--ease),transform .9s var(--ease)}
.s-ms{justify-self:end;flex-direction:row-reverse;text-align:right}
.fd-sig figcaption{display:grid;gap:14px;min-width:0}
.fd-name{display:grid;gap:.06em;font:300 clamp(36px,4.2vw,64px)/.92 var(--serif);letter-spacing:-.03em}
.fd-name .first{display:block;transition:color .6s var(--ease)}
.fd-name .last{display:block;font-style:italic;color:var(--champagne);padding-bottom:.04em}
.fd-stamp{position:relative;flex:0 0 auto;width:var(--stamp);aspect-ratio:3/4;overflow:hidden;cursor:pointer;
  border:1px solid rgba(236,232,225,.18);background:rgba(236,232,225,.035);transition:border-color .6s var(--ease)}
.fd-stamp img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;filter:saturate(.84) contrast(1.03);transition:filter 1s var(--ease)}
.fd-stamp.soon{display:grid;place-content:center;gap:9px;text-align:center}
.fd-stamp.soon b{font:300 clamp(40px,3.6vw,54px)/1 var(--serif);font-style:italic;letter-spacing:-.03em;color:var(--champagne);transform:translateY(-.08em)}
.fd-stamp.soon small{font:500 8.5px var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3)}
.fd-role{padding-top:12px;border-top:1px solid var(--line);font:500 10.5px var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);transition:color .6s var(--ease)}
.fd-sig:focus-visible .fd-stamp{border-color:var(--champagne)}
@media (max-width:1000px){.fd-name{font-size:clamp(30px,3.7vw,48px)}.founders{--stamp:clamp(150px,13vw,190px)}}

/* the chosen signature warms and holds; the other recedes into the satin */
.fd-stage[data-show="ae"] .s-ae .fd-stamp,.fd-stage[data-show="ms"] .s-ms .fd-stamp{border-color:rgba(201,184,148,.6)}
.fd-stage[data-show="ae"] .s-ae .first,.fd-stage[data-show="ms"] .s-ms .first{color:var(--champagne)}
.fd-stage[data-show="ae"] .s-ae .fd-role,.fd-stage[data-show="ms"] .s-ms .fd-role{color:var(--ink-2)}
.fd-stage[data-show="ms"] .s-ms img{filter:saturate(1) contrast(1.03)}
.fd-stage[data-show="ae"] .s-ms,.fd-stage[data-show="ms"] .s-ae{opacity:0;transform:translateY(12px);pointer-events:none}

/* the story writes itself in the place the other leaves (absolute grid items keep their grid area; founders.js reserves the height) */
.fd-story{position:absolute;top:0;left:0;right:0;display:grid;gap:clamp(14px,1.6vw,20px);align-content:start;max-width:min(100%,56ch);
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s .45s}
.fd-stage[data-show="ae"] .i-ae,.fd-stage[data-show="ms"] .i-ms{opacity:1;visibility:visible;transition:opacity .6s var(--ease) .2s,visibility 0s}
.fd-story > *{--d:0s;opacity:0;transform:translateY(14px);transition:opacity .35s var(--ease),transform .4s var(--ease)}
.fd-story > :nth-child(1){--d:.25s}.fd-story > :nth-child(3){--d:.45s}.fd-story > :nth-child(4){--d:.58s}.fd-story > :nth-child(5){--d:.7s}
.fd-story .fd-rule{display:block;height:1px;background:var(--line);transform:scaleX(0);transform-origin:0 50%;opacity:1;transition:transform .5s var(--ease)}
:is(.fd-stage[data-show="ae"] .i-ae,.fd-stage[data-show="ms"] .i-ms) > *{opacity:1;transform:none;transition:opacity .8s var(--ease) var(--d),transform .9s var(--ease) var(--d)}
:is(.fd-stage[data-show="ae"] .i-ae,.fd-stage[data-show="ms"] .i-ms) > .fd-rule{transform:scaleX(1);transition:transform 1.1s var(--ease) .3s}
.fd-pull{margin:2px 0 0;font:300 clamp(22px,2vw,32px)/1.18 var(--serif);letter-spacing:-.01em;max-width:30ch;text-wrap:balance;position:relative;padding-left:1.1em;clip-path:inset(0 100% 0 0)}
:is(.fd-stage[data-show="ae"] .i-ae,.fd-stage[data-show="ms"] .i-ms) > .fd-pull{clip-path:inset(0 0 0 0);transition:opacity .8s var(--ease) var(--d),transform .9s var(--ease) var(--d),clip-path 1.2s var(--ease) var(--d)}
.fd-pull::before{content:"“";position:absolute;left:0;top:-.08em;font:300 1.6em/1 var(--serif);color:var(--champagne)}
.fd-pull em{font-style:italic;color:var(--champagne)}
.bio{max-width:56ch;display:grid;gap:.85em}
.bio p{margin:0;color:var(--ink-2);font-size:14.5px;line-height:1.7}
.bio.pending p{font:300 clamp(20px,1.8vw,26px)/1.3 var(--serif);font-style:italic;color:var(--ink-3)}
.bio.pending p::after{content:"";display:inline-block;width:2px;height:.9em;margin-left:.12em;vertical-align:-.1em;background:var(--champagne);animation:fdcaret 1.1s steps(1) infinite}
@keyframes fdcaret{50%{opacity:0}}
.facts{margin:2px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:0 28px;border-top:1px solid var(--line)}
.facts > div{display:grid;gap:5px;padding:12px 0;border-bottom:1px solid var(--line);align-content:start}
.facts dt{font:500 10px var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3)}
.facts dd{margin:0;font:400 15.5px/1.35 var(--serif);color:var(--ink)}

/* the names are written letter by letter each time the founders open, in the voice of the slogan */
.js-fd .fd-name .c{opacity:0;filter:blur(3px);transition:opacity .32s var(--ease),filter .32s var(--ease)}
.js-fd .fd-name .c.on{opacity:1;filter:blur(0)}
.fd-name .c{position:relative}
/* the caret hangs off the last written letter without taking room in the line, so nothing shifts while the name is written */
.fd-caret{position:absolute;left:calc(100% + .05em);bottom:.04em;width:2px;height:.82em;background:var(--champagne);animation:fd-caret 1s steps(1) infinite}
.fd-caret.out{animation:none;opacity:0;transition:opacity .45s var(--ease)}
@keyframes fd-caret{50%{opacity:0}}

/* arrival: both signatures rise together, the photographs reveal upward */
.js-fd .fd-stage:not(.in) .fd-sig{opacity:0;transform:translateY(28px)}
.js-fd .fd-stage:not(.in) .fd-stamp{clip-path:inset(100% 0 0 0)}
.js-fd .fd-stage.in .fd-stamp{clip-path:inset(0 0 0 0);transition:clip-path 1.4s cubic-bezier(.77,0,.18,1) .3s,border-color .6s var(--ease)}
.js-fd .fd-stage:not(.in) .fd-arrow{opacity:0}
.js-fd .fd-stage.in .fd-arrow{opacity:1;transition:opacity 1s var(--ease) 1.2s,color .5s var(--ease)}

/* small screens and touch: the same stage, adapted. The two photographs stay side by side with the arrows at
   their sides; a tap on a photograph opens her story beneath both, the other photograph steps back; the arrows pass
   from one founder to the other. */
@media (max-width:860px),(hover:none){
  .fd-head{grid-template-columns:1fr}.fd-lead{justify-self:start;justify-items:start;text-align:left}.fd-open{margin-right:0}
  .fd-stage{grid-template-columns:auto minmax(0,1fr) minmax(0,1fr) auto;grid-template-areas:"A L R B" "S S S S";column-gap:clamp(10px,2.6vw,20px);row-gap:clamp(18px,4vw,30px);align-items:start}
  .s-ae{grid-area:L}.s-ms{grid-area:R}
  .i-ae,.i-ms{grid-area:S;position:static;max-width:none}
  .fd-sig{flex-direction:column;align-items:flex-start;gap:12px;justify-self:stretch;flex-wrap:nowrap}
  .s-ms{flex-direction:column;align-items:flex-end;text-align:right}
  .fd-stamp{width:100%;max-width:220px;cursor:pointer}
  .fd-sig figcaption{gap:10px;width:100%}
  .fd-name{font-size:clamp(22px,6.2vw,34px)}
  .fd-role{padding-top:9px;font-size:9.5px}
  .fd-arrow{padding:0;align-self:start;margin-top:clamp(52px,16vw,90px)}
  .fd-arrow svg{width:34px;height:34px;padding:9px}
  .fd-stage[data-show="ae"] .s-ms,.fd-stage[data-show="ms"] .s-ae{opacity:.28;transform:none;pointer-events:auto}
}
@media (max-width:560px){.facts{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  .js-fd .fd-stage:not(.in) .fd-sig,.js-fd .fd-stage:not(.in) .fd-arrow{opacity:1;transform:none}
  .js-fd .fd-stage:not(.in) .fd-stamp{clip-path:none}
  .fd-sig,.fd-story,.fd-story > *,.fd-stamp,.fd-arrow,.fd-open,.fd-open-ring,.fd-body,.fd-body-in,.fd-stage{transition:none!important}
  .fd-arrow path,.fd-open path{animation:none}
  .js-fd .fd-name .c{opacity:1;filter:none;transition:none}
  .fd-caret{display:none}
  .bio.pending p::after{animation:none}
}