/* alexbronstein.org — one stylesheet for the whole site.
   Derived from the CSS of "I Choose, Therefore I Am" (v1.3) and
   "The Money-Making Black Box" (v1.6). Sidenotes use the classic Tufte
   float layout: no JavaScript is needed to read anything. */

@font-face{font-family:"et-book";src:url("/assets/fonts/et-book/et-book-roman.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"et-book";src:url("/assets/fonts/et-book/et-book-italic.woff") format("woff");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"et-book";src:url("/assets/fonts/et-book/et-book-bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}

:root{
  --paper:#fffff8; --ink:#111; --muted:#5b5b55; --accent:#7a1f1f; --rule:#d8d6cc;
  --link:#5b1a1a; --note-bg:#f4f2e8; --note-ink:#33332f;
  --serif:"et-book","Palatino Linotype","Book Antiqua",Palatino,"Iowan Old Style",Baskerville,Georgia,serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --measure:55%; --gutter:12.5%;
}
*{box-sizing:border-box}
html{font-size:16px;background:var(--paper);color:var(--ink);-webkit-text-size-adjust:100%;font-size-adjust:from-font}
body{margin:0;padding:0 0 6rem;background:var(--paper);font-family:var(--serif);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* ---- site line and footer --------------------------------------------- */
.site{padding:1.6rem 0 0 var(--gutter);max-width:1400px;font-size:.92rem;color:var(--muted)}
.site .wordmark{font-variant:small-caps;letter-spacing:.12em;font-size:1rem;color:var(--ink);border:0;margin-right:1.6rem}
.site nav a{display:inline-block;margin-right:1.15rem;border:0;color:var(--muted)}
.site nav a:hover,.site nav a[aria-current]{color:var(--accent)}
.site nav a[aria-current]{border-bottom:1px solid var(--accent)}
footer.site{margin-top:5rem;padding-top:1.2rem;border-top:1px solid var(--rule);width:calc(var(--measure) + var(--gutter));
  margin-left:0;padding-left:var(--gutter);font-size:.88rem;line-height:1.5}
footer.site p{width:100%;font-size:inherit;line-height:inherit;margin:.3rem 0;text-align:left}

/* ---- article geometry --------------------------------------------------- */
article{padding:3.5rem 0 0 var(--gutter);max-width:1400px;position:relative}
header.piece{margin-bottom:3.5rem}
h1,h2,h3{font-weight:400;line-height:1.12}
h1{font-size:3.6rem;margin:0 0 .4rem;letter-spacing:-.025em;max-width:70%}
.subtitle{font-size:1.6rem;font-style:italic;margin:.2rem 0 1.1rem;max-width:var(--measure)}
.byline{font-size:1.05rem;color:var(--muted);margin-top:1.5rem}
.version-label,.dateline{font-size:.86rem;color:var(--muted);margin-top:.35rem;letter-spacing:.02em}
.kicker{font-variant:small-caps;letter-spacing:.12em;font-size:.78rem;color:var(--muted);margin-bottom:1rem}
.kicker a{border:0;color:inherit}
h2{font-size:2rem;margin:4rem 0 1.3rem;max-width:var(--measure)}
h3{font-size:1.35rem;margin:2.4rem 0 .9rem;max-width:var(--measure);font-style:italic}
p,li{font-size:1.3rem;line-height:1.62}
p{width:var(--measure);margin:1.25rem 0;text-align:justify;text-justify:inter-word;hyphens:auto}
ul,ol{width:var(--measure);padding-left:1.6rem;margin:1.25rem 0}
li{margin:.5rem 0;text-align:justify;hyphens:auto}
li p{width:100%;margin:.3rem 0}
a{color:var(--link);text-decoration:none;border-bottom:1px dotted #9d7777}
a:hover{border-bottom-style:solid}
em{font-style:italic} strong{font-weight:700}
.newthought{font-variant:small-caps;font-size:1.14em;letter-spacing:.035em}
hr{border:0;border-top:1px solid var(--rule);width:var(--measure);margin:3.5rem 0}
blockquote{width:50%;margin:1.8rem 0 1.8rem 2.5%}
blockquote p{width:100%;font-size:1.4rem;line-height:1.45;font-style:italic}
.epigraph{margin:2.2rem 0 2.4rem 12%;width:43%}
.epigraph blockquote{margin:0 0 .5rem;width:100%;font-style:italic}
.epigraph p{width:100%;font-size:1.08rem;line-height:1.5;margin:.6rem 0;text-align:left;hyphens:none}
.epigraph p.lines{line-height:1.45}
.epigraph footer{text-align:right;color:var(--muted);font-size:.95rem;font-style:normal}
.display-claim{width:52%;margin:1.8rem 0 2rem 2%;font-style:italic;font-size:1.35rem;line-height:1.45}
.fullwidth{width:90%;clear:both}
code,pre{font-family:var(--mono);font-size:.86em}
figure{margin:2rem 0;width:var(--measure)}
figure img{max-width:100%;display:block}
figcaption{font-size:.95rem;color:var(--muted);margin-top:.5rem;line-height:1.4}
img{max-width:100%}

/* ---- sidenotes (float layout, no script) -------------------------------- */
.sidenote-ref{font-size:.68rem;line-height:1;vertical-align:super;position:relative;top:-.12rem;margin-left:.08rem;font-weight:400}
.sidenote-ref a{color:var(--accent);border:0}
.sidenote-ref a:hover{border-bottom:1px dotted var(--accent)}
.sidenote-index{color:var(--accent);font-size:.82em;font-variant-numeric:tabular-nums}
.sidenote,.marginnote{float:right;clear:right;margin-right:-62%;width:50%;margin-top:.25rem;margin-bottom:1rem;
  font-size:.93rem;line-height:1.42;color:var(--note-ink);text-align:justify;text-justify:inter-word;hyphens:auto;position:relative}
.marginnote{font-style:italic}
.sidenote p,.marginnote p{width:100%;font-size:inherit;line-height:inherit;margin:.55rem 0;text-align:justify}
.margin-toggle,.sidenote-number{display:none}
/* Sidenotes inside 52%-wide lists need a slightly different offset. */
li .sidenote,li .marginnote{margin-right:calc(-62% - 1rem);width:calc(50% + .8rem)}

/* ---- mathematics (static MathML) ---------------------------------------- */
.math{width:var(--measure);overflow-x:auto;margin:1.1rem 0;text-align:left}
.math-static-inline{display:inline;white-space:nowrap}
.math-static-inline math{vertical-align:-0.08em}
.math-static-block{display:block;width:100%;margin:.55rem 0;text-align:left;overflow-x:auto}
.math-static-block math{display:block;text-align:left}
.sidenote .math,.sidenote .math-static-inline,.sidenote .math-static-block{width:100%;font-size:.96em}
math[display="inline"]{white-space:nowrap}

/* ---- references --------------------------------------------------------- */
.refs{width:var(--measure)}
.refs p{width:100%;font-size:1.02rem;line-height:1.42;margin:.8rem 0;padding-left:2rem;text-indent:-2rem;text-align:left;hyphens:none}

/* ---- verse and parallel text -------------------------------------------- */
.verse{width:50%;margin:1.6rem 0 1.6rem 2.5%;font-size:1.25rem;line-height:1.5;font-style:italic;white-space:pre-line}
.verse .orig{font-style:normal}
.parallel{display:grid;grid-template-columns:1fr 1fr;gap:1rem 2rem;width:var(--measure);margin:1.6rem 0}
.parallel > div{font-size:1rem;line-height:1.5rem;white-space:pre-line;hyphens:none}
.parallel .trans{font-style:italic}
.parallel .head{font-size:.95rem;color:var(--muted);white-space:normal;margin-bottom:.4rem;font-style:normal}

/* ---- play script -------------------------------------------------------- */
.speaker{font-variant:small-caps;letter-spacing:.06em}
.stage{font-style:italic;color:var(--muted)}

/* ---- video (click to load; degrades to a link) -------------------------- */
figure.video{width:var(--measure)}
figure.video.margin,figure.margin{float:right;clear:right;width:27.5%;margin:.3rem 12% 1.2rem 0}
figure.margin figcaption{font-size:.9rem;line-height:1.4}
figure.video.margin figcaption{font-size:.9rem}
.poster{position:relative;display:block;border:0;aspect-ratio:16/9;background:#000;overflow:hidden}
.poster img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92}
.poster .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:4.2rem;height:4.2rem;border-radius:50%;
  background:rgba(122,31,31,.92);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.6rem;padding-left:.3rem}
.poster:hover .play{background:var(--accent)}
.video iframe{width:100%;aspect-ratio:16/9;border:0;display:block}

/* ---- index pages -------------------------------------------------------- */
.intro{font-size:1.3rem}
h2.theme{font-size:1.15rem;font-variant:small-caps;letter-spacing:.1em;font-weight:400;color:var(--muted);margin:3rem 0 .6rem;border-bottom:1px solid var(--rule);padding-bottom:.3rem}
ul.index{list-style:none;margin:0;padding:0;width:var(--measure)}
ul.index li{padding:.9rem 0;border-bottom:1px solid var(--rule);margin:0;font-size:1.2rem;line-height:1.45}
ul.index li:last-child{border-bottom:0}
ul.index .title{font-size:1.32rem}
ul.index .title a{border:0}
ul.index .title a:hover{border-bottom:1px dotted #9d7777}
ul.index .deck{display:block;color:var(--muted);font-style:italic;font-size:1.08rem;margin-top:.15rem}
ul.index .meta{display:block;font-size:.85rem;color:var(--muted);letter-spacing:.03em;margin-top:.3rem;font-variant-numeric:tabular-nums}
ul.index .lang{font-variant:small-caps;letter-spacing:.08em;font-size:.85rem;color:var(--muted);margin-left:.6rem}
.langs{font-size:.95rem;color:var(--muted);margin-top:.4rem}
.langs a{margin-left:.3rem}
.langs a[aria-current]{border:0;color:var(--ink)}

a.pdf{font-variant:small-caps;letter-spacing:.06em;font-size:.85em;color:var(--muted);border-bottom:1px dotted var(--rule);margin-left:.35em}
a.pdf:hover{color:var(--accent)}

figure.covers{display:flex;flex-wrap:wrap;gap:.8rem;align-items:flex-start;width:var(--measure)}
figure.covers img{height:9rem;width:auto;flex:0 0 auto}
figure.covers figcaption{flex-basis:100%}

p.elsewhere{font-size:1.02rem;color:var(--muted);text-align:left;margin-top:-.4rem}
p.elsewhere a{color:var(--link)}

/* ---- tables -------------------------------------------------------------- */
table{border-collapse:collapse;font-size:1rem;line-height:1.4;margin:1.4rem 0;width:var(--measure)}
table.fullwidth{width:90%}
th,td{text-align:left;vertical-align:top;padding:.45rem .7rem .45rem 0;border-bottom:1px solid var(--rule)}
th{font-weight:400;font-variant:small-caps;letter-spacing:.06em;color:var(--muted);border-bottom:1px solid var(--ink)}

/* ---- stub notice (development only) -------------------------------------- */
.stub{width:var(--measure);margin:2rem 0;padding:.9rem 1.2rem;border-left:3px solid var(--accent);background:var(--note-bg);font-size:1rem;line-height:1.5;color:var(--note-ink)}
.stub p{width:100%;font-size:inherit;line-height:inherit;margin:.3rem 0;text-align:left}

/* ---- end-of-piece footer ------------------------------------------------- */
footer.end{width:var(--measure);margin-top:4rem;padding-top:1.2rem;border-top:1px solid var(--rule);color:var(--muted);font-size:.92rem;line-height:1.5}
footer.end p{width:100%;font-size:inherit;line-height:inherit;margin:.3rem 0;text-align:left}


/* ---- counted sidenotes (Tufte-CSS markup: label.sidenote-number + span.sidenote) ---- */
.counted{counter-reset:sidenote-counter}
.counted .sidenote-number{display:inline;counter-increment:sidenote-counter}
.counted .sidenote-number:after{content:counter(sidenote-counter);font-size:.68rem;vertical-align:super;position:relative;top:-.12rem;margin-left:.08rem;color:var(--accent)}
.counted .sidenote:before{content:counter(sidenote-counter) ". ";color:var(--accent);font-size:.82em;font-variant-numeric:tabular-nums}
.sidenote img{max-width:100%;display:block;margin:.5rem 0}

/* ---- essay front matter and components (from The Money-Making Black Box) ---- */
figure.vignette{width:var(--measure);margin:1.6rem 0 0}
.abstract{width:var(--measure);font-size:1.22rem;line-height:1.7;font-style:italic;color:#222;border-bottom:1px solid var(--rule);padding:0 0 1.3rem;margin:1.6rem 0 0}
.badge{display:inline-flex;align-items:center;justify-content:center;width:1.35rem;height:1.35rem;border-radius:50%;color:#fff;font-weight:700;
  font-family:Arial,Helvetica,sans-serif;font-size:.85rem;line-height:1;vertical-align:middle;box-shadow:0 1px 2px rgba(0,0,0,.18)}
.badge.g{background:#1a7f37}.badge.y{background:#bf8a00}.badge.r{background:#b3261e}
p.iconed{position:relative}
p.iconed .cbadge{position:absolute;left:-2.4rem;top:.45rem}
sup.nsep{font-size:.8rem;vertical-align:super;line-height:1}
.pull{width:var(--measure);border-left:4px solid #222;padding:.15rem 0 .15rem 1.3rem;margin:2.2rem 0}
.pull .q{font-size:1.55rem;line-height:1.42;font-weight:600;color:#111;font-style:normal;width:100%;text-align:left}
.pull.g{border-left-color:#1a7f37}.pull.y{border-left-color:#bf8a00}.pull.r{border-left-color:#b3261e}
.disclaimer{width:var(--measure);font-size:1.02rem;line-height:1.5;color:var(--muted);font-style:italic;text-align:left}
.poem{margin:3rem 0}
.poem h2{margin-top:3rem;margin-bottom:.2rem;font-size:1.6rem}
.poem .byline{margin-top:.2rem;margin-bottom:1rem}
.talk{margin:3rem 0}
.talk h2{margin-bottom:.4rem}
.links{font-size:1rem;color:var(--muted)}

/* ---- narrow screens ------------------------------------------------------ */
@media (max-width:1000px){
  :root{--gutter:6%}
  article{padding:2.5rem 6% 0}
  .site{padding:1.2rem 6% 0}
  footer.site{width:100%;padding:1.2rem 6% 0}
  h1{font-size:2.6rem;max-width:100%}
  p.elsewhere,p,h2,h3,.subtitle,hr,footer.end,.display-claim,.math,.refs,figure,figure.video,figure.vignette,.abstract,.pull,.disclaimer,ul.index,table,.stub,.verse,.intro{width:100%;max-width:100%}
  .epigraph{width:88%;margin-left:12%}
  p.iconed{padding-left:2rem}
  p.iconed .cbadge{left:0}
  blockquote{width:92%}
  ul,ol{width:100%}
  .parallel{grid-template-columns:1fr;width:100%}
  .sidenote,.marginnote,li .sidenote,li .marginnote,figure.video.margin,figure.margin{display:block;float:none;clear:both;width:100%;margin:.8rem 0 1.15rem;
    padding:.75rem 1rem .8rem;background:var(--note-bg);border-left:2px solid var(--rule);font-size:1rem;line-height:1.46}
  figure.video.margin,figure.margin{padding:0;background:none;border:0}
}
@media (max-width:600px){
  html{font-size:15px}
  h1{font-size:2.2rem}
  p,li{font-size:1.15rem}
  p{text-align:left}
}

/* ---- print --------------------------------------------------------------- */
@page{size:A4;margin:16mm 14mm}
@media print{
  html,body{background:#fff}
  .site,footer.site,.stub,.poster .play{display:none}
  article{padding:0}
  p,h2,h3,.subtitle,.epigraph,hr,footer.end,.math,.refs,figure{width:66%}
  .sidenote,.marginnote{margin-right:-49%;width:42%;font-size:8.5pt}
  a{color:#000;border:0}
}