/* 602 Sports design direction. Color, space and type live in :root. Treatment follows v3. */
:root{
  /* color: v3 paper, lift, stone, ink, soft, hair */
  --dd-page:#0A141C;
  --dd-band:#0E1A24;
  --dd-panel:#132330;
  --dd-hair:rgba(243,232,214,.12);
  --dd-text:#F3E8D6;
  --dd-meta:#D2C3AC;
  --dd-sand:#D8BC8E;
  --dd-gold:#D4AE3C;
  --dd-ink-line:rgba(243,232,214,.55);
  /* accents point at v3 gold and sand only */
  --dd-accent-1:var(--dd-gold);
  --dd-accent-2:var(--dd-sand);
  --dd-accent-3:var(--dd-gold);
  --dd-accent-4:var(--dd-gold);
  --dd-accent:var(--dd-accent-1);
  --dd-accent-hi:var(--dd-accent-2);
  --dd-accent-line:rgba(212,174,60,.45);
  --dd-accent-line-soft:rgba(212,174,60,.18);
  /* pattern layer off */
  --dd-pattern-image:none;
  --dd-pattern-opacity:0;
  --dd-pattern-size:0;
  --dd-pattern-repeat:none;
  --dd-pattern-position:0;
  --dd-pattern-blend:normal;
  /* type families */
  --dd-display:Cinzel,serif;
  --dd-body:Newsreader,serif;
  /* type */
  --dd-h1:84px;
  --dd-h1-m:44px;
  --dd-h1-lh:1.04;
  --dd-h1-track:.01em;
  --dd-page-h1:76px;
  --dd-page-h1-m:48px;
  --dd-h2:40px;
  --dd-h2-m:28px;
  --dd-week:32px;
  --dd-week-m:26px;
  --dd-figure:48px;
  --dd-figure-m:38px;
  --dd-body-size:18px;
  --dd-body-lh:1.6;
  --dd-meta-size:16px;
  --dd-sub-size:22px;
  --dd-sub-m:19px;
  --dd-btn:17px;
  --dd-reveal:40px;
  --dd-label:14px;
  --dd-label-track:.24em;
  --dd-nav:16px;
  --dd-nav-track:0;
  --dd-team:16px;
  --dd-tab:16px;
  --dd-tab-m:15px;
  /* space */
  --dd-col:1040px;
  --dd-gutter:80px;
  --dd-gutter-m:28px;
  --dd-section:160px;
  --dd-section-m:96px;
  --dd-hero-top:160px;
  --dd-hero-bottom:176px;
  --dd-page-top:136px;
  --dd-page-bottom:88px;
  --dd-diamond:8px;
}
html.dd{
  background-color:var(--dd-page);
  background-image:radial-gradient(ellipse 70% 520px at 50% 0,rgba(201,140,60,.16),transparent 70%),linear-gradient(180deg,var(--dd-band) 0,var(--dd-page) 900px);
  background-repeat:no-repeat;
  color:var(--dd-text);
}
html.dd body{
  background:transparent;
  color:var(--dd-text);
  font:400 var(--dd-body-size)/var(--dd-body-lh) var(--dd-body);
  position:relative;
  isolation:isolate;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  -webkit-font-smoothing:antialiased;
}
html.dd body::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:var(--dd-pattern-image);
  background-size:var(--dd-pattern-size);
  background-repeat:var(--dd-pattern-repeat);
  background-position:var(--dd-pattern-position);
  mix-blend-mode:var(--dd-pattern-blend);
  opacity:var(--dd-pattern-opacity);
}
html.dd main{flex:1 0 auto;max-width:none;width:100%;min-width:0;margin:0;padding:0}
html.dd .dd-hero,
html.dd .dd-section,
html.dd .suns-more,
html.dd .tog,
html.dd #moveEmpty,
html.dd .dd-list,
html.dd .more{
  box-sizing:border-box;
  max-width:var(--dd-col);
  width:100%;
  margin-left:auto;
  margin-right:auto;
  padding-left:var(--dd-gutter);
  padding-right:var(--dd-gutter);
}
html.dd header.site{box-sizing:border-box;box-shadow:none;max-width:var(--dd-col);width:100%;margin-left:auto;margin-right:auto;padding-left:var(--dd-gutter);padding-right:var(--dd-gutter)}
html.dd .hnav summary,html.dd .hnav .acc-btn,html.dd .hnav .sheet a{font-size:var(--dd-nav);letter-spacing:var(--dd-nav-track);color:var(--dd-text)}
html.dd .hnav nav.desk .acc-btn,
html.dd .hnav nav.drop summary,
html.dd .hnav nav.mob .acc-btn,
html.dd .hnav .sheet a,
html.dd .hnav nav.drop .panel a{font:400 16px/1.3 var(--dd-body);letter-spacing:normal;text-transform:none;color:var(--dd-text)}
html.dd .hnav .acc.here>.acc-btn{color:var(--dd-text)}
.dd-label{font:500 var(--dd-label)/1 var(--dd-display);letter-spacing:var(--dd-label-track);text-transform:uppercase;color:var(--dd-sand);margin:0}
.dd-rule{display:flex;justify-content:center;margin:32px auto}
.dd-rule i{display:block;width:var(--dd-diamond);height:var(--dd-diamond);background:var(--dd-gold);box-shadow:0 0 14px rgba(212,174,60,.55);transform:rotate(45deg)}
html.dd:not(.home) .dd-rule{justify-content:flex-start;margin:28px 0}
.dd-hero{text-align:center;padding-top:var(--dd-hero-top);padding-bottom:var(--dd-hero-bottom)}
html.dd:not(.home) .dd-hero{text-align:left;padding-top:var(--dd-page-top);padding-bottom:var(--dd-page-bottom)}
.dd-headline{font:400 var(--dd-h1)/var(--dd-h1-lh) var(--dd-display);letter-spacing:var(--dd-h1-track);color:var(--dd-text);margin:0}
html.dd:not(.home) .dd-headline{font-size:var(--dd-page-h1);line-height:1;letter-spacing:0}
.dd-sub{color:var(--dd-meta);font:300 var(--dd-sub-size)/1.6 var(--dd-body);max-width:40rem;margin:22px 0 0}
html.dd #game{
  width:100%;
  max-width:none;
  margin:0;
  padding:120px var(--dd-gutter);
  text-align:center;
  background:linear-gradient(180deg,#14252F,#101E28);
  box-shadow:inset 0 1px 0 rgba(243,232,214,.05);
  border:0;
  outline:0;
}
html.dd #game .lab{
  font:400 var(--dd-btn)/1 var(--dd-body);
  font-style:italic;
  letter-spacing:0;
  text-transform:none;
  color:var(--dd-sand);
  background:none;
  -webkit-text-fill-color:currentColor;
}
html.dd #game .q{font:400 var(--dd-h2)/1.25 var(--dd-body);max-width:720px;margin:20px auto 48px;color:var(--dd-text);text-wrap:balance}
html.dd .opts{display:flex;gap:16px;justify-content:center}
html.dd .opt{
  width:176px;
  min-height:44px;
  border:1px solid var(--dd-ink-line);
  background:transparent;
  color:var(--dd-text);
  font:400 var(--dd-btn)/1 var(--dd-body);
  cursor:pointer;
  padding:16px 0;
}
html.dd .opt b{display:block;font:inherit;letter-spacing:0;text-transform:none;font-weight:400}
html.dd .opt:hover{background:var(--dd-text);color:var(--dd-page)}
html.dd .done .opt{cursor:default}
html.dd .done .opt.win{border-color:var(--dd-text);box-shadow:inset 0 0 0 1px var(--dd-text)}
html.dd .done .opt:not(.win){opacity:.55}
html.dd .done .opt:hover{background:transparent;color:var(--dd-text)}
html.dd .res{color:var(--dd-text);font-size:var(--dd-body-size);margin:16px 0 0}
html.dd .nx{color:var(--dd-meta);font-size:var(--dd-meta-size);margin:6px 0 0}
html.dd .res:empty,html.dd .nx:empty{display:none}
html.dd .streak{display:flex;justify-content:center;gap:28px;margin-top:28px}
html.dd .streak div{text-align:center}
html.dd .streak .n{font:300 var(--dd-reveal)/1 var(--dd-body);font-feature-settings:'lnum'}
html.dd .streak small{display:block;font:400 var(--dd-meta-size)/1 var(--dd-body);letter-spacing:0;text-transform:none;color:var(--dd-sand);margin-top:8px}
.dd-section{padding-top:var(--dd-section);padding-bottom:176px}
@media(min-width:601px){
  html.home .dd-section{padding-bottom:96px}
}
.dd-week-title{font:400 var(--dd-week)/1.2 var(--dd-body);color:var(--dd-text);letter-spacing:0;text-transform:none;text-align:left;margin:0 0 72px}
html.dd .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:48px;border:0;margin:0;background:none}
html.dd .tile{display:block;padding:0;border:0;color:inherit;text-decoration:none;background:none;min-height:0;min-width:0;container-type:inline-size}
html.dd .tile a{color:inherit;text-decoration:none}
html.dd .tile a.team,html.dd .tile a.rec-link,html.dd .tile a.next-link{display:block}
html.dd .tile b{display:block;font:500 var(--dd-team)/1 var(--dd-body);letter-spacing:0;text-transform:none;color:var(--dd-meta);margin:0 0 18px}
html.dd .tile .rec{font:300 var(--dd-figure)/1 var(--dd-body);font-feature-settings:'lnum';min-height:1em;color:var(--dd-text);white-space:nowrap}
html.dd .tile .rec.words{display:flex;align-items:flex-end;box-sizing:border-box;height:var(--dd-figure);line-height:1;white-space:nowrap;font-size:clamp(14px,calc(100cqw / 6.4),var(--dd-figure))}
html.dd .tile .lbl{display:none}
html.dd .tile small{display:block;color:var(--dd-meta);font-size:17px;line-height:1.55;margin-top:20px}
html.dd .tile small .d{display:block;white-space:normal}
html.dd .tile .when,html.dd .tile .opp{display:block}
html.dd .tile .sep{display:none}
html.dd #sunsKicker{font:500 var(--dd-team)/1 var(--dd-body);letter-spacing:0;text-transform:none;color:var(--dd-sand)}
html.dd .suns-more{text-align:center;padding-bottom:40px}
html.dd .jump{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 28px;margin:16px 0 0}
html.dd .jump a{display:inline-flex;align-items:center;min-height:44px;color:var(--dd-meta);text-decoration:none;font:400 var(--dd-nav)/1.2 var(--dd-body);letter-spacing:0;text-transform:none}
html.dd .jump a:hover{color:var(--dd-text)}
html.dd .money{margin:24px 0 0;text-align:center;font-size:var(--dd-meta-size);color:var(--dd-meta)}
html.dd .money a{color:var(--dd-sand)}
.dd-tabs{--dd-tab-gap:36px;display:flex;flex-wrap:nowrap;gap:var(--dd-tab-gap);justify-content:flex-start;align-items:stretch;margin-top:64px;min-width:0;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;container-name:ddtabs;container-type:scroll-state}
.dd-tabs::-webkit-scrollbar{display:none;height:0}
.dd-tabs a{font:400 var(--dd-tab)/1 var(--dd-body);letter-spacing:0;text-transform:none;color:var(--dd-meta);text-decoration:none;padding:0;white-space:nowrap;flex:0 0 auto}
.dd-tabs a[aria-current="page"]{color:var(--dd-text);border-bottom:0;box-shadow:0 1px 0 var(--dd-gold)}
.dd-tabfade{position:sticky;right:0;z-index:1;flex:0 0 32px;width:32px;margin-left:calc(var(--dd-tab-gap) * -1);align-self:stretch;pointer-events:none;background:linear-gradient(90deg,rgba(12,23,32,0),#0C1720);opacity:0}
@container ddtabs scroll-state(scrollable: right){
  .dd-tabfade{opacity:1}
}
.dd-tabfade-l{position:sticky;left:0;z-index:1;flex:0 0 32px;width:32px;margin-right:calc(var(--dd-tab-gap) * -1 - 32px);align-self:stretch;pointer-events:none;background:linear-gradient(90deg,#0C1720,rgba(12,23,32,0));opacity:0}
@container ddtabs scroll-state(scrollable: left){
  .dd-tabfade-l{opacity:1}
}
html.dd .tog{display:flex;flex-wrap:wrap;gap:10px;margin-top:0;margin-bottom:28px}
html.dd .tog button{appearance:none;background:transparent;border:1px solid var(--dd-hair);color:var(--dd-meta);min-height:44px;padding:8px 16px;font:400 var(--dd-meta-size)/1 var(--dd-body);letter-spacing:0;text-transform:none;cursor:pointer}
html.dd .tog button.on{border-color:var(--dd-ink-line);color:var(--dd-text)}
html.dd #moveEmpty{color:var(--dd-meta);font-size:var(--dd-meta-size)}
.dd-list{padding-top:24px}
.day{margin-top:64px}
.day:first-child{margin-top:0}
.day h4{font:400 17px/1.3 var(--dd-body);font-style:italic;color:var(--dd-sand);margin:0 0 12px}
.row{display:grid;grid-template-columns:120px 1fr;align-items:baseline;padding:20px 0;border-top:1px solid var(--dd-hair)}
.row .t{font-size:var(--dd-meta-size);color:var(--dd-meta)}
.row .m{font-size:20px;color:var(--dd-text)}
html.dd .more{margin-top:28px;margin-bottom:0}
html.dd .more a{display:inline-flex;align-items:center;border:1px solid var(--dd-ink-line);background:transparent;color:var(--dd-text);min-height:44px;padding:8px 16px;font:400 var(--dd-meta-size)/1 var(--dd-body);letter-spacing:0;text-transform:none;text-decoration:none;cursor:pointer}
html.dd .site-foot{border:0;box-shadow:none;margin:64px 0 0;padding:56px var(--dd-gutter) 64px;text-align:center}
html.dd .site-foot .rule{display:none}
html.dd .site-foot .links{flex-wrap:nowrap}
html.dd .site-foot a{color:var(--dd-meta);font:400 var(--dd-meta-size)/1 var(--dd-body);letter-spacing:0;text-transform:none;white-space:nowrap}
html.dd .site-foot a:hover{color:var(--dd-text)}
html.dd button:focus-visible,html.dd a:focus-visible{outline:2px solid var(--dd-gold);outline-offset:2px}
@media(max-width:1099px){
  html.dd .tiles{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  html.dd .dd-hero,
  html.dd .dd-section,
  html.dd .suns-more,
  html.dd .tog,
  html.dd #moveEmpty,
  html.dd .dd-list,
  html.dd .more{padding-left:var(--dd-gutter-m);padding-right:var(--dd-gutter-m)}
  html.dd header.site{padding-left:var(--dd-gutter-m);padding-right:var(--dd-gutter-m)}
  html.home .dd-hero{padding-top:88px;padding-bottom:104px}
  html.dd:not(.home) .dd-hero{padding-top:80px;padding-bottom:48px}
  html.home .dd-headline{font-size:var(--dd-h1-m)}
  html.dd:not(.home) .dd-headline{font-size:var(--dd-page-h1-m)}
  .dd-sub{font-size:var(--dd-sub-m)}
  html.dd #game{padding:80px var(--dd-gutter-m)}
  html.dd #game .q{font-size:var(--dd-h2-m);margin-bottom:36px}
  html.dd .opt{width:auto;flex:1}
  .dd-section{padding-top:var(--dd-section-m);padding-bottom:104px}
  .dd-week-title{font-size:var(--dd-week-m);margin-bottom:48px}
  html.dd .tiles{grid-template-columns:1fr 1fr;gap:48px 24px}
  html.dd .tile{border:0;padding:0}
  html.dd .tile .rec{font-size:var(--dd-figure-m)}
  html.dd .tile .rec.words{height:var(--dd-figure-m);font-size:clamp(14px,calc(100cqw / 6.4),var(--dd-figure-m))}
  html.dd .tile small{font-size:var(--dd-meta-size)}
  html.dd .dd-tabs{--dd-tab-gap:14px;margin-top:44px}
  html.dd .dd-tabs a{font-size:var(--dd-tab-m)}
  .dd-list{padding-top:8px}
  .day{margin-top:48px}
  .row{grid-template-columns:1fr;gap:4px}
  .row .m{font-size:var(--dd-body-size)}
  html.dd .site-foot{padding-left:var(--dd-gutter-m);padding-right:var(--dd-gutter-m)}
}
