/* Janice Morrison for Mayor: temporary splash page, shown at janicemorrison.ca until the
   full site is ready. Nothing here needs her approval: her name, office and existing
   public contact details only, styled like her own lawn sign. Same tokens and fonts as
   the full site's site.css, kept in its own small file since this page ships alone. */

@font-face { font-family: "Tinos"; src: url(fonts/Tinos-Regular.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Tinos"; src: url(fonts/Tinos-Bold.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Tinos"; src: url(fonts/Tinos-Italic-for.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+20, U+66, U+6F, U+72; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url(fonts/AtkinsonHyperlegibleNext.woff2) format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
	--sign: #124282;
	--serif: "Tinos", "Times New Roman", Times, serif;
	--sans: "Atkinson Hyperlegible Next", "Helvetica Neue", Arial, sans-serif;
	--ease: cubic-bezier(.16, 1, .3, 1);
	color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; background: var(--sign); color: #ffffff; font: 400 1.25rem/1.5 var(--serif); font-kerning: normal; text-rendering: optimizeLegibility; }
a { color: #ffffff; }
a, button { -webkit-tap-highlight-color: rgba(255, 255, 255, .25); touch-action: manipulation; }
::selection { background: #ffffff; color: var(--sign); }
:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }

.skip-link { position: absolute; left: 1rem; top: -6rem; z-index: 10; padding: .75rem 1rem; border-radius: 4px; background: #ffffff; color: var(--sign); font: 700 1rem/1.2 var(--sans); }
.skip-link:focus { top: 1rem; }

main { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; padding: 3.5rem 1.5rem; }

.sign { width: 100%; max-width: 44rem; text-align: center; }
.when { margin: 0 0 .5rem; font: 700 clamp(1.0625rem, 2.6vw, 1.375rem) var(--sans); letter-spacing: .01em; }
.name { margin: 0; font: 400 clamp(3.5rem, 13vw, 7.5rem) / .95 var(--serif); letter-spacing: -.01em; }
.office { margin: clamp(.5rem, 2vw, 1rem) 0 0; font: 400 clamp(1.625rem, 5vw, 2.75rem) var(--serif); }
.office i { font-style: italic; }
.city { margin: .3rem 0 0; font: 700 clamp(.9375rem, 2.4vw, 1.125rem) var(--sans); letter-spacing: .08em; text-transform: uppercase; }

.horizon { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin: clamp(2rem, 6vw, 3.25rem) 0 clamp(1.75rem, 5vw, 2.75rem); }
.horizon .mark { flex: none; width: clamp(3.5rem, 9vw, 5.5rem); height: auto; }
.horizon-line { flex: 1 1 8rem; max-width: 14rem; height: 3px; background: #ffffff; transform-origin: center; animation: horizon-draw 1.2s var(--ease) .2s both; }
@keyframes horizon-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.url { margin: 0 0 .5rem; font: 700 clamp(1.125rem, 3vw, 1.5rem) / 1.3 var(--serif); font-style: italic; }
.contact { margin: 0; font: 400 clamp(.9375rem, 2.2vw, 1.0625rem) / 1.6 var(--sans); }
.contact a { text-decoration-thickness: 1px; text-underline-offset: .2em; }
.contact a:hover { text-decoration-thickness: 2px; }

.foot { flex: none; padding: 1.25rem 1.5rem 1.5rem; text-align: center; }
.authorized { margin: 0; font: 400 .8125rem/1.5 var(--sans); color: #c3d3ea; max-width: 32rem; margin-inline: auto; overflow-wrap: anywhere; }
.nowrap { white-space: nowrap; }

@media (min-width: 30em) {
	.horizon-line { flex-basis: 12rem; }
}

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