@import url("https://fonts.googleapis.com/css2?family=Tomorrow:wght@400;500;600&family=IBM+Plex+Sans+Condensed:wght@500;600&family=IBM+Plex+Serif:ital,wght@0,400;0,500;0,600;1,400;1,500&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap");

/* Deprecation — the archive of a trilogy. Pages take their age (data-theme: jobbagy | flesh | mycelial). Values come from tokens.css. */
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-serif); }

/* ---------- photocopy grain (Wanted) ---------- */
.dp-page, .dp-doc, .dp-cover {
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
[data-theme="mycelial"] .dp-page, [data-theme="mycelial"].dp-page, [data-theme="mycelial"] .dp-doc, [data-theme="mycelial"].dp-doc, [data-theme="mycelial"] .dp-cover, [data-theme="mycelial"].dp-cover {
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- Page: a story page, in its age ---------- */
.dp-page {
  --fs: 18px; --lh: var(--baseline);
  container-type: inline-size; overflow-x: clip;
  background: var(--paper) var(--grain); color: var(--ink);
  font-family: var(--font-serif); font-size: var(--fs); line-height: var(--lh); font-weight: 400;
  font-kerning: normal; font-feature-settings: "kern" 1, "liga" 1; font-synthesis: none;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.dp-page *, .dp-page *::before, .dp-page *::after { box-sizing: border-box; }
.dp-page__inner { display: flow-root; max-width: var(--page-max); margin: 0 auto; padding: var(--space-6) var(--space-3) var(--space-7); }
.dp-page__inner > * { max-width: var(--measure); margin-inline: auto; }
.dp-page__inner > .dp-wide { max-width: none; }
/* islands mounted into a static page sit inside a display: contents host; keep them in the column */
.dp-page__inner > div[style*="contents"] > :not(.dp-wide) { max-width: var(--measure); margin-inline: auto; }
.dp-page figure { margin-inline: 0; }
.dp-page__inner > figure:not(.dp-wide) { margin-inline: auto; }
.dp-page__inner > p { margin-block: 0; text-wrap: pretty; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 6 3 2; }
.dp-page__inner > p + p { text-indent: 1.4em; }
@container (min-width: 32rem) { .dp-page__inner > p { text-align: justify; text-justify: inter-word; } }
.dp-page__inner > h2 { margin: calc(var(--lh) * 2) auto calc(var(--lh) / 2); font: 500 22px/30px var(--font-heading); text-wrap: balance; }
.dp-page__inner > h3 { margin: var(--lh) auto 0; font: 500 11px/14px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.dp-page__inner > hr { border: 0; height: 30px; margin: var(--space-5) auto; background: radial-gradient(circle, var(--ink) 0 4px, transparent 4.5px) center / 30px 30px repeat-x; max-width: 6rem; }
.dp-page em, .dp-page i { font-style: italic; }
.dp-page strong, .dp-page b { font-weight: 700; }
.dp-page a { color: inherit; text-decoration-color: var(--accent-text); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.dp-page :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.dp-note { display: block; margin: var(--space-3) auto !important; padding-left: var(--space-3); border-left: 2px solid var(--accent); font: italic 400 15px/22px var(--font-serif); color: var(--ink-soft); }
.dp-label { font: 500 11px/14px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }

/* ---------- Cover: the Ellis cover ---------- */
.dp-cover { color: var(--ink); position: relative; overflow: hidden; margin: 0 calc(50% - 50cqw) var(--space-7) !important; max-width: none !important; min-height: 36rem; padding: var(--space-6) max(var(--space-4), calc(50cqw - 50% + var(--space-4))); background: var(--paper) var(--grain); display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-4); }
.dp-cover__index { font: 400 56px/1 var(--font-mono); letter-spacing: -.02em; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.dp-cover__title { position: relative; align-self: end; margin: 0; font: 500 clamp(44px, 7cqw, 88px)/1.05 var(--font-heading); letter-spacing: -.01em; text-wrap: balance; max-width: 11ch; z-index: 1; }
.dp-cover__title .dp-shard { display: block; }
.dp-cover__title--shatter { color: transparent; }
.dp-cover__title--shatter .dp-shard { position: absolute; inset: 0; color: var(--ink); }
.dp-cover__title--shatter .dp-shard:nth-child(1) { position: relative; clip-path: polygon(0 0, 100% 0, 100% 38%, 0 52%); }
.dp-cover__title--shatter .dp-shard:nth-child(2) { clip-path: polygon(0 52%, 100% 38%, 100% 70%, 0 66%); transform: translate(.05em, .03em) rotate(.6deg); }
.dp-cover__title--shatter .dp-shard:nth-child(3) { clip-path: polygon(0 66%, 100% 70%, 100% 100%, 0 100%); transform: translate(-.03em, .07em) rotate(-.4deg); }
.dp-cover__band { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); margin: 0 calc(-1 * max(var(--space-4), calc(50cqw - 50% + var(--space-4)))); padding: 12px max(var(--space-4), calc(50cqw - 50% + var(--space-4))); background: var(--accent); color: var(--on-accent); font: 500 12px/16px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.dp-cover__author { font: 500 12px/16px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.dp-cover__disc { position: absolute; border-radius: var(--radius-round); background: var(--ink); z-index: 0; }
.dp-cover__art { position: absolute; inset: 0 0 0 auto; width: 52%; z-index: 0; }
.dp-cover__art img { width: 100%; height: 100%; object-fit: cover; }
@container (max-width: 40rem) { .dp-cover__art { width: 100%; opacity: .35; } .dp-cover__index { font-size: 56px; } }

/* ---------- Title (inside a page) ---------- */
.dp-title { margin-bottom: var(--space-6) !important; }
.dp-title__kicker { margin: 0 0 var(--space-2); }
.dp-title__h { margin: 0; font: 500 36px/42px var(--font-heading); letter-spacing: -.005em; text-wrap: balance; }
.dp-title__deck { margin: var(--space-3) 0 0; font-style: italic; color: var(--ink-soft); }

/* ---------- Artifact: a found document ---------- */
.dp-doc { position: relative; margin: var(--space-5) auto !important; max-width: var(--doc-measure) !important; padding: var(--space-4); background: var(--paper-2) var(--grain); color: var(--ink); font: 400 14px/22px var(--font-mono); box-shadow: 0 0 0 1px var(--rule); }
.dp-doc::before { content: ""; position: absolute; top: 14px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: var(--radius-round); background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); }
.dp-doc__head { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--space-2) var(--space-4); padding: var(--space-3) 0; margin: var(--space-3) 0 var(--space-4); border-block: 1.5px solid var(--ink); }
.dp-doc__head div { display: grid; gap: 2px; }
.dp-doc__head dt { font: 500 11px/14px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.dp-doc__head dd { margin: 0; font-weight: 600; }
.dp-doc__no { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.dp-doc__no b { font: 400 40px/1 var(--font-mono); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.dp-doc__kind { font: 500 14px/18px var(--font-heading); letter-spacing: .08em; text-transform: uppercase; text-align: right; }
.dp-doc__body p { margin: 0 0 var(--space-3); }
.dp-doc__body p:last-child { margin-bottom: 0; }
.dp-doc__body ol, .dp-doc__body ul { margin: 0 0 var(--space-3); padding-left: 2.2em; }
.dp-doc__notes { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px dashed var(--rule); font: italic 400 15px/22px var(--font-serif); color: var(--ink-soft); }
.dp-doc__notes p { margin: 0 0 var(--space-2); }
.dp-redact { background: var(--redact); color: transparent; padding: 0 .15em; box-decoration-break: clone; -webkit-box-decoration-break: clone; user-select: none; }
button.dp-redact { font: inherit; border: 0; cursor: pointer; }
button.dp-redact[aria-pressed="true"] { background: transparent; color: var(--accent-text); text-decoration: line-through; text-decoration-thickness: 2px; user-select: text; }
.dp-stamp { display: inline-block; padding: 5px 9px 4px; border: 2px solid var(--accent-text); color: var(--accent-text); font: 600 13px/16px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; transform: rotate(-1.5deg); opacity: .9;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -2.4 1.9'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -2.4 1.9'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.dp-doc--stamped .dp-doc__notes { padding-right: 10rem; }
.dp-doc--stamped { padding-bottom: calc(var(--space-4) + 20px); }
.dp-doc > .dp-stamp { position: absolute; right: var(--space-4); bottom: var(--space-4); transform: rotate(-1.5deg); }

/* ---------- ArtifactBox: the box the reader opens ---------- */
.dp-box { margin-block: var(--space-5) !important; }
.dp-box__filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-3); }
.dp-chip { font: 500 11px/14px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; padding: 7px 10px; border: 1.5px solid var(--ink); border-radius: var(--radius-0); background: transparent; color: var(--ink); cursor: pointer; }
.dp-chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.dp-box__list { margin: 0; padding: 0; list-style: none; border-top: 1.5px solid var(--ink); }
.dp-box__item { border-bottom: 1px solid var(--rule); background: var(--paper); color: var(--ink); padding-inline: var(--space-3); }
.dp-box__item + .dp-box__item { margin-top: 2px; }
.dp-box__tab { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; gap: var(--space-3); align-items: baseline; width: 100%; padding: var(--space-3) 0; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.dp-box__tab b { font: 400 22px/1 var(--font-mono); letter-spacing: -.01em; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.dp-box__tab span { font: 500 18px/1.2 var(--font-heading); }
.dp-box__tab small { font: 500 11px/14px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.dp-box__tab:hover span, .dp-box__tab[aria-expanded="true"] span { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.dp-box__open { padding: 0 0 var(--space-4); }
/* static boxes: <details name="…"> items with a <summary> tab */
summary.dp-box__tab { list-style: none; }
summary.dp-box__tab::-webkit-details-marker { display: none; }
details[open] > summary.dp-box__tab span { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.dp-box__item[hidden] { display: none; }
.dp-box__open > .dp-doc { margin-top: 0 !important; }
.dp-box__agebar { display: inline-block; width: 10px; height: 10px; margin-right: 6px; background: var(--accent); vertical-align: 1px; }

/* ---------- Ledger: logs, inventories, cost sheets ---------- */
.dp-ledger { margin-block: var(--space-5) !important; overflow-x: auto; }
.dp-ledger table { width: 100%; border-collapse: collapse; font: 400 14px/20px var(--font-mono); font-variant-numeric: tabular-nums; }
.dp-ledger caption { caption-side: top; text-align: left; padding-bottom: var(--space-2); font: 500 18px/24px var(--font-heading); }
.dp-ledger th { text-align: left; padding: 6px 10px; border-bottom: 1.5px solid var(--ink); font: 500 11px/14px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.dp-ledger td { padding: 6px 10px; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.dp-ledger td.n, .dp-ledger th.n { text-align: right; }
.dp-ledger tr.is-struck td { color: var(--ink-soft); text-decoration: line-through; text-decoration-color: var(--accent-text); text-decoration-thickness: 2px; }
.dp-ledger tfoot td { border-top: 1.5px solid var(--ink); border-bottom: 0; font-weight: 600; }
.dp-ledger figcaption { margin-top: var(--space-2); font: italic 400 15px/22px var(--font-serif); color: var(--ink-soft); }

/* ---------- Blinks: three-blinks compression, as comic panels ---------- */
.dp-blinks { margin-block: var(--space-5) !important; }
.dp-blinks__strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dp-panel { position: relative; min-height: 15rem; padding: var(--space-4) var(--space-3) var(--space-3); border: 1.5px solid var(--ink); background: var(--paper); display: flex; flex-direction: column; justify-content: flex-end; }
.dp-panel__cap { position: absolute; top: -1.5px; left: -1.5px; max-width: 85%; padding: 5px 9px; background: var(--accent); color: var(--on-accent); font: 500 11px/15px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.dp-panel__text { margin: 0; font: 400 17px/26px var(--font-serif); }
.dp-panel__img { position: absolute; inset: 0; z-index: 0; }
.dp-panel__img img { width: 100%; height: 100%; object-fit: cover; filter: var(--plate-filter); opacity: .5; }
.dp-panel > :not(.dp-panel__img) { position: relative; z-index: 1; }
.dp-blinks--blink .dp-blinks__strip { grid-template-columns: 1fr; }
.dp-blinks__stage { position: relative; }
.dp-blinks__flash { position: absolute; inset: 0; background: var(--ink); opacity: 0; pointer-events: none; transition: opacity .09s linear; z-index: 2; }
.dp-blinks__flash.is-on { opacity: 1; }
.dp-blinks__bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }
.dp-button { font: 500 11px/14px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; padding: 8px 12px; border: 1.5px solid var(--ink); border-radius: var(--radius-0); background: transparent; color: var(--ink); cursor: pointer; }
.dp-button:hover { background: var(--ink); color: var(--paper); }
.dp-blinks figcaption, .dp-plate figcaption, .dp-field figcaption { font: 500 11px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
@container (max-width: 44rem) { .dp-blinks__strip { grid-template-columns: 1fr; } }

/* ---------- Plate: a recovered scientific plate, toned by age ---------- */
.dp-page, [data-theme] { --plate-filter: grayscale(1) sepia(.55) contrast(1.05); }
[data-theme="flesh"] { --plate-filter: grayscale(1) sepia(.2) hue-rotate(175deg) saturate(.55) contrast(1.12) brightness(1.03); }
[data-theme="mycelial"] { --plate-filter: grayscale(1) sepia(.85) contrast(1.3) brightness(.78); }
.dp-plate { margin-block: var(--space-5) !important; }
.dp-plate__frame { position: relative; overflow: hidden; padding: 14px; background: var(--paper-2); box-shadow: 0 0 0 1px var(--rule); }
.dp-plate__frame img, .dp-plate__ph { display: block; width: 100%; height: auto; aspect-ratio: var(--ratio, 4 / 3); object-fit: cover; filter: var(--plate-filter); background: var(--ink-soft); }
.dp-plate__damage { position: absolute; inset: 14px; pointer-events: none; mix-blend-mode: multiply;
  background:
    radial-gradient(circle at 18% 22%, rgba(120, 80, 30, .35) 0 6px, transparent 22px),
    radial-gradient(circle at 74% 64%, rgba(120, 80, 30, .3) 0 4px, transparent 16px),
    radial-gradient(circle at 86% 14%, rgba(120, 80, 30, .25) 0 3px, transparent 12px),
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(60, 40, 15, .35) 100%),
    linear-gradient(104deg, transparent 47.8%, rgba(255, 255, 255, .5) 48%, transparent 48.3%),
    linear-gradient(81deg, transparent 71.6%, rgba(255, 255, 255, .35) 71.8%, transparent 72%); }
[data-theme="mycelial"] .dp-plate__damage { mix-blend-mode: screen; }
.dp-plate__no { position: absolute; top: 22px; left: 24px; font: 500 11px/14px var(--font-mono); letter-spacing: .1em; color: #f1e9d6; mix-blend-mode: difference; }
.dp-plate figcaption { margin-top: var(--space-2); }
.dp-plate figcaption span { display: block; margin-top: 4px; font: italic 400 15px/22px var(--font-serif); letter-spacing: 0; text-transform: none; }

/* ---------- Dissolve: prose becoming pattern ---------- */
.dp-dissolve { margin-block: var(--space-4) !important; font: 400 18px/30px var(--font-serif); text-wrap: pretty; }
.dp-dissolve .g { display: inline-block; width: .55em; text-align: center; color: var(--accent-text); font-family: var(--font-mono); }
.dp-dissolve .h { color: var(--ink-soft); }

/* ---------- Field ---------- */
.dp-field { margin-block: var(--space-5) !important; }
.dp-field canvas, .dp-field__ph { display: block; width: 100%; height: auto; aspect-ratio: var(--ratio, 16 / 9); background: var(--paper-2); touch-action: pan-y; }
.dp-field figcaption { margin-top: var(--space-2); }