.calm-corner-page { background: #f7f6f1; }
.calm-hero { position: relative; isolation: isolate; display: flex; align-items: center; min-height: clamp(360px, 36.15vw, 520px); max-width: 1440px; margin: 0 auto; overflow: hidden; }
.calm-hero > img { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.calm-accessible-copy { position: relative; z-index: 1; width: 44%; padding: 36px 42px; background: linear-gradient(to right, #f7f6f1e8, #f7f6f1cc 85%, transparent); }
.calm-accessible-copy h1 { margin: 14px 0 24px; font: 400 clamp(2.8rem, 4.6vw, 4.2rem)/1.05 Georgia, serif; color: #203632; }
.calm-accessible-copy h1::after { content: none; }
.calm-accessible-copy p { margin: 0 0 18px; color: #58615b; font: 17px/1.65 Georgia, serif; }
.calm-accessible-copy p:last-child { margin-bottom: 0; }
.calm-spaces { padding-top: 24px; padding-bottom: 32px; }
.calm-spaces > h2 { margin: 0 0 8px; font-size: clamp(1.8rem, 3vw, 2.3rem); color: #203632; }
.calm-introduction { margin: 0 0 24px; color: #58615b; }
.calm-card summary { display: block; cursor: pointer; list-style: none; }
.calm-card summary::-webkit-details-marker { display: none; }
.calm-card summary > img { display: block; width: 100%; height: 240px; object-fit: cover; }
.calm-card-arrow { display: grid; place-items: center; width: 38px; height: 38px; margin-top: 14px; border-radius: 50%; background: #45543b; color: #fffdf8; font-size: 23px; line-height: 1; }
.calm-card summary:hover .calm-card-arrow { background: #293827; }
.calm-card summary:focus-visible { outline: 3px solid #ad777d; outline-offset: -4px; }
.calm-card[open] .calm-card-arrow { transform: rotate(90deg); }
.calm-quote { display: flex; align-items: center; justify-content: center; gap: 30px; margin: 24px 0 0; padding: 24px 36px; border-radius: 12px; background: #e8eadf; }
.calm-quote p { margin: 0; font: italic clamp(1.2rem, 2.2vw, 1.8rem)/1.45 Georgia, serif; color: #43513b; }
.calm-quote-mark { height: 56px; color: #a6af9a; font: bold 90px/1 Georgia, serif; }
.calm-quote-accent { flex: 0 0 34px; height: 3px; border-radius: 2px; background: #c99b9d; }
@media (max-width: 750px) {
 .calm-card summary > img { height: auto; aspect-ratio: 4 / 3; }
 .calm-quote { padding: 22px; gap: 16px; }
 .calm-quote-accent { display: none; }
 .calm-hero { flex-direction: column; align-items: stretch; }
 .calm-accessible-copy { width: 100%; padding: 24px; background: #f7f6f1; }
 .calm-accessible-copy h1 { font-size: 2.8rem; margin: 0 0 16px; }
 .calm-accessible-copy p { margin: 0 0 12px; }
 .calm-hero > img { position: relative; inset: auto; height: 230px; object-fit: cover; object-position: right; width: 100%; }
}
.calm-breathing, .calm-reassurance { margin: 16px 0; padding-left: 22px; color: #58615b; font-size: .95rem; }
.calm-breathing li, .calm-reassurance li { margin-bottom: 12px; }
.calm-reassurance { margin-top: 0; margin-bottom: 0; }
.calm-still-photos { display: grid; gap: 18px; margin-top: 18px; }
.calm-still-photos figure { margin: 0; }
.calm-still-photos img { display: block; width: 100%; height: auto; border-radius: 5px; }
.calm-still-photos figcaption { margin-top: 6px; font: italic .9rem/1.5 Georgia, serif; color: #58615b; }
.reassurance-thought { margin: 0; }
.reassurance-thought blockquote { margin: 0; padding: 4px 0 4px 16px; border-left: 2px solid #c99b9d; }
.reassurance-thought blockquote p { font: 1.1rem/1.6 Georgia, serif; color: #43513b; }
.reassurance-thought figcaption { margin: 12px 0 0 18px; font-size: .85rem; color: #58615b; }
.reassurance-thought figcaption a { color: #45543b; }
.calm-card-content .reassurance-counter { margin: 18px 0 10px; font-size: .8rem; color: #687066; }
.reassurance-reader [hidden] { display: none; }

.calm-quote { text-align: center; }
.calm-image-open { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; border-radius: 5px; }
.calm-image-open:focus-visible { outline: 3px solid #ad777d; outline-offset: 4px; }
.calm-card-content .calm-gallery-hint { font-size: .8rem; margin-top: 8px; }
.calm-gallery-controls, .calm-viewer-controls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.calm-gallery-controls[hidden] { display: none; }
.calm-gallery-controls button, .calm-viewer-controls button, .calm-viewer-close { border: 1px solid #c8cdbd; border-radius: 5px; padding: 9px 12px; background: #e5e8dd; color: #35442f; font: inherit; font-size: .85rem; cursor: pointer; }
.calm-image-count { color: #58615b; font-size: .8rem; }
.calm-image-dialog { width: min(1100px, 94vw); max-width: 94vw; max-height: 94dvh; padding: 20px; border: 1px solid #d8d2c4; border-radius: 10px; background: #f8f5ec; color: #273329; }
.calm-image-dialog::backdrop { background: #20291ed9; }
.calm-viewer-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.calm-image-dialog figure { margin: 0; }
.calm-image-dialog .calm-viewer-image { display: block; width: 100%; height: min(67dvh, 800px); object-fit: contain; }
.calm-viewer-caption { margin-top: 10px; text-align: center; font: italic 1rem/1.4 Georgia, serif; }
.calm-image-dialog button:focus-visible { outline: 3px solid #ad777d; outline-offset: 3px; }
@media (max-width: 500px) { .calm-image-dialog { padding: 12px; } .calm-viewer-top { font-size: .85rem; } }
/* Three open editorial panels, with quiet controls and rose accents. */
.calm-breathing { list-style: none; counter-reset: breath; padding: 0; margin: 0 0 20px; }
.calm-breathing li { counter-increment: breath; position: relative; padding-left: 46px; min-height: 34px; margin-bottom: 12px; font: .85rem/1.5 system-ui, sans-serif; }
.calm-breathing li::before { content: counter(breath); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #efdad4; color: #4d4944; }
.calm-still-photos { margin: 0; gap: 0; }
.calm-thumbnails { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.calm-thumbnails img { width: 100%; height: 100px; object-fit: cover; }
.calm-gallery-controls { justify-content: center; gap: 22px; margin: 8px 0 14px; flex-wrap: nowrap; }
.calm-gallery-controls > button, .reassurance-arrows button { display: grid; place-items: center; padding: 0; width: 30px; height: 30px; border-radius: 50%; border: 1px solid #e0dcd1; background: transparent; color: #454b42; font: 24px/1 Georgia, serif; cursor: pointer; }
.calm-gallery-dots { display: flex; gap: 5px; }
.calm-gallery-dots button { padding: 0; width: 7px; height: 7px; border: 0; border-radius: 50%; background: #e7ded4; cursor: pointer; }
.calm-gallery-dots button[aria-pressed='true'] { background: #d9a5a0; }
.calm-card-content .calm-gallery-hint { padding: 14px; margin: 0; border-radius: 7px; background: #f0ede6; font: .8rem/1.55 system-ui, sans-serif; }
.reassurance-reader { padding: 18px 12px 12px; background: #f6f2ec; border: 1px solid #ebe3d9; border-radius: 9px; }
.reassurance-thought blockquote { position: relative; padding: 0 0 0 38px; border: 0; min-height: 108px; }
.reassurance-thought blockquote::before { content: '\201c'; position: absolute; left: -3px; top: -13px; color: #d9a5a0; font: 65px/1 Georgia, serif; }
.reassurance-thought blockquote p { font: italic 1.1rem/1.5 Georgia, serif; color: #3d403c; }
.reassurance-navigation { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.reassurance-arrows { display: flex; gap: 6px; }
@media (max-width: 750px) {
 .calm-thumbnails img { height: 110px; }
}
.creative-dialog { width: min(1000px, 94vw); max-width: 94vw; max-height: 92dvh; border: 1px solid #d9cebf; border-radius: 12px; background: #f8f5ec; color: #273329; padding: 24px; }
.creative-dialog::backdrop { background: #20291ed9; }
.creative-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.creative-dialog h2 { margin: 0; font-size: 1.8rem; }
.creative-dialog button, .creative-dialog select { cursor: pointer; }
.creative-dialog button:not(.button), .creative-dialog select { padding: 8px 12px; border: 1px solid #c8cdbd; border-radius: 5px; background: #fdfaf5; color: #43513b; font: inherit; }
.paint-tools, .paint-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 16px 0; }
.paint-tools label { display: flex; align-items: center; gap: 8px; font-size: .85rem; }
#calm-canvas { display: block; width: min(100%, 600px); height: auto; margin-inline: auto; border: 1px solid #d9cebf; background: #fffdf8; touch-action: none; cursor: crosshair; }
.paint-tools label { max-width: 100%; min-width: 0; }
#paint-template { min-width: 0; max-width: 290px; width: 100%; }
.paint-actions a { cursor: pointer; }
.paint-upload { margin: 18px 0; padding: 16px; border: 1px solid #d9cebf; border-radius: 8px; background: #eeeee4; }
.paint-upload label { display: block; margin-bottom: 8px; font-weight: 600; color: #43513b; }
.paint-upload input { max-width: 100%; color: #43513b; font: inherit; }
.paint-upload input::file-selector-button { margin-right: 12px; padding: 10px 14px; border: 1px solid #43513b; border-radius: 5px; background: #43513b; color: white; cursor: pointer; }
.paint-upload p { margin: 8px 0 0; }
.creative-small { font-size: .8rem; color: #58615b; }
.music-choice, .music-volume { display: flex; gap: 12px; align-items: center; margin: 24px 0; }
.music-volume[hidden] { display: none; }
#music-corner { max-width: 560px; }
@media (max-width: 650px) { .creative-dialog { padding: 16px; } }
/* Additional activities use the same card system as the first row. */
.calm-creative-section { margin-top: 38px; padding-top: 26px; border-top: 1px solid #deddd2; }
.calm-creative-section > h2 { margin: 0 0 8px; font-size: 2rem; }
.creative-section-intro { margin: 0; color: #58615b; }
/* One shared card treatment across both Calm Corner rows. */
.calm-cards, .calm-creative { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; margin: 22px 0 0; }
.calm-card, .creative-card { display: flex; flex-direction: column; min-width: 0; padding: 6px; overflow: hidden; border: 1px solid #e1dccf; border-radius: 10px; background: #fcfaf6; box-shadow: 0 3px 10px #50412b08; }
.calm-card-heading > img, .creative-photo { display: block; width: 100%; height: 190px; object-fit: cover; border-radius: 5px; }
.calm-card-copy { padding: 18px 18px 0; }
.calm-card-title, .creative-copy h3 { margin: 0 0 10px; font: 400 1.55rem/1.2 Georgia, serif; color: #273329; }
.calm-card-description, .creative-copy > p { display: block; margin: 0; color: #58615b; font: .95rem/1.6 Georgia, serif; }
.calm-card-content { flex: 1; padding: 14px 18px 18px; }
.calm-card-content > p { margin: 0; color: #58615b; font: .9rem/1.6 Georgia, serif; }
.creative-copy { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 18px; }
.creative-copy ul { margin: 16px 0 22px; padding-left: 18px; color: #58615b; font: .9rem/1.7 Georgia, serif; }
.creative-copy .button { margin-top: auto; max-width: 100%; font-family: inherit; cursor: pointer; }
.reassurance-navigation { justify-content: flex-end; }
@media (min-width: 651px) and (max-width: 900px) {
  .calm-cards, .calm-creative { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calm-cards > article:last-child, .calm-creative > article:last-child { grid-column: 1 / -1; width: calc((100% - 20px) / 2); justify-self: center; }
}
@media (max-width: 650px) {
  .calm-cards, .calm-creative { grid-template-columns: minmax(0, 1fr); }
}