/* Harmonize — clean “baller” polish layer for PaperMod output */
:root{
  --content-max-width: 760px;
  --radius: 14px;
}

/* Typography + rhythm */
body{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: .005em;
  line-height: 1.65;
  font-size: 0.98rem;
}

h1,h2,h3,h4{
  letter-spacing: -0.01em;
  font-weight: 520;
}

.page-header h1,
.post-title{/* Center homepage hero/profile only */
.profile {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.profile .entry-content {
  margin-left: auto;
  margin-right: auto;
}

  letter-spacing: -0.015em;
}

/* Layout */
.main{
  max-width: calc(var(--content-max-width) + (var(--gap) * 2));
}

.post-content{
  max-width: var(--content-max-width);
}

/* Links */
a{
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

:root{
  --content-max-width: 760px;
  --radius: 14px;
}

/* Typography + rhythm */
body{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  letter-spacing: .005em;
  line-height: 1.65;
  font-size: 0.98rem;
}

h1,h2,h3,h4{
  letter-spacing: -0.01em;
  font-weight: 520;
}

.page-header h1,
.post-title{ letter-spacing: -0.015em; }

/* Layout */
.main{
  max-width: calc(var(--content-max-width) + (var(--gap) * 2));
}

.post-content{
  max-width: var(--content-max-width);
}

/* Links */
a{
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Code blocks look intentional */
.post-content pre,
.post-content .highlight pre,
.post-content .chroma pre{
  padding: 1.25rem 1.35rem;
  border-radius: 14px;
  line-height: 1.6;
  font-size: .95rem;
  box-shadow: inset 0 0 0 1px rgba(127,127,127,.18);
}

/* Tables */
.post-content table{
  display:block;
  width:100%;
  overflow-x:auto;
  border-collapse:collapse;
  margin: 1.5rem 0;
  font-size: .95rem;
}

.post-content thead th{
  text-align:left;
  font-weight: 650;
  padding: .75rem .85rem;
  border-bottom: 1px solid rgba(127,127,127,.22);
}

.post-content tbody td{
  padding: .75rem .85rem;
  border-bottom: 1px solid rgba(127,127,127,.14);
  vertical-align: top;
}

.post-content tbody tr:nth-child(odd) td{
  background: rgba(127,127,127,.05);
}

/* ProfileMode polish */
.profile img{
  width: 120px !important;
  height: 120px !important;
  object-fit: cover !important;
  border-radius: 999px !important;
}

.profile .buttons a{
  border-radius: 12px;
  font-weight: 560;
  padding: .65rem .95rem;
}

.profile .buttons a:first-child{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
/* Hero / Profile polish */
.profile {
  padding-top: 2.5rem;
}

.profile .profile_inner {
  gap: 1.25rem;
}

.profile h1 {
  font-size: 2.2rem;
  letter-spacing: -0.02em;
}

.profile .subtitle {
  font-size: 1.05rem;
  opacity: 0.85;
}

.profile img {
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
/* Typography rhythm + readability */
.post-content{
  font-size: 1rem;
}

.post-content p{
  margin-bottom: 1.15rem;
  max-width: 72ch;
}

.post-content li{
  margin: .45rem 0;
}

.post-content h2{
  margin-top: 3.25rem;
  margin-bottom: 1.1rem;
  font-size: 1.55rem;
}

.post-content h3{
  margin-top: 2.25rem;
  margin-bottom: .85rem;
  font-size: 1.22rem;
}

.post-content h2:not(:first-of-type){
  padding-top: 2.0rem;
  border-top: 1px solid rgba(127,127,127,.18);
}

.post-content h2::after{
  content:"";
  display:block;
  width:56px;
  height:2px;
  margin-top:.7rem;
  background: rgba(127,127,127,.25);
  border-radius: 999px;
}

/* Constrain wide content a touch */
.main{
  max-width: 1040px;
}
/* HERO / PROFILE REFINEMENT */
.profile{
  gap: 1.25rem;
}

.profile_inner{
  gap: .85rem;
}

.profile_inner h1{
  margin-top: .75rem;
  margin-bottom: .25rem;
}

.profile_inner p{
  max-width: 42ch;
  opacity: .85;
}

/* Buttons: weight + hierarchy */
.profile .buttons{
  margin-top: 1.25rem;
}

.profile .buttons a{
  padding: .6rem .9rem;
  border-radius: 10px;
  font-weight: 500;
}

.profile .buttons a:first-child{
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  transform: translateY(-1px);
}

.profile .buttons a:not(:first-child){
  opacity: .92;
}

/* Homepage: make ProfileMode feel intentional */
.main .profile {
  min-height: auto;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.profile .profile_inner h1 {
  font-size: 2.4rem;
  letter-spacing: -0.02em;
}

.profile .profile_inner p {
  font-size: 1.05rem;
  opacity: 0.86;
  max-width: 52ch;
  margin-inline: auto;
}

.profile .buttons {
  margin-top: 1.25rem;
  gap: 12px;
}

.profile .button {
  border-radius: 12px;
  padding: 10px 12px;
}

.profile img {
  width: 128px !important;
  height: 128px !important;
}
/* Header cleanup */
header.header {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.logo a {
  font-weight: 500;
  letter-spacing: -0.01em;
}

#theme-toggle {
  opacity: 0.8;
}
/* === PASS 2: Profile + Buttons hierarchy === */

/* Profile spacing + readable width */
.profile{
  padding-top: 12px;
}

.profile .profile_inner{
  gap: 14px;
  max-width: 760px;
}

.profile .entry-content{
  max-width: 64ch;
  opacity: 0.92;
}

/* Button row: intentional, not “default PaperMod” */
.profile .buttons,
.buttons{
  gap: 10px;
}

.profile .buttons a,
.button{
  border-radius: 12px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  background: var(--theme);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  text-decoration: none;
}

/* Primary button = first one */
.profile .buttons a:first-child{
  background: var(--primary);
  color: var(--theme);
  border-color: transparent;
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
}

.profile .buttons a:hover,
.button:hover{
  transform: translateY(-1px);
}
/* === PASS 3: CIAT readability + restore Profile centering === */

/* Restore ProfileMode centering (something earlier is overriding it) */
.main .profile{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Keep buttons centered even if other styles drift */
.profile .buttons{
  justify-content: center;
}

/* CIAT / long-form: improve reading comfort */
.post-content{
  font-size: 1rem;
}

.post-content h1{
  margin-top: 1.2rem;
}

.post-content h2{
  margin-top: 2.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(127,127,127,.22);
}

.post-content h2::after{
  content:"";
  display:block;
  width:56px;
  height:2px;
  margin-top:.7rem;
  background: rgba(127,127,127,.25);
}

.post-content p,
.post-content li{
  line-height: 1.7;
}

/* Tables: less “1998” */
.post-content table{
  border-radius: 12px;
  overflow: hidden;
}

.post-content thead th{
  font-weight: 650;
}

/* Code blocks: slightly clearer contrast + shape */
.post-content pre,
.post-content .highlight{
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(127,127,127,.18);
}
/* PASS 1 — Nav polish (inline, no bullets, left-aligned) */
.header .nav,
.header nav{
  max-width: calc(var(--content-max-width) + (var(--gap) * 2));
  margin: 0 auto;
}

#menu{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

#menu li{ margin: 0; padding: 0; }

#menu a{
  text-decoration: none;
  font-weight: 520;
}

#menu a:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* keep the theme toggle button from looking like a random box */
#theme-toggle{
  border-radius: 10px;
}
/* PASS 2 — Hero tightening */
.profile{
  padding-top: 10px;
  padding-bottom: 6px;
}

.profile .profile_inner{
  gap: 14px;
}

.profile img{
  margin-bottom: 2px;
}

.profile h1{
  margin: 0;
  line-height: 1.1;
}

.profile .entry-content{
  margin-top: 8px;
  margin-bottom: 10px;
  max-width: var(--content-max-width);
}

/* tighten the button row slightly */
.profile .buttons{
  margin-top: 10px;
  gap: 12px;
}
/* PASS 3 — CIAT structure (cards) */
.cards{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 12px;
}

.card{
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--entry);
  text-decoration: none;
}

.card h3{
  margin: 0 0 6px 0;
}

.card p{
  margin: 0;
  color: var(--secondary);
}

.card:hover{
  transform: translateY(-1px);
}