/* Creative Chaos Hub — Poster/Parchment Theme
   Matches Creative Chaos print branding: warm paper, charcoal ink, gold accents.
   Applies to .cc-* classes used by the public site.

   Brand anchors:
   - Navy (supporting accent): #0c2340
   - Warm paper: #f2e2bf
   - Ink: #2a2a2a
   - Gold: #c9a03a
*/

:root{
  --ink:#2a2a2a;
  --ink-2: rgba(42,42,42,.78);
  --paper:#f2e2bf;
  --paper-2:#ead6aa;
  --paper-3:#e2c88f;
  --gold:#c9a03a;
  --gold-2:#b98f27;
  --navy:#0c2340;
  --white:#ffffff;

  --card: rgba(255,255,255,.58);
  --card-2: rgba(255,255,255,.44);
  --border: rgba(42,42,42,.14);
  --border-2: rgba(42,42,42,.20);
  --shadow: 0 14px 44px rgba(0,0,0,.16);
  --radius: 20px;

  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  /* A condensed/impacty stack to mimic the poster headline without relying on webfonts */
  --display: "Arial Narrow", "Franklin Gothic Medium", "Franklin Gothic", "Impact", "Haettenschweiler", "Arial Black", system-ui, sans-serif;
}

*{ box-sizing:border-box; }
html,body{ height:100%; position:relative; }

/* Subtle swirls + paper grain (SVG) */
body.cc-body{
  margin:0;
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.6;
  background:
    radial-gradient(1200px 700px at 15% 5%, rgba(255,255,255,.42), transparent 60%),
    radial-gradient(900px 650px at 85% 0%, rgba(201,160,58,.12), transparent 58%),
    radial-gradient(900px 650px at 50% 105%, rgba(12,35,64,.06), transparent 60%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 55%, var(--paper) 100%);
  position: relative;
}

/* === Writer watermark background (matches poster art) === */
body::before{
  /* Writer watermark */
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  background:
    linear-gradient(rgba(245,236,214,.65), rgba(245,236,214,.65)),
    url("assets/img/writer-bg.png");
  background-repeat:no-repeat;
  background-position: 78% 58%;
  background-size: clamp(520px, 62vw, 980px);
  opacity:1;
  filter: grayscale(100%) contrast(115%) brightness(95%);
  mix-blend-mode:multiply;
  pointer-events:none;
}

body::after{
  /* paper grain overlay */
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 10%, rgba(0,0,0,.06), transparent 55%),
    radial-gradient(circle at 80% 30%, rgba(0,0,0,.05), transparent 60%),
    repeating-linear-gradient(0deg,
      rgba(0,0,0,.018) 0px,
      rgba(0,0,0,.018) 1px,
      transparent 2px,
      transparent 6px
    );
  mix-blend-mode:multiply;
  opacity:.35;
}


/* Ensure content sits above watermark */
body > *{ position:relative; z-index:1; }

body.cc-body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.40;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900' viewBox='0 0 900 900'%3E%3Crect width='900' height='900' fill='none'/%3E%3Cg fill='none' stroke='%232a2a2a' stroke-opacity='.22'%3E%3Cpath d='M120 200c140-140 320 60 180 180S0 520 160 640s340-40 220-220S40 280 220 220s220 220 0 220-140-140 0-180 220 60 120 220-380 120-340-80 420-260 520-40-140 360-420 240-220-320 60-360 460 120 240 420-280 200-260-160 240-340 280 120-80 220-280 100 60-220 400-80 480 140-40 420-340 260-340-260 200-300 500 40 300 520-320 340-340-200 80-340 340-140 420 200-60 420-420 100-500-300 20-440 320-40 340 300-40 500-420 120-500-280 0-440 260-40 300 260' stroke-width='2' stroke-linecap='round'/%3E%3C/g%3E%3Cg opacity='.22'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='900' height='900' filter='url(%23n)'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 900px 900px;
  mix-blend-mode: multiply;
}

img{ max-width:100%; height:auto; display:block; }

a{
  color: var(--navy);
  text-decoration: none;
  text-underline-offset: 3px;
}
a:hover{ text-decoration: underline; }

code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .92em;
  padding: .12rem .35rem;
  border-radius: .55rem;
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(42,42,42,.16);
}

.cc-main{
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: 18px 0 64px;
}

/* ===== Header / Nav ===== */
.cc-header{
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(10px);
  background: rgba(242,226,191,.78);
  border-bottom: 1px solid rgba(42,42,42,.14);
}

.cc-header-inner{
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 14px 0;
}

.cc-logo{
  display:flex;
  align-items:center;
  gap: 12px;
  color: var(--ink);
  text-decoration:none;
  min-width: 240px;
}
.cc-logo:hover{ text-decoration:none; }

.cc-logo-mark{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  font-weight: 1000;
  letter-spacing: .5px;
  color: rgba(42,42,42,.92);
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.42));
  border: 1px solid rgba(42,42,42,.18);
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
}

.cc-logo-title{
  display:block;
  font-family: var(--display);
  font-weight: 1000;
  letter-spacing: .4px;
  text-transform: uppercase;
}
.cc-logo-sub{ display:block; font-size: 12px; color: rgba(42,42,42,.70); margin-top: 2px; }

.cc-nav{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.cc-nav a{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 11px;
  border-radius: 999px;
  color: var(--ink);
  border: 1px solid transparent;
}

.cc-nav a:hover{
  text-decoration:none;
  background: rgba(255,255,255,.55);
  border-color: rgba(42,42,42,.14);
}

.cc-nav .cc-nav-cta{
  background: linear-gradient(180deg, rgba(201,160,58,1), rgba(185,143,39,1));
  color: rgba(0,0,0,.88);
  border-color: rgba(0,0,0,.20);
  font-weight: 900;
}
.cc-nav .cc-nav-cta:hover{ filter: brightness(1.03); }

/* Mobile nav toggle */
.cc-nav-toggle{
  border: 1px solid rgba(42,42,42,.18);
  background: rgba(255,255,255,.55);
  border-radius: 14px;
  padding: 10px 10px;
  cursor:pointer;
  color: var(--ink);
}
.cc-nav-toggle:focus{ outline: 2px solid rgba(12,35,64,.45); outline-offset: 2px; }
.cc-nav-line{ display:block; width: 22px; height: 2px; background: rgba(42,42,42,.85); border-radius:999px; }
.cc-nav-toggle .cc-nav-line + .cc-nav-line{ margin-top: 5px; }

@media (max-width: 820px){
  .cc-nav-toggle{ display:block; }
  .cc-nav{ width: 100%; display:none; padding: 10px 0 2px; }
  .cc-nav.cc-nav-open{ display:flex; }
  .cc-header-inner{ flex-wrap:wrap; }
}

@media (min-width: 821px){
  .cc-nav-toggle{ display:none; }
}

/* ===== Hero ===== */
.cc-hero{
  width: min(1120px, calc(100% - 32px));
  margin: 26px auto 0;
  padding: 34px 30px;
  border-radius: calc(var(--radius) + 8px);
  border: 1px solid rgba(42,42,42,.18);
  background:
    radial-gradient(900px 520px at 10% 25%, rgba(255,255,255,.62), transparent 58%),
    radial-gradient(800px 520px at 100% 0%, rgba(201,160,58,.14), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.40));
  box-shadow: var(--shadow);
  position: relative;
  overflow:hidden;
}

.cc-hero::after{
  content:"";
  position:absolute;
  inset: -140px -170px auto auto;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle at 30% 30%, rgba(201,160,58,.26), rgba(201,160,58,0) 62%);
  transform: rotate(12deg);
  pointer-events:none;
}

.cc-hero-content{ max-width: 78ch; }

.cc-hero h1{
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: clamp(2.05rem, 4.0vw, 3.05rem);
  line-height: 1.05;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.cc-hero p{ margin: 0 0 18px; color: var(--ink-2); font-size: 1.06rem; }

.cc-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 10px;
}

.cc-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 999px;
  border: 1px solid rgba(42,42,42,.20);
  background: rgba(255,255,255,.62);
  color: var(--ink);
  font-weight: 850;
  box-shadow: 0 10px 18px rgba(0,0,0,.10);
}

.cc-btn:hover{ text-decoration:none; filter: brightness(1.02); }

.cc-btn-primary{
  background: linear-gradient(180deg, rgba(201,160,58,1), rgba(185,143,39,1));
  border-color: rgba(0,0,0,.22);
}

.cc-btn-secondary{
  background: rgba(255,255,255,.70);
}

/* ===== Sections / Cards ===== */
.cc-section{
  margin-top: 30px;
}

.cc-section h2{
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .7px;
  font-size: 1.55rem;
  margin: 0 0 12px;
}

.cc-section .cc-lead{
  margin: 0 0 16px;
  color: var(--ink-2);
}

.cc-card{
  background: var(--card);
  border: 1px solid rgba(42,42,42,.16);
  border-radius: var(--radius);
  box-shadow: 0 14px 32px rgba(0,0,0,.10);
  padding: 18px;
}

.cc-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}

.cc-col-6{ grid-column: span 6; }
.cc-col-4{ grid-column: span 4; }
.cc-col-3{ grid-column: span 3; }

@media (max-width: 900px){
  .cc-col-6{ grid-column: span 12; }
  .cc-col-4{ grid-column: span 12; }
  .cc-col-3{ grid-column: span 6; }
}

@media (max-width: 560px){
  .cc-col-3{ grid-column: span 12; }
}

.cc-pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(42,42,42,.16);
  background: rgba(255,255,255,.55);
  color: rgba(42,42,42,.85);
  font-weight: 750;
  font-size: .92rem;
}

/* Lists look like the poster: clean + readable */
ul{ padding-left: 18px; }
li{ margin: 6px 0; }

/* ===== Footer ===== */
.cc-footer{
  margin-top: 40px;
  padding: 18px 0 28px;
  border-top: 1px solid rgba(42,42,42,.14);
  color: rgba(42,42,42,.70);
}

.cc-footer a{ color: rgba(42,42,42,.80); }

/* ===== Admin table helper classes (used on admin pages too) ===== */
.admin-header {
  margin: 20px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}

.admin-nav a { margin-right:10px; }

.admin-table {
  width:100%;
  border-collapse:collapse;
  margin-top:15px;
  font-size:.95rem;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(42,42,42,.14);
  border-radius: 12px;
  overflow:hidden;
}

.admin-table th,
.admin-table td {
  padding:8px 10px;
  border-bottom:1px solid rgba(42,42,42,.12);
  text-align:left;
}

.admin-table th{ background: rgba(255,255,255,.75); font-family: var(--display); text-transform: uppercase; letter-spacing: .5px; }