header{display:grid;grid-template-columns:1fr auto 1fr;gap:16px}
header nav{grid-column:2;grid-row:1}
.header-deadline{grid-column:3;grid-row:1;justify-self:end;display:flex;flex-direction:column;line-height:1.5;white-space:nowrap;font-size:10px;color:#b8c6ce}
.header-deadline strong{font-size:12px;font-weight:600;color:#5ce6f7;font-variant-numeric:tabular-nums;min-width:165px}
.side-contact{top:50%;bottom:auto;right:0;transform:translateY(-50%);writing-mode:vertical-rl;border-radius:4px 0 0 4px;padding:18px 12px;gap:10px}
.story-controls{right:6%;bottom:25px}
@media(max-width:900px){header{height:88px;display:flex;flex-direction:column;gap:0;justify-content:center}header nav{gap:24px}.header-deadline{flex-direction:row;align-items:center;gap:10px}.header-deadline strong{min-width:155px;font-size:11px}header nav a{padding:6px 0}html{scroll-padding-top:100px}}
@media(max-width:650px){header{height:88px;min-height:88px;display:flex;padding:6px 4%}header nav{font-size:10px;gap:18px}.side-contact{top:50%;bottom:auto;right:0;padding:13px 8px;font-size:10px}.side-contact img{width:19px;height:19px}.story-caption{right:48px;bottom:85px}.story-controls{right:6%;bottom:25px}.story-description{max-width:100%}}
/* Order deadline sits above the navigation, without taking space from the imagery. */
header{display:flex;flex-direction:column;justify-content:flex-start;gap:0;height:90px;min-height:0;padding:0}
.header-deadline{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:18px;width:100%;min-height:30px;padding:5px 16px;background:#50cce4;color:#061014;font-size:11px;line-height:20px;white-space:normal;text-align:center}
.header-deadline strong{color:#061014;font-size:11px;min-width:190px;white-space:nowrap;font-variant-numeric:tabular-nums}
header{background:transparent;border-bottom:0;backdrop-filter:none}
header nav{display:flex;justify-content:center;align-items:center;min-height:60px;width:100%;padding:0 16px;background:linear-gradient(180deg,rgba(15,30,36,.28) 0%,rgba(12,23,28,.14) 55%,rgba(8,14,18,.02) 100%);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
header nav a{color:#f5fbff;text-shadow:0 1px 5px #050c10b3}
html{scroll-padding-top:102px}
@media(max-width:650px){header{height:96px;min-height:0;padding:0}.header-deadline{gap:0;flex-direction:column;padding:4px 12px;min-height:44px;font-size:10px;line-height:18px}.header-deadline strong{min-width:0;font-size:10px}header nav{min-height:52px;gap:18px;padding:0 10px}html{scroll-padding-top:108px}}