/* victorgillholm.com. Ljust som standard, mörkt när systemet vill. */
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url(/typsnitt/bc-700.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 800; font-display: swap; src: url(/typsnitt/bc-800.woff2) format("woff2"); }

:root {
  --bg: #f6f5f1; --yta: #ffffff; --ink: #16181d; --mjuk: #60666f; --linje: #e2dfd8; --accent: #c2410c; --chip: #eeebe5;
  --rubrik: "Barlow Condensed", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #121417; --yta: #1a1d21; --ink: #ecebe6; --mjuk: #a0a6ae; --linje: #2a2e34; --accent: #fb7a3c; --chip: #23272d; color-scheme: dark; }
}
:root[data-theme="dark"] { --bg: #121417; --yta: #1a1d21; --ink: #ecebe6; --mjuk: #a0a6ae; --linje: #2a2e34; --accent: #fb7a3c; --chip: #23272d; color-scheme: dark; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
.inner { width: min(1080px, 100% - 32px); margin-inline: auto; }

/* ---------- topp och fot ---------- */
.topp .inner { display: flex; align-items: center; gap: 20px; height: 64px; }
.logga { font: 800 20px/1 var(--rubrik); text-transform: uppercase; letter-spacing: .03em; text-decoration: none; }
.topp nav { margin-left: auto; display: flex; gap: 20px; font-size: 15px; }
.topp nav a { text-decoration: none; color: var(--mjuk); }
.topp nav a:hover { color: var(--ink); }
.fot { margin-top: 72px; border-top: 1px solid var(--linje); padding: 22px 0 36px; color: var(--mjuk); font-size: 14px; }
.fot .inner { display: flex; justify-content: space-between; gap: 16px; }

/* ---------- startsidan ---------- */
.hjalte { padding: 56px 0 40px; }
.hjalte h1 { font: 800 clamp(44px, 7vw, 72px)/.95 var(--rubrik); text-transform: uppercase; margin: 0; }
.hjalte p { font-size: 19px; color: var(--mjuk); margin: 12px 0 0; }

.projekt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 22px; }
.kort .bild { display: block; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: var(--chip); border: 1px solid var(--linje); }
.kort .bild img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .3s; }
.kort .bild:hover img { transform: scale(1.03); }
.kort h3 { font: 800 24px/1.1 var(--rubrik); text-transform: uppercase; margin: 14px 0 4px; }
.kort h3 a { text-decoration: none; }
.kort h3 a:hover { color: var(--accent); }
.kort p { margin: 0; color: var(--mjuk); font-size: 15px; }
.kort .rubrik { color: var(--ink); font-weight: 600; margin-bottom: 4px; }
.kort .extra { margin-top: 6px; font-size: 14px; }
.kort .extra a { color: var(--accent); text-decoration: none; }
.kort .extra a:hover { text-decoration: underline; }
@media (max-width: 900px) { .projekt { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .projekt { grid-template-columns: 1fr; } .hjalte { padding: 32px 0 28px; } }

/* ---------- undersidor ---------- */
.psida-topp { padding: 40px 0 28px; }
.tillbaka { font-size: 14px; color: var(--mjuk); text-decoration: none; }
.psida-topp h1 { font: 800 clamp(40px, 6vw, 60px)/1 var(--rubrik); text-transform: uppercase; margin: 12px 0 0; }
.psida-topp p { font-size: 17px; color: var(--mjuk); max-width: 64ch; margin: 12px 0 0; }

/* familjedashboarden: TV i ram och telefon */
.hemma { display: grid; grid-template-columns: 1fr 280px; gap: 28px; align-items: start; }
.flikar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.flik { font: inherit; font-size: 14px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--linje); background: var(--yta); color: var(--ink); cursor: pointer; }
.flik[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.tvram { background: #1b1c1f; padding: 12px; border-radius: 8px; }
.tvskarm { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #f3ecdd; }
.tvskarm iframe { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; border: 0; transform-origin: 0 0; }
.telefon { border: 9px solid #1b1c1f; border-radius: 34px; overflow: hidden; height: 580px; background: #f3ecdd; }
.telefon iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 860px) { .hemma { grid-template-columns: 1fr; } .telefon { width: 300px; margin-inline: auto; } }

/* ---------- bloggen ---------- */
#blogg { margin-top: 64px; }
#blogg h2 { font: 800 28px/1 var(--rubrik); text-transform: uppercase; margin: 0 0 18px; }
#blogg h2 a { font: 15px system-ui, sans-serif; text-transform: none; color: var(--accent); text-decoration: none; margin-left: 10px; }
.inlaggslista { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.inlagg { display: flex; flex-direction: column; gap: 6px; text-decoration: none; }
.inlagg img { aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; border: 1px solid var(--linje); margin-bottom: 6px; }
.inlagg h3 { font: 800 22px/1.1 var(--rubrik); text-transform: uppercase; margin: 0; }
.inlagg:hover h3 { color: var(--accent); }
.inlagg p { margin: 0; color: var(--mjuk); font-size: 15px; }
.meta { font-size: 13px; color: var(--mjuk); }
.meta b { color: var(--accent); }
.tomt { color: var(--mjuk); }
.artikel { max-width: 700px; padding: 40px 0 0; }
.artikel h1 { font: 800 clamp(36px, 6vw, 56px)/1 var(--rubrik); text-transform: uppercase; margin: 12px 0 10px; }
.brodtext { font-size: 18px; line-height: 1.7; margin-top: 24px; }
.brodtext h2 { font: 800 30px/1.1 var(--rubrik); text-transform: uppercase; margin: 36px 0 8px; }
.brodtext h3 { font: 800 22px/1.1 var(--rubrik); text-transform: uppercase; margin: 28px 0 6px; }
.brodtext a { color: var(--accent); }
.brodtext img, .brodtext iframe, .brodtext figure { max-width: 100%; border-radius: 8px; margin: 22px 0; }
.brodtext figure img { margin: 0; }
.brodtext figcaption { font-size: 14px; color: var(--mjuk); margin-top: 6px; }
.brodtext iframe { width: 100%; min-height: 480px; border: 1px solid var(--linje); }
.brodtext blockquote { margin: 22px 0; padding: 2px 0 2px 16px; border-left: 3px solid var(--accent); color: var(--mjuk); }
.brodtext table { width: 100%; border-collapse: collapse; font-size: 16px; margin: 22px 0; display: block; overflow-x: auto; }
.brodtext th, .brodtext td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--linje); }
.brodtext code { font-size: .9em; background: var(--chip); padding: 1px 5px; border-radius: 4px; }
.brodtext pre { background: var(--chip); padding: 14px; border-radius: 8px; overflow-x: auto; }
.brodtext pre code { background: none; padding: 0; }

/* 404 */
.fel { padding: 80px 0; }
.fel h1 { font: 800 56px/1 var(--rubrik); text-transform: uppercase; margin: 0 0 10px; }
.fel a { color: var(--accent); }