/* ============================================================
   Elizaveta Arkhipova — portfolio
   Editorial dossier: navy ink on warm paper, tan hairlines.
   ============================================================ */

:root{
  /* paper */
  --paper:      #FAF8F5;
  --paper-2:    #F3EEE7;
  --white:      #FFFFFF;

  /* ink — blue is the lead colour */
  --blue:       #0E2A4D;
  --blue-mid:   #1C4E8A;
  --blue-soft:  #E3EAF2;
  --ink-2:      #3B4E66;
  --ink-mute:   #5A6B80;

  /* accent — light brown */
  --tan:        #B18E68;
  --tan-ink:    #96754F;
  --tan-soft:   #E9DDCE;

  --rule:       rgba(14,42,77,.13);
  --rule-tan:   rgba(177,142,104,.42);

  /* type */
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:    "Archivo", "Helvetica Neue", Helvetica, sans-serif;

  /* measure */
  --pad:  clamp(1.5rem, 5vw, 6rem);
  --maxw: 1240px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--blue);
  font-family:var(--sans);
  font-size:clamp(1rem,.96rem + .18vw,1.0625rem);
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* paper grain ------------------------------------------------ */
.grain{
  position:fixed; inset:0; z-index:9; pointer-events:none;
  opacity:.35; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--blue); color:var(--paper);
  padding:.75rem 1.25rem; font-size:.9rem;
}
.skip:focus{ left:0; }

:focus-visible{ outline:2px solid var(--blue-mid); outline-offset:3px; border-radius:1px; }

img{ max-width:100%; height:auto; display:block; }

/* ── icons ─────────────────────────────────────────────────── */
/* hidden this way rather than display:none so <use> resolves everywhere */
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.ico{
  flex:none; width:15px; height:15px;
  fill:none; stroke:currentColor; stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round;
}

h1,h2,h3{ font-family:var(--display); font-weight:400; margin:0; }

/* small-caps label ------------------------------------------- */
/* buttons that read as links (the CV print trigger) */
button.lnk,.foot__links button{
  appearance:none; background:none; border:0; border-radius:0;
  margin:0; cursor:pointer; color:inherit;
}
/* re-assert the link underline the reset above would otherwise strip */
button.lnk{ border-bottom:1px solid var(--rule-tan); }
button.lnk:hover{ border-bottom-color:var(--blue); }

.eyebrow,.cap,.lbl,.yr,.masthead nav a,.actions .lnk,.colophon,.foot__links button{
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
}

/* ── masthead ──────────────────────────────────────────────── */
.masthead{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem;
  padding:1.5rem var(--pad);
  max-width:var(--maxw); margin-inline:auto;
}
.mark{
  font-family:var(--display); font-size:1.05rem; font-weight:500;
  letter-spacing:.06em; color:var(--blue);
}
.masthead nav{ display:flex; gap:clamp(1rem,2.4vw,2.25rem); }
.masthead nav a{
  color:var(--ink-mute); text-decoration:none;
  padding-bottom:2px; background-image:linear-gradient(var(--tan),var(--tan));
  background-size:0 1px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .38s var(--ease), color .3s var(--ease);
}
.masthead nav a:hover{ color:var(--blue); background-size:100% 1px; }
@media (max-width:620px){ .masthead nav{ display:none; } }

/* ── hero ──────────────────────────────────────────────────── */
.hero{
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(2.5rem,7vw,6rem) var(--pad) clamp(3rem,7vw,6rem);
  display:grid; gap:clamp(2.5rem,5vw,4.5rem);
  grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);
  align-items:center;
}
@media (max-width:900px){
  .hero{ grid-template-columns:1fr; gap:2.5rem; }
}

.eyebrow{ color:var(--tan-ink); margin:0 0 1.5rem; }

h1{
  font-size:clamp(3.1rem,10.5vw,7.4rem);
  line-height:.86;
  letter-spacing:-.035em;
  margin:0 0 clamp(1.75rem,3vw,2.5rem);
  font-variation-settings:"opsz" 144;
}
h1 .given{ display:block; font-weight:300; color:var(--blue); }
h1 .family{ display:block; font-weight:500; color:var(--blue); text-indent:.06em; }

.lede{
  font-family:var(--display);
  font-size:clamp(1.15rem,1.5vw,1.42rem);
  font-weight:300; line-height:1.55; color:var(--ink-2);
  max-width:34ch; margin:0 0 1.75rem;
}
.lede em{ font-style:normal; font-weight:500; color:var(--blue); }

.meta{
  display:flex; align-items:center; flex-wrap:wrap; gap:.85rem;
  margin:0 0 2rem; font-size:.9rem; color:var(--ink-mute);
}
.meta .dot{ width:3px; height:3px; border-radius:50%; background:var(--tan); }
.meta .avail{ color:var(--tan-ink); font-weight:500; }

.actions{ display:flex; flex-wrap:wrap; gap:clamp(1.25rem,3vw,2.25rem); margin:0; }
.lnk{
  display:inline-flex; align-items:center; gap:.55rem;
  color:var(--blue); text-decoration:none; padding-bottom:4px;
  border-bottom:1px solid var(--rule-tan);
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.lnk:hover{ border-color:var(--blue); color:var(--blue-mid); }
.lnk .ico{ width:14px; height:14px; color:var(--tan-ink); transition:color .3s var(--ease); }
.lnk:hover .ico{ color:var(--blue-mid); }

/* portrait, with an offset register frame */
.hero__portrait{ position:relative; margin:0; justify-self:end; width:100%; }
.hero__portrait img{
  position:relative; z-index:1; width:100%; aspect-ratio:1/1;
  object-fit:cover; object-position:center 22%;
  background:var(--tan-soft);
  filter:saturate(.94) contrast(1.02);
}
.hero__portrait .frame{
  position:absolute; inset:0; z-index:0;
  transform:translate(clamp(10px,1.6vw,20px),clamp(10px,1.6vw,20px));
  border:1px solid var(--rule-tan);
}

/* stacked layouts: portrait leads, aligned to the text column */
@media (max-width:900px){
  .hero__portrait{ order:-1; max-width:260px; justify-self:start; }
}
/* on phones the name leads; the portrait shrinks to a plate */
@media (max-width:620px){
  .hero{ gap:2rem; padding-top:1rem; }
  .hero__portrait{ max-width:128px; }
  .hero__portrait .frame{ transform:translate(8px,8px); }
}

/* ── stats ─────────────────────────────────────────────────── */
.stats{
  background:var(--paper-2);
  border-block:1px solid var(--rule);
  display:grid; grid-template-columns:repeat(4,1fr);
}
.stat{
  padding:clamp(1.75rem,3.5vw,2.75rem) clamp(.85rem,2vw,1.75rem);
  text-align:center; border-left:1px solid var(--rule);
}
.stat:first-child{ border-left:0; }
@media (max-width:720px){
  .stats{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(3){ border-left:0; }
  .stat:nth-child(n+3){ border-top:1px solid var(--rule); }
}
.fig{
  display:block; font-family:var(--display); font-weight:300;
  font-size:clamp(2.5rem,5.2vw,3.85rem); line-height:1;
  letter-spacing:-.03em; color:var(--blue);
  font-variation-settings:"opsz" 144;
}
.fig i{
  font-style:normal; font-size:.46em; font-weight:500;
  color:var(--tan-ink); vertical-align:.72em; margin-left:.04em;
}
.cap{ display:block; margin-top:.85rem; color:var(--ink-mute); font-size:.68rem; }

/* ── section shell ─────────────────────────────────────────── */
.band{
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(3.5rem,8vw,7rem) var(--pad);
}
.band + .band{ border-top:1px solid var(--rule); }

.head{
  display:flex; align-items:baseline; gap:1.25rem;
  margin-bottom:clamp(2.25rem,4vw,3.5rem);
}
.head .num{
  font-family:var(--display); font-weight:500; font-size:1.15rem;
  color:var(--tan-ink); letter-spacing:.02em;
}
.head h2{
  font-size:clamp(1.55rem,3vw,2.1rem); font-weight:400;
  letter-spacing:-.02em; white-space:nowrap;
}
.head .rule{ flex:1; height:1px; background:var(--rule); }

/* ── about ─────────────────────────────────────────────────── */
.about{
  display:grid; gap:clamp(2rem,5vw,4rem);
  grid-template-columns:minmax(0,1.55fr) minmax(0,.8fr);
  align-items:start;
}
@media (max-width:820px){
  .about{ grid-template-columns:1fr; }
  .about__img{ max-width:320px; }
}

.about__img{ position:relative; margin:0; }
.about__img img{
  position:relative; z-index:1; width:100%; aspect-ratio:3/4;
  object-fit:cover; object-position:center 30%;
  background:var(--tan-soft);
  filter:saturate(.94) contrast(1.02);
}
/* frame offsets left here, mirroring the hero's right offset */
.about__img .frame{
  position:absolute; inset:0; z-index:0;
  transform:translate(calc(-1 * clamp(8px,1.2vw,16px)),clamp(8px,1.2vw,16px));
  border:1px solid var(--rule-tan);
}

.prose{ max-width:60ch; }
.prose p{ margin:0 0 1.35rem; color:var(--ink-2); }
.prose p:last-child{ margin-bottom:0; }
.prose .big{
  font-family:var(--display); font-weight:300;
  font-size:clamp(1.3rem,2.1vw,1.72rem); line-height:1.45;
  color:var(--blue); margin-bottom:1.85rem; letter-spacing:-.01em;
}

/* ── experience ────────────────────────────────────────────── */
.roles{ list-style:none; margin:0; padding:0; counter-reset:none; }
.role{
  display:grid; grid-template-columns:9.5rem 1fr; gap:clamp(1rem,3vw,2.5rem);
  padding:clamp(1.5rem,2.6vw,2.1rem) 0 clamp(1.5rem,2.6vw,2.1rem) 1.1rem;
  border-top:1px solid var(--rule);
  position:relative;
  transition:background-color .4s var(--ease);
}
.role:last-child{ border-bottom:1px solid var(--rule); }
.role::before{
  content:""; position:absolute; left:0; top:-1px; bottom:0; width:2px;
  background:var(--tan); transform:scaleY(0); transform-origin:top;
  transition:transform .45s var(--ease);
}
.role:hover{ background:rgba(233,221,206,.28); }
.role:hover::before{ transform:scaleY(1); }
.role .body{ transition:transform .45s var(--ease); }
.role:hover .body{ transform:translateX(5px); }

@media (max-width:720px){
  .role{ grid-template-columns:1fr; gap:.6rem; }
}

.yr{
  color:var(--ink-mute); padding-top:.55rem; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.yr i{ font-style:normal; color:var(--tan-ink); }
/* tenure — the "how long was she there" answer, without doing the maths */
.dur{
  display:block; margin-top:.35rem;
  font-weight:400; font-size:.64rem; letter-spacing:.11em;
  color:var(--tan-ink);
}

/* employer mark: monogram by default, swap in <img> for a real logo */
.role__top{ display:flex; align-items:flex-start; gap:1rem; margin-bottom:.75rem; }
.logo{
  flex:none; width:44px; height:44px; display:grid; place-items:center;
  border:1px solid var(--rule-tan); background:var(--white);
  font-family:var(--display); font-weight:500; font-size:.95rem; line-height:1;
  color:var(--blue);
  transition:border-color .4s var(--ease), background-color .4s var(--ease);
}
.logo img{
  width:100%; height:100%; object-fit:contain; padding:7px;
  filter:grayscale(1); opacity:.9;
}
.role:hover .logo{ border-color:var(--tan); background:var(--paper); }
@media (max-width:720px){ .logo{ width:38px; height:38px; font-size:.85rem; } }

.role h3{
  font-size:clamp(1.3rem,2vw,1.6rem); font-weight:400;
  letter-spacing:-.015em; line-height:1.2; margin-bottom:.35rem;
}
.org{
  margin:0 0 .7rem; font-size:.92rem; font-weight:500;
  letter-spacing:.01em; color:var(--blue-mid);
}
.role__top .org{ margin-bottom:0; }
.org span{ font-weight:400; color:var(--ink-mute); letter-spacing:0; }
.desc{ margin:0; color:var(--ink-2); max-width:58ch; font-size:.97rem; }

/* clickable role: opens the detailed breakdown in a centred overlay */
.role--modal{ cursor:pointer; }
.more{
  display:inline-flex; align-items:center; gap:.5rem;
  margin-top:.9rem; padding:0; border:0; background:none; cursor:pointer;
  font-family:var(--sans); font-size:.68rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--tan-ink);
  transition:color .3s var(--ease);
}
.more .ico{ width:13px; height:13px; color:var(--tan); }
.role--modal:hover .more{ color:var(--blue-mid); }

.rolemodal{
  width:min(680px, calc(100vw - 2.5rem));
  max-height:min(84vh, 46rem);
  margin:auto; padding:clamp(1.6rem, 4vw, 2.6rem);
  border:1px solid var(--rule-tan); background:var(--paper); color:var(--blue);
  box-shadow:0 24px 80px rgba(14,42,77,.28);
  overflow-y:auto;
}
.rolemodal::backdrop{ background:rgba(14,42,77,.45); backdrop-filter:blur(3px); }
body:has(.rolemodal[open]){ overflow:hidden; }

.rolemodal__close{
  position:sticky; top:0; float:right; z-index:1;
  width:34px; height:34px; display:grid; place-items:center;
  margin:-.4rem -.4rem 0 0; padding:0; border:0; background:none;
  cursor:pointer; color:var(--tan-ink);
  transition:color .3s var(--ease);
}
.rolemodal__close:hover{ color:var(--blue); }
.rolemodal__close .ico{ width:16px; height:16px; transform:rotate(45deg); }

.rolemodal__head{ display:flex; align-items:flex-start; gap:1rem; margin-bottom:1.5rem; }
.rolemodal__head h3{
  font-size:1.45rem; font-weight:400;
  letter-spacing:-.015em; line-height:1.2; margin:0 0 .3rem;
}
.rolemodal__yr{
  margin:.55rem 0 0; font-size:.64rem; font-weight:500;
  letter-spacing:.11em; text-transform:uppercase; color:var(--tan-ink);
}

.rolemodal__lbl{ margin:0 0 .6rem; color:var(--tan-ink); }
.rolemodal__tags{ display:flex; flex-wrap:wrap; gap:.45rem; margin:0 0 1.6rem; }
.rolemodal__tags span{
  padding:.26rem .75rem; border:1px solid var(--rule-tan); border-radius:999px;
  background:var(--white); font-size:.66rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--tan-ink);
}

/* delivered | result — the breakdown as a results table.
   The result column is a tinted strip of stat figures so the two
   columns read differently at a glance. */
.outcomes__cols{
  display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:0;
  font-size:.64rem; color:var(--tan-ink);
  padding-bottom:.55rem; border-bottom:1px solid var(--rule-tan);
}
.outcomes__cols span:last-child{ padding-left:calc(.9rem + 1px); }
.outcomes{ margin:0; }
.outcomes > div{
  display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:0;
  border-bottom:1px solid rgba(14,42,77,.06);
}
.outcomes > div:last-child{ border-bottom:0; }
.outcomes dt{
  padding:.8rem 1.1rem .8rem 0;
  color:var(--ink-2); font-size:.92rem; line-height:1.55;
}
.outcomes dd{
  margin:0; padding:.8rem .9rem;
  background:var(--paper-2); border-left:1px solid var(--rule-tan);
}
.outcomes dd b{
  display:block; font-family:var(--display); font-weight:500;
  font-size:1.35rem; line-height:1.1; letter-spacing:-.01em; color:var(--blue);
}
.outcomes dd span{
  display:block; margin-top:.25rem;
  font-size:.74rem; line-height:1.45; color:var(--ink-mute);
}
@media (max-width:560px){
  .outcomes__cols{ display:none; }
  .outcomes > div{ grid-template-columns:1fr; }
  .outcomes dt{ padding:.75rem 0 .5rem; }
  .outcomes dd{ padding:.6rem .75rem; }
}
@media (prefers-reduced-motion:no-preference){
  .rolemodal[open]{ animation:modal-in .35s var(--ease); }
  @keyframes modal-in{ from{ opacity:0; transform:translateY(14px); } }
}

/* ── expertise ─────────────────────────────────────────────── */
.skills{
  display:grid; gap:clamp(1.75rem,3.5vw,2.75rem);
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}
.skill{ border-top:1px solid var(--rule-tan); padding-top:1.15rem; }
.skill h3{
  display:flex; align-items:center; gap:.55rem;
  font-family:var(--sans); font-size:.72rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--tan-ink); margin-bottom:1rem;
}
.skill h3 .ico{ stroke-width:1.3; color:var(--tan); }
.skill ul{ list-style:none; margin:0; padding:0; }
.skill li{
  padding:.42rem 0; color:var(--ink-2); font-size:.96rem;
  border-bottom:1px solid rgba(14,42,77,.06);
}
.skill li:last-child{ border-bottom:0; }

/* ── education ─────────────────────────────────────────────── */
.split{
  display:grid; gap:clamp(2.5rem,5vw,4.5rem);
  grid-template-columns:minmax(0,1.65fr) minmax(0,.8fr);
}
@media (max-width:820px){ .split{ grid-template-columns:1fr; } }

.deg{
  display:grid; grid-template-columns:9.5rem 1fr; gap:clamp(1rem,3vw,2.5rem);
  padding:1.45rem 0; border-top:1px solid var(--rule);
}
.deg:last-child{ border-bottom:1px solid var(--rule); }
@media (max-width:720px){ .deg{ grid-template-columns:1fr; gap:.55rem; } }
.deg h3{ font-size:1.2rem; font-weight:400; letter-spacing:-.01em; margin-bottom:.3rem; }
.deg .org{ margin-bottom:.25rem; }
.deg .desc{ font-size:.9rem; color:var(--ink-mute); }

.langs .lbl{
  font-family:var(--sans); color:var(--tan-ink); font-weight:600;
  margin:0 0 1.15rem; padding-top:1.45rem;
}
.langs dl{ margin:0; }
.langs dl > div{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.7rem 0; border-top:1px solid var(--rule);
}
.langs dt{ font-family:var(--display); font-size:1.08rem; color:var(--blue); }
.langs dd{ margin:0; font-size:.82rem; color:var(--ink-mute); }

/* ── contact ───────────────────────────────────────────────── */
#contact{
  background:var(--blue); color:var(--paper);
  margin-top:clamp(2rem,5vw,4rem);
}
.foot{
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(4rem,9vw,7.5rem) var(--pad) clamp(2.5rem,5vw,3.5rem);
}
.foot .eyebrow{ color:var(--tan); margin-bottom:1.5rem; }
.foot h2{
  font-size:clamp(2.6rem,8vw,5.2rem); font-weight:300; line-height:.95;
  letter-spacing:-.035em; color:var(--paper);
  margin-bottom:clamp(2rem,4vw,3rem);
  font-variation-settings:"opsz" 144;
}
.mail{
  display:inline-block;
  font-family:var(--display); font-weight:300;
  font-size:clamp(1.2rem,3.1vw,2.05rem);
  letter-spacing:-.02em; color:var(--paper); text-decoration:none;
  padding-bottom:.3rem;
  background-image:linear-gradient(var(--tan),var(--tan));
  background-size:100% 1px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .5s var(--ease), color .35s var(--ease);
}
.mail:hover{ background-size:0 1px; color:var(--tan); }

.foot__links{ display:flex; gap:2rem; margin:2.75rem 0 0; }
.foot__links a,.foot__links button{
  display:inline-flex; align-items:center; gap:.5rem;
  color:rgba(250,248,245,.72); text-decoration:none;
  font-size:.72rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  padding-bottom:3px; border-bottom:1px solid rgba(177,142,104,.5);
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.foot__links a:hover,.foot__links button:hover{ color:var(--paper); border-color:var(--tan); }
.foot__links .ico{ width:13px; height:13px; color:var(--tan); }

.colophon{
  margin:clamp(3.5rem,7vw,5.5rem) 0 0;
  padding-top:1.5rem; border-top:1px solid rgba(250,248,245,.14);
  color:rgba(250,248,245,.45); font-size:.66rem;
}

/* ── reveal ────────────────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(14px); }
.reveal.in{
  opacity:1; transform:none;
  transition:opacity .85s var(--ease) var(--d,0ms), transform .85s var(--ease) var(--d,0ms);
}
.band > *, .stats .stat{ opacity:0; transform:translateY(16px); }
.band.in > *, .stats.in .stat{
  opacity:1; transform:none;
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.band.in > *:nth-child(2){ transition-delay:.1s; }
.stats.in .stat:nth-child(2){ transition-delay:.07s; }
.stats.in .stat:nth-child(3){ transition-delay:.14s; }
.stats.in .stat:nth-child(4){ transition-delay:.21s; }

/* about photo: unveils bottom-up and settles from a slight zoom, then the frame slides out */
.about__img img{ clip-path:inset(100% 0 0 0); transform:scale(1.06); }
.about__img .frame{ opacity:0; transform:none; }
.about__img.in img{
  clip-path:inset(0); transform:none;
  transition:clip-path 1.4s var(--ease), transform 2s var(--ease);
}
.about__img.in .frame{
  opacity:1;
  transform:translate(calc(-1 * clamp(8px,1.2vw,16px)),clamp(8px,1.2vw,16px));
  transition:opacity .9s var(--ease) .7s, transform 1.1s var(--ease) .7s;
}

@media (prefers-reduced-motion:reduce){
  .reveal,.band > *,.stats .stat{ opacity:1 !important; transform:none !important; }
  .about__img img{ clip-path:none !important; transform:none !important; }
  .about__img .frame{ opacity:1 !important; }
  *,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

/* ── print: page doubles as a one-page CV ──────────────────── */
@media print{
  @page{ margin:14mm; }
  .grain,.masthead,.hero__portrait,.skip{ display:none !important; }
  body{ background:#fff; color:#000; font-size:10pt; line-height:1.4; }
  .reveal,.band > *,.stats .stat{ opacity:1 !important; transform:none !important; }
  .hero{ display:block; padding:0 0 12pt; }
  h1{ font-size:30pt; margin-bottom:8pt; }
  .lede{ font-size:11pt; max-width:none; margin-bottom:8pt; }
  .actions{ gap:1rem; }
  .lnk{ border:0; font-size:8pt; }
  .band{ padding:12pt 0; page-break-inside:avoid; }
  .band + .band{ border-top:.5pt solid #999; }
  .stats{ background:none; border-block:.5pt solid #999; }
  .stat{ padding:8pt 4pt; border-left:.5pt solid #999; }
  .fig{ font-size:20pt; }
  .role,.deg{ page-break-inside:avoid; padding:8pt 0 8pt 0; }
  .role::before{ display:none; }
  .about{ display:block; }
  .about__img{ display:none !important; }
  .logo{ width:26pt; height:26pt; font-size:8pt; }
  .role__top{ gap:8pt; margin-bottom:4pt; }
  .more{ display:none; }
  .rolemodal{
    display:block; position:static; width:auto; max-height:none;
    margin:0; padding:0; border:0; box-shadow:none; overflow:visible;
  }
  .rolemodal__close,.rolemodal__head,.outcomes__cols{ display:none; }
  .rolemodal__lbl{ margin:6pt 0 2pt; font-size:7pt; color:#000; }
  .rolemodal__tags{ gap:3pt; margin:0 0 4pt; }
  .rolemodal__tags span{
    border:.5pt solid #999; border-radius:6pt; padding:1pt 5pt;
    font-size:7pt; color:#000; background:none;
  }
  .outcomes > div{ border-bottom:0; }
  .outcomes dt{ padding:2pt 8pt 2pt 0; font-size:9pt; line-height:1.35; color:#000; }
  .outcomes dd{ padding:2pt 0; background:none; border-left:0; }
  .outcomes dd b{
    display:inline; font-family:inherit; font-size:9pt; font-weight:600; color:#000;
  }
  .outcomes dd span{ display:inline; margin:0; font-size:9pt; color:#000; }
  .prose{ margin-left:0; max-width:none; }
  #contact{ background:none; color:#000; margin-top:12pt; }
  .foot{ padding:12pt 0 0; }
  .foot h2,.colophon,.foot__links{ display:none; }
  .foot .eyebrow,.mail{ color:#000; }
  a{ color:#000 !important; }
}