/* base: fonts, tokens, reset, linen, focus, placeholders, reduced motion */

@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/caveat.woff2") format("woff2");
}
@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/lora.woff2") format("woff2");
}
@font-face {
  font-family: "Lora";
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/lora-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Special Elite";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/special-elite.woff2") format("woff2");
}

:root {
  --linen: #ebe1d1;
  --ink: #33291f;
  --ink2: #5b4d40;
  --paper: #fffdf7;
  --letter: #fbf6ec;
  --kraft: #d8c3a5;
  --sticky: #f7de87;
  --rose: #d9826b;
  --teal: #5f9e94;
  --mustard: #e8c25a;
  --lilac: #b7a2cf;
  --sky: #8fb7cf;
  --sage: #9fb58a;
  --peach: #eba98a;
  --bluegrey: #a3a9c4;
  --rose-text: #b25a43;
  --teal-text: #3f7d74;
  /* nav tabs (as in every mockup): the current page's tab is pale yellow, "Skriv til mig" is mint */
  --tab-current: #f7e3a1;
  --mint: #d4e8e3;
  --hand: "Caveat", "Bradley Hand", cursive;
  --serif: "Lora", Georgia, serif;
  --type: "Special Elite", "Courier New", monospace;
}

*, *::before, *::after { box-sizing: border-box; min-width: 0; }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  overflow-wrap: break-word;
  background-color: var(--linen);
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.18) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(120,95,65,.06) 0 1px, transparent 1px 4px);
}

h1, h2, h3, h4, h5, h6, p, figure { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
/* a photo's focus point (what a crop keeps in view), set as fx-N fy-N classes in steps of 10 (no inline styles: CSP) */
img { object-position: var(--fx, 50%) var(--fy, 50%); }
.fx-0{--fx:0%} .fx-10{--fx:10%} .fx-20{--fx:20%} .fx-30{--fx:30%} .fx-40{--fx:40%} .fx-50{--fx:50%}
.fx-60{--fx:60%} .fx-70{--fx:70%} .fx-80{--fx:80%} .fx-90{--fx:90%} .fx-100{--fx:100%}
.fy-0{--fy:0%} .fy-10{--fy:10%} .fy-20{--fy:20%} .fy-30{--fy:30%} .fy-40{--fy:40%} .fy-50{--fy:50%}
.fy-60{--fy:60%} .fy-70{--fy:70%} .fy-80{--fy:80%} .fy-90{--fy:90%} .fy-100{--fy:100%}
/* the hidden attribute always wins over a piece's display (grid, flex) */
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--teal-text); outline-offset: 3px; }

/* owner/family facts not written yet: ink text (AA on paper, letter, linen, sticky), pink tint and dashed rose underline */
.fill { font-family: var(--hand); color: var(--ink); background: rgba(217,130,107,.12); border-bottom: 2px dashed var(--rose); padding: 0 4px; border-radius: 3px 3px 0 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}