/* TRYCKERIET — Nowill som broadsheet.
   Ribban: websites/nowill.co/_referens-awwwards/RIBBAN.md
   Ingen mörk duk, ingen neonaccent, inga versala löpnummeretiketter, ingen glöd.
   Papper, tryckfärg och en dekorfärg. Rytmen är en tidnings, inte en landningssidas. */

@font-face{font-family:Zodiak;src:url(fonts/zodiak-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Zodiak;src:url(fonts/zodiak-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Erode;src:url(fonts/erode-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Erode;src:url(fonts/erode-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Erode;src:url(fonts/erode-700.woff2) format('woff2');font-weight:700;font-display:swap}

*{margin:0;padding:0;box-sizing:border-box}

:root{
  --papper:#f2eee4;      /* varmt tidningspapper */
  --papper-2:#e9e4d7;    /* skuggad spalt */
  --black:#17140f;       /* tryckfärg, aldrig ren svart */
  --grå:#5a5449;         /* mörkad från #6d675b: pappersoverlayen åt marginalen till 4,5:1 */
  --dekor:#b4331f;       /* tryckt cinnober. Matt. Aldrig glöd. */
  --regel:rgba(23,20,15,.22);
  --regel-tunn:rgba(23,20,15,.13);
  --marginal:clamp(1.1rem,3.4vw,3rem);
}

html{overflow-x:clip;scroll-behavior:auto}
body{
  background:var(--papper);color:var(--black);
  font-family:Erode,Georgia,serif;font-weight:400;
  font-size:clamp(.95rem,1.02vw,1.06rem);line-height:1.52;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

/* pappersfibern — låg, varm, oregelbunden. Inte "korn på mörkt". */
.papper{
  position:fixed;inset:0;z-index:100;pointer-events:none;
  opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23f)' opacity='0.42'/%3E%3C/svg%3E");
}

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

/* ══════════ HUVUDET ══════════ */
.huvud{padding:clamp(.8rem,1.8vw,1.4rem) var(--marginal) 0}

.huvud__ovan,.huvud__under{
  display:flex;justify-content:space-between;gap:1rem;
  font-size:.7rem;letter-spacing:.03em;color:var(--grå);
  padding:.5rem 0;
}
.huvud__ovan{border-bottom:1px solid var(--regel-tunn)}
.huvud__under{
  border-top:1px solid var(--black);border-bottom:3px solid var(--black);
  font-weight:500;color:var(--black);
}
.huvud__under .dekor{color:var(--dekor)}
@media (max-width:700px){
  .huvud__ovan span:nth-child(2),.huvud__under span:nth-child(3){display:none}
}

.titel{
  font-family:Zodiak,serif;font-weight:700;
  font-size:clamp(4.5rem,19vw,17rem);line-height:.8;
  text-align:center;letter-spacing:-.035em;
  padding:clamp(.6rem,1.5vw,1.2rem) 0 clamp(.4rem,1vw,.8rem);
}
.titel a{text-decoration:none;display:block}

.lopsedel{
  display:flex;gap:clamp(1.2rem,3vw,2.6rem);justify-content:center;
  padding:.75rem 0;border-bottom:1px solid var(--regel);
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
}
.lopsedel a{
  text-decoration:none;padding-bottom:2px;
  border-bottom:1px solid transparent;transition:border-color .25s ease,color .25s ease;
}
.lopsedel a:hover{border-bottom-color:var(--dekor);color:var(--dekor)}

/* ══════════ ETTAN ══════════ */
.ettan{
  display:grid;grid-template-columns:1fr 15.5rem;
  gap:0 clamp(1.4rem,3vw,2.6rem);
  padding:clamp(1.6rem,3.5vw,3rem) var(--marginal) 0;
  align-items:start;
}
@media (max-width:900px){.ettan{grid-template-columns:1fr}}

.vinjett{
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dekor);font-weight:700;margin-bottom:.9rem;
}

.rubrik{
  font-family:Zodiak,serif;font-weight:400;
  font-size:clamp(2.3rem,6.4vw,5.5rem);line-height:1.02;letter-spacing:-.024em;
  text-wrap:balance;
}
/* bild satt som ord — sitter på baslinjen mellan orden, i ordets höjd */
.ordbild{
  display:inline-block;vertical-align:baseline;
  width:clamp(3.4rem,9.5vw,8.6rem);height:clamp(1.7rem,4.4vw,3.9rem);
  overflow:hidden;position:relative;top:.06em;
  margin:0 .12em;
  background:var(--papper-2);
}
.ordbild img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.16) brightness(1.04);
  /* tryckets punktraster, inte ett fotofilter */
  mix-blend-mode:multiply;
}

.underrubrik{
  font-family:Erode,serif;font-weight:500;
  font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.42;
  margin:1.3rem 0 1.6rem;max-width:44ch;color:#332e26;
  padding-bottom:1.4rem;border-bottom:1px solid var(--regel);
}

.spalter{columns:3;column-gap:clamp(1.2rem,2.4vw,2.2rem);column-rule:1px solid var(--regel-tunn)}
@media (max-width:1100px){.spalter{columns:2}}
@media (max-width:620px){.spalter{columns:1}}
.spalter p{margin-bottom:.85rem;text-align:justify;hyphens:auto}
.spalter p:last-child{margin-bottom:0}

/* anfang — riktig tryckeritradition, inte dekoration */
.anslag::first-letter{
  font-family:Zodiak,serif;font-weight:700;
  float:left;font-size:3.5em;line-height:.78;
  padding:.07em .09em 0 0;color:var(--dekor);
}
.signatur{font-style:italic;color:var(--grå);text-align:left!important}

/* höger räl — innehållsförteckningen */
.ettan__rail{
  border-left:1px solid var(--regel);padding-left:clamp(1rem,1.8vw,1.6rem);
  position:sticky;top:1.2rem;
}
@media (max-width:900px){
  .ettan__rail{border-left:0;border-top:3px double var(--black);padding:1.4rem 0 0;margin-top:2rem;position:static}
}
.rail__rubrik{
  font-family:Zodiak,serif;font-weight:700;font-size:1.16rem;
  padding-bottom:.5rem;margin-bottom:.7rem;border-bottom:2px solid var(--black);
}
.innehall{list-style:none;counter-reset:i}
.innehall li{border-bottom:1px solid var(--regel-tunn)}
.innehall a{
  display:flex;align-items:baseline;gap:.5rem;
  padding:.44rem 0;text-decoration:none;font-size:.85rem;line-height:1.3;
  transition:color .2s ease;
}
.innehall a:hover{color:var(--dekor)}
.innehall .namn{flex:1;min-width:0}
/* punktledare, som i ett verkligt register — måste fylla ut hela gapet,
   annars är det bara ett streck och inte en ledare */
.innehall .ledare{
  flex:1 1 auto;min-width:1.2rem;
  border-bottom:1px dotted var(--regel);transform:translateY(-.22em);
}
.innehall .sid{font-variant-numeric:tabular-nums;color:var(--grå);font-size:.78rem}
.rail__fot{
  margin-top:.9rem;font-family:Zodiak,serif;font-size:1rem;color:var(--dekor);
}

/* ══════════ SEKTIONSHUVUD ══════════ */
.sektionshuvud{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  margin:clamp(3.4rem,7vw,6rem) 0 clamp(1.2rem,2vw,1.8rem);
  padding-bottom:.5rem;border-bottom:3px double var(--black);
}
.sektionshuvud h2{
  font-family:Zodiak,serif;font-weight:700;
  font-size:clamp(1.5rem,3.4vw,2.7rem);letter-spacing:-.02em;
}
.sektionshuvud span{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--grå)}

/* ══════════ UPPSLAGET — tjänsterna som artiklar ══════════ */
.uppslaget,.notiser,.annonsen{padding:0 var(--marginal)}

.artiklar{
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:0 clamp(1.2rem,2.4vw,2.2rem);
}
@media (max-width:860px){.artiklar{grid-template-columns:1fr}}

.artikel{
  grid-column:span 4;
  padding:1.4rem 0 1.6rem;
  border-top:1px solid var(--regel);
  position:relative;
}
/* asymmetrin är avsiktlig: nyheten högst upp får bredare spalt,
   precis som en tidnings förstaspalt. Aldrig tolv lika celler. */
.artikel--bred{grid-column:span 8}
.artikel--halv{grid-column:span 6}
@media (max-width:860px){.artikel,.artikel--bred,.artikel--halv{grid-column:1/-1}}

/* Sidraden. INTE en versal spärrad löpnummer-etikett — det var precis den
   signaturen som fällde det förra bygget. En tidning skriver "Sid. 6 · Synas"
   i kursiv gemen, och sidnumret är informationen. Löpnumret är borta. */
.artikel__topp{
  font-size:.76rem;font-style:italic;color:var(--grå);
  margin-bottom:.5rem;
}
/* kursiv följd av rak kollapsar optiskt — luften måste tillbaka */
.artikel__topp .avd{font-style:normal;margin-left:.14em}

.artikel h3{
  font-family:Zodiak,serif;font-weight:400;
  font-size:clamp(1.3rem,2.1vw,1.95rem);line-height:1.06;letter-spacing:-.018em;
  margin-bottom:.55rem;
}
.artikel--bred h3{font-size:clamp(1.7rem,3.2vw,2.9rem);font-weight:700}
.artikel__brod{color:#332e26;max-width:52ch}
/* ingressen är fetare och skild från brödtexten — annars flyter de ihop till en klump */
.artikel__brod p{margin-bottom:.7rem}
.artikel__brod p:first-child{font-weight:500;color:var(--black)}
.artikel__brod p:last-child{margin-bottom:0}
.artikel--bred .artikel__brod{columns:2;column-gap:2rem;column-rule:1px solid var(--regel-tunn);max-width:none}
@media (max-width:620px){.artikel--bred .artikel__brod{columns:1}}

.artikel__bild{
  position:relative;overflow:hidden;margin-bottom:.8rem;
  background:var(--papper-2);aspect-ratio:16/10;
}
.artikel--bred .artikel__bild{aspect-ratio:21/9}
.artikel__bild img,.artikel__bild video{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.14);mix-blend-mode:multiply;
  transition:filter .5s ease;
}
.artikel__bild video{position:absolute;inset:0;opacity:0;transition:opacity .5s ease}
/* Tryckfärgen kommer tillbaka i bilden när man går nära — som när bläcket är vått.
   :focus-within och .ar-nara krävs: på touch och via tangentbord finns ingen hover,
   och då hade halva greppet varit osynligt. */
.artikel:hover .artikel__bild img,
.artikel:focus-within .artikel__bild img,
.artikel.ar-nara .artikel__bild img{filter:grayscale(.15) contrast(1.02)}
.artikel:hover .artikel__bild video,
.artikel:focus-within .artikel__bild video,
.artikel.ar-nara .artikel__bild video{opacity:1}
.artikel__bildtext{
  font-size:.68rem;color:var(--grå);padding-top:.34rem;
  border-top:1px solid var(--regel-tunn);margin-bottom:.7rem;
}

/* utbrutet citat — de två artiklar som saknar bild bär ett satt citat i stället.
   Hängande citattecken i dekorfärg, som i en verklig tidnings utbrytning. */
.utbrutet{
  font-family:Zodiak,serif;font-weight:400;
  font-size:clamp(1.15rem,1.8vw,1.6rem);line-height:1.24;
  padding:.9rem 0 1rem;margin-bottom:.9rem;
  border-top:1px solid var(--regel);border-bottom:1px solid var(--regel);
  text-indent:-.42em;
}
.utbrutet::before,.utbrutet::after{content:"\201D";color:var(--dekor)}

.artikel__lank{
  display:inline-block;margin-top:.7rem;
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500;
  text-decoration:none;color:var(--dekor);
  border-bottom:1px solid transparent;transition:border-color .25s ease;
}
.artikel:hover .artikel__lank{border-bottom-color:var(--dekor)}

/* ══════════ NOTISER ══════════ */
.notis-rad{
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:0 clamp(1rem,2vw,1.8rem);
}
@media (max-width:980px){.notis-rad{grid-template-columns:repeat(2,1fr);gap:0 1.4rem}}
@media (max-width:560px){.notis-rad{grid-template-columns:1fr}}
.notis{
  padding:1rem 0 1.2rem;border-top:1px solid var(--regel);
}
.notis + .notis{border-left:1px solid var(--regel-tunn);padding-left:clamp(.8rem,1.6vw,1.4rem)}
@media (max-width:980px){.notis + .notis{border-left:0;padding-left:0}}
.notis h3{
  font-family:Zodiak,serif;font-weight:700;font-size:1.02rem;line-height:1.18;
  margin-bottom:.4rem;
}
.notis p{font-size:.86rem;color:#332e26}

/* ══════════ ANNONSEN ══════════ */
.annonsen{padding-bottom:clamp(3rem,6vw,5rem)}
.annons{
  margin:clamp(3rem,6vw,5rem) auto 0;max-width:46rem;
  border:2px solid var(--black);padding:clamp(1.6rem,3.4vw,3rem);
  text-align:center;position:relative;
  background:var(--papper-2);
}
/* dubbelram, som en verklig annonsram i en tidning */
.annons::after{
  content:"";position:absolute;inset:6px;border:1px solid var(--black);pointer-events:none;
}
.annons__topp{
  font-size:.64rem;letter-spacing:.34em;text-transform:uppercase;color:var(--grå);
  margin-bottom:1.1rem;
}
.annons h2{
  font-family:Zodiak,serif;font-weight:700;
  font-size:clamp(1.9rem,5vw,3.6rem);line-height:1.02;letter-spacing:-.025em;
}
.annons__brod{
  margin:1.1rem auto 1.7rem;max-width:40ch;color:#332e26;
}
.annons__fot{margin-top:1.4rem;font-size:.72rem;letter-spacing:.06em;color:var(--grå)}

/* stämpeln — knappen. Tryckt, inte klickbar-glansig. */
.stampel{
  display:inline-block;text-decoration:none;
  background:var(--dekor);color:var(--papper);
  font-family:Zodiak,serif;font-weight:700;font-size:1.05rem;
  padding:.62em 1.9em;border:2px solid var(--dekor);
  transition:background .25s ease,color .25s ease;
}
.stampel:hover{background:transparent;color:var(--dekor)}

/* ══════════ KOLOFON ══════════ */
.kolofon{
  border-top:3px double var(--black);margin:0 var(--marginal);
  padding:clamp(1.4rem,3vw,2.4rem) 0 clamp(2rem,4vw,3rem);
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem clamp(1rem,2vw,2rem);
}
@media (max-width:760px){.kolofon{grid-template-columns:repeat(2,1fr)}}
.kolofon h4{
  font-family:Zodiak,serif;font-weight:700;font-size:.92rem;margin-bottom:.35rem;
}
.kolofon p{font-size:.78rem;color:var(--grå);line-height:1.5}
.kolofon__rad{
  grid-column:1/-1;padding-top:1.1rem;margin-top:.4rem;
  border-top:1px solid var(--regel-tunn);
  font-size:.7rem;letter-spacing:.08em;color:var(--grå);
}

/* ══════════ RÖRELSE ══════════
   Allt är avstängt tills JS sätter .satt — annars blinkar innehållet fram
   före första bildrutan. */
[data-satt] .ord{display:inline-block;will-change:transform,filter,opacity}
.regel-doljs{transform:scaleX(0);transform-origin:left center}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  [data-satt] .ord{opacity:1!important;transform:none!important;filter:none!important}
  .regel-doljs{transform:none}
}