/* OU palette as CSS variables */
:root{
  --crimson:#841617;
  --dark-crimson:#4e0002;
  --black:#000000;
  --dark-gray:#323232;
  --light-gray:#f0f0f0;
  --white:#ffffff;
  --sky:#bcdceb;
  --leaf:#8ca57d;
  --stone:#beb4a5;
  --radius:8px;
  --shadow:0 1px 2px rgba(0,0,0,0.06);
}
html,body{height:100%}
body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
main{flex:1}

/* Disable transitions during initial theme set */
.no-theme-transitions *,
.no-theme-transitions,
.no-theme-transitions:before,
.no-theme-transitions:after{transition:none!important}

/* Global reset and base */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background-color:var(--white);
  color:var(--black);
  font-family:"Source Sans Pro",Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
}

/* Smooth theme transitions */
html,body,.navbar,.card,.tl-item,.search-panel,.footer,.navbar-right a,.search-btn{
  transition:background-color .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease;
}

/* Links */
a{
  color:var(--black);
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .12s ease,border-color .12s ease,background-color .12s ease,font-weight .12s ease;
}
a:hover,a:focus{color:var(--crimson);border-bottom-color:var(--crimson);font-weight:700;outline:none}
a:focus-visible{outline:2px solid var(--sky);outline-offset:2px}

/* Headings */
h1,h2,h3,h4{color:var(--crimson);margin-top:0}

/* Page container */
.container{max-width:1000px;margin:4rem auto 2.5rem;padding:0 2rem}

/* Navbar */
.navbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background-color:var(--white);
  border-bottom:3px solid var(--crimson);
  padding:.75rem 2rem 1rem;
}
.navbar-left{display:flex;align-items:center;gap:.5rem}
.navbar-left img{height:40px;width:auto;margin-right:.5rem}
.navbar-left span{font-size:1.2rem;font-weight:700;letter-spacing:.2px;color:var(--crimson)}
.navbar-right{display:flex;align-items:center;gap:1rem}
.navbar-right a{font-weight:600;color:var(--black)}
.navbar-right a:hover,.navbar-right a:focus{color:var(--crimson);font-weight:700}
.navbar-right a.active{color:var(--crimson);font-weight:700;border-bottom:2px solid var(--crimson)}

/* Theme toggle in navbar */
.navbar .theme-btn{
  background:var(--crimson);
  color:var(--white);
  border:none;
  border-radius:6px;
  width:30px;
  height:30px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 30px;
  cursor:pointer;
}
.navbar .theme-btn:hover{background:var(--dark-crimson)}
.navbar .theme-btn svg{width:22px!important;height:22px!important;fill:#fff!important;stroke:#fff!important;display:block}
.navbar .theme-btn .icon-sun{display:none!important}
html[data-theme="dark"] .navbar .theme-btn .icon-moon{display:none!important}
html[data-theme="dark"] .navbar .theme-btn .icon-sun{display:block!important}

/* Home layout container */
.home-layout{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:2rem;
  max-width:1500px;
  margin:0 auto;
  padding:4rem 1rem;
  align-items:start;
}

/* Photo */
.home-photo{display:flex;justify-content:center}
.home-photo img{
  width:300px;
  max-width:100%;
  height:auto;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  object-fit:cover;
  flex-shrink:0;
}

/* About column */
.home-about{min-width:0}

/* Title stays on one line */
.home-about h1{
  margin:0 0 .5rem 0;
  white-space:nowrap;
  overflow:visible;
  text-overflow:clip;
  font-size:clamp(.95rem,5.2vw,2.6rem);
  line-height:1.15;
}

/* Section headers on inner pages */
.page-title{margin:0 0 1rem;padding-bottom:.25rem;border-bottom:1px solid var(--light-gray)}

/* Cards */
.card{
  padding:1rem 1.25rem;
  background:var(--white);
  border:1px solid var(--light-gray);
  border-left:4px solid var(--crimson);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* Grids */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}

/* Lists inside cards */
.card ul{margin:.5rem 0 0 1rem}
.card li{margin-bottom:.4rem}

/* Footer (legacy) */
.footer{
  margin-top:3rem;
  padding:1.5rem 2rem;
  background-color:var(--dark-gray);
  color:var(--white);
  text-align:center;
  font-size:.95rem;
}

/* Badges */
.accent-line{border-top:2px solid var(--dark-crimson)}
.badge-sky{background:var(--sky);color:var(--black);padding:.15rem .4rem;border-radius:999px}
.badge-leaf{background:var(--leaf);color:var(--white);padding:.15rem .4rem;border-radius:999px}
.badge-stone{background:var(--stone);color:var(--black);padding:.15rem .4rem;border-radius:999px}

/* Forms */
input[type="text"],input[type="email"],textarea{
  width:100%;
  padding:.6rem .7rem;
  border:1px solid var(--light-gray);
  border-radius:var(--radius);
  font:inherit;
}
button{
  padding:.6rem 1rem;
  border:1px solid var(--crimson);
  background:var(--crimson);
  color:var(--white);
  border-radius:var(--radius);
  font-weight:600;
  cursor:pointer;
  transition:background-color .12s ease,border-color .12s ease;
}
button:hover,button:focus{background:var(--dark-crimson);border-color:var(--dark-crimson)}

/* Search modal */
.search-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.5);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
}
.search-modal.open{display:flex}
.search-panel{
  background:var(--white);
  border:1px solid var(--light-gray);
  border-left:4px solid var(--crimson);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  width:min(600px,92vw);
  padding:1rem 1.25rem;
}
.search-panel h2{margin:0 0 .75rem;color:var(--crimson);font-size:1.25rem}
.search-row{display:flex;gap:.5rem}
.search-row input[type="search"]{flex:1;padding:.6rem .7rem;border:1px solid var(--light-gray);border-radius:var(--radius);font:inherit}
.search-row button[type="submit"]{padding:.6rem 1rem}
.search-close{background:transparent;border:0;font-size:1rem;margin-left:.5rem;cursor:pointer;color:var(--black)}

/* Search button */
.search-btn{
  background-color:var(--crimson);
  border:none;
  border-radius:50%;
  width:30px;
  height:30px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.search-btn svg{width:22px;height:22px;stroke:var(--white);flex-shrink:0}
.search-btn:hover{background-color:var(--dark-crimson)}

/* Vertical timeline (legacy simple) */
.timeline{position:relative;margin:0 0 2rem;padding-left:1.75rem}
.timeline::before{content:"";position:absolute;top:0;bottom:0;left:.65rem;width:2px;background:var(--light-gray)}
.tl-item{
  position:relative;
  margin-bottom:1.25rem;
  padding:1rem 1.25rem;
  background:var(--white);
  border:1px solid var(--light-gray);
  border-left:4px solid var(--crimson);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.tl-item h3{margin:.25rem 0 .25rem;color:var(--crimson)}
.tl-item .tl-date{font-weight:700;color:var(--black)}
.tl-item .tl-dot{position:absolute;left:-1.05rem;top:1rem;width:14px;height:14px;background:var(--crimson);border:2px solid var(--white);border-radius:50%;box-shadow:0 0 0 2px var(--crimson)}

/* Mobile nav toggle */
.nav-toggle{
  display:none;
  background:var(--crimson);
  color:var(--white);
  border:none;
  border-radius:8px;
  width:44px;
  height:44px;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  padding:0;
}
.nav-toggle svg{width:28px;height:28px;stroke:#fff;fill:none;stroke-width:2.5;display:block}

/* Mobile layout */
@media (max-width:720px){
  .navbar{position:relative;padding:.5rem 1rem}
  .nav-toggle{display:flex;margin-left:.75rem}
  .navbar-left img{height:36px}
  .navbar-left span{font-size:clamp(1rem,3.5vw,1.2rem);white-space:nowrap;max-width:60vw;overflow:hidden;text-overflow:ellipsis}
  .navbar-right{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    display:none;
    flex-direction:column;
    gap:0;
    background:var(--white);
    border-bottom:2px solid var(--light-gray);
    padding:.5rem 1rem .75rem;
    z-index:50;
    box-sizing:border-box;
    max-width:100%;
  }
  .navbar-right.open{display:flex}
  .navbar-right a{padding:.5rem 0;margin:0}
  .search-btn{align-self:flex-start;margin-top:.25rem}
  .container{margin:3rem auto 2rem;padding:0 1rem}
  html,body{overflow-x:hidden}
  .home-layout{width:100%}
  .home-about,.home-photo{max-width:100%}
  .home-about h1{font-size:clamp(.9rem,5.5vw,2.2rem);white-space:nowrap}
}

/* Content responsiveness */
@media (max-width:800px){
  .home-layout{grid-template-columns:1fr;justify-items:center;text-align:center}
}

/* Dark mode */
html[data-theme="dark"]{
  --white:#2b2f36;
  --black:#ffffff;
  --light-gray:#444444;
  --dark-gray:#1f1f1f;
  --crimson:#a81b1f;
  --dark-crimson:#6a0a0c;
}
html[data-theme="dark"] body{background:var(--white);color:var(--black)}
html[data-theme="dark"] .navbar{background:var(--white);border-bottom-color:var(--crimson)}
html[data-theme="dark"] .card,
html[data-theme="dark"] .tl-item,
html[data-theme="dark"] .search-panel{background:var(--white);border-color:var(--light-gray)}
html[data-theme="dark"] a{color:var(--black)}
html[data-theme="dark"] .footer{background:var(--dark-gray)}

/* Smaller phones */
@media (max-width:420px){
  .container{padding:0}
  .home-about h1{
    white-space:nowrap;
    overflow:visible;
    text-overflow:clip;
    font-size:clamp(.8rem,4.6vw,2.2rem);
    line-height:1.15;
    letter-spacing:normal;
  }
}

/* Slightly larger phones */
@media (min-width:421px) and (max-width:720px){
  .container{padding:0}
  .home-about h1{font-size:clamp(.8rem,4.6vw,2.2rem)}
}

/* CV buttons */
.cv_button_wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.4rem;
  margin-top:.5rem;
}
.btn_cv,.btn_resume{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:0 .9rem;
  border-radius:10px;
  background:var(--crimson);
  color:#fff;
  text-decoration:none;
  font-weight:600;
  box-shadow:0 1px 2px rgba(0,0,0,.12);
  transition:transform .06s ease,box-shadow .12s ease,background .12s ease;
}
.btn_resume{background:var(--dark-gray)}
.btn_cv:hover,.btn_cv:focus-visible,.btn_resume:hover,.btn_resume:focus-visible{box-shadow:0 3px 10px rgba(0,0,0,.18)}
.btn_cv:active,.btn_resume:active{transform:translateY(1px)}
.cv_icon{width:1.1rem;height:1.1rem;fill:currentColor}

/* New footer */
.site-footer{padding:1rem 0;text-align:center;background:transparent}
.footer-socials{display:flex;justify-content:center;gap:.8rem}
.footer-socials a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.25rem;
  height:2.25rem;
  border-radius:12px;
  border:1px solid rgba(132,22,23,.35);
  background:var(--white);
  box-shadow:0 1px 2px rgba(0,0,0,.06);
  transition:transform .08s ease,box-shadow .12s ease,background .12s ease,border-color .12s ease;
}
.footer-socials a:hover,.footer-socials a:focus-visible{
  transform:translateY(-1px);
  box-shadow:0 3px 10px rgba(0,0,0,.15);
  border-color:var(--crimson);
  background:rgba(132,22,23,.06);
}
.icon{width:1.2rem;height:1.2rem;fill:var(--crimson)}
[data-theme="dark"] .footer-socials a{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.25)}
[data-theme="dark"] .icon{fill:#fff}
[data-theme="dark"] .footer-socials a:hover,
[data-theme="dark"] .footer-socials a:focus-visible{background:rgba(255,255,255,.12);border-color:#fff}
.last-updated{margin-top:.5rem;font-size:.8rem;color:var(--dark-gray);opacity:.7}
[data-theme="dark"] .last-updated{color:#fff;opacity:.6}

/* ============================
   Experience Timeline — center spine (edu left, work right)
   ============================ */
:root{
  --left_col:45%;
  --mid_col:10%;
  --right_col:45%;
  --gap:2rem;
  --month_unit:9px;
  --barOverlap:24px;   /* fuse between rows */
  --barWidth:15px;     /* 25% thicker than 12px */
  --auxShift:36px;     /* MST offset from center (to the left) */
  --text:#222;
  --muted:#666;
  /* role colors used per row */
  --role-ou:#323232;
  --role-gordian:#841617;
  --role-army:#841617;
  --role-univar:#841617;
  --role-uco:#323232;
  --role-mst:#323232;
  /* legend */
  --edu-color:#323232;
  --work-color:#841617;
}
[data-theme="dark"] :root{--text:#fff;--muted:rgba(255,255,255,.75);--white:rgba(255,255,255,.06)}

/* Wrapper */
.page-experience .vt-wrap{max-width:none;margin:0;padding:2rem 1.5rem 3rem}
.page-experience .vt-title,.page-experience .vt-sub{max-width:90ch;margin-left:0}

/* Legend */
.vt-legend{
  display:flex;
  align-items:center;
  gap:1rem;
  margin:.5rem 0 1rem;
  font-size:.95rem;
  color:var(--muted);
}
.vt-legend .item{display:flex;align-items:center;gap:.5rem}
.vt-legend .swatch{width:14px;height:14px;border-radius:4px;display:inline-block;box-shadow:0 0 0 1px rgba(0,0,0,.08) inset}
.vt-legend .edu .swatch{background:var(--edu-color)}
.vt-legend .work .swatch{background:var(--work-color)}

/* Grid: edu | rail | work */
.vt{
  display:grid;
  grid-template-columns:var(--left_col) var(--mid_col) var(--right_col);
  column-gap:var(--gap);
  row-gap:0;
  position:relative;
  margin-top:.25rem;
}

/* Rows */
.vt-row{
  display:grid;
  grid-template-columns:subgrid;
  grid-column:1 / -1;
  position:relative;
  padding-top:calc(var(--offset_months,0) * var(--month_unit) + var(--barOverlap));
  margin-top:calc(-1 * var(--row_shift,0) * var(--month_unit)); /* for MST placement */
}

/* Rail */
.vt-rail{
  grid-column:2;
  position:relative;
  min-height:calc(var(--months) * var(--month_unit) + var(--extra,0px));
  margin-bottom:calc(var(--barOverlap) * -1);
}
.vt-fill,.vt-projected{position:absolute;left:calc(50% - var(--barWidth)/2);width:var(--barWidth);border-radius:8px}
.vt-fill{top:0;height:calc(var(--months) * var(--month_unit) + var(--extra,0px) + var(--barOverlap));background:var(--color)}
.vt-projected{
  top:calc(var(--months) * var(--month_unit) + var(--extra,0px) + var(--barOverlap));
  height:calc(var(--months_projected,0) * var(--month_unit));
  background:repeating-linear-gradient(135deg,transparent 0 8px,transparent 8px 16px),linear-gradient(var(--color),var(--color));
  opacity:.35;
}

/* Auxiliary rail LEFT of center (MST) */
.vt-rail--aux-left .vt-fill,
.vt-rail--aux-left .vt-projected{left:calc(50% - var(--barWidth)/2 - var(--auxShift))}

/* Callouts */
.vt-callout{position:relative;margin:0;padding:0;background:transparent;border:0}
.vt-callout summary{
  cursor:pointer;
  list-style:none;
  display:block;
  position:relative;
  background:var(--white);
  color:var(--text);
  border:1.5px solid rgba(0,0,0,.22);
  box-shadow:0 1px 2px rgba(0,0,0,.06);
  border-radius:12px;
  padding:.65rem .85rem;
  font-weight:600;
}
.vt-callout summary::after{content:"▾";margin-left:.4rem;font-weight:700;opacity:.75}
.vt-callout[open] summary::after{content:"▴"}
.vt-body{
  margin-top:.5rem;
  padding:.75rem .9rem;
  background:var(--white);
  border:1.5px solid rgba(0,0,0,.18);
  border-radius:12px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.vt-dates{font-weight:400;color:var(--muted);margin-left:.5rem;font-size:.95rem}
.vt-body h4{margin:.6rem 0 .25rem;font-size:1rem}
.vt-body ul{margin:0;padding-left:1.1rem}
.vt-body li{margin:.2rem 0}

/* Callout placement + width */
.vt-row[data-cat="edu"] .vt-callout{grid-column:1;align-self:start;inline-size:85%;justify-self:end}
.vt-row[data-cat="work"] .vt-callout{grid-column:3;align-self:start;inline-size:85%;justify-self:start}

/* Connectors — JS sets --connector and --connectorTop per row */
.vt-row[data-cat="edu"] .vt-callout summary::before,
.vt-row[data-cat="work"] .vt-callout summary::before{
  content:"";
  position:absolute;
  height:2px;
  width:var(--connector,0px);
  top:var(--connectorTop,50%);
  transform:translateY(-1px);
  background:var(--color);
  pointer-events:none;
}
.vt-row[data-cat="edu"] .vt-callout summary::before{left:100%;right:auto}
.vt-row[data-cat="work"] .vt-callout summary::before{right:100%;left:auto}

/* Small screens */
@media (max-width:720px){
  :root{--left_col:42%;--mid_col:16%;--right_col:42%;--gap:1rem}
}
/* ===== Projects page palette: edit these hex codes ===== */
:root {
  --proj-accent: #cc3300;       /* day accent color for active buttons and outlines */
  --proj-text:   #222222;       /* day default text color */
  --proj-muted:  #666666;       /* day muted text color for small labels */
  --proj-border: #000000;       /* day border color for cards and buttons */
  --proj-card:   #ffffff;       /* day card background color */
  --proj-btn-bg: #fafafa;       /* day filter button background color */
  --proj-btn-tx: #222222;       /* day filter button text color */
  --proj-hover:  #e9e9e9;       /* day button hover background color */
  --proj-title:  #841617;
}

html[data-theme="dark"] {
  --proj-accent: #cc3300;       /* night accent color for active buttons and outlines */
  --proj-text:   #eaeaea;       /* night default text color */
  --proj-muted:  #b0b0b0;       /* night muted text color */
  --proj-border: #2a2a2a;       /* night border color */
  --proj-card:   #141414;       /* night card background color */
  --proj-btn-bg: #1a1a1a;       /* night filter button background color */
  --proj-btn-tx: #eaeaea;       /* night filter button text color */
  --proj-hover:  #222222;       /* night button hover background color */
  --proj-title:  #a81b1f;
}

/* ===== Projects layout and typography ===== */
.proj_hero {
  max-width: 900px;
  margin: 0 auto 1.5rem;
  padding: 0 1rem;
  text-align: center;
  color: var(--proj-text);           /* text color: edit in palette */
  font-family: inherit;              /* font: change here if you want a different font */
}
.proj_hero h1 {
  font-size: 2.2rem;                 /* text size: edit rem value */
  margin: 0 0 .25rem;
  color: var(--proj-title);           /* text color: edit in palette */
  font-family: inherit;              /* font: change here to override site font */
}
.proj_hero p {
  margin: 0;
  color: var(--proj-muted);          /* text color: edit in palette */
  font-size: 1rem;                   /* text size: edit rem value */
  font-family: inherit;              /* font: change here if desired */
}

/* ===== Filter buttons ===== */
.proj_filters {
  display: flex;
  gap: .5rem;
  justify-content: center;
  margin: 1rem 0 1.5rem;
  padding: 0 1rem;
}

.pf_btn {
  border: 1px solid var(--proj-border);   /* border color: edit in palette */
  padding: .5rem .9rem;
  border-radius: .4rem;
  background: var(--proj-btn-bg);         /* background color: edit in palette */
  color: var(--proj-btn-tx);              /* text color: edit in palette */
  cursor: pointer;
  font-family: inherit;                    /* font: change if needed */
  font-size: .95rem;                       /* text size: edit rem value */
}

.pf_btn:hover {
  background: var(--proj-hover);           /* hover background color: edit in palette */
  border-color: #841617;        /* hover border color: edit in palette */
  color: var(--proj-btn-tx);               /* hover text color: edit in palette */
}

.pf_btn.is_active {
  outline: 1px solid #000000;   /* active outline color: edit in palette */
  background: #841617;          /* active background color: edit in palette */
  color: #ffffff;                          /* active text color: edit hex here */
}

/* ===== Grid and cards ===== */
.proj_grid {
  --col: 320px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--col), 1fr));
  gap: 1rem;
  padding: 0 1rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.proj_card {
  border: 2px solid var(--proj-border);    /* card border color: edit in palette */
  border-radius: .6rem;
  padding: 1rem;
  background: var(--proj-card);            /* card background color: edit in palette */
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  display: grid;
  gap: .5rem;
  color: var(--proj-text);                 /* default text color inside cards: edit in palette */
  font-family: inherit;                    /* font: change here if you want different in cards */
}

/* ===== Card header ===== */
.proj_head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem;
}
.proj_card h2 {
  font-size: 1.1rem;                       /* text size: edit rem value */
  margin: 0;
  line-height: 1.3;
  color: var(--proj-text);                 /* text color: edit in palette */
  font-family: inherit;                    /* font: change here if desired */
}
.proj_kind {
  font-size: .85rem;                       /* text size: edit rem value */
  color: var(--proj-muted);                /* text color: edit in palette */
  font-family: inherit;                    /* font: change here if desired */
}

/* ===== Card body ===== */
.proj_one {
  margin: .25rem 0 .25rem;
  color: var(--proj-text);                 /* text color: edit in palette */
  font-size: .98rem;                       /* text size: edit rem value */
  font-family: inherit;                    /* font: change here if desired */
}
.proj_points {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: .25rem;
  color: var(--proj-text);                 /* text color: edit in palette */
  font-size: .95rem;                       /* text size: edit rem value */
  font-family: inherit;                    /* font: change here if desired */
}

/* ===== Tags ===== */
.proj_tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.proj_tags span {
  font-size: .8rem;                        /* text size: edit rem value */
  padding: .15rem .45rem;
  border: 1px solid var(--proj-border);    /* tag border color: edit in palette */
  border-radius: 999px;
  color: var(--proj-accent);               /* tag text color: edit in palette */
  background: transparent;                 /* tag background color: change if you want filled pills */
  font-family: inherit;                    /* font: change here if desired */
}

/* ===== Card footer ===== */
.proj_foot {
  margin-top: .25rem;
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}
.proj_foot a {
  color: var(--proj-accent);               /* link text color: edit in palette */
  font-size: .95rem;                       /* text size: edit rem value */
  font-family: inherit;                    /* font: change here if desired */
}
.proj_foot a:hover {
  text-decoration: underline;
}
.proj_foot a[aria-disabled="true"] {
  pointer-events: none;
  opacity: .5;
  text-decoration: none;
  color: var(--proj-muted);                /* disabled link text color: edit in palette */
}
/* ===== Projects: card system ===== */

/* Grid */
.proj_grid {
  --col: 320px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--col), 1fr));
  gap: 1rem;
  padding: 0 1rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* Card wrapper */
.proj_card {
  display: grid;
  grid-template-rows: auto 1fr auto;           /* header, body fills, footer */
  gap: .65rem;
  border: 1px solid var(--proj-border);        /* border color */
  background: var(--proj-card);                /* background color */
  border-radius: .6rem;
  padding: 1rem;
  color: var(--proj-text);                     /* text color */
  text-decoration: none;                       /* lets the whole card be a link if you want */
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  min-height: 260px;                           /* keeps rows tidy */
}
.proj_card:focus,
.proj_card:hover {
  border-color: var(--proj-accent);            /* hover border */
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  outline: 0;
  transform: translateY(-1px);
}

/* Thumbnail (optional) */
.proj_thumb {
  width: 100%;
  aspect-ratio: 16 / 9;                        /* keeps consistent height */
  border-radius: .45rem;
  overflow: hidden;
  background: var(--proj-hover);               /* thumb placeholder color */
  border: 1px solid var(--proj-border);        /* thumb border */
}
.proj_thumb img {
  width: 100%;
  height: auto;
  object-fit: contain;                            /* cover or contain */
  display: block;
}

/* Header line */
.proj_head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
}
.proj_title {
  font-size: 1.1rem;                            /* title size */
  font-family: inherit;                         /* title font */
  color: var(--proj-text);                      /* title color */
  margin: 0;
}
.proj_kind {
  font-size: .85rem;                            /* label size */
  color: var(--proj-muted);                     /* label color */
}

/* Body */
.proj_one {
  margin: .1rem 0 .35rem;
  font-size: .98rem;                            /* paragraph size */
  color: var(--proj-text);                      /* paragraph color */
}
.proj_points {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: .25rem;
  font-size: .95rem;                            /* bullet size */
  color: var(--proj-text);                      /* bullet color */
}

/* Tags */
.proj_tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.proj_tag {
  font-size: .8rem;                             /* tag text size */
  padding: .15rem .45rem;
  border-radius: 999px;
  border: 1px solid var(--proj-border);         /* tag border */
  background: transparent;                      /* tag background */
  color: var(--proj-accent);                    /* tag text color */
}

/* Footer */
.proj_foot {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: .1rem;
}
.proj_link {
  font-size: .95rem;                            /* link size */
  color: var(--proj-accent);                    /* link color */
  text-decoration: none;
  border-bottom: 1px solid transparent;         /* subtle active affordance */
}
.proj_link:hover,
.proj_link:focus {
  border-bottom-color: var(--proj-accent);
}

/* Compact variant */
.proj_card.compact {
  grid-template-rows: auto auto auto;
  min-height: 0;
}
.proj_card.compact .proj_points { display: none; }

/* Filled tag variant (optional) */
.proj_tag.filled {
  background: color-mix(in srgb, var(--proj-accent) 12%, transparent);
  color: var(--proj-accent);
  border-color: var(--proj-accent);
}

/* Media tweaks */
@media (max-width: 480px) {
  .proj_title { font-size: 1.02rem; }          /* tighter on small screens */
}