/* Leonardo Firenze / v1.1 — hero refinement, wider process cards, archives and abstract gradients. */
:root{
  --gutter:clamp(18px,4.25vw,96px);
  --lf11-card-bg:#202024;
  --lf11-archive-bg:color-mix(in srgb, var(--paper) 86%, var(--paper-2));
}
.shell{padding-inline:var(--gutter)}

/* Hero atmosphere: more abstract, less structured, pointer-reactive through CSS vars set in lf11.js */
.lf08-sticky{--mx:72%;--my:38%;--mx2:24%;--my2:70%}
.lf08-sticky::before{
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(230,34,61,.28), transparent 0 18%),
    radial-gradient(circle at var(--mx2) var(--my2), rgba(242,242,244,.10), transparent 0 16%),
    radial-gradient(circle at 82% 22%, rgba(126,129,140,.14), transparent 0 20%),
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 34%, rgba(255,255,255,.02) 100%);
  opacity:.96;
}
.lf07-grid{opacity:.08;mix-blend-mode:soft-light;filter:blur(.2px)}
.lf08-sticky .lf07-underlay{opacity:.88}
.lf08-sticky .lf07-ambient{opacity:.7;filter:blur(90px)}
.lf08-sticky .lf07-fluid{opacity:.97}
.lf08-sticky .lf07-glass-shine{
  opacity:.22;
  background:
    linear-gradient(105deg, color-mix(in srgb,var(--lf07-bg) 88%,transparent) 0%, transparent 28%, transparent 72%, color-mix(in srgb,var(--lf07-bg) 60%,transparent) 100%),
    radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.07), transparent 0 20%);
}
html[data-theme=light] .lf08-sticky::before{
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(230,34,61,.18), transparent 0 18%),
    radial-gradient(circle at var(--mx2) var(--my2), rgba(14,14,15,.05), transparent 0 16%),
    radial-gradient(circle at 82% 22%, rgba(126,129,140,.10), transparent 0 18%);
}

/* Bigger first two scenes, with more breathing room. */
.lf08-story .lf08-scene--hello{gap:clamp(64px,9svh,124px)}
.lf08-story .lf08-scene--hello .lf08-gigantic{
  font-size:clamp(190px,37vw,860px);
  line-height:.74;
  letter-spacing:.03em;
}
.lf08-story .lf08-scene--hello .lf08-overline{margin-top:0}
.lf08-story .lf08-scene--hello .lf08-hello-bottom{margin-top:0;gap:clamp(24px,3vw,62px)}

.lf08-story .lf08-scene--identity{gap:clamp(42px,6.5svh,98px)}
.lf08-story .lf08-identity-title{
  font-size:clamp(124px,16.5vw,356px);
  line-height:.9;
  letter-spacing:.024em;
}
.lf08-story .lf08-identity-title>span:first-child{margin-bottom:.08em}
.lf08-story .lf08-identity-title strong{display:block;margin-bottom:.02em}
.lf08-story .lf08-identity-title .lf08-identity-small{
  font:700 clamp(25px,2.8vw,50px)/1.2 'Mozilla Text',Arial,sans-serif!important;
  margin-top:clamp(34px,5.2vh,72px);
  letter-spacing:-.04em;
  text-transform:none;
}

/* Scene 3 widened and centered more elegantly. */
.lf09-profile-layout{width:min(100%,1740px);max-width:1740px;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(42px,6vw,132px);align-items:center;margin-inline:auto}
.lf09-profile-layout .lf08-photo{max-width:640px;justify-self:center}
.lf09-profile-layout .lf08-bio{max-width:860px}
.lf09-profile-layout .lf08-bio h2{
  font:600 clamp(66px,7.3vw,140px)/.92 var(--heading-now);
  letter-spacing:.02em;
  text-transform:none;
  margin:clamp(16px,2.5vw,30px) 0 clamp(26px,3vw,46px);
}
.lf09-profile-layout .lf08-bio h2 span{color:#E6223D}
.lf09-profile-layout .lf08-bio>p:not(.lf08-overline){font-size:clamp(17px,1.06vw,19px);line-height:1.58;color:var(--lf07-muted);text-transform:none}
.lf09-profile-layout .lf08-bio>p.lf08-bio-lead{font-size:clamp(22px,1.52vw,28px);line-height:1.45;color:var(--lf07-ink)}

/* More gradients through the site, always within the LF palette. */
.v02-work,.v11-archives,.v02-statement,.v02-method,.v02-experience,.v02-contact{position:relative;overflow:hidden}
.v02-work::before,.v11-archives::before,.v02-statement::before,.v02-experience::before{
  content:'';position:absolute;inset:auto auto -15% -8%;width:42vw;height:42vw;max-width:520px;max-height:520px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(230,34,61,.11), transparent 68%);
}
.v02-work::after,.v11-archives::after,.v02-statement::after,.v02-experience::after{
  content:'';position:absolute;inset:-10% -10% auto auto;width:38vw;height:38vw;max-width:460px;max-height:460px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(255,255,255,.10), transparent 66%);
  opacity:.7;
}

/* Selected work cards: slightly broader, faithful to Davide, no folder traces. */
.case-item{top:calc(var(--nav-h) + 10px + var(--card-offset,0px));margin-bottom:clamp(84px,11vh,130px)}
.case-card{background:var(--lf11-card-bg)!important;border-radius:clamp(30px,3.6vw,56px);min-height:clamp(650px,82svh,900px);padding:clamp(10px,.95vw,16px)}
.case-card__content,.case-item:nth-child(even) .case-card__content{grid-template-columns:minmax(0,4.8fr) minmax(0,7.2fr);gap:clamp(22px,2.6vw,44px);min-height:clamp(630px,79svh,868px)}
.case-item:nth-child(even) .case-card__content{grid-template-columns:minmax(0,7.2fr) minmax(0,4.8fr)}
.case-card__copy{padding:clamp(28px,2.3vw,46px) clamp(24px,2.5vw,50px) clamp(78px,4.4vw,102px)}
.case-card__copy h3{font-size:clamp(64px,6.5vw,122px)!important;line-height:.98;max-width:720px}
.case-card__copy>p,.case-card__body>p{max-width:580px}
.case-card__media{border-radius:clamp(26px,3.2vw,48px);min-height:clamp(630px,79svh,868px)}
.case-card__view{width:86px;height:86px}
.work-tail{margin-top:clamp(58px,7vw,118px)}

/* Archives section */
.v11-archives{padding-block:clamp(84px,8.5vw,150px) clamp(110px,10vw,170px);background:linear-gradient(180deg,color-mix(in srgb,var(--paper) 94%,transparent),color-mix(in srgb,var(--paper-2) 92%,transparent))}
.v11-archives-head{margin-bottom:clamp(48px,5vw,88px)}
.v11-archives-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,1.6vw,24px)}
.v11-archive-card{
  min-height:260px;border-radius:30px;padding:24px 22px 22px;
  background:linear-gradient(180deg,var(--white),var(--paper-2));border:1px solid var(--line);display:flex;flex-direction:column;gap:18px;
  box-shadow:0 10px 30px rgba(15,15,17,.04), 0 28px 90px rgba(15,15,17,.03);
}
html[data-theme=dark] .v11-archives{background:transparent}
html[data-theme=dark] .v11-archive-card{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));border-color:rgba(255,255,255,.1)}
.v11-archive-top{display:flex;justify-content:space-between;gap:8px;color:var(--muted)}
.v11-archive-top .mono{font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.v11-archive-card h3{font:700 clamp(28px,2.7vw,44px)/1.03 'Mozilla Text',Arial,sans-serif;letter-spacing:-.06em;margin:0}
.v11-archive-card p{margin:0;color:var(--muted);font:400 15px/1.55 'Mozilla Text',Arial,sans-serif}
.v11-archive-tags{display:flex;gap:9px;flex-wrap:wrap;margin-top:auto}
.v11-archive-tags span{padding:8px 12px;border-radius:999px;border:1px solid var(--line);font:500 11px/1 'Mozilla Text',Arial,sans-serif}
html[data-theme=dark] .v11-archive-tags span{border-color:rgba(255,255,255,.14)}

/* Better icon/text alignment in the approach cards. */
.value-cards{gap:clamp(18px,2vw,26px)}
.value-card{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr auto;align-items:start;padding:clamp(26px,2.4vw,36px)}
.value-number{grid-column:1;grid-row:1;align-self:start}
.value-glyph{grid-column:2;grid-row:1;position:static;align-self:start;justify-self:end;font-size:clamp(62px,5.5vw,94px);line-height:.8;margin-top:-4px;opacity:.88}
.value-card h3{grid-column:1 / -1;grid-row:2;margin:clamp(34px,4vw,56px) 0 20px;font-size:clamp(31px,3.3vw,56px);line-height:1.02}
.value-card p{grid-column:1 / -1;grid-row:3;max-width:360px;margin:0}

/* Process cards: larger and longer to encourage horizontal scrolling. */
.v02-method{height:280vh}
.method-pin>.shell{padding-top:clamp(34px,3.9vw,56px)}
.method-heading{margin-bottom:clamp(26px,3vw,40px)}
.method-track{gap:clamp(24px,2.4vw,30px)}
.method-card{flex:0 0 clamp(520px,43vw,760px);height:clamp(340px,42vh,430px);padding:clamp(30px,3vw,42px)}
.method-card h3{font-size:clamp(54px,4.3vw,80px);line-height:1.02}
.method-card p{max-width:390px;font-size:16px}
.method-hint{margin-top:10px}

/* v1.2 owns the process scroll choreography; keep its design dimensions here. */

@media(max-width:1280px){
  .v11-archives-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .method-card{flex-basis:clamp(460px,48vw,640px)}
}
@media(max-width:1100px){
  :root{--gutter:clamp(18px,4vw,76px)}
  .lf08-story .lf08-scene--hello .lf08-gigantic{font-size:clamp(150px,31vw,600px)}
  .lf08-story .lf08-identity-title{font-size:clamp(104px,14.8vw,240px)}
  .v11-archives-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:780px){
  :root{--gutter:clamp(18px,4.8vw,36px)}
  .lf08-story .lf08-scene--hello{gap:clamp(46px,6svh,72px)}
  .lf08-story .lf08-scene--hello .lf08-gigantic{font-size:clamp(126px,31vw,280px)}
  .lf08-story .lf08-identity-title{font-size:clamp(86px,16vw,144px);line-height:.92}
  .lf08-story .lf08-identity-title .lf08-identity-small{font-size:clamp(22px,4vw,32px)}
  .lf09-profile-layout{grid-template-columns:1fr;max-width:540px;gap:22px}
  .lf09-profile-layout .lf08-photo{max-width:100%}
  .lf09-profile-layout .lf08-bio h2{font-size:clamp(50px,10vw,82px)}
  .case-card{min-height:0}
  .case-card__content,.case-item:nth-child(even) .case-card__content{display:flex;flex-direction:column-reverse;min-height:0}
  .case-card__media{min-height:0;aspect-ratio:1.06}
  .case-card__copy{padding:24px 18px 52px}
  .case-card__copy h3{font-size:clamp(54px,9.5vw,82px)!important}
  .v11-archives{padding-block:72px 96px}
  .v11-archives-grid{grid-template-columns:1fr}
  .method-card{flex-basis:min(84vw,520px);height:350px}
}
@media(max-width:620px){
  .lf08-story .lf08-scene--hello .lf08-gigantic{font-size:clamp(96px,28vw,180px)}
  .lf08-story .lf08-identity-title{font-size:clamp(64px,16.2vw,100px);line-height:.94}
  .lf08-story .lf08-identity-title .lf08-identity-small{margin-top:18px;font-size:clamp(18px,5vw,27px)}
  .case-card__copy{padding:22px 12px 48px}
  .case-card__copy h3{font-size:clamp(46px,10.8vw,66px)!important}
  .value-card h3{font-size:clamp(36px,10.2vw,48px)}
  .v11-archive-card{min-height:0;padding:20px 18px;border-radius:24px}
  .method-card{flex-basis:82vw;height:332px;padding:26px}
}