/* assets/css/main.css */

/* 1.	Tokens and global modes */

:root{
  --font-sans: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;

  --text: #111;
  --muted: #444;
  --bg: #fbfaf7; /* Slightly warm off-white (nicer for reading) */

  --panel: #fafafa;
  --panel-2: #f6f6f6;
  --border: #e6e6e6;
  --border-strong: #cfcfcf;

  --link: #3f3f3f;
  --link-hover: #1e1e1e;
  --link-visited: #5b2aa6;

  --container: 980px;

  --radius: 10px;

  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 18px;
  --space-5: 22px;
  --space-6: 28px;
  --space-7: 60px;

  --line: 1.65;

  --moment-measure: 72ch; /* adjust: 60ch–80ch typical */
  --content-measure: var(--moment-measure); /* shared prose/media measure for new layouts */
}

/* Optional dark mode */
@media (prefers-color-scheme: dark){
  :root{
    --text: #f2f2f2;
    --muted: #c7c7c7;
    --bg: #0f0f10;
    --panel: #161618;
    --panel-2: #1c1c1f;
    --border: #2b2b30;
    --border-strong: #3a3a40;
    --link: #7bb0ff;
    --link-hover: #a7c9ff;
    --link-visited: #c39bff;
  }
}

/* User override themes (take precedence over system preference) */
html[data-theme="light"]{
  --text: #111;
  --muted: #444;
  --bg: #fff;
  --panel: #fafafa;
  --panel-2: #f6f6f6;
  --border: #e6e6e6;
  --border-strong: #cfcfcf;
  --link: #3f3f3f;
  --link-hover: #1e1e1e;
  --link-visited: #5b2aa6;
}

html[data-theme="dark"]{
  --text: #f2f2f2;
  --muted: #c7c7c7;
  --bg: #0f0f10;
  --panel: #161618;
  --panel-2: #1c1c1f;
  --border: #2b2b30;
  --border-strong: #3a3a40;
  --link: #7bb0ff;
  --link-hover: #a7c9ff;
  --link-visited: #c39bff;
}

html { color-scheme: light dark; }
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

/* 2.	Base styles */

body{
  font-family: var(--font-sans);
  line-height: var(--line);
  color: var(--text);
  background: var(--bg);
  margin: 0;
}

/* Typography */
h1{ font-size: 28px; margin: 0 0 var(--space-2); line-height: 1.25; }
h2{ font-size: 20px; margin: var(--space-5) 0 var(--space-2); line-height: 1.3; }
h3{ font-size: 16px; margin: var(--space-4) 0 var(--space-2); line-height: 1.35; }

p{ margin: 0 0 var(--space-3); }
ul, ol{ margin: 0 0 var(--space-3); padding-left: 1.2em; }
li{ margin: 0 0 var(--space-1); }

a:link{ color: var(--link); text-decoration: none; }
a:visited{ color: var(--link-visited); text-decoration: none; }
a:hover{ color: var(--link-hover); text-decoration: underline; text-underline-offset: 2px; }
a:focus-visible{ outline: 2px solid var(--border-strong); outline-offset: 2px; text-decoration: underline; text-underline-offset: 2px; }


hr{ border: 0; border-top: 1px solid var(--border); margin: var(--space-5) 0; }

/* Align horizontal rules to the shared reading measure on content pages */
.page hr{
  max-width: var(--content-measure);
  margin-left: auto;
  margin-right: auto;
}

/* Code */
code, pre{ font-family: var(--font-mono); }
code{
  font-size: 0.95em;
  padding: 0.15em 0.35em;
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: 6px;
}
pre{
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: var(--radius);
  padding: var(--space-3);
  overflow: auto;
  margin: 0 0 var(--space-4);
}
pre code{
  border: 0;
  background: transparent;
  padding: 0;
}

/* Blockquote */
blockquote{
  margin: var(--space-4) 0;
  padding: var(--space-2) var(--space-3);
  border-left: 4px solid var(--border-strong);
  background: var(--panel-2);
}

/* Tables (make wide tables scroll on small screens) */
table{
  border-collapse: collapse;
  width: 100%;
  margin: var(--space-3) 0 var(--space-4);
}
th, td{
  border: 1px solid var(--border);
  padding: 10px;
  text-align: left;
  vertical-align: top;
}
th{ background: var(--panel-2); }
.table-wrap{ overflow-x: auto; }

/* 3. global utilities */

/* This is the standard pattern for keeping semantic headings (e.g., an H1 on the Notes index page) without displaying them visually. */
.visually-hidden{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Reuse the HTML-insert components (so Notes can match) */
.kicker{
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 12px;
  color: var(--muted);
}
.lede{ font-size: 16px; opacity: .92; }

.prompt{
  border-left: 4px solid var(--border-strong);
  background: var(--panel-2);
  padding: 12px;
  margin: var(--space-5) 0;
}

.box{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  background: var(--panel);
  margin: var(--space-4) 0 var(--space-3);
}

[hidden]{ display: none !important; } /* standard hidden attribute */

.muted{ color: var(--muted); }
.small{ font-size: 13px; opacity: .92; }
.cite{ font-size: 13px; }

/* 4.	Core layout wrappers */

/* Layout container used by layouts/pages */
.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-6) 18px var(--space-7);
}

/* 5.	Site chrome: header, footer, navigation */

.site-header{
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.site-header .container{
  padding-top: 16px;
  padding-bottom: 16px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 18px;
}
.site-title a{
  text-decoration: none;
  font-weight: 700;
  color: var(--text);
}
.site-title{ justify-self: start; }

/* Header nav items (inactive = <a.nav-item>, active = <span.nav-item.is-active>) */
.site-nav{ 
  justify-self: end; 
  display: flex;
  justify-content: flex-end;
}
.site-nav .nav-item{ 
  margin-left: 14px;
  display: inline-block;
  padding: 2px 10px;
  border: 1px solid transparent;   /* reserve space to avoid shifting when selected*/
  border-radius: 999px;
}
.site-nav .nav-item:first-child{ 
  margin-left: 0;  /* optional, helps centering */
}
/* Inactive link styling */
.site-nav a.nav-item:link,
.site-nav a.nav-item:visited{
  color: var(--text);
  text-decoration: none;
}
.site-nav a.nav-item:hover{
  background: var(--panel-2);
}
.site-nav a.nav-item:focus-visible{
  outline: 2px solid var(--border-strong);
  outline-offset: 2px;
  background: var(--panel-2);
  text-decoration: none;
  color: var(--text);
}

/* Active state: selected pill for the <span> only */
.site-nav span.nav-item.is-active{
  color: var(--text);
  background: var(--panel-2);
  border-color: var(--border);
  text-decoration: none;
  cursor: default;
}

/* Mobile “More” overflow nav (custom toggle) */
.nav-more{ display: none; }

.nav-more__summary{
  list-style: none;
  cursor: pointer;
  background: transparent;
  font-size: 1.1rem; /* hamburger size */
  line-height: 1;
  font-weight: 700; /* bolder hamburger */
  padding: 4px 10px;
}
.nav-more__summary::-webkit-details-marker{ display: none; } /* Safari/Chrome */

/* Only style the active state for the summary (so we don't change your link-active behaviour elsewhere) */
.site-nav .nav-more__summary.is-active{
  background: var(--panel-2);
  border-color: var(--border);
  color: var(--text);
}

/* Dropdown panel + items */
.nav-more__panel{
  display: none; /* default closed */
}

.nav-more.is-open .nav-more__panel{
  display: block;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 180px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  padding: 8px;
  z-index: 50;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

.nav-more__item{
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
}

.nav-more__item:hover{
  background: var(--panel-2);
}

.nav-more__item.is-active{
  background: var(--panel-2);
  border: 1px solid var(--border);
}

/* Mobile: hide overflow inline items and show “more” */
@media (max-width: 640px){
  .site-nav .nav-item--overflow{ display: none; }
  .nav-more{ display: inline-block; position: relative; }
  .site-nav .nav-item{ margin-left: 8px; }
  .site-nav .nav-item:first-child{ margin-left: 0; }
}


.theme-toggle{
  margin-left: 14px;
  font: inherit;
  font-size: 12px;
  line-height: 1.2;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
}
.theme-toggle:hover{
  border-color: var(--border-strong);
}
.site-footer{
  border-top: 1px solid var(--border);
  margin-top: 40px;
}
.home .site-footer{
  margin-top: 0;
}
.home main.container{
  padding-bottom: 0;
}
.site-footer .container{
  padding-top: 18px;
  padding-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-size: 12px;
  line-height: 1.2;
}

.site-footer .muted{ font-size: 12px; line-height: 1.2; }

/* 6.	Shared content components */

/* Diagrams */
figure.diagram{ margin: var(--space-4) 0; }
figure.diagram img,
figure.diagram svg,
figure.diagram object{
  display: block;
  max-width: 100%;
  height: auto;
}
/* Image captions (site-wide) */
figcaption{
  font-size: 12px;
  color: var(--muted);     /* dark grey in light theme; readable in dark theme */
  font-style: italic;
  text-align: left;
}
figure.diagram figcaption{
  margin-top: 8px;
}

/* Index lists (shared) for new .index__* classes */

/* wrappers */
.index{
  max-width: var(--content-measure);
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
}

.index__heading{
  margin: 0 0 calc(var(--space-2) + 2px);
  font-size: clamp(1.125rem, 1.25vw, 1.375rem);
  line-height: 1.15;
  font-weight: 600;
}

/* row layout */

.index__item{
  display: grid;
  grid-template-columns: 1fr;
  align-items: baseline;
  column-gap: 10px;
  padding: 8px 0;
}

/* Section-specific index column layouts */
.works .index__item{ grid-template-columns: 6ch 1fr; }      /* work_id, title */
.moments .index__item{ grid-template-columns: 12ch 1fr; }   /* date, title */
.themes .index__item{ grid-template-columns: 12ch 1fr; }    /* date, title */
.research .index__item{ grid-template-columns: 12ch 1fr; }  /* date, title */

/* Single-column index rows (no date/prefix column) */
.index__item--single{
  grid-template-columns: 1fr;
}
/* work_id column (used by works indexes) */
.index__work_id{
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  text-align: left;
}

/* date/prefix column (used by moments indexes) */
.index__date{
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  text-align: left;
}

/* link styling */
.index__link:link,
.index__link:active,
.index__link:focus{
  text-decoration: none !important;
  color: var(--link);
  font-weight: 500;
}

.index__link:visited{
  text-decoration: none !important;
  color: var(--link-visited);
  font-weight: 500;
}

.index__link:hover{
  color: var(--link-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}


.index__link:focus-visible{
  outline: 2px solid var(--border-strong);
  outline-offset: 2px;
}

/* Optional thumbnail shown before index links (e.g. Theme selected works) */
.index__link{
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  justify-self: start;
  width: fit-content;
}

.index__thumb{
  width: 48px;
  height: 48px;
  object-fit: cover;
  flex: 0 0 auto;
  border-radius: 2px;
}

/* cards/_includes  */
.workIndexItem,
.seriesIndexItem{
  display: grid;
  grid-template-columns: 48px 1fr; /* thumb + text area */
  align-items: center;
  column-gap: 10px;
  padding: 8px 0;
  justify-self: start;
  width: fit-content;
}
.workIndexItem__row{
  display: grid;
  grid-template-columns: 6ch 1fr; /* work_id + title */
  align-items: baseline;     /* baseline-align work_id + title */
  column-gap: 10px;
}
.workIndexItem + .workIndexItem{ margin-top: 6px; }

/* link colouring/behaviour (match index links) */
.workIndexItem:link,
.workIndexItem:active,
.workIndexItem:focus,
.seriesIndexItem:link,
.seriesIndexItem:active,
.seriesIndexItem:focus{
  color: var(--link);
  text-decoration: none !important;
  font-weight: 500;
}

.workIndexItem:visited,
.seriesIndexItem:visited{
  color: var(--link-visited);
  text-decoration: none !important;
  font-weight: 500;
}

.workIndexItem:hover,
.seriesIndexItem:hover{
  color: var(--link-hover);
  text-decoration: none !important;
}

.workIndexItem:focus-visible,
.seriesIndexItem:focus-visible{
  outline: 2px solid var(--border-strong);
  outline-offset: 2px;
  text-decoration: none !important;
}

.workIndexItem__img,
.seriesIndexItem__img{
  width: 48px;
  height: 48px;
  object-fit: cover;
  flex: 0 0 auto;
  border-radius: 6px;
  display: block;
  align-self: center;
}

.workIndexItem__work_id{
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  line-height: 1.2;
}

.workIndexItem__title,
.seriesIndexItem__title{
  font-weight: 500;
  line-height: 1.2;
}

/* Align the two text columns on the same baseline */
.workIndexItem__work_id,
.workIndexItem__title{
  align-self: baseline;
}

@media (max-width: 640px){
  .workIndexItem{ grid-template-columns: 1fr; row-gap: 8px; }
  .workIndexItem__row{ grid-template-columns: 1fr; row-gap: 2px; }
}

/* 7.	Page-type sections and overrides */

/* Home page */
.home-hero{
  width: 100vw;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.home-hero--flush{
  margin-top: calc(-1 * var(--space-6));
}

.home-hero img{
  display: block;
  width: 100%;
  height: auto;
}
.home-hero-caption{
  max-width: var(--container);
  margin: 8px auto 0;
  padding: 0 18px;
}

/* Home links styled similar to Notes index links */
.home-links{
  margin-top: var(--space-5);
  max-width: 640px;     /* adjust to taste */
  margin-left: auto;
  margin-right: auto;
  transform: translateX(-6px); /* add a small left nudge (optical correction) - try -2px to -6px */
}

/* .home-link is for interactive anchors; .home-link-text is for non-interactive fallback text in the same slot. */
.home-link{
  font-size: 0.95rem;
  display: inline-block;
  justify-self: start;
  width: fit-content;
}
.home-link-text{ 
  font-size: 0.9rem;
  font-weight: 600; 
  color: var(--text); 
  display: inline-block;
  justify-self: start;
  width: fit-content;
}
.home-link-prefix{
  font-size: 0.9rem; /* original smaller 12px ≈ 0.75rem (assuming the default root is 16px) */
  color: var(--muted);
  white-space: nowrap;
  text-align: right;     /* right-align text inside the prefix */
  justify-self: end;     /* push prefix to the right edge of the left column */
}

/* link stays naturally left-aligned in the right column; no change needed */
.home-link-item{
  display: grid;
  grid-template-columns: 1fr 1fr;  /* split the row around centre */
  align-items: baseline;
  column-gap: 10px;  /* “little gap” between prefix + link, 8-14px*/
  padding: 8px 0;
}

.home-link:link,
.home-link:active,
.home-link:focus{
  text-decoration: none !important;
  color: var(--link);
  font-weight: 500;
}
.home-link:visited{
  text-decoration: none !important;
  color: var(--link-visited);
  font-weight: 500;
}

.home-link:hover{
  color: var(--link-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.home-link:focus-visible{
  outline: 2px solid var(--border-strong);
  outline-offset: 2px;
}

/* moment layout specific styles */

.moment-body{
  max-width: var(--moment-measure);
  margin-left: auto;
  margin-right: auto;
  white-space: normal; /* IMPORTANT: avoid pre-line to prevent double-spacing artefacts */
}

/* Stanza spacing: paragraphs behave like stanzas */
.moment-body p{
  margin: 0;
}
.moment-body p + p{
  margin-top: 1em; /* tune: 0.75em–1.25em */
}

/* Add an explicit margin for moment figures */
.moment-body figure{ margin: 0; }               /* Reset browser default figure margins inside moments */
.moment-body figure.moment-hero{
  margin: var(--space-3) auto;               /* Then re-introduce deliberate spacing for moment images */
}

/* Prose-only: keep links visibly underlined by default */
.moment-body a:link,
.moment-body a:visited{
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Prose-only (new structural wrapper): keep links visibly underlined by default */
.content a:link,
.content a:visited{
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Supplements: links should read like prose by default */
.supplements a:link,
.supplements a:visited{
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* bulletproof moment block, when wrapping markdown moment text in <pre class="moment-text">...</pre> */
pre.moment-text{
  font-family: inherit;
  white-space: pre-wrap;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-4);
}

/* bulletproof text block, when wrapping markdown text e.g. <pre class="theme-text">...</pre> */
pre.series-text{
  font-family: inherit;
  white-space: pre-wrap;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-4);
}
pre.theme-text{
  font-family: inherit;
  white-space: pre-wrap;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-4);
}

/* Constrain the moment title to the same measure */
.moment-header{
  max-width: var(--moment-measure);
  margin-left: auto;
  margin-right: auto;
}

/* override global h1 */
.moment-header h1{
  font-size: 20px;
  margin-bottom: 6px;
}

/* Constrain the moment hero image to the same measure */
.moment .moment-hero{
  max-width: var(--moment-measure);
  margin-left: auto;
  margin-right: auto;
}

/* Responsive image within the constrained figure */
.moment .moment-hero img{
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* Moments don't have work aspect ratios; avoid forcing a box that centers the image. */
.moment .page__mediaImg{
  aspect-ratio: auto;
  object-fit: initial;
}

@media (max-width: 640px){
  .index__item { grid-template-columns: 1fr; }
  .index__work_id, .index__date { text-align: left; }
  .page__row{ grid-template-columns: 1fr; }
  .home-link-item{ grid-template-columns: 1fr; }
  .home-link-prefix{ justify-self: start; text-align: left; }
}


/* Series thumbnail grid (series pages) */
.seriesGrid{
  --cell: 72px; /* tune density: 64–96 */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--cell), 1fr));
  gap: 0.5rem;
  margin: var(--space-4) auto var(--space-5);
  max-width: var(--content-measure);
}

/* Clamp to 10 columns when there is room */
@media (min-width: 1200px){
  .seriesGrid{
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
}

.seriesGrid__item{
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 6px;
}

.seriesGrid__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Screen-reader-only helper (alias of .visually-hidden) */
.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.seriesGrid__more{
  max-width: var(--content-measure);
  margin: 0 auto;
}

.workDetails{
  max-width: var(--content-measure);
  margin: var(--space-5) auto 0;
}

.workDetails__group{
  margin: 0 0 var(--space-5);
}

.workDetails__title{
  margin: 0 0 var(--space-2);
  font-size: 0.95rem;
  font-weight: 500;
}

/* Base components (shared across sections):
Use “structure-first” naming and scope section-specific differences via the root page class
(e.g. .work, .theme, .moment, .research-note).
*/

.page{
  /* generic page wrapper */
}

.page__header{
  max-width: var(--content-measure);
  margin-left: auto;
  margin-right: auto;
}

.page__title{
  margin: 0 0 calc(var(--space-2) + 2px);
  font-size: clamp(1.125rem, 1.25vw, 1.375rem);
  line-height: 1.15;
  font-weight: 600;
}

.page__meta{
  margin: 0 0 var(--space-3);
}

.page__byline{
  margin: 0 0 var(--space-1);
}

.content{
  max-width: var(--content-measure);
  margin-left: auto;
  margin-right: auto;
  white-space: normal;
}

/* Keep heading-to-content spacing aligned across index and content pages. */
.series .content{
  margin-top: 0;
}

/* Primary/top media on a page */
.page__media{
  max-width: var(--content-measure);
  margin: var(--space-3) auto;
}

.page__mediaLink{
  display: block;
}

.page__mediaImg{
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: var(--work-ar, 4 / 3); /* fallback if not set */
  object-fit: contain; /* or cover */
}

/* Debug: add `debug-media-boxes` to <body> to compare link vs image boxes */
.debug-media-boxes .page__mediaLink{
  outline: 2px solid #d11;
  outline-offset: 2px;
}
.debug-media-boxes .page__mediaImg{
  outline: 2px solid #1166cc;
  outline-offset: 2px;
}

/* Definition list meta (e.g., Work “Details”) */
.page__dl{
  margin: 0;
}

/* default page rows include row borders and padding */
.page__row{
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: baseline;
  column-gap: 10px;
  padding: 6px 0;
  border-top: 1px solid var(--border);
}

.page__row:first-child{
  border-top: 0;
}

/* Caption-style meta (single-column) used by Work “Details” */
.page__caption{
  margin: 0;
}

/* .page__caption rules to override the generic .page__row grid/borders when rows are used as single-column caption lines in Work caption */
.page__caption .page__row{
  display: block;            /* override grid rows */
  grid-template-columns: none;
  column-gap: 0;
  padding: 0;
  border-top: 0;
  margin: 0 0 calc(var(--space-1) * 0.67); /* reduced row height - better for single rows of text */
}

.page__caption .page__row:first-child{
  margin-top: 0;
}

.page__tag{
  display: inline-block;
  margin-right: 6px;
}

.page__nav{
  max-width: var(--content-measure);
  margin: var(--space-6) auto 0;
}

/* Series navigation (work pages when visited with ?series=<series_id>) */
.seriesNav{
  max-width: var(--content-measure);
  margin: var(--space-1) auto 0;
  margin-bottom: var(--space-4);
  padding-top: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
}

.seriesNav__prev,
.seriesNav__next{
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--link);
  text-decoration: none;
  font-weight: 500;
  line-height: 1.2;
}

.seriesNav__prev:visited,
.seriesNav__next:visited{
  color: var(--link-visited);
}

.seriesNav__prev:hover,
.seriesNav__next:hover{
  color: var(--link-hover);
  border-color: var(--border-strong);
  background: var(--panel-2);
  text-decoration: none;
}

.seriesNav__prev:focus-visible,
.seriesNav__next:focus-visible{
  outline: 2px solid var(--border-strong);
  outline-offset: 2px;
}

@media (max-width: 640px){
  .seriesNav{
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: baseline; /* or center */
  }
  .seriesNav__prev,
  .seriesNav__next{
    width: auto;
    text-align: left;
    white-space: nowrap;
  }
}

/* Supplements (HTML inserts, documentation images, attachments lists) */
.supplements{
  max-width: var(--content-measure);
  margin: var(--space-5) auto 0;
}

.supplements__list{
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.supplements__item{
  margin: 0 0 var(--space-2);
}

.supplements__links{
  margin-top: var(--space-2);
}

/* Supplements link icon (emoji via CSS, not hard-coded in templates) */
.supplements__link{
  margin: 0 0 var(--space-1);
  position: relative;
  padding-left: 1.75em; /* space for the icon */
}
.supplements__link::before{
  position: absolute;
  left: 0;
  top: 52%;
  transform: translateY(-50%);
  line-height: 1.35;     /* looser line box for emoji glyphs */
  display: inline-block;
  opacity: 0.8; /* icon slightly muted */
}
.supplements__link--html::before{ content:"🔗"; }
.supplements__link--pdf::before{ content:"📄"; }


/* Generic card component (future use; keep workIndexItem as-is for now) */
.card{
  display: block;
  text-decoration: none;
}

.card__thumb{
  display: block;
  max-width: 100%;
  height: auto;
}

.card__title{
  font-weight: 600;
}

.card__meta{
  opacity: 0.75;
  font-size: 0.95em;
}

/* Section wrappers (plural, scoped): */
.works{
  /* works section wrapper */
}

.themes{
  /* themes section wrapper */
}

.moments{
  /* moments section wrapper */
}

.research{
  /* research section wrapper */
}

/* Note: section index pages use the shared `.index` / `.index__*` component classes. */

/* work page */
.work{
  font-size: 0.9rem; /* ~10% smaller than the default 1rem */
}

/* Ensure work-page meta blocks inherit the page font size */
.work .page__caption,
.work .supplements{
  font-size: inherit;
}

/* Work title row in caption details */
.work__titleRow{
  font-weight: 600;
}

/* Works-only enhancements
   If you want a more minimal aesthetic, comment out this entire block.
   (The shared `.page__row` and `.page__tag` rules will still render cleanly.)
*/

/* Works tags as “pills”: to revert to minimal tags, comment out this rule.
note: works tags are not currently in use on the work pages themselves.
*/
.work .page__tag{
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
}

/* Works documentation images
   To revert to minimal documentation styling, comment out this block.
*/
.work .supplements__item img{
  border: 1px solid var(--border);
  border-radius: 6px;
}

.work .supplements__item + .supplements__item{
  margin-top: var(--space-3);
}