/* Laura Benavente: portfolio homepage
   Dark editorial system per revised CLAUDE.md. Copy and type families locked.
   Near-black is the default ground; paper is the single light punctuation moment. */

@font-face{font-family:'Libertinus Serif';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/libertinus-serif-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Libertinus Serif';font-weight:400;font-style:italic;font-display:swap;src:url(fonts/libertinus-serif-latin-400-italic.woff2) format('woff2')}
@font-face{font-family:'Roboto';font-weight:300;font-style:normal;font-display:swap;src:url(fonts/roboto-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:'Roboto';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/roboto-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Roboto';font-weight:500;font-style:normal;font-display:swap;src:url(fonts/roboto-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Roboto';font-weight:700;font-style:normal;font-display:swap;src:url(fonts/roboto-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Roboto Mono';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/roboto-mono-latin-400-normal.woff2) format('woff2')}

:root{
  --dark:#0E0E11; --dark-2:#17171B;
  --paper:#F6F4EF;
  --ink:#FFFFFF; --ink-2:#C9C9CE; --mid:#8C8C93;
  --line:rgba(255,255,255,.14); --line-2:rgba(255,255,255,.07);
  --blue:#1F4396; --blue-l:#7FA3E8; --rust:#B23A20; --rust-l:#E0714F;
  --img:#17171B;
  --serif:'Libertinus Serif',Georgia,serif; --sans:'Roboto',Arial,sans-serif; --mono:'Roboto Mono',ui-monospace,monospace;
  --m:40px; --maxw:1400px;
}
@media(max-width:479px){:root{--m:24px}}
[id]{scroll-margin-top:92px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--dark);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.5;mix-blend-mode:screen;
  background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.045) 0,rgba(255,255,255,.045) .5px,transparent .6px);background-size:3px 3px}
.w{max-width:var(--maxw);margin:0 auto;padding:0 var(--m)}
a{color:inherit}
::selection{background:var(--blue-l);color:var(--dark)}

.skip-link{position:absolute;left:var(--m);top:-60px;z-index:200;background:var(--ink);color:var(--dark);
  padding:10px 18px;font-family:var(--mono);font-size:11px;letter-spacing:1px;text-decoration:none;transition:top .2s}
.skip-link:focus{top:12px}

/* nav: fixed corner menu, opens/closes as a native disclosure (no JS required).
   Transparent and difference-blended, so it reads white over the dark page and
   dark over the paper closing section without any scroll listener. */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;
  mix-blend-mode:difference;color:#fff}
.nav-bar{max-width:var(--maxw);margin:0 auto;padding:20px var(--m);display:flex;justify-content:space-between;
  align-items:flex-start;gap:20px;cursor:pointer;list-style:none}
.nav-bar::-webkit-details-marker{display:none}
.nav-bar::marker{content:''}
.nav-logo{font-family:var(--sans);font-weight:700;font-size:11px;line-height:1;letter-spacing:.03em;
  text-transform:uppercase;text-decoration:none;color:#fff}
.nav-toggle{font-family:var(--sans);font-weight:700;font-size:11px;line-height:1;letter-spacing:.03em;
  text-transform:uppercase;color:#fff}
.nav-toggle .lbl-close{display:none}
.nav-d[open] .nav-toggle .lbl-open{display:none}
.nav-d[open] .nav-toggle .lbl-close{display:inline}

/* Kept rendered while closed: a display:none panel has no painted start frame,
   so the masked reveal would be skipped entirely on open. */
.nav-panel{display:block;max-width:var(--maxw);margin:0 auto;padding:0 var(--m);
  overflow:hidden;max-height:0;visibility:hidden;
  transition:max-height .55s cubic-bezier(.16,1,.3,1),visibility 0s linear .55s}
.nav-d[open] .nav-panel{max-height:70vh;visibility:visible;
  transition:max-height .55s cubic-bezier(.16,1,.3,1),visibility 0s}
.nav-links,.nav-foot{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  align-items:flex-end;text-align:right;gap:14px}
.nav-links{padding-top:12px;gap:12px}
/* secondary links run as a row: nine stacked items collided with the hero headline */
.nav-foot{flex-direction:row;justify-content:flex-end;flex-wrap:wrap;padding-top:20px;gap:16px}
.nav-links a,.nav-foot a{display:block;position:relative;overflow:hidden;
  font-family:var(--sans);font-weight:700;line-height:1;letter-spacing:.03em;
  text-transform:uppercase;text-decoration:none;color:#fff}
.nav-links a{font-size:11px}
.nav-foot a{font-size:11px;opacity:.55}
.nav-links a:hover,.nav-foot a:hover{opacity:.6}
.nav-foot a:hover{opacity:1}
/* enlarges the tap area into the gap without breaking the one-line mask */
.nav-links a::after,.nav-foot a::after{content:'';position:absolute;left:0;right:0;top:-7px;bottom:-7px}
/* the reveal itself: each label starts pushed below its own mask */
.nav-links a span,.nav-foot a span{display:block;transform:translateY(110%);
  transition:transform .6s cubic-bezier(.16,1,.3,1)}
.nav-d[open] .nav-links a span,.nav-d[open] .nav-foot a span{transform:translateY(0)}
.nav-links li:nth-child(1) a span{transition-delay:.05s}
.nav-links li:nth-child(2) a span{transition-delay:.11s}
.nav-links li:nth-child(3) a span{transition-delay:.17s}
.nav-links li:nth-child(4) a span{transition-delay:.23s}
.nav-links li:nth-child(5) a span{transition-delay:.29s}
.nav-links li:nth-child(6) a span{transition-delay:.35s}
.nav-foot li:nth-child(1) a span{transition-delay:.41s}
.nav-foot li:nth-child(2) a span{transition-delay:.45s}
.nav-foot li:nth-child(3) a span{transition-delay:.49s}
.nav-d:not([open]) .nav-links a span,.nav-d:not([open]) .nav-foot a span{transition-delay:0s}
html:not(.js) .nav-panel{max-height:none;visibility:visible;overflow:visible}
html:not(.js) .nav-links a span,html:not(.js) .nav-foot a span{transform:none}
@media(max-width:760px){
  .nav-links a,.nav-foot a{font-size:14px}
  .nav-links,.nav-foot{gap:22px}
  .nav-links a::after,.nav-foot a::after{top:-11px;bottom:-11px}
}

.btn{display:inline-block;background:var(--ink);color:var(--dark);border-radius:999px;padding:7px 18px;
  font-size:11.5px;font-weight:500;text-decoration:none;margin-top:10px;letter-spacing:.2px}
.btn:hover{opacity:.85}
.btn-l{background:var(--ink);color:var(--dark)}

/* hero: full viewport, headline only, pushed toward the display ceiling */
.hero{min-height:100svh;display:flex;align-items:center;padding:140px 0 120px;position:relative}
.hero .w{width:100%}
.hero h1{text-align:left;font-family:var(--serif);font-weight:400;font-size:clamp(34px,6.2vw,92px);line-height:1.06;
  letter-spacing:-.018em;margin:0}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.hero h1 .ln i{display:block;font-style:normal;transform:translateY(104%);
  transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
html:not(.js) .hero h1 .ln i{transform:none}
.hero.lit h1 .ln i{transform:none}
.hero.lit h1 .ln:nth-child(2) i{transition-delay:.09s}
.hero.lit h1 .ln:nth-child(3) i{transition-delay:.18s}
.cue{position:absolute;left:var(--m);bottom:36px;display:flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--mid);
  opacity:0;transition:opacity .8s ease .9s}
.hero.lit .cue{opacity:1}
.cue span{display:block;width:34px;height:1px;background:var(--mid);transform-origin:left;
  animation:cueline 2.4s cubic-bezier(.6,0,.3,1) infinite}
@keyframes cueline{0%{transform:scaleX(0)}45%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:0}}

/* section counter: quiet wayfinding, never louder than content */
.counter{position:fixed;right:var(--m);bottom:20px;z-index:90;font-family:var(--mono);
  font-size:10px;letter-spacing:1.2px;color:#FFFFFF;mix-blend-mode:difference;pointer-events:none}
@media(max-width:600px){.counter{display:none}}

/* second statement: its own screen, same register as the hero */
.second-sec{min-height:82svh;display:flex;align-items:center;padding:60px 0}
.second-sec .w{width:100%}
.second{text-align:left;font-family:var(--serif);font-weight:400;font-size:clamp(32px,5vw,72px);line-height:1.14;
  letter-spacing:-.012em;margin:0;max-width:20ch}

/* background row: rest scene, genuinely quiet */
.bg-row{display:grid;grid-template-columns:200px 1fr;gap:clamp(24px,4vw,64px);
  padding:0 0 clamp(80px,12vw,170px);max-width:900px}
.bg-row .lab{font-family:var(--mono);font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--mid)}
.bg-row h2{font-family:var(--sans);font-weight:500;font-size:12.5px;margin:0 0 6px;text-align:left;color:var(--ink)}
.bg-row p{font-size:12px;line-height:1.5;color:var(--mid);margin:0;max-width:46ch}
@media(max-width:760px){.bg-row{grid-template-columns:1fr;gap:10px}}

/* about: the thesis, given room */
.about{padding:clamp(70px,10vw,150px) 0 clamp(90px,13vw,180px)}
.about h2{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--mid);margin:0 0 clamp(40px,6vw,80px);text-align:left}
.about ul{list-style:none;margin:0;padding:0}
.about li{text-align:left;font-family:var(--serif);font-size:clamp(28px,4.2vw,62px);line-height:1.26;color:var(--ink)}

/* stories: dark on dark, separated by hairlines and scale */
.dark{background:var(--dark);color:var(--ink)}
.story{padding:clamp(80px,11vw,160px) 0 0;border-top:1px solid var(--line-2)}
.story h2{text-align:left;font-family:var(--serif);font-weight:400;font-size:clamp(44px,8.5vw,128px);line-height:.96;
  letter-spacing:-.022em;margin:0 0 26px}
.story .t{font-size:15px;font-weight:500;margin:0 0 8px}
.story .tags{font-family:var(--mono);font-size:11px;color:var(--blue-l);margin:0 0 10px;letter-spacing:.6px;text-transform:uppercase}
.story .d{font-size:13px;line-height:1.55;color:var(--ink-2);margin:0;max-width:52ch}
.story a.block{display:block;text-decoration:none;color:inherit}

.shots{display:grid;gap:clamp(16px,2.6vw,40px);margin-top:clamp(34px,5vw,64px)}
.shots.l1{grid-template-columns:1.85fr 1fr}
.shots.l2{grid-template-columns:1.85fr 1fr}
.shots.l3{grid-template-columns:1fr}
.shot{width:100%;position:relative;overflow:hidden}
.shot-fill{position:absolute;left:0;right:0;top:-6%;bottom:-6%;background:var(--dark-2);
  border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:clamp(30px,4.4vw,58px);letter-spacing:1px;color:var(--mid)}
html.js .shot-fill{transform:translateY(var(--py,0px))}
@media(max-width:760px){html.js .shot-fill{transform:none}}
/* filled slots: real image, no parallax bleed so nothing is cropped */
/* real screenshots keep their own proportion: forcing them into one ratio
   cropped a third off the tall ones. Full width, aligned left edge. */
.shot.has-img{aspect-ratio:auto}
.shot.has-img .shot-fill{position:static;border:0;background:transparent;transform:none}
.shot-fill img{display:block;width:100%;height:100%;object-fit:cover}
.shot.has-img .shot-fill img{height:auto;object-fit:fill}
/* enters small, grows to full size: scale lives on the image, so the
   parallax transform on .shot-fill stays free of a transition */
html.js .shot-fill img{transform:scale(.86);transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
html.js .shot.in .shot-fill img{transform:scale(1)}
.r-tall{aspect-ratio:5/6}
.r-port{aspect-ratio:3/4}
.r-wide{aspect-ratio:1600/593}
.r-sq{aspect-ratio:4/3}
.stack{display:grid;gap:clamp(16px,2.6vw,40px);grid-template-rows:1fr 1fr}
.shots.l3 .r-wide{max-width:100%}
@media(max-width:860px){.shots.l1,.shots.l2{grid-template-columns:1fr}.shots.l3 .r-wide{max-width:100%}}

/* lab: scoped to the section: .lab is also the "My background" label inside .bg-row */
section.lab{padding:clamp(90px,12vw,170px) 0 clamp(70px,10vw,140px);border-top:1px solid var(--line-2)}
section.lab h2{text-align:left;font-family:var(--serif);font-weight:400;font-size:clamp(44px,8.5vw,128px);line-height:.96;
  letter-spacing:-.022em;margin:0 0 18px}
/* the <br> sets the two lines; no ch cap, which was forcing a third */
.lab-link{display:inline-block;text-decoration:none;color:inherit}
.lab-handle{display:block;font-family:var(--mono);font-size:11px;letter-spacing:1.2px;color:var(--mid);
  transition:color var(--dur-ui,180ms) ease}
.lab-link:hover .lab-handle{color:var(--ink)}
.bg-row .lab{padding:0;border-top:0}
.lab-rail{display:flex;gap:clamp(16px,2.4vw,34px);overflow-x:auto;padding:0 var(--m) clamp(70px,10vw,140px);
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.lab-rail::-webkit-scrollbar{height:0}
.lab-rail .shot{flex:0 0 clamp(230px,26vw,360px);aspect-ratio:3/4;scroll-snap-align:start}

/* connect: the single light punctuation moment, inverted from the rest of the page */
.connect{background:var(--paper);color:var(--dark);padding:clamp(90px,13vw,180px) 0 clamp(110px,15vw,200px)}
.connect h2{text-align:left;font-family:var(--serif);font-weight:400;font-size:clamp(44px,8.5vw,128px);line-height:.96;
  letter-spacing:-.022em;margin:0 0 26px}
.connect .btn-l{background:var(--dark);color:#fff}
.connect :focus-visible{outline-color:var(--dark)}

.rv{opacity:0;transform:translateY(26px)}
html.js .rv{transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
html:not(.js) .rv{opacity:1;transform:none}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.08s}
.rv[data-d="2"]{transition-delay:.16s}
.rv[data-d="3"]{transition-delay:.24s}
.rv[data-d="4"]{transition-delay:.32s}
/* line reveal */
.ln{display:block;overflow:hidden}
.ln i{display:block;font-style:normal;transform:translateY(104%);
  transition:transform 1s cubic-bezier(.16,1,.3,1)}
html:not(.js) .ln i{transform:none}
.in > .ln i,.ln.in i{transform:none}
.about li .ln{padding-bottom:.08em;margin-bottom:-.08em}
.about li .ln i{transition-delay:calc(var(--i,0) * .085s)}
/* images grow in */
html.js .shot{clip-path:inset(0 0 100% 0);transition:clip-path 1.2s cubic-bezier(.16,1,.3,1)}
html.js .shot.in{clip-path:inset(0 0 0 0)}
html.js .shot[data-d="1"]{transition-delay:.12s}
html.js .shot[data-d="2"]{transition-delay:.22s}
:focus-visible{outline:2px solid #FFFFFF;outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1!important;transform:none!important}
  .ln i{transform:none!important}
  .shot{clip-path:none!important}
  .shot-fill img{transform:none!important}
  .nav-links a span,.nav-foot a span{transform:none!important;transition:none!important}
  .cue span{animation:none}
  .hero{min-height:auto;padding:170px 0 90px}
}