/* ============================================================
   stecanossa.com — layout and components
   Design taken from structure.pptx (slides in structure/).
   Palette: accent #3b21ff, rules #d9d9d9, ink #000.
   ============================================================ */

:root {
  --accent: #3b21ff;
  --rule: #d9d9d9;
  --ink: #000;
  --ink-soft: #4a4a4a;
  /* header band = the source image's own proportions, 5000 x 390 */
  --band-h: 7.8vw;
}

/* ---------------------------------------------- header / nav
   A full-bleed diffraction band carrying the name, and under it a
   centred row of links separated by thin rules (structure_startingpage.png).
   The band keeps the source image's own 5000:390 proportions.          */
#quarto-header {
  position: relative !important; /* page header, not a sticky navbar */
  background: #fff;
  padding-top: var(--band-h);
}
body.nav-fixed { padding-top: 0 !important; }

#quarto-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--band-h);
  background: #000 url("assets/header-fourier.jpg") center / cover no-repeat;
}

.navbar .navbar-brand-container {
  position: absolute;
  /* .navbar is itself positioned, so this offsets up into the band */
  top: calc(-1 * var(--band-h));
  left: clamp(16px, 2.6vw, 62px);
  height: var(--band-h);
  display: flex !important;
  align-items: center;
  z-index: 2;
  margin: 0;
}
.navbar .navbar-brand {
  display: block !important;
  color: #fff !important;
  font-size: clamp(20px, 2.85vw, 62px);
  white-space: nowrap;
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 1;
  padding: 0;
  text-decoration: none;
}
.navbar .navbar-brand:hover { color: #fff !important; opacity: 0.85; }

.navbar {
  padding-top: 2.5rem;
  padding-bottom: 0.6rem;
  border-bottom: none !important;
  box-shadow: none !important;
}
.navbar > .container-fluid,
.navbar > .container,
.navbar > .container-xxl {
  justify-content: center !important;
}
.navbar .navbar-collapse { flex-grow: 0; }

/* the links are always on show - never folded into a hamburger button */
.navbar .navbar-toggler { display: none !important; }
.navbar .navbar-collapse {
  display: flex !important;
  flex-basis: auto;
  visibility: visible !important;
  height: auto !important;
}
.navbar .quarto-navbar-tools { display: none !important; }

.navbar-nav {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;            /* wrap to a second line rather than overflow */
  justify-content: center;
  gap: 0;
}
.navbar .navbar-nav .nav-link {
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--ink) !important;
  padding: 0.1rem 1.05rem;
  border-left: 1px solid var(--rule);
  line-height: 1.15;
  opacity: 1;
}
.navbar .navbar-nav .nav-item:first-child .nav-link { border-left: none; }
.navbar .navbar-nav .nav-link:hover { color: var(--accent) !important; }
.navbar .navbar-nav .nav-link.active {
  color: var(--accent) !important;
  font-weight: 700;
}

/* generous air under the header, as in every slide */
main.content { padding-top: 2.4rem; }

#title-block-header .quarto-title h1.title,
main.content h1.title {
  font-weight: 400;
  margin-bottom: 1.6rem;
}

/* body copy — litera sets p{font-family:Georgia,serif}; the deck is all
   one sans typeface, so put every text element back on the body font */
p, li, dd, dt, td, th, summary, figcaption, .bslide, .btn-dl {
  font-family: var(--bs-body-font-family);
}
main.content p { line-height: 1.6; margin-bottom: 1.15rem; }

/* CJK glosses - the body sans carries no CJK glyphs, so name the face rather
   than leave the fallback to chance. Chinese and Japanese draw many of the
   same han characters differently, so each script gets its own stack. */
.hanzi, .ja {
  color: var(--ink-soft);
  font-size: 0.95em;
}
.hanzi {
  font-family: "Noto Serif TC", "PMingLiU", "Microsoft JhengHei",
               "Noto Serif CJK TC", serif;
}
.ja {
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN",
               "Noto Serif JP", "Yu Gothic", serif;
}
.lead-blue { color: var(--accent); }

/* the sign-off on the Contact page, a size up from the body copy */
.signoff { font-size: 1.3rem; }

/* ---------------------------------------------------- home
   The introduction on the left, the social icons in a column to its right. */
.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3rem;
  align-items: start;
  margin-bottom: 3rem;
}
.home-intro p { margin-bottom: 1.1rem; }

/* Pandoc wraps the run of <a> tags in a <p>, so both the div and that
   paragraph must be flex containers for the gap to reach the icons. */
.home-social,
.home-social > p {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  margin: 0;
}
.soc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #fff !important;
  text-decoration: none;
  font-size: 1.05rem;
  transition: transform 0.15s, filter 0.15s;
}
.soc:hover { transform: scale(1.08); filter: brightness(1.08); }
.soc svg { width: 20px; height: 20px; fill: #fff; }
.soc > span:not(.mono) {   /* accessible label, shown on hover only */
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.soc .mono { font-weight: 800; font-size: 0.82rem; letter-spacing: -0.03em; }
.soc-bsky  { background: #1185fe; }
.soc-li    { background: #0a66c2; }
.soc-orcid { background: #a6ce39; }
.soc-gs    { background: #4285f4; }
.soc-rg    { background: #00ccbb; }
.soc-gh    { background: #24292f; }
.soc-be    { background: #1769ff; }

@media (max-width: 820px) {
  .home-hero { grid-template-columns: 1fr; }
  .home-social,
  .home-social > p { flex-direction: row; flex-wrap: wrap; gap: 1.2rem; }
}

/* ------------------------------- rolling banner (one at a time)
   A single banner that alternates between entries, in a fixed
   sequence: 3 latest papers, then News, Software, Patterns.     */
.banner {
  position: relative;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  min-height: 120px;
  margin: 2.5rem 0 1rem;
  overflow: hidden;
}
.bslide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.1rem;
  padding: 1.3rem 1.6rem;
  text-decoration: none;
  color: var(--ink);
  opacity: 0;
  transform: translateX(16px);
  /* outgoing fades out fast; incoming waits, so the two never overlap */
  transition: opacity 0.22s ease, transform 0s linear 0.22s;
  pointer-events: none;
}
.bslide.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: opacity 0.38s ease 0.22s, transform 0.38s ease 0.22s;
}
/* the paper's own graphical abstract, letterboxed on its own border colour */
.bthumb {
  flex: 0 0 auto;
  width: 132px;
  height: 88px;
  border-radius: 10px;
  border: 1px solid var(--rule);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bthumb img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.btext {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3rem;
  min-width: 0;
}
@media (max-width: 560px) { .bthumb { display: none; } }
.bkind {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  font-weight: 700;
}
.btitle { font-size: 1.06rem; font-weight: 700; line-height: 1.3; }
.bsub { font-size: 0.88rem; color: var(--ink-soft); }

.banner-dots {
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  margin-bottom: 2.5rem;
}
.banner-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: var(--rule);
  cursor: pointer;
}
.banner-dots button.is-active { background: var(--accent); }

/* -------------------------------------------- publications */
.pub-year {
  font-weight: 400;
  margin-top: 2.2rem;
}
.pub-entry {
  display: grid;
  grid-template-columns: 20% minmax(0, 1fr);
  gap: 1.6rem;
  align-items: start;
  padding: 1.4rem 0;
}
.pub-entry + .pub-entry { border-top: 1px solid var(--rule); }

/* graphical abstract: rounded 3:2 box, image fitted not cropped,
   the gap filled with the image's own border colour            */
.ga-box {
  aspect-ratio: 3 / 2;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule);
}
.ga-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.ga-missing {
  font-size: 0.68rem;
  color: #b3b3b3;
  text-align: center;
  padding: 0 0.6rem;
  line-height: 1.3;
}

/* `main.content p` outranks a bare class, so its 1.15rem bottom margin was
   putting a blank line between the authors and the reference */
.pub-body .pub-title { font-weight: 700; font-size: 1.04rem; line-height: 1.35; margin: 0 0 0.35rem; }
.pub-body .pub-authors { margin: 0 0 0.5em; }
.pub-body .pub-ref { margin: 0; }
.pub-body .pub-doi { margin: 0.1rem 0 0; }
.pub-title a { color: var(--ink); text-decoration: none; font-weight: 700; }
.pub-title a:hover { color: var(--accent); }
.pub-authors { font-size: 0.88rem; color: var(--ink-soft); margin: 0 0 0.3rem; line-height: 1.45; }
.pub-authors strong { color: var(--ink); }
.pub-ref { font-size: 0.9rem; margin: 0; }
.pub-doi { font-size: 0.82rem; margin: 0.15rem 0 0; color: var(--ink-soft); }
.pub-doi a { color: var(--ink-soft); text-decoration: none; }
.pub-doi a:hover { color: var(--accent); text-decoration: underline; }
.corr { color: var(--accent); font-weight: 700; }
.corr-key { font-size: 0.82rem; color: var(--ink-soft); }

/* the graphical abstract links to the article on the journal's site */
.ga-link { display: block; text-decoration: none; }
.ga-link .ga-box { transition: box-shadow 0.15s, border-color 0.15s; }
.ga-link:hover .ga-box {
  border-color: var(--accent);
  box-shadow: 0 2px 12px rgba(59, 33, 255, 0.18);
}

/* citation summary at the top of the publications page */
.pub-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.9rem 2.6rem;
  padding: 0.85rem 0;
  margin: 0.4rem 0 1.6rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-size: 0.95rem;
}
.pub-stats .stat {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  font-size: 0.86rem;
  color: var(--ink-soft);
}
.pub-stats strong {
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--accent);
}
.pub-stats-src {
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin-left: auto;
}

/* the citation count sits under the graphical abstract, centred on it */
.pub-media { display: flex; flex-direction: column; gap: 0.55rem; }
.pub-metrics {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 26px;
}
.cite-count {
  font-size: 0.76rem;
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.06em 0.65em;
  white-space: nowrap;
}

.preprint-tag {
  font-size: 0.72rem;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 0 0.35em;
  white-space: nowrap;
  font-weight: 600;
  vertical-align: middle;
}

@media (max-width: 768px) {
  .pub-entry { grid-template-columns: 120px minmax(0, 1fr); gap: 1rem; }
}

/* ------------------------------------------------- software */
.sw-item { margin: 3rem 0; }
/* a rule between programs, but not above the first one */
.sw-item + .sw-item {
  border-top: 1px solid var(--rule);
  padding-top: 3rem;
}
.sw-row {
  display: grid;
  grid-template-columns: 32% minmax(0, 1fr);
  gap: 2.2rem;
  align-items: center;
}
/* The logos keep their own proportions and fill the column, as before.
   What they share is the frame: the same light rim the rest of the site
   uses, so a pale logo has a defined edge like the dark ones.
   Only a logo whose artwork runs to the edge of its image is inset from
   that frame - "padded": true in data/software.json.                   */
.sw-logo {
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  display: block;
  /* the newline after </p> is an anonymous inline box, and its line box
     showed as a pale strip under the logo inside the frame */
  font-size: 0;
  line-height: 0;
}
.sw-logo.sw-pad { padding: 5%; }
/* A program whose logo is not drawn yet: the frame keeps the standard shape,
   so the column of logos stays even. .sw-logo zeroes the font, hence the
   explicit size here. */
.sw-logo.sw-tbd {
  aspect-ratio: 699 / 322;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafafa;
}
main.content .sw-logo.sw-tbd p {
  font-family: var(--bs-body-font-family);
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--ink-soft);
  margin: 0;
}
/* Pandoc wraps the image in a <p>, and `main.content p` (0,1,2) outranks a
   bare `.sw-logo p` (0,1,1) - its 1.15rem bottom margin was showing as a
   pale strip under the logo, inside the frame. Hence the longer selector. */
main.content .sw-logo p { margin: 0; line-height: 0; font-size: 0; }
.sw-logo img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

/* An online program is opened from under its own logo, not from the download row. The
   button hangs below the column rather than sitting in it, so it adds no height: the row
   still centres the logo against the text, exactly as for the programs without one. */
.sw-col { position: relative; }
.sw-play { position: absolute; top: calc(100% + 0.7rem); left: 0; right: 0;
           display: flex; justify-content: center; }

.sw-body { text-align: justify; }
.sw-body p { margin-bottom: 0; }
.sw-name { font-weight: 700; }

.sw-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  /* the gap between Linux and User Manual stays at full width */
  gap: 0.67rem 3.2rem;
  margin-top: 1.7rem;
}
/* Pandoc wraps the run of spans in a <p>, so both must be flex containers */
.btn-group,
.btn-group > p {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.93rem;
  margin: 0;
}
.btn-dl {
  display: inline-block;
  min-width: 100px;
  text-align: center;
  padding: 0.28rem 0.87rem;
  border: 1px solid var(--rule);
  border-radius: 5px;
  font-size: 0.67rem;
  color: var(--ink);
  text-decoration: none;
  background: #fff;
  transition: background 0.15s, border-color 0.15s;
}
.btn-dl:hover { background: #fafafa; border-color: var(--accent); color: var(--accent); }
.btn-dl.disabled { color: #a8a8a8; background: #fbfbfb; cursor: not-allowed; }
.btn-dl.disabled:hover { border-color: var(--rule); color: #a8a8a8; background: #fbfbfb; }

@media (max-width: 768px) {
  .sw-row { grid-template-columns: 1fr; }
  .sw-body { text-align: left; }
}

/* --------------------------------------- editorial TODO note */
.todo-note {
  border-left: 3px solid var(--accent);
  background: #f7f6ff;
  padding: 0.8rem 1.1rem;
  margin: 1rem 0 1.6rem;
  font-size: 0.92rem;
  color: #33314a;
  border-radius: 0 6px 6px 0;
}
.todo-note p:last-child { margin-bottom: 0; }

/* footer: quiet, centred */
.nav-footer { border-top: 1px solid var(--rule); font-size: 0.88rem; margin-top: 3rem; }

/* ------------------------------- collapsible sections (About, Research)
   Full-width bars stacked vertically; clicking one expands it in place.
   Built from the page's "## " headings by the script in the .qmd, so the
   content files stay plain Markdown.                                     */
.acc {
  border-bottom: 1px solid var(--rule);
}
.acc:first-of-type {
  border-top: 1px solid var(--rule);
}
.acc > summary {
  cursor: pointer;
  list-style: none;
  padding: 0.95rem 2rem 0.95rem 0;
  font-size: 1.25rem;
  font-weight: 400;
  position: relative;
  transition: color 0.15s;
}
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary:hover { color: var(--accent); }

/* the chevron, drawn in CSS so no icon font is needed */
.acc > summary::after {
  content: "";
  position: absolute;
  right: 0.4rem;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease, border-color 0.15s;
}
.acc[open] > summary::after { transform: translateY(-20%) rotate(-135deg); }
.acc > summary:hover::after { border-color: var(--accent); }
.acc[open] > summary { color: var(--accent); font-weight: 700; }

.acc-body {
  padding: 0.1rem 0 1.4rem;
  animation: acc-in 0.22s ease;
}
@keyframes acc-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.acc-body > *:first-child { margin-top: 0; }
.acc-body table { margin: 0; }
.acc-body table td:first-child { white-space: nowrap; padding-right: 1.6rem; color: var(--ink-soft); }
.acc-body table thead { display: none; }

/* nested sections: the sub-bars inside an open section (e.g. the parts of
   "My CV"). Smaller, indented, and without the outer rule so the group
   reads as one block rather than a second list.                          */
.acc-sub {
  border-bottom: 1px solid #ededed;
  margin-left: 0.2rem;
}
.acc-sub:first-of-type { border-top: 1px solid #ededed; }
.acc-sub > summary {
  font-size: 1.02rem;
  padding: 0.62rem 2rem 0.62rem 0;
}
.acc-sub > summary::after {
  width: 7px;
  height: 7px;
  border-right-width: 1.6px;
  border-bottom-width: 1.6px;
}
.acc-sub > .acc-body { padding: 0 0 1rem; }


/* a program with no released files yet: a quiet line instead of dead buttons */
.sw-pending {
  display: block;
  text-align: center;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: 1.4rem;
}

/* the diffraction frame in My science: square, so it is held well short of
   the text column or it dominates the section */
.fig-pattern {
  margin: 1.6rem auto 1.8rem;    /* centred in the text column */
  max-width: 460px;
}
.fig-pattern img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}
.fig-pattern p:last-child {
  text-align: center;
  font-size: 0.82rem;
  color: var(--ink-soft);
  line-height: 1.45;
  margin: 0.6rem 0 0;
}

/* Useful thoughts: each quote set apart, with its source beneath */
.quotes blockquote {
  border-left: 2px solid var(--rule);
  padding: 0 0 0 1.1rem;
  margin: 0 0 1.5rem;
}
main.content .quotes blockquote p { margin: 0; font-size: 1.02rem; }
.quotes .qsrc {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.84rem;
  color: var(--ink-soft);
}
.quotes .qsrc::before { content: "— "; }

/* the copyright, quietly, under the social links at the foot of every page */
.copyline {
  display: block;
  margin-top: 1.1rem;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: #8a8a8a;
}

/* Decorative animation under the intro: blocks drifting and assembling in a white fog.
   Spans the text column only. Its white is the page's white, by multiply, so no edge shows;
   if the page ever stops being white it has to be re-rendered. */
.sc-banner { width: 100%; margin-top: 2.5rem; line-height: 0; }
.sc-banner video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 22 / 3;        /* 2200 x 300: never cropped or stretched */
  mix-blend-mode: multiply;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .sc-banner video { display: none; }
  .sc-banner {
    aspect-ratio: 22 / 3;
    background: url("assets/banner/banner_poster.png") center / 100% auto no-repeat;
  }
}