diff --git a/assets/css/deck.css b/assets/css/deck.css index 975f327..ecb4a68 100644 --- a/assets/css/deck.css +++ b/assets/css/deck.css @@ -242,23 +242,22 @@ img { display: block; max-width: 100%; } an aurora-tinted opening mark are the only colour. Deliberately calm. */ .question { text-align: center; - max-width: 22ch; /* forces a tall, contemplative measure */ + max-width: min(92vw, 920px); /* generous frame; the text controls the measure */ margin-inline: auto; display: grid; justify-items: center; - gap: clamp(2rem, 5vh, 3.25rem); + gap: clamp(1.6rem, 4vh, 2.6rem); } .question-mark { font-family: var(--font-serif); font-style: italic; - font-size: clamp(3rem, 7vw, 5.5rem); - line-height: 0.6; - height: 0.5em; + font-size: clamp(2.4rem, 5vw, 4rem); + line-height: 1; background: linear-gradient(120deg, var(--aurora-1), var(--aurora-2), var(--aurora-3), var(--aurora-4)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; - opacity: 0.95; + opacity: 0.9; user-select: none; } .question-eyebrow { @@ -272,12 +271,12 @@ img { display: block; max-width: 100%; } .question-text { font-family: var(--font-serif); font-weight: 360; - font-size: clamp(2rem, 4.6vw, 4rem); - line-height: 1.14; + font-size: clamp(1.9rem, 3.8vw, 3.4rem); + line-height: 1.16; letter-spacing: -0.02em; color: var(--ink); margin: 0; - max-width: 18ch; + max-width: 100%; text-wrap: balance; } /* A restrained aurora wash on the emphasised keyword */