/* ============================================================
   Dreaming Arts — Still Flying blog
   Publii "Simple" theme, forked and restyled to match the main site.

   Loaded after tokens.css and site.css (see partials/head.hbs), so this
   file draws colours and type from the SAME custom properties as the main
   site (--ink, --bark-deep, --gold, etc. — defined in /css/tokens.css) and
   only adds the blog-specific layer: post typography, the paw trail, entry
   cards and pagination. It does not redefine a colour or font size that
   already exists as a token.

   Simple's own base layout (grid widths, responsive breakpoints, spacing
   rhythm) is left in main.css/style.css — this file recolours and retypes
   on top of that structure, it does not replace it.
   ============================================================ */

:root {
  /* paw trail */
  --da-paw-w:   clamp(34px, 5vw, 72px);
  --da-paw-gap: clamp(20px, 3.4vw, 56px);
  --da-pad-x:   clamp(20px, 5vw, 48px);
  --da-pad-y:   clamp(54px, 7vw, 104px);
  /* Space between the featured image and the start of the article body —
     40% less than --da-pad-y, used only for the top side (bottom spacing is
     unaffected). The paw trail's own top offset must match this exactly, or
     it stops lining up with the first line of text. */
  --da-pad-top: clamp(32px, 4.2vw, 62px);
}

/* ---------- Base ---------- */
body {
  background: var(--cream);
  color: var(--body-light);
  font-family: Karla, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* Square corners — load-bearing for the brand; Simple rounds things by default */
*,
img,
input,
button,
textarea,
select,
.btn,
[type="button"],
[type="submit"],
.hero__image-wrapper,
.feed__image,
.da-feature-img img { border-radius: 0 !important; }

h1, h2, h3, h4,
.post__title {
  font-family: Spectral, serif;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
h1, .post__title { font-size: clamp(30px, 4.4vw, 58px); line-height: 1.08; }
h2 { font-size: clamp(24px, 3vw, 38px); }
h3 { font-size: clamp(20px, 2.2vw, 27px); }

p { text-wrap: pretty; }
a { color: var(--brown-link); text-decoration: none; }
a:hover { color: var(--brown-link-hover); }

blockquote {
  margin: clamp(26px,3vw,42px) 0;
  padding: 0 0 0 clamp(20px,2.4vw,32px);
  border-left: 2px solid var(--gold);
  font-family: Spectral, serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(19px, 2.2vw, 26px);
  line-height: 1.5;
  color: var(--ink);
}
blockquote cite,
blockquote footer {
  display: block;
  margin-top: 16px;
  font-family: Cinzel, serif;
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--brown-link-hover);
}

hr {
  border: 0;
  height: 1px;
  background: rgba(43,37,33,0.14);
  margin: clamp(34px,4vw,56px) 0;
}

/* ---------- Small caps labels (dates, tags, authors) ---------- */
.post__meta,
.post__meta a,
.post__date,
.feed__author,
.post__tags,
.post__tag {
  font-family: Cinzel, serif;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--brown-link-hover);
  font-style: normal;
}
.post__tags { display: flex; flex-wrap: wrap; gap: 10px 16px; list-style: none; padding: 0; }

/* ---------- Article / page header (post__header, and the generic hero
   used on the homepage, tag, tags and 404 templates) ---------- */
.hero__content {
  background: var(--bark-deep);
  padding: clamp(43px,5.6vw,80px) var(--da-pad-x);
  text-align: left;
}
.hero__content .wrapper { max-width: var(--entry-width); margin: 0 auto; padding: 0; }
.hero--noimage { background: var(--bark-deep); }
.hero__content h1,
.hero__content .post__title { color: var(--ink-on-dark); }
.hero__content .post__meta,
.hero__content .post__meta a,
.hero__content .post__date,
.hero__content .feed__author { color: var(--gold-on-dark); }
.hero__content .post__meta a:hover,
.hero__content .feed__author:hover { color: var(--gold-hover); }
.hero__content .page__desc { color: var(--body-dark-1); margin-top: 16px; }
.hero__content .btn { margin-top: 24px; }
.post__back {
  display: inline-block;
  margin-bottom: 18px;
  font-family: Cinzel, serif;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-on-dark);
}
.post__back:hover { color: var(--gold-hover); }
.hero__eyebrow {
  margin: 0 0 14px;
  font-family: Cinzel, serif;
  font-size: clamp(11px, 1.1vw, 13px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-on-dark);
}
.hero__subtitle {
  margin: 14px 0 0;
  font-family: Spectral, serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(17px, 1.8vw, 22px);
  color: var(--body-dark-1);
}

/* ---------- Featured image ----------
   object-fit: contain, not cover — several featured images (the post masthead
   in particular) have title text baked into the artwork near the edges, and a
   cover-crop on a box shorter than the source image's aspect ratio slices
   straight through it. Contain always shows the whole image; the dark
   letterbox background reads as intentional, matching the bark header above. */
.hero__image,
.hero__image-wrapper { margin: 0; background: var(--bark-deep); }
.hero__image-wrapper { height: auto !important; }
.da-feature-img img,
.hero__image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: clamp(320px, 48vw, 640px);
  object-fit: contain;
  background: var(--bark-deep);
}

/* ---------- Homepage masthead: live text overlaid on the hero image ----------
   Only .hero--home (the homepage's hero block, see index.hbs) gets this
   treatment — post/page headers keep the stacked bark-bar-then-image layout,
   since their featured images already carry their own baked-in title text.
   Use the CLEAN artwork (no baked-in text) as the uploaded hero image here. */
.hero--home { position: relative; overflow: hidden; }
.hero--home .hero__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(90deg, rgba(42,36,32,0) 40%, rgba(42,36,32,0.75) 100%);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: clamp(24px,4vw,64px);
}
.hero--home .hero__content .wrapper { max-width: 420px; margin: 0; text-align: right; }
.hero--home .hero__image,
.hero--home .hero__image-wrapper { height: 100%; }
.hero--home .hero__image img {
  height: 100%;
  max-height: none;
  object-fit: cover;
  background: none;
}
@media (max-width: 680px) {
  .hero--home .hero__content {
    background: linear-gradient(180deg, rgba(42,36,32,0) 50%, rgba(42,36,32,0.85) 100%);
    justify-content: flex-end;
    align-items: flex-end;
  }
  .hero--home .hero__content .wrapper { max-width: 100%; text-align: left; }
}

/* ---------- Article body + paw trail ---------- */
.post__entry {
  position: relative;
  padding-left: calc(var(--da-pad-x) + var(--da-paw-w) + var(--da-paw-gap));
  padding-top: var(--da-pad-top);
  padding-bottom: var(--da-pad-y);
}

/* The trail is a separate absolutely-positioned box, not a background on
   .post__entry itself — a background's own position anchor still lets
   repeat-y tile in BOTH directions from it, so unless that anchor happens to
   land on an exact multiple of the tile's rendered height (it never does,
   both are independent clamp()s), a partial tile bleeds through above the
   anchor. Giving the trail its own box whose top edge IS the tiling origin
   leaves nothing above for a stray tile to appear in. */
.post__entry::before {
  content: '';
  position: absolute;
  top: var(--da-pad-top);
  bottom: var(--da-pad-y);
  left: var(--da-pad-x);
  width: var(--da-paw-w);
  background-image: url('../images/paw-tile.png');
  /* "space" (not repeat-y) fits only whole tiles and spreads the leftover
     room as extra gaps between them, instead of clipping a partial paw print
     wherever the box's bottom edge happens to land mid-tile. */
  background-repeat: no-repeat space;
  background-position: 0 0;
  background-size: var(--da-paw-w) auto;
}

/* Trail off on narrow screens — it would crowd the column */
@media (max-width: 680px) {
  .post__entry { padding-left: 0; }
  .post__entry::before { display: none; }
}

.content__entry.post__entry p,
.content__entry.post__entry li {
  font-size: clamp(16px, 1.65vw, 18.5px);
  line-height: 1.85;
  color: var(--body-light);
  margin: 0 0 clamp(18px,2vw,26px);
}

/* First paragraph reads as a lede */
.content__entry.post__entry > p:first-of-type {
  font-family: Spectral, serif;
  font-weight: 300;
  font-size: clamp(19px, 2.1vw, 25px);
  line-height: 1.6;
  color: var(--ink);
}

.content__entry.post__entry h2,
.content__entry.post__entry h3 { margin: clamp(34px,4vw,54px) 0 clamp(14px,1.6vw,20px); }

.content__entry img {
  display: block;
  width: 100%;
  height: auto;
  margin: clamp(30px,3.6vw,50px) 0;
}
.content__entry figcaption,
figcaption {
  margin: 12px 0 0;
  padding: 0;
  background: none;
  font-family: Karla, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted-light-2);
}
/* Simple's own figcaption rule pads/backgrounds it white — scoped reset for the
   featured-image caption specifically, since main.css's selector wins ties by
   being more specific ( .hero__image > figcaption ). */
.hero__image > figcaption {
  padding: 10px var(--da-pad-x) 0 !important;
  background: var(--cream) !important;
  margin: 0 !important;
}

.content__entry ul,
.content__entry ol { padding-left: 1.2em; margin: 0 0 clamp(18px,2vw,26px); }
.content__entry li { margin-bottom: 10px; }

/* Embedded media (Bandcamp, YouTube, Spotify) must never overflow */
.content__entry iframe,
.content__entry embed,
.content__entry video {
  max-width: 100%;
}
.content__entry .fr-video,
.content__entry .responsive-embed,
.content__entry [style*="padding-bottom"] iframe {
  width: 100% !important;
}

/* ---------- Homepage tagline band ---------- */
.homepage-tagline {
  background: var(--cream);
  padding: clamp(44px,5.4vw,80px) clamp(20px,5vw,48px);
  text-align: center;
}
.homepage-tagline p {
  max-width: 780px;
  margin: 0 auto;
  font-family: Spectral, serif;
  font-weight: 300;
  font-size: clamp(19px, 2.1vw, 25px);
  line-height: 1.6;
  color: var(--ink);
}

/* ---------- Entry list (blog index, tag view) ---------- */
.list { background: var(--sand); padding-top: clamp(40px,4.4vw,64px); padding-bottom: clamp(40px,4.4vw,64px); }
.feed__eyebrow {
  margin: 0 0 clamp(24px,3vw,40px);
  font-family: Cinzel, serif;
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--brown-link-hover);
}

.list .post.feed__item {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(20px,2.6vw,38px);
  align-items: center;
  background: var(--cream);
  border: 1px solid rgba(43,37,33,0.14);
  margin-top: 0;
  margin-bottom: clamp(26px,3.2vw,44px);
  padding: 0;
  max-width: none;
  flex-wrap: wrap;
}
.list .post.feed__item:hover { border-color: rgba(138,106,85,0.55); }

/* Fixed aspect ratio, not height:100% — the grid row's height is driven by
   the (taller) text column, and stretching a landscape photo to match that
   crops it down to a narrow vertical strip. A fixed ratio keeps it landscape
   regardless of how much excerpt text sits beside it.

   Simple's own .feed__image (shared with this element — the figure carries
   both classes) fixes width/height to calc(var(--feed-image-size) + 4vw)
   above 900px — a small flex-shrink:0 square meant for its own default card
   layout. That silently wins over our img-level width:100% (100% of an
   already-shrunk figure isn't 100% of the grid column), leaving the image
   small and off-centre with blank space around it. Override the figure's own
   box to fill the grid column; the img's aspect-ratio then controls its
   actual shape. */
.list .post .da-feature-img {
  width: 100%;
  height: auto;
  max-width: none;
  margin: 0;
  align-self: center;
}
.list .post .da-feature-img img {
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  min-height: 0;
  object-fit: cover;
  max-height: none;
}
.list .post .post__header.post__entry {
  background: none;
  padding: clamp(24px,3vw,42px);
  max-width: none;
  margin: 0;
}
/* The paw trail is a ::before on .post__entry now (see the single-article
   rule below) — .list cards share that class for their text block but must
   never show the trail, so it needs suppressing here too. */
.list .post .post__header.post__entry::before { display: none; }
.list .post .post__title {
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.15;
  margin: 0 0 12px;
  color: var(--ink);
}
.list .post .post__meta,
.list .post .post__date,
.list .post .feed__author { color: var(--brown-link-hover); }
.list .post .post__entry p {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--muted-light-1);
  font-family: Karla, sans-serif;
  font-weight: 400;
}
.list .post .post__entry > p:first-of-type { font-family: Karla, sans-serif; font-size: 15.5px; color: var(--muted-light-1); }
.list .readmore.feed__readmore {
  display: inline-block;
  margin-top: 4px;
  font-family: Cinzel, serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brown-link);
}
.list .readmore.feed__readmore:hover { color: var(--brown-link-hover); }

/* ---------- Buttons ----------
   Deliberately scoped to .btn and [type="submit"] only — NOT a bare "button" or
   "[type=\"button\"]" selector. The header's .nav-caret / .nav-toggle are also
   <button type="button"> elements (see site.css); an unscoped selector here would
   tie on specificity with site.css's rules and win by load order, turning the nav
   dropdown carets and mobile hamburger into gold pills. */
.btn,
[type="submit"] {
  padding: 14px 30px;
  background: var(--gold);
  border: 1px solid var(--gold);
  color: var(--button-ink);
  font-family: Karla, sans-serif;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.btn:hover,
[type="submit"]:hover {
  background: var(--gold-hover);
  border-color: var(--gold-hover);
  color: var(--button-ink);
}
.hero__content .btn { background: var(--gold); border-color: var(--gold); color: var(--button-ink); }

/* ---------- Forms (mailing list) ----------
   Matches site/css/components.css exactly — the footer sits on a dark bark
   background there, so the input is a faint light-on-dark overlay (not the
   light-mode cream input used elsewhere) and the button is transparent with
   a gold border, filling solid gold only on hover, not solid gold by default. */
.form-footer-input {
  flex: 1 1 160px;
  min-width: 0;
  padding: 12px 15px;
  background: rgba(247,243,235,0.06);
  border: 1px solid rgba(247,243,235,0.24);
  color: var(--ink-on-dark);
  outline: none;
  font-size: 14px;
  font-family: Karla, sans-serif;
}
.btn-footer {
  padding: 12px 20px;
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-family: Karla, sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.btn-footer:hover { background: var(--gold); color: var(--button-ink); }
.form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ---------- Pagination ---------- */
.pagination .btn--icon {
  font-family: Cinzel, serif;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brown-link);
  background: none;
  border: 1px solid rgba(43,37,33,0.14);
  padding: 10px 16px;
}
.pagination .btn--icon:hover { border-color: var(--brown-link-hover); color: var(--brown-link-hover); background: none; }

/* ---------- Related posts / bio / tags footer area ---------- */
.related { background: var(--sand); padding-top: clamp(40px,4.4vw,64px); padding-bottom: clamp(40px,4.4vw,64px); }
.related__title { margin-bottom: clamp(24px,3vw,40px); }
.content__actions { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; margin: clamp(30px,3.4vw,48px) 0; }
.bio__avatar { width: 72px; height: 72px; object-fit: cover; }
.bio { display: flex; gap: 20px; align-items: flex-start; padding: clamp(24px,3vw,40px) 0; border-top: 1px solid rgba(43,37,33,0.14); }
/* Simple's own decorative rule — a short line meant to sit beside an avatar
   in its default layout — reads as a stray, unexplained mark next to a bare
   name once .bio supplies its own top border instead. */
.content__bio::before { display: none !important; }

/* The gap before "This article was updated..." was the sum of .post__entry's
   own bottom padding (--da-pad-y, up to ~104px) plus Simple's own
   .content__footer margin-top (~40px+1vw) stacking on top of it. */
.content__footer { margin-top: clamp(14px, 1.8vw, 26px) !important; }

/* ---------- Bottom "Back to Blog" / "Next post" bar ---------- */
.post__bottom-nav { background: var(--sand); border-top: 1px solid rgba(43,37,33,0.14); }
.post__bottom-nav-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  padding: clamp(22px,2.6vw,32px) 0;
}
.post__bottom-nav-link {
  font-family: Cinzel, serif;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brown-link);
}
.post__bottom-nav-link:hover { color: var(--brown-link-hover); }
.post__bottom-nav-next { margin-left: auto; }