:root { color-scheme: dark; --page: #080b10; --text: #f6f6f4; --gold: #f5ce78; }
* { box-sizing: border-box; }
html { min-width: 320px; }
body { margin: 0; background: var(--page); color: var(--text); font-family: 'DM Sans', sans-serif; }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% -45%, #a67e3b25, transparent 65%); }
button, a { -webkit-tap-highlight-color: transparent; }
.shell { position: relative; display: flex; flex-direction: column; width: 100%; height: 100svh; min-height: 740px; padding: 0 28px; }
.site-header { position: relative; flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; height: 90px; border-bottom: 1px solid #ffffff12; }
.brand { position: relative; display: grid; place-items: center; width: clamp(260px, 40vw, 440px); height: 100%; isolation: isolate; }
.brand::before { content: ''; position: absolute; z-index: -1; inset: 4px -45px; pointer-events: none; background: radial-gradient(ellipse, #f5c76828, transparent 70%); }
.brand::after { content: ''; position: absolute; bottom: 0; left: -30px; right: -30px; height: 1px; background: linear-gradient(90deg, transparent, #f9d98bbf, transparent); box-shadow: 0 0 16px #f5ce7855; }
.brand-mark { position: relative; display: inline-block; color: var(--gold); font: italic 700 clamp(30px, 4vw, 48px)/1.1 'Barlow Condensed', sans-serif; letter-spacing: .045em; transform: scaleX(1.3); background: linear-gradient(110deg, #d69935 0%, #ffdc85 25%, #f6c65f 41%, #fffce9 48%, #fff 50%, #fff2b9 52%, #efb747 59%, #ffdc85 80%, #d69935 100%); background-size: 300% 100%; background-position: 100% 50%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 5px #ffd77966) drop-shadow(0 0 16px #eebf4544); animation: brand-shine 6s ease-in-out infinite; }
.brand-mark span { display: inline-block; margin-left: 2px; font-size: .72em; vertical-align: top; }
@keyframes brand-shine { 0%, 18% { background-position: 100% 50%; } 65%, 100% { background-position: 0% 50%; } }
.brand-name { color: #d4d5d5; font-size: 9px; font-weight: 600; line-height: 1.7; letter-spacing: .2em; }
.brand-name small { display: block; color: #8a8d96; font-size: 8px; letter-spacing: .16em; }
.header-label { justify-self: end; display: flex; align-items: center; gap: 12px; color: #a8adba; font-size: 10px; font-weight: 600; letter-spacing: .21em; text-transform: uppercase; }
.header-label::before { content: ''; width: 5px; height: 5px; background: var(--gold); transform: rotate(45deg); box-shadow: 0 0 12px #f5ce7866; }
main { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.intro { flex: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 22px 2px 24px; }
.eyebrow { margin: 0 0 8px; color: var(--gold); font-size: 9px; font-weight: 600; letter-spacing: .25em; text-transform: uppercase; }
h1 { margin: 0; font: 700 clamp(28px, 2.6vw, 44px)/1.15 'Plus Jakarta Sans', sans-serif; letter-spacing: -.045em; }
h1 span { color: var(--gold); }
.intro-copy { margin: 0 0 4px; max-width: 280px; color: #9298a7; font-size: 12px; line-height: 1.8; text-align: right; }
nav { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.portals { flex: 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; min-height: 0; margin: 0; padding: 0; list-style: none; }
.portals > li { min-width: 0; min-height: 0; display: flex; }
.admin { --accent: 244, 196, 96; }
.tutor { --accent: 91, 205, 243; }
.staff { --accent: 90, 221, 173; }
.hr { --accent: 177, 141, 248; }
.guide { --accent: 246, 154, 102; }
.website { --accent: 244, 104, 112; }
.portal { position: relative; display: flex; flex-direction: column; width: 100%; min-width: 0; height: 100%; padding: 0; isolation: isolate; overflow: hidden; border: 1px solid rgba(var(--accent), .32); border-radius: 12px; background: radial-gradient(ellipse at 50% 32%, rgba(var(--accent), .11), transparent 65%), linear-gradient(160deg, #131a24, #0b1019 75%); color: var(--text); text-align: left; text-decoration: none; font: inherit; cursor: pointer; box-shadow: 0 8px 30px #0004; transition: border-color .3s, box-shadow .3s, transform .3s; }
.portal::before { content: ''; position: absolute; z-index: 3; top: 0; left: 18%; right: 18%; height: 2px; background: linear-gradient(90deg, transparent, rgb(var(--accent)), transparent); box-shadow: 0 0 22px rgba(var(--accent), .9); }
.portal::after { content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none; opacity: .25; background-image: linear-gradient(rgba(var(--accent), .1) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--accent), .1) 1px, transparent 1px); background-size: 40px 40px; mask-image: linear-gradient(transparent, #000 30%, transparent 76%); }
.portal:hover, .portal:focus-visible { transform: translateY(-3px); border-color: rgba(var(--accent), .9); box-shadow: 0 0 26px rgba(var(--accent), .2), 0 10px 36px #0007; }
.portal:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 4px; }
.card-top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 21px 22px; color: rgb(var(--accent)); text-transform: uppercase; }
.card-number { font: 600 23px/1 'Barlow Condensed', sans-serif; letter-spacing: .04em; text-shadow: 0 1px 12px #000; }
.card-class { padding: 6px 8px; border: 1px solid rgba(var(--accent), .28); border-radius: 0; background: #080d156e; backdrop-filter: blur(8px); font: 600 10px/1.1 'Barlow Condensed', sans-serif; letter-spacing: .16em; }
.card-content { position: relative; z-index: 2; margin-top: auto; padding: 0 24px; text-align: center; }
.role { display: flex; align-items: center; justify-content: center; gap: 9px; margin-bottom: 11px; color: rgb(var(--accent)); font: 600 9px/1.5 'DM Sans', sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.role::before, .role::after { content: ''; width: 17px; height: 1px; background: currentColor; box-shadow: 0 0 8px rgba(var(--accent), .5); }
.portal h2 { margin: 0; font: 600 clamp(22px, 1.8vw, 44px)/1.06 'Barlow Condensed', sans-serif; letter-spacing: -.015em; text-transform: uppercase; text-shadow: 0 2px 15px #0005; }
.enter { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 22px 24px 24px; padding: 14px 15px; border: 1px solid rgba(var(--accent), .42); border-radius: 0; background: rgba(var(--accent), .075); color: rgb(var(--accent)); font-size: 11px; font-weight: 600; transition: background .25s, box-shadow .25s; }
.enter svg { flex: none; width: 16px; height: 16px; transition: transform .25s; }
.portal:hover .enter, .portal:focus-visible .enter { background: rgba(var(--accent), .18); box-shadow: 0 0 20px rgba(var(--accent), .13); }
.portal:hover .enter svg, .portal:focus-visible .enter svg { transform: translateX(3px); }
.portal[aria-disabled="true"] { cursor: default; }
.portal[aria-disabled="true"] .enter { color: #c0aba0; border-style: dashed; }
.selection-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 2px; }
.selection-count { color: #838997; font: 500 11px/1 'Barlow Condensed', sans-serif; letter-spacing: .16em; }
.selection-count b { color: var(--gold); font-weight: 600; }
.selection-hint { margin: 0; color: #8d94a3; font-size: 10px; line-height: 1.4; }
.selection-hint kbd { display: inline-flex; justify-content: center; align-items: center; min-width: 19px; height: 18px; margin-right: 3px; border: 1px solid #ffffff25; border-radius: 0; color: #c2c6cf; font: 11px sans-serif; }
.selection-hint .hint-copy { margin-left: 6px; }
.mobile-hint { display: none; }
.site-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex: none; padding: 11px 2px 14px; border-top: 1px solid #ffffff0c; color: #6f788a; font-size: 9px; line-height: 1.5; }
.footer-motto { color: #a28d66; font-size: 8px; letter-spacing: .16em; text-transform: uppercase; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (min-width: 1600px) { .shell { padding-inline: 32px; } .portals { gap: 16px; } .card-content { padding-inline: 28px; } .enter { margin-inline: 28px; margin-bottom: 28px; } .role { font-size: 10px; } .card-top { padding: 24px 26px; } }
@media (min-width: 1001px) and (max-width: 1250px) { .shell { padding-inline: 20px; } .portals { gap: 10px; } .card-content { padding-inline: 16px; } .enter { margin-inline: 16px; padding-inline: 8px; white-space: nowrap; } .card-top { padding-inline: 16px; } .card-class { font-size: 9px; letter-spacing: .08em; } .role { font-size: 8px; } .portal h2 { font-size: clamp(19px, 1.9vw, 22px); } }
@media (min-width: 1001px) and (max-width: 1699px) { .role { letter-spacing: .08em; } .role::before, .role::after { display: none; } }
@media (max-width: 1000px) {
  .shell { padding-inline: 22px; min-height: 700px; }
  .intro-copy { max-width: 210px; font-size: 11px; }
  .portals { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(260px, 34%); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 6px; padding: 4px 6px 10px; margin-inline: -6px; scrollbar-width: thin; scrollbar-color: #6e6040 #ffffff08; }
  .portals > li { scroll-snap-align: start; }
  .portal h2 { font-size: 36px; }
  .mobile-hint { display: inline; }
  .desktop-hint { display: none; }
}
@media (max-width: 600px) {
  .shell { height: 100svh; min-height: 730px; padding-inline: 16px; }
  .site-header { height: 80px; gap: 6px; grid-template-columns: 1fr; }
  .brand { grid-column: 1; grid-row: 1; justify-self: center; width: min(100%, 320px); }
  .brand-mark { font-size: clamp(28px, 7vw, 36px); transform: scaleX(1.15); }
  .brand::before { inset-inline: -20px; }
  .brand::after { left: -10px; right: -10px; }
  .brand-name { display: none; }
  .header-label { display: none; }
  .intro { display: block; padding: 22px 0 20px; }
  .eyebrow { margin-bottom: 9px; font-size: 8px; letter-spacing: .19em; }
  h1 { font-size: clamp(25px, 7.6vw, 40px); }
  .intro-copy { max-width: none; margin: 10px 0 0; font-size: 10px; text-align: left; }
  .portals { grid-auto-columns: min(83vw, 360px); gap: 12px; }
  .card-top { padding: 20px; }
  .card-content { padding-inline: 22px; }
  .role { font-size: 9px; }
  .portal h2 { font-size: 37px; }
  .enter { margin: 18px 22px 22px; padding-block: 13px; }
  .selection-footer { padding-block: 13px; }
  .selection-hint { font-size: 9px; }
  .selection-count { font-size: 10px; }
  .site-footer { padding-block: 10px; font-size: 8px; }
  .footer-motto { display: none; }
}

.icon-stage { position: relative; z-index: 2; flex: 1; min-height: 150px; display: grid; place-items: center; padding: 10px 16px 24px; }
.icon-frame { position: relative; display: grid; place-items: center; width: clamp(120px, 11vw, 210px); max-width: 80%; aspect-ratio: 1; border: 1px solid rgba(var(--accent), .3); border-radius: 30px; color: rgb(var(--accent)); background: linear-gradient(145deg, rgba(var(--accent), .12), rgba(var(--accent), .025) 70%); box-shadow: inset 0 1px 0 rgba(var(--accent), .14), 0 0 70px rgba(var(--accent), .1), 0 18px 32px #0003; transition: transform .35s, box-shadow .35s, border-color .35s; }
.icon-frame::before { content: ''; position: absolute; inset: -13px; border: 1px solid rgba(var(--accent), .08); border-radius: 41px; pointer-events: none; }
.portal-icon { width: 66%; height: 66%; filter: drop-shadow(0 0 12px rgba(var(--accent), .2)); }
.icon-fill { fill: rgba(var(--accent), .09); }
.portal:hover .icon-frame, .portal:focus-visible .icon-frame { transform: translateY(-5px); border-color: rgba(var(--accent), .65); box-shadow: inset 0 1px 0 rgba(var(--accent), .2), 0 0 90px rgba(var(--accent), .19), 0 22px 36px #0004; }
@media (max-width: 1000px) { .icon-frame { width: 160px; } }
@media (max-height: 800px) { .icon-frame { width: 132px; border-radius: 24px; } .icon-frame::before { inset: -10px; border-radius: 33px; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .portal:hover, .portal:focus-visible { transform: none; } .portal:hover .icon-frame, .portal:focus-visible .icon-frame { transform: none; } }