number, kural (lang=ta), translit, meaning
Horizontal 9:1 when the container is ≥ 55rem; below that a 3:4 vertical leaf with holes top and bottom. */
.leaf-strip{container:leaf/inline-size;--hole:9px;--clear:calc(var(--hole) + 14px)}
.leaf-strip__leaf{position:relative;isolation:isolate;display:grid;row-gap:var(--space-3);align-content:center;
max-width:26rem;margin-inline:auto;aspect-ratio:3/4;padding:calc(34px + var(--clear)) var(--space-5);color:var(--ink-soot);
grid-template-areas:"num" "kural" "translit" "meaning"}
.leaf-strip__surface{position:absolute;inset:0;z-index:-1;filter:var(--drop-rest)}
.leaf-strip__surface::before{content:"";position:absolute;inset:0;border-radius:16% 20% 18% 14% / 2.2% 2.6% 2.4% 2%;
background:var(--mat-leaf-v);background-blend-mode:var(--mat-leaf-v-blend); /* hole rims: css/materials.css */
-webkit-mask-image:var(--_mask-v);mask-image:var(--_mask-v);-webkit-mask-composite:source-in;mask-composite:intersect;
--_mask-v:
radial-gradient(circle at 50% 34px,var(--mask-off) var(--hole),var(--mask-on) calc(var(--hole) + .5px)),
radial-gradient(circle at 50% calc(100% - 34px),var(--mask-off) var(--hole),var(--mask-on) calc(var(--hole) + .5px)),
radial-gradient(circle at 0 22%,var(--mask-off) 3px,var(--mask-on) 3.5px),
radial-gradient(circle at 100% 61%,var(--mask-off) 2.5px,var(--mask-on) 3px),
radial-gradient(ellipse 10px 5px at 38% 100%,var(--mask-off) 98%,var(--mask-on))}
.leaf-strip__number{grid-area:num;justify-self:start;padding:.125rem var(--space-2);border-radius:var(--radius-1);background:var(--paper);
color:var(--catalogue-red);font:700 max(var(--text-xs),var(--ta-floor))/max(1.4,var(--ta-lh)) var(--font-ui);box-shadow:0 1px 0 var(--shade-soft);transform:rotate(-1.5deg)}
.leaf-strip__kural{grid-area:kural;margin:0;font-size:1.1875rem;font-weight:500}
.leaf-strip__translit{grid-area:translit;margin:0;font-style:italic;font-size:var(--text-sm);line-height:1.45}
.leaf-strip__meaning{grid-area:meaning;margin:0;font-size:max(var(--text-sm),var(--ta-floor));line-height:max(1.5,var(--ta-lh))}
.leaf-strip__kural,.leaf-strip__translit,.leaf-strip__meaning{max-width:none}
@container leaf (min-width:55rem){
.leaf-strip__leaf{max-width:none;aspect-ratio:9/1;padding:1.25rem 0;row-gap:var(--space-1);align-items:center;
grid-template-columns:5% calc(25% - var(--clear)) calc(2 * var(--clear)) calc(40% - 2 * var(--clear)) calc(2 * var(--clear)) calc(25% - var(--clear)) 5%;
grid-template-rows:auto 1fr;
grid-template-areas:". num . kural . meaning ." ". translit . kural . meaning ."}
.leaf-strip__surface::before{border-radius:2.2% 1.6% 1.9% 2.4% / 38% 44% 40% 36%;
background:var(--mat-leaf);background-blend-mode:var(--mat-leaf-blend);
-webkit-mask-image:var(--_mask-h);mask-image:var(--_mask-h);
--_mask-h:
radial-gradient(circle at 30% 50%,var(--mask-off) var(--hole),var(--mask-on) calc(var(--hole) + .5px)),
radial-gradient(circle at 70% 50%,var(--mask-off) var(--hole),var(--mask-on) calc(var(--hole) + .5px)),
radial-gradient(circle at 17% 0,var(--mask-off) 3px,var(--mask-on) 3.5px),
radial-gradient(circle at 56% 100%,var(--mask-off) 2.5px,var(--mask-on) 3px),
radial-gradient(circle at 88% 0,var(--mask-off) 2px,var(--mask-on) 2.5px),
radial-gradient(ellipse 5px 10px at 100% 38%,var(--mask-off) 98%,var(--mask-on))}
.leaf-strip__number{align-self:end}
.leaf-strip__translit{align-self:start}
.leaf-strip__kural{font-size:1.25rem;text-align:center}
.leaf-strip__meaning{align-self:center}
}
/* Force the phone layout anywhere (e.g. narrow side columns) */
.leaf-strip--vertical{container-type:normal}
/* Leaf stack: prev/next flip, 350 ms */
.leaf-stack{perspective:1200px}
.leaf-stack__controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-3);margin-top:var(--space-4)}
.leaf-stack__count{min-width:5ch;text-align:center;font:600 max(var(--text-sm),var(--ta-floor))/max(1,var(--ta-lh)) var(--font-ui);font-variant-numeric:tabular-nums}
.leaf-strip__leaf.is-flip-out{animation:leaf-out calc(var(--dur-flip) / 2) cubic-bezier(.55,0,1,.45) forwards}
.leaf-strip__leaf.is-flip-in{animation:leaf-in calc(var(--dur-flip) / 2) var(--ease-out)}
@keyframes leaf-out{to{transform:rotateX(90deg)}}
@keyframes leaf-in{from{transform:rotateX(-90deg)}}
/* ---------- 2. leaf-bundle (navigation card) ---------- */
.leaf-bundle{--_board:.75rem;--_stack:5.5rem;position:relative;display:grid;gap:var(--space-3);border-radius:var(--radius-2)}
.leaf-bundle__art{position:relative;display:grid;grid-template-rows:var(--_board) var(--_stack) var(--_board);padding-inline:var(--space-1)}
.leaf-bundle__board{background:var(--mat-wood);background-blend-mode:var(--mat-wood-blend);border-radius:3px;box-shadow:0 1px 2px var(--shade-strong);margin-inline:calc(-1 * var(--space-1))}
.leaf-bundle__stack{background:var(--mat-bundle);background-blend-mode:var(--mat-bundle-blend);border-radius:2px}
.leaf-bundle__art svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:var(--thread-cotton);stroke-width:2.5;stroke-linecap:round}
.leaf-bundle__wraps{z-index:3}
.leaf-bundle__x{z-index:1}
.leaf-bundle__label{position:absolute;z-index:2;left:9%;top:calc(var(--_board) + var(--_stack) / 2);max-width:76%;transform:translateY(-50%) rotate(-1.5deg);
padding:var(--space-1) var(--space-3);background:var(--paper);color:var(--ink);border-radius:2px;
box-shadow:0 1px 2px var(--shade-strong);font:600 max(var(--text-sm),var(--ta-floor))/max(1.3,var(--ta-lh)) var(--font-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.leaf-bundle__caption{display:grid;gap:var(--space-1);padding-inline:var(--space-1)}
.leaf-bundle__title{font:600 var(--text-md)/max(1.25,var(--ta-lh)) var(--font-display);text-decoration:underline 1px transparent;text-underline-offset:.2em}
.leaf-bundle__meta{font:max(var(--text-xs),var(--ta-floor))/max(1.4,var(--ta-lh)) var(--font-ui);color:var(--text-muted)}
a.leaf-bundle[href]:is(:hover,.is-hover) .leaf-bundle__art{filter:var(--drop-lift)}
a.leaf-bundle[href]:is(:hover,.is-hover) .leaf-bundle__title{text-decoration-color:currentColor}
.leaf-bundle__art{filter:var(--drop-rest)}
.leaf-bundle[aria-disabled="true"]{cursor:not-allowed;outline:2px dashed var(--text-muted);outline-offset:4px}
.leaf-bundle[aria-disabled="true"] .leaf-bundle__art{opacity:.55;filter:grayscale(.7)}
/* ---------- 3. stone-slab ---------- */
.stone-slab{display:flex;flex-direction:column;padding:var(--space-4);border-radius:6px 10px 7px 12px;color:var(--ink);box-shadow:var(--shadow-rest)}
.stone-slab__face{flex:1;padding:var(--space-5);border-radius:3px;background:var(--stone-light);box-shadow:inset 1px 1px 0 var(--carve-light),inset -1px -1px 0 var(--carve-dark)}
.stone-slab__face>:last-child{margin-bottom:0}
.carved,.stone-slab__title{color:var(--stone-dark);font-weight:700;font-size:var(--text-lg);text-shadow:-1px -1px 0 var(--carve-light),1px 1px 0 var(--carve-dark)}
.stone-slab__text{color:var(--stone-shadow)}
.stone-slab--temple .stone-slab__face{background:var(--temple-stone)}
.stone-slab--temple .stone-slab__title{color:var(--temple-shadow)}
/* ---------- 4. copper-plate ---------- */
.copper-plate{position:relative;display:block;margin-left:2.5rem;padding:var(--space-4) var(--space-3) var(--space-4) 2.75rem;border-radius:10px 10px 12px 9px;
background:var(--mat-copper);background-blend-mode:var(--mat-copper-blend);color:var(--copper-dark);box-shadow:var(--inset-rim),var(--shadow-rest)}
.copper-plate__hole{position:absolute;left:1rem;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:var(--copper-dark);box-shadow:inset 1px 1px 2px var(--shade-strong)}
/* ring: generated from the T5b rest-pose rules (design/realism/tools/build_copper_set.mjs); its box is placed so the
wire's seat lands in the hole (hole centre = 1rem + 7px from the plate's left edge, mid-height) */
.copper-plate__ring{position:absolute;left:calc(1rem + 7px + var(--ring-x));top:calc(50% + var(--ring-y));overflow:visible;pointer-events:none}
.copper-plate__ring .ring{fill:none;stroke:var(--copper-dark);stroke-width:5;stroke-linecap:round}
.copper-plate__ring .ring-hi{fill:none;stroke:var(--copper-sheen);stroke-width:1.5;stroke-linecap:round;opacity:.7}
.copper-plate__ring .seal{fill:var(--seal-bronze);stroke:var(--seal-bronze-dark);stroke-width:2}
.copper-plate__ring .seal-mark{fill:none;stroke:var(--seal-bronze-sheen);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.copper-plate__panel{padding:var(--space-4);border-radius:4px;background:var(--copper-sheen);box-shadow:inset 0 0 0 1px var(--shade-soft),inset 0 2px 6px var(--shade-soft)}
.copper-plate__panel>:last-child{margin-bottom:0}
@media (min-width:48rem){.copper-plate{padding:var(--space-5) var(--space-5) var(--space-5) 3rem}.copper-plate__panel{padding:var(--space-4) var(--space-5)}}
.copper-plate__title{color:var(--copper-dark);font-size:var(--text-lg);text-shadow:0 1px 0 var(--carve-light)}
/* ---------- 5. coin-card ---------- */
.coin-card{display:grid;justify-items:center;gap:0;margin:0;max-width:16rem;color:var(--text);--_mat:var(--mat-gold);--_edge:var(--coin-gold-dark);--_thick:var(--coin-gold-edge);--_rim:var(--coin-gold-rim);--_rim-soft:var(--coin-gold-rim-soft);--_band:var(--coin-gold)}
.coin-card--silver{--_mat:var(--mat-silver);--_edge:var(--coin-silver-dark);--_thick:var(--coin-silver-edge);--_rim:var(--coin-silver-rim);--_rim-soft:var(--coin-silver-rim-soft);--_band:var(--coin-silver)}
.coin-card__coin{position:relative;z-index:1;display:grid;place-items:center;width:clamp(8rem,38vw,10rem);aspect-ratio:1;border-radius:50%;background:var(--_mat);background-blend-mode:var(--mat-metal-blend);
border:3px solid var(--_edge);box-shadow:inset 0 0 0 3px var(--carve-light),inset 0 -6px 12px var(--shade-soft),var(--shadow-rest)}
.coin-card__coin svg{position:absolute;inset:6%;width:88%;height:88%;fill:none;stroke:var(--_edge);stroke-width:3;stroke-linecap:round}
.coin-card__legend{position:relative;color:var(--coin-ink);font:700 1.25rem/1.1 var(--font-display);letter-spacing:.14em;text-align:center;text-shadow:0 1px 0 var(--carve-light)}
.coin-card__band{align-self:stretch;margin-top:calc(-1 * var(--space-4));padding:calc(var(--space-4) + var(--space-2)) var(--space-4) var(--space-3);
border-top:4px solid var(--_band);border-radius:var(--radius-2);background:var(--bg-alt);text-align:center;font:max(var(--text-xs),var(--ta-floor))/max(1.5,var(--ta-lh)) var(--font-ui)}
.coin-card__band strong{display:block;font:600 max(var(--text-base),var(--ta-floor))/max(1.3,var(--ta-lh)) var(--font-display)}
a.coin-card[href]:is(:hover,.is-hover) .coin-card__coin{box-shadow:inset 0 0 0 3px var(--carve-light),inset 0 -6px 12px var(--shade-soft),var(--shadow-lift)}
/* ---------- 6. ring-seal ---------- */
.ring-seal{margin:0;display:grid;gap:var(--space-3);max-width:22rem;color:var(--text)}
.ring-seal__pair{display:flex;align-items:center;justify-content:center;gap:var(--space-3)}
.ring-seal__ring{position:relative;width:6.5rem;height:7.25rem;flex:none}
.ring-seal__hoop{position:absolute;left:.75rem;right:.75rem;bottom:0;aspect-ratio:1;border-radius:50%;border:.7rem solid var(--ring-gold);
box-shadow:inset 2px 2px 3px var(--shade-strong),1px 1px 0 var(--ring-gold-dark),-1px -1px 0 var(--ring-gold-light)}
.ring-seal__bezel{position:absolute;left:50%;top:0;display:grid;place-items:center;width:5rem;height:3.25rem;transform:translateX(-50%);border-radius:50%;
background:var(--mat-ring);background-blend-mode:var(--mat-ring-blend);border:3px solid var(--ring-gold-dark);box-shadow:var(--shadow-rest)}
.ring-seal__mirror{display:inline-block;transform:scaleX(-1);color:var(--ring-ink);font-size:1rem;line-height:1}
.ring-seal__arrow{width:1.75rem;height:1.75rem;flex:none;fill:none;stroke:var(--text-muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ring-seal__impression{display:grid;place-items:center;width:6.5rem;aspect-ratio:1;flex:none;border-radius:47% 53% 50% 50% / 52% 48% 52% 48%;background:var(--mat-clay-impression);background-blend-mode:var(--mat-clay-impression-blend);
box-shadow:inset 0 0 0 6px var(--clay-impression-rim),inset 2px 3px 6px var(--shade-soft),var(--shadow-rest)}
.ring-seal__impression span{color:var(--copper-dark);font-size:1.375rem;line-height:1;text-shadow:-1px -1px 0 var(--carve-light),1px 1px 0 var(--shade-strong)}
.ring-seal__caption,.sherd-card__caption{font:max(var(--text-xs),var(--ta-floor))/max(1.5,var(--ta-lh)) var(--font-ui);text-align:center}
.ring-seal__caption strong,.sherd-card__caption strong{display:block;font:600 max(var(--text-base),var(--ta-floor))/max(1.3,var(--ta-lh)) var(--font-display)}
/* ---------- 7. sherd-card ---------- */
.sherd-card{margin:0;display:grid;gap:var(--space-3);max-width:18rem;color:var(--text)}
.sherd-card__piece{position:relative;display:grid;place-items:center;aspect-ratio:4/3;filter:var(--drop-rest)}
.sherd-card__piece::before{content:"";position:absolute;inset:0;background:var(--mat-clay);background-blend-mode:var(--mat-clay-blend);
clip-path:polygon(6% 14%,21% 4%,38% 9%,55% 0,71% 6%,86% 3%,97% 18%,93% 37%,100% 55%,92% 74%,95% 90%,76% 97%,58% 92%,41% 100%,24% 94%,9% 97%,3% 79%,8% 60%,0 42%,5% 27%)}
.sherd-card__piece svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--terracotta-soft);stroke-width:1.2;stroke-linecap:round;opacity:.8}
.sherd-card__mark{position:relative;color:var(--terracotta-soft);font-size:2.25rem;line-height:1;letter-spacing:.08em;text-shadow:1px 1px 0 var(--terracotta-deep)}
a.sherd-card[href]:is(:hover,.is-hover) .sherd-card__piece{filter:var(--drop-lift)}
/* ==========================================================================
Motion hooks for js/motion.js (GSAP). Without JS, or with reduced motion,
none of these classes is added and the CSS states above stay in charge.
Prompt 6 removed the decorative ones (ink writing, stone carving, press spring, card lift, lift shadow).
========================================================================== */
/* Leaf stack: leaves share one grid cell, so the next one waits underneath */
.leaf-stack.is-motion{display:grid}
.leaf-stack.is-motion>.leaf-strip{grid-area:1/1;position:relative;z-index:1}
.leaf-stack.is-motion>.leaf-strip.is-top{z-index:3}
.leaf-stack.is-motion>.leaf-strip.is-under{z-index:2}
.leaf-stack.is-motion>.leaf-stack__controls{grid-row:2}
.leaf-stack.is-motion .leaf-strip__leaf{z-index:1;will-change:auto}
/* Stylus cursor over a leaf: desktop pointers only (a static cursor, not motion) */
@media (hover:hover) and (pointer:fine){
.leaf-strip__leaf,.mat-leaf,.mat-leaf--holes,.ink-demo{cursor:url(../img/cursor-stylus.svg) 3 29,auto}
}
/* Bundle as a button that opens a reader */
button.leaf-bundle{width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
button.leaf-bundle:is(:hover,.is-hover) .leaf-bundle__art{filter:var(--drop-lift)}
button.leaf-bundle:is(:hover,.is-hover) .leaf-bundle__title{text-decoration-color:currentColor}
button.leaf-bundle[aria-expanded="true"] .leaf-bundle__title::after{content:" · open";content:" · open" / ""}
.leaf-bundle__art .leaf-bundle__knot{position:absolute;z-index:4;inset:auto;left:calc(76.5% - 12px);top:calc(50% - 12px);width:24px;height:24px;overflow:visible;fill:none;stroke:var(--thread-cotton);stroke-width:2.2;stroke-linecap:round}
.leaf-bundle__fan{position:absolute;inset:var(--_board) 3% var(--_board);z-index:2;pointer-events:none;filter:var(--drop-thin)}
/* The fanned leaves are the site's palm-leaf material (.mat-leaf--fan in materials.css), each a little different */
.leaf-bundle__fan i{position:absolute;left:0;right:var(--leaf-end,5%);top:calc(50% - 6px);height:12px;opacity:0}
.bundle-reader{margin-top:var(--space-4);padding:var(--space-5);border-radius:var(--radius-3);background:var(--bg-alt);border-top:4px solid var(--thread);box-shadow:var(--shadow-rest)}
.bundle-reader[hidden]{display:none}
.bundle-reader__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-3)}
.bundle-reader__bar h4{margin:0}
/* Scroll story: the stages simply follow each other (the pinned parallax version was removed in Prompt 6) */
.story__scene{position:relative}
.story__stage{margin:0 0 var(--space-6);display:grid;gap:var(--space-3);justify-items:center;text-align:center}
.story__stage figcaption{max-width:32rem;font:max(var(--text-sm),var(--ta-floor))/max(1.5,var(--ta-lh)) var(--font-ui);color:var(--text-muted)}
.story__stage figcaption strong{display:block;font:600 var(--text-lg)/max(1.3,var(--ta-lh)) var(--font-display);color:var(--text)}
.story__object{width:min(40rem,88vw);min-height:9rem;display:grid;place-items:center;padding:var(--space-5);border-radius:10px}
.story__object--leaf{min-height:0;aspect-ratio:9/1.6;padding:0 30%}
.story__object p{margin:0;max-width:none}
/* ==========================================================================
Precision pass (Prompt 2c). Proportions measured on SHIP reference photos;
numbers, sources and "estimate" flags: DESIGN_SYSTEM.md → Precision spec.
One light for everything: top-left, soft. Shadows follow object thickness.
========================================================================== */
/* ---------- Leaf strip: measured 6.8–8.1 : 1. Three lengths, same breadth ---------- */
.leaf-strip{--leaf-len:7.6}
.leaf-strip--short{--leaf-len:6.8}
.leaf-strip--long{--leaf-len:9}
.leaf-strip__surface{filter:var(--drop-thin)}
@container leaf (min-width:55rem){
.leaf-strip__leaf{width:calc(100% * var(--leaf-len) / 9);margin-inline:auto;aspect-ratio:var(--leaf-len)/1}
}
/* Binding cord through the left hole, hanging down past the edge (horizontal leaf only) */
.leaf-strip__cord{display:none}
@container leaf (min-width:55rem){
.leaf-strip__cord{display:block;position:absolute;z-index:0;left:calc(30% - 1.5px);top:50%;width:3px;height:82%;border-radius:0 0 2px 2px;pointer-events:none;
background:var(--mat-thread-cord);
filter:drop-shadow(1px 1.5px .6px var(--shade-strong))}
}
/* Manuscript leaf: a facsimile of a written leaf, always horizontal. The script lines are
an aria-hidden picture of the text (real text, drawn small like a real leaf: 9 lines);
the readable text sits in the caption at full size. */
.leaf-strip--manuscript{container:msleaf/inline-size}
.leaf-strip--manuscript .leaf-strip__leaf{display:block;max-width:none;width:calc(100% * var(--leaf-len) / 9);aspect-ratio:var(--leaf-len)/1;margin-inline:auto;padding:0}
.leaf-strip--manuscript .leaf-strip__surface::before{border-radius:1.2% 1.6% 1.4% 1% / 20% 24% 22% 18%}
.leaf-strip--manuscript .leaf-strip__cord{display:block;position:absolute;z-index:0;left:calc(30% - 1.5px);top:50%;width:3px;height:82%;
background:var(--mat-thread-cord);filter:drop-shadow(1px 1.5px .6px var(--shade-strong))}
.leaf-strip__script{position:absolute;inset:0;color:var(--ink-soot);font:400 calc(100cqw / 9 * .072)/1.2 var(--font-tamil);
text-shadow:0 0 .5px color-mix(in srgb,var(--paper) 40%,transparent)}
.leaf-strip__script>*{position:absolute;top:12%;bottom:12%;margin:0;overflow:hidden;white-space:nowrap;display:flex;flex-direction:column;justify-content:space-between}
.leaf-strip__script span{display:block}
/* the facsimile is a picture of a leaf: keep its letters at leaf scale (the 18px Tamil floor is for reading text) */
.leaf-strip__script :is(p,span),.copper-set__lines span{font-size:inherit;line-height:inherit}
.leaf-strip__margin{left:2.2%;width:9.5%;top:18%;bottom:auto;gap:.2em;font-size:.92em}
.leaf-strip__col--a{left:13.5%;width:13.8%}
.leaf-strip__col--b{left:33.4%;width:33.2%}
.leaf-strip__col--c{left:73.4%;width:21%}
.leaf-strip__folio{left:auto;right:1.6%;top:50%;bottom:auto;transform:translateY(-50%);color:var(--catalogue-red);font-size:1.9em}
.leaf-strip--manuscript figcaption{margin-top:var(--space-7);font:max(var(--text-sm),var(--ta-floor))/max(1.5,var(--ta-lh)) var(--font-ui);color:var(--text-muted)}
.leaf-strip--manuscript figcaption strong{color:var(--text)}
/* ---------- Leaf bundle: undyed cotton thread, 3 tight turns at the label end, criss-cross
passes along the rest, knot over the first hole, boards a little longer than the leaves ---------- */
.leaf-bundle__art svg{stroke:var(--thread-cotton);stroke-width:2.2}
.leaf-bundle__board{margin-inline:-2.5%;border-radius:.4rem / 50%}
.leaf-bundle__art{filter:var(--drop-thick)}
a.leaf-bundle[href]:is(:hover,.is-hover) .leaf-bundle__art,button.leaf-bundle:is(:hover,.is-hover) .leaf-bundle__art{filter:var(--drop-thick) drop-shadow(1px 3px 4px var(--shade-soft))}
.leaf-bundle__label{left:13.8%;max-width:55%;font-size:max(var(--text-xs),var(--ta-floor));padding:var(--space-1) var(--space-2)}
.leaf-bundle__tag{position:absolute;z-index:2;left:1%;top:calc(var(--_board) + var(--_stack) / 2);transform:translateY(-50%) rotate(1deg);min-width:1.3rem;
padding:.15rem .2rem;border-radius:1px;background:var(--paper);color:var(--catalogue-red);box-shadow:0 1px 1px var(--shade-strong);
font:700 .6875rem/1 var(--font-ui);text-align:center;overflow:hidden}
.leaf-bundle__art .leaf-bundle__knot{left:calc(30% - 12px);top:calc(var(--_board) - 15px);stroke:var(--thread-cotton)}
/* ---------- Stylus (eḻuttāṇi) and leaf knife ---------- */
.tool{margin:0;display:grid;gap:var(--space-2);max-width:32rem}
.tool__art{display:block;width:100%;height:auto;overflow:visible;filter:var(--drop-thin)}
.tool__wood{fill:var(--wood);stroke:var(--wood-dark);stroke-width:.8}
.tool__grain{fill:none;stroke:var(--wood-dark);stroke-width:.6;opacity:.7}
.tool__iron{fill:var(--stone-shadow);stroke:var(--ink-soot);stroke-width:.4}
.tool__shine{fill:none;stroke:var(--stone-highlight);stroke-width:.8;stroke-linecap:round;opacity:.65}
.tool__band{fill:var(--stone-dark)}
.tool figcaption{font:max(var(--text-sm),var(--ta-floor))/max(1.5,var(--ta-lh)) var(--font-ui);color:var(--text-muted)}
.tool figcaption strong{display:block;color:var(--text);font:600 max(var(--text-base),var(--ta-floor))/max(1.3,var(--ta-lh)) var(--font-display)}
/* ---------- Stone: thick, never moves. Cave-bed variant: shallow wide Tamil-Brahmi on a smoothed strip ---------- */
.stone-slab::after{background:var(--shade-strong);transform:translate(5px,7px)}
a.stone-slab[href]:is(:hover,.is-hover,:active,.is-active){transform:none}
a.stone-slab[href]:is(:hover,.is-hover) .stone-slab__title{text-decoration:underline 2px;text-underline-offset:.18em;-webkit-text-decoration-color:var(--stone-dark);text-decoration-color:var(--stone-dark)}
.stone-slab--cavebed{padding:var(--space-5) var(--space-4) var(--space-4);gap:var(--space-4)}
.stone-slab__strip{position:relative;padding:var(--space-3) var(--space-4);border-radius:40% 30% 45% 35% / 18% 22% 16% 20%;
background:var(--mat-stone-face,var(--stone-light));background-blend-mode:var(--mat-face-blend,normal);
box-shadow:inset 0 2px 4px var(--shade-soft),inset 0 -1px 0 var(--carve-light)}
.stone-slab__brahmi{margin:0;max-width:none;text-align:center;color:var(--stone-cut);
font-size:clamp(1.75rem,1.3rem + 2.2vw,2.75rem);line-height:1.5;letter-spacing:.18em;-webkit-text-stroke:.035em currentColor;
text-shadow:.04em .05em 0 var(--carve-light),-.02em -.03em .02em var(--shade-strong)}
/* ---------- Copper plate set: thin rigid plates on a ring through a hole at the left edge,
cast seal on the ring. Fans open around the ring (copper does not bend). ---------- */
.copper-set{margin:0;display:grid;gap:var(--space-4);max-width:40rem}
/* Geometry is the T5b physics scene's settled rest pose (generated block below): the ring's back half is
drawn under the plates and its front half over them, so the wire really goes through the hole. */
.copper-set__stage{position:relative;aspect-ratio:var(--cs-aspect)}
.copper-set .copper-set__plate{position:absolute;left:calc(var(--cs-left) + var(--i) * var(--cs-step-x));top:calc(var(--cs-top) + var(--i) * var(--cs-step-y));
width:var(--cs-width);aspect-ratio:var(--cs-plate-aspect);border-radius:3px 4px 3px 5px;
padding:calc(var(--cs-width) * .083) calc(var(--cs-width) * .069) calc(var(--cs-width) * .083) var(--cs-text-left);
transform-origin:var(--cs-hole-x) var(--cs-hole-y);transform:rotate(0deg);
box-shadow:1px 1px 0 var(--copper-dark),2px 2px 0 var(--copper-edge),var(--box-thin);
transition:transform var(--dur-open) var(--ease-out)}
.copper-set__plate:nth-child(1){z-index:1}
.copper-set__plate:nth-child(2){z-index:2}
.copper-set__plate:nth-child(3){z-index:3}
.copper-set.is-fanned .copper-set__plate{transform:rotate(calc(var(--i) * -11deg))}
.copper-set__plate .copper-set__hole{position:absolute;z-index:2;left:var(--cs-hole-x);top:var(--cs-hole-y);width:var(--cs-hole-d);aspect-ratio:1;transform:translate(-50%,-50%);
border-radius:50%;background:var(--copper-dark);box-shadow:inset 1px 1px 2px var(--shade-strong)}
.copper-set__lines{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:space-between;height:100%;margin:0;overflow:hidden;
color:var(--copper-dark);font-size:clamp(.5rem,.35rem + .75vw,.875rem);line-height:1.3;white-space:nowrap;
text-shadow:0 .9px 0 var(--copper-engrave-lip),0 -.6px 0 var(--shade-soft)}
.copper-set__lines span{display:block}
.copper-set__ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.copper-set__ring--back{z-index:0}
.copper-set__ring--front{z-index:4}
.copper-set__ring .ring{fill:none;stroke:var(--copper-dark);stroke-linecap:round}
.copper-set__ring .ring-hi{fill:none;stroke:var(--copper-sheen);stroke-linecap:round;opacity:.6}
.copper-set .seal{position:absolute;z-index:5;left:var(--cs-seal-left);top:var(--cs-seal-top);width:var(--cs-seal-width)}
.copper-set__controls{margin:0}
/* BEGIN GENERATED copper-set rest pose - node design/realism/tools/build_copper_set.mjs - do not edit */
/* T5b plateSet settled after 64 s of simulated time (max swing 6.1e-5 rad, holes
0.120 mm off the seat circle); projected with the stack axis drawn up-right at 0.8 scale.
Hole at 0.205 of the length (spec card), ring 90 mm (T5b estimate), wire 4.3 mm (T5b's wire-to-hole rule). */
.copper-set{--cs-aspect:1.8775;--cs-left:23.426%;--cs-top:6.065%;--cs-width:73.344%;--cs-plate-aspect:1.5499;
--cs-step-x:0.266%;--cs-step-y:-0.487%;--cs-hole-x:20.501%;--cs-hole-y:50.003%;--cs-hole-d:2.968%;--cs-text-left:18.692%;
--cs-seal-left:1.923%;--cs-seal-top:47.54%;--cs-seal-width:21.293%}
/* END GENERATED copper-set rest pose */
/* ---------- Seal: cast bronze disc, raised rim, legend band, raised emblem. Colours: the registry seals palette (the T4 tuned seal ramp, T9b) ---------- */
.seal{display:block;aspect-ratio:1;border-radius:50%;filter:var(--drop-mid)}
.seal svg{display:block;width:100%;height:100%;overflow:visible}
.seal__body{fill:var(--seal-bronze)}
.seal__rim{fill:none;stroke:var(--seal-bronze-dark);stroke-width:5}
.seal__rim-hi{fill:none;stroke:var(--seal-bronze-sheen);stroke-width:1.4;opacity:.7}
.seal__field{fill:var(--seal-field);stroke:var(--seal-bronze-dark);stroke-width:1}
.seal__legend{fill:var(--seal-bronze-dark);font-size:8.5px;letter-spacing:.06em}
.seal__raised-shadow{fill:var(--seal-bronze-dark);transform:translate(1.1px,1.3px)}
.seal__raised-hi{fill:var(--seal-bronze-sheen);transform:translate(-.6px,-.7px);opacity:.75}
.seal__raised{fill:var(--seal-bronze)}
.seal__patina{fill:var(--seal-bronze-patina);opacity:.55}
/* ---------- Coins: small, thick, uneven flan, off-centre strike ---------- */
.coin-card__coin{width:clamp(6.25rem,26vw,7.25rem);aspect-ratio:1.09/1;overflow:hidden;border-radius:52% 48% 44% 56% / 55% 45% 54% 46%;--strike-x:4%;--strike-y:-3%}
.coin-card__coin>svg,.coin-card__coin>.coin-card__legend{translate:var(--strike-x) var(--strike-y)}
.coin-card{filter:none}
.coin-card__coin{filter:none}
.coin-card__legend{font-size:1.0625rem}
/* thickness: the edge shows below and to the right (light from top-left) */
.coin-card__thick{position:relative;z-index:1;display:grid;justify-items:center;filter:var(--drop-mid)}
.coin-card__thick::before{content:"";position:absolute;z-index:0;top:0;width:clamp(6.25rem,26vw,7.25rem);aspect-ratio:1.09/1;border-radius:52% 48% 44% 56% / 55% 45% 54% 46%;
background:var(--_thick);transform:translate(2px,3px)}
.coin-card__thick>.coin-card__coin{position:relative;z-index:1}
.coin-card__band{position:relative;z-index:0}
/* Punch-marked: squarish cut flan, several small punches, no legend */
.coin-card--punch{--_mat:var(--mat-silver);--_edge:var(--coin-silver-dark);--_thick:var(--coin-silver-edge);--_rim:var(--coin-silver-rim);--_rim-soft:var(--coin-silver-rim-soft);--_band:var(--coin-silver)}
.coin-card--punch .coin-card__coin,.coin-card--punch .coin-card__thick::before{border-radius:16% 24% 20% 28% / 22% 16% 28% 20%}
.coin-card--punch .coin-card__coin{--_mat:var(--mat-silver);--strike-x:0%;--strike-y:0%}
.coin-card__punch{position:absolute;inset:8%;width:84%;height:84%;fill:none;stroke:var(--coin-silver-dark);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.coin-card__punch .dent{fill:var(--coin-silver-dent);stroke:none}
/* Roman denarius: round, neat, legend around the rim (no portrait is drawn) */
.coin-card--denarius{--_mat:var(--mat-silver);--_edge:var(--coin-silver-dark);--_thick:var(--coin-silver-edge);--_rim:var(--coin-silver-rim);--_rim-soft:var(--coin-silver-rim-soft);--_band:var(--coin-silver)}
.coin-card--denarius .coin-card__coin{--_mat:var(--mat-silver);border-radius:50%;aspect-ratio:1.02/1;--strike-x:1.5%;--strike-y:1%}
.coin-card--denarius .coin-card__thick::before{border-radius:50%;aspect-ratio:1.02/1}
.coin-card__rim-text{fill:var(--coin-ink);font:700 9px/1 var(--font-display);letter-spacing:.08em}
.coin-card__wreath{fill:none;stroke:var(--coin-silver-dark);stroke-width:2;stroke-linecap:round}
:is(a.coin-card,a.sherd-card)[href]:is(:active,.is-active){transform:translateY(1px)}
/* ---------- Sherd: broken thickness visible, marks scratched after firing, black-and-red ware ---------- */
.sherd-card__piece{isolation:isolate;filter:var(--drop-mid)}
.sherd-card__piece::after{content:"";position:absolute;inset:0;z-index:-1;transform:translate(2.5px,3.5px);
clip-path:polygon(6% 14%,21% 4%,38% 9%,55% 0,71% 6%,86% 3%,97% 18%,93% 37%,100% 55%,92% 74%,95% 90%,76% 97%,58% 92%,41% 100%,24% 94%,9% 97%,3% 79%,8% 60%,0 42%,5% 27%);
background:var(--mat-clay-edge)}
.sherd-card__piece svg{stroke-width:1.4}
.sherd-card--brw .sherd-card__piece::before{background:var(--mat-clay-brw);background-blend-mode:var(--mat-clay-brw-blend)}
.sherd-card--brw .sherd-card__piece::after{background:var(--mat-clay-brw-edge)}
.sherd-card--brw .sherd-card__mark{color:var(--brw-mark);text-shadow:1px 1px 0 var(--brw-mark-shadow)}
.sherd-card--brw .sherd-card__piece svg{stroke:var(--brw-mark)}
/* ---------- Signet ring: side view, top view of the bezel, impression ---------- */
.ring-seal{max-width:32rem}
.ring-seal__pair{flex-wrap:wrap}
.ring-seal__ring{filter:var(--drop-mid)}
.ring-seal__bezel{width:3.6rem;height:2.4rem}
.ring-seal__bezel .ring-seal__mirror{font-size:.8125rem}
.ring-seal__top{position:relative;display:grid;place-items:center;width:6.5rem;aspect-ratio:1;flex:none}
.ring-seal__top::before{content:"";position:absolute;inset:34% 2%;border-radius:40%;border:.5rem solid var(--ring-gold);border-left-width:.35rem;border-right-width:.35rem;
box-shadow:inset 1px 1px 2px var(--shade-strong),1px 1px 0 var(--ring-gold-dark)}
.ring-seal__face{position:relative;display:grid;place-items:center;width:62%;aspect-ratio:1.45/1;border-radius:50%;background:var(--mat-ring);
background-blend-mode:var(--mat-ring-blend);border:3px solid var(--ring-gold-dark);box-shadow:inset 1px 1px 2px var(--shade-strong),var(--shadow-rest)}
.ring-seal__face .ring-seal__mirror{font-size:.9375rem;color:var(--ring-ink);text-shadow:1px 1px 0 var(--carve-light)}
/* ---------- Object scale: one millimetre = --mm on screen ---------- */
.obj-scale,.obj-scale__bar{--mm:clamp(.34px,.1vw + .3px,1.2px)}
.obj-scale{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--space-5) var(--space-6)}
.obj-scale__item{margin:0;display:grid;gap:var(--space-2);justify-items:start}
.obj-scale__item figcaption{font:var(--text-xs)/1.4 var(--font-ui);color:var(--text-muted)}
.obj-scale__shape{display:block;width:calc(var(--w) * var(--mm));height:calc(var(--h) * var(--mm))}
.obj-scale__slab{flex-basis:100%}
.obj-scale__slab .obj-scale__shape{width:100%;border-radius:4px 8px 5px 10px}
.obj-scale__round{border-radius:49% 51% 46% 54% / 53% 47% 52% 48%}
.obj-scale__bar{display:flex;align-items:center;gap:var(--space-2);font:var(--text-xs)/1 var(--font-ui);color:var(--text-muted)}
.obj-scale__bar i{display:block;width:calc(100 * var(--mm));height:6px;border:2px solid var(--text-muted);border-top:0}
.copper-plate__script{margin:0 0 var(--space-2);color:var(--copper-dark);font-size:max(var(--text-base),var(--ta-floor));letter-spacing:.04em;
text-shadow:0 .9px 0 var(--copper-engrave-lip),0 -.6px 0 var(--shade-soft)}
.leaf-strip__script .leaf-strip__margin{font-size:.92em}
.leaf-strip__script .leaf-strip__folio{font-size:1.9em}
/* Historical-script classes win over the Tamil font set by :lang(ta) on descendants */
:is(.script-brahmi,.script-grantha,.script-vatteluttu) :lang(ta){font-family:inherit}
/* Engraved plate faces are mostly bare metal; patina keeps to the edges */
.copper-set .copper-set__plate.mat-copper{background:var(--mat-copper-panel);background-blend-mode:var(--mat-panel-blend)}
.copper-set .copper-set__plate.mat-copper::before{opacity:.32}
@container leaf (min-width:55rem){.leaf-strip__kural{font-size:1.125rem}}
/* ==========================================================================
PAGE COMPONENTS (Prompt 4, T10)
Page furniture, not objects: navigation, footer, timeline, search, a map
placeholder and card layouts. Every one of them uses only the semantic role
tokens (--bg, --surface, --text, --text-muted, --accent, --accent-text,
--edge, --rule, --focus-ring), so dark mode needs no rule of its own here:
tokens.css rebinds the roles. Contrast tables: ../DESIGN_SYSTEM.md
========================================================================== */
/* ---------- 10. Navigation: the topnav plus a theme switch and a sub-nav ---------- */
.topnav__tools{display:flex;align-items:center;gap:var(--space-2);margin-left:auto}
.topnav__tools+.topnav__list{margin-top:var(--space-2)}
@media (min-width:48rem){.topnav__tools{order:3}}
/* Three-state theme switch (day / system / night). Never colour alone: the
pressed segment gets a filled ground, a bold label and a check mark. */
.theme-switch{display:inline-flex;align-items:center;padding:2px;gap:2px;border:1px solid var(--edge);border-radius:var(--radius-pill);background:var(--bg-alt)}
.theme-switch__btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);min-height:var(--touch);min-width:var(--touch);padding:0 var(--space-3);border:0;border-radius:var(--radius-pill);
background:transparent;color:var(--text);font:500 var(--text-sm)/1 var(--font-ui);cursor:pointer}
.theme-switch__btn:is(:hover,.is-hover){background:var(--rule);color:var(--text)}
.theme-switch__btn[aria-pressed="true"]{background:var(--button-bg);color:var(--button-text);font-weight:700}
.theme-switch__btn[aria-pressed="true"]::after{content:"✓";content:"✓" / ""}
.theme-switch__btn svg{width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Section sub-navigation: a scrollable row of links with the current one marked */
.subnav{border-bottom:1px solid var(--rule)}
.subnav__list{display:flex;gap:var(--space-1);overflow-x:auto;margin:0;padding:0 var(--gutter);list-style:none;
font:max(var(--text-sm),var(--ta-floor))/max(1.3,var(--ta-lh)) var(--font-ui)}
.subnav__link{display:inline-flex;align-items:center;min-height:var(--touch);padding-inline:var(--space-3);white-space:nowrap;color:var(--text);
text-decoration:underline 1px transparent;text-underline-offset:.25em;border-bottom:3px solid transparent}
.subnav__link:is(:hover,.is-hover){background:var(--bg-alt);text-decoration-color:currentColor}
.subnav__link[aria-current="true"]{border-bottom-color:var(--accent);font-weight:700}
/* ---------- 11. Footer: the bundle-dark footer plus a light variant ---------- */
.site-foot__rule,.page-foot__rule{height:3px;margin-bottom:var(--space-6);background:var(--thread);opacity:.7}
.site-foot__meta,.page-foot__meta{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);margin:0;padding:0;list-style:none;
font:max(var(--text-xs),var(--ta-floor))/max(1.5,var(--ta-lh)) var(--font-ui)}
/* .page-foot: a footer that follows the page ground instead of being bundle-dark.
It is its own component, not a modifier of .site-foot, because .site-foot pins
the role tokens to the bundle material and nothing on the same element can read
the page values back. Using only inherited roles means it needs no dark rule and
also works inside a .theme-night preview. */
.page-foot{background:var(--bg-alt);color:var(--text);border-top:4px solid var(--accent);padding-block:var(--space-6)}
.page-foot__grid{display:grid;gap:var(--space-6);max-width:var(--page-max);margin-inline:auto;padding-inline:var(--gutter)}
@media (min-width:48rem){.page-foot__grid{grid-template-columns:2fr 1fr 1fr}}
.page-foot h2{font-size:var(--text-md);margin:0 0 var(--space-2)}
.page-foot ul{margin:0;padding:0;list-style:none}
.page-foot li a{display:inline-flex;align-items:center;min-height:var(--touch)}
.page-foot__small{grid-column:1/-1;margin:0;padding-top:var(--space-4);border-top:1px solid var(--rule);max-width:none;
font:max(var(--text-xs),var(--ta-floor))/max(1.5,var(--ta-lh)) var(--font-ui);color:var(--text-muted)}
/* ---------- 12. Timeline: an ordered list of dated events ---------- */
.timeline{margin:0;padding:0;list-style:none;counter-reset:tl}
.timeline__item{position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:var(--space-4);padding-bottom:var(--space-6)}
.timeline__item::before{content:"";grid-column:1;grid-row:1/span 3;justify-self:center;width:2px;background:var(--rule)}
.timeline__item:last-child{padding-bottom:0}
.timeline__item:last-child::before{background:linear-gradient(var(--rule) 0 1.1rem,transparent 1.1rem)}
.timeline__dot{grid-column:1;grid-row:1;justify-self:center;align-self:start;position:relative;z-index:1;width:1rem;height:1rem;margin-top:.35rem;
border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--bg)}
.timeline__item--uncertain .timeline__dot{background:var(--bg);border:3px solid var(--accent)}
.timeline__date{grid-column:2;grid-row:1;margin:0;font:700 max(var(--text-sm),var(--ta-floor))/max(1.3,var(--ta-lh)) var(--font-ui);
font-variant-numeric:tabular-nums;letter-spacing:.06em;color:var(--accent-text)}
.timeline__date:lang(ta){letter-spacing:0}
.timeline__title{grid-column:2;grid-row:2;margin:var(--space-1) 0 0;font:600 var(--text-md)/max(1.25,var(--ta-lh)) var(--font-display)}
.timeline__body{grid-column:2;grid-row:3;margin:var(--space-2) 0 0;max-width:var(--measure);color:var(--text)}
.timeline__flag{display:inline-block;margin-left:var(--space-2);padding:0 var(--space-2);border:1px dashed var(--edge);border-radius:var(--radius-1);
font:600 var(--text-xs)/1.6 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);vertical-align:.1em}
.timeline__flag:lang(ta){letter-spacing:0;text-transform:none}
/* From 768px the same markup can run across the page instead of down it. */
@media (min-width:48rem){
.timeline--across{display:flex;overflow-x:auto;gap:0;padding-bottom:var(--space-3)}
.timeline--across .timeline__item{flex:0 0 15rem;grid-template-columns:1fr;grid-template-rows:auto auto auto auto;
column-gap:0;padding:0 var(--space-4) 0 0}
.timeline--across .timeline__item::before{grid-column:1;grid-row:1;justify-self:stretch;align-self:center;width:auto;height:2px;margin-top:.5rem}
.timeline--across .timeline__dot{grid-row:1;justify-self:start;margin-top:0}
.timeline--across :is(.timeline__date,.timeline__title,.timeline__body){grid-column:1}
.timeline--across .timeline__date{grid-row:2;margin-top:var(--space-2)}
.timeline--across .timeline__title{grid-row:3}
.timeline--across .timeline__body{grid-row:4}
}
/* ---------- 13. Search: field, filters, results, empty state ---------- */
.search{display:grid;gap:var(--space-3);max-width:44rem}
.search__row{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.search__field{position:relative;flex:1 1 14rem;display:flex;align-items:center;gap:var(--space-2);min-height:var(--touch);
padding-inline:var(--space-3);border:2px solid var(--edge);border-radius:var(--radius-pill);background:var(--surface);color:var(--text)}
.search__field:focus-within{border-color:var(--accent)}
.search__icon{flex:none;width:1.1em;height:1.1em;fill:none;stroke:var(--text-muted);stroke-width:2;stroke-linecap:round}
.search__input{flex:1;min-width:0;min-height:calc(var(--touch) - 4px);border:0;background:transparent;color:var(--text);
font:max(var(--text-base),var(--ta-floor))/max(1.4,var(--ta-lh)) var(--font-body)}
.search__input::placeholder{color:var(--text-muted);opacity:1}
.search__input:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
.search__clear[hidden]{display:none} /* an author display: wins over the UA [hidden] rule */
.search__clear{flex:none;display:grid;place-items:center;width:1.75rem;height:1.75rem;border:0;border-radius:50%;
background:var(--bg-alt);color:var(--text);font:600 var(--text-sm)/1 var(--font-ui);cursor:pointer}
.search__clear:is(:hover,.is-hover){background:var(--rule)}
.search__filters{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;margin:0;padding:0;border:0}
.search__filters legend{float:left;width:100%;margin:0 0 var(--space-1);padding:0;font:600 var(--text-xs)/1.5 var(--font-ui);
letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.search__filters legend:lang(ta){letter-spacing:0;text-transform:none}
.search__count{margin:0;font:max(var(--text-sm),var(--ta-floor))/max(1.5,var(--ta-lh)) var(--font-ui);color:var(--text-muted)}
.search__results{display:grid;gap:var(--space-2);margin:0;padding:0;list-style:none}
.search__result{display:grid;gap:var(--space-1);padding:var(--space-3);border:1px solid var(--rule);border-left:4px solid var(--accent);
border-radius:var(--radius-1);background:var(--surface)}
.search__result a{font:600 max(var(--text-base),var(--ta-floor))/max(1.3,var(--ta-lh)) var(--font-display)}
.search__result p{margin:0;max-width:none;font-size:max(var(--text-sm),var(--ta-floor));line-height:max(1.5,var(--ta-lh));color:var(--text)}
.search__result mark{background:var(--coin-gold-light);color:var(--ink);padding:0 .15em;border-radius:2px}
.search__where{font:max(var(--text-xs),var(--ta-floor))/max(1.5,var(--ta-lh)) var(--font-ui);color:var(--text-muted)}
.search__empty{margin:0;padding:var(--space-5);border:2px dashed var(--edge);border-radius:var(--radius-2);background:var(--bg-alt);color:var(--text)}
/* ---------- 14. Map placeholder: no real map, and it says so ---------- */
.map-ph{position:relative;margin:0;display:grid;gap:var(--space-2)}
.map-ph__box{position:relative;aspect-ratio:4/3;overflow:hidden;border:2px solid var(--edge);border-radius:var(--radius-2);background:var(--bg-alt)}
.map-ph__box::before{content:"";position:absolute;inset:0;
background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);
background-size:12.5% 16.667%;opacity:.7}
.map-ph__art{position:absolute;inset:0;width:100%;height:100%}
.map-ph__land{fill:var(--bg);stroke:var(--edge);stroke-width:1.5}
.map-ph__pin{fill:var(--accent);stroke:var(--bg);stroke-width:1.5}
.map-ph__label{fill:var(--text);font:600 9px var(--font-ui)}
.map-ph__note{position:absolute;left:var(--space-2);bottom:var(--space-2);right:var(--space-2);margin:0;padding:var(--space-2) var(--space-3);
border-radius:var(--radius-1);background:var(--surface);color:var(--text);
font:600 max(var(--text-xs),var(--ta-floor))/max(1.4,var(--ta-lh)) var(--font-ui);box-shadow:var(--shadow-rest)}
.map-ph figcaption{max-width:var(--measure);font-size:max(var(--text-sm),var(--ta-floor));line-height:max(1.5,var(--ta-lh));color:var(--text-muted)}
/* ---------- 15. Card layouts ---------- */
.card-grid{display:grid;gap:var(--space-5);grid-template-columns:1fr;margin:0;padding:0;list-style:none}
@media (min-width:48rem){.card-grid{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}}
.card-grid--two{grid-template-columns:1fr}
@media (min-width:48rem){.card-grid--two{grid-template-columns:repeat(2,1fr)}}
.card{position:relative;display:grid;gap:var(--space-2);align-content:start;margin:0;padding:var(--space-4);
border:1px solid var(--rule);border-radius:var(--radius-2);background:var(--surface);color:var(--text);box-shadow:var(--shadow-rest)}
.card__media{margin:calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) 0;overflow:hidden;
border-radius:var(--radius-2) var(--radius-2) 0 0;background:var(--bg-alt)}
.card__media>*{display:block;width:100%;height:auto}
.card__eyebrow{margin:0;font:600 var(--text-xs)/1.5 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text)}
.card__eyebrow:lang(ta){letter-spacing:0;text-transform:none}
.card__title{margin:0;font:600 var(--text-md)/max(1.25,var(--ta-lh)) var(--font-display)}
.card__title a{color:var(--text);text-decoration:underline 1px transparent;text-underline-offset:.2em}
.card__body{margin:0;max-width:none;font-size:max(var(--text-sm),var(--ta-floor));line-height:max(1.55,var(--ta-lh))}
.card__foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin-top:var(--space-1);
font:max(var(--text-xs),var(--ta-floor))/max(1.5,var(--ta-lh)) var(--font-ui);color:var(--text-muted)}
/* Whole-card link: the