@font-face{font-family:Inter Tight;src:url('assets/inter-tight-regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Inter Tight;src:url('assets/inter-tight-medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:DM Mono;src:url('assets/dm-mono.ttf') format('truetype');font-weight:400;font-display:swap}
:root{--ink:#f6f1ea;--soft:rgba(246,241,234,.72);--dim:rgba(246,241,234,.6);--night:#0d0a09;--gutter:clamp(20px,4.6vw,76px);--display:'Inter Tight','Helvetica Neue',Arial,sans-serif;--mono:'DM Mono',monospace;--size:clamp(2.5rem,min(5.4vw,10vh),5.25rem);--ease:cubic-bezier(.2,.7,.2,1)}
*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden}body{height:100dvh;display:flex;flex-direction:column;background:var(--night);color:var(--ink);font:16px/1.5 var(--display);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}h2,p,ul{margin:0}ul{padding:0;list-style:none}:focus-visible{outline:1px solid var(--ink);outline-offset:6px}
.backdrop,.photo,.backdrop:after{position:fixed;inset:0}.backdrop{z-index:-2;background:var(--night)}.photo{background-size:cover;background-position:50% 46%;opacity:0;transform:scale(1.025);transition:opacity 2.2s ease,transform 14s linear}.photo.visible{opacity:1;transform:scale(1)}.backdrop:after{content:'';background:linear-gradient(90deg,rgba(8,6,6,.48),rgba(8,6,6,.08) 65%),linear-gradient(rgba(8,6,6,.24),transparent 26%,transparent 65%,rgba(8,6,6,.46))}.grain{position:fixed;inset:-50%;z-index:-1;pointer-events:none;opacity:.2;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain .9s steps(1) infinite}@keyframes grain{0%,100%{transform:translate(0,0)}25%{transform:translate(-3%,4%)}50%{transform:translate(4%,-3%)}75%{transform:translate(-5%,-2%)}}
.bar{display:flex;flex:none;align-items:baseline;justify-content:space-between;gap:24px;padding:clamp(18px,2.6vw,30px) var(--gutter);font:12px/1.5 var(--mono);letter-spacing:.04em;text-transform:uppercase}.bar nav{display:flex;gap:clamp(18px,2vw,28px)}.bar nav a,.bottom{color:var(--soft)}.bar a,.bar button{transition:opacity .25s}@media(hover:hover) and (pointer:fine){.bar nav a:hover,.bar button:not(#frames):hover{opacity:.6}}.bottom{padding-bottom:max(26px,env(safe-area-inset-bottom))}#clock{margin-left:1em;font-variant-numeric:tabular-nums}#frames{padding:8px 0 8px 16px;min-width:72px;position:relative;isolation:isolate;contain:paint;transition:none;opacity:1;font-variant-numeric:tabular-nums;white-space:nowrap}#frames span{display:inline-block}
.index{display:flex;flex:1;min-height:0;flex-direction:column;padding:0 var(--gutter) clamp(8px,2vh,20px);overflow:auto;scrollbar-width:none}.index::-webkit-scrollbar{display:none}.sections{margin-top:auto}.title{display:inline-flex;align-items:flex-start;font-size:var(--size);font-weight:500;line-height:1.04;letter-spacing:-.035em;text-align:left;transition:opacity .35s}.title sup{margin:.32em 0 0 .9em;font:400 max(12px,.24em)/1 var(--mono);letter-spacing:.04em}.title:hover,.sections.has-open section:not(.open) .title{opacity:.42}.sections.has-open section:not(.open) .title:hover{opacity:1}.panel{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .55s var(--ease),opacity .4s}.open .panel{grid-template-rows:1fr;opacity:1}.inner{min-height:0;max-width:58ch;overflow:hidden;color:var(--soft);text-shadow:0 0 18px #08060699}.inner>*{margin:14px 0 24px 4px}.wide{max-width:70ch}.rows li,.rows a{display:grid;grid-template-columns:8em minmax(0,1fr);gap:1.2em;align-items:baseline}.rows li{padding:4px 0;color:var(--ink)}.rows a{grid-column:1/-1;transition:opacity .25s}.posts:hover a:not(:hover),section[data-section="work"] .rows:hover a:not(:hover){opacity:.55}.meta{font:12px/1.5 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--dim)}.rows small{display:inline-block;margin-left:.6em;font-size:14px;color:var(--dim)}.soft{color:var(--dim)}
dialog{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(13,10,9,.82);backdrop-filter:blur(22px);color:var(--ink);overflow:hidden}dialog[open]{display:flex;flex-direction:column;animation:reader-in .4s var(--ease)}dialog::backdrop{background:transparent}@keyframes reader-in{from{opacity:0}}.reader-bar{color:var(--soft)}#close-reader{font-size:14px}#article-body{flex:1;min-height:0;overflow:auto;padding:clamp(12px,4vh,48px) var(--gutter) 18vh;color:var(--soft);font:18px/1.7 var(--display);outline:none}#article-body>*{max-width:62ch;margin:0 0 1.15em}#article-body h1{max-width:18ch;font-size:clamp(2.4rem,4.4vw,3.5rem);font-weight:500;letter-spacing:-.03em;line-height:1.08;color:var(--ink);margin-bottom:.8em}#article-body blockquote{padding-left:1.1em;border-left:1px solid #f6f1ea55}#article-body .draft{font:12px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--dim)}
@media(max-width:720px){.top{flex-direction:column;gap:10px}.bar{gap:12px}.bar nav{font-size:12px}.rows li,.rows a{grid-template-columns:5.8em minmax(0,1fr);gap:.8em}.rows small{display:block;margin-left:0}.inner>*{margin-top:12px;margin-bottom:20px}.title{line-height:1.1}.bottom{font-size:12px}#clock{margin-left:.6em}#article-body{font-size:17px}.photo{background-position:50% 50%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.photo{transform:none}}

/* Shared, quiet header and archive typography. */
.top{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:400}
.older-row{margin-top:12px}.older-row a{color:var(--soft)}.older-row a:hover{color:var(--ink)}
#article-body em{font-style:italic}#article-body strong{font-weight:500;color:var(--ink)}
#article-body.archive>*{max-width:70ch}#article-body.archive h1{font-size:var(--size);line-height:1.04;letter-spacing:-.035em;margin-bottom:.55em}
.archive-year{font:12px/1.5 var(--mono);letter-spacing:.04em;color:var(--dim)}
#article-body .archive-list{margin-top:22px}.archive-list li{padding:8px 0}.archive-list a{font-size:16px}
.reader-bar{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif}
@media(max-width:720px){.archive-list li,.archive-list a{grid-template-columns:7.2em minmax(0,1fr)}}

/* Animate only the content while moving within the reader. */
#reader.reader-closing{animation:reader-out .22s ease forwards;pointer-events:none}
@keyframes reader-out{from{opacity:1}to{opacity:0}}
#article-body{transition:opacity .14s ease,transform .14s ease}
#article-body.content-out{opacity:0;transform:translateY(4px);pointer-events:none}
#close-reader:disabled{pointer-events:none}

.education .meta{color:var(--ink)}
.education small{font-size:inherit;color:var(--dim)}

/* Study keeps the journal reader surface and a single editorial column. */
#article-body.study-view{font-family:'Helvetica Neue',Arial,sans-serif}
#article-body.study-view>h1{margin-bottom:1em}
#article-body.study-view>.study-group{max-width:760px;margin:0;padding:26px 0 24px}
.study-group+.study-group{border-top:1px solid rgba(246,241,234,.15)}
.study-group h2,.study-status{font:12px/1.5 var(--mono);letter-spacing:.04em;text-transform:uppercase}
.study-group h2{color:var(--soft);margin:0 0 14px}
.study-list{margin:0;padding:0;list-style:none}
.study-row{display:grid;grid-template-columns:44px minmax(0,1fr);gap:20px;align-items:baseline;min-height:48px;padding:11px 0;color:var(--ink);font-size:18px;line-height:1.5}
.study-row .meta{color:var(--dim)}
.study-row.forthcoming{color:rgba(246,241,234,.4)}
.study-status{display:inline-block;margin-left:18px;color:rgba(246,241,234,.4);font-size:10px}
@media(hover:hover) and (pointer:fine){a.study-row{transition:color .2s}a.study-row:hover{color:var(--soft)}}
#article-body>.study-placeholder{color:var(--dim);font-size:15px;margin-top:36px}
@media(max-width:720px){.study-row{grid-template-columns:28px minmax(0,1fr);gap:14px;font-size:17px;min-height:48px}.study-status{display:block;margin:3px 0 0}#reader:has(.study-view) .reader-bar{gap:14px;font-size:10px}#reader:has(.study-view) #close-reader{font-size:12px}#article-body.study-view>.study-group{padding:22px 0}}

#article-body>.guide-section{margin:0 0 42px;max-width:62ch}
.guide-section h2{margin:0 0 18px;font:500 20px/1.35 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-.015em;text-transform:none;color:var(--ink)}
.guide-section p{margin:0 0 1.15em}
.guide-section p:last-child{margin-bottom:0}
#article-body>.guide-resources{margin-top:52px;color:var(--dim);font-size:16px}
.guide-resources h2{color:inherit}
@media(max-width:720px){#article-body>.guide-section{margin-bottom:34px}#article-body>.guide-resources{margin-top:42px;font-size:15px}}

.reader-actions{display:flex;align-items:center;gap:24px;flex-shrink:0}
.reader-actions button{min-height:44px;min-width:44px;font-size:14px}
.reader-actions button[hidden]{display:none}
@media(max-width:720px){.reader-actions{gap:14px}.reader-actions button{font-size:12px}}

.guide-structure{margin:32px 0 36px;padding-left:28px}
.guide-structure h3{margin:0 0 18px;font:500 18px/1.4 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-.01em;color:var(--ink)}
@media(max-width:720px){.guide-structure{padding-left:18px;margin:28px 0 32px}.guide-structure h3{font-size:17px}}

@media(min-width:1100px){
  #article-body>.guide-section.has-comparison{max-width:1100px}
  .guide-section.has-comparison>p{max-width:62ch}
  .guide-comparison{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,5vw,76px);align-items:start;margin:32px 0 36px}
  .guide-comparison .guide-structure{min-width:0;margin:0;padding-left:0}
}

@font-face {
  font-family: 'Concourse T3';
  src: url('/assets/concourse-t3-regular.otf') format('opentype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* Concourse for supporting labels in Study and Blog. */
#article-body.study-view:has(> .study-group) .study-group h2,
#article-body.study-view:has(> .study-group) .study-row > .meta,
#article-meta.concourse-caption,
#article-body.archive .archive-year,
#article-body.archive .archive-list .meta,
section[data-section="blog"] .posts .meta {
  font-family: 'Concourse T3', sans-serif;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Header name and navigation match the supporting labels. */
.top {
  font-family: 'Concourse T3', sans-serif;
  font-weight: 400;
  letter-spacing: 1px;
}

/* Blog dates and Work categories match the education date. */
section[data-section="blog"] .posts .meta,
#article-body.archive .archive-list .meta,
section[data-section="work"] .rows .meta {
  color: var(--ink);
}

/* Edu date and location clock match the Blog date typography. */
.education .meta,
footer.bottom > span {
  font-family: 'Concourse T3', sans-serif;
  font-weight: 400;
  letter-spacing: 1px;
}
section[data-section="about"] .inner{color:var(--ink)}