/* ==========================================================================
   climate.css  —  shared stylesheet for  https://caos.iisc.ac.in/climate/
   Every colour, size and font used on the site is a variable in :root below.
   Change a value there and it changes everywhere, on every page.
   ========================================================================== */

:root{
  /* --- colours: four greys and one accent, nothing else -------------------- */
  --paper:      #fbfaf7;   /* page background                                  */
  --paper-sunk: #f4f2ec;   /* figure wells, code, table stripes               */
  --ink:        #14171a;   /* body text                                        */
  --ink-soft:   #5a6169;   /* captions, metadata, inactive nav                 */
  --rule:       #e2dfd8;   /* hairlines                                        */
  --accent:     #1c5462;   /* links, active nav marker, header trace           */
  --accent-tint:#e8eef0;   /* active nav background                            */

  /* --- type ---------------------------------------------------------------- */
  --serif: "Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Nimbus Roman",serif;
  --sans:  ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:  ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --fs-body: 1.0625rem;    /* 17px  — prose size                              */
  --lh-body: 1.68;
  --measure: 40rem;        /* comfortable line length for full-width prose    */

  /* --- layout -------------------------------------------------------------- */
  --page-max: 1180px;      /* outer width of header + body                    */
  --head-h:   4rem;        /* height of the header row                        */
  --trace-h:  30px;        /* height of the line under it                     */
  --side-w:   13.5rem;     /* left panel width                                */
  --gap:      2.5rem;      /* gutter between text column and figure column    */
  --pad:      1.75rem;     /* page side padding                               */

  /* --- the text : figure split (see .split below) --------------------------
     Override per section with  style="--text:3fr; --fig:1fr"                 */
  --text: 2fr;
  --fig:  1fr;
}

/* --------------------------------------------------------------------------
   OPTIONAL dark mode. Delete this whole block if you never want it.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark){
  :root{
    --paper:#14171a; --paper-sunk:#1c2024; --ink:#e8e6e1; --ink-soft:#9aa1a8;
    --rule:#2c3238; --accent:#7fb6c4; --accent-tint:#1e2a2f;
  }
  figure img{ background:#fff; padding:.5rem; }  /* keep white-background plots legible */
}

/* ==========================================================================
   base
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:var(--fs-body)/var(--lh-body) var(--serif);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{ color:var(--accent); text-underline-offset:.16em; text-decoration-thickness:.06em; }
a:hover{ text-decoration-thickness:.12em; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }

h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; line-height:1.2; letter-spacing:-.012em; margin:0; }
h1{ font-size:2.1rem; }
h2{ font-size:1.5rem; }
h3{ font-size:1.15rem; }
h4{ font-size:1rem; }

p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }
ul,ol{ margin:0 0 1em; padding-left:1.2em; }
li{ margin-bottom:.35em; }
strong{ font-weight:600; }
code{ font:.88em var(--mono); background:var(--paper-sunk); padding:.1em .35em; border-radius:3px; }
hr{ border:0; border-top:1px solid var(--rule); margin:2.5rem 0; }

/* small letter-spaced label, used for eyebrows and section labels */
.label{
  font:600 .68rem/1 var(--sans);
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft);
}

.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:.5rem; top:.5rem; z-index:100; background:var(--paper);
  padding:.5rem .8rem; border:1px solid var(--rule); }

/* ==========================================================================
   masthead
   ========================================================================== */
.masthead{
  position:sticky; top:0; z-index:20;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
}
.masthead__row{
  max-width:var(--page-max); margin:0 auto; padding:0 var(--pad);
  min-height:var(--head-h);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.masthead__id{ display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap; }
.masthead__title{
  font:600 1.18rem/1 var(--serif); letter-spacing:.01em;
  color:var(--ink); text-decoration:none;
}
.masthead__who{ font:.8rem/1.3 var(--sans); color:var(--ink-soft); }
.masthead__who a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--rule); }
.masthead__who a:hover{ color:var(--accent); border-color:var(--accent); }

.masthead__links{ display:flex; gap:1.25rem; font:.82rem/1 var(--sans); }
.masthead__links a{ color:var(--ink-soft); text-decoration:none; padding:.35rem 0; }
.masthead__links a:hover{ color:var(--accent); }

/* the signature element: the rule under the masthead is a climate record,
   drawn as a mask so it always takes the accent colour. */
.masthead__trace{
  height:var(--trace-h); margin-top:-1px;
  background:var(--accent); opacity:.34;
  /* The line is the SVG path below, used as a mask so it always takes the
     accent colour. The identical path also sits in assets/trace.svg, which is
     the file to edit if you want a different series; paste the new path here,
     or once the site is on the server replace the two lines with
     url(trace.svg). It is inlined here so it also works when you open the
     files straight from disk, where browsers refuse to load a mask file. */
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%201200%2040%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20d=%22M0.0,28.6%20C2.2,28.0%209.0,26.6%2013.5,25.2%20C18.0,23.8%2022.5,20.5%2027.0,20.0%20C31.5,19.6%2036.0,21.3%2040.4,22.6%20C44.9,23.9%2049.4,27.2%2053.9,27.8%20C58.4,28.4%2062.9,27.0%2067.4,26.2%20C71.9,25.3%2076.4,24.1%2080.9,22.7%20C85.4,21.2%2089.9,17.4%2094.4,17.5%20C98.9,17.7%20103.4,21.8%20107.9,23.6%20C112.4,25.4%20116.9,28.4%20121.3,28.3%20C125.8,28.3%20130.3,24.6%20134.8,23.3%20C139.3,22.1%20143.8,22.2%20148.3,20.8%20C152.8,19.3%20157.3,15.9%20161.8,14.6%20C166.3,13.2%20170.8,12.3%20175.3,12.5%20C179.8,12.7%20184.3,14.6%20188.8,15.7%20C193.3,16.8%20197.8,19.9%20202.2,18.8%20C206.7,17.8%20211.2,10.0%20215.7,9.2%20C220.2,8.5%20224.7,12.6%20229.2,14.5%20C233.7,16.4%20238.2,18.5%20242.7,20.5%20C247.2,22.5%20251.7,25.6%20256.2,26.4%20C260.7,27.3%20265.2,25.8%20269.7,25.6%20C274.2,25.3%20278.7,24.7%20283.1,24.9%20C287.6,25.0%20292.1,26.2%20296.6,26.5%20C301.1,26.8%20305.6,26.8%20310.1,26.6%20C314.6,26.3%20319.1,25.9%20323.6,25.2%20C328.1,24.5%20332.6,23.6%20337.1,22.5%20C341.6,21.5%20346.1,19.3%20350.6,18.9%20C355.1,18.5%20359.6,18.3%20364.0,20.0%20C368.5,21.7%20373.0,28.3%20377.5,29.2%20C382.0,30.1%20386.5,24.9%20391.0,25.3%20C395.5,25.6%20400.0,30.5%20404.5,31.3%20C409.0,32.2%20413.5,29.7%20418.0,30.3%20C422.5,30.9%20427.0,34.7%20431.5,35.0%20C436.0,35.3%20440.4,32.4%20444.9,32.0%20C449.4,31.7%20453.9,33.5%20458.4,33.1%20C462.9,32.7%20467.4,32.7%20471.9,29.5%20C476.4,26.3%20480.9,16.0%20485.4,13.8%20C489.9,11.6%20494.4,16.4%20498.9,16.5%20C503.4,16.6%20507.9,13.6%20512.4,14.6%20C516.9,15.5%20521.3,20.8%20525.8,22.2%20C530.3,23.7%20534.8,23.7%20539.3,23.3%20C543.8,22.9%20548.3,20.4%20552.8,19.9%20C557.3,19.5%20561.8,20.8%20566.3,20.7%20C570.8,20.5%20575.3,19.4%20579.8,19.2%20C584.3,18.9%20588.8,18.4%20593.3,19.2%20C597.8,20.0%20602.2,23.7%20606.7,23.9%20C611.2,24.2%20615.7,20.7%20620.2,20.7%20C624.7,20.7%20629.2,25.1%20633.7,24.2%20C638.2,23.3%20642.7,16.3%20647.2,15.5%20C651.7,14.7%20656.2,19.0%20660.7,19.3%20C665.2,19.6%20669.7,17.2%20674.2,17.1%20C678.7,17.0%20683.1,18.7%20687.6,18.5%20C692.1,18.2%20696.6,15.3%20701.1,15.6%20C705.6,15.9%20710.1,20.0%20714.6,20.2%20C719.1,20.4%20723.6,17.0%20728.1,16.9%20C732.6,16.7%20737.1,19.6%20741.6,19.3%20C746.1,19.1%20750.6,16.0%20755.1,15.4%20C759.6,14.7%20764.0,15.0%20768.5,15.3%20C773.0,15.7%20777.5,16.2%20782.0,17.4%20C786.5,18.7%20791.0,22.4%20795.5,22.9%20C800.0,23.4%20804.5,20.9%20809.0,20.4%20C813.5,19.9%20818.0,20.9%20822.5,20.0%20C827.0,19.0%20831.5,14.8%20836.0,14.7%20C840.4,14.6%20844.9,18.8%20849.4,19.5%20C853.9,20.2%20858.4,19.1%20862.9,19.0%20C867.4,18.9%20871.9,18.7%20876.4,18.8%20C880.9,18.9%20885.4,19.3%20889.9,19.6%20C894.4,19.8%20898.9,20.2%20903.4,20.4%20C907.9,20.6%20912.4,20.3%20916.9,21.0%20C921.3,21.7%20925.8,23.4%20930.3,24.7%20C934.8,26.0%20939.3,28.2%20943.8,29.0%20C948.3,29.8%20952.8,30.0%20957.3,29.3%20C961.8,28.7%20966.3,27.1%20970.8,25.3%20C975.3,23.5%20979.8,20.1%20984.3,18.4%20C988.8,16.8%20993.3,16.5%20997.8,15.6%20C1002.2,14.7%201006.7,13.7%201011.2,13.1%20C1015.7,12.6%201020.2,12.6%201024.7,12.4%20C1029.2,12.2%201033.7,11.8%201038.2,12.1%20C1042.7,12.4%201047.2,13.9%201051.7,14.0%20C1056.2,14.1%201060.7,13.8%201065.2,12.8%20C1069.7,11.7%201074.2,7.6%201078.7,7.6%20C1083.1,7.6%201087.6,11.0%201092.1,12.7%20C1096.6,14.4%201101.1,18.3%201105.6,17.9%20C1110.1,17.5%201114.6,11.4%201119.1,10.5%20C1123.6,9.5%201128.1,12.3%201132.6,12.4%20C1137.1,12.4%201141.6,11.1%201146.1,10.7%20C1150.6,10.3%201155.1,8.8%201159.6,10.0%20C1164.0,11.2%201168.5,18.2%201173.0,18.0%20C1177.5,17.8%201182.0,11.0%201186.5,8.8%20C1191.0,6.7%201197.8,5.7%201200.0,5.1%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22/%3E%3C/svg%3E") center/100% 100% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%201200%2040%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20d=%22M0.0,28.6%20C2.2,28.0%209.0,26.6%2013.5,25.2%20C18.0,23.8%2022.5,20.5%2027.0,20.0%20C31.5,19.6%2036.0,21.3%2040.4,22.6%20C44.9,23.9%2049.4,27.2%2053.9,27.8%20C58.4,28.4%2062.9,27.0%2067.4,26.2%20C71.9,25.3%2076.4,24.1%2080.9,22.7%20C85.4,21.2%2089.9,17.4%2094.4,17.5%20C98.9,17.7%20103.4,21.8%20107.9,23.6%20C112.4,25.4%20116.9,28.4%20121.3,28.3%20C125.8,28.3%20130.3,24.6%20134.8,23.3%20C139.3,22.1%20143.8,22.2%20148.3,20.8%20C152.8,19.3%20157.3,15.9%20161.8,14.6%20C166.3,13.2%20170.8,12.3%20175.3,12.5%20C179.8,12.7%20184.3,14.6%20188.8,15.7%20C193.3,16.8%20197.8,19.9%20202.2,18.8%20C206.7,17.8%20211.2,10.0%20215.7,9.2%20C220.2,8.5%20224.7,12.6%20229.2,14.5%20C233.7,16.4%20238.2,18.5%20242.7,20.5%20C247.2,22.5%20251.7,25.6%20256.2,26.4%20C260.7,27.3%20265.2,25.8%20269.7,25.6%20C274.2,25.3%20278.7,24.7%20283.1,24.9%20C287.6,25.0%20292.1,26.2%20296.6,26.5%20C301.1,26.8%20305.6,26.8%20310.1,26.6%20C314.6,26.3%20319.1,25.9%20323.6,25.2%20C328.1,24.5%20332.6,23.6%20337.1,22.5%20C341.6,21.5%20346.1,19.3%20350.6,18.9%20C355.1,18.5%20359.6,18.3%20364.0,20.0%20C368.5,21.7%20373.0,28.3%20377.5,29.2%20C382.0,30.1%20386.5,24.9%20391.0,25.3%20C395.5,25.6%20400.0,30.5%20404.5,31.3%20C409.0,32.2%20413.5,29.7%20418.0,30.3%20C422.5,30.9%20427.0,34.7%20431.5,35.0%20C436.0,35.3%20440.4,32.4%20444.9,32.0%20C449.4,31.7%20453.9,33.5%20458.4,33.1%20C462.9,32.7%20467.4,32.7%20471.9,29.5%20C476.4,26.3%20480.9,16.0%20485.4,13.8%20C489.9,11.6%20494.4,16.4%20498.9,16.5%20C503.4,16.6%20507.9,13.6%20512.4,14.6%20C516.9,15.5%20521.3,20.8%20525.8,22.2%20C530.3,23.7%20534.8,23.7%20539.3,23.3%20C543.8,22.9%20548.3,20.4%20552.8,19.9%20C557.3,19.5%20561.8,20.8%20566.3,20.7%20C570.8,20.5%20575.3,19.4%20579.8,19.2%20C584.3,18.9%20588.8,18.4%20593.3,19.2%20C597.8,20.0%20602.2,23.7%20606.7,23.9%20C611.2,24.2%20615.7,20.7%20620.2,20.7%20C624.7,20.7%20629.2,25.1%20633.7,24.2%20C638.2,23.3%20642.7,16.3%20647.2,15.5%20C651.7,14.7%20656.2,19.0%20660.7,19.3%20C665.2,19.6%20669.7,17.2%20674.2,17.1%20C678.7,17.0%20683.1,18.7%20687.6,18.5%20C692.1,18.2%20696.6,15.3%20701.1,15.6%20C705.6,15.9%20710.1,20.0%20714.6,20.2%20C719.1,20.4%20723.6,17.0%20728.1,16.9%20C732.6,16.7%20737.1,19.6%20741.6,19.3%20C746.1,19.1%20750.6,16.0%20755.1,15.4%20C759.6,14.7%20764.0,15.0%20768.5,15.3%20C773.0,15.7%20777.5,16.2%20782.0,17.4%20C786.5,18.7%20791.0,22.4%20795.5,22.9%20C800.0,23.4%20804.5,20.9%20809.0,20.4%20C813.5,19.9%20818.0,20.9%20822.5,20.0%20C827.0,19.0%20831.5,14.8%20836.0,14.7%20C840.4,14.6%20844.9,18.8%20849.4,19.5%20C853.9,20.2%20858.4,19.1%20862.9,19.0%20C867.4,18.9%20871.9,18.7%20876.4,18.8%20C880.9,18.9%20885.4,19.3%20889.9,19.6%20C894.4,19.8%20898.9,20.2%20903.4,20.4%20C907.9,20.6%20912.4,20.3%20916.9,21.0%20C921.3,21.7%20925.8,23.4%20930.3,24.7%20C934.8,26.0%20939.3,28.2%20943.8,29.0%20C948.3,29.8%20952.8,30.0%20957.3,29.3%20C961.8,28.7%20966.3,27.1%20970.8,25.3%20C975.3,23.5%20979.8,20.1%20984.3,18.4%20C988.8,16.8%20993.3,16.5%20997.8,15.6%20C1002.2,14.7%201006.7,13.7%201011.2,13.1%20C1015.7,12.6%201020.2,12.6%201024.7,12.4%20C1029.2,12.2%201033.7,11.8%201038.2,12.1%20C1042.7,12.4%201047.2,13.9%201051.7,14.0%20C1056.2,14.1%201060.7,13.8%201065.2,12.8%20C1069.7,11.7%201074.2,7.6%201078.7,7.6%20C1083.1,7.6%201087.6,11.0%201092.1,12.7%20C1096.6,14.4%201101.1,18.3%201105.6,17.9%20C1110.1,17.5%201114.6,11.4%201119.1,10.5%20C1123.6,9.5%201128.1,12.3%201132.6,12.4%20C1137.1,12.4%201141.6,11.1%201146.1,10.7%20C1150.6,10.3%201155.1,8.8%201159.6,10.0%20C1164.0,11.2%201168.5,18.2%201173.0,18.0%20C1177.5,17.8%201182.0,11.0%201186.5,8.8%20C1191.0,6.7%201197.8,5.7%201200.0,5.1%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%221.6%22%20stroke-linecap=%22round%22/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
.masthead--plain .masthead__trace{ display:none; }   /* quiet header for detail pages */

/* ==========================================================================
   shell: left panel + content
   ========================================================================== */
.shell{
  max-width:var(--page-max); margin:0 auto; padding:0 var(--pad) 4rem;
  display:grid; grid-template-columns:var(--side-w) minmax(0,1fr); gap:var(--gap);
  align-items:start;
}
.shell--wide{ grid-template-columns:minmax(0,1fr); }   /* pages with no left panel */

/* --- left panel ----------------------------------------------------------- */
.side{
  position:sticky; top:calc(var(--head-h) + var(--trace-h) + 1.75rem);
  padding-top:2.75rem;
}
.side__head{ margin-bottom:.9rem; }
.side__nav{ list-style:none; margin:0 0 2rem; padding:0; border-left:1px solid var(--rule); }
.side__nav li{ margin:0; }
.side__nav a{
  display:flex; align-items:baseline; justify-content:space-between; gap:.5rem;
  padding:.5rem .75rem; margin-left:-1px;
  border-left:2px solid transparent;
  font:.92rem/1.35 var(--sans); color:var(--ink-soft); text-decoration:none;
}
.side__nav a:hover{ color:var(--ink); background:var(--paper-sunk); }
.side__nav a[aria-current="true"]{
  color:var(--accent); font-weight:600;
  border-left-color:var(--accent); background:var(--accent-tint);
}
/* marks a link that leaves this page */
.side__nav a[data-away]::after{ content:"\2197"; font:.75rem var(--mono); opacity:.55; }

.side__note{ font:.78rem/1.5 var(--sans); color:var(--ink-soft); }

/* ==========================================================================
   sections
   ========================================================================== */
.topic{ padding:2.75rem 0; border-bottom:1px solid var(--rule);
  scroll-margin-top:calc(var(--head-h) + var(--trace-h) + 1.5rem); }
.topic:first-child{ padding-top:2.75rem; }
.topic:last-of-type{ border-bottom:0; }
.topic__head{ margin-bottom:1.4rem; }
.topic__head .label{ display:block; margin-bottom:.5rem; }
.topic__more{
  display:inline-block; margin-top:1.1rem;
  font:.85rem/1 var(--sans); text-decoration:none;
  border-bottom:1px solid currentColor; padding-bottom:.15rem;
}

/* the page intro that sits above the first topic */
.intro{ padding:2.75rem 0 0; }
.intro p{ font-size:1.15rem; line-height:1.6; max-width:38rem; color:var(--ink-soft); }

/* ==========================================================================
   THE FLEXIBLE TEXT / FIGURE GRID
   --------------------------------------------------------------------------
   <div class="split">            text 2fr | figure 1fr        (default)
   <div class="split" style="--text:3fr;--fig:2fr">  any ratio you like
   <div class="split fig-left">   figure on the left instead
   <div class="split stack">      text full width, figure full width below
   ...and if there is no <figure> inside, the text fills the row on its own.
   ========================================================================== */
.split{
  display:grid; gap:var(--gap);
  grid-template-columns:var(--text) var(--fig);
  align-items:start;
}
.split.fig-left{ grid-template-columns:var(--fig) var(--text); }
.split.fig-left > figure{ order:-1; }
.split.stack{ grid-template-columns:minmax(0,1fr); gap:1.75rem; }
.split:not(:has(figure)){ grid-template-columns:minmax(0,1fr); }
/* Text with no figure beside it is held to --measure so the lines stay
   readable. Add the class "wide" to let it run the full width instead. */
.split:not(:has(figure)) .prose{ max-width:var(--measure); }

.prose{ min-width:0; }
.prose > :first-child{ margin-top:0; }
.prose h3{ margin:1.8rem 0 .6rem; }
.prose blockquote{
  margin:1.5rem 0; padding:.2rem 0 .2rem 1.1rem;
  border-left:2px solid var(--rule); color:var(--ink-soft); font-style:italic;
}

/* --- figures -------------------------------------------------------------- */
figure{ margin:0; min-width:0; }
figure img, figure svg, figure video{
  display:block; width:100%; height:auto;
  background:var(--paper-sunk); border:1px solid var(--rule); border-radius:2px;
}
/* shown by site.js when an image file cannot be found */
.img-missing{
  margin-top:.5rem; padding:.6rem .7rem;
  border:1px dashed var(--rule); border-radius:2px;
  font:.75rem/1.5 var(--mono); color:var(--ink-soft); word-break:break-all;
}

figcaption{
  margin-top:.6rem;
  font:.8rem/1.5 var(--sans); color:var(--ink-soft);
}
figcaption b, figcaption strong{ color:var(--ink); font-weight:600; }

/* ==========================================================================
   references
   ========================================================================== */
.refs{ padding:2.75rem 0 0; scroll-margin-top:calc(var(--head-h) + var(--trace-h) + 1.5rem); }
.refs .label{ display:block; margin-bottom:1rem; }
.ref-list{ list-style:none; margin:0; padding:0; max-width:46rem; counter-reset:ref; }
.ref-list li{
  position:relative; counter-increment:ref;
  padding-left:2.4rem; margin-bottom:.8rem;
  font-size:.92rem; line-height:1.55; color:var(--ink-soft);
}
.ref-list li::before{
  content:"[" counter(ref) "]";
  position:absolute; left:0; top:0;
  font:.8rem/1.7 var(--mono); color:var(--ink-soft);
}
.ref-list a{ color:var(--accent); }
/* in-text citation marker: <a class="cite" href="#r3">3</a> */
.cite{ font:.78em var(--mono); text-decoration:none; vertical-align:.28em; margin-left:.1em; }
.cite::before{ content:"["; } .cite::after{ content:"]"; }

/* ==========================================================================
   article pages (topics/…, tools/…)
   ========================================================================== */
.article{ max-width:52rem; padding:3rem 0 0; }
.article__head{ margin-bottom:2.5rem; }
.article__head .label{ display:block; margin-bottom:.7rem; }
.article__head h1{ margin-bottom:.7rem; }
.article__lede{ font-size:1.15rem; line-height:1.6; color:var(--ink-soft); max-width:38rem; }
.article__meta{ margin-top:1.1rem; font:.78rem/1 var(--mono); color:var(--ink-soft); }
.article section{ margin-bottom:2.5rem; }
.article section > h2{ margin-bottom:.85rem; }
.article .prose{ max-width:var(--measure); }
.article > .refs{ border-top:1px solid var(--rule); margin-top:3rem; }
.back{ font:.85rem/1 var(--sans); text-decoration:none; }
.back::before{ content:"\2190"; margin-right:.4em; }

/* full width text, when you want it: <div class="split wide"> */
.split.wide > .prose{ max-width:none; }

/* ==========================================================================
   footer
   ========================================================================== */
.foot{
  border-top:1px solid var(--rule); margin-top:2rem;
  padding:1.5rem var(--pad) 3rem;
  max-width:var(--page-max); margin-inline:auto;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font:.78rem/1.6 var(--sans); color:var(--ink-soft);
}
.foot a{ color:inherit; }

/* ==========================================================================
   responsive — one breakpoint, left panel becomes a scrolling strip
   ========================================================================== */
@media (max-width:860px){
  :root{ --gap:1.75rem; --pad:1.25rem; --head-h:3.4rem; }
  .masthead__row{ flex-wrap:nowrap; gap:1rem; }
  .masthead__who{ display:none; }          /* the affiliation is in the footer */
  .masthead__links{ overflow-x:auto; scrollbar-width:none; }
  .masthead__links::-webkit-scrollbar{ display:none; }
  .shell{ grid-template-columns:minmax(0,1fr); gap:0; }
  .topic,.refs{ scroll-margin-top:calc(var(--head-h) + var(--trace-h) + 3.2rem); }
  .side{
    position:sticky; top:calc(var(--head-h) + var(--trace-h)); z-index:10;
    padding:.5rem 0; margin:0 calc(var(--pad)*-1);
    background:var(--paper); border-bottom:1px solid var(--rule);
  }
  .side__head,.side__note{ display:none; }
  .side__nav{
    display:flex; gap:.25rem; margin:0; border-left:0;
    overflow-x:auto; scrollbar-width:none; padding:0 var(--pad);
    -webkit-mask:linear-gradient(90deg,#000 calc(100% - 2rem),transparent);
            mask:linear-gradient(90deg,#000 calc(100% - 2rem),transparent);
  }
  .side__nav::-webkit-scrollbar{ display:none; }
  .side__nav a{
    white-space:nowrap; border-left:0; border-bottom:2px solid transparent;
    margin:0; padding:.5rem .6rem; border-radius:0;
  }
  .side__nav a[aria-current="true"]{ border-left:0; border-bottom-color:var(--accent); background:none; }
  .split,.split.fig-left{ grid-template-columns:minmax(0,1fr); gap:1.5rem; }
  .split.fig-left > figure{ order:0; }
  h1{ font-size:1.7rem; } h2{ font-size:1.3rem; }
  .masthead__links{ gap:.9rem; font-size:.78rem; }
}

/* ==========================================================================
   print
   ========================================================================== */
@media print{
  :root{ --paper:#fff; --ink:#000; --ink-soft:#333; --accent:#000; }
  .masthead{ position:static; border-bottom:1px solid #000; }
  .masthead__trace,.side,.foot,.masthead__links{ display:none; }
  .shell{ display:block; max-width:none; padding:0; }
  .split{ gap:1.2rem; }
  a{ text-decoration:none; }
  .topic{ break-inside:avoid; }
}