/* EXCALIFONT */
@font-face {
  font-family: 'Excalifont';
  src: url('https://excalidraw.nyc3.cdn.digitaloceanspaces.com/fonts/Excalifont-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* RESET */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
:target { scroll-margin-block: 5ex; }
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
p, h1, h2, h3 { overflow-wrap: break-word; }

/** CSS VARIABLES **/
:root {
  --accent: #E85D04;
  --accent-hover: #C44D03;

  --cap-height: calc(1rem * 12.5 / 16);
  --cap-ratio: calc(1 / 0.698);

  --gap: var(--cap-height);
  --font-smaller: calc(var(--cap-height) * 11 / 12 * var(--cap-ratio));
  --font-small: calc(var(--cap-height) * 10 / 12 * var(--cap-ratio));
  --width: 728px;
  --border: 1px;
  --radius: 10px;
  --nav-height: 60px;

  --gray-text: rgba(0, 0, 0, 0.45);
  --gray-line: rgba(0, 0, 0, 0.1);
  --gray-bg: rgba(0, 0, 0, 0.04);
  --text: #1C1917;
  --bg: #FAFAF8;
  --nav-bg: rgba(250, 250, 248, 0.88);

  --cursor: -webkit-image-set(url(/i/cursor@2x.png?t=1767542753) 2x) 5 5, default;
  --cursor-pressed: -webkit-image-set(url(/i/cursor_pressed@2x.png?t=1767542753) 2x) 5 5, default;
  --cursor-hand: -webkit-image-set(url(/i/hand@2x.png?t=1768171993) 2x) 16 4, default;
  --cursor-hand-pressed: -webkit-image-set(url(/i/hand_pressed@2x.png?t=1768171993) 2x) 16 4, default;
  --cursor-i-beam: -webkit-image-set(url(/i/ibeam@2x.png?t=1768676528) 2x) 16 16, default;
  --cursor-i-beam-pressed: -webkit-image-set(url(/i/ibeam_pressed@2x.png?t=1768676528) 2x) 16 16, default;
}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body {
  font-size: calc(var(--cap-height) * var(--cap-ratio));
  line-height: 1.6;
  font-family: 'Work Sans', 'Plus Jakarta Sans', 'IBM Plex Sans', sans-serif;
  font-feature-settings: "kern" 1,"liga" 1,"calt" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  background-color: var(--bg);
  color: var(--text);
  min-height: 100svh;
}

@media (max-width: 600px) {
  :root {
    --cap-height: calc(1rem * 11 / 16);
  }
  .title { font-size: 1.75em; }
  h1 { font-size: 1.35em; }
  h2 { font-size: 1.15em; }
}

body.winter { --bg: #f1f1f1; --nav-bg: rgba(241, 241, 241, 0.88); }

/* DARK MODE */
body.dark {
  --bg: #0C0A09;
  --text: #F0EBE3;
  --accent: #FF7A2F;
  --accent-hover: #FF9A5A;
  --gray-text: rgba(255, 255, 255, 0.45);
  --gray-line: rgba(255, 255, 255, 0.1);
  --gray-bg: rgba(255, 255, 255, 0.06);
  --nav-bg: rgba(12, 10, 9, 0.88);
}

body.dark code {
  background: var(--gray-bg);
}

body.dark .content > pre,
body.dark blockquote > pre {
  background: #1A1714;
  border-color: rgba(255,255,255,0.08);
}

/* ============================================
   CONTRIBUTION BANNER
   ============================================ */
#contribution-banner {
  width: 100%;
  height: 130px;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  opacity: 0;
  transition: opacity 1.2s ease;
  user-select: none;
  background: transparent;
}
#contribution-banner.cb-ready { opacity: 1; }

.cb-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  opacity: 0.42;
  transition: opacity 0.3s;
}
body.dark .cb-inner { opacity: 0.48; }
#contribution-banner:hover .cb-inner { opacity: 0.7; }
body.dark #contribution-banner:hover .cb-inner { opacity: 0.75; }

/* Nav arrows */
.cb-nav {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0 6px;
  cursor: pointer;
  color: var(--gray-text);
  font-size: 13px;
  opacity: 0;
  transition: opacity 0.2s;
  display: flex;
  align-items: center;
}
#contribution-banner:hover .cb-nav { opacity: 0.6; }
#contribution-banner:hover .cb-nav:hover:not(:disabled) { opacity: 1; }
.cb-nav:disabled { cursor: default; }
#contribution-banner:hover .cb-nav:disabled { opacity: 0.15; }

/* Month labels row */
.cb-months-row {
  height: 16px;
  flex-shrink: 0;
  display: flex;
  gap: 2px;
  padding-left: 28px;
  align-items: flex-end;
  padding-bottom: 2px;
}
.cb-mc {
  flex: 1;
  font-size: 9px;
  color: var(--gray-text);
  overflow: hidden;
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
}

/* Body: day labels + grid */
.cb-body {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
}
.cb-days {
  width: 28px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-end;
  padding-right: 4px;
}
.cb-days span {
  flex: 1;
  font-size: 8px;
  color: var(--gray-text);
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
}

/* Grid */
.cb-grid {
  flex: 1;
  display: flex;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}
.cb-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cb-sq {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 2px;
}
.cb-sq:not(.cb-l0) { cursor: pointer; }

/* Light mode levels */
.cb-l0 { background: rgba(0, 0, 0, 0.06); }
.cb-l1 { background: rgba(232, 93, 4, 0.25); }
.cb-l2 { background: rgba(232, 93, 4, 0.50); }
.cb-l3 { background: rgba(232, 93, 4, 0.75); }
.cb-l4 { background: rgba(232, 93, 4, 1.00); }

/* Dark mode levels */
body.dark .cb-l0 { background: rgba(255, 255, 255, 0.05); }
body.dark .cb-l1 { background: rgba(255, 122, 47, 0.25); }
body.dark .cb-l2 { background: rgba(255, 122, 47, 0.50); }
body.dark .cb-l3 { background: rgba(255, 122, 47, 0.75); }
body.dark .cb-l4 { background: rgba(255, 122, 47, 1.00); }

/* Tooltip */
.cb-tip {
  position: fixed;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.82);
  color: #fff;
  padding: 4px 8px;
  border-radius: 5px;
  font-size: 11px;
  font-family: 'Inter', sans-serif;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s;
  white-space: nowrap;
}
.cb-tip.cb-tip-on { opacity: 1; }

/* Responsive */
@media (max-width: 600px) {
  #contribution-banner { height: 90px; }
  .cb-months-row { height: 13px; padding-left: 22px; }
  .cb-mc { font-size: 8px; }
  .cb-days { width: 22px; }
  .cb-days span { font-size: 7px; }
  .cb-nav { padding: 0 4px; font-size: 11px; }
}
@media (max-width: 380px) {
  #contribution-banner { height: 76px; }
  .cb-months-row { display: none; }
  .cb-days { display: none; }
  .cb-nav { padding: 0 3px; font-size: 10px; }
}

/* ============================================
   NAV
   ============================================ */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  background: var(--nav-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: var(--border) solid var(--gray-line);
}

.nav-inner {
  max-width: calc(var(--width) + 80px);
  margin: 0 auto;
  padding: 0 24px;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  gap: 4px;
}

.site-logo {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1.05em;
  letter-spacing: -0.03em;
  color: var(--text);
  border: none;
  margin-right: 20px;
  flex-shrink: 0;
  transition: color 0.15s;
}

.site-logo:hover {
  color: var(--accent);
  border: none;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 2px;
  flex: 1;
}

.nav-links > li > a {
  display: block;
  padding: 5px 11px;
  border-radius: 6px;
  color: var(--gray-text);
  border: none;
  font-size: var(--font-small);
  font-weight: 500;
  letter-spacing: 0;
  transition: color 0.15s, background 0.15s;
}

.nav-links > li > a:hover {
  color: var(--text);
  background: var(--gray-bg);
  border: none;
}

.nav-links > li.selected > a {
  color: var(--accent);
  font-weight: 600;
  background: none;
}

.nav-links > li.inside > a {
  color: var(--gray-text);
}

/* Dark mode toggle — positioned relative for the glow child */
.dark_mode {
  position: relative;
  display: flex;
  align-self: center;
  width: 26px;
  height: 26px;
  border-radius: 13px;
  background-image: url(/i/dark_mode.svg?t=1728653997);
  background-size: 52px 52px;
  transition: background-position-x 100ms;
  cursor: var(--cursor-hand);
  opacity: .35;
  margin-left: 8px;
  flex-shrink: 0;
}

.dark_mode:hover, body.dark .dark_mode { opacity: 1; }
body.dark .dark_mode { background-position: -26px 0; }

#darkModeGlow {
  position: absolute;
  width: 26px;
  height: 26px;
  border-radius: 13px;
  background-image: url(/i/dark_mode.svg?t=1728653997);
  background-size: 52px 52px;
  background-position: -26px -26px;
  background-color: #15FB1F;
  box-shadow: 0 0 10px 1.5px #15FB1F;
  z-index: 20;
  opacity: 0;
  top: 0;
  left: 0;
}
body.dark #darkModeGlow { opacity: 1; }

@media (any-hover: none) {
  .dark_mode, #darkModeGlow { display: none; }
}

/* Hamburger (mobile) — hidden by default, shown via media query */
.hamburger { display: none; position: relative; }
.hamburger input { display: none; }
.hamburger label { display: block; width: 32px; height: 32px; background-image: url(/i/hamburger.svg?t=1728664532); background-size: 100%; opacity: .3; cursor: var(--cursor-hand); border: none; }
.hamburger label:hover,
.hamburger input:checked ~ label { opacity: 1; }
.hamburger ul { display: none; position: absolute; margin: 0.5em -0.5em 0 0; right: 0; background: var(--bg); padding: 0.375em 0; box-shadow: 0 0 0 1.5px var(--gray-line), 4.5px 4.5px 3px rgba(0,0,0,0.12); border-radius: 8px; z-index: 200; }
.hamburger input:checked ~ ul { display: block; }
.hamburger li { list-style: none; white-space: nowrap; }
.hamburger a { border: none; display: block; padding: 0.5em 1.125em; color: var(--text); font-size: var(--font-small); }
.hamburger a:hover { background: var(--gray-bg); }
.hamburger a.selected { color: var(--accent); font-weight: 600; }
.hamburger a.selected:before { content: '> '; }

/* Mobile nav */
@media (max-width: 600px) {
  .nav-links { display: none; }
  .hamburger { display: block; }
  .nav-inner { padding: 0 16px; gap: 2px; }
  .site-logo { margin-right: auto; }
}

/* ============================================
   PAGE LAYOUT
   ============================================ */
.page {
  display: flex;
  flex-direction: column;
  gap: calc(var(--gap) * 4);
  align-items: center;
  padding: calc(var(--gap) * 5) 0 calc(var(--gap) * 8) 0;
  min-height: calc(100svh - var(--nav-height));
}

/* CONTENT */
.cover { width: 100%; display: flex; flex-direction: column; align-items: center; }
.cover > img { width: auto; max-height: 50svh; }
.content { margin-top: calc(var(--cap-height) * 2); }
.cover + .content { margin-top: 0; }
.content { display: flex; flex-direction: column; gap: var(--gap); align-items: center; }
.content > * { width: 96vw; max-width: var(--width); }

.has_supercover { background-size: 100% auto; background-position: top calc(-40vw + var(--gap) * 10) center; background-repeat: no-repeat; }
.has_supercover .content { margin-top: calc(66.6667vw - 40vw + var(--gap) * 2); }

/* INDEX / INTRO */
.content > .index-intro { color: var(--gray-text); font-style: italic; margin-bottom: var(--gap); }

/* STARRED */
.starred { margin: 0 0.5em 0 -1.5em; color: var(--accent); }
@media (max-width: 600px) {
  .starred { margin: 0 0.5em 0 0; }
}
.date { color: var(--gray-text); font-size: var(--font-small); margin-left: auto; padding-left: calc(var(--gap) * 2); white-space: nowrap; }

/* YEAR HEADERS — section separator style */
h1.year-header {
  font-size: var(--font-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gray-text);
  padding-bottom: calc(var(--gap) * 0.75);
  border-bottom: var(--border) solid var(--gray-line);
  margin-top: calc(var(--gap) * 2);
}

/* HEADERS */
.title, h1, h2, h3 {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  line-height: 1.15;
  text-wrap: balance;
  letter-spacing: -0.025em;
}
.title { font-size: 2.2em; margin: 0 0 var(--gap) 0; }
h1, h2, h3 { margin-top: calc(2 * var(--gap)); }
h1:nth-child(1):not(.title):not(.year-header) { margin-top: 0; }
h1 { font-size: 1.6em; }
h2 { font-size: 1.3em; }
h1 + h2, h2 + h3 { margin-top: 0; }
.title + h2 { margin-top: calc(0px - var(--gap)); }

/* PARAGRAPHS */
.loud { max-width: calc(var(--width) + 60px); font-weight: 600; line-height: 1.3; text-wrap: balance; border: 2px solid var(--accent); padding: calc(2 * var(--gap)); margin: var(--gap) 0; font-size: 1.3em; text-align: center; border-radius: var(--radius); }
.foot { text-align: center; font-size: var(--font-small); font-style: italic; }
pre + .foot, figure + .foot, blockquote + .foot { margin-top: -15px; }
h1 + .foot, h2 + .foot, h3 + .foot { text-align: left; color: var(--gray-text); }
.fig { margin: var(--gap) 0; max-width: calc(var(--width) + 60px); }
sup, sub { vertical-align: baseline; position: relative; font-size: .7em; line-height: 1; }
sup { bottom: 1.4ex; }
sub { top: .5ex; }
img.inline { margin: 0; display: inline-block; position: relative; top: 3px; }
.emoji { font-size: 125%; line-height: 22.5px; }
.hr_inner { width: 6em; height: 1px; margin: 1em auto; background: var(--gray-line); }

/* FIGURES */
.content > figure { width: unset; max-width: 96vw; margin: var(--gap) 0; display: flex; flex-direction: column; align-items: center; gap: var(--gap); }
.content > figure > img,
.content > figure > video,
.content > figure > iframe,
.content > figure > a > img { border-radius: var(--radius); }
.content > figure > a > img.noround { border-radius: 0; }
.content > figure > a { border: none; }
figcaption { max-width: var(--width); text-align: center; font-size: var(--font-small); font-style: italic; color: var(--gray-text); }

.hoverable { object-fit: cover; object-position: center top; height: unset; }
.hoverable.clicked { object-position: center bottom; }
@media (hover: hover) {
  .hoverable.clicked:hover { object-fit: cover; object-position: center top; }
  .hoverable:hover { object-position: center bottom; }
}

/* ANIMATION */
.anim { width: 400px; height: 250px; background-size: 100%; background-color: white; margin: 0 6px; }

/* STRONG */
strong { font-weight: 600; }

/* LINKS */
a { color: var(--accent); text-decoration: none; border-bottom: var(--border) solid transparent; transition: border-color 0.15s, color 0.15s; }
a:hover { color: var(--accent-hover); border-color: var(--accent-hover); }

/* CODE */
pre, code { font-family: 'IBM Plex Mono', monospace; }
code { font-style: normal; background: var(--gray-bg); padding: 2px 6px; border-radius: 5px; font-size: var(--font-smaller); border: var(--border) solid var(--gray-line); }
h1 > code, h2 > code, h3 > code, h4 > code, .loud > code, .foot > code { font: inherit; }
.content > pre, blockquote > pre {
  max-width: calc(var(--width) + 60px);
  background: #1C1917;
  color: #E8E0D8;
  margin: var(--gap) 0;
  padding: 20px 28px 18px;
  border-radius: 10px;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-style: normal;
  border: var(--border) solid rgba(255,255,255,0.06);
}
pre > code { background: none; padding: 0; font-size: var(--font-small); white-space: unset; border: none; color: inherit; }

/* BLOCKQUOTES */
blockquote { display: flex; flex-direction: column; gap: var(--gap); margin: var(--gap) 0; padding: calc(var(--gap) * 0.75) 0 calc(var(--gap) * 0.75) 1.25em; border-left: 3px solid var(--accent); font-style: italic; color: var(--gray-text); }

/* LISTS */
.content ul, .content ol { display: flex; flex-direction: column; gap: var(--gap); padding: 0 0 0 1.25em; }
.content ul { list-style-type: square; }

/* FOOTNOTES */
.footnote { margin: 0 5px; }
.reversefootnote { margin: 0 5px; }
.footnotes-br { margin-top: calc(2 * var(--gap)); }
.footnotes-br_inner { width: 100px; height: var(--border); background: var(--gray-line); }

/* POST META */
.post-meta { display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px; color: var(--gray-text); font-size: var(--font-small); align-items: center; font-family: 'Excalifont', cursive; }
.title + .post-meta { margin-top: calc(0px - var(--gap)); }
.post-meta .separator { color: var(--gray-line); }

/* FOOTER */
.footer { display: flex; flex-direction: row; flex-wrap: wrap; gap: 5px; color: var(--gray-text); font-size: var(--font-small); margin: var(--gap) 0; padding-top: calc(var(--gap) * 1.5); border-top: var(--border) solid var(--gray-line); }

/* BUTTON */
button {
  height: 44px;
  padding: 0 1.25rem;
  background: transparent;
  border: 2px solid var(--accent);
  color: var(--accent);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: 8px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: var(--cursor-hand);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: background 0.2s, color 0.2s;
}

@keyframes rotate360 {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

button > img { display: inline-block; animation: rotate360 0.8s linear infinite; }
button:hover { background: var(--accent); color: #fff; }
button:active, button[disabled] { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }

/* ABOUT BOX */
.about { width: 96vw; max-width: calc(var(--width) + 50px); }
.about_inner {
  font-size: var(--font-small);
  padding: calc(var(--gap) * 1.5) 24px;
  border: var(--border) solid var(--gray-line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: row;
  gap: calc(var(--gap) * 1.5);
  align-items: flex-start;
  background: var(--gray-bg);
}
.about-photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: var(--gray-bg); }
.about-text { display: flex; flex-direction: column; gap: calc(var(--gap) * 0.6); min-width: 0; }
.about-name {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1em;
  letter-spacing: -0.02em;
  color: var(--text);
  cursor: var(--cursor-i-beam);
}
.about-role {
  font-size: calc(var(--font-small) * 0.95);
  color: var(--accent);
  font-weight: 500;
  letter-spacing: 0;
  cursor: var(--cursor-i-beam);
}
.about-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }

/* LinkedIn Top Voice badge */
.topvoice-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #EBF0F8;
  color: #0A66C2;
  padding: 3px 10px 3px 4px;
  border-radius: 20px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  border: none;
  border-bottom: none;
  vertical-align: middle;
  white-space: nowrap;
  transition: background 0.15s;
  text-decoration: none;
  line-height: 1;
}
.topvoice-badge:hover {
  background: #DCE8F5;
  border: none;
  border-bottom: none;
  color: #0A66C2;
}
body.dark .topvoice-badge {
  background: rgba(10, 102, 194, 0.15);
  color: #5BA4E0;
}
body.dark .topvoice-badge:hover {
  background: rgba(10, 102, 194, 0.25);
  color: #5BA4E0;
}
@media (max-width: 520px) {
  .about_inner { flex-direction: column; align-items: flex-start; }
  .about-photo { width: 64px; height: 64px; }
}
.btn-action {
  font-family: 'Inter', sans-serif;
  color: var(--accent);
  background: transparent;
  border: var(--border) solid var(--accent);
  border-bottom: var(--border) solid var(--accent);
  padding: 2px 10px;
  display: inline-block;
  border-radius: 5px;
  font-size: var(--font-small);
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
.btn-action:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ABOUT PAGE */
.page_about dl, .projects dl { font-size: var(--font-small); display: grid; grid-template-columns: max-content 1fr; grid-gap: 5px 10px; --border: 1px; }
.page_about h2 { margin-top: calc(var(--gap) * 2); }
.linkedin-embed-wrapper { margin-top: var(--gap); width: 100%; max-width: var(--width); display: flex; justify-content: center; }
.tiktok-embed-wrapper { margin-top: calc(var(--gap) * 2); width: 100%; max-width: var(--width); display: flex; justify-content: center; }
.tiktok-embed-wrapper .tiktok-embed { margin: 0 auto; }

/* SNOW */
.snowflake { border-radius: 50%; background: #FFF; }
@keyframes snow-fall {to{top: calc(100vh + 200px);}}
@keyframes snow-right {to{left: -100vw;}}
@keyframes snow-left {to{left: 100vw;}}

/* CURSORS */
body, input[type='range'], button, label { cursor: var(--cursor); }
body:active, input[type='range']:active, button:not(:disabled):active, label:active { cursor: var(--cursor-pressed); }
a { cursor: var(--cursor-hand); }
a:active { cursor: var(--cursor-hand-pressed); }
p, h1, h2, h3, article ul, article ol { cursor: var(--cursor-i-beam); }
p:active, h1:active, h2:active, h3:active, article ul:active, article ol:active { cursor: var(--cursor-i-beam-pressed); }