/* Résumé in the portfolio's look (concept F, Ciridae): the void page around a bone sheet so it
   prints as paper, Barlow Semi Condensed headings, Inter body.
   The base rules and the print block are the one-page Letter print (Roboto Mono labels, hairlines,
   one ember line under the name). On screen, the block at the end ("Screen, TasteSkill") overrides
   them: Inter for every label, sentence case, 16px body, no rules, a tone step for the side column.
   Every screen change lives in @media screen so the print layout cannot move. */
@font-face{font-family:"Barlow Semi Condensed";src:url("../fonts/barlow-semi-condensed-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-latin.woff2") format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Roboto Mono";src:url("../fonts/roboto-mono-400.woff2") format("woff2");font-weight:400;font-display:swap}

:root{
  --void:#0b0b0b; --bone:#edebe7; --ink:#141414; --ink-2:#4a4845; --rule:rgba(20,20,20,.16); --ember:#cc6437;
  --cond:"Barlow Semi Condensed","Barlow Condensed",sans-serif; --prose:"Inter",system-ui,sans-serif; --mono:"Roboto Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--void);color-scheme:light}
body{font:400 13px/1.5 var(--prose);color:var(--ink);padding:88px 20px 64px}
a{color:inherit}
b{font-weight:600}
:focus-visible{outline:1px solid var(--ember);outline-offset:3px}

.bar{position:fixed;top:16px;left:16px;right:16px;z-index:10;display:flex;justify-content:space-between;gap:12px}
.pill{display:inline-flex;align-items:center;min-height:44px;padding:10px 20px;border:1px solid #fff;border-radius:1440px;background:var(--void);
  color:#fff;font:400 12px/1 var(--mono);letter-spacing:.02em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background-color .3s,color .3s}
.pill:hover,.pill--solid{background:#fff;color:var(--void)}
.pill--solid:hover{background:var(--void);color:#fff}

.page{max-width:900px;margin:0 auto;padding:52px 56px 40px;background:var(--bone);border-radius:10px}

.r-head{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;padding-bottom:26px;border-bottom:1px solid var(--ember)}
.r-photo{width:96px;height:96px;border-radius:50%;object-fit:cover;filter:grayscale(1)}
.r-name{font:400 56px/.9 var(--cond);letter-spacing:-.02em;text-transform:uppercase}
.r-role{margin-top:8px;font:400 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.r-contact{list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px;font-size:12px;color:var(--ink-2)}
.r-contact a{text-decoration:none;border-bottom:1px solid var(--rule)}
.r-contact a:hover{border-color:var(--ember)}

.r-body{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:40px;margin-top:28px}
.r-h{margin:26px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--rule);font:400 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.r-main>.r-h:first-child,.r-side>.r-h:first-child{margin-top:0}
.r-summary{font-size:13.5px;line-height:1.55}

.job+.job{margin-top:18px}
.job-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 12px}
.job-title{font:400 19px/1.1 var(--cond);letter-spacing:-.01em;text-transform:uppercase}
.job-title span{color:var(--ink-2)}
.job-date{font:400 10.5px/1.2 var(--mono);color:var(--ink-2)}
.job ul{margin-top:7px;padding-left:16px}
.job li{margin-top:4px}
.job li::marker{color:var(--ember)}

.proj+.proj{margin-top:12px}
.proj h3{font:400 17px/1.1 var(--cond);text-transform:uppercase}
.proj p{margin-top:3px;font-size:12px;line-height:1.45;color:var(--ink-2)}
.proj .fig{font:400 10.5px/1.3 var(--mono);color:var(--ink)}
.proj .fig b{font:400 15px/1 var(--cond);margin-right:2px}
.list{list-style:none;display:grid;gap:6px;font-size:12px;line-height:1.4;color:var(--ink-2)}
.list b{color:var(--ink);font-weight:600}
.list a{text-decoration:none}
.list a:hover b{border-bottom:1px solid var(--ember)}
.tools{font:400 10.5px/1.6 var(--mono);color:var(--ink)}
.blk{font-size:12px;line-height:1.45}
.mute{color:var(--ink-2)}

.r-foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:32px;padding-top:14px;border-top:1px solid var(--rule);
  font:400 10.5px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.r-foot a{text-decoration:none}

@media (max-width:760px){
  body{padding:80px 10px 40px}
  .page{padding:32px 22px}
  .r-head{grid-template-columns:1fr;gap:16px}
  .r-name{font-size:44px}
  .r-body{grid-template-columns:1fr;gap:0}
  .r-side{margin-top:26px}
}

/* on screen the links get bigger tap targets, the extra height taken back by a negative margin so the
   sheet lays out as it prints. The footer link has the room for 44px; the contact rows and the project
   list are dense, so their targets stop at the row pitch (24px or more, the WCAG 2.2 AA floor) and never overlap */
@media screen{
  .r-foot a{display:inline-block;padding:17px 0;margin:-17px 0}
  .r-contact{row-gap:10px}
  .r-contact a{display:inline-block;padding:4px 0;margin:-4px 0}
  .list{gap:8px}
  .list a{display:inline-block;padding:4px 0;margin:-4px 0}
}
@media screen and (max-width:760px){
  .job-date,.proj .fig,.tools,.r-foot{font-size:12px}
  .r-contact{font-size:13px}
}

@media print{
  @page{size:letter;margin:.38in .42in}
  html{background:#fff}
  body{padding:0;font-size:10.4px;line-height:1.38}
  .bar{display:none}
  .page{max-width:none;padding:0;background:#fff;border-radius:0}
  .r-head{grid-template-columns:auto 1fr;gap:22px;padding-bottom:18px}
  .r-photo{width:78px;height:78px}
  .r-name{font-size:42px}
  .r-contact{margin-top:10px;font-size:10.5px}
  .r-body{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:26px;margin-top:18px}
  .r-side{margin-top:0}
  .r-h{margin:13px 0 7px;padding-bottom:5px}
  .r-summary{font-size:10.6px;line-height:1.42}
  .job+.job{margin-top:12px}
  .job li{margin-top:2px}
  .job-title{font-size:15px}
  .job ul{margin-top:4px}
  .proj p,.list,.blk{font-size:9.8px;line-height:1.38}
  .proj h3{font-size:15px}
  .list{gap:4px}
  .tools{font-size:9.5px;line-height:1.5}
  .proj+.proj{margin-top:8px}
  .r-foot{margin-top:18px}
  .job,.proj{break-inside:avoid}
  a{text-decoration:none}
}

/* Screen, TasteSkill (2026-10-16). Print never sees any of this.
   One text face for every label (Inter, tabular figures), sentence case, nothing under 13px,
   body at 16px; the display face stays on the name and titles. No rules or outlines: space
   separates the sections and the side column sits on one tone step darker than the sheet.
   The name is set at display size so the first screen has one thing that leads. */
@media screen{
  html{scroll-padding-top:88px}
  body{font-size:16px;line-height:1.55;font-variant-numeric:tabular-nums}
  :focus-visible{outline:2px solid var(--ember);outline-offset:3px}

  .pill{border:0;background:#272a2a;color:#fff;font:400 13px/1 var(--prose);letter-spacing:.02em}
  .pill:hover,.pill--solid{background:#fff;color:var(--void)}
  .pill--solid:hover{background:#272a2a;color:#fff}

  .page{max-width:1000px;padding:60px 64px 48px}
  .r-head{padding-bottom:0;border-bottom:0}
  .r-name{font-size:clamp(44px,6.2vw,92px)}
  .r-role{margin-top:12px;font:400 18px/1.3 var(--prose);letter-spacing:0;text-transform:none;color:var(--ink-2)}
  .r-contact{margin-top:16px;font-size:14px;gap:10px 22px}
  .r-contact a{border-bottom:0;text-decoration:underline;text-decoration-color:rgba(20,20,20,.35);text-underline-offset:4px;transition:text-decoration-color .3s}
  .r-contact a:hover{text-decoration-color:var(--ember)}

  .r-body{gap:48px;margin-top:60px}
  .r-h{margin:48px 0 16px;padding-bottom:0;border-bottom:0;font:600 18px/1.25 var(--prose);letter-spacing:0;text-transform:none;color:var(--ink)}
  .r-summary{font-size:16px;line-height:1.6}

  .job+.job{margin-top:30px}
  .job-title{font-size:22px;line-height:1.1}
  .job-date{margin-top:4px;font:400 14px/1.3 var(--prose);color:var(--ink-2)}
  .job ul{margin-top:10px;padding-left:18px}
  .job li{margin-top:6px}

  .r-side{align-self:start;padding:32px;background:#e2dfda;border-radius:10px}
  .proj+.proj{margin-top:20px}
  .proj h3{font-size:22px}
  .proj p{margin-top:4px;font-size:16px;line-height:1.5;color:var(--ink-2)}
  .proj p,.list li,.blk{text-wrap:pretty}
  .proj .fig{margin-top:6px;font:400 14px/1.3 var(--prose);color:var(--ink)}
  .proj .fig b{font:400 22px/1 var(--cond);margin-right:4px}
  .list{gap:10px;font-size:16px;line-height:1.5}
  .list a{transition:color .3s}
  .list a:hover b{border-bottom:0;text-decoration:underline;text-decoration-color:var(--ember);text-underline-offset:4px}
  .tools{font:400 16px/1.6 var(--prose)}
  .blk{font-size:16px;line-height:1.5}

  .r-foot{margin-top:60px;padding-top:0;border-top:0;font:400 14px/1.3 var(--prose);letter-spacing:0;text-transform:none}
  .r-foot a{text-decoration:underline;text-decoration-color:rgba(20,20,20,.35);text-underline-offset:4px;transition:text-decoration-color .3s}
  .r-foot a:hover{text-decoration-color:var(--ember)}

  /* entrance: the parts of each column rise in turn, once, on load. CSS only, so nothing waits on a
     script; reduced motion drops it below */
  .r-photo,.r-head>div>*,.r-main>*,.r-side>*,.r-foot{animation:r-rise .8s cubic-bezier(.19,1,.22,1) both}
  .r-head>div>:nth-child(1){animation-delay:60ms}
  .r-head>div>:nth-child(2){animation-delay:120ms}
  .r-head>div>:nth-child(3){animation-delay:180ms}
  .r-main>*,.r-side>*{animation-delay:540ms}
  .r-main>:nth-child(1),.r-side>:nth-child(1){animation-delay:240ms}
  .r-main>:nth-child(2),.r-side>:nth-child(2){animation-delay:300ms}
  .r-main>:nth-child(3),.r-side>:nth-child(3){animation-delay:360ms}
  .r-main>:nth-child(4),.r-side>:nth-child(4){animation-delay:420ms}
  .r-main>:nth-child(5),.r-side>:nth-child(5){animation-delay:480ms}
  .r-foot{animation-delay:600ms}
}
@keyframes r-rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@media screen and (max-width:900px){
  .r-body{grid-template-columns:1fr;gap:0}
  .r-side{margin-top:48px}
}
@media screen and (max-width:760px){
  .page{padding:36px 22px 32px}
  .r-head{gap:20px}
  .r-body{margin-top:40px}
  .r-h{margin-top:40px}
  .r-side{padding:24px 20px}
  /* Keep the full career titles within two lines at 360px without changing print or wording. */
  .job-title{font-size:clamp(16px,4vw,20px)}
  .job-date,.proj .fig,.r-foot,.r-contact{font-size:14px}
  .tools{font-size:16px}
}
@media screen and (prefers-reduced-motion:reduce){
  .r-photo,.r-head>div>*,.r-main>*,.r-side>*,.r-foot{animation:none}
  .pill,.r-contact a,.list a,.r-foot a{transition:none}
}