/* Notes from the Field — quiet, typographic. One accent, two typefaces. */

[data-md-color-scheme="default"] {
  --md-primary-fg-color: #FCFCFB;
  --md-primary-fg-color--light: #FCFCFB;
  --md-primary-fg-color--dark: #FCFCFB;
  --md-primary-bg-color: #111111;
  --md-primary-bg-color--light: #5A5A57;
  --md-accent-fg-color: #0B2A4A;
  --nf-gold: #C09034;
  --md-default-bg-color: #FCFCFB;
  --md-default-fg-color: #111111;
  --md-default-fg-color--light: #5A5A57;
  --md-default-fg-color--lighter: #8A8A86;
  --md-default-fg-color--lightest: #E6E6E2;
  --md-typeset-color: #111111;
  --md-typeset-a-color: #111111;
  --nf-muted: #6B6B67;
  --nf-rule: #E6E6E2;
  --nf-stage-learning: #B3401A;
  --nf-stage-developing: #8A6A12;
  --nf-stage-learned: #2F5D46;
}

[data-md-color-scheme="slate"] {
  --md-hue: 150;
  --md-primary-fg-color: #121413;
  --md-primary-fg-color--light: #121413;
  --md-primary-fg-color--dark: #121413;
  --md-primary-bg-color: #E8E6E1;
  --md-primary-bg-color--light: #A9A7A1;
  --md-accent-fg-color: #D9AE52;
  --nf-gold: #D9AE52;
  --md-default-bg-color: #121413;
  --md-default-fg-color: #E8E6E1;
  --md-default-fg-color--light: #B5B3AD;
  --md-default-fg-color--lighter: #8C8A85;
  --md-default-fg-color--lightest: #2A2D2B;
  --md-typeset-color: #E8E6E1;
  --md-typeset-a-color: #E8E6E1;
  --nf-muted: #A3A19B;
  --nf-rule: #2A2D2B;
  --nf-stage-learning: #E58A62;
  --nf-stage-developing: #D9B45A;
  --nf-stage-learned: #7FBF9A;
}

/* Logo: light-ink variant in dark mode */
[data-md-color-scheme="slate"] .md-header__button.md-logo img { content: url("logo-dark.png"); }
.md-header__button.md-logo img { height: 1.6rem; }

/* Header: page-coloured, hairline rule, no shadow */
.md-header,
.md-header--shadow {
  box-shadow: none;
  border-bottom: 1px solid var(--nf-rule);
}
.md-header__topic:first-child { font-weight: 600; }

/* Links: underline in the accent colour */
.md-typeset a {
  text-decoration: underline;
  text-decoration-color: var(--nf-gold);
  text-underline-offset: 0.2em;
}
.md-typeset a:hover { color: var(--md-accent-fg-color); }

/* Page width: use the desktop (Material default is 61rem) */
/* Side margins scale with the screen; header, content and footer stay aligned */
.md-grid { max-width: 76rem; padding-inline: clamp(0.4rem, 3vw, 2.4rem); }

/* Home layout: fluid, 12-column on desktop, stacked on tablet/phone */
.home { padding-top: 2.5rem; }
.home h1 {
  font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.6rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--md-default-fg-color);
  margin: 0 0 1.4rem;
}
.home p { font-size: 0.9rem; line-height: 1.7; }

.hero, .sections {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 2.4rem;
  row-gap: 1.6rem;
}
.hero-main { grid-column: 1 / span 8; }
.hero-aside { grid-column: 9 / span 4; align-self: end; }
.col-main { grid-column: 1 / span 8; }
.col-side { grid-column: 9 / span 4; }

/* Side panel: hairline box, mono labels */
.hero-aside {
  border: 1px solid var(--nf-rule);
  border-radius: 0.5rem;
  padding: 1.1rem 1.2rem 0.4rem;
}
.hero-aside p { font-size: 0.75rem; line-height: 1.6; margin: 0 0 0.9rem; }
.hero-aside .aside-label {
  font-family: var(--md-code-font-family);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--md-accent-fg-color);
  margin: 0 0 0.3rem;
}
.hero-aside a { text-decoration: none; border-bottom: 1px solid var(--nf-gold); }
.hero-aside a:hover { color: var(--md-accent-fg-color); }

/* Tablet: one column, aside becomes a full-width band */
@media screen and (max-width: 76.1875em) {
  .hero-main, .hero-aside, .col-main, .col-side { grid-column: 1 / -1; }
  .hero-aside { align-self: start; }
}
/* Phone: tighter spacing */
@media screen and (max-width: 44.9375em) {
  .home { padding-top: 1.2rem; }
  .hero, .sections { column-gap: 0; row-gap: 1rem; }
  .home .hero-main p, .home .col-main p, .home .col-side p { font-size: 0.85rem; }
  .home h1 { margin-bottom: 1rem; }
}

/* Section headings: full serif heading with a short accent rule above */
.home h2 {
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--md-default-fg-color);
  margin: 3rem 0 1.1rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--nf-rule);
  position: relative;
}
.home h2::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 2.5rem;
  height: 3px;
  background: var(--nf-gold);
}
.home h1 .headerlink,
.home h2 .headerlink { display: none; }



/* Publications: title line + mono meta line, no cards */
.home .pub { margin: 0 0 1.1rem; line-height: 1.45; font-size: 0.9rem; }
.home .pub a { text-decoration: none; }
.home .pub a:hover { text-decoration: underline; text-decoration-color: var(--nf-gold); }
.home .pub-meta {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--md-code-font-family);
  font-size: 0.62rem;
  color: var(--nf-muted);
}
.home .pub-summary {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--md-default-fg-color--light);
  max-width: 40rem;
}
.home .pub-note { font-size: 0.7rem; font-style: italic; color: var(--nf-muted); }

/* Notebook: learning stages are blog categories, shown as small mono labels */
.md-post__meta a[href*="category/learning"],
.md-post__meta a[href*="category/developing"],
.md-post__meta a[href*="category/learned"] {
  font-family: var(--md-code-font-family);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
}
.md-post__meta a[href*="category/learning"] { color: var(--nf-stage-learning); }
.md-post__meta a[href*="category/developing"] { color: var(--nf-stage-developing); }
.md-post__meta a[href*="category/learned"] { color: var(--nf-stage-learned); }

/* Tabs (used once the Notebook is unhidden): page-coloured, small mono */
.md-tabs { background: var(--md-default-bg-color); color: var(--md-default-fg-color--light); border-bottom: 1px solid var(--nf-rule); }
.md-tabs__link { font-family: var(--md-code-font-family); font-size: 0.62rem; opacity: 1; }
.md-tabs__item--active .md-tabs__link { color: var(--md-accent-fg-color); }