@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Inter:wght@400;500;600&display=swap');
:root{--bg:#f5f4f0;--text:#171717;--muted:#77756f;--line:#d7d5cf;--pad:clamp(22px,4vw,64px)}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
body{font-size:14px;line-height:1.5}
.site-header{min-height:82px;padding:23px var(--pad);border-bottom:1px solid var(--line);display:flex;align-items:flex-start;justify-content:space-between;gap:30px}
.brand-name,.eyebrow,.menu-code,.menu-meta,footer{font-family:"DM Mono",monospace;letter-spacing:.04em}
.brand-name{font-size:12px;font-weight:500}.brand-subtitle{margin-top:3px;font-size:10px;color:var(--muted);letter-spacing:.06em}
main{width:min(1500px,100%);margin:0 auto;padding:0 var(--pad)}
.profile{display:grid;grid-template-columns:150px minmax(0,650px);gap:34px;align-items:start;padding:42px 0 40px;border-bottom:1px solid var(--line)}
.eyebrow{margin:0 0 13px;font-size:9px;color:var(--muted)}
.profile-photo{width:150px;height:185px;background:#e9e7e1;overflow:hidden}.profile-photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo-placeholder{height:100%;display:flex;align-items:center;justify-content:center;color:#aaa79f;font:8px "DM Mono",monospace;letter-spacing:.08em}
.profile-main h1{margin:0;font-size:clamp(25px,3vw,38px);line-height:1.05;font-weight:500;letter-spacing:-.035em}
.profile-role{margin:13px 0 0;font:500 9px "DM Mono",monospace;letter-spacing:.04em;color:var(--text)}
.profile-bio{max-width:570px;margin:17px 0 0;color:var(--muted);font-size:12px;line-height:1.65}
.menu{border-bottom:1px solid var(--line)}
.menu-item{display:grid;grid-template-columns:48px 1.15fr .8fr 165px;gap:28px;align-items:center;min-height:220px;padding:34px 0;border-bottom:1px solid var(--line);text-decoration:none;transition:padding .3s ease,background .3s ease}
.menu-item:last-child{border-bottom:0}.menu-item:hover{padding-left:10px;padding-right:10px;background:rgba(255,255,255,.35)}
.menu-index{align-self:start;padding-top:3px;font:9px "DM Mono",monospace;color:var(--muted)}
.menu-code{font-size:9px;color:var(--muted);margin-bottom:8px}
.menu-item h2{margin:0;font-size:clamp(28px,4vw,56px);line-height:.95;font-weight:500;letter-spacing:-.055em;text-transform:uppercase}
.menu-meta{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:19px;font-size:8px;color:var(--muted)}
.menu-description{max-width:310px;color:var(--muted);font-size:12px;line-height:1.6}
.menu-open{justify-self:end;width:100%;display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid var(--text);font:500 9px "DM Mono",monospace;letter-spacing:.04em}
.arrow{font-size:15px;transition:transform .25s ease}.menu-item:hover .arrow{transform:translate(4px,-4px)}
.menu-note{display:grid;grid-template-columns:1fr 2fr;gap:30px;padding:50px 0 75px}
.menu-note span{font:9px "DM Mono",monospace;color:var(--muted);letter-spacing:.04em}.menu-note p{margin:0;max-width:500px;color:var(--muted);font-size:12px}
footer{border-top:1px solid var(--line);padding:20px var(--pad);display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:8px}
@media(max-width:900px){.profile{grid-template-columns:1fr;gap:18px}.profile-label{display:block}.menu-item{grid-template-columns:40px 1fr 150px;gap:20px}.menu-description{display:none}}
@media(max-width:640px){.site-header{min-height:72px}.profile{grid-template-columns:90px 1fr;gap:18px;padding:32px 0}.profile-photo{width:90px;height:115px}.profile-main h1{font-size:25px}.profile-role{line-height:1.5}.menu-item{grid-template-columns:28px 1fr;gap:9px 14px;min-height:0;padding:27px 0}.menu-item h2{font-size:34px}.menu-open{grid-column:2;justify-self:stretch;margin-top:12px}.menu-note{grid-template-columns:1fr;gap:12px}footer{flex-direction:column}}

/* Accent palette */
:root{
  --teal:#0f7774;
  --red:#b6403c;
}
.eyebrow{color:var(--teal)}
.menu-code{color:var(--teal)}
.menu-meta span:first-child{color:var(--teal)}
.menu-meta span:nth-child(2){color:var(--red)}
.menu-item:hover .menu-code{color:var(--red)}
.menu-item:hover .arrow{color:var(--teal)}
.menu-open{border-bottom-color:var(--text)}
.menu-item:nth-child(2) .menu-code{color:var(--red)}
.menu-item:nth-child(3) .menu-code{color:var(--teal)}
.menu-item:nth-child(4) .menu-code{color:var(--red)}
.profile-role{color:var(--teal)}
.main-menu-link a:hover{color:var(--red)}

.brand-name{text-decoration:none;color:inherit}.brand-name:hover{color:var(--teal,inherit)}