/* ============================================================
   1100 HARVARD STREET — site-wide design system
   "The Temple on Harvard Street"
   Style key: 1930s Texas PWA/Art-Deco Moderne (Lamar Q. Cato's own
   idiom — symmetrical massing, fossil limestone + granite, brushed
   metal spandrels, streamlined ornament) laid over an archival
   newsprint/parchment ground. Every hue below is validated for
   categorical/CVD safety via the dataviz skill's validate_palette.js.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;900&family=Cinzel+Decorative:wght@700;900&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Oswald:wght@300;400;500;600&display=swap');

:root{
  /* ---- surfaces & ink (light / "parchment") ---- */
  --surface-0:      #ece1c8;   /* page plane — aged paper */
  --surface-1:      #f5eeda;   /* card / panel plane */
  --surface-2:      #fbf6e8;   /* raised plane (image mats, callouts) */
  --ink-primary:    #201a12;   /* warm near-black, like iron-gall ink */
  --ink-secondary:  #4a4030;
  --ink-muted:      #7c7057;
  --rule-hairline:  rgba(32,26,18,0.16);
  --rule-strong:    rgba(32,26,18,0.32);

  /* ---- Deco metals & ceremonial accents ---- */
  --brass:          #a8791f;
  --brass-bright:   #c99a2e;
  --brass-deep:     #7d5a17;
  --oxblood:        #7a2430;
  --oxblood-bright: #a83a4a;
  --verdigris:      #2f5744;
  --verdigris-bright:#1f9a5c;
  --marble-pink:    #c98f8a;   /* the literal pink Tennessee marble */

  /* ---- validated categorical era palette (light) ---- */
  --era-1: #c99a2e;  /* Prologue / Founding, 1891–1916 — brass */
  --era-2: #1f9a5c;  /* First Hall, 1916–1929 — emerald */
  --era-3: #a83a4a;  /* The Temple Rises, 1930 — oxblood */
  --era-4: #0f8ea3;  /* Golden Age & Foreclosure, 1931–1935 — sapphire teal */
  --era-5: #d14f6a;  /* The Long Second Act, 1936–1980 — ruby rose */
  --era-6: #b8823a;  /* Rebirth, 1981–2000 — umber-amber */
  --era-7: #3f5fc2;  /* Today — slate-sapphire */

  --shadow-card: 0 1px 0 rgba(32,26,18,0.06), 0 8px 24px -12px rgba(32,26,18,0.35);
  --radius-card: 2px;

  --font-display: 'Cinzel', 'Cinzel Decorative', Georgia, serif;
  --font-body: 'Lora', Georgia, 'Times New Roman', serif;
  --font-label: 'Oswald', 'Cinzel', sans-serif;

  --measure: 42rem;         /* prose column */
  --measure-wide: 60rem;
}

@media (prefers-color-scheme: dark){
  :root{
    --surface-0:      #16130e;
    --surface-1:      #1e1a13;
    --surface-2:      #262019;
    --ink-primary:    #f2ead9;
    --ink-secondary:  #cbbfa0;
    --ink-muted:      #8f8265;
    --rule-hairline:  rgba(242,234,217,0.14);
    --rule-strong:    rgba(242,234,217,0.30);

    --brass:          #d4a23a;
    --brass-bright:   #e6ba52;
    --brass-deep:     #b8862a;
    --oxblood:        #c25865;
    --oxblood-bright: #d1636f;
    --verdigris:      #4a9974;
    --verdigris-bright:#3fc47f;
    --marble-pink:    #d6a5a0;

    --era-1: #ab7d24;
    --era-2: #1f9a5c;
    --era-3: #a83a4a;
    --era-4: #0f8ea3;
    --era-5: #d14f6a;
    --era-6: #b8823a;
    --era-7: #3f5fc2;

    --shadow-card: 0 1px 0 rgba(0,0,0,0.4), 0 8px 28px -12px rgba(0,0,0,0.6);
  }
}
:root[data-theme="dark"]{ color-scheme: dark; }
:root[data-theme="light"]{ color-scheme: light; }

/* ============================================================
   RESET / BASE
   ============================================================ */
*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background:
    radial-gradient(ellipse at top, rgba(255,255,255,0.05), transparent 60%),
    var(--surface-0);
  background-attachment: fixed;
  color: var(--ink-primary);
  font: 400 18px/1.7 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
/* subtle paper grain, self-contained (no external asset) */
body::before{
  content:"";
  position: fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.1  0 0 0 0 0.08  0 0 0 0 0.05  0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark){
  body::before{ opacity:.35; mix-blend-mode: overlay; }
}
main, header, footer{ position: relative; z-index:1; }

h1,h2,h3,h4{ font-family: var(--font-display); font-weight:600; line-height:1.15; margin: 0 0 .5em; letter-spacing:.01em; color: var(--ink-primary); }
h1{ font-weight:700; }
p{ margin: 0 0 1.25em; }
a{ color: var(--oxblood); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover{ color: var(--brass-deep); }
@media (prefers-color-scheme: dark){ a{ color: var(--marble-pink); } a:hover{ color: var(--brass-bright); } }
img{ max-width:100%; height:auto; display:block; }
::selection{ background: var(--brass); color:#1a1510; }

.label, .eyebrow{
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .78rem;
  font-weight: 500;
  color: var(--brass-deep);
}
@media (prefers-color-scheme: dark){ .label,.eyebrow{ color: var(--brass-bright); } }

/* ============================================================
   ORNAMENT — the Deco vocabulary: brass rules, chevrons, sunbursts
   ============================================================ */
.rule{
  border:0; height:1px; margin: 2.5em auto;
  background: linear-gradient(90deg, transparent, var(--rule-strong) 20%, var(--rule-strong) 80%, transparent);
}
.rule-brass{
  border:0; height:2px; margin: 2.5em auto; max-width: 220px;
  background: linear-gradient(90deg, transparent, var(--brass) 15%, var(--brass-bright) 50%, var(--brass) 85%, transparent);
}
.ornament-break{
  display:flex; align-items:center; justify-content:center; gap:.9em;
  margin: 3em auto; max-width: 320px; color: var(--brass);
  font-size: 1.1rem; letter-spacing: .4em;
}
.ornament-break::before,.ornament-break::after{
  content:""; flex:1; height:1px;
  background: linear-gradient(90deg, transparent, var(--rule-strong));
}
.ornament-break::after{ background: linear-gradient(90deg, var(--rule-strong), transparent); }

.deco-frame{
  position: relative;
  border: 1px solid var(--rule-strong);
  padding: 2px;
}
.deco-frame::before{
  content:""; position:absolute; inset:6px; pointer-events:none;
  border: 1px solid var(--brass); opacity:.55;
}
.deco-frame .corner{ position:absolute; width:14px; height:14px; border-color: var(--brass); opacity:.85; }
.deco-frame .corner.tl{ top:-1px; left:-1px; border-top:2px solid; border-left:2px solid; }
.deco-frame .corner.tr{ top:-1px; right:-1px; border-top:2px solid; border-right:2px solid; }
.deco-frame .corner.bl{ bottom:-1px; left:-1px; border-bottom:2px solid; border-left:2px solid; }
.deco-frame .corner.br{ bottom:-1px; right:-1px; border-bottom:2px solid; border-right:2px solid; }

.chevron-strip{
  height: 10px;
  background-image: linear-gradient(135deg, var(--brass) 25%, transparent 25%), linear-gradient(225deg, var(--brass) 25%, transparent 25%);
  background-position: 0 0; background-size: 14px 14px; background-repeat: repeat-x;
  opacity:.6;
}

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
.wrap{ max-width: var(--measure-wide); margin: 0 auto; padding: 0 1.5rem; }
.prose{ max-width: var(--measure); margin: 0 auto; padding: 0 1.5rem; }
.prose img{ border-radius: var(--radius-card); }

/* ============================================================
   NAV / MASTHEAD
   ============================================================ */
.site-header{
  position: sticky; top:0; z-index: 20;
  background: color-mix(in srgb, var(--surface-0) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule-hairline);
}
.site-header .bar{
  max-width: var(--measure-wide); margin:0 auto; padding: .85rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.site-header .wordmark{
  font-family: var(--font-display); font-weight:700; font-size:1.05rem;
  letter-spacing:.06em; color: var(--ink-primary); text-decoration:none;
  display:flex; align-items:center; gap:.6em;
}
.site-header .wordmark small{
  display:block; font-family: var(--font-label); font-weight:400;
  letter-spacing:.15em; font-size:.62rem; color: var(--ink-muted); text-transform:uppercase;
}
.site-header nav{ display:flex; gap:1.4rem; flex-wrap:wrap; }
.site-header nav a{
  font-family: var(--font-label); font-size:.82rem; letter-spacing:.06em;
  text-transform:uppercase; color: var(--ink-secondary); text-decoration:none;
  padding-bottom:3px; border-bottom: 1px solid transparent;
}
.site-header nav a:hover, .site-header nav a.active{ color: var(--oxblood); border-color: var(--brass); }
@media (prefers-color-scheme: dark){ .site-header nav a:hover, .site-header nav a.active{ color: var(--brass-bright); } }

/* ============================================================
   HERO / MASTHEAD PANEL
   ============================================================ */
.hero{
  position:relative; overflow:hidden;
  padding: 5rem 1.5rem 4rem;
  text-align:center;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-1) 92%, transparent), transparent),
    var(--surface-1);
  border-bottom: 1px solid var(--rule-hairline);
}
.hero .eyebrow{ display:block; margin-bottom:1.1em; }
.hero h1{
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  max-width: 16ch; margin: 0 auto .4em;
}
.hero .dek{
  max-width: 44ch; margin: 0 auto 1.6em; color: var(--ink-secondary);
  font-size: 1.15rem; font-style: italic;
}
.hero .meta{ font-family: var(--font-label); font-size:.78rem; letter-spacing:.1em; color: var(--ink-muted); text-transform:uppercase; }

/* ============================================================
   CARDS — chapters, spotlights, timeline entries
   ============================================================ */
.card{
  background: var(--surface-1);
  border: 1px solid var(--rule-hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 1.6rem;
}
.card-grid{
  display:grid; gap: 1.4rem;
  grid-template-columns: repeat(auto-fill, minmax(260px,1fr));
}
.card .label{ display:block; margin-bottom:.5em; }
.card h3{ font-size:1.2rem; margin-bottom:.4em; }
.card p{ color: var(--ink-secondary); font-size:.98rem; margin-bottom:.8em; }
.card a.more{ font-family: var(--font-label); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; }

/* ============================================================
   ARCHIVAL FIGURE — clipping mounted like a museum plate
   ============================================================ */
figure.clip{
  margin: 2.4em auto; max-width: 34rem;
  background: var(--surface-2);
  border: 1px solid var(--rule-hairline);
  padding: 14px 14px 4px;
  box-shadow: var(--shadow-card);
}
figure.clip img{ width:100%; border: 1px solid var(--rule-hairline); }
figure.clip figcaption{
  padding: .9em .3em 1em;
  font-family: var(--font-label);
  font-size: .82rem; line-height:1.55; letter-spacing:.01em;
  color: var(--ink-secondary); text-align:left;
}
figure.clip figcaption .src{
  display:block; margin-top:.5em; text-transform:uppercase;
  letter-spacing:.1em; font-size:.68rem; color: var(--brass-deep);
}
@media (prefers-color-scheme: dark){ figure.clip figcaption .src{ color: var(--brass-bright); } }
figure.clip.float-right{ float:right; margin-left:2em; max-width: 20rem; }
figure.clip.float-left{ float:left; margin-right:2em; max-width: 20rem; }
@media (max-width: 640px){ figure.clip.float-right, figure.clip.float-left{ float:none; max-width:100%; } }

/* ============================================================
   PULL-QUOTE — direct primary-source excerpt
   ============================================================ */
blockquote.source{
  position:relative; margin: 2.2em 0; padding: 1.1em 1.6em 1.1em 2rem;
  background: var(--surface-2);
  border-left: 3px solid var(--brass);
  font-style: italic; color: var(--ink-primary);
  font-size: 1.08rem; line-height:1.65;
}
blockquote.source cite{
  display:block; margin-top:.7em; font-style: normal;
  font-family: var(--font-label); font-size:.76rem; letter-spacing:.1em;
  text-transform:uppercase; color: var(--ink-muted);
}

/* ============================================================
   ERA BADGES (ties to the graphical timeline's palette)
   ============================================================ */
.era-badge{ display:inline-flex; align-items:center; gap:.5em; font-family: var(--font-label); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; }
.era-badge::before{ content:""; width:9px; height:9px; border-radius:50%; background: var(--dot,var(--brass)); display:inline-block; }
.era-1::before{ --dot: var(--era-1); } .era-2::before{ --dot: var(--era-2); } .era-3::before{ --dot: var(--era-3); }
.era-4::before{ --dot: var(--era-4); } .era-5::before{ --dot: var(--era-5); } .era-6::before{ --dot: var(--era-6); } .era-7::before{ --dot: var(--era-7); }

/* ============================================================
   BUTTONS / CTAs
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family: var(--font-label); font-size:.82rem; letter-spacing:.08em; text-transform:uppercase;
  padding: .8em 1.5em; border: 1px solid var(--brass); color: var(--ink-primary);
  text-decoration:none; background: transparent; transition: background .15s, color .15s;
}
.btn:hover{ background: var(--brass); color:#1a1510; }
.btn.primary{ background: var(--oxblood); border-color: var(--oxblood); color:#f5eeda; }
.btn.primary:hover{ background: var(--oxblood-bright); border-color: var(--oxblood-bright); }
.btn-row{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top: 1.8em; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  margin-top: 5rem; padding: 3rem 1.5rem 4rem;
  border-top: 1px solid var(--rule-hairline);
  background: var(--surface-1);
}
.site-footer .wrap{ display:grid; gap:2rem; grid-template-columns: 2fr 1fr 1fr; }
.site-footer h4{ font-size:.85rem; }
.site-footer a{ color: var(--ink-secondary); font-size:.92rem; }
.site-footer .fine{ color: var(--ink-muted); font-size:.82rem; line-height:1.6; }
@media (max-width: 720px){ .site-footer .wrap{ grid-template-columns: 1fr; } }

/* ============================================================
   TABLE OF CONTENTS / CHAPTER RAIL
   ============================================================ */
.toc{ list-style:none; margin:0; padding:0; }
.toc li{ border-bottom: 1px dotted var(--rule-hairline); }
.toc a{
  display:flex; justify-content:space-between; gap:1em; align-items:baseline;
  padding: .8em 0; text-decoration:none; color: var(--ink-primary);
}
.toc a .num{ font-family: var(--font-label); color: var(--brass-deep); font-size:.85rem; min-width:2.4em; }
.toc a .yr{ font-family: var(--font-label); color: var(--ink-muted); font-size:.8rem; white-space:nowrap; }
.toc a:hover .num{ color: var(--oxblood); }

/* ============================================================
   UTILITIES
   ============================================================ */
.center{ text-align:center; }
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.small{ font-size:.88rem; color: var(--ink-secondary); }
.drop-cap:first-letter{
  font-family: var(--font-display); font-size: 3.4em; line-height:.78; float:left;
  padding: .05em .08em 0 0; color: var(--oxblood); font-weight:700;
}
@media (prefers-color-scheme: dark){ .drop-cap:first-letter{ color: var(--marble-pink); } }