/* ================================
   Dustin J Allen — site styles
   Cream base + visible purple accents
   ================================ */

/* ---------- Tokens ---------- */
:root{
  /* Base */
  --cream:   #FFF8EC;
  --cream-2: #FFF3E0;
  --cream-3: #F6E9D4;
  --ink:     #1F1A14;
  --muted:   #5E564E;
  --line:    #E6DCCF;

  /* Purple family (frame + headings) */
  --purple-deep:   #3B1C55;
  --lavender-mid:  #CBB7EE;
  --lavender-soft: #E7DFF7;
  --periwinkle:    #90B6E8;

  --shadow: 0 8px 24px rgba(0,0,0,.06);
}

/* ---------- Base ---------- */
*,
*::before,
*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:"Quicksand",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.65;
  background:var(--cream);
  color:var(--ink);
}
h1,h2,h3{
  font-family:"Josefin Sans",sans-serif;
  color:var(--ink);
  margin:0 0 .5rem;
}
a{
  color:var(--purple-deep);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:.08em;
}
a:hover{ opacity:.9; }
:focus-visible{ outline:3px solid var(--lavender-mid); outline-offset:3px; border-radius:6px; }
hr{ border:none; border-top:2px solid var(--lavender-mid); margin:24px 0; }

/* ---------- Shell ---------- */
.content-wrapper{
  max-width:900px;
  margin:40px auto 0;
  background:var(--cream-2);
  border:1px solid var(--line);
  border-radius:24px;
  padding:36px;
  box-shadow:
    0 10px 28px rgba(0,0,0,.10),
    0 0 0 6px #fff,
    0 0 0 16px var(--lavender-mid),
    0 0 0 26px var(--purple-deep);
  color:var(--ink);
}
.header-content h1{ color:var(--purple-deep); margin-bottom:.25rem; }
.header-content h2{ font-size:1.15em; font-weight:700; color:#0f2433; margin:0; }

/* ---------- Nav ---------- */
.nav-bar{
  display:flex; gap:60px; list-style:none;
  padding:12px 0; margin:15px 0 48px;
  border-top:2px solid var(--lavender-mid);
  border-bottom:2px solid var(--lavender-mid);
}
.nav-bar li{ padding:8px 14px; border-radius:6px; white-space:nowrap; }
.nav-bar a{ color:var(--purple-deep); text-decoration:none; }
.nav-bar li:hover{ background:var(--lavender-soft); }

/* ---------- Panels ---------- */
.main-content-body{
  border-radius:20px;
  background:var(--cream-3);
  color:var(--ink);
  border:1px solid var(--line);
  padding:24px;
}
.bio-section{
  background:var(--cream-2);
  border:1px solid var(--line);
  border-radius:20px;
  padding:24px;
  box-shadow:var(--shadow);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; padding:10px 14px; border-radius:10px;
  text-decoration:none; color:#fff;
  background:var(--purple-deep);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:var(--shadow);
  transition:transform .12s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn.xs{ padding:6px 10px; font-size:.9rem; }

/* ---------- Index symmetry ---------- */
.main-content{ display:flex; flex-direction:column; gap:24px; }
.image-section{
  background:#FFF3E0; border:1px solid #E6DCCF; border-radius:20px;
  padding:24px; box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center;
}
.image-section img{
  width:100%; max-width:320px; height:auto; border-radius:14px;
  border:10px solid var(--periwinkle); background:#D9E7FA;
}
@media (min-width:768px){
  .main-content{ flex-direction:row; align-items:flex-start; }
  .bio-section{ flex:2 1 460px; }
  .image-section{ flex:1 1 320px; min-width:260px; }
}

/* ---------- About layout (sidebar stacks under LinkedIn) ---------- */
.bio-flex{ display:flex; flex-direction:column; gap:18px; }
.bio-text,.bio-sidebar{
  background:var(--cream-2); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow);
}
.bio-text{ padding:22px; }
.bio-sidebar{
  padding:14px; display:flex; flex-direction:column; align-items:center; gap:10px;
}
.bio-sidebar .badge-base,
.bio-sidebar .LI-profile-badge{ display:block; width:100%; max-width:320px; min-height:340px; }
.murakami-card{
  width:100%; max-width:320px; text-align:center;
  background:#FFF3E0; border:1px solid #E6DCCF; border-radius:14px; padding:10px 12px; box-shadow:var(--shadow);
}
.murakami-card img{ width:100%; max-width:240px; border-radius:10px; margin:0 auto 8px; display:block; }
.murakami-card p{ margin:0; font-size:.95rem; line-height:1.45; }
@media (min-width:900px){
  .bio-flex{ display:grid; grid-template-columns:1.6fr .9fr; gap:24px; align-items:start; }
  .bio-sidebar{ position:sticky; top:16px; }
}

/* ---------- Portfolio ---------- */
.portfolio{ display:flex; flex-direction:column; gap:32px; }
.portfolio-intro h2{ color:var(--purple-deep); }
.toc .toc-title{ color:var(--purple-deep); }

/* Card */
.portfolio-section{
  position:relative; overflow:clip; background:#fff;
  border:2px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:24px;
}
.portfolio-section > h2{ margin-bottom:16px; padding-bottom:6px; border-bottom:2px solid var(--line); color:var(--ink); }
.portfolio-section::before{ content:""; position:absolute; left:0; top:0; height:10px; width:100%; border-radius:16px 16px 0 0; }

/* Accent palette (class-based — the source of truth) */
.portfolio-section.green   { --accent:#2E7D5B; } /* Hypernomicon */
.portfolio-section.grayblue{ --accent:#2E3A4F; } /* DICE.fm */
.portfolio-section.yellow  { --accent:#F1B100; } /* Jimmy’s */
.portfolio-section.brown   { --accent:#6E4B3A; } /* Barkerville (all) */
.portfolio-section.darkred { --accent:#8E2C2A; } /* TTCWatch */
.portfolio-section.darkblue{ --accent:#1E3A8A; } /* Personal projects */

/* Apply accent */
.portfolio-section[class]{ border-color:var(--accent); }
.portfolio-section[class] > h2{ color:var(--accent); border-bottom-color:var(--accent); }
.portfolio-section[class]::before{ background:var(--accent); }

/* Media */
.media{ margin:12px 0; }
.media img{
  display:block; margin:0 auto; max-width:100%; height:auto;
  border-radius:12px; box-shadow:var(--shadow); transition:transform .2s ease;
  max-width:288px; max-height:288px;
}
.media img:hover{ transform:scale(1.02); }
.media figcaption{ color:var(--muted); font-size:.95rem; margin-top:6px; }

/* CV cards */
.cv-grid{ display:grid; grid-template-columns:1fr; gap:18px; padding:18px 22px 8px; }
@media (min-width:768px){ .cv-grid{ grid-template-columns:repeat(2,minmax(260px,1fr)); } }
.cv-card{
  background:var(--cream-2); color:var(--ink);
  border:1px solid var(--line); border-radius:18px; padding:18px; box-shadow:var(--shadow);
}
.cv-card h3{ margin:0 0 10px; font-weight:700; border-bottom:1px solid rgba(31,26,20,.15); padding-bottom:6px; }

/* Contact */
.contact-grid{
  display:flex; flex-wrap:wrap; gap:24px; margin-top:20px;
  background:var(--cream-2); padding:0; border:1px solid var(--line);
  border-radius:18px; box-shadow:var(--shadow);
}
.contact-card{ flex:1 1 320px; background:var(--cream-2); color:var(--ink); border:1px solid var(--line); border-radius:18px; padding:20px; box-shadow:var(--shadow); }
.contact-card h3{ margin:0 0 10px; font-weight:700; border-bottom:1px solid rgba(31,26,20,.15); padding-bottom:6px; }
.contact-card a:not(.btn){ color:var(--purple-deep); }

/* Downloadable Portfolio CTA */
.download-portfolio{
  background:#FFF3E0; border:1px solid #E6DCCF; border-radius:14px;
  padding:12px 16px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; box-shadow:var(--shadow);
}
.download-portfolio .note{ margin:0; color:var(--muted); }
.btn.pdf{ background:var(--purple-deep); color:#fff; border:1px solid rgba(0,0,0,.15); }

/* Small nav tweaks */
@media (max-width:600px){
  .content-wrapper{ padding:14px; }
  .nav-bar{ flex-wrap:wrap; gap:14px; font-size:.96em; margin-bottom:32px; }
  .nav-bar li{ padding:4px 6px; }
}