@font-face{font-family:"Britanica-Black";src:url(/assets/fonts/britanica-black.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Britanica-Bold";src:url(/assets/fonts/britanica-bold.woff2) format("woff2");font-display:swap}

/* one flyer per hour: base colour, text colour, accent (first glow) */
:root{--base:#10282E;--text:#F2E8D5;--accent:#D8431C}
[data-cw=A]{--base:#141213;--accent:#E2401B}
[data-cw=B]{--base:#15123A;--accent:#5B4FD6}
[data-cw=C]{--base:#171717;--accent:#8A8A8A}
[data-cw=D]{--base:#10282E;--accent:#D8431C}
[data-cw=E]{--base:#141131;--accent:#D8431C}
[data-cw=F]{--base:#120D0D;--accent:#E0321C}
[data-cw=G]{--base:#0D1033;--accent:#6B4FE0}
[data-cw=H]{--base:#1C1426;--accent:#E27A1E}
[data-cw=I]{--base:#170B24;--accent:#E0400E}
[data-cw=J]{--base:#1C0D14;--accent:#C9560A}
[data-cw=K]{--base:#1A1B15;--accent:#D87A55}
[data-cw=L]{--base:#ECE5D6;--text:#10282E;--accent:#9EC7C6}
[data-cw=M]{--base:#2C2F25;--accent:#4A69EC}
[data-cw=N]{--base:#A8DEBF;--text:#14302B;--accent:#5CC0EA}
[data-cw=O]{--base:#DCC6AA;--text:#2A140C;--accent:#C8601A}
[data-cw=P]{--base:#DCC8C2;--text:#221A1C;--accent:#F13B10}
[data-cw=Q]{--base:#C9C1E6;--text:#211727;--accent:#7F6FD0}

*{box-sizing:border-box}
html{background:var(--base);color:var(--text);-webkit-text-size-adjust:100%}
/* without script: a soft approximation of the teal ember field */
html[data-cw=D] body{background:
  radial-gradient(ellipse 60% 45% at 72% 30%,rgba(216,67,28,.55),rgba(216,67,28,0) 70%),
  radial-gradient(ellipse 55% 40% at 18% 78%,rgba(31,107,120,.6),rgba(31,107,120,0) 70%)}
html.painted body{background:none}
body{margin:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;position:relative;overflow-x:hidden}
#field{position:absolute;top:0;left:0;width:100%;z-index:0;pointer-events:none}

main{position:relative;z-index:1;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8vh 16px 4vh}
.wm{margin:0;line-height:0;width:min(64vw,1000px,(100svh - 260px)*2.02);min-width:min(80vw,300px)}
.wm svg{display:block;width:100%;height:auto;fill:var(--text)}
html.painted .wm svg{opacity:0} /* the canvas paints the wordmark with grain; the svg stays for screen readers */

.bio{font-family:"Britanica-Bold",system-ui,sans-serif;font-size:clamp(15px,1.35vw,19px);line-height:1.35;text-align:center;max-width:30ch;margin:2.4em 0 0}
nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.55em 1.5em;margin-top:2.8em;font-family:"Britanica-Black",system-ui,sans-serif;font-size:clamp(17px,1.5vw,21px)}
a{color:inherit;text-decoration:none;border-bottom:2px solid transparent;padding-bottom:1px}
a:hover,a:focus-visible{border-bottom-color:var(--accent)}
a:focus-visible{outline:2px solid var(--text);outline-offset:4px;border-radius:2px}
footer{position:relative;z-index:1;text-align:center;padding:0 16px 22px;font-family:"Britanica-Bold",system-ui,sans-serif;font-size:13px}
@media (max-width:600px){.wm{width:80vw}main{padding-top:10vh}
  /* all five links on one line on phones: size follows the screen width */
  nav{flex-wrap:nowrap;gap:0 .9em;font-size:clamp(12px,calc((100vw - 32px) / 23.6),17px)}}

/* 23:55 to 00:05 Istanbul: the kw40 avatar, on a darkened blur of itself */
.avatar{display:none}
html.midnight{--base:#393434;--accent:#C27A2C}
html.midnight body{background:#393434 url(/assets/rosmund_avatar_kw40_field.jpg) center/cover no-repeat}
html.midnight #field,html.midnight .wm{display:none}
html.midnight .avatar{display:block;width:min(64vw,100svh - 260px,760px);min-width:min(80vw,300px);aspect-ratio:1;height:auto}
@media (max-width:600px){html.midnight .avatar{width:80vw}}