/* LF / v09 — composition, spacing, folder case cards.
   This layer intentionally preserves LF08's pinned, reversible scroll choreography. */
:root {
  --gutter:clamp(28px, 6.25vw, 132px);
  --shell: 100%;
  --lf09-folder-bg:#222225;
  --lf09-folder-ink:#f3f3f3;
  --lf09-folder-muted:#a9a9ad;
  --lf09-serif:'Mozilla Text',Arial,sans-serif;
}
/* One fluid editorial grid.  The large gutters do not turn into a narrow boxed column. */
.shell{width:100%;max-width:none;margin-inline:auto;padding-inline:var(--gutter)}
.v02-header .header-flex{width:100%;max-width:none}
.v02-work .shell,.v02-statement .shell,.v02-experience .shell,.v02-contact .shell,.v02-method .shell{max-width:none}

/* Scene 1 and scene 2: true centered compositions with the same outer margins. */
.lf08-story .lf08-topline,.lf08-story .lf08-footerline{left:var(--gutter);right:var(--gutter)}
.lf08-story .lf08-scene--hello,
.lf08-story .lf08-scene--identity{
  justify-content:center;
  align-items:center;
  text-align:center;
  padding-inline:var(--gutter);
}
.lf08-story .lf08-scene--hello .lf08-overline,
.lf08-story .lf08-scene--identity .lf08-overline{justify-content:center;align-self:center}
.lf08-story .lf08-gigantic{
  align-self:center;
  margin:clamp(18px,3.1vw,60px) 0 clamp(22px,3.1vw,52px);
  text-align:center;
  font-size:clamp(130px,28vw,585px);
  letter-spacing:.026em;
  max-width:100%;
}
.lf08-story .lf08-hello-bottom,.lf08-story .lf08-identity-bottom{
  justify-content:center;
  text-align:center;
  align-self:center;
  gap:24px;
  width:auto;
  max-width:100%;
}
.lf08-story .lf08-identity-title{
  width:100%;
  max-width:100%!important;
  margin:clamp(26px,4vw,64px) auto clamp(34px,4.5vw,80px);
  font:700 clamp(72px,9.5vw,178px)/.97 var(--lf09-serif);
  letter-spacing:-.067em;
  text-align:center;
  text-transform:uppercase;
}
.lf08-story .lf08-identity-title>span,
.lf08-story .lf08-identity-title>strong{display:block;width:100%;font-weight:700;white-space:normal;max-width:none}
.lf08-story .lf08-identity-title .lf08-identity-small{
  margin-top:.3em;
  font:700 clamp(23px,3.5vw,69px)/1.1 var(--lf09-serif);
  letter-spacing:-.052em;
  max-width:100%;
}

/* Scene 3: one centered row, not two columns each independently pinned to viewport sides. */
.lf08-story .lf08-scene--profile{
  display:flex;
  align-items:center;
  justify-content:center;
  padding-inline:var(--gutter);
  padding-top:clamp(82px,9vh,140px);
  padding-bottom:clamp(84px,9vh,140px);
}
.lf09-profile-layout{
  width:min(100%,1330px);
  margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(0,.91fr) minmax(0,1.09fr);
  align-items:center;
  gap:clamp(40px,6vw,112px);
}
.lf09-profile-layout .lf08-photo{width:100%;align-self:center;max-width:500px;justify-self:center}
.lf09-profile-layout .lf08-photo-art{width:100%;max-height:min(56vh,620px)}
.lf09-profile-layout .lf08-bio{width:100%;max-width:650px;justify-self:center}
.lf09-profile-layout .lf08-bio h2{font:700 clamp(49px,5.0vw,92px)/1.04 var(--lf09-serif);letter-spacing:-.064em}

/* Wider outer margins + less boxing outside the actual selected-work archive. */
.v02-work{padding-block:clamp(120px,13vw,220px) clamp(126px,13vw,230px)}
.v02-section-head{margin-bottom:clamp(67px,7vw,125px);grid-template-columns:minmax(0,1fr) minmax(210px,310px);gap:clamp(30px,5vw,90px)}
.v02-section-head h2{font:700 clamp(58px,6.8vw,124px)/1.03 var(--lf09-serif);letter-spacing:-.065em}
.v02-section-head .section-deck{max-width:310px}
.v02-statement{padding-block:clamp(132px,14vw,230px)}
.v02-method .method-heading,.v02-experience .exp-heading{padding-block-start:clamp(15px,1.3vw,30px)}
.v02-experience{padding-block:clamp(130px,14vw,240px)}
.v02-contact{padding-top:clamp(135px,15vw,245px)}

/* The case-study cards borrow the scale/negative space of the reference,
   but folder notches are inspired by Leonardo's original portfolio artwork. */
.case-list{gap:clamp(66px,8vw,135px)}
.case-item{padding-top:22px}
.case-card{
  --lf09-folder-bg:#222225;
  display:block;
  position:relative;
  overflow:visible;
  background:var(--lf09-folder-bg)!important;
  color:var(--lf09-folder-ink)!important;
  border:1px solid rgba(255,255,255,.075)!important;
  border-radius:clamp(30px,3.3vw,52px);
  padding:clamp(22px,2.5vw,46px);
  min-height:clamp(630px,54vw,865px);
  box-shadow:0 20px 75px rgba(0,0,0,.10),0 8px 20px rgba(0,0,0,.05);
  transform:translateZ(0);
}
.case-card::before{content:none!important}
.case-card__folder-tab{
  position:absolute;top:-21px;left:0;
  width:clamp(206px,28vw,375px);height:33px;
  background:var(--lf09-folder-bg);
  clip-path:polygon(0 0,77% 0,91% 100%,100% 100%,0 100%);
  border-radius:16px 0 0 0;
  padding:7px 18px;
  display:flex;align-items:center;
  pointer-events:none;
}
.case-card__folder-tab span{font:600 9px/1.2 var(--lf09-serif);letter-spacing:.12em;color:var(--lf09-folder-muted)}
.case-card__meta{color:var(--lf09-folder-muted);padding:10px 4px clamp(21px,2.6vw,40px)}
.case-card__content,.case-item:nth-child(even) .case-card__content{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(20px,2.6vw,50px);
  min-height:clamp(530px,46vw,750px);
}
.case-item:nth-child(even) .case-card__content{grid-template-columns:minmax(0,1.10fr) minmax(0,.90fr)}
.case-card__copy{
  padding:clamp(22px,3vw,57px) clamp(8px,1.4vw,25px) clamp(20px,3vw,56px);
  min-height:clamp(500px,44vw,720px);
  display:flex;flex-direction:column;align-items:flex-start;
}
.case-card__eyebrow{color:#cacacd;margin-bottom:auto;font-size:12px;letter-spacing:.09em}
.case-card__copy h3{
  font:700 clamp(64px,6.0vw,114px)/.99 var(--lf09-serif)!important;
  letter-spacing:-.068em!important;
  text-wrap:balance;
  max-width:590px;
  margin-bottom:clamp(24px,2.3vw,44px);
}
.case-card__copy>p{
  margin-top:0;
  font:400 clamp(17px,1.22vw,22px)/1.55 var(--lf09-serif);
  letter-spacing:-.025em;
  max-width:430px;
  color:#c0c0c4;
}
.case-card__tags{margin-top:clamp(23px,2.6vw,44px);gap:9px}
.case-card__tags span{color:#dbdbdf;border:1px solid rgba(255,255,255,.20);padding:9px 15px;font-size:11px}
.case-card__view{margin-top:clamp(32px,4.2vw,78px);color:#f7f7f7;font-size:12px;letter-spacing:.07em;gap:18px}
.case-card__view b{background:#f4f4f4;color:#0e0e0f;height:50px;width:50px}
.case-card__media{
  position:relative;
  height:auto;
  min-height:clamp(530px,46vw,750px);
  overflow:hidden;
  border-radius:clamp(20px,2.5vw,38px);
  background:#111;
  isolation:isolate;
}
.case-card__media::before{
  content:"";position:absolute;z-index:20;top:0;right:0;
  width:60%;height:clamp(34px,4.4vw,68px);
  background:var(--lf09-folder-bg);
  clip-path:polygon(0 0,100% 0,100% 100%,11% 100%);
  pointer-events:none;
}
.case-card__media::after{
  content:"";position:absolute;z-index:18;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.03),transparent 44%,rgba(0,0,0,.16));
  pointer-events:none;
}
.case-card__media .scene{inset:0;transform:translateZ(0);transition:transform 600ms cubic-bezier(.22,1,.36,1)}
.case-card__media--real .scene{display:none!important}
.case-project-image{display:block;width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:center;filter:saturate(1.02)}
.media-corner{z-index:23;background:rgba(14,14,15,.52);backdrop-filter:blur(10px);border-color:rgba(255,255,255,.25);color:#fff}
.case-card__copy,.case-card__meta{position:relative;z-index:2}
.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}
.work-tail{margin-top:clamp(78px,10vw,140px);padding-top:25px}
@media(hover:hover) and (pointer:fine){
 .case-card:hover{transform:translateY(-5px);box-shadow:0 35px 90px rgba(0,0,0,.19)}
 .case-card:hover .case-card__scene{transform:scale(1.025)}
 .case-card:hover .case-card__view b{transform:rotate(45deg)}
}

/* Match the familiar directory/pill motif without boxing whole sections. */
.value-cards{gap:clamp(18px,2.2vw,34px)}
.value-card{border-radius:clamp(24px,2.6vw,40px)}
.cv-panel{border-radius:clamp(24px,2.6vw,40px)}

@media(max-width:1100px){
 :root{--gutter:clamp(28px,5.6vw,74px)}
 .lf08-story .lf08-gigantic{font-size:clamp(128px,30vw,350px)}
 .lf08-story .lf08-identity-title{font-size:clamp(70px,10.3vw,120px)}
 .lf09-profile-layout{gap:clamp(26px,3.5vw,52px)}
 .lf09-profile-layout .lf08-bio h2{font-size:clamp(39px,5vw,62px)}
 .case-card__content,.case-item:nth-child(even) .case-card__content{gap:22px;min-height:550px}
 .case-card__copy{min-height:500px}
 .case-card__copy h3{font-size:clamp(54px,6vw,80px)!important}
 .case-card__media{min-height:520px}
}
@media(max-width:780px){
 :root{--gutter:clamp(24px,5vw,40px)}
 .lf08-story .lf08-gigantic{font-size:clamp(110px,29vw,260px)}
 .lf08-story .lf08-identity-title{font-size:clamp(62px,11vw,97px)}
 .lf08-story .lf08-identity-title .lf08-identity-small{font-size:clamp(23px,4.6vw,39px)}
 .lf08-story .lf08-scene--profile{padding-inline:var(--gutter)}
 .lf09-profile-layout{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:24px}
 .lf09-profile-layout .lf08-photo-art{max-height:47svh}
 .lf09-profile-layout .lf08-bio h2{font-size:clamp(34px,5.4vw,47px)}
 .v02-section-head{display:block}
 .v02-section-head .section-deck{max-width:570px;margin-top:30px}
 .case-card{padding:16px;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-row:auto;grid-column:auto}
 .case-card__meta{padding:12px 12px 21px}
 .case-card__media{min-height:0;aspect-ratio:1.12;max-height:550px}
 .case-card__copy{min-height:0;padding:30px 22px 26px}
 .case-card__eyebrow{margin-bottom:27px}
 .case-card__copy h3{font-size:clamp(54px,8.4vw,78px)!important;margin-bottom:24px}
 .case-card__view{margin-top:30px}
}
@media(max-width:620px){
 .lf08-story .lf08-scene--hello,.lf08-story .lf08-scene--identity{padding:80px var(--gutter) 90px}
 .lf08-story .lf08-gigantic{font-size:clamp(88px,28vw,178px);line-height:.79;margin:25px 0 40px}
 .lf08-story .lf08-identity-title{font-size:clamp(47px,12vw,82px);line-height:1.03;letter-spacing:-.064em}
 .lf08-story .lf08-identity-title .lf08-identity-small{font-size:clamp(22px,5.6vw,36px);line-height:1.10;letter-spacing:-.06em;margin-top:.42em}
 .lf08-story .lf08-hello-bottom,.lf08-story .lf08-identity-bottom{gap:13px;font-size:9px;flex-wrap:wrap}
 .lf08-story .lf08-scene--profile{padding:72px var(--gutter) 68px;display:flex;align-items:center}
 .lf09-profile-layout{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto;gap:clamp(15px,2.5vh,24px);align-content:center;justify-items:center;max-width:430px}
 .lf09-profile-layout .lf08-photo{max-width:100%}
 .lf09-profile-layout .lf08-photo-art{width:100%;height:min(22svh,180px);aspect-ratio:auto;min-height:100px;max-height:180px}
 .lf09-profile-layout .lf08-photo figcaption{display:none}
 .lf09-profile-layout .lf08-bio{width:100%;max-width:100%;text-align:left}
 .lf09-profile-layout .lf08-bio h2{font-size:clamp(34px,8.5vw,46px);margin:9px 0 14px;line-height:1.02}
 .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;line-height:1.38}
 .lf09-profile-layout .lf08-bio-links{margin-top:15px}
 .lf09-profile-layout .lf07-button{font-size:11px;min-height:38px;padding:8px 13px}
 .lf08-story .lf08-topline,.lf08-story .lf08-footerline{left:var(--gutter);right:var(--gutter)}
 .case-list{gap:clamp(50px,12vw,90px)}
 .case-card__folder-tab{height:28px;top:-18px;width:230px}
 .case-card__copy{padding:27px 14px 25px}
 .case-card__copy h3{font-size:clamp(49px,11vw,68px)!important}
 .case-card__media{aspect-ratio:1.05}
 .case-card__meta{font-size:9px;padding:11px 9px 16px}
 .v02-section-head h2{font-size:clamp(47px,9.4vw,65px)}
 .v02-work{padding-block:100px 120px}
}
@media (prefers-reduced-motion:reduce){
 .case-card,.case-card__media .scene,.case-card__view b{transform:none!important;transition:none!important}
}

/* Clip accidental horizontal bleed from soft glows and scroll animations without creating a scroll container. */
body.v02-page{overflow-x:clip}
@media(max-width:620px){
  .v02-logo img{height:25px;max-width:180px}
  .v02-header .header-flex{gap:8px}
  .header-controls{gap:7px}
  .theme-toggle{padding:7px 9px}
  .v02-menu-toggle{padding:9px 12px}
}