/*
Theme Name: The Rubric
Theme URI: https://creativeminorityreport.com
Author: Patrick & Matthew Archbold
Description: Two-ink missal-printing theme for Creative Minority Report. Black for the argument, red for everything the Church already answered.
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: rubric
*/

:root{
  --paper:#EAE6DC;
  --paper-2:#E2DDD1;
  --paper-3:#D8D2C3;
  --ink:#171512;
  --ink-2:#403A31;
  --ink-3:#6B6355;
  --rubric:#A61B17;
  --rubric-dark:#7C110E;
  --rule:#C3BBA9;
  --rule-soft:#D3CCBC;

  --f-display:"Newsreader", Georgia, "Times New Roman", serif;
  --f-util:"Barlow Condensed", "Arial Narrow", Arial, sans-serif;

  --gutter:clamp(1rem, 4vw, 3.25rem);
  --measure:64ch;
}

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

html{ background:var(--paper); }

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-display);
  font-optical-sizing:auto;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  margin:0;
}

img{ max-width:100%; height:auto; }

a{ color:inherit; }

.wrap{
  width:min(1180px, 100%);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.util{
  font-family:var(--f-util);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:600;
}

.screen-reader-text{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
}

:is(a,button,input,summary):focus-visible{
  outline:2px solid var(--rubric);
  outline-offset:3px;
}

/* ---------- colophon ---------- */
.colophon{
  border-bottom:1px solid var(--rule);
  background:var(--paper);
}
.colophon .wrap{
  display:flex; flex-wrap:wrap; gap:.25rem 1.5rem;
  justify-content:space-between; align-items:baseline;
  padding-block:.55rem;
  font-family:var(--f-util);
  font-size:.82rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.colophon .liturgy{ color:var(--rubric); font-weight:600; }

/* ---------- masthead ---------- */
.masthead{ border-bottom:3px solid var(--ink); }
.masthead .wrap{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:1.5rem 2rem;
  padding-block:clamp(1.75rem,5vw,3.25rem) clamp(1.1rem,3vw,1.75rem);
}
.brand{ display:flex; flex-direction:column; gap:.5rem; }
.brand a{ text-decoration:none; }
.brand h1{
  margin:0;
  font-weight:700;
  font-size:clamp(2.4rem, 8.5vw, 5.4rem);
  line-height:.92;
  letter-spacing:-.03em;
  text-wrap:balance;
}
.brand h1 .rub{ color:var(--rubric); }
.brand .tag{
  margin:0;
  font-style:italic;
  font-size:clamp(1rem,2.4vw,1.35rem);
  color:var(--ink-2);
}
.imprint{
  border-left:2px solid var(--rubric);
  padding-left:1rem;
  max-width:22ch;
  font-family:var(--f-util);
  font-size:.85rem;
  line-height:1.45;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.imprint b{ display:block; color:var(--ink); letter-spacing:.1em; }

/* ---------- nav ---------- */
nav.primary{
  position:sticky; top:0; z-index:20;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
  box-shadow:0 1px 0 var(--rule-soft);
}
nav.primary .wrap{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:.15rem 1.35rem;
  padding-block:.6rem;
}
nav.primary ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.15rem 1.35rem; align-items:center; }
nav.primary a{
  font-family:var(--f-util);
  text-transform:uppercase;
  letter-spacing:.11em;
  font-size:.92rem;
  font-weight:500;
  text-decoration:none;
  padding-block:.3rem;
  border-bottom:2px solid transparent;
  transition:border-color .12s ease, color .12s ease;
}
nav.primary a:hover{ border-bottom-color:var(--ink); }
nav.primary .standing > a{
  color:var(--rubric);
  font-weight:700;
}
nav.primary .standing > a:hover{ border-bottom-color:var(--rubric); }
nav.primary .divider{
  flex:1 0 auto;
  height:1px; background:var(--rule);
  min-width:1.5rem;
}

/* ---------- frontispiece plate ---------- */
.plate-band{
  background:var(--paper-3);
  border-bottom:1px solid var(--rule);
}
.plate-band .wrap{ padding-block:clamp(.7rem,1.6vw,1rem); }
.plate-mount{
  margin-inline:auto;
  max-width:620px;
}
.plate-frame{ overflow-x:auto; }
.plate-frame:focus-visible{ outline:2px solid var(--rubric); outline-offset:3px; }
.plate-mount img{
  display:block;
  width:100%;
  min-width:520px;
  height:auto;
  border:1px solid var(--ink);
}

/* ---------- main ---------- */
main{ padding-block:clamp(1.75rem,4vw,3rem) 0; }
.layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 268px;
  gap:clamp(2rem,5vw,4rem);
  align-items:start;
}

/* lead */
.lead{ padding-bottom:1.75rem; border-bottom:3px double var(--ink); }
.lead-inner{ display:block; }
/* Only the lead that actually has a plate becomes two columns. Without one the
   text simply spans the full measure, exactly as it did before — no reserved
   column, nothing left empty. */
.lead.has-plate .lead-inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) 200px;
  gap:clamp(1.25rem,3.5vw,2.5rem);
  align-items:start;
}
.lead .plate{ margin:0; }
.lead .plate img{
  display:block;
  width:100%;
  height:auto;
  border:1px solid var(--ink);
}
.kicker{
  display:inline-block;
  font-family:var(--f-util);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.8rem;
  font-weight:700;
  color:var(--rubric);
  margin-bottom:.65rem;
}
.lead h2{
  margin:0 0 .75rem;
  font-size:clamp(2rem,5.2vw,3.35rem);
  line-height:1.03;
  letter-spacing:-.02em;
  font-weight:600;
  text-wrap:balance;
}
.lead h2 a{ text-decoration:none; }
.lead h2 a:hover{ color:var(--rubric); }
.lead .dek{
  margin:0 0 1rem;
  max-width:var(--measure);
  font-size:1.2rem;
  color:var(--ink-2);
}
.lead .dek::first-letter{
  float:left;
  font-size:3.15rem;
  line-height:.82;
  padding:.06em .12em 0 0;
  color:var(--rubric);
  font-weight:600;
}
.byline{
  font-family:var(--f-util);
  text-transform:uppercase;
  letter-spacing:.11em;
  font-size:.82rem;
  color:var(--ink-3);
}
.byline b{ color:var(--ink); font-weight:600; }
.byline a{ text-decoration:none; color:inherit; }
.byline a:hover{ color:var(--rubric); }

/* ruled feed */
.feed{ list-style:none; margin:0; padding:0; }
.feed li{ border-bottom:1px solid var(--rule); }
.feed article{
  display:grid;
  grid-template-columns:104px minmax(0,1fr);
  gap:0 1.5rem;
  padding-block:1.35rem;
  align-items:start;
}
/* The ruled margin: a hairline-ruled column carrying the date and, when the
   post has a featured image, a small square cut beneath it. The column is a
   fixed width whether or not a cut is present, so the rule and the text measure
   land in exactly the same place on every row — only the row height changes. */
.feed .margin{
  align-self:stretch;
  display:flex;
  flex-direction:column;
  gap:.7rem;
  border-right:1px solid var(--rule-soft);
  padding-right:1rem;
  margin-right:-.5rem;
}
.stamp{
  font-family:var(--f-util);
  text-transform:uppercase;
  letter-spacing:.09em;
  font-size:.8rem;
  line-height:1.35;
  color:var(--ink-3);
  padding-top:.35rem;
}
.stamp b{ display:block; color:var(--rubric); font-weight:700; }
/* The cut itself — a block, not a card: square, hard-ruled in ink, the same
   1px border the frontispiece plate and the book covers use. */
.feed .cut{
  display:block;
  width:88px;
  height:88px;
  flex:0 0 auto;
  border:1px solid var(--ink);
  background:var(--paper-3);
}
.feed .cut img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.feed .cut:hover{ border-color:var(--rubric); }
.feed h3{
  margin:0 0 .3rem;
  font-size:clamp(1.28rem,2.6vw,1.7rem);
  line-height:1.16;
  font-weight:500;
  letter-spacing:-.012em;
  text-wrap:balance;
}
.feed h3 a{ text-decoration:none; background-image:linear-gradient(var(--rubric),var(--rubric)); background-size:0% 1px; background-repeat:no-repeat; background-position:0 92%; transition:background-size .18s ease, color .18s ease; }
.feed h3 a:hover{ color:var(--rubric); background-size:100% 1px; }
.feed p{ margin:0; color:var(--ink-2); max-width:var(--measure); }
.feed .byline{ margin-top:.5rem; display:block; }

.pagination{
  display:flex; flex-wrap:wrap; gap:1rem;
  align-items:center; justify-content:space-between;
  padding-block:1.75rem 0;
}
.btn-ghost,.pagination a{
  font-family:var(--f-util);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:600;
  font-size:.9rem;
  text-decoration:none;
  border:2px solid var(--ink);
  padding:.6rem 1.4rem;
  background:transparent;
  transition:background .15s ease, color .15s ease;
  display:inline-block;
}
.btn-ghost:hover,.pagination a:hover{ background:var(--ink); color:var(--paper); }
.page-count{ font-family:var(--f-util); letter-spacing:.12em; text-transform:uppercase; font-size:.82rem; color:var(--ink-3); }

/* ---------- rail / sidebar ---------- */
.rail{ display:flex; flex-direction:column; gap:2rem; }
.rail .widget{ border-top:2px solid var(--ink); padding-top:.85rem; }
.rail h2.widget-title, .rail h4{
  margin:0 0 .75rem;
  font-family:var(--f-util);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.85rem;
  font-weight:700;
  color:var(--rubric);
}
.searchform{ display:flex; }
.searchform input[type="search"]{
  flex:1 1 auto; min-width:0;
  font-family:var(--f-display);
  font-size:.95rem;
  padding:.55rem .7rem;
  background:var(--paper-2);
  border:1px solid var(--rule);
  border-right:0;
  color:var(--ink);
}
.searchform input::placeholder{ color:var(--ink-3); }
.searchform button{
  font-family:var(--f-util); text-transform:uppercase; letter-spacing:.1em; font-weight:600;
  background:var(--ink); color:var(--paper); border:1px solid var(--ink);
  padding:.55rem .9rem; cursor:pointer; font-size:.85rem;
}
.searchform button:hover{ background:var(--rubric); border-color:var(--rubric); }
.rail ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.rail ul li{ display:flex; justify-content:space-between; gap:1rem; align-items:baseline; padding-block:.42rem; border-bottom:1px dotted var(--rule); }
.rail ul li:last-child{ border-bottom:0; }
.rail ul a{ text-decoration:none; font-size:1rem; }
.rail ul a:hover{ color:var(--rubric); }
.rail .n{ font-family:var(--f-util); font-size:.82rem; letter-spacing:.08em; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.rail select{ width:100%; font-family:var(--f-display); font-size:.95rem; padding:.5rem; background:var(--paper-2); border:1px solid var(--rule); color:var(--ink); }
.rail .textwidget{ font-size:.95rem; color:var(--ink-2); }

/* ---------- band sections ---------- */
.band{ margin-top:clamp(3rem,7vw,5rem); border-top:3px solid var(--ink); background:var(--paper-2); }
.band + .band{ margin-top:0; }
.band .wrap{ padding-block:clamp(2rem,5vw,3.25rem); }
.band-head{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:.5rem 1.5rem; margin-bottom:1.5rem;
}
.band-head h2{
  margin:0;
  font-size:clamp(1.7rem,4vw,2.5rem);
  font-weight:600; letter-spacing:-.02em;
}
.band-head p{ margin:0; font-style:italic; color:var(--ink-3); max-width:46ch; }

.resources{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.25rem; list-style:none; margin:0; padding:0; }
.resource{
  background:var(--paper);
  border:1px solid var(--rule);
  display:flex; flex-direction:column;
}
.shot{
  aspect-ratio:16/9; max-width:100%;
  border-bottom:1px solid var(--rule);
  overflow:hidden;
}
.shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.resource .body{ padding:1rem 1.15rem 1.25rem; display:flex; flex-direction:column; gap:.4rem; flex:1 1 auto; }
.resource h3{ margin:0; font-size:1.35rem; font-weight:600; letter-spacing:-.01em; }
.resource p{ margin:0; font-size:.97rem; color:var(--ink-2); flex:1 1 auto; }
.resource a.link{
  font-family:var(--f-util); text-transform:uppercase; letter-spacing:.1em;
  font-size:.82rem; font-weight:600; color:var(--rubric); text-decoration:none;
  word-break:break-word;
}
.resource a.link:hover{ text-decoration:underline; }

/* books */
.books{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:2rem; }
.book{ display:grid; grid-template-columns:104px minmax(0,1fr); gap:1.25rem; align-items:start; }
.cover{
  aspect-ratio:2/3; max-width:100%;
  border:1px solid var(--ink);
  overflow:hidden;
}
.cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.book h3{ margin:0 0 .35rem; font-size:1.6rem; font-style:italic; font-weight:600; }
.book p{ margin:0 0 .8rem; color:var(--ink-2); font-size:1rem; }
.book blockquote{
  margin:0 0 1rem; padding-left:.95rem;
  border-left:2px solid var(--rubric);
  font-style:italic; color:var(--ink);
}
.book blockquote cite{ display:block; font-style:normal; font-family:var(--f-util); text-transform:uppercase; letter-spacing:.11em; font-size:.78rem; color:var(--ink-3); margin-top:.35rem; }
.btn-buy{
  display:inline-block;
  font-family:var(--f-util); text-transform:uppercase; letter-spacing:.15em; font-weight:700; font-size:.85rem;
  background:var(--rubric); color:var(--paper);
  padding:.65rem 1.35rem; text-decoration:none;
  border:2px solid var(--rubric);
  transition:background .15s ease, color .15s ease;
}
.btn-buy:hover{ background:transparent; color:var(--rubric); }
.btn-buy[disabled],.btn-buy.is-disabled{
  background:transparent; color:var(--ink-3); border-color:var(--rule);
  cursor:default; pointer-events:none;
}

/* ---------- single post / page content ---------- */
.entry{ max-width:var(--measure); }
.entry-header{ padding-bottom:1.25rem; border-bottom:3px double var(--ink); margin-bottom:1.75rem; }
.entry-header h1{ margin:0 0 .5rem; font-size:clamp(2rem,5vw,3rem); line-height:1.05; font-weight:600; letter-spacing:-.02em; }
.entry-content{ font-size:1.1rem; line-height:1.7; }
.entry-content p{ margin:0 0 1.3em; }
.entry-content a{ color:var(--rubric-dark); text-decoration-color:var(--rule); }
.entry-content a:hover{ text-decoration-color:var(--rubric); }
.entry-content img{ border:1px solid var(--rule); }
.entry-content blockquote{ margin:1.5em 0; padding-left:1.1rem; border-left:2px solid var(--rubric); font-style:italic; color:var(--ink-2); }
.entry-content h2{ font-size:1.7rem; margin:1.6em 0 .6em; }
.entry-content h3{ font-size:1.35rem; margin:1.4em 0 .5em; }
.page .entry-content{ font-size:1.1rem; }

.plain-page .wrap{ max-width:min(720px, 100%); margin-inline:auto; padding-block:clamp(2rem,5vw,3rem); }

/* comments */
.comments-area{ max-width:var(--measure); margin-top:3rem; padding-top:2rem; border-top:3px solid var(--ink); }
.comments-title, #reply-title{ font-size:1.4rem; margin:0 0 1rem; font-weight:600; }
.comment-list{ list-style:none; margin:0; padding:0; }
.comment-list li{ border-bottom:1px solid var(--rule); padding-block:1.1rem; }
.comment-list .comment-author{ font-family:var(--f-util); text-transform:uppercase; letter-spacing:.08em; font-size:.85rem; color:var(--ink-3); margin-bottom:.3rem; }
.comment-list .comment-author b{ color:var(--ink); }
.comment-form input[type="text"],.comment-form input[type="email"],.comment-form input[type="url"],.comment-form textarea{
  width:100%; font-family:var(--f-display); font-size:1rem; padding:.6rem .7rem; background:var(--paper-2); border:1px solid var(--rule); color:var(--ink); margin-bottom:.9rem;
}
.comment-form label{ display:block; font-family:var(--f-util); text-transform:uppercase; letter-spacing:.08em; font-size:.82rem; margin-bottom:.3rem; color:var(--ink-3); }
.comment-form-comment{ display:flex; flex-direction:column; }
.comment-reply-title{ font-size:1.3rem; }
.required{ color:var(--rubric); }

/* ---------- footer ---------- */
footer.site-footer{ background:var(--ink); color:var(--paper-3); margin-top:0; }
footer.site-footer .wrap{ padding-block:clamp(2rem,4vw,2.75rem); display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
footer.site-footer h2.widget-title,footer.site-footer h5{ margin:0 0 .6rem; font-family:var(--f-util); text-transform:uppercase; letter-spacing:.16em; font-size:.82rem; color:#E4938F; font-weight:700; }
footer.site-footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.35rem; }
footer.site-footer a{ text-decoration:none; font-size:.97rem; color:inherit; }
footer.site-footer a:hover{ color:var(--paper); text-decoration:underline; }
footer.site-footer .sig{ font-style:italic; font-size:.97rem; line-height:1.5; }
footer.site-footer .textwidget p{ margin:0; }
.credits{ border-top:1px solid #33302B; }
.credits .wrap{ display:flex; flex-wrap:wrap; gap:.4rem 1.5rem; justify-content:space-between; padding-block:.9rem; font-family:var(--f-util); text-transform:uppercase; letter-spacing:.12em; font-size:.78rem; color:#8A8378; }

/* alignment helpers for block/classic editor content */
.alignleft{ float:left; margin:.3em 1.5em 1em 0; }
.alignright{ float:right; margin:.3em 0 1em 1.5em; }
.aligncenter{ display:block; margin-left:auto; margin-right:auto; }
.wp-caption{ max-width:100%; }
.wp-caption-text{ font-family:var(--f-util); font-size:.82rem; color:var(--ink-3); text-align:center; padding-top:.4rem; }

@media (max-width:900px){
  .layout{ grid-template-columns:minmax(0,1fr); }
  .masthead .wrap{ grid-template-columns:minmax(0,1fr); align-items:start; }
  .imprint{ max-width:none; }
  .colophon .wrap{ flex-direction:column; align-items:flex-start; gap:.35rem; }
}
@media (max-width:560px){
  .feed article{ grid-template-columns:minmax(0,1fr); gap:.5rem; }
  /* The margin column unfolds into a strap above the headline: the cut first,
     the date beside it. Rows with no cut are just the date line, as before. */
  .feed .margin{
    flex-direction:row;
    align-items:center;
    gap:.75rem;
    border-right:0;
    padding-right:0;
    margin-right:0;
  }
  .feed .cut{ order:-1; width:56px; height:56px; }
  .stamp{ padding-top:0; }
  .stamp b{ display:inline; }
  .stamp b::after{ content:" ·"; color:var(--ink-3); }
  /* The lead plate stacks under the text, held to a modest width so it reads as
     an inset figure rather than a full-bleed hero — the frontispiece above it is
     meant to be the one large picture on the page. */
  .lead.has-plate .lead-inner{ grid-template-columns:minmax(0,1fr); gap:1.25rem; }
  .lead .plate{ max-width:220px; }
  .book{ grid-template-columns:80px minmax(0,1fr); gap:1rem; }
}
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}