/* ── portfolio.travisteo.com ── */

/* ── HERO ── */
.hero-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:center;
  min-height:calc(100vh - var(--nav-h));
  padding:60px 48px;
  max-width:1060px;
  margin:0 auto;
}
.hero-eyebrow { font-family:var(--mono); font-size:12px; color:var(--accent); letter-spacing:2px; margin-bottom:16px; opacity:0; animation:fadeUp 0.5s forwards 0.1s; }
.hero-name    { font-size:clamp(40px,5vw,68px); font-weight:700; letter-spacing:-2px; line-height:1.05; margin-bottom:12px; color:var(--text); opacity:0; animation:fadeUp 0.5s forwards 0.25s; }
.hero-role    { font-family:var(--mono); font-size:12px; color:var(--accent2); margin-bottom:20px; opacity:0; animation:fadeUp 0.5s forwards 0.4s; }
.hero-desc    { font-size:15px; color:var(--text2); line-height:1.8; margin-bottom:32px; opacity:0; animation:fadeUp 0.5s forwards 0.55s; }
.hero-cta     { display:flex; gap:12px; flex-wrap:wrap; opacity:0; animation:fadeUp 0.5s forwards 0.7s; }
.hero-term    { opacity:0; animation:fadeLeft 0.6s forwards 0.5s; }

/* ── ABOUT ── */
.about-grid {
  display:grid;
  grid-template-columns:1fr 220px;
  gap:52px;
  align-items:start;
}
.about-grid p { font-size:15px; color:var(--text2); line-height:1.8; margin-bottom:16px; }
.about-grid strong { color:var(--text); }
.about-grid a { color:var(--accent); text-decoration:none; }
.about-grid a:hover { text-decoration:underline; }

/* ── PROJECTS ── */
/* proj-card, proj-num etc. defined in shared.css */

/* ── SKILLS ── */
.skill-proof { font-family:var(--mono); font-size:10px; color:var(--cyan); margin-top:6px; }
.skill-proof a { color:var(--cyan); text-decoration:none; }
.skill-proof a:hover { text-decoration:underline; }

/* ── EVENTS ── */
.events-layout {
  display:grid;
  grid-template-columns:1fr 280px;
  gap:32px;
  align-items:start;
}
.event-card {
  background:var(--card);
  border:1px solid var(--border);
  padding:20px;
  margin-bottom:12px;
  transition:border-color 0.2s;
}
.event-card:hover { border-color:var(--accent); }
.event-badge   { font-family:var(--mono); font-size:10px; padding:2px 8px; border-radius:2px; margin-bottom:8px; display:inline-block; }
.badge-attended { background:rgba(158,206,106,0.15); color:var(--green); border:1px solid rgba(158,206,106,0.3); }
.badge-upcoming { background:rgba(122,162,247,0.12); color:var(--accent); border:1px solid rgba(122,162,247,0.3); }
.event-date  { font-family:var(--mono); font-size:10px; color:var(--muted); margin-bottom:4px; }
.event-title { font-size:15px; font-weight:700; margin-bottom:2px; color:var(--text); }
.event-org   { font-family:var(--mono); font-size:11px; color:var(--accent); margin-bottom:8px; }
.event-desc  { font-size:13px; color:var(--text2); line-height:1.7; margin-bottom:10px; }

/* ── CALENDAR ── */
.cal-wrap { background:var(--card); border:1px solid var(--border); padding:20px; position:sticky; top:100px; }
.cal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.cal-label { font-family:var(--mono); font-size:12px; font-weight:700; color:var(--text); }
.cal-nav   { background:none; border:1px solid var(--border); color:var(--muted); cursor:pointer; padding:4px 10px; font-family:var(--mono); font-size:11px; transition:all 0.15s; }
.cal-nav:hover { border-color:var(--accent); color:var(--accent); }
.cal-grid  { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.cal-hdr   { font-family:var(--mono); font-size:9px; color:var(--muted); text-align:center; padding:4px 0; }
.cal-cell  { font-family:var(--mono); font-size:10px; text-align:center; padding:6px 2px; color:var(--text2); cursor:pointer; border-radius:2px; transition:background 0.1s; min-height:28px; }
.cal-cell:hover   { background:rgba(122,162,247,0.1); color:var(--accent); }
.cal-cell.today   { background:rgba(122,162,247,0.15); color:var(--accent); font-weight:700; }
.cal-cell.attended{ background:rgba(158,206,106,0.2); color:var(--green); }
.cal-cell.upcoming{ background:rgba(122,162,247,0.2); color:var(--accent); }
.cal-cell.marked  { background:rgba(187,154,247,0.2); color:var(--accent2); }
.cal-legend { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.cal-leg-item { display:flex; align-items:center; gap:4px; font-family:var(--mono); font-size:9px; color:var(--muted); }
.cal-leg-dot  { width:8px; height:8px; border-radius:50%; }

/* ── ADD EVENT ── */
.evt-add-form { background:var(--card); border:1px solid var(--border); padding:20px; margin-top:16px; }
.evt-form-title { font-family:var(--mono); font-size:10px; color:var(--muted); letter-spacing:2px; text-transform:uppercase; margin-bottom:12px; }
.evt-input { width:100%; background:var(--bg); border:1px solid var(--border); color:var(--text); font-family:var(--mono); font-size:11px; padding:8px 10px; margin-bottom:8px; outline:none; transition:border-color 0.15s; }
.evt-input:focus { border-color:var(--accent); }
.evt-select { width:100%; background:var(--bg); border:1px solid var(--border); color:var(--text); font-family:var(--mono); font-size:11px; padding:8px 10px; margin-bottom:8px; outline:none; cursor:pointer; }
.evt-add-btn { width:100%; font-family:var(--mono); font-size:11px; padding:9px; background:var(--accent); color:var(--bg); border:none; cursor:pointer; font-weight:700; transition:background 0.15s; }
.evt-add-btn:hover { background:var(--accent2); }

/* ── WRITEUPS GRID ── */
.wu-card { background:var(--card); border:1px solid var(--border); padding:20px; transition:border-color 0.2s,transform 0.2s; }
.wu-card:hover { border-color:var(--accent); transform:translateY(-2px); }

/* ── CONTACT MINI ── */
.contact-mini { display:flex; flex-wrap:wrap; gap:12px; }
.ct-mini-link { display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; color:var(--accent); text-decoration:none; padding:8px 14px; border:1px solid var(--border); background:var(--card); transition:all 0.15s; }
.ct-mini-link:hover { border-color:var(--accent); background:rgba(122,162,247,0.1); }

/* ── THM BADGE ── */
.thm-badge-wrap { margin-top:12px; }

/* ── RESPONSIVE ── */
@media (max-width:900px) {
  .hero-grid { grid-template-columns:1fr; padding:40px 20px; gap:32px; min-height:auto; }
  .hero-term { display:none; }
  .about-grid { grid-template-columns:1fr; gap:32px; }
  .events-layout { grid-template-columns:1fr; }
  .cal-wrap { position:static; }
}
@media (max-width:640px) {
  .hero-name { letter-spacing:-1px; }
}