:root{
  --paper:#f3eee4; --paper-2:#ebe4d6; --ink:#1f1d1a; --ink-2:#56514a; --line:#cfc6b5;
  --accent:#b4452c;
  --display:"Fraunces",Georgia,serif; --body:"Newsreader",Georgia,serif; --mono:"JetBrains Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font:400 1.125rem/1.6 var(--body);-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(1200px 600px at 85% -10%,#e7dcc6 0,transparent 60%),radial-gradient(900px 500px at -10% 110%,#e9e1d1 0,transparent 60%)}
.grain{position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.22;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none;background:linear-gradient(var(--accent),var(--accent)) 0 100%/0 1px no-repeat;transition:background-size .35s ease,color .2s}
a:hover,a:focus-visible{background-size:100% 1px;color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.muted{color:var(--ink-2)}

.masthead,.sheet,.foot{max-width:1180px;margin:0 auto;padding-inline:clamp(1.25rem,4vw,3rem)}
.masthead{padding-top:clamp(2rem,6vw,4.5rem)}
.masthead__meta{display:flex;align-items:center;gap:1rem;color:var(--ink-2)}
.rule{flex:1;height:1px;background:var(--line)}
.name{font-family:var(--display);font-weight:300;font-variation-settings:"opsz" 144;line-height:.86;letter-spacing:-.035em;
  font-size:clamp(4rem,15vw,12.5rem);margin:clamp(1.25rem,3vw,2rem) 0 1.5rem}
.name__first{display:block}
.name__last{display:block;padding-left:clamp(1.5rem,12vw,10rem);font-style:italic;font-weight:400}
.dot{color:var(--accent);font-style:normal}
.masthead__row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:1.5rem;padding-bottom:2rem;border-bottom:1px solid var(--ink)}
.role{font-family:var(--display);font-size:clamp(1.2rem,2.2vw,1.6rem);font-weight:400;max-width:34ch}
.role em{color:var(--ink-2);font-weight:300}
.actions{display:flex;gap:.6rem;flex-wrap:wrap}
.btn{font:500 .78rem/1 var(--mono);letter-spacing:.04em;padding:.85rem 1.1rem;border:1px solid var(--ink);background:var(--ink);color:var(--paper);
  border-radius:999px;cursor:pointer;transition:transform .2s ease,background .2s,color .2s}
.btn:hover,.btn:focus-visible{background:var(--accent);border-color:var(--accent);color:var(--paper);transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--ghost{background:transparent;color:var(--ink)}

.sheet{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,8fr);gap:clamp(2rem,6vw,6rem);padding-block:3rem 4rem}
.side{position:relative}
.block{margin-bottom:3rem}
.label{color:var(--accent);margin-bottom:1.1rem;font-weight:500}
.lede{font-family:var(--display);font-size:1.3rem;line-height:1.45;font-weight:350}
.links{list-style:none;display:grid;gap:.55rem}
.links li{display:grid;grid-template-columns:5.5rem 1fr;align-items:baseline;border-bottom:1px dashed var(--line);padding-bottom:.55rem}
.k{color:var(--ink-2);font-size:.66rem}
.skills dt{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2);margin:1rem 0 .5rem}
.skills dt:first-child{margin-top:0}
.skills dd{display:flex;flex-wrap:wrap;gap:.4rem}
.tag{font-size:.95rem;padding:.2rem .7rem;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--paper-2) 60%,transparent);transition:border-color .2s,transform .2s}
.tag:hover{border-color:var(--ink);transform:translateY(-1px)}

.timeline{list-style:none;counter-reset:j}
.job,.edu{display:grid;grid-template-columns:9.5rem 1fr;gap:1.5rem;padding:1.6rem 0;border-top:1px solid var(--line);transition:background .3s}
.job:first-child{border-top:0;padding-top:0}
.job__when{color:var(--ink-2);padding-top:.45rem}
h3{font-family:var(--display);font-weight:450;font-size:1.45rem;line-height:1.2;letter-spacing:-.01em;margin-bottom:.6rem}
.at{font-style:italic;font-weight:300;color:var(--ink-2)}
.job ul{list-style:none;display:grid;gap:.4rem}
.job ul li{position:relative;padding-left:1.25rem}
.job ul li::before{content:"";position:absolute;left:0;top:.8em;width:.55rem;height:1px;background:var(--accent)}
.job:hover h3{color:var(--accent);transition:color .25s}
.work{list-style:none;display:grid;gap:1rem}
.work li{display:grid;gap:.15rem;padding-bottom:1rem;border-bottom:1px solid var(--line)}
.work a{font-family:var(--display);font-size:1.25rem;justify-self:start}
.stack{color:var(--accent);margin-top:.6rem}

.foot{display:flex;justify-content:space-between;padding-block:1.5rem 2.5rem;border-top:1px solid var(--ink);color:var(--ink-2)}

/* placeholder marker — remove the "ph" class once real content is in */
.ph{text-decoration:underline dotted color-mix(in srgb,var(--accent) 55%,transparent);text-underline-offset:.22em;text-decoration-thickness:1px}

/* motion */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--d,0)*90ms)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

@media (max-width:899px){
  .sheet{grid-template-columns:1fr;gap:0}
  .job,.edu{grid-template-columns:1fr;gap:.35rem}
  .job__when{padding-top:0}
}

/* project details */
.details{margin-top:1.4rem;border-top:1px dashed var(--line);padding-top:1rem}
.details summary{cursor:pointer;color:var(--accent);font-weight:500;list-style:none;width:max-content}
.details summary::-webkit-details-marker{display:none}
.details summary::before{content:"+ ";}
.details[open] summary::before{content:"\2212 ";}
.details__body{margin-top:1rem;display:grid;gap:.9rem;font-size:1.02rem}
.details__body h4{color:var(--accent);margin-top:1.1rem;font-weight:500}
.details__body ul,.details__body ol{display:grid;gap:.4rem;padding-left:1.25rem}
.details__body code{font:400 .85em var(--mono);background:var(--paper-2);padding:.1em .35em;border-radius:3px}
.details__body pre{background:var(--paper-2);border:1px solid var(--line);padding:.9rem 1rem;overflow-x:auto;border-radius:4px}
.details__body pre code{background:none;padding:0;font-size:.8rem;line-height:1.5}
.lede-sm{font-family:var(--display);font-size:1.15rem;line-height:1.45}
.facts{display:grid;grid-template-columns:6rem 1fr;gap:.5rem 1rem}
.facts dt{font:500 .66rem/1.8 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2)}
@media (max-width:599px){.facts{grid-template-columns:1fr;gap:0}.facts dd{margin-bottom:.5rem}}

/* site header */
.topnav{max-width:1180px;margin:0 auto;padding:1.25rem clamp(1.25rem,4vw,3rem) 0;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.topnav__home{font-family:var(--display);font-size:1.1rem;font-style:italic}
.topnav nav{display:flex;gap:1.5rem;font:500 .72rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.topnav nav a[aria-current=page]{color:var(--accent);background-size:100% 1px}
.name--page{font-size:clamp(3.5rem,11vw,8rem);margin-bottom:1rem}
.sheet--single{grid-template-columns:minmax(0,1fr);padding-top:2rem}
.sheet--single .edu:first-of-type{border-top:0;padding-top:0}

@media print{
  .details:not([open]) summary{display:none}
  .topnav{display:none}
  @page{margin:14mm}
  body{background:#fff;font-size:10.5pt}
  .grain,.actions,.foot a{display:none}
  .reveal{opacity:1;transform:none}
  .ph{text-decoration:none}
  .name{font-size:44pt;margin:.4rem 0 .6rem}
  .name__first,.name__last{display:inline;padding:0}
  .masthead,.sheet,.foot{max-width:none;padding-inline:0}
  .sheet{grid-template-columns:1fr 2fr;gap:2rem;padding-block:1.2rem 0}
  .side>.block:first-child{position:static}
  .block{margin-bottom:1.2rem;break-inside:avoid}
  .job{padding:.7rem 0;grid-template-columns:6.5rem 1fr;gap:.8rem;break-inside:avoid}
  h3{font-size:12.5pt}
  a{background:none}
}