/* Shared browsing width, with the theme's reading measure for posts. */
html:root {
  --site-gutter: 20px;
  --site-layout-width: 1120px;
  --container-width: var(--site-layout-width);
  --content-width: var(--site-layout-width);
  --wide-width: var(--site-layout-width);
  --content-width-wide: var(--site-layout-width);
  --site-section-hero-height: 160px;
}
@media (min-width: 768px) {
  html:root { --site-section-hero-height: 196px; }
}
@media (min-width: 1024px) {
  html:root { --site-section-hero-height: 200px; }
}
@media (min-width: 1280px) {
  html:root { --site-section-hero-height: 208px; }
}

/* Match the photography page's title area without changing headline sizes. */
body.home-template main.main > [data-hero="none"] { margin-bottom: 0; }
body.home-template main.main > [data-hero="none"] > div {
  box-sizing: border-box;
  min-height: var(--site-section-hero-height);
  padding-block: 0;
}

/* Use the homepage headline scale for the other primary page titles. */
body.tag-photography main.main [data-tag] > div {
  box-sizing: border-box;
  min-height: var(--site-section-hero-height);
  padding-block: 0;
}
/* The blogroll page contains a later, inline section-title rule. Restore its
   main hero without changing the smaller headings in the content below. */
body.page-blogroll main.main > [data-page-hero] > div {
  min-height: var(--site-section-hero-height) !important;
  padding-block: 0 !important;
  display: flex !important;
}
body.page-blogroll main.main > [data-page-hero] > div > div {
  display: flex !important;
  text-align: center !important;
}
body.page-blogroll main.main > [data-page-hero] h1 {
  width: auto !important;
  padding: 0 !important;
  border: 0 !important;
}
:is(
  body.tag-photography main.main [data-tag] h1,
  body.page-message-board main.main .guestbook-layout [data-post-hero] h1,
  body.page-blogroll main.main [data-page-hero] h1
) {
  font-family: inherit !important;
  font-size: var(--text-3xl) !important;
  line-height: var(--text-3xl--line-height) !important;
  font-weight: 600 !important;
  letter-spacing: var(--tracking-tight) !important;
  color: var(--color-typography) !important;
  text-transform: none !important;
  text-align: center !important;
}
@media (min-width: 640px) {
  :is(body.tag-photography main.main [data-tag] h1, body.page-message-board main.main .guestbook-layout [data-post-hero] h1, body.page-blogroll main.main [data-page-hero] h1) {
    font-size: var(--text-4xl) !important;
    line-height: var(--text-4xl--line-height) !important;
  }
}
@media (min-width: 768px) {
  :is(body.tag-photography main.main [data-tag] h1, body.page-message-board main.main .guestbook-layout [data-post-hero] h1, body.page-blogroll main.main [data-page-hero] h1) {
    font-size: var(--text-5xl) !important;
    line-height: var(--text-5xl--line-height) !important;
  }
}
@media (min-width: 1024px) {
  :is(body.tag-photography main.main [data-tag] h1, body.page-message-board main.main .guestbook-layout [data-post-hero] h1, body.page-blogroll main.main [data-page-hero] h1) {
    font-size: var(--text-6xl) !important;
    line-height: var(--text-6xl--line-height) !important;
  }
}
@media (min-width: 1000px) {
  body.page-message-board main.main .guestbook-layout [data-post-hero] h1 {
    width: min(calc(100vw - var(--site-gutter) * 2), var(--site-layout-width));
  }
}

/* Keep the navigation steady while the page beneath it changes. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  header[data-header] { view-transition-name: siwei-header; }
  ::view-transition-old(siwei-header),
  ::view-transition-new(siwei-header) { animation: none; }
  ::view-transition-old(root) {
    animation: 180ms ease-in both siwei-page-out;
  }
  ::view-transition-new(root) {
    animation: 420ms cubic-bezier(.22, 1, .36, 1) both siwei-page-in;
  }
}
@keyframes siwei-page-out {
  to { opacity: 0; transform: translateY(-5px); }
}
@keyframes siwei-page-in {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: translateY(0); }
}
body [data-header], body [data-footer],
body main.main > section.px-4 {
  padding-inline: max(var(--site-gutter), env(safe-area-inset-left)) max(var(--site-gutter), env(safe-area-inset-right));
}
body main.main .ghost-content { --gap: var(--site-gutter); min-width: 0; }
body main.main .ghost-content > * { min-width: 0; }
body main.main [data-post-card], body main.main [data-post-card] > * { min-width: 0; }
body main.main [data-post-card-title], body main.main [data-post-card-excerpt] { overflow-wrap: anywhere; }
body main.main .ghost-content :is(pre, table) { max-width: 100%; overflow-x: auto; }
body main.main .ghost-content table { display: block; }
body main.main .ghost-content :is(iframe, video) { max-width: 100%; }
body main.main #comments .siwei-fc-panel {
  width: min(var(--content-width), calc(100% - var(--site-gutter) * 2));
}
/* Keep catalog ordering intact while adding columns on larger screens. */
body main.main [data-feed-layout="grid"] {
  grid-template-columns: minmax(0, 1fr);
  column-gap: clamp(20px, 2.5vw, 36px);
}
@media (min-width: 640px) {
  body main.main [data-feed-layout="grid"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* TOC pages use one outside gutter instead of narrowing the article twice. */
body main.main [data-post-content] {
  width: calc(100% - var(--site-gutter) * 2);
  max-width: var(--wide-width);
  gap: 24px;
  flex-direction: column;
}
body main.main [data-post-content] .ghost-content { --gap: 0px; }
body main.main [data-post-content] [data-toc] { padding-inline: 0; }
/* Keep all outer content edges on the same grid, including full-width cards. */
body main.main .ghost-content > .kg-width-full { grid-column: main-start / main-end; }
body main.main :is([data-page-hero], [data-tag], [data-author]) > div { max-width: var(--site-layout-width); }
/* The contents list sits above the article, leaving the full reading measure. */
body main.main [data-post-content] [data-toc] { max-width: none; flex: none; }
body main.main [data-toc] > div { position: static; border-bottom: 1px solid var(--color-border); }
body main.main [data-toc-toggle] { justify-content: center; cursor: pointer; border: 1px solid var(--color-border); padding: 12px 16px; }
body main.main [data-toc-toggle] .icon { visibility: visible; }
body main.main [data-toc-content].hidden { display: none; }
body main.main [data-hero-content] { max-width: var(--site-layout-width); }
body.page-sci-journal-finder main.main #sjq .jq-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); }
@media(max-width:760px) { body.page-sci-journal-finder main.main #sjq .jq-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:560px) { body.page-sci-journal-finder main.main #sjq .jq-metrics { grid-template-columns: minmax(0,1fr); } }
@media (min-width: 1024px) {
  body main.main [data-feed-layout="grid"] { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

/* Flair's default reading width for articles and the guestbook. */
body:is(.post-template, .page-message-board) main.main {
  --content-width: 680px;
  --content-width-wide: 960px;
  --wide-width: 1024px;
}
body.post-template main.main .ghost-content:not([data-no-overflow]) > .kg-width-full {
  grid-column: full-start / full-end;
}

/* On touch screens, highlight only text and icon strokes, never the tap area. */
@media (pointer: coarse) {
  html { --siwei-touch-text: var(--color-brand); }
  html body :is(a, button, [role="button"], summary, input[type="button"], input[type="submit"]) {
    -webkit-tap-highlight-color: transparent;
  }
  html body :is(
    #menu [data-nav="mobile"] a,
    [data-nav="desktop"] a:not([data-nav-cta]),
    [data-ghost-search],
    [data-menu-toggle],
    [data-color-scheme-toggle],
    [data-footer] a,
    [data-post-card-title] a,
    [data-post-card-info] a,
    [data-post-card-authors] a,
    .ghost-content :is(p, li, blockquote) a:not(.shadow-btn):not(.kg-btn),
    #boyou-updates a.boyou-rss-group,
    #boyou-directory .boyou-directory-card a,
    .guestbook-wander__item,
    .guestbook-wander__header button,
    .page-jump-trigger,
    .page-jump-option,
    [data-share-copy],
    [data-toc-toggle],
    #comments .siwei-fc-cancel-reply,
    #comments .siwei-fc-sort,
    #comments .siwei-fc-comment__reply,
    #comments .siwei-fc-comment__delete,
    #comments .siwei-fc-format-button,
    #comments .siwei-fc-format-popover button:not(.siwei-fc-gif-choice),
    #sjq .jq-dialog-close
  ):is(:active, .siwei-touch-active) {
    color: var(--siwei-touch-text) !important;
  }
  html body [data-menu-toggle]:is(:active, .siwei-touch-active) span {
    background-color: var(--siwei-touch-text) !important;
  }
  html body [data-brand]:is(:active, .siwei-touch-active) [data-text-logo] {
    color: var(--siwei-touch-text) !important;
  }
  html body [data-post-card] a:is(:active, .siwei-touch-active) [data-post-card-title] {
    color: var(--siwei-touch-text) !important;
  }
  html body .guestbook-board__select:is(:active, .siwei-touch-active) :is(.guestbook-board__heading, .guestbook-board__action),
  html body .guestbook-wander__item:is(:active, .siwei-touch-active) :is(.guestbook-wander__name, .guestbook-wander__source) {
    color: var(--siwei-touch-text) !important;
  }
}

/* Match the About text to the blog article reading width. */
body.page-about main.main {
  --content-width: 680px;
}

/* Align both edges of About paragraphs; keep the last line natural. */
body.page-about main.main .ghost-content > p {
  text-align: justify;
  text-align-last: start;
}

/* One focus edge for text-entry controls throughout the public site. */
html body :is(
  input:not([type]), input[type="text"], input[type="email"], input[type="url"],
  input[type="search"], input[type="password"], input[type="tel"], input[type="number"],
  input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"],
  input[type="week"], textarea, select, [contenteditable="true"][role="textbox"],
  .siwei-comment-editor[contenteditable="true"]
):not(:disabled, [readonly], [hidden], [aria-disabled="true"], [aria-readonly="true"]) {
  transition: border-color 160ms ease !important;
}
html body :is(
  input:not([type]), input[type="text"], input[type="email"], input[type="url"],
  input[type="search"], input[type="password"], input[type="tel"], input[type="number"],
  input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"],
  input[type="week"], textarea, select, [contenteditable="true"][role="textbox"],
  .siwei-comment-editor[contenteditable="true"]
):not(:disabled, [readonly], [hidden], [aria-disabled="true"], [aria-readonly="true"]):not([aria-invalid="true"], .error, .error *, .is-invalid, .is-invalid *):focus {
  border-color: var(--color-brand, #E54B34) !important;
  caret-color: var(--color-brand, #E54B34);
  outline: none !important;
  box-shadow: none !important;
}
/* The hero's borderless input shares its form's existing outer edge. */
html body [data-hero] form[data-members-form]:has(input.border-none) {
  transition: border-color 160ms ease !important;
}
html body [data-hero] form[data-members-form]:not(.error):has(input.border-none:not(:disabled, [readonly], [hidden], [aria-disabled="true"], [aria-readonly="true"]):not([aria-invalid="true"], .error, .error *, .is-invalid, .is-invalid *):focus) {
  border-color: var(--color-brand, #E54B34) !important;
  box-shadow: none !important;
}
@media (prefers-reduced-motion: reduce) {
  html body :is(
  input:not([type]), input[type="text"], input[type="email"], input[type="url"],
  input[type="search"], input[type="password"], input[type="tel"], input[type="number"],
  input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"],
  input[type="week"], textarea, select, [contenteditable="true"][role="textbox"],
  .siwei-comment-editor[contenteditable="true"]
):not(:disabled, [readonly], [hidden], [aria-disabled="true"], [aria-readonly="true"]),
  html body [data-hero] form[data-members-form]:has(input.border-none) {
    transition: none !important;
  }
}