/* What WordPress needs beyond the design's stylesheet (assets/helen.css stays identical to the design). */

/* The phone menu, drawn like the design's menu page */
.menu-overlay { position: fixed; inset: 0; z-index: 60; background: var(--ivory); display: flex; flex-direction: column; overflow-y: auto; }
.menu-overlay[hidden] { display: none; }
.menu-close { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: transparent; font: 300 34px/1 var(--body); color: var(--ink); cursor: pointer; }
.menu-links { display: flex; flex-direction: column; padding-top: 30px; width: 100%; }
.menu-links a { font: 400 36px/1.25 var(--head); text-decoration: none; padding: 12px 0; border-bottom: 1px solid var(--line); }
.menu-actions { display: grid; gap: 12px; margin-top: 30px; width: 100%; }
.menu-foot { margin-top: auto; padding-top: 24px; padding-bottom: 28px; width: 100%; }

/* Article content written in the block editor */
.prose .wp-block-quote { margin: 1.6em 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--honey); }
.prose .wp-block-quote p { font: 400 26px/1.35 var(--head); margin: 0; }
.prose .wp-block-image img { border-radius: var(--r-m); height: auto; }
.prose .try p:last-child { margin-bottom: 0; }
.photo img.wp-post-image { width: 100%; height: 100%; object-fit: cover; }

/* The contact form's answer */
.form-note { border-radius: var(--r-s); padding: 12px 14px; margin-bottom: 18px; font-size: 16px; }
.form-note.ok { background: #EEF0E2; color: var(--olive); }
.form-note.err { background: #F8E6DD; color: #8A3B1E; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Category links on the journal look like the design's chips */
a.chip { text-decoration: none; color: var(--ink); }
a.chip.on { color: var(--ivory); }

/* The header button stays on one line on narrow phones */
.site-actions .btn { white-space: nowrap; }