/* Riso Month Sheet — the world.
   Two drums per month (set as --ink1/--ink2 by app.js), warm paper,
   multiply overprint, grain on every pixel. */

@font-face {
  font-family: "Karrik";
  src: url("fonts/Karrik-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Karrik";
  src: url("fonts/Karrik-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --paper: #f4efe3;
  --ink1: #ff48b0;
  --ink2: #3d5588;
  --ink-black: #262019;
  /* --text is picked per month by app.js: paper knockout on dark fields,
     print-black pass on light ones */
  --text: var(--ink-black);
  --text-blend: multiply;
  --hairline: 1px solid currentColor;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  background: var(--paper);
  font-family: "Karrik", "Helvetica Neue", sans-serif;
  overflow: hidden;
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
}

::selection { background: var(--ink2); color: var(--paper); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.sheet {
  position: fixed; inset: 0;
  color: var(--text);
}

/* ---- the printed field ---- */

.field {
  position: absolute; inset: 0;
  background: var(--ink1);
}

/* uneven roller coverage — big soft turbulence, barely there */
.field-tone {
  position: absolute; inset: -10%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0035' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.6 0 0 0 0'/%3E%3C/filter%3E%3Crect width='900' height='900' filter='url(%23t)'/%3E%3C/svg%3E");
  background-size: 140vmax 140vmax;
  mix-blend-mode: soft-light;
  opacity: .5;
  pointer-events: none;
}

/* gradient fill mode: ink 2 arrives through a true halftone screen —
   stepped dot-size bands gathering to solid in the top-right corner,
   away from every text block */
.halftone {
  position: absolute; inset: 0;
  overflow: hidden;
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity .8s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
.sheet[data-fill="gradient"] .halftone { opacity: 1; }
.halftone .ramp {
  position: absolute;
  right: -12%; top: -16%;
  width: 130%; height: 115%;
  transform: rotate(-10deg);
  transform-origin: top right;
}
.halftone .band { width: 100%; }

/* ink bleed along the sheet edges */
.bleed {
  position: absolute; inset: 0;
  box-shadow: inset 0 0 14vmin rgba(0,0,0,.14);
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* paper grain over everything: dark tooth… */
.grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.4 0 0 0 0 0.38 0 0 0 0 0.34 0 0 0 1.3 -0.42'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 260px 260px;
  mix-blend-mode: multiply;
  opacity: .5;
  pointer-events: none;
}

/* …and paper-white speckle where the ink missed */
.speckle {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='2' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 0.96 0 0 0 0 0.94 0 0 0 0 0.9 0 0 0 2.4 -1.5'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23s)'/%3E%3C/svg%3E");
  background-size: 300px 300px;
  mix-blend-mode: screen;
  opacity: .5;
  pointer-events: none;
}

/* ---- masthead ---- */

.masthead {
  position: absolute;
  top: clamp(1.6rem, 4.5vmin, 4rem);
  left: clamp(1.8rem, 5vmin, 4.5rem);
  mix-blend-mode: var(--text-blend);
}
.mast-row { display: flex; align-items: center; gap: clamp(.8rem, 1.8vmin, 1.6rem); }
.flip { display: flex; gap: .35rem; }
.flip button {
  display: grid; place-items: center;
  width: 1.9rem; height: 1.9rem;
  background: none; border: none;
  color: var(--text);
  opacity: .3;
  cursor: pointer;
  transition: opacity .2s ease-out;
}
.flip button:hover, .flip button:focus-visible { opacity: .9; }
.flip button:focus-visible { outline: 2px solid var(--ink2); outline-offset: 2px; }
.backtoday {
  margin-top: .8em;
  background: none; border: none;
  font: inherit;
  font-style: italic;
  font-size: clamp(.78rem, 1.55vmin, 1.15rem);
  letter-spacing: .09em;
  color: var(--text);
  opacity: .75;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  cursor: pointer;
  padding: 0;
}
.backtoday:hover { opacity: 1; }
.backtoday:focus-visible { outline: 2px solid var(--ink2); outline-offset: 3px; }
.month {
  font-size: clamp(1.6rem, 4.6vmin, 4.2rem);
  font-weight: 400;
  letter-spacing: .045em;
  text-transform: uppercase;
  line-height: 1;
}
.edition {
  margin-top: .55em;
  font-style: italic;
  font-size: clamp(.78rem, 1.55vmin, 1.15rem);
  letter-spacing: .09em;
}

/* ---- the numeral ---- */

.numeral {
  position: absolute;
  top: 50%; left: 58%;
  transform: translate(-50%, -54%);
  font-size: 62vmin;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
/* knockout numeral: ink 2 printed into a numeral-shaped gap in the field,
   slightly off register — overprint sliver leading, paper sliver trailing */
.numeral .print {
  position: relative;
  color: var(--numeral-ink, var(--ink2));
  text-shadow:
    .013em .01em 0 var(--numeral-over, var(--ink2)),
    -.011em -.009em 0 var(--paper);
  filter: url(#tooth); /* ink spread at the glyph edge — reads printed, not vector */
}

/* midnight: the new numeral soaks in like fresh ink */
@keyframes soak {
  0%   { opacity: 0; filter: blur(10px) contrast(.55) saturate(1.6); }
  55%  { opacity: 1; filter: blur(2.5px) contrast(.8) saturate(1.25); }
  100% { opacity: 1; filter: blur(0) contrast(1) saturate(1); }
}
.numeral.soaking { animation: soak 1.7s cubic-bezier(.16,1,.3,1) both; }

/* month change: the whole sheet feeds through the printer */
@keyframes feed {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0% 0); }
}
.sheet.feeding > *:not(.grain) { animation: feed 1.4s cubic-bezier(.6,.04,.3,1) both; }

/* ---- mini calendar ---- */

.minical {
  position: absolute;
  left: clamp(1.8rem, 5vmin, 4.5rem);
  bottom: clamp(4.6rem, 11vmin, 8.5rem);
  border-collapse: collapse;
  font-size: clamp(.72rem, 1.5vmin, 1.05rem);
  letter-spacing: .06em;
  mix-blend-mode: var(--text-blend);
}
.minical th, .minical td {
  width: 2.3em; height: 1.9em;
  text-align: center;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.minical thead th {
  font-style: italic;
  border-bottom: var(--hairline);
}
.minical td { position: relative; }
.minical td.today .stamp {
  position: absolute;
  inset: -8% 4% -2% 6%;
  pointer-events: none;
}
.minical td.today .stamp ellipse {
  fill: none;
  stroke: var(--stamp, var(--ink2));
  stroke-width: 1.8;
  mix-blend-mode: var(--stamp-blend, multiply);
  transform: rotate(-4deg);
  transform-origin: center;
}

/* ---- brief strip ---- */

.brief {
  position: absolute;
  left: clamp(1.8rem, 5vmin, 4.5rem);
  right: clamp(1.8rem, 5vmin, 4.5rem);
  bottom: clamp(1.6rem, 4.5vmin, 3.6rem);
  padding-top: .7em;
  border-top: var(--hairline);
  font-size: clamp(.76rem, 1.55vmin, 1.1rem);
  letter-spacing: .05em;
  mix-blend-mode: var(--text-blend);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brief em { font-style: italic; }
.brief .sep { padding: 0 .55em; opacity: .55; }
.brief a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  transition: text-decoration-color .2s ease-out;
}
.brief a:hover, .brief a:focus-visible { text-decoration-color: currentColor; }
.brief a:focus-visible { outline: 2px solid var(--ink2); outline-offset: 2px; }

/* ---- settings: the registration mark ---- */

.settings {
  position: absolute;
  right: clamp(1.2rem, 3vmin, 2.6rem);
  bottom: clamp(1.2rem, 3vmin, 2.6rem);
}
.regmark {
  display: grid; place-items: center;
  width: 2.6rem; height: 2.6rem;
  background: none; border: none;
  color: var(--text);
  mix-blend-mode: var(--text-blend);
  opacity: .34;
  cursor: pointer;
  transition: opacity .25s ease-out, transform .25s ease-out;
}
.regmark:hover, .regmark:focus-visible { opacity: .9; transform: rotate(90deg); }
.regmark:focus-visible { outline: 2px solid var(--ink2); outline-offset: 3px; }

.panel {
  position: absolute;
  right: 0; bottom: 3.1rem;
  min-width: 15rem;
  background: var(--paper);
  color: var(--ink-black);
  border: 1px solid var(--ink-black);
  box-shadow: 0.45rem 0.6rem 1.6rem rgba(30, 24, 16, .28);
  padding: 1rem 1.1rem 1.1rem;
  font-size: .82rem;
  letter-spacing: .04em;
}
.panel-title {
  font-style: italic;
  border-bottom: 1px solid var(--ink-black);
  padding-bottom: .5em;
  margin-bottom: .75em;
}
.panel fieldset {
  border: none;
  display: flex; align-items: baseline; gap: .4rem;
  margin-bottom: .55em;
}
.panel legend {
  float: left;
  width: 4.6rem;
  text-transform: uppercase;
  font-size: .68rem;
  letter-spacing: .14em;
  padding-top: .32em;
}
.panel button {
  font: inherit;
  background: none;
  border: 1px solid var(--ink-black);
  color: var(--ink-black);
  padding: .28em .7em;
  cursor: pointer;
  transition: background .15s ease-out, color .15s ease-out;
}
.panel button:hover { background: rgba(38, 32, 25, .08); }
.panel button:focus-visible { outline: 2px solid var(--ink2); outline-offset: 2px; }
.panel button[aria-pressed="true"] {
  background: var(--ink-black);
  color: var(--paper);
}

/* ---- layouts ---- */

.sheet[data-layout="corner"] .numeral {
  font-size: 38vmin;
  top: auto; left: auto;
  right: 6vmin; bottom: 14vmin;
  transform: none;
}
.sheet[data-layout="corner"] .masthead {
  top: auto;
  bottom: clamp(4.6rem, 11vmin, 8.5rem);
  left: clamp(1.8rem, 5vmin, 4.5rem);
}
.sheet[data-layout="corner"] .minical {
  bottom: auto;
  top: clamp(1.6rem, 4.5vmin, 4rem);
}

.sheet[data-layout="grid"] .numeral { display: none; }
.sheet[data-layout="grid"] .minical {
  left: 50%; bottom: auto; top: 52%;
  transform: translate(-50%, -50%);
  font-size: clamp(1rem, 3.4vmin, 2.6rem);
}
.sheet[data-layout="grid"] .minical th,
.sheet[data-layout="grid"] .minical td { width: 2.6em; height: 2.1em; }
.sheet[data-layout="grid"] .minical td.today .stamp ellipse { stroke-width: 2.8; }

/* narrow sheets (phone exports): the numeral centers and breathes */
@media (orientation: portrait) {
  .numeral { font-size: 50vmin; left: 50%; }
  .minical { bottom: clamp(5.6rem, 14vmin, 10rem); }
}