/* ==========================================================================
   PRIJEDLOG D — „Skriptorij"
   Bogato ilumininirani list, a ne prazna ploha. Tri stvari nose dizajn:
   RUBRIKA (crvena, za strukturu), ZLATO (za iluminaciju) i PLETER (hrvatski
   predromanički troplet, kao vrpca i kao okvir). Sve je i dalje čisti
   HTML + CSS: nula JavaScripta, nula vanjskih zahtjeva.
   ========================================================================== */

:root {
  /* ---- Papir i tinta (identično postojećoj stranici, provjereno AA) ---- */
  --color-bg:           #faf8f4;
  --color-bg-subtle:    #f1ece3;
  --color-text:         #2a2825;
  --color-text-muted:   #6b6459;
  --color-border:       #e3ddd0;
  --color-accent:       #35618c;
  --color-accent-hover: #234867;
  --color-title:        #a6241c;
  --color-title-hover:  #7e1b14;

  /* ---- Zlato: druga boja iluminacije. Nije ukras nego druga razina
         strukture — godine, versali, kolofon. Prigušeni oker, jer pravi
         žuti zlatni ton na papiru ne bi prošao kontrast. ---- */
  --color-gold:       #906313;
  --color-gold-hover: #7b5410;

  /* ---- Linijanje lista: pisar je list najprije izbo i izlinijao. Ovdje
         to radi repeating-linear-gradient, bez ijedne slike. Držano vrlo
         blijedo namjerno: tekstura se osjeti, a ne natječe se s tekstom
         (i ne smeta što se ne poklapa točno s pismovnom linijom). ---- */
  --ruling:        rgba(166, 36, 28, 0.055);
  --ruling-bound:  rgba(166, 36, 28, 0.16);

  /* ---- Tipografija ---- */
  --font-serif: Charter, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:  ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --font-hand:  "Metamorphous", Charter, "Iowan Old Style", Palatino, Georgia, serif;

  --step--2: 0.64rem;  --step--1: 0.8rem;   --step-0: 1rem;
  --step-1:  1.25rem;  --step-2:  1.563rem; --step-3: 1.953rem; --step-4: 2.441rem;

  --body-font-size: clamp(16px, 0.95rem + 0.3vw, 19px);
  --leading:        1.62;
  --leading-tight:  1.24;
  --title-font-size:   clamp(2.6rem, 1.2rem + 5.0vw, 3.6rem);
  --epithet-font-size: clamp(0.82rem, 0.5rem + 1.2vw, 1.12rem);

  --space-1:.25rem; --space-2:.5rem;  --space-3:.75rem; --space-4:1rem;
  --space-5:1.5rem; --space-6:2rem;   --space-7:3rem;   --space-8:4.5rem;
  --space-9:6.5rem;

  --measure: 66ch;
  --gutter:  var(--space-4);
  --radius:  3px;

  --margin-width: 11rem;
  --margin-gap:   1.75rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:           #1c1b18;
    --color-bg-subtle:    #262420;
    --color-text:         #e8e3d8;
    --color-text-muted:   #9c9384;
    --color-border:       #38352d;
    --color-accent:       #82b1e0;
    --color-accent-hover: #a7c9ea;
    --color-title:        #e0665a;
    --color-title-hover:  #eb8478;
    --color-gold:         #c9a03f;
    --color-gold-hover:   #ddb65c;
    --ruling:       rgba(224, 102, 90, 0.07);
    --ruling-bound: rgba(224, 102, 90, 0.20);
  }
}

@font-face {
  font-family: "Metamorphous"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/metamorphous/metamorphous-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: "Metamorphous"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/metamorphous/metamorphous-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   OSNOVA
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }

body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-serif);
  font-size: var(--body-font-size);
  line-height: var(--leading);
}

img { max-width: 100%; height: auto; display: block; }
h1,h2,h3,h4,h5,h6 { font-weight: 600; line-height: var(--leading-tight); }
p { margin: 0 0 var(--space-5); }

a { color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: .15em; }
a:hover { color: var(--color-accent-hover); }

/* ==========================================================================
   LIST — linijanje i okomite granične crte
   Pravi pergamentni list ima vodoravno linijanje i dvije okomite crte koje
   omeđuju stupac teksta. Vodoravno je jedva vidljivo (tekstura), okomito
   je jasno (konstrukcija). Oboje je gradijent, ni jedna slika.
   ========================================================================== */
.site-main {
  flex: 1 0 auto;
  width: 100%; max-width: var(--measure);
  margin-inline: auto; padding-inline: var(--gutter);
  padding-block: var(--space-7) var(--space-9);
  position: relative;
  background-image:
    repeating-linear-gradient(to bottom,
      transparent 0, transparent calc(1.62rem - 1px),
      var(--ruling) calc(1.62rem - 1px), var(--ruling) 1.62rem);
}
/* the two bounding lines, set just outside the text block */
.site-main::before, .site-main::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 1px;
  background: var(--ruling-bound);
}
.site-main::before { left: 0; }
.site-main::after  { right: 0; }

/* ==========================================================================
   ZAGLAVLJE — znak, wordmark, geslo, pleter
   Ime ima 17 znakova; u jednom retku bi se stisnulo. Slaganjem se dobiva
   hijerarhija: "Porcellus" je ime, "NATALIS" pridjev uz njega.
   ========================================================================== */
.site-header {
  width: 100%; max-width: var(--measure);
  margin-inline: auto; padding-inline: var(--gutter);
  padding-block: var(--space-6) 0;
  text-align: center;
}
.site-mark { width: 92px; height: 92px; margin: 0 auto var(--space-3); }

.site-title {
  display: inline-block; text-decoration: none;
  color: var(--color-title);
  font-family: var(--font-hand); font-weight: normal;
  line-height: var(--leading-tight);
}
.site-title:hover { color: var(--color-title-hover); }
.site-title-name    { display: block; font-size: var(--title-font-size); }
.site-title-epithet {
  display: block;
  font-size: var(--epithet-font-size);
  letter-spacing: .46em;
  /* letter-spacing adds a trailing space after the last letter, which
     un-centres the word against the name above it */
  text-indent: .46em;
  margin-top: .05em;
}

/* The motto. It is the site's own sentence, so it is set in the content
   serif rather than the sans chrome -- small, spaced, and quiet. */
.site-motto {
  margin: var(--space-4) 0 0;
  font-size: var(--step--1);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* the interlace band, used as a rule under the head and over the foot */
.pleter {
  display: block; width: 100%; height: 22px;
  margin-block: var(--space-4);
  opacity: .92;
}
.pleter--foot { margin-block: var(--space-6) var(--space-4); }

/* ==========================================================================
   GODIŠNJE RUBRIKE
   Godina je rubricirani međunaslov: zlatni broj, crvena vrpca preko stupca.
   ========================================================================== */
.year {
  display: flex; align-items: center; gap: var(--space-4);
  margin: var(--space-8) 0 var(--space-5);
  font-family: var(--font-hand);
  font-size: var(--step-2);
  color: var(--color-gold);
  font-weight: 400;
}
.year:first-of-type { margin-top: var(--space-4); }
.year::after {
  content: ""; flex: 1 1 auto; height: 2px;
  background: linear-gradient(to right, var(--color-title), transparent);
  opacity: .55;
}
.year-count {
  font-family: var(--font-sans); font-size: var(--step--2);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ==========================================================================
   ZAPISI — svaka misao je natpis s rubriciranim versalom
   ========================================================================== */
.entries { list-style: none; margin: 0; padding: 0; }
.entry { margin-bottom: var(--space-7); }
.entry-link { display: block; color: inherit; text-decoration: none; }

.entry-text {
  margin: 0;
  font-size: var(--step-1);
  line-height: 1.45;
}
/* The versal: a rubricated initial in the title face, two lines deep. No
   markup needed -- ::first-letter means Hugo's templates stay untouched. */
.entry-text::first-letter {
  float: left;
  font-family: var(--font-hand);
  font-size: 2.9em; line-height: .84;
  color: var(--color-title);
  padding-right: .09em; padding-top: .04em;
  /* J and Y descend well below the float's box, and the date clears that
     box, not the glyph -- without this the tail of a J crosses the date. */
  padding-bottom: .12em;
}
.entry-link:hover .entry-text::first-letter { color: var(--color-title-hover); }
.entry-link:hover .entry-text { color: var(--color-title); }

/* a titled post is named, not opened with a versal */
.entry--titled .entry-title {
  margin: 0 0 var(--space-2);
  font-size: var(--step-2); font-weight: 700;
  font-variant-caps: small-caps; letter-spacing: .02em;
}
.entry--titled .entry-title::before {
  content: "\00B6"; color: var(--color-title);
  font-variant-caps: normal; margin-right: .35em; font-weight: 400;
}
.entry--titled .entry-text::first-letter { float: none; font: inherit; color: inherit; padding: 0; }
.entry--titled .entry-text { font-size: var(--step-0); color: var(--color-text-muted); }

.entry-date {
  /* clear the versal so every date sits flush with the text block; without
     this, a one-line entry indents its date under the initial and a wrapped
     one does not, and the column reads as ragged */
  display: block; clear: left; margin-top: var(--space-2);
  font-family: var(--font-sans); font-size: var(--step--1);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.entry-date b { color: var(--color-gold); font-weight: 600; }

/* ==========================================================================
   STRANICA JEDNE MISLI
   ========================================================================== */
.leaf { display: flex; flex-direction: column; min-height: 58vh; justify-content: center; padding-bottom: 6vh; }
.leaf .post-content > p {
  margin: 0; font-size: clamp(1.45rem, 1rem + 1.9vw, 2.35rem);
  line-height: 1.3; max-width: 26ch;
}
.leaf .post-content > p::first-letter {
  float: left; font-family: var(--font-hand);
  font-size: 2.6em; line-height: .84; color: var(--color-title);
  padding-right: .08em; padding-top: .03em;
}
.colophon {
  margin-top: var(--space-7); padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-family: var(--font-sans); font-size: var(--step--1);
  color: var(--color-text-muted);
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  align-items: baseline;
}
.colophon b { color: var(--color-gold); font-weight: 600; }

/* custode: in a codex, the word at the foot announcing the next leaf */
.custos {
  margin-top: var(--space-6); display: flex; flex-wrap: wrap;
  gap: var(--space-4); justify-content: space-between;
}
.custos a { color: var(--color-text-muted); text-decoration: none; max-width: 22rem; }
.custos a:hover { color: var(--color-title); }
.custos-label {
  display: block; font-family: var(--font-sans); font-size: var(--step--2);
  letter-spacing: .12em; text-transform: uppercase; color: var(--color-gold);
  margin-bottom: var(--space-1);
}
.custos-next { text-align: right; margin-left: auto; }

/* ==========================================================================
   PROZA — duga objava
   ========================================================================== */
.page-title {
  font-family: var(--font-serif); font-size: var(--step-3);
  font-weight: 700; font-variant-caps: small-caps; letter-spacing: .015em;
  line-height: var(--leading-tight); margin: 0 0 var(--space-3);
}
.page-title::before {
  content: "\00B6"; color: var(--color-title);
  font-variant-caps: normal; font-weight: 400; margin-right: .3em;
}
.post-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  font-family: var(--font-sans); font-size: var(--step--1);
  color: var(--color-text-muted); margin-bottom: var(--space-6);
}
.post-meta b { color: var(--color-gold); font-weight: 600; }
.meta-sep { opacity: .5; }
.post-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.post-tags li { margin: 0; }
.post-tags a { color: var(--color-text-muted); text-decoration: none; border-bottom: 1px dotted var(--color-border); }
.post-tags a:hover { color: var(--color-title); border-bottom-color: var(--color-title); }

.post-content > * { max-width: var(--measure); }
.post-content > :first-child { margin-top: 0; }
.post-content h2 {
  font-size: var(--step-2); margin: var(--space-7) 0 var(--space-3);
  font-variant-caps: small-caps; letter-spacing: .015em;
}
.post-content h2::before { content: "\00B6"; color: var(--color-title); font-variant-caps: normal; margin-right: .3em; font-weight: 400; }
.post-content h3 { font-size: var(--step-1); margin: var(--space-6) 0 var(--space-2); }

blockquote {
  margin: var(--space-6) 0; padding-left: var(--space-5);
  border-left: 2px solid var(--color-gold);
  color: var(--color-text-muted); font-style: italic;
}
blockquote p:last-child { margin-bottom: 0; }

.poem { margin: var(--space-6) 0; padding-left: var(--space-5); line-height: 1.5; }

code { font-family: var(--font-mono); font-size: .9em; background: var(--color-bg-subtle); padding: .15em .4em; border-radius: var(--radius); }
pre { background: var(--color-bg-subtle); padding: var(--space-4); border-radius: var(--radius); overflow-x: auto; line-height: 1.5; margin: var(--space-6) 0; }
pre code { background: none; padding: 0; font-size: .875em; }

ul, ol { padding-left: 1.4em; margin: 0 0 var(--space-5); }
li { margin-bottom: var(--space-2); }
li:last-child { margin-bottom: 0; }

hr { border: none; border-top: 1px solid var(--color-border); margin: var(--space-7) 0; }
/* Porcellus on the About page: a portrait, so it is centred and given air
   rather than run to the measure like an illustration inside an argument. */
.portrait { margin: var(--space-6) auto var(--space-7); text-align: center; }
.portrait img { margin-inline: auto; }

figure { margin: var(--space-6) 0; }
figure img { border-radius: var(--radius); }
figcaption { font-family: var(--font-sans); font-size: var(--step--1); color: var(--color-text-muted); text-align: center; margin-top: var(--space-2); }

/* ==========================================================================
   MARGINALIJE
   ========================================================================== */
.post-content { counter-reset: marginnote; }
.marginmark { font-size: .7em; }
.marginmark a { color: var(--color-title); font-weight: 700; text-decoration: none; }
.marginmark a::after { counter-increment: marginnote; content: counter(marginnote); }
.marginnote {
  display: none; margin: var(--space-2) 0 var(--space-4);
  padding-left: var(--space-3); border-left: 2px solid var(--color-title);
  font-family: var(--font-serif); font-size: var(--step--1); line-height: 1.5;
  color: var(--color-text-muted);
}
.marginnote::before { content: counter(marginnote) ". "; color: var(--color-title); font-weight: 700; }
.footnotes { counter-reset: marginnote; margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
.footnotes ol { list-style: none; margin: 0; padding-left: 0; }
.footnotes li {
  counter-increment: marginnote; margin-bottom: var(--space-3);
  padding-left: var(--space-3); border-left: 2px solid var(--color-title);
  font-family: var(--font-serif); font-size: var(--step--1); line-height: 1.5;
  color: var(--color-text-muted);
}
.footnotes li::before { content: counter(marginnote) ". "; color: var(--color-title); font-weight: 700; }
.footnote-backref { margin-left: .4em; color: var(--color-text-muted); text-decoration: none; }

/* the drollery: Porcellus himself, out in the margin where he belongs */
.drollery { display: none; }

@media (min-width: 1180px) {
  .marginnote {
    display: block; float: right; clear: right; width: var(--margin-width);
    margin: .15em calc(-1 * (var(--margin-gap) + var(--margin-width))) var(--space-4) 0;
  }
  .footnotes { display: none; }
  .drollery {
    display: block; position: absolute;
    right: calc(-1 * (var(--margin-gap) + var(--margin-width)));
    bottom: var(--space-8);
    width: 9.5rem; height: 9.5rem; opacity: .85;
  }
  .drollery--left {
    right: auto; left: calc(-1 * (var(--margin-gap) + var(--margin-width)));
    transform: scaleX(-1);
  }
}

/* ==========================================================================
   PODNOŽJE
   ========================================================================== */
.site-footer {
  width: 100%; max-width: var(--measure);
  margin-inline: auto; padding-inline: var(--gutter);
  padding-bottom: var(--space-6);
}
.footer-bar {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-3);
  font-family: var(--font-sans); font-size: var(--step--1);
  color: var(--color-text-muted);
}
.site-nav { display: flex; gap: var(--space-4); }
.site-nav a, .lang-switch a { color: var(--color-text-muted); text-decoration: none; }
.site-nav a:hover, .lang-switch a:hover { color: var(--color-text); text-decoration: underline; }
.footer-bar p { margin: 0; }
.lang-switch {
  margin-left: auto; display: flex; align-items: baseline; gap: var(--space-2);
  font-size: var(--step--2); font-weight: 700; letter-spacing: .1em;
}
.lang-current { color: var(--color-text); }
.lang-sep { color: var(--color-border); font-weight: normal; }

/* ==========================================================================
   404
   ========================================================================== */
.not-found { text-align: center; padding-block: var(--space-8); }
.not-found .worm { width: 190px; height: 95px; margin: var(--space-6) auto; opacity: .9; }
.not-found p { color: var(--color-text-muted); }

/* ==========================================================================
   PRISTUPAČNOST
   ========================================================================== */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--color-bg); color: var(--color-text);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border); border-radius: var(--radius);
}
.skip-link:focus { left: var(--space-4); top: var(--space-4); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ==========================================================================
   UŽE OD 40em
   ========================================================================== */
@media (max-width: 40em) {
  :root { --gutter: var(--space-3); }
  .site-main { padding-block: var(--space-6) var(--space-8); }
  .inscription::first-letter, .entry-text::first-letter { font-size: 2.4em; }
  .custos-next { text-align: left; margin-left: 0; }
}

/* ==========================================================================
   POPISNE STRANICE — /objave/ i /oznake/<oznaka>/
   Godišnje rubrike nose naslovnicu; term-stranice su kraće i gušće, pa
   zadržavaju zbijeni popis. Isti versal bi ondje bio buka.
   ========================================================================== */
.list-page { position: relative; }
.list-intro { margin-bottom: var(--space-6); }
.list-intro > :first-child { margin-top: 0; }

.post-list { list-style: none; margin: 0; padding: 0; }
.post-list-item {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: baseline; gap: var(--space-2) var(--space-4);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.post-list-item:last-child { border-bottom: none; }
.post-list-link { font-size: var(--step-0); color: var(--color-text); text-decoration: none; }
.post-list-link::before {
  content: "\00B6"; color: var(--color-title); margin-right: .4em; font-weight: 400;
}
.post-list-link:hover { color: var(--color-title); }
.post-list-date {
  font-family: var(--font-sans); font-size: var(--step--1);
  color: var(--color-text-muted); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.post-list-date b { color: var(--color-gold); font-weight: 600; }
/* the wrapped date lines up with the text, not the container edge */
.post-list-item > .post-list-date { padding-left: 1.05em; }

.taxonomy-term-count {
  font-family: var(--font-sans); font-size: var(--step--1);
  color: var(--color-text-muted); white-space: nowrap;
}

.home-intro { margin-bottom: var(--space-6); }
.home-intro > :first-child { margin-top: 0; }

.post-header { margin-bottom: var(--space-6); }

/* ==========================================================================
   BILJEŠKA O PRIJEVODU
   Sučelje koje govori o pismu, pa ide u sans i ostaje prigušeno. Uokvireno,
   ne obrubljeno s lijeva: lijevi obrub je već zauzet — nosi ga citat (zlato)
   i marginalija (rubrika).
   ========================================================================== */
.translation-note {
  margin: 0 0 var(--space-6);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font-sans); font-size: var(--step--1);
  line-height: 1.45; color: var(--color-text-muted);
}
.translation-note--fallback { background: var(--color-bg-subtle); }
.translation-note p { margin: 0; }
.translation-note-msg + .translation-note-langs { margin-top: var(--space-2); }
.translation-note a { color: var(--color-text-muted); text-decoration: underline; }
.translation-note a:hover { color: var(--color-text); }
.translation-note-sep { padding-inline: var(--space-1); }