/* —————————————————————————————
   TYPE: mono look like your reference
   (keep Inter as fallback if you want)
   ————————————————————————————— */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;600;700&display=swap');
/* If you want to keep Inter around as a fallback or for future use */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

/* —————————————————————————————
   THEME TOKENS
   ————————————————————————————— */
:root{
  --bg:#ffffff;          /* legacy variable (cards/buttons) */
  --ink:#222222;         /* primary text */
  --muted:#6b7280;       /* secondary text */
  --brand:#5f8d5d;       /* accent */
  --line:#e5e7eb;        /* subtle borders */
  --card:#fafafa;        /* panel background */
  --radius:16px;         /* rounded corners */
  --shadow:0 6px 24px rgba(0,0,0,.08);
  --accent: #5f8d5d; /* your green; match the headshot outline */

  /* Grid background controls */
  --grid-cell: 56px;          /* size of each square */
  --grid-line: 1px;           /* thin line thickness */
  --grid-color: 0 0 0 / 10%;  /* line color (R G B / alpha) */
  --page-bg: #F5F1E6;         /* warm paper-like background */

  /* Typography */
  --heading-weight: 700;
  --body-weight: 400;
}

*{box-sizing:border-box}

/* Put the paper color on the viewport and keep body transparent */
html,body{height:100%; background: var(--page-bg);}
body {
  margin: 0;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: transparent; /* ensures the grid shows through */
  font-weight: var(--body-weight);
}

/* —————————————————————————————
   CROSS-SECTION GRID BACKGROUND
   ————————————————————————————— */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;                 /* stays behind all content */
  pointer-events: none;
  background:
    /* vertical lines */
    repeating-linear-gradient(
      to right,
      transparent 0 calc(var(--grid-cell) - var(--grid-line)),
      rgb(var(--grid-color)) calc(var(--grid-cell) - var(--grid-line)) var(--grid-cell)
    ),
    /* horizontal lines */
    repeating-linear-gradient(
      to bottom,
      transparent 0 calc(var(--grid-cell) - var(--grid-line)),
      rgb(var(--grid-color)) calc(var(--grid-cell) - var(--grid-line)) var(--grid-cell)
    );
}

/* Optional: a thicker outline frame like the reference */
body::after{
  content: "";
  position: fixed;
  inset: 32px;                 /* frame margin */
  border: 2px solid rgb(var(--grid-color));
  z-index: -1;
  pointer-events: none;
}

/* Sections that should sit above the grid with a light “paper” slab */
.card, .panel, .content-slab{
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(2px);
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,.08);
}

/* —————————————————————————————
   TYPOGRAPHY TWEAKS FOR THE LOOK
   ————————————————————————————— */
h1,h2,h3{line-height:1.25; font-weight: var(--heading-weight); letter-spacing:.2px}
h1{font-size:28px; margin:0 0 12px}
h2{font-size:20px; margin:24px 0 8px}
h3{font-size:18px; margin:18px 0 8px}
.lead{color:var(--muted)}

/* Small section label that echoes the grid vibe */
.eyebrow{
  display:inline-block;
  padding:.25rem .5rem;
  border:1px solid var(--line);
  border-radius: 6px;
  text-transform: uppercase;
  font-size: .75rem;
  letter-spacing: .06em;
  color: var(--muted);
}

/* Links */
a{color:inherit; text-decoration:none}

/* Container */
.wrap{max-width:1200px; margin-inline:auto; padding:24px}

/* —————————————————————————————
   HEADER / HERO
   ————————————————————————————— */
header.hero{
  display:grid; grid-template-columns: 1fr auto; gap:24px; align-items:center;
  padding:40px 24px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
}
.hero-ident {display:grid;grid-template-columns: 180px 1fr;gap:32px;align-items:center;}
.avatar {width:150px;height:150px;border-radius:16px;object-fit:cover;border:4px solid var(--brand);}
.name{font-size:32px; font-weight:800; letter-spacing:.5px}
.tagline{color:var(--muted); margin-top:4px}
.contact-row {display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;font-size:14px;color:var(--muted);}
.contact-row a {padding:4px 8px; border:1px solid var(--line); border-radius:8px; background:#fff; transition:all 0.2s ease;}
.contact-row a:hover {background:var(--brand); color:#fff; border-color:var(--brand);}
.contact-row a {min-width:80px;text-align:center;}

.cta-col{display:grid; gap:12px; justify-items:end}
.btn{display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:12px; border:1px solid var(--line); background:#fff; box-shadow:var(--shadow); font-weight:600}
.btn.brand{background:var(--brand); color:#fff; border-color:transparent}

/* —————————————————————————————
   LAYOUT
   ————————————————————————————— */
.grid{
  margin-top:24px; display:grid; grid-template-columns: 260px 1fr; gap:24px;
}

/* —————————————————————————————
   SIDEBAR / TREE
   ————————————————————————————— */

/* Lay out title + inline actions on one row */
.side-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

nav.sidebar{
  position:sticky; top:24px; align-self:start;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:12px;
}

.side-title{
  font-weight:800; font-size:12px; letter-spacing:.12em;
  color:var(--muted);
  padding:6px 8px 10px;
  display:flex; align-items:center; justify-content:space-between;
}

/* Inline toolbar that JS inserts next to "DIRECTORY" */
/* Inline toolbar next to "DIRECTORY" */
.side-actions{
  display:inline-flex;
  gap:4px;
}

.side-actions button,
#expand-all,
#collapse-all{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.7rem;              /* smaller text */
  padding:2px 6px;               /* less padding */
  border:1px solid var(--line);
  background:var(--card);
  color:var(--muted);            /* lighter text to look secondary */
  border-radius:6px;
  cursor:pointer;
  transition:all 0.15s ease-in-out;
}

.side-actions button:hover,
#expand-all:hover,
#collapse-all:hover{
  background:var(--brand);
  color:#fff;
  border-color:var(--brand);
}

.side-actions button:active,
#expand-all:active,
#collapse-all:active{
  transform:translateY(1px);
  opacity:.9;
}

.tree{ list-style:none; padding:6px; margin:0; }

/* each row */
.node > a{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:8px; font-size:15px;
}
.node > a:hover{ background:#fff; }
.node.active > a{
  background:#fff; border:1px solid var(--line);
}

/* icon + caret */
.icon{ width:16px; text-align:center; opacity:.8; }
.label{ flex:1; }
.caret{
  width:14px; flex:0 0 14px; text-align:center;
  color:var(--muted);
}

/* child list with indent guide */
.children{
  list-style:none; margin:2px 0 8px 16px; padding:2px 0 2px 12px;
  border-left:1px dashed var(--line);
  display:none;
}
.node.open > .children{ display:block; }

/* nested rows slightly smaller */
.children .node > a{ font-size:14px; padding:6px 8px; }

/* —————————————————————————————
   CONTENT PANEL
   ————————————————————————————— */
main#page{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:24px; min-height:600px;
}

/* Reusable UI */
.pill{display:inline-block; padding:6px 10px; border-radius:999px; background:#fff; border:1px solid var(--line); margin:4px 6px 0 0}
.grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
.thumb{aspect-ratio:4/3; width:100%; background:#fff; border:1px dashed var(--line); border-radius:12px; display:grid; place-items:center; color:var(--muted)}
.kv{display:grid; grid-template-columns:160px 1fr; gap:8px; padding:8px 0; border-bottom:1px dashed var(--line)}
.kv strong{color:#374151}
.note{color:var(--muted); font-size:14px}

footer{margin:40px 0 12px; color:var(--muted); text-align:center}

/* —————————————————————————————
   DARK MODE (optional, auto)
   ————————————————————————————— 
@media (prefers-color-scheme: dark){
  :root{
    --page-bg: #0E0E0E;
    --ink:#EEEEEE;
    --muted:#a3a3a3;
    --line:#2a2a2a;
    --card:#151515;
    --grid-color: 255 255 255 / 10%;
  }
  .card,.panel,.content-slab{ background: rgba(20,20,20,0.7); }
  .btn{ background:#111; }
  .contact-row a{ background:#111; }
}

*/

/* —————————————————————————————
   RESPONSIVE
   ————————————————————————————— */
@media (max-width: 960px){
  .grid{grid-template-columns:1fr}
  .cta-col{justify-items:start}
  nav.sidebar{position:static}
}


/* ==== UNDER-CONSTRUCTION (theme-matching, stronger blur) ==== */
#page{ position: relative; } /* keep anchor container positioning */

.uc-overlay{
  position: absolute;
  left: 0; right: 0;
  /* top is set in JS to start below the title */
  bottom: 0;
  /* Slightly darker tint + stronger blur so text behind is unreadable */
  background: rgba(0, 0, 0, 0.35); /* was paper tint; now neutral overlay */
  backdrop-filter: blur(6px) saturate(105%);
  -webkit-backdrop-filter: blur(6px) saturate(105%);
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  z-index: 20;
  padding: 24px;
  outline: 1px solid rgba(0,0,0,.08);
}

/* Message card matches your cards, but with real contrast */
.uc-card{
  text-align: center;
  max-width: 42rem;
  padding: 18px 22px;
  border-radius: 12px;
  background: rgba(255,255,255,0.95);   /* high contrast */
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  color: #111;                           /* readable text */
  font-weight: 600;
  letter-spacing: .2px;
}

.uc-icon{ font-size: 34px; line-height: 1; margin-bottom: 6px; }
.uc-msg{ font-size: 0.98rem; }

/* optional: a gentle fade at the top edge where the overlay starts */
.uc-overlay::before{
  content:"";
  position:absolute; left:0; right:0; top:-24px; height:24px;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.12) 100%);
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
  pointer-events:none;
}

/* Dark mode tweaks to stay consistent with your theme */
@media (prefers-color-scheme: dark){
  .uc-overlay{
    background: rgba(0,0,0,0.55);
    outline-color: rgba(255,255,255,.08);
  }
  .uc-card{
    background: rgba(30,30,30,0.92);
    color: #eee;
    border-color: #2a2a2a;
  }
  .uc-overlay::before{
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.08) 100%);
  }
}


.summary-container {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  margin-top: 1.5rem;
}

.summary-text {
  flex: 2;
}

.summary-image img {
  max-width: 300px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Optional — make it responsive for mobile */
@media (max-width: 768px) {
  .summary-container {
    flex-direction: column;
    align-items: center;
  }
  .summary-image img {
    max-width: 80%;
  }
}


.summary-float-img {
  float: right;
  width: 280px;         /* adjust as needed */
  margin: 0 0 1rem 1.5rem;  /* space between text and image */
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

@media (max-width: 768px) {
  .summary-float-img {
    float: none;
    display: block;
    margin: 1rem auto;
    width: 80%;
  }
}


/* Current-page accent for the #tree sidebar */
#tree .node > a {
  border-radius: 10px;
  outline-offset: 3px;
}

/* ——— Solid green "selected" style for leaf items only ——— */
#tree .node:not(.has-children) > a.is-current {
  background: var(--brand);
  color: #fff;
  border: 1px solid var(--brand);
  outline: none;
  box-shadow: none;
}

/* Make icons and carets light too */
#tree .node:not(.has-children) > a.is-current .icon,
#tree .node:not(.has-children) > a.is-current .caret {
  color: #fff;
  opacity: 1;
}

/* Hover effect for everything else (folders and files) */
#tree .node > a:hover:not(.is-current),
#tree .node > a:focus-visible:not(.is-current) {
  background: #fff;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 20%, transparent);
}

/* optional: keep folders neutral even if clicked */
#tree .node.has-children > a.is-current {
  background: transparent;
  color: inherit;
  border: none;
}