/* aimisconduct.com: one stylesheet, system fonts only, no external requests. */

:root { color-scheme: light; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: #000; font: 13px/1.45 Verdana, Geneva, "DejaVu Sans", Arial, Helvetica, sans-serif; }
img { border: 0; }

a { color: #9b0a2b; }
a:visited { color: #6b1f5c; }
a:hover { color: #dc002a; }
a:focus-visible { outline: 2px solid #1a4fd6; outline-offset: 2px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 8px; top: 8px; z-index: 10; background: #ffef5c; color: #000; padding: 6px 10px; font-weight: bold; }
.preview-note { margin: 0; padding: 6px 10px; background: #ffef5c; color: #000; border-bottom: 1px solid #8a7a00; text-align: center; font-weight: bold; font-size: 12px; }

.wrap { max-width: 1000px; margin: 0 auto; padding: 14px 0 30px; }

/* masthead */
.mast { display: flex; align-items: center; gap: 22px; padding: 0 10px 8px; }
.mast-img { flex: none; display: block; line-height: 0; }
.mast-img img { width: 220px; height: 200px; display: block; }
.mast-words { flex: 1; min-width: 0; }
.wordmark { margin: 0; font: 900 54px/1 "Arial Black", "Arial Bold", Gadget, Arial, Helvetica, sans-serif; letter-spacing: -1px; }
.wordmark a, .wordmark a:visited { color: #c4161c; text-decoration: none; }
.wordmark a:hover { color: #9b0a2b; }
.wordmark .dot { color: #666; font-size: 30px; letter-spacing: 0; }
.tagline { margin: 8px 0 0; font: italic 19px/1.3 Georgia, "Times New Roman", Times, serif; color: #4a4a4a; }
.mast-side { flex: none; width: 200px; font-size: 11px; line-height: 1.6; color: #333; text-align: right; }

/* tabs */
.tabs { display: flex; flex-wrap: wrap; gap: 3px; padding-left: 4px; margin-top: 6px; }
.tab, .tab:visited { display: block; background: #6e6e6e; color: #fff; text-decoration: none; font: bold 13px/1.35 Verdana, Geneva, "DejaVu Sans", Arial, sans-serif; padding: 4px 18px 3px; border-radius: 10px 10px 0 0; }
.tab:hover { background: #4a4a4a; color: #fff; }
.tab.on, .tab.on:visited { background: #9b0a2b; color: #fff; }

/* the box: three columns, main first in source order */
.box { display: grid; grid-template-columns: 180px minmax(0, 1fr) 301px; grid-template-areas: "ad ad ad" "left main right"; border: 1px solid #8a8a8a; border-top: 3px solid #9b0a2b; }
.center { grid-area: main; padding: 16px 20px 20px; min-width: 0; }
.rail-l { grid-area: left; background: #cfcfcf; text-align: center; font-size: 11px; line-height: 1.4; padding-bottom: 12px; }
.rail-r { grid-area: right; background: #f2f2f2; border-left: 1px solid #bdbdbd; font-size: 11px; line-height: 1.5; padding-bottom: 12px; }
.ad-mobile { grid-area: ad; }

.rh { margin: 0; padding: 3px 6px; background: #999; color: #000; font: bold 12px/1.35 Verdana, Geneva, "DejaVu Sans", Arial, sans-serif; text-align: center; }
.rh a, .rh a:visited { color: #000; }
.rh a:focus-visible { outline-color: #000; }
.rail-l a:hover { color: #b0002a; }
.rail-l .when { margin: 10px 8px 1px; font-weight: bold; }
.rail-l .hist { margin: 0 8px; }
.rail-l .hist + .hist { margin-top: 8px; }
.rail-l .rh + .hist { margin-top: 10px; }
.rail-l .rh-next { margin-top: 14px; }
.quiet { color: #222; }

.mod { margin: 0 0 12px; }
.mod-body { padding: 6px 10px; }
.mod-body p { margin: 0 0 6px; }
.mod ul { margin: 0; padding: 0 0 0 16px; }
.key { display: grid; grid-template-columns: 62px 1fr; gap: 6px 8px; margin: 0; }
.key dt, .key dd { margin: 0; }

.cal { width: 100%; border-collapse: collapse; text-align: center; font-size: 11px; }
.cal th { padding: 2px 0; color: #333; }
.cal td { padding: 0; line-height: 24px; color: #555; }
.cal td a { display: block; }
.cal td.has a { font-weight: bold; }
.cal td.cur { background: #9b0a2b; color: #fff; font-weight: bold; }

/* the news */
.intro { margin: 0 0 18px; text-align: center; font-size: 11px; line-height: 1.5; color: #222; }
.dayhead { margin: 6px 0 2px; text-align: center; font: bold 24px/1.2 Arial, Helvetica, "Liberation Sans", sans-serif; }
.dayhead a, .dayhead a:visited { color: #000; text-decoration: none; }
.dayhead a:hover { color: #9b0a2b; text-decoration: underline; }
/* earlier days on the front page: smaller and red, so today's head leads */
.day ~ .day .dayhead { font-size: 20px; }
.day ~ .day .dayhead a, .day ~ .day .dayhead a:visited { color: #c4161c; }
.daysub { margin: 0 0 16px; text-align: center; font-size: 11px; color: #333; }
.daysep { border: 0; border-top: 3px double #999; margin: 6px 0 18px; }
.empty, .more { text-align: center; margin: 24px 0; }

.item { margin: 0 0 20px; }
.hl { margin: 0; font: bold 18px/1.2 Arial, Helvetica, "Liberation Sans", sans-serif; text-wrap: pretty; }
.hl a, .hl a:visited { color: #000; text-decoration: none; }
.hl a:hover { color: #9b0a2b; text-decoration: underline; }
.meta { margin: 2px 0 3px; font: 12px/1.4 Georgia, "Times New Roman", Times, serif; color: #333; }
.meta .plink, .meta .plink:visited { color: #333; }
.syn { margin: 0 0 2px; font-size: 13px; line-height: 1.5; text-wrap: pretty; }
.links { margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 12px; font: 13px/1.5 Georgia, "Times New Roman", Times, serif; }
.links .arch { margin-left: auto; }
.links a { white-space: nowrap; }

.tag { display: inline-block; padding: 2px 4px; margin-right: 1px; font: bold 9px/1 Verdana, Geneva, "DejaVu Sans", Arial, sans-serif; letter-spacing: .5px; vertical-align: 1px; }
.tag-human { background: #262626; color: #fff; }
.tag-ai { background: #b3001b; color: #fff; }
.tag-hybrid { background: #ffd23f; color: #000; box-shadow: inset 0 0 0 1px #8a6d00; }

.crumbs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; margin: 0 0 10px; font: 12px/1.4 Georgia, "Times New Roman", Times, serif; }
.crumbs > span:last-child { text-align: right; }

.mdayhead { margin: 18px 0 6px; padding-bottom: 2px; border-bottom: 1px solid #bbb; font: bold 15px/1.3 Arial, Helvetica, "Liberation Sans", sans-serif; }
.mdayhead a, .mdayhead a:visited { color: #000; text-decoration: none; }
.mlist { margin: 0; padding: 0; list-style: none; }
.mlist li { margin: 0 0 5px; }
.mout { font: 11px Georgia, "Times New Roman", Times, serif; color: #333; }
.ycount { font-weight: normal; font-size: 12px; color: #333; }
.months { margin: 0 0 8px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 12px; }
.months .none { color: #767676; }
.mcount { font-size: 11px; color: #333; }
.prose { max-width: 34em; margin: 12px auto 0; font-size: 13px; line-height: 1.6; }
/* 24px-tall targets for list links at every width (WCAG 2.5.8) */
.months a, .mlist a, .rail-l .hist a, .mod li a { display: inline-block; padding: 4px 0; }

.foot { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 16px; padding: 4px 10px; background: #666; color: #fff; font-size: 11px; line-height: 1.6; }
.foot p { margin: 0; }
.foot a, .foot a:visited { color: #fff; }
.foot a:hover { color: #ffef5c; }
.foot a:focus-visible { outline-color: #fff; }
.foot p:last-child { flex: none; }

/* advertising: every slot is an empty, zero-height box until ads are switched on. When on, each
   slot reserves its creative's height plus a 14px "Advertisement" label (min-height, so an
   oversized creative pushes the news down instead of painting over it). */
.ad { display: block; height: 0; margin: 0; overflow: hidden; }
.ads-on .ad { height: auto; overflow: visible; margin: 0 auto; text-align: center; }
.ads-on .ad::before { content: "Advertisement"; display: block; height: 14px; font: 9px/14px Verdana, Geneva, "DejaVu Sans", Arial, sans-serif; text-align: center; color: #555; }
.ads-on .ad-leaderboard { width: 728px; min-height: 104px; margin: 0 auto 8px; }
.ads-on .ad-skyscraper { width: 160px; min-height: 614px; margin-top: 14px; position: sticky; top: 10px; }
.ads-on .ad-rectangle { width: 300px; min-height: 264px; margin: 0 0 12px; }
.ads-on .ad-halfpage { width: 300px; min-height: 614px; margin: 12px 0 0; position: sticky; top: 10px; }
.ads-on .ad-infeed { width: 300px; min-height: 264px; margin: 2px auto 22px; }
.ads-on .ad-mobile { display: none; }

/* narrower than the three-column page: one column, rails after the news */
@media (max-width: 1003px) {
  .wrap { max-width: 740px; padding: 10px 0 24px; }
  .mast-side { display: none; }
  .box { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "ad ad" "main main" "left right"; }
  .rail-r { border-left: 1px solid #bdbdbd; }
  .ads-on .ad-skyscraper, .ads-on .ad-halfpage { display: none; }
  .ads-on .ad-rectangle { margin: 10px auto 12px; }
}
/* tablet: keep the news column near 70 characters, centred under the centred day heads */
@media (min-width: 601px) and (max-width: 1003px) {
  .item, .daysep, .crumbs, .intro, .empty, .more { max-width: 520px; margin-left: auto; margin-right: auto; }
  .syn { font-size: 14px; }
}
@media (max-width: 747px) {
  .ads-on .ad-leaderboard { display: none; }
  .ads-on .ad-mobile { display: block; width: 320px; min-height: 64px; margin: 16px auto 0; }
  .ads-on .foot { padding-bottom: 60px; }
}
@media (max-width: 600px) {
  body { font-size: 15px; }
  .wrap { padding-top: 10px; }
  .mast { gap: 12px; padding: 0 16px 8px; }
  .mast-img img { width: 96px; height: 87px; }
  .wordmark { font-size: 31px; letter-spacing: -.5px; }
  .wordmark .dot { display: none; }
  .tagline { margin-top: 5px; font-size: 14px; }
  .tabs { padding: 0 6px; }
  .tab, .tab:visited { display: flex; align-items: center; min-height: 44px; padding: 0 11px; font-size: 14px; }
  .box { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ad" "main" "left" "right"; border-left: 0; border-right: 0; }
  .center { padding: 12px 16px 8px; }
  .intro { font-size: 13px; }
  .dayhead { font-size: 23px; }
  .day ~ .day .dayhead { font-size: 21px; }
  .daysub { font-size: 12px; }
  .item { margin-bottom: 26px; }
  .hl { font-size: 18px; line-height: 1.25; }
  .meta { font-size: 13px; margin: 3px 0 4px; }
  .syn { font-size: 15px; }
  .links { font-size: 15px; margin-top: 0; line-height: 2; }
  .tag { font-size: 10px; padding: 3px 5px; }
  .rail-l, .rail-r { text-align: left; font-size: 13px; line-height: 1.45; border-left: 0; }
  .rh { padding: 5px 16px; font-size: 13px; text-align: left; }
  .rail-l .when, .rail-l .hist { margin-left: 16px; margin-right: 16px; }
  .mod-body { padding: 8px 16px; }
  .crumbs { font-size: 14px; grid-template-columns: 1fr 1fr; gap: 0 10px; }
  .crumbs > a { grid-column: 1 / -1; grid-row: 1; text-align: center; }
  .crumbs a { display: inline-block; padding: 8px 0; }
  .months { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot { flex-direction: column; padding: 8px 16px; font-size: 12px; }
  .ads-on .ad-infeed { width: auto; margin-left: -16px; margin-right: -16px; }
}
/* the smallest phones: the wordmark must fit beside the robot without overflowing */
@media (max-width: 360px) {
  .wordmark { font-size: 26px; }
}
/* zoomed desktops and small tablets: shrink the robot so the wordmark keeps one line */
@media (min-width: 601px) and (max-width: 760px) {
  .mast-img img { width: 132px; height: 120px; }
}

@media print {
  .tabs, .rail-l, .rail-r, .ad, .skip, .crumbs { display: none !important; }
  .box { display: block; border: 0; }
  a { color: #000; }
}