/* Bo i Nynäshamn — hela sajtens stilmall. Egen fil, inget delat underlag.
   Uppbyggd på element och id, inte på klasser. */

:root{
  --black:#0F1A1C;
  --deep:#062B31;
  --sea:#0A6A72;
  --sea-l:#4C9DA3;
  --pale:#EDF3F2;
  --paper:#FFFFFF;
  --rule:#C9D8D6;
  --rule-d:rgba(255,255,255,.22);
  --dim:#5C6C6D;
  --body:#3B4A4B;
  --meas:1180px;
  --gut:26px;
  --skylt:'Barlow Condensed','Arial Narrow',Helvetica,sans-serif;
  --brod:'Newsreader',Georgia,'Times New Roman',serif;
}

/* ---------- grund ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--black);
  font-family:var(--brod); font-size:17px; line-height:1.62;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; border:0; }
a{ color:var(--sea); text-decoration:none; }
a:hover{ color:var(--black); }
p{ margin:0 0 18px; }
ul,ol{ margin:0 0 18px; padding-left:22px; }
h1,h2,h3,h4{ font-family:var(--brod); font-weight:600; line-height:1.1; margin:0 0 12px; color:var(--black); }
button{ font:inherit; }
hr{ border:0; margin:0; }
:focus-visible{ outline:2px solid var(--sea-l); outline-offset:2px; }

/* ---------- överkant: en rad fakta ---------- */
#tidvatten{
  border-bottom:1px solid var(--rule);
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;
  gap:6px 18px; max-width:var(--meas); margin:0 auto; padding:8px var(--gut);
  font-family:var(--skylt); font-size:14px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dim);
}
#tidvatten p{ margin:0; }
#tidvatten p:last-child{ display:flex; gap:20px; }
#tidvatten a{ color:var(--dim); }
#tidvatten a:hover{ color:var(--sea); }

/* ---------- huvud ---------- */
body > header{ background:var(--deep); color:#fff; }
body > header > h1,
body > header form label{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; margin:-1px; padding:0; border:0;
}
#skylten{
  display:block; max-width:var(--meas); margin:0 auto; padding:30px var(--gut) 0;
  font-family:var(--skylt); font-weight:700; font-size:clamp(44px,7.4vw,96px);
  line-height:.92; text-transform:uppercase; color:#fff;
}
#skylten:hover{ color:#fff; }
#skylten b{ font-weight:700; color:var(--sea-l); }
body > header > p{
  max-width:var(--meas); margin:12px auto 0; padding:0 var(--gut);
  font-family:var(--skylt); font-size:16px; letter-spacing:.13em;
  text-transform:uppercase; color:rgba(255,255,255,.62);
}
#lucka{ display:none; }

#ledstangen{
  max-width:var(--meas); margin:26px auto 0; padding:0 var(--gut);
  border-top:1px solid var(--rule-d);
  display:flex; flex-wrap:wrap; align-items:stretch;
}
#ledstangen > a{
  font-family:var(--skylt); font-size:17px; letter-spacing:.11em;
  text-transform:uppercase; color:rgba(255,255,255,.86);
  padding:15px 20px; border-right:1px solid var(--rule-d);
}
#ledstangen > a:first-of-type{ padding-left:0; }
#ledstangen > a:hover{ color:#fff; background:rgba(255,255,255,.06); }
#ledstangen > a[aria-current]{ color:var(--deep); background:var(--sea-l); }
#ledstangen form{ margin-left:auto; display:flex; align-items:center; }
#ledstangen input{
  background:transparent; border:0; border-bottom:1px solid var(--rule-d);
  color:#fff; font-family:var(--skylt); font-size:16px; letter-spacing:.08em;
  text-transform:uppercase; padding:8px 4px; width:150px; outline:none;
}
#ledstangen input::placeholder{ color:rgba(255,255,255,.45); }
#ledstangen input:focus{ border-bottom-color:var(--sea-l); }
#ledstangen button{
  background:none; border:0; color:rgba(255,255,255,.8); cursor:pointer;
  padding:8px 6px; line-height:0;
}
#ledstangen button:hover{ color:#fff; }

/* horisonten — ritad linje, samma i huvud och fot */
body > header hr{
  height:170px; margin-top:12px;
  background:var(--deep) url('/images/ny-horisont.png') center bottom / cover no-repeat;
}
body > footer hr{
  height:72px;
  background:var(--deep) url('/images/ny-horisont.png') center bottom / cover no-repeat;
}

/* ---------- band ---------- */
main{ display:block; }
main > section{ padding:52px 0; }
main > section:nth-of-type(even){ background:var(--pale); }
main > section > div{ max-width:var(--meas); margin:0 auto; padding:0 var(--gut); }

/* avdelningsrubrik: kursiv kicker till vänster, namnet till höger, hårfin linje emellan */
main > section > div > h2{
  position:relative; display:flex; align-items:baseline; gap:18px;
  margin:0 0 26px; font-size:30px; font-weight:600;
}
main > section > div > h2::before{
  content:""; position:absolute; left:0; right:0; top:.64em; height:1px; background:var(--rule);
}
main > section > div > h2 > small{
  position:relative; background:var(--paper); padding-right:14px;
  font-family:var(--brod); font-style:italic; font-weight:400; font-size:18px;
  letter-spacing:0; text-transform:none; color:var(--sea);
}
main > section:nth-of-type(even) > div > h2 > small{ background:var(--pale); }
main > section > div > h2 > a,
main > section > div > h2 > span{
  position:relative; margin-left:auto; background:var(--paper); padding-left:16px;
  color:var(--black); text-align:right;
}
main > section:nth-of-type(even) > div > h2 > a,
main > section:nth-of-type(even) > div > h2 > span{ background:var(--pale); }
main > section > div > h2 > a:hover{ color:var(--sea); }

/* länken sist i ett band */
main > section > div > footer{ margin-top:24px; }
main > section > div > footer a{
  font-family:var(--skylt); font-size:15px; letter-spacing:.12em; text-transform:uppercase;
}

/* ---------- startsidans toppuppslag: text vänster, bild ut i kanten ---------- */
#toppen{ padding:52px 0 0 !important; background:var(--paper) !important; }
#toppen > article{
  display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:0 46px; align-items:center;
  padding-left:max(var(--gut),calc((100vw - var(--meas))/2)); padding-right:0;
}
#toppen > article > div:first-child{ padding-bottom:6px; }
#toppen em{
  display:block; font-style:italic; font-size:19px; color:var(--sea); margin-bottom:8px;
}
#toppen h2{ font-size:clamp(32px,3.9vw,52px); font-weight:600; line-height:1.06; margin:0 0 16px; }
#toppen h2 a{ color:var(--black); }
#toppen h2 a:hover{ color:var(--sea); }
#toppen p{ font-size:19px; color:var(--body); margin:0 0 18px; max-width:44ch; }
#toppen footer{
  font-family:var(--skylt); font-size:15px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--dim); border-top:2px solid var(--black); padding-top:10px;
  display:flex; flex-wrap:wrap; gap:6px 18px;
}
#toppen > article > a{ display:block; }
#toppen > article > a img{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }

/* dagens tre — numrerad rad under toppuppslaget */
#dagens{
  list-style:none; margin:44px auto 0; padding:0 var(--gut) 52px;
  max-width:var(--meas); display:grid; grid-template-columns:repeat(3,1fr); gap:0;
}
#dagens > li{
  padding:18px 26px 0; border-top:2px solid var(--black); border-right:1px solid var(--rule);
  counter-increment:rad;
}
#dagens > li:first-child{ padding-left:0; }
#dagens > li:last-child{ border-right:0; padding-right:0; }
#dagens time{
  font-family:var(--skylt); font-size:14px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim); display:block; margin-bottom:8px;
}
#dagens h3{ font-size:22px; font-weight:600; line-height:1.14; }
#dagens h3 a{ color:var(--black); }
#dagens h3 a:hover{ color:var(--sea); }
#dagens p{ font-size:16px; color:var(--body); }

/* ---------- mörkt band med årtal ---------- */
:is(#artalen,#siffror){ background:var(--deep); color:rgba(255,255,255,.78); }
:is(#artalen,#siffror) h2{ color:#fff; }
:is(#artalen,#siffror) > div > h2::before{ background:var(--rule-d); }
:is(#artalen,#siffror) > div > h2 > small{ background:var(--deep); color:var(--sea-l); }
:is(#artalen,#siffror) > div > h2 > span{ background:var(--deep); color:#fff; }
:is(#artalen,#siffror) dl{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin:0; }
:is(#artalen,#siffror) dl > div{ padding:0 30px; border-left:1px solid var(--rule-d); }
:is(#artalen,#siffror) dl > div:first-child{ padding-left:0; border-left:0; }
:is(#artalen,#siffror) dt{
  font-family:var(--skylt); font-weight:700; font-size:52px; line-height:1;
  color:var(--sea-l); margin-bottom:6px;
}
:is(#artalen,#siffror) dd{ margin:0; }
:is(#artalen,#siffror) dd h3{
  font-family:var(--skylt); font-size:20px; letter-spacing:.08em; text-transform:uppercase;
  color:#fff; margin-bottom:8px;
}
:is(#artalen,#siffror) dd p{ font-size:16px; color:rgba(255,255,255,.76); margin:0; }
:is(#artalen,#siffror) dd a{ color:var(--sea-l); text-decoration:underline; text-underline-offset:2px; }

/* ---------- listor med bild ---------- */
main section > div > div{ display:grid; grid-template-columns:repeat(2,1fr); gap:34px 40px; }
main section > div > div > article{
  display:grid; grid-template-columns:210px minmax(0,1fr); gap:18px; align-items:start;
}
main section > div > div > article > a img{
  display:block; width:210px; aspect-ratio:16/9; object-fit:cover; background:var(--pale);
}
main section > div > div > article time{
  font-family:var(--skylt); font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim); display:block; margin-bottom:6px;
}
main section > div > div > article h3{ font-size:22px; font-weight:600; line-height:1.14; margin-bottom:7px; }
main section > div > div > article h3 a{ color:var(--black); }
main section > div > div > article h3 a:hover{ color:var(--sea); }
main section > div > div > article p{ font-size:16px; color:var(--body); margin:0; }

/* forsta objektet i listan far mer plats — rytm i stapeln */
main section > div > div > article:first-child{
  grid-column:1/-1; grid-template-columns:360px minmax(0,1fr); gap:26px;
  padding-bottom:30px; border-bottom:1px solid var(--rule);
}
main section > div > div > article:first-child > a img{ width:360px; }
main section > div > div > article:first-child h3{ font-size:29px; }
main section > div > div > article:first-child p{ font-size:17px; }

/* listor utan bild */
main section > div > ul{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:0 46px;
}
main section > div > ul > li{ border-bottom:1px solid var(--rule); }
main section > div > ul > li > a{ display:block; padding:18px 0; color:var(--black); }
main section > div > ul > li > a:hover{ color:var(--sea); }
main section > div > ul time{
  font-family:var(--skylt); font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim); display:block; margin-bottom:4px;
}
main section > div > ul strong{ font-weight:600; font-size:21px; line-height:1.16; display:block; }

/* ---------- uppslaget längst ned på startsidan ---------- */
#uppslaget > div > div{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
#uppslaget > div > div > section{ padding:0 26px; border-left:1px solid var(--rule); }
#uppslaget > div > div > section:first-child{ padding-left:0; border-left:0; }
#uppslaget h3{
  font-family:var(--skylt); font-size:17px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--sea); margin-bottom:12px;
}
#uppslaget ul{ list-style:none; margin:0; padding:0; }
#uppslaget li{ font-size:16px; padding:6px 0; border-bottom:1px solid var(--rule); }
#uppslaget li:last-child{ border-bottom:0; }
#uppslaget a{ color:var(--black); }
#uppslaget a:hover{ color:var(--sea); }

/* siffror med punktlinje — samma grepp i foten */
#uppslaget dl,body > footer dl{ margin:0; }
#uppslaget dl > div,body > footer dl > div{ display:flex; align-items:baseline; gap:8px; padding:6px 0; font-size:16px; }
#uppslaget dt,body > footer dt{ white-space:nowrap; }
#uppslaget dl > div > dt::after,body > footer dl > div > dt::after{
  content:""; display:inline-block; width:0;
}
#uppslaget dl > div > *:first-child{ flex:0 0 auto; }
#uppslaget dl > div::after,body > footer dl > div::after{
  content:""; order:1; flex:1 1 auto; border-bottom:1px dotted var(--rule); transform:translateY(-4px);
}
#uppslaget dd,body > footer dd{
  margin:0; order:2; flex:0 0 auto;
  font-family:var(--skylt); font-weight:600; letter-spacing:.04em; font-size:18px;
}
body > footer dl > div::after{ border-bottom-color:var(--rule-d); }

/* ---------- artikel och statiska sidor ---------- */
main > article{ max-width:840px; margin:0 auto; padding:46px var(--gut) 10px; }
main > article > figure{ margin:0 0 26px; }
main > article > figure img{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
main > article > header{ margin-bottom:30px; }
main > article > header h1{
  font-size:clamp(32px,4.2vw,52px); font-weight:600; line-height:1.06;
  max-width:24ch; margin:0 0 14px;
}
main > article > header p{
  font-family:var(--skylt); font-size:15px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--dim); border-top:2px solid var(--black); padding-top:10px; margin:0;
}
#brodtext{ font-size:19px; }
#brodtext p{ margin:0 0 20px; }
#brodtext h2{
  font-size:29px; font-weight:600; margin:34px 0 12px;
  border-top:1px solid var(--rule); padding-top:16px;
}
#brodtext h3{ font-size:23px; margin:26px 0 10px; }
#brodtext a{ text-decoration:underline; text-underline-offset:2px; }
#brodtext ul,#brodtext ol{ margin:0 0 20px 22px; padding:0; }
#brodtext li{ margin-bottom:7px; }
#brodtext img{ display:block; height:auto; margin:22px 0; }
#brodtext blockquote{
  border-left:2px solid var(--sea); margin:26px 0; padding:2px 0 2px 20px;
  font-style:italic; color:#33484A;
}
#brodtext table{ width:100%; border-collapse:collapse; margin:18px 0; font-size:16px; }
#brodtext th,#brodtext td{ border:1px solid var(--rule); padding:9px 11px; text-align:left; }
#brodtext thead tr{ background:var(--pale); }
#brodtext th{ font-family:var(--skylt); letter-spacing:.08em; text-transform:uppercase; font-weight:600; }

/* betyget: en rad, ingen ruta */
#nyttan{
  margin:36px 0 0; padding-top:14px; border-top:1px solid var(--rule);
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px;
  font-family:var(--skylt); font-size:15px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--dim);
}
#nyttan > span{ display:flex; gap:2px; }
#nyttan button{
  background:none; border:0; cursor:pointer; padding:0 1px; line-height:1;
  font-size:23px; color:var(--rule);
}
#nyttan button[aria-pressed="true"]{ color:var(--sea); }
#nyttan output{ color:var(--dim); }

/* ---------- register och sökträffar ---------- */
#blad{
  margin-top:30px; font-family:var(--skylt); font-size:15px;
  letter-spacing:.1em; text-transform:uppercase;
}
#blad a,#blad span{
  display:inline-block; padding:6px 12px; margin:0 6px 6px 0;
  border:1px solid var(--rule); color:var(--black);
}
#blad a:hover{ background:var(--sea); color:#fff; border-color:var(--sea); }
#blad span{ color:var(--dim); }
#blad b{ background:var(--sea); color:#fff; border-color:var(--sea); font-weight:400;
  display:inline-block; padding:6px 12px; margin:0 6px 6px 0; border:1px solid var(--sea); }

/* ---------- bildsidan ---------- */
#serien > div{ display:grid; grid-template-columns:repeat(2,1fr); gap:34px 40px; }
#serien figure{ margin:0; }
#serien img{ display:block; width:100%; height:auto; }
#serien figcaption{
  margin-top:10px; font-size:16px; color:var(--dim); line-height:1.5;
  border-top:1px solid var(--rule); padding-top:8px;
}
#serien figcaption b{
  display:block; font-weight:600; font-size:19px; color:var(--black);
}

/* ---------- formuläret ---------- */
#brevet{ max-width:640px; }
#brevet > div{ margin-bottom:18px; display:block; }
#brevet label{
  display:block; font-family:var(--skylt); font-size:15px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--dim); margin-bottom:6px;
}
#brevet input,#brevet select,#brevet textarea{
  width:100%; padding:11px 12px; border:1px solid var(--rule); border-radius:0;
  background:#fff; font-family:var(--brod); font-size:17px; color:var(--black);
}
#brevet input:focus,#brevet select:focus,#brevet textarea:focus{ outline:2px solid var(--sea); outline-offset:-2px; }
#brevet textarea{ resize:vertical; }
#brevet > button{
  background:var(--sea); color:#fff; border:0; cursor:pointer;
  font-family:var(--skylt); font-size:18px; letter-spacing:.14em; text-transform:uppercase;
  padding:13px 34px;
}
#brevet > button:hover{ background:var(--deep); }
#brevet > p{ margin-top:16px; font-size:16px; color:var(--dim); }
#brevet > div[hidden]{ display:none; }

/* ---------- foten ---------- */
body > footer{ background:var(--deep); color:rgba(255,255,255,.72); padding:0 0 30px; }
body > footer > div,body > footer > p,body > footer > aside{
  max-width:var(--meas); margin:0 auto; padding:0 var(--gut);
}
body > footer > div{ padding-top:34px; display:grid; grid-template-columns:2fr 1fr 1fr; gap:44px; }
body > footer h2{
  font-family:var(--skylt); font-size:16px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--sea-l); margin-bottom:12px;
}
body > footer a{ color:rgba(255,255,255,.82); }
body > footer a:hover{ color:#fff; }
body > footer p{ font-size:16px; }
body > footer ul{ list-style:none; margin:0; padding:0; }
body > footer li{ padding:5px 0; border-bottom:1px solid var(--rule-d); font-size:16px; }
body > footer li:last-child{ border-bottom:0; }
body > footer dd{ color:#fff; }
body > footer > p:last-of-type{
  margin-top:30px; padding-top:16px; border-top:1px solid var(--rule-d);
  font-family:var(--skylt); font-size:14px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
}

/* grannsajter */
#grannar{ display:grid; grid-template-columns:repeat(2,1fr); gap:0; margin-top:26px; }
#grannar a{
  display:block; padding:20px 24px; border:1px solid var(--rule-d); margin-left:-1px;
  color:rgba(255,255,255,.82);
}
#grannar a:first-child{ margin-left:0; }
#grannar a:hover{ background:rgba(255,255,255,.05); border-color:var(--sea-l); }
#grannar b{
  display:block; font-family:var(--skylt); font-weight:600; font-size:21px;
  letter-spacing:.02em; color:#fff; margin-bottom:4px;
}
#grannar span{ font-size:16px; color:rgba(255,255,255,.6); }

/* ---------- kakbeskedet: liten lapp nere till höger ---------- */
#samtycket{
  position:fixed; right:24px; bottom:24px; left:auto; top:auto;
  width:min(360px,calc(100vw - 32px)); margin:0; padding:18px 20px;
  border:1px solid var(--sea); border-left:4px solid var(--sea-l);
  background:var(--deep); color:rgba(255,255,255,.86); z-index:60;
}
#samtycket p{ font-size:16px; margin:0 0 12px; }
#samtycket a{ color:var(--sea-l); text-decoration:underline; text-underline-offset:2px; }
#samtycket p:last-child{ margin:0; display:flex; gap:18px; align-items:center; }
#samtycket button{
  background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--skylt); font-size:16px; letter-spacing:.12em; text-transform:uppercase;
  color:#fff; border-bottom:1px solid var(--sea-l);
}
#samtycket button:hover{ color:var(--sea-l); }
#samtycket button + button{ color:rgba(255,255,255,.6); border-bottom-color:transparent; }
#samtycket button + button:hover{ border-bottom-color:var(--rule-d); }

/* ---------- smalare skärmar ---------- */
@media(max-width:1000px){
  #toppen > article{ grid-template-columns:1fr; gap:0; padding:0 var(--gut); }
  #toppen > article > a{ order:-1; margin-bottom:20px; }
  #toppen > article > a img{ aspect-ratio:16/9; }
  main section > div > div{ grid-template-columns:1fr; }
  #uppslaget > div > div{ grid-template-columns:repeat(2,1fr); row-gap:30px; }
  #uppslaget > div > div > section:nth-child(3){ padding-left:0; border-left:0; }
  #serien > div{ grid-template-columns:1fr; gap:26px; }
}
@media(max-width:760px){
  body{ font-size:16px; }
  :root{ --gut:18px; }
  main > section{ padding:34px 0; }
  body > header hr{ height:56px; background-size:100% auto; }
  body > footer hr{ height:44px; background-size:100% auto; }

  #lucka{
    display:flex; align-items:center; gap:10px; max-width:var(--meas); width:100%; margin:18px auto 0; padding:14px var(--gut);
    text-align:left; background:none; border:0; border-top:1px solid var(--rule-d);
    color:#fff; font-family:var(--skylt); font-size:17px; letter-spacing:.14em;
    text-transform:uppercase; cursor:pointer;
  }
  #lucka svg{ transition:transform .18s ease; }
  #lucka[aria-expanded="true"] svg{ transform:rotate(180deg); }
  #ledstangen{ display:none; margin-top:0; border-top:0; flex-direction:column; }
  #ledstangen[data-oppen]{ display:flex; }
  #ledstangen > a{ border-right:0; border-bottom:1px solid var(--rule-d); padding:13px 0; }
  #ledstangen form{ margin:14px 0 20px; width:100%; }
  #ledstangen input{ width:100%; }

  main > section > div > h2{ flex-wrap:wrap; gap:4px; }
  main > section > div > h2::before{ display:none; }
  main > section > div > h2 > small{ padding-right:0; }
  main > section > div > h2 > a,
  main > section > div > h2 > span{
    margin-left:0; padding-left:0; text-align:left; width:100%;
    border-bottom:2px solid var(--black); padding-bottom:8px;
  }
  :is(#artalen,#siffror) > div > h2 > span{ border-bottom-color:var(--rule-d); }

  #dagens{ grid-template-columns:1fr; margin-top:30px; padding-bottom:34px; }
  #dagens > li{ padding:16px 0 6px; border-right:0; }
  :is(#artalen,#siffror) dl{ grid-template-columns:1fr; }
  :is(#artalen,#siffror) dl > div{ padding:22px 0 0; border-left:0; border-top:1px solid var(--rule-d); }
  :is(#artalen,#siffror) dl > div:first-child{ border-top:0; padding-top:0; }
  main section > div > div > article{ grid-template-columns:132px minmax(0,1fr); gap:14px; }
  main section > div > div > article > a img{ width:132px; }
  main section > div > div > article:first-child{ grid-template-columns:1fr; gap:14px; padding-bottom:22px; }
  main section > div > div > article:first-child > a img{ width:100%; }
  main section > div > div > article:first-child h3{ font-size:24px; }
  main section > div > ul{ grid-template-columns:1fr; }
  #uppslaget > div > div{ grid-template-columns:1fr; }
  #uppslaget > div > div > section{ padding:0; border-left:0; }
  body > footer > div{ grid-template-columns:1fr; gap:26px; }
  #grannar{ grid-template-columns:1fr; }
  #grannar a{ margin-left:0; margin-top:-1px; }
  main > article{ padding:28px var(--gut) 10px; }
  #brodtext{ font-size:17px; }
  #brodtext table{ display:block; overflow-x:auto; }
  #samtycket{ right:12px; left:12px; bottom:12px; width:auto; }
}
@media(max-width:430px){
  #tidvatten{ font-size:11px; letter-spacing:.04em; }
  #tidvatten p:last-child{ gap:10px; }
  body > header > p{ font-size:14px; letter-spacing:.08em; }
  main section > div > div > article{ grid-template-columns:110px minmax(0,1fr); gap:12px; }
  main section > div > div > article > a img{ width:110px; }
  main section > div > div > article h3{ font-size:20px; }
  :is(#artalen,#siffror) dt{ font-size:42px; }
}

/* band som alltid ligger på det bleka underlaget, oavsett ordning på sidan */
#uppslaget,#vidare,#formularet,#serien,#kommande{ background:var(--pale); }
#uppslaget > div > h2 > *,#vidare > div > h2 > *,#formularet > div > h2 > *,
#serien > div > h2 > *,#kommande > div > h2 > *{ background:var(--pale); }

/* evenemangslistan har inga bilder */
#kommande > div > div > article{ grid-template-columns:1fr; }

/* liten hjälpruta sist i en text */
#hjalp{
  margin:36px 0 0; padding:20px 22px; background:var(--pale);
  border-left:3px solid var(--sea);
}
#hjalp h2{
  font-family:var(--skylt); font-size:17px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--sea); margin-bottom:10px;
}
#hjalp p{ font-size:16px; margin:0 0 10px; }
#hjalp p:last-child{ margin:0; }