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

html {
    height: 100%;
    scrollbar-width: none;
}

::-webkit-scrollbar {
    display: none;
}

/* ============================================================
   DESIGNSYSTEM — ÉN kilde for typografi og farge. Styl ALLTID mot disse.
   Cormorant Garamond laster KUN vekt 300/400/500. Bruk ALDRI 600/700/bold
   — da fabrikkerer nettleseren en stygg faux-bold. Derfor baseline under.
   ============================================================ */
:root {
    --font:      'Cormorant Garamond', Georgia, serif;
    --w-light:   400;   /* brødtekst + store, lette overskrifter (300 ble for tynt på enkelte skjermer, 06-10-2026) */
    --w-regular: 500;   /* etiketter, aktiv nav, årstall — ett hakk over brødteksten */
    --w-medium:  500;   /* sterkeste tilgjengelige; brukes sjelden */
    --ink:       #1a1a1a;
    --muted:     #888;
    --faint:     #aaa;
    --hairline:  #eee;
    --paper:     #fff;

    /* Plakat-toner: én per story (data-tone på .story-poster, følger med til .story-text). Lyse nok for --ink. */
    --tone-sea:   #dbe6e6;   /* havdis */
    --tone-sand:  #ece2cf;   /* ørkensand */
    --tone-ochre: #ece6c9;   /* blek oker */
    --tone-rose:  #eedbd6;   /* støvet rosa */
    --tone-lilac: #e2ddea;   /* lavendelgrå */
    --tone-moss:  #d9e3d2;   /* mose */
    --tone-slate: #dde2ea;   /* kald skifer */
}

/* Ingen overskrift faux-bolder. Store overskrifter overstyrer til --w-light per klasse. */
h1, h2, h3, h4, h5, h6 { font-weight: var(--w-regular); }

body {
    font-family: var(--font);
    font-weight: var(--w-light);
    background: #fff;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    min-height: 100dvh;
}

/* --- NAV --- */
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

nav {
    max-width: 1240px;
    margin: 0 auto;
    padding: 1.2rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.logo-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-decoration: none;
}

.logo {
    font-size: 1.4rem;
    font-weight: var(--w-regular);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    color: #1a1a1a;
}

.story-progress {
    display: flex;
    gap: 4px;
    height: 2px;
}

.story-progress .dot {
    flex: 1;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 1px;
    transition: background 0.4s;
}

.story-progress .dot.active {
    background: rgba(0, 0, 0, 0.6);
}

.nav-links {
    display: flex;
    gap: 2.5rem;
    list-style: none;
}

.nav-links a {
    text-decoration: none;
    color: #1a1a1a;
    font-size: 1.05rem;
    font-weight: var(--w-light);
    letter-spacing: 0.03em;
    transition: opacity 0.2s;
}

.nav-links a:hover { opacity: 0.5; }
.nav-links a.active { font-weight: var(--w-regular); }

/* --- FULLSCREEN (index hero) — fast i hjørnet, utenfor nav-flyten --- */
.fullscreen-btn {
    position: fixed;
    bottom: 1.5rem;
    right: 2rem;
    z-index: 50;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ink);
    font-size: 1.2rem;
    padding: 0;
    opacity: 0.4;
    transition: opacity 0.2s;
    line-height: 1;
}

.fullscreen-btn:hover { opacity: 0.9; }

/* --- HAMBURGER --- */
.hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.hamburger span {
    display: block;
    width: 24px;
    height: 1px;
    background: #1a1a1a;
    margin: 6px 0;
    transition: all 0.3s;
}

.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* --- MAIN --- */
main {
    max-width: 1240px;
    margin: 0 auto;
    padding: 7rem 2rem 4rem;
}

/* --- GALLERY --- */
.gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
}

.gallery-item {
    cursor: pointer;
    overflow: hidden;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    appearance: none;
    -webkit-appearance: none;
}

.gallery-item:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

.gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.3s;
}

.gallery-item:hover img { opacity: 0.85; }

/* --- STORY-PLAKAT (plass nr. 2 i galleriet) ---
   Teksten står ÉN gang, i plakaten. Plakaten viser starten (resten tones ut);
   gallery.js kopierer hele teksten inn i .story-text-boksen ved klikk.
   Tom .story-poster-text → plakaten skjules (gallery.js). */
.story-poster {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 2.5rem;
    background: var(--hairline);
    overflow: hidden;
}

.story-poster[hidden] { display: none; }   /* display:flex over ville ellers overstyrt hidden */

.story-poster[data-tone="sea"],   .story-text[data-tone="sea"]   { background: var(--tone-sea); }
.story-poster[data-tone="sand"],  .story-text[data-tone="sand"]  { background: var(--tone-sand); }
.story-poster[data-tone="ochre"], .story-text[data-tone="ochre"] { background: var(--tone-ochre); }
.story-poster[data-tone="rose"],  .story-text[data-tone="rose"]  { background: var(--tone-rose); }
.story-poster[data-tone="lilac"], .story-text[data-tone="lilac"] { background: var(--tone-lilac); }
.story-poster[data-tone="moss"],  .story-text[data-tone="moss"]  { background: var(--tone-moss); }
.story-poster[data-tone="slate"], .story-text[data-tone="slate"] { background: var(--tone-slate); }

.story-poster h2 {
    font-size: 1.6rem;
    font-weight: var(--w-light);
    margin-bottom: 1.2rem;
}

.story-poster-text {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    font-size: 1.05rem;
    font-weight: var(--w-regular);   /* prosjekttekst: litt tyngre enn brødtekst, lettere å lese */
    line-height: 1.75;
    -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent);
    mask-image: linear-gradient(to bottom, #000 60%, transparent);
}

.story-poster-text p + p,
.story-text-box p + p { margin-top: 1em; }

/* Hele plakaten er klikkflate; knappen er det tastaturet treffer. */
.story-poster-open {
    margin-top: 1.2rem;
    align-self: flex-start;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.85rem;
    font-weight: var(--w-regular);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    cursor: pointer;
}

.story-poster-open::after {
    content: '';
    position: absolute;
    inset: 0;
}

.story-poster:hover .story-poster-open { color: var(--ink); }

.story-poster-open:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

/* Tekstvisning: helt hvit flate som dekker hele skjermen. Lukk-knappen ligger
   fast i hjørnet, så den alltid er synlig — også når teksten scroller. */
.story-text {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: var(--paper);
}

.story-text[hidden] { display: none; }

.story-text-box {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    padding: 4rem 3rem;
}

.story-text-box > * {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

.story-text-box h2 {
    font-size: 2.2rem;
    font-weight: var(--w-light);
    margin-bottom: 1.6rem;
}

.story-text-box p {
    font-size: 1.15rem;
    font-weight: var(--w-regular);
    line-height: 1.75;
}

.story-text-close {
    position: absolute;
    z-index: 1;
    top: 1rem;
    right: 1rem;
    width: 2.2rem;
    height: 2.2rem;
    border: 0;
    border-radius: 50%;
    background: inherit;
    color: var(--ink);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

.story-text-close:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

/* B&W thumbnails — full color in lightbox */
.gallery-bw .gallery-item img {
    filter: grayscale(100%);
    transition: filter 0.4s, opacity 0.3s;
}

.gallery-bw .gallery-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

/* --- LIGHTBOX --- */
.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0, 0, 0, 0.95);
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.lightbox.active { display: flex; }

.lightbox img {
    max-width: 94vw;
    max-height: 94vh;
    object-fit: contain;
}

.lightbox-top {
    position: fixed;
    top: 1.2rem;
    right: 1.5rem;
    z-index: 201;
    display: flex;
    gap: 1.2rem;
    align-items: center;
}

.lightbox-fullscreen {
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.3rem;
    cursor: pointer;
    background: none;
    border: none;
    transition: color 0.2s;
    font-family: inherit;
}

.lightbox-fullscreen:hover { color: #fff; }

.lightbox-close {
    color: #fff;
    font-size: 1.8rem;
    font-weight: var(--w-light);
    cursor: pointer;
    background: none;
    border: none;
    font-family: inherit;
}

.lightbox-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 2.5rem;
    font-weight: var(--w-light);
    cursor: pointer;
    z-index: 201;
    background: none;
    border: none;
    font-family: inherit;
    padding: 1rem;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.lightbox-nav:hover { opacity: 1; }
.lightbox-prev { left: 0.5rem; }
.lightbox-next { right: 0.5rem; }

/* Story-teksten som eget lysbilde (plass nr. 2), mellom pilene. */
.lightbox-counter {
    position: fixed;
    bottom: 1.2rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
    z-index: 201;
}

/* --- PORTFOLIO GRID --- */
.portfolio-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
}

.portfolio-card {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3/2;
    text-decoration: none;
    color: #fff;
}

.portfolio-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
    will-change: transform;
}

/* Den bitte lille rotasjonen hindrer Firefox i å runde zoomen til hele piksler
   (ellers går slutten av animasjonen i hakk). Bare på hover — i hvile er bildet knivskarpt. */
.portfolio-card:hover img { transform: scale(1.03) rotate(0.02deg); }

.portfolio-card .overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem;
    transition: background 0.3s;
}

.portfolio-card:hover .overlay { background: rgba(10, 0, 0, 0.4); }

.portfolio-card .overlay h2 {
    font-size: 1.4rem;
    font-weight: var(--w-light);
    letter-spacing: 0.03em;
}

.portfolio-card .overlay p {
    font-size: 0.9rem;
    opacity: 0.8;
}

/* --- ABOUT / CONTACT LAYOUT --- */
.about-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}

.about-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* About-portrett: står i ro mens CV-kolonnen scroller (desktop). top = main sin padding-top. */
.about-portrait {
    position: sticky;
    top: 7rem;
}

.about-portrait figcaption {
    margin-top: 0.6rem;
    font-size: 0.85rem;
    color: var(--muted);
}

.contact {
    max-width: 680px;
}

.contact h1 {
    font-size: 2.2rem;
    font-weight: var(--w-light);
    margin-bottom: 0.5rem;
}

.contact > p {
    font-size: 1.1rem;
    color: #888;
    margin-bottom: 3rem;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 3rem;
}

.contact-item h2 {
    font-size: 0.85rem;
    font-weight: var(--w-regular);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #888;
    margin-bottom: 0.4rem;
}

.contact-item a,
.contact-item p {
    font-size: 1.3rem;
    color: #1a1a1a;
    text-decoration: none;
    font-weight: var(--w-light);
}

.contact-item a:hover { opacity: 0.5; }

.contact-note {
    font-size: 0.95rem;
    color: #aaa;
}

/* --- ABOUT PAGE --- */
.about-content {
    max-width: 620px;
}

.about-content h1 {
    font-size: 2.2rem;
    font-weight: var(--w-light);
    margin-bottom: 1.6rem;
}

.about-bio {
    font-size: 1.15rem;
    font-weight: var(--w-light);
    line-height: 1.75;
    color: var(--ink);
    margin-bottom: 3.5rem;
}

.about-section {
    margin-bottom: 3rem;
}

.about-section h2 {
    font-size: 0.85rem;
    font-weight: var(--w-regular);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    margin-bottom: 1.2rem;
}

.about-list {
    list-style: none;
}

.about-row {
    display: flex;
    gap: 1.5rem;
    padding: 0.85rem 0;
    border-top: 1px solid var(--hairline);
}

.about-row:last-child {
    border-bottom: 1px solid var(--hairline);
}

.about-row .about-year {
    flex: 0 0 3.5rem;
    color: var(--muted);
    font-size: 1rem;
    font-weight: var(--w-regular);
}

.about-row .about-desc {
    font-size: 1.05rem;
    font-weight: var(--w-light);
    color: var(--ink);
}

.about-desc .about-source {
    display: block;
    font-size: 0.85rem;
    font-weight: var(--w-regular);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
}

.about-desc a {
    color: var(--ink);
    text-decoration: none;
}

.about-desc a:hover { opacity: 0.5; }

/* --- FOOTER --- */
footer {
    max-width: 1240px;
    margin: 0 auto;
    padding: 3rem 2rem;
    text-align: center;
    font-size: 0.85rem;
    color: #aaa;
    border-top: 1px solid #eee;
}

footer a {
    color: #888;
    text-decoration: none;
    margin: 0 0.5rem;
}

footer a:hover { color: #1a1a1a; }

/* --- RESPONSIVE: TABLET --- */
@media (max-width: 1024px) {
    .gallery { gap: 0.6rem; }
    .portfolio-grid { gap: 1rem; }
    nav { padding: 1rem 1.5rem; }
    main { padding: 6.5rem 1.5rem 3rem; }
}

/* --- RESPONSIVE: MOBILE --- */
@media (max-width: 768px) {
    .nav-links { display: none; }
    .nav-links.open {
        display: flex !important;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        background: #fff;
        align-items: center;
        justify-content: center;
        gap: 2.5rem;
        z-index: 99;
        padding: 0;
        margin: 0;
    }
    .nav-links.open a {
        font-size: 1.6rem;
        color: #1a1a1a;
        font-weight: var(--w-light);
    }
    .nav-links.open a.active {
        font-weight: var(--w-regular);
    }
    .hamburger { display: block; z-index: 100; order: 1; }

    .gallery { grid-template-columns: 1fr; gap: 0.5rem; }
    .portfolio-grid { grid-template-columns: 1fr; gap: 1rem; }
    .about-layout { grid-template-columns: 1fr; gap: 2rem; }
    .about-portrait { position: static; }
    .story-poster { padding: 2rem 1.5rem; min-height: 24rem; }
    .story-text-box { inset: 4rem 0.75rem 0.75rem; padding: 2rem 1.25rem; }

    main { padding: 5rem 1rem 2rem; }
    nav { padding: 1rem; }

    .logo { font-size: 1.2rem; }

    .portfolio-card .overlay h2 { font-size: 1.2rem; }
    .portfolio-card .overlay { padding: 1rem; }

    .contact h1 { font-size: 1.8rem; }
    .contact-item a,
    .contact-item p { font-size: 1.1rem; }

    .lightbox-nav { font-size: 2rem; padding: 0.8rem; }
    .lightbox-prev { left: 0.3rem; }
    .lightbox-next { right: 0.3rem; }
}

/* --- RESPONSIVE: SMALL PHONE --- */
@media (max-width: 400px) {
    .logo { font-size: 1rem; letter-spacing: 0.05em; }
    main { padding: 4.5rem 0.8rem 2rem; }
    .portfolio-card .overlay h2 { font-size: 1rem; }
}