:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body {
  overflow: hidden;
  background: #000;
  color: #e7e7e7;
  font-family: "Courier New", Consolas, monospace;
}
.installation { position: relative; width: 100vw; height: 100vh; min-height: 530px; overflow: hidden; background: #000; }
.installation::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; opacity: .22;
  background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, black 8%, transparent 67%);
}
.installation::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; opacity: .15;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 1px, transparent 1px 4px);
}
.tv-scan { position: absolute; z-index: 0; inset: -20px 0; pointer-events: none; opacity: .3; background: repeating-linear-gradient(0deg, rgba(229,229,229,.22) 0 1px, transparent 1px 4px); animation: television-drift 8s steps(120) infinite; }
#ascii-field { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .5; }
#scene { position: absolute; z-index: 2; inset: 0; display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; image-rendering: pixelated; }
#title-pixels { position: absolute; z-index: 5; inset: 0; width: 100%; height: 100%; pointer-events: none; image-rendering: pixelated; }
#scene:active { cursor: grabbing; }
.masthead { position: absolute; z-index: 4; top: 29px; left: 35px; display: flex; align-items: center; gap: 13px; user-select: none; }
.system-mark { display: grid; grid-template-columns: repeat(3, 6px); gap: 3px; padding: 5px; border: 1px solid #aaa; }
.system-mark span { width: 6px; height: 6px; background: #ddd; }.system-mark span:nth-child(2) { background: #777; }.system-mark span:nth-child(3) { background: #222; }
.masthead-copy p, .masthead-copy h1, .terminal-info p { margin: 0; }
.masthead-copy p { color: #8d8d8d; font-size: 9px; letter-spacing: 1.7px; }
.masthead h1 { margin-top: 1px; color: #f2f2f2; font-size: 18px; line-height: 18px; letter-spacing: 4px; font-weight: 400; }
.frame-count { position: fixed; z-index: 4; top: 36px; right: 35px; color: #888; font-size: 10px; letter-spacing: 1.3px; }.frame-count b { color: #f0f0f0; font-weight: 400; }
.terminal-info { position: fixed; z-index: 4; left: 35px; bottom: 31px; color: #a8a8a8; font-size: 9px; letter-spacing: 1.25px; line-height: 1.8; user-select: none; }.terminal-info #status { color: #666; }
.title-layer { position: absolute; z-index: 4; top: 50%; left: 0; width: 100%; transform: translateY(-50%); color: #e6d98f; pointer-events: none; user-select: none; text-align: center; font-family: "Helvetica Neue", Arial, sans-serif; }
.title-kicker { margin: 0 0 17px; color: #a79f76; font: 10px "Courier New", monospace; letter-spacing: 1.8px; }
.title-layer h2 { margin: 0; font-size: 88px; line-height: .9; font-weight: 700; letter-spacing: 0; color: #f1df72; text-shadow: 0 0 4px rgba(255, 239, 137, .95), 0 0 16px rgba(247, 215, 56, .66), 0 0 38px rgba(226, 185, 24, .34); }
.title-caption { margin: 21px 0 0; color: #aaa488; font-size: 11px; line-height: 1.35; letter-spacing: 0; }
.ascii-panel { position: fixed; z-index: 6; top: 84px; right: 35px; width: 178px; padding: 10px; border: 1px solid rgba(211, 204, 165, .45); background: rgba(0, 0, 0, .72); color: #b8b29a; font: 9px "Courier New", monospace; letter-spacing: 1px; }
.panel-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; color: #ded8b8; }.panel-heading i { color: #8e895f; font-style: normal; font-size: 8px; }
.ascii-control { display: grid; grid-template-columns: 63px 30px 1fr; align-items: center; gap: 5px; min-height: 24px; }.ascii-control output { color: #e1d879; text-align: right; font-size: 8px; }.ascii-control input { width: 100%; accent-color: #d8ce72; cursor: ew-resize; }
.panel-reset { width: 100%; height: 23px; margin-top: 8px; border: 1px solid #777260; background: #0b0b09; color: #ccc5a3; font: 8px "Courier New", monospace; letter-spacing: 1px; cursor: pointer; }.panel-reset:hover { background: #ddd18a; border-color: #ddd18a; color: #080806; }.panel-reset:focus-visible { outline: 1px solid #fff; outline-offset: 2px; }
.control-deck { position: fixed; z-index: 4; right: 35px; bottom: 29px; display: flex; align-items: center; gap: 11px; }
.control-button, .key-hint { height: 31px; border: 1px solid #777; background: #080808; color: #ddd; font: 9px "Courier New", monospace; letter-spacing: 1px; }
.control-button { display: flex; align-items: center; gap: 8px; padding: 0 11px; cursor: pointer; }.control-button:hover { background: #e6e6e6; color: #000; border-color: #e6e6e6; }.control-button:focus-visible { outline: 1px solid #fff; outline-offset: 3px; }
.pause-icon { width: 8px; height: 8px; border-left: 2px solid currentColor; border-right: 2px solid currentColor; }.control-button[data-paused="true"] .pause-icon { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 7px solid currentColor; border-right: 0; }
.key-hint { display: flex; align-items: center; gap: 7px; padding: 0 9px; color: #777; }.key-hint kbd { border: 1px solid #555; padding: 2px 4px; color: #bcbcbc; font: 8px "Courier New", monospace; }
.corner { position: absolute; z-index: 4; width: 17px; height: 17px; opacity: .72; pointer-events: none; }.corner-tl { top: 17px; left: 17px; border-top: 1px solid #999; border-left: 1px solid #999; }.corner-tr { top: 17px; right: 17px; border-top: 1px solid #999; border-right: 1px solid #999; }.corner-bl { bottom: 17px; left: 17px; border-bottom: 1px solid #999; border-left: 1px solid #999; }.corner-br { right: 17px; bottom: 17px; border-right: 1px solid #999; border-bottom: 1px solid #999; }
@keyframes television-drift { from { transform: translateY(-10px); } to { transform: translateY(10px); } }
@media (max-width: 600px) { .masthead { top: 24px; left: 25px; }.frame-count { top: 30px; right: 25px; }.terminal-info { left: 25px; bottom: 19px; }.title-layer h2 { font-size: 48px; }.ascii-panel { top: 72px; right: 16px; width: 158px; }.control-deck { right: 25px; bottom: 19px; }.key-hint { display: none; }.corner { display: none; }.installation { min-height: 450px; } }

/* Portfolio scroll composition */
body { overflow-x: hidden; overflow-y: auto; background: #050505; font-family: "Geist", "Helvetica Neue", Arial, sans-serif; }
.installation { width: 100%; height: 220vh; min-height: 1200px; overflow: visible; background: #050505; }
.installation::before, .installation::after { content: none; }
.scene-stage { position: sticky; top: 0; height: 100vh; min-height: 530px; overflow: hidden; isolation: isolate; background: #050505; }
#chromatic-waves { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; opacity: .3; mix-blend-mode: screen; }
.scene-stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; opacity: .16; background-image: linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse at center, black 8%, transparent 67%); }
.scene-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; opacity: .12; background: repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 1px, transparent 1px 4px); }
.frame-count, .terminal-info, .ascii-panel, .control-deck { position: absolute; }
.masthead { width: calc(100% - 70px); }
.top-nav { display: flex; gap: 18px; margin-left: 22px; }.top-nav a { color: #908b76; font: 9px "Courier New", monospace; letter-spacing: 1.1px; text-decoration: none; transition: color .2s ease; }.top-nav a:hover, .top-nav a:focus-visible { color: #f1df72; outline: none; }
.profile-section { position: absolute; z-index: 8; top: 112vh; left: 0; width: 100%; min-height: 94vh; padding: 10vh max(35px, calc((100vw - 1240px) / 2)); display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(280px, .72fr); align-items: center; gap: clamp(34px, 8vw, 130px); pointer-events: none; }
.profile-copy { max-width: 620px; pointer-events: auto; }.profile-kicker { margin: 0 0 22px; color: #a79f76; font: 10px "Courier New", monospace; letter-spacing: 1.5px; }.profile-copy h2 { margin: 0; color: #f0eeee; font-size: 58px; font-weight: 600; line-height: .96; letter-spacing: 0; text-wrap: balance; }.profile-body { max-width: 44ch; margin: 28px 0; color: #b8b5ab; font-size: 16px; line-height: 1.65; }.profile-link { display: inline-flex; gap: 9px; align-items: center; padding-bottom: 5px; border-bottom: 1px solid #e6d98f; color: #e6d98f; font: 10px "Courier New", monospace; letter-spacing: 1.3px; text-decoration: none; transition: color .2s ease, border-color .2s ease; }.profile-link:hover, .profile-link:focus-visible { color: #fff4ae; border-color: #fff4ae; outline: none; }
.portrait-frame { position: relative; width: min(100%, 355px); justify-self: end; margin: 0; padding: 11px; border: 1px solid rgba(230, 217, 143, .65); background: rgba(5, 5, 5, .72); pointer-events: auto; }.portrait-frame::before { content: ""; position: absolute; inset: 18px; border: 1px dashed rgba(230, 217, 143, .25); pointer-events: none; }.portrait-placeholder, #portrait-image { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: repeating-linear-gradient(0deg, #131313 0 2px, #0b0b0b 2px 5px); filter: grayscale(1) contrast(1.15); }.portrait-placeholder { display: grid; place-items: center; color: #d8cf92; font: 22px/1 "Courier New", monospace; letter-spacing: 3px; text-align: center; }.portrait-frame figcaption { margin: 12px 0 9px; color: #77736a; font: 8px "Courier New", monospace; letter-spacing: .7px; }.portrait-replace { display: inline-block; color: #e6d98f; border-bottom: 1px solid #857d55; font: 9px "Courier New", monospace; letter-spacing: 1px; cursor: pointer; }.portrait-replace:hover { color: #fff4ae; }
.recognition-section { position: relative; z-index: 9; padding: 170px max(35px, calc((100vw - 1240px) / 2)); background: #0a0a09; border-top: 1px solid #27261f; }.recognition-intro { position: relative; display: grid; grid-template-columns: 1fr minmax(340px, 2fr) auto; align-items: end; gap: 24px; margin-bottom: 56px; }.recognition-intro p, .recognition-intro span { margin: 0; color: #a79f76; font: 9px "Courier New", monospace; letter-spacing: 1.4px; }.recognition-intro h2 { margin: 0; color: #efede7; font-size: 54px; font-weight: 500; line-height: .95; letter-spacing: 0; }.award-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(168px, auto); grid-auto-flow: dense; border-top: 1px solid #494635; border-left: 1px solid #494635; }.award { min-height: 168px; padding: 22px; border-right: 1px solid #494635; border-bottom: 1px solid #494635; color: #b9b6a9; background: #10100d; transition: background .3s ease, color .3s ease, transform .3s ease; }.award:hover { background: #e8df9b; color: #11110e; transform: translateY(-4px); }.award span { font: 9px "Courier New", monospace; letter-spacing: 1px; }.award h3 { margin: 48px 0 12px; color: inherit; font-size: 22px; font-weight: 500; line-height: .95; }.award p { margin: 0; font: 9px "Courier New", monospace; letter-spacing: .65px; }.award-main { grid-column: span 2; grid-row: span 2; min-height: 336px; background: #d8cf8c; color: #10100d; }.award-main h3 { margin-top: 150px; font-size: 44px; }.award-wide { grid-column: span 2; }
.contact-section { position: relative; z-index: 9; min-height: 72vh; padding: 150px max(35px, calc((100vw - 1240px) / 2)) 35px; display: flex; flex-direction: column; align-items: flex-start; background: #e6dd9b; color: #11110e; }.contact-section p { margin: 0 0 28px; font: 11px "Courier New", monospace; letter-spacing: 1px; }.contact-section > a { color: inherit; font-size: 96px; line-height: .9; font-weight: 600; text-decoration: none; letter-spacing: 0; transition: opacity .2s ease; }.contact-section > a:hover, .contact-section > a:focus-visible { opacity: .55; outline: none; }.contact-section > div { width: 100%; margin-top: auto; padding-top: 80px; display: flex; justify-content: space-between; font: 9px "Courier New", monospace; letter-spacing: 1.1px; }
.contact-section .contact-extra { display: flex; flex-wrap: wrap; gap: 24px 36px; margin: 14px 0 28px; font: 11px "Courier New", monospace; letter-spacing: 1px; color: #11110e; }
.contact-section .contact-extra a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; transition: opacity .2s ease; }
.contact-section .contact-extra a:hover, .contact-section .contact-extra a:focus-visible { opacity: .55; outline: none; }
@media (max-width: 760px) { .installation { height: 205vh; min-height: 1080px; }.masthead { width: auto; }.top-nav { display: none; }.profile-section { top: 104vh; min-height: 96vh; padding: 9vh 25px; grid-template-columns: 1fr; gap: 32px; }.profile-copy h2 { font-size: 38px; }.profile-body { font-size: 14px; }.portrait-frame { justify-self: start; width: min(72vw, 270px); }.recognition-section { padding: 100px 25px; }.recognition-intro { display: block; margin-bottom: 35px; }.recognition-intro h2 { margin: 18px 0; font-size: 38px; }.award-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.award-main { min-height: 270px; }.award-main h3 { margin-top: 105px; font-size: 32px; }.award-wide { grid-column: span 2; }.contact-section { min-height: 58vh; padding: 100px 25px 25px; }.contact-section > a { font-size: 42px; overflow-wrap: anywhere; }.contact-section > div { padding-top: 60px; } }

/* Responsive proportions: desktop, tablet, and handset are intentionally distinct layouts. */
.scene-stage { height: 100dvh; min-height: 530px; }
@media (max-width: 1180px) {
  .installation { min-height: 1120px; }
  .masthead { width: calc(100% - 50px); left: 25px; }.frame-count { right: 25px; }.top-nav { gap: 11px; margin-left: 12px; }
  .title-layer h2 { font-size: 68px; }.title-caption { font-size: 10px; }
  .profile-section { padding-left: 42px; padding-right: 42px; gap: 48px; }.profile-copy h2 { font-size: 46px; }.profile-body { font-size: 15px; }
  .portrait-frame { width: min(100%, 310px); }.recognition-intro { grid-template-columns: 1fr minmax(300px, 1.6fr); }.recognition-intro span { grid-column: 2; }
  .contact-section > a { font-size: 64px; }
}
@media (max-width: 900px) {
  .installation { height: 208vh; min-height: 1280px; }.ascii-panel { top: 76px; right: 20px; width: 164px; }.control-deck { right: 20px; }
  .profile-section { top: 108vh; grid-template-columns: minmax(0, 1fr) minmax(225px, .58fr); gap: 30px; padding-left: 28px; padding-right: 28px; }.profile-copy h2 { font-size: 40px; }.profile-body { max-width: 37ch; }
  .recognition-section { padding-left: 28px; padding-right: 28px; }.recognition-intro h2 { font-size: 44px; }.award-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.award-main { min-height: 300px; }.award-main h3 { margin-top: 120px; font-size: 36px; }.award-wide { grid-column: span 2; }
}
@media (max-width: 640px) {
  .installation { height: 270dvh; min-height: 1500px; }.scene-stage { min-height: 560px; }.masthead { top: 21px; left: 20px; }.masthead-copy p { font-size: 8px; }.masthead h1 { font-size: 15px; }.frame-count { top: 27px; right: 20px; font-size: 8px; }
  .title-layer { top: 47%; padding: 0 20px; }.title-layer h2 { font-size: 42px; line-height: .92; }.title-kicker { margin-bottom: 12px; font-size: 8px; }.title-caption { margin-top: 15px; font-size: 9px; }.ascii-panel { display: none; }.terminal-info { left: 20px; bottom: 16px; font-size: 8px; }.control-deck { right: 20px; bottom: 15px; }.control-button { padding: 0 9px; }
  .profile-section { top: 104dvh; min-height: 148dvh; padding: 9dvh 22px 12dvh; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 38px; }.profile-copy h2 { font-size: 36px; line-height: 1; }.profile-body { max-width: 36ch; margin: 22px 0; font-size: 14px; }.portrait-frame { width: min(80vw, 295px); }
  .recognition-section { padding: 84px 20px; }.recognition-intro p, .recognition-intro span { font-size: 8px; }.recognition-intro h2 { font-size: 34px; }.award { min-height: 145px; padding: 16px; }.award h3 { margin-top: 36px; font-size: 18px; }.award-main { min-height: 290px; }.award-main h3 { margin-top: 122px; font-size: 30px; }.contact-section { padding: 84px 20px 20px; }.contact-section > a { font-size: 36px; }.contact-section > div { gap: 18px; font-size: 8px; }
}

/* Resume content beside the CRT computer. */
.profile-section { display: block; padding-top: 11vh; }
.profile-copy { max-width: min(52vw, 610px); }.profile-kicker { margin-bottom: 18px; color: #e6d98f; font-size: 14px; letter-spacing: 1.2px; }.profile-copy h2 { font-size: 54px; line-height: .94; }.profile-body { max-width: 43ch; margin: 26px 0 34px; font-size: 16px; }
.profile-facts { display: grid; grid-template-columns: 120px minmax(0, 1fr); max-width: 570px; border-top: 1px solid rgba(230, 217, 143, .52); }.profile-facts div { display: contents; }.profile-facts span, .profile-facts strong { min-height: 44px; padding: 12px 0; border-bottom: 1px solid rgba(230, 217, 143, .22); }.profile-facts span { color: #aaa488; font: 11px "Courier New", monospace; letter-spacing: .8px; }.profile-facts strong { color: #e6e3d8; font-size: 14px; font-weight: 500; line-height: 1.35; }
.award-main h3 { margin-top: 126px; font-size: 32px; line-height: 1; }.award h3 { font-size: 19px; line-height: 1.08; }
@media (max-width: 1180px) { .profile-copy { max-width: 48vw; }.profile-copy h2 { font-size: 45px; }.profile-facts { grid-template-columns: 102px minmax(0, 1fr); }.profile-facts strong { font-size: 13px; } }
@media (max-width: 900px) { .profile-copy { max-width: 51vw; }.profile-copy h2 { font-size: 39px; }.profile-body { font-size: 14px; }.profile-facts { grid-template-columns: 88px minmax(0, 1fr); }.profile-facts span { font-size: 9px; }.profile-facts strong { font-size: 12px; } }
@media (max-width: 640px) { .profile-section { padding-top: 8dvh; }.profile-copy { max-width: 100%; }.profile-copy h2 { font-size: 36px; }.profile-kicker { font-size: 12px; }.profile-body { max-width: 37ch; margin: 20px 0 28px; }.profile-facts { max-width: 100%; grid-template-columns: 82px minmax(0, 1fr); }.profile-facts span, .profile-facts strong { min-height: 42px; padding: 10px 0; }.profile-facts strong { font-size: 12px; }.award-main h3 { margin-top: 104px; font-size: 26px; }.award h3 { font-size: 16px; } }

.recognition-intro { display: block; }

/* Personal resume: editorial columns paired with a two-dimensional retro desktop. */
.profile-section { display: grid; grid-template-columns: minmax(0, 590px) minmax(360px, 510px); justify-content: space-between; align-items: center; gap: 72px; padding-top: 9vh; }
.profile-copy { max-width: none; }.profile-copy h2 { margin: 0; color: #f0eeee; font-size: 64px; font-weight: 600; line-height: .92; }.profile-role { margin: 11px 0 30px; color: #d9d2aa; font-size: 18px; }.profile-body { max-width: 37ch; margin: 0 0 34px; color: #bebbb1; font-size: 16px; line-height: 1.6; }.education-line { display: grid; grid-template-columns: 94px 1fr; padding: 15px 0; border-top: 1px solid rgba(230,217,143,.5); border-bottom: 1px solid rgba(230,217,143,.22); }.education-line span, .experience-meta time { color: #a8a18a; font: 11px "Courier New", monospace; letter-spacing: .6px; }.education-line strong { color: #e6e2d5; font-size: 14px; font-weight: 500; line-height: 1.45; }
.practice-section { margin-top: 37px; }.practice-section h3 { margin: 0 0 4px; color: #e6d98f; font-size: 20px; font-weight: 500; }.experience-item { padding: 22px 0 23px; border-top: 1px solid rgba(230,217,143,.22); }.experience-item:last-child { border-bottom: 1px solid rgba(230,217,143,.22); }.experience-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; color: #bdb8a1; font-size: 13px; }.experience-meta span { text-align: right; }.experience-item h4 { margin: 10px 0 9px; color: #f0eee8; font-size: 21px; font-weight: 500; }.experience-item p { max-width: 57ch; margin: 0; color: #b6b3aa; font-size: 14px; line-height: 1.55; }
.retro-desktop { position: relative; width: min(100%, 510px); height: 440px; justify-self: end; color: #e6e0c5; font-family: "Courier New", monospace; }.desktop-folder { position: absolute; top: 0; left: 0; display: grid; justify-items: center; gap: 7px; color: #bdb69e; font-size: 11px; }.desktop-folder span { position: relative; display: block; width: 48px; height: 35px; border: 2px solid currentColor; }.desktop-folder span::before { content: ""; position: absolute; left: 5px; top: -8px; width: 22px; height: 8px; border: 2px solid currentColor; border-bottom: 0; }.portrait-window { position: absolute; top: 48px; right: 0; width: min(88%, 430px); border: 2px solid #d8d0ad; background: #050505; box-shadow: 8px 8px 0 rgba(216,208,173,.16); }.window-title { height: 32px; padding: 5px 7px 5px 11px; display: flex; align-items: center; gap: 5px; border-bottom: 2px solid #d8d0ad; background: repeating-linear-gradient(90deg, #d8d0ad 0 2px, transparent 2px 5px); color: #11110e; font-size: 14px; }.window-title span { margin-right: auto; padding: 2px 5px; background: #d8d0ad; }.window-title i { width: 15px; height: 15px; border: 2px solid #11110e; background: #d8d0ad; }.window-body { height: 318px; display: grid; place-items: center; overflow: hidden; padding: 14px; background: repeating-linear-gradient(0deg, #0a0a09 0 2px, #050505 2px 5px); }.window-body img { width: 100%; height: 100%; object-fit: cover; object-position: 53% 48%; filter: grayscale(1) contrast(1.12); }.window-footer { height: 29px; padding: 7px 10px; border-top: 2px solid #d8d0ad; color: #aaa386; font-size: 10px; }
@media (max-width: 1180px) { .profile-section { grid-template-columns: minmax(0, 500px) minmax(310px, 400px); gap: 36px; }.profile-copy h2 { font-size: 52px; }.retro-desktop { height: 390px; }.window-body { height: 274px; } }
@media (max-width: 900px) { .profile-section { grid-template-columns: minmax(0, 1fr) minmax(285px, 350px); gap: 28px; }.profile-copy h2 { font-size: 43px; }.profile-role { font-size: 16px; }.profile-body { font-size: 14px; }.experience-item p { font-size: 13px; }.retro-desktop { height: 350px; }.window-body { height: 230px; }.portrait-window { width: 90%; }.window-title { font-size: 12px; } }
@media (max-width: 640px) { .profile-section { display: flex; min-height: 184dvh; gap: 48px; padding-top: 8dvh; }.profile-copy h2 { font-size: 46px; }.profile-role { margin: 9px 0 25px; font-size: 15px; }.profile-body { max-width: 36ch; margin-bottom: 28px; }.education-line { grid-template-columns: 70px 1fr; }.education-line strong { font-size: 13px; }.experience-meta { display: block; }.experience-meta span { display: block; margin-top: 5px; text-align: left; }.experience-item h4 { font-size: 19px; }.experience-item p { font-size: 13px; }.retro-desktop { width: 100%; height: 364px; }.portrait-window { top: 43px; width: calc(100% - 36px); }.window-body { height: 250px; }.desktop-folder { left: 2px; }.recognition-section { padding-top: 100px; } }

@media (max-width: 640px) { .installation { height: 310dvh; min-height: 1700px; } }

/* Unified visual system: monochrome terminal surfaces with one acid-yellow signal. */
:root {
  --ink: #070707;
  --surface: #0d0d0c;
  --line: rgba(231, 226, 196, .25);
  --muted: #9c9a91;
  --paper: #e7e3d3;
  --signal: #e9df75;
}
body { background: var(--ink); color: var(--paper); }
.installation, .scene-stage, .recognition-section { background: var(--ink); }
.scene-stage::before { opacity: .2; background-size: 64px 64px; }
.title-layer h2 { color: var(--signal); text-shadow: 0 0 9px rgba(233,223,117,.58), 0 0 34px rgba(233,223,117,.2); }
.title-layer { color: var(--signal); }
.profile-section { background: transparent; }
.profile-role, .practice-section h3, .award-count { color: var(--signal); }
.education-line, .experience-item, .award-grid, .award-ledger { border-color: var(--line); }
.award { background: var(--surface); color: #c9c7bb; border-color: var(--line); transform-origin: center center; }
.award-main { background: var(--surface); color: #c9c7bb; }
.award:hover, .award-ledger article:hover { outline-color: var(--signal); }
.award:hover { background: var(--signal); color: #10100e; }
.award-main:hover { background: var(--signal); color: #10100e; }
.work-section { background: var(--ink); color: var(--paper); border-color: var(--line); }
.works-head { border-color: var(--line); }
.archive-folder { background: #171715; border-color: var(--paper); box-shadow: 5px 5px 0 var(--signal); }
.folder-tab { background: #22221f; color: var(--paper); border-color: var(--paper); }
.folder-sheet { background: #e5e2d7; color: #111; border-color: #111; }
.contact-section { background: var(--signal); color: #10100e; }
.contact-section > a { text-shadow: 4px 4px 0 rgba(16,16,14,.12); }
.profile-section, .recognition-section, .work-section, .contact-section { isolation: isolate; }
.profile-section::before, .recognition-section::before, .work-section::before, .contact-section::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; opacity: .16; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 1px, transparent 1px 5px); }
.recognition-intro .award-count { display: inline-block; margin-left: .22em; color: var(--signal); font-size: .78em; line-height: .8; vertical-align: .02em; }

/* Award cards stay quiet at rest; signal color is reserved for the active card. */
.award-grid .award, .award-grid .award-main { background: var(--surface); color: #c9c7bb; }
.award-grid .award:hover, .award-grid .award-main:hover { background: var(--signal); color: #10100e; }
.recognition-intro .award-count { color: var(--signal); font-size: .78em; font-weight: 500; }

/* Layered archive folders: outlined black trays with a single active pull-out. */
.work-section { background: #070707; color: #f1eee3; padding-top: 126px; }
.works-head { max-width: 1000px; margin: 0 auto 92px; align-items: flex-end; border-bottom: 1px solid rgba(241,238,227,.45); }
.works-head h2 { font-size: clamp(46px, 6vw, 82px); letter-spacing: -.035em; }
.works-head span { color: #9a988e; }
.archive-stack { height: 640px; max-width: 940px; }
.archive-folder { height: 120px; border: 1px solid #f1eee3; border-radius: 10px 10px 0 0; background: #070707; box-shadow: none; transform: translateX(calc(-50% + var(--folder-x) + var(--folder-pull))) translateY(calc(var(--folder-lift) + var(--folder-enter))) rotate(var(--folder-rotation)); transition: border-color .3s ease; }
.archive-folder::after { inset: 9px 12px; border: 1px solid rgba(241,238,227,.38); border-radius: 7px 7px 0 0; }
.folder-tab { top: -31px; height: 31px; min-width: 160px; padding: 8px 13px 0; border: 1px solid #f1eee3; border-bottom: 0; border-radius: 10px 10px 0 0; background: #070707; color: #f1eee3; font-size: 10px; }
.folder-sheet { inset: 19px 17px 13px; padding: 16px 18px; border: 1px solid rgba(241,238,227,.75); border-radius: 6px 6px 0 0; background: #070707; color: #f1eee3; }
.folder-sheet span { color: #9a988e; }
.folder-sheet h3 { font-size: clamp(17px, 2.4vw, 30px); font-weight: 400; letter-spacing: .02em; }
.folder-sheet i { background: rgba(241,238,227,.55); }
.archive-folder:hover, .archive-folder:focus-visible { border-color: var(--signal); z-index: 8 !important; }
.archive-folder:hover .folder-tab, .archive-folder:focus-visible .folder-tab { color: var(--signal); border-color: var(--signal); }
.archive-folder:hover .folder-sheet, .archive-folder:focus-visible .folder-sheet { border-color: var(--signal); }
.recognition-intro { max-width: 1000px; margin-left: auto; margin-right: auto; }
.recognition-intro h2 { font-size: clamp(44px, 5.5vw, 72px); letter-spacing: -.03em; }
.profile-section { padding-left: max(35px, calc((100vw - 1000px) / 2)); padding-right: max(35px, calc((100vw - 1000px) / 2)); }
.profile-copy h2 { letter-spacing: -.03em; }
@media (max-width: 760px) {
  .work-section { padding-top: 88px; }
  .works-head { margin-bottom: 68px; }
  .archive-stack { height: 560px; }
  .archive-folder { height: 105px; }
  .folder-sheet { inset: 16px 12px 10px; padding: 13px 14px; }
}

/* Faithful accordion folder component: compact nested sheets + fixed front pocket. */
.folder-drawer { position: relative; width: min(700px, 88vw); height: 560px; margin: 0 auto; overflow: visible; isolation: isolate; }
.folder-drawer::before, .folder-drawer::after { content: ""; position: absolute; pointer-events: none; z-index: 0; opacity: .82; }
.folder-drawer::before { inset: -170px -210px -80px; background: repeating-radial-gradient(ellipse at 0 48%, transparent 0 130px, rgba(241,238,227,.52) 131px 132px, transparent 133px 240px); transform: rotate(-13deg); }
.folder-drawer::after { inset: -160px -190px -80px; background: repeating-linear-gradient(65deg, transparent 0 210px, rgba(241,238,227,.5) 211px 212px, transparent 213px 330px); }
.folder-card { position: absolute; left: 50%; width: 100%; height: 24px; transform: translateX(-50%) translateY(var(--folder-shift, 0)); transform-origin: 50% 100%; border: 1px solid rgba(241,238,227,.9); border-radius: 7px 7px 0 0; background: #0d0d0d; cursor: pointer; transition: transform .4s cubic-bezier(.16,1,.3,1), border-color .25s ease, background-color .25s ease; }
.folder-card-featured { top: 58px; height: 112px; z-index: 12; }
.folder-card:nth-child(2) { top: 168px; z-index: 11; }
.folder-card:nth-child(3) { top: 192px; z-index: 10; }
.folder-card:nth-child(4) { top: 216px; z-index: 9; }
.folder-card:nth-child(5) { top: 240px; z-index: 8; }
.folder-card:nth-child(6) { top: 264px; z-index: 7; }
.folder-card:nth-child(7) { top: 288px; z-index: 6; }
.folder-card:nth-child(8) { top: 312px; z-index: 5; }
.folder-tab { position: absolute; top: -20px; left: var(--tab-left, 8%); width: 126px; height: 21px; display: flex; align-items: center; justify-content: space-between; padding: 0 11px; border: 1px solid rgba(241,238,227,.9); border-bottom: 0; background: #0d0d0d; color: #f1eee3; clip-path: polygon(0 100%, 11% 22%, 17% 0, 87% 0, 100% 100%); font: 10px "Helvetica Neue", Arial, sans-serif; }
.folder-card:nth-child(3) .folder-tab { --tab-left: 27%; }
.folder-card:nth-child(4) .folder-tab { --tab-left: 60%; }
.folder-card:nth-child(5) .folder-tab { --tab-left: 13%; }
.folder-card:nth-child(6) .folder-tab { --tab-left: 56%; }
.folder-card:nth-child(7) .folder-tab { --tab-left: 28%; }
.folder-card:nth-child(8) .folder-tab { --tab-left: 12%; }
.folder-card:nth-child(even) .folder-tab { background: #f1eee3; color: #0d0d0d; clip-path: polygon(0 100%, 12% 0, 88% 0, 95% 25%, 100% 100%); }
.folder-card-inner { height: 100%; display: grid; place-items: center; align-content: start; gap: 5px; padding-top: 4px; text-align: center; }
.folder-card:not(.folder-card-featured) .folder-card-inner { opacity: 0; }
.folder-index { color: #88867f; font: 9px "Courier New", monospace; letter-spacing: 1px; }
.folder-card h3 { margin: 0; color: #f1eee3; font-size: 22px; font-weight: 500; }
.folder-card p { margin: 0; color: #88867f; font-size: 10px; }
.folder-card-featured .folder-card-inner { padding-top: 22px; }
.folder-card-featured h3 { font-size: 18px; }
.folder-card-featured p { line-height: 1.2; }
.folder-cap { color: #f1eee3; font-size: 22px; line-height: .8; transform: rotate(45deg); }
.folder-card:hover, .folder-card:focus-visible, .folder-card.is-open { z-index: 40 !important; border-color: #fff; transform: translateX(-50%) translateY(-80px); }
.folder-card:hover .folder-tab, .folder-card:focus-visible .folder-tab, .folder-card.is-open .folder-tab { background: #f1eee3; color: #0d0d0d; }
.folder-card:hover .folder-card-inner, .folder-card:focus-visible .folder-card-inner, .folder-card.is-open .folder-card-inner { opacity: 1; }
.folder-pocket { position: absolute; left: 50%; bottom: 0; z-index: 50; width: 92%; height: 132px; transform: translateX(-50%); display: grid; place-items: center; border: 1px solid #f1eee3; border-top: 9px double #f1eee3; background: #0d0d0d; clip-path: polygon(0 0, 100% 0, 93% 100%, 7% 100%); color: #f1eee3; font: 10px "Courier New", monospace; letter-spacing: 1.1px; }
.folder-pocket span { transform: translateY(12px); }
.folder-pocket sup { font-size: 7px; }
@media (max-width: 760px) {
  .folder-drawer { width: 94vw; height: 470px; }
  .folder-card-featured { top: 40px; height: 94px; }
  .folder-card:nth-child(2) { top: 134px; }
  .folder-card:nth-child(3) { top: 156px; }
  .folder-card:nth-child(4) { top: 178px; }
  .folder-card:nth-child(5) { top: 200px; }
  .folder-card:nth-child(6) { top: 222px; }
  .folder-card:nth-child(7) { top: 244px; }
  .folder-card:nth-child(8) { top: 266px; }
  .folder-tab { width: 112px; }
  .folder-pocket { height: 108px; }
}

/* Reference-matched drawer proportions. */
.accordion-work { padding-top: 110px; padding-bottom: 120px; }
.accordion-work-head { margin-bottom: 46px; }
.accordion-drawer { width: min(660px, 88vw); height: 520px; }
.drawer-card { width: 100%; height: 22px; border-width: 1px; border-radius: 7px 7px 0 0; }
.drawer-card:nth-child(1) { top: 38px !important; height: 106px !important; }
.drawer-card:nth-child(2) { top: 144px !important; }
.drawer-card:nth-child(3) { top: 166px !important; }
.drawer-card:nth-child(4) { top: 188px !important; }
.drawer-card:nth-child(5) { top: 210px !important; }
.drawer-card:not(:first-child) .drawer-card-inner { padding-top: 4px; }
.drawer-card:not(:first-child) .drawer-index, .drawer-card:not(:first-child) h3, .drawer-card:not(:first-child) p { opacity: 0; }
.drawer-tab { top: -20px !important; height: 21px; width: 118px; padding: 0 10px; font-size: 9px; }
.drawer-card:nth-child(2) .drawer-tab { left: 4%; }
.drawer-card:nth-child(3) .drawer-tab { left: 28%; }
.drawer-card:nth-child(4) .drawer-tab { left: 58%; }
.drawer-card:nth-child(5) .drawer-tab { left: 12%; }
.drawer-card:nth-child(2) .drawer-tab, .drawer-card:nth-child(4) .drawer-tab { background: #f1eee3; color: #050505; }
.drawer-card:not(:first-child).is-open, .drawer-card:not(:first-child):hover, .drawer-card:not(:first-child):focus-visible { height: 130px; }
.drawer-card:not(:first-child).is-open .drawer-card-inner, .drawer-card:not(:first-child):hover .drawer-card-inner, .drawer-card:not(:first-child):focus-visible .drawer-card-inner { padding-top: 36px; }
.drawer-front { width: 88%; height: 128px; }
.drawer-front::before { content: ""; position: absolute; inset: 18px 32px; border-top: 1px solid rgba(241,238,227,.3); pointer-events: none; }
@media (max-width: 760px) {
  .accordion-drawer { width: 94vw; height: 430px; }
  .drawer-card:nth-child(1) { top: 28px !important; height: 90px !important; }
  .drawer-card:nth-child(2) { top: 118px !important; }
  .drawer-card:nth-child(3) { top: 138px !important; }
  .drawer-card:nth-child(4) { top: 158px !important; }
  .drawer-card:nth-child(5) { top: 178px !important; }
  .drawer-front { height: 104px; }
}

/* Final perspective and line-contrast pass for the drawer. */
.accordion-work .accordion-drawer { perspective: 1100px; transform: perspective(1100px) rotateX(4deg); transform-origin: 50% 0%; }
.accordion-work .drawer-card { width: 90% !important; background: #0d0d0d !important; border-color: rgba(255,255,255,.9) !important; box-shadow: none; }
.accordion-work .drawer-card::before { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.24); border-radius: inherit; pointer-events: none; }
.accordion-work .drawer-tab { border-color: rgba(255,255,255,.95) !important; color: #fff !important; background: #0d0d0d !important; }
.accordion-work .drawer-card:nth-child(2) .drawer-tab, .accordion-work .drawer-card:nth-child(4) .drawer-tab { background: #f1eee3 !important; color: #0d0d0d !important; }
.accordion-work .drawer-front { width: 96% !important; background: #0d0d0d !important; border-color: #fff !important; z-index: 50 !important; }
.accordion-work .drawer-front::after { content: ""; position: absolute; inset: 11px 18px; border-top: 1px solid rgba(255,255,255,.25); pointer-events: none; }
@media (max-width: 760px) {
  .accordion-work .accordion-drawer { transform: perspective(900px) rotateX(3deg); }
  .accordion-work .drawer-card { width: 94% !important; }
  .accordion-work .drawer-front { width: 98% !important; }
}

/* Accordion work drawer: centered, open, lightly isometric file system. */
.accordion-work { position: relative; z-index: 10; padding: 150px max(35px, calc((100vw - 1240px) / 2)) 170px; background: #050505; color: #f1eee3; overflow: hidden; }
.accordion-work-head { width: min(760px, 88vw); margin: 0 auto 92px; display: flex; justify-content: space-between; align-items: end; border-bottom: 1px solid rgba(241,238,227,.35); padding-bottom: 18px; }
.accordion-work-head h2 { margin: 0; font-size: clamp(48px, 6vw, 84px); line-height: .86; font-weight: 500; letter-spacing: -.03em; }
.accordion-work-head p { margin: 0; color: #8e8c85; font: 10px "Courier New", monospace; letter-spacing: 1px; }
.accordion-drawer { position: relative; width: min(760px, 88vw); height: 650px; margin: 0 auto; perspective: 1100px; }
.drawer-card { position: absolute; left: 50%; top: 78px; width: 100%; height: 162px; transform: translateX(-50%) translateY(var(--drawer-shift, 0px)) scale(var(--drawer-scale, 1)); transform-origin: 50% 100%; border: 1px solid #f1eee3; border-radius: 9px 9px 0 0; background: #050505; transition: border-color .3s ease; }
.drawer-card:nth-child(1) { top: 34px; height: 240px; z-index: 7; }
.drawer-card:nth-child(2) { top: 218px; z-index: 6; }
.drawer-card:nth-child(3) { top: 248px; z-index: 5; }
.drawer-card:nth-child(4) { top: 278px; z-index: 4; }
.drawer-card:nth-child(5) { top: 308px; z-index: 3; }
.drawer-card:not(:first-child) { background: transparent; }
.drawer-tab { position: absolute; top: -28px; left: 12%; width: 150px; height: 29px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; border: 1px solid #f1eee3; border-bottom: 0; background: #050505; color: #f1eee3; clip-path: polygon(0 100%, 9% 28%, 16% 0, 88% 0, 100% 100%); font: 10px "Helvetica Neue", Arial, sans-serif; }
.drawer-card:nth-child(3) .drawer-tab { left: 25%; }
.drawer-card:nth-child(4) .drawer-tab { left: 64%; }
.drawer-card:nth-child(5) .drawer-tab { left: 14%; }
.drawer-card:nth-child(even) .drawer-tab { background: #f1eee3; color: #050505; clip-path: polygon(0 100%, 12% 0, 88% 0, 95% 27%, 100% 100%); }
.drawer-card-inner { height: 100%; display: grid; justify-items: center; align-content: center; gap: 8px; text-align: center; }
.drawer-card:not(:first-child) .drawer-card-inner { align-content: start; padding-top: 48px; opacity: .94; }
.drawer-index { color: #85837c; font: 9px "Courier New", monospace; letter-spacing: 1.1px; }
.drawer-card h3 { margin: 0; font-size: clamp(22px, 3vw, 38px); line-height: .95; font-weight: 500; }
.drawer-card p { margin: 0; color: #85837c; font-size: 11px; line-height: 1.35; }
.drawer-cap { color: #f1eee3; font-size: 30px; transform: rotate(45deg); }
.drawer-card:not(:first-child) h3, .drawer-card:not(:first-child) p { opacity: 0; }
.drawer-card.is-open, .drawer-card:hover, .drawer-card:focus-visible { z-index: 20 !important; border-color: var(--signal); }
.drawer-card.is-open h3, .drawer-card.is-open p, .drawer-card:hover h3, .drawer-card:hover p, .drawer-card:focus-visible h3, .drawer-card:focus-visible p { opacity: 1; }
.drawer-front { position: absolute; left: 50%; bottom: 0; z-index: 30; width: 92%; height: 138px; transform: translateX(-50%); display: grid; place-items: center; border: 1px solid #f1eee3; border-top: 11px double #f1eee3; background: #050505; clip-path: polygon(0 0, 100% 0, 93% 100%, 7% 100%); color: #f1eee3; font: 10px "Courier New", monospace; letter-spacing: 1.2px; }
.award-count { font-size: clamp(34px, 5vw, 68px) !important; line-height: .75; }
.recognition-intro .award-count { display: inline-block; font-size: clamp(34px, 5vw, 68px) !important; transform-origin: left center; }

/* Compact resting accordion rows that expand into full cards on hover. */
.drawer-card:not(:first-child) { height: 40px; transition: height .62s cubic-bezier(.22,.8,.24,1), transform .62s cubic-bezier(.22,.8,.24,1), border-color .25s ease; }
.drawer-card:nth-child(2) { top: 218px; }
.drawer-card:nth-child(3) { top: 258px; }
.drawer-card:nth-child(4) { top: 298px; }
.drawer-card:nth-child(5) { top: 338px; }
.drawer-card:nth-child(2) { z-index: 8; }
.drawer-card:nth-child(3) { z-index: 9; }
.drawer-card:nth-child(4) { z-index: 10; }
.drawer-card:nth-child(5) { z-index: 11; }
.drawer-card:not(:first-child) .drawer-card-inner { padding-top: 10px; }
.drawer-card:not(:first-child).is-open, .drawer-card:not(:first-child):hover, .drawer-card:not(:first-child):focus-visible { height: 164px; }
.drawer-card:not(:first-child).is-open .drawer-card-inner, .drawer-card:not(:first-child):hover .drawer-card-inner, .drawer-card:not(:first-child):focus-visible .drawer-card-inner { padding-top: 48px; }
.drawer-card:not(:first-child) .drawer-index { opacity: 1; }
.drawer-card:not(:first-child).is-open h3, .drawer-card:not(:first-child):hover h3, .drawer-card:not(:first-child):focus-visible h3,
.drawer-card:not(:first-child).is-open p, .drawer-card:not(:first-child):hover p, .drawer-card:not(:first-child):focus-visible p { opacity: 1; }
.recognition-intro h2 { display: flex; align-items: baseline; gap: .18em; }
.recognition-intro .award-count { color: var(--signal); font-size: clamp(48px, 8vw, 108px) !important; font-weight: 600; letter-spacing: -.04em; }
@media (max-width: 760px) {
  .drawer-card:not(:first-child) { height: 34px; }
  .drawer-card:nth-child(2) { top: 174px; }
  .drawer-card:nth-child(3) { top: 208px; }
  .drawer-card:nth-child(4) { top: 242px; }
  .drawer-card:nth-child(5) { top: 276px; }
  .drawer-card:not(:first-child).is-open, .drawer-card:not(:first-child):hover, .drawer-card:not(:first-child):focus-visible { height: 138px; }
}
@media (max-width: 760px) {
  .accordion-work { padding: 100px 20px 120px; }
  .accordion-work-head { display: block; margin-bottom: 72px; }
  .accordion-work-head p { margin-top: 16px; }
  .accordion-drawer { width: 94vw; height: 520px; }
  .drawer-card { height: 138px; }
  .drawer-card:nth-child(1) { top: 24px; height: 190px; }
  .drawer-card:nth-child(2) { top: 174px; }
  .drawer-card:nth-child(3) { top: 198px; }
  .drawer-card:nth-child(4) { top: 222px; }
  .drawer-card:nth-child(5) { top: 246px; }
  .drawer-tab { width: 125px; }
  .drawer-front { height: 105px; }
}

/* Final accordion geometry: all pages share one axis and overlap heavily at rest. */
.archive-folder { left: 50% !important; width: min(640px, 90%) !important; transform: translateX(-50%) translateY(calc(var(--folder-lift, 0px) + var(--folder-enter, 0px))) !important; rotate: 0deg !important; }
.archive-folder:nth-child(1) { top: 42px !important; height: 164px !important; z-index: 7; }
.archive-folder:nth-child(2) { top: 92px !important; z-index: 6; }
.archive-folder:nth-child(3) { top: 116px !important; z-index: 5; }
.archive-folder:nth-child(4) { top: 140px !important; z-index: 4; }
.archive-folder:nth-child(5) { top: 164px !important; z-index: 3; }
.folder-tab { z-index: 40; }
.archive-folder:not(:first-child) .folder-sheet { opacity: .92; }
.archive-folder:not(:first-child) { z-index: auto !important; background: transparent; }
.archive-folder:not(:first-child).is-active, .archive-folder:not(:first-child):hover, .archive-folder:not(:first-child):focus-visible { z-index: 50 !important; background: #050505; }
.archive-folder:not(:first-child) .folder-sheet h3 { opacity: 0; }
.archive-folder.is-active .folder-sheet h3, .archive-folder:hover .folder-sheet h3, .archive-folder:focus-visible .folder-sheet h3 { opacity: 1; }
@media (max-width: 760px) {
  .archive-folder { width: 94% !important; }
  .archive-folder:nth-child(1) { top: 34px !important; height: 145px !important; }
  .archive-folder:nth-child(2) { top: 74px !important; }
  .archive-folder:nth-child(3) { top: 96px !important; }
  .archive-folder:nth-child(4) { top: 118px !important; }
  .archive-folder:nth-child(5) { top: 140px !important; }
}

/* Interactive card drawer: asymmetric tabs, nested cards and front occlusion. */
.archive-stack { --cabinet-width: min(620px, 82vw); height: 620px; overflow: visible; }
.archive-folder { width: var(--cabinet-width); height: 158px; border: 1px solid #f1eee3; border-radius: 8px 8px 0 0; background: #070707; box-shadow: none; overflow: visible; }
.archive-folder:nth-child(1) { top: 54px; height: 166px; z-index: 6; }
.archive-folder:nth-child(2) { top: 244px; z-index: 5; }
.archive-folder:nth-child(3) { top: 279px; z-index: 4; }
.archive-folder:nth-child(4) { top: 314px; z-index: 3; }
.archive-folder:nth-child(5) { top: 349px; z-index: 2; }
.folder-tab { top: -28px; left: var(--tab-x); width: 152px; height: 29px; padding: 0 15px; display: flex; align-items: center; justify-content: space-between; border: 0; border-radius: 0; background: #f1eee3; color: #f1eee3; clip-path: polygon(0 100%, 9% 28%, 15% 0, 88% 0, 100% 100%); }
.folder-tab::before { content: ""; position: absolute; inset: 1px 1px 0; background: #070707; clip-path: inherit; z-index: -1; }
.folder-tab span, .folder-tab b { position: relative; z-index: 1; font: 10px "Helvetica Neue", Arial, sans-serif; font-weight: 400; }
.archive-folder:nth-child(even) .folder-tab { background: #f1eee3; color: #070707; clip-path: polygon(0 100%, 12% 0, 88% 0, 94% 25%, 100% 100%); }
.archive-folder:nth-child(even) .folder-tab::before { background: #f1eee3; }
.archive-folder:nth-child(1) .folder-tab { left: 37%; width: 142px; }
.archive-folder:nth-child(2) .folder-tab { left: 4%; }
.archive-folder:nth-child(3) .folder-tab { left: 25%; }
.archive-folder:nth-child(4) .folder-tab { left: 64%; }
.archive-folder:nth-child(5) .folder-tab { left: 14%; }
.folder-sheet { inset: 0; padding: 46px 26px 22px; display: grid; grid-template-columns: 40px 1fr auto; align-content: start; align-items: center; gap: 16px; border: 0; background: transparent; }
.folder-sheet span { color: #a5a39a; font: 10px "Courier New", monospace; }
.folder-sheet h3 { margin: 0; color: #f1eee3; font-size: 22px; font-weight: 500; text-align: center; }
.folder-sheet p { display: none; }
.folder-sheet i { width: 72px; background: rgba(241,238,227,.45); }
.archive-folder:nth-child(1) .folder-sheet { padding: 42px 20px 20px; display: flex; flex-direction: column; justify-content: center; gap: 7px; }
.archive-folder:nth-child(1) .folder-sheet::before { content: "◇"; color: #f1eee3; font-size: 24px; line-height: 1; transform: rotate(45deg); }
.archive-folder:nth-child(1) .folder-sheet span { order: 4; margin: 0; color: #77766f; font-size: 8px; letter-spacing: 1.2px; }
.archive-folder:nth-child(1) .folder-sheet h3 { font-size: 18px; letter-spacing: 0; }
.archive-folder:nth-child(1) .folder-sheet p { display: block; margin: 0; color: #77766f; font-size: 10px; line-height: 1.18; text-align: center; }
.archive-stack::before { z-index: 20; }
.archive-stack::after { content: "▱  HILLORIS DESIGNER"; z-index: 21; }
.archive-folder.is-active { z-index: 30 !important; }
@media (max-width: 760px) {
  .archive-stack { --cabinet-width: min(92vw, 520px); height: 540px; }
  .archive-folder { height: 138px; }
  .archive-folder:nth-child(1) { top: 42px; height: 145px; }
  .archive-folder:nth-child(2) { top: 208px; }
  .archive-folder:nth-child(3) { top: 240px; }
  .archive-folder:nth-child(4) { top: 272px; }
  .archive-folder:nth-child(5) { top: 304px; }
  .folder-tab { width: 122px; }
  .archive-folder:nth-child(1) .folder-tab { left: 31%; }
  .archive-folder:nth-child(4) .folder-tab { left: 57%; }
}

/* Accordion folder: one black housing, tightly nested pages, one page pulled on hover. */
.work-section { background: #050505 !important; color: #f1eee3; border-top: 1px solid rgba(241,238,227,.35); }
.works-head { border-color: rgba(241,238,227,.42); }
.archive-stack { width: min(100%, 720px); height: 610px; margin-inline: auto; overflow: visible; }
.archive-stack::before { width: min(640px, 90%); height: 112px; background: #050505; border-color: #f1eee3; border-top: 10px double #f1eee3; z-index: 30; }
.archive-stack::after { color: #f1eee3; z-index: 31; }
.archive-folder { left: 50%; width: min(640px, 90%); height: 164px; border: 1px solid #f1eee3; border-radius: 10px 10px 0 0; background: #050505; transform: translateX(-50%) translateY(calc(var(--folder-lift, 0px) + var(--folder-enter, 0px))); transition: border-color .25s ease; }
.archive-folder:nth-child(1) { top: 42px; z-index: 7; }
.archive-folder:nth-child(2) { top: 207px; z-index: 6; }
.archive-folder:nth-child(3) { top: 231px; z-index: 5; }
.archive-folder:nth-child(4) { top: 255px; z-index: 4; }
.archive-folder:nth-child(5) { top: 279px; z-index: 3; }
.archive-folder::after { content: none; }
.folder-tab { border: 1px solid #f1eee3; border-bottom: 0; background: #050505; color: #f1eee3; }
.folder-tab::before { display: none; }
.archive-folder:nth-child(even) .folder-tab { background: #050505; color: #f1eee3; }
.folder-sheet { color: #f1eee3; background: transparent; }
.folder-sheet h3 { color: #f1eee3; }
.archive-folder:nth-child(1) .folder-sheet { padding-top: 42px; }
.archive-folder:not(:first-child) .folder-sheet { padding-top: 40px; }
.archive-folder:not(:first-child) .folder-sheet h3 { font-size: 20px; }
.archive-folder:hover, .archive-folder:focus-visible, .archive-folder.is-active { border-color: var(--signal); }
.archive-folder:hover .folder-tab, .archive-folder:focus-visible .folder-tab, .archive-folder.is-active .folder-tab { border-color: var(--signal); color: var(--signal); }
@media (max-width: 760px) {
  .archive-stack { height: 530px; }
  .archive-stack::before { width: 94%; height: 94px; }
  .archive-folder { width: 94%; height: 140px; }
  .archive-folder:nth-child(1) { top: 34px; }
  .archive-folder:nth-child(2) { top: 175px; }
  .archive-folder:nth-child(3) { top: 196px; }
  .archive-folder:nth-child(4) { top: 217px; }
  .archive-folder:nth-child(5) { top: 238px; }
}

/* Filing-cabinet composition inspired by the supplied reference. */
.archive-stack { --cabinet-width: min(620px, 78vw); height: 610px; padding-top: 56px; }
.archive-stack::before { content: ""; position: absolute; left: 50%; bottom: 0; width: var(--cabinet-width); height: 116px; transform: translateX(-50%); border: 1px solid #f1eee3; border-top: 18px double #f1eee3; background: #070707; clip-path: polygon(0 0, 100% 0, 93% 100%, 7% 100%); z-index: 10; }
.archive-stack::after { content: "PLEXUS / ARCHIVE SYSTEM"; position: absolute; left: 50%; bottom: 46px; transform: translateX(-50%); color: #f1eee3; font: 10px "Courier New", monospace; letter-spacing: 1.4px; z-index: 11; }
.archive-folder { left: 50%; width: var(--cabinet-width); height: 40px; border-radius: 7px 7px 0 0; z-index: 2; }
.archive-folder::after { content: none; }
.folder-tab { top: -20px; height: 21px; min-width: 118px; padding: 5px 10px 0; border-radius: 8px 8px 0 0; font-size: 9px; }
.folder-sheet { inset: 0; padding: 11px 20px 0; border: 0; border-radius: 0; background: transparent; }
.folder-sheet span { font-size: 9px; }
.folder-sheet h3 { font-size: 14px; }
.archive-folder:nth-child(1) { top: 56px; height: 164px; z-index: 7; }
.archive-folder:nth-child(1) .folder-tab { top: -29px; height: 29px; min-width: 154px; padding-top: 7px; }
.archive-folder:nth-child(1) .folder-sheet { inset: 0; padding: 46px 20px 0; display: grid; place-content: center; justify-items: center; text-align: center; }
.archive-folder:nth-child(1) .folder-sheet span { margin-bottom: 8px; }
.archive-folder:nth-child(1) .folder-sheet i { display: none; }
.archive-folder:nth-child(1) .folder-sheet h3 { font-size: clamp(22px, 3vw, 36px); }
.archive-folder:nth-child(2) { top: 238px; }
.archive-folder:nth-child(3) { top: 278px; }
.archive-folder:nth-child(4) { top: 318px; }
.archive-folder:nth-child(5) { top: 358px; }
.archive-folder:nth-child(even) .folder-tab { background: #f1eee3; color: #070707; }
.archive-folder:nth-child(2) .folder-tab { left: 70%; }
.archive-folder:nth-child(3) .folder-tab { left: 20%; }
.archive-folder:nth-child(4) .folder-tab { left: 58%; }
.archive-folder:nth-child(5) .folder-tab { left: 12%; }
.archive-folder:hover, .archive-folder:focus-visible { z-index: 9 !important; }
@media (max-width: 760px) {
  .archive-stack { height: 540px; padding-top: 42px; }
  .archive-stack::before { width: 92%; height: 94px; }
  .archive-stack::after { bottom: 38px; font-size: 8px; }
  .archive-folder:nth-child(1) { top: 42px; height: 132px; }
  .archive-folder:nth-child(2) { top: 194px; }
  .archive-folder:nth-child(3) { top: 235px; }
  .archive-folder:nth-child(4) { top: 276px; }
  .archive-folder:nth-child(5) { top: 317px; }
}

/* Remove development chrome from the hero. */
.corner, .terminal-info, .control-deck, .ascii-panel, .frame-count { display: none !important; }
.title-kicker, .title-caption { display: none; }.title-layer h2 { font-weight: 600; text-shadow: 0 0 12px rgba(241,223,114,.38); }

/* Monochrome pixel desktop. */
.profile-section { grid-template-columns: minmax(0, 560px) minmax(420px, 560px); gap: 80px; align-items: start; padding-top: 11vh; }.profile-copy h2 { font-size: 68px; }.profile-role { margin: 12px 0 38px; color: #c8c8c8; }.education-line, .experience-item { border-color: rgba(225,225,225,.34); }.education-line span, .experience-meta time { color: #999; }.education-line strong, .experience-item h4 { color: #ededed; }.experience-meta { color: #bbb; }.practice-section h3 { color: #e9e9e9; }.experience-item p, .profile-body { color: #b5b5b5; }
.retro-desktop { width: 560px; height: 485px; color: #e4e4e4; font-family: "Courier New", monospace; perspective: 1000px; transform-origin: 50% 50%; cursor: default; }.retro-desktop:hover { z-index: 12; }
.desktop-folder { z-index: 0; color: #bbb; font-size: 10px; letter-spacing: .4px; }.desktop-folder span { width: 42px; height: 30px; border-color: #bbb; }.desktop-folder span::before { border-color: #bbb; }.trait-curious { top: 8px; left: 10px; }.trait-observer { top: 152px; left: 36px; }.trait-patient { top: 280px; left: 4px; }
.player-window, .wishlist-window, .portrait-window { position: absolute; border: 2px solid #d6d6d6; background: #050505; box-shadow: 5px 5px 0 rgba(210,210,210,.18); overflow: hidden; }.player-window { z-index: 1; left: 0; bottom: 0; width: 410px; height: 254px; }.wishlist-window { z-index: 2; top: 74px; right: 1px; width: 430px; height: 264px; }.portrait-window { z-index: 3; top: 130px; right: 42px; width: 188px; background: #050505; }
.window-title { height: 28px; padding: 4px 5px 4px 9px; border-color: #d6d6d6; background: #d6d6d6; color: #111; font-size: 12px; font-weight: 700; }.window-title span { background: transparent; padding: 0; }.window-title i { width: 14px; height: 14px; border-color: #111; background: #d6d6d6; }
.player-screen { height: 143px; margin: 10px 11px 0; border: 1px solid #bfbfbf; background: repeating-linear-gradient(0deg, #070707 0 3px, #111 3px 5px); }.player-controls { padding: 8px 10px 10px; color: #ddd; font-size: 10px; }.progress-track { position: relative; height: 10px; margin-bottom: 4px; border: 1px solid #c9c9c9; }.progress-track b { position: absolute; left: 12%; top: -3px; width: 8px; height: 15px; border: 1px solid #ddd; background: #222; }.player-controls time { display: block; text-align: right; margin-bottom: 5px; }.player-actions { display: flex; align-items: center; gap: 4px; }.player-actions button { width: 28px; height: 23px; padding: 0; border: 1px solid #d4d4d4; background: #090909; color: #e5e5e5; font: 11px "Courier New", monospace; cursor: pointer; }.player-actions button:hover { background: #e5e5e5; color: #111; }.player-actions > span { margin-left: 6px; font-size: 20px; }.volume { display: flex; align-items: center; gap: 5px; margin-left: auto; }.volume b { font-size: 16px; }.volume i { position: relative; display: block; width: 66px; height: 8px; border: 1px solid #ddd; }.volume i::after { content: ""; position: absolute; right: 12px; top: -3px; width: 7px; height: 13px; border: 1px solid #ddd; background: #111; }
.wishlist-body { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 33px 34px; }.wishlist-body div { display: grid; justify-items: center; gap: 8px; color: #d5d5d5; font-size: 10px; }.wishlist-body span { display: grid; place-items: center; width: 55px; height: 44px; border: 2px solid #d5d5d5; font-size: 31px; line-height: 1; }.wishlist-body b { font-weight: 400; }.window-scroll { position: absolute; top: 30px; right: 8px; bottom: 10px; width: 12px; border-left: 1px solid #d5d5d5; }.window-scroll i { display: block; width: 10px; height: 42px; margin-left: 1px; background: #cfcfcf; }
.portrait-window .window-body { height: 247px; padding: 8px; background: #050505; }.portrait-window .window-body img { width: 100%; height: 100%; object-fit: contain; object-position: center center; filter: grayscale(1) contrast(1.12); }.window-footer { height: 23px; padding: 5px 7px; border-color: #d6d6d6; color: #bbb; font-size: 9px; }
@media (max-width: 1180px) { .profile-section { grid-template-columns: minmax(0, 500px) minmax(350px, 470px); gap: 42px; }.retro-desktop { width: 470px; transform: scale(.88); transform-origin: top right; margin-bottom: -55px; }.profile-copy h2 { font-size: 56px; } }
@media (max-width: 900px) { .profile-section { grid-template-columns: minmax(0, 1fr) 370px; gap: 20px; }.retro-desktop { width: 430px; transform: scale(.78); margin-bottom: -102px; }.profile-copy h2 { font-size: 46px; } }
@media (max-width: 640px) { .profile-section { min-height: 205dvh; gap: 28px; }.profile-copy h2 { font-size: 48px; }.retro-desktop { align-self: center; width: 560px; max-width: none; transform: scale(.62); transform-origin: top center; margin: 0 -116px -174px; }.portrait-window { right: 42px; }.recognition-section { padding-top: 112px; } }

.char { display: inline-block; will-change: transform, opacity; }

/* Window pop is intentionally separate from the desktop hover scale. */
.retro-desktop {
  --desktop-scale: 1;
  --desktop-hover: 1;
  --desktop-pop: 1;
  --desktop-pop-y: 0px;
  --desktop-rotation: 0deg;
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--desktop-pop-y)) scale(calc(var(--desktop-scale) * var(--desktop-hover) * var(--desktop-pop))) rotate(var(--desktop-rotation));
  transform-origin: center;
  will-change: transform, opacity;
}
.title-layer h2 { text-shadow: 0 0 5px rgba(255, 242, 152, 1), 0 0 20px rgba(249, 218, 67, .9), 0 0 48px rgba(230, 188, 28, .6), 0 0 86px rgba(230, 188, 28, .28); }
.portrait-window { width: 244px; right: 24px; top: 108px; }
.portrait-window .window-body { height: 278px; }
.player-screen { position: relative; overflow: hidden; background: #0a0a0a; }
.mono-shards { position: absolute; inset: 0; opacity: .9; background: linear-gradient(135deg, #0a0a0a 0 30%, #303030 30% 48%, #0c0c0c 48% 100%); }
.mono-shards i { position: absolute; display: block; inset: 0; }
.mono-shards i:nth-child(1) { background: #eeeeee; clip-path: polygon(8% 81%, 30% 17%, 46% 77%); opacity: .88; }
.mono-shards i:nth-child(2) { background: #777; clip-path: polygon(30% 17%, 56% 8%, 70% 56%, 46% 77%); opacity: .96; }
.mono-shards i:nth-child(3) { background: #202020; clip-path: polygon(56% 8%, 95% 25%, 70% 56%); }
.mono-shards i:nth-child(4) { background: #bdbdbd; clip-path: polygon(46% 77%, 70% 56%, 90% 91%, 24% 96%); opacity: .78; }
.mono-shards i:nth-child(5) { background: #555; clip-path: polygon(0 0, 30% 17%, 8% 81%, 0 64%); }
.mono-shards i:nth-child(6) { background: repeating-linear-gradient(135deg, rgba(255,255,255,.14) 0 2px, transparent 2px 5px); mix-blend-mode: screen; opacity: .45; }
.award-ledger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid #494635; border-left: 1px solid #494635; }
.award-ledger article { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: baseline; gap: 16px; min-height: 66px; padding: 18px 20px; border-right: 1px solid #494635; border-bottom: 1px solid #494635; background: #0d0d0c; color: #c9c9c6; transition: background .25s ease, color .25s ease; }
.award-ledger article:hover { background: #d8d8d5; color: #111; }
.award-ledger time { color: #898989; font: 10px "Courier New", monospace; }
.award-ledger p { margin: 0; font-size: 13px; line-height: 1.45; }
.award-ledger strong { color: inherit; font: 10px "Courier New", monospace; font-weight: 400; white-space: nowrap; }
@media (max-width: 1180px) { .retro-desktop { --desktop-scale: .88; } }
@media (max-width: 900px) { .retro-desktop { --desktop-scale: .78; } }
@media (max-width: 760px) { .award-ledger { grid-template-columns: 1fr; }.award-ledger article { grid-template-columns: 48px minmax(0, 1fr); gap: 10px; }.award-ledger strong { grid-column: 2; }.portrait-window { width: 226px; right: 26px; } }
@media (max-width: 640px) { .retro-desktop { --desktop-scale: .62; } }
@media (prefers-reduced-motion: reduce) { .retro-desktop { opacity: 1; visibility: visible; } }

/* Keep the personal system in the same dithered low-poly language as the installation. */
.retro-desktop { isolation: isolate; }
.wishlist-window { background: linear-gradient(135deg, #0a0a0a 0 22%, #4b4b4b 22% 22.8%, #181818 22.8% 62%, #737373 62% 62.8%, #0a0a0a 62.8% 100%); }
.wishlist-body { position: relative; background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.09) 0 2px, transparent 2px 6px), repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 5px); }
.wishlist-body::before { content: ""; position: absolute; inset: 12px 18px; pointer-events: none; opacity: .42; background: linear-gradient(125deg, transparent 0 24%, #e4e4e4 24% 25%, transparent 25% 57%, #777 57% 58%, transparent 58%); mix-blend-mode: screen; }
.portrait-window { background: linear-gradient(135deg, #050505 0 58%, #777 58% 58.8%, #171717 58.8% 100%); transform-origin: 50% 50%; will-change: transform; }
.player-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .52; background-image: linear-gradient(90deg, transparent 0 14%, rgba(255,255,255,.26) 14% 17%, transparent 17% 43%, rgba(255,255,255,.14) 43% 47%, transparent 47% 100%), repeating-linear-gradient(0deg, rgba(255,255,255,.17) 0 2px, transparent 2px 6px); background-size: 92px 52px, 100% 100%; animation: player-signal 1.2s steps(4) infinite; mix-blend-mode: screen; }
.mono-shards { animation: player-geometry 1.8s steps(4) infinite; transform-origin: 50% 50%; }
@keyframes player-signal { 0% { background-position: 0 0, 0 0; opacity: .28; } 35% { background-position: 19px -7px, 0 0; opacity: .68; } 65% { background-position: -27px 13px, 0 0; opacity: .38; } 100% { background-position: 0 0, 0 0; opacity: .52; } }
@keyframes player-geometry { 0%, 100% { transform: scale(1) translate(0, 0); filter: contrast(1); } 45% { transform: scale(1.06) translate(-4px, 2px); filter: contrast(1.32); } 72% { transform: scale(.97) translate(3px, -2px); filter: contrast(.88); } }

/* Award cards are content-led: no layout shift or yellow hover flash. */
.award-grid { grid-auto-rows: minmax(216px, auto); }
.award { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-height: 216px; transform: none; transition: background-color .12s linear, border-color .12s linear, color .12s linear; }
.award:hover { background: #161616; color: #ededed; transform: none; }
.award h3 { margin: auto 0 0; line-height: 1.04; }
.award p { margin: 0; }
.award-main { min-height: 432px; background: #d8cf8c; }
.award-main:hover { background: #d8cf8c; color: #10100d; }
.award-main h3 { margin-top: auto; }
.award-ledger article { transition: background-color .12s linear, color .12s linear; }
@media (max-width: 900px) { .award-grid { grid-auto-rows: minmax(224px, auto); }.award-main { min-height: 448px; } }
@media (max-width: 760px) { .award-grid { grid-auto-rows: minmax(204px, auto); }.award-main { min-height: 408px; } }
@media (prefers-reduced-motion: reduce) { .player-screen::after, .mono-shards { animation: none; } }

/* Windows 3.1 / System 6 window chrome: square bevels, stripes, and ordered dither. */
.title-layer h2 { font-size: clamp(78px, 8.9vw, 148px); line-height: .84; }
.player-window, .wishlist-window, .portrait-window { border: 2px solid #111; outline: 1px solid #e5e5e5; box-shadow: inset 1px 1px #fff, inset -1px -1px #4c4c4c, 5px 5px 0 rgba(210,210,210,.22); background-color: #a6a6a6; background-image: conic-gradient(#747474 25%, #bdbdbd 0 50%, #747474 0 75%, #bdbdbd 0); background-size: 4px 4px; }
.window-title { position: relative; height: 25px; padding: 3px 4px 3px 26px; border: 0; border-bottom: 1px solid #111; background: repeating-linear-gradient(90deg, #111 0 1px, #d6d6d6 1px 3px); color: #111; }
.window-title::before { content: ""; position: absolute; left: 5px; top: 5px; width: 12px; height: 12px; border: 1px solid #111; background: conic-gradient(#222 25%, #e8e8e8 0 50%, #222 0 75%, #e8e8e8 0); background-size: 2px 2px; }
.window-title span { position: relative; z-index: 1; padding: 1px 7px; background: #e9e9e9; color: #111; letter-spacing: .2px; }
.window-title i { position: relative; z-index: 1; width: 13px; height: 13px; border: 1px solid #111; box-shadow: inset 1px 1px #fff, inset -1px -1px #777; background: #d8d8d8; }
.window-menu { display: flex; align-items: center; gap: 13px; height: 17px; padding: 0 8px; border-bottom: 1px solid #111; background: #e2e2e2; color: #111; font-size: 9px; line-height: 1; }
.window-menu span::first-letter { text-decoration: underline; }
.player-screen { height: 126px; margin-top: 7px; border: 1px solid #111; outline: 1px solid #efefef; background-color: #5e5e5e; background-image: linear-gradient(135deg, #111 0 22%, #9c9c9c 22% 47%, #3b3b3b 47% 70%, #d8d8d8 70% 100%), conic-gradient(#ddd 25%, transparent 0 50%, #ddd 0 75%, transparent 0); background-size: 100% 100%, 4px 4px; }
.wishlist-body { padding-top: 25px; background-color: #929292; background-image: linear-gradient(135deg, #d8d8d8 0%, #777 48%, #222 100%), conic-gradient(rgba(255,255,255,.7) 25%, transparent 0 50%, rgba(255,255,255,.7) 0 75%, transparent 0); background-size: 100% 100%, 4px 4px; background-blend-mode: multiply, screen; }
.portrait-window .window-body { height: 259px; padding: 7px; border-top: 0; background-color: #757575; background-image: conic-gradient(#bdbdbd 25%, #5d5d5d 0 50%, #bdbdbd 0 75%, #5d5d5d 0); background-size: 4px 4px; }
.portrait-window .window-body img { position: relative; z-index: 1; background: #000; }
.window-footer { border-top: 1px solid #111; background: #d8d8d8; color: #111; }
.award-count { display: inline-block; margin-left: .16em; color: #e6d98f; font-style: normal; font-size: .58em; font-weight: 400; vertical-align: .12em; letter-spacing: 0; }
@media (max-width: 640px) { .title-layer h2 { font-size: clamp(60px, 16vw, 92px); }.portrait-window .window-body { height: 232px; }.player-screen { height: 117px; } }

/* Recognition uses one quiet response across every record. */
.recognition-intro .award-count { margin-left: .12em; color: inherit; font: inherit; vertical-align: baseline; }
.award, .award-ledger article { outline: 1px solid transparent; outline-offset: -1px; transition: outline-color .14s linear; }
.award:hover, .award-main:hover, .award-ledger article:hover { outline-color: #f1df72; filter: none; }
.award:not(.award-main):hover { background: #10100d; color: #b9b6a9; }
.award-main:hover { background: #d8cf8c; color: #10100d; }
.award-ledger article:hover { background: #0d0d0c; color: #c9c9c6; }

/* Paper brutalist archive: the folders are stored tight and pull forward one at a time. */
.work-section { position: relative; z-index: 9; overflow: hidden; padding: 150px max(35px, calc((100vw - 1240px) / 2)) 126px; background: #d9d9d5; color: #111; border-top: 2px solid #111; }
.works-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 82px; border-bottom: 2px solid #111; padding-bottom: 16px; }
.works-head h2 { margin: 0; font-size: clamp(42px, 5vw, 76px); line-height: .9; font-weight: 600; letter-spacing: 0; }.works-head span { font: 10px "Courier New", monospace; letter-spacing: 1.3px; }
.archive-stack { position: relative; height: 650px; max-width: 1000px; margin: 0 auto; }
.archive-folder { --folder-lift:0px; --folder-pull:0px; --folder-enter:0px; --sheet-pull:0px; position: absolute; top: var(--folder-top); left: 50%; width: min(100%, 910px); height: 178px; border: 2px solid #111; background: #c9c9c5; box-shadow: 5px 5px 0 #111; cursor: pointer; transform: translateX(calc(-50% + var(--folder-x) + var(--folder-pull))) translateY(calc(var(--folder-lift) + var(--folder-enter))) rotate(var(--folder-rotation)); transform-origin: 50% 100%; will-change: transform; }
.archive-folder::after { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(17,17,17,.52); pointer-events: none; }
.folder-tab { position: absolute; z-index: 2; left: var(--tab-x); top: -34px; min-width: 178px; height: 34px; padding: 9px 13px 0; border: 2px solid #111; border-bottom: 0; background: #e8e8e4; font: 11px "Courier New", monospace; letter-spacing: .3px; }
.folder-sheet { position: absolute; z-index: 1; inset: 23px 25px 14px; display: flex; align-items: baseline; gap: 20px; padding: 22px 25px; border: 1px solid #111; background: repeating-linear-gradient(0deg, #ecece8 0 3px, #deded9 3px 4px); transform: translateY(var(--sheet-pull)); will-change: transform; }
.folder-sheet span { font: 11px "Courier New", monospace; }.folder-sheet h3 { margin: 0; font-size: clamp(20px, 3vw, 38px); font-weight: 500; letter-spacing: 0; }.folder-sheet i { flex: 1; height: 1px; background: #111; }
.archive-folder:focus-visible { outline: 3px solid #f1df72; outline-offset: 6px; }
@media (max-width: 760px) { .work-section { padding: 108px 25px 80px; }.works-head { margin-bottom: 62px; }.works-head span { display: none; }.archive-stack { height: 570px; }.archive-folder { height: 148px; width: calc(100% - 10px); box-shadow: 3px 3px 0 #111; }.folder-tab { left: max(18px, var(--tab-x)); min-width: 142px; padding-left: 9px; font-size: 9px; }.folder-sheet { inset: 20px 14px 12px; padding: 17px 16px; gap: 12px; } }

/* Final cascade lock: the award total is a primary display element. */
.recognition-intro h2 { display: flex; align-items: baseline; flex-wrap: wrap; gap: .16em; }
.recognition-intro h2 .award-count {
  display: inline-block !important;
  margin: 0 !important;
  color: #e9df75 !important;
  font-family: "Helvetica Neue", Arial, sans-serif !important;
  font-size: clamp(72px, 10vw, 148px) !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: .68 !important;
  letter-spacing: 0 !important;
  vertical-align: baseline !important;
}
@media (max-width: 640px) {
  .recognition-intro h2 .award-count { font-size: clamp(58px, 22vw, 96px) !important; }
}

/* Keep the nested tabs below the featured card; never let them cross its content. */
.drawer-card:nth-child(2) { top: 274px !important; z-index: 8; }
.drawer-card:nth-child(3) { top: 314px !important; z-index: 9; }
.drawer-card:nth-child(4) { top: 354px !important; z-index: 10; }
.drawer-card:nth-child(5) { top: 394px !important; z-index: 11; }
.drawer-card:not(:first-child) .drawer-tab { top: -24px; }
.drawer-card:not(:first-child) .drawer-card-inner { padding-top: 12px; }
@media (max-width: 760px) {
  .drawer-card:nth-child(2) { top: 214px !important; }
  .drawer-card:nth-child(3) { top: 248px !important; }
  .drawer-card:nth-child(4) { top: 282px !important; }
  .drawer-card:nth-child(5) { top: 316px !important; }
}

.recognition-intro { display: flex !important; align-items: flex-end; justify-content: space-between; gap: 32px; }
.award-count-display {
  display: block;
  flex: 0 0 auto;
  margin: 0;
  color: #e9df75;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(112px, 15vw, 220px);
  font-weight: 600;
  line-height: .68;
  letter-spacing: 0;
}
@media (max-width: 640px) {
  .recognition-intro { align-items: flex-start; flex-direction: column; gap: 28px; }
  .award-count-display { font-size: clamp(96px, 34vw, 150px); }
}

/* Final design-review pass: one editorial grid, restrained type scale, deliberate hierarchy. */
:root { --content-width: 1180px; }
.recognition-section, .accordion-work, .contact-section { padding-left: max(24px, calc((100vw - var(--content-width)) / 2)); padding-right: max(24px, calc((100vw - var(--content-width)) / 2)); }
.recognition-intro, .award-grid, .award-ledger, .accordion-work-head, .accordion-drawer { width: 100%; max-width: var(--content-width); }
.recognition-intro { margin: 0 auto 58px; display: grid !important; grid-template-columns: 1fr auto; align-items: end; gap: 34px; }
.recognition-intro h2 { margin: 0; display: block !important; font-size: clamp(52px, 6vw, 82px); line-height: .88; font-weight: 500; letter-spacing: -.035em; }
.award-count-display { font-size: clamp(82px, 10vw, 138px) !important; line-height: .72; font-weight: 500; letter-spacing: -.045em; }
.award-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; }
.award { min-height: 198px; padding: 20px; }
.award h3 { font-size: 20px; line-height: 1.02; }
.award-main { min-height: 396px; }
.award-main h3 { font-size: 34px; }
.award-ledger { margin: 0 auto; }
.accordion-work-head { margin: 0 auto 76px; }
.accordion-work-head h2 { font-size: clamp(52px, 6vw, 82px); }
.accordion-work-head p { font-size: 9px; letter-spacing: 1.4px; }
.accordion-drawer { height: 620px; }
.drawer-card h3 { font-size: clamp(20px, 2.3vw, 32px); }
.drawer-card p { font-size: 10px; }
.drawer-front { width: min(640px, 86%); }
@media (max-width: 760px) {
  .recognition-intro { display: block !important; margin-bottom: 38px; }
  .recognition-intro h2 { font-size: 42px; }
  .award-count-display { margin-top: 28px; font-size: 86px !important; }
  .award-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .award-main { min-height: 290px; }
  .award-main h3 { font-size: 28px; }
  .accordion-work-head { margin-bottom: 58px; }
  .accordion-work-head h2 { font-size: 44px; }
}

/* Final drawer alignment: lower tabs begin after the featured card ends. */
.accordion-drawer .drawer-card:nth-child(2) { top: 274px !important; }
.accordion-drawer .drawer-card:nth-child(3) { top: 314px !important; }
.accordion-drawer .drawer-card:nth-child(4) { top: 354px !important; }
.accordion-drawer .drawer-card:nth-child(5) { top: 394px !important; }
.accordion-drawer .drawer-card:not(:first-child) .drawer-tab { top: -24px; }
@media (max-width: 760px) {
  .accordion-drawer .drawer-card:nth-child(2) { top: 214px !important; }
  .accordion-drawer .drawer-card:nth-child(3) { top: 248px !important; }
  .accordion-drawer .drawer-card:nth-child(4) { top: 282px !important; }
  .accordion-drawer .drawer-card:nth-child(5) { top: 316px !important; }
}

/* Reference geometry final override. */
.accordion-work { padding-top: 110px; padding-bottom: 120px; }
.accordion-work-head { margin-bottom: 46px; }
.accordion-drawer { width: min(660px, 88vw); height: 520px; }
.accordion-drawer .drawer-card { width: 100%; height: 22px; border-width: 1px; border-radius: 7px 7px 0 0; }
.accordion-drawer .drawer-card:nth-child(1) { top: 38px !important; height: 106px !important; }
.accordion-drawer .drawer-card:nth-child(2) { top: 144px !important; }
.accordion-drawer .drawer-card:nth-child(3) { top: 166px !important; }
.accordion-drawer .drawer-card:nth-child(4) { top: 188px !important; }
.accordion-drawer .drawer-card:nth-child(5) { top: 210px !important; }
.accordion-drawer .drawer-card:not(:first-child) .drawer-card-inner { padding-top: 4px; }
.accordion-drawer .drawer-tab { top: -20px !important; height: 21px; width: 118px; padding: 0 10px; font-size: 9px; }
.accordion-drawer .drawer-card:nth-child(2) .drawer-tab { left: 4%; }
.accordion-drawer .drawer-card:nth-child(3) .drawer-tab { left: 28%; }
.accordion-drawer .drawer-card:nth-child(4) .drawer-tab { left: 58%; }
.accordion-drawer .drawer-card:nth-child(5) .drawer-tab { left: 12%; }
.accordion-drawer .drawer-card:not(:first-child).is-open, .accordion-drawer .drawer-card:not(:first-child):hover, .accordion-drawer .drawer-card:not(:first-child):focus-visible { height: 130px; }
.accordion-drawer .drawer-front { width: 88%; height: 128px; }
@media (max-width: 760px) {
  .accordion-drawer { width: 94vw; height: 430px; }
  .accordion-drawer .drawer-card:nth-child(1) { top: 28px !important; height: 90px !important; }
  .accordion-drawer .drawer-card:nth-child(2) { top: 118px !important; }
  .accordion-drawer .drawer-card:nth-child(3) { top: 138px !important; }
  .accordion-drawer .drawer-card:nth-child(4) { top: 158px !important; }
  .accordion-drawer .drawer-card:nth-child(5) { top: 178px !important; }
  .accordion-drawer .drawer-front { height: 104px; }
}

/* New folder component wins over legacy drawer rules. */
.accordion-work .folder-drawer { width: min(700px, 88vw); height: 560px; }
.accordion-work .folder-pocket { width: 92%; height: 132px; z-index: 50; }
@media (max-width: 760px) {
  .accordion-work .folder-drawer { width: 94vw; height: 470px; }
  .accordion-work .folder-pocket { height: 108px; }
}

/* Final perspective and contrast override for the restored drawer. */
.accordion-work .accordion-drawer { perspective: 1100px; transform: perspective(1100px) rotateX(4deg); transform-origin: 50% 0%; }
.accordion-work .accordion-drawer .drawer-card { width: 90% !important; background: #0d0d0d !important; border-color: rgba(255,255,255,.92) !important; box-shadow: none; }
.accordion-work .accordion-drawer .drawer-card::before { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.22); border-radius: inherit; pointer-events: none; }
.accordion-work .accordion-drawer .drawer-tab { border-color: rgba(255,255,255,.95) !important; color: #fff !important; background: #0d0d0d !important; }
.accordion-work .accordion-drawer .drawer-card:nth-child(2) .drawer-tab, .accordion-work .accordion-drawer .drawer-card:nth-child(4) .drawer-tab { background: #f1eee3 !important; color: #0d0d0d !important; }
.accordion-work .accordion-drawer .drawer-front { width: 96% !important; background: #0d0d0d !important; border-color: #fff !important; z-index: 50 !important; }
@media (max-width: 760px) {
  .accordion-work .accordion-drawer { transform: perspective(900px) rotateX(3deg); }
  .accordion-work .accordion-drawer .drawer-card { width: 94% !important; }
  .accordion-work .accordion-drawer .drawer-front { width: 98% !important; }
}

.accordion-work .accordion-drawer .drawer-tab { background: #656565 !important; color: #fff !important; }
.accordion-work .accordion-drawer .drawer-card:nth-child(2) .drawer-tab,
.accordion-work .accordion-drawer .drawer-card:nth-child(4) .drawer-tab { background: #f1eee3 !important; color: #0d0d0d !important; }

/* Three.js is the active presentation layer; keep the semantic fallback from affecting layout. */
#work .folder-fallback { display: none !important; }
#folder-3d { position: relative; z-index: 2; background: transparent; }

.accordion-work .accordion-drawer .drawer-card { transform-origin: 50% 100%; }
.accordion-work .accordion-drawer .drawer-card:not(:first-child):hover,
.accordion-work .accordion-drawer .drawer-card:not(:first-child):focus-visible,
.accordion-work .accordion-drawer .drawer-card:not(:first-child).is-open {
  transform: translateX(-50%) translateY(-80px) scale(1.02) !important;
  z-index: 40 !important;
}

/* Every inner sheet reaches the same pocket line; the cover masks the excess. */
.accordion-work .accordion-drawer .drawer-card:nth-child(2) { height: 248px !important; }
.accordion-work .accordion-drawer .drawer-card:nth-child(3) { height: 226px !important; }
.accordion-work .accordion-drawer .drawer-card:nth-child(4) { height: 204px !important; }
.accordion-work .accordion-drawer .drawer-card:nth-child(5) { height: 182px !important; }
.accordion-work .accordion-drawer .drawer-front { background: #666 !important; }
@media (max-width: 760px) {
  .accordion-work .accordion-drawer .drawer-card:nth-child(2) { height: 208px !important; }
  .accordion-work .accordion-drawer .drawer-card:nth-child(3) { height: 188px !important; }
  .accordion-work .accordion-drawer .drawer-card:nth-child(4) { height: 168px !important; }
  .accordion-work .accordion-drawer .drawer-card:nth-child(5) { height: 148px !important; }
}

#folder-3d { display: block; width: min(820px, 94vw); height: 600px; margin: 0 auto; cursor: default; touch-action: none; }
.folder-three-ready .folder-fallback { display: none; }
@media (max-width: 760px) { #folder-3d { width: 96vw; height: 480px; } }

/* Pixel Cover Flow works gallery — Apple Cover Flow sizing + 1-bit gray pixel UI. */
.accordion-work .work-carousel { position: relative; width: min(100%, 1280px); height: 700px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 18px; overflow: visible; }
.accordion-work { overflow: visible !important; }
.carousel-track { position: relative; width: min(100%, 1080px); height: 540px; perspective: 1200px; transform-style: preserve-3d; }
.accordion-work .work-card { position: absolute; top: 0; left: 50%; width: 280px; height: 440px; min-height: 0; padding: 0; border: 2px solid #111; background: #c9c9c5; color: #111; cursor: pointer; transform: translateX(-50%) translateZ(0) scale(.72); opacity: .55; transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .35s, filter .35s; transform-style: preserve-3d; box-shadow: 6px 6px 0 #111; overflow: hidden; display: flex; flex-direction: column; }
.accordion-work .carousel-track > .work-card { width: 280px !important; max-width: 280px !important; height: 440px !important; min-height: 0 !important; flex: 0 0 280px !important; }
.work-card.is-prev { transform: translateX(calc(-50% - 240px)) translateZ(-90px) rotateY(28deg) scale(.82); opacity: .85; }
.work-card.is-next { transform: translateX(calc(-50% + 240px)) translateZ(-90px) rotateY(-28deg) scale(.82); opacity: .85; }
.work-card.is-far-prev { transform: translateX(calc(-50% - 420px)) translateZ(-180px) rotateY(40deg) scale(.58); opacity: .35; z-index: 0; }
.work-card.is-far-next { transform: translateX(calc(-50% + 420px)) translateZ(-180px) rotateY(-40deg) scale(.58); opacity: .35; z-index: 0; }
.work-card.is-active { transform: translateX(-50%) translateZ(120px) scale(1); opacity: 1; z-index: 3; }
.work-card:hover, .work-card:focus-visible { opacity: 1; outline: none; }
.accordion-work .work-card-titlebar { display: flex; align-items: center; justify-content: space-between; height: 22px; padding: 0 6px 0 8px; background: #c9c9c5; border-bottom: 2px solid #111; }
.accordion-work .work-card-titlebar b { font: 8px "Courier New", monospace; letter-spacing: 1.2px; color: #111; text-transform: uppercase; }
.accordion-work .work-card-titlebar i { display: block; width: 12px; height: 12px; background: #c9c9c5; border: 1px solid #111; position: relative; }
.accordion-work .work-card-titlebar i::before, .accordion-work .work-card-titlebar i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 1px; background: #111; }
.accordion-work .work-card-titlebar i::before { transform: translate(-50%, -50%) rotate(45deg); }
.accordion-work .work-card-titlebar i::after { transform: translate(-50%, -50%) rotate(-45deg); }
.accordion-work .work-card-media { display: block; height: 220px; overflow: hidden; background: repeating-linear-gradient(0deg, #b8b8b5 0 3px, #a8a8a5 3px 6px); position: relative; border-bottom: 2px solid #111; }
.accordion-work .work-card-media { height: 220px !important; }
.accordion-work .work-card-media img { display: block; width: 100% !important; max-width: 100% !important; height: 100% !important; filter: grayscale(1) contrast(1.1) brightness(.96); }
.work-card-body { display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 14px; text-align: center; align-items: center; justify-content: center; flex: 1; }
.work-card-body strong { font-size: 26px; font-weight: 500; line-height: 1.15; font-family: "Helvetica Neue", Arial, sans-serif; letter-spacing: -.5px; color: #111; }
.work-card-body small { color: #555; font: 9px "Courier New", monospace; letter-spacing: 1.6px; text-transform: uppercase; }
.work-card-actions { display: flex; align-items: center; justify-content: center; padding: 0 22px 24px; }
.work-card-open { display: inline-block; padding: 9px 24px; font: 10px "Courier New", monospace; letter-spacing: 1.6px; color: #111; background: #c9c9c5; border: 2px solid #111; transition: background .12s, color .12s; box-shadow: 3px 3px 0 #111; }
.work-card:hover .work-card-open, .work-card:focus-visible .work-card-open { background: #111; color: #c9c9c5; }
.work-card-media img { width: 100%; height: 100%; object-fit: cover; }
.carousel-arrow { width: 44px; height: 44px; border: 2px solid #111; background: #c9c9c5; color: #111; font-size: 18px; cursor: pointer; z-index: 5; box-shadow: 4px 4px 0 #111; }
.carousel-arrow:hover, .carousel-arrow:focus-visible { background: #111; color: #c9c9c5; outline: none; }
.carousel-arrow:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #111; }
.carousel-arrow { width: 38px; height: 38px; border: 1px solid #f1eee3; background: #0d0d0d; color: #f1eee3; font-size: 18px; cursor: pointer; z-index: 5; }
.carousel-arrow:hover, .carousel-arrow:focus-visible { background: #f1eee3; color: #0d0d0d; outline: none; }
@media (max-width: 760px) { .work-carousel { height: 430px; gap: 8px; }.carousel-track { width: 100%; height: 330px; }.work-card { width: 185px; height: 285px; }.work-card-media { height: 190px; }.work-card.is-prev { transform: translateX(calc(-50% - 102px)) translateZ(-70px) rotateY(28deg) scale(.68); }.work-card.is-next { transform: translateX(calc(-50% + 102px)) translateZ(-70px) rotateY(-28deg) scale(.68); }.work-card.is-far-prev { transform: translateX(calc(-50% - 190px)) translateZ(-120px) rotateY(38deg) scale(.5); }.work-card.is-far-next { transform: translateX(calc(-50% + 190px)) translateZ(-120px) rotateY(-38deg) scale(.5); }.work-card-meta { padding: 10px; gap: 5px; }.work-card-meta strong { font-size: 17px; } }

/* Final five-card layout overrides legacy folder/drawer rules. */
.accordion-work .carousel-track > .work-card:nth-child(1) { transform: translateX(-50%) translateX(-400px) translateZ(-180px) rotateY(36deg) scale(.58) !important; opacity: .32; z-index: 1; }
.accordion-work .carousel-track > .work-card:nth-child(2) { transform: translateX(-50%) translateX(-220px) translateZ(-110px) rotateY(26deg) scale(.82) !important; opacity: .86; z-index: 2; }
.accordion-work .carousel-track > .work-card:nth-child(3) { transform: translateX(-50%) translateZ(100px) scale(1) !important; opacity: 1; z-index: 4; }
.accordion-work .carousel-track > .work-card:nth-child(4) { transform: translateX(-50%) translateX(220px) translateZ(-110px) rotateY(-26deg) scale(.82) !important; opacity: .86; z-index: 2; }
.accordion-work .carousel-track > .work-card:nth-child(5) { transform: translateX(-50%) translateX(400px) translateZ(-180px) rotateY(-36deg) scale(.58) !important; opacity: .32; z-index: 1; }
.accordion-work .carousel-track > .work-card.is-active { transform: translateX(-50%) translateZ(100px) scale(1) !important; opacity: 1; z-index: 4; }
.accordion-work .carousel-track > .work-card.is-prev { transform: translateX(-50%) translateX(-220px) translateZ(-110px) rotateY(26deg) scale(.82) !important; opacity: .86; z-index: 2; }
.accordion-work .carousel-track > .work-card.is-next { transform: translateX(-50%) translateX(220px) translateZ(-110px) rotateY(-26deg) scale(.82) !important; opacity: .86; z-index: 2; }
.accordion-work .carousel-track > .work-card.is-far-prev { transform: translateX(-50%) translateX(-400px) translateZ(-180px) rotateY(36deg) scale(.58) !important; opacity: .32; z-index: 1; }
.accordion-work .carousel-track > .work-card.is-far-next { transform: translateX(-50%) translateX(400px) translateZ(-180px) rotateY(-36deg) scale(.58) !important; opacity: .32; z-index: 1; }
@media (max-width: 760px) {
  .accordion-work .carousel-track > .work-card.is-active { transform: translateX(-50%) translateZ(70px) scale(.82) !important; }
  .accordion-work .carousel-track > .work-card.is-prev { transform: translateX(-50%) translateX(-108px) translateZ(-55px) rotateY(26deg) scale(.58) !important; opacity: .86; }
  .accordion-work .carousel-track > .work-card.is-next { transform: translateX(-50%) translateX(108px) translateZ(-55px) rotateY(-26deg) scale(.58) !important; opacity: .86; }
  .accordion-work .carousel-track > .work-card.is-far-prev { transform: translateX(-50%) translateX(-190px) translateZ(-110px) rotateY(36deg) scale(.46) !important; opacity: .9; z-index: 3; }
  .accordion-work .carousel-track > .work-card.is-far-next { transform: translateX(-50%) translateX(190px) translateZ(-110px) rotateY(-36deg) scale(.46) !important; opacity: .9; z-index: 3; }
}

/* Final layout pass: preserve the existing visual language while opening the page grid. */
@font-face {
  font-family: "Bitcount Local";
  src: url("../static/Bitcount-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bitcount Local";
  src: url("../static/Bitcount-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bitcount Local";
  src: url("../static/Bitcount-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Alibaba PuHuiTi";
  src: url("../AlibabaPuHuiTi-3 (1)/AlibabaPuHuiTi-3/AlibabaPuHuiTi-3-55-Regular/AlibabaPuHuiTi-3-55-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+2E80-2FFF, U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF;
}
@font-face {
  font-family: "Alibaba PuHuiTi";
  src: url("../AlibabaPuHuiTi-3 (1)/AlibabaPuHuiTi-3/AlibabaPuHuiTi-3-65-Medium/AlibabaPuHuiTi-3-65-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+2E80-2FFF, U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF;
}
@font-face {
  font-family: "Alibaba PuHuiTi";
  src: url("../AlibabaPuHuiTi-3 (1)/AlibabaPuHuiTi-3/AlibabaPuHuiTi-3-75-SemiBold/AlibabaPuHuiTi-3-75-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+2E80-2FFF, U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF;
}
@font-face {
  font-family: "Alibaba PuHuiTi";
  src: url("../AlibabaPuHuiTi-3 (1)/AlibabaPuHuiTi-3/AlibabaPuHuiTi-3-85-Bold/AlibabaPuHuiTi-3-85-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+2E80-2FFF, U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF;
}

body { font-family: "Bitcount Local", "Alibaba PuHuiTi", sans-serif; }
.title-layer, .work-card-body strong, .contact-section > a { font-family: "Bitcount Local", "Alibaba PuHuiTi", sans-serif; }
:root { --content-width: 1480px; }
.masthead {
  top: 22px; left: 24px; width: calc(100% - 48px); padding: 17px 24px 19px;
  display: grid; grid-template-columns: minmax(205px, 1fr) minmax(0, 3.6fr) auto;
  align-items: start; gap: 28px; border: 1px solid rgba(231,226,196,.2);
  background: rgba(0,0,0,.64); backdrop-filter: blur(5px);
}
.masthead-identity { display: flex; align-items: center; gap: 13px; min-width: 0; }
.top-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 3.5vw, 72px); margin: 0; }
.top-nav a { display: grid; grid-template-columns: 10px 1fr; grid-template-rows: auto auto; column-gap: 8px; min-width: 0; padding-top: 1px; color: #908b76; font-family: "Bitcount Local", "Alibaba PuHuiTi", sans-serif; letter-spacing: .05em; text-decoration: none; }
.top-nav a::before { content: "•"; grid-row: 1 / span 2; color: #d7d2b7; font-size: 13px; line-height: 1; }
.top-nav a b { font-size: 14px; font-weight: 500; line-height: 1.15; }
.top-nav a small { margin-top: 6px; color: #66645d; font-size: 11px; line-height: 1.15; }
.top-nav a:hover, .top-nav a:focus-visible { color: var(--signal); }
.top-nav a:hover small, .top-nav a:focus-visible small { color: #b9b393; }
.frame-count { position: static; align-self: start; padding-top: 2px; white-space: nowrap; font-family: "Bitcount Local", "Alibaba PuHuiTi", sans-serif; }
.profile-section { padding-left: max(28px, calc((100vw - var(--content-width)) / 2)); padding-right: max(28px, calc((100vw - var(--content-width)) / 2)); gap: clamp(58px, 8vw, 150px); grid-template-columns: minmax(0, 1.12fr) minmax(420px, .88fr); }
.recognition-section, .accordion-work, .contact-section { padding-left: max(28px, calc((100vw - var(--content-width)) / 2)); padding-right: max(28px, calc((100vw - var(--content-width)) / 2)); }
.recognition-intro, .award-grid, .award-ledger, .accordion-work-head { max-width: var(--content-width); }
.award-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.award-extra { display: contents; }
.award-extra[hidden] { display: none !important; }
.award-toggle { display: block; margin: 27px auto 0; padding: 11px 16px; border: 1px solid var(--line); background: transparent; color: var(--paper); font: 11px "Bitcount Local", "Alibaba PuHuiTi", sans-serif; letter-spacing: .06em; cursor: pointer; transition: background .2s ease, color .2s ease; }
.award-toggle:hover, .award-toggle:focus-visible { background: var(--signal); color: #10100e; outline: none; }
.award-toggle span { margin-left: 8px; font-size: 15px; }
.work-filters { width: 100%; max-width: var(--content-width); margin: -46px auto 48px; display: flex; justify-content: flex-end; gap: 8px; }
.work-filters button { min-width: 64px; padding: 8px 13px; border: 1px solid var(--line); background: transparent; color: var(--muted); font: 11px "Alibaba PuHuiTi", "Bitcount Local", sans-serif; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.work-filters button:hover, .work-filters button:focus-visible, .work-filters button.is-active { border-color: var(--signal); background: var(--signal); color: #11110e; outline: none; }
.accordion-work .work-carousel { width: min(100%, var(--content-width)); }
.carousel-track { width: min(100%, 1240px); }

@media (max-width: 900px) {
  .masthead { grid-template-columns: 1fr auto; gap: 14px; }
  .top-nav { grid-column: 1 / -1; order: 3; gap: 18px; }
  .top-nav a b { font-size: 12px; }
  .top-nav a small { font-size: 10px; }
  .profile-section { grid-template-columns: minmax(0, 1fr) minmax(285px, .72fr); gap: 35px; }
  .work-filters { margin-top: -28px; }
}
@media (max-width: 640px) {
  .masthead { left: 16px; top: 16px; width: calc(100% - 32px); padding: 13px 14px 15px; }
  .top-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
  .top-nav a b { font-size: 11px; }
  .frame-count { font-size: 8px; }
  .profile-section { grid-template-columns: 1fr; gap: 38px; }
  .award-ledger { grid-template-columns: 1fr; }
  .work-filters { justify-content: flex-start; flex-wrap: wrap; margin: -20px auto 35px; }
  .work-filters button { flex: 1 1 calc(25% - 8px); }
}

/* Fixed, open navigation and wider horizontal work cards. */
.masthead {
  position: fixed;
  z-index: 2000;
  top: 0;
  left: 0;
  width: 100%;
  padding: 27px max(28px, calc((100vw - var(--content-width)) / 2)) 23px;
  border: 0;
  background: transparent;
  backdrop-filter: none;
  transition: background-color .28s ease, border-color .28s ease, backdrop-filter .28s ease;
}
.masthead.is-scrolled {
  border-bottom: 1px solid rgba(231,226,196,.18);
  background: #070707;
  backdrop-filter: none;
  box-shadow: 0 1px 0 rgba(231,226,196,.08);
}
.title-layer h2 {
  font-family: "Bitcount Local", "Alibaba PuHuiTi", sans-serif;
  font-size: clamp(92px, 10vw, 154px);
  font-weight: 600;
  line-height: .86;
}
.accordion-work .work-carousel { width: min(100%, 1500px); }
.carousel-track { width: min(100%, 1450px); }
.accordion-work .work-card,
.accordion-work .carousel-track > .work-card {
  width: 500px !important;
  max-width: 500px !important;
  height: 300px !important;
  flex-direction: row;
}
.accordion-work .work-card-titlebar {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}
.accordion-work .work-card-media {
  width: 55% !important;
  height: 100% !important;
  flex: 0 0 55%;
  border-right: 2px solid #111;
  border-bottom: 0;
}
.accordion-work .work-card-body {
  width: 45%;
  height: 210px;
  padding: 39px 18px 10px;
  justify-content: center;
}
.work-card-body strong { font-weight: 500; }
.work-card-summary { display: none; }
.work-card-subtitle { display: block; max-width: 100%; overflow: hidden; color: #5d5a50; font: 12px/1.4 "Alibaba PuHuiTi", sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.work-card.is-media-color .work-card-media img,
.work-card.is-media-color .work-card-media video { filter: grayscale(0) contrast(1) brightness(1); }
.work-card-actions { position: absolute; right: 0; bottom: 18px; width: 45%; padding: 0 18px; }
.contact-section > a { font-weight: 400; }

/* Larger personal workspace and a fuller set of keyword folders. */
.retro-desktop { height: 520px; }
.portrait-window { z-index: 4; top: 74px; right: 16px; width: 300px; }
.portrait-window .window-body { height: 320px; }
.desktop-folder { z-index: 5; }
.trait-curious { top: 8px; left: 8px; }
.trait-hackathon { top: 8px; left: 98px; }
.trait-builder { top: 8px; left: 226px; }
.trait-observer { top: 104px; left: 8px; }
.trait-vibe { top: 152px; left: 8px; }
.trait-patient { top: 354px; left: 8px; }

@media (max-width: 900px) {
  .masthead { padding-left: 28px; padding-right: 28px; }
  .title-layer h2 { font-size: clamp(82px, 11vw, 122px); }
  .accordion-work .work-card,
  .accordion-work .carousel-track > .work-card { width: 430px !important; max-width: 430px !important; height: 270px !important; }
}
@media (max-width: 640px) {
  /* Keep the installation legible without trapping normal vertical page scroll. */
  #scene { touch-action: pan-y; }
  .scene-stage { min-height: 500px; }
  .masthead { padding: 18px 18px 16px; }
  .title-layer h2 { font-size: clamp(60px, 15vw, 96px); }
  .accordion-work .work-carousel { height: 360px; }
  .accordion-work .carousel-track { height: 280px; touch-action: pan-y; }
  .accordion-work .work-card,
  .accordion-work .carousel-track > .work-card { width: min(78vw, 340px) !important; max-width: min(78vw, 340px) !important; height: 205px !important; }
  .accordion-work .work-card-media { width: 52% !important; flex-basis: 52%; }
  .accordion-work .work-card-body { width: 48%; height: 140px; padding: 31px 10px 8px; }
  .accordion-work .work-card-body strong { font-size: 18px; }
  .work-card-subtitle { font-size: 10px; }
  .work-card-actions { width: 48%; right: 0; bottom: 12px; padding: 0 12px; }
  .accordion-work .carousel-track > .work-card.is-active { transform: translateX(-50%) translateZ(60px) scale(.88) !important; }
  .accordion-work .carousel-track > .work-card.is-prev { transform: translateX(-50%) translateX(-130px) translateZ(-50px) rotateY(20deg) scale(.58) !important; }
  .accordion-work .carousel-track > .work-card.is-next { transform: translateX(-50%) translateX(130px) translateZ(-50px) rotateY(-20deg) scale(.58) !important; }
  .accordion-work .carousel-track > .work-card.is-far-prev { transform: translateX(-50%) translateX(-225px) translateZ(-100px) rotateY(28deg) scale(.42) !important; }
  .accordion-work .carousel-track > .work-card.is-far-next { transform: translateX(-50%) translateX(225px) translateZ(-100px) rotateY(-28deg) scale(.42) !important; }
}

/* Archive sections reuse the hero's black, scanline-and-pixel atmosphere. */
.recognition-section, .accordion-work {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ink);
}
.recognition-section::before, .accordion-work::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .3;
  background-image:
    radial-gradient(circle, rgba(241,238,227,.42) 0 1px, transparent 1.5px),
    linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 34px 34px, 48px 48px, 48px 48px;
  background-position: 0 0, 0 0, 0 0;
  animation: archive-pixel-drift 8s steps(120) infinite;
}
.recognition-section::after, .accordion-work::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .16;
  background: repeating-linear-gradient(0deg, rgba(229,229,229,.22) 0 1px, transparent 1px 4px);
  animation: television-drift 8s steps(120) infinite;
}
.recognition-section > *, .accordion-work > * {
  position: relative;
  z-index: 1;
}
.profile-section { z-index: 10; }
/* Leave enough document height for the full experience list before awards begin. */
.installation { height: max(220vh, 1700px); min-height: 1700px; }
@media (max-width: 900px) {
  .installation { height: max(208vh, 1700px); min-height: 1700px; }
}
@media (max-width: 640px) {
  .installation { height: max(310dvh, 2300px); min-height: 2300px; }
}
@keyframes archive-pixel-drift {
  from { background-position: 0 0, 0 0, 0 0; }
  to { background-position: 34px 18px, 18px 34px, 34px 18px; }
}
.award-extra:not([hidden]) article { animation: award-row-in .48s both ease-out; }
.award-extra:not([hidden]) article:nth-child(2n) { animation-delay: .05s; }
.award-extra:not([hidden]) article:nth-child(3n) { animation-delay: .1s; }
@keyframes award-row-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Global pointer ring and lagging rings remain visible while scrolling outside the hero. */
.cursor-trail-ring, .cursor-trail-dot {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  display: block;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity .2s ease;
  mix-blend-mode: difference;
}
.cursor-trail-ring { width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(241,223,114,.32); }
.cursor-trail-ring-2 { width: 36px; height: 36px; background: rgba(241,223,114,.27); }
.cursor-trail-ring-3 { width: 30px; height: 30px; background: rgba(241,223,114,.23); }
.cursor-trail-ring-4 { width: 25px; height: 25px; background: rgba(241,223,114,.19); }
.cursor-trail-ring-5 { width: 20px; height: 20px; background: rgba(241,223,114,.16); }
.cursor-trail-ring-6 { width: 16px; height: 16px; background: rgba(241,223,114,.13); }
.cursor-trail-ring-7 { width: 12px; height: 12px; background: rgba(241,223,114,.1); }
.cursor-trail-ring-8 { width: 9px; height: 9px; background: rgba(241,223,114,.08); }
.cursor-trail-dot { width: 5px; height: 5px; border-radius: 50%; background: #f1df72; }
.cursor-trail-visible .cursor-trail-ring, .cursor-trail-visible .cursor-trail-dot { opacity: 1; }
@media (pointer: fine) {
  html, body, body * { cursor: none !important; }
}
@media (prefers-reduced-motion: reduce), (pointer: coarse) {
  .recognition-section, .accordion-work { animation: none; }
  .recognition-section::before, .recognition-section::after,
  .accordion-work::before, .accordion-work::after { animation: none; }
  .cursor-trail-ring, .cursor-trail-dot { display: none; }
}

/* Editorial desktop measure: fuller outer columns without changing the internal visual system. */
:root { --content-width: 1660px; }
.profile-section { gap: clamp(48px, 6vw, 120px); }
.accordion-work .work-carousel { width: min(100%, 1660px); }
.carousel-track { width: min(100%, 1560px); }
@media (max-width: 900px) {
  :root { --content-width: 100%; }
}

/* Project cards can use a real film as the cover without changing the card layout. */
.accordion-work .work-card-media video {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  filter: grayscale(1) contrast(1.1) brightness(.96);
}