/* cwinspear.com
   A faithful rebuild of the Novela theme's look: full-bleed image panels,
   geometric sans headings, Palatino body text, gold drop caps, and
   hairline outlined buttons in wide-tracked caps.

   Fonts: visitors on Windows and macOS get the original Century Gothic and
   Palatino. Everyone else falls back to self-hosted Jost and EB Garamond,
   which sit in the same families. */

@font-face {
  font-family: "Jost";
  src: url("fonts/jost-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jost";
  src: url("fonts/jost-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "EB Garamond";
  src: url("fonts/eb-garamond-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("fonts/eb-garamond-latin-400-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}

:root {
  --paper: #FFFFFF;
  --ink: #515151;          /* body copy, as the theme set it */
  --heading: #333333;
  --nav: #212121;
  --gold: #BF9456;         /* drop caps and accents */
  --gold-dark: #8A6630;    /* same hue, dark enough for link text */
  --rule: #E2E2E2;
  --panel: #F7F6F4;
  --on-image: #FFFFFF;

  --display: "Century Gothic", "Jost", "Questrial", "Futura", "Trebuchet MS", sans-serif;
  --text: "Palatino Linotype", "Book Antiqua", Palatino, "URW Palladio L", "EB Garamond", Georgia, serif;

  --measure: 34rem;
  --gutter: 1.25rem;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.125rem;
  line-height: 1.8;
}
img { max-width: 100%; height: auto; }

a { color: var(--gold-dark); text-decoration: none; border-bottom: 1px solid rgba(191, 148, 86, .45); }
a:hover { color: var(--gold); border-bottom-color: var(--gold); }
:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 3px; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; background: #fff; padding: .5rem .75rem; z-index: 60; border: 1px solid var(--rule); }

h1, h2, h3 {
  font-family: var(--display);
  color: var(--heading);
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 1rem;
}
h1 { font-size: 2rem; font-weight: 700; }
h2 { font-size: 1.875rem; }
h3 { font-size: 1.375rem; }

/* Buttons: hairline box, wide-tracked caps, as Novela draws them ---------- */
.button {
  display: inline-block;
  font-family: var(--text);
  font-size: .8125rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  line-height: 1.5;
  padding: .9rem 1.6rem;
  border: 2px solid var(--heading);
  color: var(--heading);
  background: none;
  transition: background-color .25s, color .25s;
}
.button:hover { background: var(--heading); color: #fff; border-color: var(--heading); }
.button--light { border-color: #fff; color: #fff; }
.button--light:hover { background: #fff; color: var(--heading); }

/* Header: fixed hairline bar, as the theme's menu sits over the hero ------ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .5rem 2rem;
  padding: 1rem var(--gutter);
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--rule);
  backdrop-filter: saturate(140%) blur(6px);
}
.brand {
  font-family: var(--display); font-size: 1.25rem; letter-spacing: .02em;
  color: var(--nav); border: 0;
}
.site-header nav { display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; }
.site-header nav a {
  font-family: var(--display); font-size: 1rem; color: var(--nav);
  border: 0; padding: .2rem 0; border-bottom: 2px solid transparent;
}
.site-header nav a:hover, .site-header nav a[aria-current] { color: var(--gold-dark); border-bottom-color: var(--gold); }

/* Hero: full-bleed photograph with the title laid over it ----------------- */
.hero {
  position: relative;
  min-height: min(82vh, 44rem);
  display: flex; align-items: center;
  padding: clamp(3rem, 9vw, 7rem) var(--gutter);
  background: #2A2621 center / cover no-repeat;
  color: var(--on-image);
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(20, 18, 16, .62) 0%, rgba(20, 18, 16, .34) 45%, rgba(20, 18, 16, .12) 100%);
}
.hero-inner { position: relative; z-index: 1; max-width: 40rem; }
.hero h1 {
  font-family: var(--display);
  color: var(--on-image);
  font-size: clamp(2.75rem, 7vw, 4.5rem);
  font-weight: 300;
  line-height: 1.05;
  margin: 0 0 1.5rem;
}
.hero-tagline {
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  line-height: 1.8;
  margin: 0 0 2.25rem;
  max-width: 30rem;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}

/* Split panels: image flush to one edge, text in the other half ----------- */
.split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.split-photo { background: var(--panel) center / cover no-repeat; min-height: 28rem; }
.split-body { padding: clamp(2.5rem, 6vw, 5rem) clamp(1.25rem, 5vw, 4rem); align-self: center; max-width: 36rem; }
.split--reverse .split-photo { order: 2; }

@media (max-width: 52rem) {
  .split { grid-template-columns: 1fr; }
  .split-photo { min-height: 17rem; order: 0 !important; }
  .split-body { max-width: none; }
}

/* Drop cap on the opening paragraph of a panel --------------------------- */
.dropcap::first-letter {
  float: left;
  font-family: var(--display);
  font-size: 3.3em;
  line-height: .92;
  color: var(--gold);
  padding: .08em .12em 0 0;
}

/* Plain sections and reading column -------------------------------------- */
.section { padding: clamp(3rem, 7vw, 5.5rem) var(--gutter); }
.section--tint { background: var(--panel); }
.section-inner { max-width: var(--measure); margin: 0 auto; }
.section-inner--wide { max-width: 58rem; }
.section-heading { text-align: center; margin-bottom: 2.5rem; }
.prose p, .prose ul, .prose ol { margin: 0 0 1.4em; }
.lede { color: #6B6B6B; }
.note { color: #7A7A7A; font-style: italic; }
.more { display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin-top: 2rem; }
.center { text-align: center; }

.stories ul { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.stories li { margin: 0 0 1.25em; padding-left: 1.1rem; border-left: 2px solid var(--gold); }

/* Post lists ------------------------------------------------------------- */
.post-list { list-style: none; padding: 0; margin: 0; }
.post-list li {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: .15rem 1.5rem; padding: 1.1rem 0; border-bottom: 1px solid var(--rule);
}
.post-list li:first-child { border-top: 1px solid var(--rule); }
.post-list a { border: 0; }
.post-title { font-family: var(--display); font-size: 1.25rem; color: var(--heading); line-height: 1.3; }
.post-list a:hover .post-title { color: var(--gold-dark); }
.post-meta { font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; color: #8A8A8A; }
.post-meta a { color: inherit; border: 0; }
.post-meta a:hover { color: var(--gold-dark); }

/* Single entries --------------------------------------------------------- */
.entry { max-width: var(--measure); margin: 0 auto; padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.entry header { text-align: center; margin-bottom: 2.5rem; }
.entry h1 { font-size: clamp(1.875rem, 4.5vw, 2.5rem); font-weight: 400; margin-bottom: .75rem; }
.entry-body { overflow-wrap: break-word; }
.entry-body figure { margin: 2.5rem 0; }
.entry-body figcaption { font-size: .875rem; color: #8A8A8A; margin-top: .6rem; text-align: center; }
.entry-body blockquote { margin: 2rem 0; padding-left: 1.4rem; border-left: 2px solid var(--gold); font-style: italic; }
.entry-body img { display: block; margin: 2rem auto; }
.entry-body iframe { max-width: 100%; }

/* Novels ----------------------------------------------------------------- */
.novels h2 { font-size: clamp(1.75rem, 4vw, 2.25rem); }
.book { margin-bottom: 3.5rem; }
.book-links { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-bottom: 2rem !important; }
.backlist { border-top: 1px solid var(--rule); padding-top: 3rem; }
.backlist-note { font-size: .9375rem; color: #7A7A7A; }
.backlist h3 { margin-top: 2.5rem; font-size: 1.5rem; }

/* Timeline --------------------------------------------------------------- */
.timeline-header { text-align: center; max-width: var(--measure); margin: 0 auto clamp(2rem, 5vw, 3rem); }
.year {
  max-width: 52rem; margin: 0 auto;
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: 2.5rem;
  border-top: 1px solid var(--rule); padding: 2.25rem 0;
}
.year-num {
  font-family: var(--display); font-size: 2.25rem; font-weight: 300; line-height: 1;
  color: var(--gold); margin: 0; align-self: start;
  position: sticky; top: 5rem;
}
.year ol { list-style: none; padding: 0; margin: 0; }
.year li { margin-bottom: 1.75rem; }
.year li:last-child { margin-bottom: 0; }
.year h3 {
  font-family: var(--display); font-size: .8125rem; font-weight: 400;
  letter-spacing: .18em; text-transform: uppercase; color: #8A8A8A; margin: 0 0 .4rem;
}
.year li p { margin: 0 0 .6em; }
@media (max-width: 44rem) {
  .year { grid-template-columns: 1fr; row-gap: .5rem; padding: 1.75rem 0; }
  .year-num { position: static; font-size: 1.875rem; }
}

/* Footer ----------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--rule);
  padding: 2.5rem var(--gutter) 3.5rem;
  display: flex; flex-wrap: wrap; gap: .75rem 2.5rem; justify-content: center;
  text-align: center;
  font-size: .875rem; color: #8A8A8A;
}
.site-footer p { margin: 0; display: flex; gap: 1.5rem; }
.site-footer a { color: #6B6B6B; }