/* About follows Qin's story, with a compact hello and direct project links. */
.aboutPage .aboutArticle{padding-top:4px}
.aboutPage .aboutArticle>section+section{margin-top:30px}
.aboutPage .aboutArticle h1{font-size:clamp(29px,7.5vw,34px);line-height:1.15;letter-spacing:-1px;margin:12px 0 20px}
.aboutPage .aboutArticle .lead{font-size:16px;line-height:1.65;color:#17345b}
.aboutPage .aboutArticle p{line-height:1.7}
.aboutPage .aboutArticle .kicker{font-size:10px;letter-spacing:1.3px;line-height:1.6}
.aboutPage .aboutIntro p:last-child{margin-bottom:0}
.aboutPage .aboutHello{padding:18px;border:1px solid #dce3ec;border-radius:18px;background:#edf2f7}
.aboutPage .aboutArticle .aboutHello h2{margin:0 0 8px;font-size:21px;line-height:1.3}
.aboutPage .aboutHello p{font-size:13px;margin:0 0 14px}
.aboutPage .aboutHelloLinks{display:grid;gap:4px}
.aboutPage .aboutHelloLinks .textlink{font-size:12px;justify-content:center;text-align:center}
.aboutPage .aboutArticle .aboutStory h2,.aboutPage .aboutArticle .aboutOtherWork h2{font-size:25px;line-height:1.2;letter-spacing:-.6px;margin:8px 0 14px}
.aboutPage .aboutStart{margin-top:18px}
.aboutPage .aboutProjectLinks{display:grid;gap:12px;margin:18px 0 8px}
.aboutPage .aboutProjectLink{display:block;padding:18px;border:1px solid #dce3ec;border-radius:18px;background:#fffdf9;text-decoration:none}
.aboutPage .aboutProjectLink>span{display:block;font-size:13px;line-height:1.65;color:#52647b}
.aboutPage .aboutProjectLink .aboutProjectName{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px;font-size:20px;line-height:1.3;font-weight:750;color:#17345b}
.aboutPage .aboutProjectLink .aboutProjectName>span{font-size:18px;font-weight:400}
.aboutPage .aboutProjectLink .aboutProjectAction{margin-top:12px;font-size:12px;font-weight:700;color:#17345b;text-decoration:underline;text-underline-offset:3px}
.aboutPage .aboutProjectLink:hover{border-color:#8da2bf;background:#f3f6fa}
.aboutPage .aboutPractical{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.aboutPage .aboutUseful summary{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:56px;cursor:pointer;list-style:none;font-size:13px;line-height:1.5;font-weight:700;color:#17345b}
.aboutPage .aboutUseful summary::-webkit-details-marker{display:none}
.aboutPage .aboutUseful summary span{font-size:17px;font-weight:400;transition:transform .15s}
.aboutPage .aboutUseful[open] summary span{transform:rotate(45deg)}
.aboutPage .aboutUseful>div{padding:0 0 12px}
.aboutPage .aboutPractical p{font-size:12px;line-height:1.7}
.aboutPage .aboutPractical .textlink{display:flex}
.aboutPage .aboutArticle .aboutClosing h2{margin:0 0 12px;font-size:21px}
.aboutPage .aboutClosing{padding:2px 0 14px}
.aboutPage .aboutSignoff{margin-top:22px;line-height:1.8}
.aboutPage .aboutArticle :is(a,summary):focus-visible{outline:3px solid #4879ad;outline-offset:3px;border-radius:4px}
@media(max-width:360px){.aboutPage .aboutHello,.aboutPage .aboutProjectLink{padding:16px}.aboutPage .aboutArticle h1{font-size:29px}}
@media(prefers-reduced-motion:reduce){.aboutPage .aboutUseful summary span{transition:none}}

/* Keep Qin's introduction in one colour and make its invitation a real jump link. */
.aboutPage .aboutArticle h1 em{color:inherit}
.aboutPage .aboutArticle .lead{color:var(--muted)}
.aboutPage .aboutHello h2 a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.aboutPage .aboutClosing{scroll-margin-top:20px}
.aboutPage .aboutProjectLink>span+span{margin-top:10px}
.aboutPage .aboutProjectBrand{display:flex!important;align-items:center;justify-content:space-between;gap:14px;min-height:60px;margin-bottom:12px}
.aboutPage .aboutProjectBrand>span:last-child{color:#17345b;font-size:18px}
.aboutPage .aboutProjectBrand .aboutFlairenneLogo{display:block;width:210px;max-width:85%;height:auto;object-fit:contain;background:transparent}
.aboutPage .aboutLittleLightBrand{display:flex;align-items:center;gap:10px;color:#17345b}
.aboutPage .aboutLittleLightBrand img{width:44px;height:44px;object-fit:contain;background:transparent}
.aboutPage .aboutLittleLightBrand>span{font:500 25px/1.3 Georgia,serif;letter-spacing:-.8px}

/* Keep the same Doodlé typeface and colour system, with a calmer reading rhythm. */
.aboutPage .aboutArticle{font-family:inherit;padding-top:8px}
.aboutPage .aboutArticle h1{font-family:inherit;font-size:34px;font-weight:700;line-height:1.15;letter-spacing:-1px;margin:12px 0 22px}
.aboutPage .aboutArticle h1 em{font-style:normal;color:inherit}
.aboutPage .aboutArticle p,.aboutPage .aboutArticle .lead{font-size:15px;line-height:1.75;color:var(--muted);margin:0 0 18px}
.aboutPage .aboutArticle>section+section{margin-top:32px}
.aboutPage .aboutArticle :is(.aboutStory h2,.aboutOtherWork h2){font-family:inherit;font-size:25px;font-weight:700;line-height:1.25;letter-spacing:-.5px}
.aboutPage .aboutArticle .aboutHello p{font-size:14px;line-height:1.7;margin-bottom:14px}
.aboutPage .aboutHelloLinks .textlink,.aboutPage .aboutProjectLink .aboutProjectAction{font-size:14px}
.aboutPage .aboutProjectLink>span{font-size:14px;line-height:1.75}
.aboutPage .aboutArticle .aboutPractical p{font-size:14px;line-height:1.7}
.aboutPage .aboutArticle .aboutSignoff{font-family:inherit;font-size:18px;font-weight:600;line-height:1.6;color:var(--navy);margin-top:22px}
.aboutPage .aboutClosing a{color:inherit;text-underline-offset:4px}

/* Product first, followed by the person who made it. */
.aboutPage .aboutProductArt{margin:18px 0 22px!important;background:radial-gradient(ellipse,#f7ecd5 0,transparent 68%);text-align:center}
.aboutPage .aboutProductArt img{display:block;width:100%;height:auto;max-height:290px;object-fit:contain;background:transparent!important;border-radius:0!important}
.aboutPage .aboutFeatures{display:grid;gap:10px;margin:22px 0}
.aboutPage .aboutFeatures>a{display:block;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--paper);text-decoration:none;color:var(--navy)}
.aboutPage .aboutFeatures b{display:block;font-size:16px;line-height:1.4}
.aboutPage .aboutFeatures span{display:block;margin-top:6px;font-size:14px;line-height:1.7;color:var(--muted)}
.aboutPage .aboutArticle .aboutFounder h2{font-size:27px;line-height:1.25;letter-spacing:-.6px;margin:10px 0 18px}
.aboutPage .aboutFounder{border-top:1px solid var(--line);padding-top:22px}

.aboutPage .aboutQinPortrait{margin:4px 0 24px!important;text-align:center}
.aboutPage .aboutQinPortrait img{display:block;width:100%;height:auto;max-height:330px;object-fit:contain;border-radius:0!important;background:transparent!important}
.aboutPage .aboutQinPortrait figcaption{font-size:13px;color:var(--muted);margin-top:10px}

.aboutPage .actualCardPreview canvas{display:block;width:210px;max-width:75%;height:auto;margin:0 auto;filter:drop-shadow(0 8px 12px #17345b22);transform:rotate(-3deg)}
.aboutPage .actualCardPreview figcaption{font-size:12px;color:var(--muted);line-height:1.6;margin-top:18px}

.aboutPage .aboutProjectHook{display:block;color:var(--navy);font-size:20px;line-height:1.3;letter-spacing:-.3px;margin:6px 0 12px}

.aboutPage .aboutProjectVisual{display:block;margin:2px 0 18px;border-radius:12px;overflow:hidden;background:#f1f4f8}.aboutPage .aboutProjectVisual img{display:block;width:100%;height:240px;object-fit:cover;object-position:center 22%;border-radius:0}.aboutPage .aboutLightVisual img{height:170px;object-position:center}.aboutPage .aboutProjectVisual small{display:block;padding:9px 12px;font-size:11px;color:var(--muted);line-height:1.5}