/* Shared theme support. Sub-pages swap --ink and --bone; the front page (html.idx) has its own dark rules in its stylesheet. */
:root { --card: #f6f2e9; --card2: rgba(255,255,255,.6); }
:root[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"]:not(.idx) { --ink: #f1ede4; --bone: #12100d; --card: #1d1a15; --card2: rgba(29,26,21,.7); }
/* woodcuts keep their white paper in dark mode */
html[data-theme="dark"]:not(.idx) picture img, html[data-theme="dark"]:not(.idx) .cshero img { filter: brightness(1.07); background: #fff; }
/* calmer outlines in dark mode */
html[data-theme="dark"]:not(.idx) .cscard, html[data-theme="dark"]:not(.idx) .cevl a, html[data-theme="dark"]:not(.idx) .cgp a, html[data-theme="dark"]:not(.idx) .pwl a { border-color: color-mix(in srgb, var(--ink) 38%, transparent); }
html[data-theme="dark"]:not(.idx) .cscard:hover, html[data-theme="dark"]:not(.idx) .cevl a:hover, html[data-theme="dark"]:not(.idx) .cgp a:hover, html[data-theme="dark"]:not(.idx) .pwl a:hover { border-color: var(--ink); }
html[data-theme="dark"]:not(.idx) .csbar a, html[data-theme="dark"]:not(.idx) .csbar button { border-color: color-mix(in srgb, var(--ink) 55%, transparent); }
html[data-theme="dark"]:not(.idx) .csbar .pr { border-color: var(--ink); }
#themeBtn { position: fixed; top: 58px; right: 12px; z-index: 40; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid currentColor; background: transparent; color: #fff; mix-blend-mode: difference; display: grid; place-items: center; cursor: pointer; padding: 0; transition: transform .2s; }
#themeBtn:hover { transform: scale(1.08); }
#themeBtn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (max-width: 520px) { #themeBtn { top: 84px; width: 34px; height: 34px; } }
@media print { #themeBtn { display: none !important; } :root, html[data-theme="dark"]:not(.idx) { --ink: #0a0a0a; --bone: #fff; --card: #fff; --card2: #fff; } html[data-theme="dark"]:not(.idx) picture img, html[data-theme="dark"]:not(.idx) .cshero img { filter: none; } }

/* Phones: long URLs and wide tables must never push the page sideways */
@media screen and (max-width: 700px) {
  body :is(a, p, li, td, th, dd, dt, h1, h2, h3, blockquote, cite, figcaption) { overflow-wrap: anywhere; }
  body table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  body img, body svg, body video { max-width: 100%; height: auto; }
}

/* Site menu */
#menuBtn { position: fixed; top: 12px; left: 12px; z-index: 40; display: inline-flex; align-items: center; gap: .5em; height: 38px; padding: 0 .95em 0 .8em; border-radius: 999px; border: 1.5px solid currentColor; background: transparent; color: #fff; mix-blend-mode: difference; font: 700 .72rem ui-monospace, Menlo, monospace; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
#menuBtn:hover { transform: scale(1.04); }
#menuBtn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
#menuBd { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); }
#sitemenu { position: fixed; z-index: 91; top: 0; left: 0; bottom: 0; width: min(340px, 86vw); background: #0f0e0b; color: #f1ede4; padding: 0 0 max(1rem, env(safe-area-inset-bottom)); overflow-y: auto; box-shadow: 20px 0 60px rgba(0,0,0,.5); animation: menuin .22s ease-out; font-family: "Playfair Display", Georgia, serif; }
@keyframes menuin { from { transform: translateX(-100%); } to { transform: none; } }
#sitemenu[hidden], #menuBd[hidden] { display: none; }
#sitemenu .mh { display: flex; justify-content: space-between; align-items: center; padding: 1.1rem 1.2rem; font: 700 .7rem ui-monospace, Menlo, monospace; letter-spacing: .3em; text-transform: uppercase; border-bottom: 1px solid rgba(241,237,228,.18); }
#sitemenu .mh button { background: none; border: 0; color: inherit; font-size: 2rem; line-height: 1; padding: .1em .3em; cursor: pointer; min-width: 44px; min-height: 44px; }
#sitemenu a { display: block; padding: .95rem 1.2rem; min-height: 48px; font-weight: 700; font-size: 1.25rem; color: #f1ede4; text-decoration: none; border-bottom: 1px solid rgba(241,237,228,.1); }
#sitemenu a:hover, #sitemenu a:focus-visible { background: rgba(241,237,228,.1); outline: none; }
#sitemenu a[aria-current] { color: #0f0e0b; background: #f1ede4; }
#sitemenu .mf { padding: 1rem 1.2rem; font: .68rem ui-monospace, Menlo, monospace; letter-spacing: .16em; text-transform: uppercase; opacity: .6; }
html.menu-open { overflow: hidden; }
@media (max-width: 520px) { #menuBtn { top: 50px; height: 34px; padding: 0 .75em 0 .65em; font-size: .62rem; } }
@media (max-width: 1000px) and (min-width: 521px) { #menuBtn { top: 12px; } }
@media print { #menuBtn, #sitemenu, #menuBd { display: none !important; } }

#siteDisc { max-width: 46rem; margin: 3rem auto 1.2rem; padding: 1rem 16px 0; border-top: 1px solid currentColor; font: 600 .72rem/1.55 ui-monospace, Menlo, monospace; letter-spacing: .04em; opacity: .7; text-align: center; }
#siteDisc a { color: inherit; }
@media print { #siteDisc { display: none; } }

.ytb { font: 700 .78rem ui-monospace, Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; border: 1.5px solid currentColor; background: transparent; color: inherit; border-radius: 999px; padding: .6em 1.1em; cursor: pointer; display: block; margin: 0 0 .5rem; }
.ytf { display: block; width: 100%; max-width: 560px; aspect-ratio: 16 / 9; border: 0; margin: .4rem 0 .6rem; background: #000; }

/* Menu groups, skip link, focus, solid fixed buttons (contrast no longer depends on what is underneath) */
#sitemenu .mg { margin: 0; padding: 1rem 1.2rem .3rem; font: 700 .66rem ui-monospace, Menlo, monospace; letter-spacing: .24em; text-transform: uppercase; opacity: .65; }
#sitemenu .mq { margin-top: .8rem; border-top: 1px solid rgba(241,237,228,.18); } #sitemenu .mq a { font-size: 1rem; min-height: 44px; padding: .7rem 1.2rem; }
#sitemenu a:focus-visible { outline: 3px solid #f1ede4; outline-offset: -3px; background: rgba(241,237,228,.18); }
#sitemenu a[aria-current]:focus-visible { outline-color: #0f0e0b; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 200; background: #f1ede4; color: #0a0a0a; padding: .7em 1.1em; border-radius: 8px; font: 700 .85rem ui-monospace, Menlo, monospace; text-decoration: none; }
.skip:focus { top: 12px; outline: 3px solid #0a0a0a; }
#menuBtn, #themeBtn { mix-blend-mode: normal !important; background: #0a0a0a !important; color: #f1ede4 !important; border-color: #f1ede4 !important; box-shadow: 0 2px 10px rgba(0,0,0,.35); }
@media (pointer: coarse) { #menuBtn, #themeBtn { min-height: 44px; min-width: 44px; } }
#siteDisc nav { margin-bottom: .8rem; font-size: .8rem; letter-spacing: .06em; }
#siteDisc p { margin: 0; font: inherit; letter-spacing: inherit; }

/* print masthead and footer */
#printMast, #printFoot { display: none; }
@media print {
  #printMast { display: flex; justify-content: space-between; align-items: baseline; border-top: 6px solid #0a0a0a; border-bottom: 1.5px solid #0a0a0a; padding: .5rem 0 .45rem; margin: 0 0 1rem; color: #0a0a0a; font: 700 .72rem ui-monospace, Menlo, monospace; letter-spacing: .42em; text-transform: uppercase; }
  #printMast em { font: italic 600 .8rem "Playfair Display", Georgia, serif; letter-spacing: 0; text-transform: none; }
  #printFoot { display: flex; gap: 1rem; align-items: center; border-top: 1.5px solid #0a0a0a; margin-top: 1.4rem; padding-top: .8rem; color: #0a0a0a; font: 600 .7rem/1.45 ui-monospace, Menlo, monospace; }
  #printFoot img { flex: none; width: 64px; height: 64px; }
  #printFoot p { margin: 0; }
  .csw #printFoot { font-size: .62rem; } .csw #printFoot img { width: 52px; height: 52px; }
  .csw #printMast { font-size: .62rem; }
  .cs-print-foot, .csonly.cs-print-foot, #siteDisc, #menuBtn, #sitemenu, #menuBd, .skip { display: none !important; }
}

@media print { body.nofoot #printFoot, body.nofoot .cs-print-foot { display: none !important; } }

@media (prefers-reduced-motion: reduce) { #sitemenu { animation: none; } }

@media print { .csw #printFoot, .csw #printFoot p { font-size: 9pt !important; line-height: 1.35 !important; } .csw #printFoot { margin-top: .5rem; padding-top: .5rem; gap: .6rem; break-inside: avoid; } .csw #printFoot img { width: 52px; height: 52px; } }

/* footer: key options as chips, the rest under More */
#siteDisc nav.fkey { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0 0 .7rem; }
#siteDisc nav.fkey a, #siteDisc details nav a { display: inline-block; padding: .55rem .85rem; border: 1px solid currentColor; border-radius: 999px; text-decoration: none; font-size: .78rem; letter-spacing: .06em; line-height: 1.2; min-height: 1.3rem; }
#siteDisc nav.fkey a { font-weight: 800; }
#siteDisc details { margin: 0 0 .9rem; }
#siteDisc summary { display: inline-block; cursor: pointer; padding: .5rem 1rem; border: 1px dashed currentColor; border-radius: 999px; list-style: none; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }
#siteDisc summary::-webkit-details-marker { display: none; }
#siteDisc summary::after { content: " +"; } #siteDisc details[open] summary::after { content: " \2212"; }
#siteDisc details nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; margin: .8rem 0 0; }
#siteDisc details nav a { opacity: .85; }
#siteDisc a:focus-visible, #siteDisc summary:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
@media (max-width: 640px) { #siteDisc { padding-bottom: 4.5rem; } }

/* the red Important note */
.imp { box-sizing: border-box; margin: 1.1rem auto 0; max-width: 34rem; padding: .9rem 1.05rem 1.05rem; text-align: left; background: #b3201a; color: #fff; border-radius: 10px; box-shadow: 0 2px 0 rgba(0,0,0,.25); text-transform: none; letter-spacing: 0; }
.imp .impk { display: inline-block; margin: 0 0 .55rem; padding: .28rem .6rem .28rem .7rem; background: #fff; color: #b3201a; border-radius: 4px; font: 800 .72rem/1 ui-monospace, Menlo, monospace; letter-spacing: .24em; text-transform: uppercase; }
.imp p { margin: 0; color: #fff; font: 600 .98rem/1.5 Georgia, "Times New Roman", serif; letter-spacing: 0; text-transform: none; }
.imp p.impfp { margin-top: .75rem; padding-top: .65rem; border-top: 1px solid rgba(255,255,255,.4); font: 600 .72rem/1.6 ui-monospace, Menlo, monospace; letter-spacing: .02em; }
.imp code { word-break: break-all; font: inherit; font-weight: 800; }
.imp a { color: #fff; text-decoration: underline; }
html.vid .imp { display: none !important; }
@media print { .imp { background: none; color: #000; border: 2px solid #000; box-shadow: none; } .imp .impk { background: #000; color: #fff; } .imp p, .imp a { color: #000; } }

/* the compact Important note on the front page */
details.imp.impc { padding: 0; }
details.imp.impc summary { display: flex; align-items: center; gap: .65rem; padding: .6rem .8rem; cursor: pointer; list-style: none; font: 700 .86rem/1.35 Georgia, "Times New Roman", serif; color: #fff; }
details.imp.impc summary::-webkit-details-marker { display: none; }
details.imp.impc summary::after { content: "+"; margin-left: auto; padding-left: .4rem; font: 800 1.1rem/1 ui-monospace, Menlo, monospace; }
details.imp.impc[open] summary::after { content: "\2212"; }
details.imp.impc .impk { flex: 0 0 auto; margin: 0; }
details.imp.impc[open] summary > span { display: none; }
details.imp.impc[open] summary { padding-bottom: .1rem; }
details.imp.impc > p { padding: .1rem 1rem .95rem; }
details.imp.impc > p.impfp { margin: 0 1rem .95rem; padding: .65rem 0 0; }
details.imp.impc summary:focus-visible { outline: 3px solid #fff; outline-offset: -3px; border-radius: 10px; }

details.imp.impc { margin-top: .55rem; }
details.imp.impc summary { padding: .5rem .7rem; gap: .55rem; font-size: .8rem; }
details.imp.impc .impk { padding: .22rem .5rem .22rem .58rem; font-size: .64rem; letter-spacing: .2em; }
@media (max-width: 640px) and (max-height: 880px) { section.title .onel { margin-top: .6rem; margin-bottom: .5rem; } section.title .cta { margin-top: .5rem; } }

/* the Important note, larger on a desktop so the released prompt reads comfortably */
@media (min-width: 900px) {
  .imp { max-width: none; width: min(58rem, calc(100vw - 4rem)); margin-left: 50%; margin-right: 0; transform: translateX(-50%); padding: 1.5rem 2rem 1.75rem; }
  .imp .impk { font-size: .9rem; padding: .35rem .75rem .35rem .85rem; margin-bottom: .8rem; }
  .imp p { font-size: 1.35rem; line-height: 1.5; }
  .imp pre#impprompt { font-size: 1.2rem !important; line-height: 1.6 !important; padding: 1.4rem 1.6rem !important; margin: 1.1rem 0 !important; }
  .imp .impcopy { font-size: 1rem !important; padding: .8em 1.4em !important; }
  .imp p.impfp { font-size: .9rem; }
  details.imp.impc { padding: 0; width: min(58rem, calc(100vw - 4rem)); margin-left: auto; margin-right: auto; transform: none; }
  details.imp.impc summary { font-size: 1.1rem; padding: .85rem 1.2rem; }
  details.imp.impc .impk { font-size: .8rem; }
  details.imp.impc > p { padding: .2rem 1.5rem 1rem; font-size: 1.3rem; }
  details.imp.impc > pre#impprompt { margin: .4rem 1.5rem 1rem !important; }
  details.imp.impc > p.impfp { margin: 0 1.5rem 1.3rem; }
}