/* =========================================================
   style.css — adapted from the TiddlyWiki "blog-theme" plugin
   for a plain org-mode / ox-publish HTML site.

   Org wraps :html-preamble output in <div id="preamble">, the
   page body in <div id="content">, and (if set) :html-postamble
   in <div id="postamble">. Those three are direct children of
   <body>, so the two-column layout is done with CSS Grid on
   body itself, using #preamble as the sidebar column and
   #content as the main column. See org-html--build-pre/postamble
   in ox-html.el for the wrapping behaviour this relies on.
   ========================================================= */

:root{
  --ink: #0F1720;
  --ink-2: #161F29;
  --ink-3: #1C2732;
  --paper: #ECEEF1;
  --steel: #8593A3;
  --line: #2A3542;

  --amber: #E3A23C;
  --amber-dim: #6b552b;
  --teal: #4FBDAE;
  --teal-dim: #2b5652;
  --rose: #C97B9B;
  --rose-dim: #5c3b4a;

  --font-display: "Space Grotesk", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  --sidebar-w: 288px;
  --content-max-w: 700px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

*{ box-sizing: border-box; }

html{ background: var(--ink); }

/* -------- Two-column shell: body is the grid -------- */
body{
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

a{ color: inherit; }

/* subtle grid texture across the whole page */
.stampfield{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.12;
  mask-image: radial-gradient(ellipse 80% 60% at 0% 0%, black, transparent 70%);
}

/* -------- Sidebar (org's #preamble) -------- */
#preamble{
  grid-column: 1;
  position: relative;
  z-index: 1;
}

.sidebar{
  border-right: 1px solid var(--line);
  padding: 48px 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 36px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar-top{ display: flex; flex-direction: column; align-items: flex-start; }

.sidebar h1{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 20px 0 10px;
}

.role{
  font-size: 0.92rem;
  color: var(--steel);
  margin: 0 0 20px;
}

.contact-line{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--steel);
}

.contact-line a{
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.contact-line a:hover{ border-color: var(--teal); color: var(--paper); }

.rss-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.rss-icon{ color: var(--amber); flex: 0 0 auto; }
.rss-link:hover .rss-icon{ color: var(--paper); }

.stamp{
  position: relative;
  width: 128px;
  height: 128px;
  flex: 0 0 auto;
}

.stamp-photo{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--amber-dim);
  background: var(--ink-2);
}

/* -------- Nav -------- */
.side-nav{
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-item{
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: none;
  border: none;
  border-left: 2px solid transparent;
  color: var(--steel);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  text-align: left;
  text-decoration: none;
  padding: 11px 0 11px 14px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.nav-mark{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
  flex: 0 0 auto;
}

.nav-item:hover{ color: var(--paper); background: var(--ink-2); }

.nav-item--rose.current{ color: var(--rose); border-color: var(--rose); background: var(--ink-2); }
.nav-item--amber.current{ color: var(--amber); border-color: var(--amber); background: var(--ink-2); }
.nav-item--teal.current{ color: var(--teal); border-color: var(--teal); background: var(--ink-2); }
.nav-item.current .nav-mark{ opacity: 1; }

.blog-nav{
  list-style: none;
  margin: 0 0 4px;
  padding: 0 0 6px 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.blog-nav-link{
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
  padding: 6px 0;
  text-decoration: none;
  border-left: 1px solid var(--line);
  padding-left: 12px;
}
.blog-nav-link:hover{ border-color: var(--rose); }
.blog-nav-date{
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--steel);
  flex: 0 0 auto;
}
.blog-nav-sep{
  color: var(--line);
  flex: 0 0 auto;
}
.blog-nav-label{
  font-size: 13px;
  color: var(--paper);
  opacity: 0.85;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.blog-nav-link:hover .blog-nav-label{ color: var(--rose); opacity: 1; }

@media (max-width: 860px){
  .blog-nav{ display: none; }
}

.sidebar-footer{
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--steel);
  opacity: 0.7;
}

@media (max-width: 860px){
  body{ grid-template-columns: 1fr; }

  .sidebar{
    position: relative;
    height: auto;
    overflow-y: visible;
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 32px 24px 0;
    gap: 24px;
  }

  .sidebar-top{ flex-direction: row; align-items: center; gap: 18px; }
  /* Alternative, if the row above still feels cramped once retested:
     stack instead of row, so avatar/name/role each get the full width.
       .sidebar-top{ flex-direction: column; align-items: flex-start; gap: 8px; }
       .stamp{ width: 64px; height: 64px; }
  */
  .sidebar h1{ margin: 0 0 4px; font-size: 1.4rem; }
  .role{ margin: 0 0 8px; }
  .stamp{ width: 84px; height: 84px; }
  .contact-line{ display: none; }

  .side-nav{
    flex-direction: row;
    gap: 4px;
    overflow-x: auto;
    margin: 0 -24px;
    padding: 0 24px;
    border-top: 1px solid var(--line);
  }

  .nav-item{
    border-left: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    padding: 14px 4px;
  }
  .nav-item--rose.current,
  .nav-item--amber.current,
  .nav-item--teal.current{ background: none; }

  .sidebar-footer{ display: none; }
}

/* =========================================================
   Content (org's #content)
   ========================================================= */
#content{
  grid-column: 2;
  min-width: 0;
  padding: 56px 40px 80px;
  position: relative;
  z-index: 1;
  max-width: var(--content-max-w);
}

@media (max-width: 860px){
  /* This has to live *here*, after #content's unconditional
     grid-column:2 declaration above — not up near body's
     grid-template-columns override. #content and this rule have
     identical specificity (a single ID selector each), so CSS breaks
     the tie by source order: whichever comes later in the file wins,
     on every screen size, regardless of which one is "supposed" to
     apply at the current viewport. Putting this fix earlier in the
     file (right after grid-template-columns, where it reads more
     naturally) meant #content's later unconditional rule silently
     overrode it on all screen sizes — a real, confirmed bug, not a
     caching or viewport-detection issue. */
  #preamble, #content{ grid-column: 1; }

  #content{ padding: 40px 24px 64px; }
}

#content h1.title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.1;
  letter-spacing: -.025em;
  margin: 0 0 16px;
  color: var(--paper);
}

/* =========================================================
   Table of contents — #+OPTIONS: toc:t (org-html-toc)
   ========================================================= */
#table-of-contents{
  margin: 8px 0 40px;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--ink-2);
}
#table-of-contents h1,
#table-of-contents h2{
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--steel);
}
#text-table-of-contents ul{
  list-style: none;
  margin: 0;
  padding-left: 0;
}
#text-table-of-contents ul ul{
  padding-left: 18px;
  margin-top: 4px;
}
#text-table-of-contents li{ margin: 6px 0; }
#text-table-of-contents a{
  text-decoration: none;
  border-bottom: 1px solid transparent;
  font-size: 14.5px;
}
#text-table-of-contents a:hover{ color: var(--rose); border-color: var(--rose); }

#content p.subtitle{
  margin: 0 0 32px;
  color: var(--steel);
  font-size: 1.08rem;
}

.view-title{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  margin: 0 0 14px;
  color: var(--rose);
}

.view-lede{
  color: var(--steel);
  max-width: 62ch;
  margin: 0 0 32px;
}

.article-kicker{
  margin: 0 0 10px;
  color: var(--rose);
  font-family: var(--font-mono);
  font-size: 12px;
}

#content h2{
  margin: 42px 0 14px;
  color: var(--rose);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.45rem;
  line-height: 1.25;
}

#content h3{
  margin: 30px 0 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.25;
}

#content p, #content li{ max-width: 68ch; }
#content p{ margin: 0 0 18px; }
#content ul, #content ol{ margin: 0 0 18px; padding-left: 22px; }

#content a{
  color: var(--rose);
  text-decoration-color: var(--rose-dim);
}
#content a:hover{ text-decoration-color: var(--rose); }

#content code{
  padding: .12em .35em;
  border: 1px solid var(--line);
  background: var(--ink-2);
  color: var(--rose);
  font-family: var(--font-mono);
  font-size: .88em;
}

#content pre{
  overflow-x: auto;
  margin: 22px 0;
  padding: 18px;
  border: 1px solid var(--line);
  background: var(--ink-2);
}
#content pre code{ padding: 0; border: 0; background: none; }

/* EXAMPLE blocks (org-html-example-block wraps in
   .org-example-container > pre.example) — used here for email/message
   headers. Left-border-only, no box, so it reads as a header card
   rather than a code block. */
.org-example-container pre.example{
  margin: 22px 0 0;
  padding: 10px 0 10px 18px;
  border: none;
  border-left: 3px solid var(--amber-dim);
  background: transparent;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--steel);
}

/* BLOCKQUOTE — quoted email bodies, pull quotes. Complementary left
   border in a different accent, so a header+quote pair (like a quoted
   email) reads as one connected unit with two visually distinct parts. */
#content blockquote{
  margin: 0 0 22px;
  padding: 14px 0 2px 18px;
  border-left: 3px solid var(--teal-dim);
  color: var(--steel);
  font-style: italic;
}
#content blockquote p{ margin: 0 0 14px; }
#content blockquote p:last-child{ margin-bottom: 0; }
#content blockquote a{ font-style: normal; }

/* =========================================================
   Code/command blocks — #+BEGIN_SRC ... #+END_SRC
   (org-html-src-block always wraps output in .org-src-container > pre.src)
   ========================================================= */
.org-src-container{
  position: relative;
  margin: 22px 0;
}
.org-src-container pre.src{
  margin: 0;
  padding: 18px;
  padding-top: 40px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.5;
}
.org-src-container .org-src-name{
  position: absolute;
  top: 10px;
  left: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--steel);
}
.copy-code-btn{
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  background: var(--ink-3);
  border: 1px solid var(--line);
  color: var(--steel);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
}
.copy-code-btn:hover{ color: var(--paper); border-color: var(--steel); }
.copy-code-btn.copied{ color: var(--teal); border-color: var(--teal-dim); }

/* =========================================================
   Blog index: definition list of posts
   ========================================================= */
#content dl dt{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
#content dl dt:first-child{ margin-top: 0; padding-top: 0; border-top: none; }
#content dl dt a{ text-decoration: none; border-bottom: 1px solid transparent; }
#content dl dt a:hover{ color: var(--rose); border-color: var(--rose); }
#content dl dd{
  margin: 6px 0 0 0;
  color: var(--steel);
  font-size: 14px;
  max-width: 60ch;
}

/* =========================================================
   Org tables — used for the Projects listing
   ========================================================= */
#content table{
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin: 0 0 24px;
}
#content th{
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--steel);
  padding: 0 12px 10px 0;
  border-bottom: 1px solid var(--line);
}
#content td{
  padding: 12px 12px 12px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
#content tr:last-child td{ border-bottom: none; }

/* =========================================================
   About / career
   ========================================================= */
.resume-link{
  display: flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
  text-decoration: none;
  border: 1px solid var(--teal-dim);
  background: var(--ink-2);
  padding: 14px 20px;
  border-radius: 6px;
  margin-bottom: 36px;
}
.resume-link:hover{ border-color: var(--teal); background: var(--ink-3); }
.resume-link-title{ display: block; font-weight: 600; font-size: 14.5px; }
.resume-link-sub{
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--steel);
  margin-top: 2px;
}

.stat-row{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  padding: 24px 0;
  margin-bottom: 36px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stat{ display: flex; flex-direction: column; gap: 4px; }
.stat-num{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  color: var(--teal);
}
.stat-label{
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--steel);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
@media (max-width: 560px){
  .stat-row{ grid-template-columns: repeat(2, 1fr); row-gap: 20px; }
}

.timeline{ list-style: none; margin: 0 0 36px; padding: 0; border-left: 1px solid var(--line); }
.timeline li{ position: relative; padding: 0 0 30px 26px; }
.timeline li::before{
  content: ""; position: absolute; left: -4.5px; top: 5px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--teal);
}
.timeline li:last-child{ padding-bottom: 0; }
.tl-year{ display: block; font-family: var(--font-mono); font-size: 12px; color: var(--teal); margin-bottom: 6px; }
.timeline h3{ font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; margin: 0 0 8px; }
.timeline p{ margin: 0; color: var(--steel); max-width: 68ch; font-size: 14.5px; }

/* =========================================================
   Post article header + feedback/reactions (static mailto links)
   ========================================================= */
.back-to-blog{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 30px;
  padding: 8px 12px;
  border: 1px solid var(--rose-dim);
  color: var(--rose);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 12px;
}
.back-to-blog:hover{ background: var(--ink-2); border-color: var(--rose); }

.feedback-section{
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px dashed var(--line);
}
.feedback-heading{
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--paper);
}
.feedback-note{
  margin: 0 0 18px;
  color: var(--steel);
  font-size: 13px;
  font-family: var(--font-mono);
}
.reaction-row{ display: flex; flex-wrap: wrap; gap: 10px; }
.reaction-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  background: var(--ink-2);
  color: var(--paper);
  text-decoration: none;
  font-size: 14px;
  border-radius: 6px;
}
.reaction-btn:hover{ border-color: var(--rose); background: var(--ink-3); }

/* details/summary used for the collapsible sections in some posts */
#content details{
  margin: 18px 0;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--ink-2);
}
#content summary{
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--paper);
}
#content details[open] summary{ margin-bottom: 10px; }

/* Focus states */
a:focus-visible, button:focus-visible{
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 2px;
}