.page-hero, .detail-hero, .article-hero { position: relative; padding: 190px 0 105px; }
.page-hero-dark, .detail-hero, .article-hero { color: var(--white); background: radial-gradient(circle at 80% 20%, rgba(255, 107, 74, .14), transparent 26%), var(--ink); }
.page-hero-cyan { padding-bottom: 95px; background: linear-gradient(90deg, rgba(255, 255, 255, .16) 1px, transparent 1px), var(--cyan); background-size: 90px 100%; }
.page-hero-inner { max-width: 980px; }
.page-hero h1, .detail-hero h1, .article-hero h1 { max-width: 1000px; margin-bottom: 28px; font-size: clamp(58px, 7vw, 96px); }
.page-hero-cyan h1 em { color: #571a21; }
.page-hero-inner > p:last-child, .detail-hero-grid > div:first-child > p:last-of-type, .article-hero-inner > p:last-child { max-width: 700px; margin-bottom: 0; color: rgba(255, 255, 255, .62); font-size: 19px; }
.page-hero-cyan .page-hero-inner > p:last-child { color: rgba(23, 17, 31, .7); }
.page-hero .button, .detail-hero .button { margin-top: 28px; }

.statement-grid { display: grid; grid-template-columns: 200px 1fr; gap: 80px; padding-top: 60px; padding-bottom: 60px; }
.statement-grid:first-child { padding-top: 0; }
.statement-border { border-top: 1px solid var(--line); }
.statement-label { padding-top: 10px; color: var(--accent-deep); font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.statement-grid h2 { max-width: 850px; font-size: clamp(38px, 4.4vw, 62px); }
.value-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; overflow: hidden; background: var(--line); border: 1px solid var(--line); }
.value-card { min-height: 245px; padding: 30px; background: var(--paper); }
.value-card > span { display: block; margin-bottom: 52px; color: var(--accent-deep); font-size: 10px; font-weight: 800; }
.value-card h3 { margin-bottom: 12px; font-size: 26px; }
.value-card p { margin: 0; color: var(--muted); font-size: 14px; }
.department-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line-dark); border: 1px solid var(--line-dark); }
.department-card { min-height: 440px; padding: 30px; background: var(--ink); }
.department-card > span { color: var(--mint); font-size: 10px; font-weight: 800; }
.department-card h3 { min-height: 64px; margin: 45px 0 16px; font-size: 24px; }
.department-card > p { color: rgba(255, 255, 255, .5); font-size: 13px; }
.department-card ul { display: grid; gap: 7px; padding: 20px 0 0; margin: 20px 0 0; list-style: none; border-top: 1px solid var(--line-dark); }
.department-card li { color: rgba(255, 255, 255, .7); font-size: 13px; }
.department-card li::before { margin-right: 9px; color: var(--mint); content: "·"; }
.career-path { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.career-step { position: relative; min-height: 190px; padding: 25px 20px; border-right: 1px solid var(--line); }
.career-step:last-child { border-right: 0; }
.career-step::after { position: absolute; top: 50%; right: -5px; z-index: 2; width: 9px; height: 9px; content: ""; background: var(--mint); border-radius: 50%; }
.career-step:last-child::after { display: none; }
.career-step > span { display: block; margin-bottom: 55px; color: var(--accent-deep); font-size: 10px; font-weight: 800; }
.career-step h3 { margin-bottom: 10px; font-size: 18px; }
.career-step p { color: var(--muted); font-size: 12px; }

.research-list { border-top: 1px solid var(--line); }
.research-row { display: grid; grid-template-columns: 55px 100px 1fr 50px; align-items: center; gap: 32px; padding: 38px 18px; border-bottom: 1px solid var(--line); transition: color 220ms ease, background 220ms ease, padding 220ms ease; }
.research-row:hover { padding-right: 30px; padding-left: 30px; color: var(--white); background: var(--ink); }
.research-number, .research-code, .research-row small { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.research-code { display: grid; place-items: center; width: 66px; height: 66px; color: var(--ink); background: var(--cyan); border-radius: 50%; }
.research-row:nth-child(4n + 2) .research-code { background: var(--acid); }
.research-row:nth-child(4n + 3) .research-code { background: var(--violet); }
.research-row:nth-child(4n + 4) .research-code { background: var(--orange); }
.research-row h2 { margin-bottom: 8px; font-size: 32px; }
.research-row p { max-width: 680px; margin-bottom: 8px; color: var(--muted); }
.research-row:hover p, .research-row:hover small, .research-row:hover .research-number { color: rgba(255, 255, 255, .55); }
.research-arrow { color: var(--accent-deep); font-size: 25px; }

.detail-hero-grid { display: grid; grid-template-columns: 1fr 340px; align-items: center; gap: 80px; }
.detail-mark { display: grid; place-items: center; width: 320px; height: 320px; color: var(--ink); background: var(--mint); font-family: var(--display); font-size: 68px; font-weight: 800; letter-spacing: -.08em; border-radius: 50%; box-shadow: 0 0 0 45px rgba(184, 217, 67, .04), 0 0 0 90px rgba(184, 217, 67, .025); }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.tag-row a { padding: 7px 12px; color: rgba(255, 255, 255, .7); font-size: 11px; border: 1px solid var(--line-dark); border-radius: 99px; }
.article-layout { display: grid; grid-template-columns: 220px minmax(0, 760px); justify-content: space-between; gap: 80px; }
.article-layout aside { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; color: var(--muted); font-size: 13px; }
.article-layout aside > span { color: var(--accent-deep); font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.article-layout aside p { margin: 0; }
.article-layout aside a { color: var(--ink); font-weight: 700; border-bottom: 1px solid var(--line); }
.prose { color: #4b404f; font-size: 18px; line-height: 1.9; }
.prose h2 { margin: 0 0 26px; color: var(--ink); font-size: 38px; }
.prose h2:not(:first-child) { margin-top: 55px; }
.simple-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.simple-card { display: flex; flex-direction: column; min-height: 260px; padding: 28px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; }
.simple-card > span { color: var(--accent-deep); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.simple-card h3 { margin: 55px 0 12px; font-size: 24px; }
.simple-card p { color: var(--muted); font-size: 14px; }
.simple-card strong { margin-top: auto; color: var(--accent-deep); font-size: 13px; }

.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 46px; }
.filter-bar > span { margin-right: 16px; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.filter-bar a, .filter-bar button { padding: 9px 16px; background: transparent; border: 1px solid var(--line); border-radius: 99px; cursor: pointer; }
.filter-bar .active, .filter-bar a:hover, .filter-bar button:hover { color: var(--white); background: var(--ink); }
.compact-people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.compact-people > div { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 2px 16px; padding: 20px; background: var(--white); border: 1px solid var(--line); }
.compact-people > div > span { grid-row: span 2; display: grid; place-items: center; width: 52px; height: 52px; background: var(--cyan); font-weight: 800; border-radius: 50%; }
.compact-people small { color: var(--muted); }
.member-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.member-card { padding: 18px 18px 24px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; }
.member-photo { display: grid; place-items: center; height: 270px; margin-bottom: 20px; overflow: hidden; background: linear-gradient(145deg, var(--signal), #ffe0d3); border-radius: 11px; }
.member-photo img { width: 100%; height: 100%; object-fit: cover; }
.member-photo span { font-family: var(--display); font-size: 62px; font-weight: 800; }
.member-card > p { margin-bottom: 7px; color: var(--accent-deep); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.member-card h3 { margin-bottom: 8px; font-size: 21px; }
.member-card small, .member-expertise { color: var(--muted); font-size: 12px; }
.member-expertise { padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--line); }

.publication-list { border-top: 1px solid var(--line); }
.publication-row { display: grid; grid-template-columns: 150px 1fr 140px; align-items: start; gap: 35px; padding: 32px 14px; border-bottom: 1px solid var(--line); }
.publication-row > div:first-child { display: grid; gap: 4px; color: var(--accent-deep); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.publication-row time { color: var(--muted); }
.publication-row h3 { margin-bottom: 10px; font-size: 21px; letter-spacing: -.025em; }
.publication-row p { margin: 0; color: var(--muted); font-size: 13px; }
.publication-actions { display: flex; justify-content: flex-end; gap: 12px; font-size: 12px; font-weight: 700; }
.publication-actions a { padding-bottom: 3px; border-bottom: 1px solid var(--ink); }
.news-grid-all { row-gap: 58px; }
.article-hero-inner { max-width: 1000px; }
.article-cover { position: relative; z-index: 2; margin-top: -45px; }
.article-cover img { width: 100%; max-height: 620px; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }
.article-back { padding-bottom: 100px; }

.job-list { border-top: 1px solid var(--line); }
.job-row { display: grid; grid-template-columns: 1.1fr .8fr 120px; align-items: center; gap: 40px; padding: 30px 18px; border-bottom: 1px solid var(--line); transition: color 200ms ease, background 200ms ease, padding 200ms ease; }
.job-row:hover { padding-right: 28px; padding-left: 28px; color: var(--white); background: var(--ink); }
.job-row span { color: var(--accent-deep); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.job-row h3 { margin: 8px 0 0; font-size: 25px; }
.job-row p { margin-bottom: 4px; }
.job-row small { color: var(--muted); }
.job-row strong { color: var(--accent-deep); font-size: 13px; }

.contact-hero { min-height: 100vh; padding: 170px 0 100px; color: var(--white); background: radial-gradient(circle at 20% 72%, rgba(184, 217, 67, .12), transparent 25%), var(--ink); }
.contact-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(540px, 1fr); align-items: start; gap: 90px; }
.contact-copy { padding-top: 35px; }
.contact-copy h1 { margin-bottom: 28px; font-size: clamp(54px, 6vw, 82px); }
.contact-copy > p:not(.eyebrow) { max-width: 540px; color: rgba(255, 255, 255, .6); font-size: 18px; }
.contact-details { display: grid; gap: 22px; padding-top: 34px; margin-top: 42px; border-top: 1px solid var(--line-dark); }
.contact-details > div { display: grid; grid-template-columns: 90px 1fr; gap: 20px; }
.contact-details span { color: var(--mint); font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.contact-details p, .contact-details a { margin: 0; color: rgba(255, 255, 255, .75); }
.contact-form-card { padding: 42px; color: var(--ink); background: var(--white); border-radius: var(--radius); box-shadow: 0 40px 120px rgba(0, 0, 0, .25); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.form-field { display: grid; gap: 7px; }
.form-field-wide { grid-column: 1 / -1; }
.form-field label { font-size: 11px; font-weight: 800; }
.form-field label span { color: var(--accent-deep); }
.form-field input, .form-field select, .form-field textarea { width: 100%; padding: 13px 0; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; outline: none; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--signal); }
.field-error, .form-errors { color: #b83242; font-size: 12px; }
.button-submit { width: 100%; margin-top: 28px; border: 0; }
.form-note { margin: 14px 0 0; color: var(--muted); font-size: 11px; text-align: center; }

.error-page {
    position: relative;
    display: grid;
    align-items: center;
    min-height: 100vh;
    padding: 150px 0 90px;
    overflow: hidden;
    color: var(--white);
    background:
        radial-gradient(circle at 82% 38%, rgba(255, 107, 74, .15), transparent 27%),
        radial-gradient(circle at 12% 82%, rgba(155, 140, 255, .09), transparent 24%),
        var(--ink);
}
.error-grid {
    position: absolute;
    inset: 0;
    opacity: .14;
    background-image:
        linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
    background-size: 78px 78px;
    mask-image: linear-gradient(110deg, black, transparent 78%);
}
.error-layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(260px, .62fr) minmax(0, 1.1fr);
    align-items: center;
    gap: clamp(50px, 8vw, 130px);
}
.error-code {
    position: relative;
    min-height: 390px;
    border-right: 1px solid var(--line-dark);
}
.error-code > span {
    color: rgba(255, 250, 242, .38);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .17em;
}
.error-code strong {
    position: absolute;
    top: 50%;
    left: -12px;
    display: flex;
    align-items: center;
    color: var(--white);
    font-family: var(--display);
    font-size: clamp(110px, 15vw, 210px);
    letter-spacing: -.12em;
    line-height: .8;
    transform: translateY(-50%);
}
.error-code strong i {
    width: clamp(68px, 9vw, 125px);
    height: clamp(68px, 9vw, 125px);
    margin: 0 9px;
    background: var(--signal);
    border: 1px solid rgba(255, 250, 242, .2);
    border-radius: 50%;
    box-shadow: 0 0 0 22px rgba(255, 107, 74, .035);
}
.error-copy { max-width: 720px; }
.error-copy h1 {
    margin-bottom: 26px;
    font-size: clamp(48px, 5.7vw, 82px);
}
.error-copy > p:not(.eyebrow) {
    max-width: 620px;
    margin-bottom: 34px;
    color: rgba(255, 250, 242, .6);
    font-size: 17px;
    line-height: 1.75;
}
.error-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.error-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    padding-top: 25px;
    margin-top: 46px;
    border-top: 1px solid var(--line-dark);
}
.error-links span {
    margin-right: 8px;
    color: rgba(255, 250, 242, .28);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.error-links a {
    color: rgba(255, 250, 242, .62);
    font-size: 11px;
    font-weight: 700;
}
.error-links a:hover { color: var(--mineral); }
.error-orbit {
    position: absolute;
    top: 48%;
    right: -220px;
    display: grid;
    place-items: center;
    width: 520px;
    height: 520px;
    border: 1px solid rgba(255, 107, 74, .18);
    border-radius: 50%;
    transform: translateY(-50%);
}
.error-orbit::before {
    position: absolute;
    inset: 24%;
    content: "";
    border: 1px solid rgba(184, 217, 67, .18);
    border-radius: 50%;
}
.error-orbit i {
    position: absolute;
    width: 7px;
    height: 7px;
    background: var(--iris);
    border-radius: 50%;
}
.error-orbit i:nth-child(1) { top: 11%; left: 38%; }
.error-orbit i:nth-child(2) { right: 7%; bottom: 31%; background: var(--mineral); }
.error-orbit i:nth-child(3) { bottom: 6%; left: 33%; background: var(--orchid); }
.error-orbit span {
    color: rgba(255, 250, 242, .08);
    font-family: var(--display);
    font-size: 48px;
    font-weight: 800;
}