/* Morten Meldgaard — site.css
   Skrifter (Adobe Fonts, kit soj2fno): noka 800 · helvetica-lt-pro 400 · paradroid-mono-soft 400 */

:root {
  --bg: #F3F2EE;
  --ink: #151515;
  --muted: #5E5D58;
  --body: #34332F;
  --line: #D9D7D0;
  --rule: #151515;
  --panel: #E6E4DD;
  --dim: #8C8A83;
  --accent: #FF5A1F;
  --accent-text: #C2410C;

  --f-head: 'noka', 'Helvetica Neue', Arial, sans-serif;
  --f-body: 'helvetica-lt-pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-mono: 'paradroid-mono-soft', ui-monospace, monospace;

  /* faste linjehøjder pr. skrift */
  --lh-head: 1;    /* Noka */
  --lh-body: 1.3;  /* Helvetica LT Pro */
  --lh-mono: 1.1;  /* Paradroid Mono */

  --gutter: clamp(20px, 3.4vw, 48px);
  --gap: 24px;
  --space: clamp(48px, 8.4vw, 120px);
  --max: 1600px;
}

.theme-dark {
  --bg: #0B0E13;
  --ink: #ECEAE4;
  --muted: #9A9EA6;
  --body: #C9C7C1;
  --line: #262B33;
  --rule: #ECEAE4;
  --panel: #151A21;  /* grå sektioner (fx 'Sådan er billedet bygget') i mørkt tema */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/var(--lh-body) var(--f-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
a:hover { color: var(--accent-text); }
h1, h2, h3, p, figure, blockquote, dl, dd, ul { margin: 0; }
ul { padding: 0; list-style: none; }
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* Typografi ------------------------------------------------------------ */
.mono {
  font-family: var(--f-mono);
  font-weight: 400;
  font-size: 13px; /* alle mono-tekster; eyebrow over titlen er 19 px (.p-meta) */
  line-height: var(--lh-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.muted { color: var(--muted); }
.accent-text { color: var(--accent-text); }
.display { font-family: var(--f-head); font-weight: 800; text-transform: uppercase; letter-spacing: -0.03em; line-height: var(--lh-head); }
.h-section { font-family: var(--f-head); font-weight: 800; text-transform: uppercase; font-size: clamp(32px, 5vw, 72px); line-height: var(--lh-head); letter-spacing: -0.02em; }
.lead { font-size: clamp(21px, 2.1vw, 30px); line-height: var(--lh-body); letter-spacing: -0.01em; }

/* Header / footer ------------------------------------------------------- */
.site-header {
  height: clamp(64px, 6.7vw, 96px);
  display: flex; align-items: center; justify-content: space-between;
}
.logo {
  font-family: var(--f-head); font-weight: 800; text-transform: uppercase;
  font-size: clamp(15px, 1.25vw, 18px); line-height: var(--lh-head); letter-spacing: 0.02em;
  text-decoration: none; padding: 12px 0;
}
.site-header nav { display: flex; gap: clamp(16px, 2.2vw, 32px); }
.site-header nav a { text-decoration: none; padding: 14px 0; color: var(--muted); border-bottom: 2px solid transparent; }
.site-header nav a[aria-current] { color: var(--ink); border-bottom-color: var(--ink); }

.site-footer {
  margin-top: var(--space);
  padding-top: clamp(40px, 4.4vw, 64px); padding-bottom: clamp(32px, 3.3vw, 48px);
  border-top: 1px solid var(--line);
  display: grid; gap: 20px;
}
.footer-name { font-family: var(--f-head); font-weight: 800; text-transform: uppercase; font-size: clamp(36px, 3.3vw, 48px); line-height: var(--lh-head); }
.footer-contact { display: flex; flex-direction: column; }
.footer-contact a { padding: 6px 0; }
.footer-copy { color: var(--muted); display: flex; gap: 24px; }
.footer-copy a { color: inherit; text-decoration: none; }
.footer-copy a:hover, .footer-copy a[aria-current] { color: var(--ink); }
@media (min-width: 900px) {
  /* navn med kontaktinfo under til venstre, privatliv og © nederst til højre */
  .site-footer { grid-template-columns: 1fr auto; align-items: end; column-gap: var(--gap); }
  .footer-name, .footer-contact { grid-column: 1; }
  .footer-copy { grid-column: 2; grid-row: 1 / span 2; justify-content: flex-end; }
}

/* Forside -------------------------------------------------------------- */
.home-intro {
  padding-top: clamp(20px, 2.8vw, 40px); padding-bottom: clamp(28px, 3.9vw, 56px);
  display: flex; flex-direction: column; gap: 16px;
}
.cats { display: flex; flex-direction: column; align-items: flex-start; }
.cat {
  display: inline-flex; align-items: flex-start; gap: clamp(10px, 1vw, 14px);
  min-height: 44px; padding: 2px 0;
  font-family: var(--f-head); font-weight: 800;
  font-size: clamp(36px, 4.45vw, 64px); line-height: var(--lh-head); letter-spacing: -0.02em;
  text-decoration: none; color: var(--ink);
  transition: color .15s ease;
}
.cat.is-dim { color: var(--dim); }
.cat:hover { color: var(--accent-text); }
.cat.is-on .cat-label { text-decoration: underline; text-decoration-thickness: clamp(3px, .3vw, 4px); text-underline-offset: clamp(6px, .7vw, 10px); }
.cat-count { padding-top: clamp(6px, .7vw, 10px); letter-spacing: 0.08em; }
.home-status { display: flex; align-items: center; gap: 16px; color: var(--muted); min-height: 44px; }
@media (min-width: 900px) {
  .home-intro { flex-direction: row; justify-content: space-between; align-items: flex-end; }
  .home-status { flex-direction: column; align-items: flex-end; gap: 10px; padding-bottom: 8px; }
}

.covers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .covers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .covers { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cover { position: relative; display: block; aspect-ratio: 202 / 158; overflow: hidden; background: var(--panel); color: #F3F2EE; text-decoration: none; }
.cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.cover-info {
  position: absolute; inset: 0; padding: clamp(14px, 1.7vw, 24px);
  display: flex; flex-direction: column; justify-content: space-between;
  background: rgba(15, 15, 15, .64); opacity: 0; transition: opacity .2s ease;
}
.cover-title { display: block; font-family: var(--f-head); font-weight: 800; font-size: clamp(18px, 1.8vw, 26px); line-height: var(--lh-head); }
.cover-sub { display: block; margin-top: 6px; font-size: 15px; }
.cover:hover { color: #F3F2EE; }
.cover:focus-visible .cover-info { opacity: 1; }
@media (hover: hover) {
  .cover:hover .cover-info { opacity: 1; }
  .cover:hover img { transform: scale(1.03); }
}

/* Case: header ------------------------------------------------------------ */
.p-head { padding-top: clamp(32px, 4.4vw, 64px); padding-bottom: clamp(28px, 3.9vw, 56px); }
.p-head .wrap { display: flex; flex-direction: column; gap: clamp(12px, 1.4vw, 20px); }
.p-meta { display: flex; justify-content: space-between; gap: 16px; color: var(--muted); font-size: 19px; }
.p-count { display: flex; gap: 12px; flex-shrink: 0; }
/* pilene får et større klikfelt uden at flytte noget */
.p-count a { text-decoration: none; padding: 12px 8px; margin: -12px -8px; }
@media (max-width: 767px) { .p-count { display: none; } } /* kun på desktop */
.p-title { font-size: calc(clamp(40px, 9.7vw, 140px) * var(--title-fit, 1)); }
.p-tagline { max-width: 920px; font-size: clamp(19px, 2.2vw, 32px); line-height: var(--lh-body); letter-spacing: -0.01em; margin-top: 4px; }
.theme-dark .p-title { font-size: calc(clamp(56px, 13.9vw, 200px) * var(--title-fit, 1)); line-height: var(--lh-head); letter-spacing: -0.04em; }

/* Case: blokke ----------------------------------------------------------- */
/* luft mellem blokke; ingen luft lige efter header/hero. Topbilledet (hero) sidder
   i samme bredde som andre billeder, og intro har selv luft over sig. */
.project > *:not(.p-hero, .p-head) { margin-top: var(--space); }
.project > :is(.p-hero, .p-head) + *, .project > .p-intro { margin-top: 0; }
.p-intro { padding-top: clamp(40px, 6.7vw, 96px); }

.fig { display: flex; flex-direction: column; gap: clamp(10px, 1.1vw, 16px); }
.fig img { width: 100%; }
.fig figcaption, .strip figcaption { display: flex; gap: clamp(12px, 1.7vw, 24px); color: var(--muted); }
.cap-label { color: var(--muted); }

/* label og værdi på samme linje; labelkolonnen vokser til den længste label (fx "Idé & koncept") */
.facts {
  display: grid; grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); column-gap: 16px; row-gap: 12px;
  border-top: 1px solid var(--rule); padding-top: 16px;
  font-size: 15px; line-height: var(--lh-body); align-content: start;
}
.facts > div { display: contents; }
.facts dt { color: var(--muted); padding-top: 2px; }

.p-intro { display: flex; flex-direction: column-reverse; gap: 24px; }
.p-intro-text { display: flex; flex-direction: column; gap: 24px; }

.fig-pair { display: grid; gap: 20px; }

.p-breakdown { background: var(--panel); padding-block: clamp(44px, 8.4vw, 120px); }
.p-breakdown .wrap { display: flex; flex-direction: column; gap: clamp(24px, 4.4vw, 64px); padding-inline: 0; }
.p-breakdown-head, .strip figcaption, .swipe-hint { padding-inline: var(--gutter); }
.p-breakdown-head { display: flex; flex-direction: column; gap: 12px; }
.p-breakdown-head p { color: var(--body); line-height: var(--lh-body); }
.strip { display: flex; flex-direction: column; gap: 12px; }
.strip figcaption { color: var(--ink); }
.strip-scroll { overflow-x: auto; scrollbar-width: none; padding-inline: var(--gutter); }
.strip-scroll::-webkit-scrollbar { display: none; }
.strip-scroll img { height: 200px; width: auto; max-width: none; }

.video { position: relative; aspect-ratio: 16 / 9; background: #000; } /* det rigtige format sættes fra posterbilledet */
.p-video .video, .p-videos .video { margin-inline: calc(var(--gutter) * -1); }
.video video { width: 100%; height: 100%; object-fit: cover; }
.play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: clamp(60px, 6.1vw, 88px); height: clamp(60px, 6.1vw, 88px); border-radius: 999px; border: 0;
  background: var(--accent); color: var(--bg); cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.play svg { width: 82%; height: 82%; fill: currentColor; }
.p-videos .play { left: clamp(16px, 1.7vw, 24px); top: auto; bottom: clamp(16px, 1.7vw, 24px); transform: none; width: clamp(44px, 3.6vw, 52px); height: clamp(44px, 3.6vw, 52px); }
.video.is-playing .play { display: none; }
.p-video figcaption, .p-videos figcaption { flex-direction: column; gap: 4px; }
.p-video .cap-label, .p-videos .cap-label { color: var(--accent); }
.p-video figcaption span:last-child, .p-videos figcaption span:last-child { color: var(--body); }
.p-videos { display: grid; gap: 32px; }

.next {
  display: flex; flex-direction: column; gap: clamp(12px, 1.1vw, 16px);
  padding-top: clamp(28px, 3.3vw, 48px); padding-bottom: clamp(24px, 3vw, 48px);
  text-decoration: none;
  /* linjen skal flugte med indholdet, ikke med wrap-paddingen */
  background: linear-gradient(var(--rule), var(--rule)) no-repeat top center / calc(100% - 2 * var(--gutter)) 1px;
}
.p-breakdown + .next { background: none; }
.next-title { font-size: clamp(32px, 6.1vw, 88px); line-height: var(--lh-head); letter-spacing: -0.02em; }
.next-sub { font-size: clamp(16px, 1.4vw, 20px); }

@media (min-width: 768px) {
  .fig-pair { grid-template-columns: 1fr 1fr; column-gap: var(--gap); }
  .p-videos { grid-template-columns: 1fr 1fr; column-gap: var(--gap); row-gap: 56px; }
  .p-video .video, .p-videos .video { margin-inline: 0; }
  .p-video figcaption, .p-videos figcaption { flex-direction: row; gap: 20px; }
  .p-breakdown .wrap { padding-inline: var(--gutter); }
  .p-breakdown-head, .strip figcaption, .swipe-hint, .strip-scroll { padding-inline: 0; }
  .swipe-hint { display: none; }
  .strip-scroll img { height: auto; width: 100%; }
}

@media (min-width: 900px) {
  .p-intro, .p-breakdown-head {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  }
  .facts { grid-column: 1 / span 4; row-gap: 14px; padding-top: 20px; font-size: 16px; }
  .p-intro-text { grid-column: 6 / span 7; }

  .p-breakdown-head { align-items: end; }
  .p-breakdown-head h2 { grid-column: 1 / span 7; }
  .p-breakdown-head p { grid-column: 9 / span 4; }
}

/* Halvt billede, galleri og trin-for-trin */
.fig-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.fig-grid .fig img { aspect-ratio: 4 / 3; object-fit: cover; }
.p-steps { background: var(--panel); padding-block: clamp(44px, 8.4vw, 120px); }
.p-steps .wrap { display: flex; flex-direction: column; gap: clamp(24px, 4.4vw, 64px); padding-inline: 0; }
.p-steps .p-breakdown-head, .p-steps .swipe-hint { padding-inline: var(--gutter); }
.steps-scroll { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; padding-inline: var(--gutter); }
.steps-scroll::-webkit-scrollbar { display: none; }
.step { flex: 0 0 60%; display: flex; flex-direction: column; gap: 10px; }
.step figcaption { display: flex; gap: 12px; }
@media (min-width: 768px) {
  .fig--half img { width: 50%; margin-inline: auto; }
  .fig--half figcaption { width: 50%; margin-inline: auto; }
  /* billedpar i halv størrelse: to midterste af fire kolonner */
  .fig-pair--half { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fig-pair--half > .fig:first-child { grid-column: 2; }
  .fig-grid { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--gap); }
  .fig-grid .fig img { aspect-ratio: auto; }
  .p-steps .wrap { padding-inline: var(--gutter); }
  .p-steps .p-breakdown-head, .p-steps .swipe-hint, .steps-scroll { padding-inline: 0; }
  .p-steps .swipe-hint { display: none; }
  .steps-scroll { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--gap); overflow: visible; }
}
/* mobil: billeder går helt ud til kanten, som i skitserne */
@media (max-width: 767px) {
  .project .fig > img { width: calc(100% + 2 * var(--gutter)); max-width: none; margin-inline: calc(-1 * var(--gutter)); }
  .project .fig-grid { padding-inline: 0; }  /* .wrap uden sidemargen = kant til kant */
  .project .fig-grid .fig > img { width: 100%; margin-inline: 0; }
  .project .fig-grid figcaption { padding-inline: 12px; }
  /* billedpar med "mobile_pair": bliver side om side på mobil, kant til kant med 4 px mellemrum */
  .project .fig-pair--keep { grid-template-columns: 1fr 1fr; gap: 4px; padding-inline: 0; }
  .project .fig-pair--keep .fig > img { width: 100%; margin-inline: 0; }
  .project .fig-pair--keep figcaption { padding-inline: 12px; }
}

/* Privatliv ------------------------------------------------------------ */
.legal { padding-top: clamp(32px, 5vw, 72px); display: flex; flex-direction: column; gap: clamp(40px, 5vw, 72px); }
.legal-body { display: flex; flex-direction: column; gap: clamp(28px, 2.8vw, 40px); max-width: 760px; }
.legal-link { align-self: flex-start; margin-top: 4px; }
/* nummererede afsnit (Privatliv) */
.p-section { display: flex; flex-direction: column; gap: 6px; }
.p-section p { font-size: 16px; line-height: var(--lh-body); color: var(--body); }
@media (min-width: 900px) { .p-section p { font-size: 17px; } }

/* Statistik (kun for Morten) ------------------------------------------- */
.stats { padding-top: clamp(32px, 5vw, 72px); display: flex; flex-direction: column; gap: clamp(32px, 4vw, 56px); }
.stats-periods { display: flex; gap: 24px; }
.stats-periods a { color: var(--muted); text-decoration: none; padding: 10px 0; border-bottom: 2px solid transparent; }
.stats-periods a[aria-current] { color: var(--ink); border-bottom-color: var(--ink); }
.stats-totals { display: flex; gap: clamp(40px, 6vw, 96px); border-top: 1px solid var(--rule); padding-top: 20px; }
.stats-totals div { display: flex; flex-direction: column; gap: 10px; }
.stats-totals strong { font-family: var(--f-head); font-weight: 800; font-size: clamp(56px, 7vw, 104px); line-height: var(--lh-head); }
.stats-cols { display: grid; gap: 48px; }
.stats-cols h2 { margin-bottom: 16px; }
.stats-legend { margin-left: 12px; }
.stats-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.stats-list li { display: grid; grid-template-columns: minmax(0, 1fr) 30% 11ch; align-items: center; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.stats-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats-bar { height: 6px; background: linear-gradient(var(--ink), var(--ink)) no-repeat left / var(--w) 100%; }
.stats-list .mono { text-align: right; white-space: nowrap; }
.stats-note { max-width: 760px; }
.stats-logout { color: var(--muted); }
/* login-formular: almindelige felter, så password-managere kan gemme og udfylde dem */
.login { display: flex; flex-direction: column; gap: 20px; max-width: 420px; border-top: 1px solid var(--rule); padding-top: 20px; }
.login-field { display: flex; flex-direction: column; gap: 8px; }
.login-field input { font: inherit; font-size: 17px; color: var(--ink); background: transparent; border: 1px solid var(--rule); border-radius: 0; padding: 14px 16px; }
.login-field input:focus { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.login-button { align-self: flex-start; margin-top: 4px; min-height: 48px; padding: 0 28px; border: 0; border-radius: 0; background: var(--ink); color: var(--bg); cursor: pointer; }
.login-button:hover { background: var(--accent-text); }
.login-error { color: var(--accent-text); }
@media (min-width: 900px) {
  .stats-cols { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .stats-cols > div:first-child { grid-column: 1 / span 7; }
  .stats-cols > div:last-child { grid-column: 9 / span 4; }
}

/* Kontakt -------------------------------------------------------------- */
.contact { padding-top: clamp(32px, 5vw, 72px); display: flex; flex-direction: column; gap: clamp(40px, 5vw, 72px); }
.contact-head { display: flex; flex-direction: column; gap: 16px; }
.contact-head .display { font-size: clamp(44px, 8vw, 116px); }
.contact-main { display: grid; gap: 40px; }
.contact-lines { display: flex; flex-direction: column; gap: clamp(24px, 2.8vw, 40px); }
.contact-lines > div { display: flex; flex-direction: column; gap: 8px; }
.big-link { font-family: var(--f-head); font-weight: 800; font-size: clamp(22px, 3.3vw, 48px); line-height: var(--lh-head); text-decoration-thickness: 2px; text-underline-offset: 6px; overflow-wrap: anywhere; }
.contact-about { font-size: clamp(18px, 1.5vw, 22px); line-height: var(--lh-body); max-width: 620px; }
.contact-portrait { width: 100%; height: auto; display: block; }
.contact-lists { display: grid; gap: 40px; border-top: 1px solid var(--rule); padding-top: 20px; }
.contact-lists h2 { margin-bottom: 16px; }
.disciplines { font-family: var(--f-head); font-weight: 800; font-size: clamp(26px, 2.2vw, 32px); line-height: var(--lh-head); }
.clients { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; font-size: clamp(16px, 1.3vw, 19px); line-height: var(--lh-body); }
@media (min-width: 900px) {
  .contact-main { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
  .contact-lines { grid-column: 1 / span 7; }
  .contact-portrait { grid-column: 9 / span 4; }
  .contact-lists { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); margin-top: 48px; padding-top: 32px; }
  .contact-lists > div:first-child { grid-column: 1 / span 4; }
  .contact-lists > div:last-child { grid-column: 6 / span 7; }
  .clients { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 24px; }
}

.notfound { padding-block: var(--space); display: flex; flex-direction: column; gap: 24px; }
.notfound .display { font-size: clamp(40px, 8vw, 116px); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Styleguide (/styleguide) ------------------------------------------------ */
.sg { padding-top: clamp(32px, 4.4vw, 64px); display: flex; flex-direction: column; gap: var(--space); }
.sg-head { display: flex; flex-direction: column; gap: 20px; }
.sg-title { font-size: clamp(44px, 8vw, 116px); }
.sg-block { display: flex; flex-direction: column; gap: 24px; border-top: 1px solid var(--rule); padding-top: 20px; }
.sg-note { margin-top: -12px; }
.sg-fonts { display: grid; gap: 32px; }
.sg-fonts > div { display: flex; flex-direction: column; gap: 8px; }
.sg-font { font-size: clamp(96px, 12vw, 180px); line-height: 1; }
.sg-font--head { font-family: var(--f-head); font-weight: 800; }
.sg-font--body { font-family: var(--f-body); }
.sg-font--mono { font-family: var(--f-mono); }
.sg-type { display: flex; flex-direction: column; }
.sg-type-row { display: grid; gap: 12px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.sg-type-meta { display: flex; flex-direction: column; gap: 4px; }
.sg-type-sample { overflow-wrap: anywhere; }
.sg-type-sample.sg-cat { font-family: var(--f-head); font-weight: 800; font-size: clamp(36px, 4.45vw, 64px); line-height: var(--lh-head); letter-spacing: -0.02em; }
.sg-type-sample.sg-body { font-size: clamp(16px, 1.2vw, 17px); line-height: var(--lh-body); color: var(--body); max-width: 640px; }
.sg-type-sample.display { font-size: clamp(40px, 9.7vw, 140px); }
.sg-type-sample.sg-display-dark { font-size: clamp(56px, 13.9vw, 200px); letter-spacing: -0.04em; }
.sg-type-sample.next-title { font-size: clamp(32px, 6.1vw, 88px); }
.sg-group { margin-top: 16px; }
.sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 24px; }
.sg-dark { background: var(--bg); color: var(--ink); padding: 24px; }
.sg-swatch { display: flex; flex-direction: column; gap: 6px; }
.sg-chip { aspect-ratio: 3 / 2; border: 1px solid rgba(128, 128, 128, .35); margin-bottom: 6px; }
.sg-use { font-size: 14px; color: var(--body); }
.sg-components { display: grid; gap: 40px; }
.sg-comp { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.sg-comp .cats { pointer-events: none; }
.sg-plays { display: flex; gap: 24px; align-items: center; background: #0B0E13; padding: 24px; }
.sg-play { position: static; transform: none; --accent: #6FD3FF; background: var(--accent); color: #0B0E13; }
.sg-play--small { width: 52px; height: 52px; }
.sg-facts { width: 100%; max-width: 520px; }
.sg-count .p-count { display: flex; } /* vises også på mobil i styleguiden */
.sg-spacing { max-width: 720px; }
@media (min-width: 900px) {
  .sg-fonts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
  .sg-type-row { grid-template-columns: 3fr 9fr; column-gap: var(--gap); align-items: baseline; }
  .sg-components { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); }
}