/* ========================================================================== Portefølje – Ingrid Tryggestad Berre Ett stilark, to temaer: "personal" (standard) og "nrk". Tema settes som data-theme på av js/site.js. ========================================================================== */ :root{ /* Personal: én nøytral grotesk til alt, monospace kun til småetiketter. NRK-temaet beholder sine egne to (--f-grotesk og --f-sans) — de er med vilje ikke rørt, og delte regler som peker på var(--f-sans) løser fortsatt opp til Hanken slik de alltid har gjort. */ --f-grot:'Inter', system-ui, -apple-system, sans-serif; /* Instrument Serif tar display og alle etikettene. Den har ingen akse for optisk størrelse og kan ikke tykne av seg selv når graden faller. Det er grunnen til at etikettene ligger på 14 px og ikke 13, og at sporinga er løsere enn den var i mono. --f-mono står igjen definert: den brukes bare ett sted nå, pluss-tegnet i CV-en, der bredden er satt i ch. */ --f-mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --f-serif:'Instrument Serif', Georgia, 'Times New Roman', serif; --f-grotesk:'Bricolage Grotesque', system-ui, sans-serif; --f-sans:'Hanken Grotesk', system-ui, -apple-system, sans-serif; --maxw:1160px; /* TO VERTIKALER. Innholdsboksen i .wrap er 1104 px (1160 minus 2 × 28 padding). På den ligger 12 spalter med 24 px mellomrom: spalta blir 70 px, spaltesteget 94. 168 356 916 1272 │ innrykk 188 │ tekst 634 │ │ ├─────────┬──────────┼──────────────────────────────────────┤ │ │ 1 2 │ 3 4 5 6 7 8 9 │10 11 12 Sidekanten 168 er bildenes og hårstrekenes. Tekstkanten 356 er all teksts — kicker, tittel, ingress, nøkkelinfo, overskrifter, brødtekst. Ingen unntak: det er unntakene som ville fått 20 px avvik til å lese som slurv i stedet for som system. Tekstens høyrekant og standardfigurens høyrekant er samme vertikal, 916. Det er den alignmenten som binder de to kantene til ett rutenett. Før sto her --fig-standard/smal/vid som faste px-bredder. De er borte: bredden settes nå med grid-column, så figuren kan ikke havne på en bredde som ikke er en spaltelinje, og den skalerer av seg selv. */ --bildegap:4px; /* renna i bilderutenettet. Bleed bruker 2. */ /* Etikettspalta i margen er borte; det som står igjen er gapet mellom to like spalter, i kortradene og i CV-en. */ --gap-spalter:56px; /* Margstige. Før lå det sytten ulike vertikale verdier i case-CSS-en. Alle marger på prosjektsidene skal være én av disse seks. */ --rom-1:8px; --rom-2:16px; --rom-3:28px; --rom-4:48px; --rom-5:80px; --rom-6:128px; /* Skriftskalaen. Før lå det ni grader på en prosjektside: 13, 15, 16.5, 18, 24, 26, 33, 34 og 64 px, og tre av dem skilte under to piksler, som øyet ikke leser som en forskjell, bare som slurv. Nå seks trinn med hver sin jobb, med et jevnt forhold rundt 1,23 i tekstområdet før det åpner seg. */ /* NRK hadde én grad for all metadata og skal beholde den. De tre nye navnene løser derfor opp til 14 her, så delte regler som leser var(--t-mikro) eller var(--t-felt) renderer nøyaktig som før. */ --t-mikro:14px; --t-felt:14px; --t-korttittel:26px; --t-etikett:14px; /* overskrift i margspalta */ --t-brod:17px; /* brødtekst, kolofonverdier, lister */ --t-lead:21px; /* sammendraget under toppbildet */ --t-ingress:26px; /* sidas ene store inngang */ --t-sitat:clamp(27px,3.2vw,37px); --t-tittel:clamp(40px,5.6vw,62px); --lh-etikett:1.45; --lh-brod:1.65; --lh-lead:1.5; --lh-ingress:1.35; --lh-display:1.06; --etikett-sporing:.015em; /* Personal-palett. Alle verdier klarer AA mot papiret (#FCFCFA). */ --papir:#FCFCFA; --blekk:#141414; /* overskrifter og uthevet tekst 16:1 */ --brod:#2A2A2A; /* brødtekst 13:1 */ --damp:#6B6B6B; /* metadata og etiketter 5.3:1 */ --strek:#E4E1DA; /* hårlinjer, dekorativ */ --blaa:#20309C; /* kun lenker og fokus 11:1 */ /* Aksenten er sekundærtekstens og trådens farge. Prosjektsidene overstyrer den; index.html er inngangen til alle seks og blir stående nøytral. */ --aksent:#4A4A48; --nrk-navy:#0A1A2F; --nrk-blaa:#1F6FE6; --nrk-oransje:#FF5330; } *{box-sizing:border-box;} /* Foten under maskinen i skjermmockupen er med vilje bredere enn rammen (.mac::after). Når mockupen tar nesten hele vinduet, stikker den noen piksler utenfor og ville gitt et vannrett rullefelt for noe rent dekorativt. */ html{scroll-behavior:smooth;overflow-x:hidden;} body{margin:0;transition:background .45s ease, color .45s ease;} img{max-width:100%;display:block;} a{color:inherit;text-decoration:none;} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;} a:focus-visible,button:focus-visible{outline:3px solid #1E5FD8;outline-offset:3px;border-radius:3px;} .skip{position:absolute;left:-999px;background:#0A2342;color:#fff;padding:12px 18px;z-index:200;} .skip:focus{left:0;top:0;} .visuelt-skjult{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;} /* Headere byttes per tema */ .hdr-personal,.hdr-nrk{display:none;} body[data-theme="personal"] .hdr-personal{display:block;} body[data-theme="nrk"] .hdr-nrk{display:block;} /* ========================================================================== TEMA: PERSONAL ========================================================================== */ body[data-theme="personal"]{ background:var(--papir);color:var(--blekk); font-family:var(--f-grot); -webkit-font-smoothing:antialiased; /* Skalaen bor her, ikke på :root. Grunnen er at en rekke delte regler — .kreditt-felt dd, .mockup figcaption, .mockup-fane, .video video — leser var(--t-brod) og var(--t-etikett), og de gjelder begge temaene. Settes de nye gradene på :root, følger NRK med. Verdiene på :root er derfor NRKs, og personal-temaet har sine egne. Minstegraden er 16 px. Etiketten lå på 14, og rundt den lå det strøtilfeller på 12, 12,5, 13, 13,5, 14,5 og 15. Forholdet mellom trinnene er beholdt, rundt 1,22 i tekstområdet. */ /* SERIF OVER 32, INTER UNDER. Grensa går ett sted, og den går på 32: alt derfra og opp er Instrument Serif, alt under er Inter. Da finnes det ingen grad der de to skriftene konkurrerer om samme rolle. Serifen bar før ni roller fra 15 til 62 px, og en serif-etikett i margen sto rett ved siden av en fet sans-underoverskrift i innholdsspalta — to overskriftssystemer i samme bolk. Det som løste det var ikke å ta serifen av overskriftene, men å fjerne den ene av de to overskriftene: margspalta er borte, og hierarkiet går nedover i én spalte. Seks grader, to vekter. Ingen to trinn nærmere hverandre enn 20 %: 15 Inter 400 --damp henger på noe: bildetekst, teller, kicker, cite 15 Inter 500 --blekk navngir en verdi: dt, del-meta 18 Inter 400 --brod brødtekst, dd 18 Inter 500 --blekk underoverskrift, strong 22 Inter 400 --blekk ingress 22 Inter 500 --blekk underoverskrift 30 serif seksjonsoverskrift, ordmerke, korttittel 30-40 serif sitat 40-62 serif prosjekttittel Målt før: 14 kombinasjoner, 9 grader, 3 vekter. Etter: 8, 6 og 2. Felt og mikro deler grad med vilje: de skiller seg på vekt og farge, som er det som faktisk skiller en etikett fra en bildetekst. */ --t-mikro:15px; --t-felt:15px; /* --t-etikett settes ikke her. Etter at etikettspalta i margen forsvant er det ingen personal-regel som leser den, og :root-verdien 14 er NRKs. Seksjonsoverskriftene bruker --t-overskrift. */ --t-overskrift:30px; --t-brod:18px; /* Lead og ingress var 21 og 25. Fem piksler er under 20 % og leses ikke som to grader, bare som slurv. De er samme rolle — kort inngang til en tekst — og har nå samme grad. */ /* Ett trinn over brødteksten, ikke tre. 24 var «undertittel» både under tittelen og under hver seksjonsoverskrift, og begge leste som for store. Samme grad bærer nå underoverskriften, i vekt 500. */ --t-lead:22px; --t-ingress:22px; /* Kortoverskriften lånte --t-ingress. Da ingressen falt fra 28 til 25 fulgte den med ned, og med kickeren løftet til 20 satt den bare 1,25 over sin egen etikett. Den er et navn, ikke en løpende setning, og har derfor sin egen grad. */ --t-korttittel:30px; /* Bunnen i klemmen er hevet til 32 sammen med overskriftstrinnet. Sto den på 30, ble sitatet mindre enn en overskrift på smale skjermer. */ --t-sitat:clamp(30px,3.4vw,40px); --t-tittel:clamp(40px,5.6vw,62px); } /* OVERSKRIFTENE. Én stemme og ett trinn: Instrument Serif på 32, samme enten den står på forsida eller på en prosjektside, og samme grad som ordmerket og korttitlene. Sto før i serif på 20 med .delprosjekt h2 på 21 ved siden av — én piksel unna, altså to grader øyet leste som slurv. 32 og ikke 30: serifen ligger på 0,51 em i x-høyde mot Inters 0,546, og går samtidig fra vekt 500 til 400. To piksler henter tilbake tyngden den ellers ville mistet mot brødteksten. */ body[data-theme="personal"] .seksjon-tittel, body[data-theme="personal"] .cv-bolk h3, body[data-theme="personal"] .case-seksjon > h2, body[data-theme="personal"] .case-seksjon .tekstblokk > h2, body[data-theme="personal"] .delprosjekt h2{ font-family:var(--f-serif);font-style:normal;font-weight:400; font-size:var(--t-overskrift);line-height:1.15; letter-spacing:-.01em;color:var(--blekk); } /* ETIKETTENE OG MIKROTEKSTEN, begge på 15 px. De skiller seg på vekt og farge, som er det som faktisk skiller en etikett fra en bildetekst. Kickeren står i mikrogruppa: den henger på tittelen under seg, den introduserer ingenting alene. --etikett-sporing hører til serifen. Den løsere sporinga var kompensasjon for Instrument Serif; Inter trenger den ikke, og sans-reglene står på 0. */ body[data-theme="personal"] .delprosjekt .del-meta, body[data-theme="personal"] .kreditt-felt dt, body[data-theme="personal"] .fyll-inn strong{ font-family:var(--f-grot);font-style:normal;font-weight:500; font-size:var(--t-felt);line-height:var(--lh-etikett); letter-spacing:0;color:var(--blekk); } body[data-theme="personal"] .kicker, body[data-theme="personal"] .cv-post span, body[data-theme="personal"] .brodsmule, body[data-theme="personal"] .bildegrid figcaption, body[data-theme="personal"] .video-tekst, body[data-theme="personal"] .sitat cite, body[data-theme="personal"] .case-nav .retning, body[data-theme="personal"] .figur figcaption, body[data-theme="personal"] .plakat figcaption{ font-family:var(--f-grot);font-style:normal;font-weight:400; font-size:var(--t-mikro);line-height:var(--lh-etikett); letter-spacing:0;color:var(--damp); } /* Brødsmulen er en lenke; fargeregelen for den står allerede lenger nede, i prosjektside-blokka, og er den som gjelder. */ /* Telleren må nevnes som p.karusell-teller og ikke bare som klasse: den er en

inne i .case-seksjon, og regelen for avsnitt der veier tyngre enn en ren klasse. Med den vinner den ikke, og telleren sto på 16,5 px. */ /* Etikettene står i vanlig skrift. Skillet mot brødteksten går på skriftsnitt og farge, ikke på versaler. */ /* Header */ body[data-theme="personal"] .hdr-personal{padding:var(--rom-4) 0 0;} /* Toppstripa må dele boks med innholdet. Uten dette står ordmerket på 168 (den gamle --maxw:1160) mens sida under starter på 28, og de to leser som to ulike rutenett. Scopet til prosjektsidene, så forsida beholder sitt. */ body[data-theme="personal"][data-prosjekt] .hdr-personal .wrap{max-width:1440px;} body[data-theme="personal"] .hdr-personal .wrap{ display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between; gap:8px 32px;padding-bottom:20px; } body[data-theme="personal"] .pm-wordmark{ font-family:var(--f-serif);font-weight:400;font-size:var(--t-korttittel);letter-spacing:0; } .pm-wordmark{ font-family:var(--f-grot);font-weight:500; font-size:clamp(24px,3vw,34px);line-height:1.1; color:var(--blekk);margin:0;letter-spacing:-.02em; } .pm-wordmark a{color:inherit;} /* Navigasjon i toppstripa. Sida hadde ingen: kontaktinfoen lå 6000 px nede, og eneste vei dit var å scrolle hele sida. .pm-undertittel sto her før og sa «Interaksjons- og tjenestedesigner i Oslo» på 15 px oppe til høyre — sidas minste tekst sa det viktigste. Rollelinja i påstanden sier det nå, større og på rett sted. */ .pm-nav{display:flex;flex-wrap:wrap;gap:var(--rom-3);} body[data-theme="personal"] .pm-nav a{ font-size:var(--t-mikro);line-height:var(--lh-etikett); color:var(--damp);transition:color .2s; } body[data-theme="personal"] .pm-nav a:hover{color:var(--blekk);} /* Bærende påstand */ /* Midtstilt i heroen. Før sto den i en nisje til venstre, og nisjens top:36 % var koblet til flatens aspect-ratio: rørte du høyden uten å regne om nisjen, gled teksten inn under bildene. Den koblingen finnes ikke lenger. Teksten står nå i midten, og utklippene er lagt rundt den med minst 64 px klaring, målt av skript/sjekk-collage.mjs. 46 % og ikke 50 %: optisk midte ligger litt over geometrisk, og en tekstblokk satt i geometrisk midte leser som om den har sunket. Heroen er sidas ene unntak fra venstrekanten på 168 px. Alt annet på nettstedet starter der; dette er den ene flaten som er sentrert. */ body[data-theme="personal"] .paastand{ position:absolute;z-index:2;left:50%;top:46%; transform:translate(-50%,-50%); width:min(640px,44vw);max-width:none;padding:0;text-align:center; } /* Rangeringen er snudd. Påstanden sto alene på 40 px i grått og var både sidas svakeste formulering og sidas svakeste farge. Nå bærer rollelinja skjermen i sort, og setningen står under den som det den er: tonefall, ikke posisjon. */ /* Rollelinja er flyttet opp fra sitattrinnet (40) til tittelrinnet (62). Den er sidas største øyeblikk nå som heroen fyller vinduet, og på 40 px druknet den i all luften rundt. Ingen ny grad: 62 er trinnet prosjekttitlene allerede står på. */ body[data-theme="personal"] .paastand p.paastand-rolle{ font-family:var(--f-serif);line-height:var(--lh-display); /* Taket på 4,8vw er ikke et nytt trinn i skalaen, bare en brems: mellom 1000 og 1300 px bredde holder --t-tittel seg på 62 mens spaltene rundt teksten krymper, og da er det utklippene i sidespaltene som betaler. Under 821 px står den på rene --t-tittel igjen. */ font-size:min(var(--t-tittel), 4.8vw); /* Uten denne brekker linja etter "offentlige" og lar "tjenester." stå alene som en enke under en nesten full linje. */ text-wrap:balance; letter-spacing:-.012em;margin:0 0 var(--rom-3);color:var(--blekk); font-weight:400;max-width:none; } body[data-theme="personal"] .paastand p{ font-family:var(--f-grot);font-size:var(--t-lead);line-height:var(--lh-lead); letter-spacing:-.008em;margin:0 auto;color:var(--damp);font-weight:400; max-width:min(520px,100%); } /* Uthevingen skjer med kontrast, ikke med kursiv eller farge. */ body[data-theme="personal"] .paastand em{color:var(--blekk);font-style:normal;} body[data-theme="personal"] main{padding:0 0 20px;} /* Overskriften står over innholdet sitt, ikke i en etikettspalte i margen. Etikettspalta ga to venstrekanter på sida og gjorde overskriften til en av to konkurrerende overskrifter i samme blokk. Nå én vertikal gjennom hele nettstedet, med hårstreken som eneste skille mellom bolkene. */ body[data-theme="personal"] .seksjon{ display:block; padding:var(--rom-5) 0;border-top:1px solid var(--strek); } body[data-theme="personal"] .seksjon-tittel{margin:0 0 var(--rom-4);} /* Kort */ body[data-theme="personal"] .kort{display:block;color:inherit;} body[data-theme="personal"] .kort-media{ background:#EFEBE2;border-radius:3px;overflow:hidden; } body[data-theme="personal"] .kort-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;} body[data-theme="personal"] .kort:hover .kort-media img{transform:scale(1.025);} /* margin-top må nulles. Uten den står nettleserens 1em der, altså 15 px som ikke er et trinn i margstigen, og den dyttet kickeren ned slik at railens første etikett lå 15 px over den i stedet for å flukte. */ body[data-theme="personal"] .kicker{display:block;margin:0 0 var(--rom-2);} body[data-theme="personal"] .kort-tittel{ font-family:var(--f-serif);font-weight:400;color:var(--blekk); font-size:var(--t-korttittel);line-height:1.12;letter-spacing:-.012em; margin:0 0 var(--rom-2); } /* Linja under tittelen sier hva prosjektet er, og eventuelt hva det vant. Den sto på 15 px i --damp, altså nøyaktig samme grad, skrift og farge som fagfeltet over tittelen — to like linjer som klemte tittelen mellom seg selv om de gjør ulike jobber. Nå er den brødtekst: merkelapp på 15, tittel på 30, setning på 18. .kort-blurb finnes ikke lenger; NRK-reglene for den står igjen urørt, siden den visningen legges om separat. */ body[data-theme="personal"] .kort-meta{ display:block;font-size:var(--t-brod);line-height:var(--lh-brod); color:var(--brod); /* 34ch, ikke 46. 46ch regner ut til 522 px, altså nøyaktig spaltebredden på 524, og begrenset dermed ingenting: linjene løp helt ut til høyrekanten. Inters null er 0,63 em bred, ikke 0,5 som antatt. 34ch gir rundt 386 px og drøyt 45 tegn i linja. */ max-width:34ch; } body[data-theme="personal"] .kort:hover .kort-tittel{color:var(--blaa);} /* Hovedprosjekter: vekslende to-kolonners rader */ .hoved{display:grid;gap:0;} /* align-items:center. Med beskrivelsen borte er tekstblokka tre korte linjer, og da henger den i lufta øverst i et 349 px høyt bilde hvis den settes til start. Midtstilling var feil så lenge blokka var høy og ujevn; nå er den kort og lik på alle kortene, og da er den riktig. */ body[data-theme="personal"] .hoved .kort{ display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-spalter); align-items:center;padding:0 0 var(--rom-4); } body[data-theme="personal"] .hoved .kort:last-child{padding-bottom:0;} body[data-theme="personal"] .hoved .kort:nth-child(even) .kort-media{order:2;} body[data-theme="personal"] .hoved .kort-media{aspect-ratio:3/2;} /* Andre prosjekt */ /* Kortene her leser som en glipp i et to-spalters rutenett — tom flate ved siden av, mens teksten trenger seg sammen. De får i stedet samme rytme som hovedprosjektene: bilde ved siden av tekst, hvert over hele spalta, med samme luft mellom seg som der. */ /* CV */ .cv{display:grid;grid-template-columns:1fr 1fr;gap:40px;} .cv-bolk h3{margin:0 0 14px;} body[data-theme="personal"] .cv{gap:56px;} body[data-theme="personal"] .cv-bolk h3{margin:0 0 4px;} body[data-theme="personal"] .cv-bolk h3 ~ h3{margin-top:var(--rom-4);} .cv-post{padding:12px 0;} /* CV-en er en ren liste: hvor og hvor lenge. Hva jeg gjorde ligger i et

som åpnes ved klikk eller Enter — tilgjengelig for tastatur og touch, og uten JavaScript. Radene uten beskrivelse er fortsatt vanlige
. */ .cv-post > summary{list-style:none;cursor:pointer;} .cv-post > summary::-webkit-details-marker{display:none;} body[data-theme="personal"] .cv-post{padding:0;border-top:1px solid var(--strek);} body[data-theme="personal"] .cv-post > summary, body[data-theme="personal"] div.cv-post{ display:grid;grid-template-columns:minmax(0,1fr) auto auto; align-items:baseline;gap:0 20px;padding:15px 0; } .cv-post strong{display:block;font-weight:600;font-size:17px;} body[data-theme="personal"] .cv-post strong{ font-weight:500;font-size:var(--t-brod);line-height:1.4;color:var(--blekk); } .cv-post span{display:block;font-size:15px;} body[data-theme="personal"] .cv-post span{text-align:right;white-space:nowrap;} /* Pluss-tegnet er eneste antydning om at raden kan åpnes. Det er også det siste stedet mono brukes: bredden er satt i ch, og et monospace-tegn har en bredde man kan regne med, så tegnet står stille når raden åpnes. */ body[data-theme="personal"] details.cv-post > summary::after{ content:"+";font-family:var(--f-mono);font-size:var(--t-felt);color:var(--damp); width:1ch;text-align:center;transition:color .18s; } body[data-theme="personal"] details.cv-post[open] > summary::after{content:"-";color:var(--damp);} body[data-theme="personal"] .cv-post > summary:hover strong{color:var(--blaa);} body[data-theme="personal"] .cv-post > summary:hover::after{color:var(--damp);} .cv-post p{margin:6px 0 0;font-size:16px;line-height:1.5;} body[data-theme="personal"] .cv-post p{ margin:0;padding:0 0 18px;font-size:var(--t-brod);line-height:var(--lh-brod); color:var(--damp);max-width:44ch; } .stikkord{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;} /* Verktøy har stått begge steder, og dette er runde to. Først lå den nederst i Utdanning-spalta og leste som fyll: h3-en sto på nivå med de to spaltetitlene men lå inni den ene av dem, den var eneste sted i CV-en uten hårlinje, og de sju ordene fylte akkurat nok høyde til at spaltene ble like lange. Da ble den flyttet ut i full bredde. Fullbreddeformen hadde sin egen feil, målt 08.09.2026: etiketten sto på x 168 og lista var høyrestilt 1017 px unna sin egen etikett, som eneste høyrestilte fullbreddelinje på sida, med en venstrekant på 255 som ingenting annet delte. Samtidig sto Utdanning igjen med et hull på ~120 px fordi seks rader møtte tre. Nå er den tilbake i høyre spalte, men som en ekte likemann og ikke som fyll: h3-en er søsken til Utdanning i samme .cv-bolk, så `h3 ~ h3` gir den 48 px luft og den delte overskriftsblokka gir den samme 30 px Instrument Serif som Erfaring og Utdanning. Hårlinja den manglet ligger nå på selve lista. De to første innvendingene er altså løst, og den tredje er snudd: etter at «Andre prosjekt» ble slått sammen med Hovedprosjekter er hullet under Utdanning det som må fylles, ikke unngås. */ body[data-theme="personal"] .stikkord{ display:block;margin:0;text-align:left; border-top:1px solid var(--strek);padding:15px 0 0; } body[data-theme="personal"] .stikkord span{ font-family:var(--f-grot);font-style:normal;font-weight:400; font-size:var(--t-mikro);line-height:var(--lh-etikett); letter-spacing:0;color:var(--damp); } body[data-theme="personal"] .stikkord span::after{content:", ";} body[data-theme="personal"] .stikkord span:nth-last-child(2)::after{content:" og ";} body[data-theme="personal"] .stikkord span:last-child::after{content:none;} /* Logovegg */ .logovegg{display:grid;grid-template-columns:repeat(6,1fr);gap:26px 30px;align-items:center;} .logovegg img{ width:100%;height:44px;object-fit:contain;object-position:center; filter:grayscale(1);opacity:.62;transition:filter .25s, opacity .25s; } .logovegg img:hover{filter:grayscale(0);opacity:1;} body[data-theme="personal"] .logovegg{gap:44px 40px;} body[data-theme="personal"] .logovegg img{height:34px;opacity:.5;} /* Om meg */ .om{display:grid;grid-template-columns:300px 1fr;gap:44px;align-items:start;} .om-portrett{border-radius:2px;overflow:hidden;} /* height:auto er nødvendig. Bildene har width/height i markupen — uten dem er boksen 0 px høy før fila er lastet, og loading="lazy" ser den aldri i vinduet — men attributtene blir presentasjonshint som ellers setter høyden til bildets egen, 1599 og 2133 px. Samme felle som .bildegrid. */ .om-portrett img{width:100%;height:auto;} body[data-theme="personal"] .om{grid-template-columns:250px minmax(0,1fr);gap:56px;} body[data-theme="personal"] .om-portrett{border-radius:3px;} body[data-theme="personal"] .om p{font-size:var(--t-brod);line-height:var(--lh-brod);max-width:52ch;color:var(--brod);margin:0 0 var(--rom-3);} body[data-theme="personal"] .om p:last-child{margin-bottom:0;} .om-smaabilder{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px;} .om-smaabilder img{height:auto;aspect-ratio:1;object-fit:cover;border-radius:2px;} /* Kontakt */ body[data-theme="personal"] .kontakt{padding:76px 0 120px;border-top:1px solid var(--strek);} body[data-theme="personal"] .kontakt h2{ font-family:var(--f-serif);font-weight:400;color:var(--blekk); font-size:var(--t-sitat);line-height:1.24;letter-spacing:-.005em;margin:0 0 var(--rom-2); } body[data-theme="personal"] .kontakt p{font-size:var(--t-lead);line-height:var(--lh-lead);color:var(--damp);margin:0 0 var(--rom-4);max-width:46ch;} body[data-theme="personal"] .kontakt > div{display:flex;flex-wrap:wrap;gap:10px 36px;} body[data-theme="personal"] .kontakt a{ color:var(--blekk);border-bottom:1px solid var(--blekk); padding-bottom:3px;margin:0;font-size:var(--t-brod); } body[data-theme="personal"] .kontakt a:hover{opacity:.55;} /* ========================================================================== TEMA: NRK ========================================================================== */ body[data-theme="nrk"]{background:#EEF3FB;color:var(--nrk-navy);font-family:var(--f-sans);} .nrk-topbar{background:var(--nrk-navy);color:#fff;} .nrk-topbar .row{display:flex;justify-content:center;gap:42px;height:46px;align-items:center;font-size:15px;font-weight:500;} .nrk-topbar a{color:#fff;opacity:.85;} .nrk-topbar a:hover{opacity:1;} .nrk-mainnav{background:var(--nrk-blaa);color:#fff;} .nrk-mainnav .row{display:flex;align-items:center;height:74px;gap:38px;} .nrk-logo{font-family:var(--f-grotesk);font-weight:800;font-size:26px;letter-spacing:-.02em;margin-right:10px;} .nrk-mainnav nav{display:flex;gap:30px;font-weight:700;font-size:18px;} .nrk-mainnav .spacer{flex:1;} .nrk-search{background:#fff;color:var(--nrk-navy);border-radius:100px;padding:9px 20px;font-size:15px;font-weight:600;opacity:.9;} .nrk-ticker{background:#fff;border-bottom:1px solid #dbe4f2;} .nrk-ticker .row{display:flex;align-items:stretch;height:78px;overflow:hidden;} .live-badge{display:flex;align-items:center;padding-right:20px;} .live-dot{width:38px;height:38px;border-radius:50%;background:var(--nrk-navy);display:flex;align-items:center;justify-content:center;} .live-dot::after{content:"";width:14px;height:14px;border-radius:50%;background:#E4322B;animation:blink 1.6s infinite;} @keyframes blink{50%{opacity:.35;}} .tick{flex:1;border-left:1px solid #e4ebf5;padding:12px 22px;min-width:0;} .tick .t-time{font-size:13px;color:#5a6478;font-weight:600;} .tick .t-time b{color:var(--nrk-navy);letter-spacing:.03em;} .tick .t-head{display:block;font-weight:700;font-size:17px;line-height:1.2;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} @media(max-width:860px){.tick:nth-child(n+3){display:none;}} body[data-theme="nrk"] .paastand{ background:var(--nrk-navy);color:#fff;padding:38px 30px;margin:30px 0 8px;border-radius:4px; border-left:6px solid var(--nrk-oransje); } body[data-theme="nrk"] .paastand p{font-family:var(--f-grotesk);font-weight:800;letter-spacing:-.02em; font-size:clamp(24px,3.2vw,38px);line-height:1.14;margin:0;max-width:24ch;} body[data-theme="nrk"] .paastand em{color:var(--nrk-oransje);font-style:normal;} body[data-theme="nrk"] main{padding:26px 0 20px;} body[data-theme="nrk"] .seksjon{padding:34px 0;} body[data-theme="nrk"] .seksjon-tittel{ font-family:var(--f-grotesk);font-weight:800;letter-spacing:-.02em; font-size:clamp(26px,3.4vw,38px);margin:0 0 4px; } body[data-theme="nrk"] .kort{ background:#fff;border-radius:4px;overflow:hidden; box-shadow:0 10px 30px -22px rgba(10,26,47,.5);display:flex;flex-direction:column; transition:transform .18s;color:inherit; } body[data-theme="nrk"] .kort:hover{transform:translateY(-3px);} body[data-theme="nrk"] .kort-media{background:#C9D6EA;overflow:hidden;} body[data-theme="nrk"] .kort-media img{width:100%;height:100%;object-fit:cover;} body[data-theme="nrk"] .kicker{ display:block;color:var(--nrk-navy);opacity:.65;font-weight:700;font-size:12px; letter-spacing:.05em;text-transform:uppercase;padding:0 0 8px; } body[data-theme="nrk"] .kort-body{padding:16px 18px 20px;display:flex;flex-direction:column;flex:1;} body[data-theme="nrk"] .kort-tittel{font-family:var(--f-grotesk);font-weight:800;font-size:26px;line-height:1.02;letter-spacing:-.02em;margin:0 0 10px;} body[data-theme="nrk"] .kort-blurb{font-size:15.5px;line-height:1.45;color:#33415c;margin:0 0 14px;} body[data-theme="nrk"] .kort-meta{margin-top:auto;font-size:13px;font-weight:600;color:var(--nrk-blaa);} body[data-theme="nrk"] .hoved{grid-template-columns:repeat(2,1fr);gap:24px;} body[data-theme="nrk"] .hoved .kort-media{aspect-ratio:16/9;} body[data-theme="nrk"] .hoved .kort:first-child{grid-column:1 / -1;} body[data-theme="nrk"] .hoved .kort:first-child .kort-media{aspect-ratio:16/6;} body[data-theme="nrk"] .hoved .kort:first-child .kort-tittel{font-size:clamp(32px,5vw,58px);} body[data-theme="nrk"] .hoved .kort:first-child .kort-blurb{font-size:19px;max-width:58ch;} body[data-theme="nrk"] .cv, body[data-theme="nrk"] .om, body[data-theme="nrk"] .logovegg-boks{background:#fff;border-radius:6px;padding:36px;} body[data-theme="nrk"] .cv-bolk h3{font-family:var(--f-grotesk);font-weight:800;font-size:22px;letter-spacing:-.01em;} body[data-theme="nrk"] .cv-post{border-top:2px solid #EAF2FC;} /* CV-radene ble
da beskrivelsene ble flyttet bak et klikk. NRK trenger bare en synlig indikator på at raden kan åpnes. */ body[data-theme="nrk"] details.cv-post > summary::after{content:"+";color:var(--nrk-blaa);font-weight:700;margin-left:8px;} body[data-theme="nrk"] details.cv-post[open] > summary::after{content:"–";} body[data-theme="nrk"] .cv-post span{color:#5a6478;font-weight:600;} body[data-theme="nrk"] .cv-post p{color:#33415c;} body[data-theme="nrk"] .stikkord span{background:#EAF2FC;color:var(--nrk-blaa);font-weight:600;font-size:14px;padding:6px 13px;border-radius:100px;} body[data-theme="nrk"] .om p{font-size:17px;line-height:1.6;color:#22314d;max-width:60ch;} body[data-theme="nrk"] .kontakt{background:var(--nrk-navy);color:#fff;border-radius:6px;padding:52px 40px;text-align:center;margin-bottom:60px;} body[data-theme="nrk"] .kontakt h2{font-family:var(--f-grotesk);font-weight:800;font-size:clamp(30px,4vw,42px);margin:0 0 14px;letter-spacing:-.02em;} body[data-theme="nrk"] .kontakt p{color:#B9C6E0;font-size:18px;margin:0 0 26px;} body[data-theme="nrk"] .kontakt a{display:inline-block;background:#fff;color:var(--nrk-navy);font-weight:700;padding:13px 24px;border-radius:100px;margin:0 7px 10px;} /* ========================================================================== PROSJEKTPALETTENE Hver prosjektside har sin egen fargeverden, målt fra prosjektets egne bilder: 96 × 96 nedskalering, nøytrale piksler forkastet, og de kromatiske lagt i et histogram på 36 fargetoner vektet etter metning. Oppskriften er den samme for alle, bare tallene er prosjektets egne. Det er dette som gjør at sidene henger sammen samtidig som de er ulike: verdistrukturen og kontrastforholdet er likt overalt, og det er bare kuløren og hvor lys og mettet den er som flytter seg. Én tvungen avvikelse: gult kan ikke bli en mørk aksent. Enhver farge på 55° som er mørk nok til 4,5:1 mot lyst papir er ikke lenger gul, den er oliven, og de fire gule prosjektene fikk aksenter som skilte seg med 2 av 255. Der hovedkuløren ligger i det gule beltet henter aksenten prosjektets egen sekundærkulør i stedet. Fortsatt målt, bare hentet fra nummer to. Alt er scopet til personal-temaet, så NRK henter sine egne farger uansett hvilken prosjektside man står på. ========================================================================== */ body[data-theme="personal"][data-prosjekt="dugnadsand"]{ /* 55° gull, sekundært 205° blått. Metning 0,49, lyshet 0,44. */ --papir:#F1EDC3; --strek:#DAD7B5; --aksent:#23597F; --brod:#37362A; --blekk:#1E1D15; } /* tre-parter.png og tre-faser.png har gjennomsiktig bunn i stedet for hvit, så figurene skal smelte inn i prosjektets eget papir — ikke stå på det globale, prosjekt-uavhengige skjerm-nesten-hvitet under. */ body[data-theme="personal"][data-prosjekt="dugnadsand"] .bildegrid.skjerm img{ background:var(--papir); } body[data-theme="personal"][data-prosjekt="saksblikk"]{ /* 55° blek gul, sekundært 155° grønt. Metning 0,53, lyshet 0,62. */ --papir:#FFFDE4; --strek:#F1EECD; --aksent:#227F58; --brod:#37362A; --blekk:#1E1D15; } body[data-theme="personal"][data-prosjekt="reliable-ai"]{ /* 45° krem, sekundært 235° blått. Metning 0,86, lyshet 0,80. */ --papir:#FFFBED; --strek:#FAEFCD; --aksent:#1A2381; --brod:#37342A; --blekk:#1E1C15; } body[data-theme="personal"][data-prosjekt="milanosport"]{ /* 213° blått. Metning 0,41, lyshet 0,53. Eneste kalde prosjekt. */ --papir:#D7E6F9; --strek:#C5D4E6; --aksent:#254D7E; --brod:#2A3037; --blekk:#15191E; } body[data-theme="personal"][data-prosjekt="unge-asylsokere"]{ /* 35° oker. Metning 0,47, lyshet 0,49. */ --papir:#F7E7CF; --strek:#E3D4BF; --aksent:#7F5924; --brod:#37312A; --blekk:#1E1A15; } body[data-theme="personal"][data-prosjekt="personlige"]{ /* 25° rosebrun, den minst mettede av de varme. Metning 0,39, lyshet 0,57. */ --papir:#FBEADF; --strek:#EAD8CB; --aksent:#7E4B26; --brod:#372F2A; --blekk:#1E1915; } /* ========================================================================== PROSJEKTSIDER Oppsettet har to vertikaler, se rutenettet på :root. Sidekanten 168 er bildenes; tekstkanten 356 er all teksts. Bildene er ikke lenger underordnet teksten i bredde — de er den brede av de to, og det er vekslingen mellom 446, 916 og 1104 som gir sida rytme. Bredden velges ikke fritt, den koder innholdet: foto og skjermbilde 916, sidas anker 1104, stående foto og mobilskjerm 446. To ting som ellers lett sklir ut: alle marger skal komme fra --rom-stigen, og ingenting i personal-temaet midtstilles. ========================================================================== */ .brodsmule{font-size:15px;padding:26px 0 0;} /* Brødsmulen bor i toppstripa nå, så sida starter på kickeren og tittelen i stedet for på en navigasjonslenke. Paddingen hørte til da den sto i spalta. Merk: .hdr-personal er display:none i NRK, så NRK har ingen brødsmule lenger. Det er avklart — NRK-visningen skal legges om separat. */ /* Egen linje under ordmerket, venstrestilt. Tilbake hører hjemme oppe til venstre; høyrestilt lot den seg ikke finne. flex-basis:100% tvinger den ned på sin egen rad i toppstripa, som ellers er space-between. */ /* På samme linje som ordmerket. flex-basis:100% tvang den ned på egen rad, og da sto det to elementer på hver sin linje på 28 rett over en tittel på 68 — tre kanter i et lite område. Toppstripa er space-between, så uten flex-basis havner pila til høyre av seg selv. NRK har sin egen brødsmule-form pinnet lenger nede. */ body[data-theme="personal"] .hdr-personal .brodsmule{ padding:0;margin:0;flex-basis:auto;align-self:baseline; } body[data-theme="personal"] .brodsmule a{color:var(--blekk);} body[data-theme="nrk"] .brodsmule{color:#5a6478;font-weight:600;} body[data-theme="nrk"] .brodsmule a{color:var(--nrk-blaa);} /* Et avsnitt som står løst i spalta, utenfor en bolk. Samlingssida har ett: inngangssetningen over delprosjektene. Uten denne faller det ned på nettleserens 16 px, som ikke er et trinn i skalaen. */ body[data-theme="personal"] main .wrap > p{ font-size:var(--t-brod);line-height:var(--lh-brod); color:var(--brod);max-width:56ch;margin:0 0 var(--rom-4); } /* -------------------------------------------------------------------------- RUTENETTET — to uavhengige, etter Bleed Målt på bleed.com/work/historisk-museum og /naturhistorisk-museum, 1440 px. Tallene er identiske på begge, så dette er systemet og ikke en tilfeldighet. Bleed kjører TO rutenett som ikke flukter noe sted: tekst 3 spalter, innrykket 50, renne 20 50 | 512 | 974 → 1390 bilde 5 spalter, kant til kant, gap 2 2 | 289 | 576 | 863 | 1150 → 1438 Hos oss, med Ingrids valgte tekstbredde 1304: bilde 5 spalter, marg 28, gap 4 28 | 306 | 583 | 861 | 1138 → 1412 tekst 3 spalter, innrykket 40 til, renne 24 68 | 511 | 953 → 1372 HVORFOR TO RUTENETT OG IKKE ETT. Forrige runde ga én tekstkant på 356 som ingenting annet på sida brukte, og en figurkant på 1084 mot tekstens 990. 94 px fra hverandre leser ikke som to systemer, det leser som en mislykket justering. Her er nærmeste par mellom de to rutenettene 40 px, og de deler ingen linjer i det hele tatt. Forskjellen skal være tydelig, ikke nesten. Og teksten flyter ikke lenger, fordi alle tre tekstspaltene er i bruk: overskrifta står i 1, brødteksten i 2, nøkkelinfo og et stående bilde i 3. Midtspalta leser da som ett spor av tre. Bredden er scopet med [data-prosjekt], som bare prosjektsidene har. Forsida beholder --maxw:1160 og den målte collage-geometrien sin. -------------------------------------------------------------------------- */ body[data-theme="personal"][data-prosjekt] main .wrap{ max-width:1440px;padding:0 28px; display:grid;grid-template-columns:repeat(4,1fr); column-gap:var(--bildegap);row-gap:var(--rom-4);align-content:start; } /* Bolkene arver de fem bildespaltene, så figurer inne i dem kan pakke seg i rader med span. display:grid må stå her: den delte .case-seksjon-regelen lenger nede setter display:block, og uten at denne veier tyngre engasjeres subgriden aldri. display:contents duger ikke — hårstreken trenger en boks. */ body[data-theme="personal"][data-prosjekt] main .wrap :is(.case-seksjon,.delprosjekt,.underdel){ grid-column:1 / -1;display:grid;grid-template-columns:subgrid; /* Alle rader i en bolk deler én row-gap. Den er 48 for ALT, og bildene får sine 4 px inne i .bilderad. Sto den på 4 her, måtte teksten hente luften sin fra marger som la seg oppå — det ga elleve ulike avstander. */ column-gap:var(--bildegap);row-gap:var(--rom-4);align-items:start; } /* Standard for alt som ikke er en figur: hele bredden. Uten denne faller et uplassert barn i auto-plassering og blir 274 px bredt — én bildespalte. Figurreglene under har samme vekt (0,3,2) og vinner på rekkefølge, så denne MÅ stå først. */ body[data-theme="personal"][data-prosjekt] main .wrap > *, body[data-theme="personal"][data-prosjekt] main .wrap :is(.case-seksjon,.delprosjekt,.underdel) > *{ grid-column:1 / -1; } /* TEKSTBLOKKA. All prosa bor her, aldri i bilderutenettet. De 40 pikslene padding er det som gir tekstkanten 68 mot bildekanten 28. */ .tekstblokk{display:grid;gap:var(--rom-3) 24px;} body[data-theme="personal"][data-prosjekt] main .wrap .tekstblokk{ /* Ingen egne marger. All luft mellom blokker kommer fra bolkens row-gap. Før la disse margene seg oppå row-gap og bolkens padding, og sida fikk elleve ulike avstander mellom naboblokker. */ grid-column:1 / -1;margin:0; grid-template-columns:repeat(3,1fr); column-gap:24px;padding:0 40px;align-items:start; } /* Spalte 1 introduserer, spalte 2 forteller, spalte 3 henger på. Standard for et barn uten klasse er spalte 2 — brødteksten er det vanlige. */ body[data-theme="personal"][data-prosjekt] main .wrap .tekstblokk > *{grid-column:2;} body[data-theme="personal"][data-prosjekt] main .wrap .tekstblokk > .sp1{grid-column:1;} body[data-theme="personal"][data-prosjekt] main .wrap .tekstblokk > .sp3{grid-column:3;} body[data-theme="personal"][data-prosjekt] main .wrap .tekstblokk > .sp23{grid-column:2 / -1;} body[data-theme="personal"][data-prosjekt] main .wrap .tekstblokk > .sp-alle{grid-column:1 / -1;} /* FIGURENE i bilderutenettet. Bredden er et spenn, ikke en px-verdi, så en figur kan ikke lenger havne på en bredde som ikke er en spaltelinje. Radene skal fylles helt: 5, 3+2, 2+3, 2+1+2, 4+1. */ /* Tillatte rader, alle summerer til 4: 4 | 2+2 | 2+1+1 | 1+1+1+1. Liggende foto og skjermbilde -> span 2, stående foto -> span 1, sidas anker og alt som skal leses -> hele bredden. */ body[data-theme="personal"][data-prosjekt] main .wrap :is(.figur,.video,.mockup,.case-hero,.plakat){ grid-column:span 4; } body[data-theme="personal"][data-prosjekt] main .wrap .figur.sp1{grid-column:span 1;} body[data-theme="personal"][data-prosjekt] main .wrap .figur.sp2{grid-column:span 2;} /* NRK ser .tekstblokk også. Uten dette arver den personal-rutenettet og legger de tre spaltene oppå hverandre. Samme grep som .rutenett trengte. */ body[data-theme="nrk"] .tekstblokk{display:block;padding:0;} .case-topp{padding:14px 0 var(--rom-3);max-width:900px;} /* Før sto det --rom-5 her og --rom-4 på brødsmulen. Til sammen ga det 128 px tom flate mellom tilbakelenken og kickeren, og rundt 260 px fra toppen av vinduet ned til tittelen. */ body[data-theme="personal"] .case-topp{ padding:var(--rom-3) 0 var(--rom-4); /* Ingen boksbredde. Tittelen og ingressen har hvert sitt lesemål, og med én venstrekant er det lesemålet som skal sette høyrekanten, ikke en boks ingen ser. Den delte .case-topp{max-width:900px} er NRKs og røres ikke. */ width:auto;max-width:100%; } .case-tittel{margin:0 0 14px;} body[data-theme="personal"] .case-tittel{ font-family:var(--f-serif);font-weight:400;color:var(--blekk); font-size:var(--t-tittel);line-height:var(--lh-display);letter-spacing:-.015em; margin:0 0 var(--rom-3); } body[data-theme="nrk"] .case-tittel{font-family:var(--f-grotesk);font-weight:800;letter-spacing:-.025em;font-size:clamp(36px,6vw,72px);line-height:.98;} /* Ingressen er undertittelen til prosjekttittelen, og ligger ett trinn over brødteksten. Den sto på 24, tre trinn over, og leste da som for stor ved siden av alt annet på sida. */ .case-ingress{margin:0 0 20px;} body[data-theme="personal"] .case-ingress{ font-size:var(--t-ingress);line-height:var(--lh-ingress);letter-spacing:-.012em; color:var(--brod);max-width:38ch;margin:0; } body[data-theme="nrk"] .case-ingress{font-size:20px;line-height:1.45;color:#22314d;max-width:60ch;} /* -------------------------------------------------------------------------- TOPPBILDET Fra 08.09.2026 lå her .rutenett: fire fliser 2 x 2 à 544 px. Det løste at ett bilde ikke bar hele inngangen, men fire like fliser leser som miniatyrer, ikke som en inngang. Nå to former, begge i full bredde: .par to bilder i ett asymmetrisk oppslag — hovedmotivet på spalte 1 til 8 (728 px), et stående ved siden på 9 til 12 (352 px), begge 560 px høye med cover. Det er skalaforskjellen mellom de to som gjør oppslaget til en inngang og ikke til et rutenett. .plansje ett lysbilde eller skjermbilde over hele 1104, contain på papirbunn, uten høydetak. En 16:9-plansje i et asymmetrisk par ville fått luftlommer på begge sider av begge bildene. Formen følger innholdet, ikke smaken: foto får .par, plansje får .plansje. Bland dem aldri — cover kutter topplinja på en plansje, og contain gir luftlommer rundt et foto. .staaende og .skjerm står igjen fordi NRK-blokka lenger nede bruker dem. -------------------------------------------------------------------------- */ .case-hero{margin:14px 0 var(--rom-4);border-radius:3px;overflow:hidden;} body[data-theme="personal"] .case-hero{margin:0 0 var(--rom-5);} .case-hero img{width:100%;height:auto;max-height:min(52vh,460px);object-fit:cover;object-position:center;} body[data-theme="personal"] .case-hero.staaende img{max-height:min(58vh,520px);} /* Det asymmetriske paret. Rutenettformen står utenfor temascopet — uten den ville de to bildene lagt seg oppå hverandre i full bredde i NRK — men spaltelinjene er personal, for det er bare der .wrap er et rutenett. Radiusen flyttes fra beholderen til hvert bilde, ellers runder den bare de to ytterste hjørnene av oppslaget. */ .case-hero.par{border-radius:0;overflow:visible;display:grid;gap:var(--bildegap);} /* 3 + 2 av de fem bildespaltene, altså 825 + 551. Samme rad som hos Bleed. */ body[data-theme="personal"][data-prosjekt] .case-hero.par{grid-template-columns:subgrid;} body[data-theme="personal"][data-prosjekt] .case-hero.par > img:first-child{grid-column:span 3;} body[data-theme="personal"][data-prosjekt] .case-hero.par > img:last-child{grid-column:span 2;} /* NRK har ikke spaltelinjene og trenger sin egen form, som .rutenett gjorde. */ body[data-theme="nrk"] .case-hero.par{grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px;} .case-hero.par img{ width:100%;height:560px;max-height:none;border-radius:3px; object-fit:cover;object-position:center; } body[data-theme="nrk"] .case-hero.par img{height:min(56vh,520px);} /* Et bilde der motivet sitter i toppen av kilden og ikke i midten. Saksblikks sok.jpg er 1130 x 1600, og et utsnitt skåret fra midten kutter nettopp de grensesnittkomponentene bildet handler om. */ .case-hero.par img.topp{object-position:top;} /* Én plansje over hele bredden. */ .case-hero.plansje{border-radius:0;overflow:visible;} .case-hero.plansje img{ width:100%;height:auto;max-height:none;border-radius:3px; object-fit:contain;background:#F4F1EA; } body[data-theme="nrk"] .case-hero.plansje img{background:#DCE6F5;} /* Et lysbilde som toppbilde. En plansje tåler ikke .bred: cover ville skåret den ned til en 1392 x 460 stripe og kuttet både topplinja og kolofonen, og jo bredere vinduet blir, jo mer forsvinner. .skjerm legger den derfor i figurspalta som .staaende gjør, og setter bildet helt inn. Den blir stående på 828 px også i NRK: 16:9 i full utbryterbredde er 878 px høyt og ville dyttet all tekst under folden. */ .case-hero.skjerm img{max-height:none;object-fit:contain;background:#F4F1EA;} /* Havner en .bred likevel inne i tekstspalta, skal den bare fylle spalta. Utbryteren sentrerer mot forelderen sin, og en spalte er ikke sentrert på sida: uten denne bremsen ville bildet stått skjevt ut mot høyre. */ .case-innhold .bred{position:static;width:auto;left:auto;transform:none;} /* Bred utbryter. Nå brukt ett sted: .case-hero uten .staaende. Elementet må spenne hele bredden på forelderen sin, for da er den omsluttende blokken like bred som den sentrerte .wrap, og sentreringen stemmer. Forskyvningen ligger i left/transform, ikke i margin: temaets egne margin-regler er mer spesifikke og ville nullet en margin-løsning ut. min() framfor rene 100vw: da dukker det aldri opp et vannrett rullefelt. */ .bred{ position:relative; width:min(1560px, calc(100vw - 48px)); left:50%; transform:translateX(-50%); } body[data-theme="personal"] .case-hero.staaende.bred{position:static;left:auto;transform:none;} /* .case-lead er borte. Den var en undertittel på 24 px under hver Designkontekst-overskrift, altså det tredje sammendraget etter kicker og ingress. Første avsnitt er vanlig brødtekst nå. --t-lead lever videre som 22-trinnet: ingressen og underoverskriftene. */ /* -------------------------------------------------------------------------- Prosesseksjoner. Etikettspalta til venstre, innholdsspalta til høyre. Alt innhold — også bilder — ligger i den høyre spalta, så sida har én venstrekant. Det var nettopp dette som manglet før: bildene brøt ut til 1392 px mens teksten begynte 370 px lenger inn. -------------------------------------------------------------------------- */ .case-seksjon{margin:0 0 52px;} .case-seksjon h2{margin:0 0 12px;} /* Én spalte. Etikettspalta i margen sto som en overskrift, samtidig som underoverskriften inne i bolken var en overskrift til: to systemer i samme blokk. Nå står overskriften over innholdet sitt, og hele sida deler én venstrekant. Hårstreken over markerer skiftet der etiketten gjorde det før, og er samme strek som står over nøkkelinfoen og mellom bolkene på forsida. */ body[data-theme="personal"] .case-seksjon{ display:block;margin:0; border-top:1px solid var(--strek);padding-top:var(--rom-6); } body[data-theme="personal"] .case-seksjon > h2, body[data-theme="personal"] .case-seksjon .tekstblokk > h2{margin:0 0 var(--rom-3);} body[data-theme="nrk"] .case-seksjon h2{font-family:var(--f-grotesk);font-weight:800;letter-spacing:-.02em;font-size:clamp(24px,3vw,32px);} .case-seksjon p{margin:0 0 16px;} body[data-theme="personal"] .case-seksjon p{font-size:var(--t-brod);line-height:var(--lh-brod);color:var(--brod);max-width:56ch;margin:0 0 var(--rom-2);} body[data-theme="nrk"] .case-seksjon p{font-size:17px;line-height:1.6;color:#22314d;max-width:64ch;} /* Telleren, videoteksten og metodelinja er

inne i .case-seksjon. Avsnittsregelen der veier tyngre enn en ren klasse og står senere i fila, så den vant. De må derfor gjentas her, etter den, med taggen med. */ body[data-theme="personal"] .case-seksjon p.video-tekst, body[data-theme="personal"] .case-seksjon figcaption{ font-family:var(--f-grot);font-size:var(--t-mikro); line-height:var(--lh-etikett);letter-spacing:0; color:var(--damp); } /* «Fyll inn» er en notis til Ingrid, ikke publisert tekst. Som

inne i en bolk taper klassen mot avsnittsregelen, og notisen ble stående i brødtekstfarge. Den skal leses som en marg, ikke som innhold. */ body[data-theme="personal"] .case-seksjon p.fyll-inn{ color:var(--damp);max-width:52ch;margin:var(--rom-2) 0 0; } /* -------------------------------------------------------------------------- UNDERDEL Prosess og Resultat holder ofte flere blokker. Uten et trinn under seksjonsoverskriften blir de én vegg, og det var nettopp det som gjorde dugnadsånden til seks likestilte bolker. Underoverskriften er brødtekstens egen grad i vekt 500: den skal skille seg fra avsnittet, ikke fra seksjonsoverskriften på 30. -------------------------------------------------------------------------- */ .underdel{margin:34px 0 0;} .underdel > h3{margin:0 0 12px;} /* display:block, ikke grid. Rutenettblokka lenger oppe gir .underdel display:grid og grid-template-columns:subgrid, men .case-seksjon settes tilbake til display:block av regelen rett over her — den står senere i fila og vinner. Uten en rutenettforelder blir subgrid til automatiske spalter, og underdelens innhold la seg 156 px inn på sida i stedet for å flukte med avsnittene rundt. Blir .case-seksjon et rutenett igjen, skal denne linja fjernes sammen med det. */ body[data-theme="personal"] .underdel{margin:var(--rom-4) 0 0;display:block;} /* 22, ikke 18. Underoverskriften sto i nøyaktig samme grad som avsnittet under seg og skilte seg bare på vekt — altså et hull i hierarkiet mellom seksjonsoverskriften på 30 og brødteksten på 18. Den deler grad med ingressen og skiller seg fra den på vekt. */ body[data-theme="personal"] .underdel > h3, body[data-theme="personal"] .tekstblokk > h3{ font-family:var(--f-grot);font-weight:500;font-size:var(--t-lead); line-height:1.25;letter-spacing:-.008em;color:var(--blekk); margin:0 0 var(--rom-2); } body[data-theme="nrk"] .underdel > h3, body[data-theme="nrk"] .tekstblokk > h3{ font-family:var(--f-grotesk);font-weight:800;font-size:22px; letter-spacing:-.02em;color:var(--nrk-navy); } /* Første underdel står rett under overskriften, som alt har sin margin under. De neste trenger luften. */ body[data-theme="personal"] .case-seksjon > h2 + .underdel{margin-top:0;} /* -------------------------------------------------------------------------- KOLOFONSTRIPA Sto før som en bunnbolk, .case-fakta, på 835 px ved 1440 px vindu, etter at prosjektet var vist. Nå et bånd rett under toppbildet, ~150 px, fordi det er der leseren spør «hvem har gjort dette, og sammen med hvem». Det som gjør båndet kort er at etiketten står OVER verdien og ikke ved siden av: fire felt får plass på én linje i innholdsspalta, og de brekker av seg selv når vinduet krymper. Metoder og leveranse er tatt ut — de sto som to lange lister og var det som gjorde bolken høy, og prosaseksjonene dekker dem allerede. -------------------------------------------------------------------------- */ .case-kreditt{margin:0 0 var(--rom-5);} /* Nøkkelinfoen er ikke lenger et bånd under toppbildet, men railen til venstre. Den står stille mens innholdet scroller, så den er lesbar hele veien ned: hvem som gjorde det, med hvilke metoder og sammen med hvem. Ingen hårstrek og ingen egen bredde — railen ER kolonnen. */ /* Et lavt bånd under toppbildet, ikke et sidefelt. Nøkkelinfo er noe man leser én gang og går videre fra, og et sidefelt som står framme hele veien ned gir den en oppmerksomhet den ikke skal ha. Sto den til venstre, tok den dessuten lesestartposisjonen fra tittelen; sto den til høyre, leste den som noe man ikke visste hva var. */ /* Ingen hårstreker. To streker rundt metadataen leser som en ramme rundt noe som ikke trenger ramme, og Bleed har ingen. Blokken skiller seg fra det over og under på luft alene. */ body[data-theme="personal"] .case-kreditt{ border:0;padding:0;margin:0;width:auto; } /* Delt: bare stabelen. Formen på hver rad settes per tema, for de to vil ha hver sin — personal har etiketten ved siden av verdien, NRK over den. */ .kreditt-felt{ margin:0;display:grid;gap:var(--rom-3) var(--rom-4);align-items:start; } body[data-theme="nrk"] .kreditt-felt{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));} .kreditt-felt > div{min-width:0;} .kreditt-felt dt{margin:0 0 5px;} .kreditt-felt dd{ margin:0;font-size:var(--t-brod);line-height:var(--lh-brod); color:var(--brod);min-width:0; } /* I railen står etiketten over verdien: 240 px er for smalt til to spalter, og en rail leses nedover, ikke bortover. Verdiene er mikrograd og ikke brødtekst — de står på skjermen hele veien ned og skal kunne leses uten å rope. Som brødtekst på 18 var de sidas største undertittel. */ /* Fire korte spalter på én til to linjer hver. minmax(240px) gir fire ved 1440 og bryter av seg selv når vinduet krymper. */ body[data-theme="personal"] .kreditt-felt{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--rom-3) var(--rom-4); } body[data-theme="personal"] .kreditt-felt > div{display:block;} /* Etikett og verdi i samme skrift, grad og vekt. De skilles på farge alene. Før runde 2 skilte de seg på BÅDE vekt og farge, og det var én forskjell for mye; i runde 2 sto de i IBM Plex Mono, som var en tredje skrift ingen andre steder på sida brukte. Prosjektsidene har to skrifter: Instrument Serif på 30/40/62 og Inter på 15/18/22. --f-mono står igjen definert i :root for pluss-tegnet i CV-en på forsida, men ingen prosjektside rører den. */ body[data-theme="personal"] .kreditt-felt dt{ font-family:var(--f-grot);font-weight:400;font-size:var(--t-mikro); line-height:1.5;letter-spacing:0;color:var(--damp);margin:0 0 3px; } body[data-theme="personal"] .kreditt-felt dd{ font-family:var(--f-grot);font-weight:400;font-size:var(--t-mikro); line-height:1.5;color:var(--blekk);max-width:none; } /* «Fyll inn» er en notis til Ingrid, ikke publisert tekst. Som full boks er den 185 px høy og tredobler stripa helt alene. Her er den strippet til en merket linje: fortsatt umulig å overse, men den bærer ikke lenger raden. */ .case-kreditt .fyll-inn{ margin:8px 0 0;padding:0 0 0 11px;background:none;border:0; border-left:2px solid #E0A020;border-radius:0; font-size:var(--t-mikro);line-height:1.45;color:var(--damp);max-width:none; } body[data-theme="personal"] .case-kreditt .fyll-inn strong{ font-size:var(--t-mikro);margin-bottom:1px;color:#8a6a12; } /* -------------------------------------------------------------------------- FIGURSKALAEN Tre trinn, alle smalere enn innholdsspalta eller like brede som den. Høydetaket betyr like mye som bredden: et stående bilde i en 640 px spalte blir 853 px høyt uten tak, og det er nettopp den veggen som gjorde sidene tunge. -------------------------------------------------------------------------- */ .figur{margin:var(--rom-4) 0 0;} .figur > img{width:100%;height:auto;border-radius:3px;cursor:zoom-in;background:#EDE7DA;object-fit:cover;object-position:center;} /* HØYDEN SETTES AV RADEN, IKKE AV BILDET. Hos Bleed har alle bildene i én rad nøyaktig samme høyde, og bredden varierer med spennet — en 2-spalters og en 3-spalters ved siden av hverandre er like høye. Derfor en fast figurhøyde som bildet fyller med cover, ikke et max-height per bilde. Figurer som deler rad får da lik høyde helt av seg selv. */ /* Høyden står på BILDET, ikke på figuren. Med den på figuren ville bildeteksten spist av bildehøyden, og to figurer i samme rad der bare den ene har bildetekst ville fått ulik bildehøyde og brutt underkanten. Nå flukter alle bildene i en rad, og bildetekstene henger under. */ /* RADHØYDEN ER VALGT UT FRA FORHOLDET, IKKE OMVENDT. Fire spalter à 343 px med gap 4: span 1 343 x 500 -> 0,686 Bleed bruker 0,700 span 2 690 x 500 -> 1,380 Bleed bruker 1,368 span 4 1384 x 780 -> 1,774 Bleed bruker 1,778 Det er derfor 500 og 780 og ikke runde tall. Span 3 finnes ikke: den blir 2,07 ved 500 og tvinger makkeren sin ned på 0,44 ved 780. Begge veier havner noe i brevsprekken, og Bleed bruker aldri de forholdene. */ body[data-theme="personal"][data-prosjekt] .figur > img{ height:var(--radhoyde,500px);width:100%;object-fit:cover;max-height:none; } /* En figur uten spennklasse fyller alle fire spaltene, og da er 500 px forholdet 2,77 — brevsprekk. Full bredde får derfor 780 automatisk, i stedet for at man må huske .hoy. Det var nettopp det jeg glemte på skjermbildet i Resultat. */ body[data-theme="personal"][data-prosjekt] .figur:not(.sp1):not(.sp2) > img, body[data-theme="personal"][data-prosjekt] .figur.hoy > img{--radhoyde:780px;} /* Skjermbilder og plansjer skal leses, ikke beskjæres. */ .figur.skjerm > img{object-fit:contain;background:#F4F1EA;} body[data-theme="nrk"] .figur{width:auto;} body[data-theme="nrk"] .figur > img{background:#C9D6EA;max-height:none;} body[data-theme="nrk"] .figur.skjerm > img{background:#DCE6F5;} /* Bredden var valgt fritt, og de to tallene sa derfor ingenting: dugnadsånden hadde plansjer på 640 rett over en plansje på 828, saksblikk en video på 640 mellom mockup og kontaktark på 828. Nå bærer bredden innholdet: foto 640, skjerm og plansje 828 fordi de skal leses, plakat 400. .video er en delt regel og rettes derfor her, personal-scopet, ikke på stedet. */ /* .video står ikke her. body[data-theme="personal"] .video lenger nede i fila har lik spesifisitet og vinner på rekkefølge, så videoen rettes der. */ /* NRK. Stripa er ny markup og treffer begge temaer, så den trenger sin egen form her — ellers arver den personal-temaets hårlinjer og grader. */ body[data-theme="nrk"] .case-kreditt{ border-top:1px solid #D7E0EE;border-bottom:1px solid #D7E0EE; padding:22px 0;margin:0 0 34px; } body[data-theme="nrk"] .kreditt-felt dt{ font-family:var(--f-grotesk);font-weight:800;font-size:14px; letter-spacing:-.01em;color:var(--nrk-navy);margin:0 0 4px; } body[data-theme="nrk"] .kreditt-felt dd{font-size:15px;line-height:1.5;color:#33415c;} /* Bildefeltene har hvert sitt bevisste format i stedet for én felles makshøyde. Rutenettet står igjen for par av foto og for NRK-temaet; settene har fått kontaktarket og karusellen i stedet. */ .bildegrid{display:grid;gap:var(--rom-2);margin:var(--rom-4) 0 0;} /* Antall spalter */ .bildegrid.en{grid-template-columns:1fr;} .bildegrid.to{grid-template-columns:repeat(2,1fr);} .bildegrid.tre{grid-template-columns:repeat(3,1fr);} .bildegrid.fire{grid-template-columns:repeat(4,1fr);} .bildegrid.mobil{grid-template-columns:repeat(auto-fit,minmax(0,220px));justify-content:start;} .bildegrid figure{margin:0;min-width:0;} /* height:auto er nødvendig: bildene har width/height i markupen, og de attributtene blir presentasjonshint som ellers slår ut aspect-ratio. */ .bildegrid img{ width:100%;height:auto;border-radius:3px;cursor:zoom-in;background:#EDE7DA; object-fit:cover;object-position:top; } /* Format på feltet. Standard er en liggende beskjæring; .fri holdes utenfor med vilje, for der skal nettleserens eget forhold fra width/height i markupen få gjelde. */ .bildegrid:not(.fri):not(.skjerm):not(.mobil) img{aspect-ratio:4/3;} /* Ett bilde alene over hele bredden blir for høyt i 4:3. */ .bildegrid.en:not(.fri):not(.skjerm):not(.mobil) img{aspect-ratio:16/9;} .bildegrid.portrett img{aspect-ratio:3/4;object-position:center;} /* Fritt format: ingen beskjæring, bare en øvre høyde. For bilder der en beskjæring ville spist innhold. Høyden er bestemt, bredden følger av bildets eget format. Da har boksen en størrelse før fila er lastet: med både bredde og høyde satt til auto blir et bilde 0 px, loading="lazy" ser det aldri i vinduet, og det lastes aldri. */ .bildegrid.fri img{ height:auto;max-height:420px;width:auto;max-width:100%;object-fit:contain; } .bildegrid.fri figure{display:flex;flex-direction:column;align-items:flex-start;} /* Skjermbilder og slides må leses, ikke beskjæres. */ .bildegrid.skjerm{gap:var(--rom-3);} .bildegrid.skjerm img{aspect-ratio:16/9;object-fit:contain;background:#F4F1EA;} .bildegrid.mobil img{aspect-ratio:9/19.5;object-fit:contain;background:#F4F1EA;} body[data-theme="nrk"] .bildegrid{width:auto;} body[data-theme="nrk"] .bildegrid.fri img{max-height:520px;} body[data-theme="nrk"] .bildegrid img{background:#C9D6EA;} body[data-theme="nrk"] .bildegrid.skjerm img, body[data-theme="nrk"] .bildegrid.mobil img{background:#DCE6F5;} /* -------------------------------------------------------------------------- OPPTELLING Fire linjer som sier hva som faktisk ble gjort: tallet først, hva det var etter. Grepet er hentet fra plansjen i diplomen, men ikke formen — der står tallene i fet, skrå sans på svart, og sida har ett display-snitt og svart skrift på prosjektets eget papir. Tallet står i sitatgraden og ikke i tittelgraden. Sitatgraden finnes alt på sida; tittelgraden ville satt fire nye elementer like tunge som prosjekttittelen midt inne i Prosess. Tallene er høyrestilt mot én akse, så 13 ikke skyver de tre ensifrede ut av linje, og etikettene deler venstrekant med hverandre. Grunnlinja er felles: uten den henger etiketten i toppen av et 40 px høyt tall. -------------------------------------------------------------------------- */ /* Aksen bor på lista, ikke på raden. Hver

  • var et eget rutenett, og da fikk hver rad sin egen tallkolonne: 13 ble bredere enn 2, og de fire tallene sto usikret mot hverandre. Kolonnene settes derfor på
      , og radene henter dem med subgrid. Uten subgrid faller raden tilbake på sin egen fordeling, som er den vi hadde — tallet står fortsatt til venstre for etiketten. */ .opptelling{ list-style:none;margin:var(--rom-4) 0 0;padding:0; display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--rom-2); } .opptelling li{ display:grid;grid-column:1/-1;align-items:baseline; grid-template-columns:auto minmax(0,1fr); grid-template-columns:subgrid; } .opptelling .tall{ text-align:right;line-height:1; /* Instrument Serif setter stiltall som ellers faller under grunnlinja. */ font-variant-numeric:lining-nums; } body[data-theme="personal"] .opptelling .tall{ font-family:var(--f-serif);font-style:normal;font-weight:400; font-size:var(--t-sitat);letter-spacing:-.01em;color:var(--blekk); } body[data-theme="personal"] .opptelling .hva{ font-size:var(--t-brod);line-height:var(--lh-brod);color:var(--brod); } /* Ny markup treffer begge temaene, så NRK trenger sin egen form her — ellers arver den serifen og gradene fra personal. Samme grep som .case-kreditt. */ body[data-theme="nrk"] .opptelling{width:auto;} body[data-theme="nrk"] .opptelling .tall{ font-family:var(--f-grotesk);font-weight:800; font-size:clamp(30px,4vw,44px);letter-spacing:-.02em;color:var(--nrk-navy); } body[data-theme="nrk"] .opptelling .hva{font-size:17px;line-height:1.6;color:#22314d;} /* -------------------------------------------------------------------------- PRINSIPPER En liste over likestilte punkter der hvert punkt har et navn og en setning. Formen er CV-radens: hårlinje over hver rad, navnet i brødtekstens grad i vekt 500, setningen under i vanlig vekt. Én spalte og ikke to. Fem punkter i et auto-fit-rutenett gir en tom celle på siste rad, og lista leses uansett nedover — den er en rekkefølge, ikke et sett. -------------------------------------------------------------------------- */ .prinsipper{margin:var(--rom-4) 0 0;} .prinsipper > div{padding:var(--rom-2) 0;border-top:1px solid var(--strek);} .prinsipper dt{margin:0 0 4px;} .prinsipper dd{margin:0;} body[data-theme="personal"] .prinsipper dt{ font-family:var(--f-grot);font-weight:500;font-size:var(--t-brod); line-height:1.4;color:var(--blekk); } body[data-theme="personal"] .prinsipper dd{ font-size:var(--t-brod);line-height:var(--lh-brod);color:var(--brod);max-width:56ch; } body[data-theme="nrk"] .prinsipper{width:auto;} body[data-theme="nrk"] .prinsipper > div{border-top-color:#D7E0EE;} body[data-theme="nrk"] .prinsipper dt{ font-family:var(--f-grotesk);font-weight:800;font-size:17px; letter-spacing:-.01em;color:var(--nrk-navy); } body[data-theme="nrk"] .prinsipper dd{font-size:17px;line-height:1.6;color:#22314d;} /* Plakaten fra Milanosport er 1600×29438 piksler. Den får en ramme med egen rulling framfor å bli en beskåret stripe. */ .plakat{margin:var(--rom-4) 0 0;} .plakat-ramme{ max-height:min(60vh,560px);overflow-y:auto;border-radius:3px; background:#EDE7DA;border:1px solid var(--strek); } .plakat-ramme img{width:100%;height:auto;display:block;} body[data-theme="nrk"] .plakat{width:auto;} body[data-theme="nrk"] .plakat-ramme{background:#DCE6F5;border-color:#c9d6ea;} /* Bildetekster ligger alltid på bildets venstrekant. */ .bildegrid figcaption,.figur figcaption,.plakat figcaption{ font-size:14px;margin-top:var(--rom-1); } body[data-theme="personal"] .bildegrid figcaption, body[data-theme="personal"] .figur figcaption, body[data-theme="personal"] .plakat figcaption{max-width:44ch;} body[data-theme="nrk"] .bildegrid figcaption, body[data-theme="nrk"] .figur figcaption, body[data-theme="nrk"] .figur figcaption{color:#5a6478;} /* Delprosjekt i samlinger. Samme form som prosjektbolkene: navnet står over innholdet sitt, med hårstreken over. */ .delprosjekt{padding:34px 0;} body[data-theme="personal"] .delprosjekt{ display:block;border-top:1px solid var(--strek); padding:var(--rom-4) 0 0;margin:0 0 var(--rom-5); } body[data-theme="personal"] .del-hode{margin:0 0 var(--rom-3);} body[data-theme="nrk"] .delprosjekt{background:#fff;border-radius:6px;padding:28px 30px;margin-bottom:18px;} .delprosjekt h2{margin:0 0 6px;} /* Grad og skrift kommer fra overskriftsgruppa øverst i fila; her bare margen. */ body[data-theme="personal"] .delprosjekt h2{margin:0 0 var(--rom-1);} body[data-theme="nrk"] .delprosjekt h2{font-family:var(--f-grotesk);font-weight:800;letter-spacing:-.02em;font-size:26px;} body[data-theme="personal"] .delprosjekt p, body[data-theme="personal"] .delprosjekt li{font-size:var(--t-brod);line-height:var(--lh-brod);color:var(--brod);} .delprosjekt .del-meta{font-size:15px;margin:0 0 12px;} body[data-theme="personal"] .delprosjekt .del-meta{margin:0 0 var(--rom-2);} body[data-theme="nrk"] .delprosjekt .del-meta{color:#5a6478;font-weight:600;} /* «Fyll inn»-blokk for tekst som mangler. Fortsatt synlig med vilje, men den skal ikke lenger rope høyere enn innholdet rundt. */ .fyll-inn{ border-radius:4px;padding:18px 20px;margin:0 0 20px;font-size:16px;line-height:1.55; } body[data-theme="personal"] .fyll-inn{ background:none;border:none;border-left:2px solid var(--strek); border-radius:0;padding:2px 0 2px 20px;color:var(--damp); font-family:var(--f-grot);font-size:var(--t-brod);line-height:var(--lh-brod);max-width:52ch; } body[data-theme="nrk"] .fyll-inn{background:#FFF1D6;border-left:4px solid #E0A020;color:#6b4f14;} .fyll-inn strong{display:block;font-size:12px;margin-bottom:6px;} body[data-theme="personal"] .fyll-inn strong{font-family:var(--f-grot);font-weight:500;font-size:var(--t-felt);letter-spacing:0;margin-bottom:8px;} body[data-theme="nrk"] .fyll-inn strong{letter-spacing:.09em;text-transform:uppercase;} /* Manifest / sitat. Står på samme venstrekant som alt annet — det var det ene midtstilte elementet på en ellers venstrestilt side. Størrelsen er dempet et hakk så det ikke konkurrerer med tittelen. */ .sitat{margin:0 0 var(--rom-4);padding:0;} body[data-theme="personal"] .sitat{padding:0;margin:var(--rom-5) 0 var(--rom-6);} body[data-theme="personal"] .sitat.bred{ position:static;width:auto;left:auto;transform:none; text-align:left;margin:var(--rom-5) 0 var(--rom-6); } body[data-theme="personal"] .sitat.bred p{max-width:24ch;margin:0;} body[data-theme="nrk"] .sitat{background:var(--nrk-navy);color:#fff;border-left:6px solid var(--nrk-oransje);padding:30px 32px;border-radius:4px;} .sitat p{margin:0 0 4px;} body[data-theme="personal"] .sitat p{ font-family:var(--f-serif);font-weight:400;color:var(--blekk); font-size:var(--t-sitat);line-height:1.24;letter-spacing:-.005em;max-width:24ch; } body[data-theme="nrk"] .sitat p{font-family:var(--f-grotesk);font-weight:600;font-size:clamp(18px,2vw,24px);line-height:1.28;letter-spacing:-.01em;} .sitat cite{display:block;margin-top:14px;font-style:normal;font-size:15px;} body[data-theme="personal"] .sitat cite{margin-top:var(--rom-2);} body[data-theme="nrk"] .sitat cite{color:#93a4c4;font-weight:600;} /* -------------------------------------------------------------------------- NRK-TEMAET, GEOMETRIEN TILBAKE Margstigen og figurskalaen er skrevet for personal-temaet. En del av dem sitter likevel på delte regler, og NRK skal stå nøyaktig som før. Her pinnes de verdiene tilbake til det de var. Rekkefølgen betyr noe: blokka må ligge etter reglene den overstyrer. -------------------------------------------------------------------------- */ body[data-theme="nrk"] .case-hero{margin:14px 0 40px;} body[data-theme="nrk"] .case-hero img{max-height:min(66vh,640px);} /* .staaende erstattet .bred i markupen på tre sider. I NRK skal de fortsatt bryte ut, slik .bred gjorde. */ body[data-theme="nrk"] .case-hero.staaende{ position:relative;width:min(1560px, calc(100vw - 48px));left:50%;transform:translateX(-50%); } /* Lysbildet bryter ikke ut slik .staaende gjør: 16:9 i utbryterbredde er 878 px høyt. Det står i figurspalta, helt innsatt, også her. */ body[data-theme="nrk"] .case-hero.skjerm{width:100%;max-width:100%;} body[data-theme="nrk"] .case-hero.skjerm img{max-height:none;background:#DCE6F5;} body[data-theme="nrk"] .case-lead{margin-bottom:40px;} body[data-theme="nrk"] .case-kreditt{width:auto;} body[data-theme="nrk"] .bildegrid{margin:22px 0;} body[data-theme="nrk"] .bildegrid.skjerm{gap:30px;} body[data-theme="nrk"] .bildegrid.fri img{height:min(58vh,520px);max-height:none;width:auto;} body[data-theme="nrk"] .plakat{margin:22px 0 0;} body[data-theme="nrk"] .plakat-ramme{max-height:min(72vh,700px);} body[data-theme="nrk"] .bildegrid figcaption, body[data-theme="nrk"] .figur figcaption, body[data-theme="nrk"] .plakat figcaption{margin-top:7px;} body[data-theme="nrk"] .sitat{margin:0 0 40px;} /* Mockupen brøt ut til 1464 px før. Det gjør den fortsatt i NRK. */ body[data-theme="nrk"] .mockup{ width:min(1464px, calc(100vw - 32px));margin:36px 0 8px;margin-left:50%;transform:translateX(-50%); } body[data-theme="nrk"] .video{margin:22px 0 8px;} body[data-theme="nrk"] .video-tekst{margin-top:9px;} /* Bildeblokkene sto med .bred i markupen før og brøt ut til 1392 px. Klassen er borte nå, men NRK skal se det samme. Utbryteren gis derfor til de samme elementene som hadde den: de som er direkte barn av en seksjon eller et delprosjekt. Figurer inne i .case-innhold hadde den ikke, og får den ikke. */ body[data-theme="nrk"] .case-seksjon > .figur, body[data-theme="nrk"] .case-seksjon > .plakat, body[data-theme="nrk"] .case-seksjon > .bildegrid, body[data-theme="nrk"] .delprosjekt > .figur, body[data-theme="nrk"] .delprosjekt > .bildegrid{ position:relative;width:min(1560px, calc(100vw - 48px));left:50%;transform:translateX(-50%); } /* Video */ .video{margin:var(--rom-4) 0 var(--rom-1);border-radius:3px;overflow:hidden;background:#000;} /* 828, ikke 640: en demo er en skjerm som skal leses, og videoen sto ellers smalere enn mockupen og kontaktarket den ligger mellom på saksblikk. */ body[data-theme="personal"] .video{margin:var(--rom-4) 0 var(--rom-1);} .video video{width:100%;height:auto;display:block;max-height:70vh;} /* Teksten inne i