/* Mamori guides v1 (charm design), 10 Nov 2026. Loads after /assets/v3/site.css and uses its tokens only.
   Used by every guide, /guides/, support, privacy, terms and 404. No animation (only colour transitions on hover).
   Reading: 18px body, 1.75 line height, about 68ch measure. */
:root { --mute: var(--ink-3); --muted: var(--ink-3); }
.fl .g-wrap, .fl .foot { visibility: hidden; }   /* fonts gate, same as the homepage (max 900 ms, JS only) */

.g-wrap { max-width: calc(68ch + 2 * var(--gut)); margin: 0 auto; padding: clamp(32px, 6vw, 72px) var(--gut) clamp(64px, 9vw, 112px); font-size: 1.125rem; line-height: 1.75; }
.g-wrap .crumb { font-size: 0.9375rem; line-height: 1.5; color: var(--ink-3); margin: 0 0 20px; }
.g-wrap .crumb a { color: var(--ink-2); }
.g-wrap h1 { font-size: clamp(2.125rem, 5.6vw, 3.5rem); line-height: 1.1; margin: 0 0 18px; }
.g-wrap .upd { font-size: 0.9375rem !important; line-height: 1.5; color: var(--ink-3) !important; margin: 0 0 36px !important; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.g-wrap h2 { font-size: clamp(1.5rem, 3.4vw, 2.125rem); line-height: 1.18; margin: 2.1em 0 0.6em; scroll-margin-top: 88px; }
.g-wrap h3 { font-size: 1.25rem; line-height: 1.3; margin: 1.7em 0 0.45em; }
.g-wrap p, .g-wrap li { color: var(--ink-2); }
.g-wrap p { margin: 0 0 1.05em; }
.g-wrap strong, .g-wrap b { color: var(--ink); font-weight: 700; }
.g-wrap a { color: var(--shu-deep); overflow-wrap: anywhere; }
.g-wrap a:hover { color: var(--ink); }
.g-wrap ul, .g-wrap ol { padding-left: 1.3em; margin: 0 0 1.25em; }
.g-wrap li { margin-bottom: 0.45em; padding-left: 4px; }
.g-wrap li::marker { color: var(--shu); }
.g-wrap ol li::marker { font-weight: 700; }
.g-wrap code { background: var(--paper-3); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; font-size: 0.875em; word-break: break-all; }
.g-wrap img, .g-wrap table { max-width: 100%; }

/* Short answer box: the one seal on the page */
.g-wrap .tldr { position: relative; background: var(--paper-3); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 24px 28px; margin: 0 0 36px; }
.g-wrap .tldr p { color: var(--ink); }
.g-wrap .tldr p:last-child { margin-bottom: 0; }
.g-wrap .tldr::after { content: "\5B88"; position: absolute; top: -14px; right: 20px; width: 32px; height: 32px; border-radius: 4px; background: var(--shu); color: var(--on-ink); font: 400 21px/32px var(--f-brush); text-align: center; transform: rotate(-4deg); }

/* App boxes (mcta-v1): paper card mid-page, ink panel at the end. Links and markup unchanged. */
.g-wrap .mcta { margin: 40px 0; padding: 24px; border: 1px solid var(--line-strong); border-radius: var(--r-panel); background: var(--paper-3); }
.g-wrap .mcta p { margin: 0 0 18px; font-size: 1.0625rem; line-height: 1.65; color: var(--ink-2); }
.g-wrap .mcta b { color: var(--ink); }
.g-wrap .mcta .mb { display: flex; flex-wrap: wrap; gap: 10px; }
.g-wrap .mcta .mb a { flex: 1 1 210px; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px 20px; border-radius: var(--r-ctl); border: 1px solid var(--ink); background: transparent; color: var(--ink); font: 500 1rem/1.25 var(--f-body); text-align: center; text-decoration: none; overflow-wrap: normal; transition: background-color .2s var(--ease), color .2s var(--ease); }
.g-wrap .mcta .mb a:hover { background: var(--ink); color: var(--on-ink); }
.g-wrap .mcta.e { background: var(--ink); border-color: var(--ink); }
.g-wrap .mcta.e p { color: #d8cfc2; }
.g-wrap .mcta.e b { color: var(--on-ink); }
.g-wrap .mcta.e .mb a { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.g-wrap .mcta.e .mb a:hover { background: var(--shu-soft); border-color: var(--shu-soft); color: var(--ink); }
.g-wrap .mcta.e :focus-visible { outline: 2px solid var(--on-ink); outline-offset: 3px; }
.mcta-ios .mcta a.a, .mcta-and .mcta a.i { display: none !important; }

/* Related guides and the /guides/ list: a ledger, no boxes */
.g-wrap a.gl { display: block; padding: 18px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; overflow-wrap: break-word; }
.g-wrap h2 + a.gl, .g-wrap .intro + a.gl, .g-wrap h1 + a.gl { border-top: 2px solid var(--ink); }
.g-wrap a.gl b { display: block; font: 800 1.1875rem/1.3 var(--f-display); color: var(--ink); }
.g-wrap a.gl span { display: block; margin-top: 6px; font-size: 0.9375rem; line-height: 1.55; color: var(--ink-2); }
.g-wrap a.gl:hover b { color: var(--shu-deep); }
.g-wrap .intro { font-size: 1.125rem !important; color: var(--ink-2) !important; margin: 0 0 32px !important; max-width: none; }

.g-wrap .src { font-size: 0.9375rem; color: var(--ink-3); margin-top: 2em; }

/* Support, privacy, terms */
.g-wrap .sub, .g-wrap .updated { color: var(--ink-3); font-size: 0.9375rem; margin: 0 0 28px; }
.g-wrap .pill { display: block; background: var(--paper-3); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 20px 24px; margin: 0 0 28px; color: var(--ink); }
.g-wrap .contact { background: var(--paper-3); border-left: 3px solid var(--shu); border-radius: 0 var(--r-ctl) var(--r-ctl) 0; padding: 16px 20px; margin: 24px 0 8px; }
.g-wrap .contact p { color: var(--ink); }
.g-wrap .card { border-top: 1px solid var(--line); padding: 22px 0 6px; }
.g-wrap .card h3 { margin: 0 0 8px; }
.g-wrap hr { border: 0; border-top: 1px solid var(--line); margin: 44px 0 24px; }
.g-wrap .endnote { font-size: 0.9375rem; color: var(--ink-3); }

/* Footer line under the wordmark */
.foot .mean { margin: 12px 0 0; max-width: 30ch; }

@media (max-width: 600px) {
  .g-wrap .tldr { padding: 20px; }
  .g-wrap .mcta { padding: 20px; }
}
@media print { .nav, .foot, .mcta { display: none; } }

/* "+" from a Latin-width plus (tools/make_plus_font.py): Zen Kaku draws it as a full-width cross. Declared after the
   Zen Kaku faces so it wins for U+002B only; inline, so there is no request and no swap. */
@font-face { font-family: "ZenKaku"; src: url(data:font/woff2;base64,d09GMgABAAAAAAFEAAoAAAAAApAAAAD7AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmAANAowSwE2AiQDCAsGAAQgBWkHJhvvAQCeBe7eDmlfJKAb1ZngGMWceJAfa2/7QyWKp+uYJ2tiqZMtpIA3qJy6bbxVm6uGKoihyIPI4SJc3ggYcJB0cuG3Ci0BfBonFHadHJ/oIP4tuWGgnhVHEeY8POuJiO6u2UUtZ2I9ChnAfhsHik6r+0Q9xQIAYAEkGqY1gWllAaUEOl1pmwYBIEGhYRjjgAK0qnqIdBnuOtz2Kclns6tIAgSC4def7zVWf2jtHd68QNWOx0SegiZBUE//a/JEs5MIAEDGb2NOIA1rIAEAUNYECIMIkPoMaqIGhGkTOaVRqxf7aTv7imdSP0CnrieYwaVv2o7kVBCmjkcBAAAA) format("woff2"); font-weight: 400; unicode-range: U+002B; }
@font-face { font-family: "ZenKaku"; src: url(data:font/woff2;base64,d09GMgABAAAAAAFMAAoAAAAAApQAAAEFAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmAANAo0SwE2AiQDCAsGAAQgBWkHJhvvAQAuCuyGY4dccRv1VcPBIX18J4Jq6Pbuj1pk6Sqe1lUThm5xCIWO1FiQGA/jA5J8U/lex+s4KTk+h7SyVhbYgMMw0MFwkNFOIgzX/Ae31snxiQ7ibckNA5SAgrYCjDC3sePQIQiBuxVd1HIhegYUMoDjMU6QTnvtl+pGAAArINEwrwnMKysoJdDpcycJAAkKDeOYBhSgVdVdTHiOMbcxZv/U1wUfn34O8kAgeJf95MHvcGs/8N3fuKoOvOVwXgJNgqC6/5MX2EEOCwBARq+xJ5DGNZAAAChbAoRRBEhDRjVRI8K8mTmkSZs3+1MvZ1/+TOoHVLiecZi2PpfKamGgsI4mAQA=) format("woff2"); font-weight: 500; unicode-range: U+002B; }
@font-face { font-family: "ZenKaku"; src: url(data:font/woff2;base64,d09GMgABAAAAAAFQAAoAAAAAApQAAAEKAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmAANAo0SwE2AiQDCAsGAAQgBWkHJhvvAQCuCuzGxztMoWJ3l1pjbwTF8FenmyKo30/37r2khBJYxZdYAbuyUtURukr/ON2OB9l8U/lex+t4lRyfQ1K0sjQCAxwv2IADCzgwHIA2rTEAmcH11FcoL50cn+gg/i25YaCeFUcR5jw864mI7q7ZRSXnci0VGcBhG0dIp9QftRsCAJZAomBWEZhVLaGqAp1+2tYFgAQVBaOYBFRAqbU+xZj3GPEYI3Z3HoKmR+9+onlogEDwaTux90sp3/DFn6ja85GDeQ4UCYLa/Z88w/YSAQDI+GnMCaRRBSQAAKoNAcIwAqQBw4qoQ8KsqZzSuPWr/XSdfcUzqR+AcONZRbXzmZBOcwuZOh4H) format("woff2"); font-weight: 700; unicode-range: U+002B; }