/* Hallmark v2.0.0 · theme: BanglaSafe, his own (by request: cream, blue, rust, Inter, 16px/1.65, a 760px column) · genre editorial · job: read the work · signature: the rotating portrait beside his name · shape: masthead, nav, prose, in the shape of smanahian.com · nav: four plain links and a theme switch under a hairline · footer: the four places he is, and the year · hero: name, one line, links */
/* critique: one narrow column, his palette, prose with links. Tokens live in tokens.css; nothing literal here. */
/* waive: hairline | his own site rules off its header and he asked for this theme exactly.
   Two rules on the page, both his: under the nav and over the footer. */
/* waive: default-font | Inter is the face his own site is set in. He asked for these fonts. */
/* waive: 7b-pure-white | --fig-bg and --btn-hover are #ffffff in his own stylesheet. The paper
   figure was authored on white and tinting it would misreport the figure; the button hover is his. */
/* waive: 26b-disabled | the site has no form controls, so there is no disabled state to style. */

/* base */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--face);
  font-size: var(--step-body);
  line-height: var(--leading-text);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: -0.015em;
  overflow-wrap: break-word;
  min-width: 0;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; height: auto; }

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
  text-underline-offset: 0.16em;
  text-decoration-thickness: 1px;
  transition: color var(--fast) var(--ease), text-decoration-color var(--fast) var(--ease);
}
a:hover { color: var(--accent); text-decoration-color: currentColor; }
a:active { opacity: 0.72; }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 1px;
}

.tabular { font-variant-numeric: tabular-nums; }
.muted   { color: var(--muted); }
.small   { font-size: var(--step-small); }
[hidden] { display: none !important; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* the frame: a 768px page. On desktop it becomes a sidebar and a content column,
   so the width carries content on both sides instead of leaving the window empty. */
.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--bg); color: var(--ink);
  padding: var(--s1) var(--s2); z-index: 10;
}
.skip:focus { left: var(--s2); top: var(--s2); }

.shell {
  width: min(100% - 3rem, var(--page));
  margin-inline: auto;
  padding-block: var(--s5) var(--s4);
}

/* masthead */
.mast__top { display: flex; gap: var(--s3); align-items: flex-start; }
.mast__who { min-width: 0; }
.mast__name { font-size: var(--step-name); margin-bottom: 2px; }
.mast__name a { color: var(--ink); text-decoration: none; }
.mast__name a:hover { color: var(--accent); }
/* his title, then where he does it */
.mast__line { font-size: var(--step-mid); font-weight: 600; }
.mast__where { color: var(--muted); font-size: var(--step-small); margin-top: 2px; max-width: var(--measure); }
.mast__links { margin-top: var(--s1); display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); font-size: var(--step-small); }

.photo {
  flex: 0 0 auto;
  width: 112px; height: 112px;
  object-fit: cover;
  background: var(--panel);
  display: block;
}

/* nav */
.nav {
  margin-top: var(--s3);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--rule); /* taste-skill-ignore: his own header rule, by request */
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s1) var(--s3);
  font-size: var(--step-body);
}
.nav a { color: var(--muted); text-decoration: none; }
.nav a:hover { color: var(--accent); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.themer {
  margin-left: auto;
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--rule); /* taste-skill-ignore: his own theme control, a bordered tile */
  border-radius: 10px;
  width: 36px; height: 36px; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.themer:hover { border-color: var(--accent); color: var(--accent); }
.themer__i { display: none; }
.themer__moon { display: block; }
[data-theme="dark"] .themer__moon { display: none; }
[data-theme="dark"] .themer__sun { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .themer__moon { display: none; }
  :root:not([data-theme="light"]) .themer__sun { display: block; }
}
.themer:active { opacity: 0.72; }

main { display: block; padding-top: var(--s3); }

/* prose */
.prose > * { max-width: var(--measure); }
.aside { color: var(--muted); font-size: var(--step-small); margin-top: var(--s4) !important; }
.prose > * + * { margin-top: var(--s3); }
.prose h2 { font-size: 1.25rem; margin-top: var(--s5); letter-spacing: -0.015em; }
.prose h2 + p { margin-top: var(--s2); }
.prose code { font-family: var(--mono); font-size: 0.9em; background: var(--panel); padding: 0.1em 0.3em; }
.prose pre { font-family: var(--mono); background: var(--panel); padding: var(--s2); overflow-x: auto; }
.prose pre code { background: none; padding: 0; }
.prose table { border-collapse: collapse; width: 100%; max-width: var(--measure); font-size: var(--step-small); margin-top: var(--s2); }
.prose th, .prose td { text-align: left; padding: 6px 12px 6px 0; border-bottom: 1px solid var(--rule); }
.prose th { font-weight: 600; }
.prose td:not(:first-child), .prose th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }

/* inside pages */
.entry__logo {
  display: block;
  height: 34px; width: auto; max-width: 150px;
  margin-bottom: var(--s2);
  object-fit: contain; object-position: left center;
}
/* a wordmark reads larger than a mark at the same height, so it gets less */
.entry__logo--word { height: 20px; }
/* the single-colour marks take the page's ink */
.entry__logo--mark { height: 28px; color: var(--ink); }

/* open source: the project's own mark where one exists */
.oss { margin-top: var(--s2); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: center; }
.oss > li { display: flex; align-items: center; gap: var(--s1); font-size: var(--step-small); }
.oss__logo { height: 20px; width: auto; max-width: 70px; object-fit: contain; }

.page-title { font-size: var(--step-title); margin-bottom: var(--s2); }
.standfirst { color: var(--muted); margin-bottom: var(--s4); max-width: var(--measure); }

.ledger > li + li { margin-top: var(--s5); }
.entry__meta { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); align-items: baseline; margin-bottom: 2px; }
.entry__title { font-size: var(--step-lead); font-weight: 700; margin: 0; }
.me { color: var(--ink); font-weight: 600; }
.entry__when  { font-size: var(--step-small); color: var(--ink); font-variant-numeric: tabular-nums; }
.entry__role  { font-size: var(--step-small); color: var(--muted); }
.entry__body  { margin-top: var(--s1); }
.entry__body > p + p { margin-top: var(--s2); }
.entry__body b, .prose b, .tiles--hot dt { font-weight: 700; }
.entry__note  { margin-top: 2px; }
.entry__links { margin-top: var(--s1); font-size: var(--step-small); display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); }

.section { margin-top: var(--s6); }
.section__head { font-size: var(--step-mid); margin-bottom: var(--s2); }
.section__body > * + * { margin-top: var(--s2); }

.index > * + * { margin-top: var(--s3); }
.post__back { margin-top: var(--s5); font-size: var(--step-small); }

.rows > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2); align-items: baseline; padding-block: var(--s1); }
.rows > li + li { margin-top: var(--s1); }
.rows__when { font-size: var(--step-small); color: var(--muted); white-space: nowrap; }

/* the figures, in the warm panel his own site uses for them */
.tiles {
  margin: var(--s5) 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s2);
}
.tiles > div {
  background: var(--panel);
  padding: var(--s3) var(--s2);
}
.tiles--hot { background: var(--venue-bg) !important; }
.tiles dt {
  font-size: 1.5rem; font-weight: 700; line-height: 1.1;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.tiles--hot dt { color: var(--venue-fg); }
.tiles dd { margin: 2px 0 0; font-size: var(--step-small); color: var(--muted); line-height: 1.35; }

/* the venue of the published paper, in the pill his own site uses */
.badge {
  background: var(--ok-bg);
  color: var(--ok-fg) !important;
  border: 1px solid var(--ok-line); /* taste-skill-ignore: his own published pill, by request */
  border-radius: 999px;
  padding: 2px 12px;
  font-weight: 600;
}
.badge a { color: var(--ok-v); }

/* a figure from one of his papers */
.shot { margin: var(--s3) 0 0; }
.shot__zoom { display: block; text-decoration: none; }
.shot img { display: block; width: 100%; background: var(--fig-bg); padding: var(--s2);
  border: 1px solid var(--rule); /* taste-skill-ignore: his own note, the border makes the white read as a card */ }
.shot figcaption { margin-top: var(--s1); font-size: var(--step-small); color: var(--muted); }

/* footer */
.foot {
  margin-top: var(--s6);
  padding-top: var(--s3);
  border-top: 1px solid var(--rule); /* taste-skill-ignore: his own footer rule, by request */
  font-size: var(--step-small);
  color: var(--muted);
  display: flex; gap: var(--s2) var(--s3); flex-wrap: wrap; justify-content: space-between;
}
.foot__links { display: flex; flex-wrap: wrap; gap: var(--s3); }
.foot a { color: var(--muted); text-decoration-color: color-mix(in srgb, var(--muted) 35%, transparent); }
.foot a:hover { color: var(--accent); }

/* tap targets: 24px everywhere per WCAG 2.5.8, 44px on a touch screen.
   Links inside a sentence are exempt and left alone. */
.nav a, .nav button, .mast__links a, .foot__links a, .entry__links a, .oss a,
.rows a, .index a, .post__back a, .shot figcaption a {
  display: inline-flex; align-items: center; min-height: 24px;
}
@media (pointer: coarse) {
  .nav a, .nav button, .mast__links a, .foot__links a, .entry__links a, .oss a,
  .rows a, .index a, .post__back a, .shot figcaption a {
    min-height: 44px;
  }
  .entry__links { gap: var(--s1) var(--s3); }
}

/* entrances */
@media print {
  .rise, .parts > * { opacity: 1 !important; transform: none !important; }
  .nav, .themer, .skip { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .js .rise { opacity: 0; transform: translateY(10px); transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease); }
  .js .rise.is-in { opacity: 1; transform: none; }

  .js .parts { opacity: 1; transform: none; }
  .js .parts > * { opacity: 0; transform: translateY(10px); transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease); }
  .js .parts.is-in > * { opacity: 1; transform: none; }
  .js .parts.is-in > :nth-child(2) { transition-delay: 60ms; }
  .js .parts.is-in > :nth-child(3) { transition-delay: 120ms; }
  .js .parts.is-in > :nth-child(4) { transition-delay: 180ms; }
  .js .parts.is-in > :nth-child(5) { transition-delay: 240ms; }
  .js .parts.is-in > :nth-child(n+6) { transition-delay: 300ms; }

  .js .shot img { opacity: 0; transition: opacity 700ms var(--ease); }
  .js .shot img.is-ready { opacity: 1; }
}

/* desktop: the masthead becomes a column of its own, so the 960px frame
   carries something on both sides instead of leaving the window empty */
@media (min-width: 64rem) {
  .shell {
    width: min(100% - 4rem, 60rem);
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    column-gap: var(--s5);
    align-items: start;
    padding-block: var(--s6) var(--s4);
  }
  .mast { grid-column: 1; position: sticky; top: var(--s6); }
  .mast__name { font-size: 1.75rem; }
  main, .foot { grid-column: 2; }
  main { padding-top: 0; }
  .mast__top { display: block; }
  .photo { margin-bottom: var(--s3); }
  .mast__links { flex-direction: column; gap: var(--s1); }
  .nav {
    margin-top: var(--s3);
    padding-bottom: 0;
    border-bottom: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s1);
  }
  .themer { margin-left: 0; margin-top: var(--s2); }
  .foot { margin-top: var(--s6); }
}

/* phone */
@media (max-width: 34rem) {
  .shell { padding-block: var(--s4) var(--s3); }
  .mast__top { gap: var(--s2); }
  .photo { width: 88px; height: 88px; }
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .nav { margin-top: var(--s3); }
  .foot { flex-direction: column; gap: var(--s1); }
}