/*
Theme Name:   Homebrew Chronicle
Theme URI:    https://example.com
Description:  A three-section site for a D&D campaign hub, TTRPG blog, and gamification blog — unified layout and type, distinct accent color per section. Storybook/illuminated-manuscript aesthetic.
Version:      2.0.0
Author:       Homebrew Chronicle
Text Domain:  hbc
*/

/* ============================================================
   FONTS
   Cormorant Garamond — display: tall, calligraphic, storybook
   EB Garamond        — body: warm, readable old-style serif
   Cinzel             — labels/eyebrows: carved, illuminated-capital feel
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Cinzel:wght@500;600&display=swap');

/* ============================================================
   TOKENS
============================================================ */
:root{
  --paper:        #EFE3C4;
  --paper-raised:  #FBF3DE;
  --ink:          #2D2113;
  --ink-faded:    #6E5C3F;
  --line:         #C7A86B;

  --accent:       #5C2A2E; /* default = campaign; overridden per section below */
  --accent-soft:  #5C2A2E1A;

  --campaign:      #5C2A2E; /* deep wine / dragon's-blood */
  --campaign-soft: #5C2A2E1A;
  --ttrpg:         #1F4438; /* deep enchanted forest */
  --ttrpg-soft:    #1F44381F;
  --gamification:      #95661B; /* antique gold / amber */
  --gamification-soft: #95661B1F;

  --gilt:         #A9762E; /* shared ornamental gold, used for rules + flourishes */
  --gilt-bright:  #C99A45;
  --shadow-deep:  rgba(36, 24, 10, 0.35);

  --font-display: "Cormorant Garamond", "Iowan Old Style", serif;
  --font-body:    "EB Garamond", Georgia, serif;
  --font-mono:    "Cinzel", "Cormorant Garamond", serif; /* repurposed for carved/label text, not literal code */

  --spine-w: 64px;
  --max-w: 760px;
  --gap: clamp(1.5rem, 4vw, 3rem);
}

body.section-campaign     { --accent: var(--campaign);     --accent-soft: var(--campaign-soft); }
body.section-ttrpg        { --accent: var(--ttrpg);        --accent-soft: var(--ttrpg-soft); }
body.section-gamification { --accent: var(--gamification); --accent-soft: var(--gamification-soft); }

/* ============================================================
   RESET / BASE
============================================================ */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background-color:var(--paper);
  background-image:
    radial-gradient(ellipse at top, rgba(255,250,230,0.5), transparent 60%),
    radial-gradient(ellipse at bottom, rgba(36,24,10,0.10), transparent 65%),
    repeating-linear-gradient(0deg, rgba(110,92,63,0.035) 0px, rgba(110,92,63,0.035) 1px, transparent 1px, transparent 3px),
    repeating-linear-gradient(90deg, rgba(110,92,63,0.025) 0px, rgba(110,92,63,0.025) 1px, transparent 1px, transparent 3px);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; text-decoration-style:dotted; text-decoration-thickness:1px; }
:focus-visible{ outline:2px solid var(--gilt); outline-offset:3px; }
ul{ padding-left:1.3em; }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  font-style:italic;
  line-height:1.18;
  margin:0 0 0.5em;
  color:var(--ink);
}
h1{ font-size:clamp(2.2rem, 5.5vw, 3.4rem); letter-spacing:0.01em; }
h2{ font-size:clamp(1.55rem, 3vw, 2.1rem); }
h3{ font-size:1.3rem; }
p{ margin:0 0 1.25em; }

.hbc-banner h1::after,
.hbc-post__header h1::after{
  content:"";
  display:block;
  width:120px;
  height:10px;
  margin-top:0.5rem;
  background:
    radial-gradient(circle at center, var(--gilt) 0 2px, transparent 2.5px) 50% 50% / 10px 10px no-repeat,
    linear-gradient(to right, transparent, var(--gilt) 20%, var(--gilt) 80%, transparent);
  background-size: 10px 10px, 100% 1px;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  opacity:0.8;
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:0.72rem;
  font-weight:600;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--accent);
}

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

/* ============================================================
   LAYOUT SHELL — spine + content
============================================================ */
.hbc-shell{
  display:grid;
  grid-template-columns: var(--spine-w) 1fr;
  min-height:100vh;
}

.hbc-spine{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), transparent 18%),
    linear-gradient(90deg, rgba(0,0,0,0.25), transparent 12%, transparent 88%, rgba(0,0,0,0.25)),
    var(--ink);
  color:var(--paper);
  position:sticky;
  top:0;
  height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  padding:1.25rem 0;
  z-index:20;
  box-shadow: inset -6px 0 14px rgba(0,0,0,0.25);
}
.hbc-spine__home{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  border:1.5px solid var(--gilt);
  color:var(--gilt-bright); font-family:var(--font-display); font-weight:700; font-style:italic; font-size:1.15rem;
  background:radial-gradient(circle at 30% 25%, rgba(201,154,69,0.18), transparent 70%);
}
.hbc-spine__glyph{
  width:32px; height:32px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent);
  border:1px solid var(--gilt);
  color:var(--paper);
  font-size:0.95rem;
}
.hbc-spine__label{
  writing-mode:vertical-rl;
  text-orientation:mixed;
  font-family:var(--font-mono);
  font-size:0.72rem;
  font-weight:600;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--gilt-bright);
  margin:1rem 0;
}
.hbc-spine__mid{
  display:flex; flex-direction:column; align-items:center; gap:0.85rem;
  flex:1; justify-content:center;
}
.hbc-spine__meta{
  writing-mode:vertical-rl;
  font-family:var(--font-display);
  font-style:italic;
  font-size:0.7rem;
  letter-spacing:0.08em;
  color:rgba(239,227,196,0.55);
}
.hbc-spine__ticks{
  display:flex; flex-direction:column; gap:4px;
}
.hbc-spine__ticks span{ width:11px; height:1px; background:rgba(201,154,69,0.4); }
.hbc-spine__menu-toggle{ display:none; }

@media (max-width: 760px){
  .hbc-shell{ grid-template-columns:1fr; }
  .hbc-spine{
    position:static; height:auto; width:auto;
    flex-direction:row; padding:0.6rem 1rem;
    box-shadow: inset 0 -6px 14px rgba(0,0,0,0.25);
  }
  .hbc-spine__label{ writing-mode:horizontal-tb; margin:0; }
  .hbc-spine__mid{ flex-direction:row; }
  .hbc-spine__meta, .hbc-spine__ticks{ display:none; }
}

.hbc-page{ display:flex; flex-direction:column; min-height:100vh; }
.hbc-page > .hbc-main{ flex:1; }

/* ============================================================
   HEADER / NAV
============================================================ */
.hbc-header{
  background:var(--paper-raised);
  border-bottom:2px solid var(--line);
  box-shadow: 0 1px 0 var(--gilt);
  padding: 1.2rem var(--gap);
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.hbc-sitename{
  font-family:var(--font-display); font-weight:700; font-style:italic; font-size:1.5rem; color:var(--ink);
}
.hbc-sitename a{ color:inherit; }
.hbc-nav{ display:flex; gap:1.6rem; flex-wrap:wrap; }
.hbc-nav a{
  font-family:var(--font-mono); font-size:0.76rem; font-weight:600; letter-spacing:0.07em;
  text-transform:uppercase; color:var(--ink-faded);
}
.hbc-nav a:hover, .hbc-nav a.is-active{ color:var(--accent); text-decoration:none; }

/* ============================================================
   MAIN CONTENT
============================================================ */
.hbc-main{ padding: var(--gap); }
.hbc-content-narrow{ max-width:var(--max-w); margin:0 auto; }

.hbc-banner{
  position:relative;
  padding: clamp(2.5rem,8vw,5rem) var(--gap) clamp(2.2rem,6vw,3.2rem);
  background: radial-gradient(ellipse at top, var(--accent-soft), transparent 70%);
  border-bottom:2px solid var(--line);
  text-align:center;
}
.hbc-banner__inner{ max-width:var(--max-w); margin:0 auto; }
.hbc-banner h1::after{ margin-left:auto; margin-right:auto; }
.hbc-banner p.lede{ font-size:1.15rem; font-style:italic; color:var(--ink-faded); max-width:42em; margin-left:auto; margin-right:auto; }

.hbc-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:1.6rem;
}
.hbc-card{
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-left:none;
  padding:1.4rem 1.5rem;
  border-radius:3px;
  position:relative;
  box-shadow: 0 2px 6px rgba(36,24,10,0.10);
}
.hbc-card::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg, var(--gilt-bright), var(--accent));
  border-radius:3px 0 0 3px;
}
.hbc-card--has-thumb{
  padding:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.hbc-card__thumb{
  display:block;
  line-height:0;
  border-bottom:1px solid var(--line);
}
.hbc-card__thumb img{
  display:block;
  width:100%;
  height:160px;
  object-fit:cover;
  filter:sepia(0.12) saturate(1.05);
}
.hbc-card--has-thumb .hbc-card__body{
  padding:1.4rem 1.5rem;
}
.hbc-card h3{ margin-bottom:0.35rem; }
.hbc-card h3 a{ color:var(--ink); }
.hbc-card h3 a:hover{ color:var(--accent); }
.hbc-card__meta{
  font-family:var(--font-mono); font-size:0.7rem; font-weight:600; color:var(--ink-faded);
  letter-spacing:0.06em; text-transform:uppercase; margin-bottom:0.5rem;
  display:flex; gap:0.6rem; flex-wrap:wrap;
}
.hbc-card__excerpt{ color:var(--ink-faded); font-size:0.98rem; margin-bottom:0; }

.hbc-hub-cards{
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
  background:var(--line); border:1px solid var(--line);
  box-shadow:0 3px 10px rgba(36,24,10,0.12);
}
@media (max-width:760px){ .hbc-hub-cards{ grid-template-columns:1fr; } }
.hbc-hub-card{
  background:var(--paper-raised);
  padding:2.6rem 2.1rem;
  display:flex; flex-direction:column; gap:0.8rem;
  position:relative;
}
.hbc-hub-card__glyph{
  width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.15rem; color:var(--paper);
  border:1px solid var(--gilt);
}
.hbc-hub-card--campaign .hbc-hub-card__glyph{ background:var(--campaign); }
.hbc-hub-card--ttrpg .hbc-hub-card__glyph{ background:var(--ttrpg); }
.hbc-hub-card--gamification .hbc-hub-card__glyph{ background:var(--gamification); }
.hbc-hub-card h2{ font-size:1.5rem; }
.hbc-hub-card a.hbc-hub-card__link{
  font-family:var(--font-mono); font-size:0.76rem; font-weight:600; text-transform:uppercase; letter-spacing:0.07em;
  margin-top:auto;
}

.hbc-post__header{ margin-bottom:2.2rem; }
.hbc-post__meta{
  font-family:var(--font-mono); font-size:0.76rem; font-weight:600; color:var(--ink-faded);
  text-transform:uppercase; letter-spacing:0.06em; margin-bottom:0.7rem;
  display:flex; gap:0.8rem; flex-wrap:wrap;
}
.hbc-post__meta a{ color:var(--accent); }
.hbc-post__body{ font-size:1.1rem; }
.hbc-post__body h2{ margin-top:2em; }
.hbc-post__body h2::before{ content:"❖ "; color:var(--gilt); font-size:0.8em; }
.hbc-post__body blockquote{
  border-left:3px solid var(--gilt); margin:1.6em 0; padding:0.25em 1.3em;
  color:var(--ink-faded); font-style:italic; background:var(--accent-soft);
}
.hbc-post__tags{ margin-top:2.6rem; padding-top:1.6rem; border-top:1px solid var(--line); display:flex; gap:0.5rem; flex-wrap:wrap; }
.hbc-post__tags a{
  font-family:var(--font-mono); font-size:0.72rem; font-weight:600; padding:0.3rem 0.7rem;
  border:1px solid var(--line); border-radius:20px; color:var(--ink-faded);
}
.hbc-post__tags a:hover{ color:var(--accent); border-color:var(--accent); text-decoration:none; }

.hbc-breadcrumb{
  font-family:var(--font-mono); font-size:0.74rem; font-weight:600; color:var(--ink-faded);
  text-transform:uppercase; letter-spacing:0.05em;
  padding: 0.9rem var(--gap) 0;
}
.hbc-breadcrumb a{ color:var(--ink-faded); }
.hbc-breadcrumb a:hover{ color:var(--accent); }

.hbc-btn{
  display:inline-block; font-family:var(--font-mono); font-size:0.8rem; font-weight:600;
  letter-spacing:0.06em; text-transform:uppercase;
  border:1.5px solid var(--accent); color:var(--accent);
  background:var(--paper-raised);
  padding:0.6rem 1.3rem; border-radius:2px;
  box-shadow: 2px 2px 0 var(--accent-soft);
}
.hbc-btn:hover{ background:var(--accent); color:var(--paper); text-decoration:none; }

.hbc-footer{
  border-top:2px solid var(--line);
  padding:2.1rem var(--gap);
  font-family:var(--font-mono); font-size:0.76rem; font-weight:600; color:var(--ink-faded);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
}

.hbc-pagination{ display:flex; gap:0.75rem; margin-top:2.6rem; font-family:var(--font-mono); font-size:0.82rem; font-weight:600; }
.hbc-pagination a, .hbc-pagination span{ padding:0.45rem 0.85rem; border:1px solid var(--line); background:var(--paper-raised); }
.hbc-pagination .current{ background:var(--accent); color:var(--paper); border-color:var(--accent); }

/* ============================================================
   SIDEBAR LAYOUT
============================================================ */
.hbc-layout{
  display:grid;
  grid-template-columns: minmax(0,1fr) 260px;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items:start;
}
.hbc-layout > .hbc-content-narrow{ max-width:none; margin:0; }

@media (max-width: 680px){
  .hbc-layout{ grid-template-columns:1fr; }
  .hbc-sidebar{ order:2; border-top:1px solid var(--line); padding-top:2rem; margin-top:1rem; }
}

.hbc-sidebar{ display:flex; flex-direction:column; gap:2.1rem; }
.hbc-widget{ font-size:0.95rem; }
.hbc-widget__title{
  font-family:var(--font-mono); font-size:0.74rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--ink-faded); margin-bottom:0.8rem;
  border-bottom:1px solid var(--line); padding-bottom:0.4rem;
}
.hbc-sidebar__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.55rem; }
.hbc-sidebar__list a{ color:var(--ink); font-family:var(--font-display); font-style:italic; }
.hbc-sidebar__list a:hover{ color:var(--accent); text-decoration:none; }
.hbc-sidebar__list li.is-current a{ color:var(--accent); font-weight:600; }
.hbc-sidebar .widget{ font-size:0.95rem; }
.hbc-sidebar ul{ list-style:none; padding-left:0; }
.hbc-sidebar select, .hbc-sidebar input[type="search"]{ width:100%; font-family:var(--font-body); }