/* About (research, experience, awards, education) and Résumé — draft 10/16, linked from the first screen of the home.
   On top of home.css (tokens, nav, footer). Class prefix ab- (about) and cv- (résumé). */

/* ---------- About ---------- */
.ab{padding:calc(var(--nav) + clamp(40px,8vh,88px)) 0 clamp(56px,9vh,96px)}
.ab h1{font-size:clamp(40px,5vw,64px);line-height:1.04;letter-spacing:-.036em}
.ab__lead{max-width:36em;margin:18px 0 0;font-size:clamp(18px,1.6vw,21px);line-height:1.5;color:var(--ink-2)}
.ab__lead a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}

/* every section: its name on the left, the content on the right */
.ab__sec{display:grid;grid-template-columns:clamp(150px,18vw,220px) minmax(0,1fr);gap:16px 32px;padding:clamp(34px,5vh,52px) 0;border-top:1px solid var(--line);scroll-margin-top:var(--nav)}
.ab__sec:first-of-type{margin-top:clamp(40px,7vh,72px)}
.ab__sec > h2{font-size:21px;line-height:1.3;letter-spacing:-.02em}
.ab__body{min-width:0;max-width:720px}
.ab__body > p{margin:0 0 14px;font-size:17px;line-height:1.6;color:var(--ink-2)}
.ab__body > p b,.ab__body > p a{color:var(--ink);font-weight:500}
.ab__body > p a{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.ab__body > p a:hover{text-decoration-color:currentColor}
.ab__q{margin:0 0 14px;font-size:clamp(26px,2.8vw,34px);line-height:1.15;letter-spacing:-.03em}

/* Research: the five questions */
.ab__qs{list-style:none;margin:22px 0 24px;padding:0;border-top:1px solid var(--line)}
.ab__qs li{display:grid;grid-template-columns:9em minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:16px;line-height:1.45}
.ab__qs b{font-weight:600}
.ab__qs span{color:var(--ink-2)}

/* Experience: one entry per role */
.ab__sub{margin:6px 0 4px;font:600 13px/1.4 var(--display);color:var(--ink-2)}
.ab__sub + .ab__job{border-top:0}
.ab__job{display:grid;grid-template-columns:8.6em minmax(0,1fr);gap:6px 20px;padding:18px 0;border-top:1px solid var(--line)}
.ab__when{font-size:14px;line-height:1.5;color:var(--ink-2);font-variant-numeric:tabular-nums}
.ab__job h3{margin:0;font:600 17px/1.35 var(--display);letter-spacing:-.01em}
.ab__job h3 span{font-weight:400;color:var(--ink-2)}
.ab__job p{margin:4px 0 0;font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.ab__job p a{color:var(--ink);font-weight:500;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.ab__job p a:hover{text-decoration-color:currentColor}
.ab__subhead{margin:26px 0 0;font:600 13px/1.4 var(--display);color:var(--ink-2)}
.ab__subhead:first-child{margin-top:0}

/* Awards: the official logos, then what each project won */
.ab__logos{display:flex;flex-wrap:wrap;align-items:center;gap:20px 34px;margin:4px 0 26px}
.ab__logos img{width:auto;height:calc(var(--s,1) * 52px)}
.ab__wins{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ab__wins li{display:grid;grid-template-columns:8.6em minmax(0,1fr);gap:20px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15.5px;line-height:1.5}
.ab__wins b{font-weight:600}
.ab__wins b a:hover{text-decoration:underline;text-underline-offset:3px}
.ab__wins span{color:var(--ink-2)}

.ab__links{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.ab__links a{display:inline-flex;align-items:center;height:38px;padding:0 16px;border-radius:999px;font:500 14px/1 var(--display);background:var(--tile);transition:opacity .2s}
.ab__links a.dark{background:var(--ink);color:var(--bg)}
.ab__links a:hover{opacity:.8}

@media (max-width:760px){
  .ab__sec{grid-template-columns:1fr;gap:14px}
  .ab__job,.ab__wins li{grid-template-columns:1fr;gap:2px}
  .ab__qs li{grid-template-columns:1fr;gap:2px}
}

/* ---------- Résumé: a Letter page on screen, the same page in print ---------- */
.cv-page{padding:calc(var(--nav) + 28px) 0 64px;background:var(--tile)}
.cv-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;max-width:816px;margin:0 auto 16px;padding:0 4px}
.cv-bar p{margin:0;font-size:14px;color:var(--ink-2)}
.cv-bar button{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 18px;border:0;border-radius:999px;cursor:pointer;
  font:500 14px/1 var(--display);background:var(--ink);color:var(--bg)}
.cv-bar button:hover{opacity:.82}
.cv-bar svg{width:16px;height:16px}
.cv{box-sizing:border-box;width:816px;max-width:100%;min-height:1056px;margin:0 auto;padding:46px 54px 40px;background:#fff;color:#1d1d1f;
  box-shadow:0 0 0 .5px rgba(0,0,0,.08),0 24px 60px -24px rgba(0,0,0,.25);font-size:11.4px;line-height:1.42;color-scheme:light}
.cv h1{font-size:27px;letter-spacing:-.03em;line-height:1.1;color:#1d1d1f}
.cv__contact{margin:5px 0 0;color:#6e6e73;font-size:11.4px}
.cv__contact a{color:#1d1d1f}
.cv__contact span+span::before{content:"|";margin:0 9px;color:#d2d2d7}
.cv__line{margin:9px 0 0;font-size:12.4px;color:#1d1d1f}
.cv h2{margin:17px 0 6px;padding-bottom:4px;border-bottom:1px solid #d2d2d7;font-size:12.4px;letter-spacing:-.005em;color:#1d1d1f}
.cv__it{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 14px;margin:0 0 7px}
.cv__it h3{margin:0;font:600 11.6px/1.4 var(--display);color:#1d1d1f}
.cv__it h3 span{font-weight:400;color:#6e6e73}
.cv__it time{font-size:11px;color:#6e6e73;white-space:nowrap;font-variant-numeric:tabular-nums}
.cv__it ul{grid-column:1 / -1;margin:2px 0 0;padding:0 0 0 13px}
.cv__it li{margin:0 0 1px}
.cv__it p{grid-column:1 / -1;margin:1px 0 0;color:#424245}
.cv__cols{display:grid;grid-template-columns:1fr 1fr;gap:0 26px}
.cv__list{margin:0;padding:0;list-style:none}
.cv__list li{margin:0 0 3px}
.cv__list b{font-weight:600}
.cv__list span{color:#424245}

@media screen and (max-width:860px){
  .cv-page{background:var(--bg);padding-top:calc(var(--nav) + 16px)}
  .cv{width:auto;min-height:0;margin:0 var(--gutter);padding:28px 22px;font-size:13.5px;box-shadow:0 0 0 .5px rgba(0,0,0,.1)}
  .cv h1{font-size:28px}
  .cv__contact,.cv__line{font-size:13.5px}
  .cv__contact span{display:block}
  .cv__contact span+span::before{content:none}
  .cv h2{font-size:14px}
  .cv__it{grid-template-columns:1fr}
  .cv__it h3{font-size:14px}
  .cv__it time{font-size:13px}
  .cv__cols{grid-template-columns:1fr}
  .cv-bar{margin:0 var(--gutter) 14px;padding:0}
}
@media print{
  @page{size:letter;margin:0}
  html,body{background:#fff!important}
  .nav,footer,.cv-bar{display:none!important}
  .cv-page{padding:0;background:#fff}
  .cv{width:8.5in;min-height:0;height:11in;margin:0;box-shadow:none;overflow:hidden}
}