/* almanac.css: "The Almanac", the site's look. An old farmer's almanac crossed
   with a tear-off desk calendar: laid-paper stock, letterpress type, an
   answer card that is a calendar leaf torn from the pad, engraved moons and
   a seasonal ornament. Loaded after dates.css (and grid.css) and before any
   route page.css, so a route can still tighten its own first screen.
   Decoration only: every colour is a token from identity.css, every
   ornament is a first-party SVG used as a mask so it takes the theme's ink,
   and nothing here changes what a tool computes or says. */

/* ---------- Stock and type ---------- */

body {
  background-color: var(--paper);
  /* laid paper: fine laid lines and wider chain lines, both barely there */
  background-image:
    repeating-linear-gradient(0deg, var(--grain) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, var(--grain) 0 1px, transparent 1px 34px);
  font-family: var(--sans);
  font-size: 1.02rem;
  line-height: 1.58;
  font-kerning: normal;
}
main.wrap { overflow-x: clip; }
::selection { background: var(--fail); color: var(--leaf); }

h1, h2 { font-family: var(--display); font-weight: 400; letter-spacing: .005em; }
h1 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); line-height: 1.08; text-wrap: balance; }
h2 { font-size: 1.45rem; line-height: 1.2; }
h3 { font-weight: 700; font-style: italic; }
a { color: var(--ink); text-decoration-color: var(--fail); text-underline-offset: .16em; text-decoration-thickness: 1px; }
a:hover { color: var(--fail); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 1px; }
.lede { font-style: italic; font-size: 1.06rem; }
.prose em { font-style: italic; }

/* The masks: one helper per ornament. Each draws in currentColor via the
   element's background, so light and dark both come from the tokens. */
.dd-orn, .brand::after, .eyebrow::before, .eyebrow::after, .faq summary::before,
.related li::before, .prose h2::after, .site-footer .inner::before, .dc-month > h2::after, .dd-grid-cap::after {
  -webkit-mask: var(--orn, url("/art/fleuron.svg")) center / contain no-repeat;
          mask: var(--orn, url("/art/fleuron.svg")) center / contain no-repeat;
  background-color: currentColor;
}

/* ---------- Masthead ---------- */

.site-header {
  background: var(--panel);
  border-bottom: 1px solid var(--ink);
  box-shadow: 0 3px 0 -1px var(--panel), 0 4px 0 -1px var(--ink);
  position: relative;
}
.brand {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.32rem;
  letter-spacing: .01em;
  line-height: 1.1;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  white-space: nowrap;
}
.brand .brand-mark { width: 22px; height: 22px; vertical-align: 0; }
/* The season's ornament after the name. html[data-season] is set by site.js
   from today's local month; without script it stays a plain fleuron. */
.brand::after {
  content: "";
  display: inline-block;
  width: 1.05rem;
  height: 1.05rem;
  color: var(--fail);
  transform: rotate(-8deg);
}
html[data-season="spring"] .brand::after { --orn: url("/art/season-spring.svg"); color: var(--pass); }
html[data-season="summer"] .brand::after { --orn: url("/art/season-summer.svg"); color: var(--brass); }
html[data-season="autumn"] .brand::after { --orn: url("/art/season-autumn.svg"); color: var(--fail); }
html[data-season="winter"] .brand::after { --orn: url("/art/season-winter.svg"); color: var(--focus); }

.site-nav a {
  color: var(--ink-soft);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.site-nav a:hover { color: var(--ink); border-bottom-color: var(--fail); }
.site-nav a[aria-current="page"] { color: var(--fail); border-bottom: 2px solid var(--fail); }

/* ---------- Kickers and the today line ---------- */

.eyebrow {
  font-family: var(--sans);
  font-style: italic;
  font-size: .9rem;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--fail);
  display: flex;
  align-items: center;
  gap: .45rem;
}
.eyebrow::before, .eyebrow::after { content: ""; flex: 0 0 auto; width: 1.1rem; height: .8rem; }
.eyebrow::after { transform: scaleX(-1); }

.today-strip {
  font-family: var(--sans);
  font-style: italic;
  font-size: .86rem;
  color: var(--ink-soft);
  letter-spacing: .01em;
}

/* ---------- The tool: a ledger page with an inner rule ---------- */

.tool-panel {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 1px;
  outline: 1px solid var(--line);
  outline-offset: -5px;
  box-shadow: 0 1px 0 var(--line), 0 10px 24px -18px var(--shadow);
  padding: 1.1rem 1.15rem;
}
.tool-panel:focus-within { outline-color: var(--line-strong); }

.dc-field > span, .dd-grid-cap, .dc-grid .hd, .prose thead th, .dc-working th, .readout .r-label {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: .12em;
}
.dc-field > span { font-size: .7rem; color: var(--ink-soft); }

input[type="date"], select, input[type="text"], input[type="number"] {
  font-family: var(--sans);
  background: var(--leaf);
  border: 1px solid var(--line-strong);
  border-bottom: 2px solid var(--ink);
  border-radius: 1px;
  font-variant-numeric: lining-nums tabular-nums;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--fail); width: 1.05rem; height: 1.05rem; }
label.inline { font-style: italic; color: var(--ink-soft); }

/* Buttons are type blocks: they stand proud and press flat. */
.btn {
  font-family: var(--sans);
  font-weight: 700;
  border-radius: 1px;
  border: 1px solid var(--ink);
  box-shadow: 0 2px 0 var(--ink);
  transition: transform .08s ease-out, box-shadow .08s ease-out;
  letter-spacing: .01em;
}
.btn:hover { filter: none; background: var(--accent-soft); color: var(--ink); }
.btn:active { transform: translateY(2px); box-shadow: 0 0 0 var(--ink); }
.btn.secondary { background: var(--leaf); border-color: var(--ink); color: var(--ink); }
.btn.secondary:hover { background: var(--accent-soft); border-color: var(--ink); }
.dc-modes .btn[aria-pressed="true"] {
  background: var(--ink);
  color: var(--leaf);
  box-shadow: 0 0 0 var(--ink);
  transform: translateY(2px);
}
.dc-modes .btn { margin-bottom: 2px; }

/* ---------- The answer: a leaf torn from the desk-calendar pad ----------
   The leaf is drawn on ::before (so its torn top edge can be a mask) and
   the card's drop-shadow follows the tear. The rubric band is the pad's
   red header; the dotted row under it is what is left of the perforation. */

.dc-answer {
  background: none;
  border: 0;
  border-radius: 0;
  isolation: isolate;
  padding: calc(1.1rem + 9px) 1.15rem 1rem;
  /* the pad under the leaf: two more sheets, then the shadow on the desk */
  filter: drop-shadow(0 1px 0 var(--line-strong)) drop-shadow(0 2px 0 var(--leaf)) drop-shadow(0 1px 0 var(--line-strong)) drop-shadow(0 7px 8px var(--shadow));
}
.dc-answer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle, var(--line-strong) 0 1px, transparent 1.4px) 0 9px / 7px 4px repeat-x,
    linear-gradient(var(--fail), var(--fail)) 0 4px / 100% 3px no-repeat,
    var(--leaf);
  -webkit-mask:
    conic-gradient(from -45deg at 50% 100%, #000 90deg, transparent 0) 0 0 / 8px 4px repeat-x,
    linear-gradient(#000, #000) 0 4px / 100% calc(100% - 4px) no-repeat;
          mask:
    conic-gradient(from -45deg at 50% 100%, #000 90deg, transparent 0) 0 0 / 8px 4px repeat-x,
    linear-gradient(#000, #000) 0 4px / 100% calc(100% - 4px) no-repeat;
}
.dc-answer.dc-bad::before {
  background:
    radial-gradient(circle, var(--line-strong) 0 1px, transparent 1.4px) 0 9px / 7px 4px repeat-x,
    linear-gradient(var(--warn), var(--warn)) 0 4px / 100% 3px no-repeat,
    var(--leaf);
}
.dc-answer .dc-big {
  font-family: var(--display);
  font-weight: 400;
  text-transform: none;
  letter-spacing: .005em;
  font-variant-numeric: lining-nums;
  color: var(--ink);
}
.dc-answer.dc-bad .dc-big { font-family: var(--sans); font-weight: 700; color: var(--warn); }
.dc-answer .dc-sub { font-style: italic; color: var(--ink-soft); }

/* A new reading tears the old leaf off: site.js lays a copy of the previous
   leaf over the card and lets it fall. Decoration only, and skipped when
   reduced motion is asked for. */
.dd-ghost {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  margin: 0 !important;
  transform-origin: 100% 0;
  filter: drop-shadow(0 8px 10px var(--shadow));
}
.dd-ghost * { visibility: inherit; }
@media (prefers-reduced-motion: no-preference) {
  .dd-ghost { animation: dd-tear .62s cubic-bezier(.45, 0, .7, .4) forwards; }
  .dc-answer.dd-fresh { animation: dd-settle .42s ease-out; }
}
@keyframes dd-tear {
  0% { transform: none; opacity: 1; }
  18% { transform: rotate(-3deg) translate(-2px, -3px); opacity: 1; }
  100% { transform: rotate(-17deg) translate(-40px, 150px); opacity: 0; }
}
@keyframes dd-settle {
  from { transform: translateY(-3px); }
  to { transform: none; }
}

/* ---------- The moon, engraved ----------
   The unlit part is a cross-hatched woodcut shade, the lit part paper with a
   little stipple. The patterns live in one hidden <svg> that site.js adds
   only on pages that draw a moon; without it the plain fills below stand. */
.dc-disc .unlit { fill: var(--moon-shade); fill: url(#dd-hatch) var(--moon-shade); }
.dc-disc .lit { fill: var(--moon-lit); fill: url(#dd-stipple) var(--moon-lit); }
.dc-disc .rim { stroke: var(--ink); stroke-width: 1.2; }
.dd-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.dd-defs .h-bg { fill: var(--moon-shade); }
.dd-defs .h-ln { stroke: var(--moon-hatch); stroke-width: 1.1; }
.dd-defs .s-bg { fill: var(--moon-lit); }
.dd-defs .s-dt { fill: var(--moon-stipple); }
#mdisc { filter: drop-shadow(0 0 0 var(--ink)); }

/* ---------- The month: an almanac calendar page ---------- */

.dc-month > h2, .dd-grid-cap { display: flex; align-items: center; gap: .6rem; }
.dc-month > h2::after, .dd-grid-cap::after {
  content: "";
  flex: 1 1 auto;
  max-width: 11rem;
  height: .9rem;
  --orn: url("/art/moon-band.svg");
  color: var(--ink-soft);
  -webkit-mask-position: left center;
          mask-position: left center;
}
.dd-grid-cap { font-size: .74rem; color: var(--ink-soft); }
.dc-grid { gap: 0; border-top: 2px solid var(--ink); border-left: 1px solid var(--line-strong); }
.dc-grid .hd { font-size: .66rem; color: var(--ink-soft); border-bottom: 1px solid var(--ink); border-right: 1px solid var(--line-strong); background: var(--panel); }
.dc-cell { border: 0; border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); border-radius: 0; background: var(--leaf); }
.dc-cell.blank { border-color: var(--line-strong); background: transparent; }
button.dc-cell:hover { background: var(--accent-soft); border-color: var(--line-strong); }
.dc-cell .dnum { font-family: var(--sans); font-size: .74rem; font-weight: 600; color: var(--ink-soft); font-variant-numeric: lining-nums; }
.dc-cell .dd-daynum { font-family: var(--sans); font-variant-numeric: lining-nums; }
.dc-cell .plabel { font-style: italic; font-weight: 600; }
.dc-cell.is-today { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--ink); }
.dc-cell.principal { border-color: var(--line-strong); }
.dc-cell.dd-range { box-shadow: inset 0 -3px 0 var(--fail); }
.dd-ring-mark::after, .dc-cell.principal::after { border-width: 2.5px; }

/* ---------- Folds, readout and tables ---------- */

.dc-working summary { color: var(--ink); font-style: italic; font-weight: 600; }
/* a summary reads as one phrase: block flow, so a wrapped line stays one sentence */
.dc-working summary { display: block; padding: .62rem 0 .5rem; }
.dc-working summary::marker { color: var(--fail); }
.readout { font-family: var(--sans); font-variant-numeric: lining-nums tabular-nums; border-radius: 1px; box-shadow: inset 0 0 0 1px var(--readout-dim); }
.prose table, .dc-working table, .tool-panel table { font-variant-numeric: lining-nums; }
.prose table { border-radius: 0; border: 1px solid var(--line-strong); border-top: 2px solid var(--ink); }
.dc-fine { font-style: italic; }
#dd-link-out { font-family: var(--mono); font-style: normal; font-size: .78rem; }
.dd-byline { font-style: italic; }
.note { border-radius: 1px; border-left-width: 4px; background: var(--leaf); }

/* ---------- Prose: an almanac column ---------- */

.prose h2 { display: flex; flex-direction: column; gap: .25rem; }
.prose h2::after { content: ""; width: 7.5rem; height: .6rem; --orn: url("/art/rule.svg"); color: var(--fail); }
.faq h2::after { margin-bottom: .3rem; }
.faq details { background: var(--leaf); border: 1px solid var(--line-strong); border-radius: 1px; }
.faq summary { display: flex; gap: .6rem; align-items: baseline; font-weight: 700; }
.faq summary::before, .faq details[open] summary::before {
  content: "";
  flex: 0 0 auto;
  width: 1.05rem;
  height: .75rem;
  margin: 0;
  color: var(--fail);
  transition: transform .2s ease-out;
}
.faq details[open] summary::before { transform: rotate(90deg); }
.faq details > div { font-size: .97rem; }

/* The home page's index: an almanac's table of contents, numbered in
   Roman numerals like the chapters of the year. */
.tool-index { counter-reset: dd-toc; }
.tool-index li { counter-increment: dd-toc; display: grid; grid-template-columns: 2.6rem 1fr; column-gap: .4rem; border-top: 1px dotted var(--line-strong); }
.tool-index li::before {
  content: counter(dd-toc, upper-roman) ".";
  grid-row: span 2;
  font-family: var(--display);
  color: var(--fail);
  text-align: right;
  line-height: 1.5;
}
.tool-index a { font-size: 1.05rem; }
.tool-index span { font-style: italic; }

.related ul { list-style: none; padding: 0; }
.related li { margin: .15rem 0; padding-left: 1.5rem; position: relative; }
.related li::before { content: ""; position: absolute; left: 0; top: calc(var(--tap) / 2 - .35rem); width: 1rem; height: .7rem; color: var(--fail); }
.related li a { border: 0; border-radius: 0; padding: 0; background: none; text-decoration: underline; text-decoration-color: var(--fail); font-weight: 700; }
nav.related { display: block; }

/* ---------- Colophon ---------- */

.site-footer { background: var(--panel); border-top: 1px solid var(--ink); box-shadow: 0 -3px 0 -1px var(--panel), 0 -4px 0 -1px var(--ink); }
.site-footer .inner { position: relative; padding-top: 1.9rem; }
.site-footer .inner::before {
  content: "";
  position: absolute;
  top: .55rem;
  left: 50%;
  width: 9rem;
  height: .95rem;
  transform: translateX(-50%);
  --orn: url("/art/moon-band.svg");
  color: var(--ink-soft);
}
.site-footer .promise { font-family: var(--sans); font-style: italic; text-transform: none; letter-spacing: .02em; font-size: .82rem; }

/* ---------- Desktop: room to show off ---------- */

@media (min-width: 561px) {
  .site-header .inner { padding-top: .8rem; padding-bottom: .8rem; align-items: center; }
  .brand { font-size: 1.5rem; }
  .dc-answer { transform: rotate(-.35deg); margin-top: 1.2rem; }
  .dc-answer .dc-big { font-size: clamp(2.2rem, 5vw, 3.1rem); line-height: 1.05; }
  .dc-answer.dd-fresh { animation-name: dd-settle-tilt; }
  @keyframes dd-settle-tilt { from { transform: rotate(-.35deg) translateY(-4px); } to { transform: rotate(-.35deg); } }
}

/* A medallion engraving beside the title, where a wide screen has room. */
@media (min-width: 900px) {
  main.wrap { position: relative; }
  main.wrap > h1 { max-width: calc(100% - 11rem); }
  main.wrap::before {
    content: "";
    position: absolute;
    top: 1.1rem;
    right: 1.2rem;
    width: 8.6rem;
    height: 8.6rem;
    -webkit-mask: url("/art/medallion.svg") center / contain no-repeat;
            mask: url("/art/medallion.svg") center / contain no-repeat;
    background-color: var(--ink-soft);
    transform: rotate(-6deg);
    pointer-events: none;
  }
}

/* ---------- Phone: the answer stays in the first screen ---------- */

@media (max-width: 560px) {
  body { font-size: 1rem; }
  .site-header .inner { align-items: center; }
  .brand { font-size: 1.18rem; }
  .brand .brand-mark { width: 20px; height: 20px; }
  .dd-nav-btn { font-family: var(--sans); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .74rem; border: 1px solid var(--ink); border-radius: 1px; box-shadow: 0 2px 0 var(--ink); background: var(--leaf); }
  .site-header .site-nav { background: var(--panel); border: 1px solid var(--ink); border-radius: 1px; box-shadow: 0 8px 18px -8px var(--shadow); outline: 1px solid var(--line); outline-offset: -4px; }
  .site-header .site-nav a { padding: 0 .6rem; }
  h1 { font-size: 1.08rem; line-height: 1.14; }
  .eyebrow { font-size: .78rem; line-height: 1.3; }
  .eyebrow::before, .eyebrow::after { width: .9rem; height: .65rem; }
  .tool-panel { outline-offset: -4px; padding: .55rem; }
  .dc-field > span { font-size: .64rem; }
  /* (.tool-panel scoped so it outranks the route sheets' tighter padding:
     the leaf's torn edge and band need their 9px on every route) */
  .tool-panel .dc-answer { padding: calc(.3rem + 9px) .55rem .32rem; }
  .dc-answer .dc-big { line-height: 1.08; }
  .dc-answer .dc-sub { line-height: 1.32; letter-spacing: -.005em; }
  main .today-strip { font-family: var(--sans); font-size: .74rem; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: .2rem; }
  .dd-actions .btn { font-size: .92rem; padding: .45rem .4rem; }
  .prose h2 { font-size: 1.28rem; }
  .tool-index li { grid-template-columns: 2.3rem 1fr; }
}

/* ---------- Every page, not only the tools ----------
   The colophon sits at the foot of the sheet on a short page (404, legal)
   instead of floating mid-screen over bare stock. */
@media screen {
  body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
  body > main { flex: 1 0 auto; width: 100%; }
}

/* Reading pages (guides, method, about, legal): a drop initial opens the
   first column, and a fleuron closes the page like an almanac chapter. */
body:not(.dd-tool) main > .prose:first-of-type > p:first-of-type::first-letter {
  float: left;
  font-family: var(--display);
  font-size: 3.35em;
  line-height: .82;
  margin: .1em .12em 0 0;
  color: var(--fail);
}
body:not(.dd-tool) main.wrap::after {
  content: "";
  display: block;
  width: 2.4rem;
  height: 1.3rem;
  margin: 2.2rem 0 0 calc(min(46rem, 100%) / 2 - 1.2rem);
  -webkit-mask: url("/art/fleuron.svg") center / contain no-repeat;
          mask: url("/art/fleuron.svg") center / contain no-repeat;
  background-color: var(--fail);
}

/* A hub's list of guides reads as a numbered contents page, like the
   home page's index. */
.prose:has(> h3 > a) { counter-reset: dd-guide; }
.prose:has(> h3 > a) > h3 {
  counter-increment: dd-guide;
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  column-gap: .5rem;
  align-items: baseline;
  margin-top: 1.5rem;
  padding-top: .7rem;
  border-top: 1px dotted var(--line-strong);
}
.prose:has(> h3 > a) > h3::before {
  content: counter(dd-guide, upper-roman) ".";
  font-family: var(--display);
  font-style: normal;
  font-weight: 400;
  color: var(--fail);
  text-align: right;
}
.prose:has(> h3 > a) > h3 + p { margin-left: 2.9rem; }

/* Related links keep their label and gloss on one running line; the
   padding keeps the tap area without breaking the line. */
.related li a { display: inline; min-height: 0; padding-block: .6rem; }
.related li { line-height: 1.5; padding-block: .35rem; }
.related li::before { top: .72rem; }

/* The 404 is a blank leaf torn from the pad. */
main.wrap.prose { max-width: var(--maxw); }
.dd-leaf {
  position: relative;
  isolation: isolate;
  max-width: 34rem;
  margin: 1.4rem 0 0;
  padding: calc(1.2rem + 9px) 1.3rem 1.2rem;
  filter: drop-shadow(0 1px 0 var(--line-strong)) drop-shadow(0 2px 0 var(--leaf)) drop-shadow(0 1px 0 var(--line-strong)) drop-shadow(0 7px 8px var(--shadow));
}
.dd-leaf::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle, var(--line-strong) 0 1px, transparent 1.4px) 0 9px / 7px 4px repeat-x,
    linear-gradient(var(--fail), var(--fail)) 0 4px / 100% 3px no-repeat,
    var(--leaf);
  -webkit-mask:
    conic-gradient(from -45deg at 50% 100%, #000 90deg, transparent 0) 0 0 / 8px 4px repeat-x,
    linear-gradient(#000, #000) 0 4px / 100% calc(100% - 4px) no-repeat;
          mask:
    conic-gradient(from -45deg at 50% 100%, #000 90deg, transparent 0) 0 0 / 8px 4px repeat-x,
    linear-gradient(#000, #000) 0 4px / 100% calc(100% - 4px) no-repeat;
}
.dd-leaf h1 { margin-top: 0; }
.dd-leaf p:last-child { margin-bottom: 0; }
@media (min-width: 561px) { .dd-leaf { transform: rotate(-.35deg); } }

@media (max-width: 560px) {
  /* The tight 1.08rem title is for the tools' answer-first screen; a page
     you read keeps a real headline. */
  body:not(.dd-tool) h1 { font-size: 1.75rem; line-height: 1.1; margin-bottom: .4rem; }
  body:not(.dd-tool) .eyebrow { margin-bottom: .3rem; }
  .prose:has(> h3 > a) > h3 { grid-template-columns: 2rem 1fr; }
  .prose:has(> h3 > a) > h3 + p { margin-left: 2.5rem; }
  .dd-leaf { padding: calc(.9rem + 9px) 1rem 1rem; }
  /* Caslon sets wider than the old sans: working tables close up so they
     scroll sideways no more than they did before. */
  .dc-working th, .tool-panel thead th { letter-spacing: .02em; }
  .dc-working th, .dc-working td { padding-left: .3rem; padding-right: .3rem; }
  /* the colophon's links share rows evenly instead of leaving gaps */
  .site-footer .inner { column-gap: 1.1rem; row-gap: 0; }
}

/* Reduced motion: the buttons and FAQ fleurons change state without moving. */
@media (prefers-reduced-motion: reduce) {
  .btn, .faq summary::before { transition: none; }
  .btn:active { transform: none; }
}

/* ---------- Print: ink on white, no stock, no tear ---------- */

@media print {
  body { background: #fff; background-image: none; }
  .site-header, .site-footer { box-shadow: none; }
  .tool-panel { outline: 0; box-shadow: none; border: 0; padding: 0; }
  .dc-answer { filter: none; transform: none; border: 1px solid var(--line); }
  .dc-answer::before { background: none; -webkit-mask: none; mask: none; }
  .dc-answer::after, .dd-ghost, .brand::after { display: none; }
  .btn { box-shadow: none; }
  body { font-size: 9.5pt; line-height: 1.3; }
  .tool-panel .dc-answer { padding: .4rem .7rem; }
  .dc-answer .dc-big { font-size: 17pt; }
  .dd-tool h1 { font-size: 14pt; line-height: 1.1; }
  .eyebrow::before, .eyebrow::after, .dc-month > h2::after, .dd-grid-cap::after, .prose h2::after, .site-footer .inner::before, main.wrap::before, main.wrap::after { display: none; }
  .dc-grid .hd { padding: 0; }
  /* Caslon sets wider than the old sans: printed tables close up a little
     so a long one (34 rows) still prints a row to a line, on one page. */
  .tool-panel table { letter-spacing: -.015em; line-height: 1.2; }
  .tool-panel td { white-space: nowrap; }
  .dc-cell .dnum, .dc-cell .dd-daynum { font-size: 8pt; }
}