/* ceriani.biz — The flame of dots, v1.1. One dark field; tokens from the defuego design system, bent for the screen. */
:root{
  --magenta:#D71A5C; --ink:#1C1C1C; --paper:#FFFFFF; --prugna:#72525D; --prugna-chiara:#B9A9B1;
  --grigio-scuro:#9E8F99; --filetto:#3A3337; --filetto-forte:#5A4F56; --rosa:#F2A3BF;
  --sans:"Acumin Pro","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --gutter:clamp(20px,5vw,72px);
  --ease:cubic-bezier(.7,0,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--ink)}
body.cfl{margin:0;background:var(--ink);color:var(--paper);font:400 16px/1.5 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p,figure,ul{margin:0}
ul{padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
svg{display:block}
:focus-visible{outline:2px solid var(--paper);outline-offset:4px}
.skip{position:absolute;top:-80px;left:16px;z-index:50;background:var(--magenta);color:var(--paper);padding:12px 18px;text-decoration:none}
.skip:focus{top:16px}
#field{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.top,main,.foot,.ticker{position:relative;z-index:1}
.wrap{padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px));max-width:1360px;margin:0 auto}

/* header */
.top{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:20px;padding:22px max(var(--gutter),env(safe-area-inset-right,0px)) 0 max(var(--gutter),env(safe-area-inset-left,0px))}
.brand{font-weight:700;font-size:15px;letter-spacing:-.01em;text-decoration:none}
.where{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--prugna-chiara);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.flame-btn{width:44px;height:44px;display:grid;place-items:center;margin-right:-10px;color:var(--magenta);transition:transform .5s var(--ease)}
.flame-btn svg{width:19px;height:26px;fill:currentColor}
.flame-btn:hover{transform:scale(1.15)}
.flame-btn[aria-pressed="true"]{transform:scale(1.3)}

/* hero */
.hero{position:relative;min-height:100svh;overflow:hidden}
.hero-grid{position:relative;min-height:100svh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:24px;padding:96px max(var(--gutter),env(safe-area-inset-right,0px)) 96px max(var(--gutter),env(safe-area-inset-left,0px));max-width:1360px;margin:0 auto}
.stage{order:2;aspect-ratio:512/468;width:100%;max-width:min(560px,46vw);justify-self:end;position:relative;pointer-events:none}
.stage-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;transition:opacity .6s}
.js .stage-img{opacity:0}
.hero-copy{order:1;max-width:620px;pointer-events:none;will-change:transform;position:relative}
.hero-copy::before{content:"";position:absolute;inset:-40px -60px;background:radial-gradient(ellipse at 40% 50%,rgba(28,28,28,.82) 0%,rgba(28,28,28,.55) 45%,rgba(28,28,28,0) 72%);z-index:-1;pointer-events:none}
.hero-copy>*{pointer-events:auto}
.hero h1{font-size:clamp(60px,8.6vw,148px);font-weight:700;letter-spacing:-.03em;line-height:.9;text-wrap:balance}
.hero h1 b{font-weight:700;color:var(--magenta)}
.tagline{margin-top:24px;font-size:clamp(18px,1.6vw,22px);font-weight:300;line-height:1.45;color:var(--prugna-chiara);max-width:34ch}
.lenses{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}
.lenses button{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--filetto);padding:14px 18px;min-height:44px;background:rgba(28,28,28,.6);transition:background .35s,border-color .35s}
.lenses button:hover{border-color:var(--paper)}
.lenses button[aria-pressed="true"]{background:var(--magenta);border-color:var(--magenta)}
.lens-copy{margin-top:16px;font-size:15px;color:var(--prugna-chiara);max-width:40ch;min-height:3em}
.note-it{margin-top:16px;padding:16px 18px;border-left:2.67px solid var(--magenta);background:rgba(28,28,28,.75);font-size:14px;line-height:1.5;color:var(--paper);max-width:46ch}
.note-it strong{font-weight:700}
.down{position:absolute;z-index:2;left:max(var(--gutter),env(safe-area-inset-left,0px));bottom:28px;display:inline-flex;align-items:center;gap:12px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--prugna-chiara)}
.down i{width:1px;height:28px;background:currentColor;position:relative;overflow:hidden}
.down i::after{content:"";position:absolute;left:0;top:-100%;width:100%;height:100%;background:var(--magenta);animation:drop 2.2s var(--ease) infinite}
@keyframes drop{to{top:100%}}
.down:hover{color:var(--paper)}
.hint{position:absolute;z-index:2;right:max(var(--gutter),env(safe-area-inset-right,0px));bottom:28px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--prugna-chiara)}

/* ticker */
.ticker{overflow:hidden;border-top:1px solid var(--filetto);border-bottom:1px solid var(--filetto);background:rgba(28,28,28,.5)}
.ticker-track{display:flex;width:max-content;animation:ticker 26s linear infinite}
.ticker span{padding:14px 0;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.ticker span::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--magenta);margin:0 32px;vertical-align:middle}
@keyframes ticker{to{transform:translateX(-50%)}}

/* sections */
section.person,section.flame,section.connect{padding-block:clamp(72px,10vw,140px)}
section.person,section.connect{border-bottom:1px solid var(--filetto)}
.eyebrow{position:relative;display:flex;justify-content:space-between;gap:16px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding-bottom:16px;margin-bottom:clamp(40px,6vw,72px);color:var(--prugna-chiara)}
.eyebrow::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--filetto-forte);transform-origin:left;transform:scaleX(1)}
.eyebrow span:first-child::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--magenta);margin-right:12px;vertical-align:1px}
h2{font-size:clamp(44px,6.4vw,110px);font-weight:700;letter-spacing:-.03em;line-height:.92;text-wrap:balance}
h2 b{font-weight:700;color:var(--magenta)}
.lead{font-size:clamp(20px,2vw,26px);font-weight:300;line-height:1.4;color:var(--paper)}
.bio p{max-width:56ch;color:var(--prugna-chiara)}
.bio p.lead{color:var(--paper)}
.bio p+p{margin-top:20px}
.person-grid,.flame-grid,.connect-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.values{margin-top:40px;border-top:1px solid var(--filetto)}
.values li{padding:16px 0;border-bottom:1px solid var(--filetto);display:flex;gap:16px;align-items:baseline;color:var(--prugna-chiara)}
.values li::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--magenta);transform:translateY(-1px);transition:transform .4s var(--ease)}
.values li:hover::before{transform:translateY(-1px) scale(1.6)}
.values b{color:var(--paper);font-weight:700}
.flame-grid .lead{margin-top:28px}
.flame-grid p{color:var(--prugna-chiara);max-width:50ch}
.flame-grid p+p{margin-top:20px}
.cta{display:inline-flex;align-items:center;gap:12px;margin-top:40px;padding:16px 22px;background:var(--magenta);color:var(--paper);text-decoration:none;font-weight:700;letter-spacing:-.01em;transition:transform .35s var(--ease)}
.cta i{font-style:normal;transition:transform .35s var(--ease)}
.cta:hover{transform:translateY(-2px)}.cta:hover i{transform:translate(3px,-3px)}
.big-flame{justify-self:center;width:min(100%,360px);aspect-ratio:19.2/25.8;color:var(--magenta);position:relative}
.big-flame svg{width:100%;height:100%;fill:currentColor;transition:opacity .8s}
.js .big-flame svg{opacity:0}
.social{border-top:1px solid var(--filetto)}
.social a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:22px 0;border-bottom:1px solid var(--filetto);text-decoration:none;font-size:clamp(20px,2.2vw,28px);font-weight:700;letter-spacing:-.01em;transition:padding-left .35s var(--ease),color .35s}
.social a span:last-child{font-size:14px;font-weight:400;color:var(--prugna-chiara);white-space:nowrap}
.social a:hover{padding-left:12px;color:var(--magenta)}

/* footer */
.foot{padding-block:40px}
.foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 24px;font-size:13.33px;color:var(--prugna-chiara)}
.credit{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--paper)}
.credit svg{width:14px;height:19px;fill:var(--magenta)}
.credit:hover{color:var(--magenta)}

/* reveal: text fades up with lag; headings wipe in; the eyebrow draws its own line */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
h2>span{display:block}
.js h2.reveal{opacity:1;transform:none;transition:none}
.js h2.reveal>span{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--ease)}
.js h2.reveal.in>span{clip-path:inset(0 0 0 0)}
.js .eyebrow.reveal{opacity:1;transform:none;transition:none}
.js .eyebrow.reveal::after{transform:scaleX(0);transition:transform 1.2s var(--ease)}
.js .eyebrow.reveal.in::after{transform:scaleX(1)}
.js .eyebrow.reveal span{opacity:0;transition:opacity .8s .3s}
.js .eyebrow.reveal.in span{opacity:1}
.js .reveal:nth-child(2){transition-delay:.08s}.js .reveal:nth-child(3){transition-delay:.16s}.js .reveal:nth-child(4){transition-delay:.24s}

/* phones: the opening fits one screen, the portrait sits behind the words; the flame opens section 02 */
@media (max-width:820px){
  .top{padding-top:18px}
  .where{display:none}
  .hero-grid{display:block;min-height:100svh;padding:0}
  .stage{position:absolute;left:50%;top:7svh;transform:translateX(-50%);width:min(92vw,calc(54svh * 512 / 468));max-width:none;aspect-ratio:512/468;margin:0}
  .hero-copy{position:absolute;left:max(var(--gutter),env(safe-area-inset-left,0px));right:max(var(--gutter),env(safe-area-inset-right,0px));bottom:64px;max-width:none}
  .hero-copy::before{inset:-48px -40px -24px}
  .hero h1{font-size:clamp(44px,13.5vw,76px)}
  .tagline{margin-top:14px;font-size:16px;max-width:30ch}
  .lenses{margin-top:20px;gap:6px;flex-wrap:nowrap}
  .lenses button{flex:1 1 0;padding:12px 4px;min-height:42px;font-size:11px;letter-spacing:.06em;text-align:center}
  .lens-copy{margin-top:12px;font-size:14px;min-height:0;max-width:none}
  .note-it{margin-top:12px;font-size:13px;max-height:36svh;overflow:auto}
  .down{bottom:20px;font-size:11px}
  .hint{display:none}
  section.person,section.flame,section.connect{padding-block:64px}
  .eyebrow{flex-direction:column;gap:6px;margin-bottom:36px}
  .person-grid,.flame-grid,.connect-grid{grid-template-columns:1fr;gap:28px}
  .flame-grid{grid-template-areas:"fig" "txt"}
  .flame-grid>div{grid-area:txt}
  .big-flame{grid-area:fig;width:min(62vw,260px);justify-self:center;margin-bottom:8px}
  .flame-grid .lead{margin-top:24px}
  .cta{margin-top:28px;width:100%;justify-content:space-between}
  .social a{padding:18px 0}
  .foot{padding-block:32px}
  .foot .wrap{flex-direction:column;align-items:flex-start;gap:14px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .down i::after,.ticker-track{animation:none}
  .js .reveal,.js h2.reveal,.js h2.reveal>span,.js .eyebrow.reveal span{opacity:1;transform:none;transition:none;clip-path:none}
  .js .eyebrow.reveal::after{transform:none;transition:none}
  .cta,.cta i,.social a,.flame-btn,.values li::before{transition:none}
}