/* Public department experience: all styles scoped to this feature. */
.department-experience {
    --ink:#282326;
    --muted:#736b6b;
    --wine:#861d32;
    --paper:#f7f5f0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Cairo',sans-serif;
    padding-bottom:1px}

.department-experience a {
    text-decoration:none}
.department-experience :focus-visible {
    outline:3px solid #c59a50;
    outline-offset:5px}
.department-experience [id] {
    scroll-margin-top:100px}

.department-hero {
    position:relative;
    overflow:hidden;
    background:#461321;
    color:#fff;
    padding:70px 0 76px;
    background-image:radial-gradient(ellipse at 80% 70%,#852d43 0,transparent 55%),linear-gradient(120deg,#39151f,#601a2c)}

.department-hero-grid {
    display:grid;
    grid-template-columns:1.4fr 1fr;
    align-items:center;
    gap:50px}
.department-eyebrow {
    display:inline-flex;
    gap:30px;
    color:#f0d8b4!important;
    border-bottom:1px solid #b28a78;
    padding-bottom:10px;
    font-size:14px}
.department-kicker {
    font-size:11px;
    letter-spacing:.15em;
    color:#e0bfc4;
    margin:34px 0 18px}
.department-hero h1 {
    font-size:clamp(2.4rem,4.4vw,4.5rem);
    font-weight:800;
    line-height:1.3;
    letter-spacing:-.035em;
    max-width:850px;
    margin-bottom:24px}
.department-hero-intro {
    color:#e7d6dc;
    font-size:16px;
    line-height:1.95;
    max-width:560px}
.department-hero-actions {
    display:flex;
    align-items:center;
    gap:28px;
    flex-wrap:wrap;
    margin-top:32px}
.department-button {
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;
    border-radius:8px;
    padding:16px 24px;
    background:#f2dfbb;
    color:#421823!important;
    font-weight:700;
    transition:transform .2s,background .2s}
.department-button:hover {
    background:#fff0d3;
    transform:translateY(-3px)}
.department-text-link {
    color:#fff!important;
    border-bottom:1px solid #bd8c97;
    padding:8px 0;
    font-size:14px}

.department-emblem {
    position:relative;
    min-height:350px;
    display:grid;
    place-items:center}
.department-orbit {
    position:absolute;
    width:300px;
    height:340px;
    border:1px solid #d9b78655;
    border-radius:150px 150px 12px 12px;
    transform:rotate(-12deg)}
.orbit-two {
    transform:rotate(12deg);
    width:330px;
    height:310px}
.department-emblem-core {
    width:235px;
    height:270px;
    border-radius:120px 120px 12px 12px;
    background:#faf7ef;
    display:grid;
    place-items:center;
    box-shadow:0 25px 65px #20020f44;
    transform:rotate(-3deg)}
.department-emblem-core img {
    width:75%;
    height:75%;
    object-fit:contain;
    transform:rotate(3deg)}
.department-emblem-core i {
    font-size:85px;
    color:var(--wine);
    transform:rotate(3deg)}
.department-emblem-caption {
    position:absolute;
    bottom:-20px;
    color:#e9c99b;
    font-size:10px;
    letter-spacing:.12em;
    text-align:center}

.department-nav {
    background:#fff;
    border-bottom:1px solid #e9e3dc;
    position:sticky;
    top:0;
    z-index:20;
    box-shadow:0 5px 15px #35201e05}
.department-nav>.container {
    display:flex;
    gap:32px;
    overflow-x:auto;
    white-space:nowrap}
.department-nav a {
    padding:23px 0;
    color:#54494b;
    font-weight:700;
    font-size:13px;
    border-bottom:3px solid transparent}
.department-nav a:hover,.department-nav a:focus {
    color:var(--wine);
    border-color:var(--wine)}

.department-content {
    padding-top:48px;
    padding-bottom:64px}
.department-content>.card {
    border:1px solid #e8e1d9!important;
    box-shadow:none!important;
    border-radius:16px!important;
    overflow:hidden}
.department-content>.card>.card-body {
    padding:32px}
.department-content h4 {
    font-size:23px;
    letter-spacing:-.02em}
.department-content .text-danger {
    color:var(--wine)!important}
.department-content .text-secondary {
    color:#655f60!important;
    line-height:1.95}
.department-multiline-text {
    white-space:pre-line}
.department-purpose .card {
    background:#eeeae2;
    border:0;
    box-shadow:none!important;
    border-radius:14px!important}
.department-purpose .card-body {
    padding:28px}
.department-purpose h5 {
    font-size:19px;
    margin-bottom:18px}
.department-purpose p {
    font-size:14px}
.department-section-intro {
    color:var(--muted);
    font-size:14px;
    line-height:1.8}

.department-experience .materials-tabs {
    display:flex;
    gap:8px;
    justify-content:flex-start!important;
    border:0;
    background:#f3f0eb;
    padding:7px;
    border-radius:12px;
    margin:24px 0;
    overflow-x:auto;
    flex-wrap:nowrap}
.department-experience .materials-tabs .nav-link {
    border:0;
    border-radius:8px;
    color:#66565b;
    white-space:nowrap;
    font-weight:700;
    padding:12px 22px}
.department-experience .materials-tabs .nav-link.active {
    background:var(--wine);
    color:white;
    box-shadow:0 4px 10px #861d3220}
.semester-header {
    font-size:15px;
    color:#63525a;
    display:flex;
    gap:10px;
    align-items:center;
    margin:26px 0 17px}
.department-experience .material-card {
    background:#fff;
    border:1px solid #ebe5df!important;
    border-radius:10px;
    box-shadow:none!important}
.material-icon-box {
    width:40px;
    height:44px;
    border-radius:9px;
    background:#f8edf0;
    color:var(--wine);
    display:grid;
    place-items:center;
    flex-shrink:0}
.material-title {
    font-weight:700;
    font-size:14px;
    line-height:1.7;
    margin:0}
.department-news-card {
    height:100%;
    border:1px solid #e9e3dd;
    border-radius:12px;
    overflow:hidden;
    background:white;
    transition:transform .2s,box-shadow .2s}
.department-news-card:hover {
    transform:translateY(-4px);
    box-shadow:0 15px 30px #39151f0c}
.department-news-image {
    width:100%;
    height:200px;
    object-fit:cover;
    background:#eeeae3}
.department-news-body {
    padding:22px}
.department-news-title {
    font-weight:700;
    line-height:1.8;
    font-size:17px}
.department-news-meta {
    color:var(--muted);
    font-size:12px;
    margin:12px 0}
.department-news-link {
    color:var(--wine);
    font-size:13px;
    font-weight:700}
.department-empty {
    text-align:center;
    padding:55px 24px;
    border:1px dashed #cfc3b8;
    border-radius:16px;
    margin-bottom:24px}
.department-empty i {
    font-size:28px;
    color:var(--wine);
    margin-bottom:18px}
.department-empty h2 {
    font-size:23px}
.department-empty p {
    color:var(--muted);
    margin:12px 0 0}

.department-directory {
    padding-top:46px;
    padding-bottom:70px}
.department-directory-toolbar {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    margin-bottom:30px;
    flex-wrap:wrap}
.department-directory-toolbar h2 {
    font-size:25px;
    font-weight:800;
    margin:0}
.department-search {
    display:flex;
    align-items:center;
    gap:12px;
    background:#fff;
    border:1px solid #d7ccc4;
    padding:14px 18px;
    border-radius:10px;
    min-width:min(100%,340px);
    color:var(--wine)}
.department-search input {
    border:0;
    outline:0;
    background:transparent;
    width:100%;
    color:var(--ink);
    font:inherit;
    font-size:14px}
.department-search:focus-within {
    outline:3px solid #c59a50;
    outline-offset:3px}
.department-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px}
.department-directory-card {
    display:flex;
    flex-direction:column;
    color:var(--ink)!important;
    border:1px solid #e5ded5;
    background:white;
    border-radius:16px;
    overflow:hidden;
    transition:transform .2s,box-shadow .2s}
.department-directory-card:hover {
    transform:translateY(-6px);
    box-shadow:0 18px 38px #39151f12}
.department-card-art {
    height:180px;
    display:grid;
    place-items:center;
    position:relative;
    background:radial-gradient(ellipse at center,#fff 0,#eee8df 80%);
    overflow:hidden}
.department-card-art:before {
    content:'';
    position:absolute;
    border:1px solid #c8b29966;
    width:155px;
    height:200px;
    border-radius:100px 100px 0 0;
    transform:rotate(20deg)}
.department-card-art img {
    height:100px;
    width:100px;
    object-fit:contain;
    position:relative;
    z-index:1}
.department-card-art>i {
    font-size:50px;
    color:var(--wine);
    z-index:1}
.department-card-content {
    padding:26px;
    display:flex;
    flex-direction:column;
    flex:1}
.department-card-content h3 {
    font-size:21px;
    font-weight:800;
    line-height:1.5;
    margin:0 0 12px}
.department-card-content p {
    color:var(--muted);
    font-size:14px;
    line-height:1.8;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden}
.department-card-link {
    display:flex;
    justify-content:space-between;
    color:var(--wine);
    font-weight:700;
    font-size:13px;
    border-top:1px solid #eee7e0;
    padding-top:18px;
    margin-top:auto}
.department-directory-card[hidden],.department-empty[hidden] {
    display:none!important}

@media(max-width:991px) {
    .department-hero-grid {
    grid-template-columns:1fr .65fr;
    gap:24px}
.department-orbit {
    width:220px;
    height:270px}
.orbit-two {
    width:250px;
    height:240px}
.department-emblem-core {
    width:180px;
    height:220px}
.department-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))}
.department-hero {
    padding:48px 0 60px}
}

@media(max-width:600px) {
    .department-hero-grid {
    grid-template-columns:1fr}
.department-emblem {
    display:none}
.department-hero h1 {
    font-size:2.5rem}
.department-kicker {
    font-size:9px;
    margin-top:25px}
.department-hero-intro {
    font-size:14px}
.department-hero-actions {
    gap:20px}
.department-button {
    padding:14px 18px}
.department-nav>.container {
    gap:23px}
.department-nav a {
    padding:18px 0;
    font-size:12px}
.department-content {
    padding-top:26px}
.department-content>.card>.card-body {
    padding:22px}
.department-grid {
    grid-template-columns:1fr}
.department-search {
    width:100%}
.department-directory {
    padding-top:30px}
.department-experience .materials-tabs .nav-link {
    padding:10px 15px}
.department-content h4 {
    font-size:20px}
}

@media(prefers-reduced-motion:reduce) {
    .department-experience * {
    transition:none!important;
    scroll-behavior:auto!important}
}