/* ======================================================================
   THE DYNASTY DIGEST · shared stylesheet · "the back page" (30 Sep 2026)

   The site is a sports page printed on peach stock. One file for what
   every page shares: the paper and inks, the two typefaces, the masthead,
   the phone menu, the footer, buttons, and the small parts every page
   prints with (position blocks, player mugs, rules).

   Rules worth keeping:
     · Paper is the colour. The page is peach, tables sit on a lighter
       sheet, and nothing floats: depth is a rule or a fill, never a
       shadow (overlays excepted, they are not print).
     · Ink is the accent. Links, the current page, a selected control and
       the primary button are all ink. Violet, the logo's colour, is the
       second ink: hover, focus, and the one figure a page is about.
     · Position is a solid block of colour (QB magenta, RB green, WR blue,
       TE orange). Movement is green and red. Nothing else is coloured.
     · Corners are square. All of them.
   ====================================================================== */

/* Both faces are served from this site (fonts/), not from a third party.
   "DD Display" is Archivo cut to its narrowest width and heaviest weight:
   the family has exactly one face, so a heading renders the same whatever
   weight an older rule asks for. */
@font-face{font-family:'DD Display';src:url('fonts/archivo-display.woff2') format('woff2');
  font-weight:100 900;font-stretch:50% 200%;font-style:normal;font-display:swap}
@font-face{font-family:'Libre Franklin';src:url('fonts/franklin-normal.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Libre Franklin';src:url('fonts/franklin-italic.woff2') format('woff2');
  font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:'DD Display Fallback';src:local('Arial Narrow Bold'),local('Arial Narrow'),local('Impact'),local('Arial Black');
  size-adjust:92%}
/* phones have none of those: squeeze the system bold to the display face's width so the
   headline holds its lines (and the page its height) while the real face loads */
@font-face{font-family:'DD Display Fallback Sans';
  src:local('Arial Bold'),local('Arial-BoldMT'),local('Roboto Bold'),local('Roboto-Bold'),local('Helvetica Neue Bold'),local('HelveticaNeue-Bold'),local('Arial'),local('Roboto');
  font-weight:100 900;size-adjust:71%;ascent-override:124%;descent-override:30%;line-gap-override:0%}

:root{
  color-scheme:light;

  /* stock */
  --paper:#F5D3BA;        /* the page */
  --paper-2:#EDC2A3;      /* wells, tracks, a pressed row */
  --sheet:#FBE8DA;        /* tables, cards, anything read closely */
  --sheet-2:#FFF5EC;      /* an input on a sheet; text on ink */

  /* inks */
  --type:#1C1326;         /* text, rules, the accent */
  --type-2:#4F3B45;       /* secondary text  (6.9:1 on paper) */
  --type-3:#6B5154;       /* labels, captions (4.9:1 on paper) */
  --rule:rgba(28,19,38,.20);
  --rule-2:rgba(28,19,38,.42);
  --spot:#5527D9;         /* the logo's violet: hover, focus, the headline figure */
  --spot-dim:rgba(85,39,217,.12);
  --on-ink:var(--sheet-2);

  /* verdicts */
  --gain:#0A6638; --loss:#B01D27;
  --gain-wash:rgba(10,102,56,.13); --loss-wash:rgba(176,29,39,.12);

  /* the four position inks: the one place they are written down */
  --qb:#B0125A; --rb:#086552; --wr:#1B49BA; --te:#A33F07;

  --display:'DD Display','DD Display Fallback','DD Display Fallback Sans','Arial Narrow',Impact,sans-serif;
  --body:'Libre Franklin','Franklin Gothic Medium','Helvetica Neue',Arial,sans-serif;

  --ease:cubic-bezier(.23,1,.32,1);
  --head-h:62px;
  --gutter:32px;
  --page-w:1240px;
  --overlay-shadow:0 22px 48px -20px rgba(28,19,38,.55);
}
@media(max-width:900px){ :root{ --head-h:56px; --gutter:20px } }
@media(max-width:480px){ :root{ --gutter:16px } }

/* ---- position scope: one attribute publishes the colour and its washes ---- */
[data-pos]{--pc:var(--type)}
[data-pos="QB"]{--pc:var(--qb)}
[data-pos="RB"]{--pc:var(--rb)}
[data-pos="WR"]{--pc:var(--wr)}
[data-pos="TE"]{--pc:var(--te)}

/* ---- base ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--head-h) + 16px)}
html,body{margin:0;padding:0}
body{background:var(--paper);color:var(--type);font-family:var(--body);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-variant-numeric:tabular-nums}
img{max-width:100%}
[hidden]{display:none!important}
a{color:inherit;text-underline-offset:.2em}
p,li,dd{text-wrap:pretty}
/* read aloud, not shown */
.vh{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* browser surfaces: the parts nobody draws still belong to the paper */
::selection{background:var(--spot);color:#fff}
:focus-visible{outline:2px solid var(--spot);outline-offset:2px}
html{scrollbar-color:var(--type-3) var(--paper);caret-color:var(--spot)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--paper)}
::-webkit-scrollbar-thumb{background:var(--type-3);border:3px solid var(--paper)}
::-webkit-scrollbar-thumb:hover{background:var(--type)}

.skip{position:absolute;left:12px;top:8px;z-index:200;background:var(--type);color:var(--on-ink);
  font-weight:800;font-size:14px;padding:12px 16px;text-decoration:none;transform:translateY(-200%);transition:transform .15s var(--ease)}
.skip:focus{transform:none}

/* the display voice: every heading on the site */
.display{font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:.004em;line-height:.9}

/* ======================================================================
   MASTHEAD
   A plain paper bar closed by a heavy rule over a hairline, the way a
   section front is. Opaque: the board scrolls under it.
   ====================================================================== */
.sitehead{position:sticky;top:0;z-index:70;height:var(--head-h);background:var(--paper);
  border-bottom:1px solid var(--type)}
.sitehead::after{content:'';position:absolute;left:0;right:0;bottom:2px;height:3px;background:var(--type);pointer-events:none}
.sitehead-in{height:100%;max-width:var(--page-w);margin:0 auto;padding:0 var(--gutter) 5px;
  display:flex;align-items:center;gap:30px}
.sitelogo{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--type);flex:none;min-height:44px}
.sitelogo img{width:34px;height:34px;object-fit:cover;display:block}
.sitelogo .display{font-size:29px;white-space:nowrap;padding-top:1px}

.sitenav{display:flex;align-items:center;gap:6px;height:100%;margin-right:auto}
.sitenav > a,.navgroup > a{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 10px;
  font-size:13px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--type);
  text-decoration:none;white-space:nowrap;transition:background-color .16s var(--ease),color .16s var(--ease)}
.sitenav > a[aria-current="page"],.navgroup > a[aria-current="page"]{background:var(--type);color:var(--on-ink)}
@media(hover:hover) and (pointer:fine){
  .sitenav > a:not([aria-current]):hover,.navgroup > a:not([aria-current]):hover{background:var(--paper-2)}
}
.navgroup{position:relative;display:flex;align-items:center;height:100%}
.navgroup > a svg{transition:transform .2s var(--ease)}
.navmenu{position:absolute;top:calc(100% - 4px);left:0;min-width:290px;
  background:var(--sheet);border:2px solid var(--type);padding:6px;display:grid;
  box-shadow:var(--overlay-shadow);z-index:60;
  opacity:0;visibility:hidden;transform:translateY(-6px);transform-origin:top left;
  transition:opacity .16s var(--ease),transform .16s var(--ease),visibility 0s .16s}
.navgroup:hover .navmenu,.navgroup:focus-within .navmenu{opacity:1;visibility:visible;transform:none;
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility 0s}
.navgroup:hover > a svg,.navgroup:focus-within > a svg{transform:rotate(180deg)}
.navmenu a{display:flex;flex-direction:column;gap:1px;padding:10px 12px;white-space:nowrap;line-height:1.3;
  text-decoration:none;border-top:1px solid var(--rule)}
.navmenu a:first-child{border-top:0}
.navmenu a b{font-family:var(--display);font-weight:900;font-size:22px;text-transform:uppercase;letter-spacing:.01em;line-height:1}
.navmenu a em{font-style:normal;font-size:13px;font-weight:500;color:var(--type-2)}
.navmenu a:hover,.navmenu a:focus-visible{background:var(--type);color:var(--on-ink)}
.navmenu a:hover em,.navmenu a:focus-visible em{color:var(--on-ink)}

.sitesocial{display:flex;align-items:center;gap:0;flex:none}
.sitesocial a{width:38px;height:38px;display:flex;align-items:center;justify-content:center;color:var(--type);
  transition:background-color .16s var(--ease),color .16s var(--ease)}
.sitesocial a svg{width:17px;height:17px;display:block}
@media(hover:hover) and (pointer:fine){ .sitesocial a:hover{background:var(--type);color:var(--on-ink)} }
.acctbtn{flex:none;min-height:40px;padding:0 14px;border:2px solid var(--type);background:transparent;color:var(--type);
  font-family:var(--body);font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
  transition:background-color .16s var(--ease),color .16s var(--ease),transform .16s var(--ease)}
.acctbtn:active{transform:scale(.97)}
@media(hover:hover) and (pointer:fine){ .acctbtn:hover{background:var(--type);color:var(--on-ink)} }

/* ---- the phone menu: a <details>, so it opens without any script ---- */
.sitemenu{display:none;position:relative;margin-left:auto}
.sitemenu > summary{list-style:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 13px;
  border:2px solid var(--type);background:transparent;color:var(--type);
  font-size:13px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;cursor:pointer;user-select:none;
  -webkit-tap-highlight-color:transparent}
.sitemenu > summary::-webkit-details-marker{display:none}
.sitemenu > summary svg{width:16px;height:16px}
.sitemenu > summary .x{display:none}
.sitemenu[open] > summary{background:var(--type);color:var(--on-ink)}
.sitemenu[open] > summary .x{display:block}
.sitemenu[open] > summary .bars{display:none}
.sitemenu-panel{position:fixed;left:0;right:0;top:var(--head-h);max-height:calc(100vh - var(--head-h));max-height:calc(100dvh - var(--head-h));overflow-y:auto;
  background:var(--sheet);border-bottom:3px solid var(--type);box-shadow:var(--overlay-shadow);
  padding:4px var(--gutter) 22px;display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.sitemenu-panel h2{grid-column:1/-1;margin:18px 0 0;padding-bottom:5px;border-bottom:2px solid var(--type);
  font-family:var(--body);font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--type)}
.sitemenu-panel a{display:flex;align-items:center;min-height:48px;border-bottom:1px solid var(--rule);
  font-family:var(--display);font-weight:900;font-size:24px;text-transform:uppercase;letter-spacing:.01em;
  color:var(--type);text-decoration:none}
.sitemenu-panel a[aria-current="page"]{color:var(--spot)}
@media(prefers-reduced-motion:no-preference){
  .sitemenu-panel{animation:menuin .2s var(--ease)}
  @keyframes menuin{from{opacity:0;transform:translateY(-8px)}}
}

@media(max-width:1180px){ .sitesocial{display:none} }
/* six links since the Stats page (6 Oct 2026): tighter links on narrow laptops so the row still fits */
@media(max-width:1060px){ .sitenav{gap:2px} .sitenav > a,.navgroup > a{padding:0 7px} .sitelogo .display{font-size:26px} }
@media(max-width:960px){ .sitelogo .display{font-size:23px} }
@media(max-width:900px){
  .sitenav{display:none}
  .sitemenu{display:block}
  .sitehead-in{gap:12px}
  .sitelogo img{width:30px;height:30px}
  .sitelogo .display{font-size:25px}
}
@media(max-width:385px){ .sitelogo .display{font-size:22px} .sitelogo{gap:9px} }
/* the Sign in / Account button shares the phone masthead with the name and the menu: all three must fit */
@media(max-width:520px){
  .acctbtn{min-height:36px;padding:0 8px;font-size:11px;letter-spacing:.04em}
  .sitehead-in:has(.acctbtn:not([hidden])){gap:8px}
  .sitehead-in:has(.acctbtn:not([hidden])) .sitelogo{gap:7px}
  .sitehead-in:has(.acctbtn:not([hidden])) .sitelogo .display{font-size:clamp(14px,4.7vw,21px)}
  /* the menu button drops its word and keeps its icon (it is still labelled "Menu" for screen readers) */
  .sitehead-in:has(.acctbtn:not([hidden])) .sitemenu > summary{font-size:0;gap:0;padding:0 12px}
}
@media(max-width:350px){ .sitelogo .display{font-size:19px} .sitelogo{gap:8px} .sitelogo img{width:28px;height:28px}
  .sitemenu > summary{padding:0 10px;gap:6px} }

/* ======================================================================
   BUTTONS AND LINKS
   ====================================================================== */
.dd-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 22px;
  border:2px solid var(--type);background:transparent;color:var(--type);
  font-family:var(--body);font-size:14px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:transform .16s var(--ease),background-color .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease)}
.dd-btn:active{transform:scale(.97)}
.dd-btn.primary{background:var(--type);color:var(--on-ink)}
.dd-btn svg{width:16px;height:16px;flex:none;transition:transform .2s var(--ease)}
@media(hover:hover) and (pointer:fine){
  .dd-btn:hover{background:var(--type);color:var(--on-ink)}
  .dd-btn.primary:hover{background:var(--spot);border-color:var(--spot);color:#fff}
  .dd-btn:hover svg{transform:translateX(3px)}
}
.dd-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--type);font-weight:800;font-size:14px;
  letter-spacing:.06em;text-transform:uppercase;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.dd-link svg{width:15px;height:15px;transition:transform .2s var(--ease)}
@media(hover:hover) and (pointer:fine){ .dd-link:hover{color:var(--spot)} .dd-link:hover svg{transform:translateX(3px)} }

/* ======================================================================
   PRINTING PARTS
   ====================================================================== */
/* a position, as a solid block: the code reads from across the room */
.pos-block{display:inline-flex;align-items:center;justify-content:center;min-width:44px;padding:4px 7px;
  background:var(--pc,var(--type));color:#fff;font-size:12px;font-weight:800;letter-spacing:.04em;line-height:1.15;white-space:nowrap}
/* a player photo, in its own colours on a plain ground */
.mug{position:relative;flex:none;overflow:hidden;background:var(--paper-2)}
.mug img{position:relative;display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.mug{container-type:inline-size}
.mug .initials{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:900;
  font-size:20px;font-size:38cqw;line-height:1;color:var(--type);opacity:.6;user-select:none}
.mug.has-photo .initials{display:none}
/* the reversed bar that heads a table */
.bar{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:7px 12px;background:var(--type);color:var(--on-ink)}
.bar h2,.bar h3{margin:0;font-family:var(--display);font-weight:900;font-size:22px;text-transform:uppercase;letter-spacing:.02em;line-height:1}
.bar span{font-size:12.5px;font-weight:600;opacity:.85;text-align:right}
/* a focus ring drawn on ink has to be light */
.on-ink :focus-visible,.on-ink:focus-visible{outline-color:var(--on-ink)}

/* ======================================================================
   FOOTER
   ====================================================================== */
.sitefoot{margin-top:80px;border-top:3px solid var(--type);background:var(--paper)}
.sitefoot-in{max-width:var(--page-w);margin:0 auto;padding:36px var(--gutter) 48px;
  display:grid;grid-template-columns:minmax(240px,1.3fr) repeat(3,minmax(0,1fr));gap:32px 40px;align-items:start}
.sitefoot-l{display:flex;flex-direction:column;gap:12px;color:var(--type-2);font-size:13.5px;line-height:1.55;max-width:36ch}
.sitefoot-l .sitelogo{min-height:0}
@media(max-width:900px){ .sitefoot-l .sitelogo{min-height:44px} }
.sitefoot-l img{width:30px;height:30px;object-fit:cover}
.sitefoot-credit{font-size:12.5px;color:var(--type-3)}
.sitefoot-credit a{text-decoration:underline;text-underline-offset:3px}
.sitefoot-col h2{margin:0 0 4px;padding-bottom:5px;border-bottom:2px solid var(--type);font-family:var(--body);
  font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--type)}
.sitefoot-col a{display:flex;align-items:center;min-height:38px;border-bottom:1px solid var(--rule);
  font-size:14.5px;font-weight:600;color:var(--type);text-decoration:none}
@media(hover:hover) and (pointer:fine){ .sitefoot-col a:hover{color:var(--spot)} .sitefoot-credit a:hover{color:var(--spot)} }
@media(max-width:820px){
  .sitefoot{margin-top:56px}
  .sitefoot-in{grid-template-columns:1fr 1fr;padding:28px var(--gutter) 40px;gap:26px 20px}
  .sitefoot-l{grid-column:1/-1;max-width:none}
  .sitefoot-col a{min-height:44px}
}

/* Reduced motion: nothing slides or scales; colour changes stay, because they are how a press
   or a selection is acknowledged. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  .navmenu{transform:none!important}
  .dd-btn:active,.acctbtn:active{transform:none}
  .skip{transition:none}
  .dd-btn svg,.dd-link svg,.navgroup > a svg{transition:none;transform:none!important}
}