/* The House Book as a real book (inc/ext/tome.php, assets/js/tome.js).
   An old hardcover: leather boards with gilt tooling, gilt edges, a ribbon, marbled endpapers, a title page with
   the contents, then one chapter a spread, the entry on the left and a photographic plate on the right.
   Sizes inside the book follow the book (container units): --u is one fiftieth of a page. */
.tome { --leaf-ease: cubic-bezier(.45, .05, .22, 1);
	--paper: color-mix(in srgb, var(--calce) 78%, var(--cera-2));
	--paper-2: color-mix(in srgb, var(--calce) 62%, var(--cera-2));
	--edge-a: color-mix(in srgb, var(--calce) 70%, var(--cera-2));
	--edge-b: color-mix(in srgb, var(--pietra) 70%, var(--cera));
	--gilt: var(--cera);
	--gilt-hi: var(--cera-2);
	--gilt-lo: color-mix(in srgb, var(--cera) 62%, var(--umber));
	--leather: var(--umber);
	--leather-dk: var(--noce);
	--ink-soft: color-mix(in srgb, var(--ink) 80%, var(--umber));
	container: tome / inline-size;
	width: min(100%, var(--tome-max, 1000px));
	margin-inline: auto;
	font-family: var(--serif);
}
.tome-stage { --u: 1cqw; position: relative; perspective: 2800px; perspective-origin: 50% 40%; padding: 1.5% 0 5.5%; }
.tome-book { position: relative; width: 100%; aspect-ratio: 1.5; touch-action: pan-y; transform-style: preserve-3d; transition: transform 1.5s cubic-bezier(.55, .05, .25, 1); }
.tome[data-state="closed"] .tome-book { transform: translateX(-25%); }
html:not(.js) .tome[data-state="closed"] .tome-book { transform: none; }
/* everything that lies on the page block is drawn flat, in this order: the back board, the pages, the page that
   turns, the gutter, the thumb index. Only the cover moves in depth, so nothing can slip behind a page. */
.tome-leaves { position: absolute; inset: 0; }

/* the boards: leather with a grain, worn a little lighter where hands hold it */
.tome-board, .tome-cover-front, .tome-cover-back { background-color: var(--leather);
	background-image:
		radial-gradient(120% 80% at 28% 18%, rgba(243, 227, 194, .1), rgba(243, 227, 194, 0) 55%),
		radial-gradient(150% 130% at 50% 50%, rgba(31, 25, 21, 0) 52%, rgba(31, 25, 21, .62) 100%),
		url('../img/tome-leather.svg');
	background-size: 100% 100%, 100% 100%, 260px 260px; }
.tome-board--back { position: absolute; left: 50%; right: 0; top: 0; bottom: 0; border-radius: 0 7px 7px 0; box-shadow: 0 34px 60px -34px rgba(20, 15, 12, .75), 0 10px 22px -12px rgba(20, 15, 12, .5); }

/* the pages: laid paper, a little foxed, with the block of the other pages under each one */
.tome-page { position: absolute; top: 2.6%; bottom: 2.6%; overflow: hidden; isolation: isolate; background-color: var(--paper); }
.tome-page { background-image:
		radial-gradient(circle at 93% 7%, rgba(227, 201, 154, .2), rgba(227, 201, 154, 0) 24%),
		radial-gradient(circle at 8% 95%, rgba(227, 201, 154, .14), rgba(227, 201, 154, 0) 22%),
		url('../img/tome-paper.svg');
	background-size: 100% 100%, 100% 100%, 200px 200px; }
.tome-page--left { left: 2%; right: 50%; border-radius: 3px 0 0 3px; box-shadow: -1px 1px 0 var(--edge-a), -2px 1px 0 var(--edge-b), -3px 2px 0 var(--edge-a), -4px 2px 0 var(--edge-b), -5px 3px 0 var(--gilt-lo), -6px 3px 0 var(--gilt); }
.tome-page--right { left: 50%; right: 2%; border-radius: 0 3px 3px 0; box-shadow: 1px 1px 0 var(--edge-a), 2px 1px 0 var(--edge-b), 3px 2px 0 var(--edge-a), 4px 2px 0 var(--edge-b), 5px 3px 0 var(--gilt-lo), 6px 3px 0 var(--gilt); }
.tome-page--left.is-blank { visibility: hidden; }
/* the two faces of the page that turns sit where the pages do */
.tome-at-r { left: 50%; right: 2%; border-radius: 0 3px 3px 0; }
.tome-at-l { left: 2%; right: 50%; border-radius: 3px 0 0 3px; }
/* the paper curves down into the spine */
.tome-page--left::before, .tome-at-l::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(270deg, rgba(31, 25, 21, .2) 0, rgba(31, 25, 21, .06) 4%, rgba(31, 25, 21, 0) 11%, rgba(31, 25, 21, 0) 94%, rgba(31, 25, 21, .05) 100%); }
.tome-page--right::before, .tome-at-r::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(90deg, rgba(31, 25, 21, .2) 0, rgba(31, 25, 21, .06) 4%, rgba(31, 25, 21, 0) 11%, rgba(31, 25, 21, 0) 94%, rgba(31, 25, 21, .05) 100%); }
.tome-gutter { position: absolute; left: 45%; width: 10%; top: 2.6%; bottom: 2.6%; pointer-events: none; background: linear-gradient(90deg, rgba(31, 25, 21, 0) 0, rgba(31, 25, 21, .05) 30%, rgba(31, 25, 21, .2) 47%, rgba(31, 25, 21, .34) 50%, rgba(31, 25, 21, .2) 53%, rgba(31, 25, 21, .05) 70%, rgba(31, 25, 21, 0) 100%); }
.tome-headband { position: absolute; left: 50%; width: 1.7%; height: 1.3%; transform: translate(-50%, 0); border-radius: 3px; background: repeating-linear-gradient(90deg, var(--gilt) 0 2px, var(--leather) 2px 4px); box-shadow: 0 0 0 1px rgba(31, 25, 21, .35); }
.tome-headband--top { top: 1.4%; }
.tome-headband--foot { bottom: 1.4%; }
.tome[data-state="closed"] .tome-headband, .tome[data-state="closed"] .tome-gutter { opacity: 0; }

/* the ribbon, hanging from the spine */
.tome-ribbon { position: absolute; left: 50.6%; top: 90%; width: 1.25%; height: 13.5%; transform-origin: 50% 0; background: linear-gradient(90deg, var(--gilt-lo), var(--gilt) 35%, var(--gilt-hi) 52%, var(--gilt) 70%, var(--gilt-lo)); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%); animation: tome-sway 7s ease-in-out infinite alternate; }
@keyframes tome-sway { from { rotate: -2.2deg; } to { rotate: 1.8deg; } }

/* the sheets: what is printed on a page */
.tome-sheet { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 9% 11% 8.5%; color: var(--ink); text-align: left; }
/* the printer's border: a fine double rule round the type */
.tome-sheet::before { content: ""; position: absolute; inset: 5.2% 6.4% 5.6%; border: 1px solid rgba(58, 50, 44, .2); outline: 1px solid rgba(58, 50, 44, .11); outline-offset: calc(var(--u) * .45); pointer-events: none; }
.tome-runner { margin: 0; text-align: center; font-size: calc(var(--u) * 1.02); line-height: 1.3; letter-spacing: .26em; text-transform: uppercase; color: var(--fumo-2); }
.tome-folio { position: absolute; bottom: 4.4%; left: 11%; margin: 0; font-size: calc(var(--u) * 1.2); color: var(--fumo); font-variant-numeric: oldstyle-nums proportional-nums; }
.tome-folio--r { left: auto; right: 11%; }
.tome-orn { display: block; width: 34%; height: auto; margin: 0 auto; color: color-mix(in srgb, var(--umber) 70%, var(--cera)); }
.tome-chapter { margin: auto 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.tome-num { margin: 0; font-size: calc(var(--u) * 1.7); letter-spacing: .1em; color: var(--umber); }
.tome-title { margin: .22em 0 .42em; font-size: calc(var(--u) * 3.6); font-weight: 400; line-height: 1.08; letter-spacing: -.005em; color: var(--ink); text-wrap: balance; }
.tome-text { margin: 1.15em 0 0; font-size: calc(var(--u) * 1.95); line-height: 1.55; color: var(--ink-soft); text-align: justify; text-align-last: center; -webkit-hyphens: auto; hyphens: auto; }
.tome-chapter .tome-text::first-letter { float: left; margin: .06em .09em 0 0; font-size: 3.15em; line-height: .8; color: var(--umber); }

/* the plate: a photograph tipped in */
.tome-plate { margin: auto 0; display: flex; flex-direction: column; align-items: center; gap: 1.1em; }
.tome-plate-frame { position: relative; width: 100%; padding: 3.2%; background: var(--paper-2); border: 1px solid rgba(58, 50, 44, .14); box-shadow: 0 1px 2px rgba(31, 25, 21, .2), 0 10px 18px -10px rgba(31, 25, 21, .45); transform: rotate(-.35deg); }
.tome-plate-frame img { display: block; width: 100%; aspect-ratio: 5 / 4; height: auto; object-fit: cover; filter: sepia(.08) saturate(.96); }
.tome-plate figcaption { display: flex; flex-direction: column; align-items: center; gap: .3em; text-align: center; }
.tome-plate-no { font-size: calc(var(--u) * 1.02); letter-spacing: .26em; text-indent: .26em; text-transform: uppercase; color: var(--fumo-2); }
.tome-plate-title { font-size: calc(var(--u) * 1.75); font-style: italic; color: var(--ink-soft); }
.tome-solo { display: none; }

/* the title page, with the contents */
.tome-sheet--title { padding: 8.5% 11% 7.5%; }
.tome-tp { margin: auto 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.tome-tp-door { width: 7.5%; height: auto; color: var(--umber); }
.tome-tp-article { margin: 1.4em 0 0; font-size: calc(var(--u) * 1.25); letter-spacing: .34em; text-indent: .34em; text-transform: uppercase; color: var(--fumo-2); }
.tome-tp-title { margin: .1em 0 .3em; font-size: calc(var(--u) * 4.3); font-weight: 400; line-height: 1; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.tome-tp-quote { margin: .9em 0 0; max-width: 20em; font-size: calc(var(--u) * 1.7); font-style: italic; line-height: 1.4; color: var(--ink-soft); text-wrap: balance; }
.tome-tp-contents { margin: 1.9em 0 .7em; font-size: calc(var(--u) * 1.02); letter-spacing: .28em; text-indent: .28em; text-transform: uppercase; color: var(--fumo-2); }
.tome-toc { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: .15em; }
.tome-toc-item { appearance: none; display: grid; grid-template-columns: 2.1em auto 1fr auto; align-items: baseline; gap: .45em; width: 100%; padding: .22em 0; border: 0; background: none; font: inherit; font-size: calc(var(--u) * 1.6); line-height: 1.3; color: var(--ink-soft); text-align: left; cursor: pointer; }
.tome-toc-num { font-size: .82em; letter-spacing: .14em; color: var(--umber); }
.tome-toc-dots { align-self: end; height: 1px; margin-bottom: .32em; background: radial-gradient(circle, rgba(58, 50, 44, .5) .7px, transparent 1px) 0 50% / 5px 2px repeat-x; }
.tome-toc-page { font-variant-numeric: oldstyle-nums; color: var(--fumo); }
.tome-toc-item:hover, .tome-toc-item:focus-visible { color: var(--umber); }
.tome-toc-item:hover .tome-toc-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.tome-tp-imprint { margin: 2em 0 0; font-size: calc(var(--u) * 1.02); letter-spacing: .3em; text-indent: .3em; text-transform: uppercase; color: var(--fumo-2); }

/* the page that turns is paper: its outer corner travels across and the sheet folds over along a line, showing
   its back beyond it (tome.js draws the fold). The page coming into view takes the shadow of the lifted sheet, and
   the fold catches the light. */
.tome-fold { position: absolute; inset: 0; visibility: hidden; pointer-events: none; }
.tome-fold.is-on { visibility: visible; }
.tome-cast, .tome-curl, .tome-flapbox { position: absolute; inset: 0; }
.tome-cast i, .tome-curl i { position: absolute; left: 0; top: 0; width: 100px; height: 400%; transform-origin: 0 0; }
.tome-cast i { background: linear-gradient(90deg, rgba(31, 25, 21, .62) 0, rgba(31, 25, 21, .34) 14%, rgba(31, 25, 21, .14) 42%, rgba(31, 25, 21, .04) 72%, rgba(31, 25, 21, 0) 100%); }
.tome-curl i { background: linear-gradient(90deg, rgba(31, 25, 21, .44) 0, rgba(31, 25, 21, .22) 3%, rgba(31, 25, 21, .12) 9%, rgba(243, 227, 194, .1) 17%, rgba(243, 227, 194, 0) 25%, rgba(31, 25, 21, .07) 45%, rgba(31, 25, 21, .1) 100%); }
.tome-flapbox { filter: drop-shadow(1px 3px 9px rgba(31, 25, 21, var(--fs, 0))); }
.tome-lift, .tome-flap { transform-origin: 0 0; box-shadow: none; }
/* the gutter's shade falls on the turning page only as it comes down flat */
.tome-gutter--fold { opacity: 0; }
.tome-fold.is-on .tome-lift, .tome-fold.is-on .tome-flap, .tome-fold.is-on i { will-change: transform; }

/* the cover: closed on arrival, it opens about the spine and becomes the left board */
.tome-cover { position: absolute; left: 50%; right: 0; top: 0; bottom: 0; transform-origin: 0 50%; transform-style: preserve-3d; transform: rotateY(-180deg) translateZ(3px); transition: transform 1.7s cubic-bezier(.62, .04, .28, 1); }
.tome[data-state="closed"] .tome-cover { transform: rotateY(0deg) translateZ(3px); }
html:not(.js) .tome[data-state="closed"] .tome-cover { transform: rotateY(-180deg) translateZ(3px); }
.tome-cover-front, .tome-cover-back { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.tome-cover-front { appearance: none; display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 3px 8px 8px 3px; font: inherit; color: var(--gilt); cursor: pointer; overflow: hidden;
	box-shadow: inset 7px 0 12px -7px rgba(0, 0, 0, .65), inset -1px 0 0 rgba(243, 227, 194, .06), inset 0 1px 0 rgba(243, 227, 194, .06), 0 34px 60px -34px rgba(20, 15, 12, .75), 0 10px 22px -12px rgba(20, 15, 12, .5); }
/* the joint, where the board bends at the spine */
.tome-cover-front::before { content: ""; position: absolute; top: 0; bottom: 0; left: 4.2%; width: 1.6%; background: linear-gradient(90deg, rgba(0, 0, 0, .38), rgba(243, 227, 194, .07) 55%, rgba(0, 0, 0, .18)); }
.tome-cover-frame { position: absolute; inset: 7.5% 8% 7.5% 12%; border: 1px solid rgba(227, 201, 154, .78); outline: 1px solid rgba(227, 201, 154, .4); outline-offset: calc(var(--u) * .65); box-shadow: inset 0 0 0 calc(var(--u) * .35) rgba(31, 25, 21, .22), inset 0 0 0 calc(var(--u) * .45) rgba(227, 201, 154, .16); }
.tome-corner { position: absolute; width: calc(var(--u) * 1.15); height: calc(var(--u) * 1.15); background: var(--gilt); transform: rotate(45deg); box-shadow: 0 0 0 calc(var(--u) * .3) var(--leather), 0 0 0 calc(var(--u) * .4) rgba(227, 201, 154, .6); }
.tome-corner--tl { top: calc(var(--u) * -.58); left: calc(var(--u) * -.58); }
.tome-corner--tr { top: calc(var(--u) * -.58); right: calc(var(--u) * -.58); }
.tome-corner--bl { bottom: calc(var(--u) * -.58); left: calc(var(--u) * -.58); }
.tome-corner--br { bottom: calc(var(--u) * -.58); right: calc(var(--u) * -.58); }
.tome-cover-body { position: absolute; inset: 7.5% 8% 7.5% 12%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10% 8%; text-align: center; }
.tome-cover-door { width: 15%; height: auto; margin-bottom: 9%; color: var(--gilt); filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, .45)) drop-shadow(0 1px 0 rgba(243, 227, 194, .18)); }
.tome-cover-article, .tome-cover-title, .tome-cover-imprint { background: linear-gradient(175deg, var(--gilt-hi) 0%, var(--gilt) 38%, var(--gilt-lo) 62%, var(--gilt) 82%, var(--gilt-hi) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, .5)) drop-shadow(0 1px 0 rgba(243, 227, 194, .14)); }
.tome-cover-article { font-size: calc(var(--u) * 1.6); letter-spacing: .42em; text-indent: .42em; text-transform: uppercase; }
.tome-cover-title { margin-top: .25em; font-size: calc(var(--u) * 4.7); line-height: 1.05; letter-spacing: .1em; text-indent: .1em; text-transform: uppercase; text-wrap: balance; }
.tome-cover-orn { width: 46%; height: auto; margin: 7% auto 0; color: var(--gilt); opacity: .9; }
.tome-cover-imprint { position: absolute; left: 0; right: 0; bottom: 11%; font-size: calc(var(--u) * 1.15); letter-spacing: .36em; text-indent: .36em; text-transform: uppercase; }
.tome-cover-front:focus-visible { outline: 2px solid var(--gilt); outline-offset: 4px; }
/* inside the cover: the leather turned in, the marbled pastedown and the bookplate */
.tome-cover-back { transform: rotateY(180deg); border-radius: 8px 3px 3px 8px; box-shadow: inset -7px 0 12px -7px rgba(0, 0, 0, .55), 0 34px 60px -34px rgba(20, 15, 12, .75), 0 10px 22px -12px rgba(20, 15, 12, .5); }
.tome-endpaper { position: absolute; top: 2.6%; bottom: 2.6%; left: 4%; right: 0; background: var(--leather-dk) url('../img/tome-marble.svg') 50% 50% / cover; box-shadow: inset -10px 0 14px -10px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(31, 25, 21, .4); display: flex; align-items: center; justify-content: center; }
.tome-bookplate { display: flex; flex-direction: column; align-items: center; gap: .5em; width: 44%; padding: 7% 5% 6%; background: var(--paper); border: 1px solid rgba(58, 50, 44, .3); outline: 1px solid rgba(58, 50, 44, .25); outline-offset: -5px; box-shadow: 0 2px 4px rgba(0, 0, 0, .35); color: var(--umber); text-align: center; transform: rotate(-.6deg); }
.tome-bookplate-ex { font-size: calc(var(--u) * 1.05); letter-spacing: .3em; text-indent: .3em; text-transform: uppercase; }
.tome-bookplate-door { width: 26%; height: auto; }
.tome-bookplate-name { font-size: calc(var(--u) * 1.45); font-style: italic; }

/* the thumb index: one cut per chapter in the fore-edge; the chapters already read sit on the left */
.tome-tabs { position: absolute; inset: 2.6% 2%; pointer-events: none; transition: opacity .8s var(--ease) .6s; }
.tome[data-state="closed"] .tome-tabs { opacity: 0; transition-delay: 0s; }
.tome-tab { appearance: none; position: absolute; top: calc(12% + var(--k) * 12.4%); right: 0; width: 2.7%; height: 8%; padding: 0; border: 0; border-radius: 999px 0 0 999px; pointer-events: auto; cursor: pointer; font: inherit; font-size: calc(var(--u) * 1.02); line-height: 1; color: var(--gilt-hi); background-color: var(--leather); background-image: radial-gradient(120% 100% at 80% 30%, rgba(243, 227, 194, .14), rgba(243, 227, 194, 0) 60%), url('../img/tome-leather.svg'); background-size: 100% 100%, 260px 260px; box-shadow: inset 0 0 0 1px rgba(227, 201, 154, .28), inset 3px 0 4px rgba(0, 0, 0, .4); transition: filter .3s var(--ease); }
.tome-tab span { display: inline-block; padding-left: 22%; }
.tome-tab.is-read { right: calc(100% - 2.7%); border-radius: 0 999px 999px 0; }
.tome-tab.is-read span { padding: 0 22% 0 0; }
.tome-tab:hover, .tome-tab:focus-visible { filter: brightness(1.25); }
/* a tab that changes side travels on the page that turns: its copy rides the sheet, folding over with it */
.tome-tab.is-away { visibility: hidden; }
.tome-tab--edge { display: flex; align-items: center; justify-content: center; width: 5.4%; z-index: 5; pointer-events: none; }
.tome-tab--edge.is-read { right: auto; left: 0; }
.tome-tab.is-here { color: var(--gilt-hi); }

/* turning by hand */
.tome[data-state="open"] .tome-page--right, .tome[data-state="open"] .tome-page--left:not(.is-blank) { cursor: grab; }
.tome.is-dragging, .tome.is-dragging * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; }
/* a corner that lifts a little under the pointer */
.tome-page--right .tome-sheet::after { content: ""; position: absolute; right: 0; bottom: 0; width: 0; height: 0; background: linear-gradient(135deg, var(--paper-2) 0, var(--paper) 44%, rgba(31, 25, 21, .3) 49.2%, color-mix(in srgb, var(--paper) 72%, var(--pietra)) 50.5%, color-mix(in srgb, var(--paper) 62%, var(--pietra)) 100%); transition: width .35s var(--ease), height .35s var(--ease); }
@media (hover: hover) {
	.tome[data-state="open"]:not(.is-turning) .tome-page--right:hover .tome-sheet::after { width: 9%; height: 6.6%; }
}

/* the bar below: back, where we are, onward */
.tome-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 2px; }
.tome-caption { flex: 1 1 auto; margin: 0; min-width: 0; text-align: center; font-size: 15px; font-style: italic; color: var(--fumo-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tome-btn { appearance: none; display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; font: inherit; font-size: 15px; color: var(--ink); cursor: pointer; transition: color .35s var(--ease), opacity .35s var(--ease); }
.tome-btn--prev { width: 40px; height: 40px; justify-content: center; border: 1px solid var(--pietra-2); border-radius: 50%; }
.tome-btn--next { border-bottom: 1px solid var(--pietra-2); padding-bottom: 2px; }
.tome-btn:hover { color: var(--umber); }
.tome-btn--next:hover span[aria-hidden] { transform: translateX(3px); }
.tome-btn span[aria-hidden] { display: inline-block; transition: transform .35s var(--ease); }
.tome-btn[disabled] { opacity: .35; cursor: default; }
.tome-hint { margin: 10px 0 0; text-align: center; font-size: 13px; font-style: italic; color: var(--fumo); transition: opacity .8s var(--ease); }
.tome.is-touched .tome-hint { opacity: 0; }

/* one page at a time, where two would be too small */
@container tome (max-width: 660px) {
	.tome-stage { --u: 1.9cqw; overflow: hidden; padding-top: 2%; }
	.tome-book { aspect-ratio: .8; transform: none !important; }
	.tome-board--back { left: 0; border-radius: 4px 7px 7px 4px; }
	.tome-page--left, .tome-tabs, .tome-gutter, .tome-headband { display: none; }
	.tome-page--right, .tome-at-r { left: 4.5%; right: 2.4%; top: 1.8%; bottom: 1.8%; }
	.tome-at-l { left: -88.6%; right: 95.5%; top: 1.8%; bottom: 1.8%; }
	.tome-cover { left: 0; }
	.tome-ribbon { left: 5.6%; top: 93%; width: 2.4%; height: 7%; }
	.tome-sheet { padding: 8% 9% 9%; }
	.tome-sheet--plate .tome-plate { margin: auto 0 0; gap: .6em; }
	.tome-plate-frame { width: 100%; }
	.tome-solo { display: flex; flex-direction: column; align-items: center; margin: 0 0 auto; padding-top: 3.5%; text-align: center; }
	.tome-solo .tome-num { display: none; }
	.tome-solo .tome-text { margin-top: .5em; font-size: max(14px, calc(var(--u) * 1.62)); text-align: center; text-align-last: auto; -webkit-hyphens: manual; hyphens: manual; }
	.tome-plate-title { font-size: max(15px, calc(var(--u) * 1.75)); }
	.tome-runner, .tome-plate-no, .tome-tp-contents, .tome-tp-imprint { font-size: max(10px, calc(var(--u) * 1.02)); }
	.tome-toc-item { font-size: max(13px, calc(var(--u) * 1.5)); }
	.tome-tp-quote { font-size: max(14px, calc(var(--u) * 1.6)); }
	.tome-folio { font-size: max(11px, calc(var(--u) * 1.15)); }
	.tome-cover-front::before { left: 5.5%; }
	.tome-cover-frame, .tome-cover-body { left: 13%; }
}

@media (prefers-reduced-motion: reduce) {
	.tome-book, .tome-cover, .tome-tab { transition: none !important; }
	.tome-ribbon { animation: none; }
	.tome-fold { display: none; }
}
@media print { .tome-bar, .tome-hint, .tome-tabs { display: none !important; } }