as its
only ELEMENT child, so p:has(> strong:only-child) matched ordinary prose
too and turned every mentioned name into a pull-quote. */
.kt-prose p.kt-beat {
margin-top: 1.6em;
padding-top: 1.1em;
border-top: 1px solid color-mix(in srgb, var(--accent-gold) 45%, transparent);
font-family: var(--font-display, inherit);
font-size: 1.15em;
line-height: 1.6;
opacity: 1;
}
/* Chapter heading inside a story page */
/* Spacing between chapters */
/* ═════════════════════════════════════════════════════════════
OUR STORY — one chronological spine
The page used to tell the history twice: five prose chapters,
then a six-row milestone list covering the same years. That
repetition is what made it feel long and flat. Chapters and
milestones are now a single dated run down one rail, so each
year is stated once and every entry has a home for a photo.
═════════════════════════════════════════════════════════════ */
/* ── Hero ── */
.kt-story-hero {
position: relative;
isolation: isolate;
padding-block: clamp(3rem, 9vh, 5rem);
/* No pagoda. It is a Burmese temple silhouette on a page about a Fuzhou
Chinese family — decorative stock texture that is not this business's
story. The founder's shopfront photo is not the replacement either: it is
896x1195, so full-bleed it would upscale 2.2x and go soft, a landscape
crop would cut off either the signboard or him, and a legibility overlay
would bury the sign. It earns more as its own picture in the 1987 entry. */
background: linear-gradient(155deg,
color-mix(in srgb, var(--accent-red) 22%, var(--ink)),
var(--ink) 62%);
text-align: center;
overflow: hidden;
}
/* Our own mark, bled off the right — the same brand device as the homepage. */
.kt-story-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: url(../img/logo/kantaw-mark.svg) no-repeat right -8% center / auto 150%;
opacity: .07;
pointer-events: none;
}
@media (max-width: 700px) {
.kt-story-hero::before { background-position: center bottom -18%; background-size: auto 62%; opacity: .05; }
}
/* Back link sits top-left INSIDE the hero. Below it, it sat alone on an empty
paper band between the hero and the first entry and read as orphaned; and it
cannot go beside the centred display title without breaking that centring. */
/* Used by every dark hero. A bare label is fine on a flat gradient but
disappears over a photograph, where what sits behind it is whatever the
picture happens to show — so it carries its own chip and is legible on
both. One class, so the two heroes cannot drift apart. */
.kt-hero-back {
display: inline-flex;
align-items: center;
gap: .35rem;
padding: .45rem .9rem .45rem .7rem;
border-radius: 999px;
font-size: .84rem;
font-weight: 600;
color: var(--paper);
background: color-mix(in srgb, var(--ink) 52%, transparent);
border: 1px solid color-mix(in srgb, var(--paper) 22%, transparent);
backdrop-filter: blur(6px);
transition: background .2s ease, color .2s ease;
}
.kt-hero-back:hover {
background: color-mix(in srgb, var(--ink) 72%, transparent);
color: var(--accent-gold);
}
.kt-story-hero .eyebrow { color: var(--accent-gold); }
.kt-story-hero h1 { color: var(--paper); }
/* Unscoped on purpose: every dark hero uses it. Scoped under .kt-story-hero it
silently did nothing on the fish ball page, which had the class but none of
the styling — the two heroes were only consistent by eye, not by code. */
.kt-hero-lede {
max-width: 34rem;
margin: 1.5rem auto 0;
color: color-mix(in srgb, var(--paper) 84%, transparent);
font-size: clamp(1rem, 2.1vw, 1.2rem);
line-height: 1.75;
text-wrap: pretty;
}
/* ── The spine ──
No rail and no circular badges. A continuous line with pills on it reads as
a stock timeline widget dropped into an editorial page; the years carry the
chronology perfectly well as type in the margin, which is how print does it.
The column is also capped: prose sits at a 38rem measure for readability, so
a 64rem container left a permanent ~290px void down the right of every
entry. ── */
.kt-spine { max-width: 58rem; margin-inline: auto; }
.kt-era { display: grid; grid-template-columns: 1fr; gap: .35rem 0; }
.kt-era + .kt-era { margin-top: clamp(3.25rem, 9vh, 6rem); }
@media (min-width: 900px) {
.kt-era { grid-template-columns: 9.5rem 1fr; gap: 0 2.75rem; align-items: start; }
}
.kt-era-year {
font-family: 'Newsreader', 'Noto Sans SC', 'Noto Sans Myanmar', Georgia, serif;
font-size: clamp(1.6rem, 4vw, 3.4rem);
line-height: .95;
color: color-mix(in srgb, var(--accent-gold) 88%, transparent);
letter-spacing: -0.02em;
/* lining, equal-width figures so 1973 / 1980 / 1988 stack in a true column
rather than jittering by a few pixels each */
font-variant-numeric: lining-nums tabular-nums;
}
@media (min-width: 900px) {
.kt-era-year { text-align: right; padding-top: .18em; }
}
.kt-era-title {
font-family: 'Newsreader', 'Noto Sans SC', 'Noto Sans Myanmar', Georgia, serif;
font-size: clamp(1.3rem, 3vw, 1.9rem);
line-height: 1.25;
margin-bottom: .35rem;
text-wrap: balance;
}
.kt-era-rule {
width: 40px; height: 2px; border: 0; margin: 0 0 1.25rem;
background: var(--accent-gold);
}
/* Prose, plus a photo column on the entries that have a photograph.
Entries without one simply run full width — the grid must not assume
every era has an image, because most of them do not. */
.kt-era-inner { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
@media (min-width: 900px) {
.kt-era--pic .kt-era-inner { grid-template-columns: 1fr 18rem; align-items: start; }
/* When a photo shares the row the prose fills what is left, rather than
holding a 38rem measure and pushing the picture off the edge. */
.kt-era--pic .kt-era-prose.kt-prose { max-width: none; }
}
.kt-era-prose.kt-prose { max-width: 38rem; margin-inline: 0; }
/* An era whose body is a single line — 1987 is a photograph and a fact, not a
chapter. Standing a tall portrait beside one sentence leaves the text column
nearly empty, so here the picture leads at full width and the line sits
under it. */
@media (min-width: 900px) {
/* 1987 is one sentence and a photograph. Stacking a tall portrait above a
single line left 574px of empty row beside it, so the picture sits next to
the line instead and the two are centred against each other. */
.kt-era--photo-led .kt-era-inner {
grid-template-columns: 20rem 1fr !important;
align-items: center;
gap: 2rem;
}
}
.kt-era--photo-led .kt-era-figure { max-width: 20rem; order: -1; }
/* Portrait, not landscape: the only photograph of this era is a tall shot with
the signboard at the top and the founder at the bottom. Cropping it to 4:3
loses one or the other, and both are the reason the picture matters. */
.kt-era--photo-led .kt-era-figure .card-media { aspect-ratio: 3 / 4; }
.kt-era-figure { margin: 0; }
/* These are archive photographs, not product shots — a soft lift makes them
read as prints laid on the paper rather than flat panels cut into it. */
.kt-era-figure .card-media {
box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 12%, transparent),
0 12px 28px color-mix(in srgb, var(--ink) 12%, transparent);
}
.kt-era-figure .card-media { border-radius: .9rem; aspect-ratio: 3 / 4; }
.kt-era-cap {
margin-top: .6rem;
font-size: .76rem;
line-height: 1.5;
opacity: .62;
}
/* Drop cap — English only. Myanmar stacks diacritics above and below the base
letter and Chinese is full-width, so an enlarged ::first-letter collides
with the line above in both. */
html[lang="en"] .kt-era:not(.kt-era--photo-led) .kt-era-prose.kt-prose > p:first-child::first-letter {
float: left;
font-family: 'Newsreader', Georgia, serif;
font-size: 3.1em;
line-height: .82;
padding: .06em .12em 0 0;
color: var(--accent-red);
}
/* Decorative vertical Chinese — the reference site uses a vertical calligraphy
strip as an accent. Ornamental, hidden from screen readers, dropped on
narrow screens where there is no room for it. */
.kt-vert {
writing-mode: vertical-rl;
font-family: 'Noto Sans SC', var(--cjk-fallback), serif;
font-size: clamp(1.1rem, 2vw, 1.5rem);
letter-spacing: .3em;
color: color-mix(in srgb, var(--accent-gold) 55%, transparent);
user-select: none;
}
@media (max-width: 1100px) { .kt-vert { display: none; } }
/* ── The tradition statement, standing on its own ── */
.kt-quote {
max-width: 44rem;
margin-inline: auto;
text-align: center;
}
.kt-quote .kt-prose { max-width: none; text-align: center; }
.kt-quote .kt-prose p {
font-family: 'Newsreader', 'Noto Sans SC', 'Noto Sans Myanmar', Georgia, serif;
font-size: clamp(1.15rem, 2.6vw, 1.6rem);
line-height: 1.55;
opacity: .95;
}
/* The beat rule is for running prose; inside a quote it just adds clutter. */
.kt-quote .kt-prose p.kt-beat {
border-top: 0;
padding-top: 0;
margin-top: 1.1em;
font-size: inherit;
}
.kt-quote .kt-prose strong { color: var(--accent-red); }
.kt-quote-mark {
display: block;
font-family: 'Newsreader', Georgia, serif;
font-size: 4rem;
line-height: .6;
color: color-mix(in srgb, var(--accent-gold) 60%, transparent);
margin-bottom: .75rem;
}
/* ── How we cook: photo cards instead of three bare buttons ── */
.kt-cook-grid {
display: grid;
gap: clamp(1rem, 2.5vw, 1.75rem);
grid-template-columns: 1fr;
}
@media (min-width: 700px) { .kt-cook-grid { grid-template-columns: repeat(3, 1fr); } }
.kt-cook-card {
display: block;
text-align: left;
border-radius: 1rem;
overflow: hidden;
background: var(--paper);
box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 10%, transparent);
transition: transform .25s ease, box-shadow .25s ease;
}
.kt-cook-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 28px color-mix(in srgb, var(--ink) 14%, transparent);
}
.kt-cook-photo { aspect-ratio: 4 / 3; }
.kt-cook-label { padding: 1rem 1.1rem 1.25rem; }
.kt-cook-name {
font-family: 'Newsreader', 'Noto Sans SC', 'Noto Sans Myanmar', Georgia, serif;
font-size: 1.05rem;
line-height: 1.35;
}
.kt-cook-go {
margin-top: .5rem;
font-size: .78rem;
font-weight: 600;
letter-spacing: .04em;
color: var(--accent-red);
}
/* ═════════════════════════════════════════════════════════════
DELIVERY — a dish row that carries its full story
The pork stew used to be split across the page: a showcase row
with the photo and one line, and a separate story section with
no photo at all. Its text now sits in its own row, beside its
own photo. The other two rows are the same component with short
copy, so they take longer text later without any layout change.
═════════════════════════════════════════════════════════════ */
.feature-tagline {
margin-top: .3rem;
font-size: .95rem;
letter-spacing: .01em;
color: color-mix(in srgb, var(--ink) 55%, transparent);
}
/* A row whose text is a full story rather than a line. The photo is floated
inside the text so the opening paragraphs run beside it and the remainder
closes underneath, using the full container width rather than leaving a tall
empty column under the picture.
The float width matches the grid column the other rows use (47.5% + a 3rem
gutter), so the photo is exactly the size it is in the Egg Noodle row and
the text beside it lands on the same measure. */
.feature-dish--story { display: block; }
/* Contain the float, or the next dish row rides up beside it. */
.feature-dish--story::after { content: ""; display: block; clear: both; }
.feature-dish--story .feature-figure { margin: 0 0 1.25rem; }
.feature-dish--story .feature-story.kt-prose { max-width: none; margin-inline: 0; }
.feature-dish--story .feature-story.kt-prose p { margin-top: .9em; }
.feature-dish--story .feature-story.kt-prose > p:first-child { margin-top: 0; }
/* The closing bolded line always starts below the photo. Its gold rule is a
full-width divider, so when the prose happens to end before the photo does
— as the Chinese and Myanmar copy do, being shorter than the English — the
line would otherwise sit in the narrow column beside the picture with a
stunted rule, while English cleared the float by accident of length. */
.feature-dish--story .kt-beat { clear: both; }
@media (min-width: 700px) {
.feature-dish--story .feature-figure {
float: left;
width: 47.5%;
margin: .35rem 3rem 1.25rem 0;
}
/* Alternating rows float the other way, keeping the left/right rhythm. */
.feature-dish--flip.feature-dish--story .feature-figure {
float: right;
margin: .35rem 0 1.25rem 3rem;
}
}
/* Below 700px the figure is not floated: full width, text underneath it. */
/* ═════════════════════════════════════════════════════════════
FISH BALLS — photo hero
Structurally the same panel as .kt-story-hero: full bleed, same
padding rhythm, same .kt-hero-back and .kt-hero-lede classes.
The only difference is what sits behind the text — a photograph
here, the coin watermark there. Sharing the classes is what keeps
the two pages consistent as either one changes.
NOTE ON THE PHOTO: main.jpg is currently 960x1280 (portrait), so
full bleed enlarges it and `cover` crops it to a narrow band. A
landscape file at 2400px or wider drops in here with no CSS change.
═════════════════════════════════════════════════════════════ */
.kt-fb-hero {
position: relative;
isolation: isolate;
padding-block: clamp(3rem, 9vh, 5rem);
background: var(--ink) url(../img/fishballs/main.jpg) center / cover no-repeat;
text-align: center;
overflow: hidden;
}
.kt-fb-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(180deg,
color-mix(in srgb, var(--ink) 34%, transparent) 0%,
color-mix(in srgb, var(--ink) 50%, transparent) 55%,
color-mix(in srgb, var(--ink) 82%, transparent) 100%);
}
.kt-fb-hero .eyebrow { color: var(--accent-gold); }
.kt-fb-hero h1 { color: var(--paper); }
/* Over a photograph the scrim alone cannot guarantee contrast. */
.kt-fb-hero .eyebrow,
.kt-fb-hero h1,
.kt-fb-hero .kt-hero-lede {
text-shadow: 0 1px 14px color-mix(in srgb, var(--ink) 70%, transparent);
}
/* Step rows on the fish ball page: the prose fills its grid column rather than
holding .kt-prose's 34rem reading measure, which inside a 468px column would
have done nothing except sit left-aligned at an arbitrary width. */
.feature-step.kt-prose { max-width: none; margin-inline: 0; }
.feature-step.kt-prose > p:first-child { margin-top: 0; }
/* ── Behind a KanTaw Banquet: three columns, matching the other step sections
on that page. Previously one 640px column stacked 1560px tall. ── */
.kt-bq-head {
margin-top: .45rem;
font-family: 'Newsreader', 'Noto Sans SC', 'Noto Sans Myanmar', Georgia, serif;
font-size: 1.12rem;
line-height: 1.35;
text-wrap: balance;
}
.kt-bq-head[hidden] { display: none; }
/* Fill the column rather than holding .kt-prose's 34rem reading measure,
which inside a ~300px column would simply do nothing. */
.kt-bq-body.kt-prose { max-width: none; margin-inline: 0; margin-top: .9rem; }
.kt-bq-body.kt-prose p { margin-top: .8em; font-size: .95rem; }
.kt-bq-body.kt-prose > p:first-child { margin-top: 0; }
/* ── Banquet sets side by side ──
The cards were 34rem, centred and stacked, which left most of the container
empty and made the section three screens long. ── */
.kt-set-grid { display: grid; gap: clamp(1.25rem, 3vw, 2.25rem);
grid-template-columns: 1fr; justify-items: center; }
@media (min-width: 820px) { .kt-set-grid { grid-template-columns: repeat(3, 1fr); } }
.kt-set-grid .kt-set + .kt-set { margin-top: 0; } /* the grid gap spaces them */
/* width:100% is load-bearing, not belt-and-braces. .kt-set centres itself with
`margin-inline: auto`, and a grid item with an auto margin is sized to
fit-content instead of stretching — the stacked card collapsed from its 34rem
measure to 338px. The grid centres with justify-items instead. */
.kt-set-grid .kt-set { width: 100%; }
/* Below the breakpoint the cards are still stacked, so .kt-set keeps its 34rem
measure and stays centred — dropping it there would stretch one list of short
dish names across the full container on a tablet. */
@media (min-width: 820px) {
/* In a column the card fills its track instead of holding a reading measure. */
.kt-set-grid .kt-set { max-width: none; margin-inline: 0; }
/* Tightened to fit a ~300px track without every dish name wrapping twice. */
.kt-set-grid .kt-set-dish { font-size: .95rem; grid-template-columns: 2.2rem 1fr; }
.kt-set-grid .kt-set-list { gap: .62rem; }
.kt-set-grid .kt-set-label { margin-bottom: 1.1rem; }
}
/* The count sits in a gold pill so a three-word phrase beside the set name
still reads as a tag rather than as a second half of the title. */
.kt-set-grid .kt-set-count {
flex: none;
padding: .18rem .55rem; border-radius: 999px;
background: color-mix(in srgb, var(--brand-gold) 22%, transparent);
color: color-mix(in srgb, var(--ink) 70%, transparent);
font-size: .7rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
/* The label is a flex row; at 304px the name and the pill will not both fit on
one line in every language, so let it wrap instead of squeezing the name. */
.kt-set-grid .kt-set-label { flex-wrap: wrap; gap: .45rem; }
.kt-set-foot { margin-top: clamp(1.75rem, 4vh, 2.5rem); }
@media print { .kt-set-grid { grid-template-columns: 1fr; } }
/* ── Banquet page: breaking up the repeated 01/02/03 grid ──
Four sections in a row used the same numbered three-column grid, for four
different kinds of content. Only two of them were sequences. ── */
/* "How we serve": three alternatives, marked with a rule rather than a number.
.rule-gold is 56x3; this is the same bar with the spacing the column needs. */
.kt-serve-mark { width: 40px; height: 3px; border: 0; border-radius: 2px;
background: var(--accent-gold); margin: 0 auto 1.1rem; }
/* "Why families choose us": the hall photograph beside the three reasons. */
.kt-why { display: grid; gap: clamp(2rem, 5vw, 3.5rem);
grid-template-columns: 1fr; align-items: center; }
@media (min-width: 860px) { .kt-why { grid-template-columns: 1fr 1fr; } }
.kt-why-cap { margin-top: .85rem; font-size: .88rem; text-align: center;
color: color-mix(in srgb, var(--ink) 55%, transparent); }
@media (min-width: 860px) { .kt-why-cap { text-align: left; } }
/* Reasons read in no order, so they are separated by a hairline rather than
numbered. Left-aligned: these are sentences, not labels. */
.kt-why-list { text-align: left; }
.kt-reason + .kt-reason { margin-top: 1.5rem; padding-top: 1.5rem;
border-top: 1px solid color-mix(in srgb, var(--accent-gold) 32%, transparent); }
.kt-reason-h { font-family: 'Newsreader', 'Noto Sans SC', 'Noto Sans Myanmar', Georgia, serif;
font-size: 1.22rem; line-height: 1.3; }
.kt-reason-b { margin-top: .45rem; line-height: 1.65;
color: color-mix(in srgb, var(--ink) 72%, transparent); text-wrap: pretty; }
/* "How it works": a real sequence, so it keeps its numbers — but drawn as a
connected rail, which reads as a process and not as a third text grid. */
.kt-stepper-label { text-align: center; margin-top: clamp(2.5rem, 6vh, 4rem); }
.kt-stepper { list-style: none; margin: 1.75rem 0 0; padding: 0;
display: grid; gap: 1.9rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .kt-stepper { grid-template-columns: repeat(3, 1fr); gap: 0; } }
.kt-step { position: relative; text-align: center; padding-inline: .8rem; }
.kt-step-no { position: relative; z-index: 1;
display: inline-grid; place-items: center;
width: 2.5rem; height: 2.5rem; border-radius: 999px;
border: 2px solid color-mix(in srgb, var(--accent-gold) 85%, transparent);
font-family: 'Inter', sans-serif; font-size: .78rem; font-weight: 700;
letter-spacing: .04em; color: var(--accent-gold); }
/* The rail is drawn only BETWEEN the discs — two half-lines per step, each
stopping 1.55rem short of the centre (the 1.25rem radius plus a gap) — so no
line ever passes behind a number and the discs need no opaque fill to punch
a hole in it. That matters here: this section sits on a red-tinted field, and
a paper-filled disc would read as a hole rather than a ring. */
@media (min-width: 760px) {
.kt-step::before, .kt-step::after {
content: ''; position: absolute; top: 1.25rem; height: 2px;
background: color-mix(in srgb, var(--accent-gold) 38%, transparent);
}
.kt-step::before { left: 0; right: 50%; margin-right: 1.55rem; }
.kt-step::after { right: 0; left: 50%; margin-left: 1.55rem; }
.kt-step:first-child::before, .kt-step:last-child::after { content: none; }
}
.kt-step-name { margin-top: .85rem; font-size: 1.05rem; font-weight: 600; line-height: 1.3; }
.kt-step-note { margin-top: .4rem; font-size: .88rem; line-height: 1.55;
color: color-mix(in srgb, var(--ink) 62%, transparent); text-wrap: pretty; }
@media print { .kt-stepper { grid-template-columns: 1fr; }
.kt-step::before, .kt-step::after { content: none; } }
/* ---- Collapsed menu: collapse the HEIGHT, not just the opacity ----
The menu lives inside the sticky header, so it occupies real layout space —
303px of it. Fading alone left that height in place for the whole animation
and then dropped it in a single frame when display:none landed, so the entire
page lurched upward AFTER the fade had finished. Animating grid-template-rows
0fr -> 1fr collapses the height over the same duration, so the page slides
instead of snapping.
display:grid is written as :not(.hidden) deliberately. Tailwind's .hidden and
a bare [data-mobile-menu] have equal specificity, so with styles.css loading
after app.css a plain rule would beat .hidden and the menu could never hide.
Duration must stay in step with KT_MENU_MS in main.js. */
[data-mobile-menu]:not(.hidden) { display: grid; }
[data-mobile-menu] {
grid-template-rows: 0fr;
opacity: 0;
transition: grid-template-rows .22s ease, opacity .16s ease;
}
[data-mobile-menu].is-open { grid-template-rows: 1fr; opacity: 1; }
/* min-height:0 is required — a grid item's automatic minimum size is its
content, which would refuse to shrink below it and defeat the 0fr row.
Horizontal padding ONLY. A 0fr row collapses the content box, not the
padding box, so vertical padding here survives the collapse and leaves a
strip behind — which display:none then drops in one frame, reintroducing
exactly the jump this is meant to remove. The vertical rhythm comes from
.mobile-link's own padding instead. */
.kt-menu-inner {
display: flex; flex-direction: column;
overflow: hidden; min-height: 0;
padding-inline: .75rem;
}
@media (prefers-reduced-motion: reduce) {
[data-mobile-menu] { transition: none; }
}
/* A pull-quote that completes a colon is the tail of the sentence above it,
not a quotation — main.js tags it .kt-beat--cont. Without this the gold rule
and the 1.6em gap fall between "…a traditional Fuzhou fish ball:" and the
words that finish it. Keeps the display size and weight; drops the divider. */
.kt-prose p.kt-beat--cont { margin-top: .55em; padding-top: 0; border-top: 0; }
/* The non-pork note follows a photo row, so centred at container width it read
as a caption for the photograph above it. It needs a reading measure and a
separator — but NOT a full-width border-top: the note is narrower than the
container, so that rule began part-way across and appeared to slice through
the photograph above. A short centred bar (the site's own .rule-gold idiom)
marks the break without touching anything.
The top margin lives here, not on a Tailwind class. It was mt-14, which is
NOT in the committed app.css and so silently did nothing — invisible until
the border landed flush against the bottom of the photo. */
.kt-fb-note {
max-width: 44rem; margin-inline: auto;
margin-top: clamp(3rem, 7vh, 4.5rem);
}
.kt-fb-note::before {
content: ""; display: block;
width: 56px; height: 3px; margin: 0 auto 1.6rem;
background: var(--accent-gold); border-radius: 2px;
}
/* ---- Story spine: tighter leading ----
.kt-prose sets line-height 1.9 site-wide, which on this page stacked ~48
lines of biography and added roughly 270px of pure air. 1.7 is where
editorial body text usually sits; the paragraph gap comes down with it.
Scoped to .kt-era-prose on purpose — the delivery and fish ball pages have
just been tuned and are left exactly as they are. */
.kt-era-prose.kt-prose p { line-height: 1.7; margin-top: .95em; }
/* ---- Offering set cards: meats / + / dishes on three lines ----
As one sentence the five-set folded mid-phrase ("… Prawn +" then "12 Dishes"),
which read as an accident of width rather than a decision. Three centred
beats give the card a deliberate shape and make the two cards scan alike
even though one lists three items and the other five. */
.kt-prayer-set .kt-set-meats { margin-top: .7rem; text-wrap: balance; }
.kt-prayer-set .kt-set-plus {
display: block; margin: .5rem 0; line-height: 1;
font-size: 1rem; font-weight: 700; color: var(--accent-gold);
}
.kt-prayer-set .kt-set-dishes {
margin-top: 0; font-weight: 600;
color: color-mix(in srgb, var(--ink) 85%, transparent);
}
/* ---- Story spine: giving a single-paragraph chapter an entry point ----
Every era is now one unbroken block of prose. A reader needs somewhere for
the eye to land, and the drop cap only works in English — Myanmar stacks
diacritics above and below the base letter, Chinese is full-width, and an
enlarged ::first-letter collides with the line above in both.
::first-line works in all three: it emphasises whatever falls on the opening
line regardless of script, and it costs no markup and changes no text. Kept
deliberately quiet — a shade darker and fractionally larger, enough to read
as an opening rather than as a heading. */
.kt-era-prose.kt-prose > p:first-child::first-line {
color: var(--ink);
font-size: 1.06em;
}
/* The 1987 entry is one sentence beside a photograph, not a chapter — giving
its single line "opening line" emphasis would just make it look bold. */
.kt-era--photo-led .kt-era-prose.kt-prose > p:first-child::first-line {
color: inherit;
font-size: inherit;
}
/* ---- The closing tradition section ----
Centred, because the copy is five short declarations rather than continuous
prose — one statement per line, which is exactly what centring is for. It was
briefly left-aligned when this block was a single twelve-line paragraph;
centred prose gives the eye no left edge to return to. If it ever becomes
long-form again, left-align it again.
The closing beat KEEPS its gold rule here. .kt-prose--center suppresses that
rule (a divider above centred text usually reads as clutter), but with five
separated statements above it the rule is what marks the last one as the
conclusion rather than a sixth item. */
.kt-trad-body { text-align: center; margin-inline: auto; }
/* ---- Offering set: the pork detail, on its own quiet line ----
It used to sit in brackets inside the main list, which pushed that line to
two or three lines and broke it mid-word ("Pork (Three-" / "Layer Pork
Belly)"). Pulled out, the list above reads as three or four clean items and
the detail reads as what it is — a note about one of them.
Separated by a hairline rather than a gap: at this size a gap alone reads as
a fourth item in the list rather than a footnote to it. */
.kt-prayer-set .kt-set-variant {
margin-top: 1rem;
padding-top: .85rem;
border-top: 1px solid color-mix(in srgb, var(--accent-gold) 30%, transparent);
font-size: .84rem;
line-height: 1.55;
color: color-mix(in srgb, var(--ink) 58%, transparent);
text-wrap: balance;
}
.kt-prayer-set .kt-set-variant:empty { display: none; }
/* ---- Offering set: one item per line ----
data-i18n-para emits a per line, so these are real paragraphs and carry
.kt-prose-ish margins by default. They are a list, not prose — tighten them
to a stacked rhythm, and give the pork line (the only one with a bracketed
detail) room to wrap without colliding with its neighbours. */
.kt-prayer-set .kt-set-meats p { margin: 0; line-height: 1.55; }
.kt-prayer-set .kt-set-meats p + p { margin-top: .4rem; }
/* A column with two body paragraphs needs a gap between them; each is its own
data-i18n-para block, so the usual paragraph margin does not apply across
the boundary. */
.kt-bq-body + .kt-bq-body { margin-top: .9rem; }
/* ---- Sticky header: nearly solid ----
The bar carried bg-paper/90 — paper at 90% with an 8px backdrop blur. Over a
bright photograph that much show-through made it read as a panel hovering
above the page rather than a bar attached to the top of it, and it put a
moving image directly behind the wordmark and the language buttons.
97% keeps the frosted character but gives the type something solid to sit on.
Written here rather than as bg-paper/97 on the element: Tailwind is compiled
to a committed app.css with no build step, and only the /90 opacity variant
exists in that build. bg-paper/97 would compile to nothing and leave the
header fully transparent. The class stays on the element as a fallback in
case this stylesheet ever fails to load; header.sticky (0,1,1) outranks
.bg-paper\/90 (0,1,0), so this wins when both are present. */
header.sticky {
background: color-mix(in srgb, var(--paper) 97%, transparent);
}