:root{
  --cream:#FAF6EC;
  --cream-2:#F2ECDA;
  --green-pale:#DDE9DF;  /* soft tint for the school block */
  --ink:#12140F;
  --green:#1B6B4A;       /* 6.0:1 on cream — safe at any size */
  --green-lite:#3FA96B;  /* for ink/dark backgrounds, where deep green is too dim */
  --maxw:1180px;
  --maxw-wide:1440px;
  --gutter:clamp(1.25rem,5vw,4rem);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Space Grotesk',system-ui,sans-serif;
  background:var(--cream);
  color:var(--ink);
  overflow-x:hidden;
  line-height:1.5;
}
.display{font-family:'Archivo Black',sans-serif;line-height:0.96;letter-spacing:-0.02em;}

/* Backgrounds stay full-bleed; content is capped and centred so wide monitors
   don't stretch text to an unreadable measure. */
/* Scoped to .home: these are the main page's layout chrome. Left unscoped, the
   bare `section` selector also hit resume.html, padding each block by up to
   88px vertically and wrecking print pagination. */
.home .hero, .home .stats, .home section, .home .foot{
  padding-inline:max(var(--gutter), calc((100% - var(--maxw)) / 2));
}

/* ---------- scroll reveal ----------
   Runs as a keyframe animation and the class is stripped on animationend.
   A lingering `transform:none` here would outrank every :hover rule below. */
.js-reveal .reveal{opacity:0;}
.js-reveal .reveal.in{
  animation:revealIn .7s cubic-bezier(.22,1.12,.36,1) both;
  animation-delay:calc(var(--d,0) * 80ms);
}
.js-reveal .reveal.shown{opacity:1;}
@keyframes revealIn{
  from{opacity:0;transform:translateY(30px) scale(0.94);}
  to{opacity:1;transform:none;}
}

/* ---------- top marquee (the one place caps belong) ---------- */
.marquee{
  background:var(--ink);color:var(--green-lite);
  padding:11px 0;overflow:hidden;white-space:nowrap;
  border-bottom:4px solid var(--ink);
}
.marquee span{
  display:inline-block;font-weight:700;font-size:0.9rem;
  letter-spacing:0.18em;text-transform:uppercase;
  padding-right:2.5rem;animation:scroll 22s linear infinite;
}
@keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ---------- hero ---------- */
.hero{
  position:relative;
  padding-block:clamp(2.5rem,6vw,5.5rem) clamp(3rem,6vw,5rem);
  background:
    radial-gradient(circle at 85% 8%, rgba(63,169,107,0.34) 0 12%, transparent 46%),
    radial-gradient(circle at 4% 96%, rgba(27,107,74,0.26) 0 14%, transparent 50%),
    var(--cream);
  border-bottom:5px solid var(--ink);
  overflow:hidden;
}
.eyebrow{
  display:inline-block;background:var(--green);color:#fff;
  font-weight:700;font-size:0.82rem;letter-spacing:0.02em;
  padding:7px 15px;border:3px solid var(--ink);
  transform:rotate(-2deg);box-shadow:4px 4px 0 var(--ink);
  margin-bottom:1.6rem;
  transition:transform .18s cubic-bezier(.3,1.4,.5,1), box-shadow .18s ease;
}
.eyebrow:hover{transform:rotate(0deg) translateY(-2px);box-shadow:6px 6px 0 var(--green-lite);}
.hero h1{font-size:clamp(3rem,11vw,8.5rem);margin-bottom:0.4rem;}
.hero h1 .name-2{color:var(--green);-webkit-text-stroke:2.5px var(--ink);}
.flip-line{
  font-family:'Archivo Black',sans-serif;
  font-size:clamp(1.1rem,4.2vw,2.4rem);
  margin:1rem 0 1.8rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:0.5ch;
}
/* The cycling word changes length every 1.5s ("server" -> "package-slinger").
   A shrink-to-fit box resizes on each swap, crossing the wrap boundary on narrow
   screens and shoving the rest of the page down and back up. .flip-sizer holds
   the longest word invisibly so the box width is constant and nothing reflows.
   nowrap also stops the hyphenated words breaking across two lines. */
.flip-box{
  position:relative;display:inline-block;
  background:var(--green);border:3px solid var(--ink);
  padding:2px 14px;box-shadow:5px 5px 0 var(--ink);
  transform:rotate(-1.5deg);color:#fff;
  white-space:nowrap;text-align:center;
  transition:transform .2s cubic-bezier(.3,1.4,.5,1), box-shadow .2s ease;
}
.flip-box:hover{transform:rotate(1.5deg) scale(1.04);box-shadow:7px 7px 0 var(--green-lite);}
/* Carries the `hidden` attribute so it is display:none before CSS arrives —
   otherwise its text flashes inline beside the live word. Author styles beat
   the UA stylesheet, so this re-enables it purely to set the box width. */
.flip-sizer[hidden]{display:block;height:0;overflow:hidden;visibility:hidden;}
#flipword{display:block;}

/* Narrow screens: stack, and make the box block-level at a fixed percentage
   width. Its width then depends on the container rather than on the word inside
   it, so no word length can move the layout regardless of the font's metrics.
   The breakpoint is generous because the inline layout starts competing for room
   well before phone widths — "Currently a professional" plus the longest word is
   a lot of Archivo Black on one line.
   width is short of 100% to leave room for the offset shadow and the rotation,
   which would otherwise push past the right edge. */
@media(max-width:760px){
  .flip-line{
    flex-direction:column;align-items:stretch;
    gap:0.5rem;
    font-size:clamp(1rem,3.6vw,1.5rem);
  }
  .flip-box{
    display:block;
    width:calc(100% - 10px);
    text-align:left;
    transform:rotate(-1deg);
  }
  .flip-box:hover{transform:rotate(-1deg);}
}
.subhead{
  max-width:56ch;font-size:clamp(1rem,2.2vw,1.28rem);
  font-weight:500;margin-bottom:2rem;color:#2b2e29;
}
.cta-row{display:flex;flex-wrap:wrap;gap:0.9rem;}
.btn{
  font-family:'Archivo Black',sans-serif;
  font-size:0.98rem;letter-spacing:-0.01em;
  padding:14px 26px;border:3px solid var(--ink);
  box-shadow:5px 5px 0 var(--ink);cursor:pointer;text-decoration:none;
  display:inline-block;
  transition:transform .16s cubic-bezier(.3,1.4,.5,1), box-shadow .16s ease, background-color .16s ease, color .16s ease;
}
.btn:hover{transform:translate(-2px,-3px);box-shadow:8px 9px 0 var(--ink);}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink);}
.btn-primary{background:var(--green);color:#fff;}
.btn-primary:hover{box-shadow:8px 9px 0 var(--green-lite);}
.btn-ghost{background:var(--cream);color:var(--ink);}
.btn-ghost:hover{background:var(--green-lite);}

/* ---------- stats — GREEN BLOCK ---------- */
.stats{
  background:var(--green);
  display:grid;grid-template-columns:repeat(4,1fr);
  text-align:center;border-bottom:5px solid var(--ink);
}
.stat{
  padding:clamp(1.4rem,3vw,2.4rem) 0.8rem;
  border-right:3px solid rgba(250,246,236,0.22);
  transition:background-color .25s ease;
}
.stat:last-child{border-right:none;}
.stat:hover{background:rgba(250,246,236,0.13);}
.stat .num{font-family:'Archivo Black',sans-serif;font-size:clamp(1.9rem,4.6vw,3.2rem);color:var(--cream);line-height:1;}
.stat .num .unit{font-size:0.48em;}
.stat .lbl{font-size:0.84rem;margin-top:0.6rem;color:rgba(250,246,236,0.86);font-weight:600;line-height:1.35;}
@media(max-width:640px){
  .stats{grid-template-columns:repeat(2,1fr);}
  .stat:nth-child(2){border-right:none;}
  .stat:nth-child(1),.stat:nth-child(2){border-bottom:3px solid rgba(250,246,236,0.22);}
}

/* ---------- sections ---------- */
.home section{padding-block:clamp(3rem,7vw,5.5rem);}
.sec-head{display:flex;align-items:center;gap:1rem;margin-bottom:2.4rem;}
.sec-head h2{font-size:clamp(1.9rem,5vw,3.1rem);}
.sec-head .dot{width:22px;height:22px;background:var(--green);border:3px solid var(--ink);border-radius:50%;flex:none;}

/* ---------- about ---------- */
.about{background:var(--cream-2);border-bottom:5px solid var(--ink);}
.about p{max-width:62ch;font-size:clamp(1.05rem,2.2vw,1.35rem);margin-bottom:1.2rem;font-weight:500;}
.about .big{
  font-family:'Archivo Black',sans-serif;
  font-size:clamp(1.5rem,3.9vw,2.5rem);line-height:1.08;letter-spacing:-0.02em;
  color:var(--green);-webkit-text-stroke:1.5px var(--ink);
  max-width:20ch;margin-bottom:1.6rem;
}

/* ---------- jobs ---------- */
.jobs{background:var(--cream);border-bottom:5px solid var(--ink);}
.job-grid{display:grid;gap:1.1rem;}
/* Six stacked cards leave a wide monitor looking empty — go two-up. */
@media(min-width:900px){.job-grid{grid-template-columns:repeat(2,1fr);}}
.job{
  background:#fff;border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink);
  padding:1.3rem 1.5rem;display:flex;gap:1.2rem;align-items:flex-start;
  transition:transform .2s cubic-bezier(.3,1.35,.5,1), box-shadow .2s ease;
}
.job:hover{transform:translate(-4px,-5px);box-shadow:11px 12px 0 var(--green);}
.job .emoji{
  font-size:2rem;line-height:1;flex:none;
  transition:transform .28s cubic-bezier(.3,1.5,.5,1);
}
.job:hover .emoji{transform:rotate(-12deg) scale(1.18);}
.job .role{font-family:'Archivo Black',sans-serif;font-size:1.1rem;letter-spacing:-0.01em;}
.job .where{font-weight:600;color:var(--green);}
.job .when{font-size:0.82rem;color:#666a62;font-weight:600;margin-top:2px;}
.job .blurb{font-size:0.95rem;margin-top:0.5rem;color:#2b2e29;}

/* ---------- education / soccer ---------- */
.edu{background:var(--green-pale);border-bottom:5px solid var(--ink);}
.edu-wrap{display:grid;grid-template-columns:1.15fr 1fr;gap:1.4rem;align-items:stretch;}
@media(max-width:820px){.edu-wrap{grid-template-columns:1fr;}}
.edu-card{
  background:var(--cream);border:3px solid var(--ink);box-shadow:7px 7px 0 var(--ink);
  padding:1.6rem 1.7rem;
  transition:transform .2s cubic-bezier(.3,1.35,.5,1), box-shadow .2s ease;
}
.edu-card:hover{transform:translate(-4px,-5px);box-shadow:12px 13px 0 var(--green);}
.edu-card .school{font-family:'Archivo Black',sans-serif;font-size:clamp(1.2rem,2.6vw,1.55rem);line-height:1.08;letter-spacing:-0.01em;}
.edu-card .place{font-weight:600;color:var(--green);margin-top:4px;}
.edu-card .detail{font-size:0.98rem;margin-top:0.9rem;color:#2b2e29;}
.edu-card .tagline{margin-top:1rem;font-weight:600;font-size:0.9rem;color:#666a62;}

.soccer{
  background:var(--ink);color:var(--cream);border:3px solid var(--ink);
  box-shadow:7px 7px 0 rgba(18,20,15,0.32);padding:1.6rem 1.7rem;
  display:flex;flex-direction:column;justify-content:center;
  position:relative;overflow:hidden;
  transition:transform .2s cubic-bezier(.3,1.35,.5,1), box-shadow .2s ease;
}
.soccer:hover{transform:translate(-4px,-5px);box-shadow:12px 13px 0 var(--green);}
.soccer::after{
  content:"";position:absolute;right:-40px;bottom:-40px;
  width:150px;height:150px;border-radius:50%;
  border:14px solid rgba(63,169,107,0.22);
  transition:transform .45s cubic-bezier(.3,1.2,.5,1);
}
.soccer:hover::after{transform:scale(1.14);}
/* align-self keeps this box the width of the emoji. As a stretched flex item it
   spanned the whole card, so rotating about its centre flung the glyph downward. */
.soccer .ball{
  align-self:flex-start;
  font-size:2.2rem;line-height:1;margin-bottom:0.7rem;position:relative;z-index:1;
  transform-origin:50% 50%;
  transition:transform .5s cubic-bezier(.3,1.3,.5,1);
}
.soccer:hover .ball{transform:rotate(-25deg) scale(1.15);}
.soccer h3{font-family:'Archivo Black',sans-serif;font-size:clamp(1.2rem,2.6vw,1.55rem);line-height:1.08;color:var(--green-lite);position:relative;z-index:1;letter-spacing:-0.01em;}
.soccer p{margin-top:0.7rem;font-size:0.98rem;position:relative;z-index:1;color:#ddd8cc;}

/* ---------- skills — INK BLOCK, throwable tags ----------
   Wider measure than the rest of the page so the tags have room to travel. */
.home .skills{
  background:var(--ink);color:var(--cream);border-bottom:5px solid var(--ink);
  padding-inline:max(var(--gutter), calc((100% - var(--maxw-wide)) / 2));
}
.skills .sec-head{justify-content:center;}
.skills .sec-head h2{color:var(--cream);}
.skills .sec-head .dot{background:var(--green-lite);}

.mode-toggle{display:none;justify-content:center;gap:0;margin:0 auto 1.3rem;}
.mode-toggle.ready{display:flex;}
.mode-toggle button{
  font-family:inherit;font-weight:700;font-size:0.84rem;
  padding:8px 16px;border:3px solid var(--cream);
  background:transparent;color:var(--cream);cursor:pointer;
  transition:background-color .18s ease, color .18s ease;
}
.mode-toggle button + button{border-left:none;}
.mode-toggle button:hover{background:rgba(250,246,236,0.14);}
.mode-toggle button.on{background:var(--cream);color:var(--ink);}

/* Default (no JS / reduced motion) is a plain centred wrap; physics layers on top. */
.skill-field{
  position:relative;max-width:var(--maxw-wide);margin:0 auto;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0.9rem;
  border:3px dashed rgba(250,246,236,0.16);padding:1.4rem;
}
.skill-field.physics{
  display:block;padding:0;
  height:clamp(300px,26vw,380px);
  overflow:hidden;touch-action:none;
}
.tag{
  background:var(--cream);color:var(--ink);border:3px solid var(--ink);
  padding:10px 18px;font-weight:700;font-size:0.95rem;white-space:nowrap;
  box-shadow:4px 4px 0 rgba(250,246,236,0.28);
}
.tag:nth-child(3n){background:var(--green-lite);}
.tag:nth-child(4n){background:var(--green);color:#fff;}
.skill-field.physics .tag{
  position:absolute;left:0;top:0;
  cursor:grab;user-select:none;-webkit-user-select:none;
  will-change:transform;touch-action:none;
  transition:box-shadow .2s ease;
}
.skill-field.physics .tag:hover{box-shadow:5px 6px 0 var(--green-lite);}
.skill-field.physics .tag.held{cursor:grabbing;box-shadow:7px 9px 0 var(--green-lite);z-index:5;}
@media(max-width:760px){
  .tag{font-size:0.86rem;padding:8px 14px;}
  .skill-field.physics{height:clamp(340px,70vw,440px);}
}

/* ---------- contact ---------- */
.contact{background:var(--cream);border-bottom:5px solid var(--ink);}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start;}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr;}}
.contact h2{font-size:clamp(2rem,5.5vw,3.4rem);}
.contact h2 .hl{color:var(--green);}
.contact .lede{font-size:1.08rem;font-weight:500;color:#2b2e29;max-width:34ch;margin-bottom:2rem;}

.contact-list{list-style:none;border-top:2px solid rgba(18,20,15,0.15);}
.contact-list li{
  display:flex;align-items:baseline;gap:1rem;
  padding:0.85rem 0;border-bottom:2px solid rgba(18,20,15,0.15);
  transition:padding-left .2s ease, background-color .2s ease;
}
.contact-list li:hover{padding-left:0.6rem;background:rgba(27,107,74,0.10);}
.contact-list .k{font-size:0.86rem;font-weight:700;color:#767a70;flex:none;width:5.5rem;}
.contact-list .v{font-weight:600;font-size:1rem;color:var(--ink);text-decoration:none;}
.contact-list a.v{
  color:var(--green);
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;
  transition:color .16s ease, text-underline-offset .16s ease;
}
.contact-list a.v:hover{color:var(--ink);text-underline-offset:5px;}

/* ---------- form ---------- */
.form-wrap{
  background:#fff;color:var(--ink);
  border:3px solid var(--ink);box-shadow:8px 8px 0 var(--green);
  padding:1.7rem clamp(1.1rem,3.5vw,1.9rem);
  transition:box-shadow .22s ease;
}
.form-wrap:hover{box-shadow:11px 11px 0 var(--green);}
.form-wrap h3{font-family:'Archivo Black',sans-serif;font-size:1.22rem;margin-bottom:0.35rem;letter-spacing:-0.01em;}
.form-wrap .sub{font-size:0.9rem;color:#666a62;margin-bottom:1.4rem;font-weight:500;}
.field{margin-bottom:1rem;}
.field label{display:block;font-weight:700;font-size:0.86rem;margin-bottom:0.4rem;color:#4a4e46;}
.field input,.field textarea{
  width:100%;font-family:inherit;font-size:1rem;
  padding:11px 13px;border:2px solid rgba(18,20,15,0.35);background:var(--cream);color:var(--ink);
  transition:border-color .16s ease, box-shadow .16s ease;
}
.field textarea{resize:vertical;min-height:110px;}
.field input:hover,.field textarea:hover{border-color:rgba(18,20,15,0.6);}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(27,107,74,0.35);
}
.form-wrap button{
  font-family:'Archivo Black',sans-serif;
  font-size:0.98rem;letter-spacing:-0.01em;width:100%;margin-top:0.4rem;
  padding:14px 26px;border:3px solid var(--ink);background:var(--green);color:#fff;
  box-shadow:5px 5px 0 var(--ink);cursor:pointer;
  transition:transform .16s cubic-bezier(.3,1.4,.5,1), box-shadow .16s ease;
}
.form-wrap button:hover{transform:translate(-2px,-3px);box-shadow:8px 9px 0 var(--green-lite);}
.form-wrap button:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink);}
.form-wrap button:disabled{opacity:0.6;cursor:progress;transform:none;box-shadow:5px 5px 0 var(--ink);}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form-note{margin-top:0.9rem;font-weight:700;font-size:0.92rem;}
.form-note.ok{color:var(--green);}
.form-note.err{color:#A8321A;}

.foot{padding-block:1.6rem;text-align:center;background:var(--ink);color:#83887c;font-size:0.82rem;}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .marquee span{animation:none !important;}
  *{transition:none !important;}
  .js-reveal .reveal{opacity:1 !important;animation:none !important;}
}

/* ---------- standalone message pages (thanks, 404) ----------
   Shared by thanks.html and 404.html. These used to carry their own inline copy
   of the palette, which had already drifted: --green was set to the light tint,
   putting the heading at 2.75:1 on cream. One source of truth avoids that. */
.msg-page{
  min-height:100vh;display:grid;place-items:center;padding:2rem 1.25rem;
  background:
    radial-gradient(circle at 85% 12%, rgba(63,169,107,0.30) 0 12%, transparent 46%),
    radial-gradient(circle at 8% 90%, rgba(27,107,74,0.26) 0 14%, transparent 50%),
    var(--cream);
}
.msg-card{
  background:var(--cream);border:3px solid var(--ink);box-shadow:9px 9px 0 var(--ink);
  padding:clamp(1.8rem,5vw,3rem);max-width:34rem;text-align:center;
}
.msg-card .mark{font-size:3rem;line-height:1;margin-bottom:1rem;}
.msg-card h1{
  font-family:'Archivo Black',sans-serif;
  font-size:clamp(1.8rem,6vw,2.8rem);line-height:0.95;letter-spacing:-0.02em;
  color:var(--green);-webkit-text-stroke:1.5px var(--ink);margin-bottom:0.9rem;
}
.msg-card p{font-size:1.05rem;font-weight:500;color:#2b2e29;margin-bottom:1.8rem;}
.msg-card .alt{margin-top:1.4rem;margin-bottom:0;font-size:0.9rem;color:#666a62;font-weight:600;}
.msg-card .alt a{color:var(--green);}

/* ---------- résumé page ----------
   Screen styling matches the site; the print block below turns the same markup
   into a clean document, so "Save as PDF" needs no separate committed file that
   could drift out of sync with this page. */
.resume-page{background:var(--cream);}
.resume{
  max-width:820px;margin:0 auto;
  padding:clamp(1.5rem,4vw,3rem) clamp(1.25rem,4vw,3rem) clamp(3rem,6vw,4rem);
}
.resume-back{
  display:inline-block;font-weight:700;font-size:0.9rem;color:var(--green);
  text-decoration:none;margin-bottom:1.8rem;
  border-bottom:2px solid transparent;transition:border-color .16s ease;
}
.resume-back:hover{border-bottom-color:var(--green);}

.resume-head{border-bottom:4px solid var(--ink);padding-bottom:1.3rem;margin-bottom:1.8rem;}
.resume-head h1{
  font-family:'Archivo Black',sans-serif;letter-spacing:-0.02em;line-height:0.96;
  font-size:clamp(2.1rem,6vw,3.2rem);
}
.resume-head .tagline{font-weight:600;color:var(--green);margin-top:0.35rem;font-size:1.02rem;}
.resume-contact{
  margin-top:0.9rem;display:flex;flex-wrap:wrap;gap:0.4rem 0.9rem;
  font-size:0.95rem;font-weight:600;color:#4a4e46;
}
.resume-contact a{color:var(--green);text-decoration:none;border-bottom:2px solid rgba(27,107,74,0.35);}
.resume-contact a:hover{border-bottom-color:var(--green);}
.resume-contact .sep{color:#a9ada4;}

.resume h2{
  font-family:'Archivo Black',sans-serif;letter-spacing:-0.01em;
  font-size:1.15rem;margin:2.2rem 0 1rem;
  padding-bottom:0.4rem;border-bottom:2px solid rgba(18,20,15,0.2);
}
.role-block{margin-bottom:1.5rem;break-inside:avoid;}
.role-block .rt{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0.3rem 1rem;align-items:baseline;}
.role-block .title{font-weight:700;font-size:1.02rem;}
.role-block .org{font-weight:600;color:var(--green);}
.role-block .dates{font-size:0.88rem;font-weight:600;color:#6b6f66;white-space:nowrap;}
.role-block ul{margin:0.55rem 0 0 1.15rem;}
.role-block li{font-size:0.95rem;margin-bottom:0.3rem;color:#2b2e29;}

.skill-line{font-size:0.95rem;color:#2b2e29;line-height:1.9;}
.skill-line strong{
  display:inline-block;background:var(--cream-2);border:2px solid rgba(18,20,15,0.25);
  padding:2px 10px;margin:0 4px 6px 0;font-weight:600;
}
.resume-actions{margin-top:2.4rem;display:flex;flex-wrap:wrap;gap:0.8rem;}
.resume-note{margin-top:1rem;font-size:0.85rem;color:#6b6f66;font-weight:500;}

/* ---------- print / save-as-PDF ----------
   Everything here is in pt so the page composes in print units rather than
   inheriting screen rem/clamp values. Break rules keep roles intact and stop a
   section heading being stranded at the foot of a page. */
@media print{
  @page{margin:13mm 14mm;}
  html,body,.resume-page{background:#fff !important;}
  body{font-size:10pt;line-height:1.4;}

  .resume{max-width:none;margin:0;padding:0;}
  .resume section{padding:0;margin:0;}
  .resume-back,.resume-actions,.resume-note{display:none !important;}

  .resume-head{border-bottom:2.5pt solid #000;padding-bottom:6pt;margin-bottom:10pt;}
  .resume-head h1{font-size:23pt;line-height:1;}
  .resume-head .tagline{font-size:10pt;margin-top:2pt;color:#000;}
  .resume-contact{font-size:9pt;margin-top:5pt;gap:1pt 8pt;color:#000;}
  .resume-contact a{border-bottom:none;color:#000;}
  .resume-contact .sep{color:#666;}

  .resume h2{
    font-size:11pt;margin:12pt 0 5pt;padding-bottom:2pt;
    border-bottom:1pt solid #999;
    break-after:avoid;page-break-after:avoid;
  }
  .resume section:first-of-type h2{margin-top:8pt;}

  .role-block{margin-bottom:7pt;break-inside:avoid;page-break-inside:avoid;}
  .role-block .rt{gap:0 8pt;}
  .role-block .title{font-size:10pt;}
  .role-block .org{font-size:10pt;color:#000 !important;}
  .role-block .dates{font-size:8.5pt;color:#333;}
  .role-block ul{margin:3pt 0 0 12pt;}
  .role-block li{font-size:9pt;line-height:1.3;margin-bottom:1pt;orphans:2;widows:2;}

  .skill-line{font-size:9pt;line-height:1.75;}
  .skill-line strong{border:0.75pt solid #666;padding:0.5pt 4pt;margin:0 3pt 3pt 0;}
}