/* Nard's look: a page set the way a manuscript sets one. Carried over from the static site's
   assets/name.css, with one change of idea. That site put both languages in every page and
   swapped them round with CSS; here a page is in one language, so the name you are reading is
   simply .big and the other script is .small, and right to left is :root[dir="rtl"] whatever
   the language is. */

main{flex:1;width:100%;max-width:1100px;margin:0 auto;padding:clamp(40px,6vw,76px) clamp(20px,5vw,56px)}

/* ---- the head of an entry ---- */

.crumb{
  text-align:center;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--dim);
}
:root[dir="rtl"] .crumb{letter-spacing:0;text-transform:none;font-size:14px}
.crumb a{color:inherit;text-decoration:none}
.crumb a:hover,.crumb a:focus-visible{color:var(--accent)}

/* The name you are reading is the large gold one; the other script sits under it, small and quiet. */
.head{margin-top:16px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.head h1{margin:0;font-weight:400;line-height:1.2;font-size:clamp(32px,5.4vw,56px);color:var(--accent)}
:root[dir="rtl"] .head h1{font-size:clamp(38px,7vw,64px);line-height:1.3}
.head .small{font-size:clamp(18px,2.6vw,24px);color:var(--dim);line-height:1.3}
.head .small[dir="ltr"]{letter-spacing:.14em;text-transform:uppercase}
.head .gloss{margin:14px auto 0;max-width:46ch;color:var(--dim);font-size:16px;font-style:italic}
:root[dir="rtl"] .head .gloss{font-style:normal;font-size:17px}

/* the rosette a manuscript opens with, here ruling the parts apart */
.shamsa{display:block;margin:clamp(28px,4vw,44px) auto;width:44px;height:44px;color:var(--gold);opacity:.6}

/* ---- the body ---- */

.lead{margin:0 auto;max-width:62ch;color:var(--dim);font-size:19px}
.lead + .lead{margin-top:1.2em}
.lead em{color:var(--ink);font-style:italic}
:root[dir="rtl"] .lead{max-width:58ch}
:root[dir="rtl"] .lead em{font-style:normal}
:root[dir="ltr"] .lead.first::first-letter{
  float:left;font-size:3.1em;line-height:.86;padding:.06em .12em 0 0;color:var(--accent);
}

/* ---- what it is in the game ----
   Kept to what a player knows before they start, or from the first minute of meeting it.
   Nothing here is allowed to spend a surprise. */
.ingame{
  margin:clamp(32px,4.5vw,50px) auto 0;max-width:58ch;
  padding:20px 24px;border:1px solid var(--line);border-radius:2px;
  background:linear-gradient(180deg,var(--glow-soft),transparent 70%);
}
.ingame h2{
  margin:0 0 8px;font-weight:400;
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);
}
:root[dir="rtl"] .ingame h2{letter-spacing:0;text-transform:none;font-size:15px}
.ingame p{margin:0;color:var(--dim);font-size:17px}
.ingame p + p{margin-top:.8em}

/* a name still behind a seal says so instead of saying nothing */
.ingame.sealed{border-style:dashed}
.ingame.sealed h2{color:var(--dim)}

/* ---- the plate, ruled the way a manuscript rules one ---- */

figure{margin:0}
.plate{margin:clamp(34px,4.5vw,52px) auto 0;max-width:320px}
.frame{
  position:relative;margin:14px;padding:9px;background:var(--plate);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.55),
    0 0 0 4px var(--gold),
    0 0 0 5px rgba(0,0,0,.45),
    0 0 0 9px var(--plate),
    0 0 0 10px #2f4f86,
    0 0 0 11px rgba(0,0,0,.3),
    0 26px 60px rgba(0,0,0,.45);
}
:root[data-theme="light"] .frame{
  box-shadow:
    0 0 0 1px rgba(0,0,0,.35),
    0 0 0 4px var(--gold),
    0 0 0 5px rgba(0,0,0,.28),
    0 0 0 9px var(--plate),
    0 0 0 10px #2f4f86,
    0 0 0 11px rgba(0,0,0,.2),
    0 22px 48px rgba(90,70,40,.28);
}
.frame img{display:block;width:100%;height:auto}
.plate figcaption{margin-top:16px;text-align:center;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}
:root[dir="rtl"] .plate figcaption{letter-spacing:0;text-transform:none;font-size:15px}

/* ---- the other names ---- */

.also{margin:clamp(36px,5vw,56px) auto 0;max-width:62ch;text-align:center}
.also h2{
  margin:0 0 14px;font-weight:400;
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--dim);
}
:root[dir="rtl"] .also h2{letter-spacing:0;text-transform:none;font-size:15px}
.also a{
  display:inline-block;margin:0 5px 8px;padding:8px 16px;
  border:1px solid var(--line);border-radius:2px;
  color:var(--ink);text-decoration:none;font-size:15px;
  transition:color .2s ease,border-color .2s ease;
}
.also a:hover,.also a:focus-visible{color:var(--accent);border-color:var(--accent)}

.ask{margin:clamp(30px,4vw,46px) 0 0;text-align:center}
.ask a{
  display:inline-block;margin:0 6px 10px;padding:11px 22px;
  border:1px solid var(--line);border-radius:2px;
  font-size:13px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;
  transition:color .2s ease,border-color .2s ease;
}
.ask a:hover,.ask a:focus-visible{color:var(--accent);border-color:var(--accent)}
:root[dir="rtl"] .ask a{letter-spacing:0;text-transform:none;font-size:16px}

/* ---- the roster page ---- */

.part{
  margin:clamp(40px,5.5vw,64px) 0 0;text-align:center;font-weight:400;
  font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);
}
:root[dir="rtl"] .part{letter-spacing:0;text-transform:none;font-size:20px}
.partnote{margin:10px auto 0;max-width:56ch;text-align:center;color:var(--dim);font-size:15px}

.roster{margin:clamp(20px,3vw,30px) 0 0;padding:0;list-style:none;
  display:grid;gap:clamp(12px,1.8vw,18px);
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
}
.roster li a{
  display:flex;gap:14px;align-items:center;height:100%;padding:16px 18px;
  border:1px solid var(--line);border-radius:2px;text-decoration:none;color:inherit;
  background:linear-gradient(180deg,var(--glow-soft),transparent 60%);
  transition:border-color .25s ease,transform .25s ease;
}
.roster li a:hover,.roster li a:focus-visible{border-color:var(--accent)}
@media (prefers-reduced-motion:no-preference){
  .roster li a:hover{transform:translateY(-2px)}
}

/* the face, as the game paints it: a bust on transparency in a gold ring */
.mug{
  flex:0 0 auto;width:66px;height:66px;border-radius:50%;overflow:hidden;
  border:1px solid var(--gold);box-shadow:0 0 0 3px var(--glow-soft);
  background:radial-gradient(circle at 50% 40%, var(--glow), transparent 70%), var(--plate);
}
.mug img{display:block;width:100%;height:100%;object-fit:cover}
.mug.empty{border-style:dashed;background:none;box-shadow:none}

.who{display:flex;flex-direction:column;min-width:0}
.roster .big{font-size:22px;line-height:1.3;color:var(--accent)}
.roster .small{font-size:14px;color:var(--dim);line-height:1.4}
.roster .small[dir="ltr"]{font-size:12px;letter-spacing:.14em;text-transform:uppercase}
/* The other script keeps to the side the card is read from, not the side its own letters run from. */
:root[dir="rtl"] .roster .small{text-align:right}
:root[dir="ltr"] .roster .small{text-align:left}
.roster .what{margin:6px 0 0;color:var(--ink);font-size:15px;line-height:1.5}

/* the same face at the head of that name's own page */
.face{
  width:clamp(160px,26vw,210px);height:clamp(160px,26vw,210px);
  margin:clamp(18px,3vw,26px) auto 0;border-radius:50%;
  border:1px solid var(--gold);box-shadow:0 0 0 5px var(--glow-soft),0 20px 50px rgba(0,0,0,.4);
  background:radial-gradient(circle at 50% 38%, var(--glow), transparent 72%), var(--plate);
  overflow:hidden;cursor:zoom-in;
}
:root[data-theme="light"] .face{box-shadow:0 0 0 5px var(--glow-soft),0 16px 36px rgba(90,70,40,.25)}
.face img{display:block;width:100%;height:100%;object-fit:cover}
.face:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.face + .head{margin-top:14px}

@media (max-width:820px){
  :root[dir="ltr"] .lead.first::first-letter{font-size:2.6em}
  .roster{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:no-preference){
  .head,.roster,.plate,.face{animation:rise .8s ease-out both}
  .roster{animation-delay:.06s}
  @keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}

/* ---- the face, larger ----
   A click on a face opens it at half the screen. Half, not full: these are busts on
   transparency, and blown up to fill a monitor they stop reading as a painting and start
   reading as a cut out. zoom.js builds this. */
.zoom{
  position:fixed;inset:0;z-index:60;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  background:rgba(6,5,4,.93);cursor:zoom-out;
}
.zoom[hidden]{display:none}
:root[data-theme="light"] .zoom{background:rgba(20,17,14,.82)}

.zoom-ring{
  width:50vmin;height:50vmin;min-width:240px;min-height:240px;border-radius:50%;
  border:1px solid var(--gold);
  box-shadow:0 0 0 6px rgba(200,145,47,.10), 0 30px 80px rgba(0,0,0,.6);
  background:radial-gradient(circle at 50% 38%, var(--glow), transparent 72%), var(--plate);
  overflow:hidden;
}
.zoom-ring img{display:block;width:100%;height:100%;object-fit:cover}

.zoom-cap{margin:0;font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:#cbc3b6}
:root[dir="rtl"] .zoom-cap{letter-spacing:0;text-transform:none;font-size:17px}

@media (prefers-reduced-motion:no-preference){
  .zoom-ring{animation:zoomin .22s ease-out both}
  @keyframes zoomin{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
}

/* ---- a project's own page: the head ---- */

.title{text-align:center;margin-bottom:clamp(34px,5vw,56px)}
.title .k{font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent)}
:root[dir="rtl"] .title .k{letter-spacing:0;font-size:16px;text-transform:none}
/* the game's own mark carries the name; the heading is the picture */
.title h1{margin:14px 0 0;font-weight:400;font-size:clamp(34px,6vw,58px);line-height:1.15;color:var(--ink)}
:root[dir="rtl"] .title h1{line-height:1.5}
.title h1 img{display:block;width:100%;max-width:640px;height:auto;margin:0 auto}
.title .sub{margin:14px 0 0;color:var(--dim);font-size:15px;font-style:italic}
:root[dir="rtl"] .title .sub{font-style:normal;font-size:16px}

.shamsa.small{width:44px;height:44px;opacity:.6}
.shamsa.large{margin:clamp(30px,5vw,48px) auto;width:64px;height:64px;opacity:.85}

/* a heading inside a page */
h2.subheading{
  margin:0 0 6px;text-align:center;font-weight:400;
  font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);
}
:root[dir="rtl"] h2.subheading{letter-spacing:0;text-transform:none;font-size:17px}

/* ---- the road: every chapter a seal ----
   A seal, not a chapter heading: the number, a line that says what the stage feels like, and
   nothing that spends the surprise. What is behind it is the game's to give, in order. */
.road{
  margin:clamp(26px,4vw,40px) 0 0;padding:0;list-style:none;
  display:grid;gap:clamp(14px,2vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
}
.seal{
  position:relative;display:flex;gap:16px;align-items:flex-start;
  padding:20px;border:1px solid var(--line);border-radius:2px;
  background:linear-gradient(180deg,var(--glow-soft),transparent 60%);
  transition:border-color .25s ease,transform .25s ease;
}
.seal:hover{border-color:var(--accent)}
@media (prefers-reduced-motion:no-preference){
  .seal:hover{transform:translateY(-2px)}
}
/* the numeral, set in a ring, the way a khan is numbered in a manuscript */
.seal .num{
  flex:0 0 auto;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--gold);
  display:flex;align-items:center;justify-content:center;
  color:var(--gold);font-size:15px;letter-spacing:.06em;
  box-shadow:0 0 0 4px var(--glow-soft);
}
.seal .body{min-width:0}
.seal .kh{font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--dim)}
:root[dir="rtl"] .seal .kh{letter-spacing:0;text-transform:none;font-size:15px}
.seal .line{margin:6px 0 0;color:var(--ink);font-size:17px;line-height:1.55}
:root[dir="rtl"] .seal .line{line-height:1.9}
/* built, or still on the road: the only status the seal gives away */
.seal .state{
  display:inline-block;margin-top:12px;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);
}
:root[dir="rtl"] .seal .state{letter-spacing:0;text-transform:none;font-size:13px}
.seal[data-state="built"] .state{color:var(--accent)}

/* ---- the source's own names, opt in ----
   Not the game's secret to keep, but still a thing a first time reader may not want handed to
   them. Shut until asked, and it says whose names they are. */
.reveal{margin:clamp(30px,4vw,44px) auto 0;max-width:62ch;text-align:center}
.reveal button{
  appearance:none;border:1px solid var(--line);background:transparent;color:var(--dim);
  font:inherit;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  padding:10px 18px;border-radius:2px;cursor:pointer;
  transition:color .2s,border-color .2s;
}
:root[dir="rtl"] .reveal button{letter-spacing:0;text-transform:none;font-size:15px}
.reveal button:hover,.reveal button:focus-visible{color:var(--accent);border-color:var(--accent)}
.reveal .note{display:block;margin-top:10px;font-size:13px;color:var(--dim)}
.poem{margin-top:22px;text-align:start;display:none}
.poem.on{display:block}
.poem ol{margin:0;padding-inline-start:1.4em;color:var(--dim);font-size:17px}
.poem li{margin:.35em 0}
.poem .told{color:var(--ink)}
.poem .after{margin:1.2em 0 0;font-size:15px;color:var(--dim);font-style:italic}
:root[dir="rtl"] .poem .after{font-style:normal;font-size:16px}
@media (prefers-reduced-motion:no-preference){
  .poem.on{animation:rise .5s ease-out both}
}

/* ---- a promise to the reader ---- */
.promise{
  margin:clamp(40px,5vw,64px) auto 0;max-width:56ch;
  padding:22px 26px;border:1px solid var(--line);border-radius:2px;
  text-align:center;color:var(--dim);font-size:16px;
}
.promise em{color:var(--ink);font-style:normal}

@media (max-width:820px){
  .road{grid-template-columns:1fr}
}

/* ---- paintings: the ornament in each corner, a pair, one across the page ---- */

.frame[data-full]{cursor:zoom-in}
.frame[data-full]:focus-visible{outline:2px solid var(--accent);outline-offset:6px}

.corner{position:absolute;width:26px;height:26px;color:var(--gold);opacity:.9;pointer-events:none}
.corner.tl{top:-24px;left:-24px}
.corner.tr{top:-24px;right:-24px;transform:scaleX(-1)}
.corner.bl{bottom:-24px;left:-24px;transform:scaleY(-1)}
.corner.br{bottom:-24px;right:-24px;transform:scale(-1)}

.pair{
  margin-top:clamp(46px,6vw,78px);
  display:grid;gap:clamp(26px,4vw,44px);
  grid-template-columns:1fr 1fr;
  align-items:start;
}
.wide-card{margin:clamp(46px,6vw,78px) auto 0;max-width:760px}

/* the name under a painting: the one you are reading big and gold, the other script small */
.name{margin-top:18px;text-align:center;display:flex;flex-direction:column;align-items:center}
.name .big{font-size:26px;line-height:1.3;color:var(--accent);border-bottom:0}
:root[dir="rtl"] .name .big{font-size:30px}
.name .small{font-size:17px;color:var(--dim)}
.name .small[dir="ltr"]{font-size:13px;letter-spacing:.16em;text-transform:uppercase}
.name .say{margin:10px auto 0;font-size:15px;color:var(--dim);max-width:36ch;font-style:italic}
:root[dir="rtl"] .name .say{font-style:normal;font-size:16px;max-width:34ch}

.credit{
  margin:clamp(44px,6vw,72px) 0 0;text-align:center;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
}
:root[dir="rtl"] .credit{letter-spacing:0;text-transform:none;font-size:16px}
.credit em{font-style:normal;color:var(--accent);text-transform:none;letter-spacing:0}

.ask .under{display:block;margin-top:6px;font-size:13px;color:var(--dim)}
:root[dir="rtl"] .ask .under{font-size:14px}

/* ---- a painting on its own, full size ---- */

.lightbox{
  position:fixed;inset:0;z-index:50;
  display:none;align-items:center;justify-content:center;
  padding:clamp(16px,4vw,48px);
  background:rgba(6,5,4,.93);
  cursor:zoom-out;
}
.lightbox.on{display:flex}
.lightbox img{
  max-width:100%;max-height:100%;height:auto;width:auto;
  box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 0 0 4px var(--gold), 0 30px 80px rgba(0,0,0,.6);
}
.lightbox .close{
  position:absolute;top:18px;right:22px;
  font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:#cbc3b6;
}
:root[dir="rtl"] .lightbox .close{right:auto;left:22px;letter-spacing:0;font-size:15px}

@media (max-width:820px){
  .pair{grid-template-columns:1fr}
  .card img{max-width:300px;margin:0 auto}
  .corner{width:18px;height:18px}
  .corner.tl{top:-18px;left:-18px}
  .corner.tr{top:-18px;right:-18px}
  .corner.bl{bottom:-18px;left:-18px}
  .corner.br{bottom:-18px;right:-18px}
}

@media (prefers-reduced-motion:no-preference){
  .title,.pair,.wide-card{animation:rise .8s ease-out both}
  .pair{animation-delay:.06s}
}

/* ---- the shajare-nameh ----
   The father centred, his children in a row under him. The lines are NOT drawn here: a chart of
   borders can only hang every child off one bus, and this tree has to say which children are the
   wife's. They are measured and drawn as SVG by tree.js over this layout. Everything below is
   spacing, so the boxes still sit in their generations if that script never runs. */

main.wide{max-width:1240px}
.house{margin-top:clamp(34px,4.5vw,56px)}

/* a wide house scrolls inside its own box rather than pushing the page sideways */
.treewrap{margin-top:22px;overflow-x:auto;padding-bottom:6px}
.treebody{position:relative;min-width:max-content;padding:0 10px}

.wires{position:absolute;inset:0;pointer-events:none;overflow:visible}
.wire{fill:none;stroke:var(--line);stroke-width:1;shape-rendering:crispEdges}

.tree,.tree ul{list-style:none;margin:0;padding:0}
.tree{display:flex;justify-content:center}
.tree ul{display:flex;justify-content:center;padding-top:34px}
/* A block li with a centred inline cell, not a flex column: a flex column sizes its children to
   their own content and the row below ends up a few pixels off its parent. */
.tree li{position:relative;padding:34px 10px 0;text-align:center}
.tree > li{padding-top:0}

/* a couple stands as one cell, so a child of the marriage can hang from between them */
.cell{display:inline-flex;align-items:center;justify-content:center}

/* the marriage: hatched, gold, and short */
.tie{flex:0 0 auto;width:30px;height:0;border-top:1px dashed var(--gold);opacity:.75}

.node{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  width:160px;padding:12px 10px;
  border:1px solid var(--line);border-radius:2px;
  text-decoration:none;color:inherit;text-align:center;
  background:linear-gradient(180deg,var(--glow-soft),transparent 65%),var(--bg);
  transition:border-color .2s ease;
}
a.node:hover,a.node:focus-visible{border-color:var(--accent)}
.node.off{background:var(--bg);border-style:dashed;opacity:.8}
.node.mate{border-color:rgba(200,145,47,.35)}

.node .mug{width:54px;height:54px}
.node .who{display:flex;flex-direction:column;align-items:center;min-width:0;width:100%}
.node .big{font-size:16px;line-height:1.3;color:var(--accent)}
:root[dir="rtl"] .node .big{font-size:17px}
.node .small{font-size:13px;color:var(--dim);line-height:1.5}
.node .small[dir="ltr"]{font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.node .rel{font-size:12px;color:var(--dim);line-height:1.45;margin-top:3px}
:root[dir="rtl"] .node .rel{font-size:13px}
.node.off .big,.node.off .small{color:var(--dim)}

@media (max-width:820px){
  .node{width:132px;padding:10px 8px}
  .node .mug{width:44px;height:44px}
  .node .big{font-size:15px}
  .node .rel{font-size:11px}
  .tie{width:20px}
  .tree li{padding:26px 6px 0}
  .tree ul{padding-top:26px}
}

/* ---- the project's name in the studio's bar ---- */
.bar .project{color:var(--accent)}
.bar .project i{font-style:normal;color:var(--dim)}