/* ============================================================
   THEME TOKENS
   Change --accent / --accent-dark / --ink here to re-brand the
   whole site from one place.
   ============================================================ */
:root{
  --accent:      #D0253E;   /* brand red */
  --accent-dark: #570C97;   /* brand purple (hover/secondary) */
  --ink:         #373737;   /* brand charcoal */
  --ink-soft:    #6b6b6b;
  --paper:       #ffffff;
  --paper-tint:  #f3f0f6;   /* light purple tint used across several sections */
  --rule:        #e6e3dd;
  --max:         1140px;
  --serif: 'DM Serif Display', Georgia, serif;  /* headings */
  --sans:  'Figtree', -apple-system, Helvetica, Arial, sans-serif; /* body & UI */
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  line-height:1.7;
  font-size:17px;
}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;
}
.topbar a:focus-visible,.topbar button:focus-visible{outline-color:#fff}

.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

/* Accessibility utilities: skip link + WordPress's standard screen-reader-text */
.screen-reader-text{
  border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;
  margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;
  word-wrap:normal!important;
}
.skip-link.screen-reader-text:focus{
  background:#fff;color:var(--ink);display:block;height:auto;width:auto;
  padding:14px 20px;position:fixed;top:8px;left:8px;z-index:100000;
  clip:auto;clip-path:none;font-weight:700;text-decoration:underline;
}

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar{
  background:linear-gradient(90deg,#D0253E 0%,#570C97 100%);
  color:#fff;
  font-size:13px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.topbar .wrap{
  display:flex;justify-content:space-between;align-items:center;
  min-height:52px;
}
.topbar a{color:#fff;padding:8px 0}
.topbar .links{display:flex;align-items:center;gap:24px}
.topbar .links li{list-style:none}
.topbar .socials{display:flex;align-items:center;gap:16px}
.topbar .socials a{display:flex;align-items:center;padding:8px 0;opacity:.95}
.topbar .socials a:hover{opacity:.7}
.topbar .socials svg{width:16px;height:16px;fill:#fff}

/* ============================================================
   HEADER / LOGO
   ============================================================ */
header.site{background:var(--paper)}
.logo-row{padding:0 0 16px;text-align:center}
.logo-badge{
  display:inline-block;
  margin-top:-44px;   /* pulls only the logo up over the gradient bar */
  position:relative;z-index:60;
}
.logo-row img{height:128px;width:128px;margin:0 auto;object-fit:contain}

/* ============================================================
   STICKY NAV
   ============================================================ */
.navbar{
  position:sticky;top:0;z-index:50;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
  box-shadow:0 2px 10px rgba(0,0,0,.04);
}
nav.main{position:relative}
nav.main ul{
  list-style:none;
  display:flex;justify-content:center;flex-wrap:wrap;
  gap:6px 34px;
  padding:15px 0;
}
nav.main a{
  color:var(--ink);
  font-weight:600;
  font-size:14px;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:6px 2px;
  border-bottom:2px solid transparent;
  transition:border-color .2s,color .2s;
}
nav.main a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.nav-toggle{display:none}
nav.main .m-only{display:none}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-block;
  background:var(--paper);
  color:var(--ink);
  font-weight:700;font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  padding:15px 30px;
  border:0;cursor:pointer;font-family:var(--sans);
  transition:background .2s,color .2s;
}
.btn:hover{background:var(--accent);color:#fff}
.btn.solid{background:var(--accent);color:#fff}
.btn.solid:hover{background:var(--accent-dark)}

/* ============================================================
   SECTION SCAFFOLDING
   ============================================================ */
section{padding:74px 0}
.kicker{
  text-align:center;
  font-size:12px;letter-spacing:.3em;text-transform:uppercase;font-weight:700;
  color:var(--accent);
  margin-bottom:10px;
}
h2.sec{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(26px,3.2vw,36px);
  text-align:center;
  margin-bottom:44px;
}

/* ============================================================
   HERO (homepage)
   Background is a real <img> (lfo_image() in front-page.php), not a
   CSS background-image, so it stays out of inline styles and stays
   readable to text-based crawlers/screen readers via alt text.
   ============================================================ */
.hero{
  position:relative;
  min-height:480px;
  display:flex;align-items:center;
}
.hero-bg{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center 60%;
  background-attachment:fixed;  /* the actual parallax — CSS backgrounds are
    always clipped to their own element's box regardless of the fixed
    attachment, unlike a real position:fixed element, so this needs no
    JS to stay confined to the hero section */
}
@media (hover:none){
  .hero-bg{ background-attachment:scroll; } /* touch devices: avoid
    background-attachment:fixed scroll jank, matches the static
    prototype's behavior */
}
.hero-overlay{
  position:absolute;inset:0;background:rgba(24,22,30,.28);
}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero-card{
  max-width:640px;
  margin:70px auto -290px;   /* card overhangs into the next section */
  position:relative;z-index:2;
  background:rgba(255,255,255,.97);
  color:var(--ink);
  text-align:center;
  padding:36px 48px;
  box-shadow:0 20px 60px rgba(0,0,0,.18);
}
.hero-card .eyebrow{
  font-size:12px;letter-spacing:.32em;text-transform:uppercase;font-weight:700;
  color:var(--accent);margin-bottom:16px;
}
.hero-card h1{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(30px,4vw,44px);
  line-height:1.14;
  margin-bottom:18px;
}
.hero-card p{font-size:17px;max-width:48ch;margin:0 auto 28px;color:#4a4a4a}
.hero-card .btn{margin-top:8px} /* keeps breathing room above the button even if the
                                    optional supporting-text paragraph is left empty */

/* ============================================================
   RECENT POSTS GRID (also used for category archives + related posts)
   ============================================================ */
#recent .wrap{max-width:1300px}
#recent{padding-top:230px}
#recent.is-archive{padding-top:70px}  /* category archive: no overhanging hero card to clear */
#recent,#categories{background:var(--paper-tint)}
.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:44px 40px;
}
.card{
  background:var(--paper);
  box-shadow:0 10px 30px rgba(55,55,55,.08);
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .3s ease,box-shadow .3s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(55,55,55,.14)}
.card a.thumb{display:block;overflow:hidden}
.card img{
  aspect-ratio:3/2;object-fit:cover;width:100%;height:auto;
  transition:transform .45s ease;
}
.card:hover img{transform:scale(1.045)}
.card .body{padding:22px 24px 28px}
.card .meta{
  margin:0 0 8px;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
}
.card .meta a{color:var(--accent)}
.card .meta span{color:var(--ink-soft);font-weight:400;letter-spacing:.06em}
.card h3{
  font-family:var(--serif);font-weight:400;
  font-size:21px;line-height:1.35;
}
.card h3 a{color:var(--ink)}
.card h3 a:hover{color:var(--accent)}

/* ============================================================
   ABOUT TEASER (homepage)
   ============================================================ */
.about{background:var(--paper)}
.about .wrap{
  display:grid;grid-template-columns:5fr 7fr;gap:60px;align-items:center;
}
.about img{aspect-ratio:1/1;object-fit:cover;border-radius:50%;width:100%;height:auto;max-width:340px;margin:0 auto}
.about .kicker{text-align:left}
.about h2{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3vw,34px);margin-bottom:16px}
.about p{margin-bottom:16px;color:#3d3d3d}
.about .btn{margin-top:8px}

/* ============================================================
   CATEGORY TILES (homepage + About page)
   ============================================================ */
.cats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
}
.cat{
  position:relative;display:block;overflow:hidden;aspect-ratio:16/10;
}
.cat img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.cat:hover img{transform:scale(1.05)}
.cat::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.55))}
.cat span{
  position:absolute;z-index:1;left:0;right:0;bottom:18px;
  text-align:center;color:#fff;font-weight:700;
  font-size:15px;letter-spacing:.22em;text-transform:uppercase;
  text-shadow:0 1px 8px rgba(0,0,0,.4);
}

/* ============================================================
   FULL-BLEED BANNER (homepage)
   Same "real <img> instead of CSS background" treatment as .hero.
   ============================================================ */
.banner{position:relative;overflow:hidden;text-align:center;color:#fff;padding:110px 24px}
.banner-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.banner-overlay{position:absolute;inset:0;background:rgba(18,26,23,.5);z-index:1}
.banner-content{position:relative;z-index:2}
.banner-content .kicker{color:#fff}
.banner-content h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.6vw,42px);line-height:1.08;max-width:20ch;margin:0 auto 14px}
.banner-content p{max-width:52ch;margin:0 auto 30px;font-size:18px}

/* ============================================================
   ARCHIVE LIST (homepage)
   ============================================================ */
.archive-list li{
  list-style:none;
  display:flex;align-items:baseline;gap:18px;
  padding:18px 12px;
  text-align:left;
  margin:0 -12px;
  border-bottom:1px solid var(--rule);
  border-radius:6px;
  flex-wrap:wrap;
  transition:background .2s ease;
}
.archive-list li:hover{background:var(--paper-tint)}
.archive-list li:first-child{border-top:1px solid var(--rule)}
.archive-list .date{
  font-size:13px;color:var(--ink-soft);min-width:96px;letter-spacing:.04em;
}
.archive-list .title{font-family:var(--serif);font-size:19px;font-weight:400;flex:1}
.archive-list .title a{color:var(--ink)}
.archive-list .title a:hover{color:var(--accent)}
.archive-list .cat-tag{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--accent);
}

/* ============================================================
   FOOTER
   ============================================================ */
footer{
  background:var(--ink);
  color:#cfcfcf;
  padding:64px 0 0;
  font-size:14px;
}
.foot-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:48px;
  padding-bottom:44px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.foot-brand .foot-logo{
  height:64px;margin:0 0 18px;
  border-radius:50%;
  box-shadow:0 0 0 1px rgba(255,255,255,.14);
}
.foot-brand p{
  max-width:34ch;line-height:1.6;color:#b8b8b8;font-size:14px;
}
.foot-brand .social{margin-top:20px;display:flex;gap:16px}
.foot-brand .social a{display:flex;align-items:center;opacity:.9}
.foot-brand .social a:hover{opacity:.6}
.foot-brand .social svg{width:16px;height:16px;fill:#fff}

.foot-col h4{
  color:#fff;font-family:var(--sans);font-weight:700;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  margin-bottom:18px;
}
.foot-col ul{list-style:none}
.foot-col li{margin-bottom:11px}
.foot-col a{color:#b8b8b8;font-size:14px;transition:color .2s}
.foot-col a:hover{color:#fff}

.foot-base{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:12px;
  padding:22px 0;
}
.foot-base .fine{opacity:.6;font-size:13px}
.foot-base .fine a{color:#b8b8b8;text-decoration:underline;text-underline-offset:2px}
.foot-base .fine a:hover{color:#fff}

/* ============================================================
   PAGE HERO (About / Contact / generic pages / category archive)
   ============================================================ */
.page-hero{
  background:var(--paper-tint);
  padding:100px 24px 76px;
  text-align:center;
}
.page-hero .kicker{margin-bottom:14px}
.page-hero h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(32px,4.4vw,48px);
  line-height:1.1;
  margin-bottom:16px;
}
.page-hero p{
  max-width:56ch;margin:0 auto;
  font-size:17px;color:#4a4a4a;
}

/* ============================================================
   BREADCRUMBS (single post)
   ============================================================ */
.breadcrumbs{
  font-size:12px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:22px;
}
.breadcrumbs a{color:var(--ink-soft)}
.breadcrumbs a:hover{color:var(--accent)}
.breadcrumbs__sep{margin:0 8px;opacity:.5}

/* ============================================================
   ABOUT PAGE BODY
   ============================================================ */
.about-body{padding:80px 0}
.about-body .wrap{
  display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start;
}
.about-body img{
  aspect-ratio:1/1;object-fit:cover;border-radius:50%;
  width:100%;height:auto;max-width:340px;margin:0 auto;
  box-shadow:0 20px 50px rgba(55,55,55,.14);
}
.about-body p{margin-bottom:18px;color:#3d3d3d;line-height:1.75}
.about-body .signoff{
  font-family:var(--serif);font-style:italic;color:var(--accent);
  font-size:19px;margin-top:6px;
}
#topics{background:var(--paper-tint)}

/* ============================================================
   CONTACT FORM
   The visible field markup comes from Fluent Forms, not this theme —
   these rules key off Fluent Forms' documented, stable class names
   (ff-el-form-control, ff-btn, etc.) so the form matches the site
   without any theme code needing to know its exact internal markup.
   ============================================================ */
.contact-wrap{max-width:620px;margin:0 auto;padding:20px 24px 40px}
.contact-wrap .ff-el-group{margin-bottom:26px}
.contact-wrap .ff-el-input--label label,
.contact-wrap label{
  display:block;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--ink);margin-bottom:9px;
}
.contact-wrap input[type="text"],
.contact-wrap input[type="email"],
.contact-wrap input[type="tel"],
.contact-wrap textarea,
.contact-wrap .ff-el-form-control{
  width:100%;
  font-family:var(--sans);font-size:16px;color:var(--ink);
  border:1px solid var(--rule)!important;
  padding:14px 16px!important;
  background:var(--paper);
  border-radius:0!important;
  transition:border-color .2s,box-shadow .2s;
}
.contact-wrap input:focus,
.contact-wrap textarea:focus,
.contact-wrap .ff-el-form-control:focus{
  outline:none;border-color:var(--accent)!important;
  box-shadow:0 0 0 3px rgba(208,37,62,.12);
}
.contact-wrap textarea{resize:vertical;min-height:170px}
.contact-wrap button,
.contact-wrap input[type="submit"],
.contact-wrap .ff-btn{
  display:inline-block;width:100%;
  background:var(--accent)!important;color:#fff!important;
  font-weight:700;font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  padding:15px 30px!important;border:0!important;border-radius:0!important;
  cursor:pointer;font-family:var(--sans);
  transition:background .2s;
}
.contact-wrap button:hover,
.contact-wrap input[type="submit"]:hover,
.contact-wrap .ff-btn:hover{background:var(--accent-dark)!important}

/* ============================================================
   SINGLE POST
   ============================================================ */
.post-hero{
  background:var(--paper-tint);
  padding:100px 24px 56px;
  text-align:center;
}
.post-hero .kicker{margin-bottom:14px}
.post-hero .breadcrumbs{display:flex;justify-content:center}
.post-hero h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(30px,4.4vw,46px);
  line-height:1.14;
  max-width:22ch;margin:0 auto 18px;
}
.post-meta{
  font-size:13px;letter-spacing:.08em;color:var(--ink-soft);text-transform:uppercase;
}
.post-meta span{margin:0 8px;opacity:.5}

.post-featured{max-width:1140px;margin:-36px auto 0;padding:0 24px}
.post-featured img{
  width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  box-shadow:0 24px 60px rgba(55,55,55,.16);
}

.post-content{max-width:800px;margin:0 auto;padding:64px 24px 20px}
.post-content p{font-size:20px;line-height:1.85;color:#333;margin-bottom:26px}
.post-content h2{font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.25;margin:46px 0 18px}
.post-content h3{font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.3;margin:36px 0 14px}
.post-content img{width:100%;height:auto;margin:8px 0}
.post-content figcaption{font-size:13px;color:var(--ink-soft);text-align:center;margin-top:10px;margin-bottom:30px}
.post-content ul,.post-content ol{margin:0 0 26px 22px}
.post-content li{font-size:20px;line-height:1.85;color:#333;margin-bottom:8px}
.post-content.is-centered{text-align:center}
.post-content blockquote{
  border-left:3px solid var(--accent);
  padding-left:24px;margin:38px 0;
  font-family:var(--serif);font-style:italic;
  font-size:21px;line-height:1.5;color:var(--ink);
}
.post-tags{
  display:flex;gap:10px;flex-wrap:wrap;
  margin-top:36px;padding-top:32px;border-top:1px solid var(--rule);
}
.post-tags a{
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  color:var(--accent);border:1px solid var(--rule);
  padding:9px 16px;border-radius:22px;transition:.2s;
}
.post-tags a:hover{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ============================================================
   IMAGE CAROUSEL — inserted into post content via [lfo_carousel]
   ============================================================ */
.post-carousel{margin:40px 0}

.post-carousel__main{
  position:relative;
  background:var(--paper-tint);
  overflow:hidden;
  height:var(--carousel-height, auto);   /* the number comes from main.js
    (it depends on each photo's own dimensions plus the current viewport,
    so it can't be a fixed value in this file) — but the actual rule,
    that this element's height IS this custom property, lives here, not
    in JS. main.js only ever sets the bare --carousel-height number via
    setProperty(), never the height property directly. */
  transition:height .35s ease;   /* smoothly animates between photos of
    different aspect ratios instead of jumping instantly — main.js sets
    an explicit pixel height on each slide change, since CSS can't
    transition to/from an auto-computed height */
}
.post-carousel .post-carousel__slide{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  max-width:100%;
  max-height:75vh;
  width:auto;height:auto;   /* no forced dimension: each photo finds its
    own best-fit size within these two caps, preserving its real ratio —
    a portrait or square photo isn't forced to full container width
    regardless of how tall that would make it. Scoped as
    .post-carousel .post-carousel__slide (not just the bare class)
    specifically so this beats .post-content img on specificity —
    that rule (for regular images embedded in post body text) would
    otherwise silently force width:100% on carousel slides too, since
    a shortcode's output still lives inside .post-content. */
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease;
  pointer-events:none;
}
.post-carousel .post-carousel__slide.is-active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

@media (prefers-reduced-motion: reduce){
  .post-carousel__main,
  .post-carousel .post-carousel__slide{
    transition:none;
  }
}

.post-carousel__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(24,22,30,.55);
  border:0;border-radius:50%;
  color:#fff;cursor:pointer;
  transition:background .2s;
}
.post-carousel__nav:hover{background:rgba(24,22,30,.8)}
.post-carousel__nav svg{width:20px;height:20px}
.post-carousel__nav--prev{left:16px}
.post-carousel__nav--next{right:16px}

.post-carousel__counter{
  position:absolute;right:16px;bottom:14px;
  background:rgba(24,22,30,.55);color:#fff;
  font-size:12px;letter-spacing:.06em;
  padding:5px 12px;border-radius:20px;
}

.post-carousel__thumbs{
  display:flex;gap:10px;
  margin-top:14px;
  overflow-x:auto;
  padding-bottom:4px; /* room for a focus ring without clipping */
}
.post-carousel__thumb{
  flex:0 0 auto;
  width:72px;height:72px;
  padding:0;border:2px solid transparent;border-radius:4px;
  overflow:hidden;cursor:pointer;
  opacity:.6;
  transition:opacity .2s,border-color .2s;
}
.post-carousel__thumb img{width:100%;height:100%;object-fit:cover}
.post-carousel__thumb:hover{opacity:.85}
.post-carousel__thumb.is-active{opacity:1;border-color:var(--accent)}

@media (max-width:640px){
  .post-carousel__thumb{width:56px;height:56px}
}

#related{background:var(--paper-tint)}

/* ============================================================
   PAGINATION (WordPress core markup from the_posts_pagination())
   ============================================================ */
nav.pagination{
  display:flex;justify-content:center;padding:10px 0 90px;
}
nav.pagination .nav-links{
  display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;
}
nav.pagination .page-numbers{
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  color:var(--ink);padding:12px 20px;border:1px solid var(--rule);
  transition:.2s;
}
nav.pagination a.page-numbers:hover{border-color:var(--accent);color:var(--accent)}
nav.pagination .page-numbers.current{background:var(--accent);color:#fff;border-color:var(--accent)}
nav.pagination .page-numbers.dots{border:0;padding:12px 4px}

/* ============================================================
   COMMENTS (wpDiscuz)
   wpDiscuz enqueues its own CSS/JS and renders its own markup via the
   comments_template() call in single.php/page.php — nothing here
   rebuilds its layout. These rules are a light brand skin (fonts,
   colors, spacing, form-field styling to match .contact-wrap) applied
   on top of it. wpDiscuz's class names have shifted somewhat between
   major versions, so both the older "wpdiscuz-" prefix and the current
   "wpd-" prefix are targeted here — harmless if one set doesn't match
   your installed version. Check the rendered markup on the live site
   and adjust selectors here if anything looks unstyled.
   ============================================================ */
#comments-section{padding:20px 0 90px}
#comments-section .post-content{max-width:800px}

#comments,
.wpdiscuz-comment-area,
.wpd-thread-info{
  font-family:var(--sans);
  color:var(--ink);
}

/* Heading / comment count */
#comments .comments-title,
.wpd-thread-info h3,
.wpd-thread-info-wrapper{
  font-family:var(--serif);
  font-weight:400;
  font-size:26px;
  color:var(--ink);
  margin-bottom:24px;
}

/* Avatars */
.wpdiscuz-avatar img,
.wpd-avatar img,
.wpd-comment-avatar img{
  border-radius:50%;
}

/* Author name + date */
.wpdiscuz-comment-author,
.wpd-comment-author,
.wpd-comment-header a{
  color:var(--ink);
  font-weight:700;
  font-size:15px;
}
.wpdiscuz-comment-date,
.wpd-comment-time,
.wpd-comment-date{
  color:var(--ink-soft);
  font-size:13px;
}

/* Comment body text */
.wpdiscuz-comment-text,
.wpd-comment-text{
  font-size:16px;
  line-height:1.75;
  color:#333;
}

/* Reply / edit / vote links */
.wpdiscuz-reply-btn,
.wpd-reply-link,
.wpd-comment-footer a{
  color:var(--accent);
  font-weight:600;
  font-size:13px;
  letter-spacing:.02em;
  text-transform:none;
}
.wpdiscuz-reply-btn:hover,
.wpd-reply-link:hover,
.wpd-comment-footer a:hover{
  color:var(--accent-dark);
}

/* Threaded reply indentation — echoes the blockquote treatment
   elsewhere on the site rather than wpDiscuz's default styling */
.wpdiscuz-item-wrapper .wpdiscuz-item-wrapper,
.wpd-comment .wpd-comment{
  border-left:2px solid var(--rule);
  padding-left:20px;
}

/* Comment form fields — same treatment as .contact-wrap so the
   comment form doesn't look like a different site from the rest */
.wpdiscuz-textarea-wrap textarea,
.wpd-textarea,
.wpd-field-texarea textarea,
.wpd-form-row input[type="text"],
.wpd-form-row input[type="email"],
.wpd-form-row input[type="url"]{
  width:100%;
  font-family:var(--sans);font-size:16px;color:var(--ink);
  border:1px solid var(--rule)!important;
  padding:14px 16px!important;
  background:var(--paper);
  border-radius:0!important;
  transition:border-color .2s,box-shadow .2s;
}
.wpdiscuz-textarea-wrap textarea:focus,
.wpd-textarea:focus,
.wpd-form-row input:focus{
  outline:none;border-color:var(--accent)!important;
  box-shadow:0 0 0 3px rgba(208,37,62,.12);
}

/* Submit button */
.wpdiscuz-submit-button,
.wpd-comment-btn,
.wpd-form-submit button{
  background:var(--accent)!important;color:#fff!important;
  font-family:var(--sans);
  font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  padding:14px 26px!important;border:0!important;border-radius:0!important;
  cursor:pointer;transition:background .2s;
}
.wpdiscuz-submit-button:hover,
.wpd-comment-btn:hover,
.wpd-form-submit button:hover{
  background:var(--accent-dark)!important;
}

/* Sort dropdown + subscribe checkbox row — de-emphasized, matches
   the muted meta-text treatment used on post cards */
.wpd-sort-select,
.wpdiscuz-subscribe-bar,
.wpd-subscribe-bar{
  font-size:13px;color:var(--ink-soft);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .cats{grid-template-columns:repeat(2,1fr)}
  .about .wrap{grid-template-columns:1fr;gap:36px;text-align:center}
  .about .kicker{text-align:center}
  .about-body .wrap{grid-template-columns:1fr;gap:36px;text-align:center}
}

@media (max-width: 640px){
  .topbar .links{display:none}          /* socials left, hamburger right */
  .grid{grid-template-columns:1fr}
  .cats{grid-template-columns:1fr}

  .logo-row{padding-bottom:10px}
  .logo-badge{margin-top:-40px}
  .logo-row img{height:76px;width:76px}

  /* navbar is invisible until the menu opens */
  .navbar{position:static;border-bottom:none;box-shadow:none}

  .nav-toggle{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    background:none;border:0;
    padding:14px 2px;cursor:pointer;
  }
  .nav-toggle span{
    display:block;width:26px;height:2.5px;border-radius:2px;
    background:#fff;transition:transform .2s,opacity .2s;
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

  nav.main ul{
    display:none;flex-direction:column;align-items:center;gap:0;padding:0;
  }
  nav.main ul.open{display:flex;border-bottom:1px solid var(--rule)}
  nav.main li{width:100%;text-align:left;border-top:1px solid var(--rule)}
  nav.main .m-only{display:block}
  nav.main .m-only a{color:var(--accent);font-size:12px;padding:11px 4px}
  nav.main a{display:block;padding:13px 4px;border-bottom:none}

  .hero{min-height:440px}
  .hero-card{margin:48px auto -100px;padding:32px 24px}
  #recent{padding-top:190px}
  #recent.is-archive{padding-top:56px}

  .archive-list .date{min-width:100%;order:2}

  .foot-grid{grid-template-columns:1fr;gap:36px}
  .foot-base{flex-direction:column;align-items:flex-start;text-align:left}

  .post-featured{margin-top:-24px}
}