@font-face { font-family: Lato; src: url('Lato-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Noto Serif Display'; src: url('NotoSerifDisplay-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
:root { color-scheme: light; --paper: #faf6ed; --ink: #422a19; --line: #c9beb0; }
* { box-sizing: border-box; }
body { min-height: 100vh; min-height: 100svh; margin: 0; display: grid; place-items: center; padding: clamp(1rem, 4vw, 3rem); background: #e9dfd0; color: var(--ink); font: 400 1rem/1.65 Lato, Arial, sans-serif; }
.transition-card { --transition-accent: #8c402b; --transition-icon: #68506c; width: min(100%, 43rem); padding: clamp(1.5rem, 5vw, 3.5rem); border: 1px solid var(--line); border-radius: .3rem; background: var(--paper); box-shadow: 0 1rem 4rem #422a1914; text-align: center; }
.transition-logo { display: block; width: 10rem; max-width: 60%; height: auto; margin: 0 auto 1.25rem; }
.hourglass { display: block; width: 1.5rem; height: 1.9rem; margin: 0 auto 1.25rem; fill: none; stroke: var(--transition-icon); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sand { fill: var(--transition-icon); stroke: none; }
h1 { margin: 0; font: 500 clamp(1.8rem, 4.8vw, 2.8rem)/1.2 'Noto Serif Display', Georgia, serif; text-wrap: balance; }
p { max-width: 32rem; margin: 1.5rem auto 2rem; }
a { color: inherit; text-underline-offset: .25em; }
a:focus-visible { outline: 3px solid var(--transition-accent); outline-offset: 5px; }
.primary-link, .primary-link:visited { display: flex; justify-content: center; align-items: center; gap: 1rem; min-height: 3.25rem; padding: .85rem 1rem; border: 2px solid var(--transition-accent); border-radius: .2rem; background: var(--transition-accent); color: var(--paper); text-decoration: none; }
.primary-link:hover, .primary-link:focus-visible { background: var(--paper); color: var(--transition-accent); }
.secondary-link { display: table; min-height: 44px; padding: .7rem .3rem; margin: 1rem auto 0; }
small { display: block; font-size: .8rem; }
