/* Matches the reference homepage: Bootstrap 3 metrics, white page, Helvetica 14px, #333 text, #1d3b6f links.
   Header (photo + name block) on top, a thin rule, then a stacked text menu on the left and one content column. */
:root {
  --text: #333333;
  --muted: #777777;
  --link: #1d3b6f;
  --rule: #eeeeee;
  --border: #cccccc;
  --soft: #f7f7f7;
  --code: #f5f5f5;
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: Menlo, Monaco, Consolas, "Courier New", monospace;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #ffffff; color: var(--text); font: 14px/1.42857 var(--font); }
a { color: var(--link); text-decoration: none; }
a:hover, a:focus { color: #0f2547; text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

.container { max-width: 1170px; margin: 0 auto; padding: 0 15px 60px; }

/* Header: photo, then name / title / email / icons */
.masthead { display: flex; align-items: center; gap: 20px; padding: 40px 0 20px; margin-left: calc(16.667% + 15px); }
.photolink { flex: none; }
.photo { display: block; width: 140px; height: 140px; border-radius: 50%; object-fit: cover; }
.photo.initials { display: grid; place-items: center; background: #f2f2f2; color: #999999; font-size: 48px; font-weight: 300; }
.who h1 { font-size: 36px; font-weight: 500; line-height: 1.1; margin: 0 0 10px; }
.who h1 a { color: var(--text); }
.who h1 a:hover { text-decoration: none; }
.tagline { font-size: 21px; font-weight: 300; line-height: 1.3; margin: 0 0 4px; }
.icons { display: flex; align-items: center; gap: 22px; margin-top: 6px; }
.icons a { display: inline-flex; align-items: center; gap: 7px; font-size: 17px; font-weight: 400; }
.icons a:hover { text-decoration: none; }
.icons a:hover span { text-decoration: underline; }
.icons svg { width: 19px; height: 19px; fill: currentColor; display: block; flex: none; }
.icons svg.line { fill: none; width: 20px; height: 20px; }

/* The two thin rules under the header: one under the menu, one under the content */
.rules { display: grid; grid-template-columns: 16.667% minmax(0, 1fr); gap: 30px; }
.rules hr { border: 0; border-top: 1px solid var(--rule); margin: 20px 0; }

.row { display: grid; grid-template-columns: 16.667% minmax(0, 1fr); gap: 30px; }
.side ul { list-style: none; margin: 0; padding: 0; }
.side li a { display: block; padding: 10px 15px; border-radius: 4px; font-size: 14px; }
.side li a:hover { background: #eeeeee; text-decoration: none; }
.side li.active a { background: #eeeeee; color: #1d3b6f; }
.main { min-width: 0; max-width: 880px; }

@media (max-width: 767px) {
  .masthead { margin-left: 0; flex-wrap: wrap; padding-top: 24px; }
  .photo { width: 96px; height: 96px; }
  .who h1 { font-size: 30px; }
  .tagline { font-size: 17px; }
  .rules { grid-template-columns: minmax(0, 1fr); }
  .rules .r-side { display: none; }
  .row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .side ul { display: flex; flex-wrap: wrap; gap: 0 4px; margin: -8px 0 10px -15px; }
}

/* Type, Bootstrap 3 scale */
h2 { font-size: 30px; font-weight: 500; line-height: 1.1; margin: 20px 0 10px; padding-bottom: 9px; border-bottom: 1px solid var(--rule); }
h3 { font-size: 24px; font-weight: 500; line-height: 1.1; margin: 20px 0 10px; }
h4 { font-size: 18px; font-weight: 500; line-height: 1.1; margin: 16px 0 8px; }
p { margin: 0 0 10px; }
ul, ol { margin: 0 0 10px; padding-left: 40px; }
li { margin-bottom: 6px; }
ul.plain li { margin-bottom: 8px; }
b, strong { font-weight: 700; }

/* List entries, like the reference's publication entries */
.entry { margin: 0 0 18px; }
.entry p { margin: 0; }
.etitle { font-weight: 700; }
.emeta { color: var(--muted); }
.btns { margin-top: 6px !important; display: flex; gap: 6px; flex-wrap: wrap; }
.btn { display: inline-block; padding: 1px 6px; font-size: 12px; line-height: 1.5; color: var(--text); background: #ffffff; border: 1px solid var(--border); border-radius: 3px; }
.btn:hover { background: #e6e6e6; border-color: #adadad; color: var(--text); text-decoration: none; }

footer { margin-top: 50px; padding-top: 14px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 12px; }

/* Article pages (notes, log days, posts) */
.back { margin: 0 0 6px; }
.note .ptitle { margin-top: 0; }
.stamp { color: var(--muted); margin-top: -4px; }
.note h1 { font-size: 30px; font-weight: 500; }
.note h2 { font-size: 24px; }
.note h3 { font-size: 19px; }
.note h4 { font-size: 16px; }
.note li.task { list-style: none; margin-left: -20px; }
.note img { display: block; max-width: 100%; height: auto; border: 1px solid var(--rule); border-radius: 4px; margin: 12px 0 16px; }
code { font-family: var(--mono); font-size: 90%; color: #c7254e; background: #f9f2f4; padding: 2px 4px; border-radius: 4px; }
pre { font-family: var(--mono); font-size: 13px; background: var(--code); border: 1px solid var(--border); border-radius: 4px; padding: 9.5px; overflow-x: auto; line-height: 1.42857; }
pre code { color: inherit; background: none; padding: 0; font-size: inherit; }
.tablewrap { overflow-x: auto; margin: 10px 0 16px; }
table { border-collapse: collapse; }
th, td { border: 1px solid #dddddd; padding: 6px 10px; text-align: left; vertical-align: top; }
th { background: var(--soft); }
blockquote { margin: 0 0 16px; padding: 8px 18px; border-left: 5px solid var(--rule); font-size: 15px; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 20px 0; }

/* Obsidian callouts, styled like Bootstrap alerts */
.callout, details.callout { border: 1px solid #d6dce7; background: #f4f6fa; border-radius: 4px; padding: 10px 15px; margin: 0 0 16px; }
.callout > :last-child { margin-bottom: 0; }
.ctitle, details.callout summary { font-weight: 700; margin-bottom: 4px; }
details.callout summary { cursor: pointer; }
.callout.tip, .callout.example { border-color: #d6e9c6; background: #f6fbf3; }
.callout.warning, .callout.important { border-color: #faebcc; background: #fdf9ef; }
.callout.note, .callout.info, .callout.quote { border-color: #e3e3e3; background: #f7f7f7; }

/* Experience logos */
.job { display: flex; gap: 14px; align-items: flex-start; }
.logo { flex: none; width: 48px; height: 48px; border: 1px solid var(--rule); border-radius: 10px; display: grid; place-items: center; background: #ffffff; position: relative; overflow: hidden; }
.logo::before { content: attr(data-l); font-size: 18px; font-weight: 700; color: #999999; }
.logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* About page photos */
.photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 640px; }
.photos figure { margin: 0; }
.photos img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; }
.photos figcaption { color: var(--muted); font-size: 12px; margin-top: 4px; font-family: var(--term); }
@media (max-width: 480px) { .photos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

h3.with-sub { margin-bottom: 2px; }
.subhead { font-family: var(--term); }
.subhead { font-size: 12px; color: #777777; margin: 0 0 10px; }

/* Roadmap */
table.roadmap td:first-child { color: #777777; width: 2em; }
table.roadmap tr.now td { background: #f4f6fa; }
.status { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 10px; border: 1px solid #cccccc; color: #777777; white-space: nowrap; }
.status.in-progress { border-color: #1d3b6f; color: #1d3b6f; }
.status.done { border-color: #3c9a5f; color: #3c9a5f; }

/* Contact and header email */
.btn-lg { font-size: 15px; padding: 7px 18px; border-radius: 4px; }
.plainlink { color: inherit; }
.plainlink:hover { color: var(--link); text-decoration: none; }

/* ---------- Terminal accents (kept small: prompts, menu, buttons) ---------- */
:root {
  --term: "JetBrains Mono", Menlo, Consolas, "Courier New", monospace;
  --t-user: #1d3b6f;   /* Ubuntu prompt green, darkened for white */
  --t-path: #5a7397;   /* Ubuntu prompt blue */
  --t-dim: #8a8f98;
}
.prompt { font-family: var(--term); font-size: 13px; font-weight: 400; color: var(--text); margin: 0 0 6px; letter-spacing: 0; }
.prompt .u { color: var(--t-user); font-weight: 600; }
.prompt .cwd { color: var(--t-path); font-weight: 600; }
.prompt .dollar { color: var(--t-dim); }
.prompt .cmd { color: var(--text); }
.who .prompt { margin-bottom: 8px; }

/* The page's own command, used as its title */
h2.prompt.title { font-size: 18px; border: 0; padding: 0; margin: 0 0 16px; line-height: 1.4; }
h2.prompt.title .cmd { font-weight: 600; }

/* Blinking block cursor at the end of the page */
.cursor { display: inline-block; width: 0.6em; height: 1.1em; background: var(--text); vertical-align: -0.18em; margin-left: 1px; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }

/* Menu reads like `ls` output */
.side li a { font-family: var(--term); font-size: 13.5px; padding: 8px 15px; }
.side li.active a::before { content: "> "; color: var(--t-user); }

/* Section headings inside a page look like shell comments */
.main > h3::before, .main > h4::before { content: "# "; color: var(--t-dim); font-family: var(--term); font-weight: 400; }

/* Command-style buttons and back link */
.btn { font-family: var(--term); font-size: 12px; text-transform: none; }
.back a { font-family: var(--term); font-size: 13px; }
.back a::before { content: none; }

/* Footer: date, then an empty prompt with the cursor */
footer { font-size: 12px; }
footer .prompt { font-size: 12px; margin: 0; }
footer .out { font-family: var(--term); color: var(--t-dim); margin: 0 0 4px; }

/* About: where it started (photo beside a short story) and grouped event photos */
.origin { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 18px; align-items: start; max-width: 680px; }
.photos.one { grid-template-columns: minmax(0, 1fr); }
.photos + .subhead { margin-top: 16px; }
@media (max-width: 520px) { .origin { grid-template-columns: minmax(0, 1fr); } .origin .photos.one { max-width: 220px; } }

/* Outside of work: a simple newest-first timeline */
ol.timeline { list-style: none; margin: 6px 0 0; padding: 0 0 0 22px; border-left: 2px solid #e3e7ee; max-width: 660px; }
ol.timeline li { position: relative; margin: 0 0 22px; }
ol.timeline li::before { content: ""; position: absolute; left: -29px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: #ffffff; border: 2px solid #1d3b6f; }
ol.timeline li:first-child::before { background: #1d3b6f; }
.when { margin: 0 0 8px; font-weight: 700; }
.when .date { font-family: var(--term); font-weight: 400; font-size: 12px; color: #5a7397; margin-right: 6px; }
ol.timeline .photos { max-width: 600px; }

/* ---------- Readability: bigger text, roomier lines, shorter line length ---------- */
body { font-size: 16px; line-height: 1.6; color: #1f2328; }
.main p, .main li { max-width: 68ch; }
.main p { margin: 0 0 14px; }
.main li { margin-bottom: 8px; }
.emeta, .card-date { font-size: 14px; }

/* About: Lena-style bio with a large oval photo on the right */
.bio { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 36px; align-items: center; margin-bottom: 10px; }
.bio-text p:first-child { font-size: 18px; }
ul.summary { padding-left: 22px; margin: 0 0 14px; }
ul.summary li { margin-bottom: 6px; }
.oval { width: 230px; height: 300px; object-fit: cover; object-position: 50% 30%; border-radius: 50%; display: block; }
@media (max-width: 767px) { .bio { grid-template-columns: minmax(0, 1fr); } .oval { width: 170px; height: 220px; order: -1; } }

/* Cards: long rectangles with text on the left and a small diagram on the right */
.card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; background: #fafbfc; border: 1px solid #e3e7ee;
        border-radius: 6px; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 2px 8px rgba(16, 24, 40, 0.04);
        padding: 18px 22px; margin: 0 0 16px; max-width: 760px; }
.card.has-art { grid-template-columns: minmax(0, 1fr) 260px; align-items: center; }
.card.photo-left { grid-template-columns: 150px minmax(0, 1fr); }
.card-body { min-width: 0; display: flex; flex-direction: column; }
.card-title { font-size: 19px; font-weight: 600; margin: 0 0 8px; line-height: 1.3; }
.card-title::before { content: none !important; }
.card-title a { color: #1f2328; }
.card-title a:hover { color: var(--link); text-decoration: none; }
.card-body p { margin: 0 0 12px; font-size: 15px; color: #3b4048; }
.card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; }
.card-date { color: var(--muted); font-family: var(--term); font-size: 12px; }
.card-art svg { display: block; width: 100%; height: auto; }
.card-art img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; }
@media (max-width: 620px) {
  .card.has-art, .card.photo-left { grid-template-columns: minmax(0, 1fr); }
  .card.has-art .card-art { order: -1; max-width: 260px; }
  .card.photo-left .card-art { max-width: 180px; }
}

/* Previous / Next cards at the bottom of a daily log page */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 36px 0 0; max-width: 760px; }
.pg { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: #ffffff; border: 1px solid #e3e7ee;
      border-radius: 10px; color: #1f2328; transition: border-color 0.15s ease, background 0.15s ease; }
.pg:hover { border-color: #1d3b6f; background: #f7f9fc; text-decoration: none; }
.pg span { display: flex; flex-direction: column; min-width: 0; }
.pg small { font-size: 13px; color: var(--muted); }
.pg b { font-size: 16px; font-weight: 600; color: #1d3b6f; line-height: 1.3; }
.pg svg { width: 16px; height: 16px; flex: none; color: var(--muted); }
.pg.next { grid-column: 2; justify-content: flex-end; text-align: right; }
.pg.next span { align-items: flex-end; }
.pager:has(.pg:only-child) { grid-template-columns: 1fr; }
.pager:has(.pg:only-child) .pg.next { grid-column: 1; }
@media (max-width: 560px) { .pager { grid-template-columns: 1fr; } .pg.next { grid-column: 1; } }
@media (prefers-reduced-motion: reduce) { .pg { transition: none; } }

/* Entries (experience, projects, education, notes, tools): title, subtitle and description sit close together */
.main .entry { margin: 0 0 22px; }
.main .entry p { margin: 0; }
.main p.skill { margin: 0 0 6px; }
.main .entry .etitle { line-height: 1.35; }
.main .entry .emeta { margin: 1px 0 5px; line-height: 1.4; }
.main .entry .btns { margin-top: 8px !important; }
.main .job { gap: 16px; }
.main .job .logo { margin-top: 2px; }
.main > h3 { margin-top: 30px; }

/* Bio is a single column again (headshot lives in the header) */
.bio { grid-template-columns: minmax(0, 1fr); }