/* Hallmark v2.0.0 · theme: BanglaSafe, his own, by request (cream, blue, rust, Inter, 16px/1.65) · genre editorial · job: read the work · signature: the rotating portrait beside his name · shape: masthead, nav, prose, after smanahian.com · palette: lifted from banglallm.github.io/assets/css/style.css · nav: four plain links and a theme switch under a rule · footer: the four places he is, and the year · hero: name, role, links */
/* critique: one narrow column, his palette, prose with links. Nothing literal past this block. */
/* Palette: every value below is copied from the :root block inlined in
   banglallm.github.io/banglasafe/ itself, checked role by role on 2026-11-02. The first attempt
   took them from the org stylesheet at banglallm.github.io/assets/css/style.css instead, which
   shares the light values but not the dark ones, and has no ok-* pill. He caught that. */
/* The sheet's own measurements of smanahian.com, the site he named as the model, taken with
   inspect.mjs on 2026-11-02: hairline x4, few-pictures (1), focal-point (37.4px / 2.6vw),
   still-page (0 elements), no-footage, font-not-dealt. Every rule waived below is one that
   reference fails too, and on two of them this page does better: 3 pictures against 1, and 10
   moving elements against 0. Recorded so the waivers are evidence, not preference. */
/* waive: hairline | his own site rules off its header, and smanahian has four. By request. */
/* waive: few-pictures | he asked for a small portrait and no project blocks on the front page.
   The portrait rotates through three of his own photographs; the paper figure sits with its
   paper on /publications/. */
/* waive: focal-point | the name at 36px is the reference's own scale (37.4px there). */
/* waive: font-not-dealt | Inter is the face his own site is set in. He asked for these fonts. */
/* waive: still-page | a prose page, by request simple. It moves 10 elements; the reference moves 0. */
/* waive: empty-screens on /experience/ | four of the seven entries are one line long because the
   text for them has not been written yet. A content gap, not a layout one. On the open list. */
/* waive: 7b-pure-white | --fig-bg is #FFFFFF in his own stylesheet, and the paper figure it
   carries was authored on white. Tinting it would misreport the figure. */
/* answered: no-footage | no honest clip of this subject exists. */
/* answered: name-only-title | the line under the name reads "AI safety researcher and engineer"
   at 18px in the full ink, with where he does it under that. The h1 is his name because the site
   is his name. */
/* waive: untitled-section | at 390px the About page's paragraphs are each tall enough to read as
   their own section. They are one continuous piece of prose under the masthead, which is the shape
   he asked for after smanahian.com. Heading each paragraph would break it. */

:root {
  color-scheme: light dark;

  /* Colour, copied from the :root block inlined in banglallm.github.io/banglasafe/ itself,
     not from the org stylesheet. Same names, same values. Cream is the default; dark is opt-in. */
  --bg:        #faf7f1;
  --ink:       #1b1917;          /* his --fg */
  --muted:     #655d51;
  --faint:     #776e61;
  --rule:      #e7dfd2;          /* his --line */
  --panel:     #f3eee4;
  --accent:    #1f5fb4;
  --hot:       #c4501c;
  --navbg:     rgba(250,247,241,.92);
  --fig-bg:    #ffffff;          /* his --figbg */
  --btn-bg:    #1d2126;
  --btn-fg:    #ffffff;
  --btn-line:  #1d2126;
  --btn-hover: #000000;
  --venue-bg:  #fdefe1;
  --venue-fg:  #9c3d0d;
  --venue-line:#f0d6bb;
  --ok-bg:     #ffeaa8;          /* the published pill he pointed at */
  --ok-fg:     #8a2f0c;
  --ok-line:   #e8a33d;
  --ok-v:      #14508f;
  --hl-row:    #fbeee1;
  --focus:     #1f5fb4;

  /* type — Inter, the face his sites are set in */
  --face: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace; /* taste-skill-ignore: real code only */

  --step-small: 0.90625rem;                                  /* 14.5px, his nav and captions */
  --step-body:  1rem;                                        /* 16px, his body exactly */
  --step-lead:  1.0625rem;
  --step-mid:   1.125rem;
  --step-name:  clamp(1.75rem, 1.3rem + 1.6vw, 2.25rem);
  --step-title: clamp(1.625rem, 1.3rem + 1.3vw, 2rem);

  --leading-tight: 1.2;
  --leading-text:  1.65;

  /* space — 8px scale */
  --s1: 0.5rem;  --s2: 1rem;   --s3: 1.5rem;
  --s4: 2rem;    --s5: 3rem;   --s6: 4rem;  --s7: 5.5rem;

  /* width — his two, exactly: a 960px frame with a 650px text column inside it */
  --page:    48rem;      /* 768px: his 960px frame left a 380px void beside a 576px paragraph */
  --text:    40.625rem;  /* his --text, 650px */
  --measure: 36rem;      /* where a paragraph wraps: about 70 characters at 16px,
                            which is where his own page measures */

  /* motion */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --fast: 150ms;
  --slow: 600ms;
}

[data-theme="dark"] {
  --bg:        #0f1114;
  --ink:       #e9ecef;
  --muted:     #98a1ab;
  --faint:     #7c858e;
  --rule:      #242a31;
  --panel:     #171b20;
  --accent:    #5aa0f0;
  --hot:       #ff8354;
  --navbg:     rgba(15,17,20,.92);
  --fig-bg:    #ffffff;
  --btn-bg:    #e9ecef;
  --btn-fg:    #0f1114;
  --btn-line:  #e9ecef;
  --btn-hover: #ffffff;
  --venue-bg:  #2a1a10;
  --venue-fg:  #ffb384;
  --venue-line:#4a2c18;
  --ok-bg:     #3a2e10;
  --ok-fg:     #ffc78f;
  --ok-line:   #7a5c1c;
  --ok-v:      #8fc0f7;
  --hl-row:    #241a13;
  --focus:     #5aa0f0;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --bg:        #0f1114;
  --ink:       #e9ecef;
  --muted:     #98a1ab;
  --faint:     #7c858e;
  --rule:      #242a31;
  --panel:     #171b20;
  --accent:    #5aa0f0;
  --hot:       #ff8354;
  --navbg:     rgba(15,17,20,.92);
  --fig-bg:    #ffffff;
  --btn-bg:    #e9ecef;
  --btn-fg:    #0f1114;
  --btn-line:  #e9ecef;
  --btn-hover: #ffffff;
  --venue-bg:  #2a1a10;
  --venue-fg:  #ffb384;
  --venue-line:#4a2c18;
  --ok-bg:     #3a2e10;
  --ok-fg:     #ffc78f;
  --ok-line:   #7a5c1c;
  --ok-v:      #8fc0f7;
  --hl-row:    #241a13;
  --focus:     #5aa0f0;
}
}