/**
 * Little Craft Empire, redesign
 *
 * Standalone stylesheet. No Bootstrap, no page-builder CSS.
 * Layout is CSS Grid + Flexbox; spacing and type come from the tokens below.
 */

/* ---------------------------------------------------------------- tokens */
:root {
  /* Brand. Coral is the site's existing accent, kept as the action colour. */
  --coral: #f46455;
  --coral-dark: #d94b3d;
  --ink: #16181d;
  --ink-2: #3c414b;
  --muted: #6b7280;
  --line: #e6e8ec;
  --bg: #ffffff;
  --bg-soft: #f7f8fa;
  --bg-dark: #16181d;

  /* Type scale (1.25). Fluid, so it reads well from phone to desktop. */
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1:  clamp(1.25rem, 1.16rem + 0.4vw, 1.5rem);
  --step-2:  clamp(1.56rem, 1.4rem + 0.8vw, 2.1rem);
  --step-3:  clamp(1.95rem, 1.66rem + 1.4vw, 2.9rem);
  --step-4:  clamp(2.44rem, 1.9rem + 2.6vw, 4rem);

  /* Spacing rhythm */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2.5rem;
  --s-5: 4rem;
  --s-6: 6rem;

  --wrap: 1180px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 1px 2px rgba(16, 18, 23, .06), 0 8px 24px rgba(16, 18, 23, .07);
  --shadow-lg: 0 2px 4px rgba(16, 18, 23, .06), 0 18px 48px rgba(16, 18, 23, .12);
}

/* ------------------------------------------------------------- baseline */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-2);
  font-family: Raleway, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--s-2);
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 800;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }

p { margin: 0 0 var(--s-2); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--coral-dark); }

.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}

.skip-link {
  position: absolute; left: -9999px;
  background: var(--ink); color: #fff; padding: .75rem 1rem; z-index: 100;
}
.skip-link:focus { left: 1rem; top: 1rem; }

:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }

/* --------------------------------------------------------------- buttons */
.lce-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  padding: .9rem 1.6rem;
  border: 0; border-radius: 999px;
  font: inherit; font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.lce-btn-primary { background: var(--coral); color: #fff; box-shadow: 0 6px 18px rgba(244, 100, 85, .35); }
.lce-btn-primary:hover { background: var(--coral-dark); transform: translateY(-2px); }
.lce-btn-ghost { background: rgba(255,255,255,.12); color: #fff; border: 1.5px solid rgba(255,255,255,.5); }
.lce-btn-ghost:hover { background: rgba(255,255,255,.2); }
.lce-btn-lg { padding: 1.05rem 2.2rem; font-size: var(--step-1); }

/* ---------------------------------------------------------------- header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); min-height: 76px;
}
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand-logo { height: 46px; width: auto; }

.site-nav { display: flex; align-items: center; gap: var(--s-3); }
.nav-list {
  display: flex; align-items: center; gap: var(--s-3);
  list-style: none; margin: 0; padding: 0;
}
.nav-list a {
  color: var(--ink); text-decoration: none; font-weight: 600;
  font-size: var(--step--1); letter-spacing: .01em;
  padding: .4rem 0; border-bottom: 2px solid transparent;
}
.nav-list a:hover,
.nav-list .current-menu-item > a { border-bottom-color: var(--coral); }

.nav-toggle-btn { display: none; }

/* ------------------------------------------------------------------ hero */
.hero {
  position: relative;
  color: #fff;
  background: var(--bg-dark) center/cover no-repeat;
  isolation: isolate;
}
/* The hero photo has the product in the right half, so the scrim has to
   clear that side completely. It fades out by 55% and stays transparent,
   which keeps the shirt and her face fully legible. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(95deg,
    rgba(10,11,14,.88) 0%,
    rgba(10,11,14,.72) 32%,
    rgba(10,11,14,.28) 50%,
    rgba(10,11,14,0) 62%);
}
.hero-inner {
  display: grid; align-items: center;
  /* Tall enough for the photo to read at full size, as on the original. */
  min-height: min(88vh, 760px);
  padding-block: var(--s-5);
  max-width: 46%;
}
.hero h1 { color: #fff; margin-bottom: var(--s-2); }
.hero-sub {
  font-size: var(--step-1); color: rgba(255,255,255,.9);
  margin-bottom: var(--s-3); max-width: 34ch;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.hero-note { font-size: var(--step--1); color: rgba(255,255,255,.75); margin: var(--s-2) 0 0; }

.eyebrow {
  display: inline-block;
  font-size: var(--step--1); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--coral);
  margin-bottom: var(--s-2);
}

/* -------------------------------------------------------------- sections */
.section { padding-block: var(--s-6); }
.section-soft { background: var(--bg-soft); }
.section-head { max-width: 44ch; margin-bottom: var(--s-4); }
.section-head.center { max-width: 52ch; margin-inline: auto; text-align: center; }
.section-head p { color: var(--muted); font-size: var(--step-1); margin: 0; }

/* ----------------------------------------------------------- card grids */
.grid { display: grid; gap: var(--s-3); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

/* Pillar cards: image on top, copy beneath. */
.pillar {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
  display: flex; flex-direction: column;
}
.pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.pillar-media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--bg-soft); }
.pillar-media img { width: 100%; height: 100%; object-fit: cover; }
.pillar-body { padding: var(--s-3); display: flex; flex-direction: column; flex: 1; }
.pillar h3 { margin-bottom: .5rem; }
.pillar p { color: var(--muted); font-size: var(--step--1); flex: 1; }
.pillar .link {
  font-weight: 700; text-decoration: none; color: var(--coral-dark);
  font-size: var(--step--1);
}
.pillar .link:hover { text-decoration: underline; }

/* Curriculum: numbered, no icon dependency. */
.lesson {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s-3); position: relative;
}
.lesson-num {
  display: inline-grid; place-items: center;
  width: 2.25rem; height: 2.25rem; margin-bottom: var(--s-2);
  border-radius: 50%; background: rgba(244,100,85,.12); color: var(--coral-dark);
  font-weight: 800; font-size: var(--step--1);
}
.lesson h3 { font-size: var(--step-0); font-weight: 700; }
.lesson p { color: var(--muted); font-size: var(--step--1); margin: 0; }

/* ------------------------------------------------------------- split/CTA */
.split {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: center;
}
.split-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }

.band {
  color: #fff; border-radius: var(--radius-lg);
  padding: var(--s-5) var(--s-4);
  background: var(--bg-dark) center/cover no-repeat;
  position: relative; isolation: isolate; overflow: hidden;
}
.band::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(95deg, rgba(12,13,16,.9), rgba(12,13,16,.55));
}
.band h2 { color: #fff; }
.band p { color: rgba(255,255,255,.85); max-width: 52ch; }

/* -------------------------------------------------------------- reviews */
.review {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s-3); box-shadow: var(--shadow);
}
.review-quote { font-size: var(--step-0); color: var(--ink); margin-bottom: var(--s-2); }
.review-quote strong { display: block; margin-bottom: .35rem; }
.review-by { font-size: var(--step--1); color: var(--muted); margin: 0; font-weight: 600; }
.stars { color: var(--coral); letter-spacing: .1em; margin-bottom: .5rem; }

/* ------------------------------------------------------------------ FAQ */
.faq { max-width: 780px; margin-inline: auto; }
.faq details {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; margin-bottom: var(--s-1); overflow: hidden;
}
.faq details[open] { box-shadow: var(--shadow); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 1.1rem var(--s-3);
  font-weight: 700; color: var(--ink);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-size: 1.4rem; color: var(--coral); font-weight: 700;
  transition: transform .2s ease;
}
.faq details[open] summary::after { content: "\2013"; }
.faq .faq-body { padding: 0 var(--s-3) var(--s-3); color: var(--muted); }

/* --------------------------------------------------------------- footer */
.site-footer { background: var(--bg-dark); color: rgba(255,255,255,.72); margin-top: var(--s-6); }
.footer-cta { background: var(--coral); color: #fff; text-align: center; padding-block: var(--s-5); }
.footer-cta h2 { color: #fff; max-width: 22ch; margin-inline: auto; }
.footer-cta-sub { color: rgba(255,255,255,.92); margin-bottom: var(--s-3); }
.footer-cta .lce-btn-primary { background: #fff; color: var(--coral-dark); box-shadow: none; }
.footer-cta .lce-btn-primary:hover { background: #fff2f0; }

/* Footer is a single centred bar: brand, then copyright. */
.footer-bottom {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  padding-block: var(--s-4); text-align: center;
}
.site-footer .brand-logo {
  background: #fff; padding: .5rem .75rem; border-radius: 10px;
}
.footer-copy { margin: 0; font-size: var(--step--1); color: rgba(255,255,255,.6); }

/* ------------------------------------------------------------ responsive */
@media (max-width: 860px) {

  .nav-toggle-btn {
    display: inline-grid; gap: 5px; cursor: pointer; padding: .5rem;
  }
  .nav-toggle-btn span {
    display: block; width: 26px; height: 2px; background: var(--ink); border-radius: 2px;
  }
  .site-nav {
    position: fixed; inset: 76px 0 auto; z-index: 40;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: var(--s-2) 1.25rem var(--s-3);
    transform: translateY(-140%); transition: transform .25s ease;
    box-shadow: var(--shadow-lg);
  }
  .nav-toggle:checked ~ .site-nav { transform: translateY(0); }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list a { display: block; padding: .85rem 0; border-bottom: 1px solid var(--line); }
  .nav-cta { margin-top: var(--s-2); }

  /* ---- hero ----
     The desktop hero reserves the right half for the photo. On a phone there
     is no room for that: the text must use the full width, and the photo has
     to sit above rather than behind it, or the subject ends up off-frame and
     the copy sits on random background detail. */
  .hero {
    background-image: none !important;
    background: var(--bg-dark);
    padding-top: 0;
  }
  .hero::after { display: none; }
  /* The hero photo is very wide (2.4:1) and the subject sits in the right
     third: measured, she spans 58%-84% of the frame with her face at 71%.
     A tall mobile crop keeps only a narrow slice, so the crop window is
     aimed at that midpoint. A 5:4 box is wide enough to hold the whole
     shirt (26% of the source) without eating the screen. */
  /* An <img> with object-position is used rather than a background, because
     background-position percentages align the image's X% point with the
     container's X% point. That is not "centre on this spot", so it drifts as
     the viewport changes. object-position behaves the same way, but here the
     value is derived once from the measured subject centre and the crop is
     wide enough (about half the source) that small errors stay invisible. */
  .hero::before {
    content: "";
    display: block;
    width: 100%;
    aspect-ratio: 5 / 4;
    background-image: var(--hero-img);
    background-size: cover;
    background-position: 94% center;
  }
  .hero-inner {
    max-width: none;
    min-height: 0;
    padding-block: var(--s-4);
  }
  .hero-sub { max-width: none; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .lce-btn { width: 100%; }

  /* Buttons should never wrap onto two lines on a phone. */
  .lce-btn { white-space: nowrap; }
  .lce-btn-lg { font-size: var(--step-0); padding: .95rem 1.5rem; }

  /* Tighter vertical rhythm so sections do not feel endless when stacked. */
  .section { padding-block: var(--s-5); }
  .enroll { padding: var(--s-4) var(--s-3); }
  .footer-cta { padding-block: var(--s-4); }
}

@media (max-width: 480px) {
  /* Break only genuinely over-long words. `hyphens: auto` split ordinary
     words such as "business" mid-headline, which looked like a typo. */
  h1, h2 { overflow-wrap: break-word; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ------------------------------------------------- feature (two column) */
/* Text beside the photo, not on top of it. Photos with a clear subject
   fight overlaid type: the face ends up behind a paragraph and both lose. */
.feature {
  display: grid; gap: var(--s-4);
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
/* Explicit left alignment: the old stylesheet centres text further up the
   cascade, which reads as a mistake beside a left-edged photo. */
.feature-copy { text-align: left; }
.feature-copy h2 { max-width: 18ch; }
.feature-copy p { color: var(--muted); max-width: 46ch; }
/* The photo is portrait, so a 4:3 crop would cut her head off. A taller
   frame with top-weighted focus keeps faces in shot whichever image is used. */
.feature-media img {
  width: 100%; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  object-fit: cover; object-position: 50% 30%;
  aspect-ratio: 4 / 5;
}

/* --------------------------------------------------------- enroll block */
/* Deliberately flat colour: this is the last action on the page, so nothing
   should compete with the button for attention. */
.enroll {
  background: var(--bg-dark); color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--s-5) var(--s-4);
  text-align: center;
}
.enroll h2 { color: #fff; max-width: 20ch; margin-inline: auto; }
.enroll-sub {
  color: rgba(255,255,255,.82); max-width: 52ch;
  margin-inline: auto; margin-bottom: var(--s-3);
}
.enroll-note {
  font-size: var(--step--1); color: rgba(255,255,255,.6);
  margin: var(--s-2) 0 0;
}

@media (max-width: 860px) {
  .feature { grid-template-columns: 1fr; }
  /* Photo above the copy on narrow screens so the image sets context first. */
  .feature-media { order: -1; }
}

/* ---------------------------------------------------------------- slider */
/* Built on scroll-snap, so swiping works with no JavaScript at all. The
   buttons and dots are progressive enhancement layered on top. */
.slider { position: relative; }
.slider-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - var(--s-3)) / 2);
  gap: var(--s-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: var(--s-2);
  /* Hide the scrollbar; the dots communicate position instead. */
  scrollbar-width: none;
}
.slider-track::-webkit-scrollbar { display: none; }
.slider-track > * { scroll-snap-align: start; }

.slider-nav {
  display: flex; align-items: center; justify-content: center;
  gap: var(--s-2); margin-top: var(--s-2);
}
.slider-btn {
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: #fff; color: var(--ink);
  font-size: 1.1rem; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.slider-btn:hover:not(:disabled) { background: var(--coral); border-color: var(--coral); color: #fff; }
.slider-btn:disabled { opacity: .35; cursor: default; }

.slider-dots { display: flex; gap: .4rem; }
.slider-dot {
  width: .5rem; height: .5rem; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--line); cursor: pointer;
  transition: background-color .15s ease, width .15s ease;
}
.slider-dot[aria-current="true"] { background: var(--coral); width: 1.4rem; border-radius: 999px; }

@media (max-width: 860px) {
  /* One card per screen on a phone: two would be unreadably narrow. */
  .slider-track { grid-auto-columns: 100%; }
  /* Sidebar below the content, and not sticky: a pinned block would eat
     most of a phone screen. */
  .page-layout.has-sidebar { grid-template-columns: 1fr; }
  .page-sidebar { position: static; }
}

/* ------------------------------------------------------------ inner pages */
/* Applies to every page other than the front page. The old theme relied on
   Bootstrap for this; with it gone, content needs its own container, measure
   and vertical rhythm. */
.page-hero {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
  padding-block: var(--s-5);
}
.page-hero h1 { margin: 0; font-size: var(--step-3); max-width: 24ch; }

/* Two columns when a sidebar has widgets, one when it does not. */
.page-layout { padding-block: var(--s-5); }
.page-layout.has-sidebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--s-4);
  align-items: start;
}
.page-content {
  /* A comfortable reading measure. Long link lists and prose both benefit. */
  max-width: 74ch;
}
.page-layout.has-sidebar .page-content { max-width: none; }

.page-sidebar {
  position: sticky; top: 100px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-3);
}
.page-sidebar h2,
.page-sidebar h3,
.page-sidebar .widget-title {
  font-size: var(--step-0);
  margin-bottom: var(--s-2);
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--line);
}
.page-sidebar ul { list-style: none; margin: 0; padding: 0; }
.page-sidebar li { margin-bottom: .3rem; }
.page-sidebar a {
  display: block;
  padding: .55rem .7rem;
  border-radius: 8px;
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  color: var(--ink-2);
  transition: background-color .15s ease, color .15s ease;
}
.page-sidebar a:hover { background: #fff; color: var(--coral-dark); }
.page-sidebar .current-menu-item > a,
.page-sidebar .current_page_item > a { background: var(--coral); color: #fff; }
.page-content > * { margin-bottom: var(--s-2); }
.page-content h2 { font-size: var(--step-2); margin-top: var(--s-4); }
.page-content h3 { margin-top: var(--s-3); }
.page-content img { border-radius: var(--radius); margin-block: var(--s-3); }

.page-content ul,
.page-content ol { padding-left: 1.25rem; margin-bottom: var(--s-3); }
.page-content li { margin-bottom: .55rem; }

/* Lesson lists read as a stack of destinations rather than raw bullets. */
.page-content li > a:only-child {
  display: block;
  padding: .85rem 1rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
  color: var(--ink);
  transition: border-color .15s ease, transform .15s ease;
}
.page-content li > a:only-child:hover {
  border-color: var(--coral);
  transform: translateX(3px);
}
.page-content ul:has(> li > a:only-child) { list-style: none; padding-left: 0; }

.page-content iframe,
.page-content video { width: 100%; aspect-ratio: 16 / 9; height: auto; border-radius: var(--radius); }

.page-content table { width: 100%; border-collapse: collapse; }
.page-content th,
.page-content td { border: 1px solid var(--line); padding: .6rem .8rem; text-align: left; }

/* The legacy templates leave empty grid rows behind; collapse them so pages
   do not open with hundreds of pixels of blank space. */
.page-content > .row:empty,
.page-content > div:empty,
.page-content > p:empty { display: none; }

/* --------------------------------------------------------- single posts */
.post-meta {
  margin: 0; color: var(--muted); font-size: var(--step--1);
  font-weight: 600; letter-spacing: .02em;
}
.post-thumb {
  width: 100%; border-radius: var(--radius);
  margin-bottom: var(--s-3); object-fit: cover;
}

/* Previous / next lesson. Two cards side by side, stacking on mobile. */
.post-nav {
  display: grid; gap: var(--s-2);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}
.post-nav-link {
  display: block; padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; background: #fff;
  transition: border-color .15s ease, transform .15s ease;
}
.post-nav-link:hover { border-color: var(--coral); transform: translateY(-2px); }
.post-nav-next { text-align: right; }
.post-nav-dir {
  display: block; font-size: var(--step--1); font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--coral);
  margin-bottom: .2rem;
}
.post-nav-title { display: block; font-weight: 700; color: var(--ink); }

/* -------------------------------------------------------------- comments */
/* The old stylesheet left the form unstyled apart from a plum submit button
   inherited from Bootstrap-era rules. */
.comments-area, #comments { margin-top: var(--s-5); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.comment-reply-title, .comments-title {
  font-size: var(--step-1); margin-bottom: var(--s-2); border: 0; padding: 0;
}
.comment-form { display: grid; gap: var(--s-2); }
.comment-form p { margin: 0; }
.comment-form label { display: block; font-weight: 600; font-size: var(--step--1); margin-bottom: .35rem; }
.comment-form textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"] {
  width: 100%; padding: .75rem .9rem;
  font: inherit; color: var(--ink);
  background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius);
}
.comment-form textarea { min-height: 8rem; resize: vertical; }
.comment-form textarea:focus,
.comment-form input:focus { outline: none; border-color: var(--coral); }
.comment-form .form-submit { margin-top: var(--s-1); }
.comment-form input[type="submit"] {
  padding: .85rem 1.8rem;
  border: 0; border-radius: 999px;
  background: var(--coral) !important; color: #fff !important;
  font: inherit; font-weight: 700; cursor: pointer;
}
.comment-form input[type="submit"]:hover { background: var(--coral-dark) !important; }
.comment-list { list-style: none; padding: 0; margin: 0 0 var(--s-3); }
.comment-list li { margin-bottom: var(--s-2); }
.comment-body {
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--s-3);
}