/* ==========================================================================
   Systema — Retro Windows 95/3.1 design system
   Frontend-only reskin. No layout logic, routes or scripts were changed.
   ========================================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Let supporting browsers animate the swap between pages natively —
   ignored elsewhere, the JS-driven .win-window open/close still runs there. */
@view-transition {
    navigation: auto;
}

html {
    background: var(--win-desktop) url("assets/images/windowsBakgrunn.jpg") no-repeat center center fixed;
    background-size: cover;
    scroll-behavior: smooth;
}

:root {
    /* Core palette */
    --win-face: #c0c0c0;
    --win-face-dark: #a9a9a9;
    --win-highlight: #ffffff;
    --win-light: #dfdfdf;
    --win-shadow: #808080;
    --win-shadow-dark: #000000;
    --win-desktop: #008080;
    --win-titlebar-start: #000080;
    --win-titlebar-end: #1084d0;
    --win-titlebar-text: #ffffff;
    --win-titlebar-inactive: #7f7f7f;
    --win-selection: #000080;
    --win-selection-text: #ffffff;
    --win-window-bg: #c0c0c0;
    --win-workspace: #ffffff;
    --win-ink: #000000;
    --win-ink-muted: #3a3a3a;
    --win-link: #0000ee;
    --win-accent: #008080;
    --win-accent-strong: #ff0000;
    --win-ok: #008000;

    /* Typography */
    --font-ui: Tahoma, "MS Sans Serif", "Segoe UI", Geneva, Verdana, sans-serif;
    --font-mono: "Consolas", "Courier New", "Lucida Console", monospace;
    --font-name: "IBM Plex Sans", var(--font-ui);

    /* Metrics */
    --bevel-1: 1px;
    --bevel-2: 2px;
    --radius: 0px;

    /* Layering scale */
    --z-nav: 100;
    --z-modal: 300;
    --z-skip: 400;
    --z-boot: 500;

    /* Motion */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --dur-fast: 140ms;

    /* UI scale — the desktop is scaled to fit the screen. Width and height
       each pick a scale; the smaller one wins, so pages fit without scrolling. */
    --zoom-w: 1;
    --zoom-h: 1;
    --ui-zoom: min(var(--zoom-w), var(--zoom-h));
}

/* Tallest page (Om oss) needs ~675px at scale 1, so each height step is
   ~675px × scale. Never below 1, so text stays readable — very short
   screens scroll a little instead. */
@media (min-width: 1600px) { :root { --zoom-w: 1.2; } }
@media (min-width: 1900px) { :root { --zoom-w: 1.35; } }
@media (min-width: 2300px) { :root { --zoom-w: 1.6; } }
@media (min-height: 810px) { :root { --zoom-h: 1.2; } }
@media (min-height: 912px) { :root { --zoom-h: 1.35; } }
@media (min-height: 1080px) { :root { --zoom-h: 1.6; } }

main,
.desktop-nav {
    zoom: var(--ui-zoom);
}

body {
    font-family: var(--font-ui);
    line-height: 1.5;
    color: var(--win-ink);
    font-size: 14px;
    padding-left: calc(110px * var(--ui-zoom));
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: var(--win-selection);
    color: var(--win-selection-text);
}

img {
    -ms-interpolation-mode: nearest-neighbor;
}

.container {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ==========================================================================
   Base typography
   ========================================================================== */

h1, h2, h3, h4, h5 {
    font-family: var(--font-ui);
    font-weight: bold;
    color: var(--win-ink);
    line-height: 1.25;
    text-wrap: balance;
}

h2 {
    font-size: 1.25rem;
    margin-bottom: 14px;
}

h3 {
    font-size: 1.05rem;
    margin-bottom: 10px;
}

p {
    margin-bottom: 12px;
    font-size: 0.92rem;
    color: var(--win-ink-muted);
    text-wrap: pretty;
}

a {
    color: var(--win-link);
}

main {
    padding: 16px 0;
}

main:focus {
    outline: none;
}

/* Skip link — hidden until focused with the keyboard */
.skip-link {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: var(--z-skip);
    padding: 6px 12px;
    background: var(--win-face);
    color: var(--win-ink);
    font-size: 0.82rem;
    font-weight: bold;
    text-decoration: none;
    box-shadow:
        inset 1px 1px 0 var(--win-highlight),
        inset -1px -1px 0 var(--win-shadow-dark),
        inset 2px 2px 0 var(--win-light),
        inset -2px -2px 0 var(--win-shadow);
    transform: translateY(-200%);
}

.skip-link:focus {
    transform: none;
}

/* ==========================================================================
   Desktop chrome — fixed "desktop icons" navigation shared across pages
   ========================================================================== */

.desktop-nav {
    position: fixed;
    top: 18px;
    left: 18px;
    z-index: var(--z-nav);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.desktop-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 84px;
    padding: 4px 2px;
    text-decoration: none;
    text-align: center;
}

.desktop-icon__img {
    width: 38px;
    height: 38px;
    image-rendering: pixelated;
    filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.6));
}

.desktop-icon__label {
    margin-top: 4px;
    display: inline-block;
    color: #fff;
    background: rgba(0,0,0,0.55);
    font-size: 0.78rem;
    line-height: 1.25;
    padding: 1px 4px;
}

.desktop-icon:hover .desktop-icon__label,
.desktop-icon:focus-visible .desktop-icon__label {
    background: var(--win-selection);
    color: var(--win-selection-text);
}

.desktop-icon:focus-visible {
    outline: 1px dotted #fff;
    outline-offset: 2px;
}

.desktop-icon.active .desktop-icon__label {
    background: var(--win-selection);
    color: var(--win-selection-text);
    font-weight: bold;
}

/* ==========================================================================
   Window component — titlebar / menubar / toolbar / body / statusbar
   ========================================================================== */

.win-window {
    background: var(--win-face);
    border: 1px solid var(--win-shadow-dark);
    box-shadow:
        inset 1px 1px 0 var(--win-light),
        inset -1px -1px 0 var(--win-shadow),
        3px 3px 0 rgba(0,0,0,0.25);
    margin: 0;
    min-width: 0;
    transform-origin: center top;
}

.win-window--enter {
    animation: win-window-open 260ms cubic-bezier(0.17, 0.89, 0.32, 1.28);
}

.win-window--leave {
    animation: win-window-close 160ms cubic-bezier(0.55, 0, 0.85, 0.4) forwards;
}

@keyframes win-window-open {
    from { opacity: 0; transform: scale(0.55) translateY(-18px); }
    60% { opacity: 1; }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes win-window-close {
    from { opacity: 1; transform: scale(1) translateY(0); }
    to { opacity: 0; transform: scale(0.45) translateY(24px); }
}


.win-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 4px 4px 8px;
    background: linear-gradient(90deg, var(--win-titlebar-start), var(--win-titlebar-end));
    color: var(--win-titlebar-text);
}

.win-titlebar-text {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: bold;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.win-titlebar-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-left: 2px;
    padding: 1px;
    object-fit: contain;
    background: #fff;
    border-radius: 2px;
}

.win-titlebar-controls {
    display: flex;
    gap: 3px;
    flex-shrink: 0;
}

.win-titlebar-controls span,
.win-titlebar-controls .win-close {
    width: 17px;
    height: 15px;
    display: grid;
    place-items: center;
    background: var(--win-face);
    color: #000;
    font-size: 0.65rem;
    font-weight: bold;
    line-height: 1;
    box-shadow:
        inset 1px 1px 0 var(--win-highlight),
        inset -1px -1px 0 var(--win-shadow-dark);
}

.win-titlebar-controls .win-close {
    text-decoration: none;
    cursor: pointer;
}

.win-titlebar-controls .win-close:active {
    box-shadow:
        inset -1px -1px 0 var(--win-highlight),
        inset 1px 1px 0 var(--win-shadow-dark);
}

.win-titlebar-controls .win-close:focus-visible {
    outline: 1px dotted #fff;
    outline-offset: 1px;
}

.win-menubar {
    display: flex;
    gap: 2px;
    background: var(--win-face);
    padding: 3px 6px;
    border-bottom: 1px solid var(--win-shadow);
    box-shadow: inset 0 1px 0 var(--win-highlight);
    font-size: 0.78rem;
    flex-wrap: wrap;
}

.win-menubar span {
    padding: 2px 8px;
}

.win-menubar span:first-letter {
    text-decoration: underline;
}

/* "Neste steg" link at the bottom of a window */
.next-step {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
}

.win-addressbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    background: var(--win-face);
    border-bottom: 1px solid var(--win-shadow);
    box-shadow: inset 0 1px 0 var(--win-highlight);
}

.win-addressbar-icon {
    width: 14px;
    height: 11px;
    flex-shrink: 0;
    background: #ffd050;
    border: 1px solid #6b4a00;
    position: relative;
}

.win-addressbar-icon::before {
    content: "";
    position: absolute;
    top: -3px;
    left: 0;
    width: 6px;
    height: 3px;
    background: #ffd050;
    border: 1px solid #6b4a00;
    border-bottom: none;
}

.win-addressbar-path {
    flex: 1;
    background: var(--win-workspace);
    padding: 3px 8px;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    color: var(--win-ink);
    box-shadow:
        inset -1px -1px 0 var(--win-highlight),
        inset 1px 1px 0 var(--win-shadow-dark),
        inset -2px -2px 0 var(--win-light),
        inset 2px 2px 0 var(--win-shadow);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.win-body {
    padding: 16px;
    background: var(--win-face);
}

.win-statusbar {
    display: flex;
    gap: 8px;
    padding: 4px 8px;
    background: var(--win-face);
    border-top: 1px solid var(--win-shadow);
}

.win-statusbar > div {
    flex: 1;
    padding: 3px 10px;
    font-size: 0.74rem;
    color: var(--win-ink-muted);
    box-shadow:
        inset -1px -1px 0 var(--win-highlight),
        inset 1px 1px 0 var(--win-shadow);
}

.win-statusbar > div:last-child {
    flex: 0 0 auto;
}

/* Generic raised button used for links / CTAs, replaces old .home-btn look */
.home-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 18px;
    text-decoration: none;
    font-weight: normal;
    font-size: 0.82rem;
    font-family: var(--font-ui);
    color: var(--win-ink);
    background: var(--win-face);
    box-shadow:
        inset 1px 1px 0 var(--win-highlight),
        inset -1px -1px 0 var(--win-shadow-dark),
        inset 2px 2px 0 var(--win-light),
        inset -2px -2px 0 var(--win-shadow);
}

.home-btn {
    transition: background-color var(--dur-fast) var(--ease-out);
}

.home-btn:hover {
    background: var(--win-light);
}

.home-btn:active {
    box-shadow:
        inset -1px -1px 0 var(--win-highlight),
        inset 1px 1px 0 var(--win-shadow-dark),
        inset -2px -2px 0 var(--win-light),
        inset 2px 2px 0 var(--win-shadow);
    padding-top: 1px;
    padding-left: 19px;
}

/* Default button gets the classic 1px black "default action" frame */
.home-btn-primary {
    font-weight: bold;
    outline: 1px solid var(--win-shadow-dark);
    outline-offset: 0;
}

.home-btn-primary:focus-visible {
    outline: 1px solid var(--win-shadow-dark);
    box-shadow:
        inset 1px 1px 0 var(--win-highlight),
        inset -1px -1px 0 var(--win-shadow-dark),
        inset 2px 2px 0 var(--win-light),
        inset -2px -2px 0 var(--win-shadow),
        inset 0 0 0 4px var(--win-face),
        inset 0 0 0 5px var(--win-shadow-dark);
}

.home-btn-secondary {
    color: var(--win-ink);
}

/* ==========================================================================
   Home page
   ========================================================================== */

.home-page main {
    padding-top: 18px;
}

.hero {
    padding: 0 0 24px;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 18px;
    align-items: stretch;
    padding: 4px;
}

.intro-video {
    align-self: center;
    background: #000;
    padding: 2px;
    box-shadow:
        inset -1px -1px 0 var(--win-highlight),
        inset 1px 1px 0 var(--win-shadow-dark),
        inset -2px -2px 0 var(--win-light),
        inset 2px 2px 0 var(--win-shadow);
}

.intro-video video {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: block;
    background: #000;
}

.photo-frame {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 380px;
    background: var(--win-workspace);
    box-shadow:
        inset -1px -1px 0 var(--win-highlight),
        inset 1px 1px 0 var(--win-shadow-dark),
        inset -2px -2px 0 var(--win-light),
        inset 2px 2px 0 var(--win-shadow);
}

.photo-frame-label {
    color: var(--win-ink-muted);
    font-size: 0.8rem;
    font-style: italic;
}

/* Classic "image not available" glyph — sun + mountains, sketched with borders */
.photo-frame-icon {
    position: relative;
    width: 72px;
    height: 56px;
    margin-bottom: 14px;
    border: 2px solid var(--win-shadow);
}

.photo-frame-icon::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 10px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--win-shadow);
}

.photo-frame-icon::after {
    content: "";
    position: absolute;
    left: 6px;
    bottom: -1px;
    width: 0;
    height: 0;
    border-left: 22px solid transparent;
    border-right: 14px solid transparent;
    border-bottom: 20px solid var(--win-face-dark);
}

.hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}

.hero-logo {
    width: 110px;
    height: auto;
    margin-bottom: 6px;
}

.hero h1 {
    max-width: 560px;
    margin: 4px 0 6px;
    font-size: clamp(1.9rem, 4.2vw, 2.9rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--win-ink);
}

.hero h1 span {
    color: var(--win-titlebar-start);
}

.hero-lead {
    max-width: 62ch;
    color: var(--win-ink-muted);
    font-size: 0.92rem;
    line-height: 1.6;
    margin-bottom: 10px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}

/* Home page: centre the window vertically on the desktop. vh inside the
   zoomed main is multiplied by the zoom, so divide it back out. */
@media (min-width: 641px) {
    .home-page main {
        min-height: calc(100vh / var(--ui-zoom));
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .home-page .container { width: 100%; }
}

@media (max-width: 900px) {
    .hero-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .home-page .container { padding-left: 10px; padding-right: 10px; }
    body { padding-left: 0; }
    .desktop-nav {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        padding: 10px 8px 6px;
    }
    .desktop-icon { width: 72px; }
    .desktop-icon__img { width: 32px; height: 32px; }
    .desktop-icon__label { font-size: 0.7rem; }
}

/* ==========================================================================
   Team / om-oss page
   ========================================================================== */

.team-section {
    padding-top: 4px;
}

/* Om oss: gruppeteksten til venstre og medlemmene til høyre, så alt får plass uten scrolling */
.about-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.about-group {
    padding: 8px 18px 12px;
}

/* Gruppebilde som bred stripe øverst i "Om gruppen", med plassholder til bildet finnes */
.about-photo {
    position: relative;
    margin: 4px 0 8px;
    aspect-ratio: 3.2 / 1;
    overflow: hidden;
    border: 1px solid var(--win-shadow-dark);
    box-shadow: inset 0 0 0 1px var(--win-highlight);
    background: var(--win-face-dark);
}

.about-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
}

.about-photo__empty {
    display: none;
}

.about-photo.is-empty img {
    display: none;
}

.about-photo.is-empty .about-photo__empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--win-ink-muted);
    font-size: 0.82rem;
}

.about-group h2 {
    margin: 7px 0 1px;
    font-size: 0.92rem;
    color: var(--win-titlebar-start);
}

/* Grå bakgrunn, men svart tekst, litt større skrift og luft mellom linjene for lesbarhet */
.about-group p {
    margin: 0;
    max-width: 75ch;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--win-ink);
}

.about-group .about-lead {
    font-size: 0.92rem;
    color: var(--win-ink);
}

.about-team {
    padding: 12px;
}

/* Litt mindre luft i Om oss-vinduet, så siden får plass uten scrolling */
.team-page .win-body {
    padding: 12px;
}

/* Kompakte kort i Om oss-oppsettet */
.about-team .team-grid {
    gap: 10px;
}

.about-team .team-card {
    padding: 10px 8px 12px;
}

.about-team .profile-image {
    max-width: 110px;
}

.about-team .team-name {
    font-size: 0.86rem;
    margin: 8px 0 6px;
}

.about-team .read-more-btn {
    font-size: 0.76rem;
    padding: 3px 10px;
}

@media (max-width: 900px) {
    .about-layout { grid-template-columns: 1fr; }
}

/* Team grid presented as explorer icon view, 3 cards over 2 */
.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    width: 100%;
    margin: 0;
    padding: 0;
}

.team-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 16px 22px;
    background: var(--win-face);
    box-shadow:
        inset 1px 1px 0 var(--win-highlight),
        inset -1px -1px 0 var(--win-shadow-dark),
        inset 2px 2px 0 var(--win-light),
        inset -2px -2px 0 var(--win-shadow);
    overflow: visible;
    cursor: pointer;
}

.team-card:hover {
    background: var(--win-selection);
    color: var(--win-selection-text);
}

.team-card:hover .team-name,
.team-card:hover .team-role {
    color: var(--win-selection-text);
}

.team-card:active {
    box-shadow:
        inset -1px -1px 0 var(--win-highlight),
        inset 1px 1px 0 var(--win-shadow-dark),
        inset -2px -2px 0 var(--win-light),
        inset 2px 2px 0 var(--win-shadow);
}

.profile-image {
    display: block;
    width: 100%;
    max-width: 220px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 1px solid var(--win-shadow-dark);
    box-shadow: inset 0 0 0 1px var(--win-highlight);
    background: var(--win-workspace);
}

.profile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    image-rendering: auto;
}

.team-name {
    font-family: var(--font-name);
    font-size: 1.1rem;
    line-height: 1.25;
    font-weight: 600;
    margin: 14px 0 6px;
    color: var(--win-ink);
    letter-spacing: -0.01em;
}

.team-role {
    display: none;
}

.read-more-btn {
    appearance: none;
    background: var(--win-face);
    border: none;
    color: var(--win-ink);
    font-size: 0.82rem;
    font-weight: normal;
    padding: 5px 14px;
    margin: auto 0 0;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    box-shadow:
        inset 1px 1px 0 var(--win-highlight),
        inset -1px -1px 0 var(--win-shadow-dark);
}

/* Profile modal restyled as a Windows 95 properties dialog */
.profile-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
}

.profile-modal.is-open {
    display: flex;
}

.profile-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 320ms ease;
}

.profile-modal.is-visible .profile-modal__backdrop {
    opacity: 1;
}

.profile-modal__dialog {
    position: relative;
    width: min(94vw, 760px);
    max-height: calc(88vh / var(--ui-zoom));
    overflow-y: auto;
    background: var(--win-face);
    border: 1px solid var(--win-shadow-dark);
    box-shadow:
        inset 1px 1px 0 var(--win-light),
        inset -1px -1px 0 var(--win-shadow),
        4px 4px 0 rgba(0,0,0,0.3);
    padding: 0 0 12px;
    z-index: 1;
    transform: scale(0.6) translateY(24px);
    opacity: 0;
    transition: transform 340ms cubic-bezier(0.55, 0, 0.85, 0.4), opacity 260ms ease;
}

.profile-modal.is-visible .profile-modal__dialog {
    transform: scale(1) translateY(0);
    opacity: 1;
    transition: transform 420ms cubic-bezier(0.17, 0.89, 0.32, 1.28), opacity 320ms ease;
}

.profile-modal__dialog::before {
    content: "Teammedlem";
    display: block;
    padding: 4px 6px 4px 8px;
    background: linear-gradient(90deg, var(--win-titlebar-start), var(--win-titlebar-end));
    color: #fff;
    font-size: 0.8rem;
    font-weight: bold;
    margin-bottom: 14px;
}

.profile-modal__close {
    position: absolute;
    top: 4px;
    right: 6px;
    border: none;
    background: var(--win-face);
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    color: var(--win-ink);
    width: 18px;
    height: 16px;
    box-shadow:
        inset 1px 1px 0 var(--win-highlight),
        inset -1px -1px 0 var(--win-shadow-dark);
}

.profile-modal__content {
    display: grid;
    grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    padding: 0 18px;
}

.profile-modal__image-wrap {
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--win-workspace);
    border: 1px solid var(--win-shadow-dark);
    box-shadow: inset 0 0 0 1px var(--win-highlight);
}

.profile-modal__image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-modal__body {
    text-align: left;
}

.profile-modal__body h4 {
    font-family: var(--font-name);
    font-weight: 600;
    letter-spacing: -0.01em;
    font-size: 1.25rem;
    margin: 0 0 4px;
    color: var(--win-ink);
}

.profile-modal__role {
    font-weight: 400;
    color: var(--win-ink-muted);
}

.profile-modal__bio {
    margin: 0 0 14px;
    color: var(--win-ink);
    line-height: 1.6;
    font-size: 0.85rem;
    background: var(--win-workspace);
    padding: 8px 10px;
    box-shadow:
        inset -1px -1px 0 var(--win-highlight),
        inset 1px 1px 0 var(--win-shadow);
}

/* Tech stack chips under the bio */
.profile-modal__stack-title {
    margin: 0 0 6px;
    font-size: 0.85rem;
}

.profile-modal__stack .tag-list {
    margin-bottom: 14px;
}

.profile-modal__body h5 {
    margin: 12px 0 6px;
    font-size: 0.85rem;
    color: var(--win-ink);
}

.profile-modal__body p {
    margin: 0 0 6px;
    color: var(--win-ink-muted);
}

.profile-modal__socials {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.profile-modal__socials .social-btn {
    width: 34px;
    height: 34px;
}

.social-btn {
    width: 34px;
    height: 34px;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    position: relative;
    background: var(--win-face);
    box-shadow:
        inset 1px 1px 0 var(--win-highlight),
        inset -1px -1px 0 var(--win-shadow-dark),
        inset 2px 2px 0 var(--win-light),
        inset -2px -2px 0 var(--win-shadow);
}

.social-btn:hover {
    background: var(--win-light);
}

.social-btn:active {
    box-shadow:
        inset -1px -1px 0 var(--win-highlight),
        inset 1px 1px 0 var(--win-shadow-dark);
}

.social-btn svg {
    width: 55%;
    height: 55%;
    fill: var(--win-ink);
}

.social-btn--linkedin svg,
.social-btn--github svg {
    fill: var(--win-ink);
}

@media (max-width: 700px) {
    .profile-modal__content {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .team-grid { grid-template-columns: repeat(2, 1fr); }
    .team-name { font-size: 0.9rem; }
}

/* ==========================================================================
   Tidligere prosjekt page
   ========================================================================== */

.projects-list {
    padding: 4px 0 0 !important;
}

/* Project list — Explorer "Details" view: one row per project, scales to many */
.project-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-bottom: 10px;
}

.project-toolbar__hint {
    margin: 0;
    color: var(--win-ink-muted);
    font-size: 0.76rem;
}

.project-list {
    background: var(--win-workspace);
    box-shadow:
        inset -1px -1px 0 var(--win-highlight),
        inset 1px 1px 0 var(--win-shadow-dark),
        inset -2px -2px 0 var(--win-light),
        inset 2px 2px 0 var(--win-shadow);
    padding: 2px;
}

.project-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}

.project-table th {
    position: sticky;
    top: 0;
    /* Over the positioned avatars (z-index 1 on hover) when rows scroll under */
    z-index: 2;
    padding: 4px 12px;
    background: var(--win-face);
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    box-shadow:
        inset 1px 1px 0 var(--win-highlight),
        inset -1px -1px 0 var(--win-shadow-dark),
        inset -2px -2px 0 var(--win-shadow);
}

.project-table td {
    padding: 14px 12px;
    vertical-align: middle;
    border-bottom: 1px dotted var(--win-face-dark);
}

.project-row {
    cursor: pointer;
}

.project-row:hover td {
    background: #e8eef8;
}

/* Selected row in classic navy, with the dotted focus rectangle */
.project-row:focus-within td {
    background: var(--win-selection);
    color: var(--win-selection-text);
}

.project-row:focus-within .project-row__summary,
.project-row:focus-within .project-row__period {
    color: var(--win-selection-text);
}

.project-row__name {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.project-row__name > div {
    min-width: 0;
}

/* Name column takes the free width; the others hug their content */
.project-table th:first-child,
.project-row td:first-child {
    width: 100%;
    max-width: 0;
}

.project-row__name img {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    image-rendering: pixelated;
}

.project-row__open {
    padding: 0;
    background: none;
    border: none;
    color: inherit;
    font-family: var(--font-ui);
    font-size: 0.95rem;
    font-weight: bold;
    text-align: left;
    cursor: pointer;
}

.project-row__open:focus-visible {
    outline: 1px dotted currentColor;
    outline-offset: 2px;
}

/* Raised label marking internship (praksis) projects */
.project-row__chip {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 6px;
    vertical-align: 2px;
    background: var(--win-ok);
    color: #ffffff;
    border: 1px solid;
    border-color: #4fbf4f var(--win-shadow-dark) var(--win-shadow-dark) #4fbf4f;
    font-family: var(--font-ui);
    font-size: 0.68rem;
    font-weight: bold;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.project-row__summary {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: var(--win-ink-muted);
    font-size: 0.78rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.project-row__period {
    color: var(--win-ink-muted);
    white-space: nowrap;
}

/* Narrow screens: each row becomes a stacked block */
@media (max-width: 760px) {
    .project-table thead { display: none; }
    .project-table, .project-table tbody, .project-table tr, .project-table td { display: block; }
    .project-table td { padding: 4px 10px; border: none; }
    .project-row { padding: 8px 0; border-bottom: 1px dotted var(--win-face-dark); }
    .project-row:focus-within { background: var(--win-selection); }
    .project-row td:first-child { max-width: none; width: auto; }
    .project-row__name { align-items: flex-start; }
    .project-row__summary {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        white-space: normal;
    }
    .project-table td:nth-child(2) { display: inline-block; vertical-align: middle; padding-top: 6px; }
    .project-table td.project-row__period { display: inline-block; padding-top: 6px; font-size: 0.76rem; }
}

/* Technology tags as small raised keys */
.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.tag {
    padding: 2px 8px;
    background: var(--win-face);
    color: var(--win-ink);
    font-size: 0.72rem;
    line-height: 1.5;
    white-space: nowrap;
    box-shadow:
        inset 1px 1px 0 var(--win-highlight),
        inset -1px -1px 0 var(--win-shadow);
}

/* Overlapping framed portraits */
.avatar-stack {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.avatar:first-child {
    margin-left: 0;
}

.avatar {
    position: relative;
    width: 32px;
    height: 32px;
    margin-left: -10px;
    background: var(--win-workspace);
    border: 1px solid var(--win-shadow-dark);
    box-shadow: inset 0 0 0 1px var(--win-highlight);
    transition: transform var(--dur-fast) var(--ease-out);
}

.avatar img {
    width: 100%;
    height: 100%;
    padding: 1px;
    object-fit: cover;
    display: block;
}

.avatar:hover {
    z-index: 1;
    transform: translateY(-3px);
}

/* Classic yellow tooltip with the first name */
.avatar::after {
    content: attr(data-name);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    padding: 1px 5px;
    background: #ffffe1;
    color: var(--win-ink);
    border: 1px solid var(--win-shadow-dark);
    font-size: 0.68rem;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-50%);
    transition: opacity var(--dur-fast) var(--ease-out);
}

.avatar:hover::after {
    opacity: 1;
}

/* Project popover, styled like the other Win95 property dialogs */
.project-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
}

.project-modal.is-open {
    display: flex;
}

.project-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 320ms ease;
}

.project-modal.is-visible .project-modal__backdrop {
    opacity: 1;
}

.project-modal__dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(94vw, 940px);
    max-height: calc(92vh / var(--ui-zoom));
    padding: 3px;
    background: var(--win-face);
    border: 1px solid var(--win-shadow-dark);
    box-shadow:
        inset 1px 1px 0 var(--win-light),
        inset -1px -1px 0 var(--win-shadow),
        4px 4px 0 rgba(0,0,0,0.3);
    z-index: 1;
    transform: scale(0.6) translateY(24px);
    opacity: 0;
    transition: transform 340ms cubic-bezier(0.55, 0, 0.85, 0.4), opacity 260ms ease;
}

.project-modal.is-visible .project-modal__dialog {
    transform: scale(1) translateY(0);
    opacity: 1;
    transition: transform 420ms cubic-bezier(0.17, 0.89, 0.32, 1.28), opacity 320ms ease;
}

/* Properties dialog: titlebar, tabs, tab panel and a right-aligned button row */
.project-modal__dialog .win-titlebar {
    flex-shrink: 0;
    padding: 3px 3px 3px 6px;
}

.project-modal__bar-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    image-rendering: pixelated;
}

.project-modal__close {
    flex-shrink: 0;
    width: 18px;
    height: 16px;
    padding: 0;
    border: none;
    background: var(--win-face);
    color: var(--win-ink);
    font-family: var(--font-ui);
    font-size: 0.85rem;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    box-shadow:
        inset 1px 1px 0 var(--win-highlight),
        inset -1px -1px 0 var(--win-shadow-dark),
        inset -2px -2px 0 var(--win-shadow);
}

.project-modal__close:active {
    box-shadow:
        inset -1px -1px 0 var(--win-highlight),
        inset 1px 1px 0 var(--win-shadow-dark),
        inset 2px 2px 0 var(--win-shadow);
}

.project-modal__panel {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    margin: 8px 8px 0;
    padding: 16px;
    background: var(--win-face);
    box-shadow:
        inset 1px 1px 0 var(--win-highlight),
        inset -1px -1px 0 var(--win-shadow-dark),
        inset 2px 2px 0 var(--win-light),
        inset -2px -2px 0 var(--win-shadow);
}

.project-modal__head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.project-modal__icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    image-rendering: pixelated;
}

.project-modal__head h4 {
    margin: 0;
    font-size: 1.35rem;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.project-modal__short {
    margin: 3px 0 0;
    font-size: 0.86rem;
}

/* Wide layout: media and description on the left, facts in a sidebar */
.project-modal__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 270px;
    gap: 20px;
    align-items: start;
}

.project-modal__heading {
    margin: 0 0 6px;
    font-size: 0.9rem;
}

.project-modal__side {
    display: grid;
    gap: 14px;
}

/* Win95 group box: etched frame with the legend sitting on the top edge */
.win-group {
    min-width: 0;
    margin: 0;
    padding: 8px 12px 12px;
    border: 1px solid var(--win-shadow);
    /* Outer highlight only — an inset line would run straight through the legend */
    box-shadow: 1px 1px 0 var(--win-highlight);
}

.win-group legend {
    margin-left: 6px;
    padding: 0 5px;
    font-size: 0.8rem;
    font-weight: bold;
    line-height: 1;
}

/* Etched horizontal rule, as used between groups in Win95 dialogs */
.win-separator {
    height: 2px;
    margin: 14px 0;
    border: none;
    border-top: 1px solid var(--win-shadow);
    border-bottom: 1px solid var(--win-highlight);
}

.project-modal__facts {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 12px;
    margin: 0;
    font-size: 0.82rem;
}

.project-modal__facts dt {
    color: var(--win-ink-muted);
}

.project-modal__facts dd {
    margin: 0;
    color: var(--win-ink);
}

.win-group .tag-list {
    margin: 0;
}

.project-modal__summary {
    margin: 0;
    color: var(--win-ink);
    font-size: 0.86rem;
    line-height: 1.65;
}

.project-modal__media {
    margin: 0 0 16px;
}

.project-modal__media[hidden] {
    display: none;
}

.project-modal__buttons {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    padding: 10px 8px 6px;
}

.project-modal__buttons .home-btn {
    min-width: 84px;
    min-height: 26px;
    padding: 0 12px;
}

.project-modal__buttons .home-btn[hidden] {
    display: none;
}

@media (max-width: 760px) {
    .project-modal__layout { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .project-modal__panel { padding: 12px; }
}

/* Media area: either a video iframe or an image carousel */
.project-modal__media .demo-frame {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #000;
    box-shadow:
        inset -1px -1px 0 var(--win-highlight),
        inset 1px 1px 0 var(--win-shadow-dark),
        inset -2px -2px 0 var(--win-light),
        inset 2px 2px 0 var(--win-shadow);
}

.project-modal__media .demo-frame iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}

.project-carousel {
    position: relative;
}

.project-carousel__viewport {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--win-workspace);
    box-shadow:
        inset -1px -1px 0 var(--win-highlight),
        inset 1px 1px 0 var(--win-shadow-dark),
        inset -2px -2px 0 var(--win-light),
        inset 2px 2px 0 var(--win-shadow);
}

.project-carousel__viewport img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.project-carousel__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
}

.project-carousel__btn {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    padding: 4px 10px;
    background: var(--win-face);
    border: none;
    cursor: pointer;
    box-shadow:
        inset 1px 1px 0 var(--win-highlight),
        inset -1px -1px 0 var(--win-shadow-dark);
}

.project-carousel__btn:hover {
    background: var(--win-light);
}

.project-carousel__btn:active {
    box-shadow:
        inset -1px -1px 0 var(--win-highlight),
        inset 1px 1px 0 var(--win-shadow-dark);
}

.project-carousel__count {
    color: var(--win-ink-muted);
    font-size: 0.72rem;
}

/* ==========================================================================
   Boot screen — Windows 95-style startup, shown once per browser session
   ========================================================================== */

.boot-screen {
    position: fixed;
    inset: 0;
    z-index: var(--z-boot);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 26px;
    background: #000;
    color: #fff;
}

.no-boot .boot-screen,
.boot-screen[hidden] {
    display: none;
}

.boot-screen.is-done {
    animation: boot-fade-out 300ms ease forwards;
    pointer-events: none;
}

@keyframes boot-fade-out {
    to { opacity: 0; }
}

.boot-logo {
    width: 96px;
    height: auto;
    opacity: 0;
    transform: translateY(-16px);
    animation: boot-flag-in 360ms ease forwards;
    animation-delay: 60ms;
}

@keyframes boot-flag-in {
    from { opacity: 0; transform: translateY(-16px); }
    to { opacity: 1; transform: translateY(0); }
}

.boot-title {
    font-family: var(--font-ui);
    font-size: 1.5rem;
    font-weight: bold;
    letter-spacing: 0.03em;
    opacity: 0;
    animation: boot-fade-in 260ms ease forwards;
    animation-delay: 350ms;
}

.boot-title span {
    color: #4d9fff;
}

.boot-bar {
    width: 220px;
    height: 14px;
    padding: 2px;
    background: #000;
    box-shadow:
        inset -1px -1px 0 var(--win-highlight),
        inset 1px 1px 0 var(--win-shadow-dark);
    overflow: hidden;
    opacity: 0;
    animation: boot-fade-in 260ms ease forwards;
    animation-delay: 450ms;
}

.boot-bar-fill {
    height: 100%;
    width: 0;
    background: repeating-linear-gradient(
        90deg,
        #0000a0 0 10px,
        #12129c 10px 12px
    );
    animation-name: boot-bar-fill;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes boot-bar-fill {
    to { width: 100%; }
}

@keyframes boot-fade-in {
    to { opacity: 1; }
}

.boot-status {
    font-family: var(--font-ui);
    font-size: 0.74rem;
    color: #b8b8b8;
    opacity: 0;
    animation: boot-fade-in 260ms ease forwards;
    animation-delay: 450ms;
}

@media (prefers-reduced-motion: reduce) {
    .boot-screen { display: none; }
}

/* ==========================================================================
   Kontakt-ikon — står ut som en varsling (ulest melding + ballong)
   ========================================================================== */

.desktop-icon--contact {
    position: relative;
}

.desktop-icon--contact .desktop-icon__label {
    background: #ffff00;
    color: var(--win-ink);
    font-weight: bold;
}

.desktop-icon__badge-wrap {
    position: relative;
    display: inline-block;
    line-height: 0;
}

/* Rød "ulest"-teller på konvolutten */
.desktop-icon__badge {
    position: absolute;
    top: -6px;
    right: -10px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border: 1px solid #000;
    background: #ff0000;
    color: #fff;
    font-size: 0.7rem;
    font-weight: bold;
    line-height: 16px;
    text-align: center;
    animation: contact-badge-blink 1.2s steps(1) infinite;
}

@keyframes contact-badge-blink {
    50% { background: #800000; }
}

/* Gul Win95-tooltip under ikonet */
.desktop-icon__balloon {
    position: relative;
    margin-top: 10px;
    width: 100px;
    padding: 5px 6px;
    background: #ffffe1;
    border: 1px solid #000;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.35);
    color: var(--win-ink);
    font-size: 0.72rem;
    line-height: 1.3;
    text-align: left;
}

.desktop-icon__balloon::before,
.desktop-icon__balloon::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 0;
    height: 0;
    border: 7px solid transparent;
    border-top: 0;
    transform: translateX(-50%);
}

.desktop-icon__balloon::before {
    top: -8px;
    border-bottom: 8px solid #000;
}

.desktop-icon__balloon::after {
    top: -6px;
    border-bottom: 7px solid #ffffe1;
}

.desktop-icon--contact:hover .desktop-icon__balloon {
    text-decoration: underline;
}

/* Kontaktvinduet bruker .project-modal-dialogen, men skiller seg ut:
   rød tittellinje, gul flate, tykk ramme og et lite "rist" når det åpnes */
.contact-modal__dialog {
    width: min(94vw, 460px);
    border: 2px solid #000;
    box-shadow:
        inset 1px 1px 0 var(--win-light),
        inset -1px -1px 0 var(--win-shadow),
        8px 8px 0 rgba(0,0,0,0.45);
}

.contact-modal__dialog .win-titlebar {
    background: linear-gradient(90deg, #800000, #e04000);
}

.contact-modal .project-modal__backdrop {
    background: rgba(0, 0, 40, 0.6);
}

.contact-modal.is-visible .contact-modal__dialog {
    animation: contact-modal-nudge 420ms 380ms ease-in-out;
}

@keyframes contact-modal-nudge {
    20%, 60% { translate: -5px 0; }
    40%, 80% { translate: 5px 0; }
}

.contact-modal__content {
    margin: 3px 3px 0;
    padding: 16px 12px 8px;
    background: #ffffe1;
    border-bottom: 1px solid var(--win-shadow);
}

.contact-modal__body {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.contact-modal__icon {
    flex: 0 0 auto;
    image-rendering: pixelated;
}

.contact-modal__body h2 {
    margin: 0 0 4px;
    font-size: 1.15rem;
}

.contact-modal__body p {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--win-ink-muted);
}

.contact-modal__email,
.contact-modal__status {
    margin: 10px 0 0;
    padding-left: 70px;
}

.contact-modal__email {
    font-size: 0.86rem;
}

.contact-modal__email span {
    display: block;
    color: var(--win-ink-muted);
}

.contact-modal__email a {
    color: var(--win-link);
    font-size: 1.1rem;
    font-weight: bold;
    word-break: break-all;
}

.contact-modal__status {
    min-height: 1.3em;
    margin-top: 4px;
    font-size: 0.8rem;
    color: var(--win-ok);
}

.contact-modal .project-modal__buttons button.home-btn {
    border: 0;
    cursor: pointer;
}

@media (max-width: 640px) {
    .desktop-icon__balloon { display: none; }
    .contact-modal__email, .contact-modal__status { padding-left: 0; }
}

/* ==========================================================================
   Focus states & scrollbars
   ========================================================================== */

a:focus-visible, button:focus-visible {
    outline: 2px dotted #000000;
    outline-offset: 2px;
}

/* Highlight the whole card while its button has keyboard focus */
.team-card:has(.read-more-btn:focus-visible) {
    background: var(--win-selection);
    color: var(--win-selection-text);
}

.team-card:has(.read-more-btn:focus-visible) .team-name {
    color: var(--win-selection-text);
}

::-webkit-scrollbar {
    width: 16px;
    height: 16px;
}

::-webkit-scrollbar-track {
    background: var(--win-face);
    box-shadow:
        inset -1px -1px 0 var(--win-highlight),
        inset 1px 1px 0 var(--win-shadow);
}

::-webkit-scrollbar-thumb {
    background: var(--win-face);
    box-shadow:
        inset 1px 1px 0 var(--win-highlight),
        inset -1px -1px 0 var(--win-shadow-dark);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}