/*
Theme Name: Vellum
Theme URI: https://example.com/vellum
Author: Your Name
Author URI: https://example.com
Description: A refined, dark longform theme for essays and ideas, with an illuminated drop-cap, a featured essay beside a numbered long-reads list and a literary serif type system (Spectral). Per-category colour accents, dark and light modes, self-hosted fonts and one-click demo content with original artwork.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vellum
Tags: blog, two-columns, right-sidebar, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, full-width-template
*/

:root {
  --bg: #16130f;
  --surface: #1e1a14;
  --surface-2: #26211a;
  --text: #e8e0d0;
  --text-2: #bdb4a2;
  --muted: #8a8070;
  --line: #332c22;
  --accent: #c2a35a;
  --accent-ink: #16130f;
  --accent-hover: #e8e0d0;
  --accent-hover-ink: #16130f;

  --font-display: "Spectral", Georgia, "Times New Roman", serif;
  --font-body: "Spectral", Georgia, "Times New Roman", serif;
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --w-display: 600;
  --lh-display: 1.12;
  --track-display: 0;

  --radius: 6px;
  --radius-ui: 5px;
  --footer-bg: #100d0a;
  --footer-text: #e8e0d0;
  --footer-muted: #938977;
  --footer-line: rgba(255,255,255,.1);
  --overlay: linear-gradient(180deg, rgba(10,8,6,0) 28%, rgba(10,8,6,.92) 100%);
}
:root[data-theme="light"] {
  --bg: #f6f1e6;
  --surface: #fffdf7;
  --surface-2: #efe8d8;
  --text: #2a241a;
  --text-2: #544c3c;
  --muted: #857b68;
  --line: #e2d9c5;
  --accent: #8a6d2f;
  --accent-ink: #ffffff;
  --accent-hover: #2a241a;
  --accent-hover-ink: #ffffff;
  --footer-bg: #2a241a;
  --footer-text: #f6f1e6;
  --footer-muted: #b3a890;
  --overlay: linear-gradient(180deg, rgba(20,16,10,0) 30%, rgba(20,16,10,.9) 100%);
}

body { font-size: 18px; }
.meta, .cat, .primary-menu a, .mobile-menu a, .section-link, .widget-title, .btn, .header-cta { font-family: var(--font-ui); }
.brand__name { font-family: var(--font-display); font-weight: 600; font-size: 1.55rem; letter-spacing: .01em; }
h1, h2, h3, h4, .card__title, .mini__title, .entry-title, .section-title { font-family: var(--font-display); font-weight: 600; letter-spacing: 0; }
.entry-content { font-family: var(--font-body); }

.site-header { border-bottom: 1px solid var(--line); }
.primary-menu > li > a { font-weight: 500; font-size: .86rem; text-transform: uppercase; letter-spacing: .08em; }
.header-cta { background: var(--accent); color: var(--accent-ink); border-radius: var(--radius-ui); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: .78rem; }
.cat { color: hsl(var(--cat-hue,42) 48% 62%); font-family: var(--font-ui); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .7rem; }
:root[data-theme="light"] .cat { color: hsl(var(--cat-hue,42) 42% 38%); }
.card-overlay .cat { color: #fff; }
.section-title { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.section-head { border-top: 1px solid var(--accent); padding-top: .7rem; align-items: center; }

/* ---------- Featured essay + long reads ---------- */
.vl-top__grid { display: grid; gap: clamp(28px, 4vw, 52px); align-items: start; }
@media (min-width: 900px) { .vl-top__grid { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); } }
.vl-feature .media { margin-bottom: 1.2rem; }
.vl-feature__title { font-size: clamp(1.9rem, 4vw, 3.1rem); line-height: 1.06; margin: .4rem 0 .8rem; }
.vl-feature__lead { font-family: var(--font-body); font-size: 1.18rem; line-height: 1.68; color: var(--text-2); margin-bottom: 1rem; }
.vl-feature__lead::first-letter { font-family: var(--font-display); float: left; font-size: 3.6em; line-height: .78; padding: .04em .12em 0 0; color: var(--accent); font-weight: 600; }
.vl-feature__more { font-family: var(--font-ui); font-weight: 600; color: var(--accent); font-size: .92rem; }

.vl-reads { border-top: 1px solid var(--accent); padding-top: 1rem; }
@media (min-width: 900px) { .vl-reads { border-top: 0; border-left: 1px solid var(--line); padding-left: clamp(24px, 3vw, 40px); padding-top: 0; } }
.vl-reads__head { font-family: var(--font-ui); font-size: .95rem; text-transform: uppercase; letter-spacing: .12em; color: var(--accent); margin-bottom: .6rem; font-weight: 700; }
.vl-reads__list { list-style: none; margin: 0; padding: 0; }
.vl-read { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.vl-read:last-child { border-bottom: 0; }
.vl-read__num { font-family: var(--font-display); font-weight: 600; font-size: 1.7rem; line-height: 1; color: var(--accent); opacity: .6; }
.vl-read__title { font-size: 1.14rem; line-height: 1.24; margin: .2rem 0 .35rem; }

/* ---------- Sections ---------- */
.vl-band { background: var(--surface); border-block: 1px solid var(--line); padding-block: clamp(32px, 4vw, 52px); }
.vl-archive { display: grid; gap: 0; }
.vl-archive .card-row { grid-template-columns: 150px 1fr; gap: 18px; padding: 1.2rem 0; border-bottom: 1px solid var(--line); }
.vl-archive .card-row:first-child { padding-top: 0; }

/* ---------- Drop-cap on single posts ---------- */
.single .entry-content > p:first-of-type::first-letter { font-family: var(--font-display); float: left; font-size: 3.8em; line-height: .76; padding: .04em .1em 0 0; color: var(--accent); font-weight: 600; }

/* ---------- Signup ---------- */
.vl-signup .signup--band { background: var(--surface); border: 1px solid var(--accent); border-radius: var(--radius); padding: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: center; }
.vl-signup .signup--band .signup__title { font-family: var(--font-display); font-size: clamp(1.6rem, 2.8vw, 2.3rem); color: var(--text); }
.vl-signup .signup--band .signup__desc { color: var(--text-2); }
.vl-signup .signup--band .signup__form { min-width: 320px; }
.vl-signup .signup--band .signup__button { background: var(--accent); color: var(--accent-ink); }
@media (max-width: 760px) { .vl-signup .signup--band { grid-template-columns: 1fr; } .vl-signup .signup--band .signup__form { min-width: 0; } }

.entry-content { font-size: 1.18rem; line-height: 1.78; }
.entry-content blockquote { border-left: 2px solid var(--accent); font-family: var(--font-display); font-style: italic; font-size: 1.3rem; line-height: 1.4; color: var(--text); }