:root { font-family: "Segoe UI", Arial, sans-serif; color: #302724; background: #f7f3ec; font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
body { max-width: 1080px; margin: auto; padding: 26px 28px 60px; font-size: 15px; line-height: 1.75; }
h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; line-height: 1.2; letter-spacing: -.035em; }
h1 { margin: 16px 0; font-size: clamp(39px, 6vw, 68px); }
h2 { margin: 0 0 22px; font-size: 31px; }
h3 { margin: 0 0 12px; font-size: 26px; }
p { margin: 0 0 12px; }
a { color: #713b3c; text-underline-offset: 4px; }
a:hover { color: #a15c4d; }
header { padding: 35px 42px 40px; border-radius: 15px; background: #322525; color: #f9efe4; }
header a { color: #f3d5c4; }
header a[href="/"]::before { content: ""; display: inline-block; width: 20px; height: 20px; margin-right: 8px; vertical-align: -5px; background: url("/favicon.svg") center / contain no-repeat; }
header a:hover { color: white; }
header > p { max-width: 720px; color: #e1d0c3; font-size: 15px; }
header nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 24px; }
header nav a { display: inline-flex; align-items: center; min-height: 34px; padding: 5px 10px; border: 1px solid #85645f; border-radius: 6px; text-decoration: none; font-size: 12px; }
header nav a:hover { background: #523c3a; }
header nav[aria-label="Breadcrumb"] { gap: 10px; margin: 0; color: #d6b7a7; font-size: 12px; }
header nav[aria-label="Breadcrumb"] a { padding: 0; border: 0; min-height: 0; text-decoration: underline; }
header nav[aria-label="Breadcrumb"] a:hover { background: transparent; }
header .adjacent-dates { justify-content: space-between; margin-top: 27px; padding-top: 18px; border-top: 1px solid #674c49; }
main { margin-top: 22px; }
main > section { margin-bottom: 16px; padding: 28px 34px; border: 1px solid #e5d8ca; border-radius: 13px; background: #fffdfa; }
main > section > h2 { padding-bottom: 16px; border-bottom: 1px solid #e9ddd0; }
.date-guide { background: #fefaf4; }
.date-guide > p:first-of-type { font-size: 17px; color: #493a32; }
.date-guide h3 { font-size: 21px; margin: 0 0 9px; }
.date-guide ul { margin: 0; padding-left: 21px; }
.date-guide li { padding: 2px 0; }
.guide-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; margin: 24px 0; }
.date-guide .comparisons { margin-bottom: 18px; }
.date-guide .guide-note { font-size: 13px; color: #786c64; }
article:target { outline: 2px solid #a87969; outline-offset: 7px; border-radius: 3px; }
.date-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 9px; padding: 0; margin: 0; list-style: none; }
.date-grid a { display: flex; flex-direction: column; min-height: 76px; justify-content: space-between; padding: 11px 13px; border: 1px solid #e3d4c4; border-radius: 8px; background: #faf5ef; text-decoration: none; }
.date-grid a:hover { background: #f2e5d8; border-color: #a87969; color: #713b3c; }
.date-grid strong { font-weight: 650; }
.date-grid span { color: #8a7669; font-size: 11px; }
article { padding: 25px 0; border-bottom: 1px solid #e8ddd2; }
article:last-child { border: 0; padding-bottom: 0; }
article > p { color: #574e48; }
article > p a { font-weight: 650; }
article .note { font-size: 12px; color: #82756e; }
footer { margin-top: 25px; padding: 22px 4px; border-top: 1px solid #d7c4b2; color: #786c64; font-size: 13px; }
nav { display: flex; flex-wrap: wrap; gap: 13px; }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid #713b3c; outline-offset: 3px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 20px 0 8px; }
.table-scroll { max-width: 100%; overflow-x: auto; }
.table-scroll table { min-width: 920px; }
.table-scroll:focus-visible { outline: 2px solid #713b3c; outline-offset: 3px; }
td.zero { color: #9b4b3d; font-weight: 700; background: #fff0e8; }
caption { text-align: left; color: #76695e; padding-bottom: 12px; }
th, td { text-align: left; border-bottom: 1px solid #e8ddd2; padding: 10px 9px; }
th { color: #713b3c; font-weight: 650; background: #f6eee5; }
tbody tr:hover { background: #faf4ed; }
@media (max-width: 700px) { body { padding: 14px 14px 35px; } header { padding: 26px 22px; } main > section { padding: 24px 21px; } h2 { font-size: 27px; } h3 { font-size: 23px; } .guide-columns { grid-template-columns: 1fr; gap: 18px; } .date-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .date-grid a { min-height: 70px; } table { font-size: 12px; } th, td { padding: 8px 5px; } }