/* ============================================================================
   paper.css — the shared "paper" design kit.

   One source of truth so the research, home, and recruitment pages share a
   single visual language (the look ported from the approved research mockup).
   Everything is namespaced under .paper, so this file can load site-wide (via
   _head/link.swig) yet only styles the containers that opt in. Light palette
   only: the theme has no dark-mode toggle wired to data-theme /
   prefers-color-scheme, so a dark palette would flip just these pages dark on
   an OS dark preference.

   Page opt-in:
     .paper        design tokens + base serif typography. Embeds anywhere
                   (e.g. inside the home two-column layout): no padding, no
                   background of its own.
     .paper.sheet  a standalone full page (research, recruitment): adds the
                   page padding and a white ground.
     .paper .wrap  the constrained reading column.
     .paper .flow  auto vertical spacing between run-of-prose children.
   ========================================================================== */

.paper{
  --ink:#16222E; --muted:#556674; --faint:#8593A0; --line:#E6ECF0;
  --paper:#FFFFFF; --ground:#FFFFFF;
  --blue:#2F6F9E; --blue-strong:#1C5B88; --blue-deep:#123E5E;
  --blue-soft:rgba(47,111,158,.09);
  --read:52.8rem;
  /* --body is the single knob for the main reading text (abstracts, summaries,
     list items, body paragraphs). The theme's default is 16px; 1.08rem ≈ 17.3px
     reads more comfortably. Bump to 1.125rem for a full 18px. The small uppercase
     chrome labels (eyebrows, section headers, meta) stay fixed on purpose. */
  --body:1.08rem;
  --shadow:0 1px 2px rgba(22,34,46,.04),0 8px 22px rgba(22,34,46,.05);
  --serif:'Charter','Iowan Old Style','Palatino Linotype','Palatino',Georgia,'Times New Roman',serif;
  color:var(--ink);font-family:var(--serif);font-size:var(--body);line-height:1.6;-webkit-font-smoothing:antialiased}
.paper *{box-sizing:border-box}
.paper.sheet{background:var(--ground);padding:0 20px 72px}
.paper .wrap{max-width:var(--read);margin:0 auto}
.paper .flow > * + *{margin-top:.9em}

/* page title (masthead) — used by recruitment; research opens on a divider */
.paper .masthead{padding:12px 0 4px}
.paper .masthead h1{font-family:var(--serif);font-weight:600;
  font-size:clamp(2.1rem,1.5rem+2.4vw,3rem);letter-spacing:-.014em;line-height:1.05;
  margin:0;text-wrap:balance;color:var(--ink)}

/* section divider: uppercase blue label + hairline rule filling the row */
.paper .section{display:flex;align-items:baseline;gap:14px;margin:52px 0 4px}
/* header/first block removed: pull the first divider up so no opening void */
.paper .wrap > .section:first-child{margin-top:28px}
.paper .section h2{font-size:.92rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue);font-weight:700;margin:0;white-space:nowrap}
.paper .section .rule{flex:1;height:1px;background:var(--line)}

/* --- research entries ------------------------------------------------------ */
.paper .entry{padding:34px 0;border-top:1px solid var(--line)}
.paper .section + .entry{border-top:0}
.paper .eyebrow{display:flex;gap:9px;align-items:center;flex-wrap:wrap;
  font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;color:var(--blue);font-weight:700}
.paper .eyebrow .yr{color:var(--faint);font-weight:600}
.paper .eyebrow .dot{width:3px;height:3px;border-radius:50%;background:var(--faint);opacity:.7}
.paper .eyebrow .status{color:var(--blue-strong)}
/* text-wrap:pretty (not balance): balance splits a two-line title into two
   roughly equal halves, so it breaks near the middle and leaves the first line
   far short of the full column width. pretty fills each line to the edge and
   only tidies the final line's orphan. */
.paper .title{font-family:var(--serif);font-weight:600;line-height:1.16;letter-spacing:-.006em;
  font-size:clamp(1.32rem,1.05rem+1.15vw,1.72rem);margin:.4em 0 .12em;text-wrap:pretty}
.paper .title a{color:var(--ink);text-decoration:none;
  background:linear-gradient(var(--blue),var(--blue)) no-repeat;
  background-size:0% 2px;background-position:0 100%;transition:background-size .28s ease}
.paper .title a:hover,.paper .title a:focus-visible{background-size:100% 2px}
.paper .authors{font-size:.92rem;color:var(--muted);margin:0}
.paper .authors em{color:var(--ink);font-style:normal;font-weight:600}

/* drop-downs: Abstract, then In brief. Both share the summary styling */
.paper details.abs{margin-top:14px;border-top:1px dashed var(--line);padding-top:13px}
.paper details.abs>summary{list-style:none;cursor:pointer;display:inline-flex;gap:9px;
  align-items:center;font-size:.82rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;
  color:var(--muted);padding:2px 0;user-select:none}
.paper details.abs>summary::-webkit-details-marker{display:none}
/* chevron drawn in CSS (borders), not a font glyph: the ▶ character defaults to
   emoji presentation on iOS/Android, which turned the marker into a play-button
   emoji on phones. A border triangle renders identically on every device. */
.paper details.abs>summary .chev{flex:none;width:0;height:0;
  border-top:5px solid transparent;border-bottom:5px solid transparent;
  border-left:7px solid var(--blue);transition:transform .25s ease}
.paper details.abs[open]>summary .chev{transform:rotate(90deg)}
.paper details.abs>summary:hover,.paper details.abs>summary:focus-visible{color:var(--blue-strong)}

.paper .abs-body{font-family:var(--serif);font-size:1em;line-height:1.63;color:var(--ink);
  max-width:var(--read);margin:.7em 0 0}
.paper .brief-body{max-width:var(--read)}
.paper .brief-body .hook{font-family:var(--serif);font-style:italic;color:var(--blue-strong);
  font-size:1em;margin:.6em 0 0}
.paper .brief-body .summary{font-family:var(--serif);font-size:1em;line-height:1.63;
  color:var(--ink);margin:.5em 0 0}

.paper figure.fig{margin:18px 0 2px;background:var(--paper);border:1px solid var(--line);
  border-radius:14px;padding:14px 14px 9px;box-shadow:var(--shadow);overflow-x:auto;max-width:var(--read)}
.paper figure.fig img{display:block;width:100%;height:auto;max-width:100%}
.paper figure.fig figcaption{font-size:.79rem;color:var(--faint);margin-top:9px;line-height:1.5;
  font-style:italic;border-top:1px solid var(--line);padding-top:8px}
.paper figure.fig figcaption b{font-style:normal;color:var(--muted);font-weight:600}

.paper .media{font-size:.84rem;color:var(--muted);margin:.75em 0 0}
.paper .media .tag{font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--blue);font-size:.72rem;margin-right:9px}
.paper .media a{color:var(--blue-strong);text-decoration:none;font-weight:600}
.paper .media a:hover,.paper .media a:focus-visible{text-decoration:underline}

.paper a.doi{display:inline-flex;gap:6px;align-items:center;margin-top:16px;font-size:.9rem;
  font-weight:600;color:var(--blue-strong);text-decoration:none}
.paper a.doi:hover,.paper a.doi:focus-visible{color:var(--blue-deep)}
.paper a.doi .arw{transition:transform .2s ease}
.paper a.doi:hover .arw{transform:translateX(3px)}

.paper .links{display:flex;flex-wrap:wrap;align-items:center;gap:20px}
.paper .links a.doi.free{color:var(--muted)}
.paper .links a.doi.free:hover,.paper .links a.doi.free:focus-visible{color:var(--blue-strong)}

/* --- shared prose bits (home + recruitment) -------------------------------- */
/* lead paragraph: a touch larger than body, sets the page's opening voice */
/* lede rides ~7% above the body knob so it stays the opening voice */
.paper .lede{font-size:1.07em;line-height:1.6;margin:0;color:var(--ink)}
/* blue keyword accent in place of plain bold */
.paper .kw{color:var(--blue-strong);font-weight:600}
/* prose link: blue with the same underline-grow as the entry titles */
.paper a.link{color:var(--blue-strong);text-decoration:none;
  background:linear-gradient(var(--blue),var(--blue)) no-repeat;
  background-size:0% 1.5px;background-position:0 100%;transition:background-size .28s ease}
.paper a.link:hover,.paper a.link:focus-visible{background-size:100% 1.5px}

/* home hub row: Research · CV · Recruitment, in the eyebrow idiom */
.paper .hub{margin-top:26px;font-size:.8rem;letter-spacing:.11em;
  text-transform:uppercase;font-weight:700;color:var(--faint)}
.paper .hub a{color:var(--blue);text-decoration:none;padding:0 3px}
.paper .hub a:hover,.paper .hub a:focus-visible{color:var(--blue-strong)}
.paper .contact{font-size:.95rem;color:var(--muted);margin-top:16px}
.paper .contact a{color:var(--blue-strong)}
/* a second contact line (e.g. a Scholar profile) sits tight under the email */
.paper .contact + .contact{margin-top:5px}

/* --- recruitment lists + call-to-action ------------------------------------ */
.paper .wrap ul{margin:.55em 0 0;padding-left:1.15em}
.paper .wrap li{margin:.3em 0;line-height:1.55}
.paper .wrap li::marker{color:var(--blue)}
.paper .wrap ul ul{margin:.25em 0 .4em}
.paper .wrap li em{font-style:normal;font-weight:600;color:var(--ink)}
/* closing call-to-action: a soft-tinted panel */
.paper .cta{margin:36px 0 0;padding:16px 18px;background:var(--blue-soft);
  border-radius:12px;font-size:1em;line-height:1.55;color:var(--ink)}

.paper :focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:3px}
@media (prefers-reduced-motion:reduce){.paper *{transition:none!important}}

/* home portrait (rendered by index.swig outside .paper): echo the figure cards */
.portrait{border-radius:14px;border:1px solid #E6ECF0;
  box-shadow:0 1px 2px rgba(22,34,46,.04),0 8px 22px rgba(22,34,46,.05)}