/* Leonardo Firenze / v1.0 — editorial spacing and cards. Overrides only v0.9. */
:root{
  --gutter:clamp(22px,5.45vw,112px);
  --lf10-card-bg:#222225;
  --lf10-foreground:#f3f3f3;
  --lf10-muted:#aeb0b5;
}
.shell{padding-inline:var(--gutter)}

/* Scene 1 — preserve HeadingNow and the scroll narrative; give secondary copy room. */
.lf08-story .lf08-scene--hello{
  gap:clamp(45px,7.2svh,92px);
  padding-inline:var(--gutter);
  justify-content:center;
  align-items:center;
  text-align:center;
}
.lf08-story .lf08-scene--hello .lf08-gigantic{
  margin:0;
  line-height:.81;
  text-align:center;
  flex-shrink:0;
}
.lf08-story .lf08-scene--hello .lf08-overline,
.lf08-story .lf08-scene--hello .lf08-hello-bottom{
  margin:0;
  align-self:center;
  justify-content:center;
  text-align:center;
}
.lf08-story .lf08-scene--hello .lf08-hello-bottom{gap:clamp(16px,2.4vw,44px)}
.lf08-story .lf08-scene--hello .lf08-hello-bottom span{color:#e6223d}

/* Scene 2 — the headline is unmistakably HeadingNow; Mozilla for secondary copy. */
.lf08-story .lf08-scene--identity{
  gap:clamp(30px,5.0svh,72px);
  justify-content:center;align-items:center;text-align:center;
  padding-inline:var(--gutter);
}
.lf08-story .lf08-scene--identity .lf08-overline,
.lf08-story .lf08-scene--identity .lf08-identity-bottom{
  margin:0;align-self:center;justify-content:center;text-align:center;
}
.lf08-story .lf08-identity-title{
  width:100%;max-width:none!important;margin:0 auto;
  font-family:var(--heading-now)!important;
  font-weight:600!important;
  font-size:clamp(104px,13.2vw,260px);
  line-height:.79;
  letter-spacing:.026em;
  text-transform:uppercase;
  text-align:center;
}
.lf08-story .lf08-identity-title>span:not(.lf08-identity-small),
.lf08-story .lf08-identity-title>strong{display:block;width:100%;max-width:none;font-weight:600;white-space:nowrap}
.lf08-story .lf08-identity-title .lf08-identity-small{
  font:700 clamp(25px,3.2vw,55px)/1.13 'Mozilla Text',Arial,sans-serif!important;
  letter-spacing:-.052em;
  text-transform:none;
  margin-top:clamp(32px,5.5vh,72px);
  color:var(--lf07-ink);
  white-space:normal;
  max-width:100%;
}

/* Scene 3 — the photo and biography read as one generous, centered composition. */
.lf08-story .lf08-scene--profile{padding-inline:var(--gutter)}
.lf09-profile-layout{width:min(100%,1610px);max-width:1610px;gap:clamp(38px,5.6vw,118px);grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr)}
.lf09-profile-layout .lf08-photo{max-width:590px}
.lf09-profile-layout .lf08-photo-art{max-height:min(61vh,700px)}
.lf09-profile-layout .lf08-bio{max-width:750px}
.lf09-profile-layout .lf08-bio h2{
  font:700 clamp(50px,5.25vw,98px)/1.06 'Mozilla Text',Arial,sans-serif;
  letter-spacing:-.062em;
  text-transform:none;
  margin:clamp(17px,2.4vw,34px) 0 clamp(24px,3vw,46px);
}
.lf08-story .lf08-overline{text-transform:none;letter-spacing:.06em}
.lf08-story .lf08-bio>p:not(.lf08-overline){max-width:700px}

/* A slightly wider layout than v0.9. Keep the large negative space inside sections. */
.v02-work{padding-block:clamp(115px,12vw,210px) clamp(120px,11vw,215px)}
.v02-section-head{margin-bottom:clamp(64px,7vw,122px)}
.case-list{display:block;padding:0;margin:0;list-style:none}
.case-item{
  position:sticky;
  top:calc(var(--nav-h) + 14px + var(--card-offset,0px));
  margin-bottom:clamp(90px,12vh,145px);
  padding:0;
  align-self:start;
}
.case-item:last-child{margin-bottom:0}
.case-card{
  position:relative;display:block;overflow:visible;
  background:var(--lf10-card-bg)!important;
  border:1px solid rgba(255,255,255,.075)!important;
  color:var(--lf10-foreground)!important;
  border-radius:clamp(28px,3.4vw,52px);
  padding:clamp(9px,.9vw,15px);
  min-height:clamp(620px,80svh,870px);
  box-shadow:0 14px 50px rgba(10,10,12,.12),0 32px 90px rgba(10,10,12,.08);
  transition:transform 250ms var(--ease-out),box-shadow 250ms ease;
}
.case-card::before,.case-card__folder-tab{display:none!important;content:none!important}
.case-card__content,
.case-item:nth-child(even) .case-card__content{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(18px,2.1vw,38px);
  min-height:clamp(600px,77svh,840px);
}
.case-item:nth-child(even) .case-card__content{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.case-card__copy{
  display:flex;flex-direction:column;align-items:stretch;
  min-width:0;min-height:0;
  justify-content:space-between;
  padding:clamp(26px,2.1vw,44px) clamp(22px,2.3vw,47px) clamp(72px,4.2vw,96px);
  position:relative;z-index:2;
}
.case-card__meta{
  display:flex;justify-content:space-between;gap:14px;
  padding:0;margin:0;
  color:var(--lf10-muted);
  font:650 clamp(10px,.79vw,12px)/1.3 'Mozilla Text',Arial,sans-serif;
  letter-spacing:.045em;
  text-transform:uppercase;
}
.case-card__meta span:last-child{white-space:nowrap}
.case-card__body{margin-top:auto}
.case-card__copy h3{
  font:700 clamp(58px,6vw,116px)/.98 'Mozilla Text',Arial,sans-serif!important;
  letter-spacing:-.065em!important;
  text-wrap:balance;
  margin:0 0 clamp(28px,3vw,58px);
  max-width:690px;
}
.case-card__caption{display:block;color:var(--lf10-foreground);letter-spacing:.11em;text-transform:uppercase;margin-bottom:8px;font-size:11px}
.case-card__copy>p,.case-card__body>p{
  color:#bcbcc2;
  font:400 clamp(16px,1.1vw,20px)/1.52 'Mozilla Text',Arial,sans-serif;
  letter-spacing:-.022em;
  margin:0;
  max-width:560px;
}
.case-card__tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(25px,2.8vw,48px)}
.case-card__tags span{padding:10px 15px;color:#dbdcde;border:1px solid rgba(255,255,255,.2);border-radius:100px;font:500 12px/1.2 'Mozilla Text',Arial,sans-serif}
.case-card__media{
  position:relative;min-height:clamp(600px,77svh,840px);height:auto;
  border-radius:clamp(24px,3.0vw,46px);
  overflow:hidden;background:#171719;
  isolation:isolate;
}
.case-card__media::before{display:none!important;content:none!important}
.case-card__media::after{background:linear-gradient(180deg,rgba(0,0,0,.02),transparent 62%,rgba(0,0,0,.07))}
.case-card__media .scene{position:absolute;inset:0;transition:transform 900ms var(--ease-out)}
.case-project-image{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.case-item:nth-child(even) .case-card__media{grid-column:1;grid-row:1}
.case-item:nth-child(even) .case-card__copy{grid-column:2;grid-row:1}
.case-card__view{
  position:absolute;bottom:-23px;left:-11px;
  width:83px;height:83px;padding:9px;
  background:var(--paper-2);border-radius:50%;
  display:grid;place-items:center;z-index:8;
  margin:0;
}
.case-card__view b{
  display:grid;place-items:center;
  width:100%;height:100%;border-radius:50%;
  background:#f1f2f4;color:#0e0e0f;
  font:400 29px/1 'Mozilla Text',Arial,sans-serif;
  border:1px solid rgba(14,14,15,.08);
  transition:transform 240ms var(--ease-out),background-color 240ms ease,color 240ms ease;
}
@media(hover:hover) and (pointer:fine){
 .case-card:hover{transform:translateY(-2px);box-shadow:0 24px 70px rgba(10,10,12,.15),0 42px 110px rgba(10,10,12,.08)}
 .case-card:hover .case-card__media .scene,.case-card:hover .case-project-image{transform:scale(1.025)}
 .case-card:hover .case-card__view b{background:#e6223d;color:#fff;transform:translate(2px,-2px)}
}
.work-tail{margin-top:clamp(66px,9vw,135px)}

@media(max-width:1100px){
  :root{--gutter:clamp(26px,5.2vw,80px)}
  .lf08-story .lf08-identity-title{font-size:clamp(90px,14.5vw,170px)}
  .lf09-profile-layout{gap:clamp(25px,3vw,44px)}
  .lf09-profile-layout .lf08-bio h2{font-size:clamp(42px,5.5vw,65px)}
  .case-card__copy{padding-inline:clamp(19px,2vw,36px)}
  .case-card__copy h3{font-size:clamp(52px,6.3vw,77px)!important}
}
@media(max-width:780px){
  :root{--gutter:clamp(21px,4.8vw,40px)}
  .lf08-story .lf08-scene--hello{gap:clamp(38px,6svh,65px)}
  .lf08-story .lf08-scene--identity{gap:clamp(25px,5svh,50px)}
  .lf08-story .lf08-identity-title{font-size:clamp(78px,15.3vw,125px);line-height:.82}
  .lf08-story .lf08-identity-title .lf08-identity-small{font-size:clamp(22px,3.8vw,34px);margin-top:clamp(24px,4vh,43px)}
  .lf09-profile-layout{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:clamp(22px,3vw,37px)}
  .lf09-profile-layout .lf08-photo-art{max-height:50svh}
  .lf09-profile-layout .lf08-bio h2{font-size:clamp(36px,5.5vw,49px)}
  .case-item{position:relative;top:auto;margin-bottom:clamp(34px,6vw,65px)}
  .case-card{padding:12px;min-height:0}
  .case-card__content,.case-item:nth-child(even) .case-card__content{
    display:flex;flex-direction:column-reverse;gap:0;min-height:0;
  }
  .case-item:nth-child(even) .case-card__copy,.case-item:nth-child(even) .case-card__media{grid-column:auto;grid-row:auto}
  .case-card__media{min-height:0;height:auto;aspect-ratio:1.12;max-height:580px;border-radius:22px}
  .case-card__copy{padding:27px 20px 55px;min-height:0}
  .case-card__meta{margin-bottom:clamp(36px,7vw,80px)}
  .case-card__copy h3{font-size:clamp(52px,9vw,82px)!important;margin-bottom:26px}
  .case-card__view{bottom:-13px;left:-8px;width:68px;height:68px;padding:7px}
  .case-card__view b{font-size:24px}
}
@media(max-width:620px){
  .lf08-story .lf08-scene--hello{gap:clamp(32px,5.2svh,52px);padding-top:76px;padding-bottom:70px}
  .lf08-story .lf08-scene--hello .lf08-gigantic{margin:0!important;line-height:.83}
  .lf08-story .lf08-scene--identity{gap:clamp(18px,3.8svh,35px);padding-top:72px;padding-bottom:70px}
  .lf08-story .lf08-identity-title{font-size:clamp(56px,17vw,94px);line-height:.83;letter-spacing:.012em}
  .lf08-story .lf08-identity-title .lf08-identity-small{font-size:clamp(20px,5vw,30px);letter-spacing:-.05em;margin-top:clamp(17px,3svh,27px)}
  .lf08-story .lf08-scene--profile{padding-inline:var(--gutter)}
  .lf09-profile-layout{grid-template-columns:1fr;grid-template-rows:auto auto;gap:clamp(13px,2vh,22px);max-width:440px}
  .lf09-profile-layout .lf08-photo{max-width:100%}
  .lf09-profile-layout .lf08-photo-art{height:min(23svh,190px);min-height:110px;aspect-ratio:auto;max-height:190px}
  .lf09-profile-layout .lf08-bio h2{font-size:clamp(33px,8.5vw,50px);margin:10px 0 14px}
  .lf09-profile-layout .lf08-bio>p:not(.lf08-overline){font-size:13px;line-height:1.4;margin-bottom:8px}
  .lf09-profile-layout .lf08-bio>p.lf08-bio-lead{font-size:15px}
  .lf09-profile-layout .lf08-bio-links{margin-top:13px}
  .case-card__copy{padding:22px 12px 50px}
  .case-card__meta{font-size:9px;letter-spacing:.03em;margin-bottom:40px}
  .case-card__media{aspect-ratio:1.06;border-radius:18px}
  .case-card__copy h3{font-size:clamp(45px,10.5vw,66px)!important}
  .case-card__body>p{font-size:15px}
  .case-card__tags{margin-top:25px}
  .case-card__tags span{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
 .case-item{position:relative;top:auto}
 .case-card,.case-card__media .scene,.case-card__view b{transition:none!important;transform:none!important}
}