/* Shared by every page: the top bar, the Projects dropdown, the phone menu and a few helpers.
   Colours, --margin and --bar come from each page's own :root. Behaviour is in site.js.
   Linked after each page's own <style>, so these rules win over .btn where they meet. */

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Archivo's web subset has no arrow glyphs, so arrows are drawn and sized to the text. */
.arrow, .ext, .chev { display: inline-block; flex: none; fill: none; stroke: currentColor; }
.arrow { width: .62em; height: .62em; stroke-width: 2.6; }
.ext { width: .72em; height: .72em; margin-left: .45em; stroke-width: 2.2; }
.chev { width: .8em; height: .8em; stroke-width: 2.2; transition: transform .2s; }

/* ── Top bar ───────────────────────────────────────── */
.top { position: sticky; top: 0; z-index: 10; background: var(--paper); border-bottom: 1px solid var(--rule); }
.top .wrap { height: var(--bar); display: flex; align-items: center; gap: 32px; }
.top__name { font-weight: 700; font-stretch: 80%; font-size: 19px; text-decoration: none; white-space: nowrap; margin-right: auto; }

/* On a project page the name becomes the way home: ← Michael Brown / Mario model */
.crumbs { display: flex; align-items: center; min-width: 0; margin-right: auto; font-size: 19px; font-stretch: 80%; white-space: nowrap; }
.crumbs .top__name { display: inline-flex; align-items: center; gap: .3em; margin-right: 0; }
.crumbs .top__name:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.crumbs .arrow { width: .75em; height: .75em; stroke-width: 2.4; }
.crumbs__here { overflow: hidden; text-overflow: ellipsis; color: var(--ink-soft); font-weight: 500; }
.crumbs__here::before { content: "/"; margin: 0 .45em; color: var(--rule); }

.top__menu { display: none; }
.top__nav { display: flex; align-items: center; gap: 28px; font-size: 15px; }
.top__nav > a, .drop__toggle { text-decoration: none; text-underline-offset: .2em; }
.top__nav > a:hover, .top__nav > a.is-current, .top__nav > a[aria-current],
.drop__toggle:hover, .drop__toggle.is-current, .drop__toggle[aria-current] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--ink);
}

/* ── Projects dropdown ─────────────────────────────── */
.drop { position: relative; }
.drop__toggle { display: inline-flex; align-items: center; gap: .3em; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.drop.is-open .chev { transform: rotate(180deg); }
.drop__panel {
  display: none;
  position: absolute;
  top: calc(100% + 18px); /* hangs from the bar's bottom rule */
  left: -18px;
  min-width: 280px;
  padding: 8px 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--ink);
  box-shadow: 0 16px 40px rgb(22 35 63 / .12);
}
.drop.is-open .drop__panel { display: block; }
.drop__panel a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 9px 18px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.drop__panel a:hover { background: color-mix(in srgb, var(--rule) 35%, var(--paper)); }
.drop__panel a[aria-current] { box-shadow: inset 3px 0 var(--ink); }
.drop__tag { font-size: 13px; font-weight: 400; color: var(--ink-soft); }

/* ── Chips: a named program or award, linked to its official page ──
   Hover or keyboard focus shows a quickview card; a click opens the page in a new tab. On touch
   screens there is no hover, so a tap goes straight to the page. Placement is in site.js. */
.chip {
  position: relative;
  display: inline-block; /* moves to the next line whole rather than splitting */
  max-width: 100%;       /* ...and only wraps inside itself when wider than its column */
  padding: .08em .6em .12em;
  border-radius: 1em;    /* a pill on one line, a rounded box on two */
  background: color-mix(in srgb, var(--ink) 8%, var(--paper));
  line-height: 1.25;     /* keeps chips inside the line so paragraphs stay evenly spaced */
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  transition: background-color .15s;
}
.chip:hover, .chip:focus-visible { background: color-mix(in srgb, var(--ink) 15%, var(--paper)); }
.chip .ext { margin-left: .4em; }
.chip__end { white-space: nowrap; }

.qv {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 360px;
  max-width: calc(100vw - 2 * var(--margin));
  padding: 16px 18px 18px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--ink);
  box-shadow: 0 16px 40px rgb(22 35 63 / .14);
  color: var(--ink);
  font-size: 15px;
  font-weight: 400;
  font-stretch: 100%;
  line-height: 1.45;
  letter-spacing: 0;
  text-align: left;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  translate: var(--qv-shift, 0px) 0; /* set by site.js to stay on screen; not animated */
  transform: translateY(4px);
  transition: opacity .15s, transform .15s, visibility 0s linear .15s;
}
/* Bridges the gap to the chip, so the pointer can move onto the card without closing it. */
.qv::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.chip.qv-up .qv { top: auto; bottom: calc(100% + 10px); }
.chip.qv-up .qv::before { top: auto; bottom: -12px; }
@media (hover: hover) {
  .chip:hover:not(.qv-off) .qv { opacity: 1; visibility: visible; transform: none; transition-delay: .12s, .12s, 0s; }
}
.chip:focus-visible:not(.qv-off) .qv { opacity: 1; visibility: visible; transform: none; }
.qv__source { font-size: 13px; color: var(--ink-soft); }
.qv__title { font-size: 20px; font-weight: 700; font-stretch: 85%; line-height: 1.2; }
.qv__cta { display: inline-flex; align-items: center; margin-top: 6px; font-size: 14px; font-weight: 600; }
.chip:hover .qv__cta { text-decoration: underline; text-underline-offset: .2em; }

@media (max-width: 960px) {
  .top .wrap { gap: 24px; }
  .top__nav { gap: 20px; }
}

/* ── Below 720px the links fold into a Menu button ── */
@media (max-width: 720px) {
  .top .wrap { gap: 10px; }
  .top__menu { display: inline-flex; }
  .top__nav { display: none; }
  .top.is-open .top__menu { background: var(--ink); color: var(--paper); }
  .top.is-open .top__nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--bar));
    overflow-y: auto;
    gap: 0;
    padding: 4px var(--margin) 20px;
    background: var(--paper);
    border-bottom: 1px solid var(--ink);
    font-size: 24px;
    font-weight: 700;
    font-stretch: 80%;
  }
  .top__nav > a, .drop__toggle { padding: 10px 0; border-bottom: 1px solid var(--rule); }
  .drop__toggle { display: flex; width: 100%; justify-content: space-between; }
  .drop__panel { position: static; min-width: 0; padding: 4px 0 10px; border: 0; border-bottom: 1px solid var(--rule); box-shadow: none; }
  .drop__panel a { padding: 8px 0 8px 16px; font-size: 18px; font-weight: 500; font-stretch: 100%; }
  .drop__panel a[aria-current] { box-shadow: inset 2px 0 var(--ink); }
}

@media (max-width: 640px) {
  .crumbs__here { display: none; }
}

@media print {
  .top, .qv, .chip .ext { display: none; }
  .chip { padding: 0; background: none; }
}