/* diaries.html — the journal. Loaded after site.css.
*
* Restructured 17 Aug 2026. This used to be a hub of horizontal rails whose cards left the
* page; it is now one page that HOLDS the writing, in two categories. assets/restaurants.css
* and assets/article.css were folded in here when /restaurants and
* /article-contemporary-indian-wear were consolidated into this page, so the rules that
* style a review and the rules that style long-form prose now live together — which is where
* they belong, because they now render in the same document.
*
* The rail rules are gone with the rails. What replaced them:
*
* .cat-jump the category strip under the h1
* .cat one category = one
* .entry one post, in either of two shapes:
* .entry-article long-form prose (h4 sections, .fit asides, .shop-cta)
* .rev a review: photograph beside the text, verdict chip, order line
*
* There is still NO JavaScript on this page.
*/
.btn.saf{border-color:var(--olive);background:var(--saffron);color:var(--void)}
.btn.saf:hover{background:var(--turmeric);border-color:var(--turmeric);color:var(--bone)}
/* ---------- category jump strip ---------- */
/* Under the h1, above everything. It is the page's table of contents and its primary
navigation: with the writing inline, "which category" is the only choice a reader has to
make, so it is the first thing offered and it is a real anchor list rather than a widget. */
.cat-jump{
display:flex;flex-wrap:wrap;gap:8px;
margin-top:22px;
}
.cat-jump a{
display:inline-flex;align-items:center;gap:7px;
min-height:44px;padding:0 15px;
border:1px solid rgba(232,169,60,.4);
font-size:var(--fs-xs);letter-spacing:.05em;text-transform:uppercase;
color:var(--magenta);
transition:background .15s,color .15s,border-color .15s;
}
.cat-jump a:hover,.cat-jump a:focus-visible{background:var(--magenta);color:var(--void)}
.cat-jump a b{font-weight:600;opacity:.75;font-size:var(--fs-2xs)}
/* ---------- the featured grid ---------- */
.latest{border-bottom:1px solid rgba(242,239,230,.10)}
/* ---------- a category ---------- */
.cat{border-bottom:1px solid rgba(242,239,230,.10);padding-block:26px 44px}
/* Alternating bands, matching the rhythm main > section:nth-of-type(even) gives the rest of
the site. The scroll-margin keeps a jumped-to category clear of the sticky header. */
.cat:nth-of-type(even){background:var(--band)}
.cat{scroll-margin-top:88px}
.cat-head{
display:flex;flex-direction:column;gap:10px;
padding:18px 0 20px;margin-bottom:26px;
border-bottom:1px solid rgba(232,169,60,.22);
}
.cat-head h2{
font-weight:500;font-size:var(--fs-2xl);line-height:var(--lh-tight);
letter-spacing:-.01em;text-transform:uppercase;color:var(--bone);
}
.cat-note{font-size:var(--fs-s);color:var(--bone-dim);max-width:var(--measure-s);margin-top:6px}
.cat-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cat-count{
font-size:var(--fs-2xs);letter-spacing:.06em;text-transform:uppercase;
color:var(--bone-dim);opacity:.85;white-space:nowrap;
}
.rail-all{
font-size:var(--fs-2xs);letter-spacing:.06em;text-transform:uppercase;color:var(--magenta);
display:flex;align-items:center;min-height:44px;
}
.rail-all:hover{color:var(--saffron)}
@media (min-width:721px){
.cat{padding-block:30px 56px}
.cat-head{
flex-direction:row;justify-content:space-between;align-items:flex-start;gap:24px;
padding:22px 0 24px;margin-bottom:32px;
}
.cat-meta{flex-direction:column;align-items:flex-end;gap:2px;text-align:right;flex:0 0 auto}
}
/* ---------- a category rail ---------- */
/* Restored 24 Aug 2026, on a different footing to the rails removed on 17 Aug. Those were a
hub whose cards left the page for three other URLs; these hold posts that live under
/diaries and end in a tile that goes to the category's own archive. Vertical scroll moves
across categories, horizontal moves within one.
Still no JavaScript: the track is a scroll container with snap points, which is what makes
touch swipe and trackpad scroll work natively. tabindex="0" on the container is required —
a scrollable region with no focusable wrapper cannot be reached or scrolled by keyboard. */
.rail{
overflow-x:auto;overflow-y:hidden;
scroll-snap-type:x proximity;
scroll-padding-left:var(--gutter);
/* The track runs off the right edge of the wrap so a card is visibly cut — the overflow
has to be legible before the reader touches anything, or the row reads as finished. */
margin-right:calc(var(--gutter) * -1);
padding-bottom:14px;
}
.rail:focus-visible{outline:2px solid var(--magenta);outline-offset:4px}
.rail-track{display:flex;gap:16px;padding-right:var(--gutter)}
.rail-track > *{flex:0 0 clamp(258px,78vw,320px);scroll-snap-align:start}
/* Always visible rather than overlay-on-scroll: on a desktop mouse this bar is the only
thing that says the row continues, and an overlay scrollbar that fades out says nothing. */
.rail{scrollbar-width:thin;scrollbar-color:rgba(232,169,60,.5) rgba(242,239,230,.10)}
.rail::-webkit-scrollbar{height:8px}
.rail::-webkit-scrollbar-track{background:rgba(242,239,230,.10)}
.rail::-webkit-scrollbar-thumb{background:rgba(232,169,60,.5)}
.rail::-webkit-scrollbar-thumb:hover{background:var(--saffron)}
/* The last card in the track: the way into the category's archive. Sized like a card so the
row keeps its rhythm, but flat and typographic so it never reads as a post. */
.rail-tile{
display:flex;flex-direction:column;justify-content:center;gap:10px;
padding:24px 22px;
border:1px dashed rgba(232,169,60,.45);background:var(--void-2);
color:var(--bone);
transition:background .15s,border-color .15s;
}
.rail-tile:hover,.rail-tile:focus-visible{background:var(--band);border-color:var(--saffron)}
.rail-tile-count{font-size:var(--fs-2xl);line-height:1;color:var(--saffron)}
.rail-tile-label{
font-size:var(--fs-2xs);letter-spacing:.06em;text-transform:uppercase;color:var(--magenta);
}
/* Three lines, then an ellipsis. Blurbs in posts.json run to four lines at this width and
made neighbouring cards ragged even with .more pinned to the bottom. */
.post-blurb{
display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
overflow:hidden;
/* --bone at .88 rather than flat --bone-dim (25 Aug 2026). Same job — the blurb still sits
under the title in the hierarchy — but the dimmed bone read as washed out against the
card ground, and this is the sentence that decides whether the post gets opened. */
/* .post p in site.css sets the dim colour and outranks a bare .post-blurb, so this has to
match on both. */
color:var(--bone);opacity:.88;
}
.post p.post-blurb{color:var(--bone)}
/* And on hover or keyboard focus the whole card's text comes up to full, so the card the
pointer is on is unmistakably the selected one rather than merely the one with a border. */
.post-link:hover .post-blurb,
.post-link:focus-visible .post-blurb{opacity:1}
/* ---------- a group inside a category ---------- */
/* Food has two: the Indian restaurants, then the vegan places. A group is a heading and a
note, not a container — the entries are siblings after it, so a review is never nested two
levels deep for the sake of a subtitle. */
.entry-group{margin:34px 0 22px}
.entry-group:first-of-type{margin-top:0}
.group-head{
font-weight:600;font-size:var(--fs-xl);line-height:var(--lh-tight);
text-transform:uppercase;letter-spacing:.01em;color:var(--magenta);
}
.group-note{font-size:var(--fs-m);color:var(--bone-dim);max-width:var(--measure);margin-top:8px}
/* ---------- verdict key ---------- */
/* The third chip used to carry class="skip", which collides with the skip-link utility in
site.css — position:absolute; left:-9999px. It rendered off-screen and the key was silently
two-thirds of itself. It is .trap now.
.real is a saffron FILL, so the text on it is --void: --bone on saffron measures 1.16:1. */
.key{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 30px}
.key span{
font-size:var(--fs-2xs);letter-spacing:.05em;text-transform:uppercase;
padding:6px 10px;font-weight:500;
}
.key .real{color:var(--void);background:var(--saffron)}
.key .mild{color:var(--bone);border:1px solid var(--chilli)}
.key .trap{color:var(--bone-dim);border:1px solid rgba(242,239,230,.3)}
/* An OUTLINE, not an avocado fill. --avocado is a mid-luminance green: dark text on it
measures 2.69:1 and light text 3.14:1, so no text passes AA on that fill at any weight —
it is a --paprika situation and the same rule applies (see the palette note in site.css).
The olive outline reads as a sibling of the filled .real chip rather than a competitor,
and the text is 7.26:1 on the ground and 9.85:1 on the band. */
.key .vegan{color:var(--olive);border:1px solid var(--olive)}
/* ---------- an entry: shared ---------- */
.entry{scroll-margin-top:96px}
.entry + .entry{border-top:1px solid rgba(242,239,230,.10);margin-top:34px;padding-top:34px}
.entry-meta{
font-family:var(--mono);
font-size:var(--fs-2xs);letter-spacing:.05em;text-transform:uppercase;
color:var(--bone-dim);margin:8px 0 16px;
}
.entry-meta time{color:var(--magenta)}
/* ---------- a review ---------- */
/* Stacked on a phone: a 400px image column would leave the text about 90px wide at 375px. */
.rev{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.rev .frame{aspect-ratio:3/2}
.rev .rhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rev h3{
font-weight:500;font-size:var(--fs-xl);line-height:var(--lh-tight);
letter-spacing:-.01em;color:var(--bone);
}
.rev p{color:var(--bone-dim);max-width:var(--measure);margin-bottom:12px}
.rev .order{color:var(--bone);margin-bottom:0}
.rev .order b{color:var(--magenta)}
.rv{
font-size:var(--fs-2xs);letter-spacing:.05em;text-transform:uppercase;
padding:5px 9px;font-weight:500;
}
.rv.real{color:var(--void);background:var(--saffron)}
.rv.mild{color:var(--bone);border:1px solid var(--chilli)}
/* Outline for the same reason as .key .vegan above. */
.rv.vegan{color:var(--olive);border:1px solid var(--olive)}
@media (min-width:721px){
.rev{grid-template-columns:340px minmax(0,1fr);gap:28px;align-items:start}
}
/* ---------- the long-form dispatch ---------- */
.entry-article h3{
font-weight:400;font-size:var(--fs-2xl);line-height:var(--lh-tight);
letter-spacing:-.01em;color:var(--bone);max-width:24ch;
}
/* 66ch of Plex Sans is 83 characters, not 66 — see the --measure note in site.css. */
/* ONE OWNER FOR THE HORIZONTAL GUTTER (24 Aug 2026).
*
* .post-main is a .wrap with its padding zeroed, so the page gutter used to be reapplied by
* each child that happened to need it: p had padding-left:20px, ul had none, and li's
* absolutely-positioned "—" marker sits at left:0 — which is the CONTAINER's left edge, so
* every bullet dash printed flush against the phone screen while the paragraph text beside
* it sat 20px in. A ragged left margin down the whole article.
*
* The gutter belongs to the column, not to the elements inside it. With it here, an element
* type this file has never seen — a blockquote, a figure, a table, whatever tomorrow's post
* contains — is correctly inset without anyone remembering to pad it. */
.entry-body{
max-width:var(--measure);
padding-left:var(--gutter);
padding-right:var(--gutter);
}
/* --fs-l and the long leading, not the --fs-m the shared .prose rule hands out: this is the
one piece of sustained reading on the site — six minutes of it — and it gets the same
17px/1.72 the standalone article page used. A review is three sentences and stays at 16. */
.entry-body p{font-size:var(--fs-l);line-height:var(--lh-long);margin-bottom:20px}
.entry-body p.lede{
font-size:1.25rem;line-height:1.5;color:var(--bone);
border-left:2px solid var(--magenta);padding-left:20px;
}
/* h4, not h2: on this page the post title is an h3 under the category's h2. The content file
is written with h4 for that reason. */
/* h2 as well as h4: on a post page the post title is the h1, so a body's own sections are
h2s (content/hello-world.html). The long-form fashion dispatch predates the split and
still uses h4 — it was written for a page where the title was an h3. Both look the same,
because visually they are the same thing: a section break inside one piece of writing. */
.entry-body h2, .entry-body h4{
font-family:var(--mono);
font-weight:500;font-size:var(--fs-xl);line-height:var(--lh-tight);
text-transform:uppercase;letter-spacing:-.01em;color:var(--magenta);
margin:38px 0 10px;padding-top:22px;
border-top:1px solid rgba(242,239,230,.12);
}
.entry-body h4 .no{color:var(--magenta);margin-right:12px}
.entry-body .fit{
background:var(--void-2);border-left:2px solid var(--olive);
padding:16px 20px;margin:16px 0 24px;
font-size:var(--fs-m);color:var(--bone-dim);line-height:var(--lh-read);
}
.entry-body .fit b{
color:var(--olive);font-family:var(--mono);text-transform:uppercase;
font-size:var(--fs-2xs);letter-spacing:.06em;display:block;margin-bottom:4px;
}
.entry-body a.brand-lnk{
color:var(--magenta);border-bottom:1px solid rgba(240,180,41,.4);
transition:color .15s,border-color .15s;
}
.entry-body a.brand-lnk:hover{color:var(--magenta);border-color:var(--magenta)}
.entry-body ul{list-style:none;margin:16px 0 24px}
.entry-body ul li{
font-size:var(--fs-l);line-height:var(--lh-read);color:var(--bone);
padding-left:22px;position:relative;margin-bottom:14px;
}
.entry-body ul li::before{content:"—";position:absolute;left:0;color:var(--magenta)}
.entry-body ul li b{color:var(--magenta);font-weight:600}
.shop-cta{
border:1px solid rgba(232,169,60,.28);background:var(--void-2);
padding:24px 20px 26px;margin-top:34px;max-width:var(--measure);
}
.shop-cta h2, .shop-cta h4{
font-family:var(--mono);
font-weight:600;font-size:var(--fs-l);text-transform:uppercase;
letter-spacing:.01em;color:var(--magenta);margin-bottom:8px;
}
.shop-cta p{color:var(--bone-dim);margin-bottom:20px}
@media (min-width:641px){
.shop-cta{padding:30px 30px 32px}
}
/* ---------- the closing block ---------- */
.rail-end{border-bottom:none}
/* =====================================================================
THE INDEX CARDS (added 17 Aug 2026 with the split into post pages)
=====================================================================
Every post on the index is now a card and only a card — the full text moved to
/diaries/. Two things the old cards did not carry, and both are standard on any blog
index worth reading: the date, and how long the thing takes.
The card is an wrapping a single , rather than an wrapping everything.
The whole card is still clickable, but the markup says "an article, which links to itself"
instead of "a link, which happens to contain a heading". */
.post{scroll-margin-top:96px}
.post-link{display:flex;flex-direction:column;height:100%;color:inherit}
.post-link:hover h3{color:var(--magenta)}
/* Mono, small caps, quiet: this line is orientation, not content. It sits ABOVE the title —
on an index of dated writing, "when" is the first question, and putting it under the
heading buries it beneath the blurb. */
.post-meta{
font-family:var(--mono);
font-size:var(--fs-2xs);letter-spacing:.05em;text-transform:uppercase;
color:var(--bone-dim);margin-bottom:8px;
}
.post-meta time{color:var(--magenta)}
.post .pbody .rv{align-self:flex-start;margin-bottom:10px}
/* =====================================================================
A POST PAGE
===================================================================== */
.post-head{border-bottom:1px solid rgba(242,239,230,.10);padding:30px 0 26px}
.crumb-nav a{color:var(--magenta)}
.crumb-nav a:hover{color:var(--saffron)}
.crumb-nav span{opacity:.5;margin:0 4px}
.post-head h1{
font-weight:400;font-size:var(--fs-3xl);line-height:var(--lh-tight);
letter-spacing:-.01em;color:var(--bone);max-width:22ch;margin:14px 0 12px;
}
.post-byline{
font-family:var(--mono);
font-size:var(--fs-2xs);letter-spacing:.05em;text-transform:uppercase;
color:var(--bone-dim);display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.post-byline time{color:var(--magenta)}
/* The blurb is the standfirst here — the same sentence that sold the post on the index,
doing its second job as the opening summary. */
.post-head .lede{font-size:var(--fs-l);color:var(--bone-dim);max-width:var(--measure);margin-top:16px}
.post-main{padding:26px 0 44px}
.post-hero{aspect-ratio:16/9;margin-bottom:30px;max-width:var(--measure-l,860px)}
.post-main .order{
color:var(--bone);max-width:var(--measure);margin-top:20px;
border-left:2px solid var(--magenta);padding-left:14px;
}
.post-main .order b{color:var(--magenta)}
/* Previous / next inside the same category. "More like this one" beats "whatever was written
the same week", which is what a flat chronological pager would give you. */
.post-nav{
display:grid;grid-template-columns:minmax(0,1fr);gap:12px;
margin-top:40px;padding-top:26px;border-top:1px solid rgba(242,239,230,.10);
}
.post-nav a{
display:flex;flex-direction:column;gap:6px;padding:16px 18px;
border:1px solid rgba(242,239,230,.14);background:var(--void-2);
min-height:44px;justify-content:center;
}
.post-nav a:hover{border-color:rgba(232,169,60,.45)}
.post-nav a span{
font-family:var(--mono);font-size:var(--fs-2xs);
letter-spacing:.05em;text-transform:uppercase;color:var(--magenta);
}
.post-nav a b{font-weight:500;color:var(--bone);font-size:var(--fs-s)}
.post-nav .next{text-align:right}
.post-related{border-top:1px solid rgba(242,239,230,.10);background:var(--band);padding-block:34px 44px}
.post-related .sec-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.post-related h2{
font-weight:500;font-size:var(--fs-xl);letter-spacing:-.01em;color:var(--bone);
}
@media (min-width:721px){
.post-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
.post-head{padding:44px 0 34px}
.post-main{padding:34px 0 56px}
}
/* ---------- the article column (24 Aug 2026) ----------
*
* A post used to be four different widths stacked flush-left inside a centred 1280 wrap:
* H1 792, lede 551, hero 860, body 518. Measured at 1611px that left the reading column
* ending 927px from the right edge, with a ragged right margin in four places, for the
* whole length of a 1,200-word essay.
*
* Left-aligned prose in a centred wrap IS this site's language — the homepage does the same
* thing — and it works there because a full-width grid of tiles sits underneath and fills
* the space. An article has nothing on the right for thousands of pixels, which is the one
* page type where that pattern reads as breakage rather than style.
*
* So the article centres, and it is the only page type that does. Two widths, not four: the
* text column, and a media column slightly wider than it, which is the standard long-form
* rhythm — the image is allowed to breathe past the measure without the measure chasing it.
*
* SCOPED BY STYLESHEET, not by a class: diaries.css is only ever loaded on Diaries pages,
* so .page-head here cannot reach the wardrobe's shelves, which share that class name and
* are deliberately left alone for now.
*/
.post-head .wrap,
.page-head .wrap,
.post-main{
--post-col:720px; /* text: ~68ch at 17px once the 20px gutters are taken off */
--post-media:860px; /* hero: wider than the measure, deliberately */
}
/* Every child of the two heading blocks shares one column, so the crumb, the H1, the byline
and the lede finally agree on both edges.
*
* LEFT, not centred (25 Aug 2026). The column is still 720px; what changed is where the
* slack goes. Centring put the heading on an axis of its own, disagreeing with the wardrobe
* and the homepage, which both hang their heads off the page gutter — and on a post page it
* now disagrees with the contents rail in the left margin as well. One left edge down the
* whole site. */
.post-head .wrap > *,
.page-head .wrap > *{
max-width:var(--post-col);
margin-inline:0;
}
/* site.css caps these at 20ch and --measure-s respectively, which is what made the H1 and
the lede disagree with each other by 240px. */
.post-head h1,
.page-head h1,
.post-head .lede,
.page-head .lede{max-width:var(--post-col)}
/* The body of the post, and everything that runs with it. */
.entry-body,
.post-main .order,
.shop-cta,
.post-nav{margin-inline:0;max-width:var(--post-col)}
/* The hero keeps its wider measure and shares the same left edge. */
.post-hero{max-width:var(--post-media);margin-inline:0}
/* Card grids are untouched: .grid3 already fills the wrap, so it has none of the void this
block exists to remove, and pulling it in would waste the width it uses well. */
/* =====================================================================
THE POST PAGE ON A DESKTOP (25 Aug 2026)
=====================================================================
* The measure stays 720px. It is the right width for sustained reading and widening it
* would cost the eye the line return, so the empty half of a 1440px screen had to be filled
* with something other than more text.
*
* Two columns of running prose was the obvious answer and is the wrong one on a page that
* scrolls: the reader reaches the foot of column one, scrolls back up for column two, and
* repeats it every screenful. Newspapers get away with it because paper does not scroll.
*
* So the left margin carries a contents rail instead — the post's own section headings, as
* anchors, sticky to the viewport. It gives a six-minute read a spine, it is the width
* finally doing something for the reader, and it needs no JavaScript, which this site does
* not load. Below 1100px it collapses back to a plain block at the top of the post, and the
* page is exactly what it was.
*
* 1100px, not 1280: 200 + 48 + 860 is 1108 of content, and the gutters carry the rest.
* A 1280 breakpoint would leave every 1366 laptop out of a layout it has the room for. */
@media (min-width:1100px){
/* The head runs on the SAME two columns with its first cell empty, so the H1, the byline
and the lede start on the text's left edge rather than 248px to the left of it. Without
this the contents rail is the only thing under the heading, and the page has two left
edges instead of one. */
.post-head .wrap{
display:grid;
grid-template-columns:200px minmax(0,var(--post-media));
column-gap:48px;
}
.post-head .wrap > *{grid-column:2}
.post-main{
/* .post-main is a .wrap, and the rule above zeroes a .wrap's gutters to get the vertical
padding it wants. Harmless while everything inside carried its own inset; not harmless
once the grid's first column is a real element, which would otherwise sit flush against
the edge of the screen. */
padding-inline:var(--gutter);
display:grid;
grid-template-columns:200px minmax(0,var(--post-media));
column-gap:48px;
align-items:start;
}
/* Everything that was in the single column stays in the single column. */
.post-main > *{grid-column:2}
.post-toc{
grid-column:1;
/* Spanning every row is what gives the sticky element a containing block taller than
itself — without it there is nothing to stick within. 99 is simply more rows than a
post will ever have; grid ignores the surplus. */
grid-row:1 / span 99;
position:sticky;
/* Clears the 64px bar with the same 88px the site's anchor offset uses. */
top:88px;
margin:0;padding:0;border:0;background:none;
}
/* The asides were always allowed to break the measure; now there is somewhere to break
into. They run out to the hero's edge, which is the only other width on this page. */
.entry-body .fit{
margin-right:calc(var(--post-col) - var(--post-media));
}
/* The gutter is the grid's now. Left on the prose as well it would inset the text 30px
from the hero above it, which is the misalignment this layout exists to remove. */
.entry-body{padding-inline:0}
}
/* The contents rail itself. These rules apply at every width — below 1100px it is simply a
block sitting above the hero, which is the ordinary mobile shape for a table of contents
and needs no disclosure widget to open. */
.post-toc{
border-left:2px solid rgba(232,169,60,.34);
padding:2px 0 2px 16px;
/* .post-main is a .wrap with its gutters zeroed for the vertical padding it wants, and
everything inside carries its own inset. Below 1100px this is one of those things, or
its rule would sit hard against the edge of the phone. The desktop block above resets
the margin to 0, where the grid owns the gutter instead. */
margin:0 var(--gutter) 26px;
}
.post-toc-h{
font-family:var(--mono);
font-size:var(--fs-2xs);letter-spacing:.1em;text-transform:uppercase;
color:var(--magenta);margin-bottom:10px;
}
.post-toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.post-toc li{counter-increment:toc;margin-bottom:2px}
.post-toc a{
display:block;padding:7px 0;
font-size:var(--fs-s);line-height:var(--lh-read);
color:var(--bone);opacity:.75;
transition:opacity .15s,color .15s;
}
.post-toc a::before{
content:counter(toc);
color:var(--magenta);margin-right:10px;font-family:var(--mono);font-size:var(--fs-2xs);
}
.post-toc a:hover,.post-toc a:focus-visible{opacity:1;color:var(--magenta)}