@import url('./theme.css');
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.85 ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;-webkit-font-smoothing:antialiased}.page{display:grid;grid-template-columns:125px minmax(0,660px);gap:58px;max-width:915px;margin:100px auto;padding:0 32px}header{padding-top:0}.mark{font-size:26px;letter-spacing:-1.8px;font-weight:500;line-height:1.3;text-decoration:none}nav{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:33px;font-size:12px}a{color:var(--fg);text-decoration-thickness:1px;text-underline-offset:4px}a:hover{color:var(--muted)}h1{font-size:16px;line-height:1.9;font-weight:500;margin:0 0 26px}p{margin:0 0 24px}h2{font-size:14px;font-weight:500;margin:40px 0 15px}ul{margin:0;padding:0;list-style:none}li{margin:0 0 16px;font-size:13px;line-height:1.8}.description{color:#555}:focus-visible{outline:2px solid #111;outline-offset:5px}.skip{position:absolute;left:20px;top:-60px;background:#fff;padding:5px}.skip:focus{top:10px}@media(max-width:700px){.page{display:block;margin:40px auto;padding:0 24px;max-width:600px}header{margin-bottom:48px}nav{flex-direction:row;flex-wrap:wrap;gap:12px 22px;margin-top:22px}h1{margin-bottom:24px}body{font-size:13px}.description{font-size:12px}}

.year-group{display:grid;grid-template-columns:42px minmax(0,1fr);gap:17px;margin-top:21px}.year-group h3{font-size:11px;line-height:2.15;font-weight:400;color:var(--muted);margin:0}.year-group li:last-child{margin-bottom:0}h2{margin-top:43px}@media(max-width:420px){.year-group{grid-template-columns:35px minmax(0,1fr);gap:12px}}
/* Landing-kit layout: centered wordmark, right-aligned links, narrow content. */
.page{display:block;max-width:724px;margin:0 auto;padding:0 32px}
header{position:relative;display:flex;justify-content:center;align-items:center;min-height:80px;padding-top:16px}
.mark{font-size:24px}
nav{position:absolute;left:calc(50% + 48px);right:0;top:32px;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;gap:14px;margin:0;font-size:10px;white-space:nowrap}
main{padding:78px 0 80px}
@media(max-width:700px){.page{max-width:724px;margin:0 auto;padding:0 24px}header{margin-bottom:0;min-height:108px;padding-top:22px;align-items:flex-start}nav{left:0;right:0;top:67px;justify-content:center;gap:20px;font-size:11px;flex-wrap:wrap}main{padding:43px 0 60px}}
@media(min-width:701px){header{min-height:96px;padding-top:0}nav{top:50%;transform:translateY(-50%)}}
/* Social links share a left edge in a vertical list. */
header{min-height:136px}
nav{left:auto;right:0;top:50%;transform:translateY(-50%);flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;font-size:11px}
@media(max-width:700px){header{min-height:140px;align-items:center;padding-top:0}nav{left:auto;right:0;top:50%;transform:translateY(-50%);flex-direction:column;align-items:flex-start;gap:5px;font-size:10px}main{padding-top:35px}}

.mark{display:grid;place-items:center;width:48px;height:48px;aspect-ratio:1;border:1px solid var(--fg);font-size:20px;letter-spacing:-1px;line-height:1;flex-shrink:0}

nav{align-items:flex-end;text-align:right}
/* Align the logo with the first social link. */
header{align-items:flex-start;padding-top:24px}
nav{top:24px;transform:none}
/* Inline detail links retain the surrounding description color. */
.description a{color:inherit}

/* Static ASCII portrait replaces the wordmark without changing its size. */
button.mark{position:relative;padding:0;background:#fff;color:var(--fg);font-family:inherit;font-weight:500;cursor:pointer;overflow:hidden;border-radius:0}
.mark #art{display:none;position:absolute;inset:0;width:100%;height:100%}
.mark.portrait-ready:focus-visible #art,.mark.portrait-ready[aria-pressed="true"] #art{display:block}
.mark.portrait-ready:focus-visible .mark-text,.mark.portrait-ready[aria-pressed="true"] .mark-text{visibility:hidden}
@media(hover:hover){.mark.portrait-ready:hover #art{display:block}.mark.portrait-ready:hover .mark-text{visibility:hidden}}

/* The portrait is clipped to the original 48px logo, including on hover. */
button.mark{overflow:hidden}
.mark #art{inset:0;transform:none;width:100%;height:100%;background:#fff;border:0}

.mark #art{max-width:none;width:48px;height:48px;top:-1px;left:-1px;object-fit:contain}

.mark #art{opacity:1}

/* Daily project order follows the October building challenge. */
.year-group ol{margin:0;padding-left:2em}.year-group ol li::marker{color:var(--muted);font-size:11px}.section-description{color:var(--muted);font-size:12px;margin:0 0 18px}

/* Let the header grow with the obfuscated email while keeping the logo centered. */
header{padding-bottom:24px}
header .mark{position:absolute;left:50%;transform:translateX(-50%)}
header nav{position:static;width:calc(50% - 40px);margin-left:auto;transform:none}
.email-link{position:relative}
#email-hint{position:absolute;z-index:2;right:0;top:100%;width:270px;max-width:calc(100vw - 48px);padding:10px 12px;background:var(--bg);border:1px solid var(--line);color:var(--muted);white-space:normal;text-align:right;visibility:hidden;opacity:0;pointer-events:none}
.email-link:hover #email-hint,.email-link:focus-within #email-hint{visibility:visible;opacity:1;pointer-events:auto}
#email-hint{user-select:text;cursor:text}


/* Dates sit within each year, separated by space rather than repeated years. */
#projects .year-group + .year-group{margin-top:34px}
.project-date{display:block;color:var(--muted);font-size:11px;margin-bottom:5px}
#projects li.dated-project{margin-top:26px}
#projects li.dated-project:first-child{margin-top:0}

/* Paragraph continuations expand inline, before their toggle. */
.intro-list{list-style:disc;padding-left:19px;margin:0 0 24px}
.intro-list>li{font-size:inherit;line-height:inherit;margin-bottom:20px;padding-left:3px}
.intro-toggle{display:inline-block;vertical-align:baseline;background:none;border:0;padding:4px 8px;color:inherit;font:inherit;cursor:pointer}
.intro-toggle:hover{color:var(--muted)}
.intro-arrow{display:inline-block;width:7px;height:7px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-2px) rotate(45deg);vertical-align:middle}
.intro-toggle[aria-expanded="true"] .intro-arrow{transform:translateY(2px) rotate(225deg)}

#projects .has-resolution .group-resolution{grid-column:2;margin:0;color:var(--muted);font-size:12px}#projects .has-resolution>ul{grid-column:2}