@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,800&display=swap');

body {
  line-height: 1.55;
}

.family-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1px;
  background: #eee;
  border: 1px solid #eee;
}

.family-card {
  background: #fff;
  aspect-ratio: 1 / 1;
  box-shadow:
    0 2px 8px hsla(0,0%,0%,0.35),
    0 1px 2px hsla(0,0%,0%,0.25),
    inset 0 1px 0 hsla(0,0%,100%,0.025);
}

.family-card.muted {
  background: #fafafa;
}

.card-inner {
  display: block;
  padding: 1.75rem;
  height: 100%;
  box-sizing: border-box;
}

.family-card:has(a) {
  padding: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.family-card p {
  margin: 0;
  padding: 0;
}

.family-card:has(a):hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 2px #ccc,
    0 4px 12px rgba(0,0,0,0.06),
    0 2px 8px hsla(0,0%,0%,0.35),
    0 1px 2px hsla(0,0%,0%,0.25),
    inset 0 1px 0 hsla(0,0%,100%,0.025);
}

.family-card a {
  display: block;
  padding: 1.75rem;
  height: 100%;
  box-sizing: border-box;
  text-decoration: none;
  color: #1a1a1a;
}

.family-card a:focus-visible {
  outline: 2px solid #1a1a1a;
  outline-offset: -2px;
}

body.dark-mode .family-card a:focus-visible {
  outline-color: #e0e0e0;
}

.family-grid > *:nth-child(n+4) {
  display: none !important;
}

.family-grid.two-col {
  grid-template-columns: repeat(2, 1fr) !important;
}

@media (max-width: 580px) {
  .family-grid.two-col {
    grid-template-columns: 1fr !important;
  }
}

.dark-toggle {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  font-family: 'DM Mono', monospace;
  font-size: 18px;
  color: #bbb;
  background: none;
  border: 1px solid #ddd;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.3s ease;
}

.dark-toggle:hover {
  color: #888;
  border-color: #bbb;
}

.dark-toggle.rotated {
  transform: rotate(180deg);
}

body.dark-mode .dark-toggle {
  color: #666;
  border-color: #333;
  transform: rotate(180deg);
}

body.dark-mode {
  background: #111;
}

body.dark-mode .family-grid {
  background: #333;
  border-color: #333;
}

body.dark-mode .family-card {
  background: #1a1a1a;
}

body.dark-mode .family-card.muted {
  background: #161616;
}

body.dark-mode .family-card:has(a):hover {
  box-shadow:
    inset 0 0 0 2px #555,
    0 2px 8px hsla(0,0%,0%,0.35),
    0 1px 2px hsla(0,0%,0%,0.25),
    inset 0 1px 0 hsla(0,0%,100%,0.025);
}

body.dark-mode .family-card a {
  color: #e0e0e0;
}

body.dark-mode .dark-toggle {
  color: #666;
  border-color: #333;
}

body.dark-mode [style*="color:#1a1a1a"] {
  color: #e0e0e0 !important;
}

body.dark-mode [style*="color:#666"] {
  color: #aaa !important;
}

/* ============================================================
   nuez.no home — heading
   ============================================================ */

.nuez-heading {
  display: block;
}

.nuez-heading .nuez-label {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: #3a3a3a;
  display: block;
  margin-bottom: 0.45rem;
}

/* inline-block so ::after underline matches text width exactly */
.nuez-title-wrap {
  position: relative;
  display: inline-block;
  line-height: 0.85;
}

.nuez-title-wrap::after {
  content: '';
  display: block;
  height: 2px;
  background: #e84040;
  margin-top: 0.85rem;
}

.nuez-title-outline {
  font-family: 'DM Sans', sans-serif;
  font-size: 72px;
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 0.85;
  color: transparent;
  -webkit-text-stroke: 1px #383838;
  display: block;
  text-transform: uppercase;
  user-select: none;
}

.nuez-title-fill {
  font-family: 'DM Sans', sans-serif;
  font-size: 72px;
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 0.85;
  color: #ececec;
  display: block;
  text-transform: uppercase;
  position: absolute;
  top: 0; left: 0;
  /* White fill covers N and U; clip stops between U and E */
  clip-path: inset(0 41% 0 0);
  user-select: none;
}

/* Light mode adjustments */
body:not(.dark-mode) .nuez-title-fill  { color: #1a1a1a; }
body:not(.dark-mode) .nuez-title-outline { -webkit-text-stroke-color: #c8c8c8; }
body:not(.dark-mode) .nuez-heading .nuez-label { color: #bbb; }

/* ============================================================
   Ambient background — per-person hover orbs
   ============================================================ */
body::after {
  content: '';
  position: fixed;
  inset: -50%;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.6s ease;
}

/* ============================================================
   nuez.no home — idle ambient background (blended person orbs)
   ============================================================ */
body:not(.alfredo-page)::after {
  background:
    radial-gradient(ellipse 60% 50% at 18% 22%, hsla(38, 28%, 26%, 0.14), transparent 65%),
    radial-gradient(ellipse 50% 45% at 82% 18%, hsla(275, 22%, 18%, 0.11), transparent 65%),
    radial-gradient(ellipse 55% 48% at 22% 80%, hsla(215, 24%, 20%, 0.13), transparent 65%);
  opacity: 1;
  filter: blur(0.5px);
  animation: bgFlow 20s ease-in-out infinite alternate;
}

/* ============================================================
   nuez.no home — grain texture overlay
   ============================================================ */
body:not(.alfredo-page)::before {
  content: '';
  position: fixed;
  inset: -20px;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  animation: grainDrift 18s ease-in-out infinite alternate;
}


body:has([data-person="sebastian"]:hover)::after {
  background:
    radial-gradient(ellipse 55% 55% at 15% 20%, hsla(38, 30%, 30%, 0.32), transparent 60%),
    radial-gradient(ellipse 40% 40% at 85% 75%, hsla(28, 26%, 26%, 0.22), transparent 60%);
  opacity: 1;
}

body:has([data-person="leo"]:hover)::after {
  background:
    radial-gradient(ellipse 55% 55% at 85% 15%, hsla(275, 28%, 22%, 0.32), transparent 60%),
    radial-gradient(ellipse 40% 40% at 20% 80%, hsla(290, 22%, 20%, 0.22), transparent 60%);
  opacity: 1;
}

body:has([data-person="alfredo"]:hover)::after {
  background:
    radial-gradient(ellipse 55% 55% at 18% 75%, hsla(215, 28%, 24%, 0.32), transparent 60%),
    radial-gradient(ellipse 40% 40% at 82% 22%, hsla(205, 22%, 26%, 0.22), transparent 60%);
  opacity: 1;
}

/* ============================================================
   Family card — positioning context + per-person corner gradient
   ============================================================ */

/* Required for ::before positioning and gradient clipping */
.family-card {
  position: relative;
  overflow: hidden;
}

/* Ensure card content stacks above ::before gradient */
.family-card a,
.family-card .card-inner {
  position: relative;
  z-index: 1;
}

/* ::before base — hidden by default */
.family-card::before {
  content: '';
  position: absolute;
  inset: -30%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* Idle fargespor — faint per-person colour always visible at rest */
.family-card[data-person]::before {
  opacity: 0.08;
}

/* Per-person corner positions:
   Sebastian top-left, Leo top-right (centre card), Alfredo bottom-left */
[data-person="sebastian"]::before {
  background: radial-gradient(ellipse 70% 70% at 19% 19%, hsla(38, 58%, 46%, 0.50), transparent 65%);
}
[data-person="leo"]::before {
  background: radial-gradient(ellipse 70% 70% at 81% 19%, hsla(275, 42%, 38%, 0.50), transparent 65%);
}
[data-person="alfredo"]::before {
  background: radial-gradient(ellipse 70% 70% at 19% 81%, hsla(215, 44%, 40%, 0.50), transparent 65%);
}

/* Reveal on hover — applies to all three cards including Leo */
.family-card:hover::before {
  opacity: 1;
}

/* ============================================================
   Per-person hover accent colours
   ============================================================ */

/* Glyph tinting (!important overrides inline color styles) */
[data-person="sebastian"]:hover .card-glyph { color: hsl(38, 55%, 60%) !important; }
[data-person="leo"]:hover .card-glyph       { color: hsl(275, 45%, 65%) !important; }
[data-person="alfredo"]:hover .card-glyph   { color: hsl(215, 55%, 65%) !important; }

/* Arrow tinting (Sebastian and Alfredo only — Leo has no arrow) */
[data-person="sebastian"]:hover .arrow { color: hsl(38, 55%, 60%); }
[data-person="alfredo"]:hover .arrow   { color: hsl(215, 55%, 65%); }

/* Leo — no pointer cursor (card has no link) */
[data-person="leo"] .card-inner { cursor: default; }

/* Back link */
.back-link {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  color: #bbb;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  transition: color 0.2s ease;
  letter-spacing: 0.04em;
}

.back-link:hover {
  color: #888;
}

body.dark-mode .back-link {
  color: #555;
}

body.dark-mode .back-link:hover {
  color: #888;
}

/* Concert rows */
.concert-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 0 2rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid #f0f0f0;
  align-items: start;
}

.concert-row.muted .concert-title,
.concert-row.muted .concert-date {
  color: #ccc;
}

.concert-row.muted .concert-meta {
  color: #ddd;
}

.concert-date {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: #bbb;
  padding-top: 2px;
  white-space: nowrap;
}

.concert-title {
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 4px;
  color: #1a1a1a;
}

.concert-meta {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: #aaa;
}

body.dark-mode .concert-row {
  border-bottom-color: #222;
}

body.dark-mode .concert-title {
  color: #e0e0e0;
}

/* Note rows */
.note-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid #f0f0f0;
}

.note-title {
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 4px;
  color: #1a1a1a;
}

.note-meta {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: #aaa;
}

.note-dl {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: #bbb;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
  flex-shrink: 0;
}

.note-dl:hover {
  color: #1a1a1a;
}

body.dark-mode .note-row {
  border-bottom-color: #222;
}

body.dark-mode .note-title {
  color: #e0e0e0;
}

body.dark-mode .note-dl:hover {
  color: #e0e0e0;
}

html {
  scroll-behavior: smooth;
}

.fade-in {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 580px) {
  .family-grid {
    grid-template-columns: 1fr !important;
  }

  .concert-row {
    grid-template-columns: 60px 1fr;
    gap: 0 1rem;
  }

  .note-row {
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
  }

  .note-dl {
    margin-left: 0;
  }
}

.family-card a .arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}

.family-card:has(a):hover .arrow {
  transform: translateX(5px);
}

@media (prefers-reduced-motion: reduce) {
  body::after              { transition: none; }
  .family-card::before     { transition: none; animation: none; }
  body:not(.alfredo-page)::after  { animation: none; }
  body:not(.alfredo-page)::before { animation: none; }
}

/* ============================================================
   Alfredo pages — keyframes
   ============================================================ */

@keyframes bgFlow {
  0%   { transform: translate(0, 0)       scale(1);    }
  50%  { transform: translate(8%, -6%)    scale(1.03); }
  100% { transform: translate(14%, -10%)  scale(1);    }
}

@keyframes grainDrift {
  0%   { transform: translate(0, 0);       }
  50%  { transform: translate(-12px, 8px); }
  100% { transform: translate(6px, -10px); }
}

/* ============================================================
   Alfredo pages — ambient background
   ============================================================ */

body.alfredo-page::after {
  inset: -100%;
  background:
    radial-gradient(ellipse 32% 32% at 22% 68%, hsla(215, 34%, 28%, 0.36), transparent 70%),
    radial-gradient(ellipse 26% 26% at 76% 28%, hsla(205, 28%, 28%, 0.26), transparent 70%),
    radial-gradient(ellipse 24% 24% at 50% 82%, hsla(220, 26%, 26%, 0.18), transparent 70%);
  opacity: 1;
  animation: bgFlow 28s ease-in-out infinite alternate;
  transition: none;
}

body.alfredo-page::before {
  content: '';
  position: fixed;
  inset: -20px;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  animation: grainDrift 18s ease-in-out infinite alternate;
}

/* ============================================================
   Alfredo home — card corner gradients
   ============================================================ */

/* Card 1 — Konserter, top-left */
body.alfredo-page .family-card:nth-child(1)::before {
  background: radial-gradient(ellipse 70% 70% at 19% 19%, hsla(215, 44%, 40%, 0.45), transparent 65%);
}

/* Card 2 — Notearkiv, top-right */
body.alfredo-page .family-card:nth-child(2)::before {
  background: radial-gradient(ellipse 70% 70% at 81% 19%, hsla(215, 44%, 40%, 0.45), transparent 65%);
}

/* ============================================================
   Alfredo undersider — row hover
   ============================================================ */

.alfredo-page .concert-title,
.alfredo-page .note-title {
  transition: color 0.2s ease;
}

.alfredo-page .concert-row,
.alfredo-page .note-row {
  border-left: 1.5px solid transparent;
  margin-left: -1rem;
  padding-left: 1rem;
  transition: border-left-color 0.2s ease, background 0.2s ease;
}

.alfredo-page .concert-row:hover,
.alfredo-page .note-row:hover {
  border-left-color: hsla(215, 38%, 52%, 0.45);
  background: hsla(215, 28%, 18%, 0.08);
}

.alfredo-page .concert-row:hover .concert-title,
.alfredo-page .note-row:hover .note-title {
  color: #d8d8d8;
}

.alfredo-page .concert-row:hover .concert-date {
  color: #666;
}

.alfredo-page .note-row:hover .note-meta {
  color: #666;
}

body.alfredo-page .note-dl:hover {
  color: hsl(215, 55%, 65%);
}

@media (prefers-reduced-motion: reduce) {
  body.alfredo-page::after  { animation: none; }
  body.alfredo-page::before { animation: none; }
}