:root { color-scheme: light; font-family: 'Gill Sans', 'Gill Sans MT', 'Segoe UI', sans-serif; color: #30312d; background: #f5f2eb; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100svh; padding: 32px 5vw 26px; display: flex; flex-direction: column; }
header, footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; color: #65665c; font-size: 12px; }
header { letter-spacing: 1.8px; }
header a { display: inline-block; padding: 14px 0; margin: -14px 0; text-underline-offset: 5px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #30312d; }
a:focus-visible { outline: 2px solid #606257; outline-offset: 5px; }
.story { width: min(100%, 650px); margin: 0 auto; align-items: stretch; text-align: left; }
.story .logo-link { display: block; width: min(100%, 340px); margin-bottom: 20px; align-self: center; }
.story h1 { max-width: none; margin-top: 24px; }
.story h2 { font-size: 23px; line-height: 1.35; font-weight: 400; margin: 32px 0 12px; }
.story p { font-size: 18px; line-height: 1.75; margin: 0 0 18px; }
.story .word-meaning { color: #606257; font-size: 21px; }
.story .source { color: #65665c; font-size: 13px; margin-top: 24px; }
.story .back-link { display: inline-block; padding: 12px 0; }
.logo-history { margin: 32px 0; text-align: center; }
.logo-history img { display: block; height: auto; margin: 0 auto; max-width: 100%; }
.logo-history .old-logo { width: 300px; }
.logo-history .new-logo { width: 480px; }
.logo-history figcaption { margin-top: 16px; color: #65665c; font-size: 13px; line-height: 1.6; }
footer { letter-spacing: .3px; }
main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 64px 0; text-align: center; }
.logo { display: block; width: min(760px, 100%); height: auto; }
h1 { margin: 30px 0 18px; font-size: clamp(24px, 3.3vw, 36px); line-height: 1.3; font-weight: 400; letter-spacing: -.6px; }
.saying { min-height: 4.8em; max-width: 640px; display: grid; align-items: start; }
#motd { margin: 0; color: #606257; font-size: clamp(16px, 1.8vw, 19px); line-height: 1.6; text-wrap: balance; }
#pause { font: inherit; font-size: 12px; color: #65665c; border: 0; border-bottom: 1px solid #b8b9af; padding: 12px 4px; background: transparent; cursor: pointer; }
#pause:hover { color: #30312d; }
#pause:focus-visible { outline: 2px solid #606257; outline-offset: 4px; }
@media(max-width: 480px) { body { padding: 24px 22px; } main { padding: 48px 0; } header { font-size: 11px; letter-spacing: 1px; } h1 { max-width: 290px; } .saying { min-height: 6em; } }