/* ── Theme: Monograph ─────────────────────────────────────────────────────
   A strictly greyscale academic theme — a printed journal article that has
   come alive. No hue anywhere; depth comes from layering, not colour.
   Ground: warm-neutral paper with a fixed, layered background (SVG grain
   and grey vignettes). Ink bands for navbar and footer.
   Type: Fraunces for headings/brand at 800 against 200 italic leads;
   Bricolage Grotesque for body/UI (nav 200, active 800, labels 800 caps).
   Motion: staggered rise on page load, a single rule that draws under
   the page title, ink highlights behind links and card bars on hover. All of it is
   switched off by the prefers-reduced-motion rule in base.css, and nothing
   rests hidden. No headshot (THEMES['monograph']['headshot'] is false). */
[data-fe-theme="monograph"] {
  --fe-paper:            #f3f2ee;
  --fe-ink:              #121212;
  --fe-grey:             #5c5c5c;
  --fe-rule:             #c8c8c8;
  --fe-band-text:        #a8a8a8;
  --fe-ease:             cubic-bezier(0.2, 0.7, 0.2, 1);

  --bs-body-bg:          var(--fe-paper);
  --bs-body-color:       var(--fe-ink);
  --bs-emphasis-color:   #000000;
  --bs-secondary-color:  var(--fe-grey);
  --bs-secondary-rgb:    92, 92, 92;
  --bs-border-color:     var(--fe-rule);
  --bs-card-bg:          #ffffff;
  --bs-primary:          var(--fe-ink);
  --bs-primary-rgb:      18, 18, 18;
  --bs-link-color:       #2b2b2b;
  --bs-link-color-rgb:   43, 43, 43;
  --bs-link-hover-color: #000000;

  --fe-accent:           #4a4a4a;
  --fe-font-body:        'Bricolage Grotesque', 'Helvetica Neue', sans-serif;
  --fe-font-heading:     'Fraunces', Georgia, serif;
  --fe-font-brand:       var(--fe-font-heading);
}

/* Atmosphere: grain over vignettes over paper */
[data-fe-theme="monograph"] body {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .14 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255, 255, 255, 0.85), transparent 70%),
    radial-gradient(ellipse 60% 60% at 100% 100%, rgba(0, 0, 0, 0.07), transparent 70%),
    radial-gradient(ellipse 50% 50% at 0% 100%, rgba(0, 0, 0, 0.05), transparent 70%),
    var(--fe-paper);
  background-attachment: fixed;
  font-weight: 400; font-size: 1.0625rem; line-height: 1.7;
}
[data-fe-theme="monograph"] main p { hyphens: auto; }

/* Type: 800 headings against 200 italic leads */
[data-fe-theme="monograph"] :is(h1, h2, h3, h4, h5, h6) {
  font-weight: 800; letter-spacing: -0.02em; line-height: 1.15;
}
[data-fe-theme="monograph"] .lead {
  font-family: var(--fe-font-heading); font-style: italic; font-weight: 200;
  font-size: 1.45rem; line-height: 1.45; color: #2b2b2b;
}
[data-fe-theme="monograph"] .section-label {
  font-weight: 800; font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.22em; color: var(--fe-grey);
}

/* Signature: huge page title over a single rule that draws in */
[data-fe-theme="monograph"] .page-title {
  position: relative;
  color: var(--bs-emphasis-color);
  font-size: clamp(2.3rem, 1.6rem + 3vw, 3.4rem);
  letter-spacing: -0.035em; line-height: 1.05;
  border-bottom: 0; padding-bottom: 1rem; margin-bottom: 1.75rem;
}
[data-fe-theme="monograph"] .page-title::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--fe-ink);
  transform-origin: left;
  animation: monograph-draw 0.9s 0.3s cubic-bezier(0.65, 0, 0.35, 1) both;
}

/* Page load: content rises in, staggered; card grids stagger again inside */
[data-fe-theme="monograph"] main .container-page > *,
[data-fe-theme="monograph"] main .row > * {
  animation: monograph-rise 0.7s var(--fe-ease) both;
}
[data-fe-theme="monograph"] main .container-page > :nth-child(2) { animation-delay: 0.08s; }
[data-fe-theme="monograph"] main .container-page > :nth-child(3) { animation-delay: 0.16s; }
[data-fe-theme="monograph"] main .container-page > :nth-child(4) { animation-delay: 0.24s; }
[data-fe-theme="monograph"] main .container-page > :nth-child(5) { animation-delay: 0.32s; }
[data-fe-theme="monograph"] main .container-page > :nth-child(6) { animation-delay: 0.40s; }
[data-fe-theme="monograph"] main .container-page > :nth-child(n+7) { animation-delay: 0.48s; }
[data-fe-theme="monograph"] main .row > :nth-child(1) { animation-delay: 0.30s; }
[data-fe-theme="monograph"] main .row > :nth-child(2) { animation-delay: 0.38s; }
[data-fe-theme="monograph"] main .row > :nth-child(3) { animation-delay: 0.46s; }
[data-fe-theme="monograph"] main .row > :nth-child(4) { animation-delay: 0.54s; }
[data-fe-theme="monograph"] main .row > :nth-child(5) { animation-delay: 0.62s; }
[data-fe-theme="monograph"] main .row > :nth-child(n+6) { animation-delay: 0.70s; }

@keyframes monograph-rise {
  from { opacity: 0; transform: translateY(14px); filter: blur(3px); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes monograph-draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Navbar: ink band, 200-weight grey links that brighten on hover, 800 when active */
[data-fe-theme="monograph"] .navbar {
  background-color: var(--fe-ink);
  --bs-navbar-color: var(--fe-band-text);
  --bs-navbar-hover-color: #ffffff;
  --bs-navbar-active-color: #ffffff;
  --bs-navbar-brand-color: #ffffff;
  --bs-navbar-brand-hover-color: #ffffff;
  --bs-navbar-toggler-border-color: var(--fe-band-text);
  --bs-navbar-toggler-border-radius: 0;
  /* stroke colour is --fe-paper; data URIs can't read custom properties */
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28243, 242, 238, 0.9%29' stroke-linecap='butt' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
[data-fe-theme="monograph"] .navbar-brand {
  font-weight: 800; font-size: 1.45rem; letter-spacing: -0.02em;
}
[data-fe-theme="monograph"] .navbar .nav-link {
  font-weight: 200; font-size: 1.05rem;
  transition: color 0.2s ease;
}
[data-fe-theme="monograph"] .navbar .nav-link.active { font-weight: 800; }

/* Footer: matching ink band */
[data-fe-theme="monograph"] footer {
  background-color: var(--fe-ink);
  --bs-secondary-rgb: 168, 168, 168;
}
[data-fe-theme="monograph"] footer a { text-decoration: none; transition: color 0.2s ease; }
[data-fe-theme="monograph"] footer a:hover { color: #ffffff !important; }

/* Cards: white, square, no lift; an ink bar sweeps across the top on hover */
[data-fe-theme="monograph"] .card,
[data-fe-theme="monograph"] .project-card {
  position: relative; overflow: hidden;
  background: var(--bs-card-bg);
  border: 1px solid var(--fe-rule);
  border-radius: 0;
  box-shadow: none;
  transition: border-color 0.25s ease;
}
[data-fe-theme="monograph"] .project-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--fe-ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--fe-ease);
}
[data-fe-theme="monograph"] .project-card .icon-accent { transition: transform 0.3s var(--fe-ease); }
[data-fe-theme="monograph"] .project-card:is(:hover, :focus-visible) {
  transform: none; box-shadow: none; border-color: var(--fe-ink);
}
[data-fe-theme="monograph"] .project-card:is(:hover, :focus-visible)::before { transform: scaleX(1); }
[data-fe-theme="monograph"] .project-card:is(:hover, :focus-visible) .icon-accent { transform: translateX(3px); }

/* Buttons: square ink; outline buttons fill with a left-to-right sweep */
[data-fe-theme="monograph"] .btn-primary {
  --bs-btn-bg: var(--fe-ink); --bs-btn-border-color: var(--fe-ink);
  --bs-btn-color: #ffffff; --bs-btn-hover-color: #ffffff; --bs-btn-active-color: #ffffff;
  --bs-btn-hover-bg: #3a3a3a; --bs-btn-hover-border-color: #3a3a3a;
  --bs-btn-active-bg: #000000; --bs-btn-active-border-color: #000000;
  border-radius: 0; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem;
}
[data-fe-theme="monograph"] .btn-outline-secondary {
  --bs-btn-color: var(--fe-ink); --bs-btn-border-color: var(--fe-ink);
  --bs-btn-hover-color: var(--fe-paper); --bs-btn-hover-bg: transparent; --bs-btn-hover-border-color: var(--fe-ink);
  --bs-btn-active-color: var(--fe-paper); --bs-btn-active-bg: var(--fe-ink); --bs-btn-active-border-color: var(--fe-ink);
  border-radius: 0; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.12em;
  background: linear-gradient(var(--fe-ink), var(--fe-ink)) no-repeat left / 0% 100%;
  transition: background-size 0.35s var(--fe-ease), color 0.25s ease;
}
[data-fe-theme="monograph"] .btn-outline-secondary:is(:hover, :focus-visible) { background-size: 100% 100%; }

/* Body links: no underline; set in 700 against the 400 text, and an ink
   highlight sweeps in behind them (text turns paper) on hover */
[data-fe-theme="monograph"] main a:not(.btn, .card) {
  color: var(--bs-emphasis-color); font-weight: 700;
  text-decoration: none;
  padding: 0 0.12em; margin: 0 -0.12em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(var(--fe-ink), var(--fe-ink)) no-repeat left / 0% 100%;
  transition: background-size 0.3s var(--fe-ease), color 0.2s ease;
}
[data-fe-theme="monograph"] main a:not(.btn, .card):is(:hover, :focus-visible) {
  color: var(--fe-paper); background-size: 100% 100%;
}

[data-fe-theme="monograph"] .dropdown-menu {
  --bs-dropdown-bg: #ffffff;
  --bs-dropdown-border-color: var(--fe-ink);
  --bs-dropdown-link-color: var(--fe-ink);
  --bs-dropdown-link-hover-bg: #ededeb;
  --bs-dropdown-link-hover-color: #000000;
  --bs-dropdown-link-active-bg: var(--fe-ink);
  border-radius: 0;
}