/* Skillbooks
   The site is English and left to right throughout. Books may be written in any
   language, but that stays inside the book itself; the catalogue never renders
   another script. The design is editorial rather than promotional: hairline
   rules and typographic hierarchy instead of cards, shadows and badges.
   Colour tokens come from the book editions, so site and books share a palette.

   The Nastaliq webfont lives at assets/fonts/nastaliq.woff2 and is declared by
   the book editions that need it, not here. */

:root{
  --paper:#fffefa; --ink:#1e332d; --body:#2f423c; --muted:#6b7670;
  --line:#dde2d8; --hair:#eaeee4; --accent:#8d5f42; --accent2:#3f6b5c;
  --ground:#eceee6; --soft:#f6f3ea;
  --latin:Georgia,"Liberation Serif","Times New Roman",serif;
  --ui:ui-sans-serif,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --gut:clamp(20px, 4vw, 60px);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#14181a; --ink:#e9efe9; --body:#bfcbc4; --muted:#8a958e;
  --line:#2b3336; --hair:#222a2c; --accent:#cb9c73; --accent2:#7fbda7;
  --ground:#0e1113; --soft:#1a2022;
}}
:root[data-theme="dark"]{
  --paper:#14181a; --ink:#e9efe9; --body:#bfcbc4; --muted:#8a958e;
  --line:#2b3336; --hair:#222a2c; --accent:#cb9c73; --accent2:#7fbda7;
  --ground:#0e1113; --soft:#1a2022;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip}
body{
  margin:0; background:var(--ground); color:var(--body);
  direction:ltr; font-family:var(--latin); font-size:17px; line-height:1.6;
}
a{color:inherit}
img{max-width:100%}


.wrap{width:100%; margin:0; padding:0 var(--gut)}

/* Small letterspaced label, used for every piece of metadata on the site. */
.label{font-family:var(--ui); font-size:10.5px; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted); line-height:1.6; margin:0}
.label.hi{color:var(--accent)}

/* ---------- masthead ---------- */
.masthead{position:sticky; top:0; z-index:40; background:var(--ground);
  border-bottom:1px solid var(--line)}
.masthead .in{width:100%; margin:0; padding:13px var(--gut);
  display:flex; align-items:center; gap:18px}
.wordmark{font-family:var(--ui); font-size:15px; font-weight:700; letter-spacing:-.01em;
  color:var(--ink); text-decoration:none}
.masthead nav{margin-left:auto; display:flex; align-items:center; gap:22px}
.masthead nav a{font-family:var(--ui); font-size:12px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); text-decoration:none}
.masthead nav a:hover{color:var(--ink)}
.tbtn{font-family:var(--ui); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); background:none; border:0; padding:0; cursor:pointer}
.tbtn:hover{color:var(--ink)}

/* ---------- sheet ---------- */
.sheet{background:var(--paper); width:100%; margin:0;
  min-height:100vh; padding-bottom:0}

/* ---------- opening statement ---------- */
.lede{padding:86px 0 64px; border-bottom:1px solid var(--line)}
.lede h1{font-size:47px; line-height:1.1; letter-spacing:-.022em; color:var(--ink);
  margin:20px 0 0; max-width:17ch; font-weight:400}
.lede .deck{font-size:20px; line-height:1.52; color:var(--body); margin:24px 0 0; max-width:50ch}
.lede .terms{font-family:var(--ui); font-size:12.5px; letter-spacing:.02em;
  color:var(--muted); margin:30px 0 0}
.lede .terms b{color:var(--accent2); font-weight:600}

/* ---------- section heads ---------- */
.sec{padding:46px 0 0}
.sec-head{display:flex; align-items:baseline; gap:16px; padding-bottom:18px}
.sec-head h2{font-size:15px; font-family:var(--ui); font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink); margin:0}
.sec-head .note{font-family:var(--ui); font-size:11.5px; color:var(--muted);
  margin-left:auto; letter-spacing:.02em}

/* ---------- library index ----------
   The front page is the library, not a pitch. Every artefact is one click from
   here, so rows are dense and each format is its own link rather than a page
   you have to go through. */

.toolbar{display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:20px 0 16px; border-bottom:1px solid var(--line)}
.search{flex:1 1 280px; position:relative; display:flex; align-items:center}
.search input{
  width:100%; font-family:var(--ui); font-size:14px; color:var(--ink);
  background:var(--soft); border:1px solid var(--line); border-radius:0;
  padding:9px 12px 9px 34px; line-height:1.4}
.search input::placeholder{color:var(--muted)}
.search input:focus{outline:2px solid var(--accent); outline-offset:-1px}
.search svg{position:absolute; left:11px; width:14px; height:14px;
  stroke:var(--muted); fill:none; stroke-width:2; pointer-events:none}
.search kbd{position:absolute; right:10px; font-family:var(--ui); font-size:10px;
  color:var(--muted); border:1px solid var(--line); padding:1px 5px; line-height:1.5}
.search input:not(:placeholder-shown) ~ kbd{display:none}
.tally{font-family:var(--ui); font-size:11px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap}

.group{padding-top:30px}
.group-head{display:flex; align-items:baseline; gap:12px; padding-bottom:10px}
.group-head h2{font-family:var(--ui); font-size:11px; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; color:var(--ink); margin:0}
.group-head .n{font-family:var(--ui); font-size:11px; color:var(--muted); margin-left:auto}

.lib{border-top:1px solid var(--line)}
.item{display:grid; grid-template-columns:76px minmax(0,1fr) minmax(290px,32%);
  gap:0 28px; padding:22px 0 20px; border-bottom:1px solid var(--line)}
.item.hide{display:none}
.cover{display:block; width:76px; line-height:0; margin-top:4px}
.cover img{width:100%; height:auto; border:1px solid var(--line)}
.cover:hover img{border-color:var(--accent)}
.bookcover{float:right; width:190px; margin:0 0 24px 40px; border:1px solid var(--line)}
.item h3{font-size:clamp(19px,1.5vw,24px); line-height:1.25; letter-spacing:-.012em; margin:0; font-weight:400}
.item h3 a{color:var(--ink); text-decoration:none}
.item h3 a:hover{color:var(--accent); text-decoration:underline; text-underline-offset:3px}
.item .meta{font-family:var(--ui); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); margin:6px 0 0; line-height:1.7}
.item .blurb{font-size:15.5px; line-height:1.5; color:var(--body);
  margin:8px 0 0; max-width:62ch}

/* format rows: a label, then the artefacts themselves as links */
.fmts{margin:2px 0 0; display:grid; grid-template-columns:48px 1fr;
  gap:5px 14px; align-content:start}
.fmts dt{font-family:var(--ui); font-size:9.5px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent); padding-top:4px; line-height:1.8}
.fmts dd{margin:0; display:flex; flex-wrap:wrap; gap:5px 8px; align-items:baseline}
.fmts a{font-family:var(--ui); font-size:12px; color:var(--body); text-decoration:none;
  border-bottom:1px solid var(--line); line-height:1.9; white-space:nowrap}
.fmts a:hover{color:var(--accent); border-bottom-color:var(--accent)}
.fmts a .sz{color:var(--muted); font-size:10.5px}
.fmts .sep{color:var(--line); font-size:11px}

.empty{font-family:var(--ui); font-size:13px; color:var(--muted);
  padding:26px 0; border-bottom:1px solid var(--line)}

:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* ---------- book title block ---------- */
.titleblock{padding:66px 0 54px; border-bottom:1px solid var(--line)}
.titleblock h1{font-size:clamp(30px,3.4vw,52px); line-height:1.14; letter-spacing:-.02em; color:var(--ink);
  margin:6px 0 0; font-weight:400; max-width:20ch}
.titleblock .deck{font-size:19.5px; line-height:1.5; color:var(--body); margin:22px 0 0; max-width:52ch}

/* Specification table, the colophon of the book page. */
.spec{margin:34px 0 0; border-top:1px solid var(--line); max-width:640px}
.spec dl{display:grid; grid-template-columns:118px 1fr; margin:0}
.spec dt{font-family:var(--ui); font-size:10.5px; font-weight:600; letter-spacing:.13em;
  text-transform:uppercase; color:var(--muted); padding:11px 0 10px;
  border-bottom:1px solid var(--hair)}
.spec dd{font-size:16px; line-height:1.5; color:var(--body); margin:0;
  padding:9px 0 10px; border-bottom:1px solid var(--hair)}
.spec dd b{color:var(--accent2); font-weight:600}

/* ---------- editions ---------- */
.editions{border-top:1px solid var(--line)}
.edition{display:grid; grid-template-columns:1fr 208px; gap:0 26px;
  padding:26px 0 24px; border-bottom:1px solid var(--line);
  text-decoration:none; color:inherit}
.edition:hover{background:var(--soft)}
.edition:hover h3{color:var(--accent)}
.edition h3{font-size:22px; line-height:1.25; letter-spacing:-.012em; color:var(--ink);
  margin:5px 0 0; font-weight:400}
.edition p{font-size:16px; line-height:1.55; color:var(--body); margin:9px 0 0; max-width:58ch}
.edition .meta{font-family:var(--ui); font-size:11px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted); line-height:1.9; padding-top:22px}

/* ---------- contents ---------- */
.toc{border-top:1px solid var(--line)}
.toc .row{display:grid; grid-template-columns:46px 1fr auto; gap:0 26px;
  align-items:baseline; border-bottom:1px solid var(--hair);
  padding:11px 0 10px; text-decoration:none; color:inherit}
.toc a.row:hover{background:var(--soft)}
.toc a.row:hover .t{color:var(--accent)}
.toc .n{font-family:var(--ui); font-size:11px; letter-spacing:.1em; color:var(--accent)}
.toc .t{font-size:17.5px; line-height:1.45; color:var(--ink)}
.toc .d{font-family:var(--latin); font-size:13.5px; color:var(--muted);
  text-align:right; line-height:1.5}

code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.92em; color:var(--ink); background:var(--soft);
  border:1px solid var(--hair); padding:1px 5px}

/* ---------- prose ---------- */
.prose{max-width:68ch; padding-top:4px}
.prose p{font-size:17px; line-height:1.66; margin:0 0 15px}
.prose p:last-child{margin-bottom:0}
.prose b{color:var(--ink); font-weight:700}

/* ---------- breadcrumb ---------- */
.crumb{font-family:var(--ui); font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); padding:20px 0 0; margin:0}
.crumb a{color:var(--accent); text-decoration:none}
.crumb a:hover{text-decoration:underline}

/* ---------- colophon ---------- */
.colophon{border-top:1px solid var(--line); margin-top:64px; padding:24px 0 40px;
  display:flex; flex-wrap:wrap; gap:10px 30px; align-items:baseline}
.colophon p{font-family:var(--ui); font-size:11px; letter-spacing:.05em;
  color:var(--muted); margin:0; line-height:1.9}
.colophon a{color:var(--accent); text-decoration:none}
.colophon a:hover{text-decoration:underline}
.colophon .sp{margin-left:auto}

@media (max-width:1100px){
  .item{grid-template-columns:76px minmax(0,1fr); gap:0 22px}
  .fmts{grid-column:2; margin-top:13px}
}

@media (max-width:820px){
  body{font-size:16.5px}
  .wrap{padding:0 20px}
  .masthead .in{padding:12px 20px; gap:14px}
  .masthead nav{gap:16px}
  .lede{padding:52px 0 40px}
  .lede h1{font-size:33px}
  .lede .deck{font-size:18px}
  .toolbar{padding:16px 0 12px}
  .search kbd{display:none}
  .item{grid-template-columns:54px minmax(0,1fr); gap:0 14px}
  .cover{width:54px}
  .fmts{grid-column:2}
  .bookcover{width:120px; margin:0 0 16px 20px}
  .item h3{font-size:19px}
  .item .blurb{font-size:15px}
  .fmts{grid-template-columns:1fr; gap:2px 0; margin-top:10px}
  .fmts dt{padding-top:9px}
  .titleblock{padding:40px 0 36px}
  .titleblock h1{font-size:29px}
  .titleblock .deck{font-size:18px}
  .spec dl{grid-template-columns:96px 1fr}
  .edition{grid-template-columns:1fr}
  .edition .meta{padding-top:11px}
  .toc .row{grid-template-columns:30px 1fr; gap:0 14px}
  .toc .d{grid-column:2; text-align:left; margin-top:-2px; font-size:12.5px}
}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}