/* =====================================================================
   Calm — the Steven Webb design system, applied to Stillness Courses.
   Warm paper, forest-green ink, a single gold accent, classical Lora
   serif. Tokens mirror calm-steven-webb-design-system/project/tokens.
   ===================================================================== */

/* ---------- Lora (self-hosted) ---------- */
@font-face { font-family:"Lora"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/lora-400-normal.woff2") format("woff2"); }
@font-face { font-family:"Lora"; font-style:italic; font-weight:400; font-display:swap; src:url("../fonts/lora-400-italic.woff2") format("woff2"); }
@font-face { font-family:"Lora"; font-style:normal; font-weight:500; font-display:swap; src:url("../fonts/lora-500-normal.woff2") format("woff2"); }
@font-face { font-family:"Lora"; font-style:normal; font-weight:600; font-display:swap; src:url("../fonts/lora-600-normal.woff2") format("woff2"); }
@font-face { font-family:"Lora"; font-style:italic; font-weight:600; font-display:swap; src:url("../fonts/lora-600-italic.woff2") format("woff2"); }
@font-face { font-family:"Lora"; font-style:normal; font-weight:700; font-display:swap; src:url("../fonts/lora-700-normal.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root {
    /* Palette */
    --green-900:#14241c; --green-800:#1f342a; --green-700:#2a4636; --green-600:#38573f;
    --green-500:#4f6f57; --green-300:#8aa090;
    --gold-600:#946823; --gold-500:#a9772a; --gold-400:#c0934e; --gold-200:#e6d3ab;
    --clay-500:#8b6151;
    --paper-100:#fbf2e2; --paper-75:#fdf6ea; --card-100:#fffdf7;
    --sand-300:#e9dec6; --sand-400:#ddcfb2; --mist-100:#e8f0ec; --mist-200:#d6e3db;
    --ink-900:#25302a; --ink-700:#3e4842; --ink-500:#6c7268; --ink-300:#9aa093;
    --wine-500:#a81f2d;

    /* Semantic */
    --surface-page:var(--paper-100); --surface-card:var(--card-100); --surface-mist:var(--mist-100);
    --text-heading:var(--ink-900); --text-body:var(--ink-700); --text-muted:var(--ink-500);
    --text-on-dark:#f3ede0; --text-on-dark-muted:var(--green-300);
    --text-link:var(--green-700); --text-accent:var(--gold-600);
    --primary:var(--green-800); --primary-hover:var(--green-700); --primary-active:var(--green-900);
    --on-primary:#f5efe2; --accent:var(--gold-500); --accent-soft:var(--gold-200);
    --border:var(--sand-300); --border-strong:var(--sand-400);
    --notice:var(--wine-500); --focus-ring:var(--gold-500);

    /* Type */
    --font-serif:"Lora", Georgia, "Times New Roman", serif;
    --leading-body:1.62; --tracking-display:-0.01em; --tracking-eyebrow:0.2em;

    /* Spacing / shape / motion */
    --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
    --space-5:1.5rem; --space-6:2rem; --space-7:2.5rem; --space-8:3rem; --space-9:4rem;
    --radius-sm:6px; --radius-md:8px; --radius-lg:12px; --radius-xl:16px; --radius-pill:999px;
    --control-height:48px;
    --shadow-card:0 1px 2px rgba(31,52,42,.05), 0 10px 30px rgba(31,52,42,.07);
    --shadow-raised:0 2px 4px rgba(31,52,42,.08), 0 18px 44px rgba(31,52,42,.12);
    --shadow-button:0 1px 2px rgba(20,36,28,.18), 0 6px 16px rgba(20,36,28,.18);
    --container:75rem; --container-text:46rem;
    --ease-calm:cubic-bezier(.33,0,.2,1); --dur-base:240ms;
}

/* ---------- Base ---------- */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
    margin:0; font-family:var(--font-serif); font-size:1.0625rem; line-height:var(--leading-body);
    color:var(--text-body); background:var(--surface-page);
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4 { margin:0; font-family:var(--font-serif); font-weight:600; line-height:1.28;
    color:var(--text-heading); letter-spacing:var(--tracking-display); text-wrap:balance; }
h1 { font-size:2.25rem; } h2 { font-size:1.75rem; } h3 { font-size:1.375rem; }
p { margin:0; text-wrap:pretty; }
a { color:var(--text-link); text-underline-offset:.15em; }
strong,b { font-weight:700; }
em,i { font-style:italic; }
img { max-width:100%; height:auto; display:block; }
::selection { background:var(--accent-soft); color:var(--green-900); }

.container { width:100%; max-width:var(--container); margin:0 auto; padding:0 var(--space-6); }
.site-main { padding:var(--space-8) 0; min-height:60vh; }

.skip-link { position:absolute; left:-999px; top:0; background:var(--primary); color:var(--on-primary); padding:var(--space-2) var(--space-3); }
.skip-link:focus { left:var(--space-2); z-index:100; }

/* Eyebrow + flourish (brand ornaments) */
.eyebrow { font-size:.78rem; font-weight:700; letter-spacing:var(--tracking-eyebrow);
    text-transform:uppercase; color:var(--text-accent); display:inline-block; }
.flourish { display:block; width:168px; max-width:60%; height:auto; margin:var(--space-5) auto; }
.flourish--sm { width:56px; margin:var(--space-3) auto; }

/* ---------- Header / footer ---------- */
.site-header { background:var(--green-800); color:var(--text-on-dark);
    border-bottom:1px solid rgba(243,237,224,.1); position:sticky; top:0; z-index:10; }
.site-header__inner { display:flex; align-items:center; justify-content:space-between; gap:var(--space-5); height:64px; }
.brand { display:flex; flex-direction:column; line-height:1.1; }
.brand:hover { text-decoration:none; }
.brand__name { font-weight:700; font-size:21px; color:var(--text-on-dark); white-space:nowrap; }
.brand__sub { font-size:12px; color:var(--text-on-dark-muted); margin-top:2px; }
.nav { display:flex; align-items:center; gap:var(--space-5); }
.nav a { font-size:.9375rem; color:var(--text-on-dark); text-decoration:none; opacity:.92; padding:6px 2px; }
.nav a:hover { opacity:1; text-decoration:underline; text-underline-offset:3px; }
.nav a.is-active { color:var(--gold-400); }
.nav__logout { margin:0; }
.link-button { background:none; border:0; padding:0; font:inherit; color:var(--text-on-dark); cursor:pointer; opacity:.92; }
.link-button:hover { opacity:1; }

.site-footer { background:var(--green-900); color:var(--text-on-dark-muted); padding:var(--space-7) 0; font-size:.9375rem; }
.site-footer a { color:var(--text-on-dark); }

/* ---------- Flash ---------- */
.flash { padding:var(--space-2) 0; font-size:.95rem; }
.flash--success { background:var(--mist-100); color:var(--green-700); border-bottom:1px solid var(--mist-200); }
.flash--error { background:#fbe9e7; color:var(--wine-500); border-bottom:1px solid #f3d3ce; }

/* ---------- Buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:var(--control-height);
    cursor:pointer; background:var(--primary); color:var(--on-primary);
    border:1px solid transparent; border-radius:var(--radius-md); padding:.7rem 1.4rem;
    font:inherit; font-weight:600; text-align:center; box-shadow:var(--shadow-button);
    transition:background var(--dur-base) var(--ease-calm), transform var(--dur-base) var(--ease-calm); }
.btn:hover { background:var(--primary-hover); text-decoration:none; }
.btn:active { transform:translateY(1px); background:var(--primary-active); }
.btn--small { min-height:36px; padding:.4rem .9rem; font-size:.9rem; box-shadow:none; }
.btn--ghost { background:transparent; color:var(--text-link); border-color:var(--border-strong); box-shadow:none; }
.btn--ghost:hover { background:rgba(31,52,42,.05); }
.btn--block { display:flex; width:100%; }
.btn[disabled] { opacity:.55; cursor:not-allowed; }

/* ---------- Hero ---------- */
.hero { text-align:center; padding:var(--space-9) 0 var(--space-7); }
.hero h1 { font-size:clamp(2.25rem,5vw,3rem); margin:.5rem 0 var(--space-3); }
.hero p { font-size:1.25rem; color:var(--text-muted); max-width:38rem; margin:0 auto var(--space-5); }

/* ---------- Cards / grid ---------- */
.grid { display:grid; gap:var(--space-6); }
.grid--courses { grid-template-columns:repeat(auto-fill, minmax(290px,1fr)); }
.card { background:var(--surface-card); border:1px solid var(--border); border-radius:var(--radius-xl);
    overflow:hidden; box-shadow:var(--shadow-card); display:flex; flex-direction:column;
    transition:transform var(--dur-base) var(--ease-calm), box-shadow var(--dur-base) var(--ease-calm); }
.card:hover { transform:translateY(-3px); box-shadow:var(--shadow-raised); }
.card__media { aspect-ratio:16/9; background:var(--mist-100); object-fit:cover; width:100%; }
.card__body { padding:var(--space-5); display:flex; flex-direction:column; gap:var(--space-2); flex:1; }
.card__title { font-size:1.25rem; margin:0; }
.card__title a { color:var(--text-heading); }
.card__meta { color:var(--text-muted); font-size:.9375rem; }
.card__footer { margin-top:auto; display:flex; align-items:center; justify-content:space-between; }
.badge { display:inline-block; font-size:.72rem; font-weight:700; text-transform:uppercase;
    letter-spacing:.12em; padding:.25rem .6rem; border-radius:var(--radius-pill);
    background:var(--accent-soft); color:var(--gold-600); }

/* ---------- Forms ---------- */
.form { max-width:32rem; } .form--wide { max-width:52rem; }
.field { margin-bottom:var(--space-4); }
.field label,.field legend { display:block; font-weight:700; margin-bottom:var(--space-1); color:var(--text-heading); }
.field input,.field textarea,.field select {
    width:100%; min-height:var(--control-height); padding:.65rem .85rem; font:inherit;
    border:1px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--card-100); color:var(--text-body); }
.field textarea { min-height:9rem; resize:vertical; }
.field input:focus,.field textarea:focus,.field select:focus {
    outline:2px solid var(--focus-ring); outline-offset:1px; border-color:var(--green-500); }
.field .hint { color:var(--text-muted); font-size:.85rem; margin-top:var(--space-1); }
.field--error input,.field--error textarea { border-color:var(--wine-500); }
.error-text { color:var(--wine-500); font-size:.85rem; margin-top:var(--space-1); }
fieldset.field { border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--space-4); }

.panel { background:var(--surface-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--space-5); }

/* ---------- Lesson layout ---------- */
.lesson-layout { display:grid; grid-template-columns:250px 1fr; gap:var(--space-7); align-items:start; }
.lesson-nav { position:sticky; top:84px; }
.lesson-nav ol { list-style:none; margin:0; padding:0; }
.lesson-nav a { display:block; padding:.5rem .65rem; border-radius:var(--radius-sm); color:var(--text-body); text-decoration:none; }
.lesson-nav a:hover,.lesson-nav .is-active { background:var(--surface-mist); }
.lesson-nav .is-active { color:var(--green-800); font-weight:600; }
.lesson-nav .is-done::after { content:" ✓"; color:var(--accent); }

.player { aspect-ratio:16/9; width:100%; background:var(--green-900); border-radius:var(--radius-xl); overflow:hidden; }
.player iframe,.player video { width:100%; height:100%; border:0; }
.audio-player { width:100%; }

/* ---------- Price tiers ---------- */
.price-tiers { display:flex; flex-wrap:wrap; gap:var(--space-2); }
.price-tier { position:relative; flex:1 1 5rem; text-align:center; cursor:pointer;
    border:1.5px solid var(--border-strong); border-radius:var(--radius-md); padding:var(--space-4) var(--space-2);
    font-weight:700; font-size:1.1rem; background:var(--card-100); color:var(--text-heading); }
.price-tier input { position:absolute; opacity:0; }
.price-tier:has(input:checked) { border-color:var(--green-800); background:var(--surface-mist); color:var(--green-800); }

/* ---------- Reflection / comments / reviews ---------- */
.reflection { border-left:3px solid var(--accent); padding-left:var(--space-5); }
.reflection__options { display:grid; gap:var(--space-2); margin-top:var(--space-3); }
.reflection__option { border:1px solid var(--border-strong); border-radius:var(--radius-sm);
    padding:var(--space-3) var(--space-4); cursor:pointer; background:var(--card-100); }
.reflection__option:has(input:checked) { border-color:var(--accent); background:var(--paper-75); }
.reflection__option input { margin-right:var(--space-2); }

.visibility-note { font-size:.875rem; color:var(--gold-600); font-weight:600; }

.comment,.review { border-bottom:1px solid var(--border); padding:var(--space-4) 0; }
.comment__author,.review__author { font-weight:700; color:var(--text-heading); }
.comment__time,.review__time { color:var(--text-muted); font-size:.8125rem; }
.stars { color:var(--accent); letter-spacing:.1em; }

/* ---------- AI authoring controls ---------- */
.ai-tools { display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-2); align-items:center; }
.ai-status { font-size:.85rem; color:var(--text-muted); }
.ai-status[data-state="error"] { color:var(--wine-500); }

/* ---------- Utilities ---------- */
.stack > * + * { margin-top:var(--space-4); }
.muted { color:var(--text-muted); }
.text-center { text-align:center; }
.mt-4 { margin-top:var(--space-6); }
.section-title { margin:var(--space-8) 0 var(--space-5); }

@media (max-width:720px) {
    .container { padding:0 var(--space-4); }
    .lesson-layout { grid-template-columns:1fr; }
    .lesson-nav { position:static; }
}
@media (prefers-reduced-motion:reduce) {
    * { transition:none !important; }
}