/*
 * BentoSort: long-form pages (support, privacy, impressum). Loaded after base.css.
 */

.prose { max-width: 44rem; }
.prose h1 { font-size: clamp(2.2rem, 5.5vw, 3.4rem); }
.prose h2 { margin-top: 2.5rem; font-size: clamp(1.45rem, 3vw, 1.9rem); }
.prose h3 { margin-top: 1.75rem; }
.prose p, .prose li { max-width: var(--measure); }
.prose li + li { margin-top: 0.35rem; }
.prose address { font-style: normal; margin-bottom: 1em; }
.prose code { overflow-wrap: anywhere; }

/* The page title rests on a wooden divider, like the bar between two compartments,
   with a pair of chopsticks laid across its end. */
.page-title { position: relative; padding-bottom: 1.5rem; margin-bottom: 2rem; }
.page-title::after {
    content: ""; position: absolute; left: 0; bottom: 0;
    width: min(100%, 16rem); height: 7px; border-radius: 4px;
    background: linear-gradient(to bottom, var(--wood-light), var(--wood) 55%, var(--wood-dark));
}
.page-title::before {
    content: ""; position: absolute; left: min(calc(100% - 4.5rem), 13rem); bottom: 3px;
    width: 4.5rem; height: 12px;
    background:
        linear-gradient(var(--wood-dark), var(--wood-dark)) 0 2px / 100% 3px no-repeat,
        linear-gradient(var(--wood-dark), var(--wood-dark)) 0 8px / 92% 3px no-repeat;
    rotate: -9deg; transform-origin: left bottom; border-radius: 2px;
}
.page-title p { margin-bottom: 0; }

.updated { color: var(--ink-soft); font-size: 0.92rem; }

.steps { counter-reset: step; list-style: none; padding: 0; margin: 1rem 0 1.25rem; display: grid; gap: 0.9rem; }
.steps li { counter-increment: step; position: relative; padding-left: 2.6rem; }
.steps li::before {
    content: counter(step); position: absolute; left: 0; top: 0.05rem;
    width: 1.75rem; height: 1.75rem; border-radius: 6px; display: grid; place-items: center;
    background: var(--tamago); color: var(--on-food); font-weight: 700; font-size: 0.9rem;
}

.faq details { border-bottom: 1px solid var(--rule); padding: 0.9rem 0; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 1.05rem; }
.faq summary:hover { color: var(--indigo); }
.faq details[open] summary { margin-bottom: 0.6rem; }
.faq details > :not(summary) { margin-left: 1.1rem; }

.note {
    background: var(--paper-raised); border-left: 4px solid var(--matcha);
    padding: 0.8rem 1rem; border-radius: 0 var(--radius) var(--radius) 0;
}