/* Ciao! reading pages: /blog and its posts, /faq, /privacy, /support, and
 * the 404 and invite pages.
 *
 * Design 06 (approved 15 Oct 2026, rolled out 16 Oct 2026). Loaded after
 * css/site.css on any board marked data-v2="read"; build.py wraps such a
 * board in <div class="v2 v2-read">, so everything here sits under
 * .v2-read and cannot reach another page. The 404 and invite pages have
 * no board: chrome() in build.py gives them the same wrapper.
 *
 * A calm reading layout: the cream ground, big Bricolage headings, Figtree
 * text in a column of about 65 characters, and one colour per page
 * (--moment, set on the board's frame). A post opens with a colour band
 * like home's hero, the words sit on cream, "Where Ciao! fits" is a card
 * in the same colour (beside the words on a wide screen, after them on a
 * phone), then the related posts. Privacy and Support stay plain: no
 * colour band, the colour only marks small things.
 */

.v2-read, .v2-read *, .v2-read *::before, .v2-read *::after { box-sizing: border-box; }
.v2-read {
    --line: var(--ink);
    --line: color-mix(in oklab, var(--moment) 62%, var(--ink));
    color: var(--ink); font: 400 1.0625rem/1.55 var(--text);
    padding-bottom: clamp(8px, 2vw, 24px);
}
.v2-read img { display: block; max-width: 100%; height: auto; }
.v2-read a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.v2-read h1, .v2-read h2, .v2-read h3 { margin: 0; text-wrap: balance; }
.v2-read h1, .v2-read h2 {
    font-family: var(--display); font-weight: 800; letter-spacing: -0.03em; line-height: 1.04;
}
.v2-read p, .v2-read ul, .v2-read ol { margin: 0; }
.v2-read p, .v2-read li { text-wrap: pretty; }
.v2-read :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.v2-read [id] { scroll-margin-top: 96px; }
.v2-read .wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.v2-read .site-btn, .v2-read .site-btn:hover { color: var(--cream); text-decoration: none; }
.v2-read .site-btn:focus-visible { border-radius: 999px; }

/* An address has no spaces, so it may break anywhere instead of making
 * the page wider than the phone. */
.v2-read a[href^="http"], .v2-read a[href^="mailto:"] { overflow-wrap: anywhere; }

/* breathing animals, only for people who have not asked for less motion */
@media (prefers-reduced-motion: no-preference) {
    .v2-read .breathe { animation: read06-breathe 4.2s ease-in-out infinite; transform-origin: 50% 90%; }
    .v2-read .breathe.late { animation-delay: 1.4s; }
}
@keyframes read06-breathe {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-4px) scale(1.025, .985); }
}

/* ------------------------------------------------------- the colour band
 * Like home's hero: it runs under the glass header, the width of the
 * window, rounded at the bottom. */
.v2-read .band {
    position: relative; isolation: isolate; overflow: hidden;
    margin-top: -72px; padding: 106px 0 clamp(36px, 5.5vw, 80px);
    background: var(--moment);
    border-radius: 0 0 var(--r-xl) var(--r-xl);
}
.v2-read .band::after {
    content: ""; position: absolute; z-index: -1; width: min(70vw, 900px); aspect-ratio: 1;
    right: -18%; top: -40%; border-radius: 50%;
    background: radial-gradient(closest-side, rgb(255 255 255 / .38), transparent);
}
.v2-read .band-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: center; }
/* on a phone the animal sits small above the words, on a wide screen big
 * beside them */
.v2-read .band-in > .face { order: -1; width: 84px; justify-self: start; }
@media (min-width: 860px) {
    .v2-read .band-in { grid-template-columns: minmax(0, 1fr) auto; gap: clamp(32px, 5vw, 80px); }
    .v2-read .band-in > .face { order: 2; width: clamp(140px, 15vw, 220px); }
}

.v2-read .kicker { font-weight: 700; font-size: .98rem; letter-spacing: .01em; margin-bottom: 16px; }
.v2-read .kicker a { text-decoration: none; border-bottom: 2px solid rgb(43 36 32 / .35); padding: 6px 0 1px; }
.v2-read .kicker a:hover { border-bottom-color: var(--ink); }
/* 4 Nov 2026: a title word wider than a phone (German has some) breaks
 * instead of pushing the page sideways. A board can put &shy; where it
 * should break. */
.v2-read h1 { font-size: clamp(2.3rem, 1.25rem + 3.6vw, 4.6rem); line-height: .97; max-width: 19ch; overflow-wrap: break-word; }
/* The lede on a board is the paragraph right after the h1, with no class
 * and a font-size in its own style attribute: build.py's lead_sentence()
 * reads a page's description from the first <p style="..."> that says 20
 * or 21px, and only when style is the tag's one attribute. The second
 * declaration there is the one a browser uses. The 404 and invite pages
 * (no board) use class="lede". */
.v2-read .lede,
.v2-read h1 + p[style],
.v2-read h1 + p[style] + p[style] {
    margin-top: 20px; font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); line-height: 1.45; max-width: 40ch;
}
.v2-read h1 + p[style] + p[style] { margin-top: 12px; }
.v2-read h1 + p[style] a, .v2-read .lede a { text-decoration-color: currentColor; }
.v2-read .byline { margin-top: 18px; font-weight: 600; font-size: 1rem; }

/* --------------------------------------------------- the plain head
 * Privacy and Support: the same type, no colour band. */
.v2-read .plain-head { padding: clamp(28px, 5vw, 64px) 0 clamp(20px, 3vw, 36px); }
.v2-read .plain-head .kicker { color: var(--ink); }
@media (min-width: 860px) {
    .v2-read .plain-head .band-in > .face { width: clamp(110px, 11vw, 150px); }
    .v2-read .plain-head .band-in > .write { margin-top: 0; }
}

/* ------------------------------------------------------------- the words */
.v2-read .read-grid {
    display: grid; gap: clamp(40px, 6vw, 64px); align-items: start;
    /* one column on a phone that a wide table cannot stretch: the table
     * scrolls inside its .scroll box and the page stays the screen's width */
    grid-template-columns: minmax(0, 1fr);
    margin-top: clamp(36px, 5vw, 64px);
    font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
}
@media (min-width: 1100px) {
    .v2-read .read-grid {
        grid-template-columns: minmax(0, 31em) minmax(280px, 22rem);
        justify-content: space-between;
    }
}
.v2-read .prose { line-height: 1.65; max-width: 31em; }
.v2-read .prose > * + * { margin-top: 1em; }
.v2-read .prose h2 {
    font-size: clamp(1.55rem, 1.15rem + 1.3vw, 2.25rem); line-height: 1.08; letter-spacing: -0.025em;
    margin-top: 2.1em;
}
.v2-read .prose > :first-child { margin-top: 0; }
.v2-read .prose h2 + * { margin-top: .7em; }
.v2-read .prose h3 { font: 700 1.12em/1.3 var(--text); letter-spacing: 0; margin-top: 1.7em; }
.v2-read .prose h3 + p { margin-top: .4em; }
.v2-read .prose ul, .v2-read .prose ol { padding-left: 1.3em; }
.v2-read .prose li + li { margin-top: .55em; }
.v2-read .prose li::marker { color: var(--line); font-weight: 700; }
.v2-read .prose a { text-decoration-color: var(--line); }
.v2-read .prose a:hover { text-decoration-color: var(--ink); }

/* the short answer, or the one sentence that matters, on ink */
.v2-read .answer {
    display: flex; align-items: center; gap: 18px; margin-top: clamp(28px, 4vw, 48px);
    max-width: 37rem; padding: clamp(22px, 3vw, 32px); border-radius: var(--r-lg);
    background: var(--ink); color: var(--cream);
}
.v2-read .answer svg { flex: 0 0 auto; color: var(--moment); }
.v2-read .answer p { font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); line-height: 1.42; font-weight: 600; }

.v2-read .sources {
    margin-top: 2.6em; padding-top: 1.3em; border-top: 1px solid var(--hairline);
    font-size: .84em; line-height: 1.55; color: var(--muted);
}
.v2-read .prose .sources p + p { margin-top: .75em; }
.v2-read .sources strong { color: var(--ink); }
.v2-read .prose .sources a { text-decoration-thickness: 1px; text-decoration-color: currentColor; }

/* ---------------------------------------------------- where Ciao! fits */
.v2-read .fits {
    position: relative; overflow: hidden; isolation: isolate;
    display: grid; gap: 14px; align-content: start; justify-items: start;
    max-width: 31em; padding: clamp(24px, 3vw, 34px); border-radius: var(--r-lg);
    background: var(--moment); font-size: 1.02rem; line-height: 1.55;
}
.v2-read .fits::after {
    content: ""; position: absolute; z-index: -1; width: 90%; aspect-ratio: 1; right: -40%; bottom: -50%;
    border-radius: 50%; background: radial-gradient(closest-side, rgb(255 255 255 / .35), transparent);
}
.v2-read .fits h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.05; }
.v2-read .fits .site-btn { margin-top: 6px; }
@media (min-width: 1100px) and (min-height: 760px) {
    .v2-read .fits { position: sticky; top: 96px; }
}

/* ------------------------------------------------------- related posts */
.v2-read .more { margin-top: clamp(56px, 8vw, 104px); }
.v2-read .more h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); }
.v2-read .more ul { list-style: none; padding: 0; margin-top: 20px; display: grid; gap: 12px; }
@media (min-width: 760px) {
    .v2-read .more ul { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
    .v2-read .more a { min-height: 112px; }
}
.v2-read .more a {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 18px;
    height: 100%; min-height: 76px; padding: 20px 24px; border-radius: var(--r-lg);
    background: var(--surface); border: 1px solid var(--hairline); text-decoration: none;
    font: 700 1.12rem/1.3 var(--text);
}
.v2-read .more a::after {
    content: ""; flex: 0 0 auto; width: 10px; height: 10px; margin: 0 4px 6px 0;
    border-top: 2.5px solid currentColor; border-right: 2.5px solid currentColor; transform: rotate(45deg);
}
.v2-read .more a:hover { border-color: var(--ink); }
.v2-read .more a:focus-visible { border-radius: var(--r-lg); }

/* ------------------------------------------------------------ the hub */
.v2-read .posts { display: grid; gap: 14px; margin-top: clamp(36px, 5vw, 64px); }
@media (min-width: 820px) { .v2-read .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .v2-read .posts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.v2-read .card {
    position: relative; display: grid; align-content: start; gap: 12px;
    padding: clamp(22px, 2.4vw, 30px); border-radius: var(--r-lg);
    background: var(--surface); border: 1px solid var(--hairline);
    box-shadow: 0 18px 40px -34px rgb(43 36 32 / .55);
}
.v2-read .card:hover { border-color: var(--ink); }
.v2-read .card .date {
    justify-self: start; padding: 5px 12px; border-radius: 999px;
    background: var(--moment); font-weight: 700; font-size: .9rem;
}
.v2-read .card h2 { font-size: clamp(1.45rem, 1.2rem + .8vw, 1.9rem); line-height: 1.08; letter-spacing: -0.025em; }
.v2-read .card h2 a { text-decoration: none; }
/* the whole card is the link */
.v2-read .card h2 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.v2-read .card h2 a:focus-visible { outline: none; }
.v2-read .card:focus-within { outline: 3px solid var(--ink); outline-offset: 3px; }
.v2-read .card p:last-child { color: #4F453D; line-height: 1.55; }

/* ------------------------------------------- questions and answers */
.v2-read .group { margin-top: clamp(44px, 6.5vw, 88px); }
.v2-read .group > h2 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.2rem); line-height: 1; }
.v2-read .qa-list { display: grid; gap: 12px; margin-top: clamp(18px, 2.4vw, 28px); }
@media (min-width: 900px) { .v2-read .qa-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.v2-read .qa {
    padding: clamp(20px, 2.4vw, 28px); border-radius: var(--r-lg);
    background: var(--surface); border: 1px solid var(--hairline);
}
.v2-read .qa h3 { font: 700 1.2rem/1.3 var(--text); letter-spacing: 0; }
.v2-read .qa p { margin-top: 8px; line-height: 1.6; color: #4F453D; max-width: 52ch; }

/* ----------------------------------------------------------- the close */
.v2-read .close {
    position: relative; overflow: hidden; isolation: isolate;
    margin-top: clamp(56px, 8vw, 112px);
    background: var(--moment); border-radius: var(--r-xl);
    padding: clamp(40px, 7vw, 104px) clamp(24px, 5vw, 80px);
    text-align: center; display: grid; justify-items: center; gap: 22px;
}
.v2-read .close::after {
    content: ""; position: absolute; z-index: -1; width: 70%; aspect-ratio: 1; left: -20%; bottom: -45%;
    border-radius: 50%; background: radial-gradient(closest-side, rgb(255 255 255 / .35), transparent);
}
.v2-read .close .faces { display: flex; align-items: flex-end; gap: 10px; }
.v2-read .close .faces img { width: clamp(76px, 9vw, 112px); }
.v2-read .close .faces img + img { width: clamp(64px, 7.5vw, 92px); }
.v2-read .close h2 { font-size: clamp(2.2rem, 1.2rem + 4vw, 4.6rem); line-height: .95; max-width: 15ch; }
.v2-read .close p { font-size: 1.1rem; max-width: 40ch; }

/* ---------------------------------------------------------- privacy */
.v2-read .nots, .v2-read .ask {
    padding: clamp(22px, 2.6vw, 32px); border-radius: var(--r-lg); font-size: 1.02rem; line-height: 1.5;
}
.v2-read .nots { background: var(--surface); border: 1px solid var(--hairline); display: grid; gap: 12px; }
.v2-read .nots .label { font: 800 1.35rem/1.1 var(--display); letter-spacing: -0.02em; margin-bottom: 4px; }
.v2-read .nots p:not(.label) { display: flex; gap: 12px; }
.v2-read .nots span { font-weight: 800; color: var(--line); }
.v2-read .ask { background: var(--moment); margin-top: 14px; }
.v2-read .ask p:first-child { font: 800 1.35rem/1.1 var(--display); letter-spacing: -0.02em; margin-bottom: 10px; }
.v2-read aside.side { display: grid; align-content: start; font-size: 1rem; }
@media (min-width: 1100px) and (min-height: 760px) {
    .v2-read aside.side { position: sticky; top: 96px; }
}

/* ---------------------------------------------------------- support */
.v2-read .write {
    display: flex; align-items: center; gap: 18px; margin-top: 6px; max-width: 34rem;
    padding: clamp(20px, 2.6vw, 28px); border-radius: var(--r-lg);
    background: var(--moment);
}
.v2-read .write img { width: 76px; flex: 0 0 auto; }
.v2-read .write p { font-weight: 600; font-size: .98rem; }
.v2-read .write a { display: inline-block; margin-top: 4px; font: 800 clamp(1.1rem, 1rem + .6vw, 1.45rem)/1.25 var(--display); letter-spacing: -0.01em; text-decoration: none; border-bottom: 2px solid rgb(43 36 32 / .35); }
.v2-read .write a:hover { border-bottom-color: var(--ink); }

/* ---------------------------------------------- 404 and the invite */
.v2-read .cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 28px; }
.v2-read .note-card {
    display: grid; gap: 18px; align-content: start; max-width: 34rem;
    padding: clamp(24px, 3vw, 34px); border-radius: var(--r-lg);
    background: rgb(255 253 248 / .82); border: 1px solid rgb(255 255 255 / .8);
}
.v2-read .note-card .faces { display: flex; align-items: flex-end; gap: 12px; }
.v2-read .note-card .faces img { width: 64px; }
.v2-read .note-card .faces img.big { width: 84px; }
.v2-read .trio { display: flex; align-items: flex-end; gap: 14px; }
.v2-read .trio img { width: clamp(56px, 6vw, 72px); }
.v2-read .trio img.big { width: clamp(72px, 7.6vw, 92px); }

@media (prefers-reduced-motion: reduce) {
    .v2-read *, .v2-read *::before, .v2-read *::after { animation: none !important; transition: none !important; }
}