:root {
    --bg: #F7F2E6;
    --ink: #2f2a23;
    --ink-muted: #514a41;
    --accent: #b7a37f;
    --accent-strong: #9c8660;
    --maxw: 1000px;
    --radius: 18px;
    --shadow: 0 2px 8px rgba(0,0,0,.04);
}

html, body { margin: 0; height: 100% }

body {
    font-family: "Lora",ui-serif,Georgia,serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.65;
    text-rendering: optimizeSpeed;
    overflow-x: hidden
}

a { color: var(--accent-strong); text-decoration: none }
a:hover { text-decoration: underline }

.wrap {
    max-width: var(--maxw);
    margin-inline: auto;
    padding: clamp(18px,3vw,28px)
}

header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: linear-gradient(180deg,rgba(253,252,250,.98),rgba(253,252,250,.88));
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(0,0,0,.05)
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1rem,3vw,3rem)
}

.brand { flex: 0 0 260px; font-size: 45px }
.nav nav { flex: 0 0 auto; max-width: 480px }

.nav a {
    font-size: .95rem;
    padding: .5rem .6rem;
    border-radius: 10px
}
.nav a:hover { background: rgba(183,163,127,.12) }

/* HERO */
.hero {
    padding: clamp(24px,4vw,56px) 0 clamp(32px,5vw,72px);
    text-align: center;
    position: relative;
    isolation: isolate;
}
.hero::before {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    top: 0;
    bottom: 0;
    background: radial-gradient(1200px 800px at 20% -10%, #ffffff 0%, rgba(246,241,233,0.95) 45%, rgba(246,241,233,0.95) 100%), linear-gradient(180deg, rgba(255,255,255,0.30), rgba(255,255,255,0.30)), repeating-linear-gradient(0deg, rgba(0,0,0,0.02) 0 2px, transparent 2px 4px);
    z-index: 0; pointer-events: none;
}
.hero .wrap { position: relative; z-index: 1; }

.eyebrow {
    font-family: "Cinzel",serif;
    letter-spacing: .2em;
    color: var(--accent-strong);
    font-size: 1.7rem;
    text-transform: uppercase
}

h1 {
    font-family: "Cinzel",serif;
    font-weight: 700;
    letter-spacing: .03em;
    font-size: clamp(30px,5vw,54px);
    line-height: 1.12;
    color: var(--ink);
    margin: 10px auto 16px;
    max-width: 22ch
}

.lede {
    max-width: 65ch;
    margin: 0 auto;
    font-size: clamp(1rem,1.2vw,1.125rem);
    color: var(--ink-muted)
}

.cta-row {
    margin-top: 28px;
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap
}

.btn {
    border: 1px solid var(--accent-strong);
    color: var(--ink);
    background: transparent;
    padding: .7rem 1rem;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 600;
    transition: transform .08s ease,background .2s ease,color .2s ease
}
.btn.primary { background: var(--accent-strong); color: #fff; border-color: var(--accent-strong) }
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow) }
.btn:active { transform: translateY(0) }

/* SECTIONS */
section { padding: clamp(20px,3vw,32px) 0 }
section > .wrap { padding: 0 clamp(18px,3vw,28px) }

h2 {
    font-family: "Cinzel",serif;
    font-size: clamp(22px,3.2vw,34px);
    letter-spacing: .06em;
    margin: 0 0 12px;
    color: var(--ink)
}

.sub { color: #6a6156; margin: 0 0 22px; max-width: 68ch }
.subWide { color: #6a6156; margin: 0 0 22px; width: 100% }

.grid { display: grid; gap: 20px }

@media(min-width:850px) {
  .grid.two { grid-template-columns: 1fr 1fr }
  .grid.three { grid-template-columns: repeat(3,1fr) }
}

.card {
    background: #fff;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow)
}

.checklist { list-style: none; padding: 0; margin: 0 }
.checklist li {
    margin: 8px 0;
    padding-left: 1.6em;
    position: relative
}
.checklist li::before {
    content: "✓";
    position: absolute;
    left: 0; top: 0;
    color: var(--accent-strong);
    font-weight: 700
}

footer { padding: 44px 0; text-align: center; color: #7b7166 }
small { color: #8a7f73 }

.brand div {
    background-image: url('../images/burst4.png');
    background-repeat: no-repeat;
    background-position: 62px 6px
}
.brand div span { position: relative; z-index: -2 }

#about { background-color: rgba(255,255,255,0.8) }

/* Demo cards */
.demo-card { display: grid; gap: 14px }
.demo-previews { display: grid; gap: 12px }
@media(min-width:720px) { .demo-previews { grid-template-columns: repeat(4,1fr) } }

.swatch {
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 12px;
    background: #fff;
    padding: 10px;
    min-height: 72px;
    box-shadow: var(--shadow);
    display: flex; align-items: center; justify-content: center;
    position: relative
}
.swatch h4 {
    position: absolute; left: 10px; top: 8px; margin: 0;
    font: 600 12px/1 "Cinzel",serif;
    letter-spacing: .06em; color: #7a6f63
}

.tabchip {
    height: 10px; border-radius: 8px;
    border: 1px solid rgba(0,0,0,.1);
    background: rgba(183,163,127,.18);
    flex: 0 0 64px
}
.tabchip.active { background: var(--accent-strong); border-color: var(--accent-strong) }
.tabchip.thin { height: 6px; border: none; background: rgba(183,163,127,.45) }
.tabchip.line { height: 2px; border: none; background: var(--accent-strong) }
.tabchip.pill { height: 10px; border-radius: 999px; background: rgba(183,163,127,.18); border: 1px solid rgba(0,0,0,.08) }
.tabchip.pill.active { background: var(--accent-strong); border-color: var(--accent-strong) }

/* Lightbox shell */
.demo-modal {
    position: fixed; inset: 0; display: none; place-items: center;
    background: rgba(0,0,0,.6);
    padding: clamp(12px,3vw,28px); z-index: 999
}
.demo-modal[aria-hidden="false"] { display: grid }

.demo-dialog {
    background: #fff; border-radius: 16px; border: 1px solid rgba(0,0,0,.12);
    width: min(1100px,96vw); height: min(80vh,860px);
    display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,.28)
}
.demo-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 12px; border-bottom: 1px solid rgba(0,0,0,.08); background: #fff
}
.demo-title { font-family: "Cinzel",serif; letter-spacing: .06em; font-size: 1rem }
.demo-actions { display: flex; gap: 8px }
.demo-actions a { text-decoration: none }
.demo-close {
    appearance: none; border: 1px solid rgba(0,0,0,.18); background: transparent;
    border-radius: 10px; padding: .4rem .6rem; cursor: pointer; font-weight: 600
}
.demo-viewport { flex: 1 1 auto; width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; background: #fff }
.demo-viewport .demo-iframe { display: block; height: 100%; width: 1200px; max-width: none; border: 0 }

.card.full { grid-column: 1 / -1 }

/* NEW distinct looks + reveal */
.demo-card.is-live {
    background: linear-gradient(180deg,#ffffff 0%,#fffaf2 100%);
    border: 1px solid rgba(156,134,96,.28);
    box-shadow: 0 10px 22px rgba(156,134,96,.10);
    position: relative;
}
.demo-card.is-vocab {
    background: linear-gradient(180deg,#fffdf7 0%,#f8f3e9 100%);
    border: 1px dashed rgba(0,0,0,.12);
    box-shadow: 0 8px 18px rgba(0,0,0,.06);
    position: relative;
}
.demo-card.is-live::before {
    content: "Live Components";
    position: absolute; top: -10px; left: 16px;
    background: var(--accent-strong); color: #fff;
    font: 700 .72rem/1 "Cinzel",serif; letter-spacing: .14em;
    padding: .22rem .5rem; border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.demo-card.is-vocab::before {
    content: "Vocabulary";
    position: absolute; top: -10px; left: 16px;
    background: #fff; color: var(--accent-strong);
    font: 700 .72rem/1 "Cinzel",serif; letter-spacing: .14em;
    padding: .22rem .5rem; border-radius: 8px;
    border: 1px solid rgba(0,0,0,.12);
}
.is-live .swatch { border-style: solid }
.is-vocab .swatch { border-style: dashed; background: #fffbf1 }

/* Reveal animation */
.reveal {
    opacity: 0; transform: translateY(14px) scale(.98);
    transition: opacity .45s ease,transform .45s ease;
    will-change: opacity,transform
}
.reveal.in { opacity: 1; transform: none }
@media(prefers-reduced-motion:reduce) {
  .reveal { transition: none; opacity: 1 !important; transform: none !important }
}

/* Full bleed helper for specific cards */
.bleed-section { position: relative; padding: 8px 0 }
.bleed-section::before {
    content: "";
    position: absolute; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw;
    width: 100vw; top: 0; bottom: 0;
    background: rgba(255,255,255,0.3); z-index: 0;
}
.bleed-section > * { position: relative; z-index: 1 }

/* Pair demos side-by-side */
.demo-pair.grid.two { align-items: stretch }
.demo-pair .card.full { grid-column: auto } /* override the .card.full span in pairs */

/* Section background effect */
#expertise { position: relative; z-index: 0 }
#expertise::before {
    content: "";
    position: absolute; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw;
    width: 100vw; top: 0; bottom: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.30), rgba(255,255,255,0.30)), repeating-linear-gradient(0deg, rgba(0,0,0,0.02) 0 2px, transparent 2px 4px);
    pointer-events: none; z-index: 0;
}
#expertise .wrap { position: relative; z-index: 1 }

/* Founder linen + overlays */
#founder { position: relative; z-index: 0 }
#founder::before {
    content: "";
    position: absolute; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw;
    width: 100vw; top: 0; bottom: 0;
    background: linear-gradient(180deg, rgba(227,214,191,0.20), rgba(255,255,255,0.18)), linear-gradient(135deg, rgba(156,134,96,0.10) 0%, rgba(156,134,96,0.00) 46%), repeating-linear-gradient(0deg, rgba(0,0,0,0.015) 0 2px, transparent 2px 4px);
    pointer-events: none; z-index: 0;
}
#founder::after {
    content: "";
    position: absolute; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw;
    width: 100vw; top: 50%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(156,134,96,0.35), transparent);
    opacity: .45; pointer-events: none; z-index: 0;
}
#founder .wrap { position: relative; z-index: 1 }

/* Vocab CTA overrides */
#expertise .is-vocab .cta-row { justify-content: center !important }
#expertise .is-vocab .btn { border-radius: 5px !important }

/* Boxed grid polish */
.expertise-box { margin-bottom: clamp(32px, 4vw, 48px); padding: clamp(16px,2vw,24px); }
.expertise-box .card { background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: 12px; box-shadow: var(--shadow); }

.btn.sq2-rt.primary { border-radius: 10px 0 10px 0; }
.btn.sq2-lt { border-radius: 0 10px 0 10px; }