/* =========================================================
   Jorge Rodal — portfolio
   Consolidated stylesheet. One definition per selector.
   Order: tokens, base, layout blocks, motion, breakpoints.
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  --bg:#f5f5f7;
  --white:#fff;
  --ink:#1d1d1f;
  --muted:#6e6e73;      /* body copy on light backgrounds */
  --dim:#6e6e73;        /* small labels on light backgrounds (4.6:1) */
  --dim-dark:#8e8e94;   /* small labels on dark backgrounds (5.2:1) */
  --line:#d2d2d7;
  --frame:#d9d9dd;
  --black:#0b0b0d;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",
         "Segoe UI Variable Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:Georgia,"Times New Roman",serif;
}

/* ---------- 2. Base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  overflow-x:hidden;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
}
/* Fine grain over the whole page. Decorative only. */
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:90;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E");
}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:100%;object-fit:cover}
section[id],main[id]{scroll-margin-top:96px}

/* Keyboard focus must always be visible. */
a:focus-visible,button:focus-visible{
  outline:2px solid currentColor;
  outline-offset:3px;
  border-radius:3px;
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:200;
  padding:12px 18px;
  background:var(--ink);
  color:#fff;
  font-size:13px;
}
.skip-link:focus{left:12px;top:12px}

.progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--ink);z-index:101}

/* ---------- 3. Navigation ---------- */
.nav{
  position:fixed;
  z-index:20;
  top:0;left:0;right:0;
  height:72px;
  padding:0 5vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:rgba(245,245,247,.8);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid var(--line);
}
.brand{font-weight:700;letter-spacing:-.06em;font-size:20px}
.nav nav{display:flex;gap:32px;font-size:14px;color:var(--muted)}
.nav nav a,.contact{transition:color .25s}
.nav nav a:hover,.contact:hover{color:var(--ink)}
.contact{font-size:14px}
.contact span,.big-link span,.project-link span,.research-card a span{display:inline-block;margin-left:5px}
.nav-actions{display:flex;align-items:center;gap:14px}
.nav-actions .contact{white-space:nowrap}
.linkedin-button{
  display:inline-flex;align-items:center;gap:7px;
  padding:10px 15px;border-radius:999px;
  background:var(--ink);color:#fff;border:1px solid var(--ink);
  font-size:13px;line-height:1;
  transition:transform .25s ease,background .25s ease;
}
.linkedin-button:hover{transform:translateY(-1px);background:#000}
.lang-toggle{
  padding:9px 13px;
  border:1px solid var(--line);
  border-radius:999px;
  background:none;
  color:var(--muted);
  font:inherit;font-size:12px;line-height:1;letter-spacing:.06em;
  cursor:pointer;
  transition:color .25s ease,border-color .25s ease;
}
.lang-toggle:hover{color:var(--ink);border-color:var(--ink)}
.lang-toggle[hidden]{display:none}
.linkedin-button span{font-size:12px}

/* ---------- 4. Hero ---------- */
.hero{
  padding:135px 5vw 7vw;
  display:flex;flex-direction:column;justify-content:space-between;
  background:#fff;
  overflow:hidden;
}
.hero-top,.hero-bottom{display:flex;justify-content:space-between;align-items:center}
.hero-bottom{margin-top:35px}
.eyebrow,.kicker,.hero-note,.location{font-size:11px;letter-spacing:.13em;font-weight:600;color:var(--dim)}
.location{text-align:right}
.hero-main{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,25vw);
  gap:6vw;
  align-items:center;
}
.hero-copy h1{
  font-size:clamp(78px,11vw,170px);
  line-height:.82;
  letter-spacing:-.095em;
  font-weight:600;
  margin:0 0 34px;
}
.hero-copy h1 em,.closing h2 em{font-family:var(--serif);font-weight:400;letter-spacing:-.09em}
.hero-copy>p{font-size:clamp(20px,2.1vw,30px);line-height:1.1;letter-spacing:-.045em;max-width:650px;margin:0}
.scroll{font-size:10px;letter-spacing:.12em;color:var(--dim)}
.scroll span{font-size:22px;margin-left:8px}

/* The portrait is a cut-out with a dissolved lower edge, so it sits directly
   on the page. No frame, no backing panel. */
.portrait-slot{
  position:relative;
  width:min(25vw,430px);
  max-width:430px;
  max-height:720px;
  aspect-ratio:900/1557;
  justify-self:end;
}
.portrait-slot img{
  width:100%;height:100%;
  object-fit:contain;object-position:bottom;
  transform-origin:center bottom;
  transition:transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.portrait-slot:hover img{transform:scale(1.025)}

/* ---------- 5. Statement ---------- */
.statement{padding:9vw 5vw;background:var(--ink);color:#f5f5f7}
.statement-index{font-size:10px;letter-spacing:.14em;color:var(--dim-dark);margin-bottom:9vw}
.statement p{font-size:clamp(50px,9vw,135px);line-height:.9;letter-spacing:-.078em;max-width:1050px;margin:0}
.statement .muted{color:var(--dim-dark);margin-top:4vw;font-size:clamp(24px,3.2vw,46px);max-width:820px}

/* ---------- 6. Section shell ---------- */
.section{padding:7vw 5vw}
.section-head{
  display:flex;gap:24px;align-items:baseline;
  border-top:1px solid var(--line);
  padding-top:18px;margin-bottom:42px;
}
.section-head span{font-size:12px;color:var(--dim)}
.section-head h2{font-size:clamp(38px,4.8vw,68px);letter-spacing:-.065em;line-height:1;margin:0;font-weight:600}

/* ---------- 7. Feature project ---------- */
.feature-project{
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(320px,.82fr);
  min-height:590px;
  background:#fff;
  border:1px solid var(--frame);
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 14px 45px rgba(0,0,0,.045);
}
.bear-image{position:relative;display:block;min-height:590px;overflow:hidden;background:#283226}
/* El encuadre se mueve con el scroll. El 1.12 de escala da margen para que
   el desplazamiento nunca descubra un borde. */
.bear-image>img{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  transform:translate3d(0,var(--py,0px),0) scale(1.12);
}
.image-meta{position:absolute;left:30px;top:28px;color:#fff;font-size:10px;letter-spacing:.14em;z-index:3}
.feature-info{padding:48px 52px;display:flex;flex-direction:column;justify-content:space-between}
.feature-info h3{font-size:clamp(54px,5.4vw,82px);line-height:.8;letter-spacing:-.08em;margin:12px 0 25px}
.feature-info h3 i{font-family:var(--serif);font-weight:400}
.description{font-size:15px;line-height:1.5;color:var(--muted);max-width:500px}
.project-link{font-size:14px;border-bottom:1px solid var(--ink);padding-bottom:12px;width:max-content}

.laurel{
  position:absolute;
  width:96px;height:96px;
  border:1px solid rgba(255,255,255,.75);
  border-radius:50%;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;color:#fff;
  font-size:8px;line-height:1.15;letter-spacing:.12em;
  z-index:4;
  background:rgba(20,20,20,.18);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  transform:rotate(-12deg);
  transition:opacity .8s ease var(--laurel-delay,0s),transform .5s ease;
}
.js .laurel{opacity:0}
.feature-project.is-visible .laurel{opacity:1}
.laurel b{font-size:9px}
.laurel-one{right:24px;top:34px}
.laurel-two{right:100px;top:125px;transform:rotate(10deg)}
.laurel-three{right:20px;top:215px;transform:rotate(-4deg)}
.bear-image:hover .laurel-one{transform:rotate(-2deg) translateY(-4px)}
.bear-image:hover .laurel-two{transform:rotate(15deg) translateY(-2px)}
.bear-image:hover .laurel-three{transform:rotate(3deg) translateY(-3px)}

/* ---------- 8. Project grid ---------- */
.project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:18px}
.project-card{background:#fff;border:1px solid var(--frame);border-radius:20px;overflow:hidden;box-shadow:0 10px 35px rgba(0,0,0,.035)}
.project-photo{display:block;position:relative;aspect-ratio:16/9;background:#e6e6e8;overflow:hidden}
.project-photo img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.4s cubic-bezier(.16,1,.3,1);
}
.js .project-photo img{transform:scale(1.07)}
.project-card.is-visible .project-photo img{transform:scale(1)}
.project-card:hover .project-photo img{transform:scale(1.035);transition-duration:1s}
.project-arrow{
  position:absolute;right:20px;top:18px;
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.9);
  display:grid;place-items:center;font-size:16px;z-index:3;
}
.project-card-copy{padding:24px 26px 30px;position:relative}
.project-no{position:absolute;right:30px;top:30px;font-size:11px;color:var(--dim)}
.project-card h3{font-size:clamp(29px,3vw,45px);letter-spacing:-.06em;line-height:.93;margin:11px 0 14px;max-width:700px}
.project-card p:not(.kicker){font-size:15px;line-height:1.5;color:var(--muted);max-width:650px}
.dark-card{background:var(--ink);color:#f5f5f7}
.dark-card .project-card-copy p:not(.kicker),.dark-card .project-no,.dark-card .kicker{color:var(--dim-dark)}
.dark-card .project-photo{background:#26262a}

/* ---------- 9. Awards marquee ---------- */
.awards-strip{
  padding:19px 5vw;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:180px 1fr;gap:30px;
  overflow:hidden;background:#fff;
}
.awards-label{font-size:10px;letter-spacing:.14em;color:var(--dim)}
/* Two identical tracks. Each carries its own trailing gap, so translating by
   exactly -50% lands on the start of the second track with no jump. */
.awards-list{
  display:flex;
  width:max-content;
  white-space:nowrap;
  font-size:12px;letter-spacing:.08em;
  animation:marquee 32s linear infinite;
}
.awards-track{display:flex;gap:60px;padding-right:60px}
.awards-list b{color:var(--dim);font-weight:500}

/* ---------- 10. Experience ---------- */
.experience{background:#fff}
.experience-list{max-width:1150px;margin-left:auto}
.experience-item{display:grid;grid-template-columns:190px 1fr;gap:60px;padding:38px 0;border-top:1px solid var(--line)}
.experience-item:last-child{border-bottom:1px solid var(--line)}
.exp-date{font-size:10px;line-height:1.5;letter-spacing:.1em;color:var(--dim)}
.exp-main h3{font-size:clamp(28px,3vw,45px);letter-spacing:-.055em;line-height:1;margin:0 0 9px}
.company{font-size:14px;color:var(--muted);margin:0 0 25px}
.company span{opacity:.75}
.exp-main ul{padding:0;margin:0;list-style:none;max-width:850px}
.exp-main li{font-size:16px;line-height:1.52;color:var(--muted);padding-left:18px;position:relative;margin-bottom:10px}
.exp-main li:before{content:"—";position:absolute;left:0;color:#a0a0a6}

/* ---------- 11. Quote ---------- */
.big-quote{padding:9vw 5vw;background:#e8e8ed}
.big-quote p{font-size:clamp(60px,10vw,150px);line-height:.87;letter-spacing:-.085em;margin:0}
.big-quote span{font-family:var(--serif);font-weight:400}

/* ---------- 12. About ---------- */
.about{background:var(--bg)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:9vw}
.about-small{font-size:10px;letter-spacing:.12em;color:var(--dim)}
.about-headline h3{font-size:clamp(70px,9vw,135px);line-height:.8;letter-spacing:-.085em;margin:60px 0 0}
.about-copy{font-size:18px;line-height:1.55;color:var(--muted);max-width:690px}
.about-copy p{margin:0 0 26px}

/* Decorative route line. Three points, no coastline geometry. */
.about-map{position:relative;width:100%;max-width:620px;height:190px;margin-top:30px;opacity:.9;overflow:hidden}
.about-map-coast{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.about-map-lines{position:absolute;inset:0;width:100%;height:100%}
.about-map-route{fill:none;stroke:#777;stroke-width:1.2;stroke-dasharray:5 7;opacity:.42}
.about-map-points circle{fill:var(--ink);opacity:.85}
/* The plane only appears while the flight plays, so without JS or with reduced
   motion the map is simply the finished route. */
.about-plane{fill:var(--ink);opacity:0;transition:opacity .4s ease}
.about-map.is-flying .about-plane{opacity:.9}
.about-map-label{
  position:absolute;
  font-family:inherit;font-size:8px;line-height:1;
  letter-spacing:.13em;font-weight:600;
  color:#5f5f66;opacity:.8;
  white-space:nowrap;
}
.label-sb{left:7.5%;top:65%}
.label-ny{left:39.8%;top:48%}
.label-mad{right:5.7%;top:49%}

/* ---------- 13. Research card ---------- */
.research-card{
  margin:0 5vw;padding:70px 7vw;
  background:#fff;
  border:1px solid var(--frame);
  border-radius:22px;
  box-shadow:0 12px 40px rgba(0,0,0,.04);
  display:grid;grid-template-columns:.35fr 1fr;gap:7vw;
}
.research-label{font-size:10px;letter-spacing:.14em;color:var(--dim)}
.research-card h2{font-size:clamp(48px,6.5vw,95px);line-height:.87;letter-spacing:-.075em;margin:15px 0 28px}
.research-card p:not(.kicker){font-size:18px;line-height:1.5;color:var(--muted);max-width:700px}
.research-card a{display:inline-block;margin-top:22px;border-bottom:1px solid var(--ink);padding-bottom:10px;font-size:14px}

/* ---------- 14. Education ---------- */
.education{padding:7vw 5vw 8vw}
.education .section-head{grid-column:1/-1}
.education-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.edu{padding:30px 0;border-top:1px solid var(--line)}
.edu-year{font-size:10px;letter-spacing:.12em;color:var(--dim);margin-bottom:70px}
.edu h3{font-size:clamp(40px,4.5vw,68px);line-height:.9;letter-spacing:-.07em;margin:0 0 16px}
.edu p{font-size:15px;color:var(--muted);margin:0 0 8px}
.edu-logo-slot{height:36px;display:flex;align-items:flex-end;margin:0 0 16px}
.edu-logo{width:auto;height:auto;max-width:215px;max-height:36px;object-fit:contain}
.edu strong{font-size:18px;letter-spacing:-.025em;display:block}
.edu>span{font-size:13px;color:var(--dim);display:block;margin-top:4px}
.edu small{display:block;font-size:12px;line-height:1.5;color:var(--dim);margin-top:24px}

/* ---------- 15. Closing and footer ---------- */
.closing{padding:10vw 5vw;background:var(--ink);color:#f5f5f7}
.closing h2{font-size:clamp(65px,11vw,160px);line-height:.83;letter-spacing:-.09em;margin:70px 0 100px}
.closing .eyebrow{color:var(--dim-dark)}
.big-link{font-size:clamp(25px,4vw,55px);letter-spacing:-.05em;border-bottom:1px solid var(--dim-dark);padding-bottom:15px;display:inline-block}
footer{background:var(--ink);color:var(--dim-dark);padding:25px 5vw 40px;display:flex;justify-content:space-between;font-size:12px}
footer div{display:flex;gap:24px}
footer a:hover{color:#f5f5f7}

/* ---------- 16. Motion ---------- */
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes drawUnderline{to{transform:scaleX(1)}}
@keyframes focusPull{
  0%{opacity:0;transform:translateY(.2em) scale(1.04);filter:blur(20px)}
  55%{opacity:1}
  100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}
@keyframes heroSettle{
  0%{opacity:0;transform:translateY(16px)}
  100%{opacity:1;transform:translateY(0)}
}

/* Hero type reveal. clip-path is resolution independent, unlike ch widths. */
/* Focus pull. The name resolves out of a defocused frame instead of typing
   itself out: same idea, roughly half the time. */
.hero-title .type-line{display:inline-block;white-space:nowrap;vertical-align:bottom}
/* Driven purely by CSS: the hero resolves on its own even if script.js never
   arrives, so a failed script can never leave the page blank. */
.js .hero-title .type-line-1{opacity:0;animation:focusPull 700ms cubic-bezier(.16,1,.3,1) forwards}
.js .hero-title .type-line-2{opacity:0;animation:focusPull 700ms cubic-bezier(.16,1,.3,1) 130ms forwards}
.js .hero-copy>p{opacity:0;animation:heroSettle 620ms cubic-bezier(.16,1,.3,1) 330ms forwards}
.js .portrait-slot{opacity:0;animation:heroSettle 900ms cubic-bezier(.16,1,.3,1) 240ms forwards}

/* While the slate is still lifting, hold the hero one beat so the two read as
   one continuous shot rather than two separate animations. */
.js:not(.slate-seen) .hero-title .type-line-1{animation-delay:.62s}
.js:not(.slate-seen) .hero-title .type-line-2{animation-delay:.75s}
.js:not(.slate-seen) .hero-copy>p{animation-delay:.95s}
.js:not(.slate-seen) .portrait-slot{animation-delay:.86s}

.statement p,.section-head,.press-grid,.project-card,.experience-item,.edu,.research-card,.feature-project{
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);
}
.js .statement p,
.js .section-head,
.js .press-grid,
.js .project-card,
.js .experience-item,
.js .edu,
.js .research-card,
.js .feature-project{opacity:0;transform:translateY(22px)}
.statement.is-visible p,
.section-head.is-visible,
.press-grid.is-visible,
.project-card.is-visible,
.experience-item.is-visible,
.edu.is-visible,
.research-card.is-visible,
.feature-project.is-visible{opacity:1;transform:translateY(0)}
.statement.is-visible p:nth-of-type(2){transition-delay:.09s}
.statement.is-visible p:nth-of-type(3){transition-delay:.16s}

/* Shutter wipe. The image opens downward as the block settles into place. */
.project-photo,.bear-image{transition:clip-path 1.15s cubic-bezier(.16,1,.3,1)}
.js .project-photo,.js .bear-image{clip-path:inset(0 0 100% 0)}
.project-card.is-visible .project-photo,
.feature-project.is-visible .bear-image{clip-path:inset(0 0 0 0)}

/* Display headings rise from behind a mask. The padding gives descenders and
   italic overhangs room; the matching negative margin keeps layout unchanged. */
/* flow-root on the heading stops the mask's negative margin from collapsing
   through it, so the padding and the margin cancel exactly and the layout
   is byte-for-byte what it was without the effect. */
.has-rise{display:flow-root}
.rise-mask{
  display:block;
  overflow:hidden;
  padding:.09em .11em .22em;
  margin:-.09em -.11em -.22em;
}
.rise-inner{
  display:block;
  transform:translateY(150%);
  transition:transform 1.15s cubic-bezier(.16,1,.3,1);
}
.rise-mask.is-risen .rise-inner{transform:translateY(0)}

/* The line draws under the word as the statement enters the viewport. */
.watch-word{position:relative;display:inline-block;font-weight:700;text-decoration:none}
.watch-word::after{
  content:"";position:absolute;left:0;right:0;bottom:-.08em;
  height:2px;background:currentColor;
  transform:scaleX(0);transform-origin:left center;
}
.watch-word.is-underlined::after{animation:drawUnderline 700ms cubic-bezier(.2,.75,.2,1) 420ms forwards}

/* ---------- 19. End-of-page prompt ---------- */
.cta-pop{
  position:fixed;inset:0;z-index:120;
  display:grid;place-items:center;
  padding:24px;
}
.cta-pop[hidden]{display:none}
.cta-pop-backdrop{
  position:absolute;inset:0;
  background:rgba(12,12,14,.6);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  opacity:0;
  transition:opacity .45s ease;
}
.cta-pop-panel{
  position:relative;
  width:min(540px,100%);
  padding:52px 48px 44px;
  background:var(--ink);
  color:#f5f5f7;
  border-radius:24px;
  box-shadow:0 40px 90px rgba(0,0,0,.45);
  opacity:0;
  transform:translateY(28px) scale(.97);
  transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);
}
.cta-pop.is-open .cta-pop-backdrop{opacity:1}
.cta-pop.is-open .cta-pop-panel{opacity:1;transform:none}
.cta-pop-kicker{
  margin:0 0 22px;
  font-size:10px;letter-spacing:.16em;font-weight:600;
  color:var(--dim-dark);
}
.cta-pop h2{
  margin:0 0 18px;
  font-size:clamp(40px,6.5vw,58px);
  line-height:.88;letter-spacing:-.06em;font-weight:600;
}
.cta-pop h2 em{font-family:var(--serif);font-weight:400;letter-spacing:-.05em}
.cta-pop-copy{
  margin:0 0 34px;
  font-size:16px;line-height:1.5;
  color:var(--dim-dark);
  max-width:360px;
}
.cta-pop-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:15px 26px;border-radius:999px;
  background:#f5f5f7;color:var(--ink);
  font-size:15px;line-height:1;
  transition:transform .25s ease,background .25s ease;
}
.cta-pop-btn:hover{transform:translateY(-2px);background:#fff}
.cta-pop-alt{
  display:block;margin-top:22px;
  font-size:13px;color:var(--dim-dark);
  border-bottom:1px solid transparent;
  width:max-content;
}
.cta-pop-alt:hover{color:#f5f5f7;border-bottom-color:var(--dim-dark)}
.cta-pop-close{
  position:absolute;top:18px;right:18px;
  width:38px;height:38px;
  display:grid;place-items:center;
  background:none;border:0;
  color:var(--dim-dark);
  font-size:26px;line-height:1;
  cursor:pointer;border-radius:50%;
  transition:color .2s ease,background .2s ease;
}
.cta-pop-close:hover{color:#fff;background:rgba(255,255,255,.08)}
@media(max-width:700px){
  .cta-pop-panel{padding:44px 28px 34px;border-radius:18px}
  .cta-pop h2{font-size:38px}
}

/* ---------- 20. Press ---------- */
.press{background:#fff}
.press-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:40px;align-items:start}

.press-player{position:relative;border-radius:18px;overflow:hidden;background:#1a1a1c}
.video-facade{
  display:block;position:relative;width:100%;
  padding:0;border:0;margin:0;
  background:none;cursor:pointer;
  aspect-ratio:16/9;
}
.video-facade img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.video-facade:hover img{transform:scale(1.03)}
.video-facade:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.05) 40%,rgba(0,0,0,.55) 100%);
}
/* Play triangle drawn with borders so there is no icon dependency. */
.video-play{
  position:absolute;left:50%;top:50%;
  width:74px;height:74px;margin:-37px 0 0 -37px;
  border-radius:50%;
  background:rgba(245,245,247,.92);
  z-index:2;
  transition:transform .3s ease,background .3s ease;
}
.video-play:before{
  content:"";position:absolute;left:50%;top:50%;
  margin:-11px 0 0 -6px;
  border-style:solid;
  border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent #1d1d1f;
}
.video-facade:hover .video-play{transform:scale(1.07);background:#fff}
.video-caption{
  position:absolute;left:22px;bottom:18px;z-index:2;
  color:#fff;font-size:10px;letter-spacing:.14em;font-weight:600;
}
.press-player iframe{display:block;width:100%;aspect-ratio:16/9;border:0}

.press-list{list-style:none;margin:0;padding:0}
.press-list li{border-top:1px solid var(--line)}
.press-list li:last-child{border-bottom:1px solid var(--line)}
.press-list a{
  display:grid;
  grid-template-columns:1fr auto;
  gap:4px 16px;
  padding:20px 0;
  transition:opacity .25s ease;
}
.press-list a:hover{opacity:.6}
.press-source{
  grid-column:1/-1;
  font-size:10px;letter-spacing:.14em;font-weight:600;color:var(--dim);
}
.press-headline{font-size:16px;line-height:1.35;letter-spacing:-.02em}
.press-arrow{align-self:end;font-size:14px;color:var(--dim)}

/* ---------- 21. Certifications ---------- */
.credentials{
  display:grid;grid-template-columns:180px 1fr;gap:30px;
  margin-top:60px;padding-top:26px;
  border-top:1px solid var(--line);
}
.credentials-label{font-size:10px;letter-spacing:.14em;color:var(--dim)}
.credentials-list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px 30px;
}
.credentials-list b{display:block;font-size:14px;font-weight:500;letter-spacing:-.01em;line-height:1.35}
.credentials-list span{display:block;margin-top:5px;font-size:12px;color:var(--dim)}

@media(max-width:850px){
  .press-grid{grid-template-columns:1fr;gap:30px}
  .credentials{grid-template-columns:1fr;gap:20px;margin-top:45px}
  .credentials-list{grid-template-columns:repeat(2,1fr);gap:18px 24px}
}
@media(max-width:560px){
  .credentials-list{grid-template-columns:1fr}
  .video-play{width:60px;height:60px;margin:-30px 0 0 -30px}
}

/* ---------- 22. Opening slate ---------- */
.slate{
  position:fixed;inset:0;z-index:300;
  display:none;
  place-items:center;
  background:var(--black);
}
.js .slate{
  display:grid;
  animation:slateLift 1s cubic-bezier(.7,0,.18,1) forwards;
}
.js.slate-seen .slate,
.js .slate.is-skipped{display:none}

.slate-mark{width:min(62vw,330px);height:auto;overflow:visible}
.slate-body{fill:#f5f5f7}
.slate-arm rect{fill:#f5f5f7}
.slate-stripes path{fill:#111114}
.slate-name{
  font-family:var(--font);font-size:26px;font-weight:600;
  letter-spacing:-.03em;fill:#1d1d1f;
}
.slate-role{
  font-family:var(--font);font-size:9px;font-weight:600;
  letter-spacing:.14em;fill:#6e6e73;
}
.slate-rule{stroke:#c9c9cf;stroke-width:1}
.slate-meta{
  font-family:var(--font);font-size:8px;font-weight:600;
  letter-spacing:.13em;fill:#8e8e94;
}
/* The arm hinges at the left end of the sticks. */
.slate-arm{
  transform-box:view-box;
  transform-origin:14px 46px;
  transform:rotate(-34deg);
  animation:slateSnap .82s cubic-bezier(.5,0,.15,1) forwards;
}
@keyframes slateSnap{
  0%,26%{transform:rotate(-34deg)}
  48%{transform:rotate(1.6deg)}
  57%{transform:rotate(-3.4deg)}
  66%{transform:rotate(.8deg)}
  74%,100%{transform:rotate(0)}
}
@keyframes slateLift{
  0%,62%{opacity:1;transform:translateY(0);visibility:visible}
  100%{opacity:0;transform:translateY(-101%);visibility:hidden}
}

/* ---------- 17. Breakpoints (wide to narrow) ---------- */
@media(max-width:1000px){
  .hero-main{grid-template-columns:1fr 330px}
  .portrait-slot{max-height:590px}
  .feature-project{grid-template-columns:1fr}
  .bear-image{min-height:auto;aspect-ratio:16/9}
  .feature-info{min-height:auto}
  .laurel{width:84px;height:84px}
}

@media(max-width:850px){
  /* The section links move to a second row instead of disappearing. */
  .nav{height:auto;padding:10px 5vw 8px;flex-wrap:wrap;row-gap:6px}
  .nav nav{
    order:3;width:100%;
    gap:22px;font-size:12px;
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .nav nav::-webkit-scrollbar{display:none}
  section[id],main[id]{scroll-margin-top:104px}

  .hero{padding-top:120px}
  .hero-main{grid-template-columns:1fr;gap:22px}
  .hero-copy h1{font-size:25vw}
  .hero-copy>p{max-width:560px}
  /* Mobile gets the bust crop, small and tucked into the corner. */
  .portrait-slot{width:min(46vw,205px);max-width:205px;max-height:none;justify-self:end;aspect-ratio:620/694}
  .project-grid,.about-grid,.education-grid,.research-card{grid-template-columns:1fr}
  .experience-item{grid-template-columns:1fr;gap:18px}
  .research-card{padding:50px 30px}
  .awards-strip{grid-template-columns:1fr}
  .awards-list{overflow:visible;animation:none;white-space:normal;width:auto}
  .awards-track{flex-wrap:wrap;gap:18px;padding-right:0}
  .awards-track[aria-hidden="true"]{display:none}
  .section{padding-top:75px;padding-bottom:75px}
  .education{padding-top:75px}
  .edu-year{margin-bottom:45px}
  .laurel{width:84px;height:84px}
  footer{flex-direction:column;gap:18px}
}

@media(max-width:700px){
  .nav-actions{gap:8px}
  .lang-toggle{padding:8px 10px;font-size:11px}
  .linkedin-button{padding:9px 12px;font-size:12px}
  .nav-actions .contact{font-size:12px}
  .nav-actions .contact span{display:none}

  .hero{padding-top:112px;padding-bottom:70px}
  .hero-top{align-items:flex-start;gap:20px}
  .location{font-size:9px;max-width:175px;line-height:1.45}
  .hero-copy h1{font-size:24vw}
  .hero-copy>p{font-size:21px}
  .hero-bottom{margin-top:28px}

  .statement{padding:75px 6vw}
  .statement p{font-size:14vw}
  .statement .muted{font-size:22px}
  .section{padding:75px 6vw}
  .section-head{margin-bottom:30px}
  .section-head h2{font-size:45px}
  .feature-project{border-radius:16px}
  .bear-image{aspect-ratio:4/3}
  .feature-info{padding:35px 25px}
  .feature-info h3{font-size:62px}
  .project-card{border-radius:16px}
  .project-photo{aspect-ratio:16/10}
  .laurel{width:74px;height:74px;font-size:7px}
  .laurel b{font-size:8px}
  .laurel-one{right:14px;top:18px}
  .laurel-two{right:72px;top:87px}
  .laurel-three{right:12px;top:156px}
  .awards-strip{padding:18px 6vw}
  .awards-list{gap:12px;font-size:10px}
  .experience-item{padding:30px 0;gap:13px}
  .exp-main li{font-size:15px}
  .research-card{margin:0 6vw;padding:35px 25px;border-radius:16px}
  .education{padding:75px 6vw}
  .education-grid{gap:35px}
  .closing{padding:80px 6vw}
  .closing h2{margin:45px 0 65px}
  footer{padding-left:6vw;padding-right:6vw}
}

/* ---------- 18. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .slate{display:none !important}
  .hero-title .type-line,.hero-copy>p,.portrait-slot{opacity:1;filter:none;transform:none;animation:none}
  .statement p,.section-head,.press-grid,.project-card,.experience-item,.edu,.research-card,.feature-project{
    opacity:1;transform:none;transition:none;
  }
  .watch-word::after{transform:scaleX(1);animation:none}
  .awards-list{animation:none}
  .portrait-slot img,.project-photo img,.laurel{transition:none}
  .bear-image>img{transform:scale(1)}
  .project-photo,.bear-image{clip-path:none;transition:none}
  .project-photo img{transform:scale(1)}
  .laurel{opacity:1}
  .rise-inner{transform:none;transition:none}
  .cta-pop-backdrop,.cta-pop-panel{transition:none}
}