/* RESUME PAGE ONLY. Loads after style.css. */

.res{padding:6.5rem var(--gut,var(--pad)) 5rem}
@media(min-width:1600px){.res{padding-inline:calc((100% - 1500px)/2)}}

/* Top bar: same look as Process */
.res-bar{display:flex;justify-content:space-between;align-items:baseline;gap:1rem 2rem;padding-bottom:1rem;border-bottom:1px solid var(--line);margin-bottom:2.5rem}

/* Download button: same hand-drawn box as "Choose a project" */
.res-dl{position:relative;isolation:isolate;padding:.55rem 1.3rem;font-weight:500;font-size:.95rem;
  border:2.4px solid var(--coral);border-radius:14px 6px 16px 8px / 8px 16px 6px 14px;
  transition:transform .4s cubic-bezier(.3,1.5,.5,1)}
.res-dl::after{content:"";position:absolute;inset:-2.4px;border:1px solid var(--ink);border-radius:inherit;transform:translate(4px,3px);z-index:-1;pointer-events:none}
.res-dl:hover{transform:translate(-2px,-2px)}

/* Two columns: narrow sidebar, wide main */
/* Two columns: your info on the left, the PDF on the right */
.res-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(1.5rem,4vw,4rem);align-items:start}

/* Left column stacks the cards, then Education and Experience */
.res-left{display:grid;gap:1.5rem}
.res-left section{margin-top:1.5rem}

/* Right column stays in view while the left scrolls */
.res-right{position:sticky;top:6rem;display:grid;gap:1rem}
.res-tools{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.res-tools span{font:italic 400 1.1rem var(--serif);color:var(--coral-d)}
.res-pdf{display:block;width:100%;height:calc(100svh - 12rem);min-height:520px;background:#fff;border:0;
  box-shadow:0 22px 40px -24px rgba(64,53,61,.5)}
.res-fallback{padding:2rem;text-align:center}
/* White cards, same as the work wall */
.res-card,.res-item{background:#fff;padding:clamp(1rem,2vw,1.6rem);box-shadow:0 22px 40px -24px rgba(64,53,61,.5);
  transition:transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .55s cubic-bezier(.2,.8,.2,1)}
.res-card:hover,.res-item:hover{transform:translateY(-6px);box-shadow:7px 7px 0 var(--coral)}

.res-card h3{font:600 1.6rem/1.1 var(--serif)}
.res-card h4{font:italic 400 1.1rem var(--serif);color:var(--coral-d);margin-bottom:.6rem}
.res-role{margin-top:.4rem;font:italic 400 1.1rem/1.3 var(--serif);color:var(--grey)}
.res-contact{list-style:none;padding:0;margin-top:1rem;display:grid;gap:.4rem;font-size:.95rem}
.res-tags{display:flex;flex-wrap:wrap;gap:.5rem}
.res-tags span{padding:.2rem .7rem;border:1px solid var(--line);font-size:.9rem}

/* Main column */
.res-main{display:grid;gap:3rem}
.res-h{font:400 clamp(1.6rem,3vw,2.2rem)/1.1 var(--serif);padding-bottom:.8rem;margin-bottom:1.4rem;border-bottom:1px solid var(--line)}
.res-item+.res-item{margin-top:1.4rem}
.res-top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.res-top h4{font:600 1.3rem/1.2 var(--serif)}
.res-top span{font-size:.9rem;color:var(--grey);white-space:nowrap}
.res-where{margin:.2rem 0 .7rem;font:italic 400 1.1rem var(--serif);color:var(--coral-d)}
.res-item p+p{margin-top:.6rem}
.res-item ul{padding-left:1.2rem;display:grid;gap:.4rem}

@media(max-width:800px){
  .res{padding-top:8rem}
  .res-grid{grid-template-columns:1fr}
  .res-right{position:static}
  .res-pdf{height:70svh}
  .res-top{flex-direction:column;gap:.2rem}
}

/* ---------- ALIGN TOPS ----------
   The Download bar floats above the columns, so the first left card and the
   top of the PDF now start at exactly the same height. */
.res-grid{padding-top:4.5rem}            /* room for the toolbar. Raise it if the button feels cramped */
.res-right{position:sticky}              /* keeps the toolbar anchored to the PDF */
.res-tools{position:absolute;bottom:100%;left:0;right:0;margin-bottom:1rem}
.res-left section{margin-top:0}          /* no extra push, so the left stack starts flush at the top */

/* ---------- CORAL UNDER THE LEFT SIDE ----------
   Every left card and entry gets the coral offset shadow all the time
   (it used to show only on hover). */
.res-left .res-card,
.res-left .res-item{box-shadow:7px 7px 0 var(--coral)}

/* Hover: nudges up and left, and the coral grows a little */
.res-left .res-card:hover,
.res-left .res-item:hover{transform:translate(-3px,-3px);box-shadow:10px 10px 0 var(--coral)}

/* OPTIONAL: same coral under the PDF so both sides match. Delete the slashes and stars to turn it on.
.res-pdf{box-shadow:7px 7px 0 var(--coral)}
*/

/* Phones: one column, so the toolbar goes back to normal flow */
@media(max-width:800px){
  .res-grid{padding-top:0}
  .res-tools{position:static;margin-bottom:0}
}