/* OKTOBERFEST, RIKTNING C: ARKIVET.
Skälen bakom formen står i tools/sida_oktoberfest.py; här står bara hur den ritas.
RÖRELSEN ÄR TVÅ SAKER, och bara den ena bor här: vimplarna som fladdrar när
pekaren går förbi (JS bygger dem, och de byggs inte alls under
prefers-reduced-motion). Den andra är buntens kort som lägger sig själva, och den
ägs av matkarusell.css/js, delad med startsidans matblock. Inget annat rör sig:
ingen toning, ingen övergång, inget hovertillstånd som flyttar något -- ett tryck
i en låda är inte en kontroll. Den här filen hade en rad som sa "ingen rörelse
alls", skriven innan vimplarna fanns; en stilmall som beskriver en tidigare
version av sig själv är sämre än ingen beskrivning.
ALLA MÅTT ÄR TAGNA UR BILDMATERIALET, inte ur smak. Fyra av oktoberfestbilderna
är under 1000 px breda i original och inget uppskalas i bygget, så varje låda som
bär en av dem är kapad till vad en 2x-skärm klarar: buntens kort 20rem = 320 px
(krav 640) och den frilagda figuren i ölsektionen likaså. Kapningen står på varje
ställe där den gäller, inte som en gemensam regel man kan råka gå förbi, och
_krav_2x() i sida_oktoberfest.py fäller bygget om en bild inte räcker. */
/* --- TRYCKET, sidans enda återkommande objekt -------------------------- */
/* Ett kort med pappkant, räta hörn, skugga och en handskriven text på
nederkanten. Heron har ett med sex bilder i, klippet ett. Att allt är samma sak är
vad som gör sidan till en samling. */
.okc-tryck {
margin: 0;
padding: 0.75rem 0.75rem 0.5rem;
background: #fdfaf4;
/* FÄRGEN MÅSTE SÄTTAS. Trycken ligger på .band--valnot, som sätter
color: var(--papper) på allt inuti sig. Utan den här raden skrivs den
handskrivna texten i creme på creme, alltså 1:1, och kontrastgrinden är den
enda som märker det. Samma fälla som .ram__inre i styles.css beskriver. */
color: var(--valnot);
max-width: 100%;
/* Två skuggor: en hårlinje som ger kortet en kant mot valnöten, och en djup
mjuk som lyfter det från bordet. */
box-shadow:
0 1px 2px rgb(0 0 0 / 0.35),
0 1.1rem 2.4rem -1rem rgb(0 0 0 / 0.6);
}
.okc-tryck img { width: 100%; height: auto; }
/* Handstilen. Caveat, sparsamt, och alltid i valnötsmjuk på kortets egen creme:
uppmätt 12,3:1 mot #fdfaf4. Guld vore 2,1:1 och är förbjudet på creme. */
.okc-tryck__hand {
margin: 0.55rem 0.15rem 0;
font-family: var(--f-hand);
font-size: var(--t-md);
line-height: 1.2;
color: var(--valnot-mjuk);
}
/* --- 1. LOCKET ---------------------------------------------------------- */
/* --- vimpelraden i heron ------------------------------------------------
Dennis 2026-08-14: blåvita flaggor högst upp i heron, precis under naven.
BLÅET ÄR SAMPLAT UR DERAS EGET TAK, inte hämtat ur en flagga. Medianen av
de blå pixlarna i övre 42 procenten av okt-salen -- 249 671 px, 15,5 procent
av ytan -- ligger på #4381b5, och det ljusa tyget på #709cc6. Det lägre
värdet är valt: det är tyget som det ser ut i deras rum under varmt
lokalljus, och en renare blå hade läst som en dekal ovanpå fotografiet
snarare än som samma vimpel en rad högre upp.
ATT RUTAN ÄR BAYERSK OCH MOLDAU ÖSTERRIKISKT är sant och spelar ingen roll
här: restaurangen hänger den själv, den sitter i taket på okt-salen, och
att rita det huset faktiskt hänger upp är inte att importera en symbol.
Vitt i vimpeln är sajtens --papper och inte fotots #e0d7d2. Fotots vitt är
varmt av rumsljuset; en ritad rad ska höra till sidan, inte till bilden.
BRICKAN ÄR ETT HELT SVAJ, inte en rak rad. Dennis 2026-08-14: vimplarna
ska hänga. Ett svaj är en funktion av var på bredden man är, och det kan en
rak upprepad bricka inte uttrycka -- alltså är brickan i stället en hel
båge från fästpunkt till fästpunkt, precis som en vimpelrad spänd tvärs ett
rum. Vid skarven möts två stigande ändar och bildar en fästpunkt, vilket är
vad det ser ut som i verkligheten också.
Snöret är en kvadratisk Bézier som dyker 30 enheter av brickans 93, och de
sex vimplarna är utplacerade på kurvan med var sin lutning läst ur
TANGENTEN i sin punkt: 15,5 / 9,5 / 3,2 grader och spegelvänt. De hänger
alltså i snöret som sytt tyg gör, inte lodrätt som en gardin -- en vimpel
som är sydd på ett band följer bandet.
Mönstret inuti vimpeln är ett schackrutnät vridet 45 grader, vilket ÄR
Wecken-rutan, och det roterar MED vimpeln eftersom mönstret ligger i
elementets eget koordinatsystem. Höjden styr bredden
(background-size: auto 100%), så brickan behåller sin form i varje storlek
och antalet svaj följer skärmen av sig själv.
Höjden ligger i en variabel därför att den läses två gånger: en gång av
raden själv och en gång av bandets padding, så innehållet aldrig kan hamna
under vimplarna. Två tal som ska vara samma tal ska vara ett tal. */
.okc-hero {
--okc-vimpel-h: clamp(2.75rem, 6vw, 4.25rem);
/* --s-6 och inte --s-8, av samma skäl som .hero-hel i pages.css: heron ska ner
till --sidhero-tak. Vimpelraden ligger kvar ovanpå det -- den är absolut
placerad, så paddingen är det enda som håller texten fri från den. */
padding-top: calc(var(--s-6) + var(--okc-vimpel-h));
}
/* MOBILEN FÖRSÖKER MATCHA SÄLLSKAP/KONTAKT, Dennis 2026-08-19: "korta ner
Oktoberfest-heron på mobile så den är lika stor som" de andra två. --s-6
(32px) byts till --s-3 (12px, samma tal .hero-hel redan ger de andra två
heroerna under 30rem), och vimpelns golv sänks till 2rem: 76px -> 44px.
RÄCKER INTE ENSAMT: kvar återstår en andra ingress-paragraf ("Bilderna från
festen...") och en längre första ingress som sällskap/kontakt saknar --
~110 px till, i text som denna ändring inte rör. */
@media (max-width: 57.999rem) {
.okc-hero {
--okc-vimpel-h: clamp(1.25rem, 5vw, 4.25rem);
padding-top: calc(var(--s-1) + var(--okc-vimpel-h));
padding-bottom: var(--s-2);
}
}
/* BUNTENS STORLEK BOR INTE HÄR LÄNGRE. Talet räknades fram ur den HÄR heroens
budget (den bär vimpelraden i sin padding-top och är därför den trängre av de
två), men sedan 2026-08-18 gäller det båda herobuntarna och står därför hos
.matkar--fri i matkarusell.css. Läs räkningen där innan du ändrar det.
SPALTEN ÄR KVAR PÅ 30rem med flit. Att smalna av den hade sett stramare ut, men
fallbacken under prefers-reduced-motion lägger korten i ett auto-fit-rutnät med
11rem-golv, och en spalt under 23rem faller då till EN kolumn med 368 px breda
kort -- exakt den 4 400 px höga heron som noten i matkarusell.css beskriver. */
.okc-vimpel {
position: absolute;
inset: 0 0 auto;
height: var(--okc-vimpel-h);
/* RADEN KLIPPER SIG SJÄLV, och det är inte kosmetik. Som background-image
svämmade den aldrig över -- en bakgrund målas bara inom sin egen låda. När
oktoberfest.js bytte till riktiga element gjorde det sista svajet plötsligt
dokumentet 1584 px brett på en 1440-skärm, alltså sidledsscroll på hela
sidan, och grinden fällde den. Ett svaj måste få gå klart för att se rätt
ut vid kanten; det som ska hända är att det KLIPPS, precis som en vimpelrad
fortsätter förbi väggen. */
overflow: clip;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20360%2093%27%3E%3Cdefs%3E%3Cpattern%20id%3D%27w%27%20width%3D%2711%27%20height%3D%2711%27%20patternUnits%3D%27userSpaceOnUse%27%20patternTransform%3D%27rotate%2845%200%200%29%27%3E%3Crect%20width%3D%2711%27%20height%3D%2711%27%20fill%3D%27%23f5efe4%27%2F%3E%3Crect%20width%3D%275.5%27%20height%3D%275.5%27%20fill%3D%27%234381b5%27%2F%3E%3Crect%20x%3D%275.5%27%20y%3D%275.5%27%20width%3D%275.5%27%20height%3D%275.5%27%20fill%3D%27%234381b5%27%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Cg%20transform%3D%27translate%2830.00%2014.17%29%20rotate%2815.52%29%27%3E%3Cpath%20d%3D%27M-23.0%200%20L23.0%200%20L0%2054%20Z%27%20fill%3D%22url%28%23w%29%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%2890.00%2027.50%29%20rotate%289.46%29%27%3E%3Cpath%20d%3D%27M-23.0%200%20L23.0%200%20L0%2054%20Z%27%20fill%3D%22url%28%23w%29%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%28150.00%2034.17%29%20rotate%283.18%29%27%3E%3Cpath%20d%3D%27M-23.0%200%20L23.0%200%20L0%2054%20Z%27%20fill%3D%22url%28%23w%29%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%28210.00%2034.17%29%20rotate%28-3.18%29%27%3E%3Cpath%20d%3D%27M-23.0%200%20L23.0%200%20L0%2054%20Z%27%20fill%3D%22url%28%23w%29%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%28270.00%2027.50%29%20rotate%28-9.46%29%27%3E%3Cpath%20d%3D%27M-23.0%200%20L23.0%200%20L0%2054%20Z%27%20fill%3D%22url%28%23w%29%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%27translate%28330.00%2014.17%29%20rotate%28-15.52%29%27%3E%3Cpath%20d%3D%27M-23.0%200%20L23.0%200%20L0%2054%20Z%27%20fill%3D%22url%28%23w%29%22%2F%3E%3C%2Fg%3E%3Cpath%20d%3D%27M0%205%20Q180%2065%20360%205%27%20fill%3D%27none%27%20stroke%3D%27%23cbbda6%27%20stroke-width%3D%272.4%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E");
background-repeat: repeat-x;
background-position: left top;
background-size: auto 100%;
pointer-events: none;
}
/* --- vimpelraden när den lever ------------------------------------------
Dennis 2026-08-14: vimplarna ska fladdra när musen rör sig runt dem.
EN BAKGRUND KAN INTE RÖRA EN VIMPEL I TAGET, så oktoberfest.js byter ut brickan
mot riktiga element längs samma kurva. Bakgrunden ovan ligger kvar och
släcks först av klassen nedan -- kör inte skriptet ser raden ut precis som
den gjorde, och det är den enda anledningen att behålla båda.
Vimplarna rörs BARA med transform, som går på kompositorn. Mönstret följer
med av sig självt eftersom det är elementets egen bakgrund och roterar i
dess koordinatsystem, precis som pattern-varianten i brickan gjorde. */
.okc-vimpel--levande { background-image: none; }
.okc-vimpel__snore {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
pointer-events: none;
}
.okc-vimpel__snore path {
fill: none;
stroke: #cbbda6;
stroke-width: 2.4;
stroke-linecap: round;
}
/* Wecken-rutan som två 45-graders schackrutnät en halv bricka isär -- det ger
ett romblatt, alltså samma mönster som SVG:ns roterade pattern. Blået är
samma #4381b5 som samplades ur taket på okt-salen; skriv om det på ETT
ställe och skriv om det på båda, annars glider den byggda raden och
fallbacken isär i färg. */
.okc-vimpel__flagga {
position: absolute;
top: 0;
left: 0;
transform-origin: 50% 0;
clip-path: polygon(0 0, 100% 0, 50% 100%);
background-color: #f5efe4;
background-image:
linear-gradient(45deg, #4381b5 25%, transparent 25%, transparent 75%, #4381b5 75%),
linear-gradient(45deg, #4381b5 25%, transparent 25%, transparent 75%, #4381b5 75%);
will-change: transform;
pointer-events: none;
}
/* RUTNÄTET ÄR .hero-rutnat i pages.css sedan 2026-08-18, delat med sällskaps- och
kontaktsidan. Reglerna som stod här var en tredjedel av samma sanning. */
.okc-hero__ord .brod { color: inherit; }
/* HERO-TRYCKET LIGGER NÄSTAN RAKT. 1,2 grader, inte fem: det är det översta
kortet i lådan, det man just har tittat på, och ett kraftigt lut hade gjort det
till ett löst kort bland andra. Lutet i högen längre ned får vara det som är
löst.
MARGINALEN ÄR DEKLARERAD, inte uträknad. En roterad låda växer på båda axlar
med den andra sidans längd gånger sin(vinkel): 480 px bred och omkring 380 hög
ger 380*sin(1,2) = 8 px på bredden och 480*sin(1,2) = 10 px på höjden. 0,75rem
= 12 px är rundligt mer än båda, och grinden mäter om någon ändrar vinkeln. */
.okc-tryck--hero {
rotate: -1.2deg;
margin: 0.75rem;
width: 100%;
}
/* --- bildspelet i heron: SAMMA BUNT SOM "UR KÖKET" ----------------------
Dennis 2026-08-17: bildspelet ska vara exakt likadant som matblocket på
startsidan. Här stod tidigare en egen bildspelsimplementation -- ruta med fast
höjd, pilar, räknare. Den är borta, och sidan lastar matkarusell.css och
matkarusell.js i stället (se build_site.py). Det enda som är särskilt för den här
sidan bor DÄR, hos bunten: .matkar--fri och .matkar__bild--hel.
Sök alltså inte bildspelets stilar i den här filen. Den bär vimpelraden, trycket,
ölsektionen, klippet och datumkortet. */
/* --- 2. ÖLEN, och den frilagda figuren ---------------------------------- */
.okc-ol__rutnat {
display: grid;
gap: var(--s-6);
/* CENTRERAT, EFTER MÄTNING. align-items: end lade nederkanterna på samma linje,
vilket lät bra och såg fel ut: figuren med bildtext är 457 px hög och
ordkolumnen 200, så all skillnad hamnade ovanför orden som 257 px tomt creme
i ett hörn. Tomrum som bara ligger på ena sidan läser som ett fel, inte som
luft. Centrerat delas samma tomrum i två och blir andrum. */
align-items: center;
}
@media (min-width: 52rem) {
.okc-ol__rutnat { grid-template-columns: minmax(0, 1fr) min(20rem, 34%); }
}
.okc-figur { margin: 0; }
/* HÄR ÄR HELA RIKTNINGENS ENDA TRICK, och det är tre rader.
okt-tre-sejdlar är svartvit mot vit botten, alltså redan frilagd. Med
mix-blend-mode: darken tas per kanal det MINSTA av bilden och bakgrunden:
bildens vita 250-252 mot papperets (245,239,228) ger exakt (245,239,228), det
vill säga papperets egen färg och ingen ljus rektangel kvar. Allt som är
mörkare än papperet är kvar precis som det är. Multiply hade gett omkring fyra
enheter för mörkt och lämnat en svag ruta synlig; darken lämnar ingenting.
TRE VILLKOR SOM INTE FÅR BRYTAS, och alla tre är samma villkor:
1. Ingen transform, rotate, translate, scale, opacity under 1, filter eller
will-change på ![]()
eller på NÅGON förfader upp till bandet.
2. Ingen isolation: isolate däremellan.
3. Bandet måste ha en egen ogenomskinlig bakgrund att blanda mot, vilket
.band--papper har.
Var och en av dem skapar en egen stackningskontext, och en blandning når
aldrig utanför sin egen. Bryts något av dem blandar bilden mot ingenting, och
den vita bottnen kommer tillbaka som en ljus rektangel mitt på cremet.
NEDERKANTEN TONAS BORT. Hennes förkläde går ut ur bildrutan, så utan tonningen
slutar figuren i ett rakt vågrätt streck mitt på papperet. Tonningen är angiven
i ABSOLUT längd och inte i procent -- bilden är olika hög i olika spalter, och
en procentsats hade flyttat tonningen upp i motivet på den smala skärmen.
Samma skäl som slöjorna över hero-fotografierna har. */
.okc-figur img {
mix-blend-mode: darken;
/* TVÅ TONNINGAR, INTE EN. Nederkanten är hennes förkläde som går ut ur
bildrutan; högerkanten är hennes ärm och arm, som gör detsamma. Utan den
högra tonningen står ett rakt lodrätt streck längs hennes högra sida, och
det är exakt lika mycket ett synligt bildkantsbrott som det vågräta nedtill.
Uppmätt i originalet: 31 % av högerkanten och 72 % av underkanten bär motiv.
De två maskerna skärs mot varandra med mask-composite: intersect. */
-webkit-mask-image:
linear-gradient(to bottom, #000 calc(100% - 84px), transparent),
linear-gradient(to left, transparent, #000 44px);
mask-image:
linear-gradient(to bottom, #000 calc(100% - 84px), transparent),
linear-gradient(to left, transparent, #000 44px);
-webkit-mask-composite: source-in;
mask-composite: intersect;
margin-inline: auto;
/* 640 px i original: 20rem = 320 CSS-px är exakt vad en 2x-skärm bär. */
max-width: 20rem;
}
.okc-figur__hand {
margin: 0;
font-family: var(--f-hand);
font-size: var(--t-md);
line-height: 1.2;
color: var(--valnot-mjuk);
text-align: center;
}
/* Ölmåtten. En definitionslista och inte en mening, därför att det är två
storlekar och en gäst läser dem som ett par. */
.okc-matt {
margin: var(--s-5) 0;
display: grid;
grid-template-columns: auto auto;
justify-content: start;
align-items: baseline;
gap: var(--s-2) var(--s-6);
}
.okc-matt dt {
font-family: var(--f-display);
font-size: var(--t-sm);
font-weight: 500;
text-transform: uppercase;
letter-spacing: var(--spar-display);
/* 6,1:1 på creme. --guld hade varit 2,1:1 och är förbjudet som text här. */
color: var(--guld-mork);
}
.okc-matt dd {
margin: 0;
font-size: var(--t-md);
}
/* --- 3. KLIPPET --------------------------------------------------------- */
.okc-klipp__rutnat {
display: grid;
gap: var(--s-7);
align-items: center;
}
/* Speglingen med grid-column, aldrig med källordningen. BÅDA axlarna anges:
bara grid-column låter automatplaceringen uppfinna en rad och klämma ihop
allt, vilket är en av repots dyrare fällor. */
@media (min-width: 52rem) {
.okc-klipp__rutnat { grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); }
.okc-klipp__ord { grid-column: 2; grid-row: 1; }
.okc-tryck--klipp { grid-column: 1; grid-row: 1; }
}
/* LITET, MED FLIT. Uppslaget är tidningens upphovsrätt och inte vår. 26rem =
416 px läser som ett klipp i en låda; helbrett hade läst som en reproduktion
av artikeln. Bilden finns i 1600 px, alltså är 416 px skarpt även på 2x. */
.okc-tryck--klipp {
width: 100%;
rotate: -1.1deg;
margin: 0.75rem;
}
/* --- 4. DATUMET: den tomma raden --------------------------------------- */
/* ORDNINGEN ÄR DENSAMMA I BÅDA LÄGENA: fråga, tomt fält, svar. På den smala
skärmen faller de tre efter varandra; på den breda flyttar kortet ut i egen
spalt och knappen hamnar under texten. Områdena gör bytet, källordningen rörs
inte. */
/* HELT CENTRERAT, Dennis 2026-08-17. En kolumn på alla bredder sedan kortet togs
bort -- rutnätsområdena fanns för att placera kortet vid sidan av texten, och utan
det finns inget att placera. justify-items: center centrerar LÅDORNA i kolumnen,
text-align nedan centrerar bläcket i dem; det behövs båda, vilket 80-pixelsfelet
samma dag visade. */
.okc-datum__rutnat {
display: grid;
gap: var(--s-6);
justify-items: center;
text-align: center;
grid-template-areas:
"ord"
"knapp";
}
/* CENTRERAD TEXT, Dennis 2026-08-17: "datum blocket kan vara centrerat i text".
Gäller ordblocket -- ögonbryn, rubrik och meningen -- och inte rutnätet: kortet
och knappen har sina egna rutor och sitter kvar där de satt. I den smala vyn står
allt i en kolumn och centreringen syns rakt igenom; från 52rem är ordblocket
vänsterkolumnen, och texten centreras inom den.
text-wrap: balance på rubriken tillkommer för att centrerad text visar en ojämn
sista rad tydligare än vänsterställd -- en balanserad brytning är hela skälet att
greppet finns, och .bok-rubrik bär det inte själv. */
.okc-datum__ord { grid-area: ord; text-align: center; }
.okc-datum__ord h2 { text-wrap: balance; }
/* text-align CENTRERAR TEXTEN I BLOCKET, INTE BLOCKET. .brod bär
max-width: var(--matt-text) och margin 0, alltså står stycket vänsterpinnat i
kolumnen med sin text centrerad inuti sig -- uppmätt vid 1440 låg rubrikens mitt
på 512 px och styckets på 432, 80 px isär. På telefon syntes det inte, för där
fyller stycket hela bredden och de två måtten sammanföll.
margin-inline: auto centrerar lådan. Behövs bara för det som HAR en egen
maxbredd; rubriken och ögonbrynet fyller kolumnen och rör sig inte. */
.okc-datum__ord .brod { margin-inline: auto; }
/* .okc-kort behåller sin grid-area fastän inget element bär klassen just nu -- se
_datumkort() i sida_oktoberfest.py. En area som inte används kostar ingenting, och
sätts kortet tillbaka behöver bara "kort" in i template-areas igen. */
.okc-kort { grid-area: kort; align-self: center; }
.okc-datum__knapp { grid-area: knapp; }
/* Knappraden är ett och bär webbläsarens egen marginal. Inuti sin egen
rutnätsruta är det dubbel luft, för rutnätets gap har redan gett den. */
.okc-datum__knapp .knapp-rad { margin: 0; }
/* TVÅKOLUMNSLÄGET ÄR BORTA med kortet. Det lade ord och knapp till vänster och
kortet till höger från 52rem; utan kortet hade det bara gjort textkolumnen halvbred
och skjutit den ut åt vänster, vilket är motsatsen till centrerat. */
/* KATALOGKORTET. Arkivets eget föremål: etikett överst, en rad, och en TOM
linjal där siffran ska stå. Ett tomt fält som uppenbart väntar på något säger
"vi vet inte än" utan att be om ursäkt, och det är sant hela vägen -- till
skillnad från en nedräkning, som hade krävt ett datum vi inte har.
Guldlinjen överst är ORNAMENT och inte text. --guld på creme är 2,1:1 och
förbjudet att skriva med; som en 3 px list är det inget någon ska läsa. */
.okc-kort {
background: #fdfaf4;
color: var(--valnot);
border-top: 3px solid var(--guld);
padding: var(--s-6) var(--s-6) var(--s-7);
rotate: -1.1deg;
margin: 0.75rem;
box-shadow:
0 1px 2px rgb(43 26 14 / 0.14),
0 1rem 2.2rem -1rem rgb(43 26 14 / 0.45);
}
/* Etiketten med sin egen hårlinje under. Utan linjen låg etiketten och raden
som två stycken i en spalt; med den är kortet ett formulär med ett huvud och
ett fält, vilket är vad det ska föreställa. */
.okc-kort__etikett {
display: block;
font-family: var(--f-display);
font-size: var(--t-xs);
font-weight: 500;
text-transform: uppercase;
letter-spacing: var(--spar-vid);
color: var(--tra); /* 6,8:1 på kortets creme */
padding-bottom: var(--s-3);
border-bottom: 1px solid rgb(122 74 34 / 0.3);
margin-bottom: var(--s-6);
}
.okc-kort__rad {
margin: 0;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: baseline;
gap: var(--s-4);
}
.okc-kort__rad dt {
font-family: var(--f-display);
font-size: var(--t-sm);
font-weight: 500;
text-transform: uppercase;
letter-spacing: var(--spar-display);
color: var(--guld-mork); /* 6,4:1 på kortets creme */
}
.okc-kort__rad dd { margin: 0; }
/* DEN TOMMA LINJALEN. display: block är load bearing -- en med height och
border-bottom gör ingenting utan den, och felet är tyst: raden försvinner och
kortet ser bara ihoptryckt ut. Streckad och inte heldragen, därför att en
streckad linje ber om att fyllas i och en heldragen bara avslutar något. */
.okc-kort__tom {
display: block;
height: 1.5rem;
border-bottom: 2px dashed rgb(117 83 10 / 0.5);
}
/* När DATUM är ifyllt i tools/sida_oktoberfest.py byts linjalen mot det här. */
.okc-kort__datum {
font-family: var(--f-display);
font-size: var(--t-lg);
letter-spacing: var(--spar-display);
color: var(--valnot);
}