@font-face{font-family:Instrument;src:url(assets/InstrumentSans-Regular.ttf);font-display:swap}
@font-face{font-family:Instrument;src:url(assets/InstrumentSans-Bold.ttf);font-weight:700;font-display:swap}
:root{--ink:#181d19;--paper:#f7f7f2;--muted:#596059;--line:#cdd1c5;--lime:#d5ee96;color:var(--ink);background:var(--paper);font:17px/1.55 Instrument,Arial,sans-serif}
*{box-sizing:border-box}
body,figure,h1,h2,h3,p{margin:0}
a{color:inherit;text-underline-offset:.25em}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid #677f21;outline-offset:4px}
.wrap{width:min(90%,1300px);margin:auto}
.foot,nav{display:flex;align-items:center}
.hero{
  position:relative;isolation:isolate;overflow:hidden;color:#fff9ec;
  background:radial-gradient(ellipse at 80% 36%,#776f41,transparent 63%),linear-gradient(105deg,#131308,#292713 54%,#4b4628);
}
.portrait{
  position:absolute;z-index:-1;right:8.2%;bottom:0;width:auto;max-width:47%;height:89%;
  object-fit:contain;object-position:right bottom;
}
.mast{position:relative;padding:clamp(1rem,2vw,2rem) 4%}
nav{justify-content:center;gap:clamp(1.2rem,4.4vw,4.8rem);font-weight:700;font-size:clamp(.9rem,1.42vw,1.3rem)}
nav a,.foot a{text-decoration:none}
nav a{padding:.25em 0}
.hero-content{width:86%;max-width:none;min-height:clamp(460px,50vw,800px);display:flex;align-items:center;padding:3rem 0}
.intro{max-width:58%}
.subtitle{font-weight:700;font-size:clamp(1.5rem,2.71vw,2.6rem);line-height:1.2;letter-spacing:-.03em}
h1,h2,h3,.statement{line-height:1.05;letter-spacing:-.055em}
h1{font-size:clamp(2.3rem,4.375vw,4.25rem);margin:.45em 0 .57em}
h1 span{display:block}
.descriptor,.location{font-size:clamp(1rem,1.7014vw,1.65rem);line-height:1.4}
.location{margin-top:.65em}
.button{display:inline-block;background:#c7ef48;color:#16190b;font-weight:700;text-decoration:none;border-radius:3em;padding:.62em 1.55em;margin-top:1.75em;font-size:clamp(1.05rem,1.806vw,1.7rem)}
.hero :focus-visible{outline-color:#fff}
.date,.tag,.kicker{font-size:.74rem;font-weight:700;letter-spacing:.065em}
.kicker,.tag{text-transform:uppercase}
.part{padding-block:clamp(3rem,6vw,5.5rem)}
.split{display:grid;grid-template-columns:1fr 2fr;gap:6%;border-bottom:1px solid var(--line)}
h2{font-size:clamp(2.35rem,4.25vw,4rem)}
.statement{font-size:clamp(1.6rem,2.9vw,2.7rem);margin-bottom:.5em;max-width:24ch}
.split p:not(.statement){max-width:70ch}
.special{display:grid;grid-template-columns:minmax(8rem,.85fr) 1.4fr;gap:1rem 1.5rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--line)}
.special h3{font-size:1.15rem;line-height:1.2}
.special p,.role,.muted,.projects p{color:var(--muted)}
.muted{margin-top:.7rem}
summary{position:relative;cursor:pointer;list-style:none;padding-right:2rem}
summary::-webkit-details-marker{display:none}
summary::after{content:'+';position:absolute;right:2px;top:50%;transform:translateY(-50%);font-size:1.3rem;font-weight:400}
details[open]>summary::after{content:'−'}
summary:hover strong,summary:hover .role{text-decoration:underline}
.job,.extra,.degree{border-top:1px solid var(--line)}
.job summary,.degree{display:grid;grid-template-columns:8rem 1fr;gap:1rem;padding-block:1rem}
.job strong,.degree h3,.projects h3,.sub{font-size:1.45rem;letter-spacing:-.04em;line-height:1.15}
.role{display:block;font-size:.9rem}
.date{color:var(--muted);letter-spacing:.01em}
.job p{margin:0 1.5rem 1rem 9rem}
.extra summary{font-weight:700;padding-block:1rem}
.extra p,.extra ul{margin-bottom:1rem}
.sub{margin:2rem 0 .6rem}
.dark{background:var(--ink);color:var(--paper)}
.projects{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem;margin-top:2.5rem}
.projects article{position:relative;padding-top:1.1rem}
.tag{color:var(--lime);font-size:.67rem}
.projects h3{font-size:1.7rem;margin:.65rem 0}
.projects p{color:#d2d6cb;font-size:.94rem}
.degree h3{margin-bottom:.25rem}
footer{background:var(--lime)}
footer h2{margin:.45em 0;font-size:clamp(2.4rem,5.3vw,5rem)}
.email{font-size:clamp(1rem,2vw,1.6rem)}
.foot{gap:1.4rem;border-top:1px solid #849267;margin-top:3rem;padding-top:1.2rem;flex-wrap:wrap;font-size:.85rem}
.foot span{margin-right:auto}
.skip{position:absolute;left:1rem;top:-5rem;background:var(--ink);color:white;padding:.6em;z-index:5}
.skip:focus{top:1rem}
@media(max-width:960px){.projects{grid-template-columns:1fr 1fr}.split{grid-template-columns:.8fr 1.8fr;gap:4%}.job summary,.degree{grid-template-columns:7rem 1fr}.job p{margin-left:0}}
@media(min-width:741px){
  #perfil{grid-template-columns:2fr 1fr}
  #perfil>h2{grid-column:2;grid-row:1}
  #perfil>div{grid-column:1;grid-row:1}
}
.overview{display:block;font-size:.98rem;margin-top:.45rem;max-width:52ch}
#experiencia .sub~p+p:not(.date){margin-top:.75em}
@media(max-width:740px){
  .hero{background:linear-gradient(160deg,#48452a,#262512 65%,#17170c)}
  .portrait{top:3.35rem;right:4%;bottom:auto;width:92%;max-width:none;height:clamp(255px,72vw,415px);object-position:center top;mask-image:linear-gradient(#000 62%,transparent)}
  .mast{background:linear-gradient(#17170ce6,transparent);padding:.9rem .4rem 2rem}
  nav{flex-wrap:wrap;gap:.15rem clamp(.48rem,2.3vw,1.1rem);font-size:clamp(.75rem,3.3vw,.95rem)}
  .hero-content{min-height:0;width:90%;padding:clamp(245px,66vw,385px) 0 2.2rem;display:block}
  .intro{max-width:100%}
  .subtitle{font-size:1.4rem;text-shadow:0 1px 6px #1d1c10}
  h1{font-size:clamp(2rem,7.8vw,3rem);margin:.36em 0 .5em}
  .button{margin-top:1.1rem}
  .split,.special{grid-template-columns:1fr;gap:1.7rem}
  .special{gap:.35rem}.special h3:not(:first-child){margin-top:.8rem}
  .job summary,.degree{grid-template-columns:1fr;gap:.25rem}
  .foot{gap:.8rem 1rem}.foot span{width:100%}
}
@media(max-width:520px){.projects{grid-template-columns:1fr}.projects article{padding-top:1rem}.projects h3{margin:.35rem 0}.projects{gap:1.25rem}}
.projects article::before{
  content:"";position:absolute;inset:0 0 auto;height:1px;
  background:#89977e;transform-origin:left;
}
.job summary::before,.job summary::after{
  content:"";position:absolute;right:.2rem;top:50%;
  width:.85rem;height:2px;background:currentColor;transform:translateY(-50%);
}
.job summary::after{transform:translateY(-50%) rotate(90deg)}
.job[open] summary::after{transform:translateY(-50%) rotate(0)}
.job-panel{display:grid;grid-template-rows:1fr}
.job-copy{min-height:0;overflow:hidden}
.email{
  display:inline-block;--fill:0%;padding:.1em .22em;margin-left:-.22em;
  background:linear-gradient(to right,var(--ink),var(--ink)) left/var(--fill) 100% no-repeat;
}
.email:is(:hover,:focus-visible,:active){--fill:100%;color:var(--paper)}
@supports (background-clip:text){
  .email span{
    color:transparent;background:linear-gradient(90deg,var(--paper) 50%,var(--ink) 50%);
    background-size:200% 100%;background-position:100% 0;background-clip:text;
  }
  .email:is(:hover,:focus-visible,:active) span{background-position:0 0}
}
@media (forced-colors:active){.email span{color:LinkText}}
@keyframes rule-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes panel-open{from{grid-template-rows:0fr}to{grid-template-rows:1fr}}
@keyframes ink-sweep{from{background-position:100% 0}to{background-position:0 0}}
@keyframes name-arrival{
  from{opacity:0;transform:translateY(.5em);clip-path:inset(0 0 85% 0)}
  to{opacity:1;transform:translateY(0);clip-path:inset(-.18em 0 -.18em 0)}
}
@media screen and (prefers-reduced-motion:no-preference){
  h1 span{animation:name-arrival 1.15s cubic-bezier(.22,.75,.25,1) .12s backwards}
  h1 span:nth-child(2){animation-delay:.46s}
  .projects article.draw-line::before{animation:rule-draw .75s ease-out var(--line-delay,0ms) backwards}
  .job[open] .job-panel{animation:panel-open .38s ease-out}
  .job summary::after{transition:transform .32s ease}
  .email{transition:background-size .36s ease}
  .email span{transition:background-position .36s ease}
  @supports (animation-timeline:view()) and (background-clip:text){
    .statement{
      color:transparent;
      background:linear-gradient(90deg,var(--ink) 46%,#65705e 54%);
      background-size:220% 100%;background-clip:text;
      animation:ink-sweep linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 43%;
    }
  }
}
@media print{
  .mast,.button,.foot a,.skip,.portrait,summary::after{display:none}
  .wrap{width:100%}.part,.hero-content{padding-block:1rem}
  .hero-content{min-height:0}.intro{max-width:none}
  .hero,.dark,footer{background:white;color:black}.projects p,.tag{color:black}
  .projects{grid-template-columns:1fr 1fr}.projects article,.job,.degree{break-inside:avoid}
  .split{display:block}.split h2{margin-bottom:.4em}
}

@media print{.email span,.statement{color:var(--ink)}.job summary::before,.job summary::after{display:none}}
@media (forced-colors:active){.statement{color:CanvasText}}