/* estridpagels.dk — fælles stilark for alle sider */

:root{
  --bg:#ffffff;
  --ink:#111111;          /* overskrifter og navn */
  --lead:#475569;         /* brødtekst */
  --muted:#64748b;        /* pil-links */
  --faint:#94a3b8;        /* eyebrow, menupunkter */
  --faintest:#cbd5e1;     /* copyright-linjen */
  --line:#e6e7e9;
  --display:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  --wrap:1008px;          /* 960 px indhold + 2 × 24 px sidepolstring */
  --nav:57px;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0e1116; --ink:#f3f5f7; --lead:#b6bdc7; --muted:#98a1ae; --faint:#767d86; --faintest:#5b626b; --line:#262b33; }
}
:root[data-theme="dark"]{ --bg:#0e1116; --ink:#f3f5f7; --lead:#b6bdc7; --muted:#98a1ae; --faint:#767d86; --faintest:#5b626b; --line:#262b33; }
:root[data-theme="light"]{ --bg:#ffffff; --ink:#111111; --lead:#475569; --muted:#64748b; --faint:#94a3b8; --faintest:#cbd5e1; --line:#e6e7e9; }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; padding-top:var(--nav);
  background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.625;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
.wrap{max-width:var(--wrap); margin:0 auto; padding-left:24px; padding-right:24px}

/* ---------------- Navigation ---------------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  height:var(--nav); background:var(--bg);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; height:var(--nav); gap:56px}
.brand{
  font-size:14px; font-weight:400; color:var(--ink);
  text-decoration:none; white-space:nowrap;
}
.nav ul{display:flex; gap:36px; list-style:none; margin:0; padding:0; flex:1}
/* Kun menupunkterne er grå — navnet til venstre skal blive stående i sort */
.nav ul a{text-decoration:none; font-size:14px; color:var(--faint); transition:color .15s}
.nav ul a:hover, .nav ul a[aria-current="page"]{color:var(--ink)}
@media (max-width:640px){
  .nav{gap:24px}
  .nav ul{gap:20px}
}

/* ---------------- Hero ---------------- */
.hero{
  display:flex; align-items:center;
  min-height:calc(100vh - var(--nav));
  padding-top:80px; padding-bottom:80px;
}
.hero-inner{width:100%}
.hero-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center}
figure{margin:0}
figure img{aspect-ratio:456/578; object-fit:cover; object-position:center 20%; width:100%}
figcaption{margin-top:8px; text-align:right; font-size:11.2px; color:#808080}

.eyebrow{
  margin:0 0 32px; font-size:12px; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--faint);
}
h1{
  font-family:var(--display); font-weight:900;
  font-size:60px; line-height:1.25; letter-spacing:-.025em;
  margin:0 0 32px; color:var(--ink);
}
.lead{font-size:16px; line-height:1.625; color:var(--lead); margin:0 0 32px}
.arrow{font-size:14px; color:var(--muted); text-decoration:none}
.arrow:hover{color:var(--ink)}

@media (max-width:1023px){ h1{font-size:48px} }
@media (max-width:820px){
  .hero{min-height:0; padding-top:56px; padding-bottom:56px}
  .hero-grid{grid-template-columns:1fr; gap:40px}
  .hero-grid figure{max-width:360px}
  h1{font-size:40px}
}

/* ---------------- Undersider ---------------- */
.side{padding-top:120px; padding-bottom:120px}
.status{
  display:inline-block; margin:0 0 32px;
  font-size:12px; letter-spacing:1.2px; text-transform:uppercase; color:var(--faint);
}
.tekst{max-width:456px}
.tekst p{font-size:16px; line-height:1.625; color:var(--lead); margin:0 0 20px}
.tekst p:last-child{margin-bottom:0}
@media (max-width:820px){ .side{padding-top:64px; padding-bottom:64px} }

/* ---------------- Kontakt ---------------- */
section.kontakt{padding-top:104px; padding-bottom:104px; border-top:1px solid var(--line)}
@media (max-width:820px){ section.kontakt{padding-top:64px; padding-bottom:64px} }
h2{
  font-family:var(--display); font-weight:900;
  font-size:40px; line-height:1.25; letter-spacing:-.025em; margin:0 0 32px; color:var(--ink);
}
@media (max-width:820px){ h2{font-size:32px} }
.kontakt-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start}
@media (max-width:820px){ .kontakt-grid{grid-template-columns:1fr; gap:40px} }

.field{margin:0 0 28px}
.field label{
  display:block; font-size:12px; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--faint); margin-bottom:10px;
}
.field input, .field textarea{
  width:100%; font-family:inherit; font-size:16px; color:var(--ink);
  background:transparent; border:0; border-bottom:1px solid var(--line);
  padding:6px 0 10px; border-radius:0;
}
.field textarea{resize:vertical; line-height:1.625}
.field input:focus, .field textarea:focus{ outline:none; border-bottom-color:var(--ink) }
.send{
  font-family:inherit; font-size:14px; color:var(--ink); background:transparent;
  border:1px solid var(--ink); padding:12px 28px; cursor:pointer; transition:.15s;
}
.send:hover{background:var(--ink); color:var(--bg)}
.honeypot{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.besked-status{margin:20px 0 0; font-size:16px; color:var(--lead)}

.kontakt-aside .alabel{
  margin:0 0 12px; font-size:12px; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--faint);
}
.kontakt-aside .avalue{margin:0; font-size:16px}
.kontakt-aside a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:2px}
.kontakt-aside a:hover{border-bottom-color:var(--ink)}

/* ---------------- Sidefod ---------------- */
footer{border-top:1px solid var(--line); padding-top:56px; padding-bottom:48px}
.foot-grid{display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap}
.foot-name{margin:0 0 6px; font-size:14px; color:var(--ink)}
.foot-roles{margin:0; font-size:14px; color:var(--faint)}
.foot-links{list-style:none; margin:0; padding:0}
.foot-links li{margin-bottom:8px}
.foot-links li:last-child{margin-bottom:0}
.foot-links a{font-size:14px; color:var(--faint); text-decoration:none}
.foot-links a:hover{color:var(--ink)}
.foot-bottom{
  margin-top:56px; display:flex; justify-content:space-between; align-items:center;
  gap:16px; flex-wrap:wrap; font-size:12px; color:var(--faintest);
}
@media (max-width:820px){
  footer{padding-top:40px; padding-bottom:40px}
  .foot-grid{flex-direction:column; gap:28px}
  .foot-bottom{margin-top:36px}
}
.theme-btn{
  background:none; border:1px solid var(--line); color:var(--faintest);
  border-radius:999px; padding:5px 14px; font-size:12px; cursor:pointer; font-family:inherit;
}
.theme-btn:hover{border-color:var(--ink); color:var(--ink)}