/*
  Global Styles – Modern Minimal
  - Inter + Aktiv Grotesk
  - Color tokens (light UI)
  - Underlined links

  Project page IDs (used in data-project-id attribute selectors):
    Governance-Driven RBAC:             2774d551-f722-8102-80c3-c69dfdcfd923
    Centralize Administrative Features: 2774d551-f722-817e-aa8b-e68b495ac739
    Close the Job Lifecycle:            2774d551-f722-8162-869b-c170a644675d
    Standardize Segmented Control:      2774d551-f722-8178-b9f9-f138b4257919
    Simplify Portfolio Maintenance:     2aa4d551-f722-80f5-b824-c19feebf7f7b
  - Clean spacing + accessible defaults
*/

/* =========================
   Fonts
   ========================= */

@font-face {
  font-family: "Inter";
  src: url("https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMa1Z7b.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Aktiv Grotesk";
  src:
    local("Aktiv Grotesk Regular"),
    local("Aktiv Grotesk"),
    url("fonts/AktivGrotesk-Regular.otf") format("opentype"),
    url("fonts/AktivGrotesk-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Aktiv Grotesk";
  src:
    local("Aktiv Grotesk Bold"),
    local("Aktiv Grotesk"),
    url("fonts/AktivGrotesk-Bold.otf") format("opentype"),
    url("fonts/AktivGrotesk-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* =========================
   Root & Base
   ========================= */

:root {
  --color-bg: #ffffff;
  --color-heading: #0b0b0b;
  --color-text: #374151; /* Gray 700 - slightly lighter than heading, passes WCAG AAA */
  --color-muted: #4f5b66;

  --color-surface: #ffffff;
  --color-border: #e5e7eb;

  --nav-height: 64px;
  /* Fixed nav “box” height so it never changes between pages */
  --nav-box-height: 56px;
  --page-margin: 40px;
  --content-width: 92%;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.28);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
}


::selection {
  background: rgba(0, 0, 0, 0.1); /* Soft grey selection */
  color: inherit;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

html {
  font-size: 100%;
  scrollbar-gutter: stable both-edges;
}

body {
  margin: 0;
  font-family:
    "Aktiv Grotesk",
    "Inter",
    ui-sans-serif,
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Helvetica,
    Arial,
    "Apple Color Emoji",
    "Segoe UI Emoji";
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  font-weight: 400;
  padding-top: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.project-page {
  --color-bg: #F7F7F5;
}

body.work-page {
  --color-bg: #F7F7F5;
}

body.about-page {
  --color-bg: #F7F7F5;
}

/* =========================
   Typography
   ========================= */

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color-heading);
  margin: 0 0 var(--space-3);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 600;
}

/* Make H1 and H2 bold on project pages */
.project-page h1,
.project-page h2 {
  font-weight: 700;
}

p,
li,
small,
.small,
.note {
  color: var(--color-heading);
}

p {
  margin: 0 0 var(--space-4);
  color: var(--color-heading);
  letter-spacing: 0;
}

/* Bold text should match heading color */
strong, b {
  color: var(--color-heading);
}

/* Spacing between headings and text */
h2 + p,
h3 + p {
  margin-top: 12px;
}

h2 + h3 {
  margin-top: 12px;
}

h2 + ul,
h2 + ol,
h3 + ul,
h3 + ol,
h2 + .list-plain,
h3 + .list-plain {
  margin-top: 12px;
}

/* Standardize H2 → paragraph spacing */
.container h2 + p,
section h2 + p,
.columns h2 + p,
h2 + p {
  margin-top: var(--space-3);
}

/* Project-4: Job visibility h3 spacing */
.section-job-visibility h3 {
  margin-top: var(--space-3);
}

/* Taglines for specific projects */
body[data-project-id="2774d551-f722-8162-869b-c170a644675d"] h3.centered-quote,
body.project-5 h2.centered-quote {
  text-align: center;
  color: #8c8c8c;
}

/* =========================
   Pills / Chips
   ========================= */

.pill {
  display: block;
  margin-top: 0;
  margin-bottom: 0;
  background: transparent;
  border: 0;
  padding: 0;
}

.pill-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--color-heading);
  background: #f7f7f8;
  border: 1px solid #cfd4dc;
  border-radius: 9999px;
  padding: 4px 10px;
  text-transform: uppercase;
  letter-spacing: 0;
}

/* Pills aligned to 900px body column */
.project-page .container > p.pill {
  display: block;
  max-width: 900px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

/* =========================
   Figures & Images (generic)
   ========================= */

figure {
  margin-top: 0;
  margin-bottom: 0;
}

p + figure,
figure + p,
p + img,
img + p {
  margin-top: 20px;
}

figure + figure,
img + img {
  margin-top: 20px;
}

/* Caption style */
.project-page p.caption {
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.2px;
  color: #6f6f6f;
  font-weight: 400;
  margin-top: 12px;
  margin-bottom: 40px;
  text-align: center;
}

/* Project-page paragraphs */
.project-page p {
  margin-bottom: 20px;
  font-size: 14px;
  color: var(--color-text);
}

.project-page p.pill {
  margin-bottom: 0;
}


/* First image (hero) centered, up to 970px */
.project-page .container > figure:first-of-type {
  margin-top: 20px;
  margin-left: 0;
  margin-right: 0;
}

.project-page .container > figure:first-of-type img {
  width: 100%;
  max-width: 970px;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Project-5: first image 50% */
.project-page.project-5 .container > figure:first-of-type img {
  width: auto;
  max-width: 50%;
  margin-left: auto;
  margin-right: auto;
}

/* Project-3: first image 60% */
.project-page[data-project-id="2774d551-f722-8178-b9f9-f138b4257919"] .container > figure:first-of-type img {
  width: auto;
  max-width: 60%;
}

/* Center-align images globally in project content */
.project-page .container figure {
  margin-left: auto;
  margin-right: auto;
}

.project-page .container figure img,
.project-page .container > img {
  margin-left: auto;
  margin-right: auto;
}

/* Utility spacing */
.project-page figure.mt-32,
.project-page img.img-mt-32 {
  margin-top: 32px;
}

/* Utility sizes */
.project-page .columns .column img.img-small {
  width: 70%;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.project-page img.img-300 {
  width: 100%;
  max-width: 50%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.project-page img.img-60 {
  width: 100%;
  max-width: 60%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.project-page img.img-80 {
  width: 100%;
  max-width: 80%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.project-page img.img-40 {
  width: 100%;
  max-width: 40%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.project-page img.img-30 {
  width: 100%;
  max-width: 30%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 8px;
}

/* Filename-based overrides for specific assets */
.project-page img[src*="notion-2774d551-f722-813b-963f-d39a8edf5e48.gif"] {
  width: 100%;
  max-width: 21%;
  margin-left: auto;
  margin-right: auto;
  border-radius: 22px;
}

/* Project-2: Improvements GIF — stable styling (tagged by sync-sanitizer.js) */
.project-page img.improvements-gif {
  width: 100%;
  max-width: 49%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 12px;
}

@media (max-width: 640px) {
  .project-page img.improvements-gif {
    max-width: 60%;
  }
}

.project-page img[src*="notion-2774d551-f722-81ba-8a0e-e403aca08647.png"] {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.project-page img[src*="notion-2774d551-f722-8133-9987-d09578d51483.png"] {
  width: 360px;
}

.project-page img[src*="notion-2774d551-f722-814c-9e60-d770f4fbe9e1.png"] {
  width: 400px;
}

/* Project-4 specific image widths */
.project-page img[src*="notion-2774d551-f722-819a-b9a0-c9b759fba192.webp"] {
  width: 100%;
  max-width: 60%;
  margin-left: auto;
  margin-right: auto;
}

.project-page img[src*="notion-2774d551-f722-8112-a9b7-e0813e162127.webp"] {
  width: 100%;
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.project-page figure:has(> img[src*="notion-2774d551-f722-8112-a9b7-e0813e162127.webp"]) {
  margin-top: 32px;
}

/* Project-5: small expectation image */
.project-page img[src*="notion-2774d551-f722-81dc-8871-ea779bfa8206.webp"] {
  width: 100%;
  max-width: 30%;
  margin-left: auto;
  margin-right: auto;
}

/* Fixed pixel width utilities */
.project-page img.img-w-360 {
  width: 360px;
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.project-page img.img-w-400 {
  width: 400px;
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Project-2: two-up images */
.project-page .columns.two-up > .column > figure:first-of-type > img {
  width: 360px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.project-page .columns.two-up > .column:last-child > figure:first-of-type > img {
  width: 400px;
}

/* =========================
   Section Heading Spacing
   ========================= */

h2 {
  margin-top: 64px;
  margin-bottom: 0;
  text-transform: none;
}

.project-page .container > p.pill + h2 {
  margin-top: 20px;
}

h2 + h3 {
  margin-top: var(--space-2);
}

h3 {
  margin-top: var(--space-6);
  font-weight: 700;
  text-transform: none; /* sentence case — never uppercase */
}

h2 + ul,
h2 + ol,
h2 + .list-plain,
h2 + .list-bullets,
h2 + figure,
h2 + img {
  margin-top: 20px;
}

/* Project-specific heading tweaks */
body[data-project-id="2774d551-f722-817e-aa8b-e68b495ac739"] h3.spaced-48 {
  margin-top: 48px;
}

body[data-project-id="2774d551-f722-817e-aa8b-e68b495ac739"] h3.spaced-64 {
  margin-top: 64px;
}

body[data-project-id="2774d551-f722-817e-aa8b-e68b495ac739"] h2.spaced-80 {
  margin-top: 80px;
}

body[data-project-id="2774d551-f722-817e-aa8b-e68b495ac739"] .container > h2:nth-of-type(3) {
  margin-top: 80px;
}

/* Project-2 tight spacing after label */
body[data-project-id="2774d551-f722-817e-aa8b-e68b495ac739"] p.improvements-label {
  margin-bottom: 8px;
}

body[data-project-id="2774d551-f722-817e-aa8b-e68b495ac739"] ol.tight-top,
body[data-project-id="2774d551-f722-817e-aa8b-e68b495ac739"] ul.tight-top {
  margin-top: 0;
}

/* Project-2 spacing when content follows images */
body[data-project-id="2774d551-f722-817e-aa8b-e68b495ac739"] figure + p,
body[data-project-id="2774d551-f722-817e-aa8b-e68b495ac739"] img + p,
body[data-project-id="2774d551-f722-817e-aa8b-e68b495ac739"] figure + h2,
body[data-project-id="2774d551-f722-817e-aa8b-e68b495ac739"] img + h2,
body[data-project-id="2774d551-f722-817e-aa8b-e68b495ac739"] figure + h3,
body[data-project-id="2774d551-f722-817e-aa8b-e68b495ac739"] img + h3,
body[data-project-id="2774d551-f722-817e-aa8b-e68b495ac739"] figure + ul,
body[data-project-id="2774d551-f722-817e-aa8b-e68b495ac739"] img + ul,
body[data-project-id="2774d551-f722-817e-aa8b-e68b495ac739"] figure + ol,
body[data-project-id="2774d551-f722-817e-aa8b-e68b495ac739"] img + ol {
  margin-top: 48px;
}

/* Global list spacing */
li {
  margin-bottom: var(--space-4);
}

.project-page li {
  margin-top: 12px;
  margin-bottom: 12px;
  font-size: 16px;
}

.list-plain {
  list-style: none;
  padding-left: 0;
  margin: 0 0 var(--space-4);
}

.list-plain li {
  margin-bottom: var(--space-4);
}

.list-bullets {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

.list-bullets li {
  position: relative;
  padding-left: 16px;
}

.list-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-heading);
}

/* ----------------------------------------------------
   Callouts / Blockquotes
   ---------------------------------------------------- */

.callout,
.project-page .project-body blockquote {
  position: relative;
  background: #f7f7f8;
  border: 1px solid #cfd4dc;
  border-left: 4px solid #333; /* Dark grey accent */
  border-radius: 6px;
  padding: 24px 24px 24px 20px;
  margin: 12px 0 32px;
  width: 100%;
  box-sizing: border-box;
}

.callout .callout-emoji {
  position: absolute;
  left: 24px;
  top: 24px;
  font-size: 20px;
  line-height: 1;
}

.callout .callout-text {
  display: none;
}

.callout .callout-children {
  margin: 0;
  padding: 0;
}

.callout h2,
.callout h3,
.project-page .project-body blockquote h2,
.project-page .project-body blockquote h3 {
  margin-top: 24px;
  margin-bottom: 4px;
}

/* Callout header (emoji + title) */
.callout .callout-heading,
.project-page .project-body blockquote.callout .callout-heading {
  display: flex;
  align-items: center;
  gap: 14px; /* more space between emoji and title */
  margin: 0 0 14px;
  padding: 0;
}

.callout .callout-icon,
.project-page .project-body blockquote.callout .callout-icon {
  font-size: 18px;
  line-height: 1;
}

.callout .callout-title,
.project-page .project-body blockquote.callout .callout-title {
  font-size: 22px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--color-heading);
  letter-spacing: 0;
}

/* Callout headings (Notion exports commonly use an <h3> as the callout title) */
.callout h3:not(.callout-heading),
.project-page .project-body blockquote.callout h3:not(.callout-heading) {
  font-size: 22px;
  line-height: 1.25;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-heading);
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 12px;
}

/* If a callout uses the (emoji + title) header structure */
.callout .callout-title,
.project-page .project-body blockquote.callout .callout-title {
  font-size: 22px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0;
}

/* Tighter body for callouts */
.callout > p {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.5;
  color: #4a4a4a;
}

.callout > p:last-child {
  margin-bottom: 0;
}

/* Callout small copy: lists */
.callout li,
.project-page .project-body blockquote li {
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 4px;
}

/* Project-4: Future opps callout single-column */
.project-page[data-project-id="2774d551-f722-8162-869b-c170a644675d"] .callout.future-opps .columns {
  display: block;
}

.project-page[data-project-id="2774d551-f722-8162-869b-c170a644675d"] .callout.future-opps .columns .column + .column {
  margin-top: 20px;
}

/* Project-1: extra spacing above Key Features callout */
body[data-project-id="2774d551-f722-8102-80c3-c69dfdcfd923"] .callout.key-features {
  margin-top: calc(var(--space-5) + 80px);
}

/* Tool Used + My Role: keep typography consistent (inherit .info-card defaults) */
.project-page .tool-used-title,
.project-page .my-role-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-heading);
  margin-top: 0;
  margin-bottom: 8px;
}

/* Tool list: let .info-card control font-size/weight; layout handled by .tool-used-card rules below */
.project-page .tool-used-list {
  list-style: none;
  padding-left: 0;
  margin: 8px 0 0;
  width: 100%;
  max-width: 100%;
}

.project-page .tool-used-list li {
  margin: 4px 0;
}

/* Highlights-style callout */
.callout.highlights {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 24px 24px 24px 56px; /* match base callout */
  margin: 0 0 24px;
}

.callout.highlights .callout-text {
  display: none;
}

.callout.highlights .callout-emoji {
  font-size: 18px;
  line-height: 1;
  margin-top: 2px;
}

.callout.highlights .callout-children {
  margin-top: 0;
  margin-left: 0;
}

.callout.highlights .callout-children h2 {
  margin: 0 0 12px;
  font-weight: 700;
}

.callout.highlights .callout-children ul {
  margin: 0;
}

/* Fallback alignment for emoji + text */
.callout .callout-emoji,
.callout .callout-text {
  display: inline-flex;
  align-items: center;
}

/* Project-4: audience toggles */
.project-page[data-project-id="2774d551-f722-8162-869b-c170a644675d"] details.audience-toggle {
  margin: 8px 0 16px;
}

.project-page[data-project-id="2774d551-f722-8162-869b-c170a644675d"] details.audience-toggle summary {
  cursor: pointer;
  font-weight: 700;
  list-style: disclosure-closed;
}

.project-page[data-project-id="2774d551-f722-8162-869b-c170a644675d"] details.audience-toggle[open] summary {
  list-style: disclosure-open;
  margin-bottom: 8px;
}

/* Generic toggle mapping (Notion heading toggles) */
.project-page details.toggle-block {
  margin: 8px 0 16px;
}

.project-page details.toggle-block summary {
  cursor: pointer;
  font-weight: 700;
  list-style: disclosure-closed;
}

.project-page details.toggle-block[open] summary {
  list-style: disclosure-open;
  margin-bottom: 8px;
}

/* =========================
   Links & Buttons
   ========================= */

a {
  color: var(--color-heading);
  text-decoration: underline;
  text-underline-offset: 3px;
}

a:hover {
  opacity: 0.9;
}

a.active {
  font-weight: 500;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid #cfd4dc;
  background: var(--color-surface);
  color: var(--color-heading);
  text-decoration: none;
  transition:
    transform 140ms ease,
    background 140ms ease,
    border-color 140ms ease;
}

.btn:hover {
  transform: translateY(-1px);
  border-color: #cfd4dc;
}

.btn-primary {
  background: var(--color-accent);
  color: #ffffff;
  border-color: transparent;
}

.btn-secondary {
  background: var(--color-surface);
}

/* =========================
   Layout: Containers
   ========================= */

.container {
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
  padding-left: var(--page-margin);
  padding-right: var(--page-margin);
}

.intro {
  width: var(--content-width);
  max-width: 1380px;
  margin: 0 auto;
  padding-left: var(--page-margin);
  padding-right: var(--page-margin);
}

.work-page .container,
.about-page .container {
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
}

/* Intro list (About) */
.about-page .intro {
  max-width: 800px;
  margin: 0 auto;
}

.about-page .intro h1 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 32px;
  color: #111;
}

.about-page .intro p {
  font-size: 20px;
  line-height: 1.6;
  color: #333;
  margin-bottom: 56px;
}

.intro ul {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 768px) {
  .intro ul {
    grid-template-columns: 1fr 1fr;
  }
}

.intro ul li {
  margin-left: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #555;
}

.intro ul li strong {
  color: #111;
  font-weight: 600;
}

.about-page .intro h1 + ul {
  margin-top: 0;
}

/* =========================
   Header & Nav
   ========================= */

.nav-links {
  position: relative;
  display: flex;
  justify-content: flex-end;
  width: var(--content-width);
  max-width: 1380px;
  margin: 50px auto 0 auto;
  padding-right: var(--space-5);
  gap: var(--space-4);
}

/* Base header bar sizing */
.header-bar {
  width: 100%;
  max-width: 1380px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* Keep the navigation box the same size across all pages */
.work-page .header-bar,
.project-page .header-bar,
.about-page .header-bar,
.landing-page .header-bar {
  height: var(--nav-box-height);
}

.header-bar .brand,
.header-bar .header-right {
  display: flex;
  align-items: center;
  height: 100%;
}

.header-bar .nav-links {
  height: 100%;
  align-items: center;
}

.header-bar .nav-links a {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

/* Work page header */
.work-page .header-bar {
  width: 300px;
  max-width: calc(100% - (2 * var(--page-margin)));
  margin: 12px 0 0 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 40px;
  padding-left: var(--page-margin);
  padding-right: var(--page-margin);
  border: 1px solid #cfd4dc;
  border-radius: var(--radius-sm);
  padding-top: 2px;
  padding-bottom: 2px;
  position: fixed;
  top: 12px;
  left: max(var(--page-margin), calc((100vw - 1380px) / 2 + var(--page-margin)));
  z-index: 1000;
  background: #ffffff;
}

.work-page .brand img {
  width: 50px;
  height: 50px;
  display: block;
}

.work-page .header-bar .nav-links {
  width: auto;
  max-width: none;
  margin: 0;
  padding-right: 0;
  align-items: center;
  gap: 40px;
}

/* Project pages header */
.project-page .header-bar {
  width: 300px;
  max-width: calc(100% - (2 * var(--page-margin)));
  margin: 12px 0 0 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 40px;
  padding-left: var(--page-margin);
  padding-right: var(--page-margin);
  border: 1px solid #cfd4dc;
  border-radius: var(--radius-sm);
  padding-top: 2px;
  padding-bottom: 2px;
  position: fixed;
  top: 12px;
  left: max(var(--page-margin), calc((100vw - 1380px) / 2 + var(--page-margin)));
  z-index: 1000;
  background: #ffffff;
}

.project-page .brand img {
  width: 50px;
  height: 50px;
  display: block;
}

.project-page .header-bar .nav-links {
  width: auto;
  max-width: none;
  margin: 0;
  padding-right: 0;
  align-items: center;
  gap: 40px;
}

/* About header */
.about-page .header-bar {
  width: 300px;
  max-width: calc(100% - (2 * var(--page-margin)));
  margin: 12px 0 0 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 40px;
  padding-left: var(--page-margin);
  padding-right: var(--page-margin);
  border: 1px solid #cfd4dc;
  border-radius: var(--radius-sm);
  padding-top: 2px;
  padding-bottom: 2px;
  position: fixed;
  top: 12px;
  left: max(var(--page-margin), calc((100vw - 1380px) / 2 + var(--page-margin)));
  z-index: 1000;
  /* Keep nav box white on About for consistency */
  background: #ffffff;
}

.about-page .brand img {
  width: 50px;
  height: 50px;
  display: block;
}

.about-page .header-bar .nav-links {
  width: auto;
  max-width: none;
  margin: 0;
  padding-right: 0;
  align-items: center;
  gap: 40px;
}

/* Landing header */
.landing-page .header-bar {
  width: 300px;
  max-width: calc(100% - (2 * var(--page-margin)));
  margin: 40px auto 0 var(--page-margin);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 40px;
  padding-left: var(--page-margin);
  padding-right: var(--page-margin);
  border: 1px solid #cfd4dc;
  border-radius: var(--radius-sm);
  padding-top: 2px;
  padding-bottom: 2px;
  position: fixed;
  top: 12px;
  left: var(--page-margin);
  z-index: 1000;
  background: var(--color-bg);
}

.landing-page .brand img {
  width: 50px;
  height: 50px;
  display: block;
}

.landing-page .header-bar .nav-links {
  width: auto;
  max-width: none;
  margin: 0;
  padding-right: 0;
  align-items: center;
  gap: 40px;
}

/* Shared header positioning */
.work-page header,
.project-page header,
.landing-page header,
.about-page header {
  position: relative;
}

/* Main padding to avoid overlap with fixed header */
.work-page main,
.project-page main,
.about-page main,
.landing-page main {
  padding-top: 80px;
}

.about-page main {
  padding-top: 140px;
}

.work-page main {
  padding-top: 244px;
}

/* Nav link style */
.nav-links a {
  position: relative;
  text-decoration: none;
  color: var(--color-heading);
  letter-spacing: 0;
  font-size: 16px;
  font-weight: 700;
}

.nav-links a:hover,
.nav-links a:focus {
  color: var(--color-heading);
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0%;
  height: 2px;
  background: currentColor;
  transition: width 0.3s ease;
}

.nav-links a:hover::after,
.nav-links a:focus::after,
.nav-links a.active::after {
  width: 100%;
}

.nav-links a.active {
  font-weight: 700;
}

/* =========================
   Work Page: Cards & Grid
   ========================= */

.project-card,
.password-section,
.project-hero,
.footer,
header,
nav,
.projects-grid {
  background: transparent;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

.work-page .projects-grid {
  margin-top: 100px;
}

.project-card {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: none;
  position: relative;
  transition: border-color 0.2s ease, border-width 0.2s ease;
}

.project-card:hover {
  border-color: #2b2f36;
  border-width: 0.5px;
}

.project-card .project-content {
  padding: var(--space-4);
}

.project-card h3 {
  margin: 0 0 var(--space-1);
  font-size: 16px;
  letter-spacing: 0.5px;
  font-weight: 700;
  position: relative;
  overflow: hidden;
}

.project-card .original-title {
  display: block;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-card .hover-title {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  display: block;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.project-card:hover .original-title,
.project-card:focus-within .original-title {
  transform: translateY(-100%);
}

.project-card:hover .hover-title,
.project-card:focus-within .hover-title {
  transform: translateY(-100%);
}

.project-card p {
  margin: 0 0 var(--space-3);
  font-size: 16px;
  letter-spacing: 0.5px;
  font-weight: 500;
}

.project-image {
  position: relative;
  /* Fixed thumbnail area so all work tiles are consistent */
  aspect-ratio: 16 / 9;
  height: auto;
  overflow: hidden;
}

.project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: none;
}

/* Work tiles: Segmented Control thumbnail should have square corners */
.work-page .project-card:has(> a.card-link[href="work/segmented-control/index.html"]) .project-image img,
.work-page .project-card:has(> a.card-link[href="segmented-control/index.html"]) .project-image img {
  border-radius: 0;
}

/* Fallback for browsers that don't support :has() */
.work-page .project-card > a.card-link[href="work/segmented-control/index.html"] ~ .project-image img,
.work-page .project-card > a.card-link[href="segmented-control/index.html"] ~ .project-image img {
  border-radius: 0;
}

/* Segmented Control card: square image */
.work-page .project-card[data-project-id="2774d551-f722-8178-b9f9-f138b4257919"] .project-image img {
  border-radius: 0;
}

/* Portfolio card: dark background for text screenshot, no crop */
.work-page .project-card[data-project-id="2aa4d551-f722-80f5-b824-c19feebf7f7b"] .project-image {
  background: #000;
  padding: 12px;
  box-sizing: border-box;
}
.work-page .project-card[data-project-id="2aa4d551-f722-80f5-b824-c19feebf7f7b"] .project-image img {
  object-fit: contain;
  object-position: center;
}

/* (Legacy portfolio :has()/:not selectors removed — now uses data-project-id) */
._dead {
  background: #000; /* avoids “white border” when using contain */
  padding: 12px;
  box-sizing: border-box;
}

/* RBAC card: zoom in slightly */
.work-page .project-card[data-project-id="2774d551-f722-8102-80c3-c69dfdcfd923"] .project-image img,
.work-page .project-card[data-project-id="2774d551-f722-8102-80c3-c69dfdcfd923"] .project-image:hover img {
  transform: scale(1.08);
  transform-origin: center;
}

.project-image:hover img {
  transform: none;
}

.project-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.12);
  opacity: 0;
  transition: opacity 160ms ease;
}

.project-image:hover .project-overlay {
  opacity: 1;
}

/* Full-card link */
.project-card .card-link {
  position: absolute;
  inset: 0;
  z-index: 5;
}


/* Hide specific project from related lists / cards if needed */
.projects-related li:has(> a[href="project-5.html"]) {
  display: none;
}

.work-page .project-card:has(> a.card-link[href="project-5.html"]) {
  display: none;
}

/* =========================
   Hero (Generic)
   ========================= */

.hero {
  padding: var(--space-7) 0 var(--space-6);
  text-align: center;
}

.hero-title {
  font-size: clamp(2rem, 5vw, 3rem);
  margin-bottom: var(--space-2);
}

.hero-subtitle {
  font-size: clamp(1rem, 2.5vw, 1.125rem);
}

/* =========================
   Project Pages: Hero + Body
   ========================= */

/* Legacy header alignment */
.project-page .project-header {
  max-width: 970px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.project-page .project-header h1 {
  max-width: 970px;
  margin: 0 auto 40px;
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.project-page .project-header h1.h1-wrapped {
  /* If the title wraps, reduce size for a cleaner hero */
  font-size: clamp(2.05rem, 3.5vw, 2.7rem);
}

/* Adjacent hero image when directly after header (fallback) */
.project-page .project-header + figure,
.project-page .project-header + img {
  width: 100%;
  max-width: 970px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.project-page .project-header + figure img,
.project-page .project-header + img {
  width: 100%;
  height: auto;
  display: block;
}

/* Related projects layout (project pages) */
.project-page .projects-related {
  max-width: 1380px;
  margin: 60px auto 0;
  padding-top: 40px;
  padding-bottom: 40px; /* Ensure space at bottom */
  border-top: 1px solid var(--color-border);
}

.project-page .projects-related-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: center;
}

.project-page .projects-related-links a {
  text-decoration: none;
  color: var(--color-heading);
  font-weight: 600;
  letter-spacing: 0;
  padding-bottom: 4px;
  position: relative;
}

.project-page .projects-related-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.project-page .projects-related-links a:hover::after,
.project-page .projects-related-links a:focus::after {
  transform: scaleX(1);
}


/* Reusable caption block + my-role */
.project-page .caption-block h3,
.project-page .my-role h3 {
  font-size: 14px;
  color: var(--color-heading);
  font-weight: 700;
}

.project-page .my-role h2 {
  font-size: 14px;
  color: var(--color-heading);
  font-weight: 300;
  text-align: center;
}

.project-page .caption-block p,
.project-page .my-role p {
  font-size: 14px;
  color: #6f6f6f;
  font-weight: 300;
  text-align: center;
}

.project-page .my-role {
  width: 600px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 8px;
  margin-bottom: 8px;
}

.project-page .columns .caption-block,
.project-page .columns .my-role {
  max-width: 420px;
  width: 100%;
  justify-self: end;
  margin-top: 40px;
}

/* My Role icon spacing */
.my-role-icon {
  display: block;
  margin: 0;
  line-height: 0;
}

.my-role-icon + h2,
.my-role-icon + p {
  margin-top: 12px !important;
}

.project-page .my-role .my-role-icon {
  margin-left: auto;
  margin-right: auto;
}

.project-page .my-role p {
  margin-bottom: 8px;
}

/* Project-specific GIF rounding */
img {
  max-width: 100%;
  display: block;
}

.gif-rounded,
img[src*=".gif"] {
  border-radius: 22px;
}

/* GIF sizing: make all GIFs render ~60% smaller than previous defaults */
.project-page img[src*=".gif"] {
  width: 100%;
  max-width: 70%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Preserve "utility size" intent for GIFs (70% of prior max-widths) */
.project-page img.img-80[src*=".gif"] { max-width: 56%; }
.project-page img.img-60[src*=".gif"] { max-width: 42%; }
.project-page img.img-40[src*=".gif"] { max-width: 28%; }
.project-page img.img-30[src*=".gif"] { max-width: 21%; }
.project-page img.img-300[src*=".gif"] { max-width: 35%; }

/* Exception: Segmented Button project keeps original GIF sizing */
body.project-page[data-project-id="2774d551-f722-8178-b9f9-f138b4257919"] img[src*=".gif"],
.project-page[data-project-id="2774d551-f722-8178-b9f9-f138b4257919"] img[src*=".gif"] {
  max-width: 100%;
}
body.project-page[data-project-id="2774d551-f722-8178-b9f9-f138b4257919"] img.img-80[src*=".gif"],
.project-page[data-project-id="2774d551-f722-8178-b9f9-f138b4257919"] img.img-80[src*=".gif"] { max-width: 80%; }
body.project-page[data-project-id="2774d551-f722-8178-b9f9-f138b4257919"] img.img-60[src*=".gif"],
.project-page[data-project-id="2774d551-f722-8178-b9f9-f138b4257919"] img.img-60[src*=".gif"] { max-width: 60%; }
body.project-page[data-project-id="2774d551-f722-8178-b9f9-f138b4257919"] img.img-40[src*=".gif"],
.project-page[data-project-id="2774d551-f722-8178-b9f9-f138b4257919"] img.img-40[src*=".gif"] { max-width: 40%; }
body.project-page[data-project-id="2774d551-f722-8178-b9f9-f138b4257919"] img.img-30[src*=".gif"],
.project-page[data-project-id="2774d551-f722-8178-b9f9-f138b4257919"] img.img-30[src*=".gif"] { max-width: 30%; }
body.project-page[data-project-id="2774d551-f722-8178-b9f9-f138b4257919"] img.img-300[src*=".gif"],
.project-page[data-project-id="2774d551-f722-8178-b9f9-f138b4257919"] img.img-300[src*=".gif"] { max-width: 50%; }
/* Segmented Control project: reduce hero image corner radius */
body[data-project-id="2774d551-f722-8178-b9f9-f138b4257919"] .project-hero-figure img[src*=".gif"] {
  border-radius: 8px;
}

.project-page[data-project-id="2774d551-f722-8162-869b-c170a644675d"] img[src*=".gif"] {
  width: 100%;
  max-width: 35%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

body[data-project-id="2774d551-f722-817e-aa8b-e68b495ac739"] img[src*=".gif"] {
  border-radius: 15px;
}

/* Role-Based Access Control / Governance-Driven RBAC / Centralize Admin: GIF stroke + radius */
body[data-project-id="2774d551-f722-8102-80c3-c69dfdcfd923"] .project-body img[src*=".gif"],
body[data-project-id="2774d551-f722-817e-aa8b-e68b495ac739"] .project-body img[src*=".gif"] {
  border: 8px solid var(--color-border) !important;
  border-radius: 12px !important;
  box-sizing: border-box;
  /* Override prior “crop” so the stroke is visible */
  -webkit-clip-path: none;
  clip-path: none;
}

/* Columns layout (generic) */
.project-page .columns {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--space-6);
  align-items: start;
  margin: var(--space-5) 0;
}

/* Pro Referral Mobile App / Close the Job Lifecycle: Contact & Update GIFs — 3-up grid */
body[data-project-id="2774d551-f722-8162-869b-c170a644675d"] .columns.contact-update-gif-grid {
  display: grid !important; /* override body-wide column stacking rules */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* Ensure generous spacing between the 3 GIFs */
  gap: clamp(80px, 6vw, 120px);
  align-items: start;
  justify-items: center;
}

/* Center items within each column */
body[data-project-id="2774d551-f722-8162-869b-c170a644675d"] .columns.contact-update-gif-grid > .column {
  display: flex;
  justify-content: center;
  width: auto !important; /* override any forced 100% widths */
}

/* Ensure images in this grid use XS sizing */
body[data-project-id="2774d551-f722-8162-869b-c170a644675d"] .columns.contact-update-gif-grid img {
  width: 200px !important;
  max-width: 100% !important;
  height: auto !important;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Pro Referral Mobile App: Design Process image padding */
body[data-project-id="2774d551-f722-8162-869b-c170a644675d"] .project-body img[src*="notion-2774d551-f722-8112-a9b7-e0813e162127"] {
  padding: 40px;
  background: #ffffff;
}

.project-page .columns .column figure {
  margin: 0;
}

.project-page .columns .column img {
  width: 100%;
  height: auto;
  display: block;
}

.project-page .columns.gap-48 {
  gap: 48px;
}

.project-page .columns.gap-stack-40 > .column + .column {
  margin-top: 40px;
}

.project-page .column.gap-20 figure + figure {
  margin-top: 20px;
}

/* Auto two-column for h2/h3 + figure (legacy, overridden inside .project-body) */
.project-page .container > h2 + p {
  max-width: 56%;
}

.project-page .container > h2 + p + figure {
  float: right;
  width: 40%;
  margin-left: var(--space-6);
  margin-bottom: var(--space-5);
}

.project-page .container > h2 + p + figure img {
  width: 100%;
  height: auto;
  display: block;
}

.project-page .container > h2 + p + figure + * {
  clear: both;
}

.project-page .container > h3 + p {
  max-width: 56%;
}

.project-page .container > h3 + p + figure {
  float: right;
  width: 40%;
  margin-left: var(--space-6);
  margin-bottom: var(--space-5);
}

.project-page .container > h3 + p + figure img {
  width: 100%;
  height: auto;
  display: block;
}

.project-page .container > h3 + p + figure + * {
  clear: both;
}

/* Ensure pills stay small */
.project-page p.pill {
  font-size: 10px;
}

@media (max-width: 900px) {
  .project-page .columns {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .project-page .container > h2 + p,
  .project-page .container > h3 + p {
    max-width: 100%;
  }

  .project-page .container > h2 + p + figure,
  .project-page .container > h3 + p + figure {
    float: none;
    width: 100%;
    margin-left: 0;
  }
}

/* =========================
   Page-Specific Tweaks
   ========================= */

body.landing-page .container {
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}

body.work-page main {
  padding: var(--space-6) 0 var(--space-7);
}

/* Project page header spacing */
body.project-page .project-header {
  margin: var(--space-6) 0 var(--space-5);
}

/* Top spacing for main headings */
.work-page .intro h1 {
  margin-top: 30px;
  line-height: 1.1;
}

/* Project header h1 */
.project-page .project-header h1 {
  margin-top: 80px;
  margin-bottom: 60px;
  line-height: 1.1;
  text-align: center;
  font-size: clamp(2.25rem, 5.5vw, 3.25rem);
}

body[data-project-id="2774d551-f722-8102-80c3-c69dfdcfd923"] .project-header h1 {
  margin-bottom: 16px;
}

body[data-project-id="2774d551-f722-817e-aa8b-e68b495ac739"] .project-header h1 {
  margin-bottom: 24px;
}

/* About intro width & alignment */
.about-page .intro {
  width: 100%;
  max-width: 690px;
  margin: 0;
  margin-left: 0;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  text-align: left;
}

/* -----------------------------------------
   PROJECT HERO — max-width 970px
------------------------------------------ */

.project-page .project-hero {
  width: 100%;
  max-width: 970px;
  margin: 0 auto 60px;
  padding: 0; /* use container padding only so it aligns with nav */
  text-align: center;
}

.project-page .project-hero-figure,
.project-page .project-hero-figure img {
  width: 100%;
  max-width: 970px;
  margin-left: auto;
  margin-right: auto;
  display: block;
  height: auto;
}

/* Project hero images: rounded by default (except specific projects below) */
.project-page .project-hero-figure .hero-figure {
  border-radius: 8px;
  overflow: hidden;
}

.project-page .project-hero-figure img {
  border-radius: 8px;
}

/* Exceptions: keep hero images square */
body[data-project-id="2774d551-f722-8102-80c3-c69dfdcfd923"] .project-hero-figure .hero-figure,
body[data-project-id="2774d551-f722-8102-80c3-c69dfdcfd923"] .project-hero-figure img,
body[data-project-id="2774d551-f722-817e-aa8b-e68b495ac739"] .project-hero-figure .hero-figure,
body[data-project-id="2774d551-f722-817e-aa8b-e68b495ac739"] .project-hero-figure img {
  border-radius: 0;
}

/* Hide hero <figure> if empty (optional hero) */
.project-page .project-hero-figure:empty {
  display: none;
}

/* -----------------------------------------
   PROJECT BODY — max 900px
------------------------------------------ */

.project-page .project-body {
  width: 100%;
  max-width: 900px; /* project body column width */
  margin: 0 auto;
  text-align: left;
}

/* Everything inside body: full width of the 900px column */
.project-page .project-body > * {
  max-width: 100%;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-right: 0;
}
/* Don't zero-out padding-left on lists (need it for markers) or blockquotes/callouts (need internal padding) */
.project-page .project-body > *:not(ul):not(ol):not(blockquote) {
  padding-left: 0;
}

/* Project body: Center text for readability, allow images to be wider */
.project-page .project-body {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
}

/* Text column: full width of 720px body */
.project-page .project-body p,
.project-page .project-body ul,
.project-page .project-body ol,
.project-page .project-body h2,
.project-page .project-body h3,
.project-page .project-body h4,
.project-page .project-body blockquote {
  max-width: 720px;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Typography Improvements */
.project-page .project-body p,
.project-page .project-body ul li,
.project-page .project-body ol li {
  font-size: 17px;
  line-height: 1.8;
  color: var(--color-text);
  letter-spacing: 0;
}

.project-page .project-body p {
  margin-top: 0;
  margin-bottom: 24px;
}

/* Tighten spacing when a paragraph is followed by a list */
.project-page .project-body p + ul,
.project-page .project-body p + ol {
  margin-top: -16px;
}

/* Headings breathing room */
.project-page .project-body h2 {
  margin-top: 80px;
  margin-bottom: 16px;
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.project-page .project-body h3 {
  margin-top: 56px;
  margin-bottom: 12px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.project-page .project-body h4 {
  margin-top: 24px;
  margin-bottom: 8px;
  font-size: 17px;
  font-weight: 600;
  color: var(--color-heading);
  letter-spacing: 0;
}

/* When an H3 follows an H2, keep them visually grouped */
.project-page .project-body h2 + h3 {
  margin-top: var(--space-2);
}

/* Images: Centered, no shadow/radius */
.project-page .project-body figure {
  max-width: 100%;
  margin: 48px auto;
  text-align: center;
  display: block;
}

.project-page .project-body img {
  border-radius: 0;
  box-shadow: none;
  max-width: 100%;
  height: auto;
  display: inline-block;
}

/* Standardized sizing from filename tags (applied by assets/sync-sanitizer.js) */
.project-page .project-body img.img-xs {
  width: 200px !important;
  max-width: 100% !important;
  height: auto !important;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 14px !important;
}

.project-page .project-body img.img-small {
  width: 320px !important;
  max-width: 100% !important;
  height: auto !important;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.project-page .project-body img.img-medium {
  width: 520px !important;
  max-width: 100% !important;
  height: auto !important;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.project-page .project-body img.img-large {
  width: 720px !important;
  max-width: 100% !important;
  height: auto !important;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.project-page .project-body img.img-xl {
  width: 720px !important;
  max-width: 100% !important;
  height: auto !important;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Utility: scale a specific image to 70% (used by sync-sanitizer hooks) */
.project-page .project-body img.img-70 {
  width: 100%;
  max-width: 70%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Utility: scale a specific image to 60% (used by sync-sanitizer hooks) */
.project-page .project-body img.img-60 {
  width: 100%;
  max-width: 60%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Utility: 77% width (70% * 1.10) */
.project-page .project-body img.img-77 {
  width: 100%;
  max-width: 77%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Utility: thin light-grey stroke for specific images */
.project-page .project-body img.img-stroke {
  border: 1px solid var(--color-border);
}

/* Notion-Powered Portfolio (Vibe Code): scale non-GIF body images to 70% */
body[data-project-id="2aa4d551-f722-80f5-b824-c19feebf7f7b"] .project-body img:not([src*=".gif"]) {
  width: 100%;
  max-width: 70%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* GIF sizing inside project body (override the generic img rule above) */
.project-page .project-body img[src*=".gif"] {
  width: 100%;
  max-width: 70%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Notion-Powered Portfolio (Vibe Code): GIF stroke + corner radius */
body[data-project-id="2aa4d551-f722-80f5-b824-c19feebf7f7b"] .project-body img[src*=".gif"] {
  border: 2px solid var(--color-border);
  border-radius: 4px;
  box-sizing: border-box;
  -webkit-clip-path: none;
  clip-path: none;
}

/* Pro Referral Mobile App / Close the Job Lifecycle: GIF stroke + corner radius */
body[data-project-id="2774d551-f722-8162-869b-c170a644675d"] .project-body img[src*=".gif"] {
  border: 8px solid var(--color-border) !important;
  border-radius: 12px !important;
  box-sizing: border-box;
  -webkit-clip-path: none;
  clip-path: none;
}

/* Preserve "utility size" intent for GIFs inside body (70% of prior max-widths) */
.project-page .project-body img.img-80[src*=".gif"] { max-width: 56%; }
.project-page .project-body img.img-60[src*=".gif"] { max-width: 42%; }
.project-page .project-body img.img-40[src*=".gif"] { max-width: 28%; }
.project-page .project-body img.img-30[src*=".gif"] { max-width: 21%; }
.project-page .project-body img.img-300[src*=".gif"] { max-width: 35%; }

/* Exception: Segmented Button project keeps original GIF sizing (also inside body) */
body[data-project-id="2774d551-f722-8178-b9f9-f138b4257919"] .project-body img[src*=".gif"],
.project-page[data-project-id="2774d551-f722-8178-b9f9-f138b4257919"] .project-body img[src*=".gif"] {
  max-width: 100%;
}
body[data-project-id="2774d551-f722-8178-b9f9-f138b4257919"] .project-body img.img-80[src*=".gif"],
.project-page[data-project-id="2774d551-f722-8178-b9f9-f138b4257919"] .project-body img.img-80[src*=".gif"] { max-width: 80%; }
body[data-project-id="2774d551-f722-8178-b9f9-f138b4257919"] .project-body img.img-60[src*=".gif"],
.project-page[data-project-id="2774d551-f722-8178-b9f9-f138b4257919"] .project-body img.img-60[src*=".gif"] { max-width: 60%; }
body[data-project-id="2774d551-f722-8178-b9f9-f138b4257919"] .project-body img.img-40[src*=".gif"],
.project-page[data-project-id="2774d551-f722-8178-b9f9-f138b4257919"] .project-body img.img-40[src*=".gif"] { max-width: 40%; }
body[data-project-id="2774d551-f722-8178-b9f9-f138b4257919"] .project-body img.img-30[src*=".gif"],
.project-page[data-project-id="2774d551-f722-8178-b9f9-f138b4257919"] .project-body img.img-30[src*=".gif"] { max-width: 30%; }
body[data-project-id="2774d551-f722-8178-b9f9-f138b4257919"] .project-body img.img-300[src*=".gif"],
.project-page[data-project-id="2774d551-f722-8178-b9f9-f138b4257919"] .project-body img.img-300[src*=".gif"] { max-width: 50%; }

/* Allow opt-in rounding for specific GIFs inside the project body */
.project-page .project-body img.gif-rounded {
  border-radius: 22px;
}

/* Centralize Administrative Features: Streamline Navigation GIF should be smaller */
body[data-project-id="2774d551-f722-817e-aa8b-e68b495ac739"] .project-body img.streamline-nav-gif {
  width: 100%;
  max-width: 56%;
  /* Match other "stroked GIF" treatment */
  border: 8px solid var(--color-border);
  border-radius: 12px;
  box-sizing: border-box;
  /* Ensure the stroke is visible (don’t crop) */
  -webkit-clip-path: none;
  clip-path: none;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

/* Centralize Administrative Features: Feature Discoverability section GIFs (tagged by sync-sanitizer.js) */
body[data-project-id="2774d551-f722-817e-aa8b-e68b495ac739"] .project-body img.caf-discoverability-gif {
  border: 8px solid var(--color-border);
  border-radius: 12px;
  box-sizing: border-box;
}

@media (max-width: 640px) {
  body[data-project-id="2774d551-f722-817e-aa8b-e68b495ac739"] .project-body img.streamline-nav-gif {
    max-width: 63%;
  }
}

/* (kept explicit .project-body selector out — .project-page img.improvements-gif already wins via class) */

/* List styling */
.project-page .project-body ul,
.project-page .project-body ol {
  padding-left: 1.6em; /* ~28px — enough room for list markers */
  margin-top: 0;
  margin-bottom: 24px;
  list-style-position: outside;
}

.project-page .project-body li {
  margin-bottom: 10px;
  padding-left: 4px;
}

/* Parent bullets (that contain nested bullets) should be slightly bolder */
.project-page .project-body li.has-sublist,
.project-page .project-body li:has(> ul),
.project-page .project-body li:has(> ol) {
  font-weight: 600;
}

/* Keep nested bullets at normal weight */
.project-page .project-body li.has-sublist > ul > li,
.project-page .project-body li.has-sublist > ol > li,
.project-page .project-body li:has(> ul) > ul > li,
.project-page .project-body li:has(> ol) > ol > li {
  font-weight: 400;
}

/* Centralize Administrative Features: form patterns list headings */
body[data-project-id="2774d551-f722-817e-aa8b-e68b495ac739"] .project-body ul.form-patterns {
  padding-left: 0; /* remove indent for the two top-level headings */
}

body[data-project-id="2774d551-f722-817e-aa8b-e68b495ac739"] .project-body ul.form-patterns > li.form-pattern {
  list-style: none; /* remove bullet symbol for the h4 headings */
  padding-left: 0;
}

body[data-project-id="2774d551-f722-817e-aa8b-e68b495ac739"] .project-body ul.form-patterns > li.form-pattern::marker {
  content: "";
}

body[data-project-id="2774d551-f722-817e-aa8b-e68b495ac739"] .project-body ul.form-patterns > li.form-pattern > h4 {
  margin-top: 0;
  margin-bottom: 8px;
}

body[data-project-id="2774d551-f722-817e-aa8b-e68b495ac739"] .project-body ul.form-patterns > li.form-pattern > ul {
  padding-left: 20px; /* keep bullets/indent for nested items */
  margin-top: 0;
}

/* Disable auto two-column logic inside project-body */
.project-page .project-body > h2 + p,
.project-page .project-body > h3 + p {
  max-width: 900px;
  width: 100%;
  float: none;
}

.project-page .project-body > h2 + p + figure,
.project-page .project-body > h3 + p + figure {
  float: none;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Related projects bar can still stretch wider if used inside body */
.project-page .project-body .projects-related {
  max-width: 1380px;
}

/* Ensure text is left-aligned in body */
.project-page .project-body p,
.project-page .project-body li,
.project-page .project-body h2,
.project-page .project-body h3,
.project-page .project-body h4 {
  text-align: left;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

/* Force columns inside body to stack vertically (one column layout)
   (except explicitly opt-in grids like the Pro Referral Contact & Update GIF trio) */
.project-page .project-body .columns:not(.contact-update-gif-grid),
.project-page .project-body .columns.two-up:not(.contact-update-gif-grid),
.project-page .project-body .columns.gap-48:not(.contact-update-gif-grid) {
  display: block !important;
}

.project-page .project-body .columns:not(.contact-update-gif-grid) > *,
.project-page .project-body .columns.two-up:not(.contact-update-gif-grid) > *,
.project-page .project-body .columns.gap-48:not(.contact-update-gif-grid) > * {
  width: 100%;
}

/* Keep figures below headings/paragraphs in body */
.project-page .project-body h2 + p + figure,
.project-page .project-body h3 + p + figure {
  float: none;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Segmented button project specific adjustments */
.project-page[data-project-id="2774d551-f722-8178-b9f9-f138b4257919"] .project-body figure {
  float: none !important;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* ----------------------------------------------------
   Image Protection Overlay
   ---------------------------------------------------- */
.image-protected {
  position: relative;
  display: inline-block;
}

.image-protected::after {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: auto;
}

.image-protected,
.image-protected img {
  -webkit-user-select: none;
  user-select: none;
}

/* Shared info card for My role + Tools used */
.project-page .info-card {
  width: 100%;
  max-width: 550px;
  margin: 32px auto 24px;
  padding: 20px 24px;
  border-radius: 16px;
  background: #EAE9E6; /* Medium-grey box */
  box-shadow: none;
  border: none;
  text-align: left;
}

.project-page .info-card h2,
.project-page .info-card h3 {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 13px; /* Smaller */
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--color-heading);
}

.project-page .info-card p,
.project-page .info-card li,
.project-page .info-card ul li,
.project-page .info-card ol li {
  font-size: 13px; /* Smaller */
  line-height: 1.6;
  color: #666; /* Slightly lighter text */
  margin-bottom: 6px;
}

.project-page .info-card > :last-child {
  margin-bottom: 0;
}

.project-page .my-role-block {
  width: 100%;
  max-width: 550px;
  margin: 32px auto 24px;
  padding: 20px 24px;
  border-radius: 16px;
  background: #EAE9E6;
  /* border: 1px solid #e4e4eb; */ /* removed */
  /* box-shadow: 0 10px 30px rgba(15, 23, 42, 0.03); */ /* removed */
  text-align: left;
}

/* RBAC + Admin: My Role card should be 600px and centered */
body[data-project-id="2774d551-f722-8102-80c3-c69dfdcfd923"] .my-role-block,
body[data-project-id="2774d551-f722-817e-aa8b-e68b495ac739"] .my-role-block {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.project-page .tool-used-card {
  width: 100%;
  max-width: 550px;
  margin: 32px auto 24px;
  padding: 20px 24px;
  border-radius: 16px;
  background: #EAE9E6;
  /* border: 1px solid #e4e4eb; */ /* removed */
  /* box-shadow: 0 10px 30px rgba(15, 23, 42, 0.03); */ /* removed */
  text-align: left;
}

.project-page .tool-used-card .tool-used-list {
  list-style: none;
  padding-left: 0;
  margin: 8px 0 0;
  width: 100%;
  max-width: 100%;
}

.project-page .tool-used-card .tool-used-list li {
  margin: 4px 0;
}

/* Group My Role + Tools Used side-by-side */
.project-page .project-info-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 32px auto 24px;
  max-width: 720px; /* match content width */
}

.project-page .project-info-pair .my-role-block,
.project-page .project-info-pair .tool-used-card {
  width: 100%;
  max-width: none;
  margin: 0;
}

/* RBAC + Admin: if only My Role exists, keep it centered at 600px */
body[data-project-id="2774d551-f722-8102-80c3-c69dfdcfd923"] .project-info-pair,
body[data-project-id="2774d551-f722-817e-aa8b-e68b495ac739"] .project-info-pair {
  grid-template-columns: 1fr;
  max-width: 600px;
}

@media (max-width: 768px) {
  .project-page .project-info-pair {
    grid-template-columns: 1fr;
  }
  
  .project-page .project-info-pair .my-role-block,
  .project-page .project-info-pair .tool-used-card {
    max-width: 100%;
  }
}

/* Project pages: single-column main container (no CSS multi-columns) */
.project-page main .container {
  column-count: 1;
}

/* =========================
   Collapsible lists
   ========================= */

.collapsible-list.collapsed li:nth-child(n + 6) {
  display: none;
}

.collapsible-toggle {
  display: block;
  margin: 8px auto 0;
  cursor: pointer;
  background: var(--color-heading);
  border: 0;
  padding: 6px 12px;
  color: #ffffff;
  text-decoration: none;
  border-radius: 9999px;
  font-weight: 600;
  transition: opacity 140ms ease;
  font: inherit;
}

.collapsible-toggle:hover,
.collapsible-toggle:focus {
  opacity: 0.95;
}

.collapsible-list {
  position: relative;
}

.collapsible-list.collapsed::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 48px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--color-bg));
}

/* =========================
   Related projects (generic)
   ========================= */

.projects-related {
  list-style: none;
  padding: 0;
  margin: 80px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
}

.projects-related li {
  flex: 1 1 0;
  text-align: center;
  margin-bottom: 0;
}

.projects-related a {
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--color-heading);
  transition: color 160ms ease;
}

.projects-related a:hover {
  color: #8c8c8c;
}

.projects-related-heading {
  text-align: center;
  font-weight: 700;
  margin-top: var(--space-7);
  display: none;
}

/* =========================
   Footer
   ========================= */

.footer {
  margin-top: var(--space-7);
  padding: var(--space-6) 0;
  color: var(--color-heading);
}

/* =========================
   Accessibility
   ========================= */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* =========================
   Small-screen tweaks
   ========================= */

@media (max-width: 640px) {
  .project-image {
    aspect-ratio: 16 / 9;
    height: auto;
  }
}

/* =========================
   Landing Page (Password)
   ========================= */

.landing-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
  background: #ffffff;
}

.landing-page .container {
  width: 100%;
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}

.landing-page main {
  padding-top: 0 !important;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.password-section {
  text-align: center;
  width: 100%;
  max-width: 320px;
  padding: 0 20px;
}

.brand-logo {
  margin-bottom: 48px;
}

/* Logo Animation */
.brand-logo .animated-logo {
  width: 80px;
  height: 80px;
  margin: 0 auto;
  display: block;
}

.brand-logo .logo-path {
  fill: transparent;
  stroke: #111;
  stroke-width: 0.8px;
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: drawLogo 2.5s cubic-bezier(0.22, 1, 0.36, 1) forwards,
             fillLogo 1s ease-out 2s forwards;
}

.brand-logo .path-2 {
  animation-delay: 0.3s, 2.3s; /* Delay second letter slightly */
}

@keyframes drawLogo {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fillLogo {
  from {
    fill: transparent;
  }
  to {
    fill: #111;
    stroke: transparent;
  }
}

.password-form .input-group {
  position: relative;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 4px;
  transition: border-color 0.3s ease;
}

.password-form .input-group:focus-within {
  border-bottom-color: #111;
}

.password-form .input-group.error {
  border-bottom-color: #dc2626;
}

.password-form input {
  border: none;
  background: transparent;
  outline: none;
  flex: 1;
  font-size: 16px;
  font-family: 'Inter', sans-serif;
  color: #111;
  padding: 8px 44px 8px 0; /* reserve space for browser/password-manager UI on the right */
  text-align: center; /* Optional: Center text input? Or keep left. Left is standard. */
  text-align: left;
}

.password-form .form-error {
  margin-top: 10px;
  min-height: 18px; /* reserve space so layout doesn't jump */
  font-size: 13px;
  line-height: 1.35;
  color: #dc2626;
}

.password-form input::placeholder {
  color: #9ca3af;
  font-weight: 400;
}

.password-form .btn-arrow {
  background: transparent;
  border: none;
  padding: 8px;
  cursor: pointer;
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, opacity 0.2s;
  opacity: 0.6;
}

.password-form .btn-arrow:hover {
  transform: translateX(4px);
  opacity: 1;
}

.password-hint {
  margin-top: 32px;
  font-size: 12px;
  color: #d1d5db;
  font-weight: 400;
  letter-spacing: 0;
}
/* =========================
   About Page: Connect Section
   ========================= */

.about-page .connect {
  width: 100%;
  max-width: 690px;
  margin: 80px 0 0 0;
  padding-top: 60px;
  border-top: 1px solid #e5e7eb;
}

@media (min-width: 1024px) {
  .about-page .container {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 120px;
    align-items: start;
  }

  .about-page .intro {
    max-width: none;
    margin: 0;
  }

  /* When side-by-side, remove the top separation */
  .about-page .connect {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    max-width: none;
    border-left: 1px solid #e5e7eb;
    padding-left: 40px;
  }
  
  .about-page .connect h2 {
    margin-top: 0;
  }
}

.about-page .connect h2 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0;
  margin-bottom: 24px;
  font-weight: 600;
  color: #6b7280; /* Lighter label style */
}

.about-page .connect p {
  font-size: 15px;
  color: #6b7280; /* Match heading color */
  margin-bottom: 28px;
  line-height: 1.6;
}

.connect-actions {
  display: flex;
  gap: 24px; /* Increased gap for text links */
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.connect-actions a {
  font-size: 15px;
  color: #111;
  text-decoration: underline;
  text-underline-offset: 4px; /* distinct underline */
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.connect-actions a:hover {
  opacity: 0.7;
}

/* Social links (LinkedIn) - standardizing to match */
.social-links a {
  font-size: 14px;
  color: #6b7280;
  text-decoration: none;
  border-bottom: 1px solid #e5e7eb;
  transition: border-color 0.2s ease, color 0.2s ease;
  padding-bottom: 1px;
}

.social-links a:hover {
  color: #111;
  border-color: #111;
}