; each must be blockified or the
aspect-ratio box never forms */
.tome__stage {
display: block; position: relative; aspect-ratio: 3 / 4.4;
transform-style: preserve-3d;
transform: rotateY(0deg);
transition: transform var(--dur-2) var(--ease-book);
will-change: transform;
}
.tome:hover .tome__stage,
.tome:focus-visible .tome__stage { transform: rotateY(-27deg) rotateX(1.5deg) translateY(-6px); }
/* — turning the book over —
A book whose back cover has been photographed does not merely tilt: it turns
right over, the way you turn a book in your hands to read the blurb. The
whole behaviour hangs off .tome--flip, which the templates add only when
there is a back board to show, so every other book keeps the old tilt. */
.tome--flip:hover .tome__stage,
.tome--flip:focus-visible .tome__stage,
.tome--flip.is-turned .tome__stage {
transform: rotateY(-180deg) translateY(-6px);
transition-duration: .85s;
}
.tome__back {
position: absolute; inset: 0; overflow: hidden;
background: var(--paper-tint);
border-radius: 3px 1px 1px 3px; /* mirrored: the gutter is on the right now */
/* rotate first, then push out along the turned axis — that lands the board on
the far side of the block, facing away, where a back cover belongs */
transform: rotateY(180deg) translateZ(calc(var(--depth) / 2));
box-shadow: var(--shadow-book);
backface-visibility: hidden;
}
.tome__back img { width: 100%; height: 100%; object-fit: cover; }
/* the gutter shadow, mirrored to the spine's new side */
.tome__back::after {
content: ""; position: absolute; inset: 0 0 0 auto; width: 12%;
background: linear-gradient(270deg, rgba(20,14,10,.36), rgba(20,14,10,.10) 45%, transparent);
pointer-events: none;
}
.tome__face {
position: absolute; inset: 0;
background: var(--paper-tint); overflow: hidden;
border-radius: 1px 3px 3px 1px;
transform: translateZ(calc(var(--depth) / 2));
box-shadow: var(--shadow-book);
backface-visibility: hidden;
}
.tome__face img { width: 100%; height: 100%; object-fit: cover; }
/* the gutter shadow where the cover meets the spine */
.tome__face::after {
content: ""; position: absolute; inset: 0 auto 0 0; width: 12%;
background: linear-gradient(90deg, rgba(20,14,10,.36), rgba(20,14,10,.10) 45%, transparent);
pointer-events: none;
}
/* a faint sheen that travels across the cover on hover */
.tome__face::before {
content: ""; position: absolute; inset: -20% -60%; z-index: 2; pointer-events: none;
background: linear-gradient(102deg, transparent 42%, rgba(255,252,240,.30) 50%, transparent 58%);
transform: translateX(-60%);
transition: transform .85s var(--ease-book);
}
.tome:hover .tome__face::before { transform: translateX(60%); }
.tome__spine {
position: absolute; top: 0; bottom: 0; left: 0; width: var(--depth);
transform-origin: left center;
transform: translateZ(calc(var(--depth) / -2)) rotateY(-90deg);
background: linear-gradient(90deg, #4E1B14, var(--kumkum-deep) 40%, #5C170F);
border-radius: 2px 0 0 2px;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
.tome__spine::before, .tome__spine::after {
content: ""; position: absolute; left: 12%; right: 12%; height: 1px;
background: var(--haldi); opacity: .75;
}
.tome__spine::before { top: 9%; }
.tome__spine::after { bottom: 9%; }
.tome__edge {
position: absolute; top: 1.5%; bottom: 1.5%; right: 0; width: var(--depth);
transform-origin: right center;
transform: translateZ(calc(var(--depth) / -2)) rotateY(90deg);
background:
repeating-linear-gradient(90deg, #EFE7D5 0 1px, #DCCFB4 1px 2px);
box-shadow: inset -2px 0 4px rgba(36,28,22,.16);
}
/* The pool of shadow the book used to stand in. Removed with the board shadow
above — half a shadow reads worse than none — but the element is left in the
markup and in this file, so restoring it is a one-line change rather than a
hunt through three templates. */
.tome__shadow { display: none; }
/* the caption beneath a tome */
.tome__label { display: block; margin-top: var(--s4); }
.tome__title {
display: block;
font-family: var(--f-display); font-size: 1.06rem; line-height: 1.34;
margin: 0 0 .18rem; transition: color var(--dur) var(--ease);
}
.tome:hover .tome__title { color: var(--kumkum); }
.tome__meta {
display: block; font-family: var(--f-latin); font-style: italic;
font-size: var(--t-xs); letter-spacing: .07em; color: var(--ink-3); line-height: 1.5;
}
.tome__honours {
display: inline-flex; align-items: center; gap: .35em; margin-top: .35rem;
font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase;
color: var(--haldi); font-weight: 600;
}
/* a typographic cover for titles with no photographed jacket —
never a broken image, always a designed object */
.jacket {
width: 100%; height: 100%;
display: flex; flex-direction: column; justify-content: space-between;
padding: 1.15rem 1rem 1rem 1.35rem; text-align: center;
background:
linear-gradient(150deg, #6E1A11, #8E2318 45%, #5F160E);
color: #F6E8D6;
}
.jacket::before {
content: ""; display: block; height: 1px; background: var(--haldi); opacity: .8;
}
.jacket b {
font-family: var(--f-display); font-weight: 400;
font-size: clamp(.9rem, 2.6cqw, 1.15rem); line-height: 1.42;
display: flex; align-items: center; justify-content: center; flex: 1;
padding-block: .6rem;
}
/* This is the author's name printed on a designed book jacket, not interface
text — small is faithful to a cover at thumbnail size — but .62rem was below
comfortable reading even for that, so it is nudged up. */
.jacket span {
font-family: var(--f-latin); font-style: italic; font-size: .68rem;
letter-spacing: .12em; text-transform: uppercase; color: rgba(246,232,214,.72);
padding-top: .5rem; border-top: 1px solid rgba(176,138,44,.55);
}
.jacket--tint { background: linear-gradient(150deg, #35291D, #4A3728 45%, #2C2118); }
/* — the reading room: one book, presented — */
.tome-detail { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 56rem) { .tome-detail { grid-template-columns: minmax(15rem, 21rem) 1fr; } }
@media (min-width: 56rem) { .tome-detail__aside { position: sticky; top: calc(var(--head-h) + 2rem); } }
.tome-detail .tome { --depth: 22px; }
.tome-detail .tome__stage { transform: rotateY(-14deg) rotateX(2deg); }
.tome-detail .tome:hover .tome__stage { transform: rotateY(-24deg) rotateX(2deg); }
/* In the reading room the book already stands at an angle, so the turn carries
it from -14° round to -194° — the same half-revolution, ending square on. */
.tome-detail .tome--flip:hover .tome__stage,
.tome-detail .tome--flip.is-turned .tome__stage { transform: rotateY(-194deg) rotateX(2deg); }
.tome-detail h1 { font-size: clamp(1.9rem, 4vw, 3.1rem); margin-bottom: var(--s2); }
.tome-detail__en {
font-family: var(--f-latin); font-style: italic; font-size: var(--t-lede);
color: var(--ink-2); margin-bottom: var(--s5);
}
/* the colophon — a book's particulars, set as a printer would */
.colophon { list-style: none; margin: 0 0 var(--s6); padding: 0; max-width: 34rem; }
.colophon li {
display: grid; grid-template-columns: 8.5rem 1fr; gap: var(--s4);
padding: .55rem 0; border-bottom: 1px dotted var(--line-firm); font-size: var(--t-sm);
}
.colophon li:first-child { border-top: 1px dotted var(--line-firm); }
.colophon dt, .colophon li > b {
font-family: var(--f-latin); font-style: italic; font-weight: 400;
letter-spacing: .1em; text-transform: uppercase; font-size: var(--t-xs);
color: var(--ink-3); padding-top: .18em;
}
@media (max-width: 30rem) { .colophon li { grid-template-columns: 1fr; gap: 0; } }
/* the laurel — awards a book has won */
.laurel {
background: linear-gradient(180deg, var(--paper-raised), var(--paper-tint));
border: 1px solid var(--line);
border-inline-start: 3px solid var(--haldi);
border-radius: 0 var(--radius) var(--radius) 0;
padding: clamp(1.25rem, 3vw, 1.85rem);
margin-block: var(--s6);
box-shadow: var(--shadow-1);
}
.laurel__head {
display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
font-family: var(--f-display); font-size: 1.18rem; margin-bottom: var(--s3);
}
.laurel__head .c {
font-family: var(--f-latin); font-style: italic; font-size: var(--t-xs);
letter-spacing: .14em; text-transform: uppercase; color: var(--haldi);
}
.laurel ol { margin: 0; padding: 0; list-style: none; counter-reset: laurel; }
.laurel li {
counter-increment: laurel; position: relative;
padding: .45rem 0 .45rem 2.2rem; font-size: var(--t-sm); line-height: 1.65;
border-top: 1px solid var(--line-soft);
}
.laurel li:first-child { border-top: 0; }
.laurel li::before {
content: counter(laurel, decimal-leading-zero);
position: absolute; left: 0; top: .55rem;
font-family: var(--f-latin); font-style: italic; font-size: .72rem;
color: var(--haldi); letter-spacing: .05em;
}
.laurel li .y { color: var(--ink-3); font-size: var(--t-xs); letter-spacing: .06em; }
/* --------------------------------------------- 09 the archive timeline */
.archive { position: relative; }
.archive__spine {
position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
background: linear-gradient(180deg, transparent, var(--line-firm) 6%, var(--line-firm) 94%, transparent);
}
@media (min-width: 60rem) { .archive__spine { left: 9.5rem; } }
.leaf {
position: relative;
display: grid; gap: var(--s4);
padding: 0 0 clamp(3rem, 7vw, 5.5rem) 2.25rem;
}
@media (min-width: 60rem) {
.leaf { grid-template-columns: 9.5rem 1fr; gap: clamp(2.5rem, 5vw, 4.5rem); padding-left: 0; padding-bottom: clamp(4rem, 8vw, 7rem); }
.leaf__year { text-align: end; padding-inline-end: 2.5rem; }
}
.leaf:last-child { padding-bottom: 0; }
.leaf__year { position: relative; }
.leaf__year b {
display: block; font-family: var(--f-display); font-weight: 400;
font-size: clamp(1.6rem, 3vw, 2.35rem); line-height: 1.1; color: var(--kumkum);
letter-spacing: -.01em;
}
.leaf__year span {
display: block; font-family: var(--f-latin); font-style: italic;
font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase;
color: var(--ink-4); margin-top: .25rem;
}
/* the node on the spine */
.leaf::before {
content: ""; position: absolute; left: -4.5px; top: .75rem;
width: 10px; height: 10px; border-radius: 50%;
background: var(--paper); border: 1.5px solid var(--kumkum);
transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease-out);
}
.leaf:hover::before { background: var(--kumkum); transform: scale(1.25); }
@media (min-width: 60rem) { .leaf::before { left: calc(9.5rem - 4.5px); } }
.leaf__body h3 { margin-bottom: var(--s2); font-size: clamp(1.3rem, 2.2vw, 1.75rem); }
.leaf__body p { color: var(--ink-2); max-width: 54ch; }
.leaf__body figure {
margin: var(--s5) 0 0; max-width: 30rem;
}
.leaf__body figure img {
width: 100%; border-radius: var(--radius); border: 1px solid var(--line);
box-shadow: var(--shadow-2);
}
.leaf__body figcaption {
font-family: var(--f-latin); font-style: italic; font-size: var(--t-xs);
color: var(--ink-3); margin-top: .55rem; letter-spacing: .04em;
}
.leaf__context {
margin-top: var(--s4); padding-inline-start: var(--s4);
border-inline-start: 2px solid var(--line);
font-size: var(--t-sm); color: var(--ink-3); max-width: 48ch;
}
.leaf__context b {
display: block; font-family: var(--f-latin); font-style: italic; font-weight: 400;
font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase;
color: var(--ink-4); margin-bottom: .15rem;
}
/* ------------------------------------------------- 10 the honours hall */
/* the laureate plaques — books that swept a season */
.laureates { display: grid; gap: var(--s5); }
@media (min-width: 46rem) { .laureates { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); } }
.plaque {
position: relative; text-align: center; text-decoration: none; color: inherit;
background: linear-gradient(170deg, var(--paper-raised), var(--paper-tint));
border: 1px solid var(--line);
padding: clamp(1.75rem, 4vw, 2.5rem) var(--s5);
box-shadow: var(--shadow-1);
transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.plaque:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.plaque__count {
display: block; font-family: var(--f-display); font-size: clamp(3rem, 7vw, 4.4rem);
line-height: 1; color: var(--kumkum);
}
.plaque__of {
display: block; font-family: var(--f-latin); font-style: italic;
font-size: var(--t-xs); letter-spacing: .2em; text-transform: uppercase;
color: var(--haldi); margin-top: .45rem;
}
.plaque h3 { margin: var(--s4) 0 .2rem; font-size: 1.25rem; }
.plaque .en { font-family: var(--f-latin); font-style: italic; font-size: var(--t-xs);
letter-spacing: .1em; color: var(--ink-3); display: block; }
.plaque .rule { max-width: 5rem; margin: var(--s4) auto 0; }
/* the honours register — a ledger of citations */
.register { max-width: 54rem; margin-inline: auto; }
.honour {
display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--s5);
padding: clamp(1.1rem, 2.5vw, 1.6rem) var(--s3);
border-bottom: 1px solid var(--line-soft);
align-items: baseline;
transition: background-color var(--dur) var(--ease);
}
.honour:first-child { border-top: 1px solid var(--line-soft); }
.honour:hover { background: var(--paper-raised); }
.honour__year {
font-family: var(--f-display); font-size: 1.3rem; color: var(--kumkum); line-height: 1.2;
}
.honour__year span {
display: block; font-family: var(--f-latin); font-style: italic;
font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4);
}
.honour h3 { margin-bottom: .18rem; font-size: 1.14rem; line-height: 1.4; }
.honour p { margin: 0; color: var(--ink-2); font-size: var(--t-sm); }
@media (max-width: 34rem) {
.honour { grid-template-columns: 1fr; gap: .3rem; }
.honour__year { font-size: 1.05rem; }
.honour__year span { display: inline; margin-inline-start: .5rem; }
}
/* a single citation, given the space of an exhibit label */
.citation {
max-width: 44rem; margin-inline: auto; text-align: center;
padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 3rem);
border: 1px solid rgba(176,138,44,.42);
background: rgba(176,138,44,.05);
position: relative;
}
.citation blockquote {
font-family: var(--f-display); font-size: clamp(1.15rem, 2.1vw, 1.5rem);
line-height: 1.72; color: var(--ink);
}
.section--night .citation { border-color: rgba(227,196,118,.55); background: rgba(227,196,118,.055); }
.section--night .citation blockquote { color: var(--paper); }
.citation cite {
display: block; font-style: normal; margin-top: var(--s5);
font-family: var(--f-latin); font-size: var(--t-sm); color: var(--ink-3);
}
.citation cite b { display: block; font-family: var(--f-display); font-weight: 400;
font-size: 1.1rem; color: var(--ink-2); margin-bottom: .15rem; }
.section--night .citation cite b { color: var(--paper-tint); }
/* ------------------------------------------------- 11 the exhibition */
/* museum hang: photographs at deliberately varied scale, not a uniform grid */
.hang {
display: grid; gap: clamp(1.25rem, 3vw, 2.5rem);
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 48rem) { .hang { grid-template-columns: repeat(6, 1fr); grid-auto-flow: dense; } }
/* On a phone the wall is a plain two across, so an odd number of photographs
leaves the last one in a half-width slot with a hole beside it. It is hung
full width instead — the wall always ends on a straight edge. */
@media (max-width: 47.99rem) { .hang > :nth-child(odd):last-child { grid-column: span 2; } }
.exhibit { margin: 0; position: relative; }
.exhibit a {
display: block; position: relative; overflow: hidden;
background: var(--paper-deep);
border: 1px solid var(--line);
box-shadow: var(--shadow-1);
transition: box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.exhibit a::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 55%, rgba(20,14,10,.55));
opacity: 0; transition: opacity var(--dur-2) var(--ease);
}
.exhibit a:hover, .exhibit a:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-3); }
.exhibit a:hover::after, .exhibit a:focus-visible::after { opacity: 1; }
.exhibit img {
width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3;
transition: transform 1.1s var(--ease-book);
}
.exhibit a:hover img { transform: scale(1.045); }
.exhibit__zoom {
position: absolute; inset: auto var(--s4) var(--s4) auto; z-index: 2;
width: 2.4rem; height: 2.4rem; border-radius: 50%;
background: rgba(247,242,230,.92); color: var(--ink);
display: grid; place-items: center; font-size: .9rem;
opacity: 0; transform: scale(.8);
transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease-out);
}
.exhibit a:hover .exhibit__zoom, .exhibit a:focus-visible .exhibit__zoom { opacity: 1; transform: none; }
.exhibit figcaption {
padding-top: .65rem; font-size: var(--t-xs); color: var(--ink-3);
line-height: 1.6; letter-spacing: .02em;
}
.exhibit figcaption b {
display: block; font-family: var(--f-display); font-weight: 400;
font-size: var(--t-sm); color: var(--ink-2); margin-bottom: .1rem;
}
/* the hang rhythm — a curated sequence of spans */
@media (min-width: 48rem) {
.exhibit { grid-column: span 2; }
.exhibit--wide { grid-column: span 4; }
.exhibit--full { grid-column: span 6; }
.exhibit--tall { grid-column: span 2; }
.exhibit--wide img { aspect-ratio: 16 / 9; }
.exhibit--full img { aspect-ratio: 21 / 9; }
.exhibit--tall img { aspect-ratio: 3 / 4; }
}
/* — the viewing room: full-screen lightbox — */
.viewer {
position: fixed; inset: 0; z-index: 150;
background: rgba(17, 12, 8, .965);
display: grid; grid-template-rows: auto 1fr auto;
opacity: 0; visibility: hidden;
transition: opacity var(--dur-2) var(--ease-out), visibility var(--dur-2);
}
.viewer.is-open { opacity: 1; visibility: visible; }
.viewer__bar {
display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
padding: var(--s4) var(--gutter); color: var(--paper-tint);
}
.viewer__count {
font-family: var(--f-latin); font-style: italic; font-size: var(--t-xs);
letter-spacing: .18em; text-transform: uppercase; color: var(--ink-4);
font-variant-numeric: tabular-nums;
}
/* The stage is a flex box with min-height:0, so the 1fr row is definite and the
plate's percentage limits resolve against it. A grid row would size to the
photograph first and let a tall plate run off the screen. overflow:hidden is
the belt to that pair of braces. */
.viewer__stage {
position: relative; min-height: 0; overflow: hidden;
display: flex; align-items: center; justify-content: center;
padding-inline: clamp(3.75rem, 9vw, 7rem);
}
.viewer__stage img {
max-width: 100%; max-height: 100%; width: auto; height: auto;
object-fit: contain;
box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
opacity: 0; transform: scale(.985);
transition: opacity .38s var(--ease-out), transform .38s var(--ease-out);
}
.viewer__stage img.is-shown { opacity: 1; transform: none; }
.viewer__label {
padding: var(--s5) var(--gutter) var(--s6); text-align: center;
max-width: 42rem; margin-inline: auto;
}
.viewer__label b {
display: block; font-family: var(--f-display); font-weight: 400; font-size: 1.15rem;
color: var(--paper); margin-bottom: .3rem;
}
.viewer__label span { font-size: var(--t-sm); color: var(--ink-4); line-height: 1.65; }
.viewer__nav {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
width: 3.25rem; height: 3.25rem; border-radius: 50%;
border: 1px solid rgba(247,242,230,.28); background: rgba(247,242,230,.06);
color: var(--paper); cursor: pointer; display: grid; place-items: center;
font-size: 1.1rem; transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.viewer__nav:hover { background: rgba(247,242,230,.16); border-color: rgba(247,242,230,.6); }
.viewer__nav--prev { left: clamp(.5rem, 2vw, 1.5rem); }
.viewer__nav--next { right: clamp(.5rem, 2vw, 1.5rem); }
.viewer__close {
width: 2.9rem; height: 2.9rem; border-radius: 50%;
border: 1px solid rgba(247,242,230,.28); background: transparent;
color: var(--paper); cursor: pointer; font-size: 1.05rem;
transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.viewer__close:hover { background: rgba(247,242,230,.14); border-color: var(--paper); }
@media (max-width: 40rem) {
.viewer__nav { width: 2.6rem; height: 2.6rem; }
.viewer__label { padding-bottom: var(--s5); }
}
/* ------------------------------------------------ 12 magazine & prose */
/* the featured piece — a magazine's opening spread */
.feature {
display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center;
text-decoration: none; color: inherit;
}
@media (min-width: 52rem) { .feature { grid-template-columns: 1.05fr .95fr; } }
.feature__art {
position: relative; overflow: hidden; background: var(--paper-deep);
border: 1px solid var(--line); box-shadow: var(--shadow-2);
}
.feature__art img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
transition: transform 1.1s var(--ease-book); }
.feature:hover .feature__art img { transform: scale(1.04); }
.feature h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); margin-block: var(--s3); }
.feature:hover h2 { color: var(--kumkum); }
.feature p { color: var(--ink-2); }
/* the article ledger */
.ledger { border-top: 1px solid var(--line); }
.piece {
display: grid; gap: var(--s2) var(--s6); align-items: baseline;
padding: clamp(1.5rem, 3.5vw, 2.5rem) var(--s3);
border-bottom: 1px solid var(--line);
text-decoration: none; color: inherit;
transition: background-color var(--dur) var(--ease), padding-inline-start var(--dur) var(--ease);
}
@media (min-width: 46rem) { .piece { grid-template-columns: 7.5rem 1fr auto; } }
.piece:hover { background: var(--paper-raised); padding-inline-start: 1.1rem; }
.piece__date {
font-family: var(--f-latin); font-style: italic; font-size: var(--t-xs);
letter-spacing: .1em; color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.piece h3 { margin-bottom: .3rem; transition: color var(--dur) var(--ease); }
.piece:hover h3 { color: var(--kumkum); }
.piece p { color: var(--ink-2); font-size: var(--t-sm); margin: 0; max-width: 62ch; }
.piece__go { color: var(--kumkum); font-size: var(--t-sm); white-space: nowrap; }
.piece__go .arrow { display: inline-block; transition: transform var(--dur) var(--ease); }
.piece:hover .piece__go .arrow { transform: translateX(4px); }
/* the reading page */
.prose {
max-width: var(--wrap-read); margin-inline: auto;
font-size: calc(var(--t-body) * var(--read-scale, 1));
line-height: 1.85;
}
.prose > p:first-of-type::first-letter {
font-family: var(--f-display); font-size: 3.1em; line-height: .84;
float: inline-start; padding: .1em .14em 0 0; color: var(--kumkum);
}
.prose p { max-width: none; margin-bottom: 1.4em; }
.prose h3 { margin: 2.2em 0 .7em; }
.prose h4 { margin: 1.8em 0 .5em; }
.prose ul, .prose ol { padding-inline-start: 1.35em; margin-bottom: 1.4em; }
.prose li { margin-bottom: .5em; }
.prose blockquote {
margin: 2em 0; padding-inline-start: 1.5em;
border-inline-start: 2px solid var(--haldi);
font-family: var(--f-display); font-size: 1.15em; line-height: 1.65; color: var(--ink-2);
}
.prose img { margin: 2em auto; border: 1px solid var(--line); box-shadow: var(--shadow-2); }
.prose a { font-weight: 500; }
.prose--plain > p:first-of-type::first-letter { font-size: inherit; float: none; padding: 0; color: inherit; }
/* the reading toolbar — a small set of typographic controls */
.readbar {
display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
flex-wrap: wrap;
max-width: var(--wrap-read); margin: 0 auto var(--s7);
padding: .6rem .75rem; border-block: 1px solid var(--line-soft);
}
.readbar__group { display: flex; align-items: center; gap: .35rem; }
.readbar__label {
font-family: var(--f-latin); font-style: italic; font-size: var(--t-xs);
letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4);
margin-inline-end: .35rem;
}
.readbar button {
min-width: 38px; min-height: 34px; padding: 0 .6rem;
border: 1px solid var(--line); border-radius: var(--radius);
background: var(--paper-raised); color: var(--ink-2);
font-family: var(--f-text); font-size: var(--t-sm); cursor: pointer;
transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease),
background-color var(--dur) var(--ease);
}
.readbar button:hover { border-color: var(--kumkum); color: var(--kumkum); }
.readbar button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
/* calm reading mode: the page recedes, the text remains */
html[data-reading="on"] .head__tools .langswitch,
html[data-reading="on"] .pager { display: none; }
html[data-reading="on"] body { background-color: #FBF7EE; }
html[data-reading="on"] .prose { --read-scale: 1.1; }
/* newspaper clippings & magazine covers */
.clippings {
display: grid; gap: clamp(1.25rem, 3vw, 2.25rem);
grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr));
}
.clipping {
margin: 0; background: var(--paper-raised);
border: 1px solid var(--line); box-shadow: var(--shadow-1);
padding: .5rem .5rem 0; position: relative;
transform: rotate(var(--tilt, 0deg));
transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.clipping:nth-child(3n+1) { --tilt: -.7deg; }
.clipping:nth-child(3n+2) { --tilt: .5deg; }
.clipping:hover { transform: rotate(0deg) translateY(-4px); box-shadow: var(--shadow-2); }
.clipping img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.clipping figcaption {
padding: .65rem .35rem .8rem; font-size: var(--t-xs); color: var(--ink-3); line-height: 1.55;
}
.clipping figcaption b { display: block; color: var(--ink-2); font-weight: 600; }
/* ------------------------------------------------------ 13 media & video */
.reels {
display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
}
.reel { margin: 0; }
.reel__frame {
position: relative; width: 100%; padding: 0; aspect-ratio: 16 / 9;
overflow: hidden; cursor: pointer; display: block;
border: 1px solid var(--line-firm); background: var(--night);
box-shadow: var(--shadow-1);
transition: box-shadow var(--dur-2) var(--ease-out);
}
.reel__frame:hover { box-shadow: var(--shadow-3); }
.reel__frame img {
width: 100%; height: 100%; object-fit: cover; opacity: .82;
transition: opacity var(--dur-2) var(--ease), transform 1s var(--ease-book);
}
.reel__frame:hover img { opacity: 1; transform: scale(1.04); }
.reel__play {
position: absolute; inset: 0; margin: auto;
width: 4.2rem; height: 4.2rem; border-radius: 50%;
background: rgba(142,35,24,.94); color: #FFF8EF;
display: grid; place-items: center; font-size: 1.15rem; padding-inline-start: .2rem;
box-shadow: 0 8px 24px rgba(0,0,0,.35);
transition: transform var(--dur) var(--ease-out), background-color var(--dur) var(--ease);
pointer-events: none;
}
.reel__frame:hover .reel__play { transform: scale(1.1); background: var(--kumkum-deep); }
.reel__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.reel figcaption { padding-top: var(--s3); }
.reel figcaption b { font-family: var(--f-display); font-weight: 400; font-size: 1.04rem; display: block; }
.reel figcaption span {
font-family: var(--f-latin); font-style: italic; font-size: var(--t-xs);
letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
/* the press columns */
.columns {
display: grid; gap: clamp(1.75rem, 4vw, 3rem);
grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}
.column h3 {
display: flex; align-items: center; gap: .6rem;
font-size: 1.18rem; padding-bottom: var(--s3); margin-bottom: var(--s3);
border-bottom: 1px solid var(--line);
}
.column ul { list-style: none; margin: 0; padding: 0; }
.column li { padding: .6rem 0; border-bottom: 1px dotted var(--line-firm); }
.column li:last-child { border-bottom: 0; }
.column li b { font-weight: 500; font-size: var(--t-body); }
.column li span { display: block; font-size: var(--t-sm); color: var(--ink-3); line-height: 1.55; }
/* ------------------------------------------------------------ 14 events */
.diary { max-width: 52rem; margin-inline: auto; }
.entry {
display: grid; grid-template-columns: auto 1fr; gap: var(--s5);
padding: clamp(1.25rem, 3vw, 1.85rem) var(--s3);
border-bottom: 1px solid var(--line-soft); align-items: start;
transition: background-color var(--dur) var(--ease);
}
.entry:first-child { border-top: 1px solid var(--line-soft); }
.entry:hover { background: var(--paper-raised); }
.entry__date {
text-align: center; min-width: 4.6rem; padding: .55rem .6rem;
background: var(--paper-raised); border: 1px solid var(--line);
box-shadow: var(--shadow-1); border-radius: var(--radius);
}
.entry__date b {
display: block; font-family: var(--f-display); font-weight: 400;
font-size: 1.55rem; line-height: 1.05; color: var(--kumkum);
}
.entry__date span {
display: block; font-family: var(--f-latin); font-style: italic;
font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
margin-top: .1rem;
}
.entry h3 { margin-bottom: .25rem; font-size: 1.16rem; }
.entry__meta { font-size: var(--t-sm); color: var(--ink-2); margin: 0; }
.entry__meta .role { color: var(--kumkum); }
.entry p.note { font-size: var(--t-sm); color: var(--ink-3); margin: .4rem 0 0; }
/* ----------------------------------------------- 14b sets that must close ---
Auto-fitted grids are right for lists whose length is content — a genre's
shelf, a gallery wall. They are wrong for SETS: three credo columns, three
reels, six facts. There the column count is decided by how wide the track
happens to be, and at one width in three the set breaks two-and-one, leaving
a single item marooned under a full row. It reads as a mistake because it is
one — nobody chose it.
These rules size a set by counting it. `:has(> :nth-child(n):last-child)`
means "this container holds exactly n items", so each rule applies to one set
size and to nothing else; a list that happens to hold three today and five
tomorrow keeps the auto-fit above. Browsers without `:has()` — none current —
simply keep the old behaviour, which is the point of doing it this way. */
/* exactly three: one column, then three. Never two — and a prose column set
two-and-one at 600px is the worst of both, so below the breakpoint it stacks. */
.columns:has(> :nth-child(3):last-child) { grid-template-columns: 1fr; }
@media (min-width: 46rem) {
.columns:has(> :nth-child(3):last-child),
.laureates:has(> :nth-child(3):last-child),
.reels:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
}
/* exactly four: two-by-two on a tablet, one row on a laptop */
@media (min-width: 46rem) { .columns:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .columns:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); } }
/* exactly six facts on their plinths: three-by-two, then one long row */
@media (min-width: 46rem) { .plinths:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64rem) { .plinths:has(> :nth-child(6):last-child) { grid-template-columns: repeat(6, 1fr); } }
/* ------------------------------------------------- 15 forms & bands */
.form-grid { display: grid; gap: var(--s5); }
@media (min-width: 40rem) {
.form-grid--2 { grid-template-columns: 1fr 1fr; }
.form-grid--2 .span2 { grid-column: 1 / -1; }
}
.field { position: relative; }
.field > label {
display: block; font-family: var(--f-latin); font-style: italic;
font-size: var(--t-xs); letter-spacing: .13em; text-transform: uppercase;
color: var(--ink-3); margin-bottom: .4rem;
}
.field > label .req { color: var(--kumkum); font-style: normal; }
.field input, .field textarea, .field select {
width: 100%; font-family: var(--f-text); font-size: var(--t-body); color: var(--ink);
background: var(--paper-raised);
border: 1px solid var(--line-firm); border-radius: var(--radius);
padding: .78em .95em; line-height: 1.6;
transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
background-color var(--dur) var(--ease);
}
.field textarea { resize: vertical; min-height: 8rem; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-4); }
.field input:hover, .field textarea:hover { border-color: var(--ink-4); }
.field input:focus, .field textarea:focus, .field select:focus {
outline: none; border-color: var(--kumkum); background: #fff;
box-shadow: 0 0 0 3px var(--kumkum-wash);
}
.field .err { color: var(--kumkum); font-size: var(--t-sm); margin: .35rem 0 0; }
.field [aria-invalid="true"] { border-color: var(--kumkum); }
.field__hint { font-size: var(--t-xs); color: var(--ink-4); margin: .35rem 0 0; }
.notice {
padding: var(--s4) var(--s5); border-radius: var(--radius);
margin-bottom: var(--s5); border: 1px solid; max-width: var(--measure);
display: flex; gap: var(--s3); align-items: flex-start;
}
.notice--ok { background: var(--shalu-soft); border-color: var(--shalu); color: #1F3E2D; }
.notice--err { background: var(--kumkum-soft); border-color: var(--kumkum); color: var(--kumkum-deep); }
.notice b { font-weight: 600; }
/* the newsletter band, printed on night paper */
.band { text-align: center; }
.band .rule { max-width: 12rem; margin: var(--s5) auto; }
.band form {
display: flex; gap: var(--s3); justify-content: center; flex-wrap: wrap;
margin-top: var(--s6);
}
.band input[type="email"] {
font-family: var(--f-text); font-size: var(--t-body);
padding: .85em 1.1em; min-width: min(24rem, 82vw);
/* A field's edge has to be findable: --night-3 on --night was 1.6:1, below the
3:1 a control's boundary owes the reader. Light grain reads as an edge. */
border: 1px solid var(--wood-lit); border-radius: var(--radius);
background: var(--night-2); color: var(--paper);
transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.band input[type="email"]::placeholder { color: var(--ink-3); }
.band input[type="email"]:focus {
outline: none; border-color: var(--haldi); background: #2E251C;
}
/* the folded question — FAQ */
.folded { border-bottom: 1px solid var(--line-soft); }
.folded:first-of-type { border-top: 1px solid var(--line-soft); }
.folded summary {
display: flex; align-items: flex-start; gap: var(--s4);
padding: 1.15rem .25rem; cursor: pointer; list-style: none;
font-family: var(--f-display); font-size: 1.14rem; line-height: 1.45;
transition: color var(--dur) var(--ease);
}
.folded summary::-webkit-details-marker { display: none; }
.folded summary:hover { color: var(--kumkum); }
.folded summary::after {
content: "+"; margin-inline-start: auto; flex: 0 0 auto;
color: var(--kumkum); font-size: 1.35rem; line-height: 1.1;
transition: transform var(--dur-2) var(--ease-out);
}
.folded[open] summary::after { transform: rotate(45deg); }
.folded__body { padding: 0 .25rem 1.35rem; color: var(--ink-2); font-size: var(--t-sm); }
.folded__body p { max-width: 62ch; }
/* -------------------------------------------- 16 the closing chapter */
/* the pager — "turn the page" */
.pager { border-top: 1px solid var(--line); background-color: var(--paper-tint); }
.pager a {
display: flex; flex-direction: column; align-items: center; gap: .35rem;
padding: clamp(2.25rem, 5vw, 3.5rem) var(--gutter);
text-decoration: none; color: var(--ink);
transition: background-color var(--dur-2) var(--ease);
}
.pager a:hover { background: var(--paper-raised); }
.pager b {
font-family: var(--f-display); font-weight: 400;
font-size: clamp(1.4rem, 3vw, 2.1rem); line-height: 1.3; text-align: center;
}
.pager .arrow { color: var(--kumkum); display: inline-block; transition: transform var(--dur) var(--ease); }
.pager a:hover .arrow { transform: translateX(6px); }
.pager .en {
font-family: var(--f-latin); font-style: italic; font-size: var(--t-xs);
letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
}
/* the colophon page — a footer that closes the book */
/* The footer is printed on walnut, but every colour inside it was still being
drawn from the ink scale — four dilutions mixed to sit on WHITE paper. On the
dark ground that read from merely dim (the colophon bar, at 2.9:1) to very
nearly invisible: the newsletter heading is plain `--ink`, #1F1913 on #3B2A1C,
which is 1.2:1 — a heading no one could read.
Rather than repaint two dozen selectors, the ink scale is re-mixed for this
one panel: same four steps, same warmth, inverted for a dark ground. Every
rule beneath keeps working and every one of them now passes AA. */
.foot {
/* the same walnut panel an inverted chapter is printed on, grain and all —
the footer used to be the one dark surface on the site with no grain, and
it read as a flat block of brown rather than as the back board of the book */
background-color: var(--night);
background-image: repeating-linear-gradient(90deg,
rgba(255, 246, 232, .020) 0 1px,
transparent 1px 4px,
rgba(0, 0, 0, .045) 4px 5px,
transparent 5px 13px);
position: relative;
--ink: var(--paper); /* headings — 15.1:1 */
--ink-2: #EFE7DA; /* the standfirst — 11.2:1 */
--ink-3: #C6B8A4; /* small caps, the colophon bar — 7.0:1 */
--ink-4: #D8CCBA; /* the blurb — 8.7:1 */
color: var(--ink-4);
}
.foot::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: var(--foil); opacity: .6;
}
/* Devanagari display type is given letterpress relief on paper — a pale shadow
under the stroke. On wood that same shadow is a halo, so it is lifted. */
.foot h1, .foot h2, .foot h3 { text-shadow: none; }
/* the third rule: envoi · newsletter · colophon are three separate registers */
.foot .band { border-bottom: 1px solid var(--wood-deep-3); }
/* the envoi — the author's parting line, in her own hand */
.envoi {
text-align: center;
padding: clamp(3rem, 7vw, 5rem) var(--gutter) clamp(2rem, 5vw, 3.5rem);
/* the rules that part the footer's three registers: --night-2 on --night was
invisible, so they read as gaps rather than as divisions */
border-bottom: 1px solid var(--wood-deep-3);
}
.envoi q {
display: block; quotes: none; max-width: 34rem; margin-inline: auto;
font-family: var(--f-display); font-size: clamp(1.3rem, 2.8vw, 1.95rem);
line-height: 1.62; color: var(--paper);
}
/* the English gloss under the Marathi line — a translator's footnote, set small
so it never competes with the line it is glossing */
.envoi__gloss {
display: block; margin-top: var(--s3);
font-family: var(--f-latin); font-style: italic;
font-size: var(--t-sm); letter-spacing: .06em; color: var(--ink-4);
}
.envoi .sig {
display: block; font-family: var(--f-hand);
font-size: clamp(1.6rem, 3.4vw, 2.3rem); color: var(--haldi-lit);
margin-top: var(--s6); line-height: 1.3;
}
.envoi .sig small {
display: block; font-family: var(--f-latin); font-style: italic;
font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
color: var(--ink-3); margin-top: .5rem;
}
.foot__in {
display: grid; gap: var(--s7);
padding-block: clamp(2.75rem, 6vw, 4.5rem);
}
@media (min-width: 52rem) { .foot__in { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--s6); } }
.foot h4 {
color: var(--paper-tint); font-family: var(--f-latin); font-style: italic;
font-weight: 400; font-size: var(--t-xs); letter-spacing: .2em; text-transform: uppercase;
margin-bottom: var(--s4);
}
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { padding: .28rem 0; font-size: var(--t-sm); line-height: 1.6; }
.foot a { color: var(--paper-tint); text-decoration: none; }
.foot a:hover { color: var(--haldi-lit); text-decoration: underline; text-underline-offset: .25em; }
.foot__mark {
display: flex; align-items: center; gap: .7rem;
font-family: var(--f-display); font-size: 1.6rem; line-height: 1;
color: var(--paper); margin-bottom: var(--s4);
}
.foot__glyph { opacity: .96; }
.foot__blurb { font-size: var(--t-sm); line-height: 1.75; max-width: 34ch; color: var(--ink-4); }
.foot__social { display: flex; gap: .5rem; margin-top: var(--s5); }
.foot__social a {
width: 40px; height: 40px; border-radius: 50%;
border: 1px solid var(--wood-lit); display: grid; place-items: center;
transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.foot__social a:hover { border-color: var(--haldi); background: rgba(176,138,44,.12); text-decoration: none; }
.foot__social svg { width: 17px; height: 17px; fill: currentColor; }
.foot__bar {
border-top: 1px solid var(--wood-deep-3); padding-block: var(--s5);
display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5);
justify-content: space-between; align-items: center;
font-size: var(--t-xs); color: var(--ink-3); letter-spacing: .03em;
}
.foot__bar a { color: var(--ink-3); }
/* the maker's credit — the same weight as the colophon beside it, so it reads
as one of the notes at the foot of the page rather than as an advertisement */
.foot__by { display: inline-flex; align-items: center; gap: .38em; }
.foot__by a { color: var(--ink-3); text-decoration: none; }
.foot__by a:hover { color: var(--haldi-lit); text-decoration: underline; text-underline-offset: .25em; }
/* kumkum is the site's colour for "this matters", but at #8E2318 on walnut it
is 1.4:1 — a heart nobody can see. The footer's own gold carries it. */
.foot__heart { color: var(--haldi); font-size: 1.05em; line-height: 1; }
/* ------------------------------------------ 17 motion · a11y · print */
/* scroll reveal — a 14px rise, nothing more */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.is-in {
opacity: 1; transform: none;
transition: opacity .62s var(--ease-out), transform .62s var(--ease-out);
transition-delay: var(--d, 0ms);
}
/* text that sets itself line by line — used once, on the masthead */
.set-lines > * { display: block; }
.set-lines.is-ready > * {
opacity: 0; transform: translateY(.5em);
animation: setline .85s var(--ease-out) forwards;
animation-delay: calc(var(--i, 0) * 110ms);
}
@keyframes setline { to { opacity: 1; transform: none; } }
/* utilities */
.center { text-align: center; }
/* paragraphs carry a 66ch measure; a centred one must also centre its box */
p.center { margin-inline: auto; }
.muted { color: var(--ink-2); }
.small { font-size: var(--t-sm); }
.xs { font-size: var(--t-xs); }
.mt0 { margin-top: 0 !important; }
.mb0 { margin-bottom: 0 !important; }
.mt5 { margin-top: var(--s5); }
.mt6 { margin-top: var(--s6); }
.mt7 { margin-top: var(--s7); }
.flow > * + * { margin-top: var(--s4); }
.stack-end { display: flex; justify-content: center; margin-top: clamp(2.25rem, 5vw, 3.5rem); }
.nowrap { white-space: nowrap; }
.visually-hidden {
position: absolute !important; width: 1px; height: 1px; margin: -1px;
padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.empty {
text-align: center; padding: clamp(2.5rem, 6vw, 4rem) var(--s5);
border: 1px dashed var(--line-firm); border-radius: var(--radius);
color: var(--ink-3); max-width: 40rem; margin-inline: auto;
}
.empty .bindi { margin-bottom: var(--s4); }
/* offscreen chapters are not laid out until they are near —
the single largest rendering win on a long editorial page */
.cv { content-visibility: auto; contain-intrinsic-size: auto 720px; }
/* — reduced motion: the design must survive without a single transition — */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.reveal { opacity: 1; transform: none; }
.set-lines.is-ready > * { opacity: 1; transform: none; animation: none; }
*, *::before, *::after {
animation-duration: .001ms !important; animation-iteration-count: 1 !important;
transition-duration: .001ms !important; scroll-behavior: auto !important;
}
.tome:hover .tome__stage { transform: none; }
}
/* — forced colours / high contrast — */
@media (forced-colors: active) {
.rule::before, .rule::after, .progress__bar { forced-color-adjust: none; background: LinkText; }
.btn, .chip, .field input, .field textarea { border: 1px solid ButtonBorder; }
.tome__face, .exhibit a { border: 1px solid CanvasText; }
}
/* ==========================================================================
18 · the alignment system
One page, one axis. Components used to narrow and centre themselves
individually — a register at 54rem auto, a citation at 44rem auto, a FAQ
list at 46rem auto — which produced four different left edges on a single
screen. Narrowing now happens ONCE, on the section's wrap; everything
inside inherits that edge.
========================================================================= */
/* ONE page box. Previously .wrap (75rem), .wrap--wide (88rem) and .wrap--mid
(58rem) were each centred in the viewport, so three sections of the same page
started at three different x positions. Now every section shares the same
outer box, and "narrow" or "wide" is expressed as a cap on the CONTENT —
which bounds the measure on the right without ever moving the left edge. */
.wrap--wide { max-width: var(--wrap); }
.wrap--mid { max-width: var(--wrap); }
.wrap--mid > * { max-width: 58rem; }
/* Components keep a bounded measure — a 75rem-wide list of awards is unreadable —
but they bound it on the RIGHT only. The left edge always stays on the wrap. */
.register { max-width: 58rem; margin-inline: 0; }
.citation { max-width: 46rem; margin-inline: 0; text-align: start; }
.ledger { max-width: 64rem; margin-inline: 0; }
.archive,
.diary { margin-inline: 0; }
.citation cite { text-align: start; }
/* Rows meet the wrap edge rather than sitting on a private inset. */
.honour { padding-inline: 0; }
.piece { padding-inline: 0; }
.piece:hover { padding-inline-start: .9rem; }
.folded summary,
.folded__body { padding-inline: 0; }
/* "Continue reading" belongs to the column it closes, not to the page centre.
These are , so they inherit the 66ch prose measure — meaningless for a row
of buttons, and enough to wrap one on a narrow column. */
.stack-end { justify-content: flex-start; max-width: none; }
/* A section footer that spans the content it closes: the action stays on the
page's axis, a quiet note closes the line on the right. */
.stack-end--split {
justify-content: space-between;
align-items: center;
gap: var(--s4) var(--s5);
flex-wrap: wrap;
}
.stack-end__note {
font-family: var(--f-latin); font-style: italic;
font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase;
color: var(--ink-3);
font-variant-numeric: tabular-nums;
}
/* ---------------------------------------------------- Devanagari tracking --
The small-caps label treatment across this site is a Latin device: wide
letter-spacing plus uppercase. Devanagari has no case, and tracking pulls the
glyphs off their shirorekha — "प्रकरण पहिले" was rendering as loose, separated
parts of words. On a Marathi page those labels lose the tracking and the
(meaningless) uppercasing, and take the Devanagari face instead of Fraunces. */
html[lang="mr"] :is(
.folio, .chapter-head__no, .shelf__count, .stack-end__note, .plinth span,
.plinth em, .imprint__sub, .foot h4, .plaque__of, .masthead h1 .pre,
.honour__year span, .field label, .readbar__label, .envoi .sig small,
.tome__honours, .exhibit figcaption, .piece__date, .search__results .k,
.bg-plate__meta, .panel__head, .specimen__meta span, .app__note
) {
letter-spacing: .015em;
text-transform: none;
font-style: normal;
font-family: var(--f-text);
}
/* The chapter numeral keeps the display face; only its tracking relaxes. */
html[lang="mr"] .chapter-head__no { font-family: var(--f-display); }
.chapter-head--center ~ .stack-end,
.section--center .stack-end { justify-content: center; }
/* A shelf or gallery-room heading: title, count, rule — on the page's axis. */
.shelf__head { margin-bottom: var(--s6); }
.shelf__head h2 {
font-size: var(--t-3);
margin-bottom: .25rem;
}
.shelf__count {
display: block;
font-family: var(--f-latin); font-style: italic;
font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase;
color: var(--ink-3);
}
.shelf__head .rule { max-width: 12rem; margin: var(--s4) 0 0; }
/* The register's decade rule now spans its column instead of stopping short. */
.register .folio span:nth-child(2) { flex: 1; }
/* The honorific opens the role line, set in the same weight as the rest so it
reads as part of the sentence rather than a badge. */
.masthead__role b { font-weight: 500; color: var(--ink); }
/* ==========================================================================
19 · the finishing pass
Small refinements that make the volume feel bound rather than assembled.
Everything here is additive; nothing above is overridden.
========================================================================= */
/* The half-title rule: a short foil line opening the title page, the way a
printed book puts a rule above the epigraph. */
.masthead__epigraph::before {
content: ""; display: block; width: 4.5rem; height: 2px;
margin-bottom: clamp(1.1rem, 2.4vw, 1.6rem);
background: var(--foil);
}
/* A change of ground is a page turn, so the seam gets a foil thread. */
.section--night, .section--deep { position: relative; }
.section--night::before, .section--deep::before {
content: ""; position: absolute; inset-inline: 0; top: 0; height: 1px;
background: var(--foil); opacity: .55; pointer-events: none;
}
/* The statistics read as engraved plinths: the count is underlined by a foil
rule that draws itself in as you arrive at it. */
.plinth { position: relative; }
.plinth::after {
content: ""; position: absolute; inset-inline: 50% 50%; bottom: 0; height: 2px;
background: var(--foil);
transition: inset var(--dur-2) var(--ease-out);
}
.plinth:hover::after { inset-inline: 18% 18%; }
.plinth b { text-shadow: 0 1px 0 rgba(255, 253, 246, .75); }
/* The chapter numeral, letterpressed into the sheet. */
.chapter-head__no .n { text-shadow: 0 1px 0 rgba(255, 253, 246, .8); }
.section--night .chapter-head__no .n,
.section--deep .chapter-head__no .n { text-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
/* The language switch: the reader's language is not merely selected, it is the
one struck into the metal. */
.langswitch { box-shadow: inset 0 1px 0 rgba(255, 253, 246, .7); }
.langswitch a[aria-current="true"] {
background: var(--kumkum); color: #FFF6EC;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
}
.langswitch a:focus-visible { outline: 2px solid var(--kumkum); outline-offset: -2px; }
/* A shelf casts a little more shadow onto the plank than a flat list would. */
.shelf__plank { box-shadow: 0 -6px 14px -8px rgba(36, 28, 22, .35); }
/* Downloads and asset links on the brand sheet share the site's focus ring. */
a[download]:focus-visible { outline: 2px solid var(--kumkum); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
.plinth::after { transition: none; }
.mark__bindi { transition: none; }
}
/* ==========================================================================
20 · the small screen
Audited with real device viewports (puppeteer at 360 / 390 / 414 / 768),
not with a headless window — headless Chrome clamps its viewport to ~501px,
which hid genuine overflow on every page.
========================================================================= */
@media (max-width: 30rem) { /* ≤ 480px — phones */
:root { --gutter: 1.1rem; --head-h: 3.9rem; }
.head__in { gap: .5rem; }
.imprint { gap: .45rem; }
.imprint .mark { width: 28px; height: 28px; }
/* Search lives in the index sheet at this size; the bar keeps the two things
a reader reaches for most — the language, and the way out. */
.head__tools > #search-open { display: none; }
.head__tools { gap: .35rem; }
/* 40px was still under the minimum, and the header has room for the extra
four: the imprint beside it gives way long before the bar does. */
.iconbtn { width: 44px; height: 44px; }
/* The language toggle stays visible and stays a real target. */
.langswitch a { padding: 0 .62rem; font-size: .74rem; }
.langswitch .deva { font-size: .84rem; }
}
/* The language toggle is never allowed to disappear or to shrink below a
comfortable tap: it is how half this site's readers reach their half of it. */
.langswitch { flex: 0 0 auto; }
.langswitch a { min-width: 2.6rem; justify-content: center; }
/* Header controls hold their size; only the imprint gives way.
The buttons inside were already immovable, but the cluster HOLDING them was
not: `.head__in > * { min-width: 0 }` let it be squeezed below its own
contents, and the buttons — which cannot shrink — simply hung out of its
right-hand side and off the page. Sizing the cluster to its contents is what
actually keeps the bar inside the viewport; the ellipsis on the imprint below
is what pays for it. */
.head__tools { flex: 0 0 auto; }
.head__tools .iconbtn { flex: 0 0 auto; }
/* The imprint is a link, so it must be a real target, not the height of its text. */
.imprint { min-height: 44px; }
/* A count inside a chip has a floor — .8em of a small chip fell to 9.9px. */
.chip .n { font-size: max(.8em, .75rem); }
/* Search, added to the index sheet so hiding the header icon costs nothing. */
.sheet__search {
display: flex; align-items: center; gap: var(--s3);
width: 100%; margin-bottom: var(--s5);
padding: .85rem var(--s4);
border: 1px solid var(--line-firm); border-radius: 100px;
background: var(--paper-raised); color: var(--ink-3);
font: inherit; font-size: var(--t-sm); text-align: start; cursor: pointer;
transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sheet__search:hover, .sheet__search:focus-visible { border-color: var(--kumkum); color: var(--kumkum); }
.sheet__search svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6; }
@media (min-width: 30.0625rem) { .sheet__search { display: none; } }
/* A tablet is a touch device too: the 44px minimum applies at 768px exactly as
it does at 360px, so these run to 64rem rather than stopping at phone width. */
@media (max-width: 64rem) {
/* The two controls a reader reaches for most were the two that had never been
measured: the language toggle stood 34px high and the section end-links
("Read the full life →") 33px — both under the 44px a fingertip needs, on
every page, at every touch width. The toggle keeps its size on the page by
centring its label in a taller box rather than growing its type. */
.langswitch a { min-height: 44px; }
.textlink { padding-block: .55rem; }
/* the underline is drawn on the box, so it follows the padding down and away
from the words unless it is pinned back to them */
.textlink::after { bottom: .5rem; }
/* Footer and list rows were 25px high — barely half the minimum. */
.foot li { padding: 0; }
.foot li a,
.foot li > span { display: block; padding: .62rem 0; min-height: 44px; }
.foot__bar { gap: var(--s3); }
.foot__bar a { display: inline-flex; align-items: center; min-height: 44px; }
/* The breadcrumb above a book stood 15px high — the smallest target on the
site, and the one a reader uses to get back out of it. */
nav.folio a { display: inline-flex; align-items: center; min-height: 44px; }
/* Links inside definition-style lists (email, telephone) — in both the
colophon and the three-column blocks, which use different markup. */
.colophon li { padding: .25rem 0; }
.colophon li a,
.column li a { display: inline-block; padding: .5rem 0; min-height: 40px; }
}
@media (max-width: 40rem) {
.chip .n, .shelf__count, .stack-end__note { font-size: .74rem; }
.folio, .chapter-head__no { letter-spacing: .18em; }
/* The pager and buttons get room to be tapped. */
.btn { padding: .82em 1.4em; }
.stack-end--split { gap: var(--s4); }
}
/* Two labels sat at 10.6–10.9px. This site is read by an audience that will not
thank us for 10px type, so the floor is raised everywhere, not just on phones. */
.imprint__sub { font-size: .72rem; }
.envoi .sig small,
.sheet__index .t small,
.plinth em { font-size: .74rem; }
@media (max-width: 26rem) { /* ≤ 416px — the narrowest phones */
.plinths { grid-template-columns: repeat(2, 1fr); }
.masthead__cta { gap: var(--s2); }
.masthead__cta .btn { flex: 1 1 auto; justify-content: center; }
}
/* ≤ 360px — the smallest screens still in real use (iPhone SE 1st gen, and any
phone held at 200% text zoom, which lands in the same place).
The masthead's name is set `white-space: nowrap` so it never breaks across
two lines mid-word; with nothing allowed to shrink it, at 320px it pushed the
menu button 9px past the edge and the whole document scrolled sideways. The
imprint is the one thing in that bar that can give way — the name is repeated
on every page beneath it, while search, language and the index are not — so
it is allowed to clip, with an ellipsis to say that it has. */
@media (max-width: 22.5rem) {
:root { --gutter: .9rem; }
.imprint { overflow: hidden; }
.imprint > span { min-width: 0; overflow: hidden; }
.imprint__mark { overflow: hidden; text-overflow: ellipsis; }
.imprint .mark { width: 26px; height: 26px; }
/* Set a shade smaller so the whole name fits rather than ellipsising: on the
author's own site her name is the one thing worth the space. */
.imprint__mark { font-size: .84rem; }
.head__in { gap: .35rem; }
.head__tools { gap: .2rem; }
/* The buttons are NOT shrunk here. They were, when the bar's overflow at this
width was thought to be a size problem; it was not — the tools cluster was
being squeezed below its own contents, which is fixed above. With that
fixed there is room at 320px for full-size targets, and the imprint's
ellipsis absorbs whatever is left over. */
.langswitch a { padding: 0 .5rem; min-width: 2.2rem; }
/* the newsletter field was floored at 24rem/82vw and could not fit beside its
button; below this width the two stack rather than overflow */
.band form { flex-direction: column; align-items: stretch; }
.band input[type="email"] { min-width: 0; width: 100%; }
.band .btn { width: 100%; justify-content: center; }
.lockup { gap: var(--s3); }
}
/* — print: the site returns to paper — */
@media print {
body { background: #fff; font-size: 11pt; }
body::before, body::after { display: none; }
.head, .sheet, .search, .viewer, .pager, .band, .foot__social,
.scroll-cue, .readbar, .progress, .chips { display: none !important; }
.section { padding-block: 1.5rem; break-inside: avoid; }
.section--night { background: #fff; color: #000; }
.section--night h2, .section--night h3 { color: #000; }
a { color: #000; text-decoration: underline; }
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; }
.tome__stage { transform: none !important; }
.reveal { opacity: 1 !important; transform: none !important; }
}