/* OnceMarked herbarium — editable theme, CSS contract v1.
   Design thesis: A naturalist's specimen book: a moss-cloth spine, botanical cartouche, accession labels and irregular old-style printing. Observations are mounted like specimens; article text stays clear beside the antique display face.
   Typography: IM Fell English. Irregular historical printing for a naturalist's specimen book.
*/

/* Font import: replace src with another Google-hosted font URL and update font-family below. Keep font-display:swap for fast text. IBM VGA is local; retain its attribution when using it. */
@font-face {
  font-family:"OM IM Fell English";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("https://fonts.gstatic.com/s/imfellenglish/v14/Ktk1ALSLW8zDe0rthJysWrnLsAzHEKOY.woff2") format("woff2");
}


/* Editing guide for people and coding agents.
   Complete theme layer, served after the small base stylesheet.
   Change selectors below; no hidden preset is appended after saving.
   Colours: --bg page, --surface cards, --ink text, --quiet secondary text,
   --line borders, --accent links, --code code backgrounds.
   --page-width sets reading width; --blog-font sets inherited typography.
   Keep default-only selectors to respect the Font/Colour/Width controls.
   Fonts: replace the import's src URL above to change the typeface.
   Keep its local family alias, or rename every matching font-family declaration.
   Font = Layout default uses this CSS. To override any Font selection, use
   html[data-theme] { --blog-font: "Your font", serif; } and explicit font-family
   rules for headings as needed. Google Fonts @import is also allowed, at the very top.
   .site-home, .site-post, .site-page and .site-tag scope different page types.
   Do not hide required attribution. No HTML or JS. External fonts must use Google Fonts.
*/

/* Theme colours only: explicit palette choices bypass these rules. Auto follows the device. */
html[data-palette="default"] {
  --bg:#f2f0df;
  --surface:#eae9d8;
  --ink:#293b2d;
  --quiet:#5b685a;
  --line:#d2d3c3;
  --accent:#40603c;
  --code:#e4e3d3;
}


/* Theme colours only: explicit palette choices bypass these rules. Auto follows the device. */
html[data-palette="default"][data-mode="dark"] {
  --bg:#19271e;
  --surface:#212f25;
  --ink:#e1e7cd;
  --quiet:#a5ad99;
  --line:#39463a;
  --accent:#b0c798;
  --code:#27342a;
}


/* Responsive adaptation: keep the same content readable on small screens. */
@media(prefers-color-scheme:dark) {

  /* Theme colours only: explicit palette choices bypass these rules. Auto follows the device. */
  html[data-palette="default"][data-mode="auto"] {
    --bg:#19271e;
    --surface:#212f25;
    --ink:#e1e7cd;
    --quiet:#a5ad99;
    --line:#39463a;
    --accent:#b0c798;
    --code:#27342a;
  }

}


/* Theme-default typography: explicit font selections bypass this rule. */
html[data-theme="minimal"] {
  --blog-font:Georgia,Palatino,serif;
}


/* Theme reading width: Narrow/Wide choices bypass this default. */
html[data-content-width="standard"] {
  --page-width:62rem;
}


/* Outer page composition: background decoration uses CSS only. */
body {
  border-left:1.2rem solid var(--accent);
  min-height:100vh;
  background-image:linear-gradient(90deg,var(--line),transparent 1.5rem);
}


/* Masthead: blog name and navigation container. */
.site-head {
  align-items:center;
  padding-top:3rem;
  border-bottom:1px solid var(--accent);
}


/* Blog name typography, separate from the article title. */
.site-title {
  font-size:1.3rem;
  font-variant:small-caps;
  letter-spacing:.06em;
}


/* Navigation links: wrapping, spacing and alignment. */
.site-nav {
  font-style:italic;
  font-size:.85rem;
}


/* Homepage introduction and, where listed, article heading treatment. */
.intro {
  position:relative;
  padding:3rem 2rem 3rem 12rem;
  border-bottom:1px solid var(--accent);
  margin-bottom:0;
  min-height:15rem;
}


/* Homepage introduction and, where listed, article heading treatment. */
.intro::before {
  content:"";
  position:absolute;
  left:1rem;
  top:3rem;
  width:7rem;
  height:9rem;
  border:1px solid var(--accent);
  border-radius:50%;
  background:linear-gradient(70deg,transparent 49%,var(--accent) 49% 50%,transparent 50%) center/65% 75% no-repeat,radial-gradient(ellipse at 100% 100%,var(--accent) 0 45%,transparent 47%) 25% 30%/1.5rem 2.3rem no-repeat,radial-gradient(ellipse at 0 100%,var(--accent) 0 45%,transparent 47%) 70% 50%/1.6rem 2.4rem no-repeat,radial-gradient(ellipse at 100% 100%,var(--accent) 0 45%,transparent 47%) 38% 72%/1.3rem 2rem no-repeat;
}


/* Homepage introduction and, where listed, article heading treatment. */
.intro h1 {
  font-size:clamp(2.5rem,6vw,4rem);
  line-height:1.05;
  font-style:italic;
}


/* Homepage introduction and, where listed, article heading treatment. */
.intro p {
  font-size:1rem;
  line-height:1.8;
  margin-top:1rem;
}


/* Post listing grid: minmax prevents long titles overflowing columns. */
.entry-list {
  counter-reset:specimen;
}


/* Post summary: title, excerpt, date and tags. */
.entry-card {
  counter-increment:specimen;
  display:grid;
  grid-template-columns:5rem minmax(0,1fr);
  gap:.4rem 1.5rem;
  padding-block:2rem;
}


/* Post summary: title, excerpt, date and tags. */
.entry-card::before {
  content:counter(specimen,decimal-leading-zero);
  align-self:start;
  grid-row:1/4;
  border:1px solid var(--accent);
  width:3rem;
  height:2rem;
  display:grid;
  place-items:center;
  color:var(--accent);
  font-size:.75rem;
  letter-spacing:.08em;
}


/* Post summary: title, excerpt, date and tags. */
.entry-card h2 {
  font-size:2rem;
  line-height:1.2;
}


/* Post summary: title, excerpt, date and tags. */
.entry-card p,.entry-card .meta {
  grid-column:2;
  margin:0;
}


/* Post summary: title, excerpt, date and tags. */
.entry-card p {
  font-size:.95rem;
}


/* Small publication metadata: wrapping must remain enabled. */
.meta {
  font-size:.75rem;
  font-style:italic;
}


/* Main reading container; header and footer remain outside it. */
.site-post .site-main,.site-page .site-main {
  max-width:44rem;
}


/* Article header: title, summary and publication metadata. */
.entry-head {
  border-block:1px solid var(--accent);
  padding-block:2rem;
}


/* Article header: title, summary and publication metadata. */
.entry-head h1 {
  font-size:clamp(2.4rem,6vw,3.8rem);
  line-height:1.15;
  letter-spacing:-.02em;
}


/* Article body and rich content: retain readable contrast and line-height. */
.prose {
  line-height:1.9;
}


/* Article body and rich content: retain readable contrast and line-height. */
.prose h2 {
  font-variant:small-caps;
  letter-spacing:.04em;
  font-size:1.2em;
}


/* Article body and rich content: retain readable contrast and line-height. */
.prose blockquote {
  border-inline:1px solid var(--accent);
  padding:1rem 1.5rem;
  font-style:italic;
  color:var(--ink);
}


/* Article body and rich content: retain readable contrast and line-height. */
.prose img {
  border:1px solid var(--line);
  padding:.4rem;
  background:var(--surface);
}


/* Footer and attribution: keep visible, including on mobile. */
.site-foot {
  border-top:1px solid var(--accent);
  font-style:italic;
}


/* Responsive adaptation: keep the same content readable on small screens. */
@media(max-width:40rem) {

  /* Outer page composition: background decoration uses CSS only. */
  body {
    border-left:.5rem solid var(--accent);
  }


  /* Homepage introduction and, where listed, article heading treatment. */
  .intro {
    padding:2rem 0 2rem 5.5rem;
    min-height:0;
  }


  /* Homepage introduction and, where listed, article heading treatment. */
  .intro::before {
    left:0;
    top:2rem;
    width:4rem;
    height:6rem;
  }


  /* Homepage introduction and, where listed, article heading treatment. */
  .intro h1 {
    font-size:2.2rem;
  }


  /* Post summary: title, excerpt, date and tags. */
  .entry-card {
    grid-template-columns:2.5rem minmax(0,1fr);
    gap:.4rem 1rem;
  }


  /* Post summary: title, excerpt, date and tags. */
  .entry-card::before {
    width:2.25rem;
    height:2.25rem;
  }


  /* Post summary: title, excerpt, date and tags. */
  .entry-card h2 {
    font-size:1.8rem;
  }


  /* Masthead: blog name and navigation container. */
  .site-head {
    align-items:flex-start;
  }

}


/* Theme-default typography: explicit font selections bypass this rule. */
html[data-theme="minimal"] :is(.site-title,.intro h1,.entry-head h1,.entry-card h2,.prose h2,.prose h3) {
  font-family:"OM IM Fell English",serif;
  font-weight:400;
  font-style:normal;
}