:root{
  /* Brand, from the Ahmed Manzoor identity */
  --navy:#002760;
  --citron:#AAB200;
  --citron-ink:#5F6400;
  /* Chart marks: brand hues snapped to validated steps (light surface) */
  --c-out:#2C5698;
  --c-in:#6E7600;

  --paper:#EDEBE4;
  --paper-2:#E2DFD4;
  --paper-3:#D6D2C5;
  --ink:#111826;
  --ink-2:#39424F;
  --muted:#5C6572;
  --faint:#8A9199;
  --indigo:var(--navy);
  --indigo-soft:#3D5C93;
  --verd:var(--citron-ink);
  --rule:#BFBCAF;
  --rule-soft:#D0CDC2;
  --sel:#0E2D5E22;

  --f-display:"Bodoni Moda","Didot","Bodoni MT",Georgia,serif;
  --f-body:"Spectral","Iowan Old Style",Georgia,serif;
  --f-ur:"Noto Nastaliq Urdu","Jameel Noori Nastaleeq",serif;
  --f-dev:"Noto Serif Devanagari","Nirmala UI",serif;
  --f-gu:"Noto Serif Gujarati","Shruti",serif;
  --f-mono:ui-monospace,"SFMono-Regular","Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;

  --rail:190px;
  --gap:3.25rem;
  --measure:63ch;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --navy:#8CB0EE;
    --citron:#C6D12A;
    --citron-ink:#C6D12A;
    --c-out:#5288DE;
    --c-in:#8E9A15;
    --paper:#07162B;
    --paper-2:#0E2440;
    --paper-3:#173154;
    --ink:#E4E7EC;
    --ink-2:#BFC6D0;
    --muted:#8F98A6;
    --faint:#5F6976;
    --indigo:var(--navy);
    --indigo-soft:#5C7FBC;
    --verd:var(--citron-ink);
    --rule:#2A3549;
    --rule-soft:#1C2537;
    --sel:#7FA6E833;
  }
}
:root[data-theme="dark"]{
  --navy:#8CB0EE;
  --citron:#C6D12A;
  --citron-ink:#C6D12A;
  --c-out:#5288DE;
  --c-in:#8E9A15;
  --paper:#07162B;
  --paper-2:#0E2440;
  --paper-3:#173154;
  --ink:#E4E7EC;
  --ink-2:#BFC6D0;
  --muted:#8F98A6;
  --faint:#5F6976;
  --indigo:var(--navy);
  --indigo-soft:#5C7FBC;
  --verd:var(--citron-ink);
  --rule:#2A3549;
  --rule-soft:#1C2537;
  --sel:#7FA6E833;
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-weight:400;
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:var(--sel)}
a{color:var(--indigo);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--indigo) 40%,transparent);padding-bottom:1px}
a:hover{border-bottom-color:var(--indigo)}
:focus-visible{outline:2px solid var(--indigo);outline-offset:3px;border-radius:2px}

.wrap{max-width:1160px;margin:0 auto;padding:0 clamp(1.1rem,4vw,3rem)}
.spread{display:grid;grid-template-columns:var(--rail) minmax(0,var(--measure)) 1fr;column-gap:var(--gap)}
.rail{grid-column:1;padding-top:.55rem}
.main{grid-column:2}
.wide{grid-column:1 / -1}

/* ---------- micro type ---------- */
.label{
  font-family:var(--f-body);font-size:.66rem;font-weight:600;
  letter-spacing:.20em;text-transform:uppercase;color:var(--faint);
  display:block;
}
.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-size:.9em;letter-spacing:-.01em}
.ur{font-family:var(--f-ur);direction:rtl;line-height:2.1}
.dev{font-family:var(--f-dev)}
.gu{font-family:var(--f-gu)}

/* ---------- masthead ---------- */
/* One masthead offset for every page. The home page used to carry its
   own larger padding here, which made interior pages sit higher. */
header.mast{padding:0}
.eyebrow{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;align-items:baseline;padding-bottom:1.6rem}
.eyebrow .label{color:var(--muted)}
.namewrap{position:relative;border-top:1px solid var(--ink);padding-top:.4rem}
.name{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(3.2rem,12.4vw,9.4rem);
  line-height:.86;letter-spacing:-.028em;margin:0;
  text-wrap:balance;
}
.name .given{font-weight:400;font-style:italic;letter-spacing:-.018em}
.name-ur{
  font-family:var(--f-ur);direction:rtl;text-align:right;
  font-size:clamp(1.7rem,5.4vw,3.9rem);
  color:var(--indigo);
  line-height:1.5;
  margin:-.30em 0 0;
  padding-inline-end:.06em;
}
.scriptline{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem 1.15rem;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  margin-top:1.5rem;padding:.55rem 0;
  font-size:1.02rem;color:var(--ink-2);
}
.scriptline span{display:inline-flex;align-items:baseline;gap:.45rem}
.scriptline .rom{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);font-weight:600}
.lede{
  font-size:clamp(1.18rem,2.5vw,1.52rem);line-height:1.44;font-weight:300;
  margin:2.1rem 0 0;max-width:38ch;text-wrap:balance;
}
.lede em{font-style:italic;color:var(--indigo)}
.mastfoot{display:flex;flex-wrap:wrap;gap:.7rem 2.2rem;margin-top:2.2rem;padding-bottom:.4rem;align-items:baseline}
.mastfoot .item{display:flex;flex-direction:column;gap:.14rem}
.mastfoot .val{font-size:.98rem}

/* ---------- ledger ---------- */
.ledger{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
  border-top:2px solid var(--ink);margin-top:clamp(3.4rem,8vw,5.6rem);
}
.ledger .cell{
  padding:1.15rem 1.4rem 1.3rem 0;border-bottom:1px solid var(--rule-soft);
  min-width:0;container-type:inline-size;
}
.ledger .cell + .cell{border-left:1px solid var(--rule-soft);padding-left:1.4rem}
.ledger .fig{
  font-family:var(--f-display);font-weight:600;font-size:clamp(1.95rem,4.2vw,2.75rem);
  line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;display:block;
  max-width:100%;
}
/* A lakh-grouped figure is ~6.7em wide and overruns a narrow cell.
   Scale it to the cell, with a clamp fallback for engines without cqw. */
.ledger .fig.long{font-size:clamp(1.3rem,2.6vw,1.95rem);letter-spacing:-.042em}
.ledger .fig.long{font-size:min(1.95rem,13.2cqw)}
.ledger .fig .unit{font-size:.42em;font-weight:400;font-style:italic;letter-spacing:0;margin-left:.28em;color:var(--muted)}
.ledger .sub{font-size:.78rem;color:var(--muted);margin-top:.5rem;display:block;line-height:1.45}
.ledger .cell .label{margin-bottom:.6rem}

/* ---------- sections ---------- */
section{padding-top:clamp(3.6rem,8vw,6rem)}
.sechead{grid-column:1 / -1;border-top:1px solid var(--ink);padding-top:.55rem;margin-bottom:2.4rem;
  display:grid;grid-template-columns:var(--rail) minmax(0,var(--measure)) 1fr;column-gap:var(--gap);align-items:baseline}
.sechead h2{
  font-family:var(--f-display);font-weight:400;font-style:italic;
  font-size:clamp(1.5rem,3.4vw,2.15rem);letter-spacing:-.02em;margin:0;line-height:1.1;
}
.sechead .kicker{font-size:.8rem;color:var(--muted);max-width:34ch;line-height:1.5}
p{margin:0 0 1.05em}
.main > p:last-child{margin-bottom:0}

/* ---------- languages ---------- */
.langs{grid-column:1 / -1;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0;border-top:1px solid var(--rule)}
.lang{padding:1.5rem 1.5rem 1.6rem 0;border-bottom:1px solid var(--rule-soft)}
.lang + .lang{border-left:1px solid var(--rule-soft);padding-left:1.5rem}
.lang .native{font-size:1.75rem;line-height:1.35;color:var(--ink);display:block;margin-bottom:.15rem}
.lang.is-ur .native{font-family:var(--f-ur);direction:rtl;text-align:right;font-size:1.9rem;line-height:1.75;margin-bottom:-.1rem}
.lang .rom{font-family:var(--f-display);font-size:1.02rem;font-weight:600;letter-spacing:.01em}
.lang .rom a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule)}
.lang .rom a:hover{color:var(--navy);border-bottom-color:var(--c-out)}
.lang .note{font-size:.79rem;color:var(--muted);margin-top:.45rem;line-height:1.5}
.lang .dirs{margin-top:.7rem;display:flex;flex-wrap:wrap;gap:.3rem}

.chip{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.02em;
  border:1px solid var(--rule);padding:.16rem .42rem;color:var(--muted);
  white-space:nowrap;
}
.chip.out{color:var(--indigo);border-color:color-mix(in srgb,var(--indigo) 35%,var(--rule))}
.chip.in{color:var(--verd);border-color:color-mix(in srgb,var(--verd) 35%,var(--rule))}

/* ---------- cases ---------- */
.case{display:grid;grid-template-columns:var(--rail) minmax(0,var(--measure)) 1fr;column-gap:var(--gap);
  padding:2.1rem 0 2.2rem;border-bottom:1px solid var(--rule-soft)}
.case:first-of-type{border-top:1px solid var(--rule-soft)}
.case .marg{grid-column:1;padding-top:.3rem}
.case .marg .spec{
  font-size:1.55rem;line-height:1.6;color:var(--indigo);display:block;
  border-bottom:1px solid var(--rule-soft);padding-bottom:.5rem;margin-bottom:.55rem;
}
.case .marg .spec.ur{font-size:1.6rem;line-height:1.85;text-align:right;padding-bottom:.1rem}
.case .marg .gloss{font-size:.7rem;color:var(--faint);line-height:1.45;display:block}
.case .body{grid-column:2}
.case h3{font-family:var(--f-display);font-weight:600;font-size:1.42rem;letter-spacing:-.012em;margin:0 0 .15rem;line-height:1.22}
.case .who{font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;color:var(--verd);font-weight:600;
  margin:0 0 .85rem;display:flex;align-items:center;gap:.5rem}
.case .who .pic{width:1.35em;height:1.35em;stroke-width:1.5}
.case p{font-size:.98rem;color:var(--ink-2);margin-bottom:.85rem}
.case .meta{grid-column:3;padding-top:.45rem;display:flex;flex-direction:column;gap:.55rem;align-items:flex-start}
.case .vol{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-size:.92rem;color:var(--ink)}
.case .vol small{display:block;font-family:var(--f-body);font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--faint);margin-top:.2rem}
.case .pairs{display:flex;flex-wrap:wrap;gap:.28rem}

/* ---------- index ---------- */
.tools{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:.9rem 1.6rem;align-items:flex-end;
  padding-bottom:1rem;border-bottom:1px solid var(--rule);margin-bottom:.2rem}
.filterset{display:flex;flex-wrap:wrap;gap:.3rem}
.fbtn{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--f-body);font-size:.72rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  background:none;border:1px solid var(--rule);color:var(--muted);padding:.3rem .6rem;cursor:pointer;
  transition:color .15s,border-color .15s,background .15s;
}
.fbtn:hover{color:var(--ink);border-color:var(--ink-2)}
.fbtn[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.fbtn .c{font-family:var(--f-mono);font-size:.9em;opacity:.62;margin-left:.35rem;letter-spacing:0}
.grouping{display:flex;align-items:baseline;gap:.45rem}
.grouping button{
  font-family:var(--f-mono);font-size:.72rem;background:none;border:none;border-bottom:1px solid transparent;
  color:var(--muted);cursor:pointer;padding:.1rem 0;
}
.grouping button[aria-pressed="true"]{color:var(--indigo);border-bottom-color:var(--indigo)}

.tablewrap{grid-column:1 / -1;overflow-x:auto}
table.index{width:100%;border-collapse:collapse;font-size:.9rem;min-width:660px}
table.index caption{text-align:left;font-size:.75rem;color:var(--faint);padding:.85rem 0;letter-spacing:.04em}
table.index th{
  text-align:left;font-family:var(--f-body);font-size:.66rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint);padding:.5rem .8rem .5rem 0;border-bottom:1px solid var(--ink);
  vertical-align:bottom;white-space:nowrap;
}
table.index th.r,table.index td.r{text-align:right;padding-right:0}
table.index td{padding:.62rem .8rem .62rem 0;border-bottom:1px solid var(--rule-soft);vertical-align:top;color:var(--ink-2)}
table.index tr.subj td{
  border-bottom:1px solid var(--rule);padding-top:1.9rem;padding-bottom:.35rem;
  font-family:var(--f-display);font-style:italic;font-size:1.15rem;color:var(--ink);
}
table.index tr.subj .pic{width:1.05em;height:1.05em;color:var(--c-out);margin-right:.5rem;stroke-width:1.7}
table.index tr.subj .cnt{font-family:var(--f-mono);font-style:normal;font-size:.72rem;color:var(--faint);margin-left:.7rem;letter-spacing:.04em}
table.index td.sr{font-family:var(--f-mono);font-size:.78rem;color:var(--faint);width:2.6rem}
table.index td.wc{font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}
table.index td.dir{white-space:nowrap;font-family:var(--f-mono);font-size:.76rem;letter-spacing:.01em}
table.index td.dir .to{color:var(--faint);margin:0 .3rem}
table.index td.dir .tgt{color:var(--indigo)}
table.index tbody tr.row:hover td{background:var(--paper-2)}
.empty{padding:2.5rem 0;color:var(--muted);font-style:italic}

/* ---------- colophon ---------- */
.cols{grid-column:1 / -1;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2.4rem;border-top:1px solid var(--rule);padding-top:1.5rem}
.cols ul{list-style:none;margin:.7rem 0 0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.cols li{font-size:.92rem;color:var(--ink-2);padding-left:1.05rem;position:relative}
.cols li::before{content:"";position:absolute;left:0;top:.72em;width:.5rem;height:1px;background:var(--rule)}
.cols p{font-size:.92rem;color:var(--ink-2)}

footer{margin-top:clamp(3.6rem,8vw,5.4rem);border-top:2px solid var(--ink);padding:1.4rem 0 3.2rem}
.footgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:2rem 1.6rem;align-items:start}
.footgrid .big{font-family:var(--f-display);font-size:1.5rem;font-weight:400;font-style:italic;letter-spacing:-.015em}
.footgrid .val{font-size:.95rem;display:block;margin-top:.35rem}
.setline{margin-top:2.4rem;font-size:.72rem;color:var(--faint);display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;align-items:baseline}
.setline .ur{font-size:.95rem;line-height:2}

/* ---------- theme toggle ---------- */
.tt{position:fixed;top:.9rem;right:.9rem;z-index:20;background:var(--paper);border:1px solid var(--rule);
  color:var(--muted);font-family:var(--f-mono);font-size:.66rem;letter-spacing:.08em;padding:.32rem .55rem;cursor:pointer}
.tt:hover{color:var(--ink);border-color:var(--ink-2)}

/* ---------- settle ---------- */
@keyframes settle{from{transform:translateY(.34em)}to{transform:translateY(0)}}
@keyframes ink{from{opacity:.28}to{opacity:1}}
.settle{animation:settle .85s cubic-bezier(.2,.7,.2,1) both}
.inked{animation:ink 1.15s ease-out both}
.d1{animation-delay:.06s}.d2{animation-delay:.16s}.d3{animation-delay:.3s}
@media (prefers-reduced-motion:reduce){
  .settle,.inked{animation:none}
  *{scroll-behavior:auto!important}
}

/* ---------- responsive ---------- */
@media (max-width:940px){
  :root{--rail:130px;--gap:2rem}
  .case .meta{grid-column:2;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:.9rem;padding-top:.2rem}
}
@media (max-width:700px){
  body{font-size:16px}
  .spread,.sechead,.case{grid-template-columns:1fr}
  .rail,.main,.wide,.case .marg,.case .body,.case .meta,.sechead h2,.sechead .kicker{grid-column:1}
  .sechead{gap:.5rem}
  .sechead .kicker{margin-top:.2rem}
  .case .marg{display:flex;align-items:baseline;gap:.9rem;margin-bottom:.9rem;padding-top:0}
  .case .marg .spec{border-bottom:none;padding-bottom:0;margin-bottom:0;font-size:1.35rem}
  .case .marg .spec.ur{line-height:1.9}
  .ledger .cell + .cell{border-left:none;padding-left:0}
  .lang + .lang{border-left:none;padding-left:0}
  .lang{padding-right:0}
  .name-ur{margin-top:-.05em}
}

/* ---------- identity mark ---------- */
.amlogo{display:block;height:auto}
.amlogo .am-n{fill:var(--navy)}
.amlogo .am-c{fill:var(--citron)}
.amlogo .am-k{fill:var(--paper)}

.masthead-id{display:flex;align-items:center;gap:1.15rem;
  padding-top:clamp(1.9rem,4.4vw,2.9rem);padding-bottom:2rem}
.masthead-id .mark{width:96px;flex:none}
.masthead-id a.marklink{display:block;flex:none;width:96px;line-height:0;border:none;padding:0}
.masthead-id a.marklink .mark{width:100%}
.masthead-id .said{display:flex;flex-direction:column;gap:.3rem}
.masthead-id .said .role{
  font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2);font-weight:600;
}
.masthead-id .said .site{
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--citron-ink);font-weight:600;
  border-bottom-color:color-mix(in srgb,var(--citron-ink) 45%,transparent);width:max-content;
}
.masthead-id .said .site:hover{border-bottom-color:var(--citron-ink)}
.lockup .lock{width:min(268px,100%)}
@media (max-width:700px){
  .masthead-id{padding-bottom:1.4rem;gap:.9rem}
  .masthead-id .mark{width:76px}
  .masthead-id a.marklink{width:76px}
  .lockup .lock{width:min(230px,80%)}
}

/* ---------- pictograms ---------- */
.pic{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;vertical-align:-.2em}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- unit chart ---------- */
.units{grid-column:1 / -1;border-top:1px solid var(--ink);margin-top:.2rem}
.urow{
  display:grid;grid-template-columns:minmax(140px,172px) minmax(0,1fr) 170px;
  align-items:center;gap:1.1rem;padding:.62rem 0;border-bottom:1px solid var(--rule-soft);
  cursor:default;
}
.urow:hover{background:var(--paper-2)}
.urow .ulab{display:flex;align-items:center;gap:.5rem;font-size:.88rem;color:var(--ink)}
.urow .ulab .pic{color:var(--c-out);width:1.45em;height:1.45em;stroke-width:1.5}
.urow svg.squares{width:100%;height:auto;display:block;overflow:visible}
.urow svg.squares.byline{width:auto;height:15px;max-width:100%}
@media (max-width:640px){.urow svg.squares.byline{height:11px}}
.urow svg.squares rect{fill:var(--c-out)}
.urow:hover svg.squares rect{fill:var(--c-in)}
.urow:hover .ulab .pic{color:var(--c-in)}
.urow .uval{
  text-align:right;font-family:var(--f-mono);font-variant-numeric:tabular-nums;
  font-size:.82rem;color:var(--ink);white-space:nowrap;
}
.urow .uval small{display:block;font-family:var(--f-body);font-size:.64rem;color:var(--faint);
  letter-spacing:.06em;white-space:nowrap;text-transform:uppercase;margin-top:.15rem}
.ucap{grid-column:1 / -1;font-size:.74rem;color:var(--muted);padding-top:.9rem;line-height:1.5;max-width:62ch}
.ukey{display:inline-flex;align-items:center;gap:.4rem;margin-right:.9rem}
.ukey i{width:11px;height:11px;background:var(--c-out);display:inline-block}

/* ---------- flow ---------- */
.flowwrap{grid-column:1 / -1;overflow-x:auto;padding-top:.4rem}
svg.flow{width:100%;min-width:560px;height:auto;display:block}
svg.flow .rib{opacity:.72;transition:opacity .18s}
svg.flow .rib-out{fill:var(--c-out)}
svg.flow .rib-in{fill:var(--c-in)}
svg.flow .ribbons:hover .rib{opacity:.22}
svg.flow .ribbons .rib:hover{opacity:1}
svg.flow .node{fill:var(--ink);opacity:.85}
svg.flow .nlab{font-family:var(--f-mono);font-size:13px;fill:var(--ink);letter-spacing:.04em}
svg.flow .nnat{font-family:var(--f-body);font-size:13px;fill:var(--muted)}
svg.flow .ncnt{font-family:var(--f-mono);font-size:12px;fill:var(--c-out);font-weight:700}
svg.flow .axlab{font-family:var(--f-body);font-size:9.5px;fill:var(--faint);letter-spacing:.2em;font-weight:600}
.flowkey{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;padding-top:.9rem;font-size:.76rem;color:var(--muted)}
.flowkey span{display:inline-flex;align-items:center;gap:.45rem}
.flowkey i{width:14px;height:9px;display:inline-block}
.flowkey i.o{background:var(--c-out)}
.flowkey i.n{background:var(--c-in)}

/* ---------- specimen row ---------- */
.specimens{grid-column:1 / -1;display:grid;grid-template-columns:repeat(auto-fit,minmax(176px,1fr));
  border-top:1px solid var(--rule);margin-bottom:2.2rem}
.spec-cell{padding:1.3rem 1.2rem 1.4rem 0;border-bottom:1px solid var(--rule-soft)}
.spec-cell + .spec-cell{border-left:1px solid var(--rule-soft);padding-left:1.2rem}
.spec-cell .word{font-size:1.85rem;line-height:1.4;color:var(--navy);display:block}
.spec-cell.is-ur .word{font-family:var(--f-ur);direction:rtl;text-align:right;font-size:2rem;line-height:1.9}
.spec-cell .tag{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);
  font-weight:600;margin-top:.5rem;display:block}
@media (max-width:700px){
  .urow{grid-template-columns:1fr auto;gap:.35rem .8rem}
  .urow svg.squares{grid-column:1 / -1;order:3}
  .urow .uval{text-align:right}
  .spec-cell + .spec-cell{border-left:none;padding-left:0}
  .spec-cell{padding-right:0}
}

/* ---------- hover language ----------
   The page is built on hairlines, not boxes, so hover thickens a rule and
   nudges one accent element. No lift, no shadow, no shape change. */
.case,.lang,.spec-cell,.ledger .cell{position:relative}
.case::after,.lang::after,.spec-cell::after,.ledger .cell::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--citron);transform:scaleX(0);transform-origin:left center;
  transition:transform .34s cubic-bezier(.2,.7,.2,1);pointer-events:none;
}
.case:hover::after,.lang:hover::after,.spec-cell:hover::after,.ledger .cell:hover::after{transform:scaleX(1)}

/* selected work */
.case{padding-inline:15px;margin-inline:-15px;transition:background-color .24s ease}
.case:hover{background:var(--paper-2)}
.case .marg .spec,.case h3{transition:transform .28s cubic-bezier(.2,.7,.2,1),color .24s ease}
.case:hover .marg .spec{transform:translateX(3px)}
.case:hover h3{color:var(--navy)}

/* languages + specimens */
.lang .native,.spec-cell .word{transition:transform .28s cubic-bezier(.2,.7,.2,1),color .24s ease}
.lang:hover .native,.spec-cell:hover .word{transform:translateY(-2px);color:var(--navy)}
.lang:hover .note,.spec-cell:hover .tag{color:var(--ink-2)}
.lang .note,.spec-cell .tag{transition:color .24s ease}

/* ledger */
.ledger .fig,.ledger .sub{transition:color .24s ease}
.ledger .cell:hover .fig{color:var(--navy)}
.ledger .cell:hover .sub{color:var(--ink-2)}

/* practice columns */
.cols li{transition:color .2s ease,padding-left .24s cubic-bezier(.2,.7,.2,1)}
.cols li::before{transition:width .24s cubic-bezier(.2,.7,.2,1),background-color .2s ease}
.cols li:hover{color:var(--ink);padding-left:1.35rem}
.cols li:hover::before{width:.85rem;background:var(--citron)}

/* ---------- section reveal ----------
   Default state is fully visible. The dimmed start only exists once JS has
   confirmed an observer is running, so no-JS and observer failure both leave
   every heading readable. */
html.js-reveal .sechead > *{
  opacity:.3;transform:translateY(10px);
  transition:opacity .66s cubic-bezier(.22,.7,.2,1),transform .66s cubic-bezier(.22,.7,.2,1);
}
html.js-reveal .sechead > *:nth-child(2){transition-delay:.07s}
html.js-reveal .sechead > *:nth-child(3){transition-delay:.14s}
html.js-reveal .sechead.in > *{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.js-reveal .sechead > *{opacity:1;transform:none;transition:none}
  .case::after,.lang::after,.spec-cell::after,.ledger .cell::after{transition:none}
  .case:hover .marg .spec,.lang:hover .native,.spec-cell:hover .word{transform:none}
  .cols li:hover{padding-left:1.05rem}
}
@media (hover:none){
  .case:hover{background:none}
  .case::after,.lang::after,.spec-cell::after,.ledger .cell::after{display:none}
}

/* ============================================================
   Added for the multi-page build: navigation, prose pages,
   rate tables, and the enquiry form.
   ============================================================ */

/* ---------- navigation ---------- */
.sitenav{
  display:flex;flex-wrap:wrap;gap:.2rem 1.5rem;align-items:baseline;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:.55rem 0;margin-bottom:2.2rem;
}
.sitenav a{
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  color:var(--muted);border-bottom:1px solid transparent;padding-bottom:2px;
}
.sitenav a:hover{color:var(--ink);border-bottom-color:var(--rule)}
.sitenav a[aria-current="page"]{color:var(--navy);border-bottom-color:var(--navy)}

/* ---------- interior page header ---------- */
.pagehead{border-top:2px solid var(--ink);padding-top:.6rem;margin-bottom:2.6rem}
.pagehead h1{
  font-family:var(--f-display);font-weight:600;
  font-size:clamp(2.1rem,6vw,3.6rem);line-height:1.02;letter-spacing:-.028em;
  margin:.3rem 0 .5rem;text-wrap:balance;max-width:20ch;
}
.pagehead .standfirst{
  font-size:clamp(1.02rem,2.1vw,1.24rem);font-weight:300;line-height:1.5;
  color:var(--ink-2);max-width:52ch;margin:0;
}

/* ---------- prose ---------- */
.prose{max-width:66ch}
.prose h2{
  font-family:var(--f-display);font-style:italic;font-weight:400;
  font-size:clamp(1.32rem,3vw,1.72rem);letter-spacing:-.015em;line-height:1.15;
  margin:2.6rem 0 .8rem;border-top:1px solid var(--rule);padding-top:.55rem;
}
.prose h3{font-family:var(--f-body);font-size:.94rem;font-weight:600;margin:1.6rem 0 .35rem;color:var(--ink)}
.prose p{margin:0 0 1em;color:var(--ink-2)}
.prose p.first{color:var(--ink)}
.prose ul{margin:0 0 1.1em;padding:0;list-style:none}
.prose li{position:relative;padding-left:1.15rem;margin-bottom:.45rem;color:var(--ink-2)}
.prose li::before{content:"";position:absolute;left:0;top:.72em;width:.55rem;height:1px;background:var(--rule)}
.prose strong{color:var(--ink);font-weight:600}
.prose .aside{
  border-left:2px solid var(--citron);padding:.15rem 0 .15rem 1rem;
  margin:1.6rem 0;font-size:.92rem;color:var(--muted);
}

/* ---------- rate tables ---------- */
.ratewrap{overflow-x:auto;margin:0 0 1.6rem}
table.rates{width:100%;border-collapse:collapse;font-size:.94rem;min-width:460px}
table.rates caption{
  text-align:left;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);font-weight:600;padding:0 0 .7rem;
}
table.rates th{
  text-align:left;font-family:var(--f-body);font-size:.64rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--faint);
  padding:.45rem .9rem .45rem 0;border-bottom:1px solid var(--ink);vertical-align:bottom;
}
table.rates th.r,table.rates td.r{text-align:right;padding-right:0;white-space:nowrap}
table.rates td{padding:.62rem .9rem .62rem 0;border-bottom:1px solid var(--rule-soft);
  color:var(--ink-2);vertical-align:top}
table.rates td.fig{font-family:var(--f-mono);font-variant-numeric:tabular-nums;color:var(--ink)}
table.rates td .unit{color:var(--faint);font-size:.82em;margin-left:.25rem}
table.rates tbody tr:hover td{background:var(--paper-2)}
table.rates td small{display:block;font-size:.78rem;color:var(--muted);margin-top:.15rem}

/* ---------- fact list ---------- */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0;
  border-top:1px solid var(--rule);margin:.4rem 0 1.6rem}
.facts div{padding:.95rem 1.3rem .95rem 0;border-bottom:1px solid var(--rule-soft)}
.facts div + div{border-left:1px solid var(--rule-soft);padding-left:1.3rem}
.facts dt{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);
  font-weight:600;margin-bottom:.3rem}
.facts dd{margin:0;font-size:.94rem;color:var(--ink)}
.facts dd small{display:block;font-size:.78rem;color:var(--muted);margin-top:.2rem;line-height:1.45}

/* ---------- form ---------- */
.formwrap{max-width:34rem}
.field{display:flex;flex-direction:column;gap:.3rem;margin-bottom:1.1rem}
.field label{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);font-weight:600}
.field label .req{color:var(--citron-ink)}
.field input,.field select,.field textarea{
  font-family:var(--f-body);font-size:.98rem;color:var(--ink);
  background:var(--paper-2);border:1px solid var(--rule);border-radius:0;
  padding:.6rem .7rem;width:100%;transition:border-color .18s ease,background-color .18s ease;
}
.field textarea{min-height:7.5rem;resize:vertical;line-height:1.55}
.field select{appearance:none;background-image:none;cursor:pointer}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--navy);background:var(--paper);
  box-shadow:inset 0 -2px 0 var(--navy);
}
.field .hint{font-size:.78rem;color:var(--muted)}
.field.pair{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;align-items:start}
.field.pair > *{display:flex;flex-direction:column;gap:.3rem}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.btn{
  font-family:var(--f-body);font-size:.74rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;background:var(--navy);color:var(--paper);
  border:1px solid var(--navy);padding:.72rem 1.5rem;cursor:pointer;
  transition:background-color .18s ease,color .18s ease;
}
.btn:hover{background:transparent;color:var(--navy)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.formnote{font-size:.8rem;color:var(--muted);margin-top:.9rem;max-width:46ch}
.formmsg{margin-top:1rem;padding:.85rem 1rem;font-size:.9rem;border-left:2px solid var(--rule)}
.formmsg.ok{border-left-color:var(--navy);color:var(--ink);background:var(--paper-2)}
.formmsg.err{border-left-color:var(--citron);color:var(--ink);background:var(--paper-2)}

/* ---------- contact columns ---------- */
.contactgrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2rem,5vw,4rem);align-items:start}
@media (max-width:820px){.contactgrid{grid-template-columns:1fr}}
.sidepanel h2{margin-top:0}
.sidepanel h2:first-child{border-top:none;padding-top:0}

/* ---------- availability ---------- */
.avail{display:inline-flex;align-items:center;gap:.5rem;font-size:.7rem;
  letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--ink-2)}
.avail i{width:8px;height:8px;background:var(--citron-ink);border-radius:50%;flex:none}

/* ---------- foot CTA, repeated on every page ---------- */
.footcta{border-top:2px solid var(--ink);margin-top:clamp(3.4rem,8vw,5rem);padding-top:1.5rem;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.4rem 2.5rem;align-items:end}
.footcta h2{font-family:var(--f-display);font-style:italic;font-weight:400;
  font-size:clamp(1.4rem,3.2vw,1.95rem);margin:0 0 .4rem;letter-spacing:-.015em;line-height:1.15}
.footcta p{margin:0;font-size:.92rem;color:var(--muted);max-width:46ch}
.footcta .acts{display:flex;flex-wrap:wrap;gap:.7rem}
@media (max-width:640px){.footcta{grid-template-columns:1fr}}


/* ---------- side-heading rows for prose pages ----------
   The page is 1160px wide and running text belongs at ~63 characters.
   Putting the section heading in the left rail uses the margin the way
   the home page does, instead of leaving a narrow column adrift. */
.prose:has(.leaves){max-width:none}
.leaves{display:block}
.leaf{
  display:grid;grid-template-columns:minmax(0,300px) minmax(0,72ch);
  column-gap:3.25rem;border-top:1px solid var(--rule);
  padding:1.5rem 0 .9rem;align-items:start;
}
.leaf:first-child{border-top:2px solid var(--ink)}
.leafhead{padding-top:.15rem}
.leafhead h2{
  font-family:var(--f-display);font-style:italic;font-weight:400;
  font-size:1.34rem;line-height:1.22;letter-spacing:-.012em;
  margin:0;text-align:right;color:var(--ink);border:none;padding:0;text-wrap:balance;
}
.leafbody > :first-child{margin-top:0}
.leafbody > :last-child{margin-bottom:0}
.leafbody h3:first-child{margin-top:0}
@media (max-width:860px){
  .leaf{grid-template-columns:1fr;gap:.45rem}
  .leafhead h2{text-align:left}
  /* Once stacked the body would run the full width, which is far too wide
     to read. Cap it at the same measure the two column layout uses. */
  .leafbody{max-width:70ch}
}


/* Prose pages: the page header shares the leaf grid, so the eyebrow sits in
   the rail and the headline starts on the same left edge as the body text.
   Without this the hero floats alone against a wide empty right side. */
.leafpage .pagehead{
  display:grid;grid-template-columns:minmax(0,300px) minmax(0,72ch);
  column-gap:3.25rem;align-items:start;
}
.leafpage .pagehead .label{grid-column:1;text-align:right;padding-top:.55rem;line-height:1.4}
.leafpage .pagehead h1{grid-column:2;margin-top:0;max-width:none}
.leafpage .pagehead .standfirst{grid-column:2;max-width:62ch}
@media (max-width:860px){
  .leafpage .pagehead{grid-template-columns:1fr}
  .leafpage .pagehead .label{text-align:left;padding-top:0}
  .leafpage .pagehead h1,.leafpage .pagehead .standfirst{grid-column:1}
  .leafpage .pagehead .standfirst{max-width:62ch}
}


/* ---------- certificate of accuracy specimen ----------
   A facsimile of the real document with every client field blocked out.
   It has to read as a genuine artefact, so it keeps the document's own
   measure and hierarchy rather than being restyled as web copy. */
.coa{
  border:1px solid var(--rule);background:var(--paper-2);
  padding:clamp(1.5rem,3.5vw,2.6rem);max-width:44rem;margin:0 0 1.2rem;
  position:relative;
}
.coa h3{
  font-family:var(--f-display);font-weight:600;font-size:1.5rem;letter-spacing:-.01em;
  text-align:center;margin:0 0 1.6rem;color:var(--ink);
}
.coa p{font-size:.95rem;line-height:1.72;color:var(--ink-2);margin:0 0 1.05em}
.coa .sig{border-top:1px solid var(--rule);margin-top:1.8rem;padding-top:1.1rem;
  font-size:.9rem;line-height:1.75;color:var(--ink-2)}
.coa .sig b{color:var(--ink);font-weight:600}
.coa .sigline{
  display:inline-block;width:11rem;border-bottom:1px solid var(--ink-2);
  height:1.5rem;vertical-align:-.35rem;margin-left:.35rem;
}
.redact{
  display:inline-block;background:var(--paper-3);color:var(--muted);
  font-family:var(--f-mono);font-size:.76em;letter-spacing:.04em;
  padding:.05em .34em;border-bottom:1px solid var(--rule);
  white-space:nowrap;
}
:root[data-theme="dark"] .redact,
:root:not([data-theme="light"]) .redact{color:var(--ink-2)}
.coa-note{font-size:.82rem;color:var(--muted);max-width:44rem;line-height:1.6}

/* ---------- verification strip ---------- */
.verify{grid-column:1 / -1;display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
  gap:0;border-top:1px solid var(--rule);margin-top:.2rem}
.verify .v{padding:1.15rem 1.4rem 1.3rem 0;border-bottom:1px solid var(--rule-soft)}
.verify .v + .v{border-left:1px solid var(--rule-soft);padding-left:1.4rem}
.verify .v .label{margin-bottom:.5rem}
.verify .v a{font-size:.98rem;display:inline-block}
.verify .v p{font-size:.8rem;color:var(--muted);margin:.45rem 0 0;line-height:1.5}
.verify .v .num{font-family:var(--f-mono);font-size:.92rem;color:var(--ink);letter-spacing:.02em}
@media (max-width:700px){
  .verify .v + .v{border-left:none;padding-left:0}
  .verify .v{padding-right:0}
}


/* ---------- bilingual work samples ---------- */
.sample{
  display:grid;grid-template-columns:minmax(0,258px) minmax(0,1fr);
  column-gap:3.25rem;border-top:1px solid var(--rule);
  padding:1.7rem 0 1.4rem;align-items:start;
}
.sample:first-of-type{border-top:2px solid var(--ink)}
.samhead{display:flex;flex-direction:column;gap:.5rem;align-items:flex-end;text-align:right;padding-top:.2rem}
.samhead .dom{font-family:var(--f-display);font-style:italic;font-size:1.22rem;line-height:1.25;color:var(--ink)}
.samhead .meta{font-family:var(--f-mono);font-size:.7rem;color:var(--muted);letter-spacing:.03em}
.sampair{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;align-items:start}
.samside{min-width:0}
.samlab{display:block;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);font-weight:600;margin-bottom:.5rem;
  border-bottom:1px solid var(--rule-soft);padding-bottom:.35rem}
.samside p{font-size:.93rem;line-height:1.68;color:var(--ink-2);margin:0}
.samside p.ur{font-family:var(--f-ur);direction:rtl;text-align:right;font-size:1.02rem;line-height:2.35}
.samside p.dev{font-family:var(--f-dev);font-size:.96rem;line-height:1.95}
.samnote{
  margin:1.3rem 0 0;padding:.9rem 0 0;border-top:1px solid var(--rule-soft);
  font-size:.88rem;line-height:1.62;color:var(--muted);max-width:70ch;
}
.samnote b{color:var(--ink);font-weight:600}
@media (max-width:900px){
  .sampair{grid-template-columns:1fr;gap:1.3rem}
}
@media (max-width:860px){
  .sample{grid-template-columns:1fr;gap:.7rem}
  .samhead{align-items:flex-start;text-align:left;flex-direction:row;flex-wrap:wrap;gap:.4rem .9rem;align-items:baseline}
}
.provenance{
  border-left:2px solid var(--citron);padding:.15rem 0 .15rem 1rem;
  margin:0 0 2.4rem;font-size:.9rem;color:var(--muted);max-width:70ch;line-height:1.62;
}
.provenance b{color:var(--ink-2)}


/* ---------- process flow, vertical spine ----------
   Vertical rather than a horizontal chain of eight boxes: the steps have
   real prose attached to them, and a horizontal flow at this width would
   force the labels down to an unreadable size. */
.flowsteps{position:relative;padding-left:2.4rem;margin:0 0 1.6rem}
.flowsteps::before{
  content:"";position:absolute;left:6px;top:.55rem;bottom:1.4rem;
  width:1px;background:var(--rule);
}
.fstep{position:relative;padding:0 0 1.5rem}
.fstep::before{
  content:"";position:absolute;left:-2.4rem;top:.35rem;width:13px;height:13px;
  border-radius:50%;background:var(--paper);border:2px solid var(--c-out);
}
.fstep.ext::before{border-color:var(--c-in)}
.fstep.sign::before{background:var(--c-out);border-color:var(--c-out)}
.fstep h3{
  font-family:var(--f-body);font-size:1rem;font-weight:600;color:var(--ink);
  margin:0 0 .2rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem .8rem;
}
.fstep .who{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.04em;font-weight:400;
  color:var(--muted);border:1px solid var(--rule);padding:.1rem .4rem;white-space:nowrap;
}
.fstep .who.ext{color:var(--verd);border-color:color-mix(in srgb,var(--verd) 40%,var(--rule))}
.fstep p{font-size:.9rem;color:var(--ink-2);margin:.25rem 0 0;max-width:64ch}
.fstep.pair2{padding-bottom:.4rem}
.twoup{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin:.5rem 0 0}
.twoup > div{border-left:2px solid var(--c-out);padding-left:.9rem}
.twoup h4{font-family:var(--f-body);font-size:.9rem;font-weight:600;margin:0 0 .15rem;color:var(--ink)}
.twoup p{font-size:.86rem;margin:0;color:var(--ink-2)}
.merge{font-size:.82rem;color:var(--muted);margin:.9rem 0 0;font-style:italic}
.flowkeyv{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;font-size:.78rem;color:var(--muted);
  border-top:1px solid var(--rule-soft);padding-top:.9rem;margin-bottom:2rem}
.flowkeyv span{display:inline-flex;align-items:center;gap:.45rem}
.flowkeyv i{width:12px;height:12px;border-radius:50%;border:2px solid var(--c-out);display:inline-block}
.flowkeyv i.e{border-color:var(--c-in)}
.flowkeyv i.s{background:var(--c-out)}
@media (max-width:640px){ .twoup{grid-template-columns:1fr;gap:.9rem} }

/* ---------- services ---------- */
.svcs{grid-column:1 / -1;display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));
  column-gap:2.6rem;row-gap:0;border-top:1px solid var(--rule)}
.svc{padding:1.35rem 0 1.5rem;border-bottom:1px solid var(--rule-soft);
  transition:background-color .24s ease}
.svc:hover{background:var(--paper-2);box-shadow:-.7rem 0 0 var(--paper-2),.7rem 0 0 var(--paper-2)}
.svc .no{font-family:var(--f-mono);font-size:.68rem;color:var(--citron-ink);
  letter-spacing:.12em;display:block;margin-bottom:.3rem}
.svc h3{font-family:var(--f-display);font-style:italic;font-weight:400;
  font-size:1.14rem;letter-spacing:-.01em;margin:0 0 .45rem;line-height:1.2}
.svc h3 a{color:inherit;border-bottom:1px solid var(--rule);text-decoration:none}
.svc h3 a:hover{border-bottom-color:var(--c-out);color:var(--navy)}
.svc p{font-size:.88rem;color:var(--ink-2);margin:0 0 .55rem;line-height:1.55}
.svc ul{list-style:none;margin:0 0 .6rem;padding:0;display:flex;flex-wrap:wrap;gap:.28rem .5rem}
.svc li{font-size:.79rem;color:var(--ink-2);border:1px solid var(--rule-soft);
  padding:.13rem .44rem;white-space:nowrap}
.svc .price{font-family:var(--f-mono);font-size:.72rem;color:var(--muted);
  letter-spacing:.04em;display:block;margin-top:.5rem}
.svc .price b{color:var(--ink);font-weight:600}

.svcnote{grid-column:1 / -1;font-size:.8rem;color:var(--muted);padding-top:1.1rem;
  line-height:1.6;max-width:70ch}
.svcnote b{color:var(--ink-2)}