:root{
  --c-primary:#964B00;
  --c-secondary:#D2691E;
  --c-accent:#F5DEB3;
  --c-bg:#f4e7cf;
  --c-text:#2b1d11;
  --c-deep:#5a2b0a;
  --c-black:#1a1208;
  --c-red:#8b1a1a;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--c-bg);
  color:var(--c-text);
  font-family:'Lora',Georgia,serif;
  font-size:17px;
  line-height:1.7;
  counter-reset:section;
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
}

/* Pappersgrain */
body::before{
  content:'';
  position:fixed;inset:0;pointer-events:none;opacity:0.28;z-index:1;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.17 0 0 0 0 0.15 0 0 0 0 0.13 0 0 0 0.35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

h1,h2,h3{
  font-family:'Fraunces',Georgia,serif;
  color:var(--c-deep);
  letter-spacing:0.01em;
}
h1{
  font-size:clamp(2.6rem,6vw,4.6rem);
  font-variation-settings:"SOFT" 70,"opsz" 144;
  font-weight:700;
  line-height:1.05;
  text-shadow:4px 4px 0 var(--c-secondary);
}
h2{
  font-size:clamp(1.8rem,3.6vw,2.6rem);
  font-variation-settings:"SOFT" 30,"opsz" 96;
  font-weight:500;
  margin-bottom:1.2rem;
  text-shadow:3px 3px 0 var(--c-secondary);
}
h3{
  font-size:1.3rem;
  font-weight:500;
  margin-bottom:0.6rem;
}
p{margin-bottom:1rem}

/* === SIGNATUR: TRÄBYGGNADER === */
.trabyggnader{
  position:relative;
  background:
    repeating-linear-gradient(90deg,rgba(90,43,10,0.08) 0,rgba(90,43,10,0.08) 1px,transparent 1px,transparent 7px,rgba(90,43,10,0.04) 7px,rgba(90,43,10,0.04) 14px,transparent 14px,transparent 23px),
    repeating-linear-gradient(90deg,#c8956b 0,#b07d52 60px,#c8956b 120px);
  color:#fff;
  padding:4rem 2rem;
  border-top:6px solid var(--c-deep);
  border-bottom:6px solid var(--c-deep);
}
.trabyggnader h1,.trabyggnader h2{color:#fff5e0;text-shadow:4px 4px 0 var(--c-deep)}

/* === SIGNATUR: RÄFFLADE VÄGGAR === */
.rafflade{
  position:relative;
  display:inline-block;
  padding:0.8rem 1.4rem 0.8rem 2rem;
  background:repeating-linear-gradient(90deg,var(--c-deep) 0,var(--c-deep) 2px,var(--c-accent) 2px,var(--c-accent) 14px,var(--c-primary) 14px,var(--c-primary) 16px,var(--c-accent) 16px,var(--c-accent) 28px);
  color:var(--c-deep);
  border-top:3px solid var(--c-deep);
  border-bottom:3px solid var(--c-deep);
  text-shadow:3px 3px 0 #fff5e0;
}
.rafflade::before,.rafflade::after{content:'';position:absolute;top:0;bottom:0;width:6px;background:var(--c-deep);}
.rafflade::before{left:0}
.rafflade::after{right:0}

.rafflade-vagg{
  background:repeating-linear-gradient(90deg,rgba(150,75,0,0.18) 0,rgba(150,75,0,0.18) 2px,transparent 2px,transparent 22px),var(--c-accent);
  padding:3rem 2rem;
  border-top:4px double var(--c-deep);
  border-bottom:4px double var(--c-deep);
}

/* === SIGNATUR: SVARTA TEGELHUVUDEN === */
.svarta{
  position:relative;
  display:inline-block;
  padding:0.6rem 1.2rem;
  color:#fff5e0;
  background:
    repeating-linear-gradient(0deg,transparent 0,transparent 11px,rgba(255,245,224,0.35) 11px,rgba(255,245,224,0.35) 12px),
    repeating-linear-gradient(90deg,var(--c-black) 0,var(--c-black) 23px,rgba(255,245,224,0.35) 23px,rgba(255,245,224,0.35) 24px,var(--c-black) 24px,var(--c-black) 47px,rgba(255,245,224,0.35) 47px,rgba(255,245,224,0.35) 48px);
  background-color:var(--c-black);
  border:3px solid var(--c-black);
  text-shadow:2px 2px 0 var(--c-deep);
  letter-spacing:0.04em;
}
.tegelhuvud{
  display:block;width:68px;height:46px;margin:0 auto 1rem;
  background:repeating-linear-gradient(0deg,transparent 0,transparent 10px,rgba(255,245,224,0.4) 10px,rgba(255,245,224,0.4) 11px),repeating-linear-gradient(90deg,var(--c-black) 0,var(--c-black) 21px,rgba(255,245,224,0.4) 21px,rgba(255,245,224,0.4) 22px);
  background-color:var(--c-black);
  border:2px solid var(--c-black);
  box-shadow:0 -8px 0 -2px var(--c-black),4px 4px 0 var(--c-deep);
  position:relative;
}
.tegelhuvud::before{content:'';position:absolute;top:-14px;left:-6px;right:-6px;height:8px;background:var(--c-black);border:2px solid var(--c-black);}

/* === SIGNATUR: RÖDA FÄRGER === */
.roda{
  background:var(--c-red);
  color:#fff5e0;
  padding:3rem 2rem;
  position:relative;
  background-image:repeating-linear-gradient(90deg,rgba(0,0,0,0.12) 0,rgba(0,0,0,0.12) 1px,transparent 1px,transparent 9px);
}
.roda h2{color:#fff5e0;text-shadow:3px 3px 0 var(--c-black)}
.roda-strecksats{border:3px solid var(--c-red);padding:1.5rem;background:rgba(245,222,179,0.4);position:relative;}
.roda-strecksats::before{content:'';position:absolute;inset:6px;border:1px solid var(--c-red);pointer-events:none;}

/* Layout */
.wrap{max-width:1100px;margin:0 auto;padding:0 1.5rem;position:relative;z-index:2;}
header.site-head{background:var(--c-deep);color:var(--c-accent);padding:1rem 0;border-bottom:5px solid var(--c-secondary);position:relative;z-index:5;}
header.site-head .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;}
.brand{font-family:'Fraunces',serif;font-weight:700;font-size:1.3rem;letter-spacing:0.05em;}
nav ul{list-style:none;display:flex;gap:1.6rem;flex-wrap:wrap;}
nav a{color:var(--c-accent);text-decoration:none;font-family:'Fraunces',serif;font-size:0.95rem;letter-spacing:0.06em;text-transform:uppercase;border-bottom:2px solid transparent;padding-bottom:2px;transition:border-color 0.2s;}
nav a:hover{border-color:var(--c-secondary)}

.hero{position:relative;padding:5rem 0 4rem;text-align:center;}
.hero .tagline{font-family:'Fraunces',serif;font-style:italic;font-size:1.25rem;color:var(--c-deep);margin-top:1.2rem;letter-spacing:0.03em;}
.hero .ort{display:inline-block;margin-top:2rem;font-family:'Fraunces',serif;font-size:0.9rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--c-deep);border-top:2px solid var(--c-deep);border-bottom:2px solid var(--c-deep);padding:0.5rem 1.6rem;}

.sektionsnumrering{counter-increment:section;display:block;font-family:'Fraunces',serif;font-size:0.85rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--c-primary);margin-bottom:1rem;text-shadow:2px 2px 0 var(--c-accent);}
.sektionsnumrering::before{content:"— 0" counter(section) " · ";font-family:'Lora',monospace;}

section{padding:4rem 0;position:relative;}
.ram{border:3px double var(--c-primary);padding:2.5rem;background:rgba(245,222,179,0.35);}
.redaktionell p:first-of-type::first-letter{float:left;font-family:'Fraunces',serif;font-size:4.6em;line-height:0.82;margin:0.06em 0.12em 0 0;color:var(--c-primary);font-weight:700;text-shadow:3px 3px 0 var(--c-accent);}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem;margin-top:2rem;}
.kort{background:var(--c-accent);padding:1.8rem 1.5rem;border:2px solid var(--c-deep);box-shadow:6px 6px 0 var(--c-deep);position:relative;}
.kort h3{color:var(--c-deep);font-family:'Fraunces',serif;letter-spacing:0.04em;}
.kort p{margin:0;font-size:0.95rem}

.milstolpar{list-style:none;padding:0;margin:2rem 0 0;}
.milstolpar li{position:relative;padding:1rem 0 1rem 2.5rem;border-bottom:1px dashed var(--c-primary);font-family:'Lora',serif;}
.milstolpar li::before{content:'❖';position:absolute;left:0.5rem;top:1rem;color:var(--c-primary);font-size:1.1rem;}
.milstolpar li:last-child{border-bottom:none}

.forsiktigt{font-style:italic;color:var(--c-deep);font-size:0.95rem;display:block;margin-top:0.4rem;opacity:0.85;}

.reveal{opacity:0;transform:translateY(20px);transition:opacity 0.7s ease,transform 0.7s cubic-bezier(0.16,1,0.3,1)}
.reveal.visible{opacity:1;transform:translateY(0)}

footer{background:var(--c-deep);color:var(--c-accent);padding:3rem 0 2rem;text-align:center;border-top:5px solid var(--c-secondary);font-family:'Fraunces',serif;position:relative;z-index:2;}
footer p{margin:0.4rem 0;font-size:0.95rem;letter-spacing:0.05em}

.ornament-rad{height:18px;background:repeating-linear-gradient(90deg,var(--c-deep) 0,var(--c-deep) 12px,transparent 12px,transparent 24px);margin:0;}

@media (max-width:768px){h1{font-size:2.2rem;text-shadow:3px 3px 0 var(--c-secondary)}h2{font-size:1.6rem}section{padding:2.5rem 0}.ram{padding:1.5rem}nav ul{gap:1rem;font-size:0.85rem}.hero{padding:3rem 0 2rem}}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}*{animation-duration:0.01ms !important;scroll-behavior:auto !important}}