/* ============================================================================
   bean.vip — same design system as the notes blog.
   Swiss / International Typographic Style through Rams' ten principles.
   Hairlines, not borders. One accent. No shadows, gradients, or radii.
   ========================================================================== */

:root {
  --paper:        #0B0B0B;
  --paper-2:      #121212;
  --ink:          #EDEDEB;
  --ink-2:        #A3A39E;
  --ink-3:        #6E6E69;
  --rule:         rgba(237, 237, 235, 0.14);
  --rule-strong:  rgba(237, 237, 235, 0.30);
  --accent:       #FF4A17;
  --accent-ink:   #0B0B0B;

  --band-1: #E8B900; --band-2: #F07C1E; --band-3: #E0452C;
  --band-4: #3E9E4E; --band-5: #2BB0AE; --band-6: #4B72C4;

  --gutter: 24px;
  --page:   1240px;
  --measure: 66ch;

  --t-2xs: 10px; --t-xs: 11px;  --t-sm: 13px; --t-base: 15px;
  --t-md:  17px; --t-lg: 22px;  --t-xl: 32px; --t-2xl: 46px; --t-3xl: 68px;

  --tracking-label: 0.10em;
  --tracking-tight: -0.022em;
  --tracking-display: -0.035em;

  /* Aliases for the previous palette, so any leftover inline style attribute
     lands in the new system instead of reintroducing the old one. */
  --black: var(--ink);
  --white: var(--paper);
  --gold: var(--accent);
  --gold-light: var(--accent);
  --gold-dark: var(--accent);
  --warm-gray: var(--ink-2);
  --sand: var(--ink-3);
  --cream: var(--paper);
  --border: var(--rule);

  color-scheme: dark;
}

[data-theme="light"] {
  --paper:        #F2F1EC;
  --paper-2:      #FBFBF8;
  --ink:          #111110;
  --ink-2:        #55554F;
  --ink-3:        #85857D;
  --rule:         rgba(17, 17, 16, 0.16);
  --rule-strong:  rgba(17, 17, 16, 0.34);
  --accent:       #DC3B0C;
  --accent-ink:   #FBFBF8;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

p, h1, h2, h3, li, .timeline-company, .connect-card-handle { overflow-wrap: break-word; }
img, svg { max-width: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: var(--t-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

a { color: inherit; }

/* Decorative frame from the previous theme — nothing to carry over. */
.page-border { display: none; }

/* ---- shared label primitive ------------------------------------------- */
.label,
.hero-location, .hero-label, .timeline-year,
.footer-left, .footer-right, .back-link, .values-num, .top-logo-text {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-3);
  font-feature-settings: "tnum" 1, "zero" 1;
}

/* ============================================================================
   TOP BAR
   ========================================================================== */

.top-bar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 var(--gutter);
  min-height: 56px;
}

.top-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}

.top-logo-mark {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule-strong);
  color: var(--accent);
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--t-xs);
  line-height: 1;
  flex: none;
}

.top-logo-text {
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-size: var(--t-base);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  text-transform: none;
}

/* Pure ornament from the previous theme. */
.top-ornament { display: none; }

/* ============================================================================
   THEME CONTROL
   ========================================================================== */

.segmented { display: inline-flex; border: 1px solid var(--rule); background: var(--paper); }

.segmented__btn {
  appearance: none;
  background: transparent;
  border: 0;
  border-left: 1px solid var(--rule);
  cursor: pointer;
  padding: 6px 9px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--t-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1;
  transition: color 110ms linear, background-color 110ms linear;
}
.segmented__btn:first-child { border-left: 0; }
.segmented__btn:hover { color: var(--ink); }
.segmented__btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* ============================================================================
   HERO
   ========================================================================== */

.hero {
  max-width: var(--page);
  margin: 0 auto;
  padding: 56px var(--gutter) 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 56px;
  row-gap: 0;
}
@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr) 260px; }
  .hero-intro     { grid-column: 1; grid-row: 1; align-self: end; }
  .hero-watermark { grid-column: 2; grid-row: 1; }
  .hero-content   { grid-column: 1 / -1; grid-row: 2; }
  .currently-wrap { grid-column: 1 / -1; grid-row: 3; }
  .scroll-nudge   { grid-column: 1 / -1; grid-row: 4; }
}

.hero-intro { margin-bottom: 22px; }

.hero-eyebrow {
  font-size: var(--t-3xl);
  font-weight: 500;
  letter-spacing: var(--tracking-display);
  line-height: 0.98;
  color: var(--ink);
  margin: 0 0 16px;
}
@media (max-width: 720px) { .hero-eyebrow { font-size: var(--t-2xl); } }
@media (max-width: 480px) { .hero-eyebrow { font-size: var(--t-xl); } }

.hero-location { margin: 0; }

.hero-diamond { display: none; }

/* Harmonograph plate, injected into the hero. */
.hero-watermark {
  border: 1px solid var(--rule);
  background: var(--paper-2);
  padding: 18px;
  width: 100%;
  max-width: 260px;
  margin: 0 0 26px;
  align-self: end;
}
.hero-watermark svg { display: block; width: 100%; height: auto; }

.hero-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  padding: 8px 0 0;
  border-top: 1px solid var(--rule-strong);
  margin-top: 22px;
}
@media (min-width: 900px) {
  .hero-content { grid-template-columns: 1fr 1fr; gap: 56px; }
}

.hero-col { padding-top: 22px; }
.hero-label { margin: 0 0 14px; color: var(--ink-3); }

.hero-text {
  margin: 0 0 18px;
  color: var(--ink-2);
  font-size: var(--t-md);
  line-height: 1.6;
  max-width: 46ch;
}

.hero-divider { display: none; }

.hero-more,
.hero-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  transition: opacity 120ms linear;
}
.hero-more:hover, .hero-link:hover { opacity: 0.7; }

.hero-links { display: flex; gap: 18px; margin-top: 20px; }
.hero-link svg { width: 17px; height: 17px; }

.scroll-nudge { display: none; }

/* ---- "Currently" ------------------------------------------------------- */

.currently-wrap { margin-top: 48px; max-width: 620px; }

.col-heading {
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--t-xs);
  font-style: normal;
  font-weight: 400;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule-strong);
  display: flex;
  align-items: center;
  gap: 9px;
  text-align: left;
}

.gold-dot {
  width: 7px;
  height: 7px;
  background: var(--accent);
  flex: none;
}
.gold-dot > span { display: none; }

.currently-list { display: flex; flex-direction: column; }

.currently-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: var(--t-sm);
  color: var(--ink-2);
  padding: 11px 0;
  border-bottom: 1px solid var(--rule);
  line-height: 1.5;
}
.currently-icon { width: 18px; flex: none; font-size: var(--t-sm); filter: grayscale(1); opacity: 0.7; }
.currently-item a { color: var(--accent); text-decoration: none; }
.currently-item a:hover { text-decoration: underline; }

/* ============================================================================
   SECTION DIVIDER
   ========================================================================== */

.section-divider {
  max-width: var(--page);
  margin: 72px auto 0;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
}
.sd-line { flex: 1; height: 1px; background: var(--rule); }
.sd-diamond { width: 7px; height: 7px; background: var(--accent); flex: none; margin: 0 10px; }

/* ============================================================================
   BELOW FOLD / CONNECT
   ========================================================================== */

.below-fold, .work { max-width: var(--page); margin: 0 auto; padding: 64px var(--gutter) 0; }
.below-inner, .work-inner { max-width: none; }

/* Exact column counts, not auto-fit: a ragged final row would leave an empty
   cell that still reads as a filled box. */
.connect-cards {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--rule);
}

.connect-card {
  display: block;
  padding: 16px 18px;
  border-top: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  transition: background-color 130ms linear;
}
.connect-card:first-child { border-top: 0; }

@media (min-width: 640px) {
  .connect-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .connect-card { border-top: 0; border-left: 1px solid var(--rule); }
  .connect-card:first-child { border-left: 0; }
}
.connect-card:hover { background: var(--paper-2); }
.connect-card:hover .connect-card-name { color: var(--accent); }

.connect-card-name {
  display: block;
  font-size: var(--t-md);
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  margin-bottom: 6px;
  transition: color 130ms linear;
}
.connect-card-handle {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-label);
  color: var(--ink-3);
}

/* ============================================================================
   WORK TIMELINE — the register, same as the blog index
   ========================================================================== */

.timeline { border-bottom: 1px solid var(--rule); }

.timeline-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px 28px;
  padding: 22px 0;
  border-top: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: background-color 130ms linear;
}
@media (min-width: 720px) {
  .timeline-item { grid-template-columns: 132px minmax(0, 1fr); align-items: baseline; }
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: 0; top: -1px;
  height: 1px; width: 0;
  background: var(--accent);
  transition: width 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
.timeline-item:hover::before { width: 100%; }
.timeline-item:hover .timeline-role { color: var(--accent); }

.timeline-year { color: var(--ink-3); }

.timeline-role {
  font-size: var(--t-lg);
  font-weight: 500;
  letter-spacing: var(--tracking-display);
  line-height: 1.15;
  margin-bottom: 6px;
  transition: color 130ms linear;
}

.timeline-company { color: var(--ink-2); font-size: var(--t-sm); }

/* ============================================================================
   SUBPAGES
   ========================================================================== */

.container { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }

.page-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 56px 0 14px;
  border-bottom: 1px solid var(--rule-strong);
  margin-bottom: 40px;
}

.page-title {
  font-size: var(--t-2xl);
  font-weight: 500;
  letter-spacing: var(--tracking-display);
  line-height: 1.02;
  margin: 0;
}
@media (max-width: 640px) { .page-title { font-size: var(--t-xl); } }

.back-link { text-decoration: none; transition: color 120ms linear; }
.back-link:hover { color: var(--accent); }

.values-summary, .accomplishments-summary { margin-bottom: 40px; }

.values-list {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--rule);
}
.values-list > span {
  border-top: 1px solid var(--rule);
  padding: 11px 14px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}
.values-list > span:first-child { border-top: 0; }

@media (min-width: 720px) {
  .values-list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .values-list > span { border-top: 0; border-left: 1px solid var(--rule); }
  .values-list > span:first-child { border-left: 0; }
}

.accomplishments-summary p {
  margin: 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-3);
}

.values, .accomplishments { counter-reset: item; padding-bottom: 40px; }

.value-item, .accomplishment-item {
  counter-increment: item;
  border-top: 1px solid var(--rule);
  padding: 26px 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 28px;
}
.value-item::before, .accomplishment-item::before {
  content: counter(item, decimal-leading-zero);
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-label);
  color: var(--accent);
  display: block;
  margin-bottom: 10px;
}

@media (min-width: 900px) {
  .value-item, .accomplishment-item { grid-template-columns: 56px minmax(0, 1fr); }
  .value-item::before, .accomplishment-item::before {
    padding-top: 7px;
    margin-bottom: 0;
    grid-column: 1;
  }
  /* Without this the second real child wraps into the 56px number column. */
  .value-item > *, .accomplishment-item > * { grid-column: 2; }
}

.value-item h2, .accomplishment-item h2 {
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: 1.2;
  margin: 0 0 12px;
  color: var(--ink);
}

.value-item p, .accomplishment-item p {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--t-md);
  line-height: 1.65;
  max-width: var(--measure);
}

.value-item a, .accomplishment-item a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 120ms linear, text-decoration-color 120ms linear;
}
.value-item a:hover, .accomplishment-item a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

.values-num { color: var(--accent); }
.values-heading, .work-sub {
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ============================================================================
   FOOTER
   ========================================================================== */

footer {
  max-width: var(--page);
  margin: 96px auto 0;
  padding: 22px var(--gutter) 56px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* ============================================================================
   REVEAL — driven by the existing IntersectionObserver
   ========================================================================== */

.reveal { opacity: 0; transform: translateY(6px); transition: opacity 420ms cubic-bezier(0.22,1,0.36,1), transform 420ms cubic-bezier(0.22,1,0.36,1); }
.reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}