/* OnceMarked noir — editable theme, CSS contract v1.
   Design thesis: A detective paperback after midnight: condensed billboard titles, tobacco ink, hard black rules and the slanted light of window blinds. Pulp drama in the headlines, a restrained single-column narrative underneath.
   Typography: Anton. Dense condensed capitals evoke paperback crime titles and cinema bills. The narrative stays in comfortable Georgia.
*/

/* 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 Anton";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("https://fonts.gstatic.com/s/anton/v27/1Ptgg87LROyAm3Kz-C8.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:#f0e6cb;
  --surface:#e8dec4;
  --ink:#25221e;
  --quiet:#625d52;
  --line:#d0c7af;
  --accent:#815022;
  --code:#e2d8bf;
}


/* Theme colours only: explicit palette choices bypass these rules. Auto follows the device. */
html[data-palette="default"][data-mode="dark"] {
  --bg:#1e1d1b;
  --surface:#262521;
  --ink:#e9ddbd;
  --quiet:#aca38c;
  --line:#3e3c35;
  --accent:#d3a467;
  --code:#2c2a26;
}


/* 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:#1e1d1b;
    --surface:#262521;
    --ink:#e9ddbd;
    --quiet:#aca38c;
    --line:#3e3c35;
    --accent:#d3a467;
    --code:#2c2a26;
  }

}


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


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


/* Outer page composition: background decoration uses CSS only. */
body {
  border-top:12px solid var(--ink);
}


/* Masthead: blog name and navigation container. */
.site-head {
  padding:1.5rem 0;
  border-bottom:2px solid var(--ink);
}


/* Blog name typography, separate from the article title. */
.site-title {
  font-size:1.4rem;
  text-transform:uppercase;
  letter-spacing:.03em;
}


/* Navigation links: wrapping, spacing and alignment. */
.site-nav {
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.1em;
}


/* Homepage introduction and, where listed, article heading treatment. */
.intro {
  position:relative;
  isolation:isolate;
  padding:2.5rem 2rem;
  margin:0 0 2rem;
  background:var(--ink);
  color:var(--bg);
  border-bottom:8px solid var(--accent);
}


/* Homepage introduction and, where listed, article heading treatment. */
.intro::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:repeating-linear-gradient(155deg,transparent 0 28px,color-mix(in srgb,var(--bg) 8%,transparent) 28px 44px);
}


/* Homepage introduction and, where listed, article heading treatment. */
.intro h1 {
  font-size:clamp(3.5rem,11vw,7rem);
  line-height:1.05;
  letter-spacing:.01em;
  text-transform:uppercase;
}


/* Homepage introduction and, where listed, article heading treatment. */
.intro p {
  font-size:1rem;
  line-height:1.8;
  color:inherit;
  max-width:34rem;
}


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


/* Post summary: title, excerpt, date and tags. */
.entry-card,.entry-card:last-child {
  counter-increment:chapter;
  display:grid;
  grid-template-columns:4rem minmax(0,1fr);
  gap:.5rem 1.5rem;
  border:0;
  border-bottom:2px solid var(--ink);
  padding:1.5rem 0;
}


/* Post summary: title, excerpt, date and tags. */
.entry-card::before {
  content:counter(chapter,decimal-leading-zero);
  grid-row:1/4;
  font-size:2rem;
  font-style:italic;
  color:var(--accent);
}


/* Post summary: title, excerpt, date and tags. */
.entry-card h2 {
  font-size:clamp(1.75rem,4vw,2.5rem);
  line-height:1.2;
  text-transform:uppercase;
  letter-spacing:.02em;
}


/* 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:1rem;
  line-height:1.8;
}


/* Small publication metadata: wrapping must remain enabled. */
.meta {
  font-size:.6875rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}


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


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


/* Article header: title, summary and publication metadata. */
.entry-head h1 {
  font-size:clamp(3rem,8vw,5.5rem);
  line-height:1.05;
  text-transform:uppercase;
  letter-spacing:.015em;
}

.entry-summary {
  font-size:1.125rem;
  font-style:italic;
}


/* Article body and rich content: retain readable contrast and line-height. */
.prose {
  font-size:1.125rem;
  line-height:1.85;
}


/* Article body and rich content: retain readable contrast and line-height. */
.prose h2 {
  font-size:2rem;
  line-height:1.25;
  letter-spacing:.02em;
  text-transform:uppercase;
}


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


/* Footer and attribution: keep visible, including on mobile. */
.site-foot {
  border-top:6px solid var(--ink);
  font-size:.75rem;
}


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

  /* Homepage introduction and, where listed, article heading treatment. */
  .intro {
    padding:1.5rem;
  }


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


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

}


/* 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 Anton",serif;
  font-weight:400;
  font-style:normal;
}