/*
Theme Name: A Man Bearing Fruit
Theme URI: https://amanbearingfruit.com/
Author: A Man Bearing Fruit
Description: A quiet, typographic theme for scriptural writing. Cormorant Garamond over Inter, on paper. Everything the site needs is in this stylesheet — no Additional CSS required.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ambf
Tags: blog, one-column, custom-logo, custom-menu, editor-style, translation-ready
*/

/* ===========================================================
   CONTENTS
     1.  Tokens
     2.  Reset and base
     3.  Typography
     4.  Layout shell
     5.  Header
     6.  Navigation
     7.  Article
     8.  Content (post/page body + editor blocks)
     9.  Alignments and media
    10.  Post navigation
    11.  Index and archives
    12.  Pagination
    13.  Buttons and forms
    14.  Subscribe
    15.  Comments
    16.  Footer
    17.  Utilities
    18.  Responsive
    19.  Motion and print

   TO RESTYLE THE SITE, EDIT SECTION 1.
   The tokens there drive every colour, font and measurement
   below. Change --ambf-vine and every link, button, border and
   hover state follows. There should be no need for Additional
   CSS; if you find yourself reaching for it, the rule probably
   belongs in this file instead.
   =========================================================== */

/* -----------------------------------------------------------
   1. TOKENS
   ----------------------------------------------------------- */
:root {
  /* palette --------------------------------------------- */
  --ambf-paper:     #f5f1e6;   /* page ground              */
  --ambf-paper-2:   #fbf8f0;   /* raised paper: footer     */
  --ambf-ink:       #1d1f27;   /* headings, strong text    */
  --ambf-ink-2:     #3a3d48;   /* body copy                */
  --ambf-ink-3:     #5f626d;   /* secondary copy           */
  --ambf-ink-4:     #8b8d97;   /* meta, dates, captions    */
  --ambf-rule:      #e0dac9;   /* borders                  */
  --ambf-rule-2:    #ece6d8;   /* lighter hairlines        */
  --ambf-vine:      #2b4a3e;   /* links, buttons           */
  --ambf-gold:      #9c6f24;   /* kickers, verse reference */
  --ambf-gold-lt:   #c8a04a;   /* hover accents            */
  --ambf-berry:     #9c3a68;   /* reserved                 */

  /* type ------------------------------------------------- */
  --ambf-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --ambf-sans:  "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* measurements ----------------------------------------- */
  --ambf-band:    1100px;      /* outer content band       */
  --ambf-gutter:  40px;        /* inner page padding       */
  --ambf-measure: 64ch;        /* reading column           */
  --ambf-wide:    980px;       /* .alignwide inside prose  */
  --ambf-header-h: 100px;      /* used for anchor offsets  */
  --ambf-radius:  8px;

  /* motion ----------------------------------------------- */
  --ambf-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* -----------------------------------------------------------
   2. RESET AND BASE
   ----------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;                  /* lets .alignfull break out
                                        without a sideways scrollbar,
                                        and unlike hidden it does not
                                        break the sticky header */
  scroll-padding-top: var(--ambf-header-h);
}

body {
  margin: 0;
  background: var(--ambf-paper);
  color: var(--ambf-ink);
  font-family: var(--ambf-sans);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.78;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg,
video,
iframe,
embed,
object { max-width: 100%; }

img,
svg,
video { height: auto; }

a {
  color: var(--ambf-vine);
  text-decoration: none;
}

a:hover { color: var(--ambf-gold); }

::selection { background: rgba(156, 111, 36, 0.22); }

:focus-visible {
  outline: 2px solid var(--ambf-vine);
  outline-offset: 3px;
  border-radius: 2px;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.ambf-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ambf-paper-2);
  color: var(--ambf-ink);
  padding: 12px 18px;
  font-size: 13px;
}

.ambf-skip:focus { left: 12px; top: 12px; }

/* -----------------------------------------------------------
   3. TYPOGRAPHY
   ----------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--ambf-serif);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--ambf-ink);
  text-wrap: pretty;
}

p { margin: 0 0 30px; }

strong, b { font-weight: 500; color: var(--ambf-ink); }

em, i { font-style: italic; }

small { font-size: 0.82em; color: var(--ambf-ink-4); }

blockquote {
  margin: 40px 0;
  padding-left: 26px;
  border-left: 1px solid var(--ambf-rule);
  font-family: var(--ambf-serif);
  font-size: 25px;
  line-height: 1.5;
  color: var(--ambf-ink-2);
}

blockquote p:last-child { margin-bottom: 0; }

blockquote cite {
  display: block;
  margin-top: 14px;
  font-family: var(--ambf-sans);
  font-size: 11px;
  font-style: normal;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ambf-gold);
}

code, kbd, pre, samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86em;
}

code {
  background: var(--ambf-rule-2);
  border-radius: 4px;
  padding: 0.15em 0.4em;
}

pre {
  background: var(--ambf-paper-2);
  border: 1px solid var(--ambf-rule);
  border-radius: var(--ambf-radius);
  padding: 20px 22px;
  overflow-x: auto;
  line-height: 1.6;
}

pre code { background: none; padding: 0; }

/* the recurring small-caps label ---------------------------- */
.ambf-kicker {
  margin: 0 0 34px;
  font-family: var(--ambf-sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ambf-gold);
}

.ambf-lede {
  margin: 0;
  font-size: 19px;
  line-height: 1.7;
  color: var(--ambf-ink-3);
  max-width: 54ch;
}

.ambf-date {
  margin: 0;
  font-family: var(--ambf-sans);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ambf-ink-4);
}

/* -----------------------------------------------------------
   4. LAYOUT SHELL
   The bars run edge to edge; their inner wrappers hold the
   band, so header, article and footer all align on one column.
   ----------------------------------------------------------- */
.ambf-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.ambf-main {
  flex: 1;
  width: 100%;
  max-width: var(--ambf-band);
  margin: 0 auto;
  padding: 0 var(--ambf-gutter);
}

/* -----------------------------------------------------------
   5. HEADER
   ----------------------------------------------------------- */
.ambf-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(245, 241, 230, 0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ambf-rule);
}

@supports not (backdrop-filter: blur(14px)) {
  .ambf-header { background: var(--ambf-paper); }
}

.ambf-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  max-width: var(--ambf-band);
  margin: 0 auto;
  padding: 18px var(--ambf-gutter);
}

.ambf-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ambf-ink);
}

.ambf-brand:hover { color: var(--ambf-ink); }

.ambf-mark {
  flex: 0 0 auto;
  display: block;
  width: 36px;
  height: auto;
}

.ambf-brand-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ambf-wordmark {
  font-family: var(--ambf-serif);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: 0.005em;
}

.ambf-brand-ref {
  font-family: var(--ambf-sans);
  font-size: 9.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ambf-gold);
}

/* -----------------------------------------------------------
   6. NAVIGATION
   ----------------------------------------------------------- */
.ambf-nav-list {
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ambf-nav-list a {
  display: inline-block;
  font-family: var(--ambf-sans);
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ambf-ink-4);
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.ambf-nav-list a:hover { color: var(--ambf-ink); }

.ambf-nav-list .current-menu-item > a,
.ambf-nav-list .current_page_item > a,
.ambf-nav-list .current-menu-ancestor > a,
.ambf-nav-list .current_page_parent > a,
.ambf-nav-list .current_page_ancestor > a {
  color: var(--ambf-ink);
  border-bottom-color: var(--ambf-gold-lt);
}

/* -----------------------------------------------------------
   7. ARTICLE
   ----------------------------------------------------------- */
.ambf-article { padding: 104px 0 40px; }

.ambf-article-head {
  max-width: 760px;
  margin-bottom: 68px;
}

.ambf-title {
  font-size: clamp(38px, 5.5vw, 58px);
  margin: 0 0 24px;
  max-width: 24ch;
}

.ambf-article-head .ambf-date { margin-bottom: 24px; }

.ambf-featured { margin: 0 0 56px; }

.ambf-featured img {
  display: block;
  width: 100%;
  border-radius: var(--ambf-radius);
}

.ambf-article-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: var(--ambf-measure);
  margin-top: 68px;
  padding-top: 36px;
  border-top: 1px solid var(--ambf-rule);
}

.ambf-byline {
  margin: 0;
  font-size: 13.5px;
  color: var(--ambf-ink-4);
}

.ambf-foot-link {
  font-size: 13px;
  letter-spacing: 0.06em;
}

.ambf-terms {
  margin: 24px 0 0;
  font-family: var(--ambf-sans);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ambf-ink-4);
}

.ambf-terms a { color: var(--ambf-ink-4); }
.ambf-terms a:hover { color: var(--ambf-vine); }

/* -----------------------------------------------------------
   8. CONTENT
   Everything the block editor can produce, styled once.
   ----------------------------------------------------------- */
.ambf-content { max-width: var(--ambf-measure); }

.ambf-content > *:last-child { margin-bottom: 0; }

.ambf-content p {
  margin: 0 0 30px;
  font-size: 19px;
  line-height: 1.82;
  color: var(--ambf-ink-2);
  text-wrap: pretty;
}

.ambf-content h2 { font-size: 34px; margin: 56px 0 20px; }
.ambf-content h3 { font-size: 27px; margin: 44px 0 16px; }
.ambf-content h4 { font-size: 22px; margin: 36px 0 14px; }

.ambf-content ul,
.ambf-content ol {
  margin: 0 0 30px;
  padding-left: 24px;
  color: var(--ambf-ink-2);
}

.ambf-content li { margin-bottom: 10px; }
.ambf-content li:last-child { margin-bottom: 0; }
.ambf-content ul ul,
.ambf-content ol ol { margin: 10px 0 0; }

.ambf-content a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.ambf-content hr,
.ambf-content .wp-block-separator {
  border: 0;
  border-top: 1px solid var(--ambf-rule);
  margin: 56px 0;
}

.ambf-content .wp-block-separator.is-style-dots {
  border-top: 0;
  text-align: center;
}

.ambf-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 30px;
  font-size: 16px;
}

.ambf-content th,
.ambf-content td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--ambf-rule-2);
  text-align: left;
}

.ambf-content th {
  font-family: var(--ambf-sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ambf-ink-4);
}

.ambf-content .wp-block-table { overflow-x: auto; }

/* verse pulled out of the flow ------------------------------ */
.ambf-content .ambf-verse {
  font-family: var(--ambf-serif);
  font-size: 25px;
  line-height: 1.5;
  color: var(--ambf-ink-2);
  border-left: 1px solid var(--ambf-gold-lt);
  padding-left: 26px;
  margin: 44px 0;
}

/* -----------------------------------------------------------
   9. ALIGNMENTS AND MEDIA
   ----------------------------------------------------------- */
.ambf-content img,
.ambf-content .wp-block-image { margin: 44px 0; }

.ambf-content figure { margin-inline: 0; }

.ambf-content figcaption,
.wp-caption-text {
  margin-top: 12px;
  font-family: var(--ambf-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ambf-ink-4);
  text-align: left;
}

.alignleft {
  float: left;
  margin: 8px 32px 24px 0;
  max-width: 45%;
}

.alignright {
  float: right;
  margin: 8px 0 24px 32px;
  max-width: 45%;
}

.aligncenter {
  margin-inline: auto;
  text-align: center;
}

/* break out of the reading column --------------------------- */
.ambf-content .alignwide {
  width: min(var(--ambf-wide), calc(100vw - (var(--ambf-gutter) * 2)));
  max-width: none;
  margin-left: 50%;
  transform: translateX(-50%);
}

.ambf-content .alignfull {
  width: auto;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.ambf-content .alignfull img { border-radius: 0; }

.ambf-content .wp-block-embed__wrapper { position: relative; }

.wp-block-image.is-style-rounded img,
.ambf-content .wp-block-image img { border-radius: var(--ambf-radius); }

.wp-block-gallery { margin: 44px 0; }

.sticky .ambf-index-title::after {
  content: "\00a0\2022";
  color: var(--ambf-gold-lt);
}

/* -----------------------------------------------------------
   10. POST NAVIGATION
   ----------------------------------------------------------- */
.ambf-post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  max-width: var(--ambf-measure);
  margin-top: 72px;
  padding-top: 36px;
  border-top: 1px solid var(--ambf-rule);
}

.ambf-post-nav-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--ambf-ink);
}

.ambf-post-nav-older { text-align: right; }

.ambf-post-nav-label {
  font-family: var(--ambf-sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ambf-ink-4);
}

.ambf-post-nav-title {
  font-family: var(--ambf-serif);
  font-weight: 500;
  font-size: 21px;
  line-height: 1.3;
}

.ambf-post-nav-item:hover .ambf-post-nav-title { color: var(--ambf-vine); }

/* -----------------------------------------------------------
   11. INDEX AND ARCHIVES
   ----------------------------------------------------------- */
.ambf-index { padding: 104px 0 40px; }

.ambf-index-head {
  max-width: 760px;
  margin-bottom: 72px;
}

.ambf-index-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--ambf-rule-2);
}

.ambf-index-row {
  display: grid;
  grid-template-columns: 148px 1fr auto;
  gap: 32px;
  align-items: baseline;
  padding: 26px 8px 26px 0;
  border-top: 1px solid var(--ambf-rule-2);
  color: var(--ambf-ink);
  transition: padding-left 0.3s var(--ambf-ease), border-color 0.3s ease;
}

.ambf-index-row:hover {
  padding-left: 12px;
  border-color: var(--ambf-gold-lt);
  color: var(--ambf-ink);
}

.ambf-index-date {
  font-family: var(--ambf-sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ambf-ink-4);
}

.ambf-index-title {
  font-family: var(--ambf-serif);
  font-weight: 500;
  font-size: 27px;
  line-height: 1.3;
  text-wrap: pretty;
}

.ambf-index-row:hover .ambf-index-title { color: var(--ambf-vine); }

.ambf-index-ref {
  font-family: var(--ambf-sans);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ambf-gold);
}

.ambf-empty { color: var(--ambf-ink-3); }

/* -----------------------------------------------------------
   12. PAGINATION
   ----------------------------------------------------------- */
.ambf-pagination {
  margin-top: 48px;
  font-family: var(--ambf-sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ambf-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

.ambf-pagination .page-numbers.current { color: var(--ambf-ink); }
.ambf-pagination .page-numbers.dots { color: var(--ambf-ink-4); }

/* -----------------------------------------------------------
   13. BUTTONS AND FORMS
   ----------------------------------------------------------- */
.wp-block-button__link,
.ambf-content .wp-element-button,
.ambf-button,
button,
input[type="submit"],
input[type="button"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--ambf-vine);
  border-radius: var(--ambf-radius);
  color: var(--ambf-vine);
  font-family: var(--ambf-sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1.2;
  padding: 14px 24px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease;
}

.wp-block-button__link:hover,
.ambf-button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  background: var(--ambf-vine);
  color: var(--ambf-paper-2);
}

.wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 48px;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="password"],
textarea,
select {
  width: 100%;
  background: var(--ambf-paper-2);
  border: 1px solid var(--ambf-rule);
  border-radius: var(--ambf-radius);
  color: var(--ambf-ink);
  font-family: var(--ambf-sans);
  font-size: 15px;
  padding: 12px 14px;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--ambf-vine);
  outline: none;
}

::placeholder { color: var(--ambf-ink-4); opacity: 1; }

.ambf-search-form {
  display: flex;
  gap: 10px;
  max-width: 420px;
  margin-top: 32px;
}

/* -----------------------------------------------------------
   14. SUBSCRIBE
   ----------------------------------------------------------- */
.ambf-sub-note {
  margin: 0 0 20px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ambf-ink-4);
  max-width: 34ch;
}

.ambf-subscribe-form,
.ambf-footer-subscribe form,
.wp-block-jetpack-subscriptions__form-elements {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 320px;
}

.ambf-footer-subscribe input[type="email"],
.wp-block-jetpack-subscriptions input[type="email"] {
  background: var(--ambf-paper);
  border: 1px solid var(--ambf-rule);
  border-radius: var(--ambf-radius);
  box-shadow: none;
  font-size: 14.5px;
}

.ambf-footer-subscribe button,
.wp-block-jetpack-subscriptions button {
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 13px 18px;
}

.ambf-footer-subscribe p { margin: 0; }
.ambf-footer-subscribe form p { margin: 0; }

/* -----------------------------------------------------------
   15. COMMENTS
   ----------------------------------------------------------- */
.comments-area {
  max-width: var(--ambf-measure);
  margin-top: 76px;
  padding-top: 40px;
  border-top: 1px solid var(--ambf-rule);
}

.comments-title,
.comment-reply-title {
  font-size: 27px;
  margin-bottom: 24px;
}

.comment-list {
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
}

.comment-list li { padding: 24px 0; border-top: 1px solid var(--ambf-rule-2); }

.comment-list .children {
  list-style: none;
  margin: 0;
  padding-left: 28px;
}

.comment-meta {
  font-size: 13px;
  color: var(--ambf-ink-4);
  margin-bottom: 8px;
}

.comment-author .fn { font-style: normal; font-weight: 500; color: var(--ambf-ink); }

.comment-form label {
  display: block;
  font-size: 13px;
  color: var(--ambf-ink-3);
  margin-bottom: 6px;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea { margin-bottom: 18px; }

.comment-form .form-submit { margin: 0; }

/* -----------------------------------------------------------
   16. FOOTER
   ----------------------------------------------------------- */
.ambf-footer {
  background: var(--ambf-paper-2);
  border-top: 1px solid var(--ambf-rule);
  margin-top: 72px;                    /* was 112px — gap above the footer */
}

.ambf-footer-inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 72px;
  align-items: start;
  max-width: var(--ambf-band);
  margin: 0 auto;
  padding: 44px var(--ambf-gutter) 28px;   /* was 76px … 44px */
}

.ambf-verse-line {
  margin: 0 0 14px;                    /* was 16px */
  font-family: var(--ambf-serif);
  font-weight: 400;
  font-size: 22px;                     /* was 25px — optional, this is a
                                          look change, not just spacing */
  line-height: 1.5;
  color: var(--ambf-ink-2);
  max-width: 42ch;
  text-wrap: pretty;
}

.ambf-verse-ref {
  margin: 0;
  font-family: var(--ambf-sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ambf-gold);
}

.ambf-social {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  list-style: none;
  margin: 20px 0 0;                    /* was 34px */
  padding: 0;
}

.ambf-social a {
  font-family: var(--ambf-sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ambf-ink-3);
}

.ambf-social a:hover { color: var(--ambf-vine); }

.ambf-footer-subscribe .ambf-kicker { margin-bottom: 10px; }

.ambf-footer-base {
  max-width: var(--ambf-band);
  margin: 0 auto;
  padding: 0 var(--ambf-gutter) 28px;  /* was 44px */
}

.ambf-footer-base p {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ambf-ink-4);
}

/* -----------------------------------------------------------
   17. UTILITIES
   Add these as an "Additional CSS class" on a block.
   ----------------------------------------------------------- */
.has-dropcap:first-letter {
  float: left;
  font-family: var(--ambf-serif);
  font-size: 3.05rem;
  line-height: 0.65;
  color: var(--ambf-ink);
  margin: 0.05rem 0.5rem 0.2rem 0;
  padding: 0.5rem;
}

.no-underline a { text-decoration: none; }

.ambf-center { text-align: center; }

.ambf-quiet { color: var(--ambf-ink-4); }

/* -----------------------------------------------------------
   18. RESPONSIVE
   ----------------------------------------------------------- */
@media (max-width: 900px) {
  .ambf-footer-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

@media (max-width: 782px) {
  :root {
    --ambf-gutter: 24px;
    --ambf-header-h: 130px;
  }

  body { font-size: 18px; }

  .ambf-header-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .ambf-nav-list { gap: 20px; flex-wrap: wrap; }

  .ambf-article,
  .ambf-index { padding-top: 64px; }

  .ambf-title { font-size: 34px; }

  .ambf-index-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .ambf-index-title { font-size: 23px; }
  .ambf-index-ref { display: none; }

  .ambf-post-nav { grid-template-columns: 1fr; gap: 28px; }
  .ambf-post-nav-older { text-align: left; }

  .ambf-footer { margin-top: 72px; }

  .alignleft,
  .alignright {
    float: none;
    max-width: 100%;
    margin: 32px 0;
  }
}

/* -----------------------------------------------------------
   19. MOTION AND PRINT
   ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .ambf-header,
  .ambf-footer,
  .ambf-post-nav,
  .ambf-article-foot,
  .comments-area,
  .ambf-skip { display: none; }

  body {
    background: #fff;
    color: #000;
    font-size: 12pt;
  }

  .ambf-content,
  .ambf-main { max-width: none; }

  .ambf-content a::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555;
  }
}