/* ═══════════════════════════════════════════════════════════════
   SEPTIMUS CARR · MAIN STYLESHEET
   Fonts: Cormorant Garamond (display) · EB Garamond (body)
   Loaded via Google Fonts in baseof.html
═══════════════════════════════════════════════════════════════ */

/* ── Reset & base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: #F7F3EC;
  color: #1C1410;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ── Animations ───────────────────────────────────────────── */
@keyframes up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Site header ──────────────────────────────────────────── */
.sc-head {
  padding: 18px 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: #2A0E38;
  color: #EAE4F4;
  text-decoration: none;
}
.logo-wrap { display: flex; flex-direction: column; text-decoration: none; }
.logo-img  { width: 200px; height: auto; mix-blend-mode: screen; display: block; margin-bottom: -4px; }
.logo-tag  { font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: #C4A055; padding-left: 3px; }
.sc-nav    { display: flex; gap: 2px; align-items: center; }
.sc-nav a  { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #C8C0DC;
             text-decoration: none; padding: 6px 11px; transition: color .2s; }
.sc-nav a:hover { color: #EAE4F4; }
.nav-sub   { color: #C4A055 !important; border: 1px solid rgba(196,160,85,.5);
             padding: 6px 14px !important; margin-left: 6px; }

/* ── Category nav ─────────────────────────────────────────── */
.cat-outer  { display: flex; align-items: center; padding: 0 6px;
              background: #331546; border-bottom: 1px solid rgba(0,0,0,.25); }
.cat-arr    { background: none; border: none; color: #C4A055; font-size: 24px;
              padding: 2px 10px; cursor: pointer; line-height: 1; flex-shrink: 0;
              opacity: .35; transition: opacity .2s; }
.cat-arr:hover { opacity: 1; }
.cat-scroll { display: flex; overflow-x: auto; scrollbar-width: none;
              -ms-overflow-style: none; flex: 1; }
.cat-scroll::-webkit-scrollbar { display: none; }
.cat-a      { font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
              text-decoration: none; padding: 11px 15px; white-space: nowrap;
              flex-shrink: 0; border-bottom: 2px solid transparent;
              transition: all .25s; }
/* Per-category nav colours */
.nav-all        { color: rgba(196,160,85,.82); }
.nav-all:hover,
.nav-all.active { color: #C4A055; border-bottom-color: #C4A055; }
.nav-classics        { color: rgba(212,168,64,.82); }
.nav-classics:hover,
.nav-classics.active { color: #D4A840; border-bottom-color: #D4A840; }
.nav-fiction        { color: rgba(128,184,232,.82); }
.nav-fiction:hover,
.nav-fiction.active { color: #80B8E8; border-bottom-color: #80B8E8; }
.nav-drama        { color: rgba(176,144,224,.82); }
.nav-drama:hover,
.nav-drama.active { color: #B090E0; border-bottom-color: #B090E0; }
.nav-essays        { color: rgba(144,200,112,.82); }
.nav-essays:hover,
.nav-essays.active { color: #90C870; border-bottom-color: #90C870; }
.nav-nonfiction        { color: rgba(160,184,112,.82); }
.nav-nonfiction:hover,
.nav-nonfiction.active { color: #A0B870; border-bottom-color: #A0B870; }
.nav-opera        { color: rgba(224,128,144,.82); }
.nav-opera:hover,
.nav-opera.active { color: #E08090; border-bottom-color: #E08090; }

/* ── Pill colours ─────────────────────────────────────────── */
.pill { font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
        padding: 2px 8px; border-radius: 2px; }
.pill-classics   { background: #FFF0D6; color: #7A5518; }
.pill-fiction    { background: #E8F0F8; color: #1A4878; }
.pill-drama      { background: #EDE0F5; color: #4A2878; }
.pill-essays     { background: #E2EED8; color: #285018; }
.pill-nonfiction { background: #EAF0E0; color: #304818; }
.pill-opera      { background: #F5E0E3; color: #8B1A28; }

/* ── Homepage: Featured essay ─────────────────────────────── */
.sc-feat { display: grid; grid-template-columns: 55% 45%; min-height: 390px;
           background: #2A0E38; color: #EAE4F4; }
.fi-wrap { overflow: hidden; position: relative; }
.fi      { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .6s; }
.fi-placeholder { width: 100%; height: 100%; background: #1A0828; }
.fi-wrap:hover .fi { transform: scale(1.025); }
.fi-sep  { position: absolute; right: 0; top: 0; width: 1px; height: 100%;
           background: rgba(255,255,255,.07); pointer-events: none; }
.ft      { padding: 52px 48px 52px 36px; display: flex; flex-direction: column; justify-content: center; }
.el      { font-size: 9.5px; letter-spacing: .28em; text-transform: uppercase; color: #9B4A6A;
           display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.el::before { content: ''; width: 20px; height: 1px; background: #9B4A6A; }
.ft-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 44px; font-weight: 400;
            line-height: 1.08; color: #EAE4F4; margin-bottom: 14px; }
.ft-sub  { font-style: italic; font-size: 16px; color: #B0A8CC; line-height: 1.5; margin-bottom: 20px; }
.ft-meta { font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; color: #7A70A0;
           display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ft-pill { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; padding: 2px 9px;
           border-radius: 2px; background: rgba(74,40,120,.45); color: #C8A8F0; }
.rl      { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px;
           font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: #C4A055;
           text-decoration: none; transition: gap .25s; }
.rl:hover { gap: 18px; }
.rl::after { content: '\2192'; font-size: 14px; }

/* ── Card (shared: homepage grid, archive, category pages) ── */
.sc-recent { padding: 50px 48px 58px; background: #F7F3EC; }
.arch-body { padding: 0 48px 72px; background: #F7F3EC; }
.sh, .rel-head { display: flex; align-items: center; gap: 16px; margin-bottom: 36px; }
.sl, .rel-head span { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 11px;
                       letter-spacing: .28em; text-transform: uppercase; color: #A09488; white-space: nowrap; }
.sr2, .rel-rule { flex: 1; height: 1px; background: #E2D9CC; }
.va   { font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: #A09488;
        text-decoration: none; white-space: nowrap; transition: color .2s; }
.va:hover { color: #8B1A28; }
.sg   { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 22px; }
.scard { cursor: pointer; }
.cthumb { aspect-ratio: 4/3; overflow: hidden; margin-bottom: 14px; border: 1px solid #E2D9CC; }
.ci   { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .5s; }
.ci-placeholder { width: 100%; height: 100%; background: #D8D0C8; }
.scard:hover .ci  { transform: scale(1.04); }
.scard:hover .ctt { color: #8B1A28; }
.cpills { display: flex; gap: 5px; margin-bottom: 7px; flex-wrap: wrap; }
.ctt  { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 19px; font-weight: 500;
        line-height: 1.22; color: #1C1410; margin-bottom: 5px; transition: color .2s;
        text-decoration: none; display: block; }
.csub { font-size: 13px; font-style: italic; color: #6A5E54; line-height: 1.4; margin-bottom: 6px; }
.cdt  { font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; color: #A09488; }

/* ── Archive header & year divider ───────────────────────── */
.arch-header { padding: 44px 48px 36px; background: #F7F3EC;
               border-bottom: 1px solid #E2D9CC; display: flex; align-items: baseline; gap: 18px; }
.arch-title  { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 42px;
               font-weight: 400; color: #1C1410; line-height: 1; }
.arch-count  { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: #A09488; }
.year-div    { display: flex; align-items: center; gap: 16px; padding-top: 44px; margin-bottom: 36px; }
.year-label  { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 17px; font-style: italic;
               letter-spacing: .22em; color: #7A6A5A; white-space: nowrap; }
.year-rule   { flex: 1; height: 1px; background: #E2D9CC; }

/* ── Sticky reading bar ───────────────────────────────────── */
.sticky { position: fixed; top: 0; left: 0; right: 0; z-index: 200; background: #2A0E38;
          padding: 9px 48px; display: flex; align-items: center; gap: 20px;
          transform: translateY(-100%); transition: transform .3s ease;
          border-bottom: 1px solid rgba(255,255,255,.08); }
.sticky.show    { transform: translateY(0); }
.sticky-logo    { width: 90px; height: auto; mix-blend-mode: screen; flex-shrink: 0; }
.sticky-title   { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic;
                  font-size: 15px; color: #D8D0EC; flex: 1; white-space: nowrap;
                  overflow: hidden; text-overflow: ellipsis; }
.sticky-back    { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #B0A8CC;
                  text-decoration: none; flex-shrink: 0; transition: color .2s; }
.sticky-back:hover { color: #EAE4F4; }
.progress-bar   { position: absolute; bottom: 0; left: 0; height: 2px;
                  background: #C4A055; width: 0%; transition: width .08s linear; }

/* ── Article: cover image ─────────────────────────────────── */
.cover-wrap  { width: 100%; height: 460px; overflow: hidden; background: #1C1410; }
.cover-img   { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Article: shell & metadata ────────────────────────────── */
.article-outer { background: #F7F3EC; padding-bottom: 72px; }
.article-inner { max-width: 680px; margin: 0 auto; padding: 0 32px; }
.art-meta  { display: flex; align-items: center; gap: 10px; padding-top: 44px;
             margin-bottom: 20px; flex-wrap: wrap; }
.art-date  { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #A09488; }
.art-read  { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #A09488; }
.meta-dot  { color: #D0C8BC; font-size: 12px; }
.art-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 52px; font-weight: 400;
             line-height: 1.06; color: #1C1410; margin-bottom: 16px; }
.art-sub   { font-style: italic; font-size: 20px; color: #5A4E44; line-height: 1.4; margin-bottom: 22px; }
.art-byline { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #C4A055; margin-bottom: 32px; }
.art-rule  { border: none; border-top: 1px solid #C4A055; margin-bottom: 40px; opacity: .5; }

/* ── Article: body typography ─────────────────────────────── */
.article-body { font-size: 19px; line-height: 1.72; }
.article-body p { margin-bottom: 1.5em; }
.article-body p:first-child::first-letter {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 4.2em; font-weight: 400; float: left;
  line-height: .78; margin: 6px 8px -4px 0; color: #2A0E38;
}

/* ── Article: section subheadings ─────────────────────────── */
.section-head {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic; font-weight: 400; font-size: 26px;
  text-align: center; color: #1C1410; margin: 56px 0 32px;
}
.section-head::before {
  content: '\25C6 \25C6 \25C6';
  display: block; font-size: 12px; color: #C4A055;
  margin-bottom: 16px; letter-spacing: 10px; font-style: normal;
}

/* ── Article: blockquote ──────────────────────────────────── */
blockquote {
  border-left: 2px solid #C4A055; margin: 36px 0;
  padding: 2px 0 2px 28px; font-style: italic;
  color: #3A3028; font-size: 18px; line-height: 1.65;
}
blockquote cite {
  display: block; margin-top: 8px; font-size: 13px;
  font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: #A09488;
}

/* ── Article: pull quote ──────────────────────────────────── */
.pull-quote {
  text-align: center; font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic; font-size: 26px; font-weight: 400; color: #2A0E38;
  margin: 44px 0; padding: 24px 40px;
  border-top: 1px solid #C4A055; border-bottom: 1px solid #C4A055; line-height: 1.35;
}

/* ── Article: end ornament ────────────────────────────────── */
.art-end { text-align: center; margin: 56px 0 0; color: #C4A055; font-size: 12px; letter-spacing: 10px; }

/* ── Related essays ───────────────────────────────────────── */
.related    { background: #EDE6DA; padding: 52px 48px 60px; border-top: 1px solid #E2D9CC; }
.rel-grid   { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.rel-card   { cursor: pointer; text-decoration: none; color: inherit; display: block; }
.rel-thumb  { aspect-ratio: 3/2; overflow: hidden; margin-bottom: 12px; border: 1px solid #D8D0C4; }
.rel-img    { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .4s; }
.rel-card:hover .rel-img   { transform: scale(1.04); }
.rel-card:hover .rel-title { color: #8B1A28; }
.rel-pills  { display: flex; gap: 4px; margin-bottom: 6px; flex-wrap: wrap; }
.rel-title  { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 17px; font-weight: 500;
              line-height: 1.25; color: #1C1410; margin-bottom: 4px; transition: color .2s; }
.rel-date   { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: #A09488; }

/* ── Subscribe CTA ────────────────────────────────────────── */
.subscribe-cta { background: #2A0E38; padding: 52px 48px; text-align: center; color: #EAE4F4; }
.cta-logo   { width: 160px; height: auto; mix-blend-mode: screen; margin: 0 auto 6px; display: block; }
.cta-tag    { font-size: 9px; letter-spacing: .22em; text-transform: uppercase;
              color: #C4A055; margin-bottom: 24px; display: block; }
.cta-text   { font-style: italic; font-size: 19px; color: #B0A8CC; margin-bottom: 28px;
              max-width: 480px; margin-left: auto; margin-right: auto; line-height: 1.55; }
.cta-btn    { display: inline-block; background: #C4A055; color: #2A0E38;
              font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
              padding: 12px 28px; text-decoration: none; transition: background .2s; }
.cta-btn:hover { background: #D4B065; }

/* ── Footer ───────────────────────────────────────────────── */
.sc-foot  { padding: 20px 48px; display: flex; justify-content: space-between; align-items: center;
            border-top: 1px solid rgba(255,255,255,.07); background: #2A0E38; color: #EAE4F4; }
.flogo-img { width: 110px; height: auto; mix-blend-mode: screen; opacity: .45; }
.flinks   { display: flex; gap: 20px; align-items: center; }
.flinks a { font-size: 10px; letter-spacing: .15em; text-transform: uppercase;
            color: #B0A8CC; text-decoration: none; transition: color .2s; }
.flinks a:hover { color: #EAE4F4; }
.f-joint  { color: #C4A890 !important; border-left: 1px solid rgba(255,255,255,.15);
            padding-left: 20px; margin-left: 4px; }
.f-joint:hover { color: #EAE4F4 !important; }

/* ── Log section (for future use) ────────────────────────── */
.sc-log   { padding: 42px 48px 50px; border-top: 1px solid #E2D9CC; background: #EDE6DA; }
.lh       { display: flex; align-items: baseline; gap: 14px; margin-bottom: 28px; }
.lt       { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; font-weight: 400; color: #1C1410; }
.ls       { font-size: 14px; font-style: italic; color: #8A7A6A; }
.ll       { margin-left: auto; font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
            color: #8B1A28; text-decoration: none; }
.lmonths  { display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; }
.lm       { background: #FFF8E8; border: 1px solid #E8D8A8; border-radius: 3px; padding: 12px 12px 10px; }
.lmn      { font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: #9A7A3A;
            margin-bottom: 9px; padding-bottom: 7px; border-bottom: 1px solid #ECD8A0; }
.le       { display: flex; align-items: flex-start; gap: 6px; margin-bottom: 7px; }
.le-pill  { font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase;
            padding: 1px 6px; border-radius: 2px; flex-shrink: 0; margin-top: 2px; }
.let      { font-size: 12.5px; line-height: 1.3; color: #2A2018; font-family: 'EB Garamond', Georgia, serif; }