/* Art themes — the shared world for every style in styles.js.

   THESIS: the month is a printed artwork; the calendar is the gallery label in
   its quiet corner. The art carries the whole composition, so this file's only
   real job is to get out of its way and keep the label readable on top of it.

   Scoped to body.art-theme (set by themes/art.js) rather than a per-style
   selector, because the styles are data now — there is no fixed list of slugs to
   write selectors against, and a new style must need no CSS at all.

   Replaces gesture.css / rothko.css / titlecard.css. Retired 2026-08-31. */

body.art-theme {
  --art-paper: #EDE6D2;
  /* --art-image, --art-ground and --art-ink are set by themes/art.js */
}

/* riso's ink vocabulary — halftone, speckle, tone wash, bleed, grain, weave,
   overprint seam — belongs to a printed two-drum sheet. These are photographs
   and paintings; they carry their own texture and grain already. */
body.art-theme .halftone,
body.art-theme .speckle,
body.art-theme .field-tone,
body.art-theme .bleed,
body.art-theme .grain,
body.art-theme .weave,
body.art-theme .seam {
  display: none;
}

/* ---- the artwork ---- */

body.art-theme .field {
  background-color: var(--art-ground, var(--art-paper));
  background-image: var(--art-image, none);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* A month with no art falls back to its own flat ground above rather than a
   broken sheet — the label still stands on something complete. */

/* Caption scrim. gesture could assume a cream calm corner because every asset
   was commissioned with one; a style catalog can't promise that, and glaze in
   particular is dense right into the corner. A soft wash of the caption's own
   ink, anchored where the label sits, buys contrast without reading as a box.
   Lives on .field::after so it sits over the art and under every text block. */
body.art-theme .field::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 62% 52% at 8% 96%,
    color-mix(in srgb, var(--art-ground) 62%, transparent) 0%,
    transparent 68%
  );
}
body.art-theme .sheet[data-surface="lock"] .field::after { display: none; }

body.art-theme .sheet {
  color: var(--art-ink, #2A241C);
}

/* ---- the label: month over the mini grid, gathered low-left, never louder
   than the artwork behind it ---- */

body.art-theme .masthead {
  top: auto;
  left: clamp(1.7rem, 5vmin, 4.2rem);
  bottom: 22vmin;
  mix-blend-mode: normal;
}
body.art-theme .month {
  font-size: clamp(.72rem, 1.5vmin, 1.05rem);
  font-weight: 400;
  letter-spacing: .3em;
  opacity: .92;
}

/* These sheets are month artifacts — the giant day numeral is riso's live-sheet
   expression, and the mini grid already marks today on the live page. */
body.art-theme .numeral,
body.art-theme .flip,
body.art-theme .edition,
body.art-theme .backtoday {
  display: none;
}

body.art-theme .minical {
  left: clamp(1.7rem, 5vmin, 4.2rem);
  bottom: clamp(1.6rem, 5vmin, 4rem);
  font-size: clamp(.62rem, 1.15vmin, .85rem);
  letter-spacing: .07em;
  mix-blend-mode: normal;
}
body.art-theme .minical thead th { opacity: .62; }
body.art-theme .minical caption { display: none; }
/* today reads by weight alone — the misregistered ink stamp is a print idea */
body.art-theme .minical td.today .stamp { display: none; }
body.art-theme .minical td.today { font-weight: 600; }

body.art-theme .brief { mix-blend-mode: normal; }

/* ---- settings: the registration mark carries the caption ink ---- */

body.art-theme .regmark {
  color: var(--art-ink);
  mix-blend-mode: normal;
  opacity: .32;
}
body.art-theme .regmark:hover,
body.art-theme .regmark:focus-visible { opacity: .85; }
body.art-theme .panel,
body.art-theme .panel-title,
body.art-theme .panel button,
body.art-theme .panel-nav {
  color: var(--art-ink);
  border-color: var(--art-ink);
}
body.art-theme .panel button[aria-pressed="true"] {
  background: var(--art-ink);
  color: var(--art-ground, var(--art-paper));
}

/* fill param: an artwork is the whole field either way, so flat/gradient is
   inert here rather than broken */

/* narrow sheets (phone exports): keep the label anchored, tighten the stack so
   it clears the bottom margin on very tall crops */
@media (orientation: portrait) {
  body.art-theme .masthead { bottom: 26vmin; }
  body.art-theme .minical { bottom: clamp(1.6rem, 4vmin, 3.2rem); }
}