/* gorgecarltonwrites.com
 *
 * A reading site with a front of house. The essays quote scripture constantly,
 * so the setting of quoted verse governs the article page -- but the home page
 * and archive are a place, not a column, and are built wider and with more
 * structure than the prose they lead to.
 *
 * Garamond because it is the book face these texts have been printed in for
 * four centuries. The accent is the muted red of a red-letter Bible: the
 * illuminated initial, the rule beside a quotation, the mark over a section.
 */

:root {
  --paper:       #FBFAF8;
  --paper-2:     #F4F1EB;
  --paper-3:     #EDE8DF;
  --rule:        #DED7CB;
  --rule-soft:   #EAE4DA;
  --ink:         #1B1815;
  --ink-2:       #443D34;
  --muted:       #6E655B;
  --accent:      #8C2F39;
  --accent-2:    #A84A50;
  --accent-soft: #F3E6E6;

  --measure: 40rem;   /* ~70 characters of prose */
  --wide:    64rem;   /* the page itself */
  --gap:     clamp(1.25rem, 4vw, 2.5rem);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:       #14120F;
    --paper-2:     #1C1915;
    --paper-3:     #24201A;
    --rule:        #362F27;
    --rule-soft:   #292319;
    --ink:         #EFEAE2;
    --ink-2:       #CBC3B7;
    --muted:       #9A9082;
    --accent:      #DE949B;
    --accent-2:    #C97F87;
    --accent-soft: #2C1D1F;
  }
}

:root[data-theme="dark"] {
  --paper:       #14120F;
  --paper-2:     #1C1915;
  --paper-3:     #24201A;
  --rule:        #362F27;
  --rule-soft:   #292319;
  --ink:         #EFEAE2;
  --ink-2:       #CBC3B7;
  --muted:       #9A9082;
  --accent:      #DE949B;
  --accent-2:    #C97F87;
  --accent-soft: #2C1D1F;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "EB Garamond", Garamond, Georgia, "Times New Roman", serif;
  font-size: clamp(1.14rem, 0.35vw + 1.06rem, 1.28rem);
  line-height: 1.68;
  font-feature-settings: "liga" 1, "onum" 1;
  /* the red-letter mark, carried across the top of every page */
  border-top: 3px solid var(--accent);
}

.ui { font-family: Archivo, "Helvetica Neue", Arial, sans-serif; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

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

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

.shell       { width: 100%; max-width: var(--measure); margin-inline: auto; padding-inline: var(--gap); }
.shell--wide { max-width: var(--wide); }

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: var(--gap); top: 0.75rem; position: fixed; z-index: 10;
  background: var(--paper); color: var(--ink);
  padding: 0.6rem 1rem; border: 1px solid var(--rule);
}

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

.masthead {
  border-bottom: 1px solid var(--rule);
  padding-block: 1.5rem 1.35rem;
  margin-bottom: 3.25rem;
  background: var(--paper);
}
.masthead__inner {
  display: flex; flex-wrap: wrap;
  align-items: baseline; justify-content: space-between;
  gap: 0.6rem 2rem;
}
.masthead__name {
  font-size: 1.7rem; font-weight: 600;
  letter-spacing: 0.005em; margin: 0; line-height: 1.05;
}
.masthead__name a { color: var(--ink); text-decoration: none; }
.masthead__name a:hover { color: var(--accent); }
.masthead__name small {
  display: block;
  font-family: Archivo, sans-serif;
  font-size: 0.63rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted); margin-top: 0.35rem;
}

.nav { display: flex; gap: 1.6rem; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; }
.nav a { color: var(--muted); text-decoration: none; padding-bottom: 0.2rem; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--accent); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

/* -------------------------------------------------------------------- type */

h1, h2, h3 { font-weight: 600; line-height: 1.14; text-wrap: balance; margin: 0 0 0.5rem; }
h1 { font-size: clamp(2.3rem, 5.5vw, 3.5rem); letter-spacing: -0.016em; }
h2 { font-size: 1.7rem; margin-top: 2.6rem; }
h3 { font-size: 1.35rem; margin-top: 2rem; }

p { margin: 0 0 1.4rem; }

.meta {
  font-size: 0.73rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); font-feature-settings: "lnum" 1;
}

/* An eyebrow with a rule, used to head a section of the page. */
.eyebrow {
  display: flex; align-items: center; gap: 1rem;
  font-family: Archivo, sans-serif;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted);
  margin: 0 0 1.5rem;
}
.eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--rule); }

/* --------------------------------------------------------------- home hero */

.hero {
  padding-bottom: 3.25rem;
  margin-bottom: 3.25rem;
  border-bottom: 1px solid var(--rule);
}
/* The hero sits inside the rail layout's writing column, not across the page,
   so the headline is sized to that column rather than to the full width. */
.hero__title {
  font-size: clamp(2.1rem, 4.2vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.018em;
  margin: 0 0 1.4rem;
  max-width: 20ch;
}
.hero__rule { width: 4.5rem; height: 3px; background: var(--accent); margin-bottom: 1.5rem; }
.hero__facts { display: flex; flex-wrap: wrap; gap: 0.6rem 2rem; }

/* --------------------------------------------------------------- featured  */

.featured {
  display: block; text-decoration: none; color: inherit;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  margin-bottom: 3.5rem;
}
.featured:hover { background: var(--paper-3); }
.featured:hover .featured__title { color: var(--accent); }
.featured__title {
  font-size: clamp(1.7rem, 3.5vw, 2.35rem);
  line-height: 1.14; margin: 0.6rem 0 0.8rem; text-wrap: balance;
}
.featured__excerpt { color: var(--ink-2); margin: 0 0 1.1rem; max-width: 54ch; }

/* ------------------------------------------------------------------ pieces */

.pieces { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.pieces--grid {
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 0 2.5rem;
}
.pieces > li { border-bottom: 1px solid var(--rule-soft); }

.piece { display: block; padding: 1.6rem 0; text-decoration: none; color: inherit; }
.piece:hover .piece__title { color: var(--accent); }
.piece__title {
  font-size: 1.45rem; font-weight: 600; line-height: 1.2;
  margin: 0.45rem 0 0.45rem; text-wrap: balance;
  transition: color 120ms ease;
}
.piece__excerpt { margin: 0; color: var(--ink-2); font-size: 0.95em; }

.year {
  display: flex; align-items: baseline; gap: 1rem;
  margin: 3.25rem 0 0.5rem;
  font-family: Archivo, sans-serif;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--accent);
  font-feature-settings: "lnum" 1;
}
.year::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.year:first-of-type { margin-top: 0; }

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

.post-head {
  max-width: var(--wide);
  margin: 0 auto 3rem;
  padding: 0 var(--gap) 2.25rem;
  border-bottom: 1px solid var(--rule);
}
.post-head h1 { margin: 0.9rem 0 1rem; }
.post-head__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }

/* ---------------------------------------------------------------- article  */

.article { font-size: 1.03em; }

/* An illuminated initial. These are commentaries on scripture; the printed
 * tradition they come out of opens a chapter this way. */
.article > p:first-of-type::first-letter {
  float: left;
  font-size: 4.1em;
  line-height: 0.8;
  font-weight: 600;
  color: var(--accent);
  padding: 0.06em 0.09em 0 0;
  margin-top: 0.04em;
}
.article > p:first-of-type::first-line {
  font-variant-caps: small-caps;
  letter-spacing: 0.03em;
}

/* -------------------------------------------------------------- quotations */

/* The heart of the design. His scripture arrives as whole italic paragraphs;
 * setting it as a marked, indented block says "quoted" far better than italics
 * do, and lets the reader tell his voice from the text he expounds. */
blockquote {
  margin: 2.25rem 0;
  padding: 1.25rem 0 1.25rem 1.75rem;
  border-left: 3px solid var(--accent);
  background: linear-gradient(to right, var(--paper-2), transparent 85%);
  color: var(--ink-2);
  font-size: 0.98em;
}
blockquote p { margin-bottom: 0.9rem; }
blockquote p:last-of-type { margin-bottom: 0; }

blockquote cite {
  display: block;
  margin-top: 0.85rem;
  font-family: Archivo, sans-serif;
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
}

/* The About page opens with his photograph beside the heading. It is the one
   page where a reader is asking who he is, and the only one that shows no rail. */
.bio {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.75rem;
  margin-bottom: 2.75rem;
}
.bio__portrait {
  flex: none;
  width: 9rem; height: 9rem;
  object-fit: cover;
  border: 1px solid var(--rule);
}
.bio__head { flex: 1 1 15rem; }
.bio__head h1 { margin: 0 0 0.4rem; font-size: clamp(2rem, 4.5vw, 2.7rem); }
.bio__line {
  margin: 0;
  font-family: Archivo, sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.article figure { margin: 2.5rem 0; }
.article figure img { display: block; width: 100%; border-radius: 2px; }

.table-wrap { overflow-x: auto; margin: 2rem 0; }
.table-wrap table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
.table-wrap td { border-bottom: 1px solid var(--rule-soft); padding: 0.55rem 1rem 0.55rem 0; vertical-align: top; }

/* --------------------------------------------------------------- scripture */

/* The index of books he quotes. Each is a door into the essays that cite it --
   the rail used to show these as a name and a number with nowhere to go. */
.books {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}
.books a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0.85rem 1.1rem;
  text-decoration: none; color: inherit;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
}
.books a:hover { background: var(--paper-3); }
.books__name {
  font-family: "EB Garamond", Georgia, serif;
  font-size: 1.15rem; font-weight: 500;
}
.books__count {
  font-family: Archivo, sans-serif;
  font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}

/* The verses an essay actually cites, on the book page. */
.piece__refs {
  font-family: Archivo, sans-serif;
  font-size: 0.72rem; letter-spacing: 0.05em;
  color: var(--accent);
  margin: 0 0 0.55rem;
}

/* ------------------------------------------------------------- subscribe   */

.subscribe {
  margin: 4rem 0;
  padding-block: clamp(2rem, 5vw, 3.25rem);
  background: var(--paper-2);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.subscribe__inner { display: grid; gap: 1.5rem 3rem; align-items: start; }
@media (min-width: 46rem) {
  .subscribe__inner { grid-template-columns: 1fr 1fr; }
}
.subscribe h2 { margin: 0 0 0.5rem; font-size: 1.75rem; }
.subscribe p { margin: 0; color: var(--ink-2); font-size: 0.97em; }

.field-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.field-row input[type="email"] { flex: 1 1 13rem; }

input[type="text"], input[type="email"], textarea {
  width: 100%; font: inherit; font-size: 1rem;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 2px;
  padding: 0.75rem 0.9rem;
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
textarea { min-height: 10rem; resize: vertical; line-height: 1.6; }

.button {
  font-family: Archivo, sans-serif;
  font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--paper); background: var(--accent);
  border: 1px solid var(--accent); border-radius: 2px;
  padding: 0.8rem 1.5rem; cursor: pointer;
}
.button:hover { background: var(--accent-2); border-color: var(--accent-2); }

.form-note { font-size: 0.85rem; color: var(--muted); margin-top: 0.8rem; }

.notice {
  padding: 1rem 1.2rem; border-left: 3px solid var(--accent);
  background: var(--accent-soft); margin-bottom: 1.85rem; font-size: 0.95em;
}
.notice--ok { border-left-color: var(--muted); background: var(--paper-2); }
.errors { margin: 0; padding-left: 1.1rem; }

/* ----------------------------------------------------------------- sharing */

.share {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 0.9rem 1.25rem;
  margin: 3rem 0 0; padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
}

/* The one button that matters: most of his readers are on Facebook, and a
   share is how a new one arrives. Given Facebook's own blue so it is
   recognised as what it is, rather than read as another link in a row. */
.fb-share {
  display: inline-flex; align-items: center; gap: 0.55rem;
  background: #1877F2;
  color: #fff;
  font-family: Archivo, sans-serif;
  font-size: 0.9rem; font-weight: 600;
  padding: 0.65rem 1.1rem;
  border-radius: 6px;
  text-decoration: none;
  line-height: 1;
}
.fb-share:hover { background: #0F5FD1; color: #fff; text-decoration: none; }
.fb-share:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.fb-share__mark { width: 1.15em; height: 1.15em; flex: none; }

.share__rest { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 0.75rem 1rem; }
.share__label { font-family: Archivo, sans-serif; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); }
.share a, .share button {
  font-family: Archivo, sans-serif; font-size: 0.83rem;
  color: var(--ink-2); background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 0.2em; text-decoration-color: var(--rule);
}
.share a:hover, .share button:hover { color: var(--accent); text-decoration-color: currentColor; }

/* ------------------------------------------------------------- neighbours  */

.neighbours {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin-top: 4rem; background: var(--rule);
  border: 1px solid var(--rule);
}
.neighbours a {
  display: block; text-decoration: none; color: inherit;
  background: var(--paper); padding: 1.5rem;
}
.neighbours a:hover { background: var(--paper-2); }
.neighbours a:hover .neighbours__title { color: var(--accent); }
.neighbours__dir {
  display: block; font-family: Archivo, sans-serif;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 0.5rem;
}
.neighbours__title { font-size: 1.2rem; line-height: 1.25; font-weight: 600; }
.neighbours__next { text-align: right; }

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

.footer {
  margin-top: 5rem; padding-block: 2.5rem 3.5rem;
  border-top: 1px solid var(--rule);
  background: var(--paper-2);
  color: var(--muted); font-size: 0.88rem;
}
.footer__inner { display: flex; flex-wrap: wrap; gap: 0.7rem 2rem; justify-content: space-between; align-items: baseline; }
.footer a { color: var(--muted); }
.footer a:hover { color: var(--accent); }

.empty { padding: 3.5rem 0; color: var(--muted); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* =========================================================== artwork + rail */

/* Public-domain engravings. They carry a lot of fine detail, so they are given
 * real width and a warm mat rather than being boxed into a thumbnail. */
.hero-art {
  max-width: var(--wide);
  margin: 0 auto 3rem;
  padding-inline: var(--gap);
}
.hero-art img {
  display: block; width: 100%;
  background: var(--paper-2);
  border: 1px solid var(--rule);
}
.hero-art figcaption {
  font-family: Archivo, sans-serif;
  font-size: 0.7rem; letter-spacing: 0.08em;
  color: var(--muted); margin-top: 0.6rem; text-align: right;
}

.featured { padding: 0; overflow: hidden; }
.featured__art {
  display: block; width: 100%; height: 15rem;
  object-fit: cover; object-position: center 30%;
  border-bottom: 1px solid var(--rule);
  filter: saturate(0.85);
}
.featured__body { padding: clamp(1.4rem, 3vw, 2.1rem); }
.featured__title { margin-top: 0.5rem; }

.pieces--cards {
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 2.25rem;
}
.pieces--cards > li { border-bottom: 0; }
.pieces--cards .piece { padding: 0; }
.piece__art {
  display: block; width: 100%; height: 8.5rem;
  object-fit: cover; object-position: center 30%;
  border: 1px solid var(--rule);
  margin-bottom: 0.85rem;
  background: var(--paper-2);
  filter: saturate(0.85);
  transition: filter 150ms ease;
}
.piece:hover .piece__art { filter: saturate(1); }

/* ---------------------------------------------------------------- the rail */

.layout-rail {
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: var(--gap);
  display: grid;
  gap: 3rem;
  align-items: start;
}
@media (min-width: 62rem) {
  /* The rail sits to the left of the writing and runs its full height, divided
     from it by a rule. Source order still puts the prose first -- on a phone a
     reader should meet the essay before the furniture -- so the grid, not the
     markup, is what moves the rail across. */
  .layout-rail {
    grid-template-columns: 16.5rem minmax(0, 1fr);
    gap: 3rem;
    align-items: stretch;
  }
  .layout-rail > :first-child { grid-column: 2; grid-row: 1; }
  .layout-rail > .rail        { grid-column: 1; grid-row: 1; }
  .layout-rail .rail {
    border-right: 1px solid var(--rule);
    padding-right: 2.5rem;
    align-content: start;   /* full-height column, blocks held at the top */
  }
}
/* Inside the rail layout the prose sets its own measure; the shell would
   otherwise centre it and fight the grid. */
.layout-rail .article { max-width: var(--measure); }

/* The post header and its artwork centre themselves across the page when they
   stand alone. Inside the writing column the column already positions them, so
   their own centring and gutters would only inset them twice. */
.layout-rail .post-head,
.layout-rail .hero-art {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

.rail { display: grid; gap: 2.25rem; font-size: 0.92rem; }
.rail__block { }
.rail__head {
  font-family: Archivo, sans-serif;
  font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.9rem; padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule);
}

.rail__verse .rail__quote {
  margin: 0 0 0.75rem;
  padding: 0 0 0 1rem;
  border-left: 3px solid var(--accent);
  background: none;
  font-size: 1rem;
  color: var(--ink);
}
.rail__verse .rail__quote p { margin: 0 0 0.6rem; line-height: 1.5; }
.rail__verse cite {
  font-family: Archivo, sans-serif; font-style: normal;
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--accent);
}
.rail__from { margin: 0; font-size: 0.82rem; color: var(--muted); }

.rail__portrait {
  display: block; width: 100%; aspect-ratio: 1;
  object-fit: cover; margin-bottom: 0.9rem;
  border: 1px solid var(--rule);
}
.rail__text { margin: 0 0 0.7rem; color: var(--ink-2); font-size: 0.9rem; line-height: 1.55; }

.rail__books { list-style: none; margin: 0; padding: 0; }
.rail__books li {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 0.75rem; padding: 0.35rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.rail__books li:last-child { border-bottom: 0; }
.rail__books a { text-decoration: none; color: var(--ink); }
.rail__books a:hover { color: var(--accent); text-decoration: underline; }
.rail__more { margin: 0.9rem 0 0; font-size: 0.85rem; }
.rail__count {
  font-family: Archivo, sans-serif; font-size: 0.72rem;
  color: var(--muted); font-variant-numeric: tabular-nums;
}

.rail__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.rail__list a { display: block; line-height: 1.35; text-decoration: none; color: var(--ink); }
.rail__list a:hover { color: var(--accent); }
.rail__date {
  display: block; font-family: Archivo, sans-serif;
  font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); margin-top: 0.2rem;
}

/* A draft, or a published piece, seen from the admin side before anyone else. */
.preview-note {
  max-width: var(--wide);
  margin: 0 auto 2rem;
  padding: 0.8rem var(--gap);
  background: var(--accent-soft);
  border-bottom: 1px solid var(--accent);
  color: var(--ink);
  font-family: Archivo, sans-serif;
  font-size: 0.85rem;
}