/* Shadows of CM Thompson — blog, posts, and standard pages.
   Quiet and readable. No canvas, no scroll effects, just type. */

:root{
  --canvas:#080A0C;
  --surface:#0E1216;
  --surface-2:#131820;
  --ink:#EFE8DC;
  --ink-soft:#C8C2B6;
  --ink-dim:#8E8A82;
  --accent:#E8A33D;
  --accent-ink:#140F07;
  --edge:rgba(239,232,220,.12);

  --font-display:"Bodoni Moda",Georgia,"Times New Roman",serif;
  --font-text:"Geist","Helvetica Neue",Arial,sans-serif;

  --sc-1:.25rem; --sc-2:.5rem;  --sc-3:.75rem; --sc-4:1.25rem;
  --sc-5:2rem;   --sc-6:3rem;   --sc-7:4.5rem;

  --gutter:clamp(1.25rem,5vw,3rem);
  --measure:44rem;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--font-text);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--accent)}

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

/* The shell must fill the screen so the footer never floats mid-page. */
.page-shell{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  max-width:var(--measure);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ---------- header ---------- */

.page-top{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sc-4);flex-wrap:wrap;
  padding-block:var(--sc-5);
  border-bottom:1px solid var(--edge);
  margin-bottom:var(--sc-6);
}
.wordmark{
  font-family:var(--font-display);font-size:1.05rem;
  color:var(--ink);text-decoration:none;white-space:nowrap;
}
.wordmark em{font-style:italic;color:var(--accent)}
.page-top nav{display:flex;gap:clamp(.9rem,3vw,1.75rem);flex-wrap:wrap}
.page-top nav a{
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);text-decoration:none;
  transition:color .2s var(--ease);
}
.page-top nav a:hover{color:var(--ink)}
.page-top nav a[aria-current="page"]{color:var(--accent)}

/* ---------- prose ---------- */

.prose{flex:1}

.eyebrow{
  font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent);margin:0 0 var(--sc-3);
}

.prose h1{
  font-family:var(--font-display);
  font-size:clamp(1.9rem,5vw,3rem);
  line-height:1.12;letter-spacing:-.02em;
  margin:0 0 var(--sc-4);
}
.prose h2{
  font-family:var(--font-display);
  font-size:clamp(1.4rem,3.4vw,2rem);
  line-height:1.2;margin:var(--sc-6) 0 var(--sc-3);
}
.prose h3{
  font-family:var(--font-display);
  font-size:1.25rem;margin:var(--sc-5) 0 var(--sc-3);
}

.byline{
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-dim);margin:0 0 var(--sc-5);
}

.prose p,.prose li{color:var(--ink-soft);margin:0 0 var(--sc-4)}
.prose strong{color:var(--ink)}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 var(--sc-4)}
.prose li{margin-bottom:var(--sc-2)}
.prose blockquote{
  margin:var(--sc-5) 0;padding-left:var(--sc-4);
  border-left:2px solid var(--accent);
  font-family:var(--font-display);font-style:italic;
  font-size:1.15rem;color:var(--ink);
}
.prose hr{border:0;border-top:1px solid var(--edge);margin:var(--sc-6) 0}
.prose img{margin:var(--sc-5) 0;border-radius:2px}
.prose code{
  font-size:.9em;background:var(--surface-2);
  padding:.15em .4em;border-radius:2px;color:var(--ink);
}

/* ---------- post list ---------- */

.post-list{
  flex:1;
  list-style:none;margin:0;padding:0;
}
.post-list li{border-top:1px solid var(--edge)}
.post-list li:first-child{border-top:0}
.post-list a{
  display:block;
  padding-block:var(--sc-5);
  text-decoration:none;color:inherit;
}
.post-list h2{
  font-family:var(--font-display);
  font-size:clamp(1.3rem,3vw,1.9rem);
  line-height:1.18;margin:0 0 var(--sc-2);
  color:var(--ink);
  transition:color .2s var(--ease);
}
.post-list a:hover h2{color:var(--accent)}
.post-list .byline{margin-bottom:var(--sc-3)}
.excerpt{color:var(--ink-soft);margin:0}

/* ---------- comments ---------- */

.comments{margin-top:var(--sc-7);padding-top:var(--sc-6);border-top:1px solid var(--edge)}
.comments__title{
  font-family:var(--font-display);
  font-size:clamp(1.3rem,3vw,1.8rem);
  margin:0 0 var(--sc-5);
}
.comments__rules{
  font-size:.86rem;color:var(--ink-dim);
  background:var(--surface);border:1px solid var(--edge);
  border-radius:3px;padding:var(--sc-4);
  margin:0 0 var(--sc-5);
}
.comments__closed{color:var(--ink-dim);font-size:.9rem}
.comments__list{list-style:none;margin:0 0 var(--sc-6);padding:0}
.comment{
  border-top:1px solid var(--edge);
  padding-block:var(--sc-4);
}
.comment__meta{
  display:flex;gap:var(--sc-3);align-items:baseline;flex-wrap:wrap;
  font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-dim);margin-bottom:var(--sc-2);
}
.comment__author{color:var(--ink)}
.comment__pending{color:var(--accent);font-size:.82rem;margin:0 0 var(--sc-2)}
.comment__body p{color:var(--ink-soft);margin:0 0 var(--sc-3)}

/* form */

.comment-form p{margin:0 0 var(--sc-4)}
.comment-form label{
  display:block;margin-bottom:var(--sc-2);
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
}
.comment-form input[type=text],
.comment-form input[type=email],
.comment-form input[type=url],
.comment-form textarea{
  width:100%;
  background:var(--surface);
  border:1px solid var(--edge);
  border-radius:2px;
  color:var(--ink);
  font-family:inherit;font-size:.95rem;
  padding:.7rem .85rem;
}
.comment-form textarea{resize:vertical;min-height:9rem}
.comment-form input:focus,.comment-form textarea:focus{
  outline:none;border-color:var(--accent);
}
.comment-form .form-submit{margin-top:var(--sc-4)}

.btn,
.comment-form input[type=submit]{
  display:inline-block;
  background:var(--accent);color:var(--accent-ink);
  padding:.8rem 1.5rem;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  text-decoration:none;border:1px solid var(--accent);border-radius:0;
  cursor:pointer;font-family:inherit;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.btn:hover,
.comment-form input[type=submit]:hover{background:transparent;color:var(--accent)}

/* pagination */

.pagination,.comments-pagination{margin:var(--sc-6) 0 0;font-size:.8rem}
.pagination a,.comments-pagination a{color:var(--ink-soft);text-decoration:none;margin-right:var(--sc-3)}
.pagination a:hover,.comments-pagination a:hover{color:var(--accent)}
.pagination .current,.comments-pagination .current{color:var(--accent);margin-right:var(--sc-3)}

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

.page-foot{
  margin-top:var(--sc-7);
  padding-block:var(--sc-6);
  border-top:1px solid var(--edge);
  display:flex;flex-direction:column;align-items:center;gap:var(--sc-4);
  text-align:center;
}
.page-foot__name{font-family:var(--font-display);font-size:1.05rem;margin:0}
.page-foot__name em{font-style:italic;color:var(--accent)}
.page-foot nav{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sc-4)}
.page-foot nav a{
  font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-dim);text-decoration:none;
}
.page-foot nav a:hover{color:var(--accent)}
.page-foot__legal{font-size:.68rem;color:var(--ink-dim);margin:0}

/* ---------- parent theme chrome ----------
   GeneratePress prints its own header, nav, sidebar and footer. These pages
   supply their own, so the parent's are removed and its wrappers stripped of
   the width and padding they would otherwise impose. */

body.socmt-page .site-header,
body.socmt-page .main-navigation,
body.socmt-page .site-footer,
body.socmt-page #left-sidebar,
body.socmt-page #right-sidebar,
body.socmt-page .entry-header,
body.socmt-page .page-header,
body.socmt-page .featured-image{display:none!important}

body.socmt-page .site-content{
  display:block!important;
  flex-direction:column!important;
}

body.socmt-page #page,
body.socmt-page .site-content,
body.socmt-page .content-area,
body.socmt-page .site-main,
body.socmt-page .entry-content,
body.socmt-page article.post,
body.socmt-page article.page,
body.socmt-page .inside-article{
  margin:0!important;padding:0!important;
  max-width:none!important;width:auto!important;
  background:none!important;border:0!important;box-shadow:none!important;
}

body.socmt-page.admin-bar .page-shell{padding-top:32px}
@media (max-width:782px){
  body.socmt-page.admin-bar .page-shell{padding-top:46px}
}

@media (max-width:560px){
  .page-top{gap:var(--sc-3)}
  .page-top nav{width:100%}
}