*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:20px}body{margin:0;font:16px/1.65 'Segoe UI',Arial,sans-serif;color:var(--ink);background:var(--paper)}
:root{--paper:#f5f0e5;--ink:#283e34;--muted:#61675d;--line:#cecbbb;--accent:#90422d;--soft:#e7dfce;--display:Georgia,'Times New Roman',serif}
a{color:inherit;text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:5px}button{font:inherit;cursor:pointer}a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:5px}a,button{touch-action:manipulation}img{display:block;max-width:100%;height:auto}figure{margin:0}p{margin:0 0 18px}h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.12;margin:0}h1{font-size:clamp(42px,5vw,64px);letter-spacing:-2px}h2{font-size:clamp(32px,3.2vw,44px);letter-spacing:-1.2px}h3{font-size:30px;letter-spacing:-.6px}.container{max-width:1120px;width:calc(100% - 80px);margin-inline:auto}.skip-link{position:absolute;top:-100px;left:20px;padding:12px;background:white;z-index:20}.skip-link:focus{top:10px}.overline{display:block;font:11px/1.5 'Courier New',monospace;letter-spacing:1.4px;text-transform:uppercase;color:var(--accent);margin-bottom:16px}.text-link{font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:6px}.button{display:inline-block;padding:12px 18px;background:var(--ink);color:var(--paper);font-size:14px;border-radius:2px}.site-header{padding-block:24px;border-bottom:1px solid var(--ink)}.site-header nav{display:flex;gap:30px;font-size:14px}.site-header a{display:inline-flex;align-items:center;min-height:40px}.intro{display:grid;grid-template-columns:1fr 280px;gap:80px;align-items:center;padding:64px 0 70px;max-width:960px;margin-inline:auto}.intro h1{margin-bottom:24px}.roles{font-size:23px;line-height:1.45}.intro-note{max-width:370px;color:var(--muted);margin:24px 0}.portrait{transform:rotate(2deg);padding:10px 10px 0;background:#fffcf4;box-shadow:0 6px 18px #283e3414;border:1px solid var(--line)}.portrait img{width:100%;aspect-ratio:1;object-fit:cover;object-position:65% 25%}.portrait figcaption{font:italic 13px/1.5 Georgia,serif;color:var(--muted);padding:12px 5px}.hobby-section{display:grid;grid-template-columns:1fr 1.55fr;gap:72px;padding:54px 0 60px;border-top:1px solid var(--line)}.section-heading>p{margin-top:22px;color:var(--muted);max-width:270px}.interest{display:grid;grid-template-columns:24px 1fr 90px;gap:16px;align-items:center;padding:26px 0;border-bottom:1px solid var(--line)}.interest:first-child{padding-top:0}.interest h3{margin-bottom:8px}.interest p{margin:0 0 8px;font-size:14px;color:var(--muted)}.interest .number{font:11px 'Courier New',monospace;color:var(--accent);align-self:start;padding-top:8px}.interest-mark{font-size:76px;line-height:1;color:var(--accent);text-align:center}.availability{font:11px/1.6 'Courier New',monospace;color:var(--muted)}a.interest:hover{color:var(--accent);text-decoration:none}.mini-board{display:grid;grid-template-columns:repeat(4,1fr);width:88px;aspect-ratio:1;border:3px solid var(--ink);transform:rotate(-5deg);align-self:center}.mini-board span{display:grid;place-items:center;background:#e9e3d0;font:24px/1 'Segoe UI Symbol',serif;color:#203a2c}.mini-board span:nth-child(8n+2),.mini-board span:nth-child(8n+4),.mini-board span:nth-child(8n+5),.mini-board span:nth-child(8n+7){background:#91a58c}.art-mark{width:84px;height:84px;position:relative;overflow:hidden;background:#e7d8b9}.art-mark i{position:absolute;background:#9c5039;left:12px;top:16px;width:35px;height:68px;transform:rotate(-14deg)}.art-mark b{position:absolute;background:#c9a756;width:38px;height:38px;left:39px;top:10px;border-radius:50%}.art-mark span{position:absolute;background:#41634f;width:29px;height:53px;left:49px;top:45px;transform:rotate(24deg)}.projects-section{border-top:1px solid var(--line);padding:50px 0 60px}.featured-project{display:grid;grid-template-columns:1.4fr 1fr;background:var(--soft);margin-top:30px}.project-image{background:#10232e;display:grid;place-items:center;min-width:0}.project-image img{width:100%;max-height:360px;object-fit:contain}.project-copy{padding:40px;align-self:center}.project-copy h3{margin-bottom:18px}.project-copy p{color:var(--muted);font-size:15px}.featured-project:hover{text-decoration:none}.featured-project:hover .text-link{color:var(--accent)}.project-links{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:28px}.project-links a{border-top:1px solid var(--line);padding:18px 0}.project-links span{font-size:18px}.project-links small{display:block;color:var(--muted);margin-top:8px}.about-section{display:grid;grid-template-columns:1fr 1.55fr;gap:72px;border-top:1px solid var(--line);padding:50px 0}.about-section p{color:var(--muted)}.contact-section{display:flex;justify-content:space-between;align-items:center;gap:32px;background:var(--ink);color:var(--paper);padding:36px 40px;margin:10px 0 48px}.contact-section div{display:flex;flex-wrap:wrap;gap:12px 24px;font-size:14px}.contact-section a{min-height:44px;display:inline-flex;align-items:center}.contact-section a:focus-visible{outline-color:#f6e0b4}footer{display:flex;justify-content:space-between;gap:20px;padding:28px 0;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}footer a{min-height:40px;display:inline-flex;align-items:center}.review-foot{font-size:11px;padding-bottom:24px;color:var(--muted)}

.back-link{display:inline-flex;align-items:center;min-height:44px;font-size:13px;margin-top:24px;color:var(--muted)}.chess-intro{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;padding:24px 0 46px}.chess-intro h1{font-size:60px}.chess-intro>p{font-size:21px;margin:0;color:var(--muted)}.detail-section{border-top:1px solid var(--line);padding:36px 0 48px}.detail-section .section-heading{display:flex;justify-content:space-between;gap:24px;align-items:baseline}.status-label,.card-kicker{font:11px/1.5 'Courier New',monospace;color:var(--accent);letter-spacing:1px}.section-intro{font-size:14px;color:var(--muted);max-width:680px;margin:18px 0 28px}.chess-demo{display:grid;grid-template-columns:1.15fr 1fr;gap:54px;align-items:start}.board-wrap{min-width:0}.chess-board{display:grid;grid-template-columns:repeat(8,1fr);aspect-ratio:1;border:8px solid var(--ink)}.chess-square{display:grid;place-items:center;aspect-ratio:1;font:clamp(22px,4.3vw,49px)/1 'Segoe UI Symbol',serif;color:#152b21}.chess-square.light{background:#f2ead4}.chess-square.dark{background:#92a68e}.chess-square.last-move{box-shadow:inset 0 0 0 4px #c0852f}.board-files{display:grid;grid-template-columns:repeat(8,1fr);text-align:center;font-size:12px;color:var(--muted);padding:8px}.replay-panel{padding:26px;background:var(--soft);border-top:3px solid var(--accent)}.replay-panel h3{font-size:32px;margin:16px 0}.replay-panel p{font-size:15px;color:var(--muted)}.move-list{padding-left:28px;font:18px/1.9 'Courier New',monospace}.move-list span{margin-left:24px}.replay-controls{display:flex;flex-wrap:wrap;gap:8px}.replay-controls button{min-height:44px;border:1px solid var(--ink);padding:8px 15px;background:var(--ink);color:var(--paper)}button:disabled{opacity:.4;cursor:default}.quiet-button{border:0;background:transparent;color:var(--ink);text-decoration:underline;text-underline-offset:4px;min-height:44px;padding:10px 0;margin-top:8px}.replay-status{min-height:24px}.chess-note{padding:36px 0 54px;border-top:1px solid var(--line);max-width:760px}.chess-note p{max-width:620px;color:var(--muted);margin-top:20px}
/* Small, non-interactive views of the actual projects. */
.site-preview { width: 100%; height: 100%; overflow: hidden; font-family: 'Segoe UI', Arial, sans-serif; }
.site-masthead { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 45px; padding: 0 20px; font-size: 12px; font-weight: 700; letter-spacing: 2px; }
.site-masthead > span:first-child { display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.site-detail { font: 8px/1.4 'Courier New', monospace; letter-spacing: 1.2px; }
.counter-preview { display: flex; flex-direction: column; justify-content: space-between; background: #2c2435; color: #f3eedc; }
.counter-preview .site-masthead { border-bottom: 1px solid #57495f; }
.counter-preview img { display: block; width: 100%; height: auto; }
.counter-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px 16px; color: #c4adc8; font: 11px/1.4 Georgia, serif; }
.preview-pill { border-radius: 4px; padding: 8px 10px; background: #e6bad7; color: #302a39; font: bold 8px/1.4 'Courier New', monospace; letter-spacing: .7px; white-space: nowrap; }
.lab-preview { display: flex; flex-direction: column; background: #0b1a23; color: #d9e7eb; }
.lab-preview .site-masthead { background: #06151d; border-bottom: 1px solid #263d47; }
.lab-preview em { color: #779aa9; font-style: normal; font-weight: 400; }
.lab-monogram { color: #87dade; border: 1px solid #477b8a; padding: 0 3px; font-size: 14px; line-height: 18px; }
.lab-preview img { display: block; width: 100%; min-height: 0; flex: 1; object-fit: contain; }
.lab-footer { display: flex; align-items: center; gap: 14px; padding: 13px 20px 17px; color: #8cafba; font: 8px/1.4 'Courier New', monospace; letter-spacing: .8px; }
.lab-track { flex: 1; height: 2px; background: #32545e; position: relative; }
.lab-track::before { content: ''; position: absolute; width: 7px; height: 7px; border-radius: 50%; left: 0; top: -3px; background: #88d8da; }
.jobfit-preview { background: #0c1511; color: #edf5f1; }
.jobfit-preview .site-masthead { background: #07100b; border-bottom: 1px solid #24382f; letter-spacing: 0; font-size: 15px; }
.jobfit-mark { width: 15px; height: 21px; background: #60cba7; border-radius: 3px 9px 9px 3px; }
.jobfit-workspace { display: grid; grid-template-columns: 112px minmax(0, 1fr); height: calc(100% - 45px); }
.jobfit-sidebar { display: flex; flex-direction: column; gap: 13px; padding: 20px 8px; background: #07100b; color: #a7beb2; font-size: 8px; }
.jobfit-sidebar span { padding: 6px; }
.jobfit-sidebar .selected { background: #192e24; color: #ecf4ef; border-radius: 5px; }
.jobfit-main { min-width: 0; padding: 16px 18px; }
.jobfit-main > strong { font-size: 27px; line-height: 1.25; letter-spacing: -1px; }
.jobfit-main > p { color: #a3b6ac; font-size: 8px; line-height: 1.6; margin: 4px 0 13px; max-width: 235px; }
.jobfit-tabs { display: flex; width: max-content; gap: 9px; padding: 3px; border: 1px solid #273b30; border-radius: 6px; color: #a9c1b6; font-size: 8px; }
.jobfit-tabs span { padding: 3px 6px; }
.jobfit-tabs span:first-child { background: #20352b; border-radius: 4px; color: #e6f2eb; }
.jobfit-table { margin-top: 10px; border: 1px solid #273b30; background: #141f19; border-radius: 8px; overflow: hidden; }
.jobfit-table-head, .jobfit-empty-row { display: grid; grid-template-columns: 1fr 30px 49px; align-items: center; gap: 12px; padding: 11px 13px; }
.jobfit-table-head { color: #9eafa6; font-size: 6px; letter-spacing: .6px; }
.jobfit-empty-row { border-top: 1px solid #27372e; }
.jobfit-empty-row i { height: 5px; border-radius: 2px; background: #31463a; }
.jobfit-empty-row i:first-child { width: 75%; }
.jobfit-empty-row i:last-child { border: 1px solid #3b5547; border-radius: 8px; height: 11px; background: transparent; }
.langchat-preview { display: grid; place-items: center; background: #0a0a0a; color: #ededed; padding: 30px 44px; }
.langchat-landing { width: 100%; max-width: 340px; }
.langchat-landing > strong { font-size: 25px; line-height: 1.3; letter-spacing: -.6px; }
.langchat-landing > p { font-size: 13px; line-height: 1.65; color: #b0b0b0; margin: 18px 0 15px; }
.langchat-link { font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.langchat-account { display: flex; gap: 18px; margin-top: 12px; }
@media (min-width: 701px) and (max-width: 1000px), (max-width: 380px) {
  .site-detail { display: none; }
  .jobfit-workspace { grid-template-columns: 82px minmax(0, 1fr); }
  .jobfit-sidebar { padding: 16px 4px; font-size: 7px; }
  .jobfit-main { padding: 16px 12px; }
  .jobfit-main > strong { font-size: 22px; }
  .jobfit-table-head, .jobfit-empty-row { grid-template-columns: 1fr 20px 33px; padding: 10px 8px; gap: 7px; }
  .counter-footer { padding-inline: 12px; gap: 8px; font-size: 9px; }
  .preview-pill { font-size: 7px; padding: 7px; }
  .langchat-preview { padding-inline: 28px; }
}


.hobby-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; padding-bottom: 48px; }
.hobby-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: #fbf8f0; }
.hobby-card-copy { padding: 26px; display: flex; flex-direction: column; flex: 1; }
.hobby-card h2 { display: flex; justify-content: space-between; gap: 8px; font-size: clamp(29px,2.4vw,34px); letter-spacing: -1px; margin: 16px 0 12px; }
.hobby-card h2 span { font: 20px/1.8 'Segoe UI', sans-serif; }
.hobby-card p { color: var(--muted); font-size: 14px; margin: 0 0 24px; }
.card-link { color: var(--green); margin-top: auto; font-size: 13px; }
.hobby-art { height: 220px; position: relative; overflow: hidden; display: grid; place-items: center; }
.chess-art { background-color: #d1d9c6; background-image: conic-gradient(#bdc9af 25%,transparent 0 50%,#bdc9af 0 75%,transparent 0); background-size: 72px 72px; }
.chess-art span { font: 156px/1 Georgia,serif; color: #244c3d; transform: rotate(-9deg); text-shadow: 6px 8px 0 #f3f0e880; }
.watch-art { background: #263f42; }
.watch-strap { position: absolute; height: 290px; width: 72px; background: #9f7050; border-left: 4px solid #c69b74; border-right: 4px solid #c69b74; transform: rotate(22deg); }
.watch-face { position: relative; width: 148px; height: 148px; border-radius: 50%; border: 9px solid #c2c6bf; background: #f3f0e8; box-shadow: 0 5px 18px #0005,inset 0 0 0 3px #737e73; }
.watch-face span { position: absolute; top: 5px; width: 100%; text-align: center; font: 20px Georgia,serif; }
.watch-face i, .watch-face b { position: absolute; left: 50%; bottom: 50%; width: 4px; height: 40px; border-radius: 5px; background: #244c3d; transform-origin: bottom; transform: rotate(55deg); }
.watch-face b { height: 30px; transform: rotate(-60deg); }
.art-art { background: #e7d5bd; }
.art-art i { position: absolute; width: 130px; height: 160px; background: #a96848; transform: rotate(-13deg); left: 17%; top: 48px; }
.art-art b { position: absolute; width: 125px; height: 125px; border-radius: 50%; background: #d8af69; left: 45%; top: 28px; }
.art-art span { position: absolute; width: 90px; height: 145px; background: #416759; transform: rotate(25deg); left: 48%; top: 102px; }
.language-note { padding: 32px; margin-bottom: 48px; background: #e8dfcf; border-radius: 5px; }
.language-note h2 { margin: 12px 0; }
.language-note p { margin: 0; color: var(--muted); }

.photo-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; }
.photo-grid figure { margin: 0; }
.gallery-image { display: block; }
.gallery-image img { width: 100%; height: auto; display: block; border-radius: 5px; }
.photo-grid figcaption { color: var(--muted); font-size: 14px; padding-top: 12px; }
.photo-dialog { max-width: min(1000px,94vw); max-height: 94vh; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 20px; }
.photo-dialog::backdrop { background: #101d18cc; }
.photo-dialog button { display: block; margin: 0 0 16px auto; }
.photo-dialog img { display: block; max-width: 100%; max-height: 70vh; margin: auto; object-fit: contain; }

/* Shared pages use the same paper, typography, and spacing as the homepage. */
:root { --green: var(--ink); --serif: var(--display); }
main:focus { outline: none; }
.site-header nav { flex-wrap: wrap; }
.site-header a[aria-current] { text-decoration: underline; text-underline-offset: 7px; }
.preview-notice { padding: 8px 20px; background: var(--soft); text-align: center; font-size: 11px; }
.preview-notice span { margin-left: 16px; }
.page-intro { padding: 54px 0 42px; max-width: 860px; }
.page-intro h1 { margin: 18px 0 22px; overflow-wrap: anywhere; }
.page-intro > p { color: var(--muted); font-size: 21px; max-width: 680px; margin: 0; }
.eyebrow { font: 11px/1.5 'Courier New',monospace; letter-spacing: 1.4px; color: var(--accent); }
.page-intro .back-link { margin: -24px 0 24px; }
.project-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; margin-top: 32px; }
.project-card { display: block; border: 1px solid var(--line); background: #fffcf4; overflow: hidden; }
.project-card:hover { text-decoration: none; border-color: var(--accent); }
.project-art { height: 310px; overflow: hidden; background: #111; }
.project-body { padding: 26px; }
.project-title { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.project-title h3 { margin-bottom: 16px; }
.project-body p { font-size: 14px; color: var(--muted); }
.project-domain { font: 11px/1.5 'Courier New',monospace; color: var(--accent); overflow-wrap: anywhere; }
.project-links { margin-bottom: 22px; }
.split-section { display: grid; grid-template-columns: 1fr 2fr; gap: 48px; border-top: 1px solid var(--line); padding: 44px 0; }
.resume-entry { display: grid; grid-template-columns: 140px minmax(0,1fr); gap: 24px; padding-bottom: 26px; margin-bottom: 26px; border-bottom: 1px solid var(--line); }
.resume-entry:last-child { border: 0; margin-bottom: 0; padding-bottom: 0; }
.resume-entry h3,.education-entry h3 { font-size: 24px; line-height: 1.3; letter-spacing: -.3px; }
.resume-entry p,.education-entry p { margin: 8px 0 0; }
.entry-date,.organization { color: var(--muted); font-size: 13px; }
.education-entry { margin-bottom: 28px; }
.education-entry:last-child { margin-bottom: 0; }
.resume-download { margin: -12px 0 38px; }
.resume-download a { display: inline-flex; align-items: center; gap: 12px; padding: 12px 18px; border: 1px solid var(--ink); }
.resume-download a:hover { background: var(--soft); text-decoration: none; }
.resume-download span { font-size: 13px; }
.collection-note { border-left: 3px solid var(--accent); padding: 6px 24px; margin-bottom: 36px; max-width: 700px; color: var(--muted); }
.collection-note p { margin: 0; }
.collection-empty { border: 1px dashed var(--line); background: var(--soft); min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 28px; }
.collection-empty p { margin: 8px 0; }
.empty-mark { color: var(--muted); font-size: 30px; }
.hobby-card { border-radius: 0; background: #fffcf4; }
.hobby-card h2 { font-size: 32px; }
.language-note { background: var(--soft); border-radius: 0; }
.photo-dialog button { min-height: 44px; border: 1px solid var(--ink); padding: 8px 15px; background: var(--ink); color: var(--paper); }
.contact-section div { align-items: center; }
.contact-section a { gap: 12px; }
footer { flex-wrap: wrap; align-items: center; }
.text-link { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; }
@media(max-width:1000px) {
  .hobby-grid { grid-template-columns: 1fr; }
  .hobby-card { display: grid; grid-template-columns: minmax(180px,1fr) 2fr; }
  .hobby-art { height: 100%; min-height: 240px; }
  .resume-entry { grid-template-columns: 1fr; gap: 5px; }
}
@media(max-width:900px) {
  .container { width: calc(100% - 48px); }
  .intro { gap: 40px; grid-template-columns: minmax(0,1fr) 220px; }
  .hobby-section,.about-section { gap: 35px; }
  .interest { grid-template-columns: 20px minmax(0,1fr) 70px; gap: 12px; }
  .mini-board { width: 66px; }
  .mini-board span { font-size: 19px; }
  .art-mark { width: 65px; height: 70px; }
  .project-copy { padding: 26px; }
  .chess-demo { gap: 28px; }
  .replay-panel { padding: 22px; }
}
@media(max-width:620px) {
  .container { width: calc(100% - 40px); }
  h1 { font-size: 43px; }
  h2 { font-size: 34px; }
  .site-header { padding-block: 14px; }
  .site-header nav { gap: 22px; font-size: 13px; }
  .intro { grid-template-columns: 1fr; gap: 30px; padding: 38px 0 42px; }
  .roles { font-size: 21px; }
  .intro-note { font-size: 15px; margin: 20px 0; }
  .portrait { width: 220px; justify-self: center; }
  .hobby-section { grid-template-columns: 1fr; gap: 30px; padding: 34px 0; }
  .section-heading > p { max-width: 100%; }
  .interest { padding: 23px 0; }
  .interest h3 { font-size: 28px; }
  .interest-mark { font-size: 60px; }
  .projects-section { padding: 32px 0; }
  .featured-project,.project-grid,.split-section,.photo-grid { grid-template-columns: 1fr; }
  .project-copy { padding: 24px; }
  .project-links { grid-template-columns: 1fr; gap: 0; }
  .project-art { height: 285px; }
  .about-section { grid-template-columns: 1fr; gap: 24px; padding: 32px 0; }
  .contact-section { align-items: flex-start; flex-direction: column; padding: 26px; gap: 16px; }
  .contact-section div { gap: 6px 20px; }
  footer { flex-direction: column; align-items: flex-start; gap: 5px; }
  .chess-intro { grid-template-columns: 1fr; gap: 22px; padding-bottom: 30px; }
  .chess-intro h1 { font-size: 48px; }
  .chess-intro > p { font-size: 19px; }
  .chess-demo { grid-template-columns: 1fr; gap: 22px; }
  .chess-square { font-size: clamp(24px,7vw,40px); }
  .detail-section .section-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
  .replay-panel { padding: 22px; }
  .chess-note h2 { font-size: 32px; }
  .page-intro { padding: 36px 0 30px; }
  .page-intro > p { font-size: 18px; }
  .hobby-card { display: flex; }
  .hobby-art { height: 220px; min-height: 0; }
  .hobby-card-copy { padding: 24px; }
  .detail-section { padding: 30px 0; }
  .language-note { padding: 26px; }
  .split-section { gap: 24px; padding: 32px 0; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } }