.site { width: min(96%, 77rem); margin: 1rem auto; border: 3px ridge #e4e4e4; box-shadow: .3rem .3rem 0 #7591a7; background: #c0c0c0; }
.masthead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; gap: 1rem; padding: .8rem 1.7rem; background: #f8f8f4; border-bottom: 3px ridge #d9d9d9; }
.brand { display: block; max-width: 23rem; }
.brand img { width: 100%; }
.masthead-copy { text-align: right; }
.masthead-copy .eyebrow { color: #656565; }
.slogan { color: var(--navy); font: bold italic clamp(1.1rem, 2vw, 1.75rem)/1.2 'Times New Roman', serif; margin: .45rem 0; }
.masthead-links { font-size: .75rem; }
.masthead-links span { padding: 0 .4rem; color: #777; }
.welcome { padding: .4rem .7rem; background: var(--navy); color: #fff; text-align: center; border-top: 1px solid #fff; border-bottom: 3px solid var(--yellow); font-size: .8rem; font-weight: bold; letter-spacing: .03em; }
.welcome b { color: var(--yellow); }
.site-body { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr); gap: .7rem; padding: .7rem; align-items: start; }
.sidebar { min-width: 0; }
.nav-box { background: #b8c1cc; border: 2px outset #e5e5e5; padding: .45rem; }
.nav-heading { padding: .2rem .35rem; color: #fff; background: var(--navy); font: bold .8rem/1.5 'Courier New', monospace; margin-bottom: .5rem; }
.nav-links { display: flex; flex-direction: column; gap: .35rem; }
.nav-links a { display: flex; align-items: center; gap: .5rem; padding: .45rem .55rem; border: 2px outset #f6f6f6; color: #102f6e; background: #ddd; font-size: .85rem; font-weight: bold; text-decoration: none; }
.nav-links a:hover { background: #f9f4b1; }
.nav-links a[aria-current='page'] { background: var(--blue); color: #fff; border-style: inset; }
.nav-icon { font: bold .8rem/1 'Courier New', monospace; width: 1.3rem; height: 1.2rem; display: inline-grid; place-items: center; color: #fff; background: #c62025; border: 1px solid #800000; flex-shrink: 0; }
.nav-links a:nth-child(even) .nav-icon { background: #186689; border-color: #003b60; }
.sidebar-ad { margin-top: .8rem; padding: .8rem .6rem; text-align: center; border: 3px double var(--navy); background: var(--yellow); }
.sidebar-ad strong { display: block; font: bold 1.3rem/1.15 'Times New Roman', serif; color: var(--navy); }
.sidebar-ad .mini-price { font: bold 3rem/1 Arial, sans-serif; color: #d40000; text-shadow: 1px 1px #fff; margin: .4rem 0; }
.sidebar-ad p { font-size: .75rem; margin: .4rem 0; }
.sidebar-ad a { font-size: .85rem; font-weight: bold; }
.side-blue { background: #dbeaff; }
.side-blue strong { font-size: 1.15rem; }
.sidebar-note { font: .73rem/1.5 Arial, sans-serif; text-align: center; padding: .7rem .35rem; }
.sidebar-note .flag { display: inline-block; width: 1.5rem; height: .8rem; background: #003278; color: #fff; vertical-align: baseline; line-height: .8rem; margin-right: .25rem; }
.counter { display: flex; justify-content: center; margin: .4rem 0; }
.counter span { font: bold 1.1rem/1.4 'Courier New', monospace; background: #151515; color: #65ff56; border: 1px inset #777; padding: 0 .15rem; }
.main { background: #fff; border: 2px inset #e3e3e3; padding: 1.3rem; min-width: 0; }
.page-top { border-bottom: 2px solid var(--blue); margin-bottom: 1.1rem; padding-bottom: .7rem; }
.page-top .eyebrow { color: #9a2020; margin: 0 0 .3rem; }
.page-top p:last-child { margin: 0; font-size: .9rem; }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1rem 0; }
.wide-left { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.site-footer { background: #e2e2e2; border-top: 3px ridge #fff; text-align: center; padding: .8rem; font-size: .73rem; }
.footer-ribbon { background: var(--blue); color: #fff; font-weight: bold; padding: .35rem; margin: -.8rem -.8rem .65rem; border-bottom: 2px solid var(--red); }
.footer-links { margin-bottom: .4rem; }
.footer-links a { display: inline-block; margin: .1rem .4rem; }
.site-footer p { margin: .3rem 0; }
.web-badge { display: inline-block; background: #eee; border: 2px outset #fff; font: bold .65rem/1.25 'Courier New', monospace; padding: .2rem .55rem; margin: .35rem .3rem 0; }
@media (min-width: 95rem) { .site { margin-top: 1.5rem; } }
@media (max-width: 52rem) {
  .site { width: 98%; }
  .site-body { grid-template-columns: 10.5rem minmax(0, 1fr); gap: .45rem; padding: .45rem; }
  .main { padding: .9rem; }
  .two-col { grid-template-columns: 1fr; }
  .masthead { padding: .7rem 1rem; }
}
@media (max-width: 38rem) {
  .masthead { grid-template-columns: 1fr; gap: .3rem; justify-items: center; }
  .brand { width: min(100%, 20rem); }
  .masthead-copy { text-align: center; }
  .masthead-copy .eyebrow { display: none; }
  .site-body { grid-template-columns: 1fr; }
  .nav-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-links a { font-size: .8rem; padding: .45rem .3rem; }
  .sidebar-ad, .sidebar-note { display: none; }
  .nav-heading { font-size: .7rem; }
  .welcome { font-size: .7rem; }
  .main { padding: .8rem; }
}