/*
 * CraftBook Custom Theme V1 — Single Post Styles
 *
 * 1.  Single Post Hero (image + text variants)
 * 2.  Single Post Body wrapper
 * 3.  Single Header (standfirst, updated notice)
 * 4.  Entry Content — full article typography
 * 5.  Drop Cap (first paragraph)
 * 6.  Pull Quotes
 * 7.  Article images (wide, full, captions)
 * 8.  Tables in articles
 * 9.  Single Footer (tags, share)
 * 10. Comments Area
 * 11. Comment Form
 * 12. Page Links (paginated posts)
 * 13. 404 Page
 * 14. Search Results Page
 * 15. Responsive
 */


/* =============================================================================
   1. SINGLE POST HERO
   ============================================================================= */

.single-hero {
  position: relative;
  overflow: hidden;
}

/* --- Image variant --- */
.single-hero--image {
  min-height: clamp(400px, 55vh, 640px);
  display: flex;
  align-items: flex-end;
  background-color: var(--color-heading);
}

.single-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  /* Slight blur for text legibility */
  filter: brightness(0.9);
}

.single-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(15, 17, 24, 0.92) 0%,
    rgba(15, 17, 24, 0.55) 45%,
    rgba(15, 17, 24, 0.15) 75%,
    transparent 100%
  );
}

.single-hero__inner {
  position: relative;
  z-index: var(--z-raised);
  padding-top: var(--space-10);
  padding-bottom: var(--space-16);
}

/* Image hero content — constrained for readability within the wider layout */
.single-hero--image .single-hero__content {
  max-width: 800px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Category label on dark hero */
.single-hero--image .category-label {
  color: #4ADE80;
  font-size: var(--text-xs);
}

/* Title on image hero */
.single-hero__title {
  font-family: var(--font-heading);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

.single-hero--image .single-hero__title {
  font-size: var(--text-4xl);
  color: #FFFFFF;
}

/* Meta on dark hero */
.single-hero--image .post-meta {
  color: rgba(255, 255, 255, 0.7);
}

.single-hero--image .post-meta a {
  color: rgba(255, 255, 255, 0.8);
}

.single-hero--image .post-meta a:hover {
  color: #FFFFFF;
}

/* --- Text variant (no featured image) --- */
.single-hero--text {
  padding-block: var(--space-16);
  background-color: var(--color-background);
  border-bottom: var(--border-width) solid var(--color-border);
}

.single-hero__content--text {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.single-hero--text .category-label {
  font-size: var(--text-xs);
}

.single-hero--text .single-hero__title {
  font-size: var(--text-4xl);
  color: var(--color-heading);
}

.single-hero__standfirst {
  font-size: var(--text-md);
  color: var(--color-text-light);
  line-height: var(--leading-relaxed);
  margin: 0;
  max-width: 800px;
}


/* =============================================================================
   2. SINGLE POST BODY WRAPPER
   ============================================================================= */

.single-post__body {
  padding-block: var(--space-10);
}

/* Breadcrumb inside body */
.single-post__body .breadcrumb {
  padding-top: 0;
  margin-bottom: var(--space-6);
}


/* =============================================================================
   3. SINGLE HEADER
   ============================================================================= */

.single-header {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-8);
  border-bottom: var(--border-width) solid var(--color-border);
}

/* Standfirst — shown when article has an image hero */
.single-header__standfirst {
  font-size: var(--text-md);
  color: var(--color-text-light);
  line-height: var(--leading-relaxed);
  font-style: italic;
  margin-bottom: var(--space-4);
}

/* Updated notice */
.single-header__updated {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-meta);
  background-color: var(--color-background-subtle);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  border: var(--border-width) solid var(--color-border);
}

.single-header__updated-label {
  font-weight: var(--weight-medium);
}


/* =============================================================================
   4. ENTRY CONTENT — Full Article Typography
   The most important CSS in the theme. This governs the entire
   reading experience. Every element within article body is styled here.

   WIDTH STRATEGY — Full Container Layout:
   The article body uses the full container width (matching the homepage).
   Body text paragraphs are constrained to an optimal reading measure
   (--article-body-width: 740px) via a max-width on the text elements,
   centred within the wider container. This gives the page the same
   visual width as the homepage while keeping body text comfortable to read.

   Wide blocks (images, tables, blockquotes) break out to the full container
   width, making the page feel spacious and editorial.
   ============================================================================= */

:root {
  --article-body-width: 740px;  /* Comfortable reading measure at 18px type */
}

.entry-content {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  max-width: 100%;
}

/* Constrain paragraph text, headings and inline elements to reading width,
   centred within the full container so side space is equal on both sides */
.entry-content > p,
.entry-content > h2,
.entry-content > h3,
.entry-content > h4,
.entry-content > h5,
.entry-content > h6,
.entry-content > ul,
.entry-content > ol,
.entry-content > dl,
.entry-content > address,
.entry-content > .page-links,
.entry-content > .wp-block-paragraph,
.entry-content > .wp-block-heading,
.entry-content > .wp-block-list,
.entry-content > .wp-block-columns {
  max-width: var(--article-body-width);
  margin-inline: auto;
}

/* Blockquotes constrained to reading width */
.entry-content > blockquote,
.entry-content > .wp-block-quote:not(.is-style-large):not(.craftbook-pull-quote) {
  max-width: var(--article-body-width);
  margin-inline: auto;
}

/* Code blocks and pre — break wider for better readability of long lines */
.entry-content > pre,
.entry-content > .wp-block-code {
  max-width: min(100%, calc(var(--article-body-width) + var(--space-32)));
  margin-inline: auto;
}

/* Paragraphs */
.entry-content p {
  margin-bottom: var(--space-6);
  font-size: inherit;
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}

.entry-content p:last-child {
  margin-bottom: 0;
}

/* Headings within article body */
.entry-content h2 {
  font-size: var(--text-2xl);
  margin-top: var(--space-12);
  margin-bottom: var(--space-5);
  padding-top: var(--space-6);
  border-top: var(--border-width) solid var(--color-border);
}

.entry-content h3 {
  font-size: var(--text-xl);
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
}

.entry-content h4 {
  font-size: var(--text-lg);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

.entry-content h5,
.entry-content h6 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-meta);
}

/* Article links */
.entry-content a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-weight: var(--weight-medium);
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

.entry-content a:hover {
  color: var(--color-link-hover);
  text-decoration-thickness: 2px;
}

/* Lists */
.entry-content ul,
.entry-content ol {
  padding-left: var(--space-6);
  margin-bottom: var(--space-6);
}

.entry-content ul {
  list-style: none;
  padding-left: 0;
}

.entry-content ul li {
  padding-left: var(--space-6);
  position: relative;
  margin-bottom: var(--space-3);
  line-height: var(--leading-relaxed);
}

/* Custom bullet using accent colour */
.entry-content ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  background-color: var(--color-accent);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.entry-content ol li {
  margin-bottom: var(--space-3);
  line-height: var(--leading-relaxed);
  padding-left: var(--space-2);
}

.entry-content ol {
  counter-reset: none;
}

/* Nested lists */
.entry-content ul ul,
.entry-content ol ol,
.entry-content ul ol,
.entry-content ol ul {
  margin-top: var(--space-2);
  margin-bottom: 0;
}

/* Blockquote / pull quote */
.entry-content blockquote {
  position: relative;
  margin: var(--space-10) 0;
  padding: var(--space-6) var(--space-8);
  border-left: 4px solid var(--color-accent);
  background-color: var(--color-background-subtle);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.entry-content blockquote p {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-style: italic;
  line-height: var(--leading-snug);
  color: var(--color-heading);
  margin-bottom: var(--space-3);
}

.entry-content blockquote p:last-of-type {
  margin-bottom: 0;
}

.entry-content blockquote cite {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-style: normal;
  font-weight: var(--weight-medium);
  color: var(--color-meta);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  margin-top: var(--space-3);
}

/* Horizontal rule */
.entry-content hr {
  margin-block: var(--space-12);
  border: none;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--color-border) 20%,
    var(--color-border) 80%,
    transparent
  );
}

/* Inline elements */
.entry-content strong,
.entry-content b {
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
}

.entry-content em,
.entry-content i {
  font-style: italic;
}

.entry-content mark {
  background-color: var(--color-accent-light);
  color: var(--color-text);
  padding: 0.1em 0.25em;
  border-radius: var(--radius-sm);
}

.entry-content code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background-color: var(--color-background-subtle);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.15em 0.4em;
  color: var(--color-accent-amber);
}

.entry-content pre {
  background-color: var(--color-heading);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  overflow-x: auto;
  margin-bottom: var(--space-6);
  margin-inline: calc(var(--space-8) * -1);  /* Slightly wider than text */
}

.entry-content pre code {
  background: none;
  border: none;
  padding: 0;
  color: #4ADE80;
  font-size: var(--text-sm);
}

/* Abbreviation */
.entry-content abbr[title] {
  text-decoration: underline dotted;
  text-decoration-color: var(--color-meta);
  cursor: help;
}

/* Superscript / footnote links */
.entry-content sup a {
  font-size: 0.75em;
  font-weight: var(--weight-semibold);
  text-decoration: none;
  color: var(--color-accent);
  padding: 0 2px;
}

/* Definition lists */
.entry-content dt {
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
  margin-top: var(--space-4);
}

.entry-content dd {
  padding-left: var(--space-6);
  color: var(--color-text-light);
  margin-bottom: var(--space-2);
}


/* =============================================================================
   5. DROP CAP — First paragraph of article
   ============================================================================= */

.entry-content > p:first-of-type::first-letter {
  font-family: var(--font-heading);
  font-size: 4.5em;
  font-weight: var(--weight-black);
  line-height: 0.75;
  color: var(--color-accent);
  float: left;
  margin-right: var(--space-2);
  margin-top: var(--space-1);
  /* Ensure clean baseline alignment */
  padding-bottom: var(--space-1);
}

/* Remove drop cap if first paragraph is very short (< ~60 chars).
   Handled in JS optionally; the CSS fallback keeps it always on. */
@media (prefers-reduced-motion: reduce) {
  /* No animation concerns but keep the drop cap */
}


/* =============================================================================
   6. PULL QUOTES — Wide blockquote variant
   Applied with CSS class: .wp-block-quote.is-style-large or .craftbook-pull-quote
   ============================================================================= */

.entry-content .wp-block-quote.is-style-large,
.entry-content .craftbook-pull-quote {
  text-align: center;
  border-left: none;
  border-top: 3px solid var(--color-accent);
  border-bottom: 3px solid var(--color-accent);
  background: none;
  border-radius: 0;
  padding: var(--space-8) var(--space-6);
  margin-inline: calc(var(--space-10) * -1);
}

.entry-content .wp-block-quote.is-style-large p,
.entry-content .craftbook-pull-quote p {
  font-size: var(--text-2xl);
  color: var(--color-heading);
}


/* =============================================================================
   7. ARTICLE IMAGES
   ============================================================================= */

.entry-content img {
  border-radius: var(--radius-lg);
  display: block;
  max-width: 100%;
  height: auto;
}

.entry-content figure {
  margin-block: var(--space-8);
}

.entry-content figcaption {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-meta);
  text-align: center;
  margin-top: var(--space-3);
  font-style: italic;
  line-height: var(--leading-normal);
}

/* Wide image — fills the full container width (already the page width) */
.entry-content .alignwide,
.entry-content .wp-block-image.alignwide {
  margin-inline: auto;
  width: 100%;
  max-width: 100%;
}

/* Full width image — breaks out of container */
.entry-content .alignfull,
.entry-content .wp-block-image.alignfull {
  margin-inline: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
  border-radius: 0;
}

.entry-content .alignfull img {
  border-radius: 0;
  width: 100%;
}

/* Float alignment */
.entry-content .alignleft {
  float: left;
  margin-right: var(--space-6);
  margin-bottom: var(--space-4);
  max-width: 45%;
}

.entry-content .alignright {
  float: right;
  margin-left: var(--space-6);
  margin-bottom: var(--space-4);
  max-width: 45%;
}

.entry-content .aligncenter {
  margin-inline: auto;
}

/* Clear floats after content */
.entry-content::after {
  content: '';
  display: table;
  clear: both;
}


/* =============================================================================
   8. TABLES IN ARTICLES
   ============================================================================= */

.entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-8);
  font-size: var(--text-sm);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.entry-content th {
  background-color: var(--color-heading);
  color: #FFFFFF;
  font-family: var(--font-ui);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  padding: var(--space-3) var(--space-4);
  text-align: left;
}

.entry-content td {
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width) solid var(--color-border);
  vertical-align: top;
  line-height: var(--leading-relaxed);
}

.entry-content tr:last-child td {
  border-bottom: none;
}

.entry-content tr:nth-child(even) td {
  background-color: var(--color-background-subtle);
}

.entry-content tr:hover td {
  background-color: var(--color-accent-light);
}

/* Responsive table scroll */
.entry-content .wp-block-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}


/* =============================================================================
   9. SINGLE FOOTER
   ============================================================================= */

.single-footer {
  margin-top: var(--space-10);
  padding-top: var(--space-6);
}

/* Page links (paginated posts via <!--nextpage-->) */
.page-links {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding-block: var(--space-6);
  border-top: var(--border-width) solid var(--color-border);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-meta);
}

.page-links .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding-inline: var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-text);
  transition: all var(--transition-fast);
}

.page-links .page-link:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: #FFFFFF;
}

.page-links > span:not(.page-link) {
  padding-inline: var(--space-2);
}


/* =============================================================================
   10. COMMENTS AREA
   ============================================================================= */

.comments-section {
  border-top: var(--border-width) solid var(--color-border);
  background-color: var(--color-background-subtle);
}

.comments-area {
  max-width: 100%;
}

.comments-heading,
.comment-form-heading {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-heading);
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: var(--border-width) solid var(--color-border);
}

.comments-heading::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background-color: var(--color-accent);
  border-radius: var(--radius-full);
  margin-top: var(--space-3);
}

.comments-count {
  color: var(--color-accent);
}

/* Individual comments */
.comment-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-10);
}

.comment-list .comment {
  display: flex;
  gap: var(--space-4);
  padding-block: var(--space-6);
  border-bottom: var(--border-width) solid var(--color-border);
}

.comment-list .comment:last-child {
  border-bottom: none;
}

/* Nested comment indent */
.comment-list .children {
  list-style: none;
  padding-left: var(--space-8);
  margin: 0;
}

.comment-author-avatar img {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--color-border);
}

.comment-content-wrap {
  flex: 1;
  min-width: 0;
}

.comment-author-info {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.comment-author .fn {
  font-weight: var(--weight-semibold);
  color: var(--color-heading);
  text-decoration: none;
  font-style: normal;
}

.comment-date {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-meta);
}

.comment-text {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}

.comment-text p {
  margin-bottom: var(--space-3);
}

.comment-text p:last-child {
  margin-bottom: 0;
}

.comment-reply {
  margin-top: var(--space-3);
}

.comment-reply-link {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.comment-reply-link:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
}

.comment-awaiting-moderation {
  font-size: var(--text-sm);
  color: var(--color-meta);
  font-style: italic;
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-background-subtle);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-accent-amber);
  margin-bottom: var(--space-3);
}

/* Comment navigation */
.comment-navigation {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-6);
  border-top: var(--border-width) solid var(--color-border);
}

.comment-nav-previous a,
.comment-nav-next a {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.comment-nav-previous a:hover,
.comment-nav-next a:hover {
  color: var(--color-accent-hover);
}

.comment-nav-next {
  text-align: right;
}

.comments-closed-notice,
.comments-password-notice {
  font-size: var(--text-sm);
  color: var(--color-meta);
  font-style: italic;
  text-align: center;
  padding: var(--space-6);
  background-color: var(--color-background-subtle);
  border-radius: var(--radius-lg);
}


/* =============================================================================
   11. COMMENT FORM
   ============================================================================= */

.comment-form-heading {
  margin-top: var(--space-10);
}

.comment-cancel-reply {
  margin-left: var(--space-3);
}

.comment-cancel-reply a {
  font-size: var(--text-sm);
  color: var(--color-meta);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.comment-cancel-reply a:hover {
  color: var(--color-error);
}

.comment-notes {
  font-size: var(--text-sm);
  color: var(--color-meta);
  margin-bottom: var(--space-6);
}

.comment-form-field {
  margin-bottom: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.comment-form-label {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.comment-form-label .required {
  color: var(--color-error);
  margin-left: var(--space-1);
}

.comment-form-input,
.comment-form-textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-base);
  background-color: var(--color-background-alt);
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  -webkit-appearance: none;
  appearance: none;
}

.comment-form-input:focus,
.comment-form-textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.15);
}

.comment-form-input::placeholder,
.comment-form-textarea::placeholder {
  color: var(--color-placeholder);
}

.comment-form-textarea {
  resize: vertical;
  min-height: 160px;
  line-height: var(--leading-relaxed);
}

.comment-form-email-note {
  font-size: var(--text-xs);
  color: var(--color-meta);
  margin: 0;
}

/* Cookies / consent checkbox */
.comment-form-cookies {
  flex-direction: row;
  align-items: flex-start;
}

.comment-form-cookies-label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-light);
  cursor: pointer;
  line-height: var(--leading-normal);
}

.comment-form-cookies input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  accent-color: var(--color-accent);
  margin-top: 2px;
  cursor: pointer;
}

/* Fields layout on wider screens — name and email side by side */
@media (min-width: 640px) {
  .comment-form-fields-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }
  .comment-form-fields-row .comment-form-field {
    margin-bottom: 0;
  }
}

.form-submit {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-2);
}

/* Logged-in-as notice */
.logged-in-as {
  font-size: var(--text-sm);
  color: var(--color-meta);
  margin-bottom: var(--space-6);
}

.logged-in-as a {
  color: var(--color-accent);
  text-decoration: none;
}

.logged-in-as a:hover {
  text-decoration: underline;
}

/* Must-log-in notice */
.must-log-in {
  font-size: var(--text-base);
  color: var(--color-text-light);
}

.must-log-in a {
  color: var(--color-accent);
}


/* =============================================================================
   12. ARCHIVE PAGE
   ============================================================================= */

.archive-header {
  padding-block: var(--space-16);
  background-color: var(--color-background-subtle);
  border-bottom: var(--border-width) solid var(--color-border);
}

.archive-header__inner {
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.archive-header__kicker {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-meta);
}

.archive-header__title {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: var(--weight-black);
  color: var(--color-heading);
  line-height: var(--leading-tight);
  margin: 0;
}

.archive-header__description {
  font-size: var(--text-md);
  color: var(--color-text-light);
  line-height: var(--leading-relaxed);
  max-width: 640px;
}

.archive-header__count {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-meta);
}

.archive-header__author {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.archive-header__author-avatar {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 3px solid var(--color-accent-light);
}

.archive-header__author-name {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-heading);
}

.archive-header__author-link {
  font-size: var(--text-sm);
  color: var(--color-accent);
  text-decoration: none;
}

/* Category colour-coded archive headers */
.archive-header--technology { border-bottom-color: #2563EB; }
.archive-header--business   { border-bottom-color: #7C3AED; }
.archive-header--creativity { border-bottom-color: #D97706; }
.archive-header--society    { border-bottom-color: #DB2777; }

/* Featured first article on category archive */
.archive-featured {
  margin-bottom: var(--space-10);
}

.archive-featured__card {
  flex-direction: column;
}

.archive-featured__body {
  padding: var(--space-8);
}

.archive-featured-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--color-border) 20%, var(--color-border) 80%, transparent);
  margin-bottom: var(--space-10);
}

.archive-grid {
  gap: var(--space-6);
}

/* Archive pagination */
.archive-pagination {
  margin-top: var(--space-12);
  display: flex;
  justify-content: center;
}

/* Search refine form */
.search-results-refine {
  margin-bottom: var(--space-8);
  max-width: 480px;
}


/* =============================================================================
   13. 404 PAGE
   ============================================================================= */

.error-404__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-8);
  max-width: 560px;
  margin-inline: auto;
  padding-block: var(--space-16);
}

.error-404__code {
  font-family: var(--font-heading);
  font-size: clamp(6rem, 20vw, 12rem);
  font-weight: var(--weight-black);
  line-height: 1;
  color: var(--color-border);
  letter-spacing: -0.05em;
}

.error-404__title {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  color: var(--color-heading);
  margin: 0;
}

.error-404__description {
  font-size: var(--text-base);
  color: var(--color-text-light);
  line-height: var(--leading-relaxed);
  margin: 0;
}

.error-404__sections {
  width: 100%;
}

.error-404__sections-label {
  font-size: var(--text-sm);
  color: var(--color-meta);
  margin-bottom: var(--space-3);
}

.error-404__section-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
}


/* =============================================================================
   15. RESPONSIVE
   ============================================================================= */

@media (max-width: 768px) {

  .single-hero--image {
    min-height: clamp(320px, 70vh, 480px);
  }

  .single-hero--image .single-hero__title,
  .single-hero--text .single-hero__title {
    font-size: var(--text-3xl);
  }

  .single-post__body {
    padding-block: var(--space-8);
  }

  .entry-content pre {
    margin-inline: 0;
  }

  .entry-content .alignwide,
  .entry-content .wp-block-image.alignwide {
    margin-inline: auto;
    width: 100%;
    max-width: 100%;
  }

  /* On mobile, constrained text elements use full mobile width */
  .entry-content > p,
  .entry-content > h2,
  .entry-content > h3,
  .entry-content > h4,
  .entry-content > h5,
  .entry-content > h6,
  .entry-content > ul,
  .entry-content > ol,
  .entry-content > blockquote,
  .entry-content > .wp-block-paragraph,
  .entry-content > .wp-block-heading,
  .entry-content > .wp-block-list {
    max-width: 100%;
    margin-inline: 0;
  }

  .entry-content .alignleft,
  .entry-content .alignright {
    float: none;
    max-width: 100%;
    margin-inline: 0;
  }

  .entry-content .wp-block-quote.is-style-large,
  .entry-content .craftbook-pull-quote {
    margin-inline: 0;
  }

  .comment-list .comment {
    flex-direction: column;
    gap: var(--space-3);
  }

  .comment-list .children {
    padding-left: var(--space-4);
  }

  .archive-header__title {
    font-size: var(--text-3xl);
  }

  .archive-header {
    padding-block: var(--space-10);
  }

}

@media (max-width: 480px) {

  .single-hero--image .single-hero__title,
  .single-hero--text .single-hero__title {
    font-size: var(--text-2xl);
  }

  .entry-content > p:first-of-type::first-letter {
    font-size: 3.5em;
  }

  .error-404__inner {
    padding-block: var(--space-10);
  }

}