/* === Responsive typography variables === */
:root {
  --fs-small: clamp(0.8rem, 1vw + 0.2rem, 1rem);
  --fs-base:  clamp(0.9rem, 1.1vw + 0.2rem, 1.15rem);
  --fs-mid:   clamp(1.2rem, 2.5vw + 0.3rem, 2rem);
  --fs-big:   clamp(1.6rem, 4vw + 0.5rem, 3rem);
  --lr_marg_1_clamp: clamp(0.3rem, 2vw + 1rem, 3rem);
  --p_base_1_clamp: clamp(0.2rem, 0.4rem + 0.6vw, 2rem);
  --p_big_1_clamp: clamp(1.5rem, 1.2rem + 1vw, 5rem);

  /* Responsive width for images inside table cells
  --td-img-w: clamp(1.5rem, 1.2rem + 1vw, 5rem);
  */
  --td-img-w: clamp(7rem, 4rem + 4.5vw, 22rem);
}

/* Page basics */
html, body { height: 100%; }
body {
  min-height: 100vh;
  margin: 0.75rem;
  font: 400 var(--fs-base)/1.45 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0,0,0,.5);

  /* --- BACKGROUND STACK ---
     order: HERO (top), GRADIENT (tints tile), TILE (bottom) */
  background-color: #020204; /* fallback if images fail */
  background-image:
    url("../tfbm2_nt_NO_BG.jpg"),
    linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)),
    url("../background2.jpg");
  background-repeat: no-repeat, no-repeat, repeat;
  background-position: top center, top left, top left;
  background-size: cover, cover, auto;
  background-blend-mode: normal, multiply, normal; /* gradient multiplies with tile */
}

td img {
  display: block;                 /* makes auto-margins work */
  margin-left: auto;              /* center horizontally */
  margin-right: auto;
  width: min(100%, var(--td-img-w));
  height: auto;
  object-fit: contain;
}

td img_BEFORE {
  display: block;               /* remove inline gap */
  width: min(100%, var(--td-img-w));
  height: auto;                 /* keep aspect ratio */
  object-fit: contain;          /* or 'cover' if you prefer cropping */
}

/* Headings */
h1 { font-size: var(--fs-big); margin: 1rem 0 0.5rem 0.5rem; }
h2 { font-size: var(--fs-mid); margin: 0.25rem 0 0.75rem 0.5rem; }

/* Paragraphs */
p  { font-size:  var(--p_base_1_clamp); margin: 0 0.75rem 1rem var(--lr_marg_1_clamp);  }

/* Spacer to reveal the tiled area clearly */
.spacer { height: 40vh; }

.my-url {
  color: #ffffff;                /* dark text */
  text-decoration: none;
  border: none;
  cursor: pointer;

  /* smooth transition for bg + text */
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* hover = slightly dim background */

.url_white:hover {
  color: #bbeebb;                /* deepen text */
  text-decoration: none;
}

.parhead {
  color: azure;
  font-size: 1.1em;
  font-weight: bold ;

}

/* active = pressed effect */
.my-url:active {
  transform: scale(0.97);        /* tiny shrink for feedback */
}

/* === Responsive table === */
.table-responsive {
  font-size: clamp(12px, 1.6vw, 18px); /* table's own curve */
  max-width: 76vw;
  margin: 1.25rem auto;
}

.table-responsive table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;                 /* enables wrapping control */
  backdrop-filter: saturate(110%);
}

.table-responsive thead th {
  font-weight: 700;
}

.table-responsive th,
.table-responsive td {
  padding: 0.6em 0.8em;
  border: 1px solid rgba(255,255,255,0.22);
  white-space: normal;       /* allow wrapping */
  overflow-wrap: anywhere;   /* break long words/URLs */
  hyphens: auto;
  line-height: 1.4;
}

/* === Margin Utilities === */

/* No margin */
.m-0   { margin: 0 }

/* Small (0.5rem) */
.m-1   { margin: 0.5rem }
.mt-1  { margin-top: 0.5rem }
.mr-1  { margin-right: 0.5rem }
.mb-1  { margin-bottom: 0.5rem }
.ml-1  { margin-left: 0.5rem }

/* Medium (1rem) */
.m-2   { margin: 1rem }
.mt-2  { margin-top: 1rem }
.mr-2  { margin-right: 1rem }
.mb-2  { margin-bottom: 1rem }
.ml-2  { margin-left: 1rem }

/* Large (2rem) */
.m-3   { margin: 2rem }
.mt-3  { margin-top: 2rem }
.mr-3  { margin-right: 2rem }
.mb-3  { margin-bottom: 2rem }
.ml-3  { margin-left: 2rem }

.leftmarg_1  { margin-left: var(--lr_marg_1_clamp) }

.TFBM-title{
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-weight: 700;

  letter-spacing: .01em;
  line-height: 1.1;

  color: #e9eef1;
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
}

:root { --SL-fs: clamp(2rem, 5vw + 1rem, 6rem); }
.SL-title{
  font-family: "Montserrat", Arial sans-serif;
  font-weight: 400;
  color: white;
}