/* Hesti: one parchment card on a linen ground.
   The homepage rules are the original hesti.uk holding page, carried over as-is. */

:root {
  --verdure:     #2D4A2D;
  --parchment:   #F5F0E8;
  --sienna:      #C4703F;
  --catalogue:   #A69E94;
  --saleroom:    #6B6A63;
  --canvas-bg:   #E2DDCE;
  --rule:        rgba(45, 74, 45, 0.22);
  --rule-strong: rgba(45, 74, 45, 0.55);

  --font-body:    var(--gh-font-body, "IM Fell English"), Georgia, serif;
  --font-heading: var(--gh-font-heading, "IM Fell English"), Georgia, serif;
  --font-caps:    "IM Fell English SC", Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }
html { background: var(--canvas-bg); }
body {
  min-height: 100vh;
  color: var(--verdure);
  font-family: var(--font-body);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
}

/* Inner pages hang from the top rather than centring. */
body:not(.home-template) {
  align-items: flex-start;
  padding: 48px 20px 64px;
}

main.card {
  position: relative;
  background: var(--parchment);
  width: 100%;
  max-width: 720px;
  padding: 56px 56px 40px;
  text-align: center;
  text-wrap: pretty;
}

/* Hand-pulled double rule — two near-parallel inked strokes, slightly uneven. */
.rule {
  display: block;
  width: 100%;
  max-width: 520px;
  height: 8px;
  margin: 40px auto 28px;
  color: var(--verdure);
  overflow: visible;
}
.rule path {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.9;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* ---------- Homepage (original holding page) ---------- */

.card--home img {
  display: block;
  width: 100%;
  max-width: 440px;
  height: auto;
  margin: 16px auto 40px;
}

.card--home h1 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 64px;
  line-height: 1.05;
  letter-spacing: 0.01em;
  margin: 0 0 28px;
}

.card--home p {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.7;
  color: var(--verdure);
  max-width: 520px;
  margin: 0 auto;
  text-wrap: pretty;
}

.card--error .error-link { margin-top: 20px; }
.card--error a { color: var(--verdure); text-underline-offset: 3px; }
.card--error a:hover { color: var(--sienna); }

/* ---------- Sign-off ---------- */

.sign-off {
  margin-top: 0;
  text-align: center;
}
.sign-off .sign {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.4;
  color: var(--verdure);
  margin-bottom: 14px;
}
.sign-off .domain {
  font-family: var(--font-caps);
  font-size: 12px;
  letter-spacing: 0.32em;
  color: var(--saleroom);
}

/* ---------- Inner pages ---------- */

.masthead { margin: 0 0 40px; }
.masthead-mark {
  font-family: var(--font-caps);
  font-size: 13px;
  letter-spacing: 0.32em;
  color: var(--verdure);
  text-decoration: none;
}
.masthead-mark:hover { color: var(--sienna); }

.article-kicker {
  font-family: var(--font-caps);
  font-size: 12px;
  letter-spacing: 0.32em;
  color: var(--saleroom);
  margin-bottom: 18px;
}
.article-title,
.list-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 48px;
  line-height: 1.1;
  letter-spacing: 0.01em;
  margin: 0 0 18px;
}
.article-meta {
  font-family: var(--font-caps);
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--saleroom);
}

.article-image { margin: 0 0 40px; }
.article-image img { display: block; width: 100%; height: auto; }
.article-image figcaption,
.gh-content figcaption {
  font-family: var(--font-caps);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--saleroom);
  text-align: center;
  margin-top: 12px;
}

/* ---------- Post content ---------- */

.gh-content {
  text-align: left;
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.7;
  color: var(--verdure);
}
.gh-content > * { margin: 0; }
.gh-content > * + * { margin-top: 1.1em; }

.gh-content h2,
.gh-content h3,
.gh-content h4 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.2;
}
.gh-content > * + h2 { margin-top: 1.8em; }
.gh-content > * + h3 { margin-top: 1.6em; }
.gh-content h2 { font-size: 30px; }
.gh-content h3 {
  font-family: var(--font-caps);
  font-size: 15px;
  letter-spacing: 0.2em;
}
.gh-content h4 { font-size: 21px; font-style: italic; }

.gh-content a {
  color: var(--verdure);
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 3px;
}
.gh-content a:hover { color: var(--sienna); }

.gh-content ul,
.gh-content ol { padding-left: 1.3em; }
.gh-content li + li { margin-top: 0.4em; }

.gh-content blockquote:not([class]) {
  padding: 0 0 0 24px;
  border-left: 1px solid var(--rule-strong);
  font-style: italic;
}

.gh-content hr {
  border: 0;
  height: 1px;
  width: 40%;
  background: var(--rule-strong);
  margin: 2.4em auto;
}

.gh-content img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.gh-content figure { margin-left: 0; margin-right: 0; }
.gh-content > figure,
.gh-content > .kg-card { margin-top: 2em; }
.gh-content > figure + *,
.gh-content > .kg-card + * { margin-top: 2em; }

/* Koenig editor widths, kept inside the card. */
.kg-width-wide {
  margin-left: -28px;
  margin-right: -28px;
}
.kg-width-full {
  margin-left: -56px;
  margin-right: -56px;
}
.kg-width-wide img,
.kg-width-full img { width: 100%; }

/* ---------- Lists (tags, page 2 onwards) ---------- */

.post-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.post-item { border-top: 1px solid var(--rule); }
.post-item:last-child { border-bottom: 1px solid var(--rule); }
.post-item-link {
  display: block;
  padding: 28px 0;
  color: var(--verdure);
  text-decoration: none;
}
.post-item-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.2;
  margin: 0 0 10px;
}
.post-item-link:hover .post-item-title { color: var(--sienna); }
.post-item-date {
  display: block;
  font-family: var(--font-caps);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--saleroom);
  margin-bottom: 12px;
}
.post-item-excerpt {
  font-size: 17px;
  line-height: 1.6;
  max-width: 520px;
  margin: 0 auto;
}
.post-item--empty {
  padding: 28px 0;
  font-size: 17px;
  font-style: italic;
}

.pagination {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 32px;
  font-family: var(--font-caps);
  font-size: 13px;
  letter-spacing: 0.14em;
}
.pagination a { color: var(--verdure); text-decoration: none; }
.pagination a:hover { color: var(--sienna); }
.pagination .page-number { color: var(--saleroom); }

/* ---------- Small screens ---------- */

@media (max-width: 560px) {
  body { padding: 16px 12px; }
  body:not(.home-template) { padding: 16px 12px 32px; }
  main.card { padding: 36px 24px 28px; }
  .card--home h1 { font-size: 44px; margin-bottom: 22px; }
  .card--home p { font-size: 17px; }
  .card--home img { max-width: 305px; margin: 8px auto 28px; }
  .rule { margin: 28px auto 22px; max-width: 360px; }

  .masthead { margin-bottom: 28px; }
  .article-title,
  .list-title { font-size: 34px; }
  .gh-content { font-size: 17px; }
  .gh-content h2 { font-size: 25px; }
  .kg-width-wide { margin-left: -12px; margin-right: -12px; }
  .kg-width-full { margin-left: -24px; margin-right: -24px; }
}