/*
 * Journal and long-form content.
 *
 * This is the only part of the site with sustained reading, so it gets a narrow
 * measure and generous leading. The metadata rail is the same component used on
 * the product page, so an article reads as another entry in the same record.
 */

/* ---------------------------------------------------------------------------
   Post list — ruled rows, matching the catalogue index on the homepage.
--------------------------------------------------------------------------- */
.k-post-list { border-top: 1px solid var(--k-rule); }

/* The title link is stretched over the whole card, so the target is the card
   rather than the line of text — the same pattern as the product card. */
.k-post-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--k-space-3);
  padding-block: var(--k-space-5);
  border-bottom: 1px solid var(--k-rule);
}

.k-post-card__media {
  display: block;
  overflow: hidden;
  background-color: var(--k-paper-sunk);
}

.k-post-card__media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform var(--k-duration) var(--k-ease);
}

.k-post-card:hover .k-post-card__media img { transform: scale(1.02); }

.k-post-card__title {
  font-family: var(--k-font-display);
  font-size: var(--k-size-h2);
  font-weight: 400;
  line-height: 1.15;
  margin-block: var(--k-space-1) var(--k-space-2);
}

.k-post-card__title a { text-decoration: none; color: var(--k-ink); }

.k-post-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.k-post-card__title a:hover { text-decoration: underline; text-underline-offset: 0.2em; }

.k-post-card__excerpt { color: var(--k-ink-muted); margin: 0; }

@media (min-width: 48rem) {
  .k-post-card:has(.k-post-card__media) {
    grid-template-columns: 14rem 1fr;
    gap: var(--k-space-5);
    align-items: start;
  }
}

/* ---------------------------------------------------------------------------
   Article.
--------------------------------------------------------------------------- */
.k-article__head { padding-block: var(--k-space-6) 0; }

.k-article__title {
  font-size: clamp(2.25rem, 4vw, 3rem);
  line-height: 1.1;
  margin-block: var(--k-space-3) 0;
}

.k-article__rail { margin-block: var(--k-space-5); }

.k-article__figure {
  margin-block: var(--k-space-5);
}

/*
 * Figures keep their own aspect. Forcing a fixed band crops a portrait through
 * the subject — the founder photograph lost the top of her head — so the image
 * is capped by height instead and centred, which suits both a 16:9 header and a
 * 4:5 portrait without cropping either.
 */
.k-article__figure img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 38rem;
  margin-inline: auto;
  background-color: var(--k-paper-sunk);
}

/* Body copy. Every element gets rhythm from one flow rule rather than
   per-element margins that collapse unpredictably. */
/* On the container, not only p/li: pasted copy and legacy shortcode text can
   arrive as bare text nodes, which the narrower selector below never reached —
   a production page rendered 433px of unbreakable string inside a 320px
   viewport. Inheriting from here covers whatever the content turns out to be. */
.k-article__body { overflow-wrap: anywhere; }

.k-article__body > * + * { margin-top: var(--k-space-4); }

.k-article__body p,
.k-article__body li {
  font-size: var(--k-size-lead);
  line-height: 1.8;
  color: var(--k-ink);
  max-width: none;
  /* Pasted copy carries bare URLs, which are unbreakable and overflow narrow
     viewports. Editing them into real links is the fix; this is the safety net
     so an author pasting one can never break the layout. */
  overflow-wrap: anywhere;
}

.k-article__body h2,
.k-article__body h3 {
  margin-top: var(--k-space-6);
  text-wrap: balance;
}

.k-article__body h2 { font-size: var(--k-size-h2); }
.k-article__body h3 { font-size: var(--k-size-h3); }

.k-article__body ul,
.k-article__body ol { padding-left: 1.25em; }

.k-article__body li + li { margin-top: var(--k-space-2); }

.k-article__body img {
  width: 100%;
  height: auto;
  background-color: var(--k-paper-sunk);
}

.k-article__body blockquote {
  margin: var(--k-space-6) 0;
  padding-left: var(--k-space-4);
  border-left: 2px solid var(--k-brass);
  font-family: var(--k-font-display);
  font-size: var(--k-size-h3);
  line-height: 1.4;
  color: var(--k-ink);
}

.k-article__body blockquote p { font-size: inherit; font-family: inherit; }

.k-article__body a { text-underline-offset: 0.2em; }

.k-article__body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background-color: var(--k-paper-sunk);
  padding: 0.1em 0.35em;
}

.k-article__foot {
  margin-top: var(--k-space-6);
  padding-top: var(--k-space-4);
  border-top: 1px solid var(--k-rule);
}

.k-article__foot a { color: var(--k-ink); }

/* Previous / next */
.k-article__nav {
  display: grid;
  gap: var(--k-space-4);
  margin-top: var(--k-space-7);
  padding-top: var(--k-space-5);
  border-top: 1px solid var(--k-rule);
}

.k-article__nav-link {
  display: flex;
  flex-direction: column;
  gap: var(--k-space-1);
  min-height: 48px;
  text-decoration: none;
  color: var(--k-ink);
}

.k-article__nav-link--next { text-align: right; }

.k-article__nav-title {
  font-family: var(--k-font-display);
  font-size: var(--k-size-h3);
  line-height: 1.25;
}

.k-article__nav-link:hover .k-article__nav-title { text-decoration: underline; text-underline-offset: 0.2em; }

@media (min-width: 48rem) {
  .k-article__nav { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------------------------
   Pagination, shared by the journal, archives and search.
--------------------------------------------------------------------------- */
.pagination .nav-links,
.comments-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--k-space-1);
  margin-top: var(--k-space-6);
}

.pagination .page-numbers,
.comments-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  padding: 0 var(--k-space-2);
  border: 1px solid var(--k-rule);
  color: var(--k-ink);
  text-decoration: none;
  font-size: var(--k-size-small);
  font-variant-numeric: tabular-nums;
}

.pagination .page-numbers.current,
.comments-pagination .page-numbers.current {
  border-color: var(--k-ink);
  background-color: var(--k-surface);
}

/* ---------------------------------------------------------------------------
   Comments.
--------------------------------------------------------------------------- */
.k-comments {
  margin-top: var(--k-space-7);
  padding-top: var(--k-space-5);
  border-top: 1px solid var(--k-rule);
}

.k-comments__title {
  font-family: var(--k-font-display);
  font-size: var(--k-size-h3);
  font-weight: 400;
  margin-bottom: var(--k-space-4);
}

.k-comments__list,
.k-comments__list .children {
  list-style: none;
  margin: 0;
  padding: 0;
}

.k-comments__list .children { margin-left: var(--k-space-5); }

.k-comments__list .comment-body {
  padding-block: var(--k-space-4);
  border-bottom: 1px solid var(--k-rule);
}

.k-comments__list .comment-author {
  display: flex;
  align-items: center;
  gap: var(--k-space-2);
  font-size: var(--k-size-small);
  font-weight: 600;
}

.k-comments__list .comment-author img { border-radius: 50%; }

.k-comments__list .comment-metadata,
.k-comments__list .comment-metadata a {
  font-size: var(--k-size-meta);
  text-transform: uppercase;
  letter-spacing: var(--k-tracking-wide);
  color: var(--k-ink-muted);
  text-decoration: none;
}

.k-comments__list .reply a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-size: var(--k-size-meta);
  text-transform: uppercase;
  letter-spacing: var(--k-tracking-wide);
  color: var(--k-ink);
}

.comment-form {
  display: flex;
  flex-direction: column;
  gap: var(--k-space-3);
  margin-top: var(--k-space-5);
}

.comment-form label {
  display: block;
  font-size: var(--k-size-meta);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--k-tracking-wide);
  color: var(--k-ink-muted);
  margin-bottom: var(--k-space-1);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  min-height: 52px;
  padding: var(--k-space-2) var(--k-space-3);
  border: 1px solid var(--k-rule-strong);
  border-radius: 0;
  background-color: var(--k-surface);
  color: var(--k-ink);
  font-family: var(--k-font-body);
  font-size: var(--k-size-body);
}

.comment-form textarea { min-height: 9rem; line-height: 1.6; }

.comment-form .comment-form-cookies-consent {
  display: flex;
  align-items: center;
  gap: var(--k-space-2);
}

.comment-form .comment-form-cookies-consent label {
  margin: 0;
  text-transform: none;
  letter-spacing: normal;
  font-size: var(--k-size-small);
  color: var(--k-ink);
  min-height: 48px;
  display: inline-flex;
  align-items: center;
}

/* ---------------------------------------------------------------------------
   Banner alignment on reading templates.

   The banner uses the wide container while journal, archive, search and article
   content use the narrow measure, so the title sat further left than the text
   beneath it. On these templates the banner takes the same measure as its
   content so the left edge is continuous down the page.
--------------------------------------------------------------------------- */
.blog .k-banner > .k-container,
.archive .k-banner > .k-container,
.search .k-banner > .k-container,
.error404 .k-banner > .k-container,
.page .k-banner > .k-container {
  max-width: var(--k-container-narrow);
}

/* Static pages get the article's reading rhythm, so a long About page is as
   legible as a journal entry. */
.k-page__content ul,
.k-page__content ol { padding-left: 1.25em; }

.k-page__content li + li { margin-top: var(--k-space-2); }

.k-page__content .k-rail { margin-block: var(--k-space-5) var(--k-space-6); }

/* Attribution under a pull quote, and the brand line. */
.k-attrib {
  font-size: var(--k-size-meta);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--k-tracking-wide);
  color: var(--k-ink-muted);
  margin-top: calc(var(--k-space-3) * -1) !important;
}

.k-tagline {
  font-family: var(--k-font-display);
  font-size: var(--k-size-h2);
  line-height: 1.2;
  color: var(--k-forest);
  margin-top: var(--k-space-5);
}

/* ---------------------------------------------------------------------------
   Testimonials.

   Set in the display face because these are voices, not site copy — the same
   distinction the founder quote makes. Ruled rather than boxed, so they belong
   to the same restrained system as everything else.
--------------------------------------------------------------------------- */
.k-quotes {
  display: grid;
  gap: var(--k-space-5);
  margin-block: var(--k-space-5);
  border-top: 1px solid var(--k-rule);
}

.k-quote {
  padding-top: var(--k-space-5);
  border-bottom: 1px solid var(--k-rule);
  padding-bottom: var(--k-space-5);
  margin: 0;
}

.k-quote:last-child { border-bottom: 0; }

.k-quote p {
  font-family: var(--k-font-display);
  font-size: var(--k-size-h3);
  line-height: 1.45;
  color: var(--k-ink);
  margin: 0 0 var(--k-space-3);
  max-width: none;
}

.k-quote footer {
  font-size: var(--k-size-meta);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--k-tracking-wide);
  color: var(--k-ink-muted);
}

.k-quote cite { font-style: normal; }

.k-quote__role {
  display: block;
  margin-top: 0.2em;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--k-ink-muted);
}

@media (min-width: 60rem) {
  .k-quotes--pair { grid-template-columns: 1fr 1fr; gap: var(--k-space-5) var(--k-space-6); }
  .k-quotes--pair .k-quote { border-bottom: 0; }
}

/* -------------------------------------------------------------------------
 * Forms in page content (Contact Form 7).
 *
 * The theme styles the markup rather than depending on the plugin: these rules
 * target real elements inside a form, so a form built with anything else picks
 * up the same treatment. CF7's own classes are only used where its behaviour
 * needs expressing — the response messages and the invalid state.
 *
 * The controls take the same hairline frame and square corners as every other
 * input in the design. The submit button is the secondary tier, not rose: rose
 * belongs to the buy action, and a contact form competing with Add to Cart is
 * the rationing failure the palette exists to prevent.
 * ---------------------------------------------------------------------- */
.k-article__body form {
  margin-top: var(--k-space-5);
}

.k-form__row + .k-form__row {
  margin-top: var(--k-space-4);
}

/* CF7 wraps every control in an inline span, whose line box added a stray gap
   between each label and its field. Making it a block removes the gap without
   touching the plugin's markup. */
.wpcf7-form-control-wrap {
  display: block;
}

.k-form__row label {
  display: block;
  margin-bottom: var(--k-space-1);
  font-size: var(--k-size-meta);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--k-ink-muted);
}

.k-article__body input[type="text"],
.k-article__body input[type="email"],
.k-article__body input[type="tel"],
.k-article__body input[type="url"],
.k-article__body select,
.k-article__body textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  font-family: inherit;
  font-size: var(--k-size-body);
  line-height: 1.6;
  color: var(--k-ink);
  background-color: var(--k-surface);
  border: 1px solid var(--k-rule-strong);
  border-radius: 0;
}

.k-article__body textarea {
  resize: vertical;
}

.k-article__body input:focus-visible,
.k-article__body textarea:focus-visible {
  outline: 2px solid var(--k-forest);
  outline-offset: 2px;
  border-color: var(--k-forest);
}

.k-article__body input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: var(--k-space-4);
  padding: 0.6rem 2rem;
  font-family: inherit;
  font-size: var(--k-size-meta);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--k-ink);
  background-color: transparent;
  border: 1px solid var(--k-rule-strong);
  border-radius: 0;
  cursor: pointer;
  transition: color var(--k-duration) var(--k-ease), border-color var(--k-duration) var(--k-ease);
}

.k-article__body input[type="submit"]:hover,
.k-article__body input[type="submit"]:focus-visible {
  color: var(--k-forest);
  border-color: var(--k-forest);
}

/* CF7's own states. Errors must not be carried by colour alone, so the invalid
   field is marked by a doubled border as well as a tone change. */
.wpcf7-not-valid {
  border-width: 2px;
  border-color: var(--k-rose-deep);
}

.wpcf7-not-valid-tip {
  display: block;
  margin-top: var(--k-space-1);
  font-size: var(--k-size-meta);
  color: var(--k-rose-deep);
}

.wpcf7-response-output {
  margin: var(--k-space-4) 0 0;
  padding: var(--k-space-3);
  font-size: var(--k-size-small);
  border: 1px solid var(--k-rule-strong);
  border-radius: 0;
}

.wpcf7-spinner {
  margin-left: var(--k-space-2);
}

/* The contact rail is the product formulation rail reused: the same specimen
   treatment, because these are metadata about the business exactly as volume
   and actives are metadata about a product. Three cells fit the narrow measure
   only above the fold width, so it stacks earlier than the product one. */
.k-rail--contact {
  margin-block: var(--k-space-5);
}

/* Tapping a phone number or an email address is the whole point of this rail on
   a phone, so these are real targets and get the full 48px rather than an
   exemption. They are controls, not prose links. */
.k-rail--contact .k-rail__value a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
}

@media (max-width: 40rem) {
  .k-rail--contact { grid-template-columns: 1fr; }
  .k-rail--contact .k-rail__item + .k-rail__item {
    border-left: 0;
    border-top: 1px solid var(--k-rule);
  }
}