/* =====================================================================
   klekor.gr — styles.css
   Homepage UI (HOME-UI-02 refinement). Single file, plain CSS.

   Sections:
     1. Tokens
     2. Font faces
     3. Reset / base
     4. Typography
     5. App shell
     6. Navigation
     7. Homepage sections
     8. Cards and lists
     9. Interactive states
    10. Responsive rules
    11. Reduced-motion rules
    12. Note page and note preview
   ===================================================================== */

/* ------------------------------------------------------------------
   1. Tokens  (DESIGN.md §3 colors, §5 spacing)
------------------------------------------------------------------ */
:root {
  /* Color */
  --color-canvas: #f9f9f9;
  --color-ink: #000000;
  --color-text: #1b1b1b;
  --color-text-secondary: #555555;
  --color-surface-muted: #f3f3f3;
  --color-surface-strong: #e2e2e2;
  --color-accent: #24ffcd;
  --color-on-accent: #000000;

  /* Spacing & borders */
  --space-unit: 4px;
  --space-gap-sm: 12px;
  --space-gap-lg: 36px;
  --space-margin-mobile: 24px;
  --space-margin-desktop: 48px;
  --border-width: 2px;
  --gutter: 0px;

  /* Fonts (self-hosted variable WOFF2 + system fallbacks) */
  --font-headline: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace;

  /* Layout */
  --app-max: 90rem;
  --rail-width: clamp(13rem, 22vw, 15rem);
  --measure: 68ch;

  color-scheme: light;
}

/* ------------------------------------------------------------------
   2. Font faces  (self-hosted variable WOFF2; OFL licensed)
------------------------------------------------------------------ */
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/hanken-grotesk/hanken-grotesk-latin.woff2")
    format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono/jetbrains-mono.woff2") format("woff2");
}

/* ------------------------------------------------------------------
   3. Reset / base
------------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  background: var(--color-canvas);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: 1rem;
  line-height: 1.6;
}

img,
svg {
  display: block;
  max-width: 100%;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  color: var(--color-text);
  text-decoration: none;
}

h1,
h2,
h3,
h4 {
  margin: 0;
}

p {
  margin: 0;
  overflow-wrap: break-word;
}

/* ------------------------------------------------------------------
   4. Typography
------------------------------------------------------------------ */
h1,
h2,
h3,
h4 {
  font-family: var(--font-headline);
}

h1 {
  font-size: clamp(3rem, 1rem + 4vw, 4.75rem);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

h2 {
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.5rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.25;
}

.eyebrow,
.note-meta,
.meta,
.contact-label,
.role {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.measure {
  max-width: var(--measure);
}

.lede {
  font-family: var(--font-headline);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* Prose: long-form descriptive paragraphs use Hanken Grotesk for readability.
   UI, metadata, chips, labels, and Principles numbers stay JetBrains Mono. */
.prose {
  font-family: var(--font-headline);
  font-weight: 400;
  line-height: 1.6;
}

/* ------------------------------------------------------------------
   5. App shell
------------------------------------------------------------------ */
.app {
  display: flex;
  flex-direction: column;
  max-width: var(--app-max);
  margin-inline: auto;
  min-height: 100vh;
  border: var(--border-width) solid var(--color-ink);
}

.main-col {
  flex: 1 1 auto;
  min-width: 0;
}

/* ------------------------------------------------------------------
   6. Navigation
------------------------------------------------------------------ */
/* Mobile / tablet top bar (visible by default) */
.topbar {
  border-bottom: var(--border-width) solid var(--color-ink);
}

.topbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-gap-sm);
  padding: var(--space-gap-sm) var(--space-gap-lg);
}

.wordmark {
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
}

.menu > summary {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.875rem;
  padding: var(--space-unit) var(--space-gap-sm);
  border: var(--border-width) solid var(--color-ink);
  cursor: pointer;
}

.menu-nav {
  padding: var(--space-gap-sm) var(--space-gap-lg) var(--space-gap-lg);
}

.menu-nav ul {
  display: grid;
  gap: var(--space-unit);
}

.menu-nav a {
  display: block;
  padding: 0.5rem 0;
}

/* Desktop navigation rail (hidden by default) */
.rail {
  display: none;
}

.rail-inner {
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
  min-height: 100vh;
  padding: var(--space-gap-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-gap-lg);
}

.rail-head .role {
  margin-top: var(--space-unit);
}

.rail-nav ul {
  display: grid;
}

.rail-nav a {
  display: block;
  padding: 0.5rem 0.25rem;
  border-bottom: var(--border-width) solid var(--color-surface-strong);
}

.rail-foot {
  margin-top: auto;
}

.rail-foot .contact-label {
  margin-bottom: var(--space-unit);
}

.rail-foot a {
  display: block;
  padding: 2px 0;
}

/* ------------------------------------------------------------------
   7. Homepage sections
------------------------------------------------------------------ */
.section {
  padding: var(--space-gap-lg);
  border-bottom: var(--border-width) solid var(--color-ink);
  scroll-margin-top: var(--space-gap-lg);
}

.section:last-of-type {
  border-bottom: 0;
}

.hero {
  background: var(--color-surface-muted);
}

.hero h1 {
  margin-top: var(--space-gap-sm);
}

.hero .lede {
  margin-top: var(--space-gap-sm);
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-gap-sm);
  margin-top: var(--space-gap-lg);
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}

.hero-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-gap-sm);
  margin-top: var(--space-gap-lg);
  padding: 0;
  list-style: none;
}

.hero-links a {
  display: inline-block;
  padding: var(--space-unit) var(--space-gap-sm);
  border: var(--border-width) solid var(--color-ink);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.875rem;
}

.hero-links a:hover {
  text-decoration: none;
}

.section h2 {
  margin-bottom: var(--space-gap-sm);
}

.section .lede {
  margin-bottom: var(--space-gap-lg);
  color: var(--color-text-secondary);
}

/* Footer / contact (page landmark) */
.footer {
  padding: var(--space-gap-lg);
  border-top: var(--border-width) solid var(--color-ink);
  background: var(--color-surface-muted);
  scroll-margin-top: var(--space-gap-lg);
}

.footer h2 {
  margin-bottom: var(--space-gap-sm);
}

.footer .measure {
  margin-bottom: var(--space-gap-lg);
}

/* Build colophon — one-line production note, inside the contact footer */
.site-colophon {
  margin-top: var(--space-gap-lg);
  padding-top: var(--space-gap-lg);
  border-top: var(--border-width) solid var(--color-ink);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.site-colophon .marker {
  color: var(--color-text);
}

.heart {
  color: var(--color-ink);
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  padding: var(--space-gap-sm);
  background: var(--color-canvas);
  color: var(--color-text);
  border: var(--border-width) solid var(--color-ink);
}

.skip-link:focus {
  left: var(--space-gap-sm);
  top: var(--space-gap-sm);
}

/* Visually hidden, still available to screen readers. Used to disambiguate
   link names (e.g. "Read more about <title>") without showing extra text. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------
   8. Cards and lists
------------------------------------------------------------------ */
/* Link list with monospace -> bullets */
.link-list {
  display: grid;
}

.link-list li {
  border-bottom: var(--border-width) solid var(--color-surface-strong);
}

.link-list a {
  display: block;
  padding: var(--space-gap-sm) 0;
}

.link-list a::before {
  content: "->\00a0";
  font-family: var(--font-mono);
}

/* Supporting detail inside a contact link (e.g. the visible email address) */
.contact-link-detail {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  overflow-wrap: anywhere;
}

/* Focus chips */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-gap-sm);
}

.chip {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  padding: var(--space-unit) var(--space-gap-sm);
  border: var(--border-width) solid var(--color-ink);
}

/* Start here — bordered navigation panels */
.start-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--border-width);
  border: var(--border-width) solid var(--color-ink);
  background: var(--color-ink);
}

.start-grid > li {
  display: flex;
}

.panel {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  min-height: 6rem;
  padding: var(--space-gap-sm);
  background: var(--color-canvas);
}

.panel-title {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
}

.panel-arrow {
  align-self: flex-end;
  font-family: var(--font-mono);
}

/* Card grid: borders touch to form a continuous grid */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--border-width);
  border: var(--border-width) solid var(--color-ink);
  background: var(--color-ink);
}

.card {
  background: var(--color-canvas);
  min-width: 0;
}

.card-head {
  padding: var(--space-gap-sm);
  border-bottom: var(--border-width) solid var(--color-ink);
  background: var(--color-surface-strong);
}

.card-body {
  padding: var(--space-gap-sm);
}

.card-body p {
  font-family: var(--font-headline);
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

/* Notes list */
.note-list {
  display: grid;
}

.note-list li {
  border-bottom: var(--border-width) solid var(--color-surface-strong);
}

.note-list a {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-gap-sm);
  padding: var(--space-gap-sm) 0;
}

.note-meta {
  white-space: nowrap;
}

/* Principles — compact single-column ledger (static rows: no marker, no shadows, no icons) */
.principles-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: var(--border-width) solid var(--color-ink);
}

.principles-list li {
  display: flex;
  align-items: baseline;
  gap: var(--space-gap-sm);
  padding: var(--space-gap-sm);
  border-bottom: var(--border-width) solid var(--color-ink);
}

.principles-list li:last-child {
  border-bottom: 0;
}

.principles-num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  min-width: 2.25em;
}

.principles-text {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.25;
}

/* ------------------------------------------------------------------
   9. Interactive states
------------------------------------------------------------------ */
/* Hover (text links) */
a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Hover (block UI targets): subtle grey, distinct from the mint marker */
.wordmark:hover,
.rail-nav a:hover,
.menu-nav a:hover {
  background: var(--color-surface-muted);
  text-decoration: none;
}

/* Panels: grey hover; the mint accent on hover is the title marker (HOME-UI-04),
   so the marker stays visible instead of sitting on a mint fill. */
.panel:hover {
  background: var(--color-surface-muted);
  text-decoration: none;
}

/* ==================================================================
   Marker — double-pass roller highlight behind interactive labels.
   One reusable impl: .marker-target on the interactive parent,
   .marker around the visible label text. Both layers sit behind the
   text (z-index:-1 inside .marker's isolated stacking context), are
   position:absolute (no layout / click-target impact) and never
   intercept pointer events. No JS, no images/SVG/canvas.
   ================================================================== */
.marker {
  display: inline-block;
  position: relative;
  vertical-align: baseline;
  line-height: 1;
  isolation: isolate;
}

.marker::before,
.marker::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  background: var(--color-accent);
  transform-origin: left center;
  transition: transform 180ms ease-out;
}

/* Main pass — broad stroke, organic 12-point silhouette (heavier start,
   tapered end, non-parallel edges), faint dry-roller density mask. */
.marker::before {
  left: -0.24em;
  right: -0.30em;
  top: 0.42em;
  height: 0.92em;
  opacity: 0.86;
  clip-path: polygon(2% 8%, 20% 4%, 40% 10%, 60% 6%, 80% 14%, 98% 22%, 100% 78%, 82% 86%, 60% 92%, 40% 88%, 20% 94%, 3% 96%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 0%, #000 15%, rgba(0, 0, 0, 0.82) 38%, #000 46%, #000 70%, rgba(0, 0, 0, 0.85) 78%, #000 88%, rgba(0, 0, 0, 0.9) 100%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 0%, #000 15%, rgba(0, 0, 0, 0.82) 38%, #000 46%, #000 70%, rgba(0, 0, 0, 0.85) 78%, #000 88%, rgba(0, 0, 0, 0.9) 100%);
  transform: rotate(-0.8deg) scaleX(0);
}

/* Secondary pass — lighter, shorter, shifted, opposite tilt, different silhouette. */
.marker::after {
  left: -0.14em;
  right: -0.18em;
  top: 0.52em;
  height: 0.7em;
  opacity: 0.3;
  clip-path: polygon(6% 18%, 40% 8%, 85% 14%, 96% 62%, 70% 82%, 30% 74%, 8% 70%);
  transform: rotate(0.6deg) scaleX(0);
}

/* Highlighted Focus chip: marker fully visible at rest + black bold text (non-color cue).
   Nav and other interactive labels reveal the marker only on hover / :focus-visible;
   there is no permanent current marker (active-section tracking is not implemented). */
.chip.is-highlighted .marker {
  color: var(--color-ink);
  font-weight: 700;
}
.chip.is-highlighted .marker::before {
  transform: rotate(-0.8deg) scaleX(1);
}
.chip.is-highlighted .marker::after {
  transform: rotate(0.6deg) scaleX(1);
}

/* Permanent brand marker (e.g. the wordmark): visible at rest. Only the
   transform is set, so the element keeps its own typography/color. */
.has-marker .marker::before {
  transform: rotate(-0.8deg) scaleX(1);
}
.has-marker .marker::after {
  transform: rotate(0.6deg) scaleX(1);
}

/* Keyboard focus: always reveal (works without a mouse). */
.marker-target:focus-visible .marker::before {
  transform: rotate(-0.8deg) scaleX(1);
}
.marker-target:focus-visible .marker::after {
  transform: rotate(0.6deg) scaleX(1);
}

/* Hover: only on devices that genuinely support hover (avoids sticky touch states). */
@media (hover: hover) and (pointer: fine) {
  .marker-target:hover .marker::before {
    transform: rotate(-0.8deg) scaleX(1);
  }
  .marker-target:hover .marker::after {
    transform: rotate(0.6deg) scaleX(1);
  }
}

/* Keyboard focus: distinct outline ring around the full target, different from the marker */
:focus-visible {
  outline: 3px solid var(--color-ink);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------
   10. Responsive rules
------------------------------------------------------------------ */
@media (min-width: 56em) {
  /* Center the frame with restrained viewport margins on desktop */
  body {
    padding: clamp(1rem, 3vw, 2rem);
  }

  .app {
    flex-direction: row;
    align-items: stretch;
  }

  /* Desktop rail: normal flow, inner content sticky */
  .rail {
    display: block;
    flex: 0 0 var(--rail-width);
    width: var(--rail-width);
    border-right: var(--border-width) solid var(--color-ink);
  }

  /* Hide mobile header on desktop (display:none => not focusable) */
  .topbar {
    display: none;
  }

  /* Contexts + Workbench intermediate widths: two columns */
  .contexts,
  .workbench {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Contexts + Workbench: a lone last card spans the full row (no filler cell) */
@media (min-width: 56em) and (max-width: 69.99em) {
  .contexts > .card:last-child,
  .workbench > .card:last-child {
    grid-column: 1 / -1;
  }
}

/* Contexts + Workbench: three columns only when all three cards fit comfortably */
@media (min-width: 70em) {
  .contexts,
  .workbench {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Start here: four panels in one row when there is enough space */
@media (min-width: 60em) {
  .start-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Mobile notes: metadata below the title, left-aligned */
@media (max-width: 36rem) {
  .note-list a {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
}

/* ------------------------------------------------------------------
   11. Reduced-motion rules
------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    scroll-behavior: auto;
    transition: none;
    animation: none;
  }

  /* Pseudo-elements are not matched by *, so disable marker transitions explicitly. */
  .marker::before,
  .marker::after {
    transition: none;
  }
}

/* ------------------------------------------------------------------
   12. Note page (single Markdown note) and homepage note preview
   Extends the approved shell: canvas, structural borders, Hanken Grotesk
   for prose, JetBrains Mono for labels/metadata/inline code, no radius,
   no shadows, no gradients.
------------------------------------------------------------------ */
/* Article shell: comfortable reading padding, scales with viewport */
.note {
  padding: var(--space-gap-lg) var(--space-margin-mobile);
}

.note-header {
  padding-bottom: var(--space-gap-lg);
  margin-bottom: var(--space-gap-lg);
  border-bottom: var(--border-width) solid var(--color-ink);
}

.note-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-gap-sm);
}

/* Note title: prominent, but clearly smaller than the homepage hero H1. */
.note-title {
  font-size: clamp(2rem, 1.25rem + 2vw, 2.75rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.note-deck {
  margin-top: var(--space-gap-sm);
  font-family: var(--font-headline);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.note-date {
  margin-top: var(--space-gap-sm);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}

.note-back {
  margin-top: var(--space-gap-sm);
  font-family: var(--font-mono);
  font-size: 0.875rem;
}

/* Prose body: Hanken Grotesk via .prose, constrained to the reading measure.
   Vertical rhythm via the lobotomized owl; headings override their own gap. */
.note-body {
  font-size: 1.0625rem;
}

.note-body > * + * {
  margin-top: 1rem;
}

/* Markdown body headings begin at <h2>; clearly separated, smaller than the
   homepage H1, and smaller than the note title. */
.note-body h2 {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 2.5rem 0 1rem;
}

.note-body h3 {
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 2rem 0 0.75rem;
}

.note-body p,
.note-body li {
  line-height: 1.6;
}

/* Lists: restore bullets/numbers removed by the global reset; readable,
   not over-indented on mobile. */
.note-body ul {
  list-style: disc;
  padding-left: 1.25rem;
}

.note-body ol {
  list-style: decimal;
  padding-left: 1.25rem;
}

.note-body li + li {
  margin-top: 0.25rem;
}

/* Inline code: restrained muted surface, JetBrains Mono. */
.note-body code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--color-surface-muted);
  padding: 0.1em 0.35em;
  overflow-wrap: break-word;
}

/* Blockquote (if present): structural left border, no quotation graphics. */
.note-body blockquote {
  margin: 1.25rem 0;
  padding: 0.25rem 0 0.25rem 1rem;
  border-left: var(--border-width) solid var(--color-ink);
  color: var(--color-text-secondary);
}

/* Prose links: identifiable without hover, strengthen on hover/focus.
   No roller-marker wrapper; visible keyboard focus comes from the global
   :focus-visible outline. Same-tab by default (no target="_blank"). */
.note-body a {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.note-body a:hover {
  text-decoration-thickness: 2px;
}

/* Homepage note preview: one interactive block; marker on the title only,
   full target stays clickable, 3px focus outline comes from :focus-visible. */
.note-preview {
  display: block;
  padding: var(--space-gap-sm) var(--space-gap-lg);
  border: var(--border-width) solid var(--color-ink);
  margin-bottom: var(--space-gap-lg);
}

.note-preview:hover {
  background: var(--color-surface-muted);
  text-decoration: none;
}

.note-preview-title {
  display: block;
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.2;
}

.note-preview-desc {
  display: block;
  margin-top: var(--space-unit);
  font-family: var(--font-headline);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

/* Desktop breathing room for the note article */
@media (min-width: 56em) {
  .note {
    padding: var(--space-gap-lg) var(--space-margin-desktop);
  }
}

/* ==================================================================
   13. Notes entry list — homepage "Notes" section and /notes/ archive
   Editorial, scannable list of note entries rendered from the `notes`
   collection. Reuses the approved shell: type, structural borders, and the
   mint marker on the title (consistent with the marker system in §9). No
   cards, thumbnails, shadows, gradients, or JavaScript.
   ================================================================== */
.note-entries {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

/* Each entry is a row separated by a light tonal line; the last row has no
   border so the list closes cleanly against the section below. */
.note-entry {
  padding: var(--space-gap-lg) 0;
  border-bottom: var(--border-width) solid var(--color-surface-strong);
}

.note-entry:first-child {
  padding-top: 0;
}

.note-entry:last-child {
  border-bottom: 0;
}

/* Compact mono date above the title — scannable down the left edge. */
.note-entry-date {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}

/* Title link: strong hierarchy. No rest-state underline (the mint marker on
   hover / :focus-visible is the affordance, matching the marker system and
   the homepage note-preview treatment). */
.note-entry-title {
  margin: var(--space-unit) 0 0;
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.note-entry-title a {
  color: var(--color-text);
  text-decoration: none;
}

.note-entry-title .marker {
  color: var(--color-text);
}

/* Description: readable measure, muted. */
.note-entry-desc {
  margin: var(--space-gap-sm) 0 0;
  font-family: var(--font-headline);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

/* Secondary "Read more →" action: mono, underlined, identifiable at rest. */
.note-entry-more {
  margin: var(--space-gap-sm) 0 0;
  font-family: var(--font-mono);
  font-size: 0.875rem;
}

.note-entry-more a {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.note-entry-more a:hover {
  text-decoration-thickness: 2px;
}

/* Homepage: "View all notes →" action at the end of the Notes section. */
.notes-archive-link {
  margin-top: var(--space-gap-lg);
  font-family: var(--font-mono);
  font-size: 0.9375rem;
}

/* Empty state (not reached with current content). */
.notes-empty {
  color: var(--color-text-secondary);
}

/* /notes/ archive page title: prominent, but clearly smaller than the
   homepage hero H1 (matches the single-note title magnitude). */
.notes-archive-title {
  font-size: clamp(2rem, 1.25rem + 2vw, 2.75rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}