/* OnceMarked journal — editable theme, CSS contract v1.
   Design thesis: A private journal left open for visitors: bookish Literata throughout, generous inner margins, dates before titles and small ink-blue annotations. A diary, not a miniature magazine.
   Typography: Literata. Literata carries the whole journal: open book forms and comfortable paragraph texture, not a display font pasted over unrelated body text.
*/

/* 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 Literata";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("https://fonts.gstatic.com/s/literata/v40/or3PQ6P12-iJxAIgLa78DkrbXsDgk0oVDaDPYLanFLHpPf2TbBG_J_HWTA.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:#faf7f0;
  --surface:#f2efe8;
  --ink:#302b28;
  --quiet:#6d6864;
  --line:#dad6d0;
  --accent:#365a74;
  --code:#ece9e2;
}


/* Theme colours only: explicit palette choices bypass these rules. Auto follows the device. */
html[data-palette="default"][data-mode="dark"] {
  --bg:#211f1b;
  --surface:#292723;
  --ink:#eee6d9;
  --quiet:#b1aaa0;
  --line:#423f39;
  --accent:#a5c8df;
  --code:#2f2d28;
}


/* 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:#211f1b;
    --surface:#292723;
    --ink:#eee6d9;
    --quiet:#b1aaa0;
    --line:#423f39;
    --accent:#a5c8df;
    --code:#2f2d28;
  }

}


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


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


/* Masthead: blog name and navigation container. */
.site-head {
  display:block;
  padding:3.5rem 0 1.5rem;
  border-bottom:0;
}


/* Blog name typography, separate from the article title. */
.site-title {
  font-size:1.25rem;
  font-weight:400;
  letter-spacing:-.02em;
}


/* Navigation links: wrapping, spacing and alignment. */
.site-nav {
  margin-top:1rem;
  font-size:.8125rem;
  gap:1.5rem;
}


/* Main reading container; header and footer remain outside it. */
.site-main {
  padding-top:1rem;
}


/* Homepage introduction and, where listed, article heading treatment. */
.intro {
  padding-bottom:2rem;
  margin-bottom:.5rem;
  border-bottom:1px solid var(--line);
}


/* Homepage introduction and, where listed, article heading treatment. */
.intro h1 {
  font-size:2.25rem;
  line-height:1.25;
  letter-spacing:-.03em;
  font-weight:400;
}


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

/* Dates lead each diary entry. The prose column stays quiet and unboxed. */

/* Post summary: title, excerpt, date and tags. */
.entry-card,.entry-card:last-child {
  display:flex;
  flex-direction:column;
  border:0;
  padding:1.5rem 0;
}


/* Post summary: title, excerpt, date and tags. */
.entry-card .meta {
  order:-1;
  margin:0 0 .65rem;
  font-size:.6875rem;
  letter-spacing:.06em;
  color:var(--accent);
}


/* Post summary: title, excerpt, date and tags. */
.entry-card h2 {
  font-size:1.5rem;
  line-height:1.35;
  font-weight:400;
  letter-spacing:-.02em;
}


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


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


/* Article header: title, summary and publication metadata. */
.entry-head h1 {
  font-size:clamp(2rem,5vw,2.8rem);
  line-height:1.25;
  font-weight:400;
  letter-spacing:-.03em;
}


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


/* Article body and rich content: retain readable contrast and line-height. */
.prose h2 {
  font-size:1.4rem;
  font-weight:400;
  line-height:1.4;
}


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


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

.site-branding {
  font-size:.875rem;
}


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

  /* Masthead: blog name and navigation container. */
  .site-head {
    padding-top:2rem;
  }

}


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