/* dettner.se — namntavlan i trapphuset (C183) */
@font-face { font-family: "Barlow Condensed"; font-weight: 500; font-display: swap;
  src: url("/fonts/barlow-condensed-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap;
  src: url("/fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap;
  src: url("/fonts/barlow-latin-500-normal.woff2") format("woff2"); }

:root {
  --wall: #d9ded6;          /* trapphusputs */
  --wall-shade: #cdd3ca;
  --ink: #27302c;
  --ink-soft: #4e5853;
  --felt: #1e3a31;          /* flaskgrön filt */
  --felt-groove: #142a23;
  --letter: #eeede6;        /* plastbokstäver */
  --frame-hi: #e3e5e6;      /* borstad aluminium */
  --frame-lo: #a9adaf;
}
@media (prefers-color-scheme: dark) {
  :root {
    --wall: #262b28; --wall-shade: #212522;
    --ink: #dfe3dc; --ink-soft: #a7b0aa;
    --frame-hi: #a4a8aa; --frame-lo: #6e7274;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--wall);
  /* puts: en svag, oregelbunden yta i stället för platt färg */
  background-image:
    radial-gradient(ellipse at 20% 10%, var(--wall-shade) 0, transparent 60%),
    radial-gradient(ellipse at 85% 90%, var(--wall-shade) 0, transparent 55%);
  color: var(--ink);
  font: 400 1.125rem/1.6 "Barlow", system-ui, sans-serif;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
}

main {
  width: min(100%, 38rem);
  display: grid;
  justify-items: center;
  gap: 2.75rem;
  text-align: center;
}

/* Namntavlan */
.board {
  width: 100%;
  margin: 0;
  padding: 0.7rem;                                   /* ramens bredd */
  border-radius: 0.35rem;
  background: linear-gradient(160deg, var(--frame-hi), var(--frame-lo) 55%, var(--frame-hi));
  box-shadow:
    0 0.15rem 0.3rem rgba(30, 40, 35, 0.25),
    0 1.2rem 2.5rem -1rem rgba(30, 40, 35, 0.45);
}
.felt {
  border-radius: 0.15rem;
  padding: 1.6rem 1.5rem 2.1rem;
  /* räfflor: bokstäverna sitter i spåren */
  background:
    repeating-linear-gradient(to bottom,
      var(--felt) 0, var(--felt) 0.4rem,
      var(--felt-groove) 0.4rem, var(--felt-groove) 0.52rem);
  box-shadow: inset 0 0.25rem 0.6rem rgba(0, 0, 0, 0.45);
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 500;
  color: var(--letter);
  text-shadow: 0 0.06em 0.05em rgba(0, 0, 0, 0.55);
}
.address {
  display: block;
  font-size: clamp(1rem, 3.6vw, 1.3rem);
  letter-spacing: 0.08em;
  padding-bottom: 1.1rem;
  margin-bottom: 1.3rem;
  border-bottom: 0.12rem solid rgba(238, 237, 230, 0.55);  /* tavlans skiljelist */
}
h1 {
  margin: 0;
  font: inherit;
  font-size: clamp(2.6rem, 13vw, 5.4rem);
  line-height: 1;
  letter-spacing: 0.14em;
  margin-right: -0.14em;                              /* sista bokstavens spärrning */
}
/* handintryckta bokstäver: små, fasta avvikelser — inte slump vid varje laddning */
h1 span { display: inline-block; }
h1 span:nth-child(2) { transform: translateY(0.02em) rotate(-1.2deg); }
h1 span:nth-child(3) { transform: translateY(-0.03em) rotate(0.8deg); }
h1 span:nth-child(4) { transform: rotate(-0.4deg); }
h1 span:nth-child(5) { transform: translateY(0.04em) rotate(1.4deg); }
h1 span:nth-child(6) { transform: translateY(-0.01em) rotate(-0.9deg); }
h1 span:nth-child(7) { transform: translateY(0.03em) rotate(0.5deg); }
h1 span:nth-child(8) { transform: translateY(-0.02em) rotate(-1.6deg); }
.address span:nth-child(3) { display: inline-block; transform: rotate(1deg); }
.address span:nth-child(8) { display: inline-block; transform: translateY(0.05em) rotate(-1.4deg); }

.note { max-width: 26rem; }
.note p { margin: 0; }
.note p + p { margin-top: 0.5rem; color: var(--ink-soft); }

.note a {
  color: var(--ink);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
}
.note a:hover { text-decoration-thickness: 0.14em; }
:focus-visible {
  outline: 0.15rem solid var(--ink);
  outline-offset: 0.2rem;
  border-radius: 0.1rem;
}

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 26rem) {
  body { font-size: 1rem; }
  .felt { padding: 1.2rem 1rem 1.6rem; }
}

/* Windows högkontrast: tavlan ritas om med systemfärger */
@media (forced-colors: active) {
  .board, .felt { background: Canvas; box-shadow: none; }
  .board { border: 2px solid CanvasText; }
  .felt { color: CanvasText; text-shadow: none; }
  .address { border-bottom-color: CanvasText; }
}

/* Utskrift: bara texten, ingen filt */
@media print {
  body { background: none; color: #000; min-height: 0; }
  .board { background: none; box-shadow: none; border: 1pt solid #000; }
  .felt { background: none; box-shadow: none; color: #000; text-shadow: none; }
  .address { border-bottom-color: #000; }
}