/* Sabragen. One scrolling homepage plus three reading pages.
   The bottle art is a large, cropped detail behind the hero; everything below it is plain. */

:root {
  --ink:        #2f2f2f;
  --ink-soft:   #5c5c58;
  /* darkened from #87877f: at 0.76-0.9rem the old value was 3.3:1 against the paper and failed
     WCAG AA for small text. This is 4.7:1. */
  --ink-faint:  #6e6e66;
  --accent:     rgb(115, 115, 0);
  --accent-dk:  rgb(85, 85, 0);
  --paper:      #f7f5ec;
  --paper-2:    #fcfbf5;
  --rule:       rgba(0, 0, 0, 0.14);
  --radius:     10px;
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.07);
  --measure:    70ch;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Arial, Helvetica, "Helvetica Neue", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

a { color: var(--accent-dk); }
a:hover { color: var(--accent); }

img { max-width: 100%; }

h1, h2, h3, h4 { text-wrap: balance; }

/* The sticky header is about 3rem tall, so anchored sections have to stop below it. */
[id] { scroll-margin-top: 4.5rem; }

:focus-visible {
  outline: 2px solid var(--accent-dk);
  outline-offset: 2px;
  border-radius: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--paper-2);
  border: 1px solid var(--rule);
}

.skip-link:focus { left: 0.5rem; top: 0.5rem; }

/* ---------- sticky nav ---------- */

#nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.25rem 1.4rem;
  padding: 0.6rem clamp(1rem, 4vw, 2.5rem);
  background: rgba(247, 245, 236, 0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--rule);
}

#nav .wordmark {
  font-size: 1.15rem;
  font-weight: bold;
  letter-spacing: 0.02em;
  color: var(--accent-dk);
  text-decoration: none;
  margin-right: auto;
}

#nav a.navlink {
  font-size: 0.88rem;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
}

#nav a.navlink:hover { color: var(--accent-dk); text-decoration: underline; }

/* ---------- hero ----------
   The art is the bottle illustration pushed off to the left so that the subject of the crop
   is the spray, not the bottle: the whole arc is on screen, from the neck up over the top of
   the hero and down the right edge. What is left of the bottle (the shoulder and the neck)
   is faded out by a diagonal in the mask, so it reads as a ghost behind the text instead of
   as a block of green competing with the headline. #hero-scrim lays paper back over the left
   side so the text always sits on a plain background. */

#hero {
  position: relative;
  overflow: hidden;
  padding: clamp(2.5rem, 7vh, 5rem) 0 clamp(2.75rem, 7vh, 5.5rem);
  border-bottom: 1px solid var(--rule);
}

#hero-art,
#hero-scrim {
  position: absolute;
  pointer-events: none;
}

/* The illustration is sized to the height of the art box and pinned to its right edge. Sizing
   to the height rather than to a percentage of the width is what keeps the bottom edge of the
   illustration off the bottom edge of the box at every window width; a width percentage that
   fills the box at 1440px leaves a hard horizontal cut across the art at 1100px.
   The box spans the whole hero, so the bottle is never cropped out of the frame: it runs down
   and to the left underneath the text, and the mask is what keeps it quiet there rather than a
   crop. At a desktop window the image works out to about 73% of the hero width, which puts the
   whole spray (image x 45-100%) clear of the text and the whole bottle under it.
   Three mask layers are intersected. The first is the one that does the work over the text: it
   holds a low floor across the left 44% of the hero so the bottle is always faintly there, then
   ramps to full by 66%, past the longest line. **It never reaches zero.** The second feathers
   the bottom crop edge. The third is the diagonal that fades the glass: it runs bottom-left to
   top-right, which is the axis the bottle lies on, so it leaves the spray alone and takes about
   a quarter off the bottle. Raise the first layer's floor to bring the bottle forward under the
   text, lower it to push it back, but do not take it to transparent. */
#hero-art {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  /* WebP is 393 KB against the PNG's 1.4 MB and pixel-for-pixel equivalent over this
     background. The plain url() stays first so anything without image-set() keeps the PNG. */
  background-image: url('images/bottle.png');
  background-image: image-set(url('images/bottle.webp') type('image/webp'),
                              url('images/bottle.png')  type('image/png'));
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: 100% 0%;
  opacity: 0.9;
  /* 1 holds the bottle at a floor under the text and ramps to full past it, 2 feathers the
     bottom crop edge, 3 is the transparency over the glass. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 20%, rgba(0, 0, 0, 0.28) 38%,
                              rgba(0, 0, 0, 0.28) 48%, rgba(0, 0, 0, 0.55) 57%, #000 66%),
    linear-gradient(to bottom, #000 90%, transparent 100%),
    linear-gradient(to top right, rgba(0, 0, 0, 0.74) 8%, rgba(0, 0, 0, 0.85) 36%, #000 62%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 20%, rgba(0, 0, 0, 0.28) 38%,
                              rgba(0, 0, 0, 0.28) 48%, rgba(0, 0, 0, 0.55) 57%, #000 66%),
    linear-gradient(to bottom, #000 90%, transparent 100%),
    linear-gradient(to top right, rgba(0, 0, 0, 0.74) 8%, rgba(0, 0, 0, 0.85) 36%, #000 62%);
  mask-composite: intersect;
  z-index: 0;
}

/* A veil over the text side rather than a wall of paper: it has to take the art down far
   enough to read over, and no further, because the bottle is meant to show through it. It is
   also the backstop on a browser without mask-image, which is why it is a gradient and not a
   flat tint. */
#hero-scrim {
  inset: 0;
  background: linear-gradient(to right,
      rgba(247, 245, 236, 0.35) 0%,
      rgba(247, 245, 236, 0.3) 44%,
      rgba(247, 245, 236, 0.12) 56%,
      rgba(247, 245, 236, 0) 66%);
  z-index: 1;
}

#cork {
  position: absolute;
  top: 1.5rem;
  right: clamp(1rem, 5vw, 4rem);
  width: clamp(44px, 5vw, 72px);
  aspect-ratio: 154 / 146;
  z-index: 2;
}

#cork-inner {
  width: 100%;
  height: 100%;
  background-image: url('images/cork.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  filter: drop-shadow(3px 3px 5px rgba(80, 80, 50, 0.45));
}

.hero-inner {
  position: relative;
  z-index: 3;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 1.5rem);
}

#hero h1 {
  max-width: 17ch;
  margin: 0 0 1.1rem 0;
  font-size: clamp(2rem, 5.2vw, 3.1rem);
  line-height: 1.12;
  font-weight: bold;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* 46ch, not the 54ch the rest of the page uses: the art box starts at 44% of the hero, and
   this is the measure that keeps the longest line of text off the shoulder of the bottle. */
.hero-lede {
  max-width: 46ch;
  margin: 0 0 1rem 0;
  font-size: clamp(1.05rem, 1.9vw, 1.2rem);
  line-height: 1.55;
  color: var(--ink);
}

.hero-by {
  max-width: 46ch;
  margin: 0 0 1.9rem 0;
  font-size: 0.95rem;
  /* A step darker than --ink-soft, which this used to be. This line sits over the body of the
     bottle, and --ink-soft only clears AA by about a quarter of a point there. */
  color: #4f4f4b;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.btn {
  display: inline-block;
  padding: 0.7rem 1.35rem;
  border: 1px solid var(--accent-dk);
  border-radius: 6px;
  background: var(--paper-2);
  font-size: 0.97rem;
  line-height: 1.2;
  color: var(--accent-dk);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.btn:hover { background: #fff; color: var(--accent-dk); }

.btn-primary {
  background: var(--accent-dk);
  border-color: var(--accent-dk);
  color: var(--paper);
}

.btn-primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Between tablet and desktop the window stops shrinking the text column but keeps shrinking the
   hero, so the art walks into the end of the lede. Push the box right and pull the paragraph
   in, rather than letting them meet. The box gets narrower each time, so background-size goes
   up to keep the same length of spray in view; what is lost is the ghost of the bottle, which
   is the part that can go. */
@media (max-width: 1200px) {
  #hero-art { opacity: 0.85; }
}

@media (max-width: 1020px) {
  #hero-art { opacity: 0.8; }
}

/* Below about 820px the art is cropped so hard that nothing of it reads, and it only gets in
   the way of the headline. It drops to a faint band across the top instead. */
@media (max-width: 820px) {
  /* Sized to the width here, not the height. At this width the hero is taller than it is wide,
     so sizing to its height would blow the illustration up until the bottle was off the left
     edge of the screen entirely. Sized to the width, the whole of it sits as a faint band
     across the top: spray to the right, bottle to the left under the start of the headline. */
  #hero-art {
    background-size: 100% auto;
    background-position: 100% 0;
    opacity: 0.5;
  }
  #hero-scrim {
    background: linear-gradient(to bottom,
      rgba(247, 245, 236, 0.35) 0%,
      rgba(247, 245, 236, 0.88) 42%,
      var(--paper) 62%);
  }
  #cork { display: none; }
  #hero { padding-top: clamp(4.5rem, 16vh, 7rem); }
}

/* ---------- client logo strip ---------- */

#clients {
  background: #fff;
  border-bottom: 1px solid var(--rule);
}

.clients-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 1.5rem clamp(1rem, 4vw, 1.5rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem clamp(1.75rem, 5vw, 3.5rem);
}

.strip-label {
  margin: 0;
  font-size: 0.78rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.logo-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem clamp(1.75rem, 5vw, 3.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Optically matched rather than set to one height: the Reveal mark is two lines deep and the
   other two are single-line wordmarks, so an equal box height would make it twice as loud. */
.logo-strip img { display: block; width: auto; }
.logo-strip li:nth-child(1) img { height: 1.85rem; }
.logo-strip li:nth-child(2) img { height: 2rem; }
.logo-strip li:nth-child(3) img { height: 2.9rem; }

/* ---------- sections ---------- */

.section {
  max-width: 1040px;
  margin: 0 auto;
  padding: clamp(2.75rem, 7vw, 4.25rem) clamp(1rem, 4vw, 1.5rem);
}

.section + .section { border-top: 1px solid var(--rule); }

.section h2 {
  margin: 0 0 0.6rem 0;
  font-size: clamp(1.5rem, 4vw, 1.95rem);
  line-height: 1.2;
  font-weight: bold;
  color: var(--accent-dk);
}

.section h3 {
  margin: 0 0 0.45rem 0;
  font-size: 1.1rem;
  line-height: 1.3;
  color: var(--ink);
}

.lede {
  max-width: var(--measure);
  margin: 0 0 2rem 0;
  font-size: 1.03rem;
  color: var(--ink-soft);
}

.cards {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
}

/* Four services of equal weight: two up at tablet, four up on a wide screen. */
.cards-4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.card {
  padding: 1.25rem 1.3rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-2);
}

.card p { margin: 0 0 0.7rem 0; font-size: 0.95rem; }
.card p:last-of-type { margin-bottom: 0; }

.card .deliv { color: var(--ink-soft); }

.label { color: var(--accent-dk); font-weight: bold; }

.status {
  display: block;
  margin-top: 0.8rem;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--ink-faint);
}

.pipeline-list { margin: 0; padding-left: 1.1rem; font-size: 0.95rem; }
.pipeline-list li { margin-bottom: 0.55rem; }
.pipeline-list li:last-child { margin-bottom: 0; }

/* ---------- expandable technical detail ---------- */

.tech {
  margin-top: 1.5rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-2);
}

.tech > summary {
  padding: 0.85rem 1.3rem;
  font-size: 0.95rem;
  font-weight: bold;
  color: var(--accent-dk);
  cursor: pointer;
  list-style: none;
}

.tech > summary::-webkit-details-marker { display: none; }

.tech > summary::before {
  content: "+";
  display: inline-block;
  width: 1.1rem;
  font-weight: bold;
}

.tech[open] > summary::before { content: "\2212"; }

.tech > summary:hover { color: var(--accent); }

/* Two columns on a wide screen. Run as one column the full width of the panel and the list
   lines reach well past a comfortable measure; this keeps them near 55 to 65 characters. */
.tech-body {
  padding: 0 1.3rem 1.4rem 1.3rem;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 0 2.5rem;
  align-items: start;
}

.tech-body h3 {
  margin: 1.3rem 0 0.5rem 0;
  font-size: 0.98rem;
  color: var(--ink-soft);
}

.tech-note {
  grid-column: 1 / -1;
  max-width: var(--measure);
  margin: 1.4rem 0 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* ---------- client cards ---------- */

.logo-row {
  display: flex;
  align-items: center;
  min-height: 3.2rem;
  margin-bottom: 0.9rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--rule);
}

.logo-row img { max-height: 2.4rem; width: auto; }

.split {
  display: grid;
  gap: 1.5rem 2.25rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: start;
}

.split p { margin-top: 0; }
.split > div > p:last-child { margin-bottom: 0; }

.shot {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  display: block;
  width: 100%;
}

/* A tall photo at the full column width would dominate the entry it illustrates. */
.shot.portrait { width: auto; max-width: min(320px, 100%); }

/* Two images side by side, each with its own caption. Capping the height rather than the
   width lines up a portrait photo and a landscape render on the same baseline. */
.shot-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.5rem;
  align-items: start;
  margin-top: 1rem;
}

.shot-pair figure { margin: 0; }

.shot-pair .shot {
  width: auto;
  max-width: 100%;
  max-height: 320px;
}

.shot-pair figcaption {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-faint);
}

/* ---------- about ---------- */

.about-grid {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: 180px minmax(0, 1fr);
  align-items: start;
}

@media (max-width: 620px) {
  .about-grid { grid-template-columns: 1fr; justify-items: start; }
}

.headshot {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;
  border: 3px solid #fff;
  box-shadow: var(--shadow-sm);
}

.about-grid .bio { max-width: var(--measure); }
.about-grid .bio p { margin-top: 0; }

.pub-head {
  margin: 1.9rem 0 0.6rem 0;
  font-size: 0.82rem;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.sel-pubs { margin: 0; padding-left: 1.1rem; }

.sel-pubs li {
  margin-bottom: 0.7rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.sel-pubs li b { color: var(--ink); }
.sel-pubs li:last-child { margin-bottom: 0; }

/* ---------- project mini cards ---------- */

.mini-cards {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.mini-card {
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-2);
}

.mini-card h3 { margin: 0 0 0.2rem 0; font-size: 1.05rem; }

.mini-card .kicker {
  margin: 0 0 0.6rem 0;
  font-size: 0.8rem;
  color: var(--ink-faint);
}

.mini-card p { margin: 0; font-size: 0.93rem; color: var(--ink-soft); }

.more-link { display: inline-block; margin-top: 1.1rem; font-size: 0.92rem; }

/* Cards in a row rarely hold the same amount of text, so without this the links sit at a
   different height in each one. The card becomes a column and the link takes the slack. */
.card,
.mini-card {
  display: flex;
  flex-direction: column;
}

.card .more-link,
.mini-card .more-link {
  margin-top: auto;      /* sits on the floor of the card, whatever the text above it does */
  padding-top: 1.1rem;   /* the gap, since margin-top is spent on the alignment */
  align-self: flex-start; /* the link is only as wide as its text, not the whole card */
}

.mini-card .more-link { padding-top: 0.85rem; }

/* ---------- contact ---------- */

#contact {
  border-top: 1px solid var(--rule);
  background: #fff;
}

#contact .contact-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 3.5rem) clamp(1rem, 4vw, 1.5rem);
}

#contact h2 {
  margin: 0 0 0.5rem 0;
  font-size: clamp(1.5rem, 4vw, 1.95rem);
  color: var(--accent-dk);
}

.contact-lines {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: 1.25rem;
  font-size: 1.05rem;
}

/* ---------- sign-off band ---------- */

footer.colophon {
  border-top: 1px solid var(--rule);
  padding: clamp(2.25rem, 5vw, 2.75rem) clamp(1rem, 4vw, 1.5rem) clamp(2rem, 4vw, 2.5rem);
  font-size: 0.8rem;
  color: var(--ink-faint);
}

.colophon-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) auto minmax(0, 1.15fr);
  gap: clamp(1.25rem, 4vw, 3rem);
  align-items: center;
  max-width: 1040px;
  margin: 0 auto;
}

/* The inner pages carry the company block only, so it runs full width and reads as a rule. */
.colophon-inner.single { grid-template-columns: minmax(0, 1fr); }

.colophon-left p { margin: 0 0 0.5rem 0; }

.colophon-left .name {
  font-size: 1rem;
  font-weight: bold;
  color: var(--ink-soft);
}

.colophon-left .affil {
  max-width: 48ch;
  font-size: 0.78rem;
  line-height: 1.55;
}

.foot-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  margin-top: 0.9rem;
}

.foot-nav a { font-size: 0.82rem; }

.colophon-mark {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 7rem;
  width: 1.5rem;
}

/* A drawn diamond rather than a glyph, so the mark cannot depend on a font being present. */
.colophon-mark span {
  width: 7px;
  height: 7px;
  background: var(--accent);
  transform: rotate(45deg);
}

.colophon-mark::before,
.colophon-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 1px;
  background: var(--rule);
}

.colophon-mark::before { top: 0; bottom: calc(50% + 1rem); }
.colophon-mark::after { top: calc(50% + 1rem); bottom: 0; }

.colophon-right { text-align: center; }

.colophon-right p {
  max-width: 44ch;
  margin: 0 auto;
  font-size: clamp(0.98rem, 2vw, 1.12rem);
  line-height: 1.45;
  color: var(--ink);
}

.colophon-right .section-mark {
  margin: 0.5rem auto;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--accent);
  transform: rotate(90deg);
}

.colophon-right .def,
.colophon-left .def {
  max-width: 52ch;
  margin: clamp(1.1rem, 3vw, 1.5rem) auto 0 auto;
  padding-top: clamp(0.9rem, 2.5vw, 1.2rem);
  border-top: 1px solid var(--rule);
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--ink-faint);
}

.colophon-left .def { margin-left: 0; }

.colophon-right .def b,
.colophon-left .def b { color: var(--ink-soft); }

/* Stacked on a narrow screen: the divider lies down between the two blocks. */
@media (max-width: 760px) {
  .colophon-inner { grid-template-columns: 1fr; gap: 0; }
  .colophon-left { text-align: center; }
  .colophon-left .affil { margin-left: auto; margin-right: auto; }
  .colophon-left .def { margin-left: auto; }
  .foot-nav { justify-content: center; }
  .colophon-mark {
    align-self: auto;
    width: auto;
    min-height: 0;
    padding: 1.25rem 0;
  }
  .colophon-mark::before,
  .colophon-mark::after {
    top: 50%;
    bottom: auto;
    left: auto;
    width: clamp(2rem, 18vw, 5rem);
    height: 1px;
  }
  .colophon-mark::before { right: calc(50% + 0.85rem); }
  .colophon-mark::after { left: calc(50% + 0.85rem); }
}

/* ---------- reading pages ---------- */

.page-head {
  padding: clamp(2.25rem, 6vw, 3.25rem) clamp(1rem, 4vw, 1.5rem) 0;
  max-width: 880px;
  margin: 0 auto;
}

.page-head h1 {
  margin: 0 0 0.6rem 0;
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  line-height: 1.15;
  color: var(--ink);
  font-weight: bold;
}

/* The reading pages are a single column, narrower than the homepage grid. */
body.doc-page .section,
body.doc-page .page-head { max-width: 880px; }

.page-head .lede { margin-bottom: 0; }

body.doc-page .section { padding-top: clamp(2.25rem, 5vw, 3rem); padding-bottom: clamp(2.25rem, 5vw, 3rem); }

.entry {
  max-width: var(--measure);
  margin-bottom: 2.25rem;
}

.entry:last-child { margin-bottom: 0; }

.entry h3 { margin-bottom: 0.2rem; font-size: 1.18rem; }
.entry .site { margin-top: 0; font-size: 0.87rem; color: var(--ink-faint); }
.entry p { font-size: 0.97rem; }
.entry > p:last-child { margin-bottom: 0; }

/* Question / Work / Deliverables inside a case study. */
.qwd { margin: 1rem 0 0 0; }

.qwd dt {
  margin-top: 0.9rem;
  font-size: 0.78rem;
  font-weight: bold;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent-dk);
}

.qwd dt:first-child { margin-top: 0; }

.qwd dd {
  margin: 0.25rem 0 0 0;
  font-size: 0.97rem;
}

.video-wrap {
  margin-top: 1rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.video-wrap iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }

.video-cap {
  margin: 0.5rem 0 0 0;
  font-size: 0.85rem;
  color: var(--ink-faint);
}

/* ---------- publications page ---------- */

.pub-list {
  margin: 0;
  padding-left: 1.6rem;
}

.pub-list li {
  margin-bottom: 1.3rem;
  padding-left: 0.3rem;
  font-size: 0.95rem;
  line-height: 1.55;
}

.pub-list li:last-child { margin-bottom: 0; }

.pub-list li::marker { color: var(--ink-faint); font-size: 0.85rem; }

.pub-authors { display: block; color: var(--ink-soft); }
.pub-authors b { color: var(--ink); }

.pub-title { display: block; color: var(--ink); }

.pub-where { display: block; color: var(--ink-faint); font-size: 0.88rem; }

.pub-link {
  display: inline-block;
  margin-top: 0.15rem;
  margin-right: 1rem;
  font-size: 0.82rem;
}

/* a marker for the papers he led */
.pub-list li.pub-first::marker { color: var(--accent); }