/*
 * theme.css — WRITTEN BY THE PLATFORM. Do not edit.
 *
 * Palette: Your colours (custom)
 * Source colours: #030509 #211d2c #f6efe1 #12213f #846425 #ffffff
 *
 * Every value below is either one of those five or derived from them, and each
 * one is contrast-corrected against this palette's own background. Consume
 * them with var(--token); never write a colour value in app code.
 */

:root {
  --canvas: #f6efe1;
  --surface: #fbf8f2;
  --surface-2: #eae3d6;
  --border: #d4cec3;
  --border-strong: #ada9a0;
  --ink: #211d2c;
  --muted: #6d686b;
  --accent: #12213f;
  --accent-hover: #0f1c36;
  --accent-ink: #ffffff;
  --accent-text: #846425;
  --accent-strong: #12213f;
  --accent-soft: #d6d2ca;
  --accent-border: #8f9298;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #dbe2cd;
  --success-strong: #116d34;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #eedcc7;
  --warning-strong: #994607;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #efd6c9;
  --danger-strong: #b91c1c;}

/* ====================================================================
 * app.css — ORIGIN. Premium international literary anthology, built for
 * INKDEW: cream/parchment ground, deep navy structure, antique-gold
 * accents used sparingly, burgundy reserved for status, fine gold hairline
 * rules, generous whitespace, restrained motion. Every colour below is a
 * design-system token — see <colour> — so the whole feel follows whatever
 * palette the owner has approved.
 * ==================================================================== */

:root {
  --radius-sm: 3px;
  --radius: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --content-max: 1180px;
  --measure: 68ch;
  --dur-2: 260ms;
}

/* ------------------------------------------------------------------ *
 * Brand mark — a small gold-ringed navy disc, everywhere "O" appears.
 * ------------------------------------------------------------------ */
.brand-mark {
  width: 40px; height: 40px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-sans); font-weight: 700; font-size: 18px;
  border: 1px solid var(--accent-border);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}
.brand-name { font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 14px; }

.origin-site .content { max-width: none; padding: 0; }
.origin-site main.content > * { margin: 0; }

/* ------------------------------------------------------------------ *
 * Sticky campaign bar
 * ------------------------------------------------------------------ */
.campaign-bar {
  position: sticky; top: 0; z-index: 40;
  background: var(--ink); color: color-mix(in srgb, var(--canvas) 92%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.campaign-bar-inner {
  max-width: var(--content-max); margin: 0 auto; padding: 10px var(--s-5);
  display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap;
}
.campaign-brand { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-sm); white-space: nowrap; }
.campaign-brand .brand-mark { width: 28px; height: 28px; font-size: 13px; }
.campaign-progress { display: flex; flex-direction: column; min-width: 200px; flex: 1; max-width: 260px; }
.campaign-progress > * + * { margin-top: 4px; }
.campaign-progress-track { height: 5px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--canvas) 22%, transparent); overflow: hidden; }
.campaign-progress-fill { height: 100%; background: var(--accent); border-radius: var(--radius-pill); transition: width var(--dur-2) var(--ease); }
.campaign-offer { display: flex; align-items: center; gap: var(--s-2); white-space: nowrap; font-size: var(--t-sm); }
.campaign-price s { opacity: 0.6; margin-right: 4px; }
.campaign-countdown { font-family: var(--font-mono); font-variant-numeric: tabular-nums; background: color-mix(in srgb, var(--canvas) 12%, transparent); padding: 2px 8px; border-radius: var(--radius-sm); }
.campaign-cta { margin-left: auto; white-space: nowrap; }

/* ------------------------------------------------------------------ *
 * Hero
 * ------------------------------------------------------------------ */
.hero {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, var(--canvas)), var(--canvas) 70%);
  padding: var(--s-12) var(--s-5) var(--s-10);
  border-bottom: 1px solid var(--border);
}
.hero-grid {
  max-width: var(--content-max); margin: 0 auto;
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--s-10); align-items: center;
}
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; gap: var(--s-8); text-align: center; } }
.eyebrow { font-size: var(--t-xs); letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-text); font-weight: 600; margin-bottom: var(--s-2); }
.hero-title { font-size: clamp(48px, 8vw, 96px); font-weight: 700; letter-spacing: 0.02em; line-height: 0.95; color: var(--ink); margin: 0 0 var(--s-2); }
.hero-subtitle { font-size: var(--t-xl); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-strong); font-weight: 600; margin-bottom: var(--s-3); }
.hero-desc { font-size: var(--t-lg); color: var(--ink); margin-bottom: var(--s-4); max-width: 46ch; }
@media (max-width: 860px) { .hero-desc { margin-left: auto; margin-right: auto; } }
.hero-intro { font-size: var(--t-sm); color: var(--muted); line-height: var(--lh-relaxed, 1.7); max-width: 54ch; margin-bottom: var(--s-6); }
@media (max-width: 860px) { .hero-intro { margin-left: auto; margin-right: auto; } }
.hero-actions { flex-wrap: wrap; margin-bottom: var(--s-5); justify-content: flex-start; }
@media (max-width: 860px) { .hero-actions { justify-content: center; } }
.hero-price { color: var(--muted); }
.hero-art { display: flex; justify-content: center; }
.hero-book { width: min(100%, 360px); border-radius: var(--radius); box-shadow: var(--shadow-raised); border: 1px solid var(--border-strong); transform: rotate(1.5deg); transition: transform var(--dur-2) var(--ease); }
.hero-book:hover { transform: rotate(0deg) scale(1.015); }

/* ------------------------------------------------------------------ *
 * Sections, generic rhythm
 * ------------------------------------------------------------------ */
.section { max-width: var(--content-max); margin: 0 auto; padding: var(--s-10) var(--s-5); }
.section-parchment { background: color-mix(in srgb, var(--accent) 5%, var(--canvas)); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section-parchment > .section { padding-left: 0; padding-right: 0; }
.section-head { max-width: 640px; margin: 0 auto var(--s-8); }
.section-head.center { text-align: center; }
.section-title { font-size: var(--t-4xl); font-weight: 700; letter-spacing: -0.01em; color: var(--ink); margin: 4px 0 var(--s-2); }
.section-sub { color: var(--muted); font-size: var(--t-base); }

/* gold divider used under section eyebrows, decorative only */
.section-head.center .eyebrow::after {
  content: ""; display: block; width: 54px; height: 2px; margin: var(--s-3) auto 0;
  background: var(--accent);
}

/* ------------------------------------------------------------------ *
 * About cards
 * ------------------------------------------------------------------ */
.about-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-4); }
@media (max-width: 860px) { .about-grid { grid-template-columns: repeat(2, 1fr); } }
.about-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--s-5) var(--s-4); text-align: center; transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.about-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.about-card-icon { color: var(--accent); margin-bottom: var(--s-2); }
.about-card-icon .icon { width: 24px; height: 24px; }

/* ------------------------------------------------------------------ *
 * Video
 * ------------------------------------------------------------------ */
.video-frame { max-width: 820px; margin: 0 auto; aspect-ratio: 16/9; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-raised); border: 1px solid var(--border-strong); }
.video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ------------------------------------------------------------------ *
 * Guidelines
 * ------------------------------------------------------------------ */
.guidelines-box { max-width: var(--measure); margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: var(--s-6); }

/* ------------------------------------------------------------------ *
 * Benefits
 * ------------------------------------------------------------------ */
.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
@media (max-width: 860px) { .benefit-grid { grid-template-columns: 1fr; } }
.benefit-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--s-6); transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.benefit-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-raised); }
.benefit-icon {
  width: 46px; height: 46px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent-strong); margin-bottom: var(--s-4);
}

/* ------------------------------------------------------------------ *
 * Submission form
 * ------------------------------------------------------------------ */
.submit-wrap { max-width: 720px; margin: 0 auto; }
.photo-drop {
  border: 2px dashed var(--border-strong); border-radius: var(--radius-lg); padding: var(--s-8);
  text-align: center; cursor: pointer; background: var(--surface); position: relative;
}
.photo-drop [data-photo-empty] { color: var(--muted); }
.photo-drop [data-photo-empty] .icon { color: var(--accent); }
.photo-drop [data-photo-preview] img { width: 140px; height: 140px; border-radius: var(--radius-pill); object-fit: cover; border: 3px solid var(--accent); }
.photo-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.price-panel { background: var(--accent-soft); border: 1px solid var(--accent-border); border-radius: var(--radius-lg); padding: var(--s-5); }
.review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
@media (max-width: 640px) { .review-grid { grid-template-columns: 1fr; } }
.review-block { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--s-4); }

.success-seal, .fail-seal {
  width: 72px; height: 72px; border-radius: var(--radius-pill); display: flex; align-items: center; justify-content: center;
  margin: 0 auto;
}
.success-seal { background: var(--success-soft); color: var(--success-strong); }
.fail-seal { background: var(--danger-soft); color: var(--danger-strong); }

/* ------------------------------------------------------------------ *
 * Voices of ORIGIN directory
 * ------------------------------------------------------------------ */
.voices-stats { max-width: 420px; margin: 0 auto var(--s-6); justify-content: center; gap: var(--s-10); }
.stat-inline { text-align: center; }
.stat-inline-value { display: block; font-size: var(--t-3xl); font-weight: 700; color: var(--accent-strong); font-family: var(--font-mono); }
.stat-inline-label { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }

.poet-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
@media (max-width: 960px) { .poet-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .poet-grid { grid-template-columns: repeat(2, 1fr); } }
.poet-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--s-5) var(--s-3); text-align: center; cursor: pointer; font: inherit; color: inherit;
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.poet-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-raised); border-color: var(--accent-border); }
.poet-photo { width: 76px; height: 76px; margin: 0 auto var(--s-3); border-radius: var(--radius-pill); overflow: hidden; border: 2px solid var(--accent-border); display: flex; align-items: center; justify-content: center; background: var(--accent-soft); }
.poet-photo img { width: 100%; height: 100%; object-fit: cover; }
.poet-name { font-weight: 600; }
.poet-poem { color: var(--accent-text); margin-top: 4px; }

/* ------------------------------------------------------------------ *
 * FAQ accordion state (structure from design.css's .acc; this app only
 * toggles the open/closed state and the chevron)
 * ------------------------------------------------------------------ */
.acc-body { display: none; padding: 0 0 var(--s-4); color: var(--muted); }
.acc-item.is-open .acc-body { display: block; }
.acc-head { width: 100%; display: flex; justify-content: space-between; align-items: center; text-align: left; background: none; border: 0; padding: var(--s-4) 0; font: inherit; font-weight: 600; color: var(--ink); cursor: pointer; }
.acc-head .icon { transition: transform var(--dur-2) var(--ease); color: var(--accent); }
.acc-item.is-open .acc-head .icon { transform: rotate(180deg); }
.acc-item { border-bottom: 1px solid var(--border); }

/* ------------------------------------------------------------------ *
 * Final CTA
 * ------------------------------------------------------------------ */
.final-cta { background: linear-gradient(135deg, var(--ink), var(--accent-strong)); padding: var(--s-12) var(--s-5); text-align: center; }
.final-cta-inner { max-width: 640px; margin: 0 auto; }
.final-cta-title { color: var(--accent-ink); font-size: var(--t-3xl); font-weight: 700; line-height: 1.25; margin-bottom: var(--s-3); }
.final-cta-sub { color: color-mix(in srgb, var(--accent-ink) 85%, transparent); margin-bottom: var(--s-4); }
.final-cta-offer { color: var(--accent-ink); margin-bottom: var(--s-6); font-size: var(--t-lg); }
.final-cta-btn { background: var(--accent-ink); color: var(--accent-strong); border: 0; }
.final-cta-btn:hover { opacity: 0.92; }

/* ------------------------------------------------------------------ *
 * Footer
 * ------------------------------------------------------------------ */
.site-footer { background: var(--ink); color: color-mix(in srgb, var(--canvas) 80%, transparent); padding-top: var(--s-10); }
.footer-inner { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--s-5) var(--s-8); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-6); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--s-5); align-content: flex-start; }
.footer-links a { color: inherit; opacity: 0.8; font-size: var(--t-sm); text-decoration: none; }
.footer-links a:hover { opacity: 1; text-decoration: underline; }
.site-footer .brand-mark { margin-bottom: var(--s-1); }

/* ------------------------------------------------------------------ *
 * Social generator canvas
 * ------------------------------------------------------------------ */
.social-canvas-wrap { display: flex; justify-content: center; }
#social-canvas { width: 100%; max-width: 420px; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-raised); border: 1px solid var(--border-strong); }

/* ------------------------------------------------------------------ *
 * Small helpers
 * ------------------------------------------------------------------ */
.check { display: flex; align-items: flex-start; gap: var(--s-2); font-size: var(--t-sm); cursor: pointer; }
.check input { margin-top: 3px; }

@media (prefers-reduced-motion: reduce) {
  .hero-book, .about-card, .benefit-card, .poet-card { transition: none; }
}