/* Ads (ported from words-v2's site.css). Slots take no space and show
   nothing until /js/ads.js adds .ads-enabled to <html>, which it does only
   when it will request a unit (production host, a unit id for the viewport).
   Then each slot reserves the height of that unit (320x100 below 48rem,
   728x90 from 48rem), so nothing shifts whether or not an ad fills it. */
.ad-slot {display: none;}
html.ads-enabled .ad-slot {display: grid; place-items: center; width: 100%; max-width: 728px; min-height: 100px; margin: 1.5rem auto; background: #f7f1ea; border-radius: 4px; position: relative; contain: layout;}
/* From 48rem the slot receives the 728px unit, so it is always exactly 728px
   wide and centred on its column, extending equally past both sides when the
   column is narrower (some legacy containers are 680-716px). It is sized
   before the unit arrives, so a table cell around it never widens later. */
@media (min-width: 48rem) {html.ads-enabled .ad-slot {min-height: 90px; width: 728px; max-width: none; margin-left: calc((100% - 728px) / 2); margin-right: calc((100% - 728px) / 2);}}
html.ads-enabled .ad-slot::before {content: "Advertisement"; position: absolute; top: -1.15rem; left: 0; font-family: system-ui, sans-serif; font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: #6b5e55;}
/* Sized by the unit requested at load, not the current viewport: a resize
   across the breakpoint must not stretch a fixed-size ad. */
.ad-unit {display: inline-block;}
.ad-unit-mobile {width: 320px; height: 100px;}
.ad-unit-desktop {width: 728px; height: 90px;}
.ad-unit-responsive {display: block; width: 100%;}
@media print {.ad-slot {display: none !important;}}