/* ==========================================================================
   style.css — michaellevitin.net
   --------------------------------------------------------------------------
   A streamlined replacement for style.css. Same palette, same typefaces,
   same metrics (800 = 550 + 40 + 210) — but grid instead of floats, one rule
   per job, and no duplicated blocks (#left / #wideleft are now one thing).

   Contents
     1. Design tokens
     2. Base
     3. Masthead, address, menu
     4. Contact bar and banner strips
     5. Two-column layout
     6. Left-column content
     7. Right-column boxes
     8. Publications list
     9. Gallery
    10. Footer
    11. Responsive
    12. Print
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   All taken from your current style.css. Every colour and measurement below
   comes from here — the rest of the file contains no literal colour.
   ========================================================================== */

:root {
  /* --- Colours ----------------------------------------------------------- */
  --ink:          #000;      /* body default                                 */
  --text:         #555;      /* column prose, masthead, strips               */
  --text-muted:   #777;      /* footer                                       */
  --text-faint:   #888;      /* address block                                */
  --heading:      #999;      /* left-column headings                         */
  --link:         #0066b3;
  --rule:         #bbb;      /* heading underline, box borders               */
  --rule-dotted:  #e5e5e5;   /* the rounded dotted outlines                  */
  --rule-faint:   #f0f0f0;
  --paper:        #fff;
  --wash:         #f5f5f5;   /* right-hand boxes, abstract panels            */
  --sidebar-head: #a1a1a1;   /* right-column heading bar                     */
  --banner-book:  #b1e7e7;
  --banner-event: #66e0ff;

  /* --- Type -------------------------------------------------------------- */
  --font-body:    Verdana, Arial, sans-serif;
  --font-display: Arial, Helvetica, sans-serif;

  /* --- Measurements ------------------------------------------------------
     --page never changes, whatever the columns do. */
  --page:         800px;
  --aside:        210px;   /* right column; override per page                */
  --gutter:       40px;    /* 800 = 550 + 40 + 210                           */
  --radius:       15px;
}


/* ==========================================================================
   2. BASE
   ========================================================================== */

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

body {
  margin: 0;
  background: var(--paper) url(images/topbg.jpg) repeat-x top;
  font: 0.8em/1.4 var(--font-body);
  color: var(--ink);
}

img { max-width: 100%; height: auto; border: 0; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

h1, h2, h3 { font-family: var(--font-display); font-weight: bold; margin: 0; }
h1 { font-size: 1.9em; }
h2, h3 { font-size: 1.2em; }

p { margin: 0 0 1em; }

/* The one width-limiting container. Exactly 800px on a wide screen; shrinks
   with a 10px margin either side on a narrow one. */
.wrap {
  width: min(var(--page), 100% - 20px);
  margin-inline: auto;
}


/* ==========================================================================
   3. MASTHEAD, ADDRESS, MENU
   ========================================================================== */

.masthead .wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  height: 80px;   /* 80 + 31 = 111, the height of topbg.jpg */
}

.site-title {
  margin: 0;
  padding-top: 35px;
  font-size: 1.8em;
  line-height: 1.15;
  color: var(--text);
}
.site-title a { color: inherit; }
.site-title a:hover { text-decoration: none; }

.site-sub {
  margin: 0;
  padding-top: 5px;
  font: bold 1.2em/1.15 var(--font-display);
  color: var(--text);
}

.address {
  list-style: none;
  margin: 0;
  padding: 20px 20px 0 0;
  text-align: right;
  font-family: var(--font-display);
  font-weight: bold;
  color: var(--text-faint);
}
.address a { color: var(--text); }

/* --- Menu ----------------------------------------------------------------
   Keeps your sliding-door tab images. To drop the two gifs, delete the two
   background declarations and give .topmenu a a fill and a border-radius
   instead — the markup doesn't change either way. */
.topmenu ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-start;   /* not "stretch": a stretched tab grows taller
                                than menul_a.gif and its bottom edge frays */
  list-style: none;
  margin: 0;
  padding: 0;
  height: 31px;
}
.topmenu li {
  height: 30px;              /* exactly the height of the tab images */
  font-size: 10px;
  line-height: 30px;
  white-space: nowrap;
  padding-right: 2px;
  background: url(images/menul_a.gif) top left no-repeat;
}
.topmenu a {
  display: block;
  height: 30px;
  line-height: 30px;
  margin-left: 9px;
  padding-right: 10px;
  font-size: 1.1em;
  color: var(--paper);
  background: url(images/menur_a.gif) top right no-repeat;
}
.topmenu a:hover { color: var(--text); text-decoration: underline; }

/* Set by include.js, so the menu markup stays identical on every page. */
.topmenu [aria-current="page"] {
  font-weight: bold;
  color: var(--text);
  text-decoration: none;
}


/* ==========================================================================
   4. CONTACT BAR AND BANNER STRIPS
   One shared .strip rule; the variants only change the fill. This is where
   #advert, #advertini and #advertmama used to be three near-identical
   copies of the same twelve declarations.
   ========================================================================== */

.strip {
  border: 2px dotted var(--rule-dotted);
  border-radius: var(--radius);
  text-align: center;
  color: var(--text);
  margin-bottom: 10px;
}

.contactbar {
  height: 28px;
  line-height: 28px;
  font-size: 0.8em;
  margin-top: 5px;
}

.banner {
  height: 36px;
  line-height: 36px;
  font-weight: bold;
}
.banner-book  { background: var(--banner-book); }
.banner-event { background: var(--banner-event); }
.banner-ini   { background: url(images/INIfig37bg.jpg) fixed; }


/* ==========================================================================
   5. TWO-COLUMN LAYOUT
   --------------------------------------------------------------------------
   Default:            <div class="layout wrap">
   Narrower right:     <div class="layout wrap" style="--aside: 150px">
   No right column:    <div class="layout wrap full">

   --page is untouched in all three cases, so the masthead, menu and left
   text edge line up across every page.
   ========================================================================== */

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--aside);
  column-gap: var(--gutter);
  align-items: start;
}

.layout.full {
  --aside: 0px;
  --gutter: 0px;
  grid-template-columns: minmax(0, 1fr);
}
.layout.full > .side { display: none; }


/* ==========================================================================
   6. LEFT-COLUMN CONTENT
   ========================================================================== */

.main { color: var(--text); }
.main p { text-align: justify; margin: 7px 0; }

.main h2 {
  color: var(--heading);
  line-height: 20px;
  margin: 1.5em 0 8px;
  border-bottom: 1px solid var(--rule);
}
.main > h2:first-child { margin-top: 0; }

.main h3 {
  color: var(--heading);
  line-height: 20px;
  margin: 1.2em 0 6px;
}

.main ul { margin: 7px 0; padding: 0; }
.main li { list-style-type: square; margin-left: 15px; }

/* The big heading at the top of a page. Styled as the old #left h1: larger
   than a section heading, and without the rule. */
.main .page-title {
  font-size: 1.9em;
  line-height: 1.2;
  color: var(--text);
  border-bottom: 0;
  margin: 0 0 0.6em;
}

/* A section heading that doesn't want its rule. */
.main .no-rule { border-bottom: 0; }

/* Small icon in front of a link. Replaces the old float, which needed a
   clearfix after every list. */
.icon { vertical-align: -3px; margin-right: 5px; }

/* Roomier list spacing, as .deep did. */
.deep > li { margin-bottom: 6px; }

/* Two blocks side by side — a pair of lists with their own headings. For a
   single list that should flow across two balanced columns, use .cols-2. */
.two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 20px;
}

hr.thick { border-top-width: 5px; border-top-color: var(--heading); }

.centre { text-align: center; }

video, iframe { display: block; max-width: 100%; border: 0; }
video { margin: 20px 0; }

/* Picture floated at the start of a passage of text. */
.inlineimage {
  float: left;
  margin: 0 10px 3px 0;
  padding: 1px;
  border: 1px solid var(--wash);
  background: var(--paper);
}

/* Hanging indent, as .indp did. */
.hang { padding-left: 14px; text-indent: -14px; }

.small { font-size: 0.75em; }
.names { font-variant: small-caps; font-size: 1.1em; }


/* ==========================================================================
   7. BOXES
   --------------------------------------------------------------------------
   Originally a right-column-only thing. Now unscoped, so the same framed box
   works at the foot of a full-width page (research.html) as well as in a
   sidebar (index.html).
   ========================================================================== */

.box {
  margin: 0 0 1em;
  padding: 0 0 10px;
  background: var(--wash) url(images/rbot.jpg) no-repeat bottom center;
}
.box h2 {
  font-size: 0.9em;
  line-height: 20px;
  padding-left: 8px;
  margin-bottom: 5px;
  color: var(--paper);
  border-bottom: 1px solid var(--rule-faint);
  background: var(--sidebar-head) url(images/rh2.jpg) no-repeat top center;
}
.box ul { margin: 0; padding-left: 5px; }
.box li { list-style-type: square; margin-left: 10px; margin-bottom: 4px; }

.side .badge { display: block; margin-bottom: 1em; }

/* --- Multi-column list ---------------------------------------------------
   For a long list in a wide sidebar. The browser balances the columns for
   you, so an odd number of entries splits n, n-1 automatically and you never
   maintain the split by hand:

     <ul class="cols-2">    exactly two columns
     <ul class="cols-fit">   as many columns of ~180px as the width allows,
                             so a full-width page gets four and a phone one

   Either way the browser balances the columns, so an odd number of entries
   splits n, n-1 on its own and there is no break to maintain by hand. */
.cols-2,
.cols-fit { column-gap: 20px; }
.cols-2   { columns: 2; }
.cols-fit { columns: 180px; }

.cols-2 > li,
.cols-fit > li {
  break-inside: avoid;      /* an entry never splits across the column break */
  -webkit-column-break-inside: avoid;
}

/* Date or sub-label under a sidebar link. */
.when { display: block; color: var(--text); font-size: 0.9em; }


/* ==========================================================================
   8. PUBLICATIONS LIST
   --------------------------------------------------------------------------
   Two kinds of entry share these rules: <article class="paper"> and
   <div class="book"> (which adds a cover image beside the text). Each is up
   to four blocks, one per line, none indented, in this order:

     .head       authors, then <br>, then the title in italic
     .abstract   the drop-down, whose link sits flush right on the title line
     .biblio     journal, volume, pages, year
     .resources  pdf / scripts / doi links

   The order matters for one thing only: the Abstract link is pulled up onto
   the last line of whatever block precedes it. Keep .abstract straight after
   .head and it lands on the title line.

   .head and .abstract carry styling; .pub and .biblio are hooks with no
   declarations of their own — .biblio takes its margin and alignment from the
   generic "p" rule below, and .pub exists so the title can be addressed
   without touching the authors. Nothing is missing.

   TO RUN THE AUTHORS AND THE TITLE TOGETHER ON ONE LINE, add class "joined"
   to <main> for the whole page, or to a single entry:

       <main class="main joined">

   That is the only change needed — see the .joined rule at the end of this
   section. The space between them comes from the newline already in the
   markup, so nothing else has to be edited.
   ========================================================================== */

.paper,
.book {
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
  scroll-margin-top: 10px;
}
.paper:target { background: var(--wash); }

/* Books put a cover in a first column; the four blocks go in the second. */
.book {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.book img { border: 1px solid var(--wash); padding: 1px; }

/* No indent on any block, and no gap between them: consecutive lines. */
.paper p,
.book p { margin: 0; text-align: left; }

/* Room at the right for the Abstract link, so a long title can't run under it. */
.paper .head,
.book .head { padding-right: 6em; }

.paper .resources,
.book .resources { font-size: 0.9em; }
.paper .resources img,
.book .resources img { vertical-align: -3px; margin-right: 2px; }

/* The abstract drop-down.
   The summary is pulled up by exactly one line-height, so it lands on the
   last line of the preceding block and, when closed, adds no height of its
   own. Keep it at the inherited font size or that arithmetic stops working. */
.paper .abstract,
.book .abstract { margin: 0; }

.paper .abstract > summary,
.book .abstract > summary {
  margin-top: -1.4em;
  text-align: right;
  white-space: nowrap;
  cursor: pointer;
  color: var(--link);
  list-style: none;
}
.paper .abstract > summary::-webkit-details-marker,
.book .abstract > summary::-webkit-details-marker { display: none; }
.paper .abstract > summary::before,
.book .abstract > summary::before { content: "\25BC\00a0"; }
.paper .abstract[open] > summary::before,
.book .abstract[open] > summary::before { content: "\25B2\00a0"; }
.paper .abstract > summary:hover,
.book .abstract > summary:hover { text-decoration: underline; }

.paper .abstract > p,
.book .abstract > p {
  margin: 3px 0;
  padding: 5px;
  text-align: justify;
  font-size: 0.9em;
  color: var(--text);
  background: var(--wash);
  border: 1px solid var(--rule);
}

/* The one-line switch described above. */
.joined .paper .head br,
.joined .book .head br,
.paper.joined .head br,
.book.joined .head br { display: none; }

/* Definition list, as used for the teaching materials. */
.main dl { margin: 7px 0; }
.main dt { margin-top: 10px; }
.main dd { margin: 0; padding: 2px 0; border-bottom: 1px solid var(--rule); }


/* ==========================================================================
   9. GALLERY
   --------------------------------------------------------------------------
   Replaces WOW Slider. The slides are stacked in one grid cell and
   cross-fade, so the frame takes the height of the tallest image and you
   never have to declare a size or regenerate anything. It is a plain list
   in the HTML, so with JavaScript off every image still shows.
   ========================================================================== */

.gallery {
  clear: both;          /* never rides up beside the floated portrait */
  margin: 10px 0 1em;
}

/* arrow | picture | arrow, side by side: the arrows sit outside the frame
   rather than on top of it */
.gallery .frame {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.gallery .slides { list-style: none; margin: 0; padding: 0; }
.gallery .slides > li { margin-left: 0; list-style: none; }

.gallery.is-carousel .viewport {
  position: relative;
  /* --gallery-width is measured from the images themselves by gallery.js,
     so the frame is exactly the picture's own size — no guessing, no gap. */
  width: var(--gallery-width, 100%);
  max-width: 100%;
  border: 1px solid var(--rule);
  background: var(--paper);
}
.gallery.is-carousel .slides { display: grid; }
.gallery.is-carousel .slides > li {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease;
}
.gallery.is-carousel .slides > li.is-current { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) {
  .gallery.is-carousel .slides > li { transition: none; }
}
.gallery.is-carousel .slides img {
  display: block;
  width: 100%;             /* = the measured natural width set above */
  height: auto;
}
.gallery.is-carousel .slide-caption { display: none; }

.gallery .arrow {
  flex: 0 0 auto;
  width: 22px;
  height: 44px;
  padding: 0;
  cursor: pointer;
  font: 16px/1 var(--font-display);
  color: var(--text);
  background: var(--wash);
  border: 1px solid var(--rule-dotted);
}
.gallery .arrow:hover { background: var(--sidebar-head); color: var(--paper); }

/* Caption sits over the foot of the picture, left-aligned, the way the old
   slider did it. To put it back underneath instead, delete this rule and the
   two lines marked "overlay" in gallery.js.

   The two variables below are the whole look of the caption band:
     --caption-ink   text colour
     --caption-bg    band behind it. transparent lets the picture show through;
                     for a solid band use var(--paper), and for the darker
                     original, color-mix(in srgb, var(--ink) 55%, transparent). */
.gallery.is-carousel .caption {
  --caption-ink: var(--link);
  --caption-bg: white;

  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  margin: 0;
  padding: 5px 10px;
  text-align: left;
  font-size: 0.9em;
  color: var(--caption-ink);
  background: var(--caption-bg);
}

/* Round dots. gallery.js still puts the slide number inside each button and
   labels it "Image n of m", so nothing changes for a screen reader — the digit
   is simply pushed out of the visible box. Change --dot-size to resize them. */
.gallery .dots {
  --dot-size: 9px;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  list-style: none;
  margin: 7px 0 0;
  padding: 0;
}
.gallery .dots li { margin: 0; list-style: none; }

.gallery .dots button {
  width: var(--dot-size);
  height: var(--dot-size);
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--rule);

  /* Hide the digit. text-indent rather than font-size:0, because browsers
     with a minimum-font-size setting ignore the latter and draw it anyway. */
  overflow: hidden;
  text-indent: 200%;
  white-space: nowrap;
}
.gallery .dots button:hover { border-color: var(--link); }
.gallery .dots button[aria-current="true"] {
  background: var(--link);
  border-color: var(--link);
}

/* Shown once, under the whole gallery, rather than repeated in every caption. */
.gallery .gallery-note {
  margin: 4px 0 0;
  font-size: 0.9em;
  color: var(--text);
  text-align: center;
}

/* Before the script runs, or if it never does. */
.gallery:not(.is-carousel) .slides > li { margin-bottom: 10px; }
.gallery:not(.is-carousel) .slide-caption {
  display: block;
  font-size: 0.9em;
  color: var(--text);
}
.gallery:not(.is-carousel) .arrow,
.gallery:not(.is-carousel) .dots { display: none; }


/* ==========================================================================
   10. FOOTER
   ========================================================================== */

.site-footer {
  clear: both;
  margin-top: 2em;
  border-top: 2px dotted var(--rule-dotted);
  color: var(--text-muted);
  font-size: 0.8em;
}
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 20px;
  padding: 6px 0 20px;
}
.site-footer p { margin: 0; }
.site-footer .right { text-align: right; }


/* ==========================================================================
   11. RESPONSIVE
   The old stylesheet was fixed at 800px. One breakpoint makes the site
   usable on a phone; nothing above this line had to change for it.
   ========================================================================== */

@media (max-width: 820px) {
  .layout {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 20px;
  }
  .layout > .side { border-top: 1px solid var(--rule); padding-top: 10px; }

  .masthead .wrap { flex-direction: column; height: auto; }
  .site-title { padding-top: 15px; }
  .address { padding: 8px 0 0; text-align: left; }
  .topmenu ul { justify-content: flex-start; height: auto; }

  .contactbar, .banner { height: auto; line-height: 1.4; padding: 6px 8px; }
  .book { grid-template-columns: 70px minmax(0, 1fr); }
  .cols-2 { columns: 1; }
  .two-col { grid-template-columns: minmax(0, 1fr); }
  .main p, .paper .ref, .paper details p { text-align: left; }
}


/* ==========================================================================
   12. PRINT
   ========================================================================== */

@media print {
  body { background: none; color: #000; }
  .topmenu, .side, .gallery .arrow, .gallery .dots { display: none; }
  .layout { grid-template-columns: 1fr; }
  a { color: #000; text-decoration: underline; }
}