/* l2.org v2 — "Refined" (2026-08-12)
   Blue and white from the logo; photos stay monochrome; blue owns the CTA.
   Inter only. Signature move: the skill wall that fills every line. */

@font-face{
  font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;
  src:url('assets/fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;
  src:url('assets/fonts/inter-latin-600-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;
  src:url('assets/fonts/inter-latin-800-normal.woff2') format('woff2');
}

:root{
  --blue:#1078C8;
  --blue-deep:#0A5A99;
  --pale:#E8F2FB;
  --ink:#12171D;
  --grey:#5B6672;
  --line:#DFE6EC;
  --white:#FFFFFF;

  --space-1:.5rem; --space-2:1rem; --space-3:1.5rem;
  --space-4:2rem;  --space-5:3rem; --space-6:4.5rem;
}

*{margin:0;padding:0;box-sizing:border-box}
img{max-width:100%;height:auto;display:block}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:'Inter',system-ui,sans-serif;
  font-size:1.0625rem;
  line-height:1.6;
  color:var(--ink);
  background:var(--white);
}

a{color:var(--blue)}
a:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

.wrap{max-width:72rem;margin-inline:auto;padding-inline:clamp(1rem,4vw,2rem)}

/* ---------- header ---------- */
.bar{
  display:flex;justify-content:space-between;align-items:center;gap:var(--space-2);
  padding:1.2rem clamp(1rem,4vw,3rem);
}
.wordmark{
  font-weight:800;color:var(--blue);text-decoration:none;
  font-size:1rem;letter-spacing:.16em;text-transform:uppercase;
}
.bar nav{display:flex;gap:clamp(.9rem,2.5vw,1.6rem);flex-wrap:wrap}
.bar nav a{
  color:var(--ink);text-decoration:none;
  font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  padding:.35rem 0;
}
.bar nav a:hover,.bar nav a[aria-current="page"]{color:var(--blue)}
@media(max-width:640px){
  .bar{flex-direction:column;gap:.4rem;padding:1rem .5rem .9rem}
  .bar nav{justify-content:center;gap:1rem;flex-wrap:nowrap}
  .bar nav a{font-size:.72rem;letter-spacing:.1em}
}

/* ---------- hero ---------- */
.hero{text-align:center;padding:0 1rem}
.hero video,.hero .heroposter{width:min(400px,68vw);height:auto;display:block;margin-inline:auto}
h1.visually-hidden,.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.byline{font-size:clamp(1.1rem,2.2vw,1.45rem);font-weight:600;margin-top:-.4rem}
.sub{color:var(--grey);max-width:36rem;margin:.7rem auto 0;font-size:1rem}
.cta{
  display:inline-block;margin-top:1.5rem;
  background:var(--blue);color:#fff;text-decoration:none;
  font-weight:600;font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;
  padding:1rem 2.1rem;border-radius:8px;
}
.cta:hover{background:var(--blue-deep)}

/* ---------- section scaffolding ---------- */
section{padding-top:clamp(2.5rem,7vh,4.5rem)}
.kicker{
  color:var(--blue);font-size:.78rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;text-align:center;display:block;
}
h2{
  font-weight:800;font-size:clamp(1.6rem,3.4vw,2.3rem);
  text-align:center;margin-top:.4rem;letter-spacing:-.01em;
}
.left h2,.left .kicker{text-align:left}

/* ---------- skill wall (signature) ---------- */
.wall{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem}
.wall span{
  flex:1 1 auto;text-align:center;
  border:2px solid var(--blue);color:var(--blue);
  font-weight:600;font-size:clamp(.9rem,1.6vw,1.05rem);
  padding:.85rem 1.3rem;border-radius:10px;
  white-space:nowrap;
  transition:background .12s,color .12s;
}
.wall span:hover{background:var(--blue);color:#fff}
.wall .wild{border-style:dashed;color:var(--grey);border-color:#9DB7CC;white-space:normal}
.wall .wild:hover{background:var(--pale);color:var(--blue);border-color:var(--blue)}
@media(max-width:480px){.wall span{white-space:normal}}

/* ---------- about ---------- */
.about-grid{
  display:grid;grid-template-columns:1fr;gap:var(--space-4);align-items:center;
  margin-top:var(--space-4);
}
@media(min-width:820px){.about-grid{grid-template-columns:1fr 1.3fr;gap:var(--space-5)}}
.about-grid img{border-radius:12px}
.about-copy p+p{margin-top:var(--space-2)}
.about-copy .quiet{color:var(--grey);font-size:.95rem}

/* ---------- photo band ---------- */
.band{position:relative;margin-top:clamp(2.5rem,7vh,4.5rem)}
.band img{
  width:100%;height:clamp(300px,48vh,460px);
  object-fit:cover;object-position:center 32%;
}
@media(max-width:600px){.band img{object-position:60% 30%}}
.band figcaption{
  position:absolute;left:clamp(1rem,4vw,3rem);bottom:1.3rem;right:1rem;
  color:#fff;font-size:1rem;max-width:30rem;
  text-shadow:0 1px 12px rgba(0,0,0,.55);
}
.band--research img{object-position:center 40%}
@media(max-width:600px){.band--research img{object-position:55% 40%}}

/* ---------- prose (research page) ---------- */
.prose{max-width:42rem;margin-inline:auto}
.prose p+p{margin-top:var(--space-2)}
.muted{color:var(--grey)}

/* ---------- papers list ---------- */
.papers{max-width:48rem;margin:var(--space-3) auto 0;border-top:2px solid var(--ink)}
.paper{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-2);
  padding:var(--space-2) .2rem;border-bottom:1px solid var(--line);
}
.paper .t{font-weight:600;font-size:1rem}
.paper .s{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);white-space:nowrap}
@media(max-width:560px){.paper{flex-direction:column;gap:.3rem}}

/* ---------- contact ---------- */
.contact{text-align:center;padding-bottom:clamp(2.5rem,7vh,4.5rem)}
.contact p{color:var(--grey)}
.contact .links{margin-top:var(--space-3);display:flex;justify-content:center;gap:1.6rem;flex-wrap:wrap}
.contact .links a{font-size:.9rem}

/* ---------- footer ---------- */
.site-foot{
  border-top:1px solid var(--line);
  padding:var(--space-4) 1rem;text-align:center;
  font-size:.78rem;color:var(--grey);
}
.site-foot a{color:inherit}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:no-preference){
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1}}
  .hero .byline{animation:rise .5s ease-out .2s backwards}
  .hero .sub{animation:rise .5s ease-out .35s backwards}
  .hero .cta{animation:rise .5s ease-out .5s backwards}
}