/* Taash Khel — shared stylesheet */
:root{
  --void:#06070D; --slab:#0E1019; --slab-2:#141726; --edge:#1E2233;
  --gilt:#C8A45C; --gilt-dim:#8A7038; --vermeil:#B8324C; --phantom:#5B62C4;
  --bone:#E8E4DC; --ash:#8D8AA0; --ash-dim:#5C5A6E;
  --display:"Bodoni Moda",Georgia,serif;
  --body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --deva:"Noto Sans Devanagari","Manrope",sans-serif;
  --gutter:clamp(1.25rem,5vw,5.5rem);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--void);color:var(--bone);
  font-family:var(--body);font-size:1.03rem;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(64rem 42rem at 84% -10%,rgba(91,98,196,.18),transparent 62%),
    radial-gradient(46rem 34rem at 4% 8%,rgba(184,50,76,.10),transparent 66%);
}
.shell{position:relative;z-index:1}
a{color:var(--gilt);text-decoration:none}
a:hover{text-decoration:underline}
img,svg{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--gilt);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;background:var(--gilt);color:var(--void);
  padding:.75rem 1.25rem;font-weight:700;z-index:99}
.skip:focus{left:1rem;top:1rem}

.wrap{width:100%;max-width:48rem;margin-inline:auto;padding-inline:var(--gutter)}
.brand img{width:30px;height:30px;flex:0 0 30px}
.wrap--wide{max-width:74rem}

/* header */
.masthead{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:1.6rem}
.brand{display:inline-flex;align-items:center;gap:.65rem;font-family:var(--display);
  font-size:1.12rem;color:var(--bone)}
.brand:hover{text-decoration:none}
.brand img{width:30px;height:30px}
.nav{display:flex;flex-wrap:wrap;gap:.55rem 1.5rem;font-size:.8rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;justify-content:flex-end}
.nav a{color:var(--ash)}
.nav a:hover{color:var(--bone);text-decoration:none}
.nav a[aria-current]{color:var(--gilt)}
@media (max-width:900px){
  .masthead{flex-direction:column;align-items:flex-start;gap:1rem}
  .nav{justify-content:flex-start;gap:.5rem 1.15rem;font-size:.73rem}
}

/* type */
.eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gilt);margin:0 0 1.3rem}
.eyebrow--ash{color:var(--ash-dim)}
h1{font-family:var(--display);font-weight:400;font-size:clamp(2.2rem,1.5rem + 3vw,3.6rem);
  line-height:1.06;letter-spacing:-.02em;margin:.6rem 0 0}
h2{font-family:var(--display);font-weight:400;font-size:clamp(1.7rem,1.3rem + 1.6vw,2.4rem);
  line-height:1.12;letter-spacing:-.015em;margin:3.4rem 0 0}
h3{font-family:var(--body);font-weight:700;font-size:1.15rem;margin:2.1rem 0 0;letter-spacing:-.005em}
p{margin:1.15rem 0 0}
.stand{font-size:1.18rem;color:var(--ash);margin-top:1.4rem}
.deva{font-family:var(--deva)}

.crumbs{font-size:.78rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ash-dim);
  padding-block:2rem .5rem}
.crumbs a{color:var(--ash)}
.crumbs span{margin-inline:.5rem;color:var(--edge)}

.meta{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;margin-top:1.8rem;padding-top:1.4rem;
  border-top:1px solid var(--edge);font-size:.8rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ash-dim)}

/* direct-answer block (featured snippet / AI answer target) */
.answer{margin-top:2.6rem;padding:1.6rem 1.7rem;
  background:linear-gradient(160deg,var(--slab-2),rgba(20,23,38,.4));
  border:1px solid var(--edge);border-left:2px solid var(--gilt)}
.answer p{margin:0}
.answer p + p{margin-top:.8rem}
.answer strong{color:var(--gilt)}

/* tables */
.tablewrap{margin-top:2rem;overflow-x:auto;border:1px solid var(--edge)}
table{border-collapse:collapse;width:100%;min-width:32rem;font-size:.95rem}
caption{text-align:left;padding:1rem 1.2rem;background:var(--slab);color:var(--ash);
  font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--edge)}
th,td{padding:.85rem 1.2rem;text-align:left;border-bottom:1px solid var(--edge);vertical-align:top}
thead th{background:var(--slab);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gilt);font-weight:700}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(odd) td{background:rgba(14,16,25,.45)}
.rank{font-family:var(--display);font-size:1.2rem;color:var(--gilt-dim);width:3rem}
.ex{font-family:var(--display);font-size:1.05rem;white-space:nowrap}
.rd{color:var(--vermeil)} .bk{color:var(--phantom)}

ul,ol{margin:1.15rem 0 0;padding-left:1.3rem}
li{margin-top:.5rem}
li::marker{color:var(--gilt-dim)}

/* faq */
.faq{margin-top:1rem}
.faq details{border-bottom:1px solid var(--edge);padding-block:1.1rem}
.faq summary{cursor:pointer;font-weight:700;list-style:none;display:flex;
  justify-content:space-between;gap:1rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gilt);font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq details p{color:var(--ash)}

/* cta */
.cta{margin-top:3.4rem;padding:1.8rem;border:1px solid var(--edge);background:rgba(14,16,25,.6);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 1.8rem),calc(100% - 1.8rem) 100%,0 100%)}
.cta p{margin:.5rem 0 0;color:var(--ash);font-size:.95rem}
.cta .btn{display:inline-flex;margin-top:1.2rem;padding:.85rem 1.6rem;background:var(--gilt);
  color:var(--void);font-size:.78rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  clip-path:polygon(0 0,100% 0,100% calc(100% - .6rem),calc(100% - .6rem) 100%,0 100%)}
.cta .btn:hover{background:#DBBB78;text-decoration:none}

/* related + sources */
.related{margin-top:3.4rem;padding-top:2rem;border-top:1px solid var(--edge)}
.related h2{margin-top:0;font-size:1.3rem;font-family:var(--body);font-weight:700}
.related ul{list-style:none;padding:0;margin-top:1rem}
.related li{margin-top:.7rem}
.sources{margin-top:2.6rem;padding-top:1.6rem;border-top:1px solid var(--edge);
  font-size:.9rem;color:var(--ash-dim)}
.sources h2{margin:0 0 .8rem;font-size:.78rem;font-family:var(--body);font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ash-dim)}
.sources ul{list-style:none;padding:0;margin:0}
.sources li{margin-top:.45rem}

/* footer */
.foot{border-top:1px solid var(--edge);margin-top:5rem;padding-block:2.5rem 3.5rem;
  font-size:.85rem;color:var(--ash-dim)}
.foot nav{display:flex;flex-wrap:wrap;gap:1.3rem;margin-top:1.1rem}
.foot nav a{color:var(--ash)}
.foot nav a:hover{color:var(--gilt)}
.notice{margin-top:2rem;padding:1.05rem 1.25rem;border-left:2px solid var(--vermeil);
  background:rgba(184,50,76,.06);color:var(--ash);line-height:1.6;max-width:62ch}


/* ============================ HOME ONLY ============================ */
.home h1,.home h2,.home h3{margin:0}
.grain::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.30;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.h-hero{font-family:var(--display);font-weight:400;font-size:clamp(2.9rem,1.4rem + 6.4vw,7rem);
  letter-spacing:-.022em;line-height:1.04;margin:0}
.h-hero em{font-style:italic;color:var(--gilt)}
.h-sec{font-family:var(--display);font-weight:400;font-size:clamp(2rem,1.3rem + 2.8vw,3.5rem);
  letter-spacing:-.018em;line-height:1.06;margin:0}
.h-card{font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,1.2rem + 1.4vw,2.15rem);
  letter-spacing:-.012em;line-height:1.08;margin:0}
.lede{font-size:clamp(1.05rem,1rem + .35vw,1.3rem);color:var(--ash);max-width:36ch;margin:1.6rem 0 0}

.hero{position:relative;padding-block:clamp(3.5rem,8vw,7rem) clamp(5rem,11vw,9rem)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:clamp(2rem,5vw,4rem);align-items:center}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;gap:3rem}}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.6rem}
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.95rem 1.7rem;
  font-size:.82rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  border:1px solid var(--edge);
  clip-path:polygon(0 0,100% 0,100% calc(100% - .7rem),calc(100% - .7rem) 100%,0 100%);
  transition:background .22s ease,color .22s ease,border-color .22s ease}
.btn:hover{text-decoration:none}
.btn--gilt{background:var(--gilt);border-color:var(--gilt);color:var(--void)}
.btn--gilt:hover{background:#DBBB78;border-color:#DBBB78}
.btn--ghost{color:var(--bone)}
.btn--ghost:hover{border-color:var(--gilt);color:var(--gilt)}

.deal{position:relative;aspect-ratio:1/1;display:grid;place-items:center}
.deal svg{width:100%;height:auto;overflow:visible}
@keyframes settle{
  from{opacity:0;transform:translate(46px,30px) rotate(15deg) scale(.9)}
  to{opacity:1;transform:translate(0,0) rotate(0deg) scale(1)}}
@keyframes haze{from{opacity:0}to{opacity:1}}
.card-live{transform-box:fill-box;transform-origin:50% 78%;
  animation:settle 1s cubic-bezier(.17,1,.28,1) both;
  animation-delay:calc(var(--i) * 110ms)}
.card-ghost{animation:haze 1.7s ease .5s both}
@media (prefers-reduced-motion:reduce){.card-live,.card-ghost{animation:none;opacity:1;transform:none}}

.sliced{position:relative;background:var(--slab);
  clip-path:polygon(0 4.5vw,100% 0,100% 100%,0 100%);
  padding-block:calc(4.5vw + clamp(3.5rem,7vw,6rem)) clamp(4rem,8vw,7rem);
  margin-top:-4.5vw}
.sliced::before{content:"";position:absolute;inset-inline:0;top:0;height:4.5vw;
  background:linear-gradient(101deg,transparent 49.6%,rgba(200,164,92,.42) 49.8%,transparent 50.2%);
  pointer-events:none}

.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;
  flex-wrap:wrap;margin-bottom:clamp(2.5rem,5vw,4rem)}
.sec-head p{margin:.9rem 0 0;color:var(--ash);max-width:44ch}

.index{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17.5rem),1fr));gap:1.4rem}
.game{position:relative;display:flex;flex-direction:column;gap:1rem;padding:2.2rem 1.9rem 2rem;
  background:linear-gradient(168deg,var(--slab-2),rgba(20,23,38,.35));border:1px solid var(--edge);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 2.1rem),calc(100% - 2.1rem) 100%,0 100%);
  transition:border-color .25s ease,transform .25s ease;color:var(--bone)}
.game:hover{border-color:var(--gilt-dim);transform:translateY(-3px);text-decoration:none}
.game .suit{font-size:1.5rem;line-height:1;color:var(--vermeil)}
.game .suit--dark{color:var(--phantom)}
.game .hi{font-family:var(--deva);color:var(--gilt);font-size:1rem;margin:-.35rem 0 0}
.game p{margin:0;color:var(--ash);font-size:.95rem}
.game ul{margin:.4rem 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.4rem .5rem}
.game li{margin:0;font-size:.72rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ash-dim);border:1px solid var(--edge);padding:.28rem .6rem}
.game .go{margin-top:auto;padding-top:1.3rem;font-size:.78rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--gilt)}

.library{padding-block:clamp(4.5rem,9vw,8rem)}
.rows{border-top:1px solid var(--edge)}
.row{display:grid;grid-template-columns:4.5rem minmax(0,1fr) minmax(0,1.15fr);
  gap:clamp(1rem,3vw,2.5rem);align-items:baseline;padding-block:1.9rem;border-bottom:1px solid var(--edge)}
@media (max-width:760px){.row{grid-template-columns:1fr;gap:.5rem;padding-block:1.5rem}}
.row .n{font-family:var(--display);font-size:1rem;color:var(--gilt-dim);letter-spacing:.04em}
.row h3{font-size:1.25rem;font-family:var(--body);font-weight:700;margin:0}
.row p{margin:0;color:var(--ash);font-size:.95rem}

.apps{padding-block:clamp(4rem,8vw,7rem);border-top:1px solid var(--edge)}
.apps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
  gap:1rem;margin-top:2.5rem}
.app{display:flex;flex-direction:column;gap:.55rem;padding:1.5rem 1.4rem;border:1px solid var(--edge);
  background:rgba(14,16,25,.6);transition:border-color .25s ease;color:var(--bone)}
.app:hover{border-color:var(--gilt-dim);text-decoration:none}
.app strong{font-size:1.02rem;font-weight:700}
.app span{font-size:.86rem;color:var(--ash)}
.app .plat{margin-top:.4rem;font-size:.7rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gilt)}

.foot-top{display:flex;flex-wrap:wrap;gap:1.5rem 2.5rem;justify-content:space-between;
  align-items:flex-start}
.copyright{margin:2rem 0 0}


/* ==================== ARTICLE LAYOUT (desktop two-column) ==================== */
.page-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(2rem,4vw,4.5rem);
  align-items:start;
}
.page-main{min-width:0;max-width:46rem}

@media (min-width:1080px){
  .page-grid{grid-template-columns:minmax(0,1fr) 15.5rem}
}

/* sticky contents rail */
.toc{
  position:sticky;
  top:2.2rem;
  display:none;
  padding-left:1.5rem;
  border-left:1px solid var(--edge);
  font-size:.85rem;
  line-height:1.5;
}
@media (min-width:1080px){.toc{display:block}}
.toc-h{
  margin:0 0 .9rem;
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gilt);
}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.toc li{margin:0 0 .65rem;counter-increment:toc}
.toc a{
  display:block;
  color:var(--ash);
  padding-left:1.9rem;
  position:relative;
  transition:color .18s ease;
}
.toc a::before{
  content:counter(toc,decimal-leading-zero);
  position:absolute;left:0;top:0;
  font-family:var(--display);
  font-size:.78rem;
  color:var(--gilt-dim);
}
.toc a:hover{color:var(--bone);text-decoration:none}

/* headings need scroll offset so the sticky rail doesn't cover them */
h2[id]{scroll-margin-top:2rem}

/* ==================== CARD ILLUSTRATIONS ==================== */
.hand-figs{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,13.5rem),1fr));
  gap:1.1rem;
  margin-top:2rem;
}
.hand-fig{
  padding:1.4rem 1.2rem 1.2rem;
  border:1px solid var(--edge);
  background:linear-gradient(168deg,var(--slab-2),rgba(20,23,38,.3));
  clip-path:polygon(0 0,100% 0,100% calc(100% - 1.3rem),calc(100% - 1.3rem) 100%,0 100%);
}
.hand-fig svg{width:100%;height:auto;margin-bottom:.9rem}
.hand-fig .rk{
  font-family:var(--display);
  font-size:.8rem;
  color:var(--gilt-dim);
  letter-spacing:.08em;
}
.hand-fig strong{display:block;font-size:1.02rem;margin-top:.15rem}
.hand-fig span{display:block;font-size:.86rem;color:var(--ash);margin-top:.35rem}

figure{margin:2.2rem 0 0}
figure svg{width:100%;height:auto}
figcaption{
  margin-top:.9rem;font-size:.85rem;color:var(--ash-dim);
  padding-left:1rem;border-left:2px solid var(--edge);
}


/* ==================== DOWNLOAD CTA ====================
   The button stays gold on every page: a primary action that changes
   colour stops being recognisable as the primary action.
   Identity comes from the accent stripe instead — a three-stop gradient
   that runs from the game's own colour into gold, so each section reads
   differently without breaking the system.                            */
.cta{position:relative;padding-left:2.3rem;overflow:hidden}
.cta::before{
  content:"";position:absolute;left:0;top:0;bottom:1.8rem;width:4px;
  background:linear-gradient(
    to bottom,
    var(--cta-a,var(--gilt)) 0%,
    var(--cta-b,var(--gilt)) 48%,
    var(--cta-c,var(--gilt)) 100%);
}
.cta strong{display:block;font-size:1.06rem;letter-spacing:-.005em}
.cta .btn{align-items:center;gap:.55rem}
.cta .btn svg{display:block}
.cta-more{margin-top:1.05rem;font-size:.86rem}
.cta-more a{color:var(--ash);text-decoration:none}
.cta-more a:hover{color:var(--gilt);text-decoration:underline}

/* ── per-game button + stripe ───────────────────────────────────────────
   Each game's button takes its own colour. The label colour is chosen
   per button so every one clears WCAG AA (4.5:1) — the label is 12.5px
   bold, which does not qualify as large text and so needs the full 4.5. */
.cta .btn{
  background:var(--btn,var(--gilt));
  border-color:var(--btn,var(--gilt));
  color:var(--btn-ink,var(--void));
}
.cta .btn:hover{
  background:var(--btn-hi,#DBBB78);
  border-color:var(--btn-hi,#DBBB78);
  color:var(--btn-ink,var(--void));
}

/* Teen Patti — hearts red · light label (5.17:1) */
.cta--tp {--cta-a:#B8324C;--cta-b:#8E3357;--cta-c:#C8A45C;
          --btn:#B8324C;--btn-hi:#CC3E59;--btn-ink:#F4F1EA}
/* Rummy — indigo · light label (4.67:1) */
.cta--rum{--cta-a:#5B62C4;--cta-b:#4A7BB0;--cta-c:#C8A45C;
          --btn:#5B62C4;--btn-hi:#6B72D4;--btn-ink:#F4F1EA}
/* Andar Bahar — gilt · dark label (8.55:1) */
.cta--ab {--cta-a:#C8A45C;--cta-b:#B8324C;--cta-c:#8E3357;
          --btn:#C8A45C;--btn-hi:#DBBB78;--btn-ink:#06070D}
/* Call Break — spade green · dark label (5.19:1) */
.cta--cb {--cta-a:#3F8F7A;--cta-b:#4E8C55;--cta-c:#C8A45C;
          --btn:#3F8F7A;--btn-hi:#4EA88F;--btn-ink:#06070D}
/* Dragon Tiger — ember · dark label (5.01:1) */
.cta--dt {--cta-a:#C4643A;--cta-b:#B8324C;--cta-c:#C8A45C;
          --btn:#C4643A;--btn-hi:#D9764A;--btn-ink:#06070D}
/* Blackjack — violet, lifted from #7A6BB5 to clear AA · dark label (4.73:1) */
.cta--bj {--cta-a:#7F70BB;--cta-b:#5B62C4;--cta-c:#C8A45C;
          --btn:#7F70BB;--btn-hi:#8F80CB;--btn-ink:#06070D}

@media (max-width:520px){
  .cta{padding-left:1.7rem}
}


/* ==================== APP BAR ====================
   Sits under the H1 so the download path is visible without scrolling.
   The H1 itself is deliberately NOT a link: it is the page's own
   strongest semantic signal and should not point off-site.          */
.appbar{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem .7rem;
  margin:1.4rem 0 0;padding:.72rem .95rem;
  border:1px solid var(--edge);
  border-left:3px solid var(--cta-a,var(--gilt));
  background:linear-gradient(100deg,rgba(20,23,38,.75),rgba(14,16,25,.4));
  font-size:.88rem;line-height:1.45;color:var(--ash);
  text-decoration:none;
  transition:border-color .2s ease,background .2s ease;
}
a.appbar:hover{
  border-color:var(--cta-a,var(--gilt));
  background:linear-gradient(100deg,rgba(26,30,48,.9),rgba(14,16,25,.5));
  text-decoration:none;
}
.appbar-name{font-weight:700;color:var(--bone)}
.appbar-txt{color:var(--ash)}
.appbar-go{
  margin-left:auto;white-space:nowrap;
  font-size:.76rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--cta-a,var(--gilt));
}
@media (max-width:560px){
  .appbar{font-size:.84rem;padding:.65rem .8rem}
  .appbar-go{margin-left:0;width:100%}
}

/* The accent variables live on .cta--*, so .appbar--* needs its own copy.
   Without these the left border silently falls back to gold on every game. */
.appbar--tp {--cta-a:#B8324C}
.appbar--rum{--cta-a:#5B62C4}
.appbar--ab {--cta-a:#C8A45C}
.appbar--cb {--cta-a:#3F8F7A}
.appbar--dt {--cta-a:#C4643A}
.appbar--bj {--cta-a:#7F70BB}


/* ==================== LINKED H1 ====================
   The heading links to Google Play. It is styled to stay a heading —
   no link colour, no underline — so the visual hierarchy holds and it
   does not read as body copy. The diamond is the only affordance, and
   it only lights up on hover or keyboard focus.                      */
h1 .h1-link,
.h1-link{
  color:inherit;
  text-decoration:none;
  display:inline;
}
.h1-link:hover,
.h1-link:focus-visible{
  color:inherit;
  text-decoration:none;
}
.h1-mark{
  display:inline-block;
  margin-left:.42em;
  font-size:.42em;
  vertical-align:.55em;
  color:var(--gilt-dim);
  transition:color .2s ease,transform .2s ease;
}
.h1-link:hover .h1-mark,
.h1-link:focus-visible .h1-mark{
  color:var(--gilt);
  transform:translateY(-2px);
}
.h1-link:focus-visible{
  outline:2px solid var(--gilt);
  outline-offset:6px;
  border-radius:3px;
}


/* ==================== batch 2 additions ====================
   Pages built from the cloned template use .more for the related-links
   grid, .src for the references block and .on for the active nav item.
   The originals styled these via other selectors; defining them here
   keeps the two generations of page identical. */
.more{display:grid;gap:.55rem;margin-top:1rem}
.more a{
  display:block;padding:.7rem .9rem;
  border:1px solid var(--edge);border-left:2px solid var(--gilt-dim);
  background:rgba(20,23,38,.4);color:var(--ash);
  font-size:.92rem;text-decoration:none;
  transition:border-color .18s ease,color .18s ease;
}
.more a:hover{border-left-color:var(--gilt);color:var(--bone);text-decoration:none}
.src{margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid var(--edge);
     font-size:.86rem;color:var(--ash-dim)}
.src ul{list-style:none;margin:.6rem 0 0;padding:0}
.src li{margin:0 0 .4rem}
.nav a.on{color:var(--gilt)}