/* Door mark (open door with light) and tagline. Header = cream, footer = dark brown. The markup is the finished,
   slightly open mark with its light, so it reads as a door with no JavaScript. js/door-mark.js plays the swing. */
.brand-mark.dm { --dm-ink: var(--redwood, #5a372e); --dm-glow: #f6b05a; --dm-core: #ffe3b5; --dm-handle: var(--redwood, #5a372e); --dm-floor: #b27b5c; --dm-leaf: #f3e6db; width: 2.2rem; height: 2.2rem; overflow: visible; }
.site-footer .brand-mark.dm { --dm-ink: #f5ebe4; --dm-glow: #ffc47a; --dm-core: #fff1d6; --dm-handle: #ffc47a; --dm-floor: #f3bf83; --dm-leaf: #5a372e; }
.dm .dm-frame { stroke: var(--dm-ink); stroke-width: 3.4; stroke-linejoin: round; stroke-linecap: round; fill: none; }
.dm .dm-leaf { stroke: var(--dm-ink); stroke-width: 3; stroke-linejoin: round; }
.dm .dm-leaf-tint { fill: var(--dm-leaf); }
.dm .dm-glow { fill: var(--dm-glow); }
.dm .dm-core { fill: var(--dm-core, #ffe3b5); opacity: .9; }
.dm .dm-handle { fill: var(--dm-handle); }
.dm .dm-floor { stroke: var(--dm-floor); stroke-width: 3; stroke-linecap: round; fill: none; }
.brand-tagline { font-family: var(--font-display, Georgia, serif); font-style: italic; font-weight: 500; font-size: 1.05rem; line-height: 1.3; margin: .6rem 0 .45rem; color: var(--on-dark, #f5ebe4); }
.brand-tagline + p { margin-top: .35rem; }
/* Header: tagline is a small second line under the door and wordmark. Hidden where it cannot fit beside the nav. */
.site-header .brand { display: grid; grid-template-columns: max-content 1fr; justify-content: start; align-items: center; column-gap: .65rem; row-gap: .1rem; }
.site-header .brand .brand-mark { grid-row: 1; grid-column: 1; }
.site-header .brand .brand-text { grid-row: 1; grid-column: 2; }
.site-header .brand-tagline { grid-column: 1 / -1; grid-row: 2; margin: 0; padding: 0; font-size: min(.76rem, 3.1vw); line-height: 1.2; white-space: nowrap; color: var(--redwood, #5a372e); opacity: .9; }
@media (min-width: 70rem) { .site-header .brand-tagline { font-size: .68rem; } }
@media (min-width: 70rem) and (max-width: 77.999rem) { .site-header .brand-tagline { display: none; } }
@media (max-width: 20.99rem) { .site-header .brand-tagline { display: none; } }
@media print { .site-header .brand-tagline { display: none; } }
/* "Routinely app" made the desktop nav about 30px wider; trim link padding so the nav stays on one row beside the brand. */
@media (min-width: 70rem) { .site-nav a { padding: 0.3rem 0.34rem; } .site-nav .nav-cta { margin-left: 0.3rem; } }