/* Runt knuten – EN stylesheet för kalendersidorna och källsidan (ur runtknuten/rk/mallar, 2026-09-04). */ html, body { margin: 0; padding: 0; background: #FAF7F2; } body { font-family: Archivo, system-ui, sans-serif; color: #26201A; -webkit-font-smoothing: antialiased; } a { color: #7D3B2F; text-decoration: none; } a:hover { color: #5E2C22; text-decoration: underline; text-underline-offset: 3px; } ::selection { background: #7D3B2F; color: #FAF7F2; } [hidden] { display: none !important; } .wrap { max-width: 780px; margin: 0 auto; padding: 18px 20px 56px; } .mast-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #8A7F70; padding-top: 6px; } .mast-row .today-line { margin-left: auto; font-variant-numeric: tabular-nums; } .mast-link { color: #7D3B2F; font-weight: 600; } /* Smal skärm: datumet får inte plats bredvid navet ändå – gör tvåradsläget medvetet (egen vänsterställd rad) i stället för en högerställd orphan. */ @media (max-width: 560px) { .mast-row .today-line { margin-left: 0; flex-basis: 100%; } } /* clamp: h1:n är sidans ämne sedan kommunsidorna fick "Evenemang i Smedjebacken" – 42px är rätt på papperet men bryter i två rader på de smalaste skärmarna. 9vw krymper bara där, ordmärket står kvar i 42px. */ h1 { margin: 14px 0 6px; font-family: Newsreader, serif; font-weight: 600; font-size: clamp(30px, 9vw, 42px); line-height: 1; letter-spacing: -0.02em; color: #26201A; } .tagline { margin: 0 0 14px; font-family: Newsreader, serif; font-style: italic; font-size: 16px; color: #57503F; } .rule-thick { border-top: 2px solid #26201A; } .rule-thin { border-top: 1px solid #26201A; margin-top: 2px; } .filters { padding: 12px 0 4px; border-bottom: 1px solid #E6DECF; } .frow { display: flex; align-items: flex-start; gap: 16px; padding: 5px 0; } .flabel { flex: none; width: 66px; padding-top: 6px; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #8A7F70; } .fopts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; } .fbtn { background: none; border: none; padding: 2px 0; margin: 0; cursor: pointer; font-family: Archivo, sans-serif; font-size: 14px; font-weight: 400; color: #6B6257; } .fbtn.on { color: #7D3B2F; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #7D3B2F; } /* Ort-väljaren (design "Runt knuten – ortfilter", 2026-07-30): ihopfälld summering + panel med sökfält, "Valda"-sektion och EN grupp per län. Grupprubrikens ruta är tri-state precis som ämnesfiltrets. Utan JS visas panelen öppen och summeringsknappen döljs (noscript-regeln i ) – kommun-sidornas chips är LÄNKAR och får inte gömmas bakom en död knapp. */ .ort-sel { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .ort-summary { font-family: Archivo, sans-serif; font-size: 13.5px; color: #26201A; background: #FFFFFF; border: 1px solid #D8D0BE; border-radius: 3px; padding: 5px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 9px; max-width: 100%; } .ort-summary:hover { border-color: #D9BDAF; } .ort-summary.active { color: #7D3B2F; background: #F0E7D8; border-color: #D9BDAF; } .ort-caret { font-size: 10px; color: #8A7F70; } .ort-summary.active .ort-caret { color: #7D3B2F; } /* display: contents – snabbchipsen ska ligga i .ort-sel:s flexflöde, inte i en egen rad, så att de bryter tillsammans med summeringsknappen. */ .ort-quick { display: contents; } .ort-quick-chip { font-family: Archivo, sans-serif; font-size: 13.5px; font-weight: 600; color: #7D3B2F; background: #F0E7D8; border: 1px solid #D9BDAF; border-radius: 3px; padding: 4px 11px; cursor: pointer; } .ort-rest { font-size: 12.5px; color: #8A7F70; } .ort-panel { margin: 8px 0 0 82px; border: 1px solid #E0D8C7; border-radius: 3px; background: #FFFDF9; padding: 14px 15px 12px; } .ort-search { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .ort-q { font-family: Archivo, sans-serif; font-size: 13.5px; color: #26201A; background: #FFFFFF; border: 1px solid #D8D0BE; border-radius: 3px; padding: 6px 11px; width: 230px; max-width: 100%; } .ort-hint { font-family: Newsreader, serif; font-style: italic; font-size: 14px; color: #8A7F70; } .ort-valda { margin-top: 13px; padding-top: 12px; border-top: 1px solid #EFE8DA; } .ort-valda-head { display: flex; align-items: baseline; gap: 9px; margin-bottom: 8px; flex-wrap: wrap; } .ort-valda-label { font-size: 10px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: #7D3B2F; } .ort-valda-n { font-size: 11px; font-weight: 600; color: #8A7F70; font-variant-numeric: tabular-nums; } .ort-valda-hint { font-family: Newsreader, serif; font-style: italic; font-size: 13.5px; color: #8A7F70; } .ort-group { padding: 11px 0 8px; border-top: 1px solid #EFE8DA; } .ort-ghead { display: inline-flex; align-items: center; gap: 8px; background: none; border: none; padding: 0; cursor: pointer; font-family: Archivo, sans-serif; font-size: 11px; letter-spacing: 0.11em; text-transform: uppercase; font-weight: 700; color: #6B6257; } .ort-ghead:hover, .ort-ghead.all, .ort-ghead.some { color: #7D3B2F; } /* Kommun-sidornas grupprubrik är en stum etikett – ingen kryssruta, ingen hover. Utom när länet har en egen sida: då är rubriken vägen dit ("visa hela Dalarna") och beter sig som en länk, fast den ser ut som en etikett. */ .ort-ghead.static, .ort-ghead.static:hover { cursor: default; color: #6B6257; } .ort-ghead.static.link { cursor: pointer; text-decoration: none; } .ort-ghead.static.link:hover { color: #7D3B2F; } .ort-ghead.static.link:hover .ort-glabel { text-decoration: underline; } .ort-box { width: 14px; height: 14px; flex: none; border: 1.5px solid #C9BEAB; border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; position: relative; } /* Kryssrutans innehåll ligger ABSOLUT, inte som flex-item. Rutan är inline-flex, så dess baslinje är flex-itemets – och den flyttar sig när ::after dyker upp (tom ruta -> streck -> bock ger tre olika baslinjer). Grupprubriken är också inline-flex och ärver baslinjen, så radboxen i .ort-group växte 2 px vid "some" och krympte 1 px vid "all": hela sidan hoppade varje gång man kryssade i något. Absolut ::after = samma baslinje i alla tre lägen, och viloläget ser ut precis som förut. */ .ort-ghead.all .ort-box::after, .ort-ghead.some .ort-box::after { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .ort-ghead.all .ort-box { background: #7D3B2F; border-color: #7D3B2F; } .ort-ghead.all .ort-box::after { content: "✓"; color: #FAF7F2; font-size: 10px; line-height: 1; } .ort-ghead.some .ort-box { border-color: #7D3B2F; } .ort-ghead.some .ort-box::after { content: ""; width: 7px; height: 2px; background: #7D3B2F; } .ort-gn { color: #8A7F70; font-weight: 600; letter-spacing: 0; font-variant-numeric: tabular-nums; } .ort-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; } .ort-chip { font-family: Archivo, sans-serif; font-size: 13.5px; color: #3A342B; background: #FFFFFF; border: 1px solid #D8D0BE; border-radius: 3px; padding: 4px 11px; cursor: pointer; } .ort-chip:hover { border-color: #D9BDAF; } .ort-chip.on { color: #7D3B2F; background: #F0E7D8; border-color: #D9BDAF; } /* På kommun-sidorna är chipsen länkar () – samma utseende som knapparna. */ a.ort-chip, a.ort-chip:hover { text-decoration: none; } .ort-empty { font-family: Newsreader, serif; font-size: 15px; color: #6B6257; margin: 14px 0 4px; padding-top: 12px; border-top: 1px solid #EFE8DA; } .ort-foot { display: flex; gap: 16px; align-items: center; margin-top: 12px; padding-top: 11px; border-top: 1px solid #EFE8DA; } .ort-clear, .ort-done { background: none; border: none; padding: 0; cursor: pointer; font-family: Archivo, sans-serif; font-size: 12.5px; font-weight: 600; } .ort-clear { color: #7D3B2F; text-decoration: underline; text-underline-offset: 3px; } .ort-done { color: #6B6257; } @media (max-width: 560px) { .ort-panel { margin-left: 0; } .ort-q { width: 100%; } } /* Ämnesfilter: ihopfälld "Alla ämnen"-knapp + panel med klickbara grupprubriker (tri-state ruta väljer/avväljer alla underkategorier) och taggchips. */ .amne-summary { font-family: Archivo, sans-serif; font-size: 13.5px; color: #26201A; background: #FFFFFF; border: 1px solid #D8D0BE; border-radius: 3px; padding: 5px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 9px; max-width: 100%; } .amne-summary:hover { border-color: #D9BDAF; } .amne-summary.active { color: #7D3B2F; background: #F0E7D8; border-color: #D9BDAF; } .amne-caret { font-size: 10px; color: #8A7F70; } .amne-summary.active .amne-caret { color: #7D3B2F; } .amne-panel { flex-basis: 100%; margin: 8px 0 0 82px; border: 1px solid #E0D8C7; border-radius: 3px; background: #FFFDF9; padding: 2px 15px 12px; } .amne-group { padding: 10px 0 8px; border-top: 1px solid #EFE8DA; } .amne-group:first-child { border-top: none; } .amne-ghead { display: inline-flex; align-items: center; gap: 8px; background: none; border: none; padding: 0; cursor: pointer; font-family: Archivo, sans-serif; font-size: 11px; letter-spacing: 0.11em; text-transform: uppercase; font-weight: 700; color: #6B6257; } .amne-ghead:hover, .amne-ghead.all, .amne-ghead.some { color: #7D3B2F; } .amne-box { width: 14px; height: 14px; flex: none; border: 1.5px solid #C9BEAB; border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; position: relative; } /* Kryssrutans innehåll ligger ABSOLUT, inte som flex-item. Rutan är inline-flex, så dess baslinje är flex-itemets – och den flyttar sig när ::after dyker upp (tom ruta -> streck -> bock ger tre olika baslinjer). Grupprubriken är också inline-flex och ärver baslinjen, så radboxen i .amne-group växte 2 px vid "some" och krympte 1 px vid "all": hela sidan hoppade varje gång man kryssade i något. Absolut ::after = samma baslinje i alla tre lägen, och viloläget ser ut precis som förut. */ .amne-ghead.all .amne-box::after, .amne-ghead.some .amne-box::after { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .amne-ghead.all .amne-box { background: #7D3B2F; border-color: #7D3B2F; } .amne-ghead.all .amne-box::after { content: "✓"; color: #FAF7F2; font-size: 10px; line-height: 1; } .amne-ghead.some .amne-box { border-color: #7D3B2F; } .amne-ghead.some .amne-box::after { content: ""; width: 7px; height: 2px; background: #7D3B2F; } .amne-gn { color: #8A7F70; font-weight: 600; letter-spacing: 0; font-variant-numeric: tabular-nums; } .amne-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; } .amne-chip { font-family: Archivo, sans-serif; font-size: 13px; color: #3A342B; background: #FFFFFF; border: 1px solid #D8D0BE; border-radius: 3px; padding: 3px 10px; cursor: pointer; } .amne-chip:hover { border-color: #D9BDAF; } .amne-chip.on { color: #7D3B2F; background: #F0E7D8; border-color: #D9BDAF; } .amne-chip .c { color: #8A7F70; font-weight: 400; font-variant-numeric: tabular-nums; } .amne-chip.on .c { color: #7D3B2F; } .amne-foot { display: flex; gap: 16px; align-items: center; margin-top: 12px; padding-top: 11px; border-top: 1px solid #EFE8DA; } .amne-clear, .amne-done { background: none; border: none; padding: 0; cursor: pointer; font-family: Archivo, sans-serif; font-size: 12.5px; font-weight: 600; } .amne-clear { color: #7D3B2F; text-decoration: underline; text-underline-offset: 3px; } .amne-done { color: #6B6257; } @media (max-width: 560px) { .amne-panel { margin-left: 0; } } /* Datumväljaren i När-raden (design "Runt knuten – datumval", variant 1a): summeringsknapp + utfälld månadskalender. Medvetet SAMMA knapp- och panelspråk som ämnesfiltret – det här är ett fjärde När-läge, inte en tredje sorts kontroll att lära sig. */ .datum-summary { font-family: Archivo, sans-serif; font-size: 13.5px; color: #26201A; background: #FFFFFF; border: 1px solid #D8D0BE; border-radius: 3px; padding: 4px 11px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; } .datum-summary:hover { border-color: #D9BDAF; } .datum-summary.active { color: #7D3B2F; background: #F0E7D8; border-color: #D9BDAF; } .datum-caret { font-size: 10px; color: #8A7F70; } .datum-summary.active .datum-caret { color: #7D3B2F; } .datum-panel { width: 268px; max-width: 100%; box-sizing: border-box; margin: 8px 0 2px 82px; border: 1px solid #E0D8C7; border-radius: 3px; background: #FFFDF9; padding: 13px 15px 14px; } .datum-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; } .datum-title { font-family: Newsreader, serif; font-weight: 600; font-size: 15px; color: #26201A; } .datum-nav { background: none; border: none; padding: 2px 7px; margin: 0; cursor: pointer; font-family: Newsreader, serif; font-size: 17px; line-height: 1; color: #6B6257; } .datum-nav:hover:enabled { color: #7D3B2F; } .datum-nav:disabled { color: #CFC6B4; cursor: default; } .datum-wd, .datum-grid { display: grid; grid-template-columns: repeat(7, 1fr); justify-items: center; } .datum-wd { margin-bottom: 4px; font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #A2967F; } .datum-grid { row-gap: 3px; } .datum-cell { width: 32px; height: 32px; box-sizing: border-box; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; border: 1.5px solid transparent; border-radius: 50%; background: none; cursor: pointer; font-family: Archivo, sans-serif; font-size: 13px; color: #3A342B; font-variant-numeric: tabular-nums; } .datum-cell:hover:enabled { background: #F0E7D8; } .datum-cell:disabled { color: #C9BEAB; cursor: default; } .datum-cell.idag { border-color: #7D3B2F; color: #7D3B2F; font-weight: 600; } .datum-cell.vald { background: #7D3B2F; border-color: #7D3B2F; color: #FAF7F2; font-weight: 600; } @media (max-width: 560px) { .datum-panel { margin-left: 0; } } /* Beskedet när ett datumhopp landat efter kalendariets slut. */ .datum-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 16px 0 0; font-size: 14px; color: #57503F; } .datum-note button { background: none; border: none; padding: 0; margin: 0; cursor: pointer; font-family: Archivo, sans-serif; font-size: 14px; font-weight: 600; color: #7D3B2F; text-decoration: underline; text-underline-offset: 3px; } .kallfilter { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-top: 14px; border-top: 2px solid #7D3B2F; padding-top: 9px; font-size: 13px; } .kallfilter strong { font-weight: 600; } .kallfilter button { background: none; border: none; padding: 0; margin: 0; cursor: pointer; font-family: Archivo, sans-serif; font-size: 13px; font-weight: 600; color: #7D3B2F; text-decoration: underline; text-underline-offset: 3px; } /* Pågående: tvåkolumns tidslinje, PAG_PEEK rader synliga + "Visa fler" */ .pagaende { margin-top: 14px; } .pag-head { display: flex; align-items: baseline; gap: 12px; border-top: 2px solid #26201A; border-bottom: 1px solid #E6DECF; padding: 12px 2px; } .pag-kick { font-family: Archivo, sans-serif; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: #26201A; font-weight: 700; } .pag-summary { font-family: Newsreader, serif; font-style: italic; font-size: 15px; color: #57503F; } .pag-summary b { font-style: normal; font-weight: 600; color: #26201A; font-variant-numeric: tabular-nums; } .pag-body { padding: 14px 2px 4px; } .pag-more { border-top: 1px solid #E6DECF; } .pag-more button { display: block; width: 100%; background: none; border: none; padding: 10px 2px; margin: 0; cursor: pointer; text-align: left; font-family: Archivo, sans-serif; font-size: 13px; font-weight: 600; color: #7D3B2F; } .pag-legend { display: flex; gap: 20px; margin-bottom: 12px; font-family: Archivo, sans-serif; font-size: 11.5px; color: #57503F; } .pag-legend > span { display: inline-flex; align-items: center; gap: 7px; } .pag-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; } .pag-dot.nu { background: #7D3B2F; } .pag-dot.kommande { background: transparent; border: 1.5px solid #B3A891; box-sizing: border-box; } .pag-grid { columns: 2; column-gap: 40px; } .pag-row { break-inside: avoid; display: flex; align-items: baseline; gap: 11px; padding: 6px 0; border-bottom: 1px solid #EFE8D7; } .pag-a { flex: 1; min-width: 0; font-family: Newsreader, serif; font-size: 15px; line-height: 1.3; color: #26201A; } .pag-kommun { display: block; color: #8A7F70; font-style: italic; font-size: 13px; line-height: 1.25; } .pag-chip { flex: none; font-family: Archivo, sans-serif; font-size: 11px; font-weight: 600; border-radius: 3px; padding: 1px 7px; white-space: nowrap; } .pag-chip.soon { color: #7D3B2F; background: #F0E7D8; border: 1px solid #E0C9BD; } .pag-chip.far { color: #8A7F70; background: #F1ECDD; border: 1px solid #E3DCCB; } .pag-chip.start { color: #57503F; background: transparent; border: 1px dashed #CDBFA6; } @media (max-width: 560px) { .pag-grid { columns: 1; } } .empty { margin: 40px 0; font-family: Newsreader, serif; font-style: italic; font-size: 17px; color: #57503F; } .day { margin-top: 30px; } .day-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; border-top: 2px solid #26201A; padding-top: 9px; } .dayname { margin: 0; font-family: Newsreader, serif; font-weight: 600; font-size: 21px; letter-spacing: -0.01em; color: #26201A; } .dayname.sunday { color: #C0271C; } .today-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #C0271C; } .week { font-size: 11px; letter-spacing: 0.1em; color: #8A7F70; font-variant-numeric: tabular-nums; } .ev { display: grid; grid-template-columns: 58px 1fr; gap: 14px; padding: 12px 0; border-top: 1px solid #E6DECF; color: #26201A; } .ev:hover { background: #F4EEE2; text-decoration: none; color: #26201A; } .ev-time { padding-top: 4px; } .ev-time .t { font-size: 14px; font-weight: 600; color: #57503F; font-variant-numeric: tabular-nums; } .ev-time .t.allday { font-size: 12px; } .ev-time .until { font-size: 11px; color: #A79C8B; font-variant-numeric: tabular-nums; } .ev-body { min-width: 0; } .kick { font-size: 10px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: #8A7F70; } .ev-title { margin-top: 2px; font-family: Newsreader, serif; font-weight: 500; font-size: 19px; line-height: 1.25; text-wrap: pretty; } .ev-meta { margin-top: 3px; font-size: 13px; color: #6B6257; } .ev-meta .free { color: #7D3B2F; font-weight: 500; } .ev-area { display: inline-flex; align-items: center; gap: 3px; margin-left: 7px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: #7D3B2F; background: #F0E7D8; border-radius: 4px; padding: 1px 6px 1px 5px; vertical-align: 1px; white-space: nowrap; } .ev-area svg { flex: none; opacity: 0.85; } .more { border-top: 2px solid #26201A; margin-top: 30px; } .more button { display: block; width: 100%; background: none; border: none; padding: 14px 0; margin: 0; cursor: pointer; text-align: left; font-family: Archivo, sans-serif; font-size: 14px; font-weight: 600; color: #7D3B2F; } .more button[disabled] { color: #8A7F70; cursor: wait; } .beyond { border-top: 1px solid #E6DECF; margin-top: 30px; padding-top: 12px; font-size: 13px; color: #6B6257; line-height: 1.65; } .beyond p { margin: 0 0 6px; } .beyond .lazy-note { color: #7D3B2F; } footer { margin-top: 54px; border-top: 1px solid #E6DECF; padding-top: 16px; font-size: 13px; color: #6B6257; line-height: 1.65; } footer p { margin: 0; } footer .perkommun { margin-top: 10px; } /* En rad per län; etiketten bär raden, så listan går att skanna på länsnivå utan att "Evenemang i" upprepas per länk. Hängande indrag: en länsrad radbryts alltid på mobil, och utan indraget läses fortsättningsraden som en ny grupp. Litet och länsnamnsoberoende (inte en kolumn ställd efter etikettens bredd) – gutter är dyrare än symmetri på 360px. */ footer .perkommun-lan { margin-top: 3px; padding-left: 1.2em; text-indent: -1.2em; } footer .perkommun-lan .pk-lan { font-weight: 600; color: #26201A; } footer .gen { margin-top: 6px; color: #8A7F70; } /* Granskningsläge (?granska=1): elementen nedan injiceras av JS och finns ALDRIG i den publika markupen – reglerna är döda för besökaren. */ .granska .ev { position: relative; padding-right: 30px; } .granska .ev .gflag { position: absolute; right: 0; top: 10px; } .gflag { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; cursor: pointer; font-size: 13px; line-height: 1; color: #C0271C; background: #F0E7D8; border: 1px solid #E0C9BD; border-radius: 6px; user-select: none; } .gflag:hover { background: #E6DECF; } #granska-bar { position: fixed; right: 12px; bottom: 12px; z-index: 30; display: flex; align-items: center; gap: 10px; background: #26201A; color: #FAF7F2; border-radius: 999px; padding: 7px 8px 7px 14px; font-family: Archivo, sans-serif; font-size: 12px; letter-spacing: 0.02em; box-shadow: 0 2px 10px rgba(38,32,26,0.25); } #granska-bar button { background: #FAF7F2; color: #26201A; border: none; border-radius: 999px; padding: 4px 11px; font: inherit; font-weight: 600; cursor: pointer; } #granska-toast { position: fixed; left: 12px; right: 12px; bottom: 58px; z-index: 31; margin: 0 auto; max-width: 30rem; background: #26201A; color: #FAF7F2; border-radius: 10px; padding: 9px 13px; font-family: Archivo, sans-serif; font-size: 12px; line-height: 1.45; box-shadow: 0 2px 10px rgba(38,32,26,0.25); } #granska-toast[hidden] { display: none; } .kommun { margin-top: 34px; } .kommun-head { display: flex; align-items: baseline; gap: 14px; border-top: 2px solid #26201A; padding-top: 9px; } .kommun-head h2 { margin: 0; font-family: Newsreader, serif; font-weight: 600; font-size: 24px; letter-spacing: -0.01em; } .ksum { font-size: 11px; letter-spacing: 0.1em; color: #8A7F70; font-variant-numeric: tabular-nums; } .klabel { margin: 18px 0 0; font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #7D3B2F; } .klabel.dim { margin-top: 22px; color: #8A7F70; } .src { display: grid; grid-template-columns: 58px 1fr; gap: 14px; padding: 12px 0; border-top: 1px solid #E6DECF; } .src.inte { padding: 10px 0; } .src-count { padding-top: 3px; font-size: 13px; font-weight: 600; color: #57503F; font-variant-numeric: tabular-nums; } .src-count.dash { font-weight: 400; color: #C9BFAE; } .src-body { min-width: 0; } .src-name { font-family: Newsreader, serif; font-weight: 500; font-size: 18px; line-height: 1.3; } .src-name a { color: #26201A; } .src-name a:hover { color: #7D3B2F; } .src-desc { margin-top: 2px; font-size: 13px; color: #6B6257; text-wrap: pretty; } .src-cal { margin-top: 4px; font-size: 13px; } .inte-name { font-family: Newsreader, serif; font-weight: 500; font-size: 17px; line-height: 1.3; color: #57503F; } .inte-name a { color: inherit; } .inte-name a:hover { color: #7D3B2F; } .inte-reason { margin-top: 2px; font-size: 13px; color: #8A7F70; font-style: italic; font-family: Newsreader, serif; text-wrap: pretty; } .tipsa { margin-top: 34px; border-top: 2px solid #7D3B2F; padding-top: 10px; } .tipsa h2 { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #7D3B2F; } .tipsa p { margin: 8px 0 0; font-family: Newsreader, serif; font-size: 16px; line-height: 1.5; color: #26201A; max-width: 56ch; text-wrap: pretty; } footer .back { margin-top: 6px; } /* Rubriken är ETT ord ("Källor") och behöver inte kalendariets clamp – där är h1:n en fras ("Evenemang i Smedjebacken") som bryter på smala skärmar. */ .p-kallor h1 { font-size: 42px; } /* Ingressen är en löpande mening, inte kalendariets korta tagline. */ .p-kallor .tagline { max-width: 56ch; text-wrap: pretty; }