@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700;800&family=Playfair+Display:wght@600;700&display=swap');

:root{
  --red:#b7272e;
  --red-dark:#8e1f26;
  --green:#266a42;
  --green-dark:#1b4e31;
  --gold:#d4a249;
  --paper:#fffaf4;
  --snow:#fffdf9;
  --text:#2f2a27;
  --muted:#6f6760;
  --line:rgba(47,42,39,.12);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:var(--snow);
  font-family:"DM Sans", Arial, sans-serif;
  line-height:1.65;
}
img{display:block;width:100%}
a{color:inherit}

.site-header{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  padding:1rem clamp(1.25rem,5vw,5rem);
  background:rgba(255,253,249,.94);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(16px);
}
.brand{
  display:flex;
  align-items:center;
  gap:.75rem;
  text-decoration:none;
  color:var(--text);
  font:700 1.55rem "Playfair Display", Georgia, serif;
}
.brand-mark{
  display:grid;
  place-items:center;
  width:2.3rem;
  height:2.3rem;
  border-radius:50%;
  background:var(--red);
  color:#fff;
  font-size:1.1rem;
}
nav{display:flex;gap:1.4rem}
nav a{
  text-decoration:none;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
nav a:hover{color:var(--red)}

.hero{
  min-height:680px;
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  background:var(--paper);
}
.hero-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding:clamp(3rem,7vw,7rem);
}
.eyebrow{
  margin:0 0 .8rem;
  color:var(--red);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.15em;
  text-transform:uppercase;
}
h1,h2,h3{
  margin-top:0;
  font-family:"Playfair Display", Georgia, serif;
  line-height:1.12;
}
h1{
  max-width:720px;
  margin-bottom:1.4rem;
  font-size:clamp(3rem,6vw,5.8rem);
}
.hero-copy > p:not(.eyebrow){
  max-width:610px;
  margin-bottom:2rem;
  color:var(--muted);
  font-size:1.08rem;
}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap}
.button{
  display:inline-block;
  padding:.95rem 1.35rem;
  border-radius:.42rem;
  text-decoration:none;
  font-weight:700;
  border:1px solid var(--red);
}
.primary{background:var(--red);color:#fff}
.secondary{background:transparent;color:var(--red)}
.button:hover{transform:translateY(-2px)}
.hero-image{
  min-height:520px;
  background:
    linear-gradient(90deg, rgba(255,250,244,1), rgba(255,250,244,.1) 18%),
    url("images/hero-julrum.png") center/cover no-repeat;
}

.highlights{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  padding:0 clamp(1.25rem,5vw,5rem);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#fff;
}
.highlights article{
  padding:2.8rem;
  border-right:1px solid var(--line);
}
.highlights article:last-child{border-right:0}
.highlights span{color:var(--green);font-weight:800}
.highlights h2{margin:.5rem 0;font-size:1.55rem}
.highlights p{margin:0;color:var(--muted)}

.content-section,.links-section{
  padding:clamp(4rem,8vw,8rem) clamp(1.25rem,5vw,5rem);
}
.section-heading{
  max-width:860px;
  margin-bottom:2.5rem;
}
.section-heading h2{
  margin-bottom:0;
  font-size:clamp(2.35rem,4.8vw,4.8rem);
}
.card-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
}
.card{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:.75rem;
  background:#fff;
  box-shadow:0 18px 45px rgba(47,42,39,.08);
}
.card img{
  height:250px;
  object-fit:cover;
}
.card-body{padding:1.5rem}
.tag{
  margin:0 0 .45rem;
  color:var(--green);
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.card h3{margin-bottom:.7rem;font-size:1.65rem}
.card-body > p:last-child{margin-bottom:0;color:var(--muted)}

.quote-block{
  display:grid;
  min-height:320px;
  place-items:center;
  padding:4rem 1.5rem;
  color:#fff;
  background:
    linear-gradient(rgba(27,78,49,.8), rgba(27,78,49,.8)),
    url("images/familj-julklappar.png") center/cover fixed;
  text-align:center;
}
.quote-block p{
  max-width:960px;
  margin:0;
  font:700 clamp(2rem,4vw,4rem)/1.25 "Playfair Display", Georgia, serif;
}

.links-section{background:var(--paper)}
.link-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.35rem;
}
.link-grid p{
  margin:0;
  padding:1.5rem;
  border-top:3px solid var(--gold);
  background:#fff;
  box-shadow:0 10px 30px rgba(47,42,39,.05);
}
.link-grid a{
  color:var(--red-dark);
  font-weight:700;
  text-underline-offset:3px;
}

footer{
  padding:4rem 1.5rem;
  color:#fff;
  background:linear-gradient(135deg, var(--green-dark), var(--red-dark));
  text-align:center;
}
.footer-brand{
  font:700 2rem "Playfair Display", Georgia, serif;
}
.sale{
  margin:.8rem 0 .2rem;
  font-size:1.45rem;
  font-weight:700;
}
footer p{margin:.2rem 0;color:rgba(255,255,255,.86)}
footer a{color:#ffe5a6;font-weight:700}

@media (max-width: 900px){
  nav{display:none}
  .hero{grid-template-columns:1fr}
  .hero-copy{min-height:520px}
  .hero-image{min-height:400px}
  .highlights,.card-grid,.link-grid{grid-template-columns:1fr}
  .highlights article{border-right:0;border-bottom:1px solid var(--line)}
}
@media (max-width: 560px){
  h1{font-size:3.1rem}
  .hero-copy{padding:4rem 1.3rem}
  .content-section,.links-section{padding:4rem 1.2rem}
  .card img{height:220px}
}