/* The home page, laid out like the owner's mockup. Picture panels (hero, crystal banner, message) stay
   night-sea in both themes because they are artwork; cards and page follow the light or dark theme. */
:root {
  --frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='66' height='66' viewBox='0 0 66 66'%3E%3Crect x='3' y='3' width='60' height='60' rx='10' fill='none' stroke='%23D6AD55' stroke-width='1.2'/%3E%3Crect x='8' y='8' width='50' height='50' rx='6' fill='none' stroke='%23D6AD55' stroke-opacity='.5'/%3E%3Cg fill='%23F2D48C'%3E%3Cpath d='M5 1l1 3 3 1-3 1-1 3-1-3-3-1 3-1z'/%3E%3Cpath d='M61 1l1 3 3 1-3 1-1 3-1-3-3-1 3-1z'/%3E%3Cpath d='M5 57l1 3 3 1-3 1-1 3-1-3-3-1 3-1z'/%3E%3Cpath d='M61 57l1 3 3 1-3 1-1 3-1-3-3-1 3-1z'/%3E%3C/g%3E%3C/svg%3E");
  --card-bg: linear-gradient(180deg, rgba(5, 40, 60, 0.86), rgba(3, 26, 42, 0.92));
}
:root[data-theme="light"] {
  --frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='66' height='66' viewBox='0 0 66 66'%3E%3Crect x='3' y='3' width='60' height='60' rx='10' fill='none' stroke='%23B98A34' stroke-width='1.2'/%3E%3Crect x='8' y='8' width='50' height='50' rx='6' fill='none' stroke='%23B98A34' stroke-opacity='.5'/%3E%3Cg fill='%23C99A3C'%3E%3Cpath d='M5 1l1 3 3 1-3 1-1 3-1-3-3-1 3-1z'/%3E%3Cpath d='M61 1l1 3 3 1-3 1-1 3-1-3-3-1 3-1z'/%3E%3Cpath d='M5 57l1 3 3 1-3 1-1 3-1-3-3-1 3-1z'/%3E%3Cpath d='M61 57l1 3 3 1-3 1-1 3-1-3-3-1 3-1z'/%3E%3C/g%3E%3C/svg%3E");
  --card-bg: linear-gradient(180deg, rgba(255, 252, 244, 0.94), rgba(250, 245, 232, 0.96));
}
.home main { margin-top: -85px; }

.btn.big { min-height: 58px; padding: 0 30px 0 12px; font-size: 21px; gap: 14px; }
.play-dot { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #0d2a35; color: #F2D48C; }
.play-dot svg { width: 16px; height: 16px; margin-left: 2px; }
.tri { font-size: 0.8em; }

/* hero: the artwork fills the width, the words sit on its calm left side */
.m-hero { position: relative; min-height: clamp(520px, 39vw, 640px); display: flex; align-items: center; padding: 100px 0 90px;
  background: linear-gradient(90deg, rgba(3, 26, 42, 0.55) 0%, rgba(3, 26, 42, 0.25) 30%, transparent 46%), #031e2e url(img/hero-bg.jpg) right center / cover no-repeat; color: #F3E9CF; }
.m-hero::after { content: ""; position: absolute; inset: auto 0 0; height: 140px; background: linear-gradient(transparent, var(--bg)); pointer-events: none; }
.m-hero .wrap { position: relative; z-index: 1; }
.m-hero h1 { color: #F6ECD2; font-size: clamp(54px, 5.6vw, 84px); line-height: 1.02; font-weight: 500; text-shadow: 0 3px 24px rgba(0, 15, 25, 0.55); }
.m-hero .lede { font: italic 500 clamp(21px, 2.1vw, 30px)/1.35 var(--display); color: #F3E9CF; margin: 22px 0 34px; text-shadow: 0 2px 14px rgba(0, 15, 25, 0.6); }

/* the four cards, each in an ornate gold frame */
.m-cards { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: -60px; }
.m-card, .m-frame { border: 22px solid transparent; border-image: var(--frame) 22 / 22px stretch; background: var(--card-bg); background-clip: padding-box; }
.m-card { margin: 0; padding: 6px 4px 4px; text-align: center; display: grid; justify-items: center; align-content: start; gap: 10px; }
.m-card img, .yt-tile { height: 62px; width: auto; }
.yt-tile { width: 66px; height: 48px; margin: 7px 0; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(180deg, var(--gold-hi), var(--gold-lo)); color: #0d2a35; }
.yt-tile svg { width: 24px; height: 24px; }
.m-card h2 { font-size: clamp(25px, 2.3vw, 31px); color: var(--gold-hi); }
:root[data-theme="light"] .m-card h2 { color: var(--gold); }
.m-card p { font: 500 18px/1.35 var(--display); color: var(--ink); max-width: 24ch; }
.m-card .btn { margin-top: 6px; min-width: 76%; }

/* the crystal banner */
.m-journey { margin-top: 26px; min-height: clamp(220px, 19vw, 280px); display: flex; align-items: center; padding: 26px clamp(26px, 4vw, 52px);
  border: 22px solid transparent; border-image: var(--frame) 22 / 22px stretch;
  background: linear-gradient(90deg, rgba(3, 26, 42, 0.7) 0%, rgba(3, 26, 42, 0.4) 40%, transparent 58%) padding-box, url(img/journey-bg.jpg) right center / cover no-repeat padding-box; color: #F3E9CF; }
.m-journey h2 { color: #F2D48C; font-size: clamp(32px, 3.4vw, 46px); }
.m-journey p { font: 500 clamp(18px, 1.6vw, 22px)/1.4 var(--display); margin: 10px 0 22px; }

/* the daily reading */
.m-rule { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 46px 0 20px; font-size: clamp(30px, 3vw, 42px); color: var(--gold-hi); text-align: center; }
:root[data-theme="light"] .m-rule { color: var(--gold); }
.m-rule::before, .m-rule::after { content: ""; flex: 1; max-width: 300px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.m-rule::after { background: linear-gradient(270deg, transparent, var(--gold)); }
.m-rule span { font-size: 0.45em; color: var(--gold); order: 0; }
.m-daily { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 16px; }
.m-video { padding: 0; aspect-ratio: auto; }
.m-video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 6px; }
.m-message { display: flex; align-items: center; padding: 14px clamp(16px, 3vw, 30px); color: #F3E9CF;
  background: linear-gradient(90deg, rgba(3, 26, 42, 0.95) 45%, rgba(3, 26, 42, 0.2)), url(img/mandala.jpg) right center / auto 100% no-repeat, #04263a; background-clip: padding-box; }
.m-message > div { max-width: 62%; display: grid; gap: 14px; justify-items: start; }
.m-message h3 { font-size: clamp(28px, 2.5vw, 34px); color: #F2D48C; }
.m-message p { font: 500 clamp(18px, 1.5vw, 21px)/1.45 var(--display); }

@media (max-width: 980px) { .m-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .m-hero { align-items: flex-end; min-height: 640px; padding-bottom: 96px; background-position: 74% center; }
  .m-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(3, 26, 42, 0.92) 18%, rgba(3, 26, 42, 0.35) 55%, transparent 80%); }
  .m-hero .lede br { display: none; }
  .m-daily { grid-template-columns: 1fr; }
  .m-journey { background-position: 70% center; }
  .m-journey::before { content: none; }
  .m-journey > div { background: linear-gradient(90deg, rgba(3, 26, 42, 0.8), rgba(3, 26, 42, 0.5)); margin: -10px; padding: 10px; border-radius: 8px; }
  .m-journey p br { display: none; }
  .m-message > div { max-width: 100%; }
  .m-message { background: linear-gradient(180deg, rgba(3, 26, 42, 0.92), rgba(3, 26, 42, 0.8)), url(img/mandala.jpg) right center / auto 100% no-repeat, #04263a; background-clip: padding-box; }
}
@media (max-width: 520px) { .m-cards { grid-template-columns: 1fr; margin-top: -40px; } .btn.big { font-size: 19px; } }

/* dark mode: the generated artwork frame with lotus corners, and the sunken-city background behind the lower page */
:root:not([data-theme="light"]) .m-card, :root:not([data-theme="light"]) .m-video { border-width: 30px; border-image: url(img/card-frame.jpg) 104 fill / 46px stretch; background: none; }
:root:not([data-theme="light"]) .m-card { padding: 0 0 4px; }
:root:not([data-theme="light"]) .m-journey, :root:not([data-theme="light"]) .m-message { border-width: 30px; border-image: url(img/card-frame.jpg) 104 / 46px stretch; }
:root:not([data-theme="light"]) .home main { background: linear-gradient(#031e2e 0, #031e2e 560px, rgba(3, 30, 46, 0.12) 950px, rgba(3, 30, 46, 0.08) 75%, #031e2e 100%), url(img/page-bg.jpg) center 60% / cover no-repeat; }
:root:not([data-theme="light"]) .m-journey { background-clip: border-box, border-box; background-origin: border-box, border-box; }
:root:not([data-theme="light"]) .m-message { background-clip: border-box; background-origin: border-box; }
:root:not([data-theme="light"]) .m-hero::after { background: linear-gradient(transparent, #031e2e); }
.m-card h2 { font-size: clamp(24px, 2.05vw, 29px); }
/* the picture starts below the see-through header, so her face is never under it */
.m-hero { background-size: auto, auto calc(100% - 85px); background-position: 0 0, right bottom; }
@media (max-width: 760px) { .m-hero { background-position: 0 0, 72% bottom; } }
/* crystal banner, as in the mockup: the art runs edge to edge inside a thin gold line, crystals on the right, words on the dark water */
.m-journey, :root:not([data-theme="light"]) .m-journey {
  border: 1.5px solid var(--gold); border-image: none; border-radius: 18px; overflow: hidden; position: relative;
  min-height: clamp(220px, 17vw, 250px); padding: 28px clamp(24px, 4vw, 52px);
  background: linear-gradient(90deg, #04202f 0%, rgba(4, 32, 47, 0.85) 26%, rgba(4, 32, 47, 0) 46%), #04202f url(img/journey-bg.jpg) right center / auto 100% no-repeat;
  background-clip: border-box; background-origin: border-box;
  box-shadow: inset 0 0 0 5px rgba(4, 32, 47, 0.6), inset 0 0 0 6px rgba(214, 173, 85, 0.45); }
.m-journey > div { position: relative; max-width: 520px; }
.m-journey h2 { font-size: clamp(30px, 3vw, 42px); }
@media (max-width: 760px) {
  .m-journey, :root:not([data-theme="light"]) .m-journey { align-items: flex-end; min-height: 380px;
    background: linear-gradient(0deg, #04202f 38%, rgba(4, 32, 47, 0.2) 70%), #04202f url(img/journey-bg.jpg) 68% top / auto 62% no-repeat; }
  .m-journey > div { background: none; margin: 0; padding: 0; }
}
/* the owner's clear hero art on screens wide enough for its long shape; phones keep the taller crop so she stays large */
@media (min-width: 1280px) {
  .m-hero { min-height: max(470px, calc(100vw / 3.5)); padding: 90px 0 70px;
    background: linear-gradient(90deg, rgba(3, 26, 42, 0.5) 0%, rgba(3, 26, 42, 0.22) 30%, transparent 46%), #031e2e url(img/hero-clear.jpg) right bottom / cover no-repeat; }
  .m-hero h1 { font-size: clamp(50px, 5vw, 80px); }
}
/* curved corners: a picture frame drawn as a border ignores border-radius, so the whole card is clipped to a rounded shape */
.m-card, .m-video, .m-message { border-radius: 26px; clip-path: inset(0 round 26px); }
/* light mode: a rounded double gold line in place of the drawn frame, which can't curve */
:root[data-theme="light"] .m-card, :root[data-theme="light"] .m-video, :root[data-theme="light"] .m-message {
  border: 1.5px solid var(--gold); border-image: none; clip-path: none; overflow: hidden; background-clip: border-box;
  box-shadow: inset 0 0 0 6px var(--bg), inset 0 0 0 7px color-mix(in srgb, var(--gold) 45%, transparent), var(--glow); }
:root[data-theme="light"] .m-card { padding: 26px 22px 26px; }
:root[data-theme="light"] .m-message { padding: 26px clamp(22px, 3vw, 36px); }
:root[data-theme="light"] .m-video iframe { border-radius: 0; }
/* the daily video takes its own shape (--r is width / height, set from the newest upload); a tall Short is capped
   to the screen height and centred inside the frame */
.m-video { display: grid; place-items: center; }
.m-video iframe { --vh: min(72vh, 640px); aspect-ratio: var(--r, 16 / 9); width: min(100%, calc(var(--vh) * var(--r, 1.7778))); height: auto; }