/*
Theme Name: Aramithaus
Theme URI: https://aramithaus.com
Author: Aramithaus
Description: Custom theme for Aramithaus — not a teacher, a test case.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: aramithaus
*/

:root {
  --bg: #F7F3EC;
  --ink: #2B2A28;
  --ink-soft: #5B5750;
  --grey: #8C8578;
  --line: #DED6C7;
  --blue: #0047FE;
  --green: #6AFB00;
  --green-deep: #4a9e00;

  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --max-w: 700px;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.75rem;
  --space-4: 3rem;
  --space-5: 5rem;
  --space-6: 8rem;

  /* Small repeating wave used under the header links (matches the dividers) */
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='6' viewBox='0 0 16 6'%3E%3Cpath d='M0 3 Q4 0 8 3 T16 3' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--blue);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}
a:hover { border-bottom-color: currentColor; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

img { max-width: 100%; display: block; }

/* ---------- Layout shell ---------- */

.wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) 0;
}

/* Three columns: logo left, Stories centered, translate right.
   The equal outer columns keep Stories in the true center of the page. */
.site-header .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end; /* both wavy lines sit level with the bottom of the logo */
  gap: var(--space-2);
  width: 100%;
}
.site-header .brand { justify-self: start; }
.site-header .site-nav { justify-self: center; }
.site-header .site-translate { justify-self: end; }

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--ink);
}
.brand img { width: 28px; height: 28px; flex: none; }
/* The header links have their own wavy lines, so never draw the site's
   default straight hover underline (or one added by WordPress) under them. */
.site-header .brand,
.site-header .brand:hover,
.site-header .brand:focus,
.site-stories,
.site-stories:hover,
.site-stories:focus {
  border-bottom: none !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
.brand { align-items: flex-end; }
/* Wavy gradient line under the name, ending level with the logo's bottom
   edge and starting after the logo (never under it). */
.brand span {
  position: relative;
  display: inline-block;
  line-height: 1;
  padding-bottom: 9px;
}
.brand span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--blue), var(--green));
  -webkit-mask: var(--wave) repeat-x left center / 16px 6px;
  mask: var(--wave) repeat-x left center / 16px 6px;
}

.site-nav {
  display: flex;
  gap: var(--space-3);
  font-size: 0.95rem;
}
.site-nav a { color: var(--ink-soft); }
/* Stories: blue-to-green like the squiggle dividers, with a wavy
   gradient underline in the same colors. The arrow appears on hover only.
   The text fades to the deeper green so the last letters stay readable;
   the underline uses the exact divider colors. */
.site-stories {
  position: relative;
  display: inline-block;
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1;
  letter-spacing: 0.02em;
  padding-bottom: 9px;
  border-bottom: none;
  color: var(--blue); /* fallback for very old browsers */
  background-image: linear-gradient(90deg, var(--blue), var(--green-deep));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Wavy underline: the gradient shows through a repeating wave shape. */
.site-stories::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--blue), var(--green));
  -webkit-mask: var(--wave) repeat-x left center / 16px 6px;
  mask: var(--wave) repeat-x left center / 16px 6px;
}
/* Arrow sits outside the word so Stories stays centered, hidden until hover. */
.site-stories::after {
  content: "\2192";
  position: absolute;
  left: 100%;
  top: 0;
  line-height: 1;
  margin-left: 0.3em;
  color: var(--green-deep);
  -webkit-text-fill-color: var(--green-deep);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.site-stories:hover { border-bottom: none; }
.site-stories:hover::after,
.site-stories:focus-visible::after { opacity: 1; transform: translateX(0); }
.site-translate { display: flex; align-items: center; }
.site-translate * { margin: 0 !important; padding: 0 !important; }
.site-translate select,
select.gt_selector,
select.goog-te-combo,
#google_language_translator select,
.gtranslate_wrapper select,
html body .site-header .site-translate #google_language_translator select.gt_selector.notranslate {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  font-family: var(--sans) !important;
  font-size: 0.85rem !important;
  color: var(--ink-soft) !important;
  /* Three layers: the arrow, a cream fill, and the brand gradient showing
     only in the border ring, so the outline fades blue to green. */
  background-color: transparent !important;
  background-image:
    url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3e%3cpath d='M1 1l4 4 4-4' fill='none' stroke='%235B5750' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e"),
    linear-gradient(var(--bg), var(--bg)),
    linear-gradient(90deg, var(--blue), var(--green)) !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  background-position: right 0.75rem center, 0 0, 0 0 !important;
  background-size: 10px 6px, 100% 100%, 100% 100% !important;
  background-origin: padding-box, padding-box, border-box !important;
  background-clip: padding-box, padding-box, border-box !important;
  border: 1.5px solid transparent !important;
  border-radius: 999px !important;
  padding: 0.4rem 1.8rem 0.4rem 1rem !important;
  line-height: normal !important;
  cursor: pointer !important;
  width: auto !important;
  height: auto !important;
  box-shadow: none !important;
  transition: box-shadow 0.2s ease;
}
.site-translate select:hover,
select.gt_selector:hover,
select.goog-te-combo:hover,
#google_language_translator select:hover,
.gtranslate_wrapper select:hover,
html body .site-header .site-translate #google_language_translator select.gt_selector.notranslate:hover { box-shadow: 0 2px 10px rgba(0, 71, 254, 0.15) !important; }
.site-translate select:focus-visible,
select.gt_selector:focus-visible,
select.goog-te-combo:focus-visible,
#google_language_translator select:focus-visible,
.gtranslate_wrapper select:focus-visible,
html body .site-header .site-translate #google_language_translator select.gt_selector.notranslate:focus-visible {
  outline: 2px solid var(--blue) !important;
  outline-offset: 2px !important;
}
.site-translate select::-ms-expand,
select.gt_selector::-ms-expand,
select.goog-te-combo::-ms-expand,
#google_language_translator select::-ms-expand,
.gtranslate_wrapper select::-ms-expand { display: none; }

/* ---------- Hero ---------- */

.hero {
  padding: var(--space-5) 0 var(--space-4);
}

.hero h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.2rem, 5vw, 3.1rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-3);
  max-width: 14ch;
}

.hero p {
  font-size: 1.1rem;
  color: var(--ink-soft);
  max-width: 62ch;
  margin: 0 0 var(--space-2);
}

.location {
  color: var(--grey);
  font-size: 0.9rem;
  margin-bottom: var(--space-3);
}

.button-row {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-3);
}

.btn {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  border-radius: 3px;
  font-size: 0.95rem;
  border: 1px solid transparent;
}
.btn:hover { border-bottom: 1px solid transparent; }

/* Buttons: the brand blue-to-green, like the logo and dividers.
   Primary and secondary share the same look. */
.btn-primary,
.btn-secondary {
  background-image: linear-gradient(90deg, var(--blue), var(--green-deep));
  background-origin: border-box;
  border: 0;
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: 999px;
  padding: 0.8rem 1.9rem;
  box-shadow: 0 2px 10px rgba(0, 71, 254, 0.18);
  transition: filter 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.btn-primary:hover,
.btn-secondary:hover {
  border: 0;
  filter: brightness(1.08) saturate(1.1);
  box-shadow: 0 4px 16px rgba(74, 158, 0, 0.28);
  transform: translateY(-1px);
}


/* ---------- Homepage: everything centered ---------- */

.front-page { text-align: center; }
.front-page .hero h1,
.front-page .section h2,
.front-page .hero p,
.front-page .section p,
.front-page .join-note,
.front-page .post-list-excerpt {
  margin-left: auto;
  margin-right: auto;
}
.front-page .button-row { justify-content: center; }
.front-page .topic-item {
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
.front-page .topic-item dt { flex: none; }

/* ---------- Regular pages (About, etc.) ---------- */

.page-content { max-width: 65ch; }
.page-content p { margin: 0 0 var(--space-2); }
.page-content .page-lead {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.6vw, 1.55rem);
  line-height: 1.35;
  background-image: linear-gradient(90deg, var(--blue), var(--green-deep));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--blue);
  display: inline-block;
  margin-bottom: var(--space-3);
}
/* Each section heading gets the brand squiggle above it, like the homepage dividers. */
.page-content h2,
.section .page-content h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.45rem, 3vw, 1.85rem);
  line-height: 1.25;
  max-width: none;
  margin: var(--space-5) 0 var(--space-3);
  padding-top: calc(30px + var(--space-3));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 30' fill='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='2' y1='15' x2='88' y2='15' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%230047FE'/%3E%3Cstop offset='1' stop-color='%236AFB00'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M2 15C12 2 22 2 32 15C42 28 52 28 62 15C68 6.5 74 6.5 80 15C82.5 18.5 85.5 18.5 88 15' stroke='url(%23g)' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left top / 90px 30px;
}
.section .page-content .page-lead + h2 { margin-top: var(--space-2); }
.page-content ul,
.page-content ol {
  margin: 0 0 var(--space-3);
  padding-left: 1.3rem;
}
.page-content li { margin-bottom: 0.75rem; padding-left: 0.3rem; }
.page-content ul li::marker { color: var(--green-deep); }
.page-content ol li::marker { color: var(--blue); font-family: var(--serif); }
.page-content strong { color: var(--ink); font-weight: 600; }
.page-content .button-row { margin-top: var(--space-4); }

/* Centered pages: any page that opens with the gradient lead line
   ("page-lead", e.g. About) is centered like the homepage. */
main:has(.page-lead) .wrap { text-align: center; }
main:has(.page-lead) .page-content { margin-left: auto; margin-right: auto; }
main:has(.page-lead) .page-content h2 { background-position: center top; }
main:has(.page-lead) .page-content ul,
main:has(.page-lead) .page-content ol {
  list-style-position: inside;
  padding-left: 0;
}
main:has(.page-lead) .page-content li { padding-left: 0; margin-bottom: var(--space-2); }
/* Centered bullet lists read cleaner without dots: label on its own line. */
main:has(.page-lead) .page-content ul { list-style: none; }
main:has(.page-lead) .page-content ul li > strong:first-child { display: block; margin-bottom: 0.15rem; }
main:has(.page-lead) .page-content .button-row { justify-content: center; }

/* ---------- Divider ---------- */

.divider {
  padding: var(--space-2) 0;
  display: flex;
  justify-content: center;
}
.divider svg { width: 90px; height: auto; }

/* ---------- Section ---------- */

.section {
  padding: var(--space-4) 0;
}

.section h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.6rem, 3vw, 2rem);
  margin: 0 0 var(--space-3);
  max-width: 18ch;
}

.section p {
  margin: 0 0 var(--space-2);
  max-width: 65ch;
}

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

/* ---------- Index list (replaces card grid) ---------- */

.topic-list {
  margin-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.topic-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line);
}

.topic-item dt {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--ink);
  flex: 0 0 140px;
}

.topic-item dd {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* ---------- Join / footer ---------- */

.join {
  padding: var(--space-4) 0 var(--space-5);
}

.join-note {
  color: var(--ink-soft);
  margin-bottom: var(--space-3);
  max-width: 55ch;
}

.site-footer {
  padding: var(--space-3) 0 var(--space-4);
  color: var(--grey);
  font-size: 0.85rem;
  text-align: center;
}

/* ---------- Accent moment ---------- */

.accent {
  color: var(--green-deep);
}

/* ---------- Blog: post list (home.php) ---------- */

.post-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.post-list-item {
  display: block;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
}

.post-list-title {
  display: inline-block;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.3rem;
  color: var(--ink);
  margin-bottom: 0.3rem;
}
.post-list-title:hover { border-bottom-color: currentColor; }

.post-list-meta {
  color: var(--grey);
  font-size: 0.85rem;
  margin-bottom: var(--space-1);
}

.post-list-excerpt {
  color: var(--ink-soft);
  max-width: 65ch;
}
.post-list-excerpt p { margin: 0; }

/* ---------- Blog: pagination ---------- */

.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: 0.9rem;
}

.pagination .page-numbers {
  color: var(--ink-soft);
  padding: 0.3rem 0.6rem;
}

.pagination .page-numbers.current {
  color: var(--ink);
  font-weight: 500;
}

.pagination a.page-numbers:hover { border-bottom-color: currentColor; }

/* ---------- Story photos ---------- */

/* Thumbnail above each story in the lists (Latest stories, Stories page). */
.post-list-photo {
  display: block;
  margin-bottom: var(--space-2);
  border-radius: 14px;
  overflow: hidden;
  border-bottom: none;
  aspect-ratio: 16 / 9;
  background: var(--line);
}
.post-list-photo:hover { border-bottom: none; }
.post-list-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.post-list-photo:hover img { transform: scale(1.03); }

/* Main photo at the top of a story. */
.post-single-photo {
  margin: var(--space-3) 0 0;
}
.post-single-photo img,
.post-single-content figure img,
.page-content figure img {
  width: 100%;
  height: auto;
  border-radius: 14px;
}
.post-single-photo figcaption,
.post-single-content figcaption,
.page-content figcaption {
  margin-top: 0.6rem;
  color: var(--grey);
  font-size: 0.85rem;
  font-style: italic;
  text-align: center;
}

/* Photos placed between paragraphs inside a story or page. */
.post-single-content figure,
.page-content figure {
  margin: var(--space-4) 0;
}
.post-single-content .wp-block-image,
.page-content .wp-block-image { max-width: 100%; }

/* ---------- Blog: single post (single.php) ---------- */

.post-single-meta {
  color: var(--grey);
  font-size: 0.9rem;
}

.post-single-content {
  max-width: 65ch;
}
.post-single-content p { margin: 0 0 var(--space-2); }
.post-single-content p:last-child { margin-bottom: 0; }

.post-single-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.post-single-nav-links {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-size: 0.95rem;
}

.post-single-back {
  color: var(--ink-soft);
  font-size: 0.9rem;
}

/* ---------- Responsive ---------- */

@media (max-width: 560px) {
  .site-nav { gap: var(--space-2); font-size: 0.85rem; }
  /* Phones: logo and translate on the first row, Stories/About centered below. */
  .site-header .wrap {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: var(--space-2);
    column-gap: var(--space-1);
  }
  .site-header .brand { grid-column: 1; grid-row: 1; }
  .site-header .site-translate { grid-column: 2; grid-row: 1; }
  .site-header .site-nav { grid-column: 1 / -1; grid-row: 2; justify-self: center; gap: var(--space-4); }
  .brand { font-size: 1rem; gap: 0.4rem; }
  .site-stories { font-size: 1rem; }
  .topic-item { flex-direction: column; gap: 0.25rem; }
  .topic-item dt { flex: none; }
  .post-single-nav-links { flex-direction: column; }
}

/* =========================================================
   WooCommerce overrides — bring the store in line with the
   rest of the site instead of using WooCommerce's defaults.
   ========================================================= */

.woocommerce, .woocommerce-page {
  font-family: var(--sans);
  color: var(--ink);
}

/* Buttons: match .btn-primary everywhere */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-cart .checkout-button,
.woocommerce a.checkout-button {
  background: var(--ink);
  color: var(--bg);
  border-radius: 3px;
  border: none;
  padding: 0.7rem 1.4rem;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 500;
  text-transform: none;
  transition: background 0.15s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background: var(--blue);
  color: #fff;
}

/* Secondary / alt buttons (e.g. "Select options" on variable products can stay same style for simplicity) */

/* Product grid (Shop page) */
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
}
.woocommerce ul.products li.product {
  text-align: left;
}
.woocommerce ul.products li.product img {
  border-radius: 4px;
  margin-bottom: var(--space-1);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0.4rem 0 0.2rem;
}
.woocommerce ul.products li.product .price {
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.woocommerce ul.products li.product .price ins {
  text-decoration: none;
  color: var(--green-deep);
}

/* Single product page */
.woocommerce div.product .product_title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--ink);
  font-size: 1.2rem;
}
.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--ink-soft);
  margin-top: var(--space-2);
}

/* Cart & checkout tables */
.woocommerce table.shop_table {
  border-color: var(--line);
  font-size: 0.95rem;
}
.woocommerce table.shop_table th {
  font-family: var(--serif);
  font-weight: 500;
  border-bottom: 1px solid var(--line);
}
.woocommerce table.shop_table td {
  border-bottom: 1px solid var(--line);
}

/* Forms: cart quantity, checkout fields, my account */
.woocommerce input.qty,
.woocommerce .quantity input {
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0.4rem 0.6rem;
  font-family: var(--sans);
  background: #fff;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-checkout select,
.woocommerce-billing-fields select,
.woocommerce-account .woocommerce-MyAccount-content input.input-text {
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0.6rem 0.8rem;
  font-family: var(--sans);
  background: #fff;
  color: var(--ink);
}
.woocommerce form .form-row label {
  color: var(--ink-soft);
  font-size: 0.9rem;
}

/* Notices / messages */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
  border-top-color: var(--blue);
  background: #fff;
  color: var(--ink);
  font-size: 0.95rem;
  border-radius: 3px;
}
.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--blue);
}
.woocommerce-error {
  border-top-color: var(--green-deep);
}

/* My Account nav */
.woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--line);
}
.woocommerce-MyAccount-navigation li {
  border-bottom: 1px solid var(--line);
}
.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 0.6rem 0;
  color: var(--ink-soft);
}
.woocommerce-MyAccount-navigation li.is-active a {
  color: var(--ink);
  font-weight: 500;
}

/* Shop page heading spacing already handled by archive-product.php wrapper */
.woocommerce-products-header {
  margin-bottom: var(--space-2);
}

/* =========================================================
   Center everything by default
   Guy's rule, 2026-10-04: everything is center justified
   unless noted otherwise. The header keeps its own
   three-column layout (logo left, links center, translate right).
   ========================================================= */

main,
.site-footer { text-align: center; }

/* Blocks with a set width sit in the middle of the page, not the left. */
main .hero h1,
main .hero p,
main .section h2,
main .section p,
main .join-note,
main .post-list-excerpt,
main .post-single-content,
main .page-content {
  margin-left: auto;
  margin-right: auto;
}

/* Rows of buttons and links line up in the center. */
main .button-row,
main .pagination,
main .post-single-nav-links { justify-content: center; }

/* Section squiggles on every page sit centered above their headings. */
main .page-content h2 { background-position: center top; }

/* Lists read cleanly when centered. */
main .page-content ul,
main .page-content ol,
main .post-single-content ul,
main .post-single-content ol {
  list-style-position: inside;
  padding-left: 0;
}
main .page-content li,
main .post-single-content li { padding-left: 0; }

/* Two-column topic list stacks into a centered column. */
main .topic-item {
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}
main .topic-item dt { flex: none; }

/* Store product cards follow the same rule. */
body .woocommerce ul.products li.product { text-align: center; }

/* Typing in form fields still runs left to right. */
main input,
main textarea,
main select { text-align: left; }