/* ── Typsnitt ── */

@font-face {
    font-display: swap;
    font-family: 'EB Garamond';
    font-style: normal;
    font-weight: 400;
    src: url('eb-garamond-v32-latin-regular.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'EB Garamond';
    font-style: italic;
    font-weight: 400;
    src: url('eb-garamond-v32-latin-italic.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'EB Garamond';
    font-style: normal;
    font-weight: 800;
    src: url('eb-garamond-v32-latin-800.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'EB Garamond';
    font-style: italic;
    font-weight: 800;
    src: url('eb-garamond-v32-latin-800italic.woff2') format('woff2');
}


/* ── Bas ── */

body {
    font-size: clamp(1.0rem, 0.6rem + 0.5vw, 1.4rem);
    font-family: "EB Garamond";
    color: black;
    background-color: #f8f6ea;
    margin: 0;
}

img { height: auto; }


menu {
    margin: 0;
    padding-top: 1rem;
}

menu a {
    margin-right: 2rem;
    font-style: italic;
    text-decoration: none;
    letter-spacing: 0.2em;
    color: inherit;
}


/* ── Navigering ── */

#meny-toggle { display: none; }
.nav label   { display: none; }
.nav-titel   { display: none; }

.bild span a { text-decoration: none; color: black; }

@media (max-width: 50em) {

    .nav {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 0.5rem;
    }

    .nav label {
        display: block;
        cursor: pointer;
        font-size: 1.5rem;
        padding: 0.5rem;
        line-height: 1;
    }

    .nav label::before                   { content: '☰'; }
    #meny-toggle:checked ~ label::before { content: '✕'; }

    .nav-titel {
        display: block;
        flex: 1;
        text-align: right;
        padding-right: 0.5rem;
        font-size: 1rem;
        letter-spacing: 0.2em;
        text-transform: uppercase;
    }

    .nav-titel a { text-decoration: none; color: inherit; }

    menu {
        display: none;
        flex-basis: 100%;
        padding: 0.5rem;
    }

    #meny-toggle:checked ~ menu { display: block; }

    menu a {
        display: block;
        padding: 0.5rem 0;
        letter-spacing:0.1em;
    }
}


/* ── Landningssidor (startsidan, projektlistan, privatpersoner) ── */

body.landning {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "bild meny"
        "bild innehall";
}

body.landning .nav { grid-area: meny; }

.bild     { grid-area: bild; }
.innehall { grid-area: innehall; padding: 2rem; container-type: inline-size; }

.bild {
    height: 100vh;
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 2em;
    box-sizing: border-box;
    font-size: 1.2rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    background-color: #f8f6ea;
}

.bild picture {
    display: contents;
}

.bild img {
    max-width: 75%;
    max-height: 65vh;
    width: auto;
    height: auto;
    mix-blend-mode: multiply;
}


.bild img.logga {
    max-height: 5rem;
    max-width: none;
}

h1 {
    font-size: clamp(2rem, 1rem + 3vw, 5rem);
    font-weight: 400;
    line-height: 1.1;
    color: #000;
}

.ingångar {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    max-width: 65ch;
}

.ingång h2 {
    font-size: 1.5rem;
    font-weight: 400;
    font-style: italic;
    margin: 0 0 0.5em 0;
}

.ingång p { margin: 0; }

.ingång-intro {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.ingång a {
    text-decoration: underline;
    color: inherit;
    font-size: 1.5rem;
}

.ingång a.pil {
    font-weight: 800;
    text-decoration: none;
}


/* ── Projektlistan ── */

.projekt-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0rem 3rem;
    align-items: start;
}

.projektkort {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: left;
    margin-bottom: 5rem;
    text-decoration: none;
    color: inherit;
    font-size:1rem;
}

.projektkort img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: center;
    mix-blend-mode: multiply;
}

.projektkort h2 {
font-weight: 600;
  font-size: 1.0rem;
  font-style: normal;
  margin: 0;
  font-variant: small-caps;
  letter-spacing: 0.1em;
}

.projektkort p { margin: 0; }

.projektkort:hover h2 { text-decoration: underline; }


/* ── Projektsidor ── */

body.projekt {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "sidebar header"
        "sidebar title"
        "sidebar innehall";
}

body.projekt .nav            { grid-area: header; }
body.projekt .projekt-rubrik { grid-area: title; padding: 2rem 2rem 0; }
body.projekt h1              { margin-top: 0.15em; }

.tillbaka {
    display: block;
    color: #858585;
    text-decoration: none;
    font-style: italic;
    font-size: 1rem;
    margin-bottom: 0.5em;
}

.tillbaka:hover { text-decoration: underline; }

body.projekt h1 { padding: 0; }

.sidebar {
    grid-area: sidebar;
    height: 100vh;
    overflow: hidden;
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;    
    background-color: #f8f6ea;

}

.bilder {
    display: grid;
    width: 100%;
}

.sidebar img {
    max-width: 60%;
    max-height: 60vh;
    object-fit: contain;
    mix-blend-mode: multiply;
}

.normal-blend img {
    mix-blend-mode: normal;
}

/* Flikar (radio-knapp-toggle, fungerar för upp till 4 vyer) */

.flikar {
    position: absolute;
    bottom: 2em;
    width: 100%;
    text-align: center;
    letter-spacing: 0.1em;
    text-wrap: balance;
}

.flikar label {
    margin-right: 2em;
    font-size: 1rem;
    cursor: pointer;
}

input[type="radio"] { display: none; }

.bild-vy {
    grid-area: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
}

#vy-0:checked ~ .bilder .bild-vy-0,
#vy-1:checked ~ .bilder .bild-vy-1,
#vy-2:checked ~ .bilder .bild-vy-2,
#vy-3:checked ~ .bilder .bild-vy-3,
#vy-4:checked ~ .bilder .bild-vy-4,
#vy-5:checked ~ .bilder .bild-vy-5,
#vy-6:checked ~ .bilder .bild-vy-6,
#vy-7:checked ~ .bilder .bild-vy-7,
#vy-8:checked ~ .bilder .bild-vy-8,
#vy-9:checked ~ .bilder .bild-vy-9,
#vy-10:checked ~ .bilder .bild-vy-10,
#vy-11:checked ~ .bilder .bild-vy-11,
#vy-12:checked ~ .bilder .bild-vy-12
{ visibility: visible; }

#vy-0:checked ~ .flikar label:nth-child(1),
#vy-1:checked ~ .flikar label:nth-child(2),
#vy-2:checked ~ .flikar label:nth-child(3),
#vy-3:checked ~ .flikar label:nth-child(4),
#vy-4:checked ~ .flikar label:nth-child(5),
#vy-5:checked ~ .flikar label:nth-child(6),
#vy-6:checked ~ .flikar label:nth-child(7),
#vy-7:checked ~ .flikar label:nth-child(8),
#vy-8:checked ~ .flikar label:nth-child(9),
#vy-9:checked ~ .flikar label:nth-child(10),
#vy-10:checked ~ .flikar label:nth-child(11),
#vy-11:checked ~ .flikar label:nth-child(12),
#vy-12:checked ~ .flikar label:nth-child(13) {
    border-bottom: 2px solid currentColor;
}


/* ── Brödtext och sidospalt (projektsidor) ── */

.brödtext { max-width: 60ch; }

.bild-brodtext { display: block; margin: 2rem 0; }
.bild-brodtext img { width: 100%; display: block; }
.bild-multiply img { mix-blend-mode: multiply; }

.tvåspalt {
    display: grid;
    grid-template-columns: minmax(0, 37rem) 1fr;
    gap: 2rem;
}


.sidospalt {
    max-width: 20ch;
    font-size: 1.2rem;
    padding-left: 3rem;
    color: #000;
    font-style: italic;
}

.sidospalt a { color: #000; text-decoration: underline; }

.sidospalt dt {
    font-weight: 800;
    margin-top: 1em;
}

.sidospalt dt:first-child { margin-top: 0; }

.sidospalt dd {
    font-style: italic;
    font-size: 1rem;
    margin: 0;
}


.brodtext-sida {
    max-width: 65ch;
}

.brodtext-sida a {
    text-decoration: underline;
    color: inherit;
    font-size: 1.3rem;
}

.brodtext-sida .kontakt-info a {
    font-size: inherit;
}

.brodtext-sida a.pil {
    font-weight: 800;
    text-decoration: none;
}

.brodtext-sida h2,
.brodtext-sida h3 {
    margin-top: 2.5em;
    margin-bottom: 0.25em;
    font-weight: 400;
    font-style: italic;
}

/* ── Privatpersoner ── */

.ingångar-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem 3rem;
}

.ritning-i-brodtext {
    width: 70%;
    max-width: 70%;
    display: block;
    margin-inline: auto;
}

.ritning-i-brodtext img {
    width: 100%;
    max-width: 100%;
    mix-blend-mode: multiply;
}

.bild-detalj {
    width: 30%;
    max-width: 30%;
    display: block;
    margin-inline: auto;
}

.bild-detalj img {
    width: 100%;
    max-width: 100%;
    mix-blend-mode: multiply;
}

.ritning-i-brodtext figcaption {
    text-align: center;
    font-size: 0.85rem;
    color: #666;
    margin-top: 0.4em;
}

.förfrågan {
    border: 1px solid black;
    background: white;
    padding: 2rem;
}

.förfrågan h2 {
    font-size: 1.5rem;
    font-weight: 400;
    font-style: italic;
    margin: 0 0 1em 0;
}

.förfrågan form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.förfrågan label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-style: italic;
    color: #858585;
    font-size: 1rem;
}

.förfrågan input,
.förfrågan textarea {
    font-family: inherit;
    font-size: inherit;
    background: transparent;
    border: none;
    border-bottom: 1px solid currentColor;
    padding: 0.25em 0;
    color: inherit;
    outline: none;
    width: 100%;
}

.förfrågan textarea {
    resize: vertical;
    min-height: 5em;
}

.förfrågan button {
    align-self: flex-start;
    font-family: inherit;
    font-size: 1.5rem;
    font-style: italic;
    background: none;
    border: none;
    border-bottom: 1px solid currentColor;
    padding: 0.1em 0;
    cursor: pointer;
    color: inherit;
}


/* ── Blogg ── */

.filosofi-undertitel {
    font-size: 1.15rem;
    color: #555;
    margin-top: 0.5rem;
    margin-bottom: 2rem;
}

.inlagg-lista dt {
    font-weight: 800;
    margin-bottom: 1rem;
}

.inlagg-lista dd {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin: 0 0 1.25rem;
}

.inlagg-lista time {
    font-size: 0.85rem;
}

.inlagg-lista a {
    color: inherit;
    text-decoration: underline;
    font-size: inherit !important;
}

.inlagg-lista a:hover {
    text-decoration: underline;
}

.inlagg-datum {
    color: #888;
    font-size: 0.9rem;
    margin: 0 0 0.25em;
}


/* ── Kontaktsida ── */

.kontakt-info {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.4em 2rem;
    margin: 1.5rem 0 2.5rem;
}

.kontakt-info dt {
    color: #888;
    font-size: 0.9rem;
}

.kontakt-info dd {
    margin: 0;
}

.kontakt-info a {
    color: inherit;
    text-decoration: underline;
}

.kontakt-personer {
    display: flex;
    gap: 3rem;
    margin: 2rem 0;
}

.kontakt-person {
    flex: 1;
}

.kontakt-person picture {
    display: block;
    margin-bottom: 1rem;
}

.kontakt-person img {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    mix-blend-mode: multiply;
}

.kontakt-person h2 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.25em;
}

.kontakt-person p {
    margin: 0 0 0.25em;
    font-size: 0.95rem;
}

.kontakt-person a {
    color: inherit;
    text-decoration: underline;
}

.kontakt-adress {
    margin-top: 2rem;
    font-size: 0.95rem;
    color: #555;
}

/* ── Kontaktsektion ── */

.logga-kontakt { display: none; }

.kontakt {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    gap: 2rem;
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid currentColor;
    font-size: 1.2rem;
    
}

.kontakt picture {
    display: contents;
}

.kontakt img {
    width: auto;
    height: 6rem;
    mix-blend-mode: multiply;
}

.kontakt p { margin: 0 0 0.75em 0; }

.kontakt a { text-decoration: underline; color: inherit; }


/* ── Mobil ── */

@media (max-width: 50em) {

    body.landning {
        grid-template-columns: 1fr;
        grid-template-areas:
            "meny"
            "bild"
            "innehall";
    }

    .bild          { height: auto; position: static; background-color: #f8f6ea; }
    .bild > span   { display: none; }
    .bild img      { max-width: 100%; max-height: none; }
    .bild picture  { display: contents; }
    .bild img.logga { display: none; }

    h1 {
        font-size: 2rem;
        line-height: 3rem;
    }

    .ingång a { font-size: 1.3rem; line-height: 2rem; }
    .ingång p { margin-bottom: 0.5em; }

    .projekt-grid  { grid-template-columns: 1fr; }
    .ingångar-grid { grid-template-columns: 1fr; }
    .kontakt-personer { flex-direction: column; }

    .logga-kontakt {
        display: block;
        height: 5rem;
        mix-blend-mode: multiply;
        margin: 2rem auto 1rem;
    }

    .kontakt     { grid-template-columns: 1fr; }
    .kontakt img { display: none; }

    body.projekt {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "title"
            "sidebar"
            "innehall";
    }

    .sidebar {
        height: auto;
        overflow: visible;
        position: static;
    }

    .sidebar img {
        max-width: 90%;
        max-height: none;
    }

    .flikar   { position: static; padding: 1em 0; }
    .tvåspalt { grid-template-columns: 1fr; }
    .sidospalt { padding-left: 0; }
}