@font-face{
  font-family:"IBM Plex Mono";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("/fonts/ibm-plex-mono-v20-500-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face{
  font-family:"Instrument Sans";
  font-style:normal;
  font-weight:400;
  font-stretch:100%;
  font-display:swap;
  src:url("/fonts/instrument-sans-v4-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face{
  font-family:"Instrument Serif";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("/fonts/instrument-serif-v5-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --ink:#0E1317;
  --paper:#E9E5DB;
  --paper-soft:#D8D4CA;
  --muted:#8A94A0;
  --line:#232B33;
  --brass:#B99163;
  --measure:720px;
}

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

html{
  overflow-x:hidden;
  color-scheme:dark;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  min-width:0;
  min-height:100vh;
  min-height:100dvh;
  background:var(--ink);
  color:var(--paper);
  -webkit-font-smoothing:antialiased;
}

.profile-page{
  display:flex;
  flex-direction:column;
  padding:clamp(1.25rem,4vw,2.5rem);
  font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:clamp(1rem,0.97rem + 0.2vw,1.0625rem);
  line-height:1.65;
}

.shell{
  width:100%;
  max-width:var(--measure);
  margin:0 auto;
}

.readout{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1rem;
  margin:0;
  color:var(--muted);
  font-family:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  font-size:0.75rem;
  font-weight:500;
  letter-spacing:0.12em;
  line-height:1.5;
  text-transform:uppercase;
}

.readout span:last-child{text-align:right}

.site-head,.site-foot{flex:0 0 auto}

.site-main{
  flex:1 0 auto;
  padding:clamp(2.75rem,7vw,4.5rem) 0 0;
}

.name{
  margin:0;
  font-family:"Instrument Serif",Georgia,"Times New Roman",serif;
  font-size:clamp(3rem,9vw,5.25rem);
  font-weight:400;
  letter-spacing:-0.015em;
  line-height:0.95;
}

.professional-title{
  max-width:700px;
  margin:clamp(1.35rem,3vw,1.65rem) 0 0;
  color:var(--muted);
  font-size:clamp(1.125rem,0.965rem + 0.5vw,1.4375rem);
  line-height:1.425;
  text-wrap:balance;
}

.rule{
  width:64px;
  height:2px;
  margin:clamp(1.5rem,4vw,2rem) 0 0;
  background:var(--brass);
  transform-origin:left center;
}

.profile{margin-top:clamp(2.5rem,6vw,3.75rem)}

.capabilities{margin-top:clamp(2.75rem,7vw,4.25rem)}

.section-label{
  margin:0;
  color:var(--muted);
  font-family:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  font-size:0.8125rem;
  font-weight:500;
  letter-spacing:0.12em;
  line-height:1.5;
  text-transform:uppercase;
}

.summary{
  max-width:700px;
  margin:1.125rem 0 0;
  color:var(--paper);
  font-size:clamp(1.0625rem,1rem + 0.35vw,1.25rem);
  line-height:1.65;
}

.summary p{margin:0}
.summary p + p{margin-top:0.8rem}

.credentials{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin:clamp(1.5rem,4vw,2rem) 0 0;
  padding:0;
  border-top:1px solid var(--line);
}

.credential{
  min-width:0;
  padding:1.15rem 0 1.3rem;
  border-bottom:1px solid var(--line);
}

.credential:nth-child(odd){padding-right:1.5rem}

.credential:nth-child(even){
  padding-left:1.5rem;
  border-left:1px solid var(--line);
}

.credential dt{
  color:var(--brass);
  font-family:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  font-size:0.8125rem;
  font-weight:500;
  letter-spacing:0.08em;
  line-height:1.5;
  text-transform:uppercase;
}

/* Matches .credential:nth-child(odd/even) specificity so the column paddings
   and divider reset rather than losing to them. */
.credential.credential--wide{
  grid-column:1 / -1;
  padding-right:0;
  padding-left:0;
  border-left:0;
}

/* The wide cell spans both grid columns, so a plain block list only ever fills
   the left half. Flow the bullets down three rows of the first column and then
   the second. Column widths and the 3rem gutter reproduce the 1.5rem paddings
   either side of the divider above, so both lists sit on the same two axes. */
.credential.credential--wide ul{
  display:grid;
  grid-template-rows:repeat(3,auto);
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-flow:column;
  column-gap:3rem;
  row-gap:0.3rem;
}

/* row-gap already supplies the spacing, so the sibling margin would double it
   and drop the second column's first bullet out of line with the first. */
.credential.credential--wide li + li{margin-top:0}

.credential dd{
  margin:0.6rem 0 0;
  color:var(--paper-soft);
  font-size:1rem;
  line-height:1.55;
}

.credential ul{
  margin:0;
  padding:0;
  list-style:none;
}

.credential li{
  position:relative;
  padding-left:1rem;
}

.credential li::before{
  position:absolute;
  left:0;
  color:var(--brass);
  content:"\00b7";
}

.credential li + li{margin-top:0.3rem}

.site-foot{
  margin-top:clamp(3.5rem,10vw,6rem);
  padding-top:1.25rem;
  border-top:1px solid var(--line);
}

.error-page{
  display:flex;
  align-items:center;
  padding:clamp(1.25rem,4vw,2.5rem);
  font-family:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  font-size:0.8125rem;
  letter-spacing:0.12em;
  line-height:2;
  text-transform:uppercase;
}

.error-shell{
  width:100%;
  max-width:680px;
  margin:0 auto;
}

.error-code{color:var(--muted)}

.error-page a{
  padding-bottom:2px;
  border-bottom:1px solid var(--brass);
  color:var(--paper);
  text-decoration:none;
}

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

@media (max-width:520px){
  .readout{letter-spacing:0.1em}
  .credentials{grid-template-columns:1fr}
  .credential:nth-child(odd),
  .credential:nth-child(even){
    padding-right:0;
    padding-left:0;
    border-left:0;
  }
  .credential.credential--wide ul{
    grid-template-rows:none;
    grid-template-columns:none;
    grid-auto-flow:row;
  }
}

@media (prefers-reduced-motion:no-preference){
  .name{animation:rise 500ms cubic-bezier(0.2,0.7,0.3,1) both}
  .rule{animation:draw 420ms cubic-bezier(0.2,0.7,0.3,1) 480ms both}

  @keyframes rise{
    from{opacity:0;transform:translateY(8px)}
    to{opacity:1;transform:none}
  }

  @keyframes draw{
    from{transform:scaleX(0)}
    to{transform:scaleX(1)}
  }
}