/* =========================================================
   Rallare.se — bas-CSS
   ========================================================= */

:root {
    --color-bg: #0d0d0d;
    --color-text: #1a1a1a;
    --color-muted: #6b6b6b;
    --color-olive: #343826;           /* mörk oliv — sektionen under heron */
    --color-offwhite: #f5f4ee;        /* rubriker mot oliv */
    --color-paper: #f8f8f6;           /* ljus bakgrund — arbetsprocessen */
    --color-ink: #1a1a1a;             /* text mot ljus bakgrund */
    --color-black: #191919;           /* loggslingans bakgrund */
    --color-footer: #1c1c1c;          /* sidfoten — aningen ljusare än loggslingan */
    --color-cta: #d68a2a;             /* orange — används längre ner på sidan */
    --color-cta-hover: #b8731f;
    --color-yellow: #f6e467;          /* gul underrubrik i heron */
    --color-vit: #eeeeee;             /* kundens "vit" — brutet vitt, inte rent #fff */
    --sparrning: 0.015em;             /* gemensam spärrning för brödtext (PS +15) — justera här för alla */

    --font-display: 'Anton', 'Oswald', 'Arial Narrow', sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;
    --font-ui: 'Inter Tight', 'Inter', system-ui, sans-serif;

    --header-height: 80px;
    --container-max: 1200px;
    --chevron-depth: 45px;            /* djupet på V-cuten */
    --hero-height: 690px;             /* något beskuren nedtill på kundens önskemål (var 706) */
    --hero-overscan: 4%;              /* extra höjd så parallaxen har rörelsemån */
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

/* Mjuk scroll till #kontakt i sidfoten och till sektionsankare */
html {
    scroll-behavior: smooth;
}

/* Ankarmål ska inte hamna bakom den fasta headern */
[id] {
    scroll-margin-top: var(--header-height);
}

body {
    font-family: var(--font-body);
    color: var(--color-text);
    line-height: 1.6;
    /* Mörk botten i stället för vit: skulle någon springa ändå uppstå syns
       den knappt mot sektionerna, och överscroll under sidfoten blir svart
       i stället för att blinka vitt. */
    background: var(--color-footer);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.02em;
    margin: 0;
}

/* =========================================================
   Header — flytande, transparent
   ========================================================= */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    z-index: 100;
    background: transparent;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.site-header.is-scrolled {
    background: rgba(13, 13, 13, 0.92);
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

/* Öppen meny — helt ogenomskinligt fält, även högst upp på sidan. Måste stå
   efter .is-scrolled för att vinna när båda klasserna sitter samtidigt. */
.site-header.is-menu-open {
    background: #0d0d0d;
    backdrop-filter: none;
    box-shadow: none;
}

/* Full-bleed — headern följer viewportkanten, inte container-bredden */
.site-header__inner {
    height: 100%;
    padding: 0 32px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 40px;
}

.site-header__brand {
    font-family: var(--font-display);
    font-weight: 400;             /* Anton finns bara i en vikt */
    font-size: 30px;
    letter-spacing: 0.02em;
    color: #fff;
    text-decoration: none;
}

/* Wrappern försvinner ur layouten på desktop — nav och CTA blir egna grid-celler */
.site-menu {
    display: contents;
}

.site-nav {
    display: flex;
    gap: 40px;
    justify-content: center;
}

.site-nav a {
    font-family: var(--font-ui);
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0;
    white-space: nowrap;
    opacity: 1;
    transition: opacity 0.2s;
}

.site-nav a:hover { opacity: 0.75; }

/* Aktiv sida — kort gult streck under ordet */
.site-nav a.is-active {
    border-bottom: 2px solid var(--color-yellow);
    padding-bottom: 5px;
}

/* Vit pillerknapp */
.site-header__cta {
    justify-self: end;
    background: #fff;
    color: #111;
    text-decoration: none;
    padding: 12px 26px;
    border-radius: 999px;
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color 0.2s, color 0.2s;
}

.site-header__cta:hover { background: var(--color-yellow); }

/* =========================================================
   Pannkaksknapp — dold över 860px
   ========================================================= */

.site-header__toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.site-header__bar {
    display: block;
    width: 26px;
    height: 2px;
    background: #fff;
    transition: transform 0.25s ease, opacity 0.2s ease;
}

/* Öppet läge — översta och nedersta strecket bildar ett kryss */
.site-header.is-menu-open .site-header__bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.site-header.is-menu-open .site-header__bar:nth-child(2) {
    opacity: 0;
}

.site-header.is-menu-open .site-header__bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Sätts av site.js medan fönstret ändras. Utan detta animeras panelen från
   sitt desktop-läge när brytpunkten passeras, och blinkar till. */
.is-resizing .site-menu,
.is-resizing .site-header__bar {
    transition: none !important;
}

/* =========================================================
   Hero — bakgrundsbild med parallax
   ========================================================= */

.hero {
    position: relative;
    height: var(--hero-height);
    overflow: hidden;
    color: var(--color-vit);   /* #eeeeee — även hero-rubriken */
}

.hero__bg {
    position: absolute;
    inset: calc(-1 * var(--hero-overscan)) 0;
    background-color: #1a1a1a;     /* fallback medan bilden laddar */
    background-image: url('/images/hero.jpg');
    /* webp först, jpg för webbläsare som inte klarar image-set med type() */
    background-image: image-set(
        url('/images/hero.webp') type('image/webp'),
        url('/images/hero.jpg') type('image/jpeg')
    );
    /* cover ger samma resultat som "auto 100%" så länge fönstret är smalare än
       ca 1554 px — höjden fylls och beskärningen sker på sidorna. Blir fönstret
       bredare än så tar bilden slut i sidled, och cover beskär i höjd i stället
       för att lämna tomrum vid kanterna. */
    background-size: cover;
    /* Förankrad i överkant: när bilden väl beskärs i höjd (fönster bredare än
       ca 1554 px) kapas det nedtill — himlen och mannens huvud ligger kvar. */
    background-position: center top;
    will-change: transform;
}

/* Ingen nermörkning av fotot — borttagen på Tobbes begäran 2026-07-22.
   Läsbarheten vilar helt på text-shadow i .hero__title och .hero__subtitle. */

.hero__content {
    position: relative;
    z-index: 2;
    height: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.hero__title {
    font-family: var(--font-display);
    /* Högre vw-faktor = rubriken håller maxgraden längre ner i fönsterbredd
       innan den börjar krympa. Golvet höjt så den inte tappar tyngd på mobil. */
    font-size: clamp(60px, 9.2vw, 112px);
    font-weight: 400;             /* Anton har bara en vikt */
    line-height: 1.18;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    margin-bottom: 40px;
    /* Brytningen efter "EN" sitter som <br /> i Index.cshtml — max-width höll
       inte när textblocket blev bredare. */
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
}

.hero__subtitle {
    color: var(--color-yellow);
    /* Kunden ville ha den mindre. Värdet är min avvägning — säg PSD-graden så matchar jag exakt. */
    font-size: clamp(14px, 1.15vw, 16px);
    font-weight: 400;
    line-height: 1.6;
    max-width: 430px;
    margin: 0;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

/* =========================================================
   "Vad jag levererar" — mörk olivsektion med V-cut i nederkant
   ========================================================= */

.three-col {
    position: relative;
    background: var(--color-olive);
    color: var(--color-vit);
    /* Se sektionsöverlappen längst ner i filen */
    padding: 86px 0 calc(90px + var(--chevron-depth));
    /* clip-path: V-form pekande nedåt */
    clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100% - var(--chevron-depth)),
        50% 100%,
        0 calc(100% - var(--chevron-depth))
    );
}

.three-col__label {
    font-family: var(--font-body);
    font-size: clamp(19px, 1.55vw, 21px);   /* samma grad som brödtexten */
    font-weight: 400;
    color: var(--color-vit);
    text-align: center;
    margin: 0 0 90px;
}

.three-col__inner {
    max-width: 1290px;
    margin: 0 auto;
    padding: 0 32px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 110px;
    text-align: center;
}

.three-col__item h2 {
    font-family: var(--font-display);
    font-size: clamp(46px, 4.75vw, 66px);
    font-weight: 400;             /* Anton har bara en vikt */
    letter-spacing: 0.01em;
    text-transform: uppercase;
    line-height: 1.18;
    margin: 0 0 26px;
}

.three-col__item p {
    color: var(--color-yellow);
    font-size: 25px;      /* PSD */
    line-height: 35px;    /* PSD */
    margin: 0;
}

/* =========================================================
   "Så här går det till att jobba med mig" — ljus sektion
   ========================================================= */

.process {
    background: var(--color-paper);
    color: var(--color-ink);
    /* Sektionen skjuts upp bakom olivsektionens V-cut, så att urtaget fylls med
       den här bakgrunden i stället för body-vitt. Fungerar för att .three-col är
       position:relative och därmed målas ovanpå den här statiska sektionen.
       Toppadding kompenseras med samma djup så innehållet inte flyttar sig. */
    margin-top: calc(-1 * var(--chevron-depth));
    padding: calc(85px + var(--chevron-depth)) 0 60px;
}

.process__label {
    font-family: var(--font-body);
    font-size: 20px;   /* PSD */
    font-weight: 400;
    text-align: center;
    margin: 0 0 105px;
}

.process__inner {
    max-width: 1230px;
    margin: 0 auto;
    padding: 0 32px;
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    align-items: center;
    gap: 115px;
}

/* Stegen — cirkel till vänster, text till höger */
.process__steps {
    list-style: none;
    margin: 0;
    padding: 0;
}

.process__steps li {
    display: grid;
    grid-template-columns: 78px 1fr;
    align-items: center;
    gap: 34px;
    margin-bottom: 26px;
}

.process__steps li:last-child { margin-bottom: 0; }

.process__number {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: var(--color-olive);
    color: var(--color-yellow);
    font-family: var(--font-display);
    font-size: 44px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.process__steps p {
    font-family: var(--font-ui);   /* Inter Tight, PSD */
    font-weight: 500;              /* Medium, PSD */
    font-size: 19px;
    line-height: 32px;             /* PSD */
    margin: 0;
}

.process__steps strong {
    font-weight: 700;              /* Bold, PSD */
    text-transform: uppercase;
}

.process__image {
    aspect-ratio: 554 / 453;       /* bildens egna proportioner */
    border-radius: 24px;
    background-color: #d8d8d4;     /* syns medan bilden laddar */
    background-image: url('/images/process.jpg');
    /* webp först, jpg för webbläsare som inte klarar image-set med type() */
    background-image: image-set(
        url('/images/process.webp') type('image/webp'),
        url('/images/process.jpg') type('image/jpeg')
    );
    background-size: cover;
    background-position: center;
}

.process__actions {
    margin-top: 90px;
    text-align: center;
}

/* Mörk pillerknapp med gul text — motsatsen till headerns vita CTA */
.btn-dark {
    display: inline-block;
    background: var(--color-olive);
    color: var(--color-yellow);
    text-decoration: none;
    padding: 13px 32px;
    border-radius: 999px;
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    transition: background-color 0.2s;
}

.btn-dark:hover { background: #262a1b; }

/* =========================================================
   Loggslinga — glider långsamt åt vänster, oändligt
   ========================================================= */

.logos {
    background: var(--color-black);
    padding: 44px 0;
    overflow: hidden;
}

/* Spåret rymmer två identiska uppsättningar. -50% = exakt en uppsättning,
   så slingan börjar om utan synligt hopp. */
.logos__track {
    display: flex;
    width: max-content;
    animation: logos-scroll 60s linear infinite;
}

.logos__set {
    display: flex;
    align-items: center;
    gap: 90px;
    padding-right: 90px;
}

/* Faktisk storlek — ingen skalning. max-width-regeln längst upp skulle
   annars krympa dem, därför none här. */
.logos__set img {
    max-width: none;
}

@keyframes logos-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

/* =========================================================
   "Min historia" — text över helbredds foto
   ========================================================= */

.story {
    position: relative;
    background-color: #23241f;     /* syns medan bilden laddar */
    background-image: url('/images/historia.jpg');
    /* webp först, jpg för webbläsare som inte klarar image-set med type() */
    background-image: image-set(
        url('/images/historia.webp') type('image/webp'),
        url('/images/historia.jpg') type('image/jpeg')
    );
    background-size: cover;
    /* Förankrad i överkant — beskärningen sker nedtill, samma som heron */
    background-position: center top;
    color: var(--color-vit);
    padding: 100px 24px 75px;
}

.story__content {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}

.story__label {
    font-family: var(--font-body);
    font-size: clamp(19px, 1.55vw, 21px);   /* samma som övriga sektionsetiketter */
    font-weight: 400;
    margin: 0 0 70px;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

.story__title {
    font-family: var(--font-display);
    font-size: clamp(52px, 5.5vw, 78px);
    font-weight: 400;             /* Anton har bara en vikt */
    letter-spacing: 0.01em;
    line-height: 1.2;             /* lite mer luft mellan raderna */
    text-transform: uppercase;
    margin: 0 0 60px;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
}

.story__content p {
    color: var(--color-vit);
    font-size: clamp(19px, 1.55vw, 21px);
    line-height: 1.55;
    margin: 0 0 30px;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

.story__highlight { color: var(--color-yellow); }

/* Gul pillerknapp med mörk text */
.btn-yellow {
    display: inline-block;
    margin-top: 25px;
    background: var(--color-yellow);
    color: var(--color-ink);
    text-decoration: none;
    padding: 13px 32px;
    border-radius: 999px;
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    transition: background-color 0.2s;
}

.btn-yellow:hover { background: #fff; }

/* Varianten "Vad behöver du?" på /film — samma form, annan bild, ingen etikett
   och luftigare rytm. */
.story--kontakt {
    background-image: url('/images/film2.jpg');
    background-image: image-set(
        url('/images/film2.webp') type('image/webp'),
        url('/images/film2.jpg') type('image/jpeg')
    );
    padding: 200px 24px 120px;
}

/* Varianten "Pågående projekt" sist på Konstnärligt arbete */
.story--pagaende {
    background-image: url('/images/konst2.jpg');
    background-image: image-set(
        url('/images/konst2.webp') type('image/webp'),
        url('/images/konst2.jpg') type('image/jpeg')
    );
    padding: 180px 24px 140px;
}

.story--pagaende .story__title { margin-bottom: 90px; }

.pagaende {
    margin-bottom: 55px;
}

.pagaende:last-child { margin-bottom: 0; }

.pagaende p {
    font-size: clamp(17px, 1.5vw, 19px);
    line-height: 1.5;
    margin: 0;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

/* Två klasser i selektorn för att vinna över .pagaende p ovan */
.pagaende .pagaende__titel {
    font-family: var(--font-display);
    color: var(--color-yellow);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.story--kontakt .story__title { margin-bottom: 90px; }
/* Bredare textkolumn så "hur vi kan samarbeta?" ryms på en rad utan att brytas,
   samtidigt som rubriken förblir centrerad (ingen nowrap som svämmar över). */
.story--kontakt .story__content { max-width: 820px; }
.story--kontakt .story__content p { margin-bottom: 55px; }
.story--kontakt .story__content p:last-of-type { margin-bottom: 0; }
.story--kontakt .btn-yellow { margin-top: 100px; }

/* Sidor utan hero behöver en egen botten på headern, annars ligger den vita
   menytexten mot ljus bakgrund. Alla sidor har hero nu, men kroken finns kvar
   för nästa sida som inte får det. Sätts med ViewData["PageClass"]. */
.page-plain .site-header {
    background: var(--color-olive);
}

/* =========================================================
   Undersidan Film
   ========================================================= */

.hero--film .hero__bg {
    background-image: url('/images/film.jpg');
    background-image: image-set(
        url('/images/film.webp') type('image/webp'),
        url('/images/film.jpg') type('image/jpeg')
    );
}

/* Underrubriken är en rad här och ska inte tvingas bryta */
.hero__subtitle--wide { max-width: none; }

/* =========================================================
   Undersidan Om mig
   ========================================================= */

.hero--ommig .hero__bg {
    background-image: url('/images/ommig.jpg');
    background-image: image-set(
        url('/images/ommig.webp') type('image/webp'),
        url('/images/ommig.jpg') type('image/jpeg')
    );
}

.story--ommig {
    background-image: url('/images/ommig2.jpg');
    background-image: image-set(
        url('/images/ommig2.webp') type('image/webp'),
        url('/images/ommig2.jpg') type('image/jpeg')
    );
}

/* "Vill du veta mer om / hur vi kan samarbeta?" ska hålla sig på två rader
   (<br> i markupen). Bredare innehållsyta så andra raden inte bryts vidare. */
.story--ommig .story__content { max-width: 900px; }
.story--ommig .story__title { font-size: clamp(40px, 4.6vw, 64px); }

/* Ljus sektion med stor rubrik över två kolumner. Skiljer sig från
   .ljus-intro: större rubrik, tvåspaltigt och vänsterställd text. */
.om-intro {
    position: relative;            /* krävs för att V-cut-ifyllnaden ska måla under */
    background: var(--color-paper);
    color: var(--color-ink);
    padding: 110px 24px calc(90px + var(--chevron-depth));
    clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100% - var(--chevron-depth)),
        50% 100%,
        0 calc(100% - var(--chevron-depth))
    );
}

.om-intro h2 {
    font-family: var(--font-display);
    font-size: clamp(40px, 5.2vw, 72px);
    font-weight: 400;             /* Anton har bara en vikt */
    letter-spacing: 0.01em;
    line-height: 1.1;
    text-transform: uppercase;
    text-align: center;
    margin: 0 0 80px;
}

.om-intro__inner {
    max-width: 1250px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 120px;
}

.om-intro__text p {
    font-size: 16px;
    line-height: 1.7;
    margin: 0 0 26px;
}

.om-intro__text p:last-child { margin-bottom: 0; }

.om-intro__bild img {
    width: 100%;
    border-radius: 24px;
}

/* =========================================================
   Undersidan Böcker (första version)
   ========================================================= */

.hero--bocker .hero__bg {
    background-image: url('/images/bocker.jpg');
    background-image: image-set(
        url('/images/bocker.webp') type('image/webp'),
        url('/images/bocker.jpg') type('image/jpeg')
    );
}

/* Synopsis-blocket på Böcker: #eeeeee (samma vit-token som resten av sajten) */
.om-intro--bok {
    background: var(--color-vit);
}

/* Illustrationen (bocker2) ska visas hel, inte beskuras/rundas som ett foto */
.om-intro__bild--illustration img {
    border-radius: 0;
    object-fit: contain;
}

/* Köpställen — loggor med länk, ljus botten så blandade png/jpg syns.
   Dras upp bakom synopsis-blockets V-cut så urtaget fylls med den här ljusa
   bakgrunden i stället för mörkt — synopsis får då en "vit" nederkant som
   matchar loggblocket. */
.kopstallen {
    background: var(--color-paper);
    margin-top: calc(-1 * var(--chevron-depth));
    padding: calc(60px + var(--chevron-depth)) 24px 60px;
}

.kopstallen__loggor {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 1000px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 24px;
}

.kopstallen__loggor img {
    height: 100px;
    width: auto;
    max-width: none;
    transition: opacity 0.2s;
}

.kopstallen__loggor a:hover img { opacity: 0.6; }

/* Smalare skärmar — lägre loggor och tätare */
@media (max-width: 950px) {
    .kopstallen__loggor { gap: 10px 18px; }
    .kopstallen__loggor img { height: 80px; }
}

@media (max-width: 450px) {
    .kopstallen__loggor { gap: 8px 12px; }
}

/* Dokumentärfilm — video till vänster, text till höger */
.bok-film {
    background: var(--color-footer);
    color: var(--color-vit);
    padding: 90px 24px;
}

.bok-film__inner {
    max-width: 1230px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: 80px;
}

.bok-film__video {
    aspect-ratio: 16 / 9;
    background: #000;
}

.bok-film__video iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.bok-film__text h2 {
    font-family: var(--font-display);
    font-size: clamp(38px, 4.4vw, 60px);
    font-weight: 400;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    margin: 0 0 24px;
}

.bok-film__text p {
    font-size: clamp(16px, 1.35vw, 18px);
    line-height: 1.6;
    margin: 0;
}

/* Galleri — press & recensioner */
.bok-galleri {
    background: var(--color-paper);
    padding: 70px 24px;
}

.bok-galleri__grid {
    max-width: 1230px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.bok-galleri__grid img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
}

/* Avslutning — fältfotot bocker3 */
.story--bocker {
    background-image: url('/images/bocker3.jpg');
    background-image: image-set(
        url('/images/bocker3.webp') type('image/webp'),
        url('/images/bocker3.jpg') type('image/jpeg')
    );
}

/* =========================================================
   Undersidan Uppdrag / Case
   ========================================================= */

.hero--uppdrag .hero__bg {
    background-image: url('/images/uppdrag.jpg');
    background-image: image-set(
        url('/images/uppdrag.webp') type('image/webp'),
        url('/images/uppdrag.jpg') type('image/jpeg')
    );
}

.story--uppdrag {
    background-image: url('/images/uppdrag2.jpg');
    background-image: image-set(
        url('/images/uppdrag2.webp') type('image/webp'),
        url('/images/uppdrag2.jpg') type('image/jpeg')
    );
}

/* Intro-knappar (Collage på Uppdrag, Böcker på Konstnärligt) */
.ljus-intro__knapp { margin-top: 30px; }
.gul-intro__knapp { margin-top: 28px; color: var(--color-vit); }

.case-lista {
    background: var(--color-footer);
    color: var(--color-vit);
    /* Skjuts upp bakom V-cuten så urtaget fylls med den här bakgrunden */
    margin-top: calc(-1 * var(--chevron-depth));
    padding: calc(90px + var(--chevron-depth)) 24px 100px;
}

.case {
    max-width: 945px;
    margin: 0 auto 100px;
    text-align: center;
}

.case:last-child { margin-bottom: 0; }

.case h2 {
    font-family: var(--font-display);
    font-size: clamp(38px, 4.6vw, 64px);
    font-weight: 400;             /* Anton har bara en vikt */
    letter-spacing: 0.01em;
    line-height: 1.1;
    text-transform: uppercase;
    margin: 0 0 20px;
}

.case__text {
    color: var(--color-yellow);
    font-size: clamp(15px, 1.3vw, 17px);
    line-height: 1.6;
    max-width: 780px;
    margin: 0 auto 34px;
}

/* Bläddring mellan flera media — egen JS, inget bibliotek */
.karusell__ruta {
    position: relative;
    aspect-ratio: 8 / 5;
    background: #000;
}

.karusell__bild {
    position: absolute;
    inset: 0;
    display: none;
}

.karusell__bild.is-aktiv { display: block; }

.karusell__bild img,
.karusell__bild iframe {
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}

.karusell__nasta {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border: 0;
    background: none;
    color: #fff;
    font-size: 44px;
    line-height: 1;
    cursor: pointer;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
    transition: opacity 0.2s;
}

.karusell__nasta:hover { opacity: 0.7; }

.karusell__punkter {
    display: flex;
    /* Radbryter när numren inte får plats — annars spräcker många bilder mobilen */
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 10px;
    margin-top: 16px;
}

.karusell__punkter button {
    border: 0;
    background: none;
    padding: 4px;
    color: var(--color-yellow);
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.karusell__punkter button.is-aktiv { color: #fff; }

/* =========================================================
   Undersidan Konstnärligt arbete
   ========================================================= */

/* =========================================================
   Undersidan Arbetsprocess
   ========================================================= */

.hero--arbetsprocess .hero__bg {
    background-image: url('/images/arbetsprocess.jpg');
    background-image: image-set(
        url('/images/arbetsprocess.webp') type('image/webp'),
        url('/images/arbetsprocess.jpg') type('image/jpeg')
    );
}

.story--arbetsprocess {
    background-image: url('/images/arbetsprocess2.jpg');
    background-image: image-set(
        url('/images/arbetsprocess2.webp') type('image/webp'),
        url('/images/arbetsprocess2.jpg') type('image/jpeg')
    );
}

/* Fem steg centrerade under varandra */
.steg-lista {
    background: var(--color-footer);
    color: var(--color-vit);
    /* Skjuts upp bakom V-cuten så urtaget fylls med den här bakgrunden */
    margin-top: calc(-1 * var(--chevron-depth));
    padding: calc(110px + var(--chevron-depth)) 24px 120px;
    text-align: center;
}

.steg {
    max-width: 720px;
    margin: 0 auto 100px;
}

.steg:last-child { margin-bottom: 0; }

.steg__ikon {
    display: block;
    width: 50px;
    height: 50px;
    margin: 0 auto 26px;
    color: var(--color-yellow);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.steg h2 {
    font-family: var(--font-display);
    font-size: clamp(44px, 5vw, 70px);
    font-weight: 400;             /* Anton har bara en vikt */
    letter-spacing: 0.01em;
    line-height: 1.1;
    text-transform: uppercase;
    margin: 0 0 22px;
}

.steg p {
    color: var(--color-yellow);
    font-family: var(--font-ui);
    font-size: clamp(17px, 1.5vw, 20px);
    font-weight: 600;
    line-height: 1.5;
    margin: 0;
}

.hero--konst .hero__bg {
    background-image: url('/images/konst.jpg');
    background-image: image-set(
        url('/images/konst.webp') type('image/webp'),
        url('/images/konst.jpg') type('image/jpeg')
    );
}

/* Helgul mellansektion med V-cut i nederkant */
.gul-intro {
    position: relative;            /* krävs för att V-cut-ifyllnaden ska måla under */
    background: var(--color-yellow);
    color: var(--color-ink);
    /* Samma padding som ljus-intro så blocken blir lika höga överallt */
    padding: 56px 24px calc(40px + var(--chevron-depth));
    text-align: center;
    clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100% - var(--chevron-depth)),
        50% 100%,
        0 calc(100% - var(--chevron-depth))
    );
}

.gul-intro__content {
    max-width: 620px;
    margin: 0 auto;
}

.gul-intro h2 {
    font-family: var(--font-display);
    font-size: clamp(28px, 2.6vw, 34px);
    font-weight: 400;             /* Anton har bara en vikt */
    letter-spacing: 0.01em;
    line-height: 1.2;
    text-transform: uppercase;
    margin: 0 0 16px;      /* samma rubrik→text-avstånd som ljus-intro */
}

.gul-intro p {
    /* Kunden tyckte den kändes för stor — neddragen. Säg PSD-graden så matchar jag exakt. */
    font-size: clamp(17px, 1.35vw, 19px);
    font-weight: 500;
    line-height: 1.5;
    margin: 0;
}

.ljus-intro {
    position: relative;            /* krävs för att V-cut-ifyllnaden ska måla under */
    background: var(--color-paper);
    color: var(--color-ink);
    /* Lägre padding — blocket blev för högt. Samma värden som gul-intro. */
    padding: 56px 24px calc(40px + var(--chevron-depth));
    text-align: center;
    clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100% - var(--chevron-depth)),
        50% 100%,
        0 calc(100% - var(--chevron-depth))
    );
}

.ljus-intro__content {
    max-width: 680px;
    margin: 0 auto;
}

.ljus-intro h2 {
    font-family: var(--font-display);
    font-size: clamp(28px, 2.6vw, 34px);
    font-weight: 400;             /* Anton har bara en vikt */
    letter-spacing: 0.01em;
    line-height: 1.2;
    text-transform: uppercase;
    margin: 0 0 16px;      /* samma rubrik→text-avstånd som gul-intro */
}

.ljus-intro p {
    /* Samma storlek som gul-intro p — kunden ville ha dem lika stora */
    font-size: clamp(17px, 1.35vw, 19px);
    line-height: 1.5;
    margin: 0;
}

.verk-lista {
    background: var(--color-footer);
    color: #fff;
    /* Skjuts upp bakom V-cuten så urtaget fylls med den här bakgrunden */
    margin-top: calc(-1 * var(--chevron-depth));
    padding: calc(110px + var(--chevron-depth)) 24px 110px;
}

.verk-lista__inner {
    max-width: 1290px;
    margin: 0 auto;
}

/* Video till vänster, text till höger — varannan post speglad */
.verk {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 150px;
    margin-bottom: 100px;
}

.verk:last-child { margin-bottom: 0; }

.verk:nth-child(even) .verk__media { order: 2; }

.verk__media {
    aspect-ratio: 16 / 9;
    background: #000;
}

/* Media får vara antingen en spelare eller en bild — båda fyller rutan */
.verk__media iframe,
.verk__media img {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}

.verk__text h2 {
    font-family: var(--font-display);
    color: var(--color-yellow);
    font-size: clamp(19px, 1.7vw, 23px);
    font-weight: 400;             /* Anton har bara en vikt */
    letter-spacing: 0.02em;
    line-height: 1.25;
    text-transform: uppercase;
    margin: 0 0 16px;
}

.verk__underrubrik {
    font-family: var(--font-ui);
    color: var(--color-vit);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: var(--sparrning);
    text-transform: uppercase;
    margin: 0 0 28px;
}

/* Versalerna sätts här — texten lagras i normalt skiftläge i databasen */
.verk__brodtext {
    color: var(--color-vit);
    font-size: 15px;
    line-height: 1.65;
    letter-spacing: var(--sparrning);
    text-transform: uppercase;
    margin: 0;
}

/* Citatet är den enda texten i posten som inte är versal */
.verk__notering {
    color: var(--color-yellow);
    font-size: 15px;
    line-height: 1.6;
    margin: 26px 0 0;
}

/* =========================================================
   Bildcollage — justified layout utan JavaScript

   Varje ruta får flex-grow lika med sin proportion (bredd/höjd) och en
   flex-basis på samma proportion gånger målradhöjden. Flexbox fördelar då
   överskottet i en rad proportionellt, vilket är precis vad som krävs för
   att alla bilder på raden ska hamna på samma höjd.

   Sista raden är det klassiska problemet: den har ledigt utrymme kvar och
   skulle annars sträcka ut sina bilder groteskt. ::after suger upp det.
   ========================================================= */

/* Ingen sidopadding — bildytan går ut i skärmkanterna. Rubriken och ingressen
   får sin luft var för sig i stället. */
.collage-sida {
    background: var(--color-footer);
    color: var(--color-vit);
    padding: calc(var(--header-height) + 70px) 0 100px;
}

.collage-sida h1 {
    font-family: var(--font-display);
    font-size: clamp(40px, 5vw, 68px);
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.1;
    text-transform: uppercase;
    text-align: center;
    margin: 0 0 18px;
    padding: 0 24px;
}

.collage-sida__text {
    color: var(--color-yellow);
    font-size: clamp(16px, 1.4vw, 18px);
    text-align: center;
    max-width: 620px;
    margin: 0 auto 60px;
    padding: 0 24px;
}

/* Kant i kant, inga mellanrum mellan bilderna */
.collage {
    /* Radhöjden följer fönsterbredden KONTINUERLIGT, inte i brytpunktssteg.
       Med steg blev det studsigt: varje steg neråt gjorde bilderna smalare,
       så en rad som just spruckit fick plats igen. Resultatet blev att
       antalet per rad växlade fram och tillbaka när man drog i fönstret.

       Eftersom både bredden och basbredden skalar med vw ändras aldrig hur
       många bilder som ryms — radhöjden bara krymper mjukt.

       21vw är valt så att en rad rymmer bilder med proportionssumma upp till
       100/21 ≈ 4.76. Tre liggande 3:2-bilder ger 4.5, och 3:2 plus en
       panoramabild (3.0) ger också 4.5. Båda får alltså plats i alla bredder. */
    --collage-rad: clamp(190px, 21vw, 460px);
    --collage-glapp: 0px;

    display: flex;
    flex-wrap: wrap;
    gap: var(--collage-glapp);
}

.collage::after {
    content: '';
    flex-grow: 1000000;
    flex-basis: 0;
}

.collage__ruta {
    margin: 0;
    overflow: hidden;
    background: #000;
}

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

.collage__tom {
    text-align: center;
    opacity: 0.6;
}

/* Citat på Om mig. Sektionen skjuts upp bakom den ljusa sektionens V-cut och
   fyller urtaget — utan den syntes body-bakgrunden som en mörk kil. */
.citat-sektion {
    background: var(--color-footer);
    color: #fff;
    margin-top: calc(-1 * var(--chevron-depth));
    padding: calc(110px + var(--chevron-depth)) 24px 110px;
}

/* Två citat i bredd, centrerad text (kundens önskemål) */
.citat-lista {
    max-width: 1220px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px 215px;
    text-align: center;
}

.citat {
    margin: 0;
}

/* Namnet i brödtextfonten och brutet vitt — inte Anton/gult som förut */
.citat__namn {
    font-family: var(--font-ui);
    color: var(--color-vit);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: var(--sparrning);
    line-height: 1.4;
    text-transform: uppercase;
    margin: 0 0 14px;
}

/* Versalerna sätts här — citatet lagras i normalt skiftläge. Citattecknen
   kommer däremot från datat, precis som för filmernas Kommentar. */
.citat__text {
    color: var(--color-vit);
    font-size: 15px;
    line-height: 1.6;
    letter-spacing: var(--sparrning);
    margin: 0;
}

.verk-lista__tom {
    text-align: center;
    opacity: 0.6;
}

/* =========================================================
   Sektionsskarvar

   Vid bråkdels-devicepixlar (zoom, 125% skalning, hidpi, vissa
   fönsterbredder) hamnar en sektions underkant på en halv pixel.
   Webbläsaren avrundar då grannarnas kanter åt olika håll och
   bakgrunden bakom lyser igenom som en hårfin ljus linje.

   Varje sektion efter den första överlappar därför föregående med
   1px. Springan kan då aldrig uppstå, oavsett upplösning. Senare
   syskon målas ovanpå tidigare, så överlappet döljer inget.

   .process saknas här med flit — den har redan ett mycket större
   negativt margin för att fylla olivsektionens V-cut.
   ========================================================= */

.three-col,
.logos,
.story,
.site-footer {
    margin-top: -1px;
}

/* =========================================================
   Sidfot
   ========================================================= */

.site-footer {
    background: var(--color-footer);
    color: var(--color-vit);
    padding: 140px 24px 70px;
}

.site-footer__inner {
    max-width: 1000px;      /* kundens mått — centrerat block */
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}

/* Sidfotens rubriker i Inter (kundens undantag från Anton-regeln) */
.site-footer__col h2 {
    font-family: var(--font-ui);
    color: var(--color-yellow);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0 0 24px;
}

.site-footer__col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer__col li,
.site-footer__col p {
    font-size: 14px;
    line-height: 1.75;
    margin: 0;
}

.site-footer__col a {
    text-decoration: none;
    transition: color 0.2s;
}

.site-footer__col a:hover { color: var(--color-yellow); }

/* Besök/Post — etikett till vänster, adress till höger */
.site-footer__adress {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px 12px;
    margin: 14px 0 0;
    font-size: 14px;
    line-height: 1.4;
}

.site-footer__adress dt,
.site-footer__adress dd { margin: 0; }

.site-footer__mark {
    display: block;
    width: 135px;                  /* bildens egen storlek */
    margin: 80px auto 0;
}

.site-footer__mark img {
    width: 100%;
    height: auto;
}

.site-footer__rule {
    width: 525px;
    max-width: 100%;
    border: 0;
    border-top: 1px solid var(--color-yellow);
    margin: 35px auto 0;
}

.site-footer__copy {
    color: var(--color-yellow);
    font-size: 15px;
    text-align: center;
    margin: 22px 0 0;
}

.site-footer__social {
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 22px;
}

.site-footer__social svg {
    display: block;
    width: 28px;
    height: 28px;
    transition: opacity 0.2s;
}

.site-footer__social a:hover svg { opacity: 0.7; }

/* =========================================================
   Responsivt

   Headern har tre steg innan menyn försvinner. Vid full bredd tar
   wordmark + sex länkar + CTA ca 1190 px, så första steget måste slå
   in strax över det — annars trycks länkarna ut ur bild.
   ========================================================= */

/* Steg 1 — mindre grad och tightare mellanrum, allt får fortfarande plats */
@media (max-width: 1200px) {
    .site-header__inner { padding: 0 20px; gap: 24px; }
    .site-header__brand { font-size: 26px; }
    .site-nav { gap: 24px; }
    .site-nav a { font-size: 14px; }
    .site-header__cta { padding: 10px 20px; font-size: 14px; }

    .three-col__inner { gap: 64px; }
    .process__inner { gap: 64px; }
    .om-intro__inner { gap: 64px; }
    .citat-lista { gap: 60px 90px; }
}

/* Under 1000px låser vi antalet per rad i stället för att låta flexboxen räkna.
   Nära brytpunkten ryms två bilder bara för att de tillåts krympa, och exakt
   var det tippar beror på delpixlar och rullningslistens bredd — resultatet
   blir att rader hoppar mellan två och en medan man drar i fönstret.

   min-width slår igenom mot den flex-basis som sätts inline per bild, utan att
   behöva !important: minimibredden vinner alltid när flexboxen räknar ut den
   använda bredden. Mellanrummet är 0, så procenten går jämnt ut. */
@media (max-width: 1000px) {
    .collage__ruta { min-width: 50%; }
}

@media (max-width: 700px) {
    .collage__ruta { min-width: 100%; }
    .collage-sida h1,
    .collage-sida__text { padding-left: 20px; padding-right: 20px; }
}

/* Steg 2 — sista nedskalningen innan menyn viks undan */
@media (max-width: 1000px) {
    .site-header__inner { gap: 18px; }
    .site-nav { gap: 18px; }
    .site-nav a { font-size: 13px; }
    .site-header__cta { padding: 9px 16px; font-size: 13px; }

    .three-col__inner { gap: 48px; }

    .process__inner { gap: 48px; }
    .process__steps li { grid-template-columns: 64px 1fr; gap: 24px; }
    .process__number { width: 64px; height: 64px; font-size: 36px; }
    .process__steps p { font-size: 17px; }

    .bok-film__inner { gap: 48px; }
    .bok-galleri__grid { grid-template-columns: repeat(2, 1fr); }
}

/* Steg 3 — pannkaksmeny */
@media (max-width: 860px) {
    .site-header__inner {
        grid-template-columns: 1fr auto;
        padding: 0 20px;
        gap: 16px;
    }

    .site-header__toggle { display: flex; }

    /* Video ovanför text på Böcker-sidans dokumentärfilm-sektion */
    .bok-film__inner { grid-template-columns: 1fr; gap: 32px; }

    /* Panelen fäller ut under headern */
    .site-menu {
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 20px 32px;
        background: rgba(13, 13, 13, 0.97);
        backdrop-filter: blur(8px);
        border-top: 1px solid rgba(255, 255, 255, 0.08);

        /* Stängt läge — snabbt ut enligt specen */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
    }

    .site-header.is-menu-open .site-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s;
    }

    .site-nav {
        flex-direction: column;
        gap: 0;
    }

    .site-nav a {
        font-size: 17px;
        padding: 16px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    /* I panelen är CTA:n bara ännu en länk — ingen pillerknapp, ingen versalisering */
    .site-header__cta {
        justify-self: stretch;
        background: none;
        border-radius: 0;
        color: #fff;
        margin-top: 0;
        padding: 16px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        font-family: var(--font-ui);
        font-size: 17px;
        font-weight: 700;
        letter-spacing: 0;
        text-transform: none;
        text-align: left;
    }

    .site-header__cta:hover {
        background: none;
        opacity: 0.75;
    }

    .three-col {
        padding: 64px 0 calc(70px + var(--chevron-depth));
    }

    .three-col__label { margin-bottom: 56px; }

    .three-col__inner {
        grid-template-columns: 1fr;
        gap: 56px;
        padding: 0 24px;
    }

    .three-col__item h2 { margin-bottom: 24px; }

    /* En kolumn — rubrikerna får bryta som de vill */
    .three-col__break { display: none; }

    .process { padding: calc(64px + var(--chevron-depth)) 0 56px; }
    .process__label { margin-bottom: 56px; }

    /* Stegen först, bilden under */
    .process__inner {
        grid-template-columns: 1fr;
        gap: 48px;
        padding: 0 24px;
    }

    .process__actions { margin-top: 56px; }

    /* Video alltid överst när posterna staplas */
    .verk {
        grid-template-columns: 1fr;
        gap: 32px;
        margin-bottom: 72px;
    }

    .verk:nth-child(even) .verk__media { order: 0; }

    /* En kolumn — porträttet hamnar under texten */
    .om-intro { padding: 70px 20px calc(60px + var(--chevron-depth)); }
    .om-intro h2 { margin-bottom: 48px; }
    .om-intro__inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    /* Ett citat per rad i mobilläge i stället för två i bredd */
    .citat-lista { grid-template-columns: 1fr; gap: 48px; }

    /* Karusellens siffror: tätare men med större träffyta för tummen */
    .karusell__punkter { gap: 4px 6px; }
    .karusell__punkter button { padding: 6px 8px; }

    .site-footer { padding: 80px 20px 56px; }
    .site-footer__mark { width: 100px; margin-top: 56px; }

    .story { padding: 70px 20px 60px; }
    .story__label { margin-bottom: 48px; }
    .story__title { margin-bottom: 40px; }

    .story--kontakt { padding: 90px 20px 80px; }
    .story--kontakt .story__title { margin-bottom: 48px; }
    .story--kontakt .story__content p { margin-bottom: 32px; }
    .story--kontakt .btn-yellow { margin-top: 48px; }
}

/* Sidfotens egna brytpunkter (kundens mått) */
@media (max-width: 1030px) {
    .site-footer__inner {
        max-width: 550px;
        grid-template-columns: 1fr 1fr;
        gap: 44px 32px;
    }
}

@media (max-width: 570px) {
    .site-footer__inner {
        max-width: 300px;
        grid-template-columns: 1fr;
        gap: 40px;
    }
}