/* The people pages: guilds, families, coming back, the character builder.
   Loaded only by those templates, after site.css; it uses site.css's tokens and adds none
   of its own to :root. */

/* ── Shared ─────────────────────────────────────────────────────────── */
.people h2{font-size:clamp(30px,3.4vw,44px);margin-bottom:.45em}
.n{font-variant-numeric:lining-nums tabular-nums;color:var(--dim);font-size:var(--t-small)}
.more.block{margin-top:clamp(48px,7vw,96px)}

/* ── Guild index ────────────────────────────────────────────────────── */
.g-section > h2{font-size:clamp(30px,3.4vw,44px);margin-bottom:.3em}
.g-list{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);column-gap:var(--gutter)}
.g-item{padding:22px 0 20px;border-top:1px solid var(--rule)}
.g-item h3{font:italic 400 clamp(26px,2.4vw,32px)/1.15 var(--world);margin-bottom:.25em}
.g-item h3 a{color:var(--text);text-decoration:none}
.g-item h3 a:hover{text-decoration:underline;text-decoration-thickness:1px}
.g-motto{font:400 clamp(19px,1.5vw,21px)/1.45 var(--world);margin:0 0 .35em;max-width:32em;overflow-wrap:anywhere}
.g-facts{font-size:var(--t-small);line-height:1.5;color:var(--dim);margin:0;max-width:34em}
.g-rel{margin:.4em 0 0}
.g-quiet .g-item h3 a,.g-quiet .g-motto{color:#CFC4AC}
@media (min-width:861px){
  .g-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ── One guild ──────────────────────────────────────────────────────── */
.g-body{row-gap:56px;align-items:start}
.g-body h2{font-size:clamp(30px,3.4vw,44px);margin-bottom:.4em}
.g-side h2{font-size:clamp(26px,2.4vw,32px)}
.g-main > * + *,.g-side > section + section{margin-top:clamp(40px,5vw,64px)}
.g-year{font:400 clamp(34px,3.4vw,44px)/1 var(--world);font-variant-numeric:lining-nums;margin:0}
.g-about p{font:400 var(--t-tale)/1.6 var(--world);max-width:32em}
.g-roll h3{font:italic 400 24px/1.2 var(--world);margin:1.6em 0 .5em}
.g-roll h3 .n{font-style:normal;font-family:var(--plain);margin-left:.35em}
.g-members{list-style:none;margin:0;padding:0;columns:1}
.g-members li{break-inside:avoid;padding:7px 0 8px;border-top:1px solid var(--rule)}
.g-who{font-size:20px}
.g-house{font-size:var(--t-small);color:var(--dim)}
.g-line{display:block;font-size:var(--t-small);line-height:1.45;color:var(--dim)}
.g-rank{font:14px/1.5 var(--mono);color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere}
.g-ranks{margin:14px 0 0;padding:14px 18px;list-style:none;background:var(--pitch);border:1px solid var(--rule);font:14px/1.5 var(--mono);color:var(--dim)}
.g-ranks li{padding:5px 0;display:flex;justify-content:space-between;gap:14px;align-items:baseline}
.g-ranks li::marker{color:#8F8470}
.g-ranks .n{font:13px/1 var(--mono)}
.g-quote{margin:6px 0 14px;padding:0}
.g-art{margin:6px 0 14px;font:12.5px/1.45 var(--mono);color:var(--text);white-space:pre;overflow-x:auto;max-width:100%}
.g-quote p{font:italic 400 19px/1.45 var(--world);margin:0 0 .4em;max-width:30em}
.g-side .rec{margin-top:6px}
.g-days{list-style:none;margin:20px 0 0;padding:0;max-width:44em}
.g-days > li{padding:14px 0 12px;border-top:1px solid var(--rule)}
.g-days h3{font:600 var(--t-small)/1.4 var(--plain);color:var(--dim);margin:0 0 6px}
.g-days ul{list-style:none;margin:0;padding:0}
.g-days li li{padding:3px 0;font-size:19px;line-height:1.45;overflow-wrap:anywhere}
.g-days .g-exp{color:var(--dim);font-size:var(--t-small)}
@media (min-width:861px){
  .g-main{grid-column:1/span 7}
  .g-side{grid-column:9/span 4}
  .g-members{columns:2;column-gap:var(--gutter)}
}

/* ── Family index ───────────────────────────────────────────────────── */
.f-body{row-gap:64px;align-items:start}
/* headings on the site's two scales: a section (as .block > h2) and an aside (as .t-aside h2) */
.f-body h2{font-size:clamp(30px,3.4vw,44px);margin-bottom:.4em}
.f-search{margin:6px 0 20px;max-width:420px}
.js .f-search.js-only{display:block}
.f-search label{display:block;font-size:var(--t-small);color:var(--dim);margin-bottom:6px}
.f-search input{width:100%;background:var(--pitch);border:1px solid #5A4F6B;color:var(--text);font:400 20px/1.2 var(--plain);padding:10px 14px;caret-color:var(--gold);-webkit-appearance:none;appearance:none;border-radius:0}
.f-search output{display:block;min-height:1.5em;margin-top:8px;font-size:var(--t-small);color:var(--dim)}
.f-letters{display:flex;flex-wrap:wrap;gap:0 2px;margin:0 0 8px}
.f-letters a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;font:400 22px/1 var(--world);text-decoration:none}
.f-letter h3{font:400 30px/1 var(--canon);color:var(--dim);margin:26px 0 6px}
.f-list{list-style:none;margin:0;padding:0}
.f-list li{padding:10px 0 11px;border-top:1px solid var(--rule)}
.f-name{font:400 25px/1.25 var(--world);color:var(--text);text-decoration:none}
.f-name:hover{text-decoration:underline;text-decoration-thickness:1px}
.f-facts{display:block;font-size:var(--t-small);line-height:1.45;color:var(--dim);margin-top:2px}
.f-searching .f-letters{display:none}
.f-ties{list-style:none;margin:16px 0 0;padding:0}
.f-ties > li{padding:16px 0 14px;border-top:1px solid var(--rule)}
.f-tie-houses{font:400 24px/1.35 var(--world);margin:0 0 4px;max-width:none}
.f-tie + .f-tie{margin-top:14px}
.f-tie p.small{margin:2px 0 0}
.f-knot{display:inline-block;width:20px;height:11px;margin:0 4px;border:1px solid var(--gold);border-radius:50%;vertical-align:.18em;position:relative}
.f-knot::after{content:"";position:absolute;left:7px;top:-1px;width:20px;height:11px;border:1px solid var(--gold);border-radius:50%;box-sizing:border-box}
.f-knot{margin-right:14px}
@media (min-width:861px){
  .f-houses{grid-column:1/span 7}
  .f-joined{grid-column:9/span 4;position:sticky;top:24px}
}

/* ── The family tree ────────────────────────────────────────────────────
   Nested lists. Each child hangs from its parent by an elbow: gold when the child is of
   the house's blood, grey when adopted or married in. The vertical runs down the left
   of the children to the last one. Phones get a narrower indent so five generations
   still fit at 360 px. */
.tree-wrap{
  --tin:12px;          /* where the vertical sits, under the parent's name */
  --tarm:22px;         /* the elbow's reach to a child */
  --tmid:21px;         /* from a child's top to the middle of its name line */
  --tline:#5E546E; --tblood:#A8864A;
}
.tree,.t-kids{list-style:none;margin:0;padding:0}
.tree > .t-node + .t-node{margin-top:44px;padding-top:36px;border-top:1px solid var(--rule)}
.t-couple{display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px 36px}
.t-card,.t-partner{min-width:0;max-width:28em;scroll-margin-top:48px;padding:2px 0}
.t-name{margin:0;font:400 26px/1.25 var(--world);max-width:none;overflow-wrap:anywhere}
.t-first{color:var(--text)}
a.t-first,.t-first a{color:var(--gold)}
.t-surname{font-family:var(--sc);font-size:.72em;letter-spacing:.04em;color:var(--dim)}
.t-elder{display:inline-block;font:400 15px/1 var(--sc);letter-spacing:.05em;color:var(--gold);white-space:nowrap;vertical-align:.25em;margin-left:4px}
.t-elder::before{content:"";display:inline-block;width:6px;height:6px;margin:0 5px .12em 0;background:var(--gold);transform:rotate(45deg)}
.t-meta{margin:2px 0 0;font-size:var(--t-small);line-height:1.5;color:var(--dim);max-width:30em}
.t-how{color:#CFC4AC}
.t-guild .cc-x,.t-guild .cc-z{color:#9A9A9A}
.t-guild{font-size:var(--t-small)}
.g-line [class^="cc-"]{font-family:var(--mono);font-size:14px}
.t-wed{font:400 15px/1 var(--sc);letter-spacing:.05em;color:var(--dim);margin-right:2px}
.t-ref{white-space:normal}
.t-house{font-family:var(--sc);font-size:.8em;letter-spacing:.03em}
a.t-ref{text-decoration-color:rgba(217,179,106,.45);padding-block:10px}
a.t-ref .t-house{color:inherit}
.t-none{font-size:.8em;color:var(--dim)}
.t-meta .t-ref,.t-else .t-ref{font-size:17px}
.t-former{margin:4px 0 0;font-size:var(--t-small);color:#8F8470}
.t-former .t-ref,.t-former a{color:#A99C82}
.t-partner .t-name{font-size:23px}
.t-kids{margin-top:16px;padding-left:var(--tin)}
.t-kids > li{position:relative;padding-left:var(--tarm)}
.t-kids > li + li{margin-top:22px}
.t-kids > li::before{content:"";position:absolute;left:0;top:0;width:calc(var(--tarm) - 7px);height:var(--tmid);
  border-left:1px solid var(--tline);border-bottom:1px solid var(--tline);border-bottom-left-radius:9px}
.t-kids > li::after{content:"";position:absolute;left:0;top:0;bottom:-22px;border-left:1px solid var(--tline)}
.t-kids > li:last-child::after{display:none}
.t-kids > li:first-child::before{top:-16px;height:calc(var(--tmid) + 16px)}
.t-kids > li:first-child::after{top:-16px}
.t-kids > li.t-blood::before{border-color:var(--tblood);border-width:0 0 2px 2px;left:-.5px}
/* A person someone followed a link to */
.t-card:target,.t-partner:target{background:rgba(217,179,106,.10);box-shadow:0 0 0 1px rgba(217,179,106,.55),0 0 0 8px rgba(217,179,106,.06);
  border-radius:2px;padding:6px 10px;margin:-6px -10px}
.t-others-h{font-size:clamp(28px,2.8vw,38px);margin:64px 0 .2em}
.t-others{margin-top:18px;display:grid;grid-template-columns:repeat(auto-fill,minmax(15em,1fr));gap:18px var(--gutter)}
.t-others > .t-node + .t-node{margin:0;padding:0;border:0}
.t-others .t-name{font-size:23px}
.tree-lone .tree > .t-node .t-card .t-name{font-size:clamp(34px,4vw,46px)}
.tree-lone .t-partner .t-name{font-size:clamp(26px,2.8vw,32px)}
.t-lone{margin-top:28px;max-width:32em}
.t-layout{row-gap:64px;align-items:start}
.t-aside > section + section{margin-top:44px}
.t-aside h2{font-size:clamp(26px,2.4vw,32px);margin-bottom:.4em}
.t-legend p{max-width:34em}
.t-legend .t-elder{vertical-align:0;margin:0}
.t-ties a{font:400 22px/1.3 var(--world)}
@media (min-width:861px){
  .tree-wrap{--tin:16px;--tarm:30px;grid-column:1/span 8}
  .t-aside{grid-column:9/span 4;position:sticky;top:24px}
  .tree-lone + .t-aside{grid-column:9/span 4}
}
@media (max-width:480px){
  .tree-wrap{--tin:6px;--tarm:16px;--tmid:19px}
  .t-name{font-size:23px}
  .t-partner .t-name{font-size:21px}
  .t-kids > li + li{margin-top:18px}
  .t-kids > li::after{bottom:-18px}
  .t-couple{gap:4px 0}
  .t-couple .t-partner{padding-left:14px}
}
@media (prefers-reduced-motion:no-preference){
  .t-card:target,.t-partner:target{animation:t-found 2.4s ease-out}
}
@keyframes t-found{from{background:rgba(217,179,106,.32)}to{background:rgba(217,179,106,.10)}}

/* ── Coming back ────────────────────────────────────────────────────── */
.b-lookup .lookup{margin-top:10px}
.b-cases{display:grid;grid-template-columns:minmax(0,1fr);gap:40px var(--gutter);margin-top:28px}
.b-cases h3{margin-bottom:.45em}
.b-cases p{max-width:32em}
.b-cases > section{border-top:1px solid var(--rule);padding-top:20px}
.b-era{margin-top:44px;max-width:44em}
.b-era h3{margin-bottom:.4em}
.b-ways{margin:0;padding-left:1.2em;max-width:36em}
.b-ways li{padding:5px 0}
.b-around{row-gap:40px;margin-top:20px;align-items:start}
@media (min-width:861px){
  .b-cases{grid-template-columns:repeat(3,minmax(0,1fr))}
  .b-around .b-guilds{grid-column:1/span 5}
  .b-around .life{grid-column:7/span 6}
}

/* ── The character builder ──────────────────────────────────────────── */
.c-layout{row-gap:56px;align-items:start}
.c-form{min-width:0}
.step{border:0;margin:0;padding:0;min-width:0}
.step + .step{margin-top:clamp(48px,6vw,72px)}
.step legend{padding:0;margin:0 0 .2em;float:left;width:100%}
.step legend + *{clear:both}
.step h2{font-size:clamp(30px,3.4vw,44px);margin:0}
.step-n{font:400 .62em/1 var(--world);color:var(--gold);vertical-align:.2em;margin-right:.25em}
.step-adv{font:400 15px/1 var(--sc);letter-spacing:.05em;color:var(--dim);vertical-align:.5em;white-space:nowrap}
.step > .small{margin:.4em 0 16px}
.step-bare legend{margin-bottom:16px}     /* a question with no line under its heading */
.opt-group h3{font:italic 400 24px/1.2 var(--world);color:var(--dim);margin:22px 0 10px}
.opts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.opt{position:relative;display:flex;flex-direction:column;border:1px solid var(--rule);background:rgba(8,7,11,.35)}
.opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.opt label{display:block;cursor:pointer;padding:12px 14px 12px 46px;min-height:56px;position:relative}
.opt label::before{content:"";position:absolute;left:15px;top:17px;width:16px;height:16px;border:1px solid var(--dim);border-radius:50%}
.opt input:checked + label::before{border-color:var(--gold);box-shadow:inset 0 0 0 4px var(--ink),inset 0 0 0 9px var(--gold)}
.opt input:focus-visible + label{outline:2px solid var(--gold);outline-offset:2px}
.opt.on,.opt:has(input:checked){border-color:rgba(217,179,106,.7);background:rgba(217,179,106,.07)}
.opt label:hover .o-name{color:#F3E3BC}
.o-name{display:block;font:400 23px/1.25 var(--world);color:var(--text)}
.o-short{display:block;font-size:var(--t-small);line-height:1.45;color:var(--dim);margin-top:2px;overflow-wrap:anywhere}
.o-bonus{margin:0;padding:0 14px 6px 46px;list-style:none;font-size:15px;line-height:1.45;color:#CFC4AC}
.o-bonus li{position:relative;padding:1px 0 1px 13px;overflow-wrap:anywhere}
.o-bonus li::before{content:"";position:absolute;left:0;top:.8em;width:5px;height:1px;background:var(--dim)}
.o-more{padding:0 14px 10px 46px}
.o-more summary{cursor:pointer;color:var(--gold);font-size:15px;padding:8px 0;min-height:44px;display:flex;align-items:center;list-style:none}
.o-more summary::-webkit-details-marker{display:none}
.o-more summary::after{content:"";width:6px;height:6px;margin-left:8px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.o-more[open] summary::after{transform:rotate(225deg) translateY(-1px)}
.o-more p{font:400 18px/1.55 var(--world);margin:4px 0 10px;max-width:34em}
/* A card's figures, at its foot (pushed down, so the cards side by side have them on one line):
   the ability changes, a column each in the game's order, the same columns on every card of a
   question; then how many played it. The sign says bonus or penalty, the colour only helps. */
.o-more:has(+ .o-figs){padding-bottom:0}
.o-bonus:has(+ .o-figs){padding-bottom:12px}
.o-figs{margin:auto 14px 0 46px;padding:6px 0 9px;border-top:1px solid var(--rule)}
.o-abil{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,2.5em);justify-content:start;margin:0 0 3px;
  font-variant-numeric:lining-nums tabular-nums}
.o-abil div{text-align:center}
.o-abil dt{font:400 14px/1.15 var(--sc);letter-spacing:.04em;color:var(--dim)}
.o-abil abbr{text-decoration:none;cursor:help}
.o-abil dd{margin:0;font:400 16px/1.25 var(--plain);color:var(--text)}
.o-abil .o-nil{color:#6E6556;overflow:hidden}
.o-count{margin:0;font-size:15px;line-height:1.3;color:var(--dim);font-variant-numeric:lining-nums tabular-nums}
.c-summary{background:var(--pitch);border:1px solid var(--rule);padding:22px 22px 18px}
.c-summary h2{font-size:clamp(26px,2.4vw,32px);margin-bottom:.35em}
.c-summary h3{font:italic 400 22px/1.2 var(--world);margin:0 0 .4em}
.c-what{font:400 26px/1.25 var(--world);margin:0 0 10px}
.c-picks{list-style:none;margin:0 0 18px;padding:0}
.c-picks li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-top:1px solid var(--rule);font-size:17px}
.c-picks span{color:var(--dim);font-size:15px}
.c-picks b{font-weight:400;text-align:right}
.c-play{margin:0 0 18px}
.c-play .btn{width:100%;text-align:center}
.c-line{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0 14px}
.c-line code{flex:1 1 14em;min-width:0;font:13px/1.5 var(--mono);color:var(--text);background:var(--ink);border:1px solid var(--rule);padding:8px 10px;overflow-wrap:anywhere;user-select:all}
.c-reset{background:none;border:0;padding:10px 0;min-height:44px;color:var(--gold);font:400 var(--t-small)/1 var(--plain);text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
.c-bar{display:none}
.create-page .playbar{display:none!important}
@media (min-width:600px){
  .opts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:861px){
  .c-form{grid-column:1/span 8}
  .c-aside{grid-column:9/span 4;position:sticky;top:20px;max-height:calc(100vh - 40px);overflow:auto;scrollbar-width:thin}
}
@media (max-width:860px){
  .js .c-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:8;align-items:center;justify-content:space-between;gap:12px;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(8,7,11,.96);border-top:1px solid var(--rule);
    transform:translateY(110%);visibility:hidden}
  .js .c-bar.on{transform:none;visibility:visible}
  .c-bar-what{margin:0;font:400 19px/1.2 var(--world);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .c-bar .btn{flex:none;min-height:44px;display:inline-flex;align-items:center}
  .js .create-page,.js body.create-page{padding-bottom:72px}
}
@media (max-width:860px) and (prefers-reduced-motion:no-preference){
  .js .c-bar{transition:transform .2s ease-out,visibility 0s linear .2s}
  .js .c-bar.on{transition:transform .2s ease-out}
}