/* aliens-site — white molded hardware, black glass, restrained signal green. */
:root {
    --shell:#efeee9;
    --paper:#fafaf7;
    --ink:#191b19;
    --muted:#656862;
    --line:#cecec6;
    --signal:#69f52c;
    --bs-body-bg:var(--shell);
    --bs-body-color:var(--ink);
    --bs-link-color:#20231e;
    --bs-link-hover-color:#42483b;
    --bs-border-color:var(--line);
    font-size:16px
}
* {
    box-sizing:border-box
}
body {
    margin:0;
    background:var(--shell);
    color:var(--ink);
    font-family:Arial,Helvetica,sans-serif;
    line-height:1.5
}
a {
    color:inherit;
    text-underline-offset:4px
}
button,input,select,textarea {
    font:inherit
}
h1,h2,h3 {
    font-weight:750;
    letter-spacing:-.045em;
    line-height:1.1
}
h1 {
    font-size:clamp(2.2rem,4.5vw,4rem)
}
h2 {
    font-size:1.8rem
}
h3 {
    font-size:1.3rem
}
p {
    color:var(--muted)
}
.micro,.eyebrow,.specimen-number,.specimen-meta,.field-list dt,.status {
    font-family:Consolas,'Courier New',monospace;
    font-size:.75rem;
    letter-spacing:.065em
}
.eyebrow {
    margin-bottom:20px
}
.sidebar {
    width:238px;
    position:fixed;
    inset:0 auto 0 0;
    padding:28px 22px 20px;
    background:#f9f9f5;
    border-right:1px solid #c8c9c1;
    box-shadow:3px 0 10px #171a0d05;
    display:flex;
    flex-direction:column;
    z-index:100
}
.brand {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    text-decoration:none;
    font-size:1.9rem;
    font-weight:800;
    letter-spacing:-.06em;
    line-height:1.2
}
.brand img {
    width:112px;
    height:112px;
    object-fit:contain;
    background:#111;
    border-radius:22px;
    margin-bottom:18px
}
.brand-caption {
    display:block;
    font-family:Consolas,monospace;
    font-size:.62rem;
    letter-spacing:.08em;
    line-height:1.6;
    margin-top:15px;
    color:#666
}
.sidebar-content {
    display:flex!important;
    flex-direction:column;
    flex:1;
    min-height:0
}
.sidebar nav {
    margin-top:35px;
    display:grid;
    gap:4px
}
.sidebar nav a {
    padding:10px 12px;
    text-decoration:none;
    border:1px solid transparent;
    border-radius:7px;
    font-size:.9rem;
    display:flex;
    align-items:center;
    gap:14px
}
.sidebar nav a span {
    font-size:1.05rem;
    width:20px;
    text-align:center
}
.sidebar nav a:hover {
    background:#eaece4;
    border-color:#d3d7c9
}
.sidebar nav a[aria-current=page] {
    background:#e5e9df;
    border-color:#c7cdbd;
    box-shadow:inset 3px 0 var(--signal)
}
.account-nav {
    border-top:1px solid var(--line);
    margin-top:24px;
    padding:16px 10px
}
.navbar-nav {
    gap:10px;
    font-size:.85rem
}
.nav-link {
    color:var(--ink)!important;
    padding:0!important;
    text-align:left
}
.sidebar-foot {
    margin-top:auto;
    display:flex;
    align-items:center;
    gap:12px;
    padding:22px 6px 0
}
.sidebar-foot .micro {
    font-size:.6rem;
    line-height:1.8
}
.sidebar-foot small {
    color:#767972
}
.physical-led {
    width:32px;
    height:32px;
    border:7px solid #dddeda;
    border-radius:50%;
    background:#969b91;
    box-shadow:0 0 0 1px #b7bab1,inset 0 2px 4px #0005,0 3px 4px #0002;
    flex-shrink:0
}
.physical-led.authenticated {
    background:var(--signal)
}
.nav-toggle {
    display:none
}
.workspace {
    margin-left:238px;
    padding:0 36px;
    max-width:1800px
}
.topbar {
    height:74px;
    border-bottom:1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px
}
.topbar .micro {
    font-size:.65rem;
    color:#60635c
}
main {
    padding:28px 0 45px;
    min-height:calc(100vh - 150px)
}
.console-hero {
    position:relative;
    overflow:hidden;
    min-height:360px;
    background:#121512;
    color:#f8f9f2;
    border:9px solid #d9dbd2;
    outline:1px solid #babdb3;
    border-radius:24px;
    box-shadow:inset 0 0 0 2px #080a08,0 5px 9px #00000015;
    padding:35px 36px;
    margin-bottom:28px
}
.screen-copy {
    position:relative;
    z-index:2;
    width:65%
}
.screen-copy>.micro {
    color:#a2a99c;
    font-size:.65rem
}
.screen-id {
    margin-left:20px;
    color:#747d6c
}
.screen-copy h1 {
    font-size:clamp(2rem,3.5vw,3.8rem);
    letter-spacing:-.05em;
    line-height:.98;
    margin:30px 0 24px
}
.screen-copy h1>span {
    font-size:.65em;
    letter-spacing:-.015em;
    display:inline-block
}
.screen-caption {
    font-family:Consolas,monospace;
    color:#d5dbce;
    font-size:.65rem;
    letter-spacing:.12em
}
.screen-note {
    font-size:.8rem;
    color:#a9b1a2;
    max-width:300px
}
.hero-creature {
    position:absolute;
    right:-26px;
    top:-24px;
    width:46%;
    height:118%;
    object-fit:contain;
    opacity:.9
}
.screen-screw {
    width:8px;
    height:8px;
    border-radius:50%;
    border:1px solid #62685c;
    position:absolute;
    bottom:14px;
    background:linear-gradient(45deg,#131613 42%,#747d6c 44%,#747d6c 53%,#131613 55%)
}
.screw-left {
    left:14px
}
.screw-right {
    right:14px
}
.led {
    display:inline-block;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--signal);
    margin-left:9px;
    vertical-align:middle
}
.led.inactive {
    background:#8b9185
}
.system-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
    margin-bottom:36px
}
.module {
    background:linear-gradient(#fafaf7,#f2f2eb);
    border:1px solid #c9ccc2;
    box-shadow:inset 0 1px #fff,0 2px 3px #00000008;
    border-radius:12px;
    padding:20px
}
.module>.micro {
    display:flex;
    justify-content:space-between;
    color:#4b5146;
    font-size:.65rem
}
.module strong {
    display:block;
    font-size:2.8rem;
    letter-spacing:-.07em;
    margin:13px 0 5px;
    line-height:1.2
}
.module strong.word-value {
    font-size:1.25rem;
    letter-spacing:-.04em;
    min-height:54px;
    display:flex;
    align-items:center
}
.module p:not(.micro) {
    font-size:.8rem;
    margin:0 0 12px
}
.module>span {
    font-size:.55rem;
    color:#757c6e;
    letter-spacing:0
}
.section-heading {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:20px;
    margin:0 0 20px
}
.section-heading p {
    margin:0 0 8px
}
.section-heading h2 {
    margin:0
}
.section-heading>a {
    font-family:Consolas,monospace;
    font-size:.75rem;
    white-space:nowrap
}
.specimen-grid {
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:12px
}
.specimen-card {
    display:block;
    min-width:0;
    border:1px solid #c5c8bc;
    background:#fafaf7;
    border-radius:13px;
    text-decoration:none;
    padding:13px;
    box-shadow:0 3px 4px #00000008;
    transition:transform .18s,border-color .18s
}
.specimen-number {
    display:flex;
    justify-content:space-between;
    font-size:.55rem;
    color:#5e6657
}
.specimen-art {
    aspect-ratio:1/1;
    margin:17px 0 15px;
    transition:transform .2s;
    overflow:hidden;
    border-radius:7px
}
.logo-art {
    background:#101310
}
.logo-art img {
    width:100%;
    height:100%;
    object-fit:contain
}
.ink-art {
    background-image:url('/Images/specimens.png');
    background-repeat:no-repeat;
    background-size:400% 100%;
    mix-blend-mode:multiply
}
.oracle {
    background-position:0% 50%
}
.skully {
    background-position:33.333% 50%
}
.drip {
    background-position:66.666% 50%
}
.the-hand {
    background-position:100% 50%
}
.specimen-caption h3 {
    font-size:1.08rem;
    letter-spacing:-.04em;
    margin:0 0 5px
}
.specimen-caption p {
    font-size:.7rem;
    margin:0
}
.specimen-meta {
    border-top:1px solid #dedfd6;
    margin-top:14px;
    padding-top:10px;
    font-size:.55rem;
    letter-spacing:0;
    color:#697160;
    display:grid;
    gap:8px
}
.specimen-meta .led {
    margin:0 6px 0 0;
    width:5px;
    height:5px
}
.specimen-card:hover,.specimen-card:focus-visible {
    transform:translateY(-3px);
    border-color:#626e55
}
.specimen-card:hover .specimen-art {
    transform:translateY(-3px)
}
.specimen-card:hover .specimen-meta,.specimen-card:focus-visible .specimen-meta {
    color:#20261b
}
.crew-section {
    margin-bottom:42px
}
.applications {
    margin:38px 0
}
.project-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px
}
.project-card {
    padding:25px;
    border:1px solid #c9ccc2;
    border-radius:14px;
    background:#f9f9f5;
    box-shadow:inset 0 1px white,0 2px 3px #00000008;
    margin-bottom:0
}
.portal-card {
    display:block;
    text-decoration:none
}
.portal-card:hover {
    border-color:#69715e;
    color:#111
}
.project-card h2,.project-card h3 {
    margin:18px 0 13px
}
.project-card p {
    font-size:.9rem
}
.card-action {
    font-family:Consolas,monospace;
    font-size:.7rem
}
.portal-heading {
    padding:10px 0 28px
}
.portal-heading .subtitle {
    font-size:1rem;
    max-width:720px;
    margin:18px 0 0
}
.portal-heading h1 {
    margin:0
}
.status {
    display:inline-block;
    padding:5px 8px;
    border:1px solid #b7bfad;
    border-radius:4px;
    color:#464e3e;
    font-size:.7rem
}
.terminal {
    background:#141713;
    color:#e3e8dd;
    border:7px solid #d9dbd2;
    border-radius:16px;
    margin-top:28px;
    padding:25px 28px;
    box-shadow:inset 0 1px 5px #000a;
    overflow:auto
}
.terminal-bar {
    display:flex;
    justify-content:space-between;
    border-bottom:1px solid #404739;
    padding-bottom:14px;
    font-family:Consolas,monospace;
    font-size:.6rem;
    color:#959f8b;
    gap:16px
}
.terminal-bar h2 {
    font:inherit;
    margin:0;
    letter-spacing:.1em
}
.terminal-prompt {
    font-family:Consolas,monospace;
    font-size:.85rem;
    color:#e3e8dd;
    margin:24px 0 18px
}
.cursor {
    display:inline-block;
    width:7px;
    height:13px;
    background:var(--signal);
    vertical-align:middle
}
.terminal-lines {
    font-family:Consolas,monospace;
    font-size:.8rem
}
.terminal-lines div {
    display:grid;
    grid-template-columns:minmax(170px,260px) 1fr;
    gap:15px
}
.terminal-lines dt {
    font-weight:400
}
.terminal-lines dd {
    color:#969f8d;
    margin:0 0 8px
}
.terminal-note {
    font: .7rem Consolas,monospace;
    color:#8b9680
}
.portal-footer {
    border-top:1px solid var(--line);
    padding:20px 0;
    display:flex;
    justify-content:space-between;
    font: .6rem Consolas,monospace;
    color:#676e5e;
    gap:20px
}
.specimen-detail {
    display:grid;
    grid-template-columns:260px 1fr;
    gap:24px;
    align-items:start
}
.specimen-detail .specimen-card {
    pointer-events:none
}
.field-list div {
    display:grid;
    grid-template-columns:150px 1fr;
    padding:12px 0;
    border-bottom:1px solid var(--line);
    gap:16px
}
.field-list dt {
    text-transform:uppercase;
    color:#626b56;
    font-weight:400
}
.field-list dd {
    margin:0
}
.table {
    --bs-table-bg:transparent;
    --bs-table-color:var(--ink);
    --bs-table-border-color:#d3d6ca;
    font-size:.85rem
}
.table th {
    font: .65rem Consolas,monospace;
    text-transform:uppercase;
    padding:16px 10px
}
.table td {
    padding:18px 10px;
    min-width:100px
}
caption {
    font-size:.75rem;
    color:#626b56
}
.hero-actions {
    display:flex;
    gap:20px;
    flex-wrap:wrap
}
.primary-button,.secondary-button,.btn-primary {
    display:inline-block;
    padding:12px 20px;
    border-radius:7px;
    text-decoration:none;
    background:#20251c;
    color:#fff;
    border:1px solid #20251c
}
.primary-button:hover,.btn-primary:hover {
    background:#363e2e;
    color:white;
    border-color:#363e2e
}
.login-panel {
    max-width:480px;
    margin:22px auto 45px
}
.login-panel h1 {
    font-size:2.6rem;
    margin:15px 0 25px
}
.login-panel h2 {
    margin:0 0 10px;
    font-size:1.35rem;
}
.login-intro {
    max-width:760px;
    margin:52px auto 0;
    padding:0 20px;
    text-align:center;
}
.acronym-expansion {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:7px 16px;
    margin-top:0;
    color:var(--muted);
    font-family:Consolas, 'Courier New', monospace;
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
}
.acronym-expansion strong {
    color:var(--ink);
    font-size:1.1em;
}
.form-control {
    background:#fff;
    border-color:#aab39e;
    color:#171c13
}
.form-control:focus {
    box-shadow:0 0 0 3px #b8d8a080;
    border-color:#596e45
}
.nav-pills .nav-link {
    padding:10px!important
}
.nav-pills .nav-link.active {
    background:#e0e7d8
}
.text-danger {
    color:#a4212b!important
}
.portal-note {
    margin-top:24px;
    font-size:.85rem
}
.skip-link {
    position:absolute;
    top:-100px;
    left:12px;
    z-index:1000;
    background:#fff;
    padding:12px
}
.skip-link:focus {
    top:12px
}
:focus-visible {
    outline:3px solid #4b7c2d;
    outline-offset:4px
}
img {
    max-width:100%
}
@media(min-width:1600px) {
    .workspace {
        padding-left:50px;
        padding-right:50px
    }
    .console-hero {
        min-height:400px
    }
}
@media(max-width:1200px) {
    .sidebar {
        width:210px;
        padding:25px 18px
    }
    .workspace {
        margin-left:210px;
        padding:0 24px
    }
    .specimen-grid {
        grid-template-columns:repeat(3,minmax(0,1fr))
    }
    .project-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .system-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .hero-creature {
        opacity:.65
    }
    .screen-copy {
        width:75%
    }
}
@media(max-width:760px) {
    .sidebar {
        position:relative;
        width:100%;
        padding:16px 20px;
        border-right:0;
        border-bottom:1px solid var(--line)
    }
    .brand {
        flex-direction:row;
        align-items:center;
        gap:14px;
        font-size:1.7rem
    }
    .brand img {
        width:60px;
        height:60px;
        border-radius:12px;
        margin:0
    }
    .brand-caption {
        font-size:.5rem;
        margin-top:6px
    }
    .nav-toggle {
        display:flex;
        justify-content:space-between;
        align-items:center;
        position:absolute;
        right:20px;
        top:35px;
        border:1px solid #bcc3b2;
        background:#f5f7f0;
        border-radius:6px;
        padding:7px 9px;
        font-size:0;
        gap:8px
    }
    .nav-toggle span {
        font-size:1.2rem
    }
    .sidebar-content:not(.show) {
        display:none!important
    }
    .sidebar nav {
        margin-top:22px;
        grid-template-columns:1fr 1fr
    }
    .sidebar-foot {
        padding-top:5px
    }
    .workspace {
        margin-left:0;
        padding:0 18px
    }
    .topbar {
        height:55px
    }
    .topbar>span:last-child {
        display:none
    }
    main {
        padding-top:20px
    }
    .console-hero {
        min-height:330px;
        padding:25px 20px;
        border-width:6px;
        border-radius:18px
    }
    .screen-copy {
        width:100%
    }
    .screen-copy h1 {
        font-size:2.6rem;
        margin-top:40px
    }
    .screen-copy h1>span {
        font-size:.58em
    }
    .hero-creature {
        width:60%;
        height:95%;
        right:-55px;
        top:-15px;
        opacity:.2
    }
    .screen-note {
        max-width:230px
    }
    .system-grid {
        gap:10px
    }
    .module {
        padding:15px
    }
    .module strong.word-value {
        font-size:1rem
    }
    .module .micro {
        font-size:.6rem
    }
    .specimen-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .project-grid {
        grid-template-columns:1fr
    }
    .section-heading {
        align-items:start
    }
    .section-heading h2 {
        font-size:1.6rem
    }
    .section-heading>a {
        font-size:.65rem
    }
    .specimen-detail {
        grid-template-columns:1fr
    }
    .specimen-detail>.specimen-card {
        max-width:300px
    }
    .field-list div {
        grid-template-columns:110px 1fr
    }
    .terminal {
        padding:20px 15px;
        border-width:5px
    }
    .terminal-lines {
        font-size:.68rem
    }
    .terminal-lines div {
        grid-template-columns:1fr 1fr;
        gap:5px
    }
    .terminal-note {
        line-height:1.5
    }
    .portal-footer {
        flex-direction:column;
        gap:6px
    }
    .login-panel {
        margin:20px auto
    }
    .portal-heading h1 {
        font-size:2.2rem
    }
}
@media(prefers-reduced-motion:reduce) {
    *,*::before,*::after {
        transition:none!important;
        animation:none!important
    }
}
/* Keep the generated ink specimens at their original proportions. */
.specimen-art {
    aspect-ratio: 11 / 16;
}
/* Faint contour rings stay behind the shell rather than the content. */
.workspace {
    background-image: repeating-radial-gradient(ellipse at 110% 10%,transparent 0 26px,#30372803 27px 28px,transparent 29px 54px);
}
/* Readable technical labels and a scrollable console rail on short screens. */
.sidebar {
    overflow-y: auto;
}
.micro, .eyebrow, .specimen-number, .specimen-meta, .status,
.topbar .micro, .screen-copy > .micro, .screen-caption,
.module > .micro, .module > span, .terminal-bar, .terminal-note,
.portal-footer, .brand-caption, .sidebar-foot .micro, .card-action,
.section-heading > a, .table th {
    font-size: .75rem;
}
.specimen-caption p, .module p:not(.micro) {
    font-size: .875rem;
}
.specimen-card:hover .specimen-number > span:last-child,
.specimen-card:focus-visible .specimen-number > span:last-child {
    color: #294d17;
    background: #adf18d;
    border-radius: 3px;
}
@media (max-width: 480px) {
    .system-grid, .specimen-grid {
        grid-template-columns: 1fr;
    }
    .specimen-art {
        max-width: 180px;
        margin-left: auto;
        margin-right: auto;
    }
    .module strong.word-value {
        min-height: 0;
    }
}

.account-notice {
    padding: 14px 18px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    color: var(--ink);
}

/* Connected, collapsible navigation. */
:root { --sidebar-width:238px; }
.sidebar-toggle[hidden] { display:none !important; }
.sidebar,
.workspace,
.sidebar-toggle {
    transition-duration:225ms;
    transition-timing-function:ease-in-out;
}
.sidebar {
    transition-property:transform;
    will-change:transform;
}
.sidebar.is-collapsed {
    transform:translateX(-100%);
    pointer-events:none;
}
.workspace { transition-property:margin-left; }
.sidebar-collapsed .workspace { margin-left:0; }
.sidebar-toggle {
    position:fixed;
    z-index:111;
    top:4px;
    left:12px;
    display:inline-flex;
    align-items:center;
    gap:9px;
    width:46px;
    min-height:44px;
    padding:8px 10px;
    overflow:visible;
    border:1px solid var(--line);
    border-radius:8px;
    background:var(--paper);
    color:var(--ink);
    font-family:Consolas, 'Courier New', monospace;
    font-size:.68rem;
    font-weight:700;
    letter-spacing:.08em;
    transition-property:left, top, width, min-height, padding, background, border-color, border-radius;
}
.sidebar-toggle:hover { background:#e6e9e0; }
.sidebar-toggle.is-expanded {
    top:4px;
    left:calc(var(--sidebar-width) - 114px);
    width:104px;
    padding:8px 10px;
    border-color:#bfc7b3;
    background:var(--paper);
}
.curved-menu-icon {
    display:grid;
    width:24px;
    gap:4px;
    flex:0 0 24px;
}
.curved-menu-icon span {
    display:block;
    width:24px;
    height:2px;
    margin:0;
    border-radius:999px;
    background:#111;
}
.menu-label { display:none; min-width:34px; }
.sidebar-toggle.is-expanded .menu-label { display:inline; }
.topbar > .micro:last-child { margin-left:auto; }
@media (max-width:760px) {
    :root { --sidebar-width:min(320px, 100vw); }
    .topbar { position:sticky; top:0; z-index:110; background:var(--shell); gap:12px; }
    .sidebar { position:fixed; top:55px; bottom:0; width:var(--sidebar-width); overflow-y:auto; }
    .sidebar nav { grid-template-columns:1fr; }
}

/* Public landing page. */
.landing-page .workspace {
    max-width:none;
    margin-left:0;
    padding:0 clamp(20px, 5vw, 72px);
}
.landing-page .topbar {
    height:84px;
}
.landing-brand {
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:var(--ink);
    font-family:Consolas, 'Courier New', monospace;
    font-size:.84rem;
    font-weight:700;
    letter-spacing:.04em;
    text-decoration:none;
}
.landing-brand img {
    width:38px;
    height:38px;
    border-radius:10px;
    background:#111;
    object-fit:contain;
}
.landing-sign-in {
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:10px 14px;
    border:1px solid var(--line);
    border-radius:8px;
    color:var(--ink);
    font-family:Consolas, 'Courier New', monospace;
    font-size:.76rem;
    font-weight:700;
    letter-spacing:.05em;
    text-decoration:none;
}
.landing-sign-in:hover { background:#e6e9e0; }
.landing-hero {
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(240px, .65fr);
    align-items:center;
    gap:clamp(30px, 8vw, 140px);
    min-height:calc(100vh - 190px);
    padding:clamp(48px, 9vw, 120px) 0;
    border-bottom:1px solid var(--line);
}
.landing-hero-copy { max-width:700px; }
.landing-hero h1 {
    margin:0;
    font-size:clamp(4rem, 10vw, 9rem);
    letter-spacing:-.09em;
    line-height:.78;
}
.landing-lede {
    max-width:480px;
    margin:32px 0 0;
    font-size:clamp(1.05rem, 2vw, 1.35rem);
    line-height:1.5;
}
.landing-actions {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:22px;
    margin-top:32px;
}
.landing-actions .btn { padding:12px 20px; }
.landing-text-link {
    color:var(--ink);
    font-family:Consolas, 'Courier New', monospace;
    font-size:.78rem;
    font-weight:700;
    letter-spacing:.04em;
}
.landing-mark {
    display:grid;
    width:min(100%, 330px);
    aspect-ratio:1;
    justify-self:end;
    place-items:center;
    border:1px solid #bdc1b5;
    border-radius:clamp(32px, 6vw, 64px);
    background:#111;
    box-shadow:inset 0 0 0 12px #1c201b, 12px 12px 0 #dfe2d8;
}
.landing-mark img {
    width:82%;
    height:82%;
    object-fit:contain;
}
.landing-portfolio { padding:clamp(60px, 10vw, 130px) 0; }
.landing-section-heading { max-width:540px; }
.landing-section-heading h2 {
    margin:0;
    font-size:clamp(2.5rem, 5vw, 4.5rem);
}
.landing-section-heading p:last-child { font-size:1.05rem; }
.landing-portfolio-grid {
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:16px;
    margin-top:38px;
}
.landing-project-card {
    min-height:230px;
    padding:26px;
    border:1px solid #c9ccc2;
    border-radius:10px;
    background:var(--paper);
}
.landing-project-card h3 { margin:32px 0 12px; }
.landing-project-card p { margin:0; }
@media (max-width:760px) {
    .landing-page .topbar { height:68px; }
    .landing-hero {
        grid-template-columns:1fr;
        min-height:auto;
        padding:68px 0;
    }
    .landing-mark { justify-self:start; width:min(220px, 70vw); }
    .landing-portfolio-grid { grid-template-columns:1fr; }
}

/* Recruiter-facing portfolio landing page. */
.landing-page main { padding:0; }
.portfolio-hero {
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(240px, .42fr);
    align-items:end;
    gap:48px;
    min-height:calc(100vh - 168px);
    padding:clamp(72px, 12vw, 150px) 0 clamp(64px, 9vw, 120px);
    border-bottom:2px solid #111;
}
.portfolio-hero h1 {
    max-width:850px;
    margin:0;
    color:#111;
    font-size:clamp(4rem, 11vw, 10rem);
    letter-spacing:-.095em;
    line-height:.76;
}
.portfolio-lede {
    max-width:680px;
    margin:36px 0 0;
    color:#242624;
    font-size:clamp(1.08rem, 2vw, 1.42rem);
    line-height:1.55;
}
.portfolio-actions {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:18px;
    margin-top:34px;
}
.portfolio-actions .btn,
.portfolio-contact .btn { padding:12px 18px; }
.portfolio-sign-in {
    padding:11px 14px;
    border:1px solid #111;
    border-radius:7px;
    color:#111;
    font-family:Consolas, 'Courier New', monospace;
    font-size:.75rem;
    font-weight:700;
    letter-spacing:.04em;
    text-decoration:none;
}
.portfolio-sign-in:hover { background:#111; color:#fff; }
.portfolio-hero-note {
    margin:0;
    padding:22px;
    border:1px solid #111;
    border-radius:12px;
    background:#fff;
}
.portfolio-hero-note p:last-child { margin:12px 0 0; color:#252825; }
.portfolio-profile {
    display:grid;
    grid-template-columns:minmax(0, .85fr) minmax(0, 1.15fr);
    gap:48px;
    padding:clamp(70px, 10vw, 130px) 0;
    border-bottom:1px solid #111;
}
.portfolio-profile h2,
.portfolio-section-heading h2,
.portfolio-contact h2 {
    margin:0;
    color:#111;
    font-size:clamp(2.55rem, 5vw, 5rem);
    letter-spacing:-.065em;
}
.portfolio-profile > p {
    max-width:720px;
    margin:0;
    color:#242624;
    font-size:clamp(1.12rem, 2vw, 1.44rem);
    line-height:1.55;
}
.career-roadmap,
.portfolio-projects,
.portfolio-skills,
.portfolio-contact { padding:clamp(72px, 11vw, 145px) 0; }
.portfolio-section-heading { max-width:740px; }
.portfolio-section-heading > p:last-child { max-width:520px; font-size:1.05rem; }
.career-timeline {
    position:relative;
    margin-top:54px;
}
.timeline-entry {
    position:relative;
    display:grid;
    grid-template-columns:minmax(0, 1fr) 90px minmax(0, 1fr);
    min-height:176px;
    padding:0 0 28px;
}
.timeline-entry::before {
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:calc(50% - 2px);
    width:4px;
}
.era-high-school::before { background:linear-gradient(#174d9d 0 56%, #c69b28 56% 100%); }
.era-college::before { background:linear-gradient(#ba222c 0 76%, #fff 76% 82%, #ba222c 82% 100%); }
.era-career::before { background:linear-gradient(#1f7a43 0 76%, #fff 76% 82%, #1f7a43 82% 100%); }
.timeline-card {
    align-self:start;
    padding:24px;
    border:1px solid #171917;
    border-radius:10px;
    background:#fff;
    box-shadow:6px 6px 0 #e2e4df;
}
.timeline-entry:nth-child(odd) .timeline-card { grid-column:1; text-align:right; }
.timeline-entry:nth-child(even) .timeline-card { grid-column:3; }
.timeline-card h3 { margin:10px 0 10px; color:#111; font-size:1.3rem; }
.timeline-card p:last-child { margin:0; color:#343734; }
.timeline-year {
    margin:0;
    color:#111 !important;
    font-family:Consolas, 'Courier New', monospace;
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.07em;
}
.timeline-marker {
    position:relative;
    z-index:1;
    grid-column:2;
    align-self:start;
    justify-self:center;
    width:22px;
    height:22px;
    margin-top:26px;
    border:4px solid #111;
    border-radius:50%;
    background:#fff;
}
.era-high-school .timeline-marker { box-shadow:inset 0 0 0 4px #174d9d, 0 0 0 3px #c69b28; }
.era-college .timeline-marker { box-shadow:inset 0 0 0 4px #ba222c, 0 0 0 3px #fff; }
.era-career .timeline-marker { box-shadow:inset 0 0 0 4px #1f7a43, 0 0 0 3px #fff; }
.portfolio-projects { border-top:2px solid #111; background:#111; color:#fff; }
.portfolio-projects .eyebrow,
.portfolio-projects h2 { color:#fff; }
.portfolio-project-grid {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:16px;
    margin-top:44px;
}
.portfolio-project {
    min-height:280px;
    padding:28px;
    border:1px solid #fff;
    border-radius:10px;
    background:#171917;
}
.portfolio-project.featured-project { grid-row:span 2; }
.portfolio-project h3 { margin:28px 0 14px; color:#fff; font-size:clamp(1.5rem, 3vw, 2.25rem); }
.portfolio-project p,
.portfolio-project li { color:#e3e5de; }
.portfolio-project ul { padding-left:20px; }
.portfolio-project li + li { margin-top:8px; }
.project-note {
    margin-top:24px !important;
    padding-top:16px;
    border-top:1px solid #5e645c;
    font-family:Consolas, 'Courier New', monospace;
    font-size:.76rem;
}
.portfolio-skills { border-bottom:1px solid #111; }
.skills-grid {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:0;
    margin-top:42px;
    border-top:1px solid #111;
    border-left:1px solid #111;
}
.skills-grid article {
    min-height:158px;
    padding:24px;
    border-right:1px solid #111;
    border-bottom:1px solid #111;
}
.skills-grid h3 { margin:0 0 16px; color:#111; font-size:1.1rem; }
.skills-grid p { margin:0; }
.skills-grid .skills-coursework { grid-column:1 / -1; min-height:0; }
.portfolio-contact {
    max-width:760px;
    padding-bottom:clamp(88px, 13vw, 160px);
}
.portfolio-contact > p:not(.eyebrow) { margin:18px 0 28px; font-size:1.08rem; }
@media (prefers-reduced-motion:no-preference) {
    .timeline-card { transition:transform 180ms ease, box-shadow 180ms ease; }
    .timeline-card:hover { transform:translate(-3px, -3px); box-shadow:9px 9px 0 #d8dbd3; }
}
@media (max-width:760px) {
    .portfolio-hero,
    .portfolio-profile { grid-template-columns:1fr; gap:30px; }
    .portfolio-hero { min-height:auto; padding-top:72px; }
    .timeline-entry {
        grid-template-columns:38px minmax(0, 1fr);
        min-height:0;
        padding-bottom:28px;
    }
    .timeline-entry::before { left:17px; }
    .timeline-entry .timeline-card,
    .timeline-entry:nth-child(odd) .timeline-card,
    .timeline-entry:nth-child(even) .timeline-card { grid-column:2; text-align:left; }
    .timeline-marker { grid-column:1; width:20px; height:20px; margin-top:22px; }
    .portfolio-project-grid,
    .skills-grid { grid-template-columns:1fr; }
    .portfolio-project.featured-project { grid-row:auto; }
    .skills-grid .skills-coursework { grid-column:auto; }
}

/* Portfolio refinement: editorial hierarchy and a more legible career story. */
.portfolio-profile {
    position:relative;
    padding-top:clamp(94px, 13vw, 164px);
    padding-bottom:clamp(94px, 13vw, 164px);
}
.portfolio-profile::before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:72px;
    height:8px;
    background:#111;
}
.portfolio-profile h2 { max-width:520px; }
.career-roadmap {
    margin:0 calc(clamp(20px, 5vw, 72px) * -1);
    padding-right:clamp(20px, 5vw, 72px);
    padding-left:clamp(20px, 5vw, 72px);
    background:linear-gradient(90deg, #f5f5f1 0 50%, #eceee8 50% 100%);
    border-bottom:1px solid #111;
}
.career-roadmap .portfolio-section-heading {
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(220px, .45fr);
    column-gap:60px;
    align-items:end;
    max-width:100%;
}
.career-roadmap .portfolio-section-heading .eyebrow,
.career-roadmap .portfolio-section-heading h2 { grid-column:1; }
.career-roadmap .portfolio-section-heading > p:last-child {
    grid-column:2;
    grid-row:1 / span 2;
    align-self:end;
    margin:0;
    padding:18px 0 0 18px;
    border-left:2px solid #111;
    color:#343734;
}
.career-timeline {
    max-width:1180px;
    margin:72px auto 0;
    padding:24px 0 0;
    counter-reset:milestone;
}
.timeline-entry {
    min-height:210px;
    padding-bottom:40px;
    counter-increment:milestone;
}
.timeline-entry::before { width:6px; left:calc(50% - 3px); }
.timeline-card {
    position:relative;
    min-height:156px;
    padding:28px 32px 26px;
    border:1px solid #111;
    border-radius:14px;
    box-shadow:10px 10px 0 #d9dcd5;
}
.timeline-card::after {
    content:"0" counter(milestone);
    position:absolute;
    top:15px;
    right:18px;
    color:#aeb3aa;
    font-family:Consolas, 'Courier New', monospace;
    font-size:.68rem;
    font-weight:700;
    letter-spacing:.08em;
}
.timeline-entry:nth-child(odd) .timeline-card { border-radius:14px 14px 4px 14px; }
.timeline-entry:nth-child(even) .timeline-card { border-radius:14px 14px 14px 4px; }
.timeline-card h3 { max-width:390px; margin-top:14px; font-size:clamp(1.3rem, 2vw, 1.62rem); }
.timeline-card p:last-child { max-width:440px; line-height:1.58; }
.timeline-era-label {
    display:table;
    margin:0 0 13px;
    padding:5px 8px;
    border:1px solid currentColor;
    border-radius:999px;
    font-family:Consolas, 'Courier New', monospace;
    font-size:.58rem;
    font-weight:700;
    letter-spacing:.07em;
}
.timeline-entry:nth-child(odd) .timeline-era-label { margin-left:auto; }
.era-high-school .timeline-card { border-top:6px solid #174d9d; }
.era-high-school .timeline-era-label { color:#174d9d; background:#fff9e7; }
.era-college .timeline-card { border-top:6px solid #ba222c; }
.era-college .timeline-era-label { color:#9e1721; background:#fff; }
.era-career .timeline-card { border-top:6px solid #1f7a43; }
.era-career .timeline-era-label { color:#1f6a3d; background:#f4fff5; }
.timeline-marker {
    width:28px;
    height:28px;
    margin-top:32px;
    border-width:5px;
    background:#f7f8f4;
}
.portfolio-projects { position:relative; overflow:hidden; }
.portfolio-projects::before {
    content:"PROJECTS";
    position:absolute;
    top:-18px;
    right:-10px;
    color:#202320;
    font-family:'Arial Black', Impact, sans-serif;
    font-size:clamp(5rem, 16vw, 16rem);
    letter-spacing:-.12em;
    line-height:1;
    pointer-events:none;
}
.portfolio-projects > * { position:relative; z-index:1; }
.portfolio-project-grid { gap:20px; }
.portfolio-project {
    min-height:300px;
    padding:32px;
    border-color:#737a70;
    border-radius:14px;
    background:linear-gradient(145deg, #202420, #141614 72%);
}
.portfolio-project.featured-project {
    background:linear-gradient(145deg, #30362d, #171a16 70%);
    border-color:#d6ddd0;
}
.portfolio-project .micro { color:#c4f4ac; }
.portfolio-project h3 { max-width:520px; }
.portfolio-project ul {
    display:grid;
    gap:10px;
    margin:26px 0 0;
    padding:0;
    list-style:none;
}
.portfolio-project li {
    position:relative;
    padding-left:17px;
}
.portfolio-project li::before {
    content:"";
    position:absolute;
    top:.56em;
    left:0;
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--signal);
}
.portfolio-skills { background:#fafaf7; }
.skills-grid { gap:12px; margin-top:48px; border:0; }
.skills-grid article {
    min-height:178px;
    padding:28px;
    border:1px solid #bfc3ba;
    border-radius:12px;
    background:#fff;
}
.skills-grid h3 {
    display:flex;
    align-items:center;
    gap:10px;
    font-family:Consolas, 'Courier New', monospace;
    font-size:.76rem;
    letter-spacing:.06em;
    text-transform:uppercase;
}
.skills-grid h3::before {
    content:"";
    width:10px;
    height:10px;
    border-radius:50%;
    background:#111;
}
.skills-grid .skills-coursework {
    min-height:126px;
    background:#f0f2ec;
}
.portfolio-contact {
    max-width:none;
    margin:0 calc(clamp(20px, 5vw, 72px) * -1);
    padding:clamp(78px, 12vw, 150px) clamp(20px, 5vw, 72px);
    color:#fff;
    background:#111;
}
.portfolio-contact .eyebrow,
.portfolio-contact h2,
.portfolio-contact > p:not(.eyebrow) { color:#fff; }
.portfolio-contact h2 { max-width:760px; }
.portfolio-contact > p:not(.eyebrow) { color:#d6dbd1; }
.portfolio-contact .btn { background:var(--signal); color:#111; }
.portfolio-contact .btn:hover { background:#c2ff9f; }
@media (prefers-reduced-motion:no-preference) {
    .timeline-entry { animation:timeline-enter 400ms ease both; }
    .timeline-entry:nth-child(2) { animation-delay:40ms; }
    .timeline-entry:nth-child(3) { animation-delay:80ms; }
    .timeline-entry:nth-child(4) { animation-delay:120ms; }
    .timeline-entry:nth-child(5) { animation-delay:160ms; }
    .timeline-entry:nth-child(6) { animation-delay:200ms; }
    .timeline-entry:nth-child(7) { animation-delay:240ms; }
    .timeline-entry:nth-child(8) { animation-delay:280ms; }
    @keyframes timeline-enter { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
}
@media (max-width:760px) {
    .career-roadmap .portfolio-section-heading { display:block; }
    .career-roadmap .portfolio-section-heading > p:last-child { margin-top:24px; }
    .career-timeline { margin-top:46px; }
    .timeline-entry { min-height:0; padding-bottom:32px; }
    .timeline-entry::before { left:17px; width:5px; }
    .timeline-card { min-height:0; padding:24px 23px; box-shadow:6px 6px 0 #d9dcd5; }
    .timeline-entry:nth-child(odd) .timeline-era-label { margin-left:0; }
    .timeline-marker { width:24px; height:24px; margin-top:27px; }
    .portfolio-project { min-height:0; padding:26px; }
    .portfolio-projects::before { top:2px; font-size:5rem; }
}