/* Sections */
.section {
  margin-bottom: var(--fib-7);
}

/* Golden divider — purple to gold to teal gradient
   Gradient stops at golden ratio: 0%, 38.2%, 61.8%, 100% */
.golden-bands {
  height: var(--fib-4);
  background: linear-gradient(
    to right,
    var(--color-primary) 0%,
    var(--color-accent) 38.2%,
    var(--color-accent) 61.8%,
    var(--color-teal) 100%
  );
  margin-bottom: var(--fib-7);
  border: none;
}

/* Sidebar card */
.sidebar {
  background: rgba(243, 242, 238, 0.5);  /* --color-surface at 50% */
  border-left: var(--fib-1) solid var(--color-accent);
  padding: var(--fib-6) 0 var(--fib-6) var(--fib-5);  /* flush right edge */
  border-radius: 0;
}

.sidebar-section {
  margin-bottom: var(--fib-6);
}

.sidebar-section:last-child {
  margin-bottom: 0;
}

.sidebar-section h3 {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--fib-1);
  color: var(--color-muted);
  margin-bottom: var(--fib-4);
}

/* Contact info */
.contact-item {
  margin-bottom: var(--fib-3);
  font-size: var(--text-base);
  color: var(--color-text);
}

.contact-item a {
  color: var(--color-primary);
}

.email-protected {
  user-select: none;
  -webkit-user-select: none;
}

/* Education list */
.edu-list {
  list-style: none;
  padding-left: 0;
}

.edu-list li {
  padding: var(--fib-2) 0;
  border-bottom: var(--fib-1) solid var(--color-border);
}

.edu-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.edu-degree {
  font-weight: 400;
  font-size: var(--text-base);
  display: block;
  color: var(--color-text);
}

.edu-school {
  color: var(--color-muted);
  font-size: var(--text-xs);
  display: block;
  margin-top: var(--fib-1);
}

/* Honors list */
.honors-list {
  list-style: none;
  padding-left: 0;
}

.honors-list li {
  padding: var(--fib-3) 0;
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--color-text);
  display: flex;
  gap: var(--fib-4);
}

.service-name {
  min-width: var(--fib-8);
  flex-shrink: 0;
  text-align: right;
}

.service-year {
  color: var(--color-tertiary);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.service-year:hover {
  color: var(--color-tertiary);
  border-bottom-color: var(--color-tertiary);
}

.advisor-link {
  color: var(--color-tertiary);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.advisor-link:hover {
  color: var(--color-tertiary);
  border-bottom-color: var(--color-tertiary);
}

.honors-year {
  font-weight: 700;
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--color-accent);
  flex-shrink: 0;
  min-width: var(--fib-7);
}

.pipe-sep {
  color: var(--color-accent);
  font-weight: 300;
  margin: 0 var(--fib-2);
}

/* Publication entries — descending counter */
.pub-list {
  list-style: none;
  padding-left: 0;
}

.pub-list li {
  padding: var(--fib-4) 0;
  padding-left: var(--fib-7);
  position: relative;
  line-height: var(--lh-xs);
  border-bottom: var(--fib-1) solid var(--color-border);
  transition: background-color 0.15s ease;
}

.pub-list li:last-child {
  border-bottom: none;
}

.pub-list li:hover {
  background-color: rgba(243, 242, 238, 0.5);  /* --color-surface at 50% */
}

.pub-list li::before {
  content: var(--pub-num);
  position: absolute;
  left: 0;
  top: var(--fib-4);
  font-weight: 800;
  font-size: var(--text-base);
  color: var(--color-accent);
  width: var(--fib-6);
  text-align: right;
  padding-right: var(--fib-3);
}

/* Publication era divider — slightly thicker border to mark degree transition */
.pub-list li.pub-divider {
  border-top: var(--fib-1) solid rgba(107, 107, 128, 0.4);
}

.pub-authors {
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--color-muted);
  margin-bottom: var(--fib-1);
}

.pub-title {
  font-weight: 600;
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--color-text);
  display: block;
  margin-bottom: var(--fib-1);
}

.pub-venue {
  display: inline;
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--color-muted);
  font-style: italic;
}

.pub-doi {
  display: inline;
  margin-left: var(--fib-3);
  font-size: var(--text-base);
  font-family: var(--font-mono);
}

.pub-doi a {
  color: var(--color-tertiary);
}

.pub-doi a:hover {
  color: var(--color-tertiary);
}

/* Social links */
.social-links {
  display: flex;
  gap: var(--fib-5);
  list-style: none;
  padding-left: 0;
}

.social-links a {
  color: var(--color-muted);
  font-size: var(--text-base);
  font-weight: 500;
  transition: color 0.2s ease;
}

.social-links a:hover {
  color: var(--color-primary);
}

/* Footer */
.footer {
  margin-top: var(--fib-8);
  padding: var(--fib-6) 0 var(--fib-5) 0;
  border-top: none;
  background-image: linear-gradient(
    to right,
    var(--color-primary) 0%,
    var(--color-accent) 38.2%,
    var(--color-accent) 61.8%,
    var(--color-teal) 100%
  );
  background-size: 100% var(--fib-1);
  background-repeat: no-repeat;
  background-position: top;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.footer-quote {
  font-style: italic;
  color: var(--color-muted);
  font-size: var(--text-base);
}

.footer-links {
  display: flex;
  gap: var(--fib-5);
  list-style: none;
  padding-left: 0;
}

.footer-links a {
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--fib-1);
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: var(--color-accent);
}

/* Escher watermarks — background textures via pseudo-elements */

/* Top banner: per-page crops from Metamorphose II (and metamorphosis.png)
   Technique: background-size: auto 400% scales the 4-row source so a single
   row fills the banner height exactly. background-position-y then pins one
   row (row 1 = 0%, row 2 = 33.33%, row 3 = 66.67%, row 4 = 100%).
   background-position-x chooses the horizontal slice within that row. */
.fib-wrapper {
  position: relative;
}

.fib-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--fib-10);      /* 178px */
  background-image: url("../Escher/320-metamorphose-ii.webp");
  background-repeat: no-repeat;
  background-size: auto 400%;
  background-position: 20% 66.67%;  /* default: row 3, centered on fish */
  opacity: 0.09;
  mix-blend-mode: multiply;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, black 20%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, black 20%, transparent);
  z-index: 0;
}

/* Home: row 3 (fish). Identical to default, declared for clarity. */
.fib-wrapper[data-banner="home"]::before {
  background-position: 20% 66.67%;
}

/* Publications: row 2 (text → grids → hexagons — structural, academic). */
.fib-wrapper[data-banner="publications"]::before {
  background-position: 50% 33.33%;
}

/* Services: row 4 (cityscape → chess — strategic, applied). */
.fib-wrapper[data-banner="services"]::before {
  background-position: 45% 100%;
}

/* About & Misc: single-row metamorphosis.png (5947×160 long strip).
   auto 100% = image fills banner height, wide horizontal crop via pos-x. */
.fib-wrapper[data-banner="about"]::before,
.fib-wrapper[data-banner="misc"]::before {
  background-image: url("../Escher/metamorphosis.png");
  background-size: auto 100%;
}

/* About: ~15% — checkerboard + floral/hexagon area, calm introduction. */
.fib-wrapper[data-banner="about"]::before {
  background-position: 15% 50%;
}

/* Misc: ~85% — chess pieces + cityscape, playful and narrative. */
.fib-wrapper[data-banner="misc"]::before {
  background-position: 85% 50%;
}

.fib-wrapper > * {
  position: relative;
  z-index: 1;
}

/* Main column: Waterfall watermark overlaying Biography */
.fib-two-col > main {
  position: relative;
}

.fib-two-col > main::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--fib-12);      /* 466px — covers Biography area */
  background: url("../Escher/439-waterval.webp") center / cover no-repeat;
  opacity: 0.12;
  mix-blend-mode: multiply;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, transparent, black 25%, black 70%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 25%, black 70%, transparent);
  z-index: 0;
}

.fib-two-col > main > * {
  position: relative;
  z-index: 1;
}

/* Home: Biography is short, so shift Waterval up by --fib-8 (68px)
   so its bright zone overlaps the biography text rather than sitting
   in the empty space below it. */
.fib-two-col:not([data-page]) > main::after {
  top: calc(-1 * var(--fib-8));
}

/* Publications page: Day and Night as top-of-list watermark
   Landscape composition (1200×716 ≈ 1.68 ≈ φ) fades behind the first entries. */
[data-page="publications"] {
  position: relative;
}

[data-page="publications"]::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--fib-12);      /* 466px */
  background: url("../Escher/303-dag-en-nacht.webp") center / cover no-repeat;
  opacity: 0.12;
  mix-blend-mode: multiply;
  filter: grayscale(20%) contrast(1.1);
  pointer-events: none;
  mask-image: linear-gradient(to bottom, transparent, black 25%, black 70%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 25%, black 70%, transparent);
  z-index: 0;
}

[data-page="publications"] > * {
  position: relative;
  z-index: 1;
}

/* Services page: 466 + 288 two-column with Relativity in right aside */
.services-main {
  min-height: var(--fib-12);  /* 466px — matches aside */
}

/* Services has long content (4 sections), so the inherited Waterval
   watermark extends to cover the whole main column. */
.services-main::after {
  height: 100%;
  mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
}

.services-aside {
  position: relative;
  width: var(--fib-11);       /* 288px */
  height: var(--fib-12);      /* 466px — 288/466 = φ */
}

.services-aside::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../Escher/389-relativiteit.webp") center / cover no-repeat;
  opacity: 0.35;
  mix-blend-mode: multiply;
  filter: grayscale(30%);
  pointer-events: none;
  mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

/* About page: 466 + 288 two-column with Tower of Babel in right column
   Tower's natural ratio (747×1200 ≈ 0.623) is already near φ — displayed
   at 288×466 it hits the golden ratio exactly. */
.about-main {
  min-height: var(--fib-12);  /* 466px — matches Tower aside height */
}

.about-aside {
  position: relative;
  width: var(--fib-11);       /* 288px */
  height: var(--fib-12);      /* 466px — 288/466 = φ */
}

.about-aside::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../Escher/118-toren-van-babel.webp") center / cover no-repeat;
  opacity: 0.35;
  mix-blend-mode: multiply;
  filter: grayscale(30%);
  pointer-events: none;
  mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

/* About-page prose links: tertiary color, underline on hover */
.about-main a {
  color: var(--color-tertiary);
}

.about-main a:hover {
  text-decoration: underline;
}

/* Attribution caption for Escher prints in asides.
   10px / 16px = φ (smallest Fibonacci type role). Pinned to bottom-right,
   flush to column edge per Schmidhuber's no-margin rule. Sits above the
   ::after watermark via z-index. */
.aside-caption {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  font-size: var(--text-xs);   /* 10px — Fibonacci minimum */
  line-height: var(--lh-xs);   /* 16px */
  text-align: right;
  color: var(--color-border);
  opacity: 1.0;
  font-style: normal;
}

.aside-caption em {
  font-style: italic;
}

/* Hero header */
.hero {
  margin-bottom: var(--fib-7);
  padding-bottom: var(--fib-5);
  border-bottom: var(--fib-1) solid var(--color-border);
}

.hero-topics {
  font-size: var(--text-lg);
  line-height: var(--lh-lg);
  font-weight: 600;
  color: var(--color-text);
}

/* ================================================
   Fibonacci Grid Cells — Schmidhuber-style layouts
   All dimensions are Fibonacci numbers (base 2px)
   ================================================ */

/* Layout containers */
.fib-grid-row {
  display: flex;
  gap: 0;
}

.fib-grid-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Base cell styling */
.fib-grid-cell {
  border: var(--fib-1) solid var(--color-border);
  overflow: hidden;
  position: relative;
}

.fib-grid-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--fib-4);
  background: var(--color-surface);
}


.fib-grid-label {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  line-height: var(--lh-base);
}

.fib-grid-dim {
  font-size: var(--text-xs);
  color: var(--color-muted);
  font-family: var(--font-mono);
  line-height: var(--lh-xs);
}

/* Fibonacci-sized cells: width x height
   754 = 466 + 288
   466 = 288 + 178
   288 = 178 + 110
   178 = 110 + 68    */

.fib-grid-466x288 { width: var(--fib-12); height: var(--fib-11); }
.fib-grid-288x288 { width: var(--fib-11); height: var(--fib-11); }
.fib-grid-288x178 { width: var(--fib-11); height: var(--fib-10); }
.fib-grid-288x110 { width: var(--fib-11); height: var(--fib-9); }
.fib-grid-178x178 { width: var(--fib-10); height: var(--fib-10); }
.fib-grid-178x110 { width: var(--fib-10); height: var(--fib-9); }
.fib-grid-110x110 { width: var(--fib-9);  height: var(--fib-9); }
.fib-grid-110x68  { width: var(--fib-9);  height: var(--fib-8); }
.fib-grid-68x110  { width: var(--fib-8);  height: var(--fib-9); }
.fib-grid-68x68   { width: var(--fib-8);  height: var(--fib-8); }

/* Composite Fibonacci heights: sums of two Fibonacci numbers */
.fib-grid-466x356 { width: var(--fib-12); height: calc(var(--fib-11) + var(--fib-8)); }  /* 288 + 68 */
.fib-grid-288x356 { width: var(--fib-11); height: calc(var(--fib-11) + var(--fib-8)); }

/* Golden spiral grid — named areas for L-shaped Fibonacci tiling
   Layout (approximate):
   ┌──────────────────┬───────────┐
   │                  │     b     │
   │        a         ├───────────┤
   │   466 × 288      │     c     │
   ├────────┬─────────┼───────────┘
   │        │         │
   │   d    │    e    │
   │        │         │
   └────────┴─────────┘
*/
.fib-grid-spiral {
  display: grid;
  grid-template-columns: var(--fib-12) var(--fib-11);
  grid-template-rows: var(--fib-10) var(--fib-9) var(--fib-10);
  grid-template-areas:
    "a b"
    "a c"
    "d e";
  width: var(--fib-13);
}

/* ================================================
   Still Alive — Fibonacci Alternating Rows
   ================================================

   Row 1 (h:178):  [Aperture  288] [Verse      466]
   Row 2 (h:178):  [Chorus    466] [Title      110] [Radiation 178]
   Row 3 (h:288):  [Atom      288] [Ch2+Outro  466]

   Row 1 & 3: 288 + 466 = 754  (golden split)
   Row 2:     466 + 110 + 178 = 754  (triple Fibonacci)
   Heights:   178, 178, 288    (all Fibonacci)
   ================================================ */

.sa-row {
  display: flex;
  gap: 0;
  width: var(--fib-13);
}

/* Logo cells — bordered, Fibonacci sized */
.sa-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--fib-1) solid var(--color-border);
  padding: var(--fib-4);
  overflow: hidden;
}

.sa-logo img {
  max-width: 100%;
  max-height: 100%;
  display: block;
}

.sa-logo-288 { width: var(--fib-11); }
.sa-logo-178 { width: var(--fib-10); }
.sa-h-178 { height: var(--fib-10); }
.sa-h-288 { height: var(--fib-11); }

/* Vertical title cell — 110px wide Fibonacci column */
.sa-vtext {
  flex-shrink: 0;
  width: var(--fib-9);
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--fib-1) solid var(--color-border);
  border-right: none;
  background: var(--color-surface);
}

.sa-vtext-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--fib-3);
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 700;
}

/* Verse lyrics — fills remaining space */
.sa-verse {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  padding: var(--fib-5);
  overflow: hidden;
}

/* Text alignment variants — Fibonacci rhythm */
.sa-verse-end {
  justify-content: flex-end;
  padding-bottom: var(--fib-6);
}

.sa-verse-right {
  align-items: flex-end;
  text-align: right;
  padding-right: var(--fib-6);
}

.sa-verse-spread {
  justify-content: space-between;
  padding: var(--fib-6) var(--fib-5);
}

.sa-line {
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--color-text);
  margin-bottom: 0;
}

.sa-label {
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--fib-2);
  text-transform: uppercase;
  margin-bottom: var(--fib-3);
}

.sa-muted {
  color: var(--color-muted);
  font-style: italic;
}