/* haandvaerker — sturdy, square, high contrast. System fonts, no external requests. */
:root {
  --primary: #8a3b12;
  --primary-dark: #54240b;
  --primary-soft: #f8ede7;
  --on-primary: #ffffff;
  --accent: #8a3b12;
  --bg: #ffffff;
  --bg-soft: #f2f3f5;
  --text: #16191d;
  --muted: #4a5159;
  --line: #d3d7dc;
  --gutter: 16px;
  /* The ordinary column: header, hero, om, kontaktstribe. Exactly 60rem (960px) up to 1280 —
     the clamp's middle term only overtakes the minimum above that — then it opens with the
     screen: 1082px at 1600, 1230px at 1920, 1526px at 2560, instead of staying a 960px strip
     in an ocean of margin. */
  --max: clamp(60rem, 28rem + 38vw, 79rem);
}
@media (prefers-color-scheme: dark) {
  :root {
    --primary-soft: #3f2517;
    --accent: #e7804b;
    --bg: #141518;
    --bg-soft: #1d1f24;
    --text: #eceef1;
    --muted: #aeb4bd;
    --line: #32363d;
  }
}
*, *::before, *::after { box-sizing: border-box; }
/* Fluid root. Every rem below — the type ladder, the spacing, the column widths — rides this
   single value, so the page grows on a big monitor instead of rendering identically at 1280,
   1920 and 2560.
     * up to a 1280px-wide viewport it is exactly 1rem, i.e. the visitor's own browser default
       (usually 16px). A phone at 360, a tablet at 768 and a laptop at 1280 therefore render
       exactly what they rendered before this rule existed — to the pixel. 1280 is the width
       the published screenshots on /eksempler/ are taken at and described in, so that is the
       width the ladder is anchored to.
     * above it the root climbs linearly: 16.93px at 1600, 17.87px at 1920, 19.75px at 2560,
       where body text lands at 20.98px against 17.00px today.
   rem inside a font-size on the root element means the INITIAL root size, not a circular
   reference, so a visitor who has set a 20px browser default keeps all of that increase.
   Scaling the root rather than every rule is what keeps this family's proportions intact:
   the 2.45 h1/body ratio test/family-identity.test.cjs pins is unchanged at every width. */
html {
  -webkit-text-size-adjust: 100%;
  font-size: clamp(1rem, 0.764rem + 0.294vw, 1.28rem);
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
  overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.skip { position: absolute; left: -999px; top: 0; background: var(--primary); color: var(--on-primary); padding: .5rem 1rem; z-index: 10; }
.skip:focus { left: var(--gutter); }

/* top bar in the brand colour */
.top { background: var(--primary); color: var(--on-primary); border-bottom: 4px solid var(--primary-dark); }
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding-top: .8rem; padding-bottom: .8rem; }
.brand { display: inline-flex; align-items: center; gap: .6rem; color: inherit; text-decoration: none; font-weight: 800; font-size: 1.15rem; margin-right: auto; }
.mark { display: inline-flex; align-items: center; justify-content: center; min-width: 2.2rem; height: 2.2rem; padding: 0 .4rem; background: var(--on-primary); color: var(--primary); font-weight: 900; letter-spacing: .03em; }
.top nav { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.top nav a { color: inherit; text-decoration: none; font-weight: 600; padding: .3rem 0; border-bottom: 2px solid transparent; }
.top nav a[aria-current="page"] { border-bottom-color: currentColor; }

/* type */
h1, h2, h3 { line-height: 1.15; margin: 0 0 .6rem; letter-spacing: -.01em; overflow-wrap: anywhere; }
h1 { font-size: 2.6rem; font-weight: 900; text-transform: uppercase; letter-spacing: .01em; }
h2 { font-size: 1.5rem; font-weight: 800; margin-top: 0; }
h3 { font-size: 1.1rem; font-weight: 700; }
p { margin: 0 0 1rem; }
.kicker { text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; font-weight: 700; color: var(--accent); margin-bottom: .4rem; }
.lead { font-size: 1.2rem; color: var(--muted); max-width: 38rem; }

/* sections */
section { padding: 2rem 0; }
.hero { padding: 2.5rem 0 2rem; background: linear-gradient(180deg, var(--primary-soft), var(--bg)); }
.page-head { padding: 2rem 0 .5rem; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.btn { display: inline-block; background: var(--primary); color: var(--on-primary); padding: .85rem 1.4rem; font-weight: 700; text-decoration: none; border: 2px solid var(--primary); }
.btn:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn-ghost { background: transparent; color: var(--accent); border-color: var(--accent); }
.btn-ghost:hover { background: var(--primary-soft); }
.cta { margin-top: 1.5rem; }
.more { font-weight: 700; }

/* services grid: cards with a thick brand-coloured edge */
.grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: .9rem; }
.grid li { background: var(--bg-soft); border-left: 6px solid var(--primary); padding: 1rem 1rem 1rem 1.1rem; }
.grid h2, .grid h3 { margin: 0 0 .3rem; }
.grid p { margin: 0; color: var(--muted); }
@media (min-width: 38rem) { .grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 56rem) { .grid { grid-template-columns: 1fr 1fr 1fr; } }

/* Ydelser is this trade's headline section, so on the front page it gets a wider canvas than
   the rest of the page and reads like a job sheet: a number, then the job in heavy caps.
   Each item still prints its own description when the brief supplies one; a brief that only
   NAMES its services renders exactly as before, with the number and the name carrying the
   card. Declared after .grid so these overrides win at equal specificity. */
/* The job sheet keeps the ~23% more canvas than --max that it has always had (1184 vs 960 at
   1280) and then grows faster than the page around it, because a row of service cards is the
   one block here that can genuinely use a 2560px monitor: 1184px at 1280 (unchanged), 1515px
   at 1920, 1738px at 2560. Its own clamp rather than a calc() multiple of --max, so the band
   stays on a sane measure at both ends of the fluid root's range. */
.wide { max-width: clamp(74rem, 37.5rem + 44vw, 88rem); }
/* The band carries the wider canvas: without it the section would simply start 112 px
   further left than everything above and below it, which reads as a mistake. */
.services-bred { background: var(--bg-soft); padding: 2.25rem 0 2.5rem; }
.grid-bred { counter-reset: ydelse; gap: 1rem; }
.services-bred .grid-bred li { background: var(--bg); }
.grid-bred li { counter-increment: ydelse; padding: 1.4rem 1.25rem 1.4rem 1.35rem; }
.grid-bred li::before { content: counter(ydelse, decimal-leading-zero); display: block; font-size: .82rem; font-weight: 900; letter-spacing: .14em; color: var(--primary); margin-bottom: .4rem; }
.grid-bred h3 { font-size: 1.2rem; text-transform: uppercase; letter-spacing: .01em; }
.services .cta { margin-top: 1.6rem; }

/* Running text is NOT stretched with the page. These measures stay in rem, so they grow at
   exactly the same rate as the type does and the line keeps the ~75-character measure it has
   always had: 42rem at a 1.0625rem body is 39.5em of text, whatever the viewport is doing.
   Only the blocks that place more than one thing (the job sheet, the gallery) get the width. */
.about { border-top: 1px solid var(--line); }
.about p { max-width: 42rem; }
.prose p { max-width: 42rem; font-size: 1.1rem; }

/* contact strip and contact page */
.strip { background: var(--primary); color: var(--on-primary); }
.strip h2 { color: inherit; }
.strip a { color: inherit; }
.strip-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.strip-list li { overflow-wrap: anywhere; }
.label { display: inline-block; min-width: 7.5rem; font-weight: 700; text-transform: uppercase; font-size: .8rem; letter-spacing: .06em; }
.contact-list { margin: 0; display: grid; gap: 0; max-width: 42rem; }
.contact-list div { display: grid; grid-template-columns: 8rem 1fr; gap: .5rem; padding: .8rem 0; border-top: 1px solid var(--line); }
.contact-list div:last-child { border-bottom: 1px solid var(--line); }
.contact-list dt { font-weight: 700; }
.contact-list dd { margin: 0; overflow-wrap: anywhere; }

/* footer */
.foot { border-top: 4px solid var(--primary); padding: 1.5rem 0 2rem; color: var(--muted); font-size: .95rem; }
.foot p { margin: 0 0 .3rem; }
.foot-name { font-weight: 600; color: var(--text); }
.foot-links { font-size: .9rem; }
.foot-links a { color: var(--accent); font-weight: 700; }
.madeby { font-size: .85rem; }

/* Virksomhedsoplysninger — the company's own details, on their own page. Everything here is
   sized in rem, so it rides the fluid root font-size at the top of this file instead of
   pinning a width: the key column and the reading measure grow together with the rest of
   the type ladder from 1280 to 2560. The rows are flex rather than a fixed grid so the key
   drops above its value on a narrow phone without a media query. */
.virksomhed { padding-top: .75rem; }
.vo-list { max-width: 46rem; border-top: 1px solid var(--line); }
.vo-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; margin: 0; padding: .85rem 0; border-bottom: 1px solid var(--line); }
.vo-key { flex: 0 0 9rem; font-weight: 700; }
.vo-val { flex: 1 1 12rem; overflow-wrap: anywhere; }
/* The "not filled in yet" marker. Same idiom as the labelled empty spots elsewhere in this
   family — dashed frame, brand-coloured spine — so it reads as deliberate, never as a page
   that failed to load. */
.udfyldes { display: inline-block; padding: .05rem .55rem; background: var(--bg-soft); border: 2px dashed var(--line); border-left: 6px solid var(--primary); font-weight: 700; color: var(--muted); }
.vo-note { margin: 1.25rem 0 0; max-width: 42rem; color: var(--muted); }
.vo-note a { color: var(--accent); font-weight: 700; }

/* Galleri — only in the stylesheet when the brief itself names photographs, so a site
   without pictures keeps exactly the CSS it had before. Two-up and wide, next to the job
   sheet: for this trade the pictures ARE the argument. The img rule is scoped here rather
   than made global, so nothing else on the page changes shape. */
.galleri { background: var(--bg-soft); border-top: 1px solid var(--line); padding: 2rem 0 2.25rem; }
.galleri-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 1rem; }
.galleri-grid figure { margin: 0; background: var(--bg); border-left: 6px solid var(--primary); }
.galleri-grid img { display: block; width: 100%; max-width: 100%; height: auto; }
.galleri figcaption { padding: .75rem 1rem .9rem 1.1rem; color: var(--muted); font-size: .9rem; line-height: 1.45; }
@media (min-width: 38rem) { .galleri-grid { grid-template-columns: 1fr 1fr; } }