@font-face{
  font-family:"W95";
  src:url("assets/fonts/w95.woff2") format("woff2");
  font-weight:normal;
  font-style:normal;
  font-display:swap;
}

:root{
  --desk:#008080;
  --gray:#c0c0c0;
  --light:#ffffff;
  --dark:#808080;
  --darker:#404040;
  --blue:#000080;
  --shadow:#000000;
  --paper:#fffdf8;
  --font:"W95","MS Sans Serif",Tahoma,"Segoe UI",system-ui,sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:#000;

  /* wallpaper */
  background: url("assets/images/wallpaper.jpg") center/cover no-repeat fixed;

  /* keeps icons readable if wallpaper is busy */
  overflow:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  background: rgba(0,0,0,0.15); /* darken a bit */
  pointer-events:none;
}

.desktop{
  position:relative;
  height:calc(100vh - 40px);
  padding:14px;
}

/* Desktop icons */
.desk-icon{
  width:92px;
  background:transparent;
  border:none;
  cursor:default;
  padding:8px 6px;
  text-align:center;
  color:#fff;
  border-radius:4px;
  user-select:none;
  display:block;
  margin-bottom:6px;
  text-decoration:none;
}
.desk-icon:focus{ outline:2px dotted #fff; outline-offset:2px; }
.desk-icon.selected{
  background: rgba(0,0,128,35);
  outline: 1px dotted #fff;
}
.desk-icon-img{
  width:32px;
  height:32px;
  display:block;
  margin:0 auto 6px;
  image-rendering: pixelated;
  filter: drop-shadow(1px 1px 0 rgba(0,0,0,45));
}
.desk-icon-label{
  font-size:12px;
  text-shadow:1px 1px 0 rgba(0,0,0,55);
  word-break:break-word;
}

/* Window */
.win{
  position:absolute;
  display:none;
  background:var(--gray);
  border:2px solid var(--gray);
  border-top-color:var(--light);
  border-left-color:var(--light);
  border-right-color:var(--darker);
  border-bottom-color:var(--darker);
  box-shadow: 2px 2px 0 var(--shadow);
  resize: both;
  overflow: hidden;
  min-width: 280px;
  min-height: 180px;
}
.win.open{display:block}
.win.minimized{display:none}
.win.active{
  outline: 1px dotted rgba(255,255,255,85);
  outline-offset: -4px;
}

/* Titlebar */
.win-titlebar{
  background:var(--blue);
  color:#fff;
  padding:4px 6px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  user-select:none;
  cursor:grab;
}
.win-title-left{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:700;
}
.win-controls{ display:flex; gap:4px; }
.win-btn{
  width:18px;
  height:18px;
  padding:0;
  font-family:var(--font);
  font-size:12px;
  cursor:pointer;
  background:var(--gray);
  border:2px solid var(--gray);
  border-top-color:var(--light);
  border-left-color:var(--light);
  border-right-color:var(--darker);
  border-bottom-color:var(--darker);
}
.win-btn:active{
  border-top-color:var(--darker);
  border-left-color:var(--darker);
  border-right-color:var(--light);
  border-bottom-color:var(--light);
}

/* body scroll within windows */
.win-body{
  padding:10px;
  height: calc(100% - 26px);
  overflow:auto;
}

.ui-btn{
  font-family:var(--font);
  font-size:13px;
  padding:4px 10px;
  cursor:pointer;
  background:var(--gray);
  border:2px solid var(--gray);
  border-top-color:var(--light);
  border-left-color:var(--light);
  border-right-color:var(--darker);
  border-bottom-color:var(--darker);
  text-decoration:none;
  color:#000;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:26px;
}
.ui-btn:active{
  border-top-color:var(--darker);
  border-left-color:var(--darker);
  border-right-color:var(--light);
  border-bottom-color:var(--light);
}
.ui-btn.primary{ font-weight:800; }

a{ color:inherit; }

/* Menubar */
.menu-bar{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px;
  background:var(--gray);
  border:2px solid var(--gray);
  border-top-color:var(--light);
  border-left-color:var(--light);
  border-right-color:var(--darker);
  border-bottom-color:var(--darker);
  margin-bottom:8px;
}
.menu-sep{ width:1px; height:18px; background:var(--dark); margin:0 6px; }
.menu-hint{ font-size:12px; opacity:.85; }

.panel{
  background:#fff;
  border:2px solid var(--gray);
  border-top-color:var(--dark);
  border-left-color:var(--dark);
  border-right-color:var(--light);
  border-bottom-color:var(--light);
}
.pad{ padding:12px; }
.muted{ opacity:.85; }

.panel-head{
  font-size:12px;
  padding:8px 10px;
  border-bottom:1px solid #ddd;
  background:#fafafa;
}

.h2{ margin:0 0 6px; font-size:18px; }
.h2.big{ font-size:22px; }

.list{ padding:8px; }
.li-left{ display:flex; align-items:center; gap:10px; }
.li-title{ font-weight:800; }
.li-sub{ font-size:12px; opacity:.85; }

/* Statusbar */
.statusbar{
  margin-top:10px;
  padding:6px 8px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:var(--gray);
  border:2px solid var(--gray);
  border-top-color:var(--dark);
  border-left-color:var(--dark);
  border-right-color:var(--light);
  border-bottom-color:var(--light);
  font-size:12px;
}
.status-right{ opacity:.85; }

/* Notes */
.notes{ background: var(--paper); }
.notes-banner{
  font-weight:900;
  text-align:center;
  padding:6px 8px;
  background:#fff;
}

.note-wip{
  font-size:13px;
  line-height:1.45;
  padding:8px;
  background:#fffbe6;
  border:1px solid #c5b97c;
}

.notes-grid{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.notes-chip{
  font-family:var(--font);
  font-size:13px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;

  background:#fff;
  border:1px dotted #7f7f7f;
  padding:6px 10px;
  height:32px;
  text-decoration:none;
  color:#000;
}
.notes-chip:hover{ background:#f2f2ff; border-color:#000; }
.notes-chip:active{ background:#e6e6ff; }

.chip-meta{ margin-left:8px; font-size:12px; opacity:.75; }

/* Projects */
.proj-item{
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  gap:10px;
  padding:10px 8px;
  border:1px dotted transparent;
}
.proj-item:hover{
  background:#e8e8ff;
  border-color:#000;
}
.proj-main{
  flex:1;
  text-decoration:none;
  display:flex;
  align-items:center;
  min-width:0;
}
.proj-main-static{
  cursor:default;
}
.proj-actions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-shrink:0;
}

/* About hero */
.kicker{
  font-size:12px;
  letter-spacing:.5px;
  opacity:.75;
  text-transform:lowercase;
  margin-bottom:4px;
}
.avatar-wrap{
  width:140px;
  height:140px;
  border-radius:999px;
  border:2px solid #000;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 2px 2px 0 rgba(0,0,0,.6);
  flex:0 0 auto;
  overflow:hidden;
}
.avatar{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
/* About page polish */
.about-page p{ line-height:1.55; }
.about-page .muted{ opacity:.88; }
.about-card{
  margin-top:12px;
  padding:10px 10px 12px;
  background:#fafafa;
  border:2px solid var(--gray);
  border-top-color:var(--dark);
  border-left-color:var(--dark);
  border-right-color:var(--light);
  border-bottom-color:var(--light);
}
.about-card .group-title{
  margin-top:0;
  border-bottom:1px solid #d6d6d6;
}
/* About: "system info" layout (formatting only) */
.about-shell{
  display:grid;
  grid-template-columns: 240px 1fr;
  gap:14px;
  align-items:start;
}
.about-side{ min-width:0; }
.about-main{ min-width:0; }

.dotframe{
  background:#fff;
  border:1px dotted #7f7f7f;
  padding:10px;
}

.about-id .avatar-wrap{
  width:140px;
  height:140px;
  margin:0 auto 10px;
}

.scan-rule{
  height:8px;
  margin:8px 0 10px;
  background:
    repeating-linear-gradient(
      to right,
      #000 0px, #000 2px,
      transparent 2px, transparent 6px
    );
  opacity:.28;
}
.about-card-dot{
  background:#fff;
  border:1px dotted #7f7f7f;
}

/* ASCII-ish section headers without changing content */
.group-title.ascii{
  position:relative;
  padding:6px 8px;
  background:#fafafa;
  border-bottom:1px solid #ddd;
  margin:-10px -10px 10px; /* snug like a titlebar */
  font-weight:900;
}
.group-title.ascii::before{
  content:"══ ";
  opacity:.6;
}
.group-title.ascii::after{
  content:" ═════════════════════";
  opacity:.35;
  white-space:nowrap;
}

/* Make spacing feel intentional */
.about-main .about-card{ margin-top:12px; }
.about-main .about-card:first-child{ margin-top:0; }

/* Responsive: stack panes on smaller screens */
@media (max-width:720px){
  .about-shell{ grid-template-columns:1fr; }
  .about-id .avatar-wrap{ margin:0 0 10px; }
}

/* Statusbar feels "alive" when window is focused */
.win:not(.active) .statusbar{ opacity:.82; }
.win.active .statusbar{ opacity:1; font-weight:800; }

/* Skills window */
.skills-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.skills-group{
  background:#fff;
  border:2px solid var(--gray);
  border-top-color:var(--dark);
  border-left-color:var(--dark);
  border-right-color:var(--light);
  border-bottom-color:var(--light);
  padding:10px;
  min-width:0;
}
.skills-head{
  font-weight:900;
  margin:-10px -10px 8px;
  padding:6px 8px;
  background:#fafafa;
  border-bottom:1px solid #ddd;
}
.skills-note{
  font-size:12px;
  line-height:1.45;
  background:#fffbe6;
  border:1px dotted #7f7f7f;
  padding:8px;
}
.pill-grid{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.pill{
  display:inline-flex;
  align-items:center;
  padding:3px 8px;
  background:#fff;
  border:2px solid var(--gray);
  border-top-color:var(--light);
  border-left-color:var(--light);
  border-right-color:var(--dark);
  border-bottom-color:var(--dark);
  font-size:12px;
  line-height:1;
  white-space:nowrap;
}
.group-title{
  font-weight:900;
  margin-bottom:6px;
  padding-bottom:4px;
  border-bottom:1px solid #ddd;
}
.row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.bullets{ margin:6px 0 0 18px; padding:0; }
.bullets li{ margin:4px 0; }

/* Timeline */
.timeline{ display:flex; flex-direction:column; gap:12px; margin-top:10px; }
.t-item{
  display:grid;
  grid-template-columns: 110px 1fr;
  gap:10px;
  padding:10px;
  background:#fff;
  border:1px solid #ddd;
}
.t-when{ font-weight:900; opacity:.9; }
.t-title{ font-weight:900; }
.t-sub{ font-size:12px; opacity:.85; margin-top:2px; }

/* Experience page: dotted vibe */
#win-experience .t-item{ border:1px dotted #7f7f7f; }
#win-experience .t-item:hover{
  background:#fff;
  outline:1px dotted #000;
  outline-offset:-3px;
}
/* Taskbar */
.taskbar{
  position:fixed;
  left:0; right:0; bottom:0;
  height:40px;
  background:var(--gray);
  border-top:2px solid var(--light);
  box-shadow: 0 -1px 0 var(--dark);
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px;
  z-index:8000;
}
.start{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:800;
  height:28px;
  padding:2px 10px;
  cursor:pointer;
  background:var(--gray);
  border:2px solid var(--gray);
  border-top-color:var(--light);
  border-left-color:var(--light);
  border-right-color:var(--darker);
  border-bottom-color:var(--darker);
}
.start:active{
  border-top-color:var(--darker);
  border-left-color:var(--darker);
  border-right-color:var(--light);
  border-bottom-color:var(--light);
}
.tasks{
  flex:1;
  display:flex;
  gap:6px;
  overflow:auto hidden;
  padding-bottom:2px;
}
.task{
  height:28px;
  min-width:130px;
  max-width:260px;
  padding:2px 10px;
  cursor:pointer;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  background:var(--gray);
  border:2px solid var(--gray);
  border-top-color:var(--light);
  border-left-color:var(--light);
  border-right-color:var(--darker);
  border-bottom-color:var(--darker);
  display:flex;
  align-items:center;
  gap:6px;
}
.task.active{
  border-top-color:var(--darker);
  border-left-color:var(--darker);
  border-right-color:var(--light);
  border-bottom-color:var(--light);
  font-weight:800;
}
.tray{
  height:28px;
  display:flex;
  align-items:center;
  padding:2px 8px;
  border:2px solid var(--gray);
  border-top-color:var(--dark);
  border-left-color:var(--dark);
  border-right-color:var(--light);
  border-bottom-color:var(--light);
}
.clock{ font-size:12px; }

/* Start menu */
.start-menu{
  position:fixed;
  left:6px;
  bottom:40px;
  width:260px;
  display:flex;
  background:var(--gray);
  border:2px solid var(--gray);
  border-top-color:var(--light);
  border-left-color:var(--light);
  border-right-color:var(--darker);
  border-bottom-color:var(--darker);
  box-shadow: 2px 2px 0 var(--shadow);
  z-index:9999;
}
.start-menu[hidden]{ display:none !important; }
.start-menu-side{
  width:34px;
  background:var(--blue);
  color:#fff;
  writing-mode:vertical-rl;
  transform: rotate(180deg);
  padding:10px 6px;
  font-weight:900;
  letter-spacing:.5px;
}
.start-menu-main{ flex:1; padding:6px; }
.menu-item{
  width:100%;
  text-align:left;
  padding:8px 10px;
  cursor:pointer;
  background:transparent;
  border:none;
  font-family:var(--font);
  font-size:13px;
  color:#000;
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:8px;
}
.menu-item:hover{ background:#000080; color:white; }
.menu-item:active{ background:#000060; }
.menu-item-btn{ background:transparent; border:none; }

/* Icons */
.menu-icon, .win-title-icn-img{
  width:20px;
  height:20px;
  flex-shrink:0;
  image-rendering: pixelated;
}
.li-icn-img{
  width:25px;
  height:25px;
  flex-shrink:0;
  image-rendering: pixelated;
}
.chip-icn{
  width:18px;
  height:18px;
  margin-right:6px;
  flex-shrink:0;
  image-rendering: pixelated;
}
.task-icn{
  width:16px;
  height:16px;
  flex-shrink:0;
  image-rendering: pixelated;
}
.task-text{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Auto-size windows (Notes + Contact) */
.win.win-auto { height:auto !important; resize:none; }
.win.win-auto .win-body { height:auto !important; overflow:visible; }

/* Resume viewer */
.resume-body .panel{
  height:100%;
  display:flex;
  flex-direction:column;
}
.resume-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-bottom:10px;
  border-bottom:1px solid #ddd;
  margin-bottom:10px;
}
.resume-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.resume-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.resume-viewer-wrap{
  flex:1;
  border:2px solid var(--gray);
  border-top-color:var(--dark);
  border-left-color:var(--dark);
  border-right-color:var(--light);
  border-bottom-color:var(--light);
  background:#fff;
  overflow:hidden;
}
.resume-frame{
  width:100%;
  height:100%;
  border:0;
  display:block;
}

/* Popup should scroll inside */
.win.popup{
  resize:both;
  z-index:9100;
}
.popup-body{
  overflow:auto;
}
.popup-text{
  white-space:pre-line;
  margin-top:0;
}

/* Contact prettiness */
.contact-hero{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  padding-bottom:10px;
  border-bottom:1px solid #ddd;
  margin-bottom:10px;
}
.contact-badge{
  width:46px;
  height:46px;
  border:2px solid #000;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:2px 2px 0 rgba(0,0,0,.6);
}
.contact-badge img{ width:24px; height:24px; image-rendering:pixelated; }
.contact-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
.contact-card{
  text-decoration:none;
  color:#000;
  background:#fff;
  border:1px solid #ddd;
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.contact-card:hover{ background:#f2f2ff; border-color:#000; }
.cc-top{ display:flex; align-items:center; gap:10px; }
.cc-icn{ width:22px; height:22px; image-rendering:pixelated; }
.cc-title{ font-weight:900; }
.cc-sub{ font-size:12px; opacity:.85; }
.cc-action{ font-size:12px; opacity:.9; font-weight:800; }
.contact-foot{ margin-top:6px; font-size:12px; }

/* Mobile */
@media (max-width:720px){
.skills-grid{ grid-template-columns:1fr; }
  .t-item{ grid-template-columns: 1fr; }
.avatar-wrap{ width:120px; height:120px; }
}
@media (max-width:600px){
  body{ overflow:auto; }
  .desktop{
    height:auto;
    padding-bottom:60px;
  }
  .desk-icon{ display:inline-block; margin-right:10px; }
  .win.open{
    position:fixed;
    left:10px !important;
    top:10px !important;
    width:calc(100% - 20px) !important;
    height:calc(100% - 60px) !important;
    resize:none;
  }
}
/* ABOUT (scoped to #win-about) */
#win-about{ font-size:14px; }
#win-about .win-body{ padding:10px; }

#win-about .about-page{ background:#c0c0c0; }

#win-about .panel.pad.about-page{
  background:#c0c0c0;
  border:2px solid #c0c0c0;
  border-top-color:#ffffff;
  border-left-color:#ffffff;
  border-right-color:#808080;
  border-bottom-color:#808080;
}

#win-about .about-shell{
  display:grid;
  grid-template-columns:240px 1fr;
  gap:12px;
  align-items:start;
}

#win-about .about-side,
#win-about .about-main{ min-width:0; }

#win-about .dotframe{
  background:#fff;
  border:1px dotted #7f7f7f;
  padding:10px;
}

#win-about .about-id{
  background:linear-gradient(#f6f1df,#fffdf6);
  border:1px solid #b6b09f;
}
#win-about .about-id p{ font-size:12px; line-height:1.45; }

#win-about .about-main{
  display:flex;
  flex-direction:column;
  gap:10px;
  background:#fffdf6;
  border:2px solid #c0c0c0;
  border-top-color:#808080;
  border-left-color:#808080;
  border-right-color:#ffffff;
  border-bottom-color:#ffffff;
  padding:10px;
}
#win-about .about-main .about-card{ margin-top:0; }

#win-about .about-card.about-card-dot{
  background:#fffdf6;
  border:1px solid #b6b09f;
  padding:10px;
}

#win-about .group-title.ascii{
  position:relative;
  padding:6px 8px;
  background:#efe6c8;
  border-bottom:1px solid #b6b09f;
  margin:-10px -10px 10px;
  font-weight:900;
  color:#000;
}
#win-about .group-title.ascii::before{ content:""; }
#win-about .group-title.ascii::after{
  content:"  ─────────────────────";
  opacity:.25;
  white-space:nowrap;
}

#win-about .scan-rule{
  height:8px;
  margin:8px 0 10px;
  background:repeating-linear-gradient(to right,#000 0px,#000 2px,transparent 2px,transparent 6px);
  opacity:.28;
  filter:saturate(.8);
}
#win-about .scan-rule.tight{ height:6px; margin:10px 0; }

#win-about .muted{ opacity:.88; }
#win-about .bullets{ margin:8px 0 0 18px; }
#win-about .bullets li{ margin:6px 0; }

@media (max-width:720px){
  #win-about .about-shell{ grid-template-columns:1fr; }
}

/* PROJECTS */
#win-projects .panel{ background:#c0c0c0; }

#win-projects .panel-head{
  background:#efe6c8;
  border-bottom:1px solid #b6b09f;
  font-size:12px;
  padding:6px 10px;
}

#win-projects .list{
  background:#fffdf6;
  border:2px solid #c0c0c0;
  border-top-color:#808080;
  border-left-color:#808080;
  border-right-color:#ffffff;
  border-bottom-color:#ffffff;
  padding:0;
}

#win-projects .proj-item{
  padding:8px 10px;
  gap:12px;
  border:0;
  border-bottom:1px solid #e0dccf;
}

#win-projects .proj-item:nth-child(even){ background:#fbf6e6; }
#win-projects .proj-item:nth-child(odd){ background:#fffdf6; }

#win-projects .proj-item:hover{
  background:#dfefff;
  outline:1px dotted #000;
  outline-offset:-3px;
}

#win-projects .proj-main{ align-items:flex-start; }
#win-projects .li-left{ gap:10px; }
#win-projects .li-icn-img{
  width:20px;
  height:20px;
  margin-top:2px;
}

#win-projects .li-title{
  font-weight:900;
  line-height:1.15;
}
#win-projects .li-sub{
  margin-top:2px;
  font-size:12px;
  opacity:.9;
}

#win-projects .proj-actions{
  gap:10px;
  align-items:center;
}
#win-projects .proj-actions .ui-btn{
  height:24px;
  padding:2px 10px;
  font-size:12px;
}

#win-projects .proj-item .li-sub{ max-width:560px; }

#win-projects .statusbar{
  margin-top:0;
  border-top:1px solid #b6b09f;
  background:#c0c0c0;
}

/* SKILLS */
#win-skills .panel{ background:#c0c0c0; }

#win-skills .panel.pad{ background:#c0c0c0; }
#win-skills .skills-grid{ gap:10px; }

#win-skills .skills-group{
  background:#fffdf6;
  border:2px solid #c0c0c0;
  border-top-color:#808080;
  border-left-color:#808080;
  border-right-color:#ffffff;
  border-bottom-color:#ffffff;
  padding:10px;
}

#win-skills .skills-head{
  background:#dfe7d6;
  border-bottom:1px solid #9fb097;
  color:#000;
  padding:6px 8px;
  margin:-10px -10px 10px;
  font-weight:900;
}

#win-skills .skills-head::after{
  content:"  ─────────────";
  opacity:.25;
  white-space:nowrap;
}

#win-skills .pill{
  background:#fffdf6;
  font-size:12px;
  padding:3px 8px;
  border:2px solid #c0c0c0;
  border-top-color:#ffffff;
  border-left-color:#ffffff;
  border-right-color:#808080;
  border-bottom-color:#808080;
}

#win-skills .pill:hover{
  background:#e8f1ff;
  outline:1px dotted #000;
  outline-offset:-3px;
}

#win-skills .skills-note{
  background:#fbf6e6;
  border:1px solid #b6b09f;
}

#win-skills .statusbar{
  margin-top:8px;
  border-top:1px solid #b6b09f;
  background:#c0c0c0;
}

/* EXPERIENCE (plum accent) */
#win-experience .panel{ background:#c0c0c0; }
#win-experience .panel.pad{ background:#c0c0c0; }

#win-experience .panel-head{
  background:#efe6c8;
  border-bottom:1px solid #b6b09f;
  font-size:12px;
  padding:6px 10px;
}

#win-experience .timeline{
  background:#fffdf6;
  border:2px solid #c0c0c0;
  border-top-color:#808080;
  border-left-color:#808080;
  border-right-color:#ffffff;
  border-bottom-color:#ffffff;
  padding:8px;
  margin-top:0;
  position:relative;
  padding-top:34px;
}

#win-experience .t-item{
  background:#fffdf6;
  border:0;
  border-bottom:1px solid #e0dccf;
  padding:12px 10px;
  grid-template-columns:160px 1fr;
}

#win-experience .t-item:nth-child(even){ background:#fbf6e6; }

#win-experience .t-item:hover{
  background:#efe9ff;
  outline:1px dotted #000;
  outline-offset:-3px;
}

#win-experience .t-when{
  font-weight:900;
  opacity:.9;
  font-size:12px;
  letter-spacing:.2px;
}

#win-experience .t-title{
  display:inline-block;
  background:#e9ddff;
  border:1px solid #b7a0d6;
  padding:2px 6px;
  margin-bottom:4px;
}

#win-experience .t-sub{ opacity:.9; }
#win-experience .bullets li{ margin:6px 0; }

#win-experience .statusbar{
  margin-top:8px;
  border-top:1px solid #b6b09f;
  background:#c0c0c0;
}

#win-experience .timeline::before{
  content:"Role / Type                          Work / Project                                      Notes";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:28px;
  display:flex;
  align-items:center;
  padding:0 10px;
  font-size:12px;
  font-weight:900;
  background:#efe6c8;
  border-bottom:1px solid #b6b09f;
  box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #808080;
}

#win-experience .timeline::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:28px;
  pointer-events:none;
  background:linear-gradient(to right,
    transparent 0,
    transparent 28%,
    #b6b09f 28%,
    #ffffff 28.2%,
    transparent 28.2%,
    transparent 68%,
    #b6b09f 68%,
    #ffffff 68.2%,
    transparent 68.2%,
    transparent 100%);
  opacity:.9;
}

/* CONTACT (teal accent) */
#win-contact .panel{ background:#c0c0c0; }
#win-contact .panel.pad{ background:#c0c0c0; }

#win-contact .contact-hero{
  background:#d7efee;
  border:1px solid #8bb8b6;
  padding:10px;
  margin:-12px -12px 12px;
}

#win-contact .contact-badge{
  background:#fff;
  border-color:#000;
}

#win-contact .contact-card{
  background:#fffdf6;
  border:1px solid #b6b09f;
  padding:10px;
}
#win-contact .contact-card:nth-child(even){ background:#fbf6e6; }

#win-contact .contact-card:hover{
  background:#e6f6f6;
  outline:1px dotted #000;
  outline-offset:-3px;
}

#win-contact .cc-top{ gap:12px; }
#win-contact .cc-icn{ width:24px; height:24px; }

#win-contact .cc-title{ font-weight:900; }
#win-contact .cc-action{ font-size:12px; opacity:.9; }

#win-contact .contact-foot{
  background:#fffbe6;
  border:1px solid #c5b97c;
  padding:6px 8px;
}

#win-contact .statusbar{
  margin-top:8px;
  border-top:1px solid #b6b09f;
  background:#c0c0c0;
}