/* Concien · approved October 7 palette and proportional illustration roles.
   This is the current visual layer. Legacy layout and interaction styles remain
   in experience.css; feeling matching and editorial guidance are unchanged. */
:root {
  --cream: #f1eadc;
  --ivory: #faf8f1;
  --sage: #f1f4ee;
  --sage-practice: #e4e9dd;
  --seafoam: #e4eeeb;
  --navy: #152840;
  --forest: #264943;
  --pale-blue: #d4e3eb;
  --art-small: 96px;
  --art-header: 120px;
}
body, body[data-treatment] {
  --paper: var(--cream);
  --white: var(--ivory);
  --soft: var(--sage);
  --ink: #253f3c;
  --muted: #52635c;
  --line: #c7cec2;
  --accent: var(--forest);
  --blue: var(--forest);
  background: var(--paper);
  color: var(--ink);
  color-scheme: light;
}
body[data-treatment] > header { background:var(--cream); border-color:var(--line); }
body[data-treatment] > header .brand img { content:url('/brand/Concien-Wordmark-Black-Blue.svg'); }
body[data-treatment] > header nav a { color:var(--ink); }
body[data-treatment] #main-navigation a[aria-current="page"] { color:var(--forest); text-decoration:underline; text-underline-offset:7px; }
body[data-treatment] .menu-toggle { background:var(--ivory); color:var(--ink); }
body[data-treatment] h1, body[data-treatment] h2 { color:var(--navy); }
body[data-treatment] .page-banner {
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center;
  gap:24px; padding:32px; margin:0 0 28px; border-radius:22px;
  background:var(--navy); color:var(--ivory);
}
body[data-treatment] .page-banner :is(h1,.eyebrow,.lead) { color:inherit; }
body[data-treatment] .page-banner .eyebrow { color:var(--pale-blue); }
body[data-treatment] .page-banner h1 { margin:10px 0 16px; }
body[data-treatment] .page-banner .lead { margin:0; font-size:18px; line-height:1.6; }
body[data-treatment] .new-hero { margin-top:8px; }
body[data-treatment] .new-hero h1 { font-size:clamp(2rem,4vw,3.4rem); }
body[data-treatment] .new-hero .lead { max-width:70ch; }
body[data-treatment] .section-layout .page-banner { display:block; }
body[data-treatment] .section-layout .header-art { margin:16px 0 0 auto; }
body[data-treatment] .search-form {
  background:var(--pale-blue); padding:14px; border:0; gap:12px;
  max-width:none; margin:0 0 18px; border-radius:18px;
}
body[data-treatment] .search-form input { background:var(--ivory); color:var(--ink); border-radius:12px; min-width:0; padding:14px 16px; }
body[data-treatment] .search-form input::placeholder { color:var(--muted); }
body[data-treatment] .home-search-hint { margin-bottom:32px; }
body[data-treatment] .search-page .search-summary { margin:28px 0 20px; }
body[data-treatment] .search-page .search-summary p { margin:0; }
body[data-treatment] .search-page .search-results-heading {
  margin:0; font-size:clamp(1.25rem,2vw,1.5rem); font-weight:600;
  line-height:1.3; letter-spacing:-.015em; color:var(--navy);
}
body[data-treatment] .btn { background:var(--forest); border-color:var(--forest); color:var(--ivory); }
body[data-treatment] .btn.secondary { background:transparent; color:var(--forest); border-color:#73877e; }
body[data-treatment] :is(.areas .area,.doorways>a,.quick a,.entry-link,.path-options>a) {
  background:var(--ivory); color:var(--ink); border-color:var(--line);
}
body[data-treatment] :is(.areas .area,.doorways>a):nth-child(even) { background:var(--sage); }
body[data-treatment] :is(.area p,.area .count,.doorways p,.door-number,.door-action,.entry-link p) { color:var(--muted); }
body[data-treatment] :is(.areas .area,.doorways>a,.entry-link,.path-options>a):hover { border-color:var(--forest); box-shadow:0 3px 12px #1528400d; }
body[data-treatment] .doorways>a { position:relative; }
body[data-treatment] .doorways .discovery-art { order:4; margin:4px 0 12px auto; }
body[data-treatment] .doorways .door-action { order:5; }
body[data-treatment] .practice-foundation { display:flex; align-items:center; justify-content:space-between; gap:24px; background:var(--sage); }
body[data-treatment] .practice-foundation>div { min-width:0; }
body[data-treatment] .pillar-note { background:var(--sage); color:var(--ink); }
body[data-treatment] :is(.practice,.related,.focus-card,.timer-panel,.plain-example,.focus-help) { background:var(--ivory); }
body[data-treatment] :is(.anchor,.support,.focus-takeaway,.guided,.return-diagram) { background:var(--sage); color:var(--ink); }
body[data-treatment] .anchor { display:flow-root; }
body[data-treatment] .anchor p { color:var(--ink); margin-bottom:12px; }
body[data-treatment] .anchor .support-art { margin:0 0 0 auto; }
body[data-treatment] .about-grid>div:nth-child(odd) { background:var(--sage); border-color:var(--line); }
body[data-treatment] .about-grid>div:nth-child(even) { background:var(--ivory); border-color:var(--line); }
body[data-treatment] .about-origin { background:var(--forest); color:var(--ivory); }
body[data-treatment] .about-origin :is(h2,p,.eyebrow) { color:inherit; }
body[data-treatment] :is(.focus-input,.focus-durations span,.walk-choices label) { background:var(--ivory); color:var(--ink); }
body[data-treatment] .focus-durations input:checked+span,
body[data-treatment] .walk-choices label:has(input:checked) { background:var(--forest); color:var(--ivory); border-color:var(--forest); }
body[data-treatment] .walk-choices input { accent-color:var(--forest); }
body[data-treatment] .focus-progress { background:var(--pale-blue); padding:16px; border-radius:16px; }
body[data-treatment] .focus-progress span { color:var(--muted); border-color:#a2b8bc; }
body[data-treatment] .focus-progress span[aria-current="step"] { color:var(--forest); border-color:var(--forest); }
body[data-treatment] .site-footer { background:var(--forest); color:var(--ivory); border-color:#58736a; }
body[data-treatment] .site-footer :is(a,.footer-owner,.footer-bottom) { color:#e0e9e3; border-color:#58736a; }
body[data-treatment] .site-footer a:hover { color:var(--ivory); }

/* Keep decorative art secondary to text. All source assets are 2:1. */
.header-art,.discovery-art,.reading-art,.category-art,.support-art,.saved-art {
  display:block; object-fit:contain; width:var(--art-small); max-width:100%;
  height:auto; aspect-ratio:2 / 1; flex-shrink:0; pointer-events:none;
}
.header-art { width:var(--art-header); align-self:center; margin:0; }
.category-art { width:80px; margin:0 0 14px; }
.reading-art { margin:12px 0 20px; }
.support-art { margin:0; }
.saved-art { float:right; margin:0 0 16px 16px; }
/* Practice illustrations retain the previously approved dimensions. */
.focus-card .reading-art { width:180px; height:96px; max-width:60%; }
#concien-journey .practice-motif { width:148px; height:74px; max-width:40%; margin:0 0 24px; }

/* Emotions: the same warm shell, gently deepening practice surfaces. */
body[data-treatment="deep"] > header { background:var(--navy); border-color:#405770; }
body[data-treatment="deep"] > header .brand img { content:url('/brand/Concien-Wordmark-Reversed.svg'); }
body[data-treatment="deep"] > header nav a { color:var(--ivory); }
body[data-treatment="deep"] #main-navigation a[aria-current="page"] { color:var(--ivory); }
#concien-journey .cj-phone,
#concien-journey .cj-phone.deep,
#concien-journey .cj-phone:not(.deep) {
  --cj-bg:var(--cream); --cj-ink:#253f3c; --cj-sub:#52635c;
  --cj-surface:var(--ivory); --cj-line:#bac6bb; --cj-cta:var(--forest);
  --cj-on:var(--ivory); --cj-accent:var(--forest); --cj-soft:var(--sage);
  color-scheme:light; background:transparent; color:var(--cj-ink);
}
#concien-journey .cj-top { background:var(--pale-blue); border-radius:18px; padding:16px 20px; margin-bottom:20px; }
#concien-journey .cj-page,
#concien-journey .cj-top:has(.cj-small:not([hidden])) + .cj-page {
  padding:32px; background:var(--ivory); border-radius:22px; margin-bottom:24px;
}
body[data-practice-step="understand"] #concien-journey .cj-page { background:var(--sage); }
body[data-practice-step="allow"] #concien-journey .cj-page { background:var(--sage-practice); }
body[data-practice-step="ending"] #concien-journey .cj-page { background:var(--seafoam); }
body[data-practice-step="ending"] #concien-journey .cj-progress { background:var(--pale-blue); padding:12px; border-radius:10px; }
#concien-journey .cj-progress span { background:#b3c4bd; }
#concien-journey .cj-progress span.done { background:var(--forest); }
#concien-journey .cj-heading :is(h1,h2) { color:var(--navy); }
#concien-journey .cj-response { background:var(--ivory); border:1px solid var(--cj-line); color:var(--cj-ink); }
#concien-journey .cj-phone.deep .cj-memory,
#concien-journey .cj-phone:not(.deep) .cj-memory,
#concien-journey .cj-phone .ce-saved-grid .cj-tile,
#concien-journey .ce-saved-empty {
  background:var(--ivory); color:var(--cj-ink); border:1px solid var(--cj-line);
}
#concien-journey .cj-memory { display:flow-root; }
#concien-journey .cj-phone.deep .cj-memory :is(.cj-eye,p),
#concien-journey .cj-phone:not(.deep) .cj-memory :is(.cj-eye,p) { color:var(--cj-sub); }
#concien-journey .cj-memory blockquote { color:var(--cj-ink); }
#concien-journey .ce-progress-label { font-size:.875rem; font-weight:600; color:var(--forest); margin:0 0 10px; }
#concien-journey .ce-your-words { background:var(--ivory); border:1px solid var(--cj-line); border-radius:14px; padding:14px 16px; margin:20px 0; }
#concien-journey .ce-your-words span { display:block; font-size:.875rem; color:var(--cj-sub); margin-bottom:6px; }
#concien-journey .ce-your-words p { margin:0; color:var(--cj-ink); white-space:pre-wrap; overflow-wrap:anywhere; }
#concien-journey .ce-authored-copy p { color:var(--cj-ink); margin-bottom:18px; }
#concien-journey .ce-corrections { display:flex; flex-wrap:wrap; gap:8px 24px; border-top:1px solid var(--cj-line); margin-top:20px; padding-top:8px; }
#concien-journey .ce-support-links { display:grid; gap:12px; margin:24px 0; }
#concien-journey .ce-support-links a { display:flex; align-items:center; min-height:48px; padding:14px 16px; border:1px solid var(--forest); border-radius:14px; color:var(--forest); text-decoration:underline; text-underline-offset:3px; }
#concien-journey .ce-save-status:empty { display:none; }
#concien-journey .cj-top:has([data-action="back"][hidden]):has([data-action="restart"][hidden]) { display:none; }
#concien-journey .ce-word-finder #ce-results { max-height:24rem; overflow-y:auto; padding:0 5px; }
#concien-journey .ce-finder-response { padding:16px 0 4px; }
#concien-journey .ce-entry-feedback { margin:14px 0; padding:16px; border:1px solid var(--forest); border-radius:14px; background:var(--pale-blue); color:var(--cj-ink); font-size:1rem; line-height:1.5; }
#concien-journey .ce-finder-response > p { margin:0 0 12px; }
#concien-journey .ce-finder-response .ce-finder-label { font-size:.875rem; color:var(--cj-sub); margin:24px 0 12px; }
#concien-journey .cj-choice { text-align:center; font-weight:600; }
#concien-journey .ce-help-options { margin-top:24px; }
#concien-journey .ce-quiet-actions { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; margin-top:20px; }
#concien-journey .ce-quiet-actions .cj-link { justify-self:center; min-height:44px; padding:10px 12px; text-align:center; }
#concien-journey .ce-quiet-actions .cj-secondary { margin-top:0; }
#concien-journey .cj-memory blockquote { margin-left:0; margin-right:0; }
.ce-home-reminder { background:var(--sage); border:1px solid var(--line); border-radius:22px; padding:28px; margin:28px 0 36px; }
.ce-home-reminder .cj-memory { display:flow-root; background:var(--ivory); border-radius:18px; padding:24px; margin:20px 0; }
.ce-home-reminder .cj-eye { font-size:.875rem; color:var(--muted); }
.ce-home-reminder blockquote { font-size:1.25rem; line-height:1.5; margin:12px 0 0; }
.ce-home-reminder .buttons { display:flex; flex-wrap:wrap; gap:12px; }
.search-response { background:var(--ivory); border:1px solid var(--line); border-radius:18px; padding:24px; margin:0 0 28px; overflow-wrap:anywhere; }
.search-response p:last-child { margin-bottom:0; }
.search-response .buttons { display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }
.search-response .btn { text-align:center; }
#concien-journey .cj-bottom { background:var(--ivory); }
#concien-journey .cj-bottom button[aria-current="page"] { background:var(--sage); color:var(--forest); }
body:is([data-practice-step="saved"],[data-practice-step="return"]) #concien-journey .cj-page { background:transparent; padding:0; }
body:is([data-practice-step="saved"],[data-practice-step="return"]) #concien-journey .cj-heading { background:var(--navy); color:var(--ivory); padding:28px; border-radius:22px; margin-bottom:28px; }
body:is([data-practice-step="saved"],[data-practice-step="return"]) #concien-journey .cj-heading :is(h1,h2,p,.cj-eye) { color:inherit; }
body:is([data-practice-step="saved"],[data-practice-step="return"]) #concien-journey .cj-memory { background:var(--sage); }

@media(max-width:1050px) {
  body[data-treatment] #main-navigation { background:var(--ivory); border-color:var(--line); }
  body[data-treatment] #main-navigation a,
  body[data-treatment] #main-navigation a[aria-current="page"] { color:var(--ink); }
}
@media(max-width:760px) {
  :root { --art-small:80px; --art-header:96px; }
  body[data-treatment] .page-banner { padding:24px; gap:16px; }
  body[data-treatment] .page-banner .lead { font-size:16px; }
  body[data-treatment] .section-layout .page-banner { margin-bottom:20px; }
  .category-art { width:64px; }
}
@media(max-width:600px) {
  :root { --art-small:72px; --art-header:80px; }
  body[data-treatment] .page-banner { display:block; padding:24px 20px; }
  body[data-treatment] .page-banner .header-art { margin:16px 0 0 auto; }
  body[data-treatment] .page-banner h1 { font-size:2rem; line-height:1.16; }
  body[data-treatment] .practice-foundation { display:block; }
  body[data-treatment] .practice-foundation .support-art { margin:16px 0 0 auto; }
  body[data-treatment] .search-form { padding:12px; }
  .focus-card .reading-art { width:144px; height:80px; }
  #concien-journey .practice-motif { width:112px; height:56px; margin-bottom:20px; }
  #concien-journey .cj-page,
  #concien-journey .cj-top:has(.cj-small:not([hidden])) + .cj-page { padding:24px 20px; }
  #concien-journey .cj-top { padding:12px; }
  body:is([data-practice-step="saved"],[data-practice-step="return"]) #concien-journey .cj-page { padding:0; }
  body:is([data-practice-step="saved"],[data-practice-step="return"]) #concien-journey .cj-heading { padding:24px 20px; }
}
@media(max-width:600px) {
  body[data-treatment] .search-form { flex-wrap:wrap; }
  body[data-treatment] .search-form input { flex:1 1 100%; width:100%; }
  body[data-treatment] .search-form button { width:100%; }
}


/* October 14: readable introductions throughout the established design. */
body[data-treatment] .page-banner .lead,
body[data-treatment] .focus-intro { font-size:clamp(1.125rem,1.8vw,1.25rem);line-height:1.6;max-width:65ch; }
body[data-treatment] :is(.practice-why,.body-copy,.doorways p,.entry-link p,.section-heading p,.path-options p) { font-size:1.125rem;line-height:1.6; }
#concien-journey .cj-heading p,
#concien-journey .ce-authored-copy p { font-size:1.125rem;line-height:1.6; }
body[data-treatment] .focus-input { font-family:inherit;resize:vertical;line-height:1.5; }

/* October 15: a compact return, secondary to the public practice invitations. */
.home-return { background:var(--sage);border:1px solid var(--line);border-radius:16px;padding:18px 22px;margin:24px 0 30px; }
.home-return-top { display:flex;align-items:baseline;justify-content:space-between;gap:8px 24px;flex-wrap:wrap; }
body[data-treatment] .home-return h2 { margin:0;font-size:1.125rem;line-height:1.4;font-weight:700;letter-spacing:0; }
.home-return-top > a { font-size:.9375rem;min-height:44px;display:inline-flex;align-items:center; }
.home-return-items { display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:12px 28px; }
.home-return-item { min-width:0; }
.home-return-label { color:var(--muted);font-size:.8125rem;line-height:1.4;font-weight:600; }
.home-return-summary { margin:5px 0 2px;font-size:1rem;line-height:1.5;overflow-wrap:anywhere; }
.home-return-action { display:inline-flex;align-items:center;min-height:44px;padding:4px 0;background:transparent;border:0;color:var(--forest);font:600 .875rem/1.4 var(--font-body);text-align:left;cursor:pointer; }
.home-return :focus-visible { outline:3px solid #4d70b2;outline-offset:3px; }
@media(max-width:600px) { .home-return {padding:16px 18px;margin:20px 0 26px;} .home-return-top {gap:2px 16px;} }