/*
 * Bible Calendar 0.5.2 - Contemporary Editorial Devotional with Tactile 3D Depth.
 *
 * This layer sits on top of app.css / month.css / journey.css and changes presentation only: the markup, information
 * architecture and behaviour are unchanged. Creative treatment is confined to the hero, the monthly identity, artwork
 * and image layering; navigation, forms, buttons, calendar controls and Bible reading stay plain and disciplined.
 *
 * Contents: 1 tokens - 2 paper - 3 header and nav - 4 typography - 5 hero and art - 6 scenes - 7 overlapping scripture
 * and pull-quote - 8 Explore planes - 9 calendar - 10 completed and journey - 11 motion - 12 accessibility modes.
 */

/* 1. Tokens ------------------------------------------------------------------------------------------------- */
:root {
  --bc-paper: #f6f1e5;
  --bc-paper-hi: #fffdf7;
  --bc-paper-lo: #ece5d4;
  --bc-charcoal: #2b2d29;
  --bc-hairline: rgb(43 45 41 / 14%);
  --bc-shadow-1: 0 1px 1px rgb(43 40 30 / 6%), 0 2px 4px rgb(43 40 30 / 5%);
  --bc-shadow-2: 0 2px 4px rgb(43 40 30 / 5%), 0 10px 20px rgb(43 40 30 / 7%), 0 24px 44px -12px rgb(43 40 30 / 12%);
  --bc-shadow-3: 0 4px 8px rgb(43 40 30 / 6%), 0 18px 32px rgb(43 40 30 / 10%), 0 44px 70px -18px rgb(43 40 30 / 22%);
  --bc-shadow: var(--bc-shadow-1), 0 12px 28px -10px rgb(43 40 30 / 10%);
  --bc-shadow-lift: var(--bc-shadow-2);
  --bc-radius-lg: 22px;
  --bc-arch: 999px 999px 18px 18px;
  --bc-sky-a: #f4efe0;
  --bc-sky-b: #e6dfcb;
  --bc-sun: #fff6d8;
  --bc-sun-x: 68%;
  --bc-sun-y: 26%;
  --bc-art-ink: #5b6a4f;
}

/* 2. Paper --------------------------------------------------------------------------------------------------- */
body.bc-app {
  background-color: var(--bc-paper);
  background-image: radial-gradient(120% 40rem at 50% -10rem, var(--bc-paper-hi) 0, rgb(255 253 247 / 0%) 70%);
}
/* Printed-stock grain. Fixed, non-interactive, multiplied so it only ever darkens by a hair. */
body.bc-app::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.bc-card { background: var(--bc-paper-hi); border-color: rgb(43 45 41 / 10%); }

/* 3. Header and navigation ----------------------------------------------------------------------------------- */
.bc-header { background: transparent; border-block-end-color: var(--bc-hairline); }
.bc-brand { letter-spacing: -.02em; }
.bc-brand-mark { border-color: var(--bc-hairline); background: var(--bc-paper-hi); box-shadow: var(--bc-shadow-1); }
.bc-bottom-nav { background: var(--bc-paper-hi); border-block-start-color: var(--bc-hairline); box-shadow: 0 -10px 30px -8px rgb(43 40 30 / 12%); }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .bc-bottom-nav { background: rgb(255 253 247 / 78%); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); }
}
.bc-nav-items a[aria-current="page"] { background: rgb(73 96 67 / 9%); }

/* 4. Typography ---------------------------------------------------------------------------------------------- */
.bc-eyebrow { letter-spacing: .2em; }
.bc-app h1 { letter-spacing: -.04em; }
.bc-greeting { font-size: clamp(1.15rem, 2.4vw, 1.5rem); }
.bc-today-heading h1 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); letter-spacing: -.035em; }
.bc-hero-copy h2 { font-size: clamp(2.6rem, 8.6vw, 4.9rem); line-height: 1.02; letter-spacing: -.055em; margin-block: .9rem 1.1rem; }
.bc-hero-copy h2 em { display: inline-block; padding-inline-start: .55em; color: var(--bc-accent); font-style: italic; }
.bc-hero-copy h2 [lang="hi"], .bc-hero-copy h2:lang(hi) { letter-spacing: -.01em; line-height: 1.22; }
.bc-hero-copy h2 em [lang="hi"] { font-style: normal; }
.bc-month-hero h1 { font-size: clamp(2.9rem, 11vw, 5.25rem); line-height: 1; letter-spacing: -.055em; }
.bc-month-hero h1 [lang="hi"] { letter-spacing: -.01em; line-height: 1.2; }

/* 5. Hero and artwork ---------------------------------------------------------------------------------------- */
.bc-hero {
  position: relative;
  border: 1px solid rgb(43 45 41 / 10%);
  border-radius: var(--bc-radius-lg);
  background-color: var(--bc-paper);
  background-image: radial-gradient(60% 70% at 84% 30%, rgb(255 251 236 / 90%) 0, rgb(255 251 236 / 0%) 72%), linear-gradient(162deg, var(--bc-paper-hi) 0%, var(--bc-paper) 55%, var(--bc-paper-lo) 100%);
  box-shadow: 0 1px 0 rgb(255 255 255 / 80%) inset, var(--bc-shadow-2);
  overflow: clip;
}
.bc-hero-lede { max-width: 25rem; }
.bc-hero-art { position: relative; z-index: 0; padding: 1.25rem 2rem 3.6rem; perspective: 1100px; perspective-origin: 50% 40%; }
.bc-art-frame {
  position: relative;
  width: min(100%, 21rem);
  margin-inline: auto;
  aspect-ratio: 4 / 5;
  border-radius: var(--bc-arch);
  transform: rotateY(-5deg) rotateX(1.5deg);
  transform-style: preserve-3d;
  box-shadow: var(--bc-shadow-3);
}
/* The offset "ghost" plane: a second arch sitting behind and to the side, so the frame reads as stacked stock. */
.bc-art-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid var(--bc-hairline);
  border-radius: var(--bc-arch);
  background: linear-gradient(180deg, rgb(255 253 247 / 70%), rgb(236 229 212 / 70%));
  transform: translate3d(1.1rem, .9rem, -28px);
  box-shadow: var(--bc-shadow-2);
}
.bc-art { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; color: var(--bc-art-ink); background: linear-gradient(180deg, var(--bc-sky-a) 0%, var(--bc-sky-b) 100%); isolation: isolate; }
.bc-art-plane { position: absolute; inset: -5% -5%; display: block; will-change: transform; transform: translate3d(calc(var(--bc-px, 0) * var(--bc-d, .5) * 10px), calc(var(--bc-py, 0) * var(--bc-d, .5) * 8px), 0); }
.bc-art-back { --bc-d: .25; }
.bc-art-mid { --bc-d: .55; }
.bc-art-front { --bc-d: 1; }
.bc-art-plane > svg, .bc-art-plane > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bc-art-sun { position: absolute; inset-inline-start: var(--bc-sun-x); inset-block-start: var(--bc-sun-y); width: 46%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, var(--bc-sun) 0, rgb(255 246 216 / 55%) 38%, rgb(255 246 216 / 0%) 70%); }
/* Grain and a faint vignette over all three planes so placeholder and final artwork share one printed finish. */
.bc-art-grain { position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: multiply; opacity: .55; background-image: radial-gradient(120% 90% at 50% 30%, rgb(255 255 255 / 0%) 55%, rgb(60 50 30 / 16%) 100%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .26 0 0 0 0 .18 0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)'/%3E%3C/svg%3E"); }
.bc-art-caption { position: absolute; z-index: 3; inset-inline: 1rem; inset-block-end: -1.15rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .1rem .75rem; padding: .55rem .95rem; border: 1px solid rgb(255 255 255 / 60%); border-radius: 14px; background: rgb(255 253 247 / 92%); box-shadow: var(--bc-shadow-2); color: #3d4238; font-size: .625rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; transform: translateZ(24px); }
.bc-art-caption span { color: var(--bc-gold); }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .bc-art-caption { background: rgb(255 253 247 / 66%); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); }
}

@media (max-width: 599px) {
  .bc-hero-art { padding-inline: 1.25rem 1.5rem; }
}
@media (min-width: 600px) {
  .bc-hero { grid-template-columns: 1.15fr 1fr; align-items: center; }
  .bc-hero-art { padding: 2.25rem 2rem 3.6rem 0; }
  .bc-art-frame { width: min(100%, 20rem); transform: rotateY(-8deg) rotateX(2deg); }
}
@media (min-width: 1024px) {
  .bc-hero-art { padding: 3rem 3rem 5rem 0; }
  .bc-art-frame { width: min(100%, 23rem); transform: rotateY(-10deg) rotateX(2deg) translateY(-.75rem); }
}

/* 6. Monthly scenes: each month owns a palette and a light. Names match "art" in data/month-identities.json. ------ */
.bc-art[data-bc-scene="preparation"]     { --bc-sky-a: #e9eaf0; --bc-sky-b: #cfd4de; --bc-sun: #eef2ff; --bc-sun-x: 30%; --bc-sun-y: 30%; --bc-art-ink: #4d5a70; }
.bc-art[data-bc-scene="deepening-roots"] { --bc-sky-a: #ece4d6; --bc-sky-b: #cdbfa6; --bc-sun: #f7e8c8; --bc-sun-x: 76%; --bc-sun-y: 22%; --bc-art-ink: #6b5a41; }
.bc-art[data-bc-scene="sowing"]          { --bc-sky-a: #f1ecd9; --bc-sky-b: #dcd2b0; --bc-sun: #fff2c4; --bc-sun-x: 24%; --bc-sun-y: 24%; --bc-art-ink: #62703f; }
.bc-art[data-bc-scene="new-life"]        { --bc-sky-a: #fbf3df; --bc-sky-b: #e4e2c9; --bc-sun: #fff7d6; --bc-sun-x: 66%; --bc-sun-y: 30%; --bc-art-ink: #4f6a45; }
.bc-art[data-bc-scene="cultivation"]     { --bc-sky-a: #eef0dc; --bc-sky-b: #cfd8b4; --bc-sun: #fbf6cf; --bc-sun-x: 50%; --bc-sun-y: 20%; --bc-art-ink: #475f3a; }
.bc-art[data-bc-scene="abundant-light"]  { --bc-sky-a: #fff6d9; --bc-sky-b: #f0d9a2; --bc-sun: #fffbe6; --bc-sun-x: 56%; --bc-sun-y: 22%; --bc-art-ink: #7a6530; }
.bc-art[data-bc-scene="thriving"]        { --bc-sky-a: #eaf2e0; --bc-sky-b: #bfd3aa; --bc-sun: #f7f8d8; --bc-sun-x: 72%; --bc-sun-y: 26%; --bc-art-ink: #3f6138; }
.bc-art[data-bc-scene="endurance"]       { --bc-sky-a: #efe2d3; --bc-sky-b: #d3b79b; --bc-sun: #ffe9c9; --bc-sun-x: 80%; --bc-sun-y: 30%; --bc-art-ink: #7a5a3f; }
.bc-art[data-bc-scene="harvest"]         { --bc-sky-a: #f6e8cd; --bc-sky-b: #e2c08a; --bc-sun: #fff0c8; --bc-sun-x: 28%; --bc-sun-y: 32%; --bc-art-ink: #7d5c2b; }
.bc-art[data-bc-scene="gratitude"]       { --bc-sky-a: #f2e4d6; --bc-sky-b: #d9b59a; --bc-sun: #ffe6cf; --bc-sun-x: 62%; --bc-sun-y: 36%; --bc-art-ink: #7a4f3a; }
.bc-art[data-bc-scene="pruning"]         { --bc-sky-a: #e8e6e2; --bc-sky-b: #c4c2bb; --bc-sun: #f6f4ee; --bc-sun-x: 40%; --bc-sun-y: 22%; --bc-art-ink: #55574f; }
.bc-art[data-bc-scene="rest"]            { --bc-sky-a: #e7e6f0; --bc-sky-b: #c6c4d9; --bc-sun: #f3f0ff; --bc-sun-x: 70%; --bc-sun-y: 24%; --bc-art-ink: #514f72; }
.bc-month-hero { background-image: radial-gradient(60% 70% at 84% 30%, rgb(255 251 236 / 80%) 0, rgb(255 251 236 / 0%) 72%), linear-gradient(162deg, var(--bc-paper-hi) 0%, var(--bc-month-wash, var(--bc-paper)) 100%); }

/* 7. Scripture card overlaps the hero; the reflection becomes an editorial pull-quote --------------------------- */
.bc-today-grid { position: relative; z-index: 2; margin-block-start: -1.75rem; padding-inline: .75rem; align-items: start; }
.bc-scripture { background: var(--bc-paper-hi); border-color: rgb(43 45 41 / 8%); border-radius: 18px; box-shadow: var(--bc-shadow-3); overflow: clip; }
.bc-scripture::before { inset-inline: 0; inset-block-start: 0; width: 3px; height: auto; inset-block-end: 0; border-radius: 0; background: linear-gradient(180deg, var(--bc-gold-line), rgb(211 199 163 / 0%)); }
.bc-scripture::after { content: "\201C" / ""; position: absolute; inset-block-start: .25rem; inset-inline-end: 1.1rem; font-family: var(--bc-heading); font-size: 6.5rem; line-height: 1; color: var(--bc-gold); opacity: .12; pointer-events: none; }
.bc-scripture .bc-home-verse-preview h2 { font-size: clamp(1.6rem, 4vw, 2.25rem); letter-spacing: -.03em; }
.bc-reflection { padding: .5rem 0 .5rem 1.5rem; border: 0; border-inline-start: 2px solid var(--bc-gold-line); border-radius: 0; background: none; box-shadow: none; }
.bc-reflection h2 { font-size: clamp(1.5rem, 3.4vw, 2rem); font-style: italic; line-height: 1.25; }
.bc-reflection h2 [lang="hi"] { font-style: normal; }
@media (min-width: 1024px) {
  .bc-today-grid { margin-block-start: -3.5rem; padding-inline: 2.5rem 0; grid-template-columns: 1.5fr 1fr; gap: 3rem; }
  .bc-reflection { margin-block-start: 4.5rem; }
}

/* 8. Explore: story art as layered arch planes ------------------------------------------------------------------ */
.bc-story { overflow: clip; box-shadow: var(--bc-shadow-2); }
.bc-story-art { --bc-a: #e8e6cf; --bc-b: #c9cfb0; height: 240px; border-radius: 0; background: linear-gradient(180deg, var(--bc-a), var(--bc-b)); overflow: hidden; isolation: isolate; }
.bc-story-art--sand { --bc-a: #f4ead2; --bc-b: #dcc79a; }
.bc-story-art--blue { --bc-a: #e6eef0; --bc-b: #b9ccd2; }
.bc-story-art--clay { --bc-a: #f2e2d6; --bc-b: #d2ac95; }
.bc-story-art::before { content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 14%; width: 46%; height: 78%; border-radius: 999px 999px 0 0; background: rgb(255 253 247 / 38%); box-shadow: 0 0 0 1px rgb(43 45 41 / 8%), 12px 0 28px rgb(43 40 30 / 10%); }
.bc-story-orbit { position: relative; z-index: 1; width: 46%; height: 58%; margin-block-start: 3.2rem; margin-inline-start: 12%; border: 0; border-radius: 999px 999px 0 0; background: linear-gradient(180deg, rgb(255 253 247 / 70%), rgb(255 253 247 / 18%)); box-shadow: 0 1px 0 rgb(255 255 255 / 70%) inset, 0 18px 30px -10px rgb(43 40 30 / 25%); }
.bc-story-horizon { inset-inline: 0; inset-block-end: 0; height: 26%; border-radius: 0; background: linear-gradient(180deg, rgb(43 40 30 / 0%), rgb(43 40 30 / 16%)); z-index: 2; }
.bc-story-art::after { content: ""; position: absolute; z-index: 1; inset-block-end: 0; inset-inline-end: -8%; width: 52%; height: 44%; border-radius: 999px 999px 0 0; background: rgb(43 45 41 / 14%); }
.bc-art-label { z-index: 3; letter-spacing: .2em; color: #4b5044; }
.bc-story-copy h2 { letter-spacing: -.035em; }

/* 9. Calendar: tactile, but the controls stay plain ------------------------------------------------------------- */
.bc-month-card { border-radius: 20px; box-shadow: var(--bc-shadow-2); }
.bc-day.is-available .bc-day-link::before { background: linear-gradient(180deg, #fbf8ee, #ece8d6); border-color: rgb(43 45 41 / 8%); box-shadow: 0 1px 0 rgb(255 255 255 / 80%) inset, 0 1px 2px rgb(43 40 30 / 10%); }
.bc-day.is-today .bc-day-link::before, .bc-day.is-today .bc-day-inner::before { background: linear-gradient(180deg, #58754f, #3f5a39); box-shadow: 0 0 0 2px var(--bc-paper-hi), 0 0 0 3.5px var(--bc-gold), 0 8px 14px -4px rgb(52 72 46 / 45%); }
.bc-day.is-today.is-missing .bc-day-inner::before { background: var(--bc-paper-hi); box-shadow: 0 0 0 2px var(--bc-paper-hi), 0 0 0 3.5px var(--bc-gold); }
.bc-day.is-selected .bc-day-link::before, .bc-day.is-selected .bc-day-inner::before { outline-color: var(--bc-gold); }

/* 10. Completed panel and journey ------------------------------------------------------------------------------- */
.bc-done { padding: 1.5rem 1.5rem 1.6rem; border: 1px solid rgb(43 45 41 / 8%); border-radius: 18px; background: var(--bc-paper-hi); box-shadow: var(--bc-shadow-2); }
.bc-done-mark { border-color: var(--bc-gold-line); box-shadow: var(--bc-shadow-1); }
.bc-done-mark .bc-icon path { stroke-dasharray: 24; stroke-dashoffset: 0; }
.bc-done-action { background: var(--bc-paper-hi); border-color: rgb(43 45 41 / 16%); box-shadow: var(--bc-shadow-1); }
.bc-journey-section, .bc-completion, .bc-daily-challenge { background-color: var(--bc-paper-hi); }
.bc-journey-intro h1 { letter-spacing: -.045em; }

/* 11. Motion. Only when the visitor has not asked for less. ----------------------------------------------------- */
@keyframes bc-plane-rise { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
@keyframes bc-frame-settle { from { opacity: 0; transform: rotateY(-16deg) rotateX(4deg) translateY(18px); } }
@keyframes bc-tick-draw { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .bc-art-frame { animation: bc-frame-settle 900ms var(--bc-ease) 160ms backwards; }
  .bc-art-plane { animation: bc-plane-rise 900ms var(--bc-ease) backwards; transition: transform 260ms var(--bc-ease); }
  .bc-art-back { animation-delay: 240ms; }
  .bc-art-mid { animation-delay: 380ms; }
  .bc-art-front { animation-delay: 520ms; }
  .bc-art-caption { animation: bc-plane-rise 700ms var(--bc-ease) 700ms backwards; }
  .bc-today-grid .bc-scripture { animation-delay: 320ms; }
  .bc-done-mark .bc-icon path { animation: bc-tick-draw 600ms var(--bc-ease) 200ms backwards; }
  .bc-done-action, .bc-story, .bc-day-link::before { transition: transform 200ms var(--bc-ease), box-shadow 200ms var(--bc-ease), background-color 200ms var(--bc-ease), border-color 200ms var(--bc-ease); }
  .bc-done-action:hover { transform: translateY(-1px); box-shadow: var(--bc-shadow-2); }
  .bc-story:hover { transform: translateY(-3px); box-shadow: var(--bc-shadow-3); }
  .bc-day.is-available .bc-day-link:hover::before { transform: translateY(-1px); }
  .bc-scripture { transition: box-shadow 260ms var(--bc-ease); }
}

/* 12. Accessibility modes -------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bc-art-plane { transform: none !important; will-change: auto; }
}
@media (prefers-contrast: more) {
  body.bc-app::before, .bc-art-grain { display: none; }
  .bc-card, .bc-hero, .bc-scripture { border-color: var(--bc-charcoal); }
}
@media (forced-colors: active) {
  body.bc-app::before, .bc-art-grain { display: none; }
  .bc-art-caption, .bc-bottom-nav { -webkit-backdrop-filter: none; backdrop-filter: none; background: Canvas; }
  .bc-art-frame, .bc-art-frame::before { border: 1px solid CanvasText; }
  .bc-scripture::after { display: none; }
}
@media print {
  body.bc-app::before, .bc-art-grain, .bc-art-frame::before { display: none; }
  .bc-art-frame { transform: none; box-shadow: none; }
  .bc-art-plane { transform: none !important; }
}