@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,400;0,700;1,400&display=swap');

body {
    background: #e8e8e8;
    background-image: radial-gradient(circle, rgba(0,0,0,0.04) 1px, transparent 1px);
    background-size: 24px 24px;
}

.card-wrapper {
    margin: 0 auto;
    padding: 0px 20px 80px;
}


.sep {
    font-family: 'Courier New', monospace;
    font-size: 0.6rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #aaa;
    text-align: center;
    margin: 60px 0 18px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.sep::before,
.sep::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #ccc;
}

.lens-card {
    font-family: 'Merriweather', 'Georgia', serif;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--c-border);
    box-shadow: 0 3px 20px rgba(0,0,0,0.09), 0 1px 4px rgba(0,0,0,0.06);
}

.lens-card__body {
    padding: 32px 36px 36px;
    background: var(--c-body);
}

.lens-header {
    padding: 24px 36px 20px;
    background: var(--c-header-bg);
}

.lens-header__category {
    font-family: Arial, sans-serif;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin: 0 0 8px;
    opacity: 0.75;
    color: var(--c-header-text);
}

.lens-header__title {
    font-family: Arial, sans-serif;
    font-size: 1.28rem;
    font-weight: 800;
    line-height: 1.22;
    margin: 0;
    color: var(--c-header-text);
}

.lens-card--entry {
    --c-header-bg:   #0e8a72;
    --c-header-text: #ffffff;
    --c-body:        #dff5ef;
    --c-block:       #c2ede3;
    --c-border:      #9dd6c9;
    --c-accent:      #0a6b58;
    --c-accent-soft: #8ecfc4;
    --c-text:        #0d2e28;
}

.lens-card--language {
    --c-header-bg:   #15446e;
    --c-header-text: #ffffff;
    --c-body:        #daeaf8;
    --c-block:       #bed8f2;
    --c-border:      #90bde6;
    --c-accent:      #1a5e8a;
    --c-accent-soft: #7aafd6;
    --c-text:        #0d2237;
}

.lens-card--architecture {
    --c-header-bg:   #2e3f47;
    --c-header-text: #e8eef1;
    --c-body:        #dce4e8;
    --c-block:       #c4d0d6;
    --c-border:      #9ab0ba;
    --c-accent:      #3a5260;
    --c-accent-soft: #87a4af;
    --c-text:        #182228;
}

.lens-card--psyche {
    --c-header-bg:   #141e26;
    --c-header-text: #e0e6ec;
    --c-body:        #d8e0e8;
    --c-block:       #bfcbd6;
    --c-border:      #94aab8;
    --c-accent:      #253545;
    --c-accent-soft: #7a95a8;
    --c-text:        #101820;
}

.lens-card--ideas {
    --c-header-bg:   #5d2d82;
    --c-header-text: #f5e8ff;
    --c-body:        #ecdff8;
    --c-block:       #dcc5f3;
    --c-border:      #c29ee8;
    --c-accent:      #6b2fa0;
    --c-accent-soft: #b089d9;
    --c-text:        #2c1045;
}

.lens-card--mythbust {
    --c-header-bg:   #7a1f18;
    --c-header-text: #ffe8e6;
    --c-body:        #f6dedd;
    --c-block:       #eec0be;
    --c-border:      #de9896;
    --c-accent:      #a0251d;
    --c-accent-soft: #d08080;
    --c-text:        #3a0e0c;
}

.lens-card--world {
    --c-header-bg:   #6b3500;
    --c-header-text: #fff1e0;
    --c-body:        #f5e4cc;
    --c-block:       #eacfac;
    --c-border:      #d9b080;
    --c-accent:      #8a4400;
    --c-accent-soft: #c99055;
    --c-text:        #2e1600;
}

.lens-card--craft {
    --c-header-bg:   #0a3328;
    --c-header-text: #c8f0e8;
    --c-body:        #d4eeea;
    --c-block:       #b5ddd7;
    --c-border:      #82c4bc;
    --c-accent:      #0f5041;
    --c-accent-soft: #6db3aa;
    --c-text:        #071d18;
}

.lens-card--essay {
    --c-header-bg:   #b86200;
    --c-header-text: #fff8ec;
    --c-body:        #faecd4;
    --c-block:       #f3d9b0;
    --c-border:      #e4bb7a;
    --c-accent:      #c06800;
    --c-accent-soft: #d9a04a;
    --c-text:        #2e1800;
}

.lens-card--now {
    --c-header-bg:   #0a2336;
    --c-header-text: #d0eafc;
    --c-body:        #d5e8f8;
    --c-block:       #b8d4f0;
    --c-border:      #84b8e4;
    --c-accent:      #103d5c;
    --c-accent-soft: #6aaad8;
    --c-text:        #071422;
}

.essay-big-idea {
    background: var(--c-block);
    padding: 20px 24px;
    border-left: 4px solid var(--c-accent);
    margin: 0 0 24px;
    line-height: 1.82;
    color: var(--c-text);
    font-size: 0.96rem;
}

.essay-big-idea__label {
    display: block;
    margin-bottom: 8px;
    color: var(--c-accent);
    text-transform: uppercase;
    letter-spacing: 1.8px;
    font-size: 0.62rem;
    font-family: Arial, sans-serif;
    font-weight: 700;
}

.analysis-zone {
    margin: 0 0 24px;
}

.analysis-zone__label {
    font-family: Arial, sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--c-accent);
    margin-bottom: 0;
    display: block;
}

.analysis-zone__list {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid var(--c-accent-soft);
    border-top: 3px solid var(--c-accent);
}

.analysis-zone__list li {
    padding: 10px 14px 10px 34px;
    border-bottom: 1px solid var(--c-accent-soft);
    background: var(--c-block);
    color: var(--c-text);
    font-size: 0.92rem;
    line-height: 1.72;
    position: relative;
}

.analysis-zone__list li:last-child {
    border-bottom: none;
}

.analysis-zone__list li::before {
    content: "▸";
    position: absolute;
    left: 13px;
    color: var(--c-accent);
    font-size: 0.78rem;
    top: 11px;
}

.essay-quote-card {
    background: var(--c-block);
    border: 1px solid var(--c-accent-soft);
    border-left: 5px solid var(--c-accent);
    padding: 20px 24px;
    margin: 0 0 24px;
}

.essay-quote-card__text {
    font-style: italic;
    color: var(--c-text);
    font-size: 1.06rem;
    line-height: 1.9;
    margin: 0 0 10px;
}

.essay-quote-card__source {
    font-family: Arial, sans-serif;
    font-size: 0.68rem;
    color: var(--c-accent);
    letter-spacing: 0.5px;
    margin: 0;
}

.anchor-question {
    background: var(--c-block);
    border: 1px solid var(--c-accent-soft);
    border-top: 3px solid var(--c-accent);
    padding: 16px 20px;
    margin: 0 0 20px;
}

.anchor-question__label {
    font-family: Arial, sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--c-accent);
    display: block;
    margin-bottom: 8px;
}

.anchor-question__text {
    font-style: italic;
    color: var(--c-text);
    font-size: 0.96rem;
    line-height: 1.78;
    margin: 0;
}

.essay-prompt {
    background: var(--c-block);
    border-left: 5px solid var(--c-accent);
    border-top: 1px solid var(--c-accent-soft);
    border-right: 1px solid var(--c-accent-soft);
    border-bottom: 1px solid var(--c-accent-soft);
    padding: 18px 22px;
    margin: 0 0 20px;
}

.essay-prompt__label {
    font-family: Arial, sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--c-accent);
    display: block;
    margin-bottom: 8px;
}

.essay-prompt__text {
    font-style: italic;
    color: var(--c-text);
    font-size: 0.92rem;
    line-height: 1.82;
    margin: 0;
}

.activation-note {
    font-size: 0.82em;
    color: var(--c-accent);
    background: transparent;
    padding: 10px 0 0;
    border-top: 1px dashed var(--c-accent-soft);
    margin: 24px 0 0;
    line-height: 1.65;
    font-style: italic;
    opacity: 0.8;
}

.activation-note__label {
    font-family: Arial, sans-serif;
    font-style: normal;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--c-accent);
    display: block;
    margin-bottom: 4px;
    opacity: 0.65;
}

.character-map {
    background: var(--c-block);
    border: 1px solid var(--c-accent-soft);
    border-left: 5px solid var(--c-accent);
    padding: 0;
    margin: 0 0 24px;
    overflow: hidden;
}

.character-map__label {
    font-family: Arial, sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--c-accent);
    display: block;
    padding: 12px 18px 10px;
    border-bottom: 1px solid var(--c-accent-soft);
}

.character-map__row {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--c-accent-soft);
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--c-text);
}

.character-map__row:last-child {
    border-bottom: none;
}

.character-map__key {
    font-family: Arial, sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--c-accent);
    min-width: 110px;
    padding: 10px 14px;
    flex-shrink: 0;
    border-right: 1px solid var(--c-accent-soft);
    background: rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
}

.character-map__val {
    padding: 10px 14px;
    flex: 1;
}

.myth-buster {
    background: var(--c-block);
    border: 1.5px solid var(--c-accent);
    padding: 0;
    margin: 0 0 24px;
    overflow: hidden;
    font-size: 0.93rem;
    line-height: 1.72;
    color: var(--c-text);
}

.myth-buster__row {
    padding: 14px 18px;
    border-bottom: 1px solid var(--c-accent-soft);
}

.myth-buster__row:last-child {
    border-bottom: none;
}

.myth-buster__row--myth {
    background: rgba(0,0,0,0.06);
}

.myth-buster__row--fact {
    background: rgba(0,0,0,0.02);
}

.myth-buster__row-label {
    font-family: Arial, sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 5px;
}

.myth-buster__row--myth .myth-buster__row-label {
    color: #b02020;
}

.myth-buster__row--fact .myth-buster__row-label {
    color: #1a7a3a;
}

.counter-argument {
    background: var(--c-block);
    border: 1px solid var(--c-accent-soft);
    padding: 0;
    margin: 0 0 24px;
    overflow: hidden;
    font-size: 0.92rem;
    line-height: 1.72;
    color: var(--c-text);
}

.counter-argument__myth {
    padding: 12px 16px;
    background: rgba(0,0,0,0.06);
    border-bottom: 1px solid var(--c-accent-soft);
}

.counter-argument__fact {
    padding: 12px 16px;
}

.counter-argument__myth::before {
    content: "OBJECTION  ";
    font-family: Arial, sans-serif;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 1.8px;
    color: #a01818;
    display: block;
    margin-bottom: 5px;
}

.counter-argument__fact::before {
    content: "RESPONSE  ";
    font-family: Arial, sans-serif;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 1.8px;
    color: #186030;
    display: block;
    margin-bottom: 5px;
}

.timeline-note {
    background: var(--c-block);
    padding: 16px 20px;
    border: 1px solid var(--c-accent-soft);
    border-left: 5px solid var(--c-accent);
    margin: 0 0 24px;
    line-height: 1.78;
    color: var(--c-text);
    font-size: 0.9rem;
}

.timeline-note__label {
    font-family: Arial, sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--c-accent);
    display: block;
    margin-bottom: 8px;
}

.live-connection {
    background: var(--c-block);
    border: 1px solid var(--c-accent-soft);
    border-left: 5px solid var(--c-accent);
    padding: 18px 22px;
    margin: 0 0 24px;
    color: var(--c-text);
    font-size: 0.93rem;
    line-height: 1.82;
}

.live-connection__label {
    font-family: Arial, sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--c-accent);
    display: block;
    margin-bottom: 8px;
}

.writing-scaffold {
    background: var(--c-block);
    border: 1px solid var(--c-accent-soft);
    padding: 0;
    margin: 0 0 24px;
    overflow: hidden;
}

.writing-scaffold__label {
    font-family: Arial, sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--c-accent);
    display: block;
    padding: 12px 18px 10px;
    border-bottom: 2px solid var(--c-accent);
    background: rgba(0,0,0,0.04);
}

.writing-scaffold__list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: scaffold-counter;
}

.writing-scaffold__list li {
    counter-increment: scaffold-counter;
    padding: 11px 16px 11px 48px;
    border-bottom: 1px solid var(--c-accent-soft);
    color: var(--c-text);
    font-size: 0.92rem;
    line-height: 1.72;
    position: relative;
}

.writing-scaffold__list li:last-child {
    border-bottom: none;
}

.writing-scaffold__list li::before {
    content: counter(scaffold-counter);
    position: absolute;
    left: 14px;
    top: 12px;
    background: var(--c-accent);
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scholarly-note {
    font-size: 0.88em;
    color: var(--c-text);
    background: var(--c-block);
    padding: 14px 18px;
    border: 1px dashed var(--c-accent);
    margin: 0 0 24px;
    line-height: 1.72;
}

.example-cloud {
    background: var(--c-block);
    padding: 0;
    margin: 0 0 24px;
    border: 1px solid var(--c-accent-soft);
    overflow: hidden;
}

.example-cloud__label {
    display: block;
    padding: 10px 16px;
    color: var(--c-accent);
    border-bottom: 2px solid var(--c-accent);
    background: rgba(0,0,0,0.05);
    font-family: Arial, sans-serif;
    font-size: 0.62rem;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    font-weight: 700;
}

.example-cloud > strong {
    display: block;
    padding: 10px 16px;
    color: var(--c-accent);
    border-bottom: 2px solid var(--c-accent);
    background: rgba(0,0,0,0.05);
    font-family: Arial, sans-serif;
    font-size: 0.62rem;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.example-cloud ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.example-cloud li {
    padding: 9px 16px;
    border-bottom: 1px solid var(--c-accent-soft);
    color: var(--c-text);
    font-size: 0.91rem;
    line-height: 1.6;
}

.example-cloud li:last-child {
    border-bottom: none;
}

.questions-for-further-study {
    margin-top: 2.5rem;
    padding: 1.25rem 1.5rem;
    border-top: 2px solid #e5e7eb;
    border-left: 3px solid #9ca3af;
    background: #f9fafb;
    border-radius: 0 8px 8px 0;
}

.questions-for-further-study h2 {
    font-size: 1rem;
    font-weight: 600;
    color: #374151;
    margin: 0 0 0.75rem;
}

.questions-for-further-study ul {
    margin: 0;
    padding-left: 1.25rem;
    list-style: disc;
}

.questions-for-further-study ul li {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #4b5563;
    margin-bottom: 0.4rem;
}

.questions-for-further-study ul li:last-child {
    margin-bottom: 0;
}

.cross-lens {
    background: rgba(0,0,0,0.08);
    border: 1px solid rgba(0,0,0,0.18);
    border-left: 4px solid rgba(0,0,0,0.3);
    padding: 16px 20px;
    margin: 0 0 24px;
    color: var(--c-text);
    font-size: 0.91rem;
    line-height: 1.78;
    position: relative;
}

.cross-lens__origin {
    font-family: Arial, sans-serif;
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(0,0,0,0.4);
    display: block;
    margin-bottom: 6px;
}

.cross-lens--from-entry        { border-left-color: #0e8a72; }
.cross-lens--from-language     { border-left-color: #15446e; }
.cross-lens--from-architecture { border-left-color: #2e3f47; }
.cross-lens--from-psyche       { border-left-color: #141e26; }
.cross-lens--from-ideas        { border-left-color: #5d2d82; }
.cross-lens--from-mythbust     { border-left-color: #7a1f18; }
.cross-lens--from-world        { border-left-color: #6b3500; }
.cross-lens--from-craft        { border-left-color: #0a3328; }
.cross-lens--from-essay        { border-left-color: #b86200; }
.cross-lens--from-now          { border-left-color: #0a2336; }

.cross-lens--from-entry .cross-lens__origin        { color: #0e8a72; }
.cross-lens--from-language .cross-lens__origin     { color: #15446e; }
.cross-lens--from-architecture .cross-lens__origin { color: #2e3f47; }
.cross-lens--from-psyche .cross-lens__origin       { color: #141e26; }
.cross-lens--from-ideas .cross-lens__origin        { color: #5d2d82; }
.cross-lens--from-mythbust .cross-lens__origin     { color: #7a1f18; }
.cross-lens--from-world .cross-lens__origin        { color: #6b3500; }
.cross-lens--from-craft .cross-lens__origin        { color: #0a3328; }
.cross-lens--from-essay .cross-lens__origin        { color: #b86200; }
.cross-lens--from-now .cross-lens__origin          { color: #0a2336; }

@media (max-width: 600px) {
    .lens-card__body  { padding: 20px 18px 24px; }
    .lens-header      { padding: 16px 18px 14px; }
    .lens-header__title { font-size: 1.08rem; }
    .character-map__row { flex-direction: column; }
    .character-map__key {
        min-width: unset;
        border-right: none;
        border-bottom: 1px solid var(--c-accent-soft);
    }
}