/* jmurphy.studio's own rules on top of the site system: page headings, section labels, the
   prose additions and the search bar. The header, footer, frame and listing row are the
   system's (app/shared/styles/site, app/shared/templates/site-header and site-footer).

   Spacing keeps to the package's scale: 4 (16px) between lines of a block, 6-8 between
   blocks, 12-16 between sections. */
@import '/assets/app/shared/styles/site/index.615452d2f7b1a18.css';

/* PAGE HEADINGS: one title per page, in the serif, with an optional line under it. */

.studio-page-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-10);
}

.studio-title {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-heading);
  font-size: var(--text-h1);
  font-weight: var(--weight-heading);
  line-height: var(--leading-h1);
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
}

.studio-subtitle,
.studio-muted {
  margin: 0;
  color: var(--ink-dim);
  font-size: var(--text-sm);
}

/* A section label: small sans capitals over a hairline, used for "Latest writing" and the
   archive's years. */
.studio-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--rule);
}

.studio-section-title {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.studio-section-link {
  color: var(--ink-dim);
  font-size: var(--text-sm);
  text-decoration: none;
}

.studio-section-link:hover {
  color: var(--ink);
}

/* PROSE: essays, written pages, the home introduction. The column, size, leading, headings,
   lists, quotations and links are the site system's .reading; these are the Studio's additions
   for what its Markdown produces (images, embeds, tables, callouts and footnotes). */

.studio-prose p:has(> img:only-child),
.studio-prose p:has(> a:only-child > img:only-child),
.studio-prose p:is(:has(> img:first-child + em:last-child), :has(> a:first-child:has(> img:only-child) + em:last-child)) {
  margin-block: 1.75em;
}

/* A captioned image. The imported essays write it as one paragraph, the image and then its
   caption in emphasis (`![](…) *Caption*`, rendered <p><img> <em>Caption</em></p>), never as a
   <figure>; the site system styles <figcaption> the same way. The image is centered, so the
   caption is too: under a narrow image it sits beneath it, under a full-width one it reads as
   the figure's line. */
.studio-prose p:is(:has(> img:first-child + em:last-child), :has(> a:first-child:has(> img:only-child) + em:last-child)) {
  text-align: center;
}

.studio-prose p:is(:has(> img:first-child + em:last-child), :has(> a:first-child:has(> img:only-child) + em:last-child)) > em:last-child {
  display: block;
  margin-top: var(--space-3);
  color: var(--ink-dim);
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  line-height: 1.5;
  text-wrap: balance;
}

.studio-prose p:is(:has(> img:first-child + em:last-child), :has(> a:first-child:has(> img:only-child) + em:last-child)) > em:last-child a {
  color: inherit;
}

/* A video the import turned into its thumbnail: the image's alt is "YouTube video by …" and
   the next paragraph is the video's title, which reads as the figure's caption. */
.studio-prose p:has(> img[alt^='YouTube video by']:only-child):has(+ p) {
  margin-bottom: 0;
}

.studio-prose p:has(> img[alt^='YouTube video by']:only-child) + p {
  margin-top: var(--space-3);
  color: var(--ink-dim);
  font-family: var(--font-ui);
  font-size: var(--text-caption);
  font-style: italic;
  line-height: 1.5;
  text-align: center;
  text-wrap: balance;
}

.studio-prose figcaption {
  margin-top: var(--space-3);
  line-height: 1.5;
  text-wrap: balance;
}

.studio-prose :is(iframe, video) {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}

/* A table spans the column; at a narrow width it scrolls inside its own box rather than
   the page. */
.studio-prose table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: var(--text-ui);
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}

@media (max-width: 640px) {
  .studio-prose table {
    display: block;
    overflow-x: auto;
  }
}

.studio-prose :is(th, td) {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--rule-soft);
  text-align: left;
  vertical-align: top;
}

.studio-prose th {
  border-bottom-color: var(--rule-strong);
  color: var(--ink);
  font-weight: 600;
}

/* Callouts stay quiet: a paper ground, the intent's colour only in the rule and the label. */
.studio-prose .callout {
  padding: var(--space-4) var(--space-5);
  border-left-width: 2px;
  background: var(--bg-soft);
  color: var(--ink-soft);
  font-size: 0.95em;
}

.studio-prose .callout.is-info .callout-title {
  color: var(--info-ink);
}

.studio-prose .callout.is-success .callout-title {
  color: var(--success-ink);
}

.studio-prose .callout.is-warning .callout-title {
  color: var(--warning-ink);
}

.studio-prose .callout.is-danger .callout-title {
  color: var(--danger-ink);
}

.studio-prose .callout.is-accent .callout-title {
  color: var(--accent);
}

.studio-prose .callout-title {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.studio-prose .callout-body > * + * {
  margin-top: 0.75em;
}

/* Footnote markers and the notes at the end of a piece. */
.studio-prose sup {
  line-height: 0;
}

.studio-prose sup a {
  padding-inline: 0.1em;
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: 0.7em;
  font-weight: 600;
  text-decoration: none;
}

.studio-prose .footnotes {
  margin-top: 3em;
  padding-top: 1.5em;
  border-top: 1px solid var(--rule);
  color: var(--ink-dim);
  font-size: 0.85em;
}

.studio-prose .footnotes li + li {
  margin-top: 0.6em;
}

.studio-prose .footnotes li:target {
  background: var(--accent-soft);
}

.studio-prose .data-footnote-backref {
  margin-left: 0.25em;
  font-family: var(--font-ui);
}

.studio-prose mark {
  padding-inline: 0.1em;
  background: var(--mark-bg);
  color: var(--ink);
}

/* THE SEARCH BAR in the header and the dropdown under it. The dropdown is positioned against
   the bar, so opening it, and its rows changing as replies arrive, move nothing on the page;
   it scrolls inside past its own height. */

.studio-header-search {
  width: 15rem;
}

.studio-search {
  position: relative;
  margin: 0;
}

.studio-search-box {
  width: 100%;
}

.studio-search .input-group {
  border-color: var(--rule);
  background: var(--bg-elevated);
}

.studio-search input::placeholder {
  color: var(--ink-faint);
}

/* Focus: one ring at the box's own edge, in the system's focus color and width. The package's
   offset ring would sit a gap outside the box's hairline and read as two outlines; drawn inset,
   the ring's outer edge is the box's edge, so the dropdown lines up with it. */
.studio-search .input-group:focus-within {
  border-color: var(--focus);
  box-shadow: inset 0 0 0 calc(var(--focus-ring-width) - 1px) var(--focus);
}

/* The ⌘K hint gives its place to the field's clear button while the bar is in use or holds a
   query. */
.studio-search:focus-within .studio-search-hint,
.studio-search:has(input:not(:placeholder-shown)) .studio-search-hint {
  display: none;
}

/* With the hint gone, the field ends at the same inset the search icon starts at, and the
   clear button is an icon-sized cross centered on the line. */
.studio-search .input-group > .input {
  padding-inline-end: var(--control-padding-x-sm);
}

.studio-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: var(--icon-size);
  height: var(--icon-size);
  margin: 0 0 0 var(--space-2);
  background: var(--ink-dim);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M19 5 5 19M5 5l14 14'/%3E%3C/svg%3E") center / 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M19 5 5 19M5 5l14 14'/%3E%3C/svg%3E") center / 100% no-repeat;
  cursor: pointer;
}

.studio-search input::-webkit-search-cancel-button:hover {
  background: var(--ink);
}

.studio-search-hint kbd {
  border: 0;
  background: none;
  box-shadow: none;
  padding: 0;
  min-width: 0;
  height: auto;
  color: var(--ink-faint);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.studio-search-panel {
  position: absolute;
  top: calc(100% + var(--space-2));
  /* Wider than the bar, so it hangs from the bar's right edge; under 640px it spans the bar. */
  right: 0;
  z-index: 60;
  width: min(30rem, calc(100vw - 2rem));
  max-height: min(28rem, 70vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--overlay-border);
  border-radius: var(--radius-overlay);
  background: var(--overlay-bg);
  box-shadow: var(--overlay-shadow);
}

.studio-search-list {
  margin: 0;
  padding: var(--space-1);
  list-style: none;
}

.studio-search-hit a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-2-5) var(--space-3);
  border-radius: var(--radius-control);
  color: var(--ink-soft);
  text-decoration: none;
}

.studio-search-hit[aria-selected='true'] a,
.studio-search-hit a:hover {
  background: var(--bg-muted);
}

.studio-search-title {
  color: var(--ink);
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: var(--leading-snug);
}

.studio-search-date {
  padding-top: 0.2em;
  color: var(--ink-dim);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.studio-search-snippet {
  grid-column: 1 / -1;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: var(--text-xs);
  line-height: 1.55;
}

/* Before anything is typed: the latest essays and the books, each group under a small muted
   label at the rows' inset, in tighter rows of title and date. */
.studio-search-group {
  padding: var(--space-2) var(--space-3) var(--space-1);
  color: var(--ink-faint);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.studio-search-hit + .studio-search-group {
  margin-top: var(--space-1);
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule-soft);
}

.studio-search-hit.is-suggestion a {
  align-items: baseline;
  padding-block: var(--space-2);
}

.studio-search-hit.is-suggestion .studio-search-title {
  font-size: var(--text-sm);
}

/* "See all" is the dropdown's quiet footer: it stays at the bottom while the rows scroll
   under it, on the dropdown's own ground behind a faint hairline, in small muted type at the
   rows' inset, and lights up like a row when pointed at or picked with the arrow keys. */
.studio-search-all {
  position: sticky;
  bottom: calc(-1 * var(--space-1));
  margin: var(--space-1) calc(-1 * var(--space-1)) calc(-1 * var(--space-1));
  padding: var(--space-1);
  border-top: 1px solid var(--rule-soft);
  background: var(--overlay-bg);
}

.studio-search-all a {
  display: block;
  padding-block: var(--space-2);
  color: var(--ink-dim);
  font-size: var(--text-xs);
}

.studio-search-all[aria-selected='true'] a,
.studio-search-all a:hover {
  color: var(--ink);
}

.studio-search-empty {
  margin: 0;
  padding: var(--space-4);
  color: var(--ink-dim);
  font-size: var(--text-sm);
}

/* A matched word, in the dropdown and on the results page. */
.studio-search mark,
.studio-search-results mark {
  padding-inline: 1px;
  border-radius: 2px;
  background: var(--mark-bg);
  color: var(--ink);
}

@media (max-width: 640px) {
  .studio-header-search {
    order: 4;
    flex-basis: 100%;
    width: 100%;
  }

  .studio-search-panel {
    left: 0;
    width: auto;
  }

  .studio-search-hint {
    display: none;
  }
}

/* THE INTERFACE FACE: the page's body is the reading serif (the site system), so the Studio's
   small furniture (subtitles, dates, contents, media links, home links, the back link, the
   search bar and pagination) names the interface face itself. */
:is(
  .studio-subtitle,
  .studio-muted,
  .studio-section-link,
  .studio-search,
  .studio-toc,
  .studio-essay-date,
  .studio-essay-media,
  .studio-essay-neighbour-label,
  .studio-home-links,
  .studio-tag-back,
  .studio-results nav
) {
  font-family: var(--font-ui);
}