/* =========================================================================
   Robert Seidl - shared editorial design system
   Light default + dark mode (toggle persists to localStorage; honours
   prefers-color-scheme on first visit). Every colour is a token, so dark
   mode is a pure variable override.
   ========================================================================= */

:root{
  --bg:#FBFAF7; --card:#FFFFFF; --ink:#1A1916; --text:#454239; --muted:#8A8674;
  --line:#E8E4DA; --accent:#1E4E8F; --accent-soft:rgba(30,78,143,.07); --accent-line:rgba(30,78,143,.22);
  --btn-bg:#1E4E8F; --btn-ink:#FFFFFF;
  --display:'Newsreader',Georgia,serif; --sans:'IBM Plex Sans','Helvetica Neue',sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
}
:root[data-theme="dark"]{
  --bg:#15140E; --card:#1E1C16; --ink:#F3F0E7; --text:#C7C3B6; --muted:#8C8775;
  --line:#2C2A22; --accent:#7DAAE6; --accent-soft:rgba(125,170,230,.10); --accent-line:rgba(125,170,230,.32);
  --btn-bg:#2C66B5; --btn-ink:#FFFFFF;
}

/* ---- Base / reset the bootstrap (cosmo) shell into the design ---- */
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
*,*::before,*::after{ box-sizing:border-box; }

/* Quarto content container -> full-bleed; each block centres itself. */
#quarto-content, .quarto-container, #quarto-document-content, main.content,
.page-columns{ max-width:100% !important; padding:0 !important; margin:0 !important; }
/* The four hand-designed pages carry no `title:`, so this only suppresses the
   empty title block Quarto still emits (avoids a duplicate empty banner). When
   real blog posts ship, give the post template its own designed title block. */
#title-block-header, .quarto-title-block{ display:none !important; }

h1,h2,h3,h4,h5,h6{ color:var(--ink); text-shadow:none; }
p, li, dd, blockquote{ color:var(--text); }
a{ color:var(--accent); text-decoration:none; }

/* Centred page wrapper used by every page's content. */
.rs-main{ max-width:1120px; margin:0 auto; padding:0 clamp(20px,5vw,40px); }

/* =========================================================================
   Nav
   ========================================================================= */
.rs-nav{ position:sticky; top:0; z-index:50; background:var(--bg); background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.rs-nav > nav{ max-width:1120px; margin:0 auto; padding:.85rem clamp(20px,5vw,40px); display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.rs-brand{ display:flex; align-items:center; gap:.6rem; }
.rs-logo{ display:inline-grid; place-items:center; width:30px; height:30px; border:1.5px solid var(--ink); border-radius:6px; font-family:var(--mono); font-size:.72rem; font-weight:500; letter-spacing:.02em; color:var(--ink); }
.rs-wordmark{ font-family:var(--mono); font-size:.82rem; letter-spacing:.04em; color:var(--ink); }
.rs-nav-right{ display:flex; align-items:center; gap:1.4rem; }
.rs-nav-links{ display:flex; align-items:center; gap:1.6rem; }
.rs-navlink{ font-family:var(--mono); font-size:.78rem; letter-spacing:.03em; color:var(--muted); transition:color .15s ease; }
.rs-navlink:hover{ color:var(--ink); }
.rs-navlink.is-active{ color:var(--ink); }
.rs-theme-toggle{ display:inline-grid; place-items:center; width:32px; height:32px; border:1px solid var(--line); border-radius:6px; background:transparent; color:var(--ink); cursor:pointer; font-size:.95rem; line-height:1; transition:border-color .15s ease, color .15s ease; }
.rs-theme-toggle:hover{ border-color:var(--accent); color:var(--accent); }

/* =========================================================================
   Shared building blocks
   ========================================================================= */
.rs-section{ scroll-margin-top:5rem; padding:clamp(2.5rem,6vw,4.5rem) 0; border-top:1px solid var(--line); }
.rs-section--first{ border-top:0; }
.rs-eyebrow{ font-family:var(--mono); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }
.rs-seclabel{ display:flex; align-items:center; gap:1rem; margin-bottom:2.4rem; }
.rs-seclabel .rs-rule{ flex:1; height:1px; background:var(--line); }
.rs-col-label{ font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:.6rem; }
.rs-tagset{ display:flex; flex-wrap:wrap; gap:.4rem; }
.rs-tag{ font-family:var(--mono); font-size:.72rem; color:var(--text); border:1px solid var(--line); border-radius:20px; padding:.25rem .65rem; }
.rs-chip{ font-family:var(--mono); font-size:.72rem; color:var(--text); border:1px solid var(--line); border-radius:5px; padding:.25rem .6rem; }

/* Inner-page header (About / Interests / Blog) */
.rs-pagehead{ padding:clamp(3.5rem,8vw,5.5rem) 0 clamp(2rem,4vw,3rem); }
.rs-pagehead .rs-kicker{ font-family:var(--mono); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:1.2rem; }
.rs-pagehead h1{ font-family:var(--display); font-weight:400; font-size:clamp(2.1rem,5vw,3.4rem); line-height:1.1; letter-spacing:-.015em; color:var(--ink); margin:0 0 1.1rem; }
.rs-pagehead p{ font-size:1.12rem; line-height:1.6; color:var(--text); max-width:40em; margin:0; }

/* Buttons */
.rs-btn{ display:inline-flex; align-items:center; gap:.5rem; font-weight:500; font-size:.95rem; padding:.78rem 1.4rem; border-radius:6px; cursor:pointer; }
.rs-btn-primary{ background:var(--btn-bg); color:var(--btn-ink); transition:opacity .15s ease; }
.rs-btn-primary:hover{ opacity:.9; }
.rs-btn-ghost{ background:transparent; color:var(--ink); border:1px solid var(--line); transition:border-color .15s ease, color .15s ease; }
.rs-btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
.rs-textlink{ font-family:var(--mono); font-size:.82rem; color:var(--accent); transition:opacity .15s ease; }
.rs-textlink:hover{ opacity:.7; }

/* =========================================================================
   Hero (home)
   ========================================================================= */
.rs-hero{ display:flex; flex-wrap:wrap; gap:clamp(2rem,5vw,4.5rem); padding:clamp(3.5rem,8vw,6.5rem) 0 clamp(3rem,6vw,5rem); align-items:flex-start; }
.rs-hero-main{ flex:1 1 440px; min-width:300px; }
.rs-kicker{ font-family:var(--mono); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:1.4rem; }
.rs-h1{ font-family:var(--display); font-weight:400; font-size:clamp(2.3rem,5.2vw,3.85rem); line-height:1.08; letter-spacing:-.015em; color:var(--ink); margin:0 0 1.6rem; }
.rs-h1 em{ font-style:italic; }
.rs-lead{ font-size:1.12rem; line-height:1.6; color:var(--text); max-width:36em; margin:0 0 2rem; }
.rs-cta-row{ display:flex; flex-wrap:wrap; gap:.75rem; }

.rs-card{ flex:0 1 320px; min-width:260px; border:1px solid var(--line); border-radius:12px; background:var(--card); padding:1.6rem 1.7rem; box-shadow:0 1px 2px rgba(26,25,22,.03); }
.rs-card-label{ font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:.5rem; }
.rs-card-divider{ height:1px; background:var(--line); margin:1.3rem 0; }
.rs-card-lead{ font-family:var(--display); font-size:1.2rem; color:var(--ink); line-height:1.3; }
.rs-card-sub{ font-size:.92rem; color:var(--text); margin-top:.15rem; }
.rs-card-sub .rs-date{ font-family:var(--mono); color:var(--muted); font-size:.82rem; }
.rs-card-val{ font-size:.98rem; color:var(--ink); }

/* =========================================================================
   Focus grid (home) / generic feature columns
   ========================================================================= */
.rs-focus-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:clamp(1.8rem,4vw,3.2rem); }
.rs-focus-item{ border-top:2px solid var(--ink); padding-top:1.2rem; }
.rs-focus-num{ font-family:var(--mono); font-size:.8rem; color:var(--muted); margin-bottom:.7rem; }
.rs-focus-h{ font-family:var(--display); font-weight:500; font-size:1.45rem; color:var(--ink); margin:0 0 .7rem; }
.rs-focus-p{ font-size:.98rem; line-height:1.6; color:var(--text); margin:0; }

/* =========================================================================
   Experience / education timelines (home + about)
   ========================================================================= */
.rs-exp-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:clamp(2rem,5vw,4rem); }
.rs-exp-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; padding:1rem 0; border-top:1px solid var(--line); }
.rs-exp-col > .rs-exp-row:last-child{ border-bottom:1px solid var(--line); }
.rs-exp-role{ font-weight:600; color:var(--ink); font-size:1rem; }
.rs-exp-org{ color:var(--muted); font-size:.9rem; }
.rs-exp-date{ font-family:var(--mono); font-size:.82rem; color:var(--muted); white-space:nowrap; }

/* =========================================================================
   Cards / publications (home + about)
   ========================================================================= */
.rs-work-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,520px)); gap:1.5rem; margin-bottom:2.6rem; }
.rs-work-card{ border:1px solid var(--line); border-radius:12px; background:var(--card); padding:1.9rem; transition:border-color .2s ease, box-shadow .2s ease; }
.rs-work-card:hover{ border-color:var(--accent-line); box-shadow:0 8px 30px rgba(26,25,22,.06); }
.rs-work-tag{ font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:1rem; }
.rs-work-h{ font-family:var(--display); font-weight:500; font-size:1.6rem; color:var(--ink); margin:0 0 .8rem; }
.rs-work-p{ font-size:.98rem; line-height:1.62; color:var(--text); margin:0 0 1.2rem; }
.rs-sub{ font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:1rem; }
.rs-pub{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem 0; border-top:1px solid var(--line); }
.rs-pub--last{ border-bottom:1px solid var(--line); }
a.rs-pub:hover .rs-pub-title{ color:var(--accent); }
.rs-pub-title{ font-weight:500; color:var(--ink); font-size:1rem; transition:color .15s ease; }
.rs-pub-meta{ font-family:var(--mono); color:var(--muted); font-size:.78rem; margin-top:.15rem; }
.rs-pub-cta{ font-family:var(--mono); font-size:.8rem; color:var(--accent); white-space:nowrap; }

/* Skills grid (about) */
.rs-skill-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.5rem; }
.rs-skill-card{ border:1px solid var(--line); border-radius:12px; background:var(--card); padding:1.5rem 1.6rem; }
.rs-skill-h{ font-family:var(--display); font-weight:500; font-size:1.2rem; color:var(--ink); margin:0 0 .5rem; }
.rs-skill-p{ font-size:.95rem; line-height:1.6; color:var(--text); margin:0; }

/* =========================================================================
   Reading: book accordion + rows (home + interests)
   ========================================================================= */
.rs-read-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(2rem,5vw,4rem); }
.rs-read-list{ border-bottom:1px solid var(--line); }
.rs-book-head{ display:flex; justify-content:space-between; align-items:center; gap:1rem; width:100%; text-align:left; background:none; border:0; border-top:1px solid var(--line); padding:.75rem 0; cursor:pointer; font-family:var(--sans); color:inherit; -webkit-appearance:none; appearance:none; }
.rs-book-title{ color:var(--ink); font-size:1rem; }
.rs-book-meta{ display:flex; align-items:center; gap:.9rem; flex:0 0 auto; }
.rs-book-author{ color:var(--muted); font-size:.86rem; }
.rs-book-toggle{ font-family:var(--mono); color:var(--accent); font-size:1.05rem; line-height:1; transition:transform .2s ease; }
.rs-book.is-open .rs-book-toggle{ transform:rotate(45deg); }
.rs-book-panel{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.rs-book.is-open .rs-book-panel{ max-height:480px; }
.rs-book-body{ display:flex; gap:1.1rem; align-items:flex-start; padding:.55rem 0 .9rem; }
.rs-book-cover{ flex:0 0 auto; width:74px; height:auto; border-radius:4px; border:1px solid var(--line); box-shadow:0 2px 8px rgba(26,25,22,.12); background:var(--card); }
.rs-book-text{ flex:1 1 auto; min-width:0; }
.rs-book-desc{ padding:.1rem 0 .15rem; color:var(--text); font-size:.95rem; line-height:1.6; max-width:52em; margin:0; }
.rs-book-link{ display:inline-block; font-family:var(--mono); font-size:.76rem; color:var(--accent); padding:.5rem 0 0; transition:opacity .15s ease; }
.rs-book-link:hover{ opacity:.7; }

.rs-row{ display:flex; justify-content:space-between; gap:1rem; padding:.7rem 0; border-top:1px solid var(--line); }
.rs-row--last{ border-bottom:1px solid var(--line); }
.rs-row-title{ color:var(--ink); }
a.rs-row:hover .rs-row-title{ color:var(--accent); }
.rs-row-sub{ color:var(--muted); font-size:.9rem; }
.rs-row-cta{ font-family:var(--mono); color:var(--muted); font-size:.78rem; white-space:nowrap; }
.rs-note{ font-size:.95rem; line-height:1.6; color:var(--text); margin:1.4rem 0 1.2rem; max-width:46em; }

/* =========================================================================
   Contact (home)
   ========================================================================= */
.rs-contact{ scroll-margin-top:5rem; padding:clamp(3rem,7vw,5.5rem) 0 clamp(3rem,6vw,4.5rem); border-top:1px solid var(--line); }
.rs-contact-h{ font-family:var(--display); font-weight:400; font-size:clamp(2rem,5vw,3.2rem); letter-spacing:-.01em; color:var(--ink); margin:0 0 1rem; }
.rs-contact-p{ font-size:1.08rem; line-height:1.6; color:var(--text); max-width:32em; margin:0 0 2.2rem; }
.rs-contact-row{ display:flex; flex-wrap:wrap; gap:.8rem; }
.rs-contact-link{ display:inline-flex; align-items:center; gap:.55rem; border:1px solid var(--line); border-radius:8px; padding:.8rem 1.3rem; color:var(--ink); font-weight:500; font-size:.95rem; transition:border-color .15s ease, color .15s ease; }
.rs-contact-link:hover{ border-color:var(--accent); color:var(--accent); }
.rs-contact-link .rs-arrow{ font-family:var(--mono); font-size:.8rem; color:var(--muted); }

/* =========================================================================
   Blog listing (Quarto-generated cards restyled)
   ========================================================================= */
.quarto-listing{ max-width:1120px; margin:0 auto; padding:0 clamp(20px,5vw,40px) clamp(3rem,7vw,5rem); }
.quarto-listing-category-title{ font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 .8rem; }
.quarto-listing-category{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2.2rem; }
.quarto-listing-category .category{ font-family:var(--mono); font-size:.74rem; color:var(--text); border:1px solid var(--line); border-radius:20px; padding:.25rem .7rem; cursor:pointer; transition:border-color .15s ease, color .15s ease; }
.quarto-listing-category .category:hover, .quarto-listing-category .category.active{ border-color:var(--accent); color:var(--accent); }

.list.grid{ gap:1.5rem; }
.quarto-listing .card{ background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; transition:border-color .2s ease, box-shadow .2s ease; height:100%; }
.quarto-listing .card:hover{ border-color:var(--accent-line); box-shadow:0 8px 30px rgba(26,25,22,.06); }
.quarto-listing .card-img-top, .quarto-listing .thumbnail-image{ width:100%; height:150px; object-fit:cover; border-bottom:1px solid var(--line); margin:0; }
.quarto-listing .card-body, .quarto-listing .post-contents{ padding:1.2rem 1.3rem; }
.quarto-listing .listing-title, .quarto-listing .card-title{ font-family:var(--display); font-weight:500; font-size:1.2rem; color:var(--ink); margin:.15rem 0 .45rem; line-height:1.25; }
.quarto-listing .listing-date, .quarto-listing .card-text{ font-family:var(--mono); font-size:.76rem; color:var(--muted); }
.quarto-listing .listing-categories{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.55rem; }
.quarto-listing .listing-category{ font-family:var(--mono); font-size:.68rem; letter-spacing:.04em; text-transform:uppercase; color:var(--accent); border:1px solid var(--line); border-radius:5px; padding:.18rem .5rem; cursor:pointer; }
.quarto-listing .card a, .quarto-listing a.quarto-grid-link{ color:inherit; }
.rs-empty{ font-size:1rem; line-height:1.6; color:var(--muted); border:1px dashed var(--line); border-radius:12px; padding:2rem 1.6rem; text-align:center; }

/* =========================================================================
   Footer
   ========================================================================= */
.rs-foot{ border-top:1px solid var(--line); margin-top:2rem; }
.rs-foot-inner{ max-width:1120px; margin:0 auto; padding:1.6rem clamp(20px,5vw,40px); display:flex; flex-wrap:wrap; gap:.8rem 1.4rem; justify-content:space-between; align-items:center; }
.rs-foot-meta{ font-family:var(--mono); font-size:.76rem; color:var(--muted); }
.rs-foot-nav{ display:flex; gap:1.2rem; flex-wrap:wrap; }
.rs-foot-link{ font-family:var(--mono); font-size:.76rem; color:var(--muted); transition:color .15s ease; }
.rs-foot-link:hover{ color:var(--accent); }

/* =========================================================================
   Focus ring, responsive, motion
   ========================================================================= */
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:3px; }
:focus:not(:focus-visible){ outline:none; }

@media (max-width:680px){ .rs-nav-links{ display:none; } }
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; }
  html{ scroll-behavior:auto !important; }
}