/* Heinemann Cricket Club: shared stylesheet.
   One typeface (Libre Baskerville: the club came out of Heinemann Publishing, whose books were set in Baskerville),
   ink on paper, the book cover's navy for the masthead, club red for emphasis. See DESIGN.md. */

@font-face { font-family: "Libre Baskerville"; src: url("fonts/LibreBaskerville.woff") format("woff"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Libre Baskerville"; src: url("fonts/LibreBaskerville-Italic.woff") format("woff"); font-weight: 400 700; font-style: italic; font-display: swap; }

:root {
  --paper: #ffffff;
  --ink: #1a1a1a;
  --navy: #1f2b45;
  --cream: #f3e8cf;
  --red: #9b2a2e;
  --rule: #d6d2c8;
  --muted: #5e5a52;
  --tint: #efece4;
  --measure: 64ch;
  --step--1: 0.88rem;  /* notes, captions, table text */
  --step-0: 1rem;      /* 17px: body */
  --step-1: 1.15rem;   /* h3 */
  --step-2: 1.4rem;    /* h2 */
  --step-3: 1.85rem;   /* page titles */
  --step-4: 2.4rem;    /* the site title on the home page */
}
/* One look only: paper and ink. The site does not switch to a dark scheme. */
:root { color-scheme: light only; }

* { box-sizing: border-box; }
html { font-size: 17px; }
@media (max-width: 640px) { html { font-size: 15.5px; } }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Libre Baskerville", Baskerville, "Times New Roman", serif; line-height: 1.5; font-variant-numeric: lining-nums tabular-nums; }
a { color: inherit; text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
img { max-width: 100%; height: auto; }

.wrap { max-width: 60rem; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }

/* masthead: the book cover's navy band, the club name, a red rule */
.mast { background: var(--navy); color: var(--cream); border-bottom: 4px solid var(--red); }
.mast .wrap { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: .4rem 1.5rem; padding-block: 1.1rem .8rem; }
.mast .club { font-size: 1.35rem; font-weight: 700; letter-spacing: .01em; line-height: 1; }
.mast .club small { display: block; font-weight: 400; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; margin-top: .45rem; color: var(--cream); opacity: .85; }
.mast nav { display: flex; flex-wrap: wrap; gap: .2rem 1.4rem; font-size: .95rem; }
.mast nav a { padding-bottom: .15rem; border-bottom: 2px solid transparent; }
.mast nav a[aria-current] { border-color: var(--cream); }
.mast nav a:hover { text-decoration: none; border-color: var(--red); }
/* running head under the masthead: section on the right, as in the book */
.run { border-bottom: 1px solid var(--ink); }
.run .wrap { display: flex; justify-content: space-between; align-items: baseline; padding-block: .45rem .35rem; font-size: var(--step--1); color: var(--muted); font-style: italic; }
/* headings */
h1 { font-size: var(--step-3); font-weight: 700; line-height: 1.1; margin: 2.2rem 0 .4rem; letter-spacing: -.005em; text-wrap: balance; }
h1 + p.sub { margin: 0 0 1.4rem; font-size: var(--step-0); color: var(--muted); }
h2 { font-size: var(--step-2); font-weight: 700; margin: 2.4rem 0 .7rem; padding-top: .5rem; border-top: 1px solid var(--ink); text-wrap: balance; }
h2 .no { display: inline-block; width: 2rem; color: var(--muted); }
h3 { font-size: var(--step-1); font-weight: 700; margin: 1.4rem 0 .3rem; }
p { margin: .4rem 0; max-width: var(--measure); }
p.small, .small { font-size: var(--step--1); color: var(--muted); }
.cols { columns: 2; column-gap: 2.6rem; }
.cols p { max-width: none; }
@media (max-width: 760px) { .cols { columns: 1; } }

/* tables */
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums lining-nums; font-size: .92rem; }
table td:first-child, table td:last-child, table th:first-child { white-space: nowrap; }
.card table.bat td:first-child { white-space: normal; }
th { font-weight: 400; font-style: italic; text-align: left; border-bottom: 1px solid var(--ink); padding: .2rem .5rem .2rem 0; color: var(--muted); }
td { padding: .22rem .45rem .22rem 0; border-bottom: 1px solid var(--rule); vertical-align: baseline; }
td.n, th.n { text-align: right; }
td.mute { color: var(--muted); }
tr.me td { color: var(--red); }
tr.won td:last-child { color: var(--red); }
.tablewrap { overflow-x: auto; }
@media (max-width: 640px) { .tablewrap table { white-space: nowrap; } }

/* layout */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.6rem; }
.two > div { min-width: 0; }
@media (max-width: 760px) { .two { grid-template-columns: 1fr; } }

/* figures and charts */
figure { margin: 1rem 0; }
figure img { display: block; width: 100%; }
figcaption { font-size: var(--step--1); color: var(--muted); margin-top: .35rem; }
.chart { position: relative; }
.chart svg { width: 100%; height: auto; display: block; }
.tip { position: absolute; pointer-events: none; background: var(--ink); color: var(--paper); font-size: .85rem; padding: .25rem .5rem; transform: translate(-50%, -120%); white-space: nowrap; opacity: 0; }

/* lists */
.contents { list-style: none; padding: 0; margin: 0; max-width: 32rem; }
.contents li { display: grid; grid-template-columns: 2.4rem 1fr; padding: .18rem 0; }
.contents li span:first-child { color: var(--muted); }
ol.xi { list-style: none; padding: 0; margin: 0; }
ol.xi li { display: grid; grid-template-columns: 2rem 1fr; padding: .5rem 0; border-bottom: 1px solid var(--rule); }
ol.xi li span:first-child { color: var(--muted); }
ol.xi b { font-weight: 700; }
ol.xi .line { color: var(--muted); }
ol.xi p { margin: .1rem 0 0; max-width: none; }

/* facts */
.facts { display: flex; flex-wrap: wrap; gap: .6rem 2.4rem; margin: 1.2rem 0 0; }
.facts div { border-top: 1px solid var(--ink); padding-top: .25rem; min-width: 7rem; }
.facts .v { font-size: 1.8rem; line-height: 1.1; font-weight: 700; }
.facts .l { font-size: var(--step--1); color: var(--muted); }

/* scorecards, in the style of the annual */
.card { margin: 2rem 0 0; }
.card h3 { margin-top: 0; }
.card .meta { color: var(--muted); font-size: var(--step--1); margin: 0 0 .5rem; }
.card .inns { margin-top: .9rem; }
.card .inns h4 { font-size: var(--step-0); font-weight: 700; margin: 0 0 .2rem; }
.card table.bat td:nth-child(2) { color: var(--muted); }
.card table.bat tr.total td { border-bottom: 1px solid var(--ink); font-weight: 700; }
.card table.bowl { max-width: 28rem; margin-top: .5rem; }
.card .note { font-size: var(--step--1); color: var(--muted); margin-top: .4rem; }

/* footer */
.foot { margin: 3.5rem 0 0; padding: .7rem 0 2rem; border-top: 2px solid var(--ink); font-size: var(--step--1); color: var(--muted); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.foot a { color: var(--ink); }
/* photographs */
.photo { margin: 1.2rem 0 0; }
.photo img { display: block; width: 100%; }
.photo figcaption { font-size: var(--step--1); color: var(--muted); margin-top: .4rem; }
.lead { font-size: 1.08rem; max-width: 60ch; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media print { .mast nav, .tip { display: none; } .mast { color: var(--ink); background: none; border-bottom: 2px solid var(--ink); } .mast .club small { color: var(--ink); } body { font-size: 11pt; } }
ul.plain { padding-left: 1.2rem; margin: .4rem 0; }
ul.plain li { margin: .15rem 0; }
table.sort th:hover { color: var(--ink); text-decoration: underline; }