/* Brightnous Blog — public site theme

   Light paper background, teal accents, Lora headings, Inter text. No build step. */



:root {

  --bg: #f8f6f1;

  --surface: #ffffff;

  --ink: #1b2420;

  --text: #39433e;

  --muted: #7a827e;

  --line: #e6e2d8;

  --brand: #0b6e5c;

  --brand-dark: #0e3b32;

  --brand-soft: #e3efe9;

  --serif: "Lora", Georgia, "Times New Roman", serif;

  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius: 14px;

  --shadow: 0 1px 2px rgba(27, 36, 32, .04), 0 8px 24px rgba(27, 36, 32, .06);

}



*,

*::before,

*::after {

  box-sizing: border-box;

}



html {

  -webkit-text-size-adjust: 100%;

  scroll-behavior: smooth;

}



body {

  margin: 0;

  background: var(--bg);

  color: var(--text);

  font: 16px/1.6 var(--sans);

  -webkit-font-smoothing: antialiased;

}



img {

  max-width: 100%;

  height: auto;

  display: block;

}



a {

  color: inherit;

  text-decoration: none;

}



button,

input,

textarea {

  font: inherit;

  color: inherit;

}



h1,

h2,

h3,

h4 {

  font-family: var(--serif);

  color: var(--ink);

  font-weight: 600;

  margin: 0;

  line-height: 1.25;

}



p {

  margin: 0;

}



.wrap {

  width: 100%;

  max-width: 1240px;

  margin: 0 auto;

  padding: 0 32px;

}



.sr-only {

  position: absolute;

  width: 1px;

  height: 1px;

  overflow: hidden;

  clip: rect(0 0 0 0);

  white-space: nowrap;

}



.skip {

  position: absolute;

  left: -999px;

  top: 8px;

  background: var(--ink);

  color: #fff;

  padding: 8px 14px;

  z-index: 60;

  border-radius: 6px;

}



.skip:focus {

  left: 8px;

}



.hp {

  position: absolute;

  left: -9999px;

}



:focus-visible {

  outline: 2px solid var(--brand);

  outline-offset: 2px;

}



.ic {

  fill: none;

  stroke: currentColor;

  stroke-width: 1.8;

  stroke-linecap: round;

  stroke-linejoin: round;

  flex: none;

}



.ic-fill {

  fill: currentColor;

  stroke: none;

}



/* ---------- Typography & Utility Elements ---------- */

.eyebrow {

  font: 600 11.5px/1 var(--sans);

  letter-spacing: .16em;

  text-transform: uppercase;

  color: var(--brand);

  margin-bottom: 12px;

}



.cat {

  display: inline-block;

  font: 600 11px/1.2 var(--sans);

  letter-spacing: .12em;

  text-transform: uppercase;

  color: var(--brand);

  margin-bottom: 8px;

}



.more {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  font: 600 13.5px var(--sans);

  color: var(--brand);

  white-space: nowrap;

}



.more span {

  transition: transform .2s;

}



.more:hover span {

  transform: translateX(3px);

}



.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  background: var(--brand-dark);

  color: #fff;

  border: 0;

  border-radius: 10px;

  padding: 12px 22px;

  font: 600 13px var(--sans);

  letter-spacing: .08em;

  text-transform: uppercase;

  cursor: pointer;

  transition: background .2s;

}



.btn:hover {

  background: var(--brand);

}



.round {

  width: 42px;

  height: 42px;

  border-radius: 50%;

  border: 1px solid var(--line);

  background: var(--surface);

  display: inline-grid;

  place-items: center;

  cursor: pointer;

  color: var(--ink);

  transition: border-color .2s, color .2s;

}



.round:hover {

  border-color: var(--brand);

  color: var(--brand);

}



.pills {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-bottom: 16px;

}



.pill {

  display: inline-block;

  background: var(--brand);

  color: #fff;

  border: 1px solid var(--brand);

  border-radius: 999px;

  padding: 5px 12px;

  font: 600 10.5px/1.2 var(--sans);

  letter-spacing: .14em;

  text-transform: uppercase;

}



.pill.ghost {

  background: transparent;

  border-color: rgba(255, 255, 255, .75);

  color: #fff;

}



.pill.soft {

  background: var(--brand-soft);

  border-color: var(--brand-soft);

  color: var(--brand);

}



.empty {

  text-align: center;

  color: var(--muted);

  padding: 80px 0;

}



/* ---------- Avatars ---------- */

.av {

  display: inline-grid;

  place-items: center;

  border-radius: 50%;

  background: var(--brand-soft);

  color: var(--brand);

  font: 600 13px var(--sans);

  overflow: hidden;

  width: 40px;

  height: 40px;

  flex: none;

}



.av img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.av.sm {

  width: 26px;

  height: 26px;

  font-size: 10px;

}



.av.lg {

  width: 72px;

  height: 72px;

  font-size: 22px;

}



.av.xl {

  width: 96px;

  height: 96px;

  font-size: 30px;

}



/* ---------- Byline Row ---------- */

.meta {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 6px 10px;

  font-size: 13px;

  color: var(--muted);

}



.meta .who {

  color: var(--ink);

  font-weight: 500;

}



.meta .who a:hover {

  color: var(--brand);

}



.meta .sep {

  width: 1px;

  height: 12px;

  background: var(--line);

}



.meta .mins {

  display: inline-flex;

  align-items: center;

  gap: 5px;

}



.meta.stack {

  flex-wrap: nowrap;

  gap: 10px;

}



.meta.stack .av {

  width: 32px;

  height: 32px;

  font-size: 11px;

}



.meta.stack .who {

  display: block;

  line-height: 1.3;

}



.meta.stack .sub {

  display: flex;

  align-items: center;

  gap: 6px;

  font-size: 12.5px;

  line-height: 1.4;

}



.meta.light {

  color: rgba(255, 255, 255, .8);

}



.meta.light .who {

  color: #fff;

}



.meta.light .sep {

  background: rgba(255, 255, 255, .35);

}



.meta.light .av {

  background: rgba(255, 255, 255, .2);

  color: #fff;

}



/* ---------- Covers & Image Containers ---------- */

.pic,

.thumb,

.slide-pic {

  display: block;

  position: relative;

  width: 100%;

  overflow: hidden;

  background: var(--brand-soft);

}



.pic img,

.thumb img,

.slide-pic img {

  width: 100% !important;

  height: 100% !important;

  object-fit: cover;

  display: block;

  transition: transform .5s ease;

}



.typo {

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  gap: 8px;

  width: 100%;

  height: 100%;

  padding: 22px;

  background: linear-gradient(135deg, var(--brand-dark), var(--brand));

  color: #fff;

}



.typo span {

  font: 600 10px var(--sans);

  letter-spacing: .16em;

  text-transform: uppercase;

  opacity: .75;

}



.typo b {

  font: 600 20px/1.3 var(--serif);

}



.thumb .typo {

  padding: 8px;

}



.thumb .typo b {

  display: none;

}



.thumb .typo span {

  font-size: 8px;

}



/* ---------- Top Bar ---------- */

.topbar {

  background: var(--brand-dark);

  color: rgba(255, 255, 255, .78);

  font-size: 12.5px;

}



.topbar .wrap {

  display: flex;

  justify-content: space-between;

  align-items: center;

  min-height: 38px;

}



.social {

  display: flex;

  gap: 6px;

  align-items: center;

}



.topbar .social a {

  width: 28px;

  height: 28px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  transition: background .2s, color .2s;

}



.topbar .social a:hover {

  background: rgba(255, 255, 255, .12);

  color: #fff;

}



/* ---------- Header ---------- */

.head {

  background: var(--surface);

  border-bottom: 1px solid var(--line);

  position: sticky;

  top: 0;

  z-index: 40;

}



.head > .wrap {

  display: flex;

  align-items: center;

  gap: 32px;

  min-height: 92px;

}



.brand {

  display: flex;

  flex-direction: column;

  gap: 4px;

  flex: none;

}



.brand img {

  height: 46px;

  width: auto;

  max-width: 100%;

  align-self: flex-start;   /* stops the flex column from stretching it */

  object-fit: contain;

  mix-blend-mode: multiply;

}

.brand-text {

  font: 600 28px/1 var(--serif);

  color: var(--ink);

}



.brand em {

  font: italic 13.5px var(--serif);

  color: var(--muted);

}



.nav {

  margin-left: auto;

}



.nav ul {

  display: flex;

  gap: 30px;

  list-style: none;

  margin: 0;

  padding: 0;

}



.nav a {

  display: block;

  position: relative;

  padding: 10px 0;

  font: 600 12.5px var(--sans);

  letter-spacing: .12em;

  text-transform: uppercase;

  color: var(--ink);

  transition: color .2s;

}



.nav a::after {

  content: "";

  position: absolute;

  left: 0;

  right: 0;

  bottom: 2px;

  height: 2px;

  background: var(--brand);

  border-radius: 2px;

  transform: scaleX(0);

  transition: transform .25s;

}



.nav a:hover,

.nav a.on {

  color: var(--brand);

}



.nav a.on::after,

.nav a:hover::after {

  transform: scaleX(1);

}



.head-tools {

  display: flex;

  gap: 8px;

}



.menu-btn {

  display: none;

}



.search-panel {

  border-top: 1px solid var(--line);

  background: var(--surface);

  padding: 16px 0;

}



.search-panel form {

  display: flex;

  align-items: center;

  gap: 12px;

  color: var(--muted);

}



.search-panel input {

  flex: 1;

  min-width: 0;

  border: 0;

  background: transparent;

  font: 400 20px var(--serif);

  color: var(--ink);

  padding: 8px 0;

  outline: none;

}



.search-panel input::placeholder {

  color: #a6aca9;

}



/* ---------- Home: Lead & Hero Section ---------- */

.lead {

  display: grid;

  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);

  gap: 40px;

  padding: 40px 0 16px;

  align-items: stretch;

}



.hero {

  position: relative;

  border-radius: 18px;

  overflow: hidden;

  height: 560px;

  min-height: 560px;

  background: var(--brand-dark);

  box-shadow: var(--shadow);

}



.slide {

  position: absolute;

  inset: 0;

  opacity: 0;

  visibility: hidden;

  transition: opacity .7s ease, visibility .7s;

}



.slide.on {

  opacity: 1;

  visibility: visible;

}



.slide-pic {

  position: absolute;

  inset: 0;

  height: 100%;

  z-index: 1;

}



.slide-pic img {

  object-fit: cover;

  object-position: center;

}



.slide-pic::after {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(

    180deg, 

    rgba(10, 24, 20, 0.05) 15%, 

    rgba(10, 24, 20, .55) 55%, 

    rgba(10, 24, 20, .92) 100%

  );

  z-index: 2;

  pointer-events: none;

}



.slide-pic .typo {

  justify-content: center;

}



.slide-pic .typo b,

.slide-pic .typo span {

  display: none;

}



.slide.on .slide-pic img {

  animation: kenburns 9s ease-out both;

}



@keyframes kenburns {

  from {

    transform: scale(1.06);

  }

  to {

    transform: scale(1);

  }

}



.slide-txt {

  position: absolute;

  left: 0;

  right: 0;

  bottom: 0;

  padding: 40px 150px 40px 44px;

  color: rgba(255, 255, 255, .86);

  z-index: 3;

}



.slide-txt h1,

.slide-txt h2 {

  color: #fff;

  font-size: clamp(28px, 3.1vw, 42px);

  line-height: 1.16;

  margin-bottom: 14px;

  letter-spacing: -.01em;

}



.slide-txt h1 a:hover,

.slide-txt h2 a:hover {

  text-decoration: underline;

  text-decoration-thickness: 1px;

  text-underline-offset: 6px;

}



.slide-txt p {

  font-size: 16px;

  line-height: 1.6;

  margin-bottom: 20px;

  max-width: 600px;

}



.hero-ctl {

  position: absolute;

  right: 32px;

  bottom: 40px;

  display: flex;

  align-items: center;

  gap: 10px;

  z-index: 4;

}



.dots {

  display: flex;

  gap: 6px;

  margin-right: 8px;

}



.dots button {

  width: 8px;

  height: 8px;

  border-radius: 99px;

  border: 0;

  padding: 0;

  background: rgba(255, 255, 255, .45);

  cursor: pointer;

  transition: width .3s, background .3s;

}



.dots button.on {

  width: 22px;

  background: #fff;

}



.arrow {

  width: 44px;

  height: 44px;

  border-radius: 50%;

  border: 1px solid rgba(255, 255, 255, .55);

  background: rgba(255, 255, 255, .08);

  color: #fff;

  display: grid;

  place-items: center;

  cursor: pointer;

  backdrop-filter: blur(4px);

  transition: background .2s, color .2s;

}



.arrow:hover {

  background: #fff;

  color: var(--ink);

}



/* ---------- Home: Latest Sidebar ---------- */

.latest {

  display: flex;

  flex-direction: column;

}



.latest-h {

  display: flex;

  justify-content: space-between;

  align-items: baseline;

  padding-bottom: 14px;

  border-bottom: 1px solid var(--line);

  margin-bottom: 4px;

}



.latest-h h2 {

  font-size: 26px;

}



.latest ol {

  list-style: none;

  margin: 0;

  padding: 0;

}



.latest li {

  display: grid;

  grid-template-columns: 28px 84px minmax(0, 1fr);

  gap: 16px;

  align-items: center;

  padding: 16px 0;

  border-bottom: 1px solid var(--line);

}



.latest li:last-child {

  border-bottom: 0;

}



.latest .num {

  font: 500 22px var(--serif);

  color: #b9beba;

}



.latest .thumb {

  width: 84px;

  height: 68px;

  flex-shrink: 0;

  border-radius: 10px;

}



.latest .cat {

  margin-bottom: 4px;

  font-size: 10.5px;

}



.latest h3 {

  font-size: 16.5px;

  line-height: 1.35;

  margin-bottom: 5px;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

}



.latest h3 a:hover {

  color: var(--brand);

}



.mini {

  font-size: 12.5px;

  color: var(--muted);

}



.latest li:hover .thumb img {

  transform: scale(1.06);

}



/* ---------- Sections & Post Grids ---------- */

.block {

  padding: 48px 0 8px;

}



.sec-h {

  display: flex;

  align-items: center;

  gap: 24px;

  margin-bottom: 28px;

}



.sec-h h2 {

  font-size: 34px;

  letter-spacing: -.01em;

}



.sec-h .rule {

  flex: 1;

  height: 1px;

  background: var(--line);

}



.grid3 {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 30px;

  align-items: stretch;

}



.grid2 {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 30px;

  align-items: stretch;

}



.card {

  display: flex;

  flex-direction: column;

  background: var(--surface);

  border: 1px solid var(--line);

  border-radius: var(--radius);

  overflow: hidden;

  height: 100%;

  transition: transform .25s, box-shadow .25s;

}



.card:hover,

.hcard:hover {

  transform: translateY(-3px);

  box-shadow: var(--shadow);

}



.card:hover .pic img,

.hcard:hover .pic img {

  transform: scale(1.05);

}



.card .pic {

  aspect-ratio: 16 / 10;

  height: 220px;

  flex-shrink: 0;

}



.card-b {

  padding: 22px 24px 24px;

  display: flex;

  flex-direction: column;

  flex: 1;

}



.card h3,

.hcard h3 {

  font-size: 21px;

  line-height: 1.3;

  margin-bottom: 10px;

}



.card h3 a:hover,

.hcard h3 a:hover {

  color: var(--brand);

}



.card p,

.hcard p {

  font-size: 14.5px;

  line-height: 1.65;

  color: var(--text);

  margin-bottom: 18px;

}



.card .meta,

.hcard .meta {

  margin-top: auto;

  padding-top: 16px;

  border-top: 1px solid var(--line);

}



.hcard {

  display: grid;

  grid-template-columns: 240px minmax(0, 1fr);

  background: var(--surface);

  border: 1px solid var(--line);

  border-radius: var(--radius);

  overflow: hidden;

  height: 100%;

  transition: transform .25s, box-shadow .25s;

}



.hcard .pic {

  height: 100%;

  min-height: 100%;

}



.hcard .card-b {

  padding: 24px;

}



/* ---------- Newsletter ---------- */

.news {

  padding: 64px 0 72px;

}



.news-box {

  position: relative;

  overflow: hidden;

  background: var(--brand-soft);

  border-radius: 22px;

  padding: 64px 32px;

  text-align: center;

}



.news-box > * {

  position: relative;

  z-index: 1;

}



.news-box h2 {

  font-size: clamp(28px, 3.2vw, 40px);

  margin-bottom: 12px;

  letter-spacing: -.01em;

}



.news-box p {

  max-width: 520px;

  margin: 0 auto 28px;

  color: var(--text);

}



.news-box form {

  display: flex;

  gap: 10px;

  max-width: 520px;

  margin: 0 auto;

  background: var(--surface);

  border: 1px solid var(--line);

  border-radius: 14px;

  padding: 6px;

}



.news-box input[type=email] {

  flex: 1;

  min-width: 0;

  border: 0;

  padding: 12px 14px;

  background: transparent;

  outline: none;

}



.news-box button {

  background: var(--brand-dark);

  color: #fff;

  border: 0;

  border-radius: 10px;

  padding: 0 24px;

  font: 600 12.5px var(--sans);

  letter-spacing: .12em;

  text-transform: uppercase;

  cursor: pointer;

  transition: background .2s;

}



.news-box button:hover {

  background: var(--brand);

}



.news-box .ok {

  display: inline-block;

  background: var(--surface);

  color: var(--brand);

  padding: 12px 22px;

  border-radius: 12px;

  font-weight: 600;

}



.news-box .err {

  color: #b42318;

  font-size: 14px;

  margin-top: 10px;

}



.leaf {

  position: absolute;

  z-index: 0 !important;

  width: 230px;

  height: 230px;

  color: var(--brand);

  opacity: .55;

  pointer-events: none;

}



.leaf-l {

  left: -40px;

  bottom: -50px;

}



.leaf-r {

  right: -40px;

  top: -50px;

  transform: rotate(180deg) scaleX(-1);

}



/* ---------- Footer ---------- */

.foot {

  background: var(--brand-dark);

  color: rgba(255, 255, 255, .7);

  font-size: 14.5px;

}



.foot .cols {

  display: grid;

  grid-template-columns: 1.6fr 1fr 1fr;

  gap: 48px;

  padding: 64px 0 48px;

}



.flogo {

  display: inline-block;

  margin-bottom: 18px;

}



.flogo img {

  height: 54px;

  width: auto;

  filter: grayscale(1) invert(1) contrast(4);

  mix-blend-mode: screen;

}



.flogo .brand-text {

  color: #fff;

}



.foot-about p {

  max-width: 380px;

  line-height: 1.7;

  margin-bottom: 22px;

}



.foot .social a {

  width: 36px;

  height: 36px;

  border-radius: 50%;

  border: 1px solid rgba(255, 255, 255, .22);

  display: grid;

  place-items: center;

  color: #fff;

  transition: background .2s, color .2s;

}



.foot .social a:hover {

  background: #fff;

  color: var(--brand-dark);

}



.foot h5 {

  margin: 0 0 18px;

  font: 600 12px var(--sans);

  letter-spacing: .16em;

  text-transform: uppercase;

  color: #fff;

}



.foot ul {

  list-style: none;

  margin: 0;

  padding: 0;

  display: grid;

  gap: 10px;

}



.foot ul a:hover {

  color: #fff;

}



.copy {

  display: flex;

  justify-content: space-between;

  gap: 16px;

  flex-wrap: wrap;

  border-top: 1px solid rgba(255, 255, 255, .12);

  padding: 22px 0;

  font-size: 13px;

  color: rgba(255, 255, 255, .55);

}



/* ---------- Page Header Band (Archives, Pages) ---------- */

.phead {

  background: var(--surface);

  border-bottom: 1px solid var(--line);

  padding: 36px 0 44px;

}



.crumbs {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  font-size: 13px;

  color: var(--muted);

  margin-bottom: 22px;

}



.crumbs a:hover {

  color: var(--brand);

}



.crumbs span:last-child {

  color: var(--ink);

}



.phead h1 {

  font-size: clamp(32px, 4vw, 48px);

  letter-spacing: -.015em;

  margin-bottom: 12px;

}



.phead p {

  max-width: 640px;

  font-size: 17px;

  color: var(--text);

}



.phead-row {

  display: flex;

  align-items: center;

  gap: 28px;

}



.count {

  margin-top: 14px;

  font-size: 13px;

  color: var(--muted);

}



.big-search {

  display: flex;

  align-items: center;

  gap: 12px;

  max-width: 640px;

  margin-top: 26px;

  background: var(--bg);

  border: 1px solid var(--line);

  border-radius: 14px;

  padding: 6px 6px 6px 18px;

  color: var(--muted);

}



.big-search input {

  flex: 1;

  min-width: 0;

  border: 0;

  background: transparent;

  padding: 10px 0;

  outline: none;

  color: var(--ink);

  font-size: 16px;

}



.empty-box,

.center-box {

  text-align: center;

  max-width: 560px;

  margin: 0 auto;

  padding: 40px 0;

}



.empty-box h2 {

  font-size: 28px;

  margin-bottom: 10px;

}



.empty-box p {

  color: var(--muted);

  margin-bottom: 24px;

}



.center-box {

  padding: 90px 0 40px;

}



.center-box h1 {

  font-size: clamp(30px, 4vw, 44px);

  margin-bottom: 14px;

}



.center-box p {

  color: var(--text);

  margin-bottom: 26px;

  font-size: 17px;

}



.center-box .big-search {

  margin: 0 auto 28px;

  text-align: left;

  background: var(--surface);

}



.big-num {

  font: 600 120px/1 var(--serif);

  color: var(--brand-soft);

  -webkit-text-stroke: 1px var(--brand);

  margin-bottom: 16px;

}



/* ---------- Pagination ---------- */

.pager {

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: 8px;

  margin: 48px 0 0;

}



.pager a,

.pager span {

  min-width: 42px;

  height: 42px;

  display: grid;

  place-items: center;

  padding: 0 12px;

  border-radius: 10px;

  border: 1px solid var(--line);

  background: var(--surface);

  font-size: 14px;

  font-weight: 500;

}



.pager a:hover {

  border-color: var(--brand);

  color: var(--brand);

}



.pager .on {

  background: var(--brand-dark);

  border-color: var(--brand-dark);

  color: #fff;

}



.pager .off {

  color: #b9beba;

}



/* ---------- Categories Page ---------- */

.cat-grid {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 24px;

}



.cat-card {

  display: flex;

  flex-direction: column;

  background: var(--surface);

  border: 1px solid var(--line);

  border-radius: var(--radius);

  padding: 28px;

  transition: transform .25s, box-shadow .25s, border-color .25s;

}



.cat-card:hover {

  transform: translateY(-3px);

  box-shadow: var(--shadow);

  border-color: var(--brand-soft);

}



.cat-n {

  font: 500 15px var(--serif);

  color: var(--brand);

  margin-bottom: 18px;

}



.cat-card h2 {

  font-size: 26px;

  margin-bottom: 10px;

}



.cat-card p {

  font-size: 14.5px;

  color: var(--text);

  margin-bottom: 18px;

}



.cat-f {

  margin-top: auto;

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding-top: 16px;

  border-top: 1px solid var(--line);

  font-size: 13px;

  color: var(--muted);

}



/* ---------- Article Detail Page ---------- */

.preview-bar {

  background: #fef3c7;

  color: #92400e;

  text-align: center;

  padding: 10px;

  font-size: 14px;

}



.preview-bar a {

  text-decoration: underline;

  font-weight: 600;

}



.art-h {

  padding: 36px 0 32px;

}



.art-h .wrap {

  max-width: 900px;

}



.art-h h1 {

  font-size: clamp(32px, 4.4vw, 52px);

  line-height: 1.14;

  letter-spacing: -.02em;

  margin-bottom: 18px;

}



.art-h .dek {

  font: italic 20px/1.55 var(--serif);

  color: var(--text);

  margin-bottom: 24px;

}



.art-h .meta {

  font-size: 14px;

}



.art-h .meta .av {

  width: 34px;

  height: 34px;

  font-size: 12px;

}



.art-cover {

  margin: 0 auto;

}



.art-cover img {

  width: 100% !important;

  max-height: 600px;

  object-fit: cover;

  border-radius: 18px;

}



.art-cover figcaption {

  text-align: center;

  font: italic 14px var(--serif);

  color: var(--muted);

  margin-top: 10px;

}



.art-grid {

  display: grid;

  grid-template-columns: minmax(0, 1fr) 300px;

  gap: 64px;

  padding-top: 48px;

  padding-bottom: 24px;

  align-items: start;

}



.art-main {

  max-width: 740px;

  width: 100%;

  justify-self: center;

}



.art-side {

  position: sticky;

  top: 116px;

  display: grid;

  gap: 20px;

}



.side-card {

  background: var(--surface);

  border: 1px solid var(--line);

  border-radius: var(--radius);

  padding: 22px;

}



.side-card h3 {

  font: 600 11.5px var(--sans);

  letter-spacing: .16em;

  text-transform: uppercase;

  color: var(--ink);

  margin-bottom: 14px;

}



.toc ol,

.toc-m ol {

  list-style: none;

  margin: 0;

  padding: 0;

  display: grid;

  gap: 2px;

}



.toc a,

.toc-m a {

  display: block;

  padding: 6px 0 6px 12px;

  border-left: 2px solid var(--line);

  font-size: 14px;

  line-height: 1.45;

  color: var(--text);

  transition: color .2s, border-color .2s;

}



.toc a:hover,

.toc a.on {

  color: var(--brand);

  border-color: var(--brand);

}



.toc .l3 a,

.toc-m .l3 a {

  padding-left: 24px;

  font-size: 13.5px;

}



.toc .l4 a,

.toc-m .l4 a {

  padding-left: 36px;

  font-size: 13px;

}



.toc {

  max-height: calc(100vh - 380px);

  overflow-y: auto;

}



.toc-m {

  display: none;

  background: var(--surface);

  border: 1px solid var(--line);

  border-radius: 12px;

  padding: 14px 18px;

  margin-bottom: 28px;

}



.toc-m summary {

  cursor: pointer;

  font: 600 12px var(--sans);

  letter-spacing: .14em;

  text-transform: uppercase;

  color: var(--ink);

}



.toc-m[open] summary {

  margin-bottom: 12px;

}



.share {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

}



.share a,

.share button {

  width: 38px;

  height: 38px;

  border-radius: 50%;

  border: 1px solid var(--line);

  background: var(--surface);

  color: var(--ink);

  display: grid;

  place-items: center;

  cursor: pointer;

  padding: 0;

  transition: background .2s, color .2s, border-color .2s;

}



.share a:hover,

.share button:hover {

  background: var(--brand);

  border-color: var(--brand);

  color: #fff;

}



.mini-post {

  display: grid;

  grid-template-columns: 64px 1fr;

  gap: 12px;

  align-items: center;

  padding: 12px 0;

  border-top: 1px solid var(--line);

}



.mini-post:first-of-type {

  border-top: 0;

  padding-top: 0;

}



.mini-post .thumb {

  width: 64px;

  height: 52px;

  border-radius: 8px;

}



.mini-post .cat {

  font-size: 10px;

  margin-bottom: 3px;

  display: block;

}



.mini-post b {

  font: 600 14px/1.35 var(--serif);

  color: var(--ink);

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

}



.mini-post:hover b {

  color: var(--brand);

}



/* ---------- Single Post Prose Formatting ---------- */

.prose {

  font: 17.5px/1.85 var(--sans);

  color: #333d38;

  overflow-wrap: break-word;

}



.prose > * {

  margin: 0 0 24px;

}



.prose h2,

.prose h3,

.prose h4 {

  scroll-margin-top: 120px;

  line-height: 1.3;

  letter-spacing: -.01em;

}



.prose h2 {

  font-size: 30px;

  margin: 48px 0 16px;

}



.prose h3 {

  font-size: 23px;

  margin: 36px 0 12px;

}



.prose h4 {

  font-size: 19px;

  margin: 28px 0 10px;

}



.prose strong,

.prose b {

  color: var(--ink);

  font-weight: 600;

}



.prose a {

  color: var(--brand);

  text-decoration: underline;

  text-underline-offset: 3px;

  text-decoration-thickness: 1px;

}



.prose ul,

.prose ol {

  padding-left: 24px;

}



.prose li {

  margin-bottom: 8px;

}



.prose li::marker {

  color: var(--brand);

}



.prose li > ul,

.prose li > ol {

  margin-top: 8px;

}



.prose blockquote {

  position: relative;

  background: var(--brand-soft);

  border-radius: 14px;

  padding: 26px 28px 26px 34px;

  margin: 34px 0;

  font: italic 21px/1.6 var(--serif);

  color: var(--ink);

  border-left: 4px solid var(--brand);

}



.prose blockquote p {

  margin: 0 0 10px;

}



.prose blockquote p:last-child {

  margin: 0;

}



.prose figure {

  margin: 34px 0;

}



.prose img {

  border-radius: 12px;

  margin-inline: auto;

}



.prose figcaption {

  font: italic 14px var(--serif);

  color: var(--muted);

  text-align: center;

  margin-top: 10px;

}



.prose hr {

  border: 0;

  height: 1px;

  background: var(--line);

  margin: 44px 0;

}



.prose pre {

  background: #14201c;

  color: #e8efe9;

  padding: 20px 22px;

  border-radius: 12px;

  overflow-x: auto;

  font: 14px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  white-space: pre;

}



.prose code {

  font: .86em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  background: var(--brand-soft);

  color: var(--brand-dark);

  padding: 2px 6px;

  border-radius: 5px;

}



.prose pre code {

  background: none;

  padding: 0;

  color: inherit;

}



.prose table {

  width: 100%;

  border-collapse: collapse;

  font-size: 15px;

  line-height: 1.5;

  display: block;

  overflow-x: auto;

}



.prose th,

.prose td {

  border: 1px solid var(--line);

  padding: 10px 14px;

  text-align: left;

}



.prose th {

  background: var(--brand-soft);

  color: var(--ink);

}



.prose iframe {

  width: 100%;

  aspect-ratio: 16 / 9;

  height: auto;

  border: 0;

  border-radius: 12px;

}



.prose .wp-block-columns {

  display: flex;

  gap: 24px;

}



.prose .wp-block-columns > * {

  flex: 1;

  min-width: 0;

}



.prose .wp-block-file {

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 14px 18px;

  border: 1px solid var(--line);

  background: var(--surface);

  font-size: 15px;

  border-radius: 12px;

}



.prose .wp-block-file a:last-child {

  margin-left: auto;

  background: var(--brand);

  color: #fff;

  text-decoration: none;

  padding: 6px 14px;

  border-radius: 8px;

  font-size: 13px;

}



.prose .has-text-align-center,

.prose .aligncenter {

  text-align: center;

}



.prose.small {

  font-size: 15.5px;

  margin-bottom: 22px;

}



.post-tags {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 8px;

  margin: 36px 0 0;

}



.post-tags span {

  font: 600 11.5px var(--sans);

  letter-spacing: .14em;

  text-transform: uppercase;

  color: var(--muted);

  margin-right: 6px;

}



.post-tags a {

  background: var(--surface);

  border: 1px solid var(--line);

  border-radius: 999px;

  padding: 6px 14px;

  font-size: 13px;

  transition: border-color .2s, color .2s;

}



.post-tags a:hover {

  border-color: var(--brand);

  color: var(--brand);

}



.share-row {

  display: none;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  flex-wrap: wrap;

  margin-top: 28px;

  padding: 18px 0;

  border-top: 1px solid var(--line);

  border-bottom: 1px solid var(--line);

}



.share-row > span {

  font: 600 12px var(--sans);

  letter-spacing: .14em;

  text-transform: uppercase;

  color: var(--ink);

}



.author-box {

  display: flex;

  gap: 22px;

  margin-top: 40px;

  background: var(--surface);

  border: 1px solid var(--line);

  border-radius: var(--radius);

  padding: 28px;

}



.author-box .eyebrow {

  margin-bottom: 6px;

}



.author-box h4 {

  font-size: 22px;

  margin-bottom: 4px;

}



.author-box h4 a:hover {

  color: var(--brand);

}



.author-box .role {

  font-size: 13px;

  color: var(--muted);

  margin-bottom: 8px;

}



.author-box p {

  font-size: 15px;

  margin: 6px 0 12px;

}



.prevnext {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 20px;

  margin-top: 28px;

}



.prevnext a {

  display: block;

  background: var(--surface);

  border: 1px solid var(--line);

  border-radius: var(--radius);

  padding: 20px 22px;

  transition: border-color .2s, box-shadow .2s;

}



.prevnext a:hover {

  border-color: var(--brand);

  box-shadow: var(--shadow);

}



.prevnext .next {

  text-align: right;

  grid-column: 2;

}



.prevnext small {

  display: block;

  font: 600 11px var(--sans);

  letter-spacing: .14em;

  text-transform: uppercase;

  color: var(--brand);

  margin-bottom: 8px;

}



.prevnext b {

  font: 600 17px/1.35 var(--serif);

  color: var(--ink);

}



/* ---------- Static Pages & Contact ---------- */

.page-body {

  max-width: 760px;

  margin: 0 auto;

}



.contact {

  display: grid;

  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);

  gap: 32px;

  align-items: start;

}



.card-box {

  background: var(--surface);

  border: 1px solid var(--line);

  border-radius: 18px;

  padding: 36px;

}



.card-box h2 {

  font-size: 28px;

  margin-bottom: 14px;

}



.contact-info {

  background: var(--brand-dark);

  color: rgba(255, 255, 255, .78);

  border-radius: 18px;

  padding: 36px;

}



.contact-info .eyebrow {

  color: #9fd2c3;

}



.contact-info h3 {

  color: #fff;

  font-size: 26px;

  margin-bottom: 12px;

}



.contact-info p {

  margin-bottom: 24px;

  line-height: 1.7;

}



.contact-info ul {

  list-style: none;

  margin: 0 0 26px;

  padding: 0;

  display: grid;

  gap: 14px;

}



.contact-info li {

  display: flex;

  align-items: center;

  gap: 12px;

  color: #fff;

}



.contact-info li a:hover {

  text-decoration: underline;

}



.contact-info .social a {

  width: 38px;

  height: 38px;

  border-radius: 50%;

  border: 1px solid rgba(255, 255, 255, .25);

  display: grid;

  place-items: center;

  color: #fff;

}



.contact-info .social a:hover {

  background: #fff;

  color: var(--brand-dark);

}



.form {

  display: grid;

  gap: 18px;

}



.form .row2 {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 18px;

}



.form label {

  display: block;

  font-size: 13.5px;

  font-weight: 600;

  color: var(--ink);

  margin-bottom: 7px;

}



.form .opt {

  font-weight: 400;

  color: var(--muted);

}



.form input,

.form textarea {

  width: 100%;

  border: 1px solid var(--line);

  background: var(--bg);

  border-radius: 10px;

  padding: 12px 14px;

  outline: none;

  transition: border-color .2s, background .2s;

}



.form input:focus,

.form textarea:focus {

  border-color: var(--brand);

  background: var(--surface);

}



.form textarea {

  min-height: 170px;

  resize: vertical;

}



.err {

  color: #b42318;

  font-size: 13px;

  margin-top: 6px;

}



.notice {

  background: var(--brand-soft);

  color: var(--brand-dark);

  border-radius: 12px;

  padding: 16px 20px;

  font-weight: 500;

}



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

@media (max-width: 1100px) {

  .nav ul {

    gap: 20px;

  }



  .lead {

    grid-template-columns: 1fr;

  }



  .hero {

    height: 480px;

    min-height: 480px;

  }



  .art-grid {

    grid-template-columns: minmax(0, 1fr) 260px;

    gap: 40px;

  }

}



@media (max-width: 900px) {

  .wrap {

    padding: 0 20px;

  }



  .head > .wrap {

    min-height: 72px;

    gap: 16px;

  }



  .brand img {

    height: 38px;

  }



  .brand em {

    display: none;

  }



  .head-tools {

    margin-left: auto;

  }



  .menu-btn {

    display: inline-grid;

  }



  .nav {

    position: absolute;

    left: 0;

    right: 0;

    top: 100%;

    background: var(--surface);

    border-bottom: 1px solid var(--line);

    box-shadow: var(--shadow);

    display: none;

  }



  .nav.open {

    display: block;

  }



  .nav ul {

    flex-direction: column;

    gap: 0;

    padding: 8px 20px 16px;

  }



  .nav li + li {

    border-top: 1px solid var(--line);

  }



  .nav a {

    padding: 14px 0;

  }



  .nav a::after {

    display: none;

  }



  .grid3,

  .cat-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 22px;

  }



  .grid2 {

    grid-template-columns: 1fr;

  }



  .art-grid {

    grid-template-columns: 1fr;

    padding-top: 32px;

  }



  .art-side {

    position: static;

  }



  .art-side .toc,

  .art-side .side-share {

    display: none;

  }



  .toc-m {

    display: block;

  }



  .share-row {

    display: flex;

  }



  .contact {

    grid-template-columns: 1fr;

  }



  .foot .cols {

    grid-template-columns: 1fr 1fr;

    gap: 36px;

  }



  .foot-about {

    grid-column: 1 / -1;

  }

}



@media (max-width: 640px) {

  body {

    font-size: 15.5px;

  }



  .topbar .wrap {

    min-height: 34px;

    font-size: 12px;

  }



  .lead {

    padding-top: 20px;

    gap: 32px;

  }



  .hero {

    height: 470px;

    min-height: 470px;

    border-radius: 14px;

  }



  .meta .sep {

    display: none;

  }



  .meta {

    column-gap: 14px;

  }



  .slide-txt {

    padding: 24px 22px 84px;

  }



  .slide-txt p {

    display: -webkit-box;

    -webkit-line-clamp: 3;

    -webkit-box-orient: vertical;

    overflow: hidden;

    font-size: 15px;

  }



  .hero-ctl {

    left: 22px;

    right: 22px;

    bottom: 22px;

  }



  .dots {

    margin-right: auto;

  }



  .arrow {

    width: 38px;

    height: 38px;

  }



  .latest li {

    grid-template-columns: 24px 72px minmax(0, 1fr);

    gap: 12px;

  }



  .latest .thumb {

    width: 72px;

    height: 60px;

  }



  .block {

    padding-top: 36px;

  }



  .sec-h {

    gap: 14px;

    margin-bottom: 20px;

  }



  .sec-h h2 {

    font-size: 26px;

  }



  .grid3,

  .cat-grid {

    grid-template-columns: 1fr;

  }



  .hcard {

    grid-template-columns: 1fr;

  }



  .hcard .pic {

    height: 200px;

    min-height: 200px;

    aspect-ratio: 16 / 10;

  }



  .news {

    padding: 40px 0 48px;

  }



  .news-box {

    padding: 44px 20px;

    border-radius: 18px;

  }



  .news-box form {

    flex-direction: column;

    background: transparent;

    border: 0;

    padding: 0;

  }



  .news-box input[type=email] {

    background: var(--surface);

    border: 1px solid var(--line);

    border-radius: 10px;

  }



  .news-box button {

    padding: 14px;

  }



  .leaf {

    width: 150px;

    height: 150px;

  }



  .foot .cols {

    grid-template-columns: 1fr;

    padding-top: 48px;

  }



  .copy {

    flex-direction: column;

    gap: 4px;

  }



  .phead {

    padding: 24px 0 32px;

  }



  .phead-row {

    flex-direction: column;

    align-items: flex-start;

    gap: 16px;

  }



  .art-h {

    padding-top: 24px;

  }



  .art-h .dek {

    font-size: 18px;

  }



  .art-cover {

    padding: 0;

  }



  .art-cover img {

    border-radius: 0;

  }



  .prose {

    font-size: 16.5px;

  }



  .prose h2 {

    font-size: 25px;

  }



  .prose h3 {

    font-size: 21px;

  }



  .prose .wp-block-columns {

    flex-direction: column;

  }



  .author-box {

    flex-direction: column;

    padding: 22px;

  }



  .prevnext {

    grid-template-columns: 1fr;

  }



  .prevnext .next {

    grid-column: auto;

  }



  .card-box,

  .contact-info {

    padding: 24px;

  }



  .form .row2 {

    grid-template-columns: 1fr;

  }



  .big-search {

    flex-wrap: wrap;

    padding: 6px;

  }



  .big-search > .ic {

    display: none;

  }



  .big-search input {

    padding: 10px 12px;

  }



  .big-search .btn {

    width: 100%;

  }



  .search-panel input {

    font-size: 17px;

  }



  .search-panel .btn {

    display: none;

  }



  .big-num {

    font-size: 88px;

  }

}







/* ===== Brightnous Classical Footer ===== */





.foot {

    position: relative;

    isolation: isolate;

    overflow: hidden;

    background-color: #073b32;

    background-image:

        linear-gradient(

            rgba(5, 45, 38, 0.20),

            rgba(5, 45, 38, 0.20)

        ),

        url('/images/brightnous-footer-bg.png');

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    color: rgba(255, 255, 255, 0.78);

    border-top: 1px solid rgba(216, 194, 154, 0.35);

}





.foot-decoration {

    position: absolute;

    inset: 0;

    z-index: -1;

    pointer-events: none;

    background:

        radial-gradient(

            ellipse at 10% 0%,

            rgba(50, 132, 107, .18),

            transparent 48%

        );

}



.foot .cols {

    display: grid;

    grid-template-columns: 1.5fr .8fr 1fr 1fr;

    gap: 34px;

    padding: 64px 0 48px;

}



.foot .cols > * + * {

    border-left: 1px solid rgba(216, 194, 154, .28);

    padding-left: 30px;

}



.foot .flogo {

    display: inline-block;

    margin-bottom: 18px;

}



.foot .flogo img {

    height: 54px;

    width: auto;

    max-width: 100%;

    object-fit: contain;

    filter: grayscale(1) invert(1) contrast(4);

    mix-blend-mode: screen;

}



.foot .flogo .brand-text {

    color: #fff;

}



.foot-about p {

    max-width: 380px;

    line-height: 1.7;

    margin-bottom: 22px;

}



.foot h5 {

    color: #e1c99b;

    margin: 0 0 22px;

    padding-bottom: 14px;

    border-bottom: 1px solid rgba(216, 194, 154, .25);

}



.foot h5::after {

    content: "";

    display: block;

    width: 32px;

    height: 2px;

    background: #d8c29a;

    position: relative;

    top: 15px;

}



.foot ul {

    list-style: none;

    margin: 0;

    padding: 0;

    display: grid;

    gap: 12px;

}



.foot ul a {

    display: inline-block;

    transition: color .2s ease, transform .2s ease;

}



.foot ul a:hover {

    color: #e1c99b;

    transform: translateX(4px);

}



.foot .social {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}



.foot .social a {

    width: 38px;

    height: 38px;

    border: 1px solid rgba(216, 194, 154, .55);

    border-radius: 50%;

    display: grid;

    place-items: center;

    color: #fff;

    transition: background .2s, color .2s;

}



.foot .social a:hover {

    background: #d8c29a;

    color: #073b32;

}



.foot .copy {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 18px;

    flex-wrap: wrap;

    border-top: 1px solid rgba(216, 194, 154, .4);

    padding: 22px 0;

    color: rgba(255, 255, 255, .7);

}



.foot .copy-links {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 14px;

}



.foot .copy a:hover {

    color: #e1c99b;

}



.foot .copy-separator {

    color: rgba(216, 194, 154, .65);

}



.foot .back-top {

    width: 42px;

    height: 42px;

    border: 1px solid #d8c29a;

    border-radius: 50%;

    display: grid;

    place-items: center;

    color: #e1c99b;

    font-size: 22px;

    transition: background .2s, color .2s;

}



.foot .back-top:hover {

    background: #d8c29a;

    color: #073b32;

}



@media (max-width: 1000px) {

    .foot .cols {

        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 36px;

    }



    .foot .cols > * + * {

        border-left: 0;

        padding-left: 0;

    }

}



@media (max-width: 600px) {

    .foot .cols {

        grid-template-columns: 1fr;

        gap: 30px;

        padding: 42px 0 32px;

    }



    .foot .cols > * + * {

        border-top: 1px solid rgba(216, 194, 154, .25);

        padding-top: 26px;

    }



    .foot .copy {

        align-items: flex-start;

        flex-direction: column;

    }

}









/* ---------- Elegant Brightnous Footer ---------- */



.foot {

    position: relative;

    overflow: hidden;

    background-color: #082d27;

    background-image:

        linear-gradient(135deg, rgba(14, 59, 50, 0.20), rgba(8, 45, 39, 0.12)),

        url("/images/brightnous-footer-bg.png");

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;

    color: rgba(255, 255, 255, .78);

    border-top: 1px solid rgba(255, 255, 255, .12);

}



.foot .cols {

    position: relative;

    z-index: 1;

    padding: 70px 0 55px;

    gap: 55px;

}



.foot .cols > * + * {

    border-left: 1px solid rgba(255, 255, 255, .16);

    padding-left: 40px;

}



.foot h5 {

    margin-bottom: 22px;

    color: #d8c29a;

}



.foot ul {

    gap: 13px;

}



.foot ul a {

    transition: color .2s ease, padding-left .2s ease;

}



.foot ul a:hover {

    color: #fff;

    padding-left: 5px;

}



.foot .social a {

    width: 38px;

    height: 38px;

    border-color: rgba(255, 255, 255, .3);

    transition: background .2s, border-color .2s;

}



.foot .social a:hover {

    background: #d8c29a;

    border-color: #d8c29a;

    color: #0e3b32;

}



.copy {

    position: relative;

    z-index: 1;

    border-top-color: rgba(216, 194, 154, .35);

    padding: 24px 0;

}



@media (max-width: 900px) {

    .foot .cols {

        gap: 30px;

    }



    .foot .cols > * + * {

        padding-left: 24px;

    }

}



@media (max-width: 640px) {

    .foot .cols {

        gap: 30px;

        padding: 45px 0 35px;

    }



    .foot .cols > * + * {

        border-left: 0;

        border-top: 1px solid rgba(255, 255, 255, .16);

        padding: 25px 0 0;

    }

}





@media (prefers-reduced-motion: reduce) {

  *,

  *::before,

  *::after {

    animation: none !important;

    transition: none !important;

    scroll-behavior: auto !important;

  }

}