/* MediaMax Club: mediamax.co.uk's tokens and type, one page. */
:root{
  --cinema:#141114;
  --velvet:#1D181B;
  --limestone:#EDE8DF;
  --ink:#1A1719;
  --ink-muted:#5E574F;
  --screen:#F7F3EC;
  --screen-muted:#C9C1B6;
  --brass:#C9B68A;
  --brass-2:#DCCBA3;
  --hair-dark:rgba(243,238,230,.14);
  --hair-light:rgba(26,23,25,.16);
  --display:"Instrument Serif", "Didot", "Bodoni 72", Georgia, serif;
  --sans:"Jost", "Futura", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --measure:58ch;
  --gutter:clamp(16px, 5vw, 4.25rem);
  --wrap:72rem;
}
*{box-sizing:border-box}
html{font-size:clamp(1.0625rem, .78rem + .3125vw, 1.25rem);scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{margin:0;background:var(--cinema);color:var(--screen);font-family:var(--sans);line-height:1.6;text-rendering:geometricPrecision}
a{color:inherit}
h1,h2{font-family:var(--display);font-weight:400;margin:0;text-wrap:balance;letter-spacing:-.01em}
p,ul{margin:0}
img{max-width:100%}
:focus-visible{outline:2px solid var(--brass);outline-offset:4px}
section[id]{scroll-margin-top:84px}
.wrap{width:min(100% - 2*var(--gutter), var(--wrap));margin-inline:auto}

.label{font-weight:600;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--brass)}
.h1{font-size:clamp(3rem, 7vw, 6rem);line-height:.98}
.h2{font-size:clamp(2.2rem, 4.4vw, 3.8rem);line-height:1.04}
.lede{font-size:clamp(1.1rem, 1.4vw, 1.3rem);line-height:1.5;max-width:var(--measure)}
.muted{color:var(--screen-muted)}

.btn{background:transparent;cursor:pointer;display:inline-flex;align-items:center;gap:.6em;font-family:var(--sans);font-weight:500;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;padding:.95em 1.6em;border:1px solid var(--brass);color:var(--screen);border-radius:999px;transition:background .25s,color .25s}
.btn:hover{background:var(--brass);color:var(--cinema)}
.btn--solid{background:var(--brass);color:var(--cinema)}
.btn--solid:hover{background:var(--brass-2)}
@media (max-width:480px){ .btn{white-space:normal;text-align:center;line-height:1.35} }

/* header */
.top{position:absolute;inset:0 0 auto 0;z-index:10;padding-block:20px}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.wordmark{display:inline-flex}
.wordmark img{height:28px;width:auto;display:block}
.top .btn{padding:.7em 1.3em}

/* hero */
.hero{min-height:100svh;display:grid;align-items:center;padding-block:120px 80px}
.hero-grid{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:48px clamp(48px, 7vw, 120px);align-items:center}
.hero-body{display:grid;gap:26px}
.club-screen{position:relative;width:100%;max-width:400px;aspect-ratio:1;justify-self:center;background:var(--cinema);isolation:isolate;overflow:hidden}
.club-screen video{display:block;width:100%;height:100%;object-fit:cover;object-position:48% 50%;mix-blend-mode:screen;filter:invert(1) brightness(.931) sepia(.116)}
.club-mark{display:none;position:absolute;inset:0;margin:auto;width:85%;height:auto}
@media (prefers-reduced-motion:reduce){ .club-screen video{display:none} .club-mark{display:block} }
.club-screen.still video{display:none}
.club-screen.still .club-mark{display:block}
@media (max-width:800px){
  .hero{min-height:auto;padding-block:110px 64px}
  .hero-grid{grid-template-columns:1fr}
  .club-screen{max-width:260px;justify-self:start}
}

/* sections */
.section{padding-block:clamp(72px, 10vw, 140px);border-top:1px solid var(--hair-dark)}
.sheet{display:grid;grid-template-columns:minmax(0,14rem) minmax(0,1fr);gap:20px clamp(32px, 6vw, 96px)}
.sheet-body{display:grid;gap:26px;justify-items:start}
@media (max-width:800px){ .sheet{grid-template-columns:1fr} }
.light{background:var(--limestone);color:var(--ink);border-top-color:var(--hair-light)}
.light h2{color:var(--ink)}
.light .label{color:var(--ink-muted)}
.light .btn--solid{background:var(--ink);color:var(--limestone);border-color:var(--ink);text-transform:none;letter-spacing:.04em;font-size:.95rem}
.light .btn--solid:hover{background:#000}

.club-points{display:grid;gap:14px;padding:0;list-style:none;color:var(--screen-muted);font-size:1.02rem;max-width:52ch}
.club-points li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:baseline}
.club-points li::before{content:"";width:22px;height:1px;background:var(--brass);transform:translateY(-.35em)}

/* footer */
footer{border-top:1px solid var(--hair-dark);padding-block:44px 48px;font-size:.84rem;color:var(--screen-muted)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px 40px;align-items:center}
.foot-brand{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.foot-brand img{height:22px;width:auto;display:block;opacity:.9}
footer ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px 28px}
footer a{text-decoration:none}
footer a:hover{color:var(--screen)}
.foot-legal{flex:1 0 100%;font-size:.72rem;line-height:1.5;opacity:.78;border-top:1px solid var(--hair-dark);padding-top:18px}

/* live parts: weather band, headlines, what's coming */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.btn--small{padding:.6em 1.1em;font-size:.72rem}
.weather{border-top:1px solid var(--hair-dark);padding-block:22px;background:var(--velvet)}
.weather-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px}
.weather-now{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px;font-size:.95rem;color:var(--screen-muted)}
.weather-now .label{margin-right:4px}
.wday b{font-weight:500;color:var(--screen)}
.weather-form{display:flex;gap:8px;align-items:center}
.weather-form input{font:inherit;font-size:.9rem;color:var(--screen);background:transparent;border:1px solid var(--hair-dark);border-radius:999px;padding:.55em 1em;width:13rem;max-width:52vw}
.weather-form input::placeholder{color:var(--screen-muted)}
.weather-credit{flex:1 0 100%;font-size:.72rem;color:var(--screen-muted);opacity:.8}
.weather-credit a{text-decoration:underline;text-underline-offset:2px}
.live-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 26rem), 1fr));gap:56px clamp(40px, 6vw, 96px)}
.live-col{display:grid;gap:22px;align-content:start}
.feed{list-style:none;padding:0;display:grid}
.feed li{display:grid;gap:4px;padding-block:16px;border-top:1px solid var(--hair-dark)}
.feed li:last-child{border-bottom:1px solid var(--hair-dark)}
.feed-meta{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
.feed-title{font-family:var(--display);font-size:1.45rem;line-height:1.2;text-decoration:none}
.feed-title:hover{color:var(--brass-2)}
.feed-detail{font-size:.92rem;color:var(--screen-muted)}
.feed-note{font-size:.76rem;color:var(--screen-muted);opacity:.8}
#weatherDays{display:inline-flex;flex-wrap:wrap;gap:4px 22px}
.hero-next{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;font-size:.95rem}
/* the login page */
.login{min-height:100svh;display:grid;align-items:center;padding-block:120px 80px}
.login-card{display:grid;gap:22px;max-width:28rem}
.login-card label{font-size:.85rem;color:var(--screen-muted)}
.login-card input{font:inherit;color:var(--screen);background:transparent;border:1px solid var(--hair-dark);border-radius:999px;padding:.8em 1.2em;width:100%}
.login-card input:disabled,.login-card button:disabled{opacity:.5;cursor:not-allowed}
.login-soon{font-size:.9rem;color:var(--screen-muted);border-left:2px solid var(--brass);padding-left:14px}
.h3{font-size:clamp(1.5rem, 2.2vw, 2rem);line-height:1.1}
#films .wrap{display:grid;gap:36px}
.feed-link{font-size:.8rem;color:var(--brass);text-decoration:underline;text-underline-offset:3px;justify-self:start}
.feed-link:hover{color:var(--brass-2)}