/* uvesnotes.com — public site
   Palette: Ajrakh indigo, Sidi Saiyyed sandstone, madder rubric on limewash.
   Type: Castoro Titling (inscription, used sparingly) · Newsreader (reading) · Mukta (labels) · Amiri (Arabic). */

:root {
  --paper: #f6f6f2;
  --paper-raised: #ffffff;
  --ink: #161b2b;
  --ink-soft: #394057;
  --muted: #5c6274;
  --rule: #d8dad2;
  --rule-strong: #b9bcb3;
  --field-border: #868b7c;
  --indigo: #16204a;
  --indigo-2: #222d61;
  --on-indigo: #eef0f7;
  --on-indigo-soft: #c3c8dc;
  --sand: #c9a463;
  --sand-deep: #785822;
  --sand-soft: #f0e6cf;
  --madder: #9c3324;
  --link: #22398f;
  --link-hover: #9c3324;
  --mark: #f3dfa8;
  --glow-core: #f7e3b4;
  --glow-mid: #c9a463;
  --focus: #a86f0e;
  --ok: #2d6a3f;

  --serif: "Newsreader Variable", "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --display: "Castoro Titling", "Newsreader Variable", Georgia, serif;
  --sans: "Mukta", "Segoe UI", system-ui, -apple-system, sans-serif;
  --arabic: "Amiri", "Noto Naskh Arabic", "Geeza Pro", "Traditional Arabic", serif;

  --measure: 66ch;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --radius: 6px;
  color-scheme: light;
}

/* dark: follows the device unless the reader picks light or dark (data-theme on <html>, set by theme.js) */
:root[data-theme="dark"] {
    --paper: #0f1428;
    --paper-raised: #161c35;
    --ink: #e9e7df;
    --ink-soft: #cfcdc5;
    --muted: #a3a7b6;
    --rule: #2a3154;
    --rule-strong: #3b4370;
    --field-border: #6c75a3;
    --indigo: #0a0f22;
    --indigo-2: #141b3b;
    --on-indigo: #eef0f7;
    --on-indigo-soft: #b9bed3;
    --sand: #d5b173;
    --sand-deep: #d5b173;
    --sand-soft: #2b2718;
    --madder: #e8866d;
    --link: #a8bcff;
    --link-hover: #f0b39f;
    --mark: #5a4a1c;
    --glow-core: #f3d9a0;
    --glow-mid: #b98d45;
    --focus: #e5b454;
    --ok: #8fd0a6;
    color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0f1428;
    --paper-raised: #161c35;
    --ink: #e9e7df;
    --ink-soft: #cfcdc5;
    --muted: #a3a7b6;
    --rule: #2a3154;
    --rule-strong: #3b4370;
    --field-border: #6c75a3;
    --indigo: #0a0f22;
    --indigo-2: #141b3b;
    --on-indigo: #eef0f7;
    --on-indigo-soft: #b9bed3;
    --sand: #d5b173;
    --sand-deep: #d5b173;
    --sand-soft: #2b2718;
    --madder: #e8866d;
    --link: #a8bcff;
    --link-hover: #f0b39f;
    --mark: #5a4a1c;
    --glow-core: #f3d9a0;
    --glow-mid: #b98d45;
    --focus: #e5b454;
    --ok: #8fd0a6;
    color-scheme: dark;
  }
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 5.5rem; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem);
  line-height: 1.6;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; }
a { color: var(--link); text-decoration-thickness: 0.06em; text-underline-offset: 0.18em; }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--mark); color: var(--ink); }
:lang(ar), :lang(ur) { font-family: var(--arabic); }
[lang="ar"], [lang="ur"] { font-size: 1.14em; line-height: 1.9; }
mark { background: var(--mark); color: inherit; padding: 0 0.1em; border-radius: 2px; }
code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.86em; background: color-mix(in srgb, var(--rule) 45%, transparent); padding: 0.1em 0.35em; border-radius: 4px; word-break: break-word; }
pre { overflow-x: auto; background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.9rem 1rem; }
pre code { background: none; padding: 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -3rem; z-index: 10; background: var(--sand); color: var(--indigo); padding: 0.5rem 0.9rem; font-family: var(--sans); font-weight: 600; border-radius: var(--radius); }
.skip:focus { top: 0.75rem; }
main:focus { outline: none; }

/* ------------------------------------------------------------------ header */
/* sticky header: translucent paper (or indigo on the home page), a hairline and soft shadow once scrolled */
.site-head { position: sticky; top: 0; z-index: 30; font-family: var(--sans); transition: box-shadow 0.2s, background-color 0.2s; }
.site-head--light { background: var(--paper); background: color-mix(in srgb, var(--paper) 88%, transparent); border-bottom: 1px solid var(--rule); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); }
.site-head--dark { background: var(--indigo); background: color-mix(in srgb, var(--indigo) 92%, transparent); color: var(--on-indigo); border-bottom: 1px solid rgb(255 255 255 / 0.08); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.site-head.is-scrolled { box-shadow: 0 1px 0 rgb(0 0 0 / 0.04), 0 8px 24px -12px rgb(0 0 0 / 0.35); }
.site-head__inner { max-width: 76rem; margin: 0 auto; padding: 0.6rem var(--gutter); min-height: 4rem; display: flex; align-items: center; gap: 0.5rem 1.25rem; }
.brand { display: inline-flex; align-items: center; gap: 0.65rem; text-decoration: none; color: inherit; margin-right: auto; min-width: 0; padding: 0.3rem 0; }
.brand__mark { width: 1.2rem; height: 1.65rem; color: var(--sand-deep); flex: none; transition: transform 0.25s; }
.brand:hover .brand__mark { transform: translateY(-1px); }
.site-head--dark .brand__mark { color: var(--sand); }
.brand__name { font-family: var(--display); font-size: 1.05rem; letter-spacing: 0.16em; text-transform: uppercase; white-space: normal; }
@media (max-width: 30rem) { .brand__name { letter-spacing: 0.08em; font-size: 0.95rem; } }
.nav__list, .menu ul { list-style: none; margin: 0; padding: 0; }
.nav__list { display: flex; align-items: center; gap: 0.15rem; }
.nav a, .menu a { color: inherit; text-decoration: none; font-size: 0.98rem; font-weight: 500; }
.nav a { position: relative; display: block; padding: 0.5rem 0.8rem; border-radius: 999px; transition: background-color 0.15s, color 0.15s; }
.nav a:hover { background: var(--sand-soft); color: var(--ink); }
.site-head--dark .nav a:hover { background: rgb(255 255 255 / 0.08); color: var(--on-indigo); }
.nav a[aria-current] { font-weight: 600; }
.nav a[aria-current]::after { content: ""; position: absolute; left: 50%; bottom: 0.18rem; width: 1.1rem; height: 2px; margin-left: -0.55rem; border-radius: 2px; background: var(--madder); }
.site-head--dark .nav a[aria-current]::after { background: var(--sand); }
.head-tools { display: flex; align-items: center; gap: 0.4rem; padding-left: 0.9rem; border-left: 1px solid var(--rule); }
.site-head--dark .head-tools { border-left-color: rgb(255 255 255 / 0.14); }
.icon-link { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-width: 2.5rem; height: 2.5rem; padding: 0 0.8rem; border-radius: 999px; color: inherit; text-decoration: none; font-size: 0.95rem; font-weight: 500; border: 1px solid var(--rule); transition: background-color 0.15s, border-color 0.15s; }
.icon-link:hover { background: var(--sand-soft); border-color: var(--sand); color: var(--ink); }
.site-head--dark .icon-link { border-color: rgb(255 255 255 / 0.18); }
.site-head--dark .icon-link:hover { background: rgb(255 255 255 / 0.08); color: var(--on-indigo); }
.icon-link svg { width: 1.05rem; height: 1.05rem; flex: none; }

/* appearance switch: follow the device, light or dark */
.theme-switch { display: inline-flex; align-items: center; padding: 3px; gap: 2px; border-radius: 999px; border: 1px solid var(--rule); background: color-mix(in srgb, var(--paper-raised) 60%, transparent); }
.site-head--dark .theme-switch { border-color: rgb(255 255 255 / 0.18); background: rgb(255 255 255 / 0.05); }
.theme-switch button { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border: 0; padding: 0; border-radius: 999px; background: none; color: inherit; opacity: 0.7; cursor: pointer; transition: background-color 0.15s, opacity 0.15s, color 0.15s; }
.theme-switch button:hover { opacity: 1; }
.theme-switch button[aria-pressed="true"] { opacity: 1; background: var(--paper-raised); color: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / 0.14), 0 0 0 1px var(--rule); }
.site-head--dark .theme-switch button[aria-pressed="true"] { background: var(--sand); color: #16204a; box-shadow: none; }
.theme-switch svg { width: 1.05rem; height: 1.05rem; }
.theme-switch button:focus-visible, .icon-link:focus-visible, .nav a:focus-visible, .menu summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* small screens: one Menu button with the sections, search and the appearance switch */
.menu { display: none; position: relative; }
.menu summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 0.45rem; height: 2.5rem; padding: 0 0.95rem; font-weight: 600; font-size: 0.95rem; border: 1px solid var(--rule); border-radius: 999px; }
.site-head--dark .menu summary { border-color: rgb(255 255 255 / 0.25); }
.menu summary::-webkit-details-marker { display: none; }
.menu summary svg { width: 1.05rem; height: 1.05rem; }
.menu[open] .menu__panel { position: absolute; right: 0; top: calc(100% + 0.6rem); z-index: 40; background: var(--paper-raised); color: var(--ink); border: 1px solid var(--rule); border-radius: 14px; box-shadow: 0 18px 40px -12px rgb(0 0 0 / 0.35); min-width: 15rem; padding: 0.5rem; }
.menu li a { display: block; padding: 0.7rem 0.85rem; border-radius: 8px; }
.menu li a:hover, .menu li a[aria-current] { background: var(--sand-soft); }
.menu__appearance { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 0.4rem 0 0; padding: 0.7rem 0.4rem 0.3rem 0.85rem; border-top: 1px solid var(--rule); font-size: 0.95rem; color: var(--muted); }
.menu__appearance .theme-switch { border-color: var(--rule); background: var(--paper); }
@media (max-width: 62rem) {
  .nav, .head-tools { display: none; }
  .menu { display: block; }
}
@media (prefers-reduced-motion: reduce) { .site-head, .nav a, .icon-link, .theme-switch button, .brand__mark { transition: none; } }

/* account: "Sign in" for visitors, or the signed-in reader's menu (shown at every width) */
.signin-link { display: inline-flex; align-items: center; height: 2.5rem; padding: 0 1.05rem; border-radius: 999px; font-weight: 600; font-size: 0.95rem; line-height: 1; text-decoration: none; white-space: nowrap; background: var(--indigo-2); color: #fff; }
.signin-link:hover { background: var(--indigo); color: #fff; }
.site-head--dark .signin-link { background: var(--sand); color: #16204a; }
.site-head--dark .signin-link:hover { background: #dcbc80; color: #16204a; }
:root[data-theme="dark"] .signin-link { background: var(--sand); color: #16204a; } :root[data-theme="dark"] .signin-link:hover { background: #e2c58c; color: #16204a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .signin-link { background: var(--sand); color: #16204a; } :root:not([data-theme="light"]) .signin-link:hover { background: #e2c58c; color: #16204a; } }
.account-menu { position: relative; }
.account-menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; height: 2.5rem; padding: 0 0.9rem 0 0.3rem; border: 1px solid var(--rule); border-radius: 999px; font-weight: 600; font-size: 0.95rem; transition: background-color 0.15s, border-color 0.15s; }
.account-menu summary::-webkit-details-marker { display: none; }
.account-menu summary:hover { background: var(--sand-soft); border-color: var(--sand); color: var(--ink); }
.site-head--dark .account-menu summary { border-color: rgb(255 255 255 / 0.25); }
.site-head--dark .account-menu summary:hover { background: rgb(255 255 255 / 0.08); color: var(--on-indigo); }
.account-menu summary:focus-visible, .signin-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.account-menu .avatar { width: 1.9rem; height: 1.9rem; font-size: 0.9rem; }
.account-menu__panel { position: absolute; right: 0; top: calc(100% + 0.6rem); z-index: 40; min-width: 16rem; max-width: min(22rem, calc(100vw - 2rem)); padding: 0.5rem;
  background: var(--paper-raised); color: var(--ink); border: 1px solid var(--rule); border-radius: 14px; box-shadow: 0 18px 40px -12px rgb(0 0 0 / 0.35); }
.account-menu__who { display: grid; gap: 0.1rem; margin: 0 0 0.35rem; padding: 0.55rem 0.85rem 0.75rem; border-bottom: 1px solid var(--rule); font-size: 0.92rem; color: var(--muted); overflow-wrap: anywhere; }
.account-menu__who strong { color: var(--ink); font-size: 1rem; }
.account-menu__note { margin: 0.25rem 0.85rem 0.4rem; font-size: 0.88rem; color: var(--muted); }
.account-menu__panel form { margin: 0; }
.account-menu__panel a, .account-menu__panel button { display: block; width: 100%; text-align: left; padding: 0.7rem 0.85rem; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; font-weight: 500; text-decoration: none; cursor: pointer; }
.account-menu__panel a:hover, .account-menu__panel button:hover { background: var(--sand-soft); }
@media (max-width: 30rem) { .account-menu__name { display: none; } .account-menu summary { padding: 0 0.3rem; } .signin-link { padding: 0 0.85rem; } }
@media (prefers-reduced-motion: reduce) { .account-menu summary { transition: none; } }
.flash { max-width: 72rem; margin: 1rem auto 0; margin-inline: max(var(--gutter), calc((100% - 72rem) / 2)); padding: 0.8rem 1.1rem; font-family: var(--sans); background: var(--sand-soft); border: 1px solid color-mix(in srgb, var(--sand) 55%, transparent); border-left: 4px solid var(--sand); border-radius: var(--radius); }

/* ------------------------------------------------------------------ buttons & small parts */
.button { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--sans); font-weight: 600; font-size: 1rem; line-height: 1.2; padding: 0.75rem 1.2rem; border-radius: 999px; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; }
.button cite { font-style: normal; }
.button > span { display: inline; }
.button--sand { background: var(--sand); color: #16204a; }
.button--sand:hover { background: #dcbc80; color: #16204a; }
.button--ghost { color: var(--on-indigo); border-color: color-mix(in srgb, var(--on-indigo) 55%, transparent); }
.button--ghost:hover { color: #fff; border-color: var(--on-indigo); }
.button--indigo { background: var(--indigo-2); color: #fff; }
.button--indigo:hover { background: var(--indigo); color: #fff; }
:root[data-theme="dark"] .button--indigo { background: var(--sand); color: #16204a; } :root[data-theme="dark"] .button--indigo:hover { background: #e2c58c; color: #16204a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .button--indigo { background: var(--sand); color: #16204a; } :root:not([data-theme="light"]) .button--indigo:hover { background: #e2c58c; color: #16204a; } }
.more { font-family: var(--sans); font-weight: 600; text-decoration: none; display: inline-block; margin-top: 1rem; }
.more:hover { text-decoration: underline; }
.eyebrow, .entry__kind, .margin-block__label, .related__kind, .commentary__label { font-family: var(--sans); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--madder); margin: 0 0 0.5rem; }
.eyebrow a, .entry__kind a { color: inherit; text-decoration: none; }
.eyebrow a:hover, .entry__kind a:hover { text-decoration: underline; }
.meta { font-family: var(--sans); font-size: 0.93rem; color: var(--muted); margin: 0.6rem 0 0; }
.meta__sep { margin: 0 0.5em; }
.count { font-family: var(--sans); font-size: 0.78em; color: var(--muted); font-variant-numeric: tabular-nums; }
.empty { font-style: italic; color: var(--muted); }

/* ------------------------------------------------------------------ hero (home) */
.hero { background: var(--indigo); color: var(--on-indigo); overflow: hidden; position: relative; }
.hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 4px; background: linear-gradient(90deg, var(--madder), var(--sand) 35%, var(--sand) 65%, var(--madder)); }
.hero__inner { max-width: 76rem; margin: 0 auto; padding: clamp(2rem, 5vw, 4.5rem) var(--gutter) clamp(3rem, 6vw, 5rem); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: center; }
.hero__name { font-family: var(--display); font-weight: 400; font-size: clamp(0.95rem, 0.8rem + 0.6vw, 1.25rem); letter-spacing: 0.32em; text-transform: uppercase; color: var(--sand); margin: 0 0 1.4rem; }
.hero__question { font-family: var(--serif); font-optical-sizing: auto; font-weight: 300; font-style: italic; font-size: clamp(2.3rem, 1.4rem + 4.2vw, 4.9rem); line-height: 1.04; letter-spacing: -0.012em; margin: 0 0 1.5rem; text-wrap: balance; color: #fbf6ea; }
.hero__lede { font-size: clamp(1.05rem, 1rem + 0.35vw, 1.3rem); line-height: 1.55; color: var(--on-indigo-soft); max-width: 36rem; margin: 0 0 2rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0; }
.hero__window { justify-self: center; width: min(100%, 25rem); }
.jali { display: block; width: 100%; height: auto; color: var(--sand); overflow: visible; filter: drop-shadow(0 0 28px rgb(201 164 99 / 0.25)); }
.jali .glow-core { stop-color: var(--glow-core); stop-opacity: 0.9; }
.jali .glow-mid { stop-color: var(--glow-mid); stop-opacity: 0.42; }
.jali .glow-edge { stop-color: var(--glow-mid); stop-opacity: 0; }
.jali-glow { animation: jali-glow 3.2s ease-out both; }
.jali-dawn { animation: jali-dawn 2.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both; }
@keyframes jali-glow { from { opacity: 0; } to { opacity: 1; } }
@keyframes jali-dawn { from { transform: translateY(620px); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .jali-glow, .jali-dawn { animation: none; } }
@media (max-width: 52rem) {
  .hero__inner { grid-template-columns: 1fr; gap: 1.25rem; padding-top: 1.25rem; }
  .hero__window { order: -1; width: min(46%, 11.5rem); justify-self: start; }
  .hero__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ------------------------------------------------------------------ home bands */
.band { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.band + .band { border-top: 1px solid var(--rule); }
.band__inner { max-width: 76rem; margin: 0 auto; padding: 0 var(--gutter); }
.band__inner--narrow { max-width: 46rem; }
.band__inner--split { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); }
@media (max-width: 58rem) { .band__inner--split { grid-template-columns: 1fr; } }
.band__title { font-family: var(--display); font-weight: 400; font-size: 1.05rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sand-deep); margin: 0 0 1.75rem; display: flex; align-items: center; gap: 1rem; }
.band__title::after { content: ""; flex: 1; height: 1px; background: var(--rule-strong); }
.band__title a { color: inherit; text-decoration: none; }
.band__title a:hover { color: var(--madder); }
.band__lede { max-width: 44rem; color: var(--ink-soft); margin: -0.75rem 0 1.75rem; }
.band--shelf { background: var(--paper-raised); }
.band--shared { background: color-mix(in srgb, var(--sand-soft) 55%, var(--paper)); }
.band--about { background: var(--paper-raised); }
.prose--about p { font-size: 1.2em; line-height: 1.55; margin: 0 0 0.75rem; }
.prose--about p:first-child { font-size: 1.45em; line-height: 1.3; font-style: italic; }

.picks { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4rem); }
@media (max-width: 58rem) { .picks { grid-template-columns: 1fr; } }
.pick--lead { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; align-items: start; }
.pick--lead:not(:has(.pick__cover)) { grid-template-columns: 1fr; }
.pick__cover { display: block; width: clamp(8rem, 16vw, 12rem); }
.pick__title { font-family: var(--serif); font-weight: 500; font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.6rem); line-height: 1.1; margin: 0 0 0.5rem; text-wrap: balance; }
.pick__title a { color: inherit; text-decoration: none; }
.pick__title a:hover { color: var(--madder); }
.pick__summary { color: var(--ink-soft); }
.picks__rest .entry:first-child { padding-top: 0; }
@media (max-width: 30rem) { .pick--lead { grid-template-columns: 1fr; } .pick__cover { width: 9rem; } }

/* entries (lists of writing) */
.entries { display: grid; }
.entry { padding: 1.25rem 0; border-bottom: 1px solid var(--rule); }
.entry:last-child { border-bottom: 0; }
.entry__title { font-family: var(--serif); font-weight: 500; font-size: 1.45rem; line-height: 1.2; margin: 0; text-wrap: balance; }
.entry__title a { color: inherit; text-decoration: none; }
.entry__title a:hover { color: var(--madder); text-decoration: underline; text-decoration-thickness: 1px; }
.entry__subtitle { font-style: italic; color: var(--ink-soft); margin: 0.3rem 0 0; line-height: 1.4; }
.entry__summary { margin: 0.55rem 0 0; color: var(--ink-soft); font-size: 0.97em; }
.entries--page { max-width: 48rem; }
.home .entry__summary { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* topics panel on home */
.topics-panel .theme { margin-bottom: 1.5rem; }
.theme__title { font-family: var(--sans); font-size: 0.95rem; font-weight: 700; margin: 0 0 0.5rem; color: var(--ink); }
.theme__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem; }
.theme__list li a, .chips a { display: inline-block; font-family: var(--sans); font-size: 0.95rem; text-decoration: none; color: var(--ink); background: var(--paper-raised); border: 1px solid var(--rule); border-radius: 999px; padding: 0.3rem 0.8rem; }
.theme__list li { display: flex; align-items: center; gap: 0.25rem; }
.theme__list li a:hover, .chips a:hover { border-color: var(--madder); color: var(--madder); }
.theme__list .count { margin-left: 0.1rem; }

/* books */
.shelf { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 2.5rem; }
.book-card { display: grid; grid-template-columns: 9rem 1fr; gap: 1.4rem; align-items: start; }
.book-card--large { grid-template-columns: 12rem 1fr; }
.book-card__title { font-family: var(--serif); font-weight: 500; font-size: 1.6rem; line-height: 1.15; margin: 0 0 0.35rem; }
.book-card__title a { color: inherit; text-decoration: none; }
.book-card__title a:hover { color: var(--madder); }
.cover { display: block; width: 100%; aspect-ratio: 300 / 440; object-fit: cover; border-radius: 3px 8px 8px 3px; box-shadow: 0 1px 0 rgb(0 0 0 / 0.08), 0 14px 30px -12px rgb(22 32 74 / 0.45), inset 4px 0 0 rgb(0 0 0 / 0.12); background: var(--indigo); overflow: hidden; }
.cover svg { display: block; width: 100%; height: 100%; }
@media (max-width: 30rem) { .book-card, .book-card--large { grid-template-columns: 7rem 1fr; gap: 1rem; } }

/* shared posts */
.shared-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: 1.4rem; }
.shared-card { display: flex; flex-direction: column; }
.shared-card__link { display: flex; flex-direction: column; gap: 0.65rem; text-decoration: none; color: inherit; }
.shared-card img, .shared-card__noimg { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; border-radius: var(--radius); background: var(--paper-raised); border: 1px solid var(--rule); }
.shared-card__noimg { display: grid; place-items: center; font-size: 4rem; color: var(--sand-deep); font-family: var(--serif); }
.shared-card__title { font-family: var(--serif); font-size: 1.08rem; line-height: 1.25; font-weight: 500; }
.shared-card__link:hover .shared-card__title { color: var(--madder); text-decoration: underline; text-decoration-thickness: 1px; }
.shared-card__credit { font-family: var(--sans); font-size: 0.88rem; color: var(--muted); margin: 0.2rem 0 0; }

/* ------------------------------------------------------------------ list pages */
.list-head { max-width: 76rem; margin: 0 auto; padding: clamp(2rem, 5vw, 3.5rem) var(--gutter) 1.5rem; }
.list-head__title { font-family: var(--serif); font-weight: 400; font-size: clamp(2.3rem, 1.6rem + 3vw, 3.6rem); line-height: 1.05; margin: 0 0 0.75rem; letter-spacing: -0.01em; }
.list-head__lede { max-width: 44rem; color: var(--ink-soft); margin: 0 0 1.25rem; font-size: 1.1em; }
.page-list main > :not(.list-head) { max-width: 76rem; margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.page-list main { padding-bottom: 4rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.chips a[aria-current="page"] { background: var(--indigo-2); color: #fff; border-color: var(--indigo-2); }
.chips a[aria-current="page"]::before { content: "✓ " / ""; }
:root[data-theme="dark"] .chips a[aria-current="page"] { background: var(--sand); color: #16204a; border-color: var(--sand); } :root[data-theme="dark"] .chips a[aria-current="page"] .count { color: #3b3320; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chips a[aria-current="page"] { background: var(--sand); color: #16204a; border-color: var(--sand); } :root:not([data-theme="light"]) .chips a[aria-current="page"] .count { color: #3b3320; } }
.chips a[aria-current="page"] .count { color: #d7dbf0; }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2.5rem; font-family: var(--sans); }
.pager__at { color: var(--muted); }
.topic-section { margin-top: 1.5rem; margin-bottom: 2.5rem; }
.themes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 2.5rem; }
.theme-block__title { font-family: var(--serif); font-weight: 500; font-size: 1.7rem; margin: 0 0 0.4rem; }
.theme-block__desc { color: var(--ink-soft); margin: 0 0 1rem; }
.topic-list { list-style: none; margin: 0; padding: 0; }
.topic-list li { padding: 0.8rem 0; border-top: 1px solid var(--rule); }
.topic-list li a { font-weight: 600; font-size: 1.1rem; }
.topic-list li p { margin: 0.25rem 0 0; font-size: 0.95rem; color: var(--muted); }
.all-tags { margin-top: 3.5rem; }
.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; font-family: var(--sans); }
.tags a { text-decoration: none; }
.tags a:hover { text-decoration: underline; }
.tags--cloud { gap: 0.5rem 1.2rem; font-size: 1.02rem; }

/* search */
.search-form { display: flex; gap: 0.6rem; max-width: 40rem; flex-wrap: wrap; }
.search-form input { flex: 1 1 16rem; font: inherit; font-size: 1.1rem; padding: 0.7rem 1rem; border: 1.5px solid var(--field-border); border-radius: 999px; background: var(--paper-raised); color: var(--ink); }
.search-form input:focus { border-color: var(--link); outline: 3px solid color-mix(in srgb, var(--focus) 60%, transparent); outline-offset: 1px; }
.search-form__hint { font-family: var(--sans); font-size: 0.9rem; color: var(--muted); margin-top: 0.75rem; }
.results__count { font-family: var(--sans); color: var(--muted); }
.results__list { list-style: none; margin: 0; padding: 0; max-width: 48rem; }
.result { padding: 1.2rem 0; border-bottom: 1px solid var(--rule); }
.result__snippet { margin: 0.4rem 0 0; color: var(--ink-soft); }

/* ------------------------------------------------------------------ the reading page */
.doc { max-width: 76rem; margin: 0 auto; padding: clamp(2rem, 5vw, 3.5rem) var(--gutter) 4rem; }
.doc__head { max-width: 50rem; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.doc__kicker { font-family: var(--sans); font-weight: 600; color: var(--sand-deep); margin: 0 0 0.4rem; }
.doc__title { font-family: var(--serif); font-optical-sizing: auto; font-weight: 400; font-size: clamp(2.3rem, 1.4rem + 3.6vw, 4rem); line-height: 1.04; letter-spacing: -0.015em; margin: 0; text-wrap: balance; }
.doc__title-ar { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.3rem); margin: 0.6rem 0 0; color: var(--sand-deep); }
.doc__subtitle { font-style: italic; font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.45rem); line-height: 1.4; color: var(--ink-soft); margin: 0.9rem 0 0; max-width: 44rem; text-wrap: pretty; }
.doc__layout { display: grid; grid-template-columns: minmax(0, var(--measure)) minmax(13rem, 17rem); gap: clamp(2.5rem, 6vw, 5.5rem); align-items: start; }
.doc__margin { position: sticky; top: 5.5rem; max-height: calc(100vh - 7rem); overflow-y: auto; font-family: var(--sans); font-size: 0.95rem; border-left: 1px solid var(--rule); padding-left: 1.5rem; }
.doc__margin:empty { display: none; }
@media (max-width: 66rem) {
  .doc__layout { grid-template-columns: minmax(0, 1fr); }
  .doc__body { max-width: var(--measure); }
  .doc__margin { position: static; max-height: none; overflow: visible; border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 1.5rem; max-width: var(--measure); }
}
.margin-block + .margin-block { margin-top: 1.75rem; }
.margin-block__title { font-family: var(--display); font-weight: 400; font-size: 0.85rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sand-deep); margin: 0 0 0.75rem; }
.refs { list-style: none; margin: 0 0 0.75rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; font-variant-numeric: tabular-nums; }
.refs--hadith { display: block; }
.refs--hadith li { margin-bottom: 0.25rem; color: var(--ink-soft); }
.margin-chapters { list-style: none; margin: 0; padding: 0; }
.margin-chapters li a { display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.3rem; padding: 0.3rem 0; text-decoration: none; color: var(--ink-soft); line-height: 1.3; }
.margin-chapters li a:hover { color: var(--madder); }
.margin-chapters a[aria-current="page"] { color: var(--ink); font-weight: 700; }
.margin-chapters__n { color: var(--muted); font-variant-numeric: tabular-nums; }

.margin-toc ol { list-style: none; margin: 0; padding: 0; }
.margin-toc li a { display: block; padding: 0.28rem 0; line-height: 1.3; text-decoration: none; color: var(--ink-soft); }
.margin-toc li a:hover { color: var(--madder); }
@media (min-width: 66.01rem) { .doc__body > .contents { display: none; } }
@media (max-width: 66rem) { .margin-toc { display: none; } }
.contents { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-raised); padding: 0.75rem 1rem; margin: 0 0 2rem; font-family: var(--sans); }
.contents summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.contents ol { margin: 0.75rem 0 0.25rem; padding-left: 1.3rem; }
.contents li { margin: 0.25rem 0; }
.contents a { text-decoration: none; }
.contents a:hover { text-decoration: underline; }

/* prose */
.prose { font-size: 1.07em; line-height: 1.68; overflow-wrap: break-word; }
.prose > * { margin-top: 0; margin-bottom: 1.05em; }
.doc:not(.doc--shared) .prose > p:first-of-type:not([lang])::first-letter { font-family: var(--display); float: left; font-size: 3.35em; line-height: 0.82; padding: 0.08em 0.1em 0 0; margin-right: 0.04em; color: var(--madder); }
.prose h2 { font-family: var(--serif); font-weight: 600; font-size: 1.5em; line-height: 1.2; margin: 2.1em 0 0.6em; text-wrap: balance; }
.prose h3 { font-family: var(--serif); font-weight: 600; font-size: 1.2em; line-height: 1.3; margin: 1.8em 0 0.5em; }
.prose h4 { font-family: var(--sans); font-size: 1em; margin: 1.5em 0 0.4em; }
.prose h2 + *, .prose h3 + * { margin-top: 0; }
.prose p[lang="ar"], .prose li[lang="ar"], .prose p[lang="ur"], .prose li[lang="ur"] { font-size: 1.32em; line-height: 2.05; color: var(--ink); text-align: right; margin: 1.3em 0; hyphens: none; }
.prose blockquote { margin: 1.6em 0; padding: 0.25em 0 0.25em 1.3em; border-left: 3px solid var(--sand); color: var(--ink-soft); font-style: italic; }
.prose blockquote p[lang="ar"], .prose blockquote p[lang="ur"] { font-style: normal; }
.prose blockquote > :last-child { margin-bottom: 0; }
.prose blockquote + blockquote { margin-top: -0.55em; padding-top: 0; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li { margin: 0.35em 0; }
.prose li::marker { color: var(--madder); }
.prose hr { border: 0; text-align: center; margin: 2.4em 0; height: auto; }
.prose hr::before { content: "۞"; font-family: var(--arabic); color: var(--sand-deep); font-size: 1.1em; }
.prose strong { font-weight: 650; }
.prose figure { margin: 1.8em 0; }
.prose figure img { display: block; margin: 0 auto; border-radius: var(--radius); box-shadow: 0 1px 2px rgb(0 0 0 / 0.08), 0 10px 30px -18px rgb(0 0 0 / 0.5); }
.prose .table-wrap { overflow-x: auto; margin: 1.6em 0; }
.prose table { border-collapse: collapse; width: 100%; font-family: var(--sans); font-size: 0.92em; line-height: 1.45; }
.prose th, .prose td { border-bottom: 1px solid var(--rule); padding: 0.6em 0.75em; text-align: left; vertical-align: top; }
.prose th { background: var(--sand-soft); font-weight: 700; }
.prose td[dir="rtl"], .prose th[dir="rtl"] { text-align: right; }
.prose a.ext::after { content: "↗" / ""; font-family: var(--sans); font-size: 0.75em; margin-left: 0.15em; text-decoration: none; display: inline-block; }
.prose p:has(> em:only-child) { color: var(--ink-soft); }

.pdf { margin: 0 0 2rem; }
.pdf iframe { width: 100%; height: min(80vh, 60rem); border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-raised); }
.pdf figcaption { font-family: var(--sans); font-size: 0.95rem; margin-top: 0.5rem; color: var(--muted); }
.doc__foot { max-width: var(--measure); margin-top: 3rem; }
.fleuron { text-align: center; font-family: var(--arabic); font-size: 1.5rem; color: var(--sand-deep); margin: 0 0 2rem; }
.doc__note { font-family: var(--sans); font-size: 0.95rem; color: var(--muted); }
.related { margin-top: 1rem; }
.related__title { font-family: var(--display); font-weight: 400; font-size: 1rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sand-deep); margin: 0 0 1rem; }
.related__list { list-style: none; margin: 0; padding: 0; }
.related__item { padding: 1rem 0; border-top: 1px solid var(--rule); }
.related__link { font-size: 1.25rem; font-weight: 500; text-decoration: none; color: var(--ink); }
.related__link:hover { color: var(--madder); text-decoration: underline; }
.related__why { margin: 0.35rem 0 0; color: var(--ink-soft); font-size: 0.97em; }

/* shared posts */
.doc--shared .doc__head { max-width: 46rem; }
.credit { font-family: var(--sans); margin-top: 1.1rem; padding: 0.9rem 1.1rem; background: var(--paper-raised); border: 1px solid var(--rule); border-left: 4px solid var(--sand); border-radius: var(--radius); max-width: 40rem; }
.credit p { margin: 0; }
.credit__original { margin-top: 0.35rem !important; font-size: 0.95rem; }
.credit a.ext::after, .refs a.ext::after { content: " ↗" / ""; font-size: 0.85em; }
.commentary { max-width: var(--measure); background: var(--sand-soft); border-radius: var(--radius); padding: 1.1rem 1.35rem; margin: 0 0 2rem; }
.commentary__text { font-size: 1.1em; font-style: italic; white-space: pre-line; }
.doc--shared .prose figure img { max-height: 90vh; width: auto; }

/* “The picture in words”: a text alternative under an infographic */
.prose figure.has-words { text-align: center; }
.picture-words { max-width: var(--measure); margin: 0.9rem auto 0; font-family: var(--sans); text-align: left; }
.picture-words > summary { display: flex; width: fit-content; margin: 0 auto; align-items: center; gap: 0.55rem; min-height: 2.75rem; padding: 0.4rem 1rem; cursor: pointer; list-style: none;
  font-size: 0.95rem; font-weight: 600; color: var(--link); background: var(--paper-raised); border: 1px solid var(--rule); border-radius: 999px; }
.picture-words > summary::-webkit-details-marker { display: none; }
.picture-words > summary::before { content: ""; width: 0.42em; height: 0.42em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-0.1em) rotate(45deg); transition: transform 0.15s; }
.picture-words[open] > summary::before { transform: translateY(0.1em) rotate(-135deg); }
.picture-words > summary:hover { border-color: var(--sand); color: var(--link-hover); }
.picture-words__text { margin-top: 0.75rem; padding: 0.95rem 1.15rem; background: var(--paper-raised); border: 1px solid var(--rule); border-left: 4px solid var(--sand); border-radius: var(--radius); font-size: 1rem; line-height: 1.6; color: var(--ink-soft); }
.picture-words__text p { margin: 0 0 0.6em; }
.picture-words__text ul { margin: 0.2em 0 0.6em; padding-left: 1.2em; }
.picture-words__text li { margin: 0.25em 0; }
.picture-words__text > :last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .picture-words > summary::before { transition: none; } }
@media print { .picture-words > summary { display: none; } }

/* books */
.book { max-width: 76rem; margin: 0 auto; padding: clamp(2rem, 5vw, 3.5rem) var(--gutter) 4rem; }
.book__head { display: grid; grid-template-columns: minmax(10rem, 17rem) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 4rem); align-items: start; margin-bottom: 3rem; }
.book__summary { font-size: 1.12em; color: var(--ink-soft); max-width: 44rem; }
@media (max-width: 40rem) { .book__head { grid-template-columns: 1fr; } .book__cover { width: 11rem; } }
.book__contents { max-width: 52rem; }
.chapters { list-style: none; margin: 0; padding: 0; }
.chapter-row { display: grid; grid-template-columns: 2.8rem minmax(0, 1fr) auto; gap: 0.9rem; align-items: center; padding: 0.7rem 0; border-top: 1px solid var(--rule); }
.chapter-row__title { font-size: 1.2rem; text-decoration: none; color: var(--ink); line-height: 1.3; }
.chapter-row__title:hover { color: var(--madder); text-decoration: underline; }
.chapter-row__meta { font-family: var(--sans); font-size: 0.88rem; color: var(--muted); white-space: nowrap; }
@media (max-width: 34rem) { .chapter-row { grid-template-columns: 2.4rem minmax(0, 1fr); } .chapter-row__meta { grid-column: 2; } }
.rosette { position: relative; display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; color: var(--sand-deep); }
.rosette svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rosette span { font-family: var(--sans); font-weight: 700; font-size: 0.85rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.book__front { max-width: var(--measure); margin-top: 3rem; }
.chapter-nav { max-width: var(--measure); display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 3rem; font-family: var(--sans); }
.chapter-nav a { display: block; padding: 1rem 1.1rem; border: 1px solid var(--rule); border-radius: var(--radius); text-decoration: none; color: var(--ink); background: var(--paper-raised); line-height: 1.3; }
.chapter-nav a:hover { border-color: var(--madder); }
.chapter-nav span { display: block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--madder); margin-bottom: 0.25rem; }
.chapter-nav__next { text-align: right; grid-column: 2; }

/* free and members' pieces: marks for visitors, the opening of a members' piece and the card under it */
.free-mark { display: inline-block; margin-left: 0.65em; padding: 0.12em 0.6em; border-radius: 999px; font-family: var(--sans); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; line-height: 1.5; text-transform: uppercase; vertical-align: 0.12em;
  color: var(--sand-deep); background: var(--sand-soft); border: 1px solid color-mix(in srgb, var(--sand) 55%, transparent); }
.lock-mark { display: inline-flex; margin-left: 0.45em; color: var(--muted); vertical-align: -0.08em; }
.lock-mark svg { width: 0.95em; height: 0.95em; }
.prose--teaser { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 3.5rem), rgb(0 0 0 / 0.25)); mask-image: linear-gradient(to bottom, #000 calc(100% - 3.5rem), rgb(0 0 0 / 0.25)); }
.prose--teaser > :last-child { margin-bottom: 0; }
.doc__summary { font-size: 1.15em; font-style: italic; color: var(--ink-soft); margin: 0 0 1.5rem; }
.keep-reading { position: relative; overflow: hidden; margin: 0.75rem 0 2rem; padding: clamp(1.4rem, 4vw, 2rem); font-family: var(--sans); background: var(--paper-raised); border: 1px solid var(--rule); border-radius: 14px; box-shadow: 0 24px 48px -32px rgb(22 32 74 / 0.45); }
.keep-reading::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--madder), var(--sand) 35%, var(--sand) 65%, var(--madder)); }
.keep-reading__title { font-family: var(--display); font-weight: 400; font-size: 1rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sand-deep); margin: 0 0 0.6rem; }
.keep-reading__lede { font-family: var(--serif); font-size: 1.15em; line-height: 1.5; color: var(--ink); margin: 0 0 1.1rem; }
.keep-reading__action { margin: 0 0 1rem; }
.keep-reading__free { font-size: 0.95rem; color: var(--muted); margin: 0; }
.margin-toc--locked li { padding: 0.28rem 0; line-height: 1.3; color: var(--muted); }
.book__access { font-family: var(--sans); font-size: 0.97rem; color: var(--ink-soft); margin: 0.75rem 0 0; }
.book-card__free { font-family: var(--sans); font-size: 0.9rem; color: var(--sand-deep); margin: 0.35rem 0 0; }
.chapter-row__main { display: flex; flex-wrap: wrap; align-items: center; min-width: 0; }

/* home: free to read */
.band--free { background: color-mix(in srgb, var(--sand-soft) 40%, var(--paper)); }
.free-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: 1.25rem; }
.free-card { background: var(--paper-raised); border: 1px solid var(--rule); border-radius: 12px; padding: 1.25rem 1.35rem; }
.free-card--book { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1.1rem; align-items: start; }
.free-card__cover { display: block; }
.free-card__title { font-family: var(--serif); font-weight: 500; font-size: 1.4rem; line-height: 1.2; margin: 0 0 0.4rem; text-wrap: balance; }
.free-card__title a { color: inherit; text-decoration: none; }
.free-card__title a:hover { color: var(--madder); text-decoration: underline; text-decoration-thickness: 1px; }
.free-card__summary { color: var(--ink-soft); font-size: 0.97em; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.free-card__chapters { margin: 0.25rem 0 0; padding-left: 1.1rem; font-family: var(--sans); font-size: 0.97rem; }
.free-card__chapters li { margin: 0.25rem 0; }
.free-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-top: 1.75rem; padding: 1.25rem 1.5rem; border-radius: 12px; background: var(--indigo); color: var(--on-indigo); }
.free-cta__text { margin: 0; max-width: 40rem; }
.free-cta__action { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin: 0; font-family: var(--sans); }
.free-cta .button--indigo { background: var(--sand); color: #16204a; }
.free-cta .button--indigo:hover { background: #dcbc80; color: #16204a; }
.free-cta__note { font-size: 0.9rem; color: var(--on-indigo-soft); }

/* ------------------------------------------------------------------ readers: sign-in and account */
.account { max-width: 36rem; margin: 0 auto; padding: clamp(2rem, 6vw, 4rem) var(--gutter) 3rem; }
.account__card { position: relative; overflow: hidden; background: var(--paper-raised); border: 1px solid var(--rule); border-radius: 16px; padding: clamp(1.5rem, 5vw, 2.5rem);
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.03), 0 24px 48px -32px rgb(22 32 74 / 0.45); }
.account__card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--madder), var(--sand) 35%, var(--sand) 65%, var(--madder)); }
.account__title { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 1.5rem + 2vw, 2.6rem); line-height: 1.08; letter-spacing: -0.01em; margin: 0 0 0.9rem; text-wrap: balance; }
.account__lede { color: var(--ink-soft); font-size: 1.08em; margin: 0 0 1.1rem; }
.account__gets { list-style: none; margin: 0 0 1.6rem; padding: 0; font-family: var(--sans); }
.account__gets li { position: relative; padding: 0.3rem 0 0.3rem 1.6rem; }
.account__gets li::before { content: ""; position: absolute; left: 0.2rem; top: 0.82rem; width: 0.5rem; height: 0.5rem; background: var(--sand); transform: rotate(45deg); }
.account .btn-google { width: 100%; }
.account__status { min-height: 1.5em; margin: 0.6rem 0 0; font-family: var(--sans); font-weight: 600; }
.account__status[data-kind="error"] { color: var(--madder); }
.account__status[data-kind="ok"] { color: var(--ok); }
.account__fine { font-family: var(--sans); font-size: 0.9rem; color: var(--muted); margin: 1.2rem 0 0; }
.account__help { font-family: var(--sans); font-size: 0.95rem; margin-top: 0.9rem; }
.account__help summary { cursor: pointer; color: var(--link); font-weight: 600; }
.account__help p { margin: 0.5rem 0 0; color: var(--ink-soft); }
.account__aside { font-family: var(--sans); font-size: 0.95rem; color: var(--muted); text-align: center; margin: 1.25rem 0 0; }
.account__notice { background: var(--sand-soft); border-radius: var(--radius); padding: 0.8rem 1rem; font-family: var(--sans); }
.account__who { display: flex; gap: 1rem; align-items: center; margin: 0.5rem 0 1.25rem; padding: 1rem; background: color-mix(in srgb, var(--sand-soft) 55%, var(--paper-raised)); border-radius: 12px; }
.account__who > div { min-width: 0; }
.account__name { font-weight: 600; font-size: 1.15rem; margin: 0; }
.account__email { font-family: var(--sans); margin: 0; overflow-wrap: anywhere; }
.account__since { font-family: var(--sans); font-size: 0.88rem; color: var(--muted); margin: 0.15rem 0 0; }
.account__h2 { font-family: var(--display); font-weight: 400; font-size: 0.95rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sand-deep); margin: 2rem 0 0.75rem; }
.account__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.account__actions form { margin: 0; }
.account__delete { display: grid; gap: 0.75rem; justify-items: start; padding: 1rem; border: 1px solid var(--rule); border-radius: 12px; }
.account__check { display: flex; align-items: center; gap: 0.55rem; font-family: var(--sans); cursor: pointer; }
.account__check input { width: 1.15rem; height: 1.15rem; accent-color: var(--madder); }
.account__error { color: var(--madder); font-family: var(--sans); font-weight: 600; margin: 0; }
.avatar { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 999px; background: var(--madder); color: var(--paper); font-family: var(--sans); font-weight: 700; font-size: 0.95rem; line-height: 1; flex: none; }
.avatar--large { width: 3.25rem; height: 3.25rem; font-size: 1.35rem; }
.button--quiet { color: var(--ink); border-color: var(--rule-strong); background: transparent; }
.button--quiet:hover { border-color: var(--madder); color: var(--madder); }
.button--danger { background: var(--madder); color: var(--paper); }
.button--danger:hover { background: color-mix(in srgb, var(--madder) 85%, var(--ink)); color: var(--paper); }
button.button { font-family: var(--sans); }
/* contact */
.contact { display: grid; gap: 1rem; margin-top: 0.5rem; font-family: var(--sans); }
.contact__field { display: grid; gap: 0.35rem; }
.contact__field label { font-weight: 600; }
.contact__field input, .contact__field textarea { font: inherit; font-size: 1.02rem; padding: 0.65rem 0.8rem; border: 1.5px solid var(--field-border); border-radius: 10px; background: var(--paper); color: var(--ink); width: 100%; }
.contact__field textarea { resize: vertical; min-height: 10rem; line-height: 1.5; }
.contact__field input:focus, .contact__field textarea:focus { border-color: var(--link); outline: 3px solid color-mix(in srgb, var(--focus) 60%, transparent); outline-offset: 1px; }
.contact__hint { margin: 0; font-size: 0.88rem; color: var(--muted); }
.contact__error { margin: 0; padding: 0.7rem 0.9rem; border-radius: var(--radius); background: color-mix(in srgb, var(--madder) 12%, transparent); color: var(--madder); font-weight: 600; }
.contact__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* Sign in with Google (Google's button guidelines: white, grey border, the four-colour G) */
.btn-google { display: inline-flex; align-items: center; justify-content: center; gap: 0.85rem; min-height: 3.4rem; padding: 0.6rem 1.6rem 0.6rem 1.2rem;
  font: 600 1.12rem/1.2 var(--sans); color: #1f1f1f; background: #fff; border: 1px solid #747775; border-radius: 999px; cursor: pointer; box-shadow: 0 1px 2px rgb(0 0 0 / 0.08); }
.btn-google:hover { background: #f8f9fa; box-shadow: 0 1px 3px rgb(0 0 0 / 0.16); }
.btn-google:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.btn-google[disabled] { opacity: 0.6; cursor: wait; }
.btn-google__g { width: 1.4rem; height: 1.4rem; flex: none; }

/* ------------------------------------------------------------------ footer */
.site-foot { background: var(--indigo); color: var(--on-indigo-soft); font-family: var(--sans); margin-top: 0; }
.page-list .site-foot, .page-doc .site-foot, .page-book .site-foot, .page-shared .site-foot, .page-account .site-foot { margin-top: 2rem; }
.site-foot__inner { max-width: 76rem; margin: 0 auto; padding: 3rem var(--gutter) 1.5rem; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 2.5rem; }
@media (max-width: 46rem) { .site-foot__inner { grid-template-columns: 1fr; } }
.site-foot__name { font-family: var(--display); letter-spacing: 0.24em; text-transform: uppercase; color: var(--sand); margin: 0 0 0.6rem; font-size: 1.05rem; }
.site-foot__tagline { font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--on-indigo); margin: 0 0 0.4rem; }
.site-foot__place { margin: 0; }
.site-foot__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.site-foot__nav ul { list-style: none; margin: 0; padding: 0; }
.site-foot__nav li { margin: 0 0 0.45rem; }
.site-foot a { color: var(--on-indigo); text-decoration: none; }
.site-foot a:hover { color: var(--sand); text-decoration: underline; }
.site-foot__fine a { text-decoration: underline; }
.site-foot__fine { max-width: 76rem; margin: 0 auto; padding: 1rem var(--gutter) 2rem; font-size: 0.88rem; border-top: 1px solid color-mix(in srgb, var(--on-indigo) 18%, transparent); }

.edit-this { position: fixed; right: 1rem; bottom: 1rem; z-index: 30; font-family: var(--sans); font-weight: 700; background: var(--indigo-2); color: #fff; padding: 0.7rem 1.1rem; border-radius: 999px; text-decoration: none; box-shadow: 0 10px 30px -10px rgb(0 0 0 / 0.5); }
.edit-this:hover { background: var(--indigo); color: #fff; }

@media print {
  .site-head, .site-foot, .doc__margin, .chapter-nav, .related, .skip { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .doc__layout { display: block; }
}