/* ===========================================================================
   elfayad.me article sheet: essays and project case studies. Loaded only on
   those pages.

   Essays are set in Source Serif, a face drawn for long reading: the body
   is where a reader spends minutes, so it gets the type built for it, a
   column a little narrower than the sans one, and a touch more leading.
   Headings stay in Bricolage, quieter on phones. The page opens on a deep
   cover with the title, the summary and the reading time, and a feature
   image reaches up into it. Case studies are read the same way, so they set
   the same way; only the end mark belongs to essays alone.
   =========================================================================== */

@font-face{font-family:"Source Serif";src:url(/assets/fonts/source-serif-4-normal-sub.woff2?v=1e1a36f1) format('woff2');
  font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif";src:url(/assets/fonts/source-serif-4-italic-sub.woff2?v=f044ed80) format('woff2');
  font-weight:400;font-style:italic;font-display:swap}

/* ---------- the article cover ---------- */
.article .cover h1{max-width:13.3em}   /* was 20ch: em is the same in the web font and its fallback, ch is not */
.article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-5);margin-top:var(--s-6);font-size:var(--t-150);color:var(--on-navy-3)}
.draft-flag{margin-bottom:var(--s-4);font-size:var(--t-100);color:var(--bright-2)}
.draft-flag a{color:var(--on-navy)}
.article-figure img{width:100%;border-radius:var(--r-1)}
.article-essay .article-figure img{border:1px solid var(--deep-line)}

/* ---------- contents: folded away until wanted ---------- */
.toc{max-width:var(--measure-read);margin-bottom:var(--s-7);border-block:1px solid var(--line)}
.toc summary{display:flex;justify-content:space-between;align-items:center;gap:var(--s-4);
  padding-block:var(--s-4);cursor:pointer;list-style:none;font-weight:600;color:var(--ink)}
.toc summary::-webkit-details-marker{display:none}
.toc summary .n{font-weight:400;color:var(--muted)}
.toc summary::after{content:"+";font-family:var(--display);font-size:var(--t-400);line-height:1;color:var(--accent)}
.toc[open] summary::after{content:"\2212"}
.toc ol{list-style:none;padding:0 0 var(--s-4);display:grid;gap:var(--s-2);counter-reset:toc}
.toc li{counter-increment:toc;display:grid;grid-template-columns:var(--s-6) minmax(0,1fr)}
.toc li::before{content:counter(toc);color:var(--accent);font-variant-numeric:tabular-nums}
.toc a{color:var(--ink)}
.toc a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* ---------- contents beside the essay, on wide screens ----------
   The reading column stops at 62ch, so on a wide screen the right side is free.
   The contents move there and stay in view, and the section being read is
   marked (site.js). Below 1200px the folded contents above the essay remain. */
.toc-rail{display:none}
@media(min-width:1200px){
  .read-grid{display:grid;grid-template-columns:minmax(0,1fr) var(--toc-w);gap:var(--s-8);align-items:start}
  .article:has(.toc-rail) .toc{display:none}
  .toc-rail{display:block;position:sticky;top:var(--stick-top);padding-left:var(--s-5);border-left:1px solid var(--line)}
  .toc-rail p{font-size:var(--t-100);font-weight:600;color:var(--muted);margin-bottom:var(--s-3)}
  .toc-rail ol{list-style:none;padding:0;display:grid;gap:var(--s-2);counter-reset:toc}
  .toc-rail li{counter-increment:toc;display:grid;grid-template-columns:var(--s-5) minmax(0,1fr);font-size:var(--t-100);line-height:var(--lh-normal)}
  .toc-rail li::before{content:counter(toc);color:var(--muted);font-variant-numeric:tabular-nums}
  .toc-rail a{color:var(--sub)}
  .toc-rail a:hover{color:var(--accent)}
  .toc-rail a[aria-current=true]{color:var(--accent);font-weight:600}
}

/* ---------- the essay body ---------- */
.article .prose{font-family:var(--serif);font-size:var(--t-read);line-height:var(--lh-read);max-width:var(--measure-read);
  font-variant-numeric:oldstyle-nums;hanging-punctuation:first}
.article .prose h2{font-size:var(--t-h2read);line-height:var(--lh-snug);margin-top:var(--s-9);max-width:14.6em}
/* a sub-head sits above the body it introduces, never below it */
.article .prose h3{font-family:var(--display);font-size:var(--t-h3read);font-weight:600;line-height:var(--lh-snug);letter-spacing:var(--ls-snug);margin-top:var(--s-7)}
.article .prose h2+*,.article .prose h3+*{margin-top:var(--s-4)}
.article .prose blockquote{margin-inline:0;padding-left:var(--s-5);border-left:2px solid var(--bright-1);
  font-style:italic;font-size:var(--t-400);line-height:var(--lh-snug);color:var(--ink)}
/* a pull quote: a line of the essay's own, set between two sections and a size up.
   (A blockquote just before the sources is a note, like a disclaimer, and stays at the quotation size.) */
.article-essay .prose blockquote:has(+h2:not(#sources)){font-size:var(--t-500);max-width:30ch;margin-block:var(--s-7)}
.article .prose code{font-family:var(--mono);font-size:var(--t-150);background:var(--soft);border-radius:var(--r-1);padding-inline:var(--s-1)}
.article .prose pre{font-family:var(--mono);background:var(--soft);border-radius:var(--r-1);padding:var(--s-5);
  overflow-x:auto;font-size:var(--t-150);line-height:var(--lh-code)}
/* a code block wider than the column fades at its right edge until it is scrolled to the end (site.js) */
.article .prose pre.runs-on{-webkit-mask-image:var(--mask-fade-r);mask-image:var(--mask-fade-r)}
.article .prose pre code{background:none;padding:0}
.article .prose table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:var(--t-200);display:block;overflow-x:auto}
.article .prose th,.article .prose td{border-bottom:1px solid var(--line);padding:var(--s-2) var(--s-3);text-align:left;vertical-align:top}
.article .prose thead th{font-weight:700;color:var(--ink);background:var(--paper-2)}
.article .prose hr{border:0;border-top:1px solid var(--line);margin-block:var(--s-8)}
/* key points: a short summary at the head of a long essay, on the tint */
.article-essay .prose>p:first-child:has(>strong:only-child){padding:var(--s-5) var(--s-5) 0;background:var(--paper-2);
  border-radius:var(--r-1) var(--r-1) 0 0;font-family:var(--sans);font-size:var(--t-200)}
.article-essay .prose>p:first-child:has(>strong:only-child)+ul{margin-top:0;padding:var(--s-3) var(--s-5) var(--s-5) var(--s-7);
  background:var(--paper-2);border-radius:0 0 var(--r-1) var(--r-1);font-family:var(--sans);font-size:var(--t-250);line-height:var(--lh-prose)}
/* the sources close the essay in the interface face, smaller: reference, not reading */
.article .prose #sources~*{font-family:var(--sans);font-size:var(--t-200);line-height:var(--lh-prose)}
/* essays close on the mark */
.article-essay .prose>p:last-of-type::after{content:"";display:inline-block;width:var(--end-mark);height:var(--end-mark);
  margin-left:var(--s-2);vertical-align:-2px;background:url(/assets/mark-ink.svg) center/contain no-repeat}
/* heads of 30px and over set tight, as display type (at phone sizes they keep the looser leading) */
@media(min-width:900px){.article .prose h2{line-height:var(--lh-head)}}
@media(max-width:640px){
  /* a narrow column rags badly on long words: let the browser hyphenate */
  .article .prose p,.article .prose li{hyphens:auto;-webkit-hyphens:auto}
  /* pictures run edge to edge on a phone */
  .article-essay .article-figure img{width:calc(100% + var(--gutter) * 2);max-width:none;
    margin-inline:calc(var(--gutter) * -1);border-radius:0;border:0}
  .article-essay .prose figure>:first-child{margin-inline:calc(var(--gutter) * -1);border-radius:0}
  .article .prose pre{margin-inline:calc(var(--gutter) * -1);border-radius:0}
}

/* ---------- figures: one treatment in essays and case studies ----------
   Every picture in an article is a figure: mounted on the deep mat (the
   evidence ground), with its caption under it in the interface face, smaller,
   so it reads as a caption and not as prose. A screenshot links to itself, so
   dense interface text can be opened at full size and zoomed. */
.article .prose figure{margin-inline:0}
.article .prose figure>:first-child{display:block;background:var(--deep);padding:var(--mat);border-radius:var(--r-2)}
.article .prose figure img{width:100%;border:0;border-radius:var(--r-1)}
.article .prose figure>a{text-decoration:none;cursor:zoom-in}
.article .prose figure.fig-tall{width:auto}
.article .prose figure.fig-tall>:first-child{width:fit-content;max-width:100%}
.article .prose figure.fig-tall img{width:var(--phone-shot);max-width:100%}
.article .prose figcaption{margin-top:var(--s-3);font-family:var(--sans);font-size:var(--t-200);line-height:var(--lh-prose);color:var(--sub)}

/* ---------- project case studies ---------- */
/* a case study's figures take the full width of the page, so a dashboard can be read */
.article-project .shell{container-type:inline-size}
.article-project .prose figure{width:100cqw;max-width:none}
.article-project .prose em{font-style:italic}

/* ---------- the close: byline, then the neighbours ---------- */
.article-foot{max-width:var(--measure-read);margin-top:var(--s-8);padding-top:var(--s-6);border-top:1px solid var(--line)}
.article-foot .lede{margin-top:0}
.byline{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-1) var(--s-4);align-items:center}
.byline p{grid-column:1 / -1;color:var(--muted);line-height:var(--lh-prose);margin-top:var(--s-2)}
.byline b{font-family:var(--display);font-weight:600;font-size:var(--t-300);color:var(--ink)}
.byline-face{width:var(--s-8);height:var(--s-8);border-radius:50%;object-fit:cover;object-position:50% 36%}
.adjacent{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5);margin-top:var(--s-7);border-top:1px solid var(--line)}
.adjacent a{display:block;padding-top:var(--s-4)}
.adjacent span{display:block;font-size:var(--t-100);color:var(--muted);margin-bottom:var(--s-1)}
.adjacent b{font-family:var(--display);font-weight:600;color:var(--ink);font-size:var(--t-300);line-height:var(--lh-snug)}
.adjacent a:hover b{color:var(--accent)}
.adjacent .next{text-align:right}
/* a case study ends on its neighbours, shown and not only named, then room before the closing band */
.article-foot:not(:has(.byline)){border-top:0;padding:0 0 var(--s-9)}
.adj-thumb{display:block;max-width:var(--adj-w);aspect-ratio:16/10;overflow:hidden;background:var(--deep);
  padding:var(--s-2);border-radius:var(--r-1);margin-bottom:var(--s-3)}
.adj-thumb img{width:100%;height:100%;object-fit:cover;object-position:top center;border-radius:var(--r-1)}
.adjacent .next .adj-thumb{margin-left:auto}
.adjacent a:hover .adj-thumb{outline:2px solid var(--bright-1);outline-offset:0}
/* two more on the same topic, before the neighbours in time */
.more-topic{margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid var(--line)}
.more-topic p{font-size:var(--t-100);font-weight:600;color:var(--muted)}
.more-topic p a{color:var(--accent)}
.more-topic ul{list-style:none;padding:0;margin-top:var(--s-3);display:grid;gap:var(--s-3)}
.more-topic li a{font-family:var(--display);font-weight:600;font-size:var(--t-300);line-height:var(--lh-snug);color:var(--ink)}
.more-topic li a:hover{color:var(--accent)}
.more-topic li span{margin-left:var(--s-2);font-size:var(--t-100);color:var(--muted);white-space:nowrap}
@media(max-width:640px){.adjacent{grid-template-columns:1fr}.adjacent .next{text-align:left}.adjacent .next .adj-thumb{margin-left:0}}